diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index eff2dff..223af97 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,15 +5,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="2282bee4-92aa-4b11-a929-61d1077ffc85" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/components/Book.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/components/BookList.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/public/icons/next-triangle.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/public/icons/next.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/public/icons/prev.svg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/public/images/book-cover.png" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/components/SearchBar.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/pages/home.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/pages/home.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/icons/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/public/icons/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -73,7 +66,7 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1724659932934</updated>
-      <workItem from="1724659935397" duration="27406000" />
+      <workItem from="1724659935397" duration="27606000" />
     </task>
     <servers />
   </component>
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
new file mode 100644
index 0000000..c985e1a
--- /dev/null
+++ b/components/SearchBar.tsx
@@ -0,0 +1,41 @@
+import { IconArrowDown, IconSearch } from '@/public/icons';
+
+const SearchBar = ()=>{
+  return (
+    <div
+      className="w-4/5 h-[60px] flex flex-row items-center gap-3 border-2 border-gray-200 rounded-3xl drop-shadow-sm">
+      <div className="flex flex-row items-center justify-evenly w-[125px] h-full bg-gray-100 rounded-l-3xl">
+        <div className="text-xl pt-2 pb-2 pl-5">
+          All
+        </div>
+        <IconArrowDown
+          alt="arrow down icon"
+          width={20}
+          height={11}
+          className="top-10 cursor-pointer"
+          onClick={() => {
+            alert('검색 더보기 클릭!');
+          }}
+        ></IconArrowDown>
+      </div>
+      <div className="flex flex-row items-center justify-between pl-2 pr-2">
+        <input type="text" placeholder="Search"
+               className="text text-xl h-full w-[470px] outline-0 no-underline placeholder-gray-300">
+        </input>
+        <IconSearch
+          alt="search icon"
+          width={20}
+          height={20}
+          className="fixed right-5 cursor-pointer"
+          onClick={() => {
+            alert('검색 돋보기 클릭!');
+          }}
+        ></IconSearch>
+      </div>
+    </div>
+
+
+  );
+}
+
+export default SearchBar;
\ No newline at end of file
diff --git a/pages/home.tsx b/pages/home.tsx
index 4b63643..81544fe 100644
--- a/pages/home.tsx
+++ b/pages/home.tsx
@@ -4,6 +4,7 @@ import Logo from '@/public/images/small-logo.png';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import BookList from '@/components/BookList';
+import SearchBar from '@/components/SearchBar';
 
 // 더미 데이터
 const writingBooks = [
@@ -103,39 +104,10 @@ function Home() {
   return (
     <div className="w-full h-[100vh] flex flex-col items-center justify-center pl-[280px]">
       <SideNavigationBar></SideNavigationBar>
+
       <div className="w-5/6 h-[100vh] flex flex-col pt-12 items-center justify-start">
         {/*검색창*/}
-        <div
-          className="w-4/5 h-[60px] flex flex-row items-center gap-3 border-2 border-gray-200 rounded-3xl drop-shadow-sm">
-          <div className="flex flex-row items-center justify-evenly w-[125px] h-full bg-gray-100 rounded-l-3xl">
-            <div className="text-xl pt-2 pb-2 pl-5">
-              All
-            </div>
-            <IconArrowDown
-              alt="arrow down icon"
-              width={20}
-              height={11}
-              className="top-10 cursor-pointer"
-              onClick={() => {
-                alert('검색 더보기 클릭!');
-              }}
-            ></IconArrowDown>
-          </div>
-          <div className="flex flex-row items-center justify-between pl-2 pr-2">
-            <input type="text" placeholder="Search"
-                   className="text text-xl h-full w-[470px] outline-0 no-underline placeholder-gray-300">
-            </input>
-            <IconSearch
-              alt="search icon"
-              width={20}
-              height={20}
-              className="fixed right-5 cursor-pointer"
-              onClick={() => {
-                alert('검색 돋보기 클릭!');
-              }}
-            ></IconSearch>
-          </div>
-        </div>
+        <SearchBar />
 
         {/*이야기 만들기 베너*/}
         <div className="flex flex-row w-full h-[300px] items-center justify-evenly bg-[#CDCDCD]/10 mt-16 mb-16 pt-8 pb-8">