Merge branch 'main' into feat/#7-todo

src/pages/Home.tsx

@@ -8,31 +8,30 @@ function Home() {
     <StyledHome>
       소개글~
       <ButtonWrapper>
-        <Button
+        <SignButton
           isSignin={false}
           onClick={() => {
             navigate('/signup')
           }}
         >
           회원가입
-        </Button>
-        <Button
+        </SignButton>
+        <SignButton
           isSignin={true}
           onClick={() => {
             navigate('/signin')
           }}
         >
           로그인
-        </Button>
-
-        <Button
+        </SignButton>
+        <SignButton
           isSignin={true}
           onClick={() => {
             navigate('/todo')
           }}
         >
           투두 테스트 버튼
-        </Button>
+        </SignButton>
       </ButtonWrapper>
     </StyledHome>
   )
@@ -44,7 +43,6 @@ const StyledHome = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 20px;
-
   width: 100%;
   height: 100vh;
 `
@@ -55,19 +53,16 @@ const ButtonWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 10px;
-
   width: 100%;
 `
 
-const Button = styled.button<{ isSignin: boolean }>`
+const SignButton = styled.button<{ isSignin: boolean }>`
   width: 100%;
   height: 32px;
   max-width: 425px;
-
-  cursor: pointer;
-
   border: 1px solid gray;
   border-radius: 5px;
+  cursor: pointer;
 
   ${({ isSignin }) => css`
     background-color: ${isSignin ? 'black' : 'white'};

src/pages/PageRouter.tsx

@@ -5,27 +5,50 @@ import Todo from './Todo'
 import Signin from './Signin'
 import Signup from './Signup'
 
-interface IPublicRoute {
-  isSignIn: boolean
+interface RouteProps {
+  isAuth: string | null
+  fallback: string
+  children: JSX.Element
+}
+
+function ProtectedRoute({ isAuth, fallback, children }: RouteProps) {
+  return isAuth ? children : <Navigate to={fallback} replace />
+}
+function PublicRoute({ isAuth, fallback, children }: RouteProps) {
+  return isAuth ? <Navigate to={fallback} replace /> : children
 }
 
 function PageRouter() {
   const isAuth = localStorage.getItem('access_token')
 
-  function ProtectedRoute() {
-    return isAuth ? <Todo /> : <Navigate to="/signin" />
-  }
-  function PublicRoute({ isSignIn }: IPublicRoute) {
-    return isAuth ? <Navigate to="/todo" /> : isSignIn ? <Signin /> : <Signup />
-  }
-
   return (
     <BrowserRouter>
       <Routes>
         <Route index element={<Home />} />
-        <Route path="/todo" element={<ProtectedRoute />} />
-        <Route path="/signin" element={<PublicRoute isSignIn={true} />} />
-        <Route path="/signup" element={<PublicRoute isSignIn={false} />} />
+        <Route
+          path="/todo"
+          element={
+            <ProtectedRoute isAuth={isAuth} fallback="/signin">
+              <Todo />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/signin"
+          element={
+            <PublicRoute isAuth={isAuth} fallback="/todo">
+              <Signin />
+            </PublicRoute>
+          }
+        />
+        <Route
+          path="/signup"
+          element={
+            <PublicRoute isAuth={isAuth} fallback="/todo">
+              <Signup />
+            </PublicRoute>
+          }
+        />
       </Routes>
     </BrowserRouter>
   )

src/pages/Signin.tsx

@@ -14,16 +14,22 @@ function Signin() {
       >
         홈으로
       </SampleButton>
+      <button
+        onClick={() => {
+          localStorage.setItem('access_token', '12340')
+          navigate(0)
+        }}
+      >
+        accessToken 추가
+      </button>
     </div>
   )
 }
 
 const SampleButton = styled.div`
   width: fit-content;
   height: fit-content;
-
   background-color: skyblue;
-
   cursor: pointer;
 `
 

src/pages/Signup.tsx

@@ -21,9 +21,7 @@ function Signup() {
 const SampleButton = styled.div`
   width: fit-content;
   height: fit-content;
-
   background-color: skyblue;
-
   cursor: pointer;
 `
 

src/pages/Todo.tsx

@@ -1,9 +1,21 @@
+import { useNavigate } from 'react-router-dom'
 import TodoList from '../components/TodoList/TodoList'
 
 function Todo() {
+  const navigate = useNavigate()
+
   return (
     <div>
+      투두리스트 페이지입니다.
       <TodoList />
+      <button
+        onClick={() => {
+          localStorage.removeItem('access_token')
+          navigate(0)
+        }}
+      >
+        accessToken 삭제
+      </button>
     </div>
   )
 }