refactor: ButtonPrimaryComponent를 shadcn 가이드라인에 맞게 수정
- 그라데이션 배경 제거하고 단색 배경 적용 - 동적 색상 기반 그림자 제거하고 표준 shadcn 그림자 적용 - hover:opacity-90 효과 추가 (부드러운 어두워짐) - active:scale-95 효과 추가 (클릭 피드백) - transition-colors duration-150으로 빠른 색상 전환 적용 - disabled 상태를 단색 회색으로 개선 shadcn/ui 가이드라인 준수: - 심플하고 깔끔한 단색 디자인 - 일관된 인터랙션 패턴 - 표준화된 그림자 및 전환 효과
This commit is contained in:
parent
fe306aed26
commit
2b2c096a99
|
|
@ -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')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue