Merge pull request #91 from kusitms-28th-Meetup-E/feat/#88/commentAPI

Feat/#88/comment api
kusitms-28th-Meetup-E · Nov 23, 2023 · 3c38fcc · 3c38fcc
2 parents dae6ecc + 980bd41
commit 3c38fcc
Show file tree

Hide file tree

Showing 28 changed files with 496 additions and 119 deletions.
diff --git 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,7 +181,100 @@ 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;
+};
+
+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/atoms/toast/index.tsx 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
@@ -1,17 +1,79 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
+import { useSetRecoilState, useRecoilValue } from "recoil";
+
+import { getDeleteSubcribe, getSubcribe, getactiveSubcribe } 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);
+    }
   };
+
+  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/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
@@ -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
@@ -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
@@ -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/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/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/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
@@ -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
@@ -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) => {