Merge pull request #140 from Team-inglo/fix/IGW-60/134

[Fix/igw 60/134] 마이페이지, 회원가입 QC 수정사항

src/api/resumes.ts

@@ -127,16 +127,13 @@ export const patchLanguagesLevel = async ({
 };
 
 // 7.14 (유학생) 언어 - ETC 수정하기
-export const patchaEtcLanguageLevel = async ({
-  id,
-  language,
-}: {
-  id: number;
-  language: AdditionalLanguageRequest;
-}) => {
+export const patchEtcLanguageLevel = async (
+  id: number,
+  data: AdditionalLanguageRequest,
+) => {
   const response = await api.patch(
     `/users/resumes/languages/additional-languages/${id}`,
-    language,
+    data,
   );
   return response.data;
 };

src/components/Language/LanguageCard.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react';
 import Button from '@/components/Common/Button';
 import {
   useDeleteEtcLanguageLevel,
+  usePatchEtcLanguageLevel,
   usePatchLanguagesLevel,
 } from '@/hooks/api/useResume';
 import NumberRadioButton from '@/components/Language/NumberRadioButton';
@@ -34,13 +35,26 @@ const LanguageCard = ({
   const [selectedLevel, setSelectedLevel] = useState(level);
 
   const { mutate: deleteEtcLanguage } = useDeleteEtcLanguageLevel();
-  const { mutate: patchLanguagesLevel } = usePatchLanguagesLevel({
-    type: title.toLowerCase().replace(/\s+/g, '-') as LanguagesLevelType,
-    level: selectedLevel,
-  });
+  const { mutate: patchLanguagesLevel } = usePatchLanguagesLevel();
+  const { mutate: patchEtcLanguageLevel } = usePatchEtcLanguageLevel();
 
   const handleLevelChange = () => {
-    patchLanguagesLevel();
+    // 기타 언어 수정
+    if (etcLanguageId) {
+      patchEtcLanguageLevel({
+        id: etcLanguageId,
+        data: {
+          language_name: title,
+          level: selectedLevel,
+        },
+      });
+    }
+    // 기본 언어 수정
+    else
+      patchLanguagesLevel({
+        type: title.toLowerCase().replace(/\s+/g, '-') as LanguagesLevelType,
+        level: selectedLevel,
+      });
     setLevelBottomSheet(false);
   };
 

src/components/Language/LanguageSection.tsx

@@ -10,13 +10,13 @@ const LanguageSection = () => {
   const navigage = useNavigate();
 
   // 언어 레벨 리스트 상태 관리
-  const [languageData, SetLanguageData] =
+  const [languageData, setLanguageData] =
     useState<LanguagesSummariesResponse>();
 
   // 7.4 (유학생) 언어 요약 조회하기
   useEffect(() => {
     if (data) {
-      SetLanguageData(data.data);
+      setLanguageData(data.data);
     }
   }, [data]);
 

src/components/ManageResume/components/EducationDetail.tsx

@@ -22,20 +22,9 @@ const EducationDetail = ({ data }: EducationDetailProps) => {
       {data.map((education) => (
         <div
           key={education.id}
-          className="relative px-3 py-4 flex justify-between items-start bg-[#F4F4F9] rounded-xl"
+          className="relative px-3 py-4 flex items-start bg-[#F4F4F9] rounded-xl"
         >
-          <div className="text-[#656565]">
-            <p className="head-3 mb-1">{education.education_level}</p>
-            <div className="flex gap-1 body-3 mb-4 mr-4 justify-between">
-              <p className="max-w-[50%]">{education.school_name}</p>
-              <p>•</p>
-              <p className="max-w-[50%]">{education.major}</p>
-            </div>
-            <p className="caption-1">
-              {formatDate(education.start_date)} ~{' '}
-              {formatDate(education.end_date)}
-            </p>
-          </div>
+          {/* 수정, 삭제 아이콘 */}
           <div className="absolute top-4 right-3 flex justify-center items-center gap-2.5 ml-1">
             <EditIcon
               onClick={() => navigate(`/resume/education/edit/${education.id}`)}
@@ -46,6 +35,19 @@ const EducationDetail = ({ data }: EducationDetailProps) => {
               className="cursor-pointer"
             />
           </div>
+          {/* 학력 정보 */}
+          <div className="text-[#656565]">
+            <p className="head-3 mb-1">{education.education_level}</p>
+            <div className="flex gap-1 body-3 mb-4 mr-4">
+              <p>{education.school_name}</p>
+              <p>•</p>
+              <p>{education.major}</p>
+            </div>
+            <p className="caption-1">
+              {formatDate(education.start_date)} ~{' '}
+              {formatDate(education.end_date)}
+            </p>
+          </div>
         </div>
       ))}
     </>

src/components/ManageResume/components/LanguageManageDetail.tsx

@@ -24,7 +24,7 @@ const LanguageManageDetail = ({ data }: LanguageManageDetailProps) => {
             key={lang.id}
             className="bg-[#FEF387] rounded-md px-4 py-1.5 text-[#1E1926] caption-1"
           >
-            {lang.laguage_name} Level {lang.level}
+            {lang.language_name} Level {lang.level}
           </p>
         ))}
     </div>

src/components/PostApply/PostApplyResume.tsx

@@ -170,7 +170,7 @@ const PostApplyResume = () => {
               className="flex justify-between items-center w-full py-[1rem] px-[0.75rem] rounded-[0.75rem] bg-[#F4F4F980]"
             >
               <h5 className="pb-[0.125rem] button-2 text-[#464646]">
-                {data.laguage_name}
+                {data.language_name}
               </h5>
               <div className="px-[0.5rem] py-[0.25rem] rounded-[0.188rem] border-[0.031rem] border-[#7872ED] text-[#7872ED] bg-[#2801E81F] caption-2">
                 Level {data.level}

src/components/Profile/ProfileMenu.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { IconType } from '@/constants/profile';
 import ProfileIcon from '@/assets/icons/Profile/ProfileIcon.svg?react';
 import ManageIcon from '@/assets/icons/Profile/ManageIcon.svg?react';
-import ScrappedIcon from '@/assets/icons/Profile/ScrappedIcon.svg?react';
+import ScrappedIcon from '@/assets/icons/Scrap.svg?react';
 import NotificationIcon from '@/assets/icons/Profile/NotificationIcon.svg?react';
 import LanguageIcon from '@/assets/icons/Profile/LanguageIcon.svg?react';
 import LogoutIcon from '@/assets/icons/Profile/LogoutIcon.svg?react';
@@ -54,7 +54,7 @@ const ProfileMenu = ({
       case IconType.MANAGE:
         return <ManageIcon />;
       case IconType.SCRAPPED:
-        return <ScrappedIcon />;
+        return <ScrappedIcon width={18} height={18} />;
       case IconType.NOTIFICATION:
         return <NotificationIcon />;
       case IconType.LANGUAGE:

src/components/Signup/SignupVerification.tsx

@@ -138,7 +138,7 @@ const SignupVerification = ({
           {Array.from({ length: 6 }).map((_, index) => (
             <input
               key={index}
-              type="text"
+              type="number"
               maxLength={1}
               className="title-2 bg-[#F4F4F9] text-center flex justify-center items-center w-11 h-14 rounded-2xl"
               ref={(el) => (inputRefs.current[index] = el)}

src/hooks/api/useResume.ts

@@ -10,14 +10,18 @@ import {
   getSearchSchools,
   getWorkExperience,
   patchEducation,
+  patchEtcLanguageLevel,
   patchIntroduction,
   patchLanguagesLevel,
   patchWorkExperience,
   postEducation,
   postEtcLanguageLevel,
   postWorkExperience,
 } from '@/api/resumes';
-import { LanguagesLevelType } from '@/types/api/resumes';
+import {
+  AdditionalLanguageRequest,
+  LanguagesLevelType,
+} from '@/types/api/resumes';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -57,15 +61,15 @@ export const useGetLanguagesSummaries = () => {
 // 7.11 (유학생) 언어 - TOPIK 레벨 수정하기
 // 7.12 (유학생) 언어 - SOCIAL INTEGRATION PROGRAM 레벨 수정하기
 // 7.13 (유학생) 언어 - SEJONG INSTITUTE 레벨 수정하기
-export const usePatchLanguagesLevel = ({
-  type,
-  level,
-}: {
-  type: LanguagesLevelType;
-  level: number;
-}) => {
+export const usePatchLanguagesLevel = () => {
   return useMutation({
-    mutationFn: () => patchLanguagesLevel({ type, level }),
+    mutationFn: ({
+      type,
+      level,
+    }: {
+      type: LanguagesLevelType;
+      level: number;
+    }) => patchLanguagesLevel({ type, level }),
     onSuccess: () => {
       window.location.reload();
     },
@@ -109,7 +113,7 @@ export const usePostEtcLanguageLevel = () => {
   return useMutation({
     mutationFn: postEtcLanguageLevel,
     onSuccess: () => {
-      navigate('/resume/language');
+      navigate('/resume/language', { state: { from: location.pathname } });
     },
     onError: (error) => {
       alert('이미 존재하는 언어입니다');
@@ -160,6 +164,25 @@ export const usePatchEducation = () => {
   });
 };
 
+// 7.14 (유학생) 언어 - ETC 수정하기
+export const usePatchEtcLanguageLevel = () => {
+  return useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: number;
+      data: AdditionalLanguageRequest;
+    }) => patchEtcLanguageLevel(id, data),
+    onSuccess: () => {
+      window.location.reload();
+    },
+    onError: (error) => {
+      console.error('기타 언어 수정 실패', error);
+    },
+  });
+};
+
 // 7.15 (유학생) 자기소개 삭제하기
 export const useDeleteIntroduction = () => {
   const navigate = useNavigate();

src/pages/EditProfile/EditProfilePage.tsx

@@ -14,6 +14,7 @@ import { InputType } from '@/types/common/input';
 import {
   changeValidData,
   transformToProfileRequest,
+  validateChanges,
 } from '@/utils/editProfileData';
 import { useEffect, useState } from 'react';
 import { country, phone, visa } from '@/constants/information';
@@ -84,10 +85,12 @@ const EditProfilePage = () => {
 
   // 수정 여부를 확인(프로필 사진만 변경했을 경우 포함)
   useEffect(() => {
-    if (profileImage || userProfile === originalData) {
+    if (originalData && validateChanges(originalData, userData, phoneNum)) {
       setIsChanged(true);
+    } else {
+      setIsChanged(false);
     }
-  }, [userProfile, profileImage]);
+  }, [userData, originalData, phoneNum]);
 
   return (
     <>

src/pages/Language/LanguagePage.tsx

@@ -1,15 +1,24 @@
 import BaseHeader from '@/components/Common/Header/BaseHeader';
 import LanguageSection from '@/components/Language/LanguageSection';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const LanguagePage = () => {
+  const location = useLocation();
   const navigate = useNavigate();
 
+  const goBack = () => {
+    const previousPath = location.state?.from;
+    // 기타 언어 추가 페이지를 경우하였을 경우
+    if (previousPath == '/resume/language/add') navigate(-3);
+    // 기타 언어 추가 페이지를 경우하지 않았을 경우
+    else navigate(-1);
+  };
+
   return (
     <div>
       <BaseHeader
         hasBackButton={true}
-        onClickBackButton={() => navigate('/profile/manage-resume')}
+        onClickBackButton={() => goBack()}
         hasMenuButton={false}
         title="Language"
       />

src/pages/PostLanguage/PostLanguagePage.tsx

@@ -40,7 +40,9 @@ const PostLanguagePage = () => {
     <div>
       <BaseHeader
         hasBackButton={true}
-        onClickBackButton={() => navigate('/resume/language')}
+        onClickBackButton={() =>
+          navigate('/resume/language', { state: { from: location.pathname } })
+        }
         hasMenuButton={false}
         title="Add Language"
       />

src/pages/SetEducation/PatchEducationPage.tsx

@@ -48,7 +48,7 @@ const PatchEducationPage = () => {
     if (initialData) setEducationData(initialData);
   };
 
-  // TODO: API - 7.3 학력 상세 조회하기
+  // API - 7.3 학력 상세 조회하기
   const { data: getEducationData } = useGetEducation(id!);
   useEffect(() => {
     if (getEducationData) {
@@ -78,7 +78,7 @@ const PatchEducationPage = () => {
 
   return (
     <>
-      {fetchData && (
+      {fetchData && initialData && (
         <>
           <div className="mb-24">
             <BaseHeader

src/types/postApply/resumeDetailItem.ts

@@ -36,7 +36,7 @@ export type EducationType = {
 
 export type LanguageType = {
   id: number;
-  laguage_name: string;
+  language_name: string;
   level: number;
 };
 

src/utils/editProfileData.ts

@@ -72,3 +72,22 @@ export const transformToEmployerProfileRequest = (
     is_icon_img_changed: false,
   };
 };
+
+export const validateChanges = (
+  originalData: UserEditRequestBody,
+  userData: UserEditRequestBody,
+  phoneNum: { start: string; middle: string; end: string },
+) => {
+  const formattedPhoneNumber = `${phoneNum.start}-${phoneNum.middle}-${phoneNum.end}`;
+
+  return Object.entries(userData).some(([key, value]) => {
+    const typedKey = key as keyof UserEditRequestBody;
+    if (typedKey === 'phone_number') {
+      return (
+        originalData[typedKey] !== formattedPhoneNumber || // input 필드에서 입력받은 데이터
+        originalData[typedKey] !== value // api 수정 요청으로 포맷팅된 데이터
+      );
+    }
+    return value !== originalData[typedKey];
+  });
+};