Merge pull request #97 from cskime/feature/#92

[#92] Header logo를 클릭했을 때 메인 페이지로 이동

Author: cskime

src/components/header/header.jsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router";
 import styled from "styled-components";
 import logoImage from "../../assets/logo.svg";
 import { media } from "../../utils/media";
@@ -27,7 +28,9 @@ function Header({ className, children }) {
   return (
     <StyledHeader className={className}>
       <HeaderContent>
-        <img src={logoImage} alt="로고" />
+        <Link to="/">
+          <img src={logoImage} alt="로고" />
+        </Link>
         <div>{children}</div>
       </HeaderContent>
     </StyledHeader>

src/layouts/onboarding-layout.jsx

@@ -1,24 +1,40 @@
 import { useNavigate } from "react-router";
+import styled from "styled-components";
 import { OutlinedButton } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import Header from "../components/header/header";
 
+const LayoutHeader = styled(Header)`
+  flex-shrink: 0;
+`;
+
+const Main = styled.main`
+  flex-grow: 1;
+  min-height: 100vh - 64px;
+`;
+
+const StyledOnbardingLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+`;
+
 function OnboardingLayout({ children }) {
   const navigate = useNavigate();
 
   const handlePostCreate = () => navigate("/post");
 
   return (
-    <>
-      <Header>
+    <StyledOnbardingLayout>
+      <LayoutHeader>
         <OutlinedButton
           size={BUTTON_SIZE.medium}
           title="롤링 페이퍼 만들기"
           onClick={handlePostCreate}
         />
-      </Header>
-      <main>{children}</main>
-    </>
+      </LayoutHeader>
+      <Main>{children}</Main>
+    </StyledOnbardingLayout>
   );
 }
 

src/pages/rolling-paper-list-page.jsx

@@ -1,17 +1,16 @@
-import { PrimaryButton } from "../components/button/button";
-import BUTTON_SIZE from "../components/button/button-size";
-import React, { useEffect, useState, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 import styled from "styled-components";
+import { apiClient } from "../api/client";
+import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
 import RollingPaperList from "../features/rolling-paper/components/rolling-paper-list";
-import { media } from "../utils/media";
 import { useMedia } from "../hooks/use-media";
-import { apiClient } from "../api/client";
+import { media } from "../utils/media";
 
 const TopContainer = styled.div`
   text-align: center;
   margin-top: 50px;
-  min-height: calc(100vh - 64px);
   display: flex;
   flex-direction: column;
 `;
@@ -72,7 +71,7 @@ function getCachedImage(url) {
   return cache[url].src;
 }
 
-function ShowMessageList() {
+function RollingPaperListPage() {
   const navigate = useNavigate();
 
   const [recipientsData, setRecipientsData] = useState([]);
@@ -188,4 +187,4 @@ function ShowMessageList() {
   );
 }
 
-export default ShowMessageList;
+export default RollingPaperListPage;