From 90cac4feb50625b8e6adbb7b11815bfd0ca85af7 Mon Sep 17 00:00:00 2001 From: sana2d2v <196260171+Sana2d2v@users.noreply.github.com> Date: Fri, 28 Nov 2025 12:03:05 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=B6=94=EA=B0=80?= =?UTF-8?q?=EC=A4=91..?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floorPlan/components/LeftSidebar/AssetLibrary.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/domains/serverView/floorPlan/components/LeftSidebar/AssetLibrary.tsx b/src/domains/serverView/floorPlan/components/LeftSidebar/AssetLibrary.tsx index 1c8b945..8da2a11 100644 --- a/src/domains/serverView/floorPlan/components/LeftSidebar/AssetLibrary.tsx +++ b/src/domains/serverView/floorPlan/components/LeftSidebar/AssetLibrary.tsx @@ -1,3 +1,11 @@ +/** + * @author 최산하 + * @description 장비 라이브러리 컴포넌트 - 배치 가능한 장비 목록을 제공하고 드래그 앤 드롭 기능을 지원 + * 서버 랙, 냉각기, 도어 등 서버실 구성에 필요한 3D 장비 템플릿 데이터(EQUIPMENT_LIBRARY) 관리 + * @dnd-kit/core의 useDraggable 훅을 사용하여 장비 아이템의 드래그 소스(Source) 기능 구현 + * 각 장비의 아이콘, 이름, 기본 속성(크기, 색상)을 시각적으로 렌더링 + * 마우스 호버 및 드래그 상태에 따른 직관적인 UI 인터랙션 제공 + */ import React from 'react'; import { useDraggable } from '@dnd-kit/core'; import type { Asset, UHeight } from '../../types'; From 2d6ddfcb1b1af908691bf435fb9d9e0c0a4d558a Mon Sep 17 00:00:00 2001 From: sana2d2v <196260171+Sana2d2v@users.noreply.github.com> Date: Fri, 28 Nov 2025 12:06:46 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=B6=94=EA=B0=80?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resourceManage/components/HeaderCheckbox.tsx | 3 +++ .../components/ResourceFilters.tsx | 3 +++ .../components/ResourcePaginationActions.tsx | 4 +++- .../resourceManage/components/ResourceTable.tsx | 3 +++ .../components/ResourceWizardModal.tsx | 3 +++ .../components/resourceTable.config.tsx | 3 +++ .../constants/resource.constants.ts | 3 +++ src/domains/resourceManage/hooks/useDebounce.ts | 3 +++ .../resourceManage/hooks/useResourceQueries.ts | 3 +++ .../resourceManage/pages/ResourceManagePage.tsx | 2 +- .../resourceManage/types/resource.types.ts | 3 +++ src/domains/serverRoom/api/serverRoomApi.ts | 3 +++ .../serverRoom/components/DashboardModals.tsx | 3 +++ .../serverRoom/components/DashboardStats.tsx | 3 +++ .../components/DataCenterCreateModal.tsx | 3 +++ .../components/DataCenterEditModal.tsx | 3 +++ .../components/DataCenterTabDropdown.tsx | 3 +++ .../serverRoom/components/DataCenterTabs.tsx | 3 +++ .../serverRoom/components/ServerRoomCard.tsx | 3 +++ .../components/ServerRoomCreateModal.tsx | 3 +++ .../components/ServerRoomEditModal.tsx | 3 +++ .../serverRoom/components/ServerRoomList.tsx | 4 ++++ .../serverRoom/hooks/useDataCenterActions.ts | 3 +++ .../serverRoom/hooks/useServerRoomActions.ts | 3 +++ src/domains/serverRoom/types/index.ts | 3 +++ .../serverView/components/EquipmentPalette3D.tsx | 3 +++ .../components/ServerRoomHistoryPanel.tsx | 3 +++ .../components/ServerRoomStatsPanel.tsx | 3 +++ .../serverView/components/ServerViewHeader.tsx | 3 +++ .../floorPlan/components/AssetActionToolbar.tsx | 7 +++++++ .../floorPlan/components/AssetRenderer.tsx | 16 ++++++++++++---- .../serverView/floorPlan/components/Canvas.tsx | 7 +++++++ .../floorPlan/components/CanvasContextMenu.tsx | 7 +++++++ .../floorPlan/components/CanvasGrid.tsx | 7 +++++++ .../floorPlan/components/DashboardAssetView.tsx | 7 +++++++ .../components/FloatingSidebarPanel.tsx | 9 ++++++++- .../components/FloorPlanConfirmationModal.tsx | 10 ++++++++-- .../floorPlan/components/HeatmapLayer.tsx | 9 ++++++++- .../floorPlan/components/LayoutAssetView.tsx | 7 +++++++ .../components/LeftSidebar/DisplayOptions.tsx | 9 ++++++++- .../components/LeftSidebar/PropertiesPanel.tsx | 9 +++++++++ .../LeftSidebar/StatusLegendAndFilters.tsx | 9 ++++++++- .../floorPlan/components/LeftSidebar/index.tsx | 9 ++++++++- .../floorPlan/components/MagnifierWidget.tsx | 7 +++++++ .../components/RightSidebar/PropertiesEditor.tsx | 9 +++++++++ .../components/RightSidebar/PropertiesViewer.tsx | 8 ++++++++ .../floorPlan/components/RightSidebar/index.tsx | 9 ++++++++- .../floorPlan/components/TopNWidget.tsx | 7 +++++++ .../floorPlan/components/TopToolbar.tsx | 7 +++++++ .../floorPlan/hooks/useConfirmationModal.ts | 7 +++++++ .../floorPlan/hooks/useFloorPlanDragDrop.ts | 7 +++++++ .../hooks/useFloorPlanNavigationGuard.tsx | 7 +++++++ .../serverView/floorPlan/pages/FloorPlanPage.tsx | 2 +- .../serverView/floorPlan/store/floorPlanStore.ts | 7 +++++++ .../floorPlan/store/useSidebarStore.ts | 5 +++++ src/domains/serverView/floorPlan/types/index.ts | 3 +++ .../serverView/floorPlan/utils/collision.ts | 3 +++ 57 files changed, 283 insertions(+), 15 deletions(-) diff --git a/src/domains/resourceManage/components/HeaderCheckbox.tsx b/src/domains/resourceManage/components/HeaderCheckbox.tsx index f51aacc..f0ba756 100644 --- a/src/domains/resourceManage/components/HeaderCheckbox.tsx +++ b/src/domains/resourceManage/components/HeaderCheckbox.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useRef, useEffect } from 'react'; import type { Table } from '@tanstack/react-table'; import type { Resource } from '../types/resource.types'; diff --git a/src/domains/resourceManage/components/ResourceFilters.tsx b/src/domains/resourceManage/components/ResourceFilters.tsx index aff4629..ee4cba7 100644 --- a/src/domains/resourceManage/components/ResourceFilters.tsx +++ b/src/domains/resourceManage/components/ResourceFilters.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { Search } from 'lucide-react'; import { EQUIPMENT_TYPE_OPTIONS, diff --git a/src/domains/resourceManage/components/ResourcePaginationActions.tsx b/src/domains/resourceManage/components/ResourcePaginationActions.tsx index 6036149..28fd22e 100644 --- a/src/domains/resourceManage/components/ResourcePaginationActions.tsx +++ b/src/domains/resourceManage/components/ResourcePaginationActions.tsx @@ -1,4 +1,6 @@ - +/** + * @author 최산하 + */ import { useState } from 'react'; import type { Table } from '@tanstack/react-table'; import type { Resource, ResourceStatus } from '../types/resource.types'; diff --git a/src/domains/resourceManage/components/ResourceTable.tsx b/src/domains/resourceManage/components/ResourceTable.tsx index f9a2155..38a3e34 100644 --- a/src/domains/resourceManage/components/ResourceTable.tsx +++ b/src/domains/resourceManage/components/ResourceTable.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { flexRender } from '@tanstack/react-table'; import type { Table as TanStackTable, diff --git a/src/domains/resourceManage/components/ResourceWizardModal.tsx b/src/domains/resourceManage/components/ResourceWizardModal.tsx index 827ae74..30a2c71 100644 --- a/src/domains/resourceManage/components/ResourceWizardModal.tsx +++ b/src/domains/resourceManage/components/ResourceWizardModal.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useState, useEffect, useMemo } from "react"; import { useForm, diff --git a/src/domains/resourceManage/components/resourceTable.config.tsx b/src/domains/resourceManage/components/resourceTable.config.tsx index 1d96410..5a90c94 100644 --- a/src/domains/resourceManage/components/resourceTable.config.tsx +++ b/src/domains/resourceManage/components/resourceTable.config.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import type { ColumnDef } from "@tanstack/react-table"; import type { Resource, diff --git a/src/domains/resourceManage/constants/resource.constants.ts b/src/domains/resourceManage/constants/resource.constants.ts index 8d5b0c0..12b2681 100644 --- a/src/domains/resourceManage/constants/resource.constants.ts +++ b/src/domains/resourceManage/constants/resource.constants.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import type { EquipmentType, ResourceStatus, diff --git a/src/domains/resourceManage/hooks/useDebounce.ts b/src/domains/resourceManage/hooks/useDebounce.ts index d301f1d..3539a13 100644 --- a/src/domains/resourceManage/hooks/useDebounce.ts +++ b/src/domains/resourceManage/hooks/useDebounce.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useState, useEffect } from "react"; /** diff --git a/src/domains/resourceManage/hooks/useResourceQueries.ts b/src/domains/resourceManage/hooks/useResourceQueries.ts index 13ffbb6..b1a7a98 100644 --- a/src/domains/resourceManage/hooks/useResourceQueries.ts +++ b/src/domains/resourceManage/hooks/useResourceQueries.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import toast from "react-hot-toast"; import { diff --git a/src/domains/resourceManage/pages/ResourceManagePage.tsx b/src/domains/resourceManage/pages/ResourceManagePage.tsx index 1afbfc7..8f0ebea 100644 --- a/src/domains/resourceManage/pages/ResourceManagePage.tsx +++ b/src/domains/resourceManage/pages/ResourceManagePage.tsx @@ -1,5 +1,5 @@ /** - * @author 김대호 + * @author 최산하 * @description 리소스 관리 페이지 - 서버 및 네트워크 장비 등 IT 리소스를 관리하는 페이지 * 리소스 목록 조회, 필터링, 추가, 수정, 삭제 기능 제공 * 위저드 형식의 모달로 리소스 생성 프로세스 간소화 diff --git a/src/domains/resourceManage/types/resource.types.ts b/src/domains/resourceManage/types/resource.types.ts index db37c80..4849d67 100644 --- a/src/domains/resourceManage/types/resource.types.ts +++ b/src/domains/resourceManage/types/resource.types.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import type { TableMeta } from "@tanstack/react-table"; // NOTE(user): 3단계 폼 기준 자원 상태 타입 diff --git a/src/domains/serverRoom/api/serverRoomApi.ts b/src/domains/serverRoom/api/serverRoomApi.ts index 2b87b6e..d521d2e 100644 --- a/src/domains/serverRoom/api/serverRoomApi.ts +++ b/src/domains/serverRoom/api/serverRoomApi.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import client from "@api/client"; import type { DataCenterGroup, ServerRoom, CompanyServerRoomsResponse } from "../types"; diff --git a/src/domains/serverRoom/components/DashboardModals.tsx b/src/domains/serverRoom/components/DashboardModals.tsx index 6ea74ad..a58ddfe 100644 --- a/src/domains/serverRoom/components/DashboardModals.tsx +++ b/src/domains/serverRoom/components/DashboardModals.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import ServerRoomCreateModal from "./ServerRoomCreateModal"; import ServerRoomEditModal from "./ServerRoomEditModal"; import DataCenterCreateModal from "./DataCenterCreateModal"; diff --git a/src/domains/serverRoom/components/DashboardStats.tsx b/src/domains/serverRoom/components/DashboardStats.tsx index 70701bf..459e47a 100644 --- a/src/domains/serverRoom/components/DashboardStats.tsx +++ b/src/domains/serverRoom/components/DashboardStats.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ interface DashboardStatsProps { stats: { totalDataCenters: number; diff --git a/src/domains/serverRoom/components/DataCenterCreateModal.tsx b/src/domains/serverRoom/components/DataCenterCreateModal.tsx index 67ec16e..b194db2 100644 --- a/src/domains/serverRoom/components/DataCenterCreateModal.tsx +++ b/src/domains/serverRoom/components/DataCenterCreateModal.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useForm } from "react-hook-form"; import type { SubmitHandler } from "react-hook-form"; import { X } from "lucide-react"; diff --git a/src/domains/serverRoom/components/DataCenterEditModal.tsx b/src/domains/serverRoom/components/DataCenterEditModal.tsx index e6808f9..4960adf 100644 --- a/src/domains/serverRoom/components/DataCenterEditModal.tsx +++ b/src/domains/serverRoom/components/DataCenterEditModal.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useForm } from "react-hook-form"; import type { SubmitHandler } from "react-hook-form"; import { X } from "lucide-react"; diff --git a/src/domains/serverRoom/components/DataCenterTabDropdown.tsx b/src/domains/serverRoom/components/DataCenterTabDropdown.tsx index 8f608fd..0d4cd9c 100644 --- a/src/domains/serverRoom/components/DataCenterTabDropdown.tsx +++ b/src/domains/serverRoom/components/DataCenterTabDropdown.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import React, { useState, useEffect } from "react"; import { HiDotsVertical } from "react-icons/hi"; import type { DataCenterGroup } from "../types"; diff --git a/src/domains/serverRoom/components/DataCenterTabs.tsx b/src/domains/serverRoom/components/DataCenterTabs.tsx index 4aaa398..2e6c69f 100644 --- a/src/domains/serverRoom/components/DataCenterTabs.tsx +++ b/src/domains/serverRoom/components/DataCenterTabs.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { Plus } from "lucide-react"; import { DataCenterTabDropdown } from "./DataCenterTabDropdown"; import type { DataCenterGroup } from "../types"; diff --git a/src/domains/serverRoom/components/ServerRoomCard.tsx b/src/domains/serverRoom/components/ServerRoomCard.tsx index fb12060..bf93b8f 100644 --- a/src/domains/serverRoom/components/ServerRoomCard.tsx +++ b/src/domains/serverRoom/components/ServerRoomCard.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useNavigate } from "react-router-dom"; import type { ServerRoom } from "../types"; import { FaMapMarkerAlt, FaPencilAlt, FaTrash } from "react-icons/fa"; diff --git a/src/domains/serverRoom/components/ServerRoomCreateModal.tsx b/src/domains/serverRoom/components/ServerRoomCreateModal.tsx index d7b632e..cc4b576 100644 --- a/src/domains/serverRoom/components/ServerRoomCreateModal.tsx +++ b/src/domains/serverRoom/components/ServerRoomCreateModal.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useForm } from "react-hook-form"; import type { SubmitHandler } from "react-hook-form"; import { X } from "lucide-react"; diff --git a/src/domains/serverRoom/components/ServerRoomEditModal.tsx b/src/domains/serverRoom/components/ServerRoomEditModal.tsx index 6ede64c..0ea4687 100644 --- a/src/domains/serverRoom/components/ServerRoomEditModal.tsx +++ b/src/domains/serverRoom/components/ServerRoomEditModal.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useForm } from "react-hook-form"; import type { SubmitHandler } from "react-hook-form"; import { X } from "lucide-react"; diff --git a/src/domains/serverRoom/components/ServerRoomList.tsx b/src/domains/serverRoom/components/ServerRoomList.tsx index 3576bf1..066bc05 100644 --- a/src/domains/serverRoom/components/ServerRoomList.tsx +++ b/src/domains/serverRoom/components/ServerRoomList.tsx @@ -1,3 +1,7 @@ + +/** + * @author 최산하 + */ import type { DataCenterGroup, ServerRoom } from '../types'; import ServerRoomCard from './ServerRoomCard'; import '../css/serverRoomList.css'; diff --git a/src/domains/serverRoom/hooks/useDataCenterActions.ts b/src/domains/serverRoom/hooks/useDataCenterActions.ts index 7e4339f..5746223 100644 --- a/src/domains/serverRoom/hooks/useDataCenterActions.ts +++ b/src/domains/serverRoom/hooks/useDataCenterActions.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useState } from "react"; import { useDeleteDataCenter } from "./useServerRoomQueries"; import type { DataCenterGroup } from "../types"; diff --git a/src/domains/serverRoom/hooks/useServerRoomActions.ts b/src/domains/serverRoom/hooks/useServerRoomActions.ts index 295d542..a7854d2 100644 --- a/src/domains/serverRoom/hooks/useServerRoomActions.ts +++ b/src/domains/serverRoom/hooks/useServerRoomActions.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useState } from "react"; import { useDeleteServerRoom } from "./useServerRoomQueries"; import type { ServerRoom } from "../types"; diff --git a/src/domains/serverRoom/types/index.ts b/src/domains/serverRoom/types/index.ts index 1372826..407dd75 100644 --- a/src/domains/serverRoom/types/index.ts +++ b/src/domains/serverRoom/types/index.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ export interface ServerRoom { id: number; name: string; // 서버실 이름 diff --git a/src/domains/serverView/components/EquipmentPalette3D.tsx b/src/domains/serverView/components/EquipmentPalette3D.tsx index 5a142ee..525a5ab 100644 --- a/src/domains/serverView/components/EquipmentPalette3D.tsx +++ b/src/domains/serverView/components/EquipmentPalette3D.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { EQUIPMENT_PALETTE } from '../constants/config'; import type { EquipmentType } from '../types'; import { EquipmentPalette } from '@/shared/equipment'; diff --git a/src/domains/serverView/components/ServerRoomHistoryPanel.tsx b/src/domains/serverView/components/ServerRoomHistoryPanel.tsx index 8d6f91b..026cc58 100644 --- a/src/domains/serverView/components/ServerRoomHistoryPanel.tsx +++ b/src/domains/serverView/components/ServerRoomHistoryPanel.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useState, useEffect, useRef } from "react"; import { MdHistory, MdClose, MdFilterList } from "react-icons/md"; import { FiGitCommit } from "react-icons/fi"; diff --git a/src/domains/serverView/components/ServerRoomStatsPanel.tsx b/src/domains/serverView/components/ServerRoomStatsPanel.tsx index a939af4..ae65c12 100644 --- a/src/domains/serverView/components/ServerRoomStatsPanel.tsx +++ b/src/domains/serverView/components/ServerRoomStatsPanel.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { Cpu, MemoryStick, HardDrive, Network, Thermometer, Droplets, Server, Box } from 'lucide-react'; import { useServerRoomSSE } from '@shared/hooks'; diff --git a/src/domains/serverView/components/ServerViewHeader.tsx b/src/domains/serverView/components/ServerViewHeader.tsx index 893fca8..3d6fa5b 100644 --- a/src/domains/serverView/components/ServerViewHeader.tsx +++ b/src/domains/serverView/components/ServerViewHeader.tsx @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import { useNavigate, useLocation } from "react-router-dom"; import { useStore } from "zustand"; import { useState, useRef, useEffect } from "react"; diff --git a/src/domains/serverView/floorPlan/components/AssetActionToolbar.tsx b/src/domains/serverView/floorPlan/components/AssetActionToolbar.tsx index 89df733..1c7641a 100644 --- a/src/domains/serverView/floorPlan/components/AssetActionToolbar.tsx +++ b/src/domains/serverView/floorPlan/components/AssetActionToolbar.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 자산 회전 툴바 - 편집 모드에서 단일 자산 선택 시 하단에 플로팅되는 회전 제어 패널 + * 선택된 자산을 시계(CW) 또는 반시계(CCW) 방향으로 90도씩 회전시키는 기능 제공 + * 'edit' 모드이면서 '단일 선택' 상태일 때만 조건부 렌더링되어 작업 화면의 간섭 최소화 + * Zustand 스토어의 updateAsset 액션을 호출하여 회전각(Rotation) 상태를 즉시 업데이트 + */ import React from 'react'; import { useFloorPlanStore, updateAsset } from '../store/floorPlanStore'; import { RotateCw, RotateCcw } from 'lucide-react'; diff --git a/src/domains/serverView/floorPlan/components/AssetRenderer.tsx b/src/domains/serverView/floorPlan/components/AssetRenderer.tsx index f465bab..941ee3d 100644 --- a/src/domains/serverView/floorPlan/components/AssetRenderer.tsx +++ b/src/domains/serverView/floorPlan/components/AssetRenderer.tsx @@ -1,4 +1,12 @@ - +/** + * @author 최산하 + * @description 자산 렌더러 컴포넌트 - 모드와 자산 타입에 따라 적절한 시각화 컴포넌트를 분기 처리(Dispatcher) + * 'edit' 모드: 편집이 가능한 LayoutAssetView 렌더링 + * 'view' 모드: + * - 'status' 디스플레이 모드이면서 'Rack(랙)'인 경우: 상태 모니터링용 DashboardAssetView 렌더링 + * - 그 외(비-랙 자산 또는 일반 보기 모드): 표준 LayoutAssetView 렌더링 + * Konva Canvas 내부에서 각 자산 객체를 그리는 진입점 역할 수행 + */ import React from 'react'; import { useFloorPlanStore } from '../store/floorPlanStore'; import type { Asset, DisplayMode, DisplayOptionsType } from '../types'; @@ -37,14 +45,14 @@ const AssetRenderer: React.FC = (props) => { if (mode === 'view') { if (displayMode === 'status') { // '상태 임계값' 모드 if (asset.assetType === 'rack') { - // 🌟 2. currentScale prop 전달 + // 2. currentScale prop 전달 return ; } else { - // 🌟 2. currentScale prop 전달 + // 2. currentScale prop 전달 return ; } } else { - // 🌟 2. currentScale prop 전달 + // 2. currentScale prop 전달 return ; } } diff --git a/src/domains/serverView/floorPlan/components/Canvas.tsx b/src/domains/serverView/floorPlan/components/Canvas.tsx index e4173bb..1a5823b 100644 --- a/src/domains/serverView/floorPlan/components/Canvas.tsx +++ b/src/domains/serverView/floorPlan/components/Canvas.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 메인 2D 캔버스 컴포넌트 - 서버실 평면도 시각화 및 편집의 핵심 영역 + * Konva.js(react-konva) 기반의 Stage/Layer 구조를 통해 그리드, 자산, 히트맵을 렌더링 + * 마우스 휠 줌/팬, 외부 자산 드래그 앤 드롭 배치, 우클릭 컨텍스트 메뉴 등 주요 인터랙션 처리 + * 보기 모드(View/Edit) 및 대시보드 옵션(히트맵, 상태 필터)에 따른 동적 렌더링 지원 + */ import React, { useState, useLayoutEffect, useEffect } from 'react'; import { Stage, Layer, Group } from 'react-konva'; import { useDroppable } from '@dnd-kit/core'; diff --git a/src/domains/serverView/floorPlan/components/CanvasContextMenu.tsx b/src/domains/serverView/floorPlan/components/CanvasContextMenu.tsx index 4930f90..03ba613 100644 --- a/src/domains/serverView/floorPlan/components/CanvasContextMenu.tsx +++ b/src/domains/serverView/floorPlan/components/CanvasContextMenu.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 캔버스 컨텍스트 메뉴 컴포넌트 - 자산 우클릭 시 나타나는 팝업 메뉴 + * 마우스 포인터 좌표(x, y)를 기준으로 메뉴를 표시하고 자산 삭제 기능을 제공 + * useRef와 이벤트 리스너를 활용하여 메뉴 외부 영역 클릭 시 자동으로 닫히는 로직 구현 + * 배경 흐림(backdrop-blur) 및 그림자 효과를 적용하여 시각적 계층 구분 + */ import React, { useEffect, useRef } from 'react'; import { Trash2 } from 'lucide-react'; diff --git a/src/domains/serverView/floorPlan/components/CanvasGrid.tsx b/src/domains/serverView/floorPlan/components/CanvasGrid.tsx index 0ebb075..ad9efeb 100644 --- a/src/domains/serverView/floorPlan/components/CanvasGrid.tsx +++ b/src/domains/serverView/floorPlan/components/CanvasGrid.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 캔버스 그리드 컴포넌트 - 서버실의 바닥면과 좌표계를 시각화 + * 격자(Grid) 라인과 행(숫자)/열(알파벳) 헤더를 렌더링하여 자산의 위치 식별을 도움 + * 대시보드 모드('status') 여부에 따라 배경색을 동적으로 변경하여 시각적 모드 구분 (어두운 테마/일반 테마) + * React-Konva의 Group, Rect, Line, Text를 사용하여 고성능 벡터 그래픽으로 구현 + */ import React from 'react'; import { Group, Line, Text, Rect } from 'react-konva'; diff --git a/src/domains/serverView/floorPlan/components/DashboardAssetView.tsx b/src/domains/serverView/floorPlan/components/DashboardAssetView.tsx index 082626e..f46f729 100644 --- a/src/domains/serverView/floorPlan/components/DashboardAssetView.tsx +++ b/src/domains/serverView/floorPlan/components/DashboardAssetView.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 대시보드 자산 뷰 컴포넌트 - 2D 캔버스 상에서 서버 랙의 실시간 상태와 성능 지표를 시각화 + * CPU, 메모리, 온도 등 센서 데이터에 따라 색상(정상/주의/위험) 및 아이콘을 동적으로 변경하여 직관적인 모니터링 지원 + * 줌 레벨(Scale)에 따른 LOD(Level of Detail) 처리를 통해 축소 시에는 개요만, 확대 시에는 상세 게이지 및 텍스트 표시 + * 사용자가 선택한 Metric View 모드(기본, CPU 상세, 전력/네트워크 등)에 따라 내부 렌더링 레이아웃 분기 처리 + */ import React from "react"; import { Group, Rect, Text } from "react-konva"; import type { KonvaEventObject } from "konva/lib/Node"; diff --git a/src/domains/serverView/floorPlan/components/FloatingSidebarPanel.tsx b/src/domains/serverView/floorPlan/components/FloatingSidebarPanel.tsx index 978b3fd..342837a 100644 --- a/src/domains/serverView/floorPlan/components/FloatingSidebarPanel.tsx +++ b/src/domains/serverView/floorPlan/components/FloatingSidebarPanel.tsx @@ -1,4 +1,11 @@ - +/** + * @author 최산하 + * @description 플로팅 사이드바 패널 컴포넌트 - 화면 좌/우측에 배치되어 슬라이딩 애니메이션으로 열고 닫히는 UI 컨테이너 + * position prop('left' | 'right')에 따라 패널 위치 및 진입/이탈 방향 자동 계산 + * CSS Transform과 Transition을 활용하여 부드러운 슬라이드 효과 구현 + * 패널 측면에 부착된 토글 버튼을 통해 직관적인 개폐 제어 가능 + * Backdrop-blur(배경 흐림) 효과를 적용하여 모던한 글래스모피즘 스타일 제공 + */ import React from 'react'; import { ChevronLeft, ChevronRight } from 'lucide-react'; diff --git a/src/domains/serverView/floorPlan/components/FloorPlanConfirmationModal.tsx b/src/domains/serverView/floorPlan/components/FloorPlanConfirmationModal.tsx index a1e4e3f..b5d9696 100644 --- a/src/domains/serverView/floorPlan/components/FloorPlanConfirmationModal.tsx +++ b/src/domains/serverView/floorPlan/components/FloorPlanConfirmationModal.tsx @@ -1,6 +1,12 @@ -// 1. 방금 수정한 "진짜" 공통 모달(Props 기반)을 가져옵니다. +/** + * @author 최산하 + * @description ServerView(Floor Plan) 전용 확인 모달 래퍼 컴포넌트 + * 전역 상태 관리 훅인 'useModalStore'와 공통 UI 컴포넌트 'ConfirmationModal'을 연결하는 브릿지 역할 + * 스토어의 상태(isOpen, title, message)를 구독하여 모달의 렌더링 여부 및 컨텐츠 제어 + * 확인 버튼 텍스트('삭제', '나가기')를 분석하여 파괴적 액션(isDestructive) 여부를 자동으로 판단 및 스타일 적용 + */ import { ConfirmationModal } from '@shared/ConfirmationModal'; -// 2. serverView의 전용 스토어를 가져옵니다. + import { useModalStore } from '../hooks/useConfirmationModal'; /** diff --git a/src/domains/serverView/floorPlan/components/HeatmapLayer.tsx b/src/domains/serverView/floorPlan/components/HeatmapLayer.tsx index 922e95e..8bbbd23 100644 --- a/src/domains/serverView/floorPlan/components/HeatmapLayer.tsx +++ b/src/domains/serverView/floorPlan/components/HeatmapLayer.tsx @@ -1,4 +1,11 @@ - +/** + * @author 최산하 + * @description 히트맵 시각화 레이어 컴포넌트 - 서버실 내 온도 및 전력 분포를 직관적인 열지도(Heatmap) 형태로 표현 + * 자산의 센서 데이터(온도, 전력량)를 정규화하여 시각적 가중치(반지름, 투명도)로 변환하는 로직 수행 + * React-Konva의 Circle과 RadialGradient를 활용하여 부드러운 그라데이션 효과 구현 + * globalCompositeOperation="lighter" 속성을 적용하여 데이터 중첩 구역(Hotspot)을 자연스럽게 강조 + * viewMode에 따라 온도(Red) 및 전력(Yellow) 테마를 동적으로 전환 + */ import React, { useMemo } from 'react'; import { Group, Circle } from 'react-konva'; import { useFloorPlanStore } from '../store/floorPlanStore'; diff --git a/src/domains/serverView/floorPlan/components/LayoutAssetView.tsx b/src/domains/serverView/floorPlan/components/LayoutAssetView.tsx index 30b1de8..177b125 100644 --- a/src/domains/serverView/floorPlan/components/LayoutAssetView.tsx +++ b/src/domains/serverView/floorPlan/components/LayoutAssetView.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 평면도 자산 렌더링 및 편집 컴포넌트 - 2D 캔버스 상에서 개별 자산의 시각화와 배치 상호작용 담당 + * 자산의 그리드 위치와 크기를 계산하여 렌더링하고, 상태(Status) 및 선택 여부에 따른 동적 스타일링 제공 + * Konva Drag 이벤트와 연동하여 자산(및 그룹) 이동, 충돌 감지, 경계 이탈 방지 로직 수행 + * 랙(Rack) 및 문(Door)의 회전 방향을 고려한 상세 뷰와 편집/보기 모드에 따른 텍스트 라벨링 제어 + */ import React from 'react'; import { Group, Rect, Text, Circle } from 'react-konva'; import type { KonvaEventObject } from 'konva/lib/Node'; diff --git a/src/domains/serverView/floorPlan/components/LeftSidebar/DisplayOptions.tsx b/src/domains/serverView/floorPlan/components/LeftSidebar/DisplayOptions.tsx index cd2120b..2390f21 100644 --- a/src/domains/serverView/floorPlan/components/LeftSidebar/DisplayOptions.tsx +++ b/src/domains/serverView/floorPlan/components/LeftSidebar/DisplayOptions.tsx @@ -1,4 +1,11 @@ - +/** + * @author 최산하 + * @description 플로어 플랜 뷰의 시각화 옵션 및 레이어 가시성 제어 패널 + * 랙 이름, 상태 표시등, 온도, 전력 등 세부 정보의 표시 여부 토글(Toggle) 기능 제공 + * Floor(바닥), Wall(벽), Overhead(천장) 등 자산 레이어별 보기/숨기기 제어 + * Zustand 스토어(useFloorPlanStore)와 연동하여 사용자 설정 변경 시 실시간 렌더링 업데이트 + * 설정 항목을 카테고리별(기본, 상태, 전문 정보 등)로 그룹화하여 직관적인 UI 구성 + */ import { useFloorPlanStore, setDisplayOptions, toggleLayerVisibility } from '../../store/floorPlanStore.ts'; import type { DisplayOptionsType, AssetLayer } from '../../types'; diff --git a/src/domains/serverView/floorPlan/components/LeftSidebar/PropertiesPanel.tsx b/src/domains/serverView/floorPlan/components/LeftSidebar/PropertiesPanel.tsx index d43530b..da68be4 100644 --- a/src/domains/serverView/floorPlan/components/LeftSidebar/PropertiesPanel.tsx +++ b/src/domains/serverView/floorPlan/components/LeftSidebar/PropertiesPanel.tsx @@ -1,3 +1,12 @@ +/** + * @author 최산하 + * @description 속성 편집 패널 - 선택된 자산의 세부 속성(위치, 크기, 색상 등)을 수정하거나 서버실 규격 설정 및 다중 객체 일괄 제어 기능 제공 + * 선택 상태에 따라 3가지 모드로 UI 전환: + * 1. 선택 없음: 서버실 전체 크기(Grid) 설정 + * 2. 다중 선택: 그룹화, 그룹 해제, 일괄 삭제 + * 3. 단일 선택: 자산의 이름, 좌표, 크기, 시각적 속성(색상, 투명도), 메타데이터 등 상세 편집 + * 입력 값 변경 시 로컬 상태로 관리하다가 포커스 해제(Blur) 시 스토어에 반영하는 최적화 적용 + */ import React, { useState, useEffect, useMemo } from 'react'; import { useFloorPlanStore, diff --git a/src/domains/serverView/floorPlan/components/LeftSidebar/StatusLegendAndFilters.tsx b/src/domains/serverView/floorPlan/components/LeftSidebar/StatusLegendAndFilters.tsx index cc2083c..ea23631 100644 --- a/src/domains/serverView/floorPlan/components/LeftSidebar/StatusLegendAndFilters.tsx +++ b/src/domains/serverView/floorPlan/components/LeftSidebar/StatusLegendAndFilters.tsx @@ -1,4 +1,11 @@ - +/** + * @author 최산하 + * @description 대시보드 모니터링 필터 및 범례 제어 패널 + * 시각화 모드(Metric View) 전환: 기본 상태, CPU 상세, 히트맵(온도/전력) 등 뷰 변경 + * 심각도(Severity) 필터링: 위험, 주의, 정상 등 특정 상태의 장비만 필터링하여 표시 + * 자산 레이어(Asset Layer) 제어: 바닥, 벽, 천장 등 3D 레이어의 가시성 토글 + * 히트맵 모드의 경우 재클릭 시 기본 모드로 복귀하는 토글 로직 포함 + */ import React from 'react'; import { useFloorPlanStore, setDashboardMetricView, diff --git a/src/domains/serverView/floorPlan/components/LeftSidebar/index.tsx b/src/domains/serverView/floorPlan/components/LeftSidebar/index.tsx index 236aa9b..865d7f7 100644 --- a/src/domains/serverView/floorPlan/components/LeftSidebar/index.tsx +++ b/src/domains/serverView/floorPlan/components/LeftSidebar/index.tsx @@ -1,4 +1,11 @@ - +/** + * @author 최산하 + * @description 좌측 사이드바 컨테이너 - 현재 모드(View/Edit)에 따라 표시 옵션 또는 속성 편집 패널을 조건부 렌더링 + * useFloorPlanStore의 mode 상태를 구독하여 UI 모드 감지 + * 'view' 모드일 경우: DisplayOptions(시각화 설정) 컴포넌트 표시 + * 'edit' 모드일 경우: PropertiesPanel(속성 편집) 컴포넌트 표시 + * 공통된 스타일(배경, 테두리, 스크롤)을 적용하는 레이아웃 래퍼 역할 수행 + */ import React from 'react'; import { useFloorPlanStore } from '../../store/floorPlanStore'; import DisplayOptions from './DisplayOptions'; diff --git a/src/domains/serverView/floorPlan/components/MagnifierWidget.tsx b/src/domains/serverView/floorPlan/components/MagnifierWidget.tsx index 26f7524..72e030a 100644 --- a/src/domains/serverView/floorPlan/components/MagnifierWidget.tsx +++ b/src/domains/serverView/floorPlan/components/MagnifierWidget.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 캔버스 확대경(Magnifier) 위젯 컴포넌트 - 마우스 커서 위치의 상세 뷰를 확대하여 제공 + * 메인 Canvas와 별도의 독립된 Konva Stage를 렌더링하여 2배율(Zoom 2.0x) 확대 효과 구현 + * 마우스 좌표를 Stage 좌표계로 변환하고, 현재 활성화된 레이어 및 필터링된 자산만 선별적으로 렌더링 + * 화면 우하단에 고정 배치되며, 십자선(Crosshair)과 현재 좌표 정보를 포함하여 정밀한 작업 보조 + */ import React, { useMemo, memo } from 'react'; import { Stage, Layer } from 'react-konva'; import { useFloorPlanStore } from '../store/floorPlanStore'; diff --git a/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesEditor.tsx b/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesEditor.tsx index f2f850e..e7b0de0 100644 --- a/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesEditor.tsx +++ b/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesEditor.tsx @@ -1,3 +1,12 @@ +/** + * @author 최산하 + * @description 속성 편집 패널 - 선택된 자산의 세부 속성(위치, 크기, 색상 등)을 수정하거나 서버실 규격 설정 및 다중 객체 일괄 제어 기능 제공 + * 선택 상태에 따라 3가지 모드로 UI 전환: + * 1. 선택 없음: 서버실 전체 크기(Grid) 설정 + * 2. 다중 선택: 그룹화, 그룹 해제, 일괄 삭제 + * 3. 단일 선택: 자산의 이름, 좌표, 크기, 시각적 속성(색상, 투명도), 메타데이터 등 상세 편집 + * 입력 값 변경 시 로컬 상태로 관리하다가 포커스 해제(Blur) 시 스토어에 반영하는 최적화 적용 + */ import React, { useState, useEffect, useMemo } from 'react'; import { useFloorPlanStore, diff --git a/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesViewer.tsx b/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesViewer.tsx index b326822..86c2842 100644 --- a/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesViewer.tsx +++ b/src/domains/serverView/floorPlan/components/RightSidebar/PropertiesViewer.tsx @@ -1,3 +1,11 @@ +/** + * @author 최산하 + * @description 속성 뷰어 컴포넌트 - 선택된 자산의 상세 정보를 읽기 전용으로 표시 + * 실시간 상태(정상/주의/위험)를 시각적 인디케이터(색상 점)로 표현 + * 온도 등 센서 데이터 및 자산 ID, 타입 등 기본 메타데이터 제공 + * 랙(Rack) 타입의 경우 내부 마운트 장비를 확인할 수 있는 상세 모달 연동(openRackModal) 지원 + */ + import { useFloorPlanStore } from '../../store/floorPlanStore'; import type { Asset } from '../../types'; import { useBabylonDatacenterStore } from '@/domains/serverView/view3d/stores/useBabylonDatacenterStore'; diff --git a/src/domains/serverView/floorPlan/components/RightSidebar/index.tsx b/src/domains/serverView/floorPlan/components/RightSidebar/index.tsx index bf114fd..0d5a5c4 100644 --- a/src/domains/serverView/floorPlan/components/RightSidebar/index.tsx +++ b/src/domains/serverView/floorPlan/components/RightSidebar/index.tsx @@ -1,4 +1,11 @@ - +/** + * @author 최산하 + * @description 우측 사이드바 컨테이너 - 모드(View/Edit)에 따라 속성 조회 또는 편집 컴포넌트를 조건부 렌더링 + * useFloorPlanStore의 mode 상태를 감지하여 '속성 정보'(Viewer)와 '속성 편집'(Editor) 간 전환 처리 + * 보기 모드: PropertiesViewer를 통해 선택된 자산의 상태/메타데이터를 읽기 전용으로 표시 + * 편집 모드: PropertiesEditor를 통해 자산의 위치, 크기, 이름 등 속성 수정 인터페이스 제공 + * 사이드바의 공통 레이아웃(헤더, 배경, 스타일) 관리 + */ import React from 'react'; import { useFloorPlanStore } from '../../store/floorPlanStore'; import PropertiesEditor from './PropertiesEditor'; diff --git a/src/domains/serverView/floorPlan/components/TopNWidget.tsx b/src/domains/serverView/floorPlan/components/TopNWidget.tsx index e82dba6..0fe5941 100644 --- a/src/domains/serverView/floorPlan/components/TopNWidget.tsx +++ b/src/domains/serverView/floorPlan/components/TopNWidget.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 실시간 문제 리포트(Top N) 위젯 - 데이터센터 내 이상 징후가 감지된 자산 상위 목록 표시 + * CPU 사용량(75%↑) 및 온도(30°C↑) 데이터를 분석하여 위험도가 높은 상위 5개 랙을 자동 선별 + * 항목 클릭 시 해당 자산 위치로 뷰포트를 이동(Zoom-to)시키는 네비게이션 기능 제공 + * 헤더 토글을 통해 리스트를 접거나 펼칠 수 있으며, 이상 자산이 없을 경우 자동으로 숨김 처리 + */ import React, { useMemo, useState } from 'react'; import { useFloorPlanStore, zoomToAsset } from '../store/floorPlanStore'; import { AlertTriangle, diff --git a/src/domains/serverView/floorPlan/components/TopToolbar.tsx b/src/domains/serverView/floorPlan/components/TopToolbar.tsx index 28bacd5..a24d7bf 100644 --- a/src/domains/serverView/floorPlan/components/TopToolbar.tsx +++ b/src/domains/serverView/floorPlan/components/TopToolbar.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 상단 툴바 컴포넌트 - 서버실 타이틀 표시 및 모드별(보기/편집) 핵심 제어 기능 제공 + * 보기 모드: 캔버스 줌(Zoom) 레벨 조정 및 확대경 위젯 토글 기능 지원 + * 편집 모드: Zustand Temporal 미들웨어를 활용한 실행 취소(Undo) 및 다시 실행(Redo) 기능 제공 + * 모드 전환 시 다중 선택된 자산이 존재할 경우 자동으로 그룹화 여부를 확인하는 사용자 편의 로직 포함 + */ import React from 'react'; import { useStore } from 'zustand'; import { useFloorPlanStore, toggleMagnifier, toggleMode, groupSelectedAssets, zoom } from '../store/floorPlanStore'; diff --git a/src/domains/serverView/floorPlan/hooks/useConfirmationModal.ts b/src/domains/serverView/floorPlan/hooks/useConfirmationModal.ts index a6cd147..fb3a40c 100644 --- a/src/domains/serverView/floorPlan/hooks/useConfirmationModal.ts +++ b/src/domains/serverView/floorPlan/hooks/useConfirmationModal.ts @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 전역 모달 상태 관리 스토어 및 훅 - 애플리케이션 전역에서 사용되는 확인(Confirm) 모달의 상태를 제어 + * Zustand를 활용하여 모달의 열림/닫힘 상태, 제목, 메시지, 콜백 함수 등을 중앙에서 관리 + * 비동기 액션 지원 - `confirmAction` 실행 시 Promise 완료를 대기하고, 작업 종료 후(성공/실패 무관) 자동으로 모달을 닫는 안전한 로직 구현 + * `useConfirmationModal` 커스텀 훅을 통해 UI 컴포넌트에서 직관적인 API로 모달을 호출할 수 있도록 추상화 + */ import React from 'react'; import { create } from 'zustand'; diff --git a/src/domains/serverView/floorPlan/hooks/useFloorPlanDragDrop.ts b/src/domains/serverView/floorPlan/hooks/useFloorPlanDragDrop.ts index 3d09ac2..9355d88 100644 --- a/src/domains/serverView/floorPlan/hooks/useFloorPlanDragDrop.ts +++ b/src/domains/serverView/floorPlan/hooks/useFloorPlanDragDrop.ts @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 플로어 플랜 드래그 앤 드롭(D&D) 로직 처리 훅 - 라이브러리 영역에서 캔버스 영역으로의 자산 배치 담당 + * @dnd-kit의 handleDragEnd 이벤트를 처리하여 뷰포트 기준의 드롭 좌표를 Konva Stage 내부의 Grid 좌표로 정밀 변환 + * 캔버스 컨테이너의 오프셋(getBoundingClientRect)과 현재 줌/팬 상태(Stage Scale/Pos)를 모두 고려한 위치 계산 수행 + * 배치 전 충돌 감지(Collision Detection)를 수행하여 유효한 위치에만 자산이 추가되도록 제어 + */ import { type DragEndEvent } from '@dnd-kit/core'; import { useFloorPlanStore, addAsset } from '../store/floorPlanStore'; import type { Asset } from '../types'; diff --git a/src/domains/serverView/floorPlan/hooks/useFloorPlanNavigationGuard.tsx b/src/domains/serverView/floorPlan/hooks/useFloorPlanNavigationGuard.tsx index c59f4f9..a7bf456 100644 --- a/src/domains/serverView/floorPlan/hooks/useFloorPlanNavigationGuard.tsx +++ b/src/domains/serverView/floorPlan/hooks/useFloorPlanNavigationGuard.tsx @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 플로어 플랜 네비게이션 가드 훅 - 편집 모드에서 저장되지 않은 변경사항이 있을 경우 페이지 이탈을 방지 + * React Router의 `useBlocker`를 활용하여 내부 라우팅 이동 시 커스텀 확인 모달(ConfirmationModal)을 호출 + * 브라우저의 `beforeunload` 이벤트를 리스닝하여 새로고침이나 탭 닫기 시 네이티브 경고 대화상자 표시 + * 사용자가 이탈을 확정하면 편집 이력(Temporal History)을 초기화하고 네비게이션을 진행시키는 안전 장치 역할 + */ import { useEffect } from 'react'; import { useBlocker, useLocation } from 'react-router-dom'; import { useFloorPlanStore, useHasUnsavedChanges } from '../store/floorPlanStore'; diff --git a/src/domains/serverView/floorPlan/pages/FloorPlanPage.tsx b/src/domains/serverView/floorPlan/pages/FloorPlanPage.tsx index 8d1e5de..6e7a620 100644 --- a/src/domains/serverView/floorPlan/pages/FloorPlanPage.tsx +++ b/src/domains/serverView/floorPlan/pages/FloorPlanPage.tsx @@ -1,5 +1,5 @@ /** - * @author 김대호 + * @author 최산하 * @description 2D 평면도 페이지 - 서버실의 2D 평면도를 표시하고 편집하는 페이지 * 3D 데이터를 2D 그리드 레이아웃으로 변환하여 표시하며, 드래그&드롭으로 장비 배치 가능 * 편집 모드에서는 장비 팔레트로 새 장비를 추가하고, 보기 모드에서는 메트릭 정보와 TopN 위젯을 표시 diff --git a/src/domains/serverView/floorPlan/store/floorPlanStore.ts b/src/domains/serverView/floorPlan/store/floorPlanStore.ts index 8dfb1b4..d3bc33b 100644 --- a/src/domains/serverView/floorPlan/store/floorPlanStore.ts +++ b/src/domains/serverView/floorPlan/store/floorPlanStore.ts @@ -1,3 +1,10 @@ +/** + * @author 최산하 + * @description 플로어 플랜 전역 상태 관리 스토어 - 2D 평면도 뷰어 및 에디터의 핵심 비즈니스 로직 담당 + * Zustand와 Zundo(temporal 미들웨어)를 활용하여 자산 상태, 그리드 설정, 실행 취소(Undo)/다시 실행(Redo) 기능 구현 + * 2D 자산(Asset)과 3D 장비(Equipment) 데이터 간의 변환 로직 및 CRUD API 연동을 통한 데이터 동기화 처리 + * 자산 배치, 다중 선택/그룹화, 줌 인/아웃, 히트맵 뷰 모드 전환 등 사용자 인터랙션 전반을 제어 + */ import { create, type StateCreator } from 'zustand'; import { temporal } from 'zundo'; import { useStore } from 'zustand'; diff --git a/src/domains/serverView/floorPlan/store/useSidebarStore.ts b/src/domains/serverView/floorPlan/store/useSidebarStore.ts index 7d63451..a6a3b9d 100644 --- a/src/domains/serverView/floorPlan/store/useSidebarStore.ts +++ b/src/domains/serverView/floorPlan/store/useSidebarStore.ts @@ -1,3 +1,8 @@ + +/** + * @author 최산하 + + */ import { create } from "zustand"; // 사이드바의 열림/닫힘 상태를 관리하기 위한 인터페이스 diff --git a/src/domains/serverView/floorPlan/types/index.ts b/src/domains/serverView/floorPlan/types/index.ts index 7d63ebd..3612a90 100644 --- a/src/domains/serverView/floorPlan/types/index.ts +++ b/src/domains/serverView/floorPlan/types/index.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ export type Mode = 'view' | 'edit'; export type DoorDirection = 'north' | 'south' | 'east' | 'west'; export type AssetStatus = 'normal' | 'warning' | 'danger'; diff --git a/src/domains/serverView/floorPlan/utils/collision.ts b/src/domains/serverView/floorPlan/utils/collision.ts index b81739d..6beb5d4 100644 --- a/src/domains/serverView/floorPlan/utils/collision.ts +++ b/src/domains/serverView/floorPlan/utils/collision.ts @@ -1,3 +1,6 @@ +/** + * @author 최산하 + */ import type { Asset } from '../types'; export const checkCollision = (