[Refactor] improve api function

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) {

src/app/(route)/dashboard/page.tsx

@@ -1,17 +1,31 @@
+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 { ServerFetchBoundary } from '@/lib/query/ServerFetchBoundary';
+
+export default async function DashBoardPage() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('token')?.value || '';
 
-export default function DashBoardPage() {
   return (
     <>
       <Header title="대시보드" />
       <PageContainer>
         <Follower />
-        <RecentTodos />
+        <Suspense fallback={<TodoListSkeleton />}>
+          <ServerFetchBoundary fetchOptions={recentTodosOptions(token)}>
+            <RecentTodos />
+          </ServerFetchBoundary>
+        </Suspense>
         <MyProgress />
         <GoalList />
       </PageContainer>

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 { Spinner } from '@/components/common/Spinner';
+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 || '';
+
   return (
     <div className="flex">
-      <Sidebar />
+      <Suspense fallback={<Spinner />}>
+        <ServerFetchBoundary fetchOptions={goalsOptions(token)}>
+          <Sidebar />
+        </ServerFetchBoundary>
+      </Suspense>
       {children}
     </div>
   );

src/app/not-found.tsx

@@ -1,21 +1,17 @@
 'use client';
 
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 
 import LogoMain from '@/assets/svg/svg-logo-main.svg';
 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">

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

src/hooks/apis/Dashboard/useRecentTodosQuery.ts

@@ -1,24 +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 { 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,
     ),
 });
 
 export const useRecentTodosQuery = () => {
-  const { data, ...etc } = useQuery(recentTodosOptions());
+  const { data, ...etc } = useSuspenseQuery(recentTodosOptions());
   const todos = data?.data.content ?? [];
 
   return { todos, ...etc };

src/hooks/apis/Dashboard/useTodayProgressQuery.ts

@@ -6,13 +6,12 @@ import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { TodayProgressResponse } from '@/types/Dashboard';
 
-export const todayProgressOptions = (): UseQueryOptions<
-  TodayProgressResponse,
-  AxiosError
-> => ({
+export const todayProgressOptions = (
+  token?: string,
+): UseQueryOptions<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),
 });
 
 export const useTodayProgressQuery = () => {

src/hooks/apis/useGoalsQuery.ts

@@ -1,18 +1,23 @@
-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 { 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),
+});
 
 export const useGoalsQuery = () => {
-  const { data, ...etc } = useQuery(goalsOptions);
+  const { data, ...etc } = useSuspenseQuery(goalsOptions());
   const goals = data?.data ?? [];
 
   return { goals, ...etc };

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;