From 415a6bd64ea2b742f89b7fb2987e175799f6fe38 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 6 Apr 2024 00:43:25 +0900
Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/preview-body.html            | 13 +++++++++----
 src/components/Common/Svg/SvgSprite.tsx | 13 +++++++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 0e19cf71..99014f00 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>
diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx
index 24d11dfd..381db1e0 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 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>

From ef49f902bcb08256f2b2ecad4ba974c16c136c60 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 6 Apr 2024 01:11:22 +0900
Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20arrowLeft=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/preview-body.html            |  6 +++---
 src/components/Common/Svg/SvgSprite.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 99014f00..fffb22b1 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -263,13 +263,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 381db1e0..1a22aafc 100644
--- a/src/components/Common/Svg/SvgSprite.tsx
+++ b/src/components/Common/Svg/SvgSprite.tsx
@@ -224,13 +224,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"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2.4"
+          d="M10.183 18.367L1.816 9.65l7.698-8.018"
         />
       </symbol>
       <symbol id="arrowRight" viewBox="0 0 24 24">

From 1510e58c0be55a051d1d8aa92f331db15521289e Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 6 Apr 2024 01:12:30 +0900
Subject: [PATCH 3/6] =?UTF-8?q?chore:=20lint=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Svg/SvgSprite.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx
index 1a22aafc..64dbadc1 100644
--- a/src/components/Common/Svg/SvgSprite.tsx
+++ b/src/components/Common/Svg/SvgSprite.tsx
@@ -2,12 +2,12 @@ const SvgSprite = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" display="none">
       <symbol id="search2" viewBox="0 0 21 20">
-        <g clip-path="url(#a)">
+        <g clipPath="url(#a)">
           <path
             stroke="none"
-            fill-rule="evenodd"
+            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"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           />
         </g>
         <defs>
@@ -227,9 +227,9 @@ const SvgSprite = () => {
       <symbol id="arrowLeft" viewBox="0 0 12 20">
         <path
           fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2.4"
           d="M10.183 18.367L1.816 9.65l7.698-8.018"
         />
       </symbol>

From 225c6feaa6388f7496152bf47be0b38b6d28f66d Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 6 Apr 2024 01:12:42 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20TopBar=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Common/TopBar/TopBar.stories.tsx          | 78 +++++++++++++++++
 src/components/Common/TopBar/TopBar.tsx       | 83 +++++++++++++++++++
 src/components/Common/TopBar/topBar.css.ts    | 36 ++++++++
 3 files changed, 197 insertions(+)
 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/src/components/Common/TopBar/TopBar.stories.tsx b/src/components/Common/TopBar/TopBar.stories.tsx
new file mode 100644
index 00000000..f65c98a5
--- /dev/null
+++ b/src/components/Common/TopBar/TopBar.stories.tsx
@@ -0,0 +1,78 @@
+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 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..d7b6d0e1
--- /dev/null
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -0,0 +1,83 @@
+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 { 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 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.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,
+});

From db1e2ed420804d8ce1ff3300dec7e85bb2cbcb6c Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 6 Apr 2024 01:32:08 +0900
Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20=EB=9D=84=EC=96=B4=EC=93=B0?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/TopBar/TopBar.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
index d7b6d0e1..77e647cd 100644
--- a/src/components/Common/TopBar/TopBar.tsx
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -72,9 +72,7 @@ const Spacer = () => {
 
 TopBar.BackLink = BackLink;
 TopBar.LeftNavigationGroup = LeftNavigationGroup;
-
 TopBar.Title = Title;
-
 TopBar.SearchLink = SearchLink;
 TopBar.RegisterLink = RegisterLink;
 TopBar.CloseButton = CloseButton;

From 85bfbeb11a927a7eef6c0d56f4ce8a0906a32073 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 13 Apr 2024 12:29:24 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20top=20bar=20logo=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/TopBar/TopBar.stories.tsx | 11 +++++++++++
 src/components/Common/TopBar/TopBar.tsx         | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/components/Common/TopBar/TopBar.stories.tsx b/src/components/Common/TopBar/TopBar.stories.tsx
index f65c98a5..93b27658 100644
--- a/src/components/Common/TopBar/TopBar.stories.tsx
+++ b/src/components/Common/TopBar/TopBar.stories.tsx
@@ -22,6 +22,17 @@ export const Default: Story = {
   },
 };
 
+export const Logo: Story = {
+  render: (args) => {
+    return (
+      <TopBar {...args}>
+        <TopBar.Logo />
+        <TopBar.SearchLink />
+      </TopBar>
+    );
+  },
+};
+
 export const CenterTitleAndSearch: Story = {
   render: (args) => {
     return (
diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
index 77e647cd..5197fa3b 100644
--- a/src/components/Common/TopBar/TopBar.tsx
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -4,9 +4,11 @@ import { LeftNavigationWrapper, container, headerTitle, leftTitle } from './topB
 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;
@@ -18,6 +20,14 @@ 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}>
@@ -70,6 +80,7 @@ const Spacer = () => {
   return <div style={{ width: 24, height: 24 }} aria-hidden />;
 };
 
+TopBar.Logo = Logo;
 TopBar.BackLink = BackLink;
 TopBar.LeftNavigationGroup = LeftNavigationGroup;
 TopBar.Title = Title;