Skip to content

[Feat] Button 컴포넌트 디자인 구현 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jwj0620gcu merged 4 commits into from
Jan 11, 2026
Merged

[Feat] Button 컴포넌트 디자인 구현 #7

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16b7856
feat(button): 디자인 토큰 기반 Button 스타일 적용
jwj0620gcu Jan 10, 2026
5d33fdd
style: prettier 적용
jwj0620gcu Jan 10, 2026
a01860a
fix: padding index.css 수정 및 반영
jwj0620gcu Jan 11, 2026
285b7ac
Merge branch 'main' into 4-feat/Button-컴포넌트-제작
KyeongJooni Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@ const config: StorybookConfig = {
],
framework: '@storybook/react-vite',
};
export default config;
export default config;
53 changes: 46 additions & 7 deletions src/shared/ui/Button/Button.variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)]',
Copy link
Member

@KyeongJooni KyeongJooni Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

패딩과 같은 것들은 스페이싱에 사용되는 토큰 값을 사용하는 것보다 추가로 padding 전용 토큰 값을 만들어서 사용하는게 더 좋을 것 같습니다! 😄

'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',
},
Expand Down