Conversation
There was a problem hiding this comment.
Pull request overview
チャージフローに「投入（insert）」画面と「完了（complete）」画面を追加し、選択したチャージ金額を画面間で保持できるようにする変更です。
Changes:
- Zustand の
useChargeStoreを追加し、チャージ金額を保持 /charge/insertと/charge/completeの画面を新規追加し、導線を更新- ルーティング型定義（generouted）に新パスを追加
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| sysken-pay-front/src/store/useChargeStore.ts | チャージ金額を保持する Zustand store を追加 |
| sysken-pay-front/src/router.ts | 新しいチャージ関連パスを型定義へ追加 |
| sysken-pay-front/src/pages/charge/select.tsx | 次画面遷移前にチャージ金額を保存するよう更新 |
| sysken-pay-front/src/pages/charge/insert.tsx | 投入案内画面を追加し完了へ遷移 |
| sysken-pay-front/src/pages/charge/index.tsx | ダミー残高の値を更新 |
| sysken-pay-front/src/pages/charge/complete.tsx | チャージ完了表示画面を追加 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const handleNext = () => { | ||
| const normalizedChargeAmount = | ||
| Number(chargeAmount.replace(/[^\d]/g, "")) || 0; | ||
| saveChargeAmount(normalizedChargeAmount); | ||
| navigate("/charge/insert"); | ||
| }; |
There was a problem hiding this comment.
handleNext が未入力/不正入力時に normalizedChargeAmount を 0 にしてそのまま次画面へ遷移してしまい、0円チャージが成立してしまいます。最低金額（例: 1円以上 or ボタンで選べる金額のみ）をバリデーションし、条件を満たさない場合は遷移を止めてエラーメッセージ表示などの UX を追加してください。
| <ArrowButton variant="prev" onClick={() => navigate("/charge/select")}> | ||
| 戻る | ||
| </ArrowButton> | ||
| <ArrowButton variant="next" onClick={() => handleNext("user123")}> | ||
| 完了 | ||
| </ArrowButton> |
There was a problem hiding this comment.
完了ボタンで handleNext("user123") を呼んでおり、スキャン済みユーザーID（/charge で setBalance({ userId: barcode, ... }) した値）を上書きしてしまいます。誤ユーザーへのチャージ/表示につながるので、既存の useBalanceStore から userId を参照するか、遷移時に userId を引き回してこのページではハードコードしないでください。
| const chargeAmount = useChargeStore((state) => state.chargeAmount); | ||
| const setBalance = useBalanceStore((state) => state.setBalance); | ||
|
|
||
| const handleNext = (barcode: string) => { | ||
| // TODO: APIから残高を参照 | ||
| setBalance({ | ||
| userId: barcode, | ||
| balance: 550, | ||
| }); | ||
| navigate("/charge/complete"); | ||
| }; |
There was a problem hiding this comment.
このページで setBalance({ balance: 550 }) に固定値を入れており、選択した chargeAmount が残高に反映されません（少なくともフロントのスタブとしては既存残高 + chargeAmount などが自然です）。API 実装までの暫定でも、現在の useBalanceStore の残高を取得して加算する/もしくは TODO コメントを「チャージ処理」等に修正して誤解を避けてください。
| <div className="flex flex-col items-center justify-center gap-8 h-full"> | ||
| <div className="text-6xl font-bold text-[#454a53] mb-13 mt-50"> | ||
| チャージが完了しました |
There was a problem hiding this comment.
mb-13 と mt-50 は Tailwind のデフォルト spacing scale に存在しないため（このリポジトリには tailwind.config も見当たらず）、スタイルが適用されない可能性が高いです。既存のスケール（例: mb-12, mt-12, mt-48 など）に合わせるか、必要なら mb-[...] / mt-[...] の任意値クラスを使ってください。
| export default function Charge() { | ||
| const navigate = useNavigate(); |
There was a problem hiding this comment.
complete.tsx のコンポーネント名が function Charge() になっており、pages/charge/index.tsx の Charge と同名です。デバッグ時の表示やスタックトレースが紛らわしくなるため、ChargeCompletePage 等にリネームしてください。
| const handleHome = () => { | ||
| navigate("/"); | ||
| }; | ||
| return ( |
There was a problem hiding this comment.
useChargeStore に clearChargeAmount が用意されていますが、チャージ完了後にクリアされないため次回チャージ開始時に前回金額が残る可能性があります。handleHome（またはこの画面の初期化処理）で clearChargeAmount() を呼ぶなどして、フロー完了時に状態をリセットしてください。
charge/insert画面の追加