feat: 채팅 페이지 리디자인#252
Merged
ParkSungju01 merged 7 commits intodevelopfrom Apr 1, 2026
Hidden character warning
The head ref may contain hidden characters: "248-feat-\ucc44\ud305\ubc29-\ub9ac\ub514\uc790\uc778-\ubc18\uc601"
Merged
Conversation
Closed
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Walkthrough채팅 헤더와 채팅 목록 관련 UI가 변경되었습니다. ChatHeader의 고정 높이와 타이포그래피가 조정되고 그룹 채팅일 때 참여자 수를 조건부로 표시하도록 JSX가 변경되었습니다. 새로운 ChatListHeader 컴포넌트가 추가되어 Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
src/components/layout/Header/components/ChatHeader.tsx (1)
31-31: 시맨틱 타이포그래피 토큰 사용 권장
text-[16px]대신theme.css에 정의된 타이포그래피 토큰(text-body1,text-sub1등) 사용을 권장합니다.🤖 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` at line 31, In ChatHeader component update the span that currently uses the utility class text-[16px] (span rendering chatRoom?.roomName) to use the semantic typography token defined in theme.css (for example text-body1 or text-sub1) so the component adheres to design tokens; replace the literal size class with the token class name and ensure any required token exists in theme.css (add it if missing) and update tests/styles that reference the old class.src/components/layout/Header/components/ChatListHeader.tsx (1)
13-13: 제목 텍스트는 타이포그래피 토큰 사용을 권장합니다.Line 13의
text-[16px] font-semibold대신 프로젝트 typography token(text-h*,text-sub*,text-body*,text-cap*) 사용이 일관성에 더 좋습니다.As per coding guidelines
**/*.{ts,tsx}: Use typography tokens (text-h1throughtext-h5,text-sub1throughtext-sub4,text-body1throughtext-body3,text-cap1throughtext-cap2) fromsrc/styles/theme.css.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/layout/Header/components/ChatListHeader.tsx` at line 13, Replace the hardcoded utility classes in the span inside ChatListHeader (the element with className "px-2 py-4 text-[16px] font-semibold") with the project's typography token and keep spacing utilities; specifically remove "text-[16px] font-semibold" and use the appropriate token from the theme (e.g., text-sub1 or text-body1 depending on intended hierarchy) so the span becomes "px-2 py-4 <typography-token>" to follow the typography token convention (text-h*, text-sub*, text-body*, text-cap*).src/pages/Chat/index.tsx (1)
204-204: 배경색은 테마 토큰 클래스로 맞춰주세요.Line 204의
bg-gray-100대신src/styles/theme.css기반 토큰(bg-background또는 정의된 토큰) 사용을 권장합니다.As per coding guidelines
**/*.{ts,tsx}: Prioritize color tokens fromsrc/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/Chat/index.tsx` at line 204, The container div in the Chat component uses a hardcoded Tailwind color class `bg-gray-100`; replace it with the theme token class (e.g., `bg-background` or the token defined in src/styles/theme.css) so the background follows the design tokens. Update the className on the div inside the Chat component (the element with "flex min-h-full min-w-full flex-col overflow-y-auto...") to use the theme token instead of `bg-gray-100`, and verify the token class is exported/available in your global styles so the component picks up the correct color token at runtime.
🤖 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`:
- Line 32: The span that renders the member count in the ChatHeader component
uses invalid Tailwind classes ("text-#344352" and "translate-y-0.45"); update
that className (in the ChatHeader component around the expression isGroup &&
<span ...>{clubMembers.length}</span>) to use correct arbitrary-value syntax
(e.g., text-[color:...] and translate-y-[0.45rem]) or, preferably, replace the
color with the project's design token from src/styles/theme.css (e.g.,
text-[color:var(--your-token)] or the semantic typography utility like
text-body1) and keep translate using square-bracket syntax
(translate-y-[0.45rem]) so Tailwind recognizes the classes.
- Line 32: The header can briefly show "0" because clubMembers is an empty array
while its query is loading; update ChatHeader to check the loading state or only
render the count when clubMembers.length > 0 (or when a clubMembersIsLoading
flag is false) alongside the existing isGroup check—locate the JSX that renders
{isGroup && <span ...>{clubMembers.length}</span>} and change the condition to
include the loader flag or clubMembers.length > 0 so the count is not shown
until real data is available.
In `@src/components/layout/Header/components/ChatListHeader.tsx`:
- Around line 15-19: The Search and AddCircle icon buttons in ChatListHeader are
focusable but have no actions; update the <ChatListHeader> component to mark
these inert controls as disabled until behavior is implemented by adding the
disabled attribute (or aria-disabled="true" for non-button elements) and ensure
they are not keyboard-activatable (remove onClick or prevent default) while
keeping accessible labels (aria-label). Specifically, modify the button elements
rendering the <Search /> and <AddCircle /> icons to include disabled (or
aria-disabled="true" if you must keep a non-button element), adjust styling for
the disabled state, and keep the existing aria-labels so screen readers see the
state.
In `@src/pages/Chat/index.tsx`:
- Around line 96-101: The visible unread badge currently has aria-hidden="true"
so screen readers can't see the count; keep the visual span (the element
rendering {room.unreadCount > 300 ? '300+' : room.unreadCount}) for sighted
users but add a sibling hidden text span (className="sr-only") that announces
the unread count (e.g. `{room.unreadCount > 300 ? '300+ unread messages' :
`${room.unreadCount} unread messages`}`) so assistive tech receives the
information; keep aria-hidden on the decorative badge span if desired and place
the sr-only span next to it (referencing the span that renders
room.unreadCount).
---
Nitpick comments:
In `@src/components/layout/Header/components/ChatHeader.tsx`:
- Line 31: In ChatHeader component update the span that currently uses the
utility class text-[16px] (span rendering chatRoom?.roomName) to use the
semantic typography token defined in theme.css (for example text-body1 or
text-sub1) so the component adheres to design tokens; replace the literal size
class with the token class name and ensure any required token exists in
theme.css (add it if missing) and update tests/styles that reference the old
class.
In `@src/components/layout/Header/components/ChatListHeader.tsx`:
- Line 13: Replace the hardcoded utility classes in the span inside
ChatListHeader (the element with className "px-2 py-4 text-[16px]
font-semibold") with the project's typography token and keep spacing utilities;
specifically remove "text-[16px] font-semibold" and use the appropriate token
from the theme (e.g., text-sub1 or text-body1 depending on intended hierarchy)
so the span becomes "px-2 py-4 <typography-token>" to follow the typography
token convention (text-h*, text-sub*, text-body*, text-cap*).
In `@src/pages/Chat/index.tsx`:
- Line 204: The container div in the Chat component uses a hardcoded Tailwind
color class `bg-gray-100`; replace it with the theme token class (e.g.,
`bg-background` or the token defined in src/styles/theme.css) so the background
follows the design tokens. Update the className on the div inside the Chat
component (the element with "flex min-h-full min-w-full flex-col
overflow-y-auto...") to use the theme token instead of `bg-gray-100`, and verify
the token class is exported/available in your global styles so the component
picks up the correct color token at runtime.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6730e898-5dc4-4449-8577-6499a89ad983
⛔ Files ignored due to path filters (1)
src/assets/svg/add_circle.svgis excluded by!**/*.svg,!src/assets/**and included by**
📒 Files selected for processing (8)
src/components/layout/Header/components/ChatHeader.tsxsrc/components/layout/Header/components/ChatListHeader.tsxsrc/components/layout/Header/headerConfig.tssrc/components/layout/Header/index.tsxsrc/components/layout/Header/types.tssrc/components/layout/index.tsxsrc/pages/Chat/ChatRoom.tsxsrc/pages/Chat/index.tsx
Comment on lines
+15
to
+19
| <button type="button" aria-label="검색" className="size-6 shrink-0"> | ||
| <Search /> | ||
| </button> | ||
| <button type="button" aria-label="채팅방 추가" className="size-6 shrink-0"> | ||
| <AddCircle /> |
Contributor
There was a problem hiding this comment.
동작 없는 액션 버튼은 상태를 명확히 해주세요.
Line 15-19 버튼이 포커스 가능하지만 동작이 없어 사용자(특히 키보드/보조기기)에게 혼란을 줄 수 있습니다. 기능 연결 전에는 disabled/aria-disabled 처리 권장합니다.
예시 수정
- <button type="button" aria-label="검색" className="size-6 shrink-0">
+ <button type="button" aria-label="검색" disabled aria-disabled="true" className="size-6 shrink-0">
<Search />
</button>
- <button type="button" aria-label="채팅방 추가" className="size-6 shrink-0">
+ <button type="button" aria-label="채팅방 추가" disabled aria-disabled="true" className="size-6 shrink-0">
<AddCircle />
</button>As per coding guidelines src/components/**: 접근성(aria-*, role, 키보드 탐색)이 적절히 처리되는지.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <button type="button" aria-label="검색" className="size-6 shrink-0"> | |
| <Search /> | |
| </button> | |
| <button type="button" aria-label="채팅방 추가" className="size-6 shrink-0"> | |
| <AddCircle /> | |
| <button type="button" aria-label="검색" disabled aria-disabled="true" className="size-6 shrink-0"> | |
| <Search /> | |
| </button> | |
| <button type="button" aria-label="채팅방 추가" disabled aria-disabled="true" className="size-6 shrink-0"> | |
| <AddCircle /> | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/layout/Header/components/ChatListHeader.tsx` around lines 15 -
19, The Search and AddCircle icon buttons in ChatListHeader are focusable but
have no actions; update the <ChatListHeader> component to mark these inert
controls as disabled until behavior is implemented by adding the disabled
attribute (or aria-disabled="true" for non-button elements) and ensure they are
not keyboard-activatable (remove onClick or prevent default) while keeping
accessible labels (aria-label). Specifically, modify the button elements
rendering the <Search /> and <AddCircle /> icons to include disabled (or
aria-disabled="true" if you must keep a non-button element), adjust styling for
the disabled state, and keep the existing aria-labels so screen readers see the
state.
Comment on lines
+96
to
+101
| <span | ||
| aria-hidden="true" | ||
| className="bg-primary-500 flex h-4 min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[10px] text-white" | ||
| > | ||
| {room.unreadCount > 300 ? '300+' : room.unreadCount} | ||
| </span> |
Contributor
There was a problem hiding this comment.
읽지 않은 메시지 수를 스크린리더에도 노출해주세요.
Line 97에 aria-hidden="true"만 있어 시각 외 사용자에게 unread 정보가 전달되지 않습니다. 숨김 텍스트(sr-only)를 함께 두는 쪽이 안전합니다.
예시 수정
{hasUnreadMessage && (
<span className="shrink-0">
+ <span className="sr-only">읽지 않은 메시지 {room.unreadCount > 300 ? '300+' : room.unreadCount}개</span>
<span
aria-hidden="true"
className="bg-primary-500 flex h-4 min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[10px] text-white"
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Chat/index.tsx` around lines 96 - 101, The visible unread badge
currently has aria-hidden="true" so screen readers can't see the count; keep the
visual span (the element rendering {room.unreadCount > 300 ? '300+' :
room.unreadCount}) for sighted users but add a sibling hidden text span
(className="sr-only") that announces the unread count (e.g. `{room.unreadCount >
300 ? '300+ unread messages' : `${room.unreadCount} unread messages`}`) so
assistive tech receives the information; keep aria-hidden on the decorative
badge span if desired and place the sr-only span next to it (referencing the
span that renders room.unreadCount).
ff1451
requested changes
Mar 31, 2026
Collaborator
ff1451
left a comment
ff1451
left a comment
There was a problem hiding this comment.
고생하셨습니다!
제가 겹치는 부분 수정한 게 좀 있어서 충돌이 있는데 우선 수정해보시고 어려움이 있다면 질문주세요
리뷰 남긴 부분은 로직적인 것보다 기본값, 컨벤션 관련이라 읽어보시면서 수정 부탁드립니다!
| <span className="truncate text-[18px] leading-5 font-normal text-indigo-700">{chatRoom?.roomName ?? ''}</span> | ||
| <div className="flex min-w-0 items-center gap-1"> | ||
| <span className="truncate text-[16px] leading-5 font-bold text-indigo-700">{chatRoom?.roomName ?? ''}</span> | ||
| {isGroup && <span className="text-#344352 translate-y-0.45 text-[13px]">{clubMembers.length}</span>} |
Collaborator
There was a problem hiding this comment.
Suggested change
| {isGroup && <span className="text-#344352 translate-y-0.45 text-[13px]">{clubMembers.length}</span>} | |
| {isGroup && <span className="text-[#344352] translate-y-0.45 text-[13px]">{clubMembers.length}</span>} |
지금 상태면 색상 적용이 안될 것 같아요!
translate-y-0.45 이거는 적용하신 이유가 있을까요?
Contributor
Author
There was a problem hiding this comment.
채팅방이름과 사람수 표시가 위치가 안맞는것같아 사람 수를 조금 밑으로 내리려고 적용했었습니다!
Collaborator
There was a problem hiding this comment.
채팅방 제목 부분은 line-height(tailwind 기준 leading)이 20px로 잡혀있는데 사람 수 부분은 leading이 별도로 지정되어 있지 않아서 텍스트 박스의 높이가 차이나서 그렇게 됐을 것 같아요.
이 부분 조정하고 나면 중앙 정렬될 것 같아서 한번 해보시고 멘션 주세요
ff1451
added a commit
that referenced
this pull request
Apr 1, 2026
* 205 feat 이미지 전처리 기능 구현 (#206) * feat: 전처리 로직 및 WebWorker 구현 * feat: 전처리 적용 및 preview 동시성 제어 로직 추가 * refactor: 리뷰 반영 * [hotfix] 하단바 너비 수정 (#208) * hotfix: 하단바 너비 수정 * chore: 불필요한 값 제거 * refactor: 고정 gap 제거 * Reapply "[feat] 광고 배너 추가 (#200)" This reverts commit c51ec85. * [feat] 하단바 리디자인 (#213) * chore: asset 추가 * feat: 하단바 리디자인 반영 및 레이아웃 수정 * [refactor] 광고 카드 레이아웃 밀림 수정 (#215) * refactor: 광고 개수 측정 시기 변경 및 기본값 제거 * feat: 스켈레톤 UI 추가 * feat: 인앱 알림 페이지 및 토스트 구현 (#217) * feat: 알림 API 및 스트림 기반 추가 * feat: 인앱 알림 레이어 추가 * feat: 알림 페이지 및 헤더 진입 구현 * fix: 알림 스트림 401 재시도 조건 정리 * fix: 알림 목록 이동 차단 제거 * refactor: 알림 공용 훅 위치 정리 * fix: 알림 재연결 캐시 동기화 추가 * fix: 알림 목록 토스트 큐 누적 방지 * fix: 알림 읽음 카운트 감소 조건 보강 * [refactor] 도메인별 TanStack Query 훅 정리 (#219) * chore: pwa용 이미지 제거 * refactor: auth 도메인 쿼리와 뮤테이션 정리 * refactor: council과 schedule 조회 훅 정리 * refactor: chat과 notification 캐시 처리 정리 * refactor: club 조회와 지원 플로우 정리 * refactor: manager 도메인 캐시 처리 정리 * refactor: studyTime 도메인 쿼리와 뮤테이션 정리 * refactor: 광고와 업로드 도메인 훅 정리 * [refactor] mutaton query 및 hook 추가 수정 (#221) * refactor: auth와 user myInfo 훅 정리 * refactor: club과 schedule 조회 훅 정리 * refactor: chat과 notification 훅 구조 정리 * refactor: club 지원 뮤테이션 훅 정리 * refactor: manager 뮤테이션 훅 구조 정리 * refactor: mutation 훅 cache 정리 * refactor: 컨벤션 통일 * refactor: isRead 조건 정리 * fix: 채팅 스크롤 문제 수정 * refactor: 불필요한 코드 제거 * [fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정 (#223) * chore: 가공용 safeArea 변수 선언 * refactor: 고정 패딩 값 수정 및 safeArea 적용 변경 * feat: 키보드 활성화 감지 및 safeArea 적용 여부 기능 추가 * refactor: 매직넘버 상수화 및 가로모드 처리 * [fix] 키보드 활성화 시 화면 흔들림 문제 수정 (#225) * refactor: 채팅 viewport 훅 네이밍 정리 * refactor: viewport 높이 잠금 훅 적용 시점 조정 * [fix] 키보드 활성화 시 채팅 화면 전체가 흔들리는 문제 수정 (#227) * refactor: 채팅 viewport 훅 네이밍 정리 * refactor: viewport 높이 잠금 훅 적용 시점 조정 * fix: 채팅 화면 스크롤 잠금으로 키보드 흔들림 완화 * fix: 입력 포커스 중 viewport offset 고정 (#229) * fix: 문서 루트 스크롤 잠금으로 빈 공간 잔류 방지 (#232) * [fix] 키보드 활성화 시 채팅 화면 상단 고정이 깨지고 빈 공간이 남는 문제 수정 (#234) * fix: 채팅 화면 상단 고정 깨짐과 빈 공간 잔류 수정 * refactor: 라우트 조건 수정 * fix: 문서 스크롤 위치 감지 보강 * refactor: 입력 요소 판별 유틸과 스크롤 주석 정리 * [fix] 키보드 활성화 시 채팅 화면에서 문서 스크롤이 발생하는 문제 수정 (#236) * fix: 채팅 문서 스크롤 제스처 차단 * fix: 입력 요소 터치 동작 예외 처리 * [fix] 키보드 활성화 시 채팅방이 마지막 메시지 위치를 유지하지 못하는 문제 수정 (#238) * fix: 키보드 활성화 시 채팅 하단 정렬 유지 * refactor: 채팅 리사이즈 관찰 안정화 * fix: mypage 연계 약관 페이지 뒤로가기 수정 (#240) * refactor: alias import 경로 정리 * fix: query 설정과 suspense 분기 정리 * refactor: 관리자 화면 스타일 유틸 정리 * fix: 이미지 전처리 예외 처리 보강 * fix: 헤더와 회비 화면 동작 정리 * fix: 공통 유틸 안정성 개선 * fix: 이미지 전처리 실패 처리를 보정 * fix: 모집 공고 저장 후 설정 반영 순서 조정 * fix: 부원 직책 변경 실패 처리를 보강 * fix: 약관 링크 접근성을 개선 * fix: 공통 쿼리와 유틸 안정성을 보완 * [feat] 동적 버전 정보 표시 구현 (#211) * feat: 동적 버전 정보 표시 구현 * refactor: 버전 정보 미 존재시 v 표시 제거 * [feat] 메인화면 동아리 카드 디자인 수정 반영 (#242) * feat: 메인화면 동아리 카드 디자인 수정 * chore: 하단바 아이콘 수정 * refactor: 코드래빗 리뷰 반영 * refactor: and 연산자로 변경 * apiClient 코드 중복 제거 및 네이티브 브릿지 인증 동기화 중앙화 (#244) * refactor: apiClient 코드 중복 제거 및 네이티브 브릿지 인증 동기화 중앙화 * refactor: body 직렬화 가드를 plain object/array로 한정 * fix: body 읽기 중 AbortError가 ParseError로 오분류되는 문제 수정 * [refactor] 에러 처리 유틸 및 utils 구조 정리 (#246) * refactor: 에러 처리 유틸 및 공통 토스트 흐름 정리 * refactor: utils 폴더 구조를 역할별로 정리 * refactor: 코드래빗 리뷰 반영 * refactor: 코드래빗 리뷰 반영 * Update src/pages/Home/components/HomeClubSection.tsx * fix: 인증 세션 복구 흐름 정리 * fix: 홈 동아리 카드 레이아웃 정리 * [feat] 총동아리 페이지 리디자인 및 하단 오버레이 정리 (#249) * refactor: 하단 오버레이 처리 공통화 * feat: 총동아리 페이지와 헤더 리디자인 반영 * fix: 채팅 하단 여백과 외부 링크 속성 수정 * refactor: 총동아리 헤더 설정 정리 * fix: 총동아리 상세 접근성과 스타일 보완 * [feat] 마이페이지 관리자 카드 분리 및 채팅 미확인 배지 반영 (#251) * feat: 하단 채팅 배지 표시 및 조회 조건 보완 * refactor: 관리자 정보 카드 컴포넌트 분리 * feat: 채팅 페이지 리디자인 (#252) * feat: 채팅 페이지 리디자인 * fix:tailwind 문법 수정 * fix: 코드 수정 * fix: 폰트 색상 및 위치 수정 * fix: 채팅방 사람수 정렬 * fix: 오타 수정 * chore: conflict 해결 중 누락된 부분 수정 * [refactor] 광고 렌더링 조건 수정 (#254) * refactor: 광고 렌더링 조건 수정 * docs: 문서명 변경 --------- Co-authored-by: 박성주 <145267904+ParkSungju01@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✨ 요약
😎 해결한 이슈
✅ 검증
pnpm lintSummary by CodeRabbit
새로운 기능
스타일
접근성