From c13b976ca3b5b487861c8c936f77785981f1ef36 Mon Sep 17 00:00:00 2001 From: joungmin Date: Mon, 27 Jul 2026 13:54:45 +0900 Subject: [PATCH] =?UTF-8?q?[Designer]=20#532=20=EC=A7=80=EC=97=AD=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EB=B9=88=20=EB=B0=B0=EC=A7=80=20=EB=B0=A9?= =?UTF-8?q?=EC=A7=80=20=E2=80=94=20=EB=A0=8C=EB=8D=94=20=EA=B0=80=EB=93=9C?= =?UTF-8?q?=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit RestaurantList.tsx/RestaurantDetail.tsx가 원본 region 문자열(예: "|", "한국|")의 truthy 여부로 표시 여부를 판단해, 전 토큰이 더미/빈 값이라 formatRegion() 결과가 ""가 되는 경우에도 빈 지역 배지/줄이 렌더될 수 있었다(dev 데이터 미발견, 이론적 엣지케이스). 가드를 formatRegion(region) 결과 기준으로 변경. formatRegion() 자체 로직/시그니처는 변경 없음 — 표현(호출부 조건)만 다듬음. 설계서(docs/design/532-region-display/README.md) 갱신: 가드 방식 및 근거 명시. Refs #532 --- CHANGELOG.md | 9 ++++----- docs/design/532-region-display/README.md | 5 ++++- frontend/src/components/RestaurantDetail.tsx | 8 +++----- frontend/src/components/RestaurantList.tsx | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b7737c..3f8b841 100644 --- a/CHANGELOG.md +++ b/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 해외 식당 예약 버튼 숨김 — 검증 통과 diff --git a/docs/design/532-region-display/README.md b/docs/design/532-region-display/README.md index 3888270..6f6535b 100644 --- a/docs/design/532-region-display/README.md +++ b/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) &&` 가드로 `""`이면 미표시. - 단일 토큰(`"한국"`) → `한국` 그대로. ## 검증 diff --git a/frontend/src/components/RestaurantDetail.tsx b/frontend/src/components/RestaurantDetail.tsx index 4215c8d..378d8f5 100644 --- a/frontend/src/components/RestaurantDetail.tsx +++ b/frontend/src/components/RestaurantDetail.tsx @@ -128,7 +128,7 @@ export default function RestaurantDetail({ 주소 {restaurant.address}

)} - {restaurant.region && ( + {formatRegion(restaurant.region) && (

지역 {formatRegion(restaurant.region)}

@@ -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" > - + T 테이블링에서 줄서기 )} @@ -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" > - + C 캐치테이블에서 예약하기 )} diff --git a/frontend/src/components/RestaurantList.tsx b/frontend/src/components/RestaurantList.tsx index 5431891..7daba06 100644 --- a/frontend/src/components/RestaurantList.tsx +++ b/frontend/src/components/RestaurantList.tsx @@ -51,7 +51,7 @@ export default function RestaurantList({ {r.name} - {r.region && ( + {formatRegion(r.region) && ( {formatRegion(r.region)} )} {r.rating && (