feat : #2 라우트 설정 + 기본 페이지 레이아웃 추가 (#6)

# Description
라우트 설정과 기폰 페이지 레이아웃을 추가했습니다.

@SeungrokYoon 님과 함께 LiveShare로 페어 프로그래밍을 하였습니다 ~!

## Changes
- 라우터 설정을 하였습니다. 
  - pages/PageRouter 파일을 하나 만들어서 라우터를 관리했습니다.
  - ProtectRoute와 PublicRoute를 만들어서 리다이렉트를 시켰습니다.

- 기본 페이지 레이아웃을 추가했습니다.
- Home : 제일 기본이 되는 페이지로 로그인 버튼과 회원가입 버튼을 달아두어 이동할 수 있게 했고, 라우터 테스트용으로
/todo로 이동하는 버튼을 추가로 만들었습니다.
  - 나머지 페이지에는 테스트용으로 Home으로 갈 수 있는 버튼을 달아두었습니다.



https://github.com/wanted-pre-onboarding-team-12th-7/pre-onboarding-12th-1-7/assets/46989954/ce2888db-454a-4040-a9ab-44e3f5e270cb

close #2

src/App.tsx

@@ -1,5 +1,18 @@
+import { styled } from 'styled-components'
+
+import PageRouter from './pages/PageRouter'
+
 function App() {
-  return <div className="App">App</div>
+  return (
+    <CommonLayout>
+      <PageRouter />
+    </CommonLayout>
+  )
 }
 
+const CommonLayout = styled.div`
+  width: 100%;
+  height: 100vh;
+`
+
 export default App

src/apis/instance.ts

@@ -1,3 +1,16 @@
 import axios from 'axios'
 
-export const axiosInstance = axios.create({})
+const BASE_URL = 'https://www.pre-onboarding-selection-task.shop/'
+
+export const NoAuthInstance = axios.create({ 
+  baseURL: BASE_URL, 
+  headers: { "Content-Type": "application/json" } 
+})
+
+export const AuthInstance = axios.create({
+  baseURL: BASE_URL, 
+  headers: { 
+    "Content-Type": "application/json", 
+    Authorization: `Bearer ${localStorage.getItem('access_token')}`
+  }
+})

src/pages/Home.tsx

@@ -1,5 +1,73 @@
+import { useNavigate } from 'react-router-dom'
+import { css, styled } from 'styled-components'
+
 function Home() {
-  return <div>Home</div>
+  const navigate = useNavigate()
+
+  return (
+    <StyledHome>
+      소개글~
+      <ButtonWrapper>
+        <SignButton
+          isSignin={false}
+          onClick={() => {
+            navigate('/signup')
+          }}
+        >
+          회원가입
+        </SignButton>
+        <SignButton
+          isSignin={true}
+          onClick={() => {
+            navigate('/signin')
+          }}
+        >
+          로그인
+        </SignButton>
+        <SignButton
+          isSignin={true}
+          onClick={() => {
+            navigate('/todo')
+          }}
+        >
+          투두 테스트 버튼
+        </SignButton>
+      </ButtonWrapper>
+    </StyledHome>
+  )
 }
 
+const StyledHome = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  height: 100vh;
+`
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+`
+
+const SignButton = styled.button<{ isSignin: boolean }>`
+  width: 100%;
+  height: 32px;
+  max-width: 425px;
+  border: 1px solid gray;
+  border-radius: 5px;
+  cursor: pointer;
+
+  ${({ isSignin }) => css`
+    background-color: ${isSignin ? 'black' : 'white'};
+    color: ${isSignin ? 'white' : 'black'};
+  `}
+`
+
 export default Home

src/pages/PageRouter.tsx

@@ -0,0 +1,57 @@
+import { Navigate, Route, BrowserRouter, Routes } from 'react-router-dom'
+
+import Home from './Home'
+import Todo from './Todo'
+import Signin from './Signin'
+import Signup from './Signup'
+
+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')
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<Home />} />
+        <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>
+  )
+}
+
+export default PageRouter

src/pages/Signin.tsx

@@ -1,5 +1,36 @@
+import { useNavigate } from 'react-router-dom'
+import { styled } from 'styled-components'
+
 function Signin() {
-  return <div>Signin</div>
+  const navigate = useNavigate()
+
+  return (
+    <div>
+      로그인 페이지입니다
+      <SampleButton
+        onClick={() => {
+          navigate('/')
+        }}
+      >
+        홈으로
+      </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;
+`
+
 export default Signin

src/pages/Signup.tsx

@@ -1,5 +1,28 @@
+import { useNavigate } from 'react-router-dom'
+import { styled } from 'styled-components'
+
 function Signup() {
-  return <div>Signup</div>
+  const navigate = useNavigate()
+
+  return (
+    <div>
+      회원가입 페이지입니다
+      <SampleButton
+        onClick={() => {
+          navigate('/')
+        }}
+      >
+        홈으로
+      </SampleButton>
+    </div>
+  )
 }
 
+const SampleButton = styled.div`
+  width: fit-content;
+  height: fit-content;
+  background-color: skyblue;
+  cursor: pointer;
+`
+
 export default Signup

src/pages/Todo.tsx

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