Phase 1-4 완료
This commit is contained in:
dohyeons
parent
3f60bba109
commit
8932f61298
|
|
@ -56,7 +56,6 @@ import todoRoutes from "./routes/todoRoutes"; // To-Do 관리
|
|||
import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
|
||||
import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
|
||||
import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 야드 관리 3D
|
||||
import materialRoutes from "./routes/materialRoutes"; // 자재 관리
|
||||
import { BatchSchedulerService } from "./services/batchSchedulerService";
|
||||
// import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
|
||||
// import batchRoutes from "./routes/batchRoutes"; // 임시 주석
|
||||
|
|
@ -207,7 +206,6 @@ 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/materials", materialRoutes); // 자재 관리
|
||||
// app.use("/api/collections", collectionRoutes); // 임시 주석
|
||||
// app.use("/api/batch", batchRoutes); // 임시 주석
|
||||
// app.use('/api/users', userRoutes);
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
import { Request, Response } from "express";
|
||||
import MaterialService from "../services/MaterialService";
|
||||
|
||||
export class MaterialController {
|
||||
// 임시 자재 마스터 목록 조회
|
||||
async getTempMaterials(req: Request, res: Response) {
|
||||
try {
|
||||
const { search, category, page, limit } = req.query;
|
||||
|
||||
const result = await MaterialService.getTempMaterials({
|
||||
search: search as string,
|
||||
category: category as string,
|
||||
page: page ? parseInt(page as string) : 1,
|
||||
limit: limit ? parseInt(limit as string) : 20,
|
||||
});
|
||||
|
||||
return res.json({ success: true, ...result });
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching temp materials:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "자재 목록 조회 중 오류가 발생했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 특정 자재 상세 조회
|
||||
async getTempMaterialByCode(req: Request, res: Response) {
|
||||
try {
|
||||
const { code } = req.params;
|
||||
const material = await MaterialService.getTempMaterialByCode(code);
|
||||
|
||||
if (!material) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: "자재를 찾을 수 없습니다.",
|
||||
});
|
||||
}
|
||||
|
||||
return res.json({ success: true, data: material });
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching temp material:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "자재 조회 중 오류가 발생했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 카테고리 목록 조회
|
||||
async getCategories(req: Request, res: Response) {
|
||||
try {
|
||||
const categories = await MaterialService.getCategories();
|
||||
return res.json({ success: true, data: categories });
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching categories:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "카테고리 목록 조회 중 오류가 발생했습니다.",
|
||||
error: error.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new MaterialController();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import express from "express";
|
||||
import MaterialController from "../controllers/MaterialController";
|
||||
import { authenticateToken } from "../middleware/authMiddleware";
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
// 모든 라우트에 인증 미들웨어 적용
|
||||
router.use(authenticateToken);
|
||||
|
||||
// 임시 자재 마스터 관리
|
||||
router.get("/temp", MaterialController.getTempMaterials);
|
||||
router.get("/temp/categories", MaterialController.getCategories);
|
||||
router.get("/temp/:code", MaterialController.getTempMaterialByCode);
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
import { getPool } from "../database/db";
|
||||
|
||||
export class MaterialService {
|
||||
// 임시 자재 마스터 목록 조회
|
||||
async getTempMaterials(params: {
|
||||
search?: string;
|
||||
category?: string;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
}) {
|
||||
const { search, category, page = 1, limit = 20 } = params;
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
let whereConditions: string[] = ["is_active = true"];
|
||||
const queryParams: any[] = [];
|
||||
let paramIndex = 1;
|
||||
|
||||
if (search) {
|
||||
whereConditions.push(
|
||||
`(material_code ILIKE $${paramIndex} OR material_name ILIKE $${paramIndex})`
|
||||
);
|
||||
queryParams.push(`%${search}%`);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
if (category) {
|
||||
whereConditions.push(`category = $${paramIndex}`);
|
||||
queryParams.push(category);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause =
|
||||
whereConditions.length > 0
|
||||
? `WHERE ${whereConditions.join(" AND ")}`
|
||||
: "";
|
||||
|
||||
const pool = getPool();
|
||||
|
||||
// 전체 개수 조회
|
||||
const countQuery = `SELECT COUNT(*) as total FROM temp_material_master ${whereClause}`;
|
||||
const countResult = await pool.query(countQuery, queryParams);
|
||||
const total = parseInt(countResult.rows[0].total);
|
||||
|
||||
// 데이터 조회
|
||||
const dataQuery = `
|
||||
SELECT
|
||||
id,
|
||||
material_code,
|
||||
material_name,
|
||||
category,
|
||||
unit,
|
||||
default_color,
|
||||
description,
|
||||
created_at
|
||||
FROM temp_material_master
|
||||
${whereClause}
|
||||
ORDER BY material_code ASC
|
||||
LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
|
||||
`;
|
||||
|
||||
queryParams.push(limit, offset);
|
||||
const dataResult = await pool.query(dataQuery, queryParams);
|
||||
|
||||
return {
|
||||
data: dataResult.rows,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// 특정 자재 상세 조회
|
||||
async getTempMaterialByCode(materialCode: string) {
|
||||
const query = `
|
||||
SELECT
|
||||
id,
|
||||
material_code,
|
||||
material_name,
|
||||
category,
|
||||
unit,
|
||||
default_color,
|
||||
description,
|
||||
created_at
|
||||
FROM temp_material_master
|
||||
WHERE material_code = $1 AND is_active = true
|
||||
`;
|
||||
|
||||
const pool = getPool();
|
||||
const result = await pool.query(query, [materialCode]);
|
||||
return result.rows[0] || null;
|
||||
}
|
||||
|
||||
// 카테고리 목록 조회
|
||||
async getCategories() {
|
||||
const query = `
|
||||
SELECT DISTINCT category
|
||||
FROM temp_material_master
|
||||
WHERE is_active = true AND category IS NOT NULL
|
||||
ORDER BY category ASC
|
||||
`;
|
||||
|
||||
const pool = getPool();
|
||||
const result = await pool.query(query);
|
||||
return result.rows.map((row) => row.category);
|
||||
}
|
||||
}
|
||||
|
||||
export default new MaterialService();
|
||||
|
|
@ -101,7 +101,6 @@ export class YardLayoutService {
|
|||
SELECT
|
||||
id,
|
||||
yard_layout_id,
|
||||
external_material_id,
|
||||
material_code,
|
||||
material_name,
|
||||
quantity,
|
||||
|
|
@ -113,6 +112,9 @@ export class YardLayoutService {
|
|||
size_y,
|
||||
size_z,
|
||||
color,
|
||||
data_source_type,
|
||||
data_source_config,
|
||||
data_binding,
|
||||
memo,
|
||||
created_at,
|
||||
updated_at
|
||||
|
|
@ -126,12 +128,11 @@ export class YardLayoutService {
|
|||
return result.rows;
|
||||
}
|
||||
|
||||
// 야드에 자재 배치 추가
|
||||
// 야드에 자재 배치 추가 (빈 요소 또는 설정된 요소)
|
||||
async addMaterialPlacement(layoutId: number, data: any) {
|
||||
const query = `
|
||||
INSERT INTO yard_material_placement (
|
||||
yard_layout_id,
|
||||
external_material_id,
|
||||
material_code,
|
||||
material_name,
|
||||
quantity,
|
||||
|
|
@ -143,52 +144,68 @@ export class YardLayoutService {
|
|||
size_y,
|
||||
size_z,
|
||||
color,
|
||||
data_source_type,
|
||||
data_source_config,
|
||||
data_binding,
|
||||
memo
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16)
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
const pool = getPool();
|
||||
const result = await pool.query(query, [
|
||||
layoutId,
|
||||
data.external_material_id,
|
||||
data.material_code,
|
||||
data.material_name,
|
||||
data.quantity,
|
||||
data.unit,
|
||||
data.material_code || null,
|
||||
data.material_name || null,
|
||||
data.quantity || null,
|
||||
data.unit || null,
|
||||
data.position_x || 0,
|
||||
data.position_y || 0,
|
||||
data.position_z || 0,
|
||||
data.size_x || 5,
|
||||
data.size_y || 5,
|
||||
data.size_z || 5,
|
||||
data.color || "#3b82f6",
|
||||
data.color || "#9ca3af", // 미설정 시 회색
|
||||
data.data_source_type || null,
|
||||
data.data_source_config ? JSON.stringify(data.data_source_config) : null,
|
||||
data.data_binding ? JSON.stringify(data.data_binding) : null,
|
||||
data.memo || null,
|
||||
]);
|
||||
|
||||
return result.rows[0];
|
||||
}
|
||||
|
||||
// 배치 정보 수정 (위치, 크기, 색상, 메모만)
|
||||
// 배치 정보 수정 (위치, 크기, 색상, 데이터 바인딩 등)
|
||||
async updatePlacement(placementId: number, data: any) {
|
||||
const query = `
|
||||
UPDATE yard_material_placement
|
||||
SET
|
||||
position_x = COALESCE($1, position_x),
|
||||
position_y = COALESCE($2, position_y),
|
||||
position_z = COALESCE($3, position_z),
|
||||
size_x = COALESCE($4, size_x),
|
||||
size_y = COALESCE($5, size_y),
|
||||
size_z = COALESCE($6, size_z),
|
||||
color = COALESCE($7, color),
|
||||
memo = COALESCE($8, memo),
|
||||
material_code = COALESCE($1, material_code),
|
||||
material_name = COALESCE($2, material_name),
|
||||
quantity = COALESCE($3, quantity),
|
||||
unit = COALESCE($4, unit),
|
||||
position_x = COALESCE($5, position_x),
|
||||
position_y = COALESCE($6, position_y),
|
||||
position_z = COALESCE($7, position_z),
|
||||
size_x = COALESCE($8, size_x),
|
||||
size_y = COALESCE($9, size_y),
|
||||
size_z = COALESCE($10, size_z),
|
||||
color = COALESCE($11, color),
|
||||
data_source_type = COALESCE($12, data_source_type),
|
||||
data_source_config = COALESCE($13, data_source_config),
|
||||
data_binding = COALESCE($14, data_binding),
|
||||
memo = COALESCE($15, memo),
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = $9
|
||||
WHERE id = $16
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
const pool = getPool();
|
||||
const result = await pool.query(query, [
|
||||
data.material_code,
|
||||
data.material_name,
|
||||
data.quantity,
|
||||
data.unit,
|
||||
data.position_x,
|
||||
data.position_y,
|
||||
data.position_z,
|
||||
|
|
@ -196,6 +213,9 @@ export class YardLayoutService {
|
|||
data.size_y,
|
||||
data.size_z,
|
||||
data.color,
|
||||
data.data_source_type,
|
||||
data.data_source_config ? JSON.stringify(data.data_source_config) : null,
|
||||
data.data_binding ? JSON.stringify(data.data_binding) : null,
|
||||
data.memo,
|
||||
placementId,
|
||||
]);
|
||||
|
|
@ -230,8 +250,9 @@ export class YardLayoutService {
|
|||
size_x = $4,
|
||||
size_y = $5,
|
||||
size_z = $6,
|
||||
color = $7,
|
||||
updated_at = CURRENT_TIMESTAMP
|
||||
WHERE id = $7 AND yard_layout_id = $8
|
||||
WHERE id = $8 AND yard_layout_id = $9
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
|
|
@ -242,6 +263,7 @@ export class YardLayoutService {
|
|||
placement.size_x,
|
||||
placement.size_y,
|
||||
placement.size_z,
|
||||
placement.color,
|
||||
placement.id,
|
||||
layoutId,
|
||||
]);
|
||||
|
|
@ -299,14 +321,14 @@ export class YardLayoutService {
|
|||
await client.query(
|
||||
`
|
||||
INSERT INTO yard_material_placement (
|
||||
yard_layout_id, external_material_id, material_code, material_name,
|
||||
yard_layout_id, material_code, material_name,
|
||||
quantity, unit, position_x, position_y, position_z,
|
||||
size_x, size_y, size_z, color, memo
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
|
||||
size_x, size_y, size_z, color,
|
||||
data_source_type, data_source_config, data_binding, memo
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16)
|
||||
`,
|
||||
[
|
||||
newLayout.id,
|
||||
placement.external_material_id,
|
||||
placement.material_code,
|
||||
placement.material_name,
|
||||
placement.quantity,
|
||||
|
|
@ -318,6 +340,9 @@ export class YardLayoutService {
|
|||
placement.size_y,
|
||||
placement.size_z,
|
||||
placement.color,
|
||||
placement.data_source_type,
|
||||
placement.data_source_config,
|
||||
placement.data_binding,
|
||||
placement.memo,
|
||||
]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, Save, Loader2, X } from "lucide-react";
|
||||
import { yardLayoutApi, materialApi } from "@/lib/api/yardLayoutApi";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
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 } from "lucide-react";
|
||||
|
||||
const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
|
||||
ssr: false,
|
||||
|
|
@ -17,41 +18,11 @@ const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
|
|||
),
|
||||
});
|
||||
|
||||
interface TempMaterial {
|
||||
id: number;
|
||||
material_code: string;
|
||||
material_name: string;
|
||||
category: string;
|
||||
unit: string;
|
||||
default_color: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface YardLayout {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
placement_count?: number;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface YardPlacement {
|
||||
id: number;
|
||||
yard_layout_id: number;
|
||||
external_material_id: string;
|
||||
material_code: string;
|
||||
material_name: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
position_x: number;
|
||||
position_y: number;
|
||||
position_z: number;
|
||||
size_x: number;
|
||||
size_y: number;
|
||||
size_z: number;
|
||||
color: string;
|
||||
memo?: string;
|
||||
}
|
||||
// 나중에 구현할 데이터 바인딩 패널
|
||||
const YardElementConfigPanel = dynamic(() => import("./YardElementConfigPanel"), {
|
||||
ssr: false,
|
||||
loading: () => <div>로딩 중...</div>,
|
||||
});
|
||||
|
||||
interface YardEditorProps {
|
||||
layout: YardLayout;
|
||||
|
|
@ -60,90 +31,88 @@ interface YardEditorProps {
|
|||
|
||||
export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
||||
const [placements, setPlacements] = useState<YardPlacement[]>([]);
|
||||
const [materials, setMaterials] = useState<TempMaterial[]>([]);
|
||||
const [selectedPlacement, setSelectedPlacement] = useState<YardPlacement | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [editValues, setEditValues] = useState({
|
||||
size_x: 5,
|
||||
size_y: 5,
|
||||
size_z: 5,
|
||||
color: "#3b82f6",
|
||||
});
|
||||
const [showConfigPanel, setShowConfigPanel] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// 배치 목록 & 자재 목록 로드
|
||||
// 배치 목록 로드
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const loadPlacements = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const [placementsRes, materialsRes] = await Promise.all([
|
||||
yardLayoutApi.getPlacementsByLayoutId(layout.id),
|
||||
materialApi.getTempMaterials({ limit: 100 }),
|
||||
]);
|
||||
|
||||
if (placementsRes.success) {
|
||||
setPlacements(placementsRes.data as YardPlacement[]);
|
||||
}
|
||||
if (materialsRes.success) {
|
||||
setMaterials(materialsRes.data as TempMaterial[]);
|
||||
const response = await yardLayoutApi.getPlacementsByLayoutId(layout.id);
|
||||
if (response.success) {
|
||||
setPlacements(response.data as YardPlacement[]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("데이터 로드 실패:", error);
|
||||
console.error("배치 목록 로드 실패:", error);
|
||||
setError("배치 목록을 불러올 수 없습니다.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
loadPlacements();
|
||||
}, [layout.id]);
|
||||
|
||||
// selectedPlacement 변경 시 editValues 업데이트
|
||||
useEffect(() => {
|
||||
if (selectedPlacement) {
|
||||
setEditValues({
|
||||
size_x: selectedPlacement.size_x,
|
||||
size_y: selectedPlacement.size_y,
|
||||
size_z: selectedPlacement.size_z,
|
||||
color: selectedPlacement.color,
|
||||
});
|
||||
}
|
||||
}, [selectedPlacement]);
|
||||
// 빈 요소 추가
|
||||
const handleAddElement = async () => {
|
||||
try {
|
||||
const newPlacementData = {
|
||||
position_x: 0,
|
||||
position_y: 0,
|
||||
position_z: 0,
|
||||
size_x: 5,
|
||||
size_y: 5,
|
||||
size_z: 5,
|
||||
color: "#9ca3af", // 회색 (미설정 상태)
|
||||
};
|
||||
|
||||
// 자재 클릭 → 배치 추가
|
||||
const handleMaterialClick = async (material: TempMaterial) => {
|
||||
// 이미 배치되었는지 확인
|
||||
const alreadyPlaced = placements.find((p) => p.material_code === material.material_code);
|
||||
if (alreadyPlaced) {
|
||||
alert("이미 배치된 자재입니다.");
|
||||
const response = await yardLayoutApi.addMaterialPlacement(layout.id, newPlacementData);
|
||||
if (response.success) {
|
||||
const newPlacement = response.data as YardPlacement;
|
||||
setPlacements((prev) => [...prev, newPlacement]);
|
||||
setSelectedPlacement(newPlacement);
|
||||
setShowConfigPanel(true); // 자동으로 설정 패널 표시
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("요소 추가 실패:", error);
|
||||
setError("요소 추가에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 요소 선택 (3D 캔버스 또는 목록에서)
|
||||
const handleSelectPlacement = (placement: YardPlacement) => {
|
||||
setSelectedPlacement(placement);
|
||||
setShowConfigPanel(false); // 선택 시에는 설정 패널 닫기
|
||||
};
|
||||
|
||||
// 설정 버튼 클릭
|
||||
const handleConfigClick = (placement: YardPlacement) => {
|
||||
setSelectedPlacement(placement);
|
||||
setShowConfigPanel(true);
|
||||
};
|
||||
|
||||
// 요소 삭제
|
||||
const handleDeletePlacement = async (placementId: number) => {
|
||||
if (!confirm("이 요소를 삭제하시겠습니까?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 기본 위치에 배치
|
||||
const placementData = {
|
||||
external_material_id: `TEMP-${material.id}`,
|
||||
material_code: material.material_code,
|
||||
material_name: material.material_name,
|
||||
quantity: 1,
|
||||
unit: material.unit,
|
||||
position_x: 0,
|
||||
position_y: 0,
|
||||
position_z: 0,
|
||||
size_x: 5,
|
||||
size_y: 5,
|
||||
size_z: 5,
|
||||
color: material.default_color,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await yardLayoutApi.addMaterialPlacement(layout.id, placementData);
|
||||
const response = await yardLayoutApi.removePlacement(placementId);
|
||||
if (response.success) {
|
||||
setPlacements((prev) => [...prev, response.data as YardPlacement]);
|
||||
setSelectedPlacement(response.data as YardPlacement);
|
||||
setPlacements((prev) => prev.filter((p) => p.id !== placementId));
|
||||
if (selectedPlacement?.id === placementId) {
|
||||
setSelectedPlacement(null);
|
||||
setShowConfigPanel(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("자재 배치 실패:", error);
|
||||
alert("자재 배치에 실패했습니다.");
|
||||
console.error("요소 삭제 실패:", error);
|
||||
setError("요소 삭제에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -155,49 +124,13 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
position_z: Math.round(position.z * 2) / 2,
|
||||
};
|
||||
|
||||
setPlacements((prev) =>
|
||||
prev.map((p) =>
|
||||
p.id === id
|
||||
? {
|
||||
...p,
|
||||
...updatedPosition,
|
||||
}
|
||||
: p,
|
||||
),
|
||||
);
|
||||
setPlacements((prev) => prev.map((p) => (p.id === id ? { ...p, ...updatedPosition } : p)));
|
||||
|
||||
// 선택된 자재도 업데이트
|
||||
if (selectedPlacement?.id === id) {
|
||||
setSelectedPlacement((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
...updatedPosition,
|
||||
}
|
||||
: null,
|
||||
);
|
||||
setSelectedPlacement((prev) => (prev ? { ...prev, ...updatedPosition } : null));
|
||||
}
|
||||
};
|
||||
|
||||
// 자재 배치 해제
|
||||
const handlePlacementRemove = async (id: number): Promise<void> => {
|
||||
try {
|
||||
const response = await yardLayoutApi.removePlacement(id);
|
||||
if (response.success) {
|
||||
setPlacements((prev) => prev.filter((p) => p.id !== id));
|
||||
setSelectedPlacement(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("배치 해제 실패:", error);
|
||||
alert("배치 해제에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 위치/크기/색상 업데이트
|
||||
const handlePlacementUpdate = (id: number, updates: Partial<YardPlacement>) => {
|
||||
setPlacements((prev) => prev.map((p) => (p.id === id ? { ...p, ...updates } : p)));
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
|
|
@ -227,12 +160,28 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
}
|
||||
};
|
||||
|
||||
// 필터링된 자재 목록
|
||||
const filteredMaterials = materials.filter(
|
||||
(m) =>
|
||||
m.material_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
m.material_code.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
// 설정 패널에서 저장
|
||||
const handleSaveConfig = async (updatedData: Partial<YardPlacement>) => {
|
||||
if (!selectedPlacement) return;
|
||||
|
||||
try {
|
||||
const response = await yardLayoutApi.updatePlacement(selectedPlacement.id, updatedData);
|
||||
if (response.success) {
|
||||
const updated = response.data as YardPlacement;
|
||||
setPlacements((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
|
||||
setSelectedPlacement(updated);
|
||||
setShowConfigPanel(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("설정 저장 실패:", error);
|
||||
setError("설정 저장에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 요소가 설정되었는지 확인
|
||||
const isConfigured = (placement: YardPlacement): boolean => {
|
||||
return !!(placement.material_name && placement.quantity && placement.unit);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col bg-white">
|
||||
|
|
@ -264,6 +213,14 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
</Button>
|
||||
</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 캔버스 */}
|
||||
|
|
@ -276,152 +233,104 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
|
|||
<Yard3DCanvas
|
||||
placements={placements}
|
||||
selectedPlacementId={selectedPlacement?.id || null}
|
||||
onPlacementClick={(placement) => setSelectedPlacement(placement as YardPlacement)}
|
||||
onPlacementClick={(placement) => handleSelectPlacement(placement as YardPlacement)}
|
||||
onPlacementDrag={handlePlacementDrag}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측: 자재 목록 또는 편집 패널 */}
|
||||
{/* 우측: 요소 목록 또는 설정 패널 */}
|
||||
<div className="w-80 border-l bg-white">
|
||||
{selectedPlacement ? (
|
||||
// 선택된 자재 편집 패널
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b p-4">
|
||||
<h3 className="text-sm font-semibold">자재 정보</h3>
|
||||
<Button variant="ghost" size="sm" onClick={() => setSelectedPlacement(null)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
<div className="space-y-4">
|
||||
{/* 읽기 전용 정보 */}
|
||||
<div>
|
||||
<Label className="text-xs text-gray-500">자재 코드</Label>
|
||||
<div className="mt-1 text-sm font-medium">{selectedPlacement.material_code}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs text-gray-500">자재명</Label>
|
||||
<div className="mt-1 text-sm font-medium">{selectedPlacement.material_name}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs text-gray-500">수량 (변경 불가)</Label>
|
||||
<div className="mt-1 text-sm">
|
||||
{selectedPlacement.quantity} {selectedPlacement.unit}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 편집 가능 정보 */}
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<Label className="text-sm font-semibold">배치 정보</Label>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<Label className="text-xs">너비</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="1"
|
||||
value={editValues.size_x}
|
||||
onChange={(e) => {
|
||||
const newValue = parseFloat(e.target.value) || 1;
|
||||
setEditValues((prev) => ({ ...prev, size_x: newValue }));
|
||||
handlePlacementUpdate(selectedPlacement.id, { size_x: newValue });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">높이</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="1"
|
||||
value={editValues.size_y}
|
||||
onChange={(e) => {
|
||||
const newValue = parseFloat(e.target.value) || 1;
|
||||
setEditValues((prev) => ({ ...prev, size_y: newValue }));
|
||||
handlePlacementUpdate(selectedPlacement.id, { size_y: newValue });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">깊이</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="1"
|
||||
value={editValues.size_z}
|
||||
onChange={(e) => {
|
||||
const newValue = parseFloat(e.target.value) || 1;
|
||||
setEditValues((prev) => ({ ...prev, size_z: newValue }));
|
||||
handlePlacementUpdate(selectedPlacement.id, { size_z: newValue });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={editValues.color}
|
||||
onChange={(e) => {
|
||||
setEditValues((prev) => ({ ...prev, color: e.target.value }));
|
||||
handlePlacementUpdate(selectedPlacement.id, { color: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => handlePlacementRemove(selectedPlacement.id)}
|
||||
>
|
||||
배치 해제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showConfigPanel && selectedPlacement ? (
|
||||
// 설정 패널
|
||||
<YardElementConfigPanel
|
||||
placement={selectedPlacement}
|
||||
onSave={handleSaveConfig}
|
||||
onCancel={() => setShowConfigPanel(false)}
|
||||
/>
|
||||
) : (
|
||||
// 자재 목록
|
||||
// 요소 목록
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="border-b p-4">
|
||||
<h3 className="mb-2 text-sm font-semibold">자재 목록</h3>
|
||||
<Input
|
||||
placeholder="자재 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="text-sm"
|
||||
/>
|
||||
<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">
|
||||
{filteredMaterials.length === 0 ? (
|
||||
<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="p-2">
|
||||
{filteredMaterials.map((material) => {
|
||||
const isPlaced = placements.some((p) => p.material_code === material.material_code);
|
||||
<div className="space-y-2">
|
||||
{placements.map((placement) => {
|
||||
const configured = isConfigured(placement);
|
||||
const isSelected = selectedPlacement?.id === placement.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={material.id}
|
||||
onClick={() => !isPlaced && handleMaterialClick(material)}
|
||||
disabled={isPlaced}
|
||||
className={`mb-2 w-full rounded-lg border p-3 text-left transition-all ${
|
||||
isPlaced
|
||||
? "cursor-not-allowed border-gray-200 bg-gray-50 opacity-50"
|
||||
: "cursor-pointer border-gray-200 bg-white hover:border-blue-500 hover:shadow-sm"
|
||||
<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="mb-1 text-sm font-medium text-gray-900">{material.material_name}</div>
|
||||
<div className="text-xs text-gray-500">{material.material_code}</div>
|
||||
<div className="mt-1 text-xs text-gray-400">{material.category}</div>
|
||||
{isPlaced && <div className="mt-1 text-xs text-blue-600">배치됨</div>}
|
||||
</button>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
// 야드 관리 3D - 타입 정의
|
||||
|
||||
import { ChartDataSource } from "../../types";
|
||||
|
||||
// 야드 레이아웃
|
||||
export interface YardLayout {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string;
|
||||
placement_count?: number;
|
||||
created_by?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// 데이터 소스 설정
|
||||
export interface YardDataSourceConfig {
|
||||
type: "database" | "external_db" | "rest_api";
|
||||
|
||||
// type === 'database' (현재 DB)
|
||||
query?: string;
|
||||
|
||||
// type === 'external_db' (외부 DB)
|
||||
connectionId?: number;
|
||||
|
||||
// type === 'rest_api'
|
||||
url?: string;
|
||||
method?: "GET" | "POST";
|
||||
headers?: Record<string, string>;
|
||||
queryParams?: Record<string, string>;
|
||||
body?: string;
|
||||
dataPath?: string; // 응답에서 데이터 배열 경로
|
||||
}
|
||||
|
||||
// 데이터 바인딩 설정
|
||||
export interface YardDataBinding {
|
||||
// 데이터 소스의 특정 행 선택
|
||||
selectedRowIndex?: number;
|
||||
|
||||
// 필드 매핑 (데이터 소스에서 선택)
|
||||
materialNameField?: string; // 자재명이 들어있는 컬럼명
|
||||
quantityField?: string; // 수량이 들어있는 컬럼명
|
||||
|
||||
// 단위는 사용자가 직접 입력
|
||||
unit: string; // 예: "EA", "BOX", "KG", "M" 등
|
||||
}
|
||||
|
||||
// 자재 배치 정보
|
||||
export interface YardPlacement {
|
||||
id: number;
|
||||
yard_layout_id: number;
|
||||
material_code?: string | null;
|
||||
material_name?: string | null;
|
||||
quantity?: number | null;
|
||||
unit?: string | null;
|
||||
position_x: number;
|
||||
position_y: number;
|
||||
position_z: number;
|
||||
size_x: number;
|
||||
size_y: number;
|
||||
size_z: number;
|
||||
color: string;
|
||||
data_source_type?: string | null;
|
||||
data_source_config?: YardDataSourceConfig | null;
|
||||
data_binding?: YardDataBinding | null;
|
||||
memo?: string | null;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
// 쿼리 결과 (데이터 바인딩용)
|
||||
export interface QueryResult {
|
||||
columns: string[];
|
||||
rows: Record<string, any>[];
|
||||
totalRows: number;
|
||||
}
|
||||
|
||||
// 요소 설정 단계
|
||||
export type ConfigStep = "data-source" | "field-mapping" | "placement-settings";
|
||||
|
||||
// 설정 모달 props
|
||||
export interface YardElementConfigPanelProps {
|
||||
placement: YardPlacement;
|
||||
onSave: (updatedPlacement: Partial<YardPlacement>) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
|
@ -57,28 +57,3 @@ export const yardLayoutApi = {
|
|||
return apiCall("PUT", `/yard-layouts/${layoutId}/placements/batch`, { placements });
|
||||
},
|
||||
};
|
||||
|
||||
// 자재 관리 API
|
||||
export const materialApi = {
|
||||
// 임시 자재 마스터 목록 조회
|
||||
async getTempMaterials(params?: { search?: string; category?: string; page?: number; limit?: number }) {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params?.search) queryParams.append("search", params.search);
|
||||
if (params?.category) queryParams.append("category", params.category);
|
||||
if (params?.page) queryParams.append("page", params.page.toString());
|
||||
if (params?.limit) queryParams.append("limit", params.limit.toString());
|
||||
|
||||
const queryString = queryParams.toString();
|
||||
return apiCall("GET", `/materials/temp${queryString ? `?${queryString}` : ""}`);
|
||||
},
|
||||
|
||||
// 특정 자재 상세 조회
|
||||
async getTempMaterialByCode(code: string) {
|
||||
return apiCall("GET", `/materials/temp/${code}`);
|
||||
},
|
||||
|
||||
// 카테고리 목록 조회
|
||||
async getCategories() {
|
||||
return apiCall("GET", "/materials/temp/categories");
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue