[나지원] sprint9

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# VS Code
+.vscode

components/boards/ArticleImage.module.css

@@ -0,0 +1,19 @@
+.container {
+  width: 72px;
+  height: 72px;
+  padding: 12px;
+  border-radius: 8px;
+  border: 0.75px solid var(--gray200);
+  background-color: #ffffff;
+  flex: 0 0 auto;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.image {
+  object-fit: contain;
+}

components/boards/ArticleImage.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import Image from "next/image";
+import Container from "../layout/Container";
+import styles from "./ArticleImage.module.css";
+import defaultImg from "@/public/img_default.svg";
+
+interface ImageProps {
+  src: string | null;
+  alt: string;
+}
+
+const ArticleImage = ({ src, alt }: ImageProps) => {
+  const [imageSrc, setImageSrc] = useState(src ?? defaultImg);
+
+  const handleImageError = () => {
+    setImageSrc(defaultImg);
+  };
+
+  return (
+    <Container className={styles.container}>
+      <div className={styles.wrapper}>
+        <Image
+          fill
+          src={imageSrc}
+          alt={alt}
+          className={styles.image}
+          onError={handleImageError}
+        />
+      </div>
+    </Container>
+  );
+};
+
+export default ArticleImage;

components/boards/BestBoard.module.css

@@ -0,0 +1,50 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: var(--gray50);
+  padding: 0 24px 16px;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  gap: 40px;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.625rem;
+  color: var(--gray800);
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nickname {
+  color: var(--gray600);
+}
+
+.date {
+  color: var(--gray400);
+}
+
+@media screen and (min-width: 1200px) {
+  .content {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    margin-bottom: 18px;
+  }
+}

components/boards/BestBoard.tsx

@@ -0,0 +1,28 @@
+import Badge from "../ui/Badge";
+import Container from "../layout/Container";
+import ArticleImage from "./ArticleImage";
+import { ArticleProps } from "@/types/articleTypes";
+import styles from "./BestBoard.module.css";
+import LikeCount from "../ui/LikeCount";
+import { formatDate } from "@/lib/formatDate";
+
+const BestBoard = ({ article }: { article: ArticleProps }) => {
+  return (
+    <Container className={styles.container}>
+      <Badge />
+      <div className={styles.content}>
+        {article.title}
+        <ArticleImage src={article.image} alt={`${article.id} 이미지`} />
+      </div>
+      <div className={styles.info}>
+        <div className={styles.user}>
+          <div className={styles.nickname}>{article.writer.nickname}</div>
+          <LikeCount likeCount={article.likeCount} />
+        </div>
+        <div className={styles.date}>{formatDate(article.createdAt)}</div>
+      </div>
+    </Container>
+  );
+};
+
+export default BestBoard;

components/boards/BestBoards.module.css

@@ -0,0 +1,34 @@
+.wrapper {
+  padding-bottom: 24px;
+}
+
+.wrapper h2 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.625rem;
+  color: var(--gray900);
+  margin-bottom: 16px;
+}
+
+.container {
+  display: flex;
+  gap: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .wrapper h2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .wrapper {
+    padding-bottom: 40px;
+  }
+
+  .container {
+    gap: 24px;
+  }
+}

components/boards/BestBoards.tsx

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from "react";
+import BestBoard from "./BestBoard";
+import Container from "../layout/Container";
+import useResize from "@/hooks/useResize";
+import { fetchData } from "@/lib/fetchData";
+import { ArticleProps } from "@/types/articleTypes";
+import styles from "./BestBoards.module.css";
+
+const getPageSize = (width: number) => {
+  if (width < 768) return 1;
+  if (width < 1200) return 2;
+
+  return 3;
+};
+
+const BestBoards = () => {
+  const [articles, setArticles] = useState([]);
+  const [pageSize, setPageSize] = useState<number>();
+  const viewportWidth = useResize();
+  const BASE_URL = "https://panda-market-api.vercel.app/articles";
+
+  const handleLoad = useCallback(async (size: number) => {
+    const { list } = await fetchData(BASE_URL, {
+      query: { pageSize: size, orderBy: "like" },
+    });
+    setArticles(list);
+  }, []);
+
+  useEffect(() => {
+    if (!viewportWidth) return;
+
+    const nextPageSize = getPageSize(viewportWidth);
+    if (nextPageSize !== pageSize) {
+      setPageSize(nextPageSize);
+      handleLoad(nextPageSize);
+    }
+  }, [viewportWidth, handleLoad, pageSize]);
+
+  return (
+    <section className={styles.wrapper}>
+      <h2>베스트 게시글</h2>
+      <Container className={styles.container}>
+        {articles.map((article: ArticleProps) => (
+          <BestBoard key={article.id} article={article} />
+        ))}
+      </Container>
+    </section>
+  );
+};
+
+export default BestBoards;

components/boards/Board.module.css

@@ -0,0 +1,56 @@
+.container {
+  background-color: #fcfcfc;
+  border-bottom: 1px solid var(--gray200);
+  padding-bottom: 24px;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.625rem;
+  color: var(--gray800);
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.authorInfo {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.authorInfo img {
+  width: 24px;
+  height: 24px;
+}
+
+.authorInfo span {
+  color: var(--gray600);
+}
+
+.authorInfo time {
+  color: var(--gray400);
+}
+
+.like img {
+  width: 24px;
+  height: 24px;
+}
+
+.like span {
+  font-size: 1rem;
+  line-height: 1.625rem;
+}
+
+@media screen and (min-width: 768px) {
+  .content {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    margin-bottom: 18px;
+  }
+}

components/boards/Board.tsx

@@ -0,0 +1,27 @@
+import { ArticleProps } from "@/types/articleTypes";
+import Container from "../layout/Container";
+import styles from "./Board.module.css";
+import ArticleImage from "./ArticleImage";
+import LikeCount from "../ui/LikeCount";
+import AuthorInfo from "../ui/AuthorInfo";
+
+const Board = ({ board }: { board: ArticleProps }) => {
+  return (
+    <Container className={styles.container}>
+      <div className={styles.content}>
+        {board.title}
+        <ArticleImage src={board.image} alt={`${board.id} 이미지`} />
+      </div>
+      <div className={styles.info}>
+        <AuthorInfo
+          className={styles.authorInfo}
+          nickname={board.writer.nickname}
+          date={board.createdAt}
+        />
+        <LikeCount className={styles.like} likeCount={board.likeCount} />
+      </div>
+    </Container>
+  );
+};
+
+export default Board;