diff --git a/apps/cs/src/pages/survey/model/survey-interface.ts b/apps/cs/src/pages/survey/model/survey-interface.ts index 52dab352f..030a4ff7b 100644 --- a/apps/cs/src/pages/survey/model/survey-interface.ts +++ b/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), }); diff --git a/apps/cs/src/pages/survey/ui/user-survey-result.tsx b/apps/cs/src/pages/survey/ui/user-survey-result.tsx index e79c57eb2..96ab5ee55 100644 --- a/apps/cs/src/pages/survey/ui/user-survey-result.tsx +++ b/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({ @@ -102,10 +118,86 @@ function UserSurveyResult({ srvySn }: { srvySn: string }) { ))} +
+ {data?.qitems.map((item, index) => ( + + {item.qstnTypeCd === "RADIO" && ( + + )} + + ))} ); } +type QuestionWithArticles = z.infer; + +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 ( +
+

+ + {index + 1} + + {data?.qstnCn} +

+
+
+ } + /> +
+ + + + 항목 + 응답수 + 응답률 + + + + {data?.articles.map((article) => ( + + {article.artclCn} + {article.rspnsCount} + {article.rspnsRate.toFixed(2)}% + + ))} + +
+
+
+ ); +} + export { UserSurveyResult };