🍎 3주차 실습

이따 전화 끝나고 채워넣기...

 

 

import Foundation
import SwiftUI

enum RainbowModel: CaseIterable{
    case red
    case orange
    case yellow
    case green
    case blue
    case indigo
    case purple
    
    
    //case에 해당하는 색 반환 (Return : 지정된 색 반환)
    func returnColor() -> Color {
        switch self {
        case .red:
            return Color.rainbowRed
        case .orange:
            return Color.rainbowOrange
        case .yellow:
            return Color.rainbowYellow
        case .green:
            return Color.rainbowGreen
        case .blue:
            return Color.rainbowBlue
        case .indigo:
            return Color.rainbowIndigo
        case .purple:
            return Color.rainbowPurple
        }
    }
    
    
    func returnColorName() -> String {
        switch self{
        case .red:
            return "빨강"
        case .orange:
            return "주황"
        case .yellow:
            return "노랑"
        case .green:
            return "초록"
        case .blue:
            return "파랑"
        case .indigo:
            return "남색"
        case .purple:
            return "보라"
        }
    }
}

import Foundation
import SwiftUI


@Observable //상태 변경을 감지할 수 있는 객체
class RainbowViewModel{
    var selectedRainbowModel: RainbowModel?
    var appleLogoColor: Color?
}

 

import SwiftUI
import Observation

struct ColorNavigationView: View {
    
    @Bindable var viewModel: RainbowViewModel
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack(spacing: 70) {
            if let selectedRainbowModel = viewModel.selectedRainbowModel {
                Text("현재 선택된 색상 \n\(selectedRainbowModel.returnColorName())")
                    .font(.title)
                    .foregroundStyle(Color.black)
                
                Button(action: {
                    //선택된 색상(selectedRainbowModel)의 색상을 가져와 → viewModel.appleLogoColor에 저장
                    viewModel.appleLogoColor = selectedRainbowModel.returnColor()
                    dismiss()
                }, label: {
                    Text("사과 색 바꾸기")
                        .padding(.vertical, 43)
                        .padding(.horizontal, 36)
                        .overlay(content: {
                            RoundedRectangle(cornerRadius: 30)
                                .fill(Color.clear)
                                .stroke(Color.black, style: .init(lineWidth: 1))
                        })
                })
            }
        }
        .navigationTitle("색 네비")
    }
}



#Preview {
    // 뷰 선언에서 @Bindable var viewModel: RainbowViewModel를 했기에 이 뷰를 초기화할 때 반드시 viewModel을 외부에서 넘겨줘야 해.
    ColorNavigationView(viewModel: RainbowViewModel())
}

import SwiftUI

struct RainbowView: View {
    
    var viewModel: RainbowViewModel = .init()
    
    @State private var navigationTrue: Bool = false /* 네비게이션을 할지 말지 정하는 state 변수를 만들어주세요 */

    var body: some View {
            NavigationStack {
                VStack {
                    colorCardGroup
                    
                    Spacer()
                    
                    bottomSelecteColorGroup
                }
                .safeAreaPadding(EdgeInsets(top: 47, leading: 15, bottom: 43, trailing: 15))
                .navigationDestination(isPresented: $navigationTrue, destination: {
                    ColorNavigationView(viewModel: viewModel)
                })
            }
        }
    
    /// 무지개 일곱가지 색상
    private var colorCardGroup: some View{
        // LazyVGrid의 spacing은 열간의 간격
        ///    3개의 열을 가진 LazyVGrid 구성
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 40), count: 3), spacing: 26, content: {
            /// 각각의 셀은 RainbowModel.allCases를 반복해서 색상 카드 생성
            ForEach(RainbowModel.allCases, id: \.self, content: { rainbow in
                makeColorCard(rainbow)
                    /// 각 카드 클릭 시 해당 색상을 뷰모델에 저장
                    .onTapGesture {
                        viewModel.selectedRainbowModel = rainbow
                        self.navigationTrue.toggle() /* 클릭하면 네비게이션이 활성화 되도록 toggle로 넣어줍니다. */
                    }
            })
        })
    }
    
    /// 반복 생성을 재사용하기 위한 무지개 색상 카드 뷰
    /// - Parameter model: 무지개 색을 담고 있는 모델
    /// - Returns: 색을 표현하는 카드 뷰 반환
    private func makeColorCard(_ model: RainbowModel) -> some View {
        VStack(spacing: 6, content: {
            Rectangle()
                .fill(model.returnColor())
            
            Text(model.returnColorName())
                .foregroundStyle(Color.black)
                .font(.title)
        })
        .frame(maxWidth: .infinity, minHeight: 110)
    }
    
    /// 하단 사과로고 및 선택된 색상 텍스트 그룹
    private var bottomSelecteColorGroup: some View {
        VStack(spacing: 70, content: {
            Image("appleLogo")
                .renderingMode(.template) /* 이거 지정 안 하면 색 안 바뀌어요!! */
                .fixedSize()
                .foregroundStyle(viewModel.appleLogoColor ?? Color.black)
            
            Text("현재 선택된 색상 : \(selectedColorName())")
                .font(.title)
                .foregroundStyle(Color.black)
        })
    }
    
    /// 옵셔널에 대해 값 처리를 위한 String 반환 함수
    /// - Returns: 옵셔널 값에 따른 두 가지 중 하나 값 반환
    private func selectedColorName() -> String {
        //
        if let name = viewModel.selectedRainbowModel { //(let!!!!!)선택된 색상(selectedRainbowModel)이 nil이 아닌 경우 이름 가져옴
            return name.returnColorName() // 이름 반환
        } else {
            return "아무것도 없음" // 선택된 색상없을 경우 기본문구 반환
        }
    }
    
}

#Preview {
    RainbowView()
}