feat: TopBar 구현

.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>
@@ -258,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">

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>
@@ -219,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"
+          strokeWidth="2.4"
+          d="M10.183 18.367L1.816 9.65l7.698-8.018"
         />
       </symbol>
       <symbol id="arrowRight" viewBox="0 0 24 24">

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

src/components/Common/TopBar/TopBar.tsx

@@ -0,0 +1,81 @@
+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;

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