diff --git a/package-lock.json b/package-lock.json
index f6efef56..0fab6037 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,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",
@@ -5687,6 +5689,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.14",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
+      "integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -14089,7 +14097,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
diff --git a/package.json b/package.json
index 1cb6f6bf..24566719 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/common-layout/FilterBar.tsx b/src/components/common-layout/FilterBar.tsx
index e992ebc1..1e4f4d4f 100644
--- a/src/components/common-layout/FilterBar.tsx
+++ b/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>
diff --git a/src/components/input/search-input/SearchInput.tsx b/src/components/input/search-input/SearchInput.tsx
index 5b47f722..f623dbc7 100644
--- a/src/components/input/search-input/SearchInput.tsx
+++ b/src/components/input/search-input/SearchInput.tsx
@@ -1,6 +1,7 @@
-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;
@@ -8,13 +9,31 @@ interface SearchInputProps {
 }
 
 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>
   );
 }
 
diff --git a/src/features/chat-room/container/chat-bubble-list/ChatBubbleList.tsx b/src/features/chat-room/container/chat-bubble-list/ChatBubbleList.tsx
index dcde2b87..fb6a85c3 100644
--- a/src/features/chat-room/container/chat-bubble-list/ChatBubbleList.tsx
+++ b/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}