Feat: 유저 이미지 보이도록 api연결 #65

Author: jiyeeeah

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

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

components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage/ModalComments.tsx

@@ -2,26 +2,27 @@
 
 import Image from 'next/image';
 import { useState } from 'react';
+import Avatar from '@/components/ui/Avatar';
 import FlexBox from '../../../FlexBox';
 import Modal from '../../../Modal';
 
 export default function BoardCardModalComments({
   id,
   userName,
   content,
-  userImg,
+  userImage,
 }: {
   id: number;
   userName: string;
   content: string;
-  userImg: string;
+  userImage: string;
 }) {
   const [showSmallModal, setShowSmallModal] = useState(false);
 
   return (
     <div key={id}>
       <FlexBox align="start" className="gap-3 group">
-        <Image src={userImg} alt="사용자 프로필" width={36} height={36} />
+        <Avatar size="base" image={userImage} name={userName} />
         <FlexBox direction="column" align="start" className="gap-1">
           <div>
             <div className="inline-block mr-1 body2 text-grey-500">

components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

@@ -84,10 +84,19 @@ export function BoardCardCommentWrapper({
           value={commentText}
           onChange={(event) => setCommentText(event.target.value)}
         />
-        <button type="button" onClick={postNewComment}>
+        <button
+          type="button"
+          onClick={postNewComment}
+          disabled={commentText.length === 0}
+          className={`${
+            commentText.length === 0 ? 'cursor-not-allowed' : null
+          }`}
+        >
           <PaperPlaneIcon
             className={`w-8 h-8 ${
-              isLoading ? 'fill-grey-300' : 'fill-primary-300'
+              isLoading || commentText.length === 0
+                ? 'fill-grey-300'
+                : 'fill-primary-300'
             }`}
           />
         </button>

components/ui/BoardCard/BoardCardPackage/Header.tsx

@@ -5,20 +5,17 @@ import BoardCardDropdown from './BoardCardDropdown';
 
 export default function BoardCardHeader({
   userName,
+  userImage,
   createdDate,
 }: {
   userName: string;
+  userImage: string;
   createdDate: string;
 }) {
   return (
     <FlexBox justify="between" className="w-full">
       <FlexBox className="gap-[10px]">
-        <Avatar
-          size="xl"
-          // TODO : 유저 프로필 사진 연결!
-          image="/Feed/desktop/tempProfilePic.svg"
-          name={String(userName)}
-        />
+        <Avatar size="xl" image={userImage} name={String(userName)} />
         <FlexBox direction="column" align="start" className="gap-1">
           <FlexBox className="gap-2">
             <div className="header4 text-grey-800">{userName}</div>

components/ui/BoardCard/FeedBoardCard.tsx

@@ -1,57 +1,45 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Comment } from '@/types/types';
+import { Board } from '@/types/types';
 import { BoardCard } from '@/components/ui/BoardCard/BoardCardPackage';
 import FlexBox from '../FlexBox';
 
-interface FeedBoardCardProps {
-  boardId: number;
-  userName: string;
-  content: string;
-  imgs: string[];
-  setShowModal: Dispatch<SetStateAction<boolean>>;
-  comments: Comment[];
-  commentsCount: number;
-  likedCount: number;
-  createdDate: string;
-}
-
 export default function FeedBoardCard({
-  boardId,
-  userName,
-  content,
-  imgs,
+  board,
   setShowModal,
-  comments,
-  commentsCount,
-  likedCount,
-  createdDate,
-}: FeedBoardCardProps) {
+}: {
+  board: Board;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+}) {
   // const { data: commentList } = useGetShortCommentList(boardId);
   return (
     <FlexBox
       direction="column"
       justify="between"
       className="max-h-[500px] p-9 rounded-[10px] border-[1px] border-grey-200 gap-4"
     >
-      <BoardCard.Header userName={userName} createdDate={createdDate} />
+      <BoardCard.Header
+        userName={board.writer}
+        createdDate={board.createdDate}
+        userImage={board.userImageUrl}
+      />
       <BoardCard.Content
         type="mainPC"
-        content={content}
-        imgs={imgs}
+        content={board.content}
+        imgs={board.fileNames}
         onClickModal={() => setShowModal(true)}
       >
         <BoardCard.BoardCardCommentWrapper
-          boardId={boardId}
-          commentsCount={commentsCount}
-          likedCount={likedCount}
+          boardId={board.id}
+          commentsCount={board.replyCount}
+          likedCount={board.likedCount}
         >
           <FlexBox
             direction="column"
             justify="start"
             align="start"
             className="max-h-[74px] overflow-hidden"
           >
-            {comments?.map((comment) => (
+            {board.replyListDto?.map((comment) => (
               <BoardCard.Comments
                 key={comment.id}
                 userName={comment.nickname}

service/board.ts

@@ -16,10 +16,7 @@ export async function postBoard(postBoardData: PostBoardType) {
 }
 
 export async function getBoardList(pageParam: number) {
-  let url = `/endpoint/api/board/list?pageSize=5`;
-  if (pageParam !== 0) {
-    url += `&pageNumber=${pageParam}`;
-  }
+  const url = `/endpoint/api/board/list?pageSize=5&pageNumber=${pageParam}`;
   try {
     const response = await fetch(url);
     if (response.status === 401) {

types/types.ts

@@ -20,6 +20,8 @@ export interface Board {
   fileNames: string[];
   likedCount: number;
   replyCount: number;
+  userImageUrl: string;
+  boardLiked: boolean;
   createdDate: string;
   modifiedDate: string;
 }