Comment 컴포넌트 관련 구현 (#307)

* feat(constants): comment

* feat(api-post): comment api

* feat:(modules): comment button

* feat:(modules): comment content

* feat:(modules): comment input

* feat:(modules): comment render

* feat:(modules): comment tools

* feat:(modules): comment index

* feat:(hooks-react-query): comment

* feat:(page): comment 컴포넌트 결합

Author: MINJE-98

constants/comment/button.ts

@@ -0,0 +1,28 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+export const COMMENT_INPUT: LanguageInterface = {
+  [LANGUAGE.ko]: "댓글 작성",
+  [LANGUAGE.en]: "Writing a comment",
+};
+
+export const REPLY_INPUT: LanguageInterface = {
+  [LANGUAGE.ko]: "답글 작성",
+  [LANGUAGE.en]: "Writing a reply",
+};
+
+export const UPDATE_COMMENT: LanguageInterface = {
+  [LANGUAGE.ko]: "댓글 수정",
+  [LANGUAGE.en]: "Updating a comment",
+};
+
+export const UPDATE_COMMENT_CANCEL: LanguageInterface = {
+  [LANGUAGE.ko]: "취소",
+  [LANGUAGE.en]: "Cancel",
+};
+
+export const UPDATE_REPLY: LanguageInterface = {
+  [LANGUAGE.ko]: "답글 수정",
+  [LANGUAGE.en]: "Updating a reply",
+};

constants/comment/error.ts

@@ -0,0 +1,10 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+const COMMENT_EMPTY: LanguageInterface = {
+  [LANGUAGE.ko]: "코멘트를 입력해주세요!",
+  [LANGUAGE.en]: "Please enter a comment!",
+};
+
+export default COMMENT_EMPTY;

constants/comment/index.ts

@@ -0,0 +1,7 @@
+import COMMENT_EMPTY from "@Constants/comment/error";
+
+export * from "./reply";
+export * from "./placeholder";
+export * from "./button";
+
+export { COMMENT_EMPTY };

constants/comment/placeholder.ts

@@ -0,0 +1,13 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+export const COMMENT_PLACEHOLDER: LanguageInterface = {
+  [LANGUAGE.ko]: "댓글을 입력하세요.",
+  [LANGUAGE.en]: "Please enter a comment.",
+};
+
+export const REPLY_PLACEHOLDER: LanguageInterface = {
+  [LANGUAGE.ko]: "답글을 입력하세요.",
+  [LANGUAGE.en]: "Please enter a reply.",
+};

constants/comment/reply.ts

@@ -0,0 +1,13 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+export const REPLY_OPEN: LanguageInterface = {
+  [LANGUAGE.ko]: "답글",
+  [LANGUAGE.en]: "Reply",
+};
+
+export const REPLY_CLOSE: LanguageInterface = {
+  [LANGUAGE.ko]: "닫기",
+  [LANGUAGE.en]: "Close",
+};

lib/api/index.ts

@@ -1,6 +1,10 @@
 import authService from "@Library/api/auth";
 import categoryService from "@Library/api/category";
-import { postService, postLikeService } from "@Library/api/post";
+import {
+  postService,
+  postLikeService,
+  commentService,
+} from "@Library/api/post";
 import usersService from "@Library/api/users";
 
 export default {
@@ -9,4 +13,5 @@ export default {
   categoryService,
   postService,
   postLikeService,
+  commentService,
 };

lib/api/post/comment/CommentRepository.ts

@@ -0,0 +1,13 @@
+import { AxiosInstance } from "axios";
+
+import { CommentApi, Configuration } from "@til-log.lab/tilog-api";
+
+export default class CommentRepository extends CommentApi {
+  constructor(
+    axios?: AxiosInstance,
+    basePath?: string,
+    configuration?: Configuration
+  ) {
+    super(configuration, basePath, axios);
+  }
+}

lib/api/post/comment/CommentService.ts

@@ -0,0 +1,62 @@
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+
+import validateToken from "@Library/api/auth/validateTokenDecorator";
+import CommentRepository from "@Library/api/post/comment/CommentRepository";
+
+import {
+  CreateCommentsRequestBodyDto,
+  DeleteCommentRequestDto,
+  GetCommentsResponseDto,
+  UpdateCommentRequestDto,
+} from "@til-log.lab/tilog-api";
+
+import ExceptionInterface from "@Library/api/exception/interface";
+
+export default class CommentService {
+  constructor(private readonly commentRepository: CommentRepository) {}
+
+  @validateToken()
+  createComment(
+    createCommentsRequestBodyDto: CreateCommentsRequestBodyDto,
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    return this.commentRepository.commentsControllerCreateComment(
+      createCommentsRequestBodyDto,
+      options
+    );
+  }
+
+  @validateToken()
+  deleteComment(
+    deleteCommentRequestDto: DeleteCommentRequestDto,
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    return this.commentRepository.commentsControllerDeleteComment(
+      deleteCommentRequestDto,
+      options
+    );
+  }
+
+  getComments(
+    postId: string,
+    replyTo?: string,
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<GetCommentsResponseDto, ExceptionInterface>> {
+    return this.commentRepository.commentsControllerGetComments(
+      postId,
+      replyTo,
+      options
+    );
+  }
+
+  @validateToken()
+  updateComment(
+    updateCommentRequestDto: UpdateCommentRequestDto,
+    options?: AxiosRequestConfig
+  ): Promise<AxiosResponse<void>> {
+    return this.commentRepository.commentsControllerUpdateComment(
+      updateCommentRequestDto,
+      options
+    );
+  }
+}

lib/api/post/index.ts

@@ -1,14 +1,19 @@
 import { TILOG_API } from "@Constants/environment";
 import httpClient from "@Library/api/httpClient";
+import CommentRepository from "@Library/api/post/comment/CommentRepository";
+import CommentService from "@Library/api/post/comment/CommentService";
 import PostLikeRepository from "@Library/api/post/like/postLikeRepository";
 import PostLikeService from "@Library/api/post/like/postLikeService";
 import PostRepository from "@Library/api/post/postRepository";
 import PostService from "@Library/api/post/postService";
 
 const postRepository = new PostRepository(httpClient.http, TILOG_API);
 const postLikeRepository = new PostLikeRepository(httpClient.http, TILOG_API);
+const commentRepository = new CommentRepository(httpClient.http, TILOG_API);
 
 const postService = new PostService(postRepository);
 const postLikeService = new PostLikeService(postLikeRepository);
 
-export { postService, postLikeService };
+const commentService = new CommentService(commentRepository);
+
+export { postService, postLikeService, commentService };

src/components/modules/comment/button/CommentDelete.tsx

@@ -0,0 +1,29 @@
+import { IoMdClose } from "react-icons/io";
+
+import { useDeleteCommentMutation } from "@Hooks/react-query/comment/useCommentMutation";
+
+import { GetCommentsItem } from "@til-log.lab/tilog-api";
+
+import GetPostDetailRequestDto from "@Library/api/post/interface/getPostDetailRequest";
+
+interface CommentDeleteProps {
+  commentId: GetCommentsItem["id"];
+  postId: GetPostDetailRequestDto["postId"];
+  replyTo: GetCommentsItem["replyTo"];
+}
+const CommentDelete = ({ commentId, postId, replyTo }: CommentDeleteProps) => {
+  const { mutate } = useDeleteCommentMutation();
+  const handleDeleteComment = () => {
+    mutate({
+      commentId,
+      postId,
+      replyTo,
+    });
+  };
+  return (
+    <button type="button" onClick={handleDeleteComment}>
+      <IoMdClose className="text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-300" />
+    </button>
+  );
+};
+export default CommentDelete;