Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

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);
@@ -231,6 +233,14 @@ app.listen(PORT, HOST, async () => {
   logger.info(`🔗 Health check: http://${HOST}:${PORT}/health`);
   logger.info(`🌐 External access: http://39.117.244.52:${PORT}/health`);
 
+  // 대시보드 마이그레이션 실행
+  try {
+    const { runDashboardMigration } = await import('./database/runMigration');
+    await runDashboardMigration();
+  } catch (error) {
+    logger.error(`❌ 대시보드 마이그레이션 실패:`, error);
+  }
+
   // 배치 스케줄러 초기화
   try {
     await BatchSchedulerService.initialize();
@@ -241,7 +251,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/database/runMigration.ts

@@ -0,0 +1,42 @@
+import { PostgreSQLService } from './PostgreSQLService';
+
+/**
+ * 데이터베이스 마이그레이션 실행
+ * dashboard_elements 테이블에 custom_title, show_header 컬럼 추가
+ */
+export async function runDashboardMigration() {
+  try {
+    console.log('🔄 대시보드 마이그레이션 시작...');
+
+    // custom_title 컬럼 추가
+    await PostgreSQLService.query(`
+      ALTER TABLE dashboard_elements 
+      ADD COLUMN IF NOT EXISTS custom_title VARCHAR(255)
+    `);
+    console.log('✅ custom_title 컬럼 추가 완료');
+
+    // show_header 컬럼 추가
+    await PostgreSQLService.query(`
+      ALTER TABLE dashboard_elements 
+      ADD COLUMN IF NOT EXISTS show_header BOOLEAN DEFAULT true
+    `);
+    console.log('✅ show_header 컬럼 추가 완료');
+
+    // 기존 데이터 업데이트
+    await PostgreSQLService.query(`
+      UPDATE dashboard_elements 
+      SET show_header = true 
+      WHERE show_header IS NULL
+    `);
+    console.log('✅ 기존 데이터 업데이트 완료');
+
+    console.log('✅ 대시보드 마이그레이션 완료!');
+  } catch (error) {
+    console.error('❌ 대시보드 마이그레이션 실패:', error);
+    // 이미 컬럼이 있는 경우는 무시
+    if (error instanceof Error && error.message.includes('already exists')) {
+      console.log('ℹ️ 컬럼이 이미 존재합니다.');
+    }
+  }
+}
+

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/DashboardService.ts

@@ -1,89 +1,100 @@
-import { v4 as uuidv4 } from 'uuid';
-import { PostgreSQLService } from '../database/PostgreSQLService';
-import { 
-  Dashboard, 
-  DashboardElement, 
-  CreateDashboardRequest, 
+import { v4 as uuidv4 } from "uuid";
+import { PostgreSQLService } from "../database/PostgreSQLService";
+import {
+  Dashboard,
+  DashboardElement,
+  CreateDashboardRequest,
   UpdateDashboardRequest,
-  DashboardListQuery 
-} from '../types/dashboard';
+  DashboardListQuery,
+} from "../types/dashboard";
 
 /**
  * 대시보드 서비스 - Raw Query 방식
  * PostgreSQL 직접 연결을 통한 CRUD 작업
  */
 export class DashboardService {
-  
   /**
    * 대시보드 생성
    */
-  static async createDashboard(data: CreateDashboardRequest, userId: string): Promise<Dashboard> {
+  static async createDashboard(
+    data: CreateDashboardRequest,
+    userId: string
+  ): Promise<Dashboard> {
     const dashboardId = uuidv4();
     const now = new Date();
-    
+
     try {
       // 트랜잭션으로 대시보드와 요소들을 함께 생성
       const result = await PostgreSQLService.transaction(async (client) => {
         // 1. 대시보드 메인 정보 저장
-        await client.query(`
+        await client.query(
+          `
           INSERT INTO dashboards (
             id, title, description, is_public, created_by, 
-            created_at, updated_at, tags, category, view_count
-          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
-        `, [
-          dashboardId,
-          data.title,
-          data.description || null,
-          data.isPublic || false,
-          userId,
-          now,
-          now,
-          JSON.stringify(data.tags || []),
-          data.category || null,
-          0
-        ]);
-        
+            created_at, updated_at, tags, category, view_count, settings
+          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
+        `,
+          [
+            dashboardId,
+            data.title,
+            data.description || null,
+            data.isPublic || false,
+            userId,
+            now,
+            now,
+            JSON.stringify(data.tags || []),
+            data.category || null,
+            0,
+            JSON.stringify(data.settings || {}),
+          ]
+        );
+
         // 2. 대시보드 요소들 저장
         if (data.elements && data.elements.length > 0) {
           for (let i = 0; i < data.elements.length; i++) {
             const element = data.elements[i];
             const elementId = uuidv4(); // 항상 새로운 UUID 생성
-            
-            await client.query(`
+
+            await client.query(
+              `
               INSERT INTO dashboard_elements (
                 id, dashboard_id, element_type, element_subtype,
                 position_x, position_y, width, height,
-                title, content, data_source_config, chart_config,
+                title, custom_title, show_header, content, data_source_config, chart_config,
                 display_order, created_at, updated_at
-              ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
-            `, [
-              elementId,
-              dashboardId,
-              element.type,
-              element.subtype,
-              element.position.x,
-              element.position.y,
-              element.size.width,
-              element.size.height,
-              element.title,
-              element.content || null,
-              JSON.stringify(element.dataSource || {}),
-              JSON.stringify(element.chartConfig || {}),
-              i,
-              now,
-              now
-            ]);
+              ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)
+            `,
+              [
+                elementId,
+                dashboardId,
+                element.type,
+                element.subtype,
+                element.position.x,
+                element.position.y,
+                element.size.width,
+                element.size.height,
+                element.title,
+                element.customTitle || null,
+                element.showHeader !== false, // 기본값 true
+                element.content || null,
+                JSON.stringify(element.dataSource || {}),
+                JSON.stringify(element.chartConfig || {}),
+                i,
+                now,
+                now,
+              ]
+            );
           }
         }
-        
+
         return dashboardId;
       });
-      
+
       // 생성된 대시보드 반환
       try {
         const dashboard = await this.getDashboardById(dashboardId, userId);
         if (!dashboard) {
-          console.error('대시보드 생성은 성공했으나 조회에 실패:', dashboardId);
+          console.error("대시보드 생성은 성공했으나 조회에 실패:", dashboardId);
           // 생성은 성공했으므로 기본 정보만이라도 반환
           return {
             id: dashboardId,
@@ -97,13 +108,13 @@ export class DashboardService {
             tags: data.tags || [],
             category: data.category,
             viewCount: 0,
-            elements: data.elements || []
+            elements: data.elements || [],
           };
         }
-        
+
         return dashboard;
       } catch (fetchError) {
-        console.error('생성된 대시보드 조회 중 오류:', fetchError);
+        console.error("생성된 대시보드 조회 중 오류:", fetchError);
         // 생성은 성공했으므로 기본 정보 반환
         return {
           id: dashboardId,
@@ -117,76 +128,79 @@ export class DashboardService {
           tags: data.tags || [],
           category: data.category,
           viewCount: 0,
-          elements: data.elements || []
+          elements: data.elements || [],
         };
       }
-      
     } catch (error) {
-      console.error('Dashboard creation error:', error);
+      console.error("Dashboard creation error:", error);
       throw error;
     }
   }
-  
+
   /**
    * 대시보드 목록 조회
    */
   static async getDashboards(query: DashboardListQuery, userId?: string) {
-    const { 
-      page = 1, 
-      limit = 20, 
-      search, 
-      category, 
-      isPublic, 
-      createdBy 
+    const {
+      page = 1,
+      limit = 20,
+      search,
+      category,
+      isPublic,
+      createdBy,
     } = query;
-    
+
     const offset = (page - 1) * limit;
-    
+
     try {
       // 기본 WHERE 조건
-      let whereConditions = ['d.deleted_at IS NULL'];
+      let whereConditions = ["d.deleted_at IS NULL"];
       let params: any[] = [];
       let paramIndex = 1;
-      
+
       // 권한 필터링
       if (userId) {
-        whereConditions.push(`(d.created_by = $${paramIndex} OR d.is_public = true)`);
+        whereConditions.push(
+          `(d.created_by = $${paramIndex} OR d.is_public = true)`
+        );
         params.push(userId);
         paramIndex++;
       } else {
-        whereConditions.push('d.is_public = true');
+        whereConditions.push("d.is_public = true");
       }
-      
+
       // 검색 조건
       if (search) {
-        whereConditions.push(`(d.title ILIKE $${paramIndex} OR d.description ILIKE $${paramIndex + 1})`);
+        whereConditions.push(
+          `(d.title ILIKE $${paramIndex} OR d.description ILIKE $${paramIndex + 1})`
+        );
         params.push(`%${search}%`, `%${search}%`);
         paramIndex += 2;
       }
-      
+
       // 카테고리 필터
       if (category) {
         whereConditions.push(`d.category = $${paramIndex}`);
         params.push(category);
         paramIndex++;
       }
-      
+
       // 공개/비공개 필터
-      if (typeof isPublic === 'boolean') {
+      if (typeof isPublic === "boolean") {
         whereConditions.push(`d.is_public = $${paramIndex}`);
         params.push(isPublic);
         paramIndex++;
       }
-      
+
       // 작성자 필터
       if (createdBy) {
         whereConditions.push(`d.created_by = $${paramIndex}`);
         params.push(createdBy);
         paramIndex++;
       }
-      
-      const whereClause = whereConditions.join(' AND ');
-      
+
+      const whereClause = whereConditions.join(" AND ");
+
       // 대시보드 목록 조회 (users 테이블 조인 제거)
       const dashboardQuery = `
         SELECT 
@@ -211,22 +225,23 @@ export class DashboardService {
         ORDER BY d.updated_at DESC
         LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
       `;
-      
-      const dashboardResult = await PostgreSQLService.query(
-        dashboardQuery, 
-        [...params, limit, offset]
-      );
-      
+
+      const dashboardResult = await PostgreSQLService.query(dashboardQuery, [
+        ...params,
+        limit,
+        offset,
+      ]);
+
       // 전체 개수 조회
       const countQuery = `
         SELECT COUNT(DISTINCT d.id) as total
         FROM dashboards d
         WHERE ${whereClause}
       `;
-      
+
       const countResult = await PostgreSQLService.query(countQuery, params);
-      const total = parseInt(countResult.rows[0]?.total || '0');
-      
+      const total = parseInt(countResult.rows[0]?.total || "0");
+
       return {
         dashboards: dashboardResult.rows.map((row: any) => ({
           id: row.id,
@@ -237,33 +252,36 @@ export class DashboardService {
           createdBy: row.created_by,
           createdAt: row.created_at,
           updatedAt: row.updated_at,
-          tags: JSON.parse(row.tags || '[]'),
+          tags: JSON.parse(row.tags || "[]"),
           category: row.category,
-          viewCount: parseInt(row.view_count || '0'),
-          elementsCount: parseInt(row.elements_count || '0')
+          viewCount: parseInt(row.view_count || "0"),
+          elementsCount: parseInt(row.elements_count || "0"),
         })),
         pagination: {
           page,
           limit,
           total,
-          totalPages: Math.ceil(total / limit)
-        }
+          totalPages: Math.ceil(total / limit),
+        },
       };
     } catch (error) {
-      console.error('Dashboard list error:', error);
+      console.error("Dashboard list error:", error);
       throw error;
     }
   }
-  
+
   /**
    * 대시보드 상세 조회
    */
-  static async getDashboardById(dashboardId: string, userId?: string): Promise<Dashboard | null> {
+  static async getDashboardById(
+    dashboardId: string,
+    userId?: string
+  ): Promise<Dashboard | null> {
     try {
       // 1. 대시보드 기본 정보 조회 (권한 체크 포함)
       let dashboardQuery: string;
       let dashboardParams: any[];
-      
+
       if (userId) {
         dashboardQuery = `
           SELECT d.*
@@ -281,43 +299,52 @@ export class DashboardService {
         `;
         dashboardParams = [dashboardId];
       }
-      
-      const dashboardResult = await PostgreSQLService.query(dashboardQuery, dashboardParams);
-      
+
+      const dashboardResult = await PostgreSQLService.query(
+        dashboardQuery,
+        dashboardParams
+      );
+
       if (dashboardResult.rows.length === 0) {
         return null;
       }
-      
+
       const dashboard = dashboardResult.rows[0];
-      
+
       // 2. 대시보드 요소들 조회
       const elementsQuery = `
         SELECT * FROM dashboard_elements
         WHERE dashboard_id = $1
         ORDER BY display_order ASC
       `;
-      
-      const elementsResult = await PostgreSQLService.query(elementsQuery, [dashboardId]);
-      
+
+      const elementsResult = await PostgreSQLService.query(elementsQuery, [
+        dashboardId,
+      ]);
+
       // 3. 요소 데이터 변환
-      const elements: DashboardElement[] = elementsResult.rows.map((row: any) => ({
-        id: row.id,
-        type: row.element_type,
-        subtype: row.element_subtype,
-        position: {
-          x: row.position_x,
-          y: row.position_y
-        },
-        size: {
-          width: row.width,
-          height: row.height
-        },
-        title: row.title,
-        content: row.content,
-        dataSource: JSON.parse(row.data_source_config || '{}'),
-        chartConfig: JSON.parse(row.chart_config || '{}')
-      }));
-      
+      const elements: DashboardElement[] = elementsResult.rows.map(
+        (row: any) => ({
+          id: row.id,
+          type: row.element_type,
+          subtype: row.element_subtype,
+          position: {
+            x: row.position_x,
+            y: row.position_y,
+          },
+          size: {
+            width: row.width,
+            height: row.height,
+          },
+          title: row.title,
+          customTitle: row.custom_title || undefined,
+          showHeader: row.show_header !== false, // 기본값 true
+          content: row.content,
+          dataSource: JSON.parse(row.data_source_config || "{}"),
+          chartConfig: JSON.parse(row.chart_config || "{}"),
+        })
+      );
+
       return {
         id: dashboard.id,
         title: dashboard.title,
@@ -327,44 +354,48 @@ export class DashboardService {
         createdBy: dashboard.created_by,
         createdAt: dashboard.created_at,
         updatedAt: dashboard.updated_at,
-        tags: JSON.parse(dashboard.tags || '[]'),
+        tags: JSON.parse(dashboard.tags || "[]"),
         category: dashboard.category,
-        viewCount: parseInt(dashboard.view_count || '0'),
-        elements
+        viewCount: parseInt(dashboard.view_count || "0"),
+        settings: dashboard.settings || undefined,
+        elements,
       };
     } catch (error) {
-      console.error('Dashboard get error:', error);
+      console.error("Dashboard get error:", error);
       throw error;
     }
   }
-  
+
   /**
    * 대시보드 업데이트
    */
   static async updateDashboard(
-    dashboardId: string, 
-    data: UpdateDashboardRequest, 
+    dashboardId: string,
+    data: UpdateDashboardRequest,
     userId: string
   ): Promise<Dashboard | null> {
     try {
       const result = await PostgreSQLService.transaction(async (client) => {
         // 권한 체크
-        const authCheckResult = await client.query(`
+        const authCheckResult = await client.query(
+          `
           SELECT id FROM dashboards 
           WHERE id = $1 AND created_by = $2 AND deleted_at IS NULL
-        `, [dashboardId, userId]);
-        
+        `,
+          [dashboardId, userId]
+        );
+
         if (authCheckResult.rows.length === 0) {
-          throw new Error('대시보드를 찾을 수 없거나 수정 권한이 없습니다.');
+          throw new Error("대시보드를 찾을 수 없거나 수정 권한이 없습니다.");
         }
-        
+
         const now = new Date();
-        
+
         // 1. 대시보드 메인 정보 업데이트
         const updateFields: string[] = [];
         const updateParams: any[] = [];
         let paramIndex = 1;
-        
+
         if (data.title !== undefined) {
           updateFields.push(`title = $${paramIndex}`);
           updateParams.push(data.title);
@@ -390,120 +421,143 @@ export class DashboardService {
           updateParams.push(data.category);
           paramIndex++;
         }
-        
+        if (data.settings !== undefined) {
+          updateFields.push(`settings = $${paramIndex}`);
+          updateParams.push(JSON.stringify(data.settings));
+          paramIndex++;
+        }
+
         updateFields.push(`updated_at = $${paramIndex}`);
         updateParams.push(now);
         paramIndex++;
-        
+
         updateParams.push(dashboardId);
-        
-        if (updateFields.length > 1) { // updated_at 외에 다른 필드가 있는 경우
+
+        if (updateFields.length > 1) {
+          // updated_at 외에 다른 필드가 있는 경우
           const updateQuery = `
             UPDATE dashboards 
-            SET ${updateFields.join(', ')}
+            SET ${updateFields.join(", ")}
             WHERE id = $${paramIndex}
           `;
-          
+
           await client.query(updateQuery, updateParams);
         }
-        
+
         // 2. 요소 업데이트 (있는 경우)
         if (data.elements) {
           // 기존 요소들 삭제
-          await client.query(`
+          await client.query(
+            `
             DELETE FROM dashboard_elements WHERE dashboard_id = $1
-          `, [dashboardId]);
-          
+          `,
+            [dashboardId]
+          );
+
           // 새 요소들 추가
           for (let i = 0; i < data.elements.length; i++) {
             const element = data.elements[i];
             const elementId = uuidv4();
-            
-            await client.query(`
+
+            await client.query(
+              `
               INSERT INTO dashboard_elements (
                 id, dashboard_id, element_type, element_subtype,
                 position_x, position_y, width, height,
-                title, content, data_source_config, chart_config,
+                title, custom_title, show_header, content, data_source_config, chart_config,
                 display_order, created_at, updated_at
-              ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
-            `, [
-              elementId,
-              dashboardId,
-              element.type,
-              element.subtype,
-              element.position.x,
-              element.position.y,
-              element.size.width,
-              element.size.height,
-              element.title,
-              element.content || null,
-              JSON.stringify(element.dataSource || {}),
-              JSON.stringify(element.chartConfig || {}),
-              i,
-              now,
-              now
-            ]);
+              ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)
+            `,
+              [
+                elementId,
+                dashboardId,
+                element.type,
+                element.subtype,
+                element.position.x,
+                element.position.y,
+                element.size.width,
+                element.size.height,
+                element.title,
+                element.customTitle || null,
+                element.showHeader !== false, // 기본값 true
+                element.content || null,
+                JSON.stringify(element.dataSource || {}),
+                JSON.stringify(element.chartConfig || {}),
+                i,
+                now,
+                now,
+              ]
+            );
           }
         }
-        
+
         return dashboardId;
       });
-      
+
       // 업데이트된 대시보드 반환
       return await this.getDashboardById(dashboardId, userId);
-      
     } catch (error) {
-      console.error('Dashboard update error:', error);
+      console.error("Dashboard update error:", error);
       throw error;
     }
   }
-  
+
   /**
    * 대시보드 삭제 (소프트 삭제)
    */
-  static async deleteDashboard(dashboardId: string, userId: string): Promise<boolean> {
+  static async deleteDashboard(
+    dashboardId: string,
+    userId: string
+  ): Promise<boolean> {
     try {
       const now = new Date();
-      
-      const result = await PostgreSQLService.query(`
+
+      const result = await PostgreSQLService.query(
+        `
         UPDATE dashboards 
         SET deleted_at = $1, updated_at = $2
         WHERE id = $3 AND created_by = $4 AND deleted_at IS NULL
-      `, [now, now, dashboardId, userId]);
-      
+      `,
+        [now, now, dashboardId, userId]
+      );
+
       return (result.rowCount || 0) > 0;
     } catch (error) {
-      console.error('Dashboard delete error:', error);
+      console.error("Dashboard delete error:", error);
       throw error;
     }
   }
-  
+
   /**
    * 조회수 증가
    */
   static async incrementViewCount(dashboardId: string): Promise<void> {
     try {
-      await PostgreSQLService.query(`
+      await PostgreSQLService.query(
+        `
         UPDATE dashboards 
         SET view_count = view_count + 1 
         WHERE id = $1 AND deleted_at IS NULL
-      `, [dashboardId]);
+      `,
+        [dashboardId]
+      );
     } catch (error) {
-      console.error('View count increment error:', error);
+      console.error("View count increment error:", error);
       // 조회수 증가 실패는 치명적이지 않으므로 에러를 던지지 않음
     }
   }
-  
+
   /**
    * 사용자 권한 체크
    */
   static async checkUserPermission(
-    dashboardId: string, 
-    userId: string, 
-    requiredPermission: 'view' | 'edit' | 'admin' = 'view'
+    dashboardId: string,
+    userId: string,
+    requiredPermission: "view" | "edit" | "admin" = "view"
   ): Promise<boolean> {
     try {
-      const result = await PostgreSQLService.query(`
+      const result = await PostgreSQLService.query(
+        `
         SELECT 
           CASE 
             WHEN d.created_by = $2 THEN 'admin'
@@ -512,23 +566,26 @@ export class DashboardService {
           END as permission
         FROM dashboards d
         WHERE d.id = $1 AND d.deleted_at IS NULL
-      `, [dashboardId, userId]);
-      
+      `,
+        [dashboardId, userId]
+      );
+
       if (result.rows.length === 0) {
         return false;
       }
-      
+
       const userPermission = result.rows[0].permission;
-      
+
       // 권한 레벨 체크
-      const permissionLevels = { 'view': 1, 'edit': 2, 'admin': 3 };
-      const userLevel = permissionLevels[userPermission as keyof typeof permissionLevels] || 0;
+      const permissionLevels = { view: 1, edit: 2, admin: 3 };
+      const userLevel =
+        permissionLevels[userPermission as keyof typeof permissionLevels] || 0;
       const requiredLevel = permissionLevels[requiredPermission];
-      
+
       return userLevel >= requiredLevel;
     } catch (error) {
-      console.error('Permission check error:', error);
+      console.error("Permission check error:", error);
       return false;
     }
   }
-}
+}

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;
+    }
+  }
+}

backend-node/src/services/bookingService.ts

@@ -53,13 +53,20 @@ export class BookingService {
   }
 
   private ensureDataDirectory(): void {
-    if (!fs.existsSync(BOOKING_DIR)) {
-      fs.mkdirSync(BOOKING_DIR, { recursive: true });
-      logger.info(`📁 예약 데이터 디렉토리 생성: ${BOOKING_DIR}`);
-    }
-    if (!fs.existsSync(BOOKING_FILE)) {
-      fs.writeFileSync(BOOKING_FILE, JSON.stringify([], null, 2));
-      logger.info(`📄 예약 파일 생성: ${BOOKING_FILE}`);
+    try {
+      if (!fs.existsSync(BOOKING_DIR)) {
+        fs.mkdirSync(BOOKING_DIR, { recursive: true, mode: 0o755 });
+        logger.info(`📁 예약 데이터 디렉토리 생성: ${BOOKING_DIR}`);
+      }
+      if (!fs.existsSync(BOOKING_FILE)) {
+        fs.writeFileSync(BOOKING_FILE, JSON.stringify([], null, 2), {
+          mode: 0o644,
+        });
+        logger.info(`📄 예약 파일 생성: ${BOOKING_FILE}`);
+      }
+    } catch (error) {
+      logger.error(`❌ 예약 디렉토리 생성 실패: ${BOOKING_DIR}`, error);
+      throw error;
     }
   }
 
@@ -111,13 +118,16 @@ export class BookingService {
     priority?: string;
   }): Promise<{ bookings: BookingRequest[]; newCount: number }> {
     try {
-      const bookings = DATA_SOURCE === "database"
-        ? await this.loadBookingsFromDB(filter)
-        : this.loadBookingsFromFile(filter);
+      const bookings =
+        DATA_SOURCE === "database"
+          ? await this.loadBookingsFromDB(filter)
+          : this.loadBookingsFromFile(filter);
 
       bookings.sort((a, b) => {
         if (a.priority !== b.priority) return a.priority === "urgent" ? -1 : 1;
-        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        return (
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
       });
 
       const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
@@ -145,7 +155,10 @@ export class BookingService {
     }
   }
 
-  public async rejectBooking(id: string, reason?: string): Promise<BookingRequest> {
+  public async rejectBooking(
+    id: string,
+    reason?: string
+  ): Promise<BookingRequest> {
     try {
       if (DATA_SOURCE === "database") {
         return await this.rejectBookingDB(id, reason);
@@ -194,9 +207,15 @@ export class BookingService {
       scheduledTime: new Date(row.scheduledTime).toISOString(),
       createdAt: new Date(row.createdAt).toISOString(),
       updatedAt: new Date(row.updatedAt).toISOString(),
-      acceptedAt: row.acceptedAt ? new Date(row.acceptedAt).toISOString() : undefined,
-      rejectedAt: row.rejectedAt ? new Date(row.rejectedAt).toISOString() : undefined,
-      completedAt: row.completedAt ? new Date(row.completedAt).toISOString() : undefined,
+      acceptedAt: row.acceptedAt
+        ? new Date(row.acceptedAt).toISOString()
+        : undefined,
+      rejectedAt: row.rejectedAt
+        ? new Date(row.rejectedAt).toISOString()
+        : undefined,
+      completedAt: row.completedAt
+        ? new Date(row.completedAt).toISOString()
+        : undefined,
     }));
   }
 
@@ -230,7 +249,10 @@ export class BookingService {
     };
   }
 
-  private async rejectBookingDB(id: string, reason?: string): Promise<BookingRequest> {
+  private async rejectBookingDB(
+    id: string,
+    reason?: string
+  ): Promise<BookingRequest> {
     const rows = await query(
       `UPDATE booking_requests 
        SET status = 'rejected', rejected_at = NOW(), updated_at = NOW(), rejection_reason = $2

backend-node/src/services/mailAccountFileService.ts

@@ -33,11 +33,7 @@ class MailAccountFileService {
     try {
       await fs.access(this.accountsDir);
     } catch {
-      try {
-        await fs.mkdir(this.accountsDir, { recursive: true });
-      } catch (error) {
-        console.error("메일 계정 디렉토리 생성 실패:", error);
-      }
+      await fs.mkdir(this.accountsDir, { recursive: true, mode: 0o755 });
     }
   }
 

backend-node/src/services/mailReceiveBasicService.ts

@@ -59,11 +59,7 @@ export class MailReceiveBasicService {
     try {
       await fs.access(this.attachmentsDir);
     } catch {
-      try {
-        await fs.mkdir(this.attachmentsDir, { recursive: true });
-      } catch (error) {
-        console.error("메일 첨부파일 디렉토리 생성 실패:", error);
-      }
+      await fs.mkdir(this.attachmentsDir, { recursive: true, mode: 0o755 });
     }
   }
 

backend-node/src/services/mailSentHistoryService.ts

@@ -20,15 +20,13 @@ const SENT_MAIL_DIR =
 
 class MailSentHistoryService {
   constructor() {
-    // 디렉토리 생성 (없으면) - try-catch로 권한 에러 방지
     try {
       if (!fs.existsSync(SENT_MAIL_DIR)) {
-        fs.mkdirSync(SENT_MAIL_DIR, { recursive: true });
+        fs.mkdirSync(SENT_MAIL_DIR, { recursive: true, mode: 0o755 });
       }
     } catch (error) {
       console.error("메일 발송 이력 디렉토리 생성 실패:", error);
-      // 디렉토리가 이미 존재하거나 권한이 없어도 서비스는 계속 실행
-      // 실제 파일 쓰기 시점에 에러 처리
+      throw error;
     }
   }
 
@@ -45,13 +43,15 @@ class MailSentHistoryService {
     };
 
     try {
-      // 디렉토리가 없으면 다시 시도
       if (!fs.existsSync(SENT_MAIL_DIR)) {
-        fs.mkdirSync(SENT_MAIL_DIR, { recursive: true });
+        fs.mkdirSync(SENT_MAIL_DIR, { recursive: true, mode: 0o755 });
       }
 
       const filePath = path.join(SENT_MAIL_DIR, `${history.id}.json`);
-      fs.writeFileSync(filePath, JSON.stringify(history, null, 2), "utf-8");
+      fs.writeFileSync(filePath, JSON.stringify(history, null, 2), {
+        encoding: "utf-8",
+        mode: 0o644,
+      });
 
       console.log("발송 이력 저장:", history.id);
     } catch (error) {

backend-node/src/services/mailTemplateFileService.ts

@@ -54,17 +54,13 @@ class MailTemplateFileService {
   }
 
   /**
-   * 템플릿 디렉토리 생성 (없으면) - try-catch로 권한 에러 방지
+   * 템플릿 디렉토리 생성
    */
   private async ensureDirectoryExists() {
     try {
       await fs.access(this.templatesDir);
     } catch {
-      try {
-        await fs.mkdir(this.templatesDir, { recursive: true });
-      } catch (error) {
-        console.error("메일 템플릿 디렉토리 생성 실패:", error);
-      }
+      await fs.mkdir(this.templatesDir, { recursive: true, mode: 0o755 });
     }
   }
 

backend-node/src/services/todoService.ts

@@ -61,13 +61,20 @@ export class TodoService {
    * 데이터 디렉토리 생성 (파일 모드)
    */
   private ensureDataDirectory(): void {
-    if (!fs.existsSync(TODO_DIR)) {
-      fs.mkdirSync(TODO_DIR, { recursive: true });
-      logger.info(`📁 To-Do 데이터 디렉토리 생성: ${TODO_DIR}`);
-    }
-    if (!fs.existsSync(TODO_FILE)) {
-      fs.writeFileSync(TODO_FILE, JSON.stringify([], null, 2));
-      logger.info(`📄 To-Do 파일 생성: ${TODO_FILE}`);
+    try {
+      if (!fs.existsSync(TODO_DIR)) {
+        fs.mkdirSync(TODO_DIR, { recursive: true, mode: 0o755 });
+        logger.info(`📁 To-Do 데이터 디렉토리 생성: ${TODO_DIR}`);
+      }
+      if (!fs.existsSync(TODO_FILE)) {
+        fs.writeFileSync(TODO_FILE, JSON.stringify([], null, 2), {
+          mode: 0o644,
+        });
+        logger.info(`📄 To-Do 파일 생성: ${TODO_FILE}`);
+      }
+    } catch (error) {
+      logger.error(`❌ To-Do 디렉토리 생성 실패: ${TODO_DIR}`, error);
+      throw error;
     }
   }
 
@@ -80,15 +87,17 @@ export class TodoService {
     assignedTo?: string;
   }): Promise<TodoListResponse> {
     try {
-      const todos = DATA_SOURCE === "database" 
-        ? await this.loadTodosFromDB(filter) 
-        : this.loadTodosFromFile(filter);
+      const todos =
+        DATA_SOURCE === "database"
+          ? await this.loadTodosFromDB(filter)
+          : this.loadTodosFromFile(filter);
 
       // 정렬: 긴급 > 우선순위 > 순서
       todos.sort((a, b) => {
         if (a.isUrgent !== b.isUrgent) return a.isUrgent ? -1 : 1;
         const priorityOrder = { urgent: 0, high: 1, normal: 2, low: 3 };
-        if (a.priority !== b.priority) return priorityOrder[a.priority] - priorityOrder[b.priority];
+        if (a.priority !== b.priority)
+          return priorityOrder[a.priority] - priorityOrder[b.priority];
         return a.order - b.order;
       });
 
@@ -124,7 +133,8 @@ export class TodoService {
         await this.createTodoDB(newTodo);
       } else {
         const todos = this.loadTodosFromFile();
-        newTodo.order = todos.length > 0 ? Math.max(...todos.map((t) => t.order)) + 1 : 0;
+        newTodo.order =
+          todos.length > 0 ? Math.max(...todos.map((t) => t.order)) + 1 : 0;
         todos.push(newTodo);
         this.saveTodosToFile(todos);
       }
@@ -140,7 +150,10 @@ export class TodoService {
   /**
    * To-Do 항목 수정
    */
-  public async updateTodo(id: string, updates: Partial<TodoItem>): Promise<TodoItem> {
+  public async updateTodo(
+    id: string,
+    updates: Partial<TodoItem>
+  ): Promise<TodoItem> {
     try {
       if (DATA_SOURCE === "database") {
         return await this.updateTodoDB(id, updates);
@@ -231,7 +244,9 @@ export class TodoService {
       dueDate: row.dueDate ? new Date(row.dueDate).toISOString() : undefined,
       createdAt: new Date(row.createdAt).toISOString(),
       updatedAt: new Date(row.updatedAt).toISOString(),
-      completedAt: row.completedAt ? new Date(row.completedAt).toISOString() : undefined,
+      completedAt: row.completedAt
+        ? new Date(row.completedAt).toISOString()
+        : undefined,
     }));
   }
 
@@ -263,7 +278,10 @@ export class TodoService {
     );
   }
 
-  private async updateTodoDB(id: string, updates: Partial<TodoItem>): Promise<TodoItem> {
+  private async updateTodoDB(
+    id: string,
+    updates: Partial<TodoItem>
+  ): Promise<TodoItem> {
     const setClauses: string[] = ["updated_at = NOW()"];
     const params: any[] = [];
     let paramIndex = 1;
@@ -327,12 +345,17 @@ export class TodoService {
       dueDate: row.dueDate ? new Date(row.dueDate).toISOString() : undefined,
       createdAt: new Date(row.createdAt).toISOString(),
       updatedAt: new Date(row.updatedAt).toISOString(),
-      completedAt: row.completedAt ? new Date(row.completedAt).toISOString() : undefined,
+      completedAt: row.completedAt
+        ? new Date(row.completedAt).toISOString()
+        : undefined,
     };
   }
 
   private async deleteTodoDB(id: string): Promise<void> {
-    const rows = await query("DELETE FROM todo_items WHERE id = $1 RETURNING id", [id]);
+    const rows = await query(
+      "DELETE FROM todo_items WHERE id = $1 RETURNING id",
+      [id]
+    );
     if (rows.length === 0) {
       throw new Error(`To-Do 항목을 찾을 수 없습니다: ${id}`);
     }
@@ -443,7 +466,10 @@ export class TodoService {
       inProgress: todos.filter((t) => t.status === "in_progress").length,
       completed: todos.filter((t) => t.status === "completed").length,
       urgent: todos.filter((t) => t.isUrgent).length,
-      overdue: todos.filter((t) => t.dueDate && new Date(t.dueDate) < now && t.status !== "completed").length,
+      overdue: todos.filter(
+        (t) =>
+          t.dueDate && new Date(t.dueDate) < now && t.status !== "completed"
+      ).length,
     };
   }
 }

backend-node/src/types/dashboard.ts

@@ -4,8 +4,8 @@
 
 export interface DashboardElement {
   id: string;
-  type: 'chart' | 'widget';
-  subtype: 'bar' | 'pie' | 'line' | 'exchange' | 'weather';
+  type: "chart" | "widget";
+  subtype: "bar" | "pie" | "line" | "exchange" | "weather";
   position: {
     x: number;
     y: number;
@@ -15,9 +15,11 @@ export interface DashboardElement {
     height: number;
   };
   title: string;
+  customTitle?: string; // 사용자 정의 제목 (옵션)
+  showHeader?: boolean; // 헤더 표시 여부 (기본값: true)
   content?: string;
   dataSource?: {
-    type: 'api' | 'database' | 'static';
+    type: "api" | "database" | "static";
     endpoint?: string;
     query?: string;
     refreshInterval?: number;
@@ -28,7 +30,7 @@ export interface DashboardElement {
     xAxis?: string;
     yAxis?: string;
     groupBy?: string;
-    aggregation?: 'sum' | 'avg' | 'count' | 'max' | 'min';
+    aggregation?: "sum" | "avg" | "count" | "max" | "min";
     colors?: string[];
     title?: string;
     showLegend?: boolean;
@@ -48,6 +50,10 @@ export interface Dashboard {
   tags?: string[];
   category?: string;
   viewCount: number;
+  settings?: {
+    resolution?: string;
+    backgroundColor?: string;
+  };
   elements: DashboardElement[];
 }
 
@@ -58,6 +64,10 @@ export interface CreateDashboardRequest {
   elements: DashboardElement[];
   tags?: string[];
   category?: string;
+  settings?: {
+    resolution?: string;
+    backgroundColor?: string;
+  };
 }
 
 export interface UpdateDashboardRequest {
@@ -67,6 +77,10 @@ export interface UpdateDashboardRequest {
   elements?: DashboardElement[];
   tags?: string[];
   category?: string;
+  settings?: {
+    resolution?: string;
+    backgroundColor?: string;
+  };
 }
 
 export interface DashboardListQuery {
@@ -83,7 +97,7 @@ export interface DashboardShare {
   dashboardId: string;
   sharedWithUser?: string;
   sharedWithRole?: string;
-  permissionLevel: 'view' | 'edit' | 'admin';
+  permissionLevel: "view" | "edit" | "admin";
   createdBy: string;
   createdAt: string;
   expiresAt?: string;

docker/deploy/backend.Dockerfile

@@ -34,14 +34,11 @@ COPY --from=build /app/dist ./dist
 # Copy package files
 COPY package*.json ./
 
-# Create logs, uploads, and data directories and set permissions (use existing node user with UID 1000)
-RUN mkdir -p logs \
-    uploads/mail-attachments \
-    uploads/mail-templates \
-    uploads/mail-accounts \
-    data/mail-sent && \
-    chown -R node:node logs uploads data && \
-    chmod -R 755 logs uploads data
+# 루트 디렉토리만 생성하고 node 유저에게 쓰기 권한 부여
+# 하위 디렉토리는 애플리케이션이 런타임에 자동 생성
+RUN mkdir -p logs uploads data && \
+    chown -R node:node /app && \
+    chmod -R 755 /app
 
 EXPOSE 3001
 USER node

docker/deploy/docker-compose.yml

@@ -20,8 +20,8 @@ services:
       LOG_LEVEL: info
       ENCRYPTION_KEY: ilshin-plm-mail-encryption-key-32characters-2024-secure
     volumes:
-      - /home/vexplor/backend_data/uploads:/app/uploads
-      - /home/vexplor/backend_data/data:/app/data
+      - backend_uploads:/app/uploads
+      - backend_data:/app/data
     labels:
       - traefik.enable=true
       - traefik.http.routers.backend.rule=Host(`api.vexplor.com`)
@@ -46,7 +46,7 @@ services:
       PORT: "3000"
       HOSTNAME: 0.0.0.0
     volumes:
-      - /home/vexplor/frontend_data:/app/data
+      - frontend_data:/app/data
     labels:
       - traefik.enable=true
       - traefik.http.routers.frontend.rule=Host(`v1.vexplor.com`)
@@ -55,6 +55,14 @@ services:
       - traefik.http.routers.frontend.tls.certresolver=le
       - traefik.http.services.frontend.loadbalancer.server.port=3000
 
+volumes:
+  backend_uploads:
+    driver: local
+  backend_data:
+    driver: local
+  frontend_data:
+    driver: local
+
 networks:
   default:
     name: toktork_server_default

docker/dev/docker-compose.backend.mac.yml

@@ -20,7 +20,7 @@ services:
       - LOG_LEVEL=debug
       - ENCRYPTION_KEY=ilshin-plm-mail-encryption-key-32characters-2024-secure
       - KMA_API_KEY=ogdXr2e9T4iHV69nvV-IwA
-      - ITS_API_KEY=${ITS_API_KEY:-}
+      - ITS_API_KEY=d6b9befec3114d648284674b8fddcc32
       - EXPRESSWAY_API_KEY=${EXPRESSWAY_API_KEY:-}
     volumes:
       - ../../backend-node:/app # 개발 모드: 코드 변경 시 자동 반영

docker/prod/backend.Dockerfile

@@ -37,8 +37,11 @@ COPY --from=build /app/dist ./dist
 # Copy package files
 COPY package*.json ./
 
-# Create logs and uploads directories and set permissions
-RUN mkdir -p logs uploads && chown -R appuser:appgroup logs uploads && chmod -R 755 logs uploads
+# 루트 디렉토리만 생성하고 appuser에게 쓰기 권한 부여
+# 하위 디렉토리는 애플리케이션이 런타임에 자동 생성
+RUN mkdir -p logs uploads data && \
+    chown -R appuser:appgroup /app && \
+    chmod -R 755 /app
 
 EXPOSE 8080
 USER appuser

frontend/app/(main)/admin/dashboard/page.tsx

@@ -15,7 +15,18 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Plus, Search, MoreVertical, Edit, Trash2, Copy, Eye } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Plus, Search, MoreVertical, Edit, Trash2, Copy, CheckCircle2 } from "lucide-react";
 
 /**
  * 대시보드 관리 페이지
@@ -29,6 +40,12 @@ export default function DashboardListPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [error, setError] = useState<string | null>(null);
 
+  // 모달 상태
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null);
+  const [successDialogOpen, setSuccessDialogOpen] = useState(false);
+  const [successMessage, setSuccessMessage] = useState("");
+
   // 대시보드 목록 로드
   const loadDashboards = async () => {
     try {
@@ -48,38 +65,51 @@ export default function DashboardListPage() {
     loadDashboards();
   }, [searchTerm]);
 
-  // 대시보드 삭제
-  const handleDelete = async (id: string, title: string) => {
-    if (!confirm(`"${title}" 대시보드를 삭제하시겠습니까?`)) {
-      return;
-    }
+  // 대시보드 삭제 확인 모달 열기
+  const handleDeleteClick = (id: string, title: string) => {
+    setDeleteTarget({ id, title });
+    setDeleteDialogOpen(true);
+  };
+
+  // 대시보드 삭제 실행
+  const handleDeleteConfirm = async () => {
+    if (!deleteTarget) return;
 
     try {
-      await dashboardApi.deleteDashboard(id);
-      alert("대시보드가 삭제되었습니다.");
+      await dashboardApi.deleteDashboard(deleteTarget.id);
+      setDeleteDialogOpen(false);
+      setDeleteTarget(null);
+      setSuccessMessage("대시보드가 삭제되었습니다.");
+      setSuccessDialogOpen(true);
       loadDashboards();
     } catch (err) {
       console.error("Failed to delete dashboard:", err);
-      alert("대시보드 삭제에 실패했습니다.");
+      setDeleteDialogOpen(false);
+      setError("대시보드 삭제에 실패했습니다.");
     }
   };
 
   // 대시보드 복사
   const handleCopy = async (dashboard: Dashboard) => {
     try {
+      // 전체 대시보드 정보(요소 포함)를 가져오기
+      const fullDashboard = await dashboardApi.getDashboard(dashboard.id);
+
       const newDashboard = await dashboardApi.createDashboard({
-        title: `${dashboard.title} (복사본)`,
-        description: dashboard.description,
-        elements: dashboard.elements || [],
+        title: `${fullDashboard.title} (복사본)`,
+        description: fullDashboard.description,
+        elements: fullDashboard.elements || [],
         isPublic: false,
-        tags: dashboard.tags,
-        category: dashboard.category,
+        tags: fullDashboard.tags,
+        category: fullDashboard.category,
+        settings: (fullDashboard as any).settings, // 해상도와 배경색 설정도 복사
       });
-      alert("대시보드가 복사되었습니다.");
+      setSuccessMessage("대시보드가 복사되었습니다.");
+      setSuccessDialogOpen(true);
       loadDashboards();
     } catch (err) {
       console.error("Failed to copy dashboard:", err);
-      alert("대시보드 복사에 실패했습니다.");
+      setError("대시보드 복사에 실패했습니다.");
     }
   };
 
@@ -156,8 +186,6 @@ export default function DashboardListPage() {
                 <TableRow>
                   <TableHead>제목</TableHead>
                   <TableHead>설명</TableHead>
-                  <TableHead>요소 수</TableHead>
-                  <TableHead>상태</TableHead>
                   <TableHead>생성일</TableHead>
                   <TableHead>수정일</TableHead>
                   <TableHead className="w-[80px]">작업</TableHead>
@@ -166,29 +194,10 @@ export default function DashboardListPage() {
               <TableBody>
                 {dashboards.map((dashboard) => (
                   <TableRow key={dashboard.id} className="cursor-pointer hover:bg-gray-50">
-                    <TableCell className="font-medium">
-                      <div className="flex items-center gap-2">
-                        {dashboard.title}
-                        {dashboard.isPublic && (
-                          <Badge variant="outline" className="text-xs">
-                            공개
-                          </Badge>
-                        )}
-                      </div>
-                    </TableCell>
+                    <TableCell className="font-medium">{dashboard.title}</TableCell>
                     <TableCell className="max-w-md truncate text-sm text-gray-500">
                       {dashboard.description || "-"}
                     </TableCell>
-                    <TableCell>
-                      <Badge variant="secondary">{dashboard.elementsCount || 0}개</Badge>
-                    </TableCell>
-                    <TableCell>
-                      {dashboard.isPublic ? (
-                        <Badge className="bg-green-100 text-green-800">공개</Badge>
-                      ) : (
-                        <Badge variant="outline">비공개</Badge>
-                      )}
-                    </TableCell>
                     <TableCell className="text-sm text-gray-500">{formatDate(dashboard.createdAt)}</TableCell>
                     <TableCell className="text-sm text-gray-500">{formatDate(dashboard.updatedAt)}</TableCell>
                     <TableCell>
@@ -199,10 +208,6 @@ export default function DashboardListPage() {
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => router.push(`/dashboard/${dashboard.id}`)} className="gap-2">
-                            <Eye className="h-4 w-4" />
-                            보기
-                          </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => router.push(`/admin/dashboard/edit/${dashboard.id}`)}
                             className="gap-2"
@@ -215,7 +220,7 @@ export default function DashboardListPage() {
                             복사
                           </DropdownMenuItem>
                           <DropdownMenuItem
-                            onClick={() => handleDelete(dashboard.id, dashboard.title)}
+                            onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
                             className="gap-2 text-red-600 focus:text-red-600"
                           >
                             <Trash2 className="h-4 w-4" />
@@ -231,6 +236,41 @@ export default function DashboardListPage() {
           </Card>
         )}
       </div>
+
+      {/* 삭제 확인 모달 */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>대시보드 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{deleteTarget?.title}&quot; 대시보드를 삭제하시겠습니까?
+              <br />이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConfirm} className="bg-red-600 hover:bg-red-700">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 성공 모달 */}
+      <Dialog open={successDialogOpen} onOpenChange={setSuccessDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+              <CheckCircle2 className="h-6 w-6 text-green-600" />
+            </div>
+            <DialogTitle className="text-center">완료</DialogTitle>
+            <DialogDescription className="text-center">{successMessage}</DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center pt-4">
+            <Button onClick={() => setSuccessDialogOpen(false)}>확인</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

frontend/app/(main)/dashboard/[dashboardId]/page.tsx

@@ -27,6 +27,10 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
     elements: DashboardElement[];
     createdAt: string;
     updatedAt: string;
+    settings?: {
+      resolution?: string;
+      backgroundColor?: string;
+    };
   } | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -101,63 +105,8 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
 
   return (
     <div className="h-screen bg-gray-50">
-      {/* 대시보드 헤더 */}
-      <div className="border-b border-gray-200 bg-white px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-800">{dashboard.title}</h1>
-            {dashboard.description && <p className="mt-1 text-sm text-gray-600">{dashboard.description}</p>}
-          </div>
-
-          <div className="flex items-center gap-3">
-            {/* 새로고침 버튼 */}
-            <button
-              onClick={loadDashboard}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
-              title="새로고침"
-            >
-              🔄
-            </button>
-
-            {/* 전체화면 버튼 */}
-            <button
-              onClick={() => {
-                if (document.fullscreenElement) {
-                  document.exitFullscreen();
-                } else {
-                  document.documentElement.requestFullscreen();
-                }
-              }}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
-              title="전체화면"
-            >
-              ⛶
-            </button>
-
-            {/* 편집 버튼 */}
-            <button
-              onClick={() => {
-                router.push(`/admin/dashboard?load=${resolvedParams.dashboardId}`);
-              }}
-              className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-            >
-              편집
-            </button>
-          </div>
-        </div>
-
-        {/* 메타 정보 */}
-        <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
-          <span>생성: {new Date(dashboard.createdAt).toLocaleString()}</span>
-          <span>수정: {new Date(dashboard.updatedAt).toLocaleString()}</span>
-          <span>요소: {dashboard.elements.length}개</span>
-        </div>
-      </div>
-
-      {/* 대시보드 뷰어 */}
-      <div className="h-[calc(100vh-120px)]">
-        <DashboardViewer elements={dashboard.elements} dashboardId={dashboard.id} />
-      </div>
+      {/* 대시보드 뷰어 - 전체 화면 */}
+      <DashboardViewer elements={dashboard.elements} resolution={dashboard.settings?.resolution || "fhd"} />
     </div>
   );
 }

frontend/components/admin/MenuFormModal.tsx

@@ -47,12 +47,12 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
   uiTexts,
 }) => {
   // console.log("🎯 MenuFormModal 렌더링 - Props:", {
-    // isOpen,
-    // menuId,
-    // parentId,
-    // menuType,
-    // level,
-    // parentCompanyCode,
+  // isOpen,
+  // menuId,
+  // parentId,
+  // menuType,
+  // level,
+  // parentCompanyCode,
   // });
 
   // 다국어 텍스트 가져오기 함수
@@ -75,12 +75,18 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
   });
 
   // 화면 할당 관련 상태
-  const [urlType, setUrlType] = useState<"direct" | "screen">("screen"); // URL 직접 입력 or 화면 할당 (기본값: 화면 할당)
+  const [urlType, setUrlType] = useState<"direct" | "screen" | "dashboard">("screen"); // URL 직접 입력 or 화면 할당 or 대시보드 할당 (기본값: 화면 할당)
   const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
   const [screens, setScreens] = useState<ScreenDefinition[]>([]);
   const [screenSearchText, setScreenSearchText] = useState("");
   const [isScreenDropdownOpen, setIsScreenDropdownOpen] = useState(false);
 
+  // 대시보드 할당 관련 상태
+  const [selectedDashboard, setSelectedDashboard] = useState<any | null>(null);
+  const [dashboards, setDashboards] = useState<any[]>([]);
+  const [dashboardSearchText, setDashboardSearchText] = useState("");
+  const [isDashboardDropdownOpen, setIsDashboardDropdownOpen] = useState(false);
+
   const [loading, setLoading] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
   const [companies, setCompanies] = useState<Company[]>([]);
@@ -93,21 +99,6 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     try {
       const response = await screenApi.getScreens({ size: 1000 }); // 모든 화면 가져오기
 
-      // console.log("🔍 화면 목록 로드 디버깅:", {
-        // totalScreens: response.data.length,
-        // firstScreen: response.data[0],
-        // firstScreenFields: response.data[0] ? Object.keys(response.data[0]) : [],
-        // firstScreenValues: response.data[0] ? Object.values(response.data[0]) : [],
-        // allScreenIds: response.data
-          // .map((s) => ({
-            // screenId: s.screenId,
-            // legacyId: s.id,
-            // name: s.screenName,
-            // code: s.screenCode,
-          // }))
-          // .slice(0, 5), // 처음 5개만 출력
-      // });
-
       setScreens(response.data);
       console.log("✅ 화면 목록 로드 완료:", response.data.length);
     } catch (error) {
@@ -116,15 +107,28 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     }
   };
 
+  // 대시보드 목록 로드
+  const loadDashboards = async () => {
+    try {
+      const { dashboardApi } = await import("@/lib/api/dashboard");
+      const response = await dashboardApi.getMyDashboards();
+      setDashboards(response.dashboards || []);
+      console.log("✅ 대시보드 목록 로드 완료:", response.dashboards?.length || 0);
+    } catch (error) {
+      console.error("❌ 대시보드 목록 로드 실패:", error);
+      toast.error("대시보드 목록을 불러오는데 실패했습니다.");
+    }
+  };
+
   // 화면 선택 시 URL 자동 설정
   const handleScreenSelect = (screen: ScreenDefinition) => {
     // console.log("🖥️ 화면 선택 디버깅:", {
-      // screen,
-      // screenId: screen.screenId,
-      // screenIdType: typeof screen.screenId,
-      // legacyId: screen.id,
-      // allFields: Object.keys(screen),
-      // screenValues: Object.values(screen),
+    // screen,
+    // screenId: screen.screenId,
+    // screenIdType: typeof screen.screenId,
+    // legacyId: screen.id,
+    // allFields: Object.keys(screen),
+    // screenValues: Object.values(screen),
     // });
 
     // ScreenDefinition에서는 screenId 필드를 사용
@@ -155,24 +159,42 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     }));
 
     // console.log("🖥️ 화면 선택 완료:", {
-      // screenId: screen.screenId,
-      // legacyId: screen.id,
-      // actualScreenId,
-      // screenName: screen.screenName,
-      // menuType: menuType,
-      // formDataMenuType: formData.menuType,
-      // isAdminMenu,
-      // generatedUrl: screenUrl,
+    // screenId: screen.screenId,
+    // legacyId: screen.id,
+    // actualScreenId,
+    // screenName: screen.screenName,
+    // menuType: menuType,
+    // formDataMenuType: formData.menuType,
+    // isAdminMenu,
+    // generatedUrl: screenUrl,
     // });
   };
 
+  // 대시보드 선택 시 URL 자동 설정
+  const handleDashboardSelect = (dashboard: any) => {
+    setSelectedDashboard(dashboard);
+    setIsDashboardDropdownOpen(false);
+
+    // 대시보드 URL 생성
+    let dashboardUrl = `/dashboard/${dashboard.id}`;
+
+    // 현재 메뉴 타입이 관리자인지 확인 (0 또는 "admin")
+    const isAdminMenu = menuType === "0" || menuType === "admin" || formData.menuType === "0";
+    if (isAdminMenu) {
+      dashboardUrl += "?mode=admin";
+    }
+
+    setFormData((prev) => ({ ...prev, menuUrl: dashboardUrl }));
+    toast.success(`대시보드가 선택되었습니다: ${dashboard.title}`);
+  };
+
   // URL 타입 변경 시 처리
-  const handleUrlTypeChange = (type: "direct" | "screen") => {
+  const handleUrlTypeChange = (type: "direct" | "screen" | "dashboard") => {
     // console.log("🔄 URL 타입 변경:", {
-      // from: urlType,
-      // to: type,
-      // currentSelectedScreen: selectedScreen?.screenName,
-      // currentUrl: formData.menuUrl,
+    // from: urlType,
+    // to: type,
+    // currentSelectedScreen: selectedScreen?.screenName,
+    // currentUrl: formData.menuUrl,
     // });
 
     setUrlType(type);
@@ -286,10 +308,10 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
           const screenId = menuUrl.match(/\/screens\/(\d+)/)?.[1];
           if (screenId) {
             // console.log("🔍 기존 메뉴에서 화면 ID 추출:", {
-              // menuUrl,
-              // screenId,
-              // hasAdminParam: menuUrl.includes("mode=admin"),
-              // currentScreensCount: screens.length,
+            // menuUrl,
+            // screenId,
+            // hasAdminParam: menuUrl.includes("mode=admin"),
+            // currentScreensCount: screens.length,
             // });
 
             // 화면 설정 함수
@@ -298,15 +320,15 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               if (screen) {
                 setSelectedScreen(screen);
                 // console.log("🖥️ 기존 메뉴의 할당된 화면 설정:", {
-                  // screen,
-                  // originalUrl: menuUrl,
-                  // hasAdminParam: menuUrl.includes("mode=admin"),
+                // screen,
+                // originalUrl: menuUrl,
+                // hasAdminParam: menuUrl.includes("mode=admin"),
                 // });
                 return true;
               } else {
                 // console.warn("⚠️ 해당 ID의 화면을 찾을 수 없음:", {
-                  // screenId,
-                  // availableScreens: screens.map((s) => ({ screenId: s.screenId, id: s.id, name: s.screenName })),
+                // screenId,
+                // availableScreens: screens.map((s) => ({ screenId: s.screenId, id: s.id, name: s.screenName })),
                 // });
                 return false;
               }
@@ -325,30 +347,34 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               }, 500);
             }
           }
+        } else if (menuUrl.startsWith("/dashboard/")) {
+          setUrlType("dashboard");
+          setSelectedScreen(null);
+          // 대시보드 ID 추출 및 선택은 useEffect에서 처리됨
         } else {
           setUrlType("direct");
           setSelectedScreen(null);
         }
 
         // console.log("설정된 폼 데이터:", {
-          // objid: menu.objid || menu.OBJID,
-          // parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
-          // menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
-          // menuUrl: menu.menu_url || menu.MENU_URL || "",
-          // menuDesc: menu.menu_desc || menu.MENU_DESC || "",
-          // seq: menu.seq || menu.SEQ || 1,
-          // menuType: convertedMenuType,
-          // status: convertedStatus,
-          // companyCode: companyCode,
-          // langKey: langKey,
+        // objid: menu.objid || menu.OBJID,
+        // parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
+        // menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
+        // menuUrl: menu.menu_url || menu.MENU_URL || "",
+        // menuDesc: menu.menu_desc || menu.MENU_DESC || "",
+        // seq: menu.seq || menu.SEQ || 1,
+        // menuType: convertedMenuType,
+        // status: convertedStatus,
+        // companyCode: companyCode,
+        // langKey: langKey,
         // });
       }
     } catch (error: any) {
       console.error("메뉴 정보 로딩 오류:", error);
       // console.error("오류 상세 정보:", {
-        // message: error?.message,
-        // stack: error?.stack,
-        // response: error?.response,
+      // message: error?.message,
+      // stack: error?.stack,
+      // response: error?.response,
       // });
       toast.error(getText(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_INFO));
     } finally {
@@ -391,11 +417,11 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
       });
 
       // console.log("메뉴 등록 기본값 설정:", {
-        // parentObjId: parentId || "0",
-        // menuType: defaultMenuType,
-        // status: "ACTIVE",
-        // companyCode: "",
-        // langKey: "",
+      // parentObjId: parentId || "0",
+      // menuType: defaultMenuType,
+      // status: "ACTIVE",
+      // companyCode: "",
+      // langKey: "",
       // });
     }
   }, [menuId, parentId, menuType]);
@@ -430,10 +456,11 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     }
   }, [isOpen, formData.companyCode]);
 
-  // 화면 목록 로드
+  // 화면 목록 및 대시보드 목록 로드
   useEffect(() => {
     if (isOpen) {
       loadScreens();
+      loadDashboards();
     }
   }, [isOpen]);
 
@@ -449,9 +476,9 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
           if (screen) {
             setSelectedScreen(screen);
             // console.log("✅ 기존 메뉴의 할당된 화면 자동 설정 완료:", {
-              // screenId,
-              // screenName: screen.screenName,
-              // menuUrl,
+            // screenId,
+            // screenName: screen.screenName,
+            // menuUrl,
             // });
           }
         }
@@ -459,6 +486,23 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     }
   }, [screens, isEdit, formData.menuUrl, urlType, selectedScreen]);
 
+  // 대시보드 목록 로드 완료 후 기존 메뉴의 할당된 대시보드 설정
+  useEffect(() => {
+    if (dashboards.length > 0 && isEdit && formData.menuUrl && urlType === "dashboard") {
+      const menuUrl = formData.menuUrl;
+      if (menuUrl.startsWith("/dashboard/")) {
+        const dashboardId = menuUrl.replace("/dashboard/", "");
+        if (dashboardId && !selectedDashboard) {
+          console.log("🔄 대시보드 목록 로드 완료 - 기존 할당 대시보드 자동 설정");
+          const dashboard = dashboards.find((d) => d.id === dashboardId);
+          if (dashboard) {
+            setSelectedDashboard(dashboard);
+          }
+        }
+      }
+    }
+  }, [dashboards, isEdit, formData.menuUrl, urlType, selectedDashboard]);
+
   // 드롭다운 외부 클릭 시 닫기
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -471,9 +515,13 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
         setIsScreenDropdownOpen(false);
         setScreenSearchText("");
       }
+      if (!target.closest(".dashboard-dropdown")) {
+        setIsDashboardDropdownOpen(false);
+        setDashboardSearchText("");
+      }
     };
 
-    if (isLangKeyDropdownOpen || isScreenDropdownOpen) {
+    if (isLangKeyDropdownOpen || isScreenDropdownOpen || isDashboardDropdownOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     }
 
@@ -751,6 +799,12 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                   화면 할당
                 </Label>
               </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="dashboard" id="dashboard" />
+                <Label htmlFor="dashboard" className="cursor-pointer">
+                  대시보드 할당
+                </Label>
+              </div>
               <div className="flex items-center space-x-2">
                 <RadioGroupItem value="direct" id="direct" />
                 <Label htmlFor="direct" className="cursor-pointer">
@@ -826,10 +880,91 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
 
                 {/* 선택된 화면 정보 표시 */}
                 {selectedScreen && (
-                  <div className="rounded-md border bg-accent p-3">
+                  <div className="bg-accent rounded-md border p-3">
                     <div className="text-sm font-medium text-blue-900">{selectedScreen.screenName}</div>
-                    <div className="text-xs text-primary">코드: {selectedScreen.screenCode}</div>
-                    <div className="text-xs text-primary">생성된 URL: {formData.menuUrl}</div>
+                    <div className="text-primary text-xs">코드: {selectedScreen.screenCode}</div>
+                    <div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 대시보드 할당 */}
+            {urlType === "dashboard" && (
+              <div className="space-y-2">
+                {/* 대시보드 선택 드롭다운 */}
+                <div className="relative">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full justify-between"
+                    onClick={() => setIsDashboardDropdownOpen(!isDashboardDropdownOpen)}
+                  >
+                    <span className="truncate">{selectedDashboard ? selectedDashboard.title : "대시보드 선택"}</span>
+                    <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+
+                  {/* 드롭다운 메뉴 */}
+                  {isDashboardDropdownOpen && (
+                    <div className="dashboard-dropdown absolute z-50 mt-1 max-h-60 w-full overflow-hidden rounded-md border bg-white shadow-lg">
+                      {/* 검색창 */}
+                      <div className="border-b p-2">
+                        <div className="relative">
+                          <Search className="absolute top-2.5 left-2 h-4 w-4 text-gray-400" />
+                          <Input
+                            type="text"
+                            placeholder="대시보드 검색..."
+                            value={dashboardSearchText}
+                            onChange={(e) => setDashboardSearchText(e.target.value)}
+                            className="pl-8"
+                          />
+                        </div>
+                      </div>
+
+                      {/* 대시보드 목록 */}
+                      <div className="max-h-48 overflow-y-auto">
+                        {dashboards
+                          .filter(
+                            (dashboard) =>
+                              dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
+                              (dashboard.description &&
+                                dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
+                          )
+                          .map((dashboard) => (
+                            <div
+                              key={dashboard.id}
+                              onClick={() => handleDashboardSelect(dashboard)}
+                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
+                            >
+                              <div className="flex items-center justify-between">
+                                <div>
+                                  <div className="text-sm font-medium">{dashboard.title}</div>
+                                  {dashboard.description && (
+                                    <div className="text-xs text-gray-500">{dashboard.description}</div>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        {dashboards.filter(
+                          (dashboard) =>
+                            dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
+                            (dashboard.description &&
+                              dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
+                        ).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* 선택된 대시보드 정보 표시 */}
+                {selectedDashboard && (
+                  <div className="bg-accent rounded-md border p-3">
+                    <div className="text-sm font-medium text-blue-900">{selectedDashboard.title}</div>
+                    {selectedDashboard.description && (
+                      <div className="text-primary text-xs">설명: {selectedDashboard.description}</div>
+                    )}
+                    <div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
                   </div>
                 )}
               </div>

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -110,6 +110,7 @@ interface CanvasElementProps {
   element: DashboardElement;
   isSelected: boolean;
   cellSize: number;
+  canvasWidth?: number;
   onUpdate: (id: string, updates: Partial<DashboardElement>) => void;
   onRemove: (id: string) => void;
   onSelect: (id: string | null) => void;
@@ -126,6 +127,7 @@ export function CanvasElement({
   element,
   isSelected,
   cellSize,
+  canvasWidth = 1560,
   onUpdate,
   onRemove,
   onSelect,
@@ -164,7 +166,11 @@ export function CanvasElement({
         return;
       }
 
-      onSelect(element.id);
+      // 선택되지 않은 경우에만 선택 처리
+      if (!isSelected) {
+        onSelect(element.id);
+      }
+
       setIsDragging(true);
       setDragStart({
         x: e.clientX,
@@ -174,7 +180,7 @@ export function CanvasElement({
       });
       e.preventDefault();
     },
-    [element.id, element.position.x, element.position.y, onSelect],
+    [element.id, element.position.x, element.position.y, onSelect, isSelected],
   );
 
   // 리사이즈 핸들 마우스다운
@@ -207,7 +213,7 @@ export function CanvasElement({
         const rawY = Math.max(0, dragStart.elementY + deltaY);
 
         // X 좌표가 캔버스 너비를 벗어나지 않도록 제한
-        const maxX = GRID_CONFIG.CANVAS_WIDTH - element.size.width;
+        const maxX = canvasWidth - element.size.width;
         rawX = Math.min(rawX, maxX);
 
         setTempPosition({ x: rawX, y: rawY });
@@ -223,8 +229,8 @@ export function CanvasElement({
         // 최소 크기 설정: 달력은 2x3, 나머지는 2x2
         const minWidthCells = 2;
         const minHeightCells = element.type === "widget" && element.subtype === "calendar" ? 3 : 2;
-        const minWidth = GRID_CONFIG.CELL_SIZE * minWidthCells;
-        const minHeight = GRID_CONFIG.CELL_SIZE * minHeightCells;
+        const minWidth = cellSize * minWidthCells;
+        const minHeight = cellSize * minHeightCells;
 
         switch (resizeStart.handle) {
           case "se": // 오른쪽 아래
@@ -250,7 +256,7 @@ export function CanvasElement({
         }
 
         // 가로 너비가 캔버스를 벗어나지 않도록 제한
-        const maxWidth = GRID_CONFIG.CANVAS_WIDTH - newX;
+        const maxWidth = canvasWidth - newX;
         newWidth = Math.min(newWidth, maxWidth);
 
         // 임시 크기/위치 저장 (스냅 안 됨)
@@ -258,7 +264,7 @@ export function CanvasElement({
         setTempSize({ width: newWidth, height: newHeight });
       }
     },
-    [isDragging, isResizing, dragStart, resizeStart, element.size.width, element.type, element.subtype],
+    [isDragging, isResizing, dragStart, resizeStart, element.size.width, element.type, element.subtype, canvasWidth],
   );
 
   // 마우스 업 처리 (그리드 스냅 적용)
@@ -269,7 +275,7 @@ export function CanvasElement({
       const snappedY = snapToGrid(tempPosition.y, cellSize);
 
       // X 좌표가 캔버스 너비를 벗어나지 않도록 최종 제한
-      const maxX = GRID_CONFIG.CANVAS_WIDTH - element.size.width;
+      const maxX = canvasWidth - element.size.width;
       snappedX = Math.min(snappedX, maxX);
 
       onUpdate(element.id, {
@@ -287,7 +293,7 @@ export function CanvasElement({
       const snappedHeight = snapSizeToGrid(tempSize.height, 2, cellSize);
 
       // 가로 너비가 캔버스를 벗어나지 않도록 최종 제한
-      const maxWidth = GRID_CONFIG.CANVAS_WIDTH - snappedX;
+      const maxWidth = canvasWidth - snappedX;
       snappedWidth = Math.min(snappedWidth, maxWidth);
 
       onUpdate(element.id, {
@@ -301,7 +307,7 @@ export function CanvasElement({
 
     setIsDragging(false);
     setIsResizing(false);
-  }, [isDragging, isResizing, tempPosition, tempSize, element.id, element.size.width, onUpdate, cellSize]);
+  }, [isDragging, isResizing, tempPosition, tempSize, element.id, element.size.width, onUpdate, cellSize, canvasWidth]);
 
   // 전역 마우스 이벤트 등록
   React.useEffect(() => {
@@ -449,7 +455,7 @@ export function CanvasElement({
     >
       {/* 헤더 */}
       <div className="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3">
-        <span className="text-sm font-bold text-gray-800">{element.title}</span>
+        <span className="text-sm font-bold text-gray-800">{element.customTitle || element.title}</span>
         <div className="flex gap-1">
           {/* 설정 버튼 (시계, 달력, 기사관리 위젯은 자체 설정 UI 사용) */}
           {onConfigure &&
@@ -545,12 +551,7 @@ export function CanvasElement({
         ) : element.type === "widget" && element.subtype === "status-summary" ? (
           // 커스텀 상태 카드 - 범용 위젯
           <div className="widget-interactive-area h-full w-full">
-            <StatusSummaryWidget 
-              element={element}
-              title="상태 요약"
-              icon="📊"
-              bgGradient="from-slate-50 to-blue-50"
-            />
+            <StatusSummaryWidget element={element} title="상태 요약" icon="📊" bgGradient="from-slate-50 to-blue-50" />
           </div>
         ) : /* element.type === "widget" && element.subtype === "list-summary" ? (
           // 커스텀 목록 카드 - 범용 위젯 (다른 분 작업 중 - 임시 주석)
@@ -560,7 +561,7 @@ export function CanvasElement({
         ) : */ element.type === "widget" && element.subtype === "delivery-status" ? (
           // 배송/화물 현황 위젯 - 범용 위젯 사용 (구버전 호환)
           <div className="widget-interactive-area h-full w-full">
-            <StatusSummaryWidget 
+            <StatusSummaryWidget
               element={element}
               title="배송/화물 현황"
               icon="📦"
@@ -570,23 +571,23 @@ export function CanvasElement({
         ) : element.type === "widget" && element.subtype === "delivery-status-summary" ? (
           // 배송 상태 요약 - 범용 위젯 사용
           <div className="widget-interactive-area h-full w-full">
-            <StatusSummaryWidget 
+            <StatusSummaryWidget
               element={element}
               title="배송 상태 요약"
               icon="📊"
               bgGradient="from-slate-50 to-blue-50"
               statusConfig={{
-                "배송중": { label: "배송중", color: "blue" },
-                "완료": { label: "완료", color: "green" },
-                "지연": { label: "지연", color: "red" },
-                "픽업 대기": { label: "픽업 대기", color: "yellow" }
+                배송중: { label: "배송중", color: "blue" },
+                완료: { label: "완료", color: "green" },
+                지연: { label: "지연", color: "red" },
+                "픽업 대기": { label: "픽업 대기", color: "yellow" },
               }}
             />
           </div>
         ) : element.type === "widget" && element.subtype === "delivery-today-stats" ? (
           // 오늘 처리 현황 - 범용 위젯 사용
           <div className="widget-interactive-area h-full w-full">
-            <StatusSummaryWidget 
+            <StatusSummaryWidget
               element={element}
               title="오늘 처리 현황"
               icon="📈"
@@ -596,7 +597,7 @@ export function CanvasElement({
         ) : element.type === "widget" && element.subtype === "cargo-list" ? (
           // 화물 목록 - 범용 위젯 사용
           <div className="widget-interactive-area h-full w-full">
-            <StatusSummaryWidget 
+            <StatusSummaryWidget
               element={element}
               title="화물 목록"
               icon="📦"
@@ -606,7 +607,7 @@ export function CanvasElement({
         ) : element.type === "widget" && element.subtype === "customer-issues" ? (
           // 고객 클레임/이슈 - 범용 위젯 사용
           <div className="widget-interactive-area h-full w-full">
-            <StatusSummaryWidget 
+            <StatusSummaryWidget
               element={element}
               title="고객 클레임/이슈"
               icon="⚠️"

frontend/components/admin/dashboard/DashboardCanvas.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React, { forwardRef, useState, useCallback, useEffect } from "react";
+import React, { forwardRef, useState, useCallback, useMemo } from "react";
 import { DashboardElement, ElementType, ElementSubtype, DragData } from "./types";
 import { CanvasElement } from "./CanvasElement";
-import { GRID_CONFIG, snapToGrid } from "./gridUtils";
+import { GRID_CONFIG, snapToGrid, calculateGridConfig } from "./gridUtils";
 
 interface DashboardCanvasProps {
   elements: DashboardElement[];
@@ -14,6 +14,8 @@ interface DashboardCanvasProps {
   onSelectElement: (id: string | null) => void;
   onConfigureElement?: (element: DashboardElement) => void;
   backgroundColor?: string;
+  canvasWidth?: number;
+  canvasHeight?: number;
 }
 
 /**
@@ -34,11 +36,17 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
       onSelectElement,
       onConfigureElement,
       backgroundColor = "#f9fafb",
+      canvasWidth = 1560,
+      canvasHeight = 768,
     },
     ref,
   ) => {
     const [isDragOver, setIsDragOver] = useState(false);
 
+    // 현재 캔버스 크기에 맞는 그리드 설정 계산
+    const gridConfig = useMemo(() => calculateGridConfig(canvasWidth), [canvasWidth]);
+    const cellSize = gridConfig.CELL_SIZE;
+
     // 드래그 오버 처리
     const handleDragOver = useCallback((e: React.DragEvent) => {
       e.preventDefault();
@@ -71,20 +79,20 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
           const rawX = e.clientX - rect.left + (ref.current?.scrollLeft || 0);
           const rawY = e.clientY - rect.top + (ref.current?.scrollTop || 0);
 
-          // 그리드에 스냅 (고정 셀 크기 사용)
-          let snappedX = snapToGrid(rawX, GRID_CONFIG.CELL_SIZE);
-          const snappedY = snapToGrid(rawY, GRID_CONFIG.CELL_SIZE);
+          // 그리드에 스냅 (동적 셀 크기 사용)
+          let snappedX = snapToGrid(rawX, cellSize);
+          const snappedY = snapToGrid(rawY, cellSize);
 
           // X 좌표가 캔버스 너비를 벗어나지 않도록 제한
-          const maxX = GRID_CONFIG.CANVAS_WIDTH - GRID_CONFIG.CELL_SIZE * 2; // 최소 2칸 너비 보장
+          const maxX = canvasWidth - cellSize * 2; // 최소 2칸 너비 보장
           snappedX = Math.max(0, Math.min(snappedX, maxX));
 
           onCreateElement(dragData.type, dragData.subtype, snappedX, snappedY);
-        } catch (error) {
-          // console.error('드롭 데이터 파싱 오류:', error);
+        } catch {
+          // 드롭 데이터 파싱 오류 무시
         }
       },
-      [ref, onCreateElement],
+      [ref, onCreateElement, canvasWidth, cellSize],
     );
 
     // 캔버스 클릭 시 선택 해제
@@ -97,28 +105,25 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
       [onSelectElement],
     );
 
-    // 고정 그리드 크기
-    const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;
+    // 동적 그리드 크기 계산
+    const cellWithGap = cellSize + GRID_CONFIG.GAP;
     const gridSize = `${cellWithGap}px ${cellWithGap}px`;
 
-    // 캔버스 높이를 요소들의 최대 y + height 기준으로 계산 (최소 화면 높이 보장)
-    const minCanvasHeight = Math.max(
-      typeof window !== "undefined" ? window.innerHeight : 800,
-      ...elements.map((el) => el.position.y + el.size.height + 100), // 하단 여백 100px
-    );
+    // 12개 컬럼 구분선 위치 계산
+    const columnLines = Array.from({ length: GRID_CONFIG.COLUMNS + 1 }, (_, i) => i * cellWithGap);
 
     return (
       <div
         ref={ref}
-        className={`relative rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
+        className={`relative w-full rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
         style={{
           backgroundColor,
-          width: `${GRID_CONFIG.CANVAS_WIDTH}px`,
-          minHeight: `${minCanvasHeight}px`,
-          // 12 컬럼 그리드 배경
+          height: `${canvasHeight}px`,
+          minHeight: `${canvasHeight}px`,
+          // 세밀한 그리드 배경
           backgroundImage: `
-            linear-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(59, 130, 246, 0.15) 1px, transparent 1px)
+            linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px)
           `,
           backgroundSize: gridSize,
           backgroundPosition: "0 0",
@@ -129,13 +134,33 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
         onDrop={handleDrop}
         onClick={handleCanvasClick}
       >
+        {/* 12개 컬럼 메인 구분선 */}
+        {columnLines.map((x, i) => (
+          <div
+            key={`col-${i}`}
+            className="pointer-events-none absolute top-0 h-full"
+            style={{
+              left: `${x}px`,
+              width: "2px",
+              zIndex: 1,
+            }}
+          />
+        ))}
         {/* 배치된 요소들 렌더링 */}
+        {elements.length === 0 && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-gray-400">
+            <div className="text-center">
+              <div className="text-sm">상단 메뉴에서 차트나 위젯을 선택하세요</div>
+            </div>
+          </div>
+        )}
         {elements.map((element) => (
           <CanvasElement
             key={element.id}
             element={element}
             isSelected={selectedElement === element.id}
-            cellSize={GRID_CONFIG.CELL_SIZE}
+            cellSize={cellSize}
+            canvasWidth={canvasWidth}
             onUpdate={onUpdateElement}
             onRemove={onRemoveElement}
             onSelect={onSelectElement}

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -3,12 +3,27 @@
 import React, { useState, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { DashboardCanvas } from "./DashboardCanvas";
-import { DashboardSidebar } from "./DashboardSidebar";
-import { DashboardToolbar } from "./DashboardToolbar";
+import { DashboardTopMenu } from "./DashboardTopMenu";
 import { ElementConfigModal } from "./ElementConfigModal";
 import { ListWidgetConfigModal } from "./widgets/ListWidgetConfigModal";
+import { DashboardSaveModal } from "./DashboardSaveModal";
 import { DashboardElement, ElementType, ElementSubtype } from "./types";
-import { GRID_CONFIG } from "./gridUtils";
+import { GRID_CONFIG, snapToGrid, snapSizeToGrid, calculateCellSize } from "./gridUtils";
+import { Resolution, RESOLUTIONS, detectScreenResolution } from "./ResolutionSelector";
+import { useMenu } from "@/contexts/MenuContext";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { CheckCircle2 } from "lucide-react";
 
 interface DashboardDesignerProps {
   dashboardId?: string;
@@ -23,6 +38,7 @@ interface DashboardDesignerProps {
  */
 export default function DashboardDesigner({ dashboardId: initialDashboardId }: DashboardDesignerProps = {}) {
   const router = useRouter();
+  const { refreshMenus } = useMenu();
   const [elements, setElements] = useState<DashboardElement[]>([]);
   const [selectedElement, setSelectedElement] = useState<string | null>(null);
   const [elementCounter, setElementCounter] = useState(0);
@@ -33,6 +49,82 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>("#f9fafb");
   const canvasRef = useRef<HTMLDivElement>(null);
 
+  // 저장 모달 상태
+  const [saveModalOpen, setSaveModalOpen] = useState(false);
+  const [dashboardDescription, setDashboardDescription] = useState<string>("");
+  const [successModalOpen, setSuccessModalOpen] = useState(false);
+  const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
+
+  // 화면 해상도 자동 감지
+  const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
+  const [resolution, setResolution] = useState<Resolution>(screenResolution);
+
+  // resolution 변경 감지 및 요소 자동 조정
+  const handleResolutionChange = useCallback(
+    (newResolution: Resolution) => {
+      setResolution((prev) => {
+        // 이전 해상도와 새 해상도의 캔버스 너비 비율 계산
+        const oldConfig = RESOLUTIONS[prev];
+        const newConfig = RESOLUTIONS[newResolution];
+        const widthRatio = newConfig.width / oldConfig.width;
+
+        // 요소들의 위치와 크기를 비율에 맞춰 조정
+        if (widthRatio !== 1 && elements.length > 0) {
+          // 새 해상도의 셀 크기 계산
+          const newCellSize = calculateCellSize(newConfig.width);
+
+          const adjustedElements = elements.map((el) => {
+            // 비율에 맞춰 조정 (X와 너비만)
+            const scaledX = el.position.x * widthRatio;
+            const scaledWidth = el.size.width * widthRatio;
+
+            // 그리드에 스냅 (X, Y, 너비, 높이 모두)
+            const snappedX = snapToGrid(scaledX, newCellSize);
+            const snappedY = snapToGrid(el.position.y, newCellSize);
+            const snappedWidth = snapSizeToGrid(scaledWidth, 2, newCellSize);
+            const snappedHeight = snapSizeToGrid(el.size.height, 2, newCellSize);
+
+            return {
+              ...el,
+              position: {
+                x: snappedX,
+                y: snappedY,
+              },
+              size: {
+                width: snappedWidth,
+                height: snappedHeight,
+              },
+            };
+          });
+
+          setElements(adjustedElements);
+        }
+
+        return newResolution;
+      });
+    },
+    [elements],
+  );
+
+  // 현재 해상도 설정 (안전하게 기본값 제공)
+  const canvasConfig = RESOLUTIONS[resolution] || RESOLUTIONS.fhd;
+
+  // 캔버스 높이 동적 계산 (요소들의 최하단 위치 기준)
+  const calculateCanvasHeight = useCallback(() => {
+    if (elements.length === 0) {
+      return canvasConfig.height; // 기본 높이
+    }
+
+    // 모든 요소의 최하단 y 좌표 계산
+    const maxBottomY = Math.max(...elements.map((el) => el.position.y + el.size.height));
+
+    // 최소 높이는 기본 높이, 요소가 아래로 내려가면 자동으로 늘어남
+    // 패딩 추가 (100px 여유)
+    return Math.max(canvasConfig.height, maxBottomY + 100);
+  }, [elements, canvasConfig.height]);
+
+  const dynamicCanvasHeight = calculateCanvasHeight();
+
   // 대시보드 ID가 props로 전달되면 로드
   React.useEffect(() => {
     if (initialDashboardId) {
@@ -44,17 +136,23 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   const loadDashboard = async (id: string) => {
     setIsLoading(true);
     try {
-      // console.log('🔄 대시보드 로딩:', id);
-
       const { dashboardApi } = await import("@/lib/api/dashboard");
       const dashboard = await dashboardApi.getDashboard(id);
 
-      // console.log('✅ 대시보드 로딩 완료:', dashboard);
-
       // 대시보드 정보 설정
       setDashboardId(dashboard.id);
       setDashboardTitle(dashboard.title);
 
+      // 저장된 설정 복원
+      const settings = (dashboard as { settings?: { resolution?: Resolution; backgroundColor?: string } }).settings;
+      if (settings?.resolution) {
+        setResolution(settings.resolution);
+      }
+
+      if (settings?.backgroundColor) {
+        setCanvasBackgroundColor(settings.backgroundColor);
+      }
+
       // 요소들 설정
       if (dashboard.elements && dashboard.elements.length > 0) {
         setElements(dashboard.elements);
@@ -71,7 +169,6 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         setElementCounter(maxId);
       }
     } catch (error) {
-      // console.error('❌ 대시보드 로딩 오류:', error);
       alert(
         "대시보드를 불러오는 중 오류가 발생했습니다.\n\n" +
           (error instanceof Error ? error.message : "알 수 없는 오류"),
@@ -81,9 +178,15 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
     }
   };
 
-  // 새로운 요소 생성 (고정 그리드 기반 기본 크기)
+  // 새로운 요소 생성 (동적 그리드 기반 기본 크기)
   const createElement = useCallback(
     (type: ElementType, subtype: ElementSubtype, x: number, y: number) => {
+      // 좌표 유효성 검사
+      if (isNaN(x) || isNaN(y)) {
+        console.error("Invalid coordinates:", { x, y });
+        return;
+      }
+
       // 기본 크기 설정
       let defaultCells = { width: 2, height: 2 }; // 기본 위젯 크기
 
@@ -93,11 +196,26 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         defaultCells = { width: 2, height: 3 }; // 달력 최소 크기
       }
 
-      const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;
+      // 현재 해상도에 맞는 셀 크기 계산
+      const cellSize = Math.floor((canvasConfig.width + GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS) - GRID_CONFIG.GAP;
+      const cellWithGap = cellSize + GRID_CONFIG.GAP;
 
       const defaultWidth = defaultCells.width * cellWithGap - GRID_CONFIG.GAP;
       const defaultHeight = defaultCells.height * cellWithGap - GRID_CONFIG.GAP;
 
+      // 크기 유효성 검사
+      if (isNaN(defaultWidth) || isNaN(defaultHeight) || defaultWidth <= 0 || defaultHeight <= 0) {
+        console.error("Invalid size calculated:", {
+          canvasConfig,
+          cellSize,
+          cellWithGap,
+          defaultCells,
+          defaultWidth,
+          defaultHeight,
+        });
+        return;
+      }
+
       const newElement: DashboardElement = {
         id: `element-${elementCounter + 1}`,
         type,
@@ -112,7 +230,25 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       setElementCounter((prev) => prev + 1);
       setSelectedElement(newElement.id);
     },
-    [elementCounter],
+    [elementCounter, canvasConfig],
+  );
+
+  // 메뉴에서 요소 추가 시 (캔버스 중앙에 배치)
+  const addElementFromMenu = useCallback(
+    (type: ElementType, subtype: ElementSubtype) => {
+      // 캔버스 중앙 좌표 계산
+      const centerX = Math.floor(canvasConfig.width / 2);
+      const centerY = Math.floor(canvasConfig.height / 2);
+
+      // 좌표 유효성 확인
+      if (isNaN(centerX) || isNaN(centerY)) {
+        console.error("Invalid canvas config:", canvasConfig);
+        return;
+      }
+
+      createElement(type, subtype, centerX, centerY);
+    },
+    [canvasConfig, createElement],
   );
 
   // 요소 업데이트
@@ -131,13 +267,17 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
     [selectedElement],
   );
 
-  // 전체 삭제
+  // 전체 삭제 확인 모달 열기
   const clearCanvas = useCallback(() => {
-    if (window.confirm("모든 요소를 삭제하시겠습니까?")) {
-      setElements([]);
-      setSelectedElement(null);
-      setElementCounter(0);
-    }
+    setClearConfirmOpen(true);
+  }, []);
+
+  // 실제 초기화 실행
+  const handleClearConfirm = useCallback(() => {
+    setElements([]);
+    setSelectedElement(null);
+    setElementCounter(0);
+    setClearConfirmOpen(false);
   }, []);
 
   // 요소 설정 모달 열기
@@ -169,67 +309,124 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   );
 
   // 레이아웃 저장
-  const saveLayout = useCallback(async () => {
+  const saveLayout = useCallback(() => {
     if (elements.length === 0) {
       alert("저장할 요소가 없습니다. 차트나 위젯을 추가해주세요.");
       return;
     }
 
-    try {
-      // 실제 API 호출
-      const { dashboardApi } = await import("@/lib/api/dashboard");
+    // 저장 모달 열기
+    setSaveModalOpen(true);
+  }, [elements]);
 
-      const elementsData = elements.map((el) => ({
-        id: el.id,
-        type: el.type,
-        subtype: el.subtype,
-        position: el.position,
-        size: el.size,
-        title: el.title,
-        content: el.content,
-        dataSource: el.dataSource,
-        chartConfig: el.chartConfig,
-      }));
+  // 저장 처리
+  const handleSave = useCallback(
+    async (data: {
+      title: string;
+      description: string;
+      assignToMenu: boolean;
+      menuType?: "admin" | "user";
+      menuId?: string;
+    }) => {
+      try {
+        const { dashboardApi } = await import("@/lib/api/dashboard");
 
-      let savedDashboard;
+        const elementsData = elements.map((el) => ({
+          id: el.id,
+          type: el.type,
+          subtype: el.subtype,
+          position: el.position,
+          size: el.size,
+          title: el.title,
+          customTitle: el.customTitle,
+          showHeader: el.showHeader,
+          content: el.content,
+          dataSource: el.dataSource,
+          chartConfig: el.chartConfig,
+          listConfig: el.listConfig,
+        }));
 
-      if (dashboardId) {
-        // 기존 대시보드 업데이트
-        savedDashboard = await dashboardApi.updateDashboard(dashboardId, {
-          elements: elementsData,
-        });
+        let savedDashboard;
 
-        alert(`대시보드 "${savedDashboard.title}"이 업데이트되었습니다!`);
+        if (dashboardId) {
+          // 기존 대시보드 업데이트
+          const updateData = {
+            title: data.title,
+            description: data.description || undefined,
+            elements: elementsData,
+            settings: {
+              resolution,
+              backgroundColor: canvasBackgroundColor,
+            },
+          };
 
-        // Next.js 라우터로 뷰어 페이지 이동
-        router.push(`/dashboard/${savedDashboard.id}`);
-      } else {
-        // 새 대시보드 생성
-        const title = prompt("대시보드 제목을 입력하세요:", "새 대시보드");
-        if (!title) return;
+          savedDashboard = await dashboardApi.updateDashboard(dashboardId, updateData);
+        } else {
+          // 새 대시보드 생성
+          const dashboardData = {
+            title: data.title,
+            description: data.description || undefined,
+            isPublic: false,
+            elements: elementsData,
+            settings: {
+              resolution,
+              backgroundColor: canvasBackgroundColor,
+            },
+          };
 
-        const description = prompt("대시보드 설명을 입력하세요 (선택사항):", "");
-
-        const dashboardData = {
-          title,
-          description: description || undefined,
-          isPublic: false,
-          elements: elementsData,
-        };
-
-        savedDashboard = await dashboardApi.createDashboard(dashboardData);
-
-        const viewDashboard = confirm(`대시보드 "${title}"이 저장되었습니다!\n\n지금 확인해보시겠습니까?`);
-        if (viewDashboard) {
-          // Next.js 라우터로 뷰어 페이지 이동
-          router.push(`/dashboard/${savedDashboard.id}`);
+          savedDashboard = await dashboardApi.createDashboard(dashboardData);
+          setDashboardId(savedDashboard.id);
         }
+
+        setDashboardTitle(savedDashboard.title);
+        setDashboardDescription(data.description);
+
+        // 메뉴 할당 처리
+        if (data.assignToMenu && data.menuId) {
+          const { menuApi } = await import("@/lib/api/menu");
+
+          // 대시보드 URL 생성 (관리자 메뉴면 mode=admin 추가)
+          let dashboardUrl = `/dashboard/${savedDashboard.id}`;
+          if (data.menuType === "admin") {
+            dashboardUrl += "?mode=admin";
+          }
+
+          // 메뉴 정보 가져오기
+          const menuResponse = await menuApi.getMenuInfo(data.menuId);
+
+          if (menuResponse.success && menuResponse.data) {
+            const menu = menuResponse.data;
+
+            const updateData = {
+              menuUrl: dashboardUrl,
+              parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
+              menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
+              menuDesc: menu.menu_desc || menu.MENU_DESC || "",
+              seq: menu.seq || menu.SEQ || 1,
+              menuType: menu.menu_type || menu.MENU_TYPE || "1",
+              status: menu.status || menu.STATUS || "active",
+              companyCode: menu.company_code || menu.COMPANY_CODE || "",
+              langKey: menu.lang_key || menu.LANG_KEY || "",
+            };
+
+            // 메뉴 URL 업데이트
+            await menuApi.updateMenu(data.menuId, updateData);
+
+            // 메뉴 목록 새로고침
+            await refreshMenus();
+          }
+        }
+
+        // 성공 모달 표시
+        setSuccessModalOpen(true);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
+        alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}`);
+        throw error;
       }
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
-      alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}\n\n관리자에게 문의하세요.`);
-    }
-  }, [elements, dashboardId, router]);
+    },
+    [elements, dashboardId, resolution, canvasBackgroundColor, refreshMenus],
+  );
 
   // 로딩 중이면 로딩 화면 표시
   if (isLoading) {
@@ -245,25 +442,29 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   }
 
   return (
-    <div className="flex h-full bg-gray-50">
-      {/* 캔버스 영역 */}
-      <div className="relative flex-1 overflow-auto border-r-2 border-gray-300 bg-gray-100">
-        {/* 편집 중인 대시보드 표시 */}
-        {dashboardTitle && (
-          <div className="bg-accent0 absolute top-6 left-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
-            📝 편집 중: {dashboardTitle}
-          </div>
-        )}
+    <div className="flex h-full flex-col bg-gray-50">
+      {/* 상단 메뉴바 */}
+      <DashboardTopMenu
+        onSaveLayout={saveLayout}
+        onClearCanvas={clearCanvas}
+        dashboardTitle={dashboardTitle}
+        onAddElement={addElementFromMenu}
+        resolution={resolution}
+        onResolutionChange={handleResolutionChange}
+        currentScreenResolution={screenResolution}
+        backgroundColor={canvasBackgroundColor}
+        onBackgroundColorChange={setCanvasBackgroundColor}
+      />
 
-        <DashboardToolbar
-          onClearCanvas={clearCanvas}
-          onSaveLayout={saveLayout}
-          canvasBackgroundColor={canvasBackgroundColor}
-          onCanvasBackgroundColorChange={setCanvasBackgroundColor}
-        />
-
-        {/* 캔버스 중앙 정렬 컨테이너 */}
-        <div className="flex justify-center p-4">
+      {/* 캔버스 영역 - 해상도에 따른 크기, 중앙 정렬 */}
+      <div className="flex flex-1 items-start justify-center overflow-auto bg-gray-100 p-8">
+        <div
+          className="relative shadow-2xl"
+          style={{
+            width: `${canvasConfig.width}px`,
+            minHeight: `${canvasConfig.height}px`,
+          }}
+        >
           <DashboardCanvas
             ref={canvasRef}
             elements={elements}
@@ -274,13 +475,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
             onSelectElement={setSelectedElement}
             onConfigureElement={openConfigModal}
             backgroundColor={canvasBackgroundColor}
+            canvasWidth={canvasConfig.width}
+            canvasHeight={dynamicCanvasHeight}
           />
         </div>
       </div>
 
-      {/* 사이드바 */}
-      <DashboardSidebar />
-
       {/* 요소 설정 모달 */}
       {configModalElement && (
         <>
@@ -301,6 +501,65 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
           )}
         </>
       )}
+
+      {/* 저장 모달 */}
+      <DashboardSaveModal
+        isOpen={saveModalOpen}
+        onClose={() => setSaveModalOpen(false)}
+        onSave={handleSave}
+        initialTitle={dashboardTitle}
+        initialDescription={dashboardDescription}
+        isEditing={!!dashboardId}
+      />
+
+      {/* 저장 성공 모달 */}
+      <Dialog
+        open={successModalOpen}
+        onOpenChange={() => {
+          setSuccessModalOpen(false);
+          router.push("/admin/dashboard");
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+              <CheckCircle2 className="h-6 w-6 text-green-600" />
+            </div>
+            <DialogTitle className="text-center">저장 완료</DialogTitle>
+            <DialogDescription className="text-center">대시보드가 성공적으로 저장되었습니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center pt-4">
+            <Button
+              onClick={() => {
+                setSuccessModalOpen(false);
+                router.push("/admin/dashboard");
+              }}
+            >
+              확인
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 초기화 확인 모달 */}
+      <AlertDialog open={clearConfirmOpen} onOpenChange={setClearConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>캔버스 초기화</AlertDialogTitle>
+            <AlertDialogDescription>
+              모든 요소가 삭제됩니다. 이 작업은 되돌릴 수 없습니다.
+              <br />
+              계속하시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleClearConfirm} className="bg-red-600 hover:bg-red-700">
+              초기화
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
@@ -338,6 +597,8 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
         return "🚚 기사 관리 위젯";
       case "list":
         return "📋 리스트 위젯";
+      case "warehouse-3d":
+        return "🏭 창고 현황 (3D)";
       default:
         return "🔧 위젯";
     }
@@ -378,6 +639,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/DashboardSaveModal.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+} from "@/components/ui/select";
+import { Loader2, Save } from "lucide-react";
+import { menuApi } from "@/lib/api/menu";
+
+interface MenuItem {
+  id: string;
+  name: string;
+  url?: string;
+  parent_id?: string;
+  children?: MenuItem[];
+}
+
+interface DashboardSaveModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (data: {
+    title: string;
+    description: string;
+    assignToMenu: boolean;
+    menuType?: "admin" | "user";
+    menuId?: string;
+  }) => Promise<void>;
+  initialTitle?: string;
+  initialDescription?: string;
+  isEditing?: boolean;
+}
+
+export function DashboardSaveModal({
+  isOpen,
+  onClose,
+  onSave,
+  initialTitle = "",
+  initialDescription = "",
+  isEditing = false,
+}: DashboardSaveModalProps) {
+  const [title, setTitle] = useState(initialTitle);
+  const [description, setDescription] = useState(initialDescription);
+  const [assignToMenu, setAssignToMenu] = useState(false);
+  const [menuType, setMenuType] = useState<"admin" | "user">("admin");
+  const [selectedMenuId, setSelectedMenuId] = useState<string>("");
+  const [adminMenus, setAdminMenus] = useState<MenuItem[]>([]);
+  const [userMenus, setUserMenus] = useState<MenuItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMenus, setLoadingMenus] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTitle(initialTitle);
+      setDescription(initialDescription);
+      setAssignToMenu(false);
+      setMenuType("admin");
+      setSelectedMenuId("");
+      loadMenus();
+    }
+  }, [isOpen, initialTitle, initialDescription]);
+
+  const loadMenus = async () => {
+    setLoadingMenus(true);
+    try {
+      const [adminData, userData] = await Promise.all([menuApi.getAdminMenus(), menuApi.getUserMenus()]);
+
+      // API 응답이 배열인지 확인하고 처리
+      const adminMenuList = Array.isArray(adminData) ? adminData : adminData?.data || [];
+      const userMenuList = Array.isArray(userData) ? userData : userData?.data || [];
+
+      setAdminMenus(adminMenuList);
+      setUserMenus(userMenuList);
+    } catch (error) {
+      console.error("메뉴 목록 로드 실패:", error);
+      setAdminMenus([]);
+      setUserMenus([]);
+    } finally {
+      setLoadingMenus(false);
+    }
+  };
+
+  const flattenMenus = (
+    menus: MenuItem[],
+    prefix = "",
+    parentPath = "",
+  ): { id: string; label: string; uniqueKey: string }[] => {
+    if (!Array.isArray(menus)) {
+      return [];
+    }
+
+    const result: { id: string; label: string; uniqueKey: string }[] = [];
+    menus.forEach((menu, index) => {
+      // 메뉴 ID 추출 (objid 또는 id)
+      const menuId = (menu as any).objid || menu.id || "";
+      const uniqueKey = `${parentPath}-${menuId}-${index}`;
+
+      // 메뉴 이름 추출
+      const menuName =
+        menu.name ||
+        (menu as any).menu_name_kor ||
+        (menu as any).MENU_NAME_KOR ||
+        (menu as any).menuNameKor ||
+        (menu as any).title ||
+        "이름없음";
+
+      // lev 필드로 레벨 확인 (lev > 1인 메뉴만 추가)
+      const menuLevel = (menu as any).lev || 0;
+
+      if (menuLevel > 1) {
+        result.push({
+          id: menuId,
+          label: prefix + menuName,
+          uniqueKey,
+        });
+      }
+
+      // 하위 메뉴가 있으면 재귀 호출
+      if (menu.children && Array.isArray(menu.children) && menu.children.length > 0) {
+        result.push(...flattenMenus(menu.children, prefix + menuName + " > ", uniqueKey));
+      }
+    });
+
+    return result;
+  };
+
+  const handleSave = async () => {
+    if (!title.trim()) {
+      alert("대시보드 이름을 입력해주세요.");
+      return;
+    }
+
+    if (assignToMenu && !selectedMenuId) {
+      alert("메뉴를 선택해주세요.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await onSave({
+        title: title.trim(),
+        description: description.trim(),
+        assignToMenu,
+        menuType: assignToMenu ? menuType : undefined,
+        menuId: assignToMenu ? selectedMenuId : undefined,
+      });
+      onClose();
+    } catch (error) {
+      console.error("저장 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const currentMenus = menuType === "admin" ? adminMenus : userMenus;
+  const flatMenus = flattenMenus(currentMenus);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{isEditing ? "대시보드 수정" : "대시보드 저장"}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* 대시보드 이름 */}
+          <div className="space-y-2">
+            <Label htmlFor="title">
+              대시보드 이름 <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="예: 생산 현황 대시보드"
+              className="w-full"
+            />
+          </div>
+
+          {/* 대시보드 설명 */}
+          <div className="space-y-2">
+            <Label htmlFor="description">설명</Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="대시보드에 대한 간단한 설명을 입력하세요"
+              rows={3}
+              className="w-full resize-none"
+            />
+          </div>
+
+          {/* 구분선 */}
+          <div className="border-t pt-4">
+            <h3 className="mb-3 text-sm font-semibold">메뉴 할당</h3>
+
+            {/* 메뉴 할당 여부 */}
+            <div className="space-y-4">
+              <RadioGroup
+                value={assignToMenu ? "yes" : "no"}
+                onValueChange={(value) => setAssignToMenu(value === "yes")}
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="no" id="assign-no" />
+                  <Label htmlFor="assign-no" className="cursor-pointer">
+                    메뉴에 할당하지 않음
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="yes" id="assign-yes" />
+                  <Label htmlFor="assign-yes" className="cursor-pointer">
+                    메뉴에 할당
+                  </Label>
+                </div>
+              </RadioGroup>
+
+              {/* 메뉴 할당 옵션 */}
+              {assignToMenu && (
+                <div className="ml-6 space-y-4 border-l-2 border-gray-200 pl-4">
+                  {/* 메뉴 타입 선택 */}
+                  <div className="space-y-2">
+                    <Label>메뉴 타입</Label>
+                    <RadioGroup value={menuType} onValueChange={(value) => setMenuType(value as "admin" | "user")}>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="admin" id="menu-admin" />
+                        <Label htmlFor="menu-admin" className="cursor-pointer">
+                          관리자 메뉴
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="user" id="menu-user" />
+                        <Label htmlFor="menu-user" className="cursor-pointer">
+                          사용자 메뉴
+                        </Label>
+                      </div>
+                    </RadioGroup>
+                  </div>
+
+                  {/* 메뉴 선택 */}
+                  <div className="space-y-2">
+                    <Label>메뉴 선택</Label>
+                    {loadingMenus ? (
+                      <div className="flex items-center justify-center py-4">
+                        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+                        <span className="ml-2 text-sm text-gray-500">메뉴 목록 로딩 중...</span>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        <Select value={selectedMenuId} onValueChange={setSelectedMenuId}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="메뉴를 선택하세요" />
+                          </SelectTrigger>
+                          <SelectContent className="z-[99999]">
+                            <SelectGroup>
+                              <SelectLabel>{menuType === "admin" ? "관리자 메뉴" : "사용자 메뉴"}</SelectLabel>
+                              {flatMenus.length === 0 ? (
+                                <div className="px-2 py-3 text-sm text-gray-500">사용 가능한 메뉴가 없습니다.</div>
+                              ) : (
+                                flatMenus.map((menu) => (
+                                  <SelectItem key={menu.uniqueKey} value={menu.id}>
+                                    {menu.label}
+                                  </SelectItem>
+                                ))
+                              )}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                        {selectedMenuId && (
+                          <div className="rounded-md bg-gray-50 p-2 text-sm text-gray-700">
+                            선택된 메뉴:{" "}
+                            <span className="font-medium">{flatMenus.find((m) => m.id === selectedMenuId)?.label}</span>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {assignToMenu && selectedMenuId && (
+                      <p className="mt-1 text-xs text-gray-500">
+                        선택한 메뉴의 URL이 이 대시보드로 자동 설정됩니다.
+                        {menuType === "admin" && " (관리자 모드 파라미터 포함)"}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={loading}>
+            취소
+          </Button>
+          <Button onClick={handleSave} disabled={loading}>
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                저장 중...
+              </>
+            ) : (
+              <>
+                <Save className="mr-2 h-4 w-4" />
+                저장
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -220,13 +220,7 @@ export function DashboardSidebar() {
               subtype="booking-alert"
               onDragStart={handleDragStart}
             />
-            <DraggableItem
-              icon="🔧"
-              title="정비 일정 관리"
-              type="widget"
-              subtype="maintenance"
-              onDragStart={handleDragStart}
-            />
+            {/* 정비 일정 관리 위젯 제거 - 커스텀 목록 카드로 대체 가능 */}
             <DraggableItem
               icon="📂"
               title="문서 다운로드"

frontend/components/admin/dashboard/DashboardTopMenu.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Save, Trash2, Palette } from "lucide-react";
+import { ElementType, ElementSubtype } from "./types";
+import { ResolutionSelector, Resolution } from "./ResolutionSelector";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+interface DashboardTopMenuProps {
+  onSaveLayout: () => void;
+  onClearCanvas: () => void;
+  dashboardTitle?: string;
+  onAddElement?: (type: ElementType, subtype: ElementSubtype) => void;
+  resolution?: Resolution;
+  onResolutionChange?: (resolution: Resolution) => void;
+  currentScreenResolution?: Resolution;
+  backgroundColor?: string;
+  onBackgroundColorChange?: (color: string) => void;
+}
+
+/**
+ * 대시보드 편집 화면 상단 메뉴바
+ * - 차트/위젯 선택 (셀렉트박스)
+ * - 저장/초기화 버튼
+ */
+export function DashboardTopMenu({
+  onSaveLayout,
+  onClearCanvas,
+  dashboardTitle,
+  onAddElement,
+  resolution = "fhd",
+  onResolutionChange,
+  currentScreenResolution,
+  backgroundColor = "#f9fafb",
+  onBackgroundColorChange,
+}: DashboardTopMenuProps) {
+  const [chartValue, setChartValue] = React.useState<string>("");
+  const [widgetValue, setWidgetValue] = React.useState<string>("");
+
+  // 차트 선택 시 캔버스 중앙에 추가
+  const handleChartSelect = (value: string) => {
+    if (onAddElement) {
+      onAddElement("chart", value as ElementSubtype);
+      // 선택 후 즉시 리셋하여 같은 항목을 연속으로 선택 가능하게
+      setTimeout(() => setChartValue(""), 0);
+    }
+  };
+
+  // 위젯 선택 시 캔버스 중앙에 추가
+  const handleWidgetSelect = (value: string) => {
+    if (onAddElement) {
+      onAddElement("widget", value as ElementSubtype);
+      // 선택 후 즉시 리셋하여 같은 항목을 연속으로 선택 가능하게
+      setTimeout(() => setWidgetValue(""), 0);
+    }
+  };
+
+  return (
+    <div className="flex h-16 items-center justify-between border-b bg-white px-6 shadow-sm">
+      {/* 좌측: 대시보드 제목 */}
+      <div className="flex items-center gap-4">
+        {dashboardTitle && (
+          <div className="flex items-center gap-2">
+            <span className="text-lg font-semibold text-gray-900">{dashboardTitle}</span>
+            <span className="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">편집 중</span>
+          </div>
+        )}
+      </div>
+
+      {/* 중앙: 해상도 선택 & 요소 추가 */}
+      <div className="flex items-center gap-3">
+        {/* 해상도 선택 */}
+        {onResolutionChange && (
+          <ResolutionSelector
+            value={resolution}
+            onChange={onResolutionChange}
+            currentScreenResolution={currentScreenResolution}
+          />
+        )}
+
+        <div className="h-6 w-px bg-gray-300" />
+
+        {/* 배경색 선택 */}
+        {onBackgroundColorChange && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="gap-2">
+                <Palette className="h-4 w-4" />
+                <div className="h-4 w-4 rounded border border-gray-300" style={{ backgroundColor }} />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="z-[99999] w-64">
+              <div className="space-y-3">
+                <div>
+                  <label className="text-sm font-medium">캔버스 배경색</label>
+                </div>
+                <div className="flex gap-2">
+                  <Input
+                    type="color"
+                    value={backgroundColor}
+                    onChange={(e) => onBackgroundColorChange(e.target.value)}
+                    className="h-10 w-20 cursor-pointer"
+                  />
+                  <Input
+                    type="text"
+                    value={backgroundColor}
+                    onChange={(e) => onBackgroundColorChange(e.target.value)}
+                    placeholder="#f9fafb"
+                    className="flex-1"
+                  />
+                </div>
+                <div className="grid grid-cols-6 gap-2">
+                  {[
+                    "#ffffff",
+                    "#f9fafb",
+                    "#f3f4f6",
+                    "#e5e7eb",
+                    "#1f2937",
+                    "#111827",
+                    "#fef3c7",
+                    "#fde68a",
+                    "#dbeafe",
+                    "#bfdbfe",
+                    "#fecaca",
+                    "#fca5a5",
+                  ].map((color) => (
+                    <button
+                      key={color}
+                      className="h-8 w-8 rounded border-2 transition-transform hover:scale-110"
+                      style={{
+                        backgroundColor: color,
+                        borderColor: backgroundColor === color ? "#3b82f6" : "#d1d5db",
+                      }}
+                      onClick={() => onBackgroundColorChange(color)}
+                    />
+                  ))}
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+
+        <div className="h-6 w-px bg-gray-300" />
+        {/* 차트 선택 */}
+        <Select value={chartValue} onValueChange={handleChartSelect}>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="차트 추가" />
+          </SelectTrigger>
+          <SelectContent className="z-[99999]">
+            <SelectGroup>
+              <SelectLabel>차트</SelectLabel>
+              <SelectItem value="bar">바 차트</SelectItem>
+              <SelectItem value="horizontal-bar">수평 바 차트</SelectItem>
+              <SelectItem value="stacked-bar">누적 바 차트</SelectItem>
+              <SelectItem value="line">꺾은선 차트</SelectItem>
+              <SelectItem value="area">영역 차트</SelectItem>
+              <SelectItem value="pie">원형 차트</SelectItem>
+              <SelectItem value="donut">도넛 차트</SelectItem>
+              <SelectItem value="combo">콤보 차트</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        {/* 위젯 선택 */}
+        <Select value={widgetValue} onValueChange={handleWidgetSelect}>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="위젯 추가" />
+          </SelectTrigger>
+          <SelectContent className="z-[99999]">
+            <SelectGroup>
+              <SelectLabel>데이터 위젯</SelectLabel>
+              <SelectItem value="list">리스트 위젯</SelectItem>
+              <SelectItem value="map">지도</SelectItem>
+              <SelectItem value="warehouse-3d">창고 현황 (3D)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+              <SelectLabel>일반 위젯</SelectLabel>
+              <SelectItem value="weather">날씨</SelectItem>
+              <SelectItem value="exchange">환율</SelectItem>
+              <SelectItem value="calculator">계산기</SelectItem>
+              <SelectItem value="calendar">달력</SelectItem>
+              <SelectItem value="clock">시계</SelectItem>
+              <SelectItem value="todo">할 일</SelectItem>
+              <SelectItem value="booking-alert">예약 알림</SelectItem>
+              <SelectItem value="maintenance">정비 일정</SelectItem>
+              <SelectItem value="document">문서</SelectItem>
+              <SelectItem value="risk-alert">리스크 알림</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+              <SelectLabel>차량 관리</SelectLabel>
+              <SelectItem value="vehicle-status">차량 상태</SelectItem>
+              <SelectItem value="vehicle-list">차량 목록</SelectItem>
+              <SelectItem value="vehicle-map">차량 위치</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 우측: 액션 버튼 */}
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" onClick={onClearCanvas} className="gap-2 text-red-600 hover:text-red-700">
+          <Trash2 className="h-4 w-4" />
+          초기화
+        </Button>
+        <Button size="sm" onClick={onSaveLayout} className="gap-2">
+          <Save className="h-4 w-4" />
+          저장
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -31,6 +31,8 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   const [chartConfig, setChartConfig] = useState<ChartConfig>(element.chartConfig || {});
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
   const [currentStep, setCurrentStep] = useState<1 | 2>(1);
+  const [customTitle, setCustomTitle] = useState<string>(element.customTitle || "");
+  const [showHeader, setShowHeader] = useState<boolean>(element.showHeader !== false);
 
   // 차트 설정이 필요 없는 위젯 (쿼리/API만 필요)
   const isSimpleWidget =
@@ -56,6 +58,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
       setChartConfig(element.chartConfig || {});
       setQueryResult(null);
       setCurrentStep(1);
+      setCustomTitle(element.customTitle || "");
     }
   }, [isOpen, element]);
 
@@ -119,13 +122,15 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
       ...element,
       dataSource,
       chartConfig,
+      customTitle: customTitle.trim() || undefined, // 빈 문자열이면 undefined
+      showHeader, // 헤더 표시 여부
     };
 
     console.log("  저장할 element:", updatedElement);
 
     onSave(updatedElement);
     onClose();
-  }, [element, dataSource, chartConfig, onSave, onClose]);
+  }, [element, dataSource, chartConfig, customTitle, showHeader, onSave, onClose]);
 
   // 모달이 열려있지 않으면 렌더링하지 않음
   if (!isOpen) return null;
@@ -147,28 +152,33 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     chartConfig.yAxis &&
     (typeof chartConfig.yAxis === "string" || (Array.isArray(chartConfig.yAxis) && chartConfig.yAxis.length > 0));
 
-  const canSave = isSimpleWidget
-    ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
-      currentStep === 2 && queryResult && queryResult.rows.length > 0
-    : isMapWidget
-      ? // 지도 위젯: 위도/경도 매핑 필요
-        currentStep === 2 &&
-        queryResult &&
-        queryResult.rows.length > 0 &&
-        chartConfig.latitudeColumn &&
-        chartConfig.longitudeColumn
-      : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
-        currentStep === 2 &&
-        queryResult &&
-        queryResult.rows.length > 0 &&
-        chartConfig.xAxis &&
-        (isPieChart || isApiSource
-          ? // 파이/도넛 차트 또는 REST API
-            chartConfig.aggregation === "count"
-            ? true // count는 Y축 없어도 됨
-            : hasYAxis // 다른 집계(sum, avg, max, min) 또는 집계 없음 → Y축 필수
-          : // 일반 차트 (DB): Y축 필수
-            hasYAxis);
+  // customTitle이 변경되었는지 확인
+  const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
+
+  const canSave =
+    isTitleChanged || // 제목만 변경해도 저장 가능
+    (isSimpleWidget
+      ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
+        currentStep === 2 && queryResult && queryResult.rows.length > 0
+      : isMapWidget
+        ? // 지도 위젯: 위도/경도 매핑 필요
+          currentStep === 2 &&
+          queryResult &&
+          queryResult.rows.length > 0 &&
+          chartConfig.latitudeColumn &&
+          chartConfig.longitudeColumn
+        : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
+          currentStep === 2 &&
+          queryResult &&
+          queryResult.rows.length > 0 &&
+          chartConfig.xAxis &&
+          (isPieChart || isApiSource
+            ? // 파이/도넛 차트 또는 REST API
+              chartConfig.aggregation === "count"
+              ? true // count는 Y축 없어도 됨
+              : hasYAxis // 다른 집계(sum, avg, max, min) 또는 집계 없음 → Y축 필수
+            : // 일반 차트 (DB): Y축 필수
+              hasYAxis));
 
   return (
     <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm">
@@ -178,20 +188,51 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
         }`}
       >
         {/* 모달 헤더 */}
-        <div className="flex items-center justify-between border-b p-6">
-          <div>
-            <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
-            <p className="mt-1 text-sm text-gray-500">
-              {isSimpleWidget
-                ? "데이터 소스를 설정하세요"
-                : currentStep === 1
-                  ? "데이터 소스를 선택하세요"
-                  : "쿼리를 실행하고 차트를 설정하세요"}
+        <div className="border-b p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-gray-900">{element.title} 설정</h2>
+              <p className="mt-1 text-sm text-gray-500">
+                {isSimpleWidget
+                  ? "데이터 소스를 설정하세요"
+                  : currentStep === 1
+                    ? "데이터 소스를 선택하세요"
+                    : "쿼리를 실행하고 차트를 설정하세요"}
+              </p>
+            </div>
+            <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+
+          {/* 커스텀 제목 입력 */}
+          <div className="mt-4">
+            <label className="mb-1 block text-sm font-medium text-gray-700">위젯 제목 (선택사항)</label>
+            <input
+              type="text"
+              value={customTitle}
+              onChange={(e) => setCustomTitle(e.target.value)}
+              placeholder={"예: 정비 일정 목록, 창고 위치 현황 등 (비워두면 자동 생성)"}
+              className="focus:border-primary focus:ring-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:outline-none"
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              💡 비워두면 테이블명으로 자동 생성됩니다 (예: "maintenance_schedules 목록")
             </p>
           </div>
-          <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
-            <X className="h-5 w-5" />
-          </Button>
+
+          {/* 헤더 표시 여부 */}
+          <div className="mt-4 flex items-center">
+            <input
+              type="checkbox"
+              id="showHeader"
+              checked={showHeader}
+              onChange={(e) => setShowHeader(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+            />
+            <label htmlFor="showHeader" className="ml-2 block text-sm text-gray-700">
+              위젯 헤더 표시
+            </label>
+          </div>
         </div>
 
         {/* 진행 상황 표시 - 간단한 위젯은 표시 안 함 */}

frontend/components/admin/dashboard/MenuAssignmentModal.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { menuApi, MenuItem } from "@/lib/api/menu";
+import { Loader2 } from "lucide-react";
+
+interface MenuAssignmentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (assignToMenu: boolean, menuId?: string, menuType?: "0" | "1") => void;
+  dashboardId: string;
+  dashboardTitle: string;
+}
+
+export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  dashboardId,
+  dashboardTitle,
+}) => {
+  const [assignToMenu, setAssignToMenu] = useState<boolean>(false);
+  const [selectedMenuId, setSelectedMenuId] = useState<string>("");
+  const [selectedMenuType, setSelectedMenuType] = useState<"0" | "1">("0");
+  const [adminMenus, setAdminMenus] = useState<MenuItem[]>([]);
+  const [userMenus, setUserMenus] = useState<MenuItem[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 메뉴 목록 로드
+  useEffect(() => {
+    if (isOpen && assignToMenu) {
+      loadMenus();
+    }
+  }, [isOpen, assignToMenu]);
+
+  const loadMenus = async () => {
+    try {
+      setLoading(true);
+      const [adminResponse, userResponse] = await Promise.all([
+        menuApi.getAdminMenus(), // 관리자 메뉴
+        menuApi.getUserMenus(), // 사용자 메뉴
+      ]);
+
+      if (adminResponse.success) {
+        setAdminMenus(adminResponse.data || []);
+      }
+      if (userResponse.success) {
+        setUserMenus(userResponse.data || []);
+      }
+    } catch (error) {
+      console.error("메뉴 목록 로드 실패:", error);
+      toast.error("메뉴 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 메뉴 트리를 평탄화하여 Select 옵션으로 변환
+  const flattenMenus = (menus: MenuItem[], level: number = 0): Array<{ id: string; name: string; level: number }> => {
+    const result: Array<{ id: string; name: string; level: number }> = [];
+
+    menus.forEach((menu) => {
+      const menuId = menu.objid || menu.OBJID || "";
+      const menuName = menu.menu_name_kor || menu.MENU_NAME_KOR || "";
+      const parentId = menu.parent_obj_id || menu.PARENT_OBJ_ID || "0";
+
+      // 메뉴 이름이 있고, 최상위가 아닌 경우에만 추가
+      if (menuName && parentId !== "0") {
+        result.push({
+          id: menuId,
+          name: "  ".repeat(level) + menuName,
+          level,
+        });
+
+        // 하위 메뉴가 있으면 재귀 호출
+        const children = menus.filter((m) => (m.parent_obj_id || m.PARENT_OBJ_ID) === menuId);
+        if (children.length > 0) {
+          result.push(...flattenMenus(children, level + 1));
+        }
+      }
+    });
+
+    return result;
+  };
+
+  const currentMenus = selectedMenuType === "0" ? adminMenus : userMenus;
+  const flatMenus = flattenMenus(currentMenus);
+
+  const handleConfirm = () => {
+    if (assignToMenu && !selectedMenuId) {
+      toast.error("메뉴를 선택해주세요.");
+      return;
+    }
+
+    onConfirm(assignToMenu, selectedMenuId, selectedMenuType);
+  };
+
+  const handleClose = () => {
+    setAssignToMenu(false);
+    setSelectedMenuId("");
+    setSelectedMenuType("0");
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>대시보드 저장 완료</DialogTitle>
+          <DialogDescription>'{dashboardTitle}' 대시보드가 저장되었습니다.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-3">
+            <Label>이 대시보드를 메뉴에 할당하시겠습니까?</Label>
+            <RadioGroup
+              value={assignToMenu ? "yes" : "no"}
+              onValueChange={(value) => setAssignToMenu(value === "yes")}
+              className="flex space-x-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="yes" id="yes" />
+                <Label htmlFor="yes" className="cursor-pointer font-normal">
+                  예, 메뉴에 할당
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="no" id="no" />
+                <Label htmlFor="no" className="cursor-pointer font-normal">
+                  아니오, 나중에
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          {assignToMenu && (
+            <>
+              <div className="space-y-2">
+                <Label>메뉴 타입</Label>
+                <RadioGroup
+                  value={selectedMenuType}
+                  onValueChange={(value) => {
+                    setSelectedMenuType(value as "0" | "1");
+                    setSelectedMenuId(""); // 메뉴 타입 변경 시 선택 초기화
+                  }}
+                  className="flex space-x-4"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="0" id="admin" />
+                    <Label htmlFor="admin" className="cursor-pointer font-normal">
+                      관리자 메뉴
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="1" id="user" />
+                    <Label htmlFor="user" className="cursor-pointer font-normal">
+                      사용자 메뉴
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="space-y-2">
+                <Label>할당할 메뉴 선택</Label>
+                {loading ? (
+                  <div className="flex items-center justify-center py-4">
+                    <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+                  </div>
+                ) : (
+                  <Select value={selectedMenuId} onValueChange={setSelectedMenuId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="메뉴를 선택하세요" />
+                    </SelectTrigger>
+                    <SelectContent className="max-h-[300px]">
+                      {flatMenus.map((menu) => (
+                        <SelectItem key={menu.id} value={menu.id}>
+                          {menu.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            취소
+          </Button>
+          <Button onClick={handleConfirm}>{assignToMenu ? "메뉴에 할당하고 완료" : "완료"}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/components/admin/dashboard/ResolutionSelector.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Monitor } from "lucide-react";
+
+export type Resolution = "hd" | "fhd" | "qhd" | "uhd";
+
+export interface ResolutionConfig {
+  width: number;
+  height: number;
+  label: string;
+}
+
+export const RESOLUTIONS: Record<Resolution, ResolutionConfig> = {
+  hd: {
+    width: 1280 - 360,
+    height: 720 - 312,
+    label: "HD (1280x720)",
+  },
+  fhd: {
+    width: 1920 - 360,
+    height: 1080 - 312,
+    label: "Full HD (1920x1080)",
+  },
+  qhd: {
+    width: 2560 - 360,
+    height: 1440 - 312,
+    label: "QHD (2560x1440)",
+  },
+  uhd: {
+    width: 3840 - 360,
+    height: 2160 - 312,
+    label: "4K UHD (3840x2160)",
+  },
+};
+
+interface ResolutionSelectorProps {
+  value: Resolution;
+  onChange: (resolution: Resolution) => void;
+  currentScreenResolution?: Resolution;
+}
+
+/**
+ * 현재 화면 해상도 감지
+ */
+export function detectScreenResolution(): Resolution {
+  if (typeof window === "undefined") return "fhd";
+
+  const width = window.screen.width;
+  const height = window.screen.height;
+
+  // 화면 해상도에 따라 적절한 캔버스 해상도 반환
+  if (width >= 3840 || height >= 2160) return "uhd";
+  if (width >= 2560 || height >= 1440) return "qhd";
+  if (width >= 1920 || height >= 1080) return "fhd";
+  return "hd";
+}
+
+/**
+ * 해상도 선택 컴포넌트
+ * - HD, Full HD, QHD, 4K UHD 지원
+ * - 12칸 그리드 유지, 셀 크기만 변경
+ * - 현재 화면 해상도 감지 및 경고 표시
+ */
+export function ResolutionSelector({ value, onChange, currentScreenResolution }: ResolutionSelectorProps) {
+  const currentConfig = RESOLUTIONS[value];
+  const screenConfig = currentScreenResolution ? RESOLUTIONS[currentScreenResolution] : null;
+
+  // 현재 선택된 해상도가 화면보다 큰지 확인
+  const isTooLarge =
+    screenConfig &&
+    (currentConfig.width > screenConfig.width + 360 || currentConfig.height > screenConfig.height + 312);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Monitor className="h-4 w-4 text-gray-500" />
+      <Select value={value} onValueChange={(v) => onChange(v as Resolution)}>
+        <SelectTrigger className={`w-[180px] ${isTooLarge ? "border-orange-500" : ""}`}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="z-[99999]">
+          <SelectGroup>
+            <SelectLabel>캔버스 해상도</SelectLabel>
+            <SelectItem value="hd">
+              <div className="flex items-center gap-2">
+                <span>HD</span>
+                <span className="text-xs text-gray-500">1280x720</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="fhd">
+              <div className="flex items-center gap-2">
+                <span>Full HD</span>
+                <span className="text-xs text-gray-500">1920x1080</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="qhd">
+              <div className="flex items-center gap-2">
+                <span>QHD</span>
+                <span className="text-xs text-gray-500">2560x1440</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="uhd">
+              <div className="flex items-center gap-2">
+                <span>4K UHD</span>
+                <span className="text-xs text-gray-500">3840x2160</span>
+              </div>
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      {isTooLarge && <span className="text-xs text-orange-600">⚠️ 현재 화면보다 큽니다</span>}
+    </div>
+  );
+}

frontend/components/admin/dashboard/gridUtils.ts

@@ -5,18 +5,36 @@
  * - 스냅 기능
  */
 
-// 그리드 설정 (고정 크기)
+// 기본 그리드 설정 (FHD 기준)
 export const GRID_CONFIG = {
-  COLUMNS: 12,
-  CELL_SIZE: 132, // 고정 셀 크기
-  GAP: 8, // 셀 간격
+  COLUMNS: 12, // 모든 해상도에서 12칸 고정
+  GAP: 8, // 셀 간격 고정
   SNAP_THRESHOLD: 15, // 스냅 임계값 (px)
   ELEMENT_PADDING: 4, // 요소 주위 여백 (px)
-  CANVAS_WIDTH: 1682, // 고정 캔버스 너비 (실제 측정값)
-  // 계산식: (132 + 8) × 12 - 8 = 1672px (그리드)
-  // 추가 여백 10px 포함 = 1682px
+  // CELL_SIZE와 CANVAS_WIDTH는 해상도에 따라 동적 계산
 } as const;
 
+/**
+ * 캔버스 너비에 맞춰 셀 크기 계산
+ * 공식: (CELL_SIZE + GAP) * 12 - GAP = canvasWidth
+ * CELL_SIZE = (canvasWidth + GAP) / 12 - GAP
+ */
+export function calculateCellSize(canvasWidth: number): number {
+  return Math.floor((canvasWidth + GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS) - GRID_CONFIG.GAP;
+}
+
+/**
+ * 해상도별 그리드 설정 계산
+ */
+export function calculateGridConfig(canvasWidth: number) {
+  const cellSize = calculateCellSize(canvasWidth);
+  return {
+    ...GRID_CONFIG,
+    CELL_SIZE: cellSize,
+    CANVAS_WIDTH: canvasWidth,
+  };
+}
+
 /**
  * 실제 그리드 셀 크기 계산 (gap 포함)
  */

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;
@@ -54,6 +55,8 @@ export interface DashboardElement {
   position: Position;
   size: Size;
   title: string;
+  customTitle?: string; // 사용자 정의 제목 (옵션)
+  showHeader?: boolean; // 헤더 표시 여부 (기본값: true)
   content: string;
   dataSource?: ChartDataSource; // 데이터 소스 설정
   chartConfig?: ChartConfig; // 차트 설정
@@ -138,7 +141,7 @@ export interface ChartConfig {
 
   // 애니메이션
   enableAnimation?: boolean; // 애니메이션 활성화
-  
+
   // 상태 필터링 (커스텀 상태 카드용)
   statusFilter?: string[]; // 표시할 상태 목록 (예: ["driving", "parked"])
   animationDuration?: number; // 애니메이션 시간 (ms)

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

@@ -1,25 +1,154 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { DashboardElement, QueryResult } from "@/components/admin/dashboard/types";
 import { ChartRenderer } from "@/components/admin/dashboard/charts/ChartRenderer";
+import { RESOLUTIONS, Resolution } from "@/components/admin/dashboard/ResolutionSelector";
+import dynamic from "next/dynamic";
+
+// 위젯 동적 import - 모든 위젯
+const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { ssr: false });
+const StatusSummaryWidget = dynamic(() => import("./widgets/StatusSummaryWidget"), { ssr: false });
+const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
+const WeatherWidget = dynamic(() => import("./widgets/WeatherWidget"), { ssr: false });
+const ExchangeWidget = dynamic(() => import("./widgets/ExchangeWidget"), { ssr: false });
+const VehicleStatusWidget = dynamic(() => import("./widgets/VehicleStatusWidget"), { ssr: false });
+const VehicleListWidget = dynamic(() => import("./widgets/VehicleListWidget"), { ssr: false });
+const VehicleMapOnlyWidget = dynamic(() => import("./widgets/VehicleMapOnlyWidget"), { ssr: false });
+const CargoListWidget = dynamic(() => import("./widgets/CargoListWidget"), { ssr: false });
+const CustomerIssuesWidget = dynamic(() => import("./widgets/CustomerIssuesWidget"), { ssr: false });
+const DeliveryStatusWidget = dynamic(() => import("./widgets/DeliveryStatusWidget"), { ssr: false });
+const DeliveryStatusSummaryWidget = dynamic(() => import("./widgets/DeliveryStatusSummaryWidget"), { ssr: false });
+const DeliveryTodayStatsWidget = dynamic(() => import("./widgets/DeliveryTodayStatsWidget"), { ssr: false });
+const TodoWidget = dynamic(() => import("./widgets/TodoWidget"), { ssr: false });
+const DocumentWidget = dynamic(() => import("./widgets/DocumentWidget"), { ssr: false });
+const BookingAlertWidget = dynamic(() => import("./widgets/BookingAlertWidget"), { ssr: false });
+const MaintenanceWidget = dynamic(() => import("./widgets/MaintenanceWidget"), { ssr: false });
+const CalculatorWidget = dynamic(() => import("./widgets/CalculatorWidget"), { ssr: false });
+const CalendarWidget = dynamic(
+  () => import("@/components/admin/dashboard/widgets/CalendarWidget").then((mod) => ({ default: mod.CalendarWidget })),
+  { ssr: false },
+);
+const ClockWidget = dynamic(
+  () => import("@/components/admin/dashboard/widgets/ClockWidget").then((mod) => ({ default: mod.ClockWidget })),
+  { ssr: false },
+);
+const ListWidget = dynamic(
+  () => import("@/components/admin/dashboard/widgets/ListWidget").then((mod) => ({ default: mod.ListWidget })),
+  { ssr: false },
+);
+
+const Warehouse3DWidget = dynamic(
+  () =>
+    import("@/components/admin/dashboard/widgets/Warehouse3DWidget").then((mod) => ({
+      default: mod.Warehouse3DWidget,
+    })),
+  { ssr: false },
+);
+
+/**
+ * 위젯 렌더링 함수 - DashboardSidebar의 모든 subtype 처리
+ * ViewerElement에서 사용하기 위해 컴포넌트 외부에 정의
+ */
+function renderWidget(element: DashboardElement) {
+  switch (element.subtype) {
+    // 차트는 ChartRenderer에서 처리됨 (이 함수 호출 안됨)
+
+    // === 위젯 종류 ===
+    case "exchange":
+      return <ExchangeWidget element={element} />;
+    case "weather":
+      return <WeatherWidget element={element} />;
+    case "calculator":
+      return <CalculatorWidget element={element} />;
+    case "clock":
+      return <ClockWidget element={element} />;
+    case "map-summary":
+      return <MapSummaryWidget element={element} />;
+    case "risk-alert":
+      return <RiskAlertWidget element={element} />;
+    case "calendar":
+      return <CalendarWidget element={element} />;
+    case "status-summary":
+      return <StatusSummaryWidget element={element} />;
+
+    // === 운영/작업 지원 ===
+    case "todo":
+      return <TodoWidget element={element} />;
+    case "booking-alert":
+      return <BookingAlertWidget element={element} />;
+    case "maintenance":
+      return <MaintenanceWidget />;
+    case "document":
+      return <DocumentWidget element={element} />;
+    case "list":
+      return <ListWidget element={element} />;
+
+    case "warehouse-3d":
+      return <Warehouse3DWidget element={element} />;
+
+    // === 차량 관련 (추가 위젯) ===
+    case "vehicle-status":
+      return <VehicleStatusWidget element={element} />;
+    case "vehicle-list":
+      return <VehicleListWidget element={element} />;
+    case "vehicle-map":
+      return <VehicleMapOnlyWidget element={element} />;
+
+    // === 배송 관련 (추가 위젯) ===
+    case "delivery-status":
+      return <DeliveryStatusWidget element={element} />;
+    case "delivery-status-summary":
+      return <DeliveryStatusSummaryWidget element={element} />;
+    case "delivery-today-stats":
+      return <DeliveryTodayStatsWidget element={element} />;
+    case "cargo-list":
+      return <CargoListWidget element={element} />;
+    case "customer-issues":
+      return <CustomerIssuesWidget element={element} />;
+
+    // === 기본 fallback ===
+    default:
+      return (
+        <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-400 to-gray-600 p-4 text-white">
+          <div className="text-center">
+            <div className="mb-2 text-3xl">❓</div>
+            <div className="text-sm">알 수 없는 위젯 타입: {element.subtype}</div>
+          </div>
+        </div>
+      );
+  }
+}
 
 interface DashboardViewerProps {
   elements: DashboardElement[];
-  dashboardId: string;
   refreshInterval?: number; // 전체 대시보드 새로고침 간격 (ms)
+  resolution?: string; // 대시보드 해상도
 }
 
 /**
  * 대시보드 뷰어 컴포넌트
  * - 저장된 대시보드를 읽기 전용으로 표시
  * - 실시간 데이터 업데이트
- * - 반응형 레이아웃
+ * - 편집 화면과 동일한 레이아웃 (중앙 정렬, 고정 크기)
  */
-export function DashboardViewer({ elements, dashboardId, refreshInterval }: DashboardViewerProps) {
+export function DashboardViewer({ elements, refreshInterval, resolution = "fhd" }: DashboardViewerProps) {
   const [elementData, setElementData] = useState<Record<string, QueryResult>>({});
   const [loadingElements, setLoadingElements] = useState<Set<string>>(new Set());
-  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+
+  // 캔버스 설정 계산
+  const canvasConfig = useMemo(() => {
+    return RESOLUTIONS[resolution as Resolution] || RESOLUTIONS.fhd;
+  }, [resolution]);
+
+  // 캔버스 높이 동적 계산
+  const canvasHeight = useMemo(() => {
+    if (elements.length === 0) {
+      return canvasConfig.height;
+    }
+    const maxBottomY = Math.max(...elements.map((el) => el.position.y + el.size.height));
+    return Math.max(canvasConfig.height, maxBottomY + 100);
+  }, [elements, canvasConfig.height]);
 
   // 개별 요소 데이터 로딩
   const loadElementData = useCallback(async (element: DashboardElement) => {
@@ -73,7 +202,7 @@ export function DashboardViewer({ elements, dashboardId, refreshInterval }: Dash
           [element.id]: data,
         }));
       }
-    } catch (error) {
+    } catch {
       // 에러 발생 시 무시 (차트는 빈 상태로 표시됨)
     } finally {
       setLoadingElements((prev) => {
@@ -86,8 +215,6 @@ export function DashboardViewer({ elements, dashboardId, refreshInterval }: Dash
 
   // 모든 요소 데이터 로딩
   const loadAllData = useCallback(async () => {
-    setLastRefresh(new Date());
-
     const chartElements = elements.filter((el) => el.type === "chart" && el.dataSource?.query);
 
     // 병렬로 모든 차트 데이터 로딩
@@ -123,17 +250,17 @@ export function DashboardViewer({ elements, dashboardId, refreshInterval }: Dash
   }
 
   return (
-    <div className="relative h-full w-full overflow-auto bg-gray-100">
-      {/* 새로고침 상태 표시 */}
-      <div className="text-muted-foreground absolute top-4 right-4 z-10 rounded-lg bg-white px-3 py-2 text-xs shadow-sm">
-        마지막 업데이트: {lastRefresh.toLocaleTimeString()}
-        {Array.from(loadingElements).length > 0 && (
-          <span className="text-primary ml-2">({Array.from(loadingElements).length}개 로딩 중...)</span>
-        )}
-      </div>
-
-      {/* 대시보드 요소들 */}
-      <div className="relative" style={{ minHeight: "100%" }}>
+    <div className="flex h-full items-start justify-center overflow-auto bg-gray-100 p-8">
+      {/* 고정 크기 캔버스 (편집 화면과 동일한 레이아웃) */}
+      <div
+        className="relative overflow-hidden rounded-lg"
+        style={{
+          width: `${canvasConfig.width}px`,
+          minHeight: `${canvasConfig.height}px`,
+          height: `${canvasHeight}px`,
+        }}
+      >
+        {/* 대시보드 요소들 */}
         {elements.map((element) => (
           <ViewerElement
             key={element.id}
@@ -173,42 +300,35 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* 헤더 */}
-      <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
-        <h3 className="text-sm font-semibold text-gray-800">{element.title}</h3>
+      {/* 헤더 (showHeader가 false가 아닐 때만 표시) */}
+      {element.showHeader !== false && (
+        <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
+          <h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
 
-        {/* 새로고침 버튼 (호버 시에만 표시) */}
-        {isHovered && (
-          <button
-            onClick={onRefresh}
-            disabled={isLoading}
-            className="hover:text-muted-foreground text-gray-400 disabled:opacity-50"
-            title="새로고침"
-          >
-            {isLoading ? (
-              <div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
-            ) : (
-              "🔄"
-            )}
-          </button>
-        )}
-      </div>
+          {/* 새로고침 버튼 (호버 시에만 표시) */}
+          {isHovered && (
+            <button
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="hover:text-muted-foreground text-gray-400 disabled:opacity-50"
+              title="새로고침"
+            >
+              {isLoading ? (
+                <div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
+              ) : (
+                "🔄"
+              )}
+            </button>
+          )}
+        </div>
+      )}
 
       {/* 내용 */}
-      <div className="h-[calc(100%-57px)]">
+      <div className={element.showHeader !== false ? "h-[calc(100%-57px)]" : "h-full"}>
         {element.type === "chart" ? (
           <ChartRenderer element={element} data={data} width={element.size.width} height={element.size.height - 57} />
         ) : (
-          // 위젯 렌더링
-          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-400 to-purple-600 p-4 text-white">
-            <div className="text-center">
-              <div className="mb-2 text-3xl">
-                {element.subtype === "exchange" && "💱"}
-                {element.subtype === "weather" && "☁️"}
-              </div>
-              <div className="text-sm whitespace-pre-line">{element.content}</div>
-            </div>
-          </div>
+          renderWidget(element)
         )}
       </div>
 
@@ -224,87 +344,3 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
     </div>
   );
 }
-
-/**
- * 샘플 쿼리 결과 생성 함수 (뷰어용)
- */
-function generateSampleQueryResult(query: string, chartType: string): QueryResult {
-  // 시간에 따라 약간씩 다른 데이터 생성 (실시간 업데이트 시뮬레이션)
-  const timeVariation = Math.sin(Date.now() / 10000) * 0.1 + 1;
-
-  const isMonthly = query.toLowerCase().includes("month");
-  const isSales = query.toLowerCase().includes("sales") || query.toLowerCase().includes("매출");
-  const isUsers = query.toLowerCase().includes("users") || query.toLowerCase().includes("사용자");
-  const isProducts = query.toLowerCase().includes("product") || query.toLowerCase().includes("상품");
-  const isWeekly = query.toLowerCase().includes("week");
-
-  let columns: string[];
-  let rows: Record<string, any>[];
-
-  if (isMonthly && isSales) {
-    columns = ["month", "sales", "order_count"];
-    rows = [
-      { month: "2024-01", sales: Math.round(1200000 * timeVariation), order_count: Math.round(45 * timeVariation) },
-      { month: "2024-02", sales: Math.round(1350000 * timeVariation), order_count: Math.round(52 * timeVariation) },
-      { month: "2024-03", sales: Math.round(1180000 * timeVariation), order_count: Math.round(41 * timeVariation) },
-      { month: "2024-04", sales: Math.round(1420000 * timeVariation), order_count: Math.round(58 * timeVariation) },
-      { month: "2024-05", sales: Math.round(1680000 * timeVariation), order_count: Math.round(67 * timeVariation) },
-      { month: "2024-06", sales: Math.round(1540000 * timeVariation), order_count: Math.round(61 * timeVariation) },
-    ];
-  } else if (isWeekly && isUsers) {
-    columns = ["week", "new_users"];
-    rows = [
-      { week: "2024-W10", new_users: Math.round(23 * timeVariation) },
-      { week: "2024-W11", new_users: Math.round(31 * timeVariation) },
-      { week: "2024-W12", new_users: Math.round(28 * timeVariation) },
-      { week: "2024-W13", new_users: Math.round(35 * timeVariation) },
-      { week: "2024-W14", new_users: Math.round(42 * timeVariation) },
-      { week: "2024-W15", new_users: Math.round(38 * timeVariation) },
-    ];
-  } else if (isProducts) {
-    columns = ["product_name", "total_sold", "revenue"];
-    rows = [
-      {
-        product_name: "스마트폰",
-        total_sold: Math.round(156 * timeVariation),
-        revenue: Math.round(234000000 * timeVariation),
-      },
-      {
-        product_name: "노트북",
-        total_sold: Math.round(89 * timeVariation),
-        revenue: Math.round(178000000 * timeVariation),
-      },
-      {
-        product_name: "태블릿",
-        total_sold: Math.round(134 * timeVariation),
-        revenue: Math.round(67000000 * timeVariation),
-      },
-      {
-        product_name: "이어폰",
-        total_sold: Math.round(267 * timeVariation),
-        revenue: Math.round(26700000 * timeVariation),
-      },
-      {
-        product_name: "스마트워치",
-        total_sold: Math.round(98 * timeVariation),
-        revenue: Math.round(49000000 * timeVariation),
-      },
-    ];
-  } else {
-    columns = ["category", "value", "count"];
-    rows = [
-      { category: "A", value: Math.round(100 * timeVariation), count: Math.round(10 * timeVariation) },
-      { category: "B", value: Math.round(150 * timeVariation), count: Math.round(15 * timeVariation) },
-      { category: "C", value: Math.round(120 * timeVariation), count: Math.round(12 * timeVariation) },
-      { category: "D", value: Math.round(180 * timeVariation), count: Math.round(18 * timeVariation) },
-      { category: "E", value: Math.round(90 * timeVariation), count: Math.round(9 * timeVariation) },
-    ];
-  }
-
-  return {
-    columns,
-    rows,
-    totalRows: rows.length,
-    executionTime: Math.floor(Math.random() * 100) + 50,
-  };
-}

frontend/components/dashboard/widgets/BookingAlertWidget.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { Check, X, Phone, MapPin, Package, Clock, AlertCircle } from "lucide-react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 interface BookingRequest {
   id: string;
@@ -19,7 +20,11 @@ interface BookingRequest {
   estimatedCost?: number;
 }
 
-export default function BookingAlertWidget() {
+interface BookingAlertWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function BookingAlertWidget({ element }: BookingAlertWidgetProps) {
   const [bookings, setBookings] = useState<BookingRequest[]>([]);
   const [newCount, setNewCount] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -156,7 +161,7 @@ export default function BookingAlertWidget() {
       <div className="border-b border-gray-200 bg-white px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-bold text-gray-800">🔔 예약 요청 알림</h3>
+            <h3 className="text-lg font-bold text-gray-800">🔔 {element?.customTitle || "예약 요청 알림"}</h3>
             {newCount > 0 && (
               <span className="flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white">
                 {newCount}

frontend/components/dashboard/widgets/CalculatorWidget.tsx

@@ -9,12 +9,14 @@
 
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { DashboardElement } from '@/components/admin/dashboard/types';
 
 interface CalculatorWidgetProps {
+  element?: DashboardElement;
   className?: string;
 }
 
-export default function CalculatorWidget({ className = '' }: CalculatorWidgetProps) {
+export default function CalculatorWidget({ element, className = '' }: CalculatorWidgetProps) {
   const [display, setDisplay] = useState<string>('0');
   const [previousValue, setPreviousValue] = useState<number | null>(null);
   const [operation, setOperation] = useState<string | null>(null);
@@ -117,7 +119,10 @@ export default function CalculatorWidget({ className = '' }: CalculatorWidgetPro
 
   return (
     <div className={`h-full w-full p-3 bg-gradient-to-br from-slate-50 to-gray-100 ${className}`}>
-      <div className="h-full flex flex-col justify-center gap-2">
+      <div className="h-full flex flex-col gap-2">
+        {/* 제목 */}
+        <h3 className="text-base font-semibold text-gray-900 text-center">🧮 {element?.customTitle || "계산기"}</h3>
+        
         {/* 디스플레이 */}
         <div className="bg-white border-2 border-gray-200 rounded-lg p-4 shadow-inner min-h-[80px]">
           <div className="text-right h-full flex flex-col justify-center">

frontend/components/dashboard/widgets/DocumentWidget.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import { FileText, Download, Calendar, Folder, Search } from "lucide-react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 interface Document {
   id: string;
@@ -13,64 +14,69 @@ interface Document {
   description?: string;
 }
 
-// 목 데이터
-const mockDocuments: Document[] = [
-  {
-    id: "1",
-    name: "2025년 1월 세금계산서.pdf",
-    category: "세금계산서",
-    size: "1.2 MB",
-    uploadDate: "2025-01-05",
-    url: "/documents/tax-invoice-202501.pdf",
-    description: "1월 매출 세금계산서",
-  },
-  {
-    id: "2",
-    name: "차량보험증권_서울12가3456.pdf",
-    category: "보험",
-    size: "856 KB",
-    uploadDate: "2024-12-20",
-    url: "/documents/insurance-vehicle-1.pdf",
-    description: "1톤 트럭 종합보험",
-  },
-  {
-    id: "3",
-    name: "운송계약서_ABC물류.pdf",
-    category: "계약서",
-    size: "2.4 MB",
-    uploadDate: "2024-12-15",
-    url: "/documents/contract-abc-logistics.pdf",
-    description: "ABC물류 연간 운송 계약",
-  },
-  {
-    id: "4",
-    name: "2024년 12월 세금계산서.pdf",
-    category: "세금계산서",
-    size: "1.1 MB",
-    uploadDate: "2024-12-05",
-    url: "/documents/tax-invoice-202412.pdf",
-  },
-  {
-    id: "5",
-    name: "화물배상책임보험증권.pdf",
-    category: "보험",
-    size: "720 KB",
-    uploadDate: "2024-11-30",
-    url: "/documents/cargo-insurance.pdf",
-    description: "화물 배상책임보험",
-  },
-  {
-    id: "6",
-    name: "차고지 임대계약서.pdf",
-    category: "계약서",
-    size: "1.8 MB",
-    uploadDate: "2024-11-15",
-    url: "/documents/garage-lease-contract.pdf",
-  },
-];
+// 목 데이터 (하드코딩 - 주석처리됨)
+// const mockDocuments: Document[] = [
+//   {
+//     id: "1",
+//     name: "2025년 1월 세금계산서.pdf",
+//     category: "세금계산서",
+//     size: "1.2 MB",
+//     uploadDate: "2025-01-05",
+//     url: "/documents/tax-invoice-202501.pdf",
+//     description: "1월 매출 세금계산서",
+//   },
+//   {
+//     id: "2",
+//     name: "차량보험증권_서울12가3456.pdf",
+//     category: "보험",
+//     size: "856 KB",
+//     uploadDate: "2024-12-20",
+//     url: "/documents/insurance-vehicle-1.pdf",
+//     description: "1톤 트럭 종합보험",
+//   },
+//   {
+//     id: "3",
+//     name: "운송계약서_ABC물류.pdf",
+//     category: "계약서",
+//     size: "2.4 MB",
+//     uploadDate: "2024-12-15",
+//     url: "/documents/contract-abc-logistics.pdf",
+//     description: "ABC물류 연간 운송 계약",
+//   },
+//   {
+//     id: "4",
+//     name: "2024년 12월 세금계산서.pdf",
+//     category: "세금계산서",
+//     size: "1.1 MB",
+//     uploadDate: "2024-12-05",
+//     url: "/documents/tax-invoice-202412.pdf",
+//   },
+//   {
+//     id: "5",
+//     name: "화물배상책임보험증권.pdf",
+//     category: "보험",
+//     size: "720 KB",
+//     uploadDate: "2024-11-30",
+//     url: "/documents/cargo-insurance.pdf",
+//     description: "화물 배상책임보험",
+//   },
+//   {
+//     id: "6",
+//     name: "차고지 임대계약서.pdf",
+//     category: "계약서",
+//     size: "1.8 MB",
+//     uploadDate: "2024-11-15",
+//     url: "/documents/garage-lease-contract.pdf",
+//   },
+// ];
 
-export default function DocumentWidget() {
-  const [documents] = useState<Document[]>(mockDocuments);
+interface DocumentWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function DocumentWidget({ element }: DocumentWidgetProps) {
+  // TODO: 실제 API 연동 필요
+  const [documents] = useState<Document[]>([]);
   const [filter, setFilter] = useState<"all" | Document["category"]>("all");
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -126,7 +132,7 @@ export default function DocumentWidget() {
       {/* 헤더 */}
       <div className="border-b border-gray-200 bg-white px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-lg font-bold text-gray-800">📂 문서 관리</h3>
+          <h3 className="text-lg font-bold text-gray-800">📂 {element?.customTitle || "문서 관리"}</h3>
           <button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90">
             + 업로드
           </button>

frontend/components/dashboard/widgets/ExchangeWidget.tsx

@@ -12,14 +12,17 @@ import { TrendingUp, TrendingDown, RefreshCw, ArrowRightLeft } from 'lucide-reac
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
+import { DashboardElement } from '@/components/admin/dashboard/types';
 
 interface ExchangeWidgetProps {
+  element?: DashboardElement;
   baseCurrency?: string;
   targetCurrency?: string;
   refreshInterval?: number; // 새로고침 간격 (ms), 기본값: 600000 (10분)
 }
 
 export default function ExchangeWidget({
+  element,
   baseCurrency = 'KRW',
   targetCurrency = 'USD',
   refreshInterval = 600000,
@@ -136,7 +139,7 @@ export default function ExchangeWidget({
       {/* 헤더 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex-1">
-          <h3 className="text-base font-semibold text-gray-900 mb-1">💱 환율</h3>
+          <h3 className="text-base font-semibold text-gray-900 mb-1">💱 {element?.customTitle || "환율"}</h3>
           <p className="text-xs text-gray-500">
             {lastUpdated
               ? `업데이트: ${lastUpdated.toLocaleTimeString('ko-KR', {

frontend/components/dashboard/widgets/MaintenanceWidget.tsx

@@ -14,51 +14,52 @@ interface MaintenanceSchedule {
   estimatedCost?: number;
 }
 
-// 목 데이터
-const mockSchedules: MaintenanceSchedule[] = [
-  {
-    id: "1",
-    vehicleNumber: "서울12가3456",
-    vehicleType: "1톤 트럭",
-    maintenanceType: "정기점검",
-    scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "scheduled",
-    notes: "6개월 정기점검",
-    estimatedCost: 300000,
-  },
-  {
-    id: "2",
-    vehicleNumber: "경기34나5678",
-    vehicleType: "2.5톤 트럭",
-    maintenanceType: "오일교환",
-    scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "scheduled",
-    estimatedCost: 150000,
-  },
-  {
-    id: "3",
-    vehicleNumber: "인천56다7890",
-    vehicleType: "라보",
-    maintenanceType: "타이어교체",
-    scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
-    status: "overdue",
-    notes: "긴급",
-    estimatedCost: 400000,
-  },
-  {
-    id: "4",
-    vehicleNumber: "부산78라1234",
-    vehicleType: "1톤 트럭",
-    maintenanceType: "수리",
-    scheduledDate: new Date().toISOString(),
-    status: "in_progress",
-    notes: "엔진 점검 중",
-    estimatedCost: 800000,
-  },
-];
+// 목 데이터 (하드코딩 - 주석처리됨)
+// const mockSchedules: MaintenanceSchedule[] = [
+//   {
+//     id: "1",
+//     vehicleNumber: "서울12가3456",
+//     vehicleType: "1톤 트럭",
+//     maintenanceType: "정기점검",
+//     scheduledDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
+//     status: "scheduled",
+//     notes: "6개월 정기점검",
+//     estimatedCost: 300000,
+//   },
+//   {
+//     id: "2",
+//     vehicleNumber: "경기34나5678",
+//     vehicleType: "2.5톤 트럭",
+//     maintenanceType: "오일교환",
+//     scheduledDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(),
+//     status: "scheduled",
+//     estimatedCost: 150000,
+//   },
+//   {
+//     id: "3",
+//     vehicleNumber: "인천56다7890",
+//     vehicleType: "라보",
+//     maintenanceType: "타이어교체",
+//     scheduledDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+//     status: "overdue",
+//     notes: "긴급",
+//     estimatedCost: 400000,
+//   },
+//   {
+//     id: "4",
+//     vehicleNumber: "부산78라1234",
+//     vehicleType: "1톤 트럭",
+//     maintenanceType: "수리",
+//     scheduledDate: new Date().toISOString(),
+//     status: "in_progress",
+//     notes: "엔진 점검 중",
+//     estimatedCost: 800000,
+//   },
+// ];
 
 export default function MaintenanceWidget() {
-  const [schedules] = useState<MaintenanceSchedule[]>(mockSchedules);
+  // TODO: 실제 API 연동 필요
+  const [schedules] = useState<MaintenanceSchedule[]>([]);
   const [filter, setFilter] = useState<"all" | MaintenanceSchedule["status"]>("all");
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 

frontend/components/dashboard/widgets/MapSummaryWidget.tsx

@@ -150,7 +150,8 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
     }
   };
 
-  const displayTitle = tableName ? `${translateTableName(tableName)} 위치` : "위치 지도";
+  // customTitle이 있으면 사용, 없으면 테이블명으로 자동 생성
+  const displayTitle = element.customTitle || (tableName ? `${translateTableName(tableName)} 위치` : "위치 지도");
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50 p-2">
@@ -181,13 +182,15 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
       )}
 
       {/* 지도 (항상 표시) */}
-      <div className="flex-1 rounded border border-gray-300 bg-white overflow-hidden">
+      <div className="relative flex-1 rounded border border-gray-300 bg-white overflow-hidden z-0">
         <MapContainer
+          key={`map-${element.id}`}
           center={[36.5, 127.5]}
           zoom={7}
-          style={{ height: "100%", width: "100%" }}
+          style={{ height: "100%", width: "100%", zIndex: 0 }}
           zoomControl={true}
           preferCanvas={true}
+          className="z-0"
         >
           {/* 브이월드 타일맵 */}
           <TileLayer

frontend/components/dashboard/widgets/RiskAlertWidget.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { RefreshCw, AlertTriangle, Cloud, Construction } from "lucide-react";
 import { apiClient } from "@/lib/api/client";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 // 알림 타입
 type AlertType = "accident" | "weather" | "construction";
@@ -21,7 +22,11 @@ interface Alert {
   timestamp: string;
 }
 
-export default function RiskAlertWidget() {
+interface RiskAlertWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   const [alerts, setAlerts] = useState<Alert[]>([]);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [filter, setFilter] = useState<AlertType | "all">("all");
@@ -163,7 +168,7 @@ export default function RiskAlertWidget() {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <AlertTriangle className="h-5 w-5 text-red-600" />
-          <h3 className="text-base font-semibold text-gray-900">리스크 / 알림</h3>
+          <h3 className="text-base font-semibold text-gray-900">{element?.customTitle || "리스크 / 알림"}</h3>
           {stats.high > 0 && (
             <Badge className="bg-red-100 text-red-700 hover:bg-red-100">긴급 {stats.high}건</Badge>
           )}

frontend/components/dashboard/widgets/StatusSummaryWidget.tsx

@@ -349,7 +349,8 @@ export default function StatusSummaryWidget({
     return name;
   };
 
-  const displayTitle = tableName ? `${translateTableName(tableName)} 현황` : title;
+  // customTitle이 있으면 사용, 없으면 테이블명으로 자동 생성
+  const displayTitle = element.customTitle || (tableName ? `${translateTableName(tableName)} 현황` : title);
 
   return (
     <div className={`flex h-full w-full flex-col overflow-hidden bg-gradient-to-br ${bgGradient} p-2`}>

frontend/components/dashboard/widgets/TodoWidget.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { Plus, Check, X, Clock, AlertCircle, GripVertical, ChevronDown } from "lucide-react";
+import { DashboardElement } from "@/components/admin/dashboard/types";
 
 interface TodoItem {
   id: string;
@@ -27,7 +28,11 @@ interface TodoStats {
   overdue: number;
 }
 
-export default function TodoWidget() {
+interface TodoWidgetProps {
+  element?: DashboardElement;
+}
+
+export default function TodoWidget({ element }: TodoWidgetProps) {
   const [todos, setTodos] = useState<TodoItem[]>([]);
   const [stats, setStats] = useState<TodoStats | null>(null);
   const [loading, setLoading] = useState(true);
@@ -193,7 +198,7 @@ export default function TodoWidget() {
       {/* 헤더 */}
       <div className="border-b border-gray-200 bg-white px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-lg font-bold text-gray-800">✅ To-Do / 긴급 지시</h3>
+          <h3 className="text-lg font-bold text-gray-800">✅ {element?.customTitle || "To-Do / 긴급 지시"}</h3>
           <button
             onClick={() => setShowAddForm(!showAddForm)}
             className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90"

frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx

@@ -172,13 +172,15 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
 
       {/* 지도 영역 - 브이월드 타일맵 */}
       <div className="h-[calc(100%-60px)]">
-        <div className="relative h-full overflow-hidden rounded-lg border-2 border-gray-300 bg-white">
+        <div className="relative h-full overflow-hidden rounded-lg border-2 border-gray-300 bg-white z-0">
           <MapContainer
+            key={`vehicle-map-${element.id}`}
             center={[36.5, 127.5]}
             zoom={7}
-            style={{ height: "100%", width: "100%" }}
+            style={{ height: "100%", width: "100%", zIndex: 0 }}
             zoomControl={true}
             preferCanvas={true}
+            className="z-0"
           >
               {/* 브이월드 타일맵 (HTTPS, 캐싱 적용) */}
               <TileLayer

frontend/components/dashboard/widgets/WeatherWidget.tsx

@@ -24,13 +24,16 @@ import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 import { cn } from '@/lib/utils';
+import { DashboardElement } from '@/components/admin/dashboard/types';
 
 interface WeatherWidgetProps {
+  element?: DashboardElement;
   city?: string;
   refreshInterval?: number; // 새로고침 간격 (ms), 기본값: 600000 (10분)
 }
 
 export default function WeatherWidget({
+  element,
   city = '서울',
   refreshInterval = 600000,
 }: WeatherWidgetProps) {
@@ -309,6 +312,7 @@ export default function WeatherWidget({
       {/* 헤더 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900 mb-1">🌤️ {element?.customTitle || "날씨"}</h3>
           <div className="flex items-center gap-2 mb-1">
             <Popover open={open} onOpenChange={setOpen}>
               <PopoverTrigger asChild>
@@ -316,10 +320,10 @@ export default function WeatherWidget({
                   variant="ghost"
                   role="combobox"
                   aria-expanded={open}
-                  className="justify-between text-lg font-semibold text-gray-900 hover:bg-white/50 h-auto py-1 px-2"
+                  className="justify-between text-sm text-gray-600 hover:bg-white/50 h-auto py-0.5 px-2"
                 >
                   {cities.find((city) => city.value === selectedCity)?.label || '도시 선택'}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="w-[200px] p-0" align="start">

frontend/lib/api/dashboard.ts

@@ -5,7 +5,7 @@
 import { DashboardElement } from "@/components/admin/dashboard/types";
 
 // API 기본 설정
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api";
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "/api";
 
 // 토큰 가져오기 (실제 인증 시스템에 맞게 수정)
 function getAuthToken(): string | null {
@@ -78,6 +78,10 @@ export interface Dashboard {
   elementsCount?: number;
   creatorName?: string;
   elements?: DashboardElement[];
+  settings?: {
+    resolution?: string;
+    backgroundColor?: string;
+  };
 }
 
 export interface CreateDashboardRequest {
@@ -87,6 +91,10 @@ export interface CreateDashboardRequest {
   elements: DashboardElement[];
   tags?: string[];
   category?: string;
+  settings?: {
+    resolution?: string;
+    backgroundColor?: string;
+  };
 }
 
 export interface DashboardListQuery {

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"

scripts/prod/deploy.sh

@@ -20,17 +20,10 @@ echo ""
 echo "[1/6] Git 최신 코드 가져오기..."
 git pull origin main
 
-# 호스트 디렉토리 준비
+# Docker 볼륨 사용으로 호스트 디렉토리 준비 불필요
 echo ""
-echo "[2/6] 호스트 디렉토리 준비..."
-mkdir -p /home/vexplor/backend_data/data/mail-sent
-mkdir -p /home/vexplor/backend_data/uploads/mail-attachments
-mkdir -p /home/vexplor/backend_data/uploads/mail-templates
-mkdir -p /home/vexplor/backend_data/uploads/mail-accounts
-mkdir -p /home/vexplor/frontend_data
-chmod -R 755 /home/vexplor/backend_data
-chmod -R 755 /home/vexplor/frontend_data
-echo "디렉토리 생성 완료 (mail-sent, mail-attachments, mail-templates, mail-accounts, frontend)"
+echo "[2/6] Docker 볼륨 확인..."
+echo "Docker named volumes 사용 (권한 문제 없음)"
 
 # 기존 컨테이너 중지 및 제거
 echo ""