Merge pull request #81 from kusitms-28th-Meetup-E/feat/#78/chartAPI

feat : chart api

src/apis/index.ts

@@ -6,6 +6,7 @@ const GwangjangAxios = axios.create({
   baseURL: "https://api.gwang-jang.co.kr",
 });
 
+//로그인 및 회원가입
 export const postLocalLogin = async ({ id, pw }: loginType) => {
   const res = await GwangjangAxios.post("/member/auth/signIn", { id, pw });
   return res;
@@ -77,6 +78,51 @@ export const putKakaoRegister = async ({
   return res;
 };
 
+// 메인페이지
+export const getMainBubbleChart = async () => {
+  const res = await GwangjangAxios.get("/keyword/main");
+  return res;
+};
+
+// 디테일페이지
+export const getDetailOneLineIntro = async () => {
+  const res = await GwangjangAxios.get(`/keyword/topic/issueDetail/all`);
+  return res;
+};
+
+export const getDetailLineGraph = async (name: string) => {
+  const res = await GwangjangAxios.get(`/keyword/trend/${name}`);
+  return res;
+};
+
+export const getDetailSubscribeCount = async (issueId: number) => {
+  const res = await GwangjangAxios.get(`/member/subscribe/issue/${issueId}`);
+  return res;
+};
+
+export const getDetailBubbleGraph = async (name: string) => {
+  const res = await GwangjangAxios.get(`/contents/bubbleChart/${name}`);
+  return res;
+};
+
+export const getKeywordArticle = async (keyword: string) => {
+  const res = await GwangjangAxios.get(`/contents/keyword/${keyword}/NAVER`);
+  return res;
+};
+export const getKeywordYoutube = async (keyword: string) => {
+  const res = await GwangjangAxios.get(`/contents/keyword/${keyword}/YOUTUBE`);
+  return res;
+};
+export const getTopicArticle = async (issue: string) => {
+  const res = await GwangjangAxios.get(`/contents/issueTitle/${issue}/NAVER`);
+  return res;
+};
+export const getTopicYoutube = async (issue: string) => {
+  const res = await GwangjangAxios.get(`/contents/issueTitle/${issue}/YOUTUBE`);
+  return res;
+};
+
+// 커뮤니티 페이지
 export const getCommunityAllData = async () => {
   const res = await GwangjangAxios.get("/community/");
   return res;

src/components/atoms/button/index.tsx

@@ -136,20 +136,13 @@ export const LikeBorderButton = ({
   );
 };
 
-export const QuotBorderButton = ({
-  onClick,
-  quotCount,
-}: {
-  onClick?: () => void;
-  quotCount: number;
-}) => {
+export const QuotBorderButton = ({ onClick }: { onClick?: () => void }) => {
   //인용 버튼 클릭 시 모달창 오픈
 
   return (
     <>
       <BorderStyleButton onClick={onClick}>
         <div>인용</div>
-        <p>{quotCount}</p>
       </BorderStyleButton>
     </>
   );

src/components/atoms/oneLine/style.ts

@@ -4,15 +4,16 @@ export const Container = styled.div`
   display: flex;
   border-radius: 5px;
   background: var(--Gray3_200, #eee);
-  width: fit-content;
+  /* width: fit-content; */
   height: 20px;
-  padding: 17px 20px;
+  padding: 22px 20px;
   line-height: 27px;
   align-items: center;
   .title {
     display: flex;
     align-items: center;
     color: var(--Gray6_500, #959595);
+    width: 80px;
   }
   .title::after {
     content: "";
@@ -26,6 +27,7 @@ export const Container = styled.div`
 
   .text {
     color: var(--Gray9_800, #424242);
+    width: 900px;
   }
 
   @media (max-width: 650px) {

src/components/molecules/bubble/index.tsx

@@ -1,107 +1,147 @@
-import { useEffect } from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useMemo, useState } from "react";
 
 import * as Highcharts from "highcharts";
 import HighchartsMore from "highcharts/highcharts-more";
 import HighchartsAccessibility from "highcharts/modules/accessibility";
 import HighchartsExporting from "highcharts/modules/exporting";
 import HighchartsReact from "highcharts-react-official";
 import { useParams } from "react-router-dom";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
+import { getDetailBubbleGraph } from "@/apis";
 import backgroundImg from "@/assets/Bubble/detail-bubbleBackground.svg";
 HighchartsExporting(Highcharts);
 HighchartsAccessibility(Highcharts);
 HighchartsMore(Highcharts);
 import "./theme2.css";
+//import { bubbleDummydata } from "@/dummy/bubbleData";
 import { bubbleDummydata } from "@/dummy/bubbleData";
-import { areaState } from "@/recoil/atoms";
+import { areaState, detailPageKeyword } from "@/recoil/atoms";
+import { BubbleGraphProps } from "@/types";
 
 const Bubble = () => {
   const [area, setArea] = useRecoilState<string>(areaState);
+  const [bubbleGraphData, setBubbleGraphData] = useState<BubbleGraphProps[]>([]);
+  const setDetailPageKeyword = useSetRecoilState(detailPageKeyword);
+  const options = useMemo(() => {
+    return {
+      chart: {
+        type: "bubble",
+        plotBorderWidth: 0,
+        height: 500,
+        width: 1080,
+        marginLeft: 0,
+        marginRight: 0,
+        plotBackgroundImage: backgroundImg,
+      },
 
-  const options = {
-    chart: {
-      type: "bubble",
-      plotBorderWidth: 0,
-      height: 500,
-      width: 1080,
-      marginLeft: 0,
-      marginRight: 0,
-      plotBackgroundImage: backgroundImg,
-    },
-
-    legend: {
-      enabled: false,
-    },
+      legend: {
+        enabled: false,
+      },
 
-    tooltip: {
-      useHTML: true,
-      headerFormat: "<table>",
-      pointFormat:
-        // '<tr><th colspan="2"><h3>{point.name}</h3></th></tr>' +
-        "<tr><th><h5>키워드 도출 횟수 :&nbsp</h5></th><td><h5> {point.z}회</h5></td></tr>",
-      footerFormat: "</table>",
-      followPointer: true,
-      style: {
-        color: "#000",
-        fontSize: "0.8rem",
+      tooltip: {
+        useHTML: true,
+        headerFormat: "<table>",
+        pointFormat:
+          // '<tr><th colspan="2"><h3>{point.name}</h3></th></tr>' +
+          "<tr><th><h5>키워드 도출 횟수 :&nbsp</h5></th><td><h5> {point.z}회</h5></td></tr>",
+        footerFormat: "</table>",
+        followPointer: true,
+        style: {
+          color: "#000",
+          fontSize: "0.8rem",
+        },
+      },
+      exporting: {
+        enabled: false,
       },
-    },
-    exporting: {
-      enabled: false,
-    },
-    plotOptions: {
-      bubble: {
-        minSize: 3,
-        maxSize: 180,
-        zMin: 0,
-        zMax: 200,
-        color: "#212121",
-        dataLabels: {
-          enabled: true,
-          format: "{point.name}",
-          style: {
-            color: "#FFF",
-            textOutline: "none",
-            fontWeight: "normal",
-            fontFamily: "Pretendard",
-            fontSize: 18,
-            transition: "opacity .1ms",
+      plotOptions: {
+        bubble: {
+          minSize: 3,
+          maxSize: 180,
+          zMin: 0,
+          zMax: 200,
+          color: "#212121",
+          dataLabels: {
+            enabled: true,
+            format: "{point.name}",
+            style: {
+              color: "#FFF",
+              textOutline: "none",
+              fontWeight: "normal",
+              fontFamily: "Pretendard",
+              fontSize: 18,
+              transition: "opacity .1ms",
+            },
+          },
+          events: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            click: function (e: any) {
+              console.log(e.point.name);
+              setDetailPageKeyword(e.point.name);
+              //1부터 9까지 숫자가 들어오면 거기에 맞춰서 라우팅 하는게 맞을듯
+              //setWidth(width - 100); // 반응형 할 때, 사용 임시
+            },
           },
         },
       },
-    },
 
-    series: [
-      {
-        data: bubbleDummydata,
-        colorByPoint: true,
+      series: [
+        {
+          data: bubbleGraphData,
+          colorByPoint: true,
+        },
+      ],
+      credits: {
+        enabled: false,
       },
-    ],
-    credits: {
-      enabled: false,
-    },
-  };
+    };
+  }, [bubbleGraphData, setDetailPageKeyword]);
   const { id } = useParams();
+
   useEffect(() => {
-    if (id === "1" || id === "2" || id === "3") {
+    const name = decodeURI(decodeURIComponent(id || ""));
+    if (name === "후쿠시마 오염수" || name === "일회용품  사용 규제 시행") {
+      setArea("환경");
+    } else if (
+      name === "주 69시간 근로시간 제도 개편" ||
+      name === "쿠팡 노동자 사망" ||
+      name === "SPC 불매 운동"
+    ) {
       setArea("일자리·노동");
-    } else if (id === "4" || id === "5") {
+    } else if (name === "국민연금 개혁" || name === "이태원 참사") {
       setArea("주거·사회 안전망");
-    } else if (id === "6" || id === "7" || id === "8") {
-      setArea("환경");
-    } else if (id === "9" || id === "10") {
+    } else if (name === "의대 정원 확대" || name === "서이초 교사 사건") {
       setArea("교육");
     }
   }, [area, id, setArea]);
 
+  useEffect(() => {
+    const name = decodeURI(decodeURIComponent(id || ""));
+    getDetailBubbleGraph(name)
+      .then((res) => {
+        const obj = [...res.data.data];
+        const RealObj = obj.map((item: any) => {
+          return Object.freeze(item);
+        });
+        setBubbleGraphData(RealObj);
+      })
+      .catch((err) => {
+        console.log(err);
+        setBubbleGraphData(bubbleDummydata);
+      });
+  }, [id]);
+
   return (
     <Container $area={area}>
-      <HighchartsReact
-        highcharts={Highcharts}
-        options={options}
-      />
+      {bubbleGraphData.length && (
+        <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+        />
+      )}
     </Container>
   );
 };
@@ -115,9 +155,9 @@ const Container = styled.div<{ $area: string }>`
     filter: ${(props) =>
       props.$area === "환경"
         ? "drop-shadow(0px 6px 30px rgba(26, 226, 118, 0.4)) !important;"
-        : props.$area === "교육"
-        ? "drop-shadow(0px 6px 30px rgba(0, 132, 255, 0.4)) !important;"
         : props.$area === "일자리·노동"
+        ? "drop-shadow(0px 6px 30px rgba(0, 132, 255, 0.4)) !important;"
+        : props.$area === "교육"
         ? "drop-shadow(0px 6px 30px rgba(255, 153, 0, 0.4)) !important;"
         : props.$area === "주거·사회 안전망"
         ? "drop-shadow(0px 6px 30px rgba(119, 85, 255, 0.4)) !important;"
@@ -136,16 +176,16 @@ const Container = styled.div<{ $area: string }>`
     fill: ${(props) =>
       props.$area === "환경"
         ? " rgba(26, 226, 118, 0.8) !important;"
-        : props.$area === "교육"
-        ? "rgba(0, 132, 255, 0.8) !important;"
         : props.$area === "일자리·노동"
+        ? "rgba(0, 132, 255, 0.8) !important;"
+        : props.$area === "교육"
         ? " rgba(255, 153, 0, 0.8) !important;"
         : props.$area === "주거·사회 안전망"
         ? " rgba(119, 85, 255, 0.8) !important;"
         : ""};
   }
   /* fill: rgba(26, 226, 118, 0.8) !important; */
-  /* stroke: var(--highcharts-color-2) !important; */
+  /* stroke: var(—highcharts-color-2) !important; */
 
   /* 
   filter: drop-shadow(0px 6px 30px rgba(255, 153, 0, 0.30)); 교육

src/components/molecules/carousel/ArticleCarousel.tsx

@@ -11,9 +11,9 @@ import { ArticleDataProps } from "@/types";
 
 import { SlideItem } from "../slideItem";
 
-export const ArticleCarousel = ({ data }: ArticleDataProps) => {
+export const ArticleCarousel = ({ data }: { data: ArticleDataProps[] }) => {
   const maxSlidesToShow = Math.min(data.length, 4);
-
+  console.log(data);
   const SliderSetting = {
     dots: false,
     infinite: true,
@@ -61,7 +61,7 @@ export const ArticleCarousel = ({ data }: ArticleDataProps) => {
         {...SliderSetting}
         ref={slickRef}
       >
-        {data.map((item, idx) => (
+        {data?.map((item, idx) => (
           <SlideItemWrapper key={idx}>
             <SlideItem data={item} />
           </SlideItemWrapper>