3d 중간저장

backend-node/src/app.ts

@@ -55,6 +55,7 @@ import riskAlertRoutes from "./routes/riskAlertRoutes"; // 리스크/알림 관
 import todoRoutes from "./routes/todoRoutes"; // To-Do 관리
 import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
 import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
+import warehouseRoutes from "./routes/warehouseRoutes"; // 창고 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@@ -204,6 +205,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/warehouse", warehouseRoutes); // 창고 관리
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석
 // app.use('/api/users', userRoutes);
@@ -241,7 +243,9 @@ app.listen(PORT, HOST, async () => {
 
   // 리스크/알림 자동 갱신 시작
   try {
-    const { RiskAlertCacheService } = await import('./services/riskAlertCacheService');
+    const { RiskAlertCacheService } = await import(
+      "./services/riskAlertCacheService"
+    );
     const cacheService = RiskAlertCacheService.getInstance();
     cacheService.startAutoRefresh();
     logger.info(`⏰ 리스크/알림 자동 갱신이 시작되었습니다. (10분 간격)`);

backend-node/src/controllers/WarehouseController.ts

@@ -0,0 +1,97 @@
+import { Request, Response } from "express";
+import { WarehouseService } from "../services/WarehouseService";
+
+export class WarehouseController {
+  private warehouseService: WarehouseService;
+
+  constructor() {
+    this.warehouseService = new WarehouseService();
+  }
+
+  // 창고 및 자재 데이터 조회
+  getWarehouseData = async (req: Request, res: Response) => {
+    try {
+      const data = await this.warehouseService.getWarehouseData();
+
+      return res.json({
+        success: true,
+        warehouses: data.warehouses,
+        materials: data.materials,
+      });
+    } catch (error: any) {
+      console.error("창고 데이터 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "창고 데이터를 불러오는데 실패했습니다.",
+        error: error.message,
+      });
+    }
+  };
+
+  // 특정 창고 정보 조회
+  getWarehouseById = async (req: Request, res: Response) => {
+    try {
+      const { id } = req.params;
+      const warehouse = await this.warehouseService.getWarehouseById(id);
+
+      if (!warehouse) {
+        return res.status(404).json({
+          success: false,
+          message: "창고를 찾을 수 없습니다.",
+        });
+      }
+
+      return res.json({
+        success: true,
+        data: warehouse,
+      });
+    } catch (error: any) {
+      console.error("창고 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "창고 정보를 불러오는데 실패했습니다.",
+        error: error.message,
+      });
+    }
+  };
+
+  // 창고별 자재 목록 조회
+  getMaterialsByWarehouse = async (req: Request, res: Response) => {
+    try {
+      const { warehouseId } = req.params;
+      const materials =
+        await this.warehouseService.getMaterialsByWarehouse(warehouseId);
+
+      return res.json({
+        success: true,
+        data: materials,
+      });
+    } catch (error: any) {
+      console.error("자재 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "자재 목록을 불러오는데 실패했습니다.",
+        error: error.message,
+      });
+    }
+  };
+
+  // 창고 통계 조회
+  getWarehouseStats = async (req: Request, res: Response) => {
+    try {
+      const stats = await this.warehouseService.getWarehouseStats();
+
+      return res.json({
+        success: true,
+        data: stats,
+      });
+    } catch (error: any) {
+      console.error("창고 통계 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "창고 통계를 불러오는데 실패했습니다.",
+        error: error.message,
+      });
+    }
+  };
+}

backend-node/src/routes/warehouseRoutes.ts

@@ -0,0 +1,22 @@
+import { Router } from "express";
+import { WarehouseController } from "../controllers/WarehouseController";
+
+const router = Router();
+const warehouseController = new WarehouseController();
+
+// 창고 및 자재 데이터 조회
+router.get("/data", warehouseController.getWarehouseData);
+
+// 특정 창고 정보 조회
+router.get("/:id", warehouseController.getWarehouseById);
+
+// 창고별 자재 목록 조회
+router.get(
+  "/:warehouseId/materials",
+  warehouseController.getMaterialsByWarehouse
+);
+
+// 창고 통계 조회
+router.get("/stats/summary", warehouseController.getWarehouseStats);
+
+export default router;

backend-node/src/services/WarehouseService.ts

@@ -0,0 +1,170 @@
+import pool from "../database/db";
+
+export class WarehouseService {
+  // 창고 및 자재 데이터 조회
+  async getWarehouseData() {
+    try {
+      // 창고 목록 조회
+      const warehousesResult = await pool.query(`
+        SELECT 
+          id,
+          name,
+          position_x,
+          position_y,
+          position_z,
+          size_x,
+          size_y,
+          size_z,
+          color,
+          capacity,
+          current_usage,
+          status,
+          description,
+          created_at,
+          updated_at
+        FROM warehouse
+        WHERE status = 'active'
+        ORDER BY id
+      `);
+
+      // 자재 목록 조회
+      const materialsResult = await pool.query(`
+        SELECT 
+          id,
+          warehouse_id,
+          name,
+          material_code,
+          quantity,
+          unit,
+          position_x,
+          position_y,
+          position_z,
+          size_x,
+          size_y,
+          size_z,
+          color,
+          status,
+          last_updated,
+          created_at
+        FROM warehouse_material
+        ORDER BY warehouse_id, id
+      `);
+
+      return {
+        warehouses: warehousesResult,
+        materials: materialsResult,
+      };
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  // 특정 창고 정보 조회
+  async getWarehouseById(id: string) {
+    try {
+      const result = await pool.query(
+        `
+        SELECT 
+          id,
+          name,
+          position_x,
+          position_y,
+          position_z,
+          size_x,
+          size_y,
+          size_z,
+          color,
+          capacity,
+          current_usage,
+          status,
+          description,
+          created_at,
+          updated_at
+        FROM warehouse
+        WHERE id = $1
+      `,
+        [id]
+      );
+
+      return result[0] || null;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  // 창고별 자재 목록 조회
+  async getMaterialsByWarehouse(warehouseId: string) {
+    try {
+      const result = await pool.query(
+        `
+        SELECT 
+          id,
+          warehouse_id,
+          name,
+          material_code,
+          quantity,
+          unit,
+          position_x,
+          position_y,
+          position_z,
+          size_x,
+          size_y,
+          size_z,
+          color,
+          status,
+          last_updated,
+          created_at
+        FROM warehouse_material
+        WHERE warehouse_id = $1
+        ORDER BY id
+      `,
+        [warehouseId]
+      );
+
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  // 창고 통계 조회
+  async getWarehouseStats() {
+    try {
+      const result = await pool.query(`
+        SELECT 
+          COUNT(DISTINCT w.id) as total_warehouses,
+          COUNT(m.id) as total_materials,
+          SUM(w.capacity) as total_capacity,
+          SUM(w.current_usage) as total_usage,
+          ROUND(AVG((w.current_usage::numeric / NULLIF(w.capacity, 0)) * 100), 2) as avg_usage_percent
+        FROM warehouse w
+        LEFT JOIN warehouse_material m ON w.id = m.warehouse_id
+        WHERE w.status = 'active'
+      `);
+
+      // 상태별 자재 수
+      const statusResult = await pool.query(`
+        SELECT 
+          status,
+          COUNT(*) as count
+        FROM warehouse_material
+        GROUP BY status
+      `);
+
+      const statusCounts = statusResult.reduce(
+        (acc: Record<string, number>, row: any) => {
+          acc[row.status] = parseInt(row.count);
+          return acc;
+        },
+        {} as Record<string, number>
+      );
+
+      return {
+        ...result[0],
+        materialsByStatus: statusCounts,
+      };
+    } catch (error) {
+      throw error;
+    }
+  }
+}

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -575,6 +575,8 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
         return "🚚 기사 관리 위젯";
       case "list":
         return "📋 리스트 위젯";
+      case "warehouse-3d":
+        return "🏭 창고 현황 (3D)";
       default:
         return "🔧 위젯";
     }
@@ -615,6 +617,8 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
         return "driver-management";
       case "list":
         return "list-widget";
+      case "warehouse-3d":
+        return "warehouse-3d";
       default:
         return "위젯 내용이 여기에 표시됩니다";
     }

frontend/components/admin/dashboard/DashboardTopMenu.tsx

@@ -184,6 +184,7 @@ export function DashboardTopMenu({
               <SelectLabel>데이터 위젯</SelectLabel>
               <SelectItem value="list">리스트 위젯</SelectItem>
               <SelectItem value="map">지도</SelectItem>
+              <SelectItem value="warehouse-3d">창고 현황 (3D)</SelectItem>
             </SelectGroup>
             <SelectGroup>
               <SelectLabel>일반 위젯</SelectLabel>

frontend/components/admin/dashboard/types.ts

@@ -35,7 +35,8 @@ export type ElementSubtype =
   | "booking-alert"
   | "maintenance"
   | "document"
-  | "list"; // 위젯 타입
+  | "list"
+  | "warehouse-3d"; // 위젯 타입
 
 export interface Position {
   x: number;

frontend/components/admin/dashboard/widgets/Warehouse3DWidget.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+import React, { useRef, useState, useEffect, Suspense } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { OrbitControls, Text, Box, Html } from "@react-three/drei";
+import * as THREE from "three";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, Maximize2, Info } from "lucide-react";
+
+interface WarehouseData {
+  id: string;
+  name: string;
+  position_x: number;
+  position_y: number;
+  position_z: number;
+  size_x: number;
+  size_y: number;
+  size_z: number;
+  color: string;
+  capacity: number;
+  current_usage: number;
+  status: string;
+  description?: string;
+}
+
+interface MaterialData {
+  id: string;
+  warehouse_id: string;
+  name: string;
+  material_code: 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;
+  status: string;
+}
+
+interface Warehouse3DWidgetProps {
+  element?: any;
+}
+
+// 창고 3D 박스 컴포넌트
+function WarehouseBox({
+  warehouse,
+  onClick,
+  isSelected,
+}: {
+  warehouse: WarehouseData;
+  onClick: () => void;
+  isSelected: boolean;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const [hovered, setHovered] = useState(false);
+
+  useFrame(() => {
+    if (meshRef.current) {
+      if (isSelected) {
+        meshRef.current.scale.lerp(new THREE.Vector3(1.05, 1.05, 1.05), 0.1);
+      } else if (hovered) {
+        meshRef.current.scale.lerp(new THREE.Vector3(1.02, 1.02, 1.02), 0.1);
+      } else {
+        meshRef.current.scale.lerp(new THREE.Vector3(1, 1, 1), 0.1);
+      }
+    }
+  });
+
+  const usagePercentage = (warehouse.current_usage / warehouse.capacity) * 100;
+
+  return (
+    <group position={[warehouse.position_x, warehouse.position_y + warehouse.size_y / 2, warehouse.position_z]}>
+      <mesh
+        ref={meshRef}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick();
+        }}
+        onPointerOver={() => setHovered(true)}
+        onPointerOut={() => setHovered(false)}
+      >
+        <boxGeometry args={[warehouse.size_x, warehouse.size_y, warehouse.size_z]} />
+        <meshStandardMaterial color={warehouse.color} transparent opacity={0.3} wireframe={false} />
+      </mesh>
+
+      {/* 창고 테두리 */}
+      <lineSegments>
+        <edgesGeometry args={[new THREE.BoxGeometry(warehouse.size_x, warehouse.size_y, warehouse.size_z)]} />
+        <lineBasicMaterial color={isSelected ? "#FFD700" : hovered ? "#FFFFFF" : warehouse.color} linewidth={2} />
+      </lineSegments>
+
+      {/* 창고 이름 라벨 */}
+      <Text position={[0, warehouse.size_y / 2 + 1, 0]} fontSize={1} color="white" anchorX="center" anchorY="middle">
+        {warehouse.name}
+      </Text>
+
+      {/* 사용률 표시 */}
+      <Html position={[0, warehouse.size_y / 2 + 2, 0]} center>
+        <div className="pointer-events-none rounded bg-black/80 px-2 py-1 text-xs text-white">
+          {usagePercentage.toFixed(0)}% 사용중
+        </div>
+      </Html>
+    </group>
+  );
+}
+
+// 자재 3D 박스 컴포넌트
+function MaterialBox({
+  material,
+  onClick,
+  isSelected,
+}: {
+  material: MaterialData;
+  onClick: () => void;
+  isSelected: boolean;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const [hovered, setHovered] = useState(false);
+
+  useFrame(() => {
+    if (meshRef.current && (isSelected || hovered)) {
+      meshRef.current.rotation.y += 0.01;
+    }
+  });
+
+  const statusColor =
+    {
+      stocked: material.color,
+      reserved: "#FFA500",
+      urgent: "#FF0000",
+      out_of_stock: "#808080",
+    }[material.status] || material.color;
+
+  return (
+    <group position={[material.position_x, material.position_y + material.size_y / 2, material.position_z]}>
+      <mesh
+        ref={meshRef}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick();
+        }}
+        onPointerOver={() => setHovered(true)}
+        onPointerOut={() => setHovered(false)}
+      >
+        <boxGeometry args={[material.size_x, material.size_y, material.size_z]} />
+        <meshStandardMaterial color={statusColor} metalness={0.5} roughness={0.2} />
+      </mesh>
+
+      {(hovered || isSelected) && (
+        <Html position={[0, material.size_y / 2 + 0.5, 0]} center>
+          <div className="pointer-events-none rounded bg-black/90 px-2 py-1 text-xs text-white shadow-lg">
+            <div className="font-bold">{material.name}</div>
+            <div className="text-gray-300">
+              {material.quantity} {material.unit}
+            </div>
+          </div>
+        </Html>
+      )}
+    </group>
+  );
+}
+
+// 3D 씬 컴포넌트
+function Scene({
+  warehouses,
+  materials,
+  onSelectWarehouse,
+  onSelectMaterial,
+  selectedWarehouse,
+  selectedMaterial,
+}: {
+  warehouses: WarehouseData[];
+  materials: MaterialData[];
+  onSelectWarehouse: (warehouse: WarehouseData | null) => void;
+  onSelectMaterial: (material: MaterialData | null) => void;
+  selectedWarehouse: WarehouseData | null;
+  selectedMaterial: MaterialData | null;
+}) {
+  return (
+    <>
+      {/* 조명 */}
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} intensity={1} castShadow />
+      <directionalLight position={[-10, 10, -5]} intensity={0.5} />
+
+      {/* 바닥 그리드 */}
+      <gridHelper args={[100, 50, "#444444", "#222222"]} position={[0, 0, 0]} />
+
+      {/* 창고들 */}
+      {warehouses.map((warehouse) => (
+        <WarehouseBox
+          key={warehouse.id}
+          warehouse={warehouse}
+          onClick={() => {
+            if (selectedWarehouse?.id === warehouse.id) {
+              onSelectWarehouse(null);
+            } else {
+              onSelectWarehouse(warehouse);
+              onSelectMaterial(null);
+            }
+          }}
+          isSelected={selectedWarehouse?.id === warehouse.id}
+        />
+      ))}
+
+      {/* 자재들 */}
+      {materials.map((material) => (
+        <MaterialBox
+          key={material.id}
+          material={material}
+          onClick={() => {
+            if (selectedMaterial?.id === material.id) {
+              onSelectMaterial(null);
+            } else {
+              onSelectMaterial(material);
+            }
+          }}
+          isSelected={selectedMaterial?.id === material.id}
+        />
+      ))}
+
+      {/* 카메라 컨트롤 */}
+      <OrbitControls enableDamping dampingFactor={0.05} minDistance={10} maxDistance={100} />
+    </>
+  );
+}
+
+export function Warehouse3DWidget({ element }: Warehouse3DWidgetProps) {
+  const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
+  const [materials, setMaterials] = useState<MaterialData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedWarehouse, setSelectedWarehouse] = useState<WarehouseData | null>(null);
+  const [selectedMaterial, setSelectedMaterial] = useState<MaterialData | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      // API 호출 (백엔드 API 구현 필요)
+      const response = await fetch("/api/warehouse/data");
+      if (response.ok) {
+        const data = await response.json();
+        setWarehouses(data.warehouses || []);
+        setMaterials(data.materials || []);
+      } else {
+        // 임시 더미 데이터 (개발용)
+        console.log("API 실패, 더미 데이터 사용");
+      }
+    } catch (error) {
+      console.error("창고 데이터 로드 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card className="h-full">
+        <CardContent className="flex h-full items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={`flex h-full flex-col ${isFullscreen ? "fixed inset-0 z-50" : ""}`}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-lg font-bold">🏭 창고 현황 (3D)</CardTitle>
+        <div className="flex gap-2">
+          <Badge variant="outline">
+            {warehouses.length}개 창고 | {materials.length}개 자재
+          </Badge>
+          <button onClick={() => setIsFullscreen(!isFullscreen)} className="text-gray-500 hover:text-gray-700">
+            <Maximize2 className="h-4 w-4" />
+          </button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-1 gap-4 p-4">
+        {/* 3D 뷰 */}
+        <div className="flex-1 rounded-lg bg-gray-900">
+          <Canvas camera={{ position: [30, 20, 30], fov: 50 }}>
+            <Suspense fallback={null}>
+              <Scene
+                warehouses={warehouses}
+                materials={materials}
+                onSelectWarehouse={setSelectedWarehouse}
+                onSelectMaterial={setSelectedMaterial}
+                selectedWarehouse={selectedWarehouse}
+                selectedMaterial={selectedMaterial}
+              />
+            </Suspense>
+          </Canvas>
+        </div>
+
+        {/* 정보 패널 */}
+        <div className="w-80 space-y-4 overflow-y-auto">
+          {/* 선택된 창고 정보 */}
+          {selectedWarehouse && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2 text-sm">
+                  <Info className="h-4 w-4" />
+                  창고 정보
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2 text-sm">
+                <div>
+                  <span className="font-semibold">이름:</span> {selectedWarehouse.name}
+                </div>
+                <div>
+                  <span className="font-semibold">ID:</span> {selectedWarehouse.id}
+                </div>
+                <div>
+                  <span className="font-semibold">용량:</span> {selectedWarehouse.current_usage} /{" "}
+                  {selectedWarehouse.capacity}
+                </div>
+                <div>
+                  <span className="font-semibold">사용률:</span>{" "}
+                  {((selectedWarehouse.current_usage / selectedWarehouse.capacity) * 100).toFixed(1)}%
+                </div>
+                <div>
+                  <span className="font-semibold">상태:</span>{" "}
+                  <Badge variant={selectedWarehouse.status === "active" ? "default" : "secondary"}>
+                    {selectedWarehouse.status}
+                  </Badge>
+                </div>
+                {selectedWarehouse.description && (
+                  <div>
+                    <span className="font-semibold">설명:</span> {selectedWarehouse.description}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* 선택된 자재 정보 */}
+          {selectedMaterial && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2 text-sm">
+                  <Info className="h-4 w-4" />
+                  자재 정보
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2 text-sm">
+                <div>
+                  <span className="font-semibold">이름:</span> {selectedMaterial.name}
+                </div>
+                <div>
+                  <span className="font-semibold">코드:</span> {selectedMaterial.material_code}
+                </div>
+                <div>
+                  <span className="font-semibold">수량:</span> {selectedMaterial.quantity} {selectedMaterial.unit}
+                </div>
+                <div>
+                  <span className="font-semibold">위치:</span>{" "}
+                  {warehouses.find((w) => w.id === selectedMaterial.warehouse_id)?.name}
+                </div>
+                <div>
+                  <span className="font-semibold">상태:</span>{" "}
+                  <Badge
+                    variant={
+                      selectedMaterial.status === "urgent"
+                        ? "destructive"
+                        : selectedMaterial.status === "reserved"
+                          ? "secondary"
+                          : "default"
+                    }
+                  >
+                    {selectedMaterial.status}
+                  </Badge>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* 창고 목록 */}
+          {!selectedWarehouse && !selectedMaterial && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm">창고 목록</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {warehouses.map((warehouse) => {
+                  const warehouseMaterials = materials.filter((m) => m.warehouse_id === warehouse.id);
+                  return (
+                    <button
+                      key={warehouse.id}
+                      onClick={() => setSelectedWarehouse(warehouse)}
+                      className="w-full rounded-lg border p-2 text-left transition-colors hover:bg-gray-50"
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="font-semibold">{warehouse.name}</span>
+                        <Badge variant="outline">{warehouseMaterials.length}개</Badge>
+                      </div>
+                      <div className="mt-1 text-xs text-gray-500">
+                        {((warehouse.current_usage / warehouse.capacity) * 100).toFixed(0)}% 사용중
+                      </div>
+                    </button>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/components/dashboard/DashboardViewer.tsx

@@ -38,6 +38,14 @@ const ListWidget = dynamic(
   { ssr: false },
 );
 
+const Warehouse3DWidget = dynamic(
+  () =>
+    import("@/components/admin/dashboard/widgets/Warehouse3DWidget").then((mod) => ({
+      default: mod.Warehouse3DWidget,
+    })),
+  { ssr: false },
+);
+
 /**
  * 위젯 렌더링 함수 - DashboardSidebar의 모든 subtype 처리
  * ViewerElement에서 사용하기 위해 컴포넌트 외부에 정의
@@ -78,6 +86,9 @@ function renderWidget(element: DashboardElement) {
     case "list":
       return <ListWidget element={element} />;
 
+    case "warehouse-3d":
+      return <Warehouse3DWidget element={element} />;
+
     // === 차량 관련 (추가 위젯) ===
     case "vehicle-status":
       return <VehicleStatusWidget />;

frontend/package-lock.json

@@ -30,11 +30,14 @@
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@react-three/drei": "^10.7.6",
+        "@react-three/fiber": "^9.4.0",
         "@tanstack/react-query": "^5.86.0",
         "@tanstack/react-table": "^8.21.3",
         "@types/d3": "^7.4.3",
         "@types/leaflet": "^1.9.21",
         "@types/react-window": "^1.8.8",
+        "@types/three": "^0.180.0",
         "@xyflow/react": "^12.8.4",
         "axios": "^1.11.0",
         "class-variance-authority": "^0.7.1",
@@ -64,6 +67,7 @@
         "sheetjs-style": "^0.15.8",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
+        "three": "^0.180.0",
         "uuid": "^13.0.0",
         "xlsx": "^0.18.5",
         "zod": "^4.1.5"
@@ -280,6 +284,12 @@
       "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
       "license": "MIT"
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@dnd-kit/accessibility": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
@@ -1100,6 +1110,24 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
+      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -2495,6 +2523,160 @@
         "react-dom": "^19.0.0"
       }
     },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.6",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.6.tgz",
+      "integrity": "sha512-ZSFwRlRaa4zjtB7yHO6Q9xQGuyDCzE7whXBhum92JslcMRC3aouivp0rAzszcVymIoJx6PXmibyP+xr+zKdwLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/drei/node_modules/zustand": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
+      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.0.tgz",
+      "integrity": "sha512-k4iu1R6e5D54918V4sqmISUkI5OgTw3v7/sDRKEC632Wd5g2WBtUS5gyG63X0GJO/HZUj1tsjSXfyzwrUHZl1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.32.0",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-reconciler": "^0.31.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.25.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-three/fiber/node_modules/zustand": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
+      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@reactflow/background": {
       "version": "11.3.9",
       "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
@@ -3022,6 +3204,12 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -3286,6 +3474,12 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3332,6 +3526,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.1.13",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
@@ -3351,6 +3551,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.32.2",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.32.2.tgz",
+      "integrity": "sha512-gjcm6O0aUknhYaogEl8t5pecPfiOTD8VQkbjOhgbZas/E6qGY+veW9iuJU/7p4Y1E0EuQ0mArga7VEOUWSlVRA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-window": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
@@ -3360,6 +3569,27 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.180.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz",
+      "integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3380,6 +3610,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.44.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.44.1.tgz",
@@ -3937,6 +4173,30 @@
         "win32"
       ]
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.66.tgz",
+      "integrity": "sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.11",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
@@ -4384,6 +4644,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/c12": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
@@ -4472,6 +4756,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.0.tgz",
+      "integrity": "sha512-w5oULNpijgTRH0ARFJJ0R5ct1nUM3R3WP7/b8A6j9uTGpRfnsypc/RBMPQV8JQDPayUe37p/TZZY1PcUr4czOQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.11.0",
+        "npm": ">=10.8.2"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001745",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz",
@@ -4718,11 +5015,28 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -5380,6 +5694,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
@@ -5516,6 +5839,12 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/duck": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/duck/-/duck-0.1.12.tgz",
@@ -6374,6 +6703,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -6677,6 +7012,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/goober": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
@@ -6813,6 +7154,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.13.tgz",
+      "integrity": "sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -6872,6 +7219,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -7217,6 +7584,12 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "license": "MIT"
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -7373,7 +7746,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/isomorphic-dompurify": {
@@ -7407,6 +7779,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
@@ -7901,6 +8294,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.19",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
@@ -7969,6 +8372,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -8468,7 +8886,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8564,6 +8981,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -8734,6 +9157,16 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -8944,6 +9377,27 @@
         "react-dom": "^19.0.0"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
+      "integrity": "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -9046,6 +9500,21 @@
         }
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-window": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-2.1.1.tgz",
@@ -9510,7 +9979,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -9523,7 +9991,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9674,6 +10141,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -9882,6 +10375,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -9952,6 +10454,44 @@
         "node": ">=18"
       }
     },
+    "node_modules/three": {
+      "version": "0.180.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
+      "integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.0.tgz",
+      "integrity": "sha512-kv0Byb++AXztEGsULgMAs8U2jgUdz6HPpAB/wDJnLiLlaWQX2APHhiTJIN7rqW+Of0eRgcp7jn05U1BsCP3xBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -10068,6 +10608,36 @@
         "node": ">=20"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -10100,6 +10670,15 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
     "node_modules/tw-animate-css": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
@@ -10350,6 +10929,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/uuid": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
@@ -10397,6 +10985,17 @@
         "node": ">=18"
       }
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.0.tgz",
@@ -10444,7 +11043,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"

frontend/package.json

@@ -38,11 +38,14 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@react-three/drei": "^10.7.6",
+    "@react-three/fiber": "^9.4.0",
     "@tanstack/react-query": "^5.86.0",
     "@tanstack/react-table": "^8.21.3",
     "@types/d3": "^7.4.3",
     "@types/leaflet": "^1.9.21",
     "@types/react-window": "^1.8.8",
+    "@types/three": "^0.180.0",
     "@xyflow/react": "^12.8.4",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
@@ -72,6 +75,7 @@
     "sheetjs-style": "^0.15.8",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
+    "three": "^0.180.0",
     "uuid": "^13.0.0",
     "xlsx": "^0.18.5",
     "zod": "^4.1.5"