diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 3d3fe46..c1e66f7 100644 --- a/src/components/header/header.jsx +++ b/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 ( - 로고 + + 로고 +
{children}
diff --git a/src/layouts/onboarding-layout.jsx b/src/layouts/onboarding-layout.jsx index beab0ed..feb5d44 100644 --- a/src/layouts/onboarding-layout.jsx +++ b/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 ( - <> -
+ + -
-
{children}
- + +
{children}
+ ); } diff --git a/src/pages/rolling-paper-list-page.jsx b/src/pages/rolling-paper-list-page.jsx index 425f9cc..7e780dc 100644 --- a/src/pages/rolling-paper-list-page.jsx +++ b/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;