update: Table>選択肢をulで表示

なんで文字列として表示してたんだろう
watasuke102 · Feb 25, 2024 · 23ee862 · 23ee862
1 parent 6771bf9
commit 23ee862
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/app/examtable/_components/Table/Table.module.scss b/src/app/examtable/_components/Table/Table.module.scss
@@ -72,6 +72,13 @@
   }
 }
 
+.choices_header {
+  display: block;
+  text-align: center;
+  font-size: 1.1em;
+  font-weight: bold;
+}
+
 // ボタン
 .button_container {
   position: fixed;

diff --git a/src/app/examtable/_components/Table/Table.tsx b/src/app/examtable/_components/Table/Table.tsx
@@ -39,24 +39,19 @@ export function Table(props: ExamTableProps): React.ReactElement {
     [0, 0],
   ) ?? [undefined, undefined];
 
-  const choices: string[] = React.useMemo(
+  const choices: string[][] = React.useMemo(
     () =>
       props.exam.map(exam => {
-        let array: string[];
         switch (exam.type) {
           case 'Select':
           case 'MultiSelect':
           case 'ListSelect':
-            array = exam.question_choices ?? [];
-            break;
+            return exam.question_choices ?? [];
           case 'Sort':
-            array = Shuffle(exam.answer);
-            break;
+            return Shuffle(exam.answer);
           default:
-            array = [];
-            break;
+            return [];
         }
-        return array.join(' | ');
       }),
     [],
   );
@@ -127,11 +122,16 @@ export function Table(props: ExamTableProps): React.ReactElement {
               <tr key={`tr-${i}`}>
                 <td>
                   {exam.question}
-                  {choices[i] !== '' && (
+                  {choices[i].length !== 0 && (
                     <>
                       <br />
                       <hr />
-                      <span className={css.sort_}>選択肢：{choices[i]}</span>
+                      <span className={css.choices_header}>[選択肢]</span>
+                      <ul>
+                        {choices[i].map((e, j) => (
+                          <li key={`choice${i}${j}`}>{e}</li>
+                        ))}
+                      </ul>
                     </>
                   )}
                 </td>