[フロント] 協賛活動一覧ページの改修

[TkymHrt]

対応Issue

なし

概要

sponsor-activities ページの刷新

• Figmaのデザイン に沿って変更しています。
• ページのパス名に区切りが無いの気になってたのでスネークケースにしました。
• (以前まで使用していたコンポーネントは legacy-documents へ切り出して、今後の進捗報告ページのために残しています。）

画面スクリーンショット等

テスト項目

• sponsor-activitiesページを開くと一覧が表示されること（初期表示）
• 年度を最新→過去年度へ切替した際、一覧が対象年度データに更新されること
• 年度切替後にフィルターモーダルを開き、スポンサー候補が対象年度の企業集合になっていること
• 年度Aで選択したスポンサーを保持したまま年度Bに変更した場合、存在しないスポンサー条件が自動解除され、結果が0件固定にならないこと
• フィルター（協賛スタイル/所属局/担当者/企業名/協賛可否/並び順）がそれぞれ機能すること
• 同名ユーザー（例: 同じ name で異なるid）が存在するデータで、フォーム担当者候補に両方表示されること
• 上記同名ユーザーのうち意図した方を選択して登録/編集し、保存後データの担当者が選択IDと一致すること
• 追加モーダルで登録後、一覧がリロードなしで更新されること
• 編集モーダルで更新後、一覧へ反映されること
• 削除後、一覧から該当データが消えること
• CSVダウンロードが実行できること（とりま不要って言ってたけど仮でフロント側で実装しときました。）

---

[cloudflare-workers-and-pages]

Deploying finansu with    Cloudflare Pages

Latest commit:	6560ab4
Status:	✅  Deploy successful!
Preview URL:	https://cd07a3d0.finansu.pages.dev
Branch Preview URL:	https://feat-yama-refactor-sponsor-a.finansu.pages.dev

View logs

[gemini-code-assist]

Summary of Changes

Hello, 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!

このプルリクエストは、フロントエンドの協賛活動管理セクションを大幅に刷新するものです。既存の協賛活動一覧ページを新しいアーキテクチャで再構築し、活動の追加、編集、削除、フィルタリングのための専用コンポーネントを導入しました。これにより、コードベースの保守性が向上し、ユーザーエクスペリエンスの改善が図られています。以前のコンポーネントは legacy-documents ディレクトリに移動され、明確な分離が実現されています。

Highlights

• 協賛活動一覧ページの全面改修: 既存の協賛活動一覧ページが刷新され、新しいコンポーネントとロジックで再構築されました。これにより、ページの機能性と保守性が向上しています。
• レガシーコンポーネントの分離: 以前使用されていた協賛活動関連のコンポーネント（詳細モーダル、請求書・領収書関連など）は、legacy-documents ディレクトリに移動され、今後の進捗報告ページのために残されています。
• 依存関係の更新: @react-pdf/renderer のバージョンが ^3.4.0 から ^4.3.2 に更新され、それに伴い pnpm-lock.yaml も更新されました。これにより、PDF生成機能の改善や安定性が期待されます。
• 新しいUIコンポーネントの導入: 協賛活動の追加、編集、削除、フィルタリングのための専用モーダルやボタン、フォームコンポーネントが新しく追加されました。これには、DeleteModal、EditModal、FilterModal、SponsorActivityFormなどが含まれます。
• データ取得とフィルタリングロジックの改善: 協賛活動のデータ取得とフィルタリングを効率的に行うためのカスタムフック useSponsorActivitiesQuery と useSponsorsByYear が導入されました。
• 共通コンポーネントの機能強化: MultiSelect と SearchSelect コンポーネントがリファクタリングされ、useMemo を使用した値の正規化、カスタムスタイル、クリア可能オプションなどの機能が追加されました。

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.

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. ↩

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 7 additional findings.

[nakatashingo]

いいと思います