[#190] API 응답 처리 전 중복 요청 방지 로직 구현 및 review 리팩토링

src/app/(custom)/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="bg-white flex flex-col w-full mx-auto min-h-screen">
+    <div className="flex flex-col w-full mx-auto min-h-screen py-12 bg-subCoral">
       <main className="flex-1 overflow-y-auto">{children}</main>
     </div>
   );

src/app/(primary)/_components/Header.tsx

@@ -16,7 +16,7 @@ export default function Header() {
   });
 
   return (
-    <div className="py-[1.3rem] px-5 space-y-4 bg-subCoral">
+    <div className="py-[1.3rem] px-5 space-y-4 bg-subCoral pt-12">
       <div
         className={`transition-opacity duration-500 ease-in-out flex items-center space-x-1 ${
           scrollPosition > 0 ? 'opacity-0 delay-150' : 'opacity-100'

src/app/(primary)/_components/SubHeader.tsx

@@ -51,7 +51,7 @@ interface SubHeaderMainProps {
 function SubHeaderMain({ children, bgColor }: SubHeaderMainProps) {
   return (
     <div
-      className={`${bgColor} flex justify-between items-center relative py-8 px-5`}
+      className={`${bgColor} flex justify-between items-center relative pb-8 px-5 pt-20`}
     >
       {children}
     </div>

src/app/(primary)/inquire/register/page.tsx

@@ -12,8 +12,11 @@ import { Button } from '@/components/Button';
 import { uploadImages } from '@/utils/S3Upload';
 import { FormValues } from '@/types/Inquire';
 import useModalStore from '@/store/modalStore';
+import { useCallOnce } from '@/hooks/useCallOnce';
 import Modal from '@/components/Modal';
+import { useErrorModal } from '@/hooks/useErrorModal';
 import OptionSelect from '@/components/List/OptionSelect';
+import Loading from '@/components/Loading';
 import ImagesForm from '../../review/_components/ImagesForm';
 
 const TYPE_OPTIONS = [
@@ -38,6 +41,7 @@ const TYPE_OPTIONS = [
 export default function InquireRegister() {
   const router = useRouter();
   const { state, handleModalState } = useModalStore();
+  const { isProcessing, executeApiCall } = useCallOnce();
 
   const schema = yup.object({
     content: yup
@@ -50,6 +54,12 @@ export default function InquireRegister() {
   const formMethods = useForm<FormValues>({
     mode: 'onChange',
     resolver: yupResolver(schema),
+    defaultValues: {
+      content: '',
+      type: '',
+      images: null,
+      imageUrlList: null,
+    },
   });
 
   const {
@@ -61,17 +71,27 @@ export default function InquireRegister() {
     formState: { errors },
   } = formMethods;
 
-  const onSubmit = async (
-    data: FormValues,
-    imgUrl?: { order: number; viewUrl: string }[],
-  ) => {
-    const params = {
-      content: data.content,
-      type: data.type,
-      imageUrlList: imgUrl ?? null,
-    };
+  const onSave = async (data: FormValues) => {
+    const processSubmission = async () => {
+      let uploadedImageUrls = null;
+      if (data.images?.length !== 0) {
+        const images = data?.images?.map((file) => file.image);
+        if (images) {
+          try {
+            uploadedImageUrls = await uploadImages('inquire', images);
+          } catch (error) {
+            console.error('S3 업로드 에러:', error);
+            throw error;
+          }
+        }
+      }
+
+      const params = {
+        content: data.content,
+        type: data.type,
+        imageUrlList: uploadedImageUrls ?? null,
+      };
 
-    try {
       const result = await InquireApi.registerInquire(params);
 
       if (result) {
@@ -89,49 +109,15 @@ export default function InquireRegister() {
           },
         });
       }
-    } catch (error) {
-      console.error('Failed to post report:', error);
-    }
-  };
-
-  const onUploadS3 = async (data: FormValues) => {
-    const images = data?.images?.map((file) => file.image);
-
-    if (images) {
-      try {
-        const PreSignedDBData = await uploadImages('inquire', images);
-        onSubmit(data, PreSignedDBData);
-      } catch (error) {
-        console.error('S3 업로드 에러:', error);
-      }
-    }
-  };
+    };
 
-  const onSave = (data: FormValues) => {
-    if (data.images?.length !== 0) {
-      onUploadS3(data);
-    } else {
-      onSubmit(data);
-    }
+    await executeApiCall(processSubmission);
   };
 
-  useEffect(() => {
-    reset({
-      content: '',
-      type: '',
-      images: null,
-      imageUrlList: null,
-    });
-  }, []);
+  const { showErrorModal } = useErrorModal<FormValues>(errors);
 
   useEffect(() => {
-    if (errors.content?.message || errors.type?.message) {
-      handleModalState({
-        isShowModal: true,
-        mainText: errors.content?.message || errors.type?.message,
-        type: 'ALERT',
-      });
-    }
+    showErrorModal(['content', 'type']);
   }, [errors]);
 
   return (
@@ -200,6 +186,7 @@ export default function InquireRegister() {
             <Button onClick={handleSubmit(onSave)} btnName="전송" />
           </article>
         </section>
+        {isProcessing && <Loading />}
         {state.isShowModal && <Modal />}
       </FormProvider>
     </>

src/app/(primary)/layout.tsx

@@ -11,11 +11,11 @@ export default function Layout({
   const { loginState, handleLoginModal } = useModalStore();
 
   return (
-    <main className="bg-white flex flex-col w-full mx-auto min-h-screen">
-      <section className="flex-1 overflow-y-auto">{children}</section>
+    <div className="bg-white flex flex-col w-full mx-auto min-h-screen pb-12">
+      <main className="flex-1 overflow-y-auto">{children}</main>
       {loginState.isShowLoginModal && (
         <LoginModal handleClose={handleLoginModal} />
       )}
-    </main>
+    </div>
   );
 }

src/app/(primary)/rating/page.tsx

@@ -84,7 +84,7 @@ export default function Rating() {
       <main className="mb-24 w-full h-full relative">
         <SearchContainer
           handleSearchCallback={handleSearchCallback}
-          styleProps="px-5 py-10 bg-subCoral"
+          styleProps="px-5 pt-[5.5rem] pb-10 bg-subCoral"
         />
 
         <section className="flex flex-col gap-7 p-5">

src/app/(primary)/report/_constants/index.ts

@@ -0,0 +1,78 @@
+// comment, review는 API 나오면 맞춰서 수정 예정
+export const REPORT_TYPE = {
+  review: {
+    title: '리뷰 신고',
+    options: [
+      {
+        type: 'SPAM',
+        name: '스팸 신고',
+      },
+      {
+        type: 'INAPPROPRIATE_CONTENT',
+        name: '부적절한 콘텐츠 신고',
+      },
+      {
+        type: 'FRAUD',
+        name: '사기 신고',
+      },
+      {
+        type: 'COPYRIGHT_INFRINGEMENT',
+        name: '저작권 침해 신고',
+      },
+      {
+        type: 'OTHER',
+        name: '그 외 기타 신고',
+      },
+    ],
+  },
+  comment: {
+    title: '댓글 신고',
+    options: [
+      {
+        type: 'SPAM',
+        name: '스팸 신고',
+      },
+      {
+        type: 'INAPPROPRIATE_CONTENT',
+        name: '부적절한 콘텐츠 신고',
+      },
+      {
+        type: 'FRAUD',
+        name: '사기 신고',
+      },
+      {
+        type: 'COPYRIGHT_INFRINGEMENT',
+        name: '저작권 침해 신고',
+      },
+      {
+        type: 'OTHER',
+        name: '그 외 기타 신고',
+      },
+    ],
+  },
+  user: {
+    title: '유저 신고',
+    options: [
+      {
+        type: 'SPAM',
+        name: '스팸 신고',
+      },
+      {
+        type: 'INAPPROPRIATE_CONTENT',
+        name: '부적절한 콘텐츠 신고',
+      },
+      {
+        type: 'FRAUD',
+        name: '사기 신고',
+      },
+      {
+        type: 'COPYRIGHT_INFRINGEMENT',
+        name: '저작권 침해 신고',
+      },
+      {
+        type: 'OTHER',
+        name: '그 외 기타 신고',
+      },
+    ],
+  },
+};