feat(IN-316): 마이페이지 프로필 변경 기능 추가

/me/profie 페이지에서 카메라 버튼 클릭 시 파일 선택 → S3 직접 업로드 → 백엔드 objectKey 전달 순서로 프로필 이미지 변경 기능 구현
Presigned URL 발급 → S3 PUT → 백엔드 PUT 3단계 업로드 플로우 구성

Author: kimYunHyeong

next.config.ts

@@ -6,6 +6,7 @@ const nextConfig: NextConfig = {
       { protocol: 'https', hostname: 'i.ytimg.com' },
       { protocol: 'https', hostname: 'yt3.ggpht.com' },
       { protocol: 'https', hostname: 'lh3.googleusercontent.com' },
+      { protocol: 'https', hostname: '*.s3.ap-northeast-2.amazonaws.com' },
     ],
   },
   /* Cross-Origin-Opener-Policy로 인해 팝업이 닫히지 않는 문제 해결 */

src/features/me/index.ts

@@ -7,6 +7,7 @@ export {
 export type { WithdrawalReason } from './model/withdrawalReason'
 export { useMyProfile } from './profile/model/useMyProfile'
 export { useEditPreferencesModal } from './profile/model/useEditPreferencesModal'
+export { useEditProfileImage } from './profile/model/useEditProfileImage'
 export { EditPreferencesModal } from './profile/ui/EditPreferencesModal'
 export type {
   MyProfileDto,

src/features/me/profile/api/profileImageApi.ts

@@ -0,0 +1,56 @@
+import type { ApiResponse } from '@/shared/api/types'
+import { axiosInstance } from '@/shared/api'
+import type {
+  ProfileImageUploadUrlRequest,
+  ProfileImageUploadUrlResponse,
+  ProfileImageUpdateRequest,
+  MyProfileDto,
+} from '../types'
+
+export async function postProfileImageUploadUrl(
+  payload: ProfileImageUploadUrlRequest,
+): Promise<ProfileImageUploadUrlResponse> {
+  const response = await axiosInstance.post<
+    ApiResponse<ProfileImageUploadUrlResponse>
+  >('/user/profile-image/upload-url', payload)
+  return response.data.responseDto
+}
+
+export async function uploadFileToS3(
+  uploadUrl: string,
+  file: File,
+): Promise<void> {
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 30000)
+  try {
+    const response = await fetch(uploadUrl, {
+      method: 'PUT',
+      body: file,
+      headers: {
+        'Content-Type': file.type,
+        'Cache-Control': 'public, max-age=31536000, immutable',
+      },
+      signal: controller.signal,
+    })
+    if (!response.ok) {
+      throw new Error(`S3 업로드 실패: ${response.status}`)
+    }
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      throw new Error('S3 업로드 타임아웃: 30초 초과')
+    }
+    throw error
+  } finally {
+    clearTimeout(timeout)
+  }
+}
+
+export async function putProfileImage(
+  payload: ProfileImageUpdateRequest,
+): Promise<MyProfileDto> {
+  const response = await axiosInstance.put<ApiResponse<MyProfileDto>>(
+    '/user/profile-image',
+    payload,
+  )
+  return response.data.responseDto
+}

src/features/me/profile/model/useEditProfileImage.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  postProfileImageUploadUrl,
+  uploadFileToS3,
+  putProfileImage,
+} from '../api/profileImageApi'
+
+export function useEditProfileImage() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (file: File) => {
+      const { uploadUrl, objectKey } = await postProfileImageUploadUrl({
+        contentType: file.type,
+        fileSize: file.size,
+      })
+
+      await uploadFileToS3(uploadUrl, file)
+
+      return putProfileImage({ objectKey })
+    },
+    onSuccess: (updatedProfile) => {
+      queryClient.setQueryData(['myProfile'], updatedProfile)
+    },
+  })
+}

src/features/me/profile/types.ts

@@ -18,3 +18,19 @@ export interface MyProfileDto {
   account: MyProfileAccountDto
   preferences: MyProfilePreferencesDto
 }
+
+export interface ProfileImageUploadUrlRequest {
+  contentType: string
+  fileSize: number
+}
+
+export interface ProfileImageUploadUrlResponse {
+  uploadUrl: string
+  objectKey: string
+  publicUrl: string
+  expiresInSeconds: number
+}
+
+export interface ProfileImageUpdateRequest {
+  objectKey: string
+}

src/shared/api/msw/handlers/myProfileHandlers.ts

@@ -31,4 +31,35 @@ export const myProfileHandlers = [
       error: null,
     })
   }),
+
+  http.post(`${process.env.NEXT_PUBLIC_API_URL}/user/profile-image/upload-url`, () => {
+    return HttpResponse.json({
+      success: true,
+      responseDto: {
+        uploadUrl: 'https://mock-s3.example.com/upload?signature=mock',
+        objectKey: 'profiles/mock-object-key.jpg',
+        publicUrl: 'https://mock-s3.example.com/profiles/mock-object-key.jpg',
+        expiresInSeconds: 300,
+      },
+      error: null,
+    })
+  }),
+
+  http.put(`${process.env.NEXT_PUBLIC_API_URL}/user/profile-image`, async ({ request }) => {
+    const body = await request.json() as { objectKey: string }
+
+    currentProfile = {
+      ...currentProfile,
+      account: {
+        ...currentProfile.account,
+        profileImageUrl: `https://mock-s3.example.com/${body.objectKey}`,
+      },
+    }
+
+    return HttpResponse.json({
+      success: true,
+      responseDto: currentProfile,
+      error: null,
+    })
+  }),
 ]

src/widgets/me/personalInfo/ui/PersonalInfoSection.tsx

@@ -1,16 +1,30 @@
 'use client'
 
+import { useRef } from 'react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import CameraIcon from '@/shared/assets/camera-bold.svg'
 import FaviconIcon from '@/shared/assets/favicon.svg'
-import { useMyProfile } from '@/features/me'
+import { useMyProfile, useEditProfileImage } from '@/features/me'
 import { formatDate } from '@/shared/lib/format'
 
 export function PersonalInfoSection() {
   const router = useRouter()
   const { data } = useMyProfile()
   const account = data?.account
+  const { mutate: editProfileImage, isPending } = useEditProfileImage()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  function handleCameraClick() {
+    fileInputRef.current?.click()
+  }
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+    editProfileImage(file)
+    e.target.value = ''
+  }
 
   return (
     <div className='flex h-fit w-full flex-col gap-24 rounded-16 bg-white p-32 shadow-[0px_2px_6px_0px_#0D0D0D0A]'>
@@ -37,11 +51,21 @@ export function PersonalInfoSection() {
                 </div>
               )}
             </div>
+            {/* 파일 인풋 (숨김) */}
+            <input
+              ref={fileInputRef}
+              type='file'
+              accept='image/*'
+              className='hidden'
+              onChange={handleFileChange}
+            />
             {/* 프로필 변경 버튼 */}
             <button
               type='button'
               aria-label='프로필 사진 변경'
-              className='absolute top-[6.2rem] left-[6.2rem] flex size-[2.8rem] cursor-pointer items-center justify-center rounded-full border border-[#E6E6E6] bg-background-gray-default'>
+              disabled={isPending}
+              onClick={handleCameraClick}
+              className='absolute top-[6.2rem] left-[6.2rem] flex size-[2.8rem] cursor-pointer items-center justify-center rounded-full border border-[#E6E6E6] bg-background-gray-default disabled:cursor-not-allowed disabled:opacity-50'>
               <CameraIcon className='size-[2rem]' />
             </button>
           </div>