zioinfo-mail/manual/15_UI_Nifty_가이드.md

GUARDiA ITSM — Nifty 스타일 UI 가이드

참조: https://preview.themeon.net/nifty/
적용 버전: GUARDiA ITSM 2.0

---

1. 레이아웃 구조

┌─────────────────────────────────────────────────────┐
│  #topbar   [로고] [검색] [알림] [사용자]  [다크/라이트] │
├──────────┬──────────────────────────────────────────┤
│          │  #content-header (빵크럼 + 페이지 제목)   │
│ #sidebar │──────────────────────────────────────────│
│  (250px) │                                          │
│  계층형   │         #main-content                   │
│  메뉴    │         (페이지별 뷰 컨텐츠)              │
│          │                                          │
└──────────┴──────────────────────────────────────────┘
│  #footer  Copyright © 2026 GUARDiA All Rights Reserved │
└─────────────────────────────────────────────────────┘

---

2. 사이드바 메뉴 계층 구조

GUARDiA ITSM
├── 📊 대시보드
│   ├── 운영 현황 (SR/SLA/인시던트)
│   ├── 인프라 현황 (서버/CMDB)
│   ├── 보안 현황
│   └── AI 인사이트
│
├── 🗂️ SR 관리 (서비스 요청)
│   ├── SR 목록
│   ├── 칸반 보드
│   ├── 대량 처리
│   └── SLA 위반 현황
│
├── 🏗️ PMS (프로젝트 관리)     ← 신규 서브메뉴
│   ├── 프로젝트 목록
│   ├── WBS 관리
│   ├── 산출물 관리
│   ├── 이슈 관리
│   ├── 위험 관리
│   ├── 변경 요청
│   ├── 마일스톤
│   └── 보고서
│       ├── 일일 보고
│       ├── 주간 보고
│       └── 월간 보고
│
├── 🖥️ 인프라
│   ├── CMDB
│   ├── 서버 관리
│   └── 기관/사이트
│
├── 🔐 보안
│   ├── 취약점 스캔
│   ├── PAM (특권 접근)
│   ├── 감사 로그
│   └── 시큐어코딩 점검   ← 신규
│
├── 🤖 AI 운영
│   ├── 에이전트 현황
│   ├── 이상 탐지
│   ├── 예측 유지보수
│   └── 학습 루프
│
├── 📡 모니터링
│   ├── Scouter APM
│   ├── SSL 만료
│   └── 성능 테스트 (JMeter) ← 신규
│
├── ⚙️ 운영
│   ├── 배포 파이프라인
│   ├── 배치 작업
│   ├── On-Call 로테이션
│   └── 작업 타임테이블
│
├── 📚 지식관리
│   ├── KB 문서
│   └── 챗봇
│
└── 🔧 시스템 설정
    ├── 사용자 관리
    ├── LDAP/SSO
    ├── 라이선스
    └── 공공기관 체크리스트 ← 신규

---

3. Nifty 스타일 핵심 CSS 변수

/* 다크 테마 (기본) */
:root[data-theme="dark"] {
  --sidebar-bg:        #1a1f2e;
  --sidebar-hover:     rgba(255,255,255,.06);
  --sidebar-active:    #4f8ef7;
  --accent:            #818cf8;
  --accent-hover:      #6366f1;
  --surface:           #1e2333;
  --surface-2:         #252b3b;
  --border:            rgba(255,255,255,.08);
  --text-bright:       #f1f5f9;
  --text-muted:        #64748b;
  --topbar-bg:         #141824;
}

/* 라이트 테마 */
:root[data-theme="light"] {
  --sidebar-bg:        #1e2333;   /* 사이드바는 다크 유지 */
  --surface:           #f8fafc;
  --surface-2:         #ffffff;
  --border:            #e2e8f0;
  --text-bright:       #1e293b;
  --text-muted:        #64748b;
  --topbar-bg:         #ffffff;
}

---

4. 서브메뉴 (아코디언) 구현

<!-- 사이드바 계층 메뉴 패턴 -->
<div class="nav-group">
  <div class="nav-group-header" onclick="toggleNav(this)">
    <span class="nav-icon">🏗️</span>
    <span>PMS 프로젝트 관리</span>
    <span class="nav-arrow">▾</span>
  </div>
  <div class="nav-group-body">
    <a class="nav-sub-item" href="/si">프로젝트 목록</a>
    <a class="nav-sub-item" href="/si?tab=wbs">WBS 관리</a>
    <a class="nav-sub-item" href="/si?tab=deliverables">산출물 관리</a>
    <a class="nav-sub-item" href="/si?tab=issues">이슈 관리</a>
    <a class="nav-sub-item" href="/si?tab=report">보고서</a>
  </div>
</div>

.nav-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; cursor: pointer;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.nav-group-header:hover { color: var(--text-bright); }
.nav-group-body { display: none; padding: 0 0 4px 36px; }
.nav-group-body.open { display: block; }
.nav-sub-item {
  display: block; padding: 7px 12px; font-size: 13px;
  color: var(--text-muted); text-decoration: none; border-radius: 6px;
}
.nav-sub-item:hover, .nav-sub-item.active {
  background: var(--sidebar-hover); color: var(--text-bright);
}
.nav-arrow { margin-left: auto; transition: transform .2s; }
.nav-group-header.open .nav-arrow { transform: rotate(180deg); }

---

5. 상단 탑바 구성

<header id="topbar">
  <!-- 햄버거 버튼 (모바일) -->
  <button id="sidebar-toggle" onclick="toggleSidebar()">☰</button>

  <!-- 글로벌 검색 -->
  <div id="topbar-search">
    <input type="search" placeholder="SR·서버·KB 통합 검색..." id="global-search">
  </div>

  <!-- 우측 액션 -->
  <div id="topbar-actions">
    <!-- 실시간 알림 -->
    <div class="topbar-icon" id="notif-bell">
      🔔 <span class="badge" id="notif-count">0</span>
    </div>
    <!-- 라이선스 상태 -->
    <div class="topbar-icon" id="license-badge"></div>
    <!-- 테마 토글 -->
    <button class="topbar-icon" onclick="toggleTheme()">🌙</button>
    <!-- 사용자 드롭다운 -->
    <div class="topbar-user" id="topbar-user"></div>
  </div>
</header>

---

6. 페이지 탭 (서브페이지 내부 탭)

<!-- PMS 페이지 내부 탭 예시 -->
<div class="page-tabs">
  <button class="page-tab active" data-tab="overview">개요</button>
  <button class="page-tab" data-tab="wbs">WBS</button>
  <button class="page-tab" data-tab="issues">이슈</button>
  <button class="page-tab" data-tab="deliverables">산출물</button>
  <button class="page-tab" data-tab="risks">위험</button>
  <button class="page-tab" data-tab="report">보고서</button>
</div>
<div class="page-tab-content">
  <div id="tab-overview" class="tab-panel active">...</div>
  <div id="tab-wbs" class="tab-panel">...</div>
  ...
</div>

.page-tabs {
  display: flex; gap: 2px; border-bottom: 2px solid var(--border);
  margin-bottom: 20px; overflow-x: auto;
}
.page-tab {
  padding: 10px 20px; background: none; border: none;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px; white-space: nowrap;
}
.page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

---

7. 카드 컴포넌트

<!-- Nifty 스타일 카드 -->
<div class="nf-card">
  <div class="nf-card-header">
    <h3 class="nf-card-title">📊 프로젝트 현황</h3>
    <div class="nf-card-actions">
      <button class="btn-sm">새로고침</button>
    </div>
  </div>
  <div class="nf-card-body">
    <!-- 내용 -->
  </div>
</div>

---

8. 반응형 브레이크포인트

해상도	사이드바	레이아웃
≥1280px	250px 고정	2열 그리드 가능
768~1280px	60px (아이콘만)	1열
< 768px	오버레이 (토글)	모바일 전용

---

9. 적용 우선순위

1. 즉시 적용: 탑바 + 사이드바 아코디언 메뉴 (index.html + style.css)
2. 1주일 내: PMS 서브탭 페이지 (si.html 확장)
3. 2주 내: 보안/모니터링 전용 페이지 UI 통일

---

10. Copyright 표기 위치

• 사이드바 하단: Copyright © 2026 GUARDiA All Rights Reserved.
• 로그인 페이지: 로고 이미지 + Copyright
• 출력 보고서: 모든 Excel/PDF/PPTX 하단
• API 응답 헤더: X-Powered-By: GUARDiA ITSM 2.0

# FastAPI 미들웨어로 응답 헤더 추가
@app.middleware("http")
async def add_copyright_header(request, call_next):
    response = await call_next(request)
    response.headers["X-Powered-By"] = "GUARDiA ITSM 2.0 | Copyright 2026"
    return response