Skip to content

스레드 사용시 대댓글 UI 컴포넌트 구현 #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
KimKyuHoi merged 10 commits into from
Feb 5, 2025
Merged

스레드 사용시 대댓글 UI 컴포넌트 구현 #131

KimKyuHoi merged 10 commits into from
Feb 5, 2025

Conversation

@KimKyuHoi
Copy link
Collaborator

@KimKyuHoi KimKyuHoi commented Feb 4, 2025 •
edited
Loading

Pull request

Related issue

Motivation and context

  • 대댓글을 통한 스레드 UI가 필요합니다.

Solution

  • Thread UI 구현
    image
    • 공용 헤더 사용
      • Chat내에서의 Header나 스레드의 header는 유사하다고 판단했기 때문에 공용 컴포넌트를 만들어서 그걸 같이 두고 사용하였습니다.
    • 스레드 and 채팅박스 Overlay
      • 화면비율이 주식과 50%이기 때문에 스레드를 일반 넓이를 고정하기엔 무리가 있다라고 판단했습니다. 그래서 Overlay를 활용하여 chat section위에 스레드 판넬을 올리는식으로 구현하였습니다.
    • 댓글 박스에서 호버링시 스레드 아이콘이 뜰 수 있도록 구현하였습니다.

How has this been tested

  • 댓글이 없을 경우
2025-02-04.4.18.04.mov
  • 일반버전일때(댓글이 있을 경우)
2025-02-04.4.14.55.mov
  • 허들일때(댓글이 있을 경우)
2025-02-04.4.13.05.mov

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the docs/CONTRIBUTING.md document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@KimKyuHoi KimKyuHoi added ✨ Feature 기능 추가 💄 Design 프론트엔드 CSS 관련 이슈 🖥️ FE 프론트엔드 상 무조건 스프린트내에 해야하는 것들 labels Feb 4, 2025
@KimKyuHoi KimKyuHoi added this to the 주톡피아 마일스톤2 milestone Feb 4, 2025
@KimKyuHoi KimKyuHoi self-assigned this Feb 4, 2025
@KimKyuHoi KimKyuHoi requested a review from handje February 4, 2025 07:19
handje
handje reviewed Feb 4, 2025
View reviewed changes
src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx Outdated
)}
</div>
<div
className={`ml-2 text-sm transition-all duration-300 ease-in-out ${isHovered ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`}
Copy link
Collaborator

@handje handje Feb 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

애니메이션이 조금 어색한것 같아요. translate가 없이 글자가 안보이다가 보이는 애니메이션만 주는건 어떠신가요?

Copy link
Collaborator Author

@KimKyuHoi KimKyuHoi Feb 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 오히려 더 빼니까 딱딱해지는 느낌이 드는데 너무 어색하신가요?

@KimKyuHoi KimKyuHoi added 중 마일스톤 내에는 해야하지만 스프린트내에 미뤄도 되는 것들 and removed 상 무조건 스프린트내에 해야하는 것들 labels Feb 5, 2025
@handje handje self-requested a review February 5, 2025 04:45
handje
handje approved these changes Feb 5, 2025
View reviewed changes
Copy link
Collaborator

@handje handje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋습니당

@KimKyuHoi KimKyuHoi merged commit 0b61538 into dev Feb 5, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@handje handje handje approved these changes

Assignees

@KimKyuHoi KimKyuHoi

Labels

중 마일스톤 내에는 해야하지만 스프린트내에 미뤄도 되는 것들 💄 Design 프론트엔드 CSS 관련 이슈 🖥️ FE 프론트엔드 ✨ Feature 기능 추가

Projects

None yet

Milestone

주톡피아 마일스톤2

Development

Successfully merging this pull request may close these issues.

스레드 UI 구현하기

3 participants

@KimKyuHoi @handje