feat: #67/네비게이션 바 유저 메뉴 로그아웃 api 연결 & 로그인/로그아웃 시 리디렉트 & 실제 액세스 토큰으로 리퀘스트

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<HTMLDivElement | null>(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,

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,19 @@ 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,
+    page: 1,
+    size: null,
     id: params.dashboardid,
   });
 

src/app/(after-login)/dashboard/[dashboardid]/page.tsx

@@ -1,6 +1,6 @@
 import { DashboardColumn } from "@/lib/types";
 import { fetchColumnList } from "@/lib/apis/columnsApi";
-import { TOKEN_1 } from "@/lib/constants/tokens";
+import { cookies } from "next/headers";
 import Column from "./_components/Column";
 import AddColumnButton from "./_components/AddColumnButton";
 
@@ -9,8 +9,10 @@ export default async function Page({
 }: {
   params: { dashboardid: string };
 }) {
+  const accessToken = cookies().get("accessToken")?.value ?? "";
+
   const { data } = await fetchColumnList({
-    token: TOKEN_1,
+    token: accessToken,
     id: params.dashboardid,
   });
   const items: DashboardColumn[] = data;

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 (
     <div className="flex h-screen">
       <div className="w-[67px] px-[14px] py-5 border-r border-gray-400 tablet:w-[160px] tablet:px-[13px] pc:w-[300px] pc:px-3">

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,
   });

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<UserInfo | null>(null);
+  const accessToken = localStorage.getItem("accessToken") ?? "";
 
   useEffect(() => {
     const getData = async () => {
       const res = await fetchUser({
-        token: TOKEN_1,
+        token: accessToken,
       });
       setData(res);
     };

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,
   });

src/app/(before-login)/(with-navbar)/page.tsx

@@ -26,7 +26,6 @@ export default function Home() {
   const isMobile = useIsMobile();
   const isTablet = useIsTablet();
   const isPC = useIsPC();
-
   const router = useRouter();
 
   const pointStyle = twMerge(

src/app/(before-login)/(without-navbar)/login/page.tsx

@@ -29,6 +29,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) {

src/app/(before-login)/layout.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import ROUTE from "@/lib/constants/route";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const accessToken = cookies().get("accessToken")?.value;
+
+  if (accessToken) {
+    redirect(ROUTE.MYDASHBOARD);
+  }
+
+  return <div>{children}</div>;
+}

src/components/common/alert/AlertProvider.tsx

@@ -4,18 +4,18 @@ 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";
 
 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),
     });
 

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,
     });
 

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<UserInfo | null>(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);
     };
@@ -40,7 +39,8 @@ export default function UserMenu() {
   };
 
   const handleLogout = () => {
-    alert("로그아웃"); // 로그아웃 API 요청 넣기
+    localStorage.removeItem("accessToken");
+    document.cookie = "accessToken=; path=/; max-age=0";
     router.push(ROUTE.HOME);
   };
 

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,14 +14,15 @@ export default function SideMenuList() {
   const [isLoading, setIsLoading] = useState(false);
   const [isLast, setIsLast] = useState(false);
   const observerRef = useRef<HTMLDivElement | null>(null);
+  const accessToken = localStorage.getItem("accessToken") ?? "";
 
   const handleLoad = async () => {
     if (isLoading || isLast) return;
     setIsLoading(true);
 
     try {
       const { dashboards: newDashboards } = await fetchDashboardList({
-        token: TOKEN_1,
+        token: accessToken,
         size: PAGE_SIZE,
         page,
       });

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),
     });

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<ColorCode | "">("");
   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,
     });

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),
     });