라벨표시 수정

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

@@ -77,7 +77,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,30 +91,39 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
           }}
         >
           {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>
       )}
 
       <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 : {}),
-          }}
+          // 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",
@@ -132,14 +141,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 : {}),
-          }}
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
             onChange={(e) => {
               if (component.onChange) {
                 component.onChange(e.target.checked);
@@ -148,7 +157,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
           />
           <div
             style={{
-            position: "absolute",
+              position: "absolute",
               top: "2px",
               left: component.value === true ? "26px" : "2px",
               width: "20px",
@@ -157,15 +166,20 @@ 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",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
-          />
-        </div>
-        <span style={{color: "#374151",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>{componentConfig.toggleLabel || (component.value ? "켜짐" : "꺼짐")}</span>
+        >
+          {componentConfig.toggleLabel || (component.value ? "켜짐" : "꺼짐")}
+        </span>
       </label>
     </div>
   );