Feat/칵테일 댓글기능#97

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.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": ""
-}
+}

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

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

src/domains/community/hook/useComment.ts

@@ -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/mypage/components/ToggleBtn.tsx

@@ -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/pages/my-active/MyComment.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/MyLike.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/MyPost.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-alarm/MyAlarm.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} />

src/domains/mypage/components/pages/my-bar/MyBar.tsx

@@ -1,20 +1,24 @@
 'use client';
 import { getApi } from '@/app/api/config/appConfig';
+import { abvMap } from '@/domains/mypage/utills/abvMap';
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
+import TextButton from '@/shared/components/button/TextButton';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 interface MyCocktail {
   cocktailId: number;
   cocktailName: string;
+  cocktailNameKo: string;
   id: number;
   imageUrl: string;
+  alcoholStrength: string;
 }
 
 function MyBar() {
   const [myCocktail, setMyCocktail] = useState<MyCocktail[]>([]);
   const fetchData = async () => {
-    const res = await fetch(`${getApi}/me/bar`, {
+    const res = await fetch(`${getApi}/me/bar/detail`, {
       method: 'GET',
       credentials: 'include',
     });
@@ -28,26 +32,35 @@ function MyBar() {
 
   return (
     <div>
+      <div className="flex justify-end">
+        <TextButton className="my-5">전체삭제</TextButton>
+      </div>
       {myCocktail.length !== 0 ? (
         <div
           className="
-    grid gap-8 md:justify-between justify-center
-    [grid-template-columns:repeat(1,minmax(0,250px))]
-    sm:[grid-template-columns:repeat(2,minmax(0,250px))]
-    md:[grid-template-columns:repeat(3,minmax(0,250px))]
-  "
+           grid gap-8 md:justify-between justify-center
+           [grid-template-columns:repeat(1,minmax(0,250px))]
+           sm:[grid-template-columns:repeat(2,minmax(0,250px))]
+           md:[grid-template-columns:repeat(3,minmax(0,250px))]
+           "
         >
-          {myCocktail.map(({ cocktailId, cocktailName, imageUrl }) => (
-            <Link href={`/recipe/${cocktailId}`} key={cocktailId}>
-              <CocktailCard
-                src={imageUrl}
-                textSize1="text-xl"
-                name={cocktailName}
-                nameKo="올드 패션드"
-                keep={false}
-              ></CocktailCard>
-            </Link>
-          ))}
+          {myCocktail.map(
+            ({ cocktailId, cocktailName, imageUrl, cocktailNameKo, alcoholStrength }) => {
+              const alcohol = abvMap(alcoholStrength);
+              return (
+                <Link href={`/recipe/${cocktailId}`} key={cocktailId}>
+                  <CocktailCard
+                    alcohol={alcohol}
+                    src={imageUrl}
+                    textSize1="text-xl"
+                    name={cocktailName}
+                    nameKo={cocktailNameKo}
+                    keep={true}
+                  ></CocktailCard>
+                </Link>
+              );
+            }
+          )}
         </div>
       ) : (
         <div className="flex justify-center">

src/domains/mypage/main/MyNav.tsx

@@ -92,17 +92,9 @@ function MyNav() {
           role="tabpanel"
           aria-labelledby={`main-tab-${i}`}
           hidden={isActive !== i}
-        >
-          {/* 필요하면 여기 메인 탭별 콘텐츠 렌더 */}
-        </div>
+        ></div>
       ))}
 
-      {(isActive == 0 || isActive == 2) && (
-        <TextButton className="self-end" onClick={() => setIsDeleteAll(!isDeleteAll)}>
-          전체삭제
-        </TextButton>
-      )}
-
       {isActive == 1 && (
         <nav aria-label="내 활동 하위 탭">
           <ul role="tablist" className="flex gap-5 w-full justify-center">
@@ -139,9 +131,7 @@ function MyNav() {
             role="tabpanel"
             aria-labelledby={`sub-tab-${i}`}
             hidden={isActive !== i}
-          >
-            {/* 필요하면 여기 서브 탭별 콘텐츠 렌더 */}
-          </div>
+          ></div>
         ))}
     </section>
   );

src/domains/mypage/utills/abvMap.ts

@@ -0,0 +1,17 @@
+export function abvMap(input: string) {
+  if (!input) return '';
+  switch (input) {
+    case 'NON_ALCOHOLIC':
+      return '논 알콜';
+    case 'WEAK':
+      return '약한 도수';
+    case 'LIGHT':
+      return '가벼운 도수';
+    case 'MEDIUM':
+      return '중간 도수';
+    case 'STRONG':
+      return '센 도수';
+    case 'VERY_STRONG':
+      return '매우 센 도수';
+  }
+}