## レビュー機能 実装タスク一覧

### 1. バックエンド (Ruby on Rails)

#### 1.1. DB・モデル更新
- [ ] `reviews`テーブルに`image_url` (string, nullable) と `scene_tag_id` (integer, nullable, FK to `tags`テーブル) を追加するマイグレーションファイルを作成する。
- [ ] 作成したマイグレーションを実行する (`rails db:migrate`)。
- [ ] `app/models/review.rb` に`belongs_to :scene_tag, class_name: 'Tag', optional: true` の関連付けを追加する。
- [ ] `app/models/review.rb` に必要なバリデーション（例: `rating`や`comment`の存在チェック）を追加する。

#### 1.2. レビュー投稿API実装 (`POST /api/restaurants/:restaurant_id/reviews`)
- [ ] `config/routes.rb`に、restaurantsにネストした形でreviewsへのルーティングを追加する (`resources :reviews, only: [:create]`)。
- [ ] `Api::ReviewsController`と`create`アクションの骨子を作成する。
- [ ] JWT認証を必須にする (`before_action :authenticate_user!`)。
- [ ] 画像アップロード処理を実装する（受け取ったファイルをサーバーに保存し、アクセス可能なURLを生成する）。
- [ ] Strong Parametersで`comment`, `rating`, `image`, `scene_tag_id`を許可する設定を記述する。
- [ ] `create`アクション内で、認証済みユーザー (`current_user`) に紐付けてレビューをDBに保存するロジックを実装する。
- [ ] 保存成功時に、作成されたレビューオブジェクトのJSONとHTTPステータス`201 Created`を返す。
- [ ] バリデーションエラー時に、エラーメッセージのJSONとHTTPステータス`422 Unprocessable Entity`を返す。
- [ ] (推奨) RSpecで`create`アクションのテストを作成する（正常系、異常系）。

#### 1.3. 店舗詳細API改修 (`GET /api/restaurants/:id`)
- [ ] `Api::RestaurantsController`の`show`アクションを修正する。
- [ ] N+1問題を避けるため、`.includes(reviews: [:user, :scene_tag])`などを使い、レビューとその関連情報（投稿ユーザー、シーンタグ）をまとめて取得するようにする。
- [ ] レスポンスJSONに`reviews`というキーで、レビュー情報の配列を含めるように変更する。
- [ ] `reviews`配列内の各レビューオブジェクトには、ユーザー名、コメント、評価、画像URL、シーンタグ名などの必要な情報を含めるように整形する。
- [ ] (推奨) RSpecで、レスポンスにレビュー情報が正しく含まれていることを検証するテストを追加する。

---

### 2. フロントエンド (Next.js)

#### 2.1. レビュー投稿フォーム実装
- [ ] `GET /api/tags?category=scene` を呼び出し、シーンタグの選択肢を取得するAPI連携処理を実装する。
- [ ] レビュー投稿フォームのUIコンポーネントを作成する。
    - [ ] コメント入力用の`<textarea>`
    - [ ] 星評価選択用のUI（例: クリック可能な星アイコン）
    - [ ] 画像1枚アップロード用の`<input type="file">`
    - [ ] (努力目標) 選択された画像のプレビュー機能
    - [ ] シーンタグ選択用の`<select>`（APIから取得したデータを表示）
    - [ ] 送信ボタン
- [ ] フォームの入力値（コメント、評価、画像ファイル、選択されたシーンタグID）を管理するReact state（またはZustandストア）を実装する。
- [ ] フォーム送信時に`FormData`を使用して、レビュー投稿APIにPOSTリクエストを送る処理を実装する。
- [ ] APIの成功・失敗に応じたユーザーへのフィードバック（Toast通知やメッセージ表示など）を実装する。

#### 2.2. レビュー一覧表示実装
- [ ] 1つのレビュー情報を表示するための`ReviewCard`コンポーネントを作成する。
    - [ ] 投稿者名・アイコン
    - [ ] 星評価の表示
    - [ ] コメント本文
    - [ ] 投稿された画像（`<img>`タグ）
    - [ ] 選択されたシーンタグ名
- [ ] 店舗詳細ページで、APIから取得した`reviews`配列をmap処理で`ReviewCard`コンポーネントに渡し、一覧表示するロジックを実装する。
- [ ] レビューが0件の場合の表示（例: 「まだレビューはありません」）を実装する。
- [ ] レビュー投稿成功後に、レビュー一覧が自動的に更新されるようにする（APIを再取得するか、ローカルのstateを更新する）。

---

### 3. 統合・レイアウト調整

- [ ] 店舗詳細ページに、サイドバー（店舗詳細情報）とメインコンテンツ（レビュー機能）の2カラムレイアウトを実装する。
- [ ] 店舗詳細ページで、レビュー投稿から一覧表示までの一連の流れが正しく動作することをE2E（エンドツーエンド）でテストする。
- [ ] レスポンシブ対応の基本的な確認と、必要に応じたスタイルの調整を行う。
- [ ] 全体的なバグ修正とUIの微調整。

Objective: Implement the complete review feature for our restaurant discovery application.

Phase 1: Project Analysis & Contextual Understanding

First, please thoroughly analyze the entire existing project codebase. It's crucial that you understand:

The technology stack: Ruby on Rails (API mode) for the backend, Next.js with TypeScript for the frontend, and PostgreSQL for the database.
Authentication: The system uses JWT for authentication. All write operations must be protected.
Existing code patterns & style: Analyze the current project structure, coding conventions, and existing implementation patterns. All new code must be consistent with these established conventions to maintain code quality and coherence.
After you have a complete understanding of the project, proceed with the implementation tasks below.

Phase 2: Feature Implementation

The goal is to add a complete review system. This involves creating a new API endpoint for submitting reviews, updating an existing API to serve reviews, and building the frontend UI to display and submit reviews.

UI/UX Requirements
The review functionality will be integrated into the restaurant detail page. The layout should be as follows:

A sidebar on the left (approximately 1/3 of the screen width) will persistently display the restaurant's details.
The main content area on the right (approximately 2/3 of the screen width) will be dedicated to the review system. This area must contain both the review submission form and the list of existing reviews.
Backend Tasks (Ruby on Rails API)
Update Review Model and Database Schema:

Goal: Add columns to the reviews table to store an image and a scene tag for each review.
Tasks:
Create a new migration to add image_url (string, nullable) and scene_tag_id (integer, nullable, foreign key to the tags table) to the reviews table.
Update the app/models/review.rb model to include the new belongs_to :scene_tag, class_name: 'Tag', optional: true association.
Implement Review Submission API:

Goal: Create a secure endpoint for authenticated users to post a new review for a specific restaurant.
Tasks:
Define a new endpoint: POST /api/restaurants/:restaurant_id/reviews.
This endpoint must require JWT authentication. The new review should be associated with the authenticated user (current_user).
The controller action should accept: comment (text), rating (integer), a single image (file upload), and a scene_tag_id (integer).
Implement the image upload logic. Save the uploaded file (e.g., to a local directory or a cloud storage service) and store the resulting URL in the image_url column.
On successful creation, respond with the new review object and a 201 Created status code.
Implement proper error handling for validation failures (e.g., respond with a 422 Unprocessable Entity status).
Update Restaurant Detail API to Include Reviews:

Goal: Enhance the existing restaurant detail API to embed all associated reviews.
Tasks:
Modify the show action in the RestaurantsController for the GET /api/restaurants/:id endpoint.
The JSON response for a single restaurant must now include a nested array named reviews.
Use includes (e.g., .includes(reviews: [:user, :scene_tag])) to prevent N+1 query problems.
Each object in the reviews array must contain the review's id, comment, rating, image_url, the associated user's information (at least id and name), and the associated scene_tag's information (id and name).
Frontend Tasks (Next.js & TypeScript)
Implement Review Submission Form Component:

Goal: Create a form on the restaurant detail page that allows users to write and submit a new review.
Tasks:
Create a new React component for the review form.
The form must include inputs for a multi-line comment (textarea), a star-based rating (e.g., 1-5 clickable stars), a single image file upload (<input type="file">), and a select dropdown for a single "scene" tag.
The options for the "scene" tag dropdown must be dynamically fetched from the existing GET /api/tags?category=scene endpoint.
On form submission, create a FormData object to handle the file upload and send a POST request to the new review submission API.
Implement user feedback (e.g., toast notifications or messages) for both successful and failed submissions.
Implement Review List Display Component:

Goal: Display all reviews for the current restaurant on the detail page.
Tasks:
Create a "ReviewCard" component to display a single review.
The ReviewCard must display: the author's name, the star rating, the comment text, the uploaded image (if one exists), and the name of the selected scene tag.
On the restaurant detail page, fetch the restaurant data (which now includes the reviews array) and use the ReviewCard component to render the list of all reviews.
Handle the case where there are no reviews yet.
Please ensure all new code is clean, well-commented where necessary, and adheres to the project's existing conventions and best practices.