부산대학교 FE 성민기 : 3단계 - 테마 상품 목록 페이지 구현하기

README.md

@@ -1,4 +1,4 @@
-# 3단계 완료
+# 3단계 완료 (리뷰 반영)
 
 # 목표
 

src/hooks/useThemeProducts.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { apiClient } from '@/api/apiClient';
 import { GiftItem } from '@/constants/GiftItem';
 
@@ -18,10 +18,10 @@ export function useThemeProducts(themeId: number) {
   const [products, setProducts] = useState<GiftItem[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
-  const [cursor, setCursor] = useState<number>(0);
   const [hasMore, setHasMore] = useState<boolean>(true);
+  const cursorRef = useRef<number>(0);
 
-  const fetchProducts = useCallback(async () => {
+  const fetchMore = useCallback(async () => {
     if (!themeId || !hasMore || loading) return;
 
     setLoading(true);
@@ -31,7 +31,7 @@ export function useThemeProducts(themeId: number) {
       const res = await apiClient.get<ApiResponse<ThemeProductsResponse>>(
         `/api/themes/${themeId}/products`,
         {
-          params: { cursor, limit: PRODUCTS_LIMIT },
+          params: { cursor: cursorRef.current, limit: PRODUCTS_LIMIT },
         }
       );
 
@@ -42,26 +42,23 @@ export function useThemeProducts(themeId: number) {
           );
           return [...prevProducts, ...newProducts];
         });
-        setCursor(res.data.data.cursor);
+        cursorRef.current = res.data.data.cursor;
         setHasMore(res.data.data.hasMoreList);
       }
     } catch (err) {
       setError(err as Error);
     } finally {
       setLoading(false);
     }
-  }, [themeId, hasMore, loading, cursor]);
+  }, [themeId, hasMore, loading]);
 
   useEffect(() => {
     setProducts([]);
-    setCursor(0);
+    cursorRef.current = 0;
     setHasMore(true);
     setError(null);
+    fetchMore();
   }, [themeId]);
 
-  useEffect(() => {
-    fetchProducts();
-  }, [fetchProducts]);
-
-  return { products, loading, error, fetchMore: fetchProducts, hasMore };
+  return { products, loading, error, fetchMore, hasMore };
 }

src/pages/ThemeProductListPage.tsx

@@ -27,6 +27,7 @@ const ThemeProductListPage: React.FC = () => {
 
   const observerRef = useRef<HTMLDivElement>(null);
   const observer = useRef<IntersectionObserver | null>(null);
+
 
   useEffect(() => {
     if (themeError && themeError.message.includes('404')) {
@@ -66,6 +67,8 @@ const ThemeProductListPage: React.FC = () => {
     };
   }, [handleObserver]);
 
+
+
   if (themeLoading) {
     return <Spinner />;
   }
@@ -139,6 +142,10 @@ const ProductGrid = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 16px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 `;
 
 const EmptyState = styled.div`