React Router (Data Mode) Use

참고: https://www.heropy.dev/p/9tesDt

기존 React(Vite/CSR) 프로젝트에 React Router 7.x Data Mode(createBrowserRouter + RouterProvider)를 도입하거나, 이미 react-router가 구성된 프로젝트에 라우트/레이아웃/내비게이션/Loader 등 부분 기능을 추가하는 스킬.

이 스킬은 Data Mode 기준이다. <BrowserRouter><Routes><Route>로 구성되는 Declarative Mode 또는 Remix 기반 Framework Mode(@react-router/dev)가 필요하면 이 스킬은 적합하지 않다.

필수 실행 체크리스트 (MANDATORY)

스킬 시작 즉시, 아래 항목을 TodoWrite에 1:1로 등록한 뒤 순서대로 진행한다. 건너뛰기 금지.

1. 프로젝트 상태 감지 (1단계)
2. 작업 모드 결정: 초기 도입 vs 기능 추가 (2단계)
3. react-router 설치 [미설치 시] (3단계)
4. 기본 라우터 골격 생성 [라우터 파일 없을 때] (4단계)
5. 사용자가 추가로 요청한 기능을 기능 가이드 섹션에서 찾아 적용 (5단계)
6. 최종 검증 — 1단계 감지 표를 다시 돌며 누락된 자동 적용 항목이 있으면 재실행 (6단계)