Gallery, 토큰 관리 로직 병합

@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/components/sideMenu/MenuSection.tsx

@@ -25,7 +25,7 @@ function MenuSection() {
       label: '로그아웃',
       action: () => {
         // 실 환경에서 되는지 체크
-        logOutHandler();
+        logOutHandler({ callbackUrl: '/' });
         router.replace('/');
       },
     },

src/features/home/KakaoLoginButton.tsx

@@ -13,7 +13,7 @@ const KakaoLoginButton = () => {
   if (status === 'authenticated') {
     return (
       <div css={KakaoLoginWrapper}>
-        <button type="button" onClick={logOutHandler}>
+        <button type="button" onClick={() => logOutHandler()}>
           로그아웃
         </button>
       </div>
@@ -23,7 +23,7 @@ const KakaoLoginButton = () => {
   return (
     <div css={KakaoLoginWrapper}>
       이미 질문폼이 있다면?
-      <button type="button" css={KakaoLoginButtonCss} onClick={loginHandler}>
+      <button type="button" css={KakaoLoginButtonCss} onClick={() => loginHandler({ callbackUrl: '/gallery' })}>
         로그인하고 결과 보기
       </button>
     </div>

src/hooks/auth/useKakaoLogin.tsx

@@ -1,18 +1,16 @@
-import { signIn, signOut, useSession } from 'next-auth/react';
+import { signIn, type SignInOptions, signOut, type SignOutParams, useSession } from 'next-auth/react';
 
 import { LOCAL_STORAGE_KEY } from '~/constants/storage';
 
 const useKakaoLogin = () => {
   const { status } = useSession();
 
-  const logOutHandler = () => {
-    signOut();
+  const logOutHandler = (options?: SignOutParams) => {
     localStorage.removeItem(LOCAL_STORAGE_KEY.accessToken);
+    signOut(options);
   };
 
-  const loginHandler = () => {
-    signIn('kakao');
-  };
+  const loginHandler = (options?: SignInOptions) => signIn('kakao', options);
 
   return {
     logOutHandler,

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/pages/gallery/index.page.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { css } from '@emotion/react';
 
-import BottomBar from '~/components/bottomBar/BottomBar';
 import Header from '~/components/header/MobileHeader';
 import StaggerWrapper from '~/components/stagger/StaggerWrapper';
 import Card from '~/features/gallery/Card';
@@ -53,7 +52,7 @@ function Gallery() {
           />
         )}
       </div>
-      <BottomBar />
+      {/* <BottomBar /> */}
     </div>
   );
 }

src/pages/survey/create.page.tsx

@@ -2,7 +2,6 @@ import { useSession } from 'next-auth/react';
 import { css, type Theme } from '@emotion/react';
 import { useAtom, useAtomValue } from 'jotai';
 
-import BottomBar from '~/components/bottomBar/BottomBar';
 import CTAButton from '~/components/button/CTAButton';
 import Header from '~/components/header/Header';
 import SEO from '~/components/SEO/SEO';
@@ -83,7 +82,7 @@ const CreateSurveyPage = () => {
 
         <CreateDialog isShowing={isDialogShowing} onClose={toggleDialogShowing} onAction={onSubmit} />
         <CreateStopDialog isShowing={isDialogOpen} onClose={onDialogClose} onAction={onStop} />
-        <BottomBar />
+        {/* <BottomBar /> */}
       </main>
     </>
   );

src/pages/survey/join.page.tsx

@@ -103,7 +103,7 @@ const JoinGuidePage = () => {
         </StaggerWrapper>
 
         <TooltipButton tooltipLabel="피드백 데이터를 간편하게 모아볼 수 있어요!">
-          <CTAButton css={kakaoButtonCss} onClick={loginHandler}>
+          <CTAButton css={kakaoButtonCss} onClick={() => loginHandler()}>
             <KakaoIcon />
             <span>카카오 계정으로 회원가입 하기</span>
           </CTAButton>

src/store/auth.ts

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