diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
new file mode 100644
index 0000000..71cbfe0
--- /dev/null
+++ b/components/SearchInput.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+interface SearchInputProps {
+  size: 'large' | 'medium';
+  value?: string;
+  onSubmit?: (value: string) => void;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+function SearchInput({
+  size = 'large',
+  onChange,
+  value = '',
+  onSubmit = () => {},
+  placeholder = '검색어를 입력해 주세요',
+}: SearchInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  // 크기별 스타일
+  const sizeStyles = {
+    large: {
+      container: 'w-[860px] h-[45px] ',
+      padding: 'p-[20px] pl-[15px]',
+    },
+    medium: {
+      container: 'w-[800px] h-[40px] ',
+      padding: 'p-[20px] pl-[15px]',
+    },
+  };
+
+  const currentSize = sizeStyles[size];
+
+  const inputStyles = [
+    currentSize.container,
+    currentSize.padding,
+    'rounded-lg',
+    'border-none',
+    'bg-gray-100',
+    'text-gray-500',
+    'text-16',
+    'placeholder:text-gray-400',
+    isFocused
+      ? 'outline outline-2 outline-green-100'
+      : 'focus:outline-green-100',
+  ].join(' ');
+
+  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    onChange(e.target.value); // 부모 컴포넌트에 값 전달
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    onSubmit(value); // 부모 컴포넌트에서 관리하는 value 전달
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex items-center rounded-lg bg-gray-100 px-[20px]"
+    >
+      <label htmlFor="searchInput">
+        <img src="/icon/icon-search.svg" alt="검색" />
+      </label>
+      <input
+        id="searchInput"
+        className={inputStyles}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={handleInputChange}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+    </form>
+  );
+}
+
+export default SearchInput;
diff --git a/public/icon/icon-search.svg b/public/icon/icon-search.svg
new file mode 100644
index 0000000..343e3af
--- /dev/null
+++ b/public/icon/icon-search.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 18C12.9333 18 14.5833 17.3192 15.95 15.9577C17.3166 14.5961 18 12.9436 18 11C18 9.06664 17.3166 7.41664 15.95 6.04998C14.5833 4.68331 12.9333 3.99998 11 3.99998C9.05639 3.99998 7.40383 4.68331 6.04228 6.04998C4.68074 7.41664 3.99998 9.06664 3.99998 11C3.99998 12.9436 4.68074 14.5961 6.04228 15.9577C7.40383 17.3192 9.05639 18 11 18ZM11 19.5C9.82049 19.5 8.71537 19.2769 7.6846 18.8307C6.65383 18.3846 5.75512 17.7782 4.98845 17.0115C4.2218 16.2448 3.6154 15.3461 3.16925 14.3154C2.72308 13.2846 2.5 12.1795 2.5 11C2.5 9.83074 2.72308 8.73075 3.16925 7.7C3.6154 6.66923 4.2218 5.76795 4.98845 4.99615C5.75512 4.22437 6.65383 3.6154 7.6846 3.16925C8.71537 2.72308 9.82049 2.5 11 2.5C12.1692 2.5 13.2692 2.72308 14.3 3.16925C15.3307 3.6154 16.232 4.22437 17.0038 4.99615C17.7756 5.76795 18.3846 6.66923 18.8307 7.7C19.2769 8.73075 19.5 9.83074 19.5 11C19.5 12.041 19.3233 13.0237 18.9701 13.9481C18.6169 14.8724 18.1288 15.7102 17.5057 16.4615L20.9827 19.9385C21.1314 20.0872 21.2016 20.2596 21.1932 20.4557C21.1849 20.6519 21.1064 20.8243 20.9577 20.973C20.8089 21.1115 20.6349 21.1807 20.4356 21.1807C20.2362 21.1807 20.0622 21.1115 19.9135 20.973L16.4461 17.5211C15.6948 18.1442 14.857 18.6297 13.9327 18.9778C13.0083 19.3259 12.0307 19.5 11 19.5Z" fill="#8F95B2"/>
+</svg>
diff --git a/tsconfig.json b/tsconfig.json
index 03d1b81..c32ac62 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -20,15 +16,9 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/components/*": [
-        "components/*"
-      ],
-      "@/styles/*": [
-        "styles/*"
-      ],
-      "@/pages/*": [
-        "pages/*"
-      ]
+      "@/components/*": ["components/*"],
+      "@/styles/*": ["styles/*"],
+      "@/pages/*": ["pages/*"]
     }
   },
   "include": [
@@ -37,9 +27,5 @@
     "components/**/*.ts",
     "components/**/*.tsx"
   ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    ".next"
-  ]
+  "exclude": ["node_modules", "dist", ".next"]
 }