Merge branch 'iipbs/sn/ii' into iipbs/sn/dev

2025-08-06 17:01:59 +09:00
parent 14ba55b4f9 4c256d69a3
commit c8962fae76
2 changed files with 182 additions and 103 deletions
@@ -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,118 +113,132 @@ 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 태그로 제목을 표시합니다. */}
-        {selectBox?.title && (
-          <div className="card-header">
-            <h3 className="text-2xl font-medium">{selectBox.title}</h3>
-          </div>
-        )}
-        <div className="ml-2 mt-2 flex items-center w-full">
-          {showDatePicker && ( // showDatePicker 값에 따라 DatePicker 렌더링
-            <>
-              <Label className="mr-4 w-20 text-xl font-medium text-gray-600 whitespace-nowrap">상수사용기간</Label>
-              <DateMonthPicker
-                field={{
-                  value: aplcnYmFrom || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정
-                    const now = new Date();
-                    const year = now.getFullYear();
-                    // const month = String(now.getMonth() + 1).padStart(2, '0');
-                    // return `${year}${month}`;
-                    return `${year}01`;
-                  })(), // yyyyMM 형식
-                  onChange: (value: string) => {
-                    setAplcnYmFrom?.(value); // string 값을 직접 전달
-                  }
-                }}
-                selectClass="ml-8 w-[100px]"
-                startYear={1900}  // 시작 연도 설정
-              />
-              <span className="font-semibold text-xl mx-4">~</span>
-              <DateMonthPicker
-                field={{
-                  value: aplcnYmTo || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정
-                    const now = new Date();
-                    const year = now.getFullYear();
-                    const month = String(now.getMonth() + 1).padStart(2, '0');
-                    return `${year}${month}`;
-                  })(), // yyyyMM 형식
-                  onChange: (value: string) => {
-                    setAplcnYmTo?.(value); // string 값을 직접 전달
-                  }
-                }}
-                selectClass="w-[100px] mr-8"
-                startYear={1900}  // 시작 연도 설정
-              />
-            </>
-          )}
-          <CtpvSggPrcsFcltSelectBox
-            sido={ctpvCd}
-            sigungu={sggCd}
-            sggName={sggName}
-            onSidoChange={(sidoId: number) => {
-              setCtpvCd(sidoId);
-              setSggCd(0);
-            }}
-            onSigunguChange={setSggCd}
-            setSggName={setSggName}
-            selectedSwagePrcsFclt={selectedSwagePrcsFclt}
-            onSwagePrcsFcltChange={onSwagePrcsFcltChange}
-            setIsLoading={setIsLoading}
-          />
-          {selectBox?.searchChk && (
-            <div className='flex flex-1 justify-end mr-6'>
-              <Button size="sm" onClick={() => selectBox.onSearchClick?.()}>조회</Button>
-            </div>
-          )}
-        </div>
-      </ListDiv>
-      <ListDiv>
-        <div className="card-header">
-          <h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
-          <div>
-            {graphBtn && (
-              <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile}>파일 다운로드</Button>
-            )}
-            {/* 그래프 있을 시 */}
-            {graphBtn && (
-              <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={isDeleteFile}>삭제</Button>
-            )}
-            {/* 분석 버튼 */}
-            {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>
-            )}
-          </div>
-        </div>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmitEvent)} className="flex-grow flex flex-col">
-            <div className="card !m-[1.2rem] flex-grow flex flex-col">
-              {/* 폼 정보 입력 칸 */}
-              {children?.[0]}
-            </div>
-          </form>
-        </Form>
-      </ListDiv>
-      {children?.[1] != null && (
+    <>
+      <Form {...form} className="min-h-screen flex flex-col">
        <ListDiv>
-          <div className="card-header flex items-center">
-            <h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
-            <div className='flex flex-1 justify-end mr-8'>
+          {/* searchBox.title이 있으면 h3 태그로 제목을 표시합니다. */}
+          {selectBox?.title && (
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">{selectBox.title}</h3>
+            </div>
+          )}
+          <div className="ml-2 mt-2 flex items-center w-full">
+            {showDatePicker && ( // showDatePicker 값에 따라 DatePicker 렌더링
+              <>
+                <Label className="mr-4 w-20 text-xl font-medium text-gray-600 whitespace-nowrap">상수사용기간</Label>
+                <DateMonthPicker
+                  field={{
+                    value: aplcnYmFrom || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정
+                      const now = new Date();
+                      const year = now.getFullYear();
+                      // const month = String(now.getMonth() + 1).padStart(2, '0');
+                      // return `${year}${month}`;
+                      return `${year}01`;
+                    })(), // yyyyMM 형식
+                    onChange: (value: string) => {
+                      setAplcnYmFrom?.(value); // string 값을 직접 전달
+                    }
+                  }}
+                  selectClass="ml-8 w-[100px]"
+                  startYear={1900}  // 시작 연도 설정
+                />
+                <span className="font-semibold text-xl mx-4">~</span>
+                <DateMonthPicker
+                  field={{
+                    value: aplcnYmTo || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정
+                      const now = new Date();
+                      const year = now.getFullYear();
+                      const month = String(now.getMonth() + 1).padStart(2, '0');
+                      return `${year}${month}`;
+                    })(), // yyyyMM 형식
+                    onChange: (value: string) => {
+                      setAplcnYmTo?.(value); // string 값을 직접 전달
+                    }
+                  }}
+                  selectClass="w-[100px] mr-8"
+                  startYear={1900}  // 시작 연도 설정
+                />
+              </>
+            )}
+            <CtpvSggPrcsFcltSelectBox
+              sido={ctpvCd}
+              sigungu={sggCd}
+              sggName={sggName}
+              onSidoChange={(sidoId: number) => {
+                setCtpvCd(sidoId);
+                setSggCd(0);
+              }}
+              onSigunguChange={setSggCd}
+              setSggName={setSggName}
+              selectedSwagePrcsFclt={selectedSwagePrcsFclt}
+              onSwagePrcsFcltChange={onSwagePrcsFcltChange}
+              setIsLoading={setIsLoading}
+            />
+            {selectBox?.searchChk && (
+              <div className='flex flex-1 justify-end mr-6'>
+                <Button size="sm" onClick={() => selectBox.onSearchClick?.()}>조회</Button>
+              </div>
+            )}
+          </div>
+        </ListDiv>
+        <ListDiv>
+          <div className="card-header">
+            <h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
+            <div>
              {graphBtn && (
-                <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">파일 다운로드</Button>
+                <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile}>파일 다운로드</Button>
              )}
              {/* 그래프 있을 시 */}
              {graphBtn && (
-                <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">삭제</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={isDeleteFile}>삭제</Button>
+              )}
+              {/* 분석 버튼 */}
+              {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={handleConfirm}>{analysisBtn}</Button>
              )}
            </div>
          </div>
-          <div className="card !m-[1.2rem]">{children?.[1]}</div>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmitEvent)} className="flex-grow flex flex-col">
+              <div className="card !m-[1.2rem] flex-grow flex flex-col">
+                {/* 폼 정보 입력 칸 */}
+                {children?.[0]}
+              </div>
+            </form>
+          </Form>
        </ListDiv>
-      )}
-    </Form>
+        {children?.[1] != null && (
+          <ListDiv>
+            <div className="card-header flex items-center">
+              <h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
+              <div className='flex flex-1 justify-end mr-8'>
+                {graphBtn && (
+                  <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">파일 다운로드</Button>
+                )}
+                {/* 그래프 있을 시 */}
+                {graphBtn && (
+                  <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">삭제</Button>
+                )}
+              </div>
+            </div>
+            <div className="card !m-[1.2rem]">{children?.[1]}</div>
+          </ListDiv>
+        )}
+      </Form>
+      <Toaster position="top-center"></Toaster>
+    </>
  )
 }

@@ -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 }
+  ); // 수동 닫기
+};