Merge pull request #290 from Sookyeong02/Next-장수경-sprint9

[장수경] sprint9

Author: baeggmin

api/api.tsx

@@ -0,0 +1,73 @@
+import { ProductListFetch } from "@/types/Types";
+
+export async function getProducts({
+  orderBy,
+  pageSize,
+  page = 1,
+}: ProductListFetch) {
+  const query = `orderBy=${orderBy}&page=${page}&pageSize=${pageSize}`; // pageSize를 쿼리 파라미터에 추가
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products?${query}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("패치 실패:", error);
+    throw error;
+  }
+}
+
+export async function getDetailComments(productId: string) {
+  if (!productId) {
+    throw new Error("Invalid product ID");
+  }
+
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("패치 실패:", error);
+    throw error;
+  }
+}
+
+export async function getProductComments({
+  productId,
+  limit = 10,
+}: {
+  productId: number;
+  limit?: number;
+}) {
+  if (!productId) {
+    throw new Error("Invalid product ID");
+  }
+
+  try {
+    // 올바르게 URLSearchParams 생성
+    // const query = new URLSearchParams().toString(); // 빈 쿼리 문자열을 생성
+    const query = `limit=${limit}`;
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}/comments?${query}`
+    ); // api 호출
+
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("패치 실패", error);
+    throw error;
+  }
+}

components/additem/AddInputItem.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import DeleteButton from "../ui/DeleteButton";
+
+interface AddInputItemProps {
+  productName: string;
+  productContent: string;
+  productPrice: number;
+  productTag: string;
+  onNameChange: (value: string) => void;
+  onContentChange: (value: string) => void;
+  onPriceChange: (value: number) => void;
+  onTagChange: (value: string) => void;
+  onTagsUpdate: (tags: string[]) => void;
+}
+
+function AddInputItem({
+  productName,
+  productContent,
+  productPrice,
+  productTag,
+  onNameChange,
+  onContentChange,
+  onPriceChange,
+  onTagChange,
+  onTagsUpdate,
+}: AddInputItemProps) {
+  const [tags, setTags] = useState<string[]>([]); // 제네릭, 함수에서 인자를 받는 것처럼 타입도 인자로 받기
+
+  const handleTagSubmit = () => {
+    if (productTag.trim() !== "") {
+      const updatedTags = [...tags, productTag.trim()];
+      setTags(updatedTags);
+      onTagChange(""); // Clear input
+      onTagsUpdate(updatedTags); // 부모 컴포넌트로 태그 배열 전달
+    }
+  };
+
+  const handleTagDelete = (index: number) => {
+    const updatedTags = tags.filter((_, i) => i !== index);
+    setTags(updatedTags);
+    onTagsUpdate(updatedTags); // 변경된 태그 배열을 부모 컴포넌트에 전달
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // 키보드 이벤트 처리 방식
+    if (e.key === " " || e.key === "," || e.key === "Enter") {
+      e.preventDefault();
+      handleTagSubmit();
+    }
+  };
+
+  return (
+    <form>
+      <p>상품명</p>
+      <input
+        value={productName}
+        onChange={(e) => onNameChange(e.target.value)}
+        placeholder="상품명을 입력해주세요"
+      />
+      <p>상품 소개</p>
+      <textarea
+        value={productContent}
+        onChange={(e) => onContentChange(e.target.value)}
+        placeholder="상품 소개를 입력해주세요"
+      />
+      <p>판매가격</p>
+      <input
+        type="number"
+        value={productPrice}
+        onChange={(e) => onPriceChange(Number(e.target.value))}
+        placeholder="판매 가격을 입력해주세요"
+      />
+      <p>태그</p>
+      <input
+        value={productTag}
+        onChange={(e) => onTagChange(e.target.value)}
+        onKeyDown={handleKeyPress}
+        placeholder="태그를 입력해주세요"
+      />
+
+      <div>
+        {tags.map((tag, index) => (
+          <p className="tagOutput" key={index}>
+            #{tag}{" "}
+            <DeleteButton
+              label="삭제"
+              onClick={() => handleTagDelete(index)} /*삭제 핸들러 전달*/
+            />
+          </p>
+        ))}
+      </div>
+    </form>
+  );
+}
+
+export default AddInputItem;

components/additem/AddItemButton.js

@@ -0,0 +1,15 @@
+// import React from "react";
+
+// function AddItemButton({ onSubmit, disabled }) {
+//   return (
+//     <button
+//       className={`addButton ${disabled ? "disabled" : "active"}`}
+//       onClick={onSubmit}
+//       disabled={disabled}
+//     >
+//       등록
+//     </button>
+//   );
+// }
+
+// export default AddItemButton;

components/boards/AllArticle.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import Logo from "../../public/images/logo.svg";
+import Profile from "../../public/images/profile.svg";
+import "../../styles/Header.module.css";
+
+const Header = () => {
+  return (
+    <header className="header">
+      <div className="headerSection">
+        <Link href="/" className="homeLogo">
+          <Image src={Logo} alt="판다마켓 로고" className="logoImg" />
+        </Link>
+
+        <nav>
+          <div className="listSection">
+            <Link href="/community" className="communityLink">
+              자유게시판
+            </Link>
+            <Link href="/items" className="itemLink">
+              중고마켓
+            </Link>
+          </div>
+        </nav>
+      </div>
+
+      <Link href="/login" className="progileSection">
+        <Image src={Profile} alt="프로필" className="profileImg" />
+      </Link>
+    </header>
+  );
+};
+
+export default Header;

components/boards/BestArticle.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import Header from "./Header";
+import { useRouter } from "next/router";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const router = useRouter();
+  const isAuthPage =
+    router.pathname === "/login" || router.pathname === "/signup";
+
+  return (
+    <>
+      {!isAuthPage && <Header />}
+      <main className={isAuthPage ? "" : "withHeader"}>{children}</main>
+    </>
+  );
+};
+
+export default Layout;

components/layout/Header.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import Link from "next/link";
+// import SortIcon from "../images/ic_sort.svg";
+import SearchIcon from "../..//../public/images/ic_search.svg";
+import Dropdown from "../../../component/Dropdown";
+import "./AllProduct.css";
+import { useEffect, useState } from "react";
+import ItemCard from "./ItemCard";
+import { getProducts } from "../../../api/api";
+import Pagination from "../../../component/Pagination";
+
+// 화면 사이즈
+const getPageSize = () => {
+  const width = window.innerWidth;
+  if (width < 768) {
+    // 모바일
+    return 4;
+  } else if (width < 1280) {
+    // 태블릿
+    return 6;
+  } else {
+    // pc
+    return 10;
+  }
+};
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
+  images: string[];
+  favoriteCount: number;
+}
+
+function AllProduct() {
+  const [orderBy, setOrderBy] = useState("recent");
+  const [itemList, setItemList] = useState<Product[]>([]);
+  // const pageSize = 4;
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(getPageSize());
+  const [totalPageNum, setTotalPageNum] = useState<number>();
+
+  const sortedData = async ({
+    orderBy,
+    page,
+    pageSize,
+  }: {
+    orderBy: string;
+    page: number;
+    pageSize: number;
+  }) => {
+    const products = await getProducts(orderBy, page, pageSize); // 객체로 전달하면 안됨?
+    setItemList(products.list);
+    setTotalPageNum(Math.ceil(products.totalCount / pageSize) || 1); // 기본값을 1로 설정
+  };
+
+  const handleSortSelection = (sortOption: string) => {
+    setOrderBy(sortOption);
+  };
+
+  // useEffect(() => {
+  //   sortedData({ orderBy: "favorite", pageSize });
+  // }, []);
+  useEffect(() => {
+    const handleResize = () => {
+      setPageSize(getPageSize());
+    };
+
+    // 화면 크기 변경할 때마다 pageSize를 다시 계산해 넣음
+    window.addEventListener("resize", handleResize);
+    sortedData({ orderBy, page, pageSize });
+  }, [orderBy, page, pageSize]);
+
+  const onPageChange = (pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  return (
+    <div className="allItemsContainer">
+      <h1>판매 중인 상품</h1>
+
+      <div className="productHeader">
+        <Link href="/additem" className="addBtn">
+          상품 등록하기
+        </Link>
+
+        <div className="search">
+          <SearchIcon />
+          <input
+            className="searchInput"
+            placeholder="검색할 상품을 입력해 주세요"
+          />
+        </div>
+
+        <Dropdown onSortSelection={handleSortSelection} />
+      </div>
+
+      <div>
+        {itemList &&
+          itemList?.map((item) => (
+            <ItemCard item={item} key={`all-item-${item.id}`} />
+          ))}
+      </div>
+
+      <div>
+        <Pagination
+          totalPageNum={totalPageNum ?? 1}
+          // totalPageNum이 undefined일 경우 1을 기본값으로 설정
+          // ??: 널 병합 연산자, null 또는 undefined 값을 처리할 때 사용, 두 개의 값 중 첫 번째 값이 null 또는 undefined일 경우 두 번째 값을 반환 + 그렇지 않으면 첫 번째 값을 그대로 반환
+          activePageNum={page}
+          onPageChange={onPageChange}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default AllProduct;