feat: 게시물 평가 기능 추가

apps/cs/src/shared/config/api.ts

@@ -55,6 +55,7 @@ export const ENDPOINT = {
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
+    POST_EVALUATION: "/board-service/api/v1/pstEvl",
   },
 };
 

apps/cs/src/widgets/post/api/post-evaluation-service.ts

@@ -0,0 +1,14 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  PostEvaluationPayload,
+  PostEvaluationService,
+} from "../model/post-evaluation-interface";
+
+export class PostEvaluationApiService implements PostEvaluationService {
+  public async postEvaluation(payload: PostEvaluationPayload) {
+    await client.post(ENDPOINT.BOARD_SERVICE.POST_EVALUATION, payload);
+  }
+}
+
+export const PostEvaluationApi = new PostEvaluationApiService();

apps/cs/src/widgets/post/model/post-evaluation-interface.ts

@@ -0,0 +1,10 @@
+export interface PostEvaluationPayload {
+  pstNo: number;
+  evlIp?: string;
+  evlDt?: string;
+  evlScr: number;
+}
+
+export interface PostEvaluationService {
+  postEvaluation: (payload: PostEvaluationPayload) => Promise<void>;
+}

apps/cs/src/widgets/post/ui/post.tsx

@@ -5,14 +5,21 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Skeleton } from "@common/components";
+import {
+  Button,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Skeleton,
+} from "@common/components";
 import { AttachmentApi } from "@/entities/attachment";
 import { PostApi } from "@/entities/post";
-import { useAlertStore, useMutationWrapper, useMenuStore } from "@/shared/lib";
+import { BoardApi } from "@/entities/board";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper, useMenuStore } from "@/shared/lib";
 import { PostAction } from "./post-action";
 import { PostComment } from "./post-comment";
-import { BoardApi } from "@/entities/board";
+import { PostEvaluationApi } from "../api/post-evaluation-service";
 
 function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const router = useRouter();
@@ -20,6 +27,7 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
   const { bbsInfo, setBbsInfo } = useMenuStore((state) => state);
 
   const [filename, setFilename] = useState("");
+  const [evlScr, setEvlScr] = useState(5);
 
   const { data: boardInfo } = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.BBS, bbsId],
@@ -72,6 +80,17 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     },
   });
 
+  const { mutate: postEvaluation } = useMutationWrapper({
+    mutationFn: (evlScr: number) =>
+      PostEvaluationApi.postEvaluation({
+        pstNo: parseInt(pstNo),
+        evlScr,
+      }),
+    onSuccess: () => {
+      alert("게시물 평가가 완료되었습니다.");
+    },
+  });
+
   const handleDownload = async () => {
     if (!downloadResponse) return;
     try {
@@ -187,6 +206,53 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
               </>
             )
           )}
+          {bbsInfo?.dgstfnEvlUseYn === "Y" && (
+            <>
+              <hr />
+              <div className="mt-8 flex items-center gap-2 px-4">
+                <p>
+                  이 페이지에서 제공하는
+                  <br />
+                  정보에 대하여 만족하시나요?
+                </p>
+                <div className="ml-4 rounded-sm border border-border bg-accent px-8 py-4">
+                  <RadioGroup
+                    value={evlScr.toString()}
+                    onValueChange={(value) => setEvlScr(parseInt(value))}
+                    className="flex items-center space-x-4"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="5" id="evl5" />
+                      <Label htmlFor="evl5">매우 만족 😊</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="4" id="evl4" />
+                      <Label htmlFor="evl4">만족 🙂</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="3" id="evl3" />
+                      <Label htmlFor="evl3">보통 😐</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="2" id="evl2" />
+                      <Label htmlFor="evl2">불만족 🙁</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="1" id="evl1" />
+                      <Label htmlFor="evl1">매우 불만족 😞</Label>
+                    </div>
+                  </RadioGroup>
+                </div>
+                <Button
+                  size="lg"
+                  color="white"
+                  onClick={() => postEvaluation(evlScr)}
+                >
+                  평가하기
+                </Button>
+              </div>
+            </>
+          )}
         </div>
       </PostAction>
       <PostComment bbsId={parseInt(bbsId)} pstNo={parseInt(pstNo)} />