feat: debounce로 검색 API 최적화

Author: ShipFriend0516

Diff for: app/posts/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { Post } from '@/app/types/Post';
 import PostList from '@/app/entities/post/list/PostList';
 import SearchSection from '@/app/entities/post/list/SearchSection';
+import { debounce } from 'lodash';
 
 const BlogList = () => {
   const [posts, setPosts] = useState<Post[]>();
@@ -20,8 +21,10 @@ const BlogList = () => {
     setLoading(false);
   };
 
+  const debouncedGetPosts = debounce(getPosts, 500);
+
   useEffect(() => {
-    getPosts(query);
+    debouncedGetPosts(query);
   }, [query]);
 
   return (

Diff for: package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@next/third-parties": "^15.1.2",
+    "@types/lodash": "^4.17.13",
     "@uiw/react-md-editor": "^4.0.4",
     "@vercel/blob": "^0.27.0",
     "axios": "^1.7.9",
+    "lodash": "^4.17.21",
     "mongoose": "^8.9.0",
     "next": "14.2.13",
     "next-auth": "^4.24.11",