448 lines
17 KiB
TypeScript
448 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowLeft, Save, Loader2, Plus, Settings, Trash2 } from "lucide-react";
|
|
import { yardLayoutApi } from "@/lib/api/yardLayoutApi";
|
|
import dynamic from "next/dynamic";
|
|
import { YardLayout, YardPlacement } from "./types";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { AlertCircle, CheckCircle } from "lucide-react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
|
|
|
const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex h-full items-center justify-center bg-gray-900">
|
|
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
|
</div>
|
|
),
|
|
});
|
|
|
|
// 나중에 구현할 데이터 바인딩 패널
|
|
const YardElementConfigPanel = dynamic(() => import("./YardElementConfigPanel"), {
|
|
ssr: false,
|
|
loading: () => <div>로딩 중...</div>,
|
|
});
|
|
|
|
interface YardEditorProps {
|
|
layout: YardLayout;
|
|
onBack: () => void;
|
|
}
|
|
|
|
export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|
const [placements, setPlacements] = useState<YardPlacement[]>([]);
|
|
const [originalPlacements, setOriginalPlacements] = useState<YardPlacement[]>([]); // 원본 데이터 보관
|
|
const [selectedPlacement, setSelectedPlacement] = useState<YardPlacement | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [showConfigPanel, setShowConfigPanel] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); // 미저장 변경사항 추적
|
|
const [nextPlacementId, setNextPlacementId] = useState(-1); // 임시 ID (음수 사용)
|
|
const [saveResultDialog, setSaveResultDialog] = useState<{
|
|
open: boolean;
|
|
success: boolean;
|
|
message: string;
|
|
}>({ open: false, success: false, message: "" });
|
|
|
|
// 배치 목록 로드
|
|
useEffect(() => {
|
|
const loadPlacements = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await yardLayoutApi.getPlacementsByLayoutId(layout.id);
|
|
if (response.success) {
|
|
const loadedData = response.data as YardPlacement[];
|
|
setPlacements(loadedData);
|
|
setOriginalPlacements(JSON.parse(JSON.stringify(loadedData))); // 깊은 복사
|
|
}
|
|
} catch (error) {
|
|
console.error("배치 목록 로드 실패:", error);
|
|
setError("배치 목록을 불러올 수 없습니다.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
loadPlacements();
|
|
}, [layout.id]);
|
|
|
|
// 빈 요소 추가 (로컬 상태에만 추가, 저장 시 서버에 반영)
|
|
const handleAddElement = () => {
|
|
const newPlacement: YardPlacement = {
|
|
id: nextPlacementId, // 임시 음수 ID
|
|
yard_layout_id: layout.id,
|
|
material_code: null,
|
|
material_name: null,
|
|
quantity: null,
|
|
unit: null,
|
|
position_x: 0,
|
|
position_y: 2.5,
|
|
position_z: 0,
|
|
size_x: 5,
|
|
size_y: 5,
|
|
size_z: 5,
|
|
color: "#9ca3af",
|
|
data_source_type: null,
|
|
data_source_config: null,
|
|
data_binding: null,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString(),
|
|
};
|
|
|
|
setPlacements((prev) => [...prev, newPlacement]);
|
|
setSelectedPlacement(newPlacement);
|
|
setShowConfigPanel(true);
|
|
setHasUnsavedChanges(true);
|
|
setNextPlacementId((prev) => prev - 1); // 다음 임시 ID
|
|
};
|
|
|
|
// 요소 선택 (3D 캔버스 또는 목록에서)
|
|
const handleSelectPlacement = (placement: YardPlacement) => {
|
|
setSelectedPlacement(placement);
|
|
setShowConfigPanel(false); // 선택 시에는 설정 패널 닫기
|
|
};
|
|
|
|
// 설정 버튼 클릭
|
|
const handleConfigClick = (placement: YardPlacement) => {
|
|
setSelectedPlacement(placement);
|
|
setShowConfigPanel(true);
|
|
};
|
|
|
|
// 요소 삭제 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
|
|
const handleDeletePlacement = (placementId: number) => {
|
|
if (!confirm("이 요소를 삭제하시겠습니까?")) {
|
|
return;
|
|
}
|
|
|
|
setPlacements((prev) => prev.filter((p) => p.id !== placementId));
|
|
if (selectedPlacement?.id === placementId) {
|
|
setSelectedPlacement(null);
|
|
setShowConfigPanel(false);
|
|
}
|
|
setHasUnsavedChanges(true);
|
|
};
|
|
|
|
// 자재 드래그 (3D 캔버스에서, 로컬 상태에만 반영)
|
|
const handlePlacementDrag = (id: number, position: { x: number; y: number; z: number }) => {
|
|
const updatedPosition = {
|
|
position_x: Math.round(position.x * 2) / 2,
|
|
position_y: position.y,
|
|
position_z: Math.round(position.z * 2) / 2,
|
|
};
|
|
|
|
setPlacements((prev) => prev.map((p) => (p.id === id ? { ...p, ...updatedPosition } : p)));
|
|
|
|
if (selectedPlacement?.id === id) {
|
|
setSelectedPlacement((prev) => (prev ? { ...prev, ...updatedPosition } : null));
|
|
}
|
|
|
|
setHasUnsavedChanges(true);
|
|
};
|
|
|
|
// 전체 저장 (신규/수정/삭제 모두 처리)
|
|
const handleSave = async () => {
|
|
setIsSaving(true);
|
|
try {
|
|
// 1. 삭제된 요소 처리 (원본에는 있지만 현재 state에 없는 경우)
|
|
const deletedIds = originalPlacements
|
|
.filter((orig) => !placements.find((p) => p.id === orig.id))
|
|
.map((p) => p.id);
|
|
|
|
for (const id of deletedIds) {
|
|
await yardLayoutApi.removePlacement(id);
|
|
}
|
|
|
|
// 2. 신규 추가 요소 처리 (ID가 음수인 경우)
|
|
const newPlacements = placements.filter((p) => p.id < 0);
|
|
const addedPlacements: YardPlacement[] = [];
|
|
|
|
for (const newPlacement of newPlacements) {
|
|
const response = await yardLayoutApi.addMaterialPlacement(layout.id, {
|
|
material_code: newPlacement.material_code,
|
|
material_name: newPlacement.material_name,
|
|
quantity: newPlacement.quantity,
|
|
unit: newPlacement.unit,
|
|
position_x: newPlacement.position_x,
|
|
position_y: newPlacement.position_y,
|
|
position_z: newPlacement.position_z,
|
|
size_x: newPlacement.size_x,
|
|
size_y: newPlacement.size_y,
|
|
size_z: newPlacement.size_z,
|
|
color: newPlacement.color,
|
|
data_source_type: newPlacement.data_source_type,
|
|
data_source_config: newPlacement.data_source_config,
|
|
data_binding: newPlacement.data_binding,
|
|
memo: newPlacement.memo,
|
|
});
|
|
|
|
if (response.success) {
|
|
addedPlacements.push(response.data as YardPlacement);
|
|
}
|
|
}
|
|
|
|
// 3. 기존 요소 수정 처리 (ID가 양수인 경우)
|
|
const existingPlacements = placements.filter((p) => p.id > 0);
|
|
|
|
for (const placement of existingPlacements) {
|
|
await yardLayoutApi.updatePlacement(placement.id, {
|
|
material_code: placement.material_code,
|
|
material_name: placement.material_name,
|
|
quantity: placement.quantity,
|
|
unit: placement.unit,
|
|
position_x: placement.position_x,
|
|
position_y: placement.position_y,
|
|
position_z: placement.position_z,
|
|
size_x: placement.size_x,
|
|
size_y: placement.size_y,
|
|
size_z: placement.size_z,
|
|
color: placement.color,
|
|
data_source_type: placement.data_source_type,
|
|
data_source_config: placement.data_source_config,
|
|
data_binding: placement.data_binding,
|
|
memo: placement.memo,
|
|
});
|
|
}
|
|
|
|
// 4. 저장 성공 후 데이터 다시 로드
|
|
const response = await yardLayoutApi.getPlacementsByLayoutId(layout.id);
|
|
if (response.success) {
|
|
const loadedData = response.data as YardPlacement[];
|
|
setPlacements(loadedData);
|
|
setOriginalPlacements(JSON.parse(JSON.stringify(loadedData)));
|
|
setHasUnsavedChanges(false);
|
|
setSelectedPlacement(null);
|
|
setShowConfigPanel(false);
|
|
setSaveResultDialog({
|
|
open: true,
|
|
success: true,
|
|
message: "모든 변경사항이 성공적으로 저장되었습니다.",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("저장 실패:", error);
|
|
setSaveResultDialog({
|
|
open: true,
|
|
success: false,
|
|
message: `저장에 실패했습니다: ${error instanceof Error ? error.message : "알 수 없는 오류"}`,
|
|
});
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
// 설정 패널에서 데이터 업데이트 (로컬 상태에만 반영, 서버 저장 안함)
|
|
const handleSaveConfig = (updatedData: Partial<YardPlacement>) => {
|
|
if (!selectedPlacement) return;
|
|
|
|
// 로컬 상태만 업데이트
|
|
setPlacements((prev) =>
|
|
prev.map((p) => {
|
|
if (p.id === selectedPlacement.id) {
|
|
return { ...p, ...updatedData };
|
|
}
|
|
return p;
|
|
}),
|
|
);
|
|
|
|
// 선택된 요소도 업데이트
|
|
setSelectedPlacement((prev) => (prev ? { ...prev, ...updatedData } : null));
|
|
setShowConfigPanel(false);
|
|
setHasUnsavedChanges(true);
|
|
};
|
|
|
|
// 요소가 설정되었는지 확인
|
|
const isConfigured = (placement: YardPlacement): boolean => {
|
|
return !!(placement.material_name && placement.quantity && placement.unit);
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-white">
|
|
{/* 상단 툴바 */}
|
|
<div className="flex items-center justify-between border-b p-4">
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="ghost" size="sm" onClick={onBack}>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
목록으로
|
|
</Button>
|
|
<div>
|
|
<h2 className="text-lg font-semibold">{layout.name}</h2>
|
|
{layout.description && <p className="text-sm text-gray-500">{layout.description}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{hasUnsavedChanges && <span className="text-sm font-medium text-orange-600">미저장 변경사항 있음</span>}
|
|
<Button size="sm" onClick={handleSave} disabled={isSaving || !hasUnsavedChanges}>
|
|
{isSaving ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
저장 중...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="mr-2 h-4 w-4" />
|
|
저장
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 에러 메시지 */}
|
|
{error && (
|
|
<Alert variant="destructive" className="m-4">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* 메인 컨텐츠 영역 */}
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* 좌측: 3D 캔버스 */}
|
|
<div className="flex-1">
|
|
{isLoading ? (
|
|
<div className="flex h-full items-center justify-center bg-gray-50">
|
|
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
|
</div>
|
|
) : (
|
|
<Yard3DCanvas
|
|
placements={placements}
|
|
selectedPlacementId={selectedPlacement?.id || null}
|
|
onPlacementClick={(placement) => handleSelectPlacement(placement as YardPlacement)}
|
|
onPlacementDrag={handlePlacementDrag}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* 우측: 요소 목록 또는 설정 패널 */}
|
|
<div className="w-80 border-l bg-white">
|
|
{showConfigPanel && selectedPlacement ? (
|
|
// 설정 패널
|
|
<YardElementConfigPanel
|
|
placement={selectedPlacement}
|
|
onSave={handleSaveConfig}
|
|
onCancel={() => setShowConfigPanel(false)}
|
|
/>
|
|
) : (
|
|
// 요소 목록
|
|
<div className="flex h-full flex-col">
|
|
<div className="border-b p-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold">요소 목록</h3>
|
|
<Button size="sm" onClick={handleAddElement}>
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
요소 추가
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-gray-500">총 {placements.length}개</p>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto p-2">
|
|
{placements.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center p-4 text-center text-sm text-gray-500">
|
|
요소가 없습니다.
|
|
<br />
|
|
{'위의 "요소 추가" 버튼을 클릭하세요.'}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{placements.map((placement) => {
|
|
const configured = isConfigured(placement);
|
|
const isSelected = selectedPlacement?.id === placement.id;
|
|
|
|
return (
|
|
<div
|
|
key={placement.id}
|
|
className={`rounded-lg border p-3 transition-all ${
|
|
isSelected
|
|
? "border-blue-500 bg-blue-50"
|
|
: configured
|
|
? "border-gray-200 bg-white hover:border-gray-300"
|
|
: "border-orange-200 bg-orange-50"
|
|
}`}
|
|
onClick={() => handleSelectPlacement(placement)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
{configured ? (
|
|
<>
|
|
<div className="text-sm font-medium text-gray-900">{placement.material_name}</div>
|
|
<div className="mt-1 text-xs text-gray-500">
|
|
수량: {placement.quantity} {placement.unit}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-sm font-medium text-orange-700">요소 #{placement.id}</div>
|
|
<div className="mt-1 text-xs text-orange-600">데이터 바인딩 설정 필요</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2 flex gap-1">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleConfigClick(placement);
|
|
}}
|
|
>
|
|
<Settings className="mr-1 h-3 w-3" />
|
|
{configured ? "편집" : "설정"}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-red-600 hover:bg-red-50"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeletePlacement(placement.id);
|
|
}}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 저장 결과 Dialog */}
|
|
<Dialog open={saveResultDialog.open} onOpenChange={(open) => setSaveResultDialog((prev) => ({ ...prev, open }))}>
|
|
<DialogContent onPointerDown={(e) => e.stopPropagation()}>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
{saveResultDialog.success ? (
|
|
<>
|
|
<CheckCircle className="h-5 w-5 text-green-600" />
|
|
저장 완료
|
|
</>
|
|
) : (
|
|
<>
|
|
<AlertCircle className="h-5 w-5 text-red-600" />
|
|
저장 실패
|
|
</>
|
|
)}
|
|
</DialogTitle>
|
|
<DialogDescription className="pt-2">{saveResultDialog.message}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex justify-end">
|
|
<Button onClick={() => setSaveResultDialog((prev) => ({ ...prev, open: false }))}>확인</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|