From 681ec1bf4e4c395829d57226000dc523e714500e Mon Sep 17 00:00:00 2001
From: jungwoo3490 <jungwoo3490@naver.com>
Date: Wed, 17 Jan 2024 15:53:50 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Presigned=20URL=20PUT=20Request=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=97=90=EC=84=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FavoriteImageInput/index.tsx   | 44 +++----------------
 src/Target/page/TargetPage/index.tsx          | 44 +++++++++++++++----
 2 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/src/Target/components/FavoriteImageInput/index.tsx b/src/Target/components/FavoriteImageInput/index.tsx
index c8903f6d..917c5428 100644
--- a/src/Target/components/FavoriteImageInput/index.tsx
+++ b/src/Target/components/FavoriteImageInput/index.tsx
@@ -1,35 +1,16 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { IcCamera, ImgBook } from '../../../assets';
-import { getPresignedUrl, uploadFile } from '../../util/api';
 import * as S from './FavoriteImageInput.style';
 
 interface FavoriteImageInputProps {
-  imgFile: string;
-  uploadImage: (file: string) => void;
-  changePresignedFileName: (fileName: string) => void;
+  imgFile: File | null;
+  changeFileData: (file: File) => void;
 }
 
-function FavoriteImageInput({
-  imgFile,
-  uploadImage,
-  changePresignedFileName,
-}: FavoriteImageInputProps) {
+function FavoriteImageInput({ changeFileData }: FavoriteImageInputProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
-  const [presignedData, setPresignedData] = useState({
-    url: '',
-    fileName: '',
-  });
-
-  useEffect(() => {
-    const fetchPresignedData = async () => {
-      const { url, fileName } = await getPresignedUrl('/api/images/book');
-      setPresignedData({ url, fileName });
-      changePresignedFileName(fileName);
-    };
-
-    fetchPresignedData();
-  }, []);
+  const [imgFile, setImgFile] = useState('');
 
   const handleImageUpload = async (): Promise<void> => {
     const fileInput = imgRef.current;
@@ -41,19 +22,8 @@ function FavoriteImageInput({
       base64Reader.readAsDataURL(file);
       base64Reader.onloadend = () => {
         if (base64Reader.result !== null) {
-          uploadImage(base64Reader.result as string);
-        }
-      };
-
-      const binaryReader = new FileReader();
-      binaryReader.readAsArrayBuffer(file);
-      binaryReader.onloadend = async () => {
-        if (binaryReader.result !== null) {
-          await uploadFile(
-            presignedData.url,
-            binaryReader.result as ArrayBuffer,
-            file.type,
-          );
+          changeFileData(file);
+          setImgFile(base64Reader.result as string);
         }
       };
     }
diff --git a/src/Target/page/TargetPage/index.tsx b/src/Target/page/TargetPage/index.tsx
index 7e49baa7..a0b6ff7a 100644
--- a/src/Target/page/TargetPage/index.tsx
+++ b/src/Target/page/TargetPage/index.tsx
@@ -1,19 +1,48 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import Header from '../../../components/common/Header';
 import CompleteButton from '../../components/CompleteButton';
 import FavoriteImageInput from '../../components/FavoriteImageInput';
 import NameInput from '../../components/NameInput';
+import { getPresignedUrl, uploadFile } from '../../util/api';
 import * as S from './TargetPage.style';
 
 function TargetPage() {
-  const [imgFile, setImgFile] = useState('');
   const [presignedFileName, setPresignedFileName] = useState('');
   const [name, setName] = useState('');
+  const [fileData, setFileData] = useState<File | null>(null); // Add this line
+  const [presignedData, setPresignedData] = useState({
+    url: '',
+    fileName: '',
+  });
   const navigate = useNavigate();
 
-  const handleClickCompleteButton = () => {
+  useEffect(() => {
+    const fetchPresignedData = async () => {
+      const { url, fileName } = await getPresignedUrl('/api/images/book');
+      setPresignedData({ url, fileName });
+      setPresignedFileName(fileName);
+    };
+
+    fetchPresignedData();
+  }, []);
+
+  const handleClickCompleteButton = async () => {
+    if (fileData) {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(fileData);
+      reader.onloadend = async () => {
+        if (reader.result !== null) {
+          await uploadFile(
+            presignedData.url,
+            reader.result as ArrayBuffer,
+            fileData.type,
+          );
+        }
+      };
+    }
+
     navigate('/select-book', {
       state: { presignedFileName: presignedFileName, name: name },
     });
@@ -31,16 +60,13 @@ function TargetPage() {
           <S.FavoriteInputWrapper>
             <S.SectionTitle>최애의 사진 업로드</S.SectionTitle>
             <FavoriteImageInput
-              imgFile={imgFile}
-              uploadImage={(file) => setImgFile(file)}
-              changePresignedFileName={(filename) =>
-                setPresignedFileName(filename)
-              }
+              imgFile={fileData}
+              changeFileData={(file) => setFileData(file)}
             />
           </S.FavoriteInputWrapper>
         </S.InputSectionWrapper>
         <CompleteButton
-          isActive={imgFile !== '' && name.length !== 0}
+          isActive={fileData !== null && name.length !== 0}
           onClick={handleClickCompleteButton}
         />
       </S.TargetPageBodyWrapper>