[#166] TodoListView에서 searchable을 버튼화하고 검색 로직을 구현한다 (#170)

* ui: 돋보기 버튼을 통해 searchable이 구현된 뷰를 보여주도록 변경

* feat: 검색어 입력에 대해 0.4초 디바운스 추가

* refactor: 로컬 필터링 대신 서버에서 검색해서 데이터를 가져오도록 개선

* fix: iOS 17 이하에서 돋보기 버튼을 탭해도 포커싱이 되지 않는 현상 해결

* fix: 디바운스 중 검색어를 제거하면 LoadingView가 게속 뜨는 현상 해결

* chore: 제거된 문자열 수정

Author: opficdev

DevLog/Presentation/Enum/TodoScope.swift

@@ -11,12 +11,14 @@ final class TodoListViewModel: Store {
     struct State {
         var todos: [TodoListItem] = []
         var searchText: String = ""
+        var searchResults: [TodoListItem] = []
         let kind: TodoKind
         var showEditor: Bool = false
         var showAlert: Bool = false
         var alertTitle: String = ""
         var alertMessage: String = ""
-        var scope: TodoScope = .title
+        var isSearching: Bool = false
+        var showAllSearchResults: Bool = false
         var query: TodoQuery
         var isLoading: Bool = false
         var showToast: Bool = false
@@ -37,6 +39,8 @@ final class TodoListViewModel: Store {
         case togglePinnedOnly
         case setCompletionFilter(TodoQuery.CompletionFilter)
         case resetFilters
+        case setIsSearching(Bool)
+        case setShowAllSearchResults(Bool)
         case tapToggleCompleted(TodoListItem)
         case tapTogglePinned(TodoListItem)
         case undoDelete
@@ -45,12 +49,13 @@ final class TodoListViewModel: Store {
         case confirmDelete
         case onAppear
         case loadNextPage
-        case setScope(TodoScope)
         case setSearchText(String)
         case setToast(isPresented: Bool)
         case upsertTodo(Todo)
 
         // Run
+        case setSearchQuery(String)
+        case fetchSearchResults([TodoListItem])
         case didToggleCompleted(TodoListItem)
         case didTogglePinned(TodoListItem)
         case setLoading(Bool)
@@ -62,13 +67,16 @@ final class TodoListViewModel: Store {
     enum SideEffect {
         case fetch
         case loadNextPage
+        case search(String)
         case upsert(Todo)
         case delete(String)
         case toggleCompleted(TodoListItem)
         case togglePinned(TodoListItem)
     }
 
     @Published private(set) var state: State
+    private let searchDebounceDelay: Double = 0.4
+    private var searchDebounceTask: Task<Void, Never>?
     private let fetchTodosUseCase: FetchTodosUseCase
     private let fetchTodoByIDUseCase: FetchTodoByIDUseCase
     private let upsertTodoUseCase: UpsertTodoUseCase
@@ -91,6 +99,8 @@ final class TodoListViewModel: Store {
         )
     }
 
+    let searchResultsLimit = 5
+
     var appliedFilterCount: Int {
         var count = 0
         if state.query.sortTarget != .createdAt { count += 1 }
@@ -106,14 +116,15 @@ final class TodoListViewModel: Store {
 
         switch action {
         case .refresh, .setAlert, .setShowEditor, .swipeTodo, .setSortTarget, .setSortOrder,
-                .togglePinnedOnly, .setCompletionFilter, .resetFilters, .tapToggleCompleted,
-                .tapTogglePinned, .undoDelete:
+                .togglePinnedOnly, .setCompletionFilter, .resetFilters, .setIsSearching,
+                .setShowAllSearchResults, .tapToggleCompleted, .tapTogglePinned, .undoDelete:
             effects = reduceByUser(action, state: &state)
 
-        case .confirmDelete, .onAppear, .loadNextPage, .setScope, .setSearchText, .setToast, .upsertTodo:
+        case .confirmDelete, .onAppear, .loadNextPage, .setSearchText, .setToast, .upsertTodo:
             effects = reduceByView(action, state: &state)
 
-        case .didToggleCompleted, .didTogglePinned, .setLoading, .appendTodos, .resetPagination, .setHasMore:
+        case .setSearchQuery, .fetchSearchResults,
+                .didToggleCompleted, .didTogglePinned, .setLoading, .appendTodos, .resetPagination, .setHasMore:
             effects = reduceByRun(action, state: &state)
         }
 
@@ -150,6 +161,18 @@ final class TodoListViewModel: Store {
                     send(.setAlert(true))
                 }
             }
+        case .search(let keyword):
+            Task {
+                do {
+                    defer { send(.setLoading(false)) }
+                    send(.setLoading(true))
+                    let query = TodoQuery(kind: state.kind, keyword: keyword)
+                    let page = try await fetchTodosUseCase.execute(query, cursor: nil)
+                    send(.fetchSearchResults(page.items.map { TodoListItem(from: $0) }))
+                } catch {
+                    send(.setAlert(true))
+                }
+            }
         case .upsert(let item):
             Task {
                 do {
@@ -246,6 +269,16 @@ private extension TodoListViewModel {
             state.query = TodoQuery(kind: state.kind)
             state.nextCursor = nil
             return [.fetch]
+        case .setIsSearching(let value):
+            state.isSearching = value
+            if !value {
+                cancelDebounce()
+                state.searchText = ""
+                state.searchResults = []
+                state.showAllSearchResults = false
+            }
+        case .setShowAllSearchResults(let value):
+            state.showAllSearchResults = value
         case .tapToggleCompleted(let todo):
             return [.toggleCompleted(todo)]
         case .tapTogglePinned(let todo):
@@ -275,10 +308,18 @@ private extension TodoListViewModel {
         case .loadNextPage:
             guard state.hasMore, !state.isLoading, state.pendingTask == nil else { return [] }
             return [.loadNextPage]
-        case .setScope(let scope):
-            state.scope = scope
         case .setSearchText(let text):
             state.searchText = text
+            state.showAllSearchResults = false
+            let trimmed = text.trimmingCharacters(in: .whitespacesAndNewlines)
+            if trimmed.isEmpty {
+                cancelDebounce()
+                state.searchResults = []
+                state.isLoading = false
+            } else {
+                state.isLoading = true
+                scheduleDebouncedQuery(text)
+            }
         case .setToast(let isPresented):
             setToast(&state, isPresented: isPresented)
         case .upsertTodo(let todo):
@@ -291,6 +332,15 @@ private extension TodoListViewModel {
 
     func reduceByRun(_ action: Action, state: inout State) -> [SideEffect] {
         switch action {
+        case .setSearchQuery(let query):
+            let trimmed = query.trimmingCharacters(in: .whitespacesAndNewlines)
+            if trimmed.isEmpty {
+                state.searchResults = []
+            } else {
+                return [.search(trimmed)]
+            }
+        case .fetchSearchResults(let items):
+            state.searchResults = items
         case .didToggleCompleted(let todo):
             if let index = state.todos.firstIndex(where: { $0.id == todo.id }) {
                 state.todos[index] = todo
@@ -341,6 +391,23 @@ private extension TodoListViewModel {
         state.toastMessage = "실행 취소"
         state.showToast = isPresented
     }
+
+    func scheduleDebouncedQuery(_ query: String) {
+        searchDebounceTask?.cancel()
+        searchDebounceTask = Task { [weak self] in
+            guard let self else { return }
+            try? await Task.sleep(for: .seconds(searchDebounceDelay))
+            if Task.isCancelled { return }
+            await MainActor.run {
+                self.send(.setSearchQuery(query))
+            }
+        }
+    }
+
+    func cancelDebounce() {
+        searchDebounceTask?.cancel()
+        searchDebounceTask = nil
+    }
 }
 
 extension TodoQuery.SortTarget {

DevLog/Presentation/ViewModel/TodoListViewModel.swift

@@ -233,26 +233,6 @@
     },
     "Todos" : {
 
-    },
-    "TodoScope.content" : {
-      "localizations" : {
-        "ko" : {
-          "stringUnit" : {
-            "state" : "translated",
-            "value" : "내용"
-          }
-        }
-      }
-    },
-    "TodoScope.title" : {
-      "localizations" : {
-        "ko" : {
-          "stringUnit" : {
-            "state" : "translated",
-            "value" : "제목"
-          }
-        }
-      }
     },
     "Web Page" : {
 
@@ -271,6 +251,9 @@
     },
     "검색어를 입력해 저장한 앱 컨텐츠를 찾아보세요." : {
 
+    },
+    "검색어를 입력해주세요." : {
+
     },
     "계정 삭제" : {