routing.md

doc_type	fe_routing
source_of_truth	AIBE5_FinalProject_Team4_FE
last_updated	2026-06-03

FE 라우팅 기준

이 문서는 FE 라우팅과 화면 진입 기준을 정리합니다.

현재 라우트

현재 src/main.tsx에서 react-router-dom 기반 라우팅을 사용합니다.

Path	화면	설명
/	App	메인 앱 화면
/onboarding	OnboardingPage	온보딩 화면
/error/server	ServerErrorPage	서버 오류 화면
/error/network	NetworkErrorPage	네트워크 오류 화면
*	NotFoundPage	존재하지 않는 경로

화면 진입 기준

• 사용자가 직접 접근하는 화면은 라우트로 정의합니다.
• 탭 전환만으로 충분한 내부 화면은 컴포넌트 상태로 관리할 수 있습니다.
• 기능이 커져 URL 공유, 새로고침 유지, 브라우저 뒤로가기 처리가 필요하면 라우트로 승격합니다.

탭 기반 화면

현재 메인 앱 내부에는 아래 탭이 있습니다.

탭	의미
home	추천 홈
closet	옷장
feed	룩피드
profile	프로필

탭 기반 화면은 사용자가 이동할 수 있어야 하며, 구현된 기능이 import만 되고 화면에서 도달 불가능한 상태가 되지 않도록 합니다.

에러 라우팅

오류	이동 경로
500 서버 내부 오류	/error/server
네트워크 오류	/error/network
존재하지 않는 URL	* -> NotFoundPage

에러 페이지는 사용자가 다시 시도하거나 홈으로 돌아갈 수 있는 행동을 제공해야 합니다.

온보딩

온보딩은 최초 로그인 후 기본 정보와 선호 스타일을 입력하는 흐름입니다.

기준:

• 닉네임, 생년월일, 성별, 선호 스타일 입력 상태를 검증합니다.
• 다음 단계로 넘어가기 전 필수값을 확인합니다.
• 완료 후 메인 앱 또는 첫 옷 등록 흐름으로 이동합니다.

라우팅 유지 기준

• 라우트에 연결된 화면은 실제 렌더링 가능한 컴포넌트를 가리킵니다.
• 사용자가 핵심 기능에 접근할 수 있는 진입점을 제공합니다.
• 화면이나 컴포넌트는 import만 되고 도달 불가능한 상태로 남기지 않습니다.
• API 에러와 라우터 에러는 사용자에게 적절한 안내 화면 또는 안내 문구로 연결합니다.
• 새로고침 또는 직접 URL 접근 시 빈 화면이 되지 않도록 기본 상태를 처리합니다.
• 라우트, 탭 구조, 화면 진입 기준이 바뀌면 이 문서를 같은 PR에서 수정합니다.