dpdpdndn 블로그

FE-31-stage2-route-skeleton

NEW6 min read

[FE-31] 2단계 라우트 골격 · 지원 탭 하위 진입점

작업 내용 (설계 의도)

근거: 지원 관리 확장 FE 웹 설계 라우팅 · 내비게이션 > 탭 구조·2단계 라우팅 흐름·라우트 등록 (Single Writer per File 장치)·티켓 분해 · Wave DAG > 단계 2·Single Writer per File 검증 > 단계 2.

변경 사항

  • 단계 2 wave 1의 라우트 병목 티켓입니다. web/src/routes.tsx는 각 단계의 wave 1 골격 티켓만 수정한다는 Single Writer 장치를 따라, 2단계 라우트 3개를 이 티켓에서 한 번에 등록합니다. 후행 화면 티켓(FE-32·34·35)은 자기 페이지 파일만 대체하고 routes.tsx를 건드리지 않습니다.
  • 추가 라우트는 /documents(S-20 서류 보관함), /documents/series/:seriesId(S-21 계열 상세), /resume-profile(S-23 이력서 프로필) 3개입니다. 기존 lazy 로딩 관례를 그대로 승계합니다.
  • 각 라우트에 “준비 중” 스텁 페이지를 배치합니다. 스텁은 후행 티켓이 파일째 대체할 대상이며, 다른 wave에서 대체되므로 충돌하지 않습니다(단계 1의 AuthGate·LoginPage 스텁과 같은 기법). 스텁 단계에서도 라우트가 500·빈 화면이 아니라 정상 문구를 렌더해야 wave 2 착수 전에도 배포 가능합니다.
  • NavTabs의 지원 탭 활성 판정에 신규 경로 3개를 추가합니다 — /documents*·/resume-profile*가 지원 탭 하위로 판정되어야 서류·프로필 화면에서 탭 하이라이트가 유지됩니다. 탭 개수는 5개 그대로이며 늘리지 않습니다 — 단계 1의 FE-22가 이미 5탭 구조를 만들었으므로 이 티켓은 활성 판정 로직만 확장합니다.
  • 3개 화면 모두 지원 탭 하위이므로 헤더에 뒤로가기를 두고 탭을 최상위 진입점으로 삼습니다. 신규 탭을 만들지 않는 이유는 “탭은 최상위 관심사만”이라는 기존 내비게이션 원칙을 지키기 위해서입니다.
  • 이 티켓은 API·훅·데이터 조회를 만들지 않습니다. 같은 wave의 FE-30(타입·목·유틸)과 파일 교집합이 없습니다.

롤백: 라우트 3개와 NavTabs 활성 판정 추가분을 되돌리면 기존 11개 화면과 단계 1 라우트가 그대로 동작합니다.

의존

  • FE-22 — routes.tsx 구조와 5탭 NavTabs를 소유한 단계 1 골격 티켓. 그 구조 위에 확장합니다.
  • BE 의존 없음 — 데이터 조회가 없습니다.

다이어그램

처리 흐름

sequenceDiagram
    participant User as 사용자
    participant Tabs as NavTabs
    participant Router as routes.tsx
    participant Stub as 준비 중 스텁
    User->>Tabs: 지원 탭에서 서류 진입
    Tabs->>Router: /documents 이동
    Router->>Stub: lazy 로드
    Stub-->>User: 준비 중 화면
    Tabs-->>User: 지원 탭 활성 유지

컴포넌트 의존

flowchart LR
    Routes[routes.tsx] --> DocList[DocumentSeriesListPage 스텁]
    Routes --> DocDetail[DocumentSeriesDetailPage 스텁]
    Routes --> Resume[ResumeProfilePage 스텁]
    Routes --> Shell[AppShell]
    Shell --> Tabs[NavTabs 5탭]
    Tabs --> Match[지원 탭 활성 판정]
    Match --> DocList
    Match --> Resume

테스트 케이스

  • /documents로 진입하면 서류 보관함 스텁이 렌더되고 “준비 중” 문구가 보인다.
  • /documents/series/12로 진입하면 계열 상세 스텁이 렌더되고 seriesId 파라미터가 라우트에서 파싱된다.
  • /resume-profile로 진입하면 이력서 프로필 스텁이 렌더된다.
  • /documents·/documents/series/12·/resume-profile 어디에서든 지원 탭이 활성으로 표시된다.
  • 신규 경로에서 회사·보관함·매칭·운영 탭이 활성으로 표시되지 않는다.
  • 탭 목록의 개수가 5개로 유지되고 신규 탭이 추가되지 않는다.
  • 기존 단계 1 경로(/(대시보드 랜딩)·/watchlist·/companies·/applications/:id)의 탭 활성 판정이 그대로 유지된다(회귀).
  • 정의되지 않은 하위 경로(/documents/unknown/path)로 진입해도 앱이 크래시하지 않고 기존 폴백 처리를 따른다.
  • 신규 스텁 3종이 .dark 클래스 환경에서 렌더되고 하드코딩 색을 0건 사용한다.

그래프 뷰