Day 7 · 2부 · 스택 분배와 GeometryReader

HStack {
    Text(title).lineLimit(1)
    Spacer()
    Text(price)          // 우선순위 0 → 제목과 공평하게 줄어든다
}

struct PriceRow: View {
    let title: String
    let price: String
    var body: some View {
        HStack {
            Text(title)
                .lineLimit(1)
            Spacer(minLength: 8)
            Text(price)
                .layoutPriority(1)   // 제목의 최소폭을 뺀 나머지를 먼저 받는다
        }
    }
}

struct StackAlignDemo: View {
    var body: some View {
        HStack(alignment: .firstTextBaseline, spacing: 12) {
            Text("Avocado Toast").font(.title)
            Text("delicious").font(.caption)
            Spacer()                         // 나머지 폭을 전부 먹어 별을 끝으로 민다
            Image(systemName: "star.fill")   // SF Symbol은 글자처럼 자체 기준선이 있다(텍스트 없는 Color 같은 뷰는 아래 끝이 기준선)
        }
        .padding(.horizontal)
    }
}

struct ZStackBad: View {
    var body: some View {
        ZStack {
            Color.blue                       // flexible → ZStack이 제안 전체로 커진다
            Text("태그").foregroundStyle(.white)
        }
    }
}

struct BackgroundGood: View {
    var body: some View {
        Text("태그")
            .foregroundStyle(.white)
            .padding(.horizontal, 10)
            .padding(.vertical, 4)
            .background(Color.blue, in: Capsule())
    }
}

struct BadgeOverlay: View {
    var body: some View {
        Image(systemName: "bell")
            .font(.title)
            .overlay(alignment: .topTrailing) {
                Text("3")
                    .font(.caption2.bold())
                    .foregroundStyle(.white)
                    .padding(4)
                    .background(.red, in: Circle())
                    .offset(x: 8, y: -8)   // offset은 그리기 위치만 옮긴다(레이아웃 불변)
            }
    }
}

struct GeoBad: View {
    var body: some View {
        VStack {
            Text("제목")
            GeometryReader { geo in          // 남은 세로 공간을 전부 먹는다
                Color.orange.frame(width: geo.size.width * 0.4, height: 8)
            }                                // 자식은 좌상단에 붙는다
            Text("설명")                      // 맨 아래로 밀려난다
        }
    }
}

struct ProgressBar: View {
    var value: Double   // 0...1
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: .leading) {
                Capsule().fill(.quaternary)
                Capsule().fill(.tint)
                    .frame(width: geo.size.width * min(max(value, 0), 1))
            }
        }
        .frame(height: 8)   // GeometryReader의 높이를 바깥에서 고정
    }
}

struct BorderDebug: View {
    var body: some View {
        VStack {
            Text("제목").border(Color.red)
            Text("설명이 조금 더 깁니다").border(Color.blue)
        }
        .padding()
        .border(Color.green)   // 스택 + 패딩이 실제로 차지한 크기
    }
}

Image(systemName: "photo")
    .frame(width: 120, height: 120)

Image(systemName: "photo")
    .resizable()
    .scaledToFit()
    .frame(width: 120, height: 120)

Button("저장") { }
    .padding(.vertical, 14)
    .background(Color.accentColor)
    .frame(maxWidth: .infinity)   // 투명한 영역만 넓어진다

Button {
    // 저장
} label: {
    Text("저장")
        .frame(maxWidth: .infinity)
        .padding(.vertical, 14)
        .background(Color.accentColor)
        .foregroundStyle(.white)
        .clipShape(RoundedRectangle(cornerRadius: 10))
}

struct ProductRow: View {
    let title: String
    let price: String
    let isNew: Bool
    var body: some View {
        HStack {
            Text(title).lineLimit(1)
            Text(price).bold()
        }
    }
}

#Preview {
    VStack(alignment: .leading, spacing: 12) {
        ProductRow(title: "한정판 아보카도 토스트 세트 (2인분, 소스 추가)", price: "12,000원", isNew: true)
        ProductRow(title: "커피", price: "3,500원", isNew: false)
    }
    .padding()
}