버튼만 눌리면 됐지.. 색도 변경했는데.. 숫자 카운트까지 해야하나....
해야했다.
좋아요 숫자는 따로 가져오고 저장할 서버도 없기에 랜덤으로 지정하고,
(대신 같은 영화 두번 들어가면 좋아요 숫자가 바뀜)
누르면 카운트가 올라가고 한번 더 탭하면 내려가면서 색도 회색으로 돌아오게 하는 것
결과물
isLiked
어제 했던 코드에 덧붙이면 끝나는 부분이었다.
@objc private func likeButtonTapped(_ sender: UIButton) {
animateButtonPress(sender)
if isLiked {
// 이미 좋아요가 눌려있다면 취소하고 카운트 감소
likeCount -= 1
} else {
// 좋아요가 눌려있지 않으면 카운트 증가
likeCount += 1
}
// 좋아요 상태 반전시키는 토글
isLiked.toggle()
updateLikeButtonTitle()
// 버튼 색상 변경
if isLiked {
sender.setTitleColor(.systemRed, for: .normal)
sender.layer.borderColor = UIColor.red.cgColor
} else {
sender.setTitleColor(.lightGray, for: .normal)
sender.layer.borderColor = UIColor.lightGray.cgColor
}
}그리고 setupLikeCount 메서드를 만들어서 세부화면에 진입 할 때마다 좋아요의 수를 랜덤으로 1001~ 3001 사이의 숫자가 나올 수 있도록 지정했다.
private func setupLikeCount() {
likeCount = Int.random(in: 1001...3001)
updateLikeButtonTitle()
}이렇게 좋아요 버튼을 누를 때마다 좋아요 상태를 토글하고,
그에 맞게 UI를 업데이트하는 기능을 구현했다.
-
버튼 애니메이션
animateButtonPress(sender)를 통해 버튼을 누를 때 색이 변하게 만들었었던 걸 불러오는 것이다. 이렇게 시각적인 애니메이션을 추가하면 사용자 경험을 향상시키기 때문에 사소한 부분일지라도 신경쓰는게 좋다고 한다. -
좋아요 카운트 처리
isLiked가true이면 좋아요 상태가 이미 활성화된 것이라서 카운트를 감소시킨다.
반대로isLiked가false이면 좋아요 상태가 비활성화된 것이고, 카운트를 다시 증가시켜준다.
이렇게 하면 좋아요 수가 동적으로 변한다. -
좋아요 상태 반전
isLiked.toggle()을 통해 좋아요 상태를 반전시킬 수 있는건데,
isLiked가true이면false로,false이면true로 바꿔주는 함수다.
예를 들어 처음에isLiked가false일 경우에는 (좋아요가 눌려 있지 않은 상태),
버튼을 클릭하면toggle()을 통해isLiked가 true로 바뀌어 좋아요 상태로 변경될 것이다.
반대로isLiked가true일 경우 (좋아요가 눌려 있는 상태),
버튼을 클릭하면toggle()을 통해isLiked가 false로 바뀌어 좋아요가 취소된다. -
버튼 색상 변경
좋아요가 눌렸을 때는 버튼 색상과 테두리 색상을 빨간색으로 변경하고, 취소되었을 때는 회색으로 변경해 버튼의 시각적인 상태를 명확하게 나타내준다.
이 부분은 버튼의 상태를 색상으로 쉽게 구별할 수 있게 도와줄 수 있다.
결과
음...
isLiked.toggle()을 사용해 좋아요 상태를 반전시키는 건 많이 보았던 기능을 구현하는 것이라 재미있엇다.
그리고 toggle()을 사용해 상태를 간결하게 관리할 수 있어서 코드가 더 깔끔하게 변할 수 있었고, 이런 간단한 메서드 하나로 기능을 구현할 수 있다는 점에서 이런 속성을 가진 기능을 많이 알고있는게 힘이겠구나 싶었다.
그런데 likeCount를 관리하는 부분에서는 실제 앱에서는 서버와의 연동이 필요할 수 있다는 점을 염두에 두어야 한다는 생각이 들었다.
지금은 서버가 없으니.. 단순히 로컬에서 상태를 변경하는 예시라서 그렇지만 실제로는 데이터베이스나 네트워크와 연동하여 좋아요 상태를 동기화해야 할 때가 많을텐데 그런 점을 고려해서 나중에 코드를 작성해야겠다는 생각도 들었다.
