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/EnhancedInteractiveScreenViewer.tsx

@@ -245,23 +245,29 @@ export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreen
     };
 
     // 라벨 렌더링
+    const labelPos = widget.style?.labelPosition || "top";
+    const isHorizLabel = labelPos === "left" || labelPos === "right";
+
     const renderLabel = () => {
       if (hideLabel) return null;
 
-      const labelStyle = widget.style || {};
+      const ls = widget.style || {};
       const labelElement = (
         <label
-          className={`mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${hasError ? "text-destructive" : ""}`}
+          className={`text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${hasError ? "text-destructive" : ""}`}
           style={{
-            fontSize: labelStyle.labelFontSize || "14px",
-            color: hasError ? "hsl(var(--destructive))" : labelStyle.labelColor || undefined,
-            fontWeight: labelStyle.labelFontWeight || "500",
-            fontFamily: labelStyle.labelFontFamily,
-            textAlign: labelStyle.labelTextAlign || "left",
-            backgroundColor: labelStyle.labelBackgroundColor,
-            padding: labelStyle.labelPadding,
-            borderRadius: labelStyle.labelBorderRadius,
-            marginBottom: labelStyle.labelMarginBottom || "8px",
+            fontSize: ls.labelFontSize || "14px",
+            color: hasError ? "hsl(var(--destructive))" : ls.labelColor || undefined,
+            fontWeight: ls.labelFontWeight || "500",
+            fontFamily: ls.labelFontFamily,
+            textAlign: ls.labelTextAlign || "left",
+            backgroundColor: ls.labelBackgroundColor,
+            padding: ls.labelPadding,
+            borderRadius: ls.labelBorderRadius,
+            ...(isHorizLabel
+              ? { whiteSpace: "nowrap" as const, display: "flex", alignItems: "center" }
+              : { marginBottom: labelPos === "top" ? (ls.labelMarginBottom || "8px") : undefined,
+                  marginTop: labelPos === "bottom" ? (ls.labelMarginBottom || "8px") : undefined }),
           }}
         >
           {widget.label}
@@ -332,11 +338,28 @@ export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreen
       }
     };
 
+    const labelElement = renderLabel();
+    const widgetElement = renderByWebType();
+    const validationElement = renderFieldValidation();
+
+    if (isHorizLabel && labelElement) {
+      return (
+        <div key={comp.id}>
+          <div style={{ display: "flex", flexDirection: labelPos === "left" ? "row" : "row-reverse", alignItems: "center", gap: widget.style?.labelGap || "8px" }}>
+            {labelElement}
+            <div style={{ flex: 1, minWidth: 0 }}>{widgetElement}</div>
+          </div>
+          {validationElement}
+        </div>
+      );
+    }
+
     return (
-      <div key={comp.id} className="space-y-2">
-        {renderLabel()}
-        {renderByWebType()}
-        {renderFieldValidation()}
+      <div key={comp.id}>
+        {labelPos === "top" && labelElement}
+        {widgetElement}
+        {labelPos === "bottom" && labelElement}
+        {validationElement}
       </div>
     );
   };