diff --git a/src/app.jsx b/src/app.jsx index 47815ca..d3303ef 100644 --- a/src/app.jsx +++ b/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() { + + + + } + /> + + + + } + /> + + + + + } + /> + + + + } + /> + + + + } + /> + } /> - } /> diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..43d1c8e --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx new file mode 100644 index 0000000..1ec8714 --- /dev/null +++ b/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 ( + + + 로고 +
{children}
+ + + ); +} + +export default Header; diff --git a/src/layouts/content-layout.jsx b/src/layouts/content-layout.jsx new file mode 100644 index 0000000..d6b6307 --- /dev/null +++ b/src/layouts/content-layout.jsx @@ -0,0 +1,12 @@ +import Header from "../components/header/header"; + +function ContentLayout({ children }) { + return ( + <> +
+
{children}
+ + ); +} + +export default ContentLayout; diff --git a/src/layouts/onboarding-layout.jsx b/src/layouts/onboarding-layout.jsx new file mode 100644 index 0000000..beab0ed --- /dev/null +++ b/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 ( + <> +
+ +
+
{children}
+ + ); +} + +export default OnboardingLayout; diff --git a/src/pages/create-post-page.jsx b/src/pages/create-post-page.jsx new file mode 100644 index 0000000..9645cf3 --- /dev/null +++ b/src/pages/create-post-page.jsx @@ -0,0 +1,5 @@ +function CreatePostPage() { + return

Create Post Page

; +} + +export default CreatePostPage; diff --git a/src/pages/main-page.jsx b/src/pages/main-page.jsx new file mode 100644 index 0000000..a1d2cba --- /dev/null +++ b/src/pages/main-page.jsx @@ -0,0 +1,5 @@ +function MainPage() { + return

Main Page

; +} + +export default MainPage; diff --git a/src/pages/recipient-post-page.jsx b/src/pages/recipient-post-page.jsx new file mode 100644 index 0000000..26765cb --- /dev/null +++ b/src/pages/recipient-post-page.jsx @@ -0,0 +1,5 @@ +function RecipientPostPage() { + return

Recipient Post Page

; +} + +export default RecipientPostPage; diff --git a/src/pages/send-message-page.jsx b/src/pages/send-message-page.jsx new file mode 100644 index 0000000..9bab5b6 --- /dev/null +++ b/src/pages/send-message-page.jsx @@ -0,0 +1,5 @@ +function SendMessagePage() { + return

Send Message Page

; +} + +export default SendMessagePage; diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 09c822d..c254524 100644 --- a/src/pages/test-page.jsx +++ b/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,6 +13,7 @@ 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"; @@ -19,6 +21,10 @@ 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(); diff --git a/src/utils/media.js b/src/utils/media.js new file mode 100644 index 0000000..a389097 --- /dev/null +++ b/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 };