Scrumdinger 개발 02 - Creating a navigation hierarchy

 

 

 

 

1. Set up navigation
2. Create the detail view
3. Add visual components to the detail view
4. Iterate through attendees
5. Navigate between screens

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)
        //        }
        
        // NavigationStack
        NavigationStack {
            List(scrums) { scrum in
                NavigationLink(destination: DetailView(scrum: scrum)) {
                    CardView(scrum: scrum)
                        .listRowBackground(scrum.theme.mainColor)
                }
            }
            .navigationTitle("Daily Scrums")
            .toolbar {
                //Pass an empty action to the button for now.
                Button(action: {}) {
                    Image(systemName: "plus")
                }
                .accessibilityLabel("New Scrum")
            }
        }
    }
}

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

 

 

 

 

//
//  DetailView.swift
//  Scrumdinger
//
//  Created by taeni on 3/31/25.
//
import SwiftUI

struct DetailView: View {
    let scrum: DailyScrum
    
    var body: some View {
        List {
            Section(header: Text("Meeting Info")) {
//                Label("Start Meeting", systemImage: "timer")
//                    .font(.headline)
//                    .foregroundColor(.accentColor)
                
                // 3depth
                NavigationLink(destination: MeetingView()) {
                    Label("Start Meeting", systemImage: "timer")
                        .font(.headline)
                        .foregroundColor(.accentColor)
                }
                
                HStack {
                    Label("Length", systemImage: "clock")
                    Spacer()
                    Text("\(scrum.lengthInMinutes) minutes")
                }
                .accessibilityElement(children: .combine)
                /**
                 VoiceOver 사용 시 설정
                 
                 .accessibilityElement
                 .accessibilityLabel("내 맘대로 정의") // 사용자가 정의한 라벨 적용
                 SwiftUI에서 접근성(VoiceOver 등)이 특정 UI 요소를 어떻게 인식할지 정의
                 
                 .ignore : 접근성 요소로 인식하지 않음
                 .combine : 하나의 요소로 읽음
                 .contain : 개별로 읽음
                 */
                
                HStack {
                    Label("Theme", systemImage: "paintpalette")
                    Spacer()
                    Text(scrum.theme.name)
                        .padding(4)
                        .foregroundColor(scrum.theme.accentColor)
                        .background(scrum.theme.mainColor)
                        .cornerRadius(4)
                }
                .accessibilityElement(children: .combine)
            }
            
            // 참석자
            Section(header: Text("Attendees")) {
                ForEach(scrum.attendees) { attendee in
                    Label(attendee.name, systemImage: "person")
                }
            }
        }
        .navigationTitle(scrum.title)
    }
}

#Preview {
    //Wrap DetailView in a NavigationStack to preview navigation elements on the canvas.
    NavigationStack {
        DetailView(scrum: DailyScrum.sampleData[0])
    }
}

 

 

 

 

Attendee 를 struct 화 하여 Extension 추가

import Foundation
import ThemeKit

struct DailyScrum: Identifiable {
    let id: UUID
    var title: String
    var attendees: [Attendee]
    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.map { Attendee(name: $0) }
        self.lengthInMinutes = lengthInMinutes
        self.theme = theme
    }
}


extension DailyScrum {
    struct Attendee: Identifiable {
        let id: UUID
        var name: String
        //Add the required id property and a variable for name.
        init(id: UUID = UUID(), name: String) {
            self.id = id
            self.name = name
        }
    }
}

 

 

Scrums -> Detail -> Meeting