rookie0031 / uikittest Goto Github PK

관련 이슈

• closed #40

배경

텍스트 필드의 중복 확인 버튼을 누르면 주어진 텍스트를 쿼리 파라미터로 담아서 서버로부터 중복 확인을 요청합니다. 그리고 그 요청을 바탕으로 텍스트 필드 하단에 허용 가능한 텍스트인지 아닌지, 여부를 나타내는 라벨이 표기되어야합니다. 이와 관련된 로직과 UI를 구현했습니다.

작업 내용

결과물 스크린샷

1️⃣ 중복 체크 결과 텍스트 표기하는 순서

1. 기본적으로 하단에 라벨이 존재하지만 init되는 순간 isHidden = true 로 숨김처리 됩니다.

2. 중복 확인 버튼을 누르면 didTapCheckButton 함수가 수행되고 그 안에서 checkDuplication 함수를 수행합니다. 그 결과로 true, false를 받아 isChecked 변수에 저장합니다.
   https://github.com/extreme-rock/GetARock-iOS/blob/a80e85aa2d5c3bb8cd1788c55577b88040fc6656/GetARock/GetARock/Global/UIComponent/TextLimitTextField.swift#L120-L135

3. isChecked의 값을 파라미터로 받는 showDuplicationCheckLabel 함수를 수행하고 결과에 맞는 라벨로 변경 후 isHidden = false 처리합니다.
   https://github.com/extreme-rock/GetARock-iOS/blob/a80e85aa2d5c3bb8cd1788c55577b88040fc6656/GetARock/GetARock/Global/UIComponent/TextLimitTextField.swift#L137-L152

2️⃣ checkDuplication (static func)

https://github.com/extreme-rock/GetARock-iOS/blob/a80e85aa2d5c3bb8cd1788c55577b88040fc6656/GetARock/GetARock/Network/DuplicationCheckRequest.swift#L12-L28

• URLSession이 내부에 사용되고, 내부 로직에서 에러를 처리해야하는 구간이 있어 async throws로 선언됩니다.
• 쿼리파라미터를 넣기 위해 URLComponent라는 구조체를 사용합니다
• TextField 파라미터로 넣은 중복체크 타입에 따라 다른 baseURL이 통신에 사용됩니다.
• baseURL이 문자 그대로 사용되는데, 이런 API URL들을 어떻게 관리할지에 대한 합의가 없어서 일단은 그대로 써놓았습니다. 제 생각엔 1차 스프린트에서는 2차 스프린트까지 각자가 네트워크 작업을 알아서 하고 그 후에 통일하는게 어떨까하네요?

3️⃣ DuplicationCheckRequest (class)

• checkDuplication 함수는 따로 관리합니다. 원래는 NetworkManager를 만들어서 싱글톤패턴으로 만들려고했으나 다른 통신 코드도 훨씬 많아질 거 같아서 최대한 나누는게 편하다고 생각했습니다. 굳이 인스턴스를 만들 필요가 없어서 static func 으로 만들었습니다.

4️⃣ NetworkError (enum)

• LocalizedError 프로토콜을 채택합니다. 이 프로토콜은 errorDescription이 프로포콜의 변수로 선언되어서 에러의 종류에 따라 에러 메시지를 넣기 쉽게 되어있습니다
• 현재는 badURL과 failedRequest만 사용하나 추후에 사용될 것들을 미리추가해넣었습니다.

리뷰 노트

• DuplicationCheckRequest가 굳이 클래스여야하나?라는 생각이드네요 enum 도 되고 struct도 가능해서... 보통 클래스로 만드는 거 같아서 했지만 애플에서는 기본적으로 뭘 만들때는 기본 타입은 구조체를 사용하라고 권장은 하고 있거든요?? 어떤 차이가 있을지 여러분들의 생각이 궁금합니다.

• 추가된 내용은 작지만 왠지 모르게 코드가 긴거같네요 불필요한 코드나 이상한 네이밍이 없을지??

• 저의 PR자체에 대해서도 리뷰를 받고 싶네요. 불필요한 내용이나 설명이 부족한 부분은 없는지?? 그리고 제가 생각할 때는 가독성이 좀 떨어진다는 느낌을 항상 받는데 어떻게 하면 개선할 수 있을지??

테스트 코드 및 관련 설명

• 현재는 테스트 API에서 어떤 텍스트로 쿼리를 날리던간 같은 응답을 받기 때문에 중복 확인 버튼을 눌러서 통신에 성공하면, 사용불가능하다는 라벨이 뜹니다.

• 단, 모여락을 입력해서 중복 확인을 하는 경우에는 사용 가능하다는 라벨이 뜨도록 임시로 설정해놓았습니다.

• 서버 통신을 확인하기 위해 response 값을 프린트 문으로 찍어놓았습니다. 테스트시 확인해보세요.

  class LandingViewController: BaseViewController {
  
    let testTextField = TextLimitTextField(placeholer: "테스트용입니다", maxCount: 10, duplicationCheckType: .userName, textExpressionCheck: true)
  
    let textTextFieldSecond = TextLimitTextField(placeholer: "모여락 화이팅", maxCount: 15, duplicationCheckType: .bandName, textExpressionCheck: false)
  
    lazy var stackView: UIStackView = {
        $0.axis = .vertical
        $0.spacing = 30
        return $0
    }(UIStackView(arrangedSubviews: [testTextField, textTextFieldSecond]))
  
     override func viewDidLoad() {
         super.viewDidLoad()
  
         view.addSubview(stackView)
         stackView.constraint(centerX: view.centerXAnchor, centerY: view.centerYAnchor)
      }
  }
  

기타사항

추후에 API가 업데이트 되는것에 맞춰서 중복 확인 로직도 일부 수정될 예정입니다!

관련 이슈

• closed #94

배경

밴드 정보 입력 기본 UI를 구현했습니다 (합주곡 추가 및 합주실 위치 추가 기능 제외)

UI 관련한 컴포넌트가 많아서 코드량이 다소 많지만 반복되는 것이 많습니다!

테스트 영상

테스트 방법

SceneDelegate에서 시작점을 BandInformationSetViewController( ) 로 지정해주세요!

❗️정보를 입력하는 컴포넌트가 많아서 꼭 실기기로 입력해보면서 테스트 해주세요!

작업 내용

📄 BandInformationSetViewController (class)

1️⃣ 전체 ScrollView 레이아웃

밴드 정보를 입력하는 뷰는 아래와 같이 하나의 mainScrollView와 컨텐츠를 담는 contentView 그리고 여러 기본 컴포넌트들이 묶여있는 스택뷰들로 구성됩니다.

이 View는 컨텐츠가 많기 때문에 스크롤이 필요했고 스크롤이 가능한 클래스들은 UICollectionView, UITableView, UIScrollView가 있습니다. 하지만 내부 컨텐츠들이 다양한 컴포넌트를 포함하기 때문에 그냥 UIScrollView를 사용했습니다.

UIScrollView안의 ContentView

스크롤뷰를 선언하려면 두 가지가 필요한데요.

첫번째는 스크롤뷰 자체의 프레임 크기입니다.

이거로 스크롤할 때 얼만큼 영역이 보이는지 설정할 수 있어요. BaseViewController의 view와 같게 설정했습니다.

두번째로 컨텐츠의 크기입니다. 스크롤이 어디까지 되는지 UIScrollView에게 정해줘야하기 때문입니다.

그래서 일반적으로 ContentView를 만들어주고 크기를 지정해줍니다.

그런데 stackView는 자동으로 arrangedSubView들을 감싸도록 frame이 확장되는 편리한 특징이 있습니다. 그래서 stackView를 스크롤뷰의 컨텐츠 사이즈에 맞추게 되면 그 안에 하위뷰들이 추가되면서 컨텐츠 높이가 늘어나고, 그 크기를 스크롤뷰가 인식하기 때문에 쉽게 스크롤을 만들 수 있습니다.

2️⃣ 밴드 합주곡 추가 StackView

밴드 합주곡 추가가 StackView인 이유

여기를 TableView로 만들수도있지만 테이블뷰는 셀이 삽입될때마다 자동으로 크기가 업데이트 되지않습니다. 왜냐면 크기를 벗어나면 그냥 스크롤이 되도록 설계되었기때문이죠... 그래서 자동으로 크기가 업데이트되는 StackView로 만들었습니다. 셀 삭제시 DiffableDatasource와 동일한 효과를 낼 수 없지만 어느정도의 Fade out 애니메이션은 추가가 가능합니다.

3️⃣ InformationGuideLabel (class)

밴드 정보를 입력시 정보 입력에 대한 가이드 라벨이 있습니다. 이런 라벨들은 반복되기 때문에 따로 만들어서 관리하였습니다.

init 할 때 text와 type을 받습니다. type은 필수 입력 정보인지 선택 입력 정보인지를 나타내는 열거형입니다.
https://github.com/extreme-rock/GetARock-iOS/blob/76803b9390682faec7237632cae83e9f9ad6cb99/GetARock/GetARock/Global/Utils/InformationGuideLabel.swift#L10-L19

4️⃣ BasicBoxView (class)

합주실 위치를 검색할 수 있는 VC로 넘어갈 수 있게 따로 구현이 필요했습니다.

5️⃣ SNSBoxView (class)

SNS 정보를 입력하는 View도 따로 만들어주었습니다.

6️⃣ 키보드가 올라옴에 따른 View frame 업데이트 (method)

위와 같은 SNSBoxView는 스크롤뷰의 하단에 위치하기 때문에 키보드가 올라와서 UI를 가려버리는 문제가 있었습니다.
이에 키보드 사이즈를 받아와서 View의 frame을 올려버리는 코드를 추가했습니다.

https://github.com/extreme-rock/GetARock-iOS/blob/76803b9390682faec7237632cae83e9f9ad6cb99/GetARock/GetARock/Global/Utils/BandInformationSetViewController.swift#L277-L285

리뷰 노트

• 불필요한 코드 여부 및 변수 네이밍
• 개선 가능한 로직
• 세부 디자인 색상 및 패딩

추가로 커밋에 이슈넘버가 누락된게 절반정도되네요 의식하고 적응하려는데 잘 안되는데 다음에 100%로 해보도록 하겠습니다 ㅎㅎ

📄 해당 PR 리뷰 과정에서 논의된 확정 사항

화면 드래그시 키보드 숨김 처리

• 화면을 탭할 시에만 키보드가 숨김처리되는 것으로 땅땅 되었습니다
  : 스크롤뷰 하단에 sns 정보 입력 텍스트 필드가 붙어있는데, 그때 스크롤 할 때 마다 키보드가 내려가는게 불편할 거 같다는 의견이 있었기 때문

관련 이슈

• closed #95

❗️브랜치 혼동 주의

현재 95번 브랜치가 여러개 있는데,이 PR의 브랜치는 feature/95-add-practice-place(re) 입니다.
145번 PR에서 conflict 해결 과정에서 에러가 발생 (PR#145)해서 변경내용만 따로 떼어내서 PR을 다시 올리게 되었습니다..ㅎ

배경

밴드를 생성하는 단계에서 합주실의 위치를 입력하는 기능이 필요했고 디자인은 아래와 같습니다. 이와 연관된 view와 기능을 추가합니다.

스크린샷

테스트 방법

진입점을 아래와 같이 하고, 합주실 위치를 입력하는 부분에서 주소 검색 박스를 터치해주세요

window.rootViewController = UINavigationController(rootViewController: BandInformationSetViewController())

📝 작업 내용

1️⃣ PracticePlaceSearchViewController

입력 글자에 따라 위치 정보를 조회하는 과정은 위치 정보를 가진 서버에 쿼리를 날리는 과정이 필요합니다.
애플에서는 MapKit 프레임워크의 MKLocalSearchCompleter 클래스를 통해 이 쿼리 과정을 편리하게 지원합니다.

MKLocalSearchCompleter는 다른 애플의 API와 같이 델리게이트 패턴을 준수합니다. 원하는 VC에 델리게이트를 설정해주고, MKLocalSearchCompleterDelegate 프로토콜을 준수하면 completerDidUpdateResults라는 함수를 쓸 수 있습니다.

completerDidUpdateResults함수는 쿼리를 날리고 결과를 받아오면서 실행되는 함수입니다.
파라미터로 받은 검색 결과값을 주는데, 이를 통해 테이블뷰 정보를 업데이트 할 수 있습니다.
https://github.com/extreme-rock/GetARock-iOS/blob/b2f1067d322b4dd294e79bf8290befe6dbe9fc58/GetARock/GetARock/Screens/BandCreation/BandInformationSetFlow/PracticePlaceSearchViewController.swift#L164-L173

2️⃣ 위치 정보 전달 과정

업데이트된 테이블셀을 선택하면 completion이라는 클로저를 통해 데이터가 전달됩니다. 데이터가 전달되면서 위치를 찾는 VC는 사라지고, 밴드 정보를 입력하는 VC는 전달받은 데이터로 위치 라벨을 업데이트합니다.

https://github.com/extreme-rock/GetARock-iOS/blob/b2f1067d322b4dd294e79bf8290befe6dbe9fc58/GetARock/GetARock/Screens/BandCreation/BandInformationSetFlow/PracticePlaceSearchViewController.swift#L198-L206

https://github.com/extreme-rock/GetARock-iOS/blob/b2f1067d322b4dd294e79bf8290befe6dbe9fc58/GetARock/GetARock/Screens/BandCreation/BandInformationSetFlow/BandInformationSetViewController.swift#L264-L271

클로저를 통한 데이터 전달은 합주곡을 추가하는 PR에도 똑같이 적용되었습니다.

3️⃣ 현재 위치 조회

CLLocationManager는 현재 위치를 조회해서 위도 경도 좌표를 얻을 수 있는 기능을 제공합니다.
하지만 현재위치를 누르는 순간, 그 위치에 해당하는 주소가 검색창에 자동완성되어야했기 때문에 좌표를 통해 주소값을 얻는 과정이 필요합니다. 그래서 GLGeocoder를 이용해서 이 좌표값을 주소이름으로 변환시키고 검색창 텍스트를 업데이트한 뒤, 그 텍스트에 해당하는 문자로 다시 쿼리를 날립니다.

https://github.com/extreme-rock/GetARock-iOS/blob/b2f1067d322b4dd294e79bf8290befe6dbe9fc58/GetARock/GetARock/Screens/BandCreation/BandInformationSetFlow/PracticePlaceSearchViewController.swift#L134-L161

아래 링크를 참고했습니다.
좌표로 지역명 가져오기

🤔 고민 사항

1️⃣
검색해서 나온 위치의 상세 주소값이 길어질 경우, 텍스트를 감싸는 Cell의 크기를 넘어간다는 문제가 있습니다.
위치정보를 어디까지 잘라서 보여줄지에 대한 논의가 필요해보입니다. 그런데 사실 우리가 필요한건 지도에 표기할 좌표 정보라서 이 상세주소가 크게 중요하지 않다는 생각도 드네요??

2️⃣
또한 현재위치 버튼을 클릭해서 주소가 자동완성된 경우, 그 주소를 그대로 전달할 수 있도록하는 버튼이 필요할 거 같아요. 아니면 현재위치를 누르는 순간 그 위치 정보가 전달된다던지 하는 처리가 필요합니다. 이와 관계된 디자인이 추가되어야할 거 같네요??

2023.03.2 스크럼 이후 확정사항

• 1번 사항은 텍스트가 길어질 경우 줄바꿈 처리하기로 했습니다!
• 2번 사항은 기존의 테이블 Cell처럼 만들기로 했습니다!

아래와 같이 수정되었습니다.

리뷰 노트

• 불필요한 코드 유무
• 개선 가능한 로직
• 놓친 디자인 사항들
• 부적절한 API 사용이 있는지
• 보충해야될 설명이 있는지
• PR의 가독성

2023.03.08 PR 리뷰로 확정된 사항

유저가 검색한 위치로 쿼리하였을 때 검색 결과를 받지 못할 경우가 있습니다. 이 경우, 그냥 입력한 주소값을 쓰면 좌표값을 받지 못하기 때문에 주소에 합주실을 표시할 수 없다는 문제가 있습니다.

하지만 이 문제는 좀 더 자세하게 생각해봐야하고 남은 태스크가 있기 때문에 일단은 제외하고 진행하기로 했습니다.