[fix] manage multiple cards in card store

src/app/(with-header-sidebar)/dashboard/[id]/components/Card.tsx

@@ -20,10 +20,12 @@ interface Props {
 
 function Card({ item, index, columnTitle }: Props) {
   const { isOpen, openModal, isClosing, closeModal } = useModal();
-  const card = useCardStore((state) => state.card);
+  const card = useCardStore((state) =>
+    state.cards.find((card) => card.id === item.id)
+  );
 
   useEffect(() => {
-    useCardStore.getState().setCard(item);
+    useCardStore.getState().addCard(item);
   }, [item]);
 
   if (!item || !item.id) {

src/app/(with-header-sidebar)/dashboard/[id]/components/UpdateCardModal.tsx

@@ -22,7 +22,7 @@ interface TaskUpdateFormValues extends TaskFormValues {
   columnId: number;
 }
 
-export default function UpdateTaskModal() {
+export default function UpdateCardModal({ cardId }: { cardId: number }) {
   const { closeModal } = useModalStore();
   const {
     register,
@@ -34,12 +34,15 @@ export default function UpdateTaskModal() {
   const dashboard = useDashboardStore((state) => state.dashboard);
   const { members } = useMember(dashboard?.id.toString() || null, 10);
   const { columns } = useColumn(dashboard?.id || null);
-  const { card, setCard } = useCardStore();
+  const card = useCardStore((state) =>
+    state.cards.find((card) => card.id === cardId)
+  );
+  const modifyCard = useCardStore((state) => state.modifyCard);
 
   const onSubmit = async (data: TaskUpdateFormValues) => {
     if (card) {
       const response = await updateCard(data, card.columnId, card.id);
-      setCard(response);
+      modifyCard(card.id, response);
       closeModal();
     }
   };

src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/HeaderMenu.tsx

@@ -3,34 +3,31 @@ import type { Menu } from '@/types/menu';
 import MenuDropdown from '@/components/MenuDropdown';
 import { useMenu } from '@/hooks/useMenu';
 import { deleteCard } from '@/lib/cardService';
-import { useRouter } from 'next/navigation';
-import useDashboardStore from '@/store/dashboardStore';
 import useModalStore from '@/store/modalStore';
-import UpdateTaskModal from '../UpdateCardModal';
+import UpdateCardModal from '../UpdateCardModal';
 import styles from './HeaderMenu.module.css';
 import useTriggerStore from '@/store/triggerStore';
+import useCardStore from '@/store/cardStore';
 
 interface HeaderMenuProps {
   cardId: number;
   closeModal: () => void;
 }
 
 export default function HeaderMenu({ cardId, closeModal }: HeaderMenuProps) {
-  const router = useRouter();
   const { updateTrigger } = useTriggerStore();
-  const { dashboard } = useDashboardStore();
   const { isMenuVisible, toggleMenu } = useMenu();
   const { openModal } = useModalStore();
 
   const handleDeleteClick = async () => {
     await deleteCard(cardId);
     closeModal();
+    useCardStore.getState().removeCard(cardId);
     updateTrigger.card();
-    router.replace(`/dashboard/${dashboard?.id}`);
   };
 
   const handleUpdateClick = () => {
-    openModal(<UpdateTaskModal />);
+    openModal(<UpdateCardModal cardId={cardId} />);
   };
 
   const cardMenus: Menu[] = [

src/app/(with-header-sidebar)/mydashboard/_components/dashboards/DashboardCard.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import Button from '@/components/Button';
 import styles from './DashboardCard.module.css';
+import useCardStore from '@/store/cardStore';
 
 export default function DashboardCard({
   id,
@@ -12,11 +13,13 @@ export default function DashboardCard({
 }: Dashboard) {
   const router = useRouter();
 
+  const handleClick = () => {
+    useCardStore.getState().clearCards();
+    router.push(`/dashboard/${id}`);
+  };
+
   return (
-    <Button
-      className={styles.dashboardCard}
-      onClick={() => router.push(`/dashboard/${id}`)}
-    >
+    <Button className={styles.dashboardCard} onClick={handleClick}>
       <div className={styles.titleContainer}>
         <div style={{ background: color }} className={styles.dot}></div>
         <span className={styles.title}>{title}</span>

src/components/sidebar/Dashboards.tsx

@@ -7,6 +7,7 @@ import Button from '../Button';
 import useDashboards from '@/app/(with-header-sidebar)/mydashboard/_hooks/useDashboards';
 import useTriggerStore from '@/store/triggerStore';
 import styles from './Dashboards.module.css';
+import useCardStore from '@/store/cardStore';
 
 const PAGE_SIZE = 12;
 
@@ -45,11 +46,14 @@ export default function Dashboards() {
 function DashboardItem({ id, color, title, createdByMe }: Dashboard) {
   const isActive = usePathname() === `/dashboard/${id}`;
 
+  const handleClick = () => useCardStore.getState().clearCards();
+
   return (
     <li>
       <Link
         href={`/dashboard/${id}`}
         className={`link ${isActive ? styles.active : ''}`}
+        onClick={handleClick}
       >
         <div className={styles.titleContainer}>
           <div style={{ background: color }} className={styles.dot}></div>

src/store/cardStore.ts

@@ -2,13 +2,37 @@ import { create } from 'zustand';
 import { Card } from '@/types/dashboardView';
 
 interface CardState {
-  card: Card | null;
-  setCard: (newCard: Card) => void;
+  cards: Card[];
+  addCard: (newCard: Card) => void;
+  modifyCard: (id: number, updatedCard: Partial<Card>) => void;
+  removeCard: (id: number) => void;
+  clearCards: () => void;
 }
 
 const useCardStore = create<CardState>((set) => ({
-  card: null,
-  setCard: (newCard: Card) => set({ card: newCard }),
+  cards: [],
+  addCard: (newCard: Card) =>
+    set((state) => {
+      const exists = state.cards.some((card) => card.id === newCard.id);
+      if (exists) return state;
+      return {
+        cards: [...state.cards, newCard],
+      };
+    }),
+  modifyCard: (id, updatedCard) =>
+    set((state) => ({
+      cards: state.cards.map((card) =>
+        card.id === id ? { ...card, ...updatedCard } : card
+      ),
+    })),
+  removeCard: (id) =>
+    set((state) => ({
+      cards: state.cards.filter((card) => card.id !== id),
+    })),
+  clearCards: () =>
+    set(() => ({
+      cards: [],
+    })),
 }));
 
 export default useCardStore;