授業IDを選択時に表示 (#464)

<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。-->
# PRの概要

授業IDがないと判別できないケースが多いため選択時に表示するようにした

<img width="421" alt="image"
src="https://github.com/user-attachments/assets/a3b97cbd-3059-4192-9b56-77358cfb7b49">

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [x] 手動での動作検証を行ったか
- [x] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: nakaterm

web/src/components/course/components/SelectCourseDialog.tsx

@@ -69,21 +69,35 @@ export default function SelectCourseDialog({
       </DialogTitle>
       <DialogContent>
         <>
-          <Box display="flex" alignItems="center" sx={{ width: "100%" }}>
-            <Typography variant="body1">
-              現在の授業: {currentEdit?.course?.name ?? "-"}
-            </Typography>
-            <IconButton
-              aria-label="delete"
-              onClick={async () => {
-                if (!currentEdit?.course?.id) return;
+          <Box>
+            <Box px={1} pb={2}>
+              <Typography variant="caption">現在の授業</Typography>
+              {currentEdit?.course ? (
+                <Box display="flex" alignItems="center" sx={{ width: "100%" }}>
+                  <Box flex={1}>
+                    <Typography variant="body1">
+                      {currentEdit?.course?.name ?? "-"}
+                    </Typography>
+                    <Typography variant="body2">{`${currentEdit?.course?.teacher ?? "-"} / ${
+                      currentEdit?.course?.id ?? "-"
+                    }`}</Typography>
+                  </Box>
+                  <IconButton
+                    aria-label="delete"
+                    onClick={async () => {
+                      if (!currentEdit?.course?.id) return;
 
-                setNewCourse(currentEdit.course);
-                setIsDeleteConfirmDialogOpen(true);
-              }}
-            >
-              <DeleteIcon />
-            </IconButton>
+                      setNewCourse(currentEdit.course);
+                      setIsDeleteConfirmDialogOpen(true);
+                    }}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Box>
+              ) : (
+                <Typography>未登録</Typography>
+              )}
+            </Box>
           </Box>
           <TextField
             onChange={(e) => {
@@ -111,7 +125,10 @@ export default function SelectCourseDialog({
                         setIsConfirmDialogOpen(true);
                       }}
                     >
-                      {`${course.name}(${course.teacher})`}
+                      <Box>
+                        <Typography>{course.name}</Typography>
+                        <Typography variant="caption">{`${course.teacher} / ${course.id}`}</Typography>
+                      </Box>
                     </ListItemButton>
                   </ListItem>
                 ))}