Scrumdinger 개발 01 - Displaying data in a list

 

Creating a card view

• Color theme Import
• Create Scrum model
• Create the card view

 

 

---

 

 

import Foundation
import ThemeKit

struct DailyScrum: Identifiable {
    let id: UUID //Add an initializer that assigns a default value to the id property.
    var title: String
    var attendees: [String]
    var lengthInMinutes: Int
    var theme: Theme
    
    init(id: UUID = UUID(), title: String, attendees: [String], lengthInMinutes: Int, theme: Theme) {
        self.id = id
        self.title = title
        self.attendees = attendees
        self.lengthInMinutes = lengthInMinutes
        self.theme = theme
    }
}

 

 

import SwiftUI

struct CardView: View {
    let scrum: DailyScrum


    var body: some View {
        VStack(alignment: .leading) {
            Text(scrum.title)
                .font(.headline)
                .accessibilityAddTraits(.isHeader) // 접근성
            /**
             accessibilityAddTraits(_:)의 주요 특징
             기존 접근성 속성에 새로운 속성을 추가 (덮어쓰는 것이 아님)
             .accessibilityTraits(_:)와 차이점
             .accessibilityTraits(_:) → 기존 속성을 덮어씀
             .accessibilityAddTraits(_:) → 기존 속성에 추가
             */
            Spacer()
            HStack {
                Label("\(scrum.attendees.count)", systemImage: "person.3")
                    .accessibilityLabel("\(scrum.attendees.count) attendees")
                Spacer()
                Label("\(scrum.lengthInMinutes)", systemImage: "clock")
                    .accessibilityLabel("\(scrum.lengthInMinutes) minute meeting")  // 접근성
                    .labelStyle(.trailingIcon)
            }
            .font(.caption)
        }
        .padding()
        .foregroundColor(scrum.theme.accentColor)
    }
}


#Preview(traits: .fixedLayout(width: 400, height: 60)) {
    let scrum = DailyScrum.sampleData[0]
    return CardView(scrum: scrum)
        .frame(width: 400, height: 60)
    // Preview 에서 traits 코드를 이용한 사이즈 적용이 안됐다. 그래서 frame 함수를 추가해서 preview 를 확인했다.
        .background(scrum.theme.mainColor)
}

 

 

import SwiftUI

struct ScrumsView: View {
    let scrums: [DailyScrum]
    
    var body: some View {
        // Identifiable protocol, you can simplify the List initializer.
        List(scrums) { scrum in
            CardView(scrum: scrum)
                .listRowBackground(scrum.theme.mainColor)
        }
    }
}

#Preview {
    ScrumsView(scrums: DailyScrum.sampleData)
}

 

 

import SwiftUI

struct TrailingIconLabelStyle: LabelStyle {
    // view 를 그리는 함수
    // 뷰 계층의 각 레이블 인스턴스에 대해 이 메서드를 호출할 수 있게 함
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.title
            configuration.icon
        }
    }
}

extension LabelStyle where Self == TrailingIconLabelStyle {
    static var trailingIcon: Self { Self() }
}