장바구니 셀 동적 높이 조절 + 스크롤 문제 해결

🍏 문제 상황

팀 프로젝트에서 장바구니 부분을 맡아서 TableView의 단독 스크롤 구조로 시작하여, 상품 목록과 공간은 나눠진 상태였다.

 

그런데 팀원 모두 첫 팀 프로젝트라 그런지 생각 못했던 부분이 생겼다. 바로 작은 화면(iPhone SE 등)에서는 목록 영역이 커서 장바구니가 가려지고 스크롤 하기 힘든 상황이었다.

 

결국 회의를 통해서 두 영역을 ScrollView로 감싸고, productPageView와 cartView를 StackView에 함께 넣어서 스크롤 되는 구조로 변경했지만, 셀 영역과 스크롤이 동적으로 늘어나야 하는데 해결하지 못하는 문제에서 막혔다.

 

문제의 상황

 

 

🍏 해결 방법 고민

처음에는 CartView의 TableView만 스크롤 되도록 했기에 장바구니가 화면 아래에 가려지는 문제가 있었지만, 이제는 TableView의 스크롤을 막아야하기에 isScrollEnabled = false 설정을 통해 간단히 스크롤을 막을 수 있었다.

 

진짜 문제인 TableView의 셀 개수에 따라 높이를 동적으로 조정해야했고, 그에 따라서 ScrollView의 스크롤 범위도 자연스럽게 늘어나야했다.

 

결국 생각한 방법은 셀 하나당 높이(44pt)를 셀이 추가될 때마다 늘어나게끔 해서, 외부에서 그만큼 높이를 계산해서 전달해주는 방식을 떠올려서 그대로 진행했다.

 

 

🍏 해결한 방법!

 

1. CartView에 높이 설정 기능 추가

---

CartView 내에서 TableView를 감싸고 있는 tableContainerView의 높이를 바꿀 수 있는 updateHeight(_:) 함수를 구현하였고, ViewController에서 계산된 높이값을 넘겨주는 식으로 구성했다.

 

SnapKit에 있는 remakeConstraints를 사용하여 제약 조건을 업데이트 해주는 방식을 사용했다.

// CartView.swift
func updateHeight(_ height: CGFloat) { 
  tableContainerView.snp.remakeConstraints {
    $0.top.equalTo(safeAreaLayoutGuide)
    $0.leading.trailing.equalToSuperview().inset(16)
    $0.height.equalTo(height) // 동적으로 변경
  }
}

 

2. ScrollProductCartView가 중간 조정자 역할

---

외부(ViewController)에서 받은 height를 CartView에도 전달하고, 자신의 제약도 동적으로 변경시켰다.

 

CartView와 마찬가지로 remakeConstraints를 사용하여 제약 조건을 업데이트 해주는 방식을 사용했다.

// ScrollProductCartView.swift
func updateHeight(_ height: CGFloat) {
  cartView.updateHeight(height) // CartView에도 전달

  cartView.snp.remakeConstraints {
    $0.top.equalTo(productPageView.snp.bottom)
    $0.leading.trailing.equalToSuperview()
    $0.height.equalTo(height) // 동적으로 변경
  }
}

 

3. ViewController에서 전체 조율

---

셀 하나의 높이는 버튼을 누를 때 최소 값인 44x44를 위해 44pt로 고정했다.

 

최소 4개의 셀 공간을 확보하여, “장바구니가 비어있습니다.” 문구를 포함하기 위해서 44 * 4의 값을 초기값으로 주었고, 이후에 4개 이상 셀이 늘어나면 더 늘어나도록 max(rowHeight * 4, rowHeight * count) 방식으로 총 높이를 계산했다.

// ViewController.swift
func updateCartView() {
    let rowHeight: CGFloat = 44
    let totalHeight = max(rowHeight * 4, rowHeight * CGFloat(cartItems.count))
    scrollProductCartView.updateHeight(totalHeight)

    ...
    ...
}

추가로, updateCart()함수는 셀이 늘어날 때 마다 호출되도록 구현해두었다.

 

 

🍏 동작 시현

---

4개이상 셀이 추가되면 늘어남

🍏 배운 점

• remakeConstraints는 뷰 높이 등 레이아웃을 동적으로 변경할 때 유용하다.
• 셀이 없을 때도 빈 공간 확보를 위해 최소 높이 확보가 UX 측면에서 중요하다.

 

이어지는 글