---
# System prepended metadata

title: "☕️ swift-p4-startbuckst \U0001F379"

---

# ☕️ swift-p4-startbuckst 🍹
### iOS 프로젝트#4 - 스타벅스

## 개발자
|Name|Camper Number|
|:-:|:-:|
|👨🏻‍💻 김태훈|S014|
|👩🏻‍💻 이나정|S036|

<br>

## 개발일정
<details>
<summary> 1️⃣ 2021.10.11</summary>
      
- 초기 이벤트 화면
    - ```UI``` : 기본 이미지, label, button 추가
    - ```Model + ViewModel``` : 초기 이벤트 화면 데이터 불러오기
    - ```네트워크``` <span style="color:orange">[👩🏻‍💻Pair Programming🧑🏻‍💻]</span>
        - 공통 네트워크 클래스 작성
        - 이미지 다운로드 (캐시 처리)
    - ```기타``` <span style="color:orange">[👩🏻‍💻🧑🏻‍💻]</span> : 다시보지 않기(Date 사용), 닫기 버튼 기능 구현
- 홈 화면
    - ```UI``` : Tabbar, Collection view(기본적인 틀 구성)
    - ```View(custom cell)``` <span style="color:orange">[👩🏻‍💻🧑🏻‍💻]</span> : 추천/인기 메뉴 Cell(RoundImageCell), 메인 이벤트 Cell(MainEventImageCell), 이벤트 Cell(EventImageCell)

</details>

<details>
<summary> 2️⃣ 2021.10.12</summary>

- 홈화면 
    - ```UI``` : Collection View(4 section 구현)
    - ```View Model+Model```
        - Home 과 관련된 네트워킹 로직
        - Home 데이터 Decode 하는 Model 생성
    - ```View```
        - Delegate, DataSource 처리
        - Compositional layout 반응형 (메인 이벤트)
    - ```기타``` : ~~Storyboard reference 사용~~ <span style="color:orange">[👩🏻‍💻🧑🏻‍💻]</span>


</details>

<details>
<summary> 3️⃣ 2021.10.13</summary>

- What's new 화면
    - ```View Model+Model``` : What's new 화면에 필요한 model, 비즈니스 로직 구현 <span style="color:orange">[👩🏻‍💻🧑🏻‍💻]</span>
    - ```View``` : Collcetion View, DataSource, Dalegate 처리
    
- Order 화면
    - ```View``` : 
        - Collection View (상단 Header 고정)
    - ```View Model+Model``` : Order 화면에 필요한 model, 비즈니스 로직 구현
    - View 와 모델, 로직 합치기 <span style="color:orange">[👩🏻‍💻🧑🏻‍💻]</span>
    

</details>

<details>
<summary> 4️⃣ 2021.10.14</summary>
      
- 제품상세화면
    - ```View```
        - 화면 구성 + Scroll View로 기본적인 UI 완성
        - Scroll View에 들어가는 view 구성요소들을 custom view로 만들기
        - navigation bar 효과 & 이미지 반응형
    - ```ViewModel+Model``` : 관련된 model 처리 및 비즈니스 로직 처리하는 view model 생성
    - Code refactoring
    - View Model unitTest 만들기

</details>

<details>
<summary> 5️⃣ 2021.10.18</summary>
  
 - Code Data
     - 영구 저장소 관리 객체
         - Core Data Table 생성
         - CURD 작업을 수행하는 method 구현
         - repository layer를 통해 영구 저장소 관리를 따로 처리함
     - 제품 상세화면
         - 하트 버튼에 대한 영구저장소 객체 연동, 삭제 구현
     - 나만의 메뉴 
         - Collection View Cell(FavorCell)
         - View Model + Use Case + Model
             - 관련된 비즈니스 로직 구현
             - 영구 저장소 구현
             
 - 구조적인 개선
     - View - View Model - Use case - Layer(Network or persistent)의 순서에 준하는 과정으로 클린 아키텍처를 도입

</details>

<details>
<summary> 6️⃣ 2021.10.19</summary>
  
 - Code Data
     - 영구 저장소 관리 객체
         - 기존의 관리 객체에서 entity의 모든 저장된 값들을 삭제하는 `deleteAll` 매서드 추가
 - View
     - Pay 화면 구현 및 Layout 구성
     - Timer 사용 및 바코드 화면에 보여주는 것 구현
 - view model + usecase
     - pay 화면에 필요한 view model 구현 
     - 영구저장소에 접근하여 데이터를 가져올 usecase 구현
 - Create ML
     - 각 권 지폐(1000, 5000, 10000, 50000)에 대해 간단한 이미지 분류가 잘 되는지 실험
         - 5000과 50000간 구별이 잘 되지 않음 data set이 적어서 그런 것이라고 추측

</details>

<details>
<summary> 7️⃣ 2021.10.20</summary>
  
  - Pay 화면
      - 금액 적립시, 별 쌓이는 애니메이션 추가
      - AVFoundation을 활용한 image classification을 적용
      - 지폐 종류에 따라 core data에 저장
  - 코드 리팩토링
      - View Model unitTest
      - 강제 언래핑 수정
      - collection view data source 부분 수정
      - view 부분 수정
      - navigation bar 부분 수정
      - 에러 나는 부분 수정(Order 화면)
      
</details>

<details>
<summary> 8️⃣ 2021.10.21</summary>

  - 충돌 난 부분을 재수정

</details>

<br>

## 완성 결과
|런치 스크린|초기이벤트 화면 UI|다시보지 않기 기능|
|:-:|:-:|:-:|
|<img src="https://i.imgur.com/WQOV6t8.png" width=200>|<img src="https://i.imgur.com/5ULOaiE.png" width=200>|<img src="https://i.imgur.com/u8TxJUT.gif" width=200>|
|Tab bar|홈 화면 UI|What's New|
|<img src="https://i.imgur.com/DBtelD9.gif" width=200>|<img src="https://i.imgur.com/ZGKd2kk.gif" width=200>|<img src="https://i.imgur.com/ke7rdHH.gif" width=200>|
|Order화면|제품상세화면|주문하기 기능|
|<img src="https://i.imgur.com/EyVkNSq.gif" width=200>|<img src="https://i.imgur.com/5PxRsBa.gif" width=200>|<img src="https://i.imgur.com/D5zqEvT.gif" width=200>|
|나만의 메뉴 등록|나만의 메뉴 하트/주문 기능|Pay화면(10,000원)|
|<img src="https://i.imgur.com/NVlgpME.gif" width=200>|<img src="https://i.imgur.com/2vRXnfj.gif" width=200>|<img src="https://i.imgur.com/yVy4viB.gif" width=200>|

## PR 메세지
|Day|Link|
|-|-|
|1주차 화요일|[초기 이벤트 화면 & 홈 화면](https://github.com/boostcampwm-2021/swift-p4-starbuckst/pull/55)|
|1주차 목요일|[What's new, Order, 제품 상세 화면 ](https://github.com/boostcampwm-2021/swift-p4-starbuckst/pull/94)|
|2주차 화요일|[코드 리펙토링 + Core Data + 나만의 메뉴 + 상세 주문 화면 + Create ML](https://github.com/boostcampwm-2021/swift-p4-starbuckst/pull/153)|
|2주차 목요일|[Pay 화면 + 애니메이션 효과 + 코드 리팩토링](https://github.com/boostcampwm-2021/swift-p4-starbuckst/pull/169)|

<br>

## 짝 프로그래밍
### 👉 사용할 라이브러리
- Alamofire : 네크워크 통신을 간단히 할 수 있는 장점
- SnapKit : Constraint 를 쉽게 적용할 수 있는 장점
- (KingFisher : 이미지 캐시처리)

<br>

### 👉 코드 컨벤션
1. Model은 최대한 작게 나누는게 기준이다.
2. UI에 공통으로 여러곳에 들어가는 로직 부분은 따로 extension으로 관리해서 한 곳에 집중시킨다.
3.  네트워크 부분은 하나의 layer로 분리해서 나눈다(네트워크 통신 - 데이터 decode - model)(외부 라이브러리를 활용해도 무방함)
4. 매서드는 하나의 기능만을 담당하는 것으로 한다(ex: 하나의 UILabel에 text를 서로다르게 속성을 정의할 경우 text를 만드는 매서드 따로 넣는 매서드 따로해서 조합하는 형식으로 구성한다.)
5. struct, classs 중 고민이 될경우 우선 struct로 시도하는 것을 원칙으로 한다.
6. protocol을 적극적으로 활용해서 객체간 서로 강하게 연결고리가 유지 되지 않도록 한다(단, presenter를 활용할 경우는 객체를 소유해도 무방하다)
7. extension은 하나의 protocol 기준, 또는 supperclass 기준으로 나눈다.
8. view는 최대한 custom View로 나누어서 storyboard에서 다 작업하지 않는 것으로 한다.
9. test code는 model에 대한 정의가 내려지면 바로바로 정의한다.
10. compositional layout 을 통해 UI 를 구성한다.
11. 네트워크는 하나의 framework로 공통적으로 관리한다.
12. usecase(view model), presenster 사용하는 것을 원칙으로 한다.

<br>

### 👉 참고한 링크
- [Kingfisher Cheat Sheet](https://github.com/onevcat/Kingfisher/wiki/Cheat-Sheet#cache)
- [Swift5의 Result Type 사용하기](https://eunjin3786.tistory.com/47)
- [깃모지를 커멘드라인에서 바로 적용하여 사용해보자🎉](https://tngusmiso.tistory.com/57)
- [Clean Architecture With MVVM on iOS(using SwiftUI, Combine, SPM)](https://tigi44.github.io/ios/iOS,-Swift-Clean-Architecture-with-MVVM-DesignPattern-on-iOS/)
- [ iOS Clean Architecture + MVVM 개념과 예제](https://eunjin3786.tistory.com/207)
- [iOS 사용성 최대로 올려보자! UICollectionView Custom Layout](https://hucet.tistory.com/23)
- [로컬 푸쉬 알림 구현 방법 (Local Notification)](https://onelife2live.tistory.com/33)
- [Swift: Confetti Animation Effect](https://www.youtube.com/watch?v=YosPD7eFvcE)
- [CoreML: Real Time Camera Object Detection with Machine Learning ](https://www.youtube.com/watch?v=p6GA8ODlnX0)
- [Unit testing asynchronous Swift code](https://www.swiftbysundell.com/articles/unit-testing-asynchronous-swift-code/)