Refactor: 댓글부분 link 수정 #65

Author: jiyeeeah

components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

@@ -73,7 +73,11 @@ export function BoardCardCommentWrapper({
             {children}
           </FlexBox>
         ) : (
-          <FlexBox direction="row" className="gap-[19px] pl-[15px]">
+          <FlexBox
+            direction="row"
+            justify="start"
+            className="w-full gap-[19px] pl-[15px]"
+          >
             <Image
               src="/Feed/desktop/commentLine.svg"
               alt="댓글선"

components/ui/BoardCard/BoardCardPackage/Comments.tsx

@@ -1,23 +1,14 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useRouter } from 'next/navigation';
-
 export default function BoardCardComments({
-  boardId,
   userName,
   content,
 }: {
-  boardId: number;
   userName: string;
   content: string;
 }) {
-  const router = useRouter();
-
   return (
-    <div
-      className="flex flex-row hover:cursor-pointer"
-      onClick={() => router.push(`/board/${boardId}`)}
-    >
+    <div className="flex flex-row hover:cursor-pointer">
       <div className="inline-block mr-1 body2 text-grey-500">{userName}</div>
       <div className="inline body4 text-grey-500">{content}</div>
     </div>

components/ui/BoardCard/FeedBoardCard.tsx

@@ -2,9 +2,12 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { Board } from '@/types/types';
 import { BoardCard } from '@/components/ui/BoardCard/BoardCardPackage';
+import { useRouter } from 'next/navigation';
 import FlexBox from '../FlexBox';
 
 export default function FeedBoardCard({ board }: { board: Board }) {
+  const router = useRouter();
+
   return (
     <FlexBox
       direction="column"
@@ -24,21 +27,18 @@ export default function FeedBoardCard({ board }: { board: Board }) {
           likedCount={board.likedCount}
           isLiked={board.boardLiked}
         >
-          <FlexBox
-            direction="column"
-            justify="start"
-            align="start"
-            className="max-h-[74px] overflow-hidden"
+          <div
+            className="flex flex-col justify-start items-start max-h-[74px] overflow-hidden w-full hover:cursor-pointer"
+            onClick={() => router.push(`/board/${board.id}`)}
           >
             {board.replyListDto?.map((comment) => (
               <BoardCard.Comments
                 key={comment.id}
-                boardId={board.id}
                 userName={comment.nickname}
                 content={comment.content}
               />
             ))}
-          </FlexBox>
+          </div>
         </BoardCard.BoardCardCommentWrapper>
       </BoardCard.Content>
     </FlexBox>