refactor: ButtonPrimaryComponent를 shadcn 가이드라인에 맞게 수정

- 그라데이션 배경 제거하고 단색 배경 적용
- 동적 색상 기반 그림자 제거하고 표준 shadcn 그림자 적용
- hover:opacity-90 효과 추가 (부드러운 어두워짐)
- active:scale-95 효과 추가 (클릭 피드백)
- transition-colors duration-150으로 빠른 색상 전환 적용
- disabled 상태를 단색 회색으로 개선

shadcn/ui 가이드라인 준수:
- 심플하고 깔끔한 단색 디자인
- 일관된 인터랙션 패턴
- 표준화된 그림자 및 전환 효과
This commit is contained in:
kjs 2025-11-06 11:49:24 +09:00
parent fe306aed26
commit 2b2c096a99
1 changed files with 3 additions and 16 deletions

View File

@ -195,17 +195,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
const buttonColor = getLabelColor(); const buttonColor = getLabelColor();
// 그라데이션용 어두운 색상 계산
const getDarkColor = (baseColor: string) => {
const hex = baseColor.replace("#", "");
const r = Math.max(0, parseInt(hex.substr(0, 2), 16) - 40);
const g = Math.max(0, parseInt(hex.substr(2, 2), 16) - 40);
const b = Math.max(0, parseInt(hex.substr(4, 2), 16) - 40);
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
};
const buttonDarkColor = getDarkColor(buttonColor);
// 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환 // 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환
const processedConfig = { ...componentConfig }; const processedConfig = { ...componentConfig };
if (componentConfig.action && typeof componentConfig.action === "string") { if (componentConfig.action && typeof componentConfig.action === "string") {
@ -545,16 +534,14 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
<button <button
type={componentConfig.actionType || "button"} type={componentConfig.actionType || "button"}
disabled={componentConfig.disabled || false} disabled={componentConfig.disabled || false}
className="transition-all duration-200" className="transition-colors duration-150 hover:opacity-90 active:scale-95 transition-transform"
style={{ style={{
width: "100%", width: "100%",
height: "100%", height: "100%",
minHeight: "40px", minHeight: "40px",
border: "none", border: "none",
borderRadius: "0.5rem", borderRadius: "0.5rem",
background: componentConfig.disabled background: componentConfig.disabled ? "#e5e7eb" : buttonColor,
? "linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%)"
: `linear-gradient(135deg, ${buttonColor} 0%, ${buttonDarkColor} 100%)`,
color: componentConfig.disabled ? "#9ca3af" : "white", color: componentConfig.disabled ? "#9ca3af" : "white",
// 🔧 크기 설정 적용 (sm/md/lg) // 🔧 크기 설정 적용 (sm/md/lg)
fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem", fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
@ -570,7 +557,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem", componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem",
margin: "0", margin: "0",
lineHeight: "1.25", lineHeight: "1.25",
boxShadow: componentConfig.disabled ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : `0 1px 3px 0 ${buttonColor}40`, boxShadow: componentConfig.disabled ? "none" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
// isInteractive 모드에서는 사용자 스타일 우선 적용 (width/height 제외) // isInteractive 모드에서는 사용자 스타일 우선 적용 (width/height 제외)
...(isInteractive && component.style ? Object.fromEntries( ...(isInteractive && component.style ? Object.fromEntries(
Object.entries(component.style).filter(([key]) => key !== 'width' && key !== 'height') Object.entries(component.style).filter(([key]) => key !== 'width' && key !== 'height')