Merge pull request #161 from Team-Lecue/feature/TargetPage

[ TargetPage ] dev 머지 PR입니다!

src/Target/components/FavoriteImageInput/index.tsx

@@ -4,7 +4,6 @@ import { IcCamera, ImgBook } from '../../../assets';
 import * as S from './FavoriteImageInput.style';
 
 interface FavoriteImageInputProps {
-  imgFile: File | null;
   changeFileData: (file: File) => void;
 }
 

src/Target/hooks/useGetPresignedUrl.ts

@@ -0,0 +1,14 @@
+import { useQuery } from 'react-query';
+
+import { getPresignedUrl } from '../util/api';
+
+const useGetPresignedUrl = () => {
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['get-presigned-url'],
+    queryFn: () => getPresignedUrl(),
+  });
+
+  return { isLoading, error, data };
+};
+
+export default useGetPresignedUrl;

src/Target/hooks/usePutPresignedUrl.ts

@@ -0,0 +1,22 @@
+import { AxiosError } from 'axios';
+import { useMutation } from 'react-query';
+
+import { putPresignedUrl } from '../util/api';
+
+interface usePutPresignedUrlProps {
+  url: string;
+  data: ArrayBuffer;
+  contentType: string;
+}
+
+const usePutPresignedUrl = () => {
+  const mutation = useMutation({
+    mutationFn: ({ url, data, contentType }: usePutPresignedUrlProps) => {
+      return putPresignedUrl(url, data, contentType);
+    },
+    onError: (err: AxiosError) => console.log(err),
+  });
+  return mutation;
+};
+
+export default usePutPresignedUrl;

src/Target/page/TargetPage/index.tsx

@@ -5,40 +5,43 @@ 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 useGetPresignedUrl from '../../hooks/useGetPresignedUrl';
+import usePutPresignedUrl from '../../hooks/usePutPresignedUrl';
 import * as S from './TargetPage.style';
 
 function TargetPage() {
   const [presignedFileName, setPresignedFileName] = useState('');
   const [name, setName] = useState('');
-  const [fileData, setFileData] = useState<File | null>(null); // Add this line
+  const [fileData, setFileData] = useState<File | null>(null);
   const [presignedData, setPresignedData] = useState({
     url: '',
     fileName: '',
   });
+
   const navigate = useNavigate();
 
+  const { data } = useGetPresignedUrl();
+  const putMutation = usePutPresignedUrl();
+
   useEffect(() => {
-    const fetchPresignedData = async () => {
-      const { url, fileName } = await getPresignedUrl('/api/images/book');
+    if (data) {
+      const { url, fileName } = data;
       setPresignedData({ url, fileName });
       setPresignedFileName(fileName);
-    };
-
-    fetchPresignedData();
-  }, []);
+    }
+  }, [data]);
 
   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,
-          );
+          putMutation.mutate({
+            url: presignedData.url,
+            data: reader.result as ArrayBuffer,
+            contentType: fileData.type,
+          });
         }
       };
     }
@@ -59,10 +62,7 @@ function TargetPage() {
           </S.NameInputWrapper>
           <S.FavoriteInputWrapper>
             <S.SectionTitle>최애의 사진 업로드</S.SectionTitle>
-            <FavoriteImageInput
-              imgFile={fileData}
-              changeFileData={(file) => setFileData(file)}
-            />
+            <FavoriteImageInput changeFileData={(file) => setFileData(file)} />
           </S.FavoriteInputWrapper>
         </S.InputSectionWrapper>
         <CompleteButton

src/Target/util/api.ts

@@ -9,17 +9,19 @@ interface PresignedUrlResponse {
   };
 }
 
-const getPresignedUrl = async (
-  endpoint: string,
-): Promise<{ url: string; fileName: string }> => {
-  const response: AxiosResponse<PresignedUrlResponse> = await api.get(endpoint);
+const getPresignedUrl = async (): Promise<{
+  url: string;
+  fileName: string;
+}> => {
+  const response: AxiosResponse<PresignedUrlResponse> =
+    await api.get('/api/images/book');
   return {
     url: response.data.data.url,
     fileName: response.data.data.fileName,
   };
 };
 
-const uploadFile = async (
+const putPresignedUrl = async (
   url: string,
   data: ArrayBuffer,
   contentType: string,
@@ -31,4 +33,4 @@ const uploadFile = async (
   });
 };
 
-export { getPresignedUrl, uploadFile };
+export { getPresignedUrl, putPresignedUrl };