[최성락] Sprint8

package.json

@@ -35,5 +35,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.4",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "typescript": "^4.9.5"
   }
 }

src/App.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+const App: React.FC = () => {
+  return <Outlet />;
+};
+
+export default App;

src/components/section/AllProductsSection.tsx

@@ -0,0 +1,64 @@
+import { fetchProducts } from "../../domains/product/index";
+import { useCallback, useEffect, useState } from "react";
+import { HttpException } from "../../utils/exceptions";
+import ItemCard from "../ui/Item/ItemCard";
+import "./AllProductsSection.css";
+import { SortOption, Product } from "../../domains/product/index";
+import { getPageLimit } from "../../utils/getPageLimit";
+import { debounce } from "../../utils/debounce";
+
+interface AllProductsSectionProps {
+  sortOption: SortOption;
+}
+
+function AllProductsSection({ sortOption }: AllProductsSectionProps) {
+  const [items, setItems] = useState<Product[]>([]);
+  const [pageSize, setPageSize] = useState(getPageLimit(window.innerWidth, "all"));
+  const [error, setError] = useState<string | null>(null);
+
+  const getProducts = async (limit: number, sort: SortOption): Promise<void> => {
+    try {
+      const { list } = await fetchProducts(sort, limit);
+      setItems(list);
+    } catch (error) {
+      console.error(error);
+      const message = error instanceof Error ? error.message : "알 수 없는 오류가 발생했습니다";
+      setError(message);
+    }
+  };
+
+  const handleResize = useCallback(() => {
+    const newPageSize = getPageLimit(window.innerWidth, "all");
+    if (newPageSize !== pageSize) {
+      setPageSize(newPageSize);
+    }
+  }, [pageSize]);
+
+  useEffect(() => {
+    const debounceResize = debounce(handleResize, 300);
+    window.addEventListener("resize", debounceResize);
+    return () => window.removeEventListener("resize", debounceResize);
+  }, [handleResize]);
+
+  useEffect(() => {
+    if (pageSize !== null) {
+      getProducts(pageSize, sortOption);
+    }
+  }, [sortOption, pageSize]);
+
+  if (error) {
+    return <div>오류: {error}</div>;
+  }
+
+  return (
+    <section className="all-products">
+      <div className="all-products-list">
+        {items.map((item) => (
+          <ItemCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default AllProductsSection;