feat: AuthProvider 추가

project-oseek · Jul 8, 2023 · 2db5194 · 2db5194
1 parent e2a4240
commit 2db5194
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 14 deletions.
diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -1,6 +1,7 @@
 import './global.css';
 import { PropsWithChildren } from 'react';
 import { Layout, OverlayProvider, ReactQueryProvider } from '@oseek/ui';
+import { AuthProvider } from '@components/provider';
 
 export const metadata = {
   title: {
@@ -14,9 +15,11 @@ export default function RootLayout({ children }: PropsWithChildren) {
     <html lang="ko">
       <body>
         <ReactQueryProvider>
-          <Layout>
-            <OverlayProvider>{children}</OverlayProvider>
-          </Layout>
+          <AuthProvider>
+            <Layout>
+              <OverlayProvider>{children}</OverlayProvider>
+            </Layout>
+          </AuthProvider>
         </ReactQueryProvider>
       </body>
     </html>

diff --git a/apps/client/src/components/index.ts b/apps/client/src/components/index.ts
@@ -9,6 +9,7 @@ export * from './layout/index';
 export * from './location/index';
 export * from './login/index';
 export * from './main/index';
+export * from './provider/index';
 export * from './section/index';
 export * from './shop/index';
 export * from './spacing/index';
diff --git a/apps/client/src/components/provider/AuthProvider.tsx b/apps/client/src/components/provider/AuthProvider.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import React, { createContext, useState, useEffect, useContext, PropsWithChildren } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  ACCESS_TOKEN_KEY,
+  REFRESH_TOKEN_KEY,
+  USER_KEY,
+  removeLocalStorageItem,
+  getAccessTokenByLocalStorage,
+  getRefreshTokenByLocalStorage,
+  getUserByLocalStorage,
+  UserType,
+} from '@oseek/lib';
+import { PAGE_URL } from '@constant/pageUrl';
+
+interface AuthContextProps {
+  user: UserType | null;
+  isLoggedIn: boolean;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextProps | undefined>(undefined);
+
+export const AuthProvider = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  const [user, setUser] = useState<UserType | null>(null);
+
+  const logout = () => {
+    setUser(null);
+    removeLocalStorageItem(ACCESS_TOKEN_KEY);
+    removeLocalStorageItem(REFRESH_TOKEN_KEY);
+    removeLocalStorageItem(USER_KEY);
+    router.replace(PAGE_URL.MAIN);
+  };
+
+  const isLoggedIn = () => {
+    const accessToken = getAccessTokenByLocalStorage();
+    const refreshToken = getRefreshTokenByLocalStorage();
+    return user !== null && accessToken !== null && refreshToken !== null;
+  };
+
+  useEffect(() => {
+    const storedUser = getUserByLocalStorage();
+    if (storedUser) {
+      setUser(storedUser);
+    }
+  }, []);
+
+  return <AuthContext.Provider value={{ user, isLoggedIn: isLoggedIn(), logout }}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextProps => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth를 사용하려면 AuthProvider를 상위에 제공해야 합니다.');
+  }
+  return context;
+};
diff --git a/apps/client/src/components/provider/index.ts b/apps/client/src/components/provider/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './AuthProvider';
diff --git a/apps/client/src/constant/index.ts b/apps/client/src/constant/index.ts
@@ -3,3 +3,4 @@
  */
 
 export * from './foodKeyword';
+export * from './pageUrl';
diff --git a/apps/client/src/constant/pageUrl.ts b/apps/client/src/constant/pageUrl.ts
@@ -0,0 +1,4 @@
+export const PAGE_URL = {
+  MAIN: '/',
+  SETTING_NAME: '/login/setting-name',
+};
diff --git a/libs/lib/src/constants/tokenKey.ts b/libs/lib/src/constants/tokenKey.ts
@@ -1,4 +1,3 @@
 export const ACCESS_TOKEN_KEY = 'accessToken';
 export const REFRESH_TOKEN_KEY = 'refreshToken';
-export const NICKNAME_KEY = 'nickname';
-export const LOCATION_KEY = 'location';
+export const USER_KEY = 'user';
diff --git a/libs/lib/src/utils/storage.ts b/libs/lib/src/utils/storage.ts
@@ -1,4 +1,5 @@
-import { ACCESS_TOKEN_KEY, LOCATION_KEY, NICKNAME_KEY, REFRESH_TOKEN_KEY } from '../constants';
+import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, USER_KEY } from '../constants';
+import { MemberInfoResDto } from '@oseek/apis';
 
 export const getLocalStorageItem = <T>(key: string): T | null => {
   if (typeof window !== 'undefined') {
@@ -28,6 +29,12 @@ export const setLocalStorageItem = <T>(key: string, value: T): void => {
   }
 };
 
+export const removeLocalStorageItem = (key: string): void => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem(key);
+  }
+};
+
 export const getAccessTokenByLocalStorage = (): string | null => {
   const accessToken = getLocalStorageItem<string>(ACCESS_TOKEN_KEY);
   return accessToken || null;
@@ -38,12 +45,8 @@ export const getRefreshTokenByLocalStorage = (): string | null => {
   return refreshToken || null;
 };
 
-export const getNickNameByLocalStorage = (): string | null => {
-  const nickname = getLocalStorageItem<string>(NICKNAME_KEY);
-  return nickname || null;
-};
-
-export const getLocationByLocalStorage = (): string | null => {
-  const location = getLocalStorageItem<string>(LOCATION_KEY);
-  return location || null;
+export type UserType = Pick<MemberInfoResDto, 'nickname' | 'location'>;
+export const getUserByLocalStorage = (): UserType | null => {
+  const user = getLocalStorageItem<UserType>(USER_KEY);
+  return user || null;
 };