fix: 修正された集計結果の表示と型の明示化

Author: yamachu

frontend/src/components/SurveyForm.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -14,11 +13,12 @@ import {
   Radio,
   RadioGroup,
 } from "@mui/material";
-import type { Survey } from "../types/survey";
+import type { SubmitHandler } from "react-hook-form";
 
-// Zodスキーマ
-
-const communityAffiliationOptions = ["VS Code Meetup", "GitHub dockyard"];
+const communityAffiliationOptions = [
+  "VS Code Meetup",
+  "GitHub dockyard",
+] as const;
 const jobRoleOptions = [
   "フロントエンドエンジニア",
   "バックエンドエンジニア",
@@ -27,13 +27,10 @@ const jobRoleOptions = [
   "データエンジニア",
   "モバイルエンジニア",
   "その他",
-];
+] as const;
 
 const schema = z.object({
-  communityAffiliation: z
-    .array(z.enum(["VS Code Meetup", "GitHub dockyard"]))
-    .optional()
-    .default([]),
+  communityAffiliation: z.array(z.enum(["VS Code Meetup", "GitHub dockyard"])),
   jobRole: z
     .array(
       z.enum([
@@ -60,10 +57,12 @@ const schema = z.object({
 
 type FormValues = z.infer<typeof schema>;
 
-export const SurveyForm: React.FC<{
-  onSubmit: (data: Survey) => void;
+type SurveyFormProps = {
+  onSubmit: SubmitHandler<FormValues>;
   loading?: boolean;
-}> = ({ onSubmit, loading }) => {
+};
+
+export function SurveyForm({ onSubmit, loading }: SurveyFormProps) {
   const {
     control,
     handleSubmit,
@@ -101,7 +100,7 @@ export const SurveyForm: React.FC<{
                         field.onChange([...(field.value || []), c]);
                       else
                         field.onChange(
-                          (field.value || []).filter((v: string) => v !== c)
+                          (field.value || []).filter((v) => v !== c)
                         );
                     }}
                   />
@@ -134,9 +133,7 @@ export const SurveyForm: React.FC<{
                       if (e.target.checked)
                         field.onChange([...field.value, role]);
                       else
-                        field.onChange(
-                          field.value.filter((v: string) => v !== role)
-                        );
+                        field.onChange(field.value.filter((v) => v !== role));
                     }}
                   />
                 }
@@ -224,4 +221,4 @@ export const SurveyForm: React.FC<{
       </Button>
     </Box>
   );
-};
+}

frontend/src/components/SurveyResult.tsx

@@ -20,7 +20,7 @@ export const SurveyResult: React.FC<{ result: SurveyResultType }> = ({
       <Typography variant="h6" sx={{ mb: 2 }}>
         集計結果
       </Typography>
-      <Typography>総回答数: {result.total}</Typography>
+      <Typography>総回答数: {result.data.totalResponses}</Typography>
       <Typography variant="subtitle1" sx={{ mt: 2 }}>
         職種別集計
       </Typography>
@@ -33,10 +33,10 @@ export const SurveyResult: React.FC<{ result: SurveyResultType }> = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            {Object.entries(result.jobRoleStats).map(([role, count]) => (
+            {Object.entries(result.data.jobRole).map(([role, count]) => (
               <TableRow key={role}>
                 <TableCell>{role}</TableCell>
-                <TableCell>{count}</TableCell>
+                <TableCell>{count as number}</TableCell>
               </TableRow>
             ))}
           </TableBody>
@@ -52,12 +52,14 @@ export const SurveyResult: React.FC<{ result: SurveyResultType }> = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            {Object.entries(result.eventRatingStats).map(([rating, count]) => (
-              <TableRow key={rating}>
-                <TableCell>{rating}</TableCell>
-                <TableCell>{count}</TableCell>
-              </TableRow>
-            ))}
+            {Object.entries(result.data.eventRating.distribution).map(
+              ([rating, count]) => (
+                <TableRow key={rating}>
+                  <TableCell>{rating}</TableCell>
+                  <TableCell>{count as number}</TableCell>
+                </TableRow>
+              )
+            )}
           </TableBody>
         </Table>
       </TableContainer>