Files

joungmin 4760b5a284 [Developer] #532 지역 표시 계층화 formatRegion (한국|서울 → 한국 › 서울)

- 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>

2026-06-28 16:15:53 +09:00

2.0 KiB

Raw Blame History

#532 — 지역 표시 계층화 (formatRegion)

배경 / 문제

지역(region)은 나라|시도|구군 파이프 구분 문자열(예: 한국|서울|강남구). 사용자 화면에 원본이 그대로 노출되어 한국|서울|강남구(파이프) 또는 평문 한국 서울로 보임. 기대: 한국 › 서울 › 구군 계층(breadcrumb) 표시.

범위

식당 상세 시트의 "지역" 표기 (RestaurantDetail.tsx)
식당 리스트 카드의 지역 표기 (RestaurantList.tsx)
공용 유틸 formatRegion() 신설 (lib/region.ts)

비범위: 지역 필터 동작/정렬(정상), 외부 지도 검색 쿼리(buildSearchQuery — 공백 조인 유지), 데이터 정합성(별도 이슈).

함수 설계

`formatRegion(region: string | null | undefined): string`

입력: 파이프 구분 지역 문자열 (예: "한국|서울|강남구", "일본|null", "한국||관악구", "")
처리:
1. falsy → "" 반환
2. split("|") → 각 토큰 trim()
3. 빈 토큰, "null"(대소문자 무시), 더미 "나라" 제거
4. 남은 토큰을 " › "(U+203A)로 조인
출력 예:

입력 출력

한국|서울|강남구 한국 › 서울 › 강남구

일본|null 일본

한국||관악구 한국 › 관악구

"" / null "" (호출부에서 미표시)
순수 함수(I/O 없음) → 단위 테스트 용이.

입력	출력
`한국\|서울\|강남구`	`한국 › 서울 › 강남구`
`일본\|null`	`일본`
`한국\|\|관악구`	`한국 › 관악구`
`""` / `null`	`""` (호출부에서 미표시)

적용

RestaurantDetail.tsx:132: {restaurant.region} → {formatRegion(restaurant.region)}
RestaurantList.tsx:54: {r.region} → {formatRegion(r.region)}

엣지케이스

모든 토큰이 더미/빈 값("한국|", "|") → 유효 토큰만 남김(한국) 또는 "". 호출부는 region && 가드가 있어 ""이면 미표시.
단일 토큰("한국") → 한국 그대로.

검증

단위 테스트(가능 시) 또는 dev 화면에서 상세/리스트 지역 표기가 › 계층으로 보이는지.
npm run build(또는 tsc/lint) 통과.

2.0 KiB Raw Blame History Unescape Escape