Merge branch 'React-김가희' into React-김가희-week6

src/api.js

@@ -7,6 +7,7 @@
  * @returns
  */
 export async function getItems(
+
 	page = 1,
 	pageSize = 10,
 	orderBy = "recent",
@@ -36,3 +37,5 @@ export async function addItem(requestBody) {
 	return response;
 }
 
+
+

src/components/BestList.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { getItems } from "../api";
+import Card from "./Card";
+import style from "./BestList.module.css";
+
+function BestList() {
+  const [cardList, setCardList] = useState([]);
+
+  const fetchData = async function () {
+    const data = await getItems(1, 4, "favorite");
+    setCardList(data.list);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.bestListBlock}>
+        <div className={style.label}>베스트 상품</div>
+        <div className={style.bestList}>
+          {cardList.map((item) => {
+            return <Card key={item.id} item={item} imgSize={"282px"}></Card>;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BestList;

src/components/BestList.module.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "Pretendard Variable";
+  src: url("../../public/Pretendard-Regular.ttf");
+}
+
+.label {
+  font-family: "Pretendard Variable";
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: left;
+  color: #111827;
+}
+
+.bestList {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.bestListBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: fit-content;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+}

src/components/Card.js

@@ -0,0 +1,24 @@
+import style from "./Card.module.css";
+import Favorite from "./Favorite";
+
+function Card({ item, imgSize }) {
+  const { favoriteCount, images, price, name } = item;
+  const addDefaultImg = (e) => {e.currentTarget.src = "/images/free-icon-no-pictures-3875148.png"} 
+  return (
+    <div className={style.card}>
+      <img
+        className={style.cardImg}
+        style={{ width: imgSize, height: imgSize }}
+        src={images[0]} onError={addDefaultImg}
+        alt={name}
+      />
+      <div className={style.cardTxt}>
+        <div className={style.title}>{name}</div>
+        <div className={style.price}>{price}</div>
+        <Favorite favoriteCount={favoriteCount}></Favorite>
+      </div>
+    </div>
+  );
+}
+
+export default Card;

src/components/Card.module.css

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: "Pretendard Variable";
+  src: url("../../public/Pretendard-Regular.ttf");
+}
+
+.cardImg {
+  border-radius: 16px;
+}
+
+.card,
+.cardTxt {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  gap: 16px;
+}
+
+.cardTxt {
+  gap: 6px;
+  font-family: "Pretendard Variable";
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.price {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 26px;
+}
+
+.favorite {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}

src/components/Favorite.js

@@ -0,0 +1,12 @@
+import style from "./Favorite.module.css";
+
+function Favorite({ favoriteCount }) {
+  return (
+    <div className={style.favorite}>
+      <img src="/images/heart-icon.svg" />
+      <div>{favoriteCount}</div>
+    </div>
+  );
+}
+
+export default Favorite;

src/components/Favorite.module.css

@@ -0,0 +1,4 @@
+.favorite {
+  display: flex;
+  gap: 4px;
+}

src/components/ItemList.js

@@ -0,0 +1,145 @@
+import { useEffect, useState } from "react";
+import { getItems } from "../api";
+import Card from "./Card";
+import style from "./ItemList.module.css";
+import SearchBar from "./SearchBar";
+
+function ItemList() {
+  const pagesToShow = 5;
+  const [cardList, setCardList] = useState([]);
+  const [order, setOrder] = useState("recent");
+  const [totalCount, setTotalCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
+  const [displayedPages, setDisplayedPages] = useState([]);
+  const [totalPages, setTotalPages] = useState(0);
+  const fetchData = async function (page) {
+    const data = await getItems(page, 10, order);
+    // data = totalCount 외 아이템 리스트들을 가지고있는 정보
+    setTotalCount(data.totalCount);
+    setCardList(data.list);
+    setTotalPages(Math.ceil(totalCount / 10));
+  };
+
+  const updateDisplayedPages = () => {
+    const start = Math.floor((currentPage - 1) / pagesToShow) * pagesToShow + 1;
+    const end = Math.min(start + pagesToShow - 1, totalPages);
+    console.log("start ", start);
+    console.log("end ", end);
+    console.log(Array.from({ length: end - start + 1 }, (_, i) => start + i));
+    setDisplayedPages(
+      Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    );
+    console.log("displayedPages: ", displayedPages);
+  };
+
+  const handlePageChange = (page) => {
+    if (page < 1 || page > totalPages) return; // 범위를 넘어가는 경우 무시
+    setCurrentPage(page);
+    fetchData(page);
+    // 여기서 getItems를 호출하여 아이템을 가져올 수 있습니다.
+    // const data = await getItems(page, itemsPerPage);
+  };
+
+  const handleNextPages = () => {
+    const nextPage = Math.min(currentPage + pagesToShow, totalPages);
+    setCurrentPage(nextPage);
+  };
+
+  const handlePreviousPages = () => {
+    const prevPage = Math.max(currentPage - pagesToShow, 1);
+    setCurrentPage(prevPage);
+  };
+
+  useEffect(() => {
+    fetchData();
+    updateDisplayedPages();
+    console.log(currentPage);
+  }, [order, totalCount, currentPage, totalPages]);
+
+  // function handlePageChange(e) {
+  //   // console.log(e);
+  //   fetchData(e.target.value);
+  // }
+
+  return (
+    <>
+      <SearchBar handleOrder={setOrder}></SearchBar>
+      <div className={style.wrapper}>
+        <div className={style.itemListBlock}>
+          <div className={style.label}>전체 상품</div>
+          <div className={style.itemList}>
+            {cardList.map((item) => {
+              return (
+                <Card
+                  key={item.id}
+                  item={item}
+                  imgSize={"221px"}
+                  cardWidth={"20%"}
+                ></Card>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div>
+        <button
+          className={style.arrowButton}
+          onClick={handlePreviousPages}
+          disabled={currentPage <= pagesToShow}
+        >
+          &lt;&lt;
+        </button>
+        {displayedPages.map((page) => (
+          <button
+            key={page}
+            className={`${style.pageButton} ${
+              currentPage === page ? style.active : ""
+            }`}
+            onClick={() => handlePageChange(page)}
+          >
+            {page}
+          </button>
+        ))}
+        <button
+          className={style.arrowButton}
+          onClick={handleNextPages}
+          disabled={currentPage + pagesToShow > totalPages}
+        >
+          &gt;&gt;
+        </button>
+      </div>
+    </>
+  );
+}
+
+export default ItemList;
+
+/**
+ *
+ * 1. 함수를 만드는데, 토탈카운트 나누기 10 하는 함수를 만듬
+ *
+ * 2. 1번의 함수 리턴값에 따라서, 페이지 개수를 분리하는 기능을 만듬 ( 예를들면, 1~5 / 6~10 / 11~15 ...)
+ *
+ * 3. 1번의 함수 리턴값이 5 이상일때, 밑
+ *
+ */
+
+// function pageMake(totalCount) {
+//   // 146
+//   const pageNumber = Math.ceil(totalCount / 10); // 15
+//   const pageGroup = Array(pageNumber / 5) //[1,2,3]
+//     .fill()
+//     .map((el, i) => i + 1);
+//   // 0; // 0 -> 1 -> 2
+
+//   const pageNumberList = Array(pageNumber) // [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
+//     .fill()
+//     .map((el, i) => i + 1);
+
+//   const startPage = 0 + pageGroup * 5;
+//   const endPage = a.length + pageGroup * 5;
+
+//   pageGroup.map((el, i) => {
+//     pageNumberList.slice(startPage, endPage); // 0,5
+//   });
+// }

src/components/ItemList.module.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "Pretendard Variable";
+  src: url("../../public/Pretendard-Regular.ttf");
+}
+
+.label {
+  font-family: "Pretendard Variable";
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: left;
+  color: #111827;
+}
+
+.itemList {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr); /* 5개의 열 설정 */
+  gap: 24px;
+}
+
+.itemListBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: fit-content;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+}

src/components/SearchBar.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import style from "./SearchBar.module.css";
+
+
+function SearchBar({ handleOrder }) {
+  const handleChange = (e) => {
+    handleOrder(e.target.value);
+  };
+  return (
+    <div className={style.utilBox}>
+      <input
+        className={style.searchBar}
+        placeholder="검색할 상품을 입력해주세요"
+      ></input>
+      <button className={style.btnStyle}>상품 등록하기</button>
+      <form className={style.dropBox}>
+        <select onChange={handleChange}>
+          <option value="recent">최신순</option>
+          <option value="favorite">좋아요순</option>
+        </select>
+      </form>
+    </div>
+  );
+}
+
+export default SearchBar;