100 days of swiftui: 42

challenge

1. Add the launch date to MissionView, below the mission badge. You might choose to format this differently given that more space i
   s available, but it’s down to you.
2. Extract one or two pieces of view code into their own new SwiftUI views – the horizontal scroll view in MissionView is a great candidate, but if you followed my styling then you could also move the Rectangle dividers out too.
3. For a tough challenge, add a toolbar item to ContentView that toggles between showing missions as a grid and as a list.

solution

1. MissionView에 launch date 추가하기

                    HStack(alignment: .bottom) {
                        Text(mission.displayName)
                            .font(.largeTitle.bold())
                        Text(mission.launchDate?.formatted(date: .abbreviated, time: .omitted) ?? "N/A")
                            .font(.title3)
                            .foregroundStyle(.secondary)
                    }

깃헙 링크

2. SwiftUI View로 지정하기

• Rectangle을 CustomDividerView로 변경하기

struct CustomDividerView: View {
    var body: some View {
        Rectangle()
            .frame(height: 2)
            .foregroundColor(.lightBackground)
            .padding(.vertical)
    }
}

깃헙 링크

• ScrollView의 crew member를 CrewMemberView로 변경하기
  

struct CrewMemberView: View {
    let crewMember: Astronaut
    let role: String
    var body: some View {
        Image(crewMember.id)
            .resizable()
            .scaledToFit()
            .clipShape(.capsule)
            .frame(width: 104, height: 72)
            .overlay(
                Capsule()
                    .stroke(.white, lineWidth: 1)
            )
        VStack(alignment: .leading) {
            Text(crewMember.name)
                .font(.headline)
            Text(role)
                .font(.caption)
        }
        .foregroundColor(.white)
    }
}

깃헙 링크

3. 미션을 그리드나 리스트로 변경해서 보여주기

위와 같이 그리드와 닮은 리스트뷰를 설정하고, toolbar의 isGridView의 값에 따라 리스트와 그리드 뷰 중 하나로 보여주게 설정했다.

깃헙 링크