feat. 상품목록 - 에러상태에 대한 로직추가

Author: ahnsummer

.github/pull_request_template.md

@@ -16,19 +16,19 @@
 
 **상품 목록 로딩**
 
-- [ ] 페이지 접속 시 로딩 상태가 표시된다
-- [ ] 데이터 로드 완료 후 상품 목록이 렌더링된다
-- [ ] 로딩 실패 시 에러 상태가 표시된다
-- [ ] 에러 발생 시 재시도 버튼이 제공된다
+- [X] 페이지 접속 시 로딩 상태가 표시된다
+- [X] 데이터 로드 완료 후 상품 목록이 렌더링된다
+- [X] 로딩 실패 시 에러 상태가 표시된다
+- [X] 에러 발생 시 재시도 버튼이 제공된다
 
 **상품 목록 조회**
 
-- [ ] 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다
+- [X] 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다
 
 **한 페이지에 보여질 상품 수 선택**
 
-- [ ] 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
-- [ ] 선택 변경 시 즉시 목록에 반영된다
+- [X] 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
+- [X] 선택 변경 시 즉시 목록에 반영된다
 
 **상품 정렬 기능**
 
@@ -71,7 +71,7 @@
 
 **현재 상품 수 표시**
 
-- [ ] 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
+- [X] 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
 - [ ] 검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다
 
 #### 장바구니

src/domains/product/components/ProductList/ProductItem.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { component, html } from "../../../../core/component";
 import { Product } from "../../../../types";
 

src/main.ts

@@ -18,9 +18,11 @@ const enableMocking = () =>
  */
 function main() {
   render`
-     <div class="min-h-screen bg-gray-50">
+     <div class="bg-gray-50 flex flex-col flex-grow h-screen">
       ${TopBar()}
-      ${ProductListPage()}
+      <div class="flex-1">
+        ${ProductListPage()}
+      </div>
       ${Footer()}
     </div>
   `;

src/pages/product/list.ts

@@ -5,36 +5,64 @@ import { useState } from "../../core/state/useState";
 import { ProductFilter } from "../../domains/product/components/ProductList/ProductFilter";
 import { ProductList } from "../../domains/product/components/ProductList/ProductList";
 import { Product } from "../../types";
+import { on } from "../../core/on";
 
 export const ProductListPage = component(() => {
   const $products = useState<Product[]>([]);
   const $isLoading = useState(true);
   const $itemsPerPage = useState(20);
+  const $error = useState<string | null>(null);
+
+  const fetchProducts = async () => {
+    try {
+      $isLoading.set(true);
+      $error.set(null);
+
+      // throw new Error("테스트 에러입니다!");
+
+      const response = await getProducts({
+        page: 1,
+        limit: $itemsPerPage.get(),
+        sort: "price_asc",
+      });
+
+      $products.set(response.products);
+      $isLoading.set(false);
+    } catch (error) {
+      console.log("상품 로딩 실패: ", error);
+
+      $error.set(error instanceof Error ? error.message : "상품을 불러오는데 실패했습니다.");
+      $isLoading.set(false);
+    }
+  };
 
   useEffect(() => {
-    (async () => {
-      try {
-        const response = await getProducts({
-          page: 1,
-          limit: $itemsPerPage.get(),
-          sort: "price_asc",
-        });
-
-        $products.set(response.products);
-        $isLoading.set(false);
-      } catch (error) {
-        console.log("상품 로딩 실패: ", error);
-        $isLoading.set(false);
-      }
-    })();
+    fetchProducts();
   }, [$itemsPerPage]);
 
   return html`
-    <main class="max-w-md mx-auto px-4 py-4">
-      <!-- 검색 및 필터 -->
-      ${ProductFilter({ $itemsPerPage })}
-      <!-- 상품 목록 -->
-      ${ProductList({ $products, $isLoading, $itemsPerPage })}
+    <main class="h-full max-w-md mx-auto px-4 py-4">
+      ${$error.ref((error) => {
+        if (error) {
+          return html` <div class="h-full w-full flex flex-col gap-4 items-center justify-center text-center font-bold">
+            <p class="font-medium">${$error}</p>
+            <button
+              class="bg-blue-500 p-3 rounded-md flex-shrink-0 text-white hover:text-gray-200"
+              ${on("click", () => {
+                fetchProducts();
+              })}
+            >
+              다시 시도
+            </button>
+          </div>`;
+        }
+        return html`
+          <!-- 검색 및 필터 -->
+          ${ProductFilter({ $itemsPerPage })}
+          <!-- 상품 목록 -->
+          ${ProductList({ $products, $isLoading, $itemsPerPage })}
+        `;
+      })}
     </main>
   `;
 });