Merge pull request #137 from KUSITMS-29th-TEAM-B/feature/#135

Feature/#135 경험 작성 유효성 검사
KUSITMS-29th-TEAM-B · May 22, 2024 · 57ad822 · 57ad822
2 parents 045463b + 4c5ce02
commit 57ad822
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 63 deletions.
diff --git a/src/assets/data/keywords.ts b/src/assets/data/keywords.ts
@@ -1,82 +1,82 @@
 export const basicKeywords = [
   {
-    id: "018f99d1-cfd9-7991-8519-3c04e1ef6dab",
-    name: "프레젠테이션",
-  },
-  {
-    id: "018f99d1-0061-7785-b066-c56ccb8e8929",
-    name: "문서화",
+    id: "018f99d0-7434-75d1-96af-66da7799a7e2",
+    name: "계획력",
   },
   {
     id: "018f99d0-926b-7c84-99e8-f726538000e4",
     name: "글쓰기",
   },
   {
-    id: "018f99d1-10d4-7fc7-afa3-20253ba5f1d3",
-    name: "문제 발견",
-  },
-  {
-    id: "018f99d1-a0bb-76e3-a96c-4b25a30aec5b",
-    name: "탐구력",
+    id: "018f99d0-a5b0-7770-bb6c-690b8360f729",
+    name: "꼼꼼함",
   },
   {
     id: "018f99d0-b6ef-7dcc-b149-146544946f03",
     name: "끈기",
   },
+  {
+    id: "018f99d0-d52e-718e-ad09-018eefc42532",
+    name: "논리력",
+  },
+  {
+    id: "018f99d0-effc-7252-9fd3-86844df0da46",
+    name: "리더십",
+  },
+  {
+    id: "018f99d1-0061-7785-b066-c56ccb8e8929",
+    name: "문서화",
+  },
+  {
+    id: "018f99d1-10d4-7fc7-afa3-20253ba5f1d3",
+    name: "문제 발견",
+  },
   {
     id: "018f99d1-2134-7c2b-9bb1-ec87362cee1b",
-    name: "문제해결",
+    name: "문제 해결",
   },
   {
     id: "018f99d1-3178-70c0-9105-ec3a62418bb4",
     name: "분석력",
   },
   {
-    id: "018f99d0-7434-75d1-96af-66da7799a7e2",
-    name: "계획력",
+    id: "018f99d1-44b5-74ff-b0e3-d5ec54106584",
+    name: "아이디어",
   },
   {
-    id: "018f99d1-af15-7eb9-9a8e-f480e5d51294",
-    name: "통찰력",
+    id: "018f99d1-56e2-7e15-9cb2-47b256a01def",
+    name: "인력 관리",
   },
   {
-    id: "018f99d0-d52e-718e-ad09-018eefc42532",
-    name: "논리력",
+    id: "018f99d1-67aa-742f-837a-b3fa82e781b0",
+    name: "주도성",
   },
   {
-    id: "018f99d1-e00c-7ef2-88c0-c8bd4e923ce0",
-    name: "협업",
+    id: "018f99d1-79cd-7a61-bb86-596239427394",
+    name: "책임감",
   },
   {
     id: "018f99d1-9175-702f-854b-df51010040c2",
     name: "커뮤니케이션",
   },
   {
-    id: "018f99d1-44b5-74ff-b0e3-d5ec54106584",
-    name: "아이디어",
+    id: "018f99d1-a0bb-76e3-a96c-4b25a30aec5b",
+    name: "탐구력",
   },
   {
-    id: "018f99d0-effc-7252-9fd3-86844df0da46",
-    name: "리더십",
+    id: "018f99d1-af15-7eb9-9a8e-f480e5d51294",
+    name: "통찰력",
   },
   {
     id: "018f99d1-c131-7ac2-92f7-2c95dbdce1d1",
     name: "프로젝트 관리",
   },
   {
-    id: "018f99d1-56e2-7e15-9cb2-47b256a01def",
-    name: "인력 관리",
-  },
-  {
-    id: "018f99d1-67aa-742f-837a-b3fa82e781b0",
-    name: "주도성",
-  },
-  {
-    id: "018f99d1-79cd-7a61-bb86-596239427394",
-    name: "책임감",
+    id: "018f99d1-cfd9-7991-8519-3c04e1ef6dab",
+    name: "프레젠테이션",
   },
   {
-    id: "018f99d0-a5b0-7770-bb6c-690b8360f729",
-    name: "꼼꼼함",
+    id: "018f99d1-e00c-7ef2-88c0-c8bd4e923ce0",
+    name: "협업",
   },
 ];
diff --git a/src/components/Experience/KeywordTab.tsx b/src/components/Experience/KeywordTab.tsx
@@ -33,9 +33,7 @@ import Experience from "../JD/Experience";
 import ExpData from "../../services/JD/ExpData";
 import editIcon from "../../assets/images/editIcon.png";
 import { useNavigate } from "react-router-dom";
-import {
-  getPrimeTagYears,
-} from "../../services/Experience/tagApi";
+import { getPrimeTagYears } from "../../services/Experience/tagApi";
 import { getCookie } from "../../services/cookie";
 import {
   ExperienceDetailType,
@@ -423,7 +421,7 @@ const KeywordTab = ({ openDeleteModal }: KeywordTabProp) => {
                 총&nbsp;
                 <div className="accent">
                   {checkedKeywords.length === 0
-                    ? ExpData.length
+                    ? experiences?.length
                     : filteredExpData.length}
                   개
                 </div>

diff --git a/src/components/Experience/YearCircle.tsx b/src/components/Experience/YearCircle.tsx
@@ -31,7 +31,8 @@ const YearCircle: React.FC<YearCircleProps> = ({
   const [selectedPrimeTag, setSelectedPrimeTag] =
     useRecoilState<TagType | null>(primeTagState);
   const [isDelete, setIsDelete] = useRecoilState(deleteState);
-  const [selectedDeleteTag, setSelectedDeleteTag] = useRecoilState(deleteTagState);
+  const [selectedDeleteTag, setSelectedDeleteTag] =
+    useRecoilState(deleteTagState);
 
   const isSelectedYear = selectedYear === year;
   const isHoveredYear = hoveredYear === year;
@@ -148,6 +149,7 @@ const YearCircleContainer = styled(motion.div)<{ isActive: boolean }>`
       : (props) => props.theme.colors.neutral200};
   background-size: cover;
   top: -40px;
+  cursor: pointer;
 `;
 
 const YearText = styled(motion.div)<{ isActive: boolean }>`

diff --git a/src/components/common/DatePicker.tsx b/src/components/common/DatePicker.tsx
@@ -22,7 +22,7 @@ const StyledDatePicker = styled(DatePicker)<{
 `;
 
 interface DatePickerProps {
-  date: Date;
+  date: Date | null;
   setDate: (date: Date) => void;
   style?: string;
 }

diff --git a/src/components/common/MainButton.tsx b/src/components/common/MainButton.tsx
@@ -20,6 +20,7 @@ const Button = styled.button`
   justify-content: center;
   ${(props) => props.theme.fonts.title4};
   gap: 5px;
+  cursor: pointer;
   &:disabled {
     background: ${(props) => props.theme.colors.neutral500};
   }

diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -18,7 +18,13 @@ const Navbar = () => {
   return (
     <NavContainer>
       <ItemContainer>
-        <img src={logo} alt="flight-logo" width={"117px"} height={"40px"} />
+        <img
+          src={logo}
+          alt="flight-logo"
+          width={"117px"}
+          height={"40px"}
+          onClick={() => navigate(`/experience`)}
+        />
         <MenuList>
           <MenuItem
             className={
@@ -87,6 +93,7 @@ const ItemContainer = styled.div`
   gap: 2.5rem;
   &.profile {
     gap: 0.5rem;
+    cursor: pointer;
   }
 `;
 

diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
@@ -141,7 +141,7 @@ const ExperienceEditPage = () => {
       const subTagId = subTagRes.data.id;
 
       experienceData = {
-        ...expData,
+        ...experienceData,
         parentTagId: primeTagId,
         childTagId: subTagId,
       };
@@ -155,19 +155,20 @@ const ExperienceEditPage = () => {
       );
       const subTagId = subTagRes.data.id;
       experienceData = {
-        ...expData,
+        ...experienceData,
         childTagId: subTagId,
       };
     }
-    // 새로운 역량 키워드 있을 경우
+
+    const originStrongPointIds = checkedKeywords
+      .filter((item) => item.id !== item.name)
+      .map((item) => item.id);
     const newKeywordsNames = checkedKeywords
       .filter((item) => item.id === item.name)
       .map((item) => ({ name: item.name }));
-    if (newKeywordsNames.length !== 0) {
-      const originStrongPointIds = checkedKeywords
-        .filter((item) => item.id !== item.name)
-        .map((item) => item.id);
 
+    // 새로운 역량 키워드 있을 경우
+    if (newKeywordsNames.length !== 0) {
       const newStrongPointsRes = await postKeyword(
         newKeywordsNames,
         user?.token
@@ -180,14 +181,19 @@ const ExperienceEditPage = () => {
         ...newStrongPointIds,
       ];
       experienceData = {
-        ...expData,
+        ...experienceData,
         strongPointIds: totalStrongPointIds,
       };
+    } else {
+      experienceData = {
+        ...experienceData,
+        strongPointIds: originStrongPointIds,
+      };
     }
     // 질문 수정
     if (expId) {
       patchExperience(expId, experienceData, user?.token)
-        .then((res) => {
+        .then(() => {
           openModal();
         })
         .catch((err) => console.log(err));
@@ -705,7 +711,7 @@ const ExperienceEditPage = () => {
             >
               <ArrowLeft />
             </button>
-            경험 작성
+            경험 수정
           </div>
           <CustomButton onClick={handleSaveExperience}>저장</CustomButton>
         </TopContainer>
@@ -723,12 +729,12 @@ const ExperienceEditPage = () => {
         image={<img src={airplaneImg} alt="airplane" />}
         title={
           <>
-            새로운 경험 작성이
+            경험 수정이
             <br />
             완료되었어요!
           </>
         }
-        buttons={["작성된 경험 확인하기"]}
+        buttons={["경험 확인하기"]}
         onConfirm={() => navigate(`/experience/detail/${expId}`)}
         isOpen={isModalOpen}
         onClose={closeModal}

diff --git a/src/pages/ExperienceWritePage.tsx b/src/pages/ExperienceWritePage.tsx
@@ -21,7 +21,6 @@ import Modal from "../components/common/Modal";
 import airplaneImg from "../assets/images/airplane.png";
 import Tag from "../components/common/Tag";
 import RadioGroup from "../components/common/RadioGroup";
-import { myKeywords } from "../services/Experience/myKeywords";
 import { postExperience } from "../services/Experience/experienceApi";
 import { ExperienceType, KeywordType, TagType } from "../types/experience";
 import { getKeywords, postKeyword } from "../services/Experience/keywordApi";
@@ -50,8 +49,8 @@ const ExperienceWritePage = () => {
       question: item.question,
       answer: "",
     })),
-    startedAt: new Date().toISOString(),
-    endedAt: new Date().toISOString(),
+    startedAt: "",
+    endedAt: "",
   });
   const [primeTagItem, setPrimeTagItem] = React.useState<TagType>({
     id: "",
@@ -118,6 +117,8 @@ const ExperienceWritePage = () => {
     lastMyKeywordIndex
   );
 
+  const isSaveButtonDisabled = !expData.title || !primeTagItem.id || !subTagItem.id || !expData.startedAt || !expData.endedAt;
+
   const handleSaveExperience = async () => {
     let experienceData = { ...expData };
     // 상위 태그 생성 후 하위 태그 생성한 경우
@@ -384,15 +385,15 @@ const ExperienceWritePage = () => {
               <div className="label">경험 기간</div>
               <div className="input">
                 <OneDatePick
-                  date={new Date(expData.startedAt)}
+                  date={expData.startedAt ? new Date(expData.startedAt) : null}
                   setDate={(date: Date) =>
                     setExpData({ ...expData, startedAt: date.toISOString() })
                   }
                   style={customDatePickerCss}
                 />
                 &nbsp;-&nbsp;
                 <OneDatePick
-                  date={new Date(expData.endedAt)}
+                  date={expData.endedAt ? new Date(expData.endedAt) : null}
                   setDate={(date: Date) =>
                     setExpData({ ...expData, endedAt: date.toISOString() })
                   }
@@ -684,7 +685,12 @@ const ExperienceWritePage = () => {
             </button>
             경험 작성
           </div>
-          <CustomButton onClick={handleSaveExperience}>저장</CustomButton>
+          <CustomButton
+            onClick={handleSaveExperience}
+            disabled={isSaveButtonDisabled}
+          >
+            저장
+          </CustomButton>
         </TopContainer>
         <ContentContainer>
           <TitleInput

diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx
@@ -67,7 +67,7 @@ const SignInPage = () => {
           code: codeResponse.code,
           client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
           client_secret: process.env.REACT_APP_GOOGLE_CLIENT_SECRET,
-          redirect_uri: "http://localhost:3000",
+          redirect_uri: "https://gangflight.netlify.app",
           grant_type: "authorization_code",
         };
         axios