fix: 個別の回答表示ページで、複数選択できる質問が複数の質問として表示されるのを修正

src/app/(authed)/admin/answer/[answerId]/_components/AnswerDetails.tsx

@@ -10,7 +10,27 @@ const AnswerDetails = (props: {
   answers: GetAnswerResponse;
   questions: GetQuestionsResponse;
 }) => {
-  console.log(props.answers, props.questions);
+  type AnswerWithQuestionInfo = {
+    questionTitle: string;
+    answers: string[];
+  };
+
+  // NOTE: TypeScript の Set 型は順番を維持する
+  // ref: https://zenn.dev/notfounds/scraps/d8a0e4b99ddc38
+  const answerWithQeustionInfo = Array.from(
+    new Set(props.answers.answers.map((answer) => answer.question_id))
+  ).map((questionId) => {
+    const answerWithQuestionInfo: AnswerWithQuestionInfo = {
+      questionTitle:
+        props.questions.find((question) => question.id == questionId)?.title ||
+        '',
+      answers: props.answers.answers
+        .filter((answer) => answer.question_id == questionId)
+        .map((answer) => answer.answer),
+    };
+
+    return answerWithQuestionInfo;
+  });
 
   return (
     <Grid container spacing={2}>
@@ -25,18 +45,14 @@ const AnswerDetails = (props: {
         <Typography sx={{ fontWeight: 'bold' }}>回答日時</Typography>
         {formatString(props.answers.timestamp)}
       </Grid>
-      {props.answers.answers.map((answer, index) => (
+      {answerWithQeustionInfo.map((answer, index) => (
         <Grid item xs={12} key={index}>
           <Grid container spacing={2}>
             <Grid item xs={12} sx={{ fontWeight: 'bold' }}>
-              {
-                props.questions.find(
-                  (question) => question.id == answer.question_id
-                )?.title
-              }
+              {answer.questionTitle}
             </Grid>
             <Grid item xs={12}>
-              {answer.answer}
+              {answer.answers.join(', ')}
             </Grid>
           </Grid>
         </Grid>