fix(Sprint5): PR 피드백 수정

codeit-bootcamp-frontend · Jun 26, 2024 · 8ab3b48 · 8ab3b48
1 parent 06306ab
commit 8ab3b48
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 33 deletions.
diff --git 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() {
         <div className="title-best-items">베스트 상품</div>
 
         <div className="list-best-items">
+          {fetchingError && fetchingError.message}
           {itemList?.map((item) => (
             <Item item={item} key={`best-item-${item.id}`} />
           ))}

diff --git a/src/components/items/SailItems/SailItems.css → ...nents/items/SellingItems/SellingItems.css b/src/components/items/SailItems/SailItems.css → ...nents/items/SellingItems/SellingItems.css
diff --git a/src/components/items/SailItems/SailItems.jsx → ...nents/items/SellingItems/SellingItems.jsx b/src/components/items/SailItems/SailItems.jsx → ...nents/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 (
     <>
-      <div className="container-sail-items">
+      <div className="container-selling-items">
         {/* 판매 중인 상품 헤더 */}
-        <div className="header-sail-items">
-          <div className="header-sail-items-left">
-            <div className="title-sail-items">판매 중인 상품</div>
+        <div className="header-selling-items">
+          <div className="header-selling-items-left">
+            <div className="title-selling-items">판매 중인 상품</div>
           </div>
-          <div className="header-sail-items-right">
+          <div className="header-selling-items-right">
             <a
               href="/additems"
               id="btn-add-item"
@@ -114,9 +123,14 @@ function SailItems() {
           </div>
         </div>
         {/* 판매 중인 상품 목록 */}
-        <div className="list-sail-items">
+        {fetchingError && (
+          <div className="list-selling-items-error">
+            {fetchingError.message}
+          </div>
+        )}
+        <div className="list-selling-items">
           {itemList?.map((item) => (
-            <Item item={item} key={`sail-item-${item.id}`} />
+            <Item item={item} key={`selling-item-${item.id}`} />
           ))}
         </div>
         <div className="wrapper-pagination-bar">
@@ -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
@@ -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
@@ -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
@@ -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 (
     <>
       <div className="container-items">
         {/* 베스트 상품 */}
-        <BestItems></BestItems>
+        <BestItems />
         {/* 판매 중인 상품 */}
-        <SailItems></SailItems>
+        <SellingItems />
       </div>
     </>
   );