배포용 PR (#152)

mtm-git1018 · ahk0413 · EunbinJung · web-flow · commit 7dc6eebffeee · 2025-10-16T00:00:34.000+09:00
* [fix] 챗봇 추천 페이지 수정 및 기능추가 (#130) * [fix] 논알콜일 시 payload 값 수정 * [fix] options 기본으로 수정 * [feat] 다시 시작하기 추가 * [feat] 채팅 캡처기능 추가 * [fix] currentStep 제거 * [fix] 파비콘 추가 및 헤더 메뉴 네이밍 수정 * [style] layout 모바일 대응 추가 * Design/main#11 (#131) * [style] 배경 * [design] 랜딩페이지 3d모델 * 3d 렌더링 * Style/main page 2#122 (#132) * [style]마이페이지 슬라이드 퍼블리싱 * [style] 메인페이지 슬라이드 * [docs]provider문서 정리 * [style] 메인페이지 스타일 간격조정 * [feat]알림 설정처리 * [stype]메인페이지 반응형 * [feat] 나만의 바 삭제 동기화 * [feat] 마이페이지 전체삭제 * [style] 메인페이지 반응형 * [feat] 마이페이지 푸시 오류 수정 * [docs]미 사용 파일 삭제 * [style] 메인3d이미지 스크롤 실험div제거 * Style/메인페이지 슬라이드영역 (#135) * [style]마이페이지 슬라이드 퍼블리싱 * [style] 메인페이지 슬라이드 * [docs]provider문서 정리 * [style] 메인페이지 스타일 간격조정 * [feat]알림 설정처리 * [stype]메인페이지 반응형 * [feat] 나만의 바 삭제 동기화 * [feat] 마이페이지 전체삭제 * [style] 메인페이지 반응형 * [feat] 마이페이지 푸시 오류 수정 * [docs]미 사용 파일 삭제 * [style] 메인3d이미지 스크롤 실험div제거 * [style] 메인페이지 슬라이드 반응형 * [style]메인페이지 이미지교체 * [style] 시맨틱구조 * [style] 모바일 메인배경 위치조정 * [fix] 화면 리사이징시 슬라이드 고정 버그 해결 * [fix] 브라우저 리사이징 버그 수정 * [chore]포매팅 * [fix] 로그아웃 시 auth/me api 자동호출로 401 에러 (#136) * [fix] 로그아웃 시 auth/me 자동호출로 401 에러 해결 * [fix] 로그인 새로고침 시 오류 로직 수정 * [fix] 리다이렉트 setTimeout 추가 * Design/main#11 (#138) * [style] 배경 * [design] 랜딩페이지 3d모델 * 3d 렌더링 * 로고,텍스트 추가 * 패키지제이슨 * 메인작업 * 카메라액션 취소 * 별 애니메이션 취소 * 대문자 * [fix] 레이아웃 분리 (#139) * Refactor/recipe fetch (#140) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [fix] 경로 오류 수정 * 경로 수정 * [fix] 경로수정 * Feat/write#19 (#142) * [feat] 글쓰기 기능 * [feat] 포스트 작성 기능 * Feat/communityscroll#23 (#114) * [feat] 스크롤링구현 * [feat] 주소, api설정 * [feat] 커뮤니티 탭, 필터 패치로직 * [feat] lastLikeCount, lastCommentCount, 추가 * [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가 * 옵셔널로 수정 * 오류 수정 * [feat] 글쓰기 기능 * 카테고리필수 * [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가 * [feat] 이미지 스와이퍼 * [feat] 프로필 쑤리 이미지 * [feat] 댓글 누르면 댓글 섹션으로 가기 * [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요) * [feat] 게시물 수정 * [feat] 글 수정 * [refactor] 코드 조금정리 * [feat] 작성자본인만 글수정삭제 * [feat]글 삭제기능 * [feat] 칵테일태그 * [fix]칵테일, 쉐어 기능 * 수 라우터, 비로그인처리 * 타입 수정 * 타입 수정 * 타입수정 * 타입수정 * 타입수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 충돌해결 * 오류 수정 * 오류 수정 * 오류 수정 * [fix] 이미지 카운트, 10개 제한 * [fix] 글쓰기 placeholder * [fix] 공유 url 수정 * [fix] 프로필배경 지우기 * [fix] 플로팅탭 미디어쿼리 수정 * [fix] 수정 모달 * 댓글실시간반영 시도 * 수정 * [fix] 수정모달 로직 수정 * 수정로직 수정 * [feat] edit수정 * 타입오류 * [feat] 좋아요로직 수정 * [fix] 칵테일태그 너비 수정 * 글쓰기 로그인검사 * 버그들 수정 * 반응형 * 파일명 대문자수정 * [fix] MainSlide 수정 (#143) * [fix] MainSlide 수정 * [style] MainSlide 사진 추가 * Refactor/칵테일 정렬 기능 수정 (#144) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [refactor] 정렬 중복아이템문제 * [feat] 칵테일 정렬기능 * [fix]댓글 알림 수정 * [chore] 충돌사항 수정 * [fix]충돌에러수정 * [style] 폰트 추가 * [fix]파일 내 코드중복 수정 * [chore]포매팅 * [fix]타입중복 수정 * [chore]포매팅 * docs/ 폰트 추가 및 삭제 (#146) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [refactor] 정렬 중복아이템문제 * [feat] 칵테일 정렬기능 * [fix]댓글 알림 수정 * [chore] 충돌사항 수정 * [docs] 필요없는 폰트파일 정리 * [fix] scroll 위치이동 * Feat/write#19 (#147) * [feat] 글쓰기 기능 * [feat] 포스트 작성 기능 * Feat/communityscroll#23 (#114) * [feat] 스크롤링구현 * [feat] 주소, api설정 * [feat] 커뮤니티 탭, 필터 패치로직 * [feat] lastLikeCount, lastCommentCount, 추가 * [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가 * 옵셔널로 수정 * 오류 수정 * [feat] 글쓰기 기능 * 카테고리필수 * [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가 * [feat] 이미지 스와이퍼 * [feat] 프로필 쑤리 이미지 * [feat] 댓글 누르면 댓글 섹션으로 가기 * [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요) * [feat] 게시물 수정 * [feat] 글 수정 * [refactor] 코드 조금정리 * [feat] 작성자본인만 글수정삭제 * [feat]글 삭제기능 * [feat] 칵테일태그 * [fix]칵테일, 쉐어 기능 * 수 라우터, 비로그인처리 * 타입 수정 * 타입 수정 * 타입수정 * 타입수정 * 타입수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 충돌해결 * 오류 수정 * 오류 수정 * 오류 수정 * [fix] 이미지 카운트, 10개 제한 * [fix] 글쓰기 placeholder * [fix] 공유 url 수정 * [fix] 프로필배경 지우기 * [fix] 플로팅탭 미디어쿼리 수정 * [fix] 수정 모달 * 댓글실시간반영 시도 * 수정 * [fix] 수정모달 로직 수정 * 수정로직 수정 * [feat] edit수정 * 타입오류 * [feat] 좋아요로직 수정 * [fix] 칵테일태그 너비 수정 * 글쓰기 로그인검사 * 버그들 수정 * 반응형 * 파일명 대문자수정 * 모바일 이미지 * 메인 수정 * 3d모델 * [style] 폰트 추가 * [feat] 스크롤 버튼 추가 * [fix] 시작 애니메이션 원복 * [docs]README * Feat/write#19 (#148) * [feat] 글쓰기 기능 * [feat] 포스트 작성 기능 * Feat/communityscroll#23 (#114) * [feat] 스크롤링구현 * [feat] 주소, api설정 * [feat] 커뮤니티 탭, 필터 패치로직 * [feat] lastLikeCount, lastCommentCount, 추가 * [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가 * 옵셔널로 수정 * 오류 수정 * [feat] 글쓰기 기능 * 카테고리필수 * [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가 * [feat] 이미지 스와이퍼 * [feat] 프로필 쑤리 이미지 * [feat] 댓글 누르면 댓글 섹션으로 가기 * [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요) * [feat] 게시물 수정 * [feat] 글 수정 * [refactor] 코드 조금정리 * [feat] 작성자본인만 글수정삭제 * [feat]글 삭제기능 * [feat] 칵테일태그 * [fix]칵테일, 쉐어 기능 * 수 라우터, 비로그인처리 * 타입 수정 * 타입 수정 * 타입수정 * 타입수정 * 타입수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 오류수정 * 충돌해결 * 오류 수정 * 오류 수정 * 오류 수정 * [fix] 이미지 카운트, 10개 제한 * [fix] 글쓰기 placeholder * [fix] 공유 url 수정 * [fix] 프로필배경 지우기 * [fix] 플로팅탭 미디어쿼리 수정 * [fix] 수정 모달 * 댓글실시간반영 시도 * 수정 * [fix] 수정모달 로직 수정 * 수정로직 수정 * [feat] edit수정 * 타입오류 * [feat] 좋아요로직 수정 * [fix] 칵테일태그 너비 수정 * 글쓰기 로그인검사 * 버그들 수정 * 반응형 * 파일명 대문자수정 * 모바일 이미지 * 메인 수정 * 3d모델 * 메인 수정 * 아래칵테일잔수정 * [fix] 로그인 시 여러번 뜨는 toast 알림 이슈 수정 * fix/메인페이지 아코디언박스 오류 수정 (#151) * [refactor] 무한스크롤 tanstack * [refactor] 레시피페이지 리팩토링 * [refactor] 아코디언박스 * [feat]필터링 뒤로가기 스크롤 저장 * [chore] 머지 전 커밋 * [chore]머지 전 커밋 누락 내용 커밋 * [refactor]리팩토링 커밋 * [refactor] 정렬 중복아이템문제 * [feat] 칵테일 정렬기능 * [fix]댓글 알림 수정 * [chore] 충돌사항 수정 * [docs] 필요없는 폰트파일 정리 * [feat]sse설정 * [feat]sse알림설정 * [chore]머지후 커밋 * [style] 메인페이지 아코디언 오류 수정 * [feat]알림 SSE기능 --------- Co-authored-by: ahk0413 <117137719+ahk0413@users.noreply.github.com> Co-authored-by: EunbinJ <ainatube39@gmail.com> Co-authored-by: ahk0413 <rladkgusgd@gmail.com>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import '@/shared/styles/global.css';
 import type { Metadata } from 'next';
-import '@/shared/styles/global.css';
 import { Toaster } from 'react-hot-toast';
 import ScrollTopBtnWrapper from '@/shared/components/scroll-top/ScrollTopBtnWrapper';
 import KaKaoScript from './api/kakao/KaKaoScript';
diff --git a/src/domains/main/api/useSSENotification.ts b/src/domains/main/api/useSSENotification.ts
@@ -0,0 +1,64 @@
+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) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+        isConnectingRef.current = false;
+      }
+      return;
+    }
+
+    // 이미 연결 중이거나 연결되어 있으면 중복 방지
+    if (isConnectingRef.current || eventSourceRef.current) {
+      return;
+    }
+
+    isConnectingRef.current = true;
+
+    const eventSource = new EventSource(`${getApi}/me/subscribe`, {
+      withCredentials: true,
+    });
+
+    eventSourceRef.current = eventSource;
+
+    eventSource.onopen = () => {
+      isConnectingRef.current = false;
+    };
+
+    eventSource.onmessage = () => {
+      setHasNewNotification(true);
+    };
+
+    eventSource.onerror = () => {
+      isConnectingRef.current = false;
+
+      if (eventSource.readyState === EventSource.CLOSED) {
+        eventSourceRef.current = null;
+      }
+    };
+
+    // cleanup 함수
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      isConnectingRef.current = false;
+    };
+  }, [isLoggedIn]); // isLoggedIn만 의존성으로
+
+  const clearNotification = () => {
+    setHasNewNotification(false);
+  };
+
+  return { hasNewNotification, clearNotification };
+}
diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx b/src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx
@@ -53,7 +53,10 @@ 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 />
diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx b/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 />
diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileSlideTest.tsx b/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
diff --git a/src/domains/mypage/components/pages/my-active/MyLike.tsx b/src/domains/mypage/components/pages/my-active/MyLike.tsx
@@ -20,18 +20,6 @@ function MyLike() {
     fetchLike();
   }, []);
 
-  useEffect(() => {
-    console.log(myLike);
-  }, [myLike]);
-
-  return (
-    <section className="flex justify-center">
-      {myLike.length > 0 ? (
-        <PostCard posts={myLike} isLoading={isLoading} />
-      ) : (
-        <div>아직 좋아요를 누른 글이 없습니다</div>
-      )}
-    </section>
-  );
+  return <PostCard posts={myLike} isLoading={isLoading} />;
 }
 export default MyLike;
diff --git a/src/shared/components/header/HeaderBtn.tsx b/src/shared/components/header/HeaderBtn.tsx
@@ -8,26 +8,34 @@ import { useAuthStore } from '@/domains/shared/store/auth';
 import { setPreLoginPath } from '@/domains/shared/auth/utils/setPreLoginPath';
 import { useState } from 'react';
 import LogoutConfirm from '@/domains/login/components/LogoutConfirm';
+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, clearNotification } = useSSENotification(isLoggedIn);
+
   const navButtons = [
     {
       icon: Bell,
       label: '알림',
       className: pathname === '/mypage/my-alarm' ? 'text-tertiary' : 'text-current',
       hiddenMobile: true,
-      onClick: () => router.push('/mypage/my-alarm'),
+      onClick: () => {
+        clearNotification();
+        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,
     },
   ];
 
@@ -50,18 +58,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>
