Skip to content

Commit

Permalink
Merge pull request #105 from devping-kr/THKV-108
Browse files Browse the repository at this point in the history 
Feat[THKV-108] : Button 컴포넌트 리디자인 및 테스트 페이지 구현
  • Loading branch information
@grapefruit13
grapefruit13 authored Jan 9, 2025
2 parents 015ce28 + 718aa6e commit 37ea2c4
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 8 deletions.
160 changes: 160 additions & 0 deletions src/app/(root)/button-test/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import Button from '@/components/common/Button/Button';

const page = () => {
return (
<div className='flex h-full flex-col gap-4 bg-[#d8d8d8]'>
<h2>PRIMARY</h2>
<div className='flex gap-2'>
<Button variant='primary' size='xs' width='fit'>
BUTTON 1
</Button>
<Button variant='primary' size='sm' width='fit'>
BUTTON 1
</Button>
<Button variant='primary' size='md' width='fit'>
BUTTON 1
</Button>
<Button variant='primary' size='lg' width='fit'>
BUTTON 1
</Button>
<Button variant='primary' width='circular'>
O
</Button>
<Button variant='primary' size='xs' disabled>
BUTTON 1
</Button>
<Button variant='primary' size='sm' disabled>
BUTTON 1
</Button>
<Button variant='primary' size='md' disabled>
BUTTON 1
</Button>
<Button variant='primary' size='lg' disabled>
BUTTON 1
</Button>
</div>
<h2>GREY</h2>
<div className='flex gap-2'>
<Button variant='grey' size='xs'>
BUTTON 2
</Button>
<Button variant='grey' size='sm'>
BUTTON 2
</Button>
<Button variant='grey' size='md'>
BUTTON 2
</Button>
<Button variant='grey' size='lg'>
BUTTON 2
</Button>
<Button variant='grey' width='circular'>
O
</Button>
<Button variant='grey' size='xs' disabled>
BUTTON 2
</Button>
<Button variant='grey' size='sm' disabled>
BUTTON 2
</Button>
<Button variant='grey' size='md' disabled>
BUTTON 2
</Button>
<Button variant='grey' size='lg' disabled>
BUTTON 2
</Button>
</div>
<h2>SECONDARY</h2>
<div className='flex gap-2'>
<Button variant='secondary' size='xs'>
BUTTON 3
</Button>
<Button variant='secondary' size='sm'>
BUTTON 3
</Button>
<Button variant='secondary' size='md'>
BUTTON 3
</Button>
<Button variant='secondary' size='lg'>
BUTTON 3
</Button>
<Button variant='secondary' width='circular'>
O
</Button>
<Button variant='secondary' size='xs' disabled>
BUTTON 3
</Button>
<Button variant='secondary' size='sm' disabled>
BUTTON 3
</Button>
<Button variant='secondary' size='md' disabled>
BUTTON 3
</Button>
<Button variant='secondary' size='lg' disabled>
BUTTON 3
</Button>
</div>
<h2>TERITARY</h2>
<div className='flex gap-2'>
<Button variant='teritary' size='xs'>
BUTTON
</Button>
<Button variant='teritary' size='sm'>
BUTTON
</Button>
<Button variant='teritary' size='md'>
BUTTON
</Button>
<Button variant='teritary' size='lg'>
BUTTON
</Button>
<Button variant='teritary' width='circular'>
O
</Button>
<Button variant='teritary' size='xs' disabled>
BUTTON
</Button>
<Button variant='teritary' size='sm' disabled>
BUTTON
</Button>
<Button variant='teritary' size='md' disabled>
BUTTON
</Button>
<Button variant='teritary' size='lg' disabled>
BUTTON
</Button>
</div>
<h2>OUTLINE</h2>
<div className='flex gap-2'>
<Button variant='outline' size='xs'>
BUTTON
</Button>
<Button variant='outline' size='sm'>
BUTTON
</Button>
<Button variant='outline' size='md'>
BUTTON
</Button>
<Button variant='outline' size='lg'>
BUTTON
</Button>
<Button variant='outline' width='circular'>
O
</Button>
<Button variant='outline' size='xs' disabled>
BUTTON
</Button>
<Button variant='outline' size='sm' disabled>
BUTTON
</Button>
<Button variant='outline' size='md' disabled>
BUTTON
</Button>
<Button variant='outline' size='lg' disabled>
BUTTON
</Button>
</div>
</div>
);
};

export default page;
6 changes: 4 additions & 2 deletions src/components/common/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import { buttonVariants } from '@/components/common/Button/Button.variant';

export type ButtonProps = VariantProps<typeof buttonVariants> &
ComponentPropsWithoutRef<'button'> & {
size?: 'xSmall' | 'small' | 'basic' | 'large';
width?: 'fit' | 'full';
// redesign : xs, sm, md, lg 로 사이즈 교체
size?: 'xSmall' | 'small' | 'basic' | 'large' | 'xs' | 'sm' | 'md' | 'lg';
width?: 'fit' | 'full' | 'circular';
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
Expand All @@ -17,6 +18,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
<button
className={cn(buttonVariants({ variant, size, width }), className)}
ref={ref}
type='button'
{...props}
/>
);
Expand Down
22 changes: 16 additions & 6 deletions src/components/common/Button/Button.variant.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,43 @@
import { cva } from 'class-variance-authority';

export const buttonVariants = cva(
'inline-flex items-center justify-center font-bold rounded-lg focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap',
'inline-flex items-center justify-center rounded focus-visible:outline-none whitespace-nowrap disabled:cursor-not-allowed',
{
variants: {
variant: {
primary:
'bg-green-400 text-white-100 hover:bg-green-500 active:bg-green-600 disabled:hover:bg-green-400',
'bg-green-500 text-white-100 hover:bg-green-600 active:bg-green-700 disabled:bg-grey-200 disabled:text-white-100',
grey: 'bg-grey-100 text-grey-900 hover:bg-grey-200 active:bg-grey-300 disabled:bg-grey-200 disabled:text-white-100',
secondary:
'bg-gray-100 text-dark-100 hover:bg-gray-200 active:bg-gray-300 disabled:hover:bg-gray-100',
'bg-white-100 text-green-500 hover:bg-grey-200 active:bg-grey-300 disabled:bg-white-100 disabled:text-grey-200',
teritary:
'bg-grey-800 text-grey-100 hover:bg-grey-900 active:bg-black-100 disabled:bg-grey-200 disabled:text-white-100',
outline:
'bg-white-100 text-green-700 border-[1px] border-solid border-green-700 hover:border-green-800 hover:text-green-800 active:border-green-900 active:text-green-900 disabled:hover:text-green-700',
'bg-white-100 text-black-100 border border-grey-100 hover:bg-grey-100 active:bg-grey-200 disabled:bg-white-100 disabled:text-grey-200 disabled:border-grey-100',
pagination: '',
},
size: {
// 추후 삭제 예정
xSmall: 'py-1 px-2 text-xs',
small: 'py-2 px-4 text-xs',
basic: 'py-3 px-5 text-sm',
large: 'py-4 px-6 text-base',
// 리디자인 추가
xs: 'h-10',
sm: 'h-12',
md: 'h-14',
lg: 'h-16',
},
width: {
fit: 'w-fit',
fit: 'w-fit px-4',
full: 'w-full',
circular: 'rounded-full w-16 h-16',
},
},
defaultVariants: {
variant: 'primary',
size: 'basic',
width: 'full',
width: 'fit',
},
compoundVariants: [
{
Expand Down

0 comments on commit 37ea2c4

Please sign in to comment.