feat: Enhance BOM and UI components with improved label handling and data mapping

- Updated the BOM service to include additional fields in the BOM header retrieval, enhancing data richness.
- Enhanced the EditModal to automatically map foreign key fields to dot notation, improving data handling and user experience.
- Improved the rendering of labels in various components, allowing for customizable label positions and styles, enhancing UI flexibility.
- Added new properties for label positioning and spacing in the V2 component styles, allowing for better layout control.
- Enhanced the BomTreeComponent to support additional data mapping for entity joins, improving data accessibility and management.

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -1078,17 +1078,21 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   // TableSearchWidget의 경우 높이를 자동으로 설정
   const isTableSearchWidget = (component as any).componentId === "table-search-widget";
 
-  // 🆕 라벨 표시 여부 확인 (V2 입력 컴포넌트)
-  // labelDisplay가 false가 아니고, labelText 또는 label이 있으면 라벨 표시
-  const isV2InputComponent = type === "v2-input" || type === "v2-select" || type === "v2-date";
+  // 라벨 표시 여부 확인 (V2 입력 컴포넌트)
+  const compType = (component as any).componentType || "";
+  const isV2InputComponent = 
+    type === "v2-input" || type === "v2-select" || type === "v2-date" ||
+    compType === "v2-input" || compType === "v2-select" || compType === "v2-date";
   const hasVisibleLabel = isV2InputComponent && 
     style?.labelDisplay !== false && 
     (style?.labelText || (component as any).label);
   
-  // 라벨이 있는 경우 상단 여백 계산 (라벨 폰트크기 + 여백)
+  // 라벨 위치에 따라 오프셋 계산 (좌/우 배치 시 세로 오프셋 불필요)
+  const labelPos = style?.labelPosition || "top";
+  const isVerticalLabel = labelPos === "top" || labelPos === "bottom";
   const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
   const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
-  const labelOffset = hasVisibleLabel ? (labelFontSize + labelMarginBottom + 2) : 0;
+  const labelOffset = (hasVisibleLabel && isVerticalLabel) ? (labelFontSize + labelMarginBottom + 2) : 0;
 
   const calculateCanvasSplitX = (): { x: number; w: number } => {
     const compType = (component as any).componentType || "";
@@ -1238,10 +1242,56 @@ 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";
+
+  const externalLabelComponent = needsExternalLabel ? (
+    <label
+      className="text-sm font-medium leading-none"
+      style={{
+        fontSize: style?.labelFontSize || "14px",
+        color: style?.labelColor || "#212121",
+        fontWeight: style?.labelFontWeight || "500",
+        ...(isHorizLabel ? { whiteSpace: "nowrap" as const, display: "flex", alignItems: "center" } : {}),
+        ...(labelPos === "bottom" ? { marginTop: style?.labelMarginBottom || "4px" } : {}),
+      }}
+    >
+      {labelText}
+      {((component as any).required || (component as any).componentConfig?.required) && (
+        <span className="ml-1 text-destructive">*</span>
+      )}
+    </label>
+  ) : null;
+
+  const componentToRender = needsExternalLabel
+    ? { ...splitAdjustedComponent, style: { ...splitAdjustedComponent.style, labelDisplay: false } }
+    : splitAdjustedComponent;
+
   return (
     <>
       <div ref={elRef} id={`interactive-${component.id}`} className="absolute" style={componentStyle}>
-        {renderInteractiveWidget(splitAdjustedComponent)}
+        {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)}
+            </div>
+          </div>
+        ) : (
+          renderInteractiveWidget(componentToRender)
+        )}
       </div>
 
       {/* 팝업 화면 렌더링 */}