hotifx

kusitms-28th-Meetup-E · Nov 23, 2023 · 9dc4d2b · 9dc4d2b
1 parent 2ab2b7d
commit 9dc4d2b
Show file tree

Hide file tree

Showing 12 changed files with 229 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,21 +2,22 @@ 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)",
   };
 
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,18 +2,40 @@ 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";
 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 />