Merge pull request #66 from JECT-Study/65-bug

bug: 회원가입 프로필 이미지 업로드 확정 처리

Author: YeongJae0114

src/app/auth/signup/profile/page.tsx

@@ -16,9 +16,12 @@ import { useAuthSignupStore } from "@/stores/authSignupStore";
 
 export default function ProfilePage() {
   const router = useRouter();
-  const { nickname, bio, setNickname, setBio, setProfileImage } = useAuthSignupStore();
+  const { nickname, bio, profileImage, setNickname, setBio, setProfileImage } =
+    useAuthSignupStore();
 
-  const [errors, setErrors] = useState<{ nickname?: string; bio?: string }>({});
+  const [errors, setErrors] = useState<{ nickname?: string; bio?: string; profileImage?: string }>(
+    {}
+  );
   const nicknameCheckMutation = useMutation({
     mutationFn: checkNickname,
     onSuccess: (data, checkedNickname) => {
@@ -86,6 +89,10 @@ export default function ProfilePage() {
     }
   };
 
+  const handleProfileImageErrorChange = (message: string | null) => {
+    setErrors(prev => ({ ...prev, profileImage: message ?? undefined }));
+  };
+
   return (
     <AuthLayout
       title="프로필 설정하기"
@@ -95,7 +102,12 @@ export default function ProfilePage() {
       onBack={handleBack}
     >
       <div className="space-y-3">
-        <ProfileAvatarInput onImageChange={setProfileImage} />
+        <ProfileAvatarInput
+          file={profileImage}
+          error={errors.profileImage}
+          onImageChange={setProfileImage}
+          onErrorChange={handleProfileImageErrorChange}
+        />
 
         <AuthTextField
           label="닉네임 (최대 10자)"

src/app/auth/signup/role/page.tsx

@@ -9,7 +9,7 @@ import AuthButton from "@/components/auth/AuthButton";
 import AuthLayout from "@/components/auth/AuthLayout";
 import RoleSelect from "@/components/auth/RoleSelect";
 import { ApiError } from "@/services/apiClient";
-import { issueImageUploadUrl, uploadImageToStorage } from "@/services/imageApi";
+import { confirmImageUpload, issueImageUploadUrl, uploadImageToStorage } from "@/services/imageApi";
 import { completeWelcome } from "@/services/userApi";
 import { useAuthSignupStore } from "@/stores/authSignupStore";
 
@@ -38,6 +38,8 @@ export default function RolePage() {
           throw new Error("프로필 이미지 업로드 중 오류가 발생했습니다.");
         }
 
+        await confirmImageUpload(uploadInfo.imageId);
+
         profileImageId = uploadInfo.imageId;
       }
 

src/app/mypage/settings/profile/page.tsx

@@ -13,7 +13,7 @@ import { PROFILE_VALIDATION_MESSAGES } from "@/constants/profile";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 import { ApiError } from "@/services/apiClient";
 import { getMe } from "@/services/authApi";
-import { issueImageUploadUrl, uploadImageToStorage } from "@/services/imageApi";
+import { confirmImageUpload, issueImageUploadUrl, uploadImageToStorage } from "@/services/imageApi";
 import {
   checkNickname,
   getNicknamePolicy,
@@ -128,7 +128,9 @@ export default function MyPageProfileSettingsPage() {
           throw new Error("프로필 이미지 업로드 중 오류가 발생했습니다.");
         }
 
-        profileBody.profileImageUrl = uploadInfo.imageUrl;
+        const confirmedImage = await confirmImageUpload(uploadInfo.imageId);
+
+        profileBody.profileImageUrl = confirmedImage.imageUrl;
       }
 
       return updateProfile(profileBody);

src/components/auth/ProfileAvatarInput.tsx

@@ -1,25 +1,79 @@
-import React, { useState } from "react";
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
 
 import Image from "next/image";
 
+const ALLOWED_PROFILE_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp"]);
+const MAX_PROFILE_IMAGE_SIZE = 10 * 1024 * 1024;
+
 interface ProfileAvatarInputProps {
+  file?: File | null;
+  error?: string;
   onImageChange?: (file: File | null) => void;
+  onErrorChange?: (message: string | null) => void;
+}
+
+function validateProfileImage(file: File) {
+  if (!ALLOWED_PROFILE_IMAGE_TYPES.has(file.type)) {
+    return "프로필 이미지는 JPG, PNG, WEBP 형식만 업로드할 수 있습니다.";
+  }
+
+  if (file.size > MAX_PROFILE_IMAGE_SIZE) {
+    return "프로필 이미지는 10MB 이하만 업로드할 수 있습니다.";
+  }
+
+  return null;
 }
 
-export default function ProfileAvatarInput({ onImageChange }: ProfileAvatarInputProps) {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
+export default function ProfileAvatarInput({
+  file = null,
+  error,
+  onImageChange,
+  onErrorChange,
+}: ProfileAvatarInputProps) {
+  const [imageUrl, setImageUrl] = useState<string | null>(() =>
+    file ? URL.createObjectURL(file) : null
+  );
+  const imageUrlRef = useRef(imageUrl);
+
+  const replaceImageUrl = (nextImageUrl: string | null) => {
+    if (imageUrlRef.current) {
+      URL.revokeObjectURL(imageUrlRef.current);
+    }
+
+    imageUrlRef.current = nextImageUrl;
+    setImageUrl(nextImageUrl);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (imageUrlRef.current) {
+        URL.revokeObjectURL(imageUrlRef.current);
+      }
+    };
+  }, []);
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file) {
-      const url = URL.createObjectURL(file);
-      setImageUrl(url);
-      onImageChange?.(file);
+    e.target.value = "";
+
+    if (!file) return;
+
+    const validationMessage = validateProfileImage(file);
+    if (validationMessage) {
+      replaceImageUrl(null);
+      onImageChange?.(null);
+      onErrorChange?.(validationMessage);
+      return;
     }
+
+    replaceImageUrl(URL.createObjectURL(file));
+    onErrorChange?.(null);
+    onImageChange?.(file);
   };
 
   const handleRemove = () => {
-    setImageUrl(null);
+    replaceImageUrl(null);
+    onErrorChange?.(null);
     onImageChange?.(null);
   };
 
@@ -42,7 +96,12 @@ export default function ProfileAvatarInput({ onImageChange }: ProfileAvatarInput
         </div>
 
         <label className="absolute inset-0 cursor-pointer" aria-label="프로필 이미지 변경">
-          <input type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
+          <input
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            onChange={handleFileChange}
+            className="hidden"
+          />
         </label>
       </div>
 
@@ -55,6 +114,12 @@ export default function ProfileAvatarInput({ onImageChange }: ProfileAvatarInput
           이미지 제거
         </button>
       )}
+
+      {error && (
+        <p className="text-caption font-regular text-error-default text-center" role="alert">
+          {error}
+        </p>
+      )}
     </div>
   );
 }

src/services/imageApi.ts

@@ -14,6 +14,14 @@ export interface ImageUploadUrlResponse {
   expiresInSeconds: number;
 }
 
+export interface ImageConfirmResponse {
+  imageId: number;
+  status: "UPLOADED";
+  fileKey: string;
+  imageUrl: string;
+  uploadedAt: string;
+}
+
 export const issueImageUploadUrl = (body: ImageUploadUrlRequest) =>
   apiClient.post<ImageUploadUrlResponse>("/api/v1/images/upload-url", body);
 
@@ -25,3 +33,6 @@ export const uploadImageToStorage = (uploadUrl: string, file: File) =>
     },
     body: file,
   });
+
+export const confirmImageUpload = (imageId: number) =>
+  apiClient.post<ImageConfirmResponse>(`/api/v1/images/${imageId}/confirm`);