Merge branch 'develop' into feat/#101

KUSITMS-29th-TEAM-B · May 21, 2024 · 6119c35 · 6119c35
2 parents 7ed6e8c + 43e0aa0
commit 6119c35
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 65 deletions.
diff --git a/src/assets/data/keywords.ts b/src/assets/data/keywords.ts
@@ -1,84 +1,82 @@
 export const basicKeywords = [
   {
-    id: "프레젠테이션",
+    id: "018f99d1-cfd9-7991-8519-3c04e1ef6dab",
     name: "프레젠테이션",
   },
   {
-    id: "문서화",
+    id: "018f99d1-0061-7785-b066-c56ccb8e8929",
     name: "문서화",
   },
   {
-    id: "글쓰기",
+    id: "018f99d0-926b-7c84-99e8-f726538000e4",
     name: "글쓰기",
   },
   {
-    id: "문제 발견",
+    id: "018f99d1-10d4-7fc7-afa3-20253ba5f1d3",
     name: "문제 발견",
   },
   {
-    id: "탐구력",
+    id: "018f99d1-a0bb-76e3-a96c-4b25a30aec5b",
     name: "탐구력",
   },
   {
-    id: "끈기",
+    id: "018f99d0-b6ef-7dcc-b149-146544946f03",
     name: "끈기",
   },
   {
-    id: "문제해결",
+    id: "018f99d1-2134-7c2b-9bb1-ec87362cee1b",
     name: "문제해결",
   },
   {
-    id: "분석력",
+    id: "018f99d1-3178-70c0-9105-ec3a62418bb4",
     name: "분석력",
   },
   {
-    id: "계획력",
+    id: "018f99d0-7434-75d1-96af-66da7799a7e2",
     name: "계획력",
   },
   {
-    id: "통찰력",
+    id: "018f99d1-af15-7eb9-9a8e-f480e5d51294",
     name: "통찰력",
   },
   {
-    id: "논리력",
+    id: "018f99d0-d52e-718e-ad09-018eefc42532",
     name: "논리력",
   },
   {
-    id: "협업",
+    id: "018f99d1-e00c-7ef2-88c0-c8bd4e923ce0",
     name: "협업",
   },
   {
-    id: "커뮤니케이션",
+    id: "018f99d1-9175-702f-854b-df51010040c2",
     name: "커뮤니케이션",
   },
   {
-    id: "아이디어",
+    id: "018f99d1-44b5-74ff-b0e3-d5ec54106584",
     name: "아이디어",
   },
   {
-    id: "리더십",
+    id: "018f99d0-effc-7252-9fd3-86844df0da46",
     name: "리더십",
   },
   {
-    id: "프로젝트 관리",
+    id: "018f99d1-c131-7ac2-92f7-2c95dbdce1d1",
     name: "프로젝트 관리",
   },
   {
-    id: "인력 관리",
+    id: "018f99d1-56e2-7e15-9cb2-47b256a01def",
     name: "인력 관리",
   },
-
   {
-    id: "주도성",
+    id: "018f99d1-67aa-742f-837a-b3fa82e781b0",
     name: "주도성",
   },
-
   {
-    id: "책임감",
+    id: "018f99d1-79cd-7a61-bb86-596239427394",
     name: "책임감",
   },
   {
-    id: "꼼꼼함",
+    id: "018f99d0-a5b0-7770-bb6c-690b8360f729",
     name: "꼼꼼함",
   },
 ];
diff --git a/src/components/Experience/KeywordTab.tsx b/src/components/Experience/KeywordTab.tsx
@@ -3,7 +3,9 @@ import { useRecoilState } from "recoil";
 import styled, { useTheme } from "styled-components";
 import {
   deleteState,
+  deleteTagState,
   primeTagState,
+  subTagState,
   yearState,
 } from "../../store/selectedStore";
 import { questions } from "../../assets/data/questions";
@@ -30,18 +32,18 @@ import { basicKeywords } from "../../assets/data/keywords";
 import Experience from "../JD/Experience";
 import ExpData from "../../services/JD/ExpData";
 import editIcon from "../../assets/images/editIcon.png";
-import { myKeywords } from "../../services/Experience/myKeywords";
 import { useNavigate } from "react-router-dom";
 import {
+  deleteTag,
   getPrimeTagSubTags,
   getPrimeTagYears,
 } from "../../services/Experience/tagApi";
 import { getCookie } from "../../services/cookie";
-import { TagType } from "../../types/type";
 import {
   ExperienceDetailType,
   KeywordType,
   TagMenuType,
+  TagType,
 } from "../../types/experience";
 import { getExperienceList } from "../../services/Experience/experienceApi";
 import { getKeywords } from "../../services/Experience/keywordApi";
@@ -57,7 +59,9 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
   const navigate = useNavigate();
   const [selectedYear, setSelectedYear] = useRecoilState(yearState);
   const [isDelete, setIsDelete] = useRecoilState(deleteState);
+  const [selectedDeleteTag, setSelectedDeleteTag] = useRecoilState(deleteTagState);
   const [selectedPrimeTag, setSelectedPrimeTag] = useRecoilState(primeTagState);
+  const [selectedSubTag, setSelectedSubTag] = useRecoilState(subTagState);
   const [selectedQ, setSelectedQ] = React.useState(0);
   const [expanded, setExpanded] = React.useState(false); // 질문 아코디언 관리
   const [keywordTabOption, setKeywordTabOption] =
@@ -66,7 +70,6 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
   const [primeTagYears, setPrimeTagYears] = React.useState();
   const [totalExpCount, setTotalExpCount] = React.useState(0);
   const [subTagMenus, setSubTagMenus] = React.useState<TagMenuType[]>([]);
-  const [selectedSubTag, setSelectedSubTag] = React.useState<TagMenuType>();
   const [experiences, setExperiences] = React.useState<ExperienceDetailType[]>(
     []
   );
@@ -152,11 +155,16 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
     setExpanded(!expanded);
   };
   const handleDelete = () => {
+    setSelectedDeleteTag(null);
     setIsDelete(!isDelete);
   };
+  const handleDeleteSubTag = (item: TagType) => {
+    setSelectedDeleteTag(item);
+    openDeleteModal();
+  };
 
+  // My 역량 키워드 조회
   React.useEffect(() => {
-    // My 역량 키워드 조회
     if (user?.token) {
       getKeywords(user?.token)
         .then((res) => setMyKeywordList(res.data.strongPoints))
@@ -186,6 +194,7 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
           const { totalExperienceCount, tagInfos } = res.data;
           setTotalExpCount(totalExperienceCount);
           setSubTagMenus(tagInfos);
+          setSelectedSubTag(null);
         }
       );
     }
@@ -227,7 +236,7 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
           <MenuList>
             <MenuItem
               className={selectedSubTag ? "" : "active"}
-              onClick={() => setSelectedSubTag(undefined)}
+              onClick={() => setSelectedSubTag(null)}
             >
               <div className="text">전체</div>
               <div className="text">{totalExpCount}</div>
@@ -240,11 +249,13 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
               >
                 <div className="text">{item.name}</div>
                 <div className="text">{item.experienceCount}</div>
-                {isDelete && index !== 0 ? (
+                {isDelete ? (
                   <DeleteIcon
                     width={"20px"}
                     style={{ position: "absolute", left: -10 }}
-                    onClick={openDeleteModal}
+                    onClick={() =>
+                      handleDeleteSubTag({ id: item.id, name: item.name })
+                    }
                   />
                 ) : null}
               </MenuItem>

diff --git a/src/components/Experience/MoreTab.tsx b/src/components/Experience/MoreTab.tsx
@@ -4,13 +4,21 @@ import { ArrowRight } from "../../assets";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { primeTagState, yearState } from "../../store/selectedStore";
 import PrimeTagCard from "./PrimeTagCard";
-import { moreData } from "../../services/Experience/moreData";
+import { getYearAllPrimeTags } from "../../services/Experience/tagApi";
+import { PrimeTagData } from "../../types/experience";
+import { getCookie } from "../../services/cookie";
 
 const MoreTab = () => {
+  const user = getCookie("user");
   const [selectedYear, setSelectedYear] = useRecoilState(yearState);
   const setSelectedPrimeTag = useSetRecoilState(primeTagState);
+  const [primeTagList, setPrimeTagList] = React.useState<PrimeTagData[]>([]);
 
-  const totalNum = moreData.length;
+
+  const handlePrimeTagClick = (item: PrimeTagData) => {
+    const selectedPrimeTag = { id: item.id, name: item.name };
+    setSelectedPrimeTag(selectedPrimeTag);
+  };
   /**
    * 사이드 메뉴 컨테이너
    */
@@ -31,7 +39,7 @@ const MoreTab = () => {
         <YearText>{selectedYear} 활동</YearText>
         <YearInfo>
           <div className="total">총</div>
-          <div className="num">{totalNum}개</div>
+          <div className="num">{primeTagList.length}개</div>
         </YearInfo>
       </LeftContainer>
     );
@@ -44,18 +52,28 @@ const MoreTab = () => {
     return (
       <ContentContainer>
         <CardList>
-          {moreData.map((item) => (
+          {primeTagList.map((item) => (
             <PrimeTagCard
-              title={item.title}
-              tagNum={item.tagNum}
-              expNum={item.expNum}
+              key={item.id}
+              title={item.name}
+              tagNum={item.strongPointCount}
+              expNum={item.experienceCount}
+              onClick={() => handlePrimeTagClick(item)}
             />
           ))}
         </CardList>
       </ContentContainer>
     );
   };
 
+  React.useEffect(() => {
+    if (selectedYear) {
+      getYearAllPrimeTags(selectedYear, user?.token).then((res) =>
+        setPrimeTagList(res.data.tagInfos)
+      );
+    }
+  }, [selectedYear]);
+
   //
   //
   //

diff --git a/src/components/Experience/PrimeTagCard.tsx b/src/components/Experience/PrimeTagCard.tsx
@@ -3,14 +3,16 @@ import styled from "styled-components";
 import { ArrowRight } from "../../assets";
 
 interface PrimeTagCardProp {
+  key: string;
   title: string;
   tagNum: number;
   expNum: number;
+  onClick: () => void;
 }
 
-const PrimeTagCard = ({ title, tagNum, expNum }: PrimeTagCardProp) => {
+const PrimeTagCard = ({ key, title, tagNum, expNum, onClick}: PrimeTagCardProp) => {
   return (
-    <CardContainer>
+    <CardContainer key={key} onClick={onClick}>
       <CardTitle>
         <div className="title">{title}</div>
         <ArrowRight />

diff --git a/src/components/Experience/YearCircle.tsx b/src/components/Experience/YearCircle.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { motion } from "framer-motion";
 import styled from "styled-components";
 import yearCircle from "../../assets/images/yearActiveCircle.png";
 import { useRecoilState } from "recoil";
-import { deleteState, yearState } from "../../store/selectedStore";
+import {
+  deleteState,
+  deleteTagState,
+  yearState,
+} from "../../store/selectedStore";
 import { primeTagState } from "../../store/selectedStore";
 import { DeleteIcon } from "../../assets";
 import { TagType } from "../../types/experience";
-import { getYearPrimeTags } from "../../services/Experience/tagApi";
 
 interface YearCircleProps {
   year: number;
@@ -28,11 +31,11 @@ const YearCircle: React.FC<YearCircleProps> = ({
   const [selectedPrimeTag, setSelectedPrimeTag] =
     useRecoilState<TagType | null>(primeTagState);
   const [isDelete, setIsDelete] = useRecoilState(deleteState);
+  const [selectedDeleteTag, setSelectedDeleteTag] = useRecoilState(deleteTagState);
 
   const isSelectedYear = selectedYear === year;
   const isHoveredYear = hoveredYear === year;
 
-
   const radius = 20;
   const centralWidth = 84;
   const surroundWidth = 88;
@@ -70,13 +73,18 @@ const YearCircle: React.FC<YearCircleProps> = ({
     exit: { scale: 0, opacity: 0, transition: { duration: 0.3 } },
   };
 
-  // 주변 원(키워드 원) 클릭 함수
+  // 주변 원(상위 태그 원) 클릭 함수
   const handleTagClick = (e: any, year: number, primeTag: TagType) => {
     e.stopPropagation();
     setSelectedYear(year);
     setSelectedPrimeTag(primeTag);
   };
 
+  const handleTagDelete = (item: TagType) => {
+    setSelectedDeleteTag(item);
+    openDeleteModal();
+  };
+
   //
   //
   //
@@ -111,7 +119,7 @@ const YearCircle: React.FC<YearCircleProps> = ({
                   {selectedPrimeTag && isDelete && index !== 5 ? (
                     <DeleteIcon
                       style={{ position: "absolute", top: -10, right: -5 }}
-                      onClick={openDeleteModal}
+                      onClick={() => handleTagDelete(tag)}
                     />
                   ) : null}
                 </KeywordCircle>

diff --git a/src/components/Experience/YearList.tsx b/src/components/Experience/YearList.tsx
@@ -10,7 +10,6 @@ import {
 } from "../../store/selectedStore";
 import { getExperienceYears } from "../../services/Experience/experienceApi";
 import { getCookie } from "../../services/cookie";
-import { getYearPrimeTags } from "../../services/Experience/tagApi";
 import { TagType, YearData } from "../../types/experience";
 
 interface YearListProps {
@@ -20,7 +19,6 @@ interface YearListProps {
 
 const YearList = ({ width, openDeleteModal }: YearListProps) => {
   const user = getCookie("user");
-  const [primeTags, setPrimeTags] = React.useState<TagType[]>([]);
   const [selectedYear, setSelectedYear] = useRecoilState<number | null>(
     yearState
   );
@@ -31,9 +29,6 @@ const YearList = ({ width, openDeleteModal }: YearListProps) => {
 
   const [hoveredYear, setHoveredYear] = useState<number | null>(null);
 
-  // 임시 데이터
-  const keywords = ["큐시즘", "밋업", "밤양갱", "화이팅", "승효", "더보기"];
-
   // 클릭한 year 객체로 스크롤 이동하기 위한 객체 참조 값
   const yearRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
   years.forEach((year) => {
@@ -144,7 +139,11 @@ const YearList = ({ width, openDeleteModal }: YearListProps) => {
         >
           <YearCircle
             year={data.year}
-            primeTagList={data.tags}
+            primeTagList={
+              data.tags.length > 5
+                ? [...data.tags.slice(0, 5), { id: "더보기", name: "더보기" }]
+                : data.tags
+            }
             hoveredYear={hoveredYear}
             openDeleteModal={openDeleteModal}
           />