4760b5a284
- lib/region.ts formatRegion() 신설: 파이프 분리 + 빈토큰/null/나라 더미 제거 + ' › ' 조인 - RestaurantDetail/RestaurantList 지역 표기에 적용 - buildSearchQuery(검색용 공백조인) 유지 - 설계서 docs/design/532-region-display/README.md Refs #532 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
#532 — 지역 표시 계층화 (formatRegion)
배경 / 문제
지역(region)은 나라|시도|구군 파이프 구분 문자열(예: 한국|서울|강남구).
사용자 화면에 원본이 그대로 노출되어 한국|서울|강남구(파이프) 또는 평문 한국 서울로 보임.
기대: 한국 › 서울 › 구군 계층(breadcrumb) 표시.
범위
- 식당 상세 시트의 "지역" 표기 (
RestaurantDetail.tsx) - 식당 리스트 카드의 지역 표기 (
RestaurantList.tsx) - 공용 유틸
formatRegion()신설 (lib/region.ts)
비범위: 지역 필터 동작/정렬(정상), 외부 지도 검색 쿼리(buildSearchQuery — 공백 조인 유지), 데이터 정합성(별도 이슈).
함수 설계
formatRegion(region: string | null | undefined): string
- 입력: 파이프 구분 지역 문자열 (예:
"한국|서울|강남구","일본|null","한국||관악구","") - 처리:
- falsy →
""반환 split("|")→ 각 토큰trim()- 빈 토큰,
"null"(대소문자 무시), 더미"나라"제거 - 남은 토큰을
" › "(U+203A)로 조인
- falsy →
- 출력 예:
입력 출력 한국|서울|강남구한국 › 서울 › 강남구일본|null일본한국||관악구한국 › 관악구""/null""(호출부에서 미표시) - 순수 함수(I/O 없음) → 단위 테스트 용이.
적용
RestaurantDetail.tsx:132:{restaurant.region}→{formatRegion(restaurant.region)}RestaurantList.tsx:54:{r.region}→{formatRegion(r.region)}
엣지케이스
- 모든 토큰이 더미/빈 값(
"한국|","|") → 유효 토큰만 남김(한국) 또는"". 호출부는region &&가드가 있어""이면 미표시. - 단일 토큰(
"한국") →한국그대로.
검증
- 단위 테스트(가능 시) 또는 dev 화면에서 상세/리스트 지역 표기가
›계층으로 보이는지. npm run build(또는 tsc/lint) 통과.