Merge pull request #126 from KUSITMS-29th-TEAM-B/feat/#101

Feat/#101 QA 반영
KUSITMS-29th-TEAM-B · May 21, 2024 · bd460b5 · bd460b5
2 parents cade27c + dddf05c
commit bd460b5
Show file tree

Hide file tree

Showing 18 changed files with 315 additions and 101 deletions.
diff --git a/src/assets/images/image_profile_bg.png b/src/assets/images/image_profile_bg.png
diff --git a/src/components/JD/Announcement.tsx b/src/components/JD/Announcement.tsx
@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 import { JobAnnouncement } from "../../types/type";
 import { useNavigate } from "react-router-dom";
 import StateBox from "./StateBox";
+import { formatDate } from "../../pages/JDDetailPage";
 
 interface JobAnnouncementProps {
   announcement: JobAnnouncement;
@@ -11,18 +12,20 @@ interface JobAnnouncementProps {
 const JobAnnouncementCard: React.FC<JobAnnouncementProps> = ({
   announcement,
 }) => {
-  const { id, title, description, recruitmentPeriod, status, dday } =
+  const { id, title, description, recruitmentPeriod, status, dday, createdAt } =
     announcement;
   const nav = useNavigate();
 
   return (
     <Container onClick={() => nav(`/jd/${id}`)}>
       <TopContainer>
         <StatusContainer>
-          {status !== "CLOSED" && <DdayContainer>{"D-" + dday}</DdayContainer>}
+          {status !== "CLOSED" && (
+            <DdayContainer>{dday === 0 ? "D-DAY" : "D-" + dday}</DdayContainer>
+          )}
           {status !== "NOT_APPLIED" && <StateBox status={status} />}
         </StatusContainer>
-        <DateContainer>24.01.19</DateContainer>
+        <DateContainer>{formatDate(createdAt)}</DateContainer>
       </TopContainer>
       <Title>{title}</Title>
       <Description>{description}</Description>

diff --git a/src/components/JD/ExpContainer.tsx b/src/components/JD/ExpContainer.tsx
@@ -1,20 +1,46 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import ExpData from "../../services/JD/ExpData";
 import { useRecoilState } from "recoil";
 import { detailStore } from "../../store/jdStore";
 import { questions } from "../../assets/data/questions";
 import JDChip from "./JDChip";
 import ArrowIcon from "../../assets/icons/icon_arrow_right_main500.svg";
+import { getCookie } from "../../services/cookie";
+import { getExperience } from "../../services/Experience/experienceApi";
 
 interface JobContainerProps {
   expId: number | string;
 }
 
 const ExperienceBox: React.FC<JobContainerProps> = ({ expId }) => {
   const expData = ExpData[0];
+  const user = getCookie("user");
+  const [apiData, setapiData] = useState({
+    id: "",
+    title: "",
+    parentTag: "",
+    childTag: "",
+    strongPoints: "",
+    contents: [],
+  });
+
+  useEffect(() => {
+    // getExperienceData(expId.toString(), user.token);
+  }, []);
+
   const [detailId, setDetailId] = useRecoilState<number | string>(detailStore);
 
+  const getExperienceData = async (expId: string, token: string) => {
+    try {
+      const response = await getExperience(expId, token);
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify(error));
+    }
+  };
+
   return (
     <ExpContainer>
       <TopContainer>

diff --git a/src/components/JD/Experience.tsx b/src/components/JD/Experience.tsx
@@ -47,7 +47,7 @@ const Experience: React.FC<ExpProps> = ({
   const isSection = type === "section";
 
   // 경험의 선택된 질문 답변
-  const answer = detail?.[(question || 1)-1]?.answer;
+  const answer = detail?.[(question || 1) - 1]?.answer;
 
   const handleClick = () => {
     setDetailId(id);

diff --git a/src/components/JD/ExperienceList.tsx b/src/components/JD/ExperienceList.tsx
@@ -1,11 +1,10 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ExpData from "../../services/JD/ExpData";
 import Experience from "./Experience";
 import styled from "styled-components";
 import FillfilterIcon from "../../assets/icons/icon_filter_fill.svg";
 import BlankfilterIcon from "../../assets/icons/icon_filter_blank.svg";
 import SearchIcon from "../../assets/icons/icon_search_grey500.svg";
-import { TagList } from "../../services/JD/TagData";
 import ArrowIcon_net from "../../assets/icons/icon_arrow_right_net500.svg";
 import ArrowIcon_main from "../../assets/icons/icon_arrow_right_main500.svg";
 import FilterRemoveIcon from "../../assets/icons/icon_filter_remove.svg";
@@ -15,6 +14,9 @@ import PopperPagination from "../Experience/PopperPagination";
 import { basicKeywords } from "../../assets/data/keywords";
 import { myKeywords } from "../../services/Experience/myKeywords";
 import Checkbox from "../common/Checkbox";
+import { getAllExperienceList } from "../../services/JD/ExperienceApi";
+import { getCookie } from "../../services/cookie";
+import { getAllTags } from "../../services/JD/tagApi";
 
 type TabType = "basic" | "my";
 
@@ -37,6 +39,8 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
   const bookmarkData = ExpData.filter((post) => post.bookmark); // 북마크된 데이터들
   const [keywordTabOption, setKeywordTabOption] =
     React.useState<TabType>("basic");
+  const user = getCookie("user");
+  const [experienceData, setExperienceData] = useState({});
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -62,6 +66,21 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
     lastMyKeywordIndex
   );
 
+  useEffect(() => {
+    // getExperienceList(user.token);
+  }, []);
+
+  //모든 경험리스트 불러오기
+  const getExperienceList = async (token: string) => {
+    try {
+      const response = await getAllExperienceList(token);
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify(error));
+    }
+  };
+
   // 체크된 역량 키워드 리스트
   const [checkedKeywords, setCheckedKeywords] = React.useState<string[]>([]);
 
@@ -104,6 +123,24 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (mainTag) {
+      console.log("maintag: " + mainTag);
+    }
+  }, [mainTag]);
+
+  useEffect(() => {
+    if (subTag) {
+      console.log("subtag: " + subTag);
+    }
+  }, [subTag]);
+
+  useEffect(() => {
+    if (searchText) {
+      console.log("search: " + searchText);
+    }
+  }, [searchText]);
+
   return (
     <StyledContainer>
       {!showDetail ? (
@@ -315,30 +352,71 @@ interface TagPopupProps {
   onSelect: (mainTag: string, subTag?: string) => void;
 }
 
+interface ChildTag {
+  id: string;
+  name: string;
+}
+
+interface Tag {
+  id: string;
+  name: string;
+  childTags: ChildTag[];
+}
+
 const TagPopup: React.FC<TagPopupProps> = ({ onSelect }) => {
-  const [visibleSubTag, setVisibleSubTag] = useState<number | null>(null);
+  const [visibleSubTag, setVisibleSubTag] = useState<string | null>(null);
+  const [tagList, setTagList] = useState<Tag[]>([]);
+  const user = getCookie("user");
+
+  const getTagList = async (token: string) => {
+    try {
+      const response = await getAllTags(token);
+      console.log(response);
+      const list = response.data.tags.map((tag: Tag) => ({
+        id: tag.id,
+        name: tag.name,
+        childTags: tag.childTags,
+      }));
+      setTagList(list);
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify(error));
+    }
+  };
+
+  useEffect(() => {
+    getTagList(user.token);
+  }, []);
 
-  const toggleSubTags = (id: number, mainTag: string) => {
-    onSelect(mainTag);
+  const toggleSubTags = (id: string) => {
     if (visibleSubTag === id) {
       setVisibleSubTag(null);
     } else {
       setVisibleSubTag(id);
     }
   };
+
   return (
     <PopupContainer>
-      {TagList.map((tag) => (
+      {tagList.map((tag) => (
         <div key={tag.id}>
-          <Tag onClick={() => toggleSubTags(tag.id, tag.mainTag)}>
+          <Tag
+            onClick={() => {
+              toggleSubTags(tag.id);
+              onSelect(tag.name);
+            }}
+          >
             <img src={ArrowIcon_net} alt="arrow" />
-            {tag.mainTag}
+            {tag.name}
           </Tag>
           {visibleSubTag === tag.id &&
-            tag.subTag.map((sub) => (
-              <SubTag key={sub} onClick={() => onSelect(tag.mainTag, sub)}>
+            tag.childTags.map((child) => (
+              <SubTag
+                key={child.id}
+                onClick={() => onSelect(tag.name, child.name)}
+              >
                 <img src={ArrowIcon_net} alt="arrow" />
-                {sub}
+                {child.name}
               </SubTag>
             ))}
         </div>

diff --git a/src/components/JD/JDContainer.tsx b/src/components/JD/JDContainer.tsx
@@ -4,8 +4,9 @@ import StateBox from "./StateBox";
 import calendarIcon from "../../assets/icons/icon_calendar.svg";
 import linkIcon from "../../assets/icons/icon_link.svg";
 import { JobDescriptionAPI } from "../../types/type";
-import { jobdescriptionget } from "../../services/jd";
+import { jobdescriptionget } from "../../services/JD/jdApi";
 import { formatDateRange } from "../../pages/JDListPage";
+import { formatDate } from "../../pages/JDDetailPage";
 
 interface JobContainerProps {
   jdId: string;
@@ -26,15 +27,6 @@ const JDContainer: React.FC<JobContainerProps> = ({ jdId, token }) => {
     endedAt: null,
   });
 
-  const formatDate = (createdAt: Date) => {
-    const date = new Date(createdAt);
-    const formattedDate = `${date.getDate()}.${date.getMonth() + 1}.${date
-      .getFullYear()
-      .toString()
-      .substring(2)}`;
-    return formattedDate;
-  };
-
   const getJobData = async (jdId: string, token: string) => {
     try {
       const response = await jobdescriptionget(jdId, token);
@@ -43,15 +35,14 @@ const JDContainer: React.FC<JobContainerProps> = ({ jdId, token }) => {
         enterpriseName: response.data.enterpriseName,
         title: response.data.title,
         remainingDate: response.data.remainingDate,
-        content: response.data.link,
+        content: response.data.content,
         writeStatus: response.data.writeStatus,
         link: response.data.link,
         createdAt: FormatstartDate,
         startAt: response.data.startedAt,
         endedAt: response.data.endedAt,
       };
       setJdData(jdApiData);
-      console.log(jdData);
     } catch (error) {
       console.error(error);
       alert(JSON.stringify(error));
@@ -71,9 +62,9 @@ const JDContainer: React.FC<JobContainerProps> = ({ jdId, token }) => {
       <JobTopBox>
         <JobTopTitleBox>
           <div className="job_detail_dday">{"D-" + jdData.remainingDate}</div>
-          <div className="job_detail_title">{jdData.title}</div>
+          <div className="job_detail_title">{jdData.enterpriseName}</div>
         </JobTopTitleBox>
-        <JobTopDescription>{jdData.content}</JobTopDescription>
+        <JobTopDescription>{jdData.title}</JobTopDescription>
         <JobSubBox>
           <div className="period">
             <img src={calendarIcon} alt="calendar" width={16} height={16} />
@@ -110,6 +101,7 @@ export default JDContainer;
 
 const ScrollDiv = styled.div`
     overflow-y: auto;
+    width: 100%;
     &::-webkit-scrollbar {
         width: 4px;
     }

diff --git a/src/pages/ApplyEditPage.tsx b/src/pages/ApplyEditPage.tsx
@@ -16,7 +16,7 @@ import DiscardModal from "../components/JD/DiscardModal";
 import JDContainer from "../components/JD/JDContainer";
 import ExperienceBox from "../components/JD/ExpContainer";
 import { ApplyAPI } from "../types/type";
-import { applyget, applypatch, statuspatch } from "../services/jd";
+import { applyget, applypatch, statuspatch } from "../services/JD/jdApi";
 import { getCookie } from "../services/cookie";
 
 const ApplyEditPage: React.FC = () => {
@@ -27,7 +27,7 @@ const ApplyEditPage: React.FC = () => {
     { question: "", answer: "" },
   ]); //문항 데이터
   const [editing, setEditing] = useState(false); //수정중 여부
-  const [completed, setCompleted] = useState(""); //작성 완료
+  const [completed, setCompleted] = useState<string>(""); //작성 완료
   const [isAllFilled, setIsAllFilled] = useState(false); // 문항이 빈칸이 없는지 검사
 
   const [detailId, setDetailId] = useRecoilState<number | string>(detailStore); //경험의 고유 id(0이 아니여야함)
@@ -124,6 +124,8 @@ const ApplyEditPage: React.FC = () => {
       //저장기능
     } else if (!editing && !completed) {
       setEditing(!editing);
+    } else if (!editing && completed === "작성중") {
+      setEditing(!editing);
     }
   };
 
@@ -275,13 +277,17 @@ const ApplyEditPage: React.FC = () => {
           </TopTitleBar>
           <EditContainer>
             <TopWrapper>
-              <ToggleWrapper>
-                작성완료
-                <Toggle
-                  isActive={completed === "작성완료"}
-                  onClick={() => (!editing ? handleCompeletedButton() : null)}
-                />
-              </ToggleWrapper>
+              {!editing ? (
+                <ToggleWrapper>
+                  작성완료
+                  <Toggle
+                    isActive={completed === "작성완료"}
+                    onClick={() => (!editing ? handleCompeletedButton() : null)}
+                  />
+                </ToggleWrapper>
+              ) : (
+                <ToggleWrapper></ToggleWrapper>
+              )}
               {editing ? (
                 <SaveButton
                   isNotNull={isAllFilled}
@@ -293,11 +299,12 @@ const ApplyEditPage: React.FC = () => {
                 >
                   저장
                 </SaveButton>
+              ) : completed === "작성완료" ? (
+                <EditButton iscanEdit={true} onClick={handleEditButton}>
+                  수정
+                </EditButton>
               ) : (
-                <EditButton
-                  iscanEdit={completed === "작성중"}
-                  onClick={handleEditButton}
-                >
+                <EditButton iscanEdit={false} onClick={handleEditButton}>
                   수정
                 </EditButton>
               )}
@@ -476,7 +483,7 @@ const SaveButton = styled.button<{ isNotNull: boolean }>`
     display: inline-flex;
     padding: 0.625rem 4rem;
     justify-content: center;
-    align-items: center;
+    align-items: end;
     color:#FFF;
     gap: 0.625rem;
     font-size: 1rem;

diff --git a/src/pages/ApplyPage.tsx b/src/pages/ApplyPage.tsx
@@ -16,7 +16,7 @@ import DiscardModal from "../components/JD/DiscardModal";
 import JDContainer from "../components/JD/JDContainer";
 import ExperienceBox from "../components/JD/ExpContainer";
 import { ApplyAPI } from "../types/type";
-import { applypost } from "../services/jd";
+import { applypost } from "../services/JD/jdApi";
 import { getCookie } from "../services/cookie";
 
 const ApplyPage: React.FC = () => {