임시 단일 HTML 콘솔을 걷어내고 5페이지 관리자 앱으로 교체(협의: 모니터링+필수 액션, negodata 계열 경량 스택 — Vite+React+TS+Tailwind +recharts+react-query+react-router). - 대시보드: /ops 5초 폴링 스탯 타일 8종 + 임계 배너(서버 AlertConfig 기본값 미러) + 세션 내 누적 큐 추이. - 작업 큐: 상태 탭·상품 검색·페이지네이션·상세 패널(결과/원가/오류), DEAD 재큐 버튼. - 상품·가격: 가격 추이 3선 + 몰별 최저가 바 + 검증 링크 + 수동 재검색. 시리즈 색 엔터티 고정 — 네이버 #008a43 은 쿠팡 적색과의 적록색약 분리(ΔE 14.5)·3:1 대비를 검증해 톤다운한 값. - 크롤 상태: 종료사유 도넛(의미 기반 상태색)·세션당 요청 수 분포 +차단 시작 기준선(예산 튜닝 뷰)·차단 추이/이력·세션 테이블. - 비용: 시간별 원가 스택(AI vs 프록시)·건당 평균·평균 소요(축이 달라 별도 차트 — 이중축 금지). - 설정: API 주소·guard 키(localStorage → X-API-Key 자동 첨부). 서버 설정 변경 UI 없음(toml 단일 소스 원칙). - dev 는 vite 프록시(:9600)로 CORS 불필요. 5페이지 실렌더 스크린샷 검증. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
34 lines
2.0 KiB
Markdown
34 lines
2.0 KiB
Markdown
# LPS 관리자 페이지
|
|
|
|
LPS(인터넷 최저가 검색)의 운영 지표를 보고 필수 액션(수동 재검색·DEAD 재큐)을 수행하는
|
|
React 관리자 페이지입니다. 서버 동작 설정은 여기서 바꾸지 않습니다 — 설정 소스는 서버의
|
|
`config.<env>.toml` 하나(2026-07-13 협의).
|
|
|
|
## 실행 (개발)
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # http://localhost:5174 — /v1·/healthz 는 vite 프록시로 :9600 에 전달(CORS 불필요)
|
|
```
|
|
|
|
LPS API 를 먼저 띄워두세요: `cd ../lps && ./run_local_server.sh`.
|
|
다른 호스트의 API 를 보려면 `VITE_LPS_URL=http://<host>:9600 npm run dev` 또는
|
|
앱의 **설정** 페이지에서 API 주소를 지정합니다(guard 켜진 prod 는 API 키도 입력 — X-API-Key 자동 첨부).
|
|
|
|
## 페이지
|
|
|
|
| 페이지 | 내용 | 데이터 |
|
|
|---|---|---|
|
|
| 대시보드 | 큐/차단/비용/DB풀 스탯 타일 + 임계 배너 + 큐 추이(5초 폴링) | `GET /v1/lps/ops` |
|
|
| 작업 큐 | 목록(상태·검색 필터)·상세(결과/원가/오류)·**DEAD 재큐** | `/v1/lps/jobs`, `/jobs/{id}/requeue` |
|
|
| 상품·가격 | 가격 추이 3선(네이버·쿠팡·최종)·몰별 최저가·검증 링크·**지금 다시 검색** | `/v1/lps/products`, `/products/{code}/history`, `POST /search` |
|
|
| 크롤 상태 | IP 세션 종료사유 도넛·요청 수 분포(+차단 시작 기준선 = 예산 튜닝 뷰)·차단 이력 | `/v1/lps/stats/ip-sessions`, `/stats/bot` |
|
|
| 비용 | 시간별 원가 스택(AI vs 프록시)·건당 평균·평균 소요 | `/v1/lps/stats/cost` |
|
|
|
|
## 스택·규칙
|
|
|
|
- Vite + React + TS + Tailwind v4 + recharts + @tanstack/react-query + react-router (negodata 프론트와 동일 계열, 경량)
|
|
- 색 토큰은 숫자 스케일(`src/index.css` @theme). 차트 시리즈 색은 **엔터티 고정** —
|
|
네이버 `#008a43`(적록색약 분리 검증 통과 톤) · 쿠팡 `#f0455b` · 최종 `#4f46e5`. 순서·색 재배정 금지.
|
|
- 빌드: `npm run build` (tsc 포함) → `dist/`
|