fix: toast 토글을 개별적으로 설정하여 각 토스트가 3초가 지나면 사라지게 변경

#234

client/src/components/Toast/ToastContainer.tsx

@@ -1,3 +1,4 @@
+import { AnimatePresence } from "framer-motion";
 import { useToastStore } from "@stores/useToastStore";
 import { Toast } from "./Toast";
 import { ToastContainerStyle } from "./ToastContainer.style";
@@ -7,14 +8,16 @@ export const ToastContainer = () => {
 
   return (
     <div className={ToastContainerStyle}>
-      {toasts.map((toast) => (
-        <Toast
-          key={toast.id}
-          message={toast.message}
-          duration={toast.duration}
-          onClose={() => removeToast(toast.id)}
-        />
-      ))}
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            message={toast.message}
+            duration={toast.duration}
+            onClose={() => removeToast(toast.id)}
+          />
+        ))}
+      </AnimatePresence>
     </div>
   );
 };

client/src/components/sidebar/Sidebar.tsx

@@ -7,7 +7,6 @@ import { useModal } from "@components/modal/useModal";
 import { MAX_VISIBLE_PAGE } from "@src/constants/page";
 import { AuthButton } from "@src/features/auth/AuthButton";
 import { useSocketStore } from "@src/stores/useSocketStore";
-import { useToastStore } from "@src/stores/useToastStore";
 import { Page } from "@src/types/page";
 import { useIsSidebarOpen, useSidebarActions } from "@stores/useSidebarStore";
 import { animation, contentVariants, sidebarVariants } from "./Sidebar.animation";
@@ -43,7 +42,6 @@ export const Sidebar = ({
   const { isOpen, openModal, closeModal } = useModal();
   const { sendPageDeleteOperation, clientId } = useSocketStore();
 
-  const { addToast } = useToastStore();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [pageToDelete, setPageToDelete] = useState<Page | null>(null);
 
@@ -69,11 +67,10 @@ export const Sidebar = ({
       return;
     }
 
-    addToast(`페이지(${pageToDelete!.title})가 삭제되었습니다.`);
-
     sendPageDeleteOperation({
       type: "pageDelete",
       workspaceId: "default",
+      pageTitle: pageToDelete!.title,
       pageId,
       clientId,
     });

client/src/features/workSpace/hooks/usePagesManage.ts

@@ -8,6 +8,7 @@ import { Page as CRDTPage } from "@noctaCrdt/Page";
 import { WorkSpace } from "@noctaCrdt/WorkSpace";
 import { useEffect, useState, useRef, useCallback } from "react";
 import { useSocketStore } from "@src/stores/useSocketStore";
+import { useToastStore } from "@src/stores/useToastStore";
 import { Page } from "@src/types/page";
 
 const PAGE_OFFSET = 60;
@@ -17,6 +18,7 @@ export const usePagesManage = (workspace: WorkSpace | null, clientId: number | n
   const { subscribeToPageOperations, sendPageCreateOperation, sendPageUpdateOperation } =
     useSocketStore();
   const subscriptionRef = useRef(false);
+  const { addToast } = useToastStore();
   useEffect(() => {
     if (!workspace) return;
     if (subscriptionRef.current) return;
@@ -52,6 +54,7 @@ export const usePagesManage = (workspace: WorkSpace | null, clientId: number | n
         addPage(newPage);
       },
       onRemotePageDelete: (operation) => {
+        addToast(`${operation.clientId}번 유저가 페이지(${operation.pageTitle})를 삭제하였습니다.`);
         workspace.remotePageDelete?.({
           pageId: operation.pageId,
           workspaceId: operation.workspaceId,

client/src/stores/useToastStore.ts

@@ -9,10 +9,19 @@ interface ToastStore {
 
 export const useToastStore = create<ToastStore>((set) => ({
   toasts: [],
-  addToast: (message, duration = 3000) =>
+  addToast: (message, duration = 3000) => {
+    const id = Date.now();
     set((state) => ({
-      toasts: [...state.toasts, { id: Date.now(), message, duration }],
-    })),
+      toasts: [...state.toasts, { id, message, duration }],
+    }));
+    // duration 후에 자동으로 해당 toast 제거
+    setTimeout(() => {
+      set((state) => ({
+        toasts: state.toasts.filter((toast) => toast.id !== id),
+      }));
+    }, duration);
+  },
+
   removeToast: (id) =>
     set((state) => ({
       toasts: state.toasts.filter((toast) => toast.id !== id),