HACKING WITH SWIFT - WeSplit(3)

🧑‍💻이전 시간에 이어서 이번 시간에도 동일하게 계속 진행해보겠습니다~!

 

 

---

본격적으로 WeSplit 프로젝트를 시작해보자!

 

먼저 @State를 이용하여 사용자가 앱에 입력할 것으로 예상되는 데이터에 대해 속성을 추가해야 한다.

@State private var checkAmount = 0.0
@State private var numberOfPeople = 2
@State private var tipPercentage = 20

그래서 다음과 같이 금액의 기본값으로 0.0, 인원수의 기본값인 2, 팁 비율의 기본값인 20으로 지정하여 진행하였다. 

그리고 팁에 대한 비율을 다르게 설정하기 위해서 배열을 이용하여 팁에 대한 비율을 4번째 속성으로 추가하였다. 

 

var body: some View {
        Form {
            Section {
                TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                    .keyboardType(.decimalPad)
            }

            Section {
                Text(checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
            }
        }
    }
}

ContentView 내부의 코드를 한번 살펴보자

 

먼저 우리가 이전 시간부터 알아보았던 Form과 Section, TextField를 통해 사용자가 금액을 입력할 수 있게끔 만들어 보았다. 그리고 바로 아래 Section에서는 해당 금액에 대한 정확한 금액을 백분율로 표시하였다.

코드 중 Locale은 사용자가 사용하는 달력, 수천 자리의 숫자를 구분하는 방법, 미터법 사용 여부 등 모든 사용자의 지역 설정을 저장하는 iOS에 내장된 하나의 구조체이다. 이후 사용자에게 선호하는 통화 코드 우리나라의 경우 "USD"가 아닌 "KRW"을 선택하겠지만 그렇지 않은 경우 "USD"로 대체하게 된다. 

 

 

그리고 텍스트 필드에서 첫 번째 매개변수는 Placeholder로 사용되는 문자열이다. 두 번째 매개변수는 속성에 대한 양방향 바인딩인 checkAmount이다. 앞서 배웠듯이 사용자가 데이터를 입력하게 되면 해당 속성이 업데이트 된다. 

마지막으로 세번째 매개변수는 텍스트 서식을 지정하여 통화로 만드는 방식을 제어하는 매개 변수이다. 

 

 

바로 실행 하여 데이터를 입력 해보면 두번째 섹션에서 자동으로 바로 동기화를 통해 내가 원했던 작업을 시행 하게 된다. 

여기서 그럼 동기화가 발생 하는 이유와 과정에 대해서 간단하게 짚고 넘어가자!

1. 텍스트 필드에는 checkAmount속성에 대한 양방향 바인딩이 있다.
2. checkAmount속성은 @State값의 변경 사항을 자동으로 감시한다. 
3. 속성이 변경 되면 SwiftUI는 속성을 다시 호출한다.(ui 다시로드)
4. 따라서 Text view에서 업데이트된 checkAmount값을 가져온다.

 

 

여기서 텍스트 필드에서 내가 필요한건 알파벳 키보드가 아닌 숫자와 소수점을 표시할 . 만 있으면 된다. 

그래서 여기서 다른 종류의 키보드를 강제로 적용할 수있는 수정자가 있는데 keyboardType()을 이용하여 키보드 종류를 지정하는 매개변수를 제공해주면 된다. 이 상황에서는 .numberPad 나  .decialPad 인데 두가지 다 사용자가 선택할수있는 데이터는 숫자 뿐이지만, 차이가 있다. .decialPad의 경우 정수 뿐만 아니라 $57.50같은 소수점도 입력이 가능해진다. 

 

TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
    .keyboardType(.decimalPad)

 

따라서 첫번째 Section의 텍스트필드에 수정자를 추가하여 다음과 같이 실행 해보면 텍스트 필드에 숫자만 입력할 수있어야 하는데...

왜 키보드가 안뜰까..?🙀

 

코드를 다시 살펴 보기도 하였고 .decialPad 가 아닌 .numberPad로도 해보았지만 결과는 동일 하였다. 그래서 아래 로그창을 확인해보니

Can't find keyplane that supports type 8 for keyboard iPhone-PortraitChoco-DecimalPad; using 27100_PortraitChoco_iPhone-Simple-Pad_Default 

과 같은 문구를 확인 하였고 모르겠다면 구글링을 해봐야겠죠??하고 stack overflow에서 찾아보니 원인은 잘 모르겠으나 해결법은 너무 간단했다. iOS Simulator를 선택한 다음

⬇️⬇️

I/O를 선택하면 아래와 같이 Connect Hardware Keyboard에 체크가 되어있을텐데 이걸 꺼주면???

 

잘뜬다!!!

이렇게 원했던 숫자 패드가 잘 나오는것을 확인 할 수있다.

 

 

---

이번에는 바로 사용자가 식사 인원 즉 더치패이 인원을 선택 할 수있도록 해보자. 여기서 이전에 배웠던 Picker와 ForEach를 이용하게 되며 선택 할 수있는 사람의 수는 2명 이상 99명 이하로 한번 설정 해볼려고 한다. 그러기 위해서는 첫번째 Section을 일부 수정 해보았다. 그 수정 코드는 다음과 같다. 

 

Section {
    TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
        .keyboardType(.decimalPad)

    Picker("Number of people", selection: $numberOfPeople) {
        ForEach(2 ..< 100) {
            Text("\($0) people")
        }
    }
}

 

해당 코드를 추가하고 실행 해보면 아래와 같은 결과물을 볼 수있다. 

 

자 여기서 이상한 점은 사람 수를 입력할려고 보면 우리가 초기에 설정 해두었던 numberOfPeople 의 초기값은 분명히 2였다. 그런데 왜 저기서는 기본값이 2가 아닌 4일까? 그리고 추가적으로 선택할려고 터치를 해보면 아무일도 일어나지 않는다.

 

 

먼저 초기값이 2였는데 현재 출력되는값이 4인 것부터 해결 해보자면 

ForEach(2..<100) { 부분에서 우리는 2에서 100까지 계산 하여 행을 만들도록 하였는데 이건 0번째행에 "2명"이 이미 포함 되어있으므로  numberOfPeople의 값에 2를 주었을때 실제로는 "4명"인 세 번째 행으로 설정 했다는것이 문제였다. 다른 문제로 Picker를 이용하였는데도 불구 하고 탭을 해도 아무일도 일어나지 않은 것이다. 

이는 우리가 NavigationView를 추가 하지 않고 Picker를 이용한것이기 때문이다. 따라서 NavigationView를 추가하고 다시 실행 해보면

 

 

내가 원했던 사람 수를 선택할 수있는 페이지로 전환되면서 선택을 마치면 자동적으로 사람 수는 당연히 내가 선택한 사람의 수로 바뀌게된다.

 

처음에는 4명 현재는 8명으로 바뀐것을 확인 할 수있다.

 

---

 

 

이번에는 팁 비율을 표시하기 위해 이미 추가한 2개의 Section 아래에 새로운 Section을 추가해보자!

Section {
    Picker("Tip percentage", selection: $tipPercentage) {
        ForEach(tipPercentages, id: \.self) {
            Text($0, format: .percent)
        }
    }
}

 

이는 배열의 모든 옵션을 ForEach를 이용하여 각 옵션을 .percent형식의 텍스트 보기로 변환 하였다. 이전 Picker와 동일하게 새 옵션 화면을 넣어주었다. 

 

그렇게 하면 이전의 Picker와 동일하게 새로운 페이지에서 다음과 같이 팁 비율에 대한 선택지를 사용자가 선택 할 수있다. 

 

그런데 이번에는 이렇게 하지말고 다른 방식으로 Picker를 보여주고 싶었다. 그러기 위해 아래의 코드만 추가 하면 된다. 

.pickerStyle(.segmented)

그럼 어떻게 되는지 바로 결과 화면으로 차이점을 비교해보자.

 

아마도 위 Section에 있는 Picker와 비교해보면 더 쉽게 차이점을 알 수있을것이다. 

여기서 사용자가 더 이해하기 위해서 Section에 머리글을 추가 해보자. 

사용자에게 얼마나 팁을 남길것인지에 대한 질문을 미리 함으로서 해당 Picker가 어떤 역할을 하는지 알 수있다.

바로 추가하여 결과를 확인해보자!

 

 

 

 

 

 

---

 

마지막 파트에서는 사용자가 입력한 금액과 제공할 팁 비율을 정하는 부분, 그리고 마지막으로 그에 에 대한 계산 결과로 한사람당 내야하는 금액을 계산 하는 부분을 개발 하면서 마무리 지어 보자.

 

 

 

이 부분에서는 약간의 계산이 필요한데 1인당 지불해야 하는 총 금액은 주문 금액에 팁 비율을 더한 값을 인원수로 나눈 값과 같다. 

 

1인당 지불 금액 = 주문금액 + 팁 / 인원 수 

 

 

이전에 문제 였던 계산 인원을 선정 할때 numberOfPeople이 이미 +2 만큼 차이 났던것 처럼 값 3명을 저장 할때 5명을 의미하였는데 

따라서 새로운 속성인 totalPerPerson을 만들거다. 이는 Double형으로 입력받을 것이다.

 

var totalPerPerson: Double {

        let peopleCount = Double(numberOfPeople + 2 )
        let tipSelection = Double(tipPercentage)
        
        let tipValue = checkAmount / 100 * tipSelection
	let grandTotal = checkAmount + tipValue
	let amountPerPerson = grandTotal / peopleCount

return amountPerPerson
}

 

그리고 우리는 numberOfPeople을 읽고 거기에 2를 더하면서 얼마나 2에서 100까지의 범위를 갖지만 실제로는 0에서 계산 된다는것을 알게 된다. 결과값은 Double로 변환 해야하는데 이는 checkAmount와 함께 사용하기 때문에 그렇다. 아래 줄의 tipSelection 또한 동일 하다.

 

tipSelection값을 100으로 곱하고 checkAmount 으로 나눈값을 tipValue에 저장 해두자. 

그리고 팁값을 checkAmount에 추가하여 금액의 총 합계를 계산 하였다.

그리고 총액을 peopleCount로 나눠서 1인당 금액을 계산 한다. 

 

그리고 이전에 return 0 였던것을 anountPerPerson으로 바꿔준다. 

 

 

이젠 이전에

Section {
    Text(checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
}

코드를 아래와 같이 바꿔주자. 

Section {
    Text(totalPerPerson, format: .currency(code: Locale.current.currencyCode ?? "USD"))
}

 

지금까지 한 부분을 한번 결과로 확인 해보자.

총 계산 금액을 40.00으로 계산해야 할 사람은 4명으로 팁은 0으로 설정 하여 아래쪽 섹션을 확인 해보면 정상적으로 10이라는 결과가 나온다.

 

---

 

이제 다왔다. 마지막으로 아까부터 계속 거슬리게 했던 키보드에 관한 것인데, 이전에는 안떠서 난리 쳤었는데 이번에는 한번 올라온 키보드는 다시 내려가지 않는것이 문제가 되었다. 이건 다른 페이지, 예를 들면 Picker페이지로 변경 되었다가 돌아와도 변함 없이 키보드는 사라지지않았다. 그래서 이번에는 이 문제를 해결해보자!

 

 

@FocusState private var amountIsFocused: Bool

해당 새 속성을 ContentView에 추가 한다. 그리고 텍스트 필드에 포커스가 맞춰져 있을때는 true, 아니면 false가 되도록 할 수있다. 그래서 아래 코드를 TextField에 추가 하면 SwiftUI는 텍스트 필드에 현재 포커스가 있어야 하는지에 대한 여부를 알아서 판단하고 결정 하게 된다. 이걸 SwiftUI가 알고 이후 사용자가 원할 때 포커스를 제거 하기 위해서 우리는 추가적으로 버튼을 추가 할것이다. 

 

그럼 바로 만들어 보자!

이전엔 WeSplit이라는 navigationTitle을 추가한적이 있다. 여기에

.toolbar {
    ToolbarItemGroup(placement: .keyboard) {           
        Button("Done") {
            amountIsFocused = false
        }
    }
}

 

다음 코드를 추가 할것인데, 각줄의 역할을 한번 천천히 살펴 보자

1. toolbar()를 사용하면 보기에 대한 도구 모음 항목을 지정 할 수있게 된다. 
2. ToolbarItemGroup은 특정 위치에 하나 이상의 버튼을 배치 할 수있다. 여기서 키보드에 대한 도구 모음으로 지정해야만 키보드에 붙어서 함께 나타났다가 없어졌다가 할 수있게 된다.
3. Done이라는 텍스트와 함께 버튼을 눌렀을때 amountIsFocused가 키보드가 닫히도록 false로 설정 된다. 그래야 포커스가 풀리기 때문이다. 

 

그리고 마지막으로  Spacer()를 ToolbarItemGroup와 버튼 사이에 두어서 이전 보다 유연한 공간을 제공 하여 도구 모음에서 버튼이 오른쪽으로 밀려나게 된다. 그렇게 해서 마지막 결과물을 확인 해보면???

 

저기 키보드에 붙어있는 Done버튼을 누르면 키보드가 잘내려가는것을 확인 할 수있으며, 다시 데이터를 입력하기 위해 TextField를 누르면 키보드가 올라오는것을 확인 할 수있을 것이다.

 

---

우리나라는 팁에 대한 문화가 많이 정착 되어 있지 않고 앱 내 통화 기준도 우리나라처럼 "원"이 아닌 "달러"로 표시 되어있지만, 이번 프로젝트를 통해서 간단한 기능이지만 생각 보다 얻은 정보들이 너무 많았던것 같다. 이 다음 시간에도 새로운 프로젝트를 시작하겠지만 한번 더 리뷰해보는 시간을 가져 보는것도 좋을것 같다. 이것으로 WeSplit프로젝트는 끝!

 

 

learning by repetition