From 2df1437d908856ff9a59c1263a68e48a64e6d2f7 Mon Sep 17 00:00:00 2001
From: BaeZzi813 <woehd8252@gmail.com>
Date: Tue, 21 Oct 2025 00:35:47 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refact:=20=ED=86=A0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=EC=8B=9C=20null=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/toastContext.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/context/toastContext.tsx b/src/context/toastContext.tsx
index 02dd415..3e99567 100644
--- a/src/context/toastContext.tsx
+++ b/src/context/toastContext.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -15,6 +16,7 @@ export const useToast = () => {
 
 const ToastProvider = ({ children }: { children: ReactNode }) => {
   const [message, setMessage] = useState<string | null>(null);
+  const router = useRouter();
 
   const showToast = (msg: string) => {
     setMessage(msg);
@@ -30,7 +32,18 @@ const ToastProvider = ({ children }: { children: ReactNode }) => {
     return () => {
       clearTimeout(timer);
     };
-  });
+  }, [message]);
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setMessage(null);
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [router]);
 
   const toastRoot = typeof window !== 'undefined' ? document.getElementById('toast-root') : null;
 
@@ -43,7 +56,7 @@ const ToastProvider = ({ children }: { children: ReactNode }) => {
             message ? (
               <div
                 role='alert'
-                className='fixed top-[30%] left-1/2 z-[1] -translate-x-1/2 rounded-[5px] bg-red-300 px-4 py-[10px] text-white'
+                className='fixed left-1/2 top-[30%] z-[1] -translate-x-1/2 rounded-[5px] bg-red-300 px-4 py-[10px] text-white'
               >
                 {message}
               </div>