[feat] dashboard restore

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

@@ -65,15 +65,17 @@
 }
 
 .optionalInfo {
+  flex: 1;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 }
 
 .dueDateWrapper {
+  flex: 1;
   display: flex;
-  gap: 4px;
   align-items: center;
+  gap: 4px;
   width: 125px;
 }
 
@@ -116,15 +118,11 @@
 
   .contentContainer {
     flex-direction: row;
-    align-items: flex-end;
+    align-items: center;
     justify-content: space-between;
     gap: 0;
   }
 
-  .tagContainer {
-    max-width: 50%;
-  }
-
   .imageWrapper {
     width: 91px;
     height: 53px;
@@ -140,6 +138,10 @@
     gap: 16px;
   }
 
+  .dueDateWrapper {
+    justify-content: flex-end;
+  }
+
   .modal {
     width: 680px;
   }
@@ -181,4 +183,8 @@
     justify-content: space-between;
     gap: 0;
   }
+
+  .dueDateWrapper {
+    justify-content: flex-start;
+  }
 }

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

@@ -72,7 +72,7 @@ export default function UpdateTaskModal() {
           options={members}
           setValue={setValue}
           defaultAssignee={
-            members?.filter((member) => member.userId == card?.assignee.id)[0]
+            members?.filter((member) => member.userId == card?.assignee?.id)[0]
           }
           className={styles.dropdown}
         />

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

@@ -25,9 +25,11 @@ export default function CardInfo({ card, columnTitle }: CardInfoProps) {
 
   return (
     <div className={styles.cardInfo}>
-      <div className={styles.assignmentContainer}>
-        <Assignment card={card} />
-      </div>
+      {card.assignee && (
+        <div className={styles.assignmentContainer}>
+          <Assignment card={card} />
+        </div>
+      )}
       <div className={styles.infoContainer}>
         <div className={styles.labelArea}>
           <div>

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

@@ -1,10 +1,4 @@
-import {
-  useState,
-  ChangeEvent,
-  KeyboardEvent,
-  MouseEvent,
-  useRef,
-} from 'react';
+import { useState, ChangeEvent, KeyboardEvent, useRef } from 'react';
 import Avatar from '@/components/Avatar';
 import Button from '@/components/Button';
 import { formatDateToCustomFormat } from '@/utils/dateUtils';
@@ -58,7 +52,6 @@ export default function CommentDetail({
       e.preventDefault();
       handleSave();
       toggleEditing();
-      // todo: 수정성공시 토스트 박스
     }
   };
 
@@ -80,7 +73,6 @@ export default function CommentDetail({
   const handleDeleteOnClick = async () => {
     await deleteComment(id);
     onDelete(id);
-    // todo: 삭제성공시 토스트 박스
   };
 
   return (

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

@@ -1,17 +1,21 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import useIdStore from '@/store/idStore';
 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';
 
 export default function DeleteButton() {
-  const id = useIdStore((state) => state.id);
+  const { dashboard, setDashboard } = useDashboardStore();
+  const { updateTrigger } = useDashboardTriggerStore();
   const router = useRouter();
 
   const handleClick = async () => {
-    await deleteDashboard(id);
+    await deleteDashboard(dashboard!.id.toString());
+    setDashboard(null);
+    updateTrigger();
     router.replace('/mydashboard');
   };
 

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

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

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

@@ -1,10 +1,11 @@
 import { useForm } from 'react-hook-form';
 import Button from '@/components/Button';
 import DashboardInput from '@/components/DashboardInput';
-import styles from './CreateDashboardForm.module.css';
-import { CreateDashboardRequestBody } from '@/types/dashboards';
+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';
 
 interface CreateDashboardFormProps {
   closeModal: () => void;
@@ -13,6 +14,8 @@ interface CreateDashboardFormProps {
 export default function CreateDashboardForm({
   closeModal,
 }: CreateDashboardFormProps) {
+  const { updateTrigger } = useDashboardTriggerStore();
+
   const {
     register,
     handleSubmit,
@@ -23,6 +26,7 @@ export default function CreateDashboardForm({
   const onSubmit = async (newDashboard: CreateDashboardRequestBody) => {
     const response = await createDashboard(newDashboard);
     closeModal();
+    updateTrigger();
     router.push(`/dashboard/${response.id}`);
   };
 

src/app/(with-header-sidebar)/mydashboard/_components/invitations/MyInvitationCard.tsx

@@ -3,8 +3,8 @@ import type {
   Invitation,
   AcceptMyInvitationRequestBody,
 } from '@/types/invitation';
-import styles from './MyInvitationCard.module.css';
 import { updateMyInvitation } from '../../_lib/myInvitationService';
+import styles from './MyInvitationCard.module.css';
 
 interface MyInvitationCardProps extends Invitation {
   onActionComplete: () => void;

src/app/(with-header-sidebar)/mydashboard/_hooks/useDashboards.ts

@@ -8,7 +8,7 @@ interface UseDashboardsParams {
 
 export default function useDashboards({ pageSize }: UseDashboardsParams) {
   const [page, setPage] = useState(1);
-  const { data } = useApi<GetDashboardsResponse>('/dashboards', {
+  const { data, refetch } = useApi<GetDashboardsResponse>('/dashboards', {
     method: 'GET',
     params: { navigationMethod: 'pagination', page, size: pageSize },
   });
@@ -25,5 +25,5 @@ export default function useDashboards({ pageSize }: UseDashboardsParams) {
     });
   };
 
-  return { page, dashboards, totalPages, handlePageChange };
+  return { page, dashboards, totalPages, handlePageChange, refetch };
 }

src/app/(with-header-sidebar)/mydashboard/_lib/myInvitationService.ts

@@ -1,4 +1,5 @@
 import axiosInstance from '@/lib/axiosInstance';
+import { toast } from '@/store/toastStore';
 import {
   GetMyInvitationsRequestParam,
   GetMyInvitationsResponse,
@@ -45,6 +46,10 @@ export const updateMyInvitation = async ({
       requestBody
     );
 
+    toast.success({
+      message: `${requestBody.inviteAccepted ? '수락' : '거절'} 완료!`,
+    });
+
     return response.data;
   } catch (error) {
     throw error;

src/components/sidebar/Dashboards.tsx

@@ -6,13 +6,22 @@ import Button from '../Button';
 import useDashboards from '@/app/(with-header-sidebar)/mydashboard/_hooks/useDashboards';
 import useDashboardStore from '@/store/dashboardStore';
 import styles from './Dashboards.module.css';
+import { useEffect } from 'react';
+import useDashboardTriggerStore from '@/store/dashboardTriggerStore';
 
 const PAGE_SIZE = 12;
 
 export default function Dashboards() {
-  const { page, dashboards, totalPages, handlePageChange } = useDashboards({
-    pageSize: PAGE_SIZE,
-  });
+  const { trigger } = useDashboardTriggerStore();
+
+  const { page, dashboards, totalPages, handlePageChange, refetch } =
+    useDashboards({
+      pageSize: PAGE_SIZE,
+    });
+
+  useEffect(() => {
+    refetch();
+  }, [trigger]);
 
   if (dashboards.length === 0) {
     return null;

src/lib/boardService.ts

@@ -24,7 +24,7 @@ export const updateBoard = async (
       title,
       color,
     });
-    toast.success({ message: '변경되었습니다.' });
+    toast.success({ message: '대시보드가 수정되었습니다.' });
     return response.data;
   } catch (error) {
     if (error instanceof Error) {
@@ -42,6 +42,7 @@ export const createDashboard = async ({
       title,
       color,
     });
+    toast.success({ message: '대시보드가 생성되었습니다.' });
     return response.data;
   } catch (error) {
     throw error;

src/lib/commentService.ts

@@ -1,4 +1,5 @@
 import axiosInstance from '@/lib/axiosInstance';
+import { toast } from '@/store/toastStore';
 import type {
   CreateCommentRequestBody,
   Comment,
@@ -59,6 +60,7 @@ export const updateComment = async ({
 export const deleteComment = async (commentId: number) => {
   try {
     await axiosInstance.delete(`/comments/${commentId}`);
+    toast.success({ message: '댓글이 삭제되었습니다.' });
   } catch (error) {
     throw error;
   }

src/store/dashboardTriggerStore.ts

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