feat/refactor: 자산관리 시스템 기능 고도화 및 UI/UX 개선

1. 컬럼 드래그 너비 조정 버그 수정 및 개선 (ListFactory.ts)
   - 드래그 완료 시 click 이벤트 전파 차단으로 정렬(sorting) 오작동 방지
   - getBoundingClientRect().width 활용한 소수점 정밀 너비 고정 및 레이아웃 시프트 방지
   - 마우스 업 시점의 모든 컬럼 너비를 config.columns에 동기화하여 재렌더링 시 너비 영속성 보장

2. PC 자산 모달 필드 잠금 정책 세분화 (HWModal.ts)
   - 자산 추가(add) 모드에서는 모든 필드(사용자 정보 포함) 입력 허용
   - 자산 수정(edit) 모드에서만 사용자/조직 정보 관련 필드(lockedUserFields) 선택적 잠금 적용
   - 시스템 사양, 네트워크, 위치, 구매 등 다른 모든 섹션은 수정 가능하도록 복구 및 안내 배너 갱신

3. 관리자 전용 메뉴 단일 페이지 앱(SPA) 통합 (Navigation.ts, main.ts, MapEditor.ts)
   - 기존의 실사 승인 탭과 독립 실행형 좌표 에디터(MapEditor)를 GNB '관리도구' 하위 메뉴로 통합
   - '실사 승인', '위치지정'을 GNB에서 ↳ 화살표 및 11px 폰트의 계층형 탭 스타일로 렌더링
   - 내부 서브 탭 바를 삭제하고 메인 영역 전체 높이(calc(100vh - var(--header-height) - 48px))를 확보
   - 다른 탭으로 이동 시 MapEditor 인스턴스의 window 이벤트 및 전역 바인딩을 소거하는 destroy() 리사이클 구현

4. 자산 이력(History) 가독성 개선 및 포맷팅 (HWModal.ts, SWModal.ts, DomainModal.ts)
   - 자산 변경 이력 로그를 일자별로 그룹화하여 타임라인 렌더링
   - 최초 등록 데이터에 녹색 '[최초등록]' 배지 추가
   - 기존의 생 JSON 이력 데이터를 친절한 한국어 텍스트 포맷으로 가공하여 가독성 극대화
This commit is contained in:
이태훈
2026-06-26 17:31:39 +09:00
parent 87459c8f44
commit 8129f85071
7 changed files with 397 additions and 65 deletions

View File

@@ -389,7 +389,58 @@ class SwAssetModal extends BaseModal {
if (!container) return;
const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
const createdDate = this.currentAsset?.created_at ? this.currentAsset.created_at.substring(0, 10) : '';
const grouped: Record<string, typeof logs> = {};
logs.forEach(l => {
const date = l.log_date || '날짜 미지정';
if (!grouped[date]) grouped[date] = [];
grouped[date].push(l);
});
container.innerHTML = Object.entries(grouped).map(([date, dateLogs]) => {
const entriesHtml = dateLogs.map((l, idx) => {
const isLast = idx === dateLogs.length - 1;
const borderStyle = isLast ? '' : 'border-bottom: 1px dashed var(--hairline); padding-bottom: 8px; margin-bottom: 8px;';
let displayDetails = l.details;
if (l.details && l.details.trim().startsWith('{')) {
try {
const data = JSON.parse(l.details);
if (data.type === 'checkout') {
displayDetails = `[불출] ${data.user || ''} (${data.dept || ''}) ${data.memo ? `| 메모: ${data.memo}` : ''}`;
} else if (data.type === 'return') {
displayDetails = `[반납] ${data.user || ''} (${data.dept || ''}) ${data.memo ? `| 메모: ${data.memo}` : ''}`;
} else if (data.type === 'move') {
displayDetails = `[이동] ${data.user || ''} (${data.dept || ''}) ➔ ${data.targetUser || ''} (${data.targetDept || ''}) ${data.memo ? `| 메모: ${data.memo}` : ''}`;
}
} catch (e) {}
}
return `
<div class="history-entry" style="${borderStyle}">
<div style="font-weight: 600; color: var(--primary); opacity: 0.8; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
<span style="display: inline-block; width: 4px; height: 4px; background-color: var(--primary); border-radius: 50%;"></span>
${l.log_user || '시스템'}
</div>
<div style="color: var(--primary); padding-left: 10px; line-height: 1.5;">${displayDetails}</div>
</div>
`;
}).join('');
const isInitialReg = date === createdDate;
const regBadge = isInitialReg ? `<span class="badge-reg" style="font-size: 10px; padding: 1px 5px; margin-left: 6px; background-color: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 4px; font-weight: 600;">최초등록</span>` : '';
return `
<div class="history-item">
<div class="history-date" style="display: flex; align-items: center;">${date} ${regBadge}</div>
<div class="history-details" style="display: flex; flex-direction: column; gap: 4px;">
${entriesHtml}
</div>
</div>
`;
}).join('');
}
}