Merge pull request #84 from Team-Port/(#79)fix/css-detail

(#79)fix/css detail
Team-Port · Nov 20, 2023 · 559975b · 559975b
2 parents dc885f2 + dc4aa9c
commit 559975b
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 96 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/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 (
-    <div className="fixed flex flex-col gap-[15px] z-20 bg-[#F5F5F7] w-full pt-[25px] ">
+    <div className="fixed flex flex-col gap-[15px] z-20 bg-[#F5F5F7] w-full sm:w-10/12 pt-[25px]">
       <div className="flex justify-start items-center ml-[10px]">
         <button className="flex gap-[55px]">
           <div
@@ -41,7 +41,7 @@ const Filter = ({ onFilterChange }) => {
           </div>
         </button>
       </div>
-      <div className="w-[1200px] h-[1px] bg-black"></div>
+      <div className="w-full h-[1px] bg-black"></div>
     </div>
   );
 };

diff --git 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 (
-    <div className="flex w-full h-full px-3">
-      <div className="w-full h-full ">
-        <div className="flex flex-col bg-white bg-opacity-75 rounded-[10px] gap-[10px]">
-          <div className="flex justify-between items-center px-[10px] mt-[10px]">
-            <div className="flex justify-center">
-              <Category category={category1} />
-              <Category category={category2} />
-            </div>
-            <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}일`}
-              </div>
-              <div className="flex justify-center text-center text-neutral-400 text-[15px] font-normal">
-                <img
-                  className="w-[16px] h-[16px] justify-center m-1"
-                  src="/asset/icon_eye.svg"
-                  alt="eyeicon"
-                />
-                {view}
-              </div>
-            </div>
+    // <div className="flex w-full h-full px-3">
+    //{/* <div className="w-full h-full "> */}
+    <div className="flex flex-col w-full h-full px-3 bg-white bg-opacity-75 rounded-[10px] gap-[10px]">
+      <div className="flex justify-between items-center px-[10px] mt-[10px]">
+        <div className="flex justify-center">
+          <Category category={category1} />
+          <Category category={category2} />
+        </div>
+        <div className="flex justify-between items-center gap-[10px]">
+          <div className="flex justify-center text-center text-neutral-400 text-[15px] font-normal">
+            {createAt}
           </div>
-          <div className="flex justify-center">
+          <div className="flex justify-center text-center text-neutral-400 text-[15px] font-normal">
             <img
-              className="mx-[40px] rounded-[10px] h-full w-[95%]"
-              src={thumbnailUrl}
-              alt="thumbnail"
+              className="w-[16px] h-[16px] justify-center m-1"
+              src="/asset/icon_eye.svg"
+              alt="eyeicon"
             />
+            {view}
           </div>
-          <div className="flex items-center pl-[20px] pb-[10px]">
-            <div className="flex flex-col justify-center">
-              <div className="text-black text-[20px] font-semibold line-clamp-1">
-                {title || "Loading..."}
-              </div>
-              <div
-                className="text-neutral-700 line-clamp-1 text-[17px] font-normal "
-                dangerouslySetInnerHTML={{ __html: summary }}
-              />
-            </div>
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <img
+          className="mx-[40px] rounded-[10px] h-full w-[95%]"
+          src={thumbnailUrl}
+          alt="thumbnail"
+        />
+      </div>
+      <div className="flex items-center pl-[20px] pb-[10px]">
+        <div className="flex flex-col justify-center">
+          <div className="text-black text-[20px] font-semibold line-clamp-1">
+            {title || "Loading..."}
           </div>
+          <div
+            className="text-neutral-700 line-clamp-1 text-[17px] font-normal "
+            dangerouslySetInnerHTML={{ __html: summary }}
+          />
         </div>
       </div>
     </div>
+    // </div>
+    // </div>
   );
 };
 

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,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 (
     <div className="w-full h-full">
-      <div className="grid grid-cols-3 grid-rows-3 gap-4 pt-[170px] pl-[20px] pr-[70px]">
+      <div className="grid grid-cols-3 grid-rows-3 gap-4 pt-[170px] px-[18px]">
         {items.map((item) => (
           <div
             key={item.id}
@@ -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,8 +1,14 @@
 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="fixed flex w-full h-[200px] gap-[50px] z-30">
       <div className="flex items-center ml-[20px] ">
         <img
           className="w-[150px] h-[150px] rounded-full object-cover m-0"
@@ -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/component/ new-portal/VideoList.jsx b/src/component/ new-portal/VideoList.jsx
@@ -66,7 +66,7 @@ const VideoList = ({ division, filter }) => {
 
   return (
     <div className="w-full h-full">
-      <div className="grid grid-cols-3 grid-rows-3 gap-4 pl-[20px] pr-[70px]">
+      <div className="grid grid-cols-3 grid-rows-3 gap-4 px-[18px]">
         {items.map((item) => (
           <Link to={`/new-portal/boards/${item.id}`}>
             <div

diff --git a/src/page/new-portal/Home.jsx b/src/page/new-portal/Home.jsx
@@ -24,18 +24,14 @@ const Home = () => {
 
   return (
     <div>
-      <div className="pl-[230px] pt-[85px] relative">
-        {" "}
-        {/* 이렇게 설정하면 현재는 위치가 맞지 않으나, 모든 페이지에 header와 sidebar 때문에 padding을 설정해 주어야 할 것 같습니다!*/}
+      <div className="pl-[215px] pt-[85px] relative">
         <div className="w-full h-full">
           <div className="flex px-4 z-20">
             <Filter onFilterChange={handleFilterChange} />
             {/* <VideoList videoItems={videoItems} display="list-h" /> */}
           </div>
           <div className="pt-[60px] mb-[30px]"></div>
-          <div className="">
-            <VideoList division={division} items={items} filter={filter} />
-          </div>
+          <VideoList division={division} items={items} filter={filter} />
         </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,55 +29,58 @@ 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);
+          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 (
-    <div>
-      <div className="pl-[230px] pt-[85px] relative">
-        <div className="flex flex-col">
-          <Profile
-            nickname={nickname}
-            imageUrl={imageUrl}
-            following={following}
-            user_id={user_id}
-          />
-          <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="">
-              <Mylist division={division} items={items} filter={filter} />
-            </div>
+    // <div>
+    <div className="pl-[215px] pt-[90px] relative">
+      <div className="flex flex-col">
+        <Profile
+          nickname={nickname}
+          imageUrl={imageUrl}
+          following={following}
+          videoCount={videoCount}
+          normalCount={normalCount}
+          followerCount={followerCount}
+        />
+        <div className="w-full h-full flex flex-col">
+          {/* <div className=""> */}
+          <div className="fixed w-full flex pt-[170px] px-4 z-20 bg-[#F5F5F7] ">
+            <Filter onFilterChange={handleFilterChange} />
           </div>
+          <div className="w-full pt-[60px] mb-[30px]"></div>
+          <Mylist division={division} items={items} filter={filter} />
+          {/* </div> */}
         </div>
       </div>
     </div>
+    // </div>
   );
 };