버튼 기능구현

frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx

@@ -16,12 +16,15 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
   component,
   isDesignMode = false,
   isSelected = false,
+  isInteractive = false,
   onClick,
   onDragStart,
   onDragEnd,
   config,
   className,
   style,
+  formData,
+  onFormDataChange,
   ...props
 }) => {
   // 컴포넌트 설정
@@ -64,6 +67,10 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
     size: _size,
     position: _position,
     style: _style,
+    screenId: _screenId,
+    tableName: _tableName,
+    onRefresh: _onRefresh,
+    onClose: _onClose,
     ...domProps
   } = props;
 
@@ -79,30 +86,35 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             fontSize: component.style?.labelFontSize || "14px",
             color: component.style?.labelColor || "#374151",
             fontWeight: "500",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
           }}
         >
           {component.label}
-          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
+          {component.required && <span style={{color: "#ef4444",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>*</span>}
         </label>
       )}
 
       <label
-        style={{
-          display: "flex",
+        style={{display: "flex",
           alignItems: "center",
           gap: "12px",
           cursor: "pointer",
           width: "100%",
           height: "100%",
           fontSize: "14px",
-        }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
         <div
-          style={{
-            position: "relative",
+          style={{position: "relative",
             width: "48px",
             height: "24px",
             backgroundColor: component.value === true ? "#3b82f6" : "#d1d5db",
@@ -110,6 +122,8 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             transition: "background-color 0.2s",
             cursor: componentConfig.disabled ? "not-allowed" : "pointer",
             opacity: componentConfig.disabled ? 0.5 : 1,
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
           }}
         >
           <input
@@ -118,12 +132,14 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             disabled={componentConfig.disabled || false}
             required={componentConfig.required || false}
             style={{
-              position: "absolute",
+            position: "absolute",
               opacity: 0,
               width: "100%",
               height: "100%",
               cursor: "pointer",
-            }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
             onChange={(e) => {
               if (component.onChange) {
                 component.onChange(e.target.checked);
@@ -132,7 +148,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
           />
           <div
             style={{
-              position: "absolute",
+            position: "absolute",
               top: "2px",
               left: component.value === true ? "26px" : "2px",
               width: "20px",
@@ -141,10 +157,15 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
               borderRadius: "50%",
               transition: "left 0.2s",
               boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-            }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
           />
         </div>
-        <span style={{ color: "#374151" }}>{componentConfig.toggleLabel || (component.value ? "켜짐" : "꺼짐")}</span>
+        <span style={{color: "#374151",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>{componentConfig.toggleLabel || (component.value ? "켜짐" : "꺼짐")}</span>
       </label>
     </div>
   );