[김희진] sprint 9

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.env
 
 # testing
 /coverage

apis/boards.tsx

@@ -0,0 +1,36 @@
+import api from "./index";
+
+export interface BoardItem {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  image: string;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export interface Boards {
+  totalCount?: 0;
+  list: BoardItem[];
+}
+
+interface Params {
+  page: number;
+  pageSize: number;
+  orderBy: string;
+  keyword: string;
+}
+
+export async function getBoards(params: Params): Promise<Boards> {
+  const { page, pageSize, orderBy, keyword } = params;
+  const response = await api.get("/articles", {
+    params: { page, pageSize, orderBy, keyword },
+  });
+
+  return response.data;
+}

apis/index.tsx

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+const api = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;

app/boards/getBoardsData.tsx

@@ -0,0 +1,23 @@
+import { getBoards } from "@/apis/boards";
+
+export default async function getBoardsData() {
+  const allData = await getBoards({
+    page: 1,
+    pageSize: 10,
+    orderBy: "recent",
+    keyword: "",
+  });
+
+  const initialAllData = allData.list;
+
+  const bestData = await getBoards({
+    page: 1,
+    pageSize: 3,
+    orderBy: "like",
+    keyword: "",
+  });
+
+  const initialBestData = bestData?.list ?? [];
+
+  return { initialAllData, initialBestData };
+}

app/boards/page.tsx

@@ -0,0 +1,23 @@
+import Best from "@/components/BestBoards/Best";
+import All from "@/components/AllBoards/All";
+import getBoardsData from "./getBoardsData";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "판다마켓 | 자유게시판",
+};
+
+export const revalidate = 60;
+
+export default async function Boards() {
+  const { initialAllData, initialBestData } = await getBoardsData();
+
+  return (
+    <div className="flex justify-center items-center my-10 lg:my-0">
+      <div className="max-w-[1200px] min-w-[343px] px-6 lg:p-4 md:p-6 flex flex-col gap-10">
+        <Best initialData={initialBestData} />
+        <All initialData={initialAllData} />
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,83 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    box-sizing: border-box;
+    text-decoration: none;
+    list-style: none;
+  }
+
+  body {
+    font-family: "Pretendard", sans-serif;
+  }
+
+  body,
+  p,
+  h2 {
+    margin: 0;
+  }
+
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  button,
+  input,
+  textarea {
+    border: none;
+  }
+}
+
+@layer utilities {
+  .line-break {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: left;
+    overflow: hidden;
+  }
+}
+
+@font-face {
+  font-family: "ROKAF Sans";
+  src: url("/font/ROKAF.ttf");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
+    format("woff");
+  font-display: swap;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff")
+    format("woff");
+  font-display: swap;
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pretendard";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff2")
+    format("woff2");
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff")
+    format("woff");
+  font-display: swap;
+  font-weight: 700;
+  font-style: normal;
+}

app/items/page.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "판다마켓 | 중고마켓",
+};
+
+export default function Home() {
+  return <>items page</>;
+}

app/layout.tsx

@@ -0,0 +1,22 @@
+import Header from "@/components/common/Header/Header";
+import "./globals.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "판다마켓",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body>
+        <Header />
+        {children}
+      </body>
+    </html>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from "next";
+import Image from "next/image";
+import panda from "@/public/icons/panda.svg";
+
+export const metadata: Metadata = {
+  title: "판다마켓 | not found",
+};
+
+export default function NotFound() {
+  return (
+    <div className="w-screen min-h-[calc(100vh-70px)] flex flex-col justify-center items-center gap-10">
+      <Image width={280} height={280} src={panda} alt="panda" />
+      <p className="text-7xl text-blue font-bold">404 | NOT FOUND</p>
+    </div>
+  );
+}

app/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <>home page</>;
+}

components/AllBoards/All.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import AllItem from "./AllItem";
+import Dropdown from "../common/Dropdown/Dropdown";
+import Search from "../Search/Search";
+import Pagination from "../Pagination/Pagination";
+import useParams from "@/hooks/useParams";
+import useAllData from "./useAllData";
+import { BoardItem } from "@/apis/boards";
+
+const FilterList = ["recent", "like"];
+const PAGE_SIZE = 10;
+
+interface AllProps {
+  initialData: BoardItem[];
+}
+
+export default function All({ initialData }: AllProps) {
+  const { page, orderBy, keyword, handleParamsUpdate } = useParams();
+  const { all, totalBoards } = useAllData({ initialData, PAGE_SIZE });
+
+  return (
+    <div className="w-full flex flex-col gap-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-gray900 text-Bold20 font-bold">게시글</h2>
+        <button className="py-2 px-6 bg-blue text-white text-Bold16 rounded-lg cursor-pointer">
+          글쓰기
+        </button>
+      </div>
+      <div className="w-full flex flex-col gap-6">
+        <div className="flex justify-center items-center gap-3">
+          <Search />
+          <Dropdown
+            list={FilterList}
+            orderBy={orderBy}
+            onChange={(filter) => handleParamsUpdate({ orderBy: filter })}
+          />
+        </div>
+        <div className="w-full flex flex-col gap-6">
+          {all.map((item) => (
+            <AllItem key={item.id} all={item} />
+          ))}
+        </div>
+        {!keyword && (
+          <Pagination
+            totalBoards={totalBoards ?? 0}
+            currentPage={page}
+            pageSize={PAGE_SIZE}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/AllBoards/AllItem.tsx

@@ -0,0 +1,42 @@
+import Image from "next/image";
+import user from "@/public/icons/user.svg";
+import heart from "@/public/icons/emptyHeart.svg";
+import formattedDate from "@/utils/formattedDate";
+import { BoardItem } from "@/apis/boards";
+import Link from "next/link";
+import BoardImage from "../BoardImage/BoardImage";
+
+interface AllItemProps {
+  all: BoardItem;
+}
+
+export default function AllItem({ all }: AllItemProps) {
+  return (
+    <Link
+      className="w-full h-[138px] flex flex-col gap-4 pb-6 bg-bg border-b border-gray200 cursor-pointer"
+      href="/"
+    >
+      <div className="w-full flex justify-between items-start">
+        <p className="flex-1 h-[60px] break-words text-gray800 text-Bold20">
+          {all.content}
+        </p>
+        <BoardImage image={all.image} />
+      </div>
+      <div className="w-full flex justify-between items-center">
+        <div className=" flex justify-center items-center gap-2">
+          <Image src={user} width={24} height={24} alt="user" />
+          <span className="text-gray600 text-Regular14">
+            {all.writer.nickname}
+          </span>
+          <span className="text-gray400 text-Regular14">
+            {formattedDate(all.createdAt)}
+          </span>
+        </div>
+        <div className="flex justify-center items-center gap-1">
+          <Image src={heart} width={16} height={16} alt="like" />
+          <span className="text-gray500 text-Regular14">{all.likeCount}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}

components/AllBoards/useAllData.tsx

@@ -0,0 +1,33 @@
+import { BoardItem, getBoards } from "@/apis/boards";
+import { useEffect, useState } from "react";
+import useParams from "@/hooks/useParams";
+
+interface AllDataProps {
+  initialData: BoardItem[];
+  PAGE_SIZE: number;
+}
+
+export default function useAllData({ initialData, PAGE_SIZE }: AllDataProps) {
+  const [all, setAll] = useState<BoardItem[]>(initialData);
+  const [totalBoards, setTotalBoards] = useState<number>(0);
+  const { page, orderBy, keyword } = useParams();
+
+  useEffect(() => {
+    getBoards({
+      page,
+      pageSize: keyword ? 1000 : PAGE_SIZE,
+      orderBy,
+      keyword,
+    })
+      .then((result) => {
+        if (!result) return;
+        setAll(result.list);
+        if (result.totalCount) {
+          setTotalBoards(result.totalCount);
+        }
+      })
+      .catch((error) => console.error(error));
+  }, [page, orderBy, keyword, PAGE_SIZE]);
+
+  return { all, totalBoards };
+}