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

Author: eric-hjh

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

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

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

@@ -1,30 +1,23 @@
-import {useState} from 'react';
+import {useState, useRef} from 'react';
+import type {ChangeEvent} from 'react';
 import {AddItemCard, ImageCardWithDelete} from '@/features/image-handle';
-import {useImageUpload} from '@/features/image-handle/api/useImageUpload';
+import {uploadImage} from '@/features/image-handle/api/imageUpload';
 import {Button, Label, Typography} from '@wraffle/ui';
 
 export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
   const [images, setImages] = useState<string[]>([]);
-  const {getImagePresignedUrl, uploadImageToS3} = useImageUpload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const handleImageUpload = async (e: Event) => {
-    const input = e.target as HTMLInputElement;
-    const files = input.files;
+  const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
 
-    if (!files) return;
+    if (!file) 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));
+      const uploadedImageUrl = await uploadImage(file);
+      setImages(prev => [...prev, uploadedImageUrl].slice(0, 4));
     } catch (error) {
-      console.error('이미지 업로드 실패:', error);
+      console.error('이미지 업로드 중 오류가 발생했습니다:', error);
     }
   };
 
@@ -52,6 +45,14 @@ export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
         </Label>
       </div>
 
+      <input
+        type='file'
+        ref={fileInputRef}
+        className='hidden'
+        accept='image/*'
+        onChange={handleImageUpload}
+      />
+
       <div className='flex flex-wrap gap-4'>
         {images.map((url, index) => (
           <ImageCardWithDelete
@@ -64,15 +65,7 @@ export const ImageStep = ({onNext}: {onNext: (images: string[]) => void}) => {
         {images.length < 4 && (
           <AddItemCard
             label='이미지 추가'
-            onClick={() => {
-              // 웹뷰 연결 후 input 파일 변경
-              const input = document.createElement('input');
-              input.type = 'file';
-              input.accept = 'image/*';
-              input.multiple = false;
-              input.onchange = handleImageUpload;
-              input.click();
-            }}
+            onClick={() => fileInputRef.current?.click()}
             className='h-40 w-40'
           />
         )}

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

@@ -1,10 +1,11 @@
+import {useState, useRef} from 'react';
 import type {UseFormSetValue} from 'react-hook-form';
 import type {CreateEventPayload, Product} from '@/entities/product/model';
+import {uploadImage} from '@/features/image-handle/api/imageUpload';
+import {AddItemCard} from '@/features/image-handle/ui/AddItemCard';
+import {ImageCardWithDelete} from '@/features/image-handle/ui/ImageCardWithDelete';
 import {Button, Typography} from '@wraffle/ui';
 
-// TODO
-// image api 연동
-// 이미지 추가 부분은 api연동하며 구현하겠습니다
 export const ProductImageStep = ({
   products,
   title,
@@ -16,7 +17,26 @@ export const ProductImageStep = ({
   setValue: UseFormSetValue<CreateEventPayload>;
   onReturn: () => void;
 }) => {
-  const imageUrl = '';
+  const [imageUrl, setImageUrl] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const uploadedImageUrl = await uploadImage(file);
+      setImageUrl(uploadedImageUrl);
+    } catch (error) {
+      console.error('이미지 업로드 중 오류가 발생했습니다:', error);
+    }
+  };
+
+  const handleDeleteImage = () => {
+    setImageUrl('');
+  };
 
   return (
     <div className='flex h-full flex-col px-5 pb-20'>
@@ -35,17 +55,33 @@ export const ProductImageStep = ({
         </Typography>
       </div>
 
-      <div className='flex h-60 w-60 items-center justify-center rounded-lg border border-solid border-[#F5F5F7] bg-[#FAFAFB]'>
-        <span className='text-center text-sm font-medium text-[#ADB5BD]'>
-          이미지 추가
-        </span>
-      </div>
+      <input
+        type='file'
+        ref={fileInputRef}
+        className='hidden'
+        accept='image/*'
+        onChange={handleImageUpload}
+      />
+
+      {imageUrl ? (
+        <ImageCardWithDelete
+          url={imageUrl}
+          onClick={handleDeleteImage}
+          className='h-60 w-60'
+        />
+      ) : (
+        <AddItemCard
+          label={'이미지 추가'}
+          onClick={() => fileInputRef.current?.click()}
+          className='h-60 w-60'
+        />
+      )}
 
       <div className='fixed inset-x-0 bottom-0 bg-white px-4'>
         <Button
           type='button'
           className='mb-5 mt-3 disabled:text-[#A1A1AA]'
-          // disabled={!imageUrl}
+          disabled={!imageUrl}
           onClick={() => {
             const updatedProducts = [
               ...products,