Header, Drawer 리팩토링

middleware.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(req: NextRequest) {
+  const subdomain = req.headers.get('host')?.split('.')[0];
+  if (subdomain === 'admin') {
+    return NextResponse.rewrite(
+      new URL(`/admin${req.nextUrl.pathname}`, req.nextUrl.origin),
+    );
+  }
+  if (req.nextUrl.pathname.startsWith('/admin')) {
+    return NextResponse.redirect(new URL(req.nextUrl.origin));
+  }
+}
+
+export const config = {
+  matcher: [
+    '/',
+    '/login',
+    '/notice/:path*',
+    '/my-club',
+    '/admin/:path*',
+    '/report/:path*',
+  ],
+};

package.json

@@ -34,7 +34,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.13",
-    "ddingdong-design-system": "^0.3.1",
+    "ddingdong-design-system": "^0.3.4",
     "embla-carousel-autoplay": "^8.0.0-rc22",
     "embla-carousel-react": "^8.0.0-rc22",
     "event-source-polyfill": "^1.0.31",

src/apis/index.ts

@@ -13,6 +13,7 @@ import {
 import { DeleteBanner, NewBanner, UpdateBanner } from '@/types/banner';
 import {
   AdminClub,
+  ClubDetail,
   NewClub,
   DeleteClub,
   UpdateClub,
@@ -22,7 +23,7 @@ import {
   MemberInfo,
   AddMember,
 } from '@/types/club';
-import { DeleteDocument, NewDocument } from '@/types/document';
+import { DeleteDocument, DocumentDetail, NewDocument } from '@/types/document';
 import { NewFeed, DeleteFeed } from '@/types/feed';
 import {
   DeleteFixComment,
@@ -324,6 +325,15 @@ export async function deleteBanner({ bannerId, token }: DeleteBanner) {
     },
   });
 }
+export async function getMyClub(
+  token: string,
+): Promise<AxiosResponse<ClubDetail, unknown>> {
+  return await api.get('/central/my', {
+    headers: {
+      Authorization: 'Bearer ' + token,
+    },
+  });
+}
 
 export async function updateMyClub({ token, ...clubData }: UpdateMyClub) {
   return await api.patch('/central/my', clubData, {

src/app/_api/fetcher.ts

@@ -1,8 +1,9 @@
 import * as Sentry from '@sentry/nextjs';
 import ky, { type Options, type ResponsePromise, HTTPError } from 'ky';
-import { Cookies } from 'react-cookie';
 import { toast } from 'react-hot-toast';
 
+import { useAuthStore } from '@/store/auth';
+
 import { ErrorType } from './types/error';
 
 export class ApiError extends Error {
@@ -19,23 +20,14 @@ export class ApiError extends Error {
 const defaultOption: Options = {
   retry: 0,
   timeout: 30_000,
-  credentials: 'include',
 };
 
 const API_ENDPOINT = process.env.NEXT_PUBLIC_BASE_URL;
 
-const cookies = new Cookies();
-
-export const resetCookie = () => {
-  cookies.remove('token', { path: '/' });
-  cookies.remove('role', { path: '/' });
-  cookies.remove('refresh_token', { domain: '.mju.ac.kr', path: '/' });
-  cookies.remove('access_token', { domain: '.mju.ac.kr', path: '/' });
-};
-
-const expirationToken = async () => {
-  toast.error('로그인 시간이 만료되었어요.');
-  resetCookie();
+const expirationToken = async (error: HTTPError) => {
+  window.location.href = '/login';
+  toast.error(`로그인 시간이 만료되었어요.`);
+  return Promise.reject(error);
 };
 
 export const instance = ky.create({
@@ -46,7 +38,7 @@ export const instance = ky.create({
   hooks: {
     beforeRequest: [
       async (request) => {
-        const token = cookies.get('token');
+        const token = useAuthStore.getState().auth.token;
 
         if (token) {
           request.headers.set('Authorization', `Bearer ${token}`);
@@ -60,33 +52,35 @@ export const instance = ky.create({
     ],
     beforeError: [
       async (error) => {
+        if (error.name === 'TimeoutError') {
+          toast.error('네트워크 환경을 확인해주세요.');
+        }
+
         if (error instanceof HTTPError) {
           const errorData: ErrorType = await error.response.json();
+          if (errorData.status === 401) {
+            if (errorData?.message === '유효하지 않은 토큰입니다.') {
+              return expirationToken(error);
+            }
+          }
 
           const apiError = new ApiError(
             errorData.status || error.response.status,
             errorData.message || '서버 오류가 발생했습니다.',
             errorData.timestamp || new Date().toISOString(),
           );
-
-          if (
-            apiError.status === 401 &&
-            apiError.message === '유효하지 않은 토큰입니다.'
-          ) {
-            await expirationToken();
-            return error;
-          }
           Sentry.captureException(apiError);
+          return Promise.reject(apiError);
         }
 
-        return error;
+        return Promise.reject(error);
       },
     ],
   },
   ...defaultOption,
 });
 
-export async function parseResponse<T>(response: ResponsePromise) {
+export async function parseResponse<T>(response: ResponsePromise): Promise<T> {
   try {
     return await response.json<T>();
   } catch (error) {

src/app/_api/queries/club.ts

@@ -5,7 +5,6 @@ import { Club, ClubDetail } from '../types/club';
 
 export const clubQueryKeys = {
   all: () => ['clubs'],
-  my: () => [...clubQueryKeys.all(), 'my'],
   detail: (id: number) => [...clubQueryKeys.all(), id],
 };
 
@@ -15,11 +14,6 @@ export const clubQueryOptions = {
       queryKey: clubQueryKeys.all(),
       queryFn: () => fetcher.get<Club[]>('clubs'),
     }),
-  my: () =>
-    queryOptions({
-      queryKey: clubQueryKeys.my(),
-      queryFn: () => fetcher.get<ClubDetail>('central/my'),
-    }),
   detail: (id: number) =>
     queryOptions({
       queryKey: clubQueryKeys.detail(id),