diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx
index 7e9baace..dca52c6d 100644
--- a/src/pages/playground.tsx
+++ b/src/pages/playground.tsx
@@ -6,6 +6,7 @@ import { Header } from '@shared/ui/Header/Header';
 import { Modal } from '@shared/ui/Modal/Modal';
 import { Profile } from '@shared/ui/Profile/Profile';
 import { RadioButton } from '@shared/ui/RadioButton/RadioButton';
+import { SearchBar } from '@shared/ui/SearchBar';
 import { TextField } from '@shared/ui/TextField/TextField';
 import { useState } from 'react';
 
@@ -117,6 +118,11 @@ export default function Playground() {
           date="1일 전"
         />
       </section>
+      {/* Search Bar */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">SearchBar</h2>
+        <SearchBar placeholder="어떤 제품을 찾으시나요?" onSearch={() => {}} />
+      </section>
       {/* BannerCard */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Banner Card</h2>
diff --git a/src/shared/assets/icons/common/search-magnifying-glass.svg b/src/shared/assets/icons/common/search-magnifying-glass.svg
new file mode 100644
index 00000000..292fd756
--- /dev/null
+++ b/src/shared/assets/icons/common/search-magnifying-glass.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="M15 15L21 21M10 17C9.08075 17 8.1705 16.8189 7.32122 16.4672C6.47194 16.1154 5.70026 15.5998 5.05025 14.9497C4.40024 14.2997 3.88463 13.5281 3.53284 12.6788C3.18106 11.8295 3 10.9193 3 10C3 9.08075 3.18106 8.1705 3.53284 7.32122C3.88463 6.47194 4.40024 5.70026 5.05025 5.05025C5.70026 4.40024 6.47194 3.88463 7.32122 3.53284C8.1705 3.18106 9.08075 3 10 3C11.8565 3 13.637 3.7375 14.9497 5.05025C16.2625 6.36301 17 8.14348 17 10C17 11.8565 16.2625 13.637 14.9497 14.9497C13.637 16.2625 11.8565 17 10 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts
index 09af8252..bceccf8f 100644
--- a/src/shared/assets/icons/index.ts
+++ b/src/shared/assets/icons/index.ts
@@ -1,5 +1,6 @@
 import CaretDownMdIcon from './common/caret-down-md.svg?react';
 import CheckIcon from './common/check.svg?react';
 import DoneIcon from './common/done.svg?react';
+import SearchMagnifyingGlassIcon from './common/search-magnifying-glass.svg?react';
 
-export { CaretDownMdIcon, CheckIcon, DoneIcon };
+export { CaretDownMdIcon, CheckIcon, DoneIcon, SearchMagnifyingGlassIcon };
diff --git a/src/shared/ui/SearchBar/SearchBar.tsx b/src/shared/ui/SearchBar/SearchBar.tsx
new file mode 100644
index 00000000..5a2a7da8
--- /dev/null
+++ b/src/shared/ui/SearchBar/SearchBar.tsx
@@ -0,0 +1,49 @@
+import { SearchMagnifyingGlassIcon } from '@shared/assets/icons';
+import clsx from 'clsx';
+import { useState, type KeyboardEventHandler } from 'react';
+import { searchBarVariants } from './SearchBar.variants';
+
+export const SearchBar = ({
+  placeholder,
+  onSearch,
+}: {
+  placeholder?: string;
+  onSearch: (query: string) => void;
+}) => {
+  const [query, setQuery] = useState<string>('');
+  const [isFocused, setFocused] = useState<boolean>(false);
+
+  const isFilled = query.length > 0;
+
+  const styles = searchBarVariants({
+    state: isFocused ? (isFilled ? 'filled' : 'focused') : 'default',
+  });
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setQuery(e.target.value);
+  };
+
+  const handleEnterKey: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === 'Enter') {
+      onSearch(query);
+    }
+  };
+
+  return (
+    <div className={styles.root()}>
+      <div className={clsx(styles.wrapper())}>
+        <SearchMagnifyingGlassIcon className={styles.icon()} aria-hidden="true" />
+        <input
+          value={query}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onChange={handleChange}
+          className={styles.input()}
+          placeholder={placeholder}
+          aria-label={placeholder ?? 'Search'}
+          onKeyDown={handleEnterKey}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/shared/ui/SearchBar/SearchBar.variants.ts b/src/shared/ui/SearchBar/SearchBar.variants.ts
new file mode 100644
index 00000000..105e42b3
--- /dev/null
+++ b/src/shared/ui/SearchBar/SearchBar.variants.ts
@@ -0,0 +1,41 @@
+import { tv } from 'tailwind-variants';
+
+export const searchBarVariants = tv({
+  slots: {
+    root: ['flex flex-col'],
+    wrapper: [
+      'flex items-center',
+      'w-[550px] h-[44px]',
+      'px-[15px] py-[10px]',
+      'gap-[25px]',
+      'rounded-[var(--radius-m)]',
+      'transition-colors',
+    ],
+    icon: ['w-[24px] h-[24px] shrink-0', 'transition-colors'],
+    input: ['w-full bg-transparent outline-none', 'typo-body-1', 'placeholder:typo-body-1'],
+  },
+
+  variants: {
+    state: {
+      default: {
+        wrapper: ['bg-[var(--color-green-100)]'],
+        icon: ['text-[var(--color-gray-500)]'],
+        input: ['text-[var(--color-gray-500)]', 'placeholder:text-[var(--color-gray-500)]'],
+      },
+      filled: {
+        wrapper: ['bg-[var(--color-green-300)]'],
+        icon: ['text-[var(--color-black)]'],
+        input: ['text-[var(--color-black)]', 'placeholder:text-[var(--color-black)]'],
+      },
+      focused: {
+        wrapper: ['bg-[var(--color-green-300)]'],
+        icon: ['text-[var(--color-black)]'],
+        input: ['text-[var(--color-black)]'],
+      },
+    },
+  },
+
+  defaultVariants: {
+    state: 'default',
+  },
+});
diff --git a/src/shared/ui/SearchBar/index.ts b/src/shared/ui/SearchBar/index.ts
new file mode 100644
index 00000000..8c193316
--- /dev/null
+++ b/src/shared/ui/SearchBar/index.ts
@@ -0,0 +1 @@
+export { SearchBar } from './SearchBar';