Merge pull request #220 from TripInfoWeb/dev_gathering

feat: API 요청시 로딩중 표시 작업
TripInfoWeb · Aug 22, 2024 · 1fce7c8 · 1fce7c8
2 parents a9799f6 + bf4fc1f
commit 1fce7c8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/src/components/gathering/editor/GatheringEditor.tsx b/src/components/gathering/editor/GatheringEditor.tsx
@@ -16,11 +16,13 @@ import GatheringEditorTimeContainer from "./GatheringEditorTimeContainer";
 interface IGatheringEditorEditProps {
   isEdit: true;
   updateGatheringHandler: () => void;
+  loading: boolean;
 }
 
 interface IGatheringEditorCreateProps {
   isEdit?: false;
   createGatheringHandler: () => void;
+  loading: boolean;
 }
 
 // `isEdit` 값에 관계없이 적용 가능한 타입
@@ -86,7 +88,20 @@ const GatheringEditor = (props: IGatheringEditorProps) => {
                 : props.createGatheringHandler();
             }}
           >
-            {props.isEdit ? "모임 수정하기" : "모임 등록하기"}
+            {props.loading ? (
+              <div className="flex flex-row items-center gap-3">
+                <Image
+                  className="animate-spin"
+                  src="/loading-icon.png"
+                  alt="loading-icon"
+                  width={20}
+                  height={20}
+                />
+                {props.isEdit ? "수정 중..." : "등록 중..."}
+              </div>
+            ) : (
+              <p>{props.isEdit ? "모임 수정하기" : "모임 등록하기"}</p>
+            )}
           </button>
         </div>
       </section>

diff --git a/src/containers/gathering/edit/GatheringEditContainer.tsx b/src/containers/gathering/edit/GatheringEditContainer.tsx
@@ -8,7 +8,7 @@ import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 interface IGatheringEditContainer {
@@ -17,6 +17,7 @@ interface IGatheringEditContainer {
 
 const GatheringEditContainer = ({gatheringData}: IGatheringEditContainer) => {
   const router = useRouter();
+  const [loading, setLoading] = useState<boolean>(false);
   const methods = useForm({
     resolver: zodResolver(gatheringCreateFormSchema),
     defaultValues: {
@@ -60,6 +61,7 @@ const GatheringEditContainer = ({gatheringData}: IGatheringEditContainer) => {
       ...requestData
     } = methods.getValues();
     try {
+            setLoading(true);
       const response = await fetchWithAuth(`/api/gathering/${id}`, {
         method: "PUT",
         headers: {
@@ -89,8 +91,9 @@ const GatheringEditContainer = ({gatheringData}: IGatheringEditContainer) => {
               : [],
         }),
       });
-// TODO 에러 처리 작업 필요함
-      if (response.status != 201) {
+
+      if (!response.ok) {
+        setLoading(false);
         throw new Error("Network response was not ok");
       }
 
@@ -112,6 +115,7 @@ const GatheringEditContainer = ({gatheringData}: IGatheringEditContainer) => {
       <GatheringEditor
         updateGatheringHandler={updateGatheringHandler}
         isEdit={true}
+        loading={loading}
       />
     </FormProvider>
   );

diff --git a/src/containers/gathering/write/GatheringWriteContainer.tsx b/src/containers/gathering/write/GatheringWriteContainer.tsx
@@ -6,10 +6,12 @@ import { convertRegionToTwoLetters } from "@/utils/constant/regionHashMap";
 import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 const GatheringWriteContainer = () => {
   const router = useRouter();
+  const [loading, setLoading] = useState<boolean>(false);
   const methods = useForm({
     resolver: zodResolver(gatheringCreateFormSchema),
     defaultValues: {
@@ -47,6 +49,7 @@ const GatheringWriteContainer = () => {
       ...requestData
     } = methods.getValues();
     try {
+      setLoading(true);
       const response = await fetchWithAuth("/api/gathering/write", {
         method: "POST",
         headers: {
@@ -72,6 +75,7 @@ const GatheringWriteContainer = () => {
       });
 // TODO 에러 처리 작업 필요함
       if (!response.ok) {
+        setLoading(false);
         throw new Error("Network response was not ok");
       }
 
@@ -86,6 +90,7 @@ const GatheringWriteContainer = () => {
     <FormProvider {...methods}>
       <GatheringEditor
         createGatheringHandler={createGatheringHandler}
+        loading={loading}
       />
     </FormProvider>
   );