Step 9. BFS 탐색과 인터랙티브 UI

// src/app/page.tsx (findConnectedNodes)
 
// BFS로 depth N까지 연결된 노드 찾기
const findConnectedNodes = useCallback((nodeId: string, maxDepth: number): Set<string> => {
  if (!filteredGraphData) return new Set();
 
  const visited = new Set<string>([nodeId]);
  const queue: { id: string; level: number }[] = [{ id: nodeId, level: 0 }];
 
  while (queue.length > 0) {
    const { id, level } = queue.shift()!;
 
    if (level >= maxDepth) continue;
 
    const neighbors = adjacencyMap.get(id);
    if (neighbors) {
      neighbors.forEach(neighborId => {
        if (!visited.has(neighborId)) {
          visited.add(neighborId);
          queue.push({ id: neighborId, level: level + 1 });
        }
      });
    }
  }
 
  return visited;
}, [filteredGraphData, adjacencyMap]);

const visited = new Set<string>([nodeId]);
const queue: { id: string; level: number }[] = [{ id: nodeId, level: 0 }];

while (queue.length > 0) {
  const { id, level } = queue.shift()!;
 
  if (level >= maxDepth) continue;
 
  const neighbors = adjacencyMap.get(id);
  if (neighbors) {
    neighbors.forEach(neighborId => {
      if (!visited.has(neighborId)) {
        visited.add(neighborId);
        queue.push({ id: neighborId, level: level + 1 });
      }
    });
  }
}

물결 0단계 (level 0): 시작 노드 '감자빵'
   ↓ 감자빵의 이웃을 queue에 추가 (level 1)
물결 1단계 (level 1): '감자빵 맛집', '감자빵 택배', '강릉 감자빵'
   ↓ 각 이웃의 이웃을 queue에 추가 (level 2)
물결 2단계 (level 2): '강릉 맛집', '택배 배송', ...
   ↓ maxDepth에 도달하면 continue로 더 이상 확장하지 않음

return visited;

// src/app/page.tsx (getNodeColor)
 
const getNodeColor = useCallback((node: any) => {
  const kNode = node as KeywordNode;
 
  // ── 분기 1: 하이라이트 모드일 때 ──
  if (highlightNodes.size > 0) {
    // 하이라이트 대상이 아닌 노드 → 회색 반투명
    if (!highlightNodes.has(kNode.id)) {
      return 'rgba(148,163,184,0.25)';
    }
    // 사용자가 직접 클릭한 노드 → 주황색
    if (selectedNode?.id === kNode.id) {
      return '#F97316';
    }
  }
 
  // ── 분기 2: 시드 키워드 → 그룹 컬러 ──
  if (kNode.isSeed) {
    return GROUP_COLORS[kNode.group % GROUP_COLORS.length];
  }
 
  // ── 분기 3: 일반 키워드 → 경쟁도 기반 ──
  switch (kNode.compIdx) {
    case '높음': return '#EF4444';   // 빨강
    case '중간': return '#EAB308';   // 노랑
    case '낮음': return '#22C55E';   // 초록
    default: return '#94A3B8';       // 회색
  }
}, [highlightNodes, selectedNode]);

getNodeColor(node)
  │
  ├─ highlightNodes.size > 0?  (하이라이트 모드)
  │     │
  │     ├─ node가 highlightNodes에 없음 → rgba(148,163,184,0.25) (회색 반투명)
  │     └─ node가 selectedNode        → #F97316 (주황)
  │     └─ (그 외 하이라이트 노드)     → 아래 분기로 통과
  │
  ├─ node.isSeed?
  │     └─ Yes → GROUP_COLORS[group % 10]  (시드 그룹 컬러)
  │
  └─ node.compIdx?
        ├─ '높음' → #EF4444 (빨강)
        ├─ '중간' → #EAB308 (노랑)
        ├─ '낮음' → #22C55E (초록)
        └─ default → #94A3B8 (회색)

// src/app/page.tsx (상수)
 
const GROUP_COLORS = [
  '#3B82F6', '#22C55E', '#F97316', '#A855F7', '#14B8A6',
  '#EAB308', '#0EA5E9', '#EF4444', '#8B5CF6', '#64748B',
];

// src/app/page.tsx (인터랙션 핸들러)
 
// 선택된 노드의 연관 노드 업데이트
const updateHighlight = useCallback((node: KeywordNode, currentDepth: number) => {
  const connected = findConnectedNodes(node.id, currentDepth);
  setHighlightNodes(connected);
 
  if (filteredGraphData) {
    const connectedNodes = filteredGraphData.nodes.filter(
      n => connected.has(n.id) && n.id !== node.id
    );
    setConnectedKeywords(connectedNodes);
  }
}, [findConnectedNodes, filteredGraphData]);
 
// 노드 클릭 핸들러
const handleNodeClick = useCallback((node: any) => {
  const kNode = node as KeywordNode;
  setSelectedNode(kNode);
  updateHighlight(kNode, depth);
}, [depth, updateHighlight]);
 
// 선택 해제
const clearSelection = useCallback(() => {
  setSelectedNode(null);
  setHighlightNodes(new Set());
  setConnectedKeywords([]);
}, []);

// src/app/page.tsx (depth 변경 감지)
 
// depth 변경 시 하이라이트 업데이트
useEffect(() => {
  if (selectedNode) {
    updateHighlight(selectedNode, depth);
  }
}, [depth, selectedNode, updateHighlight]);

// src/app/page.tsx (로딩 상태)
 
if (loading) {
  return (
    <div className="app-shell min-h-screen flex items-center justify-center px-4 py-10">
      <GlobalStyles />
      <div className="surface-card w-full max-w-md rounded-3xl px-8 py-10 text-center">
        <div className="mx-auto mb-5 h-12 w-12 animate-spin rounded-full
             border-2 border-slate-200 border-t-blue-500" />
        <p className="text-lg font-semibold text-slate-900">
          키워드 데이터 로딩 중...
        </p>
        <p className="mt-2 text-sm text-slate-500">
          서버에서 그래프 데이터를 불러오는 중입니다.
        </p>
      </div>
    </div>
  );
}

┌──────────────────────────────────────────────────────────────────┐
│ header: 타이틀 + 필터 컨트롤 (최소 검색량, 상위 엣지, 탐색 깊이) │
├────────────────┬─────────────────────────────────────────────────┤
│ aside (320px)  │ section (나머지 너비)                            │
│                │                                                 │
│ 그래프 요약     │  ForceGraph2D                                   │
│ 탐색 가이드     │  (그래프 캔버스)                                  │
│ 선택된 키워드   │                                                 │
│  └ 연관 목록    │                                                 │
│                │                                                 │
├────────────────┴─────────────────────────────────────────────────┤

// src/app/page.tsx (header 영역)
 
<header className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
  <div>
    <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500">
      Marketing Intelligence
    </p>
    <h1 className="mt-2 text-3xl font-semibold text-slate-900">
      Keyword Graph Console
    </h1>
  </div>
  <div className="surface-card flex flex-wrap items-center gap-5 rounded-2xl px-4 py-3">
    {/* 최소 검색량 슬라이더 */}
    <div className="flex items-center gap-2">
      <span className="font-semibold text-slate-700">최소 검색량</span>
      <input type="range" min={0} max={10000} step={500}
             value={minVolume}
             onChange={(e) => setMinVolume(Number(e.target.value))} />
      <span>{minVolume.toLocaleString()}</span>
    </div>
 
    {/* 상위 엣지 슬라이더 */}
    <div className="flex items-center gap-2">
      <span className="font-semibold text-slate-700">상위 엣지</span>
      <input type="range" min={1} max={30} step={1}
             value={topN}
             onChange={(e) => setTopN(Number(e.target.value))} />
      <span>{topN}</span>
    </div>
 
    {/* 탐색 깊이 +/- 버튼 */}
    <span className="font-semibold text-slate-700">탐색 깊이</span>
    <div className="flex items-center gap-2 rounded-full bg-slate-100 px-2 py-1">
      <button onClick={() => setDepth(d => Math.max(1, d - 1))}
              disabled={depth <= 1}> - </button>
      <span>{depth}</span>
      <button onClick={() => setDepth(d => Math.min(10, d + 1))}
              disabled={depth >= 10}> + </button>
    </div>
  </div>
</header>

// src/app/page.tsx (사이드바 - 선택된 키워드 영역)
 
<section className="surface-card rounded-2xl p-4">
  <div className="flex items-center justify-between">
    <h2 className="text-sm font-semibold text-slate-900">선택된 키워드</h2>
    {selectedNode && (
      <button onClick={clearSelection} className="text-xs font-semibold text-slate-500">
        선택 해제
      </button>
    )}
  </div>
 
  {selectedNode ? (
    <>
      {/* 키워드 상세 정보 */}
      <div className="mt-3 rounded-xl border border-slate-200 bg-white px-3 py-3">
        <p className="text-sm font-semibold text-slate-900">{selectedNode.keyword}</p>
        <div className="mt-2 grid grid-cols-2 gap-2 text-xs text-slate-600">
          <span>검색량(PC)</span>
          <span>{selectedNode.monthlyPcQcCnt.toLocaleString()}</span>
          <span>검색량(Mobile)</span>
          <span>{selectedNode.monthlyMobileQcCnt.toLocaleString()}</span>
          <span>경쟁도</span>
          <span className={
            selectedNode.compIdx === '높음' ? 'text-red-600' :
            selectedNode.compIdx === '중간' ? 'text-yellow-600' : 'text-green-600'
          }>{selectedNode.compIdx}</span>
          <span>시드 키워드</span>
          <span>{selectedNode.isSeed ? '예' : '아니오'}</span>
        </div>
      </div>
 
      {/* 연관 키워드 목록 */}
      <div className="mt-4">
        <h3 className="text-xs font-semibold text-slate-500">
          연관 키워드 (Depth {depth}, {connectedKeywords.length}개)
        </h3>
        <div className="mt-2 max-h-64 space-y-2 overflow-y-auto">
          {connectedKeywords.map(node => (
            <button key={node.id} onClick={() => handleNodeClick(node)}
                    className="flex w-full items-center justify-between rounded-lg ...">
              <span className="truncate">{node.keyword}</span>
              <span className="rounded-full px-2 py-0.5 text-[10px] font-semibold">
                {node.totalVolume.toLocaleString()}
              </span>
            </button>
          ))}
        </div>
      </div>
    </>
  ) : (
    <div className="mt-3 rounded-xl border border-dashed border-slate-200 ...">
      그래프에서 키워드를 선택해 연결 관계를 확인하세요.
    </div>
  )}
</section>

// src/app/page.tsx (ForceGraph2D 렌더링)
 
<ForceGraph2D
  ref={fgRef}
  graphData={filteredGraphData}
  width={dimensions.width}
  height={dimensions.height}
 
  // ── 노드 설정 ──
  nodeColor={getNodeColor}
  nodeRelSize={4}
  nodeVal={(node: any) => {
    const kNode = node as KeywordNode;
    return 1 + (kNode.totalVolume / maxVolume) * 49;
  }}
  nodeLabel={getNodeLabel}
 
  // ── 엣지 설정 (하이라이트 반응) ──
  linkColor={(link: any) => {
    if (highlightNodes.size === 0) return 'rgba(148,163,184,0.12)';
    const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
    const targetId = typeof link.target === 'object' ? link.target.id : link.target;
    if (highlightNodes.has(sourceId) && highlightNodes.has(targetId)) {
      return 'rgba(249,115,22,0.7)';      // 하이라이트 엣지 → 주황 반투명
    }
    return 'rgba(148,163,184,0.04)';       // 비하이라이트 엣지 → 거의 투명
  }}
  linkWidth={(link: any) => {
    if (highlightNodes.size === 0) return 0.5;
    const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
    const targetId = typeof link.target === 'object' ? link.target.id : link.target;
    if (highlightNodes.has(sourceId) && highlightNodes.has(targetId)) {
      return 1.8;                           // 하이라이트 엣지 → 굵게
    }
    return 0.3;                             // 비하이라이트 엣지 → 가늘게
  }}
 
  // ── 시뮬레이션 설정 ──
  warmupTicks={100}
  cooldownTicks={0}
 
  // ── 인터랙션 ──
  onNodeClick={handleNodeClick}
  onBackgroundClick={clearSelection}
  enableNodeDrag={true}
  enableZoomInteraction={true}
  enablePanInteraction={true}
/>

[네이버 광고 API]
      │
      ▼  (Step 2~3: Rate Limiter + API Client)
[Raw JSON 파일]  ←  data/raw/*.json
      │
      ▼  (Step 4~5: 데이터 파싱 + 그래프 빌드)
[GraphData { nodes, links }]
      │
      ▼  (Step 6: API Route)
[Next.js /api/graph 엔드포인트]
      │
      ▼  (Step 7: fetch + useState)
[React 컴포넌트 상태]
      │
      ▼  (Step 8: Top-N 필터링 + adjacencyMap + forceRadial)
[filteredGraphData]
      │
      ▼  (Step 9: BFS + 하이라이트 + 대시보드 UI)
[완성된 인터랙티브 시각화]