feat:

- toast.tsx 추가
- 침입수 분석, RDII 분석 버튼 실행 시 시간 소요 안내 toast 기능 구현

apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx

@@ -2,8 +2,10 @@
 import { DateMonthPicker, Form, SelectBox } from '@common/business_components/ui'
 import ListDiv from '@common/business_components/ui/list_div'
 import { Button, Label } from '@common/components/ui'
-import { useState, type ReactNode } from 'react'
+import { useEffect, type ReactNode } from 'react'
 import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox'
+import { confirmToast } from '@/components/ui/toast'
+import { toast, Toaster } from "react-hot-toast";
 
 type TitleName = {
   mainTitle: string
@@ -85,6 +87,14 @@ const BaseLayout = ({
   onAnalysis,
 }: BaseLayout) => {
 
+  // 컴포넌트 언마운트 시 confirmToast 정리
+  useEffect(() => {
+    return () => {
+      // 컴포넌트가 언마운트될 때 global-confirm-toast ID를 가진 Toast 제거
+      toast.dismiss("global-confirm-toast");
+    };
+  }, []);
+
   // 파일 다운로드
   const isChckFile = () => {
     // Excel 다운로드 함수가 있으면 Excel 다운로드 실행
@@ -103,7 +113,19 @@ const BaseLayout = ({
     }
   }
 
+  const handleConfirm = () => {
+    // 기존 confirmToast가 있다면 먼저 제거
+    toast.dismiss("global-confirm-toast");
+
+    confirmToast(
+      "분석에는 2분 내외의 시간이 소요될 수 있습니다.\n분석을 진행하시겠습니까?",
+      onAnalysis ?? (() => { }),
+      "text-xl font-medium text-gray-800"
+    );
+  };
+
   return (
+    <>
       <Form {...form} className="min-h-screen flex flex-col">
         <ListDiv>
           {/* searchBox.title이 있으면 h3 태그로 제목을 표시합니다. */}
@@ -184,7 +206,7 @@ const BaseLayout = ({
               )}
               {/* 분석 버튼 */}
               {analysisBtn && (
-              <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={onAnalysis}>{analysisBtn}</Button>
+                <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={handleConfirm}>{analysisBtn}</Button>
               )}
             </div>
           </div>
@@ -215,6 +237,8 @@ const BaseLayout = ({
           </ListDiv>
         )}
       </Form>
+      <Toaster position="top-center"></Toaster>
+    </>
   )
 }
 

apps/sn/app/components/ui/toast.tsx

@@ -0,0 +1,55 @@
+import { Button } from "@common/components/ui";
+import toast from "react-hot-toast";
+
+export const confirmToast = (content: string, saveFunc: () => void, contentClass?:string) => {
+  toast(
+    (t) => (
+      <span className="flex flex-col items-center">
+        <div className={`mb-6 ${contentClass}`} >{content}</div>
+        <div className="flex flex-row space-x-2">
+          <Button
+            size={"sm"}
+            onClick={() => {
+              saveFunc();
+              toast.dismiss(t.id);
+            }}
+          >
+            확인
+          </Button>
+          <Button size={"sm"} onClick={() => toast.dismiss(t.id)}>
+            취소
+          </Button>
+        </div>
+      </span>
+    ),
+    {
+      id: "global-confirm-toast", // 중복 토스트 방지
+      duration: Infinity, // 자동 사라짐 방지
+    }
+  );
+};
+
+export const showConfirmToast = (message: string) => {
+  toast.custom(
+    (t) => (
+      <div
+        className={`w-[500px] min-h-[140px] bg-white shadow-lg rounded-xl p-6 border border-gray-200
+      ${t.visible ? "animate-enter" : "animate-leave"}`}
+      >
+        <div className="text-3xl font-extrabold text-red-600 bg-yellow-100 px-4 py-2 rounded-md shadow-md">
+          {message}
+        </div>{" "}
+        <div className="flex justify-end gap-2">
+          <Button
+            size={"sm"}
+            className="px-4 py-1.5 rounded bg-gray-200 text-sm hover:bg-gray-300"
+            onClick={() => toast.dismiss(t.id)}
+          >
+            확인완료
+          </Button>
+        </div>
+      </div>
+    ),
+    { duration: Infinity }
+  ); // 수동 닫기
+};