Skip to content

[feat] 채팅 목차 알림 상태 추가 #113

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

Merged
hyejun0228 merged 4 commits into from
Feb 17, 2026
+51 −34
Merged

[feat] 채팅 목차 알림 상태 추가 #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08f1731
chore: svg 추가
hyejun0228 Feb 17, 2026
9cfce94
feat: 채팅목록 알림 끄기 설정시 UI 추가
hyejun0228 Feb 17, 2026
3330f30
feat: 목차 열릴시 애니메이션 추가
hyejun0228 Feb 17, 2026
072afd7
Merge branch 'develop' into 112-feat-채팅-목차-알림-상태-추가
hyejun0228 Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/assets/svg/bell-off.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 42 additions & 34 deletions src/components/layout/Header/components/ChatHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,45 +39,53 @@ function ChatHeader() {
</button>
</header>

{open && (
<div className="fixed inset-0 z-50 bg-black/30" onClick={() => setOpen(false)}>
<div className="absolute top-0 right-0 h-full w-72 bg-white p-4" onClick={(e) => e.stopPropagation()}>
<div className="mb-6 flex items-center justify-between border-b pb-4">
<span className="text-sm font-medium">알림</span>
<div
className={`fixed inset-0 z-50 transition-colors duration-300 ${
open ? 'pointer-events-auto bg-black/30' : 'pointer-events-none bg-black/0'
}`}
onClick={() => setOpen(false)}
>
<div
className={`absolute top-0 right-0 h-full w-72 transform bg-white p-4 transition-transform duration-300 ease-in-out ${
open ? 'translate-x-0' : 'translate-x-full'
}`}
onClick={(e) => e.stopPropagation()}
>
<div className="mb-6 flex items-center justify-between border-b pb-4">
<span className="text-sm font-medium">알림</span>

<button
onClick={() => toggleMute()}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
isMuted ? 'bg-gray-300' : 'bg-primary'
<button
onClick={() => toggleMute()}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
isMuted ? 'bg-gray-300' : 'bg-primary'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
isMuted ? 'translate-x-1' : 'translate-x-6'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
isMuted ? 'translate-x-1' : 'translate-x-6'
}`}
/>
</button>
</div>
/>
</button>
Comment on lines +57 to +68
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 17, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add accessibility attributes to the toggle button.

The toggle switch should have an accessible label and appropriate ARIA attributes to indicate its purpose and current state to screen reader users.

♿ Proposed accessibility fix 
             <button
               onClick={() => toggleMute()}
+              aria-label="알림"
+              aria-pressed={!isMuted}
+              role="switch"
               className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                 isMuted ? 'bg-gray-300' : 'bg-primary'
               }`}
             >
📝 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
onClick={() => toggleMute()}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
isMuted ? 'bg-gray-300' : 'bg-primary'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
isMuted ? 'translate-x-1' : 'translate-x-6'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
isMuted ? 'translate-x-1' : 'translate-x-6'
}`}
/>
</button>
</div>
/>
</button>
<button
onClick={() => toggleMute()}
aria-label="알림"
aria-pressed={!isMuted}
role="switch"
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
isMuted ? 'bg-gray-300' : 'bg-primary'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
isMuted ? 'translate-x-1' : 'translate-x-6'
}`}
/>
</button>
🤖 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 57 - 68,
The toggle button in ChatHeader lacks accessibility attributes; update the
button (the element that calls toggleMute and reads isMuted) to expose its role
and state by adding an accessible name and ARIA state: set a dynamic aria-label
like aria-label={isMuted ? 'Unmute notifications' : 'Mute notifications'} and
include aria-pressed={isMuted} (or role="switch" with aria-checked={isMuted} if
you prefer switch semantics); also mark the decorative inner <span> as
aria-hidden="true" so screen readers focus on the button state only.

</div>

{isGroup && (
<>
<div className="mb-4 text-sm font-bold">참여자 {clubMembers.length}명</div>
<div className="flex flex-col gap-3">
{clubMembers.map((member) => (
<div key={member.userId} className="flex items-center gap-3">
<img src={member.imageUrl} className="h-8 w-8 rounded-full" />
<div className="flex flex-col">
<span className="text-sm font-medium">{member.name}</span>
<span className="text-xs text-gray-400">{member.studentNumber}</span>
</div>
{isGroup && (
<>
<div className="mb-4 text-sm font-bold">참여자 {clubMembers.length}명</div>
<div className="flex flex-col gap-3">
{clubMembers.map((member) => (
<div key={member.userId} className="flex items-center gap-3">
<img src={member.imageUrl} className="h-8 w-8 rounded-full" />
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 17, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add alt attribute to the member image.

The <img> element is missing an alt attribute, which is required for accessibility. Screen readers need this to describe the image content.

♿ Proposed fix 
-                    <img src={member.imageUrl} className="h-8 w-8 rounded-full" />
+                    <img src={member.imageUrl} alt={member.name} className="h-8 w-8 rounded-full" />
📝 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
<img src={member.imageUrl} className="h-8 w-8 rounded-full" />
<img src={member.imageUrl} alt={member.name} className="h-8 w-8 rounded-full" />
🤖 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 77, The img
in ChatHeader.tsx rendering member.imageUrl is missing an alt attribute; update
the <img> element (the one using member.imageUrl and className="h-8 w-8
rounded-full") to include an accessible alt value such as member.name or
member.displayName with a sensible fallback (e.g., `${member.name || 'Member'}
avatar`) so screen readers get a descriptive label.

<div className="flex flex-col">
<span className="text-sm font-medium">{member.name}</span>
<span className="text-xs text-gray-400">{member.studentNumber}</span>
</div>
))}
</div>
</>
)}
</div>
</div>
))}
</div>
</>
)}
</div>
)}
</div>
</>
);
}
Expand Down
6 changes: 6 additions & 0 deletions src/pages/Chat/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Link } from 'react-router-dom';
import BellOfIcon from '@/assets/svg/bell-off.svg';
import useChat from './hooks/useChat';

function ChatListPage() {
Expand Down Expand Up @@ -44,6 +45,11 @@ function ChatListPage() {
<div className="text-sm leading-4 font-bold text-indigo-700">{room.roomName}</div>

{isGroup && <span className="bg-primary text-cap2 rounded px-1.5 py-0.5 text-white">단체</span>}
{room.isMuted && (
<span className="text-xs text-gray-400">
<BellOfIcon className="h-4 w-4" />
</span>
)}
</div>

<div className="shrink-0 text-xs leading-3.5 font-medium text-indigo-300">
Expand Down