UX improvements: mobile bottom sheet, cuisine taxonomy, search enhancements

- Add BottomSheet component for Google Maps-style restaurant detail on mobile
  (3-snap drag: 40%/55%/92%, velocity-based close, backdrop overlay)
- Mobile map mode now full-screen with bottom sheet overlay for details
- Collapsible filter panel on mobile with active filter badge count
- Standardized cuisine taxonomy (46 categories: 한식|국밥, 일식|스시 etc.)
  with LLM remap endpoint and admin UI button
- Enhanced search: keyword search now includes foods_mentioned + video title
- Search results include channels array for frontend filtering
- Channel filter moved to frontend filteredRestaurants (not API-level)
- LLM extraction prompt updated for pipe-delimited region + cuisine taxonomy
- Vector rebuild endpoint with rich JSON chunks per restaurant
- Geolocation-based auto region selection on page load
- Desktop filters split into two clean rows

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/app/admin/page.tsx

@@ -2,24 +2,48 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { api } from "@/lib/api";
-import type { Channel, Video, VideoDetail, VideoLink, Restaurant } from "@/lib/api";
+import type { Channel, Video, VideoDetail, VideoLink, Restaurant, DaemonConfig } from "@/lib/api";
+import { useAuth } from "@/lib/auth-context";
 
-type Tab = "channels" | "videos" | "restaurants" | "users";
+type Tab = "channels" | "videos" | "restaurants" | "users" | "daemon";
 
 export default function AdminPage() {
   const [tab, setTab] = useState<Tab>("channels");
+  const { user, isLoading } = useAuth();
+
+  const isAdmin = user?.is_admin === true;
+
+  if (isLoading) {
+    return <div className="min-h-screen bg-gray-50 flex items-center justify-center text-gray-500">로딩 중...</div>;
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-gray-600 mb-4">로그인이 필요합니다</p>
+          <a href="/" className="text-blue-600 hover:underline">메인으로 돌아가기</a>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-gray-50">
       <header className="bg-white border-b px-6 py-4">
         <div className="flex items-center justify-between">
-          <h1 className="text-xl font-bold">Tasteby Admin</h1>
+          <div className="flex items-center gap-3">
+            <h1 className="text-xl font-bold">Tasteby Admin</h1>
+            {!isAdmin && (
+              <span className="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">읽기 전용</span>
+            )}
+          </div>
           <a href="/" className="text-sm text-blue-600 hover:underline">
             &larr; 메인으로
           </a>
         </div>
         <nav className="mt-3 flex gap-1">
-          {(["channels", "videos", "restaurants", "users"] as Tab[]).map((t) => (
+          {(["channels", "videos", "restaurants", "users", "daemon"] as Tab[]).map((t) => (
             <button
               key={t}
               onClick={() => setTab(t)}
@@ -29,24 +53,25 @@ export default function AdminPage() {
                   : "bg-gray-200 text-gray-700 hover:bg-gray-300"
               }`}
             >
-              {t === "channels" ? "채널 관리" : t === "videos" ? "영상 관리" : t === "restaurants" ? "식당 관리" : "유저 관리"}
+              {t === "channels" ? "채널 관리" : t === "videos" ? "영상 관리" : t === "restaurants" ? "식당 관리" : t === "users" ? "유저 관리" : "데몬 설정"}
             </button>
           ))}
         </nav>
       </header>
 
       <main className="max-w-6xl mx-auto p-6">
-        {tab === "channels" && <ChannelsPanel />}
-        {tab === "videos" && <VideosPanel />}
-        {tab === "restaurants" && <RestaurantsPanel />}
+        {tab === "channels" && <ChannelsPanel isAdmin={isAdmin} />}
+        {tab === "videos" && <VideosPanel isAdmin={isAdmin} />}
+        {tab === "restaurants" && <RestaurantsPanel isAdmin={isAdmin} />}
         {tab === "users" && <UsersPanel />}
+        {tab === "daemon" && <DaemonPanel isAdmin={isAdmin} />}
       </main>
     </div>
   );
 }
 
 /* ─── 채널 관리 ─── */
-function ChannelsPanel() {
+function ChannelsPanel({ isAdmin }: { isAdmin: boolean }) {
   const [channels, setChannels] = useState<Channel[]>([]);
   const [newId, setNewId] = useState("");
   const [newName, setNewName] = useState("");
@@ -101,7 +126,7 @@ function ChannelsPanel() {
 
   return (
     <div>
-      <div className="bg-white rounded-lg shadow p-4 mb-6">
+      {isAdmin && <div className="bg-white rounded-lg shadow p-4 mb-6">
         <h2 className="font-semibold mb-3">채널 추가</h2>
         <div className="flex gap-2">
           <input
@@ -130,7 +155,7 @@ function ChannelsPanel() {
             추가
           </button>
         </div>
-      </div>
+      </div>}
 
       <div className="bg-white rounded-lg shadow">
         <table className="w-full text-sm">
@@ -139,7 +164,9 @@ function ChannelsPanel() {
               <th className="text-left px-4 py-3">채널 이름</th>
               <th className="text-left px-4 py-3">Channel ID</th>
               <th className="text-left px-4 py-3">제목 필터</th>
-              <th className="text-left px-4 py-3">액션</th>
+              <th className="text-right px-4 py-3">영상 수</th>
+              <th className="text-left px-4 py-3">마지막 스캔</th>
+              {isAdmin && <th className="text-left px-4 py-3">액션</th>}
               <th className="text-left px-4 py-3">스캔 결과</th>
             </tr>
           </thead>
@@ -159,7 +186,17 @@ function ChannelsPanel() {
                     <span className="text-gray-400 text-xs">전체</span>
                   )}
                 </td>
-                <td className="px-4 py-3 flex gap-3">
+                <td className="px-4 py-3 text-right font-medium">
+                  {ch.video_count > 0 ? (
+                    <span className="px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs">{ch.video_count}개</span>
+                  ) : (
+                    <span className="text-gray-400 text-xs">0</span>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-xs text-gray-500">
+                  {ch.last_scanned_at ? ch.last_scanned_at.slice(0, 16).replace("T", " ") : "-"}
+                </td>
+                {isAdmin && <td className="px-4 py-3 flex gap-3">
                   <button
                     onClick={() => handleScan(ch.channel_id)}
                     className="text-blue-600 hover:underline text-sm"
@@ -178,7 +215,7 @@ function ChannelsPanel() {
                   >
                     삭제
                   </button>
-                </td>
+                </td>}
                 <td className="px-4 py-3 text-gray-600">
                   {scanResult[ch.channel_id] || "-"}
                 </td>
@@ -186,7 +223,7 @@ function ChannelsPanel() {
             ))}
             {channels.length === 0 && (
               <tr>
-                <td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                <td colSpan={7} className="px-4 py-8 text-center text-gray-400">
                   등록된 채널이 없습니다
                 </td>
               </tr>
@@ -201,7 +238,7 @@ function ChannelsPanel() {
 /* ─── 영상 관리 ─── */
 type VideoSortKey = "status" | "channel_name" | "title" | "published_at";
 
-function VideosPanel() {
+function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
   const [videos, setVideos] = useState<Video[]>([]);
   const [channels, setChannels] = useState<Channel[]>([]);
   const [channelFilter, setChannelFilter] = useState("");
@@ -241,6 +278,10 @@ function VideosPanel() {
   const [manualAdding, setManualAdding] = useState(false);
   const [bulkExtracting, setBulkExtracting] = useState(false);
   const [bulkTranscripting, setBulkTranscripting] = useState(false);
+  const [rebuildingVectors, setRebuildingVectors] = useState(false);
+  const [vectorProgress, setVectorProgress] = useState<{ phase: string; current: number; total: number; name?: string } | null>(null);
+  const [remappingCuisine, setRemappingCuisine] = useState(false);
+  const [remapProgress, setRemapProgress] = useState<{ current: number; total: number; updated: number } | null>(null);
   const [bulkProgress, setBulkProgress] = useState<{
     label: string;
     total: number;
@@ -256,7 +297,7 @@ function VideosPanel() {
 
   const load = useCallback((reset = true) => {
     api
-      .getVideos({ status: statusFilter || undefined, limit: 500 })
+      .getVideos({ status: statusFilter || undefined })
       .then((data) => {
         setVideos(data);
         if (reset) {
@@ -375,7 +416,16 @@ function VideosPanel() {
 
       const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
       const endpoint = isTranscript ? "/api/videos/bulk-transcript" : "/api/videos/bulk-extract";
-      const resp = await fetch(`${apiBase}${endpoint}`, { method: "POST" });
+      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
+      const headers: Record<string, string> = {};
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const resp = await fetch(`${apiBase}${endpoint}`, { method: "POST", headers });
+      if (!resp.ok) {
+        alert(`벌크 요청 실패: ${resp.status} ${resp.statusText}`);
+        setRunning(false);
+        setBulkProgress(null);
+        return;
+      }
       const reader = resp.body?.getReader();
       const decoder = new TextDecoder();
       if (!reader) { setRunning(false); return; }
@@ -416,6 +466,96 @@ function VideosPanel() {
     }
   };
 
+  const startRebuildVectors = async () => {
+    if (!confirm("전체 식당 벡터를 재생성합니다. 진행하시겠습니까?")) return;
+    setRebuildingVectors(true);
+    setVectorProgress(null);
+    try {
+      const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
+      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
+      const headers: Record<string, string> = {};
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const resp = await fetch(`${apiBase}/api/videos/rebuild-vectors`, { method: "POST", headers });
+      if (!resp.ok) {
+        alert(`벡터 재생성 실패: ${resp.status}`);
+        setRebuildingVectors(false);
+        return;
+      }
+      const reader = resp.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) { setRebuildingVectors(false); return; }
+      let buf = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop() || "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          try {
+            const ev = JSON.parse(line.slice(6));
+            if (ev.status === "progress" || ev.type === "progress") {
+              setVectorProgress({ phase: ev.phase, current: ev.current, total: ev.total, name: ev.name });
+            } else if (ev.status === "done" || ev.type === "done") {
+              setVectorProgress({ phase: "done", current: ev.total, total: ev.total });
+            } else if (ev.type === "error") {
+              alert(`벡터 재생성 오류: ${ev.message}`);
+            }
+          } catch { /* ignore */ }
+        }
+      }
+      setRebuildingVectors(false);
+    } catch {
+      setRebuildingVectors(false);
+    }
+  };
+
+  const startRemapCuisine = async () => {
+    if (!confirm("전체 식당의 음식 종류를 LLM으로 재분류합니다. 진행하시겠습니까?")) return;
+    setRemappingCuisine(true);
+    setRemapProgress(null);
+    try {
+      const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
+      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
+      const headers: Record<string, string> = {};
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const resp = await fetch(`${apiBase}/api/videos/remap-cuisine`, { method: "POST", headers });
+      if (!resp.ok) {
+        alert(`음식 종류 재분류 실패: ${resp.status}`);
+        setRemappingCuisine(false);
+        return;
+      }
+      const reader = resp.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) { setRemappingCuisine(false); return; }
+      let buf = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop() || "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          try {
+            const ev = JSON.parse(line.slice(6));
+            if (ev.type === "processing" || ev.type === "batch_done") {
+              setRemapProgress({ current: ev.current, total: ev.total, updated: ev.updated || 0 });
+            } else if (ev.type === "complete") {
+              setRemapProgress({ current: ev.total, total: ev.total, updated: ev.updated });
+            } else if (ev.type === "error") {
+              alert(`재분류 오류: ${ev.message}`);
+            }
+          } catch { /* ignore */ }
+        }
+      }
+      setRemappingCuisine(false);
+    } catch {
+      setRemappingCuisine(false);
+    }
+  };
+
   const handleSort = (key: VideoSortKey) => {
     if (sortKey === key) {
       setSortAsc(!sortAsc);
@@ -512,7 +652,7 @@ function VideosPanel() {
           ) : (
             <button
               type="button"
-              onClick={() => { setDetail(null); setEditingRestIdx(null); setEditRest(null); load(); }}
+              onClick={() => { setEditingRestIdx(null); setEditRest(null); load(false); if (detail) { api.getVideoDetail(detail.id).then(setDetail).catch(() => {}); } }}
               className="border rounded-r px-3 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100 cursor-pointer relative z-10"
               title="새로고침"
             >
@@ -520,6 +660,7 @@ function VideosPanel() {
             </button>
           )}
         </div>
+        {isAdmin && <>
         <button
           type="button"
           onClick={handleProcess}
@@ -542,10 +683,25 @@ function VideosPanel() {
         >
           {bulkExtracting ? "벌크 추출 중..." : "벌크 LLM 추출"}
         </button>
+        <button
+          onClick={startRebuildVectors}
+          disabled={rebuildingVectors || bulkExtracting || bulkTranscripting}
+          className="bg-teal-600 text-white px-4 py-2 rounded text-sm hover:bg-teal-700 disabled:opacity-50"
+        >
+          {rebuildingVectors ? "벡터 재생성 중..." : "벡터 재생성"}
+        </button>
+        <button
+          onClick={startRemapCuisine}
+          disabled={remappingCuisine || bulkExtracting || bulkTranscripting || rebuildingVectors}
+          className="bg-amber-600 text-white px-4 py-2 rounded text-sm hover:bg-amber-700 disabled:opacity-50"
+        >
+          {remappingCuisine ? "음식분류 중..." : "음식종류 재분류"}
+        </button>
+        </>}
         {processResult && (
           <span className="text-sm text-gray-600">{processResult}</span>
         )}
-        {selected.size > 0 && (
+        {isAdmin && selected.size > 0 && (
           <>
             <button
               onClick={handleBulkSkip}
@@ -605,7 +761,7 @@ function VideosPanel() {
               >
                 게시일{sortIcon("published_at")}
               </th>
-              <th className="text-left px-4 py-3 whitespace-nowrap">액션</th>
+              {isAdmin && <th className="text-left px-4 py-3 whitespace-nowrap">액션</th>}
             </tr>
           </thead>
           <tbody>
@@ -629,12 +785,13 @@ function VideosPanel() {
                   </span>
                 </td>
                 <td className="px-4 py-3 text-gray-600">{v.channel_name}</td>
-                <td className="px-4 py-3">
+                <td className="px-4 py-3 max-w-[300px]">
                   <button
                     onClick={() => handleSelectVideo(v)}
-                    className={`text-left text-sm hover:underline ${
+                    className={`text-left text-sm hover:underline truncate block max-w-full ${
                       detail?.id === v.id ? "text-blue-800 font-semibold" : "text-blue-600"
                     }`}
+                    title={v.title}
                   >
                     {v.title}
                   </button>
@@ -668,7 +825,7 @@ function VideosPanel() {
                 <td className="px-4 py-3 text-gray-500 whitespace-nowrap">
                   {v.published_at?.slice(0, 10) || "-"}
                 </td>
-                <td className="px-4 py-3 whitespace-nowrap flex gap-3">
+                {isAdmin && <td className="px-4 py-3 whitespace-nowrap flex gap-3">
                   {v.status === "pending" && (
                     <button
                       onClick={() => handleSkip(v.id)}
@@ -683,7 +840,7 @@ function VideosPanel() {
                   >
                     삭제
                   </button>
-                </td>
+                </td>}
               </tr>
             ))}
             {videos.length === 0 && (
@@ -733,6 +890,43 @@ function VideosPanel() {
         </div>
       )}
 
+      {/* 음식종류 재분류 진행 */}
+      {remapProgress && (
+        <div className="mt-4 bg-white rounded-lg shadow p-4">
+          <h4 className="font-semibold text-sm mb-2">
+            음식종류 재분류 {remapProgress.current >= remapProgress.total ? "완료" : "진행 중"}
+          </h4>
+          <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
+            <div
+              className="bg-amber-500 h-2 rounded-full transition-all"
+              style={{ width: `${remapProgress.total ? (remapProgress.current / remapProgress.total) * 100 : 0}%` }}
+            />
+          </div>
+          <p className="text-xs text-gray-500">
+            {remapProgress.current}/{remapProgress.total} — {remapProgress.updated}개 업데이트
+          </p>
+        </div>
+      )}
+
+      {/* 벡터 재생성 진행 */}
+      {vectorProgress && (
+        <div className="mt-4 bg-white rounded-lg shadow p-4">
+          <h4 className="font-semibold text-sm mb-2">
+            벡터 재생성 {vectorProgress.phase === "done" ? "완료" : `(${vectorProgress.phase === "prepare" ? "데이터 준비" : "임베딩 저장"})`}
+          </h4>
+          <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
+            <div
+              className="bg-teal-500 h-2 rounded-full transition-all"
+              style={{ width: `${vectorProgress.total ? (vectorProgress.current / vectorProgress.total) * 100 : 0}%` }}
+            />
+          </div>
+          <p className="text-xs text-gray-500">
+            {vectorProgress.current}/{vectorProgress.total}
+            {vectorProgress.name && ` — ${vectorProgress.name}`}
+          </p>
+        </div>
+      )}
+
       {/* 벌크 진행 패널 */}
       {bulkProgress && (
         <div className="mt-4 bg-white rounded-lg shadow p-4">
@@ -822,9 +1016,9 @@ function VideosPanel() {
               </div>
             ) : (
               <h3
-                className="font-semibold text-base cursor-pointer hover:text-blue-600"
-                onClick={() => { setEditTitle(detail.title); setEditingTitle(true); }}
-                title="클릭하여 제목 수정"
+                className={`font-semibold text-base ${isAdmin ? "cursor-pointer hover:text-blue-600" : ""}`}
+                onClick={isAdmin ? () => { setEditTitle(detail.title); setEditingTitle(true); } : undefined}
+                title={isAdmin ? "클릭하여 제목 수정" : undefined}
               >
                 {detail.title}
               </h3>
@@ -871,7 +1065,7 @@ function VideosPanel() {
                 <h4 className="font-semibold text-sm">
                   추출된 식당 ({detail.restaurants.length})
                 </h4>
-                {detail.transcript && (
+                {isAdmin && detail.transcript && (
                   <>
                     <button
                       onClick={async () => {
@@ -909,12 +1103,12 @@ function VideosPanel() {
                     </button>
                   </>
                 )}
-                <button
+                {isAdmin && <button
                   onClick={() => setShowManualAdd(!showManualAdd)}
                   className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700"
                 >
                   {showManualAdd ? "수동 추가 닫기" : "수동 추가"}
-                </button>
+                </button>}
               </div>
               {showManualAdd && (
                 <div className="border rounded p-3 mb-3 bg-green-50 space-y-2">
@@ -1064,7 +1258,7 @@ function VideosPanel() {
                                     setDetail(d);
                                     setEditingRestIdx(null);
                                     setEditRest(null);
-                                  } catch { alert("저장 실패"); }
+                                  } catch (e) { alert("저장 실패: " + (e instanceof Error ? e.message : String(e))); }
                                   finally { setSaving(false); }
                                 }}
                                 disabled={saving}
@@ -1082,8 +1276,8 @@ function VideosPanel() {
                           </div>
                         ) : (
                           <div
-                            className="cursor-pointer hover:bg-gray-50 -m-3 p-3 rounded group"
-                            onClick={() => {
+                            className={`${isAdmin ? "cursor-pointer hover:bg-gray-50" : ""} -m-3 p-3 rounded group`}
+                            onClick={isAdmin ? () => {
                               let evalText = "";
                               if (typeof r.evaluation === "object" && r.evaluation) {
                                 if (r.evaluation.text) {
@@ -1107,8 +1301,8 @@ function VideosPanel() {
                                 price_range: r.price_range || "",
                                 guests: r.guests.join(", "),
                               });
-                            }}
-                            title="클릭하여 수정"
+                            } : undefined}
+                            title={isAdmin ? "클릭하여 수정" : undefined}
                           >
                             <div className="flex items-center justify-between">
                               <div className="flex items-center gap-2">
@@ -1121,7 +1315,7 @@ function VideosPanel() {
                                   <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-600">미매칭</span>
                                 )}
                               </div>
-                              <button
+                              {isAdmin && <button
                                 onClick={async (e) => {
                                   e.stopPropagation();
                                   if (!confirm(`"${r.name}" 식당 매핑을 삭제하시겠습니까?`)) return;
@@ -1135,7 +1329,7 @@ function VideosPanel() {
                                 className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 text-xs px-1.5 py-0.5 rounded hover:bg-red-50 transition-opacity"
                               >
                                 삭제
-                              </button>
+                              </button>}
                             </div>
                             <div className="text-xs text-gray-500 mt-1 space-y-0.5">
                               {r.address && <p>주소: {r.address}</p>}
@@ -1172,6 +1366,7 @@ function VideosPanel() {
               {editingRestIdx === null && <div>
                 <div className="flex items-center gap-2 mb-2">
                   <h4 className="font-semibold text-sm">트랜스크립트</h4>
+                  {isAdmin && <>
                   <select
                     value={transcriptMode}
                     onChange={(e) => setTranscriptMode(e.target.value as "auto" | "manual" | "generated")}
@@ -1200,6 +1395,7 @@ function VideosPanel() {
                   >
                     {fetchingTranscript ? "가져오는 중..." : detail.transcript ? "다시 가져오기" : "트랜스크립트 가져오기"}
                   </button>
+                  </>}
                 </div>
                 {detail.transcript ? (
                   <pre className="text-xs text-gray-700 bg-gray-50 rounded p-3 whitespace-pre-wrap leading-relaxed max-h-[200px] overflow-y-auto">
@@ -1218,7 +1414,7 @@ function VideosPanel() {
 }
 
 /* ─── 식당 관리 ─── */
-function RestaurantsPanel() {
+function RestaurantsPanel({ isAdmin }: { isAdmin: boolean }) {
   const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
   const [loading, setLoading] = useState(false);
   const [page, setPage] = useState(0);
@@ -1301,8 +1497,8 @@ function RestaurantsPanel() {
       await api.updateRestaurant(selected.id, data as Partial<Restaurant>);
       load();
       setSelected(null);
-    } catch {
-      alert("저장 실패");
+    } catch (e) {
+      alert("저장 실패: " + (e instanceof Error ? e.message : String(e)));
     } finally {
       setSaving(false);
     }
@@ -1439,6 +1635,7 @@ function RestaurantsPanel() {
                   value={editForm[key] || ""}
                   onChange={(e) => setEditForm((f) => ({ ...f, [key]: e.target.value }))}
                   className="w-full border rounded px-2 py-1.5 text-sm"
+                  disabled={!isAdmin}
                 />
               </div>
             ))}
@@ -1481,25 +1678,25 @@ function RestaurantsPanel() {
           )}
 
           <div className="flex gap-2 mt-4">
-            <button
+            {isAdmin && <button
               onClick={handleSave}
               disabled={saving}
               className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
             >
               {saving ? "저장 중..." : "저장"}
-            </button>
+            </button>}
             <button
               onClick={() => setSelected(null)}
               className="px-4 py-2 text-sm border rounded text-gray-600 hover:bg-gray-100"
             >
-              취소
+              {isAdmin ? "취소" : "닫기"}
             </button>
-            <button
+            {isAdmin && <button
               onClick={handleDelete}
               className="px-4 py-2 text-sm text-red-500 border border-red-200 rounded hover:bg-red-50 ml-auto"
             >
               식당 삭제
-            </button>
+            </button>}
           </div>
         </div>
       )}
@@ -1796,3 +1993,229 @@ function UsersPanel() {
     </div>
   );
 }
+
+/* ─── 데몬 설정 ─── */
+function DaemonPanel({ isAdmin }: { isAdmin: boolean }) {
+  const [config, setConfig] = useState<DaemonConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [running, setRunning] = useState<string | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+
+  // Editable fields
+  const [scanEnabled, setScanEnabled] = useState(false);
+  const [scanInterval, setScanInterval] = useState(60);
+  const [processEnabled, setProcessEnabled] = useState(false);
+  const [processInterval, setProcessInterval] = useState(60);
+  const [processLimit, setProcessLimit] = useState(10);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    api.getDaemonConfig().then((cfg) => {
+      setConfig(cfg);
+      setScanEnabled(cfg.scan_enabled);
+      setScanInterval(cfg.scan_interval_min);
+      setProcessEnabled(cfg.process_enabled);
+      setProcessInterval(cfg.process_interval_min);
+      setProcessLimit(cfg.process_limit);
+    }).catch(console.error).finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setResult(null);
+    try {
+      await api.updateDaemonConfig({
+        scan_enabled: scanEnabled,
+        scan_interval_min: scanInterval,
+        process_enabled: processEnabled,
+        process_interval_min: processInterval,
+        process_limit: processLimit,
+      });
+      setResult("설정 저장 완료");
+      load();
+    } catch (e: unknown) {
+      setResult(e instanceof Error ? e.message : "저장 실패");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRunScan = async () => {
+    setRunning("scan");
+    setResult(null);
+    try {
+      const res = await api.runDaemonScan();
+      setResult(`채널 스캔 완료: 신규 ${res.new_videos}개 영상`);
+      load();
+    } catch (e: unknown) {
+      setResult(e instanceof Error ? e.message : "스캔 실패");
+    } finally {
+      setRunning(null);
+    }
+  };
+
+  const handleRunProcess = async () => {
+    setRunning("process");
+    setResult(null);
+    try {
+      const res = await api.runDaemonProcess(processLimit);
+      setResult(`영상 처리 완료: ${res.restaurants_extracted}개 식당 추출`);
+      load();
+    } catch (e: unknown) {
+      setResult(e instanceof Error ? e.message : "처리 실패");
+    } finally {
+      setRunning(null);
+    }
+  };
+
+  if (loading) return <p className="text-gray-500">로딩 중...</p>;
+
+  return (
+    <div className="space-y-6">
+      {/* Schedule Config */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold mb-4">스케줄 설정</h2>
+        <p className="text-xs text-gray-500 mb-4">
+          데몬이 실행 중일 때, 아래 설정에 따라 자동으로 채널 스캔 및 영상 처리를 수행합니다.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Scan config */}
+          <div className="border rounded-lg p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium">채널 스캔</h3>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={scanEnabled}
+                  onChange={(e) => setScanEnabled(e.target.checked)}
+                  disabled={!isAdmin}
+                  className="w-4 h-4"
+                />
+                <span className={`text-sm ${scanEnabled ? "text-green-600 font-medium" : "text-gray-500"}`}>
+                  {scanEnabled ? "활성" : "비활성"}
+                </span>
+              </label>
+            </div>
+            <div>
+              <label className="block text-xs text-gray-500 mb-1">주기 (분)</label>
+              <input
+                type="number"
+                value={scanInterval}
+                onChange={(e) => setScanInterval(Number(e.target.value))}
+                disabled={!isAdmin}
+                min={1}
+                className="border rounded px-3 py-1.5 text-sm w-32"
+              />
+            </div>
+            {config?.last_scan_at && (
+              <p className="text-xs text-gray-400">마지막 스캔: {config.last_scan_at}</p>
+            )}
+          </div>
+
+          {/* Process config */}
+          <div className="border rounded-lg p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium">영상 처리</h3>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={processEnabled}
+                  onChange={(e) => setProcessEnabled(e.target.checked)}
+                  disabled={!isAdmin}
+                  className="w-4 h-4"
+                />
+                <span className={`text-sm ${processEnabled ? "text-green-600 font-medium" : "text-gray-500"}`}>
+                  {processEnabled ? "활성" : "비활성"}
+                </span>
+              </label>
+            </div>
+            <div className="flex gap-4">
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">주기 (분)</label>
+                <input
+                  type="number"
+                  value={processInterval}
+                  onChange={(e) => setProcessInterval(Number(e.target.value))}
+                  disabled={!isAdmin}
+                  min={1}
+                  className="border rounded px-3 py-1.5 text-sm w-32"
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">처리 건수</label>
+                <input
+                  type="number"
+                  value={processLimit}
+                  onChange={(e) => setProcessLimit(Number(e.target.value))}
+                  disabled={!isAdmin}
+                  min={1}
+                  max={50}
+                  className="border rounded px-3 py-1.5 text-sm w-32"
+                />
+              </div>
+            </div>
+            {config?.last_process_at && (
+              <p className="text-xs text-gray-400">마지막 처리: {config.last_process_at}</p>
+            )}
+          </div>
+        </div>
+
+        {isAdmin && (
+          <div className="mt-4">
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? "저장 중..." : "설정 저장"}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Manual Triggers */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold mb-4">수동 실행</h2>
+        <p className="text-xs text-gray-500 mb-4">
+          스케줄과 관계없이 즉시 실행합니다. 처리 시간이 걸릴 수 있습니다.
+        </p>
+
+        <div className="flex gap-3">
+          {isAdmin && (
+            <>
+              <button
+                onClick={handleRunScan}
+                disabled={running !== null}
+                className="px-4 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700 disabled:opacity-50"
+              >
+                {running === "scan" ? "스캔 중..." : "채널 스캔 실행"}
+              </button>
+              <button
+                onClick={handleRunProcess}
+                disabled={running !== null}
+                className="px-4 py-2 bg-purple-600 text-white text-sm rounded hover:bg-purple-700 disabled:opacity-50"
+              >
+                {running === "process" ? "처리 중..." : "영상 처리 실행"}
+              </button>
+            </>
+          )}
+        </div>
+
+        {result && (
+          <p className={`mt-3 text-sm ${result.includes("실패") || result.includes("API") ? "text-red-600" : "text-green-600"}`}>
+            {result}
+          </p>
+        )}
+      </div>
+
+      {/* Config updated_at */}
+      {config?.updated_at && (
+        <p className="text-xs text-gray-400 text-right">설정 수정일: {config.updated_at}</p>
+      )}
+    </div>
+  );
+}

frontend/src/app/page.tsx

@@ -1,15 +1,132 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GoogleLogin } from "@react-oauth/google";
 import { api } from "@/lib/api";
 import type { Restaurant, Channel, Review } from "@/lib/api";
 import { useAuth } from "@/lib/auth-context";
-import MapView from "@/components/MapView";
+import MapView, { MapBounds, FlyTo } from "@/components/MapView";
 import SearchBar from "@/components/SearchBar";
 import RestaurantList from "@/components/RestaurantList";
 import RestaurantDetail from "@/components/RestaurantDetail";
 import MyReviewsList from "@/components/MyReviewsList";
+import BottomSheet from "@/components/BottomSheet";
+
+const CUISINE_GROUPS: { label: string; prefix: string }[] = [
+  { label: "한식", prefix: "한식" },
+  { label: "일식", prefix: "일식" },
+  { label: "중식", prefix: "중식" },
+  { label: "양식", prefix: "양식" },
+  { label: "아시아", prefix: "아시아" },
+  { label: "기타", prefix: "기타" },
+];
+
+function matchCuisineGroup(cuisineType: string | null, group: string): boolean {
+  if (!cuisineType) return false;
+  const g = CUISINE_GROUPS.find((g) => g.label === group);
+  if (!g) return false;
+  return cuisineType.startsWith(g.prefix);
+}
+
+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: "보통 (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),
+  },
+];
+
+function matchPriceGroup(priceRange: string | null, group: string): boolean {
+  if (!priceRange) return false;
+  const g = PRICE_GROUPS.find((g) => g.label === group);
+  if (!g) return false;
+  return g.test(priceRange);
+}
+
+/** Parse pipe-delimited region "나라|시|구" into parts. */
+function parseRegion(region: string | null): { country: string; city: string; district: string } | null {
+  if (!region) return null;
+  const parts = region.split("|");
+  return {
+    country: parts[0] || "",
+    city: parts[1] || "",
+    district: parts[2] || "",
+  };
+}
+
+/** Build 3-level tree: country → city → district[] */
+function buildRegionTree(restaurants: Restaurant[]) {
+  const tree = new Map<string, Map<string, Set<string>>>();
+  for (const r of restaurants) {
+    const p = parseRegion(r.region);
+    if (!p || !p.country) continue;
+    if (!tree.has(p.country)) tree.set(p.country, new Map());
+    const cityMap = tree.get(p.country)!;
+    if (p.city) {
+      if (!cityMap.has(p.city)) cityMap.set(p.city, new Set());
+      if (p.district) cityMap.get(p.city)!.add(p.district);
+    }
+  }
+  return tree;
+}
+
+/** Compute centroid + appropriate zoom from a set of restaurants. */
+function computeFlyTo(rests: Restaurant[]): FlyTo | null {
+  if (rests.length === 0) return null;
+  const lat = rests.reduce((s, r) => s + r.latitude, 0) / rests.length;
+  const lng = rests.reduce((s, r) => s + r.longitude, 0) / rests.length;
+  // Pick zoom based on geographic spread
+  const latSpread = Math.max(...rests.map((r) => r.latitude)) - Math.min(...rests.map((r) => r.latitude));
+  const lngSpread = Math.max(...rests.map((r) => r.longitude)) - Math.min(...rests.map((r) => r.longitude));
+  const spread = Math.max(latSpread, lngSpread);
+  let zoom = 13;
+  if (spread > 2) zoom = 8;
+  else if (spread > 1) zoom = 9;
+  else if (spread > 0.5) zoom = 10;
+  else if (spread > 0.2) zoom = 11;
+  else if (spread > 0.1) zoom = 12;
+  else if (spread > 0.02) zoom = 14;
+  else zoom = 15;
+  return { lat, lng, zoom };
+}
+
+/** Find best matching country + city from user's coordinates using restaurant data. */
+function findRegionFromCoords(
+  lat: number,
+  lng: number,
+  restaurants: Restaurant[],
+): { country: string; city: string } | null {
+  // Group restaurants by country|city and compute centroids
+  const groups = new Map<string, { country: string; city: string; lats: number[]; lngs: number[] }>();
+  for (const r of restaurants) {
+    const p = parseRegion(r.region);
+    if (!p || !p.country || !p.city) continue;
+    const key = `${p.country}|${p.city}`;
+    if (!groups.has(key)) groups.set(key, { country: p.country, city: p.city, lats: [], lngs: [] });
+    const g = groups.get(key)!;
+    g.lats.push(r.latitude);
+    g.lngs.push(r.longitude);
+  }
+  let best: { country: string; city: string } | null = null;
+  let bestDist = Infinity;
+  for (const g of groups.values()) {
+    const cLat = g.lats.reduce((a, b) => a + b, 0) / g.lats.length;
+    const cLng = g.lngs.reduce((a, b) => a + b, 0) / g.lngs.length;
+    const dist = (cLat - lat) ** 2 + (cLng - lng) ** 2;
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = { country: g.country, city: g.city };
+    }
+  }
+  return best;
+}
 
 export default function Home() {
   const { user, login, logout, isLoading: authLoading } = useAuth();
@@ -19,10 +136,60 @@ export default function Home() {
   const [showDetail, setShowDetail] = useState(false);
   const [channels, setChannels] = useState<Channel[]>([]);
   const [channelFilter, setChannelFilter] = useState("");
+  const [cuisineFilter, setCuisineFilter] = useState("");
+  const [priceFilter, setPriceFilter] = useState("");
+  const [viewMode, setViewMode] = useState<"map" | "list">("list");
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
+  const [mapBounds, setMapBounds] = useState<MapBounds | null>(null);
+  const [boundsFilterOn, setBoundsFilterOn] = useState(false);
+  const [countryFilter, setCountryFilter] = useState("");
+  const [cityFilter, setCityFilter] = useState("");
+  const [districtFilter, setDistrictFilter] = useState("");
+  const [regionFlyTo, setRegionFlyTo] = useState<FlyTo | null>(null);
   const [showFavorites, setShowFavorites] = useState(false);
   const [showMyReviews, setShowMyReviews] = useState(false);
   const [myReviews, setMyReviews] = useState<(Review & { restaurant_id: string; restaurant_name: string | null })[]>([]);
   const [visits, setVisits] = useState<{ today: number; total: number } | null>(null);
+  const geoApplied = useRef(false);
+
+  const regionTree = useMemo(() => buildRegionTree(restaurants), [restaurants]);
+  const countries = useMemo(() => [...regionTree.keys()].sort(), [regionTree]);
+  const cities = useMemo(() => {
+    if (!countryFilter) return [];
+    const cityMap = regionTree.get(countryFilter);
+    return cityMap ? [...cityMap.keys()].sort() : [];
+  }, [regionTree, countryFilter]);
+  const districts = useMemo(() => {
+    if (!countryFilter || !cityFilter) return [];
+    const cityMap = regionTree.get(countryFilter);
+    if (!cityMap) return [];
+    const set = cityMap.get(cityFilter);
+    return set ? [...set].sort() : [];
+  }, [regionTree, countryFilter, cityFilter]);
+
+  const filteredRestaurants = useMemo(() => {
+    return restaurants.filter((r) => {
+      if (channelFilter && !(r.channels || []).includes(channelFilter)) return false;
+      if (cuisineFilter && !matchCuisineGroup(r.cuisine_type, cuisineFilter)) return false;
+      if (priceFilter && !matchPriceGroup(r.price_range, priceFilter)) return false;
+      if (countryFilter) {
+        const parsed = parseRegion(r.region);
+        if (!parsed || parsed.country !== countryFilter) return false;
+        if (cityFilter && parsed.city !== cityFilter) return false;
+        if (districtFilter && parsed.district !== districtFilter) return false;
+      }
+      if (boundsFilterOn && mapBounds) {
+        if (r.latitude < mapBounds.south || r.latitude > mapBounds.north) return false;
+        if (r.longitude < mapBounds.west || r.longitude > mapBounds.east) return false;
+      }
+      return true;
+    });
+  }, [restaurants, channelFilter, cuisineFilter, priceFilter, countryFilter, cityFilter, districtFilter, boundsFilterOn, mapBounds]);
+
+  // Set desktop default to map mode on mount
+  useEffect(() => {
+    if (window.innerWidth >= 768) setViewMode("map");
+  }, []);
 
   // Load channels + record visit on mount
   useEffect(() => {
@@ -33,11 +200,35 @@ export default function Home() {
   // Load restaurants on mount and when channel filter changes
   useEffect(() => {
     api
-      .getRestaurants({ limit: 200, channel: channelFilter || undefined })
+      .getRestaurants({ limit: 500, channel: channelFilter || undefined })
       .then(setRestaurants)
       .catch(console.error);
   }, [channelFilter]);
 
+  // Auto-select region from user's geolocation (once)
+  useEffect(() => {
+    if (geoApplied.current || restaurants.length === 0) return;
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        if (geoApplied.current) return;
+        geoApplied.current = true;
+        const match = findRegionFromCoords(pos.coords.latitude, pos.coords.longitude, restaurants);
+        if (match) {
+          setCountryFilter(match.country);
+          setCityFilter(match.city);
+          const matched = restaurants.filter((r) => {
+            const p = parseRegion(r.region);
+            return p && p.country === match.country && p.city === match.city;
+          });
+          setRegionFlyTo(computeFlyTo(matched));
+        }
+      },
+      () => { /* user denied or error — do nothing */ },
+      { timeout: 5000 },
+    );
+  }, [restaurants]);
+
   const handleSearch = useCallback(
     async (query: string, mode: "keyword" | "semantic" | "hybrid") => {
       setLoading(true);
@@ -64,13 +255,72 @@ export default function Home() {
     setShowDetail(false);
   }, []);
 
+  const handleBoundsChanged = useCallback((bounds: MapBounds) => {
+    setMapBounds(bounds);
+  }, []);
+
+  const handleCountryChange = useCallback((country: string) => {
+    setCountryFilter(country);
+    setCityFilter("");
+    setDistrictFilter("");
+    if (!country) { setRegionFlyTo(null); return; }
+    const matched = restaurants.filter((r) => {
+      const p = parseRegion(r.region);
+      return p && p.country === country;
+    });
+    setRegionFlyTo(computeFlyTo(matched));
+  }, [restaurants]);
+
+  const handleCityChange = useCallback((city: string) => {
+    setCityFilter(city);
+    setDistrictFilter("");
+    if (!city) {
+      // Re-fly to country level
+      const matched = restaurants.filter((r) => {
+        const p = parseRegion(r.region);
+        return p && p.country === countryFilter;
+      });
+      setRegionFlyTo(computeFlyTo(matched));
+      return;
+    }
+    const matched = restaurants.filter((r) => {
+      const p = parseRegion(r.region);
+      return p && p.country === countryFilter && p.city === city;
+    });
+    setRegionFlyTo(computeFlyTo(matched));
+  }, [restaurants, countryFilter]);
+
+  const handleDistrictChange = useCallback((district: string) => {
+    setDistrictFilter(district);
+    if (!district) {
+      const matched = restaurants.filter((r) => {
+        const p = parseRegion(r.region);
+        return p && p.country === countryFilter && p.city === cityFilter;
+      });
+      setRegionFlyTo(computeFlyTo(matched));
+      return;
+    }
+    const matched = restaurants.filter((r) => {
+      const p = parseRegion(r.region);
+      return p && p.country === countryFilter && p.city === cityFilter && p.district === district;
+    });
+    setRegionFlyTo(computeFlyTo(matched));
+  }, [restaurants, countryFilter, cityFilter]);
+
   const handleReset = useCallback(() => {
     setLoading(true);
     setChannelFilter("");
+    setCuisineFilter("");
+    setPriceFilter("");
+    setCountryFilter("");
+    setCityFilter("");
+    setDistrictFilter("");
+    setRegionFlyTo(null);
+    setBoundsFilterOn(false);
     setShowFavorites(false);
     setShowMyReviews(false);
     api
-      .getRestaurants({ limit: 200 })
+      .getRestaurants({ limit: 500 })
       .then((data) => {
         setRestaurants(data);
         setSelected(null);
@@ -83,7 +333,7 @@ export default function Home() {
   const handleToggleFavorites = async () => {
     if (showFavorites) {
       setShowFavorites(false);
-      const data = await api.getRestaurants({ limit: 200, channel: channelFilter || undefined });
+      const data = await api.getRestaurants({ limit: 500, channel: channelFilter || undefined });
       setRestaurants(data);
     } else {
       try {
@@ -114,6 +364,7 @@ export default function Home() {
     }
   };
 
+  // Desktop sidebar: shows detail inline
   const sidebarContent = showMyReviews ? (
     <MyReviewsList
       reviews={myReviews}
@@ -134,7 +385,29 @@ export default function Home() {
     />
   ) : (
     <RestaurantList
-      restaurants={restaurants}
+      restaurants={filteredRestaurants}
+      selectedId={selected?.id}
+      onSelect={handleSelectRestaurant}
+    />
+  );
+
+  // Mobile list: always shows list (detail goes to bottom sheet)
+  const mobileListContent = showMyReviews ? (
+    <MyReviewsList
+      reviews={myReviews}
+      onClose={() => { setShowMyReviews(false); setMyReviews([]); }}
+      onSelectRestaurant={async (restaurantId) => {
+        try {
+          const r = await api.getRestaurant(restaurantId);
+          handleSelectRestaurant(r);
+          setShowMyReviews(false);
+          setMyReviews([]);
+        } catch { /* ignore */ }
+      }}
+    />
+  ) : (
+    <RestaurantList
+      restaurants={filteredRestaurants}
       selectedId={selected?.id}
       onSelect={handleSelectRestaurant}
     />
@@ -149,62 +422,136 @@ export default function Home() {
             Tasteby
           </button>
 
-          {/* Desktop: search inline */}
-          <div className="hidden md:block flex-1 max-w-xl mx-4">
-            <SearchBar onSearch={handleSearch} isLoading={loading} />
-          </div>
-
-          {/* Desktop: filters inline */}
-          <div className="hidden md:flex items-center gap-2">
-            <select
-              value={channelFilter}
-              onChange={(e) => {
-                setChannelFilter(e.target.value);
-                setSelected(null);
-                setShowDetail(false);
-              }}
-              className="border rounded px-2 py-1.5 text-sm text-gray-600"
-            >
-              <option value="">전체 채널</option>
-              {channels.map((ch) => (
-                <option key={ch.id} value={ch.channel_name}>
-                  {ch.channel_name}
-                </option>
-              ))}
-            </select>
-            {user && (
-              <>
-                <button
-                  onClick={handleToggleFavorites}
-                  className={`px-3 py-1.5 text-sm rounded-full border transition-colors ${
-                    showFavorites
-                      ? "bg-red-50 border-red-300 text-red-600"
-                      : "border-gray-300 text-gray-600 hover:bg-gray-100"
-                  }`}
+          {/* Desktop: search + filters — two rows */}
+          <div className="hidden md:flex flex-col gap-1.5 mx-4">
+            {/* Row 1: Search + dropdown filters */}
+            <div className="flex items-center gap-2">
+              <div className="w-96 shrink-0">
+                <SearchBar onSearch={handleSearch} isLoading={loading} />
+              </div>
+              <select
+                value={channelFilter}
+                onChange={(e) => {
+                  setChannelFilter(e.target.value);
+                  setSelected(null);
+                  setShowDetail(false);
+                }}
+                className="border rounded px-2 py-1 text-sm text-gray-600"
+              >
+                <option value="">전체 채널</option>
+                {channels.map((ch) => (
+                  <option key={ch.id} value={ch.channel_name}>
+                    {ch.channel_name}
+                  </option>
+                ))}
+              </select>
+              <select
+                value={cuisineFilter}
+                onChange={(e) => setCuisineFilter(e.target.value)}
+                className="border rounded px-2 py-1 text-sm text-gray-600"
+              >
+                <option value="">전체 장르</option>
+                {CUISINE_GROUPS.map((g) => (
+                  <option key={g.label} value={g.label}>{g.label}</option>
+                ))}
+              </select>
+              <select
+                value={priceFilter}
+                onChange={(e) => setPriceFilter(e.target.value)}
+                className="border rounded px-2 py-1 text-sm text-gray-600"
+              >
+                <option value="">전체 가격</option>
+                {PRICE_GROUPS.map((g) => (
+                  <option key={g.label} value={g.label}>{g.label}</option>
+                ))}
+              </select>
+              <select
+                value={countryFilter}
+                onChange={(e) => handleCountryChange(e.target.value)}
+                className="border rounded px-2 py-1 text-sm text-gray-600"
+              >
+                <option value="">전체 나라</option>
+                {countries.map((c) => (
+                  <option key={c} value={c}>{c}</option>
+                ))}
+              </select>
+              {countryFilter && cities.length > 0 && (
+                <select
+                  value={cityFilter}
+                  onChange={(e) => handleCityChange(e.target.value)}
+                  className="border rounded px-2 py-1 text-sm text-gray-600"
                 >
-                  {showFavorites ? "♥ 내 찜" : "♡ 찜"}
-                </button>
-                <button
-                  onClick={handleToggleMyReviews}
-                  className={`px-3 py-1.5 text-sm rounded-full border transition-colors ${
-                    showMyReviews
-                      ? "bg-blue-50 border-blue-300 text-blue-600"
-                      : "border-gray-300 text-gray-600 hover:bg-gray-100"
-                  }`}
+                  <option value="">전체 시/도</option>
+                  {cities.map((c) => (
+                    <option key={c} value={c}>{c}</option>
+                  ))}
+                </select>
+              )}
+              {cityFilter && districts.length > 0 && (
+                <select
+                  value={districtFilter}
+                  onChange={(e) => handleDistrictChange(e.target.value)}
+                  className="border rounded px-2 py-1 text-sm text-gray-600"
                 >
-                  {showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
-                </button>
-              </>
-            )}
-            <span className="text-sm text-gray-500 whitespace-nowrap">
-              {restaurants.length}개
-            </span>
+                  <option value="">전체 구/군</option>
+                  {districts.map((d) => (
+                    <option key={d} value={d}>{d}</option>
+                  ))}
+                </select>
+              )}
+            </div>
+            {/* Row 2: Toggle buttons + count */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setBoundsFilterOn(!boundsFilterOn)}
+                className={`px-2.5 py-1 text-sm border rounded transition-colors ${
+                  boundsFilterOn
+                    ? "bg-blue-50 border-blue-300 text-blue-600"
+                    : "hover:bg-gray-100 text-gray-600"
+                }`}
+                title="지도 영역 내 식당만 표시"
+              >
+                {boundsFilterOn ? "📍 영역" : "📍"}
+              </button>
+              <button
+                onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
+                className="px-2.5 py-1 text-sm border rounded transition-colors hover:bg-gray-100 text-gray-600"
+                title={viewMode === "map" ? "리스트 우선" : "지도 우선"}
+              >
+                {viewMode === "map" ? "🗺" : "☰"}
+              </button>
+              {user && (
+                <>
+                  <button
+                    onClick={handleToggleFavorites}
+                    className={`px-3 py-1 text-sm rounded-full border transition-colors ${
+                      showFavorites
+                        ? "bg-red-50 border-red-300 text-red-600"
+                        : "border-gray-300 text-gray-600 hover:bg-gray-100"
+                    }`}
+                  >
+                    {showFavorites ? "♥ 내 찜" : "♡ 찜"}
+                  </button>
+                  <button
+                    onClick={handleToggleMyReviews}
+                    className={`px-3 py-1 text-sm rounded-full border transition-colors ${
+                      showMyReviews
+                        ? "bg-blue-50 border-blue-300 text-blue-600"
+                        : "border-gray-300 text-gray-600 hover:bg-gray-100"
+                    }`}
+                  >
+                    {showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
+                  </button>
+                </>
+              )}
+              <span className="text-sm text-gray-500 whitespace-nowrap">
+                {filteredRestaurants.length}개
+              </span>
+            </div>
           </div>
 
-          <div className="w-4 shrink-0 hidden md:block" />
-
           {/* User area */}
-          <div className="shrink-0">
+          <div className="shrink-0 flex items-center gap-3 ml-auto">
             {authLoading ? null : user ? (
               <div className="flex items-center gap-2">
                 {user.avatar_url ? (
@@ -242,54 +589,160 @@ export default function Home() {
           </div>
         </div>
 
-        {/* ── Header row 2 (mobile only): search + filters ── */}
-        <div className="md:hidden px-4 pb-2 space-y-2">
-          <SearchBar onSearch={handleSearch} isLoading={loading} />
-          <div className="flex items-center gap-2 overflow-x-auto">
-            <select
-              value={channelFilter}
-              onChange={(e) => {
-                setChannelFilter(e.target.value);
-                setSelected(null);
-                setShowDetail(false);
-              }}
-              className="border rounded px-2 py-1 text-xs text-gray-600 shrink-0"
+        {/* ── Header row 2 (mobile only): search + toolbar ── */}
+        <div className="md:hidden px-4 pb-2 space-y-1.5">
+          <div className="flex items-center gap-1.5">
+            <div className="flex-1">
+              <SearchBar onSearch={handleSearch} isLoading={loading} />
+            </div>
+            <button
+              onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
+              className={`px-2 py-1.5 text-xs border rounded transition-colors shrink-0 ${
+                viewMode === "map"
+                  ? "bg-blue-50 border-blue-300 text-blue-600"
+                  : "text-gray-600"
+              }`}
             >
-              <option value="">전체 채널</option>
-              {channels.map((ch) => (
-                <option key={ch.id} value={ch.channel_name}>
-                  {ch.channel_name}
-                </option>
-              ))}
-            </select>
-            {user && (
-              <>
-                <button
-                  onClick={handleToggleFavorites}
-                  className={`px-2.5 py-1 text-xs rounded-full border transition-colors shrink-0 ${
-                    showFavorites
-                      ? "bg-red-50 border-red-300 text-red-600"
-                      : "border-gray-300 text-gray-600"
-                  }`}
-                >
-                  {showFavorites ? "♥ 내 찜" : "♡ 찜"}
-                </button>
-                <button
-                  onClick={handleToggleMyReviews}
-                  className={`px-2.5 py-1 text-xs rounded-full border transition-colors shrink-0 ${
-                    showMyReviews
-                      ? "bg-blue-50 border-blue-300 text-blue-600"
-                      : "border-gray-300 text-gray-600"
-                  }`}
-                >
-                  {showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
-                </button>
-              </>
-            )}
-            <span className="text-xs text-gray-400 shrink-0 ml-1">
-              {restaurants.length}개
+              {viewMode === "map" ? "🗺" : "☰"}
+            </button>
+            <button
+              onClick={() => setShowMobileFilters(!showMobileFilters)}
+              className={`px-2 py-1.5 text-xs border rounded transition-colors shrink-0 relative ${
+                showMobileFilters || channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn
+                  ? "bg-blue-50 border-blue-300 text-blue-600"
+                  : "text-gray-600"
+              }`}
+            >
+              {showMobileFilters ? "✕" : "▽"} 필터
+              {!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && (
+                <span className="absolute -top-1 -right-1 w-3.5 h-3.5 bg-blue-500 text-white rounded-full text-[9px] flex items-center justify-center">
+                  {[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length}
+                </span>
+              )}
+            </button>
+            <span className="text-xs text-gray-400 shrink-0">
+              {filteredRestaurants.length}개
             </span>
           </div>
+
+          {/* Collapsible filter panel */}
+          {showMobileFilters && (
+            <div className="bg-gray-50 rounded-lg p-3 space-y-2 border">
+              {/* Dropdown filters */}
+              <div className="flex items-center gap-1.5 flex-wrap">
+                <select
+                  value={channelFilter}
+                  onChange={(e) => {
+                    setChannelFilter(e.target.value);
+                    setSelected(null);
+                    setShowDetail(false);
+                  }}
+                  className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
+                >
+                  <option value="">전체 채널</option>
+                  {channels.map((ch) => (
+                    <option key={ch.id} value={ch.channel_name}>
+                      {ch.channel_name}
+                    </option>
+                  ))}
+                </select>
+                <select
+                  value={cuisineFilter}
+                  onChange={(e) => setCuisineFilter(e.target.value)}
+                  className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
+                >
+                  <option value="">전체 장르</option>
+                  {CUISINE_GROUPS.map((g) => (
+                    <option key={g.label} value={g.label}>{g.label}</option>
+                  ))}
+                </select>
+                <select
+                  value={priceFilter}
+                  onChange={(e) => setPriceFilter(e.target.value)}
+                  className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
+                >
+                  <option value="">전체 가격</option>
+                  {PRICE_GROUPS.map((g) => (
+                    <option key={g.label} value={g.label}>{g.label}</option>
+                  ))}
+                </select>
+              </div>
+              {/* Region filters */}
+              <div className="flex items-center gap-1.5 flex-wrap">
+                <select
+                  value={countryFilter}
+                  onChange={(e) => handleCountryChange(e.target.value)}
+                  className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
+                >
+                  <option value="">전체 나라</option>
+                  {countries.map((c) => (
+                    <option key={c} value={c}>{c}</option>
+                  ))}
+                </select>
+                {countryFilter && cities.length > 0 && (
+                  <select
+                    value={cityFilter}
+                    onChange={(e) => handleCityChange(e.target.value)}
+                    className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
+                  >
+                    <option value="">전체 시/도</option>
+                    {cities.map((c) => (
+                      <option key={c} value={c}>{c}</option>
+                    ))}
+                  </select>
+                )}
+                {cityFilter && districts.length > 0 && (
+                  <select
+                    value={districtFilter}
+                    onChange={(e) => handleDistrictChange(e.target.value)}
+                    className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
+                  >
+                    <option value="">전체 구/군</option>
+                    {districts.map((d) => (
+                      <option key={d} value={d}>{d}</option>
+                    ))}
+                  </select>
+                )}
+              </div>
+              {/* Toggle buttons */}
+              <div className="flex items-center gap-1.5 flex-wrap">
+                <button
+                  onClick={() => setBoundsFilterOn(!boundsFilterOn)}
+                  className={`px-2 py-1 text-xs border rounded transition-colors ${
+                    boundsFilterOn
+                      ? "bg-blue-50 border-blue-300 text-blue-600"
+                      : "text-gray-600 bg-white"
+                  }`}
+                >
+                  {boundsFilterOn ? "📍 영역 ON" : "📍 영역"}
+                </button>
+                {user && (
+                  <>
+                    <button
+                      onClick={handleToggleFavorites}
+                      className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
+                        showFavorites
+                          ? "bg-red-50 border-red-300 text-red-600"
+                          : "border-gray-300 text-gray-600 bg-white"
+                      }`}
+                    >
+                      {showFavorites ? "♥ 내 찜" : "♡ 찜"}
+                    </button>
+                    <button
+                      onClick={handleToggleMyReviews}
+                      className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
+                        showMyReviews
+                          ? "bg-blue-50 border-blue-300 text-blue-600"
+                          : "border-gray-300 text-gray-600 bg-white"
+                      }`}
+                    >
+                      {showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </header>
 
@@ -297,42 +750,101 @@ export default function Home() {
 
       {/* Desktop layout */}
       <div className="hidden md:flex flex-1 overflow-hidden">
-        <aside className="w-80 bg-white border-r overflow-y-auto shrink-0">
-          {sidebarContent}
-        </aside>
-        <main className="flex-1 relative">
-          <MapView
-            restaurants={restaurants}
-            selected={selected}
-            onSelectRestaurant={handleSelectRestaurant}
-          />
-          {visits && (
-            <div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
-              오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
-            </div>
-          )}
-        </main>
+        {viewMode === "map" ? (
+          <>
+            <aside className="w-80 bg-white border-r overflow-y-auto shrink-0">
+              {sidebarContent}
+            </aside>
+            <main className="flex-1 relative">
+              <MapView
+                restaurants={filteredRestaurants}
+                selected={selected}
+                onSelectRestaurant={handleSelectRestaurant}
+                onBoundsChanged={handleBoundsChanged}
+                flyTo={regionFlyTo}
+              />
+              {visits && (
+                <div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
+                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
+                </div>
+              )}
+            </main>
+          </>
+        ) : (
+          <>
+            <aside className="flex-1 bg-white overflow-y-auto">
+              {sidebarContent}
+            </aside>
+            <main className="w-[40%] shrink-0 relative border-l">
+              <MapView
+                restaurants={filteredRestaurants}
+                selected={selected}
+                onSelectRestaurant={handleSelectRestaurant}
+                onBoundsChanged={handleBoundsChanged}
+                flyTo={regionFlyTo}
+              />
+              {visits && (
+                <div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
+                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
+                </div>
+              )}
+            </main>
+          </>
+        )}
       </div>
 
       {/* Mobile layout */}
       <div className="md:hidden flex-1 flex flex-col overflow-hidden">
-        {/* Map: fixed height */}
-        <div className="h-[40vh] shrink-0 relative">
-          <MapView
-            restaurants={restaurants}
-            selected={selected}
-            onSelectRestaurant={handleSelectRestaurant}
-          />
-          {visits && (
-            <div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
-              오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
+        {viewMode === "map" ? (
+          <>
+            <div className="flex-1 relative">
+              <MapView
+                restaurants={filteredRestaurants}
+                selected={selected}
+                onSelectRestaurant={handleSelectRestaurant}
+                onBoundsChanged={handleBoundsChanged}
+                flyTo={regionFlyTo}
+              />
+              {visits && (
+                <div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
+                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
+                </div>
+              )}
             </div>
+          </>
+        ) : (
+          <>
+            <div className="flex-1 bg-white overflow-y-auto">
+              {mobileListContent}
+              {/* Scroll-down hint to reveal map */}
+              <div className="flex flex-col items-center py-4 text-gray-300">
+                <span className="text-lg">▼</span>
+                <span className="text-[10px]">아래로 스크롤하면 지도</span>
+              </div>
+            </div>
+            <div className="h-[35vh] shrink-0 relative border-t">
+              <MapView
+                restaurants={filteredRestaurants}
+                selected={selected}
+                onSelectRestaurant={handleSelectRestaurant}
+                onBoundsChanged={handleBoundsChanged}
+                flyTo={regionFlyTo}
+              />
+              {visits && (
+                <div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
+                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* Mobile Bottom Sheet for restaurant detail */}
+        <BottomSheet open={showDetail && !!selected} onClose={handleCloseDetail}>
+          {selected && (
+            <RestaurantDetail restaurant={selected} onClose={handleCloseDetail} />
           )}
-        </div>
-        {/* List/Detail: scrollable below */}
-        <div className="flex-1 bg-white border-t overflow-y-auto">
-          {sidebarContent}
-        </div>
+        </BottomSheet>
       </div>
     </div>
   );

frontend/src/components/BottomSheet.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const SNAP_POINTS = { PEEK: 0.4, HALF: 0.55, FULL: 0.92 };
+const VELOCITY_THRESHOLD = 0.5;
+
+export default function BottomSheet({ open, onClose, children }: BottomSheetProps) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(SNAP_POINTS.PEEK);
+  const [dragging, setDragging] = useState(false);
+  const dragState = useRef({ startY: 0, startH: 0, lastY: 0, lastTime: 0 });
+
+  // Reset to peek when opened
+  useEffect(() => {
+    if (open) setHeight(SNAP_POINTS.PEEK);
+  }, [open]);
+
+  const snapTo = useCallback((h: number, velocity: number) => {
+    // If fast downward swipe, close
+    if (velocity > VELOCITY_THRESHOLD && h < SNAP_POINTS.HALF) {
+      onClose();
+      return;
+    }
+    // Snap to nearest point
+    const points = [SNAP_POINTS.PEEK, SNAP_POINTS.HALF, SNAP_POINTS.FULL];
+    let best = points[0];
+    let bestDist = Math.abs(h - best);
+    for (const p of points) {
+      const d = Math.abs(h - p);
+      if (d < bestDist) { best = p; bestDist = d; }
+    }
+    // If dragged below peek, close
+    if (h < SNAP_POINTS.PEEK * 0.6) {
+      onClose();
+      return;
+    }
+    setHeight(best);
+  }, [onClose]);
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    // Don't intercept if scrolling inside content that has scrollable area
+    const content = contentRef.current;
+    if (content && content.scrollTop > 0 && height >= SNAP_POINTS.FULL - 0.05) return;
+
+    const y = e.touches[0].clientY;
+    dragState.current = { startY: y, startH: height, lastY: y, lastTime: Date.now() };
+    setDragging(true);
+  }, [height]);
+
+  const onTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!dragging) return;
+    const y = e.touches[0].clientY;
+    const vh = window.innerHeight;
+    const deltaRatio = (dragState.current.startY - y) / vh;
+    const newH = Math.max(0.1, Math.min(SNAP_POINTS.FULL, dragState.current.startH + deltaRatio));
+    setHeight(newH);
+    dragState.current.lastY = y;
+    dragState.current.lastTime = Date.now();
+  }, [dragging]);
+
+  const onTouchEnd = useCallback(() => {
+    if (!dragging) return;
+    setDragging(false);
+    const dt = (Date.now() - dragState.current.lastTime) / 1000 || 0.1;
+    const dy = (dragState.current.startY - dragState.current.lastY) / window.innerHeight;
+    const velocity = -dy / dt; // positive = downward
+    snapTo(height, velocity);
+  }, [dragging, height, snapTo]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/20 md:hidden"
+        style={{ opacity: Math.min(1, (height - 0.2) * 2) }}
+        onClick={onClose}
+      />
+
+      {/* Sheet */}
+      <div
+        ref={sheetRef}
+        className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-white rounded-t-2xl shadow-2xl"
+        style={{
+          height: `${height * 100}vh`,
+          transition: dragging ? "none" : "height 0.3s cubic-bezier(0.2, 0, 0, 1)",
+        }}
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+      >
+        {/* Handle bar */}
+        <div className="flex justify-center pt-2 pb-1 shrink-0 cursor-grab">
+          <div className="w-10 h-1 bg-gray-300 rounded-full" />
+        </div>
+
+        {/* Content */}
+        <div
+          ref={contentRef}
+          className="flex-1 overflow-y-auto overscroll-contain"
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/MapView.tsx

@@ -9,6 +9,7 @@ import {
   useMap,
 } from "@vis.gl/react-google-maps";
 import type { Restaurant } from "@/lib/api";
+import { getCuisineIcon } from "@/lib/cuisine-icons";
 
 const SEOUL_CENTER = { lat: 37.5665, lng: 126.978 };
 const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
@@ -37,16 +38,52 @@ function getChannelColorMap(restaurants: Restaurant[]) {
   return map;
 }
 
+export interface MapBounds {
+  north: number;
+  south: number;
+  east: number;
+  west: number;
+}
+
+export interface FlyTo {
+  lat: number;
+  lng: number;
+  zoom?: number;
+}
+
 interface MapViewProps {
   restaurants: Restaurant[];
   selected?: Restaurant | null;
   onSelectRestaurant?: (r: Restaurant) => void;
+  onBoundsChanged?: (bounds: MapBounds) => void;
+  flyTo?: FlyTo | null;
 }
 
-function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps) {
+function MapContent({ restaurants, selected, onSelectRestaurant, onBoundsChanged, flyTo }: MapViewProps) {
   const map = useMap();
   const [infoTarget, setInfoTarget] = useState<Restaurant | null>(null);
   const channelColors = useMemo(() => getChannelColorMap(restaurants), [restaurants]);
+  const boundsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Report bounds on idle (debounced)
+  useEffect(() => {
+    if (!map) return;
+    const listener = map.addListener("idle", () => {
+      if (boundsTimerRef.current) clearTimeout(boundsTimerRef.current);
+      boundsTimerRef.current = setTimeout(() => {
+        const b = map.getBounds();
+        if (b && onBoundsChanged) {
+          const ne = b.getNorthEast();
+          const sw = b.getSouthWest();
+          onBoundsChanged({ north: ne.lat(), south: sw.lat(), east: ne.lng(), west: sw.lng() });
+        }
+      }, 300);
+    });
+    return () => {
+      google.maps.event.removeListener(listener);
+      if (boundsTimerRef.current) clearTimeout(boundsTimerRef.current);
+    };
+  }, [map, onBoundsChanged]);
 
   const handleMarkerClick = useCallback(
     (r: Restaurant) => {
@@ -56,6 +93,13 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
     [onSelectRestaurant]
   );
 
+  // Fly to a specific location (region filter)
+  useEffect(() => {
+    if (!map || !flyTo) return;
+    map.panTo({ lat: flyTo.lat, lng: flyTo.lng });
+    if (flyTo.zoom) map.setZoom(flyTo.zoom);
+  }, [map, flyTo]);
+
   // Pan and zoom to selected restaurant
   useEffect(() => {
     if (!map || !selected) return;
@@ -98,6 +142,7 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
                   textDecoration: isClosed ? "line-through" : "none",
                 }}
               >
+                <span style={{ marginRight: 3 }}>{getCuisineIcon(r.cuisine_type)}</span>
                 {r.name}
               </div>
               <div
@@ -122,7 +167,7 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
         >
           <div style={{ backgroundColor: "#ffffff", color: "#171717", colorScheme: "light" }} className="max-w-xs p-1">
             <div className="flex items-center gap-2">
-              <h3 className="font-bold text-base" style={{ color: "#171717" }}>{infoTarget.name}</h3>
+              <h3 className="font-bold text-base" style={{ color: "#171717" }}>{getCuisineIcon(infoTarget.cuisine_type)} {infoTarget.name}</h3>
               {infoTarget.business_status === "CLOSED_PERMANENTLY" && (
                 <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-semibold">폐업</span>
               )}
@@ -163,7 +208,7 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
   );
 }
 
-export default function MapView({ restaurants, selected, onSelectRestaurant }: MapViewProps) {
+export default function MapView({ restaurants, selected, onSelectRestaurant, onBoundsChanged, flyTo }: MapViewProps) {
   const channelColors = useMemo(() => getChannelColorMap(restaurants), [restaurants]);
   const channelNames = useMemo(() => Object.keys(channelColors), [channelColors]);
 
@@ -180,6 +225,8 @@ export default function MapView({ restaurants, selected, onSelectRestaurant }: M
           restaurants={restaurants}
           selected={selected}
           onSelectRestaurant={onSelectRestaurant}
+          onBoundsChanged={onBoundsChanged}
+          flyTo={flyTo}
         />
       </Map>
       {channelNames.length > 1 && (

frontend/src/components/RestaurantList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { Restaurant } from "@/lib/api";
+import { getCuisineIcon } from "@/lib/cuisine-icons";
 
 interface RestaurantListProps {
   restaurants: Restaurant[];
@@ -31,7 +32,10 @@ export default function RestaurantList({
             selectedId === r.id ? "bg-blue-50 border-l-2 border-blue-500" : ""
           }`}
         >
-          <h4 className="font-medium text-sm">{r.name}</h4>
+          <h4 className="font-medium text-sm">
+            <span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
+            {r.name}
+          </h4>
           <div className="flex gap-2 mt-1 text-xs text-gray-500">
             {r.cuisine_type && <span>{r.cuisine_type}</span>}
             {r.region && <span>{r.region}</span>}

frontend/src/lib/api.ts

@@ -67,6 +67,8 @@ export interface Channel {
   channel_id: string;
   channel_name: string;
   title_filter: string | null;
+  video_count: number;
+  last_scanned_at: string | null;
 }
 
 export interface Video {
@@ -107,6 +109,7 @@ export interface User {
   email: string | null;
   nickname: string | null;
   avatar_url: string | null;
+  is_admin?: boolean;
 }
 
 export interface Review {
@@ -120,6 +123,17 @@ export interface Review {
   user_avatar_url: string | null;
 }
 
+export interface DaemonConfig {
+  scan_enabled: boolean;
+  scan_interval_min: number;
+  process_enabled: boolean;
+  process_interval_min: number;
+  process_limit: number;
+  last_scan_at: string | null;
+  last_process_at: string | null;
+  updated_at: string | null;
+}
+
 export interface ReviewsResponse {
   reviews: Review[];
   avg_rating: number | null;
@@ -428,4 +442,29 @@ export const api = {
       { method: "PUT", body: JSON.stringify(data) }
     );
   },
+
+  // Daemon config
+  getDaemonConfig() {
+    return fetchApi<DaemonConfig>("/api/daemon/config");
+  },
+
+  updateDaemonConfig(data: Partial<DaemonConfig>) {
+    return fetchApi<{ ok: boolean }>("/api/daemon/config", {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+  },
+
+  runDaemonScan() {
+    return fetchApi<{ ok: boolean; new_videos: number }>("/api/daemon/run/scan", {
+      method: "POST",
+    });
+  },
+
+  runDaemonProcess(limit: number = 10) {
+    return fetchApi<{ ok: boolean; restaurants_extracted: number }>(
+      `/api/daemon/run/process?limit=${limit}`,
+      { method: "POST" }
+    );
+  },
 };

frontend/src/lib/cuisine-icons.ts

@@ -0,0 +1,49 @@
+/**
+ * Cuisine type → icon mapping.
+ * Works with "대분류|소분류" format (e.g. "한식|국밥/해장국").
+ */
+
+const CUISINE_ICON_MAP: Record<string, string> = {
+  "한식": "🍚",
+  "일식": "🍣",
+  "중식": "🥟",
+  "양식": "🍝",
+  "아시아": "🍜",
+  "기타": "🍴",
+};
+
+// Sub-category overrides for more specific icons
+const SUB_ICON_RULES: { keyword: string; icon: string }[] = [
+  { keyword: "회/횟집", icon: "🐟" },
+  { keyword: "해산물", icon: "🦐" },
+  { keyword: "삼겹살/돼지구이", icon: "🥩" },
+  { keyword: "소고기/한우구이", icon: "🥩" },
+  { keyword: "곱창/막창", icon: "🥩" },
+  { keyword: "닭/오리구이", icon: "🍗" },
+  { keyword: "스테이크", icon: "🥩" },
+  { keyword: "햄버거", icon: "🍔" },
+  { keyword: "피자", icon: "🍕" },
+  { keyword: "카페/디저트", icon: "☕" },
+  { keyword: "베이커리", icon: "🥐" },
+  { keyword: "치킨", icon: "🍗" },
+  { keyword: "주점/포차", icon: "🍺" },
+  { keyword: "이자카야", icon: "🍶" },
+  { keyword: "라멘", icon: "🍜" },
+  { keyword: "국밥/해장국", icon: "🍲" },
+  { keyword: "분식", icon: "🍜" },
+];
+
+const DEFAULT_ICON = "🍴";
+
+export function getCuisineIcon(cuisineType: string | null | undefined): string {
+  if (!cuisineType) return DEFAULT_ICON;
+
+  // Check sub-category first
+  for (const rule of SUB_ICON_RULES) {
+    if (cuisineType.includes(rule.keyword)) return rule.icon;
+  }
+
+  // Fall back to main category (prefix before |)
+  const main = cuisineType.split("|")[0];
+  return CUISINE_ICON_MAP[main] || DEFAULT_ICON;
+}