✨ GNB 생성 및 토큰 저장, 삭제 로직 구현 (#29)

* ✨ token을 저장하는 global context 설정

* ♻️ query 사용 시 DI를 통해 주입하도록 설정

* ✨ 로그아웃, refresh token 재발급 API 등록

* ✨ guard route 생성

* ✨ GNB 생성

* 🧪 GNB 테스트 추가

* 🎨 포매팅 적용

Author: Yeonu-Kim

.storybook/preview.tsx

@@ -1,37 +1,66 @@
 import type { Preview } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { initialize, mswLoader } from 'msw-storybook-addon';
+import { type ReactNode, useState } from 'react';
 import { MemoryRouter } from 'react-router';
+
+import { useAuthQuery } from '../src/feature/auth/application/auth-query';
 import { implAuthUsecase } from '../src/feature/auth/usecase/auth-usecase';
+import { QueryContext } from '../src/feature/shared/context/query-context';
+import { TokenContext } from '../src/feature/shared/context/token-context';
 import { UsecaseContext } from '../src/feature/shared/context/usecase-context';
 import { externalCall, implApi } from '../src/infrastructure/api';
+import { implTokenRepository } from '../src/infrastructure/token/token-repository';
 import { handlers } from '../src/mocks/handlers';
 import '../src/index.css';
 
 initialize({ onUnhandledRequest: 'bypass' });
 
+/**
+ * QueryClientProvider 안에서 렌더되는 내부 컴포넌트.
+ * module 레벨에 정의해야 story 전환 시 불필요한 remount를 방지할 수 있다.
+ */
+const StoryAuthProviders = ({ children }: { children: ReactNode }) => {
+  const [token, setToken] = useState<string | null>(null);
+  const api = implApi({ externalCall });
+  const tokenRepository = implTokenRepository({ setToken });
+  const authUsecase = implAuthUsecase({ api, tokenRepository });
+  const authQuery = useAuthQuery({ authUsecase });
+
+  return (
+    <QueryContext.Provider value={{ authQuery }}>
+      <TokenContext.Provider value={{ token }}>
+        <UsecaseContext.Provider value={{ authUsecase }}>
+          {children}
+        </UsecaseContext.Provider>
+      </TokenContext.Provider>
+    </QueryContext.Provider>
+  );
+};
+
 const preview: Preview = {
   parameters: {
     msw: { handlers },
   },
   loaders: [mswLoader],
   decorators: [
     (Story) => {
-      const queryClient = new QueryClient({
-        defaultOptions: {
-          queries: { refetchOnWindowFocus: false, retry: false },
-          mutations: { retry: false },
-        },
-      });
-      const api = implApi({ externalCall });
-      const authUsecase = implAuthUsecase({ api });
+      const [queryClient] = useState(
+        () =>
+          new QueryClient({
+            defaultOptions: {
+              queries: { refetchOnWindowFocus: false, retry: false },
+              mutations: { retry: false },
+            },
+          })
+      );
 
       return (
         <MemoryRouter>
           <QueryClientProvider client={queryClient}>
-            <UsecaseContext.Provider value={{ authUsecase }}>
+            <StoryAuthProviders>
               <Story />
-            </UsecaseContext.Provider>
+            </StoryAuthProviders>
           </QueryClientProvider>
         </MemoryRouter>
       );

src/App.tsx

@@ -1,8 +1,13 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useAuthQuery } from '@/feature/auth/application/auth-query';
 import { implAuthUsecase } from '@/feature/auth/usecase/auth-usecase';
+import { QueryContext } from '@/feature/shared/context/query-context';
+import { TokenContext } from '@/feature/shared/context/token-context';
 import { UsecaseContext } from '@/feature/shared/context/usecase-context';
+import { RouterProvider } from '@/feature/shared/routes/router-provider';
 import { externalCall, implApi } from '@/infrastructure/api';
-import { RouterProvider } from './feature/shared/routes/router-provider';
+import { implTokenRepository } from '@/infrastructure/token/token-repository';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -13,15 +18,28 @@ const queryClient = new QueryClient({
   },
 });
 
-export const App = () => {
+const AppContent = () => {
+  const [token, setToken] = useState<string | null>(null);
   const api = implApi({ externalCall });
-  const authUsecase = implAuthUsecase({ api });
+  const tokenRepository = implTokenRepository({ setToken });
+  const authUsecase = implAuthUsecase({ api, tokenRepository });
+  const authQuery = useAuthQuery({ authUsecase });
+
+  return (
+    <QueryContext.Provider value={{ authQuery }}>
+      <TokenContext.Provider value={{ token }}>
+        <UsecaseContext.Provider value={{ authUsecase }}>
+          <RouterProvider />
+        </UsecaseContext.Provider>
+      </TokenContext.Provider>
+    </QueryContext.Provider>
+  );
+};
 
+export const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <UsecaseContext.Provider value={{ authUsecase }}>
-        <RouterProvider />
-      </UsecaseContext.Provider>
+      <AppContent />
     </QueryClientProvider>
   );
 };