From 9dc4d2b8e3e39a935bf3129a6ad221646392425b Mon Sep 17 00:00:00 2001
From: chamny20 <chamny20@naver.com>
Date: Thu, 23 Nov 2023 23:42:46 +0900
Subject: [PATCH] hotifx

---
 src/apis/index.ts                             | 15 +++++
 src/components/atoms/tag/index.tsx            |  8 ++-
 src/components/atoms/tag/style.ts             |  2 +-
 .../molecules/main/communitybox/index.tsx     | 14 ++--
 .../molecules/main/contentbox/index.tsx       | 19 +++---
 .../organisms/Home/DiscussedTopics.tsx        |  6 ++
 src/components/organisms/Home/MainContent.tsx | 16 +++--
 src/components/organisms/Home/MainTopic.tsx   | 17 +++--
 src/dummy/topicData.ts                        |  8 +--
 src/pages/Home.tsx                            | 67 ++++++++++++++++++-
 src/recoil/atoms/index.ts                     | 29 ++++++++
 src/types/index.ts                            | 61 +++++++++++++++++
 12 files changed, 229 insertions(+), 33 deletions(-)

diff --git a/src/apis/index.ts b/src/apis/index.ts
index 7ea3c18f..dd6bfd9e 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -178,3 +178,18 @@ export const getSearchCommunity = async (keyword: string) => {
   const res = await GwangjangAxios.get(`/community/search/ALL/${keyword}`);
   return res;
 };
+
+export const getMainBottom = async () => {
+  const res = await GwangjangAxios.get("/keyword/topic/all");
+  return res;
+};
+
+export const getMainTop = async () => {
+  const res = await GwangjangAxios.get("/member/subscribe/issue");
+  return res;
+};
+
+export const getPopularContents = async () => {
+  const res = await GwangjangAxios.get("/contents/contents/like");
+  return res;
+};
diff --git a/src/components/atoms/tag/index.tsx b/src/components/atoms/tag/index.tsx
index 03af414e..5d3c5fce 100644
--- a/src/components/atoms/tag/index.tsx
+++ b/src/components/atoms/tag/index.tsx
@@ -4,6 +4,12 @@ export const TopicTag = ({ category }: { category: string | undefined }) => {
   return <Tag $category={category}>{category}</Tag>;
 };
 
-export const KeywordTag = ({ category, children }: { category: string; children: string }) => {
+export const KeywordTag = ({
+  category,
+  children,
+}: {
+  category: string | undefined;
+  children: string | undefined;
+}) => {
   return <Keyword $category={category}>{children}</Keyword>;
 };
diff --git a/src/components/atoms/tag/style.ts b/src/components/atoms/tag/style.ts
index 1989fd13..da04fa5e 100644
--- a/src/components/atoms/tag/style.ts
+++ b/src/components/atoms/tag/style.ts
@@ -26,7 +26,7 @@ export const Tag = styled.div<{ $category: string | undefined }>`
   letter-spacing: -0.18px;
 `;
 
-export const Keyword = styled.div<{ $category: string }>`
+export const Keyword = styled.div<{ $category: string | undefined }>`
   display: inline-flex;
   padding: 3px 10px;
   justify-content: center;
diff --git a/src/components/molecules/main/communitybox/index.tsx b/src/components/molecules/main/communitybox/index.tsx
index 486dfc54..13bec960 100644
--- a/src/components/molecules/main/communitybox/index.tsx
+++ b/src/components/molecules/main/communitybox/index.tsx
@@ -1,12 +1,12 @@
 // import { useState, useEffect } from "react";
-
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import { CommentButton, LikeButton } from "@/components/atoms/button";
 import { Profile } from "@/components/atoms/profile";
 import { KeywordTag, TopicTag } from "@/components/atoms/tag";
-import { mainCommunityData } from "@/dummy/mainCommunityData";
+import { PopularCommunityState } from "@/recoil/atoms";
 
 import { CommunityContainer } from "./style";
 
@@ -29,6 +29,10 @@ export const CommunityBox = () => {
   //   };
   // }, []);
 
+  const communityData = useRecoilValue(PopularCommunityState);
+
+  console.log(communityData, 22);
+
   return (
     <TempContainer>
       <Swiper
@@ -127,13 +131,13 @@ export const CommunityBox = () => {
           },
         }}
       >
-        {mainCommunityData.map((item, idx) => (
+        {communityData.map((item, idx) => (
           <SwiperSlide key={idx}>
             <CommunityContainer>
               <div className="community-content">
                 <div className="community-tag-wrapper">
                   <TopicTag category={item.area} />
-                  <KeywordTag category={item.area}>{item.topic}</KeywordTag>
+                  <KeywordTag category={item.area}>{item.subject}</KeywordTag>
                   <KeywordTag category={item.area}>{item.keyword}</KeywordTag>
                 </div>
                 <div className="content-wrapper">
@@ -153,7 +157,7 @@ export const CommunityBox = () => {
               </div>
               <div className="quotation">
                 <div className="quot-title">인용한 콘텐츠</div>
-                <div className="quot-text">{item.quotText}</div>
+                <div className="quot-text">{item.contentsTitle}</div>
               </div>
             </CommunityContainer>
           </SwiperSlide>
diff --git a/src/components/molecules/main/contentbox/index.tsx b/src/components/molecules/main/contentbox/index.tsx
index 0dbbd970..e80ec2d3 100644
--- a/src/components/molecules/main/contentbox/index.tsx
+++ b/src/components/molecules/main/contentbox/index.tsx
@@ -2,13 +2,14 @@ import { useState } from "react";
 
 import nextIcon from "@/assets/nextIcon.svg";
 import { KeywordTag, TopicTag } from "@/components/atoms/tag";
-import { ContentDataProps } from "@/types";
+import { ContentsMainProps } from "@/types";
 
 import { ContentContainer, EdgeContainer, HoverContent } from "./style";
 
-export const ContentBox = ({ data, category }: { data: ContentDataProps; category: string }) => {
+export const ContentBox = ({ data, category }: { data?: ContentsMainProps; category: string }) => {
+  console.log(category);
   const containerStyle = {
-    backgroundImage: `linear-gradient(180deg, rgba(34, 34, 34, 0.2) 57.24%, rgba(34,34,34,0.95) 87.86%),url(${data.imgUrl})`,
+    backgroundImage: `linear-gradient(180deg, rgba(34, 34, 34, 0.2) 57.24%, rgba(34,34,34,0.95) 87.86%),url(${data?.imgUrl})`,
     backgroundSize: "cover",
     // boxShadow: "0px 15px 34px 0px rgba(207, 207, 207, 0.1)",
   };
@@ -16,7 +17,7 @@ export const ContentBox = ({ data, category }: { data: ContentDataProps; categor
   const [hover, setHover] = useState<boolean>(false);
 
   const onClick = () => {
-    window.open(`${data.link}`, "_blank");
+    window.open(`${data?.link}`, "_blank");
   };
 
   return (
@@ -27,7 +28,7 @@ export const ContentBox = ({ data, category }: { data: ContentDataProps; categor
       onMouseOut={() => setHover(false)}
     >
       <HoverContent $hover={hover}>
-        <div className="article-text">{data.content}</div>
+        <div className="article-text">{data?.title}</div>
         <div className="article-img">
           <img
             src={nextIcon}
@@ -42,15 +43,15 @@ export const ContentBox = ({ data, category }: { data: ContentDataProps; categor
       >
         <div className="tag-box">
           <div>
-            <TopicTag category={category} />
+            <TopicTag category={data?.topic} />
           </div>
           <div>
-            <KeywordTag category={category}>{data.keyword[1]}</KeywordTag>
+            <KeywordTag category={data?.topic}>{data?.keyword}</KeywordTag>
           </div>
         </div>
         <div className="text-box">
-          <p>{data.type}</p>
-          <div className="content-title">{data.title}</div>
+          <p>{data?.type}</p>
+          <div className="content-title">{data?.title}</div>
         </div>
       </ContentContainer>
     </EdgeContainer>
diff --git a/src/components/organisms/Home/DiscussedTopics.tsx b/src/components/organisms/Home/DiscussedTopics.tsx
index 28549279..5fcf5183 100644
--- a/src/components/organisms/Home/DiscussedTopics.tsx
+++ b/src/components/organisms/Home/DiscussedTopics.tsx
@@ -1,11 +1,17 @@
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 import { Title } from "@/components/atoms/title";
 import Topic from "@/components/molecules/discussedTopic";
 import { topicData } from "@/dummy/topicData";
+import { TalkingTopicState } from "@/recoil/atoms";
+// import { TalkingTopicState } from "@/recoil/atoms";
 
 const title = "광장이 지금\n얘기하고 있는 주제";
 const DiscussedTopics = () => {
+  const bottomData = useRecoilValue(TalkingTopicState);
+  console.log("bbb", bottomData);
+
   return (
     <Container>
       <div className="inner">
diff --git a/src/components/organisms/Home/MainContent.tsx b/src/components/organisms/Home/MainContent.tsx
index cf18991e..5282480b 100644
--- a/src/components/organisms/Home/MainContent.tsx
+++ b/src/components/organisms/Home/MainContent.tsx
@@ -1,15 +1,21 @@
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 import { SeeMore } from "@/components/atoms/more";
 import { Title } from "@/components/atoms/title";
 import { ContentBox } from "@/components/molecules/main/contentbox";
-import { contentData } from "@/dummy/ContentData";
+// import { contentData } from "@/dummy/ContentData";
+import { ContentsPopularState } from "@/recoil/atoms";
 import { Inner } from "@/style/global";
 
 export const MainContent = () => {
-  const firstData = contentData[0];
+  // const firstData = contentData[0];
   const title = "지금 사람들이\n가장 많이 본 콘텐츠";
 
+  const contentsData = useRecoilValue(ContentsPopularState);
+  console.log("dfdf", contentsData);
+  const firstData = contentsData[0];
+
   return (
     <Background>
       <Inner>
@@ -22,15 +28,15 @@ export const MainContent = () => {
               <ContentBox
                 key={0}
                 data={firstData}
-                category={firstData.category}
+                category={""} // category={contentsData[0].topic}
               />
             </div>
             <div className="content-grid">
-              {contentData.slice(1).map((data, idx) => (
+              {contentsData.slice(1).map((data, idx) => (
                 <ContentBox
                   key={idx}
                   data={data}
-                  category={data.category}
+                  category={""} // category={data.topic}
                 />
               ))}
             </div>
diff --git a/src/components/organisms/Home/MainTopic.tsx b/src/components/organisms/Home/MainTopic.tsx
index e0808fc1..3cd4ad1a 100644
--- a/src/components/organisms/Home/MainTopic.tsx
+++ b/src/components/organisms/Home/MainTopic.tsx
@@ -1,14 +1,19 @@
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 import { SeeMore } from "@/components/atoms/more";
 import { Title } from "@/components/atoms/title";
 import { TopicBox } from "@/components/molecules/main/topicbox";
-import { subjectData } from "@/dummy/subjectData";
+// import { subjectData } from "@/dummy/subjectData";
+import { MainTopState } from "@/recoil/atoms";
 import { Inner } from "@/style/global";
 
 export const MainTopic = () => {
   const title = "가장 인기있는\n주제";
 
+  const mainTopicData = useRecoilValue(MainTopState);
+  console.log(mainTopicData);
+
   return (
     <Background>
       <Inner>
@@ -17,13 +22,13 @@ export const MainTopic = () => {
             <Title title={title} />
           </div>
           <TopicWrapper>
-            {subjectData.map((data, idx) => (
+            {mainTopicData.map((data, idx) => (
               <TopicBox
                 key={idx}
-                title={data.title}
-                subscribeCount={data.subscribeCount}
-                imgUrl={data.imgUrl}
-                category={data.category}
+                title={data?.title}
+                subscribeCount={data?.subscribeCount}
+                imgUrl={data?.imgUrl}
+                category={data?.category}
               />
             ))}
           </TopicWrapper>{" "}
diff --git a/src/dummy/topicData.ts b/src/dummy/topicData.ts
index 1efca6e2..f29ff63a 100644
--- a/src/dummy/topicData.ts
+++ b/src/dummy/topicData.ts
@@ -2,19 +2,19 @@
 
 export const topicData = [
   {
-    title: "일자리 노동1",
+    title: "일자리-노동",
     subTitles: ["SPC", "쿠팡 노동자 사망", "주 69시간 근로시간 제도 개편"],
   },
   {
-    title: "일자리 노동2",
+    title: "주거-사회안전망",
     subTitles: ["SPC", "쿠팡 노동자 사망", "주 69시간 근로시간 제도 개편"],
   },
   {
-    title: "일자리 노동3",
+    title: "환경",
     subTitles: ["SPC", "쿠팡 노동자 사망", "주 69시간 근로시간 제도 개편"],
   },
   {
-    title: "일자리 노동4",
+    title: "교육",
     subTitles: ["SPC", "쿠팡 노동자 사망", "주 69시간 근로시간 제도 개편"],
   },
 ];
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7ac15304..f34e5c25 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,7 +2,13 @@ import { useEffect } from "react";
 
 import { useSetRecoilState } from "recoil";
 
-import { getMainBubbleChart } from "@/apis";
+import {
+  getCommunityTop5,
+  getMainBottom,
+  getMainBubbleChart,
+  getMainTop,
+  getPopularContents,
+} from "@/apis";
 import BubbleChart from "@/components/organisms/Home/BubbleChart";
 import DiscussedTopics from "@/components/organisms/Home/DiscussedTopics";
 import { LoginTopic } from "@/components/organisms/Home/LoginTopic";
@@ -10,10 +16,26 @@ import { MainCommunity } from "@/components/organisms/Home/MainCommunity";
 import { MainContent } from "@/components/organisms/Home/MainContent";
 import { MainTopic } from "@/components/organisms/Home/MainTopic";
 import { packbubbleDummydata } from "@/dummy/packBubbleData";
-import { BubbleChartState } from "@/recoil/atoms";
+import {
+  BubbleChartState,
+  ContentsPopularState,
+  MainTopState,
+  PopularCommunityState,
+  TalkingHoverState,
+  TalkingTopicState,
+} from "@/recoil/atoms";
 import { DragContainer } from "@/style/global";
+import { CommunityMainProps, ContentsMainProps, TopicMainProps, mainTopicBottom } from "@/types";
 const Home = () => {
   const setBubbleChartData = useSetRecoilState(BubbleChartState);
+  const setMainBottomData = useSetRecoilState<mainTopicBottom[]>(TalkingTopicState);
+  const setHoverData = useSetRecoilState(TalkingHoverState);
+  const setMainTopData = useSetRecoilState<TopicMainProps[]>(MainTopState);
+
+  const setPopularContents = useSetRecoilState<ContentsMainProps[]>(ContentsPopularState);
+
+  const setCommunityData = useSetRecoilState<CommunityMainProps[]>(PopularCommunityState);
+
   useEffect(() => {
     getMainBubbleChart()
       .then((res) => {
@@ -28,7 +50,48 @@ const Home = () => {
         console.log(err);
         setBubbleChartData(packbubbleDummydata);
       });
+
+    //메인 하단
+    getMainBottom()
+      .then((res) => {
+        console.log("res.data.data:", res.data.data);
+        setMainBottomData(res.data.data);
+        setHoverData(res.data.data.issueList);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+
+    //메인 상단 주제4개
+    getMainTop()
+      .then((res) => {
+        // console.log("top4:", res.data);
+        setMainTopData(res.data.data.slice(0, 4));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+
+    //
+    getPopularContents()
+      .then((res) => {
+        // console.log(res.data);
+        setPopularContents(res.data.data.slice(0, 5));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+
+    getCommunityTop5()
+      .then((res) => {
+        // console.log(res.data);
+        setCommunityData(res.data.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   }, [setBubbleChartData]);
+
   return (
     <DragContainer>
       <BubbleChart />
diff --git a/src/recoil/atoms/index.ts b/src/recoil/atoms/index.ts
index 69c077f1..e2d8fe4e 100644
--- a/src/recoil/atoms/index.ts
+++ b/src/recoil/atoms/index.ts
@@ -4,8 +4,12 @@ import { mySubjectData } from "@/dummy/mySubjectData";
 import {
   ArticleDataProps,
   BubbleGraphProps,
+  CommunityMainProps,
+  ContentsMainProps,
   DetailTitleProps,
+  TopicMainProps,
   lineGraphProps,
+  mainTopicBottom,
   packBubbleProps,
 } from "@/types";
 
@@ -126,3 +130,28 @@ export const topDateState = atom({
   key: "src/atoms/auth.tsx-topDateState ",
   default: "",
 });
+
+export const TalkingTopicState = atom<mainTopicBottom[]>({
+  key: "src/atoms/auth.tsx-TalkingTopicState",
+  default: [],
+});
+
+export const TalkingHoverState = atom({
+  key: "src/atoms/auth.tsx-TalkingHoverState",
+  default: [],
+});
+
+export const MainTopState = atom<TopicMainProps[]>({
+  key: "src/atoms/auth.tsx-MainTopState",
+  default: [],
+});
+
+export const ContentsPopularState = atom<ContentsMainProps[]>({
+  key: "src/atoms/auth.tsx-ContentsPopularState",
+  default: [],
+});
+
+export const PopularCommunityState = atom<CommunityMainProps[]>({
+  key: "src/atoms/auth.tsx-PopularCommunityState",
+  default: [],
+});
diff --git a/src/types/index.ts b/src/types/index.ts
index 13d2c075..dd81f9dd 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -53,6 +53,9 @@ export interface discussedTopicProps {
   title: string;
   subTitles: string[];
   idx: number;
+  // issueList: string[];
+  // topicId: number;
+  // topicTitle: string;
 }
 [];
 
@@ -256,3 +259,61 @@ export interface BubbleGraphProps {
   z: number;
   name: string;
 }
+
+export interface FirstTopicProps {
+  topicId: number;
+  topicTitle: string;
+  issueList: IssueListProps[];
+}
+
+export interface IssueListProps {
+  id: number;
+  issueTitle: string;
+}
+
+export interface CommunityMainProps {
+  id: number;
+  communityText: string;
+  date: string;
+  writerId: string;
+  nickname: string;
+  profileImg: string;
+  area: string;
+  subject: string;
+  keyword: string;
+  likeCount: number;
+  commentCount: number;
+  contentsId: number;
+  contents: null;
+  contentsTitle: string;
+}
+
+export interface ContentsMainProps {
+  contents_id?: number;
+  description?: string;
+  imgUrl?: string;
+  issueTitle?: string;
+  keyword?: string;
+  pubDate?: string;
+  title?: string;
+  topic?: string;
+  type?: string;
+  url?: string;
+  category?: string;
+  contents?: string;
+  link?: string;
+}
+
+export interface mainTopicBottom {
+  issueList: string[];
+  topicId: number;
+  topicTitle: string;
+}
+[];
+
+export interface TopicMainProps {
+  title: string;
+  subscribeCount: number;
+  imgUrl: string;
+  category: string;
+}