[SwiftUI Project] HomeViewModel과 HomeView 연결, UI 작업

기본 UI를 만들고 ViewModel에서 임시 데이터를 생성해 연결했다.

이번 작업은 왓치리스트, 코인리스트 선택버튼과 정렬 옵션버튼의 기본 UI를 만들고, ViewModel과 View를 연결하는 작업이었습니다.

버튼을 눌렀을 때 발생할 기능들은 향후 추가할 예정입니다.

 

버튼들..!  

private var listOptionBar: some View {
        HStack(alignment: .top, spacing: 30) {
            Text("Watchlist")
            VStack() {
                Text("Coin")
                    .foregroundColor(Color.white)
                Capsule()
                    .fill(Color.theme.BinanceColor)
                    .frame(width: 30, height: 3)
            }
            Spacer()
        }
        .padding(.horizontal)
        .padding(.top, 15)
        .font(.headline)
        .foregroundColor(Color.theme.accent)
    }
    
    private var sortOptionList: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 45) {
                Text("Market Cap")
                    .foregroundColor(Color.white)
                    .padding(.vertical, 3)
                    .padding(.horizontal, 10)
                    .background(RoundedRectangle(cornerRadius: 50).fill(Color.theme.sortOption))
                
                let iconSize = 13
                
                HStack(spacing: 0) {
                    Text("Price")
                    Image(systemName: "arrow.down")
                        .font(.system(size: CGFloat(iconSize)))
                    Image(systemName: "arrow.up")
                        .font(.system(size: CGFloat(iconSize)))
                }
                
                HStack(spacing: 0) {
                    Text("24h Change")
                    Image(systemName: "arrow.down")
                        .font(.system(size: CGFloat(iconSize)))
                    Image(systemName: "arrow.up")
                        .font(.system(size: CGFloat(iconSize)))
                }
            }
            .font(.system(size: 15, weight: .bold))
            .foregroundColor(Color.theme.accent)
            
        }
        .padding()
    }

 

이번에 검색을 많이 했던 것이 있었는데..

바로 요녀석입니다.

Text("Market Cap")
   .foregroundColor(Color.white)
   .padding(.vertical, 3)
   .padding(.horizontal, 10)
   .background(RoundedRectangle(cornerRadius: 50).fill(Color.theme.sortOption))

Text("Market Cap")
  .foregroundColor(Color.white)
  .padding(.vertical, 3)
  .padding(.horizontal, 10)
  .background(Color.theme.sortOption)
  .cornerRadius(50)

처음에 작성할 때 백그라운드 부분을 두번째 코드로 했었는데 패딩이 이상하게 나오더라고요.

지금은 첫번째 코드랑 동일하게 작동합니다. 뭐지.. 

 

구글에서 열심히 코드를 본 결과 두번째 코드를 얻어서 마무리 할 수 있었습니다.

 

차후 옵션 작업에선 버튼을 탭하면 백그라운드 색이 바뀌도록 작성하면 될 듯 합니다..!

 

 

HomeViewModel.swift

import Foundation

class HomeViewModel: ObservableObject {
    
    @Published var allCoins: [CoinModel] = []
    @Published var portfolioCoins: [CoinModel] = []
    
    init() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            self.allCoins.append(DeveloperPreview.instance.coin)
            self.portfolioCoins.append(DeveloperPreview.instance.coin)
        }
    }
}

ViewModel에 프리뷰에 사용하려고 작성해둔 임시 데이터를 연결해줬습니다.

 

 

SwiftUICoinApp.swift

import SwiftUI

@main
struct SwiftUICoinApp: App {
    
    @StateObject private var viewModel = HomeViewModel()
    
    var body: some Scene {
        WindowGroup {
            NavigationView {
                // 홈뷰에선 네비게이션 바가 보이지 않습니다.
                HomeView()
                    .navigationBarHidden(true)
            }
            .environmentObject(viewModel)
            // 모든 자식뷰가 viewModel에 엑세스 할 수 있습니다.
        }
    }
}

이후 부모뷰에 가서 모든 자식뷰가 viewModel에 엑세스 할 수 있도록 해줬습니다.

 

 HomeView.swift

import SwiftUI

struct HomeView: View {
    
    @EnvironmentObject private var viewModel: HomeViewModel
    @State private var showMenu: Bool = false
    
    var body: some View {
        ZStack {
            // Background layer
            Color.theme.background
                .ignoresSafeArea()
            
            // content layer
            VStack(spacing: 0) {
                homeHeader
                listOptionBar
                sortOptionList
                allCoinList
                Spacer(minLength: 0)
            }
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            HomeView()
                .navigationBarHidden(true)
        }
        .preferredColorScheme(.dark)
        .environmentObject(dev.homeVM)
    }
}

홈뷰에서 EnvironmentObject를 작성해주고 CoinRowView로 뷰를 만들어주면 연결이 확인됩니다!