[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/HeaderMenu.module.css

@@ -10,6 +10,10 @@
   align-items: center;
 }
 
+.moreButton:focus {
+  outline: none;
+}
+
 .menuContainer {
   position: absolute;
   z-index: 999;

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/_components/modal/Modal.module.css

@@ -14,7 +14,9 @@
 }
 
 .container {
+  max-height: 580px;
   min-width: 330px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -98,6 +100,7 @@
 @media screen and (min-width: 768px) {
   .container {
     min-width: 580px;
+    max-height: 850px;
     padding: 32px;
   }
 

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/card/ColumnLabel.module.css

@@ -8,4 +8,5 @@
   display: flex;
   gap: 6px;
   padding: 4px 10px;
+  white-space: nowrap;
 }

src/components/header/DashboardMembers.module.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   gap: 0;
+  transform: translateX(5px);
 }
 
 .avatar,
@@ -13,3 +14,9 @@
   color: #d25b68;
   background: #f4d7da;
 }
+
+@media screen and (min-width: 768px) {
+  .avatarWrapper {
+    transform: none;
+  }
+}

src/components/header/InvitationButton.module.css

@@ -15,3 +15,13 @@
 .button.button:hover {
   background-color: var(--violet-light);
 }
+
+.icon {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .icon {
+    display: inline-block;
+  }
+}

src/components/header/UserSection.module.css

@@ -20,7 +20,8 @@
 .myMenu {
   position: absolute;
   top: 75px;
-  right: 0;
+  right: 10px;
+  z-index: 999;
 }
 
 @media screen and (min-width: 768px) {

src/components/header/skeleton/UserInfoSkeleton.module.css

@@ -8,6 +8,34 @@
   background-color: var(--gray-300);
 }
 
+.userIcon::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.2) 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  animation: shine 1.5s infinite;
+}
+
+@keyframes shine {
+  0% {
+    left: -100%;
+  }
+  50% {
+    left: 100%;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
 @media screen and (min-width: 768px) {
   .userInfo {
     display: flex;

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;