♻️ [#600] Refactor: 기관 마이페이지 프리사인드 이미지 업로드 적용 (#604)

Author: youjin-hong

src/features/edit-center-profile/index.tsx

@@ -19,6 +19,7 @@ const EditCenterProfile = ({ data }: EditCenterProfileProps) => {
   const {
     preview,
     handleImageUpload,
+    handlePutProfileImage,
     centerName,
     originalName,
     centerPhone,
@@ -56,7 +57,7 @@ const EditCenterProfile = ({ data }: EditCenterProfileProps) => {
                   }
                   onImageUpload={handleImageUpload}
                 />
-                <ProfileImgEditButton label="수정하기" type="blue" onClick={() => console.log('프로필이미지 수정')} />
+                <ProfileImgEditButton label="수정하기" type="blue" onClick={handlePutProfileImage} />
               </ProfileSection>
               <FormSection>
                 <EditProfileForm

src/features/edit-center-profile/logic/useEditCenterProfile.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import {
   useUpdateCenterProfile,
+  useUpdateProfileImage,
   type CenterProfileUpdateRequest
 } from '@/store/queries/center-mypage/useCenterProfile';
 import { useAlertDialog } from '@/store/stores/dialog/dialogStore';
@@ -12,6 +13,7 @@ interface UseEditCenterProfileProps {
 
 const useEditCenterProfile = ({ data }: UseEditCenterProfileProps) => {
   const updateProfile = useUpdateCenterProfile();
+  const updateProfileImage = useUpdateProfileImage();
   const { openAlert } = useAlertDialog();
 
   // 각 input 상태 관리
@@ -39,6 +41,37 @@ const useEditCenterProfile = ({ data }: UseEditCenterProfileProps) => {
     setPreview(file);
   };
 
+  // const handlePutProfileImage = async () => {
+  //   if (!preview) {
+  //     openAlert('변경할 이미지를 선택해주세요.');
+  //     return;
+  //   }
+
+  //   try {
+  //     const fileName = preview.name;
+  //     await updateProfileImage.mutateAsync(fileName);
+  //     openAlert('프로필 이미지가 수정되었습니다.');
+  //   } catch (error) {
+  //     console.error('이미지 수정 중 오류가 발생했습니다:', error);
+  //     openAlert('이미지 수정 중 오류가 발생했습니다. 다시 시도해주세요.');
+  //   }
+  // };
+
+  const handlePutProfileImage = async () => {
+    if (!preview) {
+      openAlert('변경할 이미지를 선택해주세요.');
+      return;
+    }
+
+    try {
+      await updateProfileImage.mutateAsync(preview); // File 객체 직접 전달
+      openAlert('프로필 이미지가 수정되었습니다.');
+    } catch (error) {
+      console.error('이미지 수정 중 오류가 발생했습니다:', error);
+      openAlert('이미지 수정 중 오류가 발생했습니다. 다시 시도해주세요.');
+    }
+  };
+
   // 입력 핸들러 모음
   const handleNameChange = (name: string) => setCenterName(name);
   const handlePhoneChange = (phone: string, isValid: boolean) => {
@@ -82,6 +115,7 @@ const useEditCenterProfile = ({ data }: UseEditCenterProfileProps) => {
   return {
     preview,
     handleImageUpload,
+    handlePutProfileImage,
     centerName,
     originalName,
     centerPhone,
@@ -94,7 +128,7 @@ const useEditCenterProfile = ({ data }: UseEditCenterProfileProps) => {
     // validURL,
     validPhone,
     handleEditProfile,
-    isSubmitting: updateProfile.isPending
+    isSubmitting: updateProfile.isPending || updateProfileImage.isPending
   };
 };
 

src/store/queries/center-mypage/useCenterProfile.ts

@@ -17,6 +17,12 @@ export interface CenterProfileUpdateRequest {
   homepage_url: string;
 }
 
+// 프리사인드 이미지 업로드를 위한 타입 정의
+// interface PresignedUrlResponse {
+//   code: number;
+//   data: string;
+// }
+
 // 기관 프로필 get 해오는 fetch 함수
 const fetchCenterProfile = async (centerId: string): Promise<centerProfileType> => {
   const response = await axiosInstance.get(`/api/center/profile/${centerId}`);
@@ -59,3 +65,43 @@ export const useUpdateCenterProfile = () => {
     }
   });
 };
+
+// // 이미지 프로필 수정 put 훅
+export const useUpdateProfileImage = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (file: File) => {
+      try {
+        // 프리사인드 URL 요청
+        const response = await axiosInstance.put('/api/user/image', {
+          file_name: file.name
+        });
+
+        console.log('프리사인드 url 확인:', response);
+
+        if (!response.data) {
+          throw new Error('프리사인드 url이 존재하지 않습니다.');
+        }
+
+        const token = localStorage.getItem('token');
+
+        // 프리사인드 url로 파일 업로드
+        await axios.put(response.data, file, {
+          headers: {
+            'Content-Type': file.type,
+            Authorization: token || ''
+          }
+        });
+
+        console.log('파일 업로드 성공');
+      } catch (error) {
+        console.error('pre-signed 이미지 업로드 중 오류 발생:', error);
+        throw error;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['centerProfile'] });
+    }
+  });
+};