From 4194321954a61626418c5991352bda014d3eea50 Mon Sep 17 00:00:00 2001
From: Jeong Ha Seung <88266129+HA-SEUNG-JEONG@users.noreply.github.com>
Date: Tue, 20 Jan 2026 12:16:17 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=9D=BD=EC=9D=8C=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(service)/(my)/notification/page.tsx  | 12 ++++++++++-
 src/components/lists/notification-list.tsx    | 13 ++++++++----
 .../modals/notification-dropdown.tsx          | 21 +++++++++++++------
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/app/(service)/(my)/notification/page.tsx b/src/app/(service)/(my)/notification/page.tsx
index ffa3e4a7..cc99c2d1 100644
--- a/src/app/(service)/(my)/notification/page.tsx
+++ b/src/app/(service)/(my)/notification/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import { MemberNotificationResponse } from '@/api/openapi';
 import type { GetMemberNotificationsTopicTypeEnum } from '@/api/openapi/api/notification-api';
 import NotificationList from '@/components/lists/notification-list';
 import Button from '@/components/ui/button';
@@ -61,6 +62,12 @@ export default function NotificationPage() {
     readNotifications(ids);
   };
 
+  const handleNotificationClick = (notification: MemberNotificationResponse) => {
+    if (!notification.isRead) {
+      readNotifications([notification.id]);
+    }
+  };
+
   return (
     <div className="flex flex-col gap-300">
       {/* Header */}
@@ -104,7 +111,10 @@ export default function NotificationPage() {
         </div>
       </div>
 
-      <NotificationList notifications={notifications} />
+      <NotificationList
+        notifications={notifications}
+        onNotificationClick={handleNotificationClick}
+      />
 
       {/* Pagination */}
       <div className="mt-200">
diff --git a/src/components/lists/notification-list.tsx b/src/components/lists/notification-list.tsx
index 5670b155..dcc54a2a 100644
--- a/src/components/lists/notification-list.tsx
+++ b/src/components/lists/notification-list.tsx
@@ -25,17 +25,20 @@ const getBadgeColor = (
 
 interface NotificationListProps {
   notifications?: MemberNotificationResponse[];
+  onNotificationClick?: (notification: MemberNotificationResponse) => void;
 }
 
 export default function NotificationList({
   notifications,
+  onNotificationClick,
 }: NotificationListProps) {
   return (
     <ul>
       {notifications?.map((notification) => (
         <li
           key={notification.id}
-          className="border-bottom-border-default bg-background-default flex items-center justify-between border-b py-150"
+          className="border-bottom-border-default bg-background-default hover:bg-background-neutral-subtle flex cursor-pointer items-center justify-between border-b py-150"
+          onClick={() => onNotificationClick?.(notification)}
         >
           <div className="flex items-center gap-150">
             <Badge
@@ -50,9 +53,11 @@ export default function NotificationList({
               {notification.title}
             </span>
           </div>
-          <span className="font-designer-11r text-text-subtlest whitespace-nowrap">
-            {format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
-          </span>
+          <div className="flex items-center gap-100">
+            <span className="font-designer-11r text-text-subtlest whitespace-nowrap">
+              {format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
+            </span>
+          </div>
         </li>
       ))}
     </ul>
diff --git a/src/components/modals/notification-dropdown.tsx b/src/components/modals/notification-dropdown.tsx
index 53245faa..8a32181c 100644
--- a/src/components/modals/notification-dropdown.tsx
+++ b/src/components/modals/notification-dropdown.tsx
@@ -3,11 +3,12 @@
 import { DotIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { MemberNotificationResponse } from '@/api/openapi';
 import NotificationList from '@/components/lists/notification-list';
 
 import {
   useGetNotifications,
-  useHasNewNotification,
+  useReadNotifications,
 } from '@/hooks/queries/notification-api';
 import NotiIcon from 'public/icons/notifications_none.svg';
 import {
@@ -30,9 +31,14 @@ export default function NotificationDropdown() {
     size: 5,
     hasRead: false,
   });
-  const { data: newData } = useHasNewNotification();
 
-  const isRead = newData?.isRead;
+  const { mutate: readNotifications } = useReadNotifications();
+
+  const handleNotificationClick = (notification: MemberNotificationResponse) => {
+    if (!notification.isRead) {
+      readNotifications([notification.id]);
+    }
+  };
 
   const notifications =
     mode === 'all'
@@ -48,8 +54,8 @@ export default function NotificationDropdown() {
         <div className="relative cursor-pointer">
           <NotiIcon />
 
-          {!isRead && (
-            <DotIcon className="absolute -top-100 -left-100 fill-red-500 stroke-red-500" />
+          {totalUnreadCount !== undefined && totalUnreadCount > 0 && (
+            <DotIcon className="absolute -top-100 -right-100 fill-red-500 stroke-red-500" />
           )}
         </div>
       </DropdownMenuTrigger>
@@ -87,7 +93,10 @@ export default function NotificationDropdown() {
               </p>
             </div>
           ) : (
-            <NotificationList notifications={notifications} />
+            <NotificationList
+                notifications={notifications}
+                onNotificationClick={handleNotificationClick}
+              />
           )}
         </div>
 

From 6c518d34b0feb7fe1e29f9faecc645590a7e3b95 Mon Sep 17 00:00:00 2001
From: Jeong Ha Seung <88266129+HA-SEUNG-JEONG@users.noreply.github.com>
Date: Tue, 20 Jan 2026 12:18:46 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EC=95=8C=EB=A6=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EB=B0=8F=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(service)/(my)/notification/page.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/(service)/(my)/notification/page.tsx b/src/app/(service)/(my)/notification/page.tsx
index cc99c2d1..7c1c3f30 100644
--- a/src/app/(service)/(my)/notification/page.tsx
+++ b/src/app/(service)/(my)/notification/page.tsx
@@ -62,7 +62,9 @@ export default function NotificationPage() {
     readNotifications(ids);
   };
 
-  const handleNotificationClick = (notification: MemberNotificationResponse) => {
+  const handleNotificationClick = (
+    notification: MemberNotificationResponse,
+  ) => {
     if (!notification.isRead) {
       readNotifications([notification.id]);
     }
@@ -90,10 +92,10 @@ export default function NotificationPage() {
         <div className="flex gap-100">
           <Button
             color="outlined"
-            className="font-designer-13r h-[32px]"
+            className="font-designer-13r h-400"
             onClick={handleMarkAllAsRead}
           >
-            모든 읽음 처리
+            모두 읽음 처리
           </Button>
 
           <div className="w-[120px]">

From a4c56fb0be52f812ca17e6815788aac82acdb356 Mon Sep 17 00:00:00 2001
From: Jeong Ha Seung <88266129+HA-SEUNG-JEONG@users.noreply.github.com>
Date: Wed, 4 Feb 2026 17:31:45 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EC=95=8C=EB=A6=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EB=B0=8F=20JSX=20?=
 =?UTF-8?q?=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modals/notification-dropdown.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/notification-dropdown.tsx b/src/components/modals/notification-dropdown.tsx
index 8a32181c..33fc3ddc 100644
--- a/src/components/modals/notification-dropdown.tsx
+++ b/src/components/modals/notification-dropdown.tsx
@@ -34,7 +34,9 @@ export default function NotificationDropdown() {
 
   const { mutate: readNotifications } = useReadNotifications();
 
-  const handleNotificationClick = (notification: MemberNotificationResponse) => {
+  const handleNotificationClick = (
+    notification: MemberNotificationResponse,
+  ) => {
     if (!notification.isRead) {
       readNotifications([notification.id]);
     }
@@ -94,9 +96,9 @@ export default function NotificationDropdown() {
             </div>
           ) : (
             <NotificationList
-                notifications={notifications}
-                onNotificationClick={handleNotificationClick}
-              />
+              notifications={notifications}
+              onNotificationClick={handleNotificationClick}
+            />
           )}
         </div>