Implement all core features: Knowledge pipeline, RAG chat, Todos, Habits, Study Cards, Tags, Dashboard
- Google OAuth authentication with callback flow - Knowledge ingest pipeline (TEXT/WEB/YOUTUBE → chunking → categorization → embedding) - OCI GenAI integration (chat, embeddings) with multi-model support - Semantic search via Oracle VECTOR_DISTANCE - RAG-based AI chat with source attribution - Todos with subtasks, filters, and priority levels - Habits with daily check-in, streak tracking, and color customization - Study Cards with SM-2 spaced repetition and LLM auto-generation - Tags system with knowledge item mapping - Dashboard with live data from all modules Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
367
sundol-frontend/src/app/knowledge/[id]/page.tsx
Normal file
367
sundol-frontend/src/app/knowledge/[id]/page.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import AuthGuard from "@/components/auth-guard";
|
||||
import NavBar from "@/components/nav-bar";
|
||||
import { useApi } from "@/lib/use-api";
|
||||
|
||||
interface Category {
|
||||
ID: string;
|
||||
NAME: string;
|
||||
DEPTH: number;
|
||||
FULL_PATH: string;
|
||||
}
|
||||
|
||||
interface KnowledgeItem {
|
||||
ID: string;
|
||||
TYPE: string;
|
||||
TITLE: string;
|
||||
SOURCE_URL: string;
|
||||
RAW_TEXT: string;
|
||||
STATUS: string;
|
||||
CREATED_AT: string;
|
||||
UPDATED_AT: string;
|
||||
CATEGORIES: Category[];
|
||||
}
|
||||
|
||||
interface Chunk {
|
||||
ID: string;
|
||||
CHUNK_INDEX: number;
|
||||
CONTENT: string;
|
||||
TOKEN_COUNT: number;
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
PENDING: "bg-yellow-500/20 text-yellow-400",
|
||||
EXTRACTING: "bg-blue-500/20 text-blue-400",
|
||||
CHUNKING: "bg-purple-500/20 text-purple-400",
|
||||
CATEGORIZING: "bg-indigo-500/20 text-indigo-400",
|
||||
EMBEDDING: "bg-cyan-500/20 text-cyan-400",
|
||||
READY: "bg-green-500/20 text-green-400",
|
||||
FAILED: "bg-red-500/20 text-red-400",
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
YOUTUBE: "YouTube",
|
||||
WEB: "Web",
|
||||
TEXT: "Text",
|
||||
};
|
||||
|
||||
function extractYouTubeVideoId(url: string): string | null {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
if (u.hostname === "youtu.be") return u.pathname.slice(1);
|
||||
if (u.hostname.includes("youtube.com")) return u.searchParams.get("v");
|
||||
} catch {
|
||||
// invalid URL
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function KnowledgeDetailPage() {
|
||||
const { request } = useApi();
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const id = params.id as string;
|
||||
|
||||
const [item, setItem] = useState<KnowledgeItem | null>(null);
|
||||
const [chunks, setChunks] = useState<Chunk[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [editingTitle, setEditingTitle] = useState(false);
|
||||
const [titleDraft, setTitleDraft] = useState("");
|
||||
const [showChunks, setShowChunks] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [generating, setGenerating] = useState(false);
|
||||
|
||||
const fetchItem = async () => {
|
||||
try {
|
||||
const data = await request<KnowledgeItem>({ method: "GET", url: `/api/knowledge/${id}` });
|
||||
setItem(data);
|
||||
} catch (err: unknown) {
|
||||
const msg = err instanceof Error ? err.message : "Failed to load";
|
||||
setError(msg);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchChunks = async () => {
|
||||
try {
|
||||
const data = await request<Chunk[]>({ method: "GET", url: `/api/knowledge/${id}/chunks` });
|
||||
setChunks(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load chunks:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchItem();
|
||||
}, [id]);
|
||||
|
||||
// Poll while processing
|
||||
useEffect(() => {
|
||||
if (!item) return;
|
||||
const processing = ["PENDING", "EXTRACTING", "CHUNKING", "CATEGORIZING", "EMBEDDING"].includes(item.STATUS);
|
||||
if (!processing) return;
|
||||
const interval = setInterval(fetchItem, 3000);
|
||||
return () => clearInterval(interval);
|
||||
}, [item?.STATUS]);
|
||||
|
||||
const handleSaveTitle = async () => {
|
||||
if (!titleDraft.trim()) return;
|
||||
try {
|
||||
const updated = await request<KnowledgeItem>({
|
||||
method: "PATCH",
|
||||
url: `/api/knowledge/${id}`,
|
||||
data: { title: titleDraft.trim() },
|
||||
});
|
||||
setItem(updated);
|
||||
setEditingTitle(false);
|
||||
} catch (err) {
|
||||
console.error("Failed to update title:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("정말 삭제하시겠습니까?")) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
await request({ method: "DELETE", url: `/api/knowledge/${id}` });
|
||||
router.push("/knowledge");
|
||||
} catch (err) {
|
||||
console.error("Failed to delete:", err);
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleChunks = () => {
|
||||
if (!showChunks && chunks.length === 0) {
|
||||
fetchChunks();
|
||||
}
|
||||
setShowChunks(!showChunks);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<NavBar />
|
||||
<main className="max-w-4xl mx-auto px-4 py-8">
|
||||
<p className="text-[var(--color-text-muted)]">Loading...</p>
|
||||
</main>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !item) {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<NavBar />
|
||||
<main className="max-w-4xl mx-auto px-4 py-8">
|
||||
<p className="text-red-400">{error || "Item not found"}</p>
|
||||
<button
|
||||
onClick={() => router.push("/knowledge")}
|
||||
className="mt-4 text-sm text-[var(--color-primary)] hover:underline"
|
||||
>
|
||||
← Back to Knowledge
|
||||
</button>
|
||||
</main>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
const videoId = item.TYPE === "YOUTUBE" && item.SOURCE_URL ? extractYouTubeVideoId(item.SOURCE_URL) : null;
|
||||
|
||||
return (
|
||||
<AuthGuard>
|
||||
<NavBar />
|
||||
<main className="max-w-4xl mx-auto px-4 py-8">
|
||||
{/* Back link */}
|
||||
<button
|
||||
onClick={() => router.push("/knowledge")}
|
||||
className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)] mb-4 inline-block"
|
||||
>
|
||||
← Back to Knowledge
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-[var(--color-bg-card)] rounded-xl p-6 border border-[var(--color-border)] mb-6">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-[var(--color-bg-hover)] text-[var(--color-text-muted)]">
|
||||
{typeLabels[item.TYPE] || item.TYPE}
|
||||
</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${statusColors[item.STATUS] || ""}`}>
|
||||
{item.STATUS}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title (editable) */}
|
||||
{editingTitle ? (
|
||||
<div className="flex gap-2 mb-3">
|
||||
<input
|
||||
type="text"
|
||||
value={titleDraft}
|
||||
onChange={(e) => setTitleDraft(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSaveTitle()}
|
||||
className="flex-1 px-3 py-1 rounded-lg bg-[var(--color-bg-hover)] border border-[var(--color-border)] focus:border-[var(--color-primary)] focus:outline-none text-lg font-bold"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={handleSaveTitle}
|
||||
className="px-3 py-1 text-sm bg-[var(--color-primary)] rounded-lg"
|
||||
>
|
||||
저장
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingTitle(false)}
|
||||
className="px-3 py-1 text-sm bg-[var(--color-bg-hover)] border border-[var(--color-border)] rounded-lg"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<h1
|
||||
className="text-xl font-bold mb-3 cursor-pointer hover:text-[var(--color-primary)] transition-colors"
|
||||
onClick={() => {
|
||||
setTitleDraft(item.TITLE || "");
|
||||
setEditingTitle(true);
|
||||
}}
|
||||
title="클릭하여 제목 수정"
|
||||
>
|
||||
{item.TITLE || "Untitled"}
|
||||
</h1>
|
||||
)}
|
||||
|
||||
{/* Source URL */}
|
||||
{item.SOURCE_URL && (
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-3 break-all">
|
||||
<a href={item.SOURCE_URL} target="_blank" rel="noopener noreferrer" className="hover:text-[var(--color-primary)]">
|
||||
{item.SOURCE_URL}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Meta */}
|
||||
<div className="flex gap-4 text-xs text-[var(--color-text-muted)]">
|
||||
<span>생성: {new Date(item.CREATED_AT).toLocaleString("ko-KR")}</span>
|
||||
<span>수정: {new Date(item.UPDATED_AT).toLocaleString("ko-KR")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* YouTube Embed */}
|
||||
{videoId && (
|
||||
<div className="rounded-xl overflow-hidden border border-[var(--color-border)] mb-6">
|
||||
<div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
|
||||
<iframe
|
||||
className="absolute inset-0 w-full h-full"
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Processing indicator */}
|
||||
{/* Categories */}
|
||||
{item.CATEGORIES && item.CATEGORIES.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{item.CATEGORIES.map((cat) => (
|
||||
<span
|
||||
key={cat.ID}
|
||||
className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-primary)]/15 text-[var(--color-primary)] border border-[var(--color-primary)]/30"
|
||||
>
|
||||
{cat.FULL_PATH}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{["PENDING", "EXTRACTING", "CHUNKING", "CATEGORIZING"].includes(item.STATUS) && (
|
||||
<div className="bg-blue-500/10 border border-blue-500/30 rounded-xl p-4 mb-6 flex items-center gap-3">
|
||||
<div className="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" />
|
||||
<span className="text-sm text-blue-400">
|
||||
{item.STATUS === "PENDING" && "파이프라인 대기 중..."}
|
||||
{item.STATUS === "EXTRACTING" && "텍스트 추출 중..."}
|
||||
{item.STATUS === "CHUNKING" && "청킹 처리 중..."}
|
||||
{item.STATUS === "CATEGORIZING" && "카테고리 분류 중..."}
|
||||
{item.STATUS === "EMBEDDING" && "벡터 임베딩 중..."}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chunks toggle */}
|
||||
{item.STATUS === "READY" && (
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={handleToggleChunks}
|
||||
className="text-sm text-[var(--color-primary)] hover:underline"
|
||||
>
|
||||
{showChunks ? "▼ 청크 숨기기" : "▶ 청크 보기"}
|
||||
</button>
|
||||
|
||||
{showChunks && (
|
||||
<div className="mt-3 space-y-3">
|
||||
{chunks.length === 0 ? (
|
||||
<p className="text-sm text-[var(--color-text-muted)]">Loading chunks...</p>
|
||||
) : (
|
||||
chunks.map((chunk) => (
|
||||
<div
|
||||
key={chunk.ID}
|
||||
className="bg-[var(--color-bg-card)] rounded-lg p-4 border border-[var(--color-border)]"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs text-[var(--color-text-muted)]">
|
||||
Chunk #{chunk.CHUNK_INDEX}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--color-text-muted)]">
|
||||
~{chunk.TOKEN_COUNT} tokens
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm whitespace-pre-wrap">{chunk.CONTENT}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="pt-4 border-t border-[var(--color-border)] flex items-center gap-4">
|
||||
{item.STATUS === "READY" && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
setGenerating(true);
|
||||
try {
|
||||
const result = await request<{ generated: number }>({
|
||||
method: "POST",
|
||||
url: `/api/study-cards/generate/${id}`,
|
||||
});
|
||||
alert(`${result.generated}개의 스터디 카드가 생성되었습니다.`);
|
||||
} catch (err) {
|
||||
console.error("Failed to generate cards:", err);
|
||||
alert("카드 생성에 실패했습니다.");
|
||||
} finally {
|
||||
setGenerating(false);
|
||||
}
|
||||
}}
|
||||
disabled={generating}
|
||||
className="text-sm text-[var(--color-primary)] hover:underline disabled:opacity-40"
|
||||
>
|
||||
{generating ? "카드 생성 중..." : "스터디 카드 생성"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="text-sm text-red-400 hover:text-red-300 disabled:opacity-40"
|
||||
>
|
||||
{deleting ? "삭제 중..." : "삭제"}
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user