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

frontend/src/components/RestaurantDetail.tsx

@@ -7,6 +7,7 @@ import ReviewSection from "@/components/ReviewSection";
 import MemoSection from "@/components/MemoSection";
 import { RestaurantDetailSkeleton } from "@/components/Skeleton";
 import Icon from "@/components/Icon";
+import { formatRegion } from "@/lib/region";
 
 interface RestaurantDetailProps {
   restaurant: Restaurant;
@@ -129,7 +130,7 @@ export default function RestaurantDetail({
         )}
         {restaurant.region && (
           <p>
-            <span className="text-gray-400 dark:text-gray-500">지역</span> <span className="text-gray-600 dark:text-gray-300">{restaurant.region}</span>
+            <span className="text-gray-400 dark:text-gray-500">지역</span> <span className="text-gray-600 dark:text-gray-300">{formatRegion(restaurant.region)}</span>
           </p>
         )}
         {restaurant.price_range && (

frontend/src/components/RestaurantList.tsx

@@ -3,6 +3,7 @@
 import type { Restaurant } from "@/lib/api";
 import { getCuisineIcon } from "@/lib/cuisine-icons";
 import Icon from "@/components/Icon";
+import { formatRegion } from "@/lib/region";
 import { RestaurantListSkeleton } from "@/components/Skeleton";
 
 interface RestaurantListProps {
@@ -51,7 +52,7 @@ export default function RestaurantList({
               {r.name}
             </h4>
             {r.region && (
-              <span className="text-[11px] text-gray-400 dark:text-gray-500 truncate">{r.region}</span>
+              <span className="text-[11px] text-gray-400 dark:text-gray-500 truncate">{formatRegion(r.region)}</span>
             )}
             {r.rating && (
               <span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium whitespace-nowrap shrink-0">★ {r.rating}</span>

frontend/src/lib/region.ts

@@ -0,0 +1,22 @@
+// 지역 표시 유틸 — #532
+// region 은 "나라|시도|구군" 파이프 구분 문자열. 사용자에게는 계층(breadcrumb)으로 보여준다.
+
+/** 표시에서 제외할 더미/무의미 토큰. */
+const DUMMY_TOKENS = new Set(["", "null", "나라"]);
+
+/**
+ * 파이프 구분 region 을 "나라 › 시도 › 구군" 계층 문자열로 변환한다.
+ * 빈 토큰·"null"·더미("나라")는 제거한다. 유효 토큰이 없으면 "".
+ *
+ * 예) "한국|서울|강남구" → "한국 › 서울 › 강남구"
+ *     "일본|null"        → "일본"
+ *     "한국||관악구"      → "한국 › 관악구"
+ */
+export function formatRegion(region: string | null | undefined): string {
+  if (!region) return "";
+  return region
+    .split("|")
+    .map((t) => t.trim())
+    .filter((t) => !DUMMY_TOKENS.has(t.toLowerCase()))
+    .join(" › ");
+}