[Refactor/UI/Data] 시스템 구조 모듈화, 가로 1단 내비게이션 전환 및 MySQL 연동 구축 #9

New Issue

Taehoon · 2026-04-17T14:19:08+09:00

Taehoon commented

2026-04-17 14:19:08 +09:00

1. 프로젝트 아키텍처 대규모 리팩토링

작업자 충돌 방지 구조: AssetTableView.ts, DashboardView.ts를 자산별 전용 뷰(List/, Dashboard/)로 분리하여 공동 작업 환경 최적화.
공통 유틸리티 도입: core/utils.ts를 신설하여 금액 포맷팅, 배지 생성, 날짜 처리 등 중복 로직 통합.
스타일 시트 체계화: common.css에서 dashboard.css, table.css, modal.css를 완전 독립시켜 테마 및 개별 스타일 관리 효율성 증대.

2. 상단 내비게이션 및 UX 개편

Single-line Integrated Nav: 사이드바를 제거하고 GNB와 LNB가 같은 라인에 위치하는 '인라인 확장형' 내비게이션으로 전환.
Hover-based Interaction: 마우스 오버 시 즉시 하위 탭이 활성화되는 동적 UI 구현 및 오버 범위 최적화.
UI 표준화: 모든 리스트의 여백(사방 2rem) 및 표 스타일(한 줄 표시, Box-less)을 '구독 SW' 양식으로 단일화.

3. 데이터베이스(MySQL) 연동 및 영구 저장 구현

백엔드 구축: Node.js(Express) + MySQL 기반의 API 서버(server.js) 연동.
스키마 확장: 하드웨어 자산 인터페이스에 '현사용조직/이전사용조직' 필드 추가 및 DB 테이블 반영.
데이터 안정성: 엑셀 업로드 및 모달 수정 시 DB 실시간 저장 로직 구현.

4. 모달창 인터랙션 고도화

Mode Switching: 모든 자산 모달에 '조회 모드 ↔ 수정 모드' 전환 기능 도입.
Button Standardization: 모달 하단 버튼 위치 및 명칭([삭제] | [수정 취소] [닫기] [수정/저장]) 전수 통일.

### 1. 프로젝트 아키텍처 대규모 리팩토링 - **작업자 충돌 방지 구조**: `AssetTableView.ts`, `DashboardView.ts`를 자산별 전용 뷰(`List/`, `Dashboard/`)로 분리하여 공동 작업 환경 최적화. - **공통 유틸리티 도입**: `core/utils.ts`를 신설하여 금액 포맷팅, 배지 생성, 날짜 처리 등 중복 로직 통합. - **스타일 시트 체계화**: `common.css`에서 `dashboard.css`, `table.css`, `modal.css`를 완전 독립시켜 테마 및 개별 스타일 관리 효율성 증대. ### 2. 상단 내비게이션 및 UX 개편 - **Single-line Integrated Nav**: 사이드바를 제거하고 GNB와 LNB가 같은 라인에 위치하는 '인라인 확장형' 내비게이션으로 전환. - **Hover-based Interaction**: 마우스 오버 시 즉시 하위 탭이 활성화되는 동적 UI 구현 및 오버 범위 최적화. - **UI 표준화**: 모든 리스트의 여백(사방 2rem) 및 표 스타일(한 줄 표시, Box-less)을 '구독 SW' 양식으로 단일화. ### 3. 데이터베이스(MySQL) 연동 및 영구 저장 구현 - **백엔드 구축**: Node.js(Express) + MySQL 기반의 API 서버(`server.js`) 연동. - **스키마 확장**: 하드웨어 자산 인터페이스에 '현사용조직/이전사용조직' 필드 추가 및 DB 테이블 반영. - **데이터 안정성**: 엑셀 업로드 및 모달 수정 시 DB 실시간 저장 로직 구현. ### 4. 모달창 인터랙션 고도화 - **Mode Switching**: 모든 자산 모달에 '조회 모드 ↔ 수정 모드' 전환 기능 도입. - **Button Standardization**: 모달 하단 버튼 위치 및 명칭([삭제] | [수정 취소] [닫기] [수정/저장]) 전수 통일.

Taehoon commented

2026-04-20 17:43:39 +09:00

📝 [Update] 모달 시스템 표준화 및 하드웨어 데이터 관리 체계 고도화

기존 시스템의 구조적 파편화를 해결하고, 자산 관리의 편의성과 데이터 정합성을 극대화하기 위해 모달 UI/UX 전면 개편 및 DB 분류 자동화 작업을 완료함.

1. 모달 UI/UX 표준화 및 정밀 제어

수정 잠금(Edit Lock) 시스템 통합:
- HWModal, PCModal의 조회/편집 동작 방식을 '조회 모드' 기본으로 통일.
- [수정] 버튼 클릭 전 모든 필드 입력 차단 및 리스트박스 화살표 숨김 처리(CSS appearance: none 적용).
- 자산 추가 시에만 즉시 편집 모드로 진입하도록 예외 처리.
유형별 Context-Aware UI 구축:
- 자산 유형 및 상세용도에 따라 필요한 관리 항목만 동적으로 노출 (예: CPU/모바일은 모델명만, RAM은 용량만 표시).
- 설치위치 계층형 선택: 건물 선택 시 해당 건물의 상세 위치만 노출되는 Cascading UI 적용.
- '기타' 선택 시에만 직접 입력창이 활성화되도록 예외 로직 강화.
정렬 로직 일괄 적용:
- 모든 리스트에 '구매법인별(가나다) > 자산번호순' 정렬 필터(Sorting Plan C) 반영.

2. 데이터베이스 스키마 표준화 및 자동 분류

하드웨어 테이블 구조 단일화:
- server, pc, storage, equip, mobile 테이블을 서버급 사양 수용이 가능한 표준 스키마로 통합.
- detail_purpose(상세용도) 필드를 통한 PC 기반 서버 등 하이브리드 자산 분류 지원.
DB 자동 마이그레이션 로직 구현:
- 저장 시 선택한 유형/상세용도에 따라 적절한 DB 카테고리로 데이터가 자동 이동되도록 백엔드-프론트엔드 연동.
- 기존 서버 DB 내 혼재된 NAS, DAS, 스토리지 자산(약 32건)을 새로운 체계에 맞춰 재배치 완료.
자산번호 관리 강화:
- 유형별 접두사(SVR, STO, MOB 등) 기반 자동 생성 API 구축.
- 생성된 자산번호는 수정 모드에서도 편집할 수 없도록 물리적 차단(readonly 및 포인터 이벤트 거부).

3. 코드 아키텍처 리팩토링 (Maintainability)

공통 데이터 중앙화 (SharedData.ts): 구매법인, 사용조직, 자산유형 목록을 상수로 분리하여 유지보수 포인트 단일화.
모달 유틸리티 추출 (ModalUtils.ts): 폼 바인딩, 위치 파싱, 수정 잠금 등 반복 로직을 함수화하여 코드 중복 50% 이상 제거.
상태 관리 로직 코어 이관 (state.ts): 개별 모달에 분산되어 있던 저장/삭제 비즈니스 로직을 중앙 상태 관리자로 통합.
중복 컴포넌트 제거: 기능을 HWModal로 통합 완료한 StorageModal.ts 파일 삭제.

4. 주요 버그 수정

모바일 기기 리스트에서 기존 자산 클릭 시 즉시 편집 모드로 열리던 로직 결함 해결.
PC/모바일 모달에서 필드 참조 시 발생하던 Cannot set properties of null 런타임 에러 전수 해결.
유형 변경 시 특정 자산군에서 유형 선택창이 사라지던 UI 버그 수정.

### 📝 [Update] 모달 시스템 표준화 및 하드웨어 데이터 관리 체계 고도화 기존 시스템의 구조적 파편화를 해결하고, 자산 관리의 편의성과 데이터 정합성을 극대화하기 위해 **모달 UI/UX 전면 개편** 및 **DB 분류 자동화** 작업을 완료함. #### 1. 모달 UI/UX 표준화 및 정밀 제어 * **수정 잠금(Edit Lock) 시스템 통합**: * `HWModal`, `PCModal`의 조회/편집 동작 방식을 '조회 모드' 기본으로 통일. * [수정] 버튼 클릭 전 모든 필드 입력 차단 및 리스트박스 화살표 숨김 처리(CSS `appearance: none` 적용). * 자산 추가 시에만 즉시 편집 모드로 진입하도록 예외 처리. * **유형별 Context-Aware UI 구축**: * 자산 유형 및 상세용도에 따라 필요한 관리 항목만 동적으로 노출 (예: CPU/모바일은 모델명만, RAM은 용량만 표시). * **설치위치 계층형 선택**: 건물 선택 시 해당 건물의 상세 위치만 노출되는 Cascading UI 적용. * '기타' 선택 시에만 직접 입력창이 활성화되도록 예외 로직 강화. * **정렬 로직 일괄 적용**: * 모든 리스트에 '구매법인별(가나다) > 자산번호순' 정렬 필터(Sorting Plan C) 반영. #### 2. 데이터베이스 스키마 표준화 및 자동 분류 * **하드웨어 테이블 구조 단일화**: * `server`, `pc`, `storage`, `equip`, `mobile` 테이블을 서버급 사양 수용이 가능한 표준 스키마로 통합. * `detail_purpose`(상세용도) 필드를 통한 PC 기반 서버 등 하이브리드 자산 분류 지원. * **DB 자동 마이그레이션 로직 구현**: * 저장 시 선택한 **유형/상세용도**에 따라 적절한 DB 카테고리로 데이터가 자동 이동되도록 백엔드-프론트엔드 연동. * 기존 서버 DB 내 혼재된 NAS, DAS, 스토리지 자산(약 32건)을 새로운 체계에 맞춰 재배치 완료. * **자산번호 관리 강화**: * 유형별 접두사(SVR, STO, MOB 등) 기반 자동 생성 API 구축. * 생성된 자산번호는 **수정 모드에서도 편집할 수 없도록** 물리적 차단(`readonly` 및 포인터 이벤트 거부). #### 3. 코드 아키텍처 리팩토링 (Maintainability) * **공통 데이터 중앙화 (`SharedData.ts`)**: 구매법인, 사용조직, 자산유형 목록을 상수로 분리하여 유지보수 포인트 단일화. * **모달 유틸리티 추출 (`ModalUtils.ts`)**: 폼 바인딩, 위치 파싱, 수정 잠금 등 반복 로직을 함수화하여 코드 중복 50% 이상 제거. * **상태 관리 로직 코어 이관 (`state.ts`)**: 개별 모달에 분산되어 있던 저장/삭제 비즈니스 로직을 중앙 상태 관리자로 통합. * **중복 컴포넌트 제거**: 기능을 HWModal로 통합 완료한 `StorageModal.ts` 파일 삭제. #### 4. 주요 버그 수정 * 모바일 기기 리스트에서 기존 자산 클릭 시 즉시 편집 모드로 열리던 로직 결함 해결. * PC/모바일 모달에서 필드 참조 시 발생하던 `Cannot set properties of null` 런타임 에러 전수 해결. * 유형 변경 시 특정 자산군에서 유형 선택창이 사라지던 UI 버그 수정.

Taehoon commented

2026-04-22 17:20:14 +09:00

🛠️ 하드웨어 자산 관리 기능 개선 및 프로세스 고도화 완료 보고

지금까지 진행된 주요 작업 내역을 요약하여 보고드립니다.

1. 자동 변경 이력(Auto Logging) 시스템 구축

대상: 서버, PC, 스토리지, NAS, DAS, 전산비품, 모바일기기 전 품목 확대 적용
내용: 주요 필드(조직, 위치, 담당자, 상태, IP, 상세유형 등) 수정 시 시스템이 이전 값 → 변경 값 형태의 로그를 자동으로 생성하여 이력 탭에 기록합니다.

2. 데이터 동기화 및 관리 체계 정립

상세유형 자동 동기화: 개인PC를 제외한 자산(서버, 스토리지 등)은 '유형' 값이 '상세유형' 필드에 자동으로 복사되어 데이터 파편화를 방지합니다.
기존 데이터 보정: DB 내 기존 데이터들의 상세유형 필드를 유형 값으로 일치시키는 일괄 보정 작업을 완료했습니다.
노트북 관리 일원화: 노트북을 모바일기기 그룹으로 재분류하여 설치위치 대신 보관위치/현재상태 중심의 UI로 전환했습니다.

3. 입력 유효성 및 보안 강화

자산코드 강제화: '생성' 버튼을 통해 자산번호를 부여받지 않으면 저장이 되지 않도록 차단 로직을 구현했습니다.
YYYYMM 양식 제한: 구매/출시연월 입력 시 숫자 6자리만 입력되도록 강제하여 데이터 품질을 높였습니다.
조직 변경 추적: '현 사용조직' 변경 시 기존 조직 정보가 '이전 사용조직' 필드에 자동으로 업데이트됩니다.

4. 시스템 안정화 (버그 수정)

자산 추가 기본값 매핑: 각 리스트 탭에서 추가 시 해당 카테고리의 유형이 모달에 즉시 선택되도록 수정했습니다.
DB 500 에러 해결: 테이블 스키마에 누락되었던 storage_location, status 컬럼을 추가하고 DB 초기화를 통해 안정성을 확보했습니다.

위 사항들은 origin setting 브랜치에 커밋 및 푸시가 완료되었습니다.

### 🛠️ 하드웨어 자산 관리 기능 개선 및 프로세스 고도화 완료 보고 지금까지 진행된 주요 작업 내역을 요약하여 보고드립니다. #### 1. 자동 변경 이력(Auto Logging) 시스템 구축 - **대상**: 서버, PC, 스토리지, NAS, DAS, 전산비품, 모바일기기 전 품목 확대 적용 - **내용**: 주요 필드(조직, 위치, 담당자, 상태, IP, 상세유형 등) 수정 시 시스템이 `이전 값 → 변경 값` 형태의 로그를 자동으로 생성하여 이력 탭에 기록합니다. #### 2. 데이터 동기화 및 관리 체계 정립 - **상세유형 자동 동기화**: 개인PC를 제외한 자산(서버, 스토리지 등)은 '유형' 값이 '상세유형' 필드에 자동으로 복사되어 데이터 파편화를 방지합니다. - **기존 데이터 보정**: DB 내 기존 데이터들의 상세유형 필드를 유형 값으로 일치시키는 일괄 보정 작업을 완료했습니다. - **노트북 관리 일원화**: 노트북을 모바일기기 그룹으로 재분류하여 설치위치 대신 보관위치/현재상태 중심의 UI로 전환했습니다. #### 3. 입력 유효성 및 보안 강화 - **자산코드 강제화**: '생성' 버튼을 통해 자산번호를 부여받지 않으면 저장이 되지 않도록 차단 로직을 구현했습니다. - **YYYYMM 양식 제한**: 구매/출시연월 입력 시 숫자 6자리만 입력되도록 강제하여 데이터 품질을 높였습니다. - **조직 변경 추적**: '현 사용조직' 변경 시 기존 조직 정보가 '이전 사용조직' 필드에 자동으로 업데이트됩니다. #### 4. 시스템 안정화 (버그 수정) - **자산 추가 기본값 매핑**: 각 리스트 탭에서 추가 시 해당 카테고리의 유형이 모달에 즉시 선택되도록 수정했습니다. - **DB 500 에러 해결**: 테이블 스키마에 누락되었던 `storage_location`, `status` 컬럼을 추가하고 DB 초기화를 통해 안정성을 확보했습니다. 위 사항들은 `origin setting` 브랜치에 커밋 및 푸시가 완료되었습니다.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#9