diff --git a/Projects/App/Sources/Application/AppComponent+Playlist.swift b/Projects/App/Sources/Application/AppComponent+Playlist.swift
index b72e8f10e..bea6055ae 100644
--- a/Projects/App/Sources/Application/AppComponent+Playlist.swift
+++ b/Projects/App/Sources/Application/AppComponent+Playlist.swift
@@ -12,17 +12,12 @@ import PlayListDomain
 import PlayListDomainInterface
 import PlaylistFeature
 import PlaylistFeatureInterface
-import SearchFeature
 import StorageFeature
 
 // MARK: 변수명 주의
 // AppComponent 내 변수 == Dependency 내 변수  이름 같아야함
 
 public extension AppComponent {
-    var beforeSearchComponent: BeforeSearchComponent {
-        BeforeSearchComponent(parent: self)
-    }
-
     var playlistDetailFactory: any PlaylistDetailFactory {
         PlayListDetailComponent(parent: self)
     }
diff --git a/Projects/App/Sources/Application/AppComponent+Search.swift b/Projects/App/Sources/Application/AppComponent+Search.swift
new file mode 100644
index 000000000..d2f8c372d
--- /dev/null
+++ b/Projects/App/Sources/Application/AppComponent+Search.swift
@@ -0,0 +1,21 @@
+import Foundation
+import SearchFeature
+import SearchFeatureInterface
+
+extension AppComponent {
+    var searchFactory: any SearchFactory {
+        SearchComponent(parent: self)
+    }
+
+    var beforeSearchComponent: BeforeSearchComponent {
+        BeforeSearchComponent(parent: self)
+    }
+
+    var afterSearchComponent: AfterSearchComponent {
+        AfterSearchComponent(parent: self)
+    }
+
+    var afterSearchContentComponent: AfterSearchContentComponent {
+        AfterSearchContentComponent(parent: self)
+    }
+}
diff --git a/Projects/App/Sources/Application/AppComponent+Songs.swift b/Projects/App/Sources/Application/AppComponent+Songs.swift
index b8bcd05ff..fd69502b6 100644
--- a/Projects/App/Sources/Application/AppComponent+Songs.swift
+++ b/Projects/App/Sources/Application/AppComponent+Songs.swift
@@ -1,30 +1,9 @@
-//
-//  AppComponent+Search.swift
-//  WaktaverseMusic
-//
-//  Created by yongbeomkwak on 2023/02/07.
-//  Copyright © 2023 yongbeomkwak. All rights reserved.
-//
-
 import BaseFeature
 import HomeFeature
-import SearchFeature
 import SongsDomain
 import SongsDomainInterface
 
 public extension AppComponent {
-    var searchComponent: SearchComponent {
-        SearchComponent(parent: self)
-    }
-
-    var afterSearchComponent: AfterSearchComponent {
-        AfterSearchComponent(parent: self)
-    }
-
-    var afterSearchContentComponent: AfterSearchContentComponent {
-        AfterSearchContentComponent(parent: self)
-    }
-
     var homeComponent: HomeComponent {
         HomeComponent(parent: self)
     }
diff --git a/Projects/App/Sources/Application/NeedleGenerated.swift b/Projects/App/Sources/Application/NeedleGenerated.swift
index 08ac98d14..5aee5b3c8 100644
--- a/Projects/App/Sources/Application/NeedleGenerated.swift
+++ b/Projects/App/Sources/Application/NeedleGenerated.swift
@@ -33,6 +33,7 @@ import PlaylistFeature
 import PlaylistFeatureInterface
 import RootFeature
 import SearchFeature
+import SearchFeatureInterface
 import SignInFeature
 import SignInFeatureInterface
 import SongsDomain
@@ -170,8 +171,8 @@ private class MainTabBarDependencycd05b79389a6a7a6c20fProvider: MainTabBarDepend
     var chartComponent: ChartComponent {
         return appComponent.chartComponent
     }
-    var searchComponent: SearchComponent {
-        return appComponent.searchComponent
+    var searchFactory: any SearchFactory {
+        return appComponent.searchFactory
     }
     var artistComponent: ArtistComponent {
         return appComponent.artistComponent
@@ -788,9 +789,6 @@ extension AppComponent: Registration {
     public func registerItems() {
 
         localTable["keychain-any Keychain"] = { [unowned self] in self.keychain as Any }
-        localTable["searchComponent-SearchComponent"] = { [unowned self] in self.searchComponent as Any }
-        localTable["afterSearchComponent-AfterSearchComponent"] = { [unowned self] in self.afterSearchComponent as Any }
-        localTable["afterSearchContentComponent-AfterSearchContentComponent"] = { [unowned self] in self.afterSearchContentComponent as Any }
         localTable["homeComponent-HomeComponent"] = { [unowned self] in self.homeComponent as Any }
         localTable["newSongsComponent-NewSongsComponent"] = { [unowned self] in self.newSongsComponent as Any }
         localTable["newSongsContentComponent-NewSongsContentComponent"] = { [unowned self] in self.newSongsContentComponent as Any }
@@ -815,7 +813,6 @@ extension AppComponent: Registration {
         localTable["fetchLikeNumOfSongUseCase-any FetchLikeNumOfSongUseCase"] = { [unowned self] in self.fetchLikeNumOfSongUseCase as Any }
         localTable["addLikeSongUseCase-any AddLikeSongUseCase"] = { [unowned self] in self.addLikeSongUseCase as Any }
         localTable["cancelLikeSongUseCase-any CancelLikeSongUseCase"] = { [unowned self] in self.cancelLikeSongUseCase as Any }
-        localTable["beforeSearchComponent-BeforeSearchComponent"] = { [unowned self] in self.beforeSearchComponent as Any }
         localTable["playlistDetailFactory-any PlaylistDetailFactory"] = { [unowned self] in self.playlistDetailFactory as Any }
         localTable["myPlayListComponent-MyPlayListComponent"] = { [unowned self] in self.myPlayListComponent as Any }
         localTable["remotePlayListDataSource-any RemotePlayListDataSource"] = { [unowned self] in self.remotePlayListDataSource as Any }
@@ -931,7 +928,7 @@ extension MainTabBarComponent: Registration {
         keyPathToName[\MainTabBarDependency.fetchNoticeUseCase] = "fetchNoticeUseCase-any FetchNoticeUseCase"
         keyPathToName[\MainTabBarDependency.homeComponent] = "homeComponent-HomeComponent"
         keyPathToName[\MainTabBarDependency.chartComponent] = "chartComponent-ChartComponent"
-        keyPathToName[\MainTabBarDependency.searchComponent] = "searchComponent-SearchComponent"
+        keyPathToName[\MainTabBarDependency.searchFactory] = "searchFactory-any SearchFactory"
         keyPathToName[\MainTabBarDependency.artistComponent] = "artistComponent-ArtistComponent"
         keyPathToName[\MainTabBarDependency.storageComponent] = "storageComponent-StorageComponent"
         keyPathToName[\MainTabBarDependency.myInfoComponent] = "myInfoComponent-MyInfoComponent"
diff --git a/Projects/Features/BaseFeature/Sources/ViewControllers/BaseStoryboardReactorViewController.swift b/Projects/Features/BaseFeature/Sources/ViewControllers/BaseStoryboardReactorViewController.swift
index 9aed9c35e..a3d675ab8 100644
--- a/Projects/Features/BaseFeature/Sources/ViewControllers/BaseStoryboardReactorViewController.swift
+++ b/Projects/Features/BaseFeature/Sources/ViewControllers/BaseStoryboardReactorViewController.swift
@@ -10,11 +10,6 @@ open class BaseStoryboardReactorViewController<R: Reactor>: UIViewController, St
     ViewControllerFromStoryBoard {
     public var disposeBag = DisposeBag()
 
-//    @available(*, unavailable)
-//    public required init?(coder: NSCoder) {
-//        fatalError("init(coder:) has not been implemented")
-//    }
-
     override open func viewDidLoad() {
         super.viewDidLoad()
         configureUI()
diff --git a/Projects/Features/MainTabFeature/Sources/Components/MainTabBarComponent.swift b/Projects/Features/MainTabFeature/Sources/Components/MainTabBarComponent.swift
index 825df6353..7820ba211 100644
--- a/Projects/Features/MainTabFeature/Sources/Components/MainTabBarComponent.swift
+++ b/Projects/Features/MainTabFeature/Sources/Components/MainTabBarComponent.swift
@@ -7,13 +7,14 @@ import MyInfoFeature
 import NeedleFoundation
 import NoticeDomainInterface
 import SearchFeature
+import SearchFeatureInterface
 import StorageFeature
 
 public protocol MainTabBarDependency: Dependency {
     var fetchNoticeUseCase: any FetchNoticeUseCase { get }
     var homeComponent: HomeComponent { get }
     var chartComponent: ChartComponent { get }
-    var searchComponent: SearchComponent { get }
+    var searchFactory: any SearchFactory { get }
     var artistComponent: ArtistComponent { get }
     var storageComponent: StorageComponent { get }
     var myInfoComponent: MyInfoComponent { get }
@@ -30,7 +31,7 @@ public final class MainTabBarComponent: Component<MainTabBarDependency> {
             ),
             homeComponent: self.dependency.homeComponent,
             chartComponent: self.dependency.chartComponent,
-            searchComponent: self.dependency.searchComponent,
+            searchFactory: self.dependency.searchFactory,
             artistComponent: self.dependency.artistComponent,
             storageCompoent: self.dependency.storageComponent,
             myInfoComponent: self.dependency.myInfoComponent,
diff --git a/Projects/Features/MainTabFeature/Sources/ViewControllers/MainTabBarViewController.swift b/Projects/Features/MainTabFeature/Sources/ViewControllers/MainTabBarViewController.swift
index b2621069c..601739622 100644
--- a/Projects/Features/MainTabFeature/Sources/ViewControllers/MainTabBarViewController.swift
+++ b/Projects/Features/MainTabFeature/Sources/ViewControllers/MainTabBarViewController.swift
@@ -8,6 +8,7 @@ import NoticeDomainInterface
 import RxCocoa
 import RxSwift
 import SearchFeature
+import SearchFeatureInterface
 import SnapKit
 import StorageFeature
 import UIKit
@@ -20,7 +21,7 @@ public final class MainTabBarViewController: BaseViewController, ViewControllerF
         return [
             homeComponent.makeView().wrapNavigationController,
             chartComponent.makeView().wrapNavigationController,
-            searchComponent.makeView().wrapNavigationController,
+            searchFactory.makeView().wrapNavigationController,
             artistComponent.makeView().wrapNavigationController,
             storageComponent.makeView().wrapNavigationController,
             myInfoComponent.makeView().wrapNavigationController
@@ -34,7 +35,7 @@ public final class MainTabBarViewController: BaseViewController, ViewControllerF
 
     private var homeComponent: HomeComponent!
     private var chartComponent: ChartComponent!
-    private var searchComponent: SearchComponent!
+    private var searchFactory: SearchFactory!
     private var artistComponent: ArtistComponent!
     private var storageComponent: StorageComponent!
     private var myInfoComponent: MyInfoComponent!
@@ -62,7 +63,7 @@ public final class MainTabBarViewController: BaseViewController, ViewControllerF
         viewModel: MainTabBarViewModel,
         homeComponent: HomeComponent,
         chartComponent: ChartComponent,
-        searchComponent: SearchComponent,
+        searchFactory: SearchFactory,
         artistComponent: ArtistComponent,
         storageCompoent: StorageComponent,
         myInfoComponent: MyInfoComponent,
@@ -74,7 +75,7 @@ public final class MainTabBarViewController: BaseViewController, ViewControllerF
         viewController.viewModel = viewModel
         viewController.homeComponent = homeComponent
         viewController.chartComponent = chartComponent
-        viewController.searchComponent = searchComponent
+        viewController.searchFactory = searchFactory
         viewController.artistComponent = artistComponent
         viewController.storageComponent = storageCompoent
         viewController.myInfoComponent = myInfoComponent
diff --git a/Projects/Features/PlaylistFeature/Sources/ViewControllers/PlayListDetailViewController.swift b/Projects/Features/PlaylistFeature/Sources/ViewControllers/PlayListDetailViewController.swift
index 2177efb2f..8e10f0d73 100644
--- a/Projects/Features/PlaylistFeature/Sources/ViewControllers/PlayListDetailViewController.swift
+++ b/Projects/Features/PlaylistFeature/Sources/ViewControllers/PlayListDetailViewController.swift
@@ -137,9 +137,9 @@ internal class PlayListDetailViewController: BaseStoryboardReactorViewController
     override public func bindState(reactor: PlaylistDetailReactor) {
         super.bindState(reactor: reactor)
 
-        let currentState = reactor.state.share(replay: 4)
+        let sharedState = reactor.state.share(replay: 4)
 
-        currentState.map(\.dataSource)
+        sharedState.map(\.dataSource)
             .withUnretained(self)
             .do(onNext: { owner, model in
 
@@ -158,7 +158,7 @@ internal class PlayListDetailViewController: BaseStoryboardReactorViewController
             .bind(to: tableView.rx.items(dataSource: createDatasources()))
             .disposed(by: disposeBag)
 
-        currentState.map(\.header)
+        sharedState.map(\.header)
             .withUnretained(self)
             .do(onNext: { owner, model in
 
@@ -166,7 +166,7 @@ internal class PlayListDetailViewController: BaseStoryboardReactorViewController
                 let newFrame: CGRect = CGRect(x: 0, y: 0, width: APP_WIDTH(), height: imageHeight + 20)
                 owner.tableView.tableHeaderView?.frame = newFrame
             })
-            .bind(onNext: { owner, model in
+            .bind { owner, model in
 
                 guard let type = owner.reactor?.type else { return }
 
@@ -182,13 +182,12 @@ internal class PlayListDetailViewController: BaseStoryboardReactorViewController
                 owner.playListCountLabel.text = model.songCount
                 owner.playListNameLabel.text = model.title
                 owner.editPlayListNameButton.setImage(DesignSystemAsset.Storage.storageEdit.image, for: .normal)
-
-            })
+            }
             .disposed(by: disposeBag)
 
-        currentState.map(\.selectedItemCount)
+        sharedState.map(\.selectedItemCount)
             .withUnretained(self)
-            .bind(onNext: { owner, count in
+            .bind { owner, count in
                 guard let type = owner.reactor?.type else {
                     return
                 }
@@ -210,13 +209,12 @@ internal class PlayListDetailViewController: BaseStoryboardReactorViewController
                         owner.songCartView?.delegate = owner
                     }
                 }
-
-            })
+            }
             .disposed(by: disposeBag)
 
-        currentState.map(\.isEditing)
+        sharedState.map(\.isEditing)
             .withUnretained(self)
-            .bind(onNext: { owner, flag in
+            .bind { owner, flag in
                 owner.navigationController?.interactivePopGestureRecognizer?.delegate = flag ? owner : nil
                 owner.moreButton.isHidden = flag
                 owner.editPlayListNameButton.isHidden = !flag
@@ -225,8 +223,7 @@ internal class PlayListDetailViewController: BaseStoryboardReactorViewController
 
                 owner.tableView.isEditing = flag
                 owner.tableView.reloadData()
-
-            })
+            }
             .disposed(by: disposeBag)
     }
 
diff --git a/Projects/Features/SearchFeature/Interface/SearchFactory.swift b/Projects/Features/SearchFeature/Interface/SearchFactory.swift
new file mode 100644
index 000000000..880e54544
--- /dev/null
+++ b/Projects/Features/SearchFeature/Interface/SearchFactory.swift
@@ -0,0 +1,6 @@
+import BaseFeatureInterface
+import UIKit
+
+public protocol SearchFactory {
+    func makeView() -> UIViewController
+}
diff --git a/Projects/Features/SearchFeature/Project.swift b/Projects/Features/SearchFeature/Project.swift
index cc9752bad..f5a06e708 100644
--- a/Projects/Features/SearchFeature/Project.swift
+++ b/Projects/Features/SearchFeature/Project.swift
@@ -5,6 +5,9 @@ import ProjectDescriptionHelpers
 let project = Project.module(
     name: ModulePaths.Feature.SearchFeature.rawValue,
     targets: [
+        .interface(module: .feature(.SearchFeature), dependencies: [
+            .feature(target: .BaseFeature, type: .interface)
+        ]),
         .implements(
             module: .feature(.SearchFeature),
             product: .staticFramework,
@@ -12,6 +15,7 @@ let project = Project.module(
                 resources: ["Resources/**"],
                 dependencies: [
                     .feature(target: .PlayerFeature),
+                    .feature(target: .SearchFeature, type: .interface),
                     .feature(target: .PlaylistFeature, type: .interface),
                     .domain(target: .SongsDomain, type: .interface),
                 ]
diff --git a/Projects/Features/SearchFeature/Resources/Search.storyboard b/Projects/Features/SearchFeature/Resources/Search.storyboard
index e6fd6c2d1..126479869 100644
--- a/Projects/Features/SearchFeature/Resources/Search.storyboard
+++ b/Projects/Features/SearchFeature/Resources/Search.storyboard
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Y6W-OH-hqX">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="22154" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Y6W-OH-hqX">
     <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22130"/>
         <capability name="Image references" minToolsVersion="12.0"/>
         <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
@@ -132,9 +132,6 @@
                                                 <state key="normal" title="취소">
                                                     <color key="titleColor" name="gray400"/>
                                                 </state>
-                                                <connections>
-                                                    <action selector="cancelButtonAction:" destination="Y6W-OH-hqX" eventType="touchUpInside" id="3JA-YC-r5f"/>
-                                                </connections>
                                             </button>
                                         </subviews>
                                         <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
@@ -179,7 +176,7 @@
                     <tabBarItem key="tabBarItem" title="검색" id="3UJ-E3-BYc"/>
                     <simulatedTabBarMetrics key="simulatedBottomBarMetrics"/>
                     <connections>
-                        <outlet property="cancelButton" destination="pwf-8T-rR0" id="9ug-Jg-CPu"/>
+                        <outlet property="cancelButton" destination="pwf-8T-rR0" id="ydM-fP-bdc"/>
                         <outlet property="contentView" destination="jLC-fz-G5h" id="v7E-Mr-1a8"/>
                         <outlet property="contentViewBottomConstraint" destination="znF-Ya-K6h" id="gP4-l4-S2x"/>
                         <outlet property="searchHeaderView" destination="nj5-Rh-R0O" id="evQ-ZJ-eOe"/>
@@ -205,20 +202,20 @@
                                 <color key="sectionIndexBackgroundColor" name="gray100"/>
                                 <prototypes>
                                     <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="none" indentationWidth="10" reuseIdentifier="RecentRecordTableViewCell" id="LHP-CS-jsI" userLabel="RecentRecordTableViewCell" customClass="RecentRecordTableViewCell" customModule="SearchFeature">
-                                        <rect key="frame" x="0.0" y="50" width="393" height="44"/>
+                                        <rect key="frame" x="0.0" y="50" width="393" height="45"/>
                                         <autoresizingMask key="autoresizingMask"/>
                                         <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="LHP-CS-jsI" id="BUw-KI-TDl">
-                                            <rect key="frame" x="0.0" y="0.0" width="393" height="44"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="393" height="45"/>
                                             <autoresizingMask key="autoresizingMask"/>
                                             <subviews>
                                                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="iXL-tQ-Z5X">
-                                                    <rect key="frame" x="20" y="11.666666666666664" width="42" height="21"/>
+                                                    <rect key="frame" x="20" y="12" width="42" height="21"/>
                                                     <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                     <color key="textColor" name="gray900"/>
                                                     <nil key="highlightedColor"/>
                                                 </label>
                                                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" adjustsImageSizeForAccessibilityContentSizeCategory="YES" lineBreakMode="middleTruncation" pointerInteraction="YES" translatesAutoresizingMaskIntoConstraints="NO" id="5Iq-pV-i2z">
-                                                    <rect key="frame" x="353" y="12" width="20" height="20"/>
+                                                    <rect key="frame" x="353" y="12.666666666666664" width="20" height="20"/>
                                                     <constraints>
                                                         <constraint firstAttribute="width" constant="20" id="I9X-gP-RMq"/>
                                                         <constraint firstAttribute="height" constant="20" id="evP-iS-xvt"/>
@@ -280,16 +277,16 @@
     <resources>
         <image name="add" width="32" height="32"/>
         <namedColor name="SUB 1">
-            <color red="0.9570000171661377" green="1" blue="0.50599998235702515" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+            <color red="0.15294117647058825" green="0.37647058823529411" blue="0.95686274509803926" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>
         <namedColor name="gray100">
             <color red="0.94900000095367432" green="0.9570000171661377" blue="0.96899998188018799" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>
         <namedColor name="gray400">
-            <color red="0.59600001573562622" green="0.63499999046325684" blue="0.70200002193450928" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+            <color red="0.80000000000000004" green="0.80000000000000004" blue="0.80000000000000004" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>
         <namedColor name="gray900">
-            <color red="0.063000001013278961" green="0.093999996781349182" blue="0.15700000524520874" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+            <color red="0.098039215686274508" green="0.10196078431372549" blue="0.10980392156862745" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>
         <systemColor name="systemBackgroundColor">
             <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
diff --git a/Projects/Features/SearchFeature/Sources/Components/SearchComponent.swift b/Projects/Features/SearchFeature/Sources/Components/SearchComponent.swift
index 66a70b0e0..b87e1aa64 100644
--- a/Projects/Features/SearchFeature/Sources/Components/SearchComponent.swift
+++ b/Projects/Features/SearchFeature/Sources/Components/SearchComponent.swift
@@ -1,6 +1,8 @@
 import BaseFeatureInterface
 import Foundation
 import NeedleFoundation
+import SearchFeatureInterface
+import UIKit
 
 public protocol SearchDependency: Dependency {
     var beforeSearchComponent: BeforeSearchComponent { get }
@@ -8,10 +10,10 @@ public protocol SearchDependency: Dependency {
     var textPopUpFactory: any TextPopUpFactory { get }
 }
 
-public final class SearchComponent: Component<SearchDependency> {
-    public func makeView() -> SearchViewController {
+public final class SearchComponent: Component<SearchDependency>, SearchFactory {
+    public func makeView() -> UIViewController {
         return SearchViewController.viewController(
-            viewModel: .init(),
+            reactor: SearchReactor(),
             beforeSearchComponent: self.dependency.beforeSearchComponent,
             afterSearchComponent: self.dependency.afterSearchComponent,
             textPopUpFactory: dependency.textPopUpFactory
diff --git a/Projects/Features/SearchFeature/Sources/Enum/Enum+Search .swift b/Projects/Features/SearchFeature/Sources/Enum/Enum+Search.swift
similarity index 83%
rename from Projects/Features/SearchFeature/Sources/Enum/Enum+Search .swift
rename to Projects/Features/SearchFeature/Sources/Enum/Enum+Search.swift
index bf395e20b..9e05a7875 100644
--- a/Projects/Features/SearchFeature/Sources/Enum/Enum+Search .swift	
+++ b/Projects/Features/SearchFeature/Sources/Enum/Enum+Search.swift
@@ -18,3 +18,9 @@ public enum TabPosition: Int {
     case artist
     case remix
 }
+
+public enum TypingStatus {
+    case before
+    case typing
+    case search
+}
diff --git a/Projects/Features/SearchFeature/Sources/Reactors/SearchReactor.swift b/Projects/Features/SearchFeature/Sources/Reactors/SearchReactor.swift
new file mode 100644
index 000000000..1cca7551f
--- /dev/null
+++ b/Projects/Features/SearchFeature/Sources/Reactors/SearchReactor.swift
@@ -0,0 +1,74 @@
+import BaseFeature
+import Foundation
+import LogManager
+import ReactorKit
+import RxRelay
+import RxSwift
+import Utility
+
+final class SearchReactor: Reactor {
+    var disposeBag: DisposeBag = DisposeBag()
+
+    enum Action {
+        case switchTypingState(TypingStatus)
+        case updateText(String)
+        case cancelButtonDidTap
+    }
+
+    enum Mutation {
+        case updateTypingState(state: TypingStatus)
+        case updateText(String)
+    }
+
+    struct State {
+        var typingState: TypingStatus
+        var text: String
+    }
+
+    var initialState: State
+
+    init() {
+        self.initialState = State(
+            typingState: .before,
+            text: ""
+        )
+    }
+
+    deinit {
+        LogManager.printDebug("❌ \(Self.self) deinit")
+    }
+
+    func mutate(action: Action) -> Observable<Mutation> {
+        switch action {
+        case let .switchTypingState(state):
+            updateTypingState(state)
+        case .cancelButtonDidTap:
+            updateTypingState(.before)
+        case let .updateText(text):
+            updateText(text)
+        }
+    }
+
+    func reduce(state: State, mutation: Mutation) -> State {
+        var newState = state
+
+        switch mutation {
+        case let .updateTypingState(state):
+            newState.typingState = state
+        case let .updateText(text):
+            newState.text = text
+        }
+
+        return newState
+    }
+}
+
+fileprivate extension SearchReactor {
+    func updateTypingState(_ state: TypingStatus) -> Observable<Mutation> {
+        return .just(.updateTypingState(state: state))
+    }
+
+    func updateText(_ text: String) -> Observable<Mutation> {
+        return .just(.updateText(text))
+    }
+}
diff --git a/Projects/Features/SearchFeature/Sources/ViewControllers/BeforeSearchContentViewController.swift b/Projects/Features/SearchFeature/Sources/ViewControllers/BeforeSearchContentViewController.swift
index 24049fbef..aee437249 100644
--- a/Projects/Features/SearchFeature/Sources/ViewControllers/BeforeSearchContentViewController.swift
+++ b/Projects/Features/SearchFeature/Sources/ViewControllers/BeforeSearchContentViewController.swift
@@ -128,11 +128,10 @@ extension BeforeSearchContentViewController {
             return
         }
 
-        parent.viewModel.output.isFoucused
-            .withLatestFrom(parent.viewModel.input.textString) { ($0, $1) }
-            .map { (focus: Bool, str: String) -> Bool in
-                return focus == false && str.isWhiteSpace == true
-            }
+        parent.reactor?.state
+            .map(\.typingState)
+            .asObservable()
+            .map { $0 == .before }
             .bind(to: output.showRecommend)
             .disposed(by: disposeBag)
     }
diff --git a/Projects/Features/SearchFeature/Sources/ViewControllers/SearchViewController.swift b/Projects/Features/SearchFeature/Sources/ViewControllers/SearchViewController.swift
index a9701d940..f734a1978 100644
--- a/Projects/Features/SearchFeature/Sources/ViewControllers/SearchViewController.swift
+++ b/Projects/Features/SearchFeature/Sources/ViewControllers/SearchViewController.swift
@@ -10,8 +10,17 @@ import SnapKit
 import UIKit
 import Utility
 
-public final class SearchViewController: BaseViewController, ViewControllerFromStoryBoard, ContainerViewType,
+internal final class SearchViewController: BaseStoryboardReactorViewController<SearchReactor>, ContainerViewType,
     EqualHandleTappedType {
+    private enum Font {
+        static let headerFontSize: CGFloat = 16
+    }
+
+    private enum Color {
+        static let pointColor: UIColor = DesignSystemAsset.PrimaryColor.point.color
+        static let grayColor: UIColor = DesignSystemAsset.GrayColor.gray400.color
+    }
+
     @IBOutlet weak var searchImageView: UIImageView!
     @IBOutlet weak var searchTextFiled: UITextField!
     @IBOutlet weak var cancelButton: UIButton!
@@ -19,60 +28,48 @@ public final class SearchViewController: BaseViewController, ViewControllerFromS
     @IBOutlet public weak var contentView: UIView!
     @IBOutlet weak var contentViewBottomConstraint: NSLayoutConstraint!
 
-    var viewModel: SearchViewModel!
-    let disposeBag = DisposeBag()
     var beforeSearchComponent: BeforeSearchComponent!
     var afterSearchComponent: AfterSearchComponent!
     var textPopUpFactory: TextPopUpFactory!
 
-    lazy var beforeVc = beforeSearchComponent.makeView()
-    lazy var afterVc = afterSearchComponent.makeView()
+    private lazy var beforeVC = beforeSearchComponent.makeView().then {
+        $0.delegate = self
+    }
+
+    private lazy var afterVC = afterSearchComponent.makeView()
 
     override public func viewDidLoad() {
         super.viewDidLoad()
-        configureUI()
-        rxBindTask()
     }
 
-    override public func viewDidAppear(_ animated: Bool) {
+    override func viewDidAppear(_ animated: Bool) {
         super.viewDidAppear(animated)
     }
 
     public static func viewController(
-        viewModel: SearchViewModel,
+        reactor: SearchReactor,
         beforeSearchComponent: BeforeSearchComponent,
         afterSearchComponent: AfterSearchComponent,
         textPopUpFactory: TextPopUpFactory
     ) -> SearchViewController {
         let viewController = SearchViewController.viewController(storyBoardName: "Search", bundle: Bundle.module)
-        viewController.viewModel = viewModel
+
+        viewController.reactor = reactor
         viewController.beforeSearchComponent = beforeSearchComponent
         viewController.afterSearchComponent = afterSearchComponent
         viewController.textPopUpFactory = textPopUpFactory
         return viewController
     }
 
-    @IBAction func cancelButtonAction(_ sender: Any) {
-        self.searchTextFiled.rx.text.onNext("")
-        self.viewModel.input.textString.accept("")
-
-        if let nowChildVc = self.children.first as? AfterSearchViewController {
-            nowChildVc.clearSongCart()
-        }
-
-        self.bindSubView(false)
-        self.view.endEditing(true)
-        self.viewModel.output.isFoucused.accept(false)
-    }
-}
+    override public func configureUI() {
+        super.configureUI()
 
-extension SearchViewController {
-    private func configureUI() {
         // MARK: 검색 돋보기 이미지
         self.searchImageView.image = DesignSystemAsset.Search.search.image.withRenderingMode(.alwaysTemplate)
-        let headerFontSize: CGFloat = 16
+
+        // MARK: 서치바
         self.searchTextFiled.borderStyle = .none // 텍스트 필드 테두리 제거
-        self.searchTextFiled.font = DesignSystemFontFamily.Pretendard.medium.font(size: headerFontSize)
+        self.searchTextFiled.font = DesignSystemFontFamily.Pretendard.medium.font(size: Font.headerFontSize)
 
         // MARK: 검색 취소 버튼
         self.cancelButton.titleLabel?.text = "취소"
@@ -81,55 +78,85 @@ extension SearchViewController {
         self.cancelButton.layer.borderColor = DesignSystemAsset.GrayColor.gray200.color.cgColor
         self.cancelButton.layer.borderWidth = 1
         self.cancelButton.backgroundColor = .white
-        self.viewModel.output.isFoucused.accept(false)
 
         self.searchTextFiled.tintColor = UIColor.white
-        self.view.backgroundColor = .clear // DesignSystemAsset.GrayColor.gray100.color
-        self.add(asChildViewController: beforeVc)
-        beforeVc.delegate = self
+        self.view.backgroundColor = .clear
+
+        self.add(asChildViewController: beforeVC)
     }
 
-    private func bindSubView(_ afterSearch: Bool) {
-        /*
-         A:부모
-         B:자식
+    override public func bind(reactor: SearchReactor) {
+        super.bind(reactor: reactor)
+    }
 
-         서브뷰 추가
-         A.addChild(B)
-         A.view.addSubview(B.view)
-         B.didMove(toParent: A)
+    override public func bindState(reactor: SearchReactor) {
+        super.bindState(reactor: reactor)
 
-         서브뷰 삭제
-         B.willMove(toParent: nil) // 제거되기 직전에 호출
-         B.removeFromParent() // parentVC로 부터 관계 삭제
-         B.view.removeFromSuperview() // parentVC.view.addsubView()와 반대 기능
+        let sharedState = reactor.state.share(replay: 1)
 
-         */
+        sharedState
+            .map { ($0.typingState, $0.text) }
+            .withUnretained(self)
+            .bind { owner, data in
 
-        if let nowChildVc = children.first as? BeforeSearchContentViewController {
-            if afterSearch == false {
-                return
+                let (state, text) = data
 
-            } else {
-                self.remove(asChildViewController: beforeVc)
-                self.add(asChildViewController: afterVc)
-                afterVc.input.text.accept(viewModel.input.textString.value)
-            }
-        } else if let nowChildVc = children.first as? AfterSearchViewController {
-            if afterSearch == true {
-                return
+                owner.cancelButton.alpha = state == .typing ? 1.0 : .zero
+                owner.reactSearchHeader(state)
+                owner.bindSubView(state)
+
+                guard state == .search else {
+                    return
+                }
 
-            } else {
-                self.remove(asChildViewController: afterVc)
-                self.add(asChildViewController: beforeVc)
-                beforeVc.delegate = self
+                if text.isEmpty {
+                    guard let textPopupViewController = owner.textPopUpFactory.makeView(
+                        text: "검색어를 입력해주세요.",
+                        cancelButtonIsHidden: true,
+                        allowsDragAndTapToDismiss: nil,
+                        confirmButtonText: nil,
+                        cancelButtonText: nil,
+                        completion: nil,
+                        cancelCompletion: nil
+                    ) as? TextPopupViewController else {
+                        return
+                    }
+                    owner.showPanModal(content: textPopupViewController)
+                } else {
+                    PreferenceManager.shared.addRecentRecords(word: text)
+                    UIView.setAnimationsEnabled(false)
+                    owner.view.endEditing(true)
+                    UIView.setAnimationsEnabled(true)
+                }
             }
-        }
+            .disposed(by: disposeBag)
     }
 
-    // MARK: Rx 작업
-    private func rxBindTask() {
-        // MARK: 검색바 포커싱 시작 종료
+    override public func bindAction(reactor: SearchReactor) {
+        super.bindAction(reactor: reactor)
+
+        cancelButton.rx.tap
+            .withUnretained(self)
+            .do(onNext: { owner, _ in
+                owner.view.endEditing(true)
+                owner.searchTextFiled.rx.text.onNext("")
+                if let nowChildVc = owner.children.first as? AfterSearchViewController {
+                    nowChildVc.clearSongCart()
+                }
+            })
+            .map { _ in SearchReactor.Action.cancelButtonDidTap }
+            .bind(to: reactor.action)
+            .disposed(by: disposeBag)
+
+        searchTextFiled
+            .rx
+            .text
+            .orEmpty
+            .distinctUntilChanged()
+            .map { SearchReactor.Action.updateText($0) }
+            .bind(to: reactor.action)
+            .disposed(by: disposeBag)
+
         let editingDidBegin = searchTextFiled.rx.controlEvent(.editingDidBegin)
         let editingDidEnd = searchTextFiled.rx.controlEvent(.editingDidEnd)
         let editingDidEndOnExit = searchTextFiled.rx.controlEvent(.editingDidEndOnExit)
@@ -141,79 +168,25 @@ extension SearchViewController {
         )
 
         mergeObservable
-            .asObservable()
-            .withLatestFrom(viewModel.input.textString) { ($0, $1) }
-            .subscribe(onNext: { [weak self] event, str in
-                guard let self = self else {
-                    return
-                }
+            .withUnretained(self)
+            .bind { owner, event in
 
                 if event == .editingDidBegin {
-                    self.viewModel.output.isFoucused.accept(true)
-
-                    if let nowChildVc = self.children.first as? AfterSearchViewController {
-                        nowChildVc.clearSongCart()
-                    }
-                    self.bindSubView(false)
                     NotificationCenter.default.post(name: .statusBarEnterDarkBackground, object: nil)
+                    reactor.action.onNext(.switchTypingState(.typing))
 
                 } else if event == .editingDidEnd {
-                    //                self.viewModel.output.isFoucused.accept(false)
-                    // self.bindSubView(false)
                     NotificationCenter.default.post(name: .statusBarEnterLightBackground, object: nil)
 
-                } else { // 검색 버튼 눌렀을 때
-                    DEBUG_LOG("EditingDidEndOnExit")
-                    // 유저 디폴트 저장
-                    if str.isWhiteSpace == true {
-                        self.searchTextFiled.rx.text.onNext("")
-
-                        guard let textPopupViewController = textPopUpFactory.makeView(
-                            text: "검색어를 입력해주세요.",
-                            cancelButtonIsHidden: true,
-                            allowsDragAndTapToDismiss: nil,
-                            confirmButtonText: nil,
-                            cancelButtonText: nil,
-                            completion: nil,
-                            cancelCompletion: nil
-                        ) as? TextPopupViewController else {
-                            return
-                        }
-                        self.showPanModal(content: textPopupViewController)
-
-                    } else {
-                        PreferenceManager.shared.addRecentRecords(word: str)
-                        self.bindSubView(true)
-                        UIView.setAnimationsEnabled(false)
-                        self.view.endEditing(true) // 바인드 서브 뷰를 먼저 해야 tabMan tabBar가 짤리는 버그를 방지
-                        UIView.setAnimationsEnabled(true)
-                    }
-                    self.viewModel.output.isFoucused.accept(false)
+                } else {
+                    reactor.action.onNext(.switchTypingState(.search))
                 }
-            })
+            }
             .disposed(by: disposeBag)
 
-        // textField.rx.text 하고 subscirbe하면 옵셔널 타입으로 String? 을 받아오는데,
-        // 옵셔널 말고 String으로 받아오고 싶으면 orEmpty를 쓰자 -!
-        self.searchTextFiled.rx.text.orEmpty
-            .skip(1) // 바인드 할 때 발생하는 첫 이벤트를 무시
-            .distinctUntilChanged() // 연달아 같은 값이 이어질 때 중복된 값을 막아줍니다
-            .bind(to: self.viewModel.input.textString)
-            .disposed(by: self.disposeBag)
-
-        self.viewModel.output.isFoucused
-            .withLatestFrom(self.viewModel.input.textString) { ($0, $1) }
-            .subscribe(onNext: { [weak self] (focus: Bool, str: String) in
-                guard let self = self else {
-                    return
-                }
-                self.reactSearchHeader(focus)
-                self.cancelButton.alpha = !str.isEmpty || focus ? 1 : 0
-            }).disposed(by: disposeBag)
-
         RxKeyboard.instance.visibleHeight // 드라이브: 무조건 메인쓰레드에서 돌아감
             .drive(onNext: { [weak self] keyboardVisibleHeight in
-                DEBUG_LOG("keyboardVisibleHeight: \(keyboardVisibleHeight)")
+
                 guard let self = self else {
                     return
                 }
@@ -225,32 +198,84 @@ extension SearchViewController {
             })
             .disposed(by: disposeBag)
     }
+}
+
+extension SearchViewController {
+    private func bindSubView(_ state: TypingStatus) {
+        /*
+         A:부모
+         B:자식
+
+         서브뷰 추가
+         A.addChild(B)
+         A.view.addSubview(B.view)
+         B.didMove(toParent: A)
+
+         서브뷰 삭제
+         B.willMove(toParent: nil) // 제거되기 직전에 호출
+         B.removeFromParent() // parentVC로 부터 관계 삭제
+         B.view.removeFromSuperview() // parentVC.view.addsubView()와 반대 기능
+
+         */
+
+        if let nowChildVc = children.first as? BeforeSearchContentViewController {
+            guard state == .before || state == .typing else {
+                return
+            }
+            guard let text = reactor?.currentState.text else {
+                return
+            }
+
+            self.remove(asChildViewController: beforeVC)
+            self.add(asChildViewController: afterVC)
+            afterVC.input.text.accept(text)
+        } else if let nowChildVc = children.first as? AfterSearchViewController {
+            guard state == .search || state == .typing else {
+                return
+            }
+            self.remove(asChildViewController: afterVC)
+            self.add(asChildViewController: beforeVC)
+        }
+    }
 
-    private func reactSearchHeader(_ isfocused: Bool) {
-        let headerFontSize: CGFloat = 16
-        let focusedplaceHolderAttributes = [
-            NSAttributedString.Key.foregroundColor: isfocused ? UIColor.white : DesignSystemAsset.GrayColor.gray400
-                .color,
-            NSAttributedString.Key.font: DesignSystemFontFamily.Pretendard.medium.font(size: headerFontSize)
-        ] // 포커싱 플레이스홀더 폰트 및 color 설정
+    private func reactSearchHeader(_ state: TypingStatus) {
+        var placeHolderAttributes = [
+            NSAttributedString.Key.foregroundColor: Color.grayColor,
+            NSAttributedString.Key.font: DesignSystemFontFamily.Pretendard.medium.font(size: Font.headerFontSize)
+        ]
+
+        var bgColor: UIColor = .white
+        var textColor: UIColor = .black
+        var tintColor: UIColor = Color.grayColor
+
+        if state == .typing {
+            placeHolderAttributes[.foregroundColor] = UIColor.white
+            bgColor = Color.pointColor
+            textColor = .white
+            tintColor = .white
+        }
 
-        self.searchHeaderView.backgroundColor = isfocused ? DesignSystemAsset.PrimaryColor.point.color : .white
-        self.searchTextFiled.textColor = isfocused ? .white : .black
+        self.searchHeaderView.backgroundColor = bgColor
+        self.searchTextFiled.textColor = textColor
         self.searchTextFiled.attributedPlaceholder = NSAttributedString(
             string: "검색어를 입력하세요.",
-            attributes: focusedplaceHolderAttributes
-        ) // 플레이스 홀더 설정
-        self.searchImageView.tintColor = isfocused ? .white : DesignSystemAsset.GrayColor.gray400.color
+            attributes: placeHolderAttributes
+        )
+        self.searchImageView.tintColor = tintColor
     }
 }
 
 extension SearchViewController: BeforeSearchContentViewDelegate {
     func itemSelected(_ keyword: String) {
         searchTextFiled.rx.text.onNext(keyword)
-        viewModel.input.textString.accept(keyword)
-        viewModel.output.isFoucused.accept(false)
         PreferenceManager.shared.addRecentRecords(word: keyword)
-        self.bindSubView(true)
+
+        guard let reactor = reactor else {
+            return
+        }
+
+        reactor.action.onNext(.updateText(keyword))
+        reactor.action.onNext(.switchTypingState(.search))
 
         UIView.setAnimationsEnabled(false)
         view.endEditing(true) // 바인드 서브 뷰를 먼저 해야 tabMan tabBar가 짤리는 버그를 방지
@@ -258,8 +283,8 @@ extension SearchViewController: BeforeSearchContentViewDelegate {
     }
 }
 
-public extension SearchViewController {
-    func equalHandleTapped() {
+extension SearchViewController {
+    public func equalHandleTapped() {
         let viewControllersCount: Int = self.navigationController?.viewControllers.count ?? 0
         if viewControllersCount > 1 {
             self.navigationController?.popToRootViewController(animated: true)