From e220fe2c06b0384196b4b088f24a022f4668cdcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?s=E1=B4=8F=CA=9F=CA=99=C9=AA=20=E2=98=94=EF=B8=8F?=
 <solbi2004@naver.com>
Date: Mon, 15 Apr 2024 16:52:36 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20TopBar=20=EA=B5=AC=ED=98=84=20(#74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 검색 아이콘 변경

* refactor: arrowLeft 아이콘 변경

* chore: lint 적용

* feat: TopBar 구현

* refactor: 띄어쓰기 변경

* feat: top bar logo 추가
---
 .storybook/preview-body.html                  | 19 ++--
 src/components/Common/Svg/SvgSprite.tsx       | 19 ++--
 .../Common/TopBar/TopBar.stories.tsx          | 89 ++++++++++++++++++
 src/components/Common/TopBar/TopBar.tsx       | 92 +++++++++++++++++++
 src/components/Common/TopBar/topBar.css.ts    | 36 ++++++++
 5 files changed, 241 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Common/TopBar/TopBar.stories.tsx
 create mode 100644 src/components/Common/TopBar/TopBar.tsx
 create mode 100644 src/components/Common/TopBar/topBar.css.ts

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 9c17143a..39ca6ff3 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -1,13 +1,18 @@
 <div id="custom-root" style="display: none">
   <?xml version="1.0" encoding="UTF-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" display="none">
-    <symbol id="search2" viewBox="0 0 14 14">
-      <g fill="none" strokeLinecap="round" strokeLinejoin="round" clipPath="url(#a)">
-        <path d="M6 11.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm7.5 2L10 10" />
+    <symbol id="search2" viewBox="0 0 21 20">
+      <g clip-path="url(#a)">
+        <path
+          stroke="none"
+          fill-rule="evenodd"
+          d="M3.146 8.571a5.714 5.714 0 1 1 11.429 0 5.714 5.714 0 0 1-11.429 0zM8.86 0a8.571 8.571 0 1 0 4.967 15.558l4.023 4.024a1.429 1.429 0 0 0 2.02-2.02l-4.023-4.024A8.571 8.571 0 0 0 8.86 0z"
+          clip-rule="evenodd"
+        />
       </g>
       <defs>
         <clipPath id="a">
-          <path fill="#fff" d="M0 0h14v14H0z" />
+          <path fill="#fff" d="M0 0h20v20H0z" transform="translate(.29)" />
         </clipPath>
       </defs>
     </symbol>
@@ -311,13 +316,13 @@
           d="M5.37 16.974V1.19m4.25 4.249l-4.25-4.25-4.25 4.25"
         />
       </symbol>
-      <symbol id="arrowLeft" viewBox="0 0 25 24">
+      <symbol id="arrowLeft" viewBox="0 0 12 20">
         <path
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
-          stroke-width="1.2"
-          d="M16.24 3.661l-8.086 8.25 8.085 8.25"
+          stroke-width="2.4"
+          d="M10.183 18.367L1.816 9.65l7.698-8.018"
         />
       </symbol>
       <symbol id="arrowRight" viewBox="0 0 24 24">
diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx
index 9ac66c67..a7f67c9b 100644
--- a/src/components/Common/Svg/SvgSprite.tsx
+++ b/src/components/Common/Svg/SvgSprite.tsx
@@ -1,13 +1,18 @@
 const SvgSprite = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" display="none">
-      <symbol id="search2" viewBox="0 0 14 14">
-        <g fill="none" strokeLinecap="round" strokeLinejoin="round" clipPath="url(#a)">
-          <path d="M6 11.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm7.5 2L10 10" />
+      <symbol id="search2" viewBox="0 0 21 20">
+        <g clipPath="url(#a)">
+          <path
+            stroke="none"
+            fillRule="evenodd"
+            d="M3.146 8.571a5.714 5.714 0 1 1 11.429 0 5.714 5.714 0 0 1-11.429 0zM8.86 0a8.571 8.571 0 1 0 4.967 15.558l4.023 4.024a1.429 1.429 0 0 0 2.02-2.02l-4.023-4.024A8.571 8.571 0 0 0 8.86 0z"
+            clipRule="evenodd"
+          />
         </g>
         <defs>
           <clipPath id="a">
-            <path fill="#fff" d="M0 0h14v14H0z" />
+            <path fill="#fff" d="M0 0h20v20H0z" transform="translate(.29)" />
           </clipPath>
         </defs>
       </symbol>
@@ -274,13 +279,13 @@ const SvgSprite = () => {
           d="M5.37 16.974V1.19m4.25 4.249l-4.25-4.25-4.25 4.25"
         />
       </symbol>
-      <symbol id="arrowLeft" viewBox="0 0 25 24">
+      <symbol id="arrowLeft" viewBox="0 0 12 20">
         <path
           fill="none"
           strokeLinecap="round"
           strokeLinejoin="round"
-          strokeWidth="1.2"
-          d="M16.24 3.661l-8.086 8.25 8.085 8.25"
+          strokeWidth="2.4"
+          d="M10.183 18.367L1.816 9.65l7.698-8.018"
         />
       </symbol>
       <symbol id="arrowRight" viewBox="0 0 24 24">
diff --git a/src/components/Common/TopBar/TopBar.stories.tsx b/src/components/Common/TopBar/TopBar.stories.tsx
new file mode 100644
index 00000000..93b27658
--- /dev/null
+++ b/src/components/Common/TopBar/TopBar.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import TopBar from './TopBar';
+
+const meta: Meta<typeof TopBar> = {
+  title: 'common/TopBar',
+  component: TopBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof TopBar>;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.BackLink />
+        <TopBar.Title title="타이틀" />
+        <TopBar.Spacer />
+      </TopBar>
+    );
+  },
+};
+
+export const Logo: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.Logo />
+        <TopBar.SearchLink />
+      </TopBar>
+    );
+  },
+};
+
+export const CenterTitleAndSearch: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.BackLink />
+        <TopBar.Title title="타이틀" />
+        <TopBar.SearchLink />
+      </TopBar>
+    );
+  },
+};
+
+export const LeftTitle: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.LeftNavigationGroup title="타이틀" />
+      </TopBar>
+    );
+  },
+};
+
+export const LeftTitleAndSearch: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.LeftNavigationGroup title="타이틀" />
+        <TopBar.SearchLink />
+      </TopBar>
+    );
+  },
+};
+
+export const LeftTitleAndRegister: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.LeftNavigationGroup title="타이틀" />
+        <TopBar.RegisterLink />
+      </TopBar>
+    );
+  },
+};
+
+export const Close: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.Spacer />
+        <TopBar.CloseButton />
+      </TopBar>
+    );
+  },
+};
diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
new file mode 100644
index 00000000..5197fa3b
--- /dev/null
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -0,0 +1,92 @@
+import { Link } from 'react-router-dom';
+
+import { LeftNavigationWrapper, container, headerTitle, leftTitle } from './topBar.css';
+import SvgIcon from '../Svg/SvgIcon';
+import Text from '../Text/Text';
+
+import LogoImage from '@/assets/logo.svg';
+import { PATH } from '@/constants/path';
+import { vars } from '@/styles/theme.css';
+
+
+interface TopBarProps {
+  children?: React.ReactNode;
+  title?: string;
+  link?: string;
+  state?: unknown;
+}
+
+const TopBar = ({ children }: TopBarProps) => {
+  return <header className={container}>{children}</header>;
+};
+
+const Logo = () => {
+  return (
+    <Link to={PATH.HOME}>
+      <LogoImage width={120} />
+    </Link>
+  );
+};
+
+const BackLink = ({ state }: TopBarProps) => {
+  return (
+    <Link to=".." relative="path" state={state}>
+      <SvgIcon variant="arrowLeft" stroke={vars.colors.gray5} width={20} height={20} />
+    </Link>
+  );
+};
+
+const Title = ({ title }: TopBarProps) => {
+  return <h1 className={headerTitle}>{title}</h1>;
+};
+
+// 왼쪽에 뒤로가기 버튼과 타이틀이 함께 있는 구역
+const LeftNavigationGroup = ({ title }: TopBarProps) => {
+  return (
+    <div className={LeftNavigationWrapper}>
+      <BackLink />
+      <h1 className={leftTitle}>{title}</h1>
+    </div>
+  );
+};
+
+const SearchLink = () => {
+  return (
+    <Link to={PATH.SEARCH}>
+      <SvgIcon variant="search2" stroke={vars.colors.black} width={20} height={20} />
+    </Link>
+  );
+};
+
+const RegisterLink = ({ link = '' }: TopBarProps) => {
+  return (
+    <Link to={link}>
+      <Text size="caption1" color="disabled" weight="semiBold">
+        등록
+      </Text>
+    </Link>
+  );
+};
+
+const CloseButton = ({ state }: TopBarProps) => {
+  return (
+    <Link to=".." relative="path" state={state}>
+      <SvgIcon variant="close2" stroke={vars.colors.black} width={20} height={20} />
+    </Link>
+  );
+};
+
+const Spacer = () => {
+  return <div style={{ width: 24, height: 24 }} aria-hidden />;
+};
+
+TopBar.Logo = Logo;
+TopBar.BackLink = BackLink;
+TopBar.LeftNavigationGroup = LeftNavigationGroup;
+TopBar.Title = Title;
+TopBar.SearchLink = SearchLink;
+TopBar.RegisterLink = RegisterLink;
+TopBar.CloseButton = CloseButton;
+TopBar.Spacer = Spacer;
+
+export default TopBar;
diff --git a/src/components/Common/TopBar/topBar.css.ts b/src/components/Common/TopBar/topBar.css.ts
new file mode 100644
index 00000000..fcca96df
--- /dev/null
+++ b/src/components/Common/TopBar/topBar.css.ts
@@ -0,0 +1,36 @@
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  position: 'fixed',
+  top: 0,
+  left: '50%',
+  width: '100%',
+  maxWidth: 400,
+  height: 50,
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0 20px',
+  backgroundColor: vars.colors.white,
+  transform: 'translateX(-50%)',
+  zIndex: 1001,
+});
+
+export const LeftNavigationWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const leftTitle = style({
+  marginLeft: 6,
+  color: vars.colors.black,
+  fontSize: 18,
+  fontWeight: 600,
+});
+
+export const headerTitle = style({
+  color: vars.colors.black,
+  fontSize: 18,
+  fontWeight: 600,
+});