FE: [feat] 커뮤니티 댓글, 대댓글 기능 추가 #148

CSID-DGU · Dec 7, 2024 · 111c640 · 111c640
1 parent b4b84de
commit 111c640
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 19 deletions.
diff --git a/src/frontend/src/apis/board.ts b/src/frontend/src/apis/board.ts
@@ -37,7 +37,7 @@ export const searchBoard = async (boardName: string, keyword: string) => {
   return response.data;
 };
 
-export const postBoardLike = async (
+export const postBoardCommentLike = async (
   boardName: string,
   postId: number,
   commentId: number
@@ -47,3 +47,17 @@ export const postBoardLike = async (
   );
   return response.data;
 };
+
+export const postBoardCommemt = async (
+  boardName: string,
+  postId: number,
+  content: string,
+  parentCommentId: number | null
+) => {
+  const response = await api.post(`/board/${boardName}/${postId}`, {
+    content: content,
+    postId: postId,
+    parentCommentId: parentCommentId,
+  });
+  return response.data;
+};
diff --git a/src/frontend/src/components/common/Comment.tsx b/src/frontend/src/components/common/Comment.tsx
@@ -1,18 +1,37 @@
 import { comment } from "@/types/board";
-import { CrewGalleryDetailResponse } from "@/types/crew";
+import { Dispatch, SetStateAction } from "react";
 
 type CommentProps = {
   comment: comment;
+  selectedComment?: number | null;
+  setSelectedComment?: Dispatch<SetStateAction<number | null>>;
 };
 
-const Comment = ({ comment }: CommentProps) => {
+const Comment = ({
+  comment,
+  selectedComment,
+  setSelectedComment,
+}: CommentProps) => {
+  const handleClick = (id: number) => {
+    if (setSelectedComment) {
+      if (selectedComment == id) {
+        setSelectedComment(null);
+      } else setSelectedComment(id);
+    }
+  };
+
   return (
-    <div className="flex items-center gap-3 py-4">
+    <div
+      onClick={() => handleClick(comment.commentId)}
+      className={`flex items-center gap-3 py-4 ${
+        selectedComment === comment.commentId ? "bg-[#f7f7f7]" : ""
+      }`}
+    >
       <div className="w-[40px] h-[40px] rounded-full overflow-hidden">
         <img
           className="w-full h-full object-cover"
-          src="https://blog.malcang.com/wp-content/uploads/2024/03/1-1.png"
-          alt=""
+          src={comment.profileImage}
+          alt="프로필"
         />
       </div>
       <div>

diff --git a/src/frontend/src/components/common/CommentInput.tsx b/src/frontend/src/components/common/CommentInput.tsx
@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from "react";
+
+type CommentInputProps = {
+  comment: string;
+  setComment: Dispatch<SetStateAction<string>>;
+  onSubmit: () => void;
+};
+
+const CommentInput = ({ comment, setComment, onSubmit }: CommentInputProps) => {
+  return (
+    <div className="fixed bottom-0 left-0 z-[200] w-full bg-white border-t border-gray-300 px-4 py-4 flex items-center gap-2">
+      <input
+        type="text"
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        placeholder="댓글을 입력하세요"
+        className="flex-grow border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring focus:ring-blue-300"
+      />
+      <button
+        onClick={onSubmit}
+        className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600"
+      >
+        등록
+      </button>
+    </div>
+  );
+};
+
+export default CommentInput;
diff --git a/src/frontend/src/components/common/Reply.tsx b/src/frontend/src/components/common/Reply.tsx
@@ -1,11 +1,16 @@
 import { ReactComponent as ReplyIcon } from "@/assets/icons/ReplyIcon.svg";
-import Comment from "@/components/common/Comment";
+import { comment, replies } from "@/types/board";
+import Comment from "./Comment";
 
-const Reply = () => {
+type ReplyProps = {
+  reply: comment;
+};
+
+const Reply = ({ reply }: ReplyProps) => {
   return (
     <div className="ml-4 flex items-center gap-2">
       <ReplyIcon />
-      {/* <Comment  /> */}
+      <Comment comment={reply} />
     </div>
   );
 };

diff --git a/src/frontend/src/components/communityDetail/CommentsList.tsx b/src/frontend/src/components/communityDetail/CommentsList.tsx
@@ -1,18 +1,33 @@
 import Comment from "@/components/common/Comment";
 import Reply from "@/components/common/Reply";
 import { comment } from "@/types/board";
+import { Dispatch, SetStateAction } from "react";
 
 type CommentsListProps = {
   comments: comment[];
+  selectedComment: number | null;
+  setSelectedComment: Dispatch<SetStateAction<number | null>>;
 };
 
-const CommentsList = ({ comments }: CommentsListProps) => {
+const CommentsList = ({
+  comments,
+  selectedComment,
+  setSelectedComment,
+}: CommentsListProps) => {
   return (
     <div>
       {comments.map((comment) => (
-        <Comment comment={comment} />
+        <>
+          <Comment
+            key={comment.commentId}
+            comment={comment}
+            setSelectedComment={setSelectedComment}
+            selectedComment={selectedComment}
+          />
+          {comment.replies &&
+            comment.replies.map((reply) => <Reply reply={reply} />)}
+        </>
       ))}
-      {/* <Reply /> */}
     </div>
   );
 };

diff --git a/src/frontend/src/hooks/useBoard.ts b/src/frontend/src/hooks/useBoard.ts
@@ -2,7 +2,8 @@ import {
   getBoardData,
   getBoardDetailData,
   postBoard,
-  postBoardLike,
+  postBoardCommemt,
+  postBoardCommentLike,
   searchBoard,
 } from "@/apis/board";
 import { boardRequest } from "@/types/board";
@@ -55,13 +56,13 @@ export const useBoardSearch = (boardName: string, keyword: string) => {
   });
 };
 
-export const useBoardLike = (
+export const useBoardCommentLike = (
   boardName: string,
   postId: number,
   commentId: number
 ) => {
   return useMutation({
-    mutationFn: () => postBoardLike(boardName, postId, commentId),
+    mutationFn: () => postBoardCommentLike(boardName, postId, commentId),
     onSuccess: () => {
       console.log("커뮤니티 좋아요 성공");
     },
@@ -70,3 +71,22 @@ export const useBoardLike = (
     },
   });
 };
+
+export const useBoardCommentPost = (
+  boardName: string,
+  postId: number,
+  content: string,
+  parentCommentId: number | null
+) => {
+  return useMutation({
+    mutationFn: () =>
+      postBoardCommemt(boardName, postId, content, parentCommentId),
+    onSuccess: () => {
+      console.log("커뮤니티 댓글 작성 성공");
+      window.location.reload();
+    },
+    onError: () => {
+      console.log("커뮤니티 댓글 작성 실패");
+    },
+  });
+};
diff --git a/src/frontend/src/pages/CommunityDetail/CommunityDetailPage.tsx b/src/frontend/src/pages/CommunityDetail/CommunityDetailPage.tsx
@@ -4,13 +4,27 @@ import { ReactComponent as HeartIcon } from "@/assets/icons/HeartIcon.svg";
 import { ReactComponent as BackIcon } from "@/assets/icons/BackIcon.svg";
 import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { useBoardDetailGet } from "@/hooks/useBoard";
+import { useBoardCommentPost, useBoardDetailGet } from "@/hooks/useBoard";
 import Spinner from "@/components/common/Spinner";
+import CommentInput from "@/components/common/CommentInput";
 
 const CommunityDetailPage = () => {
   const navigate = useNavigate();
-  const { id } = useParams();
+  const { id, board } = useParams();
   const [isScrapped, setIsScrapped] = useState(false);
+  const [comment, setComment] = useState("");
+  const [selectedComment, setSelectedComment] = useState<number | null>(null);
+
+  const { mutate } = useBoardCommentPost(
+    String(board),
+    Number(id),
+    comment,
+    selectedComment
+  );
+  const handleCommentSubmit = () => {
+    console.log(comment);
+    mutate();
+  };
 
   const { data, isLoading } = useBoardDetailGet({
     boardName: "FREE",
@@ -24,6 +38,11 @@ const CommunityDetailPage = () => {
       ) : (
         data && (
           <>
+            <CommentInput
+              comment={comment}
+              setComment={setComment}
+              onSubmit={handleCommentSubmit}
+            />
             <div className="shadow-sm w-full flex justify-start p-4 mb-6">
               <BackIcon onClick={() => navigate("/community")} />
             </div>
@@ -36,7 +55,11 @@ const CommunityDetailPage = () => {
                   stroke={isScrapped ? "#F17171" : "#afafaf"}
                 />
               </div>
-              <CommentsList comments={data.comments} />
+              <CommentsList
+                comments={data.comments}
+                setSelectedComment={setSelectedComment}
+                selectedComment={selectedComment}
+              />
             </div>
           </>
         )

diff --git a/src/frontend/src/types/board.ts b/src/frontend/src/types/board.ts
@@ -18,15 +18,17 @@ export type replies = {
   commentId: number;
   content: string;
   writer: string;
+  profileImage?: string;
   createdAt: string;
 };
 
 export type comment = {
   commentId: number;
   content: string;
   writer: string;
+  profileImage?: string;
   createdAt: string;
-  replies: replies[];
+  replies?: replies[]; // replies와 타입 통일을 위함
 };
 
 export type boardDetailResponse = {