04 · 레이아웃 — 3단계 협상

Text("아주 아주 아주 긴 제목입니다")
    .frame(width: 100)
// frame 뷰: 폭 100
// Text: 100을 제안받아 줄바꿈 후 필요한 높이를 스스로 결정
//       한 단어가 100보다 넓으면 → 잘리거나 넘친다 (frame이 강제로 못 줄인다)

VStack(spacing: 16) {
    // ① flexible 뷰: 제안을 그대로 수용 → 정확히 150×60
    Color.blue
        .frame(width: 150, height: 60)

    // ② 내용 기반 뷰: 자기 크기를 고른다 → frame 영역 안에서 가운데 정렬될 뿐
    Text("짧음")
        .frame(width: 150, height: 60)
        .border(Color.red)          // 빨간 테두리(frame 영역)와 글자 크기가 다르다

    // ③ Image 기본값: 제안을 무시하고 원본 픽셀 크기
    Image("logo")
        .frame(width: 150, height: 60)
        .border(Color.green)        // 이미지가 테두리를 넘거나 못 채운다

    // ④ .resizable() 을 붙이면 ③이 flexible 부류로 바뀐다
    Image("logo")
        .resizable()
        .frame(width: 150, height: 60)
}

HStack {
    Text(longTitle)         // 여기가 잘린다
    Spacer()
    Text("12,000원")
}

HStack {
    Text(longTitle)
        .frame(maxWidth: .infinity, alignment: .leading)   // 남는 폭을 받아 간다
    Text("12,000원")
        .layoutPriority(1)                                 // 가격은 줄지 않게
}

Text(longTitle)
    .fixedSize(horizontal: false, vertical: true)
// 가로: 부모 제안을 받아들여 줄바꿈 / 세로: 필요한 만큼 스스로 결정

Text(longTitle)
    .lineLimit(1)
    .minimumScaleFactor(0.8)      // 최대 20%까지 축소 허용, 그 이상은 "…"

VStack(alignment: .leading, spacing: 8) {
    Text("제목").font(.headline)
    Text("설명").foregroundStyle(.secondary)
}

List(todos) { todo in
    Text(todo.title)
}

// 스와이프 삭제 · 이동 같은 표준 인터랙션은 ForEach에 붙인다
List {
    ForEach(todos) { todo in
        Text(todo.title)
    }
    .onDelete { offsets in todos.remove(atOffsets: offsets) }
    .onMove   { from, to in todos.move(fromOffsets: from, toOffset: to) }
}

ScrollView {
    LazyVStack(spacing: 12) {
        ForEach(cards) { card in
            CardView(card: card)
        }
    }
    .padding()
}

ScrollView {
    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 12) {
        ForEach(photos) { photo in
            PhotoCell(photo: photo)
        }
    }
    .padding()
}

Form {
    Section("알림") {
        Toggle("푸시 받기", isOn: $pushEnabled)
        Picker("빈도", selection: $frequency) {
            ForEach(Frequency.allCases) { f in
                Text(f.label).tag(f)
            }
        }
    }
    Section {
        Button("로그아웃", role: .destructive) { logout() }
    }
}

VStack {
    Text("제목")
    GeometryReader { geo in                    // 남은 공간을 전부 먹는다
        Bar().frame(width: geo.size.width * 0.4)
    }
    Text("설명")                                // 밀려난다
}

// 방법 1 — Spacer 비율로 나눈다
HStack(spacing: 0) {
    Bar()
    Spacer(minLength: 0)
}
.frame(maxWidth: .infinity)

// 방법 2 — containerRelativeFrame (iOS 17+)
Bar().containerRelativeFrame(.horizontal) { width, _ in width * 0.4 }