feat: TopBar 구현

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,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;

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