From f80563beb3efb7edbddf23d3b6d1981a8e71cef3 Mon Sep 17 00:00:00 2001
From: ejinn1 <ejinn1@naver.com>
Date: Wed, 5 Mar 2025 00:44:42 +0900
Subject: [PATCH 1/6] Refactor: add function to inject token from server

---
 src/apis/services/httpMethod.ts |  7 +++++--
 src/lib/axiosInstance.ts        | 28 ++++++++++++++++++----------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/apis/services/httpMethod.ts b/src/apis/services/httpMethod.ts
index b9421d1e..26de6888 100644
--- a/src/apis/services/httpMethod.ts
+++ b/src/apis/services/httpMethod.ts
@@ -1,7 +1,10 @@
-import axiosInstance from '@/lib/axiosInstance';
+import axiosInstance, { setAuthToken } from '@/lib/axiosInstance';
 
-export async function GET<T>(url: string): Promise<T> {
+export async function GET<T>(url: string, token?: string): Promise<T> {
   try {
+    if (token) {
+      setAuthToken(token);
+    }
     const response = await axiosInstance.get(url);
     return response.data;
   } catch (error) {
diff --git a/src/lib/axiosInstance.ts b/src/lib/axiosInstance.ts
index 0a357d6a..8cc9ee66 100644
--- a/src/lib/axiosInstance.ts
+++ b/src/lib/axiosInstance.ts
@@ -9,19 +9,26 @@ const axiosInstance = axios.create({
   },
 });
 
+export const setAuthToken = (token: string) => {
+  if (token) {
+    axiosInstance.defaults.headers['token'] = token;
+  }
+};
+
 axiosInstance.interceptors.request.use(
   (config) => {
-    const getCookie = (name: string) => {
-      const matches = document.cookie.match(
-        new RegExp(`(^|; )${name}=([^;]*)`),
-      );
-      return matches ? decodeURIComponent(matches[2]) : null;
-    };
-
-    const token = getCookie('token'); // 'token' 쿠키 값을 가져옴
+    if (typeof window !== 'undefined') {
+      const getCookie = (name: string) => {
+        const matches = document.cookie.match(
+          new RegExp(`(^|; )${name}=([^;]*)`),
+        );
+        return matches ? decodeURIComponent(matches[2]) : null;
+      };
 
-    if (token) {
-      config.headers['token'] = token; // 헤더에 추가
+      const token = getCookie('token');
+      if (token) {
+        config.headers['token'] = token;
+      }
     }
 
     return config;
@@ -30,4 +37,5 @@ axiosInstance.interceptors.request.use(
     return Promise.reject(error);
   },
 );
+
 export default axiosInstance;

From 61f4426cbc2fe82830fadb46b467f0a707653fbc Mon Sep 17 00:00:00 2001
From: ejinn1 <ejinn1@naver.com>
Date: Wed, 5 Mar 2025 00:47:18 +0900
Subject: [PATCH 2/6] Feat: add suspense for improved loading state handling

---
 src/app/(route)/dashboard/page.tsx            | 25 ++++++++++++++++---
 .../Dashboard/RecentTodos/index.tsx           | 11 +++-----
 .../apis/Dashboard/useRecentTodosQuery.ts     | 18 ++++++++-----
 .../apis/Dashboard/useTodayProgressQuery.ts   | 19 ++++++++------
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/app/(route)/dashboard/page.tsx b/src/app/(route)/dashboard/page.tsx
index 774e0849..30d28d89 100644
--- a/src/app/(route)/dashboard/page.tsx
+++ b/src/app/(route)/dashboard/page.tsx
@@ -1,18 +1,37 @@
+import { Suspense } from 'react';
+
+import { cookies } from 'next/headers';
+
 import { Header } from '@/components/common/Header';
 import { PageContainer } from '@/components/common/PageContainer';
 import { Follower } from '@/components/Dashboard/Follower';
 import { GoalList } from '@/components/Dashboard/GoalList';
 import { MyProgress } from '@/components/Dashboard/MyProgress';
 import { RecentTodos } from '@/components/Dashboard/RecentTodos';
+import { TodoListSkeleton } from '@/components/Skeletons/TodoListSkeleton';
+import { recentTodosOptions } from '@/hooks/apis/Dashboard/useRecentTodosQuery';
+import { todayProgressOptions } from '@/hooks/apis/Dashboard/useTodayProgressQuery';
+import { ServerFetchBoundary } from '@/lib/query/ServerFetchBoundary';
+
+export default async function DashBoardPage() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('token')?.value || '';
+  const serverFetchOptions = [
+    todayProgressOptions(token),
+    recentTodosOptions(token),
+  ];
 
-export default function DashBoardPage() {
   return (
     <>
       <Header title="대시보드" />
       <PageContainer>
         <Follower />
-        <RecentTodos />
-        <MyProgress />
+        <Suspense fallback={<TodoListSkeleton />}>
+          <ServerFetchBoundary fetchOptions={serverFetchOptions}>
+            <RecentTodos />
+            <MyProgress />
+          </ServerFetchBoundary>
+        </Suspense>
         <GoalList />
       </PageContainer>
     </>
diff --git a/src/components/Dashboard/RecentTodos/index.tsx b/src/components/Dashboard/RecentTodos/index.tsx
index 4b92ba18..97e99a3e 100644
--- a/src/components/Dashboard/RecentTodos/index.tsx
+++ b/src/components/Dashboard/RecentTodos/index.tsx
@@ -5,7 +5,6 @@ import { FaAngleRight } from 'react-icons/fa6';
 import Link from 'next/link';
 
 import { DashboardItemContainer } from '@/components/Dashboard/DashboardItemContainer';
-import { TodoListSkeleton } from '@/components/Skeletons/TodoListSkeleton';
 import { Button } from '@/components/common/Button/Button';
 import { Card } from '@/components/common/Card';
 import { NoDataText } from '@/components/common/NoDataText';
@@ -18,7 +17,7 @@ import { useSidebarStore } from '@/store/useSidebarStore';
 import { useTodoModalStore } from '@/store/useTodoModalStore';
 
 export const RecentTodos = () => {
-  const { todos, isLoading } = useRecentTodosQuery();
+  const { todos } = useRecentTodosQuery();
   const { goals } = useGoalsQuery();
 
   const { open: openModal } = useTodoModalStore();
@@ -36,9 +35,7 @@ export const RecentTodos = () => {
         모두 보기 <FaAngleRight className="ml-8" />
       </Link>
 
-      {isLoading && <TodoListSkeleton />}
-
-      {!isLoading && !hasGoals && (
+      {!hasGoals && (
         <Card>
           <NoDataText text={NO_DATA_MESSAGES.NO_TODO_AND_GOAL} />
           <Button onClick={openSidebar} size="medium">
@@ -47,7 +44,7 @@ export const RecentTodos = () => {
         </Card>
       )}
 
-      {!isLoading && hasGoals && !hasTodos && (
+      {hasGoals && !hasTodos && (
         <Card>
           <NoDataText text={NO_DATA_MESSAGES.NO_TODO} />
           <Button onClick={() => openModal('생성')} size="medium">
@@ -56,7 +53,7 @@ export const RecentTodos = () => {
         </Card>
       )}
 
-      {!isLoading && hasGoals && hasTodos && (
+      {hasGoals && hasTodos && (
         <ul>
           {todos.map((todo) => (
             <BasicTodoItem
diff --git a/src/hooks/apis/Dashboard/useRecentTodosQuery.ts b/src/hooks/apis/Dashboard/useRecentTodosQuery.ts
index f6b6e583..79b9f6cc 100644
--- a/src/hooks/apis/Dashboard/useRecentTodosQuery.ts
+++ b/src/hooks/apis/Dashboard/useRecentTodosQuery.ts
@@ -1,24 +1,30 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import {
+  useSuspenseQuery,
+  UseSuspenseQueryOptions,
+} from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { getQueryClient } from '@/lib/query/getQueryClient';
 import { RecentTodosResponse } from '@/types/Dashboard';
 
-export const recentTodosOptions = (): UseQueryOptions<
-  RecentTodosResponse,
-  AxiosError
-> => ({
+export const recentTodosOptions = (
+  token?: string,
+): UseSuspenseQueryOptions<RecentTodosResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.RECENT_TODOS],
   queryFn: () =>
     GET<RecentTodosResponse>(
       `${API_ENDPOINTS.TODOS.GET_ALL}?lastTodoId=0&size=3`,
+      token,
     ),
+  initialData: () =>
+    getQueryClient().getQueryData([QUERY_KEYS.RECENT_TODOS]) || undefined,
 });
 
 export const useRecentTodosQuery = () => {
-  const { data, ...etc } = useQuery(recentTodosOptions());
+  const { data, ...etc } = useSuspenseQuery(recentTodosOptions());
   const todos = data?.data.content ?? [];
 
   return { todos, ...etc };
diff --git a/src/hooks/apis/Dashboard/useTodayProgressQuery.ts b/src/hooks/apis/Dashboard/useTodayProgressQuery.ts
index 5230a291..a2dd48e7 100644
--- a/src/hooks/apis/Dashboard/useTodayProgressQuery.ts
+++ b/src/hooks/apis/Dashboard/useTodayProgressQuery.ts
@@ -1,22 +1,27 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import {
+  useSuspenseQuery,
+  UseSuspenseQueryOptions,
+} from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { getQueryClient } from '@/lib/query/getQueryClient';
 import { TodayProgressResponse } from '@/types/Dashboard';
 
-export const todayProgressOptions = (): UseQueryOptions<
-  TodayProgressResponse,
-  AxiosError
-> => ({
+export const todayProgressOptions = (
+  token?: string,
+): UseSuspenseQueryOptions<TodayProgressResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.TODAY_PROGRESS],
   queryFn: () =>
-    GET<TodayProgressResponse>(API_ENDPOINTS.TODOS.GET_TODAY_PROGRESS),
+    GET<TodayProgressResponse>(API_ENDPOINTS.TODOS.GET_TODAY_PROGRESS, token),
+  initialData: () =>
+    getQueryClient().getQueryData([QUERY_KEYS.TODAY_PROGRESS]) || undefined,
 });
 
 export const useTodayProgressQuery = () => {
-  const { data, ...etc } = useQuery(todayProgressOptions());
+  const { data, ...etc } = useSuspenseQuery(todayProgressOptions());
   const progress = data?.data.progress ?? 0;
 
   return { progress, ...etc };

From 8095b4161dfa5edb9c9cfaab56f2f106bc2bfdb5 Mon Sep 17 00:00:00 2001
From: ejinn1 <ejinn1@naver.com>
Date: Wed, 5 Mar 2025 00:48:48 +0900
Subject: [PATCH 3/6] Feat: fetch goals api using server fetch boundary

---
 src/app/(route)/layout.tsx      | 18 +++++++++++++++---
 src/hooks/apis/useGoalsQuery.ts | 17 ++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/app/(route)/layout.tsx b/src/app/(route)/layout.tsx
index 0571f405..6cd9e523 100644
--- a/src/app/(route)/layout.tsx
+++ b/src/app/(route)/layout.tsx
@@ -1,17 +1,29 @@
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 
 import dynamic from 'next/dynamic';
+import { cookies } from 'next/headers';
+
+import { goalsOptions } from '@/hooks/apis/useGoalsQuery';
+import { ServerFetchBoundary } from '@/lib/query/ServerFetchBoundary';
 
 const Sidebar = dynamic(() => import('@/components/Sidebar'));
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('token')?.value || '';
+  const serverFetchOptions = [goalsOptions(token)];
+
   return (
     <div className="flex">
-      <Sidebar />
+      <Suspense fallback={<>로딩중</>}>
+        <ServerFetchBoundary fetchOptions={serverFetchOptions}>
+          <Sidebar />
+        </ServerFetchBoundary>
+      </Suspense>
       {children}
     </div>
   );
diff --git a/src/hooks/apis/useGoalsQuery.ts b/src/hooks/apis/useGoalsQuery.ts
index b8061eaf..6b3082e2 100644
--- a/src/hooks/apis/useGoalsQuery.ts
+++ b/src/hooks/apis/useGoalsQuery.ts
@@ -1,18 +1,25 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import {
+  useSuspenseQuery,
+  UseSuspenseQueryOptions,
+} from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { getQueryClient } from '@/lib/query/getQueryClient';
 import { GoalsResponse } from '@/types/Goals';
 
-const goalsOptions: UseQueryOptions<GoalsResponse, AxiosError> = {
+export const goalsOptions = (
+  token?: string,
+): UseSuspenseQueryOptions<GoalsResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.GOALS],
-  queryFn: () => GET<GoalsResponse>(API_ENDPOINTS.GOAL.GOALS),
-};
+  queryFn: () => GET<GoalsResponse>(API_ENDPOINTS.GOAL.GOALS, token),
+  initialData: getQueryClient().getQueryData([QUERY_KEYS.GOALS]),
+});
 
 export const useGoalsQuery = () => {
-  const { data, ...etc } = useQuery(goalsOptions);
+  const { data, ...etc } = useSuspenseQuery(goalsOptions());
   const goals = data?.data ?? [];
 
   return { goals, ...etc };

From 1101a3e0a56b8e0aa8b74b8408bbf8c31f256073 Mon Sep 17 00:00:00 2001
From: ejinn1 <ejinn1@naver.com>
Date: Thu, 6 Mar 2025 16:08:43 +0900
Subject: [PATCH 4/6] Refactor: remove suspense from myProgress and use
 useQuery

---
 src/app/(route)/dashboard/page.tsx                |  9 ++-------
 src/hooks/apis/Dashboard/useTodayProgressQuery.ts | 12 +++---------
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/app/(route)/dashboard/page.tsx b/src/app/(route)/dashboard/page.tsx
index 30d28d89..35afaae0 100644
--- a/src/app/(route)/dashboard/page.tsx
+++ b/src/app/(route)/dashboard/page.tsx
@@ -10,16 +10,11 @@ import { MyProgress } from '@/components/Dashboard/MyProgress';
 import { RecentTodos } from '@/components/Dashboard/RecentTodos';
 import { TodoListSkeleton } from '@/components/Skeletons/TodoListSkeleton';
 import { recentTodosOptions } from '@/hooks/apis/Dashboard/useRecentTodosQuery';
-import { todayProgressOptions } from '@/hooks/apis/Dashboard/useTodayProgressQuery';
 import { ServerFetchBoundary } from '@/lib/query/ServerFetchBoundary';
 
 export default async function DashBoardPage() {
   const cookieStore = await cookies();
   const token = cookieStore.get('token')?.value || '';
-  const serverFetchOptions = [
-    todayProgressOptions(token),
-    recentTodosOptions(token),
-  ];
 
   return (
     <>
@@ -27,11 +22,11 @@ export default async function DashBoardPage() {
       <PageContainer>
         <Follower />
         <Suspense fallback={<TodoListSkeleton />}>
-          <ServerFetchBoundary fetchOptions={serverFetchOptions}>
+          <ServerFetchBoundary fetchOptions={recentTodosOptions(token)}>
             <RecentTodos />
-            <MyProgress />
           </ServerFetchBoundary>
         </Suspense>
+        <MyProgress />
         <GoalList />
       </PageContainer>
     </>
diff --git a/src/hooks/apis/Dashboard/useTodayProgressQuery.ts b/src/hooks/apis/Dashboard/useTodayProgressQuery.ts
index a2dd48e7..a53d38b2 100644
--- a/src/hooks/apis/Dashboard/useTodayProgressQuery.ts
+++ b/src/hooks/apis/Dashboard/useTodayProgressQuery.ts
@@ -1,27 +1,21 @@
-import {
-  useSuspenseQuery,
-  UseSuspenseQueryOptions,
-} from '@tanstack/react-query';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
-import { getQueryClient } from '@/lib/query/getQueryClient';
 import { TodayProgressResponse } from '@/types/Dashboard';
 
 export const todayProgressOptions = (
   token?: string,
-): UseSuspenseQueryOptions<TodayProgressResponse, AxiosError> => ({
+): UseQueryOptions<TodayProgressResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.TODAY_PROGRESS],
   queryFn: () =>
     GET<TodayProgressResponse>(API_ENDPOINTS.TODOS.GET_TODAY_PROGRESS, token),
-  initialData: () =>
-    getQueryClient().getQueryData([QUERY_KEYS.TODAY_PROGRESS]) || undefined,
 });
 
 export const useTodayProgressQuery = () => {
-  const { data, ...etc } = useSuspenseQuery(todayProgressOptions());
+  const { data, ...etc } = useQuery(todayProgressOptions());
   const progress = data?.data.progress ?? 0;
 
   return { progress, ...etc };

From 597754dff0e6257ea6706c6602218a8ad9e3c044 Mon Sep 17 00:00:00 2001
From: ejinn1 <ejinn1@naver.com>
Date: Fri, 7 Mar 2025 14:46:04 +0900
Subject: [PATCH 5/6] Refactor: remove sidebar in not found page

---
 src/app/(route)/layout.tsx | 6 +++---
 src/app/not-found.tsx      | 4 ----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/app/(route)/layout.tsx b/src/app/(route)/layout.tsx
index 6cd9e523..38c77987 100644
--- a/src/app/(route)/layout.tsx
+++ b/src/app/(route)/layout.tsx
@@ -3,6 +3,7 @@ import { ReactNode, Suspense } from 'react';
 import dynamic from 'next/dynamic';
 import { cookies } from 'next/headers';
 
+import { Spinner } from '@/components/common/Spinner';
 import { goalsOptions } from '@/hooks/apis/useGoalsQuery';
 import { ServerFetchBoundary } from '@/lib/query/ServerFetchBoundary';
 
@@ -15,12 +16,11 @@ export default async function RootLayout({
 }>) {
   const cookieStore = await cookies();
   const token = cookieStore.get('token')?.value || '';
-  const serverFetchOptions = [goalsOptions(token)];
 
   return (
     <div className="flex">
-      <Suspense fallback={<>로딩중</>}>
-        <ServerFetchBoundary fetchOptions={serverFetchOptions}>
+      <Suspense fallback={<Spinner />}>
+        <ServerFetchBoundary fetchOptions={goalsOptions(token)}>
           <Sidebar />
         </ServerFetchBoundary>
       </Suspense>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 23d2caaa..f129a2a9 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 
 import LogoMain from '@/assets/svg/svg-logo-main.svg';
@@ -8,14 +7,11 @@ import { Button } from '@/components/common/Button/Button';
 import { Header } from '@/components/common/Header';
 import { PageContainer } from '@/components/common/PageContainer';
 
-const Sidebar = dynamic(() => import('@/components/Sidebar'));
-
 export default function NotFound() {
   const router = useRouter();
 
   return (
     <div className="flex">
-      <Sidebar />
       <Header />
       <PageContainer header={true} className="flex-center">
         <div className="flex-center flex-col gap-15">

From 737d3e26ba0f1dd2f52f4214fbacc67f34a5e88b Mon Sep 17 00:00:00 2001
From: ejinn1 <ejinn1@naver.com>
Date: Sat, 8 Mar 2025 16:43:10 +0900
Subject: [PATCH 6/6] Refactor: remove initialData in recent todos and goals

---
 src/hooks/apis/Dashboard/useRecentTodosQuery.ts | 3 ---
 src/hooks/apis/useGoalsQuery.ts                 | 2 --
 2 files changed, 5 deletions(-)

diff --git a/src/hooks/apis/Dashboard/useRecentTodosQuery.ts b/src/hooks/apis/Dashboard/useRecentTodosQuery.ts
index 79b9f6cc..e294e639 100644
--- a/src/hooks/apis/Dashboard/useRecentTodosQuery.ts
+++ b/src/hooks/apis/Dashboard/useRecentTodosQuery.ts
@@ -7,7 +7,6 @@ import { AxiosError } from 'axios';
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
-import { getQueryClient } from '@/lib/query/getQueryClient';
 import { RecentTodosResponse } from '@/types/Dashboard';
 
 export const recentTodosOptions = (
@@ -19,8 +18,6 @@ export const recentTodosOptions = (
       `${API_ENDPOINTS.TODOS.GET_ALL}?lastTodoId=0&size=3`,
       token,
     ),
-  initialData: () =>
-    getQueryClient().getQueryData([QUERY_KEYS.RECENT_TODOS]) || undefined,
 });
 
 export const useRecentTodosQuery = () => {
diff --git a/src/hooks/apis/useGoalsQuery.ts b/src/hooks/apis/useGoalsQuery.ts
index 6b3082e2..b1490243 100644
--- a/src/hooks/apis/useGoalsQuery.ts
+++ b/src/hooks/apis/useGoalsQuery.ts
@@ -7,7 +7,6 @@ import { AxiosError } from 'axios';
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
-import { getQueryClient } from '@/lib/query/getQueryClient';
 import { GoalsResponse } from '@/types/Goals';
 
 export const goalsOptions = (
@@ -15,7 +14,6 @@ export const goalsOptions = (
 ): UseSuspenseQueryOptions<GoalsResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.GOALS],
   queryFn: () => GET<GoalsResponse>(API_ENDPOINTS.GOAL.GOALS, token),
-  initialData: getQueryClient().getQueryData([QUERY_KEYS.GOALS]),
 });
 
 export const useGoalsQuery = () => {