From b69c5c36c8d1050c6f81e103e0706a98188872ce Mon Sep 17 00:00:00 2001 From: lgrin-byte Date: Sun, 2 Feb 2025 14:55:39 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=EB=84=A4?= =?UTF-8?q?=EB=B8=8C=EB=B0=94=20=EB=B0=8F=20=EB=84=A4=EB=B8=8C=EB=B0=94=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 --- .../ReceiptEdit/ReceiptEdit.module.css | 53 +++++++++++++++++++ src/components/common/Navbar.module.scss | 5 -- src/components/common/Navbar.tsx | 7 --- src/components/ui/ArrowNavbar/ArrowNavbar.tsx | 21 ++++++++ src/components/ui/CloseNavbar/CloseNavbar.tsx | 15 ++++++ src/components/ui/HomeNavbar/HomeNavbar.tsx | 24 +++++++++ src/components/ui/Navbar/BaseNavartypes.ts | 14 +++++ src/components/ui/Navbar/NavButton.tsx | 36 +++++++++++++ src/components/ui/Navbar/Navbar.module.css | 44 +++++++++++++++ src/components/ui/Navbar/Navbar.module.scss | 47 ++++++++++++++++ src/components/ui/Navbar/Navbar.stories.tsx | 39 ++++++++++++++ src/components/ui/Navbar/Navbar.tsx | 25 +++++++++ src/pages/HomePage.tsx | 4 +- src/pages/ReceiptEditPage.tsx | 4 +- src/pages/RecognitionFailPage.tsx | 4 +- 15 files changed, 324 insertions(+), 18 deletions(-) create mode 100644 src/components/ReceiptEdit/ReceiptEdit.module.css delete mode 100644 src/components/common/Navbar.module.scss delete mode 100644 src/components/common/Navbar.tsx create mode 100644 src/components/ui/ArrowNavbar/ArrowNavbar.tsx create mode 100644 src/components/ui/CloseNavbar/CloseNavbar.tsx create mode 100644 src/components/ui/HomeNavbar/HomeNavbar.tsx create mode 100644 src/components/ui/Navbar/BaseNavartypes.ts create mode 100644 src/components/ui/Navbar/NavButton.tsx create mode 100644 src/components/ui/Navbar/Navbar.module.css create mode 100644 src/components/ui/Navbar/Navbar.module.scss create mode 100644 src/components/ui/Navbar/Navbar.stories.tsx create mode 100644 src/components/ui/Navbar/Navbar.tsx diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.css b/src/components/ReceiptEdit/ReceiptEdit.module.css new file mode 100644 index 0000000..9f7afef --- /dev/null +++ b/src/components/ReceiptEdit/ReceiptEdit.module.css @@ -0,0 +1,53 @@ +.ReceiptEdit { + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-bottom: 2.5rem; + height: calc(100vh - 2.75rem); + overflow: hidden; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + background: var(--color-bg-gradient); +} +.ReceiptEdit::before { + content: ""; + background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat; + background-size: 100% 16.375rem; + filter: blur(4.625rem); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +.Top { + z-index: 1; +} +.Top .TitleBox { + display: flex; + justify-content: center; + margin-top: 2.5rem; +} + +.InfoList { + display: flex; + flex-direction: column; + gap: 0.875rem; + margin-top: 1.5rem; +} + +.InfoItem { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.Bottom { + display: flex; + align-items: center; + gap: 0.875rem; + z-index: 1; +} \ No newline at end of file diff --git a/src/components/common/Navbar.module.scss b/src/components/common/Navbar.module.scss deleted file mode 100644 index 1f73a80..0000000 --- a/src/components/common/Navbar.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.Navbar { - width: 100%; - height: 2.75rem; - background-color: red; -} diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx deleted file mode 100644 index d70d5ff..0000000 --- a/src/components/common/Navbar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import styles from "@/components/common/Navbar.module.scss"; - -const Navbar = () => { - return
Navbar
; -}; - -export default Navbar; diff --git a/src/components/ui/ArrowNavbar/ArrowNavbar.tsx b/src/components/ui/ArrowNavbar/ArrowNavbar.tsx new file mode 100644 index 0000000..ea8179d --- /dev/null +++ b/src/components/ui/ArrowNavbar/ArrowNavbar.tsx @@ -0,0 +1,21 @@ +import { useNavigate } from "react-router-dom"; + +import Navbar from "@/components/ui/Navbar/Navbar"; + +export default function ArrowNavbar() { + const navigate = useNavigate(); + + const onBackBtn = () => { + navigate(-1); + }; + + return ( + + ); +} diff --git a/src/components/ui/CloseNavbar/CloseNavbar.tsx b/src/components/ui/CloseNavbar/CloseNavbar.tsx new file mode 100644 index 0000000..780c345 --- /dev/null +++ b/src/components/ui/CloseNavbar/CloseNavbar.tsx @@ -0,0 +1,15 @@ +import { useNavigate } from "react-router-dom"; + +import Navbar from "@/components/ui/Navbar/Navbar"; + +export default function CloseNavbar() { + const navigate = useNavigate(); + + const onClose = () => { + navigate("/"); + }; + + return ( + + ); +} diff --git a/src/components/ui/HomeNavbar/HomeNavbar.tsx b/src/components/ui/HomeNavbar/HomeNavbar.tsx new file mode 100644 index 0000000..afa9e24 --- /dev/null +++ b/src/components/ui/HomeNavbar/HomeNavbar.tsx @@ -0,0 +1,24 @@ +import Text from "../Text/Text"; + +import Navbar from "@/components/ui/Navbar/Navbar"; + +export default function SecondaryNavbar() { + return ( + {}, + }} + rightButton={{ + content: ( + + 앱 공유하기 + + ), + onClick: () => {}, + }} + > + ); +} diff --git a/src/components/ui/Navbar/BaseNavartypes.ts b/src/components/ui/Navbar/BaseNavartypes.ts new file mode 100644 index 0000000..e4c4ab4 --- /dev/null +++ b/src/components/ui/Navbar/BaseNavartypes.ts @@ -0,0 +1,14 @@ +import type { HTMLAttributes } from "react"; + +export interface NavbarButtonProps { + className?: string; + icon?: string; + alt?: string; + onClick?: () => void; + content?: React.ReactNode; +} + +export interface BaseNavbarProps extends HTMLAttributes { + leftButton?: NavbarButtonProps; + rightButton?: NavbarButtonProps; +} diff --git a/src/components/ui/Navbar/NavButton.tsx b/src/components/ui/Navbar/NavButton.tsx new file mode 100644 index 0000000..c77d9fd --- /dev/null +++ b/src/components/ui/Navbar/NavButton.tsx @@ -0,0 +1,36 @@ +// NavbarButton.tsx (같은 파일 or 분리) +import React from "react"; + +import classNames from "classnames"; + +import type { NavbarButtonProps } from "@/components/ui/Navbar/BaseNavartypes"; +import styles from "@/components/ui/Navbar/Navbar.module.scss"; + +interface BaseNavbarProps { + buttonProps?: NavbarButtonProps; + defaultAlt?: string; +} + +const NavbarButton: React.FC = ({ buttonProps, defaultAlt }) => { + if (!buttonProps) return null; + const { className, content, icon, alt, onClick } = buttonProps; + + const computedClassName = className === "logo" ? classNames(styles.Logo) : classNames(className); + + return ( + + ) : ( + {alt + )} + + ); +}; + +export default NavbarButton; diff --git a/src/components/ui/Navbar/Navbar.module.css b/src/components/ui/Navbar/Navbar.module.css new file mode 100644 index 0000000..c959f78 --- /dev/null +++ b/src/components/ui/Navbar/Navbar.module.css @@ -0,0 +1,44 @@ +@charset "UTF-8"; +.NavbarStory { + display: flex; + flex-direction: column; + gap: 1rem; +} +.NavbarStory .Wrapper { + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; +} + +.Navbar { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 2.75rem; + padding: 0.75rem 1.25rem; + background-color: #fff; /* 배경색 (흰색) */ +} + +.Left, +.Right { + display: flex; + align-items: center; + flex: 0 0 auto; +} + +button { + background: none; + border: none; + cursor: pointer; +} +button .Logo { + height: 1.75rem; + vertical-align: bottom; + cursor: auto; +} +button img { + -o-object-fit: contain; + object-fit: contain; +} \ No newline at end of file diff --git a/src/components/ui/Navbar/Navbar.module.scss b/src/components/ui/Navbar/Navbar.module.scss new file mode 100644 index 0000000..5c006e2 --- /dev/null +++ b/src/components/ui/Navbar/Navbar.module.scss @@ -0,0 +1,47 @@ +.NavbarStory { + display: flex; + flex-direction: column; + gap: 1rem; + + .Wrapper { + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + } +} + +.Navbar { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 2.75rem; + padding: 0.75rem 1.25rem; + background-color: #fff; /* 배경색 (흰색) */ +} + +.Left, +.Right { + display: flex; + align-items: center; + flex: 0 0 auto; +} + +button { + padding: 0; + margin: 0; + background: none; + border: none; + cursor: pointer; + height: 100%; + .Logo { + height: 1.75rem; + vertical-align: bottom; + cursor: auto; + } + + img { + object-fit: contain; + } +} diff --git a/src/components/ui/Navbar/Navbar.stories.tsx b/src/components/ui/Navbar/Navbar.stories.tsx new file mode 100644 index 0000000..51d9c6e --- /dev/null +++ b/src/components/ui/Navbar/Navbar.stories.tsx @@ -0,0 +1,39 @@ +import { MemoryRouter } from "react-router-dom"; + +import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar"; +import CloseNavbar from "@/components/ui/CloseNavbar/CloseNavbar"; +import HomeNavbar from "@/components/ui/HomeNavbar/HomeNavbar"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Components/Navbars", + decorators: [ + (Story) => ( + +
+ +
+ + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const CloseNavbarStory: Story = { + name: "CloseNavbar", + render: () => , +}; + +export const ArrowNavbarStory: Story = { + name: "ArrowNavbar", + render: () => , +}; + +export const HomeNavbarStory: Story = { + name: "HomeNavbar", + render: () => , +}; diff --git a/src/components/ui/Navbar/Navbar.tsx b/src/components/ui/Navbar/Navbar.tsx new file mode 100644 index 0000000..08cc29a --- /dev/null +++ b/src/components/ui/Navbar/Navbar.tsx @@ -0,0 +1,25 @@ +// BaseNavbar.tsx +import React from "react"; + +import classNames from "classnames"; + +import NavbarButton from "../Navbar/NavButton"; + +import type { BaseNavbarProps } from "@/components/ui/Navbar/BaseNavartypes"; +import styles from "@/components/ui/Navbar/Navbar.module.scss"; + +const Navbar: React.FC = ({ leftButton, rightButton, ...props }) => { + return ( + + ); +}; + +export default Navbar; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 788c024..436959f 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,10 +1,10 @@ -import Navbar from "@/components/common/Navbar"; import Home from "@/components/Home/Home"; +import HomeNavbar from "@/components/ui/HomeNavbar/HomeNavbar"; const HomePage = () => { return ( <> - + ); diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx index fbbd80b..e630c2f 100644 --- a/src/pages/ReceiptEditPage.tsx +++ b/src/pages/ReceiptEditPage.tsx @@ -1,10 +1,10 @@ -import Navbar from "@/components/common/Navbar"; import ReceiptEdit from "@/components/ReceiptEdit/ReceiptEdit"; +import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar"; const ReceiptEditPage = () => { return ( <> - + ); diff --git a/src/pages/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage.tsx index fdb90c9..32a8eda 100644 --- a/src/pages/RecognitionFailPage.tsx +++ b/src/pages/RecognitionFailPage.tsx @@ -1,10 +1,10 @@ -import Navbar from "@/components/common/Navbar"; import RecognitionFail from "@/components/RecognitionFail/RecognitionFail"; +import CloseNavbar from "@/components/ui/CloseNavbar/CloseNavbar"; const RecognitionFailPage = () => { return ( <> - + ); From 821ee5bb885159075736854d1802129c045e693b Mon Sep 17 00:00:00 2001 From: sikkzz Date: Sun, 2 Feb 2025 16:16:12 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20navbar=20compound=20=ED=8C=A8?= =?UTF-8?q?=ED=84=B4=20=EC=BD=94=EB=93=9C=20=EC=98=88=EC=8B=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/ic-logo.svg | 41 +++++++++++++++++++ src/components/ui/Icon/Icon.tsx | 5 ++- .../ui/NavbarV2/NavbarV2.module.scss | 17 ++++++++ src/components/ui/NavbarV2/NavbarV2.tsx | 36 ++++++++++++++++ src/pages/HomePage.tsx | 23 ++++++++++- src/pages/ReceiptEditPage.tsx | 10 ++++- src/pages/RecognitionFailPage.tsx | 10 ++++- 7 files changed, 135 insertions(+), 7 deletions(-) create mode 100644 src/assets/svg/ic-logo.svg create mode 100644 src/components/ui/NavbarV2/NavbarV2.module.scss create mode 100644 src/components/ui/NavbarV2/NavbarV2.tsx diff --git a/src/assets/svg/ic-logo.svg b/src/assets/svg/ic-logo.svg new file mode 100644 index 0000000..263293a --- /dev/null +++ b/src/assets/svg/ic-logo.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ui/Icon/Icon.tsx b/src/components/ui/Icon/Icon.tsx index 6cbdeb0..fc51337 100644 --- a/src/components/ui/Icon/Icon.tsx +++ b/src/components/ui/Icon/Icon.tsx @@ -4,6 +4,7 @@ import CloseIcon from "@/assets/svg/ic-close.svg?react"; import EmptyCircleIcon from "@/assets/svg/ic-empty-circle.svg?react"; import GalleryIcon from "@/assets/svg/ic-gallery.svg?react"; import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react"; +import LogoIcon from "@/assets/svg/ic-logo.svg?react"; import PasteIcon from "@/assets/svg/ic-paste.svg?react"; import PlusIcon from "@/assets/svg/ic-plus.svg?react"; @@ -15,7 +16,8 @@ export type IconNameType = | "paste" | "plus" | "checkCircle" - | "emptyCircle"; + | "emptyCircle" + | "logo"; export interface IconProps { name: IconNameType; @@ -30,6 +32,7 @@ export const ICONS = { plus: PlusIcon, checkCircle: CheckCircleIcon, emptyCircle: EmptyCircleIcon, + logo: LogoIcon, }; // 추후 사이즈, 컬러등 추가 가능 diff --git a/src/components/ui/NavbarV2/NavbarV2.module.scss b/src/components/ui/NavbarV2/NavbarV2.module.scss new file mode 100644 index 0000000..2997a96 --- /dev/null +++ b/src/components/ui/NavbarV2/NavbarV2.module.scss @@ -0,0 +1,17 @@ +.NavbarV2 { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 2.75rem; + padding: 0.75rem 1.25rem; + background-color: var(--color-white); + + button { + display: flex; + } +} + +.RightButton { + margin-left: auto; +} diff --git a/src/components/ui/NavbarV2/NavbarV2.tsx b/src/components/ui/NavbarV2/NavbarV2.tsx new file mode 100644 index 0000000..3867212 --- /dev/null +++ b/src/components/ui/NavbarV2/NavbarV2.tsx @@ -0,0 +1,36 @@ +import type { ButtonHTMLAttributes, PropsWithChildren } from "react"; + +import classNames from "classnames"; + +import styles from "@/components/ui/NavbarV2/NavbarV2.module.scss"; + +const NavbarV2 = ({ children }: PropsWithChildren) => { + return
{children}
; +}; + +NavbarV2.LeftButton = ({ + children, + // 확장성 고려해서 className 추가 현재 디자인상에서는 사실 필요 없기는 함 + className, + ...props +}: ButtonHTMLAttributes) => { + return ( + + ); +}; + +NavbarV2.RightButton = ({ + children, + className, + ...props +}: ButtonHTMLAttributes) => { + return ( + + ); +}; + +export default NavbarV2; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 436959f..16f3755 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,10 +1,29 @@ +import { useNavigate } from "react-router-dom"; + import Home from "@/components/Home/Home"; -import HomeNavbar from "@/components/ui/HomeNavbar/HomeNavbar"; +import Icon from "@/components/ui/Icon/Icon"; +import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; +import Text from "@/components/ui/Text/Text"; const HomePage = () => { + const navigate = useNavigate(); + + const handleLogoClick = () => { + navigate("/"); + }; return ( <> - + + + + + + + 앱 공유하기 + + + + ); diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx index e630c2f..55631e5 100644 --- a/src/pages/ReceiptEditPage.tsx +++ b/src/pages/ReceiptEditPage.tsx @@ -1,10 +1,16 @@ import ReceiptEdit from "@/components/ReceiptEdit/ReceiptEdit"; -import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar"; +import Icon from "@/components/ui/Icon/Icon"; +import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const ReceiptEditPage = () => { return ( <> - + + + + + + ); diff --git a/src/pages/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage.tsx index 32a8eda..9a509cb 100644 --- a/src/pages/RecognitionFailPage.tsx +++ b/src/pages/RecognitionFailPage.tsx @@ -1,10 +1,16 @@ import RecognitionFail from "@/components/RecognitionFail/RecognitionFail"; -import CloseNavbar from "@/components/ui/CloseNavbar/CloseNavbar"; +import Icon from "@/components/ui/Icon/Icon"; +import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const RecognitionFailPage = () => { return ( <> - + + + + + + ); From 97f5f6cd2920f49736bb4a299e181df1961e8f56 Mon Sep 17 00:00:00 2001 From: lgrin-byte Date: Tue, 4 Feb 2025 01:47:02 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=84=A4=EB=B9=84=EB=B0=94=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SelectStylePage.tsx | 9 +++++++-- src/pages/SelectTagPage.tsx | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/pages/SelectStylePage.tsx b/src/pages/SelectStylePage.tsx index 346aecb..f8ca38a 100644 --- a/src/pages/SelectStylePage.tsx +++ b/src/pages/SelectStylePage.tsx @@ -1,10 +1,15 @@ -import Navbar from "@/components/common/Navbar"; import SelectStyle from "@/components/SelectStyle/SelectStyle"; +import Icon from "@/components/ui/Icon/Icon"; +import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const SelectStylePage = () => { return ( <> - + + + + + ); diff --git a/src/pages/SelectTagPage.tsx b/src/pages/SelectTagPage.tsx index eb9c3e2..0b80707 100644 --- a/src/pages/SelectTagPage.tsx +++ b/src/pages/SelectTagPage.tsx @@ -1,10 +1,15 @@ -import Navbar from "@/components/common/Navbar"; import SelectTag from "@/components/SelectTag/SelectTag"; +import Icon from "@/components/ui/Icon/Icon"; +import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const SelectTagPage = () => { return ( <> - + + + + + ); From b23a338420fc9a8551924a4b85f5853bf5fddd39 Mon Sep 17 00:00:00 2001 From: sikkzz Date: Tue, 4 Feb 2025 21:33:53 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20navbar=20=EC=88=98=EC=A0=95,=20?= =?UTF-8?q?=EB=AF=B8=EC=82=AC=EC=9A=A9=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Navbar/Navbar.module.scss} | 2 +- .../common/Navbar/Navbar.stories.tsx | 62 +++++++++++++++++++ .../NavbarV2.tsx => common/Navbar/Navbar.tsx} | 13 ++-- src/components/ui/ArrowNavbar/ArrowNavbar.tsx | 21 ------- src/components/ui/CloseNavbar/CloseNavbar.tsx | 15 ----- src/components/ui/HomeNavbar/HomeNavbar.tsx | 24 ------- src/components/ui/Navbar/BaseNavartypes.ts | 14 ----- src/components/ui/Navbar/NavButton.tsx | 36 ----------- src/components/ui/Navbar/Navbar.module.css | 44 ------------- src/components/ui/Navbar/Navbar.module.scss | 47 -------------- src/components/ui/Navbar/Navbar.stories.tsx | 39 ------------ src/components/ui/Navbar/Navbar.tsx | 25 -------- src/pages/HomePage.tsx | 15 ++--- src/pages/ReceiptEditPage.tsx | 10 +-- src/pages/RecognitionFailPage.tsx | 10 +-- src/pages/SelectStylePage.tsx | 10 +-- src/pages/SelectTagPage.tsx | 10 +-- 17 files changed, 97 insertions(+), 300 deletions(-) rename src/components/{ui/NavbarV2/NavbarV2.module.scss => common/Navbar/Navbar.module.scss} (95%) create mode 100644 src/components/common/Navbar/Navbar.stories.tsx rename src/components/{ui/NavbarV2/NavbarV2.tsx => common/Navbar/Navbar.tsx} (58%) delete mode 100644 src/components/ui/ArrowNavbar/ArrowNavbar.tsx delete mode 100644 src/components/ui/CloseNavbar/CloseNavbar.tsx delete mode 100644 src/components/ui/HomeNavbar/HomeNavbar.tsx delete mode 100644 src/components/ui/Navbar/BaseNavartypes.ts delete mode 100644 src/components/ui/Navbar/NavButton.tsx delete mode 100644 src/components/ui/Navbar/Navbar.module.css delete mode 100644 src/components/ui/Navbar/Navbar.module.scss delete mode 100644 src/components/ui/Navbar/Navbar.stories.tsx delete mode 100644 src/components/ui/Navbar/Navbar.tsx diff --git a/src/components/ui/NavbarV2/NavbarV2.module.scss b/src/components/common/Navbar/Navbar.module.scss similarity index 95% rename from src/components/ui/NavbarV2/NavbarV2.module.scss rename to src/components/common/Navbar/Navbar.module.scss index 2997a96..5038e0a 100644 --- a/src/components/ui/NavbarV2/NavbarV2.module.scss +++ b/src/components/common/Navbar/Navbar.module.scss @@ -1,4 +1,4 @@ -.NavbarV2 { +.Navbar { display: flex; align-items: center; justify-content: space-between; diff --git a/src/components/common/Navbar/Navbar.stories.tsx b/src/components/common/Navbar/Navbar.stories.tsx new file mode 100644 index 0000000..237be71 --- /dev/null +++ b/src/components/common/Navbar/Navbar.stories.tsx @@ -0,0 +1,62 @@ +import { MemoryRouter } from "react-router-dom"; + +import Navbar from "@/components/common/Navbar/Navbar"; +import Icon from "@/components/ui/Icon/Icon"; +import Text from "@/components/ui/Text/Text"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Components/Navbar", + decorators: [ + (Story) => ( + +
+ +
+ + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const HomeNavbar: Story = { + name: "HomeNavbar", + render: () => ( + + + + + + + 앱 공유하기 + + + + ), +}; + +export const ArrowNavbar: Story = { + name: "ArrowNavbar", + render: () => ( + + + + + + ), +}; + +export const CloseNavbar: Story = { + name: "CloseNavbar", + render: () => ( + + + + + + ), +}; diff --git a/src/components/ui/NavbarV2/NavbarV2.tsx b/src/components/common/Navbar/Navbar.tsx similarity index 58% rename from src/components/ui/NavbarV2/NavbarV2.tsx rename to src/components/common/Navbar/Navbar.tsx index 3867212..10d8ee9 100644 --- a/src/components/ui/NavbarV2/NavbarV2.tsx +++ b/src/components/common/Navbar/Navbar.tsx @@ -2,15 +2,14 @@ import type { ButtonHTMLAttributes, PropsWithChildren } from "react"; import classNames from "classnames"; -import styles from "@/components/ui/NavbarV2/NavbarV2.module.scss"; +import styles from "@/components/common/Navbar/Navbar.module.scss"; -const NavbarV2 = ({ children }: PropsWithChildren) => { - return
{children}
; +const Navbar = ({ children }: PropsWithChildren) => { + return
{children}
; }; -NavbarV2.LeftButton = ({ +Navbar.LeftButton = ({ children, - // 확장성 고려해서 className 추가 현재 디자인상에서는 사실 필요 없기는 함 className, ...props }: ButtonHTMLAttributes) => { @@ -21,7 +20,7 @@ NavbarV2.LeftButton = ({ ); }; -NavbarV2.RightButton = ({ +Navbar.RightButton = ({ children, className, ...props @@ -33,4 +32,4 @@ NavbarV2.RightButton = ({ ); }; -export default NavbarV2; +export default Navbar; diff --git a/src/components/ui/ArrowNavbar/ArrowNavbar.tsx b/src/components/ui/ArrowNavbar/ArrowNavbar.tsx deleted file mode 100644 index ea8179d..0000000 --- a/src/components/ui/ArrowNavbar/ArrowNavbar.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useNavigate } from "react-router-dom"; - -import Navbar from "@/components/ui/Navbar/Navbar"; - -export default function ArrowNavbar() { - const navigate = useNavigate(); - - const onBackBtn = () => { - navigate(-1); - }; - - return ( - - ); -} diff --git a/src/components/ui/CloseNavbar/CloseNavbar.tsx b/src/components/ui/CloseNavbar/CloseNavbar.tsx deleted file mode 100644 index 780c345..0000000 --- a/src/components/ui/CloseNavbar/CloseNavbar.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useNavigate } from "react-router-dom"; - -import Navbar from "@/components/ui/Navbar/Navbar"; - -export default function CloseNavbar() { - const navigate = useNavigate(); - - const onClose = () => { - navigate("/"); - }; - - return ( - - ); -} diff --git a/src/components/ui/HomeNavbar/HomeNavbar.tsx b/src/components/ui/HomeNavbar/HomeNavbar.tsx deleted file mode 100644 index afa9e24..0000000 --- a/src/components/ui/HomeNavbar/HomeNavbar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import Text from "../Text/Text"; - -import Navbar from "@/components/ui/Navbar/Navbar"; - -export default function SecondaryNavbar() { - return ( - {}, - }} - rightButton={{ - content: ( - - 앱 공유하기 - - ), - onClick: () => {}, - }} - > - ); -} diff --git a/src/components/ui/Navbar/BaseNavartypes.ts b/src/components/ui/Navbar/BaseNavartypes.ts deleted file mode 100644 index e4c4ab4..0000000 --- a/src/components/ui/Navbar/BaseNavartypes.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { HTMLAttributes } from "react"; - -export interface NavbarButtonProps { - className?: string; - icon?: string; - alt?: string; - onClick?: () => void; - content?: React.ReactNode; -} - -export interface BaseNavbarProps extends HTMLAttributes { - leftButton?: NavbarButtonProps; - rightButton?: NavbarButtonProps; -} diff --git a/src/components/ui/Navbar/NavButton.tsx b/src/components/ui/Navbar/NavButton.tsx deleted file mode 100644 index c77d9fd..0000000 --- a/src/components/ui/Navbar/NavButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -// NavbarButton.tsx (같은 파일 or 분리) -import React from "react"; - -import classNames from "classnames"; - -import type { NavbarButtonProps } from "@/components/ui/Navbar/BaseNavartypes"; -import styles from "@/components/ui/Navbar/Navbar.module.scss"; - -interface BaseNavbarProps { - buttonProps?: NavbarButtonProps; - defaultAlt?: string; -} - -const NavbarButton: React.FC = ({ buttonProps, defaultAlt }) => { - if (!buttonProps) return null; - const { className, content, icon, alt, onClick } = buttonProps; - - const computedClassName = className === "logo" ? classNames(styles.Logo) : classNames(className); - - return ( - - ) : ( - {alt - )} - - ); -}; - -export default NavbarButton; diff --git a/src/components/ui/Navbar/Navbar.module.css b/src/components/ui/Navbar/Navbar.module.css deleted file mode 100644 index c959f78..0000000 --- a/src/components/ui/Navbar/Navbar.module.css +++ /dev/null @@ -1,44 +0,0 @@ -@charset "UTF-8"; -.NavbarStory { - display: flex; - flex-direction: column; - gap: 1rem; -} -.NavbarStory .Wrapper { - display: flex; - gap: 1rem; - justify-content: center; - align-items: center; -} - -.Navbar { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 2.75rem; - padding: 0.75rem 1.25rem; - background-color: #fff; /* 배경색 (흰색) */ -} - -.Left, -.Right { - display: flex; - align-items: center; - flex: 0 0 auto; -} - -button { - background: none; - border: none; - cursor: pointer; -} -button .Logo { - height: 1.75rem; - vertical-align: bottom; - cursor: auto; -} -button img { - -o-object-fit: contain; - object-fit: contain; -} \ No newline at end of file diff --git a/src/components/ui/Navbar/Navbar.module.scss b/src/components/ui/Navbar/Navbar.module.scss deleted file mode 100644 index 5c006e2..0000000 --- a/src/components/ui/Navbar/Navbar.module.scss +++ /dev/null @@ -1,47 +0,0 @@ -.NavbarStory { - display: flex; - flex-direction: column; - gap: 1rem; - - .Wrapper { - display: flex; - gap: 1rem; - justify-content: center; - align-items: center; - } -} - -.Navbar { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 2.75rem; - padding: 0.75rem 1.25rem; - background-color: #fff; /* 배경색 (흰색) */ -} - -.Left, -.Right { - display: flex; - align-items: center; - flex: 0 0 auto; -} - -button { - padding: 0; - margin: 0; - background: none; - border: none; - cursor: pointer; - height: 100%; - .Logo { - height: 1.75rem; - vertical-align: bottom; - cursor: auto; - } - - img { - object-fit: contain; - } -} diff --git a/src/components/ui/Navbar/Navbar.stories.tsx b/src/components/ui/Navbar/Navbar.stories.tsx deleted file mode 100644 index 51d9c6e..0000000 --- a/src/components/ui/Navbar/Navbar.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { MemoryRouter } from "react-router-dom"; - -import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar"; -import CloseNavbar from "@/components/ui/CloseNavbar/CloseNavbar"; -import HomeNavbar from "@/components/ui/HomeNavbar/HomeNavbar"; - -import type { Meta, StoryObj } from "@storybook/react"; - -const meta: Meta = { - title: "Components/Navbars", - decorators: [ - (Story) => ( - -
- -
- - ), - ], -}; - -export default meta; - -type Story = StoryObj; - -export const CloseNavbarStory: Story = { - name: "CloseNavbar", - render: () => , -}; - -export const ArrowNavbarStory: Story = { - name: "ArrowNavbar", - render: () => , -}; - -export const HomeNavbarStory: Story = { - name: "HomeNavbar", - render: () => , -}; diff --git a/src/components/ui/Navbar/Navbar.tsx b/src/components/ui/Navbar/Navbar.tsx deleted file mode 100644 index 08cc29a..0000000 --- a/src/components/ui/Navbar/Navbar.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// BaseNavbar.tsx -import React from "react"; - -import classNames from "classnames"; - -import NavbarButton from "../Navbar/NavButton"; - -import type { BaseNavbarProps } from "@/components/ui/Navbar/BaseNavartypes"; -import styles from "@/components/ui/Navbar/Navbar.module.scss"; - -const Navbar: React.FC = ({ leftButton, rightButton, ...props }) => { - return ( - - ); -}; - -export default Navbar; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 16f3755..79c264f 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,8 +1,8 @@ import { useNavigate } from "react-router-dom"; +import Navbar from "@/components/common/Navbar/Navbar"; import Home from "@/components/Home/Home"; import Icon from "@/components/ui/Icon/Icon"; -import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; import Text from "@/components/ui/Text/Text"; const HomePage = () => { @@ -11,18 +11,19 @@ const HomePage = () => { const handleLogoClick = () => { navigate("/"); }; + return ( <> - - + + - - + + 앱 공유하기 - - + + diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx index 55631e5..f954d41 100644 --- a/src/pages/ReceiptEditPage.tsx +++ b/src/pages/ReceiptEditPage.tsx @@ -1,15 +1,15 @@ +import Navbar from "@/components/common/Navbar/Navbar"; import ReceiptEdit from "@/components/ReceiptEdit/ReceiptEdit"; import Icon from "@/components/ui/Icon/Icon"; -import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const ReceiptEditPage = () => { return ( <> - - + + - - + + diff --git a/src/pages/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage.tsx index 9a509cb..96b4262 100644 --- a/src/pages/RecognitionFailPage.tsx +++ b/src/pages/RecognitionFailPage.tsx @@ -1,15 +1,15 @@ +import Navbar from "@/components/common/Navbar/Navbar"; import RecognitionFail from "@/components/RecognitionFail/RecognitionFail"; import Icon from "@/components/ui/Icon/Icon"; -import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const RecognitionFailPage = () => { return ( <> - - + + - - + + diff --git a/src/pages/SelectStylePage.tsx b/src/pages/SelectStylePage.tsx index f8ca38a..5799baa 100644 --- a/src/pages/SelectStylePage.tsx +++ b/src/pages/SelectStylePage.tsx @@ -1,15 +1,15 @@ +import Navbar from "@/components/common/Navbar/Navbar"; import SelectStyle from "@/components/SelectStyle/SelectStyle"; import Icon from "@/components/ui/Icon/Icon"; -import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const SelectStylePage = () => { return ( <> - - + + - - + + ); diff --git a/src/pages/SelectTagPage.tsx b/src/pages/SelectTagPage.tsx index 0b80707..d0ee869 100644 --- a/src/pages/SelectTagPage.tsx +++ b/src/pages/SelectTagPage.tsx @@ -1,15 +1,15 @@ +import Navbar from "@/components/common/Navbar/Navbar"; import SelectTag from "@/components/SelectTag/SelectTag"; import Icon from "@/components/ui/Icon/Icon"; -import NavbarV2 from "@/components/ui/NavbarV2/NavbarV2"; const SelectTagPage = () => { return ( <> - - + + - - + + );