From 08938eea0a7b65c9b573861ab343f917ca8a6089 Mon Sep 17 00:00:00 2001
From: jhj2713 <juhyojeong58@gmail.com>
Date: Mon, 12 Aug 2024 16:57:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20post=20=ED=9B=84=20toast=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/components/Toast/index.tsx | 16 ++++++++++++++++
 admin/src/hooks/useFetch.ts          |  3 +++
 admin/src/hooks/useInfiniteFetch.ts  |  2 ++
 admin/src/hooks/useToast.tsx         | 24 ++++++++++++++++++++++++
 admin/src/pages/Lottery/index.tsx    |  7 ++++++-
 5 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 admin/src/components/Toast/index.tsx
 create mode 100644 admin/src/hooks/useToast.tsx

diff --git a/admin/src/components/Toast/index.tsx b/admin/src/components/Toast/index.tsx
new file mode 100644
index 00000000..2921a452
--- /dev/null
+++ b/admin/src/components/Toast/index.tsx
@@ -0,0 +1,16 @@
+interface ToastProps {
+    message: string;
+    isVisible: boolean;
+}
+
+export default function Toast({ message, isVisible }: ToastProps) {
+    return (
+        <div
+            className={`fixed top-[88px] left-[50%] translate-x-[-50%] h-heading-4-bold bg-neutral-400 text-white px-6 py-4 rounded-lg transition-opacity ${
+                isVisible ? "opacity-100" : "opacity-0"
+            }`}
+        >
+            {message}
+        </div>
+    );
+}
diff --git a/admin/src/hooks/useFetch.ts b/admin/src/hooks/useFetch.ts
index db697c6a..7ba15c33 100644
--- a/admin/src/hooks/useFetch.ts
+++ b/admin/src/hooks/useFetch.ts
@@ -6,6 +6,9 @@ export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>)
     const [isError, setIsError] = useState<boolean>(false);
 
     const fetchData = async (params?: P) => {
+        setIsError(false);
+        setIsSuccess(false);
+
         try {
             const data = await fetch(params as P);
             setData(data);
diff --git a/admin/src/hooks/useInfiniteFetch.ts b/admin/src/hooks/useInfiniteFetch.ts
index d9d57c5c..89394f2b 100644
--- a/admin/src/hooks/useInfiniteFetch.ts
+++ b/admin/src/hooks/useInfiniteFetch.ts
@@ -36,6 +36,8 @@ export default function useInfiniteFetch<T>({
         if (!hasNextPage || isLoading || currentPageParam === undefined) return;
 
         setIsLoading(true);
+        setIsError(false);
+        setIsSuccess(false);
         try {
             const lastPage = await fetch(currentPageParam);
             const nextPageParam = getNextPageParam(currentPageParam, lastPage);
diff --git a/admin/src/hooks/useToast.tsx b/admin/src/hooks/useToast.tsx
new file mode 100644
index 00000000..dabd5c10
--- /dev/null
+++ b/admin/src/hooks/useToast.tsx
@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from "react";
+import Toast from "../components/Toast";
+
+export default function useToast(message: string, duration: number = 3000) {
+    const [visible, setVisible] = useState(false);
+
+    const showToast = useCallback(() => {
+        setVisible(true);
+    }, []);
+
+    useEffect(() => {
+        if (visible) {
+            const timer = setTimeout(() => {
+                setVisible(false);
+            }, duration);
+
+            return () => clearTimeout(timer);
+        }
+    }, [visible, duration]);
+
+    const ToastComponent = <Toast message={message} isVisible={visible} />;
+
+    return { showToast, ToastComponent };
+}
diff --git a/admin/src/pages/Lottery/index.tsx b/admin/src/pages/Lottery/index.tsx
index f129f82d..d5d23332 100644
--- a/admin/src/pages/Lottery/index.tsx
+++ b/admin/src/pages/Lottery/index.tsx
@@ -9,6 +9,7 @@ import TimePicker from "@/components/TimePicker";
 import { STATUS_MAP } from "@/constants/common";
 import { LOTTERY_HEADER } from "@/constants/lottery";
 import useFetch from "@/hooks/useFetch";
+import useToast from "@/hooks/useToast";
 import { LotteryEventType } from "@/types/lottery";
 import { PutLotteryResponse } from "@/types/lotteryApi";
 import { getDateDifference } from "@/utils/getDateDifference";
@@ -16,6 +17,8 @@ import { getDateDifference } from "@/utils/getDateDifference";
 export default function Lottery() {
     const navigate = useNavigate();
 
+    const { showToast, ToastComponent } = useToast("수정 사항이 반영되었습니다!");
+
     const lotteryData = useLoaderData() as LotteryEventType[];
     const [lottery, setLottery] = useState<LotteryEventType>({} as LotteryEventType);
 
@@ -35,7 +38,7 @@ export default function Lottery() {
     }, []);
     useEffect(() => {
         if (isSuccessPostLottery) {
-            // TODO: toast 메시지
+            showToast();
         }
     }, [isSuccessPostLottery]);
 
@@ -103,6 +106,8 @@ export default function Lottery() {
                     수정사항 업데이트
                 </Button>
             </div>
+
+            {ToastComponent}
         </div>
     );
 }