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

Feat/#101
KUSITMS-29th-TEAM-B · May 22, 2024 · 6e74a1d · 6e74a1d
2 parents f0b7eed + 3215f60
commit 6e74a1d
Show file tree

Hide file tree

Showing 9 changed files with 344 additions and 64 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -34,7 +34,7 @@ const App: React.FC = () => {
         </Route>
         {/* 공고 상세  / JDDetailPage */}
         <Route element={<PrivateRoute />} path="/">
-          <Route path="/jd/:id" element={<JDDetailPage />} />
+          <Route path="/jd/:jdId" element={<JDDetailPage />} />
         </Route>
         {/* 공고 수정  / JDEditPage*/}
         <Route element={<PrivateRoute />} path="/">

diff --git a/src/components/JD/Announcement.tsx b/src/components/JD/Announcement.tsx
@@ -36,6 +36,7 @@ const JobAnnouncementCard: React.FC<JobAnnouncementProps> = ({
 
 const Container = styled.div`
     border-radius: 0.75rem;
+    cursor: pointer;
     display: flex;
     padding: 1.25rem;
     flex-direction: column;

diff --git a/src/components/JD/ExperienceList.tsx b/src/components/JD/ExperienceList.tsx
@@ -14,16 +14,51 @@ 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 {
+  getAllExperienceList,
+  searchTagExperienceList,
+  searchTextExperienceList,
+} from "../../services/JD/ExperienceApi";
 import { getCookie } from "../../services/cookie";
 import { getAllTags } from "../../services/JD/tagApi";
+import { useParams } from "react-router-dom";
+import { formatDateRange } from "../../pages/JDListPage";
 
 type TabType = "basic" | "my";
 
 interface ExperienceListProps {
   showBookmarksOnly: boolean;
 }
 
+type StrongPointAPI = {
+  id: string;
+  name: string;
+};
+
+type ExpTagAPI = {
+  id: string;
+  name: string;
+};
+
+type ContentAPI = {
+  question: string;
+  answer: string;
+};
+
+type ExperienceAPI = {
+  id: string;
+  title: string;
+  parentTag: ExpTagAPI;
+  childTag: ExpTagAPI;
+  strongPoints: StrongPointAPI[];
+  contents: ContentAPI[];
+  startedAt: string;
+  endedAt: string;
+  bookmarked: "ON" | "OFF";
+};
+
+type Experiences = ExperienceAPI[];
+
 const ExperienceList: React.FC<ExperienceListProps> = ({
   showBookmarksOnly,
 }) => {
@@ -36,11 +71,117 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
   const [mainTag, setMainTag] = useState<string>(""); // 선택된 상위태그
   const [subTag, setSubTag] = useState<string>(""); //선택된 하위태그
   const [filterCount, setfilterCount] = useState<number>(-1); //검색된 경험의 숫자, 검색 안된 상태에서는 -1
-  const bookmarkData = ExpData.filter((post) => post.bookmark); // 북마크된 데이터들
   const [keywordTabOption, setKeywordTabOption] =
     React.useState<TabType>("basic");
   const user = getCookie("user");
-  const [experienceData, setExperienceData] = useState({});
+  const [experienceData, setExperienceData] = useState<Experiences>([
+    {
+      id: "fa0a5813-c879-432d-b276-24364847534c",
+      title: "경험 제목1 ",
+      parentTag: {
+        id: "c191d753-0c59-42eb-8245-79ee5c9c5797",
+        name: "상위 태그 이름",
+      },
+      childTag: {
+        id: "860c446b-a021-43d5-9da6-5034a5bdaee7",
+        name: "하위 태그 이름",
+      },
+      strongPoints: [
+        {
+          id: "fdbf03bf-c1a3-4442-997e-467605868052",
+          name: "역량 키워드 이름 1",
+        },
+        {
+          id: "096c3d2e-4073-4724-9a15-c1d6617c63a1",
+          name: "역량 키워드 이름 2",
+        },
+      ],
+      contents: [
+        {
+          question: "질문1",
+          answer: "답변1",
+        },
+        {
+          question: "질문2",
+          answer: "답변2",
+        },
+      ],
+      startedAt: "2024-05-22T07:45:23.720822702",
+      endedAt: "2024-05-23T07:45:23.720832019",
+      bookmarked: "ON",
+    },
+    {
+      id: "7694c6e7-b7a8-4ee8-a698-67c345932663",
+      title: "경험 제목 2",
+      parentTag: {
+        id: "c191d753-0c59-42eb-8245-79ee5c9c5797",
+        name: "상위 태그 이름",
+      },
+      childTag: {
+        id: "860c446b-a021-43d5-9da6-5034a5bdaee7",
+        name: "하위 태그 이름",
+      },
+      strongPoints: [
+        {
+          id: "fdbf03bf-c1a3-4442-997e-467605868052",
+          name: "역량 키워드 이름 1",
+        },
+        {
+          id: "096c3d2e-4073-4724-9a15-c1d6617c63a1",
+          name: "역량 키워드 이름 2",
+        },
+      ],
+      contents: [
+        {
+          question: "질문1",
+          answer: "답변1",
+        },
+        {
+          question: "질문2",
+          answer: "답변2",
+        },
+      ],
+      startedAt: "2023-05-22T07:45:23.720822702",
+      endedAt: "2024-05-23T07:45:23.720832019",
+      bookmarked: "OFF",
+    },
+    {
+      id: "7694c6e7-b7a8-4ee8-a698-67c345932663",
+      title: "경험 제목 3",
+      parentTag: {
+        id: "c191d753-0c59-42eb-8245-79ee5c9c5797",
+        name: "상위 태그 이름",
+      },
+      childTag: {
+        id: "860c446b-a021-43d5-9da6-5034a5bdaee7",
+        name: "하위 태그 이름",
+      },
+      strongPoints: [
+        {
+          id: "fdbf03bf-c1a3-4442-997e-467605868052",
+          name: "역량 키워드 이름 1",
+        },
+        {
+          id: "096c3d2e-4073-4724-9a15-c1d6617c63a1",
+          name: "역량 키워드 이름 2",
+        },
+      ],
+      contents: [
+        {
+          question: "질문1",
+          answer: "답변1",
+        },
+        {
+          question: "질문2",
+          answer: "답변2",
+        },
+      ],
+      startedAt: "2023-05-22T07:45:23.720822702",
+      endedAt: "2024-05-23T07:45:23.720832019",
+      bookmarked: "ON",
+    },
+  ]);
+  const jdId = useParams().jdId;
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -67,13 +208,51 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
   );
 
   useEffect(() => {
-    // getExperienceList(user.token);
+    if (jdId) {
+      // getExperienceList(jdId, user.token);
+    }
   }, []);
 
   //모든 경험리스트 불러오기
-  const getExperienceList = async (token: string) => {
+  const getExperienceList = async (jdId: string, token: string) => {
     try {
-      const response = await getAllExperienceList(token);
+      const response = await getAllExperienceList(jdId, token);
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify(error));
+    }
+  };
+
+  const getSearchedExperienceList = async (
+    jdId: string,
+    searchText: string,
+    token: string
+  ) => {
+    // try {
+    //   const response = await searchTextExperienceList(jdId, searchText, token);
+    //   console.log(response);
+    //   setExperienceData(response.data.experiences);
+    //   console.log(experienceData);
+    // } catch (error) {
+    //   console.error(error);
+    //   alert(JSON.stringify(error));
+    // }
+  };
+
+  const getFilteredExperienceList = async (
+    jdId: string,
+    parenttag: string,
+    childtag: string | null,
+    token: string
+  ) => {
+    try {
+      const response = await searchTagExperienceList(
+        jdId,
+        parenttag,
+        childtag,
+        token
+      );
       console.log(response);
     } catch (error) {
       console.error(error);
@@ -101,12 +280,24 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
   };
 
   // 역량 키워드 필터된 경험 데이터, 북마크
-  const filteredExpData = ExpData.filter((item) =>
-    item.tags.some((tag) => checkedKeywords.includes(tag))
-  );
-  const filteredbookedData = bookmarkData.filter((item) =>
-    item.tags.some((tag) => checkedKeywords.includes(tag))
-  );
+  const filteredExpData = experienceData.filter((experience) => {
+    const strongPointNames = experience.strongPoints.map((point) => point.name);
+    const matchedKeywords = strongPointNames.filter((name) =>
+      checkedKeywords.includes(name)
+    );
+    return matchedKeywords.length > 0;
+  });
+  const bookedData = experienceData.filter((experience) => {
+    // 북마크가 ON인 요소만 필터링
+    return experience.bookmarked === "ON";
+  });
+  const filteredBookedData = experienceData.filter((experience) => {
+    const strongPointNames = experience.strongPoints.map((point) => point.name);
+    const matchedKeywords = strongPointNames.filter((name) =>
+      checkedKeywords.includes(name)
+    );
+    return experience.bookmarked === "ON" && matchedKeywords.length > 0;
+  });
 
   //상위태그 하위태그 필터링
   const handleTagSelection = (
@@ -126,12 +317,18 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
   useEffect(() => {
     if (mainTag) {
       console.log("maintag: " + mainTag);
+      if (jdId) {
+        getFilteredExperienceList(jdId, mainTag, null, user.token);
+      }
     }
   }, [mainTag]);
 
   useEffect(() => {
     if (subTag) {
       console.log("subtag: " + subTag);
+      if (jdId) {
+        getFilteredExperienceList(jdId, mainTag, subTag, user.token);
+      }
     }
   }, [subTag]);
 
@@ -196,7 +393,14 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
                   setSubTag("");
                 }}
               />
-              <img src={SearchIcon} alt="filter" /> {/* 클릭시 검색 api 호출 */}
+              <img
+                src={SearchIcon}
+                alt="filter"
+                onClick={() => {
+                  getSearchedExperienceList(jdId!, searchText, user.token);
+                }}
+              />{" "}
+              {/* 클릭시 검색 api 호출 */}
             </IconContainer>
             {showTagPopup && <TagPopup onSelect={handleTagSelection} />}
             <div style={{ display: "flex", flexDirection: "row" }}>
@@ -299,39 +503,40 @@ const ExperienceList: React.FC<ExperienceListProps> = ({
           {selectedTab === "경험검색" ? (
             <>
               <ScrollDiv>
-                {(checkedKeywords.length === 0 ? ExpData : filteredExpData).map(
-                  (post, index: number) => (
-                    <Experience
-                      id={post.id}
-                      key={index}
-                      title={post.title}
-                      maintag={post.mainTag}
-                      subtag={post.subTag}
-                      tags={post.tags}
-                      period={post.period}
-                      bookmark={post.bookmark}
-                      checkedKeywords={checkedKeywords}
-                      onClick={() => setshowDetail(true)}
-                    />
-                  )
-                )}
+                {(checkedKeywords.length === 0
+                  ? experienceData
+                  : filteredExpData
+                ).map((post, index: number) => (
+                  <Experience
+                    id={post.id}
+                    key={index}
+                    title={post.title}
+                    maintag={post.parentTag.name}
+                    subtag={post.childTag.name}
+                    tags={post.strongPoints.map((point) => point.name)}
+                    period={formatDateRange(post.startedAt, post.endedAt)}
+                    bookmark={post.bookmarked === "ON" ? true : false}
+                    checkedKeywords={checkedKeywords}
+                    onClick={() => setshowDetail(true)}
+                  />
+                ))}
               </ScrollDiv>
             </>
           ) : (
             <ScrollDiv>
               {(checkedKeywords.length === 0
-                ? bookmarkData
-                : filteredbookedData
+                ? bookedData
+                : filteredBookedData
               ).map((post, index: number) => (
                 <Experience
                   id={post.id}
                   key={index}
                   title={post.title}
-                  maintag={post.mainTag}
-                  subtag={post.subTag}
-                  tags={post.tags}
-                  period={post.period}
-                  bookmark={post.bookmark}
+                  maintag={post.parentTag.name}
+                  subtag={post.childTag.name}
+                  tags={post.strongPoints.map((point) => point.name)}
+                  period={formatDateRange(post.startedAt, post.endedAt)}
+                  bookmark={post.bookmarked === "ON" ? true : false}
                   checkedKeywords={checkedKeywords}
                   onClick={() => setshowDetail(true)}
                 />