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/Filter.jsx b/src/component/ new-portal/Filter.jsx index 7b03a83..b4ab64e 100644 --- a/src/component/ new-portal/Filter.jsx +++ b/src/component/ new-portal/Filter.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; const Filter = ({ onFilterChange }) => { const [activeFilter, setActiveFilter] = useState("전체"); @@ -12,7 +12,7 @@ const Filter = ({ onFilterChange }) => { }; return ( -
+
-
+
); }; diff --git a/src/component/ new-portal/Myitem.jsx b/src/component/ new-portal/Myitem.jsx index f257e0a..1fdcbe1 100644 --- a/src/component/ new-portal/Myitem.jsx +++ b/src/component/ new-portal/Myitem.jsx @@ -11,55 +11,50 @@ const Myitem = ({ thumbnailUrl, view, }) => { - const createDate = new Date(createAt); - const month = createDate.getMonth() + 1; // getMonth()는 0부터 시작하므로 1을 더해줍니다. - const day = createDate.getDate(); - return ( -
-
-
-
-
- - -
-
-
- {/* {createAt || "Loading..."} */} - {`${month}월 ${day}일`} -
-
- eyeicon - {view} -
-
+ //
+ //{/*
*/} +
+
+
+ + +
+
+
+ {createAt}
-
+
thumbnail + {view}
-
-
-
- {title || "Loading..."} -
-
-
+
+
+
+ thumbnail +
+
+
+
+ {title || "Loading..."}
+
+ //
+ //
); }; diff --git a/src/component/ new-portal/Mylist.jsx b/src/component/ new-portal/Mylist.jsx index 656d1b9..bad640a 100644 --- 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,26 +43,20 @@ 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]); return (
-
+
{items.map((item) => (
{ 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..d847587 100644 --- a/src/component/ new-portal/Profile.jsx +++ b/src/component/ new-portal/Profile.jsx @@ -1,8 +1,14 @@ import React from "react"; -const Profile = ({ nickname, imageUrl, following }) => { +const Profile = ({ + nickname, + imageUrl, + videoCount, + followerCount, + normalCount, +}) => { return ( -
+
{ >
-
팔로워 {following}
- {following} -
동영상
-
게시글
+
팔로워 {followerCount}
+
동영상 {videoCount}
+
게시글 {normalCount}
diff --git a/src/component/ new-portal/VideoList.jsx b/src/component/ new-portal/VideoList.jsx index b0e9ae6..d14ff5e 100644 --- a/src/component/ new-portal/VideoList.jsx +++ b/src/component/ new-portal/VideoList.jsx @@ -66,7 +66,7 @@ const VideoList = ({ division, filter }) => { return (
-
+
{items.map((item) => (
{ return (
-
- {" "} - {/* 이렇게 설정하면 현재는 위치가 맞지 않으나, 모든 페이지에 header와 sidebar 때문에 padding을 설정해 주어야 할 것 같습니다!*/} +
{/* */}
-
- -
+
diff --git a/src/page/new-portal/Mypage.jsx b/src/page/new-portal/Mypage.jsx index 394279a..6e7d780 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,47 +38,49 @@ const Mypage = () => { }) .then((response) => { setData(response.data.data); - setId(response.id); - console.log(response.data); + setUser_id(response.data.data.id); + console.log(user_id); + console.log(response.data.data.id); if (response.status === 200) { + setData(response.data.data); 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); + 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]); return ( -
-
-
- -
-
- - {/* */} -
-
-
- -
+ //
+
+
+ +
+ {/*
*/} +
+
+
+ + {/*
*/}
+ //
); };