Taehoon/ITAM
2
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: PC 맞춤형 대시보드 구현 및 UI/UX 레이아웃 최적화 #19

New Issue
Open
opened 2026-06-05 10:53:24 +09:00 by Taehoon · 3 comments
Taehoon commented 2026-06-05 10:53:24 +09:00
Owner
Copy Link

🛠️ 작업 개요

대시보드 시각화 개선 및 PC 자산 전용 분류 체계 도입, 레이아웃 안정화 작업을 수행하였습니다.

✅ 주요 수정 사항

1. 대시보드 시각화 고도화

  • 위치 분류 체계 통일: 외부(운영)/내부(테스트) 자산 모두 '기술개발센터, IDC, 한맥빌딩' 기준으로 통계를 노출하도록 로직을 개선했습니다.
  • PC 전용 대시보드 구현: PC 자산 목록에서는 위치 대신 유형별(공용PC, 서버PC, 개인PC) 분포를 보여주도록 맞춤형 분류 로직을 적용했습니다.
  • 차트 가독성 향상: 도넛 차트의 크기를 확대(최대 320px)하고, 레이아웃 비율을 조정하여 시각적 정보를 강화했습니다.

2. 하단 요약 표 및 데이터 표시 개선

  • 컬럼 최적화: 기존 '자산번호' 컬럼을 **'비고(Memo)'**로 교체하여 운영 메모를 바로 확인할 수 있게 했습니다.
  • 텍스트 오버플로 처리: 긴 용도나 메모가 옆 컬럼을 침범하지 않도록 **말줄임표(...)**와 마우스 호버 툴팁 기능을 적용했습니다.
  • 너비 고정: table-layout: fixed를 통해 좁은 화면에서도 표 구조가 유지되도록 최적화했습니다.

3. UI/UX 안정화 및 레이아웃 수정

  • 네비게이션 메뉴 수정: GNB 호버 시 서브메뉴(Shelf)가 나타나며 메뉴바가 흔들리거나 간격이 벌어지는 현상을 수정했습니다. (활성 메뉴 서브바 고정 및 호버 로직 개선)
  • 반응형 대응: 통계 카드에 flex-wrap 및 min-width: 0을 적용하여 텍스트 겹침 현상을 방지했습니다.

4. 기타 수정

  • 오류 해결: ListFactory.ts에서 formatInline 함수가 임포트되지 않아 발생하던 ReferenceError를 해결했습니다.

📦 관련 브랜치

  • ux_setting
## 🛠️ 작업 개요 대시보드 시각화 개선 및 PC 자산 전용 분류 체계 도입, 레이아웃 안정화 작업을 수행하였습니다. ## ✅ 주요 수정 사항 ### 1. 대시보드 시각화 고도화 - **위치 분류 체계 통일**: 외부(운영)/내부(테스트) 자산 모두 '기술개발센터, IDC, 한맥빌딩' 기준으로 통계를 노출하도록 로직을 개선했습니다. - **PC 전용 대시보드 구현**: PC 자산 목록에서는 위치 대신 **유형별(공용PC, 서버PC, 개인PC)** 분포를 보여주도록 맞춤형 분류 로직을 적용했습니다. - **차트 가독성 향상**: 도넛 차트의 크기를 확대(최대 320px)하고, 레이아웃 비율을 조정하여 시각적 정보를 강화했습니다. ### 2. 하단 요약 표 및 데이터 표시 개선 - **컬럼 최적화**: 기존 '자산번호' 컬럼을 **'비고(Memo)'**로 교체하여 운영 메모를 바로 확인할 수 있게 했습니다. - **텍스트 오버플로 처리**: 긴 용도나 메모가 옆 컬럼을 침범하지 않도록 **말줄임표(...)**와 **마우스 호버 툴팁** 기능을 적용했습니다. - **너비 고정**: `table-layout: fixed`를 통해 좁은 화면에서도 표 구조가 유지되도록 최적화했습니다. ### 3. UI/UX 안정화 및 레이아웃 수정 - **네비게이션 메뉴 수정**: GNB 호버 시 서브메뉴(Shelf)가 나타나며 메뉴바가 흔들리거나 간격이 벌어지는 현상을 수정했습니다. (활성 메뉴 서브바 고정 및 호버 로직 개선) - **반응형 대응**: 통계 카드에 `flex-wrap` 및 `min-width: 0`을 적용하여 텍스트 겹침 현상을 방지했습니다. ### 4. 기타 수정 - **오류 해결**: `ListFactory.ts`에서 `formatInline` 함수가 임포트되지 않아 발생하던 ReferenceError를 해결했습니다. ## 📦 관련 브랜치 - `ux_setting`
Taehoon commented 2026-06-08 12:00:55 +09:00
Author
Owner
Copy Link

📋 자산 현황 레이아웃 개선 및 데이터 표준화 작업 보고

이슈 #19와 관련하여 요청하신 UI 개선 및 데이터 정제 작업을 완료하고 결과를 보고합니다.

1. UI/UX 및 디자인 개편

  • 미니멀리즘 디자인 적용: PROJECT_GUIDE.md 원칙에 따라 대시보드 내 모든 아이콘(📍, ⚠️) 및 이모지(🖼️)를 삭제하고 텍스트와 선 중심의 깔끔한 디자인으로 개편했습니다.
  • 선택 하이라이트 추가: 자산 현황 목록 클릭 시 어떤 자산을 확인 중인지 알 수 있도록 연한 그린 색상의 선택 강조 효과를 적용했습니다.
  • 상세 패널 레이아웃 최적화: 자산번호와 메모 요약의 폰트 크기를 14px로 통일하고, 정보가 길어져도 레이아웃이 줄바꿈되지 않도록 고정했습니다.

2. 운영 이상 징후(Anomaly) 경고 시스템 고도화

  • 원인별 사유 세분화: 단순 '보안 경고'를 넘어 '위치 부적절'(IDC 미배치) 및 '형식 부적절'(외부 운영인데 서버PC 사용)로 사유를 명확히 구분했습니다.
  • 시각적 가이드 강화: 상단 통계 섹션에 원인별 수치 배지를 노출하고, 자산 목록에서도 해당 행을 빨간색 테두리와 배경으로 강조하며 구체적인 사유 레이블을 표시합니다.

3. 데이터 표준화 및 마이그레이션

  • 자산번호 접두사 통합: 파편화되어 있던 STO, NAS, DAS 접두사를 DSS(Data Storage System) 및 STM(저장매체) 체계로 통합하고 일련번호를 재색인했습니다.
  • 위치 명칭 통일: '기술개발', '한맥' 등으로 혼용되던 명칭을 '기술개발센터', **'한맥빌딩'**으로 표준화하고 통계 로직을 보완했습니다.
  • 유형 리스트 업데이트: 저장시스템 유형을 렉/미니, NAS/DAS 조합으로 세분화하여 SharedData.ts에 반영했습니다.

4. 기능 및 안정성 강화

  • 상세 보기 버튼 복구: 우측 상세 패널에서 즉시 전체 정보를 확인할 수 있는 모달 연동 버튼을 상단에 다시 배치했습니다.
  • 레이아웃 수정: 헤더의 역할 전환 토글과 가이드 버튼이 일렬로 정렬되지 않던 CSS 문제를 해결했습니다.
  • 빌드 오류 해결: 작업 중 발생한 Vite 빌드 오류(중복 중괄호)를 수정하여 정상 구동을 확인했습니다.

위 변경 사항은 ux_setting 브랜치에 커밋 및 푸시 완료되었습니다. 확인 부탁드립니다.

### 📋 자산 현황 레이아웃 개선 및 데이터 표준화 작업 보고 이슈 #19와 관련하여 요청하신 UI 개선 및 데이터 정제 작업을 완료하고 결과를 보고합니다. #### 1. UI/UX 및 디자인 개편 * **미니멀리즘 디자인 적용**: `PROJECT_GUIDE.md` 원칙에 따라 대시보드 내 모든 아이콘(📍, ⚠️) 및 이모지(🖼️)를 삭제하고 텍스트와 선 중심의 깔끔한 디자인으로 개편했습니다. * **선택 하이라이트 추가**: 자산 현황 목록 클릭 시 어떤 자산을 확인 중인지 알 수 있도록 연한 그린 색상의 선택 강조 효과를 적용했습니다. * **상세 패널 레이아웃 최적화**: 자산번호와 메모 요약의 폰트 크기를 14px로 통일하고, 정보가 길어져도 레이아웃이 줄바꿈되지 않도록 고정했습니다. #### 2. 운영 이상 징후(Anomaly) 경고 시스템 고도화 * **원인별 사유 세분화**: 단순 '보안 경고'를 넘어 **'위치 부적절'**(IDC 미배치) 및 **'형식 부적절'**(외부 운영인데 서버PC 사용)로 사유를 명확히 구분했습니다. * **시각적 가이드 강화**: 상단 통계 섹션에 원인별 수치 배지를 노출하고, 자산 목록에서도 해당 행을 빨간색 테두리와 배경으로 강조하며 구체적인 사유 레이블을 표시합니다. #### 3. 데이터 표준화 및 마이그레이션 * **자산번호 접두사 통합**: 파편화되어 있던 `STO`, `NAS`, `DAS` 접두사를 **`DSS`**(Data Storage System) 및 **`STM`**(저장매체) 체계로 통합하고 일련번호를 재색인했습니다. * **위치 명칭 통일**: '기술개발', '한맥' 등으로 혼용되던 명칭을 **'기술개발센터'**, **'한맥빌딩'**으로 표준화하고 통계 로직을 보완했습니다. * **유형 리스트 업데이트**: 저장시스템 유형을 렉/미니, NAS/DAS 조합으로 세분화하여 `SharedData.ts`에 반영했습니다. #### 4. 기능 및 안정성 강화 * **상세 보기 버튼 복구**: 우측 상세 패널에서 즉시 전체 정보를 확인할 수 있는 모달 연동 버튼을 상단에 다시 배치했습니다. * **레이아웃 수정**: 헤더의 역할 전환 토글과 가이드 버튼이 일렬로 정렬되지 않던 CSS 문제를 해결했습니다. * **빌드 오류 해결**: 작업 중 발생한 Vite 빌드 오류(중복 중괄호)를 수정하여 정상 구동을 확인했습니다. 위 변경 사항은 `ux_setting` 브랜치에 커밋 및 푸시 완료되었습니다. 확인 부탁드립니다.
Taehoon commented 2026-06-09 16:37:30 +09:00
Author
Owner
Copy Link

🚀 핫픽스 및 기능 고도화 완료 보고 (커밋 2b9c965)

이번 커밋을 통해 모달 UI의 고질적인 정렬 문제와 하드웨어 자산의 데이터 매핑 불일치를 완전히 해결하고, 저장 용량 확장성을 대폭 강화했습니다.

1. 💾 동적 디스크(볼륨) 확장 기능 적용 (Plan B)

  • 기존의 딱딱하게 고정되었던 디스크 필드(ssd_1, hdd_2 등)를 완전히 폐기했습니다.
  • JSON_ARRAYAGG를 활용하여 서버 통신 로직을 배열 기반으로 개편하고, 프런트엔드에서 [+ 디스크 추가] 버튼을 통해 무제한으로 디스크 정보를 추가/삭제할 수 있는 동적 UI를 구현했습니다.

2. 📐 UI 픽셀 퍼펙트 정렬 및 디자인 규격화

  • 모든 모달 내 input, select, button 요소의 높이를 38px로 강제 고정하고 시스템 CSS와 충돌하던 인라인 스타일을 일소했습니다.
  • 버튼과 입력창이 1px의 오차 없이 완벽한 수평 라인을 이루도록 Flex Box 구조를 최적화했습니다.
  • 위치보기 버튼 등의 강제 숨김 버그(display: none)를 제거하고, 시스템 순정 디자인(Deep Green)으로 복구했습니다.
  • 메모(textarea) 칸이 임의로 조절되어 레이아웃이 깨지지 않도록 resize: none 처리를 완료했습니다.

3. 🎯 하드웨어 카테고리별 정밀 가시성 제어

  • '저장매체', '네트워크', '공간정보장비' 등 인프라 기기에서 불필요하게 노출되던 원격 접속 정보 및 네트워크 정보를 장비 성격에 맞게 완전 차단했습니다.
  • '개인PC'와 '서버PC'의 가시성을 명확히 분리하여, 서버PC는 'PC' 카테고리에 속하더라도 모니터링, 원격 정보, 위치 정보가 정상적으로 노출되도록 예외 처리 로직을 완벽하게 구축했습니다.

4. 🏷️ 명칭 일원화 및 동선 최적화

  • 소프트웨어 분류의 명확성을 위해 기존 '외부', '내부' 명칭을 **'외부SW', '내부SW'**로 시스템 전체(네비게이션, 대시보드, 필터 등)에 걸쳐 일괄 변경했습니다.
  • 자산 목록 탭에서 중복 노출되던 '자산 추가' 버튼을 상단 토글 옆 1개로 통일하여 사용자 동선을 간결하게 정리했습니다.
### 🚀 핫픽스 및 기능 고도화 완료 보고 (커밋 `2b9c965`) 이번 커밋을 통해 모달 UI의 고질적인 정렬 문제와 하드웨어 자산의 데이터 매핑 불일치를 완전히 해결하고, 저장 용량 확장성을 대폭 강화했습니다. #### 1. 💾 동적 디스크(볼륨) 확장 기능 적용 (Plan B) * 기존의 딱딱하게 고정되었던 디스크 필드(`ssd_1`, `hdd_2` 등)를 완전히 폐기했습니다. * `JSON_ARRAYAGG`를 활용하여 서버 통신 로직을 배열 기반으로 개편하고, 프런트엔드에서 **[+ 디스크 추가]** 버튼을 통해 무제한으로 디스크 정보를 추가/삭제할 수 있는 동적 UI를 구현했습니다. #### 2. 📐 UI 픽셀 퍼펙트 정렬 및 디자인 규격화 * 모든 모달 내 `input`, `select`, `button` 요소의 높이를 **38px로 강제 고정**하고 시스템 CSS와 충돌하던 인라인 스타일을 일소했습니다. * 버튼과 입력창이 1px의 오차 없이 완벽한 수평 라인을 이루도록 Flex Box 구조를 최적화했습니다. * 위치보기 버튼 등의 강제 숨김 버그(`display: none`)를 제거하고, 시스템 순정 디자인(Deep Green)으로 복구했습니다. * 메모(`textarea`) 칸이 임의로 조절되어 레이아웃이 깨지지 않도록 `resize: none` 처리를 완료했습니다. #### 3. 🎯 하드웨어 카테고리별 정밀 가시성 제어 * '저장매체', '네트워크', '공간정보장비' 등 인프라 기기에서 불필요하게 노출되던 원격 접속 정보 및 네트워크 정보를 장비 성격에 맞게 **완전 차단**했습니다. * '개인PC'와 '서버PC'의 가시성을 명확히 분리하여, **서버PC는 'PC' 카테고리에 속하더라도 모니터링, 원격 정보, 위치 정보가 정상적으로 노출**되도록 예외 처리 로직을 완벽하게 구축했습니다. #### 4. 🏷️ 명칭 일원화 및 동선 최적화 * 소프트웨어 분류의 명확성을 위해 기존 '외부', '내부' 명칭을 **'외부SW', '내부SW'**로 시스템 전체(네비게이션, 대시보드, 필터 등)에 걸쳐 일괄 변경했습니다. * 자산 목록 탭에서 중복 노출되던 '자산 추가' 버튼을 상단 토글 옆 1개로 통일하여 사용자 동선을 간결하게 정리했습니다.
Taehoon commented 2026-06-11 11:15:12 +09:00
Author
Owner
Copy Link

🚀 HWModal 네트워크 및 원격 접속 정보 통합 UI 고도화 완료

작업 내용 요약:

  • 네트워크 정보 입력 방식 혁신: 기존의 고정된 IP/MAC 필드 방식을 탈피하여, 사용자가 필요한 만큼 IP와 MAC 주소를 추가할 수 있는 동적 리스트 입력 방식으로 전환했습니다.
  • 원격 접속 정보 통합: IP 주소 입력 시 해당 IP에 대응하는 원격 접속 도구(원격접속, 리눅스, 기타) 및 계정(ID/PW) 정보를 세트로 관리할 수 있도록 UI를 통합했습니다.
  • UI/UX 최적화:
    • 불필요한 섹션 구분을 정리하고 '시스템 사양', '디스크 정보', '네트워크 및 원격 접속 정보'로 논리적 그룹화를 강화했습니다.
    • 데이터 존재 여부에 따른 동적 렌더링 로직을 개선하여 데이터 정합성을 높였습니다.
  • 하위 호환성 유지: 기존 평탄화된(Flattened) 데이터 구조도 정상적으로 로드하여 동적 필드로 자동 변환되도록 폴백(Fallback) 로직을 구현했습니다.

관련 파일:

  • src/components/Modal/HWModal.ts

커밋 SHA: 10479aa

### 🚀 HWModal 네트워크 및 원격 접속 정보 통합 UI 고도화 완료 **작업 내용 요약:** - **네트워크 정보 입력 방식 혁신**: 기존의 고정된 IP/MAC 필드 방식을 탈피하여, 사용자가 필요한 만큼 IP와 MAC 주소를 추가할 수 있는 **동적 리스트 입력 방식**으로 전환했습니다. - **원격 접속 정보 통합**: IP 주소 입력 시 해당 IP에 대응하는 원격 접속 도구(원격접속, 리눅스, 기타) 및 계정(ID/PW) 정보를 세트로 관리할 수 있도록 UI를 통합했습니다. - **UI/UX 최적화**: - 불필요한 섹션 구분을 정리하고 '시스템 사양', '디스크 정보', '네트워크 및 원격 접속 정보'로 논리적 그룹화를 강화했습니다. - 데이터 존재 여부에 따른 동적 렌더링 로직을 개선하여 데이터 정합성을 높였습니다. - **하위 호환성 유지**: 기존 평탄화된(Flattened) 데이터 구조도 정상적으로 로드하여 동적 필드로 자동 변환되도록 폴백(Fallback) 로직을 구현했습니다. **관련 파일:** - `src/components/Modal/HWModal.ts` **커밋 SHA:** `10479aa`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
b24014 JooWangi Taehoon
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Taehoon/ITAM#19
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?