From cbcd049ef1870da0b2d115437507d9dee6bd77e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9A=B0=EC=A7=80=EC=84=9D?= <jisurk@gmail.com>
Date: Mon, 22 Jul 2024 12:10:47 +0900
Subject: [PATCH] =?UTF-8?q?FE-72=E2=9C=A8=20=20toast->=20alert-dailog?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pageLayout/Epigram/AddEpigram.tsx | 44 +++++++++++++++++++--------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
index e2c1aafb..53e38368 100644
--- a/src/pageLayout/Epigram/AddEpigram.tsx
+++ b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -8,13 +8,14 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Textarea } from '@/components/ui/textarea';
 import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
 import { AddEpigramFormSchema, AddEpigramFormType } from '@/schema/addEpigram';
-import { useToast } from '@/components/ui/use-toast';
 import useAddEpigram from '@/hooks/epigramQueryHook';
 import { useRouter } from 'next/router';
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
 
 function AddEpigram() {
   const [currentTag, setCurrentTag] = useState('');
-  const { toast } = useToast();
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [alertContent, setAlertContent] = useState({ title: '', description: '' });
   const router = useRouter();
 
   const form = useForm<AddEpigramFormType>({
@@ -28,21 +29,28 @@ function AddEpigram() {
     },
   });
 
+  const handleAlertClose = () => {
+    setIsAlertOpen(false);
+    if (alertContent.title === '등록 완료') {
+      router.push(`/epigram/${addEpigramMutation.data?.id}`);
+    }
+  };
+
   const addEpigramMutation = useAddEpigram({
-    onSuccess: (data) => {
-      toast({
-        title: '에피그램 추가 성공',
-        description: '새로운 에피그램이 성공적으로 추가되었습니다.',
+    onSuccess: () => {
+      setAlertContent({
+        title: '등록 완료',
+        description: '등록이 완료되었습니다.',
       });
+      setIsAlertOpen(true);
       form.reset();
-      router.push(`/epigram/${data.id}`);
     },
-    onError: (error) => {
-      toast({
-        title: '에피그램 추가 실패',
-        description: error.message || '에피그램 추가 중 오류가 발생했습니다. 다시 시도해 주세요.',
-        variant: 'destructive',
+    onError: () => {
+      setAlertContent({
+        title: '등록 실패',
+        description: '다시 확인해주세요.',
       });
+      setIsAlertOpen(true);
     },
   });
 
@@ -238,6 +246,18 @@ function AddEpigram() {
           </form>
         </Form>
       </div>
+
+      <AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
+        <AlertDialogContent className='bg-white'>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{alertContent.title}</AlertDialogTitle>
+            <AlertDialogDescription>{alertContent.description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={handleAlertClose}>확인</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   );
 }