193 lines
7.8 KiB
Markdown
193 lines
7.8 KiB
Markdown
# 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) |