Feature/sysone 126 자원관리필터링api수정

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';

src/domains/resourceManage/components/ResourceFilters.tsx

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import { Search } from 'lucide-react'; 
 import {
   EQUIPMENT_TYPE_OPTIONS,

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'; 

src/domains/resourceManage/components/ResourceTable.tsx

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import { flexRender } from '@tanstack/react-table';
 import type {
   Table as TanStackTable,

src/domains/resourceManage/components/ResourceWizardModal.tsx

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import { useState, useEffect, useMemo } from "react";
 import {
   useForm,

src/domains/resourceManage/components/resourceTable.config.tsx

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import type { ColumnDef } from "@tanstack/react-table";
 import type {
   Resource,

src/domains/resourceManage/constants/resource.constants.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import type {
   EquipmentType,
   ResourceStatus,

src/domains/resourceManage/hooks/useDebounce.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import { useState, useEffect } from "react";
 
 /**

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 {

src/domains/resourceManage/pages/ResourceManagePage.tsx

@@ -1,5 +1,5 @@
 /**
- * @author 김대호
+ * @author 최산하
  * @description 리소스 관리 페이지 - 서버 및 네트워크 장비 등 IT 리소스를 관리하는 페이지
  * 리소스 목록 조회, 필터링, 추가, 수정, 삭제 기능 제공
  * 위저드 형식의 모달로 리소스 생성 프로세스 간소화

src/domains/resourceManage/types/resource.types.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import type { TableMeta } from "@tanstack/react-table";
 
 // NOTE(user): 3단계 폼 기준 자원 상태 타입

src/domains/serverRoom/api/serverRoomApi.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import client from "@api/client";
 import type { DataCenterGroup, ServerRoom, CompanyServerRoomsResponse } from "../types";
 

src/domains/serverRoom/components/DashboardModals.tsx

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import ServerRoomCreateModal from "./ServerRoomCreateModal";
 import ServerRoomEditModal from "./ServerRoomEditModal";
 import DataCenterCreateModal from "./DataCenterCreateModal";

src/domains/serverRoom/components/DashboardStats.tsx

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 interface DashboardStatsProps {
   stats: {
     totalDataCenters: number;

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";

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";

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";

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";

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";

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";

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";

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';

src/domains/serverRoom/hooks/useDataCenterActions.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import { useState } from "react";
 import { useDeleteDataCenter } from "./useServerRoomQueries";
 import type { DataCenterGroup } from "../types";

src/domains/serverRoom/hooks/useServerRoomActions.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 import { useState } from "react";
 import { useDeleteServerRoom } from "./useServerRoomQueries";
 import type { ServerRoom } from "../types";

src/domains/serverRoom/types/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @author 최산하
+ */
 export interface ServerRoom {
   id: number;
   name: string; // 서버실 이름

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';

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";

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';
 

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";

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';

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<AssetRendererProps> = (props) => {
 if (mode === 'view') {
     if (displayMode === 'status') { // '상태 임계값' 모드
       if (asset.assetType === 'rack') {
-        // 🌟 2. currentScale prop 전달
+        //  2. currentScale prop 전달
         return <DashboardAssetView {...props} />;
       } else {
-        // 🌟 2. currentScale prop 전달
+        //  2. currentScale prop 전달
         return <LayoutAssetView {...props} />;
       }
     } else {
-      // 🌟 2. currentScale prop 전달
+      //  2. currentScale prop 전달
       return <LayoutAssetView {...props} />;
     }
   }

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';

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';
 

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';
 

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";

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';
 

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';
 
 /**

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';

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';

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';

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';
 

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,

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,