From 2b2c096a990f69513dee74e8f26d3bd2d6762491 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 6 Nov 2025 11:49:24 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20ButtonPrimaryComponent=EB=A5=BC=20s?=
 =?UTF-8?q?hadcn=20=EA=B0=80=EC=9D=B4=EB=93=9C=EB=9D=BC=EC=9D=B8=EC=97=90?=
 =?UTF-8?q?=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

shadcn/ui 가이드라인 준수:
- 심플하고 깔끔한 단색 디자인
- 일관된 인터랙션 패턴
- 표준화된 그림자 및 전환 효과
---
 .../button-primary/ButtonPrimaryComponent.tsx | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index dd3951b9..fc86ceb7 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -195,17 +195,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
 
   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에서 문자열로 저장된 액션을 객체로 변환
   const processedConfig = { ...componentConfig };
   if (componentConfig.action && typeof componentConfig.action === "string") {
@@ -545,16 +534,14 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         <button
           type={componentConfig.actionType || "button"}
           disabled={componentConfig.disabled || false}
-          className="transition-all duration-200"
+          className="transition-colors duration-150 hover:opacity-90 active:scale-95 transition-transform"
           style={{
             width: "100%",
             height: "100%",
             minHeight: "40px",
             border: "none",
             borderRadius: "0.5rem",
-            background: componentConfig.disabled
-              ? "linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%)"
-              : `linear-gradient(135deg, ${buttonColor} 0%, ${buttonDarkColor} 100%)`,
+            background: componentConfig.disabled ? "#e5e7eb" : buttonColor,
             color: componentConfig.disabled ? "#9ca3af" : "white",
             // 🔧 크기 설정 적용 (sm/md/lg)
             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",
             margin: "0",
             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 && component.style ? Object.fromEntries(
               Object.entries(component.style).filter(([key]) => key !== 'width' && key !== 'height')