[refactor] refetch card data once card is created, deleted, updated

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { Card as CardType } from '@/types/dashboardView';
 import { useModal } from '@/app/(with-header-sidebar)/mydashboard/_hooks/useModal';
@@ -20,13 +20,17 @@ interface Props {
 
 function Card({ item, index, columnTitle }: Props) {
   const { isOpen, openModal, isClosing, closeModal } = useModal();
+  const card = useCardStore((state) => state.card);
+
+  useEffect(() => {
+    useCardStore.getState().setCard(item);
+  }, [item]);
 
   if (!item || !item.id) {
     return null;
   }
 
-  useCardStore.getState().setCard(item);
-  const { id, title, imageUrl, tags, dueDate, assignee } = item;
+  const { id, title, imageUrl, tags, dueDate, assignee } = card || item;
 
   return (
     <>
@@ -93,7 +97,7 @@ function Card({ item, index, columnTitle }: Props) {
           )}
           className={styles.modal}
         >
-          <CardInfo card={item} columnTitle={columnTitle} />
+          <CardInfo card={card || item} columnTitle={columnTitle} />
         </Modal>
       )}
     </>

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

@@ -11,6 +11,7 @@ import useMember from '../edit/_hooks/useMember';
 import useDashboardStore from '@/store/dashboardStore';
 import { ERROR_MESSAGES } from '@/constants/message';
 import { createCard } from '@/lib/cardService';
+import useTriggerStore from '@/store/triggerStore';
 import styles from './CreateCardModal.module.css';
 
 export interface TaskFormValues {
@@ -24,6 +25,7 @@ export interface TaskFormValues {
 
 export default function CreateTaskModal({ columnId }: { columnId: number }) {
   const { closeModal } = useModalStore();
+  const { updateTrigger } = useTriggerStore();
   const {
     register,
     handleSubmit,
@@ -35,7 +37,8 @@ export default function CreateTaskModal({ columnId }: { columnId: number }) {
 
   const onSubmit = async (data: TaskFormValues) => {
     if (dashboard) {
-      const response = await createCard(data, columnId, dashboard.id);
+      await createCard(data, columnId, dashboard.id);
+      updateTrigger.card();
       closeModal();
     }
   };

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

@@ -7,7 +7,7 @@ import Image from 'next/image';
 import CreateCommentForm from './comments/CreateCommentForm';
 import useDashboardStore from '@/store/dashboardStore';
 import Comments from './comments/Comments';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Comment } from '@/types/comment';
 import styles from './CardInfo.module.css';
 
@@ -23,6 +23,8 @@ export default function CardInfo({ card, columnTitle }: CardInfoProps) {
 
   const [newComment, setNewComment] = useState<Comment | null>(null);
 
+  useEffect(() => {}, [card]);
+
   return (
     <div className={styles.cardInfo}>
       {card.assignee && (

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

@@ -8,6 +8,7 @@ import useDashboardStore from '@/store/dashboardStore';
 import useModalStore from '@/store/modalStore';
 import UpdateTaskModal from '../UpdateCardModal';
 import styles from './HeaderMenu.module.css';
+import useTriggerStore from '@/store/triggerStore';
 
 interface HeaderMenuProps {
   cardId: number;
@@ -16,13 +17,15 @@ interface HeaderMenuProps {
 
 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();
+    updateTrigger.card();
     router.replace(`/dashboard/${dashboard?.id}`);
   };
 

src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/DeleteButton.tsx

@@ -5,17 +5,17 @@ import Button from '@/components/Button';
 import { deleteDashboard } from '@/lib/boardService';
 import styles from './DeleteButton.module.css';
 import useDashboardStore from '@/store/dashboardStore';
-import useDashboardTriggerStore from '@/store/dashboardTriggerStore';
+import useTriggerStore from '@/store/triggerStore';
 
 export default function DeleteButton() {
   const { dashboard, setDashboard } = useDashboardStore();
-  const { updateTrigger } = useDashboardTriggerStore();
+  const { updateTrigger } = useTriggerStore();
   const router = useRouter();
 
   const handleClick = async () => {
     await deleteDashboard(dashboard!.id.toString());
     setDashboard(null);
-    updateTrigger();
+    updateTrigger.dashboard();
     router.replace('/mydashboard');
   };
 

src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/EditForm.tsx

@@ -7,11 +7,11 @@ import { getBoard, updateBoard } from '@/lib/boardService';
 import { Dashboard, UpdateDashboardRequestParams } from '@/types/dashboards';
 import Button from '@/components/Button';
 import DashboardInput from '@/components/DashboardInput';
+import useTriggerStore from '@/store/triggerStore';
 import styles from './EditForm.module.css';
-import useDashboardTriggerStore from '@/store/dashboardTriggerStore';
 
 export default function EditForm() {
-  const { updateTrigger } = useDashboardTriggerStore();
+  const { updateTrigger } = useTriggerStore();
   const [board, setBoard] = useState<Dashboard>();
   const id = useIdStore((state) => state.id);
   const {
@@ -28,7 +28,7 @@ export default function EditForm() {
 
   const onSubmit = async (data: UpdateDashboardRequestParams) => {
     const response = await updateBoard(id, data);
-    updateTrigger();
+    updateTrigger.dashboard();
     setBoard(response);
   };
 

src/app/(with-header-sidebar)/dashboard/[id]/hooks/useDashBoardView.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import axiosInstance from '@/lib/axiosInstance';
 import { DropResult } from 'react-beautiful-dnd';
@@ -58,11 +58,6 @@ export default function useDashBoardView(dashboardId: string | undefined) {
     }
   }, [dashboardId]);
 
-  useEffect(() => {
-    if (!dashboardId) return;
-    fetchData();
-  }, [fetchData, dashboardId]);
-
   const sendCardUpdateRequest = useCallback(
     debounce(async (cardId: string, updatedCardData: Card) => {
       try {
@@ -188,5 +183,5 @@ export default function useDashBoardView(dashboardId: string | undefined) {
     [cursors]
   );
 
-  return { columns, loading, error, handleOnDragEnd, loadMoreData };
+  return { columns, loading, error, handleOnDragEnd, loadMoreData, fetchData };
 }

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

@@ -10,25 +10,32 @@ import Image from 'next/image';
 import useDashboardStore from '@/store/dashboardStore';
 import useModalStore from '@/store/modalStore';
 import CreateColumnModal from './components/CreateColumnModal';
+import useTriggerStore from '@/store/triggerStore';
 import styles from './page.module.css';
 
+const DEFAULT_COLOR = 'var(--violet)';
+
 export default function DashBoardView() {
   const { openModal } = useModalStore();
+  const { trigger } = useTriggerStore();
   const params = useParams();
   const id = params.id;
 
-  const { columns, loading, error, handleOnDragEnd, loadMoreData } =
+  const { columns, loading, error, handleOnDragEnd, loadMoreData, fetchData } =
     useDashBoardView(`${id}`);
-  const dashboard = useDashboardStore((state) => state.dashboard);
-  const setDashboard = useDashboardStore((state) => state.setDashboard);
-  const color = useDashboardStore((state) => state.color);
+  const { dashboard, setDashboard } = useDashboardStore();
 
   useEffect(() => {
     if (dashboard?.id !== Number(id)) {
       setDashboard(Number(id));
     }
   }, [id, dashboard?.id]);
 
+  useEffect(() => {
+    if (!dashboard) return;
+    fetchData();
+  }, [dashboard, trigger]);
+
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
 
@@ -44,7 +51,7 @@ export default function DashBoardView() {
         {columns.map((column) => (
           <Column
             key={column.id}
-            color={color}
+            color={dashboard?.color || DEFAULT_COLOR}
             title={column.title}
             totalCount={column.totalCount}
             id={column.id}

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

@@ -4,8 +4,8 @@ import DashboardInput from '@/components/DashboardInput';
 import type { CreateDashboardRequestBody } from '@/types/dashboards';
 import { createDashboard } from '@/lib/boardService';
 import { useRouter } from 'next/navigation';
-import useDashboardTriggerStore from '@/store/dashboardTriggerStore';
 import styles from './CreateDashboardForm.module.css';
+import useTriggerStore from '@/store/triggerStore';
 
 interface CreateDashboardFormProps {
   closeModal: () => void;
@@ -14,7 +14,7 @@ interface CreateDashboardFormProps {
 export default function CreateDashboardForm({
   closeModal,
 }: CreateDashboardFormProps) {
-  const { updateTrigger } = useDashboardTriggerStore();
+  const { updateTrigger } = useTriggerStore();
 
   const {
     register,
@@ -26,7 +26,7 @@ export default function CreateDashboardForm({
   const onSubmit = async (newDashboard: CreateDashboardRequestBody) => {
     const response = await createDashboard(newDashboard);
     closeModal();
-    updateTrigger();
+    updateTrigger.dashboard();
     router.push(`/dashboard/${response.id}`);
   };
 

src/components/header/UserSection.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import UserInfo from './UserInfo';
 import Button from '../Button';
 import type { Menu } from '@/types/menu';

src/components/sidebar/Dashboards.tsx

@@ -1,18 +1,17 @@
+import { useEffect } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import type { Dashboard } from '@/types/dashboards';
 import Image from 'next/image';
 import Button from '../Button';
 import useDashboards from '@/app/(with-header-sidebar)/mydashboard/_hooks/useDashboards';
-import useDashboardStore from '@/store/dashboardStore';
+import useTriggerStore from '@/store/triggerStore';
 import styles from './Dashboards.module.css';
-import { useEffect } from 'react';
-import useDashboardTriggerStore from '@/store/dashboardTriggerStore';
 
 const PAGE_SIZE = 12;
 
 export default function Dashboards() {
-  const { trigger } = useDashboardTriggerStore();
+  const { trigger } = useTriggerStore();
 
   const { page, dashboards, totalPages, handlePageChange, refetch } =
     useDashboards({
@@ -21,7 +20,7 @@ export default function Dashboards() {
 
   useEffect(() => {
     refetch();
-  }, [trigger]);
+  }, [trigger.dashboard]);
 
   if (dashboards.length === 0) {
     return null;
@@ -45,18 +44,12 @@ export default function Dashboards() {
 
 function DashboardItem({ id, color, title, createdByMe }: Dashboard) {
   const isActive = usePathname() === `/dashboard/${id}`;
-  const setColor = useDashboardStore((state) => state.setColor);
-
-  const handleViewClick = () => {
-    setColor(color);
-  };
 
   return (
     <li>
       <Link
         href={`/dashboard/${id}`}
         className={`link ${isActive ? styles.active : ''}`}
-        onClick={handleViewClick}
       >
         <div className={styles.titleContainer}>
           <div style={{ background: color }} className={styles.dot}></div>

src/lib/cardService.ts

@@ -5,6 +5,7 @@ import { toast } from '@/store/toastStore';
 export const deleteCard = async (cardId: number) => {
   try {
     await axiosInstance.delete(`/cards/${cardId}`);
+    toast.success({ message: '카드가 삭제되었습니다.' });
   } catch (error) {
     throw error;
   }

src/store/dashboardStore.ts

@@ -6,9 +6,6 @@ import { getBoard } from '@/lib/boardService';
 interface dashboardState {
   dashboard: Dashboard | null;
   setDashboard: (dashboard: number | null) => void;
-
-  color: string;
-  setColor: (newColor: string) => void;
 }
 
 const useDashboardStore = create(
@@ -31,8 +28,6 @@ const useDashboardStore = create(
           dashboard: { ...response },
         });
       },
-      color: 'var(--violet)',
-      setColor: (newColor) => set({ color: newColor }),
     }),
     {
       name: 'dashboardStorage',

src/store/triggerStore.ts

@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+
+interface TriggerStore {
+  trigger: {
+    dashboard: boolean;
+    card: boolean;
+  };
+  updateTrigger: {
+    dashboard: () => void;
+    card: () => void;
+  };
+}
+
+const useTriggerStore = create<TriggerStore>((set) => ({
+  trigger: {
+    dashboard: false,
+    card: false,
+  },
+  updateTrigger: {
+    dashboard: () =>
+      set((state) => ({
+        trigger: { ...state.trigger, dashboard: !state.trigger.dashboard },
+      })),
+    card: () =>
+      set((state) => ({
+        trigger: { ...state.trigger, card: !state.trigger.card },
+      })),
+  },
+}));
+
+export default useTriggerStore;