[Work 24] 이동 경로 검색 화면을 구성했습니다.

[sangYuLv]

JIRA

📝 작업 내용

📌 요약

• 이동 경로 검색 화면 UI 구성
• 이동 경로 Presentation 계층 요소 작업 (view model, view controller)
• 이동 경로 검색 흐름 (계층 간 연결)
• 장소 검색 Presentation 계층 요소 작업 (view model, view controller)
• 장소 검색 흐름 (계층 간 연결)
• 날짜/시간 형식 옵션 추가 (M월 d일 (E) a h:mm, HH:mm)

🔍 상세

[1] 화면 디자인
피그마를 기반으로 화면 UI를 구성했습니다.
작업하신 화면 구조를 기반으로 첨부해주신 AI의 디자인을 적용해 비슷하게 구현했습니다.

[2] Presentation 계층의 데이터 바인딩
view model과 view controller를 combine 기반으로 바인딩 했습니다.

view model <-> view controller 의 데이터 바인딩은 combine
presentation 내의 액션 연결은 closure 방식

[3] 장소 검색 카드 활용
출발/도착 장소를 어떻게 입력할지 정해져 있지 않아 기존 작업했던 장소 검색 카드를 활용했습니다.
그 과정에서 장소 검색 카드의 view model, view controller를 생성했고, Data 계층까지의 장소 검색 흐름도 구축했습니다.

장소 검색 카드를 dimmed 효과와 함께 표현하거나, 서브 뷰로 그대로 표현하는 두 가지 활용성을 위해 아래처럼 스타일 옵션을 만들었습니다.

final class SearchPlaceCardViewController: UIViewController {
    enum Style {
        case plain
        case dimmed(title: String)
    }
    ...
    init(viewModel: SearchPlaceCardViewModel, selectionButtonTitle: String, style: Style = .plain) { ... }
}

이전 작업에서 장소 검색 카드 init()에서 장소 배열을 받고 있었습니다.
검색 결과로 장소 목록을 받아 데이터를 바인딩 할 실제 흐름에 맞게 SearchPlaceCard의 init()과 결과 업데이트 로직을 수정했습니다.

[4] 검색 흐름 계층 간 연결
Domain의 use case와 Data의 repository까지의 흐름을 연결했습니다.
현재 데이터는 모두 mock repository가 제공하고 있습니다.

[5] 출발 시간 설정
출발 시간 설정을 위한 picker는 과거 시간을 선택하지 못하도록 설정했습니다.
기본적으로 설정될 출발 시간은 RouteSearchViewController의 viewWillAppear() 기준 현재 시간으로 설정했습니다.

💬 리뷰 노트

다음 스프린트에서 작업할 내용

현재 작업 범위가 커짐에 따라, 다음 작업으로 생각해둔 것들을 공유합니다.

1. Data 계층 응답 전달 방식이 closure + Result<T, Error>인데, async/await 혹은 combine 방식으로 수정 예정
2. view model 테스트 코드 작성
3. Presentation 계층 내에서 Domain 엔티티와 Presentation 모델 타입이 혼용되고 있음. 점검하고 맞추는 작업 진행 예정

출발/도착 장소 스위치 기능

피그마 디자인에는 출발 장소와 도착 장소의 입력값을 서로 바꾸는 버튼이 존재합니다.
실제 사용을 생각했을 때, 이 기능이 굳이 필요하지 않을 것 같아 제거한 후 작업했습니다.
필요하다고 생각된다면 코멘트 부탁드립니다!

피그마 디자인

TransportType에서 bike 제거

이전에 공유드린 길찾기 API 활용 방향에 따라서 자전거는 제거했습니다.

장소 검색 카드에서 장소 선택 후 흐름

장소 검색 카드는 항상 화면 내에서 서브 뷰로 사용되지만, 3개 이상의 화면에서 사용되기에 view model과 view controller를 따로 구현했습니다.
보통 사용자의 상호작용에 따른 반응은 view -> view controller -> view model -> 다른 계층 (필요 시) 의 흐름을 가집니다.
반면 이 카드에서 장소 선택은 이 카드의 view controller를 가지는 상위 view controller에게 그 선택이 전달됩니다.

따라서 다른 액션과는 달리 아래 onPlaceTap은 view model에게 행동을 명령하는 것이 아닌, 데이터를 받아와 상위 view controller에게 전달하고 있습니다.

final class SearchPlaceCardViewController: UIViewController {
    ...
    private func setUpActions() {
       searchCard.onSearchTap = { [weak self] keyword in
            self?.viewModel.search(keyword: keyword)
        }

        searchCard.onPlaceTap = { [weak self] placeInfo in
            guard let self, let place = self.viewModel.place(for: placeInfo) else { return }
            self.onPlaceSelected?(place)
            if case .dimmed = self.style { self.dismiss(animated: true) }
        }
    ...
    }

📸 영상 / 이미지

pro max 영상에서는 기능 확인과 디자인을, mini 영상에서는 디자인을 확인 부탁드립니다!

WORK-24.promax.mov

WORK-24.mini.mov

[github-actions]

🤖 AI 코드 리뷰 - 종합(핵심) 관점

경로 검색 기능(RouteSearchViewController/ViewModel), 장소 검색 카드 리팩터링(SearchPlaceCardViewController/ViewModel), 관련 Repository/UseCase 레이어 추가가 주요 변경 내용이다. Mock 구현체만 존재하고 실제 API 연동 구현체가 없어 현재는 테스트/프로토타입 수준이다. MockRouteSearchRepository의 RouteStep 데이터에 명백한 논리 오류가 존재하며, RouteSearchViewModel의 콜백이 항상 메인 스레드에서 호출된다고 보장되지 않아 UI 업데이트 안전성 문제가 있다. SearchPlaceCardViewModel의 search 콜백도 동일한 스레드 보장 문제를 가진다.

[snughnu]

디자인 예쁘네요 🙊
다음 스프린트 때 작업한다고 적어놓으신 부분 외에는 괜찮은거 같습니다!
출발 장소, 도착 장소를 바꾸는 버튼도 없어도 괜찮은거 같습니다!