編集画面のUI改善

[mtureit]

対応Issue

resolve #260

概要

編集画面のUI改善を行いました。

• 初回表示の選択値が反映されない問題の修正
• 入力画面をわかりやすく修正

実装内容

1. 初回表示の選択値が反映されない問題の修正

Teacherの選択表示の問題

• Teacherは正しく表示されていましたが、カリキュラムとチャプターの選択値が表示されていませんでした
• 選択値を表示するための適切な状態管理を追加しました
• Teacher表示のロジックを参考に、カリキュラムとチャプターにも同様のアプローチを適用しました

別々の表示状態による分離

• 内部データ（selectedCurriculumId）と表示用データ（displayCurriculumId）を分離
• 表示用の状態をAPIレスポンスから直接設定するよう修正

2. APIエンドポイントの修正

エラーログの分析と修正

• サーバーログから「The action 'get_record' could not be found」エラーを特定
• /api/v1/record/${recordId} から /api/v1/get_record_for_view/${recordId} に変更
• エラーログが提案していた正しいエンドポイントに修正

3. 作成ページ、編集ページの入力箇所をわかりやすく明記

画面スクリーンショット等

テスト項目

• 編集画面を開いた際に現在の内容からの編集となっている。
• Post作成時にデフォルトでRelease表示になっている。

備考

• 初期化処理と状態管理の整理
• デバッグログの追加による状態追跡の容易化
• データ初期化から表示、保存までの一貫した流れの実現

[mtureit]

実装内容

バリデーション機能を追加しました：

1. バリデーション関数の追加

• isSubmitDisabled()関数を追加して、以下の条件をチェック：

  • Curriculumが選択されている (displayCurriculumId)
  • Chapterが選択されている (formData.chapter_id)
  • Teacherが選択されている (displayTeacherId)

2. ボタンの無効化

• Buttonコンポーネントにdisabledプロパティを追加
• 必要な項目がすべて選択されるまでSave Draftボタンが無効状態になります