[김태훈] sprint9

components/ArticlesList.module.css

@@ -0,0 +1,47 @@
+.ArticlesList {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
+.Article {
+  display: flex;
+  justify-content: space-between;
+  margin: 16px;
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+.image {
+  position: relative;
+  z-index: 0;
+  width: 72px;
+  height: 72px;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-left: 24px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .ArticlesList {
+    width: 343px;
+  }
+}
+
+@media (min-width: 768px) {
+  .ArticlesList {
+    width: 696px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .ArticlesList {
+    width: 1200px;
+  }
+}

components/ArticlesList.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Link from "next/link";
+import styles from "./ArticlesList.module.css";
+import Image from "next/image";
+import profile from "./assets/images/ui/ic_profile.svg";
+import heart from "./assets/images/icons/ic_heart.svg";
+
+interface Article {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  id: number;
+  title: string;
+  image: string;
+  content: string;
+}
+
+interface ArticlesListProps {
+  articles: Article[];
+}
+
+const ArticlesList: React.FC<ArticlesListProps> = ({ articles }) => {
+  if (!articles || articles.length === 0) {
+    return <div>No articles available</div>;
+  }
+
+  return (
+    <div className={styles.ArticlesList}>
+      {articles.map((article) => (
+        <div key={article.id}>
+          <div className={styles.Article}>
+            <h3>{article.title}</h3>
+            <div className={styles.image}>
+              <Image fill src={article.image} alt={article.image} />
+            </div>
+          </div>
+          <div className={styles.meta}>
+            <div>
+              <Image width={24} height={24} src={profile} alt={profile} />
+              <span> {article.writer.nickname} </span>
+              <span> {new Date(article.updatedAt).toLocaleDateString()} </span>
+            </div>
+            <div>
+              <Image width={24} height={24} src={heart} alt={heart} />
+              <span> {article.likeCount}+</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ArticlesList;

components/BestArticles.module.css

@@ -0,0 +1,62 @@
+@media (min-width: 375px) and (max-width: 767px) {
+  .BestArticles {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 768px) {
+  .BestArticles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .title {
+    margin: 16px 24px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .BestArticles {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  margin: 16px 24px;
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+.image {
+  position: relative;
+  z-index: 0;
+  width: 72px;
+  height: 72px;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.metaItem {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.metaItem span {
+  margin-left: 4px;
+}
+
+.bestbadge {
+  margin-left: 24px;
+}

components/BestArticles.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import styles from "./BestArticles.module.css";
+import Image from "next/image";
+import bestbadge from "./assets/images/ui/best_badge.svg";
+import axios from "@/lib/axios";
+import heart from "./assets/images/icons/ic_heart.svg";
+
+interface Article {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  id: number;
+  title: string;
+  image: string;
+  content: string;
+}
+
+const BestArticles: React.FC = () => {
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [pageSize, setPageSize] = useState<number>(1);
+
+  useEffect(() => {
+    const updatePageSize = () => {
+      const width = window.innerWidth;
+      if (width >= 375 && width <= 767) {
+        setPageSize(1);
+      } else if (width >= 768 && width < 1280) {
+        setPageSize(2);
+      } else if (width >= 1280) {
+        setPageSize(3);
+      }
+    };
+
+    updatePageSize();
+    window.addEventListener("resize", updatePageSize);
+
+    return () => {
+      window.removeEventListener("resize", updatePageSize);
+    };
+  }, []);
+
+  useEffect(() => {
+    const getBestArticles = async () => {
+      try {
+        const response = await axios.get(`articles?orderBy=like`);
+        setArticles(response.data.list);
+      } catch (error) {
+        console.error("Error fetching best articles:", error);
+      }
+    };
+
+    getBestArticles();
+  }, [pageSize]);
+
+  const bestArticles = Array.isArray(articles)
+    ? [...articles].sort((a, b) => b.likeCount - a.likeCount).slice(0, pageSize)
+    : [];
+
+  return (
+    <div className={styles.BestArticles}>
+      {bestArticles.map((article) => (
+        <div key={article.id}>
+          <Image
+            className={styles.bestbadge}
+            width={102}
+            height={30}
+            src={bestbadge}
+            alt={bestbadge}
+          />
+          <div className={styles.title}>
+            <h3>{article.title}</h3>
+            <div className={styles.image}>
+              <Image fill src={article.image} alt={article.image} />
+            </div>
+          </div>
+          <div className={styles.meta}>
+            <div className={styles.metaItem}>
+              <span> {article.writer.nickname} </span>
+              <Image width={16} height={16} src={heart} alt={heart} />
+              <span> {article.likeCount}+ </span>
+            </div>
+            <div className={styles.metaItem}>
+              <span> {new Date(article.createdAt).toLocaleDateString()} </span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BestArticles;

components/CreateArticleButton.module.css

@@ -0,0 +1,23 @@
+.button {
+  background-color: var(--blue);
+  color: #fff;
+  padding: 11.5px 23px;
+  border-radius: 8px;
+  font-size: 16px;
+  width: 88px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  cursor: pointer;
+  margin: 16px;
+}
+
+.button:hover {
+  background-color: var(--blue-hover);
+}
+
+.button:focus {
+  background-color: var(--blue-focus);
+}

components/CreateArticleButton.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./CreateArticleButton.module.css";
+import Link from "next/link";
+
+const CreateArticleButton = () => {
+  return (
+    <Link href={"/"} className={styles.button}>
+      글쓰기
+    </Link>
+  );
+};
+
+export default CreateArticleButton;

components/Dropdown.module.css

@@ -0,0 +1,36 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownButton {
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.dropdownMenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: block;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 0;
+  font-size: 14px;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.dropdownItem {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.dropdownItem:hover {
+  background-color: #f1f1f1;
+}