[Merge/#46] Feat/#13/WordCloud

[fix]키워드버블속도구현-요청형식수정

Author: mogg22

src/components/BubbleChart.jsx

@@ -1,67 +1,74 @@
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
-const BubbleChart = ({ keywordCounts, onKeywordClick }) => {
-  const svgRef = useRef(null);
+const BubbleChart = ({ keywordCounts }) => {
+  const svgRef = useRef();
 
   useEffect(() => {
     if (!keywordCounts || Object.keys(keywordCounts).length === 0) return;
 
-    const data = Object.entries(keywordCounts)
-      .map(([keyword, count]) => ({ name: keyword, value: count }))
-      .slice(0, 10); // 상위 10개만 표시
+    d3.select(svgRef.current).selectAll("*").remove(); // 기존 차트 제거
 
-    const width = 800;
-    const height = 600;
-    const maxRadius = 150;
+    const width = 600,
+      height = 500;
 
+    // 🔹 데이터 유효성 검사 (NaN 제거)
+    const validData = Object.entries(keywordCounts)
+      .filter(([name, size]) => typeof size === "number" && !isNaN(size)) // NaN 제거
+      .map(([name, size]) => ({ name, size }));
+
+    if (validData.length === 0) return; // 유효한 데이터 없으면 차트 렌더링 X
+
+    // 🔹 색상 스케일: 값이 클수록 진한 파란색 적용
+    const minSize = d3.min(validData, (d) => d.size);
+    const maxSize = d3.max(validData, (d) => d.size);
     const colorScale = d3
       .scaleSequential(d3.interpolateBlues)
-      .domain([
-        Math.min(...data.map((d) => d.value)),
-        Math.max(...data.map((d) => d.value)),
-      ]);
+      .domain([minSize, maxSize]);
+
+    // D3 pack layout 사용
+    const bubble = d3.pack().size([width, height]).padding(2);
+
+    const root = d3
+      .hierarchy({ children: validData })
+      .sum((d) => d.size)
+      .sort((a, b) => b.value - a.value);
 
-    const bubble = d3.pack().size([width, height]).padding(5);
-    const root = d3.hierarchy({ children: data }).sum((d) => d.value);
     bubble(root);
 
     const svg = d3
       .select(svgRef.current)
-      .attr("viewBox", `0 0 ${width} ${height}`)
       .attr("width", width)
       .attr("height", height)
       .attr("class", "bubble");
 
     const nodes = svg
       .selectAll(".node")
       .data(root.children)
-      .join("g")
+      .enter()
+      .append("g")
       .attr("class", "node")
-      .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
-      .style("cursor", "pointer")
-      .on("click", (event, d) => {
-        if (onKeywordClick) {
-          onKeywordClick(d.data.name);
-        }
-      });
+      .attr("transform", (d) => `translate(${d.x || 0}, ${d.y || 0})`); // 🔹 NaN 방지
 
     nodes
       .append("circle")
-      .attr("r", (d) => Math.min(d.r, maxRadius))
-      .attr("fill", (d) => colorScale(d.data.value));
+      .attr("r", (d) => d.r || 10) // 🔹 NaN 방지: 최소 크기 지정
+      .style("fill", (d) => colorScale(d.data.size)) // ✅ 값이 클수록 진한 파란색 적용
+      .style("opacity", 0.8)
+      .transition()
+      .duration(1000)
+      .attr("r", (d) => d.r || 10);
 
     nodes
       .append("text")
       .attr("dy", ".3em")
       .attr("text-anchor", "middle")
-      .text((d) => d.data.name)
-      .attr("fill", "#fff")
-      .style("font-size", (d) => `${Math.max(d.r / 5, 12)}px`)
-      .style("font-weight", "bold");
-  }, [keywordCounts, onKeywordClick]);
+      .style("fill", "#fff")
+      .style("font-size", (d) => Math.max(10, d.r / 4) + "px")
+      .text((d) => d.data.name);
+  }, [keywordCounts]);
 
-  return <svg ref={svgRef}></svg>;
+  return <svg ref={svgRef} />;
 };
 
 export default BubbleChart;

src/pages/Todaynews.jsx

@@ -26,7 +26,7 @@ function Todaynews() {
   const [keywords, setKeywords] = useState([]); // 키워드 목록
   const [keywordCounts, setKeywordCounts] = useState({}); // 기사 개수
   const [isLoading, setIsLoading] = useState(true);
-  const navigate = useNavigate(); // 🔹 페이지 이동을 위한 navigate 추가
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchKeywordData = async () => {
@@ -37,30 +37,36 @@ function Todaynews() {
           const keywordList = response.data.keywords.slice(0, 20); // 상위 20개 키워드 사용
           setKeywords(keywordList);
 
-          // 🔹 각 키워드별 기사 개수 가져오기
-          const requests = keywordList.map((keyword) =>
-            axios.get(`${apiUrl}/articles/count/${keyword}`).catch(() => null)
-          );
+          console.log("Keyword List:", keywordList);
 
-          const responses = await Promise.all(requests);
+          const encodedKeywords = keywordList.map(encodeURIComponent).join(",");
 
-          const counts = {};
-          responses.forEach((res, idx) => {
-            if (res && res.data && typeof res.data.totalCount === "number") {
-              counts[keywordList[idx]] = res.data.totalCount;
-            } else {
-              counts[keywordList[idx]] = 0; // 실패 시 기본값 0
-            }
-          });
+          const countResponse = await axios.get(
+            `${apiUrl}/articles/count/total?keywords=${encodedKeywords}`
+          );
 
-          setKeywordCounts(counts);
+          console.log("API Response:", countResponse.data);
+
+          // 🔹 API 응답 데이터 확인 및 변환 (totalCount 추출)
+          if (countResponse.data) {
+            const counts = {};
+            Object.entries(countResponse.data).forEach(([keyword, data]) => {
+              if (data !== null) {
+                counts[keyword] = data; // ✅ null이 아닌 경우에만 저장
+              }
+            });
+            setKeywordCounts(counts);
+          } else {
+            console.error("API 응답이 예상과 다름:", countResponse.data);
+            setKeywordCounts({});
+          }
         } else {
-          console.error("❌ API 응답 형식이 예상과 다름:", response.data);
+          console.error("키워드 API 응답이 예상과 다름:", response.data);
           setKeywords([]);
           setKeywordCounts({});
         }
       } catch (error) {
-        console.error("❌ 키워드 데이터 가져오기 실패:", error);
+        console.error("키워드 데이터 가져오기 실패:", error);
         setKeywords([]);
         setKeywordCounts({});
       }