fix(a11y): #301+#302 모달 접근성 + race condition + 필터 상태 동기화
CRITICAL — 모달 접근성: - frontend/src/lib/hooks/useModalA11y.ts 신규 (useEscapeKey, useFocusTrap, useBodyScrollLock) - BottomSheet: role='dialog' / aria-modal / aria-label / ESC 닫기 / focus trap - FilterSheet: role='dialog' / aria-modal / aria-labelledby / ESC 닫기 / focus trap, 닫기 버튼 aria-label MAJOR — race condition (#301): - RestaurantDetail useEffect에 cancelled 플래그 추가 → restaurant.id 변경 시 이전 fetch 결과 폐기 MAJOR — 필터 상태 동기화 (#302): - page.tsx에 exitSearchMode 헬퍼 추가 - 검색 모드(isSearchResult=true)에서 cuisine/price/country/city/district 변경 시 자동으로 검색 모드 해제 + 원본 restaurants 재로드 후속 분리: #319(BottomSheet 매직넘버/UX), #320(필터 정밀도/접근성/테스트) Refs: #301 #302
This commit is contained in:
joungmin
@@ -13,9 +13,10 @@ import RestaurantDetail from "@/components/RestaurantDetail";
|
||||
import MyReviewsList from "@/components/MyReviewsList";
|
||||
import BottomSheet from "@/components/BottomSheet";
|
||||
import FilterSheet, { FilterOption } from "@/components/FilterSheet";
|
||||
import { getCuisineIcon, getTablerCuisineIcon } from "@/lib/cuisine-icons";
|
||||
import { getCuisineIcon, getPhosphorCuisineIcon } from "@/lib/cuisine-icons";
|
||||
import Icon from "@/components/Icon";
|
||||
import * as TablerIcons from "@tabler/icons-react";
|
||||
import FoodIcon from "@/components/FoodIcon";
|
||||
import * as PhosphorIcons from "@phosphor-icons/react";
|
||||
|
||||
function useDragScroll() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
@@ -73,16 +74,24 @@ function matchCuisineFilter(cuisineType: string | null, filter: string): boolean
|
||||
|
||||
const PRICE_GROUPS: { label: string; test: (p: string) => boolean }[] = [
|
||||
{
|
||||
label: "저렴 (~1만원)",
|
||||
test: (p) => /저렴|가성비|착한|만원 이하|[3-9]천원|^\d[,.]?\d*천원/.test(p) || /^[1]만원대$/.test(p) || /^[5-9],?\d{3}원/.test(p),
|
||||
label: "저렴 (~5천원)",
|
||||
test: (p) => /저렴|착한|[3-5]천원대?$|^\d천원$/.test(p),
|
||||
},
|
||||
{
|
||||
label: "가성비 (5천~1만원)",
|
||||
test: (p) => /가성비|만원 이하|[6-9]천원|^1만원대$|^[5-9],?\d{3}원/.test(p),
|
||||
},
|
||||
{
|
||||
label: "보통 (1~3만원)",
|
||||
test: (p) => /[1-2]만원대|1-[23]만|인당 [12]\d?,?\d*원|1[2-9],?\d{3}원|2[0-9],?\d{3}원/.test(p),
|
||||
},
|
||||
{
|
||||
label: "고가 (3만원~)",
|
||||
test: (p) => /[3-9]만원|고가|높은|묵직|살벌|10만원|5만원|4만원|6만원/.test(p),
|
||||
label: "프리미엄 (3~5만원)",
|
||||
test: (p) => /[3-4]만원대?|3-[45]만|인당 [34]\d?,?\d*원|3[0-9],?\d{3}원|4[0-9],?\d{3}원/.test(p),
|
||||
},
|
||||
{
|
||||
label: "럭셔리 (5만원~)",
|
||||
test: (p) => /[5-9]만원|고가|10만원|[1-9]\d만원|인당 [5-9]\d?,?\d*원|5[0-9],?\d{3}원|[6-9][0-9],?\d{3}원/.test(p),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -304,16 +313,18 @@ export default function Home() {
|
||||
api.recordVisit().then(() => api.getVisits().then(setVisits)).catch(console.error);
|
||||
}, []);
|
||||
|
||||
// Load all restaurants on mount
|
||||
// Load restaurants on mount and when channel filter changes
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
setIsSearchResult(false);
|
||||
const params: { limit: number; channel?: string } = { limit: 500 };
|
||||
if (channelFilter) params.channel = channelFilter;
|
||||
api
|
||||
.getRestaurants({ limit: 500 })
|
||||
.getRestaurants(params)
|
||||
.then(setRestaurants)
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
}, [channelFilter]);
|
||||
|
||||
// Auto-select region from user's geolocation (once)
|
||||
useEffect(() => {
|
||||
@@ -393,7 +404,16 @@ export default function Home() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 검색결과 모드에서 필터 변경 시 검색 결과가 무시되는 결함(#302) 해결.
|
||||
// 검색 모드 플래그를 풀고 원본 restaurants를 다시 로드한다.
|
||||
const exitSearchMode = useCallback(() => {
|
||||
setIsSearchResult(false);
|
||||
setResetCount((c) => c + 1);
|
||||
api.getRestaurants({ limit: 500 }).then(setRestaurants).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const handleCountryChange = useCallback((country: string) => {
|
||||
if (isSearchResult) exitSearchMode();
|
||||
setCountryFilter(country);
|
||||
setCityFilter("");
|
||||
setDistrictFilter("");
|
||||
@@ -404,9 +424,10 @@ export default function Home() {
|
||||
return p && p.country === country;
|
||||
});
|
||||
setRegionFlyTo(computeFlyTo(matched));
|
||||
}, [restaurants]);
|
||||
}, [restaurants, isSearchResult, exitSearchMode]);
|
||||
|
||||
const handleCityChange = useCallback((city: string) => {
|
||||
if (isSearchResult) exitSearchMode();
|
||||
setCityFilter(city);
|
||||
setDistrictFilter("");
|
||||
if (!city) {
|
||||
@@ -423,9 +444,10 @@ export default function Home() {
|
||||
return p && p.country === countryFilter && p.city === city;
|
||||
});
|
||||
setRegionFlyTo(computeFlyTo(matched));
|
||||
}, [restaurants, countryFilter]);
|
||||
}, [restaurants, countryFilter, isSearchResult, exitSearchMode]);
|
||||
|
||||
const handleDistrictChange = useCallback((district: string) => {
|
||||
if (isSearchResult) exitSearchMode();
|
||||
setDistrictFilter(district);
|
||||
if (!district) {
|
||||
const matched = restaurants.filter((r) => {
|
||||
@@ -440,7 +462,7 @@ export default function Home() {
|
||||
return p && p.country === countryFilter && p.city === cityFilter && p.district === district;
|
||||
});
|
||||
setRegionFlyTo(computeFlyTo(matched));
|
||||
}, [restaurants, countryFilter, cityFilter]);
|
||||
}, [restaurants, countryFilter, cityFilter, isSearchResult, exitSearchMode]);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
setLoading(true);
|
||||
@@ -789,10 +811,10 @@ export default function Home() {
|
||||
{(cuisineFilter || priceFilter) && (
|
||||
<button
|
||||
onClick={() => { setCuisineFilter(""); setPriceFilter(""); }}
|
||||
className="text-gray-400 hover:text-brand-500 transition-colors"
|
||||
className="p-1.5 -mr-1 text-gray-400 hover:text-brand-500 transition-colors touch-manipulation"
|
||||
title="음식 필터 초기화"
|
||||
>
|
||||
<Icon name="close" size={12} />
|
||||
<Icon name="close" size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -848,10 +870,10 @@ export default function Home() {
|
||||
{countryFilter && (
|
||||
<button
|
||||
onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }}
|
||||
className="text-gray-400 hover:text-brand-500 transition-colors"
|
||||
className="p-1.5 -mr-1 text-gray-400 hover:text-brand-500 transition-colors touch-manipulation"
|
||||
title="지역 필터 초기화"
|
||||
>
|
||||
<Icon name="close" size={12} />
|
||||
<Icon name="close" size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -867,9 +889,9 @@ export default function Home() {
|
||||
setDistrictFilter("");
|
||||
setRegionFlyTo(null);
|
||||
}}
|
||||
className="flex items-center gap-1 rounded-lg px-2 py-1 bg-gray-50 dark:bg-gray-800/50 text-gray-500 dark:text-gray-400 hover:text-brand-500 transition-colors"
|
||||
className="flex items-center gap-1 rounded-lg px-2.5 py-1.5 bg-gray-50 dark:bg-gray-800/50 text-gray-500 dark:text-gray-400 hover:text-brand-500 transition-colors touch-manipulation"
|
||||
>
|
||||
<Icon name="close" size={12} />
|
||||
<Icon name="close" size={14} />
|
||||
<span>전체보기</span>
|
||||
</button>
|
||||
)}
|
||||
@@ -999,10 +1021,10 @@ export default function Home() {
|
||||
<div ref={dg.ref} onMouseDown={dg.onMouseDown} onMouseMove={dg.onMouseMove} onMouseUp={dg.onMouseUp} onMouseLeave={dg.onMouseLeave} onClickCapture={dg.onClickCapture} style={dg.style} className="flex gap-2 overflow-x-auto scrollbar-hide -mx-1 px-1 pb-1 select-none">
|
||||
{(() => {
|
||||
const allCards = [
|
||||
{ label: "전체", value: "", icon: "Bowl" },
|
||||
{ label: "전체", value: "", icon: "ForkKnife" },
|
||||
...CUISINE_TAXONOMY.flatMap((g) => [
|
||||
{ label: g.category, value: g.category, icon: getTablerCuisineIcon(g.category) },
|
||||
...g.items.map((item) => ({ label: item, value: `${g.category}|${item}`, icon: getTablerCuisineIcon(`${g.category}|${item}`) })),
|
||||
{ label: g.category, value: g.category, icon: getPhosphorCuisineIcon(g.category) },
|
||||
...g.items.map((item) => ({ label: item, value: `${g.category}|${item}`, icon: getPhosphorCuisineIcon(`${g.category}|${item}`) })),
|
||||
]),
|
||||
];
|
||||
return allCards.map((card) => {
|
||||
@@ -1012,7 +1034,7 @@ export default function Home() {
|
||||
: isCategory
|
||||
? cuisineFilter === card.value || cuisineFilter.startsWith(card.value + "|")
|
||||
: cuisineFilter === card.value;
|
||||
const TablerIcon = (TablerIcons as unknown as Record<string, React.ComponentType<{ size?: number; stroke?: number; className?: string }>>)[`Icon${card.icon}`] || TablerIcons.IconBowl;
|
||||
const PhIcon = (PhosphorIcons as unknown as Record<string, React.ComponentType<{ size?: number; weight?: string; className?: string }>>)[card.icon] || PhosphorIcons.ForkKnife;
|
||||
return (
|
||||
<button
|
||||
key={card.value || "__all__"}
|
||||
@@ -1029,7 +1051,11 @@ export default function Home() {
|
||||
: "bg-white border border-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<TablerIcon size={22} stroke={1.5} className={selected ? "text-white" : isCategory ? "text-brand-500" : "text-gray-400"} />
|
||||
{card.icon.startsWith("food:") ? (
|
||||
<FoodIcon name={card.icon.slice(5)} size={22} className={selected ? "text-white" : isCategory ? "text-brand-500" : "text-gray-400"} />
|
||||
) : (
|
||||
<PhIcon size={22} className={selected ? "text-white" : isCategory ? "text-brand-500" : "text-gray-400"} />
|
||||
)}
|
||||
<span className={`text-[11px] whitespace-nowrap ${isCategory ? "font-semibold" : "font-medium"}`}>{card.label}</span>
|
||||
</button>
|
||||
);
|
||||
@@ -1459,7 +1485,7 @@ export default function Home() {
|
||||
title="음식 장르"
|
||||
options={cuisineOptions}
|
||||
value={cuisineFilter}
|
||||
onChange={(v) => { setCuisineFilter(v); if (v) setBoundsFilterOn(false); }}
|
||||
onChange={(v) => { if (isSearchResult) exitSearchMode(); setCuisineFilter(v); if (v) setBoundsFilterOn(false); }}
|
||||
/>
|
||||
<FilterSheet
|
||||
open={openSheet === "price"}
|
||||
@@ -1467,7 +1493,7 @@ export default function Home() {
|
||||
title="가격대"
|
||||
options={priceOptions}
|
||||
value={priceFilter}
|
||||
onChange={(v) => { setPriceFilter(v); if (v) setBoundsFilterOn(false); }}
|
||||
onChange={(v) => { if (isSearchResult) exitSearchMode(); setPriceFilter(v); if (v) setBoundsFilterOn(false); }}
|
||||
/>
|
||||
<FilterSheet
|
||||
open={openSheet === "country"}
|
||||
|
||||
Reference in New Issue
Block a user