From 4d15379d05f2e21b42b5eb4b9e10a3ba4d2b6122 Mon Sep 17 00:00:00 2001
From: "wisdomin121@naver.com" <wisdomin121@naver.com>
Date: Thu, 24 Aug 2023 12:20:47 +0900
Subject: [PATCH 1/5] =?UTF-8?q?style:=20=EB=B2=84=ED=8A=BC=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 'Button'은 기존 태그인 button과 헷갈릴 위험이 있어 'SignButton'으로 수정함
---
 src/pages/Home.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d9a3898..4cc4f16 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -8,31 +8,31 @@ function Home() {
     <StyledHome>
       소개글~
       <ButtonWrapper>
-        <Button
+        <SignButton
           isSignin={false}
           onClick={() => {
             navigate('/signup')
           }}
         >
           회원가입
-        </Button>
-        <Button
+        </SignButton>
+        <SignButton
           isSignin={true}
           onClick={() => {
             navigate('/signin')
           }}
         >
           로그인
-        </Button>
+        </SignButton>
 
-        <Button
+        <SignButton
           isSignin={true}
           onClick={() => {
             navigate('/todo')
           }}
         >
           투두 테스트 버튼
-        </Button>
+        </SignButton>
       </ButtonWrapper>
     </StyledHome>
   )
@@ -59,7 +59,7 @@ const ButtonWrapper = styled.div`
   width: 100%;
 `
 
-const Button = styled.button<{ isSignin: boolean }>`
+const SignButton = styled.button<{ isSignin: boolean }>`
   width: 100%;
   height: 32px;
   max-width: 425px;

From 0c4977290791064913c42eaf14edfeb8b62aca47 Mon Sep 17 00:00:00 2001
From: "wisdomin121@naver.com" <wisdomin121@naver.com>
Date: Thu, 24 Aug 2023 12:24:01 +0900
Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EA=B3=B5=EB=B0=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 스타일에 있는 공백을 제거하였습니다.
- Home.tsx에 있던 버튼 사이의 공백을 제거하였습니다.
---
 src/pages/Home.tsx   | 7 +------
 src/pages/Signin.tsx | 2 --
 src/pages/Signup.tsx | 2 --
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4cc4f16..eccd958 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -24,7 +24,6 @@ function Home() {
         >
           로그인
         </SignButton>
-
         <SignButton
           isSignin={true}
           onClick={() => {
@@ -44,7 +43,6 @@ const StyledHome = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 20px;
-
   width: 100%;
   height: 100vh;
 `
@@ -55,7 +53,6 @@ const ButtonWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 10px;
-
   width: 100%;
 `
 
@@ -63,11 +60,9 @@ 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'};
diff --git a/src/pages/Signin.tsx b/src/pages/Signin.tsx
index cfb16cd..67e8be6 100644
--- a/src/pages/Signin.tsx
+++ b/src/pages/Signin.tsx
@@ -21,9 +21,7 @@ function Signin() {
 const SampleButton = styled.div`
   width: fit-content;
   height: fit-content;
-
   background-color: skyblue;
-
   cursor: pointer;
 `
 
diff --git a/src/pages/Signup.tsx b/src/pages/Signup.tsx
index 43ea17f..97abbd7 100644
--- a/src/pages/Signup.tsx
+++ b/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;
 `
 

From ee1041668c5fde08c725acc55500f44a2b9f21b9 Mon Sep 17 00:00:00 2001
From: "wisdomin121@naver.com" <wisdomin121@naver.com>
Date: Thu, 24 Aug 2023 13:02:58 +0900
Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=ED=97=9D=EA=B0=80=EB=A6=AC?=
 =?UTF-8?q?=EC=95=88=20=ED=91=9C=EA=B8=B0=EB=B2=95=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 파스칼 케이스로 변경 (IPublicRoute -> PublicRouteProps)
---
 src/pages/PageRouter.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/PageRouter.tsx b/src/pages/PageRouter.tsx
index 520447b..8a06353 100644
--- a/src/pages/PageRouter.tsx
+++ b/src/pages/PageRouter.tsx
@@ -5,7 +5,7 @@ import Todo from './Todo'
 import Signin from './Signin'
 import Signup from './Signup'
 
-interface IPublicRoute {
+interface PublicRouteProps {
   isSignIn: boolean
 }
 
@@ -15,7 +15,7 @@ function PageRouter() {
   function ProtectedRoute() {
     return isAuth ? <Todo /> : <Navigate to="/signin" />
   }
-  function PublicRoute({ isSignIn }: IPublicRoute) {
+  function PublicRoute({ isSignIn }: PublicRouteProps) {
     return isAuth ? <Navigate to="/todo" /> : isSignIn ? <Signin /> : <Signup />
   }
 

From d7a96c2a5d3a73fa606669e83b9bbfa10d323b05 Mon Sep 17 00:00:00 2001
From: "wisdomin121@naver.com" <wisdomin121@naver.com>
Date: Thu, 24 Aug 2023 13:36:08 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=84=EB=9E=B5=20=EC=9E=AC=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존 라우트 전략은 삼항 연산자를 사용하는 방법이었는데,
  그러면 페이지 수가 많아질 때 관리하기 힘들다는 단점이 있었음
- 삼항 연산자 대신 props로 children을 받아 return 시키는 방법 선택함
- 페이지 수에 관계 없이 원하는 route를 붙이면 되니까 좀 더 효율적이라고 생각함
---
 src/pages/PageRouter.tsx | 46 +++++++++++++++++++++++++++++-----------
 src/pages/Signin.tsx     |  8 +++++++
 src/pages/Todo.tsx       | 18 +++++++++++++++-
 3 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/src/pages/PageRouter.tsx b/src/pages/PageRouter.tsx
index 8a06353..0fac433 100644
--- a/src/pages/PageRouter.tsx
+++ b/src/pages/PageRouter.tsx
@@ -5,27 +5,49 @@ import Todo from './Todo'
 import Signin from './Signin'
 import Signup from './Signup'
 
-interface PublicRouteProps {
-  isSignIn: boolean
+interface RouteProps {
+  isAuth: string | null
+  children: JSX.Element
+}
+
+function ProtectedRoute({ isAuth, children }: RouteProps) {
+  return isAuth ? children : <Navigate to="/signin" replace />
+}
+function PublicRoute({ isAuth, children }: RouteProps) {
+  return isAuth ? <Navigate to="/todo" replace /> : children
 }
 
 function PageRouter() {
   const isAuth = localStorage.getItem('access_token')
 
-  function ProtectedRoute() {
-    return isAuth ? <Todo /> : <Navigate to="/signin" />
-  }
-  function PublicRoute({ isSignIn }: PublicRouteProps) {
-    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}>
+              <Todo />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/signin"
+          element={
+            <PublicRoute isAuth={isAuth}>
+              <Signin />
+            </PublicRoute>
+          }
+        />
+        <Route
+          path="/signup"
+          element={
+            <PublicRoute isAuth={isAuth}>
+              <Signup />
+            </PublicRoute>
+          }
+        />
       </Routes>
     </BrowserRouter>
   )
diff --git a/src/pages/Signin.tsx b/src/pages/Signin.tsx
index 67e8be6..fec89a5 100644
--- a/src/pages/Signin.tsx
+++ b/src/pages/Signin.tsx
@@ -14,6 +14,14 @@ function Signin() {
       >
         홈으로
       </SampleButton>
+      <button
+        onClick={() => {
+          localStorage.setItem('access_token', '12340')
+          navigate(0)
+        }}
+      >
+        accessToken 추가
+      </button>
     </div>
   )
 }
diff --git a/src/pages/Todo.tsx b/src/pages/Todo.tsx
index c2a88ed..511d213 100644
--- a/src/pages/Todo.tsx
+++ b/src/pages/Todo.tsx
@@ -1,5 +1,21 @@
+import { useNavigate } from 'react-router-dom'
+
 function Todo() {
-  return <div>투두리스트 페이지입니다.</div>
+  const navigate = useNavigate()
+
+  return (
+    <div>
+      투두리스트 페이지입니다.
+      <button
+        onClick={() => {
+          localStorage.removeItem('access_token')
+          navigate(0)
+        }}
+      >
+        accessToken 삭제
+      </button>
+    </div>
+  )
 }
 
 export default Todo

From 6038deef1f6e6c323533c3fac211887b8a52c0d8 Mon Sep 17 00:00:00 2001
From: "wisdomin121@naver.com" <wisdomin121@naver.com>
Date: Thu, 24 Aug 2023 14:57:00 +0900
Subject: [PATCH 5/5] =?UTF-8?q?chore:=20ProtectedRoute,=20PublicRoute?=
 =?UTF-8?q?=EC=97=90=20fallback=20props=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fallback은 navigate to에 들어가는 props로, 유연하게 리다이렉트 시킬 수 있다.
---
 src/pages/PageRouter.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/PageRouter.tsx b/src/pages/PageRouter.tsx
index 0fac433..5d9c4b6 100644
--- a/src/pages/PageRouter.tsx
+++ b/src/pages/PageRouter.tsx
@@ -7,14 +7,15 @@ import Signup from './Signup'
 
 interface RouteProps {
   isAuth: string | null
+  fallback: string
   children: JSX.Element
 }
 
-function ProtectedRoute({ isAuth, children }: RouteProps) {
-  return isAuth ? children : <Navigate to="/signin" replace />
+function ProtectedRoute({ isAuth, fallback, children }: RouteProps) {
+  return isAuth ? children : <Navigate to={fallback} replace />
 }
-function PublicRoute({ isAuth, children }: RouteProps) {
-  return isAuth ? <Navigate to="/todo" replace /> : children
+function PublicRoute({ isAuth, fallback, children }: RouteProps) {
+  return isAuth ? <Navigate to={fallback} replace /> : children
 }
 
 function PageRouter() {
@@ -27,7 +28,7 @@ function PageRouter() {
         <Route
           path="/todo"
           element={
-            <ProtectedRoute isAuth={isAuth}>
+            <ProtectedRoute isAuth={isAuth} fallback="/signin">
               <Todo />
             </ProtectedRoute>
           }
@@ -35,7 +36,7 @@ function PageRouter() {
         <Route
           path="/signin"
           element={
-            <PublicRoute isAuth={isAuth}>
+            <PublicRoute isAuth={isAuth} fallback="/todo">
               <Signin />
             </PublicRoute>
           }
@@ -43,7 +44,7 @@ function PageRouter() {
         <Route
           path="/signup"
           element={
-            <PublicRoute isAuth={isAuth}>
+            <PublicRoute isAuth={isAuth} fallback="/todo">
               <Signup />
             </PublicRoute>
           }