diff --git a/.gitignore b/.gitignore
index 8f322f0d8..0063cb110 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,10 @@
/node_modules
/.pnp
.pnp.js
+<<<<<<< HEAD
+.yarn/install-state.gz
+=======
+>>>>>>> upstream/Next.js-최윤석
# testing
/coverage
diff --git a/README.md b/README.md
index a75ac5248..78004c5ac 100644
--- a/README.md
+++ b/README.md
@@ -16,9 +16,11 @@ bun dev
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
diff --git a/components/BestPost.js b/components/BestPost.js
new file mode 100644
index 000000000..6123f9d86
--- /dev/null
+++ b/components/BestPost.js
@@ -0,0 +1,33 @@
+import styles from "@/components/BestPost.module.css";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
+import BestPostArticles from "./BestPostArticles";
+
+export default function BestPost() {
+ const [bestArticles, setBestArticles] = useState([]);
+
+ async function getBestArticles() {
+ try {
+ const res = await axios.get("articles?page=1&pageSize=3&orderBy=like");
+ const nextArticles = res.data.list ?? [];
+ setBestArticles(nextArticles);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ useEffect(() => {
+ getBestArticles();
+ }, []);
+
+ return (
+
+