구독,팔로우 api 추가/date-fns 추가

Team-Port · Nov 15, 2023 · 4b06d03 · 4b06d03
1 parent 4828da5
commit 4b06d03
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 39 deletions.
diff --git a/src/component/ new-portal/Category.jsx b/src/component/ new-portal/Category.jsx
@@ -4,10 +4,10 @@ const Category = ({ category }) => {
     bgColor = "bg-slate-400";
     label = "ALL";
   } else if (category === "IT") {
-    bgColor = "bg-slate-400";
+    bgColor = "bg-sky-200";
     label = "IT";
   } else if (category === "DESIGN") {
-    bgColor = "bg-rose-200";
+    bgColor = "bg-pink-200";
     label = "Design";
   } else if (category === "DANCE") {
     bgColor = "bg-red-300";
@@ -16,8 +16,8 @@ const Category = ({ category }) => {
     bgColor = "bg-emerald-200";
     label = "Exercise";
   } else if (category === "LANGUAGE") {
-    bgColor = "bg-slate-300";
-    label = "Laguage";
+    bgColor = "bg-violet-300";
+    label = "Language";
   } else if (category === "SALES") {
     bgColor = "bg-amber-200";
     label = "Sales";

diff --git a/src/component/ new-portal/Myitem.jsx b/src/component/ new-portal/Myitem.jsx
@@ -7,13 +7,15 @@ const Myitem = ({
   summary,
   category1,
   category2,
+  // createAt,
+  // eventDate,
   createAt,
   thumbnailUrl,
   view,
 }) => {
-  const createDate = new Date(createAt);
-  const month = createDate.getMonth() + 1; // getMonth()는 0부터 시작하므로 1을 더해줍니다.
-  const day = createDate.getDate();
+  // const createDate = new Date(createAt);
+  // const month = createDate.getMonth() + 1; // getMonth()는 0부터 시작하므로 1을 더해줍니다.
+  // const day = createDate.getDate();
 
   return (
     <div className="flex w-full h-full px-3">
@@ -27,7 +29,9 @@ const Myitem = ({
             <div className="flex justify-between items-center gap-[10px]">
               <div className="flex justify-center text-center text-neutral-400 text-[15px] font-normal">
                 {/* {createAt || "Loading..."} */}
-                {`${month}월 ${day}일`}
+                {/* {`${month}월 ${day}일`} */}
+                {/* {eventDate} */}
+                {createAt}
               </div>
               <div className="flex justify-center text-center text-neutral-400 text-[15px] font-normal">
                 <img

diff --git a/src/component/ new-portal/Mylist.jsx b/src/component/ new-portal/Mylist.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import Myitem from "./Myitem";
 import axios from "axios";
 import { HOST_URL } from "../../lib/HostUrl";
+import { formatDistanceToNow } from "date-fns";
+import ko from "date-fns/locale/ko"; // 로케일 파일 불러오기
 
 const MyList = ({ division, filter }) => {
   const [imageUrl, setimageUrl] = useState(null);
@@ -23,7 +25,6 @@ const MyList = ({ division, filter }) => {
     } else if (division === "게시글") {
       apiUrl += "?division=NORMAL";
     }
-
     if (jwtToken) {
       axios
         .get(`${HOST_URL}/api/v1/boards/${userId}/result`, {
@@ -42,19 +43,13 @@ const MyList = ({ division, filter }) => {
                 (item) => item.division === "NORMAL"
               );
             }
-
             setItems(filteredItems);
             setVideoItems(filteredItems);
-            // setItems(response.data.data.content);
-            const createAt = new Date(response.data.data.createAt);
-            const month = createAt.getMonth() + 1; // getMonth()는 0부터 시작하므로 1을 더해줍니다.
-            const day = createAt.getDate();
-            setCreateAt(`${month}월 ${day}일`);
             console.log("게시글을 정상적으로 불러왔습니다.");
           }
         })
         .catch((error) => {
-          console.log("게시글을 불러오는데 실패했습니다.");
+          console.log("게시글을 불러오는데 실패했습니다.", error);
         });
     }
   }, [division, filter, userId]);
@@ -72,7 +67,10 @@ const MyList = ({ division, filter }) => {
               summary={item.summary}
               category1={item.category1}
               category2={item.category2}
-              createAt={item.createAt}
+              createAt={formatDistanceToNow(new Date(item.createAt), {
+                locale: ko,
+                addSuffix: true,
+              })}
               imageUrl={imageUrl}
               thumbnailUrl={item.thumbnailUrl}
               view={item.view}

diff --git a/src/component/ new-portal/Profile.jsx b/src/component/ new-portal/Profile.jsx
@@ -1,6 +1,12 @@
 import React from "react";
 
-const Profile = ({ nickname, imageUrl, following }) => {
+const Profile = ({
+  nickname,
+  imageUrl,
+  videoCount,
+  followerCount,
+  normalCount,
+}) => {
   return (
     <div className="fixed flex h-[200px] gap-[50px] z-30">
       <div className="flex items-center ml-[20px] ">
@@ -23,10 +29,9 @@ const Profile = ({ nickname, imageUrl, following }) => {
           ></img>
         </div>
         <div className="flex gap-[30px] text-xl text-zinc-500 mt-[5px]">
-          <div className="">팔로워 {following}</div>
-          {following}
-          <div className="">동영상</div>
-          <div className="">게시글</div>
+          <div className="">팔로워 {followerCount}</div>
+          <div className="">동영상 {videoCount}</div>
+          <div className="">게시글 {normalCount}</div>
         </div>
       </div>
     </div>

diff --git a/src/page/new-portal/Mypage.jsx b/src/page/new-portal/Mypage.jsx
@@ -13,6 +13,9 @@ const Mypage = () => {
   const [imageUrl, setimageUrl] = useState(null);
   const [nickname, setNickname] = useState(null);
   const [following, setFollowing] = useState(null);
+  const [videoCount, setVideoCount] = useState(null);
+  const [normalCount, setNormalCount] = useState(null);
+  const [followerCount, setFollowerCount] = useState(null);
   const [user_id, setUser_id] = useState("2");
   const [id, setId] = useState(null);
   const [division, setDivision] = useState("전체");
@@ -26,29 +29,33 @@ const Mypage = () => {
 
   useEffect(() => {
     const jwtToken = sessionStorage.getItem("jwtAuthToken");
-
+    // const user_id = sessionStorage.getItem("id");
+    // console.log(sessionStorage.id);
     if (jwtToken) {
       axios
         .get(`${HOST_URL}/api/v1/users/${user_id}`, {
           headers: { Authorization: `Bearer ${jwtToken}` },
         })
         .then((response) => {
           setData(response.data.data);
-          setId(response.id);
-          console.log(response.data);
+          // setId(response.data.data.id);
+          // console.log(id);
+          setUser_id(response.data.data.id);
+          console.log(user_id);
+          console.log(response.data.data.id);
           if (response.status === 200) {
-            setimageUrl(response.data.data.imageUrl);
-            setNickname(response.data.data.nickname);
-            setFollowing(response.data.data.following);
-            console.log("팔로워:", response.data.data.following);
-            console.log("닉네임:", response.data.data.nickname);
+            setData(response.data.data);
+            // setimageUrl(response.data.data.imageUrl);
+            // setNickname(response.data.data.nickname);
+            // setFollowing(response.data.data.following);
+            // setVideoCount(response.data.data.videoCount);
+            // setNormalCount(response.data.data.normalCount);
+            // setFollowerCount(response.data.data.followerCount);
             console.log("프로필을 정상적으로 불러왔습니다.");
           }
         })
         .catch((error) => {
-          console.log("프로필을 불러오는데 실패했습니다.");
-          console.log(error);
-          console.log(user_id);
+          console.log("프로필을 불러오는데 실패했습니다.", error);
         });
     }
   }, [user_id]);
@@ -60,15 +67,17 @@ const Mypage = () => {
             nickname={nickname}
             imageUrl={imageUrl}
             following={following}
-            user_id={user_id}
+            videoCount={videoCount}
+            normalCount={normalCount}
+            followerCount={followerCount}
           />
           <div className="w-full h-full">
-            <div className="fixed w-full flex pt-[170px] px-4 z-20 bg-[#F5F5F7]">
-              <Filter onFilterChange={handleFilterChange} />
-              {/* <Mylist videoItems={videoItems} display="list-h" /> */}
-            </div>
-            <div className="pt-[60px] mb-[30px]"></div>
             <div className="">
+              <div className="fixed w-full flex pt-[170px] px-4 z-20 bg-[#F5F5F7]">
+                <Filter onFilterChange={handleFilterChange} />
+                {/* <Mylist videoItems={videoItems} display="list-h" /> */}
+              </div>
+              <div className="pt-[60px] mb-[30px]"></div>
               <Mylist division={division} items={items} filter={filter} />
             </div>
           </div>