Merge pull request #280 from ttaerrim/map-search-debounce

[Modify] 맵 모달 debounce 적용

app/frontend/src/components/Modal/MapModal/index.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { RequestCreateMogacoDto } from '@morak/apitype';
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import { Button, Input } from '@/components';
+import { useDebounce } from '@/hooks';
 import { queryKeys } from '@/queries';
 import { useModalAtom } from '@/stores';
 import { sansBold14, sansRegular12, sansRegular14 } from '@/styles/font.css';
@@ -30,6 +31,7 @@ type Coord = {
 export function MapModal({ saveAddress }: MapModalProps) {
   const [open, setOpen] = useModalAtom();
   const [searchKeyword, setSearchKeyword] = useState('');
+  const debouncedSearchKeyword = useDebounce(searchKeyword);
   const [selectedAddress, setSelectedAddress] = useState('');
   const [selectedCoord, setSelectedCoord] = useState<Coord>({
     latitude: null,
@@ -44,15 +46,18 @@ export function MapModal({ saveAddress }: MapModalProps) {
 
   const { data: tmapResponse } = useQuery({
     ...queryKeys.tmap.searchAddress({
-      searchKeyword,
+      searchKeyword: debouncedSearchKeyword,
     }),
-    enabled: !!searchKeyword,
+    enabled: !!debouncedSearchKeyword,
+    placeholderData: keepPreviousData,
   });
+
   const addressData = tmapResponse?.searchPoiInfo?.pois?.poi;
 
   const resetSearchKeyword = () => {
     setSearchKeyword('');
   };
+
   const closeModal = () => {
     resetSearchKeyword();
     setOpen(false);

app/frontend/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useDebounce';
 export * from './useModal';
 export * from './useRouter';
 export * from './useSetUserInfo';

app/frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+const DEFAULT_DELAY = 500;
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedValue(value),
+      delay || DEFAULT_DELAY,
+    );
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}