Merge pull request #110 from Qfeed-Dev/staging

fix: presigned URL 비동기처리 수정

src/app/(padding)/add-question/page.tsx

@@ -16,7 +16,7 @@ import { Route } from "src/constants/Route";
 import usePersonalQMutation from "src/hooks/questions/usePersonalQMutation";
 import NavigationTopBack from "src/components/navigations/NavigationTopBack";
 import Photo from "src/components/common/Photo";
-import usePhotoMutation from "src/hooks/file/usePhotoMutation";
+import usePhotoMutation from "src/hooks/file/useCreateURLMutation";
 import ButtonFillXSmall from "src/components/buttons/button-fill-xsmall";
 import { validArray } from "src/hooks/common/useCheckValidation";
 import InputFill from "src/components/inputs/input-fill-search";

src/components/Profile/Profile.tsx

@@ -3,8 +3,8 @@ import { useState, ChangeEvent, useEffect } from "react";
 
 import { colors } from "styles/theme";
 
-import { useUserMutation } from "src/hooks/account/useUserMutation";
-import usePhotoMutation from "src/hooks/file/usePhotoMutation";
+import useCreateURLMutation from "src/hooks/file/useCreateURLMutation";
+import useURLMutation from "src/hooks/file/usePutPreURLMutation";
 import { useUserQuery } from "src/hooks/account/useUserQuery";
 
 interface ProfileProp {
@@ -13,9 +13,9 @@ interface ProfileProp {
 }
 
 const Profile = ({ width, onClick }: ProfileProp) => {
-    const { userMutation } = useUserMutation();
     const user = useUserQuery();
-    const photo = usePhotoMutation();
+    const url = useCreateURLMutation();
+    const validUrl = useURLMutation();
 
     const handleImageChange = async (e: ChangeEvent<HTMLInputElement>) => {
         if (e.target.files) {
@@ -25,18 +25,12 @@ const Profile = ({ width, onClick }: ProfileProp) => {
     };
 
     const imgUpload = async (file: File) => {
-        const url = await photo.mutateAsync({
+        const urls = await url.mutateAsync({
             appName: "account",
             file: file
         });
 
-        setTimeout(
-            () =>
-                userMutation.mutate({
-                    profileImage: url.imageUrl
-                }),
-            500
-        );
+        validUrl.mutate({ url: urls, file: file });
     };
 
     return (

src/hooks/file/usePhotoMutation.ts → src/hooks/file/useCreateURLMutation.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import fileAPI from "src/apis/file";
 import { photoKeys } from "src/constants/queryKeys/fileKeys";
 
-const usePhotoMutation = () => {
+const useCreateURLMutation = () => {
     const queryClient = useQueryClient();
 
     const { mutateAsync } = useMutation(
@@ -13,14 +13,11 @@ const usePhotoMutation = () => {
                 fileType: photo.file.type
             }),
         {
-            onSuccess: (data, photo) => {
-                fileAPI.putPresignedURL(data.presignedUrl, photo.file);
-                queryClient.invalidateQueries(photoKeys.all);
-            },
+            onSuccess: (data, photo) => {},
             onError: () => {}
         }
     );
     return { mutateAsync };
 };
 
-export default usePhotoMutation;
+export default useCreateURLMutation;

src/hooks/file/usePutPreURLMutation.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUserMutation } from "../account/useUserMutation";
+import fileAPI from "src/apis/file";
+import { photoKeys } from "src/constants/queryKeys/fileKeys";
+
+const usePutPreURLMutation = () => {
+    const queryClient = useQueryClient();
+    const { userMutation } = useUserMutation();
+
+    const { mutate } = useMutation(
+        (url: {
+            url: { presignedUrl: string; imageUrl: string };
+            file: File;
+        }) => fileAPI.putPresignedURL(url.url.presignedUrl, url.file),
+        {
+            onSuccess: (data, url) => {
+                userMutation.mutate({
+                    profileImage: url.url.imageUrl
+                });
+            },
+            onError: () => {}
+        }
+    );
+    return { mutate };
+};
+
+export default usePutPreURLMutation;