Feat/칵테일 댓글기능#97 (#120)

* [feat]칵테일 댓글 ui

* [chore] merge전 커밋

* [chore] 확인용 커밋

* 댓글에러

* 포맷

* 커뮤니티 댓글 수정

* [chore]풀 전용 커밋

* [feat] 칵테일 댓글등록

* [feat]로그인 유저 킵 버튼

* [feat] 나만의 바 라벨링

* [feat]로그인 한 유저 킵버튼

* [feaet] 상세페이지 킵

* [feat]레시피페이지정렬

* [feat] 댓글 클릭시 해당 글로 보내주는 기능

* [feat]댓글 작성 토스트

* [feat]댓글 validation

* [feat]댓글 validation

* [fix] 댓글, 킵 아이템 비로그인 경고

* [fix] mypage 401에러 대응

---------

Co-authored-by: EunbinJung <[email protected]>

Author: mtm-git1018

next.config.ts

@@ -1,13 +1,14 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+
   images: {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname:'www.thecocktaildb.com'
-      }
-    ]
+        hostname: 'www.thecocktaildb.com',
+      },
+    ],
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,

package-lock.json

@@ -26,6 +26,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
+    "react-intersection-observer": "^9.16.0",
     "react-use": "^17.6.0"
   },
   "devDependencies": {
@@ -61,4 +62,4 @@
   },
   "homepage": "https://github.com/prgrms-web-devcourse-final-project/WEB5_6_HaeDokCoding_FE#readme",
   "description": ""
-}
+}

package.json

@@ -8,6 +8,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  // return <MyLike />;
+  return <MyLike />;
 }
 export default Page;

src/app/mypage/my-active/my-like/page.tsx

@@ -23,7 +23,7 @@ export function useComments(postId: number, user: User | null, accessToken: stri
     fetchData();
   }, [fetchData]);
 
-  const handleUpdateComment = async (commentId: number, postId: number, content: string) => {
+  const handleUpdateComment = async (commentId: number, content: string) => {
     if (!user) {
       alert('로그인이 필요합니다');
       return;
@@ -43,7 +43,7 @@ export function useComments(postId: number, user: User | null, accessToken: stri
     }
   };
 
-  const handleAskDeleteComment = (commentId: number, postId: number) => {
+  const handleAskDeleteComment = (commentId: number) => {
     setDeleteTarget({ commentId, postId });
   };
 

src/domains/community/hook/useComment.ts

@@ -16,7 +16,6 @@ function ToggleBtn() {
           credentials: 'include',
         });
         const json = await res.json();
-        console.log(json);
         setIsAlarm(json.data.enabled);
       } catch {
         console.error();

src/domains/mypage/components/ToggleBtn.tsx

@@ -2,18 +2,26 @@
 import { getApi } from '@/app/api/config/appConfig';
 import { CommentType } from '@/domains/community/types/post';
 import CommentList from '@/domains/shared/components/comment/CommentList';
+import { useAuthStore } from '@/domains/shared/store/auth';
 import { useEffect, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
 
 function MyComment() {
+  const { user } = useAuthStore(
+    useShallow((state) => ({
+      user: state.user,
+    }))
+  );
+
   const [myComment, setMyComment] = useState<CommentType[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading] = useState<boolean>(false);
+
   const fetchComment = async () => {
     const res = await fetch(`${getApi}/me/comments`, {
       method: 'GET',
       credentials: 'include',
     });
     const json = await res.json();
-    console.log(json);
     setMyComment(json.data.items);
   };
 
@@ -23,13 +31,18 @@ function MyComment() {
 
   return (
     <section>
-      {/* {CommentList.length !== 0 ? (
-        <CommentList comments={myComment} isLoading={isLoading} />
+      {CommentList.length !== 0 ? (
+        <CommentList
+          comments={myComment}
+          isLoading={isLoading}
+          myPage={true}
+          currentUserNickname={user?.nickname}
+        />
       ) : (
         <div className="flex justify-center">
           <p>작성한 댓글이 없습니다.</p>
         </div>
-      )} */}
+      )}
     </section>
   );
 }

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

@@ -3,30 +3,31 @@ import { getApi } from '@/app/api/config/appConfig';
 import PostCard from '@/domains/community/main/PostCard';
 import { useEffect, useState } from 'react';
 
-interface MyLike {
-  postId: number;
-  title: string;
-  likedAt: Date;
-  posetCreatedAt: Date;
-}
-
 function MyLike() {
-  const [myLike, setMyLike] = useState<MyLike[]>([]);
+  const [myLike, setMyLike] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
 
   const fetchLike = async () => {
-    const res = await fetch(`${getApi}/me/likes/posts`, {
+    const res = await fetch(`${getApi}/me/likes`, {
       method: 'GET',
       credentials: 'include',
     });
     const json = await res.json();
-    // setMyLike(json.data.items);
+    setMyLike(json.data.items);
   };
 
   useEffect(() => {
     fetchLike();
   }, []);
 
-  // return <PostCard posts={myLike} isLoading={isLoading} />;
+  return (
+    <section className="flex justify-center">
+      {myLike.length > 0 ? (
+        <PostCard posts={myLike} isLoading={isLoading} />
+      ) : (
+        <div>아직 좋아요를 누른 글이 없습니다</div>
+      )}
+    </section>
+  );
 }
 export default MyLike;

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

@@ -12,6 +12,7 @@ function MyPost() {
       credentials: 'include',
     });
     const json = await res.json();
+    console.log(json);
     setMyPost(json.data.items);
   };
 

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

@@ -2,6 +2,7 @@
 import { useEffect, useState } from 'react';
 import Alarm from '../../Alarm';
 import { getApi } from '@/app/api/config/appConfig';
+import TextButton from '@/shared/components/button/TextButton';
 
 interface MyAlarm {
   notificationId: number;
@@ -29,6 +30,9 @@ function MyAlarm() {
 
   return (
     <section>
+      <div className="flex justify-end">
+        <TextButton className="my-5">전체삭제</TextButton>
+      </div>
       {myAlarm.length !== 0 ? (
         myAlarm.map(({ notificationId, title, content }) => (
           <Alarm key={notificationId} title={title} content={content} />