feat: 라디오 설문 결과 차트 작업

apps/cs/src/pages/survey/model/survey-interface.ts

@@ -130,7 +130,7 @@ const articleWithResultSchema = articleSchema.omit({ mode: true }).extend({
   rspnsRate: z.number(),
 });
 
-const questionWithArticlesSchema = questionFormSchema.extend({
+export const questionWithArticlesSchema = questionFormSchema.extend({
   srvyQitemNo: z.number(),
   articles: z.array(articleWithResultSchema),
 });

apps/cs/src/pages/survey/ui/user-survey-result.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import type { z } from "zod";
+import { Fragment, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   Button,
+  getCssVariableValue,
   Table,
   TableBody,
   TableCell,
@@ -11,10 +13,24 @@ import {
   TableHeader,
   TableRow,
 } from "@common/components";
+import { SiteSelect } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
 import { SurveyApi } from "../api/survey-service";
-import type { UserSurveyResultParams } from "../model/survey-interface";
-import { SiteSelect } from "@/entities/site";
+import type {
+  questionWithArticlesSchema,
+  UserSurveyResultParams,
+} from "../model/survey-interface";
+
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  type PluginChartOptions,
+} from "chart.js";
+import { Pie } from "react-chartjs-2";
+
+ChartJS.register(ArcElement, Tooltip, Legend);
 
 function UserSurveyResult({ srvySn }: { srvySn: string }) {
   const [params, setParams] = useState<UserSurveyResultParams>({
@@ -102,10 +118,86 @@ function UserSurveyResult({ srvySn }: { srvySn: string }) {
               ))}
             </TableBody>
           </Table>
+          <hr className="my-8" />
+          {data?.qitems.map((item, index) => (
+            <Fragment key={item.srvyQitemNo}>
+              {item.qstnTypeCd === "RADIO" && (
+                <WithPieChartResult data={item} index={index} />
+              )}
+            </Fragment>
+          ))}
         </div>
       </div>
     </div>
   );
 }
 
+type QuestionWithArticles = z.infer<typeof questionWithArticlesSchema>;
+
+function WithPieChartResult({
+  data,
+  index,
+}: {
+  data?: QuestionWithArticles;
+  index: number;
+}) {
+  const labels = data?.articles.map((article) => article.artclCn);
+  const chartData = {
+    labels,
+    datasets: [
+      {
+        label: "응답수",
+        data: data?.articles.map((article) => article.rspnsCount),
+        backgroundColor: labels?.map((_, i) =>
+          getCssVariableValue(`--chart-${i + 1}`),
+        ),
+      },
+    ],
+  };
+  const options = {
+    plugins: {
+      legend: {
+        position: "right",
+      },
+    },
+  };
+
+  return (
+    <div>
+      <h2 className="flex items-center gap-2">
+        <span className="flex size-8 items-center justify-center rounded-full bg-primary text-[1.3rem] font-medium text-primary-foreground">
+          {index + 1}
+        </span>
+        <span className="font-medium">{data?.qstnCn}</span>
+      </h2>
+      <div className="flex gap-4">
+        <div className="h-[28rem] w-[28rem] shrink-0">
+          <Pie
+            data={chartData}
+            options={options as PluginChartOptions<"pie">}
+          />
+        </div>
+        <Table variant="secondary" className="text-center">
+          <TableHeader>
+            <TableRow>
+              <TableHead>항목</TableHead>
+              <TableHead>응답수</TableHead>
+              <TableHead>응답률</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data?.articles.map((article) => (
+              <TableRow key={article.srvyArtclNo}>
+                <TableCell>{article.artclCn}</TableCell>
+                <TableCell>{article.rspnsCount}</TableCell>
+                <TableCell>{article.rspnsRate.toFixed(2)}%</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
 export { UserSurveyResult };