3134994817
- 식당별 1:1 비공개 메모 CRUD (user_memos 테이블) - 내 기록에 리뷰/메모 탭 분리 - 백오피스 유저 관리에 메모 수/상세 표시 - 리뷰/메모 작성 시 현재 날짜 기본값 - 지도우선/목록우선 버튼 Material Symbols 아이콘 적용 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2720 lines
119 KiB
TypeScript
2720 lines
119 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useState } from "react";
|
||
import { api } 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" | "daemon";
|
||
|
||
function CacheFlushButton() {
|
||
const [flushing, setFlushing] = useState(false);
|
||
|
||
const handleFlush = async () => {
|
||
if (!confirm("Redis 캐시를 초기화하시겠습니까?")) return;
|
||
setFlushing(true);
|
||
try {
|
||
await api.flushCache();
|
||
alert("캐시가 초기화되었습니다.");
|
||
} catch (e) {
|
||
alert("캐시 초기화 실패: " + (e instanceof Error ? e.message : e));
|
||
} finally {
|
||
setFlushing(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<button
|
||
onClick={handleFlush}
|
||
disabled={flushing}
|
||
className="px-3 py-1.5 text-xs bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 disabled:opacity-50 transition-colors"
|
||
>
|
||
{flushing ? "초기화 중..." : "🗑 캐시 초기화"}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
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-background flex items-center justify-center text-gray-500">로딩 중...</div>;
|
||
}
|
||
|
||
if (!user) {
|
||
return (
|
||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||
<div className="text-center">
|
||
<p className="text-gray-600 mb-4">로그인이 필요합니다</p>
|
||
<a href="/" className="text-brand-600 hover:underline">메인으로 돌아가기</a>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background text-gray-900">
|
||
<header className="bg-surface border-b border-brand-100 px-6 py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<img src="/logo-80h.png" alt="Tasteby" className="h-7" />
|
||
<span className="text-xl font-bold text-gray-500">Admin</span>
|
||
{!isAdmin && (
|
||
<span className="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">읽기 전용</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{isAdmin && <CacheFlushButton />}
|
||
<a href="/" className="text-sm text-brand-600 hover:underline">
|
||
← 메인으로
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<nav className="mt-3 flex gap-1">
|
||
{(["channels", "videos", "restaurants", "users", "daemon"] as Tab[]).map((t) => (
|
||
<button
|
||
key={t}
|
||
onClick={() => setTab(t)}
|
||
className={`px-4 py-2 text-sm rounded-t font-medium ${
|
||
tab === t
|
||
? "bg-brand-600 text-white"
|
||
: "bg-brand-50 text-brand-700 hover:bg-brand-100"
|
||
}`}
|
||
>
|
||
{t === "channels" ? "채널 관리" : t === "videos" ? "영상 관리" : t === "restaurants" ? "식당 관리" : t === "users" ? "유저 관리" : "데몬 설정"}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</header>
|
||
|
||
<main className="max-w-6xl mx-auto p-6">
|
||
{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({ isAdmin }: { isAdmin: boolean }) {
|
||
const [channels, setChannels] = useState<Channel[]>([]);
|
||
const [newId, setNewId] = useState("");
|
||
const [newName, setNewName] = useState("");
|
||
const [newFilter, setNewFilter] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
const [scanResult, setScanResult] = useState<Record<string, string>>({});
|
||
|
||
const load = useCallback(() => {
|
||
api.getChannels().then(setChannels).catch(console.error);
|
||
}, []);
|
||
|
||
useEffect(() => { load(); }, [load]);
|
||
|
||
const handleAdd = async () => {
|
||
if (!newId.trim() || !newName.trim()) return;
|
||
setLoading(true);
|
||
try {
|
||
await api.addChannel(newId.trim(), newName.trim(), newFilter.trim() || undefined);
|
||
setNewId("");
|
||
setNewName("");
|
||
setNewFilter("");
|
||
load();
|
||
} catch (e: unknown) {
|
||
alert(e instanceof Error ? e.message : "채널 추가 실패");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const [editingChannel, setEditingChannel] = useState<string | null>(null);
|
||
const [editDesc, setEditDesc] = useState("");
|
||
const [editTags, setEditTags] = useState("");
|
||
const [editOrder, setEditOrder] = useState<number>(99);
|
||
|
||
const handleSaveChannel = async (id: string) => {
|
||
try {
|
||
await api.updateChannel(id, { description: editDesc, tags: editTags, sort_order: editOrder });
|
||
setEditingChannel(null);
|
||
load();
|
||
} catch {
|
||
alert("채널 수정 실패");
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (channelId: string, channelName: string) => {
|
||
if (!confirm(`"${channelName}" 채널을 삭제하시겠습니까?`)) return;
|
||
try {
|
||
await api.deleteChannel(channelId);
|
||
load();
|
||
} catch {
|
||
alert("채널 삭제 실패");
|
||
}
|
||
};
|
||
|
||
const handleScan = async (channelId: string, full: boolean = false) => {
|
||
setScanResult((prev) => ({ ...prev, [channelId]: full ? "전체 스캔 중..." : "스캔 중..." }));
|
||
try {
|
||
const res = await api.scanChannel(channelId, full);
|
||
setScanResult((prev) => ({
|
||
...prev,
|
||
[channelId]: `${res.total_fetched}개 조회, ${res.new_videos}개 신규${(res as Record<string, unknown>).filtered ? `, ${(res as Record<string, unknown>).filtered}개 필터링` : ""}`,
|
||
}));
|
||
} catch {
|
||
setScanResult((prev) => ({ ...prev, [channelId]: "스캔 실패" }));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
{isAdmin && <div className="bg-surface rounded-lg shadow p-4 mb-6">
|
||
<h2 className="font-semibold mb-3">채널 추가</h2>
|
||
<div className="flex gap-2">
|
||
<input
|
||
placeholder="YouTube Channel ID"
|
||
value={newId}
|
||
onChange={(e) => setNewId(e.target.value)}
|
||
className="border rounded px-3 py-2 flex-1 text-sm bg-surface text-gray-900"
|
||
/>
|
||
<input
|
||
placeholder="채널 이름"
|
||
value={newName}
|
||
onChange={(e) => setNewName(e.target.value)}
|
||
className="border rounded px-3 py-2 flex-1 text-sm bg-surface text-gray-900"
|
||
/>
|
||
<input
|
||
placeholder="제목 필터 (선택)"
|
||
value={newFilter}
|
||
onChange={(e) => setNewFilter(e.target.value)}
|
||
className="border rounded px-3 py-2 w-40 text-sm bg-surface text-gray-900"
|
||
/>
|
||
<button
|
||
onClick={handleAdd}
|
||
disabled={loading}
|
||
className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
추가
|
||
</button>
|
||
</div>
|
||
</div>}
|
||
|
||
<div className="bg-surface rounded-lg shadow">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
|
||
<tr>
|
||
<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-left px-4 py-3">태그</th>
|
||
<th className="text-center px-4 py-3">순서</th>
|
||
<th className="text-right 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>
|
||
<tbody>
|
||
{channels.map((ch) => (
|
||
<tr key={ch.id} className="border-b hover:bg-brand-50/50">
|
||
<td className="px-4 py-3 font-medium">{ch.channel_name}</td>
|
||
<td className="px-4 py-3 text-gray-500 font-mono text-xs">
|
||
{ch.channel_id}
|
||
</td>
|
||
<td className="px-4 py-3 text-sm">
|
||
{ch.title_filter ? (
|
||
<span className="px-2 py-0.5 bg-brand-50 text-brand-700 rounded text-xs">
|
||
{ch.title_filter}
|
||
</span>
|
||
) : (
|
||
<span className="text-gray-400 text-xs">전체</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-3 text-xs">
|
||
{editingChannel === ch.id ? (
|
||
<input value={editDesc} onChange={(e) => setEditDesc(e.target.value)}
|
||
className="border rounded px-2 py-1 text-xs w-32 bg-surface text-gray-900" placeholder="설명" />
|
||
) : (
|
||
<span className="text-gray-600 cursor-pointer" onClick={() => {
|
||
if (!isAdmin) return;
|
||
setEditingChannel(ch.id); setEditDesc(ch.description || ""); setEditTags(ch.tags || ""); setEditOrder(ch.sort_order ?? 99);
|
||
}}>{ch.description || <span className="text-gray-400">-</span>}</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-3 text-xs">
|
||
{editingChannel === ch.id ? (
|
||
<div className="flex gap-1">
|
||
<input value={editTags} onChange={(e) => setEditTags(e.target.value)}
|
||
className="border rounded px-2 py-1 text-xs w-40 bg-surface text-gray-900" placeholder="태그 (쉼표 구분)" />
|
||
<button onClick={() => handleSaveChannel(ch.id)} className="text-brand-600 text-xs hover:underline">저장</button>
|
||
<button onClick={() => setEditingChannel(null)} className="text-gray-400 text-xs hover:underline">취소</button>
|
||
</div>
|
||
) : (
|
||
<span className="text-gray-500 cursor-pointer" onClick={() => {
|
||
if (!isAdmin) return;
|
||
setEditingChannel(ch.id); setEditDesc(ch.description || ""); setEditTags(ch.tags || ""); setEditOrder(ch.sort_order ?? 99);
|
||
}}>{ch.tags ? ch.tags.split(",").map(t => t.trim()).join(", ") : <span className="text-gray-400">-</span>}</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-3 text-center text-xs">
|
||
{editingChannel === ch.id ? (
|
||
<input type="number" value={editOrder} onChange={(e) => setEditOrder(Number(e.target.value))}
|
||
className="border rounded px-2 py-1 text-xs w-14 text-center bg-surface text-gray-900" min={1} />
|
||
) : (
|
||
<span className="text-gray-500">{ch.sort_order ?? 99}</span>
|
||
)}
|
||
</td>
|
||
<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>
|
||
{isAdmin && <td className="px-4 py-3 flex gap-3">
|
||
<button
|
||
onClick={() => handleScan(ch.channel_id)}
|
||
className="text-brand-600 hover:underline text-sm"
|
||
>
|
||
스캔
|
||
</button>
|
||
<button
|
||
onClick={() => handleScan(ch.channel_id, true)}
|
||
className="text-purple-600 hover:underline text-sm"
|
||
>
|
||
전체 스캔
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(ch.id, ch.channel_name)}
|
||
className="text-red-500 hover:underline text-sm"
|
||
>
|
||
삭제
|
||
</button>
|
||
</td>}
|
||
<td className="px-4 py-3 text-gray-600">
|
||
{scanResult[ch.channel_id] || "-"}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{channels.length === 0 && (
|
||
<tr>
|
||
<td colSpan={7} className="px-4 py-8 text-center text-gray-400">
|
||
등록된 채널이 없습니다
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── 영상 관리 ─── */
|
||
type VideoSortKey = "status" | "channel_name" | "title" | "published_at";
|
||
|
||
function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
|
||
const [videos, setVideos] = useState<Video[]>([]);
|
||
const [channels, setChannels] = useState<Channel[]>([]);
|
||
const [channelFilter, setChannelFilter] = useState("");
|
||
const [statusFilter, setStatusFilter] = useState("");
|
||
const [titleSearch, setTitleSearch] = useState("");
|
||
const [processing, setProcessing] = useState(false);
|
||
const [processResult, setProcessResult] = useState("");
|
||
const [sortKey, setSortKey] = useState<VideoSortKey>("published_at");
|
||
const [sortAsc, setSortAsc] = useState(false);
|
||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||
const [deleting, setDeleting] = useState(false);
|
||
const [page, setPage] = useState(0);
|
||
const perPage = 15;
|
||
const [detail, setDetail] = useState<VideoDetail | null>(null);
|
||
const [detailLoading, setDetailLoading] = useState(false);
|
||
const [fetchingTranscript, setFetchingTranscript] = useState(false);
|
||
const [transcriptMode, setTranscriptMode] = useState<"auto" | "manual" | "generated">("auto");
|
||
const [extracting, setExtracting] = useState(false);
|
||
const [showPrompt, setShowPrompt] = useState(false);
|
||
const [prompt, setPrompt] = useState("");
|
||
const [editingTitle, setEditingTitle] = useState(false);
|
||
const [editTitle, setEditTitle] = useState("");
|
||
const [editingRestIdx, setEditingRestIdx] = useState<number | null>(null);
|
||
const [editRest, setEditRest] = useState<{
|
||
name: string;
|
||
cuisine_type: string;
|
||
foods_mentioned: string;
|
||
evaluation: string;
|
||
address: string;
|
||
region: string;
|
||
price_range: string;
|
||
guests: string;
|
||
} | null>(null);
|
||
const [saving, setSaving] = useState(false);
|
||
const [showManualAdd, setShowManualAdd] = useState(false);
|
||
const [manualForm, setManualForm] = useState({ name: "", address: "", region: "", cuisine_type: "", price_range: "", foods_mentioned: "", evaluation: "", guests: "" });
|
||
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 [remappingFoods, setRemappingFoods] = useState(false);
|
||
const [foodsProgress, setFoodsProgress] = useState<{ current: number; total: number; updated: number } | null>(null);
|
||
const [bulkProgress, setBulkProgress] = useState<{
|
||
label: string;
|
||
total: number;
|
||
current: number;
|
||
currentTitle: string;
|
||
results: { title: string; detail: string; error?: boolean }[];
|
||
waiting?: number;
|
||
} | null>(null);
|
||
|
||
useEffect(() => {
|
||
api.getChannels().then(setChannels).catch(console.error);
|
||
}, []);
|
||
|
||
const load = useCallback((reset = true) => {
|
||
api
|
||
.getVideos({ status: statusFilter || undefined })
|
||
.then((data) => {
|
||
setVideos(data);
|
||
if (reset) {
|
||
setSelected(new Set());
|
||
setPage(0);
|
||
}
|
||
})
|
||
.catch(console.error);
|
||
}, [statusFilter]);
|
||
|
||
useEffect(() => { load(); }, [load]);
|
||
|
||
const handleSelectVideo = async (v: Video) => {
|
||
if (detail?.id === v.id) {
|
||
setDetail(null);
|
||
return;
|
||
}
|
||
setDetailLoading(true);
|
||
try {
|
||
const d = await api.getVideoDetail(v.id);
|
||
setDetail(d);
|
||
} catch {
|
||
alert("영상 상세 조회 실패");
|
||
} finally {
|
||
setDetailLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id: string, title: string) => {
|
||
if (!confirm(`"${title}" 영상을 삭제하시겠습니까?\n연결된 식당 데이터도 함께 삭제됩니다.`)) return;
|
||
try {
|
||
await api.deleteVideo(id);
|
||
load();
|
||
} catch {
|
||
alert("영상 삭제 실패");
|
||
}
|
||
};
|
||
|
||
const handleSkip = async (id: string) => {
|
||
try {
|
||
await api.skipVideo(id);
|
||
load();
|
||
} catch {
|
||
alert("건너뛰기 실패");
|
||
}
|
||
};
|
||
|
||
const handleBulkSkip = async () => {
|
||
if (selected.size === 0) return;
|
||
if (!confirm(`선택한 ${selected.size}개 영상을 건너뛰시겠습니까?`)) return;
|
||
for (const id of selected) {
|
||
try { await api.skipVideo(id); } catch { /* ignore */ }
|
||
}
|
||
setSelected(new Set());
|
||
load();
|
||
};
|
||
|
||
const handleBulkDelete = async () => {
|
||
if (selected.size === 0) return;
|
||
if (!confirm(`선택한 ${selected.size}개 영상을 삭제하시겠습니까?\n연결된 식당 데이터도 함께 삭제됩니다.`)) return;
|
||
setDeleting(true);
|
||
let failed = 0;
|
||
for (const id of selected) {
|
||
try { await api.deleteVideo(id); } catch { failed++; }
|
||
}
|
||
setSelected(new Set());
|
||
load();
|
||
setDeleting(false);
|
||
if (failed > 0) alert(`${failed}개 삭제 실패`);
|
||
};
|
||
|
||
const toggleSelect = (id: string) => {
|
||
setSelected((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(id)) next.delete(id); else next.add(id);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const handleProcess = async () => {
|
||
setProcessing(true);
|
||
setProcessResult("");
|
||
try {
|
||
const res = await api.triggerProcessing(10);
|
||
setProcessResult(`${res.restaurants_extracted}개 식당 추출 완료`);
|
||
load();
|
||
} catch {
|
||
setProcessResult("처리 실패");
|
||
} finally {
|
||
setProcessing(false);
|
||
}
|
||
};
|
||
|
||
const startBulkStream = async (mode: "transcript" | "extract", ids?: string[]) => {
|
||
const isTranscript = mode === "transcript";
|
||
const setRunning = isTranscript ? setBulkTranscripting : setBulkExtracting;
|
||
const hasSelection = ids && ids.length > 0;
|
||
|
||
try {
|
||
let count: number;
|
||
if (hasSelection) {
|
||
count = ids.length;
|
||
} else {
|
||
const pending = isTranscript
|
||
? await api.getBulkTranscriptPending()
|
||
: await api.getBulkExtractPending();
|
||
if (pending.count === 0) {
|
||
alert(isTranscript ? "자막 없는 영상이 없습니다" : "추출 대기 중인 영상이 없습니다");
|
||
return;
|
||
}
|
||
count = pending.count;
|
||
}
|
||
const msg = isTranscript
|
||
? `${hasSelection ? "선택한 " : "자막 없는 "}영상 ${count}개의 트랜스크립트를 수집하시겠습니까?`
|
||
: `${hasSelection ? "선택한 " : "LLM 추출이 안된 "}영상 ${count}개를 벌크 처리하시겠습니까?`;
|
||
if (!confirm(msg)) return;
|
||
|
||
setRunning(true);
|
||
setBulkProgress({
|
||
label: isTranscript ? "벌크 자막 수집" : "벌크 LLM 추출",
|
||
total: count, current: 0, currentTitle: "", results: [],
|
||
});
|
||
|
||
const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
|
||
const endpoint = isTranscript ? "/api/videos/bulk-transcript" : "/api/videos/bulk-extract";
|
||
const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
|
||
const headers: Record<string, string> = { "Content-Type": "application/json" };
|
||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
||
const resp = await fetch(`${apiBase}${endpoint}`, {
|
||
method: "POST",
|
||
headers,
|
||
body: hasSelection ? JSON.stringify({ ids }) : undefined,
|
||
});
|
||
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; }
|
||
|
||
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") {
|
||
setBulkProgress((p) => p ? { ...p, current: ev.index + 1, currentTitle: ev.title, waiting: undefined } : p);
|
||
} else if (ev.type === "wait") {
|
||
setBulkProgress((p) => p ? { ...p, waiting: ev.delay } : p);
|
||
} else if (ev.type === "done") {
|
||
const detail = isTranscript
|
||
? `${ev.source} / ${ev.length?.toLocaleString()}자`
|
||
: `${ev.restaurants}개 식당`;
|
||
setBulkProgress((p) => p ? { ...p, results: [...p.results, { title: ev.title, detail }] } : p);
|
||
} else if (ev.type === "error") {
|
||
setBulkProgress((p) => p ? { ...p, results: [...p.results, { title: ev.title, detail: ev.message, error: true }] } : p);
|
||
} else if (ev.type === "complete") {
|
||
setRunning(false);
|
||
load();
|
||
}
|
||
} catch { /* ignore */ }
|
||
}
|
||
}
|
||
setRunning(false);
|
||
load();
|
||
} catch {
|
||
setRunning(false);
|
||
}
|
||
};
|
||
|
||
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 startRemapFoods = async () => {
|
||
if (!confirm("전체 식당의 메뉴 태그를 LLM으로 재생성합니다 (한글, 최대 10개). 진행하시겠습니까?")) return;
|
||
setRemappingFoods(true);
|
||
setFoodsProgress(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-foods`, { method: "POST", headers });
|
||
if (!resp.ok) {
|
||
alert(`메뉴 태그 재생성 실패: ${resp.status}`);
|
||
setRemappingFoods(false);
|
||
return;
|
||
}
|
||
const reader = resp.body?.getReader();
|
||
const decoder = new TextDecoder();
|
||
if (!reader) { setRemappingFoods(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") {
|
||
setFoodsProgress({ current: ev.current, total: ev.total, updated: ev.updated || 0 });
|
||
} else if (ev.type === "complete") {
|
||
setFoodsProgress({ current: ev.total, total: ev.total, updated: ev.updated });
|
||
} else if (ev.type === "error") {
|
||
alert(`메뉴 태그 재생성 오류: ${ev.message}`);
|
||
}
|
||
} catch { /* ignore */ }
|
||
}
|
||
}
|
||
setRemappingFoods(false);
|
||
} catch {
|
||
setRemappingFoods(false);
|
||
}
|
||
};
|
||
|
||
const handleSort = (key: VideoSortKey) => {
|
||
if (sortKey === key) {
|
||
setSortAsc(!sortAsc);
|
||
} else {
|
||
setSortKey(key);
|
||
setSortAsc(true);
|
||
}
|
||
};
|
||
|
||
const filteredVideos = videos.filter((v) => {
|
||
if (titleSearch && !v.title.toLowerCase().includes(titleSearch.toLowerCase())) return false;
|
||
if (channelFilter && v.channel_name !== channelFilter) return false;
|
||
return true;
|
||
});
|
||
|
||
const sortedVideos = [...filteredVideos].sort((a, b) => {
|
||
const av = a[sortKey] ?? "";
|
||
const bv = b[sortKey] ?? "";
|
||
const cmp = av < bv ? -1 : av > bv ? 1 : 0;
|
||
return sortAsc ? cmp : -cmp;
|
||
});
|
||
|
||
const totalPages = Math.max(1, Math.ceil(sortedVideos.length / perPage));
|
||
const pagedVideos = sortedVideos.slice(page * perPage, (page + 1) * perPage);
|
||
|
||
const toggleSelectAll = () => {
|
||
const pageIds = pagedVideos.map((v) => v.id);
|
||
const allSelected = pageIds.every((id) => selected.has(id));
|
||
if (allSelected) {
|
||
setSelected((prev) => {
|
||
const next = new Set(prev);
|
||
pageIds.forEach((id) => next.delete(id));
|
||
return next;
|
||
});
|
||
} else {
|
||
setSelected((prev) => new Set([...prev, ...pageIds]));
|
||
}
|
||
};
|
||
|
||
const sortIcon = (key: VideoSortKey) => {
|
||
if (sortKey !== key) return " ↕";
|
||
return sortAsc ? " ↑" : " ↓";
|
||
};
|
||
|
||
const statusColor: Record<string, string> = {
|
||
pending: "bg-yellow-100 text-yellow-800",
|
||
processing: "bg-brand-100 text-brand-800",
|
||
done: "bg-green-100 text-green-800",
|
||
error: "bg-red-100 text-red-800",
|
||
skip: "bg-gray-100 text-gray-600",
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div className="flex flex-wrap items-center gap-3 mb-4">
|
||
<select
|
||
value={channelFilter}
|
||
onChange={(e) => { setChannelFilter(e.target.value); setPage(0); }}
|
||
className="border rounded px-3 py-2 text-sm bg-surface text-gray-900"
|
||
>
|
||
<option value="">전체 채널</option>
|
||
{channels.map((ch) => (
|
||
<option key={ch.id} value={ch.channel_name}>{ch.channel_name}</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
value={statusFilter}
|
||
onChange={(e) => setStatusFilter(e.target.value)}
|
||
className="border rounded px-3 py-2 text-sm bg-surface text-gray-900"
|
||
>
|
||
<option value="">전체 상태</option>
|
||
<option value="pending">대기중</option>
|
||
<option value="processing">처리중</option>
|
||
<option value="done">완료</option>
|
||
<option value="error">오류</option>
|
||
<option value="skip">건너뛰기</option>
|
||
</select>
|
||
<div className="flex">
|
||
<input
|
||
type="text"
|
||
placeholder="제목 검색..."
|
||
value={titleSearch}
|
||
onChange={(e) => { setTitleSearch(e.target.value); setPage(0); }}
|
||
onKeyDown={(e) => e.key === "Escape" && setTitleSearch("")}
|
||
className="border border-r-0 rounded-l px-3 py-2 text-sm w-48 bg-surface text-gray-900"
|
||
/>
|
||
{titleSearch ? (
|
||
<button
|
||
onClick={() => { setTitleSearch(""); setPage(0); }}
|
||
className="border rounded-r px-2 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100"
|
||
>
|
||
✕
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
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="새로고침"
|
||
>
|
||
↻
|
||
</button>
|
||
)}
|
||
</div>
|
||
{isAdmin && <>
|
||
<button
|
||
type="button"
|
||
onClick={handleProcess}
|
||
disabled={processing}
|
||
className="bg-green-600 text-white px-4 py-2 rounded text-sm hover:bg-green-700 disabled:opacity-50"
|
||
>
|
||
{processing ? "처리 중..." : "대기 영상 처리"}
|
||
</button>
|
||
<button
|
||
onClick={() => startBulkStream("transcript")}
|
||
disabled={bulkTranscripting || bulkExtracting}
|
||
className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
{bulkTranscripting ? "자막 수집 중..." : "벌크 자막 수집"}
|
||
</button>
|
||
<button
|
||
onClick={() => startBulkStream("extract")}
|
||
disabled={bulkExtracting || bulkTranscripting}
|
||
className="bg-purple-600 text-white px-4 py-2 rounded text-sm hover:bg-purple-700 disabled:opacity-50"
|
||
>
|
||
{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>
|
||
<button
|
||
onClick={startRemapFoods}
|
||
disabled={remappingFoods || bulkExtracting || bulkTranscripting || rebuildingVectors || remappingCuisine}
|
||
className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
{remappingFoods ? "메뉴태그 재생성 중..." : "메뉴태그 재생성"}
|
||
</button>
|
||
</>}
|
||
{processResult && (
|
||
<span className="text-sm text-gray-600">{processResult}</span>
|
||
)}
|
||
{isAdmin && selected.size > 0 && (
|
||
<>
|
||
<button
|
||
onClick={() => startBulkStream("transcript", Array.from(selected))}
|
||
disabled={bulkTranscripting || bulkExtracting}
|
||
className="bg-brand-500 text-white px-4 py-2 rounded text-sm hover:bg-brand-600 disabled:opacity-50"
|
||
>
|
||
선택 자막 수집 ({selected.size})
|
||
</button>
|
||
<button
|
||
onClick={() => startBulkStream("extract", Array.from(selected))}
|
||
disabled={bulkExtracting || bulkTranscripting}
|
||
className="bg-purple-500 text-white px-4 py-2 rounded text-sm hover:bg-purple-600 disabled:opacity-50"
|
||
>
|
||
선택 LLM 추출 ({selected.size})
|
||
</button>
|
||
<button
|
||
onClick={handleBulkSkip}
|
||
className="bg-gray-500 text-white px-4 py-2 rounded text-sm hover:bg-gray-600"
|
||
>
|
||
선택 건너뛰기 ({selected.size})
|
||
</button>
|
||
<button
|
||
onClick={handleBulkDelete}
|
||
disabled={deleting}
|
||
className="bg-red-500 text-white px-4 py-2 rounded text-sm hover:bg-red-600 disabled:opacity-50"
|
||
>
|
||
{deleting ? "삭제 중..." : `선택 삭제 (${selected.size})`}
|
||
</button>
|
||
</>
|
||
)}
|
||
<span className="text-sm text-gray-400 ml-auto">
|
||
{(titleSearch || channelFilter) ? `${filteredVideos.length} / ` : ""}총 {videos.length}개
|
||
</span>
|
||
</div>
|
||
|
||
<div className="bg-surface rounded-lg shadow overflow-auto min-w-[800px]">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
|
||
<tr>
|
||
<th className="px-4 py-3 w-8">
|
||
<input
|
||
type="checkbox"
|
||
checked={pagedVideos.length > 0 && pagedVideos.every((v) => selected.has(v.id))}
|
||
onChange={toggleSelectAll}
|
||
className="rounded"
|
||
/>
|
||
</th>
|
||
<th
|
||
className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100"
|
||
onClick={() => handleSort("status")}
|
||
>
|
||
상태{sortIcon("status")}
|
||
</th>
|
||
<th
|
||
className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100"
|
||
onClick={() => handleSort("channel_name")}
|
||
>
|
||
채널{sortIcon("channel_name")}
|
||
</th>
|
||
<th
|
||
className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100"
|
||
onClick={() => handleSort("title")}
|
||
>
|
||
제목{sortIcon("title")}
|
||
</th>
|
||
<th className="text-center px-4 py-3 whitespace-nowrap">처리</th>
|
||
<th className="text-center px-4 py-3 whitespace-nowrap">식당</th>
|
||
<th
|
||
className="text-left px-4 py-3 whitespace-nowrap cursor-pointer select-none hover:bg-gray-100"
|
||
onClick={() => handleSort("published_at")}
|
||
>
|
||
게시일{sortIcon("published_at")}
|
||
</th>
|
||
{isAdmin && <th className="text-left px-4 py-3 whitespace-nowrap">액션</th>}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{pagedVideos.map((v) => (
|
||
<tr key={v.id} className={`border-b hover:bg-brand-50/50 ${selected.has(v.id) ? "bg-brand-50" : ""}`}>
|
||
<td className="px-4 py-3">
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.has(v.id)}
|
||
onChange={() => toggleSelect(v.id)}
|
||
className="rounded"
|
||
/>
|
||
</td>
|
||
<td className="px-4 py-3">
|
||
<span
|
||
className={`px-2 py-1 rounded text-xs font-medium ${
|
||
statusColor[v.status] || "bg-gray-100"
|
||
}`}
|
||
>
|
||
{v.status}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-3 text-gray-600">{v.channel_name}</td>
|
||
<td className="px-4 py-3 max-w-[300px]">
|
||
<button
|
||
onClick={() => handleSelectVideo(v)}
|
||
className={`text-left text-sm hover:underline truncate block max-w-full ${
|
||
detail?.id === v.id ? "text-blue-800 font-semibold" : "text-brand-600"
|
||
}`}
|
||
title={v.title}
|
||
>
|
||
{v.title}
|
||
</button>
|
||
</td>
|
||
<td className="px-4 py-3 text-center whitespace-nowrap">
|
||
<span title="자막" className={`inline-block w-5 text-center text-xs ${v.has_transcript ? "text-green-600" : "text-gray-300"}`}>
|
||
{v.has_transcript ? "T" : "-"}
|
||
</span>
|
||
<span title="LLM 추출" className={`inline-block w-5 text-center text-xs ${v.has_llm ? "text-brand-600" : "text-gray-300"}`}>
|
||
{v.has_llm ? "L" : "-"}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-3 text-center">
|
||
{v.restaurant_count > 0 ? (
|
||
<span
|
||
className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
|
||
v.matched_count === v.restaurant_count
|
||
? "bg-green-100 text-green-700"
|
||
: v.matched_count > 0
|
||
? "bg-yellow-100 text-yellow-700"
|
||
: "bg-red-100 text-red-600"
|
||
}`}
|
||
title={`매칭 ${v.matched_count}/${v.restaurant_count}`}
|
||
>
|
||
{v.matched_count}/{v.restaurant_count}
|
||
</span>
|
||
) : (
|
||
<span className="text-gray-300 text-xs">-</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-3 text-gray-500 whitespace-nowrap">
|
||
{v.published_at?.slice(0, 10) || "-"}
|
||
</td>
|
||
{isAdmin && <td className="px-4 py-3 whitespace-nowrap flex gap-3">
|
||
{v.status === "pending" && (
|
||
<button
|
||
onClick={() => handleSkip(v.id)}
|
||
className="text-gray-500 hover:underline text-sm"
|
||
>
|
||
건너뛰기
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => handleDelete(v.id, v.title)}
|
||
className="text-red-500 hover:underline text-sm"
|
||
>
|
||
삭제
|
||
</button>
|
||
</td>}
|
||
</tr>
|
||
))}
|
||
{videos.length === 0 && (
|
||
<tr>
|
||
<td colSpan={8} className="px-4 py-8 text-center text-gray-400">
|
||
영상이 없습니다
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{totalPages > 1 && (
|
||
<div className="flex items-center justify-center gap-2 mt-4">
|
||
<button
|
||
onClick={() => setPage(0)}
|
||
disabled={page === 0}
|
||
className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
|
||
>
|
||
«
|
||
</button>
|
||
<button
|
||
onClick={() => setPage(page - 1)}
|
||
disabled={page === 0}
|
||
className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
|
||
>
|
||
‹
|
||
</button>
|
||
<span className="text-sm text-gray-600 px-2">
|
||
{page + 1} / {totalPages}
|
||
</span>
|
||
<button
|
||
onClick={() => setPage(page + 1)}
|
||
disabled={page >= totalPages - 1}
|
||
className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
|
||
>
|
||
›
|
||
</button>
|
||
<button
|
||
onClick={() => setPage(totalPages - 1)}
|
||
disabled={page >= totalPages - 1}
|
||
className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
|
||
>
|
||
»
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 음식종류 재분류 진행 */}
|
||
{remapProgress && (
|
||
<div className="mt-4 bg-surface 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>
|
||
)}
|
||
|
||
{/* 메뉴태그 재생성 진행 */}
|
||
{foodsProgress && (
|
||
<div className="mt-4 bg-surface rounded-lg shadow p-4">
|
||
<h4 className="font-semibold text-sm mb-2">
|
||
메뉴태그 재생성 {foodsProgress.current >= foodsProgress.total ? "완료" : "진행 중"}
|
||
</h4>
|
||
<div className="w-full bg-gray-200 rounded-full h-2 mb-2">
|
||
<div
|
||
className="bg-brand-500 h-2 rounded-full transition-all"
|
||
style={{ width: `${foodsProgress.total ? (foodsProgress.current / foodsProgress.total) * 100 : 0}%` }}
|
||
/>
|
||
</div>
|
||
<p className="text-xs text-gray-500">
|
||
{foodsProgress.current}/{foodsProgress.total} — {foodsProgress.updated}개 업데이트
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 벡터 재생성 진행 */}
|
||
{vectorProgress && (
|
||
<div className="mt-4 bg-surface 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-surface rounded-lg shadow p-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h4 className="font-semibold text-sm">
|
||
{bulkProgress.label} ({bulkProgress.current}/{bulkProgress.total})
|
||
</h4>
|
||
{!bulkExtracting && !bulkTranscripting && (
|
||
<button
|
||
onClick={() => setBulkProgress(null)}
|
||
className="text-gray-400 hover:text-gray-600 text-sm"
|
||
>
|
||
닫기
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2 mb-3">
|
||
<div
|
||
className="bg-purple-600 h-2 rounded-full transition-all duration-300"
|
||
style={{ width: `${bulkProgress.total > 0 ? (bulkProgress.current / bulkProgress.total) * 100 : 0}%` }}
|
||
/>
|
||
</div>
|
||
{(bulkExtracting || bulkTranscripting) && bulkProgress.currentTitle && (
|
||
<p className="text-xs text-gray-500 mb-2">
|
||
{bulkProgress.waiting
|
||
? `⏳ ${bulkProgress.waiting}초 대기 중...`
|
||
: `처리 중: ${bulkProgress.currentTitle}`}
|
||
</p>
|
||
)}
|
||
{bulkProgress.results.length > 0 && (
|
||
<div className="max-h-40 overflow-y-auto text-xs space-y-1">
|
||
{bulkProgress.results.map((r, i) => (
|
||
<div key={i} className={`flex items-center gap-2 ${r.error ? "text-red-600" : "text-gray-600"}`}>
|
||
<span>{r.error ? "✗" : "✓"}</span>
|
||
<span className="truncate flex-1">{r.title}</span>
|
||
<span className={`shrink-0 ${r.error ? "text-red-500" : "text-purple-600"}`}>
|
||
{r.detail}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
{!bulkExtracting && !bulkTranscripting && bulkProgress.results.length > 0 && (
|
||
<p className="mt-2 text-sm font-medium text-gray-700">
|
||
완료! 성공 {bulkProgress.results.filter((r) => !r.error).length}/{bulkProgress.total}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 영상 상세 패널 */}
|
||
{detailLoading && (
|
||
<div className="mt-6 text-center text-gray-500 text-sm">로딩 중...</div>
|
||
)}
|
||
{detail && !detailLoading && (
|
||
<div className="mt-6 bg-surface rounded-lg shadow p-4">
|
||
<div className="flex items-center justify-between mb-4 gap-2">
|
||
{editingTitle ? (
|
||
<div className="flex items-center gap-2 flex-1">
|
||
<input
|
||
value={editTitle}
|
||
onChange={(e) => setEditTitle(e.target.value)}
|
||
className="flex-1 border rounded px-2 py-1 text-sm font-semibold"
|
||
/>
|
||
<button
|
||
onClick={async () => {
|
||
setSaving(true);
|
||
try {
|
||
await api.updateVideo(detail.id, { title: editTitle });
|
||
setDetail({ ...detail, title: editTitle });
|
||
setEditingTitle(false);
|
||
load(false);
|
||
} catch { alert("저장 실패"); }
|
||
finally { setSaving(false); }
|
||
}}
|
||
disabled={saving}
|
||
className="px-2 py-1 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
저장
|
||
</button>
|
||
<button
|
||
onClick={() => setEditingTitle(false)}
|
||
className="px-2 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100"
|
||
>
|
||
취소
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<h3
|
||
className={`font-semibold text-base ${isAdmin ? "cursor-pointer hover:text-brand-600" : ""}`}
|
||
onClick={isAdmin ? () => { setEditTitle(detail.title); setEditingTitle(true); } : undefined}
|
||
title={isAdmin ? "클릭하여 제목 수정" : undefined}
|
||
>
|
||
{detail.title}
|
||
</h3>
|
||
)}
|
||
<button
|
||
onClick={() => { setDetail(null); setEditingTitle(false); setEditingRestIdx(null); }}
|
||
className="text-gray-400 hover:text-gray-600 text-xl leading-none"
|
||
>
|
||
x
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6" style={{ maxHeight: "70vh" }}>
|
||
{/* 왼쪽: YouTube 임베드 */}
|
||
<div className="overflow-y-auto">
|
||
<div className="aspect-video rounded overflow-hidden bg-black">
|
||
<iframe
|
||
src={`https://www.youtube.com/embed/${detail.video_id}`}
|
||
title={detail.title}
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
className="w-full h-full"
|
||
/>
|
||
</div>
|
||
<div className="mt-2 text-xs text-gray-500">
|
||
<span>{detail.channel_name}</span>
|
||
{detail.published_at && (
|
||
<span className="ml-3">{detail.published_at.slice(0, 10)}</span>
|
||
)}
|
||
<span className={`ml-3 px-2 py-0.5 rounded ${
|
||
detail.status === "done" ? "bg-green-100 text-green-800" :
|
||
detail.status === "error" ? "bg-red-100 text-red-800" :
|
||
"bg-yellow-100 text-yellow-800"
|
||
}`}>
|
||
{detail.status}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 오른쪽: 추출 정보 + 트랜스크립트 */}
|
||
<div className="space-y-4 overflow-y-auto">
|
||
{/* 추출된 식당 정보 */}
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h4 className="font-semibold text-sm">
|
||
추출된 식당 ({detail.restaurants.length})
|
||
</h4>
|
||
{isAdmin && detail.transcript && (
|
||
<>
|
||
<button
|
||
onClick={async () => {
|
||
setExtracting(true);
|
||
try {
|
||
const res = await api.extractRestaurants(detail.id, showPrompt && prompt ? prompt : undefined);
|
||
alert(`${res.restaurants_extracted}개 식당 추출 완료`);
|
||
const d = await api.getVideoDetail(detail.id);
|
||
setDetail(d);
|
||
load(false);
|
||
} catch {
|
||
alert("식당 추출 실패");
|
||
} finally {
|
||
setExtracting(false);
|
||
}
|
||
}}
|
||
disabled={extracting}
|
||
className="px-2 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
|
||
>
|
||
{extracting ? "추출 중..." : "LLM 식당 추출"}
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
if (!showPrompt && !prompt) {
|
||
try {
|
||
const res = await api.getExtractPrompt();
|
||
setPrompt(res.prompt);
|
||
} catch { /* ignore */ }
|
||
}
|
||
setShowPrompt(!showPrompt);
|
||
}}
|
||
className="px-2 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100"
|
||
>
|
||
{showPrompt ? "프롬프트 숨기기" : "프롬프트 편집"}
|
||
</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>}
|
||
</div>
|
||
{showManualAdd && (
|
||
<div className="border rounded p-3 mb-3 bg-green-50 space-y-2">
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">식당명 *</label>
|
||
<input value={manualForm.name} onChange={(e) => setManualForm(f => ({ ...f, name: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="식당 이름" />
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">주소</label>
|
||
<input value={manualForm.address} onChange={(e) => setManualForm(f => ({ ...f, address: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="주소 (없으면 지역)" />
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">지역</label>
|
||
<input value={manualForm.region} onChange={(e) => setManualForm(f => ({ ...f, region: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="서울 강남" />
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">음식 종류</label>
|
||
<input value={manualForm.cuisine_type} onChange={(e) => setManualForm(f => ({ ...f, cuisine_type: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="한식, 일식..." />
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">메뉴</label>
|
||
<input value={manualForm.foods_mentioned} onChange={(e) => setManualForm(f => ({ ...f, foods_mentioned: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="메뉴1, 메뉴2" />
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">게스트</label>
|
||
<input value={manualForm.guests} onChange={(e) => setManualForm(f => ({ ...f, guests: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="게스트1, 게스트2" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] text-gray-500">평가/요약</label>
|
||
<textarea value={manualForm.evaluation} onChange={(e) => setManualForm(f => ({ ...f, evaluation: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" rows={2} placeholder="맛집 평가 내용" />
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={async () => {
|
||
if (!manualForm.name.trim()) { alert("식당명을 입력해주세요"); return; }
|
||
setManualAdding(true);
|
||
try {
|
||
await api.addManualRestaurant(detail.id, {
|
||
name: manualForm.name.trim(),
|
||
address: manualForm.address.trim() || undefined,
|
||
region: manualForm.region.trim() || undefined,
|
||
cuisine_type: manualForm.cuisine_type.trim() || undefined,
|
||
foods_mentioned: manualForm.foods_mentioned.split(",").map(s => s.trim()).filter(Boolean),
|
||
evaluation: manualForm.evaluation.trim() || undefined,
|
||
guests: manualForm.guests.split(",").map(s => s.trim()).filter(Boolean),
|
||
});
|
||
const d = await api.getVideoDetail(detail.id);
|
||
setDetail(d);
|
||
load(false);
|
||
setManualForm({ name: "", address: "", region: "", cuisine_type: "", price_range: "", foods_mentioned: "", evaluation: "", guests: "" });
|
||
setShowManualAdd(false);
|
||
} catch (e) {
|
||
alert((e as Error).message || "추가 실패");
|
||
} finally {
|
||
setManualAdding(false);
|
||
}
|
||
}}
|
||
disabled={manualAdding}
|
||
className="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
|
||
>
|
||
{manualAdding ? "추가 중..." : "식당 추가"}
|
||
</button>
|
||
<button onClick={() => setShowManualAdd(false)} className="px-3 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100">
|
||
취소
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{showPrompt && (
|
||
<textarea
|
||
value={prompt}
|
||
onChange={(e) => setPrompt(e.target.value)}
|
||
className="w-full border rounded p-2 text-xs font-mono mb-2 bg-surface text-gray-900"
|
||
rows={12}
|
||
placeholder="프롬프트 템플릿 ({title}, {transcript} 변수 사용)"
|
||
/>
|
||
)}
|
||
{detail.restaurants.length > 0 && (
|
||
<div>
|
||
<div className="space-y-2">
|
||
{detail.restaurants.map((r, i) => (
|
||
<div key={i} className="border rounded p-3 text-sm">
|
||
{editingRestIdx === i && editRest ? (
|
||
<div className="space-y-2">
|
||
<div>
|
||
<label className="text-xs text-gray-500">이름</label>
|
||
<input value={editRest.name} onChange={(e) => setEditRest({ ...editRest, name: e.target.value })} className="w-full border rounded px-2 py-1 text-sm bg-surface text-gray-900" />
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="text-xs text-gray-500">종류</label>
|
||
<input value={editRest.cuisine_type} onChange={(e) => setEditRest({ ...editRest, cuisine_type: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-gray-500">가격대</label>
|
||
<input value={editRest.price_range} onChange={(e) => setEditRest({ ...editRest, price_range: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className="text-xs text-gray-500">지역</label>
|
||
<input value={editRest.region} onChange={(e) => setEditRest({ ...editRest, region: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-gray-500">주소</label>
|
||
<input value={editRest.address} onChange={(e) => setEditRest({ ...editRest, address: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-gray-500">메뉴 (쉼표 구분)</label>
|
||
<input value={editRest.foods_mentioned} onChange={(e) => setEditRest({ ...editRest, foods_mentioned: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="메뉴1, 메뉴2, ..." />
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-gray-500">평가/요약</label>
|
||
<textarea value={editRest.evaluation} onChange={(e) => setEditRest({ ...editRest, evaluation: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" rows={2} />
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-gray-500">게스트 (쉼표 구분)</label>
|
||
<input value={editRest.guests} onChange={(e) => setEditRest({ ...editRest, guests: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={async () => {
|
||
setSaving(true);
|
||
try {
|
||
const foods = editRest.foods_mentioned.split(",").map(s => s.trim()).filter(Boolean);
|
||
const guests = editRest.guests.split(",").map(s => s.trim()).filter(Boolean);
|
||
let evalObj: Record<string, string> = {};
|
||
if (editRest.evaluation.trim()) {
|
||
evalObj = { text: editRest.evaluation.trim() };
|
||
}
|
||
await api.updateVideoRestaurant(detail.id, r.restaurant_id, {
|
||
name: editRest.name,
|
||
cuisine_type: editRest.cuisine_type || null,
|
||
price_range: editRest.price_range || null,
|
||
region: editRest.region || null,
|
||
address: editRest.address || null,
|
||
foods_mentioned: foods,
|
||
evaluation: evalObj,
|
||
guests: guests,
|
||
});
|
||
const d = await api.getVideoDetail(detail.id);
|
||
setDetail(d);
|
||
setEditingRestIdx(null);
|
||
setEditRest(null);
|
||
} catch (e) { alert("저장 실패: " + (e instanceof Error ? e.message : String(e))); }
|
||
finally { setSaving(false); }
|
||
}}
|
||
disabled={saving}
|
||
className="px-3 py-1 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
{saving ? "저장 중..." : "저장"}
|
||
</button>
|
||
<button
|
||
onClick={() => { setEditingRestIdx(null); setEditRest(null); }}
|
||
className="px-3 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100"
|
||
>
|
||
취소
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className={`${isAdmin ? "cursor-pointer hover:bg-brand-50/50" : ""} -m-3 p-3 rounded group`}
|
||
onClick={isAdmin ? () => {
|
||
let evalText = "";
|
||
if (typeof r.evaluation === "object" && r.evaluation) {
|
||
if (r.evaluation.text) {
|
||
evalText = r.evaluation.text;
|
||
} else if (Object.keys(r.evaluation).length > 0) {
|
||
evalText = JSON.stringify(r.evaluation);
|
||
}
|
||
} else if (r.evaluation) {
|
||
evalText = String(r.evaluation);
|
||
}
|
||
setEditingRestIdx(i);
|
||
setShowManualAdd(false);
|
||
setShowPrompt(false);
|
||
setEditRest({
|
||
name: r.name,
|
||
cuisine_type: r.cuisine_type || "",
|
||
foods_mentioned: r.foods_mentioned.join(", "),
|
||
evaluation: evalText,
|
||
address: r.address || "",
|
||
region: r.region || "",
|
||
price_range: r.price_range || "",
|
||
guests: r.guests.join(", "),
|
||
});
|
||
} : undefined}
|
||
title={isAdmin ? "클릭하여 수정" : undefined}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<p className="font-medium">{r.name}</p>
|
||
{r.google_place_id ? (
|
||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-green-100 text-green-700" title={`Place ID: ${r.google_place_id}`}>매칭</span>
|
||
) : r.has_location ? (
|
||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-yellow-100 text-yellow-700" title="좌표는 있으나 Place ID 없음">좌표만</span>
|
||
) : (
|
||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-600">미매칭</span>
|
||
)}
|
||
</div>
|
||
{isAdmin && <button
|
||
onClick={async (e) => {
|
||
e.stopPropagation();
|
||
if (!confirm(`"${r.name}" 식당 매핑을 삭제하시겠습니까?`)) return;
|
||
try {
|
||
await api.deleteVideoRestaurant(detail.id, r.restaurant_id);
|
||
const d = await api.getVideoDetail(detail.id);
|
||
setDetail(d);
|
||
load(false);
|
||
} catch { alert("삭제 실패"); }
|
||
}}
|
||
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>}
|
||
</div>
|
||
<div className="text-xs text-gray-500 mt-1 space-y-0.5">
|
||
{r.address && <p>주소: {r.address}</p>}
|
||
{r.region && <p>지역: {r.region}</p>}
|
||
{r.cuisine_type && <p>종류: {r.cuisine_type}</p>}
|
||
{r.price_range && <p>가격대: {r.price_range}</p>}
|
||
</div>
|
||
{r.foods_mentioned.length > 0 && (
|
||
<div className="flex flex-wrap gap-1 mt-2">
|
||
{r.foods_mentioned.map((f, j) => (
|
||
<span key={j} className="px-1.5 py-0.5 bg-brand-50 text-brand-700 rounded text-xs">{f}</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
{r.evaluation?.text && (
|
||
<p className="mt-1 text-xs text-gray-600">{r.evaluation.text}</p>
|
||
)}
|
||
{r.guests.length > 0 && (
|
||
<p className="mt-1 text-xs text-gray-500">게스트: {r.guests.join(", ")}</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{detail.restaurants.length === 0 && (
|
||
<p className="text-sm text-gray-400">추출된 식당 정보 없음</p>
|
||
)}
|
||
|
||
{/* 트랜스크립트 — 식당 수정 중에는 숨김 */}
|
||
{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")}
|
||
className="border rounded px-2 py-1 text-xs bg-surface text-gray-900"
|
||
>
|
||
<option value="auto">자동 (수동→자동생성)</option>
|
||
<option value="manual">수동 자막만</option>
|
||
<option value="generated">자동생성 자막만</option>
|
||
</select>
|
||
<button
|
||
onClick={async () => {
|
||
setFetchingTranscript(true);
|
||
try {
|
||
const res = await api.fetchTranscript(detail.id, transcriptMode);
|
||
const d = await api.getVideoDetail(detail.id);
|
||
setDetail(d);
|
||
alert(`트랜스크립트 가져옴 (${res.source === "manual" ? "수동 자막" : "자동생성 자막"}, ${res.length.toLocaleString()}자)`);
|
||
} catch {
|
||
alert("트랜스크립트를 가져올 수 없습니다");
|
||
} finally {
|
||
setFetchingTranscript(false);
|
||
}
|
||
}}
|
||
disabled={fetchingTranscript}
|
||
className="px-2 py-1 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
{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">
|
||
{detail.transcript}
|
||
</pre>
|
||
) : (
|
||
<p className="text-sm text-gray-400">트랜스크립트 없음</p>
|
||
)}
|
||
</div>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── 식당 관리 ─── */
|
||
function RestaurantsPanel({ isAdmin }: { isAdmin: boolean }) {
|
||
const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [page, setPage] = useState(0);
|
||
const [nameSearch, setNameSearch] = useState("");
|
||
const [selected, setSelected] = useState<Restaurant | null>(null);
|
||
const [editForm, setEditForm] = useState<Record<string, string>>({});
|
||
const [saving, setSaving] = useState(false);
|
||
const [videos, setVideos] = useState<VideoLink[]>([]);
|
||
const [tablingSearching, setTablingSearching] = useState(false);
|
||
const [bulkTabling, setBulkTabling] = useState(false);
|
||
const [bulkTablingProgress, setBulkTablingProgress] = useState({ current: 0, total: 0, name: "", linked: 0, notFound: 0 });
|
||
const [catchtableSearching, setCatchtableSearching] = useState(false);
|
||
const [bulkCatchtable, setBulkCatchtable] = useState(false);
|
||
const [bulkCatchtableProgress, setBulkCatchtableProgress] = useState({ current: 0, total: 0, name: "", linked: 0, notFound: 0 });
|
||
type RestSortKey = "name" | "region" | "cuisine_type" | "price_range" | "rating" | "business_status";
|
||
const [sortKey, setSortKey] = useState<RestSortKey>("name");
|
||
const [sortAsc, setSortAsc] = useState(true);
|
||
const perPage = 20;
|
||
|
||
const handleSort = (key: RestSortKey) => {
|
||
if (sortKey === key) setSortAsc(!sortAsc);
|
||
else { setSortKey(key); setSortAsc(true); }
|
||
};
|
||
const sortIcon = (key: RestSortKey) => sortKey !== key ? " ↕" : sortAsc ? " ↑" : " ↓";
|
||
|
||
const load = useCallback(() => {
|
||
setLoading(true);
|
||
api
|
||
.getRestaurants({ limit: 500 })
|
||
.then(setRestaurants)
|
||
.catch(console.error)
|
||
.finally(() => setLoading(false));
|
||
}, []);
|
||
|
||
useEffect(() => { load(); }, [load]);
|
||
|
||
const filtered = restaurants.filter((r) => {
|
||
if (nameSearch && !r.name.toLowerCase().includes(nameSearch.toLowerCase())) return false;
|
||
return true;
|
||
});
|
||
|
||
const sorted = [...filtered].sort((a, b) => {
|
||
let av: string | number = a[sortKey] ?? "";
|
||
let bv: string | number = b[sortKey] ?? "";
|
||
if (sortKey === "rating") {
|
||
av = a.rating ?? 0;
|
||
bv = b.rating ?? 0;
|
||
}
|
||
const cmp = av < bv ? -1 : av > bv ? 1 : 0;
|
||
return sortAsc ? cmp : -cmp;
|
||
});
|
||
|
||
const totalPages = Math.max(1, Math.ceil(sorted.length / perPage));
|
||
const paged = sorted.slice(page * perPage, (page + 1) * perPage);
|
||
|
||
const handleSelect = (r: Restaurant) => {
|
||
if (selected?.id === r.id) {
|
||
setSelected(null);
|
||
setVideos([]);
|
||
return;
|
||
}
|
||
setSelected(r);
|
||
api.getRestaurantVideos(r.id).then(setVideos).catch(() => setVideos([]));
|
||
setEditForm({
|
||
name: r.name || "",
|
||
address: r.address || "",
|
||
region: r.region || "",
|
||
cuisine_type: r.cuisine_type || "",
|
||
price_range: r.price_range || "",
|
||
phone: r.phone || "",
|
||
website: r.website || "",
|
||
latitude: r.latitude != null ? String(r.latitude) : "",
|
||
longitude: r.longitude != null ? String(r.longitude) : "",
|
||
});
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
if (!selected) return;
|
||
setSaving(true);
|
||
try {
|
||
const data: Record<string, unknown> = { ...editForm };
|
||
if (editForm.latitude) data.latitude = parseFloat(editForm.latitude);
|
||
else data.latitude = null;
|
||
if (editForm.longitude) data.longitude = parseFloat(editForm.longitude);
|
||
else data.longitude = null;
|
||
await api.updateRestaurant(selected.id, data as Partial<Restaurant>);
|
||
load();
|
||
setSelected(null);
|
||
} catch (e) {
|
||
alert("저장 실패: " + (e instanceof Error ? e.message : String(e)));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async () => {
|
||
if (!selected) return;
|
||
if (!confirm(`"${selected.name}" 식당을 삭제하시겠습니까?\n연결된 영상 매핑, 리뷰, 벡터도 함께 삭제됩니다.`)) return;
|
||
try {
|
||
await api.deleteRestaurant(selected.id);
|
||
setSelected(null);
|
||
load();
|
||
} catch {
|
||
alert("삭제 실패");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="flex">
|
||
<input
|
||
type="text"
|
||
placeholder="식당 이름 검색..."
|
||
value={nameSearch}
|
||
onChange={(e) => { setNameSearch(e.target.value); setPage(0); }}
|
||
onKeyDown={(e) => e.key === "Escape" && setNameSearch("")}
|
||
className="border border-r-0 rounded-l px-3 py-2 text-sm w-48 bg-surface text-gray-900"
|
||
/>
|
||
{nameSearch ? (
|
||
<button
|
||
onClick={() => { setNameSearch(""); setPage(0); }}
|
||
className="border rounded-r px-2 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100"
|
||
>
|
||
✕
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() => load()}
|
||
className="border rounded-r px-2 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100"
|
||
title="새로고침"
|
||
>
|
||
↻
|
||
</button>
|
||
)}
|
||
</div>
|
||
{isAdmin && (<>
|
||
<button
|
||
onClick={async () => {
|
||
const pending = await fetch(`/api/restaurants/tabling-pending`, {
|
||
headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
|
||
}).then(r => r.json());
|
||
if (pending.count === 0) { alert("테이블링 미연결 식당이 없습니다"); return; }
|
||
if (!confirm(`테이블링 미연결 식당 ${pending.count}개를 벌크 검색합니다.\n식당당 5~15초 소요됩니다. 진행할까요?`)) return;
|
||
setBulkTabling(true);
|
||
setBulkTablingProgress({ current: 0, total: pending.count, name: "", linked: 0, notFound: 0 });
|
||
try {
|
||
const res = await fetch("/api/restaurants/bulk-tabling", {
|
||
method: "POST",
|
||
headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
|
||
});
|
||
const reader = res.body!.getReader();
|
||
const decoder = new TextDecoder();
|
||
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) {
|
||
const m = line.match(/^data:(.+)$/);
|
||
if (!m) continue;
|
||
const evt = JSON.parse(m[1]);
|
||
if (evt.type === "processing" || evt.type === "done" || evt.type === "notfound" || evt.type === "error") {
|
||
setBulkTablingProgress(p => ({
|
||
...p, current: evt.current, total: evt.total || p.total, name: evt.name,
|
||
linked: evt.type === "done" ? p.linked + 1 : p.linked,
|
||
notFound: (evt.type === "notfound" || evt.type === "error") ? p.notFound + 1 : p.notFound,
|
||
}));
|
||
} else if (evt.type === "complete") {
|
||
alert(`완료! 연결: ${evt.linked}개, 미발견: ${evt.notFound}개`);
|
||
}
|
||
}
|
||
}
|
||
} catch (e) { alert("벌크 테이블링 실패: " + (e instanceof Error ? e.message : String(e))); }
|
||
finally { setBulkTabling(false); load(); }
|
||
}}
|
||
disabled={bulkTabling}
|
||
className="px-3 py-1.5 text-xs bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50"
|
||
>
|
||
{bulkTabling ? `테이블링 검색 중 (${bulkTablingProgress.current}/${bulkTablingProgress.total})` : "벌크 테이블링 연결"}
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
if (!confirm("테이블링 매핑을 전부 초기화하시겠습니까?")) return;
|
||
try {
|
||
await fetch("/api/restaurants/reset-tabling", {
|
||
method: "DELETE",
|
||
headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
|
||
});
|
||
alert("테이블링 매핑 초기화 완료");
|
||
load();
|
||
} catch (e) { alert("실패: " + e); }
|
||
}}
|
||
className="px-3 py-1.5 text-xs bg-red-50 text-red-600 border border-red-200 rounded hover:bg-red-100"
|
||
>
|
||
테이블링 초기화
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
if (!confirm("캐치테이블 매핑을 전부 초기화하시겠습니까?")) return;
|
||
try {
|
||
await fetch("/api/restaurants/reset-catchtable", {
|
||
method: "DELETE",
|
||
headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
|
||
});
|
||
alert("캐치테이블 매핑 초기화 완료");
|
||
load();
|
||
} catch (e) { alert("실패: " + e); }
|
||
}}
|
||
className="px-3 py-1.5 text-xs bg-red-50 text-red-600 border border-red-200 rounded hover:bg-red-100"
|
||
>
|
||
캐치테이블 초기화
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
const pending = await fetch(`/api/restaurants/catchtable-pending`, {
|
||
headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
|
||
}).then(r => r.json());
|
||
if (pending.count === 0) { alert("캐치테이블 미연결 식당이 없습니다"); return; }
|
||
if (!confirm(`캐치테이블 미연결 식당 ${pending.count}개를 벌크 검색합니다.\n식당당 5~15초 소요됩니다. 진행할까요?`)) return;
|
||
setBulkCatchtable(true);
|
||
setBulkCatchtableProgress({ current: 0, total: pending.count, name: "", linked: 0, notFound: 0 });
|
||
try {
|
||
const res = await fetch("/api/restaurants/bulk-catchtable", {
|
||
method: "POST",
|
||
headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
|
||
});
|
||
const reader = res.body!.getReader();
|
||
const decoder = new TextDecoder();
|
||
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) {
|
||
const m = line.match(/^data:(.+)$/);
|
||
if (!m) continue;
|
||
const evt = JSON.parse(m[1]);
|
||
if (evt.type === "processing" || evt.type === "done" || evt.type === "notfound" || evt.type === "error") {
|
||
setBulkCatchtableProgress(p => ({
|
||
...p, current: evt.current, total: evt.total || p.total, name: evt.name,
|
||
linked: evt.type === "done" ? p.linked + 1 : p.linked,
|
||
notFound: (evt.type === "notfound" || evt.type === "error") ? p.notFound + 1 : p.notFound,
|
||
}));
|
||
} else if (evt.type === "complete") {
|
||
alert(`완료! 연결: ${evt.linked}개, 미발견: ${evt.notFound}개`);
|
||
}
|
||
}
|
||
}
|
||
} catch (e) { alert("벌크 캐치테이블 실패: " + (e instanceof Error ? e.message : String(e))); }
|
||
finally { setBulkCatchtable(false); load(); }
|
||
}}
|
||
disabled={bulkCatchtable}
|
||
className="px-3 py-1.5 text-xs bg-violet-500 text-white rounded hover:bg-violet-600 disabled:opacity-50"
|
||
>
|
||
{bulkCatchtable ? `캐치테이블 검색 중 (${bulkCatchtableProgress.current}/${bulkCatchtableProgress.total})` : "벌크 캐치테이블 연결"}
|
||
</button>
|
||
</>)}
|
||
<span className="text-sm text-gray-400 ml-auto">
|
||
{nameSearch ? `${sorted.length} / ` : ""}총 {restaurants.length}개 식당
|
||
</span>
|
||
</div>
|
||
{bulkTabling && bulkTablingProgress.name && (
|
||
<div className="bg-brand-50 rounded p-3 mb-4 text-sm">
|
||
<div className="flex justify-between mb-1">
|
||
<span>{bulkTablingProgress.current}/{bulkTablingProgress.total} - {bulkTablingProgress.name}</span>
|
||
<span className="text-xs text-gray-500">연결: {bulkTablingProgress.linked} / 미발견: {bulkTablingProgress.notFound}</span>
|
||
</div>
|
||
<div className="w-full bg-brand-200 rounded-full h-1.5">
|
||
<div className="bg-brand-500 h-1.5 rounded-full transition-all" style={{ width: `${(bulkTablingProgress.current / bulkTablingProgress.total) * 100}%` }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
{bulkCatchtable && bulkCatchtableProgress.name && (
|
||
<div className="bg-violet-50 rounded p-3 mb-4 text-sm">
|
||
<div className="flex justify-between mb-1">
|
||
<span>{bulkCatchtableProgress.current}/{bulkCatchtableProgress.total} - {bulkCatchtableProgress.name}</span>
|
||
<span className="text-xs text-gray-500">연결: {bulkCatchtableProgress.linked} / 미발견: {bulkCatchtableProgress.notFound}</span>
|
||
</div>
|
||
<div className="w-full bg-violet-200 rounded-full h-1.5">
|
||
<div className="bg-violet-500 h-1.5 rounded-full transition-all" style={{ width: `${(bulkCatchtableProgress.current / bulkCatchtableProgress.total) * 100}%` }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-surface rounded-lg shadow overflow-auto">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
|
||
<tr>
|
||
<th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("name")}>이름{sortIcon("name")}</th>
|
||
<th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("region")}>지역{sortIcon("region")}</th>
|
||
<th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("cuisine_type")}>음식 종류{sortIcon("cuisine_type")}</th>
|
||
<th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("price_range")}>가격대{sortIcon("price_range")}</th>
|
||
<th className="text-center px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("rating")}>평점{sortIcon("rating")}</th>
|
||
<th className="text-center px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("business_status")}>상태{sortIcon("business_status")}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{paged.map((r) => (
|
||
<tr
|
||
key={r.id}
|
||
onClick={() => handleSelect(r)}
|
||
className={`border-b cursor-pointer hover:bg-brand-50/50 ${selected?.id === r.id ? "bg-brand-50" : ""}`}
|
||
>
|
||
<td className="px-4 py-3 font-medium">{r.name}</td>
|
||
<td className="px-4 py-3 text-gray-600 text-xs">{r.region || "-"}</td>
|
||
<td className="px-4 py-3 text-gray-600 text-xs">{r.cuisine_type || "-"}</td>
|
||
<td className="px-4 py-3 text-gray-600 text-xs">{r.price_range || "-"}</td>
|
||
<td className="px-4 py-3 text-center text-xs">
|
||
{r.rating ? (
|
||
<span><span className="text-yellow-500">★</span> {r.rating}</span>
|
||
) : "-"}
|
||
</td>
|
||
<td className="px-4 py-3 text-center">
|
||
{r.business_status === "CLOSED_PERMANENTLY" ? (
|
||
<span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-semibold">폐업</span>
|
||
) : r.business_status === "CLOSED_TEMPORARILY" ? (
|
||
<span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded text-[10px] font-semibold">임시휴업</span>
|
||
) : (
|
||
<span className="text-xs text-gray-400">-</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{!loading && filtered.length === 0 && (
|
||
<tr>
|
||
<td colSpan={6} className="px-4 py-8 text-center text-gray-400">
|
||
식당 데이터가 없습니다
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{totalPages > 1 && (
|
||
<div className="flex items-center justify-center gap-2 mt-4">
|
||
<button onClick={() => setPage(0)} disabled={page === 0} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">«</button>
|
||
<button onClick={() => setPage(page - 1)} disabled={page === 0} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">‹</button>
|
||
<span className="text-sm text-gray-600 px-2">{page + 1} / {totalPages}</span>
|
||
<button onClick={() => setPage(page + 1)} disabled={page >= totalPages - 1} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">›</button>
|
||
<button onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">»</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 식당 상세/수정 패널 */}
|
||
{selected && (
|
||
<div className="mt-6 bg-surface rounded-lg shadow p-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="font-semibold text-base">{selected.name}</h3>
|
||
<button onClick={() => setSelected(null)} className="text-gray-400 hover:text-gray-600 text-xl leading-none">x</button>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
{[
|
||
{ key: "name", label: "이름" },
|
||
{ key: "address", label: "주소" },
|
||
{ key: "region", label: "지역" },
|
||
{ key: "cuisine_type", label: "음식 종류" },
|
||
{ key: "price_range", label: "가격대" },
|
||
{ key: "phone", label: "전화" },
|
||
{ key: "website", label: "웹사이트" },
|
||
{ key: "latitude", label: "위도" },
|
||
{ key: "longitude", label: "경도" },
|
||
].map(({ key, label }) => (
|
||
<div key={key}>
|
||
<label className="text-xs text-gray-500">{label}</label>
|
||
<input
|
||
value={editForm[key] || ""}
|
||
onChange={(e) => setEditForm((f) => ({ ...f, [key]: e.target.value }))}
|
||
className="w-full border rounded px-2 py-1.5 text-sm bg-surface text-gray-900"
|
||
disabled={!isAdmin}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{selected.business_status && (
|
||
<p className="mt-3 text-xs text-gray-500">
|
||
Google 상태: <span className="font-medium">{selected.business_status}</span>
|
||
{selected.rating && <> / ★ {selected.rating} ({selected.rating_count?.toLocaleString()})</>}
|
||
</p>
|
||
)}
|
||
{selected.google_place_id && (
|
||
<p className="mt-1">
|
||
<a
|
||
href={`https://www.google.com/maps/place/?q=place_id:${selected.google_place_id}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-brand-600 hover:underline text-xs"
|
||
>
|
||
Google Maps에서 보기
|
||
</a>
|
||
</p>
|
||
)}
|
||
{/* 테이블링 연결 */}
|
||
{isAdmin && (
|
||
<div className="mt-4 border-t pt-3">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h4 className="text-xs font-semibold text-gray-500">테이블링</h4>
|
||
{selected.tabling_url === "NONE" ? (
|
||
<span className="text-xs text-gray-400">검색완료-없음</span>
|
||
) : selected.tabling_url ? (
|
||
<a href={selected.tabling_url} target="_blank" rel="noopener noreferrer"
|
||
className="text-brand-600 hover:underline text-xs">{selected.tabling_url}</a>
|
||
) : (
|
||
<span className="text-xs text-gray-400">미연결</span>
|
||
)}
|
||
<button
|
||
onClick={async () => {
|
||
setTablingSearching(true);
|
||
try {
|
||
const results = await api.searchTabling(selected.id);
|
||
if (results.length === 0) {
|
||
alert("테이블링에서 검색 결과가 없습니다");
|
||
} else {
|
||
const best = results[0];
|
||
if (confirm(`"${best.title}"\n${best.url}\n\n이 테이블링 페이지를 연결할까요?`)) {
|
||
await api.setTablingUrl(selected.id, best.url);
|
||
setSelected({ ...selected, tabling_url: best.url });
|
||
load();
|
||
}
|
||
}
|
||
} catch (e) { alert("검색 실패: " + (e instanceof Error ? e.message : String(e))); }
|
||
finally { setTablingSearching(false); }
|
||
}}
|
||
disabled={tablingSearching}
|
||
className="px-2 py-0.5 text-[11px] bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50"
|
||
>
|
||
{tablingSearching ? "검색 중..." : "테이블링 검색"}
|
||
</button>
|
||
{selected.tabling_url && (
|
||
<button
|
||
onClick={async () => {
|
||
await api.setTablingUrl(selected.id, "");
|
||
setSelected({ ...selected, tabling_url: null });
|
||
load();
|
||
}}
|
||
className="px-2 py-0.5 text-[11px] text-red-500 border border-red-200 rounded hover:bg-red-50"
|
||
>
|
||
연결 해제
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* 캐치테이블 연결 */}
|
||
{isAdmin && (
|
||
<div className="mt-4 border-t pt-3">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h4 className="text-xs font-semibold text-gray-500">캐치테이블</h4>
|
||
{selected.catchtable_url === "NONE" ? (
|
||
<span className="text-xs text-gray-400">검색완료-없음</span>
|
||
) : selected.catchtable_url ? (
|
||
<a href={selected.catchtable_url} target="_blank" rel="noopener noreferrer"
|
||
className="text-brand-600 hover:underline text-xs">{selected.catchtable_url}</a>
|
||
) : (
|
||
<span className="text-xs text-gray-400">미연결</span>
|
||
)}
|
||
<button
|
||
onClick={async () => {
|
||
setCatchtableSearching(true);
|
||
try {
|
||
const results = await api.searchCatchtable(selected.id);
|
||
if (results.length === 0) {
|
||
alert("캐치테이블에서 검색 결과가 없습니다");
|
||
} else {
|
||
const best = results[0];
|
||
if (confirm(`"${best.title}"\n${best.url}\n\n이 캐치테이블 페이지를 연결할까요?`)) {
|
||
await api.setCatchtableUrl(selected.id, best.url);
|
||
setSelected({ ...selected, catchtable_url: best.url });
|
||
load();
|
||
}
|
||
}
|
||
} catch (e) { alert("검색 실패: " + (e instanceof Error ? e.message : String(e))); }
|
||
finally { setCatchtableSearching(false); }
|
||
}}
|
||
disabled={catchtableSearching}
|
||
className="px-2 py-0.5 text-[11px] bg-violet-500 text-white rounded hover:bg-violet-600 disabled:opacity-50"
|
||
>
|
||
{catchtableSearching ? "검색 중..." : "캐치테이블 검색"}
|
||
</button>
|
||
{selected.catchtable_url && (
|
||
<button
|
||
onClick={async () => {
|
||
await api.setCatchtableUrl(selected.id, "");
|
||
setSelected({ ...selected, catchtable_url: null });
|
||
load();
|
||
}}
|
||
className="px-2 py-0.5 text-[11px] text-red-500 border border-red-200 rounded hover:bg-red-50"
|
||
>
|
||
연결 해제
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{videos.length > 0 && (
|
||
<div className="mt-4 border-t pt-3">
|
||
<h4 className="text-xs font-semibold text-gray-500 mb-2">연결된 영상 ({videos.length})</h4>
|
||
<div className="space-y-1.5 max-h-32 overflow-y-auto">
|
||
{videos.map((v) => (
|
||
<div key={v.video_id} className="flex items-center gap-2 text-xs">
|
||
<span className="px-1.5 py-0.5 bg-red-50 text-red-600 rounded text-[10px] font-medium shrink-0">
|
||
{v.channel_name}
|
||
</span>
|
||
<a href={v.url} target="_blank" rel="noopener noreferrer" className="text-brand-600 hover:underline truncate">
|
||
{v.title}
|
||
</a>
|
||
<span className="text-gray-400 shrink-0">{v.published_at?.slice(0, 10)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 mt-4">
|
||
{isAdmin && <button
|
||
onClick={handleSave}
|
||
disabled={saving}
|
||
className="px-4 py-2 text-sm bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
{saving ? "저장 중..." : "저장"}
|
||
</button>}
|
||
<button
|
||
onClick={() => setSelected(null)}
|
||
className="px-4 py-2 text-sm border rounded text-gray-600 hover:bg-gray-100"
|
||
>
|
||
{isAdmin ? "취소" : "닫기"}
|
||
</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>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|
||
/* ─── 유저 관리 ─── */
|
||
interface AdminUser {
|
||
id: string;
|
||
email: string | null;
|
||
nickname: string | null;
|
||
avatar_url: string | null;
|
||
provider: string | null;
|
||
created_at: string | null;
|
||
favorite_count: number;
|
||
review_count: number;
|
||
memo_count: number;
|
||
}
|
||
|
||
interface UserFavorite {
|
||
id: string;
|
||
name: string;
|
||
address: string | null;
|
||
region: string | null;
|
||
cuisine_type: string | null;
|
||
rating: number | null;
|
||
business_status: string | null;
|
||
created_at: string | null;
|
||
}
|
||
|
||
interface UserReview {
|
||
id: string;
|
||
restaurant_id: string;
|
||
rating: number;
|
||
review_text: string | null;
|
||
visited_at: string | null;
|
||
created_at: string | null;
|
||
restaurant_name: string | null;
|
||
}
|
||
|
||
interface UserMemo {
|
||
id: string;
|
||
restaurant_id: string;
|
||
rating: number | null;
|
||
memo_text: string | null;
|
||
visited_at: string | null;
|
||
created_at: string;
|
||
restaurant_name: string | null;
|
||
}
|
||
|
||
function UsersPanel() {
|
||
const [users, setUsers] = useState<AdminUser[]>([]);
|
||
const [total, setTotal] = useState(0);
|
||
const [page, setPage] = useState(0);
|
||
const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
|
||
const [favorites, setFavorites] = useState<UserFavorite[]>([]);
|
||
const [reviews, setReviews] = useState<UserReview[]>([]);
|
||
const [memos, setMemos] = useState<UserMemo[]>([]);
|
||
const [detailLoading, setDetailLoading] = useState(false);
|
||
const perPage = 20;
|
||
|
||
const loadUsers = useCallback(async (p: number) => {
|
||
try {
|
||
const res = await api.getAdminUsers({ limit: perPage, offset: p * perPage });
|
||
setUsers(res.users);
|
||
setTotal(res.total);
|
||
} catch (e) {
|
||
console.error("Failed to load users:", e);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
loadUsers(page);
|
||
}, [page, loadUsers]);
|
||
|
||
const handleSelectUser = async (u: AdminUser) => {
|
||
if (selectedUser?.id === u.id) {
|
||
setSelectedUser(null);
|
||
setFavorites([]);
|
||
setReviews([]);
|
||
setMemos([]);
|
||
return;
|
||
}
|
||
setSelectedUser(u);
|
||
setDetailLoading(true);
|
||
try {
|
||
const [favs, revs, mems] = await Promise.all([
|
||
api.getAdminUserFavorites(u.id),
|
||
api.getAdminUserReviews(u.id),
|
||
api.getAdminUserMemos(u.id),
|
||
]);
|
||
setFavorites(favs);
|
||
setReviews(revs);
|
||
setMemos(mems);
|
||
} catch (e) {
|
||
console.error(e);
|
||
} finally {
|
||
setDetailLoading(false);
|
||
}
|
||
};
|
||
|
||
const totalPages = Math.ceil(total / perPage);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<h2 className="text-lg font-bold">유저 관리 ({total}명)</h2>
|
||
|
||
{/* Users Table */}
|
||
<div className="bg-surface rounded-lg shadow overflow-hidden">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
|
||
<tr>
|
||
<th className="text-left px-4 py-2">사용자</th>
|
||
<th className="text-left px-4 py-2">이메일</th>
|
||
<th className="text-center px-4 py-2">찜</th>
|
||
<th className="text-center px-4 py-2">리뷰</th>
|
||
<th className="text-center px-4 py-2">메모</th>
|
||
<th className="text-left px-4 py-2">가입일</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{users.map((u) => (
|
||
<tr
|
||
key={u.id}
|
||
onClick={() => handleSelectUser(u)}
|
||
className={`border-t cursor-pointer transition-colors ${
|
||
selectedUser?.id === u.id
|
||
? "bg-brand-50"
|
||
: "hover:bg-brand-50/50"
|
||
}`}
|
||
>
|
||
<td className="px-4 py-2">
|
||
<div className="flex items-center gap-2">
|
||
{u.avatar_url ? (
|
||
<img
|
||
src={u.avatar_url}
|
||
alt=""
|
||
className="w-7 h-7 rounded-full"
|
||
/>
|
||
) : (
|
||
<div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold text-gray-500">
|
||
{(u.nickname || u.email || "?").charAt(0).toUpperCase()}
|
||
</div>
|
||
)}
|
||
<span className="font-medium">
|
||
{u.nickname || "-"}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td className="px-4 py-2 text-gray-500">{u.email || "-"}</td>
|
||
<td className="px-4 py-2 text-center">
|
||
{u.favorite_count > 0 ? (
|
||
<span className="inline-block px-2 py-0.5 bg-red-50 text-red-600 rounded-full text-xs font-medium">
|
||
{u.favorite_count}
|
||
</span>
|
||
) : (
|
||
<span className="text-gray-300">0</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-center">
|
||
{u.review_count > 0 ? (
|
||
<span className="inline-block px-2 py-0.5 bg-brand-50 text-brand-600 rounded-full text-xs font-medium">
|
||
{u.review_count}
|
||
</span>
|
||
) : (
|
||
<span className="text-gray-300">0</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-center">
|
||
{u.memo_count > 0 ? (
|
||
<span className="inline-block px-2 py-0.5 bg-purple-50 text-purple-600 rounded-full text-xs font-medium">
|
||
{u.memo_count}
|
||
</span>
|
||
) : (
|
||
<span className="text-gray-300">0</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-gray-400 text-xs">
|
||
{u.created_at?.slice(0, 10) || "-"}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
{totalPages > 1 && (
|
||
<div className="flex items-center justify-center gap-2">
|
||
<button
|
||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||
disabled={page === 0}
|
||
className="px-3 py-1 text-sm border rounded disabled:opacity-30"
|
||
>
|
||
이전
|
||
</button>
|
||
<span className="text-sm text-gray-600">
|
||
{page + 1} / {totalPages}
|
||
</span>
|
||
<button
|
||
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
||
disabled={page >= totalPages - 1}
|
||
className="px-3 py-1 text-sm border rounded disabled:opacity-30"
|
||
>
|
||
다음
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Selected User Detail */}
|
||
{selectedUser && (
|
||
<div className="bg-surface rounded-lg shadow p-5 space-y-4">
|
||
<div className="flex items-center gap-3 pb-3 border-b">
|
||
{selectedUser.avatar_url ? (
|
||
<img
|
||
src={selectedUser.avatar_url}
|
||
alt=""
|
||
className="w-12 h-12 rounded-full"
|
||
/>
|
||
) : (
|
||
<div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-lg font-semibold text-gray-500">
|
||
{(selectedUser.nickname || selectedUser.email || "?").charAt(0).toUpperCase()}
|
||
</div>
|
||
)}
|
||
<div>
|
||
<div className="font-bold">{selectedUser.nickname || "-"}</div>
|
||
<div className="text-sm text-gray-500">{selectedUser.email || "-"}</div>
|
||
<div className="text-xs text-gray-400">
|
||
{selectedUser.provider} · 가입: {selectedUser.created_at?.slice(0, 10)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{detailLoading ? (
|
||
<p className="text-sm text-gray-500">로딩 중...</p>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{/* Favorites */}
|
||
<div>
|
||
<h3 className="font-semibold text-sm mb-2 text-red-600">
|
||
찜한 식당 ({favorites.length})
|
||
</h3>
|
||
{favorites.length === 0 ? (
|
||
<p className="text-xs text-gray-400">찜한 식당이 없습니다.</p>
|
||
) : (
|
||
<div className="space-y-1 max-h-64 overflow-y-auto">
|
||
{favorites.map((f) => (
|
||
<div
|
||
key={f.id}
|
||
className="flex items-center justify-between border rounded px-3 py-2 text-xs"
|
||
>
|
||
<div>
|
||
<span className="font-medium">{f.name}</span>
|
||
{f.region && (
|
||
<span className="ml-1.5 text-gray-400">{f.region}</span>
|
||
)}
|
||
{f.cuisine_type && (
|
||
<span className="ml-1.5 text-gray-400">· {f.cuisine_type}</span>
|
||
)}
|
||
{f.business_status === "CLOSED_PERMANENTLY" && (
|
||
<span className="ml-1.5 px-1 bg-red-100 text-red-600 rounded text-[10px]">
|
||
폐업
|
||
</span>
|
||
)}
|
||
</div>
|
||
{f.rating && (
|
||
<span className="text-yellow-500 shrink-0">
|
||
★ {f.rating}
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Reviews */}
|
||
<div>
|
||
<h3 className="font-semibold text-sm mb-2 text-brand-600">
|
||
작성한 리뷰 ({reviews.length})
|
||
</h3>
|
||
{reviews.length === 0 ? (
|
||
<p className="text-xs text-gray-400">작성한 리뷰가 없습니다.</p>
|
||
) : (
|
||
<div className="space-y-1 max-h-64 overflow-y-auto">
|
||
{reviews.map((r) => (
|
||
<div
|
||
key={r.id}
|
||
className="border rounded px-3 py-2 text-xs space-y-0.5"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<span className="font-medium">
|
||
{r.restaurant_name || "알 수 없음"}
|
||
</span>
|
||
<span className="text-yellow-500 shrink-0">
|
||
{"★".repeat(Math.round(r.rating))} {r.rating}
|
||
</span>
|
||
</div>
|
||
{r.review_text && (
|
||
<p className="text-gray-600 line-clamp-2">
|
||
{r.review_text}
|
||
</p>
|
||
)}
|
||
<div className="text-gray-400 text-[10px]">
|
||
{r.visited_at && `방문: ${r.visited_at} · `}
|
||
{r.created_at?.slice(0, 10)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Memos */}
|
||
<div>
|
||
<h3 className="font-semibold text-sm mb-2 text-purple-600">
|
||
작성한 메모 ({memos.length})
|
||
</h3>
|
||
{memos.length === 0 ? (
|
||
<p className="text-xs text-gray-400">작성한 메모가 없습니다.</p>
|
||
) : (
|
||
<div className="space-y-1 max-h-64 overflow-y-auto">
|
||
{memos.map((m) => (
|
||
<div
|
||
key={m.id}
|
||
className="border border-purple-200 rounded px-3 py-2 text-xs space-y-0.5 bg-purple-50/30"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<span className="font-medium">
|
||
{m.restaurant_name || "알 수 없음"}
|
||
</span>
|
||
{m.rating && (
|
||
<span className="text-yellow-500 shrink-0">
|
||
{"★".repeat(Math.round(m.rating))} {m.rating}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{m.memo_text && (
|
||
<p className="text-gray-600 line-clamp-2">
|
||
{m.memo_text}
|
||
</p>
|
||
)}
|
||
<div className="text-gray-400 text-[10px]">
|
||
{m.visited_at && `방문: ${m.visited_at} · `}
|
||
{m.created_at?.slice(0, 10)}
|
||
<span className="ml-1 text-purple-400">비공개</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</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-surface 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-brand-600 text-white text-sm rounded hover:bg-brand-700 disabled:opacity-50"
|
||
>
|
||
{saving ? "저장 중..." : "설정 저장"}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Manual Triggers */}
|
||
<div className="bg-surface 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>
|
||
);
|
||
}
|