본문 바로가기
Swift

TCA와 UIKit을 활용한 DSR 계산기

by mr.conan 2023. 7. 20.
728x90
반응형

Step 1: 프로젝트 설정과 기본 환경 구성

  1. Xcode를 열고 새로운 프로젝트를 생성합니다.
  2. "Single View App" 템플릿을 선택하고, 프로젝트 이름을 "DSRCalculator"로 지정합니다.
  3. SwiftUI 및 UIKit을 함께 사용하기 위해 "Bridging Header"를 생성하고 SnapKit을 설치합니다.

Step 2: 모델 클래스 구현

  1. 프로젝트 내에 DSRData.swift 파일을 생성합니다.
  2. DSR 계산기에서 사용될 데이터 모델을 정의합니다.
import Foundation

struct DSRData {
    var totalMonthlyIncome: Double
    var totalMonthlyDebtPayments: Double
}

Step 3: UIKit 기반의 화면 구성

  1. 프로젝트 내에 DSRViewController.swift 파일을 생성합니다.
  2. SnapKit을 사용하여 Auto Layout 설정을 해줍니다.
import UIKit
import SnapKit

class DSRViewController: UIViewController {
    
    private let totalMonthlyIncomeLabel = UILabel()
    private let totalMonthlyIncomeTextField = UITextField()
    private let totalMonthlyDebtPaymentsLabel = UILabel()
    private let totalMonthlyDebtPaymentsTextField = UITextField()
    private let calculateButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupConstraints()
    }
    
    private func setupViews() {
        view.addSubview(totalMonthlyIncomeLabel)
        totalMonthlyIncomeLabel.text = "총 월 소득"
        
        // 이하 생략...
    }
    
    private func setupConstraints() {
        totalMonthlyIncomeLabel.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide).offset(20)
            make.leading.equalTo(view).offset(20)
        }
        
        // 이하 생략...
    }
    
    @objc private func calculateDSR() {
        let totalMonthlyIncome = Double(totalMonthlyIncomeTextField.text ?? "0") ?? 0
        let totalMonthlyDebtPayments = Double(totalMonthlyDebtPaymentsTextField.text ?? "0") ?? 0
        let dsr = totalMonthlyDebtPayments / totalMonthlyIncome * 100
        print("DSR: \(dsr)%")
    }
}

Step 4: TCA(Todo Composable Architecture) 구현

  1. 프로젝트에 TCA를 설치하고, DSRState.swift, DSREvents.swift, DSRReducer.swift, DSREnvironment.swift 파일들을 생성합니다.
// DSRState.swift
import Foundation

struct DSRState {
    var data: DSRData
}

// DSREvents.swift
import Foundation

enum DSREvent {
    case updateTotalMonthlyIncome(String)
    case updateTotalMonthlyDebtPayments(String)
    case calculateDSR
}

// DSRReducer.swift
import ComposableArchitecture

let dsrReducer = Reducer<DSRState, DSREvent, Void> {
    state, event, _ in
    switch event {
    case let .updateTotalMonthlyIncome(income):
        state.data.totalMonthlyIncome = Double(income) ?? 0
        return .none
        
    case let .updateTotalMonthlyDebtPayments(debtPayments):
        state.data.totalMonthlyDebtPayments = Double(debtPayments) ?? 0
        return .none
        
    case .calculateDSR:
        let totalMonthlyIncome = state.data.totalMonthlyIncome
        let totalMonthlyDebtPayments = state.data.totalMonthlyDebtPayments
        let dsr = totalMonthlyDebtPayments / totalMonthlyIncome * 100
        print("DSR: \(dsr)%")
        return .none
    }
}

// DSREnvironment.swift
import Foundation

struct DSREnvironment {
    // 필요한 환경 변수들을 정의합니다. (생략)
}

Step 5: TCA와 UIKit 통합

  1. DSRViewController.swift 파일에서 TCA를 적용합니다.
import ComposableArchitecture

class DSRViewController: UIViewController {
    
    // 기존의 코드들을 그대로 유지합니다.
    
    private var store: Store<DSRState, DSREvent>!
    private var viewStore: ViewStore<DSRState, DSREvent>!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        store = Store(initialState: DSRState(data: DSRData(totalMonthlyIncome: 0, totalMonthlyDebtPayments: 0)),
                      reducer: dsrReducer,
                      environment: DSREnvironment())
        
        viewStore = ViewStore(store)
        
        setupViews()
        setupConstraints()
    }
    
    // 이하 생략...
}

이상으로, TCA와 UIKit, 그리고 SnapKit을 활용하여 DSR 계산기를 블로그 형식으로 작성하는 방법을 안내드렸습니다. 추가적으로 필요한 코드를 구현하면서 더 많은 기능과 UI 개선을 진행하실 수 있을 것입니다. 행운을 빕니다!

728x90
반응형