Skip to content

refactor(classroom): クラス管理サブ画面の共通レイアウト/ボタンコンポーネント化(スタイル自動統一) #1125

Description

@smalruby3-editor-bot

概要

Issue #1122 でクラス管理サブ画面のレイアウトを評価画面に合わせて統一した後、共通レイアウト/ボタンコンポーネントへリファクタリングする。今後クラス管理に新しい画面を追加するとき、その共通コンポーネントをベースに作るだけで自動的にスタイル(枠なし・タイトル・パンくず・マージン・ボタン)がそろう状態にするのが目的。

依存: #1122(各画面のスタイル統一が先。統一後の形を共通化する)

背景

現状は画面ごとにヘッダー・枠・マージン・ボタンのスタイルが重複実装され、画面追加のたびにズレが生まれていた(#1121 / #1122 の原因)。一度そろえても、共通化しないと再発する。

やること(設計は実装者に委ねるが、方針は以下)

  • クラス管理サブ画面の共通レイアウトコンポーネントを作る。想定要素:
    • パンくず(TeacherBreadcrumbs
    • 濃い太字タイトル(teacherViewTitle 相当)
    • 本文スロット(枠なし・左マージン統一)
    • フッターのボタン行(セカンダリ左・プライマリ右の配置を内包)
  • **プライマリ/セカンダリの共通ボタンコンポーネント(または共通クラス)**を用意し、各画面はそれを使う。
  • 既存のクラス管理サブ画面(評価・みんなの課題からさがす・設定・課題を作る・課題を再利用・合言葉で取り込み 等)を、この共通コンポーネントを使う形に置き換える(見た目は refactor(classroom): クラス管理サブ画面のレイアウトを評価画面に統一(枠なし/タイトル/マージン/ボタン) #1122 完了時点から変えない = リグレッションなし)。
  • 重複していた画面ごとの CSS(枠・タイトル・マージン・ボタン)を共通クラスへ集約し、重複を削除する。

DoD

  • クラス管理サブ画面の共通レイアウトコンポーネント + 共通ボタンが存在する。
  • 既存サブ画面が共通コンポーネントを使う形にリファクタされ、見た目は refactor(classroom): クラス管理サブ画面のレイアウトを評価画面に統一(枠なし/タイトル/マージン/ボタン) #1122 完了時点と同一(リグレッションなし)。
  • 「新しい画面はこの共通コンポーネントをベースに作ればスタイルがそろう」ことがコード上明確(README か該当ディレクトリのコメントに一言書く)。
  • 画面ごとに重複していたレイアウト/ボタン CSS が共通化され、重複が削減されている。
  • data-testid を維持し、既存の classroom integration/unit テストが通る。lint は 0 エラー 0 警告。

autopilot-base: feature/assignment-sharing
autopilot-after: #1122

Metadata

Metadata

Assignees

Labels

⏳ waiting先行 Issue (autopilot-after) の完了待ち。依存が Close されると自動着手🤖 autopilotautopilot が処理対象にした Issue/PR(daemon が付与)

Type

No type

Projects

Status
Sprint Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions