✨[Feat] 모임 찾기 검색 debounce 적용

package.json

@@ -32,9 +32,11 @@
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.61.3",
+    "@types/lodash": "^4.17.14",
     "@types/react-datepicker": "^6.2.0",
     "@types/sockjs-client": "^1.5.4",
     "axios": "^1.7.8",
+    "lodash": "^4.17.21",
     "next": "15.0.3",
     "react": "^18.3.1",
     "react-datepicker": "^7.5.0",

src/components/common-layout/FilterBar.tsx

@@ -1,10 +1,6 @@
-import {
-  CategoryTabs,
-  SearchSection,
-  FilterSection,
-} from '@/components/common-layout';
+import { CategoryTabs, FilterSection } from '@/components/common-layout';
 import { BookClubParams } from '@/types/bookclubs';
-
+import SearchInput from '@/components/input/search-input/SearchInput';
 interface FilterBarProps {
   filters: BookClubParams;
   handleFilterChange: (newFilter: Partial<BookClubParams>) => void;
@@ -14,11 +10,10 @@ function FilterBar({ filters, handleFilterChange }: FilterBarProps) {
   return (
     <section className="flex w-full flex-col gap-y-3 px-[20px] pt-[20px] md:px-[24px] lg:px-[102px]">
       <CategoryTabs filters={filters} onFilterChange={handleFilterChange} />
-      <SearchSection
-        searchValue={filters?.searchKeyword || ''}
-        onSearchChange={(value: string) =>
-          handleFilterChange({ searchKeyword: value })
-        }
+      <SearchInput
+        value={filters?.searchKeyword || ''}
+        onChange={(e) => handleFilterChange({ searchKeyword: e.target.value })}
+        aria-label="책 검색"
       />
       <FilterSection onFilterChange={handleFilterChange} />
     </section>

src/components/input/search-input/SearchInput.tsx

@@ -1,20 +1,39 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useMemo, useState } from 'react';
 import Input from '../Input';
 import SearchIcon from '../../../../public/icons/SearchIcon';
+import { debounce } from 'lodash';
 
 interface SearchInputProps {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 function SearchInput({ value, onChange }: SearchInputProps) {
+  const [inputValue, setInputValue] = useState(value);
+
+  const debouncedOnChange = useMemo(
+    () =>
+      debounce((value: string) => {
+        onChange({ target: { value } } as ChangeEvent<HTMLInputElement>);
+      }, 300),
+    [onChange],
+  );
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    debouncedOnChange(newValue);
+  };
+
   return (
-    <Input
-      value={value}
-      onChange={onChange}
-      placeholder={'검색어를 입력해주세요'}
-      icon={<SearchIcon />}
-    />
+    <div className="bg-white">
+      <Input
+        value={inputValue}
+        onChange={handleChange}
+        placeholder={'검색어를 입력해주세요'}
+        icon={<SearchIcon />}
+      />
+    </div>
   );
 }
 

src/features/chat-room/container/chat-bubble-list/ChatBubbleList.tsx

@@ -47,7 +47,7 @@ function ChatBubbleList({
   return (
     <div className="flex w-full flex-col gap-3 px-5">
       {groupedMessages.map((group, groupIndex) => (
-        <div key={groupIndex} className="flex w-full flex-col gap-3">
+        <div key={groupIndex} className="flex w-full flex-col gap-2">
           <div className="flex items-center justify-center py-1.5">
             <div className="rounded-full bg-gray-normal-01 px-3.5 py-1.5 text-sm font-medium text-gray-normal-03">
               {group.date}