shippingpark / Cookies-DevLab

PR로 주고받는 UIKit, SwiftUI, UnitTest 학습
1 stars 0 forks source link

[Mission/#2-Rochelle] 1일차 미션 #9

Closed Rochelle0922 closed 1 day ago

Rochelle0922 commented 2 days ago

안녕하세요 몽쉘입니다. 1일차 미션을 보고 생각한 흐름들을 적어보겠습니다.

🔸디자인 저희의 뷰에서 필요한 요소가 무엇인지 확인했습니다. 제 눈에는 텍스트 필드, 지출 버튼, 그 밑의 알약같은 네모와 레이블 정도가 보였어요. 그래서 사용한 라이브러리 - UI View, Button, TextField, Label

저는 저 알약 모양이 너무 하고 싶은데,,,, 검색을 해보니 코드로 구현할 수 있더라구요? 근데 스토리보드에서 다 그리고 싶어서 User Defined Runtime Attributes에서 R값을 주었습니다.(맞는지는 모르겠어요)

스크린샷 2024-10-31 오전 4 09 21

🔸해당 화면 구성 시 고민한 것 및 실제 구현한 방법 1. 텍스트 필드에 숫자만 기입 가능 -> NumberPad 설정 저희는 지출 금액을 입력해야 하기 때문에 아예 숫자 키패드를 올려두어 숫자만 적을 수 있게 했습니다.

2. 지출 버튼을 눌렀을 때 밑에 알약 모양과 함께 텍스트 필드에서 적은 text가 나와야 함 -> is Hidden 처리 버튼을 누르기 전에는 밑에 알약과 텍스트 필드에 적은 숫자가 나오지 않아야 하기 때문에 처리했습니다.

3. 자릿수 마다 , 기입 -> NumberFormatter 인스턴스 생성

.none: 기본 숫자 스타일 (형식화하지 않음) .decimal: 소수점 및 천 단위 구분 쉼표가 추가된 숫자 (예: 1,000.00) .currency: 현재 지역의 통화로 표시 (예: $1,000.00) .percent: 퍼센트 형식 (예: 10%) .scientific: 과학적 표기법 (예: 1.23e+5) .ordinal: 서수로 표시 (예: 1st, 2nd) 숫자를 통화, 퍼센트, 소수점, 천 단위 구분 등 다양한 형식으로 포맷할 때 NumberFormatter를 사용한다고 검색을 통해 알았습니다. 그래서 텍스트 필드의 문자열을 숫자로 변경해서 NumberFormatter.dercimal로 천 단위 구분 쉼표가 추가될 수 있도록 변경하고 제가 레이블로 적어놨기 때문에 다시 숫자에서 문자열로 변경하였습니다. _4. 아무것도 기입하지 않고 지출 버튼을 누른 경우 -> 비었을 때는 “숫자를 입력하세요” 나올 수 있게 처리_ 저는 숫자 키패드로 박아놨기 때문에 다른 문자가 적힐 일이 없다고 생각하고 빈 배열일 때만 예외 처리 생각을 했습니다. 그래서 빈 배열일 때는 숫자를 입력하세요 라는 워딩이 나올 수 있도록 처리 해두었습니다. 🔸 **구현한 화면** ![ScreenRecording_10-31-2024 04-22-41_1](https://github.com/user-attachments/assets/1aa92b66-9cbd-4e09-8107-c00a129d18d2) PR 어떻게 쓰는지 모르겠지만 일단 구구절절 남겨봅니다…🔥😭
Rochelle0922 commented 2 days ago

2024년 10월 31일 AM 04:00 화면 디자인 및 기능 구현 완료

anjiniii commented 2 days ago

스토리보드에서 다 그리고 싶어서 User Defined Runtime Attributes에서 R값을 주었습니다.(맞는지는 모르겠어요)

오! 저는 이렇게 가능한지 몰랐어요! 스토리보드에서 직접 요소의 속성을 정하는 방법이군용 User Defined Runtime Attributes 를 찾아봐야게씀당

저는 각 요소를 ViewController에 IBOutlet으로 끌고 와서, 직접 layer.cornerRadius를 변경해주었습니다!

@IBOutlet weak var spendInputView: UIView! // 지출 TextField + 지출 버튼
@IBOutlet weak var spendLabelView: UIView! // 지출한 값 + "원"

override func viewDidLoad() {
    super.viewDidLoad()

    // 지출 텍스트필드와 값 View radius 지정
    spendInputView.layer.cornerRadius = 20 // -> 대충 이렇게!
    spendLabelView.layer.cornerRadius = 20

    ...
}
Rochelle0922 commented 1 day ago

고민사항 투척합니다. 저는 숫자에 최대를 걸어두지 않았는데 어느 순간 숫자가 많아지면 값이 안나옵니다....

스크린샷 2024-10-31 오후 1 41 29 스크린샷 2024-10-31 오후 1 47 23

왜인지 찾아보겠습니다만 아시는 분이 계시다면 알려주세용~

Rochelle0922 commented 1 day ago

2024년 10월 31일 PM 02:00 원 단위 추가 완료