UI/UX 개선: 모바일 네비게이션, 로그인 모달, 지도 기능, 캐치테이블 연동
- 모바일 하단 네비게이션(홈/식당목록/내주변/찜/내정보) 추가 - 로그인 버튼을 모달 방식으로 변경 (소셜 로그인 확장 가능) - 내위치 기반 정렬 및 영역 필터, 지도 내위치 버튼 추가 - 채널 필터 시 해당 채널만 마커/범례 표시 - 캐치테이블 검색/연동 (단건/벌크), NONE 저장 패턴 - 벌크 트랜스크립트 SSE (Playwright 브라우저 재사용) - 테이블링/캐치테이블 버튼 UI 차별화 - Google Maps 링크 모바일 호환, 초기화 버튼, 검색 라벨 개선 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -84,6 +84,7 @@ export default function RestaurantDetail({
|
||||
|
||||
{restaurant.rating && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-blue-500 dark:text-blue-400 font-medium text-xs">Google</span>
|
||||
<span className="text-yellow-500 dark:text-yellow-400">{"★".repeat(Math.round(restaurant.rating))}</span>
|
||||
<span className="font-medium dark:text-gray-200">{restaurant.rating}</span>
|
||||
{restaurant.rating_count && (
|
||||
@@ -124,7 +125,7 @@ export default function RestaurantDetail({
|
||||
{restaurant.google_place_id && (
|
||||
<p>
|
||||
<a
|
||||
href={`https://www.google.com/maps/place/?q=place_id:${restaurant.google_place_id}`}
|
||||
href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(restaurant.name)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-600 dark:text-orange-400 hover:underline text-xs"
|
||||
@@ -135,6 +136,30 @@ export default function RestaurantDetail({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{restaurant.tabling_url && restaurant.tabling_url !== "NONE" && (
|
||||
<a
|
||||
href={restaurant.tabling_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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"
|
||||
>
|
||||
<span>T</span>
|
||||
<span>테이블링에서 줄서기</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{restaurant.catchtable_url && restaurant.catchtable_url !== "NONE" && (
|
||||
<a
|
||||
href={restaurant.catchtable_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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"
|
||||
>
|
||||
<span>C</span>
|
||||
<span>캐치테이블에서 예약하기</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm mb-2 dark:text-gray-200">관련 영상</h3>
|
||||
{loading ? (
|
||||
@@ -161,7 +186,8 @@ export default function RestaurantDetail({
|
||||
<div key={v.video_id} className="border dark:border-gray-700 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{v.channel_name && (
|
||||
<span className="inline-block px-1.5 py-0.5 bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 rounded text-[10px] font-medium">
|
||||
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400 rounded text-[10px] font-semibold">
|
||||
<span className="text-[9px]">▶</span>
|
||||
{v.channel_name}
|
||||
</span>
|
||||
)}
|
||||
@@ -175,8 +201,11 @@ export default function RestaurantDetail({
|
||||
href={v.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block text-sm font-medium text-orange-600 dark:text-orange-400 hover:underline"
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-red-600 dark:text-red-400 hover:underline"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-4 h-4 flex-shrink-0 fill-current" aria-hidden="true">
|
||||
<path d="M23.5 6.2c-.3-1-1-1.8-2-2.1C19.6 3.5 12 3.5 12 3.5s-7.6 0-9.5.6c-1 .3-1.7 1.1-2 2.1C0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1 1.8 2 2.1 1.9.6 9.5.6 9.5.6s7.6 0 9.5-.6c1-.3 1.7-1.1 2-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.5 15.5V8.5l6.3 3.5-6.3 3.5z"/>
|
||||
</svg>
|
||||
{v.title}
|
||||
</a>
|
||||
{v.foods_mentioned.length > 0 && (
|
||||
|
||||
Reference in New Issue
Block a user