From 47814f52c7c10c2f37fde0d0975c1f2a3190833a Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 21:17:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat=20[#15]=20Header=20component=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/logo.svg | 4 ++++ src/components/header/header.jsx | 37 ++++++++++++++++++++++++++++++++ src/pages/test-page.jsx | 6 ++++++ src/utils/media.js | 7 ++++++ 4 files changed, 54 insertions(+) create mode 100644 src/assets/logo.svg create mode 100644 src/components/header/header.jsx create mode 100644 src/utils/media.js 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/pages/test-page.jsx b/src/pages/test-page.jsx index 2ae1ed2..751218a 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,9 +13,14 @@ 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 TextField from "../components/text-field/text-field"; import TEXT_FIELD_TYPE from "../components/text-field/text-field-type"; +const OutlinedHeader = styled(Header)` + border: 1px solid black; +`; + function TestPage() { const [option1, setOption1] = useState(); const [option2, setOption2] = 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 }; From 4e7f9d9922c7637581d16f79cd39a5b2deba9808 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 21:31:34 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat=20[#15]=20`OnboardingLayout`=20compone?= =?UTF-8?q?nt=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.jsx | 19 ++++++++++++++++++- src/layouts/onboarding-layout.jsx | 20 ++++++++++++++++++++ src/pages/main-page.jsx | 5 +++++ 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 src/layouts/onboarding-layout.jsx create mode 100644 src/pages/main-page.jsx diff --git a/src/app.jsx b/src/app.jsx index 7fb23d8..9ac6f65 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,5 +1,7 @@ import { BrowserRouter, Route, Routes } from "react-router"; import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider"; +import OnboardingLayout from "./layouts/onboarding-layout"; +import MainPage from "./pages/main-page"; import MessagePage from "./pages/message-list"; import TestPage from "./pages/test-page"; @@ -8,8 +10,23 @@ function App() { + + + + } + /> + + + + } + /> } /> - } /> diff --git a/src/layouts/onboarding-layout.jsx b/src/layouts/onboarding-layout.jsx new file mode 100644 index 0000000..c85f52d --- /dev/null +++ b/src/layouts/onboarding-layout.jsx @@ -0,0 +1,20 @@ +import { OutlinedButton } from "../components/button/button"; +import BUTTON_SIZE from "../components/button/button-size"; +import Header from "../components/header/header"; + +function OnboardingLayout({ children, onCreate }) { + return ( + <> +
+ +
+
{children}
+ + ); +} + +export default OnboardingLayout; 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; From 223f7e8770e67790dd4d7311c9280904d28e2f0a Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 21:47:21 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat=20[#15]=20`ContentLayout`=20component?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84,=20dummy=20page=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=ED=9B=84=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.jsx | 30 ++++++++++++++++++++++++++++++ src/layouts/content-layout.jsx | 12 ++++++++++++ src/pages/add-post-page.jsx | 5 +++++ src/pages/recipient-post-page.jsx | 5 +++++ src/pages/send-message-page.jsx | 5 +++++ 5 files changed, 57 insertions(+) create mode 100644 src/layouts/content-layout.jsx create mode 100644 src/pages/add-post-page.jsx create mode 100644 src/pages/recipient-post-page.jsx create mode 100644 src/pages/send-message-page.jsx diff --git a/src/app.jsx b/src/app.jsx index 9ac6f65..bf1c3b1 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,8 +1,12 @@ import { BrowserRouter, Route, Routes } from "react-router"; import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider"; +import ContentLayout from "./layouts/content-layout"; import OnboardingLayout from "./layouts/onboarding-layout"; +import AddPostPage from "./pages/add-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 App() { @@ -26,6 +30,32 @@ function App() { } /> + + + + + } + /> + + + + } + /> + + + + } + /> + } /> 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/pages/add-post-page.jsx b/src/pages/add-post-page.jsx new file mode 100644 index 0000000..a2a8a50 --- /dev/null +++ b/src/pages/add-post-page.jsx @@ -0,0 +1,5 @@ +function AddPostPage() { + return

Add Post Page

; +} + +export default AddPostPage; 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; From 900f8ce052a1e4333f4bf1a56034d21fa2a3c563 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 21:49:09 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor=20[#15]=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD:=20`add-post-page`=20->=20`create-post-page`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.jsx | 4 ++-- src/pages/add-post-page.jsx | 5 ----- src/pages/create-post-page.jsx | 5 +++++ 3 files changed, 7 insertions(+), 7 deletions(-) delete mode 100644 src/pages/add-post-page.jsx create mode 100644 src/pages/create-post-page.jsx diff --git a/src/app.jsx b/src/app.jsx index bf1c3b1..448dca1 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router"; import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider"; import ContentLayout from "./layouts/content-layout"; import OnboardingLayout from "./layouts/onboarding-layout"; -import AddPostPage from "./pages/add-post-page"; +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"; @@ -35,7 +35,7 @@ function App() { index element={ - + } /> diff --git a/src/pages/add-post-page.jsx b/src/pages/add-post-page.jsx deleted file mode 100644 index a2a8a50..0000000 --- a/src/pages/add-post-page.jsx +++ /dev/null @@ -1,5 +0,0 @@ -function AddPostPage() { - return

Add Post Page

; -} - -export default AddPostPage; 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; From 32530cda2d6fc268a1e036f050f992f140efd33a Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 21:52:00 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat=20[#15]=20`OnboardingLayout`=20?= =?UTF-8?q?=EB=82=B4=EB=B6=80=EC=97=90=EC=84=9C=20'=EB=A1=A4=EB=A7=81=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=ED=8D=BC=20=EB=A7=8C=EB=93=A4=EA=B8=B0'=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=A7=81?= =?UTF-8?q?=EC=A0=91=20'/post'=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/onboarding-layout.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/layouts/onboarding-layout.jsx b/src/layouts/onboarding-layout.jsx index c85f52d..beab0ed 100644 --- a/src/layouts/onboarding-layout.jsx +++ b/src/layouts/onboarding-layout.jsx @@ -1,15 +1,20 @@ +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, onCreate }) { +function OnboardingLayout({ children }) { + const navigate = useNavigate(); + + const handlePostCreate = () => navigate("/post"); + return ( <>
{children}