Day 2 · 뷰 조립

struct Pet: Identifiable {
    let id = UUID()
    var name: String
    var trick: String
    var hasAward: Bool
}

struct PetRowBig: View {
    let pet: Pet

    var body: some View {
        HStack {
            Image(systemName: "pawprint.fill")
                .font(.title)
                .frame(width: 44, height: 44)
                .background(.orange.opacity(0.2), in: Circle())
            VStack(alignment: .leading) {
                Text(pet.name).font(.headline)
                Text(pet.trick).font(.subheadline).foregroundStyle(.secondary)
            }
            Spacer()
            if pet.hasAward {
                Image(systemName: "trophy.fill").foregroundStyle(.yellow)
            }
        }
    }
}

struct PetRow: View {
    let pet: Pet

    var body: some View {
        HStack {
            profileImage                               // ① 프로퍼티
            titles(name: pet.name, trick: pet.trick)   // ② 함수 (인자가 필요할 때)
            Spacer()
            if pet.hasAward { awardBadge }
        }
    }

    private var profileImage: some View {              // ① 단일 표현식이면 @ViewBuilder 불필요
        Image(systemName: "pawprint.fill")
            .font(.title)
            .frame(width: 44, height: 44)
            .background(.orange.opacity(0.2), in: Circle())
    }

    private func titles(name: String, trick: String) -> some View {
        VStack(alignment: .leading) {
            Text(name).font(.headline)
            Text(trick).font(.subheadline).foregroundStyle(.secondary)
        }
    }

    private var awardBadge: some View {
        Image(systemName: "trophy.fill").foregroundStyle(.yellow)
    }
}

struct AwardBadge: View {
    let hasAward: Bool
    @State private var isAnimating = false     // 자기 상태는 struct만 가질 수 있다

    var body: some View {
        Image(systemName: hasAward ? "trophy.fill" : "trophy")
            .foregroundStyle(hasAward ? .yellow : .gray)
            .scaleEffect(isAnimating ? 1.2 : 1)
            .onTapGesture { isAnimating.toggle() }
    }
}

#Preview { AwardBadge(hasAward: true) }        // 부품 하나만 따로 미리보기

struct BuilderPeek: View {
    var flag = true

    var body: some View {
        VStack {
            Text("제목")                                    // Text
            if flag { Text("부제") }                         // Optional<Text>
            if flag { Image(systemName: "star") }
            else { Text("없음") }                            // _ConditionalContent<Image, Text>
        }
    }
}
// print(type(of: BuilderPeek().body)) 출력:
// VStack<TupleView<(Text, Optional<Text>, _ConditionalContent<Image, Text>)>>

struct StatusView: View {
    let isOnline: Bool
    var body: some View { statusIcon }

    // ❌ error: branches have mismatching types 'Image' and 'Text'
    // private var statusIcon: some View {
    //     if isOnline { Image(systemName: "wifi") } else { Text("오프라인") }
    // }

    // ✅ 빌더가 두 갈래를 한 타입으로 합친다
    @ViewBuilder
    private var statusIcon: some View {
        if isOnline {
            Image(systemName: "wifi")
        } else {
            Text("오프라인")
        }
    }
}

struct Card<Content: View>: View {
    let title: String
    let content: Content

    init(title: String, @ViewBuilder content: () -> Content) {
        self.title = title
        self.content = content()          // 클로저는 init에서 바로 실행해 값으로 저장
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title).font(.headline)
            content
        }
        .padding()
        .background(.background.secondary, in: RoundedRectangle(cornerRadius: 12))
    }
}

struct CardDemo: View {
    var body: some View {
        Card(title: "오늘의 트릭") {
            Text("Whiskers — 하이파이브")
            Text("Roofus — 홈런")
        }
    }
}

struct StartScreen: View {
    let isLoggedIn: Bool

    var body: some View {
        NavigationStack {
            Group {
                if isLoggedIn {
                    Text("환영합니다")
                } else {
                    Text("로그인이 필요합니다")
                }
            }
            .navigationTitle("Start")     // 어느 갈래든 제목이 붙는다
        }
    }
}

struct BorderedCaption: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.caption2)
            .padding(10)
            .overlay(RoundedRectangle(cornerRadius: 15).stroke(lineWidth: 1))
            .foregroundStyle(.blue)
    }
}

extension View {
    func borderedCaption() -> some View {
        modifier(BorderedCaption())          // 호출부는 .borderedCaption() 한 줄
    }
}

struct TagsAfter: View {
    var body: some View {
        HStack {
            Text("Swift").borderedCaption()
            Text("iOS").borderedCaption()
        }
    }
}

struct SpoilerModifier: ViewModifier {
    @State private var isRevealed = false

    func body(content: Content) -> some View {
        content
            .blur(radius: isRevealed ? 0 : 8)
            .onTapGesture { isRevealed = true }
            .accessibilityHint(isRevealed ? "" : "탭하면 내용이 보입니다")
    }
}

extension View {
    func spoiler() -> some View { modifier(SpoilerModifier()) }
}

// 사용: Text("범인은 집사다").spoiler()

struct PillButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 16).padding(.vertical, 10)
            .background(.blue, in: Capsule())
            .foregroundStyle(.white)
            .opacity(configuration.isPressed ? 0.6 : 1)       // 눌림 상태를 받아 쓴다
            .scaleEffect(configuration.isPressed ? 0.97 : 1)
    }
}

extension ButtonStyle where Self == PillButtonStyle {
    static var pill: PillButtonStyle { PillButtonStyle() }    // .buttonStyle(.pill) 로 쓰기
}

struct ActionsView: View {
    var body: some View {
        VStack {
            Button("저장") { }
            Button("공유") { }
            HStack {
                Button("삭제", role: .destructive) { }
                Button("취소") { }
                    .buttonStyle(.bordered)                     // 안쪽에서 덮어쓰기
            }
        }
        .buttonStyle(.pill)                                     // 한 번 적용 → 안쪽 버튼 전부
    }
}

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 4) {
            configuration.icon.font(.title2)
            configuration.title.font(.caption)
        }
    }
}

struct TabLikeRow: View {
    var body: some View {
        HStack(spacing: 24) {
            Label("홈", systemImage: "house")
            Label("검색", systemImage: "magnifyingglass")
            Label("설정", systemImage: "gear")
        }
        .labelStyle(VerticalLabelStyle())
    }
}

extension View {
    @ViewBuilder
    func `if`<T: View>(_ condition: Bool, transform: (Self) -> T) -> some View {
        if condition { transform(self) } else { self }    // _ConditionalContent<T, Self>
    }
}

// ❌ 회전 대신 크로스페이드가 나온다
struct FlipIconWrong: View {
    @State private var flipped = false
    var body: some View {
        Image(systemName: "app.fill")
            .if(flipped) { $0.rotationEffect(.degrees(180)) }
            .onTapGesture { withAnimation { flipped.toggle() } }
    }
}

// ✅ 회전 애니메이션이 된다
struct FlipIcon: View {
    @State private var flipped = false
    var body: some View {
        Image(systemName: "app.fill")
            .rotationEffect(.degrees(flipped ? 180 : 0))
            .onTapGesture { withAnimation { flipped.toggle() } }
    }
}

import SwiftUI

struct SettingsBefore: View {
    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("알림").font(.headline)
                Text("푸시 알림을 받습니다")
                Text("켜기").padding(8).background(.blue, in: Capsule()).foregroundStyle(.white)
                    .onTapGesture { print("알림") }
            }
            .padding().background(.gray.opacity(0.15), in: RoundedRectangle(cornerRadius: 12))

            VStack(alignment: .leading) {
                Text("백업").font(.headline)
                Text("매일 밤 백업합니다")
                Text("지금 백업").padding(8).background(.blue, in: Capsule()).foregroundStyle(.white)
                    .onTapGesture { print("백업") }
            }
            .padding().background(.gray.opacity(0.15), in: RoundedRectangle(cornerRadius: 12))
        }
        .padding()
    }
}

#Preview { SettingsBefore() }