💡

Nuxt.jsでWebアプリケーション開発メモ25

に公開
Nuxt 3
Claude
Nuxt UI
tech

概要

トレーニング記録の削除ができるようにする。

プロンプト25

# 命令25
- トレーニング記録削除処理の追加
# 命令25-1
    - カレンダーから特定の日付のトレーニング記録を削除する機能を追加します。どのようなUI/導線が良いか提案お願いします。

→ いくつかの提案を受けて、提案1「記録編集モーダル内に削除ボタン追加」を採用することに。Claude Codeも案1推し。

# 命令25-2
    - 案1でお願いします。削除ボタンはフッターの右端に赤色ボタンで実装してください。
# 命令25-3
    - 全てのUButton要素はマウスカーソルを合わせたら指カーソルになるようにして。

対応内容

  • トレーニング記録ポップアップ画面のフッターに削除ボタンを追加し、クリックすると削除されるようにした。
  • app.config.tsにbase:cursor-pointerを追加し、Ubuttonは常に指カーソルになるようにした。

画面


ソース差分

https://github.com/tkure/prototype-frontend/commit/b119e88697637dedfea8910fb3a57ab75c1ea3fd

→ Nuxt.jsでWebアプリケーション開発メモ26

Discussion