feat: AppBar 컴포넌트

src/ui/app-bar/app-bar-element.styles.css.ts

@@ -0,0 +1,29 @@
+import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
+
+export const appBarElement = recipe({
+  base: {
+    position: 'absolute',
+    width: 44,
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  variants: {
+    direction: {
+      left: {
+        top: 0,
+        left: 3,
+      },
+      right: {
+        top: 0,
+        right: 10,
+      },
+    },
+  },
+});
+
+export type AppBarElementVariant = Exclude<
+  RecipeVariants<typeof appBarElement>,
+  undefined
+>;

src/ui/app-bar/app-bar-element.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { cx } from '../util.ts';
+import * as styles from './app-bar-element.styles.css.ts';
+
+export type AppBarElementProps = ComponentProps<'div'> &
+  styles.AppBarElementVariant;
+
+export const AppBarElement = (props: AppBarElementProps) => {
+  const { children, className, direction, ...restProps } = props;
+
+  return (
+    <div
+      {...restProps}
+      className={cx(styles.appBarElement({ direction }), className)}
+    >
+      {children}
+    </div>
+  );
+};

src/ui/app-bar/app-bar.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArrowLeft, Cart, Logo } from '../../assets/index.ts';
+import { AppBar } from './app-bar.tsx';
+
+const meta: Meta<typeof AppBar> = {
+  title: 'ui/AppBar',
+  component: AppBar,
+  argTypes: {
+    variant: {
+      options: ['default', 'page'],
+      control: 'radio',
+    },
+  },
+  parameters: {
+    layout: 'fullScreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AppBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <AppBar {...args}>
+      <Logo />
+    </AppBar>
+  ),
+};
+
+export const DefaultWithRight: Story = {
+  render: (args) => (
+    <AppBar {...args} right={<Cart />}>
+      <Logo />
+    </AppBar>
+  ),
+};
+
+export const Page: Story = {
+  args: {
+    variant: 'page',
+  },
+  render: (args) => <AppBar {...args}>title</AppBar>,
+};
+
+export const PageWithElement: Story = {
+  args: {
+    variant: 'page',
+  },
+  render: (args) => (
+    <AppBar {...args} left={<ArrowLeft />} right={<Cart />}>
+      title
+    </AppBar>
+  ),
+};

src/ui/app-bar/app-bar.styles.css.ts

@@ -0,0 +1,34 @@
+import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { typography } from '../typography.css.ts';
+
+export const appBar = recipe({
+  base: {
+    position: 'relative',
+    height: 44,
+    display: 'flex',
+    alignItems: 'center',
+    maxWidth: 440,
+  },
+  variants: {
+    variant: {
+      default: [
+        typography('title_1_22_b'),
+        {
+          padding: '0 10px 0 20px',
+        },
+      ],
+      page: [
+        typography('head_1_18_sb'),
+        {
+          justifyContent: 'center',
+          padding: '0 10px 0 3px',
+        },
+      ],
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type AppBarVariants = RecipeVariants<typeof appBar>;

src/ui/app-bar/app-bar.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+import { cx } from '../util.ts';
+import { AppBarElement } from './app-bar-element.tsx';
+import * as styles from './app-bar.styles.css.ts';
+
+export type AppBarProps = ComponentProps<'div'> & {
+  left?: ReactNode;
+  right?: ReactNode;
+} & styles.AppBarVariants;
+
+export const AppBar = (props: PropsWithChildren<AppBarProps>) => {
+  const { left, right, children, variant, className, ...restProps } = props;
+
+  return (
+    <div {...restProps} className={cx(styles.appBar({ variant }), className)}>
+      {left && <AppBarElement direction="left">{left}</AppBarElement>}
+      {children}
+      {right && <AppBarElement direction="right">{right}</AppBarElement>}
+    </div>
+  );
+};

src/ui/app-bar/index.ts

@@ -0,0 +1,2 @@
+export { AppBar, type AppBarProps } from './app-bar.tsx';
+export { AppBarElement, type AppBarElementProps } from './app-bar-element.tsx';