[Server_Table/UI/Data] 서버 자산 관리 리스트 고도화 및 데이터 통합 (3개 관리대장) #7

New Issue

Taehoon · 2026-04-15T09:48:33+09:00

Taehoon commented

2026-04-15 09:48:33 +09:00

📋 작업 개요

서버 자산 관리의 효율성을 높이기 위해 분산되어 있던 3개의 서버 관리대장 데이터를 통합하고, 표준화된 헤더 시스템을 적용하여 UI/UX를 개선했습니다.

🛠️ 주요 작업 내용

데이터 통합 (Data Integration)
- 기술개발센터, 한맥빌딩, IDC 서버 위치 등 3개의 서로 다른 엑셀 관리대장 데이터를 통합 처리하도록 구현.
- src/realServerData.ts를 통해 실제 서버 데이터를 시스템에 반영할 수 있는 구조 구축.
표준 헤더 적용 (Standard Header)
- 서버 자산의 특성을 반영한 21개 표준 컬럼 정의 및 적용.
- UI 테이블에는 주요 15개 항목 우선 노출: No, 법인, 자산번호, 유형, 용도, 상세, 설치위치, 담당자, IP 주소, 원격접속, 모델명, OS, CPU, RAM, Storage.
UI/UX 개선
- 서버 리스트 테이블 디자인 최적화 (src/views/AssetTableView.ts).
- 서버 상세 정보 확인을 위한 HW 모달 창 개선 (src/components/Modal/HWModal.ts).
- style.css 수정을 통한 전반적인 그리드 및 시각적 요소 정돈.
엑셀 핸들러 고도화
- 다중 엑셀 파일 로드 및 데이터 파싱 로직 개선 (src/excelHandler.ts).

📂 관련 파일

src/views/AssetTableView.ts
src/realServerData.ts
src/excelHandler.ts
src/components/Modal/HWModal.ts
src/state.ts
src/dummyDataGenerator.ts
src/style.css
index.html

본 이슈는 2026-04-14 진행된 커밋(157330b, e4914ee) 내용을 바탕으로 작성되었습니다.

### 📋 작업 개요 서버 자산 관리의 효율성을 높이기 위해 분산되어 있던 3개의 서버 관리대장 데이터를 통합하고, 표준화된 헤더 시스템을 적용하여 UI/UX를 개선했습니다. ### 🛠️ 주요 작업 내용 1. **데이터 통합 (Data Integration)** - 기술개발센터, 한맥빌딩, IDC 서버 위치 등 3개의 서로 다른 엑셀 관리대장 데이터를 통합 처리하도록 구현. - `src/realServerData.ts`를 통해 실제 서버 데이터를 시스템에 반영할 수 있는 구조 구축. 2. **표준 헤더 적용 (Standard Header)** - 서버 자산의 특성을 반영한 21개 표준 컬럼 정의 및 적용. - UI 테이블에는 주요 15개 항목 우선 노출: `No`, `법인`, `자산번호`, `유형`, `용도`, `상세`, `설치위치`, `담당자`, `IP 주소`, `원격접속`, `모델명`, `OS`, `CPU`, `RAM`, `Storage`. 3. **UI/UX 개선** - 서버 리스트 테이블 디자인 최적화 (`src/views/AssetTableView.ts`). - 서버 상세 정보 확인을 위한 HW 모달 창 개선 (`src/components/Modal/HWModal.ts`). - `style.css` 수정을 통한 전반적인 그리드 및 시각적 요소 정돈. 4. **엑셀 핸들러 고도화** - 다중 엑셀 파일 로드 및 데이터 파싱 로직 개선 (`src/excelHandler.ts`). ### 📂 관련 파일 - `src/views/AssetTableView.ts` - `src/realServerData.ts` - `src/excelHandler.ts` - `src/components/Modal/HWModal.ts` - `src/state.ts` - `src/dummyDataGenerator.ts` - `src/style.css` - `index.html` --- *본 이슈는 2026-04-14 진행된 커밋(157330b, e4914ee) 내용을 바탕으로 작성되었습니다.*

Taehoon commented

2026-04-15 17:56:27 +09:00

✅ 후속 고도화 작업 완료: 보안 정보 관리 및 UI 편의성 개선

서버 자산 관리 리스트의 실무 활용도를 높이기 위해 다음과 같은 보안 강화 및 UI 고도화 작업을 추가로 진행했습니다.

1. 보안 강화 (Security First)

서버 리스트 테이블에서 민감 정보(IP 주소, 원격접속) 컬럼을 제거하여 불필요한 노출을 차단했습니다.
해당 정보는 상세 모달 내 '네트워크 정보' 섹션에서만 확인 가능하며, 섹션 타이틀 옆에 [보안 정보] 배지를 추가하여 정보의 성격을 명확히 했습니다.

2. 데이터 가시성 개선 (Data Formatting)

설치 위치 데이터 중 서관 또는 동관으로 시작하는 항목에 대해 리스트 렌더링 시 자동으로 IDC 접두사를 부여했습니다. (예: IDC(서관 204번))

3. 모달 인터랙션 및 시스템 안정화

조회/수정 모드 분리: 모달 진입 시 조회 전용 모드로 시작하며, 수정 시에만 입력 필드가 강조되어 오수정을 방지합니다. (수정 모드 진입 시 글자색 강조 적용)
수정 취소 기능: 수정 작업 중 변경사항을 폐기하고 원래 데이터로 즉시 복구할 수 있는 '수정 취소' 버튼을 추가했습니다.
전역 시스템 안정화: 이벤트 위임 방식을 도입하여 ESC 키 및 모든 닫기/취소 버튼이 동적인 컴포넌트 환경에서도 완벽하게 작동하도록 복구 및 강화했습니다.

본 업데이트는 server_dashboard 브랜치의 최신 커밋(fde7ef8) 내용을 바탕으로 작성되었습니다.

### ✅ 후속 고도화 작업 완료: 보안 정보 관리 및 UI 편의성 개선 서버 자산 관리 리스트의 실무 활용도를 높이기 위해 다음과 같은 보안 강화 및 UI 고도화 작업을 추가로 진행했습니다. **1. 보안 강화 (Security First)** - 서버 리스트 테이블에서 민감 정보(`IP 주소`, `원격접속`) 컬럼을 제거하여 불필요한 노출을 차단했습니다. - 해당 정보는 상세 모달 내 **'네트워크 정보'** 섹션에서만 확인 가능하며, 섹션 타이틀 옆에 **[보안 정보]** 배지를 추가하여 정보의 성격을 명확히 했습니다. **2. 데이터 가시성 개선 (Data Formatting)** - 설치 위치 데이터 중 `서관` 또는 `동관`으로 시작하는 항목에 대해 리스트 렌더링 시 자동으로 **`IDC`** 접두사를 부여했습니다. (예: `IDC(서관 204번)`) **3. 모달 인터랙션 및 시스템 안정화** - **조회/수정 모드 분리**: 모달 진입 시 조회 전용 모드로 시작하며, 수정 시에만 입력 필드가 강조되어 오수정을 방지합니다. (수정 모드 진입 시 글자색 강조 적용) - **수정 취소 기능**: 수정 작업 중 변경사항을 폐기하고 원래 데이터로 즉시 복구할 수 있는 '수정 취소' 버튼을 추가했습니다. - **전역 시스템 안정화**: 이벤트 위임 방식을 도입하여 `ESC` 키 및 모든 닫기/취소 버튼이 동적인 컴포넌트 환경에서도 완벽하게 작동하도록 복구 및 강화했습니다. --- *본 업데이트는 `server_dashboard` 브랜치의 최신 커밋(fde7ef8) 내용을 바탕으로 작성되었습니다.*

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#7