From a766a74f20b6584086abd8586655e8d663943ce7 Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Thu, 12 Mar 2026 20:04:32 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20+=20=EB=82=B4=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=A4=8C=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/app/page.tsx                  |  2 +-
 frontend/src/components/RestaurantList.tsx | 57 ++++++++++++----------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 50388b5..e615291 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -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 },
diff --git a/frontend/src/components/RestaurantList.tsx b/frontend/src/components/RestaurantList.tsx
index f634754..a9aca30 100644
--- a/frontend/src/components/RestaurantList.tsx
+++ b/frontend/src/components/RestaurantList.tsx
@@ -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>