article 페이지 완료(아마도..)

Author: yewonlee1211

components/ArticleItem.js

@@ -1,12 +1,19 @@
 import Image from "next/image";
 import styles from "./ArticleItem.module.css";
 import Hearts from "./Hearts";
+import { useRouter } from "next/router";
 
 export default function ArticleItem({ article }) {
-  console.log(article);
+  const router = useRouter();
   const updatedAt = article.updatedAt.split("T")[0];
+
   return (
-    <div className={styles.article}>
+    <div
+      className={styles.article}
+      onClick={() => {
+        router.push(`/article/${article.id}`);
+      }}
+    >
       <div className={styles.content}>
         <div className={styles.title}>{article.title}</div>
         <Image src={"/default.png"} alt="이미지" width={48} height={48} />

components/ArticleItem.module.css

@@ -8,6 +8,8 @@
   gap: 16px;
 
   border-bottom: var(--Cool-Gray-200, #e5e7eb) solid 1px;
+
+  cursor: pointer;
 }
 
 .content {

components/BestArticleSection.js

@@ -4,14 +4,22 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import styles from "./BestArticleSection.module.css";
 import Hearts from "./Hearts";
+import { useRouter } from "next/router";
 
 function BestArticle({ article }) {
+  const router = useRouter();
+
   if (!article) {
     return <div>로딩 중...</div>;
   }
 
   return (
-    <div className={styles.item}>
+    <div
+      className={styles.item}
+      onClick={() => {
+        router.push(`/article/${article.id}`);
+      }}
+    >
       <div className={styles.bestMark}>
         <Image
           src={"/ic_medal.svg"}

components/BestArticleSection.module.css

@@ -29,6 +29,8 @@
 
   border-radius: 8px;
   background: var(--Cool-Gray-50, #f9fafb);
+
+  cursor: pointer;
 }
 
 .bestMark {

components/Hearts.js

@@ -48,6 +48,8 @@ export default function Hearts({
   }
 
   const handleHeartBtn = (e) => {
+    e.preventDefault();
+
     // 로그인 안하면 좋아요 이용 불가
     if (!userId) {
       alert("좋아요 기능은 로그인 후 이용할 수 있습니다.");

components/IdArticleContent.js

@@ -2,22 +2,24 @@ import Image from "next/image";
 import styles from "./IdArticleContent.module.css";
 import IcHeart from "@/public/ic_heart.svg";
 
-export default function IdArticleContent() {
+export default function IdArticleContent({ data }) {
+  console.log(data);
+
   return (
     <div className={styles.articleContent}>
       <div className={styles.header}>
         <div className={styles.titleHeader}>
-          <div className={styles.title}>{`title`}</div>
+          <div className={styles.title}>{data.title}</div>
           <div className={styles.dropOption}>{`drop option`}</div>
         </div>
         <div className={styles.info}>
           <div className={styles.user}>
-            <Image />
+            {/* <Image /> */}
             <div className={styles.nickname}>{`user name`}</div>
             <div className={styles.date}>{`date`}</div>
           </div>
           <div className={styles.heart}>
-            <Image className={styles.heartIc} src={IcHeart} />
+            {/* <Image className={styles.heartIc} src={IcHeart} /> */}
             <div className={styles.heartCount}>{`heart count`}</div>
           </div>
         </div>

pages/article/[id].js

@@ -2,12 +2,43 @@ import IdArticleContent from "@/components/IdArticleContent";
 import CommentInput from "@/components/CommentInput";
 import CommentList from "@/components/CommentList";
 import CustomButtonSquare from "@/components/CustomButtonSquare";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import axios from "axios";
 
 export default function ArticleId() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [article, setArticle] = useState({});
+  const router = useRouter();
+  const { id } = router.query;
+
+  useEffect(() => {
+    async function getArticleById(id) {
+      setIsLoading(true);
+      if (id) {
+        try {
+          const res = await axios.get(`http://localhost:5000/article/${id}`);
+          setArticle(res.data);
+          console.log(res.data);
+        } catch (e) {
+          console.error(e);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    getArticleById(id);
+  }, [id]);
+
+  if (isLoading) {
+    return <div>로딩 중...</div>;
+  }
+
   return (
     <>
       <div>
-        <IdArticleContent />
+        <IdArticleContent data={article} />
         <CommentInput />
         <CommentList />
       </div>