슬롯 컴포넌트 상세 설정 패널 추가: RepeatContainerConfigPanel에 슬롯 컴포넌트의 필드 바인딩, 라벨 설정, 크기 및 스타일 변경 기능을 포함한 상세 설정 패널을 구현하였습니다. 또한, 동적 컴포넌트 설정 패널을 통해 각 컴포넌트의 전용 설정을 관리할 수 있도록 개선하였습니다.

2026-01-19 09:37:02 +09:00
parent b4bfb9964f
commit 6ea3aef396
2 changed files with 488 additions and 50 deletions
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -5,7 +5,9 @@
 import React from "react";

 // 컴포넌트별 ConfigPanel 동적 import 맵
+// 모든 ConfigPanel이 있는 컴포넌트를 여기에 등록해야 슬롯/중첩 컴포넌트에서 전용 설정 패널이 표시됨
 const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
+  // ========== 기본 입력 컴포넌트 ==========
  "text-input": () => import("@/lib/registry/components/text-input/TextInputConfigPanel"),
  "number-input": () => import("@/lib/registry/components/number-input/NumberInputConfigPanel"),
  "date-input": () => import("@/lib/registry/components/date-input/DateInputConfigPanel"),
@@ -15,34 +17,60 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
  "radio-basic": () => import("@/lib/registry/components/radio-basic/RadioBasicConfigPanel"),
  "toggle-switch": () => import("@/lib/registry/components/toggle-switch/ToggleSwitchConfigPanel"),
  "file-upload": () => import("@/lib/registry/components/file-upload/FileUploadConfigPanel"),
-  "button-primary": () => import("@/components/screen/config-panels/ButtonConfigPanel"),
-  "text-display": () => import("@/lib/registry/components/text-display/TextDisplayConfigPanel"),
  "slider-basic": () => import("@/lib/registry/components/slider-basic/SliderBasicConfigPanel"),
+  "test-input": () => import("@/lib/registry/components/test-input/TestInputConfigPanel"),
+
+  // ========== 버튼 ==========
+  "button-primary": () => import("@/components/screen/config-panels/ButtonConfigPanel"),
+
+  // ========== 표시 컴포넌트 ==========
+  "text-display": () => import("@/lib/registry/components/text-display/TextDisplayConfigPanel"),
  "image-display": () => import("@/lib/registry/components/image-display/ImageDisplayConfigPanel"),
  "divider-line": () => import("@/lib/registry/components/divider-line/DividerLineConfigPanel"),
+  "image-widget": () => import("@/lib/registry/components/image-widget/ImageWidgetConfigPanel"),
+
+  // ========== 레이아웃/컨테이너 ==========
  "accordion-basic": () => import("@/lib/registry/components/accordion-basic/AccordionBasicConfigPanel"),
-  "table-list": () => import("@/lib/registry/components/table-list/TableListConfigPanel"),
  "card-display": () => import("@/lib/registry/components/card-display/CardDisplayConfigPanel"),
-  "split-panel-layout": () => import("@/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel"),
-  "split-panel-layout2": () => import("@/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel"),
-  "repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
-  "flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
-  // 🆕 수주 등록 관련 컴포넌트들
-  "autocomplete-search-input": () =>
-    import("@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel"),
-  "entity-search-input": () => import("@/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel"),
-  "modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
-  // 🆕 조건부 컨테이너
-  "conditional-container": () =>
-    import("@/lib/registry/components/conditional-container/ConditionalContainerConfigPanel"),
-  // 🆕 선택 항목 상세입력
-  "selected-items-detail-input": () =>
-    import("@/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel"),
-  // 🆕 섹션 그룹화 레이아웃
  "section-card": () => import("@/lib/registry/components/section-card/SectionCardConfigPanel"),
  "section-paper": () => import("@/lib/registry/components/section-paper/SectionPaperConfigPanel"),
-  // 🆕 탭 컴포넌트
+  "split-panel-layout": () => import("@/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel"),
+  "split-panel-layout2": () => import("@/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel"),
+  "screen-split-panel": () => import("@/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel"),
+  "conditional-container": () => import("@/lib/registry/components/conditional-container/ConditionalContainerConfigPanel"),
+
+  // ========== 테이블/리스트 ==========
+  "table-list": () => import("@/lib/registry/components/table-list/TableListConfigPanel"),
+  "pivot-grid": () => import("@/lib/registry/components/pivot-grid/PivotGridConfigPanel"),
+  "table-search-widget": () => import("@/lib/registry/components/table-search-widget/TableSearchWidgetConfigPanel"),
+  "tax-invoice-list": () => import("@/lib/registry/components/tax-invoice-list/TaxInvoiceListConfigPanel"),
+
+  // ========== 리피터/반복 ==========
+  "repeat-container": () => import("@/lib/registry/components/repeat-container/RepeatContainerConfigPanel"),
+  "repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
+  "unified-repeater": () => import("@/components/unified/config-panels/UnifiedRepeaterConfigPanel"),
+  "simple-repeater-table": () => import("@/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel"),
+  "modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
+  "repeat-screen-modal": () => import("@/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel"),
+  "related-data-buttons": () => import("@/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel"),
+
+  // ========== 검색/선택 ==========
+  "autocomplete-search-input": () => import("@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel"),
+  "entity-search-input": () => import("@/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel"),
+  "selected-items-detail-input": () => import("@/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel"),
+  "customer-item-mapping": () => import("@/lib/registry/components/customer-item-mapping/CustomerItemMappingConfigPanel"),
+  "mail-recipient-selector": () => import("@/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel"),
+  "location-swap-selector": () => import("@/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel"),
+
+  // ========== 특수 컴포넌트 ==========
+  "flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
  "tabs-widget": () => import("@/components/screen/config-panels/TabsConfigPanel"),
+  "map": () => import("@/lib/registry/components/map/MapConfigPanel"),
+  "rack-structure": () => import("@/lib/registry/components/rack-structure/RackStructureConfigPanel"),
+  "aggregation-widget": () => import("@/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel"),
+  "numbering-rule": () => import("@/lib/registry/components/numbering-rule/NumberingRuleConfigPanel"),
+  "category-manager": () => import("@/lib/registry/components/category-manager/CategoryManagerConfigPanel"),
+  "universal-form-modal": () => import("@/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel"),
 };

 // ConfigPanel 컴포넌트 캐시
@@ -68,16 +96,43 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
    const module = await importFn();

    // 모듈에서 ConfigPanel 컴포넌트 추출
+    // 1차: PascalCase 변환된 이름으로 찾기 (예: text-input -> TextInputConfigPanel)
+    // 2차: 특수 export명들 fallback
+    // 3차: default export
+    const pascalCaseName = `${toPascalCase(componentId)}ConfigPanel`;
    const ConfigPanelComponent =
-      module[`${toPascalCase(componentId)}ConfigPanel`] ||
-      module.RepeaterConfigPanel || // repeater-field-group의 export명
-      module.FlowWidgetConfigPanel || // flow-widget의 export명
-      module.CustomerItemMappingConfigPanel || // customer-item-mapping의 export명
-      module.SelectedItemsDetailInputConfigPanel || // selected-items-detail-input의 export명
-      module.ButtonConfigPanel || // button-primary의 export명
-      module.SectionCardConfigPanel || // section-card의 export명
-      module.SectionPaperConfigPanel || // section-paper의 export명
-      module.TabsConfigPanel || // tabs-widget의 export명
+      module[pascalCaseName] ||
+      // 특수 export명들
+      module.RepeaterConfigPanel ||
+      module.FlowWidgetConfigPanel ||
+      module.CustomerItemMappingConfigPanel ||
+      module.SelectedItemsDetailInputConfigPanel ||
+      module.ButtonConfigPanel ||
+      module.SectionCardConfigPanel ||
+      module.SectionPaperConfigPanel ||
+      module.TabsConfigPanel ||
+      module.UnifiedRepeaterConfigPanel ||
+      module.RepeatContainerConfigPanel ||
+      module.ScreenSplitPanelConfigPanel ||
+      module.SimpleRepeaterTableConfigPanel ||
+      module.ModalRepeaterTableConfigPanel ||
+      module.RepeatScreenModalConfigPanel ||
+      module.RelatedDataButtonsConfigPanel ||
+      module.AutocompleteSearchInputConfigPanel ||
+      module.EntitySearchInputConfigPanel ||
+      module.MailRecipientSelectorConfigPanel ||
+      module.LocationSwapSelectorConfigPanel ||
+      module.MapConfigPanel ||
+      module.RackStructureConfigPanel ||
+      module.AggregationWidgetConfigPanel ||
+      module.NumberingRuleConfigPanel ||
+      module.CategoryManagerConfigPanel ||
+      module.UniversalFormModalConfigPanel ||
+      module.PivotGridConfigPanel ||
+      module.TableSearchWidgetConfigPanel ||
+      module.TaxInvoiceListConfigPanel ||
+      module.ImageWidgetConfigPanel ||
+      module.TestInputConfigPanel ||
      module.default;

    if (!ConfigPanelComponent) {