생성: 2026-05-29 · /review hr-training-track
와이어프레임 리뷰: hr-training-track
요약
PRD §1–5가 정의한 핵심 흐름(요약 현황 → 트랙 목록 → 드로어 드릴다운 → 모달 액션)을 와이어프레임이 충실하게 구현했다. 우측 오버레이 드로어와 트랙→개인 드릴다운이 정확히 코드로 표현되어 있고, 신규 트랙 추가 폼은 입력 컨트롤 적합성도 양호하다. 발견된 문제는 대부분 P1 수준이며 P0 차단 이슈는 1건이다.
- PRD 상태: 있음 (updated 2026-05-29)
- 자매 페이지:
hr-training-track 외 hr- prefix 파일 없음. 인접 도메인으로 rp-my-tracks, rp-track-detail 참조함.
발견사항 (우선순위순)
P0 — 막힘/충돌
1. menu-tree.ts에서 슬러그 status가 "planned"로 고정 [관점: 인터랙션]
- 현상:
menu-tree.ts 58번 줄에서 hr-training-track 노드의 status가 "planned"로 기입되어 있음. 파일은 존재하고 /wf/hr-training-track으로 라우팅도 되지만, 인덱스 페이지에서 이 슬러그는 "planned(설계 예정)" 상태로 표시됨.
- 영향: 인덱스에서 WF 뱃지가 "없음(점선)"으로 렌더되어 다음 단계(
/review) 진입 게이트가 영구적으로 잠긴다. 파이프라인 관점에서 이 화면은 없는 것과 같다.
- 제안:
status: "planned" → "live"로 변경.
- 영향 파일:
playground/lib/menu-tree.ts
P1 — 개선 권장
2. "트랙 보관" 액션에 확인 단계 없음 [관점: 인터랙션]
- 현상:
TrackDetail 하단의 "트랙 보관" 버튼이 track-settings 모달을 열지만, 모달 본문은 플레이스홀더(h-8 border bg-gray-50) 두 개만 있고 보관 전 확인 메시지나 영향 범위 안내가 없다.
- 영향: 트랙 보관은 배정된 인원 전체의 학습 상태에 영향을 주는 비가역적 조작에 가깝다. 확인 단계 없이 "저장" 클릭 한 번으로 완료되는 구조는 실수 유발 위험이 있다.
- 제안: 모달 본문에 "보관 시 진행 중인 인원의 접근이 중단됩니다. 계속하시겠습니까?" 수준의 영향 고지 텍스트 영역을 와이어프레임에 추가. "마감일 연장"과 "트랙 보관"을 같은
track-settings 모달 하나로 처리하는 것도 검토 필요 — 두 액션의 UX 중요도와 리스크가 다르다.
- 영향 파일:
hr-training-track.tsx Modal / MODAL_META["track-settings"]
3. "배정 인원 관리" 모달의 인원 검색 컨트롤이 자유 텍스트 input 플레이스홀더 [관점: 인터랙션]
- 현상:
assign-members 모달 본문은 "인원 추가 (검색/부서 선택)" 레이블 아래 h-8 border bg-gray-50 빈 박스만 있다. 반면 신규 트랙 추가 폼(NewTrackForm)은 개인/부서/그룹 세그먼트 + 검색 입력 + 선택 칩까지 구현되어 있다.
- 영향: 기존 트랙의 인원 관리 모달이 신규 추가 폼보다 훨씬 덜 구체화되어 있어 두 흐름 간 일관성이 깨진다. 리뷰어가 두 흐름을 비교 검토하기 어렵다.
- 제안:
assign-members 모달도 NewTrackForm의 assignMode 세그먼트 + 검색 패턴을 그대로 재사용하거나, "신규 트랙 추가" 폼 내 배정 섹션과 동일 컴포넌트로 참조한다는 주석이라도 추가한다.
- 영향 파일:
hr-training-track.tsx MODAL_META["assign-members"]
4. 모바일 뷰에서 드로어 닫기 후 복귀 경로가 헤더 없이 시작 [관점: 정보구조]
- 현상: 모바일 뷰에서
selectedTrack이 있을 때 MobileView는 곧바로 TrackDetail을 렌더한다. TrackDetail 헤더의 닫기(✕) 버튼이 closeDetail을 호출해 목록으로 돌아가지만, 모바일 TrackDetail에는 "뒤로(목록)" 패턴 라벨이 없고 ✕만 있다. 데스크탑 드로어와 같은 ✕ 패턴이나 rp-my-tracks 모바일 헤더의 Back chevron 패턴 중 어느 것이 맞는지 불분명하다.
- 영향: 모바일에서 ✕가 "닫기(숨기기)"인지 "뒤로(목록)"인지 사용자에게 모호하다. 데스크탑은 목록과 드로어가 공존하므로 ✕가 "드로어 닫기"로 명확하지만, 모바일은 목록 자체가 교체된 상태다.
- 제안: 모바일
TrackDetail 헤더를 ‹ 목록으로 형태의 back 버튼으로 교체하거나, MobileView에 상단 back nav 레이어를 추가한다. rp-my-tracks 모바일의 back 패턴을 참조.
- 영향 파일:
hr-training-track.tsx TrackDetail 헤더 (모바일 분기)
5. 개인 디테일에서 rp-session-detail 연결 경로 미표시 [관점: 인터랙션]
- 현상:
MemberDetail의 시나리오별 결과 행이 정적 <li> 요소로 렌더되어 있고, rp-session-detail로의 링크 CTA가 없다.
- 영향: PRD §5 미결 항목 "개인 진척 디테일에서
rp-session-detail로 연결할지 여부"가 와이어프레임에서도 결정되지 않은 채 정적으로만 그려져 있다. 결정이 안 된 것 자체는 문제가 아니지만, 행이 클릭 가능한지 여부가 시각적으로 구분되지 않아 다음 단계 리뷰어가 의도를 파악하기 어렵다.
- 제안: 행을
<button> 형태로 바꾸되 [링크 미확정 — §5 결정 후] 주석을 남기거나, 현재의 정적 <li> 상태라면 섹션 제목 옆에 "(클릭 불가 — 연결 미결정)" 텍스트 레이블을 추가한다.
- 영향 파일:
hr-training-track.tsx MemberDetail 시나리오 결과 목록
P2 — nice to have
6. 드로어 스크롤 영역과 sticky 좌측 목록 간 높이 동기화 미고려 [관점: 정보구조]
- 현상: 드로어는
sticky top-3 max-h-[calc(100vh-2rem)] overflow-auto로 처리되어 있으나 좌측 목록은 그냥 흐른다. 트랙이 많아 목록이 뷰포트보다 길어지면 드로어가 상단에 고정된 채 목록만 스크롤되어 좌우 스크롤 상태가 분리된다.
- 영향: "overflow" 모드 데이터를 보면 이 현상이 재현될 가능성이 있다. 와이어프레임에서 이 엣지케이스가 의도된 동작인지 표시되어 있지 않다.
- 제안: overflow 모드에서 좌측이 길어질 때 드로어가 목록 최하단에 맞춰 늘어나는지, 아니면 독립 스크롤이 맞는지 동작 의도를 주석 또는 동작 설명으로 명시.
7. 요약 현황 타일이 클릭 불가능하지만 필터와 연결 기대를 유발 [관점: 인터랙션]
- 현상:
SummaryStats의 타일(진행중, 마감 임박, 미시작 인원)이 <div>로 렌더되어 클릭 불가. 그러나 "진행중" 타일 값과 필터 탭의 "진행중" 카운트가 동일 데이터를 노출한다.
- 영향: 유사한 요약 현황 타일 패턴(
rp-mypage2 위젯 보드 등)에서 타일 클릭 → 필터 전환이 자연스럽게 기대된다. 정적 타일임을 명시하지 않으면 디자인 단계에서 혼선이 생길 수 있다.
- 제안: 타일을 필터 shortcut으로 연결하거나(P1 격상 가능), 현재처럼 정적 요약으로만 쓴다면
"요약 타일은 클릭 불가, 아래 필터 탭으로 전환" 주석을 추가.
PRD 갱신이 필요한 항목
- [§5 미결] 트랙 보관의 영향 범위 정의 — "보관" 시 배정 인원의 학습 접근 중단 여부, 보관 취소 가능 여부가 PRD에 기술되어 있지 않다. 와이어프레임 확정 전에 정의되어야 "트랙 설정" 모달의 구체화 범위가 결정된다.
- [§5 미결]
rp-session-detail 연결 권한 범위 — HR Admin이 개인 세션 원문을 열람 가능한지 여부가 확정되면 MemberDetail 시나리오 행의 클릭 가능 여부가 결정된다.
- [§5 미결] 트랙 상태 자동 전환 규칙 — 기간 기반 자동 전환이라면 "트랙 보관" 외 "수동 종료" 액션이 불필요하거나 반대로 추가될 수 있다. 모달 구조에 영향.
다음 단계 제안
menu-tree.ts의 hr-training-track status를 "live"로 수정해 /review 게이트를 열기.- PRD §5 미결 항목 중 "트랙 보관 영향 범위"와 "세션 연결 권한"을 결정한 뒤
track-settings 모달과 MemberDetail 시나리오 행을 구체화하고 /review를 재실행.
참고 파일
playground/components/wireframes/hr-training-track.tsxplayground/prds/hr-training-track.mdplayground/lib/menu-tree.ts