[Enhancement] SearchPage URL 기반 상태 관리로 뒤로가기/북마크 지원

[seorinn]

배경

SearchPage에서 검색 탭(전체/프로모션/작가)을 state로 관리하여 URL이 변경되지 않습니다. 뒤로가기, 새로고침, 북마크 시 이전 탭 상태가 유지되지 않습니다.

현재 코드

// src/pages/SearchPage/index.tsx
const [state, setState] = useState<"OVERVIEW" | "PROMOTION" | "PHOTOGRAPHER">("OVERVIEW");

// 탭 전환 시 URL 변화 없음
<button onClick={() => setState("PROMOTION")}>프로모션</button>
<button onClick={() => setState("PHOTOGRAPHER")}>작가</button>

문제점

• /search?q=키워드로 공유해도 탭 상태 복원 불가
• 뒤로가기 시 탭 초기화 (UX 저하)
• 새로고침 시 탭 초기화

개선 방향

옵션 1: URL query parameter 사용 (권장)

// /search?q=키워드&tab=promotion
const [searchParams, setSearchParams] = useSearchParams();
const tab = searchParams.get("tab") || "overview";

const handleTabChange = (newTab: string) => {
  setSearchParams({ q: searchKeyword, tab: newTab });
};

옵션 2: 중첩 라우팅

// App.tsx
<Route path="/search" element={<SearchPage />}>
  <Route index element={<SearchOverview />} />
  <Route path="promotions" element={<SearchPromotions />} />
  <Route path="photographers" element={<SearchPhotographers />} />
</Route>

관련 파일

• src/pages/SearchPage/index.tsx
• src/App.tsx