feat: Digital Twin Editor 테이블 매핑 UI 및 백엔드 API 구현
This commit is contained in:
dohyeons
@@ -1,16 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Search } from "lucide-react";
|
||||
import { Loader2, Search, Filter, X } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import type { PlacedObject, MaterialData } from "@/types/digitalTwin";
|
||||
import { getLayoutById, getMaterials } from "@/lib/api/digitalTwin";
|
||||
|
||||
const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="flex h-full items-center justify-center bg-muted">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
<div className="bg-muted flex h-full items-center justify-center">
|
||||
<Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
|
||||
</div>
|
||||
),
|
||||
});
|
||||
@@ -19,292 +24,478 @@ interface DigitalTwinViewerProps {
|
||||
layoutId: number;
|
||||
}
|
||||
|
||||
// 임시 타입 정의
|
||||
interface Material {
|
||||
id: number;
|
||||
plate_no: string; // 후판번호
|
||||
steel_grade: string; // 강종
|
||||
thickness: number; // 두께
|
||||
width: number; // 폭
|
||||
length: number; // 길이
|
||||
weight: number; // 중량
|
||||
location: string; // 위치
|
||||
status: string; // 상태
|
||||
arrival_date: string; // 입고일자
|
||||
}
|
||||
|
||||
export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedYard, setSelectedYard] = useState<string>("all");
|
||||
const [selectedStatus, setSelectedStatus] = useState<string>("all");
|
||||
const [dateRange, setDateRange] = useState({ from: "", to: "" });
|
||||
const [selectedMaterial, setSelectedMaterial] = useState<Material | null>(null);
|
||||
const [materials, setMaterials] = useState<Material[]>([]);
|
||||
const { toast } = useToast();
|
||||
const [placedObjects, setPlacedObjects] = useState<PlacedObject[]>([]);
|
||||
const [selectedObject, setSelectedObject] = useState<PlacedObject | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [materials, setMaterials] = useState<MaterialData[]>([]);
|
||||
const [loadingMaterials, setLoadingMaterials] = useState(false);
|
||||
const [showInfoPanel, setShowInfoPanel] = useState(false);
|
||||
const [externalDbConnectionId, setExternalDbConnectionId] = useState<number | null>(null);
|
||||
const [layoutName, setLayoutName] = useState<string>("");
|
||||
|
||||
// 검색 및 필터
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filterType, setFilterType] = useState<string>("all");
|
||||
|
||||
// 레이아웃 데이터 로드
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const loadLayout = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
// TODO: 실제 API 호출
|
||||
// const response = await digitalTwinApi.getLayoutData(layoutId);
|
||||
|
||||
// 임시 데이터
|
||||
setMaterials([
|
||||
{
|
||||
id: 1,
|
||||
plate_no: "P-2024-001",
|
||||
steel_grade: "SM490A",
|
||||
thickness: 25,
|
||||
width: 2000,
|
||||
length: 6000,
|
||||
weight: 2355,
|
||||
location: "A동-101",
|
||||
status: "입고",
|
||||
arrival_date: "2024-11-15",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
plate_no: "P-2024-002",
|
||||
steel_grade: "SS400",
|
||||
thickness: 30,
|
||||
width: 2500,
|
||||
length: 8000,
|
||||
weight: 4710,
|
||||
location: "B동-205",
|
||||
status: "가공중",
|
||||
arrival_date: "2024-11-16",
|
||||
},
|
||||
]);
|
||||
const response = await getLayoutById(layoutId);
|
||||
|
||||
if (response.success && response.data) {
|
||||
const { layout, objects } = response.data;
|
||||
|
||||
// 레이아웃 정보 저장
|
||||
setLayoutName(layout.layoutName);
|
||||
setExternalDbConnectionId(layout.externalDbConnectionId);
|
||||
|
||||
// 객체 데이터 변환
|
||||
const loadedObjects: PlacedObject[] = objects.map((obj: any) => ({
|
||||
id: obj.id,
|
||||
type: obj.object_type,
|
||||
name: obj.object_name,
|
||||
position: {
|
||||
x: parseFloat(obj.position_x),
|
||||
y: parseFloat(obj.position_y),
|
||||
z: parseFloat(obj.position_z),
|
||||
},
|
||||
size: {
|
||||
x: parseFloat(obj.size_x),
|
||||
y: parseFloat(obj.size_y),
|
||||
z: parseFloat(obj.size_z),
|
||||
},
|
||||
rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
|
||||
color: obj.color,
|
||||
areaKey: obj.area_key,
|
||||
locaKey: obj.loca_key,
|
||||
locType: obj.loc_type,
|
||||
materialCount: obj.material_count,
|
||||
materialPreview: obj.material_preview_height
|
||||
? { height: parseFloat(obj.material_preview_height) }
|
||||
: undefined,
|
||||
parentId: obj.parent_id,
|
||||
displayOrder: obj.display_order,
|
||||
locked: obj.locked,
|
||||
visible: obj.visible !== false,
|
||||
}));
|
||||
|
||||
setPlacedObjects(loadedObjects);
|
||||
} else {
|
||||
throw new Error(response.error || "레이아웃 조회 실패");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("디지털 트윈 데이터 로드 실패:", error);
|
||||
console.error("레이아웃 로드 실패:", error);
|
||||
const errorMessage = error instanceof Error ? error.message : "레이아웃을 불러오는데 실패했습니다.";
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "오류",
|
||||
description: errorMessage,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [layoutId]);
|
||||
loadLayout();
|
||||
}, [layoutId, toast]);
|
||||
|
||||
// 필터링된 자재 목록
|
||||
const filteredMaterials = useMemo(() => {
|
||||
return materials.filter((material) => {
|
||||
// 검색어 필터
|
||||
if (searchTerm) {
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const matchSearch =
|
||||
material.plate_no.toLowerCase().includes(searchLower) ||
|
||||
material.steel_grade.toLowerCase().includes(searchLower) ||
|
||||
material.location.toLowerCase().includes(searchLower);
|
||||
if (!matchSearch) return false;
|
||||
// Location의 자재 목록 로드
|
||||
const loadMaterialsForLocation = async (locaKey: string, externalDbConnectionId: number) => {
|
||||
try {
|
||||
setLoadingMaterials(true);
|
||||
setShowInfoPanel(true);
|
||||
const response = await getMaterials(externalDbConnectionId, locaKey);
|
||||
if (response.success && response.data) {
|
||||
const sortedMaterials = response.data.sort((a, b) => a.LOLAYER - b.LOLAYER);
|
||||
setMaterials(sortedMaterials);
|
||||
} else {
|
||||
setMaterials([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("자재 로드 실패:", error);
|
||||
setMaterials([]);
|
||||
} finally {
|
||||
setLoadingMaterials(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 야드 필터
|
||||
if (selectedYard !== "all" && !material.location.startsWith(selectedYard)) {
|
||||
// 객체 클릭
|
||||
const handleObjectClick = (objectId: number | null) => {
|
||||
if (objectId === null) {
|
||||
setSelectedObject(null);
|
||||
setShowInfoPanel(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const obj = placedObjects.find((o) => o.id === objectId);
|
||||
setSelectedObject(obj || null);
|
||||
|
||||
// Location을 클릭한 경우, 자재 정보 표시
|
||||
if (
|
||||
obj &&
|
||||
(obj.type === "location-bed" ||
|
||||
obj.type === "location-stp" ||
|
||||
obj.type === "location-temp" ||
|
||||
obj.type === "location-dest") &&
|
||||
obj.locaKey &&
|
||||
externalDbConnectionId
|
||||
) {
|
||||
setShowInfoPanel(true);
|
||||
loadMaterialsForLocation(obj.locaKey, externalDbConnectionId);
|
||||
} else {
|
||||
setShowInfoPanel(true);
|
||||
setMaterials([]);
|
||||
}
|
||||
};
|
||||
|
||||
// 타입별 개수 계산 (useMemo로 최적화)
|
||||
const typeCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {
|
||||
all: placedObjects.length,
|
||||
area: 0,
|
||||
"location-bed": 0,
|
||||
"location-stp": 0,
|
||||
"location-temp": 0,
|
||||
"location-dest": 0,
|
||||
"crane-mobile": 0,
|
||||
rack: 0,
|
||||
};
|
||||
|
||||
placedObjects.forEach((obj) => {
|
||||
if (counts[obj.type] !== undefined) {
|
||||
counts[obj.type]++;
|
||||
}
|
||||
});
|
||||
|
||||
return counts;
|
||||
}, [placedObjects]);
|
||||
|
||||
// 필터링된 객체 목록 (useMemo로 최적화)
|
||||
const filteredObjects = useMemo(() => {
|
||||
return placedObjects.filter((obj) => {
|
||||
// 타입 필터
|
||||
if (filterType !== "all" && obj.type !== filterType) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 상태 필터
|
||||
if (selectedStatus !== "all" && material.status !== selectedStatus) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 날짜 필터
|
||||
if (dateRange.from && material.arrival_date < dateRange.from) {
|
||||
return false;
|
||||
}
|
||||
if (dateRange.to && material.arrival_date > dateRange.to) {
|
||||
return false;
|
||||
// 검색 쿼리
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
return (
|
||||
obj.name.toLowerCase().includes(query) ||
|
||||
obj.areaKey?.toLowerCase().includes(query) ||
|
||||
obj.locaKey?.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [materials, searchTerm, selectedYard, selectedStatus, dateRange]);
|
||||
}, [placedObjects, filterType, searchQuery]);
|
||||
|
||||
// 3D 객체 클릭 핸들러
|
||||
const handleObjectClick = (objectId: number) => {
|
||||
const material = materials.find((m) => m.id === objectId);
|
||||
setSelectedMaterial(material || null);
|
||||
};
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full overflow-hidden">
|
||||
{/* 좌측: 필터 패널 */}
|
||||
<div className="flex h-full w-[20%] flex-col border-r">
|
||||
{/* 검색바 */}
|
||||
<div className="border-b p-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="후판번호, 강종, 위치 검색..."
|
||||
className="h-10 pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-background flex h-full flex-col">
|
||||
{/* 상단 헤더 */}
|
||||
<div className="flex items-center justify-between border-b p-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
|
||||
<p className="text-muted-foreground text-sm">읽기 전용 뷰</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 필터 옵션 */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="space-y-4">
|
||||
{/* 야드 선택 */}
|
||||
{/* 메인 영역 */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* 좌측: 검색/필터 */}
|
||||
<div className="flex h-full w-[20%] flex-col border-r">
|
||||
<div className="space-y-4 p-4">
|
||||
{/* 검색 */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-semibold">야드</h4>
|
||||
<div className="space-y-1">
|
||||
{["all", "A동", "B동", "C동", "겐트리"].map((yard) => (
|
||||
<button
|
||||
key={yard}
|
||||
onClick={() => setSelectedYard(yard)}
|
||||
className={`block w-full rounded px-3 py-2 text-left text-sm transition-colors ${
|
||||
selectedYard === yard
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
}`}
|
||||
<Label className="mb-2 block text-sm font-semibold">검색</Label>
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="이름, Area, Location 검색..."
|
||||
className="h-10 pl-9 text-sm"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 p-0"
|
||||
onClick={() => setSearchQuery("")}
|
||||
>
|
||||
{yard === "all" ? "전체" : yard}
|
||||
</button>
|
||||
))}
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 상태 필터 */}
|
||||
{/* 타입 필터 */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-semibold">상태</h4>
|
||||
<div className="space-y-1">
|
||||
{["all", "입고", "가공중", "출고대기", "출고완료"].map((status) => (
|
||||
<button
|
||||
key={status}
|
||||
onClick={() => setSelectedStatus(status)}
|
||||
className={`block w-full rounded px-3 py-2 text-left text-sm transition-colors ${
|
||||
selectedStatus === status
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
{status === "all" ? "전체" : status}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
|
||||
<Select value={filterType} onValueChange={setFilterType}>
|
||||
<SelectTrigger className="h-10 text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
|
||||
<SelectItem value="area">Area ({typeCounts.area})</SelectItem>
|
||||
<SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
|
||||
<SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
|
||||
<SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
|
||||
<SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
|
||||
<SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
|
||||
<SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 기간 필터 */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-semibold">입고 기간</h4>
|
||||
{/* 필터 초기화 */}
|
||||
{(searchQuery || filterType !== "all") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 w-full text-sm"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setFilterType("all");
|
||||
}}
|
||||
>
|
||||
필터 초기화
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 객체 목록 */}
|
||||
<div className="flex-1 overflow-y-auto border-t p-4">
|
||||
<Label className="mb-2 block text-sm font-semibold">
|
||||
객체 목록 ({filteredObjects.length})
|
||||
</Label>
|
||||
{filteredObjects.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||
{searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
type="date"
|
||||
value={dateRange.from}
|
||||
onChange={(e) => setDateRange((prev) => ({ ...prev, from: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
placeholder="시작일"
|
||||
/>
|
||||
<Input
|
||||
type="date"
|
||||
value={dateRange.to}
|
||||
onChange={(e) => setDateRange((prev) => ({ ...prev, to: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
placeholder="종료일"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{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 = "랙";
|
||||
|
||||
{/* 중앙: 3D 캔버스 */}
|
||||
<div className="h-full flex-1 bg-gray-100">
|
||||
{isLoading ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<Yard3DCanvas
|
||||
placements={[]} // TODO: 실제 배치 데이터
|
||||
selectedPlacementId={selectedMaterial?.id || null}
|
||||
onPlacementClick={(placement) => {
|
||||
if (placement) {
|
||||
handleObjectClick(placement.id);
|
||||
} else {
|
||||
setSelectedMaterial(null);
|
||||
}
|
||||
}}
|
||||
onPlacementDrag={() => {}} // 뷰어 모드에서는 드래그 비활성화
|
||||
focusOnPlacementId={null}
|
||||
onCollisionDetected={() => {}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측: 상세정보 패널 (후판 목록 테이블) */}
|
||||
<div className="h-full w-[30%] overflow-y-auto border-l">
|
||||
<div className="p-4">
|
||||
<h3 className="mb-4 text-lg font-semibold">후판 목록</h3>
|
||||
|
||||
{filteredMaterials.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-sm text-muted-foreground">조건에 맞는 후판이 없습니다.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filteredMaterials.map((material) => (
|
||||
<div
|
||||
key={material.id}
|
||||
onClick={() => setSelectedMaterial(material)}
|
||||
className={`cursor-pointer rounded-lg border p-3 transition-all ${
|
||||
selectedMaterial?.id === material.id
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-border hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-sm font-semibold">{material.plate_no}</span>
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-xs ${
|
||||
material.status === "입고"
|
||||
? "bg-blue-100 text-blue-700"
|
||||
: material.status === "가공중"
|
||||
? "bg-yellow-100 text-yellow-700"
|
||||
: material.status === "출고대기"
|
||||
? "bg-orange-100 text-orange-700"
|
||||
: "bg-green-100 text-green-700"
|
||||
return (
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => 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"
|
||||
}`}
|
||||
>
|
||||
{material.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{obj.name}</p>
|
||||
<div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: obj.color }}
|
||||
/>
|
||||
<span>{typeLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 추가 정보 */}
|
||||
<div className="mt-2 space-y-1">
|
||||
{obj.areaKey && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Area: <span className="font-medium">{obj.areaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{obj.locaKey && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Location: <span className="font-medium">{obj.locaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{obj.materialCount !== undefined && obj.materialCount > 0 && (
|
||||
<p className="text-xs text-yellow-600">
|
||||
자재: <span className="font-semibold">{obj.materialCount}개</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-xs text-muted-foreground">
|
||||
<div className="flex justify-between">
|
||||
<span>강종:</span>
|
||||
<span className="font-medium text-foreground">{material.steel_grade}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>규격:</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{material.thickness}×{material.width}×{material.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>중량:</span>
|
||||
<span className="font-medium text-foreground">{material.weight.toLocaleString()} kg</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>위치:</span>
|
||||
<span className="font-medium text-foreground">{material.location}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>입고일:</span>
|
||||
<span className="font-medium text-foreground">{material.arrival_date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 중앙: 3D 캔버스 */}
|
||||
<div className="relative flex-1">
|
||||
{!isLoading && (
|
||||
<Yard3DCanvas
|
||||
placements={useMemo(
|
||||
() =>
|
||||
placedObjects.map((obj) => ({
|
||||
id: obj.id,
|
||||
name: obj.name,
|
||||
position_x: obj.position.x,
|
||||
position_y: obj.position.y,
|
||||
position_z: obj.position.z,
|
||||
size_x: obj.size.x,
|
||||
size_y: obj.size.y,
|
||||
size_z: obj.size.z,
|
||||
color: obj.color,
|
||||
data_source_type: obj.type,
|
||||
material_count: obj.materialCount,
|
||||
material_preview_height: obj.materialPreview?.height,
|
||||
yard_layout_id: undefined,
|
||||
material_code: null,
|
||||
material_name: null,
|
||||
quantity: null,
|
||||
unit: null,
|
||||
data_source_config: undefined,
|
||||
data_binding: undefined,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
})),
|
||||
[placedObjects],
|
||||
)}
|
||||
selectedPlacementId={selectedObject?.id || null}
|
||||
onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
|
||||
focusOnPlacementId={null}
|
||||
onCollisionDetected={() => {}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측: 정보 패널 */}
|
||||
{showInfoPanel && selectedObject && (
|
||||
<div className="h-full w-[25%] overflow-y-auto border-l">
|
||||
<div className="p-4">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">상세 정보</h3>
|
||||
<p className="text-muted-foreground text-xs">{selectedObject.name}</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowInfoPanel(false)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 기본 정보 */}
|
||||
<div className="bg-muted space-y-3 rounded-lg p-3">
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">타입</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.type}</p>
|
||||
</div>
|
||||
{selectedObject.areaKey && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">Area Key</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.areaKey}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedObject.locaKey && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">Location Key</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.locaKey}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">자재 개수</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.materialCount}개</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 자재 목록 (Location인 경우) */}
|
||||
{(selectedObject.type === "location-bed" ||
|
||||
selectedObject.type === "location-stp" ||
|
||||
selectedObject.type === "location-temp" ||
|
||||
selectedObject.type === "location-dest") && (
|
||||
<div className="mt-4">
|
||||
<Label className="mb-2 block text-sm font-semibold">자재 목록</Label>
|
||||
{loadingMaterials ? (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : materials.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||
{externalDbConnectionId
|
||||
? "자재가 없습니다"
|
||||
: "외부 DB 연결이 설정되지 않았습니다"}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{materials.map((material, index) => (
|
||||
<div
|
||||
key={`${material.STKKEY}-${index}`}
|
||||
className="bg-muted hover:bg-accent rounded-lg border p-3 transition-colors"
|
||||
>
|
||||
<div className="mb-2 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{material.STKKEY}</p>
|
||||
<p className="text-muted-foreground mt-0.5 text-xs">
|
||||
층: {material.LOLAYER} | Area: {material.AREAKEY}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-muted-foreground grid grid-cols-2 gap-2 text-xs">
|
||||
{material.STKWIDT && (
|
||||
<div>
|
||||
폭: <span className="font-medium">{material.STKWIDT}</span>
|
||||
</div>
|
||||
)}
|
||||
{material.STKLENG && (
|
||||
<div>
|
||||
길이: <span className="font-medium">{material.STKLENG}</span>
|
||||
</div>
|
||||
)}
|
||||
{material.STKHEIG && (
|
||||
<div>
|
||||
높이: <span className="font-medium">{material.STKHEIG}</span>
|
||||
</div>
|
||||
)}
|
||||
{material.STKWEIG && (
|
||||
<div>
|
||||
무게: <span className="font-medium">{material.STKWEIG}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{material.STKRMKS && (
|
||||
<p className="text-muted-foreground mt-2 text-xs italic">{material.STKRMKS}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user