From 16b78562dfc9fbfb8f7892371a4f82ef595aa330 Mon Sep 17 00:00:00 2001 From: Wonjun Jung Date: Sat, 10 Jan 2026 23:37:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat(button):=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=20=ED=86=A0=ED=81=B0=20=EA=B8=B0=EB=B0=98=20Button=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.ts | 2 +- src/app/styles/index.css | 2 +- src/shared/ui/Button/Button.variants.ts | 53 +++++++++++++++++++++---- 3 files changed, 48 insertions(+), 9 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index a96ba38..f93fc61 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -11,4 +11,4 @@ const config: StorybookConfig = { ], framework: '@storybook/react-vite', }; -export default config; +export default config; \ No newline at end of file diff --git a/src/app/styles/index.css b/src/app/styles/index.css index 2264950..c2b126e 100644 --- a/src/app/styles/index.css +++ b/src/app/styles/index.css @@ -146,4 +146,4 @@ line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing); } -} +} \ No newline at end of file diff --git a/src/shared/ui/Button/Button.variants.ts b/src/shared/ui/Button/Button.variants.ts index 105631b..8f87ffa 100644 --- a/src/shared/ui/Button/Button.variants.ts +++ b/src/shared/ui/Button/Button.variants.ts @@ -2,21 +2,60 @@ import { tv } from 'tailwind-variants'; export const buttonVariants = tv({ base: [ + /* layout */ 'flex items-center justify-center', - 'h-[44px]', - 'px-[24px]', - 'py-[--padding-m]', - 'gap-[--spacing-xxs]', - 'rounded-[--radius-l]', + 'w-[163px] h-[44px]', + 'px-[var(--spacing-xl)] py-[var(--padding-m)]', + 'gap-[var(--spacing-xxs)]', + + /* style */ + 'rounded-[var(--radius-l)]', 'typo-body-1', 'transition-colors', + 'focus:outline-none', ], + variants: { variant: { - fill: ['bg-gray-900 text-white'], - outline: ['border-2 border-gray-900 text-gray-900'], + fill: [ + /* default */ + 'bg-[var(--color-gray-900)] text-[var(--color-white)]', + + /* hover */ + 'hover:bg-[var(--color-gray-500)]', + + /* focus */ + 'focus:bg-[var(--color-gray-600)] focus:text-[var(--color-white)]', + + /* disabled */ + 'disabled:bg-[var(--color-gray-200)]', + 'disabled:text-[var(--color-gray-400)]', + 'disabled:cursor-not-allowed', + ], + + outline: [ + /* default */ + 'bg-transparent', + 'border-2', + 'border-[var(--color-gray-900)]', + 'text-[var(--color-gray-900)]', + + /* hover */ + 'hover:border-[var(--color-gray-500)]', + 'hover:text-[var(--color-gray-500)]', + + /* focus */ + 'focus:border-[var(--color-gray-600)]', + 'focus:text-[var(--color-gray-600)]', + + /* disabled */ + 'disabled:border-[var(--color-gray-300)]', + 'disabled:text-[var(--color-gray-400)]', + 'disabled:cursor-not-allowed', + ], }, }, + defaultVariants: { variant: 'fill', }, From 5d33fdd26a259f23e07f71659bed8d4041d5c64b Mon Sep 17 00:00:00 2001 From: Wonjun Jung Date: Sun, 11 Jan 2026 00:02:25 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=20style:=20prettier=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/styles/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/styles/index.css b/src/app/styles/index.css index c2b126e..2264950 100644 --- a/src/app/styles/index.css +++ b/src/app/styles/index.css @@ -146,4 +146,4 @@ line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing); } -} \ No newline at end of file +} From a01860a2178f4c8a679c4197d50422de2acff235 Mon Sep 17 00:00:00 2001 From: Wonjun Jung Date: Sun, 11 Jan 2026 22:48:28 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=20fix:=20padding=20index.css=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/styles/index.css | 2 ++ src/shared/ui/Button/Button.variants.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/styles/index.css b/src/app/styles/index.css index 2264950..37dbba4 100644 --- a/src/app/styles/index.css +++ b/src/app/styles/index.css @@ -73,9 +73,11 @@ --margin-s: 16px; /* Padding (Primitive/Scale) */ + --padding-xl: 24px; --padding-l: 16px; --padding-m: 12px; --padding-s: 8px; + --padding-ss: 4px; /* Radius (Primitive/Scale) */ --radius-xl: 40px; diff --git a/src/shared/ui/Button/Button.variants.ts b/src/shared/ui/Button/Button.variants.ts index 8f87ffa..310ed12 100644 --- a/src/shared/ui/Button/Button.variants.ts +++ b/src/shared/ui/Button/Button.variants.ts @@ -5,7 +5,7 @@ export const buttonVariants = tv({ /* layout */ 'flex items-center justify-center', 'w-[163px] h-[44px]', - 'px-[var(--spacing-xl)] py-[var(--padding-m)]', + 'px-[var(--padding-xl)] py-[var(--padding-m)]', 'gap-[var(--spacing-xxs)]', /* style */