From 8c921b54859e8d3f56c6b759f26d552ab6d0f460 Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:19:12 +0900 Subject: [PATCH 01/25] feat : add api --- src/apis/index.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/apis/index.ts b/src/apis/index.ts index 50c05aec..60340b7f 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -78,11 +78,26 @@ export const putKakaoRegister = async ({ }; export const getCommunityAllData = async () => { - const res = await GwangjangAxios.get("/community"); + const res = await GwangjangAxios.get("/community/"); return res; }; -export const getCommunityAreaData = async (topicId: number) => { +export const getCommunityAreaData = async (topicId: string) => { const res = await GwangjangAxios.get(`/community/topic/${topicId}`); return res; }; + +export const getSubscribeTop5 = async () => { + const res = await GwangjangAxios.get("/member/subscribe/issue"); + return res; +}; + +export const getCommunityDetailData = async (topicId: number, communityId: number) => { + const res = await GwangjangAxios.get(`/community/topic/${topicId}/community/${communityId}`); + return res; +}; + +export const getCommunityTop5 = async () => { + const res = await GwangjangAxios.get("/community/?sortBy=ALL/"); + return res; +}; From 18d46e39849fc7e4a881e14b83ffadfb5d057925 Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:27:37 +0900 Subject: [PATCH 02/25] chore : modified trivial things --- src/components/atoms/tag/index.tsx | 4 ++-- src/components/atoms/tag/style.ts | 12 +++++++----- src/components/molecules/longTopicBox/index.tsx | 6 +++--- src/components/molecules/main/communitybox/index.tsx | 3 ++- 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/atoms/tag/index.tsx b/src/components/atoms/tag/index.tsx index 534f6e38..9822c0d3 100644 --- a/src/components/atoms/tag/index.tsx +++ b/src/components/atoms/tag/index.tsx @@ -4,6 +4,6 @@ export const TopicTag = ({ category }: { category: string }) => { return {category}; }; -export const KeywordTag = ({ category }: { category: string }) => { - return {category}; +export const KeywordTag = ({ category, children }: { category: string; children: string }) => { + return {children}; }; diff --git a/src/components/atoms/tag/style.ts b/src/components/atoms/tag/style.ts index e5b30901..19101e4e 100644 --- a/src/components/atoms/tag/style.ts +++ b/src/components/atoms/tag/style.ts @@ -7,13 +7,15 @@ export const Tag = styled.div<{ $category: string }>` align-items: center; border-radius: 55px; background: ${(props) => - props.$category === "일자리·노동" + props.$category === "일자리-노동" ? "var(--Main_Blue)" - : props.$category === "주거" + : props.$category === "주거-사회안전망" ? "var(--Sub_Purple)" : props.$category === "환경" ? "var(--Main_NeonGreen)" - : "var(--Sub_Orange)"}; + : props.$category === "교육" + ? "var(--Sub_Orange)" + : "white"}; //text color: var(--Gray1_50, #fafafa); @@ -31,9 +33,9 @@ export const Keyword = styled.div<{ $category: string }>` align-items: center; border-radius: 55px; color: ${(props) => - props.$category === "일자리·노동" + props.$category === "일자리-노동" ? "var(--Main_Blue)" - : props.$category === "주거" + : props.$category === "주거-사회안전망" ? "var(--Sub_Purple)" : props.$category === "환경" ? "var(--Main_NeonGreen)" diff --git a/src/components/molecules/longTopicBox/index.tsx b/src/components/molecules/longTopicBox/index.tsx index 518e3695..1380bbf8 100644 --- a/src/components/molecules/longTopicBox/index.tsx +++ b/src/components/molecules/longTopicBox/index.tsx @@ -19,7 +19,7 @@ export const SimilarTopicBox = ({ data }: { data: SimilarTopicProps }) => { -

{data.subscibeCount}명

이 구독하고 있어요 +

{data.subscribeCount}명

이 구독하고 있어요 ); @@ -36,8 +36,8 @@ export const TopTopicBox = ({ data }: { data: ToptopicProps }) => { $string="top" > -
{data.subject}
- +
{data.title}
+ ); diff --git a/src/components/molecules/main/communitybox/index.tsx b/src/components/molecules/main/communitybox/index.tsx index 53929b70..486dfc54 100644 --- a/src/components/molecules/main/communitybox/index.tsx +++ b/src/components/molecules/main/communitybox/index.tsx @@ -133,7 +133,8 @@ export const CommunityBox = () => {
- + {item.topic} + {item.keyword}
{item.communityText}
From c42c61c9bcccdc485840227e9062dac35f7e81d3 Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:28:49 +0900 Subject: [PATCH 03/25] feat : connect contents-link --- .../molecules/detailCommunityBox/index.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/molecules/detailCommunityBox/index.tsx b/src/components/molecules/detailCommunityBox/index.tsx index 8f0b20e3..ddf4950a 100644 --- a/src/components/molecules/detailCommunityBox/index.tsx +++ b/src/components/molecules/detailCommunityBox/index.tsx @@ -6,6 +6,8 @@ import { CommunityItemProps } from "@/types"; import { CommunityPostContainer } from "./style"; export const DetailCommunityBox = ({ data }: { data: CommunityItemProps }) => { + const contLen = String(data.contents).length; + return (
@@ -22,18 +24,28 @@ export const DetailCommunityBox = ({ data }: { data: CommunityItemProps }) => {
- {/* */} - + {data.subject} + {data.keyword}
{data.communityText}
-
+
{ + if (contLen > 20) { + console.log(contLen); + window.open(`${data.contents}`); + } else { + window.open(`https://www.youtube.com/watch?v=${data.contents}`); + } + }} + >

인용한 콘텐츠

-
{data.quotText}
+
{data.contentsTitle}
From 7483b55301c4c034c65ecd0e6f3f9948e665b154 Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:29:13 +0900 Subject: [PATCH 04/25] chore : apply type to dummy --- src/dummy/AreaData.ts | 22 ++++++++++++++++++++++ src/dummy/MySubscribeData.ts | 15 ++++++++++++--- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/dummy/AreaData.ts b/src/dummy/AreaData.ts index 2d19f66f..482d8406 100644 --- a/src/dummy/AreaData.ts +++ b/src/dummy/AreaData.ts @@ -14,6 +14,8 @@ export const envirData = [ commentCount: 0, contentsId: 3, contents: null, + contentsUrl: "sdf", + contentsTitle: "sdfsjleifjdlijf", likeStatus: "false", quotText: "asidjfaiejfaidjfiajeifj", }, @@ -28,8 +30,10 @@ export const envirData = [ area: "환경", subject: "후쿠시마 오염수", keyword: "하이", + contentsUrl: "sdf", likeCount: 1, commentCount: 0, + contentsTitle: "sdfsjleifjdlijf", contentsId: 3, contents: null, likeStatus: "false", @@ -46,7 +50,9 @@ export const envirData = [ area: "환경", subject: "후쿠시마 오염수", keyword: "하이", + contentsUrl: "sdf", likeCount: 1, + contentsTitle: "sdfsjleifjdlijf", commentCount: 0, contentsId: 3, contents: null, @@ -62,8 +68,10 @@ export const envirData = [ nickname: "nkcikname", profileImg: "profile", area: "환경", + contentsUrl: "sdf", subject: "후쿠시마 오염수", keyword: "하이", + contentsTitle: "sdfsjleifjdlijf", likeCount: 1, commentCount: 0, contentsId: 3, @@ -81,6 +89,8 @@ export const envirData = [ profileImg: "profile", area: "환경", subject: "후쿠시마 오염수", + contentsUrl: "sdf", + contentsTitle: "sdfsjleifjdlijf", keyword: "하이", likeCount: 1, commentCount: 0, @@ -98,6 +108,8 @@ export const envirData = [ nickname: "nkcikname", profileImg: "profile", area: "환경", + contentsUrl: "sdf", + contentsTitle: "sdfsjleifjdlijf", subject: "후쿠시마 오염수", keyword: "하이", likeCount: 1, @@ -112,11 +124,13 @@ export const envirData = [ communityText: "죄송한 마음을 담아 ❤️ 작곡 작사를 해 보았어요 💕 정말 죄송합니다 😉 예쁘게 들어 주세요 💖 쏘리 쏘리 암 쏘리 🎵 내가 미안해 🎙🎙 한번만 봐줘! 😘 이쁘게 봐줘잉~ 😍 돌아와줘! ❣️ 사랑해줘~~ 🎤🎶🎶🎵 죄송한 마음을 담아 ❤️ 작곡 작사를 해 보았어요 💕 정말 죄송합니다 😉 예쁘게 들어 주세요 💖 쏘리 쏘리 암 쏘리 🎵 내가 미안해 🎙🎙 한번만 봐줘! 😘 이쁘게 봐줘잉~ 😍 돌아와줘! ❣️ 사랑해줘~~ 🎤🎶🎶🎵 죄송한 마음을 담아 ❤️ 작곡 작사를 해 보았어요 💕 정말 죄송합니다 😉 예쁘게 들어 주세요 💖 쏘리 쏘리 암 쏘리 🎵 내가 미안해 🎙🎙 한번만 봐줘!", date: "2023-11-13T12:20:59.176275", + contentsUrl: "sdf", writerId: "LOCAL-2341", nickname: "nkcikname", profileImg: "profile", area: "환경", subject: "후쿠시마 오염수", + contentsTitle: "sdfsjleifjdlijf", keyword: "하이", likeCount: 1, commentCount: 0, @@ -135,7 +149,9 @@ export const envirData = [ profileImg: "profile", area: "환경", subject: "후쿠시마 오염수", + contentsUrl: "sdf", keyword: "하이", + contentsTitle: "sdfsjleifjdlijf", likeCount: 1, commentCount: 0, contentsId: 3, @@ -150,12 +166,14 @@ export const EduData = [ id: 7, communityText: "이야기", date: "2023-11-13T12:20:59.176275", + contentsTitle: "sdfsjleifjdlijf", writerId: "LOCAL-2341", nickname: "nkcikname", profileImg: "profile", area: "교육", subject: "교육어쩌구", keyword: "하이", + contentsUrl: "sdf", likeCount: 1, commentCount: 0, contentsId: 3, @@ -169,11 +187,13 @@ export const EduData = [ date: "2023-11-13T12:20:59.176275", writerId: "LOCAL-2341", nickname: "nkcikname", + contentsTitle: "sdfsjleifjdlijf", profileImg: "profile", area: "교육", subject: "교육어쩌구", keyword: "하이", likeCount: 1, + contentsUrl: "sdf", commentCount: 0, contentsId: 3, contents: null, @@ -188,6 +208,8 @@ export const EduData = [ nickname: "nkcikname", profileImg: "profile", area: "교육", + contentsUrl: "sdf", + contentsTitle: "sdfsjleifjdlijf", subject: "교육어쩌구", keyword: "하이", likeCount: 1, diff --git a/src/dummy/MySubscribeData.ts b/src/dummy/MySubscribeData.ts index 8429942f..991ad037 100644 --- a/src/dummy/MySubscribeData.ts +++ b/src/dummy/MySubscribeData.ts @@ -1,17 +1,26 @@ export const MySubscribeData = [ { id: 8, - area: "환경", + category: "환경", subject: "후쿠시마 오염수", + imgUrl: "", + title: "safsdjafliej", + area: "환경", }, { id: 2, - area: "환경", + category: "환경", subject: "후쿠시마 오염수", + imgUrl: "", + area: "환경", + title: "safsdjafliej", }, { id: 3, - area: "환경", + category: "환경", subject: "후쿠시마 오염수", + area: "환경", + imgUrl: "", + title: "safsdjafliej", }, ]; From 768648437ff4da23177461016fdb481b75c0ba2f Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:29:40 +0900 Subject: [PATCH 05/25] chore : modified trivial things --- src/components/molecules/PreviewCommunityBox/index.tsx | 2 +- .../organisms/DetailCommunity/DetailCommunityTitle.tsx | 6 +++--- src/dummy/similartopicData.ts | 6 +++--- src/recoil/atoms/index.ts | 10 ++++++++++ src/types/index.ts | 9 ++++++++- 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/molecules/PreviewCommunityBox/index.tsx b/src/components/molecules/PreviewCommunityBox/index.tsx index dfbf8bdb..81e6d841 100644 --- a/src/components/molecules/PreviewCommunityBox/index.tsx +++ b/src/components/molecules/PreviewCommunityBox/index.tsx @@ -33,7 +33,7 @@ export const PreviewCommunityBox = ({ data }: { data: CommunityItemProps }) => {
인용한 콘텐츠
-

{data.quotText}

+

{data.contentsTitle}

diff --git a/src/components/organisms/DetailCommunity/DetailCommunityTitle.tsx b/src/components/organisms/DetailCommunity/DetailCommunityTitle.tsx index 21458de2..11f44652 100644 --- a/src/components/organisms/DetailCommunity/DetailCommunityTitle.tsx +++ b/src/components/organisms/DetailCommunity/DetailCommunityTitle.tsx @@ -2,9 +2,9 @@ import styled from "styled-components"; import bg from "@/assets/DetailTitle/detail-background.png"; import { DetailCommunityBox } from "@/components/molecules/detailCommunityBox"; -import { envirData } from "@/dummy/AreaData"; +import { CommunityItemProps } from "@/types"; -const DetailCommunityTitle = () => { +const DetailCommunityTitle = ({ data }: { data: CommunityItemProps }) => { return ( { width="100%" height={220} /> - + ); }; diff --git a/src/dummy/similartopicData.ts b/src/dummy/similartopicData.ts index b2938acd..eb45b37c 100644 --- a/src/dummy/similartopicData.ts +++ b/src/dummy/similartopicData.ts @@ -4,17 +4,17 @@ export const similartopicData = { item: [ { topic: "어쩌라고", - subscibeCount: 80, + subscribeCount: 80, area: "환경", }, { topic: "어쩌라고", - subscibeCount: 80, + subscribeCount: 80, area: "환경", }, { topic: "어쩌라고", - subscibeCount: 80, + subscribeCount: 80, area: "환경", }, ], diff --git a/src/recoil/atoms/index.ts b/src/recoil/atoms/index.ts index 835c6e90..71db5438 100644 --- a/src/recoil/atoms/index.ts +++ b/src/recoil/atoms/index.ts @@ -64,3 +64,13 @@ export const searchResultState = atom({ default: "", effects: [persistAtom], }); + +// export const topicIdState = atom({ +// key: "selectedTopicId", +// default: 0, +// }); + +// export const communityIdState = atom({ +// key: "selectedCommunityId", +// default: 0, +// }); diff --git a/src/types/index.ts b/src/types/index.ts index 684a4320..85208719 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -148,6 +148,8 @@ export interface CommunityItemProps { commentCount: number; contentsId: number; contents: null; + contentsTitle: string; + contentsUrl: string; likeStatus: string; quotText: string; } @@ -168,7 +170,7 @@ export interface SimilarTopicesProps { } export interface SimilarTopicProps { - subscibeCount: number; + subscribeCount: number; topic: string; area: string; } @@ -176,6 +178,11 @@ export interface ToptopicProps { id: number; area: string; subject: string; + + // + category: string; + imgUrl: string; + title: string; } export interface PopularCommunityProps { From 94356396a983a222e369db54f770b77d95ad7394 Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:30:05 +0900 Subject: [PATCH 06/25] chore : modified param id --- src/router/router.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router/router.tsx b/src/router/router.tsx index 012c741a..a1da3874 100644 --- a/src/router/router.tsx +++ b/src/router/router.tsx @@ -53,7 +53,7 @@ const router = () => { element={} /> } /> Date: Thu, 23 Nov 2023 08:30:16 +0900 Subject: [PATCH 07/25] chore : add pointer --- src/components/molecules/mainCommunityBox/style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/mainCommunityBox/style.ts b/src/components/molecules/mainCommunityBox/style.ts index 96d1d1f4..c25b167b 100644 --- a/src/components/molecules/mainCommunityBox/style.ts +++ b/src/components/molecules/mainCommunityBox/style.ts @@ -13,6 +13,7 @@ export const CommunityMainContainer = styled.div` box-shadow: 0px 15px 35px 0px rgba(66, 66, 66, 0.05); padding: 20px 24px; box-sizing: border-box; + cursor: pointer; .top-wrapper { display: flex; @@ -46,7 +47,7 @@ export const CommunityMainContainer = styled.div` border-radius: 5px; background: var(--Gray2_100, #f5f5f5); border-radius: 5px; - + cursor: pointer; display: flex; .quot-text { From 2104af5a6e04f8106e347c28de2922c9cc6c2e1a Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 08:30:36 +0900 Subject: [PATCH 08/25] feat : apply router --- .../molecules/mainCommunityBox/index.tsx | 45 +++++++-- src/pages/CommunityPage.tsx | 96 +++++++++++++++---- src/pages/DetailCommunityPage.tsx | 27 +++++- 3 files changed, 142 insertions(+), 26 deletions(-) diff --git a/src/components/molecules/mainCommunityBox/index.tsx b/src/components/molecules/mainCommunityBox/index.tsx index e9545ca9..710be8a8 100644 --- a/src/components/molecules/mainCommunityBox/index.tsx +++ b/src/components/molecules/mainCommunityBox/index.tsx @@ -1,3 +1,5 @@ +import { useNavigate } from "react-router"; + import { CommentBorderButton, LikeBorderButton } from "@/components/atoms/button"; import { KeywordTag, TopicTag } from "@/components/atoms/tag"; import { CommunityItemProps } from "@/types"; @@ -5,23 +7,54 @@ import { CommunityItemProps } from "@/types"; import { CommunityMainContainer } from "./style"; export const MainCommunityBox = ({ data }: { data: CommunityItemProps }) => { + let topicId = 0; + + const contLen = String(data.contents).length; + + if (data.area === "일자리-노동") { + topicId = 1; + } else if (data.area === "주거-사회안전망") { + topicId = 2; + } else if (data.area === "환경") { + topicId = 3; + } else if (data.area === "교육") { + topicId = 4; + } + + const navigate = useNavigate(); + + const SpaceTo = (page: string) => { + navigate(page); + }; + return ( - + SpaceTo(`/detailcommunity/${topicId}/${data.id}`)}>
- {/* */} - + {data.subject} + {data.keyword}
{data.communityText}
-
+
{ + e.stopPropagation(); + if (contLen > 20) { + console.log(contLen); + window.open(`${data.contents}`); + } else { + window.open(`https://www.youtube.com/watch?v=${data.contents}`); + } + }} + >

인용한 콘텐츠

-
{data.quotText}
+
{data.contentsTitle}
diff --git a/src/pages/CommunityPage.tsx b/src/pages/CommunityPage.tsx index 02cf62de..5e29ff07 100644 --- a/src/pages/CommunityPage.tsx +++ b/src/pages/CommunityPage.tsx @@ -2,22 +2,30 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; +import { + getCommunityAllData, + getCommunityAreaData, + getCommunityTop5, + getSubscribeTop5, +} from "@/apis"; import { CategoryBar } from "@/components/molecules/categoryBar"; import { CommunityMainList } from "@/components/organisms/Community/CommunityMainList"; import CommunityPopular from "@/components/organisms/Community/CommunityPopular"; import CommunityTitle from "@/components/organisms/Community/CommunityTitle"; import CommunityTopTopic from "@/components/organisms/Community/CommunityTopTopic"; import { EduData, envirData } from "@/dummy/AreaData"; -import { PopularCommunityData } from "@/dummy/PopularCommunityData"; -import { ToptopicData } from "@/dummy/ToptopicData"; -import { CommunityItemProps } from "@/types"; +// import { ToptopicData } from "@/dummy/ToptopicData"; +import { CommunityItemProps, PopularCommunityProps, ToptopicProps } from "@/types"; export const CommunityPage = () => { const [selectedTab, setSelectedTab] = useState(0); const [communityData, setCommunityData] = useState([]); + const [topData, setTopData] = useState([]); const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const [popularData, setPopularData] = useState([]); + useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); @@ -31,28 +39,80 @@ export const CommunityPage = () => { }, []); useEffect(() => { + getSubscribeTop5() + .then((res) => { + console.log("top5:", res.data); + setTopData(res.data.data); + console.log(topData); + }) + .catch((err) => { + // setTopData(ToptopicData); + console.log(err); + }); + + getCommunityTop5() + .then((res) => { + console.log("top55:", res.data); + setPopularData(res.data.data); + }) + .catch((err) => console.log(err)); + switch (selectedTab) { case 0: // 전체 api 갖고와서 데이터 넣어주기 - // getCommunityAllData() - // .then((res) => { - // console.log(res.data); - // dataFetch = res.data; - // }) - // .catch((err) => console.log(err)); - setCommunityData(envirData); + getCommunityAllData() + .then((res) => { + console.log("전체:", res.data.data); + setCommunityData(res.data.data); + }) + .catch((err) => { + setCommunityData(envirData); + console.log(err); + }); break; case 1: // 일자리 · 노동 - setCommunityData(envirData); + getCommunityAreaData("일자리-노동") + .then((res) => { + console.log("일자리노동:", res.data); + setCommunityData(res.data.data); + }) + .catch((err) => { + setCommunityData(envirData); + console.log(err); + }); break; case 2: // 주거 · 사회 안전망 - setCommunityData(envirData); + getCommunityAreaData("주거-사회안전망") + .then((res) => { + // console.log("res:", res.data); + setCommunityData(res.data.data); + }) + .catch((err) => { + setCommunityData(envirData); + console.log(err); + }); break; case 3: // 환경 - setCommunityData(envirData); + getCommunityAreaData("환경") + .then((res) => { + console.log("res:", res.data); + setCommunityData(res.data.data); + }) + .catch((err) => { + setCommunityData(envirData); + console.log(err); + }); break; case 4: // 교육 - setCommunityData(EduData); + getCommunityAreaData("교육") + .then((res) => { + console.log("res:", res.data); + setCommunityData(res.data.data); + }) + .catch((err) => { + setCommunityData(EduData); + console.log(err); + }); break; default: break; @@ -69,16 +129,16 @@ export const CommunityPage = () => { <>
- - + +
) : (
- +
- +
diff --git a/src/pages/DetailCommunityPage.tsx b/src/pages/DetailCommunityPage.tsx index 458c761d..f82088cc 100644 --- a/src/pages/DetailCommunityPage.tsx +++ b/src/pages/DetailCommunityPage.tsx @@ -1,11 +1,34 @@ +import { useState, useEffect } from "react"; + +import { useParams } from "react-router"; + +import { getCommunityDetailData } from "@/apis"; import { CommentList } from "@/components/organisms/DetailCommunity/CommentList"; import DetailCommunityTitle from "@/components/organisms/DetailCommunity/DetailCommunityTitle"; +import { CommunityItemProps } from "@/types"; const DetailCommunityPage = () => { + const { topicId } = useParams(); + const { communityId } = useParams(); + + const [detailData, setDetailData] = useState(null); + + useEffect(() => { + getCommunityDetailData(parseInt(topicId || "0"), parseInt(communityId || "0")) + .then((res) => { + setDetailData(res.data.data); + }) + .catch((err) => console.log(err)); + }, []); + return ( <> - - + {detailData && ( + <> + + + + )} ); }; 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 09/25] 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 10/25] 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 11/25] 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 12/25] 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 13/25] 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 14/25] 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 15/25] 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 16/25] 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 17/25] 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주차
가장 많이 검색됐어요.