feat: 공통 네브바 및 네브바 구현

Author: lgrin-byte

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.module.scss

@@ -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 (
+    <Navbar
+      leftButton={{
+        icon: "/src/assets/svg/ic-left-arrow.svg",
+        alt: "뒤로 가기",
+        onClick: onBackBtn,
+      }}
+    />
+  );
+}

src/components/common/Navbar.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 (
+    <Navbar rightButton={{ icon: "/src/assets/svg/ic-close.svg", alt: "닫기", onClick: onClose }} />
+  );
+}

src/components/ui/ArrowNavbar/ArrowNavbar.tsx

@@ -0,0 +1,24 @@
+import Text from "../Text/Text";
+
+import Navbar from "@/components/ui/Navbar/Navbar";
+
+export default function SecondaryNavbar() {
+  return (
+    <Navbar
+      leftButton={{
+        className: "logo",
+        icon: "/src/assets/img/img-logo.png",
+        alt: "로고",
+        onClick: () => {},
+      }}
+      rightButton={{
+        content: (
+          <Text variant="bodyXsm" color="secondary" align="center" as="span">
+            앱 공유하기
+          </Text>
+        ),
+        onClick: () => {},
+      }}
+    ></Navbar>
+  );
+}

src/components/ui/CloseNavbar/CloseNavbar.tsx

@@ -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<HTMLDivElement> {
+  leftButton?: NavbarButtonProps;
+  rightButton?: NavbarButtonProps;
+}

src/components/ui/HomeNavbar/HomeNavbar.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<BaseNavbarProps> = ({ buttonProps, defaultAlt }) => {
+  if (!buttonProps) return null;
+  const { className, content, icon, alt, onClick } = buttonProps;
+
+  const computedClassName = className === "logo" ? classNames(styles.Logo) : classNames(className);
+
+  return (
+    <button onClick={onClick}>
+      {content ? (
+        <button onClick={onClick}>{content}</button>
+      ) : (
+        <img
+          className={computedClassName}
+          onClick={onClick}
+          src={icon}
+          alt={alt || defaultAlt || "button"}
+        />
+      )}
+    </button>
+  );
+};
+
+export default NavbarButton;

src/components/ui/Navbar/BaseNavartypes.ts

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

src/components/ui/Navbar/NavButton.tsx

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