diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.tsx index 2ee6f47..4a6c53c 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.tsx +++ b/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} > - + )} diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateCardModal.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateCardModal.tsx index feef26c..b24348a 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/CreateCardModal.tsx +++ b/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(); } }; diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/CardInfo.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/CardInfo.tsx index 507b8b4..3424790 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/CardInfo.tsx +++ b/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(null); + useEffect(() => {}, [card]); + return (
{card.assignee && ( diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/HeaderMenu.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/HeaderMenu.tsx index 125ed81..cd6d9de 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/card-detail/HeaderMenu.tsx +++ b/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,6 +17,7 @@ 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(); @@ -23,6 +25,7 @@ export default function HeaderMenu({ cardId, closeModal }: HeaderMenuProps) { const handleDeleteClick = async () => { await deleteCard(cardId); closeModal(); + updateTrigger.card(); router.replace(`/dashboard/${dashboard?.id}`); }; diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/DeleteButton.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/DeleteButton.tsx index 766f903..9828eef 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/DeleteButton.tsx +++ b/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'); }; diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/EditForm.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/EditForm.tsx index dcb94bb..a6a25e4 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/edit/_components/EditForm.tsx +++ b/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(); 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); }; diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/hooks/useDashBoardView.ts b/src/app/(with-header-sidebar)/dashboard/[id]/hooks/useDashBoardView.ts index 42eb15c..eea4427 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/hooks/useDashBoardView.ts +++ b/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 }; } diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/page.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/page.tsx index d0bf3a2..0505ea1 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/page.tsx +++ b/src/app/(with-header-sidebar)/dashboard/[id]/page.tsx @@ -10,18 +10,20 @@ 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)) { @@ -29,6 +31,11 @@ export default function DashBoardView() { } }, [id, dashboard?.id]); + useEffect(() => { + if (!dashboard) return; + fetchData(); + }, [dashboard, trigger]); + if (loading) return
Loading...
; if (error) return
Error: {error}
; @@ -44,7 +51,7 @@ export default function DashBoardView() { {columns.map((column) => ( 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}`); }; diff --git a/src/components/header/UserSection.tsx b/src/components/header/UserSection.tsx index e66a064..7ca9ac4 100644 --- a/src/components/header/UserSection.tsx +++ b/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'; diff --git a/src/components/sidebar/Dashboards.tsx b/src/components/sidebar/Dashboards.tsx index ff02fc3..485eb98 100644 --- a/src/components/sidebar/Dashboards.tsx +++ b/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 (
  • diff --git a/src/lib/cardService.ts b/src/lib/cardService.ts index 232ba21..cc0730d 100644 --- a/src/lib/cardService.ts +++ b/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; } diff --git a/src/middleware.ts b/src/middleware.ts index 1025ad3..c447acb 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -4,6 +4,10 @@ import { TOKEN_KEY } from './constants/cookies'; export function middleware(request: NextRequest) { const userToken = request.cookies.get(TOKEN_KEY); + if (userToken && request.nextUrl.pathname === '/') { + return NextResponse.redirect(new URL('/mydashboard', request.url)); + } + if (!userToken) { return NextResponse.redirect(new URL('/login', request.url)); } @@ -14,6 +18,7 @@ export function middleware(request: NextRequest) { // 아래에서 시작하는 경로에서만 미들웨어 제한 export const config = { matcher: [ + '/', '/dashboard/:path*', '/mypage', '/mydashboard/:path*', diff --git a/src/store/dashboardStore.ts b/src/store/dashboardStore.ts index c9f4e38..ccdcd91 100644 --- a/src/store/dashboardStore.ts +++ b/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', diff --git a/src/store/dashboardTriggerStore.ts b/src/store/dashboardTriggerStore.ts deleted file mode 100644 index 46f30ce..0000000 --- a/src/store/dashboardTriggerStore.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { create } from 'zustand'; - -interface DashboardTriggerStore { - trigger: boolean; - updateTrigger: () => void; -} - -const useDashboardTriggerStore = create((set) => ({ - trigger: false, - updateTrigger: () => set((state) => ({ trigger: !state.trigger })), -})); - -export default useDashboardTriggerStore; diff --git a/src/store/triggerStore.ts b/src/store/triggerStore.ts new file mode 100644 index 0000000..d89e549 --- /dev/null +++ b/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((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;