kusitms-28th-Meetup-E · hoyyChoi · Nov 23, 2023 · Nov 22, 2023 · Nov 22, 2023 · Nov 22, 2023
diff --git 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;
+};
diff --git 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 <Tag $category={category}>{category}</Tag>;
 };
 
-export const KeywordTag = ({ category }: { category: string }) => {
-  return <Keyword $category={category}>{category}</Keyword>;
+export const KeywordTag = ({ category, children }: { category: string; children: string }) => {
+  return <Keyword $category={category}>{children}</Keyword>;
 };
diff --git 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/PreviewCommunityBox/index.tsx b/src/components/molecules/PreviewCommunityBox/index.tsx
@@ -33,7 +33,7 @@ export const PreviewCommunityBox = ({ data }: { data: CommunityItemProps }) => {
         </div>
         <div className="bottom-content">
           <div>인용한 콘텐츠</div>
-          <p>{data.quotText}</p>
+          <p>{data.contentsTitle}</p>
         </div>
       </CommunityDetailContainer>
     </>

diff --git 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 (
     <CommunityPostContainer>
       <div className="top-post-wrapper">
@@ -22,18 +24,28 @@ export const DetailCommunityBox = ({ data }: { data: CommunityItemProps }) => {
       <div className="top-wrapper">
         <div className="content-category">
           <TopicTag category={data.area} />
-          {/* <KeywordTag category={data.subject} /> */}
-          <KeywordTag category={data.keyword} />
+          <KeywordTag category={data.area}>{data.subject}</KeywordTag>
+          <KeywordTag category={data.area}>{data.keyword}</KeywordTag>
         </div>
         <div className="content-text">{data.communityText} </div>
       </div>
-      <div className="content-quot">
+      <div
+        className="content-quot"
+        onClick={() => {
+          if (contLen > 20) {
+            console.log(contLen);
+            window.open(`${data.contents}`);
+          } else {
+            window.open(`https://www.youtube.com/watch?v=${data.contents}`);
+          }
+        }}
+      >
         <div className="quot-text">
           <p>인용한 콘텐츠</p>
-          <div>{data.quotText}</div>
+          <div>{data.contentsTitle}</div>
         </div>
         <img
-          src="https://images.chosun.com/resizer/XKL6ePOdAuAn81yF-ZBOY8VyQWs=/616x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/JMI3RCEB2Y7QSIUWJKT2MT7CC4.jpg"
+          src={data.contentsUrl}
           alt=""
         />
       </div>

diff --git a/src/components/molecules/longTopicBox/index.tsx b/src/components/molecules/longTopicBox/index.tsx
@@ -19,7 +19,7 @@ export const SimilarTopicBox = ({ data }: { data: SimilarTopicProps }) => {
         <TopicTag category={data.area} />
       </Top>
       <Bottom>
-        <p>{data.subscibeCount}명</p>이 구독하고 있어요
+        <p>{data.subscribeCount}명</p>이 구독하고 있어요
       </Bottom>
     </Container>
   );
@@ -36,8 +36,8 @@ export const TopTopicBox = ({ data }: { data: ToptopicProps }) => {
       $string="top"
     >
       <Middle>
-        <div className="title">{data.subject}</div>
-        <TopicTag category={data.area} />
+        <div className="title">{data.title}</div>
+        <TopicTag category={data.category} />
       </Middle>
     </Container>
   );

diff --git a/src/components/molecules/main/communitybox/index.tsx b/src/components/molecules/main/communitybox/index.tsx
@@ -133,7 +133,8 @@ export const CommunityBox = () => {
               <div className="community-content">
                 <div className="community-tag-wrapper">
                   <TopicTag category={item.area} />
-                  <KeywordTag category={item.keyword} />
+                  <KeywordTag category={item.area}>{item.topic}</KeywordTag>
+                  <KeywordTag category={item.area}>{item.keyword}</KeywordTag>
                 </div>
                 <div className="content-wrapper">
                   <div className="content-text">{item.communityText}</div>

diff --git a/src/components/molecules/mainCommunityBox/index.tsx b/src/components/molecules/mainCommunityBox/index.tsx
@@ -1,27 +1,60 @@
+import { useNavigate } from "react-router";
+
 import { CommentBorderButton, LikeBorderButton } from "@/components/atoms/button";
 import { KeywordTag, TopicTag } from "@/components/atoms/tag";
 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 (
-    <CommunityMainContainer>
+    <CommunityMainContainer onClick={() => SpaceTo(`/detailcommunity/${topicId}/${data.id}`)}>
       <div className="top-wrapper">
         <div className="content-category">
           <TopicTag category={data.area} />
-          {/* <KeywordTag category={data.} /> */}
-          <KeywordTag category={data.keyword} />
+          <KeywordTag category={data.area}>{data.subject}</KeywordTag>
+          <KeywordTag category={data.area}>{data.keyword}</KeywordTag>
         </div>
         <div className="content-text">{data.communityText}</div>
       </div>
-      <div className="content-quot">
+      <div
+        className="content-quot"
+        onClick={(e) => {
+          e.stopPropagation();
+          if (contLen > 20) {
+            console.log(contLen);
+            window.open(`${data.contents}`);
+          } else {
+            window.open(`https://www.youtube.com/watch?v=${data.contents}`);
+          }
+        }}
+      >
         <div className="quot-text">
           <p>인용한 콘텐츠</p>
-          <div>{data.quotText}</div>
+          <div>{data.contentsTitle}</div>
         </div>
         <img
-          src="https://images.chosun.com/resizer/XKL6ePOdAuAn81yF-ZBOY8VyQWs=/616x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/JMI3RCEB2Y7QSIUWJKT2MT7CC4.jpg"
+          src={data.contentsUrl}
           alt=""
         />
       </div>

diff --git 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 {

diff --git 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 (
     <Container>
       <img
@@ -13,7 +13,7 @@ const DetailCommunityTitle = () => {
         width="100%"
         height={220}
       />
-      <DetailCommunityBox data={envirData[0]} />
+      <DetailCommunityBox data={data} />
     </Container>
   );
 };

diff --git 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,