diff --git a/src/apis/index.ts b/src/apis/index.ts index e990927..f430260 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -292,3 +292,48 @@ export const getPopularContents = async () => { const res = await GwangjangAxios.get("/contents/contents/like"); return res; }; + +//내가 구독한 주제 +export const getMySubscribeData = async (accessToken: string) => { + const res = await GwangjangAxios.get("/member/subscribe", { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + return res; +}; + +//좋아요한 커뮤니티 글 +export const getMyLikeCommunityData = async (accessToken: string) => { + const res = await GwangjangAxios.get("/community/mypage", { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + return res; +}; + +//내가 쓴 커뮤니티 글 +export const getMyWriteCommunityData = async (accessToken: string) => { + const res = await GwangjangAxios.get("/community/mywrite", { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + return res; +}; + +export const postMyLikeContentsData = async (accessToken: string) => { + const res = await GwangjangAxios.post( + "/contents/my-page/like", + { + data: [], + }, + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ); + return res; +}; diff --git a/src/components/atoms/Loading/index.tsx b/src/components/atoms/Loading/index.tsx index 898884e..01f7276 100644 --- a/src/components/atoms/Loading/index.tsx +++ b/src/components/atoms/Loading/index.tsx @@ -4,8 +4,10 @@ import { LoadingBox } from "./style"; const Loading = () => { return ( -

잠시만 기다려주세요.

- +
+

잠시만 기다려주세요.

+ +
); }; diff --git a/src/components/atoms/Loading/style.ts b/src/components/atoms/Loading/style.ts index 7a45571..851d611 100644 --- a/src/components/atoms/Loading/style.ts +++ b/src/components/atoms/Loading/style.ts @@ -12,4 +12,18 @@ export const LoadingBox = styled.div` right: 0; margin: 0 auto; z-index: 9; + background: rgba(21, 21, 21, 0.7); + + .box { + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: space-evenly; + padding: 30px; + width: 300px; + border-radius: 30px; + height: 100px; + align-items: center; + background-color: white; + } `; diff --git a/src/components/atoms/profile/index.tsx b/src/components/atoms/profile/index.tsx index 9cf43fb..b8fe749 100644 --- a/src/components/atoms/profile/index.tsx +++ b/src/components/atoms/profile/index.tsx @@ -48,7 +48,6 @@ export const LongProfile = ({ nickname, profileImg, date }: ProfileProps) => { }; export const BigProfile = ({ nickname, profileImg, date }: ProfileProps) => { - profileImg = temp; const formattedDate = formatDate(date); return ( diff --git a/src/components/molecules/longTopicBox/index.tsx b/src/components/molecules/longTopicBox/index.tsx index b3016fc..a98b7b4 100644 --- a/src/components/molecules/longTopicBox/index.tsx +++ b/src/components/molecules/longTopicBox/index.tsx @@ -1,6 +1,6 @@ import bg from "@/assets/discussedTopic/topic1.png"; import { TopicTag } from "@/components/atoms/tag"; -import { ToptopicProps, SimilarTopicProps } from "@/types"; +import { SimilarTopicProps, ToptopicProps } from "@/types"; import { Container, Top, Bottom, Middle } from "./style"; diff --git a/src/components/molecules/mySlideItem/index.tsx b/src/components/molecules/mySlideItem/index.tsx index e3e65f6..369916c 100644 --- a/src/components/molecules/mySlideItem/index.tsx +++ b/src/components/molecules/mySlideItem/index.tsx @@ -1,10 +1,17 @@ +import { useRecoilValue } from "recoil"; + import { LikeBorderButton, QuotBorderButton } from "@/components/atoms/button"; import { TopicTag } from "@/components/atoms/tag"; -import { ArticleItemProps } from "@/types"; +import { myLikeContentsData } from "@/recoil/atoms"; +import { ContentsItemProps } from "@/types"; import { SlideWrapper } from "./style"; -export const MySlideItem = ({ data }: { data: ArticleItemProps }) => { +export const MySlideItem = ({ data }: { data: ContentsItemProps }) => { + const contentData = useRecoilValue(myLikeContentsData); + + console.log("contentData:", contentData); + return (
diff --git a/src/components/organisms/MyPage/MyContent.tsx b/src/components/organisms/MyPage/MyContent.tsx index 758bad5..bea8fd8 100644 --- a/src/components/organisms/MyPage/MyContent.tsx +++ b/src/components/organisms/MyPage/MyContent.tsx @@ -1,12 +1,15 @@ +import { useRecoilValue } from "recoil"; import styled from "styled-components"; import { MySlideItem } from "@/components/molecules/mySlideItem"; -import { articleData } from "@/dummy/articleData"; +import { myLikeContentsData } from "@/recoil/atoms"; export const MyContent = () => { + const contentsData = useRecoilValue(myLikeContentsData); + return ( - {articleData.map((item, idx) => ( + {contentsData.map((item, idx) => ( { + const myLike = useRecoilValue(myLikeData); + // console.log("s", myLike); + const myWrite = useRecoilValue(myWriteData); + + const selectedTab = useRecoilValue(selectedTabState); + + let data: (typeof myWrite)[number][] | (typeof myLike)[number][] = []; + + if (selectedTab === 0) { + data = myWrite; + console.log(data); + } else if (selectedTab === 2) { + data = myLike; + } + + console.log("데이터:", data); + return ( - {envirData.map((item, idx) => ( - + {data.map((item, idx) => ( + { const [isEditing, setIsEditing] = useState(false); + + const mySubData = useRecoilValue(mySubscribeTopicData); + console.log("ss", mySubData); const [newNickname, setNewNickname] = useState("기본값"); //닉네임 수정 시 @@ -98,7 +102,7 @@ export const MySideBox = () => {
구독한 사회이슈

사회이슈 키워드는 최대 3개까지 구독할 수 있어요.

- {MySubscribeData.map((item, idx) => { + {mySubData.map((item, idx) => { return (
{ const [windowWidth, setWindowWidth] = useState(window.innerWidth); const selectedTab = useRecoilValue(selectedTabState); + // + const setSubscribeData = useSetRecoilState(mySubscribeTopicData); + const setLikeData = useSetRecoilState(myLikeData); + const setLikeContents = useSetRecoilState(myLikeContentsData); + const setWriteData = useSetRecoilState(myWriteData); + useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); @@ -26,6 +44,48 @@ export const RealMyPage = () => { window.removeEventListener("resize", handleResize); }; }, []); + const accessToken = window.localStorage.getItem("accessToken"); + + useEffect(() => { + if (accessToken !== null) { + getMySubscribeData(accessToken) + .then((res) => { + // console.log(res.data.data.subscribeResList); + setSubscribeData(res.data.data.subscribeResList); + }) + .catch((err) => { + console.log(err); + }); + + // + getMyLikeCommunityData(accessToken) + .then((res) => { + // console.log(res.data); + setLikeData(res.data.data); + }) + .catch((err) => { + console.log(err); + }); + + postMyLikeContentsData(accessToken) + .then((res) => { + console.log(res.data); + setLikeContents(res.data.data); + }) + .catch((err) => { + console.log(err); + }); + + getMyWriteCommunityData(accessToken) + .then((res) => { + // console.log("11", res.data); + setWriteData(res.data.data); + }) + .catch((err) => { + console.log(err); + }); + } + }); return ( diff --git a/src/recoil/atoms/index.ts b/src/recoil/atoms/index.ts index ee6de61..c68602b 100644 --- a/src/recoil/atoms/index.ts +++ b/src/recoil/atoms/index.ts @@ -131,6 +131,23 @@ export const topDateState = atom({ default: "", }); +export const mySubscribeTopicData = atom({ + key: "src/atoms/auth.tsx-mySubscribeTopicData", + default: [], +}); + +export const myLikeData = atom({ + key: "src/atoms/auth.tsx-myLikeData", + default: [], +}); + +export const myLikeContentsData = atom({ + key: "src/atoms/auth.tsx-myLikeContentsData", + default: [], +}); + +export const myWriteData = atom({ + key: "src/atoms/auth.tsx-myWriteData", export const ToastState = atom({ // 주제뱔 상세페이지 접속시, 쿼리스트링의 영역값을 저장 key: "src/atoms/auth.tsx-ToastState ", diff --git a/src/types/index.ts b/src/types/index.ts index ea11fee..2032f9b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -281,6 +281,27 @@ export interface BubbleGraphProps { name: string; } +export interface SubscribeDataProps { + // + imgUrl: string; + issue: string; + issueId: number; + topic: string; +} + +export interface ContentsItemProps { + contents_id: number; + imgUrl: string; + title: string; + description: string; + type: string; + issueTitle: string; + keyword: string; + pubDate: string; + topic: string; + likeCount?: number; + quotCount?: number; + export interface CommentProps { topicId: number; communityId: number;