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

76
src/styles/modal.css
View File

@@ -41,8 +41,8 @@
}
.modal-header h2 {
font-size: 1.4rem;
font-weight: 600;
font-size: 1.86rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--white);
line-height: 1.2;
@@ -53,7 +53,7 @@
cursor: pointer;
background: none !important;
border: none !important;
font-size: 1.75rem;
font-size: 2.33rem;
line-height: 1;
}
@@ -98,8 +98,8 @@
/* Section Title for Grouping */
.form-section-title {
grid-column: span 2;
font-size: 1.15rem;
font-weight: 700;
font-size: 1.53rem;
font-weight: 800;
color: var(--primary-color);
padding: 1.5rem 0 0.5rem 0;
border-bottom: 1px solid var(--border-color);
@@ -113,8 +113,8 @@
}
.form-group label {
font-size: 1.1rem;
font-weight: 600;
font-size: 1.47rem;
font-weight: 700;
color: var(--text-muted);
}
@@ -126,7 +126,7 @@
border: 1px solid var(--border-color);
border-radius: 4px;
font-family: inherit;
font-size: 1.15rem;
font-size: 1.53rem;
outline: none;
transition: all 0.2s;
background-color: var(--white);
@@ -159,7 +159,7 @@
.modal-footer .btn {
height: 42px;
padding: 0 1.25rem;
font-size: 0.875rem;
font-size: 1.17rem;
}
.edit-only-btn {
@@ -174,7 +174,7 @@
}
#hw-file-name-display {
font-size: 0.8125rem;
font-size: 1.08rem;
color: var(--text-muted);
}
@@ -209,8 +209,8 @@
padding: 0.75rem 1rem;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-weight: 500;
font-size: 24px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
@@ -229,7 +229,7 @@
color: var(--primary-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-color: var(--border-color);
font-weight: 700;
font-weight: 800;
}
.preview-table-container {
@@ -266,15 +266,15 @@
.preview-table th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 17px;
font-weight: 600;
font-size: 23px;
font-weight: 700;
border-bottom: 1px solid var(--border-color);
color: var(--text-muted);
}
.preview-table td {
padding: 0.75rem 1rem;
font-size: 18px;
font-size: 24px;
border-bottom: 1px solid #f1f5f9;
color: var(--text-main);
}
@@ -309,8 +309,8 @@
}
.history-header h3 {
font-size: 1.25rem;
font-weight: 600;
font-size: 1.67rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
@@ -323,7 +323,7 @@
background-color: transparent !important;
pointer-events: none !important;
color: var(--text-main) !important;
font-weight: 600 !important;
font-weight: 700 !important;
cursor: default;
padding-left: 0 !important;
}
@@ -392,14 +392,14 @@
}
.history-date {
font-size: 11px;
font-size: 15px;
color: var(--text-muted);
font-weight: 500;
font-weight: 600;
}
.history-tag {
font-size: 10px;
font-weight: 700;
font-size: 14px;
font-weight: 800;
padding: 2px 6px;
border-radius: 10px;
text-transform: uppercase;
@@ -412,15 +412,15 @@
.tag-default { background: #f3f4f6; color: #6b7280; }
.history-user {
font-size: 11px;
font-weight: 600;
font-size: 15px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 6px;
display: block;
}
.history-details {
font-size: 12.5px;
font-size: 17px;
color: var(--text-main);
line-height: 1.5;
background: #f8fafc;
@@ -434,14 +434,14 @@
display: inline-block;
margin: 0 4px;
color: var(--text-muted);
font-weight: 400;
font-weight: 500;
}
.empty-history {
padding: 2rem 0;
text-align: center;
color: var(--text-muted);
font-size: 1.1rem;
font-size: 1.47rem;
}
/* Dashboard Detail Modal Table Fixed Header */
@@ -474,8 +474,8 @@
border-bottom: 2px solid var(--border-color);
box-shadow: none;
padding: 0.75rem 1rem;
font-size: 1.1rem;
font-weight: 600;
font-size: 1.47rem;
font-weight: 700;
color: var(--text-main);
text-align: left;
white-space: nowrap;
@@ -484,7 +484,7 @@
#dashboard-detail-modal tbody td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
font-size: 1.1rem;
font-size: 1.47rem;
color: var(--text-main);
white-space: nowrap;
}
@@ -502,8 +502,8 @@
display: inline-block;
padding: 0.125rem 0.5rem;
border-radius: 4px;
font-size: 1.05rem;
font-weight: 500;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.5;
}
@@ -620,8 +620,8 @@
.image-picker-header h3 {
color: white;
margin: 0;
font-size: 1.25rem;
font-weight: 600;
font-size: 1.67rem;
font-weight: 700;
}
.image-picker-content {
@@ -673,8 +673,8 @@
justify-content: center;
gap: 4px;
padding: 0 6px;
font-size: 10px !important;
font-weight: 600;
font-size: 14px !important;
font-weight: 700;
border-radius: 4px;
height: 24px;
min-width: 52px;
@@ -725,7 +725,7 @@
.ri-line input {
height: 38px;
box-sizing: border-box;
font-size: 13px;
font-size: 17px;
padding: 0 10px;
border: 1px solid var(--border-color);
border-radius: 4px;