diff --git a/src/components/ui/button/button.stories.tsx b/src/components/ui/button/button.stories.tsx index 61dd84b..6031728 100644 --- a/src/components/ui/button/button.stories.tsx +++ b/src/components/ui/button/button.stories.tsx @@ -6,6 +6,7 @@ const meta: Meta = { title: 'UI/Button', component: Button, tags: ['autodocs'], + parameters: { layout: 'centered' }, }; export default meta; @@ -50,3 +51,18 @@ export const AsLink: Story = { children: '내 프로필 등록하기', }, }; + +/** 새 프리셋: xs38 (모바일 38 → PC 48) */ +export const Size_XS38: Story = { + args: { children: '38→48 버튼', variant: 'primary', size: 'xs38' }, +}; + +/** 48→48 유지 프리셋 */ +export const Size_LGFixed: Story = { + args: { children: '48→48 고정', variant: 'primary', size: 'lgFixed' }, +}; + +/** Bold 오버라이드 확인 (className 병합) */ +export const BoldOverride: Story = { + args: { children: 'Bold 버튼', variant: 'secondary', size: 'md', className: 'font-bold' }, +}; diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx index fed0b02..788959b 100644 --- a/src/components/ui/button/button.tsx +++ b/src/components/ui/button/button.tsx @@ -2,8 +2,9 @@ import { ButtonHTMLAttributes, ElementType } from 'react'; type ButtonProps = { variant?: 'primary' | 'secondary' | 'disabled' | 'approve' | 'reject'; - size?: 'lg' | 'md' | 'sm'; + size?: 'lg' | 'md' | 'sm' | 'xs38' | 'lgFixed'; full?: boolean; + className?: string; as?: ElementType; } & ButtonHTMLAttributes & { [key: string]: unknown }; @@ -15,6 +16,8 @@ const SIZE_CLASS = { lg: 'h-12 px-4 text-base sm:h-14 sm:px-6 sm:text-lg', md: 'h-10 px-4 text-sm sm:h-11 sm:px-5 sm:text-base', sm: 'h-8 px-3 text-sm sm:h-9 sm:px-4 sm:text-base', + xs38: 'h-[38px] px-3.5 text-sm sm:h-12 sm:px-5 sm:text-base', + lgFixed: 'h-12 px-5 text-base sm:h-12 sm:px-5 sm:text-base', } as const; /* 3) variant에 따른 색상/테두리 */ @@ -33,6 +36,7 @@ export default function Button({ full = false, as: Component = 'button', children, + className, ...props }: ButtonProps) { // props에서 type/disabled만 분리(중복, 충돌 방지), 나머지는 그대로 전달 @@ -41,7 +45,7 @@ export default function Button({ const variantClass = VARIANT_CLASS[variant]; return (