SAC Admin · Curriculum Delete Flow

カリキュラム削除フロー — 改修プレビュー

ステップ削除に関する3つの改善(A. ブランド一貫モーダル / B. 削除ボタンの位置分離 / C. 30日復元可能なソフト削除)の見た目をご確認いただけます。

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名
🗑 削除済みのステップ (30日以内なら復元できます)
  • 動画 旧・第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 両アプリ)
本番デプロイ前に、ローカルで動作確認をお願いします。