🐛 fix: 고용주 회원가입 및 정보수정 api 수정 #73

src/api/auth.ts

@@ -128,7 +128,7 @@ export const withdraw = async (): Promise<RESTYPE<null>> => {
 
 // 고용주 회원가입
 export const signUpEmployer = async (
-  signupInfo: EmployerRegistrationRequest,
+  signupInfo: FormData,
 ): Promise<RESTYPE<SignUpResponse>> => {
   const response = await api.post(`/auth/owners`, signupInfo);
   return response.data;

src/components/Employer/EditProfile/EmployerEditInputSection.tsx

@@ -19,6 +19,7 @@ type EmployerEditInputSectionProps = {
   newEmployData: EmployerProfileRequestBody;
   setNewEmployData: (newData: EmployerProfileRequestBody) => void;
   setLogoFile: (file: File | undefined) => void;
+  initialPhonNum: string;
 };
 
 const enum LogoType {
@@ -31,6 +32,7 @@ const EmployerEditInputSection = ({
   newEmployData,
   setNewEmployData,
   setLogoFile,
+  initialPhonNum,
 }: EmployerEditInputSectionProps) => {
   // 주소 검색용 input 저장하는 state
   const [addressInput, setAddressInput] = useState('');
@@ -49,6 +51,18 @@ const EmployerEditInputSection = ({
     middle: '',
     end: '',
   });
+
+  useEffect(() => {
+    if (initialPhonNum) {
+      const splitPhoneNum = initialPhonNum.split('-');
+      setPhoneNum({
+        start: splitPhoneNum[0] || '',
+        middle: splitPhoneNum[1] || '',
+        end: splitPhoneNum[2] || '',
+      });
+    }
+  }, [initialPhonNum]);
+
   const [logoStatus, setLogoStatus] = useState<LogoType>(LogoType.NONE);
   const [selectedImage, setSelectedImage] = useState<string>();
   // 현재 좌표 기준 주소 획득
@@ -143,14 +157,15 @@ const EmployerEditInputSection = ({
   // 로고 선택
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file) {
+    if (file && file.type.startsWith('image/')) {
       const reader = new FileReader();
       reader.onloadend = () => {
         setSelectedImage(reader.result as string);
         setLogoFile(file);
         setLogoStatus(LogoType.SELECTED);
       };
       reader.readAsDataURL(file);
+      console.log(file);
     }
   };
   // Giggle 기본로고 선택 handler

src/pages/Employer/EditProfile/EmployerEditProfilePage.tsx

@@ -45,27 +45,29 @@ const EmployerEditProfilePage = () => {
 
   const handleSubmit = () => {
     if (isValidEmployerProfile(newEmployData)) {
-      // 로고 이미지 변경 여부
-      if (originalData?.logo_img_url === logoFile) {
-        setNewEmployData({ ...newEmployData, is_icon_img_changed: false });
-      } else {
-        setNewEmployData({ ...newEmployData, is_icon_img_changed: true });
-      }
-      // patch 훅 호출
+      // 이미지 변경 여부를 설정하여 프로필 수정 데이터를 업데이트합니다.
+      const updatedEmployData = {
+        ...newEmployData,
+        is_icon_img_changed: Boolean(logoFile),
+      };
 
       const formData = new FormData();
-      // 이미지가 있을 경우 FormData에 추가
+
+      // 이미지 파일이 있을 경우 image로 추가
       if (logoFile) {
         formData.append('image', logoFile);
       }
-      // JSON 데이터를 Blob으로 변환 후 FormData에 추가
+
+      // JSON 데이터를 Blob으로 변환하여 body라는 이름으로 추가
       formData.append(
         'body',
-        new Blob([JSON.stringify(newEmployData)], {
+        new Blob([JSON.stringify(updatedEmployData)], {
           type: 'application/json',
         }),
       );
-      mutate(formData);
+
+      console.log('formData 준비 완료');
+      mutate(formData); // PATCH 요청 전송
     }
   };
 
@@ -81,6 +83,7 @@ const EmployerEditProfilePage = () => {
         newEmployData={newEmployData}
         setNewEmployData={setNewEmployData}
         setLogoFile={(file: File | undefined) => setLogoFile(file)}
+        initialPhonNum={newEmployData.owner_info.phone_number}
       />
       <BottomButtonPanel>
         <Button

src/pages/Employer/signup/EmployerSignupInfoPage.tsx

@@ -31,14 +31,26 @@ const EmployerSignupInfoPage = () => {
   // 최종 완료 시 호출, 서버 api 호출 및 완료 modal 표시
   const handleSubmit = () => {
     if (isValidEmployerRegistration(newEmployData)) {
-      mutate({
-        image: logoFile,
-        body: {
-          ...newEmployData,
-        },
-      });
+      const formData = new FormData();
+
+      // 이미지 파일이 있는 경우에만 추가
+      if (logoFile) {
+        formData.append('image', logoFile);
+      }
+
+      // JSON 데이터를 Blob으로 변환하여 추가
+      formData.append(
+        'body',
+        new Blob([JSON.stringify(newEmployData)], {
+          type: 'application/json',
+        }),
+      );
+
+      // mutate 호출로 서버에 전송
+      mutate(formData);
     }
   };
+
   return (
     <div className="last:pb-[10rem]">
       <BaseHeader