From cdf9c0e562203a08a96da2e525b5d7374dc74026 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:36:18 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=99=94=EB=A9=B4=20=ED=8E=B8=EC=A7=91?=
 =?UTF-8?q?=EA=B8=B0=EC=97=90=EC=84=9C=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=84=A0=ED=83=9D=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제: 버튼 컴포넌트 클릭 시 버튼 동작이 실행되어 선택되지 않음
- 해결:
  1. ButtonPrimaryComponent에서 디자인 모드일 때 <button> 대신 <div>로 렌더링
  2. ScreenDesigner의 ScreenPreviewProvider에서 isPreviewMode를 false로 설정
  3. 디자인 모드에서는 버튼 액션이 실행되지 않고 onClick만 전달되도록 수정
- 영향: button-primary 타입 버튼이 화면 편집기에서 정상적으로 선택 가능
---
 .../components/screen/RealtimePreview.tsx     |  2 +-
 frontend/components/screen/ScreenDesigner.tsx |  2 +-
 .../screen/widgets/types/ButtonWidget.tsx     | 30 +++++-
 .../button-primary/ButtonPrimaryComponent.tsx | 94 +++++++++++--------
 4 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/frontend/components/screen/RealtimePreview.tsx b/frontend/components/screen/RealtimePreview.tsx
index ab8cc3ae..81f8dc21 100644
--- a/frontend/components/screen/RealtimePreview.tsx
+++ b/frontend/components/screen/RealtimePreview.tsx
@@ -563,7 +563,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
         {/* 위젯 타입 - 동적 렌더링 (파일 컴포넌트 제외) */}
         {type === "widget" && !isFileComponent(component) && (
-          <div className="pointer-events-none h-full w-full">
+          <div className="h-full w-full">
             <WidgetRenderer 
               component={component} 
               isDesignMode={isDesignMode}
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 3fdb9f23..665ab16f 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -4124,7 +4124,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   }
 
   return (
-    <ScreenPreviewProvider isPreviewMode={true}>
+    <ScreenPreviewProvider isPreviewMode={false}>
       <div className="bg-background flex h-full w-full flex-col">
         {/* 상단 슬림 툴바 */}
         <SlimToolbar
diff --git a/frontend/components/screen/widgets/types/ButtonWidget.tsx b/frontend/components/screen/widgets/types/ButtonWidget.tsx
index 808cf5d0..866427c6 100644
--- a/frontend/components/screen/widgets/types/ButtonWidget.tsx
+++ b/frontend/components/screen/widgets/types/ButtonWidget.tsx
@@ -14,10 +14,17 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
   required,
   className,
   style,
+  isDesignMode = false, // 디자인 모드 플래그
+  ...restProps
 }) => {
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    // 디자인 모드에서는 아무것도 하지 않고 그냥 이벤트 전파
+    if (isDesignMode) {
+      return;
+    }
+
     // 버튼 클릭 시 동작 (추후 버튼 액션 시스템과 연동)
-    // console.log("Button clicked:", config);
+    console.log("Button clicked:", config);
 
     // onChange를 통해 클릭 이벤트 전달
     if (onChange) {
@@ -25,6 +32,25 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
     }
   };
 
+  // 디자인 모드에서는 div로 렌더링하여 버튼 동작 완전 차단
+  if (isDesignMode) {
+    return (
+      <div
+        onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
+        className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white ${className || ""} `}
+        style={{
+          ...style,
+          width: "100%",
+          height: "100%",
+          cursor: "pointer", // 선택 가능하도록 포인터 표시
+        }}
+        title={config?.tooltip || placeholder}
+      >
+        {config?.label || config?.text || value || placeholder || "버튼"}
+      </div>
+    );
+  }
+
   return (
     <button
       type="button"
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 43b08177..c66d11c4 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -528,48 +528,64 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     }
   }
 
+  // 공통 버튼 스타일
+  const buttonElementStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    minHeight: "40px",
+    border: "none",
+    borderRadius: "0.5rem",
+    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",
+    fontWeight: "600",
+    cursor: componentConfig.disabled ? "not-allowed" : "pointer",
+    outline: "none",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    // 🔧 크기에 따른 패딩 조정
+    padding:
+      componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem",
+    margin: "0",
+    lineHeight: "1.25",
+    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')
+    ) : {}),
+  };
+
+  const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+
   return (
     <>
       <div style={componentStyle} className={className} {...safeDomProps}>
-        <button
-          type={componentConfig.actionType || "button"}
-          disabled={componentConfig.disabled || false}
-          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 ? "#e5e7eb" : buttonColor,
-            color: componentConfig.disabled ? "#9ca3af" : "white",
-            // 🔧 크기 설정 적용 (sm/md/lg)
-            fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
-            fontWeight: "600",
-            cursor: componentConfig.disabled ? "not-allowed" : "pointer",
-            outline: "none",
-            boxSizing: "border-box",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            // 🔧 크기에 따른 패딩 조정
-            padding:
-              componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem",
-            margin: "0",
-            lineHeight: "1.25",
-            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')
-            ) : {}),
-          }}
-          onClick={handleClick}
-          onDragStart={onDragStart}
-          onDragEnd={onDragEnd}
-        >
-          {/* 🔧 빈 문자열도 허용 (undefined일 때만 기본값 적용) */}
-          {processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼"}
-        </button>
+        {isDesignMode ? (
+          // 디자인 모드: div로 렌더링하여 선택 가능하게 함
+          <div
+            className="transition-colors duration-150 hover:opacity-90"
+            style={buttonElementStyle}
+            onClick={handleClick}
+          >
+            {buttonContent}
+          </div>
+        ) : (
+          // 일반 모드: button으로 렌더링
+          <button
+            type={componentConfig.actionType || "button"}
+            disabled={componentConfig.disabled || false}
+            className="transition-colors duration-150 hover:opacity-90 active:scale-95 transition-transform"
+            style={buttonElementStyle}
+            onClick={handleClick}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+          >
+            {buttonContent}
+          </button>
+        )}
       </div>
 
       {/* 확인 다이얼로그 - EditModal보다 위에 표시하도록 z-index 최상위로 설정 */}