Merge pull request #240 from SOPT-all/develop

[DEPLOY] dev to main
SOPT-all · Jan 25, 2025 · 613a197 · 613a197
2 parents 42c9af1 + 36228fd
commit 613a197
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/src/components/filter/priceSlider/PriceSlider.tsx b/src/components/filter/priceSlider/PriceSlider.tsx
@@ -1,5 +1,6 @@
+import debounce from '@hooks/debounce';
 import { useAtom } from 'jotai';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { priceAtom } from 'src/store/store';
 
 import * as styles from './priceSlider.css';
@@ -8,21 +9,35 @@ const PriceSlider = () => {
   const MIN_PRICE = 0;
   const MAX_PRICE = 30;
   const [price, setPrice] = useAtom(priceAtom);
+  const [localPrice, setLocalPrice] = useState(price);
+
+  // 디바운스 처리한 price 업데이트 핸들러
+  const handleDebounceSetPrice = useCallback(
+    debounce((updatedPrice: { minPrice: number; maxPrice: number }) => {
+      setPrice(updatedPrice);
+    }, 300),
+    [],
+  );
 
   const handleMinChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Math.min(Number(event.target.value), price.maxPrice - 1);
-    const updatedPrice = { ...price, minPrice: value };
-    setPrice(updatedPrice);
+    const value = Math.min(Number(event.target.value), localPrice.maxPrice - 1);
+    const updatedLocalPrice = { ...localPrice, minPrice: value };
+
+    setLocalPrice(updatedLocalPrice); // 로컬 상태 업데이트
+    handleDebounceSetPrice(updatedLocalPrice); // 디바운스된 업데이트
   };
 
   const handleMaxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Math.max(Number(event.target.value), price.minPrice + 1);
-    const updatedPrice = { ...price, maxPrice: value };
-    setPrice(updatedPrice);
+    const value = Math.max(Number(event.target.value), localPrice.minPrice + 1);
+    const updatedLocalPrice = { ...localPrice, maxPrice: value };
+
+    setLocalPrice(updatedLocalPrice); // 로컬 상태 업데이트
+    handleDebounceSetPrice(updatedLocalPrice); // 디바운스된 업데이트
   };
+
   const getTrackStyle = () => ({
-    left: `${((price.minPrice - MIN_PRICE) / (MAX_PRICE - MIN_PRICE)) * 100}%`,
-    width: `${((price.maxPrice - price.minPrice) / (MAX_PRICE - MIN_PRICE)) * 100}%`,
+    left: `${((localPrice.minPrice - MIN_PRICE) / (MAX_PRICE - MIN_PRICE)) * 100}%`,
+    width: `${((localPrice.maxPrice - localPrice.minPrice) / (MAX_PRICE - MIN_PRICE)) * 100}%`,
   });
 
   return (
@@ -41,15 +56,15 @@ const PriceSlider = () => {
             type="range"
             min={MIN_PRICE}
             max={MAX_PRICE}
-            value={price.minPrice}
+            value={localPrice.minPrice}
             onChange={handleMinChange}
             className={styles.thumb}
           />
           <input
             type="range"
             min={MIN_PRICE}
             max={MAX_PRICE}
-            value={price.maxPrice}
+            value={localPrice.maxPrice}
             onChange={handleMaxChange}
             className={styles.thumb}
           />

diff --git a/src/hooks/debounce.ts b/src/hooks/debounce.ts
@@ -1,14 +1,13 @@
-const debounce = <T extends (...args: unknown[]) => void>(
+const debounce = <T extends (...args: Parameters<T>) => void>(
   callback: T,
   delay: number,
 ): ((...args: Parameters<T>) => void) => {
-  let timer: ReturnType<typeof setTimeout> | null = null; // 명확한 타입 지정
-  const callbackRef = callback; // 최신 콜백을 참조하는 변수
+  let timer: ReturnType<typeof setTimeout> | null = null;
 
   return (...args: Parameters<T>) => {
-    if (timer) clearTimeout(timer);
+    if (timer) clearTimeout(timer); // 기존 타이머 제거
     timer = setTimeout(() => {
-      callbackRef(...args); // 최신 callback 호출
+      callback(...args); // 최신 callback 호출
     }, delay);
   };
 };

diff --git a/src/hooks/useFilter.ts b/src/hooks/useFilter.ts
@@ -1,6 +1,6 @@
 import useFetchFilteredList from '@apis/filter';
 import { fetchFilteredCount } from '@apis/filter/axios';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { useAtom } from 'jotai';
 import { useNavigate } from 'react-router-dom';
 import queryClient from 'src/queryClient';
@@ -21,7 +21,7 @@ const useFilter = () => {
 
   const getGroupedFilters = () => filterListInstance.getGroupedStates();
 
-  const { data: totalCount = 0 } = useQuery({
+  const { data: totalCount } = useQuery({
     queryKey: ['filteredCount', price, content],
     queryFn: async () => {
       const groupedFilters = getGroupedFilters();
@@ -36,6 +36,7 @@ const useFilter = () => {
       return response.count;
     },
     staleTime: 0,
+    placeholderData: keepPreviousData,
   });
 
   // 필터 상태 토글