Style/#428 댓글, 답글 UI 구현 by y-eonee · Pull Request #440 · 36-APPJAM-HEARTZ/BYEBOO-iOS

y-eonee · 2026-05-10T14:44:56Z

🔗 연결된 이슈

Connected: [Style] 댓글 UI #428

📄 작업 내용

댓글, 답글 뷰의 전반적인 UI 작업을 진행했습니다.
댓글, 답글이 추가됨에 따라 entity가 수정된 부분이 있습니다. dto 부분에 주석처리 된 부분들은 서버 연결하면서 해제할 예정입니다!
키보드 관련 로직을 따로 protocol + extension으로 분리하였습니다.

구현 내용	좋아요 누르기	댓글 리스트
GIF

구현 내용	답글 바텀시트	키보드
GIF

💻 주요 코드 설명

댓글 입력 컴포넌트

CommentTextFieldView

textView.do {
            let offset = (FontManager.body6R14.lineHeight - FontManager.body6R14.font.lineHeight) / 2
            $0.textContainerInset = .init(
                top: offset,
                left: 0,
                bottom: offset,
                right: 0
            )        
            // 그외... 
        }

UITextView 내의 TextContainer에 존재하는 기본 패딩값을 조정하기 위해 offset을 계산하여 넣어주었습니다.
텍스트뷰가 입력 중일 때, 레이아웃이 바뀌는 것들은 모두 UITextViewDelegate 내부에서 분기처리를 해주었습니다.

func textViewDidChange(_ textView: UITextView) {
        let maxHeight = 105.adjustedH
        let fittingHeight = textView.sizeThatFits(CGSize(width: textView.bounds.width, height: .infinity)).height
        
        let shouldScroll = fittingHeight > maxHeight
        textView.isScrollEnabled = shouldScroll
        if !shouldScroll { textView.contentOffset = .zero }

최대 1~5줄까지만 보이고, 6줄부터는 스크롤이 가능하게 하기 위해서 최대 높이를 지정하여 분기처리를 해주었습니다.

Diffable Datasource를 이용한 댓글 테이블뷰 구현

더보기 라벨을 구현하면서, 변경된 UI만 반영할 수 있는 디파블 데이터 소스를 써보고 싶어서 클로드랑 같이.. 도전해보았습니다..

enum CommentSection: Hashable {
    case main
}

enum ReplySection: Hashable {
    case comment
    case replies
}

struct CommentItem: Hashable {
    let entity: CommonQuestCommentEntity
    var showAllText: Bool
}

댓글, 답글은 같은 entity를 사용해서 하나의 item으로 같이 사용합니다

historyVC

 func moreLabelDidTap(commentID: Int) {
        let updatedItems = dataSource.snapshot().itemIdentifiers.map { item -> CommentItem in
            guard item.entity.commentID == commentID else { return item }
            return CommentItem(entity: item.entity, showAllText: true)
        } // comment ID로 구분합니다 

        var snapshot = NSDiffableDataSourceSnapshot<CommentSection, CommentItem>()
        snapshot.appendSections([.main])
        snapshot.appendItems(updatedItems, toSection: .main)
        dataSource.apply(snapshot, animatingDifferences: false) { [weak self] in
            self?.rootView.commentListView.performBatchUpdates(nil)
        }
    }

근데 이렇게 사용하는게 맞는진 잘 모르겠어요 ..
댓글+답글 수정,삭제,신고,차단은 이슈 따로 파서 구현하겠습니다!

추후 서버 연결시 주석해제

juri123123

고생하셨습니다 !

juri123123 · 2026-05-11T14:34:39Z

+
+import UIKit
+
+protocol KeyboardHandleProtocol: UIViewController {


우와 protocol이 UIViewController를 상속받은 건가요 .......?????? 컴파일 에러가 발생하지 않았나요 . . . ? 신기하네요 ...

프로토콜에서 채택 타입에 따른 제약은 저는 보통

extension KeyboardHandleProtocol where Self: UIViewController { ~

이런식으로 사용했던 것 같은데 ...!

생각해보니 안나더라고요.... 왜지.. where로 수정하겠습니다!!

juri123123 · 2026-05-11T14:40:30Z

    let writtenAt: String
    let content: String
-    let writerID: Int
+    let userID: Int


writerID는 왜 이름을 id라고 지은 건가용?

디티오가 바뀌어서 그거에 따라 수정해주었습니다!!

juri123123 · 2026-05-11T14:45:02Z

+protocol CommentProtocol: AnyObject {
+    func moreLabelDidTap(commentID: Int)
+    func replyIconDidTap(commentID: Int)
+}
+
+extension CommentProtocol {
+    func replyIconDidTap(commentID: Int) { }
+}


고능하다

juri123123 · 2026-05-11T14:46:24Z

+        showAllText: Bool,
+        isReplySheet: Bool
+    ) {
+        if let _ = replyCount {


이거 replyCount != nil 이렇게 해주어도 될 듯 해요 !

juri123123 · 2026-05-11T14:47:21Z

고생하셧어요 , . . . . 애증의 더보기

ㅠㅠㅠㅠㅠ..,더보기

juri123123 · 2026-05-11T14:50:33Z

+    func likeButtonDidTap()
+}
+
+final class QuestContentView: UIView {


얘는 BaseView 사용하지 않은 이유가 잇나용

빼먹엇네요잉...

juri123123 · 2026-05-17T07:02:42Z

+    func moreLabelDidTap(commentID: Int) {
+        let updatedItems = dataSource.snapshot().itemIdentifiers.map { item -> CommentItem in
+            guard item.entity.commentID == commentID else { return item }
+            return CommentItem(entity: item.entity, showAllText: true)


👍👍👍

dev-domo

수고하셨습니다! Diffable 활용 대단하네요😯 코멘트만 확인 부탁드려요!

dev-domo · 2026-05-17T11:23:29Z

+
+struct CommonQuestAnswerRepliesResponseDTO: Decodable {
+    let totalCount: Int
+    let comment: CommonQuestAnswerCommentResponseDTO


comment도 여러 개 들어올 수 있지 않나요?

하나의 댓글에 대한 답글 리스트 DTO여서 comment는 하나만 들어올 수 있습니다!!

dev-domo · 2026-05-17T11:35:40Z

+        }
+    }
+
+    func keyboardWillHide(duration: Double) {


KeyboardHandleProtocol의 keyboardWillShow와 keyboardWillHide 메서드의 차이점이 키보드 높이뿐이어서 height 파라미터에 기본값을 0을 부여하면 두 메서드를 하나로 합쳐서 사용 가능할 것 같아요!

오!!!! 반영하겠습니다

y-eonee added 30 commits April 29, 2026 18:45

add: #428 댓글, 좋아요 이미지 추가

1ae504e

style: #428 퀘스트 content, 댓글 컴포넌트 분리

25d3085

feat: #428 좋아요 누르기 구현

33d1a93

style: #428 나의여정에서도 프로필아이콘이 뜨도록 수정

23b5086

refactor: #428 extension 적용

8eaeb44

setting: #428 리퀴드글래스 미적용

1a38631

feat: #428 댓글 입력 컴포넌트 구현

e695a05

chore: #428 주석 삭제

a94efc5

refactor: #428 변경된 DTO 수정

349d4ab

추후 서버 연결시 주석해제

feat: #428 재사용을 위해 answer entity 수정 및 comment entity 작성

5cb40bf

refactor: #428 profile Icon String -> Image 전역으로 분리

840d3b0

feat: #428 Textview line 수 계산 익스텐션

809f5dc

style: #428 댓글 UI 구현

55b01b1

refactor: #428 entity 수정에 따른 configure 함수 내부 수정

70c5108

refactor: #428 profileIcon 로직 뷰모델 내부에서 삭제

cac5977

feat: #428 comment Table View VC에 연결

ba83a40

fix: #428 컴포넌트 재사용에 따른 UI 로직 수정

5755451

style: #428 History View UI

4e56be0

feat: #428 scrollView, tableView 중첩을 위한 익스텐션

5a5b38f

feat: #428 댓글 더보기 구현

5997863

add: #428 답글 아이콘 추가

c4dbe52

chore: #428 comment entity stub 추가

2da80d8

feat: #428 댓글, 답글 레이아웃 분기처리 수정

0d248ec

style: #428 답글 바텀시트 UI 구현

a3e1ea0

feat: #428 답글 뷰 모델 생성

34610bf

refactor: #428 키보드 로직 분리

cd2ae9b

feat: #428 답글 기능 구현

d2f185f

style: #428 separator 설정

ee5f919

fix: #428 stub id 수정

fdca78c

refactor: #428 불필요한 분기처리 삭제

d8fa920

y-eonee requested review from dev-domo and juri123123 May 10, 2026 14:44

y-eonee self-assigned this May 10, 2026

y-eonee added 나연🐹 style UI 구현 labels May 10, 2026

y-eonee linked an issue May 10, 2026 that may be closed by this pull request

[Style] 댓글 UI #428

Closed

1 task

juri123123 approved these changes May 17, 2026

View reviewed changes

dev-domo approved these changes May 17, 2026

View reviewed changes

refactor: #428 코드리뷰 반영

35423f3

y-eonee merged commit d24417a into develop May 19, 2026
1 check passed

y-eonee deleted the style/#428-댓글-ui branch May 19, 2026 09:39


		import UIKit

		protocol KeyboardHandleProtocol: UIViewController {

Conversation

y-eonee commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 연결된 이슈

📄 작업 내용

💻 주요 코드 설명

댓글 입력 컴포넌트

더보기 라벨

하 정말 힘들었습니다 어떻게 해결했는지 적어볼게요 ..

Diffable Datasource를 이용한 댓글 테이블뷰 구현

Uh oh!

juri123123 left a comment

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!

dev-domo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

y-eonee May 19, 2026 • 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

y-eonee commented May 10, 2026 •

edited

Loading

y-eonee May 19, 2026 •

edited

Loading