From 8ab3b48d800dbad14adaea6591610a88466f0496 Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Wed, 26 Jun 2024 10:16:03 +0900 Subject: [PATCH] =?UTF-8?q?fix(Sprint5):=20PR=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/items/BestItems/BestItems.jsx | 20 +++++++--- .../SellingItems.css} | 0 .../SellingItems.jsx} | 40 +++++++++++++------ src/pages/api/Items.js | 6 +-- src/pages/items/Items.css | 16 ++++---- src/pages/items/Items.jsx | 6 +-- 6 files changed, 55 insertions(+), 33 deletions(-) rename src/components/items/{SailItems/SailItems.css => SellingItems/SellingItems.css} (100%) rename src/components/items/{SailItems/SailItems.jsx => SellingItems/SellingItems.jsx} (78%) diff --git a/src/components/items/BestItems/BestItems.jsx b/src/components/items/BestItems/BestItems.jsx index 5c1b75bd3..081d270f1 100644 --- a/src/components/items/BestItems/BestItems.jsx +++ b/src/components/items/BestItems/BestItems.jsx @@ -22,17 +22,24 @@ function BestItems() { const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(4); const [keyword, setKeyword] = useState(''); + // 에러 + const [fetchingError, setfetchingError] = useState(null); const fetchItemList = async ({ order, page, pageSize, keyword }) => { - let products = await getProducts({ order, page, pageSize, keyword }); - setItemList(products.list); + try { + setfetchingError(null); + const products = await getProducts({ order, page, pageSize, keyword }); + setItemList(products.list); + } catch (err) { + setItemList([]); + setfetchingError(err); + } + }; + const handleResize = () => { + setPageSize(getPageSize()); }; useEffect(() => { - const handleResize = () => { - setPageSize(getPageSize()); - }; - window.addEventListener('resize', handleResize); fetchItemList({ order, page, pageSize, keyword }); @@ -47,6 +54,7 @@ function BestItems() {
베스트 상품
+ {fetchingError && fetchingError.message} {itemList?.map((item) => ( ))} diff --git a/src/components/items/SailItems/SailItems.css b/src/components/items/SellingItems/SellingItems.css similarity index 100% rename from src/components/items/SailItems/SailItems.css rename to src/components/items/SellingItems/SellingItems.css diff --git a/src/components/items/SailItems/SailItems.jsx b/src/components/items/SellingItems/SellingItems.jsx similarity index 78% rename from src/components/items/SailItems/SailItems.jsx rename to src/components/items/SellingItems/SellingItems.jsx index 5e5d761ea..6fdf236c6 100644 --- a/src/components/items/SailItems/SailItems.jsx +++ b/src/components/items/SellingItems/SellingItems.jsx @@ -1,10 +1,10 @@ -import './SailItems.css'; import { ReactComponent as IconSearch } from '../../../assets/images/icons/ic_search.svg'; import { ReactComponent as IconSort } from '../../../assets/images/icons/ic_sort.svg'; import { useEffect, useState } from 'react'; import { getProducts } from '../../../pages/api/Items'; import Item from '../Item/Item'; import PaginationBar from '../PaginationBar/PaginationBar'; +import './SellingItems.css'; const getPageSize = () => { const width = window.innerWidth; @@ -17,7 +17,7 @@ const getPageSize = () => { } }; -function SailItems() { +function SellingItems() { // 상품 const [itemList, setItemList] = useState([]); // 쿼리 @@ -29,6 +29,8 @@ function SailItems() { const [isDropdownVisible, setIsDropdownVisible] = useState(false); // 페이지네이션 const [totalPageNum, setTotalPageNum] = useState(); + // 에러 + const [fetchingError, setfetchingError] = useState(null); const handlePageChange = (pageNumber) => { setPage(pageNumber); @@ -48,9 +50,16 @@ function SailItems() { }; const fetchItemList = async ({ order, page, pageSize, keyword }) => { - let products = await getProducts({ order, page, pageSize, keyword }); - setItemList(products.list); - setTotalPageNum(Math.ceil(products.totalCount / pageSize)); + try { + setfetchingError(null); + const products = await getProducts({ order, page, pageSize, keyword }); + setItemList(products.list); + setTotalPageNum(Math.ceil(products.totalCount / pageSize)); + } catch (err) { + setItemList([]); + setTotalPageNum(0); + setfetchingError(err); + } }; useEffect(() => { @@ -67,13 +76,13 @@ function SailItems() { return ( <> -
+
{/* 판매 중인 상품 헤더 */} -
-
-
판매 중인 상품
+
+
+
판매 중인 상품
-
+ {/* 판매 중인 상품 목록 */} -
+ {fetchingError && ( +
+ {fetchingError.message} +
+ )} +
{itemList?.map((item) => ( - + ))}
@@ -131,4 +145,4 @@ function SailItems() { ); } -export default SailItems; +export default SellingItems; diff --git a/src/pages/api/Items.js b/src/pages/api/Items.js index cf7355a3d..9af5ac39b 100644 --- a/src/pages/api/Items.js +++ b/src/pages/api/Items.js @@ -1,3 +1,5 @@ +const BASE_URL = 'https://panda-market-api.vercel.app'; + /** * 상품 목록 조회 * @param {string} order 정렬 기준: recent, favorite @@ -30,9 +32,7 @@ export async function getProducts({ keyword, // 검색 키워드 }) { const query = `orderBy=${order}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`; - const response = await fetch( - `https://panda-market-api.vercel.app/products?${query}` - ); + const response = await fetch(`${BASE_URL}/products?${query}`); if (!response.ok) { throw new Error('데이터를 불러오는데 실패했습니다'); } diff --git a/src/pages/items/Items.css b/src/pages/items/Items.css index fc3ae5148..babf7f7fd 100644 --- a/src/pages/items/Items.css +++ b/src/pages/items/Items.css @@ -19,24 +19,24 @@ } /* Sail Items */ -.container-sail-items { +.container-selling-items { } -.header-sail-items { +.header-selling-items { display: flex; justify-content: space-between; padding: 0 0 24px; } -.header-sail-items-left { +.header-selling-items-left { } -.title-sail-items { +.title-selling-items { font-size: 20px; font-weight: bold; } -.header-sail-items-right { +.header-selling-items-right { display: flex; justify-content: space-between; } @@ -96,7 +96,7 @@ cursor: pointer; } -.list-sail-items { +.list-selling-items { display: grid; grid-template-columns: repeat(2, 1fr); } @@ -158,7 +158,7 @@ } /* Sail Items */ - .list-sail-items { + .list-selling-items { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -171,7 +171,7 @@ } /* Sail Items */ - .list-sail-items { + .list-selling-items { display: grid; grid-template-columns: repeat(5, 1fr); } diff --git a/src/pages/items/Items.jsx b/src/pages/items/Items.jsx index 0e5615f4e..56ff86db2 100644 --- a/src/pages/items/Items.jsx +++ b/src/pages/items/Items.jsx @@ -1,15 +1,15 @@ import './Items.css'; import BestItems from '../../components/items/BestItems/BestItems'; -import SailItems from '../../components/items/SailItems/SailItems'; +import SellingItems from '../../components/items/SellingItems/SellingItems'; function Items() { return ( <>
{/* 베스트 상품 */} - + {/* 판매 중인 상품 */} - +
);