TIPP Design Playground

총평: PRD와의 정합성이 높고 빈 상태 처리가 충실하다. 섹션 구성과 네비게이션 종착지는 대체로 명확하나, rp-home과 rp-mypage2의 병존 근거가 불명확하고 "상세 →" 버튼의 클릭 모델이 PRD 명세와 실구현 사이에 미세 불일치가 있다. 추천 섹션 더 보기 링크 제거는 PRD에 명시됐지만 와이어프레임에는 부재 상태임을 확인 필요.

PRD 상태: 있음 (updated: 2026-05-27, status: draft)

자매 페이지: rp-mypage2, rp-my-tracks, rp-explore, rp-analysis, rp-history, rp-session-detail, rp-track-detail, rp-scenario-detail, rp-session-play

발견사항 (우선순위순)

P0 — 막힘/충돌

rp-home vs rp-mypage2 — 두 홈이 동시에 live 상태 [관점: 일관성]

현상: menu-tree.ts에서 두 슬러그 모두 status: "live", activeSub: "home"으로 등록되어 있어 내비게이션의 "홈" 탭이 어느 페이지로 연결될지 정의되지 않음.
영향: 운영 환경에서 단일 진입점이 결정되지 않으면 사용자 흐름이 분기되고, 양쪽 모두 계속 발전시킬 경우 유지 비용이 두 배로 발생한다.
제안: 두 안을 비교 검토해 A/B 채택 결정을 내리거나, 명시적으로 /compare/rp-home 비교 페이지로 이동시키고 menu-tree에서 한 쪽을 "planned"로 낮춘다. 결정 전까지는 note에 "비교 검토 중 — 채택 미정" 문구가 있으므로 현재는 허용 범위이나, 정식 디자인 단계 진입 전에 반드시 결론이 필요하다.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/lib/menu-tree.ts

트랙 카드 "상세 →" 버튼 — PRD 카드 클릭 모델과 불일치 [관점: PRD정합성]

현상: PRD §4 "카드 클릭 모델"에서 "기존 우하단 '상세 →' 버튼은 시각적 어포던스로만 유지(클릭은 카드 전체가 받음)"라고 명시했다. 그러나 CourseList의 <li> 내부에서 <Link>가 카드 전체를 감싸고 있고 안에 <span>상세 →</span>이 포함되어 있어, span은 실제로 클릭을 받지 않는다. 구조는 PRD 의도를 충족하지만 PRD 문구가 "어포던스로만 유지"라고 했으므로 와이어프레임 주석(코드 주석)에 의도를 명시해야 한다.
영향: 디자인 단계에서 "상세 →"를 별도 button으로 잘못 구현할 위험이 있다. 중첩 인터랙티브 요소 오구현이 발생하면 이중 클릭 핸들러 버그로 이어진다.
제안: <span>상세 →</span> 바로 위에 {/* 시각 어포던스 전용 — 클릭은 부모 Link가 처리 */} 주석 1줄 추가.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-home.tsx (CourseList, line 267)

P1 — 개선 권장

추천 섹션 "더 보기 →" 링크 — PRD 제거 명세 미반영 [관점: PRD정합성]

현상: PRD §4 "추천 섹션 헤더의 '더 보기 →'는 제거 — 추천 모음 페이지는 정의되지 않음"이라고 명시했다. 와이어프레임의 추천 섹션(RecommendationGrid)을 감싸는 <section> 헤더에는 moreHref 없이 SectionHeader가 렌더링되고 있어 링크가 없다. 이 부분은 PRD와 일치하나, SectionHeader 컴포넌트 자체에는 moreHref prop이 있어서 향후 실수로 추가될 위험이 있다.
영향: 낮음. 현재 구현은 의도와 일치하나, 명시적 주석 없이 prop 시그니처만 보면 "추천 섹션에 더 보기를 달 수 있다"고 오해할 수 있다.
제안: RecommendationGrid 호출 위 섹션 주석에 {/* 추천 섹션: 더 보기 없음 — PRD §4 참조, 추천 모음 페이지 미정의 */} 추가.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-home.tsx (line 109)

모바일 시나리오 섹션 — 전체 노출 vs 절단 결정 미확정 [관점: 정보구조]

현상: PRD §5 미결 항목에 "시나리오 둘러보기 모바일 — 슬라이스 없이 전체 노출 유지할지, 상위 N개만 + 더 보기로 절단할지"가 열려 있다. 현재 와이어프레임은 전체 노출 방식으로 구현되어 있어 시나리오가 많을 때 모바일에서 페이지가 길어진다(overflow 모드에서 확인 필요).
영향: 모바일에서 스크롤 깊이가 지나치게 깊어지면 하단 추천/탐색 동선이 발견되지 않을 수 있다.
제안: overflow 모드 + mobile 뷰포트 조합으로 직접 확인 후 결정. 절단 방식을 택한다면 와이어프레임에 "N개 초과 시 더 보기 버튼 표시" 패턴 추가.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-home.tsx (RpMypageMobile, line 145)

rp-mypage2 state 비영속성 — rp-home과 불일치 [관점: 일관성]

현상: rp-home은 mode/viewport/chrome 상태를 usePersistedState로 관리하지만, rp-mypage2는 일반 useState를 사용한다. 두 페이지를 오가면 mypage2에서 설정한 모드가 초기화된다.
영향: 두 안을 비교 검토할 때 동일한 모드(예: edge)를 양쪽에서 유지하기 어렵다.
제안: rp-mypage2도 usePersistedState 사용으로 통일하거나, 비교 목적으로 상태 공유가 불필요하다면 현행 유지 + 주석 명시. (rp-home은 이미 usePersistedState 사용)
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-mypage2.tsx (line 219)

P2 — nice to have

ScenarioCard mobile compact 모드 — 썸네일 비율 1:1 고정 [관점: 정보구조]

현상: 모바일 compact 모드에서 ScenarioCard 썸네일이 h-16 w-24 고정(약 2:3)이고, 데스크톱은 16/9 비율이다. 동일 콘텐츠 타입의 썸네일 비율이 뷰포트에 따라 달라진다.
영향: 디자인 단계에서 이미지 에셋 크롭 기준을 두 가지로 관리해야 한다는 예상치 못한 작업이 생길 수 있다.
제안: 모바일도 16:9 또는 4:3으로 통일하거나, 의도적 차이라면 주석으로 명시.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-home.tsx (ScenarioCard, line 365)

추천 섹션 모바일 4개 제한 — 주석만 있고 와이어 표현 없음 [관점: 인터랙션]

현상: data.recommendations.slice(0, 4)로 잘리지만 "4개 이후 더 보기" 패턴이나 카러셀 가능성에 대한 와이어 표현이 없다.
영향: 낮음. PRD §5에 "디자인 단계에서 가로 스와이프 캐러셀 검토"로 명시되어 있어 현 시점에서는 의도적 defer다.
제안: slice 직후 주석으로 {/* 모바일 4개 제한 — 디자인 단계에서 캐러셀 검토 예정 (PRD §5) */} 추가로 맥락 보존.

PRD 갱신이 필요한 항목

[§5 결정 필요] "두 홈(A안/B안) 채택 타임라인" 항목 없음 — 비교 검토 기한과 결정 기준을 §5에 추가 권장

[§4 액션 테이블] "상세 →" 버튼이 non-interactive임을 액션 테이블에 명시적으로 기재 권장 (현재는 "카드 클릭 모델" 문단에만 서술)