Merge pull request #18 from hyundai-autoever-first-project-team3/post…

…detailapi

PostdetailAPI연동

src/api/postdetail.js

@@ -0,0 +1,18 @@
+// import client from "./client";
+import client from "./client";
+
+// TIL 글 목록 조회
+// export const getTIL = async ({ pageNumber }) => {
+//   return await client.get(`/api/tils?page=${pageNumber}`);
+// };
+
+// TIL 글 상세 조회
+export const getTILDetail = async ({ tilId }) => {
+  console.log(tilId);
+  return await client.get(`/api/tils/${tilId}`);
+};
+
+// export const getLikeCount = async ({ cc }) => {
+//   console.log(cc);
+//   return await client.get(`/api/tils/${cc}`);
+// };

src/components/postdetail/Footer.jsx

@@ -1,20 +1,15 @@
 import React from "react";
-
 import { Button } from "@mui/material";
 
-function Footer() {
+const Footer = ({ nickname, profileImage, intro }) => {
   return (
     <div>
       <div className="flex flex-row justify-between items-center my-20 h-32 ">
         <div className="flex flex-row items-center">
-          <img
-            className="size-32 rounded-full"
-            src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e"
-            alt=""
-          />
+          <img className="size-32 rounded-full" src={profileImage} alt="" />
           <div className="flex flex-col px-4">
-            <div className="text-2xl font-bold">고채린</div>
-            <div className="text-lg">나는 개발자다</div>
+            <div className="text-2xl font-bold">{nickname}</div>
+            <div className="text-lg">{intro}데이터가 없다</div>
           </div>
         </div>
         <Button
@@ -27,6 +22,6 @@ function Footer() {
       </div>
     </div>
   );
-}
+};
 
 export default Footer;

src/components/postdetail/InfoBar.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Button } from "@mui/material";
 import FavoriteIcon from "@mui/icons-material/Favorite";
+import { useAuth } from "../../hooks/useAuth";
+
 
 const InfoBar = ({
   id,
@@ -17,9 +19,9 @@ const InfoBar = ({
       <div className="flex justify-between items-center">
         <div>
           <span className="font-bold" style={{ marginRight: "1rem" }}>
-            {}
+            {writerNickname}
           </span>
-          <span>{createdAt}</span>
+          <span>{formattedDate}</span>
         </div>
         <div>
           {/* 로그인 여부에 따라 버튼 노출 달라짐 */}
@@ -28,12 +30,13 @@ const InfoBar = ({
             <Button variant="outlined">수정</Button>
           </div>
           <Button
+            size="medium"
             variant="outlined"
             color="#eee"
             startIcon={<FavoriteIcon sx={{ color: "#F20789" }} />}
             sx={{ borderRadius: "1rem" }}
           >
-            101
+            {likeCount}
           </Button>
         </div>
       </div>

src/components/postdetail/PostComment.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const PostComment = () => {
+  return (
+    <div>
+      <div className="flex flex-col justify-items-start my-8">
+        <div className="flex flex-row items-center mb-2 ">
+          <img
+            className="size-16 rounded-full"
+            src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e"
+            alt=""
+          />
+          <div className="flex flex-col px-4">
+            <div className="text-lg font-semibold ">고채린</div>
+            <div className="text-md ">2024년 10월 20일</div>
+          </div>
+        </div>
+        <div className="text-xl">
+          블로그 글 정말 잘 읽었습니다.글을 통해 많은 정보를 얻을 수 있었고
+          앞으로도 좋은 글 많이 기대하겠습니다!
+        </div>
+
+        <hr className="my-4" />
+      </div>
+    </div>
+  );
+};
+
+export default PostComment;

src/pages/PostDetailPage.jsx

@@ -8,11 +8,14 @@ import Footer from "../components/postdetail/Footer";
 import { Tag } from "@mui/icons-material";
 import { setCookie } from "../api/cookie";
 import { getTILDetail } from "../api/main";
+import { getLikeCount, getlikeCount } from "../api/postdetail";
 import { useParams } from "react-router-dom";
+import PostComment from "../components/postdetail/PostComment";
 import MDEditor from "@uiw/react-md-editor/nohighlight";
 
 const PostDetailPage = () => {
   const [postsDetail, setPostsDetail] = React.useState(null);
+
   const { postId } = useParams("postId");
 
   // 날짜 가공
@@ -26,17 +29,21 @@ const PostDetailPage = () => {
   );
 
   useEffect(() => {
-    getTILDetail({ tilId: postId }).then((res) => setPostsDetail(res.data.til));
+    getTILDetail({ tilId: postId }).then((res) => setPostsDetail(res.data));
   }, [postId]);
 
   return (
     <>
       <Header />
       <PageContainer className="xl:px-[250px] lg:px-[100px] md:px-5 sm:px-3">
         <h1 className="text-5xl font-extrabold mb-8 mt-10 lg:mt-20">
-          {postsDetail?.title}
+          {postsDetail?.til.title}
         </h1>
-        <InfoBar createdAt={formattedDate} />
+        <InfoBar
+          updatedAt={postsDetail?.til.updatedAt}
+          likeCount={postsDetail?.likeCounts}
+          writerNickname={postsDetail?.memberWriterDto.nickname}
+        />
         <div className="tagwrap">
           {postsDetail?.site && (
             <Chip
@@ -72,10 +79,21 @@ const PostDetailPage = () => {
             style={{ whiteSpace: "pre-wrap" }}
           />
         </div>
-        <Footer />
+        <Footer
+          nickname={postsDetail?.memberWriterDto.nickname}
+          intro={postsDetail?.memberWriterDto.intro}
+          profileImage={postsDetail?.memberWriterDto.profileImage}
+        />
         <div className="flex items-center justify-center w-full my-10">
           <Pagination count={10} color="success" />
         </div>
+        <div className="mt-12">
+          <PostComment />
+          <PostComment />
+          <PostComment />
+          <PostComment />
+          <PostComment />
+        </div>
       </PageContainer>
     </>
   );