Merge pull request #13 from hyundai-autoever-first-project-team3/chae…

…lin3

Chaelin3

src/api/main.js

@@ -5,3 +5,9 @@ import client from "./client";
 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}`);
+};

src/components/common/Card.jsx

@@ -10,7 +10,6 @@ const Card = ({
   createdAt,
   writerNickname,
   likeCount = 0,
-  onClick,
 }) => {
   // 날짜 가공
   const formattedDate = new Date(createdAt).toLocaleDateString("ko-KR", {
@@ -23,7 +22,6 @@ const Card = ({
     <div
       id={id}
       className="flex flex-col w-full h-full px-2 min-w-[320px] max-w-[720px] shadow-md border hover:bg-gray-100 hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1"
-      onClick={onClick}
     >
       <img
         src="https://velog.velcdn.com/images/k-svelte-master/post/43c86caf-fed8-4ab2-a98a-990b565efe0a/image.gif

src/components/postdetail/InfoBar.jsx

@@ -1,28 +1,49 @@
 import React from "react";
-import { Button, IconButton } from "@mui/material";
+import { Button } from "@mui/material";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 
-function InfoBar() {
+const InfoBar = ({
+  id,
+  createdAt,
+  updatedAt,
+  writerNickname,
+  likeCount = 0,
+  onClick,
+}) => {
+  // 날짜 가공
+  const formattedDate = new Date(createdAt).toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
   return (
     <div>
       <div className="flex justify-between items-center">
         <div>
           <span className="font-bold" style={{ marginRight: "1rem" }}>
             고채린
           </span>
-          <span>2024년 10월 21일</span>
+          <span>{createdAt}</span>
+        </div>
+        <div>
+          {/* 로그인 여부에 따라 버튼 노출 달라짐 */}
+          <div className="flex">
+            <Button variant="outlined">삭제</Button>
+            <Button variant="outlined">수정</Button>
+          </div>
+          <Button
+            variant="outlined"
+            color="#eee"
+            startIcon={<FavoriteIcon sx={{ color: "#F20789" }} />}
+            sx={{ borderRadius: "1rem" }}
+          >
+            101
+          </Button>
         </div>
-        <Button
-          variant="outlined"
-          color="#eee"
-          startIcon={<FavoriteIcon sx={{ color: "#F20789" }} />}
-          sx={{ borderRadius: "1rem" }}
-        >
-          101
-        </Button>
       </div>
     </div>
   );
-}
+};
 
 export default InfoBar;

src/pages/PostDetailPage.jsx

@@ -1,25 +1,39 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Header from "../components/common/Header";
 import InfoBar from "../components/postdetail/InfoBar";
 import PageContainer from "../components/common/PageContainer";
 import Pagination from "@mui/material/Pagination";
 import Chip from "@mui/material/Chip";
 import Footer from "../components/postdetail/Footer";
 import { Tag } from "@mui/icons-material";
+import { setCookie } from "../api/cookie";
+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);
+
+  useEffect(() => {
+    getTILDetail({ tilId: postId }).then((res) => setPostsDetail(res.data.til));
+  }, [postId]);
+
   return (
     <div>
       <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">
-          글제목 Lorem ipsum dolor sit amet.
+          {postsDetail?.title}
         </h1>
-        <InfoBar />
+        <InfoBar createdAt={postsDetail?.createdAt} />
         <div className="tagwrap">
           <Chip
             icon={<Tag />}
-            label="DFS"
+            // label="DFS"
+            label={postsDetail?.tag}
             variant="outlined"
             color="success"
             className="m-1 my-2"
@@ -33,18 +47,11 @@ const PostDetailPage = () => {
           />
         </div>
         <div className="mt-10">
-          <span className="text-lg">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo at aut
-            dolor quidem quam iste impedit ipsa nihil consequuntur deserunt
-            eaque, quae ex minima saepe? Explicabo natus quibusdam debitis
-            consequatur. Lorem ipsum dolor sit amet consectetur adipisicing
-            elit. Illo at aut dolor quidem quam iste impedit ipsa nihil
-            consequuntur deserunt eaque, quae ex minima saepe? Explicabo natus
-            quibusdam debitis consequatur.
-          </span>
+          <span className="text-lg">{postsDetail?.content}</span>
 
           <img
             src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e"
+            // src="{postDetail?.img}"
             alt=""
           />
         </div>