旅程追加ダイアログ、旅程一覧仮実装

[kuu13580]

概要

とりあえずデザインガン無視で

• 旅程一覧
  • 一旦localStorageに訪問済みを格納して対応(後ほどIndexedDBに統合)
• 旅程追加ダイアログ
  • マークダウンエディタは後ほど実装

画面

確認項目

• 動作確認を実施している
• issueはPRページ右下のDevelopmentからissueが紐づいている

[gemini-code-assist]

Summary of Changes

Hello @kuu13580, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

このプルリクエストは、アプリケーションの主要な機能である旅程の管理と表示に関する初期実装を提供します。具体的には、ユーザーが最近閲覧した旅程を一覧表示する機能と、新しい旅程を作成するためのダイアログが追加されました。これらの機能は、一時的にlocalStorageを利用してデータを管理し、将来的にIndexedDBへの統合が計画されています。また、ヘッダーコンポーネントは、異なる表示要件に対応できるようリファクタリングされ、より柔軟なUI構築が可能になりました。

Highlights

• 旅程一覧と追加機能の仮実装: デザインを考慮せず、旅程一覧表示と旅程追加ダイアログの基本的な機能を実装しました。旅程一覧は一時的にlocalStorageに訪問済み情報を格納して対応しています。
• Headerコンポーネントのリファクタリング: Headerコンポーネントにvariantプロパティを導入し、full（全機能表示）とlogoOnly（ロゴのみ表示）の2つの表示バリアントをサポートするようにリファクタリングしました。これにより、ホームページなどでシンプルなヘッダーを表示できるようになりました。
• 訪問済み旅程管理フックの追加: localStorageを利用して最近訪問した旅程を管理するuseVisitedTripsカスタムフックを追加しました。これにより、ホームページでユーザーが以前に閲覧した旅程を一覧表示できるようになります。
• 旅程作成/更新APIスキーマの改善: 旅程の作成および更新リクエストに使用するスキーマをTripMutationSchemaとして分離し、API層への変換ロジックをAppRequestTripMutationSchemaとして定義しました。これにより、APIリクエストのデータ構造がより明確になりました。
• ホームページのUI更新: ホームページを更新し、useVisitedTripsフックを使用して訪問済み旅程を表示するように変更しました。また、新しい旅程を追加するためのダイアログとボタンを追加し、旅程がない場合の案内表示も改善しました。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• frontend/src/components/Header.stories.tsx
  • HeaderコンポーネントのStorybookにvariantコントロールを追加しました。
  • ロゴのみを表示するLogoOnlyストーリーを追加しました。
  • 既存のストーリーにvariant: 'full'を明示的に設定しました。
• frontend/src/components/Header.tsx
  • HeaderコンポーネントをHeaderLogoOnlyとHeaderFullの2つの内部コンポーネントに分割し、variantプロパティに基づいてレンダリングを切り替えるように変更しました。
  • ロゴの表示位置を中央に調整しました。
  • HeaderPropsの型定義をvariantプロパティに基づいて条件付きで変更しました。
• frontend/src/components/HeaderSkeleton.tsx
  • スケルトンヘッダー内のロゴの配置を中央に調整しました。
• frontend/src/components/Logo.tsx
  • ロゴのLinkコンポーネントにw-fitクラスを追加し、幅を内容に合わせるように調整しました。
• frontend/src/dialogs/AddTripDialog.tsx
  • 新しい旅程を追加するためのAddTripDialogコンポーネントを新規追加しました。
  • 旅程のタイトル、詳細、人数を入力するフォームが含まれています。
  • 入力されたデータはuseCreateTripフックを通じてAPIに送信されます。
• frontend/src/hooks/useTrips.ts
  • 旅程の作成 (useCreateTrip) および更新 (useUpdateTrip) フックが、新しいTripMutationスキーマを使用するように更新されました。
  • CreateTripArgとUpdateTripArgの型定義がTripMutationを使用するように変更されました。
  • DeleteTripSchemaの定義を削除し、z.number().parse(id)を直接使用するように変更しました。
• frontend/src/hooks/useVisitedTrips.ts
  • localStorageを使用して訪問済み旅程のurlIdを管理するuseVisitedTripsカスタムフックを新規追加しました。
  • 訪問済みリストへの追加、およびSWRによる旅程データの並列取得機能を提供します。
• frontend/src/pages/HomePage.tsx
  • ホームページがuseVisitedTripsフックを使用して最近見た旅程を表示するように変更されました。
  • 新しい旅程を追加するためのボタンとAddTripDialogを統合しました。
  • 旅程がない場合に表示されるメッセージと、新しい旅程作成ボタンへの誘導矢印を追加しました。
  • ヘッダーコンポーネントをvariant='logoOnly'で表示するように設定しました。
• frontend/src/pages/TripPage.tsx
  • useVisitedTripsフックをインポートし、旅程が読み込まれた際に訪問済みリストに追加するようにuseEffectを追加しました。
  • Headerコンポーネントにvariant='full'プロパティを渡すように変更しました。
• frontend/src/types/trip.ts
  • 旅程の作成/更新リクエスト用のアプリケーション層スキーマTripMutationSchemaを定義しました。
  • API層の作成/更新スキーマApiTripMutationと、アプリケーション層からAPI層への変換スキーマAppRequestTripMutationSchemaを定義しました。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

Visit the preview URL for this PR (updated for commit f457570):

https://tabi-share-8ef6b--pr65-feature-issue56-add-zisfwg77.web.app

_{(expires Wed, 18 Feb 2026 15:33:45 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 9f2a87ede127df7673322845e34cf22c1372d720}

[gemini-code-assist]

Code Review

このプルリクエストは、旅程一覧と旅程追加ダイアログの仮実装を追加するものです。全体として、コンポーネントの再利用性を高めるリファクタリングや、型安全性を向上させるためのスキーマの整理など、多くの優れた改善が含まれています。

特に、Headerコンポーネントにvariantを追加してlogoOnly表示をサポートした点は、コードの再利用性を高める良い変更です。また、useCreateTripなどのフックでTripMutationSchemaを導入したことにより、データフローがより明確かつ安全になりました。

新しく追加されたuseVisitedTripsフックは、localStorageを利用して訪問済み旅程を管理するもので、並列フェッチやエラーハンドリングが堅牢に実装されています。

AddTripDialogの実装について、状態管理の冗長性と入力ハンドリングに関する2点の改善提案をさせていただきました。

これらの点を修正することで、さらに品質の高いコードになるかと思います。素晴らしいお仕事です！