From 615bd8e2bf709409d6b21d2fbfdc915b5eb02950 Mon Sep 17 00:00:00 2001 From: DDD1542 Date: Wed, 11 Mar 2026 16:49:44 +0900 Subject: [PATCH] [agent-pipeline] pipe-20260311071246-rhvz round-7 --- .../config-panels/V2HierarchyConfigPanel.tsx | 466 +++++++++--------- .../config-panels/V2RepeaterConfigPanel.tsx | 198 ++++---- 2 files changed, 314 insertions(+), 350 deletions(-) diff --git a/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx b/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx index db234c91..0053baae 100644 --- a/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx +++ b/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx @@ -9,7 +9,6 @@ import React, { useState, useEffect } from "react"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Separator } from "@/components/ui/separator"; import { Checkbox } from "@/components/ui/checkbox"; import { tableTypeApi } from "@/lib/api/screen"; @@ -32,20 +31,15 @@ export const V2HierarchyConfigPanel: React.FC = ({ config, onChange, }) => { - // 테이블 목록 const [tables, setTables] = useState([]); const [loadingTables, setLoadingTables] = useState(false); - - // 컬럼 목록 const [columns, setColumns] = useState([]); const [loadingColumns, setLoadingColumns] = useState(false); - // 설정 업데이트 핸들러 const updateConfig = (field: string, value: any) => { onChange({ ...config, [field]: value }); }; - // 테이블 목록 로드 useEffect(() => { const loadTables = async () => { setLoadingTables(true); @@ -64,14 +58,9 @@ export const V2HierarchyConfigPanel: React.FC = ({ loadTables(); }, []); - // 테이블 선택 시 컬럼 목록 로드 useEffect(() => { const loadColumns = async () => { - if (!config.tableName) { - setColumns([]); - return; - } - + if (!config.tableName) { setColumns([]); return; } setLoadingColumns(true); try { const data = await tableTypeApi.getColumns(config.tableName); @@ -89,265 +78,264 @@ export const V2HierarchyConfigPanel: React.FC = ({ }, [config.tableName]); return ( -
- {/* 계층 타입 */} -
- - -
- - - - {/* 뷰 모드 */} -
- - -
- - - - {/* 데이터 소스 */} -
- - -
- - {/* DB 설정 */} - {config.dataSource === "db" && ( -
- {/* 테이블 선택 */} -
- +
+ {/* HIERARCHY TYPE 섹션 */} +
+

HIERARCHY TYPE

+
+ 계층 타입 +
- - {/* 컬럼 선택 */} - {config.tableName && ( - <> -
-
- - -
-
- - -
-
-
- +
+
+ + {/* VIEW MODE 섹션 */} +
+

VIEW MODE

+
+ 표시 방식 +
+ +
+
+
+ + {/* DATA SOURCE 섹션 */} +
+

DATA SOURCE

+
+ 데이터 소스 +
+ +
+
+ + {/* DB 설정 */} + {config.dataSource === "db" && ( + <> +
+ 테이블 +
- - )} +
+ + {config.tableName && ( + <> +
+
+ + +
+
+ + +
+
+
+ 표시 컬럼 +
+ +
+
+ + )} + + )} + + {/* API 설정 */} + {config.dataSource === "api" && ( +
+ API 엔드포인트 +
+ updateConfig("apiEndpoint", e.target.value)} + placeholder="/api/hierarchy" + className="h-7 text-xs" + /> +
+
+ )} +
+ + {/* OPTIONS 섹션 */} +
+

OPTIONS

+
+ 최대 레벨 +
+ updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)} + placeholder="제한 없음" + min="1" + className="h-7 text-xs" + /> +
- )} - - {/* API 설정 */} - {config.dataSource === "api" && ( -
- - updateConfig("apiEndpoint", e.target.value)} - placeholder="/api/hierarchy" - className="h-8 text-xs" - /> -
- )} - - - - {/* 옵션 */} -
- - -
- - updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)} - placeholder="제한 없음" - min="1" - className="h-8 text-xs" - /> -
- -
+
+ 드래그 앤 드롭 updateConfig("draggable", checked)} /> -
- -
+
+ 선택 가능 updateConfig("selectable", checked)} /> -
- -
+
+ 다중 선택 updateConfig("multiSelect", checked)} /> -
- -
+
+ 체크박스 표시 updateConfig("showCheckbox", checked)} /> -
- -
+
+ 기본 전체 펼침 updateConfig("expandAll", checked)} /> -
- {/* BOM 전용 설정 */} + {/* BOM SETTINGS 섹션 - BOM 타입 전용 */} {config.hierarchyType === "bom" && ( - <> - -
- - -
- updateConfig("showQuantity", checked)} - /> - -
- -
- +
+

BOM SETTINGS

+
+ 수량 표시 + updateConfig("showQuantity", checked)} + /> +
+
+ 수량 컬럼 +
- +
)} - {/* 연쇄 선택박스 전용 설정 */} + {/* CASCADING SETTINGS 섹션 - 연쇄 선택박스 전용 */} {config.hierarchyType === "cascading" && ( - <> - -
- - -
- +
+

CASCADING SETTINGS

+
+ 부모 필드 +
- -
- updateConfig("clearOnParentChange", checked)} - /> - -
- +
+ 부모 변경 시 초기화 + updateConfig("clearOnParentChange", checked)} + /> +
+
)}
); diff --git a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx index e3f5f6cc..8ccd9d44 100644 --- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx +++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx @@ -11,7 +11,7 @@ import React, { useState, useEffect, useMemo, useCallback } from "react"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Separator } from "@/components/ui/separator"; +// Separator 제거 - 팔란티어 스타일 섹션 헤더 사용 import { Checkbox } from "@/components/ui/checkbox"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -759,7 +759,7 @@ export const V2RepeaterConfigPanel: React.FC = ({ }, [currentTableColumns, config.dataSource?.foreignKey]); return ( -
+
기본 @@ -768,10 +768,10 @@ export const V2RepeaterConfigPanel: React.FC = ({ {/* 기본 설정 탭 */} - + {/* 렌더링 모드 */} -
- +
+

RENDER MODE

- - {/* 저장 대상 테이블 */} -
- +
+

SAVE TABLE

{/* 현재 선택된 테이블 표시 (기존 테이블 UI와 동일한 스타일) */}
= ({ )}
- - {/* 현재 화면 정보 (메인 테이블이 설정된 경우에만 표시) */} {currentTableName && ( -
- +
+

MAIN TABLE

{currentTableName}

@@ -1035,9 +1031,8 @@ export const V2RepeaterConfigPanel: React.FC = ({ {/* 모달 모드: 엔티티 컬럼 선택 */} {isModalMode && ( <> - -

- +
+

ENTITY SELECT

모달에서 검색할 엔티티를 선택하세요 (FK만 저장됨)

@@ -1048,7 +1043,7 @@ export const V2RepeaterConfigPanel: React.FC = ({ onValueChange={handleEntityColumnSelect} disabled={!targetTableForColumns} > - + @@ -1090,11 +1085,14 @@ export const V2RepeaterConfigPanel: React.FC = ({ )} - - {/* 소스 디테일 자동 조회 설정 */} -
-
+
+

SOURCE DETAIL

+
+ + + 소스 디테일 자동 조회 + = ({ } }} /> -

모달에서 전달받은 마스터 데이터의 디테일 행을 자동으로 조회하여 리피터에 채웁니다. @@ -1217,74 +1211,65 @@ export const V2RepeaterConfigPanel: React.FC = ({ )}

- - {/* 기능 옵션 */} -
- -
-
- updateFeatures("showAddButton", !!checked)} - /> - -
- -
- updateFeatures("showDeleteButton", !!checked)} - /> - -
- -
- updateFeatures("inlineEdit", !!checked)} - /> - -
- -
- updateFeatures("multiSelect", !!checked)} - /> - -
- -
- updateFeatures("showRowNumber", !!checked)} - /> - -
- -
- updateFeatures("selectable", !!checked)} - /> - -
+
+

FEATURES

+
+ 추가 버튼 + updateFeatures("showAddButton", !!checked)} + /> +
+
+ 삭제 버튼 + updateFeatures("showDeleteButton", !!checked)} + /> +
+
+ 인라인 편집 + updateFeatures("inlineEdit", !!checked)} + /> +
+
+ 다중 선택 + updateFeatures("multiSelect", !!checked)} + /> +
+
+ 행 번호 + updateFeatures("showRowNumber", !!checked)} + /> +
+
+ 행 선택 + updateFeatures("selectable", !!checked)} + />
- {/* 컬럼 설정 탭 - 🆕 통합 컬럼 선택 */} - + {/* 컬럼 설정 탭 */} + {/* 통합 컬럼 선택 */} -
- +
+

COLUMN SELECT

{isModalMode ? "표시할 컬럼과 입력 컬럼을 선택하세요. 아이콘으로 표시/입력 구분" @@ -1365,15 +1350,14 @@ export const V2RepeaterConfigPanel: React.FC = ({ )}

- {/* 선택된 컬럼 상세 설정 - 🆕 모든 컬럼 통합, 순서 변경 가능 */} + {/* 선택된 컬럼 상세 설정 */} {config.columns.length > 0 && ( <> - -
- +
+

+ SELECTED COLUMNS ({config.columns.length}) + 드래그로 순서 변경 +

{config.columns.map((col, index) => (
@@ -1700,10 +1684,9 @@ export const V2RepeaterConfigPanel: React.FC = ({ {/* 계산 규칙 */} {(isModalMode || isInlineMode) && config.columns.length > 0 && ( <> - -
+
- +

CALCULATION RULES