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/4] 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 ( + + + <> + + +
{message}
+ + + ); +}; + +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(false); + const [num, setNum] = useState(0); + const setOnToast = useSetRecoilState(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 ( 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) => ( { .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" > -
{data.topic}
- +
{data.issueTitle}
+ -

{data.subscribeCount}명

이 구독하고 있어요 +

80명

이 구독하고 있어요 ); 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(null); const [text, setText] = useState(""); const [registerBtn, setRegisterBtn] = useState(true); + const [commentdata, setCommentData] = useState([]); const onChange = (e: React.ChangeEvent) => { 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 (
- 24개의 댓글이 있어요 + {commentdata.length}개의 댓글이 있어요
{ value={text} onChange={onChange} placeholder="댓글을 입력해주세요." + //onKeyDown={handleOnKeyPress} />
- +
); 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 (
@@ -31,7 +43,7 @@ export const CommunityPreview = () => {
- {envirData.map((item, idx) => ( + {similiarData?.map((item, idx) => ( { .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 }) => {
- {data.item.map((el) => { + {data?.map((el) => { return ; })}
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 ( <> - - - - - - - {window.innerWidth > 800 ? ( - <> - - - - ) : ( - <> - - - - )} - - {Show ? : ""} + {Toast ? : ""} + {!loading ? ( + <> + + + + + + + {window.innerWidth > 800 ? ( + <> + + + + ) : ( + <> + + + + )} + + {Show ? : ""} + + ) : ( + + )} ); }; 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 9dc4d2b8e3e39a935bf3129a6ad221646392425b Mon Sep 17 00:00:00 2001 From: chamny20 Date: Thu, 23 Nov 2023 23:42:46 +0900 Subject: [PATCH 2/4] hotifx --- src/apis/index.ts | 15 +++++ src/components/atoms/tag/index.tsx | 8 ++- src/components/atoms/tag/style.ts | 2 +- .../molecules/main/communitybox/index.tsx | 14 ++-- .../molecules/main/contentbox/index.tsx | 19 +++--- .../organisms/Home/DiscussedTopics.tsx | 6 ++ src/components/organisms/Home/MainContent.tsx | 16 +++-- src/components/organisms/Home/MainTopic.tsx | 17 +++-- src/dummy/topicData.ts | 8 +-- src/pages/Home.tsx | 67 ++++++++++++++++++- src/recoil/atoms/index.ts | 29 ++++++++ src/types/index.ts | 61 +++++++++++++++++ 12 files changed, 229 insertions(+), 33 deletions(-) diff --git a/src/apis/index.ts b/src/apis/index.ts index 7ea3c18f..dd6bfd9e 100644 --- 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 index 03af414e..5d3c5fce 100644 --- 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 {category}; }; -export const KeywordTag = ({ category, children }: { category: string; children: string }) => { +export const KeywordTag = ({ + category, + children, +}: { + category: string | undefined; + children: string | undefined; +}) => { return {children}; }; diff --git a/src/components/atoms/tag/style.ts b/src/components/atoms/tag/style.ts index 1989fd13..da04fa5e 100644 --- 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 index 486dfc54..13bec960 100644 --- 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 ( { }, }} > - {mainCommunityData.map((item, idx) => ( + {communityData.map((item, idx) => (
- {item.topic} + {item.subject} {item.keyword}
@@ -153,7 +157,7 @@ export const CommunityBox = () => {
인용한 콘텐츠
-
{item.quotText}
+
{item.contentsTitle}
diff --git a/src/components/molecules/main/contentbox/index.tsx b/src/components/molecules/main/contentbox/index.tsx index 0dbbd970..e80ec2d3 100644 --- a/src/components/molecules/main/contentbox/index.tsx +++ b/src/components/molecules/main/contentbox/index.tsx @@ -2,13 +2,14 @@ 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)", }; @@ -16,7 +17,7 @@ export const ContentBox = ({ data, category }: { data: ContentDataProps; categor const [hover, setHover] = useState(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)} > -
{data.content}
+
{data?.title}
- +
- {data.keyword[1]} + {data?.keyword}
-

{data.type}

-
{data.title}
+

{data?.type}

+
{data?.title}
diff --git a/src/components/organisms/Home/DiscussedTopics.tsx b/src/components/organisms/Home/DiscussedTopics.tsx index 28549279..5fcf5183 100644 --- 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 (
diff --git a/src/components/organisms/Home/MainContent.tsx b/src/components/organisms/Home/MainContent.tsx index cf18991e..5282480b 100644 --- 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 ( @@ -22,15 +28,15 @@ export const MainContent = () => {
- {contentData.slice(1).map((data, idx) => ( + {contentsData.slice(1).map((data, idx) => ( ))}
diff --git a/src/components/organisms/Home/MainTopic.tsx b/src/components/organisms/Home/MainTopic.tsx index e0808fc1..3cd4ad1a 100644 --- 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 ( @@ -17,13 +22,13 @@ export const MainTopic = () => { </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 index 1efca6e2..f29ff63a 100644 --- 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 index 7ac15304..f34e5c25 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -2,7 +2,13 @@ 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"; @@ -10,10 +16,26 @@ 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 /> diff --git a/src/recoil/atoms/index.ts b/src/recoil/atoms/index.ts index 69c077f1..e2d8fe4e 100644 --- a/src/recoil/atoms/index.ts +++ b/src/recoil/atoms/index.ts @@ -4,8 +4,12 @@ import { mySubjectData } from "@/dummy/mySubjectData"; import { ArticleDataProps, BubbleGraphProps, + CommunityMainProps, + ContentsMainProps, DetailTitleProps, + TopicMainProps, lineGraphProps, + mainTopicBottom, packBubbleProps, } from "@/types"; @@ -126,3 +130,28 @@ export const topDateState = atom({ key: "src/atoms/auth.tsx-topDateState ", default: "", }); + +export const TalkingTopicState = atom<mainTopicBottom[]>({ + key: "src/atoms/auth.tsx-TalkingTopicState", + default: [], +}); + +export const TalkingHoverState = atom({ + key: "src/atoms/auth.tsx-TalkingHoverState", + default: [], +}); + +export const MainTopState = atom<TopicMainProps[]>({ + key: "src/atoms/auth.tsx-MainTopState", + default: [], +}); + +export const ContentsPopularState = atom<ContentsMainProps[]>({ + key: "src/atoms/auth.tsx-ContentsPopularState", + default: [], +}); + +export const PopularCommunityState = atom<CommunityMainProps[]>({ + key: "src/atoms/auth.tsx-PopularCommunityState", + default: [], +}); diff --git a/src/types/index.ts b/src/types/index.ts index 13d2c075..dd81f9dd 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -53,6 +53,9 @@ export interface discussedTopicProps { title: string; subTitles: string[]; idx: number; + // issueList: string[]; + // topicId: number; + // topicTitle: string; } []; @@ -256,3 +259,61 @@ export interface BubbleGraphProps { z: number; name: string; } + +export interface FirstTopicProps { + topicId: number; + topicTitle: string; + issueList: IssueListProps[]; +} + +export interface IssueListProps { + id: number; + issueTitle: string; +} + +export interface CommunityMainProps { + id: number; + 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; +} + +export interface ContentsMainProps { + contents_id?: number; + description?: string; + imgUrl?: string; + issueTitle?: string; + keyword?: string; + pubDate?: string; + title?: string; + topic?: string; + type?: string; + url?: string; + category?: string; + contents?: string; + link?: string; +} + +export interface mainTopicBottom { + issueList: string[]; + topicId: number; + topicTitle: string; +} +[]; + +export interface TopicMainProps { + title: string; + subscribeCount: number; + imgUrl: string; + category: 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 3/4] 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>
- 사회 이슈에 대한 의견을

함께 나눠요

+ 사회 이슈에 대한 생각을

함께 나눠요

 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 (
-

주간 인기 주제 top5

-

이번 주 커뮤니티에서 활발하게 논의된 주제예요

+

인기 있는 사회 이슈 top5

+

광장에서 가장 인기 있는 사회 이슈에요.

{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 = () => { <>
-

{!DetailPageKeyword ? name : DetailPageKeyword}

가 더 궁금하다면? +

{!DetailPageKeyword ? name : DetailPageKeyword}

(이)가 더 궁금하다면?
- +
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 = () => {
-
{detailTitleData.title}
는{" "} +
{detailTitleData.title}
(은)는{" "}
2023년 {topDate}
가장 많이 검색됐어요.
@@ -29,7 +29,7 @@ const SimilarTopic = ({ data }: { data: SimilarTopicProps[] }) => { })}
-

다른 주제도 둘러보세요

+

다른 사회 이슈도 둘러보세요.

> { {(keywordYoutubeData.length || YoutubeData.length) && ( <>
- +
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 ( @@ -22,7 +22,16 @@ const DiscussedTopics = () => { ))}
-
주제를 추가하고 싶어요.
+
+ window.open( + "https://docs.google.com/forms/d/e/1FAIpQLSfaG6BKFpiQfP8VOkjeAKfhgcobB4_A3uYp1gvG8J9R7vvD5w/viewform" + ) + } + > + 주제를 추가하고 싶어요. +
); 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 (
- + <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; From a26ad9c9452d4eab64359e49d040ed11fb3c98e7 Mon Sep 17 00:00:00 2001 From: hoyyChoi <110888511+hoyyChoi@users.noreply.github.com> Date: Thu, 23 Nov 2023 23:54:13 +0900 Subject: [PATCH 4/4] feat : api --- src/components/organisms/Home/LoginTopic.tsx | 6 +++--- src/components/organisms/Home/MainContent.tsx | 2 -- src/recoil/atoms/index.ts | 2 -- src/types/index.ts | 3 +-- 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/organisms/Home/LoginTopic.tsx b/src/components/organisms/Home/LoginTopic.tsx index be0c9bcf..38e56254 100644 --- a/src/components/organisms/Home/LoginTopic.tsx +++ b/src/components/organisms/Home/LoginTopic.tsx @@ -5,9 +5,9 @@ import "slick-carousel/slick/slick-theme.css"; import { SeeMore } from "@/components/atoms/more"; import { Title } from "@/components/atoms/title"; -import { TopicCarousel } from "@/components/molecules/carousel/TopicCarousel"; +// import { TopicCarousel } from "@/components/molecules/carousel/TopicCarousel"; import { CategoryFilter } from "@/components/molecules/categoryFilter"; -import { MySubscribeData } from "@/dummy/MySubscribeData"; +// import { MySubscribeData } from "@/dummy/MySubscribeData"; export const LoginTopic = () => { // const [arr, setArr] = useState([]); @@ -36,7 +36,7 @@ export const LoginTopic = () => { <div className="inner"> <CategoryFilter />{" "} </div> - <TopicCarousel data={MySubscribeData} /> + {/* <TopicCarousel data={MySubscribeData} /> */} <div className="inner"> <SeeMore text="관심 콘텐츠 더보기" diff --git a/src/components/organisms/Home/MainContent.tsx b/src/components/organisms/Home/MainContent.tsx index 7991591d..5282480b 100644 --- a/src/components/organisms/Home/MainContent.tsx +++ b/src/components/organisms/Home/MainContent.tsx @@ -9,11 +9,9 @@ import { ContentsPopularState } from "@/recoil/atoms"; import { Inner } from "@/style/global"; export const MainContent = () => { - // const firstData = contentData[0]; const title = "지금 사람들이\n가장 많이 본 콘텐츠"; - const contentsData = useRecoilValue(ContentsPopularState); console.log("dfdf", contentsData); const firstData = contentsData[0]; diff --git a/src/recoil/atoms/index.ts b/src/recoil/atoms/index.ts index e132f2a3..ee6de618 100644 --- a/src/recoil/atoms/index.ts +++ b/src/recoil/atoms/index.ts @@ -131,7 +131,6 @@ export const topDateState = atom({ default: "", }); - export const ToastState = atom({ // 주제뱔 상세페이지 접속시, 쿼리스트링의 영역값을 저장 key: "src/atoms/auth.tsx-ToastState ", @@ -166,5 +165,4 @@ export const ContentsPopularState = atom<ContentsMainProps[]>({ export const PopularCommunityState = atom<CommunityMainProps[]>({ key: "src/atoms/auth.tsx-PopularCommunityState", default: [], - }); diff --git a/src/types/index.ts b/src/types/index.ts index f697d43d..ea11fee1 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -281,12 +281,11 @@ export interface BubbleGraphProps { name: string; } - export interface CommentProps { topicId: number; communityId: number; talk?: string; - +} export interface FirstTopicProps { topicId: number; topicTitle: string;