diff --git a/.agents/AGENTS.md b/.agents/AGENTS.md new file mode 100644 index 0000000..16d72c3 --- /dev/null +++ b/.agents/AGENTS.md @@ -0,0 +1,31 @@ +# Development Rules (개발 및 관리 규칙) + +1. **언어 설정**: 영어로 생각하되, 모든 답변은 **한국어**로 작성한다. +2. **임의 수정 절대 금지 (Zero-Arbitrary Change)**: + - 사용자가 명시적으로 지시한 부분 외에는 **단 한 줄의 코드도, 그 어떤 파일도 임의로 수정, 정리, 리팩토링하지 않는다.** + - 지시받지 않은 다른 파트의 코드는 절대 건드리지 않으며, 영향 범위가 요청 범위를 벗어나지 않도록 '외과 수술식(Surgical) 수정'을 원칙으로 한다. +3. **개선 작업 절차 (Test-First Approach)**: + - 사용자가 개선(Refactoring, Optimization 등)을 지시한 경우, **수정 전 현재 시스템이 정상적으로 잘 작동하는지 먼저 전수 확인**한다. + - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다. + - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다. +4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다. +5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**: + - 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다. + - 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다. +6. **RED–GREEN–Refactor 개발 원칙**: + - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다. + - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다. + - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다. + - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다. + - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다. + - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다. + - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다. + +# Server Run & External Access (서버 구동 및 외부 접속 규칙) + +1. **포트 고정**: 개발 서버는 반드시 **8080** 포트를 사용한다. (`vite.config.ts` 설정 준수) +2. **외부 접속 허용 (Host)**: 사무실 내 타 직원이 접속할 수 있도록 `--host` 모드로 구동한다. +3. **구동 명령어**: `npm run dev` + - 해당 명령어 실행 시 `0.0.0.0` 또는 `Network: http://[내-IP]:8080/` 경로로 타인 접속이 가능하다. +4. **IP 확인 방법**: + - Windows: `ipconfig` 명령어로 'IPv4 주소' 확인 후 공유. diff --git a/.gitea/workflows/itam_production_deploy.yml b/.gitea/workflows/itam_production_deploy.yml index 05698fc..013bac8 100644 --- a/.gitea/workflows/itam_production_deploy.yml +++ b/.gitea/workflows/itam_production_deploy.yml @@ -117,7 +117,7 @@ jobs: scp .env.deploy "${PROD_USER}@${PROD_HOST}:${PROD_DEPLOY_PATH}/.env" - ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && chmod 600 .env && docker compose -f docker-compose.prod.yaml config && docker compose -f docker-compose.prod.yaml up -d --build" + ssh "${PROD_USER}@${PROD_HOST}" "cd '${PROD_DEPLOY_PATH}' && chmod 600 .env && docker compose -f docker-compose.prod.yaml config && docker compose -f docker-compose.prod.yaml up -d --build && docker compose -f docker-compose.prod.yaml restart nginx" - name: Post-deploy status check env: diff --git a/.gitignore b/.gitignore index ad4db5d..df4b3f8 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ dist/ Thumbs.db backups/ mysql_data/ +/docs/grafana_integration_proposal.md diff --git a/docker-compose.prod.yaml b/docker-compose.prod.yaml index 79bcf59..82db918 100644 --- a/docker-compose.prod.yaml +++ b/docker-compose.prod.yaml @@ -77,4 +77,4 @@ services: - --collation-server=utf8mb4_unicode_ci volumes: - backend_keys: \ No newline at end of file + backend_keys: diff --git a/docker-compose.test.yaml b/docker-compose.test.yaml index ffd9fd9..115419d 100644 --- a/docker-compose.test.yaml +++ b/docker-compose.test.yaml @@ -24,7 +24,7 @@ services: - "3000:3000" volumes: - ./uploads:/app/uploads - - ./map_config.json:/app/map_config.json:ro + - ./map_config.json:/app/map_config.json restart: unless-stopped healthcheck: test: ["CMD", "curl", "-f", "http://localhost:3000/health"] diff --git a/docker/frontend/default.conf b/docker/frontend/default.conf index d7f2a4f..7aa5cab 100644 --- a/docker/frontend/default.conf +++ b/docker/frontend/default.conf @@ -24,6 +24,7 @@ server { # Serve static files with SPA fallback location / { + rewrite ^/mobile$ /mobile.html last; try_files $uri $uri/ /index.html; } diff --git a/mobile.html b/mobile.html index 8050aa3..f144251 100644 --- a/mobile.html +++ b/mobile.html @@ -294,6 +294,28 @@ + + + + + diff --git a/src/components/Modal/DomainModal.ts b/src/components/Modal/DomainModal.ts index ff51bdb..9f79459 100644 --- a/src/components/Modal/DomainModal.ts +++ b/src/components/Modal/DomainModal.ts @@ -133,6 +133,7 @@ class DomainAssetModal extends BaseModal { revertBtn.addEventListener('click', () => { this.setEditLockMode('view'); + this.isEditMode = false; if (this.currentAsset) this.fillFormData(this.currentAsset); }); @@ -202,7 +203,57 @@ class DomainAssetModal extends BaseModal { if (logs.length === 0) { container.innerHTML = '
이력이 없습니다.
'; } else { - container.innerHTML = logs.map(l => `
${l.log_date || ''}
${l.log_user || '시스템'}
${l.details}
`).join(''); + const createdDate = this.currentAsset?.created_at ? this.currentAsset.created_at.substring(0, 10) : ''; + + const grouped: Record = {}; + 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 ` +
+
+ + ${l.log_user || '시스템'} +
+
${displayDetails}
+
+ `; + }).join(''); + + const isInitialReg = date === createdDate; + const regBadge = isInitialReg ? `최초등록` : ''; + + return ` +
+
${date} ${regBadge}
+
+ ${entriesHtml} +
+
+ `; + }).join(''); } } } diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts index ec0b4e6..e14320f 100644 --- a/src/components/Modal/HWModal.ts +++ b/src/components/Modal/HWModal.ts @@ -98,6 +98,9 @@ class HwAssetModal extends BaseModal {
사용자 및 조직 정보
+
@@ -138,6 +141,10 @@ class HwAssetModal extends BaseModal {
+
+ + +
@@ -265,6 +272,7 @@ class HwAssetModal extends BaseModal { protected initChildLogic(onSave: () => void, closeModals: () => void): void { const saveBtn = document.getElementById('btn-save-hw-asset')!; + const revertBtn = document.getElementById('btn-revert-hw-edit')!; const deleteBtn = document.getElementById('btn-delete-hw-asset')!; const categorySelect = document.getElementById('hw-category') as HTMLSelectElement; const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement; @@ -309,6 +317,12 @@ class HwAssetModal extends BaseModal { typeSelect.addEventListener('change', () => { this.applyRoleVisibility(); this.updateHeaderIdentity(this.currentAsset); + + if (typeSelect.value === '공용PC') { + setFieldValue('hw-user_current', ''); + setFieldValue('hw-emp_no', ''); + setFieldValue('hw-user_position', '공용PC'); + } }); bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', ''); @@ -320,9 +334,15 @@ class HwAssetModal extends BaseModal { document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => { const cat = categorySelect.value; if (!cat) { alert('구분을 먼저 선택해주세요.'); return; } + + const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || ''; + if (!purchaseDate.trim()) { + alert('구매일자를 먼저 입력해 주세요. 구매일자가 없으면 자산번호를 생성할 수 없습니다.'); + return; + } + const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || ''; const prefix = TYPE_PREFIX_MAP[type] || TYPE_PREFIX_MAP[cat] || 'ETC'; - const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || ''; try { const res = await fetch(`/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`); const data = await res.json(); @@ -393,6 +413,12 @@ class HwAssetModal extends BaseModal { } }); + revertBtn.addEventListener('click', () => { + if (this.currentAsset) { + this.open(this.currentAsset, 'view'); + } + }); + saveBtn.addEventListener('click', async () => { if (!this.currentAsset) return; @@ -749,7 +775,8 @@ class HwAssetModal extends BaseModal { const hasSpec = specCategories.includes(category) || type.includes('서버PC'); const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구']; const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category); - const hasSN = !['사무가구', 'PC부품'].includes(category); + const hasSN = ['외부SW', '내부SW'].includes(category); + const showMainboard = category === 'PC'; const isParts = ['PC부품', '사무가구'].includes(category); const showRemote = category === '서버' || type.includes('서버'); const showServiceType = category === '서버' || type === '서버PC'; @@ -762,9 +789,83 @@ class HwAssetModal extends BaseModal { document.querySelectorAll('.org-user-section, .org-user-field').forEach(el => (el as HTMLElement).style.display = (isPersonal || isParts || category === '업무지원장비') ? '' : 'none'); document.querySelectorAll('.personal-only').forEach(el => (el as HTMLElement).style.display = isPersonal ? '' : 'none'); document.querySelectorAll('.sn-only').forEach(el => (el as HTMLElement).style.display = hasSN ? '' : 'none'); + document.querySelectorAll('.mainboard-only').forEach(el => (el as HTMLElement).style.display = showMainboard ? '' : 'none'); document.querySelectorAll('.monitor-only').forEach(el => (el as HTMLElement).style.display = type.includes('모니터') ? '' : 'none'); document.querySelectorAll('.parts-only').forEach(el => (el as HTMLElement).style.display = isParts ? '' : 'none'); document.querySelectorAll('.hardware-section').forEach(el => (el as HTMLElement).style.display = (hasSpec || isParts) ? '' : 'none'); + + // Lock only User and Organization Information for PC category during edit mode + const isEditMode = this.currentMode === 'edit'; + const isPC = category === 'PC'; + + const noticeEl = document.getElementById('hw-pc-workflow-notice'); + if (noticeEl) { + if (isPC && isEditMode) { + noticeEl.classList.remove('hidden'); + } else { + noticeEl.classList.add('hidden'); + } + } + + const lockedUserFields = [ + 'hw-current_dept', + 'hw-manager_primary', + 'hw-manager_secondary', + 'hw-user_current', + 'hw-emp_no', + 'hw-user_position', + 'hw-previous_user' + ]; + + const allFormControls = this.formEl ? this.formEl.querySelectorAll('input, select, textarea, button') : []; + + allFormControls.forEach(control => { + const el = control as HTMLElement; + const id = el.id; + + if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'hidden') return; + if (id === 'hw-asset_code' || id === 'btn-gen-hw-code') return; + + if (isPC && isEditMode && lockedUserFields.includes(id)) { + // Lock user information fields for PC in edit mode + if (el.tagName === 'SELECT') { + el.setAttribute('disabled', 'true'); + } else if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') { + el.setAttribute('readonly', 'true'); + (el as HTMLInputElement).style.backgroundColor = '#f1f5f9'; + (el as HTMLInputElement).style.cursor = 'not-allowed'; + } else if (el.tagName === 'BUTTON') { + el.setAttribute('disabled', 'true'); + } + } else { + // Normal behavior based on modal edit/view mode (includes add mode which has this.isEditMode = true) + if (!this.isEditMode) { + if (el.tagName === 'SELECT') { + el.setAttribute('disabled', 'true'); + } else if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') { + el.setAttribute('readonly', 'true'); + (el as HTMLInputElement).style.backgroundColor = ''; + (el as HTMLInputElement).style.cursor = ''; + } else if (el.tagName === 'BUTTON') { + if (id !== 'btn-print-hw-qr' && id !== 'btn-close-hw-modal') { + el.setAttribute('disabled', 'true'); + } + } + } else { + if (el.tagName === 'SELECT') { + el.removeAttribute('disabled'); + } else if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') { + if (id !== 'hw-emp_no') { + el.removeAttribute('readonly'); + (el as HTMLInputElement).style.backgroundColor = ''; + (el as HTMLInputElement).style.cursor = ''; + } + } else if (el.tagName === 'BUTTON') { + el.removeAttribute('disabled'); + } + } + } + }); } private updateMapButtonVisibility() { @@ -976,6 +1077,8 @@ class HwAssetModal extends BaseModal { const showList = (filterText: string = '') => { if (!this.isEditMode) return; + const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || ''; + if (category === 'PC') return; const users = state.masterData.users || []; const query = filterText.trim().toLowerCase(); @@ -1053,7 +1156,58 @@ class HwAssetModal extends BaseModal { if (!container) return; const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId); if (logs.length === 0) { container.innerHTML = '
기록된 변동 이력이 없습니다.
'; return; } - container.innerHTML = logs.map(l => `
${l.log_date || ''}
${l.log_user || '시스템'}
${l.details}
`).join(''); + + const createdDate = this.currentAsset?.created_at ? this.currentAsset.created_at.substring(0, 10) : ''; + + const grouped: Record = {}; + 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 ` +
+
+ + ${l.log_user || '시스템'} +
+
${displayDetails}
+
+ `; + }).join(''); + + const isInitialReg = date === createdDate; + const regBadge = isInitialReg ? `최초등록` : ''; + + return ` +
+
${date} ${regBadge}
+
+ ${entriesHtml} +
+
+ `; + }).join(''); } private getCategoryKey(asset: any): string { diff --git a/src/components/Modal/JobSpecModal.ts b/src/components/Modal/JobSpecModal.ts index b290cd7..b38b958 100644 --- a/src/components/Modal/JobSpecModal.ts +++ b/src/components/Modal/JobSpecModal.ts @@ -144,6 +144,7 @@ class JobSpecModal extends BaseModal { revertBtn.addEventListener('click', () => { this.setEditLockMode('view'); + this.isEditMode = false; if (this.currentAsset) this.fillFormData(this.currentAsset); }); diff --git a/src/components/Modal/PartsMasterModal.ts b/src/components/Modal/PartsMasterModal.ts index b3c7061..58babac 100644 --- a/src/components/Modal/PartsMasterModal.ts +++ b/src/components/Modal/PartsMasterModal.ts @@ -101,6 +101,7 @@ class PartsMasterModal extends BaseModal { revertBtn.addEventListener('click', () => { this.setEditLockMode('view'); + this.isEditMode = false; if (this.currentAsset) this.fillFormData(this.currentAsset); }); diff --git a/src/components/Modal/SWModal.ts b/src/components/Modal/SWModal.ts index 9ad8731..9da0725 100644 --- a/src/components/Modal/SWModal.ts +++ b/src/components/Modal/SWModal.ts @@ -278,6 +278,7 @@ class SwAssetModal extends BaseModal { revertBtn.addEventListener('click', () => { this.setEditLockMode('view'); + this.isEditMode = false; if (this.currentAsset) this.fillFormData(this.currentAsset); }); @@ -389,7 +390,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 = '
수정 이력이 없습니다.
'; return; } - container.innerHTML = logs.map(l => `
${l.log_date || ''}
${l.log_user || '시스템'}
${l.details}
`).join(''); + + const createdDate = this.currentAsset?.created_at ? this.currentAsset.created_at.substring(0, 10) : ''; + + const grouped: Record = {}; + 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 ` +
+
+ + ${l.log_user || '시스템'} +
+
${displayDetails}
+
+ `; + }).join(''); + + const isInitialReg = date === createdDate; + const regBadge = isInitialReg ? `최초등록` : ''; + + return ` +
+
${date} ${regBadge}
+
+ ${entriesHtml} +
+
+ `; + }).join(''); } } diff --git a/src/components/Modal/UserModal.ts b/src/components/Modal/UserModal.ts index 5a60419..420223d 100644 --- a/src/components/Modal/UserModal.ts +++ b/src/components/Modal/UserModal.ts @@ -107,6 +107,7 @@ class UserModal extends BaseModal { revertBtn.addEventListener('click', () => { this.setEditLockMode('view'); + this.isEditMode = false; if (this.currentAsset) this.fillFormData(this.currentAsset); }); diff --git a/src/components/Navigation.ts b/src/components/Navigation.ts index 300c4bc..aa53723 100644 --- a/src/components/Navigation.ts +++ b/src/components/Navigation.ts @@ -3,7 +3,7 @@ import { state } from '../core/state'; const MENU_CONFIG: any = { hw: { label: '하드웨어', - tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비'] + tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비'] }, sw: { label: '소프트웨어', @@ -65,39 +65,45 @@ export function renderNavigation(onTabChange: (tab: string) => void) { }); if (state.currentUserRole === 'admin' && catKey === 'hw') { - visibleTabs = ['대시보드', '실사 승인']; + visibleTabs = ['대시보드', '관리도구', '실사 승인', '위치지정', '부품 마스터']; } if (visibleTabs.length === 0) return; visibleTabs.forEach((tab: string) => { - if (tab === '부품 마스터') return; const item = document.createElement('div'); const isActive = state.activeSubTab === tab; item.className = `gnb-trigger ${isActive ? 'active' : ''}`; - item.textContent = tab; - item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font + + const isSubMenu = tab === '실사 승인' || tab === '위치지정' || tab === '부품 마스터'; + if (isSubMenu) { + item.innerHTML = `↳${tab}`; + item.style.fontSize = '11px'; + item.style.fontWeight = '500'; + item.style.marginLeft = '6px'; + if (!isActive) { + item.style.color = 'var(--mute)'; + } + } else { + item.textContent = tab; + item.style.fontSize = 'var(--fs-sm)'; + } item.addEventListener('click', (e) => { e.stopPropagation(); state.activeCategory = catKey as any; - state.activeSubTab = tab; + if (tab === '관리도구') { + state.activeSubTab = '실사 승인'; + } else { + state.activeSubTab = tab; + } render(); - onTabChange(tab); + onTabChange(state.activeSubTab); }); navList.appendChild(item); }); }); - // 3. 관리자 전용 '관리도구' - if (state.currentUserRole === 'admin') { - const adminTrigger = document.createElement('div'); - adminTrigger.className = 'gnb-trigger admin-trigger'; - adminTrigger.innerHTML = '관리도구'; - adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank')); - navList.appendChild(adminTrigger); - } - // 4. 이벤트 바인딩 document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload()); diff --git a/src/core/filterHandler.ts b/src/core/filterHandler.ts index 8d18954..1153640 100644 --- a/src/core/filterHandler.ts +++ b/src/core/filterHandler.ts @@ -15,6 +15,8 @@ export interface FilterOptions { showField?: boolean; showType?: boolean; showStatus?: boolean; + showPartCategory?: boolean; + showPartTier?: boolean; extraHTML?: string; onFilterChange: (filters: any) => void; initialFilters?: any; @@ -37,9 +39,11 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions) showField = false, showType = false, showStatus = false, + showPartCategory = false, + showPartTier = false, extraHTML = '', onFilterChange, - initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }, + initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '', partCategory: '', partTier: '' }, fullList = [] } = options; @@ -104,6 +108,22 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions) ${getUnique('CURRENT_DEPT').map(v => ``).join('')}
` : ''} + ${showPartCategory ? ` +
+ + +
` : ''} + ${showPartTier ? ` +
+ + +
` : ''} ${extraHTML} + + +
+ + + + `; + + // Initialize MapEditor instance + const editor = new MapEditor(); + await editor.init(); + activeMapEditorInstance = editor; return; } diff --git a/src/mobile-main.ts b/src/mobile-main.ts index 51cfdb6..da2aeb9 100644 --- a/src/mobile-main.ts +++ b/src/mobile-main.ts @@ -11,7 +11,15 @@ document.addEventListener('DOMContentLoaded', () => { const manualInput = document.getElementById('manual-code-input') as HTMLInputElement; const manualSubmitBtn = document.getElementById('btn-submit-manual') as HTMLButtonElement; + // 확인 모달 관련 셀렉터 및 상태 변수 + const confirmModal = document.getElementById('scan-confirm-modal')!; + const confirmModalMsg = document.getElementById('confirm-modal-msg')!; + const btnConfirmCancel = document.getElementById('btn-confirm-cancel') as HTMLButtonElement; + const btnConfirmOk = document.getElementById('btn-confirm-ok') as HTMLButtonElement; + let html5QrcodeScanner: any = null; + let isModalOpen = false; + let pendingAssetCode = ''; // Initialize UI based on current session lock updateLocationUI(); @@ -42,6 +50,33 @@ document.addEventListener('DOMContentLoaded', () => { manualInput.value = ''; }); + // 확인 모달 버튼 이벤트 바인딩 + btnConfirmCancel.addEventListener('click', () => { + closeConfirmModal(); + }); + + btnConfirmOk.addEventListener('click', () => { + const lockedLoc = sessionStorage.getItem(SESSION_LOC_KEY); + if (pendingAssetCode && lockedLoc) { + submitAssetAudit(pendingAssetCode, lockedLoc); + } + closeConfirmModal(); + }); + + function openConfirmModal(assetCode: string, locationCode: string) { + isModalOpen = true; + pendingAssetCode = assetCode; + confirmModalMsg.innerHTML = `자산 [${assetCode}]을
현재 위치 [${locationCode}]에 실사 등록하시겠습니까?`; + confirmModal.style.display = 'flex'; + vibrateDevice(50); + } + + function closeConfirmModal() { + confirmModal.style.display = 'none'; + isModalOpen = false; + pendingAssetCode = ''; + } + // --- Core Scanner Functions --- function initScanner() { @@ -80,8 +115,24 @@ document.addEventListener('DOMContentLoaded', () => { } function processScannedCode(rawCode: string) { + if (isModalOpen) return; // 모달이 이미 열려 있는 경우 추가 스캔 차단 + // QR 코드 인쇄 폼 등으로 인한 개행 문자(\r, \n) 및 모든 공백 문자(\s)를 제거 - const code = rawCode.replace(/[\r\n]/g, '').replace(/\s+/g, '').trim(); + let code = rawCode.replace(/[\r\n]/g, '').replace(/\s+/g, '').trim(); + + // 만약 스캔된 텍스트가 전체 URL 주소 형식이라면 파라미터 값만 추출하여 정제 + if (code.includes('http://') || code.includes('https://') || code.includes('/mobile')) { + try { + const urlObj = new URL(code, window.location.origin); + const locParam = urlObj.searchParams.get('loc'); + const assetParam = urlObj.searchParams.get('asset'); + + if (locParam) code = locParam; + else if (assetParam) code = assetParam; + } catch (e) { + console.error("URL 파싱 에러:", e); + } + } // 1. Check if the code is a physical location code if (code.startsWith('LOC-')) { @@ -100,8 +151,8 @@ document.addEventListener('DOMContentLoaded', () => { return; } - // Submit matching info to server - submitAssetAudit(code, lockedLoc); + // 바로 전송하는 대신 확인 모달 팝업을 띄움 + openConfirmModal(code, lockedLoc); } async function submitAssetAudit(assetCode: string, locationCode: string) { diff --git a/src/views/List/ListFactory.ts b/src/views/List/ListFactory.ts index 2fa5b2b..a984701 100644 --- a/src/views/List/ListFactory.ts +++ b/src/views/List/ListFactory.ts @@ -4,6 +4,7 @@ import { setupTableSorting, SortState } from '../../core/tableHandler'; import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler'; import { state } from '../../core/state'; import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData'; +import { createIcons, Plus, Settings, RefreshCcw } from 'lucide'; import './table.css'; declare var Chart: any; @@ -31,6 +32,8 @@ export interface ListViewConfig { showType?: boolean; showStatus?: boolean; showPosition?: boolean; + showPartCategory?: boolean; + showPartTier?: boolean; }; columns: ColumnDef[]; onRowClick?: (asset: any) => void; @@ -50,7 +53,10 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { } const filterKey = config.title; if (!(state as any).listFilters[filterKey]) { - (state as any).listFilters[filterKey] = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }; + (state as any).listFilters[filterKey] = { + keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '', + partCategory: '', partTier: '' + }; } let currentFilters: any = (state as any).listFilters[filterKey]; @@ -708,7 +714,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { function makeColumnsResizable(tableElement: HTMLTableElement) { const headers = tableElement.querySelectorAll('th'); - headers.forEach(th => { + headers.forEach((th, index) => { const resizer = th.querySelector('.resizer') as HTMLElement; if (!resizer) return; @@ -733,28 +739,44 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { resizer.classList.remove('resizing'); document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); + + // Save the widths of all columns back to the config so they persist on re-render + headers.forEach((hdr, idx) => { + if (config.columns[idx]) { + config.columns[idx].width = hdr.style.width; + } + }); }; resizer.addEventListener('mousedown', (e: MouseEvent) => { - // Prevents header click sorting trigger from firing + // Prevents header click sorting trigger from firing on mousedown e.stopPropagation(); e.preventDefault(); - // Freeze all columns at their current pixel width before dragging + // Freeze all columns at their current precise pixel width before dragging headers.forEach(header => { - header.style.width = `${header.offsetWidth}px`; + header.style.width = `${header.getBoundingClientRect().width}px`; }); + // Freeze the table at its current precise pixel width immediately + tableElement.style.width = `${tableElement.getBoundingClientRect().width}px`; + startX = e.clientX; - startWidth = th.offsetWidth; + startWidth = th.getBoundingClientRect().width; // Capture the initial physical width of the entire table - startTableWidth = tableElement.offsetWidth; + startTableWidth = tableElement.getBoundingClientRect().width; resizer.classList.add('resizing'); document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); + + // Prevents header click sorting trigger from firing on mouseup/click + resizer.addEventListener('click', (e: MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + }); }); } @@ -833,5 +855,9 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { chkBox?.addEventListener('change', handleToggle); } + createIcons({ + icons: { Plus, Settings, RefreshCcw } + }); + switchView(); } diff --git a/src/views/List/PartsMasterListView.ts b/src/views/List/PartsMasterListView.ts index 84d0ee4..5bba12e 100644 --- a/src/views/List/PartsMasterListView.ts +++ b/src/views/List/PartsMasterListView.ts @@ -16,7 +16,9 @@ export function renderPartsMasterList(container: HTMLElement) { keywordLabel: '부품명 / 등급 검색', showLoc: false, showDept: false, - showType: false + showType: false, + showPartCategory: true, + showPartTier: true }, onRowClick: (component) => openPartsMasterModal(component, 'view'), columns: [ @@ -72,6 +74,7 @@ export function renderPartsMasterList(container: HTMLElement) { title: '직무별 기준 사양', dataSource: () => state.masterData.jobSpecs || [], searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'], + persistentSortState: { key: 'id', direction: 'asc' }, filterOptions: { keywordLabel: '직무명 / 사양 검색', showLoc: false, @@ -130,9 +133,6 @@ export function renderPartsMasterList(container: HTMLElement) { } function renderSubTabs(container: HTMLElement) { - const header = container.querySelector('.page-header'); - if (!header) return; - // 기존에 생성된 탭 바가 있다면 제거하여 중복 방지 (스타일만 수정하는 최소 침습 방식) const existingTabs = container.querySelector('.sub-tab-container'); if (existingTabs) existingTabs.remove(); @@ -153,7 +153,12 @@ function renderSubTabs(container: HTMLElement) { `; - header.parentNode!.insertBefore(tabContainer, header.nextSibling); + const header = container.querySelector('.page-header'); + if (header) { + header.parentNode!.insertBefore(tabContainer, header.nextSibling); + } else { + container.insertBefore(tabContainer, container.firstChild); + } const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!; const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!; diff --git a/src/views/MapEditor.ts b/src/views/MapEditor.ts index 448ba28..1ebe054 100644 --- a/src/views/MapEditor.ts +++ b/src/views/MapEditor.ts @@ -1,6 +1,7 @@ import { IMAGE_LOCATIONS } from '../components/Modal/SharedData'; import { createIcons, X, Save, Trash2, ChevronLeft, ChevronRight } from 'lucide'; import { QRPrinter } from '../core/qr_print'; +import './map-editor.css'; export class MapEditor { private container: HTMLElement; @@ -114,6 +115,45 @@ export class MapEditor { this.render(); } + private onWindowMouseMove = (e: MouseEvent) => { + if (!this.isDrawing || !this.currentBox) return; + const rect = this.wrapper.getBoundingClientRect(); + const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width)); + const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height)); + + const width = currentX - this.startX; + const height = currentY - this.startY; + + this.currentBox.style.width = Math.abs(width) + 'px'; + this.currentBox.style.height = Math.abs(height) + 'px'; + this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px'; + this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px'; + }; + + private onWindowMouseUp = () => { + if (!this.isDrawing || !this.currentBox) return; + this.isDrawing = false; + + const width = parseFloat(this.currentBox.style.width); + const height = parseFloat(this.currentBox.style.height); + + if (width > 3 && height > 3) { + const rect = this.wrapper.getBoundingClientRect(); + const boxData = { + x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2), + y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2), + w: (width / rect.width * 100).toFixed(2), + h: (height / rect.height * 100).toFixed(2), + asset_id: null + }; + this.boxes.push(boxData); + this.render(); + } + + this.currentBox.remove(); + this.currentBox = null; + }; + private bindEvents() { this.wrapper.addEventListener('mousedown', (e) => { if (e.button !== 0) return; @@ -135,44 +175,8 @@ export class MapEditor { this.wrapper.appendChild(this.currentBox); }); - window.addEventListener('mousemove', (e) => { - if (!this.isDrawing || !this.currentBox) return; - const rect = this.wrapper.getBoundingClientRect(); - const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width)); - const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height)); - - const width = currentX - this.startX; - const height = currentY - this.startY; - - this.currentBox.style.width = Math.abs(width) + 'px'; - this.currentBox.style.height = Math.abs(height) + 'px'; - this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px'; - this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px'; - }); - - window.addEventListener('mouseup', () => { - if (!this.isDrawing || !this.currentBox) return; - this.isDrawing = false; - - const width = parseFloat(this.currentBox.style.width); - const height = parseFloat(this.currentBox.style.height); - - if (width > 3 && height > 3) { - const rect = this.wrapper.getBoundingClientRect(); - const boxData = { - x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2), - y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2), - w: (width / rect.width * 100).toFixed(2), - h: (height / rect.height * 100).toFixed(2), - asset_id: null - }; - this.boxes.push(boxData); - this.render(); - } - - this.currentBox.remove(); - this.currentBox = null; - }); + window.addEventListener('mousemove', this.onWindowMouseMove); + window.addEventListener('mouseup', this.onWindowMouseUp); (window as any).removeBox = (index: number) => { this.boxes.splice(index, 1); @@ -341,6 +345,13 @@ export class MapEditor { }]); }; } + + public destroy() { + window.removeEventListener('mousemove', this.onWindowMouseMove); + window.removeEventListener('mouseup', this.onWindowMouseUp); + delete (window as any).removeBox; + delete (window as any).printBoxQR; + } } function getCleanMapKey(path: string) {