refactor: navbar compound 패턴 코드 예시 추가

Author: sikkzz

src/assets/svg/ic-logo.svg

@@ -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/components/ui/Icon/Icon.tsx

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

src/components/ui/NavbarV2/NavbarV2.module.scss

@@ -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 <div className={styles.NavbarV2}>{children}</div>;
+};
+
+NavbarV2.LeftButton = ({
+  children,
+  // 확장성 고려해서 className 추가 현재 디자인상에서는 사실 필요 없기는 함
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button {...props} className={className}>
+      {children}
+    </button>
+  );
+};
+
+NavbarV2.RightButton = ({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button className={classNames(styles.RightButton, className)} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default NavbarV2;

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

src/pages/HomePage.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 (
     <>
-      <ArrowNavbar />
+      <NavbarV2>
+        <NavbarV2.LeftButton>
+          <Icon name="leftArrow" />
+        </NavbarV2.LeftButton>
+      </NavbarV2>
+
       <ReceiptEdit />
     </>
   );

src/pages/ReceiptEditPage.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 (
     <>
-      <CloseNavbar />
+      <NavbarV2>
+        <NavbarV2.RightButton>
+          <Icon name="close" />
+        </NavbarV2.RightButton>
+      </NavbarV2>
+
       <RecognitionFail />
     </>
   );