:bug presigendUrl 사용 로직을 수정합니다.

src/api/@types/Retrospectives.ts

@@ -1,4 +1,4 @@
-import { TRetrospective, TStatus, TOrder } from './@asConst';
+import { TOrder, TRetrospective, TStatus } from './@asConst';
 
 //onlyGet
 export interface onlyGetRetrospectiveRequest {

src/components/RetroList/ContentsList.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { PatchRetrospectiveRequest } from '@/api/@types/Retrospectives';
@@ -104,7 +105,7 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
           {filteredData.map(item => (
             <S.Box key={item.id}>
               <S.ImgBox>
-                <S.Thumbnail src={item.thumbnail ? image : Thumbnail} />
+                <S.Thumbnail src={item.thumbnail ? image[item.id] : Thumbnail} />
               </S.ImgBox>
               <hr />
               <S.InfoBox>

src/components/createRetro/modal/CreateModal.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
+  Button,
   Modal,
-  ModalOverlay,
+  ModalCloseButton,
   ModalContent,
-  ModalHeader,
   ModalFooter,
-  ModalCloseButton,
-  Button,
+  ModalHeader,
+  ModalOverlay,
 } from '@chakra-ui/react';
 import axios from 'axios';
 import { Status, TRetrospective } from '@/api/@types/@asConst';
+
 import { PostRetrospectivesRequest } from '@/api/@types/Retrospectives';
 import postImageToS3 from '@/api/imageApi/postImageToS3';
 import postRetrospective from '@/api/retrospectivesApi/postRetrospective';
@@ -31,6 +32,9 @@ interface CreateModalProps {
 const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId, type }) => {
   const size = 'xl';
   const navigate = useNavigate();
+  //파일 상태 관리
+  const [image, setImage] = useState<Blob | null>(null);
+
   const [requestData, setRequestData] = useState<PostRetrospectivesRequest>({
     title: '',
     type: type,
@@ -69,12 +73,9 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
 
         const imageUrl = imageResponse.data.preSignedUrl;
 
-        const formData = new FormData();
-        formData.append('file', requestData.thumbnail); // uuid로 변환된 이미지를 formdata로
-
-        const uploadResponse = await axios.put(imageUrl, formData, {
+        const uploadResponse = await axios.put(imageUrl, image, {
           headers: {
-            'Content-Type': 'multipart/form-data',
+            'Content-Type': image?.type,
           },
         });
 
@@ -107,7 +108,10 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
         <S.CustomModalBody>
           <S.LeftColumn>
             <ImageUpload
-              onChange={(_thumbnail, imageUUID) => setRequestData({ ...requestData, thumbnail: imageUUID })}
+              onChange={(file, imageUUID) => {
+                setRequestData({ ...requestData, thumbnail: imageUUID });
+                setImage(file);
+              }}
             />
           </S.LeftColumn>
           <S.RightColumn>

src/components/createRetro/modal/ImageUpload.tsx

@@ -1,44 +1,42 @@
 import React, { ChangeEvent, useState } from 'react';
-import { Input, Box, Image, Button, Center } from '@chakra-ui/react';
+import { Box, Button, Center, Image, Input } from '@chakra-ui/react';
+
 import { v4 as uuidv4 } from 'uuid';
 
 interface ImageUploadProps {
-  onChange: (image: string, uuid: string) => void; // 이미지 파일의 URL, uuid를 외부로 전달하는 함수
+  onChange: (file: File | null, uuid: string) => void; // 파일 객체도 함께 전달
 }
 
 const ImageUpload: React.FC<ImageUploadProps> = ({ onChange }) => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
-  const [, setImageUUID] = useState<string | null>(null);
+  const [_, setImageUUID] = useState<string | null>(null); // 상태를 활용할 수 있도록 수정
 
   const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
       const reader = new FileReader();
+      const uuid = uuidv4();
+      onChange(file, uuid); // 파일 객체, 이미지 미리보기 URL, UUID를 전달
+
       reader.onloadend = () => {
         const result = reader.result as string;
-        const uuid = uuidv4(); // UUID 생성
-        setImageUUID(uuid); // 생성된 UUID 설정
-        setImagePreview(result); // 이미지 미리보기 업데이트
-        onChange(result, uuid);
-        console.log(uuid);
+
+        setImagePreview(result);
+        setImageUUID(uuid);
       };
       reader.readAsDataURL(file);
     }
   };
 
-  // 이미지 제거 함수
   const handleRemoveImage = () => {
     setImagePreview(null);
     setImageUUID(null);
-    if (onChange) {
-      onChange('', '');
-    }
+    onChange(null, ''); // 이미지 제거 시 null 및 빈 문자열 전달
   };
 
   return (
     <>
       <Box>
-        {/* 파일 선택 input */}
         <Input type="file" onChange={handleImageChange} accept="image/*" display="none" id="image-upload" />
         <Center>
           <label htmlFor="image-upload">
@@ -48,21 +46,14 @@ const ImageUpload: React.FC<ImageUploadProps> = ({ onChange }) => {
           </label>
         </Center>
 
-        {/* 이미지 미리보기 */}
-        <Center>
-          {imagePreview && (
-            <Box mt={4}>
-              <Center>
-                <Image src={imagePreview} alt="Selected Image" maxH="200px" />
-              </Center>
-              <Center mt={2}>
-                <Button variant="outline" borderColor="gray.700" size="md" width="15rem" onClick={handleRemoveImage}>
-                  이미지 제거
-                </Button>
-              </Center>
-            </Box>
-          )}
-        </Center>
+        {imagePreview && (
+          <Center mt={4}>
+            <Image src={imagePreview} alt="Selected Image" maxH="200px" />
+            <Button variant="outline" borderColor="gray.700" size="md" width="15rem" onClick={handleRemoveImage}>
+              이미지 제거
+            </Button>
+          </Center>
+        )}
       </Box>
     </>
   );