Refactor/284/댓글컴포넌트_리팩토링

src/app/(after-login)/epigrams/_components/RecentComment.tsx

@@ -127,6 +127,8 @@ export default function RecentComment() {
               ) : (
                 <Comment
                   {...comment}
+                  linkToEpigram={true}
+                  baseUrl='/epigrams/'
                   isOwnComment={isOwnComment}
                   handleEdit={() => isOwnComment && handleEdit(comment)}
                   handleDelete={() => isOwnComment && handleDeleteConfirm(comment.id)}

src/app/(after-login)/mypage/_components/CommentList.tsx

@@ -21,6 +21,7 @@ import Spinner from '@/components/Spinner';
 import type { FieldErrors } from 'react-hook-form';
 
 interface CommentListProps {
+  linkToEpigram?: boolean;
   comments: CommentType[];
   isFetching: boolean;
   hasNextPage: boolean;
@@ -29,6 +30,7 @@ interface CommentListProps {
 }
 
 export default function CommentList({
+  linkToEpigram = false,
   comments,
   isFetching,
   hasNextPage,
@@ -134,6 +136,8 @@ export default function CommentList({
             ) : (
               <Comment
                 {...comment}
+                linkToEpigram={linkToEpigram}
+                baseUrl='/epigrams/'
                 handleEdit={() => handleEdit(comment)}
                 handleDelete={() => handleDeleteConfirm(comment.id)}
                 isOwnComment={comment.writer.id === session?.user.id}

src/app/(after-login)/mypage/_components/MyWritings.tsx

@@ -35,6 +35,8 @@ export default function MyWritings() {
   const comments = commentData?.pages.flatMap((page) => page.list) ?? [];
   const CommentListCount = commentData?.pages?.[0]?.totalCount ?? 0;
 
+  console.log('comments', comments);
+  console.log('epigrams', epigrams);
   return (
     <Tabs>
       <TabList>
@@ -66,6 +68,7 @@ export default function MyWritings() {
         </TabItem>
         <TabItem tabIndex={1} activeTab={activeTab}>
           <CommentList
+            linkToEpigram={true}
             comments={comments}
             isFetching={isFetchingComments}
             hasNextPage={hasNextCommentPage}

src/components/Comment.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import { useState } from 'react';
-import { usePathname } from 'next/navigation';
+import Link from 'next/link';
 import { Epigram } from '@/apis/epigram/epigram.type';
 import formatTime from '@/utils/formatTime';
 import { cn } from '@/utils/helper';
 import Avatar from './Avatar';
 import ProfileModal from './ProfileModal';
 
 interface CommentProps {
+  linkToEpigram?: boolean;
+  baseUrl?: string;
   epigramId: Epigram['id'];
   content: string;
   writer: {
@@ -23,6 +25,8 @@ interface CommentProps {
 }
 
 export default function Comment({
+  linkToEpigram,
+  baseUrl,
   epigramId,
   content,
   writer,
@@ -33,18 +37,10 @@ export default function Comment({
   isOwnComment = true,
 }: CommentProps) {
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
-  const pathname = usePathname();
-  const isDetailPage = pathname.startsWith('/epigrams/');
-
-  const handleCommentClick = () => {
-    if (isDetailPage) return;
-    window.location.href = `/epigrams/${epigramId}`;
-  };
 
   const classes = {
     commentWrapper: cn(
       'border-line-200 flex items-start border-t px-6 py-4 text-left md:py-6 lg:py-9',
-      !isDetailPage && 'cursor-pointer',
       className,
     ),
     commentBox: 'ml-4 flex-1',
@@ -56,52 +52,64 @@ export default function Comment({
       'text-black-700 mt-2 text-[14px] leading-[1.7] break-keep md:mt-3 md:text-[16px] md:leading-relaxed lg:mt-4 lg:text-[20px]',
   };
 
-  return (
+  const CommentBody = () => (
     <>
-      <div onClick={handleCommentClick} className={classes.commentWrapper}>
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsProfileModalOpen(true);
-          }}
-          className='cursor-pointer'
-        >
-          <Avatar src={writer.image} alt={writer.nickname} />
-        </div>
-        <div className={classes.commentBox}>
-          <div className={classes.commentInfo}>
-            <div className={classes.commentInfoText}>{writer.nickname}</div>
-            <div className={cn(classes.commentInfoText, 'ml-2')}>{formatTime(updatedAt)}</div>
-            {isOwnComment && (
-              <ul className={classes.commentInfoBtns}>
-                <li>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleEdit?.();
-                    }}
-                    className={cn(classes.commentInfoBtn, 'text-black-600 decoration-black-600')}
-                  >
-                    수정
-                  </button>
-                </li>
-                <li>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDelete?.();
-                    }}
-                    className={cn(classes.commentInfoBtn, 'text-red decoration-red')}
-                  >
-                    삭제
-                  </button>
-                </li>
-              </ul>
-            )}
-          </div>
-          <div className={classes.commentContent}>{content}</div>
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsProfileModalOpen(true);
+        }}
+        className='cursor-pointer'
+      >
+        <Avatar src={writer.image} alt={writer.nickname} />
+      </div>
+      <div className={classes.commentBox}>
+        <div className={classes.commentInfo}>
+          <div className={classes.commentInfoText}>{writer.nickname}</div>
+          <div className={cn(classes.commentInfoText, 'ml-2')}>{formatTime(updatedAt)}</div>
+          {isOwnComment && (
+            <ul className={classes.commentInfoBtns}>
+              <li>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleEdit?.();
+                  }}
+                  className={cn(classes.commentInfoBtn, 'text-black-600 decoration-black-600')}
+                >
+                  수정
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDelete?.();
+                  }}
+                  className={cn(classes.commentInfoBtn, 'text-red decoration-red')}
+                >
+                  삭제
+                </button>
+              </li>
+            </ul>
+          )}
         </div>
+        <div className={classes.commentContent}>{content}</div>
       </div>
+    </>
+  );
+
+  return (
+    <>
+      {linkToEpigram && baseUrl ? (
+        <Link href={baseUrl + epigramId} className={classes.commentWrapper}>
+          <CommentBody />
+        </Link>
+      ) : (
+        <div className={classes.commentWrapper}>
+          <CommentBody />
+        </div>
+      )}
 
       <ProfileModal
         isOpen={isProfileModalOpen}