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

mtm-git1018 · mtm-git1018 · commit 0572d208f3cc · 2025-10-11T17:51:12.000+09:00
diff --git a/src/app/mypage/my-active/my-like/page.tsx b/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;
diff --git a/src/domains/mypage/components/pages/my-active/MyComment.tsx b/src/domains/mypage/components/pages/my-active/MyComment.tsx
@@ -7,11 +7,11 @@ import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 
 function MyComment() {
-const { user } = useAuthStore(
-  useShallow((state) => ({
-    user: state.user,
-  }))
-);
+  const { user } = useAuthStore(
+    useShallow((state) => ({
+      user: state.user,
+    }))
+  );
 
   const [myComment, setMyComment] = useState<CommentType[]>([]);
   const [isLoading] = useState<boolean>(false);
@@ -32,7 +32,12 @@ const { user } = useAuthStore(
   return (
     <section>
       {CommentList.length !== 0 ? (
-        <CommentList comments={myComment} isLoading={isLoading} myPage={true} currentUserNickname={user?.nickname} />
+        <CommentList
+          comments={myComment}
+          isLoading={isLoading}
+          myPage={true}
+          currentUserNickname={user?.nickname}
+        />
       ) : (
         <div className="flex justify-center">
           <p>작성한 댓글이 없습니다.</p>
diff --git a/src/domains/mypage/components/pages/my-active/MyLike.tsx b/src/domains/mypage/components/pages/my-active/MyLike.tsx
@@ -20,6 +20,14 @@ function MyLike() {
     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;
diff --git a/src/domains/recipe/api/RecipeFetch.tsx b/src/domains/recipe/api/RecipeFetch.tsx
@@ -23,8 +23,7 @@ export const RecipeFetch = ({
   setHasNextPage,
   SIZE = 20,
 }: Props) => {
-
-  const user = useAuthStore()
+  const user = useAuthStore();
   const fetchData = useCallback(async () => {
     // 쿼리파라미터에 값 넣기
     if (!hasNextPage) return;
@@ -35,32 +34,41 @@ export const RecipeFetch = ({
     }
     url.searchParams.set('LastValue', String(lastId));
 
-
     const recipeRes = await fetch(url.toString(), {
-      method:'GET'
-    })
-    if(!recipeRes.ok) throw new Error('데이터 요청 실패')
-    const recipeJson = await recipeRes.json()
-    const list: Cocktail[] = recipeJson.data ?? []
+      method: 'GET',
+    });
+    if (!recipeRes.ok) throw new Error('데이터 요청 실패');
+    const recipeJson = await recipeRes.json();
+    const list: Cocktail[] = recipeJson.data ?? [];
 
     if (user) {
       const keepRes = await fetch(`${getApi}/me/bar`, {
         method: 'GET',
-        credentials:'include'
-      })
-      const bars = keepRes.ok ? (await keepRes.json()).data ?? [] : []
+        credentials: 'include',
+      });
+      const bars = keepRes.ok ? ((await keepRes.json()).data ?? []) : [];
       const favoriteIds = new Set(bars.map((m: { cocktailId: number }) => m.cocktailId));
-      const merged = list.map(item => ({ ...item, isFavorited: favoriteIds.has(item.cocktailId) }))
-      setData(prev => Array.from(new Map<number,Cocktail>([...prev,...merged].map(i => [i.cocktailId,i])).values()))
+      const merged = list.map((item) => ({
+        ...item,
+        isFavorited: favoriteIds.has(item.cocktailId),
+      }));
+      setData((prev) =>
+        Array.from(
+          new Map<number, Cocktail>([...prev, ...merged].map((i) => [i.cocktailId, i])).values()
+        )
+      );
     } else {
-      setData(prev => Array.from(new Map<number,Cocktail>([...prev,...list].map(i=>[i.cocktailId,i])).values()))
+      setData((prev) =>
+        Array.from(
+          new Map<number, Cocktail>([...prev, ...list].map((i) => [i.cocktailId, i])).values()
+        )
+      );
     }
 
     if (list.length > 0) {
       setLastId(list[list.length - 1].cocktailId);
     }
     setHasNextPage(list.length === SIZE);
-
   }, [hasNextPage, lastId, setData, setLastId, setHasNextPage, SIZE]);
   return { fetchData };
 };
diff --git a/src/domains/recipe/components/main/CocktailFilter.tsx b/src/domains/recipe/components/main/CocktailFilter.tsx
@@ -9,28 +9,27 @@ interface Props {
   setData: Dispatch<SetStateAction<Cocktail[]>>;
 }
 
-function CocktailFilter({ cocktailsEA,setData }:Props) {
+function CocktailFilter({ cocktailsEA, setData }: Props) {
+  const sortMap = {
+    최신순: 'recent',
+    인기순: 'popular',
+    댓글순: 'comments',
+  };
+  const searchParams = useSearchParams();
+  const query = searchParams.get('sortBy');
+  const router = useRouter();
+  const handleChange = async (selectTitle: string) => {
+    if (!query) return;
+    try {
+      const res = await fetch(`${getApi}/cocktails`);
+      const json = await res.json();
+      setData(json.data);
+    } catch {
+      console.error();
+      console.log(selectTitle);
+    }
+  };
 
- const sortMap = {
-   최신순: 'recent',
-   인기순: 'popular',
-   댓글순: 'comments',
-  } 
-   const searchParams = useSearchParams();
-    const query = searchParams.get('sortBy');
-    const router = useRouter();
-    const handleChange = async (selectTitle: string) => {
-      if (!query) return;
-      try {
-        const res = await fetch(`${getApi}/cocktails`)
-        const json = await res.json()
-        setData(json.data)
-      } catch {
-        console.error()
-        console.log(selectTitle)
-      }
-    };
-  
   return (
     <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
       <p>{cocktailsEA}개</p>
diff --git a/src/domains/recipe/details/DetailMain.tsx b/src/domains/recipe/details/DetailMain.tsx
@@ -13,17 +13,17 @@ import RecipeComment from '../components/details/RecipeComment';
 import { getApi } from '@/app/api/config/appConfig';
 import { useAuthStore } from '@/domains/shared/store/auth';
 
-interface Kept{
-  cocktailId: number,
-  id: number,
-  keptAt:Date
+interface Kept {
+  cocktailId: number;
+  id: number;
+  keptAt: Date;
 }
 
 function DetailMain({ id }: { id: number }) {
-  const user = useAuthStore()
+  const user = useAuthStore();
   const [cocktail, setCocktail] = useState();
-  const [isKept, setIsKept] = useState<boolean|null>(null)
-  
+  const [isKept, setIsKept] = useState<boolean | null>(null);
+
   const fetchData = async () => {
     const res = await fetch(`${getApi}/cocktails/${id}`);
     const json = await res.json();
@@ -33,19 +33,17 @@ function DetailMain({ id }: { id: number }) {
     if (user) {
       const keepRes = await fetch(`${getApi}/me/bar`, {
         method: 'GET',
-        credentials:'include'
-      })
-      const keepjson = await keepRes.json()
-      if (!keepRes.ok) throw new Error('킵 한 아이템 호출 에러')
+        credentials: 'include',
+      });
+      const keepjson = await keepRes.json();
+      if (!keepRes.ok) throw new Error('킵 한 아이템 호출 에러');
       const keepIds = keepjson.data.map((a: Kept) => String(a.cocktailId));
       setIsKept(keepIds.includes(String(id)));
     } else {
-      setIsKept(false)
+      setIsKept(false);
     }
   };
 
-
-
   useEffect(() => {
     fetchData();
   }, []);
diff --git a/src/domains/recipe/details/DetailsHeader.tsx b/src/domains/recipe/details/DetailsHeader.tsx
@@ -12,22 +12,20 @@ interface Meta {
   url: string;
 }
 
-function DetailsHeader({ id, favor }: { id: number, favor: boolean | null }) {
-
+function DetailsHeader({ id, favor }: { id: number; favor: boolean | null }) {
   const [isShare, setIsShare] = useState(false);
   const [meta, setMeta] = useState<Meta | null>(null);
-  
+
   const url = async () => {
     const res = await fetch(`${getApi}/cocktails/${id}/share`);
     const json = await res.json();
     setMeta(json.data);
   };
- 
+
   useEffect(() => {
     url();
   }, []);
 
-
   return (
     <div className="flex items-center justify-between pb-5 sm:pb-12">
       {isShare && meta && (
diff --git a/src/domains/shared/components/comment/CommentList.tsx b/src/domains/shared/components/comment/CommentList.tsx
@@ -6,6 +6,8 @@ import { useInfiniteScrollObserver } from '@/shared/hook/useInfiniteScrollObserv
 import { useItemVirtualizer } from '@/domains/community/hook/useItemVirtualizer';
 import { useCommentEnterAnimation } from '@/domains/community/hook/useCommentAnimation';
 import { usePrevious } from 'react-use';
+import Link from 'next/link';
+import { getApi } from '@/app/api/config/appConfig';
 
 type Props = {
   comments: CommentType[] | null;
@@ -27,7 +29,6 @@ function CommentList({
   isEnd,
   myPage = false,
 }: Props) {
-
   const parentRef = useRef<HTMLDivElement | null>(null);
   const [editCommentId, setEditCommentId] = useState<number | null>(null);
   const [editedContentMap, setEditedContentMap] = useState<Record<number, string>>({});
@@ -71,12 +72,100 @@ function CommentList({
       >
         <ul style={{ height: rowVirtualizer.getTotalSize(), position: 'relative' }}>
           {rowVirtualizer.getVirtualItems().map(({ index, key, start }) => {
-            const { commentId, content, userNickName, createdAt } = comments[index];
+            const { commentId, content, userNickName, createdAt, postId } = comments[index];
             const isEditing = editCommentId === commentId;
             const isMyComment = comments && currentUserNickname === userNickName;
             const isLast = index === comments.length - 1;
 
-            return (
+            return myPage ? (
+              <Link href={`/community/${postId}`} key={key}>
+                <li
+                  className="border-b-1 border-gray py-3"
+                  data-index={index}
+                  ref={(el) => {
+                    if (el) {
+                      requestAnimationFrame(() => {
+                        try {
+                          rowVirtualizer.measureElement(el);
+                        } catch (e) {
+                          console.error('measureElement failed', e);
+                        }
+                      });
+                      if (index === 0) firstItemRef.current = el;
+                      if (isLast) observeLastItem(el);
+                    }
+                  }}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${start}px)`,
+                    minHeight: '60px', // ← 최소 보장
+                  }}
+                >
+                  <article>
+                    <CommentTitle
+                      userNickname={myPage ? currentUserNickname! : userNickName}
+                      commentTime={createdAt}
+                      isMyComment={isMyComment}
+                      isEditing={isEditing}
+                      myPage={myPage}
+                      onSubmitEdit={() => {
+                        const updatedContent = editedContentMap[commentId];
+                        if (!updatedContent) return;
+                        if (!onUpdateComment) return;
+                        onUpdateComment(commentId, updatedContent).then(() => {
+                          setEditCommentId(null);
+                          setEditedContentMap((prev) => {
+                            const next = { ...prev };
+                            delete next[commentId];
+                            return next;
+                          });
+                        });
+                      }}
+                      onDelete={() => {
+                        if (!onDeleteComment) return;
+                        onDeleteComment(commentId);
+                      }}
+                      onEdit={() => {
+                        setEditCommentId(commentId);
+                        setEditedContentMap((prev) => ({
+                          ...prev,
+                          [commentId]: content, // 기존 내용 세팅
+                        }));
+                      }}
+                      onCancelEdit={() => {
+                        setEditCommentId(null);
+                        setEditedContentMap((prev) => {
+                          const next = { ...prev };
+                          delete next[commentId];
+                          return next;
+                        });
+                      }}
+                    />
+                    <article className="mt-4 h-full">
+                      {isEditing ? (
+                        <AutoGrowingTextarea
+                          value={editedContentMap[commentId] ?? content}
+                          rowVirtualize={rowVirtualizer}
+                          onChange={(e) =>
+                            setEditedContentMap((prev) => ({
+                              ...prev,
+                              [commentId]: e.target.value,
+                            }))
+                          }
+                        />
+                      ) : (
+                        <div className="mt-4">
+                          <p className="whitespace-pre-wrap">{content}</p>
+                        </div>
+                      )}
+                    </article>
+                  </article>
+                </li>
+              </Link>
+            ) : (
               <li
                 className="border-b-1 border-gray py-3"
                 key={key}
@@ -105,15 +194,15 @@ function CommentList({
               >
                 <article>
                   <CommentTitle
-                    userNickname={ myPage ? currentUserNickname! : userNickName}
+                    userNickname={myPage ? currentUserNickname! : userNickName}
                     commentTime={createdAt}
                     isMyComment={isMyComment}
                     isEditing={isEditing}
                     myPage={myPage}
                     onSubmitEdit={() => {
                       const updatedContent = editedContentMap[commentId];
                       if (!updatedContent) return;
-                      if (!onUpdateComment) return
+                      if (!onUpdateComment) return;
                       onUpdateComment(commentId, updatedContent).then(() => {
                         setEditCommentId(null);
                         setEditedContentMap((prev) => {
@@ -123,10 +212,9 @@ function CommentList({
                         });
                       });
                     }}
-                   
                     onDelete={() => {
-                      if (!onDeleteComment) return
-                      onDeleteComment(commentId)
+                      if (!onDeleteComment) return;
+                      onDeleteComment(commentId);
                     }}
                     onEdit={() => {
                       setEditCommentId(commentId);
diff --git a/src/domains/shared/components/keep/Keep.tsx b/src/domains/shared/components/keep/Keep.tsx
diff --git a/src/domains/shared/hook/useMemoScroll.ts b/src/domains/shared/hook/useMemoScroll.ts
diff --git a/src/shared/components/tool-tip/ToolTip.tsx b/src/shared/components/tool-tip/ToolTip.tsx

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,6 @@ export const metadata: Metadata = {`
`8`	`8`	`};`
`9`	`9`
`10`	`10`	`function Page() {`
`11`		`- // return <MyLike />;`
	`11`	`+ return <MyLike />;`
`12`	`12`	`}`
`13`	`13`	`export default Page;`