From 8b84dee3bf6890f665ece48ff4c35361237e92d8 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Thu, 28 Mar 2024 15:30:43 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat(shared/components/IconButton):=20theme?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/components/src/IconButton/theme.css.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/shared/components/src/IconButton/theme.css.ts

diff --git a/packages/shared/components/src/IconButton/theme.css.ts b/packages/shared/components/src/IconButton/theme.css.ts
new file mode 100644
index 0000000..6871f0b
--- /dev/null
+++ b/packages/shared/components/src/IconButton/theme.css.ts
@@ -0,0 +1,5 @@
+import * as tagTheme from '../Tag/theme.css';
+
+export const color = tagTheme.color;
+
+export type Color = tagTheme.Color;

From 8d794134ffce7de564c097f3bbbac915d3e551d1 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Thu, 28 Mar 2024 15:31:07 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat(shared/components/IconButton):=20style?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/IconButton/styles.css.ts   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/shared/components/src/IconButton/styles.css.ts

diff --git a/packages/shared/components/src/IconButton/styles.css.ts b/packages/shared/components/src/IconButton/styles.css.ts
new file mode 100644
index 0000000..f3f4109
--- /dev/null
+++ b/packages/shared/components/src/IconButton/styles.css.ts
@@ -0,0 +1,23 @@
+import { h4SemiBold, h5SemiBold, h6SemiBold } from '@favolink/styles/text.css';
+import { style, styleVariants } from '@vanilla-extract/css';
+import * as tagStyles from '../Tag/styles.css';
+
+export const base = style({
+  cursor: 'pointer',
+  borderRadius: 8,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const size = styleVariants({
+  small: [h6SemiBold, { padding: 8 }],
+  medium: [h5SemiBold, { padding: 10 }],
+  large: [h4SemiBold, { padding: 12 }],
+});
+
+export type Size = keyof typeof size;
+
+export const colorScheme = tagStyles.colorScheme;
+
+export type ColorScheme = tagStyles.ColorScheme;

From 19d219736a73ec1f159587387f126b82a0e48b85 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Thu, 28 Mar 2024 15:31:25 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat(shared/components/IconButton):=20IconB?=
 =?UTF-8?q?utton=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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

---
 .../components/src/IconButton/index.tsx       | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 packages/shared/components/src/IconButton/index.tsx

diff --git a/packages/shared/components/src/IconButton/index.tsx b/packages/shared/components/src/IconButton/index.tsx
new file mode 100644
index 0000000..7b145d2
--- /dev/null
+++ b/packages/shared/components/src/IconButton/index.tsx
@@ -0,0 +1,42 @@
+import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
+import { classNames } from '@favolink/utils';
+import { type ReactElement } from 'react';
+import * as styles from './styles.css';
+import * as theme from './theme.css';
+
+const CLASSNAME_ICONBUTTOM = 'favolink-iconbutton';
+
+export type IconButtonProps = HTMLFavolinkProps<'button'> & {
+  icon: ReactElement;
+  colorScheme?: styles.ColorScheme;
+  size?: styles.Size;
+};
+
+export const IconButton = forwardRef<IconButtonProps, 'button'>(
+  function IconButton(props, ref) {
+    const {
+      className,
+      icon,
+      colorScheme = 'white',
+      size = 'small',
+      ...restProps
+    } = props;
+
+    return (
+      <favolink.button
+        {...restProps}
+        ref={ref}
+        className={classNames(
+          CLASSNAME_ICONBUTTOM,
+          theme.color,
+          styles.base,
+          styles.size[size],
+          styles.colorScheme[colorScheme],
+          className,
+        )}
+      >
+        {icon}
+      </favolink.button>
+    );
+  },
+);