From 78868097f951dca34bf25e785d816ff455fb7856 Mon Sep 17 00:00:00 2001
From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com>
Date: Thu, 23 Nov 2023 22:46:17 +0900
Subject: [PATCH 1/2] feat : api connect

---
 src/apis/index.ts                             | 70 ++++++++++++++-
 src/components/atoms/toast/index.tsx          | 78 ++++++++++++++++
 .../molecules/DetailTitle/index.tsx           | 50 ++++++++++-
 .../molecules/carousel/ArticleCarousel.tsx    |  1 -
 src/components/molecules/comment/index.tsx    |  2 +-
 src/components/molecules/line/index.tsx       |  2 +-
 .../molecules/longTopicBox/index.tsx          |  6 +-
 src/components/molecules/slideItem/index.tsx  |  1 -
 .../organisms/DetailCommunity/CommentList.tsx | 63 ++++++++++++-
 .../organisms/Details/CommunityPreview.tsx    | 17 +++-
 .../organisms/Details/KeywordArticle.tsx      | 18 ++--
 .../organisms/Details/SimilarTopic.tsx        |  6 +-
 .../organisms/Details/keywordVideo.tsx        | 17 ++--
 src/pages/DetailCommunityPage.tsx             |  4 +-
 src/pages/DetailPage.tsx                      | 89 +++++++++++--------
 src/recoil/atoms/index.ts                     | 12 +++
 src/types/index.ts                            | 29 ++++--
 17 files changed, 382 insertions(+), 83 deletions(-)
 create mode 100644 src/components/atoms/toast/index.tsx

diff --git a/src/apis/index.ts b/src/apis/index.ts
index 7ea3c18f..36c1eeef 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -1,6 +1,12 @@
 import axios from "axios";
 
-import { addRegisterType, emailCodeType, localRegisterType, loginType } from "@/types";
+import {
+  CommentProps,
+  addRegisterType,
+  emailCodeType,
+  localRegisterType,
+  loginType,
+} from "@/types";
 
 const GwangjangAxios = axios.create({
   baseURL: "https://api.gwang-jang.co.kr",
@@ -175,6 +181,66 @@ export const getSearch = async (keyword: string) => {
 };
 
 export const getSearchCommunity = async (keyword: string) => {
-  const res = await GwangjangAxios.get(`/community/search/ALL/${keyword}`);
+  const res = await GwangjangAxios.get(`/community/search/${keyword}`);
+  return res;
+};
+
+export const getDetailCommunity = async (issue: string) => {
+  const res = await GwangjangAxios.get(`/community/sortBy/ISSUE/word/${issue}`);
+  return res;
+};
+
+export const getRandomIssue = async () => {
+  const res = await GwangjangAxios.get(`/keyword/random/issue`);
+  return res;
+};
+
+export const postComment = async ({ topicId, communityId, talk }: CommentProps) => {
+  const res = await GwangjangAxios.post(
+    `/community/topic/${topicId}/community/${communityId}/comments`,
+    {
+      talk: talk,
+    },
+    {
+      headers: {
+        Authorization: `Bearer ${localStorage.accessToken}`,
+      },
+    }
+  );
+  return res;
+};
+
+export const getComment = async ({ topicId, communityId }: CommentProps) => {
+  const res = await GwangjangAxios.get(
+    `/community/topic/${topicId}/community/${communityId}/comments`
+  );
+  return res;
+};
+
+export const getSubcribe = async ({ topicId, IssueId }: { topicId: number; IssueId: number }) => {
+  const res = await GwangjangAxios.post(
+    `member/topic/${topicId}/issue/${IssueId}/subscribe`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${localStorage.accessToken}`,
+      },
+    }
+  );
+  return res;
+};
+
+export const getDeleteSubcribe = async ({
+  topicId,
+  IssueId,
+}: {
+  topicId: number;
+  IssueId: number;
+}) => {
+  const res = await GwangjangAxios.delete(`member/topic/${topicId}/issue/${IssueId}/subscribe`, {
+    headers: {
+      Authorization: `Bearer ${localStorage.accessToken}`,
+    },
+  });
   return res;
 };
diff --git a/src/components/atoms/toast/index.tsx b/src/components/atoms/toast/index.tsx
new file mode 100644
index 00000000..4481eb07
--- /dev/null
+++ b/src/components/atoms/toast/index.tsx
@@ -0,0 +1,78 @@
+import { styled } from "styled-components";
+
+import favicon from "@/assets/favicon.svg";
+
+const ChallengeToast = ({ message }: { message: string }) => {
+  return (
+    <ChallengeToastWrapper>
+      <ChallengeBox>
+        <>
+          <img
+            src={favicon}
+            width={60}
+          />
+        </>
+        <div>{message}</div>
+      </ChallengeBox>
+    </ChallengeToastWrapper>
+  );
+};
+
+const ChallengeToastWrapper = styled.div`
+  font-family: "Pretendard";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 22px;
+  /* identical to box height */
+
+  text-align: center;
+
+  color: #272727;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 20;
+`;
+
+const ChallengeBox = styled.div`
+  height: 125px;
+  width: 390px;
+  background: #ffffff;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  animation: slideUp 1s;
+
+  .sqaure {
+    width: 24px;
+    height: 24px;
+
+    background: #272727;
+    border: 1px solid #272727;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    @keyframes slideUp {
+      0% {
+        transform: translateY(30px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+`;
+
+export default ChallengeToast;
diff --git a/src/components/molecules/DetailTitle/index.tsx b/src/components/molecules/DetailTitle/index.tsx
index 6c7ae7a4..92f851b5 100644
--- a/src/components/molecules/DetailTitle/index.tsx
+++ b/src/components/molecules/DetailTitle/index.tsx
@@ -1,16 +1,62 @@
 import { useState } from "react";
 
+import { useSetRecoilState, useRecoilValue } from "recoil";
+
+import { getDeleteSubcribe, getSubcribe } from "@/apis";
 import { SubscribeButton } from "@/components/atoms/button";
 import OneLine from "@/components/atoms/oneLine";
 import { TopicTag } from "@/components/atoms/tag";
+import { ToastState, areaState, detailTitleState } from "@/recoil/atoms";
 import { DetailTitleProps } from "@/types";
 
 import { Container, Top, Title } from "./style";
+
 const DetailTitle = ({ data }: { data: DetailTitleProps }) => {
   const [onOff, setOnOff] = useState<boolean>(false);
+  const [num, setNum] = useState<number>(0);
+  const setOnToast = useSetRecoilState<boolean>(ToastState);
+  const detailtitle = useRecoilValue(detailTitleState);
+  const setDetailtitle = useSetRecoilState(detailTitleState);
+  const area = useRecoilValue(areaState);
+
   const subscribeOn = () => {
-    setOnOff(!onOff);
-    // 구독 Api 발송!
+    if (area === "주거·사회 안전망") {
+      setNum(2);
+    } else if (area === "일자리·노동") {
+      setNum(1);
+    } else if (area === "환경") {
+      setNum(3);
+    } else if (area === "교육") {
+      setNum(4);
+    }
+    if (localStorage.getItem("accessToken")) {
+      setOnOff(true);
+      getSubcribe({ topicId: num, IssueId: detailtitle.id })
+        .then((res) => {
+          console.log(res.data.data.subscribers);
+          setDetailtitle({ ...detailtitle, count: res?.data?.data?.subscribers });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      // 구독 Api 발송!
+      if (onOff === true) {
+        getDeleteSubcribe({ topicId: num, IssueId: detailtitle.id })
+          .then((res) => {
+            console.log(res.data.data.subscribers);
+            setDetailtitle({ ...detailtitle, count: res?.data?.data?.subscribers });
+            setOnOff(false);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
+    } else {
+      setOnToast(true);
+      setTimeout(() => {
+        setOnToast(false);
+      }, 1500);
+    }
   };
   return (
     <Container>
diff --git a/src/components/molecules/carousel/ArticleCarousel.tsx b/src/components/molecules/carousel/ArticleCarousel.tsx
index dc70c1e3..18f5f91f 100644
--- a/src/components/molecules/carousel/ArticleCarousel.tsx
+++ b/src/components/molecules/carousel/ArticleCarousel.tsx
@@ -13,7 +13,6 @@ import { SlideItem } from "../slideItem";
 
 export const ArticleCarousel = ({ data }: { data: ArticleDataProps[] }) => {
   const maxSlidesToShow = Math.min(data.length, 4);
-  console.log(data);
   const SliderSetting = {
     dots: false,
     infinite: true,
diff --git a/src/components/molecules/comment/index.tsx b/src/components/molecules/comment/index.tsx
index 02aa2f01..0bff615c 100644
--- a/src/components/molecules/comment/index.tsx
+++ b/src/components/molecules/comment/index.tsx
@@ -6,7 +6,7 @@ import { CommentContainer } from "./style";
 export const Comment = ({ data }: CommentItemProps) => {
   return (
     <>
-      {data.map((item, idx) => (
+      {data?.reverse().map((item, idx) => (
         <CommentContainer key={idx}>
           <BigProfile
             nickname={item.nickname}
diff --git a/src/components/molecules/line/index.tsx b/src/components/molecules/line/index.tsx
index e0af2280..65d52b87 100644
--- a/src/components/molecules/line/index.tsx
+++ b/src/components/molecules/line/index.tsx
@@ -41,7 +41,7 @@ const Line = ({ showGraph }: { showGraph: boolean }) => {
       .catch((err) => {
         console.log(err);
       });
-  }, [id]);
+  }, [id, setTopDate]);
   const options = useMemo(() => {
     return {
       chart: {
diff --git a/src/components/molecules/longTopicBox/index.tsx b/src/components/molecules/longTopicBox/index.tsx
index 1380bbf8..b3016fc6 100644
--- a/src/components/molecules/longTopicBox/index.tsx
+++ b/src/components/molecules/longTopicBox/index.tsx
@@ -15,11 +15,11 @@ export const SimilarTopicBox = ({ data }: { data: SimilarTopicProps }) => {
       $string="similar"
     >
       <Top>
-        <div className="title">{data.topic}</div>
-        <TopicTag category={data.area} />
+        <div className="title">{data.issueTitle}</div>
+        <TopicTag category={data.topicTitle} />
       </Top>
       <Bottom>
-        <p>{data.subscribeCount}명</p>이 구독하고 있어요
+        <p>80명</p>이 구독하고 있어요
       </Bottom>
     </Container>
   );
diff --git a/src/components/molecules/slideItem/index.tsx b/src/components/molecules/slideItem/index.tsx
index 7fa5afa4..4a444a8e 100644
--- a/src/components/molecules/slideItem/index.tsx
+++ b/src/components/molecules/slideItem/index.tsx
@@ -12,7 +12,6 @@ export const SlideItem = ({ data }: { data: ArticleDataProps }) => {
   const setModal = useSetRecoilState(modalState);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const ShowModal = useSetRecoilState(ShowModalState);
-  console.log(data, 124);
 
   const Modal = () => {
     setModal(data);
diff --git a/src/components/organisms/DetailCommunity/CommentList.tsx b/src/components/organisms/DetailCommunity/CommentList.tsx
index 70ee6f3d..435031b5 100644
--- a/src/components/organisms/DetailCommunity/CommentList.tsx
+++ b/src/components/organisms/DetailCommunity/CommentList.tsx
@@ -1,15 +1,19 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
+import { getComment, postComment } from "@/apis";
 import temp from "@/assets/main_logo.svg";
 import { Comment } from "@/components/molecules/comment";
-import { CommentData } from "@/dummy/commentData";
 
 export const CommentList = () => {
+  const { topicId } = useParams();
+  const { communityId } = useParams();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const [text, setText] = useState("");
   const [registerBtn, setRegisterBtn] = useState(true);
+  const [commentdata, setCommentData] = useState([]);
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setText(e.currentTarget.value);
     if (e.currentTarget.value === "") {
@@ -24,10 +28,59 @@ export const CommentList = () => {
       textareaRef.current.style.height = scrollHeight + "px";
     }
   };
+  const commentRegister = () => {
+    postComment({
+      topicId: parseInt(topicId || "0"),
+      communityId: parseInt(communityId || "0"),
+      talk: text,
+    })
+      .then((res) => {
+        console.log(res.data.data);
+        setCommentData(res.data.data);
+        setText("");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  // const handleOnKeyPress = (e: KeyboardEvent) => {
+  //   if (e.key === "Enter") {
+  //     if (textareaRef.current !== null && e.nativeEvent === false) {
+  //       //한글 중복 입력 해결
+  //       textareaRef.current.disabled = false; //input 비활성화 해제
+  //       textareaRef.current.blur(); //input에 focus 해제
+  //     }
+  //     postComment({
+  //       topicId: parseInt(topicId || "0"),
+  //       communityId: parseInt(communityId || "0"),
+  //       talk: text,
+  //     })
+  //       .then((res) => {
+  //         console.log(res.data.data);
+  //         setCommentData(res.data.data);
+  //         setText("");
+  //       })
+  //       .catch((err) => {
+  //         console.log(err);
+  //       });
+  //   }
+  // };
+
+  useEffect(() => {
+    getComment({
+      topicId: parseInt(topicId || "0"),
+      communityId: parseInt(communityId || "0"),
+    }).then((res) => {
+      console.log(res.data.data);
+      setCommentData(res.data.data);
+      setText("");
+    });
+  }, [communityId, topicId]);
+
   return (
     <CommunityListWrapper>
       <div className="comment-count">
-        <b>24</b>개의 댓글이 있어요
+        <b>{commentdata.length}</b>개의 댓글이 있어요
       </div>
       <div className="comment-post">
         <img
@@ -39,8 +92,10 @@ export const CommentList = () => {
           value={text}
           onChange={onChange}
           placeholder="댓글을 입력해주세요."
+          //onKeyDown={handleOnKeyPress}
         />
         <button
+          onClick={commentRegister}
           disabled={registerBtn}
           className={registerBtn ? "" : "abled"}
         >
@@ -49,7 +104,7 @@ export const CommentList = () => {
       </div>
       <div className="line"></div>
       <div className="comment-box">
-        <Comment data={CommentData} />
+        <Comment data={commentdata} />
       </div>
     </CommunityListWrapper>
   );
diff --git a/src/components/organisms/Details/CommunityPreview.tsx b/src/components/organisms/Details/CommunityPreview.tsx
index 5b553426..d6a7420a 100644
--- a/src/components/organisms/Details/CommunityPreview.tsx
+++ b/src/components/organisms/Details/CommunityPreview.tsx
@@ -1,10 +1,12 @@
+import { useEffect, useState } from "react";
+
 import { useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
+import { getDetailCommunity } from "@/apis";
 import { SeeMore } from "@/components/atoms/more";
 import { PreviewCommunityBox } from "@/components/molecules/PreviewCommunityBox";
-import { envirData } from "@/dummy/AreaData";
 import { areaState } from "@/recoil/atoms";
 
 export const CommunityPreview = () => {
@@ -12,7 +14,17 @@ export const CommunityPreview = () => {
   const area = useRecoilValue(areaState);
 
   const name = decodeURI(decodeURIComponent(id || ""));
+  const [similiarData, setSimilarData] = useState([]);
 
+  useEffect(() => {
+    getDetailCommunity(name)
+      .then((res) => {
+        setSimilarData(res.data.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [name]);
   return (
     <Container $area={area}>
       <div className="PreviewTop">
@@ -31,7 +43,7 @@ export const CommunityPreview = () => {
       </div>
       <CommunityDetailWrapper>
         <div className="scrollInner">
-          {envirData.map((item, idx) => (
+          {similiarData?.map((item, idx) => (
             <PreviewCommunityBox
               key={idx}
               data={item}
@@ -117,7 +129,6 @@ export const CommunityDetailWrapper = styled.div`
   padding: 24px;
   box-sizing: border-box;
   .scrollInner {
-    width: fit-content;
     display: flex;
     flex-direction: column;
     gap: 16px;
diff --git a/src/components/organisms/Details/KeywordArticle.tsx b/src/components/organisms/Details/KeywordArticle.tsx
index ecfe0c4c..e7687ba3 100644
--- a/src/components/organisms/Details/KeywordArticle.tsx
+++ b/src/components/organisms/Details/KeywordArticle.tsx
@@ -30,15 +30,15 @@ export const KeywordArticle = () => {
       .catch((err) => {
         console.log(err);
       });
-
-    getKeywordArticle(DetailPageKeyword)
-      .then((res) => {
-        setKeywordArticleData(res.data.data);
-        console.log(res.data.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    if (name !== "") {
+      getKeywordArticle(DetailPageKeyword)
+        .then((res) => {
+          setKeywordArticleData(res.data.data);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
   }, [DetailPageKeyword, name]);
 
   return (
diff --git a/src/components/organisms/Details/SimilarTopic.tsx b/src/components/organisms/Details/SimilarTopic.tsx
index fc5a500b..efd27898 100644
--- a/src/components/organisms/Details/SimilarTopic.tsx
+++ b/src/components/organisms/Details/SimilarTopic.tsx
@@ -5,9 +5,9 @@ import styled from "styled-components";
 import next from "@/assets/bottom_arrow.svg";
 import { SimilarTopicBox } from "@/components/molecules/longTopicBox";
 import { areaState } from "@/recoil/atoms";
-import { SimilarTopicesProps } from "@/types";
+import { SimilarTopicProps } from "@/types";
 
-const SimilarTopic = ({ data }: { data: SimilarTopicesProps }) => {
+const SimilarTopic = ({ data }: { data: SimilarTopicProps[] }) => {
   const { id } = useParams();
   const area = useRecoilValue(areaState);
 
@@ -24,7 +24,7 @@ const SimilarTopic = ({ data }: { data: SimilarTopicesProps }) => {
 
       <TopicWraaper>
         <div className="TopicBoxes">
-          {data.item.map((el) => {
+          {data?.map((el) => {
             return <SimilarTopicBox data={el} />;
           })}
         </div>
diff --git a/src/components/organisms/Details/keywordVideo.tsx b/src/components/organisms/Details/keywordVideo.tsx
index ccfeb421..3936835c 100644
--- a/src/components/organisms/Details/keywordVideo.tsx
+++ b/src/components/organisms/Details/keywordVideo.tsx
@@ -28,14 +28,15 @@ export const KeywordVideo = () => {
         console.log(err);
       });
 
-    getKeywordYoutube(DetailPageKeyword)
-      .then((res) => {
-        setKeywordYoutubeData(res.data.data);
-        console.log(res.data.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    if (name !== "") {
+      getKeywordYoutube(DetailPageKeyword)
+        .then((res) => {
+          setKeywordYoutubeData(res.data.data);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
   }, [DetailPageKeyword, name]);
 
   return (
diff --git a/src/pages/DetailCommunityPage.tsx b/src/pages/DetailCommunityPage.tsx
index f82088cc..3aef7d2c 100644
--- a/src/pages/DetailCommunityPage.tsx
+++ b/src/pages/DetailCommunityPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import { useParams } from "react-router";
+import { useParams } from "react-router-dom";
 
 import { getCommunityDetailData } from "@/apis";
 import { CommentList } from "@/components/organisms/DetailCommunity/CommentList";
@@ -19,7 +19,7 @@ const DetailCommunityPage = () => {
         setDetailData(res.data.data);
       })
       .catch((err) => console.log(err));
-  }, []);
+  }, [communityId, topicId]);
 
   return (
     <>
diff --git a/src/pages/DetailPage.tsx b/src/pages/DetailPage.tsx
index b2f5851c..8f620fc0 100644
--- a/src/pages/DetailPage.tsx
+++ b/src/pages/DetailPage.tsx
@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { useParams } from "react-router-dom";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue, useSetRecoilState, useRecoilState } from "recoil";
 import styled from "styled-components";
 
-import { getDetailOneLineIntro, getDetailSubscribeCount } from "@/apis";
+import { getDetailOneLineIntro, getDetailSubscribeCount, getRandomIssue } from "@/apis";
+import Loading from "@/components/atoms/Loading";
+import ChallengeToast from "@/components/atoms/toast";
 import { BubbleGraph } from "@/components/organisms/Details/BubbleGraph";
 import { CommunityPreview } from "@/components/organisms/Details/CommunityPreview";
 import { DetailArticleTitle } from "@/components/organisms/Details/DetailArticleTitle";
@@ -17,16 +19,24 @@ import { QuotModal } from "@/components/organisms/Modal/QuotModal";
 //import { bubbleDummydata } from "@/dummy/bubbleData";
 import { detailTitleData } from "@/dummy/detailTitleData";
 //import { lineDummydata } from "@/dummy/lineData";
-import { similartopicData } from "@/dummy/similartopicData";
-import { ShowModalState, bubbleGraphState, detailTitleState } from "@/recoil/atoms";
+import {
+  ShowModalState,
+  ToastState,
+  bubbleGraphState,
+  detailTitleState,
+  loadingState,
+} from "@/recoil/atoms";
 //import { BubbleGraphProps } from "@/types";
 
 const DetailPage = () => {
   //모달 show 여부
   const Show = useRecoilValue(ShowModalState);
+  const Toast = useRecoilValue(ToastState);
   const setDetailTitle = useSetRecoilState(detailTitleState);
   const setBubbleGraphData = useSetRecoilState(bubbleGraphState);
   const { id } = useParams();
+  const [loading, setLoading] = useRecoilState(loadingState);
+  const [similar, setSimilar] = useState([]);
 
   useEffect(() => {
     const name = decodeURI(decodeURIComponent(id || ""));
@@ -52,6 +62,7 @@ const DetailPage = () => {
               oneline: objectTitle.issueDetail,
               id: objectTitle.issueId,
             });
+            setLoading(false);
           })
           .catch((err) => {
             console.log(err);
@@ -61,42 +72,44 @@ const DetailPage = () => {
         console.log(err);
         setDetailTitle(detailTitleData);
       });
-    // getDetailBubbleGraph(name)
-    //   .then((res) => {
-    //     console.log(res.data.data);
-    //     const obj = [...res.data.data];
-    //     const RealObj = obj.map((item: any) => {
-    //       return Object.freeze(item);
-    //     });
-    //     setBubbleGraphData(RealObj);
-    //   })
-    //   .catch((err) => {
-    //     console.log(err);
-    //     setBubbleGraphData(bubbleDummydata);
-    //   });
-  }, [id, setBubbleGraphData, setDetailTitle]);
+    getRandomIssue()
+      .then((res) => {
+        console.log(res.data.data);
+        setSimilar(res.data.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [id, setBubbleGraphData, setDetailTitle, setLoading]);
 
   return (
     <>
-      <DetailArticleTitle />
-      <BubbleGraph />
-      <LineGraph />
-      <KeywordArticle />
-      <KeywordVideo />
-      <Bottom>
-        {window.innerWidth > 800 ? (
-          <>
-            <CommunityPreview />
-            <SimilarTopic data={similartopicData} />
-          </>
-        ) : (
-          <>
-            <SimilarTopic data={similartopicData} />
-            <CommunityPreview />
-          </>
-        )}
-      </Bottom>
-      {Show ? <QuotModal /> : ""}
+      {Toast ? <ChallengeToast message="로그인을 진행해 주세요" /> : ""}
+      {!loading ? (
+        <>
+          <DetailArticleTitle />
+          <BubbleGraph />
+          <LineGraph />
+          <KeywordArticle />
+          <KeywordVideo />
+          <Bottom>
+            {window.innerWidth > 800 ? (
+              <>
+                <CommunityPreview />
+                <SimilarTopic data={similar} />
+              </>
+            ) : (
+              <>
+                <SimilarTopic data={similar} />
+                <CommunityPreview />
+              </>
+            )}
+          </Bottom>
+          {Show ? <QuotModal /> : ""}
+        </>
+      ) : (
+        <Loading />
+      )}
     </>
   );
 };
diff --git a/src/recoil/atoms/index.ts b/src/recoil/atoms/index.ts
index 69c077f1..55fae776 100644
--- a/src/recoil/atoms/index.ts
+++ b/src/recoil/atoms/index.ts
@@ -126,3 +126,15 @@ export const topDateState = atom({
   key: "src/atoms/auth.tsx-topDateState ",
   default: "",
 });
+
+export const ToastState = atom({
+  // 주제뱔 상세페이지 접속시, 쿼리스트링의 영역값을 저장
+  key: "src/atoms/auth.tsx-ToastState ",
+  default: false,
+});
+
+export const subscriber = atom({
+  // 주제뱔 상세페이지 접속시, 쿼리스트링의 영역값을 저장
+  key: "src/atoms/auth.tsx-subscriber ",
+  default: 0,
+});
diff --git a/src/types/index.ts b/src/types/index.ts
index 13d2c075..4330e1fb 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -178,14 +178,27 @@ export interface CommentItemProps {
 }
 export interface SimilarTopicesProps {
   id: number;
-  topic: string;
-  item: SimilarTopicProps[];
+  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;
+  contentsUrl: string;
+  likeStatus: string;
+  quotText: string;
 }
 
 export interface SimilarTopicProps {
-  subscribeCount: number;
-  topic: string;
-  area: string;
+  issueTitle: string;
+  topicTitle: string;
 }
 export interface ToptopicProps {
   id: number;
@@ -256,3 +269,9 @@ export interface BubbleGraphProps {
   z: number;
   name: string;
 }
+
+export interface CommentProps {
+  topicId: number;
+  communityId: number;
+  talk?: string;
+}

From 2ceef2d4d50536308b9483bd28934fa6005a2163 Mon Sep 17 00:00:00 2001
From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com>
Date: Thu, 23 Nov 2023 23:50:43 +0900
Subject: [PATCH 2/2] feat  : api

---
 src/apis/index.ts                             | 33 +++++++++++++++++++
 .../molecules/DetailTitle/index.tsx           | 20 +++++++++--
 .../molecules/searchTitle/index.tsx           |  2 +-
 .../organisms/Community/CommunityPopular.tsx  |  4 +--
 .../organisms/Community/CommunityTitle.tsx    |  2 +-
 .../organisms/Community/CommunityTopTopic.tsx |  4 +--
 .../organisms/Details/KeywordArticle.tsx      |  4 +--
 .../organisms/Details/LineGraph.tsx           |  2 +-
 .../organisms/Details/SimilarTopic.tsx        |  4 +--
 .../organisms/Details/keywordVideo.tsx        |  2 +-
 .../organisms/Home/DiscussedTopics.tsx        | 13 ++++++--
 src/components/organisms/Home/LoginTopic.tsx  | 20 ++++++++++-
 src/components/organisms/Home/MainContent.tsx |  2 +-
 src/components/organisms/Home/MainTopic.tsx   |  2 +-
 src/dummy/MySubscribeData.ts                  | 25 +++++---------
 src/pages/Home.tsx                            |  4 +--
 src/types/index.ts                            |  8 +++++
 17 files changed, 113 insertions(+), 38 deletions(-)

diff --git a/src/apis/index.ts b/src/apis/index.ts
index 36c1eeef..7c104fd0 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -244,3 +244,36 @@ export const getDeleteSubcribe = async ({
   });
   return res;
 };
+
+export const getactiveSubcribe = async ({
+  topicId,
+  IssueId,
+}: {
+  topicId: number;
+  IssueId: number;
+}) => {
+  const res = await GwangjangAxios.get(`member/topic/${topicId}/issue/${IssueId}/subscribe`, {
+    headers: {
+      Authorization: `Bearer ${localStorage.accessToken}`,
+    },
+  });
+  return res;
+};
+
+export const getget = async () => {
+  const res = await GwangjangAxios.get(`/member/subscribe`, {
+    headers: {
+      Authorization: `Bearer ${localStorage.accessToken}`,
+    },
+  });
+  return res;
+};
+
+export const getgetget = async (topic: string) => {
+  const res = await GwangjangAxios.get(`/contnets/subscribe/${topic}`, {
+    headers: {
+      Authorization: `Bearer ${localStorage.accessToken}`,
+    },
+  });
+  return res;
+};
diff --git a/src/components/molecules/DetailTitle/index.tsx b/src/components/molecules/DetailTitle/index.tsx
index 92f851b5..b20fa4bd 100644
--- a/src/components/molecules/DetailTitle/index.tsx
+++ b/src/components/molecules/DetailTitle/index.tsx
@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useSetRecoilState, useRecoilValue } from "recoil";
 
-import { getDeleteSubcribe, getSubcribe } from "@/apis";
+import { getDeleteSubcribe, getSubcribe, getactiveSubcribe } from "@/apis";
 import { SubscribeButton } from "@/components/atoms/button";
 import OneLine from "@/components/atoms/oneLine";
 import { TopicTag } from "@/components/atoms/tag";
@@ -58,6 +58,22 @@ const DetailTitle = ({ data }: { data: DetailTitleProps }) => {
       }, 1500);
     }
   };
+
+  useEffect(() => {
+    getactiveSubcribe({ topicId: num, IssueId: detailtitle.id })
+      .then((res) => {
+        if (res.data.isSuccess) {
+          setOnOff(false);
+        } else {
+          setOnOff(true);
+        }
+
+        setOnOff(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, [detailtitle.id, num]);
   return (
     <Container>
       <Top>
diff --git a/src/components/molecules/searchTitle/index.tsx b/src/components/molecules/searchTitle/index.tsx
index 4420a682..7ef1650c 100644
--- a/src/components/molecules/searchTitle/index.tsx
+++ b/src/components/molecules/searchTitle/index.tsx
@@ -13,7 +13,7 @@ const SearchTitle = ({
   return (
     <Container>
       <div className="inner">
-        <p>‘{searchResult}’</p>에 대한 {searchCategoryBtn} 글 <p>{searchCount}</p>건
+        <p>‘{searchResult}’</p>에 대한 {searchCategoryBtn} 사회 이슈 <p>{searchCount}</p>건
       </div>
     </Container>
   );
diff --git a/src/components/organisms/Community/CommunityPopular.tsx b/src/components/organisms/Community/CommunityPopular.tsx
index 352bf6f0..d16837c7 100644
--- a/src/components/organisms/Community/CommunityPopular.tsx
+++ b/src/components/organisms/Community/CommunityPopular.tsx
@@ -7,8 +7,8 @@ const CommunityPopular = ({ data }: { data: PopularCommunityProps[] }) => {
   return (
     <PopularWraaper>
       <div className="title">
-        <p className="first">지금 가장 인기있는 게시글</p>
-        <p className="second">이번 주 광장에서 인기있던 글이에요</p>
+        <p className="first">인기 있는 커뮤니티 글 top 5</p>
+        <p className="second">이번 주 광장에서 가장 인기 있는 글이에요</p>
       </div>
       <div className="TopicBoxes">
         {data.map((item, idx) => {
diff --git a/src/components/organisms/Community/CommunityTitle.tsx b/src/components/organisms/Community/CommunityTitle.tsx
index 01bcec45..594cf1d9 100644
--- a/src/components/organisms/Community/CommunityTitle.tsx
+++ b/src/components/organisms/Community/CommunityTitle.tsx
@@ -17,7 +17,7 @@ const CommunityTitle = () => {
           <p className="secondLine">우리는?</p>
         </Title>
         <div className="text">
-          사회 이슈에 대한 의견을<p> 함께 나눠요</p>
+          사회 이슈에 대한 생각을<p> 함께 나눠요</p>
         </div>
       </Cover>
     </Container>
diff --git a/src/components/organisms/Community/CommunityTopTopic.tsx b/src/components/organisms/Community/CommunityTopTopic.tsx
index cf1c64ab..1d41833a 100644
--- a/src/components/organisms/Community/CommunityTopTopic.tsx
+++ b/src/components/organisms/Community/CommunityTopTopic.tsx
@@ -15,8 +15,8 @@ const CommunityTopTopic = ({ data }: { data: ToptopicProps[] }) => {
   return (
     <TopicWraaper $link={link}>
       <div className="title">
-        <p className="first">주간 인기 주제 top5</p>
-        <p className="second">이번 주 커뮤니티에서 활발하게 논의된 주제예요</p>
+        <p className="first">인기 있는 사회 이슈 top5</p>
+        <p className="second">광장에서 가장 인기 있는 사회 이슈에요.</p>
       </div>
       <div className="TopicBoxes">
         {data.map((item, idx) => {
diff --git a/src/components/organisms/Details/KeywordArticle.tsx b/src/components/organisms/Details/KeywordArticle.tsx
index e7687ba3..fc75f76f 100644
--- a/src/components/organisms/Details/KeywordArticle.tsx
+++ b/src/components/organisms/Details/KeywordArticle.tsx
@@ -47,9 +47,9 @@ export const KeywordArticle = () => {
         <>
           <div className="inner">
             <div className="keyword-text">
-              <p>{!DetailPageKeyword ? name : DetailPageKeyword}</p>가 더 궁금하다면?
+              <p>{!DetailPageKeyword ? name : DetailPageKeyword}</p>(이)가 더 궁금하다면?
             </div>
-            <SubTitle title="관련 기사로 더 알아보기" />
+            <SubTitle title="관련 기사로 더 알아보세요" />
           </div>
           <div>
             <ArticleCarousel data={DetailPageKeyword === "" ? articleData : keywordArticleData} />
diff --git a/src/components/organisms/Details/LineGraph.tsx b/src/components/organisms/Details/LineGraph.tsx
index 3eceda80..d3b9b409 100644
--- a/src/components/organisms/Details/LineGraph.tsx
+++ b/src/components/organisms/Details/LineGraph.tsx
@@ -16,7 +16,7 @@ export const LineGraph = () => {
     <Container>
       <ToggleBox>
         <div className="title">
-          <div className="first">{detailTitleData.title}</div>는{" "}
+          <div className="first">{detailTitleData.title}</div>(은)는{" "}
           <div className="second">2023년 {topDate}</div> 가장 많이 검색됐어요.
         </div>
         <button
diff --git a/src/components/organisms/Details/SimilarTopic.tsx b/src/components/organisms/Details/SimilarTopic.tsx
index efd27898..2ff14c3c 100644
--- a/src/components/organisms/Details/SimilarTopic.tsx
+++ b/src/components/organisms/Details/SimilarTopic.tsx
@@ -19,7 +19,7 @@ const SimilarTopic = ({ data }: { data: SimilarTopicProps[] }) => {
         <div className="title-top">
           <p>{name}</p> 와
         </div>
-        <div>비슷한 주제예요</div>
+        <div>이런 주제도 있어요</div>
       </div>
 
       <TopicWraaper>
@@ -29,7 +29,7 @@ const SimilarTopic = ({ data }: { data: SimilarTopicProps[] }) => {
           })}
         </div>
         <DifferentTopicBtn>
-          <p>다른 주제도 둘러보세요</p>
+          <p>다른 사회 이슈도 둘러보세요.</p>
           <img
             src={next}
             alt=">"
diff --git a/src/components/organisms/Details/keywordVideo.tsx b/src/components/organisms/Details/keywordVideo.tsx
index 3936835c..5103382b 100644
--- a/src/components/organisms/Details/keywordVideo.tsx
+++ b/src/components/organisms/Details/keywordVideo.tsx
@@ -44,7 +44,7 @@ export const KeywordVideo = () => {
       {(keywordYoutubeData.length || YoutubeData.length) && (
         <>
           <div className="inner">
-            <SubTitle title="관련 영상으로 더 알아보기" />
+            <SubTitle title="관련 영상으로 더 알아보세요" />
           </div>
           <div>
             <ArticleCarousel data={DetailPageKeyword === "" ? YoutubeData : keywordYoutubeData} />
diff --git a/src/components/organisms/Home/DiscussedTopics.tsx b/src/components/organisms/Home/DiscussedTopics.tsx
index 28549279..518c7f09 100644
--- a/src/components/organisms/Home/DiscussedTopics.tsx
+++ b/src/components/organisms/Home/DiscussedTopics.tsx
@@ -4,7 +4,7 @@ import { Title } from "@/components/atoms/title";
 import Topic from "@/components/molecules/discussedTopic";
 import { topicData } from "@/dummy/topicData";
 
-const title = "광장이 지금\n얘기하고 있는 주제";
+const title = "광장이 이야기하는\n사회 이슈";
 const DiscussedTopics = () => {
   return (
     <Container>
@@ -22,7 +22,16 @@ const DiscussedTopics = () => {
         ))}
       </DiscussedTopicContainer>
       <div className="inner">
-        <div className="addingTopic">주제를 추가하고 싶어요.</div>
+        <div
+          className="addingTopic"
+          onClick={() =>
+            window.open(
+              "https://docs.google.com/forms/d/e/1FAIpQLSfaG6BKFpiQfP8VOkjeAKfhgcobB4_A3uYp1gvG8J9R7vvD5w/viewform"
+            )
+          }
+        >
+          주제를 추가하고 싶어요.
+        </div>
       </div>
     </Container>
   );
diff --git a/src/components/organisms/Home/LoginTopic.tsx b/src/components/organisms/Home/LoginTopic.tsx
index 4794c502..be0c9bcf 100644
--- a/src/components/organisms/Home/LoginTopic.tsx
+++ b/src/components/organisms/Home/LoginTopic.tsx
@@ -10,10 +10,28 @@ import { CategoryFilter } from "@/components/molecules/categoryFilter";
 import { MySubscribeData } from "@/dummy/MySubscribeData";
 
 export const LoginTopic = () => {
+  // const [arr, setArr] = useState([]);
+  // const [a, setA] = useState("");
+
+  // const [b, setB] = useState("");
+  // const [c, setC] = useState("");
+
+  // useEffect(() => {
+  //   getget()
+  //     .then((res) => {
+  //       console.log(res.data.data.subscribeResList);
+  //       setA(res.data.data.subscribeResList[0]?.issue);
+  //       setB(res.data.data.subscribeResList[1]?.issue);
+  //       setC(res.data.data.subscribeResList[2]?.issue);
+  //     })
+  //     .catch((err) => {
+  //       console.log(err);
+  //     });
+  // }, []);
   return (
     <Background>
       <div className="inner">
-        <Title title="나의 관심 주제" />
+        <Title title="나의 관심 이슈" />
       </div>
       <div className="inner">
         <CategoryFilter />{" "}
diff --git a/src/components/organisms/Home/MainContent.tsx b/src/components/organisms/Home/MainContent.tsx
index cf18991e..deced053 100644
--- a/src/components/organisms/Home/MainContent.tsx
+++ b/src/components/organisms/Home/MainContent.tsx
@@ -8,7 +8,7 @@ import { Inner } from "@/style/global";
 
 export const MainContent = () => {
   const firstData = contentData[0];
-  const title = "지금 사람들이\n가장 많이 본 콘텐츠";
+  const title = "지금 가장\n인기있는 콘텐츠";
 
   return (
     <Background>
diff --git a/src/components/organisms/Home/MainTopic.tsx b/src/components/organisms/Home/MainTopic.tsx
index e0808fc1..ed72973f 100644
--- a/src/components/organisms/Home/MainTopic.tsx
+++ b/src/components/organisms/Home/MainTopic.tsx
@@ -7,7 +7,7 @@ import { subjectData } from "@/dummy/subjectData";
 import { Inner } from "@/style/global";
 
 export const MainTopic = () => {
-  const title = "가장 인기있는\n주제";
+  const title = " 광장에서 가장\n인기 있는 사회 이슈";
 
   return (
     <Background>
diff --git a/src/dummy/MySubscribeData.ts b/src/dummy/MySubscribeData.ts
index f5c6886e..8429942f 100644
--- a/src/dummy/MySubscribeData.ts
+++ b/src/dummy/MySubscribeData.ts
@@ -1,26 +1,17 @@
 export const MySubscribeData = [
   {
     id: 8,
-    url: "환경",
-    title: "후쿠시마 오염수",
-    imgUrl: "",
-    type: "safsdjafliej",
-    pubDate: "환경",
+    area: "환경",
+    subject: "후쿠시마 오염수",
   },
   {
-    id: 8,
-    url: "환경",
-    title: "후쿠시마 오염수",
-    imgUrl: "",
-    type: "safsdjafliej",
-    pubDate: "환경",
+    id: 2,
+    area: "환경",
+    subject: "후쿠시마 오염수",
   },
   {
-    id: 8,
-    url: "환경",
-    title: "후쿠시마 오염수",
-    imgUrl: "",
-    type: "safsdjafliej",
-    pubDate: "환경",
+    id: 3,
+    area: "환경",
+    subject: "후쿠시마 오염수",
   },
 ];
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7ac15304..c0e906ae 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -5,7 +5,7 @@ import { useSetRecoilState } from "recoil";
 import { getMainBubbleChart } from "@/apis";
 import BubbleChart from "@/components/organisms/Home/BubbleChart";
 import DiscussedTopics from "@/components/organisms/Home/DiscussedTopics";
-import { LoginTopic } from "@/components/organisms/Home/LoginTopic";
+// 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";
@@ -33,7 +33,7 @@ const Home = () => {
     <DragContainer>
       <BubbleChart />
       {/* 여러가지 메인에 들어갈 organism들 */}
-      {!localStorage.getItem("accessToken") ? <MainTopic /> : <LoginTopic />}
+      {!localStorage.getItem("accessToken") ? <MainTopic /> : ""}
       <MainContent />
       <MainCommunity />
       <DiscussedTopics />
diff --git a/src/types/index.ts b/src/types/index.ts
index 4330e1fb..8f9bf6cf 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -122,6 +122,14 @@ export interface ArticleDataProps {
   type: string;
   url: string;
 } // 좋아요 수 넣기
+export interface ArticleData1Props {
+  id: number;
+  url: string;
+  title: string;
+  imgUrl: string;
+  type: string;
+  pubDate: string;
+} // 좋아요 수 넣기
 
 export interface ArticleItemProps {
   title: string;