Merge remote-tracking branch 'origin/dev' into refactor/recipeFetch

Author: mtm-git1018

README.md

@@ -1,4 +1,5 @@
-# SSOUL 프로젝트 인수인계 문서
+# SSOUL
+Ai 칵테일 추천 & 커뮤니티 사이트
 
 ## 프로젝트 개요
 
@@ -64,7 +65,7 @@ src/
 
 ### 1. 인증 시스템
 - **소셜 로그인**: Google, Kakao, Naver 지원
-- **상태 관리**: Zustand + localStorage persist
+- **상태 관리**: Zustand + cookie 기반
 - **주요 파일**:
   - `src/domains/shared/store/auth.ts`: 인증 상태 관리
   - `src/domains/login/hook/useAuthHooks.ts`: 로그인 관련 훅
@@ -73,8 +74,17 @@ src/
 ### 2. 페이지별 기능
 
 #### 메인 페이지 (`/`)
-- 현재 기본 구조만 구현됨
-- 추후 확장 예정
+- **3D 애니메이션**: GSAP + Three.js 기반 칵테일 드롭 애니메이션
+- **스크롤 슬라이더**: 커뮤니티, 레시피, 추천 섹션을 스크롤로 탐색
+- **반응형 디자인**: 모바일데스크톱 최적화
+- **주요 컴포넌트**:
+  - `CocktailDrop`: 3D 칵테일 드롭 애니메이션
+  - `MainSlide`: 스크롤 기반 슬라이더
+  - `StarMain`: 별 배경 애니메이션
+  - `HomeLogo`: 로고 애니메이션
+- **기능**:
+  - 스크롤 스무딩 (ScrollSmoother)
+  - 반응형 로고 위치 조정
 
 #### 칵테일 레시피 (`/recipe`)
 - **주요 컴포넌트**: 
@@ -153,9 +163,8 @@ src/
 ## 주의사항
 
 1. **환경 변수**: 개발/운영 환경에 맞는 API URL 설정 필요
-2. **인증 토큰**: localStorage에 저장되므로 보안 고려 필요
-3. **API 통신**: `credentials: 'include'` 설정으로 쿠키 기반 인증
-4. **Git Hooks**: Husky 설정으로 커밋 전 자동 검사
+2. **API 통신**: `credentials: 'include'` 설정으로 쿠키 기반 인증
+3. **Git Hooks**: Husky 설정으로 커밋 전 자동 검사
 
 ## 추가 문의
 

src/domains/community/detail/DetailHeader.tsx

@@ -2,7 +2,6 @@ import Label from '@/domains/shared/components/label/Label';
 import EditDelete from './EditDelete';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/domains/shared/store/auth';
-import { useToast } from '@/shared/hook/useToast';
 import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
 import { useState } from 'react';
 import { getApi } from '@/app/api/config/appConfig';
@@ -18,7 +17,6 @@ function DetailHeader({ categoryName, postId, userNickName }: Props) {
   const [deletePost, setDeletePost] = useState(false);
   const router = useRouter();
   const user = useAuthStore((state) => state.user);
-  const { toastError } = useToast();
 
   const handleConfirmDelete = async (postId: number | ParamValue) => {
     if (!user) {
@@ -28,7 +26,6 @@ function DetailHeader({ categoryName, postId, userNickName }: Props) {
 
     try {
       const res = await fetch(`${getApi}/posts/${postId}`, { method: 'DELETE' });
-      if (res.ok) console.log('deleted');
       router.push('/community');
     } catch (err) {
       console.error(err);

src/domains/community/detail/DetailPage.tsx

@@ -48,15 +48,26 @@ function DetailPage() {
 
   useEffect(() => {
     const fetchLikeStatus = async () => {
+      // 로그인 상태일 때만 좋아요 상태 조회
+      if (!isLoggedIn) {
+        setLike(false);
+        return;
+      }
+
       try {
         const liked = await getLikePost(postId);
         setLike(liked);
       } catch (err) {
         console.error('좋아요 상태 불러오기 실패', err);
+        setLike(false);
       }
     };
-    fetchLikeStatus();
-  }, [postId]);
+
+    // postId가 있을 때만 실행
+    if (postId) {
+      fetchLikeStatus();
+    }
+  }, [postId]); // isLoggedIn 의존성 제거하여 무한 루프 방지
 
   useEffect(() => {
     if (postDetail) {

src/domains/community/hook/useComment.ts

@@ -2,8 +2,8 @@ import { useState, useEffect, useCallback } from 'react';
 import { deleteComment, fetchComment, updateComment } from '../api/fetchComment';
 import { getApi } from '@/app/api/config/appConfig';
 import { CommentType } from '../types/post';
-import { User } from '@/domains/shared/store/auth';
 import { ParamValue } from 'next/dist/server/request/params';
+import { User } from '@/domains/shared/store/auth';
 
 export function useComments(postId: ParamValue, user: User | null) {
   const [comments, setComments] = useState<CommentType[] | null>(null);
@@ -19,11 +19,11 @@ export function useComments(postId: ParamValue, user: User | null) {
     if (!data) return;
     setComments(data);
     setIsEnd(false);
-  }, [postId]);
+  }, [postId, user]);
 
   useEffect(() => {
     fetchData();
-  }, [postId]);
+  }, [fetchData]);
 
   const handleUpdateComment = async (commentId: number, content: string) => {
     if (!user) {
@@ -78,7 +78,7 @@ export function useComments(postId: ParamValue, user: User | null) {
 
     setIsLoading(true);
     try {
-      const res = await fetch(`${getApi}/posts/${postId}/comments?lastId=${lastCommentId}`);
+      const res = await fetch(`${getApi}/posts/${postId}/comments?lastId=${lastCommentId}`, {});
       const newComments = await res.json();
 
       if (newComments.data.length === 0) {

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

@@ -61,7 +61,6 @@ function CommentHeader({
       intervalCall1000(async () => {
         const success = await createComment(newComment);
         if (!success) {
-          console.log('칵테일 페이지에서 댓글은 한개만 입력 가능합니다');
         }
       });
     }

src/domains/shared/components/profile/Profile.tsx

@@ -1,25 +1,20 @@
-import useFetchProfile from '@/domains/mypage/api/fetchProfile';
 import SsuryImage from '@/domains/mypage/main/SsuryImage';
-import { useEffect } from 'react';
+import { useAuthStore } from '@/domains/shared/store/auth';
 
 type Props = {
   userNickname: string;
 };
 
 function Profile({ userNickname }: Props) {
-  const { profile, fetchProfile } = useFetchProfile();
-  useEffect(() => {
-    fetchProfile();
-  }, [fetchProfile, profile?.data?.abvLevel]);
+  const user = useAuthStore((state) => state.user);
 
-  if (!profile?.data) return null;
-  const { abvLevel } = profile.data;
+  if (!user) return null;
 
   return (
     <div className="flex gap-2 items-center justify-start">
       <div className="w-8 h-8 flex items-center justify-center" aria-label="작성자 아이콘">
         <div className="w-8 flex items-center justify-center">
-          <SsuryImage abvLevel={abvLevel} />
+          <SsuryImage abvLevel={user.abv_degree || 5.0} />
         </div>
       </div>
       <span aria-label="작성자 이름" className="text-sm">