Dev

README.md

@@ -1,12 +1,12 @@
 # SSOUL 프로젝트 인수인계 문서
 
-## �� 프로젝트 개요
+## 프로젝트 개요
 
 **프로젝트명**: SSOUL (칵테일을 좋아하는 사람들을 위한 서비스)  
 **기술 스택**: Next.js 15, React 19, TypeScript, Tailwind CSS  
 **저장소**: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE
 
-## �� 시작하기
+## 시작하기
 
 ### 개발 환경 설정
 ```bash
@@ -60,7 +60,7 @@ src/
     └── utills/                  # 유틸리티 함수
 ```
 
-## �� 주요 기능
+## 주요 기능
 
 ### 1. 인증 시스템
 - **소셜 로그인**: Google, Kakao, Naver 지원
@@ -72,19 +72,19 @@ src/
 
 ### 2. 페이지별 기능
 
-#### �� 메인 페이지 (`/`)
+#### 메인 페이지 (`/`)
 - 현재 기본 구조만 구현됨
 - 추후 확장 예정
 
-#### �� 칵테일 레시피 (`/recipe`)
+#### 칵테일 레시피 (`/recipe`)
 - **주요 컴포넌트**: 
   - `CocktailList`: 칵테일 목록 표시
   - `Accordion`: 필터링 옵션
   - `SelectBox`: 정렬 옵션
 - **기능**: 검색, 필터링, 정렬
 - **상세 페이지**: `/recipe/[id]` - 개별 칵테일 상세 정보
 
-#### �� 커뮤니티 (`/community`)
+#### 커뮤니티 (`/community`)
 - **주요 컴포넌트**:
   - `PostCard`: 게시물 카드
   - `CommunityTab`: 카테고리 탭
@@ -93,28 +93,28 @@ src/
 - **글쓰기**: `/community/write`
 - **상세 페이지**: `/community/[id]`
 
-#### �� 취향 추천 (`/recommend`)
+#### 취향 추천 (`/recommend`)
 - **챗봇 기반 추천**: `ChatSection` 컴포넌트
 - **주요 컴포넌트**:
   - `BotMessage`, `UserMessage`: 메시지 컴포넌트
   - `BotOptions`: 선택 옵션
   - `MessageInput`: 입력창
   - `TypingIndicator`: 타이핑 효과
 
-#### �� 마이페이지 (`/mypage`)
+#### 마이페이지 (`/mypage`)
 - **기본 리다이렉트**: `/mypage` → `/mypage/mybar`
 - **주요 섹션**:
   - `/mypage/mybar`: 나만의 바
   - `/mypage/my-active`: 활동 내역 (게시물, 댓글, 좋아요)
   - `/mypage/my-alarm`: 알림 설정
   - `/mypage/my-setting`: 계정 설정
 
-#### �� 로그인 (`/login`)
+#### 로그인 (`/login`)
 - **소셜 로그인**: `SocialLogin` 컴포넌트
 - **성공 페이지**: `/login/success`
 - **신규 사용자**: `/login/user/first-user`
 
-## �� 기술적 세부사항
+## 기술적 세부사항
 
 ### 상태 관리
 - **Zustand**: 클라이언트 상태 관리
@@ -136,34 +136,34 @@ src/
 - **Husky**: Git hooks
 - **Lint-staged**: 커밋 전 검사
 
-## �� 주요 설정 파일
+## 주요 설정 파일
 
 - `next.config.ts`: Next.js 설정
 - `tailwind.config.js`: Tailwind CSS 설정
 - `eslint.config.mjs`: ESLint 설정
 - `tsconfig.json`: TypeScript 설정
 
-## �� 반응형 디자인
+## 반응형 디자인
 
 프로젝트는 모바일 우선(Mobile-first) 접근 방식을 사용합니다:
 - **모바일**: 기본 스타일
 - **태블릿**: `md:` prefix
 - **데스크톱**: `lg:`, `xl:` prefix
 
-## �� 주의사항
+## 주의사항
 
 1. **환경 변수**: 개발/운영 환경에 맞는 API URL 설정 필요
 2. **인증 토큰**: localStorage에 저장되므로 보안 고려 필요
 3. **API 통신**: `credentials: 'include'` 설정으로 쿠키 기반 인증
 4. **Git Hooks**: Husky 설정으로 커밋 전 자동 검사
 
-## �� 추가 문의
+## 추가 문의
 
 - **저장소 이슈**: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE/issues
 - **주요 브랜치**: `main` (메인), `dev` (개발)
 
 ---
 
 **작성일**: 2025-10-14  
-**작성자**: 이성헌  
+**작성자**: 정은빈 | 김아현 | 문태민
 **버전**: 1.0

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';

src/domains/community/api/fetchPost.ts

@@ -50,8 +50,8 @@ export const fetchPostByTab = async ({
     const params = new URLSearchParams();
 
     if (category && category !== 'all') {
-      const categoryId = tabItem.findIndex((tab) => tab.key === category);
-      if (categoryId >= 0) {
+      const categoryId = tabItem.findIndex((tab) => tab.key === category) + 1;
+      if (categoryId > 0) {
         params.set('categoryId', categoryId.toString());
       }
     }

src/domains/community/write/WriteSection.tsx

@@ -126,7 +126,7 @@ function WriteSection({ mode, postId }: Props) {
       return;
     }
 
-    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName);
+    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName) + 1;
 
     if (categoryId === -1) {
       toastError('카테고리를 선택해주세요.');
@@ -216,7 +216,7 @@ function WriteSection({ mode, postId }: Props) {
       return false;
     }
 
-    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName);
+    const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName) + 1;
     if (categoryId === -1) {
       toastError('카테고리를 선택해주세요.');
       return false;

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 };
+}

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -45,6 +45,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
 
       // 로고 위에서 아래로 자연스럽게 등장
       const screenWidth = window.innerWidth;
+
       const viewportHeight = window.innerHeight;
       const isTablet = screenWidth >= 640 && screenWidth < 1024;
       const isMobile = screenWidth < 640;
@@ -54,7 +55,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
         ? `-${viewportHeight * 0.3}px`
         : isTablet
           ? `-${viewportHeight * -0.8}px`
-          : '0px';
+          : '210px';
 
       gsap.fromTo(
         logoRef.current,
@@ -87,16 +88,16 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       {/* 대각선 줄 1 */}
       <div
         ref={line1Ref}
-        className="absolute md:top-[100px] top-[75px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary/80 rotate-[8deg] z-10"
+        className="absolute lg:top-[150px] md:top-[100px] top-[75px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary/80 rotate-[8deg] z-10"
       />
       {/* 대각선 줄 2 */}
       <div
         ref={line2Ref}
-        className="absolute md:top-[200px] top-[150px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary rotate-[8deg] z-10"
+        className="absolute lg:top-[250px] md:top-[200px] top-[150px] left-[-50%] w-[200%] md:h-[80px] h-[50px] bg-secondary rotate-[8deg] z-10"
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute z-4 md:w-115 w-65 md:h-90 h-40">
+      <div ref={logoRef} className="absolute z-4 lg:w-125 md:w-115 w-65 lg:h-110 md:h-90 h-40">
         <Image
           src="/logo.svg"
           alt="로고 이미지"

src/domains/main/components/3d/HomeText.tsx

@@ -7,8 +7,8 @@ function HomeText({ isDesktop }: { isDesktop: boolean }) {
           SSoul이 쉽게 골라드릴게요.
         </p>
       ) : (
-        <p className="absolute bottom-45 right-12 font-serif text-xl text-right font-normal z-20">
-          어떤 칵테일이 끌리시나요? SSoul이 쉽게 골라드릴게요.
+        <p className="absolute bottom-45 right-32 font-serif text-2xl text-right font-normal z-20">
+          어떤 칵테일이 끌리시나요? <br /> SSoul이 쉽게 골라드릴게요.
         </p>
       )}
     </>

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 />

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/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;

src/domains/shared/components/comment/CommentList.tsx

@@ -67,7 +67,6 @@ function CommentList({
         aria-label="댓글 목록"
         className="flex flex-col mt-6 overflow-y-auto no-scrollbar"
         ref={parentRef}
-        style={{ minHeight: '300px', maxHeight: '600px' }}
       >
         <ul>
           {comments?.map((comment, index) => {