a766a74f20
- 식당명/지역/별점 1줄, 종류+가격(왼)+유튜브채널(우) 2줄, 태그 3줄 배치 - 가격대: 종류가 공간 우선 차지, 나머지에서 truncate - 내위치 줌 16→17로 조정 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import type { Restaurant } from "@/lib/api";
|
|
import { getCuisineIcon } from "@/lib/cuisine-icons";
|
|
import Icon from "@/components/Icon";
|
|
import { RestaurantListSkeleton } from "@/components/Skeleton";
|
|
|
|
interface RestaurantListProps {
|
|
restaurants: Restaurant[];
|
|
selectedId?: string;
|
|
onSelect: (r: Restaurant) => void;
|
|
loading?: boolean;
|
|
keyPrefix?: string;
|
|
}
|
|
|
|
export default function RestaurantList({
|
|
restaurants,
|
|
selectedId,
|
|
onSelect,
|
|
loading,
|
|
keyPrefix = "",
|
|
}: RestaurantListProps) {
|
|
if (loading) {
|
|
return <RestaurantListSkeleton />;
|
|
}
|
|
|
|
if (!restaurants.length) {
|
|
return (
|
|
<div className="p-4 text-center text-gray-500 dark:text-gray-400 text-sm">
|
|
표시할 식당이 없습니다
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-3 space-y-2">
|
|
{restaurants.map((r) => (
|
|
<button
|
|
key={`${keyPrefix}${r.id}`}
|
|
onClick={() => onSelect(r)}
|
|
className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${
|
|
selectedId === r.id
|
|
? "bg-brand-50 dark:bg-brand-900/20 border-brand-300 dark:border-brand-700 shadow-brand-100 dark:shadow-brand-900/10"
|
|
: "bg-surface border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
|
|
}`}
|
|
>
|
|
{/* 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>
|
|
)}
|
|
</div>
|
|
{/* 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>
|
|
{/* 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) => (
|
|
<span
|
|
key={i}
|
|
className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-400 rounded text-[10px]"
|
|
>
|
|
{f}
|
|
</span>
|
|
))}
|
|
{r.foods_mentioned.length > 5 && (
|
|
<span className="text-[10px] text-gray-500">+{r.foods_mentioned.length - 5}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|