버튼 기능구현

frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx

@@ -16,12 +16,15 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
   component,
   isDesignMode = false,
   isSelected = false,
+  isInteractive = false,
   onClick,
   onDragStart,
   onDragEnd,
   config,
   className,
   style,
+  formData,
+  onFormDataChange,
   ...props
 }) => {
   // 컴포넌트 설정
@@ -64,6 +67,10 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
     size: _size,
     position: _position,
     style: _style,
+    screenId: _screenId,
+    tableName: _tableName,
+    onRefresh: _onRefresh,
+    onClose: _onClose,
     ...domProps
   } = props;
 
@@ -79,22 +86,28 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
             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>
       )}
 
       <div
-        style={{
-          width: "100%",
+        style={{width: "100%",
           height: "100%",
           display: "flex",
           flexDirection: componentConfig.direction === "horizontal" ? "row" : "column",
           gap: "8px",
           padding: "8px",
-        }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -102,13 +115,14 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
         {(componentConfig.options || []).map((option, index) => (
           <label
             key={index}
-            style={{
-              display: "flex",
+            style={{display: "flex",
               alignItems: "center",
               gap: "6px",
               cursor: "pointer",
               fontSize: "14px",
-            }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
           >
             <input
               type="radio"
@@ -117,37 +131,53 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
               checked={component.value === option.value}
               disabled={componentConfig.disabled || false}
               required={componentConfig.required || false}
-              style={{
-                width: "16px",
+              style={{width: "16px",
                 height: "16px",
                 accentColor: "#3b82f6",
-              }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
               onChange={(e) => {
                 if (component.onChange) {
                   component.onChange(e.target.value);
                 }
               }}
             />
-            <span style={{ color: "#374151" }}>{option.label}</span>
+            <span style={{color: "#374151",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>{option.label}</span>
           </label>
         ))}
         {(!componentConfig.options || componentConfig.options.length === 0) && (
           <>
-            <label style={{ display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "14px" }}>
+            <label style={{display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "14px",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>
               <input
                 type="radio"
                 name={component.id || "radio-group"}
                 value="option1"
-                style={{ width: "16px", height: "16px", accentColor: "#3b82f6" }}
+                style={{width: "16px", height: "16px", accentColor: "#3b82f6",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
               />
               <span>옵션 1</span>
             </label>
-            <label style={{ display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "14px" }}>
+            <label style={{display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "14px",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>
               <input
                 type="radio"
                 name={component.id || "radio-group"}
                 value="option2"
-                style={{ width: "16px", height: "16px", accentColor: "#3b82f6" }}
+                style={{width: "16px", height: "16px", accentColor: "#3b82f6",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
               />
               <span>옵션 2</span>
             </label>