From 00376202fdbc699f6e7ee5078b1559ec9da7cd7b Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Mon, 29 Dec 2025 09:06:07 +0900
Subject: [PATCH] =?UTF-8?q?feat(universal-form-modal):=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=B6=80=20=ED=85=8C=EC=9D=B4=EB=B8=94,=20=EB=8F=99?=
 =?UTF-8?q?=EC=A0=81=20Select=20=EC=98=B5=EC=85=98,=20=EC=84=9C=EB=B8=8C?=
 =?UTF-8?q?=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=88=98=EC=A0=95=20=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 조건부 테이블: 체크박스/탭으로 조건 선택 시 다른 테이블 데이터 관리
- 동적 Select 옵션: 소스 테이블에서 드롭다운 옵션 동적 로드
- 행 선택 모드: Select 값 변경 시 같은 소스 행의 연관 컬럼 자동 채움
- 수정 모드 서브 테이블 로드: loadOnEdit 옵션으로 반복 섹션 데이터 자동 로드
- SplitPanelLayout2 메인 테이블 병합: 서브 테이블 수정 시 메인 데이터 함께 조회
- 연결 필드 그룹 표시 형식: subDisplayColumn 추가로 메인/서브 컬럼 분리 설정
- UX 개선: 컬럼 선택 UI를 검색 가능한 Combobox로 전환
- saveMainAsFirst 로직 개선: items 없어도 메인 데이터 저장 가능
---
 .../ActionButtonConfigModal.tsx               |  1 +
 .../split-panel-layout2/ColumnConfigModal.tsx |  1 +
 .../components/split-panel-layout2/README.md  |  1 +
 .../SplitPanelLayout2Renderer.tsx             |  1 +
 .../components/SearchableColumnSelect.tsx     |  1 +
 .../components/SortableColumnItem.tsx         |  1 +
 .../modals/SectionLayoutModal.tsx             |  1 +
 .../modals/TableSectionSettingsModal.tsx      | 32 +++++++++++++++++--
 8 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/lib/registry/components/split-panel-layout2/ActionButtonConfigModal.tsx b/frontend/lib/registry/components/split-panel-layout2/ActionButtonConfigModal.tsx
index aeff27c2..5efd59b8 100644
--- a/frontend/lib/registry/components/split-panel-layout2/ActionButtonConfigModal.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/ActionButtonConfigModal.tsx
@@ -672,3 +672,4 @@ export const ActionButtonConfigModal: React.FC<ActionButtonConfigModalProps> = (
 
 export default ActionButtonConfigModal;
 
+
diff --git a/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx b/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
index 89866651..ae6c4093 100644
--- a/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
@@ -803,3 +803,4 @@ export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
 
 export default ColumnConfigModal;
 
+
diff --git a/frontend/lib/registry/components/split-panel-layout2/README.md b/frontend/lib/registry/components/split-panel-layout2/README.md
index 26d2a669..aafdc38d 100644
--- a/frontend/lib/registry/components/split-panel-layout2/README.md
+++ b/frontend/lib/registry/components/split-panel-layout2/README.md
@@ -102,3 +102,4 @@
 
 
 
+
diff --git a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Renderer.tsx b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Renderer.tsx
index 642de9a2..57979869 100644
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Renderer.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Renderer.tsx
@@ -42,3 +42,4 @@ SplitPanelLayout2Renderer.registerSelf();
 
 
 
+
diff --git a/frontend/lib/registry/components/split-panel-layout2/components/SearchableColumnSelect.tsx b/frontend/lib/registry/components/split-panel-layout2/components/SearchableColumnSelect.tsx
index 24602860..da160f3e 100644
--- a/frontend/lib/registry/components/split-panel-layout2/components/SearchableColumnSelect.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/components/SearchableColumnSelect.tsx
@@ -161,3 +161,4 @@ export const SearchableColumnSelect: React.FC<SearchableColumnSelectProps> = ({
 
 export default SearchableColumnSelect;
 
+
diff --git a/frontend/lib/registry/components/split-panel-layout2/components/SortableColumnItem.tsx b/frontend/lib/registry/components/split-panel-layout2/components/SortableColumnItem.tsx
index 8e3cef91..4a188983 100644
--- a/frontend/lib/registry/components/split-panel-layout2/components/SortableColumnItem.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/components/SortableColumnItem.tsx
@@ -116,3 +116,4 @@ export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
 
 export default SortableColumnItem;
 
+
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
index b47c2424..0031e5d0 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
@@ -1125,3 +1125,4 @@ export function SectionLayoutModal({
 }
 
 
+
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
index 535be447..f8b77aba 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
@@ -1538,12 +1538,12 @@ function ColumnSettingItem({
                   </p>
                   {sourceTableColumns.length > 0 ? (
                     <Select
-                      value={col.dynamicSelectOptions.labelField || ""}
+                      value={col.dynamicSelectOptions.labelField || "__same_as_source__"}
                       onValueChange={(value) => {
                         onUpdate({
                           dynamicSelectOptions: {
                             ...col.dynamicSelectOptions!,
-                            labelField: value,
+                            labelField: value === "__same_as_source__" ? "" : value,
                           },
                         });
                       }}
@@ -1552,7 +1552,7 @@ function ColumnSettingItem({
                         <SelectValue placeholder="(소스 컬럼과 동일)" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="" className="text-xs text-muted-foreground">
+                        <SelectItem value="__same_as_source__" className="text-xs text-muted-foreground">
                           (소스 컬럼과 동일)
                         </SelectItem>
                         {sourceTableColumns.map((c) => (
@@ -3207,6 +3207,32 @@ export function TableSectionSettingsModal({
                               </p>
                             </div>
                           )}
+
+                          {/* 사용 가이드 */}
+                          <div className="mt-4 p-3 bg-blue-50/50 border border-blue-200/50 rounded-lg space-y-2">
+                            <p className="text-xs font-medium text-blue-700">사용 가이드</p>
+                            <div className="text-[10px] text-blue-600 space-y-1.5">
+                              <p className="font-medium">1. 소스 테이블 필터링 활성화 후:</p>
+                              <ul className="list-disc pl-4 space-y-0.5">
+                                <li><span className="font-medium">항목 검색</span>: 검색 모달에서 필터링된 데이터만 표시</li>
+                                <li><span className="font-medium">빈 행 추가</span>: 드롭다운 옵션이 필터링된 데이터로 제한</li>
+                              </ul>
+                              <p className="font-medium mt-2">2. 컬럼 설정에서 추가 설정:</p>
+                              <ul className="list-disc pl-4 space-y-0.5">
+                                <li>컬럼 타입을 <span className="font-medium">"선택(드롭다운)"</span>으로 변경</li>
+                                <li><span className="font-medium">"동적 드롭다운 옵션"</span> 섹션이 나타남</li>
+                                <li>소스 컬럼 선택 → 해당 컬럼 값이 드롭다운 옵션으로 표시</li>
+                                <li><span className="font-medium">"행 선택 모드"</span> 활성화 시 → 선택한 값의 같은 행 데이터를 다른 컬럼에 자동 채움</li>
+                              </ul>
+                              <p className="font-medium mt-2">3. 예시 (품목검사정보):</p>
+                              <ul className="list-disc pl-4 space-y-0.5">
+                                <li>"입고검사" 체크박스 선택 → 테이블 탭 표시</li>
+                                <li>"항목 추가" 클릭 → 빈 행 생성</li>
+                                <li>"검사항목" 드롭다운 → inspection_type='입고검사'인 항목만 표시</li>
+                                <li>검사항목 선택 시 → 검사기준, 검사방법 자동 채움 (행 선택 모드)</li>
+                              </ul>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     )}