Day 8 · 2부 · Layout 프로토콜·정렬·Preference

struct EqualWidthHStack: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        guard !subviews.isEmpty else { return .zero }
        let maxSize = maxSize(subviews: subviews)
        let spacing = spacing(subviews: subviews)
        let totalSpacing = spacing.reduce(0, +)
        return CGSize(width: maxSize.width * CGFloat(subviews.count) + totalSpacing,
                      height: maxSize.height)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard !subviews.isEmpty else { return }
        let maxSize = maxSize(subviews: subviews)
        let spacing = spacing(subviews: subviews)
        let placementProposal = ProposedViewSize(width: maxSize.width, height: maxSize.height)
        var x = bounds.minX + maxSize.width / 2          // origin이 0이라고 가정하지 않는다
        for index in subviews.indices {
            subviews[index].place(at: CGPoint(x: x, y: bounds.midY),
                                  anchor: .center,
                                  proposal: placementProposal)
            x += maxSize.width + spacing[index]
        }
    }

    // 미지정 제안 = "네 ideal 크기는?"
    private func maxSize(subviews: Subviews) -> CGSize {
        let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
        return sizes.reduce(.zero) { CGSize(width: max($0.width, $1.width), height: max($0.height, $1.height)) }
    }

    // 이웃한 두 뷰의 spacing 선호값 중 큰 쪽 (내장 스택과 같은 규칙)
    private func spacing(subviews: Subviews) -> [CGFloat] {
        subviews.indices.map { index in
            guard index < subviews.count - 1 else { return 0 }
            return subviews[index].spacing.distance(to: subviews[index + 1].spacing, along: .horizontal)
        }
    }
}

struct EqualButtons: View {
    var body: some View {
        EqualWidthHStack {
            Button { } label: { Text("고양이").frame(maxWidth: .infinity) }
            Button { } label: { Text("금붕어").frame(maxWidth: .infinity) }
            Button { } label: { Text("강아지").frame(maxWidth: .infinity) }
        }
        .buttonStyle(.bordered)
    }
}

private struct Rank: LayoutValueKey {
    static let defaultValue: Int = 1         // 기본값이 값의 타입도 정한다
}

extension View {
    func rank(_ value: Int) -> some View {
        layoutValue(key: Rank.self, value: value)
    }
}

struct PodiumLayout: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        proposal.replacingUnspecifiedDimensions()  // nil 제안이면 기본 크기로 대체
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let step = bounds.width / CGFloat(max(subviews.count, 1))
        for (i, subview) in subviews.enumerated() {
            let rank = subview[Rank.self]           // 키로 값 읽기
            let y = bounds.minY + CGFloat(rank - 1) * 30
            subview.place(at: CGPoint(x: bounds.minX + step * (CGFloat(i) + 0.5), y: y),
                          anchor: .top, proposal: .unspecified)
        }
    }
}

struct PodiumDemo: View {
    var body: some View {
        PodiumLayout {
            Text("🐱").rank(2)
            Text("🐟").rank(1)
            Text("🐶").rank(3)
        }
        .frame(height: 120)
    }
}

extension VerticalAlignment {
    private enum StarsAndTitle: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.bottom]                  // 가이드를 안 붙인 뷰의 기본값
        }
    }
    static let starsAndTitle = VerticalAlignment(StarsAndTitle.self)
}

struct ReviewCell: View {
    var body: some View {
        HStack(alignment: .starsAndTitle) {
            VStack {
                Text("★★★★☆")
                    .alignmentGuide(.starsAndTitle) { d in d[VerticalAlignment.center] }
                Text("리뷰 128개").font(.caption)
            }
            VStack(alignment: .leading) {
                Text("카테고리").font(.caption)
                Text("아보카도 토스트")
                    .font(.title2)
                    .alignmentGuide(.starsAndTitle) { d in d[VerticalAlignment.center] }
                Text("신선한 재료").font(.caption)
            }
        }
    }
}

struct IconLabel: View {
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Image(systemName: "leaf")
                .alignmentGuide(.firstTextBaseline) { d in d.height * 0.8 } // 위에서 80% 지점
            Text("비건 메뉴")
        }
    }
}

struct Park: Identifiable { let id = UUID(); let name: String }

struct ParkCarousel: View {
    let parks: [Park]
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 10) {
                ForEach(parks) { park in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(Color.green.opacity(0.3))
                        .overlay(Text(park.name))
                        .aspectRatio(3.0 / 2.0, contentMode: .fit)      // 높이는 비율로
                        .containerRelativeFrame(.horizontal, count: 4, span: 3, spacing: 10)
                }
            }
        }
        .safeAreaPadding(.horizontal, 20)   // 컨테이너 크기에서 빠진다
    }
}

struct ChatBad: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            List(0..<50, id: \.self) { Text("메시지 \($0)") }
            Button("보내기") { }
                .frame(maxWidth: .infinity)
                .padding()
                .background(.bar)
        }
    }
}

struct ChatGood: View {
    var body: some View {
        List(0..<50, id: \.self) { Text("메시지 \($0)") }
            .safeAreaInset(edge: .bottom) {
                Button("보내기") { }
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(.bar)
            }
    }
}

struct UnsavedKey: PreferenceKey {
    static let defaultValue = false
    static func reduce(value: inout Bool, nextValue: () -> Bool) {
        value = value || nextValue()       // 하나라도 true면 true
    }
}

struct EditorField: View {
    @State private var text = ""
    var body: some View {
        TextField("메모", text: $text)
            .preference(key: UnsavedKey.self, value: !text.isEmpty)
    }
}

struct EditorScreen: View {
    @State private var hasUnsaved = false
    var body: some View {
        VStack {
            EditorField()
            EditorField()
            Text(hasUnsaved ? "저장 안 된 변경 있음" : "변경 없음")
        }
        .onPreferenceChange(UnsavedKey.self) { hasUnsaved = $0 }
    }
}

struct LabelWidthKey: PreferenceKey {
    static let defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

struct AlignedForm: View {
    @State private var labelWidth: CGFloat?
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            row("이름", "홍길동")
            row("이메일 주소", "gildong@example.com")
            row("전화", "010-0000-0000")
        }
        .onPreferenceChange(LabelWidthKey.self) { labelWidth = $0 } // 상태 변경 → 다시 레이아웃
        .padding()
    }
    private func row(_ label: String, _ value: String) -> some View {
        HStack {
            Text(label)
                .fixedSize()
                .background(
                    GeometryReader { proxy in
                        Color.clear.preference(key: LabelWidthKey.self, value: proxy.size.width)
                    }
                )
                .frame(width: labelWidth, alignment: .leading)
            Text(value).foregroundStyle(.secondary)
        }
    }
}

struct FormAlignedByGrid: View {
    var body: some View {
        Grid(alignment: .leading, horizontalSpacing: 12, verticalSpacing: 12) {
            GridRow { Text("이름"); Text("홍길동").foregroundStyle(.secondary) }
            GridRow { Text("이메일 주소"); Text("gildong@example.com").foregroundStyle(.secondary) }
            GridRow { Text("전화"); Text("010-0000-0000").foregroundStyle(.secondary) }
        }
        .padding()
    }
}

struct TagCloud: Layout {
    var spacing: CGFloat = 8
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        // TODO: 제안 폭 안에서 줄바꿈하며 필요한 높이 계산
        .zero
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        // TODO: bounds.minX / minY 기준으로 왼쪽 위부터 배치
    }
}

#Preview {
    let tags = ["SwiftUI", "Layout", "Grid", "ViewThatFits", "AnyLayout",
                "PreferenceKey", "iOS 17", "containerRelativeFrame"]
    return TagCloud {
        ForEach(tags, id: \.self) { tag in
            Text(tag)
                .padding(.horizontal, 10)
                .padding(.vertical, 4)
                .background(Color.blue.opacity(0.15), in: Capsule())
        }
    }
    .padding()
}