[feat]sse알림설정

Author: mtm-git1018

src/domains/mypage/components/pages/my-active/MyLike.tsx

@@ -21,13 +21,7 @@ function MyLike() {
   }, []);
 
   return (
-    <section className="flex justify-center">
-      {myLike.length > 0 ? (
-        <PostCard posts={myLike} isLoading={isLoading} />
-      ) : (
-        <div>아직 좋아요를 누른 글이 없습니다</div>
-      )}
-    </section>
+    <PostCard posts={myLike} isLoading={isLoading} />
   );
 }
 export default MyLike;

src/shared/components/header/HeaderBtn.tsx

@@ -6,31 +6,74 @@ import { useRouter } from 'next/navigation';
 import tw from '@/shared/utills/tw';
 import { useAuthStore } from '@/domains/shared/store/auth';
 import { setPreLoginPath } from '@/domains/shared/auth/utils/setPreLoginPath';
-import {  useState } from 'react';
+import {  useEffect, useState } from 'react';
 import LogoutConfirm from '@/domains/login/components/LogoutConfirm';
+import { getApi } from '@/app/api/config/appConfig';
 
 
 function HeaderBtn({ pathname }: { pathname: string }) {
   const { isLoggedIn } = useAuthStore();
   const router = useRouter();
   const [logoutModalOpen, setLogoutModalOpen] = useState(false);
+  const [hasNewNotification,setHasNotification] = useState(false)
 
+ useEffect(() => {
+   if (!isLoggedIn) return;
+
+   console.log('🔌 SSE 연결 시작...');
+   const eventSource = new EventSource(`${getApi}/me/subscribe`, { withCredentials: true });
+
+   eventSource.onopen = () => {
+     console.log('✅ SSE 연결 성공!');
+   };
+
+   eventSource.onmessage = (event) => {
+     console.log('📢 새 알림 도착:', event.data);
+     setHasNotification(true);
+   };
+
+   eventSource.onerror = (error) => {
+     console.error('❌ SSE 에러:', error);
+     console.log('연결 상태:', eventSource.readyState); // 0: CONNECTING, 1: OPEN, 2: CLOSED
+     eventSource.close();
+   };
+
+   return () => {
+     console.log('🔌 SSE 연결 종료');
+     eventSource.close();
+   };
+ }, [isLoggedIn]);
+  
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      console.log('🧪 테스트 알림 발생');
+      setHasNotification(true);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, []);
 
   const navButtons = [
     {
       icon: Bell,
       label: '알림',
       className: pathname === '/mypage/my-alarm' ? 'text-tertiary' : 'text-current',
       hiddenMobile: true,
-      onClick: () => router.push('/mypage/my-alarm'),
+      onClick: () => {
+        setHasNotification(false)
+        router.push('/mypage/my-alarm')
+      },
+      showBadge:true
     },
     {
       icon: User,
       label: '마이 페이지',
       className: pathname === '/mypage' ? 'text-tertiary' : 'text-current',
       hiddenMobile: true,
       onClick: () => router.push('/mypage'),
+      showBadge:false
     },
+  
   ];
 
   const authButton = isLoggedIn
@@ -52,18 +95,24 @@ function HeaderBtn({ pathname }: { pathname: string }) {
         {/* 아이콘 버튼들 */}
         <div className="flex gap-2">
           {isLoggedIn &&
-            navButtons.map(({ icon: Icon, label, onClick, className, hiddenMobile }) => (
+            navButtons.map(({ icon: Icon, label, onClick, className, hiddenMobile, showBadge }) => (
               <button
                 key={label}
                 aria-label={label}
                 onClick={onClick}
                 className={tw(
                   className,
                   hiddenMobile ? 'hidden sm:flex' : '',
-                  'items-center justify-center rounded-full w-7 h-7 hover:bg-secondary/10 transition-colors duration-200'
+                  'relative items-center justify-center rounded-full w-7 h-7 hover:bg-secondary/10 transition-colors duration-200'
                 )}
               >
                 <Icon width={24} height={24} className="text-current" />
+                {showBadge && hasNewNotification && (
+                  <span
+                    className=" absolute items-center justify-center top-1 right-1 w-2 h-2 bg-red-500
+                    rounded-full"
+                  ></span>
+                )}
               </button>
             ))}
         </div>

src/shared/components/header/NavItem.tsx

@@ -8,6 +8,7 @@ interface Props {
 }
 
 function NavItem({ pathname, className }: Props) {
+
   return (
     <nav className={tw(className)}>
       <ul className="text-white flex gap-[24px] font-serif font-normal text-base md:text-lg">