From 4b06d031878b89677c8bfe085ca6b015261ec88f Mon Sep 17 00:00:00 2001 From: miyoung12 Date: Thu, 16 Nov 2023 04:00:19 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B5=AC=EB=8F=85,=ED=8C=94=EB=A1=9C=EC=9A=B0?= =?UTF-8?q?=20api=20=EC=B6=94=EA=B0=80/date-fns=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/ new-portal/Category.jsx | 8 ++--- src/component/ new-portal/Myitem.jsx | 12 ++++--- src/component/ new-portal/Mylist.jsx | 16 +++++----- src/component/ new-portal/Profile.jsx | 15 ++++++--- src/page/new-portal/Mypage.jsx | 43 ++++++++++++++++---------- 5 files changed, 55 insertions(+), 39 deletions(-) diff --git a/src/component/ new-portal/Category.jsx b/src/component/ new-portal/Category.jsx index 23c6773..924a69c 100644 --- 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 index f257e0a..cebb774 100644 --- 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 (
@@ -27,7 +29,9 @@ const Myitem = ({
{/* {createAt || "Loading..."} */} - {`${month}월 ${day}일`} + {/* {`${month}월 ${day}일`} */} + {/* {eventDate} */} + {createAt}
{ 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 index 0bd4862..0d7b0ea 100644 --- 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 (
@@ -23,10 +29,9 @@ const Profile = ({ nickname, imageUrl, following }) => { >
-
팔로워 {following}
- {following} -
동영상
-
게시글
+
팔로워 {followerCount}
+
동영상 {videoCount}
+
게시글 {normalCount}
diff --git a/src/page/new-portal/Mypage.jsx b/src/page/new-portal/Mypage.jsx index 394279a..30ce25d 100644 --- 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,7 +29,8 @@ 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}`, { @@ -34,21 +38,24 @@ const Mypage = () => { }) .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} />
-
- - {/* */} -
-
+
+ + {/* */} +
+