From f3294a5778f45170e7133c44844bcd79b982e76b Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:15:10 +0900 Subject: [PATCH 01/14] feat : api --- src/apis/index.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/apis/index.ts b/src/apis/index.ts index 50c05aec..c3a1221b 100644 --- a/src/apis/index.ts +++ b/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,34 @@ 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 getCommunityAllData = async () => { const res = await GwangjangAxios.get("/community"); return res; From 0864c78e64e8644269d94af1aee05aa6ff5b10fc Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:15:31 +0900 Subject: [PATCH 02/14] design : oneLine --- src/components/atoms/oneLine/style.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/oneLine/style.ts b/src/components/atoms/oneLine/style.ts index c5d9bb77..9b03a790 100644 --- a/src/components/atoms/oneLine/style.ts +++ b/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) { From de186ae4f9fcf382b14bc4697c572f9812343b6b Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:15:49 +0900 Subject: [PATCH 03/14] feat : bubbleChart api --- src/components/molecules/bubble/index.tsx | 61 ++++++++++++++++------- 1 file changed, 43 insertions(+), 18 deletions(-) diff --git a/src/components/molecules/bubble/index.tsx b/src/components/molecules/bubble/index.tsx index 054d9346..7c1d6db3 100644 --- a/src/components/molecules/bubble/index.tsx +++ b/src/components/molecules/bubble/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect } from "react"; import * as Highcharts from "highcharts"; @@ -6,7 +7,7 @@ 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, useRecoilValue } from "recoil"; import styled from "styled-components"; import backgroundImg from "@/assets/Bubble/detail-bubbleBackground.svg"; @@ -14,12 +15,12 @@ HighchartsExporting(Highcharts); HighchartsAccessibility(Highcharts); HighchartsMore(Highcharts); import "./theme2.css"; -import { bubbleDummydata } from "@/dummy/bubbleData"; -import { areaState } from "@/recoil/atoms"; +//import { bubbleDummydata } from "@/dummy/bubbleData"; +import { areaState, bubbleGraphState } from "@/recoil/atoms"; const Bubble = () => { const [area, setArea] = useRecoilState(areaState); - + const bubbleGraphData = useRecoilValue(bubbleGraphState); const options = { chart: { type: "bubble", @@ -75,7 +76,7 @@ const Bubble = () => { series: [ { - data: bubbleDummydata, + data: bubbleGraphData, colorByPoint: true, }, ], @@ -84,24 +85,48 @@ const Bubble = () => { }, }; 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("교육"); } + + // getDetailBubbleGraph(name) + // .then((res) => { + // console.log(res.data); + // const obj = [...res.data.data]; + // const RealObj = obj.map((item: any) => { + // return Object.freeze(item); + // }); + // console.log(RealObj); + // setBubbleGraphData(RealObj); + // }) + // .catch((err) => { + // console.log(err); + // }); }, [area, id, setArea]); return ( - + {bubbleGraphData.length !== 0 ? ( + + ) : ( + "" + )} ); }; @@ -115,9 +140,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,9 +161,9 @@ 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;" From b803f3b47b4582b90c24af0e2334cded0a85ccc5 Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:15:59 +0900 Subject: [PATCH 04/14] feat : lineGraph api --- src/components/molecules/line/index.tsx | 49 +++++++++++++++++++------ 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/src/components/molecules/line/index.tsx b/src/components/molecules/line/index.tsx index 54beb398..db617db7 100644 --- a/src/components/molecules/line/index.tsx +++ b/src/components/molecules/line/index.tsx @@ -1,3 +1,5 @@ +import { useEffect, useState } from "react"; + import * as Highcharts from "highcharts"; import HighchartsMore from "highcharts/highcharts-more"; import HighchartsAccessibility from "highcharts/modules/accessibility"; @@ -7,14 +9,37 @@ HighchartsExporting(Highcharts); HighchartsAccessibility(Highcharts); HighchartsMore(Highcharts); import "./theme3.css"; +import { useParams } from "react-router-dom"; import { useRecoilValue } from "recoil"; import styled from "styled-components"; -import { lineDummydata } from "@/dummy/lineData"; +import { getDetailLineGraph } from "@/apis"; import { areaState } from "@/recoil/atoms"; const Line = ({ showGraph }: { showGraph: boolean }) => { const area = useRecoilValue(areaState); + //const LineGraph = useRecoilValue(LineGraphState); + const [data, setData] = useState([]); + const { id } = useParams(); + + useEffect(() => { + const name = decodeURI(decodeURIComponent(id || "")); + + getDetailLineGraph(name) + .then((res) => { + const obj = Object.freeze(res.data.data); + console.log(res); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const RealObj = obj.map((item: any) => { + return Object.freeze(item); + }); + setData(RealObj); + }) + .catch((err) => { + console.log(err); + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const options = { chart: { type: "line", @@ -44,7 +69,7 @@ const Line = ({ showGraph }: { showGraph: boolean }) => { series: [ { name: "검색횟수", - data: lineDummydata, + data: data, }, ], credits: { @@ -84,9 +109,9 @@ const Container = styled.div<{ $showGraph: boolean; $area: string }>` props.$area === "환경" ? " rgba(26, 226, 118, 1) !important;" : props.$area === "교육" - ? "rgba(0, 132, 255, 1) !important;" + ? "rgba(255, 153, 0, 1) !important;" : props.$area === "일자리·노동" - ? " rgba(255, 153, 0, 1) !important;" + ? " rgba(0, 132, 255, 1) !important;" : props.$area === "주거·사회 안전망" ? " rgba(119, 85, 255, 1) !important;" : ""}; @@ -96,9 +121,9 @@ const Container = styled.div<{ $showGraph: boolean; $area: string }>` props.$area === "환경" ? " rgba(26, 226, 118, 1) !important;" : props.$area === "교육" - ? "rgba(0, 132, 255, 1) !important;" + ? "rgba(255, 153, 0, 1) !important;" : props.$area === "일자리·노동" - ? " rgba(255, 153, 0, 1) !important;" + ? " rgba(0, 132, 255, 1) !important;" : props.$area === "주거·사회 안전망" ? " rgba(119, 85, 255, 1) !important;" : ""}; @@ -108,9 +133,9 @@ const Container = styled.div<{ $showGraph: boolean; $area: string }>` props.$area === "환경" ? " rgba(26, 226, 118, 1) !important;" : props.$area === "교육" - ? "rgba(0, 132, 255, 1) !important;" + ? "rgba(255, 153, 0, 1) !important;" : props.$area === "일자리·노동" - ? " rgba(255, 153, 0, 1) !important;" + ? " rgba(0, 132, 255, 1) !important;" : props.$area === "주거·사회 안전망" ? " rgba(119, 85, 255, 1) !important;" : ""}; @@ -120,9 +145,9 @@ const Container = styled.div<{ $showGraph: boolean; $area: string }>` props.$area === "환경" ? " rgba(26, 226, 118, 1) !important;" : props.$area === "교육" - ? "rgba(0, 132, 255, 1) !important;" + ? "rgba(255, 153, 0, 1) !important;" : props.$area === "일자리·노동" - ? " rgba(255, 153, 0, 1) !important;" + ? " rgba(0, 132, 255, 1) !important;" : props.$area === "주거·사회 안전망" ? " rgba(119, 85, 255, 1) !important;" : ""}; @@ -130,9 +155,9 @@ const Container = styled.div<{ $showGraph: boolean; $area: string }>` props.$area === "환경" ? " rgba(26, 226, 118, 1) !important;" : props.$area === "교육" - ? "rgba(0, 132, 255, 1) !important;" + ? "rgba(255, 153, 0, 1) !important;" : props.$area === "일자리·노동" - ? " rgba(255, 153, 0, 1) !important;" + ? " rgba(0, 132, 255, 1) !important;" : props.$area === "주거·사회 안전망" ? " rgba(119, 85, 255, 1) !important;" : ""}; From 035c760e5411f2eedf23c683e7cfed3df408720d Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:16:15 +0900 Subject: [PATCH 05/14] feat : bubbleChart --- src/components/molecules/packbubble/index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/molecules/packbubble/index.tsx b/src/components/molecules/packbubble/index.tsx index ca0ab7f1..18891e09 100644 --- a/src/components/molecules/packbubble/index.tsx +++ b/src/components/molecules/packbubble/index.tsx @@ -6,16 +6,17 @@ import HighchartsAccessibility from "highcharts/modules/accessibility"; import HighchartsExporting from "highcharts/modules/exporting"; import HighchartsReact from "highcharts-react-official"; import { useNavigate } from "react-router-dom"; +import { useRecoilValue } from "recoil"; import styled from "styled-components"; -import { packbubbleDummydata } from "@/dummy/packBubbleData"; - HighchartsExporting(Highcharts); HighchartsAccessibility(Highcharts); HighchartsMore(Highcharts); import "./theme.css"; +import { BubbleChartState } from "@/recoil/atoms"; const PackBubble = () => { + const BubbleChartData = useRecoilValue(BubbleChartState); const [width, setWidth] = useState(window.innerWidth); // 기본 1440-> 반응형 400으로 , 반응형 작업할 때 사용, 아마 강제로 view값 가져와서 거기에 맞게 useEffect로 줄여야할듯 const navigate = useNavigate(); const handleResize = () => { @@ -61,7 +62,7 @@ const PackBubble = () => { plotOptions: { packedbubble: { - minSize: "10%", + minSize: "20%", maxSize: "230%", zMin: 0, zMax: 1250, @@ -76,7 +77,8 @@ const PackBubble = () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any click: function (e: any) { console.log(e.point.name); - navigate(`/detail/${e.point.id}`); + const name = encodeURI(encodeURIComponent(e.point.name)); + navigate(`/detail/${name}`); //1부터 9까지 숫자가 들어오면 거기에 맞춰서 라우팅 하는게 맞을듯 //setWidth(width - 100); // 반응형 할 때, 사용 임시 }, @@ -118,7 +120,7 @@ const PackBubble = () => { credits: { enabled: false, }, - series: packbubbleDummydata, // 데이터 값 + series: BubbleChartData, // 데이터 값 }; return ( From 62d84db951eaf39642c7fbc3edccef6616b68eea Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:16:24 +0900 Subject: [PATCH 06/14] design : bubble chart --- src/components/molecules/packbubble/theme.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/packbubble/theme.css b/src/components/molecules/packbubble/theme.css index f585a0e6..c5f444ae 100644 --- a/src/components/molecules/packbubble/theme.css +++ b/src/components/molecules/packbubble/theme.css @@ -32,7 +32,7 @@ image[width="1420"] { stroke-width: 0; } -.highcharts-series-0.highcharts-packedbubble-series:hover .highcharts-point { +.highcharts-series-3.highcharts-packedbubble-series:hover .highcharts-point { fill-opacity: 1; fill: #ff9900; } @@ -44,14 +44,14 @@ image[width="1420"] { fill-opacity: 1; fill: #1ae276 !important; } -.highcharts-series-3.highcharts-packedbubble-series:hover .highcharts-point { +.highcharts-series-0.highcharts-packedbubble-series:hover .highcharts-point { fill-opacity: 1; fill: #0084ff !important; } .highcharts-legend-item text { font-size: 1rem !important; } -.highcharts-legend-item.highcharts-series-0 .highcharts-point { +.highcharts-legend-item.highcharts-series-3 .highcharts-point { fill: #ff9900; width: 9px !important; } @@ -61,14 +61,14 @@ image[width="1420"] { .highcharts-legend-item.highcharts-series-2 .highcharts-point { fill: #1ae276; } -.highcharts-legend-item.highcharts-series-3 .highcharts-point { +.highcharts-legend-item.highcharts-series-0 .highcharts-point { fill: #0084ff; } .highcharts-legend-item .highcharts-graph { stroke: transparent; } -.highcharts-series-0.highcharts-packedbubble-series .highcharts-label.highcharts-data-label text { +.highcharts-series-3.highcharts-packedbubble-series .highcharts-label.highcharts-data-label text { fill: #ff9900 !important; color: #ff9900 !important; } @@ -80,7 +80,7 @@ image[width="1420"] { fill: #1ae276 !important; color: #1ae276 !important; } -.highcharts-series-3.highcharts-packedbubble-series .highcharts-label.highcharts-data-label text { +.highcharts-series-0.highcharts-packedbubble-series .highcharts-label.highcharts-data-label text { fill: #0084ff !important; color: #0084ff !important; } From c762c025ce21cb2341a14380511809fa3e84d7f1 Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:16:35 +0900 Subject: [PATCH 07/14] feat : header sticky --- src/components/organisms/Common/Header.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/organisms/Common/Header.tsx b/src/components/organisms/Common/Header.tsx index 6a606f0a..830f22b8 100644 --- a/src/components/organisms/Common/Header.tsx +++ b/src/components/organisms/Common/Header.tsx @@ -215,6 +215,14 @@ export default Header; export const Wrapper = styled.div<{ $openlist: boolean }>` position: relative; + position: -webkit-sticky; /* 사파리 브라우저 지원 */ + position: sticky; + top: 0; + z-index: 9999; + -webkit-user-select: none; + -moz-user-select: none; + -ms-use-select: none; + user-select: none; // drag 방지 .list { display: ${(props) => (props.$openlist ? "block" : "none")}; width: 40%; @@ -348,14 +356,6 @@ export const Container = styled.div<{ $link: string; $openlist: boolean }>` display: none; } } - position: -webkit-sticky; /* 사파리 브라우저 지원 */ - position: sticky; - top: 0; - z-index: 9999; - -webkit-user-select: none; - -moz-user-select: none; - -ms-use-select: none; - user-select: none; // drag 방지 `; export const LeftHeader = styled.div` display: flex; From d26d64a7923e141bf76b5428a0acebe1fdd41f85 Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:17:17 +0900 Subject: [PATCH 08/14] feat : bubble Xaxis --- src/components/organisms/Details/BubbleGraph.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/organisms/Details/BubbleGraph.tsx b/src/components/organisms/Details/BubbleGraph.tsx index 49eee7b2..6d8e5fc6 100644 --- a/src/components/organisms/Details/BubbleGraph.tsx +++ b/src/components/organisms/Details/BubbleGraph.tsx @@ -4,14 +4,14 @@ import styled from "styled-components"; import Bubble from "@/components/molecules/bubble"; export const BubbleGraph = () => { - const Month = [1, 2, 3, 4, 5, 6, 7]; + const Month = [7, 8, 9, 10, 11, 12]; return (
- 약

70개의 기사 데이터

를 형태소 분석한 결과,{" "} -

6개의 주요 키워드

를 추출했어요 + 약

1024개의 기사 데이터

를 형태소 분석한 결과,{" "} +

5개의 주요 키워드

를 추출했어요
@@ -33,7 +33,7 @@ const Container = styled.div` justify-content: center; position: relative; margin: 0 auto; - padding-top: 60px; + padding-top: 80px; background-color: var(--Gray3_200); //위에 한줄소개 height 늘어나게 했을 때 대비해서 일단 작성해놓은 반응형 @@ -57,7 +57,7 @@ const BubbleTop = styled.div` background-color: transparent; .title { display: flex; - margin: 30px auto 0; + margin: 48px auto 0; color: var(--Gray7_600, #757575); font-size: var(--text_b3); width: fit-content; From ab7825757c47764a2a9812331345682d54a7ca8e Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:17:34 +0900 Subject: [PATCH 09/14] feat : api --- .../organisms/Details/DetailArticleTitle.tsx | 4 +- .../organisms/Details/LineGraph.tsx | 7 +- src/pages/DetailPage.tsx | 65 ++++++++++++++++++- src/pages/Home.tsx | 24 ++++++- src/recoil/atoms/index.ts | 41 +++++++++++- src/types/index.ts | 21 ++++++ 6 files changed, 155 insertions(+), 7 deletions(-) diff --git a/src/components/organisms/Details/DetailArticleTitle.tsx b/src/components/organisms/Details/DetailArticleTitle.tsx index b12308c3..0281df15 100644 --- a/src/components/organisms/Details/DetailArticleTitle.tsx +++ b/src/components/organisms/Details/DetailArticleTitle.tsx @@ -1,9 +1,11 @@ +import { useRecoilValue } from "recoil"; import styled from "styled-components"; import bg from "@/assets/DetailTitle/detail-background.png"; import DetailTitle from "@/components/molecules/DetailTitle"; -import { detailTitleData } from "@/dummy/detailTitleData"; +import { detailTitleState } from "@/recoil/atoms"; export const DetailArticleTitle = () => { + const detailTitleData = useRecoilValue(detailTitleState); return ( { const Month = [5, 6, 7, 8, 9, 10, 11]; const [showGraph, setShowGraph] = useState(false); + const detailTitleData = useRecoilValue(detailTitleState); return (
-
후쿠시마 오염수
는{" "} -
2022년 7월 1주차
가장 많이 검색됐어요. +
{detailTitleData.title}
는{" "} +
2023년 7월 1주차
가장 많이 검색됐어요.