feat : 로그인 페이지로 이동 가능하게 추가 구현

week4-api-signin/src/Router.jsx

@@ -2,13 +2,13 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Login from "./pages/Login";
 import SignUp from "./pages/SignUp";
 import MyPage from "./pages/MyPage";
-import PageLayout from "./components/PageLayout";
+import Home from "./pages/Home";
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<PageLayout />} />
+        <Route path="/" element={<Home />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/mypage/:userId" element={<MyPage />} />

week4-api-signin/src/components/PageLayout.jsx

@@ -1,13 +1,18 @@
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 const PageLayout = ({ children }) => {
+  const navigate = useNavigate();
+
   return (
     <St.PageLayoutBackGround>
       <St.PageLayoutBody>
         <St.PageLayoutTopBar>
           <TopBarBlueBtn type="button">_</TopBarBlueBtn>
           <TopBarBlueBtn type="button">ᄆ</TopBarBlueBtn>
-          <TopBarRedBtn type="button">X</TopBarRedBtn>
+          <TopBarRedBtn type="button" onClick={() => navigate("/")}>
+            X
+          </TopBarRedBtn>
         </St.PageLayoutTopBar>
 
         <St.PageLayoutContentsContainer>

week4-api-signin/src/pages/Home.jsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import PageLayout from "../components/PageLayout";
+
+import { useNavigate } from "react-router-dom";
+
+const Home = () => {
+  const navigate = useNavigate();
+
+  return (
+    <PageLayout>
+      <St.GoToLoginBtn type="button" onClick={() => navigate("/login")}>
+        로그인 하러 가기
+      </St.GoToLoginBtn>
+    </PageLayout>
+  );
+};
+
+export default Home;
+
+const St = {
+  GoToLoginBtn: styled.button`
+    width: 20rem;
+    height: 5rem;
+
+    border-radius: 1rem;
+
+    background-color: ${({ theme }) => theme.colors.blue};
+    color: ${({ theme }) => theme.colors.white};
+
+    font-size: 2rem;
+
+    &::hover {
+      box-shadow: 0 0 1rem ${({ theme }) => theme.colors.blue};
+    }
+  `,
+};