[Fix] 프로필 사진 undefined로 서버에 전송되는 이슈 해결

package.json

@@ -33,6 +33,7 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
+    "@hookform/devtools": "^4.3.1",
     "@tanstack/eslint-plugin-query": "^5.35.6",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",

src/views/ApplyPage/components/DefaultSection/index.tsx

@@ -36,7 +36,7 @@ const ProfileImage = ({ disabled, pic }: ProfileImageProps) => {
     setError,
     formState: { errors },
   } = useFormContext();
-  const [image, setImage] = useState('');
+  const [image, setImage] = useState<string | null>('');
 
   const hasImage = image !== 'max-size' && (pic || image);
 
@@ -60,6 +60,7 @@ const ProfileImage = ({ disabled, pic }: ProfileImageProps) => {
     reader.onloadend = () => {
       clearErrors('picture');
       setImage(reader.result as string);
+      setValue('picture', imageFile);
     };
   };
 

src/views/ApplyPage/index.tsx

@@ -1,4 +1,5 @@
 import { track } from '@amplitude/analytics-browser';
+import { DevTool } from '@hookform/devtools';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -235,7 +236,7 @@ const ApplyPage = ({ onSetComplete }: ApplyPageProps) => {
 
     const answers = JSON.stringify(answersValue);
     const formValues: ApplyRequest = {
-      picture: picture?.[0],
+      picture,
       pictureUrl: errors.picture ? undefined : applicantDraft?.pic,
       part,
       address,