# 機能設計書 29-ウィッシュリストから削除

## 概要

本ドキュメントは、ECモバイルアプリにおけるウィッシュリストから個別商品を削除する機能について設計仕様を定義する。

### 本機能の処理概要

本機能は、ウィッシュリストに登録された商品を個別に削除し、お気に入りリストから除外する機能である。

**業務上の目的・背景**：ECサイトにおいて、ユーザーが保存した商品に対して興味を失った場合や、既に購入済みの場合、ウィッシュリストから商品を削除できる機能が必要である。本機能により、ウィッシュリストを常に最新の関心商品リストとして維持でき、効率的な購買計画を支援する。

**機能の利用シーン**：ユーザーがウィッシュリスト画面で不要になった商品を削除したい場合に利用される。既に購入した商品、興味がなくなった商品、販売終了した商品などをリストから整理する際に活用される。

**主要な処理内容**：
1. ウィッシュリスト画面にて商品の削除アイコン（Xボタン）をタップ
2. FetchDeleteAddItemEventを発行し、GraphQL API経由でサーバーに送信
3. サーバーでウィッシュリストから商品を削除
4. 成功時はウィッシュリストを再取得し画面を更新
5. 成功メッセージを表示

**関連システム・外部連携**：Bagisto GraphQL APIとの連携により、`removeFromWishlist` mutationを使用してウィッシュリストから商品を削除する。

**権限による制御**：ログインユーザーのみ利用可能。自身のウィッシュリストの商品のみ削除可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | ウィッシュリスト画面 | 主画面 | お気に入りから個別商品を削除 |

## 機能種別

CRUD操作（Delete）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| productId | dynamic | Yes | 削除対象の商品ID | - |

### 入力データソース

画面操作（ウィッシュリストアイテムの削除アイコン押下）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| success | bool | 処理成功可否 |
| message | String | 処理結果メッセージ |
| cart | CartModel | カート情報（更新用） |

### 出力先

- 画面表示（ウィッシュリストから該当商品を削除）
- 成功/エラーメッセージ表示

## 処理フロー

### 処理シーケンス

```
1. ユーザーが削除アイコン（Xボタン）をタップ
   └─ WishlistItemListの削除処理
2. ローダー表示イベントを発行
   └─ OnClickWishListLoaderEvent(isReqToShowLoader: true)
3. FetchDeleteAddItemEventを発行
   └─ 商品IDをパラメータとして渡す
4. WishListBlocがイベントを受信
   └─ repository.callWishListDeleteItemを呼び出し
5. WishListRepositoryがApiClientを経由でAPI呼び出し
   └─ GraphQL mutation removeFromWishlistを実行
6. 成功時: FetchDeleteAddItemState.successを発行
7. ウィッシュリストを再取得して画面更新
8. 成功メッセージを表示
```

### フローチャート

```mermaid
flowchart TD
    A[削除アイコンタップ] --> B[ローダー表示]
    B --> C[FetchDeleteAddItemEvent発行]
    C --> D[WishListBloc処理]
    D --> E[API呼び出し]
    E --> F{成功?}
    F -->|Yes| G[FetchDeleteAddItemState.success]
    G --> H[ウィッシュリスト再取得]
    H --> I[画面更新]
    I --> J[成功メッセージ表示]
    F -->|No| K[FetchDeleteAddItemState.fail]
    K --> L[エラーメッセージ表示]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-029-01 | 即座削除 | 確認ダイアログなしで即座に削除 | 削除アイコンタップ時 |
| BR-029-02 | 自動リフレッシュ | 削除後は自動的にウィッシュリストを再取得 | 削除成功時 |
| BR-029-03 | 空リスト表示 | 最後の1商品を削除した場合、空メッセージを表示 | 商品数0時 |

### 計算ロジック

特になし

## データベース操作仕様

### 操作別データベース影響一覧

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| ウィッシュリスト削除 | wishlists | DELETE | 指定商品をウィッシュリストから削除 |

### テーブル別操作詳細

#### wishlists

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | - | customer_id = ログインユーザー AND product_id = 指定商品 | 対象レコードを削除 |

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | ネットワークエラー | API通信失敗 | エラーメッセージを表示 |
| - | アイテム未存在 | 既に削除済みの商品を削除 | エラーメッセージを表示 |

### リトライ仕様

自動リトライは行わない。ユーザーに再操作を促す。

## トランザクション仕様

サーバー側でトランザクション管理。

## パフォーマンス要件

- API応答時間: 2秒以内を目標

## セキュリティ考慮事項

- 認証: ログインユーザーのみ利用可能
- アクセス権限: 自身のウィッシュリストの商品のみ削除可能

## 備考

削除操作に確認ダイアログはなく、タップで即座に削除される。誤操作した場合は、再度商品を検索してウィッシュリストに追加する必要がある。

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

API応答のデータモデルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | add_to_cart_model.dart | `lib/screens/cart_screen/cart_model/add_to_cart_model.dart` | AddToCartModel（削除応答にも使用） |

**読解のコツ**: removeFromWishlistはAddToCartModelを返す。

#### Step 2: エントリーポイントを理解する

削除アイコンタップからの流れを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | wishlist_Item_list.dart | `lib/screens/wishList/view/widget/wishlist_Item_list.dart` | 削除アイコンとイベント発行 |

**主要処理フロー**:
1. **80-112行目**: 削除アイコン（Xボタン）とタップ処理
2. **84-89行目**: OnClickWishListLoaderEvent発行（ローダー表示）
3. **85-89行目**: FetchDeleteAddItemEvent発行（削除処理）

#### Step 3: BLoC層を理解する

状態管理とビジネスロジックを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | wishlist_event.dart | `lib/screens/wishList/bloc/wishlist_event.dart` | FetchDeleteAddItemEventの定義（23-26行目） |
| 3-2 | wishlist_state.dart | `lib/screens/wishList/bloc/wishlist_state.dart` | FetchDeleteAddItemStateの定義（53-62行目） |
| 3-3 | wishlist_bloc.dart | `lib/screens/wishList/bloc/wishlist_bloc.dart` | FetchDeleteAddItemEventの処理（37-48行目） |

**主要処理フロー**:
- **37-48行目**: FetchDeleteAddItemEventを受信し、repository経由でAPI呼び出し

#### Step 4: リポジトリ層とAPI層を理解する

実際のAPI呼び出し処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | wishlist_repository.dart | `lib/screens/wishList/bloc/wishlist_repository.dart` | callWishListDeleteItemメソッド（37-49行目） |
| 4-2 | api_client.dart | `lib/services/api_client.dart` | removeFromWishlist API呼び出し（398-413行目） |
| 4-3 | mutation_query.dart | `lib/services/mutation_query.dart` | GraphQL mutation定義（202-210行目） |

### プログラム呼び出し階層図

```
WishlistItemList (wishlist_Item_list.dart)
    │
    └─ GestureDetector.onTap (削除アイコン)
           │
           ├─ OnClickWishListLoaderEvent発行 (ローダー表示)
           │
           └─ FetchDeleteAddItemEvent(productId)発行
                  │
                  └─ WishListBloc.mapEventToState
                         │
                         └─ WishListRepository.callWishListDeleteItem
                                │
                                └─ ApiClient.removeFromWishlist
                                       │
                                       └─ MutationQuery.removeFromWishlist
```

### データフロー図

```
[入力]                    [処理]                         [出力]

削除アイコンタップ ───▶ FetchDeleteAddItemEvent ───▶ WishListBloc
      (UI)               (イベント発行)             (状態管理)
                                                         │
                        ┌────────────────────────────────┘
                        ▼
              WishListRepository
                        │
                        ▼
                  ApiClient
                        │
                        ▼
          GraphQL API (removeFromWishlist)
                        │
                        ▼
            AddToCartModel ───▶ FetchDeleteAddItemState ───▶ UI更新
               (応答)              (状態通知)            (リスト再取得)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| wishlist_screen.dart | `lib/screens/wishList/view/wishlist_screen.dart` | ソース | ウィッシュリスト画面メイン |
| wishlist_Item_list.dart | `lib/screens/wishList/view/widget/wishlist_Item_list.dart` | ソース | 商品リスト表示、削除UI |
| wishlist_bloc.dart | `lib/screens/wishList/bloc/wishlist_bloc.dart` | ソース | ウィッシュリストBLoC |
| wishlist_event.dart | `lib/screens/wishList/bloc/wishlist_event.dart` | ソース | BLoCイベント定義 |
| wishlist_state.dart | `lib/screens/wishList/bloc/wishlist_state.dart` | ソース | BLoC状態定義 |
| wishlist_repository.dart | `lib/screens/wishList/bloc/wishlist_repository.dart` | ソース | ウィッシュリストリポジトリ |
| add_to_cart_model.dart | `lib/screens/cart_screen/cart_model/add_to_cart_model.dart` | ソース | 削除応答モデル |
| api_client.dart | `lib/services/api_client.dart` | ソース | API通信クライアント |
| mutation_query.dart | `lib/services/mutation_query.dart` | ソース | GraphQLクエリ定義 |
