[feat] 알림설정 구현

[hyejun0228]

Summary by CodeRabbit

Release Notes

• New Features
  • Users can now mute and unmute notifications for individual chat rooms
  • Muted state is visually indicated in the chat interface
  • New notification settings section added to the header panel for managing notification preferences

[coderabbitai]

📝 Walkthrough

Walkthrough

This change introduces a mute feature for chat rooms by extending the Room entity with an isMuted property, implementing a toggleMute mutation hook that calls the chat API and invalidates the room query cache, and wiring the functionality to a UI button in the ChatHeader component.

Changes

Cohort / File(s)	Summary
Chat Entity src/apis/chat/entity.ts	Added isMuted: boolean property to the Room interface to track mute state.
Mute Mutation Hook src/pages/Chat/hooks/useChat.ts	Implemented toggleMute mutation that calls postChatMute API with error handling for missing chatRoomId/type, and invalidates room query cache on success.
Chat Header UI src/components/layout/Header/components/ChatHeader.tsx	Extended useChat hook return type to expose toggleMute, derived isMuted state from chatRoom, wired toggle button to toggleMute() mutation, and added notification ("알림") UI section with state-dependent styling.

Sequence Diagram

sequenceDiagram
    participant User
    participant ChatHeader
    participant useChat Hook
    participant Chat API
    participant Query Cache

    User->>ChatHeader: Click mute toggle button
    ChatHeader->>useChat Hook: Call toggleMute()
    useChat Hook->>useChat Hook: Validate chatRoomId & type
    alt Validation Failed
        useChat Hook-->>ChatHeader: Throw error
    else Validation Passed
        useChat Hook->>Chat API: POST /chat/mute (chatRoomId, type)
        Chat API-->>useChat Hook: Success response
        useChat Hook->>Query Cache: Invalidate chat rooms query
        Query Cache->>Query Cache: Refresh room list
        Query Cache-->>ChatHeader: Update with new isMuted state
        ChatHeader->>ChatHeader: Re-render with muted UI
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A mute button hops into place,
Rooms can whisper now with grace,
Cache refreshes, state aligned,
Quiet chats, perfectly designed! 🔇

🚥 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 '알림설정 구현' (notification settings implementation) directly corresponds to the core changes: adding isMuted property to Room, implementing toggleMute functionality, and creating mute toggle UI in ChatHeader.

_{✏️ 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 107-feat-알림-설정-페이지-구현

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch 107-feat-알림-설정-페이지-구현
• Create stacked PR with resolved conflicts
• Post resolved changes as copyable diffs in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

🧹 Nitpick comments (2)

src/pages/Chat/hooks/useChat.ts (1)

106-110: Consider adding optimistic updates or error handling for better UX.

Currently, if the mutation fails, the user has no feedback. You could optionally add an onError callback for error handling or implement optimistic updates using onMutate for a more responsive UI experience.

💡 Optional: Add optimistic update pattern

     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: chatQueryKeys.rooms(),
       });
     },
+    onError: (error) => {
+      // Consider showing a toast or error notification
+      console.error('Failed to toggle mute:', error);
+    },
   });

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Chat/hooks/useChat.ts` around lines 106 - 110, The mutation
currently only uses onSuccess to call queryClient.invalidateQueries in useChat
(the block with onSuccess -> queryClient.invalidateQueries({ queryKey:
chatQueryKeys.rooms() })); add an onError callback to surface failures (e.g.,
show toast/log and revert UI if needed) and optionally implement an optimistic
update using onMutate to update the cached rooms/room list immediately,
returning a context to rollback on onError and finalizing with onSettled or
onSuccess to re-sync via queryClient.invalidateQueries; update the mutation
definition in useChat.ts to include onMutate, onError, and onSettled handlers
referencing chatQueryKeys.rooms and the same queryClient instance.

src/components/layout/Header/components/ChatHeader.tsx (1)

48-59: Add accessibility attributes to the toggle button.

The toggle button is missing essential accessibility attributes for screen readers. Consider adding role="switch", aria-checked, and aria-label to make this control accessible.

♿ Proposed accessibility improvements

               <button
                 onClick={() => toggleMute()}
+                role="switch"
+                aria-checked={!isMuted}
+                aria-label="알림 설정"
                 className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                   isMuted ? 'bg-gray-300' : 'bg-primary'
                 }`}
               >

🤖 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 48 - 59,
The toggle button lacks ARIA attributes; update the button element (the one
invoking toggleMute and reading isMuted) to include role="switch", set
aria-checked to the boolean isMuted (or its inverse if the semantics differ),
and add a descriptive aria-label (e.g., "Mute notifications" or "Unmute
notifications" based on isMuted) so screen readers convey state and purpose;
ensure these attributes are kept in sync with the isMuted prop/state used by the
toggleMute handler.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/layout/Header/components/ChatHeader.tsx`:
- Around line 48-59: The toggle button lacks ARIA attributes; update the button
element (the one invoking toggleMute and reading isMuted) to include
role="switch", set aria-checked to the boolean isMuted (or its inverse if the
semantics differ), and add a descriptive aria-label (e.g., "Mute notifications"
or "Unmute notifications" based on isMuted) so screen readers convey state and
purpose; ensure these attributes are kept in sync with the isMuted prop/state
used by the toggleMute handler.

In `@src/pages/Chat/hooks/useChat.ts`:
- Around line 106-110: The mutation currently only uses onSuccess to call
queryClient.invalidateQueries in useChat (the block with onSuccess ->
queryClient.invalidateQueries({ queryKey: chatQueryKeys.rooms() })); add an
onError callback to surface failures (e.g., show toast/log and revert UI if
needed) and optionally implement an optimistic update using onMutate to update
the cached rooms/room list immediately, returning a context to rollback on
onError and finalizing with onSettled or onSuccess to re-sync via
queryClient.invalidateQueries; update the mutation definition in useChat.ts to
include onMutate, onError, and onSettled handlers referencing
chatQueryKeys.rooms and the same queryClient instance.