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

feat: 자산 관리 가이드 추가 및 테이블 스타일 개선

Browse Source
This commit is contained in:
주완기
2026-04-22 16:32:57 +09:00
parent fca9f5caf8
commit fdc29b23c1
22 changed files with 1309 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Modal/HWModal.ts
View File

@@ -193,7 +193,7 @@ const HW_MODAL_HTML = `
</div>
`;
export function openHwModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view') {
export function openHwModal(asset: HardwareAsset, mode: 'view' | 'add' | 'edit' = 'view') {
currentAsset = asset;
const modal = document.getElementById('hw-asset-modal')!;
@@ -204,7 +204,7 @@ export function openHwModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view')
generateBtnId: 'btn-generate-hw-code'
});
isEditMode = (mode === 'add');
isEditMode = (mode === 'add' || mode === 'edit');
// 2. 데이터 바인딩
fillHwFormData(asset);

31
src/components/Modal/ModalUtils.ts
View File

@@ -133,3 +133,34 @@ export function setEditLock(
if (generateBtn) generateBtn.classList.add('hidden');
}
}
// 8. 날짜 자동 마스킹 및 포커스 제어 (Auto-jump)
export function applyDateMask(el: HTMLInputElement) {
if (!el) return;
el.placeholder = 'YYYY-MM-DD';
el.maxLength = 10;
el.addEventListener('input', (e) => {
let value = el.value.replace(/[^0-9]/g, ''); // 숫자만 남김
let result = '';
if (value.length <= 4) {
result = value;
} else if (value.length <= 6) {
result = value.substring(0, 4) + '-' + value.substring(4);
} else {
result = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 10);
}
el.value = result;
});
// 엔터 키나 입력 완료 시 유효성 검사 (선택 사항)
el.addEventListener('blur', () => {
const val = el.value;
if (val && !/^\d{4}-\d{2}-\d{2}$/.test(val)) {
// 형식이 맞지 않으면 경고 효과 등을 줄 수 있음
}
});
}

6
src/components/Modal/PCModal.ts
View File

@@ -146,7 +146,7 @@ const PC_MODAL_HTML = `
</div>
`;
export function openPcModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view') {
export function openPcModal(asset: HardwareAsset, mode: 'view' | 'add' | 'edit' = 'view') {
currentAsset = asset;
const modal = document.getElementById('pc-asset-modal');
if (!modal) return;
@@ -157,14 +157,14 @@ export function openPcModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view')
if (form) form.reset();
if (mode === 'add') {
if (mode === 'add' || mode === 'edit') {
isEditMode = true;
if (form) {
form.classList.remove('is-view-mode');
form.classList.add('is-edit-mode');
}
saveBtn.textContent = '저장';
revertBtn.classList.add('hidden');
revertBtn.classList.toggle('hidden', mode === 'add');
const prevOrgGroup = document.getElementById('pc-이전사용조직-group');
if (prevOrgGroup) prevOrgGroup.style.display = 'none';
} else {

214
src/components/Modal/SWModal.ts
View File

@@ -2,13 +2,14 @@ import { state } from '../../core/state';
import { SoftwareAsset } from '../../core/excelHandler';
import { openModal, closeModals } from './BaseModal';
import { openSwUserModal } from './SWUserModal';
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw } from 'lucide';
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar } from 'lucide';
import { CORP_LIST } from './SharedData';
import {
generateOptionsHTML,
setFieldValue,
getFieldValue,
setEditLock
setEditLock,
applyDateMask
} from './ModalUtils';
let currentSwAsset: SoftwareAsset | null = null;
@@ -31,7 +32,16 @@ const SW_MODAL_HTML = `
<!-- Group 1: 기본 정보 (Identity) -->
<div class="form-section-title">기본 정보 (Identity)</div>
<div class="form-group">
<label for="sw-법인">구매법인</label>
<label for="sw-분야">분야</label>
<select id="sw-분야" required>
<option value="업무공통">업무공통</option>
<option value="개발S/W">개발S/W</option>
<option value="디자인">디자인</option>
<option value="설계S/W">설계S/W</option>
</select>
</div>
<div class="form-group">
<label for="sw-법인">법인</label>
<select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
</div>
<div class="form-group sw-standard-field">
@@ -46,8 +56,8 @@ const SW_MODAL_HTML = `
<label for="sw-플랫폼명">플랫폼명</label>
<input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" />
</div>
<div class="form-group cloud-only">
<label for="sw-부서">담당부서</label>
<div class="form-group">
<label for="sw-부서">부서</label>
<input type="text" id="sw-부서" />
</div>
@@ -100,16 +110,38 @@ const SW_MODAL_HTML = `
<div class="form-section-title">관리 및 비고</div>
<div class="form-group sw-standard-field">
<label for="sw-구매일">구매일</label>
<input type="text" id="sw-구매일" />
</div>
<div class="form-group sw-standard-field" id="sw-expiry-group">
<label for="sw-만료일">만료일 (구독)</label>
<input type="text" id="sw-만료일" />
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="sw-구매일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group sw-standard-field">
<label for="sw-납품업체">납품업체</label>
<input type="text" id="sw-납품업체" />
</div>
<div class="form-group sw-standard-field">
<label for="sw-시작일">시작일 (구독/유지보수)</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="sw-시작일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-시작일-picker'); p.value = document.getElementById('sw-시작일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="sw-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-시작일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group sw-standard-field" id="sw-expiry-group">
<label for="sw-만료일">만료일 (종료일)</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="sw-만료일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group full-width">
<label for="sw-비고">비고</label>
<textarea id="sw-비고" rows="2"></textarea>
@@ -119,8 +151,8 @@ const SW_MODAL_HTML = `
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem;">
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<h3 style="font-size:1rem; font-weight:600;">사용자 할당 현황</h3>
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
할당 관리 <i data-lucide="plus" style="width:14px; height:14px;"></i>
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm">
할당 관리 <i data-lucide="users" style="width:14px; height:14px;"></i>
</button>
</div>
<div id="sw-assigned-users-summary" class="user-summary-grid"></div>
@@ -130,8 +162,8 @@ const SW_MODAL_HTML = `
<div class="modal-history-area">
<div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
<button type="button" id="btn-add-sw-log" class="btn btn-outline btn-sm cloud-only">
내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
</button>
</div>
<div id="sw-history-list" class="history-timeline"></div>
@@ -149,30 +181,48 @@ const SW_MODAL_HTML = `
</div>
</div>
<!-- 클라우드 이력 추가를 위한 간이 모달 -->
<div id="sw-log-modal" class="modal-overlay hidden" style="z-index: 1100;">
<!-- 계약/유지보수 기간 갱신 및 업데이트 모달 -->
<div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
<div class="modal-content" style="max-width: 400px;">
<div class="modal-header">
<h2>업데이트 내역 추가</h2>
<button id="btn-close-sw-log" class="btn-icon"><i data-lucide="x"></i></button>
<h2>계약 업데이트 반영</h2>
<button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div class="grid-form" style="grid-template-columns: 1fr;">
<div class="form-group">
<label>날짜</label>
<input type="date" id="new-log-date" />
<label>업데이트 일자</label>
<input type="date" id="sw-update-date" />
</div>
<div class="form-group sub-sw-update">
<label>새로운 계약 기간</label>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
<span>~</span>
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
</div>
</div>
<div class="form-group perm-sw-update" style="display:none;">
<label>유지보수 체결 (상태 연동)</label>
<label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
<input type="checkbox" id="sw-update-maintenance" /> 유효 상태로 갱신
</label>
</div>
<div class="form-group">
<label>상세 내용</label>
<textarea id="new-log-details" rows="3" placeholder="예: 결제 금액 변동, 담당자 변경 등"></textarea>
<label>발생 비용</label>
<input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
</div>
<div class="form-group">
<label>상세 내용 (메모)</label>
<input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
</div>
</div>
</div>
<div class="modal-footer">
<div></div>
<div class="footer-actions">
<button id="btn-cancel-sw-log" class="btn btn-outline">취소</button>
<button id="btn-confirm-sw-log" class="btn btn-primary">추가</button>
<button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
<button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
</div>
</div>
</div>
@@ -203,7 +253,7 @@ function applySwTypeUI(type: string) {
} else {
if (keyGroup) keyGroup.style.display = 'flex';
if (typeGroup) typeGroup.style.display = 'none';
if (expiryGroup) expiryGroup.style.display = 'none';
if (expiryGroup) expiryGroup.style.display = 'flex';
}
}
}
@@ -211,18 +261,20 @@ function applySwTypeUI(type: string) {
function fillSwFormData(asset: SoftwareAsset) {
setFieldValue('sw-asset-id', asset.id);
setFieldValue('sw-asset-type', asset.type);
setFieldValue('sw-분야', asset.분야 || '업무공통');
setFieldValue('sw-법인', asset.법인);
setFieldValue('sw-자산번호', asset.자산번호 || '');
setFieldValue('sw-부서', asset.부서 || '');
setFieldValue('sw-제품명', asset.제품명);
setFieldValue('sw-수량', asset.수량);
setFieldValue('sw-금액', asset.금액);
setFieldValue('sw-구매일', asset.구매일 || '');
setFieldValue('sw-시작일', asset.시작일 || '');
setFieldValue('sw-납품업체', asset.납품업체 || '');
setFieldValue('sw-비고', asset.비고 || '');
if (asset.type === '클라우드') {
setFieldValue('sw-플랫폼명', (asset as any).플랫폼명 || '');
setFieldValue('sw-부서', (asset as any).부서 || '');
setFieldValue('sw-계정명', (asset as any).계정명 || '');
setFieldValue('sw-결제수단', (asset as any).결제수단 || '');
setFieldValue('sw-연결카드번호', (asset as any).연결카드번호 || '');
@@ -272,7 +324,7 @@ function renderSwHistory(swId: string) {
`).join('');
}
export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' = 'view') {
export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' | 'edit' = 'view') {
currentSwAsset = asset;
const modal = document.getElementById('sw-asset-modal')!;
@@ -282,7 +334,7 @@ export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' = 'view')
revertBtnId: 'btn-revert-sw-edit'
});
isEditMode = (mode === 'add');
isEditMode = (mode === 'add' || mode === 'edit');
fillSwFormData(asset);
applySwTypeUI(asset.type);
@@ -300,8 +352,15 @@ export function initSwModal(onSave: () => void, closeModals: () => void) {
const saveBtn = document.getElementById('btn-save-sw-asset')!;
const revertBtn = document.getElementById('btn-revert-sw-edit')!;
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
const userUpdateBtn = document.getElementById('btn-open-sw-update')!;
const logAddBtn = document.getElementById('btn-add-sw-log')!;
const userAssignBtn = document.getElementById('btn-open-sw-user')!;
const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
// 날짜 스마트 마스킹 적용
['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
applyDateMask(document.getElementById(id) as HTMLInputElement);
});
createIcons({ icons: { Calendar } });
const closeModalAction = () => { closeModals(); isEditMode = false; };
document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
@@ -330,12 +389,15 @@ export function initSwModal(onSave: () => void, closeModals: () => void) {
const type = getFieldValue('sw-asset-type');
const updated: any = {
...currentSwAsset,
분야: getFieldValue('sw-분야'),
법인: getFieldValue('sw-법인'),
부서: getFieldValue('sw-부서'),
자산번호: getFieldValue('sw-자산번호'),
제품명: getFieldValue('sw-제품명'),
수량: parseInt(getFieldValue('sw-수량') || '0'),
금액: getFieldValue('sw-금액'),
구매일: getFieldValue('sw-구매일'),
시작일: getFieldValue('sw-시작일'),
납품업체: getFieldValue('sw-납품업체'),
비고: getFieldValue('sw-비고'),
type: type
@@ -343,7 +405,6 @@ export function initSwModal(onSave: () => void, closeModals: () => void) {
if (type === '클라우드') {
updated.플랫폼명 = getFieldValue('sw-플랫폼명');
updated.부서 = getFieldValue('sw-부서');
updated.계정명 = getFieldValue('sw-계정명');
updated.결제수단 = getFieldValue('sw-결제수단');
updated.연결카드번호 = getFieldValue('sw-연결카드번호');
@@ -386,39 +447,86 @@ export function initSwModal(onSave: () => void, closeModals: () => void) {
}
});
userUpdateBtn.addEventListener('click', () => {
userAssignBtn.addEventListener('click', () => {
if (currentSwAsset) openSwUserModal(currentSwAsset);
});
// 이력 추가 모달 로직
const logModal = document.getElementById('sw-log-modal')!;
logAddBtn.addEventListener('click', () => {
logModal.classList.remove('hidden');
(document.getElementById('new-log-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
(document.getElementById('new-log-details') as HTMLTextAreaElement).value = '';
// 자산 업데이트(계약 갱신) 모달 로직
const subModal = document.getElementById('sw-update-modal')!;
const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
const closeUpdateModal = () => subModal.classList.add('hidden');
btnCloseUpdate?.addEventListener('click', closeUpdateModal);
btnCancelUpdate?.addEventListener('click', closeUpdateModal);
btnOpenUpdate?.addEventListener('click', (e) => {
e.preventDefault();
if (!isEditMode) {
alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.');
return;
}
const isSub = getFieldValue('sw-asset-type') === '구독SW';
subModal.classList.remove('hidden');
(document.getElementById('sw-update-date') as HTMLInputElement).value = new Date().toISOString().substring(0, 10);
(document.getElementById('sw-update-start') as HTMLInputElement).value = '';
(document.getElementById('sw-update-end') as HTMLInputElement).value = '';
(document.getElementById('sw-update-cost') as HTMLInputElement).value = '';
(document.getElementById('sw-update-note') as HTMLInputElement).value = '';
if (isSub) {
document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:none');
} else {
document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:none');
document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
(document.getElementById('sw-update-maintenance') as HTMLInputElement).checked = (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked;
}
});
document.getElementById('btn-close-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
document.getElementById('btn-cancel-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
document.getElementById('btn-confirm-sw-log')?.addEventListener('click', () => {
if (!currentSwAsset) return;
const date = (document.getElementById('new-log-date') as HTMLInputElement).value;
const details = (document.getElementById('new-log-details') as HTMLTextAreaElement).value;
if (!date || !details) { alert('날짜와 내용을 입력해주세요.'); return; }
btnSaveUpdate?.addEventListener('click', (e) => {
e.preventDefault();
const isSub = getFieldValue('sw-asset-type') === '구독SW';
const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
const maintenance = (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked;
const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
state.masterData.logs = state.masterData.logs || [];
const periodStr = (start || end) ? `${start || ''} ~ ${end || ''}` : '';
let details = `[업데이트] ${note || (isSub ? '구독 갱신' : '유지보수 갱신')}\n`;
if (cost) details += `비용 추가: ${cost}원\n`;
if (isSub) {
if (periodStr) details += `계약 변경: -> ${periodStr}\n`;
// 메인 폼에 시작일 만료일 자동 세팅
if (start) setFieldValue('sw-시작일', start);
if (end) setFieldValue('sw-만료일', end);
} else {
details += `유지보수 상태: -> ${maintenance ? '유효' : '만료'}\n`;
(document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = maintenance;
}
// 금액 갱신 (선택사항)
if (cost) setFieldValue('sw-금액', cost);
// 이력 탭 갱신 (메모리상)
if (!state.masterData.logs) state.masterData.logs = [];
state.masterData.logs.push({
id: Math.random().toString(36).substring(2, 9),
assetId: currentSwAsset.id,
assetId: currentSwAsset ? currentSwAsset.id : 'NEW',
date,
user: '관리자',
details
details,
user: '관리자'
});
logModal.classList.add('hidden');
renderSwHistory(currentSwAsset.id);
closeUpdateModal();
renderSwHistory(currentSwAsset ? currentSwAsset.id : '');
});
}

43
src/components/Modal/SWUserModal.ts
View File

@@ -1,9 +1,9 @@
import { state } from '../../core/state';
import { SoftwareAsset, SWUser } from '../../core/excelHandler';
import { openModal } from './BaseModal';
import { createIcons, Edit2, X, Paperclip } from 'lucide';
import { createIcons, Edit2, X, Paperclip, Calendar } from 'lucide';
import { CORP_LIST, ORG_LIST } from './SharedData';
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
let currentSwUserAsset: SoftwareAsset | null = null;
let tempSwUsers: any[] = [];
@@ -74,8 +74,24 @@ const SW_USER_MODAL_HTML = `
<input type="text" id="new-user-이름" required />
</div>
<div class="form-group">
<label>사용기간</label>
<input type="text" id="new-user-사용기간" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
<label>사용 시작일</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="new-user-시작일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group">
<label>사용 종료일</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="new-user-종료일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group">
<label>신청서 (증빙)</label>
@@ -175,7 +191,16 @@ function openUserEditSubModal(idx: number = -1) {
setFieldValue('new-user-부서', user.부서);
setFieldValue('new-user-직위', user.직위);
setFieldValue('new-user-이름', user.이름);
setFieldValue('new-user-사용기간', user.사용기간);
// 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
if (user.사용기간 && user.사용기간.includes('~')) {
const parts = user.사용기간.split('~');
setFieldValue('new-user-시작일', parts[0].trim());
setFieldValue('new-user-종료일', parts[1].trim());
} else {
setFieldValue('new-user-시작일', '');
setFieldValue('new-user-종료일', '');
}
} else {
setFieldValue('new-user-법인', currentSwUserAsset?.법인);
}
@@ -192,6 +217,12 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
const addUserBtn = document.getElementById('btn-open-add-user')!;
const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
['new-user-시작일', 'new-user-종료일'].forEach(id => {
applyDateMask(document.getElementById(id) as HTMLInputElement);
});
createIcons({ icons: { Calendar } });
addUserBtn.addEventListener('click', () => openUserEditSubModal());
confirmUserBtn.addEventListener('click', () => {
@@ -239,7 +270,7 @@ function saveUserDataToList() {
부서: getFieldValue('new-user-부서'),
직위: getFieldValue('new-user-직위'),
이름: getFieldValue('new-user-이름'),
사용기간: getFieldValue('new-user-사용기간'),
사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
신청서명
};