Skip to content

[refactor] 채팅 UI 개선#174

Merged
ff1451 merged 3 commits intodevelopfrom
172-feat-채팅-UI-개선-및-회원가입-문의하기-카카오-연결
Mar 9, 2026

Hidden character warning

The head ref may contain hidden characters: "172-feat-\ucc44\ud305-UI-\uac1c\uc120-\ubc0f-\ud68c\uc6d0\uac00\uc785-\ubb38\uc758\ud558\uae30-\uce74\uce74\uc624-\uc5f0\uacb0"
Merged

[refactor] 채팅 UI 개선#174
ff1451 merged 3 commits intodevelopfrom
172-feat-채팅-UI-개선-및-회원가입-문의하기-카카오-연결

Conversation

@ff1451
Copy link
Copy Markdown
Collaborator

@ff1451 ff1451 commented Mar 9, 2026

Summary by CodeRabbit

업데이트 사항

  • UI 개선

    • 채팅 메시지 레이아웃 개선 - 그룹 채팅에서 발신자 정보 표시 최적화 및 메시지 정렬 개선
    • 채팅 헤더 사이드바 업데이트 - 참여자 목록 스크롤 기능 추가 및 레이아웃 조정
  • 스타일

    • 카드 컴포넌트 테두리 스타일 업데이트

@ff1451 ff1451 self-assigned this Mar 9, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 9, 2026

Warning

Rate limit exceeded

@ff1451 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 0 minutes and 32 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 775a7d31-21e8-44b4-9dcc-1210e3486980

📥 Commits

Reviewing files that changed from the base of the PR and between a1f7aa3 and e420ef3.

📒 Files selected for processing (3)
  • src/components/layout/Header/components/ChatHeader.tsx
  • src/pages/Chat/ChatRoom.tsx
  • src/pages/Club/Application/clubFeePage.tsx

Walkthrough

3개 파일의 상태 관리 및 UI 레이아웃을 개선하는 변경사항입니다. ChatHeader에서 커스텀 부울 상태 훅으로 마이그레이션하여 핸들러 명확성을 높였고, ChatRoom의 메시지 레이아웃을 재구조화하여 아바타·발신자명·메타데이터의 배치를 개선했으며, clubFeePage의 스타일 토큰을 디자인 시스템에 맞추어 정정했습니다.

Possibly related issues

  • [feat] 채팅 UI 개선 #172: ChatHeader의 useBooleanState 마이그레이션, ChatRoom 메시지 레이아웃/아바타 재구성, ClubFeePage 테두리 토큰 변경이 이슈의 요구사항과 정확히 일치합니다.

Possibly related PRs

🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 실제 변경사항의 핵심을 정확하게 반영하고 있습니다. 채팅 헤더, 채팅룸, 클럽 신청 페이지의 UI 개선 작업이 모두 포함되어 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch 172-feat-채팅-UI-개선-및-회원가입-문의하기-카카오-연결

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (3)
src/pages/Club/Application/clubFeePage.tsx (1)

62-62: 배경/텍스트 색상도 토큰으로 통일해주세요.

border-sub-200로는 맞췄지만 bg-[#fefce8], text-[#713f11]는 여전히 하드코딩입니다. 이 배너도 theme 토큰 클래스로 바꿔두면 이후 컬러 시스템 변경 시 같이 따라갑니다.
As per coding guidelines, "Prioritize color tokens from src/styles/theme.css (indigo-, blue-, background, primary, etc.)".

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Club/Application/clubFeePage.tsx` at line 62, Replace the hardcoded
background and text hex colors on the Card component with theme token classes:
update the Card's className (the JSX element rendered by Card in
clubFeePage.tsx) to remove bg-[`#fefce8`] and text-[`#713f11`] and use the
appropriate tokens from src/styles/theme.css (e.g., background-*, primary-*,
indigo-*, blue-* or the designated banner tokens) so the banner uses the theme
color tokens instead of inline hex values; keep border-sub-200 and existing
layout classes intact.
src/components/layout/Header/components/ChatHeader.tsx (1)

40-49: 조건부 Tailwind 클래스는 cn()으로 합쳐주세요.

오버레이/드로어 상태 클래스를 템플릿 문자열로 조합하고 있어서 이 레포의 class merge 규칙과 달라집니다. cn()으로 바꾸면 조건부 확장이 더 안전합니다.
As per coding guidelines, "Use cn() utility from src/utils/ts/cn.ts to merge Tailwind CSS classes".

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/layout/Header/components/ChatHeader.tsx` around lines 40 - 49,
The overlay and drawer divs in ChatHeader.tsx currently build Tailwind classes
with template literals; change them to use the cn() utility to merge classes
conditionally instead (import cn from the utils module), e.g., replace the
className expressions that depend on the open boolean for the overlay
(pointer-events/bg-black variants) and the drawer
(translate-x-0/translate-x-full and other static classes) with cn(...) calls
that pass static class strings and conditional objects/expressions keyed on
open; keep the same onClick handler (closeSidebar) and preserve all static
classes while moving conditional fragments into cn() calls.
src/pages/Chat/ChatRoom.tsx (1)

124-149: 메시지 메타 영역도 토큰/시맨틱 타이포로 맞춰주세요.

버블 배경은 bg-info-100으로 정리됐는데, 같은 블록의 text-xs, text-sm, text-[10px], text-[#4B9FE1]는 다시 하드코딩입니다. sender name / unread / time도 theme color와 semantic typography 유틸로 맞춰두면 이번 레이아웃 변경이 더 일관됩니다.
As per coding guidelines, "Prioritize color tokens from src/styles/theme.css (indigo-, blue-, background, primary, etc.)" and "Use semantic typography utilities (text-h1 through text-h5, text-sub1 through text-sub4, text-body1 through text-body3, text-cap1 through text-cap2) from src/styles/theme.css".

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Chat/ChatRoom.tsx` around lines 124 - 149, Replace hardcoded
typography and color classes in the ChatRoom message meta block with semantic
typography and theme color tokens: remove usages of text-xs, text-sm,
text-[10px], and text-[`#4B9FE1`] and replace them with the appropriate semantic
utilities from src/styles/theme.css (e.g., text-sub4/text-body3/text-cap2) and
theme color tokens (indigo-*, blue-*, primary, background) so the sender name
(message.senderName), message bubble (the div wrapping LinkifiedText), unread
badge (message.unreadCount) and timestamp (formatTime(message.createdAt)) all
use consistent tokenized classes rather than hardcoded values; update the
className strings on the elements that render senderName, the bubble div, the
unread count span, and the time span accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/layout/Header/components/ChatHeader.tsx`:
- Around line 35-36: The button rendering the HamburgerIcon in ChatHeader lacks
an accessible name; update the button (the one with onClick={openSidebar} inside
the ChatHeader component) to include an appropriate accessible label (e.g., add
aria-label="채팅방 정보 열기" or a translated equivalent) so screen readers can
announce its purpose, and ensure any existing accessibility attributes (role,
title) remain consistent with this label.
- Around line 73-74: The participant list's scroll container in ChatHeader (the
div with class "flex flex-col gap-3 overflow-y-auto") lacks flex sizing so its
height can be constrained by an ancestor with overflow-hidden; update that
element (in ChatHeader.tsx) to include flex-1 and min-h-0 (e.g., "flex flex-col
flex-1 min-h-0 gap-3 overflow-y-auto") so the list can grow and scroll correctly
when clubMembers is long.

---

Nitpick comments:
In `@src/components/layout/Header/components/ChatHeader.tsx`:
- Around line 40-49: The overlay and drawer divs in ChatHeader.tsx currently
build Tailwind classes with template literals; change them to use the cn()
utility to merge classes conditionally instead (import cn from the utils
module), e.g., replace the className expressions that depend on the open boolean
for the overlay (pointer-events/bg-black variants) and the drawer
(translate-x-0/translate-x-full and other static classes) with cn(...) calls
that pass static class strings and conditional objects/expressions keyed on
open; keep the same onClick handler (closeSidebar) and preserve all static
classes while moving conditional fragments into cn() calls.

In `@src/pages/Chat/ChatRoom.tsx`:
- Around line 124-149: Replace hardcoded typography and color classes in the
ChatRoom message meta block with semantic typography and theme color tokens:
remove usages of text-xs, text-sm, text-[10px], and text-[`#4B9FE1`] and replace
them with the appropriate semantic utilities from src/styles/theme.css (e.g.,
text-sub4/text-body3/text-cap2) and theme color tokens (indigo-*, blue-*,
primary, background) so the sender name (message.senderName), message bubble
(the div wrapping LinkifiedText), unread badge (message.unreadCount) and
timestamp (formatTime(message.createdAt)) all use consistent tokenized classes
rather than hardcoded values; update the className strings on the elements that
render senderName, the bubble div, the unread count span, and the time span
accordingly.

In `@src/pages/Club/Application/clubFeePage.tsx`:
- Line 62: Replace the hardcoded background and text hex colors on the Card
component with theme token classes: update the Card's className (the JSX element
rendered by Card in clubFeePage.tsx) to remove bg-[`#fefce8`] and text-[`#713f11`]
and use the appropriate tokens from src/styles/theme.css (e.g., background-*,
primary-*, indigo-*, blue-* or the designated banner tokens) so the banner uses
the theme color tokens instead of inline hex values; keep border-sub-200 and
existing layout classes intact.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 30fd2f89-f17a-4849-99b6-c8ebb591c383

📥 Commits

Reviewing files that changed from the base of the PR and between 0669f56 and a1f7aa3.

📒 Files selected for processing (3)
  • src/components/layout/Header/components/ChatHeader.tsx
  • src/pages/Chat/ChatRoom.tsx
  • src/pages/Club/Application/clubFeePage.tsx

Comment thread src/components/layout/Header/components/ChatHeader.tsx Outdated
Comment thread src/components/layout/Header/components/ChatHeader.tsx Outdated
@ff1451 ff1451 merged commit 3fcadc0 into develop Mar 9, 2026
2 checks passed
@ff1451 ff1451 deleted the 172-feat-채팅-UI-개선-및-회원가입-문의하기-카카오-연결 branch April 7, 2026 09:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant