Merge pull request #323 from TEAM-SEONYAK/feat/#316/presignedUrl2

[ Feat ] 명함 사진 Presigned URL 연결

src/pages/onboarding/apis/businesscardAxios.ts

@@ -1,17 +1,13 @@
-import { authAxios } from '@utils/apis';
+import { authAxios, axios } from '@utils/apis';
 
-export const businessCardAxios = async (file: File) => {
-  try {
-    const formData = new FormData();
-    formData.append('businessCardImage', file);
+export const businessCardUrlAxios = () => {
+  return authAxios.get('/v1/image/businesscard');
+};
 
-    const response = await authAxios.patch('/api/v1/businesscard-image', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    });
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
+export const uploadBusinessCardAxios = async (url: string, file: File) => {
+  await axios.put(url, file, {
+    headers: {
+      'Content-Type': file.type,
+    },
+  });
 };

src/pages/onboarding/apis/profileImageAxios.ts

@@ -1,7 +1,7 @@
 import { authAxios, axios } from '@utils/apis';
 
-export const presignedUrlAxios = () => {
-  return authAxios.get('/api/v1/image');
+export const profileUrlAxios = () => {
+  return authAxios.get('/v1/image/profile');
 };
 
 export const uploadProfileImageAxios = async (url: string, file: File) => {

src/pages/onboarding/components/commonOnboarding/Step개인정보입력.tsx

@@ -9,8 +9,9 @@ import useNicknameValid from '@pages/onboarding/hooks/useNicknameQuery';
 import { useProfileQuery } from '@pages/onboarding/hooks/useProfileImgQuery';
 import { useLocation, useNavigate, useOutletContext } from 'react-router-dom';
 import { JoinContextType } from '@pages/onboarding/type';
-import usePresignedUrl from '@pages/onboarding/hooks/usePresignedUrl';
+
 import { isAxiosError } from 'axios';
+import { useProfilePresignedUrl } from '@pages/onboarding/hooks/usePresignedUrl';
 
 const Step개인정보입력 = () => {
   const { data, setData } = useOutletContext<JoinContextType>();
@@ -29,7 +30,7 @@ const Step개인정보입력 = () => {
   const startImgArr = [StartProfile1Img, StartProfile2Img];
   const startImg = useMemo(() => startImgArr[Math.floor(Math.random() * 2)], []);
 
-  const { res } = usePresignedUrl();
+  const { res } = useProfilePresignedUrl();
   const { mutate: imageUploadMutate } = useProfileQuery();
 
   const handleChangeImage = (e: ChangeEvent<HTMLInputElement>) => {

src/pages/onboarding/components/commonOnboarding/Step번호입력.tsx

@@ -82,8 +82,7 @@ const Step번호입력 = () => {
         setTimeLeft(TIME);
         setData((prev) => ({
           ...prev,
-          phoneNumber: phoneNumber,
-          businessCard: 'https://example.com/business-card.jpg',
+          phoneNumber: phoneNumber
         }));
       },
       onError: () => {

src/pages/onboarding/components/seniorOnboarding/Step명함인증.tsx

@@ -9,13 +9,15 @@ import { useNavigate, useOutletContext } from 'react-router-dom';
 import { InputBox, TextBox } from '../TextBox';
 import { useBusinessCardQuery } from '@pages/onboarding/hooks/useBusinessCardQuery';
 import { BizInfoType, JoinContextType } from '@pages/onboarding/type';
-import { getToken } from '@utils/storage';
+import { useBusinessCardPresignedUrl } from '@pages/onboarding/hooks/usePresignedUrl';
 
 const Step명함인증 = () => {
   const { setData } = useOutletContext<JoinContextType>();
+  const { res } = useBusinessCardPresignedUrl();
+  const { mutate: imageUploadMutate } = useBusinessCardQuery();
   const mutation = useOCRBizQuery();
-  const cardmutation = useBusinessCardQuery();
   const navigate = useNavigate();
+  const [imageFile, setImageFile] = useState<File | null>(null);
   const [isOpen, setOpen] = useState(false);
   const [info, setInfo] = useState<BizInfoType | null>(null);
   const handleSetOpen = (type: boolean) => {
@@ -28,33 +30,22 @@ const Step명함인증 = () => {
   const handleChangeFile = async (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     const file = e.target.files[0];
-    const token = getToken();
-
-    if (!token) {
-      console.error('액세스 토큰이 없습니다.');
-      return;
-    }
+    setImageFile(file);
 
     mutation.mutate(file, {
       onSuccess: (res) => {
         setInfo(res.data.data);
       },
     });
-
-    cardmutation.mutate(file, {
-      onSuccess: (res) => {
-        console.log(res);
-      },
-      onError: (error) => {
-        console.error('명함 이미지 업로드 실패:', error);
-      },
-    });
   };
 
   const handleClickLink = () => {
+    if (!res || !imageFile) return;
+    imageUploadMutate({ url: res.url, image: imageFile });
     setData((prev) => ({
       ...prev,
       company: info?.company,
+      businessCard: res.fileName,
     }));
     navigate('/seniorOnboarding/8');
   };

src/pages/onboarding/hooks/useBusinessCardQuery.ts

@@ -1,13 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
-import { businessCardAxios } from '../apis/businesscardAxios';
+import { uploadBusinessCardAxios } from '../apis/businesscardAxios';
 
 export const useBusinessCardQuery = () => {
-  const mutation = useMutation({
-    mutationFn: (image: File) => businessCardAxios(image),
-    onError: (error) => {
-      console.log('명함 업로드 에러: ', error);
-    },
+  return useMutation({
+    mutationFn: ({ url, image }: { url: string; image: File }) => uploadBusinessCardAxios(url, image),
   });
-
-  return mutation;
 };

src/pages/onboarding/hooks/usePresignedUrl.ts

@@ -1,12 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
-import { presignedUrlAxios } from '../apis/profileImageAxios';
+import { profileUrlAxios } from '../apis/profileImageAxios';
+import { businessCardUrlAxios } from '../apis/businesscardAxios';
 
-const usePresignedUrl = () => {
+export const useProfilePresignedUrl = () => {
   const { data } = useQuery({
-    queryKey: ['presignedurl'],
-    queryFn: presignedUrlAxios,
+    queryKey: ['profile-url'],
+    queryFn: profileUrlAxios,
   });
   return { res: data?.data?.data };
 };
 
-export default usePresignedUrl;
+export const useBusinessCardPresignedUrl = () => {
+  const { data } = useQuery({
+    queryKey: ['businesscard-url'],
+    queryFn: businessCardUrlAxios,
+  });
+  return { res: data?.data?.data };
+};