Post 답글 기능 구현

src/apis/httpClient/httpClient.ts

@@ -162,6 +162,7 @@ export default {
   user: new HttpClient("api/user", axiosConfig),
   timetable: new HttpClient("api/timetable", axiosConfig),
   post: new HttpClient("api/post/", axiosConfig),
+  recomment: new HttpClient("api/recomment", axiosConfig),
   comment: new HttpClient("api/comment", axiosConfig),
   refresh: new HttpClient("api/auth/refresh/access", axiosConfig),
   auth: new HttpClient("api/auth/", axiosConfig),

src/constants/key.constant.ts

@@ -3,6 +3,7 @@ const KEY = {
   TIMETABLE: "useTimetable",
   POST: "usePost",
   COMMENT: "useComment",
+  RECOMMENT: "useRecomment",
   BAMBOO: "useBamboo",
   BAMBOO_ADMIN: "useBambooAdmin",
 } as const;

src/helpers/checkTextOverflow.helper.ts

@@ -0,0 +1,12 @@
+const checkTextOverflow = (content: string) => {
+  const sentences = content.split("\n");
+  const depth = sentences.length;
+
+  if (depth > 4) {
+    const summaryContent = sentences.slice(0, 4).join("\n");
+    return `${summaryContent}...`;
+  }
+  return content;
+};
+
+export default checkTextOverflow;

src/helpers/getTextDepth.helper.ts

@@ -0,0 +1,6 @@
+const getTextDepth = (content: string) => {
+  const depth = content.split("\n").length;
+  return depth;
+};
+
+export default getTextDepth;

src/helpers/index.ts

@@ -6,3 +6,5 @@ export { default as isAdmin } from "./isAdmin.helper";
 export { default as filterInputPost } from "./filterInputPost.helper";
 export { default as getWriteContentLabel } from "./getWriteContentLabel.helper";
 export { default as checkPostValid } from "./checkPostValid.helper";
+export { default as checkTextOverflow } from "./checkTextOverflow.helper";
+export { default as getTextDepth } from "./getTextDepth.helper";

src/hooks/useTextarea.ts

@@ -0,0 +1,48 @@
+import React from "react";
+
+const useTextarea = (defaultContent?: string) => {
+  const [content, setContent] = React.useState(defaultContent || "");
+  const [textareaHeight, setTextareaHeight] = React.useState({
+    row: 2,
+    lineBreak: [] as Array<boolean>,
+  });
+
+  const onInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { scrollHeight, clientHeight, value } = e.target;
+
+    if (scrollHeight > clientHeight) {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
+      }));
+    }
+    if (textareaHeight.lineBreak[value.length]) {
+      setTextareaHeight((prev) => ({
+        row: prev.row - 1,
+        lineBreak: { ...prev.lineBreak, [value.length]: false },
+      }));
+    }
+  };
+
+  const onKeyEnter = (
+    e: KeyboardEvent & React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    if (e.code === "Enter") {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: true },
+      }));
+    }
+  };
+
+  return {
+    content,
+    setContent,
+    row: textareaHeight.row,
+    handleResizeTextAreaOnInput: onInput,
+    handleResizeTextareaKeyEnter:
+      onKeyEnter as unknown as React.KeyboardEventHandler<HTMLTextAreaElement>,
+  };
+};
+
+export default useTextarea;

src/interfaces/index.ts

@@ -15,3 +15,4 @@ export type { default as IBambooPost } from "./bambooPost.interface";
 export type { default as IPostInfiniteList } from "./postInfiniteList.interface";
 export type { default as IInfiniteResult } from "./infiniteResult.interface";
 export type { default as IInputPost } from "./inputPost.interface";
+export type { default as IRecomment } from "./recomment.interface";

src/interfaces/recomment.interface.ts

@@ -0,0 +1,5 @@
+import IComment from "./comment.interface";
+
+export default interface IRecomment extends Omit<IComment, "postId"> {
+  commentId: number;
+}

src/page/forum-post/layouts/PostBody/CommentList.tsx → src/page/forum-post/layouts/PostBody/Comment/CommentList.tsx

@@ -5,7 +5,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import { PuffLoader } from "react-spinners";
 import { IComment } from "@/interfaces";
 import CommentListItem from "./CommentListItem";
-import { useCommentListQuery } from "../../services/query.service";
+import { useCommentListQuery } from "../../../services/query.service";
 
 interface ICommentListBoxProps {
   postId: string;