Merge branch 'develop' into feat/#83/mypage-api

kusitms-28th-Meetup-E · Nov 23, 2023 · 0ce853f · 0ce853f
2 parents 8433f8a + a26ad9c
commit 0ce853f
Show file tree

Hide file tree

Showing 33 changed files with 719 additions and 155 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,115 @@ 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;
+};
+
+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/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>
   );