Taehoon/ITAM
2
0
Fork 0
Code Issues 25 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

93
src/styles/common.css
View File

@@ -45,7 +45,7 @@
--white: #FFFFFF;
--danger: var(--color-red);
--success: var(--color-green);
--header-height: 52px;
--header-height: auto;
}
* {
@@ -60,7 +60,7 @@ body {
color: var(--text-main);
background-color: var(--bg-color);
line-height: 1.5;
font-size: 14px;
font-size: 19px;
overflow: hidden;
}
@@ -76,45 +76,50 @@ body {
background-color: var(--white);
border-bottom: 1px solid var(--border-color);
z-index: 100;
height: var(--header-height);
height: auto;
flex-shrink: 0;
}
.header-container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
}
.header-top-row {
height: 52px;
display: flex;
align-items: center;
padding: 0 1.5rem;
gap: 1.5rem;
justify-content: space-between;
border-bottom: 1px solid #f3f4f6;
}
.header-bottom-row {
height: 48px;
display: flex;
align-items: center;
padding: 0 1.5rem;
background-color: var(--bg-light);
border-bottom: 1px solid var(--border-color);
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.main-logo { height: 34px; width: auto; }
.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
.brand h1 { font-size: 1.47rem; font-weight: 900; color: var(--text-main); white-space: nowrap; }
.brand h1 .sub-title { font-size: 1.13rem; color: var(--primary-color); font-weight: 700; margin-left: 0.25rem; }
.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 2.5rem; overflow: hidden; }
.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
/* 기본적으로 활성 탭의 서브메뉴 표시 */
.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
.nav-group:hover .lnb-shelf { display: flex !important; }
.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
.nav-group-items { display: flex; align-items: center; gap: 0.25rem; height: 100%; }
.gnb-trigger { font-size: 17px; font-weight: 800; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; border-bottom: 3px solid transparent; }
.gnb-trigger:hover { color: var(--text-main); }
.gnb-trigger.active { color: var(--primary-color); font-weight: 900; border-bottom-color: var(--primary-color); background-color: var(--primary-lv-0); }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.role-label { font-size: 15px; font-weight: 800; color: var(--text-muted); }
.role-label.active { color: var(--primary-color); }
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
@@ -149,12 +154,12 @@ input:checked + .slider:before { transform: translateX(16px); }
/* --- View Toggle --- */
.view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
.view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
.toggle-btn { padding: 6px 16px; font-size: 17px; font-weight: 700; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
.toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
/* --- System Status List (Docker Style) --- */
.system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 15px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
.system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
@@ -165,12 +170,12 @@ input:checked + .slider:before { transform: translateX(16px); }
.col-actions { width: 120px; display: flex; justify-content: flex-end; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
.asset-primary { font-weight: 700; font-size: 14px; }
.asset-secondary { font-size: 12px; color: var(--text-muted); }
.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
.status-text { font-size: 15px; font-weight: 700; color: var(--success); }
.asset-primary { font-weight: 800; font-size: 19px; }
.asset-secondary { font-size: 16px; color: var(--text-muted); }
.ip-address { font-weight: 700; font-family: monospace; color: var(--primary-color); }
.traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
.traffic-info { display: flex; justify-content: space-between; font-size: 15px; }
.progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary-color); }
.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
@@ -190,8 +195,8 @@ input:checked + .slider:before { transform: translateX(16px); }
.main-footer p {
font-family: 'Pretendard Variable', Pretendard, sans-serif;
font-size: 0.75rem;
font-weight: 300;
font-size: 1rem;
font-weight: 400;
line-height: 1.25rem;
letter-spacing: -0.0175rem;
color: #777777;
@@ -212,15 +217,15 @@ input:checked + .slider:before { transform: translateX(16px); }
}
/* --- Utility Styles --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 16px; font-weight: 700; border-radius: 4px; cursor: pointer; height: 28px; }
.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
.badge {
padding: 2px 6px;
border-radius: 4px;
font-size: 16px;
font-weight: 700;
font-size: 21px;
font-weight: 800;
white-space: nowrap;
}
@@ -245,34 +250,34 @@ input:checked + .slider:before { transform: translateX(16px); }
background-color: #EDE9FE;
color: #7C3AED;
border: 1px solid #DDD6FE;
font-size: 11px;
font-size: 15px;
padding: 2px 6px;
}
.badge.b-primary {
background-color: #DBEAFE;
color: #1D4ED8;
border: 1px solid #BFDBFE;
font-size: 11px;
font-size: 15px;
padding: 2px 6px;
}
.badge.b-green {
background-color: #D1FAE5;
color: #047857;
border: 1px solid #A7F3D0;
font-size: 11px;
font-size: 15px;
padding: 2px 6px;
}
.badge.b-yellow {
background-color: #FEF3C7;
color: #D97706;
border: 1px solid #FDE68A;
font-size: 11px;
font-size: 15px;
padding: 2px 6px;
}
.text-tag {
color: var(--text-muted);
font-size: 16px;
font-size: 21px;
padding: 1px 5px;
border: 1px solid var(--border-color);
border-radius: 3px;
@@ -280,14 +285,14 @@ input:checked + .slider:before { transform: translateX(16px); }
}
.font-bold {
font-weight: 700;
font-weight: 800;
}
/* --- Responsive Design (Tablet & Mobile) --- */
@media (max-width: 1200px) {
.header-container { gap: 0.75rem; padding: 0 1rem; }
.brand h1 { font-size: 1rem; }
.brand h1 .sub-title { font-size: 0.75rem; }
.brand h1 { font-size: 1.33rem; }
.brand h1 .sub-title { font-size: 1rem; }
}
@media (max-width: 992px) {