라우트 값과 검색 조건 분리

/products/ route segment

:productId useParams가 읽는 리소스 식별자

?filter=sale useSearchParams가 읽는 목록 조건

&page=2 뒤로가기와 공유 링크에 남는 상태

path 라우트 파라미터

읽기 useParams()로 productId를 얻는다.

역할 없으면 화면이 성립하지 않는 리소스 식별자다.

실패 존재하지 않으면 상세 fallback 또는 not-found로 보낸다.

query 검색 파라미터

읽기/쓰기 useSearchParams()로 filter와 page를 갱신한다.

역할 없어도 기본값으로 복원 가능한 목록 조건이다.

실패 빈 값, 인코딩 오류, 없는 page를 기본 조건으로 정리한다.

직접 진입 주소창 URL만으로 같은 화면을 연다.

새로고침 로컬 상태 없이 path/query를 다시 읽는다.

공유 링크 필터와 페이지가 링크에 남아야 한다.

뒤로가기 검색 조건 변화가 히스토리로 복원된다.

책임

라우트 파라미터는 리소스 식별자, 쿼리 문자열은 필터와 정렬 조건을 맡긴다 제품 id처럼 없으면 화면이 성립하지 않는 값은 path param에 두고, 검색어와 page처럼 바뀌는 조건은 search param으로 남깁니다.

범위

경계

ProductDetail 링크는 encode와 기본값을 거친 URL만 생성한다 링크 생성, useParams 읽기, useSearchParams 갱신 지점을 나눠 새로고침과 공유 링크가 같은 화면을 복원하게 합니다.

경계

URL 예외

빈 쿼리와 잘못된 id에서 fallback을 분리한다 존재하지 않는 route params, 누락된 search params, 잘못 인코딩된 값을 각각 재현해 목록과 상세 화면의 실패 모드를 확인합니다.

점검

URL 상태 검증 지점

URL 직접 진입 상세 URL과 검색 URL을 직접 열었을 때 같은 productId, filter, page 값으로 화면이 복원되는지 확인합니다.

잘못된 URL 존재하지 않는 productId와 비어 있는 쿼리를 따로 재현하지 않으면 빈 상세 화면과 사라진 필터가 정상 예제 뒤에 숨어 남습니다.

공유/뒤로가기 공유 링크, 뒤로가기, 새로고침 결과를 함께 남겨 URL이 화면 상태의 단일 진입점으로 동작하는지 다시 확인합니다.

URL 복원 점검

질문: productId는 path param으로, filter와 page는 search param으로 남아 있는가
순서: /products/:productId 매칭 -> search params 기본값 적용 -> 링크 공유와 뒤로가기 복원 확인
위험: 쿼리를 로컬 상태에만 두면 새로고침이나 공유 링크에서 필터가 사라지고, 잘못된 productId는 fallback 없이 빈 상세 화면으로 남습니다.