[Refactor & Feature] 서버PC 마이그레이션, List View 공통화 및 UI/API 대규모 리팩토링 완료 #17

New Issue

Taehoon · 2026-05-26T19:54:24+09:00

Taehoon commented

2026-05-26 19:54:24 +09:00

🚀 주요 작업 내용 요약 (Session Summary)

이번 세션에서 진행된 대대적인 아키텍처 리팩토링 및 데이터 마이그레이션, UI 개선 작업의 내역입니다.

1. 💾 데이터베이스 마이그레이션 및 스키마 확장

'서버PC' 자산 통합: asset_server 테이블에 있던 '서버PC' 자산을 asset_pc 테이블로 일괄 마이그레이션 (Category를 'PC'로 일괄 변경).
스키마 확장 및 복구: asset_pc 테이블에 서버 관리에 필요한 누락 컬럼(location, ip_address, asset_purpose, model_name, os 등) 추가 및 기존 엑셀 원본 데이터를 활용한 유실 데이터 복구 완료.
자산번호 일괄 재부여: 새로운 네이밍 규칙(구분/유형 - 구매연월 - 일련번호 4자리)에 따라 270여 개 전체 자산의 asset_code 일괄 재부여 (batch_reformat_codes.js). Unique 제약 조건 회피 로직 포함.

2. 🧩 프론트엔드 아키텍처 대통합 (List View Refactoring)

ListFactory.ts 도입: 14개로 파편화되어 있던 리스트 뷰(*ListView.ts)의 중복 코드(테이블 생성, 필터, 정렬 등 약 1,500줄 이상)를 단일 팩토리 함수로 완전히 통합.
유지보수성 극대화: 각 뷰는 이제 테이블 설정(Config) 객체만 전달하여 화면을 렌더링하도록 구조 대폭 개선.
TypeScript 타입 에러 및 인터페이스 누락(Navigation 등) 완벽 수정 후 빌드 안정성 확보.

3. 🎨 UI/UX 개선 및 버그 픽스

상세 모달 레이아웃: 모델명과 메인보드 필드를 동일한 행에 나란히 배치하고, 불필요하게 남아있던 중복 메인보드 필드 제거.
상세 모달 OS 필드: 새롭게 추가된 DB os 컬럼을 UI 모달(System Specs 영역)에 연동 및 입출력 반영.
서버 리스트 화면:
- '용도' 컬럼 너비 축소 및 '자산유형(asset_type)' 컬럼 신규 추가.
- '모델/메인보드' 컬럼의 노출 우선순위 로직 개선 (데이터 존재 여부에 따라 model_name 최우선 표시).
- 폰트 스타일 통일(Badge 클래스 제거).
검색바 '현 사용조직' 버그 픽스: DOM이 렌더링 되기 전 getElementById를 호출하여 리스트박스가 비어있던 문제를 container.querySelector로 변경하여 모든 화면에 정상 표시되도록 수정.
상세 모달 삭제 버튼 활성화: state.ts에 범용 deleteAsset 로직 구현 및 하드웨어/소프트웨어 전 카테고리 매핑 연동.

4. 🧹 백엔드 리팩토링 및 환경 정리

API 동적 라우팅 (server.js): 30여 줄 이상 하드코딩 되어 있던 개별 엔드포인트(app.get/post)를 routeMap을 활용한 동적 라우팅으로 통합.
하드코딩 URL 제거: 프론트엔드 곳곳에 박혀 있던 http://${location.hostname}:3000 문자열을 API_BASE_URL 환경 변수로 치환 및 중앙 집중화.
임시 파일 대청소: 마이그레이션 용도로 쓰인 40여 개의 단발성 스크립트, JSON 덤프, 그리고 용량을 차지하던 백업 폴더(backup_refactor, backup_temp) 영구 삭제.

적용 브랜치: db_setting
상태: 커밋 및 원격 저장소 푸시 완료

## 🚀 주요 작업 내용 요약 (Session Summary) 이번 세션에서 진행된 대대적인 아키텍처 리팩토링 및 데이터 마이그레이션, UI 개선 작업의 내역입니다. ### 1. 💾 데이터베이스 마이그레이션 및 스키마 확장 * **'서버PC' 자산 통합**: `asset_server` 테이블에 있던 '서버PC' 자산을 `asset_pc` 테이블로 일괄 마이그레이션 (Category를 'PC'로 일괄 변경). * **스키마 확장 및 복구**: `asset_pc` 테이블에 서버 관리에 필요한 누락 컬럼(`location`, `ip_address`, `asset_purpose`, `model_name`, `os` 등) 추가 및 기존 엑셀 원본 데이터를 활용한 유실 데이터 복구 완료. * **자산번호 일괄 재부여**: 새로운 네이밍 규칙(구분/유형 - 구매연월 - 일련번호 4자리)에 따라 270여 개 전체 자산의 `asset_code` 일괄 재부여 (`batch_reformat_codes.js`). Unique 제약 조건 회피 로직 포함. ### 2. 🧩 프론트엔드 아키텍처 대통합 (List View Refactoring) * **`ListFactory.ts` 도입**: 14개로 파편화되어 있던 리스트 뷰(`*ListView.ts`)의 중복 코드(테이블 생성, 필터, 정렬 등 약 1,500줄 이상)를 단일 팩토리 함수로 완전히 통합. * **유지보수성 극대화**: 각 뷰는 이제 테이블 설정(Config) 객체만 전달하여 화면을 렌더링하도록 구조 대폭 개선. * TypeScript 타입 에러 및 인터페이스 누락(Navigation 등) 완벽 수정 후 빌드 안정성 확보. ### 3. 🎨 UI/UX 개선 및 버그 픽스 * **상세 모달 레이아웃**: 모델명과 메인보드 필드를 동일한 행에 나란히 배치하고, 불필요하게 남아있던 중복 메인보드 필드 제거. * **상세 모달 OS 필드**: 새롭게 추가된 DB `os` 컬럼을 UI 모달(System Specs 영역)에 연동 및 입출력 반영. * **서버 리스트 화면**: * '용도' 컬럼 너비 축소 및 '자산유형(asset_type)' 컬럼 신규 추가. * '모델/메인보드' 컬럼의 노출 우선순위 로직 개선 (데이터 존재 여부에 따라 `model_name` 최우선 표시). * 폰트 스타일 통일(Badge 클래스 제거). * **검색바 '현 사용조직' 버그 픽스**: DOM이 렌더링 되기 전 `getElementById`를 호출하여 리스트박스가 비어있던 문제를 `container.querySelector`로 변경하여 모든 화면에 정상 표시되도록 수정. * **상세 모달 삭제 버튼 활성화**: `state.ts`에 범용 `deleteAsset` 로직 구현 및 하드웨어/소프트웨어 전 카테고리 매핑 연동. ### 4. 🧹 백엔드 리팩토링 및 환경 정리 * **API 동적 라우팅 (`server.js`)**: 30여 줄 이상 하드코딩 되어 있던 개별 엔드포인트(`app.get/post`)를 `routeMap`을 활용한 동적 라우팅으로 통합. * **하드코딩 URL 제거**: 프론트엔드 곳곳에 박혀 있던 `http://${location.hostname}:3000` 문자열을 `API_BASE_URL` 환경 변수로 치환 및 중앙 집중화. * **임시 파일 대청소**: 마이그레이션 용도로 쓰인 40여 개의 단발성 스크립트, JSON 덤프, 그리고 용량을 차지하던 백업 폴더(`backup_refactor`, `backup_temp`) 영구 삭제. --- **적용 브랜치**: `db_setting` **상태**: 커밋 및 원격 저장소 푸시 완료

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#17