23.07.19 계산기 프로그래밍(3)

계산기만들기과제 레벨3을 진행하기위해선 상속의 개념에 대해 알아야할것같아

자료를 찾아보다보니

https://babbab2.tistory.com/17

Swift) Optional 부수기 (3) Optional Unwrapping - 옵셔널 바인딩(if let vs guard let)

이곳에서 아주 상세히 설명해주고있었다.

너무 잘 설명하고 정리해주시는 글인걸 보고 블로그를 정독하고있다

 

또 직접 ui/ux를 확인해가며 계산기를 만들 수 있는 좋은 영상을 찾아서 보면서 제작해보았다.

//
//  ContentView.swift
//  계산기3
//
//  Created by t2023-m0088 on 2023/07/21.
//

import SwiftUI

struct ContentView: View {
    
    @State private var totalNumber: String = "0"
    
    var body: some View {
        ZStack{
            Color.black.ignoresSafeArea()
            
            VStack {
                Spacer()
                HStack{
                        Spacer()
                        Text(totalNumber)
                            .padding()
                            .font(.system(size:73))
                            .foregroundColor(.white)
                }
                HStack{
                    Button{
                        totalNumber = "0"
                    }label: {
                        
                        Text("C")
                            .frame(width: 80,
                                   height: 80)
                            .background(.gray)
                            .cornerRadius(40)
                            .foregroundColor(.white)
                            .font(.system(size: 33))
                    }
                    
                    Text("/")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("%")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("$")
                        .frame(width: 80,
                               height: 80)
                        .background(.orange)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                }
                
                HStack{
                    Button{
                        if totalNumber == "0"{
                            totalNumber = "7"
                    } else {
                        totalNumber += "7"
                    }
                    } label: {
                        Text("7")
                            .frame(width: 80,
                                   height: 80)
                            .background(.gray)
                            .cornerRadius(40)
                            .foregroundColor(.white)
                            .font(.system(size: 33))
                    }
                    
                    Text("8")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("9")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("-")
                        .frame(width: 80,
                               height: 80)
                        .background(.orange)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                }
                HStack{
                    Text("4")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("5")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("6")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("-")
                        .frame(width: 80,
                               height: 80)
                        .background(.orange)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                }
                HStack{
                    Text("1")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("2")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("3")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("+")
                        .frame(width: 80,
                               height: 80)
                        .background(.orange)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                }
                HStack{
                    Text("00")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("0")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text(".")
                        .frame(width: 80,
                               height: 80)
                        .background(.gray)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                    Text("=")
                        .frame(width: 80,
                               height: 80)
                        .background(.orange)
                        .cornerRadius(40)
                        .foregroundColor(.white)
                        .font(.system(size: 33))
                }
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

기본적인 계산기 ui와 7을 입력하였을때 입력값을 받는등의 구현을 하였다.

어느정도 개념이 잡혀갈 수 있는 좋은 기회였다.