From bd50dd5bad4e59852bb9fe242469412ffa80c611 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Sun, 30 Mar 2025 19:24:21 +0900 Subject: [PATCH 1/6] feat: Add logout functionality by clearing accessToken --- src/components/layout/navbar/UserMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/navbar/UserMenu.tsx b/src/components/layout/navbar/UserMenu.tsx index fb0aa93..76a1d30 100644 --- a/src/components/layout/navbar/UserMenu.tsx +++ b/src/components/layout/navbar/UserMenu.tsx @@ -40,7 +40,7 @@ export default function UserMenu() { }; const handleLogout = () => { - alert("로그아웃"); // 로그아웃 API 요청 넣기 + localStorage.removeItem("accessToken"); router.push(ROUTE.HOME); }; From e483b0c7aefc110708bd97de083e04a922fa7c58 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Sun, 30 Mar 2025 20:02:45 +0900 Subject: [PATCH 2/6] feat: Store accessToken in cookie on login and clear it on logout --- .../dashboard/[dashboardid]/page.tsx | 11 +++++++++-- src/app/(before-login)/(with-navbar)/page.tsx | 13 +++++++++++++ .../(without-navbar)/login/page.tsx | 16 +++++++++++++++- .../(without-navbar)/signup/page.tsx | 15 ++++++++++++++- src/components/layout/navbar/UserMenu.tsx | 1 + 5 files changed, 52 insertions(+), 4 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/page.tsx b/src/app/(after-login)/dashboard/[dashboardid]/page.tsx index a8b6e5b..c58e9e3 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/page.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/page.tsx @@ -1,6 +1,7 @@ import { DashboardColumn } from "@/lib/types"; import { fetchColumnList } from "@/lib/apis/columnsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; +import { cookies } from "next/headers"; +import { redirect } from "next/navigation"; import Column from "./_components/Column"; import AddColumnButton from "./_components/AddColumnButton"; @@ -9,8 +10,14 @@ export default async function Page({ }: { params: { dashboardid: string }; }) { + const accessToken = cookies().get("accessToken")?.value; + + if (!accessToken) { + redirect("/"); + } + const { data } = await fetchColumnList({ - token: TOKEN_1, + token: accessToken, id: params.dashboardid, }); const items: DashboardColumn[] = data; diff --git a/src/app/(before-login)/(with-navbar)/page.tsx b/src/app/(before-login)/(with-navbar)/page.tsx index 6d72a56..a537860 100644 --- a/src/app/(before-login)/(with-navbar)/page.tsx +++ b/src/app/(before-login)/(with-navbar)/page.tsx @@ -8,6 +8,7 @@ import { useIsTablet, } from "@/lib/hooks/useCheckViewport"; import ROUTE from "@/lib/constants/route"; +import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { twMerge } from "tailwind-merge"; import clsx from "clsx"; @@ -27,8 +28,20 @@ export default function Home() { const isTablet = useIsTablet(); const isPC = useIsPC(); + const [isRedirecting, setIsRedirecting] = useState(true); const router = useRouter(); + useEffect(() => { + const accessToken = localStorage.getItem("accessToken"); + if (accessToken) { + router.replace(ROUTE.MYDASHBOARD); + } else { + setIsRedirecting(false); + } + }, []); + + if (isRedirecting) return; + const pointStyle = twMerge( clsx({ "bg-gray-900 rounded-[8px]": true, diff --git a/src/app/(before-login)/(without-navbar)/login/page.tsx b/src/app/(before-login)/(without-navbar)/login/page.tsx index 57565b0..559e6ff 100644 --- a/src/app/(before-login)/(without-navbar)/login/page.tsx +++ b/src/app/(before-login)/(without-navbar)/login/page.tsx @@ -6,12 +6,14 @@ import { AuthLayout } from "@/app/(before-login)/(without-navbar)/layout"; import { loginSchema, LoginFormData } from "@/lib/utils/validationSchema"; import { useAlertStore } from "@/lib/store/useAlertStore"; import { fetchLogin } from "@/lib/apis/authApi"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; +import ROUTE from "@/lib/constants/route"; export default function Page() { const { openAlert } = useAlertStore(); const [isLoading, setIsLoading] = useState(false); + const [isRedirecting, setIsRedirecting] = useState(true); const router = useRouter(); const { @@ -29,6 +31,7 @@ export default function Page() { const response = await fetchLogin(data); setIsLoading(false); localStorage.setItem("accessToken", response.accessToken); + document.cookie = `accessToken=${response.accessToken}; path=/`; openAlert("loginSuccess"); router.push("/mydashboard"); } catch (error: unknown) { @@ -47,6 +50,17 @@ export default function Page() { } }; + useEffect(() => { + const accessToken = localStorage.getItem("accessToken"); + if (accessToken) { + router.replace(ROUTE.MYDASHBOARD); + } else { + setIsRedirecting(false); + } + }, []); + + if (isRedirecting) return; + return ( { + const accessToken = localStorage.getItem("accessToken"); + if (accessToken) { + router.replace(ROUTE.MYDASHBOARD); + } else { + setIsRedirecting(false); + } + }, []); + + if (isRedirecting) return; + return ( { localStorage.removeItem("accessToken"); + document.cookie = "accessToken=; path=/; max-age=0"; router.push(ROUTE.HOME); }; From 80d705090d7780782a85da40446810815db9c598 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Sun, 30 Mar 2025 20:23:01 +0900 Subject: [PATCH 3/6] feat: Add redirect logic based on accessToken presence --- src/app/(after-login)/mypage/page.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx index 8093b20..da1a00c 100644 --- a/src/app/(after-login)/mypage/page.tsx +++ b/src/app/(after-login)/mypage/page.tsx @@ -1,8 +1,16 @@ +import { cookies } from "next/headers"; +import { redirect } from "next/navigation"; import BackButton from "./_components/BackButton"; import PasswordSection from "./_components/PasswordSection"; import ProfileSection from "./_components/ProfileSection"; export default function Page() { + const accessToken = cookies().get("accessToken")?.value; + + if (!accessToken) { + redirect("/"); + } + return (
From 80d6bccc58e65a0a32b0085ba27eef96f816deef Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Sun, 30 Mar 2025 21:27:00 +0900 Subject: [PATCH 4/6] feat: Send requests using accessToken from localStorage or cookies --- .../[dashboardid]/_components/Column.tsx | 4 ++-- .../dashboard/[dashboardid]/layout.tsx | 12 ++++++------ .../dashboard/[dashboardid]/page.tsx | 6 +----- src/app/(after-login)/layout.tsx | 10 +++++++++- src/app/(after-login)/mydashboard/layout.tsx | 6 ++++-- .../mypage/_components/ProfileSection.tsx | 4 ++-- src/app/(after-login)/mypage/layout.tsx | 6 ++++-- src/app/(after-login)/mypage/page.tsx | 8 -------- src/app/(before-login)/(with-navbar)/page.tsx | 14 -------------- .../(without-navbar)/login/page.tsx | 15 +-------------- .../(without-navbar)/signup/page.tsx | 15 +-------------- src/app/(before-login)/layout.tsx | 14 ++++++++++++++ src/components/common/alert/AlertProvider.tsx | 4 ++-- src/components/common/modal/MenuButton.tsx | 4 ++-- src/components/layout/navbar/UserMenu.tsx | 5 ++--- src/components/layout/sidebar/SideMenuList.tsx | 4 ++-- .../modal/add-column/AddColumnModal.tsx | 6 +++--- .../create-dashboard/CreateDashboardModal.tsx | 4 ++-- .../modal/editColumn/EditColumnModal.tsx | 6 +++--- src/components/modal/invite/InviteModal.tsx | 4 ++-- src/components/modal/task-detail/CommentCard.tsx | 6 +++--- src/components/modal/task-detail/CommentList.tsx | 4 ++-- .../modal/task-detail/TaskCommentSection.tsx | 4 ++-- .../modal/task-detail/TaskDetailModal.tsx | 4 ++-- 24 files changed, 71 insertions(+), 98 deletions(-) create mode 100644 src/app/(before-login)/layout.tsx diff --git a/src/app/(after-login)/dashboard/[dashboardid]/_components/Column.tsx b/src/app/(after-login)/dashboard/[dashboardid]/_components/Column.tsx index 8d63a45..574239b 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/_components/Column.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/_components/Column.tsx @@ -4,7 +4,6 @@ import { useEffect, useState, useRef } from "react"; import { useIntersection } from "@/lib/hooks/useIntersection"; import { DashboardColumn, TaskCardList } from "@/lib/types"; import { fetchTaskCardList } from "@/lib/apis/cardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import EditColumnButton from "./EditColumnButton"; import AddTaskButton from "./AddTaskButton"; import TaskCard from "./TaskCard"; @@ -18,6 +17,7 @@ export default function Column({ id, title }: DashboardColumn) { const [isLoading, setIsLoading] = useState(false); const [isLast, setIsLast] = useState(false); const observerRef = useRef(null); + const accessToken = localStorage.getItem("accessToken") ?? ""; const handleLoad = async () => { if (isLoading || isLast) return; @@ -29,7 +29,7 @@ export default function Column({ id, title }: DashboardColumn) { cursorId: nextCursorId, totalCount, } = await fetchTaskCardList({ - token: TOKEN_1, + token: accessToken, size: PAGE_SIZE, cursorId, columnId: id, diff --git a/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx b/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx index 9b6e65e..831e229 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx @@ -2,7 +2,7 @@ import DashboardIdSetter from "./_components/DashboardIdSetter"; import { DashboardDetail } from "@/lib/types"; import { fetchDashboard } from "@/lib/apis/dashboardsApi"; import { fetchDashboardMember } from "@/lib/apis/membersApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; +import { cookies } from "next/headers"; import DashboardMenu from "@/components/layout/navbar/DashboardMenu"; import MemberList from "@/components/layout/navbar/MemberList"; import UserMenu from "@/components/layout/navbar/UserMenu"; @@ -15,17 +15,17 @@ export default async function Layout({ children: React.ReactNode; params?: { dashboardid?: string }; }) { - if (!params?.dashboardid) { - return; - } + const accessToken = cookies().get("accessToken")?.value ?? ""; + + if (!params?.dashboardid) return; const dashboardData: DashboardDetail = await fetchDashboard({ - token: TOKEN_1, + token: accessToken, id: params.dashboardid, }); const memberData = await fetchDashboardMember({ - token: TOKEN_1, + token: accessToken, id: params.dashboardid, }); diff --git a/src/app/(after-login)/dashboard/[dashboardid]/page.tsx b/src/app/(after-login)/dashboard/[dashboardid]/page.tsx index c58e9e3..0f07592 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/page.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/page.tsx @@ -10,11 +10,7 @@ export default async function Page({ }: { params: { dashboardid: string }; }) { - const accessToken = cookies().get("accessToken")?.value; - - if (!accessToken) { - redirect("/"); - } + const accessToken = cookies().get("accessToken")?.value ?? ""; const { data } = await fetchColumnList({ token: accessToken, diff --git a/src/app/(after-login)/layout.tsx b/src/app/(after-login)/layout.tsx index 0fb86c7..0b9aa6a 100644 --- a/src/app/(after-login)/layout.tsx +++ b/src/app/(after-login)/layout.tsx @@ -1,10 +1,18 @@ import { ReactNode } from "react"; +import { cookies } from "next/headers"; +import { redirect } from "next/navigation"; +import ROUTE from "@/lib/constants/route"; import Sidebar from "@/components/layout/sidebar"; - import ModalProvider from "@/components/common/modal/ModalProvider"; import AlertProvider from "@/components/common/alert/AlertProvider"; export default function Layout({ children }: { children: ReactNode }) { + const accessToken = cookies().get("accessToken")?.value; + + if (!accessToken) { + redirect(ROUTE.HOME); + } + return (
diff --git a/src/app/(after-login)/mydashboard/layout.tsx b/src/app/(after-login)/mydashboard/layout.tsx index 4f4437f..46ac965 100644 --- a/src/app/(after-login)/mydashboard/layout.tsx +++ b/src/app/(after-login)/mydashboard/layout.tsx @@ -1,6 +1,6 @@ import { DashboardList } from "@/lib/types"; import { fetchDashboardList } from "@/lib/apis/dashboardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; +import { cookies } from "next/headers"; import DashboardMenu from "@/components/layout/navbar/DashboardMenu"; import UserMenu from "@/components/layout/navbar/UserMenu"; @@ -11,8 +11,10 @@ export default async function Layout({ }: { children: React.ReactNode; }) { + const accessToken = cookies().get("accessToken")?.value ?? ""; + const { dashboards } = await fetchDashboardList({ - token: TOKEN_1, + token: accessToken, page: 1, size: PAGE_SIZE, }); diff --git a/src/app/(after-login)/mypage/_components/ProfileSection.tsx b/src/app/(after-login)/mypage/_components/ProfileSection.tsx index d4444f8..048b91d 100644 --- a/src/app/(after-login)/mypage/_components/ProfileSection.tsx +++ b/src/app/(after-login)/mypage/_components/ProfileSection.tsx @@ -3,18 +3,18 @@ import { useEffect, useState } from "react"; import { UserInfo } from "@/lib/types"; import { fetchUser } from "@/lib/apis/usersApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Button from "@/components/common/button/Button"; import ImageInput from "@/components/common/input/ImageInput"; import Input from "@/components/common/input/Input"; export default function ProfileSection() { const [data, setData] = useState(null); + const accessToken = localStorage.getItem("accessToken") ?? ""; useEffect(() => { const getData = async () => { const res = await fetchUser({ - token: TOKEN_1, + token: accessToken, }); setData(res); }; diff --git a/src/app/(after-login)/mypage/layout.tsx b/src/app/(after-login)/mypage/layout.tsx index b8e4b91..b9dc944 100644 --- a/src/app/(after-login)/mypage/layout.tsx +++ b/src/app/(after-login)/mypage/layout.tsx @@ -1,6 +1,6 @@ import { DashboardList } from "@/lib/types"; import { fetchDashboardList } from "@/lib/apis/dashboardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; +import { cookies } from "next/headers"; import DashboardMenu from "@/components/layout/navbar/DashboardMenu"; import UserMenu from "@/components/layout/navbar/UserMenu"; @@ -11,8 +11,10 @@ export default async function Layout({ }: { children: React.ReactNode; }) { + const accessToken = cookies().get("accessToken")?.value ?? ""; + const { dashboards } = await fetchDashboardList({ - token: TOKEN_1, + token: accessToken, page: 1, size: PAGE_SIZE, }); diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx index da1a00c..8093b20 100644 --- a/src/app/(after-login)/mypage/page.tsx +++ b/src/app/(after-login)/mypage/page.tsx @@ -1,16 +1,8 @@ -import { cookies } from "next/headers"; -import { redirect } from "next/navigation"; import BackButton from "./_components/BackButton"; import PasswordSection from "./_components/PasswordSection"; import ProfileSection from "./_components/ProfileSection"; export default function Page() { - const accessToken = cookies().get("accessToken")?.value; - - if (!accessToken) { - redirect("/"); - } - return (
diff --git a/src/app/(before-login)/(with-navbar)/page.tsx b/src/app/(before-login)/(with-navbar)/page.tsx index a537860..e6e2a87 100644 --- a/src/app/(before-login)/(with-navbar)/page.tsx +++ b/src/app/(before-login)/(with-navbar)/page.tsx @@ -8,7 +8,6 @@ import { useIsTablet, } from "@/lib/hooks/useCheckViewport"; import ROUTE from "@/lib/constants/route"; -import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { twMerge } from "tailwind-merge"; import clsx from "clsx"; @@ -27,21 +26,8 @@ export default function Home() { const isMobile = useIsMobile(); const isTablet = useIsTablet(); const isPC = useIsPC(); - - const [isRedirecting, setIsRedirecting] = useState(true); const router = useRouter(); - useEffect(() => { - const accessToken = localStorage.getItem("accessToken"); - if (accessToken) { - router.replace(ROUTE.MYDASHBOARD); - } else { - setIsRedirecting(false); - } - }, []); - - if (isRedirecting) return; - const pointStyle = twMerge( clsx({ "bg-gray-900 rounded-[8px]": true, diff --git a/src/app/(before-login)/(without-navbar)/login/page.tsx b/src/app/(before-login)/(without-navbar)/login/page.tsx index 559e6ff..030d169 100644 --- a/src/app/(before-login)/(without-navbar)/login/page.tsx +++ b/src/app/(before-login)/(without-navbar)/login/page.tsx @@ -6,14 +6,12 @@ import { AuthLayout } from "@/app/(before-login)/(without-navbar)/layout"; import { loginSchema, LoginFormData } from "@/lib/utils/validationSchema"; import { useAlertStore } from "@/lib/store/useAlertStore"; import { fetchLogin } from "@/lib/apis/authApi"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useRouter } from "next/navigation"; -import ROUTE from "@/lib/constants/route"; export default function Page() { const { openAlert } = useAlertStore(); const [isLoading, setIsLoading] = useState(false); - const [isRedirecting, setIsRedirecting] = useState(true); const router = useRouter(); const { @@ -50,17 +48,6 @@ export default function Page() { } }; - useEffect(() => { - const accessToken = localStorage.getItem("accessToken"); - if (accessToken) { - router.replace(ROUTE.MYDASHBOARD); - } else { - setIsRedirecting(false); - } - }, []); - - if (isRedirecting) return; - return ( { - const accessToken = localStorage.getItem("accessToken"); - if (accessToken) { - router.replace(ROUTE.MYDASHBOARD); - } else { - setIsRedirecting(false); - } - }, []); - - if (isRedirecting) return; - return ( {children}
; +} diff --git a/src/components/common/alert/AlertProvider.tsx b/src/components/common/alert/AlertProvider.tsx index d216bda..8a27103 100644 --- a/src/components/common/alert/AlertProvider.tsx +++ b/src/components/common/alert/AlertProvider.tsx @@ -4,7 +4,6 @@ import { useRouter } from "next/navigation"; import { useAlertStore } from "@/lib/store/useAlertStore"; import { useColumnStore } from "@/lib/store/useColumnStore"; import { deleteColumn } from "@/lib/apis/columnsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Alert from "@/components/common/alert/Alert"; import ROUTE from "@/lib/constants/route"; @@ -12,10 +11,11 @@ export default function AlertProvider() { const { currentAlert } = useAlertStore(); const { selectedColumnId } = useColumnStore(); const router = useRouter(); + const accessToken = localStorage.getItem("accessToken") ?? ""; const handleDeleteClick = async () => { deleteColumn({ - token: TOKEN_1, + token: accessToken, columnId: Number(selectedColumnId), }); diff --git a/src/components/common/modal/MenuButton.tsx b/src/components/common/modal/MenuButton.tsx index 9c0103a..6bff456 100644 --- a/src/components/common/modal/MenuButton.tsx +++ b/src/components/common/modal/MenuButton.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; import { deleteCard } from "@/lib/apis/cardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import { useModalStore } from "@/lib/store/useModalStore"; import Image from "next/image"; import MenuButtonIcon from "../../../../public/icon/menu_icon.svg"; @@ -10,6 +9,7 @@ export default function MenuButton() { const [isOpen, setIsOpen] = useState(false); const { openModal, closeModal } = useModalStore(); const { selectedTaskId } = useTaskStore(); + const accessToken = localStorage.getItem("accessToken") ?? ""; const openModifyModal = () => { closeModal(); @@ -20,7 +20,7 @@ export default function MenuButton() { if (!selectedTaskId) return; await deleteCard({ - token: TOKEN_1, + token: accessToken, cardId: selectedTaskId, }); diff --git a/src/components/layout/navbar/UserMenu.tsx b/src/components/layout/navbar/UserMenu.tsx index 01ff92e..16c605e 100644 --- a/src/components/layout/navbar/UserMenu.tsx +++ b/src/components/layout/navbar/UserMenu.tsx @@ -5,24 +5,23 @@ import { UserInfo } from "@/lib/types"; import { useRouter } from "next/navigation"; import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { fetchUser } from "@/lib/apis/usersApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import { useIsMobile } from "@/lib/hooks/useCheckViewport"; import UserIcon from "@/components/common/user-icon/UserIcon"; import ROUTE from "@/lib/constants/route"; export default function UserMenu() { const [data, setData] = useState(null); - const [isOpen, setIsOpen] = useState(false); const isMobile = useIsMobile(); const router = useRouter(); + const accessToken = localStorage.getItem("accessToken") ?? ""; const setDashboardId = useDashboardStore((state) => state.setDashboardId); useEffect(() => { const getData = async () => { const res = await fetchUser({ - token: TOKEN_1, + token: accessToken, }); setData(res); }; diff --git a/src/components/layout/sidebar/SideMenuList.tsx b/src/components/layout/sidebar/SideMenuList.tsx index 3ed3f90..829694f 100644 --- a/src/components/layout/sidebar/SideMenuList.tsx +++ b/src/components/layout/sidebar/SideMenuList.tsx @@ -4,7 +4,6 @@ import { useEffect, useState, useRef } from "react"; import { useIntersection } from "@/lib/hooks/useIntersection"; import { DashboardList } from "@/lib/types"; import { fetchDashboardList } from "@/lib/apis/dashboardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import SideMenuItem from "./SideMenuItem"; const PAGE_SIZE = 15; @@ -15,6 +14,7 @@ export default function SideMenuList() { const [isLoading, setIsLoading] = useState(false); const [isLast, setIsLast] = useState(false); const observerRef = useRef(null); + const accessToken = localStorage.getItem("accessToken") ?? ""; const handleLoad = async () => { if (isLoading || isLast) return; @@ -22,7 +22,7 @@ export default function SideMenuList() { try { const { dashboards: newDashboards } = await fetchDashboardList({ - token: TOKEN_1, + token: accessToken, size: PAGE_SIZE, page, }); diff --git a/src/components/modal/add-column/AddColumnModal.tsx b/src/components/modal/add-column/AddColumnModal.tsx index 9fac3b6..40ee732 100644 --- a/src/components/modal/add-column/AddColumnModal.tsx +++ b/src/components/modal/add-column/AddColumnModal.tsx @@ -3,7 +3,6 @@ import { useRouter } from "next/navigation"; import { DashboardColumn } from "@/lib/types"; import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { fetchColumnList, postColumn } from "@/lib/apis/columnsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Modal from "@/components/common/modal/Modal"; import Input from "@/components/common/input/Input"; @@ -19,13 +18,14 @@ export default function CreateDashboardModal() { const [isFormValid, setIsFormValid] = useState(false); const { dashboardId } = useDashboardStore(); const router = useRouter(); + const accessToken = localStorage.getItem("accessToken") ?? ""; useEffect(() => { if (!dashboardId) return; const getData = async () => { const res = await fetchColumnList({ - token: TOKEN_1, + token: accessToken, id: dashboardId, }); setColumnList(res.data); @@ -53,7 +53,7 @@ export default function CreateDashboardModal() { if (!dashboardId) return; await postColumn({ - token: TOKEN_1, + token: accessToken, title: inputValue, dashboardId: Number(dashboardId), }); diff --git a/src/components/modal/create-dashboard/CreateDashboardModal.tsx b/src/components/modal/create-dashboard/CreateDashboardModal.tsx index 8aa4404..9cf89ea 100644 --- a/src/components/modal/create-dashboard/CreateDashboardModal.tsx +++ b/src/components/modal/create-dashboard/CreateDashboardModal.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { postDashboard } from "@/lib/apis/dashboardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Modal from "@/components/common/modal/Modal"; import Input from "@/components/common/input/Input"; import ColorPalette, { @@ -13,6 +12,7 @@ export default function CreateDashboardModal() { const [selectedColor, setSelectedColor] = useState(""); const [isFormValid, setIsFormValid] = useState(false); const router = useRouter(); + const accessToken = localStorage.getItem("accessToken") ?? ""; const onColorSelect = (color: ColorCode | "") => { setSelectedColor(() => { @@ -32,7 +32,7 @@ export default function CreateDashboardModal() { const createDashboard = async () => { const res = await postDashboard({ - token: TOKEN_1, + token: accessToken, title: dashboardName, color: selectedColor, }); diff --git a/src/components/modal/editColumn/EditColumnModal.tsx b/src/components/modal/editColumn/EditColumnModal.tsx index 44f0496..8fdf3f9 100644 --- a/src/components/modal/editColumn/EditColumnModal.tsx +++ b/src/components/modal/editColumn/EditColumnModal.tsx @@ -4,7 +4,6 @@ import { DashboardColumn } from "@/lib/types"; import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { useColumnStore } from "@/lib/store/useColumnStore"; import { fetchColumnList, putColumn } from "@/lib/apis/columnsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Modal from "@/components/common/modal/Modal"; import Input from "@/components/common/input/Input"; @@ -21,13 +20,14 @@ export default function CreateDashboardModal() { const [isFormValid, setIsFormValid] = useState(false); const { dashboardId } = useDashboardStore(); const router = useRouter(); + const accessToken = localStorage.getItem("accessToken") ?? ""; useEffect(() => { if (!dashboardId) return; const getData = async () => { const res = await fetchColumnList({ - token: TOKEN_1, + token: accessToken, id: dashboardId, }); setColumnList(res.data); @@ -57,7 +57,7 @@ export default function CreateDashboardModal() { if (!selectedColumnId) return; await putColumn({ - token: TOKEN_1, + token: accessToken, title: inputValue, columnId: Number(selectedColumnId), }); diff --git a/src/components/modal/invite/InviteModal.tsx b/src/components/modal/invite/InviteModal.tsx index bd1d769..a037ec4 100644 --- a/src/components/modal/invite/InviteModal.tsx +++ b/src/components/modal/invite/InviteModal.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { postInvitation } from "@/lib/apis/dashboardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import { isValidEmail } from "@/lib/utils/validationUtils"; import Modal from "@/components/common/modal/Modal"; import Input from "@/components/common/input/Input"; @@ -13,6 +12,7 @@ export default function CreateDashboardModal() { const [isFormValid, setIsFormValid] = useState(false); const { dashboardId } = useDashboardStore(); const router = useRouter(); + const accessToken = localStorage.getItem("accessToken") ?? ""; // 이메일 유효성 검사는 나중에 아름님이 하시는 걸로 수정 예정 useEffect(() => { @@ -33,7 +33,7 @@ export default function CreateDashboardModal() { if (!dashboardId) return; postInvitation({ - token: TOKEN_1, + token: accessToken, id: Number(dashboardId), email: inputValue, }); diff --git a/src/components/modal/task-detail/CommentCard.tsx b/src/components/modal/task-detail/CommentCard.tsx index d7c79ed..3bf651c 100644 --- a/src/components/modal/task-detail/CommentCard.tsx +++ b/src/components/modal/task-detail/CommentCard.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { Comment } from "@/lib/types"; import { putComment, deleteComment } from "@/lib/apis/commentsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import { useIsMobile } from "@/lib/hooks/useCheckViewport"; import { formatDate } from "@/lib/utils/dateUtils"; import UserIcon from "@/components/common/user-icon/UserIcon"; @@ -24,6 +23,7 @@ export default function CommentCard({ const [isFormValid, setIsFormValid] = useState(false); const isMobile = useIsMobile(); const date = formatDate(createdAt, true); + const accessToken = localStorage.getItem("accessToken") ?? ""; useEffect(() => { const trimmedValue = inputValue.trim(); @@ -40,7 +40,7 @@ export default function CommentCard({ const handleEditComment = async () => { await putComment({ - token: TOKEN_1, + token: accessToken, content: inputValue.trim(), commentId: id, }); @@ -51,7 +51,7 @@ export default function CommentCard({ const handleDeleteComment = () => { deleteComment({ - token: TOKEN_1, + token: accessToken, commentId: id, }); diff --git a/src/components/modal/task-detail/CommentList.tsx b/src/components/modal/task-detail/CommentList.tsx index 238cc4d..76558a4 100644 --- a/src/components/modal/task-detail/CommentList.tsx +++ b/src/components/modal/task-detail/CommentList.tsx @@ -2,7 +2,6 @@ import { useEffect, useState, useRef } from "react"; import { useIntersection } from "@/lib/hooks/useIntersection"; import { Comment } from "@/lib/types"; import { fetchCommentList } from "@/lib/apis/commentsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import CommentCard from "./CommentCard"; const PAGE_SIZE = 3; @@ -19,6 +18,7 @@ export default function CommentList({ const [isLoading, setIsLoading] = useState(false); const [isLast, setIsLast] = useState(false); const observerRef = useRef(null); + const accessToken = localStorage.getItem("accessToken") ?? ""; const handleLoad = async () => { if (isLoading || isLast) return; @@ -27,7 +27,7 @@ export default function CommentList({ try { const { comments: newComments, cursorId: nextCursorId } = await fetchCommentList({ - token: TOKEN_1, + token: accessToken, size: PAGE_SIZE, cursorId, cardId: id, diff --git a/src/components/modal/task-detail/TaskCommentSection.tsx b/src/components/modal/task-detail/TaskCommentSection.tsx index 8a8c544..3397b22 100644 --- a/src/components/modal/task-detail/TaskCommentSection.tsx +++ b/src/components/modal/task-detail/TaskCommentSection.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { postComment } from "@/lib/apis/commentsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Button from "@/components/common/button/Button"; import Textarea from "@/components/common/textarea/Textarea"; import CommentList from "./CommentList"; @@ -17,6 +16,7 @@ export default function TaskCommentSection({ const [isFormValid, setIsFormValid] = useState(false); const [commentListKey, setCommentListKey] = useState(0); const { dashboardId } = useDashboardStore(); + const accessToken = localStorage.getItem("accessToken") ?? ""; useEffect(() => { const trimmedValue = inputValue.trim(); @@ -31,7 +31,7 @@ export default function TaskCommentSection({ if (!dashboardId) return; await postComment({ - token: TOKEN_1, + token: accessToken, content: inputValue.trim(), cardId: cardId, columnId: columnId, diff --git a/src/components/modal/task-detail/TaskDetailModal.tsx b/src/components/modal/task-detail/TaskDetailModal.tsx index 71269de..ec524cd 100644 --- a/src/components/modal/task-detail/TaskDetailModal.tsx +++ b/src/components/modal/task-detail/TaskDetailModal.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; import { TaskCardDetail } from "@/lib/types"; import { useTaskStore } from "@/lib/store/useTaskStore"; import { fetchTaskCardDetail } from "@/lib/apis/cardsApi"; -import { TOKEN_1 } from "@/lib/constants/tokens"; import Modal from "@/components/common/modal/Modal"; import TaskInfoSection from "./TaskInfoSection"; import TaskContentSection from "./TaskContentSection"; @@ -12,6 +11,7 @@ export default function TaskDetailModal() { const { selectedTaskId } = useTaskStore(); const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(false); + const accessToken = localStorage.getItem("accessToken") ?? ""; const handleLoad = async () => { if (!selectedTaskId) return; @@ -20,7 +20,7 @@ export default function TaskDetailModal() { try { const res = await fetchTaskCardDetail({ - token: TOKEN_1, + token: accessToken, id: selectedTaskId, }); setData(res); From 58b07e48e0e0f225e5b909bdf38fb758b63eef1e Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Sun, 30 Mar 2025 21:28:00 +0900 Subject: [PATCH 5/6] chore: Remove unused code --- src/app/(after-login)/dashboard/[dashboardid]/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/page.tsx b/src/app/(after-login)/dashboard/[dashboardid]/page.tsx index 0f07592..84c1388 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/page.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/page.tsx @@ -1,7 +1,6 @@ import { DashboardColumn } from "@/lib/types"; import { fetchColumnList } from "@/lib/apis/columnsApi"; import { cookies } from "next/headers"; -import { redirect } from "next/navigation"; import Column from "./_components/Column"; import AddColumnButton from "./_components/AddColumnButton"; From f12509de3bc83af7f0223a9116ea0f7ba839de8b Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Sun, 30 Mar 2025 21:43:01 +0900 Subject: [PATCH 6/6] fix: Update query parameters in fetchDashboardMember request --- .../dashboard/[dashboardid]/layout.tsx | 2 ++ src/lib/apis/membersApi.ts | 26 ++++++++++++------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx b/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx index 831e229..fd0c438 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/layout.tsx @@ -26,6 +26,8 @@ export default async function Layout({ const memberData = await fetchDashboardMember({ token: accessToken, + page: 1, + size: null, id: params.dashboardid, }); diff --git a/src/lib/apis/membersApi.ts b/src/lib/apis/membersApi.ts index 85c6ec3..c62b11b 100644 --- a/src/lib/apis/membersApi.ts +++ b/src/lib/apis/membersApi.ts @@ -2,21 +2,27 @@ import { BASE_URL } from "@/lib/constants/urls"; export async function fetchDashboardMember({ token, + page, + size, id, }: { token: string; + page: number; + size: number | null; id: string; }) { - const res = await fetch( - `${BASE_URL}/members?page=1&size=20&dashboardId=${id}`, - { - headers: { - Accept: "application/json", - Authorization: `Bearer ${token}`, - }, - cache: "no-store", - } - ); + let query = `page=${page}&dashboardId=${id}`; + if (size !== null) { + query += `&size=${size}`; + } + + const res = await fetch(`${BASE_URL}/members?${query}`, { + headers: { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }, + cache: "no-store", + }); return res.json(); }