문제 현상

이 화면은 'List' Section과 하단의 'Old' Section으로 이루어져 있다.
두 섹션 어느 곳에서든 하나의 row를 선택하면 섹션 전체가 선택되는 듯한 음영처리가 된다.
실제 기능은 하나의 row만 선택되어야 하므로 이러한 음영처리는 사용자에게 혼란을 줄 것이다.

그래서 아예 row를 선택 했을 때, 음영처리가 되지 않게 수정하고자 했다.

---

문제의 코드

List

List {
  Section("SectionA") {
  	ForEach() {
  	  MyCustomRow()
    }
  }
}

• List 안에 Section이 하나 있는 구조이고 List는 ForEach문을 돌면서 MyCustomRow View를 출력하고 있다.

MyCustomRow

HStack {
  Image(systemName: "square")
  Text("어쩌고 저쩌고")
  Button {
  } label: {
    Image(systemName: "ellipsis"
  }
  .onTapGesture {
    // elipse(점 세개 버튼)을 터치 했을 때 처리 로직
  }
  .contentShape(Rectangle())
    

• SwiftUI에서 버튼 내부의 투명한 부분은 tap을 해도 인식이 안된다. 그래서 이를 해결하기 위해 MyCustomRow의 모든 컴포넌트를 감싸는 HStack에 contentShape() 설정을 해놨었다.

---

해결

• MyCustomRow의 HStack에 .buttonStyle(PlainButtonStyle())을 걸어주었다.
• 그러나 이때 Row 터치 인식이 안되는 문제가 있었다.
• MyCustomRow의 HStack에 걸려 있는 contentShape()을 지우고 Button에만 ContentShape()를 걸어주니 ellipsis 버튼의 터치도 인식이 잘되고, Row 터치 시 Section 영역 전체에 음영처리가 되는 현상도 없어졌다.

해결 후 코드

MyCustomRow

HStack {
  Image(systemName: "square")
  Text("어쩌고 저쩌고")
  Button {
  } label: {
    Image(systemName: "ellipsis"
  }
  .contentShape(Rectangle()) //✅추가
  .onTapGesture {
    // elipse(점 세개 버튼)을 터치 했을 때 처리 로직
  }

---

배운 점

• SwiftUI 컴포넌트 선택이 이상하게 된다면 contentShape()이 제대로 적용되었는지 살펴보자