[SwiftUI/TCA] Timer 만들기

TCA를 공부하다가 Timer 예시로 무엇을 구현하면 좋을까 생각해 봤더니 쇼핑몰 앱이 떠오르더라구요! 오늘 자정까지의 남은 시간을 계산해서 오늘이 지나면 구매할 수 없도록 버튼을 비활성화 시킬거에요.

타이머를 표시하는 저 부분이 구매 버튼입니다. 구현해 놓고 보니 타이머 UI와 구매하기 버튼을 별도로 분리할 걸 그랬어요 🥲

 

State

    struct State: Equatable {
        var isTimerOn = false
        var leftTime = "00:00:00"
        var isBuyButtonDisabled = true
    }

isTimerOn이 true가 되면 타이머를 시작하고 false가 되면 타이머를 cancel 시켜줍니다. leftTime은 버튼 영역의 시간 부분에 표시될 스트링 값이에요. isBuyButtonDisabled를 이용해서 버튼 비활성화 여부와 버튼의 UI를 지정해 줄거에요

 

Action

    enum Action: Equatable {
        case timerToggled
        case timerTicked
    }

Action은 사용자의 행동에 따라 명칭을 지어야 한다고 합니다. 화면에 나타날 때 timer을 시작할 거라 어떻게 지어야 할지 감이 아직 안잡혀요. 화면에 나타날 때와 사라질 때 각각 타이머를 on/off 시켜줄 거라 toggle 케이스를 하나 만들어 줍니다. 

그리고 1초마다 남은 시간을 계산하고 UI를 업데이트하기 위해 timerTicked라는 Action을 하나 만들어 줍시다

 

Reduce

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .timerToggled:
                state.isTimerOn.toggle()
                if state.isTimerOn {
                    return .run { send in
                        while true {
                            try await Task.sleep(nanoseconds: 1_000_000_000)
                            await send(.timerTicked)
                        }
                    }
                    .cancellable(id: CancelID.timer)
                } else {
                    return .cancel(id: CancelID.timer)
                }
            case .timerTicked:
                let now = Date()
                let endOfDay = Calendar.current.date(bySettingHour: 23, minute: 59, second: 59, of: now)!
                let timeInterval = endOfDay.timeIntervalSince(now)
                
                if timeInterval > 0 {
                    let hours = Int(timeInterval) / 3600
                    let minutes = Int(timeInterval) / 60 % 60
                    let seconds = Int(timeInterval) % 60
                    state.leftTime = String(format: "%02i:%02i:%02i", hours, minutes, seconds)
                    state.isBuyButtonDisabled = false
                } else {
                    state.leftTime = "00:00:00"
                    state.isBuyButtonDisabled = true
                }
                
                return .none
            }
        }

timerToggled action이 발생하면 isTimerOn이 true 일때 1초마다 timerTicked 액션을 send 해줘요. 그러면 timerTicked에서는 오늘로 부터 남은 시간을 카운트해서 leftTime과 isBuyButtonDisabled State 값을 업데이트 해줍니다. 

 

UI

                Button {
                    // TODO: add action
                } label: {
                    VStack {
                        Text(viewStore.isBuyButtonDisabled ? "다음 기회에...!" : "오늘이 지나면 구매할 수 없어요!")
                            .foregroundStyle(.white)
                            
                        Text(viewStore.leftTime)
                            .font(.title)
                            .foregroundStyle(.white)
                            
                    }
                    .padding(.vertical, 20)
                    .frame(maxWidth: .infinity)
                    .background(viewStore.isBuyButtonDisabled ? .gray : .black)
                }
                .disabled(viewStore.isBuyButtonDisabled)

isBuyButtonDisabled와 leftTime state를 store 로부터 전달 받아 UI 구성하는데 사용해 주면 됩니다