🍱 SideDish (반찬 서비스)

코드스쿼드에서 제공해주는 API를 이용하여 반찬 서비스 앱 구현하기

주제	항목
▫️ 언어	Swift
▫️ 스킬	Delegate 패턴, Observer 패턴
▫️ 라이브러리	Toast
▫️ 디자인 패턴	MVVM

🪧 목차

• 🍱 SideDish (반찬 서비스)
  • 🪧 목차
  • 📱 실행 결과
  • ⒈ 기능
    • 🖥️ 홈 화면
    • 🖥️ 상세 화면
  • ⒉ 설계 및 구현
    • 2-1. 화면 설계 방법
    • 🖥️ 홈 화면
    • 🖥️ 상세 화면
    • 2-2. 레이어(Layer) 구현
  • ⒊ 트러블 슈팅
    • 🔴 3-1. UICollectionViewDataSource의 비동기 reload 에러 해결
    • 🟢 3-3. prepareForReuse를 사용한 셀 초기화 작업
    • 🟡 3-4. OAuth를 사용한 소셜 로그인 구현하기

---

📱 실행 결과

---

⒈ 기능

🖥️ 홈 화면

• 총 3가지 섹션을 사용하여 반찬 정보를 나타낸다.
  • 메인 반찬
  • 국물 요리
  • 밑반찬
• 원하는 섹션(헤드라인)을 터치하면 해당 섹션의 반찬 갯수를 잠깐 보여주었다가 사라진다.

🖥️ 상세 화면

• 원하는 반찬 셀을 선택하면 해당 반찬의 상세정보를 담고있는 상세 화면을 보여준다.
  • 홈 화면의 내용을 그대로 보여준다.
    • 화면을 스크롤하여 여러 장의 이미지를 확인할 수 있다.
  • 헤당 반찬을 주문하게 될 때의 배송 정보를 나타낸다.
  • 사용자가 원하는 만큼 수량을 선택하여 주문할 수 있다.
• 주문하기 버튼을 터치하면 메세지를 통해 주문 정보를 확인할 수 있다.

⒉ 설계 및 구현

2-1. 화면 설계 방법

🖥️ 홈 화면

🖥️ 상세 화면

2-2. 레이어(Layer) 구현

레이어	서브레이어	설명
Presentation	Controller	Home, Detail의 ViewController를 관리한다.
	CellLayout	홈 화면의 collectionView Cell 레이아웃으로 Compositional을 사용하여 관리한다.
	DataSource	홈 화면의 collectionView DataSource를 커스텀 타입으로 만들어 관리한다.
	Cells	CollectionView의 Cell을 구성하는 UI 요소들을 관리한다.
	ViewModel	API 데이터를 관리하며 UI에 바인딩하는 역할을 한다.
	View	Cell에 들어가는 UI 요소들을 관리한다.
Domain	Entity	홈 화면에 사용되는 api 데이터들을 Food 타입으로 관리한다. (DetailVC에서 사용되는 Entity는 불필요하다고 생각되어 구현하지 않음)
Data	Network (APIEndpoint)	API 요청 및 응답의 콘크리트 형태
Infrastructure	Network (Endpoint & Service)	Endpoint의 인터페이스 및 실제 서버로부터 응답받은 데이터를 가지고있다.

⒊ 트러블 슈팅

해결해나아가는 과정에 대한 난이도를 아래와 같이 표현합니다.

난이도	이모지
상	🔴
중	🟡
하	🟢

🔴 3-1. UICollectionViewDataSource의 비동기 reload 에러 해결

✏️ Velog - UICollectionViewDataSource의 비동기 reload 에러 해결에 대하여...

🟢 3-3. prepareForReuse를 사용한 셀 초기화 작업

✏️ Velog - Cell의 재사용성에 대해 (with prepareForReuse())

🟡 3-4. OAuth를 사용한 소셜 로그인 구현하기

✏️ Velog - iOS 앱에서 Github 소셜 로그인 구현 방법 (with OAuth 2.0)