[#15] Layout component 개발

src/app.jsx

@@ -1,7 +1,13 @@
 import { BrowserRouter, Route, Routes } from "react-router";
 import ModalProvider from "./components/modal/modal-provider";
 import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider";
+import ContentLayout from "./layouts/content-layout";
+import OnboardingLayout from "./layouts/onboarding-layout";
+import CreatePostPage from "./pages/create-post-page";
+import MainPage from "./pages/main-page";
 import MessagePage from "./pages/message-list";
+import RecipientPostPage from "./pages/recipient-post-page";
+import SendMessagePage from "./pages/send-message-page";
 import TestPage from "./pages/test-page";
 
 function Provider({ children }) {
@@ -17,8 +23,49 @@ function App() {
     <Provider>
       <BrowserRouter>
         <Routes>
+          <Route
+            path="/"
+            element={
+              <OnboardingLayout>
+                <MainPage />
+              </OnboardingLayout>
+            }
+          />
+          <Route
+            path="/list"
+            element={
+              <OnboardingLayout>
+                <MessagePage />
+              </OnboardingLayout>
+            }
+          />
+          <Route path="/post">
+            <Route
+              index
+              element={
+                <ContentLayout>
+                  <CreatePostPage />
+                </ContentLayout>
+              }
+            />
+            <Route
+              path=":id/message"
+              element={
+                <ContentLayout>
+                  <SendMessagePage />
+                </ContentLayout>
+              }
+            />
+            <Route
+              path=":id"
+              element={
+                <ContentLayout>
+                  <RecipientPostPage />
+                </ContentLayout>
+              }
+            />
+          </Route>
           <Route path="/test-components" element={<TestPage />} />
-          <Route path="/list" element={<MessagePage />} />
         </Routes>
       </BrowserRouter>
     </Provider>

src/components/header/header.jsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import logoImg from "../../assets/logo.svg";
+import { media } from "../../utils/media";
+
+const HeaderContent = styled.div`
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const StyledHeader = styled.header`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+  border-bottom: 1px solid #ededed;
+  padding: 0 24px;
+
+  ${media.mobile} {
+    padding: 0 16px;
+  }
+`;
+
+function Header({ className, children }) {
+  return (
+    <StyledHeader className={className}>
+      <HeaderContent>
+        <img src={logoImg} alt="로고" />
+        <div>{children}</div>
+      </HeaderContent>
+    </StyledHeader>
+  );
+}
+
+export default Header;

src/layouts/content-layout.jsx

@@ -0,0 +1,12 @@
+import Header from "../components/header/header";
+
+function ContentLayout({ children }) {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+    </>
+  );
+}
+
+export default ContentLayout;

src/layouts/onboarding-layout.jsx

@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router";
+import { OutlinedButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
+import Header from "../components/header/header";
+
+function OnboardingLayout({ children }) {
+  const navigate = useNavigate();
+
+  const handlePostCreate = () => navigate("/post");
+
+  return (
+    <>
+      <Header>
+        <OutlinedButton
+          size={BUTTON_SIZE.medium}
+          title="롤링 페이퍼 만들기"
+          onClick={handlePostCreate}
+        />
+      </Header>
+      <main>{children}</main>
+    </>
+  );
+}
+
+export default OnboardingLayout;

src/pages/create-post-page.jsx

@@ -0,0 +1,5 @@
+function CreatePostPage() {
+  return <h1>Create Post Page</h1>;
+}
+
+export default CreatePostPage;

src/pages/main-page.jsx

@@ -0,0 +1,5 @@
+function MainPage() {
+  return <h1>Main Page</h1>;
+}
+
+export default MainPage;

src/pages/recipient-post-page.jsx

@@ -0,0 +1,5 @@
+function RecipientPostPage() {
+  return <h1>Recipient Post Page</h1>;
+}
+
+export default RecipientPostPage;

src/pages/send-message-page.jsx

@@ -0,0 +1,5 @@
+function SendMessagePage() {
+  return <h1>Send Message Page </h1>;
+}
+
+export default SendMessagePage;

src/pages/test-page.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import styled from "styled-components";
 import smileAddImg from "../assets/ic-face-smile-add.svg";
 import Badge from "../components/badge/badge";
 import BADGE_TYPE from "../components/badge/badge-type";
@@ -12,13 +13,18 @@ import {
 } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import ToggleButton from "../components/button/toggle-button";
+import Header from "../components/header/header";
 import Modal from "../components/modal/modal";
 import TextField from "../components/text-field/text-field";
 import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
 import Toast from "../components/toast/toast";
 import { useModal } from "../hooks/use-modal";
 import { useToast } from "../hooks/use-toast";
 
+const OutlinedHeader = styled(Header)`
+  border: 1px solid black;
+`;
+
 function TestPage() {
   /* Dropdown type TextField */
   const [option1, setOption1] = useState();

src/utils/media.js

@@ -0,0 +1,7 @@
+const media = {
+  desktop: "@media (min-width: 1200px)",
+  tablet: "@media (max-width: 1199px)",
+  mobile: "@media (max-width: 797px)",
+};
+
+export { media };