From 234b10223b8c681b619eae06c582701d48dbc8ce Mon Sep 17 00:00:00 2001
From: DongjaJ <jdh981118@naver.com>
Date: Mon, 20 Jan 2025 17:20:27 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20appbar-element=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/app-bar/app-bar-element.styles.css.ts | 29 ++++++++++++++++++++
 src/ui/app-bar/app-bar-element.tsx           | 19 +++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/ui/app-bar/app-bar-element.styles.css.ts
 create mode 100644 src/ui/app-bar/app-bar-element.tsx

diff --git a/src/ui/app-bar/app-bar-element.styles.css.ts b/src/ui/app-bar/app-bar-element.styles.css.ts
new file mode 100644
index 000000000..be63ccf56
--- /dev/null
+++ b/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
+>;
diff --git a/src/ui/app-bar/app-bar-element.tsx b/src/ui/app-bar/app-bar-element.tsx
new file mode 100644
index 000000000..f6b98b761
--- /dev/null
+++ b/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>
+  );
+};

From f1ae45fcdc00ad6871287e0372322eb2a7e1a6b8 Mon Sep 17 00:00:00 2001
From: DongjaJ <jdh981118@naver.com>
Date: Mon, 20 Jan 2025 17:20:43 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20appbar=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/app-bar/app-bar.styles.css.ts | 34 ++++++++++++++++++++++++++++
 src/ui/app-bar/app-bar.tsx           | 21 +++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/ui/app-bar/app-bar.styles.css.ts
 create mode 100644 src/ui/app-bar/app-bar.tsx

diff --git a/src/ui/app-bar/app-bar.styles.css.ts b/src/ui/app-bar/app-bar.styles.css.ts
new file mode 100644
index 000000000..8a626655f
--- /dev/null
+++ b/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>;
diff --git a/src/ui/app-bar/app-bar.tsx b/src/ui/app-bar/app-bar.tsx
new file mode 100644
index 000000000..7fe2b0dbf
--- /dev/null
+++ b/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>
+  );
+};

From 3d9570f7617bfac3b75d72aab7ebd55dfa2fdaf1 Mon Sep 17 00:00:00 2001
From: DongjaJ <jdh981118@naver.com>
Date: Mon, 20 Jan 2025 17:20:56 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20appbar=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/app-bar/app-bar.stories.tsx | 55 ++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/ui/app-bar/app-bar.stories.tsx

diff --git a/src/ui/app-bar/app-bar.stories.tsx b/src/ui/app-bar/app-bar.stories.tsx
new file mode 100644
index 000000000..29ae69632
--- /dev/null
+++ b/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>
+  ),
+};

From 0fb351f1e5afc33056e8b6e860d14f7605430f3a Mon Sep 17 00:00:00 2001
From: DongjaJ <jdh981118@naver.com>
Date: Mon, 20 Jan 2025 17:22:03 +0900
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20appbar=20index.ts=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/ui/app-bar/index.ts | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 src/ui/app-bar/index.ts

diff --git a/src/ui/app-bar/index.ts b/src/ui/app-bar/index.ts
new file mode 100644
index 000000000..082470403
--- /dev/null
+++ b/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';