crowny-class 관리자 대시보드 — 주차별진도 [object Object]/NaN% 수정
개요
admin.html 대시보드 탭에서 주차별 진도 막대가
[object Object]·
width:NaN%로 깨져 표시되던 버그를 수정. 원인은 백엔드 응답 구조 변경(주차별진도[week] = 숫자 → 객체
{학생수,완료수,평균시청초}) 이후 프론트가 여전히 숫자로 가정하고 렌더했기 때문.
API 실구조 확인
GET /api/admin/dashboard (Authorization: Bearer <ADMIN_TOKEN>)
modules/admin/routes.js computeDashboard():
js주차별진도[week] = {
학생수: s.학생수,
완료수: s.완료수,
평균시청초: s.학생수 > 0 ? Math.round(s.합계초 / s.학생수) : 0,
}
week 키 "0" = 오리엔테이션(관례상 첫 영상 week 미지정 시 0).
무엇을 했는지
public/admin.html renderDashboard()의 주차별진도 렌더 블록(구 274~283행 부근)을 객체 필드 기반으로 재작성:
- 완료율 막대
pct = 학생수>0 ? round(완료수/학생수*100) : 0
- 카운트 표시를
완료수/학생수 형태로
- 평균시청초를
fmtSec()로 "N분 NN초" 포맷해 별도 표기
- week키
"0"은 라벨을 "오리엔테이션"으로 표시
- CSS
.wp-count 폭 조정(40→44px) + 신규 .wp-time 룰 추가(디자인 토큰 SSOT var(--text2) 사용, 임의 색상 없음).
- 한선씨 동반:
한선씨/관리판정.한선에 주차완료율(완료수,학생수)·초를분초(초) 함수 추가(프론트 로직 미러). hanseonc_high 컴파일 + crownyc run 실행 검증 통과(65초→"1분 05초", 605초→"10분 05초" 등).
검증
node --check로 admin.html 인라인 <script> 문법 확인 통과.
Python html.parser로 전체 태그 짝(unclosed/mismatch) 확인 — 0건.
격리 헤드리스 렌더 테스트(admin.html과 동일 코드 발췌)로 목업 데이터 {0:{12,9,605},1:{10,3,65},2:{0,0,0}} 렌더 결과 확인:
[object Object]/NaN% 없음, "오리엔테이션" 라벨 정상, "9/12"·"평균 10분 05초" 등 정상 출력.
라이브 curl http://127.0.0.1:9864/admin.html로 배포된 정적 파일에 수정 코드 반영 확인(빌드 스텝 없음, 정적 서빙 직결).
라이브 대시보드 API 응답 시점(2026-07-12)엔 주차별진도: {}(수강생 0명) — "데이터 없음" 정상 표시 경로도 유지됨(변경 없음).
P2 회귀 확인: 스탯 타일(stat())·입금상태 배지·모집상태 배지 렌더 로직 미변경, 다른 탭(영상업로드/레슨배선/입금확인/수강생목록) 코드 미접촉.관련 파일
/Users/ef/crowny-class/public/admin.html (renderDashboard 수정, CSS .wp-count/.wp-time)/Users/ef/crowny-class/한선씨/관리판정.한선 (주차완료율/초를분초 동반 함수)/Users/ef/crowny-class/modules/admin/routes.js (참조만, 미수정 — 주차별진도 구조 확정 근거)
잔여 이슈
- 디자인대조 훅(
/Users/ef/CrownyBrowser/tools/디자인대조.sh)이 이 파일 Edit마다 .tabbar/.tab/.toolbar/.omni/.bm/.ib FAIL을 출력함. 확인 결과 디자인규격.psv는 CrownyBrowser 자체 브라우저 크롬 UI 스펙(omnibox/bookmark bar/icon button 등)이며 crowny-class 관리자 대시보드(전혀 다른 컴포넌트 체계, .tabbar는 관리자 탭 전환 바)와 클래스명만 우연히 겹침. .tabbar height 기대40 실측0도 토큰 인증 전 class="hidden" 게이트 상태(이번 수정과 무관, 기존 동작)에서 측정된 것. 이 PostToolUse 훅이 프로젝트 무관 스펙 파일을 전역 html Edit에 강제 대조하는 구조라 오탐 소지 — 다음 세션이 훅 스코프(프로젝트별 스펙 매핑)를 손볼 필요 있음.