feat: 설문 결과 항목 작업 완료

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

@@ -1,5 +1,6 @@
 "use client";
 
+import dayjs from "dayjs";
 import type { z } from "zod";
 import { Fragment, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
@@ -26,11 +27,21 @@ import {
   ArcElement,
   Tooltip,
   Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
   type PluginChartOptions,
 } from "chart.js";
-import { Pie } from "react-chartjs-2";
+import { Pie, Bar } from "react-chartjs-2";
 
-ChartJS.register(ArcElement, Tooltip, Legend);
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+);
 
 function UserSurveyResult({ srvySn }: { srvySn: string }) {
   const [params, setParams] = useState<UserSurveyResultParams>({
@@ -124,6 +135,12 @@ function UserSurveyResult({ srvySn }: { srvySn: string }) {
               {item.qstnTypeCd === "RADIO" && (
                 <WithPieChartResult data={item} index={index} />
               )}
+              {item.qstnTypeCd === "CHECK" && (
+                <WithBarChartResult data={item} index={index} />
+              )}
+              {item.qstnTypeCd === "INPUT" && (
+                <InputResult data={item} index={index} />
+              )}
             </Fragment>
           ))}
         </div>
@@ -163,7 +180,7 @@ function WithPieChartResult({
   };
 
   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}
@@ -196,7 +213,108 @@ function WithPieChartResult({
           </TableBody>
         </Table>
       </div>
-    </div>
+    </>
+  );
+}
+
+function WithBarChartResult({
+  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: "bottom",
+      },
+    },
+  };
+
+  return (
+    <>
+      <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">
+          <Bar
+            data={chartData}
+            options={options as PluginChartOptions<"bar">}
+          />
+        </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>
+    </>
+  );
+}
+
+function InputResult({
+  data,
+  index,
+}: {
+  data: QuestionWithArticles;
+  index: number;
+}) {
+  return (
+    <>
+      <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="card card-border !mx-0 flex max-h-[40rem] flex-col gap-2 overflow-auto">
+        {data?.articles[0]?.inputRslts.map((input, index) => (
+          <div
+            className="rounded-sm border border-border bg-accent p-4"
+            key={`input-${index}`}
+          >
+            <div className="flex items-center justify-between">
+              <span className="font-medium">{input.rspdntNm}</span>
+              <span className="text-[1.2rem]">
+                {dayjs(input.ansDt).format("YYYY-MM-DD")}
+              </span>
+            </div>
+            <p className="mt-2 whitespace-pre-wrap">{input.ansCn}</p>
+          </div>
+        ))}
+      </div>
+    </>
   );
 }