feat: post 후 toast 메시지 구현

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>
+    );
+}

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);

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);

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 };
+}

admin/src/pages/Lottery/index.tsx

@@ -9,13 +9,16 @@ 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";
 
 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>
     );
 }