feat: LoginModal을 overlay로 구현

woowacourse-teams · May 12, 2024 · 0e6b601 · 0e6b601
1 parent b2cc79e
commit 0e6b601
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 65 deletions.
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -5,7 +5,6 @@ import { ThemeProvider } from 'styled-components';
 import theme from '../src/shared/styles/theme';
 import { BrowserRouter } from 'react-router-dom';
 import AuthProvider from '@/features/auth/components/AuthProvider';
-import LoginPopupProvider from '@/features/auth/hooks/LoginPopUpContext';
 import handlers from '@/mocks/handlers';
 
 const customViewport = {
@@ -87,14 +86,12 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <AuthProvider>
-        <LoginPopupProvider>
-          <ThemeProvider theme={theme}>
-            <BrowserRouter>
-              <GlobalStyles />
-              <Story />
-            </BrowserRouter>
-          </ThemeProvider>
-        </LoginPopupProvider>
+        <ThemeProvider theme={theme}>
+          <BrowserRouter>
+            <GlobalStyles />
+            <Story />
+          </BrowserRouter>
+        </ThemeProvider>
       </AuthProvider>
     ),
   ],

diff --git a/frontend/src/features/auth/hooks/LoginPopUpContext.tsx b/frontend/src/features/auth/hooks/LoginPopUpContext.tsx
diff --git a/frontend/src/features/auth/hooks/useLoginModal.tsx b/frontend/src/features/auth/hooks/useLoginModal.tsx
@@ -0,0 +1,24 @@
+import { useOverlay } from '@/shared/hooks/useOverlay';
+import LoginModal from '../components/LoginModal';
+
+export const useLoginModal = () => {
+  const overlay = useOverlay();
+
+  const openLoginModal = (errorCode: number) => {
+    overlay.open(({ isOpen, close }) => (
+      <LoginModal
+        isOpen={isOpen}
+        closeModal={close}
+        message={
+          [1000, 1003, 1004].includes(errorCode)
+            ? '로그인 정보가 부정확하여 재로그인이 필요합니다.\n다시 로그인하시겠습니까?'
+            : [1011, 1012, 1007].includes(errorCode)
+            ? '로그인 정보가 만료되었습니다.\n다시 로그인하시겠습니까?'
+            : '로그인 하시겠습니까?'
+        }
+      />
+    ));
+  };
+
+  return { openLoginModal };
+};
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -1,5 +1,4 @@
 import { createBrowserRouter } from 'react-router-dom';
-import LoginPopupProvider from '@/features/auth/hooks/LoginPopUpContext';
 import EditProfilePage from '@/pages/EditProfilePage';
 import AuthPage from './pages/AuthPage';
 import LoginPage from './pages/LoginPage';
@@ -19,9 +18,7 @@ const router = createBrowserRouter([
     path: ROUTE_PATH.ROOT,
     element: (
       <OverlayProvider>
-        <LoginPopupProvider>
-          <Layout />
-        </LoginPopupProvider>
+        <Layout />
       </OverlayProvider>
     ),
     children: [

diff --git a/frontend/src/shared/hooks/useFetch.ts b/frontend/src/shared/hooks/useFetch.ts
@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
-import { useLoginPopup } from '@/features/auth/hooks/LoginPopUpContext';
+import { useLoginModal } from '@/features/auth/hooks/useLoginModal';
 import AuthError from '@/shared/remotes/AuthError';
 import type { ErrorResponse } from '../types/errorResponse';
 
 const useFetch = <T>(fetcher: () => Promise<T>, defaultFetch: boolean = true) => {
   const [data, setData] = useState<T | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<ErrorResponse | null>(null);
-  const { popupLoginModal } = useLoginPopup();
+  const { openLoginModal } = useLoginModal();
   const { logout } = useAuthContext();
 
   // TODO: Error Boudary 적용 시에 주석을 사용해주세요.
@@ -26,7 +26,7 @@ const useFetch = <T>(fetcher: () => Promise<T>, defaultFetch: boolean = true) =>
     } catch (error) {
       if (error instanceof AuthError) {
         logout();
-        popupLoginModal(error.code);
+        openLoginModal(error.code);
         return;
       }
       setError(error as ErrorResponse);

diff --git a/frontend/src/shared/hooks/useMutation.ts b/frontend/src/shared/hooks/useMutation.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
-import { useLoginPopup } from '@/features/auth/hooks/LoginPopUpContext';
+import { useLoginModal } from '@/features/auth/hooks/useLoginModal';
 import AuthError from '@/shared/remotes/AuthError';
 import type { ErrorResponse } from '../types/errorResponse';
 
@@ -9,7 +9,7 @@ export const useMutation = <T, P extends any[]>(mutateFn: (...params: P) => Prom
   const [data, setData] = useState<T | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<ErrorResponse | null>(null);
-  const { popupLoginModal } = useLoginPopup();
+  const { openLoginModal } = useLoginModal();
   const { logout } = useAuthContext();
 
   // TODO: Error Boudary 적용 시에 주석을 사용해주세요.
@@ -28,7 +28,7 @@ export const useMutation = <T, P extends any[]>(mutateFn: (...params: P) => Prom
       } catch (error) {
         if (error instanceof AuthError) {
           logout();
-          popupLoginModal(error.code);
+          openLoginModal(error.code);
           return;
         }
         setError(error as ErrorResponse);