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

WIP(style): UI 컴포넌트 하드코딩 제거 및 CSS 통합 (진행 중)

Browse Source 
- 작업 상태: 진행 중 (Work In Progress)
- 주요 변경 사항:
  1. CSS 파일 통합: HWModal, SWModal, ListFactory 등에서 인라인 스타일(style 속성) 전면 제거 및 클래스 기반으로 재작성
  2. 폰트/타이포그래피 스케일업: 최소 폰트 14px 기준으로 전체 텍스트 크기 상향 및 굵기(font-weight) 상향 조정
  3. GNB(상단바) 레이아웃 개편: 2단 구조(로고 라인 / 메뉴 라인)로 변경 및 카테고리 텍스트 라벨 생략을 통한 간결화
  4. 로고 이미지 교체: image 92.png로 업데이트 및 경로 정리
  5. 디자인 가이드 분리: README에서 design_rule.md로 디자인 정책 문서 독립

* 참고: 현재 디자인 검토를 위한 중간 반영 상태이며, 피드백에 따라 추가 수정 예정임.
This commit is contained in:
이태훈
2026-06-12 15:57:20 +09:00
parent 56abdddbc7
commit b169176d57
12 changed files with 420 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,39 +22,6 @@ class HwAssetModal extends BaseModal {
protected renderFrameHTML(): string {
return `
<style>
.autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 150px;
overflow-y: auto;
background-color: white;
border: 1px solid var(--border-color, #E2E8F0);
border-top: none;
border-radius: 0 0 4px 4px;
z-index: 1000;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.autocomplete-item {
padding: 8px 12px;
font-size: 13px;
color: #334155;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.autocomplete-item:hover {
background-color: #F1F5F9;
color: #1E5149;
font-weight: 600;
}
.hidden {
display: none !important;
}
</style>
<div id="hw-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
@@ -100,14 +67,14 @@ class HwAssetModal extends BaseModal {
</div>
<div class="form-group">
<label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
<select id="hw-service_type" name="service_type" style="${inputStyle}">
<select id="hw-service_type" name="service_type">
<option value="외부">외부</option>
<option value="내부">내부</option>
</select>
</div>
<div class="form-group full-width" style="grid-column: span 2;">
<div class="form-group full-width">
<label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
<input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" style="${inputStyle} width: 100%;" />
<input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" />
</div>
<div class="form-group infra-only monitoring-field">
<label>${ASSET_SCHEMA.MONITORING.ui}</label>
@@ -118,18 +85,18 @@ class HwAssetModal extends BaseModal {
</div>
<!-- [SECTION 2] 조직 및 사용자 정보 -->
<div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
<div class="form-group">
<div class="form-section-title org-user-section">사용자 및 조직 정보</div>
<div class="form-group org-user-field">
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
<select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
</div>
<div class="form-group">
<div class="form-group org-user-field">
<label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
<input type="text" id="hw-manager_primary" name="manager_primary" />
</div>
<div class="form-group">
<label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
<input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
<input type="text" id="hw-manager_secondary" name="manager_secondary" />
</div>
<div class="form-group personal-only">
<label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
@@ -164,17 +131,17 @@ class HwAssetModal extends BaseModal {
</div>
<div class="form-group spec-only" style="position: relative;">
<label>${ASSET_SCHEMA.CPU.ui}</label>
<input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." style="${inputStyle}" />
<input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." />
<div id="hw-cpu-autocomplete" class="autocomplete-list hidden"></div>
</div>
<div class="form-group spec-only" style="position: relative;">
<label>${ASSET_SCHEMA.RAM.ui}</label>
<input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." style="${inputStyle}" />
<input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." />
<div id="hw-ram-autocomplete" class="autocomplete-list hidden"></div>
</div>
<div class="form-group spec-only" style="position: relative;">
<label>${ASSET_SCHEMA.GPU.ui}</label>
<input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." style="${inputStyle}" />
<input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." />
<div id="hw-gpu-autocomplete" class="autocomplete-list hidden"></div>
</div>
<div class="form-group spec-only">
@@ -183,7 +150,7 @@ class HwAssetModal extends BaseModal {
</div>
<div class="form-group spec-only">
<label>성능 등급</label>
<div id="hw-pc-grade-container" style="display: flex; align-items: center; height: 38px;">
<div id="hw-pc-grade-container" class="grade-badge-container">
<span class="badge b-yellow" id="hw-pc-grade-badge">-</span>
</div>
</div>
@@ -266,7 +233,10 @@ class HwAssetModal extends BaseModal {
<div class="modal-history-area">
<div class="history-header">
<h3>자산 변동 이력</h3>
<button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">이력 추가</button>
<div class="history-actions">
<button type="button" id="btn-view-asset-flow" class="btn btn-outline btn-sm">흐름 보기</button>
<button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">이력 추가</button>
</div>
</div>
<div id="hw-history-list" class="history-timeline"></div>
</div>