From 901aba5a6fdccfff52407e2779bac0de926efe01 Mon Sep 17 00:00:00 2001
From: Jacob <cj0336j@gmail.com>
Date: Sun, 6 Sep 2026 08:58:51 +0900
Subject: [PATCH] =?UTF-8?q?feat(graph,chat):=20=EC=A7=80=EC=8B=9D=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=98=ED=94=84=205=EB=8C=80=20=EC=8B=9C=EB=A7=A8=ED=8B=B1?=
 =?UTF-8?q?=20=ED=8C=94=EB=A0=88=ED=8A=B8=20=EB=B0=8F=20=EC=B1=97=EB=B4=87?=
 =?UTF-8?q?=20=EC=B2=A8=EB=B6=80=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/chat/KnowledgePanel.tsx |  14 ++-
 frontend/src/app/chat/page.tsx           |  28 ++++--
 frontend/src/app/graph/page.tsx          |  10 +-
 frontend/src/components/GraphView.tsx    | 117 ++++++++++++++++++++---
 4 files changed, 140 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/chat/KnowledgePanel.tsx b/frontend/src/app/chat/KnowledgePanel.tsx
index f2f8b49..6d5f1f9 100644
--- a/frontend/src/app/chat/KnowledgePanel.tsx
+++ b/frontend/src/app/chat/KnowledgePanel.tsx
@@ -148,9 +148,15 @@ export default function KnowledgePanel() {
 
       {/* 파일 첨부 → 임베딩 */}
       <div className="border-t border-line pt-4">
-        <h3 className="mb-2 text-xs font-medium uppercase tracking-[0.14em] text-muted">
-          파일 추가
-        </h3>
+        <div className="mb-2 flex items-center justify-between">
+          <h3 className="text-xs font-medium uppercase tracking-[0.14em] text-muted">
+            파일 추가 (첨부)
+          </h3>
+          <span className="text-[10px] text-muted">PDF, TXT, MD</span>
+        </div>
+        <p className="mb-2 text-[11px] text-muted leading-relaxed">
+          세무 서류, 청약 가이드, 금융사기 예방 매뉴얼 등을 첨부하면 임베딩되어 챗봇 답변의 근거로 활용됩니다.
+        </p>
         <input
           type="file"
           accept=".pdf,.txt,.md,.jsonl"
@@ -191,7 +197,7 @@ export default function KnowledgePanel() {
         </p>
         <p className="mt-1.5 px-1 text-[10px] leading-relaxed text-warning">
           ⚠ 엔티티 추출(LLM)로 <span className="font-medium">수 분 소요</span>되며, 그동안 같은 LLM 자원을 공유하는
-          챗 응답이 느려질 수 있습니다. 시연·발표 중에는 실행하지 마세요.
+          챗 응답이 느려질 수 있습니다. 시연이나 발표 중에는 실행하지 마세요.
         </p>
         {buildJobId && (
           <div className="mt-3">
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index c48dbbc..4433859 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -13,6 +13,7 @@ import {
   CheckCircle,
   Copy,
   Check,
+  Paperclip,
 } from "@phosphor-icons/react";
 import {
   apiDelete,
@@ -95,7 +96,7 @@ function AssistantAnswer({ content }: { content: string }) {
             {/* 5겹째 — 라벨이 "5겹"인데 4줄만 있으면 세어 보는 사람에게 바로 걸린다. */}
             <div className="flex items-center gap-2 text-muted">
               <CheckCircle weight="fill" size={16} className="text-positive shrink-0" />
-              <span>외곽 경계: <span className="text-fg font-medium">fetch 허용목록 · JWT 세션</span></span>
+              <span>외곽 경계: <span className="text-fg font-medium">fetch 허용목록, JWT 세션</span></span>
             </div>
           </div>
         </div>
@@ -392,7 +393,7 @@ function ChatClient() {
                   >
                     <div className="truncate text-fg">{s.title}</div>
                     <div className="truncate text-[10px] text-muted">
-                      {fmtDate(s.updated_at)} · {s.message_count}개 메시지
+                      {fmtDate(s.updated_at)} / {s.message_count}개 메시지
                     </div>
                   </button>
                   <button
@@ -421,7 +422,7 @@ function ChatClient() {
           <h1 className="font-display text-lg sm:text-xl text-fg shrink-0 font-bold">에이전트 챗봇</h1>
           <span className="eyebrow hidden sm:inline-flex">AI Advisor</span>
           <span className="hidden font-mono-spec text-[10px] uppercase tracking-widest text-muted md:inline truncate">
-            MidasAdviser · 멀티턴 · 실시간 스트리밍
+            MidasAdviser / 멀티턴 / 실시간 스트리밍
           </span>
         </div>
         <button
@@ -501,12 +502,12 @@ function ChatClient() {
                       </div>
                       <h3 className="text-sm font-semibold text-fg">무엇이든 질문해보세요</h3>
                       <p className="text-xs text-muted mt-1">
-                        사기 문자 검증, 세법 근거·계산, 청약 자격까지 — 근거와 함께 정리해 드립니다.
+                        사기 문자 검증, 세법 근거 및 계산, 청약 자격까지 — 근거와 함께 정리해 드립니다.
                       </p>
                     </div>
 
                       {/* 예시 질문은 첫 화면의 실질적 헤드라인이다 — 공모 주제('AI 금융 보안 비서')의
-                          핵심 기능(사기 검증·결정론 계산)을 앞세우고 청약·자산은 균형으로 둔다. */}
+                          핵심 기능(사기 검증, 결정론 계산)을 앞세우고 청약 및 자산은 균형으로 둔다. */}
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-left max-w-xl mx-auto pt-2">
                         {[
                           {
@@ -594,7 +595,20 @@ function ChatClient() {
                   </div>
                 ))}
               </div>
-              <div className="flex gap-2 border-t border-line p-3">
+              <div className="flex items-center gap-2 border-t border-line p-3">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setTab("kb");
+                    setMobileSidebarOpen(true);
+                    toast("지식베이스 패널에서 PDF, TXT, MD 문서를 첨부하고 임베딩할 수 있습니다.", "info");
+                  }}
+                  aria-label="지식베이스 파일 첨부"
+                  title="문서 첨부 및 지식베이스 열기"
+                  className="btn-ghost flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-muted hover:text-accent hover:border-accent/40 transition"
+                >
+                  <Paperclip size={18} />
+                </button>
                 <input
                   ref={inputRef}
                   value={input}
@@ -605,7 +619,7 @@ function ChatClient() {
                       send();
                     }
                   }}
-                  placeholder="메시지를 입력하세요…"
+                  placeholder="메시지를 입력하세요… (서류 첨부는 좌측 클립 아이콘)"
                   className="field flex-1 px-4 py-2.5 text-sm"
                 />
                 <button
diff --git a/frontend/src/app/graph/page.tsx b/frontend/src/app/graph/page.tsx
index 2b15b5f..0050b31 100644
--- a/frontend/src/app/graph/page.tsx
+++ b/frontend/src/app/graph/page.tsx
@@ -109,10 +109,10 @@ export default function GraphPage() {
           </div>
           <div className="text-sm sm:text-[15px] leading-relaxed text-muted/95 break-keep space-y-1">
             <p>
-              신규 세법 문서 업로드와 임베딩·그래프 구축은 <strong className="text-accent font-semibold">챗봇 화면의 지식베이스 패널</strong>에서 한 번에 처리됩니다.
+              신규 세법 문서 업로드와 임베딩 및 그래프 구축은 <strong className="text-accent font-semibold">챗봇 화면의 지식베이스 패널</strong>에서 한 번에 처리됩니다.
             </p>
             <p>
-              이 페이지는 그렇게 구축된 Neo4j 지식그래프를 직접 시각화하고 탐색·질의하는 <strong className="text-fg font-bold">근거 추적 전용 콘솔</strong>입니다.
+              이 페이지는 그렇게 구축된 Neo4j 지식그래프를 직접 시각화하고 탐색 및 질의하는 <strong className="text-fg font-bold">근거 추적 전용 콘솔</strong>입니다.
             </p>
           </div>
         </div>
@@ -138,8 +138,8 @@ export default function GraphPage() {
           ) : (
             <>
               <p className="mb-3 text-xs sm:text-sm font-medium text-muted">
-                노드 {snapshot.nodes.length}개 · 관계 {snapshot.links.length}개
-                {highlight.length > 0 && " · 흰 테두리 = RAG 근거 노드"}
+                노드 {snapshot.nodes.length}개 / 관계 {snapshot.links.length}개
+                {highlight.length > 0 && " (흰색 노드: GraphRAG 질의 근거)"}
               </p>
               <GraphView data={snapshot} highlight={highlight} />
             </>
@@ -154,7 +154,7 @@ export default function GraphPage() {
             )}
             <div className="text-center sm:text-left">
               <span className="font-mono-spec text-xs font-bold uppercase tracking-[0.2em] text-accent">
-                Standing by · 스캔 대기
+                Standing by / 스캔 대기
               </span>
               <p className="mt-2 text-sm sm:text-[15px] font-medium text-muted">
                 버튼을 눌러 Neo4j 그래프 스냅샷을 시각화하세요.
diff --git a/frontend/src/components/GraphView.tsx b/frontend/src/components/GraphView.tsx
index fba0b93..0b55731 100644
--- a/frontend/src/components/GraphView.tsx
+++ b/frontend/src/components/GraphView.tsx
@@ -12,9 +12,78 @@ const ForceGraph2D = dynamic(() => import("react-force-graph-2d"), {
   loading: () => <p className="text-sm text-muted">그래프 로딩 중…</p>,
 });
 
-// 폴백색 — 실제로는 렌더 시 토큰(--accent 등)을 실측해 쓴다. 인디고/앰버 듀오 유지.
-const NODE_COLOR = "#6c5cff";
-const NODE_HI = "#faad13";
+// 5대 핵심 도메인 시맨틱 팔레트 (Neon Ledger 디자인 시스템 연동)
+export interface NodeCategory {
+  id: string;
+  label: string;
+  color: string;
+}
+
+export const NODE_CATEGORIES: NodeCategory[] = [
+  { id: "tax", label: "세법 / 세율 규정", color: "#6c5cff" },
+  { id: "legal", label: "법령 조문 / 근거", color: "#faad13" },
+  { id: "asset", label: "부동산 / 자산 유형", color: "#05c168" },
+  { id: "condition", label: "감면 / 공제 / 요건", color: "#06b6d4" },
+  { id: "household", label: "가구 / 기간 요건", color: "#ff4d67" },
+  { id: "etc", label: "기타 엔티티", color: "#9094a8" },
+];
+
+export function getNodeCategory(rawGroup?: string): NodeCategory {
+  if (!rawGroup) return NODE_CATEGORIES[5];
+  const g = rawGroup.toUpperCase();
+  if (
+    g.includes("TAX") ||
+    g.includes("RATE") ||
+    g.includes("BRACKET") ||
+    g.includes("AMOUNT") ||
+    g.includes("BASE") ||
+    g.includes("LIMIT") ||
+    g.includes("보유기간")
+  ) {
+    if (g.includes("EXEMPT")) return NODE_CATEGORIES[3];
+    return NODE_CATEGORIES[0];
+  }
+  if (
+    g.includes("LEGAL") ||
+    g.includes("LAW") ||
+    g.includes("ARTICLE") ||
+    g.includes("POLICY") ||
+    g.includes("CLAUSE")
+  ) {
+    return NODE_CATEGORIES[1];
+  }
+  if (
+    g.includes("HOUSING") ||
+    g.includes("ASSET") ||
+    g.includes("PORTFOLIO") ||
+    g.includes("PROJECT") ||
+    g.includes("REGION") ||
+    g.includes("STOCK") ||
+    g.includes("PROPERTY")
+  ) {
+    return NODE_CATEGORIES[2];
+  }
+  if (
+    g.includes("CONDITION") ||
+    g.includes("EXEMPT") ||
+    g.includes("DEDUCTION") ||
+    g.includes("INCOME") ||
+    g.includes("REQUIREMENT")
+  ) {
+    return NODE_CATEGORIES[3];
+  }
+  if (
+    g.includes("HOUSEHOLD") ||
+    g.includes("FAMILY") ||
+    g.includes("DATE") ||
+    g.includes("TIMEFRAME") ||
+    g.includes("COMPOSITE") ||
+    g.includes("PERSON")
+  ) {
+    return NODE_CATEGORIES[4];
+  }
+  return NODE_CATEGORIES[5];
+}
 
 // canvas fillStyle 은 var() 를 파싱하지 못하므로 렌더 시점에 토큰 값을 실측해 치환한다.
 function tokenColor(varName: string, fallback: string): string {
@@ -33,9 +102,6 @@ export default function GraphView({
   const [width, setWidth] = useState(800);
   const [selected, setSelected] = useState<GraphNode | null>(null);
   const hi = useMemo(() => new Set(highlight), [highlight]);
-  // 표면/헤어라인은 --ink-1/--line, 강조(하이라이트 노드)만 --accent.
-  const accentColor = tokenColor("--accent", NODE_COLOR);
-  const surfaceColor = tokenColor("--ink-1", NODE_HI);
   const lineColor = tokenColor("--line", "#2a2d35");
 
   const nodeById = useMemo(() => {
@@ -56,6 +122,26 @@ export default function GraphView({
   return (
     <div ref={wrapRef} className="w-full">
       <div className="relative overflow-hidden rounded-lg border border-line bg-[var(--ink-2)]">
+        {/* 상단 5대 시맨틱 카테고리 범례 바 */}
+        <div className="flex flex-wrap items-center gap-x-3.5 gap-y-1.5 border-b border-line bg-[var(--ink-1)] px-3.5 py-2 text-xs">
+          <span className="text-[11px] font-bold text-muted shrink-0">도메인 범례:</span>
+          {NODE_CATEGORIES.slice(0, 5).map((cat) => (
+            <div key={cat.id} className="flex items-center gap-1.5">
+              <span
+                className="h-2.5 w-2.5 rounded-full shrink-0 shadow-sm"
+                style={{ backgroundColor: cat.color }}
+              />
+              <span className="text-[11px] font-medium text-muted">{cat.label}</span>
+            </div>
+          ))}
+          {hi.size > 0 && (
+            <div className="flex items-center gap-1.5 sm:ml-auto">
+              <span className="h-2.5 w-2.5 rounded-full shrink-0 bg-white ring-2 ring-accent" />
+              <span className="text-[11px] font-bold text-accent">RAG 근거 노드 ({hi.size})</span>
+            </div>
+          )}
+        </div>
+
         <ForceGraph2D
           graphData={data}
           width={width}
@@ -66,10 +152,12 @@ export default function GraphView({
           warmupTicks={20}
           // 기본 렌더(커스텀 캔버스 X)라 정지 후 재페인트가 없어 가볍다.
           nodeRelSize={4}
-          nodeColor={(n: NodeObject) =>
-            hi.has(String(n.id)) ? surfaceColor : accentColor
-          }
-          nodeVal={(n: NodeObject) => (hi.has(String(n.id)) ? 3 : 1)}
+          nodeColor={(n: NodeObject) => {
+            if (hi.has(String(n.id))) return "#ffffff";
+            const group = (n as { group?: string }).group;
+            return getNodeCategory(group).color;
+          }}
+          nodeVal={(n: NodeObject) => (hi.has(String(n.id)) ? 3.5 : 1.2)}
           nodeLabel={(n: NodeObject) =>
             `${n.id} (${(n as { group?: string }).group ?? ""})`
           }
@@ -84,9 +172,12 @@ export default function GraphView({
         />
 
         {selected && (
-          <div className="absolute right-3 top-3 max-h-[480px] w-64 overflow-auto rounded-lg border border-line bg-[var(--ink-1)] p-3 text-xs">
+          <div className="absolute right-3 top-12 max-h-[440px] w-64 overflow-auto rounded-lg border border-line bg-[var(--ink-1)] p-3 text-xs shadow-lg">
             <div className="mb-2 flex items-start justify-between gap-2">
-              <span className="text-[10px] uppercase tracking-wider text-muted">
+              <span
+                className="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white"
+                style={{ backgroundColor: getNodeCategory(selected.group).color }}
+              >
                 {selected.group}
               </span>
               <button
@@ -116,7 +207,7 @@ export default function GraphView({
         )}
       </div>
       <p className="mt-1.5 text-[11px] text-muted">
-        노드에 마우스를 올리면 이름·관계명, 클릭하면 상세정보가 보입니다.
+        노드에 마우스를 올리면 이름과 관계명, 클릭하면 상세정보가 보입니다.
       </p>
     </div>
   );