71. 스파르타 코딩 클럽 - 최종 팀 프로젝트 #13

  🎯  Trouble Shooting

[ 1.  현재 위치에서 검색 시 정렬 버튼 동기화 오류 ]

초기 화면에서 정렬 버튼을 눌러서 정렬을 한 뒤

다른 곳으로 지도를 이동해서 현재 위치에서 검색을 누르면 정렬 버튼이

별점순으로 변경되지 않는 문제가 있다.

 

[ 1-1. Mutation 추가 ]

enum Mutation {
    case setStore([StoreSection])
    case shouldPop(Bool)
    case setCurrentLocation(lat: Double, lon: Double)
    case showLocationAlert
    case setWebViewUrl(String)
    case sortStore([StoreSection]) // 데이터 정렬
    case dismissWebView // 웹뷰가 닫혔을 때
    case setSortType(SortType)
}

 

 

[ 1-2. Mutation 추가 ]

func reduce(state: State, mutation: Mutation) -> State {
    var newState = state
    switch mutation {
    case .setSortType(let sortType): // 추가 부분
            newState.sortType = sortType
        }
        return newState
    }

 

[ 1-3. 중복된 정렬 로직 함수로 추출 ]

// 가게 정보 정렬 함수
    func sortStoreItems(
        _ items: [StoreInfo],
        sortType: SortType,
        centerLat: Double,
        centerLon: Double
    ) -> [StoreInfo] {
        return items.sorted { item1, item2 in
            switch sortType {
            case .rating:
                return item1.rating > item2.rating
            case .distance:
                let distance1 = calculateDistance(
                    from: centerLat, lon1: centerLon,
                    to: item1.latitude, lon2: item1.longitude
                )
                let distance2 = calculateDistance(
                    from: centerLat, lon1: centerLon,
                    to: item2.latitude, lon2: item2.longitude
                )
                return distance1 < distance2
            case .reviewCount:
                return item1.userRatingCount > item2.userRatingCount
            }
        }
    }

 

[ 1-4. 현재 정렬 버튼의 상태에 따라 가게 정보를 정렬 ]

case .currentLocationSearchButtonTapped(sw: let sw, ne: let ne):
            let currentSortType = currentState.sortType // 현재 정렬 버튼의 상태

            return Observable.zip(firstRequest, secondRequest)
                .map { [weak self] first, second in
                    guard let self else { return [] }
                    let merged = first + second
                    let sorted = self.sortStoreItems(
                                    merged,
                                    sortType: currentSortType,
                                    centerLat: centerLat,
                                    centerLon: centerLon
                                )
                    return [StoreSection(items: sorted)]
                }
                .map { .setStore($0) }

 

 

---

  👨🏻‍💻  오늘의 작업 

[ 1. 디테일 화면 정렬 상태관리 안됨 ]

정렬 버튼을 사용한 뒤 다른 곳으로 이동한 뒤 현 위치에서 검색을 누르면 데이터가 새로 바뀌었음에도

정렬버튼의 상태는 이전 상태로 되어 있다.

(기본값은 별점순이기 때문에 다른 곳에서 검색했을 때 정렬버튼의 상태는 별점순으로 돌아와야 한다)

 

자세한 코드 내용은 Trouble Shooting 에서 확인!

 

[ 2. Separator를 공통 UI Component로 만들기 ]

//
//  CustomSeparator.swift
//  EatsOkay
//
//  Created by 허성필 on 6/24/25.
//

import UIKit

final class CustomSeparator: UIView {
    init(color: UIColor.CustomColor = .neutral50) {
        super.init(frame: .zero)
        backgroundColor = UIColor.customColor(hexCode: color)
        translatesAutoresizingMaskIntoConstraints = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }}

 

CustomSeparator를 만들고 색상을 입력 받도록 코드를 작성했다.

기본 색상은 neutral50 색상이고, 사용자의 필요에 따라 원하는 색상을 입력하면 된다.

 

사용 방법

private let separatorView: UIView = {
    let view = CustomSeparator(color: .neutral50)
    return view
}()

 

 

[ 3. MapView 높이 수정 ]

디자이너분께서 MapView의 높이를 262로 말씀해주셨는데

실제 구현된 MapView의 높이는 250으로 되어있어서 수정하였다.

좌 : 높이 250 우 : 높이 262

 

약간의 차이가 보인다면 당신은 디자이너가 될 수 있다.