Merge pull request #327 from Jaymyong66/refactor/authState

로그인 상태에 따른 Routes 보호, frontend_cd 업데이트, 로그인/회원가입 안내메시지 스타일 변경
woowacourse-teams · Aug 7, 2024 · 826471a · 826471a
2 parents c542d73 + 7f0a755
commit 826471a
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 20 deletions.
diff --git a/.github/workflows/frontend_cd.yml b/.github/workflows/frontend_cd.yml
@@ -23,10 +23,16 @@ jobs:
         run: |
           echo "REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }}" > ${{ env.frontend-directory }}/.env.production
           echo "REACT_APP_BASE_URL=${{ secrets.REACT_APP_BASE_URL }}" >> ${{ env.frontend-directory }}/.env.production
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> ${{ env.frontend-directory }}/.env.production
+          echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> ${{ env.frontend-directory }}/.env.production
+          echo "SENTRY_DSN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> ${{ env.frontend-directory }}/.env.sentry-build-plugin
 
       - name: Set environment file permissions
         run: chmod 644 ${{ env.frontend-directory }}/.env.production
 
+      - name: Set Sentry environment file permissions
+        run: chmod 644 ${{ env.frontend-directory }}/.env.sentry-build-plugin
+
       - name: Install Dependencies
         run: npm install
         working-directory: ${{ env.frontend-directory }}

diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,8 @@
 
 ### Environment Variable ###
 .env
+
+*.crt
+*.csr
+*.key
+*.pem
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -1,8 +1,7 @@
 import { Link } from 'react-router-dom';
 
-import { logoIcon, newTemplateIcon, userMenuIcon } from '@/assets/images';
+import { logoIcon, newTemplateIcon } from '@/assets/images';
 import { Button, Flex, Heading, Text } from '@/components';
-import { useCheckLoginState } from '@/hooks/authentication';
 import { useAuth } from '@/hooks/authentication/useAuth';
 import { useLogoutMutation } from '@/queries/authentication/useLogoutMutation';
 import { theme } from '../../style/theme';
@@ -11,8 +10,6 @@ import * as S from './Header.style';
 const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) => {
   const { isLogin } = useAuth();
 
-  useCheckLoginState();
-
   return (
     <S.HeaderContainer ref={headerRef}>
       <S.HeaderContentContainer>
@@ -28,7 +25,7 @@ const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) =
               <img src={newTemplateIcon} alt='' />새 템플릿
             </Button>
           </Link>
-          {isLogin ? <UserMenuButton /> : <LoginButton />}
+          {isLogin ? <LogoutButton /> : <LoginButton />}
         </Flex>
       </S.HeaderContentContainer>
     </S.HeaderContainer>
@@ -54,17 +51,17 @@ const NavOption = ({ route, name }: { route: string; name: string }) => (
   </Link>
 );
 
-const UserMenuButton = () => {
+const LogoutButton = () => {
   const { mutateAsync } = useLogoutMutation();
 
   const handleLogoutButton = async () => {
     await mutateAsync();
   };
 
   return (
-    <S.UserMenuButton onClick={handleLogoutButton}>
-      <img src={userMenuIcon} alt='사용자 메뉴' />
-    </S.UserMenuButton>
+    <Button variant='text' size='medium' weight='bold' hoverStyle='none' onClick={handleLogoutButton}>
+      로그아웃
+    </Button>
   );
 };
 

diff --git a/frontend/src/hooks/authentication/useCheckLoginState.ts b/frontend/src/hooks/authentication/useCheckLoginState.ts
@@ -18,8 +18,6 @@ export const useCheckLoginState = () => {
 
   useEffect(() => {
     if (isError) {
-      infoAlert('로그인을 해주세요');
-      handleLoginNavigate();
       handleLoginState(false);
     }
 

diff --git a/frontend/src/hooks/authentication/useLoginForm.ts b/frontend/src/hooks/authentication/useLoginForm.ts
@@ -5,12 +5,15 @@ import { postLogin } from '@/api/authentication';
 import { ToastContext } from '@/context/ToastContext';
 import { useInputWithValidate } from '../useInputWithValidate';
 import useCustomContext from '../utils/useCustomContext';
+import { useAuth } from './useAuth';
 import { validateEmail, validatePassword } from './validates';
 
 export const useLoginForm = () => {
   const navigate = useNavigate();
   const { failAlert, successAlert } = useCustomContext(ToastContext);
 
+  const { handleLoginState } = useAuth();
+
   const {
     value: email,
     errorMessage: emailError,
@@ -38,6 +41,7 @@ export const useLoginForm = () => {
         return;
       }
 
+      handleLoginState(true);
       navigate('/');
       successAlert('로그인 성공!');
     }

diff --git a/frontend/src/pages/LoginPage/LoginPage.tsx b/frontend/src/pages/LoginPage/LoginPage.tsx
@@ -43,8 +43,8 @@ const LoginPage = () => {
             <Button type='submit' variant='contained' fullWidth disabled={!isFormValid()}>
               로그인
             </Button>
-            <Flex justify='flex-end' width='100%' gap='1rem'>
-              <Text.Small color='#6B7079'>계정이 없으신가요?</Text.Small>
+            <Flex justify='flex-end' align='center' width='100%' gap='0.5rem'>
+              <Text.XSmall color='#6B7079'>계정이 없으신가요?</Text.XSmall>
 
               <Link to={'/signup'}>
                 <Button variant='text' size='small'>

diff --git a/frontend/src/pages/SignupPage/SignupPage.tsx b/frontend/src/pages/SignupPage/SignupPage.tsx
@@ -90,8 +90,8 @@ const SignupPage = () => {
               회원가입
             </Button>
 
-            <Flex justify='flex-end' width='100%' gap='1rem'>
-              <Text.Small color='#6B7079'>이미 계정이 있으신가요?</Text.Small>
+            <Flex justify='flex-end' align='center' width='100%' gap='0.5rem'>
+              <Text.XSmall color='#6B7079'>이미 계정이 있으신가요?</Text.XSmall>
               <Link to={'/login'}>
                 <Button variant='text' size='small'>
                   로그인

diff --git a/frontend/src/routes/AuthGuard.tsx b/frontend/src/routes/AuthGuard.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { ToastContext } from '@/context/ToastContext';
+import { useAuth } from '@/hooks/authentication/useAuth';
+import useCustomContext from '@/hooks/utils/useCustomContext';
+
+type AuthGuardProps = {
+  children: ReactNode;
+};
+
+const AuthGuard = ({ children }: AuthGuardProps) => {
+  const { isLogin } = useAuth();
+  const { infoAlert } = useCustomContext(ToastContext);
+
+  if (isLogin) {
+    infoAlert('이미 로그인된 사용자입니다.');
+
+    return <Navigate to='/' />;
+  }
+
+  return children;
+};
+
+export default AuthGuard;
diff --git a/frontend/src/routes/GuestGuard.tsx b/frontend/src/routes/GuestGuard.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { ToastContext } from '@/context/ToastContext';
+import { useAuth } from '@/hooks/authentication/useAuth';
+import useCustomContext from '@/hooks/utils/useCustomContext';
+
+type GuestGuardProps = {
+  children: ReactNode;
+};
+
+const GuestGuard = ({ children }: GuestGuardProps) => {
+  const { isLogin } = useAuth();
+  const { infoAlert } = useCustomContext(ToastContext);
+
+  if (!isLogin) {
+    infoAlert('로그인을 해주세요.');
+
+    return <Navigate to='/login' />;
+  }
+
+  return children;
+};
+
+export default GuestGuard;
diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx
@@ -2,30 +2,52 @@ import { createBrowserRouter } from 'react-router-dom';
 
 import { Layout } from '@/components';
 import { TemplatePage, MyTemplatePage, TemplateUploadPage, SignupPage, LoginPage } from '@/pages';
+import AuthGuard from './AuthGuard';
+import GuestGuard from './GuestGuard';
 
 const router = createBrowserRouter([
   {
     element: <Layout />,
     children: [
       {
         path: '/',
-        element: <MyTemplatePage />,
+        element: (
+          <GuestGuard>
+            <MyTemplatePage />,
+          </GuestGuard>
+        ),
       },
       {
         path: 'templates/:id',
-        element: <TemplatePage />,
+        element: (
+          <GuestGuard>
+            <TemplatePage />
+          </GuestGuard>
+        ),
       },
       {
         path: 'templates/upload',
-        element: <TemplateUploadPage />,
+        element: (
+          <GuestGuard>
+            <TemplateUploadPage />
+          </GuestGuard>
+        ),
       },
       {
         path: 'signup',
-        element: <SignupPage />,
+        element: (
+          <AuthGuard>
+            <SignupPage />
+          </AuthGuard>
+        ),
       },
       {
         path: 'login',
-        element: <LoginPage />,
+        element: (
+          <AuthGuard>
+            <LoginPage />,
+          </AuthGuard>
+        ),
       },
     ],
   },