[WRFE-70](feat): 이미지 업로드 API 연결

Author: eric-hjh

apps/front/wraffle-webview/src/features/image-handle/api/useImageUpload.ts

@@ -0,0 +1,42 @@
+import apiClient from '@/shared/api/apiClient';
+
+interface PresignedUrlResponse {
+  presignedUrls: string[];
+}
+
+interface UploadRequest {
+  fileKeys: string[];
+}
+
+export const useImageUpload = () => {
+  const getImagePresignedUrl = async (fileName: string) => {
+    const response = await apiClient.post<PresignedUrlResponse, UploadRequest>(
+      '/files/upload',
+      {body: {fileKeys: [fileName]}, withAuth: true},
+    );
+    return response.data.presignedUrls[0];
+  };
+
+  const uploadImageToS3 = async (
+    presignedUrl: string,
+    file: File,
+  ): Promise<void> => {
+    const contentType = file.type || 'image/jpeg';
+
+    await fetch(presignedUrl, {
+      method: 'PUT',
+      body: file,
+      mode: 'cors',
+      credentials: 'omit',
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=31536000',
+      },
+    });
+  };
+
+  return {
+    getImagePresignedUrl,
+    uploadImageToS3,
+  };
+};

apps/front/wraffle-webview/src/features/image-handle/ui/ImageCardWithDelete.tsx

@@ -23,12 +23,6 @@ export const ImageCardWithDelete = ({
     <button type='button' className='absolute right-2 top-2' onClick={onClick}>
       <Image src={'/icons/ic_close.svg'} alt='close' width={12} height={12} />
     </button>
-    <Image
-      alt='thumbnail'
-      width={160}
-      height={160}
-      src={url}
-      className='h-full w-full object-cover'
-    />
+    <img alt='thumbnail' src={url} className='h-full w-full object-cover' />
   </div>
 );

apps/front/wraffle-webview/src/widgets/product-list/create/ui/ImageStepList.tsx

@@ -1,11 +1,37 @@
+import {useState} from 'react';
 import {AddItemCard, ImageCardWithDelete} from '@/features/image-handle';
+import {useImageUpload} from '@/features/image-handle/api/useImageUpload';
 import {Button, Label, Typography} from '@wraffle/ui';
 
-// TODO
-// image api 연동
-// 이미지 추가 부분은 api연동하며 구현하겠습니다
 export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
-  const images: string[] = [''];
+  const [images, setImages] = useState<string[]>([]);
+  const {getImagePresignedUrl, uploadImageToS3} = useImageUpload();
+
+  const handleImageUpload = async (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const files = input.files;
+
+    if (!files) return;
+
+    try {
+      const file = files[0];
+      const fileName = encodeURIComponent(file.name);
+
+      const presignedUrl = await getImagePresignedUrl(fileName);
+
+      await uploadImageToS3(presignedUrl, file);
+
+      const fileUrl = presignedUrl;
+      setImages(prev => [...prev, fileUrl].slice(0, 4));
+    } catch (error) {
+      console.error('이미지 업로드 실패:', error);
+    }
+  };
+
+  const handleImageDelete = (index: number) => {
+    setImages(prev => prev.filter((_, i) => i !== index));
+  };
+
   return (
     <div className='flex h-full flex-col px-5 pb-20'>
       <div className='mb-5'>
@@ -27,18 +53,26 @@ export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
       </div>
 
       <div className='flex flex-wrap gap-4'>
-        {images.map(url => (
+        {images.map((url, index) => (
           <ImageCardWithDelete
             key={url}
             url={url}
-            onClick={() => {}}
+            onClick={() => handleImageDelete(index)}
             className='h-40 w-40'
           />
         ))}
         {images.length < 4 && (
           <AddItemCard
             label='이미지 추가'
-            onClick={() => {}}
+            onClick={() => {
+              // 웹뷰 연결 후 input 파일 변경
+              const input = document.createElement('input');
+              input.type = 'file';
+              input.accept = 'image/*';
+              input.multiple = false;
+              input.onchange = handleImageUpload;
+              input.click();
+            }}
             className='h-40 w-40'
           />
         )}
@@ -48,7 +82,7 @@ export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
         <Button
           type='button'
           className='mb-5 mt-3 disabled:text-[#A1A1AA]'
-          // disabled={images.length === 0} // api연동 후 풀게요
+          disabled={images.length === 0}
           onClick={() => onNext(images)}
         >
           다음