[style] 메인페이지 아코디언 오류 수정

Author: mtm-git1018

src/domains/main/api/useSSENotification.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { getApi } from '@/app/api/config/appConfig';
+
+export function useSSENotification(isLoggedIn: boolean) {
+  const [hasNewNotification, setHasNewNotification] = useState(false);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const isConnectingRef = useRef(false);
+
+  useEffect(() => {
+    // 로그인 안 했으면 연결 안 함
+    if (!isLoggedIn) {
+      if (eventSourceRef.current) {
+        console.log('🔌 로그아웃으로 인한 SSE 연결 종료');
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+        isConnectingRef.current = false;
+      }
+      return;
+    }
+
+    // 이미 연결 중이거나 연결되어 있으면 중복 방지
+    if (isConnectingRef.current || eventSourceRef.current) {
+      console.log('⚠️ 이미 SSE 연결 중 또는 연결됨');
+      return;
+    }
+
+    isConnectingRef.current = true;
+    console.log('🔌 SSE 연결 시작...');
+
+    const eventSource = new EventSource(`${getApi}/me/subscribe`, {
+      withCredentials: true,
+    });
+
+    eventSourceRef.current = eventSource;
+
+    eventSource.onopen = () => {
+      console.log('✅ SSE 연결 성공!');
+      isConnectingRef.current = false;
+    };
+
+    eventSource.onmessage = (event) => {
+      console.log('📢 새 알림 도착:', event.data);
+      setHasNewNotification(true);
+    };
+
+    eventSource.onerror = (error) => {
+      console.error('❌ SSE 에러:', error);
+      console.log('연결 상태:', eventSource.readyState);
+
+      isConnectingRef.current = false;
+
+      if (eventSource.readyState === EventSource.CLOSED) {
+        console.log('🔄 SSE 연결이 닫혔습니다');
+        eventSourceRef.current = null;
+      }
+    };
+
+    // cleanup 함수
+    return () => {
+      console.log('🔌 컴포넌트 언마운트로 인한 SSE 연결 종료');
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      isConnectingRef.current = false;
+    };
+  }, [isLoggedIn]); // isLoggedIn만 의존성으로
+
+  const clearNotification = () => {
+    setHasNewNotification(false);
+  };
+
+  return { hasNewNotification, clearNotification };
+}

src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx

@@ -53,7 +53,7 @@ function MobileAbv() {
             <h2 className="text-xl sm:text-2xl font-black text-white">내 알콜도수 UP</h2>
             <button
               type="button"
-              className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
+              className={clsx(`block z-1 duration-300 sm:hidden`, isClick ? 'rotate-[135deg]' : 'rotate-0')}
               onClick={() => setIsClick(!isClick)}
             >
               <Add />

src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx

@@ -16,7 +16,10 @@ function MobileSlideCommunity() {
             <h2 className="text-xl sm:text-2xl font-black text-white">함께 나누는 칵테일 이야기</h2>
             <button
               type="button"
-              className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
+              className={clsx(
+                `block duration-300 z-1 sm:hidden`,
+                isClick ? 'rotate-[135deg]' : 'rotate-0'
+              )}
               onClick={() => setIsClick(!isClick)}
             >
               <Add />

src/domains/main/components/mainSlide/components/mobile/MobileSlideTest.tsx

@@ -25,10 +25,15 @@ function MobileSlideTest() {
           <h2 className="text-xl sm:text-2xl font-black text-white">AI기반 취향테스트</h2>
           <button
             type="button"
-            className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
-            onClick={() => setIsClick(!isClick)}
+            className={clsx(
+              `block duration-300  z-1 sm:hidden`,
+              isClick ? 'rotate-[135deg]' : 'rotate-0'
+            )}
+            onClick={() => {
+              setIsClick(!isClick);
+            }}
           >
-            <Add />
+            <Add className="pointer-events-none" />
           </button>
         </header>
         <div

src/shared/components/header/HeaderBtn.tsx

@@ -6,51 +6,18 @@ 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 { useEffect, useState } from 'react';
+import {  useState } from 'react';
 import LogoutConfirm from '@/domains/login/components/LogoutConfirm';
-import { getApi } from '@/app/api/config/appConfig';
+import { useSSENotification } from '@/domains/main/api/useSSENotification';
+
 
 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 {hasNewNotification,clearNotification} = useSSENotification(isLoggedIn)
 
   const navButtons = [
     {
@@ -59,7 +26,7 @@ function HeaderBtn({ pathname }: { pathname: string }) {
       className: pathname === '/mypage/my-alarm' ? 'text-tertiary' : 'text-current',
       hiddenMobile: true,
       onClick: () => {
-        setHasNotification(false);
+        clearNotification()
         router.push('/mypage/my-alarm');
       },
       showBadge: true,