Refactor: 이미지, 좋아요 수 api연결 #65

Author: jiyeeeah

components/pages/main/Feed/BoardsList/index.tsx

@@ -39,13 +39,14 @@ export default function BoardsList({
                 className="w-full"
               >
                 <FeedBoardCard
-                  userId={board.writer}
+                  boardId={board.id}
+                  userName={board.writer}
                   content={board.content}
                   imgs={board.fileNames}
                   setShowModal={setShowModal}
                   comments={board.replyListDto}
                   commentsCount={board.replyCount}
-                  boardId={board.id}
+                  likedCount={board.likedCount}
                 />
               </div>
             ))

components/pages/mypage/MyPageMain/BookmarkedBoardsList/index.tsx

@@ -37,10 +37,10 @@ export default function BookmarkedBoardsList() {
                 <MyBoardCard
                   userName={board.writer}
                   content={board.content}
-                  // TODO: 이미지 연결
-                  imgs={[]}
-                  commentsCount={board.replyCount}
+                  imgs={board.fileNames}
                   setShowModal={setShowModal}
+                  commentsCount={board.replyCount}
+                  likedCount={board.likedCount}
                 />
               </div>
             )),

components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

@@ -8,13 +8,15 @@ import Button from '../../Button';
 export function BoardCardCommentWrapper({
   children,
   isModal = false,
-  commentsNum,
   boardId,
+  commentsCount,
+  likedCount,
 }: {
   children: React.ReactNode;
   isModal?: boolean;
-  commentsNum: number;
   boardId: number;
+  commentsCount: number;
+  likedCount: number;
 }) {
   const [commentText, setCommentText] = useState('');
   const [isUploading, setIsUploading] = useState(false);
@@ -54,11 +56,11 @@ export function BoardCardCommentWrapper({
         <FlexBox className="gap-5">
           <FlexBox className="gap-2 body3 text-grey-500">
             <div>댓글</div>
-            <div>{commentsNum}</div>
+            <div>{commentsCount}</div>
           </FlexBox>
           <FlexBox className="gap-2 body3 text-grey-500">
             <div>좋아요</div>
-            <div>2</div>
+            <div>{likedCount}</div>
           </FlexBox>
         </FlexBox>
         {isModal ? (
@@ -104,11 +106,13 @@ export function BoardCardCommentWrapper({
 }
 
 export function MyPageBoardCardCommentWrapper({
-  commentsCount,
   onClickModal,
+  commentsCount,
+  likedCount,
 }: {
-  commentsCount: number;
   onClickModal: () => void;
+  commentsCount: number;
+  likedCount: number;
 }) {
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -127,7 +131,7 @@ export function MyPageBoardCardCommentWrapper({
             </FlexBox>
             <FlexBox className="gap-2 body3 text-grey-500">
               <div>좋아요</div>
-              <div>2</div>
+              <div>{likedCount}</div>
             </FlexBox>
           </FlexBox>
         </FlexBox>

components/ui/BoardCard/BoardCardPackage/Header.tsx

@@ -3,18 +3,19 @@ import Avatar from '../../Avatar';
 import FlexBox from '../../FlexBox';
 import BoardCardDropdown from './BoardCardDropdown';
 
-export default function BoardCardHeader({ userId }: { userId: string }) {
+export default function BoardCardHeader({ userName }: { userName: string }) {
   return (
     <FlexBox justify="between" className="w-full">
       <FlexBox className="gap-[10px]">
         <Avatar
           size="xl"
+          // TODO : 유저 프로필 사진 연결!
           image="/Feed/desktop/tempProfilePic.svg"
-          name={String(userId)}
+          name={String(userName)}
         />
         <FlexBox direction="column" align="start" className="gap-1">
           <FlexBox className="gap-2">
-            <div className="header4 text-grey-800">{userId}</div>
+            <div className="header4 text-grey-800">{userName}</div>
           </FlexBox>
           <div className="caption2 text-grey-400">
             고양이 아무튼 자격증 보유중 ・ 3시간 전

components/ui/BoardCard/FeedBoardCard.tsx

@@ -4,40 +4,43 @@ import { BoardCard } from '@/components/ui/BoardCard/BoardCardPackage';
 import FlexBox from '../FlexBox';
 
 interface FeedBoardCardProps {
-  userId: string;
+  boardId: number;
+  userName: string;
   content: string;
   imgs: string[];
   setShowModal: Dispatch<SetStateAction<boolean>>;
   comments: Comment[] | undefined;
   commentsCount: number;
-  boardId: number;
+  likedCount: number;
 }
 
 export default function FeedBoardCard({
-  userId,
+  boardId,
+  userName,
   content,
   imgs,
   setShowModal,
   comments,
   commentsCount,
-  boardId,
+  likedCount,
 }: FeedBoardCardProps) {
   return (
     <FlexBox
       direction="column"
       justify="between"
       className="max-h-[500px] p-9 rounded-[10px] border-[1px] border-grey-200 gap-4"
     >
-      <BoardCard.Header userId={userId} />
+      <BoardCard.Header userName={userName} />
       <BoardCard.Content
         type="mainPC"
         content={content}
         imgs={imgs}
         onClickModal={() => setShowModal(true)}
       >
         <BoardCard.BoardCardCommentWrapper
-          commentsNum={commentsCount}
           boardId={boardId}
+          commentsCount={commentsCount}
+          likedCount={likedCount}
         >
           <FlexBox
             direction="column"

components/ui/BoardCard/ModalBoardCard.tsx

@@ -2,32 +2,39 @@ import { Comment } from '@/types/types';
 import { BoardCardModal } from '@/components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage';
 
 interface ModalBoardCardProps {
-  userId: string;
+  boardId: number;
+  userName: string;
   imgs: string[];
   content: string;
   comments: Comment[] | undefined;
   commentsCount: number;
+  likedCount: number;
 }
 export default function ModalBoardCard({
-  userId,
+  boardId,
+  userName,
   imgs,
   content,
   comments,
   commentsCount,
+  likedCount,
 }: ModalBoardCardProps) {
   return (
     <BoardCardModal imgs={imgs}>
-      <BoardCardModal.Header userId={userId} />
+      <BoardCardModal.Header userName={userName} />
       <BoardCardModal.Content type="modal" content={content} imgs={imgs}>
         <BoardCardModal.BoardCardCommentWrapper
-          commentsNum={commentsCount}
           isModal
+          boardId={boardId}
+          commentsCount={commentsCount}
+          likedCount={likedCount}
         >
           {comments?.map((comment) => (
             <BoardCardModal.ModalComments
               id={comment.id}
               userName={comment.nickname}
               content={comment.content}
+              // TODO: 유저 프로필 사진 연결!
               userImg="/Feed/desktop/tempProfilePic.svg"
             />
           ))}

components/ui/BoardCard/MyPageBoardCard.tsx

@@ -7,6 +7,7 @@ interface MyBoardCardProps {
   imgs: string[];
   setShowModal: Dispatch<SetStateAction<boolean>>;
   commentsCount: number;
+  likedCount: number;
 }
 
 export default function MyPageBoardCard({
@@ -15,19 +16,21 @@ export default function MyPageBoardCard({
   imgs,
   setShowModal,
   commentsCount,
+  likedCount,
 }: MyBoardCardProps) {
   return (
     <BoardCard>
-      <BoardCard.Header userId={userName} />
+      <BoardCard.Header userName={userName} />
       <BoardCard.Content
         type="myPage"
         content={content}
         imgs={imgs}
         onClickModal={() => setShowModal(true)}
       >
         <BoardCard.MyPageBoardCardCommentWrapper
-          commentsCount={commentsCount}
           onClickModal={() => setShowModal(true)}
+          commentsCount={commentsCount}
+          likedCount={likedCount}
         />
       </BoardCard.Content>
     </BoardCard>

components/ui/BoardModal/index.tsx

@@ -32,11 +32,13 @@ export default function BoardModal({
         </FlexBox>
         {board ? (
           <ModalBoardCard
-            userId={board.writer}
+            boardId={board.id}
+            userName={board.writer}
             imgs={board.fileNames}
             content={board.title}
             comments={comments}
             commentsCount={board.replyCount}
+            likedCount={board.likedCount}
           />
         ) : (
           <div>내용이 없습니다.</div>