b23042andClaude Opus 4.8
78fc090360
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
2.5 KiB
Markdown
48 lines
2.5 KiB
Markdown
# 화면표시 옵션 — "기본값" 버튼 + 설명문구 툴팁화
|
||
|
||
**날짜**: 2026-06-24
|
||
**수정 파일**: `client/src/components/overlay/StationOverlay.tsx`
|
||
|
||
## 요구
|
||
1. 화면표시 옵션 창 우측 하단에 **"기본값"** 버튼 → 누르면 옵션 일괄 복귀.
|
||
2. 컨트롤 사이의 **설명문구**가 세로 공간을 차지 → **마우스 오버 툴팁**으로 바꿔 패널 높이 축소.
|
||
|
||
## 구현
|
||
|
||
### 1. 기본값(DISPLAY_DEFAULTS) + 버튼
|
||
- 사용자 확정 기본값(스크린샷 기준)을 모듈 상수로 정의, **useState 초기값과 단일 출처 공유**:
|
||
```ts
|
||
const DISPLAY_DEFAULTS = {
|
||
showCenterline: true, showDronePath: true,
|
||
dronePathZ: 58, dronePathAlpha: 0.75,
|
||
smoothHalf: 60, emaAlpha: 1.0,
|
||
maxPoiFront: 310, maxPoiSide: 135,
|
||
poiDroneHeight: true, droneHeightDrop: 24,
|
||
};
|
||
```
|
||
(이전 코드 기본값 dronePathZ 78 / maxPoiFront 240 / maxPoiSide 80 → 스크린샷 값으로 갱신.)
|
||
- `resetDisplayDefaults()` 콜백이 위 10개 상태를 일괄 set. POI 보정/편집모드는 제외(별도 "보정 초기화" 유지).
|
||
- 패널 최하단에 카메라 패널의 "초기화"와 동일한 스타일의 **"기본값"** 버튼(우측 정렬) 추가.
|
||
- 참고: localStorage 영속화 대상(maxPoiFront/Side·smoothHalf·emaAlpha·params)은 버튼 클릭 후 디바운스 저장으로 기본값이 유지됨. 나머지(dronePathZ 등)는 원래 세션 한정.
|
||
|
||
### 2. 설명문구 → 툴팁
|
||
- `ParamRow`에 `tip?: string` 추가: 있으면 라벨에 **점선 밑줄 + 마우스오버 네이티브 툴팁**(`title`).
|
||
- 별도 `InfoTip` 컴포넌트(작은 `ⓘ`, `title` 툴팁) 추가 → 섹션 헤더용.
|
||
- 기존 `text-gray-600` 설명 div 6개 제거하고 해당 컨트롤/헤더의 tip으로 이전:
|
||
| 기존 설명 div | 이전 위치 |
|
||
|---|---|
|
||
| GPS 측정점 표고/α | 경로표고·투명도 ParamRow tip |
|
||
| ±fr=±ms | smooth ParamRow tip |
|
||
| α→lag ms | EMA α ParamRow tip |
|
||
| 진행방향 앞/옆 이내 표시 | POI 앞쪽·옆쪽 ParamRow tip |
|
||
| POI 드론 아래 배치 | 이격거리 ParamRow tip |
|
||
| 편집/DEM 안내 | "POI 위치 편집" 헤더 InfoTip |
|
||
- 편집모드 안내문(긴 1줄)도 헤더 툴팁으로 이전, 상태줄은 `보정된 POI N개`/`드래그 중`만 표시.
|
||
- 동적 수치(ms·lag·현재값)는 툴팁 문자열에 그대로 보간 → 정보 손실 없음.
|
||
|
||
## 검증
|
||
- `npm run build -w client` (node20) tsc + vite build 통과.
|
||
|
||
**소요 시간**: 약 25분
|
||
**Context 사용량**: input ~140k / output ~9k tokens
|