From 2cc2c894a51c1328f23b944a03a17eee2b93b099 Mon Sep 17 00:00:00 2001 From: kkkk0113 Date: Mon, 23 Mar 2026 04:52:19 +0900 Subject: [PATCH 1/5] =?UTF-8?q?charge/insert=E7=94=BB=E9=9D=A2=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sysken-pay-front/src/pages/charge/insert.tsx | 28 ++++++++++++++++++++ sysken-pay-front/src/pages/charge/select.tsx | 11 +++++++- sysken-pay-front/src/router.ts | 1 + sysken-pay-front/src/store/useChargeStore.ts | 13 +++++++++ 4 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 sysken-pay-front/src/pages/charge/insert.tsx create mode 100644 sysken-pay-front/src/store/useChargeStore.ts diff --git a/sysken-pay-front/src/pages/charge/insert.tsx b/sysken-pay-front/src/pages/charge/insert.tsx new file mode 100644 index 0000000..c320e9b --- /dev/null +++ b/sysken-pay-front/src/pages/charge/insert.tsx @@ -0,0 +1,28 @@ +import Header from "../../components/layouts/Header/index"; +import { useNavigate } from "react-router-dom"; +import ArrowButton from "../../components/ui/ArrowButton"; +import { PriceLabel } from "../../components/ui/PriceLabel"; +import { useChargeStore } from "../../store/useChargeStore"; + +export default function ChargeInsertPage() { + const navigate = useNavigate(); + const chargeAmount = useChargeStore((state) => state.chargeAmount); + + return ( +
+
+
+
+ 箱にお金を入れてください +
+ +
+ navigate("/charge/select")}> + 戻る + + navigate("/charge/complete")}> + 完了 + +
+ ); +} diff --git a/sysken-pay-front/src/pages/charge/select.tsx b/sysken-pay-front/src/pages/charge/select.tsx index b2605f4..1bc3b77 100644 --- a/sysken-pay-front/src/pages/charge/select.tsx +++ b/sysken-pay-front/src/pages/charge/select.tsx @@ -6,15 +6,24 @@ import { PriceLabel } from "../../components/ui/PriceLabel"; import { Input } from "../../components/ui/Input"; import { useBalanceStore } from "../../store/useBalanceStore"; import { useState } from "react"; +import { useChargeStore } from "../../store/useChargeStore"; export default function ChargeSelectPage() { const navigate = useNavigate(); const balance = useBalanceStore((state) => state.balance?.balance ?? 0); + const saveChargeAmount = useChargeStore((state) => state.setChargeAmount); const [chargeAmount, setChargeAmount] = useState(""); const handleHome = () => { navigate("/"); }; + const handleNext = () => { + const normalizedChargeAmount = + Number(chargeAmount.replace(/[^\d]/g, "")) || 0; + saveChargeAmount(normalizedChargeAmount); + navigate("/charge/insert"); + }; + return (
@@ -36,7 +45,7 @@ export default function ChargeSelectPage() { 戻る - navigate("/charge/insert")}> + 次へ
diff --git a/sysken-pay-front/src/router.ts b/sysken-pay-front/src/router.ts index 8bd0698..e0b9d2e 100644 --- a/sysken-pay-front/src/router.ts +++ b/sysken-pay-front/src/router.ts @@ -21,6 +21,7 @@ export type Path = | `/buy/confirm` | `/buy/list` | `/charge` + | `/charge/insert` | `/charge/select` export type Params = { diff --git a/sysken-pay-front/src/store/useChargeStore.ts b/sysken-pay-front/src/store/useChargeStore.ts new file mode 100644 index 0000000..8fcccb4 --- /dev/null +++ b/sysken-pay-front/src/store/useChargeStore.ts @@ -0,0 +1,13 @@ +import { create } from "zustand"; + +type ChargeStore = { + chargeAmount: number; + setChargeAmount: (amount: number) => void; + clearChargeAmount: () => void; +}; + +export const useChargeStore = create((set) => ({ + chargeAmount: 0, + setChargeAmount: (amount) => set({ chargeAmount: amount }), + clearChargeAmount: () => set({ chargeAmount: 0 }), +})); From c808826574216fa4a07422ff627c272e10af1866 Mon Sep 17 00:00:00 2001 From: kkkk0113 Date: Mon, 23 Mar 2026 04:54:03 +0900 Subject: [PATCH 2/5] =?UTF-8?q?charge/select=E7=94=BB=E9=9D=A2=E3=81=AEpre?= =?UTF-8?q?v=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E9=81=B7=E7=A7=BB=E5=85=88=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sysken-pay-front/src/pages/charge/select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sysken-pay-front/src/pages/charge/select.tsx b/sysken-pay-front/src/pages/charge/select.tsx index 1bc3b77..66af6b9 100644 --- a/sysken-pay-front/src/pages/charge/select.tsx +++ b/sysken-pay-front/src/pages/charge/select.tsx @@ -42,7 +42,7 @@ export default function ChargeSelectPage() { - + navigate("/charge")}> 戻る From 6fb602edaececb65e141983dd2a42e47624ea8ee Mon Sep 17 00:00:00 2001 From: kkkk0113 Date: Mon, 23 Mar 2026 04:55:06 +0900 Subject: [PATCH 3/5] =?UTF-8?q?charge/select=E7=94=BB=E9=9D=A2=E3=81=A7?= =?UTF-8?q?=E4=BD=BF=E3=82=8F=E3=81=AA=E3=81=8F=E3=81=AA=E3=81=A3=E3=81=9F?= =?UTF-8?q?=E5=A4=89=E6=95=B0=E3=81=AE=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sysken-pay-front/src/pages/charge/select.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/sysken-pay-front/src/pages/charge/select.tsx b/sysken-pay-front/src/pages/charge/select.tsx index 66af6b9..f919f31 100644 --- a/sysken-pay-front/src/pages/charge/select.tsx +++ b/sysken-pay-front/src/pages/charge/select.tsx @@ -13,9 +13,6 @@ export default function ChargeSelectPage() { const balance = useBalanceStore((state) => state.balance?.balance ?? 0); const saveChargeAmount = useChargeStore((state) => state.setChargeAmount); const [chargeAmount, setChargeAmount] = useState(""); - const handleHome = () => { - navigate("/"); - }; const handleNext = () => { const normalizedChargeAmount = From 5e3284cfed2aa444becdc11dc4a65a541dc6aca7 Mon Sep 17 00:00:00 2001 From: kkkk0113 Date: Mon, 23 Mar 2026 05:19:44 +0900 Subject: [PATCH 4/5] =?UTF-8?q?charge/complete=E7=94=BB=E9=9D=A2=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sysken-pay-front/src/router.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/sysken-pay-front/src/router.ts b/sysken-pay-front/src/router.ts index e0b9d2e..b924ba1 100644 --- a/sysken-pay-front/src/router.ts +++ b/sysken-pay-front/src/router.ts @@ -21,6 +21,7 @@ export type Path = | `/buy/confirm` | `/buy/list` | `/charge` + | `/charge/complete` | `/charge/insert` | `/charge/select` From 9579c5c2232c39199fb435550f54694d8ade3220 Mon Sep 17 00:00:00 2001 From: kkkk0113 Date: Mon, 23 Mar 2026 05:20:17 +0900 Subject: [PATCH 5/5] =?UTF-8?q?charge/complate=E7=94=BB=E9=9D=A2=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A02?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/charge/complete.tsx | 25 +++++++++++++++++++ sysken-pay-front/src/pages/charge/index.tsx | 2 +- sysken-pay-front/src/pages/charge/insert.tsx | 13 +++++++++- 3 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 sysken-pay-front/src/pages/charge/complete.tsx diff --git a/sysken-pay-front/src/pages/charge/complete.tsx b/sysken-pay-front/src/pages/charge/complete.tsx new file mode 100644 index 0000000..d2bf8db --- /dev/null +++ b/sysken-pay-front/src/pages/charge/complete.tsx @@ -0,0 +1,25 @@ +import { useNavigate } from "react-router-dom"; +import Button from "../../components/ui/Button"; +import { useBalanceStore } from "../../store/useBalanceStore"; + +export default function Charge() { + const navigate = useNavigate(); + + const handleHome = () => { + navigate("/"); + }; + return ( +
+
+
+ チャージが完了しました +
+
+ 現在のカード残高　￥ + {useBalanceStore((state) => state.balance?.balance ?? 0)} +
+ +
+
+ ); +} diff --git a/sysken-pay-front/src/pages/charge/index.tsx b/sysken-pay-front/src/pages/charge/index.tsx index 0df996c..e21bc34 100644 --- a/sysken-pay-front/src/pages/charge/index.tsx +++ b/sysken-pay-front/src/pages/charge/index.tsx @@ -12,7 +12,7 @@ export default function Charge() { // TODO: APIから残高を参照 setBalance({ userId: barcode, - balance: 150, + balance: 550, }); navigate("/charge/select"); }; diff --git a/sysken-pay-front/src/pages/charge/insert.tsx b/sysken-pay-front/src/pages/charge/insert.tsx index c320e9b..524c0ec 100644 --- a/sysken-pay-front/src/pages/charge/insert.tsx +++ b/sysken-pay-front/src/pages/charge/insert.tsx @@ -3,10 +3,21 @@ import { useNavigate } from "react-router-dom"; import ArrowButton from "../../components/ui/ArrowButton"; import { PriceLabel } from "../../components/ui/PriceLabel"; import { useChargeStore } from "../../store/useChargeStore"; +import { useBalanceStore } from "../../store/useBalanceStore"; export default function ChargeInsertPage() { const navigate = useNavigate(); 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"); + }; return (
@@ -20,7 +31,7 @@ export default function ChargeInsertPage() { navigate("/charge/select")}> 戻る - navigate("/charge/complete")}> + handleNext("user123")}> 完了