c13b976ca3
RestaurantList.tsx/RestaurantDetail.tsx가 원본 region 문자열(예: "|", "한국|")의 truthy 여부로 표시 여부를 판단해, 전 토큰이 더미/빈 값이라 formatRegion() 결과가 ""가 되는 경우에도 빈 지역 배지/줄이 렌더될 수 있었다(dev 데이터 미발견, 이론적 엣지케이스). 가드를 formatRegion(region) 결과 기준으로 변경. formatRegion() 자체 로직/시그니처는 변경 없음 — 표현(호출부 조건)만 다듬음. 설계서(docs/design/532-region-display/README.md) 갱신: 가드 방식 및 근거 명시. Refs #532
47 lines
2.4 KiB
Markdown
47 lines
2.4 KiB
Markdown
# #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 없음) → 단위 테스트 용이.
|
||
|
||
### 적용
|
||
- `RestaurantDetail.tsx:132`: `{restaurant.region}` → `{formatRegion(restaurant.region)}`
|
||
- `RestaurantList.tsx:54`: `{r.region}` → `{formatRegion(r.region)}`
|
||
- 표시 가드: 원본 `region &&`(truthy) 가 아니라 `formatRegion(region) &&`(변환 결과 truthy) 로 감싼다.
|
||
원본이 `"|"`/`"한국|"`처럼 전 토큰 더미인 경우 원본은 truthy 여도 변환 결과는 `""` 이므로,
|
||
가드를 원본 기준으로 두면 빈 배지/빈 줄이 렌더된다(#532 Designer 단계에서 발견·수정).
|
||
|
||
## 엣지케이스
|
||
- 모든 토큰이 더미/빈 값(`"한국|"`, `"|"`) → 유효 토큰만 남김(`한국`) 또는 `""`. `formatRegion(region) &&` 가드로 `""`이면 미표시.
|
||
- 단일 토큰(`"한국"`) → `한국` 그대로.
|
||
|
||
## 검증
|
||
- 단위 테스트(가능 시) 또는 dev 화면에서 상세/리스트 지역 표기가 `›` 계층으로 보이는지.
|
||
- `npm run build`(또는 tsc/lint) 통과.
|