B. Button Position
ステップ編集画面:削除ボタンの位置
保存ボタンの隣にあった削除ボタンを完全撤去し、ページ最下部に独立した「削除」セクションを設置。誤操作リスクを物理的に分離。
BEFORE
← モジュールに戻る
動画プレビュー
⚠ 「保存」と「削除」が隣接しているため、誤押下のリスクあり
AFTER
← モジュールに戻る
ステップ編集
動画プレビュー
⚠ 削除
このステップを削除します
削除後 30日以内 はモジュール詳細画面から復元可能です。期間経過後は完全に削除され、視聴記録も復元できません。
A. Branded Confirm Modal
削除確認モーダル
「このステップを削除」ボタン or ステップ行のゴミ箱アイコン押下時に表示。ブラウザ標準の confirm() から、ブランドの世界観に統一されたモーダルへ。
⚠
ステップを削除しますか?
「第1話 ご挨拶」 を削除します。
このステップは 3 名 のお客様が完了しています。削除すると、お客様の画面からも非表示になります。
削除後 30日以内 なら、モジュール詳細画面の「削除済みのステップ」セクションから復元できます。期間経過後は完全に削除され、視聴記録も含めて復元できません。
※ 完了済みユーザー数が 0 のときは、本文がシンプル版("このステップを削除します。お客様の画面からも非表示になります。")になります
C. Soft Delete Restore
モジュール詳細:「削除済みのステップ」復元UI
モジュール詳細画面の最下部に、直近30日以内に削除されたステップの一覧を表示。「復元」ボタン1クリックで元に戻ります。該当ゼロのときはセクション自体を非表示。
sac-admin / curriculum / modules / [id]
← カリキュラム一覧に戻る
資産設計の基本
⋮⋮
動画
第1話 ご挨拶
⏱ 12:34 ・ 完了 3名
⋮⋮
テキスト
第2話 心構え
完了 2名
⋮⋮
動画
第3話 資産の見える化
⏱ 18:20 ・ 完了 1名
-
動画
旧・第4話 投資の基本
・本日 削除(あと 30 日で完全削除)
-
アクション
家計簿テンプレート(旧版)
・3日前 削除(あと 27 日で完全削除)
-
テキスト
第0話 はじめに
・25日前 削除(あと 5 日で完全削除)
Workflow
削除〜復元の流れ
改修後のカリキュラム削除フローです。「うっかり削除」の救済が常に手元にある状態になります。
1
ステップ編集画面 or モジュール詳細画面で削除アクション ステップ編集画面では下部「削除」セクション、モジュール詳細では行のゴミ箱アイコン
2
確認モーダルが開く(ブランドの金枠+警告アイコン) 完了済みユーザー数も表示されるので、削除前に影響を把握 ※ ブラウザ標準の confirm() は使用しなくなる
3
「削除する」をクリック DBには残ったまま、deleted_at がセットされる(ソフト削除) ※ お客様の画面・統計・進捗一覧などからは即座に非表示
4
トースト「ステップを削除しました(30日以内なら復元可能)」 ステップ編集画面ならモジュール詳細にリダイレクト
5
復元したい場合 モジュール詳細画面下部の「削除済みのステップ」セクションで「復元」ボタンを押す → 即時に元の場所に戻る
6
30日経過後 復元UIから消え、API側でも復元拒否(404)※ 物理削除は今後の cleanup スクリプトで対応予定。当面DBには残っているが、UIには一切現れない
Implementation Summary
実装範囲のまとめ
DB / API
pc_steps.deleted_at 列追加 + index
- DELETE API → ソフト削除化
POST /api/curriculum/steps/[id]/restore 新設
GET /api/curriculum/steps/deleted 新設
- SELECT 9ファイル(admin 6 + PC 3)にフィルタ追加
UI
ConfirmDialog コンポーネント新設(再利用可)
- ステップ編集画面: 削除を最下部「危険ゾーン」へ移動
- 2画面の
confirm() を ConfirmDialog に置換
- モジュール詳細に「削除済みのステップ」セクション追加
✓ TypeScript 型チェック通過(admin・PC 両アプリ)
本番デプロイ前に、ローカルで動作確認をお願いします。