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

[hyejun0228]

premember 작업 이후 머지 예정입니다

Summary by CodeRabbit

Release Notes

• New Features

  • Muted chat rooms now display a visual mute indicator icon next to the room name for quick identification.

• Style

  • Enhanced the notification panel with improved CSS animations and smooth transitions, providing better visual feedback when opening and closing the panel.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR refactors the ChatHeader notification panel overlay to use CSS-based visibility toggling with transitions instead of conditional mounting, while adding a muted room indicator icon in the chat list.

Changes

Cohort / File(s)	Summary
ChatHeader Overlay Refactoring src/components/layout/Header/components/ChatHeader.tsx	Replaces conditional rendering of the notification panel with a consistently mounted overlay wrapper that toggles visibility via CSS transforms and pointer-events. Adds transition-enabled classes for animated transitions while preserving all existing functional behavior (mute toggle, open/close controls, group member rendering).
Chat List Mute Indicator src/pages/Chat/index.tsx	Imports BellOfIcon and conditionally renders it next to room labels when room.isMuted is truthy, providing a visual indicator for muted rooms in the chat list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• BCSDLab/KONECT_FRONT_END#108: Added initial isMuted and toggleMute support that this PR leverages for notification overlay and chat list mute indicators.

Poem

🐰 A whisper through the warren fair,
The overlay now glides with care,
With transitions smooth and bells that mute,
The UI dances—oh how cute! 🔔✨

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Merge Conflict Detection	⚠️ Warning	⚠️ Unable to check for merge conflicts: Invalid branch name format

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding notification status indicators to the chat list. The changes show adding a bell-off icon for muted rooms and updating the notification panel structure.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 112-feat-채팅-목차-알림-상태-추가

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch 112-feat-채팅-목차-알림-상태-추가
• Create stacked PR with resolved conflicts
• Post resolved changes as copyable diffs in a comment

---

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/pages/Chat/index.tsx (1)

48-52: Consider simplifying the icon wrapper and verify SVG color inheritance.

The wrapping <span> with text-xs text-gray-400 may be unnecessary if you apply classes directly to BellOfIcon. The text-gray-400 class only works if the SVG uses currentColor for its fill/stroke.

♻️ Simplified markup (if SVG uses currentColor)

                  {room.isMuted && (
-                    <span className="text-xs text-gray-400">
-                      <BellOfIcon className="h-4 w-4" />
-                    </span>
+                    <BellOfIcon className="h-4 w-4 text-gray-400" />
                  )}

🤖 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 48 - 52, The mute icon wrapper can be
simplified: remove the surrounding <span> used in the room.isMuted conditional
and apply sizing and color classes directly to the BellOfIcon component (refer
to the room.isMuted conditional and BellOfIcon usage in Chat/index.tsx); ensure
the BellOfIcon SVG uses currentColor for its fill/stroke or update the SVG to
accept className-based color (or alternatively pass an explicit fill/stroke
prop) so the text-gray-400 and h-4 w-4 styling applied to BellOfIcon correctly
controls its appearance.

🤖 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 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.
- Around line 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.

---

Nitpick comments:
In `@src/pages/Chat/index.tsx`:
- Around line 48-52: The mute icon wrapper can be simplified: remove the
surrounding <span> used in the room.isMuted conditional and apply sizing and
color classes directly to the BellOfIcon component (refer to the room.isMuted
conditional and BellOfIcon usage in Chat/index.tsx); ensure the BellOfIcon SVG
uses currentColor for its fill/stroke or update the SVG to accept
className-based color (or alternatively pass an explicit fill/stroke prop) so
the text-gray-400 and h-4 w-4 styling applied to BellOfIcon correctly controls
its appearance.

[coderabbitai]

⚠️ 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.

[coderabbitai]

⚠️ 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.