7.8 KiB
7.8 KiB
STEP 11 — UI: index.html 구조 추가
사전 확인 (작업 전 반드시 수행)
src/Web/wwwroot/index.html파일을 열어 전체 구조를 읽는다.- 아래 항목을 확인하고 기록한다:
- STEP 9가 완료되어 백엔드 전체가 빌드되는가?
id="pane-fast"div가 이미 존재하는가? → 없음 (작업 수행)- 사이드바
<li>메뉴에09 fastRecord항목이 있는가? → 없음 (작업 수행) id="modal-fast-new"모달이 이미 있는가? → 없음 (작업 수행)<head>에 uPlot CSS 링크가 있는가? → 없음 (작업 수행)</body>직전에 uPlot JS 스크립트가 있는가? → 없음 (작업 수행)- 기존 탭 패널(pane-*)이 어떤 구조인지 파악한다 (추가 위치 확인)
작업 1 — 사이드바 메뉴 항목 추가
위치: 기존 사이드바 <li> 목록 마지막 항목 아래
<li><a href="#pane-fast">09 fastRecord</a></li>
작업 2 — fastRecord 패널 추가
위치: 기존 마지막 tab-pane div 아래
<!-- ── 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> 안에 추가:
<link rel="stylesheet" href="lib/uPlot.min.css">
index.html </body> 직전에 추가:
<script src="lib/uPlot.iife.min.js"></script>
사후 확인 (작업 후 반드시 수행)
index.html파일을 다시 열어 추가된 내용을 읽는다.- 아래 항목을 하나씩 확인한다:
- 사이드바에
09 fastRecord메뉴 항목이 있는가? id="pane-fast"div가 있는가?id="fast-session-list"요소가 있는가?id="fast-chart-container"요소가 있는가?id="fast-progress-bar"요소가 있는가?id="modal-fast-new"모달이 있는가?- 모달 안에
id="fast-tag-select"select가 있는가? - 버튼 5개(
btn-fast-stop,btn-fast-export-xlsx,btn-fast-export-csv,btn-fast-delete,btn-fast-pin) 모두 있는가? - uPlot CSS, JS가 올바른 위치에 로드되는가?
- 사이드바에
- 브라우저에서 해당 탭을 열어 HTML 구조가 렌더링되는지 육안으로 확인 (JS 기능은 STEP 12에서)
완료 조건
- 지정된 id를 가진 요소 모두 존재
- uPlot 파일 로드 순서 올바름 (CSS → JS)