Day 8 · 1부 · Grid와 적응형 레이아웃

struct Pet: Identifiable, Equatable {
    let id = UUID()
    var type: String
    var votes: Int
}

struct Leaderboard: View {
    var pets: [Pet]
    var totalVotes: Int
    var body: some View {
        Grid(alignment: .leading) {                 // 모든 셀 기본 정렬
            ForEach(pets) { pet in
                GridRow {
                    Text(pet.type)                   // 1열: 가장 긴 이름 폭
                    ProgressView(value: Double(pet.votes), total: Double(totalVotes)) // 2열: 나머지
                    Text("\(pet.votes)")
                        .gridColumnAlignment(.trailing) // 3열만 오른쪽 정렬
                }
                Divider()                            // GridRow 밖의 뷰 = 모든 열을 가로지르는 행
            }
        }
        .padding()
    }
}

struct GridSpanDemo: View {
    var body: some View {
        Grid(horizontalSpacing: 8, verticalSpacing: 8) {
            GridRow {
                Text("이름")
                Text("수량")
                Text("금액")
            }
            .bold()
            Divider()
                .gridCellUnsizedAxes(.horizontal)  // 그리드를 화면 폭으로 늘리지 않는다
            GridRow {
                Text("아보카도")
                Text("2")
                Text("6,000")
            }
            GridRow {
                Text("합계")
                    .gridCellColumns(2)            // 두 열 병합
                Text("6,000")
            }
        }
    }
}

struct PhotoGrid: View {
    let columns = [GridItem(.adaptive(minimum: 100), spacing: 8)]
    var body: some View {
        ScrollView {                              // 그리드 자체에는 스크롤이 없다
            LazyVGrid(columns: columns, spacing: 8) {
                ForEach(0..<60, id: \.self) { i in
                    RoundedRectangle(cornerRadius: 8)
                        .fill(Color.blue.opacity(0.2))
                        .aspectRatio(1, contentMode: .fit) // 폭에 맞춘 정사각형
                        .overlay(Text("\(i)"))
                }
            }
            .padding()
        }
    }
}

@MainActor func makeLayout() -> UICollectionViewLayout {
    let item = NSCollectionLayoutItem(
        layoutSize: .init(widthDimension: .fractionalWidth(1.0 / 3.0),
                          heightDimension: .fractionalHeight(1.0)))
    let group = NSCollectionLayoutGroup.horizontal(
        layoutSize: .init(widthDimension: .fractionalWidth(1.0),
                          heightDimension: .absolute(120)),
        subitems: [item])
    return UICollectionViewCompositionalLayout(section: NSCollectionLayoutSection(group: group))
}
// + dataSource, cell 등록, 스냅샷 적용이 별도로 필요하다

struct VoteButtons: View {
    var body: some View {
        ViewThatFits(in: .horizontal) {   // 가로 축만 검사
            HStack { buttons }            // 1순위
            VStack { buttons }            // 2순위
        }
    }
    @ViewBuilder private var buttons: some View {
        Button("고양이") { }
        Button("금붕어") { }
        Button("강아지") { }
    }
}

struct ToggleBad: View {
    @State private var isVertical = false
    var body: some View {
        VStack {
            if isVertical {
                VStack { Avatars() }   // 이 가지의 Avatars와
            } else {
                HStack { Avatars() }   // 이 가지의 Avatars는 서로 다른 뷰
            }
            Button("전환") { withAnimation { isVertical.toggle() } }
        }
    }
}

struct Avatars: View {
    var body: some View {
        Circle().fill(.red).frame(width: 44, height: 44)
        Circle().fill(.green).frame(width: 44, height: 44)
        Circle().fill(.blue).frame(width: 44, height: 44)
    }
}

struct ToggleGood: View {
    @State private var isVertical = false
    var body: some View {
        let layout = isVertical ? AnyLayout(VStackLayout()) : AnyLayout(HStackLayout())
        VStack {
            layout { Avatars() }       // 구조가 항상 같다 → identity 유지
            Button("전환") { withAnimation { isVertical.toggle() } }
        }
    }
}

struct DynamicTypeLayout: View {
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
    var body: some View {
        let layout = dynamicTypeSize <= .large
            ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())
        layout {
            Text("First label")
            Text("Second label")
        }
    }
}