🐛 fix:ToastContainer 렌더링 동시성 이슈

- 렌더링 도중 toast를 렌더링하는 동시성 이슈 문제를 useTransition 사용
Issue Resolved: #

Author: qkdl60

front/src/components/Toast/ToastContainer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 
 import Toast from '@/components/Toast/Toast.tsx';
 
@@ -14,14 +14,14 @@ interface ToastData {
 
 export default function ToastContainer() {
   const [toastList, setToastList] = useState<ToastData[]>([]);
-
+  const [, startTransition] = useTransition();
   const getId = () => Date.now();
   const setSuccessToast = (text: string) =>
-    setToastList((prev) => [{ type: 'success', text, id: getId() }, ...prev]);
+    startTransition(() => setToastList((prev) => [{ type: 'success', text, id: getId() }, ...prev]));
   const setWarningToast = (text: string) =>
-    setToastList((prev) => [{ type: 'warning', text, id: getId() }, ...prev]);
+    startTransition(() => setToastList((prev) => [{ type: 'warning', text, id: getId() }, ...prev]));
   const setErrorToast = (text: string) =>
-    setToastList((prev) => [{ type: 'error', text, id: getId() }, ...prev]);
+    startTransition(() => setToastList((prev) => [{ type: 'error', text, id: getId() }, ...prev]));
 
   useEffect(() => {
     const toastEvent = ToastEvent.getInstance();