joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모바일 리스트 레이아웃 개선 + 내위치 줌 조정

Browse Source 
- 식당명/지역/별점 1줄, 종류+가격(왼)+유튜브채널(우) 2줄, 태그 3줄 배치
- 가격대: 종류가 공간 우선 차지, 나머지에서 truncate
- 내위치 줌 16→17로 조정

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-12 20:04:32 +09:00
parent 4b1f7c13b7
commit a766a74f20
2 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/page.tsx
View File

@@ -344,7 +344,7 @@ export default function Home() {
navigator.geolocation.getCurrentPosition(
(pos) => {
setUserLoc({ lat: pos.coords.latitude, lng: pos.coords.longitude });
setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 16 });
setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 17 });
},
() => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 16 }),
{ timeout: 5000 },

57
frontend/src/components/RestaurantList.tsx
View File

@@ -44,28 +44,44 @@ export default function RestaurantList({
: "bg-surface border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
}`}
>
<div className="flex items-start justify-between gap-2">
<h4 className="font-bold text-[15px] text-gray-900 dark:text-gray-100">
{/* 1줄: 식당명 + 지역 + 별점 (전체 폭) */}
<div className="flex items-baseline gap-1.5 flex-wrap">
<h4 className="font-bold text-[15px] text-gray-900 dark:text-gray-100 shrink-0">
<Icon name={getCuisineIcon(r.cuisine_type)} size={16} className="mr-0.5 text-brand-600" />
{r.name}
</h4>
{r.region && (
<span className="text-[11px] text-gray-400 dark:text-gray-500 truncate">{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>
<span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium whitespace-nowrap shrink-0">★ {r.rating}</span>
)}
</div>
<div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs">
{r.cuisine_type && (
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400">{r.cuisine_type}</span>
)}
{r.price_range && (
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400">{r.price_range}</span>
{/* 2줄: 종류/가격(왼) + 유튜브채널(우) */}
<div className="flex items-center gap-2 mt-1.5">
<div className="flex gap-x-2 text-xs flex-1 min-w-0">
{r.cuisine_type && (
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400 shrink-0">{r.cuisine_type}</span>
)}
{r.price_range && (
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400 truncate min-w-0">{r.price_range}</span>
)}
</div>
{r.channels && r.channels.length > 0 && (
<div className="shrink-0 flex flex-wrap gap-1 justify-end">
{r.channels.map((ch) => (
<span
key={ch}
className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 rounded-full text-[10px] font-medium truncate max-w-[120px]"
>
<Icon name="play_circle" size={11} filled className="shrink-0 text-red-400" />
<span className="truncate">{ch}</span>
</span>
))}
</div>
)}
</div>
{r.region && (
<p className="mt-1 text-[11px] text-gray-400 dark:text-gray-500 truncate">{r.region}</p>
)}
{/* 3줄: 태그 (전체 폭) */}
{r.foods_mentioned && r.foods_mentioned.length > 0 && (
<div className="flex flex-wrap gap-1 mt-1.5">
{r.foods_mentioned.slice(0, 5).map((f, i) => (
@@ -81,19 +97,6 @@ export default function RestaurantList({
)}
</div>
)}
{r.channels && r.channels.length > 0 && (
<div className="flex flex-wrap gap-1 mt-1">
{r.channels.map((ch) => (
<span
key={ch}
className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 rounded-full text-[10px] font-medium"
>
<Icon name="play_circle" size={11} filled className="shrink-0 text-red-400" />
{ch}
</span>
))}
</div>
)}
</button>
))}
</div>