주요 뷰 및 기능 소개

<aside> 🍎 [희슬]

1. 소셜 로그인 및 프로필 등록

• 로그인 유효성 검사

  뷰모델에서 로그인 유효성 검사를 처리했습니다. 사용자 입력을 실시간으로 검증하여 유효한 로그인 정보를 입력했는지 확인합니다.

• 카카오 로그인

  카카오 로그인은 앱 설치 여부에 따라 웹 또는 앱으로 이동하여 로그인을 처리합니다. 앱이 설치되어 있으면 카카오 앱을 통해, 설치되어 있지 않으면 웹뷰를 통해 로그인을 진행합니다.

• 프로필 등록

  사용자가 가입 후 프로필 등록까지 완료한 경우, 로그인 시 발급받은 토큰과 함께 프로필 정보를 서버로 전송합니다. 이를 통해 사용자 정보를 통합 관리할 수 있습니다.

2. 자동 로그인

• 자동 로그인 기능은 토큰의 존재 여부를 통해 구현되었습니다. 토큰이 존재하면 온보딩과 프로필 등록 과정을 생략하고 바로 메인 화면으로 이동합니다. 이를 통해 사용자는 로그인 과정을 반복할 필요 없이 앱에 빠르게 접근할 수 있습니다.

3. 배너 스와이프 기능

• 사용자가 스와이프를 통해 배너를 직접 전환할 수 있도록 구현했습니다.

4. 하나의 뷰에서 여러 개의 서버 통신

• 메인 뷰는 컴포지셔널 레이아웃을 사용한 컬렉션뷰로 구성되었으며, 5개의 서버 통신을 동시에 처리합니다.

5. DRButtonType 및 DRErrorType 프로토콜

• 중복 코드 감소

  비슷한 컴포넌트를 여러 곳에서 사용하고, 탭 여부나 유효성 검사 결과에 따라 버튼과 에러 메시지 라벨의 속성을 업데이트해야 하는 경우가 많아, DRButtonType 및 DRErrorType 프로토콜을 정의했습니다. 이를 통해 중복 코드를 줄이고, 일관된 속성 업데이트를 구현했습니다.

• 프로토콜 채택 및 확장

  각 프로토콜을 채택받아 필요한 속성값을 세팅하는 구조체를 구현하고, extension에서 타입을 파라미터로 받아 해당 타입에 맞는 속성값을 설정해주는 메소드를 작성했습니다.

  이 방식은 코드 중복을 줄이고 유지보수성을 높이는 좋은 접근 방식입니다. 또 다른 방법으로는 Swift의 제네릭과 프로토콜 조합을 사용하여 더욱 유연한 타입 관리를 할 수 있습니다.

6. MainSectionLayout 프로토콜

• 컴포지셔널 레이아웃 정의

  각 섹션의 레이아웃 속성을 정의하는 MainSectionLayout 프로토콜을 작성했습니다. 각 섹션의 레이아웃 속성을 제외한 나머지 코드는 모두 중복되므로, 프로토콜로 정의하여 중복 코드를 줄였습니다.

• 프로토콜 사용

  프로토콜을 사용하여 각 섹션의 레이아웃을 정의함으로써, 코드의 재사용성을 높이고 유지보수를 용이하게 했습니다.

  중복 코드를 줄이기 위한 또 다른 방법으로는, 상속을 활용하여 공통 기능을 상위 클래스에 구현하고, 각 섹션별로 상속받아 사용하는 방법이 있습니다. 또는, 함수형 프로그래밍 기법을 활용하여 공통 레이아웃 설정을 클로저로 전달하는 방식도 고려할 수 있습니다.

</aside>

<aside> 🍎 [신영]

1. 옵저버블 패턴을 활용한 '다음' 버튼 활성화

• '코스 등록하기 1' 기능에서는 사용자로부터 입력받는 6가지 필드를 관리하기 위해 옵저버블 패턴을 사용했습니다. 이를 통해 모든 입력 필드가 유효할 때만 '다음' 버튼이 활성화되도록 했습니다. 구현 과정은 다음과 같습니다:
  1. 옵저버블 패턴: 각 입력 필드에 대해 옵저버블을 생성했습니다. 이 옵저버블은 값이 변경될 때마다 뷰 컨트롤러에 알림을 보냅니다.
  2. 검증 로직: 각 옵저버블에 유효성 검증 로직을 연결하여 입력이 특정 조건(예: 비어 있지 않음, 특정 범위 내 등)을 충족하는지 확인했습니다.
  3. 옵저버블 바인딩: 이러한 옵저버블을 '다음' 버튼의 활성화 상태와 바인딩했습니다. 모든 옵저버블이 유효한 입력을 보고할 때만 버튼이 활성화됩니다.
  4. 변경 사항 반응: 뷰 컨트롤러는 이러한 옵저버블의 변화를 관찰합니다. 모든 옵저버블이 유효한 입력을 보고할 때 '다음' 버튼이 활성화됩니다.
• 이 접근 방식은 실시간 유효성 검사를 제공하여 사용자 경험을 향상시키고 모든 필드가 올바르게 입력될 때까지 네비게이션을 방지합니다.

2. CollectionView 셀 드래그 앤 드롭

• 처음에는 UITableView를 사용하여 항목 재정렬을 위한 드래그 앤 드롭 기능을 구현했습니다. 하지만 셀 사이의 간격을 설정할 수 없는 한계에 직면했습니다. 이 문제를 해결한 방법은 다음과 같습니다:
  1. TableView 한계: 셀 사이의 간격을 도입하기 위한 다양한 방법을 탐색했지만, UITableView는 셀 간 간격을 기본적으로 지원하지 않는다는 것을 확인했습니다.
  2. Section 분할 및 Footer 사용: 각 섹션을 나누고 각 섹션의 푸터를 적용하여 간격 문제를 해결하려 했습니다. 그러나 섹션을 잡았을 때 푸터도 함께 드래그되는 문제가 발생했습니다.
  3. CollectionView 전환: 위 문제를 해결하기 위해 CollectionView로 전환했습니다. CollectionView는 셀 간 간격을 쉽게 설정할 수 있고, 드래그 앤 드롭 기능을 효과적으로 지원합니다.

3. CustomImagePicker

• PHPickerView를 활용하여 프로필 이미지 설정과 코스 등록하기 이미지를 다루었습니다. PHPickerView는 사용자의 사진 접근 권한을 간소화하고, 다양한 이미지를 선택할 수 있는 기능을 제공합니다.
  1. PHPickerView 사용: PHPickerView를 사용하여 사용자에게 이미지 선택 인터페이스를 제공했습니다.
  2. 프로필 및 코스 이미지 처리: 선택된 이미지를 프로필 이미지나 코스 이미지로 설정할 수 있도록 했습니다.

4. DatePicker(.date, .time, .customPicker)

• 두 가지 DatePicker 모드(.date와 .time)를 사용했으며, 커스텀 PickerView도 구현하여 0.5 단위로 증가하는 숫자를 선택할 수 있도록 했습니다.

  1. DatePicker 모드: 기본 DatePicker 모드를 사용하여 날짜와 시간을 선택할 수 있게 했습니다.
  2. 커스텀 PickerView: 커스텀 PickerView를 구현하여 사용자가 0.5 단위로 값을 선택할 수 있도록 했습니다.

  이와 같은 기술적 구현을 통해 사용자의 다양한 요구 사항을 충족시키고, 사용자 경험을 향상시켰습니다.

</aside>

<aside> 🍎 [민서]

• 코스 둘러보기 & 지역 필터링 바텀 시트

  • 지역 필터링을 위한 컬렉션 뷰 하나와 하위 지역을 선택할 수 있는 컬렉션 뷰 두개가 있는데, 상위 지역 컬렉션 뷰의 상태에 따라 하위 지역 컬렉션 뷰의 데이터도 달라져야하는 상황
  • 두개의 ViewController간에 데이터를 바인딩 해줘야 하고 사용자의 클릭에 따라 계속해서 유효성 검사를 해주어야 해서 ViewModel에서 유효성 검사를 해주도록 설계했습니다.

• 코스 상세보기

  • 여러개의 collectionView를 사용해야하는 뷰에서 compositional Layout을 이용해 더 가독성있고 체계적으로 뷰를 설계해주었습니다
  • 뷰 특성상 텍스트의 길이를 알 수 없는 상황에서 동적 레이아웃을 적용 시켜주었습니다
  • 복잡한 분기처리가 포함된 뷰라 처음에는 ViewController로 분리해서 구현하려고 했지만 서버 통신을 해오는 과정에서 두 ViewController를 분기 처리할 때의 서버통신을 어떤ViewController에서 해야지에 대한 문제가 생겼습니다.
  • 시행착오를 통해 하나의 ViewController에서만 분기처리를 하도록 하는 방식으로 바꾸게 되었습니다 </aside>

<aside> 🍎 [수민]

• CustomAlert
  • 애플에서 제공하는 UIAlertVC 커스텀이 아닌, 직접 alert 뷰컨을 구현하였습니다.
  • UI 커스텀을 위해 버튼 타입을 enum으로 정의하였고, 버튼 액션을 각 뷰컨에서 커스텀할 수 있게 protocol을 정의했습니다.
• 내가 열람한 코스 (네비바) / 내가 등록한 코스
  • UI와 로직이 아예 동일한 뷰 → 뷰와 뷰모델을 같이 사용하였습니다.
  • 코스 둘러보기/상세 등 다른 뷰에서 해당 뷰 데이터를 업데이트하고 돌아왔을 때 적용이 안 되는 문제를 viewDidAppear() 함수를 통해 해결했습니다.
• 데이트일정
  • 디자인을 만족시키기 위해 UICollectionView와 pageControl를 따로 구현하고, 스크롤 정도에 따라 페이징을 구현했습니다.
  • 카카오톡 공유하기 기능: 카카오 디벨로퍼 사이트에서 템플릿을 지정하여 사용하였고, 카카오 앱 설치 여부 / 로그인 여부에 따라 분기처리했습니다.
• 포인트내역
  • segmentControl 을 터치한 액션을 observablePattern로 관찰하고, 이를 통해 collectionView를 업데이트하였습니다. </aside>

트러블슈팅

Trouble Shooting