feat: 마이페이지 카드 이동 추가

hyundai-autoever-first-project-team3 · Oct 24, 2024 · b1b4e52 · b1b4e52
1 parent 0226cdb
commit b1b4e52
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 19 deletions.
diff --git a/src/api/mypage.js b/src/api/mypage.js
@@ -20,3 +20,12 @@ export const getLikeTILs = async ({ pageSize }) => {
     },
   });
 };
+
+// 통계 조회
+export const getStatistics = async ({ pageSize }) => {
+  return await client.get(`/api/mypage/statistics`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
diff --git a/src/components/mypage/MyCard.jsx b/src/components/mypage/MyCard.jsx
@@ -1,6 +1,14 @@
 import React from "react";
 
-const MyCard = ({ id, title, content, createdAt, likeCount, commentCount }) => {
+const MyCard = ({
+  id,
+  title,
+  content,
+  createdAt,
+  likeCount,
+  commentCount,
+  onClick,
+}) => {
   // 날짜 가공
   const formattedDate = new Date(createdAt).toLocaleDateString("ko-KR", {
     year: "numeric",
@@ -12,6 +20,7 @@ const MyCard = ({ id, title, content, createdAt, likeCount, commentCount }) => {
     <div
       className="flex flex-col justify-between min-h-40 h-full shadow-md rounded-md p-4 border hover:bg-gray-100 hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 gap-5"
       id={id}
+      onClick={onClick}
     >
       <div className="text-xl font-semibold">{title}</div>
       <div className="text-base text-gray-8 lg:min-h-[100px]">{content}</div>

diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
@@ -17,8 +17,10 @@ import { Button, Chip } from "@mui/material";
 import characterImg from "../images/main-character.png";
 import Header from "../components/common/Header";
 import { getLikeTILs, getMyTILs } from "../api/mypage";
+import { useNavigate } from "react-router-dom";
 
 const MyPage = () => {
+  const navigate = useNavigate();
   const [selectedTab, setSelectedTab] = useState("write");
   const [myPosts, setMyPosts] = useState([]);
   const [likedPosts, setLikedPosts] = useState([]);
@@ -49,6 +51,7 @@ const MyPage = () => {
                 commentCount={item.commentCount}
                 likeCount={item.likeCount}
                 createdAt={item.createdAt}
+                onClick={() => navigate(`/posts/${item.tilId}`)}
               />
             ))}
           </div>
@@ -63,6 +66,7 @@ const MyPage = () => {
                 commentCount={item.commentCount}
                 likeCount={item.likeCount}
                 createdAt={item.createdAt}
+                onClick={() => navigate(`/posts/${item.tilId}`)}
               />
             ))}
           </div>

diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
@@ -11,11 +11,18 @@ import { getTILDetail } from "../api/main";
 import { useParams } from "react-router-dom";
 
 const PostDetailPage = () => {
-  const [token, setToken] = React.useState("");
   const [postsDetail, setPostsDetail] = React.useState(null);
   const { postId } = useParams("postId");
 
-  console.log(postsDetail);
+  // 날짜 가공
+  const formattedDate = new Date(postsDetail?.createdAt).toLocaleDateString(
+    "ko-KR",
+    {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }
+  );
 
   useEffect(() => {
     getTILDetail({ tilId: postId }).then((res) => setPostsDetail(res.data.til));
@@ -28,23 +35,35 @@ const PostDetailPage = () => {
         <h1 className="text-5xl font-extrabold mb-8 mt-10 lg:mt-20">
           {postsDetail?.title}
         </h1>
-        <InfoBar createdAt={postsDetail?.createdAt} />
+        <InfoBar createdAt={formattedDate} />
         <div className="tagwrap">
-          <Chip
-            icon={<Tag />}
-            // label="DFS"
-            label={postsDetail?.tag}
-            variant="outlined"
-            color="success"
-            className="m-1 my-2"
-          />
-          <Chip
-            icon={<Tag />}
-            label="BFS"
-            variant="outlined"
-            color="success"
-            className="m-1 my-2"
-          />
+          {postsDetail?.site && (
+            <Chip
+              icon={<Tag />}
+              label={postsDetail?.site}
+              variant="outlined"
+              color="success"
+              className="m-1 my-2"
+            />
+          )}
+          {postsDetail?.language && (
+            <Chip
+              icon={<Tag />}
+              label={postsDetail?.language}
+              variant="outlined"
+              color="success"
+              className="m-1 my-2"
+            />
+          )}
+          {postsDetail?.algorithm && (
+            <Chip
+              icon={<Tag />}
+              label={postsDetail?.algorithm}
+              variant="outlined"
+              color="success"
+              className="m-1 my-2"
+            />
+          )}
         </div>
         <div className="mt-10">
           <span className="text-lg">{postsDetail?.content}</span>