24.06.26 Today I Learned

 

 

 구현할 때 버튼이 사각형으로 되있길래 동그랗게 만드는거로 마무리 지었다

.layerconerRadius로 하는거로 코드를 입력해봤는데 적용이 잘 안되는거 같아서 아래의 방법으로 구현했다.

 

이젠 코드베이스로 구현해보는걸 해야겠다.

---

 

일단은 버튼을 화면에 구현하고 컬러를 Asset에 추가해서 이전에 쓰던 컬러와 최대한 비슷한 색을 찾아서 만들고 그 컬러를 custom으로 불러오는 걸 해봤다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("7")
                    .frame(width:80, height:80) // 백그라운드 프레임
                    .background(.number) // 백그라운드 컬러
                    .cornerRadius(40) // 원형으로 깎는 것
                    .foregroundColor(.white) // 텍스트 컬러
                    .font(.system(size:30)) // 텍스트 스타일 및 사이즈
                    .bold() // 텍스트 볼드체
                Text("8")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("9")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("×")
                    .frame(width:80, height:80)
                    .background(.orange)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
            }
            HStack {
                Text("4")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("5")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("6")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("-")
                    .frame(width:80, height:80)
                    .background(.orange)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
            }
            HStack {
                Text("1")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("2")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("3")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("+")
                    .frame(width:80, height:80)
                    .background(.orange)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
            }
            HStack {
                Text("AC")
                    .frame(width:80, height:80)
                    .background(.orange)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("0")
                    .frame(width:80, height:80)
                    .background(.number)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("=")
                    .frame(width:80, height:80)
                    .background(.orange)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
                Text("÷")
                    .frame(width:80, height:80)
                    .background(.orange)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .font(.system(size:30))
                    .bold()
            }
        }
    }
}
    #Preview {
        ContentView()
    }