[Feat] 내리기, 좋아요, 댓글 UIButton 및 게시물, 댓글 CollectionViewCell 컴포넌트 작성 #121

youz2me · 2025-03-13T17:30:29Z

👻 PULL REQUEST

📄 작업 내용

내리기, 좋아요, 댓글 UIButton 컴포넌트 및 게시물, 댓글 CollectionViewCell 컴포넌트를 작성했어요.

iPhone 13 mini	iPhone 13 mini

HexCode 적용을 위해 UIColor 익스텐션을 작성했어요.
alpha를 이용한 게시글 투명도 적용과 화면에 보여지는 투명도를 표시하기 위해 Opacity 구조체를 수정했어요.

💻 주요 코드 설명

`alpha`를 이용한 투명도 반영을 위한 `Opacity` 구조체 수정

현재는 각 셀 내에서 투명도 값을 받아 투명도가 적용되어야 하는 컴포넌트의 alpha 값을 변경해주는 식으로 투명도를 반영하고 있습니다.
해당 로직 구현을 위해서는 alpha 값이 0.0에서 1.0 사이 값을 가져야 하기 때문에 그에 맞춰 Opacity 구조체를 수정했습니다.
서버에서 받은 실제 값(0~-100 사이)은 value에 저장되며, 사용자에게 표시되는 값(15~100)은 displayedValue에 저장됩니다.
alpha를 적용하기 위해 연산 프로퍼티 alpha를 선언해 사용했습니다. 입력된 value 값을 이용해 사용자에게 보여지는 투명도 값을 계산해 리턴합니다.

struct Opacity: Hashable {
    static let minValue: Int = -85
    
    private(set) var value: Int
    
    var displayedValue: Int {
        return 100 + value
    }
    
    var alpha: Float {
        if value <= -81 {
            return 0.15
        }
        
        let groupNumber = (abs(value) - 1) / 10 + 1
        let opacityValue = 1.0 - (Float(groupNumber) * 0.1)
        
        return max(0.1, opacityValue)
    }
    
    init(value: Int) {
        self.value = max(Self.minValue, min(0, value))
    }
    
    mutating func reduce() {
        if value > Self.minValue {
            value -= 1
        }
    }
}

👀 기타 더 이야기해볼 점

kill cell

Entity에서 Comment의 네이밍을 CommentInfo로 변경해 보았습니다. ContentInfo의 네이밍과 맞지 않는 것 같아서 변경했는데 의견 말씀해주시면 반영 후 머지하도록 하겠습니다!

🔗 연결된 이슈

Resolved: [Feat] 공통으로 사용되는 컴포넌트 구현하기 #118

JinUng41

상당히 많은 내용임에도 불구하고, 전부 구현하셨다니 대단하십니다! 👍👍

특히 셀의 상태 정의와 구현함에 있어 많은 고민을 하셨을 것 같고, 실제로 코드에서도 느껴졌어요.
코드가 일관도 있게 작성되어 이해하기에 수월했습니다.
코멘트는 천천히 확인해주세요. 고생하셨습니다!

JinUng41 · 2025-03-14T01:59:21Z

Wable-iOS/Domain/Entity/Opacity.swift

+/// 사용자의 투명도를 관리하는 구조체.
+/// 서버에서는 0~-100 사이의 정수로 전달되며, 앱에서는 이를 투명도 백분율과 실제 UI에 적용할 alpha 값으로 변환합니다.
+///
+/// 사용 예시:
+/// ```swift
+/// // 서버에서 받은 값으로 초기화
+/// let opacity = Opacity(value: -30)
+///
+/// // 화면에 표시할 백분율 값 (70%)
+/// label.text = "\(opacity.displayedValue)%"
+///
+/// // 실제 UI 요소에 적용할 alpha 값 (0.7)
+/// view.alpha = CGFloat(opacity.alpha)
+///
+/// // 투명도 감소 (신고 등으로 인해)
+/// var userOpacity = Opacity(value: -10)
+/// userOpacity.reduce()  // value가 -11로 변경됨
+/// ```


좋은 문서 작성이네요! 👍

JinUng41 · 2025-03-14T02:03:19Z

Wable-iOS/Presentation/UIHelper/UIColor+.swift

+
+        assert(hexFormatted.count == 6, "유효하지 않은 HEX 코드입니다.")


assert를 사용하신 이유가 있을까요?

JinUng41 · 2025-03-14T02:06:56Z

Wable-iOS/Presentation/WableComponent/Youjin/CommentCollectionViewCell.swift

+
+    private func setupView() {
+        addSubviews(


UICollectionViewCell은 contentView에 addSubview를 해야 한다고 공식 문서에서 설명하더라구요.
참고해 주세요!

수정했습니다! UIView랑 착각하고 있었네요 😭

JinUng41 · 2025-03-14T02:09:31Z

Wable-iOS/Presentation/WableComponent/Youjin/CommentCollectionViewCell.swift

+        guard let profileURL = info.author.profileURL,
+              let fanTeam = info.author.fanTeam,
+              let createdDate = info.createdDate else {
+                  return
+              }


else문 개행 부탁드립니다!

반영했습니다!

JinUng41 · 2025-03-14T02:10:27Z

Wable-iOS/Presentation/WableComponent/Youjin/CommentCollectionViewCell.swift

+        switch postType {
+        case .mine:
+            ghostButton.isHidden = true
+        case .others:
+            ghostButton.isHidden = false
+        }
+
+        switch commentType {
+        case .ripple:
+            contentLabel.attributedText = info.text.pretendardString(with: .body4)
+            commentButton.isHidden = false
+        case .reply:
+            infoView.snp.updateConstraints {
+                $0.leading.equalToSuperview().offset(36)
+            }
+
+            commentButton.isHidden = true
+        }
+
+        switch info.status {
+        case .normal:
+            ghostCell(opacity: info.opacity.alpha)
+            ghostButton.configureButton(type: .small, status: .normal)
+        case .ghost:
+            ghostCell(opacity: 0.15)
+            ghostButton.configureButton(type: .large, status: .disabled)
+        case .blind:
+            ghostCell(opacity: info.opacity.alpha)
+            contentLabel.removeFromSuperview()
+            addSubview(blindImageView)
+
+            blindImageView.snp.makeConstraints {
+                $0.top.equalTo(infoView.snp.bottom).offset(12)
+                $0.leading.equalTo(likeButton)
+                $0.trailing.equalTo(ghostButton)
+                $0.bottom.equalTo(ghostButton.snp.top).offset(-12)
+                $0.adjustedHeightEqualTo(50)
+            }
+
+            ghostButton.configureButton(type: .small, status: .normal)
+        }
+
+        contentLabel.attributedText = info.text.pretendardString(with: .body4)
+
+        infoView.configureView(
+            userProfileURL: profileURL,
+            userName: info.author.nickname,
+            userFanTeam: fanTeam,
+            opacity: info.opacity.displayedValue,
+            createdDate: createdDate,
+            postType: .comment
+        )
+        commentButton.configureButton(commentCount: 0, type: .comment)
+        likeButton.configureButton(
+            isLiked: info.like.status,
+            likeCount: info.like.count,
+            postType: .comment
+        )
+    }


configureCell 메서드의 내용이 많아졌네요!
메서드로 각각의 아이템들에 대해서 설정하는 메서드로 분리하고 이를 configureCell에서 호출하는 것은 어떠실까요?
메서드의 분리를 통해 작은 일만 담당하게 하여, 가독성을 향상 시킬 수 있을 것 같아요.

switch 문을 기준으로 메서드 분리를 시도해보았습니다! 좋은 리뷰 감사드립니다 🙇‍♀️

configurePostType(postType: postType) configureCommentType(info: info, commentType: commentType) configurePostStatus(info: info)

JinUng41 · 2025-03-14T02:21:01Z

Wable-iOS/Presentation/WableComponent/Youjin/CommentCollectionViewCell.swift

+/// 댓글 타입을 정의하는 열거형.
+///
+/// - `ripple`: 게시글에 직접 달린 댓글
+/// - `reply`: 다른 댓글에 달린 답글
+enum CommentType {
+    case ripple
+    case reply
+}


이 셀 이외에 CommentType을 사용하지 않는다면, CommentCollectionViewCell의 중첩 타입도 고려해 볼 수 있을 것 같아요.
중첩 타입으로 구현함으로써, 응집도를 높이고 의도를 명확히 표현하는 것이죠.

좋은 것 같아요 !! 반영했습니다.
그러면 추가적으로 의문이 드는 게 여러 클래스에서 쓰이는 AuthorType Enum이 ContentCollectionViewCell에 있는데 따로 분리하는 게 나을까요?

그렇다면, 분리하는 것이 맞다고 생각합니다!

반영했습니다!

JinUng41 · 2025-03-14T02:29:00Z

Wable-iOS/Presentation/WableComponent/Youjin/LikeButton.swift

+
+        configuration.image = image.withConfiguration(UIImage.SymbolConfiguration(pointSize: 24))
+        configuration.imagePadding = 4
+        configuration.attributedTitle = String(likeCount).pretendardString(with: .caption1)


'좋아요 수'에 대해서 AttributedString을 적용해야 할까 하는 생각이 들었습니다.
단순히 1 이상의 숫자를 보여줄텐데 자간과 행간을 구현해야 할까 하는 생각 말이죠.

무조건 AttributedString을 적용하는 것보다 단순한 것은 폰트만 적용해도 된다는 생각을 저도 깨닫게 되었네요.
감사합니다!

JinUng41 · 2025-03-14T02:30:34Z

Wable-iOS/Presentation/WableComponent/Youjin/LikeButton.swift

+    @objc func likeButtonDidTap() {
+        isLiked ? (likeCount -= 1) : (likeCount += 1)
+        isLiked.toggle()
+
+        configureButton(isLiked: isLiked, likeCount: likeCount, postType: postType)
+    }


내부적으로 좋아요 상태와 수를 변경하고 있지만,
만약 네트워크 작업이 개입됐을 때를 고려하면 좋을 것 같아요.

일반적으로는 성공하겠지만, 만약 좋아요 API 요청을 했을 때 실패한다면 이를 뷰에서 반영하면 안될수도 있기 때문이죠.

저도 구현하면서 그런 생각이 들어서 외부에서 오버라이딩해서 추가적으로 구현해 쓸 수 있으면 좋을 것 같다는 생각을 했어요.
이 부분은 근데 좋아요 버튼이 눌렸을 때 무조건 실행되어야 하는 부분이라 남겨두는 것도 좋을 것 같다는 생각이 듭니다...! 해당 부분을 구현하게 되었을 때 한번 같이 논의해보면 좋을 것 같은데 어떠신가요 ??!

JinUng41 · 2025-03-14T02:33:34Z

Wable-iOS/Presentation/WableComponent/Youjin/GhostButton.swift

+
+// MARK: - Extension
+
+extension GhostButton {
+    /// 내리기 버튼 구성 메서드
+    /// - Parameters:
+    ///   - type: 버튼 크기 타입 (.large 또는 .small)
+    ///   - status: 버튼 상태 (.normal 또는 .disabled)
+    func configureButton(type: GhostButtonType, status: GhostButtonStatus) {
+        var configuration = UIButton.Configuration.filled()
+        self.roundCorners([.all], radius: 16)
+        self.clipsToBounds = true
+
+        switch type {
+        case .large:
+            configuration.attributedTitle = "내리기".pretendardString(with: .caption3)
+            configuration.imagePadding = 4
+            configuration.imagePlacement = .leading
+            configuration.contentInsets = NSDirectionalEdgeInsets(top: 6, leading: 10, bottom: 6, trailing: 10)
+        case .small:
+            configuration.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
+        }
+
+        switch status {
+        case .normal:
+            configuration.attributedTitle?.foregroundColor = UIColor("556480")
+            configuration.image = .icGhostDefault.withTintColor(UIColor("556480"))
+            configuration.baseBackgroundColor = UIColor("DDE4F1")
+            self.isUserInteractionEnabled = true
+        case .disabled:
+            configuration.attributedTitle?.foregroundColor = UIColor("AEAEAE")
+            configuration.image = .icGhostDefault.withTintColor(.gray500)
+            configuration.baseBackgroundColor = UIColor("F7F7F7")
+            self.isUserInteractionEnabled = false
+        }
+
+        self.configuration = configuration
+        setupConstraint(type: type)
+    }
+}


GhostButton의 경우, UIButton 익스텐션으로도 구현이 가능해 보입니다.
별도의 클래스를 선언했을 때의 이점이 잘 와닿지는 않은 것 같아요.
만약 GhostButton을 UIButton과 별도의 객체로 바라보겠다면, 별도의 생성자를 통해 생성이 가능한 객체로 구현하면 어떨까 싶은데요.
어떻게 생각하실까요?

저도 따로 추가되는 프로퍼티나 컴포넌트가 없다는 점에서 고민을 많이 했었는데 결론적으로 UIButton의 익스텐션으로 작성했을 때 너무 개방적(?)으로 작성되는 느낌이라 해당 방법으로 구현하지 않았던 것 같습니다.
글로 설명하기가 어려운데 UIButton의 익스텐션으로 작성하게 되면 모든 버튼에서 .configureGhostButton() 형식으로 접근이 가능하다는 게 옳지 않다고 생각했어요. 이 의견에 대해서는 어떻게 생각하시는지 궁금합니닷!!

타입 또는 상태를 생성자에서 초기 설정하고, 메서드를 통해 변경하는 방향도 좋을 것 같아요.

JinUng41 · 2025-03-14T02:37:04Z

Wable-iOS/Presentation/WableComponent/Youjin/CommentButton.swift

+    /// 버튼이 속한 게시물 타입 (게시글/댓글)
+    private var type: PostType = .content


커스텀 클래스이기 때문에, 별도의 생성자로 강제하는 방법도 좋아보입니다!

생성자를 강제했을 때 프로퍼티 선언 시 무조건 타입을 지정해줘야 해서 따로 선언하지 않았는데 PostType의 경우 해당 방법을 이용하는 것도 좋은 것 같습니다 좋은 의견 감사합니다 🙇‍♀️ 반영해두었습니다 !!

#Conflicts: # Wable-iOS.xcodeproj/project.pbxproj

JinUng41

고생스기루 LGTM 👍

JinUng41 · 2025-03-17T15:21:07Z

Wable-iOS/Presentation/WableComponent/Youjin/Button/CommentButton.swift

+    private var type: PostType

    // MARK: - LifeCycle

-    override init(frame: CGRect) {
-        super.init(frame: frame)
+    init(type: PostType) {


postType 변수가 변할 여지가 있나요?

[Feat] 내리기, 좋아요, 댓글 UIButton 및 게시물, 댓글 CollectionViewCell 컴포넌트 작성

youz2me added 6 commits March 11, 2025 10:59

[Feat] #118 - GhostButton 작성

1c6739d

[FIx] #118 - 버튼 상태 변화 맞춰서 isUserInteractionEnabled 상태 수정하도록 구현

4721fa2

[Feat] #118 - 좋아요 버튼, 댓글 버튼 작성

f72453b

[Feat] #118 - ContentCollectionViewCell 구현

938c28f

[Feat] #118 - CommentColletionViewCell 구현

f24815e

Merge remote-tracking branch 'refs/remotes/origin/develop'

c83de20

youz2me added ✨ feat 기능 또는 객체 구현 🦉 유진 🛌🛌🛌🛌🛌🛌🛌🛌🛌🛌 labels Mar 13, 2025

youz2me requested a review from JinUng41 March 13, 2025 17:30

youz2me self-assigned this Mar 13, 2025

youz2me added 3 commits March 14, 2025 02:58

[Fix] #118 - 파일 레퍼런스 해제되는 문제 해결

74cff76

[Docs] #118 - 각 클래스별 주석 추가

278ee3c

[Docs] #118 - Opacity 구조체 주석 추가

e62f3d9

JinUng41 approved these changes Mar 14, 2025

View reviewed changes

youz2me added 4 commits March 17, 2025 02:43

[Fix] #118 - 리뷰 반영

3366728

Merge remote-tracking branch 'refs/remotes/origin/develop'

1253de5

#Conflicts: # Wable-iOS.xcodeproj/project.pbxproj

[Fix] #118 - 충돌 해결

239616b

[Fix] #118 - Recommended Setting에 따라 .pbxproj 변경

907ad11

JinUng41 approved these changes Mar 17, 2025

View reviewed changes

[Fix] #118 - 리뷰 반영

86bc629

youz2me merged commit 1f24e16 into develop Mar 17, 2025

youz2me deleted the feat/#118-common-component branch March 17, 2025 15:59

youz2me added a commit that referenced this pull request Oct 26, 2025

[Merge] pull request #121 from Team-Wable/feat/#118-common-component

d88548b

[Feat] 내리기, 좋아요, 댓글 UIButton 및 게시물, 댓글 CollectionViewCell 컴포넌트 작성


		assert(hexFormatted.count == 6, "유효하지 않은 HEX 코드입니다.")

		/// 버튼이 속한 게시물 타입 (게시글/댓글)
		private var type: PostType = .content

[Feat] 내리기, 좋아요, 댓글 UIButton 및 게시물, 댓글 CollectionViewCell 컴포넌트 작성 #121

[Feat] 내리기, 좋아요, 댓글 UIButton 및 게시물, 댓글 CollectionViewCell 컴포넌트 작성 #121

Uh oh!

Conversation

youz2me commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👻 PULL REQUEST

📄 작업 내용

💻 주요 코드 설명

alpha를 이용한 투명도 반영을 위한 Opacity 구조체 수정

👀 기타 더 이야기해볼 점

🔗 연결된 이슈

Uh oh!

JinUng41 left a comment

Choose a reason for hiding this comment

Uh oh!

JinUng41 Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JinUng41 Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JinUng41 Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JinUng41 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

youz2me commented Mar 13, 2025 •

edited

Loading

`alpha`를 이용한 투명도 반영을 위한 `Opacity` 구조체 수정

JinUng41 Mar 14, 2025 •

edited

Loading

JinUng41 Mar 14, 2025 •

edited

Loading

JinUng41 Mar 14, 2025 •

edited

Loading