From 25d3f391711f1a6214cc289ca27476ecdb6458cc Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Tue, 13 Aug 2024 01:16:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20sub=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Button/Button.stories.tsx  |  8 +++++++
 .../wow-ui/src/components/Button/index.tsx    | 21 ++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx
index 4e732016..5b043ede 100644
--- a/packages/wow-ui/src/components/Button/Button.stories.tsx
+++ b/packages/wow-ui/src/components/Button/Button.stories.tsx
@@ -168,6 +168,14 @@ export const SmallOutline: Story = {
   },
 };
 
+export const SmallSub: Story = {
+  args: {
+    children: "버튼",
+    size: "sm",
+    variant: "sub",
+  },
+};
+
 export const LargeWithIcon: Story = {
   args: {
     children: "버튼",
diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx
index 062f054e..eed0bfb2 100644
--- a/packages/wow-ui/src/components/Button/index.tsx
+++ b/packages/wow-ui/src/components/Button/index.tsx
@@ -19,7 +19,7 @@ import type {
  * @param {string} subText - 버튼의 하단에 위치할 보조 텍스트.
  * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부.
  * @param {"lg" | "sm"} [size] - 버튼의 크기.
- * @param {"solid" | "outline"} [variant] - 버튼의 종류.
+ * @param {"solid" | "outline" | "sub"} [variant] - 버튼의 종류.
  * @param {ReactNode} [icon] - 버튼의 좌측에 들어갈 아이콘.
  * @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트.
  * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트.
@@ -37,7 +37,7 @@ export interface CustomButtonProps {
   subText?: string;
   disabled?: boolean;
   size?: "lg" | "sm";
-  variant?: "solid" | "outline";
+  variant?: "solid" | "outline" | "sub";
   icon?: ReactNode;
   onKeyUp?: () => void;
   onKeyDown?: () => void;
@@ -101,7 +101,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
         disabled={disabled}
         ref={ref}
         className={ButtonStyle({
-          size,
+          size: variant === "sub" ? "sm" : size,
           variant,
         })}
         onKeyDown={handleKeyDown}
@@ -184,6 +184,21 @@ const ButtonStyle = cva({
           color: "bluePressed",
         },
       },
+      sub: {
+        background: "blueBackgroundPressed",
+        color: "primary",
+
+        _disabled: {
+          color: "blueDisabled",
+          cursor: "not-allowed",
+        },
+        _hover: {
+          shadow: "blue",
+        },
+        _pressed: {
+          background: "blueDisabled",
+        },
+      },
     },
   },
   compoundVariants: [