[고재성] Sprint9

components/Header/Header.tsx

@@ -9,7 +9,7 @@ export default function Header() {
         <Image src={Logo} alt="logo" width={128} height={48} />
       </Link>
       <div className="grow flex">
-        <Link href="/board">
+        <Link href="/boards">
           <p className="text-lg text-primaryColor mr-4 font-bold">자유게시판</p>
         </Link>
         <Link href="/items">

components/boards/ArticleCard.tsx

@@ -0,0 +1,46 @@
+import { Article } from "@/@types/api";
+import Image from "next/image";
+import Medal from "@/public/ic_medal.png";
+import Heart from "@/public/heart.png";
+import { formatDate } from "@/utils/dateformat";
+
+export default function ArticleCard({ article }: { article: Article }) {
+  const formattedDate = formatDate(new Date(article.createdAt));
+  return (
+    <div className="w-[400px] bg-coolGray-50 px-10 rounded-[8px]">
+      <div className="w-[120px] h-[30px] bg-primaryColor flex justify-center items-center rounded-b-[32px] p-2 gap-1">
+        <Image src={Medal} width={20} height={20} alt="medal" />
+        <p className="text-white">Best</p>
+      </div>
+      <div className="h-[100px] flex justify-between my-4 relative">
+        <p className="w-[240px] font-semibold text-lg mb-5">{article.title}</p>
+        <div className="w-[80px] relative">
+          {article.image ? (
+            <Image
+              src={article.image}
+              alt="thumbnail"
+              fill
+              className="object-fit"
+            />
+          ) : null}
+        </div>
+      </div>
+      <div className="flex justify-between text-sm  text-coolGray-600">
+        <div className="flex gap-2 pb-5">
+          <p>{article.writer.nickname}</p>
+          <div className="flex gap-1">
+            <Image
+              src={Heart}
+              width={14}
+              height={14}
+              alt="heart"
+              className="h-[16px]"
+            />
+            <p>{article.likeCount}</p>
+          </div>
+        </div>
+        <p>{formattedDate}</p>
+      </div>
+    </div>
+  );
+}

components/boards/BestArticle.tsx

@@ -0,0 +1,15 @@
+import { Article, ArticleListResponse } from "@/@types/api";
+import ArticleCard from "@/components/boards/ArticleCard";
+
+export default function BestArticle({ articles }: { articles: Article[] }) {
+  return (
+    <div>
+      <h1 className="text-xl font-bold mb-5">베스트 게시글</h1>
+      <div className="flex gap-5">
+        {articles.slice(0, 3).map((article) => (
+          <ArticleCard key={article.id} article={article} />
+        ))}
+      </div>
+    </div>
+  );
+}

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    domains: ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com"],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

pages/boards/index.tsx

@@ -0,0 +1,38 @@
+import axios from "axios";
+import { Article } from "@/@types/api";
+import BestArticle from "@/components/boards/BestArticle";
+
+export async function getStaticProps() {
+  try {
+    const API_URL = "https://panda-market-api.vercel.app/articles";
+    const query = {
+      orderBy: "like",
+    };
+
+    const res = await axios.get(API_URL, { params: query });
+    const articles: Article[] = res.data.list;
+
+    return {
+      props: {
+        articles,
+      },
+    };
+  } catch (error) {
+    console.error("API 요청 중 에러 발생:", error);
+    return {
+      props: {
+        articles: [],
+      },
+    };
+  }
+}
+
+export default function Board({ articles }: { articles: Article[] }) {
+  return (
+    <div>
+      <div className="w-[1200px] mx-auto mt-5">
+        <BestArticle articles={articles} />
+      </div>
+    </div>
+  );
+}

utils/dateformat.tsx

@@ -0,0 +1,9 @@
+export function formatDate(date: Date): string {
+  return date
+    .toLocaleDateString("ko-KR", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+    .replace(/(\.\s*)$/, ""); // 마지막 마침표 제거
+}