Merge pull request #159 from YAPP-Github/fix/cheer-upload-state

Author: Seojunhwan

src/app/(store)/stores/register/_components/RegisterFunnel/_components/ImagesStep/ImagesStep.tsx

@@ -38,7 +38,9 @@ export const ImagesStep = ({
 }: ImageStepProps) => {
   const { data: member } = useQuery(memberQueryOptions);
 
-  const { mutateAsync: postCheer, isPending } = usePostCheerMutation();
+  const [isPending, setIsPending] = useState(false);
+
+  const { mutateAsync: postCheer } = usePostCheerMutation();
 
   const [images, setImages] = useState<File[]>([]);
 
@@ -59,6 +61,8 @@ export const ImagesStep = ({
         fileSize: number;
       }> = [];
 
+      setIsPending(true);
+
       if (submitType === "with-images" && images.length > 0) {
         const { urls: presignedUrls } = await getPresignedUrl(
           images.map((image, index) => ({
@@ -95,6 +99,8 @@ export const ImagesStep = ({
       if (error instanceof ApiException) {
         toast.error(error.message);
       }
+    } finally {
+      setIsPending(false);
     }
   };
 

src/app/story/register/page.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { getPresignedUrl, uploadImageToS3 } from "@/app/_api/image/image.api";
@@ -23,7 +24,9 @@ import * as styles from "./page.css";
 export default function StoryRegisterPage() {
   const { file, clearUpload } = useImageUploadContext();
   const router = useRouter();
-  const { mutate: postStory, isPending } = usePostStoryMutation();
+
+  const [isPending, setIsPending] = useState(false);
+  const { mutate: postStory } = usePostStoryMutation();
 
   const handleClick = () => {
     router.back();
@@ -45,6 +48,8 @@ export default function StoryRegisterPage() {
       let imageData: ImageRequest[] = [];
 
       if (data.image) {
+        setIsPending(true);
+
         const { urls: presignedUrls } = await getPresignedUrl([
           {
             order: 0,
@@ -85,6 +90,8 @@ export default function StoryRegisterPage() {
       );
     } catch (error) {
       console.error("이미지 업로드 실패:", error);
+    } finally {
+      setIsPending(false);
     }
   };