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/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/common/Navbar/Navbar.module.scss b/src/components/common/Navbar/Navbar.module.scss new file mode 100644 index 0000000..5038e0a --- /dev/null +++ b/src/components/common/Navbar/Navbar.module.scss @@ -0,0 +1,17 @@ +.Navbar { + 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/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/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx new file mode 100644 index 0000000..10d8ee9 --- /dev/null +++ b/src/components/common/Navbar/Navbar.tsx @@ -0,0 +1,35 @@ +import type { ButtonHTMLAttributes, PropsWithChildren } from "react"; + +import classNames from "classnames"; + +import styles from "@/components/common/Navbar/Navbar.module.scss"; + +const Navbar = ({ children }: PropsWithChildren) => { + return
{children}
; +}; + +Navbar.LeftButton = ({ + children, + className, + ...props +}: ButtonHTMLAttributes) => { + return ( + + ); +}; + +Navbar.RightButton = ({ + children, + className, + ...props +}: ButtonHTMLAttributes) => { + return ( + + ); +}; + +export default Navbar; 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/pages/HomePage.tsx b/src/pages/HomePage.tsx index 788c024..79c264f 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,10 +1,30 @@ -import Navbar from "@/components/common/Navbar"; +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 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 fbbd80b..f954d41 100644 --- a/src/pages/ReceiptEditPage.tsx +++ b/src/pages/ReceiptEditPage.tsx @@ -1,10 +1,16 @@ -import Navbar from "@/components/common/Navbar"; +import Navbar from "@/components/common/Navbar/Navbar"; import ReceiptEdit from "@/components/ReceiptEdit/ReceiptEdit"; +import Icon from "@/components/ui/Icon/Icon"; const ReceiptEditPage = () => { return ( <> - + + + + + + ); diff --git a/src/pages/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage.tsx index fdb90c9..96b4262 100644 --- a/src/pages/RecognitionFailPage.tsx +++ b/src/pages/RecognitionFailPage.tsx @@ -1,10 +1,16 @@ -import Navbar from "@/components/common/Navbar"; +import Navbar from "@/components/common/Navbar/Navbar"; import RecognitionFail from "@/components/RecognitionFail/RecognitionFail"; +import Icon from "@/components/ui/Icon/Icon"; const RecognitionFailPage = () => { return ( <> - + + + + + + ); diff --git a/src/pages/SelectStylePage.tsx b/src/pages/SelectStylePage.tsx index 346aecb..5799baa 100644 --- a/src/pages/SelectStylePage.tsx +++ b/src/pages/SelectStylePage.tsx @@ -1,10 +1,15 @@ -import Navbar from "@/components/common/Navbar"; +import Navbar from "@/components/common/Navbar/Navbar"; import SelectStyle from "@/components/SelectStyle/SelectStyle"; +import Icon from "@/components/ui/Icon/Icon"; const SelectStylePage = () => { return ( <> - + + + + + ); diff --git a/src/pages/SelectTagPage.tsx b/src/pages/SelectTagPage.tsx index eb9c3e2..d0ee869 100644 --- a/src/pages/SelectTagPage.tsx +++ b/src/pages/SelectTagPage.tsx @@ -1,10 +1,15 @@ -import Navbar from "@/components/common/Navbar"; +import Navbar from "@/components/common/Navbar/Navbar"; import SelectTag from "@/components/SelectTag/SelectTag"; +import Icon from "@/components/ui/Icon/Icon"; const SelectTagPage = () => { return ( <> - + + + + + );