[Dynamic Island⛰️] Live Activity로 피자 배달을 하자.🍕 - 실시간 알림

안녕하세요...

오늘은 다이나믹 아일랜드에 대해 오랜만에 글을 써볼건데,

사실 다이나믹 아일랜드가 나온 지는 꽤 됐습니다. 2023년이었나?

 

그러나 그동안 관심을 갖지 않았습니다.

왜냐면 제 폰은 다이나믹 아일랜드를 지원하지 않는 아이폰12였기 때문입니다.ㅋㅋㅋ

 

 

그러나,

최근에 폰을 바꾸고 난 후 갑자기 신경쓰이더라군요...

다이나믹 아일랜드... 귀엽네... 나도 해볼까...? ㅎ_ㅎ

 

 

생각보다 어렵지 않았습니다.

일단 위젯과 같이 SwiftUI 기반으로 이루어지며, 새로운 타겟으로 추가해줘야하고,

실시간 데이터 변화는 앱에서 조절해주면 됩니다.

 

 

File > New > Target > 'Widget Extension' 으로 위젯 익스텐션을 추가해주는데,

Include Live Activities를 꼭 체크해줘야합니다.

 

 

 

그리고, 앱 타겟에서 간단한 UI를 만들어줍니다.

저는 피자 배달을 주제로 삼아, 탭 시 배달 상태가 변경되는 버튼을 나열했습니다. 🍕

 

 

 

피자를 먹기 위해서는 다이나믹 아일랜드로 보여줄 Attributes들을 정의해줘야합니다.

struct PizzaDeliveryAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        var deliveryStage: DeliveryStage
        
        /// ... 
    }
}

 

 

다이나믹 아일랜드의 UI를 꾸밉니다.

저는 임의로 ProgressBar로 상태값 변화를 쉽게 눈으로 확인할 수 있게끔 하였습니다.

struct PizzaDeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: PizzaDeliveryAttributes.self) { context in
        
            // 이 곳에 UI를 꾸밉니다. 
            // 저는 임의로 ProgressBar를 정의해 보여주었다죠.ㅋ
            
            VStack(alignment: .leading, spacing: 16) {
                
                ProgressView(value: progress(for: context.state.deliveryStage))
                            .progressViewStyle(.linear)
                            .tint(.orange)
                            .padding(.horizontal, 16)
                            .padding(.top, 8)
                
                Spacer(minLength: 8)
            }
            .activityBackgroundTint(.cyan)
            .activitySystemActionForegroundColor(.black)

        } dynamicIsland: { context in
            DynamicIsland {
                // Expanded
                DynamicIslandExpandedRegion(.leading) {
                    Text("🍕")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text(context.state.deliveryStageTitle)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    ProgressView(value: progress(for: context.state.deliveryStage))
                                .progressViewStyle(.linear)
                                .tint(.orange)
                                .padding(8)
                }
            } compactLeading: {
                Text("🍕")
            } compactTrailing: {
                Text(context.state.deliveryIcon)
            } minimal: {
                Text("🍕")
            }
        }
    }
    
    func progress(for stage: DeliveryStage) -> Double {
        switch stage {
        case .checking: return 0.1
        case .cooking: return 0.4
        case .delivering: return 0.8
        case .delivered: return 1.0
        }
    }
}

 

 

앱 타겟에서 Live Activity를 시작하고 + 업데이트하고 + 종료하는 메소드를 정의합니다.

func startPizzaDeliveryActivity() {
    let attributes = PizzaDeliveryAttributes()
    let initialContentState = PizzaDeliveryAttributes.ContentState(deliveryStage: .checking)

    do {
        let _ = try Activity<PizzaDeliveryAttributes>.request(
            attributes: attributes,
            contentState: initialContentState,
            pushType: nil
        )
    } catch {
        print("Failed to start activity: \(error)")
    }
}
    
func updatePizzaDeliveryActivity(to stage: DeliveryStage) async {
    for activity in Activity<PizzaDeliveryAttributes>.activities {
        await activity.update(using: .init(deliveryStage: stage))
    }
}
    
func endPizzaDeliveryActivity() async {
    for activity in Activity<PizzaDeliveryAttributes>.activities {
        await activity.end(using: .init(deliveryStage: .delivered), dismissalPolicy: .immediate)
    }
}

 

 

 

결과입니다. 심각하게 귀여움

참고로 피자는 바질 피자로 추정(?) 중입니다. 제 지피티가 만들어준 것이여요.

 

 

다이나믹 아일랜드가 작아졌을 땐 이렇게 보입니다. 귀엽다.