[YS-172] feat: 공고 등록 실패 시 토스트 알림 추가

YAPP-Github · Jan 24, 2025 · e28b387 · e28b387
1 parent 3ffd65c
commit e28b387
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/src/app/upload/components/UploadContainer/UploadContainer.tsx b/src/app/upload/components/UploadContainer/UploadContainer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import * as Toast from '@radix-ui/react-toast';
 import Link from 'next/link';
 import React, { useState } from 'react';
 import { FormProvider } from 'react-hook-form';
@@ -17,11 +18,25 @@ import ApplyMethodSection from '../ApplyMethodSection/ApplyMethodSection';
 import DescriptionSection from '../DescriptionSection/DescriptionSection';
 import OutlineSection from '../OutlineSection/OutlineSection';
 
+import {
+  toastLayout,
+  toastTitle,
+  toastViewport,
+} from '@/app/post/[post_id]/components/ParticipationGuideModal/ParticipationGuideModal.styles';
+import Icon from '@/components/Icon';
+import { colors } from '@/styles/colors';
+
 const UploadContainer = () => {
   const [addLink, setAddLink] = useState<boolean>(false);
   const [addContact, setAddContact] = useState<boolean>(false);
 
-  const { form, handleSubmit } = useUploadExperimentPost({ addLink, addContact });
+  const [openToast, setOpenToast] = useState(false);
+
+  const { form, handleSubmit } = useUploadExperimentPost({
+    addLink,
+    addContact,
+    setOpenToast,
+  });
 
   return (
     <FormProvider {...form}>
@@ -57,6 +72,17 @@ const UploadContainer = () => {
           </button>
         </div>
       </div>
+
+      {/* 공고 등록 실패 시 토스트 알림 */}
+      <Toast.Provider swipeDirection="right">
+        <Toast.Root css={toastLayout} open={openToast} onOpenChange={setOpenToast} duration={1500}>
+          <Toast.Title css={toastTitle}>
+            <Icon icon="CheckRound" color={colors.primaryMint} width={24} height={24} />
+            <p>공고 등록을 실패하였습니다.</p>
+          </Toast.Title>
+        </Toast.Root>
+        <Toast.Viewport css={toastViewport} />
+      </Toast.Provider>
     </FormProvider>
   );
 };

diff --git a/src/app/upload/hooks/useUploadExperimentPost.tsx b/src/app/upload/hooks/useUploadExperimentPost.tsx
@@ -1,20 +1,26 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
+import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { convertLabelToValue } from '../upload.utils';
 
+import useUploadExperimentPostAPI from '@/apis/hooks/useUploadExperimentPostAPI';
 import UploadExperimentPostSchema, {
   UploadExperimentPostSchemaType,
 } from '@/schema/upload/uploadExperimentPostSchema';
-import useUploadExperimentPostAPI from '@/apis/hooks/useUploadExperimentPostAPI';
 
 interface useUploadExperimentPostProps {
   addLink: boolean;
   addContact: boolean;
+  setOpenToast: Dispatch<SetStateAction<boolean>>;
 }
 
-const useUploadExperimentPost = ({ addLink, addContact }: useUploadExperimentPostProps) => {
+const useUploadExperimentPost = ({
+  addLink,
+  addContact,
+  setOpenToast,
+}: useUploadExperimentPostProps) => {
   const router = useRouter();
 
   const form = useForm<UploadExperimentPostSchemaType>({
@@ -53,7 +59,6 @@ const useUploadExperimentPost = ({ addLink, addContact }: useUploadExperimentPos
     },
   });
 
-  /* 공고 등록 API */
   const { mutateAsync: uploadExperimentPost } = useUploadExperimentPostAPI();
 
   const handleSubmit = async (data: UploadExperimentPostSchemaType) => {
@@ -62,15 +67,16 @@ const useUploadExperimentPost = ({ addLink, addContact }: useUploadExperimentPos
       area: data.area ? convertLabelToValue(data.area) : undefined,
     };
 
-    uploadExperimentPost(updatedData, {
-      onSuccess: (response) => {
-        form.reset();
-        router.push(`/post/${response.postInfo.experimentPostId}`);
-      },
-      onError: (error) => {
-        console.error('공고 등록 form 저장 중 오류 발생', error);
-      },
-    });
+    try {
+      await uploadExperimentPost(updatedData, {
+        onSuccess: (response) => {
+          form.reset();
+          router.push(`/post/${response.postInfo.experimentPostId}`);
+        },
+      });
+    } catch {
+      setOpenToast(true);
+    }
   };
 
   return {