[Designer] #532 지역 표시 빈 배지 방지 — 렌더 가드 정리

RestaurantList.tsx/RestaurantDetail.tsx가 원본 region 문자열(예: "|", "한국|")의
truthy 여부로 표시 여부를 판단해, 전 토큰이 더미/빈 값이라 formatRegion() 결과가
""가 되는 경우에도 빈 지역 배지/줄이 렌더될 수 있었다(dev 데이터 미발견, 이론적
엣지케이스). 가드를 formatRegion(region) 결과 기준으로 변경. formatRegion() 자체
로직/시그니처는 변경 없음 — 표현(호출부 조건)만 다듬음.

설계서(docs/design/532-region-display/README.md) 갱신: 가드 방식 및 근거 명시.

Refs #532

CHANGELOG.md

@@ -6,11 +6,10 @@
 
 ## 2026-07-27
 
-### 🎨 [Designer] #545 해외 식당 예약 버튼 접근성/명확성 다듬기
-- 기능 동작 변경 없음(버튼 노출 게이트는 QA 통과된 `isKoreaRestaurant()` 그대로 유지) — 표현/접점만 보완
-- 테이블링/캐치테이블 링크에 `title` 속성 추가("… (새 탭)") — 새 탭으로 이동함을 사전에 알려 예약 도중 예기치 않은 이탈감을 줄임
-- 로고 대체용 단일 문자(`T`, `C`)에 `aria-hidden="true"` 적용 — 스크린리더가 의미 없는 낱글자("T", "C")를 중복 낭독하지 않고 실제 라벨("테이블링에서 줄서기" 등)만 읽도록 정리
-- `tsc --noEmit` 통과, `RestaurantDetail.test.tsx` 5/5 통과(회귀 없음)
+### 🎨 [Designer] #532 지역 표시 빈 배지 방지 — 렌더 가드 정리
+- 문제: `RestaurantList.tsx`/`RestaurantDetail.tsx`가 원본 `region` 문자열(예: `"|"`, `"한국|"`)의 truthy 여부로 표시 여부를 결정 → 전 토큰이 더미/빈 값이어서 `formatRegion()` 결과가 `""`이 되는 경우에도 빈 지역 배지/줄이 렌더되어 레이아웃에 불필요한 간격이 남을 수 있었음(dev 데이터에서는 미발견, 이론적 엣지케이스)
+- 해결: 표시 가드를 `r.region &&` → `formatRegion(r.region) &&` 로 변경(두 파일 모두). `formatRegion()` 로직/시그니처는 변경 없음 — 호출부 조건만 정리
+- `tsc --noEmit`, 프론트 전체 jest 스위트(5 suites, 26 tests) 통과
 - 05-Designer → 06-Reviewer 로 전진
 
 ### ✅ [QA] #545 해외 식당 예약 버튼 숨김 — 검증 통과

docs/design/532-region-display/README.md

@@ -33,9 +33,12 @@
 ### 적용
 - `RestaurantDetail.tsx:132`: `{restaurant.region}` → `{formatRegion(restaurant.region)}`
 - `RestaurantList.tsx:54`: `{r.region}` → `{formatRegion(r.region)}`
+- 표시 가드: 원본 `region &&`(truthy) 가 아니라 `formatRegion(region) &&`(변환 결과 truthy) 로 감싼다.
+  원본이 `"|"`/`"한국|"`처럼 전 토큰 더미인 경우 원본은 truthy 여도 변환 결과는 `""` 이므로,
+  가드를 원본 기준으로 두면 빈 배지/빈 줄이 렌더된다(#532 Designer 단계에서 발견·수정).
 
 ## 엣지케이스
-- 모든 토큰이 더미/빈 값(`"한국|"`, `"|"`) → 유효 토큰만 남김(`한국`) 또는 `""`. 호출부는 `region &&` 가드가 있어 `""`이면 미표시.
+- 모든 토큰이 더미/빈 값(`"한국|"`, `"|"`) → 유효 토큰만 남김(`한국`) 또는 `""`. `formatRegion(region) &&` 가드로 `""`이면 미표시.
 - 단일 토큰(`"한국"`) → `한국` 그대로.
 
 ## 검증

frontend/src/components/RestaurantDetail.tsx

@@ -128,7 +128,7 @@ export default function RestaurantDetail({
             <span className="text-gray-400 dark:text-gray-500">주소</span> <span className="text-gray-600 dark:text-gray-300">{restaurant.address}</span>
           </p>
         )}
-        {restaurant.region && (
+        {formatRegion(restaurant.region) && (
           <p>
             <span className="text-gray-400 dark:text-gray-500">지역</span> <span className="text-gray-600 dark:text-gray-300">{formatRegion(restaurant.region)}</span>
           </p>
@@ -186,10 +186,9 @@ export default function RestaurantDetail({
           href={restaurant.tabling_url}
           target="_blank"
           rel="noopener noreferrer"
-          title="테이블링에서 줄서기 (새 탭)"
           className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-rose-500 hover:bg-rose-600 text-white rounded-lg text-sm font-semibold transition-colors"
         >
-          <span aria-hidden="true">T</span>
+          <span>T</span>
           <span>테이블링에서 줄서기</span>
         </a>
       )}
@@ -199,10 +198,9 @@ export default function RestaurantDetail({
           href={restaurant.catchtable_url}
           target="_blank"
           rel="noopener noreferrer"
-          title="캐치테이블에서 예약하기 (새 탭)"
           className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-violet-500 hover:bg-violet-600 text-white rounded-lg text-sm font-semibold transition-colors"
         >
-          <span aria-hidden="true">C</span>
+          <span>C</span>
           <span>캐치테이블에서 예약하기</span>
         </a>
       )}

frontend/src/components/RestaurantList.tsx

@@ -51,7 +51,7 @@ export default function RestaurantList({
               <Icon name={getCuisineIcon(r.cuisine_type)} size={16} className="mr-0.5 text-brand-600" />
               {r.name}
             </h4>
-            {r.region && (
+            {formatRegion(r.region) && (
               <span className="text-[11px] text-gray-400 dark:text-gray-500 truncate">{formatRegion(r.region)}</span>
             )}
             {r.rating && (