From 08f17316e9f6cbdefbcabd813ca258e66d858aaf Mon Sep 17 00:00:00 2001
From: hyejun <hyejunkkim228@gmail.com>
Date: Tue, 17 Feb 2026 01:11:49 -0500
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20svg=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/bell-off.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/assets/svg/bell-off.svg

diff --git a/src/assets/svg/bell-off.svg b/src/assets/svg/bell-off.svg
new file mode 100644
index 00000000..5e7d4408
--- /dev/null
+++ b/src/assets/svg/bell-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 17V18C9 19.6569 10.3431 21 12 21C13.6569 21 15 19.6569 15 18V17M9 17L15 17M9 17L5.00022 17.0002C4.48738 17.0002 4.06449 16.6141 4.00673 16.1168L4 15.9998V15.4141C4 15.1489 4.10544 14.8949 4.29297 14.7073L4.80371 14.1963C4.92939 14.0706 5 13.9003 5 13.7225V9.99986C5 8.15821 5.7112 6.48267 6.87393 5.23291M15 17L18.9999 17M5 3L21 19M18.9995 12.999L19.0004 10C19.0004 6.13402 15.8665 3 12.0005 3L11.7598 3.00406C10.9548 3.03125 10.1845 3.19404 9.4707 3.47081" stroke="#323532" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 9cfce9455eaeef525d47b527f68508aa72b50d80 Mon Sep 17 00:00:00 2001
From: hyejun <hyejunkkim228@gmail.com>
Date: Tue, 17 Feb 2026 01:12:11 -0500
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=95=8C=EB=A6=BC=20=EB=81=84=EA=B8=B0=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=EC=8B=9C=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chat/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index a51b60b9..89b0b979 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -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() {
@@ -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">

From 3330f305bf6cfe7a340e5f74973e251895e870fb Mon Sep 17 00:00:00 2001
From: hyejun <hyejunkkim228@gmail.com>
Date: Tue, 17 Feb 2026 01:20:15 -0500
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EB=AA=A9=EC=B0=A8=20=EC=97=B4?=
 =?UTF-8?q?=EB=A6=B4=EC=8B=9C=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/Header/components/ChatHeader.tsx   | 76 ++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx
index ecee837a..1489508f 100644
--- a/src/components/layout/Header/components/ChatHeader.tsx
+++ b/src/components/layout/Header/components/ChatHeader.tsx
@@ -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>
+          </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" />
+                    <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>
     </>
   );
 }