[Feat/#16] 공통 네브바 제작

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;
+}

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;
+}

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) => (
+      <MemoryRouter>
+        <div style={{ width: 350, border: "1px solid #ccc" }}>
+          <Story />
+        </div>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const HomeNavbar: Story = {
+  name: "HomeNavbar",
+  render: () => (
+    <Navbar>
+      <Navbar.LeftButton>
+        <Icon name="logo" />
+      </Navbar.LeftButton>
+      <Navbar.RightButton>
+        <Text variant="bodySm" color="secondary">
+          앱 공유하기
+        </Text>
+      </Navbar.RightButton>
+    </Navbar>
+  ),
+};
+
+export const ArrowNavbar: Story = {
+  name: "ArrowNavbar",
+  render: () => (
+    <Navbar>
+      <Navbar.LeftButton>
+        <Icon name="leftArrow" />
+      </Navbar.LeftButton>
+    </Navbar>
+  ),
+};
+
+export const CloseNavbar: Story = {
+  name: "CloseNavbar",
+  render: () => (
+    <Navbar>
+      <Navbar.RightButton>
+        <Icon name="close" />
+      </Navbar.RightButton>
+    </Navbar>
+  ),
+};

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 <div className={styles.Navbar}>{children}</div>;
+};
+
+Navbar.LeftButton = ({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button {...props} className={className}>
+      {children}
+    </button>
+  );
+};
+
+Navbar.RightButton = ({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button className={classNames(styles.RightButton, className)} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default Navbar;

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,
 };
 
 // 추후 사이즈, 컬러등 추가 가능

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 (
     <>
-      <Navbar />
+      <Navbar>
+        <Navbar.LeftButton onClick={handleLogoClick}>
+          <Icon name="logo" />
+        </Navbar.LeftButton>
+        <Navbar.RightButton>
+          <Text variant="bodySm" color="secondary">
+            앱 공유하기
+          </Text>
+        </Navbar.RightButton>
+      </Navbar>
+
       <Home />
     </>
   );

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 (
     <>
-      <Navbar />
+      <Navbar>
+        <Navbar.LeftButton>
+          <Icon name="leftArrow" />
+        </Navbar.LeftButton>
+      </Navbar>
+
       <ReceiptEdit />
     </>
   );

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 (
     <>
-      <Navbar />
+      <Navbar>
+        <Navbar.RightButton>
+          <Icon name="close" />
+        </Navbar.RightButton>
+      </Navbar>
+
       <RecognitionFail />
     </>
   );

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 (
     <>
-      <Navbar />
+      <Navbar>
+        <Navbar.LeftButton>
+          <Icon name="leftArrow" />
+        </Navbar.LeftButton>
+      </Navbar>
       <SelectStyle />
     </>
   );

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 (
     <>
-      <Navbar />
+      <Navbar>
+        <Navbar.LeftButton>
+          <Icon name="leftArrow" />
+        </Navbar.LeftButton>
+      </Navbar>
       <SelectTag />
     </>
   );