✨ Feat: amplify 로그인 구현, 라우팅 로그인 분기 완료 (#120)

package.json

@@ -28,13 +28,14 @@
     "*.js": "eslint --cache --fix"
   },
   "dependencies": {
+    "@aws-amplify/auth": "^6.0.27",
     "@aws-amplify/ui-react": "^6.1.6",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/eslint-plugin": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@types/webpack-env": "^1.18.4",
-    "aws-amplify": "^6.0.24",
+    "aws-amplify": "^6.0.27",
     "axios": "^1.6.8",
     "bootstrap": "5.3.3",
     "css-loader": "^6.10.0",

src/App.tsx

@@ -1,46 +1,107 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import '@aws-amplify/ui-react/styles.css';
-import { Amplify } from 'aws-amplify';
-import awsConfig from './awsConfig';
+import { getCurrentUser } from 'aws-amplify/auth';
 import MainLayout from './components/layout/MainLayout';
 import InviteTeamModal from '@/components/inviteTeam/InviteTeamModal';
 import SubLayout from '@/components/layout/PageSubLayout';
 import ProfileLayout from '@/components/layout/ProfileLayout';
+import AuthPage from '@/pages/AuthPage';
 import CreateRetroPage from '@/pages/CreateRetroPage';
 import HomePage from '@/pages/HomePage';
-import LoginPage from '@/pages/LoginPage';
 import MyPage from '@/pages/MyPage';
-import RegisterPage from '@/pages/RegisterPage';
 import SurveyPage from '@/pages/SurveyPage';
 import { WriteRetroPersonalPage } from '@/pages/WriteRetroPersonalPage';
 import { WriteRetroRevisePersonalPage } from '@/pages/WriteRetroRevisePersonalPage';
 import { WriteRetroReviseTeamPage } from '@/pages/WriteRetroReviseTeamPage';
 import { WriteRetroTeamPage } from '@/pages/WriteRetroTeamPage';
 
-Amplify.configure(awsConfig);
+interface PrivateRouteProps {
+  children: ReactElement;
+}
 
+// 로그인 상태 확인, 로그인 안 되어있는데 접근하면 "/" 로 리다이렉트함
+const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isChecking, setIsChecking] = useState(true);
+  const location = useLocation();
+
+  useEffect(() => {
+    checkLoginStatus();
+  }, []);
+
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  if (isChecking) {
+    return <div>로딩 중...</div>; // 로그인 상태 확인 중
+  }
+
+  return isLoggedIn ? children : <Navigate to="/" replace state={{ from: location }} />;
+};
+
+// App 컴포넌트 수정
 const App = () => {
   return (
     <>
       <Router>
         <Routes>
           <Route element={<SubLayout />}>
-            <Route path="/create" element={<CreateRetroPage />}></Route>
-            <Route path="/invite" element={<InviteTeamModal />}></Route>
-            <Route path="/WriteRetroTeamPage" element={<WriteRetroTeamPage />}></Route>
-            <Route path="/WriteRetroPersonalPage" element={<WriteRetroPersonalPage />}></Route>
-            <Route path="/WriteRetroReviseTeamPage" element={<WriteRetroReviseTeamPage />}></Route>
-            <Route path="/WriteRetroRevisePersonalPage" element={<WriteRetroRevisePersonalPage />}></Route>
+            <Route
+              path="/create"
+              element={
+                <PrivateRoute>
+                  <CreateRetroPage />
+                </PrivateRoute>
+              }
+            ></Route>
+            <Route
+              path="/invite"
+              element={
+                <PrivateRoute>
+                  <InviteTeamModal />
+                </PrivateRoute>
+              }
+            ></Route>
+            <Route
+              path="/WriteRetroTeamPage"
+              element={
+                <PrivateRoute>
+                  <WriteRetroTeamPage />
+                </PrivateRoute>
+              }
+            ></Route>
           </Route>
           <Route element={<ProfileLayout />}>
-            <Route path="/my" element={<MyPage />}></Route>
+            <Route
+              path="/my"
+              element={
+                <PrivateRoute>
+                  <MyPage />
+                </PrivateRoute>
+              }
+            ></Route>
           </Route>
           <Route element={<MainLayout />}>
             <Route path="/" element={<HomePage />}></Route>
           </Route>
-          <Route path="/login" element={<LoginPage />}></Route>
-          <Route path="/register" element={<RegisterPage />}></Route>
-          <Route path="/survey" element={<SurveyPage />}></Route>
+          <Route path="/login" element={<AuthPage />}></Route>
+          <Route
+            path="/survey"
+            element={
+              <PrivateRoute>
+                <SurveyPage />
+              </PrivateRoute>
+            }
+          ></Route>
         </Routes>
       </Router>
     </>

src/components/layout/parts/MainNavBar.tsx

@@ -1,16 +1,48 @@
+import { useEffect, useState } from 'react';
 import { PersonCircle } from 'react-bootstrap-icons';
 import { useNavigate } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+import { getCurrentUser, signOut } from 'aws-amplify/auth';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
 import * as S from '@/styles/layout/layout.style';
 
 const MainNavBar = () => {
   const navigate = useNavigate();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
-  const handleLogin = () => {
-    navigate('/login');
+  useEffect(() => {
+    checkLoginStatus();
+  }, []);
+
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    }
+  };
+
+  const handleLoginOrLogout = () => {
+    if (isLoggedIn) {
+      handleSignOut(); // 로그아웃 처리 함수 호출
+    } else {
+      navigate('/login');
+    }
   };
 
+  // 로그아웃을 처리 함수
+  async function handleSignOut() {
+    try {
+      await signOut({ global: true });
+      setIsLoggedIn(false); // 로그인 상태 업데이트
+      navigate('/'); // 로그아웃 후 홈으로 리디이렉션
+    } catch (error) {
+      console.log('로그아웃 에러', error);
+    }
+  }
+
   return (
     <>
       <div style={{ backgroundColor: 'white', zIndex: 1 }}>
@@ -40,7 +72,9 @@ const MainNavBar = () => {
                 </div>
               </S.IconStyle>
 
-              <S.Link onClick={handleLogin}>Login</S.Link>
+              <Button style={{ marginRight: '0.3rem' }} variant="ghost" onClick={handleLoginOrLogout}>
+                {isLoggedIn ? 'Logout' : 'Login'}
+              </Button>
               <S.GetStaredButton>Get Started for Free</S.GetStaredButton>
             </div>
           </S.RightBox>

src/components/user/AuthenticationButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useAuthenticator } from '@aws-amplify/ui-react';
+import * as S from '@/styles/layout/layout.style';
+
+interface Props {
+  handleLogin: () => void;
+}
+
+const AuthenticationButton: React.FC<Props> = ({ handleLogin }) => {
+  const { signOut } = useAuthenticator();
+  const { authStatus } = useAuthenticator(context => [context.authStatus]);
+
+  return (
+    <>
+      {authStatus !== 'authenticated' ? (
+        <S.Link onClick={handleLogin}>로그인</S.Link>
+      ) : (
+        <S.Link onClick={signOut}>로그아웃</S.Link>
+      )}
+    </>
+  );
+};
+
+export default AuthenticationButton;

src/components/user/DefaultHeader.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text } from '@chakra-ui/react';
+import logo from '@/../public/logo.svg';
+import * as S from '@/styles/user/DefaultHeader.style';
+
+function DefaultHeader() {
+  return (
+    <S.HeaderContainer>
+      <img src={logo} alt="로고" />
+      <Text fontSize="3xl" as="b" color="#37447E">
+        Past-Forward
+      </Text>
+    </S.HeaderContainer>
+  );
+}
+
+export default DefaultHeader;