refactor: Enhance horizontal label handling in dynamic components

- Updated the InteractiveScreenViewerDynamic and RealtimePreviewDynamic components to improve horizontal label rendering and style management.
- Refactored the DynamicComponentRenderer to support external horizontal labels, ensuring proper display and positioning based on component styles.
- Cleaned up style handling by removing unnecessary border properties for horizontal labels, enhancing visual consistency.
- Improved the logic for determining label display requirements, streamlining the rendering process for dynamic components.

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -1119,6 +1119,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
   const labelOffset = (hasVisibleLabel && isVerticalLabel) ? (labelFontSize + labelMarginBottom + 2) : 0;
 
+  // 수평 라벨 관련 (componentStyle 계산보다 먼저 선언)
+  const needsExternalLabel = hasVisibleLabel && labelPos !== "top";
+  const isHorizLabel = labelPos === "left" || labelPos === "right";
+  const labelText = style?.labelText || (component as any).label || "";
+  const labelGapValue = style?.labelGap || "8px";
+
   const calculateCanvasSplitX = (): { x: number; w: number } => {
     const compType = (component as any).componentType || "";
     const isSplitLine = type === "component" && compType === "v2-split-line";
@@ -1194,9 +1200,17 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   // styleWithoutSize에서 left/top 제거 (캔버스 분할 조정값 덮어쓰기 방지)
   const { left: _styleLeft, top: _styleTop, ...safeStyleWithoutSize } = styleWithoutSize as any;
 
+  // 수평 라벨 컴포넌트: position wrapper에서 border 제거 (내부 V2 컴포넌트가 기본 border 사용)
+  const cleanedStyle = (isHorizLabel && needsExternalLabel)
+    ? (() => {
+        const { borderWidth: _bw, borderColor: _bc, borderStyle: _bs, border: _b, borderRadius: _br, ...rest } = safeStyleWithoutSize;
+        return rest;
+      })()
+    : safeStyleWithoutSize;
+
   const componentStyle = {
     position: "absolute" as const,
-    ...safeStyleWithoutSize,
+    ...cleanedStyle,
     // left/top은 반드시 마지막에 (styleWithoutSize가 덮어쓰지 못하게)
     left: adjustedX,
     top: position?.y || 0,
@@ -1267,11 +1281,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     return unsubscribe;
   }, [component.id, position?.x, size?.width, type]);
 
-  // 라벨 위치가 top이 아닌 경우: 외부에서 라벨을 렌더링하고 내부 라벨은 숨김
-  const needsExternalLabel = hasVisibleLabel && labelPos !== "top";
-  const isHorizLabel = labelPos === "left" || labelPos === "right";
-  const labelText = style?.labelText || (component as any).label || "";
-  const labelGapValue = style?.labelGap || "8px";
+  // needsExternalLabel, isHorizLabel, labelText, labelGapValue는 위에서 선언됨
 
   const externalLabelComponent = needsExternalLabel ? (
     <label
@@ -1298,7 +1308,15 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           ...splitAdjustedComponent.style,
           labelDisplay: false,
           labelPosition: "top" as const,
-          ...(isHorizLabel ? { width: "100%", height: "100%" } : {}),
+          ...(isHorizLabel ? { 
+            width: "100%", 
+            height: "100%",
+            borderWidth: undefined,
+            borderColor: undefined,
+            borderStyle: undefined,
+            border: undefined,
+            borderRadius: undefined,
+          } : {}),
         },
         ...(isHorizLabel ? {
           size: {
@@ -1314,21 +1332,47 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     <>
       <div ref={elRef} id={`interactive-${component.id}`} className="absolute" style={componentStyle}>
         {needsExternalLabel ? (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: isHorizLabel ? (labelPos === "left" ? "row" : "row-reverse") : "column-reverse",
-              alignItems: isHorizLabel ? "center" : undefined,
-              gap: isHorizLabel ? labelGapValue : undefined,
-              width: "100%",
-              height: "100%",
-            }}
-          >
-            {externalLabelComponent}
-            <div style={{ flex: 1, minWidth: 0, height: isHorizLabel ? "100%" : undefined }}>
-              {renderInteractiveWidget(componentToRender)}
+          isHorizLabel ? (
+            <div style={{ position: "relative", width: "100%", height: "100%" }}>
+              <label
+                className="text-sm font-medium leading-none"
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  ...(labelPos === "left"
+                    ? { right: "100%", marginRight: labelGapValue }
+                    : { left: "100%", marginLeft: labelGapValue }),
+                  fontSize: style?.labelFontSize || "14px",
+                  color: style?.labelColor || "#212121",
+                  fontWeight: style?.labelFontWeight || "500",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {labelText}
+                {((component as any).required || (component as any).componentConfig?.required) && (
+                  <span className="ml-1 text-destructive">*</span>
+                )}
+              </label>
+              <div style={{ width: "100%", height: "100%" }}>
+                {renderInteractiveWidget(componentToRender)}
+              </div>
             </div>
-          </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column-reverse",
+                width: "100%",
+                height: "100%",
+              }}
+            >
+              {externalLabelComponent}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                {renderInteractiveWidget(componentToRender)}
+              </div>
+            </div>
+          )
         ) : (
           renderInteractiveWidget(componentToRender)
         )}