feat: 게시판 상세 및 삭제 기능 작업

2025-04-29 19:56:56 +09:00
parent 50b97a466e
commit 8a9e4bbf96
10 changed files with 176 additions and 16 deletions
@@ -0,0 +1 @@
+export { Post } from "./ui/post";
@@ -0,0 +1,51 @@
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { Button } from "@common/components/ui";
+import { PostApi } from "@/entities/post";
+
+type PostActionProps = {
+  bbsId: string;
+  pstNo: string;
+  children: React.ReactNode;
+};
+
+function PostAction({ children, bbsId, pstNo }: PostActionProps) {
+  const router = useRouter();
+  const { confirm } = useConfirm();
+
+  const { mutate: deletePost } = useMutation({
+    mutationFn: () => PostApi.deletePost(bbsId, pstNo),
+    onSuccess: () => {
+      router.back();
+    },
+  });
+
+  const onDelete = async () => {
+    if (await confirm("삭제하시겠습니까?")) deletePost();
+  };
+
+  return (
+    <div>
+      {children}
+      <div className="flex justify-center gap-4 pb-12 pt-10">
+        <Button
+          size="lg"
+          color="white"
+          type="button"
+          onClick={() => router.back()}
+        >
+          목록
+        </Button>
+        <Button size="lg" type="submit">
+          수정
+        </Button>
+        <Button size="lg" color="red" type="button" onClick={onDelete}>
+          삭제
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { PostAction };
@@ -0,0 +1,46 @@
+"use client";
+
+import dayjs from "dayjs";
+import { useQuery } from "@tanstack/react-query";
+import { PostApi } from "@/entities/post";
+import { ENDPOINT } from "@/shared/config";
+import { PostAction } from "./post-action";
+
+function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
+  const { data: postData } = useQuery({
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
+    queryFn: () => PostApi.getPostInfo(bbsId, pstNo),
+  });
+
+  return (
+    <PostAction bbsId={bbsId} pstNo={pstNo}>
+      <div className="card card-border !p-8">
+        <h3 className="text-[2rem] font-bold">{postData?.pstTtl}</h3>
+        <div className="card !m-0 !mt-8 bg-accent">
+          <ul className="flex gap-8 p-4 text-xl text-label">
+            <li>
+              작성자: <b>{postData?.wrtrNm}</b>
+            </li>
+            <li>
+              등록일: <b>{dayjs(postData?.regDt).format("YYYY-MM-DD")}</b>
+            </li>
+            <li>
+              조회수: <b>{postData?.inqNocs}</b>
+            </li>
+          </ul>
+        </div>
+        <hr className="mt-8" />
+        <div
+          className="min-h-[40rem] p-8"
+          dangerouslySetInnerHTML={{ __html: postData?.pstCn ?? "" }}
+        />
+        <hr className="mt-8" />
+        <div className="flex items-center gap-4 p-8">
+          <span>첨부파일</span>
+        </div>
+      </div>
+    </PostAction>
+  );
+}
+
+export { Post };