From b1b4e5206403dbbd19746912dca69052948b6a13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 24 Oct 2024 17:39:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=B9=B4=EB=93=9C=20=EC=9D=B4=EB=8F=99=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mypage.js                |  9 ++++++
 src/components/mypage/MyCard.jsx | 11 ++++++-
 src/pages/MyPage.jsx             |  4 +++
 src/pages/PostDetailPage.jsx     | 55 +++++++++++++++++++++-----------
 4 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/api/mypage.js b/src/api/mypage.js
index 9abafa6..7bff450 100644
--- 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
index a4d5a1b..9c509e0 100644
--- 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
index 2d03342..02ced6f 100644
--- 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
index a34fb34..734c199 100644
--- 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>