MapKit (14)

게시 2025/12/16

By Dongik Song

5 분읽는 시간

LocationListViewModel 만들기

이전글에서 작성한 코드와 관련된 작업을 하기위해 ViewModel을 만들어 준다.

그리고 새로 Re-Group을 해주는데

LocationListView, LocationCell, LocationListVM 이렇게 세개를 LocationListView라는 폴더를 만들고 넣어준다.

그리고 아래와 같이 코드를 작성해준다.

  
import CloudKit

final class LocationListViewModel: ObservableObject {
    
    @Published var checkedInProfiles: [CKRecord.ID: [DDGProfile]] = [:]
    
    func getCheckedInProfilesDictionary() {
        CloudKitManager.shared.getCheckedInProfilesDictionary { result in
            DispatchQueue.main.async {
                switch result {
                    case .success(let checkedInProfiles):
                        self.checkedInProfiles = checkedInProfiles
                        print(checkedInProfiles)
                    case .failure(_):
                        print("Error getting back dictionary")
                }
            }
        }
    }
    
}

사실 이전에도 계속 해왔던것이다 보니 크게 언급할만한 내용은 없어 보인다.

VM 적용하기

오래간만에 LocationCell로 가서 var profiles: [DDGProfile]을 추가한다.

새로운 변수가 생겼으므로 발생하는 에러쪽에 profiles 부분을 추가해주면 되는데, 이때

  
ForEach(locationManager.locations) { location in
    NavigationLink(destination: LocationDetailView(viewModel: LocationDetailViewModel(location: location))) {
        LocationCell(location: location, profiles: viewModel.checkedInProfiles[location.id, default: []])
    }
}

ListView쪽은 이렇게 딕셔너리를 넣어준다.

이제 관련된 에러를 해결했다면, Cell에 적용을 제대로 해보려고한다.

현재 Cell에 Hstack을 보게되면, 기능 테스트를 하기위해 Dummy Data로 해두었던걸 알 수 있다.

  
// 너무길어서 Dummy 하나만 가져옴
HStack {
    AvatarView(image: PlaceholderImage.avatar, size: 35)
}

이젠 Dummy가 아닌 Dictionary에서 가져온 데이터를 여기에 보여주려고 한다.

  
if profiles.isEmpty {
    Text("Nobody's Checked In")
        .fontWeight(.semibold)
        .foregroundColor(.secondary)
        .padding(.top, 2)
} else {
    HStack {
            ForEach(profiles) { profile in
                AvatarView(image: profile.createAvatarImage(), size: 35)
            }
    }
}

if를 통해 체크인을 아무도 안했을때, 한명이라도 체크인을 했을 경우로 나누면 된다.

실행전에 깜박 했는데 LocationListView에

  
.onAppear {
    viewModel.getCheckedInProfilesDictionary()
}

이걸 반드시 넣어줘야한다. (그리고 기존에 작성해 두었던 CloudKitManager.shared.getCheckedInProfilesDictionary 부분은 지워주자.)

이제 실행을 해보면

잘되는걸 알 수 있다.

체크인 한 유져가 많을 경우 카운트로 대체하기

이런식으로 체크인 한 유져가 많을 경우를 대비해 좀 더 UX를 보강하려고 한다.

새로운 View 만들기

먼저 위의 사진 처럼 카운트를 담을 View를 만들어본다.

  
struct AdditionalProfilesView: View {
    
    var number: Int
    
    var body: some View {
        Text("+\(number)")
            .font(.system(size: 14, weight: .semibold))
            .frame(width: 35, height: 35)
            .foregroundColor(.white)
            .background(Color.brandPrimary)
            .clipShape(Circle())
    }
}

그러면 이렇게 View가 만들어 진다.

새롭게 만든 View 적용하기

  
HStack {
    ForEach(profiles.indices, id: \.self) { index in
        if index <= 3 {
            AvatarView(image: profiles[index].createAvatarImage(), size: 35)
        } else if index == 4 {
            AdditionalProfilesView(number: profiles.count - 4)
        }
    }
}