feat: 자유게시판 베스트 게시글 구현

- 미디어 쿼리 적용
- api 적용
- CSS 관련 일부 적용

next.config.js

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+        pathname: "/Sprint_Mission/user/**",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;

src/apis/apis.ts

@@ -1,4 +1,4 @@
-import { StringObj, getArticlesRes, GetArticlesParams } from "./apis.type";
+import { StringObj, GetArticlesRes, GetArticlesParams } from "./apis.type";
 
 const BASE_URL = "https://panda-market-api.vercel.app/";
 
@@ -17,7 +17,7 @@ export async function getArticles({
   pageSize = 10,
   orderBy = "recent",
   keyword,
-}: GetArticlesParams): Promise<getArticlesRes> {
+}: GetArticlesParams): Promise<GetArticlesRes> {
   const url = new URL(PATH.ARTICLE, BASE_URL);
   const paramObj: StringObj = {
     page: String(page),

src/apis/apis.type.ts

@@ -1,19 +1,18 @@
 export type StringObj = Record<string, string>;
 
-export type OrderByType = "recent" | "favorite";
-
-interface GetListParams {
+interface GetListParams<ItemOrder> {
   page: number;
   pageSize: number;
-  orderBy: OrderByType;
+  orderBy: ItemOrder;
   keyword?: string;
 }
 interface GetListRes<ItemProps> {
   totalCount: number;
   list: ItemProps[];
 }
 
-interface ArticleProps {
+export type ArticleOrderType = "recent" | "like";
+export interface ArticleProps {
   id: number;
   title: string;
   content: string;
@@ -26,5 +25,5 @@ interface ArticleProps {
     nickname: string;
   };
 }
-export type GetArticlesParams = GetListParams;
-export type getArticlesRes = GetListRes<ArticleProps>;
+export type GetArticlesParams = GetListParams<ArticleOrderType>;
+export type GetArticlesRes = GetListRes<ArticleProps>;

src/components/pages/boards/BestItems.module.css

@@ -0,0 +1,34 @@
+.section {
+  width: 1200px;
+}
+@media (max-width: 1199px) {
+  .section {
+    width: 100%;
+  }
+}
+
+.head {
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: var(--size-xl);
+  font-weight: bold;
+}
+
+.body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+@media (max-width: 1199px) {
+  .body {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+}
+@media (max-width: 767px) {
+  .body {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

src/components/pages/boards/BestItems.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { getArticles } from "@/apis/apis";
+import { GetArticlesParams, GetArticlesRes } from "@/apis/apis.type";
+import { useQuery } from "@/hooks/useQuery";
+import BestItem from "./componnets/BestItem";
+import styles from "./BestItems.module.css";
+
+const pageSizeTable = { PC: 3, TABLET: 2, MOBILE: 1 };
+
+export default function BestItems() {
+  const media = useMediaQuery();
+  const [paramObj, setParamObj] = useState<GetArticlesParams>({
+    page: 1,
+    pageSize: pageSizeTable[media],
+    orderBy: "like",
+  });
+  const { isLoading, error, data } = useQuery<
+    GetArticlesParams,
+    GetArticlesRes
+  >(getArticles, paramObj);
+
+  useEffect(() => {
+    setParamObj((prevObj) => ({
+      ...prevObj,
+      pageSize: pageSizeTable[media],
+    }));
+  }, [media]);
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.head}>
+        <h2 className={styles.title}>베스트 게시글</h2>
+      </div>
+      {!isLoading && !error && data && (
+        <div className={styles.body}>
+          {data.list.map((item) => (
+            <BestItem key={item.id} data={item} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

src/components/pages/boards/componnets/BestItem.module.css

@@ -0,0 +1,44 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.imageWrapper {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  border: 1px solid var(--gray-200);
+}
+
+.image {
+  object-fit: contain;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  font-size: var(--size-md);
+}
+
+.price {
+  font-size: var(--size-lg);
+  font-weight: bold;
+}
+
+.like {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--size-xs);
+}
+
+.likeIcon {
+  width: 16px;
+  height: 16px;
+}

src/components/pages/boards/componnets/BestItem.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import Image from "next/image";
+import heartIcon from "#/icons/heart_inactive.svg";
+import styles from "./BestItem.module.css";
+import { ArticleProps } from "@/apis/apis.type";
+
+interface ItemProps {
+  data: ArticleProps;
+}
+
+export default function BestItem({ data }: ItemProps) {
+  const {
+    id,
+    title,
+    writer: { nickname },
+    updatedAt,
+    image,
+    likeCount,
+  } = data;
+  return (
+    <Link className={styles.item} href={`/board/${id}`}>
+      <div className={styles.imageWrapper}>
+        <Image
+          className={styles.image}
+          src={image ? image : ""}
+          alt={"이미지"}
+          fill
+        />
+      </div>
+      <div className={styles.content}>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.price}>{updatedAt}</span>
+        <div className={styles.like}>
+          <Image className={styles.likeIcon} src={heartIcon} alt="좋아요 수" />
+          <span>{likeCount}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+export type MediaType = "PC" | "TABLET" | "MOBILE";
+
+function checkMedia(width: number): MediaType {
+  if (width >= 1200) return "PC";
+  if (width >= 768) return "TABLET";
+  return "MOBILE";
+}
+
+export function useMediaQuery() {
+  const [media, setMedia] = useState<MediaType>("PC");
+
+  useEffect(() => {
+    setMedia(checkMedia(window.innerWidth));
+
+    const handleWindowResize = () => {
+      setMedia(checkMedia(window.innerWidth));
+    };
+
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return media;
+}

src/hooks/useQuery.ts

@@ -27,7 +27,7 @@ export function useQuery<Params extends object, Response extends object>(
     [fetchFunc]
   );
 
-  const update = wrappedFunc(paramObj);
+  const update = () => wrappedFunc(paramObj);
 
   useEffect(() => {
     wrappedFunc(paramObj);

src/pages/_app.tsx

@@ -1,10 +1,10 @@
 import type { AppProps } from "next/app";
 import localFont from "next/font/local";
 import Head from "next/head";
+import Layout from "@/components/layout/Layout";
 import "@/styles/reset.css";
 import "@/styles/variable.css";
 import "@/styles/global.css";
-import Layout from "@/components/layout/Layout";
 
 export const pretendard = localFont({
   src: "../../public/fonts/PretendardVariable.woff2",

src/pages/boards.module.css

@@ -0,0 +1,21 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  align-items: center;
+  margin-top: 70px;
+  padding: 24px 0 48px;
+  color: var(--gray-800);
+}
+@media (max-width: 1199px) {
+  .main {
+    gap: 32px;
+    padding: 24px 24px 48px;
+  }
+}
+@media (max-width: 767px) {
+  .main {
+    gap: 24px;
+    padding: 16px 16px 48px;
+  }
+}

src/pages/boards.tsx

@@ -1,12 +1,16 @@
 import Head from "next/head";
+import BestItems from "@/components/pages/boards/BestItems";
+import styles from "./boards.module.css";
 
 export default function Boards() {
   return (
     <>
       <Head>
         <title>자유게시판 - 판다마켓</title>
       </Head>
-      <main>자유게시판</main>
+      <main className={styles.main}>
+        <BestItems />
+      </main>
     </>
   );
 }