[함헌규] sprint12

next.config.mjs

@@ -11,9 +11,9 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+        hostname: 'd3bte49znzcuux.cloudfront.net',
         port: '',
-        pathname: '/Sprint_Mission/**',
+        pathname: '/uploads/**',
       },
       // 임시적으로 모든 이미지 출처 허용
       {

src/components/common/imageInputSection/imageInputBox.tsx

@@ -2,8 +2,10 @@ import IcPlus from '@/public/icons/ic_plus.svg';
 
 export default function ImageInputBox({
   onChange,
+  inputRef,
 }: {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
 }) {
   return (
     <label className='relative w-[168px] md:w-[168px] xl:w-[282px] aspect-square bg-bg-input flex items-center justify-center rounded-[12px] cursor-pointer'>
@@ -15,6 +17,7 @@ export default function ImageInputBox({
         type='file'
         accept='image/*'
         onChange={onChange}
+        ref={inputRef}
         className='hidden'
       />
     </label>

src/components/common/imageInputSection/imageInputSection.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { ImageUploadInputProps } from './types';
 import ImageInputBox from './imageInputBox';
 import ImageCard from './imageCard';
@@ -8,6 +8,7 @@ export function ImageUploadInput({
   onFileChange,
 }: ImageUploadInputProps) {
   const [previewUrl, setPreviewUrl] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -28,13 +29,19 @@ export function ImageUploadInput({
     }
     setPreviewUrl('');
     onFileChange(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
   };
 
   return (
     <div className='input-section'>
       <h2 className='input-label'>{label}</h2>
       <div className='flex gap-[10px] md:gap-[10px] xl:gap-6'>
-        <ImageInputBox onChange={handleFileChange} />
+        <ImageInputBox
+          onChange={handleFileChange}
+          inputRef={fileInputRef}
+        />
         {previewUrl.length > 0 && (
           <ImageCard
             imgSrc={previewUrl}

src/components/items/registration/registrationForm.tsx

@@ -14,8 +14,7 @@ import {
 } from './types';
 import { ImageUploadInput } from '@/components/common/imageInputSection/imageInputSection';
 import { useState } from 'react';
-import { useMutation } from '@tanstack/react-query';
-import { uploadImage } from '@/services/api/image';
+import { useUploadUrl } from '@/hooks/image/useUploadUrl';
 
 export default function ProductRegistrationForm({
   initialValue,
@@ -50,34 +49,41 @@ export default function ProductRegistrationForm({
 
   const [imageFile, setImageFile] = useState<File | null>(null);
 
-  const { mutateAsync } = useMutation({ mutationFn: uploadImage });
-
   const name = watch('name');
   const description = watch('description');
   const price = watch('price');
 
+  const { mutate: uploadMutation, imageUrl } = useUploadUrl(imageFile?.name);
+
   const buttonActive =
-    name && description && !Number.isNaN(price) && tags.length > 0 && isValid;
+    name &&
+    description &&
+    !Number.isNaN(price) &&
+    tags.length > 0 &&
+    isValid &&
+    imageFile;
 
   const onSubmit = async (data: CreateProductRequest) => {
-    const imageURLS = [];
     if (imageFile) {
-      const imageURL = await mutateAsync(imageFile);
-      imageURLS.push(...imageURL);
-    }
-    if (initialValue) {
-      const changedFields: Partial<CreateProductRequest> = {};
-      if (data.name !== initialValue.name) changedFields.name = data.name;
-      if (data.description !== initialValue.description)
-        changedFields.description = data.description;
-      if (data.price !== initialValue.price) changedFields.price = data.price;
-      if (Object.keys(changedFields).length > 0)
-        return (mutation as EditMutation).mutate(changedFields);
+      uploadMutation.mutate(imageFile, {
+        onSuccess: () => {
+          if (initialValue) {
+            const changedFields: Partial<CreateProductRequest> = {};
+            if (data.name !== initialValue.name) changedFields.name = data.name;
+            if (data.description !== initialValue.description)
+              changedFields.description = data.description;
+            if (data.price !== initialValue.price)
+              changedFields.price = data.price;
+            if (Object.keys(changedFields).length > 0)
+              return (mutation as EditMutation).mutate(changedFields);
+          }
+          return (mutation as CreateMutation).mutate({
+            ...data,
+            images: [`https://${imageUrl}`],
+          });
+        },
+      });
     }
-    return (mutation as CreateMutation).mutate({
-      ...data,
-      images: imageURLS,
-    });
   };
 
   return (

src/hooks/image/useUploadUrl.ts

@@ -0,0 +1,22 @@
+import { getUploadUrl, uploadImageOnS3 } from '@/services/api/image';
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+export const useUploadUrl = (filename: string | undefined) => {
+  const { data: urls } = useQuery({
+    queryKey: ['uploadUrl', filename],
+    queryFn: async () => {
+      if (filename) return await getUploadUrl(filename);
+    },
+    enabled: !!filename,
+  });
+  return {
+    mutate: useMutation({
+      mutationFn: async (file: File) => {
+        if (file && urls)
+          return await uploadImageOnS3({ file, url: urls?.uploadUrl });
+        throw new Error('파일 또는 업로드 url이 없습니다.');
+      },
+    }),
+    imageUrl: urls?.imageUrl,
+  };
+};

src/lib/axios/axiosInstance.ts

@@ -12,6 +12,10 @@ axiosInstance.interceptors.response.use(
   (response) => response,
   async (error) => {
     const originalRequest = error.config;
+
+    if (originalRequest.url === 'auth/refresh-token') {
+      return;
+    }
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
 

src/services/api/image.ts

@@ -1,16 +1,30 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
 
-export const uploadImage = async (file: File): Promise<string[]> => {
+export const getUploadUrl = async (filename: string) => {
   try {
-    const formData = new FormData();
-    formData.append('image', file);
+    const { data } = await axiosInstance.get('/upload/url', {
+      params: { filename },
+    });
+    return data;
+  } catch (e) {
+    console.error('업로드 url 생성 실패', e);
+    throw e;
+  }
+};
 
-    const { data } = await axiosInstance.post('/upload/image', formData, {
+export const uploadImageOnS3 = async ({
+  file,
+  url,
+}: {
+  file: File;
+  url: string;
+}) => {
+  try {
+    await axiosInstance.put(url, file, {
       headers: {
-        'Content-Type': 'multipart/form-data',
+        'Content-Type': file.type,
       },
     });
-    return data.imageUrls;
   } catch (e) {
     console.error('이미지 업로드 실패', e);
     throw e;