✨ feat : 로그인 정보 전역 저장

src/apis/type.ts

@@ -79,16 +79,15 @@ export interface PoseTalkResponse {
   };
 }
 
-export interface Token {
-  accessToken: string;
-  refreshToken: string;
-  grantType: string;
-  expiresIn: number;
-}
-
+// 로그인
 export interface RegisterResponse {
   id: number;
   nickname: string;
   email: string;
-  token: Token;
+  token: {
+    accessToken: string;
+    refreshToken: string;
+    grantType: string;
+    expiresIn: number;
+  };
 }

src/app/(Sub)/api/users/login/oauth/kakao/components/LoginSection.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 
 import { useRegisterQuery } from '@/apis';
 import { Loading } from '@/components/Loading';
+import useUserState from '@/context/userState';
 import { setCookie } from '@/utils/cookieController';
 
 interface LoginSectionProps {
@@ -13,6 +14,11 @@ export default function LoginSection({ code }: LoginSectionProps) {
   const router = useRouter();
   const { data } = useRegisterQuery(code);
   console.log(data);
+
+  const { setLoginState, setUserState } = useUserState();
+  setLoginState(true);
+  setUserState(data);
+
   const { token } = data;
   const { accessToken, refreshToken } = token;
   setCookie('accessToken', accessToken);

src/app/(Sub)/menu/components/LoginSection.tsx

@@ -5,6 +5,7 @@ import { Icon } from '@/components/Button/Icon';
 import { useOverlay } from '@/components/Overlay/useOverlay';
 import { Spacing } from '@/components/Spacing';
 import { ICON } from '@/constants/icon';
+import useUserState from '@/context/userState';
 
 function DefaultProfile() {
   return (
@@ -15,17 +16,26 @@ function DefaultProfile() {
 }
 
 export default function LoginSection() {
+  const { loginState, userState } = useUserState();
   const { open, exit } = useOverlay();
 
   return (
     <section className="py-12">
-      <div className="bg-violet flex items-center rounded-16 bg-main-violet-base px-20 py-24">
-        <DefaultProfile />
-        <Spacing size={16} direction="horizontal" />
-        <div id="subtitle-1" onClick={() => open(() => <LoginModal onClose={exit} />)}>
-          로그인하기
+      {loginState ? (
+        <div className="bg-violet flex items-center rounded-16 bg-main-violet-base px-20 py-24">
+          <DefaultProfile />
+          <Spacing size={16} direction="horizontal" />
+          <div id="subtitle-1">{userState.email}</div>
         </div>
-      </div>
+      ) : (
+        <div className="bg-violet flex items-center rounded-16 bg-main-violet-base px-20 py-24">
+          <DefaultProfile />
+          <Spacing size={16} direction="horizontal" />
+          <div id="subtitle-1" onClick={() => open(() => <LoginModal onClose={exit} />)}>
+            로그인하기
+          </div>
+        </div>
+      )}
     </section>
   );
 }

src/context/userState.tsx

@@ -0,0 +1,16 @@
+import { atom, useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { RegisterResponse } from '@/apis';
+
+const isLoginAtom = atom<boolean>({ key: 'isLogin', default: false });
+const userAtom = atom<RegisterResponse>({ key: 'user' });
+
+export default function useUserState() {
+  const loginState = useRecoilValue(isLoginAtom);
+  const setLoginState = useSetRecoilState(isLoginAtom);
+
+  const userState = useRecoilValue(userAtom);
+  const setUserState = useSetRecoilState(userAtom);
+
+  return { loginState, setLoginState, userState, setUserState };
+}