refactor(QYOG-94): 상세, 글생성 게시판 통합

src/components/UI/Table/Table.tsx → src/components/UI/Board/Table/Table.tsx

@@ -13,14 +13,15 @@ import { Converter } from "@/utils";
 
 interface PostData {
   id: number;
+  type: string;
 }
 
 interface TableData {
   data:
     | Swagger.Api.FreePostFindAllAndCount.ResponseBody
     | Swagger.Api.NoticePostFindAllAndCount.ResponseBody;
   type: string;
-  handleClickPostDetail: (el: PostData) => void;
+  handleClickPostDetail: ({ id, type }: PostData) => void;
 }
 
 export default function Table({
@@ -79,7 +80,7 @@ export default function Table({
         return (
           <S.Tr
             key={post.id}
-            onClick={() => handleClickPostDetail(post)}
+            onClick={() => handleClickPostDetail({ id: post.id, type })}
             type={type}
           >
             <S.Th

src/components/UI/Quill/Quill.tsx

@@ -22,13 +22,19 @@ const modules = {
 
 const formats = [
   "header",
-  "font",
-  "size",
   "bold",
   "italic",
   "underline",
   "strike",
   "blockquote",
+  "list",
+  "bullet",
+  "indent",
+  "link",
+  "image",
+  "align",
+  "color",
+  "background",
 ];
 
 interface QuillProps {
@@ -79,6 +85,7 @@ export default function Quill({
       }}
     >
       <label htmlFor="title">Title</label>
+
       <input
         type="text"
         value={value.title}
@@ -87,14 +94,16 @@ export default function Quill({
         onChange={handleTitleChange}
         required
       />
+      <Button>{value ? "생성" : "수정"}</Button>
+
       <QuillNoSSRWrapper
         modules={modules}
         formats={formats}
         value={value.description}
         onChange={handleContentChange}
         theme="snow"
+        style={{ height: "600px" }}
       />
-      <Button>{value ? "생성" : "수정"}</Button>
       <div dangerouslySetInnerHTML={{ __html: value.description }} />
     </form>
   );

src/containers/Board/DetailBoard/DetailBoard.tsx

@@ -0,0 +1,101 @@
+import { useRouter } from "next/router";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+import * as S from "./emotion";
+import { freePostsAPI, noticePostsAPI } from "@/apis";
+import {
+  FreePostDetailResponseDto,
+  NoticePostDetailResponseDto,
+} from "@/apis/data-contracts";
+
+export default function DetailBoard() {
+  const router = useRouter();
+  const { postId, type } = router.query;
+
+  const { data } = useQuery({
+    queryFn: async () => {
+      let response;
+      if (type === "free") {
+        response = await freePostsAPI.freePostFindOneOrNotFound(Number(postId));
+      } else {
+        response = await noticePostsAPI.noticePostFindOneOrNotFound(
+          Number(postId)
+        );
+      }
+
+      return response.data;
+    },
+
+    queryKey: ["post", postId, type],
+    enabled: postId !== undefined,
+  });
+
+  const { mutate } = useMutation({
+    mutationKey: ["post", postId, type],
+    mutationFn: async () => {
+      let response;
+      if (type === "free") {
+        response = await freePostsAPI.freePostIncrementHit(Number(postId));
+      } else {
+        response = await noticePostsAPI.noticePostIncreaseHit(Number(postId));
+      }
+    },
+    onSuccess() {
+      console.log(data);
+    },
+    onError(error) {
+      console.log(error);
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      mutate();
+    }
+  }, [data, mutate]);
+
+  const handleClickDelete = () => {
+    freePostsAPI.freePostRemove(Number(postId)).then(() => {
+      router.back();
+    });
+  };
+
+  const handleClickUpdate = async () => {
+    router.push({
+      pathname: `/board/free/write/`,
+      query: {
+        Id: postId,
+      },
+    });
+  };
+
+  return (
+    <S.Container>
+      <S.Title>
+        {
+          (type === "free"
+            ? (data as FreePostDetailResponseDto)?.freePost
+            : (data as NoticePostDetailResponseDto)?.noticePost
+          )?.title
+        }
+      </S.Title>
+      <S.WrapBar>
+        <S.Btn onClick={handleClickUpdate}>수정</S.Btn>
+        <S.Btn onClick={handleClickDelete}>삭제</S.Btn>
+      </S.WrapBar>
+      <S.WrapDesc>
+        <S.Desc>
+          <S.Title>
+            {
+              (type === "free"
+                ? (data as FreePostDetailResponseDto)?.freePost
+                : (data as NoticePostDetailResponseDto)?.noticePost
+              )?.description
+            }
+          </S.Title>
+        </S.Desc>
+      </S.WrapDesc>
+    </S.Container>
+  );
+}

src/containers/Board/DetailBoard/index.ts

@@ -0,0 +1 @@
+export { default as DetailBoard } from "./DetailBoard";

src/containers/Board/SearchWriter/SearchWriter.tsx

@@ -21,7 +21,8 @@ export default function SearchWriter({ type }: BoardType) {
 
   function handleClickPostWrite() {
     router.push({
-      pathname: `free/write/`,
+      pathname: `board/write/`,
+      query: type,
     });
   }