From 5e5558a1817f634eb6b4d0ffb82d8b2993ee3f74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EA=B4=91=EB=AF=BC?= <rhkdals0242@naver.com>
Date: Sun, 3 Aug 2025 19:20:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 125b230d..80c8fb5c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -10,6 +10,7 @@ import useLogout from '@/hooks/useLogout';
 import { toast } from 'sonner';
 import { useState } from 'react';
 import NotificationDropdown from './Notification/NotificationDropdown';
+import { useNotifications } from '@/hooks/useNotification';
 
 export default function Header() {
   const router = useRouter();
@@ -21,6 +22,9 @@ export default function Header() {
 
   const toggleOpen = () => setIsOpen((prev) => !prev);
 
+  const { data } = useNotifications({ size: 10 });
+  const hasNotification = (data?.totalCount ?? 0) > 0;
+
   // 로그아웃 처리
   const handleLogout = async () => {
     try {
@@ -51,9 +55,14 @@ export default function Header() {
               <button
                 aria-label='알림'
                 onClick={toggleOpen}
-                className='hover:text-primary'
+                className='hover:text-primary relative'
               >
                 <IconBell />
+                {hasNotification && (
+                  <span className='font-regular absolute top-[-11px] right-[-3px] text-[10px] text-red-500'>
+                    {data?.totalCount}
+                  </span>
+                )}
               </button>
 
               {isOpen && (