Feat/#83/mypage api

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;
+};

src/components/atoms/Loading/index.tsx

@@ -4,8 +4,10 @@ import { LoadingBox } from "./style";
 const Loading = () => {
   return (
     <LoadingBox>
-      <h3>잠시만 기다려주세요.</h3>
-      <SyncLoader />
+      <div className="box">
+        <h3>잠시만 기다려주세요.</h3>
+        <SyncLoader />
+      </div>
     </LoadingBox>
   );
 };

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;
+  }
 `;

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 (

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";
 

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 (
     <SlideWrapper>
       <div className="slide-container">

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 (
     <MyContentWrapper>
-      {articleData.map((item, idx) => (
+      {contentsData.map((item, idx) => (
         <MySlideItem
           key={idx}
           data={item}

src/components/organisms/MyPage/MyPost.tsx

@@ -1,14 +1,33 @@
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 import { BigProfile } from "@/components/atoms/profile";
 import { MainCommunityBox } from "@/components/molecules/mainCommunityBox";
-import { envirData } from "@/dummy/AreaData";
+// import { envirData } from "@/dummy/AreaData";
+import { myLikeData, myWriteData, selectedTabState } from "@/recoil/atoms";
 
 export const MyPost = () => {
+  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 (
     <Container>
-      {envirData.map((item, idx) => (
-        <MyPostWrapper>
+      {data.map((item, idx) => (
+        <MyPostWrapper key={idx}>
           <BigProfile
             nickname={item.nickname}
             date={item.date}

src/components/organisms/MyPage/MySideBox.tsx

@@ -1,16 +1,20 @@
 import { useState } from "react";
 
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 import temp from "@/assets/main_logo.svg";
 import editNicknameImg from "@/assets/myPage/edit-pencil-nickname.svg";
 import editImg from "@/assets/myPage/edit-pencil.svg";
 import { TopTopicBox } from "@/components/molecules/longTopicBox";
 import { SideBox } from "@/components/molecules/sideBox";
-import { MySubscribeData } from "@/dummy/MySubscribeData";
+import { mySubscribeTopicData } from "@/recoil/atoms";
 
 export const MySideBox = () => {
   const [isEditing, setIsEditing] = useState(false);
+
+  const mySubData = useRecoilValue(mySubscribeTopicData);
+  console.log("ss", mySubData);
   const [newNickname, setNewNickname] = useState("기본값");
 
   //닉네임 수정 시
@@ -98,7 +102,7 @@ export const MySideBox = () => {
           <div className="subscribe-title">구독한 사회이슈</div>
           <p> 사회이슈 키워드는 최대 3개까지 구독할 수 있어요.</p>
           <div className="subscribe-topic">
-            {MySubscribeData.map((item, idx) => {
+            {mySubData.map((item, idx) => {
               return (
                 <div className="topic-wrapper">
                   <TopTopicBox

src/pages/RealMyPage.tsx

@@ -1,20 +1,38 @@
 import { useState, useEffect } from "react";
 
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
+import {
+  getMyLikeCommunityData,
+  getMySubscribeData,
+  getMyWriteCommunityData,
+  postMyLikeContentsData,
+} from "@/apis";
 import { ResponsiveSideBox } from "@/components/molecules/responsiveSideBox";
 import { MyContent } from "@/components/organisms/MyPage/MyContent";
 import { MyPageTitle } from "@/components/organisms/MyPage/MyPageTitle";
 import { MyPost } from "@/components/organisms/MyPage/MyPost";
 import { MySideBox } from "@/components/organisms/MyPage/MySideBox";
 import { MyStatus } from "@/components/organisms/MyPage/MyStatus";
-import { selectedTabState } from "@/recoil/atoms";
+import {
+  myLikeContentsData,
+  myLikeData,
+  mySubscribeTopicData,
+  myWriteData,
+  selectedTabState,
+} from "@/recoil/atoms";
 
 export const RealMyPage = () => {
   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 (
     <OutWrapper>

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 ",

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;