# STEP 11 — UI: index.html 구조 추가

## 사전 확인 (작업 전 반드시 수행)

1. `src/Web/wwwroot/index.html` 파일을 열어 전체 구조를 읽는다.
2. 아래 항목을 확인하고 기록한다:
   - [x] STEP 9가 완료되어 백엔드 전체가 빌드되는가?
   - [x] `id="pane-fast"` div가 이미 존재하는가? → 없음 (작업 수행)
   - [x] 사이드바 `<li>` 메뉴에 `09 fastRecord` 항목이 있는가? → 없음 (작업 수행)
   - [x] `id="modal-fast-new"` 모달이 이미 있는가? → 없음 (작업 수행)
   - [x] `<head>`에 uPlot CSS 링크가 있는가? → 없음 (작업 수행)
   - [x] `</body>` 직전에 uPlot JS 스크립트가 있는가? → 없음 (작업 수행)
   - [x] 기존 탭 패널(pane-*)이 어떤 구조인지 파악한다 (추가 위치 확인)

---

## 작업 1 — 사이드바 메뉴 항목 추가

**위치**: 기존 사이드바 `<li>` 목록 마지막 항목 아래

```html
<li><a href="#pane-fast">09 fastRecord</a></li>
```

---

## 작업 2 — fastRecord 패널 추가

**위치**: 기존 마지막 `tab-pane` div 아래

```html
<!-- ── fastRecord 패널 ─────────────────────────────────────────────── -->
<div id="pane-fast" class="tab-pane fade">
  <div class="tab-content">
    <div class="row">

      <!-- 좌측: 세션 목록 -->
      <div class="col-md-3">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">fastSession 목록</h5>
            <button id="btn-fast-new" class="btn btn-sm btn-primary">신규 세션</button>
          </div>
          <div class="card-body p-0">
            <div id="fast-session-list" class="list-group list-group-flush"></div>
          </div>
        </div>
      </div>

      <!-- 우측: 그래프 및 통계 -->
      <div class="col-md-9">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 id="fast-session-title" class="mb-0">세션 상세</h5>
            <div id="fast-session-controls" class="btn-group btn-group-sm">
              <button id="btn-fast-stop"         class="btn btn-danger"    style="display:none;">중지</button>
              <button id="btn-fast-export-xlsx"  class="btn btn-success"   style="display:none;">Excel</button>
              <button id="btn-fast-export-csv"   class="btn btn-info"      style="display:none;">CSV</button>
              <button id="btn-fast-delete"       class="btn btn-secondary" style="display:none;">삭제</button>
              <button id="btn-fast-pin"          class="btn btn-warning"   style="display:none;">고정</button>
            </div>
          </div>
          <div class="card-body">
            <!-- 진행률 -->
            <div class="progress mb-1" style="height:20px;">
              <div id="fast-progress-bar"
                   class="progress-bar progress-bar-striped progress-bar-animated"
                   role="progressbar" style="width:0%"></div>
            </div>
            <div class="d-flex justify-content-between small text-muted mb-2">
              <span id="fast-progress-text">0 / 0 (0%)</span>
              <span id="fast-elapsed-time">경과: 0s</span>
            </div>

            <!-- 그래프 -->
            <div id="fast-chart-container" style="height:400px;width:100%;"></div>

            <!-- 통계 요약 -->
            <div id="fast-stats-panel" class="mt-3" style="display:none;">
              <h6>통계 요약</h6>
              <div id="fast-stats-grid" class="row"></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- ── 모달: 신규 fastSession ──────────────────────────────────────── -->
<div class="modal fade" id="modal-fast-new" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">신규 fastSession</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">세션 이름</label>
          <input type="text" class="form-control" id="fast-session-name"
                 placeholder="예: 공정온도_분석_20260428">
        </div>
        <div class="mb-3">
          <label class="form-label">태그 선택 (최대 8개)</label>
          <select id="fast-tag-select" class="form-select" multiple size="8"></select>
        </div>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label class="form-label">샘플링 간격 (ms)</label>
            <select class="form-select" id="fast-sampling-ms">
              <option value="100">100ms</option>
              <option value="250">250ms</option>
              <option value="500" selected>500ms</option>
              <option value="1000">1000ms</option>
            </select>
          </div>
          <div class="col-md-6 mb-3">
            <label class="form-label">수집 기간</label>
            <select class="form-select" id="fast-duration-sec">
              <option value="60">1분</option>
              <option value="300">5분</option>
              <option value="900">15분</option>
              <option value="1800">30분</option>
              <option value="3600" selected>1시간</option>
              <option value="7200">2시간</option>
              <option value="14400">4시간</option>
              <option value="43200">12시간</option>
              <option value="86400">24시간</option>
            </select>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">보관 기간 (일, 빈 칸 = 무한)</label>
          <input type="number" class="form-control" id="fast-retention-days" placeholder="30">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
        <button type="button" class="btn btn-primary" id="btn-fast-start">시작</button>
      </div>
    </div>
  </div>
</div>
```

---

## 작업 3 — uPlot 라이브러리 추가

**조건**: uPlot이 아직 없는 경우만 수행

```
1. https://cdn.jsdelivr.net/npm/uplot@1.6.27/dist/uPlot.iife.min.js 를 다운로드하여
   src/Web/wwwroot/lib/uPlot.iife.min.js 에 저장

2. https://cdn.jsdelivr.net/npm/uplot@1.6.27/dist/uPlot.min.css 를 다운로드하여
   src/Web/wwwroot/lib/uPlot.min.css 에 저장
```

**index.html `<head>` 안에 추가**:
```html
<link rel="stylesheet" href="lib/uPlot.min.css">
```

**index.html `</body>` 직전에 추가**:
```html
<script src="lib/uPlot.iife.min.js"></script>
```

---

## 사후 확인 (작업 후 반드시 수행)

1. `index.html` 파일을 다시 열어 추가된 내용을 읽는다.
2. 아래 항목을 하나씩 확인한다:
   - [x] 사이드바에 `09 fastRecord` 메뉴 항목이 있는가?
   - [x] `id="pane-fast"` div가 있는가?
   - [x] `id="fast-session-list"` 요소가 있는가?
   - [x] `id="fast-chart-container"` 요소가 있는가?
   - [x] `id="fast-progress-bar"` 요소가 있는가?
   - [x] `id="modal-fast-new"` 모달이 있는가?
   - [x] 모달 안에 `id="fast-tag-select"` select가 있는가?
   - [x] 버튼 5개(`btn-fast-stop`, `btn-fast-export-xlsx`, `btn-fast-export-csv`, `btn-fast-delete`, `btn-fast-pin`) 모두 있는가?
   - [x] uPlot CSS, JS가 올바른 위치에 로드되는가?
3. 브라우저에서 해당 탭을 열어 HTML 구조가 렌더링되는지 육안으로 확인 (JS 기능은 STEP 12에서)

---

## 완료 조건
- 지정된 id를 가진 요소 모두 존재
- uPlot 파일 로드 순서 올바름 (CSS → JS)