[고재성] Sprint9

@types/api.d.ts

@@ -0,0 +1,15 @@
+export interface Article {
+  updatedAt: Date;
+  createdAt: Date;
+  likeCount: number;
+  writer: { nickname: string; id: number };
+  image: string;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export interface ArticleListResponse {
+  totalCount: number;
+  list: Article[];
+}

components/Header/Header.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import Image from "next/image";
+import Logo from "@/public/logo.png";
+
+export default function Header() {
+  return (
+    <header className="flex justify-between items-center px-20 py-2 gap-10 border-b-2 bg-white">
+      <Link href="/">
+        <Image src={Logo} alt="logo" width={128} height={48} />
+      </Link>
+      <div className="grow flex">
+        <Link href="/boards">
+          <p className="text-lg text-primaryColor mr-4 font-bold">자유게시판</p>
+        </Link>
+        <Link href="/items">
+          <p className="text-lg text-coolGray-600 mr-4 font-bold">중고마켓</p>
+        </Link>
+      </div>
+      <Link href="/login">
+        <p className="bg-primaryColor hover:bg-blue-400 px-4 py-3 text-white rounded-lg">
+          로그인
+        </p>
+      </Link>
+    </header>
+  );
+}

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;