From 01e47a1830e2bf03db473bf04784f8c0883bbf0a Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 23 Dec 2025 10:49:28 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../screen/panels/ComponentsPanel.tsx | 32 ++------ .../screen/panels/UnifiedPropertiesPanel.tsx | 8 +- .../unified/ConditionalConfigPanel.tsx | 9 ++- frontend/components/unified/UnifiedSelect.tsx | 10 +-- .../UnifiedSelectConfigPanel.tsx | 74 ++++--------------- 5 files changed, 39 insertions(+), 94 deletions(-) diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx index 1544e096..104c2721 100644 --- a/frontend/components/screen/panels/ComponentsPanel.tsx +++ b/frontend/components/screen/panels/ComponentsPanel.tsx @@ -53,31 +53,13 @@ export function ComponentsPanel({ }, []); // Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템) + // 입력 컴포넌트(unified-input, unified-select, unified-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김 const unifiedComponents: ComponentDefinition[] = useMemo(() => [ - { - id: "unified-input", - name: "통합 입력", - description: "텍스트, 숫자, 비밀번호, 슬라이더, 컬러 등 다양한 입력 타입 지원", - category: "input" as ComponentCategory, - tags: ["input", "text", "number", "unified"], - defaultSize: { width: 200, height: 40 }, - }, - { - id: "unified-select", - name: "통합 선택", - description: "드롭다운, 라디오, 체크박스, 태그, 토글 등 다양한 선택 타입 지원", - category: "input" as ComponentCategory, - tags: ["select", "dropdown", "radio", "checkbox", "unified"], - defaultSize: { width: 200, height: 40 }, - }, - { - id: "unified-date", - name: "통합 날짜", - description: "날짜, 시간, 날짜시간, 날짜 범위 등 다양한 날짜 타입 지원", - category: "input" as ComponentCategory, - tags: ["date", "time", "datetime", "unified"], - defaultSize: { width: 200, height: 40 }, - }, + // unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리 + // unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리 + // unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리 + // unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리 + // unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리 { id: "unified-list", name: "통합 목록", @@ -86,8 +68,6 @@ export function ComponentsPanel({ tags: ["table", "list", "card", "kanban", "unified"], defaultSize: { width: 600, height: 400 }, }, - // unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리 - // unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리 { id: "unified-media", name: "통합 미디어", diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx index 35be3808..82c1db6c 100644 --- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx +++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx @@ -351,13 +351,19 @@ export const UnifiedPropertiesPanel: React.FC = ({ "unified-hierarchy": "통합 계층", }; + // 컬럼의 inputType 가져오기 (entity 타입인지 확인용) + const inputType = currentConfig.inputType || currentConfig.webType || (selectedComponent as any).inputType; + + // unified-select의 경우 inputType 전달 + const extraProps = componentId === "unified-select" ? { inputType } : {}; + return (

{unifiedNames[componentId] || componentId} 설정

- +
); } diff --git a/frontend/components/unified/ConditionalConfigPanel.tsx b/frontend/components/unified/ConditionalConfigPanel.tsx index 314c2ac8..ca60dd7f 100644 --- a/frontend/components/unified/ConditionalConfigPanel.tsx +++ b/frontend/components/unified/ConditionalConfigPanel.tsx @@ -141,12 +141,13 @@ export function ConditionalConfigPanel({ setLoadingOptions(true); try { const { apiClient } = await import("@/lib/api/client"); - const response = await apiClient.get(`/common-codes/${selectedField.codeGroup}/items`); + // 올바른 API 경로: /common-codes/categories/:categoryCode/options + const response = await apiClient.get(`/common-codes/categories/${selectedField.codeGroup}/options`); if (response.data.success && response.data.data) { setDynamicOptions( - response.data.data.map((item: { code: string; codeName: string }) => ({ - value: item.code, - label: item.codeName, + response.data.data.map((item: { value: string; label: string }) => ({ + value: item.value, + label: item.label, })) ); } diff --git a/frontend/components/unified/UnifiedSelect.tsx b/frontend/components/unified/UnifiedSelect.tsx index 5efe619d..04c546a7 100644 --- a/frontend/components/unified/UnifiedSelect.tsx +++ b/frontend/components/unified/UnifiedSelect.tsx @@ -547,13 +547,13 @@ export const UnifiedSelect = forwardRef( })); } } else { - // 일반 공통코드에서 로드 - const response = await apiClient.get(`/common-codes/${codeGroup}/items`); + // 일반 공통코드에서 로드 (올바른 API 경로: /common-codes/categories/:categoryCode/options) + const response = await apiClient.get(`/common-codes/categories/${codeGroup}/options`); const data = response.data; if (data.success && data.data) { - fetchedOptions = data.data.map((item: { code: string; codeName: string }) => ({ - value: item.code, - label: item.codeName, + fetchedOptions = data.data.map((item: { value: string; label: string }) => ({ + value: item.value, + label: item.label, })); } } diff --git a/frontend/components/unified/config-panels/UnifiedSelectConfigPanel.tsx b/frontend/components/unified/config-panels/UnifiedSelectConfigPanel.tsx index 000f4171..da2fbbaa 100644 --- a/frontend/components/unified/config-panels/UnifiedSelectConfigPanel.tsx +++ b/frontend/components/unified/config-panels/UnifiedSelectConfigPanel.tsx @@ -23,12 +23,17 @@ interface ColumnOption { interface UnifiedSelectConfigPanelProps { config: Record; onChange: (config: Record) => void; + /** 컬럼의 inputType (entity 타입인 경우에만 엔티티 소스 표시) */ + inputType?: string; } export const UnifiedSelectConfigPanel: React.FC = ({ config, onChange, + inputType, }) => { + // 엔티티 타입인지 확인 + const isEntityType = inputType === "entity"; // 엔티티 테이블의 컬럼 목록 const [entityColumns, setEntityColumns] = useState([]); const [loadingColumns, setLoadingColumns] = useState(false); @@ -135,9 +140,8 @@ export const UnifiedSelectConfigPanel: React.FC = 정적 옵션 공통 코드 - 데이터베이스 - API - 엔티티 + {/* 엔티티 타입일 때만 엔티티 옵션 표시 */} + {isEntityType && 엔티티} @@ -193,66 +197,20 @@ export const UnifiedSelectConfigPanel: React.FC = )} - {/* 공통 코드 설정 */} + {/* 공통 코드 설정 - 테이블 타입 관리에서 설정되므로 정보만 표시 */} {config.source === "code" && ( -
+
- updateConfig("codeGroup", e.target.value)} - placeholder="공통 코드 그룹명" - className="h-8 text-xs" - /> + {config.codeGroup ? ( +

{config.codeGroup}

+ ) : ( +

+ 테이블 타입 관리에서 코드 그룹을 설정해주세요 +

+ )}
)} - {/* DB 설정 */} - {config.source === "db" && ( -
-
- - updateConfig("table", e.target.value)} - placeholder="테이블명" - className="h-8 text-xs" - /> -
-
-
- - updateConfig("valueColumn", e.target.value)} - placeholder="id" - className="h-8 text-xs" - /> -
-
- - updateConfig("labelColumn", e.target.value)} - placeholder="name" - className="h-8 text-xs" - /> -
-
-
- )} - - {/* API 설정 */} - {config.source === "api" && ( -
- - updateConfig("apiEndpoint", e.target.value)} - placeholder="/api/options" - className="h-8 text-xs" - /> -
- )} {/* 엔티티(참조 테이블) 설정 */} {config.source === "entity" && (