🎵 Music Library改善版（Webアプリ）機能まとめ
誰でも使えるようになりました！！（ゲストログインあり）
“楽曲コレクション × ソーシャル × 再生体験” を一体化したフルスタックWebアプリです。
🔐 認証・アカウント機能
ファイル： src/app/page.tsx / src/lib/auth.ts
- メール・パスワード認証
- 新規登録
- 匿名（ゲスト）ログイン
- Spotify OAuth
- 初回ログイン時：Supabase
usersにプロフィール＋デフォルト棚を自動作成 - パスワードリセット
- モーダルからメール送信
-
/auth/callback → /auth/reset-passwordの安全フロー - 成功/失敗メッセージ・期限切れ検知
- 設定画面
SettingsPage.tsx- プロフィール確認
- ログアウト（ローカルストレージ整理後、トップへ）
📁 ライブラリ管理（棚システム）
ファイル： src/app/app/page.tsx
- 楽曲カードを 棚（shelves）単位で表示
- ドラッグ＆ドロップで並び替えや整理
- 棚の追加 / 編集 / 削除 / アイコン変更
- 棚作成フォーム
- アニメーション（展開・折りたたみ）
- バリデーション完備
- 作成後に Supabase へ即反映
- 楽曲カード
- メモ
- サムネイル
- 編集 / 削除（インライン更新可）
🔍 Spotify検索・追加
API： src/app/api/spotify/search/route.ts
- 右上の検索バーから Spotify 検索
- インクリメンタル表示
- 「追加」ボタンで棚へ即登録
- 初期データ・棚アイコンスクリプトあり
virtual-friend-setup.tsupdate-virtual-friend-images.ts
🧑🤝🧑 ソーシャル機能
主要ファイル：
FriendsPage.tsx / FriendShelfDetail.tsx / `CommentModal.ts
仮想フレンド作成ボタンからフレンドのギャラリーを閲覧できます。
- フレンド検索・申請・承認／拒否
- 公開棚の閲覧・コメント・いいね・通知
- コメントモーダル
- リアルタイム更新
- スレッド形式
- 最終レスポンス一覧
🎧 音楽再生・共有体験
ファイル： GlobalPlayer.tsx
埋め込みプレイヤーでの再生に変更
- ページ下部に常駐
- 再生 / 一時停止
- スキップ / シーク
- ループ切り替え・音量調整
-
Supabase Realtime で同期
- 他デバイスとのセッション共有
- 再生状態の保持
🖥 UI/UX・共通設計
UIコンポーネント置き場： src/components/ui
-
Button, Dialog, Inputなど共通UI - ダークテーマベース
- モーション・ホバー演出
-
トップページ
- 実際のスクリーンショットをレスポンシブ配置
- ログインフォームと使い方説明を並列表示
⚙️ 開発基盤・ユーティリティ
- Supabase ライブラリ管理
-
supabase.ts/server-supabase.ts/supabase-admin.ts - SSR & CSR のセッション管理
-
-
supabase/migrations- テーブル
- RLS（ポリシー）
- ストレージ管理
- コメント・いいね・棚アイコンの履歴管理
- 修復スクリプト例
fix-virtual-friend-tracks.tsupdate-virtual-friend-images.ts
🧭 まとめ
Music Library は以下の3要素を ひとつのアプリで完結 させています：
🎵 楽曲コレクション管理
🤝 ソーシャルコミュニケーション
▶️ 音楽再生・共有体験
拡張・追加開発に対応しやすい構造のフルスタックアプリケーションです。