panther222128 / sidedish

그룹프로젝트 #2
0 stars 0 forks source link

상품 상세 정보 화면 구현 #5

Open panther222128 opened 3 years ago

panther222128 commented 3 years ago

상품 상세 화면 구현 관련

CollectionView의 DiffableDataSource를 이용해 구현하던 중이었으나 애플이 제공하는 Sample Code 및 기타 자료를 통해 DiffableDataSource의 이점은 Section의 구분에서 각각 다른 View를 포함할 때 의미가 있다고 이해했음 -> ScrollView로 전환

아래 두 영상을 중심으로 ScrollView 학습 및 구현

https://www.youtube.com/watch?v=MXJffcoWRlw&t=537s https://www.youtube.com/watch?v=X2Wr4TtMG6Q&t=648s

ViewController에 ScrollView를 채우고 ScrollView 내부에 1) 상품 이미지를 나타내는 ScrollView, 2) 상품 상세, 배송정보, 주문 수량, 주문정보의 View를 담는 네 개의 ContainerView, 3) 상품 상세 설명 이미지를 나타내는 UIImageView를 갖는 Hierarchy

가장 하위의 ContainerView 네 개는 그 안에 세부 View를 포함

Untitled Workspace-4

전반적인 요소는 추가했으나 다음을 반영해야 함

  1. 수량을 입력하는 Custom Stepper
  2. 상품 재고가 부족한 경우 주문하기 버튼을 일시품절로 표시하고 비활성화
  3. 이벤트가 진행되지 않는 경우 이벤트 Label을 보이지 않도록 표시
  4. 이벤트가 진행중일 때 Discounted Price와 Price(가운데 줄)의 구분
  5. 상품 상세 설명 이미지 Scroll View에 이미지 추가 후 테스트 -> 주문하기 버튼과 상세 이미지 및 상세 이미지 하단에 여백 발생(Autolayout 문제로 추정)

추가로 반영된 사항

  1. 이벤트 Label과 주문하기 버튼 Corner Radius 적용
  2. 상품 이미지 Scroll View에 이미지 추가 후 테스트 성공