generated from gc/template-java-maven
HYOJIN
88e25abe14
- 디자인 시스템 CSS 변수 토큰 적용 (success/warning/danger/info) - PeriodFilter 공통 컴포넌트 생성 및 통계 페이지 적용 - SERVICE_BADGE_VARIANTS 공통 상수 추출 - 통계/요청로그/키관리/관리자 페이지 레퍼런스 디자인 반영 - 테이블 규격 통일 (h-8/h-7, px-3 py-1, text-xs, Button xs) - 타이틀 아이콘 전체 페이지 통일 - 카드 테두리 디자인 통일 (border + rounded-xl) - FHD 1920x1080 최적화
57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { cn } from '../../utils/cn';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'danger';
|
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const variantStyles = {
|
|
primary:
|
|
'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] active:bg-[var(--color-primary-active)]' +
|
|
' dark:bg-[var(--color-primary-600)] dark:hover:bg-[var(--color-primary-500)]',
|
|
secondary:
|
|
'bg-[var(--color-secondary)] text-[var(--color-secondary-text)] hover:bg-[var(--color-secondary-hover)] active:bg-[var(--color-secondary-active)]' +
|
|
' dark:bg-[var(--color-secondary-700)] dark:text-white dark:hover:bg-[var(--color-secondary-600)]',
|
|
accent:
|
|
'bg-[var(--color-accent)] text-[var(--color-accent-text)] hover:bg-[var(--color-accent-hover)] active:bg-[var(--color-accent-active)]' +
|
|
' dark:bg-[var(--color-accent-600)] dark:text-white dark:hover:bg-[var(--color-accent-500)]',
|
|
outline:
|
|
'border border-[var(--color-border-strong)] text-[var(--color-text-primary)] hover:bg-[var(--color-primary-subtle)] bg-transparent' +
|
|
' dark:border-[var(--color-primary-400)] dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-600)]/15',
|
|
ghost:
|
|
'text-[var(--color-text-secondary)] hover:bg-[var(--color-primary-subtle)] bg-transparent' +
|
|
' dark:text-[var(--color-primary-300)] dark:hover:bg-[var(--color-primary-600)]/12',
|
|
danger:
|
|
'bg-[var(--color-danger)] text-white hover:opacity-90' +
|
|
' dark:bg-red-500 dark:hover:bg-red-600 dark:hover:opacity-100',
|
|
};
|
|
|
|
const sizeStyles = {
|
|
xs: 'h-5 px-2 text-[10px] gap-1 rounded-md',
|
|
sm: 'h-8 px-3 text-xs gap-1.5',
|
|
md: 'h-10 px-4 text-sm gap-2',
|
|
lg: 'h-12 px-6 text-base gap-2',
|
|
};
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ variant = 'primary', size = 'md', className, disabled, children, ...props }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
disabled={disabled}
|
|
className={cn(
|
|
'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
variantStyles[variant],
|
|
sizeStyles[size],
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
),
|
|
);
|
|
Button.displayName = 'Button';
|
|
export default Button;
|