# STEP 11 — UI: index.html 구조 추가 ## 사전 확인 (작업 전 반드시 수행) 1. `src/Web/wwwroot/index.html` 파일을 열어 전체 구조를 읽는다. 2. 아래 항목을 확인하고 기록한다: - [x] STEP 9가 완료되어 백엔드 전체가 빌드되는가? - [x] `id="pane-fast"` div가 이미 존재하는가? → 없음 (작업 수행) - [x] 사이드바 `
  • ` 메뉴에 `09 fastRecord` 항목이 있는가? → 없음 (작업 수행) - [x] `id="modal-fast-new"` 모달이 이미 있는가? → 없음 (작업 수행) - [x] ``에 uPlot CSS 링크가 있는가? → 없음 (작업 수행) - [x] `` 직전에 uPlot JS 스크립트가 있는가? → 없음 (작업 수행) - [x] 기존 탭 패널(pane-*)이 어떤 구조인지 파악한다 (추가 위치 확인) --- ## 작업 1 — 사이드바 메뉴 항목 추가 **위치**: 기존 사이드바 `
  • ` 목록 마지막 항목 아래 ```html
  • 09 fastRecord
    • ``` --- ## 작업 2 — fastRecord 패널 추가 **위치**: 기존 마지막 `tab-pane` div 아래 ```html
    fastSession 목록
    세션 상세
    0 / 0 (0%) 경과: 0s
    ``` --- ## 작업 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 `` 안에 추가**: ```html ``` **index.html `` 직전에 추가**: ```html ``` --- ## 사후 확인 (작업 후 반드시 수행) 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)