From 1e1bc0b2c68c9131781ceb812f855aac39c08c44 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Fri, 21 Nov 2025 12:22:27 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=A0=80=EC=9E=A5=20=EB=B0=8F=20=EB=94=94?= =?UTF-8?q?=EC=A7=80=ED=84=B8=20=ED=8A=B8=EC=9C=88=20UX=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/yard-3d/DigitalTwinEditor.tsx | 116 +++++++++--------- .../widgets/yard-3d/DigitalTwinViewer.tsx | 21 ++-- .../widgets/yard-3d/HierarchyConfigPanel.tsx | 14 +-- .../dashboard/widgets/yard-3d/constants.ts | 30 +++++ 4 files changed, 103 insertions(+), 78 deletions(-) create mode 100644 frontend/components/admin/dashboard/widgets/yard-3d/constants.ts diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx index 88e844d3..ac9aac19 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx @@ -25,6 +25,7 @@ import { import type { MaterialData } from "@/types/digitalTwin"; import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection"; import HierarchyConfigPanel, { HierarchyConfig } from "./HierarchyConfigPanel"; +import { OBJECT_COLORS, DEFAULT_COLOR } from "./constants"; import { validateSpatialContainment, updateChildrenPositions, getAllDescendants } from "./spatialContainment"; // 백엔드 DB 객체 타입 (snake_case) @@ -702,7 +703,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi name: objectName, position: { x, y: yPosition, z }, size: defaults.size || { x: 5, y: 5, z: 5 }, - color: defaults.color || "#9ca3af", + color: OBJECT_COLORS[draggedTool] || DEFAULT_COLOR, // 타입별 기본 색상 areaKey, locaKey, locType, @@ -1169,8 +1170,8 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi 도구: {[ { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-blue-500" }, - { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-emerald-500" }, - { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-orange-500" }, + { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-blue-600" }, + { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-gray-500" }, // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-green-500" }, { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-yellow-500" }, { type: "rack" as ToolType, label: "랙", icon: Box, color: "text-purple-500" }, @@ -1221,54 +1222,6 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi - {/* 창고 테이블 및 컬럼 매핑 */} - {selectedDbConnection && ( -
- - - {/* 이 레이아웃의 창고 선택 */} - {hierarchyConfig?.warehouse?.tableName && hierarchyConfig?.warehouse?.keyColumn && ( -
- - {loadingWarehouses ? ( -
- -
- ) : ( - - )} -
- )} -
- )} - {/* 계층 설정 패널 (신규) */} {selectedDbConnection && ( )} + {/* 창고 선택 (HierarchyConfigPanel 아래로 이동) */} + {selectedDbConnection && hierarchyConfig?.warehouse?.tableName && hierarchyConfig?.warehouse?.keyColumn && ( +
+ + +
+ + {loadingWarehouses ? ( +
+ +
+ ) : ( + + )} +
+
+ )} + {/* Area 목록 */} {selectedDbConnection && selectedWarehouse && (
@@ -1605,7 +1605,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi handleObjectUpdate({ name: e.target.value })} className="mt-1.5 h-9 text-sm" /> @@ -1622,7 +1622,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi handleObjectUpdate({ position: { @@ -1641,7 +1641,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi handleObjectUpdate({ position: { @@ -1669,7 +1669,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi type="number" step="5" min="5" - value={selectedObject.size.x} + value={selectedObject.size?.x || 5} onChange={(e) => handleObjectUpdate({ size: { @@ -1688,7 +1688,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi handleObjectUpdate({ size: { @@ -1709,7 +1709,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi type="number" step="5" min="5" - value={selectedObject.size.z} + value={selectedObject.size?.z || 5} onChange={(e) => handleObjectUpdate({ size: { @@ -1732,7 +1732,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi handleObjectUpdate({ color: e.target.value })} className="mt-1.5 h-9" /> diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx index 3945a692..94ef98fb 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx @@ -10,6 +10,7 @@ import dynamic from "next/dynamic"; import { useToast } from "@/hooks/use-toast"; import type { PlacedObject, MaterialData } from "@/types/digitalTwin"; import { getLayoutById, getMaterials } from "@/lib/api/digitalTwin"; +import { OBJECT_COLORS, DEFAULT_COLOR } from "./constants"; const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), { ssr: false, @@ -81,7 +82,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) z: parseFloat(obj.size_z), }, rotation: obj.rotation ? parseFloat(obj.rotation) : 0, - color: getObjectColor(objectType), // 타입별 기본 색상 사용 + color: getObjectColor(objectType, obj.color), // 저장된 색상 우선, 없으면 타입별 기본 색상 areaKey: obj.area_key, locaKey: obj.loca_key, locType: obj.loc_type, @@ -225,17 +226,11 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) // 객체 타입별 기본 색상 (useMemo로 최적화) const getObjectColor = useMemo(() => { - return (type: string): string => { - const colorMap: Record = { - area: "#3b82f6", // 파란색 - "location-bed": "#2563eb", // 진한 파란색 - "location-stp": "#6b7280", // 회색 - "location-temp": "#f59e0b", // 주황색 - "location-dest": "#10b981", // 초록색 - "crane-mobile": "#8b5cf6", // 보라색 - rack: "#ef4444", // 빨간색 - }; - return colorMap[type] || "#3b82f6"; + return (type: string, savedColor?: string): string => { + // 저장된 색상이 있으면 우선 사용 + if (savedColor) return savedColor; + // 없으면 타입별 기본 색상 사용 + return OBJECT_COLORS[type] || DEFAULT_COLOR; }; }, []); @@ -383,7 +378,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
{typeLabel}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx index 8a6f4bfd..d309c92f 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx @@ -257,7 +257,7 @@ export default function HierarchyConfigPanel({
handleLevelChange(level.level, "name", e.target.value)} className="h-7 w-32 text-xs" placeholder="레벨명" @@ -276,7 +276,7 @@ export default function HierarchyConfigPanel({
handleLevelChange(level.level, "keyColumn", val)} > @@ -319,7 +319,7 @@ export default function HierarchyConfigPanel({
handleLevelChange(level.level, "parentKeyColumn", val)} > @@ -422,7 +422,7 @@ export default function HierarchyConfigPanel({
handleMaterialChange("locationKeyColumn", val)} > diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts b/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts new file mode 100644 index 00000000..d4959a6c --- /dev/null +++ b/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts @@ -0,0 +1,30 @@ +/** + * 디지털 트윈 3D 야드 - 공통 상수 + */ + +// 객체 타입별 색상 매핑 (HEX 코드) +export const OBJECT_COLORS: Record = { + area: "#3b82f6", // 파란색 + "location-bed": "#2563eb", // 진한 파란색 + "location-stp": "#6b7280", // 회색 + "location-temp": "#f59e0b", // 주황색 + "location-dest": "#10b981", // 초록색 + "crane-mobile": "#8b5cf6", // 보라색 + rack: "#ef4444", // 빨간색 +}; + +// Tailwind 색상 클래스 매핑 (아이콘용) +export const OBJECT_COLOR_CLASSES: Record = { + area: "text-blue-500", + "location-bed": "text-blue-600", + "location-stp": "text-gray-500", + "location-temp": "text-orange-500", + "location-dest": "text-emerald-500", + "crane-mobile": "text-purple-500", + rack: "text-red-500", +}; + +// 기본 색상 +export const DEFAULT_COLOR = "#3b82f6"; +export const DEFAULT_COLOR_CLASS = "text-blue-500"; + -- 2.43.0 From 6ccaa854133405a6f5493f7d54e9a20059b66be5 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Fri, 21 Nov 2025 14:29:17 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=EC=9A=B0=EC=B8=A1=ED=8C=A8=EB=84=90=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=BB=AC=EB=9F=BC=20=EC=9D=B8=ED=92=8B=20?= =?UTF-8?q?=EB=8B=A4=20=EC=A7=80=EC=9A=B0=EB=A9=B4=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=EA=B0=92=EC=9D=B4=20=EB=93=A4=EC=96=B4=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx index d309c92f..4def424c 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx @@ -526,7 +526,7 @@ export default function HierarchyConfigPanel({ {col} {isSelected && ( { const currentDisplay = localConfig.material?.displayColumns || []; const newDisplay = currentDisplay.map((d) => -- 2.43.0 From dd913d3ecfb595891727fd5d7e1ebaa8a15b0170 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Fri, 21 Nov 2025 15:44:52 +0900 Subject: [PATCH 3/9] =?UTF-8?q?3d=EC=97=90=EC=84=9C=20=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EB=B8=94=20=EA=B0=80=EC=A0=B8=EC=98=AC=20=EB=95=8C=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94,=20=EC=BB=AC=EB=9F=BC=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20=EA=B0=99=EC=9D=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend-node/src/database/MariaDBConnector.ts | 37 +++-- .../widgets/yard-3d/DigitalTwinEditor.tsx | 18 +-- .../widgets/yard-3d/HierarchyConfigPanel.tsx | 133 ++++++++++++++---- 3 files changed, 137 insertions(+), 51 deletions(-) diff --git a/backend-node/src/database/MariaDBConnector.ts b/backend-node/src/database/MariaDBConnector.ts index 3f469330..d104b9e3 100644 --- a/backend-node/src/database/MariaDBConnector.ts +++ b/backend-node/src/database/MariaDBConnector.ts @@ -1,7 +1,11 @@ -import { DatabaseConnector, ConnectionConfig, QueryResult } from '../interfaces/DatabaseConnector'; -import { ConnectionTestResult, TableInfo } from '../types/externalDbTypes'; +import { + DatabaseConnector, + ConnectionConfig, + QueryResult, +} from "../interfaces/DatabaseConnector"; +import { ConnectionTestResult, TableInfo } from "../types/externalDbTypes"; // @ts-ignore -import * as mysql from 'mysql2/promise'; +import * as mysql from "mysql2/promise"; export class MariaDBConnector implements DatabaseConnector { private connection: mysql.Connection | null = null; @@ -20,7 +24,7 @@ export class MariaDBConnector implements DatabaseConnector { password: this.config.password, database: this.config.database, connectTimeout: this.config.connectionTimeoutMillis, - ssl: typeof this.config.ssl === 'boolean' ? undefined : this.config.ssl, + ssl: typeof this.config.ssl === "boolean" ? undefined : this.config.ssl, }); } } @@ -36,7 +40,9 @@ export class MariaDBConnector implements DatabaseConnector { const startTime = Date.now(); try { await this.connect(); - const [rows] = await this.connection!.query("SELECT VERSION() as version"); + const [rows] = await this.connection!.query( + "SELECT VERSION() as version" + ); const version = (rows as any[])[0]?.version || "Unknown"; const responseTime = Date.now() - startTime; await this.disconnect(); @@ -111,21 +117,28 @@ export class MariaDBConnector implements DatabaseConnector { console.log(`[MariaDBConnector] getColumns 호출: tableName=${tableName}`); await this.connect(); console.log(`[MariaDBConnector] 연결 완료, 쿼리 실행 시작`); - - const [rows] = await this.connection!.query(` + + const [rows] = await this.connection!.query( + ` SELECT COLUMN_NAME as column_name, DATA_TYPE as data_type, IS_NULLABLE as is_nullable, - COLUMN_DEFAULT as column_default + COLUMN_DEFAULT as column_default, + COLUMN_COMMENT as description FROM information_schema.COLUMNS WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ? ORDER BY ORDINAL_POSITION; - `, [tableName]); - + `, + [tableName] + ); + console.log(`[MariaDBConnector] 쿼리 결과:`, rows); - console.log(`[MariaDBConnector] 결과 개수:`, Array.isArray(rows) ? rows.length : 'not array'); - + console.log( + `[MariaDBConnector] 결과 개수:`, + Array.isArray(rows) ? rows.length : "not array" + ); + await this.disconnect(); return rows as any[]; } catch (error: any) { diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx index ac9aac19..5443d150 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx @@ -95,7 +95,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi // 동적 계층 구조 설정 const [hierarchyConfig, setHierarchyConfig] = useState(null); - const [availableTables, setAvailableTables] = useState([]); + const [availableTables, setAvailableTables] = useState>([]); const [loadingTables, setLoadingTables] = useState(false); // 레거시: 테이블 매핑 (구 Area/Location 방식 호환용) @@ -210,9 +210,9 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi const { getTables } = await import("@/lib/api/digitalTwin"); const response = await getTables(selectedDbConnection); if (response.success && response.data) { - const tableNames = response.data.map((t) => t.table_name); - setAvailableTables(tableNames); - console.log("📋 테이블 목록:", tableNames); + // 테이블 정보 전체 저장 (이름 + 설명) + setAvailableTables(response.data); + console.log("📋 테이블 목록:", response.data); } } catch (error) { console.error("테이블 목록 조회 실패:", error); @@ -1266,10 +1266,12 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi try { const response = await ExternalDbConnectionAPI.getTableColumns(selectedDbConnection, tableName); if (response.success && response.data) { - // 객체 배열을 문자열 배열로 변환 - return response.data.map((col: any) => - typeof col === "string" ? col : col.column_name || col.COLUMN_NAME || String(col), - ); + // 컬럼 정보 객체 배열로 반환 (이름 + 설명) + return response.data.map((col: any) => ({ + column_name: typeof col === "string" ? col : col.column_name || col.COLUMN_NAME || String(col), + data_type: col.data_type || col.DATA_TYPE, + description: col.description || col.COLUMN_COMMENT || undefined, + })); } return []; } catch (error) { diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx index 4def424c..00473450 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx @@ -40,13 +40,24 @@ export interface HierarchyConfig { }; } +interface TableInfo { + table_name: string; + description?: string; +} + +interface ColumnInfo { + column_name: string; + data_type?: string; + description?: string; +} + interface HierarchyConfigPanelProps { externalDbConnectionId: number | null; hierarchyConfig: HierarchyConfig | null; onHierarchyConfigChange: (config: HierarchyConfig) => void; - availableTables: string[]; + availableTables: TableInfo[]; onLoadTables: () => Promise; - onLoadColumns: (tableName: string) => Promise; + onLoadColumns: (tableName: string) => Promise; } export default function HierarchyConfigPanel({ @@ -65,7 +76,7 @@ export default function HierarchyConfigPanel({ ); const [loadingColumns, setLoadingColumns] = useState(false); - const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: string[] }>({}); + const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: ColumnInfo[] }>({}); // 외부에서 변경된 경우 동기화 useEffect(() => { @@ -187,8 +198,13 @@ export default function HierarchyConfigPanel({ {availableTables.map((table) => ( - - {table} + +
+ {table.table_name} + {table.description && ( + {table.description} + )} +
))} @@ -209,8 +225,13 @@ export default function HierarchyConfigPanel({ {columnsCache[localConfig.warehouse.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -228,8 +249,13 @@ export default function HierarchyConfigPanel({ {columnsCache[localConfig.warehouse.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -287,8 +313,13 @@ export default function HierarchyConfigPanel({ {availableTables.map((table) => ( - - {table} + +
+ {table.table_name} + {table.description && ( + {table.description} + )} +
))} @@ -308,8 +339,13 @@ export default function HierarchyConfigPanel({ {columnsCache[level.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -327,8 +363,13 @@ export default function HierarchyConfigPanel({ {columnsCache[level.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -409,8 +450,13 @@ export default function HierarchyConfigPanel({ {availableTables.map((table) => ( - - {table} + +
+ {table.table_name} + {table.description && ( + {table.description} + )} +
))} @@ -430,8 +476,13 @@ export default function HierarchyConfigPanel({ {columnsCache[localConfig.material.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -449,8 +500,13 @@ export default function HierarchyConfigPanel({ {columnsCache[localConfig.material.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -469,8 +525,13 @@ export default function HierarchyConfigPanel({ 없음 {columnsCache[localConfig.material.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -489,8 +550,13 @@ export default function HierarchyConfigPanel({ 없음 {columnsCache[localConfig.material.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -507,30 +573,35 @@ export default function HierarchyConfigPanel({

{columnsCache[localConfig.material.tableName].map((col) => { - const displayItem = localConfig.material?.displayColumns?.find((d) => d.column === col); + const displayItem = localConfig.material?.displayColumns?.find((d) => d.column === col.column_name); const isSelected = !!displayItem; return ( -
+
{ const currentDisplay = localConfig.material?.displayColumns || []; const newDisplay = e.target.checked - ? [...currentDisplay, { column: col, label: col }] - : currentDisplay.filter((d) => d.column !== col); + ? [...currentDisplay, { column: col.column_name, label: col.column_name }] + : currentDisplay.filter((d) => d.column !== col.column_name); handleMaterialChange("displayColumns", newDisplay); }} className="h-3 w-3 shrink-0" /> - {col} +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
{isSelected && ( { const currentDisplay = localConfig.material?.displayColumns || []; const newDisplay = currentDisplay.map((d) => - d.column === col ? { ...d, label: e.target.value } : d, + d.column === col.column_name ? { ...d, label: e.target.value } : d, ); handleMaterialChange("displayColumns", newDisplay); }} -- 2.43.0 From 68e8e7b36bf38eb4e78732a625f31036c9059277 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Fri, 21 Nov 2025 16:13:50 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=EC=B4=88=EA=B8=B0=EC=97=90=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=99=80=EC=A7=80=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=98=84?= =?UTF-8?q?=EC=83=81=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/yard-3d/HierarchyConfigPanel.tsx | 54 ++++++++++++++++--- 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx index 00473450..31cca6f8 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx @@ -78,16 +78,43 @@ export default function HierarchyConfigPanel({ const [loadingColumns, setLoadingColumns] = useState(false); const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: ColumnInfo[] }>({}); - // 외부에서 변경된 경우 동기화 + // 외부에서 변경된 경우 동기화 및 컬럼 자동 로드 useEffect(() => { if (hierarchyConfig) { setLocalConfig(hierarchyConfig); + + // 저장된 설정이 있으면 해당 테이블들의 컬럼을 자동 로드 + const loadSavedColumns = async () => { + // 창고 테이블 컬럼 로드 + if (hierarchyConfig.warehouse?.tableName) { + await handleTableChange(hierarchyConfig.warehouse.tableName, "warehouse"); + } + + // 레벨 테이블 컬럼 로드 + if (hierarchyConfig.levels) { + for (const level of hierarchyConfig.levels) { + if (level.tableName) { + await handleTableChange(level.tableName, level.level); + } + } + } + + // 자재 테이블 컬럼 로드 + if (hierarchyConfig.material?.tableName) { + await handleTableChange(hierarchyConfig.material.tableName, "material"); + } + }; + + loadSavedColumns(); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [hierarchyConfig]); // 테이블 선택 시 컬럼 로드 const handleTableChange = async (tableName: string, type: "warehouse" | "material" | number) => { - if (columnsCache[tableName]) return; // 이미 로드된 경우 스킵 + if (columnsCache[tableName]) { + return; // 이미 로드된 경우 스킵 + } setLoadingColumns(true); try { @@ -209,6 +236,11 @@ export default function HierarchyConfigPanel({ ))} + {!localConfig.warehouse?.tableName && ( +

+ ℹ️ 창고 테이블을 선택하고 "설정 적용"을 눌러주세요 +

+ )}
{/* 창고 컬럼 매핑 */} @@ -387,8 +419,13 @@ export default function HierarchyConfigPanel({ {columnsCache[level.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} @@ -409,8 +446,13 @@ export default function HierarchyConfigPanel({ 없음 {columnsCache[level.tableName].map((col) => ( - - {col} + +
+ {col.column_name} + {col.description && ( + {col.description} + )} +
))} -- 2.43.0 From 7994b2a72adc451c82141b64bba0ed0966b62a29 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Mon, 24 Nov 2025 15:57:28 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=EA=B3=84=EC=B8=B5=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B7=B8=EB=A3=B9=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/yard-3d/DigitalTwinEditor.tsx | 45 +++++++++- .../widgets/yard-3d/Yard3DCanvas.tsx | 85 ++++++++++++++++--- 2 files changed, 114 insertions(+), 16 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx index 5443d150..4aa3db0f 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx @@ -657,13 +657,13 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi }; // 캔버스에 드롭 - const handleCanvasDrop = (x: number, z: number) => { + const handleCanvasDrop = async (x: number, z: number) => { if (!draggedTool) return; const defaults = getToolDefaults(draggedTool); // Area는 바닥(y=0.05)에, 다른 객체는 중앙 정렬 - const yPosition = draggedTool === "area" ? 0.05 : (defaults.size?.y || 1) / 2; + let yPosition = draggedTool === "area" ? 0.05 : (defaults.size?.y || 1) / 2; // 외부 DB 데이터에서 드래그한 경우 해당 정보 사용 let objectName = defaults.name || "새 객체"; @@ -697,12 +697,51 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi externalKey = draggedLocationData.LOCAKEY; } + // 기본 크기 설정 + let objectSize = defaults.size || { x: 5, y: 5, z: 5 }; + + // Location 배치 시 자재 개수에 따라 높이 자동 설정 + if ( + (draggedTool === "location-bed" || + draggedTool === "location-stp" || + draggedTool === "location-temp" || + draggedTool === "location-dest") && + locaKey && + selectedDbConnection && + hierarchyConfig?.material + ) { + try { + // 해당 Location의 자재 개수 조회 + const countsResponse = await getMaterialCounts(selectedDbConnection, hierarchyConfig.material.tableName, [ + locaKey, + ]); + + if (countsResponse.success && countsResponse.data && countsResponse.data.length > 0) { + const materialCount = countsResponse.data[0].count; + + // 자재 개수에 비례해서 높이(Y축) 설정 (최소 5, 최대 30) + // 자재 1개 = 높이 5, 자재 10개 = 높이 15, 자재 50개 = 높이 30 + const calculatedHeight = Math.min(30, Math.max(5, 5 + materialCount * 0.5)); + + objectSize = { + ...objectSize, + y: calculatedHeight, // Y축이 높이! + }; + + // 높이가 높아진 만큼 Y 위치도 올려서 바닥을 뚫지 않게 조정 + yPosition = calculatedHeight / 2; + } + } catch (error) { + console.error("자재 개수 조회 실패, 기본 높이 사용:", error); + } + } + const newObject: PlacedObject = { id: nextObjectId, type: draggedTool, name: objectName, position: { x, y: yPosition, z }, - size: defaults.size || { x: 5, y: 5, z: 5 }, + size: objectSize, color: OBJECT_COLORS[draggedTool] || DEFAULT_COLOR, // 타입별 기본 색상 areaKey, locaKey, diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx index 3de44b02..f0f406b7 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx @@ -442,20 +442,79 @@ function MaterialBox({ )} - {/* Area 이름 텍스트 */} + {/* Area 이름 텍스트 - 위쪽 (바닥) */} {placement.name && ( - - {placement.name} - + <> + + {placement.name} + + + {/* 4면에 텍스트 표시 */} + {/* 앞면 (+Z) */} + + {placement.name} + + + {/* 뒷면 (-Z) */} + + {placement.name} + + + {/* 왼쪽면 (-X) */} + + {placement.name} + + + {/* 오른쪽면 (+X) */} + + {placement.name} + + )} ); -- 2.43.0 From ace80be8e1e27d4feccb13bfd225f1d7a73918c8 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 25 Nov 2025 13:55:00 +0900 Subject: [PATCH 6/9] =?UTF-8?q?N-Level=20=EA=B3=84=EC=B8=B5=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B0=8F=20=EA=B3=B5=EA=B0=84=20=EC=A2=85=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PLAN.MD | 1 + PROJECT_STATUS_2025_11_20.md | 1 + .../digitalTwinTemplateController.ts | 163 ++++++++++ backend-node/src/database/MariaDBConnector.ts | 47 ++- .../src/database/PostgreSQLConnector.ts | 34 +- backend-node/src/routes/digitalTwinRoutes.ts | 20 +- .../services/DigitalTwinTemplateService.ts | 172 ++++++++++ .../admin/dashboard/CanvasElement.tsx | 18 ++ .../widgets/YardManagement3DWidget.tsx | 14 +- .../widgets/yard-3d/DigitalTwinEditor.tsx | 303 +++++++++++++++++- .../widgets/yard-3d/DigitalTwinViewer.tsx | 199 +++++++++--- .../yard-3d/HIERARCHY_MIGRATION_GUIDE.md | 1 + .../widgets/yard-3d/HierarchyConfigPanel.tsx | 216 ++++++++++--- .../widgets/yard-3d/spatialContainment.ts | 1 + frontend/lib/api/digitalTwin.ts | 72 +++++ 15 files changed, 1120 insertions(+), 142 deletions(-) create mode 100644 backend-node/src/controllers/digitalTwinTemplateController.ts create mode 100644 backend-node/src/services/DigitalTwinTemplateService.ts diff --git a/PLAN.MD b/PLAN.MD index 7c3b1007..787bef69 100644 --- a/PLAN.MD +++ b/PLAN.MD @@ -25,3 +25,4 @@ Digital Twin 에디터(`DigitalTwinEditor.tsx`)에서 발생한 런타임 에러 ## 진행 상태 - [진행중] 1단계 긴급 버그 수정 완료 후 사용자 피드백 대기 중 + diff --git a/PROJECT_STATUS_2025_11_20.md b/PROJECT_STATUS_2025_11_20.md index 570dd789..1fe76c86 100644 --- a/PROJECT_STATUS_2025_11_20.md +++ b/PROJECT_STATUS_2025_11_20.md @@ -55,3 +55,4 @@ - `backend-node/src/routes/digitalTwinRoutes.ts` - `db/migrations/042_refactor_digital_twin_hierarchy.sql` + diff --git a/backend-node/src/controllers/digitalTwinTemplateController.ts b/backend-node/src/controllers/digitalTwinTemplateController.ts new file mode 100644 index 00000000..882d8e62 --- /dev/null +++ b/backend-node/src/controllers/digitalTwinTemplateController.ts @@ -0,0 +1,163 @@ +import { Response } from "express"; +import { AuthenticatedRequest } from "../types/auth"; +import { + DigitalTwinTemplateService, + DigitalTwinLayoutTemplate, +} from "../services/DigitalTwinTemplateService"; + +export const listMappingTemplates = async ( + req: AuthenticatedRequest, + res: Response, +): Promise => { + try { + const companyCode = req.user?.companyCode; + if (!companyCode) { + return res.status(401).json({ + success: false, + message: "인증 정보가 없습니다.", + }); + } + + const externalDbConnectionId = req.query.externalDbConnectionId + ? Number(req.query.externalDbConnectionId) + : undefined; + const layoutType = + typeof req.query.layoutType === "string" + ? req.query.layoutType + : undefined; + + const result = await DigitalTwinTemplateService.listTemplates( + companyCode, + { + externalDbConnectionId, + layoutType, + }, + ); + + if (!result.success) { + return res.status(500).json({ + success: false, + message: result.message, + error: result.error, + }); + } + + return res.json({ + success: true, + data: result.data as DigitalTwinLayoutTemplate[], + }); + } catch (error: any) { + return res.status(500).json({ + success: false, + message: "매핑 템플릿 목록 조회 중 오류가 발생했습니다.", + error: error.message, + }); + } +}; + +export const getMappingTemplateById = async ( + req: AuthenticatedRequest, + res: Response, +): Promise => { + try { + const companyCode = req.user?.companyCode; + const { id } = req.params; + + if (!companyCode) { + return res.status(401).json({ + success: false, + message: "인증 정보가 없습니다.", + }); + } + + const result = await DigitalTwinTemplateService.getTemplateById( + companyCode, + id, + ); + + if (!result.success) { + return res.status(404).json({ + success: false, + message: result.message || "매핑 템플릿을 찾을 수 없습니다.", + error: result.error, + }); + } + + return res.json({ + success: true, + data: result.data, + }); + } catch (error: any) { + return res.status(500).json({ + success: false, + message: "매핑 템플릿 조회 중 오류가 발생했습니다.", + error: error.message, + }); + } +}; + +export const createMappingTemplate = async ( + req: AuthenticatedRequest, + res: Response, +): Promise => { + try { + const companyCode = req.user?.companyCode; + const userId = req.user?.userId; + + if (!companyCode || !userId) { + return res.status(401).json({ + success: false, + message: "인증 정보가 없습니다.", + }); + } + + const { + name, + description, + externalDbConnectionId, + layoutType, + config, + } = req.body; + + if (!name || !externalDbConnectionId || !config) { + return res.status(400).json({ + success: false, + message: "필수 필드가 누락되었습니다.", + }); + } + + const result = await DigitalTwinTemplateService.createTemplate( + companyCode, + userId, + { + name, + description, + externalDbConnectionId, + layoutType, + config, + }, + ); + + if (!result.success || !result.data) { + return res.status(500).json({ + success: false, + message: result.message || "매핑 템플릿 생성 중 오류가 발생했습니다.", + error: result.error, + }); + } + + return res.status(201).json({ + success: true, + data: result.data, + }); + } catch (error: any) { + return res.status(500).json({ + success: false, + message: "매핑 템플릿 생성 중 오류가 발생했습니다.", + error: error.message, + }); + } +}; + + + diff --git a/backend-node/src/database/MariaDBConnector.ts b/backend-node/src/database/MariaDBConnector.ts index d104b9e3..cde351dc 100644 --- a/backend-node/src/database/MariaDBConnector.ts +++ b/backend-node/src/database/MariaDBConnector.ts @@ -95,15 +95,13 @@ export class MariaDBConnector implements DatabaseConnector { ORDER BY TABLE_NAME; `); - const tables: TableInfo[] = []; - for (const row of rows as any[]) { - const columns = await this.getColumns(row.table_name); - tables.push({ - table_name: row.table_name, - description: row.description || null, - columns: columns, - }); - } + // 테이블 목록만 반환 (컬럼 정보는 getColumns에서 개별 조회) + const tables: TableInfo[] = (rows as any[]).map((row) => ({ + table_name: row.table_name, + description: row.description || null, + columns: [], + })); + await this.disconnect(); return tables; } catch (error: any) { @@ -121,14 +119,29 @@ export class MariaDBConnector implements DatabaseConnector { const [rows] = await this.connection!.query( ` SELECT - COLUMN_NAME as column_name, - DATA_TYPE as data_type, - IS_NULLABLE as is_nullable, - COLUMN_DEFAULT as column_default, - COLUMN_COMMENT as description - FROM information_schema.COLUMNS - WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ? - ORDER BY ORDINAL_POSITION; + c.COLUMN_NAME AS column_name, + c.DATA_TYPE AS data_type, + c.IS_NULLABLE AS is_nullable, + c.COLUMN_DEFAULT AS column_default, + c.COLUMN_COMMENT AS description, + CASE + WHEN tc.CONSTRAINT_TYPE = 'PRIMARY KEY' THEN 'YES' + ELSE 'NO' + END AS is_primary_key + FROM information_schema.COLUMNS c + LEFT JOIN information_schema.KEY_COLUMN_USAGE k + ON c.TABLE_SCHEMA = k.TABLE_SCHEMA + AND c.TABLE_NAME = k.TABLE_NAME + AND c.COLUMN_NAME = k.COLUMN_NAME + LEFT JOIN information_schema.TABLE_CONSTRAINTS tc + ON k.CONSTRAINT_SCHEMA = tc.CONSTRAINT_SCHEMA + AND k.CONSTRAINT_NAME = tc.CONSTRAINT_NAME + AND k.TABLE_SCHEMA = tc.TABLE_SCHEMA + AND k.TABLE_NAME = tc.TABLE_NAME + AND tc.CONSTRAINT_TYPE = 'PRIMARY KEY' + WHERE c.TABLE_SCHEMA = DATABASE() + AND c.TABLE_NAME = ? + ORDER BY c.ORDINAL_POSITION; `, [tableName] ); diff --git a/backend-node/src/database/PostgreSQLConnector.ts b/backend-node/src/database/PostgreSQLConnector.ts index 52f9ce19..2461cc53 100644 --- a/backend-node/src/database/PostgreSQLConnector.ts +++ b/backend-node/src/database/PostgreSQLConnector.ts @@ -210,15 +210,33 @@ export class PostgreSQLConnector implements DatabaseConnector { const result = await tempClient.query( ` SELECT - column_name, - data_type, - is_nullable, - column_default, - col_description(c.oid, a.attnum) as column_comment + isc.column_name, + isc.data_type, + isc.is_nullable, + isc.column_default, + col_description(c.oid, a.attnum) as column_comment, + CASE + WHEN tc.constraint_type = 'PRIMARY KEY' THEN 'YES' + ELSE 'NO' + END AS is_primary_key FROM information_schema.columns isc - LEFT JOIN pg_class c ON c.relname = isc.table_name - LEFT JOIN pg_attribute a ON a.attrelid = c.oid AND a.attname = isc.column_name - WHERE isc.table_schema = 'public' AND isc.table_name = $1 + LEFT JOIN pg_class c + ON c.relname = isc.table_name + AND c.relnamespace = (SELECT oid FROM pg_namespace WHERE nspname = isc.table_schema) + LEFT JOIN pg_attribute a + ON a.attrelid = c.oid + AND a.attname = isc.column_name + LEFT JOIN information_schema.key_column_usage k + ON k.table_name = isc.table_name + AND k.table_schema = isc.table_schema + AND k.column_name = isc.column_name + LEFT JOIN information_schema.table_constraints tc + ON tc.constraint_name = k.constraint_name + AND tc.table_schema = k.table_schema + AND tc.table_name = k.table_name + AND tc.constraint_type = 'PRIMARY KEY' + WHERE isc.table_schema = 'public' + AND isc.table_name = $1 ORDER BY isc.ordinal_position; `, [tableName] diff --git a/backend-node/src/routes/digitalTwinRoutes.ts b/backend-node/src/routes/digitalTwinRoutes.ts index 904096f7..467813f0 100644 --- a/backend-node/src/routes/digitalTwinRoutes.ts +++ b/backend-node/src/routes/digitalTwinRoutes.ts @@ -9,6 +9,11 @@ import { updateLayout, deleteLayout, } from "../controllers/digitalTwinLayoutController"; +import { + listMappingTemplates, + getMappingTemplateById, + createMappingTemplate, +} from "../controllers/digitalTwinTemplateController"; // 외부 DB 데이터 조회 import { @@ -27,11 +32,16 @@ const router = express.Router(); router.use(authenticateToken); // ========== 레이아웃 관리 API ========== -router.get("/layouts", getLayouts); // 레이아웃 목록 -router.get("/layouts/:id", getLayoutById); // 레이아웃 상세 -router.post("/layouts", createLayout); // 레이아웃 생성 -router.put("/layouts/:id", updateLayout); // 레이아웃 수정 -router.delete("/layouts/:id", deleteLayout); // 레이아웃 삭제 +router.get("/layouts", getLayouts); // 레이아웃 목록 +router.get("/layouts/:id", getLayoutById); // 레이아웃 상세 +router.post("/layouts", createLayout); // 레이아웃 생성 +router.put("/layouts/:id", updateLayout); // 레이아웃 수정 +router.delete("/layouts/:id", deleteLayout); // 레이아웃 삭제 + +// ========== 매핑 템플릿 API ========== +router.get("/mapping-templates", listMappingTemplates); +router.get("/mapping-templates/:id", getMappingTemplateById); +router.post("/mapping-templates", createMappingTemplate); // ========== 외부 DB 데이터 조회 API ========== diff --git a/backend-node/src/services/DigitalTwinTemplateService.ts b/backend-node/src/services/DigitalTwinTemplateService.ts new file mode 100644 index 00000000..d4818b3a --- /dev/null +++ b/backend-node/src/services/DigitalTwinTemplateService.ts @@ -0,0 +1,172 @@ +import { pool } from "../database/db"; +import logger from "../utils/logger"; + +export interface DigitalTwinLayoutTemplate { + id: string; + company_code: string; + name: string; + description?: string | null; + external_db_connection_id: number; + layout_type: string; + config: any; + created_by: string; + created_at: Date; + updated_by: string; + updated_at: Date; +} + +interface ServiceResponse { + success: boolean; + data?: T; + message?: string; + error?: string; +} + +export class DigitalTwinTemplateService { + static async listTemplates( + companyCode: string, + options: { externalDbConnectionId?: number; layoutType?: string } = {}, + ): Promise> { + try { + const params: any[] = [companyCode]; + let paramIndex = 2; + + let query = ` + SELECT * + FROM digital_twin_layout_template + WHERE company_code = $1 + `; + + if (options.layoutType) { + query += ` AND layout_type = $${paramIndex++}`; + params.push(options.layoutType); + } + + if (options.externalDbConnectionId) { + query += ` AND external_db_connection_id = $${paramIndex++}`; + params.push(options.externalDbConnectionId); + } + + query += ` + ORDER BY updated_at DESC, name ASC + `; + + const result = await pool.query(query, params); + + logger.info("디지털 트윈 매핑 템플릿 목록 조회", { + companyCode, + count: result.rowCount, + }); + + return { + success: true, + data: result.rows as DigitalTwinLayoutTemplate[], + }; + } catch (error: any) { + logger.error("디지털 트윈 매핑 템플릿 목록 조회 실패", error); + return { + success: false, + error: error.message, + message: "매핑 템플릿 목록 조회 중 오류가 발생했습니다.", + }; + } + } + + static async getTemplateById( + companyCode: string, + id: string, + ): Promise> { + try { + const query = ` + SELECT * + FROM digital_twin_layout_template + WHERE id = $1 AND company_code = $2 + `; + + const result = await pool.query(query, [id, companyCode]); + + if (result.rowCount === 0) { + return { + success: false, + message: "매핑 템플릿을 찾을 수 없습니다.", + }; + } + + return { + success: true, + data: result.rows[0] as DigitalTwinLayoutTemplate, + }; + } catch (error: any) { + logger.error("디지털 트윈 매핑 템플릿 조회 실패", error); + return { + success: false, + error: error.message, + message: "매핑 템플릿 조회 중 오류가 발생했습니다.", + }; + } + } + + static async createTemplate( + companyCode: string, + userId: string, + payload: { + name: string; + description?: string; + externalDbConnectionId: number; + layoutType?: string; + config: any; + }, + ): Promise> { + try { + const query = ` + INSERT INTO digital_twin_layout_template ( + company_code, + name, + description, + external_db_connection_id, + layout_type, + config, + created_by, + created_at, + updated_by, + updated_at + ) + VALUES ($1, $2, $3, $4, $5, $6, $7, NOW(), $7, NOW()) + RETURNING * + `; + + const values = [ + companyCode, + payload.name, + payload.description || null, + payload.externalDbConnectionId, + payload.layoutType || "yard-3d", + JSON.stringify(payload.config), + userId, + ]; + + const result = await pool.query(query, values); + + logger.info("디지털 트윈 매핑 템플릿 생성", { + companyCode, + templateId: result.rows[0].id, + externalDbConnectionId: payload.externalDbConnectionId, + }); + + return { + success: true, + data: result.rows[0] as DigitalTwinLayoutTemplate, + }; + } catch (error: any) { + logger.error("디지털 트윈 매핑 템플릿 생성 실패", error); + return { + success: false, + error: error.message, + message: "매핑 템플릿 생성 중 오류가 발생했습니다.", + }; + } + } +} + + + diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index 2bb85051..beb1e483 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/frontend/components/admin/dashboard/CanvasElement.tsx @@ -312,6 +312,24 @@ export function CanvasElement({ return; } + // 위젯 테두리(바깥쪽 영역)를 클릭한 경우에만 선택/드래그 허용 + // - 내용 영역을 클릭해도 대시보드 설정 사이드바가 튀어나오지 않도록 하기 위함 + const container = elementRef.current; + if (container) { + const rect = container.getBoundingClientRect(); + const BORDER_HIT_WIDTH = 8; // px, 테두리로 인식할 범위 + const isOnBorder = + e.clientX <= rect.left + BORDER_HIT_WIDTH || + e.clientX >= rect.right - BORDER_HIT_WIDTH || + e.clientY <= rect.top + BORDER_HIT_WIDTH || + e.clientY >= rect.bottom - BORDER_HIT_WIDTH; + + if (!isOnBorder) { + // 테두리가 아닌 내부 클릭은 선택/드래그 처리하지 않음 + return; + } + } + // 선택되지 않은 경우에만 선택 처리 if (!isSelected) { onSelect(element.id); diff --git a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx index 91f58650..815ef07c 100644 --- a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx +++ b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx @@ -145,11 +145,17 @@ export default function YardManagement3DWidget({ // 편집 모드: 편집 중인 경우 DigitalTwinEditor 표시 if (isEditMode && editingLayout) { return ( -
- e.stopPropagation()} + onClick={(e) => e.stopPropagation()} + > +
); diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx index a81e75dc..9a71c338 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx @@ -20,13 +20,24 @@ import { getMaterials, getHierarchyData, getChildrenData, + getMappingTemplates, + createMappingTemplate, type HierarchyData, + type DigitalTwinMappingTemplate, } from "@/lib/api/digitalTwin"; import type { MaterialData } from "@/types/digitalTwin"; import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection"; import HierarchyConfigPanel, { HierarchyConfig } from "./HierarchyConfigPanel"; import { OBJECT_COLORS, DEFAULT_COLOR } from "./constants"; import { validateSpatialContainment, updateChildrenPositions, getAllDescendants } from "./spatialContainment"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; // 백엔드 DB 객체 타입 (snake_case) interface DbObject { @@ -94,6 +105,14 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi const [loadingMaterials, setLoadingMaterials] = useState(false); const [showMaterialPanel, setShowMaterialPanel] = useState(false); + // 매핑 템플릿 + const [mappingTemplates, setMappingTemplates] = useState([]); + const [selectedTemplateId, setSelectedTemplateId] = useState(""); + const [loadingTemplates, setLoadingTemplates] = useState(false); + const [isSaveTemplateDialogOpen, setIsSaveTemplateDialogOpen] = useState(false); + const [newTemplateName, setNewTemplateName] = useState(""); + const [newTemplateDescription, setNewTemplateDescription] = useState(""); + // 동적 계층 구조 설정 const [hierarchyConfig, setHierarchyConfig] = useState(null); const [availableTables, setAvailableTables] = useState>([]); @@ -166,6 +185,36 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi })); }, [placedObjects, layoutId]); + // 외부 DB 또는 레이아웃 타입이 변경될 때 템플릿 목록 로드 + useEffect(() => { + const loadTemplates = async () => { + if (!selectedDbConnection) { + setMappingTemplates([]); + setSelectedTemplateId(""); + return; + } + + try { + setLoadingTemplates(true); + const response = await getMappingTemplates({ + externalDbConnectionId: selectedDbConnection, + layoutType: "yard-3d", + }); + if (response.success && response.data) { + setMappingTemplates(response.data); + } else { + setMappingTemplates([]); + } + } catch (error) { + console.error("매핑 템플릿 목록 조회 실패:", error); + } finally { + setLoadingTemplates(false); + } + }; + + loadTemplates(); + }, [selectedDbConnection]); + // 외부 DB 연결 목록 로드 useEffect(() => { const loadExternalDbConnections = async () => { @@ -208,12 +257,23 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi const loadTables = async () => { try { setLoadingTables(true); - const { getTables } = await import("@/lib/api/digitalTwin"); - const response = await getTables(selectedDbConnection); + // 외부 DB 메타데이터 API 사용 (테이블 + 설명) + const response = await ExternalDbConnectionAPI.getTables(selectedDbConnection); if (response.success && response.data) { - // 테이블 정보 전체 저장 (이름 + 설명) - setAvailableTables(response.data); - console.log("📋 테이블 목록:", response.data); + const rawTables = response.data as any[]; + const normalized = rawTables.map((t: any) => + typeof t === "string" + ? { table_name: t } + : { + table_name: t.table_name || t.TABLE_NAME || String(t), + description: t.description || t.table_description || undefined, + }, + ); + setAvailableTables(normalized); + console.log("📋 테이블 목록:", normalized); + } else { + setAvailableTables([]); + console.warn("테이블 목록 조회 실패:", response.message || response.error); } } catch (error) { console.error("테이블 목록 조회 실패:", error); @@ -976,6 +1036,110 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi } }; + // 매핑 템플릿 적용 + const handleApplyTemplate = (templateId: string) => { + if (!templateId) return; + const template = mappingTemplates.find((t) => t.id === templateId); + if (!template) { + toast({ + variant: "destructive", + title: "템플릿 적용 실패", + description: "선택한 템플릿을 찾을 수 없습니다.", + }); + return; + } + + const config = template.config as HierarchyConfig; + setHierarchyConfig(config); + + // 선택된 테이블 정보 동기화 + const newSelectedTables: any = { + warehouse: config.warehouse?.tableName || "", + area: "", + location: "", + material: "", + }; + + if (config.levels && config.levels.length > 0) { + // 레벨 1 = Area + if (config.levels[0]?.tableName) { + newSelectedTables.area = config.levels[0].tableName; + } + // 레벨 2 = Location + if (config.levels[1]?.tableName) { + newSelectedTables.location = config.levels[1].tableName; + } + } + + if (config.material?.tableName) { + newSelectedTables.material = config.material.tableName; + } + + setSelectedTables(newSelectedTables); + setSelectedWarehouse(config.warehouseKey || null); + setHasUnsavedChanges(true); + + toast({ + title: "템플릿 적용 완료", + description: `"${template.name}" 템플릿이 적용되었습니다.`, + }); + }; + + // 매핑 템플릿 저장 + const handleSaveTemplate = async () => { + if (!selectedDbConnection || !hierarchyConfig) { + toast({ + variant: "destructive", + title: "템플릿 저장 불가", + description: "외부 DB와 계층 설정을 먼저 완료해주세요.", + }); + return; + } + + if (!newTemplateName.trim()) { + toast({ + variant: "destructive", + title: "템플릿 이름 필요", + description: "템플릿 이름을 입력해주세요.", + }); + return; + } + + try { + const response = await createMappingTemplate({ + name: newTemplateName.trim(), + description: newTemplateDescription.trim() || undefined, + externalDbConnectionId: selectedDbConnection, + layoutType: "yard-3d", + config: hierarchyConfig, + }); + + if (response.success && response.data) { + setMappingTemplates((prev) => [response.data!, ...prev]); + setIsSaveTemplateDialogOpen(false); + setNewTemplateName(""); + setNewTemplateDescription(""); + toast({ + title: "템플릿 저장 완료", + description: `"${response.data.name}" 템플릿이 저장되었습니다.`, + }); + } else { + toast({ + variant: "destructive", + title: "템플릿 저장 실패", + description: response.error || "템플릿을 저장하지 못했습니다.", + }); + } + } catch (error) { + console.error("매핑 템플릿 저장 실패:", error); + toast({ + variant: "destructive", + title: "템플릿 저장 실패", + description: "템플릿을 저장하는 중 오류가 발생했습니다.", + }); + } + }; + // 객체 이동 const handleObjectMove = (objectId: number, newX: number, newZ: number, newY?: number) => { setPlacedObjects((prev) => { @@ -1288,7 +1452,8 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
- {/* 도구 팔레트 */} + {/* 도구 팔레트 (현재 숨김 처리 - 나중에 재사용 가능) */} + {/*
도구: {[ @@ -1314,6 +1479,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi ); })}
+ */} {/* 메인 영역 */}
@@ -1329,6 +1495,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi onValueChange={(value) => { setSelectedDbConnection(parseInt(value)); setSelectedWarehouse(null); + setSelectedTemplateId(""); setHasUnsavedChanges(true); }} > @@ -1343,6 +1510,65 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi ))} + + {/* 매핑 템플릿 선택/저장 */} + {selectedDbConnection && ( +
+
+ + +
+
+ + +
+
+ )}
{/* 계층 설정 패널 (신규) */} @@ -1387,13 +1613,20 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi }} onLoadColumns={async (tableName: string) => { try { - const response = await ExternalDbConnectionAPI.getTableColumns(selectedDbConnection, tableName); + const response = await ExternalDbConnectionAPI.getTableColumns( + selectedDbConnection, + tableName, + ); if (response.success && response.data) { - // 컬럼 정보 객체 배열로 반환 (이름 + 설명) + // 컬럼 정보 객체 배열로 반환 (이름 + 설명 + PK 플래그) return response.data.map((col: any) => ({ - column_name: typeof col === "string" ? col : col.column_name || col.COLUMN_NAME || String(col), + column_name: + typeof col === "string" + ? col + : col.column_name || col.COLUMN_NAME || String(col), data_type: col.data_type || col.DATA_TYPE, description: col.description || col.COLUMN_COMMENT || undefined, + is_primary_key: col.is_primary_key ?? col.IS_PRIMARY_KEY, })); } return []; @@ -1984,6 +2217,58 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi )}
+ {/* 매핑 템플릿 저장 다이얼로그 */} + + + + 매핑 템플릿 저장 + + 현재 창고/계층/자재 설정을 템플릿으로 저장하여 다른 레이아웃에서 재사용할 수 있습니다. + + +
+
+ + setNewTemplateName(e.target.value)} + placeholder="예: 동연 야드 표준 매핑" + className="h-8 text-xs sm:h-10 sm:text-sm" + /> +
+
+ + setNewTemplateDescription(e.target.value)} + placeholder="이 템플릿에 대한 설명을 입력하세요" + className="h-8 text-xs sm:h-10 sm:text-sm" + /> +
+
+ + + + + +
); } diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx index 94ef98fb..cc34fb19 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, useEffect, useMemo } from "react"; -import { Loader2, Search, Filter, X } from "lucide-react"; +import { Loader2, Search, X, Grid3x3, Package } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; @@ -11,6 +11,7 @@ import { useToast } from "@/hooks/use-toast"; import type { PlacedObject, MaterialData } from "@/types/digitalTwin"; import { getLayoutById, getMaterials } from "@/lib/api/digitalTwin"; import { OBJECT_COLORS, DEFAULT_COLOR } from "./constants"; +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), { ssr: false, @@ -94,6 +95,9 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) displayOrder: obj.display_order, locked: obj.locked, visible: obj.visible !== false, + hierarchyLevel: obj.hierarchy_level, + parentKey: obj.parent_key, + externalKey: obj.external_key, }; }); @@ -352,61 +356,154 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) {searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
) : ( -
- {filteredObjects.map((obj) => { - // 타입별 레이블 - let typeLabel = obj.type; - if (obj.type === "location-bed") typeLabel = "베드(BED)"; - else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)"; - else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)"; - else if (obj.type === "location-dest") typeLabel = "지정착지(DES)"; - else if (obj.type === "crane-mobile") typeLabel = "크레인"; - else if (obj.type === "area") typeLabel = "Area"; - else if (obj.type === "rack") typeLabel = "랙"; + (() => { + // Area 객체가 있는 경우 계층 트리 아코디언 적용 + const areaObjects = filteredObjects.filter((obj) => obj.type === "area"); + // Area가 없으면 기존 평면 리스트 유지 + if (areaObjects.length === 0) { return ( -
handleObjectClick(obj.id)} - className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${ - selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm" - }`} - > -
-
-

{obj.name}

-
- - {typeLabel} -
-
-
+
+ {filteredObjects.map((obj) => { + let typeLabel = obj.type; + if (obj.type === "location-bed") typeLabel = "베드(BED)"; + else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)"; + else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)"; + else if (obj.type === "location-dest") typeLabel = "지정착지(DES)"; + else if (obj.type === "crane-mobile") typeLabel = "크레인"; + else if (obj.type === "area") typeLabel = "Area"; + else if (obj.type === "rack") typeLabel = "랙"; - {/* 추가 정보 */} -
- {obj.areaKey && ( -

- Area: {obj.areaKey} -

- )} - {obj.locaKey && ( -

- Location: {obj.locaKey} -

- )} - {obj.materialCount !== undefined && obj.materialCount > 0 && ( -

- 자재: {obj.materialCount}개 -

- )} -
+ return ( +
handleObjectClick(obj.id)} + className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${ + selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm" + }`} + > +
+
+

{obj.name}

+
+ + {typeLabel} +
+
+
+
+ {obj.areaKey && ( +

+ Area: {obj.areaKey} +

+ )} + {obj.locaKey && ( +

+ Location: {obj.locaKey} +

+ )} + {obj.materialCount !== undefined && obj.materialCount > 0 && ( +

+ 자재: {obj.materialCount}개 +

+ )} +
+
+ ); + })}
); - })} -
+ } + + // Area가 있는 경우: Area → Location 계층 아코디언 + return ( + + {areaObjects.map((areaObj) => { + const childLocations = filteredObjects.filter( + (obj) => + obj.type !== "area" && + obj.areaKey === areaObj.areaKey && + (obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey), + ); + + return ( + + +
{ + e.stopPropagation(); + handleObjectClick(areaObj.id); + }} + > +
+ + {areaObj.name} +
+
+ ({childLocations.length}) + +
+
+ + + {childLocations.length === 0 ? ( +

Location이 없습니다

+ ) : ( +
+ {childLocations.map((locationObj) => ( +
handleObjectClick(locationObj.id)} + className={`cursor-pointer rounded-lg border p-2 transition-all ${ + selectedObject?.id === locationObj.id + ? "border-primary bg-primary/10" + : "hover:border-primary/50" + }`} + > +
+
+ + {locationObj.name} +
+ +
+

+ 위치: ({locationObj.position.x.toFixed(1)},{" "} + {locationObj.position.z.toFixed(1)}) +

+ {locationObj.locaKey && ( +

+ Location: {locationObj.locaKey} +

+ )} + {locationObj.materialCount !== undefined && locationObj.materialCount > 0 && ( +

+ 자재: {locationObj.materialCount}개 +

+ )} +
+ ))} +
+ )} + + + ); + })} + + ); + })() )}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md b/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md index 5a7e01fb..915722b4 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md @@ -408,3 +408,4 @@ const handleObjectMove = ( **작성일**: 2025-11-20 **작성자**: AI Assistant + diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx index 770a2bad..186ac63f 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx @@ -49,6 +49,8 @@ interface ColumnInfo { column_name: string; data_type?: string; description?: string; + // 백엔드에서 내려주는 Primary Key 플래그 ("YES"/"NO" 또는 boolean) + is_primary_key?: string | boolean; } interface HierarchyConfigPanelProps { @@ -78,6 +80,18 @@ export default function HierarchyConfigPanel({ const [loadingColumns, setLoadingColumns] = useState(false); const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: ColumnInfo[] }>({}); + // 동일한 column_name 이 여러 번 내려오는 경우(조인 중복 등) 제거 + const normalizeColumns = (columns: ColumnInfo[]): ColumnInfo[] => { + const map = new Map(); + for (const col of columns) { + const key = col.column_name; + if (!map.has(key)) { + map.set(key, col); + } + } + return Array.from(map.values()); + }; + // 외부에서 변경된 경우 동기화 및 컬럼 자동 로드 // 외부에서 변경된 경우 동기화 및 컬럼 자동 로드 useEffect(() => { @@ -111,7 +125,8 @@ export default function HierarchyConfigPanel({ if (!columnsCache[tableName]) { try { const columns = await onLoadColumns(tableName); - setColumnsCache((prev) => ({ ...prev, [tableName]: columns })); + const normalized = normalizeColumns(columns); + setColumnsCache((prev) => ({ ...prev, [tableName]: normalized })); } catch (error) { console.error(`컬럼 로드 실패 (${tableName}):`, error); } @@ -125,21 +140,83 @@ export default function HierarchyConfigPanel({ } }, [hierarchyConfig, externalDbConnectionId]); - // 테이블 선택 시 컬럼 로드 + // 지정된 컬럼이 Primary Key 인지 여부 + const isPrimaryKey = (col: ColumnInfo): boolean => { + if (col.is_primary_key === true) return true; + if (typeof col.is_primary_key === "string") { + const v = col.is_primary_key.toUpperCase(); + return v === "YES" || v === "Y" || v === "TRUE" || v === "PK"; + } + return false; + }; + + // 테이블 선택 시 컬럼 로드 + PK 기반 기본값 설정 const handleTableChange = async (tableName: string, type: "warehouse" | "material" | number) => { - if (columnsCache[tableName]) { - return; // 이미 로드된 경우 스킵 + let loadedColumns = columnsCache[tableName]; + + // 아직 캐시에 없으면 먼저 컬럼 조회 + if (!loadedColumns) { + setLoadingColumns(true); + try { + const fetched = await onLoadColumns(tableName); + loadedColumns = normalizeColumns(fetched); + setColumnsCache((prev) => ({ ...prev, [tableName]: loadedColumns! })); + } catch (error) { + console.error("컬럼 로드 실패:", error); + loadedColumns = []; + } finally { + setLoadingColumns(false); + } } - setLoadingColumns(true); - try { - const columns = await onLoadColumns(tableName); - setColumnsCache((prev) => ({ ...prev, [tableName]: columns })); - } catch (error) { - console.error("컬럼 로드 실패:", error); - } finally { - setLoadingColumns(false); - } + const columns = loadedColumns || []; + + // PK 기반으로 keyColumn 기본값 자동 설정 (이미 값이 있으면 건드리지 않음) + // PK 정보가 없으면 첫 번째 컬럼을 기본값으로 사용 + setLocalConfig((prev) => { + const next = { ...prev }; + const primaryColumns = columns.filter((col) => isPrimaryKey(col)); + const pkName = (primaryColumns[0] || columns[0])?.column_name; + + if (!pkName) { + return next; + } + + if (type === "warehouse") { + const wh = { + ...(next.warehouse || { tableName }), + tableName: next.warehouse?.tableName || tableName, + }; + if (!wh.keyColumn) { + wh.keyColumn = pkName; + } + next.warehouse = wh; + } else if (type === "material") { + const material = { + ...(next.material || { tableName }), + tableName: next.material?.tableName || tableName, + }; + if (!material.keyColumn) { + material.keyColumn = pkName; + } + next.material = material as NonNullable; + } else if (typeof type === "number") { + // 계층 레벨 + next.levels = next.levels.map((lvl) => { + if (lvl.level !== type) return lvl; + const updated: HierarchyLevel = { + ...lvl, + tableName: lvl.tableName || tableName, + }; + if (!updated.keyColumn) { + updated.keyColumn = pkName; + } + return updated; + }); + } + + return next; + }); }; // 창고 키 변경 (제거됨 - 상위 컴포넌트에서 처리) @@ -271,16 +348,22 @@ export default function HierarchyConfigPanel({ - {columnsCache[localConfig.warehouse.tableName].map((col) => ( - -
- {col.column_name} - {col.description && ( - {col.description} - )} -
- - ))} + {columnsCache[localConfig.warehouse.tableName].map((col) => { + const pk = isPrimaryKey(col); + return ( + +
+ + {col.column_name} + {pk && PK} + + {col.description && ( + {col.description} + )} +
+ + ); + })} @@ -310,6 +393,15 @@ export default function HierarchyConfigPanel({ )} + + {localConfig.warehouse?.tableName && + !columnsCache[localConfig.warehouse.tableName] && + loadingColumns && ( +
+ + 컬럼 정보를 불러오는 중입니다... +
+ )} @@ -385,16 +477,22 @@ export default function HierarchyConfigPanel({ - {columnsCache[level.tableName].map((col) => ( - -
- {col.column_name} - {col.description && ( - {col.description} - )} -
- - ))} + {columnsCache[level.tableName].map((col) => { + const pk = isPrimaryKey(col); + return ( + +
+ + {col.column_name} + {pk && PK} + + {col.description && ( + {col.description} + )} +
+ + ); + })} @@ -475,6 +573,13 @@ export default function HierarchyConfigPanel({ )} + + {level.tableName && !columnsCache[level.tableName] && loadingColumns && ( +
+ + 컬럼 정보를 불러오는 중입니다... +
+ )} ))} @@ -528,21 +633,27 @@ export default function HierarchyConfigPanel({ value={localConfig.material.keyColumn || ""} onValueChange={(val) => handleMaterialChange("keyColumn", val)} > - - - - - {columnsCache[localConfig.material.tableName].map((col) => ( - -
- {col.column_name} - {col.description && ( - {col.description} - )} -
- - ))} - + + + + + {columnsCache[localConfig.material.tableName].map((col) => { + const pk = isPrimaryKey(col); + return ( + +
+ + {col.column_name} + {pk && PK} + + {col.description && ( + {col.description} + )} +
+ + ); + })} + @@ -673,6 +784,15 @@ export default function HierarchyConfigPanel({ )} + + {localConfig.material?.tableName && + !columnsCache[localConfig.material.tableName] && + loadingColumns && ( +
+ + 컬럼 정보를 불러오는 중입니다... +
+ )} diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts b/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts index ebedb9f2..f2df7e70 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts +++ b/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts @@ -163,3 +163,4 @@ export function getAllDescendants( } + diff --git a/frontend/lib/api/digitalTwin.ts b/frontend/lib/api/digitalTwin.ts index c20525b4..7a67ff39 100644 --- a/frontend/lib/api/digitalTwin.ts +++ b/frontend/lib/api/digitalTwin.ts @@ -19,6 +19,21 @@ interface ApiResponse { error?: string; } +// 매핑 템플릿 타입 +export interface DigitalTwinMappingTemplate { + id: string; + company_code: string; + name: string; + description?: string; + external_db_connection_id: number; + layout_type: string; + config: any; + created_by: string; + created_at: string; + updated_by: string; + updated_at: string; +} + // ========== 레이아웃 관리 API ========== // 레이아웃 목록 조회 @@ -281,3 +296,60 @@ export const getChildrenData = async ( }; } }; + +// ========== 매핑 템플릿 API ========== + +// 템플릿 목록 조회 (회사 단위, 현재 사용자 기준) +export const getMappingTemplates = async (params?: { + externalDbConnectionId?: number; + layoutType?: string; +}): Promise> => { + try { + const response = await apiClient.get("/digital-twin/mapping-templates", { + params: { + externalDbConnectionId: params?.externalDbConnectionId, + layoutType: params?.layoutType, + }, + }); + return response.data; + } catch (error: any) { + return { + success: false, + error: error.response?.data?.message || error.message, + }; + } +}; + +// 템플릿 생성 +export const createMappingTemplate = async (data: { + name: string; + description?: string; + externalDbConnectionId: number; + layoutType?: string; + config: any; +}): Promise> => { + try { + const response = await apiClient.post("/digital-twin/mapping-templates", data); + return response.data; + } catch (error: any) { + return { + success: false, + error: error.response?.data?.message || error.message, + }; + } +}; + +// 템플릿 단건 조회 +export const getMappingTemplateById = async ( + id: string, +): Promise> => { + try { + const response = await apiClient.get(`/digital-twin/mapping-templates/${id}`); + return response.data; + } catch (error: any) { + return { + success: false, + error: error.response?.data?.message || error.message, + }; + } +}; -- 2.43.0 From 080188b419a534894e3985d3cbfbfab71a4d2a90 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 25 Nov 2025 14:57:48 +0900 Subject: [PATCH 7/9] =?UTF-8?q?=EC=99=B8=EB=B6=80=20DB=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20=EC=BF=BC=EB=A6=AC?= =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20=EB=B3=B4=EC=99=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/yard-3d/HierarchyConfigPanel.tsx | 33 ++++++++++++------- frontend/lib/api/externalDbConnection.ts | 5 +++ 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx index 186ac63f..0dffb0de 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx @@ -119,18 +119,29 @@ export default function HierarchyConfigPanel({ tablesToLoad.push(hierarchyConfig.material.tableName); } - // 중복 제거 후 로드 + // 중복 제거 후, 아직 캐시에 없는 테이블만 병렬로 로드 const uniqueTables = [...new Set(tablesToLoad)]; - for (const tableName of uniqueTables) { - if (!columnsCache[tableName]) { - try { - const columns = await onLoadColumns(tableName); - const normalized = normalizeColumns(columns); - setColumnsCache((prev) => ({ ...prev, [tableName]: normalized })); - } catch (error) { - console.error(`컬럼 로드 실패 (${tableName}):`, error); - } - } + const tablesToFetch = uniqueTables.filter((tableName) => !columnsCache[tableName]); + + if (tablesToFetch.length === 0) { + return; + } + + setLoadingColumns(true); + try { + await Promise.all( + tablesToFetch.map(async (tableName) => { + try { + const columns = await onLoadColumns(tableName); + const normalized = normalizeColumns(columns); + setColumnsCache((prev) => ({ ...prev, [tableName]: normalized })); + } catch (error) { + console.error(`컬럼 로드 실패 (${tableName}):`, error); + } + }), + ); + } finally { + setLoadingColumns(false); } }; diff --git a/frontend/lib/api/externalDbConnection.ts b/frontend/lib/api/externalDbConnection.ts index 034a60ef..6d211b3d 100644 --- a/frontend/lib/api/externalDbConnection.ts +++ b/frontend/lib/api/externalDbConnection.ts @@ -290,8 +290,13 @@ export class ExternalDbConnectionAPI { static async getTableColumns(connectionId: number, tableName: string): Promise> { try { console.log("컬럼 정보 API 요청:", `${this.BASE_PATH}/${connectionId}/tables/${tableName}/columns`); + // 컬럼 메타데이터 조회는 외부 DB 성능/네트워크 영향으로 오래 걸릴 수 있으므로 + // 기본 30초보다 넉넉한 타임아웃을 사용 const response = await apiClient.get>( `${this.BASE_PATH}/${connectionId}/tables/${tableName}/columns`, + { + timeout: 120000, // 120초 + }, ); console.log("컬럼 정보 API 응답:", response.data); return response.data; -- 2.43.0 From 60832e88ff2e762d633fba43ba0333e84ac65f86 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 25 Nov 2025 15:01:47 +0900 Subject: [PATCH 8/9] =?UTF-8?q?3d=ED=95=84=EB=93=9C=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/dashboard/widgets/YardManagement3DWidget.tsx | 2 +- .../dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx index 815ef07c..8bfcadb4 100644 --- a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx +++ b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx @@ -173,7 +173,7 @@ export default function YardManagement3DWidget({

diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx index 6fcaca8e..d554dac3 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx @@ -68,15 +68,15 @@ export default function YardLayoutCreateModal({ isOpen, onClose, onCreate }: Yar e.stopPropagation()}>
- 새 야드 생성 - 야드 이름을 입력하세요 + 새로운 3d필드 생성 + 필드 이름을 입력하세요
-- 2.43.0 From f59218aa4365f4518d3ff8ba8b411a3bbfd86b31 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 25 Nov 2025 15:06:55 +0900 Subject: [PATCH 9/9] =?UTF-8?q?3d=ED=95=84=EB=93=9C=EB=A1=9C=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend-node/src/app.ts | 4 +- .../admin/dashboard/CanvasElement.tsx | 4 +- .../admin/dashboard/DashboardDesigner.tsx | 2 +- .../admin/dashboard/DashboardTopMenu.tsx | 2 +- .../admin/dashboard/WidgetConfigSidebar.tsx | 4 +- frontend/components/admin/dashboard/types.ts | 6 +- .../widgets/YardManagement3DWidget.tsx | 63 +++++++++---------- .../widgets/yard-3d/YardLayoutCreateModal.tsx | 2 +- .../admin/dashboard/widgets/yard-3d/types.ts | 2 +- 9 files changed, 43 insertions(+), 46 deletions(-) diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts index be51e70e..fc69cdb1 100644 --- a/backend-node/src/app.ts +++ b/backend-node/src/app.ts @@ -57,7 +57,7 @@ import riskAlertRoutes from "./routes/riskAlertRoutes"; // 리스크/알림 관 import todoRoutes from "./routes/todoRoutes"; // To-Do 관리 import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리 import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리 -import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 야드 관리 3D +import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 3D 필드 //import materialRoutes from "./routes/materialRoutes"; // 자재 관리 import digitalTwinRoutes from "./routes/digitalTwinRoutes"; // 디지털 트윈 (야드 관제) import flowRoutes from "./routes/flowRoutes"; // 플로우 관리 @@ -222,7 +222,7 @@ app.use("/api/risk-alerts", riskAlertRoutes); // 리스크/알림 관리 app.use("/api/todos", todoRoutes); // To-Do 관리 app.use("/api/bookings", bookingRoutes); // 예약 요청 관리 app.use("/api/map-data", mapDataRoutes); // 지도 데이터 조회 -app.use("/api/yard-layouts", yardLayoutRoutes); // 야드 관리 3D +app.use("/api/yard-layouts", yardLayoutRoutes); // 3D 필드 // app.use("/api/materials", materialRoutes); // 자재 관리 (임시 주석) app.use("/api/digital-twin", digitalTwinRoutes); // 디지털 트윈 (야드 관제) app.use("/api/flow-external-db", flowExternalDbConnectionRoutes); // 플로우 전용 외부 DB 연결 diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index beb1e483..090985ba 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/frontend/components/admin/dashboard/CanvasElement.tsx @@ -193,7 +193,7 @@ import { ListWidget } from "./widgets/ListWidget"; import { X } from "lucide-react"; import { Button } from "@/components/ui/button"; -// 야드 관리 3D 위젯 +// 3D 필드 위젯 const YardManagement3DWidget = dynamic(() => import("./widgets/YardManagement3DWidget"), { ssr: false, loading: () => ( @@ -1085,7 +1085,7 @@ export function CanvasElement({
) : element.type === "widget" && element.subtype === "yard-management-3d" ? ( - // 야드 관리 3D 위젯 렌더링 + // 3D 필드 위젯 렌더링
리스트 통계 카드 리스크/알림 - 야드 관리 3D + 3D 필드 {/* 커스텀 통계 카드 */} {/* 커스텀 상태 카드 */} diff --git a/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx b/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx index db608645..10af48e8 100644 --- a/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx +++ b/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx @@ -93,7 +93,7 @@ const getWidgetTitle = (subtype: ElementSubtype): string => { chart: "차트", "map-summary-v2": "지도", "risk-alert-v2": "리스크 알림", - "yard-management-3d": "야드 관리 3D", + "yard-management-3d": "3D 필드", weather: "날씨 위젯", exchange: "환율 위젯", calculator: "계산기", @@ -449,7 +449,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
- {/* 레이아웃 선택 (야드 관리 3D 위젯 전용) */} + {/* 레이아웃 선택 (3D 필드 위젯 전용) */} {element.subtype === "yard-management-3d" && (
); } @@ -164,30 +162,31 @@ export default function YardManagement3DWidget({ // 편집 모드: 레이아웃 선택 UI if (isEditMode) { return ( -
+
-

야드 레이아웃 선택

-

- {config?.layoutName ? `선택됨: ${config.layoutName}` : "표시할 야드 레이아웃을 선택하세요"} +

3D 필드 선택

+

+ {config?.layoutName ? `선택됨: ${config.layoutName}` : "표시할 3D필드를 선택하세요"}

{isLoading ? (
-
로딩 중...
+
로딩 중...
) : layouts.length === 0 ? (
🏗️
-
생성된 야드 레이아웃이 없습니다
-
먼저 야드 레이아웃을 생성하세요
+
생성된 3D필드가 없습니다
+
먼저 3D필드가 생성하세요
) : ( @@ -202,11 +201,11 @@ export default function YardManagement3DWidget({