[김승석] Sprint9

src/components/board-best-list.module.css

@@ -4,6 +4,11 @@
   border-radius: 8px;
   padding: 0 24px;
   height: 170px;
+  transition: all 0.2s;
+}
+.board_best_box:hover {
+  background-color: #f3f4f6;
+  transform: translateY(-12px);
 }
 .board_best_box > a {
   position: relative;

src/components/board-list.module.css

@@ -2,6 +2,12 @@
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid #e5e7eb;
+  transition: all 0.2s;
+}
+.board_common_box:hover {
+  padding: 12px;
+  background-color: #f3f4f6;
+  border-radius: 12px;
 }
 .board_common_box > a {
   display: flex;
@@ -15,6 +21,7 @@
   font-weight: 600;
   min-height: 72px;
   margin-bottom: 16px;
+  padding-right: 24px;
 }
 .board_common_box .left .bottom {
   display: flex;

src/lib/fetch-board-list.ts

@@ -3,9 +3,10 @@ import { Article, BoardListResponse } from "../../types";
 export default async function fetchBoardList(
   page = 1,
   pageSize = 10,
-  orderBy = "recent"
+  orderBy = "recent",
+  keyword = ""
 ): Promise<Article[]> {
-  const url = `https://panda-market-api.vercel.app/articles?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`;
+  const url = `https://panda-market-api.vercel.app/articles?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
   try {
     const response = await fetch(url);
     if (!response.ok) {

src/pages/boards/index.tsx

@@ -1,33 +1,37 @@
 import fetchBoardList from "@/lib/fetch-board-list";
-import { InferGetServerSidePropsType } from "next";
 import styles from "./board.module.css";
 import BoardBestList from "@/components/board-best-list";
 import BoardList from "@/components/board-list";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { Article } from "../../../types";
 
-export const getServerSideProps = async () => {
-  const list = await fetchBoardList(1, 3, "like");
-  const commonList = await fetchBoardList(1, 10, "recent");
-  return {
-    props: {
-      list,
-      commonList,
-    },
-  };
-};
-
-export default function Page({
-  list,
-  commonList,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function Page() {
   const [sortState, setSortState] = useState(false);
   const [order, setOrder] = useState("recent");
+  const [list, setList] = useState<Article[]>([]);
+  const [commonList, setCommonList] = useState<Article[]>([]);
 
   const onSortToggle = () => {
     setSortState(!sortState);
   };
 
+  const fetchData = async () => {
+    try {
+      const bestResponse = await fetchBoardList(1, 3, "like");
+      const commonResponse = await fetchBoardList(1, 10, order);
+
+      setList(bestResponse);
+      setCommonList(commonResponse);
+    } catch (error) {
+      console.error("데이터 가져오기 실패:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [order]);
+
   const sortChange = (state: string) => {
     if (state !== order) {
       setOrder(state);
@@ -40,7 +44,7 @@ export default function Page({
       <div className="common_title">베스트 게시글</div>
       <ul className={styles.board_best}>
         {list.length === 0 ? (
-          <p>데이터가 없습니다.</p>
+          <p></p>
         ) : (
           list.map((el) => <BoardBestList key={el.id} {...el} />)
         )}
@@ -81,7 +85,7 @@ export default function Page({
 
         <ul className={styles.board_common}>
           {commonList.length === 0 ? (
-            <p>데이터가 없습니다.</p>
+            <p></p>
           ) : (
             commonList.map((el) => <BoardList key={el.id} {...el} />)
           )}