From f3a7770b2db96ef2c9b8a9a8ccabf768b671a4d6 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 23 Feb 2024 15:37:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(shared/components):=20Button=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/components/src/Button/index.tsx    | 37 +++++++++++++++++
 .../components/src/Button/styles.css.ts       | 41 +++++++++++++++++++
 packages/shared/components/src/index.ts       |  0
 packages/shared/components/src/index.tsx      |  2 +
 4 files changed, 80 insertions(+)
 create mode 100644 packages/shared/components/src/Button/index.tsx
 create mode 100644 packages/shared/components/src/Button/styles.css.ts
 delete mode 100644 packages/shared/components/src/index.ts
 create mode 100644 packages/shared/components/src/index.tsx

diff --git a/packages/shared/components/src/Button/index.tsx b/packages/shared/components/src/Button/index.tsx
new file mode 100644
index 0000000..123e885
--- /dev/null
+++ b/packages/shared/components/src/Button/index.tsx
@@ -0,0 +1,37 @@
+import { classNames } from '@favolink/utils';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import * as styles from './styles.css';
+
+type ButtonProps = ComponentPropsWithoutRef<'button'> & {
+  colorScheme?: styles.ColorScheme;
+  size?: styles.Size;
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const {
+      children,
+      className,
+      colorScheme = 'white',
+      size = 'medium',
+      ...restProps
+    } = props;
+
+    return (
+      <button
+        {...restProps}
+        ref={ref}
+        className={classNames(
+          styles.base,
+          styles.size[size],
+          styles.colorScheme[colorScheme],
+          className,
+        )}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+export default Button;
diff --git a/packages/shared/components/src/Button/styles.css.ts b/packages/shared/components/src/Button/styles.css.ts
new file mode 100644
index 0000000..ffdca99
--- /dev/null
+++ b/packages/shared/components/src/Button/styles.css.ts
@@ -0,0 +1,41 @@
+import { h5Bold, h6SemiBold } from '@favolink/styles/text.css';
+import { vars } from '@favolink/styles/theme.css';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const base = style({
+  borderRadius: 8,
+  cursor: 'pointer',
+});
+
+export const size = styleVariants({
+  small: [h6SemiBold, { minWidth: 100, minHeight: 30 }],
+  medium: [h6SemiBold, { minWidth: 202, minHeight: 40 }],
+  large: [h5Bold, { minWidth: 332, minHeight: 44 }],
+});
+
+export type Size = keyof typeof size;
+
+export const colorScheme = styleVariants({
+  gray: {
+    backgroundColor: vars.color.gray400,
+    border: `1px solid ${vars.color.gray400}`,
+    color: vars.color.gray200,
+  },
+  black: {
+    backgroundColor: vars.color.gray1000,
+    border: `1px solid ${vars.color.gray1000}`,
+    color: 'white',
+  },
+  white: {
+    backgroundColor: 'white',
+    border: `1px solid ${vars.color.gray300}`,
+    color: vars.color.gray900,
+  },
+  red: {
+    backgroundColor: vars.color.system300,
+    border: `1px solid ${vars.color.system300}`,
+    color: 'white',
+  },
+});
+
+export type ColorScheme = keyof typeof colorScheme;
diff --git a/packages/shared/components/src/index.ts b/packages/shared/components/src/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/shared/components/src/index.tsx b/packages/shared/components/src/index.tsx
new file mode 100644
index 0000000..3fb0eeb
--- /dev/null
+++ b/packages/shared/components/src/index.tsx
@@ -0,0 +1,2 @@
+/* eslint-disable @stylistic/padding-line-between-statements */
+export { default as Button } from './Button';