+
+
+ {article.title}
+
+ {article.image && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {article.writer.nickname}
+
+
+
+ {formattedDate}
+
+
+
+
+
+
+ {article.likeCount}
+
+
+
+
+ );
+};
+
+export default Article;
diff --git a/src/components/BestArticle.tsx b/src/components/BestArticle.tsx
new file mode 100644
index 00000000..fc973b51
--- /dev/null
+++ b/src/components/BestArticle.tsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+import React from "react";
+import { IoMdHeartEmpty } from "react-icons/io";
+
+type Props = {
+ article: {
+ id: number;
+ title: string;
+ content: string;
+ image: string;
+ likeCount: number;
+ createdAt: string;
+ updatedAt: string;
+ writer: {
+ nickname: string;
+ id: number;
+ };
+ };
+};
+
+const BestArticle = ({ article }: Props) => {
+ const formattedDate = new Date(article.createdAt)
+ .toLocaleDateString("ko-KR", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ })
+ .replace(/\.$/, "");
+
+ return (
+