refactor: 토근 관리 로직 고도화 (#489)

* refactor: session callback

* refactor: 타입 설정 및 로직 줄이기

* chore: dpes

@types/next-auth.d.ts

@@ -0,0 +1,13 @@
+import NextAuth, { DefaultSession } from 'next-auth';
+
+declare module 'next-auth' {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    user: {
+      accessToken: string;
+      tokenType: string;
+    } & DefaultSession['user'];
+  }
+}

src/components/auth/AuthSessionLoader.tsx

@@ -0,0 +1,26 @@
+import { type ReactNode, useLayoutEffect } from 'react';
+import { useSession } from 'next-auth/react';
+import { useSetAtom } from 'jotai';
+
+import { LOCAL_STORAGE_KEY } from '~/constants/storage';
+import { isUserTokenValidAtom } from '~/store/auth';
+
+interface Props {
+  children: ReactNode;
+}
+
+const AuthSessionLoader = ({ children }: Props) => {
+  const { data, status } = useSession();
+  const setIsUserTokenValid = useSetAtom(isUserTokenValidAtom);
+
+  useLayoutEffect(() => {
+    if (status !== 'authenticated') return;
+
+    setIsUserTokenValid(true);
+    localStorage.setItem(LOCAL_STORAGE_KEY.accessToken, data.user.accessToken);
+  }, [data, setIsUserTokenValid, status]);
+
+  return <>{children}</>;
+};
+
+export default AuthSessionLoader;

src/pages/_app.page.tsx

@@ -10,7 +10,7 @@ import { Analytics } from '@vercel/analytics/react';
 import { domMax, LazyMotion } from 'framer-motion';
 import { useOpenExternalBrowser } from 'open-external-browser';
 
-import AuthProvider from '~/components/auth/AuthProvider';
+import AuthSessionLoader from '~/components/auth/AuthSessionLoader';
 import ErrorBoundary from '~/components/error/ErrorBoundary';
 import MonitoringInitializer from '~/components/monitoring/MonitoringInitializer';
 import NewFeedbackSnackBarListener from '~/components/snackBar/NewFeedbackSnackBarListener';
@@ -55,14 +55,14 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
 
   return (
     <SessionProvider session={pageProps.session}>
-      <MonitoringInitializer />
-      <QueryClientProvider client={queryClient}>
-        <Hydrate state={pageProps.dehydratedState}>
-          <ThemeProvider theme={defaultTheme}>
-            <LazyMotion features={domMax}>
-              <GlobalStyles />
-              <ErrorBoundary>
-                <AuthProvider>
+      <AuthSessionLoader>
+        <MonitoringInitializer />
+        <QueryClientProvider client={queryClient}>
+          <Hydrate state={pageProps.dehydratedState}>
+            <ThemeProvider theme={defaultTheme}>
+              <LazyMotion features={domMax}>
+                <GlobalStyles />
+                <ErrorBoundary>
                   <PageViewTracker />
                   <div id={MAIN_LAYOUT_ID} css={defaultLayoutCss}>
                     {getLayout(<Component {...pageProps} />)}
@@ -71,13 +71,13 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
                     <SnackBarWrapper />
                     <Analytics />
                   </div>
-                </AuthProvider>
-              </ErrorBoundary>
-            </LazyMotion>
-          </ThemeProvider>
-          <ReactQueryDevtools />
-        </Hydrate>
-      </QueryClientProvider>
+                </ErrorBoundary>
+              </LazyMotion>
+            </ThemeProvider>
+            <ReactQueryDevtools />
+          </Hydrate>
+        </QueryClientProvider>
+      </AuthSessionLoader>
     </SessionProvider>
   );
 }

src/pages/api/auth/[...nextauth].api.ts

@@ -2,7 +2,26 @@ import NextAuth from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 import KakaoProvider from 'next-auth/providers/kakao';
 
+import { post } from '~/libs/api';
+
+interface TokenResponse {
+  token_type: string;
+  access_token: string;
+}
+
 export default NextAuth({
+  callbacks: {
+    session: async ({ session, token }) => {
+      const jwtTokenFromNaLabServer = await post<TokenResponse>('/v1/oauth/kakao', {
+        nickname: token.name,
+        email: token.email,
+      });
+      session.user.accessToken = jwtTokenFromNaLabServer.access_token;
+      session.user.tokenType = jwtTokenFromNaLabServer.token_type;
+
+      return session;
+    },
+  },
   providers: [
     process.env.CLOUDFLARE_ENV === 'preview'
       ? CredentialsProvider({

src/store/auth.ts

@@ -1,3 +1,4 @@
 import { atom } from 'jotai';
 
+// TODO: 이거 삭제
 export const isUserTokenValidAtom = atom<boolean>(false);