[FEAT] 마이페이지 정보 수정 기능 연동 완료

IT-Cotato · Aug 21, 2024 · efd5b37 · efd5b37
2 parents 293ab17 + 8c39058
commit efd5b37
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 93 deletions.
diff --git a/src/components/EditApply.jsx b/src/components/EditApply.jsx
@@ -72,7 +72,7 @@ const EditApply = ({ jobPostData = {}, applicationData = [], onSave }) => {
       }
     }
     setCurrentQuestionIndex(0);
-  }, [currentPageIndex, applicationDataState]);
+  }, [currentPageIndex]);
 
   // 토글 핸들러
   const handleToggleClick = () => {
@@ -162,13 +162,13 @@ const EditApply = ({ jobPostData = {}, applicationData = [], onSave }) => {
       jobPart: jobPart, // 수정된 직무명
       memberId: jobPostData.memberId,
       jobApplications: applicationDataState.map((app) => ({
-        id: appIdRef.current++,
+        id: app.jobPostId,
         applicationType: app.applicationType,
         place: app.place,
         result: app.result,
         submissionStatus: app.submissionStatus,
         applicationStartDate: app.applicationStartDate,
-        applicationCloseDate: new Date(applyDate).getTime(),
+        applicationCloseDate: formatDate(new Date(applyDate).getTime()),
         memberId: jobPostData.memberId,
         jobPostId: jobPostData.jobPostId,
         applicationDetails: app.applicationDetails.map(question => ({
@@ -186,14 +186,14 @@ const EditApply = ({ jobPostData = {}, applicationData = [], onSave }) => {
     handleSaveRef.current = handleSave;
   }, [companyName, jobPart, applyDate, currentQuestionIndex, currentPageIndex, applicationDataState, submissionStatus, resultStatus]);
 
-  useEffect(() => {
-    // 언마운트시 데이터 저장(저장 버튼과 같은 기능)
-    return () => {
-      if (handleSaveRef.current) {
-        handleSaveRef.current();
-      }
-    };
-  }, [])
+  // useEffect(() => {
+  //   // 언마운트시 데이터 저장(저장 버튼과 같은 기능)
+  //   return () => {
+  //     if (handleSaveRef.current) {
+  //       handleSaveRef.current();
+  //     }
+  //   };
+  // }, [])
 
   // 현재 보여져야 하는 질문
   const currentQuestions = applicationDataState[currentPageIndex]?.applicationDetails || [];
@@ -213,21 +213,30 @@ const EditApply = ({ jobPostData = {}, applicationData = [], onSave }) => {
     setApplyDate(date); // DatePicker의 선택된 날짜 상태를 업데이트
   };
 
+  // 타임스탬프를 'yy-mm-dd' 형식으로 변환하는 함수
+  const formatDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear().toString(); // 'yy' 형식
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 'mm' 형식
+    const day = String(date.getDate()).padStart(2, '0'); // 'dd' 형식
+    return `${year}-${month}-${day}`;
+  };
+
   // 제출 여부 수정 핸들러
-const handleApplySubmissionStatus = (icon) => {
-  const updatedApplicationData = [...applicationDataState];
-  updatedApplicationData[currentPageIndex].submissionStatus = getSubmitIconStatus(icon);
-  setApplicationData(updatedApplicationData);
-  setSubmissionStatus(getSubmitIconStatus(icon));
-};
+  const handleApplySubmissionStatus = (icon) => {
+    const updatedApplicationData = [...applicationDataState];
+    updatedApplicationData[currentPageIndex].submissionStatus = getSubmitIconStatus(icon);
+    setApplicationData(updatedApplicationData);
+    setSubmissionStatus(getSubmitIconStatus(icon));
+  };
 
-// 결과 수정 핸들러
-const handleApplyResult = (icon) => {
-  const updatedApplicationData = [...applicationDataState];
-  updatedApplicationData[currentPageIndex].result = getResultIconStatus(icon);
-  setApplicationData(updatedApplicationData);
-  setResultStatus(getResultIconStatus(icon));
-};
+  // 결과 수정 핸들러
+  const handleApplyResult = (icon) => {
+    const updatedApplicationData = [...applicationDataState];
+    updatedApplicationData[currentPageIndex].result = getResultIconStatus(icon);
+    setApplicationData(updatedApplicationData);
+    setResultStatus(getResultIconStatus(icon));
+  };
 
   // 아이콘 상태에 따른 반환 함수
   const getStatusIcon = (status) => {
@@ -301,7 +310,7 @@ const handleApplyResult = (icon) => {
               <div key={index} className='type-container flex flex-1 justify-center'>
                 <div className={`w-[100%] h-[100%] content-center items-center flex ${currentPageIndex === index ? currentPStyle : otherPstyle}`} onClick={() => setCurrentPageIndex(index)}>
                   <div className='flex-1'>
-                    {page.applicationType === '서류' ? '서류' : page.applicationType === '면접' ? '면접' : page.applicationType === '면접 피드백' ? '면접 피드백' : '기업분석'}
+                    {page.applicationType === 'DOCUMENT' ? '서류' : page.applicationType === 'INTERVIEW' ? '면접' : page.applicationType === 'INTERVIEW_FEEDBACK' ? '면접 피드백' : '기업분석'}
                   </div>
                   <div className='px-[10px]' onClick={() => removePage(index)}>
                     <XMarkIcon className="w-[24px] h-[24px] text-navy-dark text-center cursor-pointer" />
@@ -317,10 +326,10 @@ const handleApplyResult = (icon) => {
               {isToggleOpen && (
                 <div className='absolute top-full left-0 w-full bg-white border border-navy-interviewBtn rounded-[10px] mt-[5px] z-50'>
                   <div className='flex flex-col'>
-                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText' onClick={() => handleAddPage('서류')}>서류 추가</div>
-                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText border-y' onClick={() => handleAddPage('면접')}>면접 추가</div>
-                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText' onClick={() => handleAddPage('면접 피드백')}>면접피드백 추가</div>
-                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText' onClick={() => handleAddPage('기업분석')}>기업분석 추가</div>
+                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText' onClick={() => handleAddPage('DOCUMENT')}>서류 추가</div>
+                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText border-y' onClick={() => handleAddPage('INTERVIEW')}>면접 추가</div>
+                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText' onClick={() => handleAddPage('INTERVIEW_FEEDBACK')}>면접피드백 추가</div>
+                    <div className='p-[10px] cursor-pointer hover:text-navy-sideText' onClick={() => handleAddPage('BUSINESS_ANALYSIS')}>기업분석 추가</div>
                   </div>
                 </div>
               )}

diff --git a/src/components/NewApply.jsx b/src/components/NewApply.jsx
@@ -196,20 +196,20 @@ const NewApply = ({ jobPostData = {}, applicationData = [], onSave }) => {
   };
 
   // 제출 여부 수정 핸들러
-const handleApplySubmissionStatus = (icon) => {
-  const updatedApplicationData = [...applicationDataState];
-  updatedApplicationData[currentPageIndex].submissionStatus = getSubmitIconStatus(icon);
-  setApplicationData(updatedApplicationData);
-  setSubmissionStatus(getSubmitIconStatus(icon));
-};
+  const handleApplySubmissionStatus = (icon) => {
+    const updatedApplicationData = [...applicationDataState];
+    updatedApplicationData[currentPageIndex].submissionStatus = getSubmitIconStatus(icon);
+    setApplicationData(updatedApplicationData);
+    setSubmissionStatus(getSubmitIconStatus(icon));
+  };
 
-// 결과 수정 핸들러
-const handleApplyResult = (icon) => {
-  const updatedApplicationData = [...applicationDataState];
-  updatedApplicationData[currentPageIndex].result = getResultIconStatus(icon);
-  setApplicationData(updatedApplicationData);
-  setResultStatus(getResultIconStatus(icon));
-};
+  // 결과 수정 핸들러
+  const handleApplyResult = (icon) => {
+    const updatedApplicationData = [...applicationDataState];
+    updatedApplicationData[currentPageIndex].result = getResultIconStatus(icon);
+    setApplicationData(updatedApplicationData);
+    setResultStatus(getResultIconStatus(icon));
+  };
 
   // 아이콘 상태에 따른 반환 함수
   const getStatusIcon = (status) => {

diff --git a/src/pages/ActivityRecord.jsx b/src/pages/ActivityRecord.jsx
@@ -95,7 +95,7 @@ const ActivityRecord = () => {
 					활동 추가하기
 				</div>
 			</div>
-			<div className="activity-record-content h-[30%] mx-[70px] mb-[30px] grid grid-cols-2 gap-x-[2%] gap-y-[12%] px[5px] overflow-y-auto scroll-smooth">
+			<div className="activity-record-content h-[750px] mx-[70px] mb-[30px] grid grid-cols-2 gap-x-[2%] gap-y-[12%] px[5px] overflow-y-auto scroll-smooth">
 				{filteredActivities.map((item) => {
 					return (
 						<ActivityItem

diff --git a/src/pages/ApplyRecord.jsx b/src/pages/ApplyRecord.jsx
@@ -63,7 +63,7 @@ const ApplyRecord = () => {
         <div className='w-1/12 h-[20px] mr-[20px]'>면접 합격</div>
         <div className="w-1/12 mr-[20px]"></div>
       </div>
-      <div className='detail-item-container h-[931px] mt-[13px] flex-col'>
+      <div className='detail-item-container h-[700px] mt-[13px] flex-col overflow-y-auto scroll-smooth'>
         {combinedData.map((application) => (
           <ApplyRecordItem
             key={application.id}

diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx
@@ -62,11 +62,12 @@ const Detail = () => {
 
   // 지원현황 데이터 업데이트
 	const handleUpdate = async (updatedData) => {
+    console.log(updatedData);
     try {
       const response = await instance.patch(`/api/job-posts/${currentId}`, updatedData);
       if (response.data && response.data.status === 'success') {
         console.log("수정된 데이터:", response.data.data);
-        window.location.reload();
+        // window.location.reload();
       } else {
         console.error('지원현황 수정 중 오류 발생:', response.data.message);
       }

diff --git a/src/pages/EditMyAbout.jsx b/src/pages/EditMyAbout.jsx
@@ -6,7 +6,6 @@ import instance from "../api/instance";
 
 const EditMyAbout = () => {
   const nav = useNavigate();
-  const [infoData, setInfoData] = useState();
   const [formData, setFormData] = useState({
     career: "",
     aboutMe: ""
@@ -19,9 +18,11 @@ const EditMyAbout = () => {
         const response = await instance.get('/api/member/info');
         if (response.data && response.data.status === 'success') {
           console.log(response.data.data);
-          setInfoData(response.data.data);  // 받아온 데이터를 applyData 상태에 저장
           // 받아온 데이터를 formData에 저장
           setFormData({
+            field: response.data.data.field || "",
+            belong: response.data.data.belong || "",
+            job: response.data.data.job || "",
             educationBackground: response.data.data.educationBackground || "",
             skill: response.data.data.skill || "",
             activityHistory: response.data.data.activityHistory || "",
@@ -40,7 +41,7 @@ const EditMyAbout = () => {
   }, []);
 
   // infoData가 null일 때 로딩 스피너나 대체 UI를 표시할 수 있음
-  if (!infoData) {
+  if (!formData) {
     return <div>Loading...</div>;  // 데이터를 불러오는 동안 표시될 내용
   }
 
@@ -79,7 +80,7 @@ const EditMyAbout = () => {
           <div>
             <InputField
               place={'careerInfo'}
-              placeholderText={infoData.career}
+              placeholderText={formData.career}
               value={formData.career}
               name="career"
               onChange={handleInputChange}
@@ -93,7 +94,7 @@ const EditMyAbout = () => {
           <div>
             <InputField
               place={'aboutInfo'}
-              placeholderText={infoData.aboutMe}
+              placeholderText={formData.aboutMe}
               value={formData.aboutMe}
               name="aboutMe"
               onChange={handleInputChange}

diff --git a/src/pages/EditMyInfo.jsx b/src/pages/EditMyInfo.jsx
@@ -11,10 +11,18 @@ const jobMap = {
   "PREPARING_FOR_JOB_CHACE": "이직자",
 }
 
+const jobMapReverse = {
+  "대학생": "COLLEGE_STUDENT",
+  "졸업생": "GRADUTE",
+  "구직자": "JOB_SEEKER",
+  "이직자": "PREPARING_FOR_JOB_CHACE",
+}
+
 const EditMyInfo = () => {
   const nav = useNavigate();
-  const [infoData, setInfoData] = useState();
   const [formData, setFormData] = useState({
+    belong: "",
+    job: "",
     educationBackground: "",
     skill: "",
     activityHistory: "",
@@ -29,9 +37,11 @@ const EditMyInfo = () => {
         const response = await instance.get('/api/member/info');
         if (response.data && response.data.status === 'success') {
           console.log(response.data.data);
-          setInfoData(response.data.data);  // 받아온 데이터를 applyData 상태에 저장
           // 받아온 데이터를 formData에 저장
           setFormData({
+            field: response.data.data.field || "",
+            belong: response.data.data.belong || "",
+            job: response.data.data.job || "",
             educationBackground: response.data.data.educationBackground || "",
             skill: response.data.data.skill || "",
             activityHistory: response.data.data.activityHistory || "",
@@ -50,7 +60,7 @@ const EditMyInfo = () => {
   }, []);
 
   // infoData가 null일 때 로딩 스피너나 대체 UI를 표시할 수 있음
-  if (!infoData) {
+  if (!formData) {
     return <div>Loading...</div>;  // 데이터를 불러오는 동안 표시될 내용
   }
 
@@ -67,9 +77,9 @@ const EditMyInfo = () => {
   const handleSave = async () => {
     try {
       const payload = {
-        ...formData,
+        ...formData
       };
-      const response = await instance.post('/api/member/additional-info', payload);
+      const response = await instance.post('/api/member/default-info', payload);
       if (response.data.status === 'success') {
         nav("/user/mypage"); // 저장 후 마이페이지로 이동
       }
@@ -87,41 +97,33 @@ const EditMyInfo = () => {
         <div>
           <div className={textCategoryClass}>소속</div>
           <div>
-            <input
-              type="text"
-              placeholder={infoData.belong}
-              className={`rounded-[10px] w-[336px] h-14 placeholder:text-[17px] bg-[#FFFFFF] rounded-[10px] w-[447px] h-[48px] pl-[20px] mb-[15px] outline-none`}
-              readOnly
-            />
-            {/* <InputField
+            <InputField
               place={'belongInfoReadOnly'}
-              placeholderText={infoData.belong}
+              placeholderText={formData.belong}
               value={formData.belong}
-            /> */}
+              name="belong"
+              onChange={handleInputChange}
+            />
           </div>
         </div>
         <div>
           <div className={textCategoryClass}>직업</div>
           <div>
-            <input
-              type="text"
-              placeholder={jobMap[infoData.job]}
-              className={`rounded-[10px] w-[336px] h-14 placeholder:text-[17px] bg-[#FFFFFF] rounded-[10px] w-[447px] h-[48px] pl-[20px] mb-[15px] outline-none`}
-              readOnly
-            />
-            {/* <InputField 
+            <InputField 
               place={'belongInfoReadOnly'}
-              placeholderText={jobMap[infoData.job]}
-              value={formData.job}
-            /> */}
+              placeholderText={jobMap[formData.job]}
+              value={jobMap[formData.job]}
+              name="job"
+              onChange={handleInputChange}
+            />
           </div>
         </div>
         <div className="mb-[40px]">
           <div className={textCategoryClass}>학력</div>
           <div>
             <InputField
               place={'belongInfo'}
-              placeholderText={infoData.educationBackground}
+              placeholderText={formData.educationBackground}
               value={formData.educationBackground}
               name="educationBackground"
               onChange={handleInputChange}
@@ -171,7 +173,7 @@ const EditMyInfo = () => {
           <div>
             <InputField
               place={'belongInfo'}
-              placeholderText={infoData.languageScore}
+              placeholderText={formData.languageScore}
               value={formData.languageScore}
               name="languageScore"
               onChange={handleInputChange}

diff --git a/src/pages/Record.jsx b/src/pages/Record.jsx
@@ -38,7 +38,7 @@ const Record = () => {
 		console.log('저장할 데이터:', savedData);
 		try {
 			const response = await instance.post('/api/job-posts', savedData);
-      window.location.reload();
+      //window.location.reload();
 			console.log('서버 응답:', response.data);
 		} catch (error) {
 			console.error('에러 발생:', error);