라벨표시 수정

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

@@ -77,7 +77,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,23 +91,31 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && <span style={{color: "#ef4444",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>*</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 : {}),
-          }}
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -115,14 +123,15 @@ 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 : {}),
-          }}
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
           >
             <input
               type="radio"
@@ -131,53 +140,79 @@ 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 : {}),
-          }}
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
               onChange={(e) => {
                 if (component.onChange) {
                   component.onChange(e.target.value);
                 }
               }}
             />
-            <span style={{color: "#374151",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>{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",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>
+            <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",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+                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",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>
+            <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",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+                style={{
+                  width: "16px",
+                  height: "16px",
+                  accentColor: "#3b82f6",
+                  // isInteractive 모드에서는 사용자 스타일 우선 적용
+                  ...(isInteractive && component.style ? component.style : {}),
+                }}
               />
               <span>옵션 2</span>
             </label>