diff --git a/frontend/app/routes/client._index/driving-state/arrived.tsx b/frontend/app/routes/client._index/driving-state/arrived.tsx index a39664cc..8d6a98e3 100644 --- a/frontend/app/routes/client._index/driving-state/arrived.tsx +++ b/frontend/app/routes/client._index/driving-state/arrived.tsx @@ -14,10 +14,15 @@ import confetti from "canvas-confetti"; export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => { const { data } = useClientContext(); const [rating, setRating] = useState(0); + const [errorMessage, setErrorMessage] = useState(); const onClick: MouseEventHandler = useCallback( (e) => { e.preventDefault(); + if (rating < 1 || rating > 5) { + setErrorMessage("評価は1から5の間でなければなりません。"); + return; + } try { void fetchAppPostRideEvaluation({ pathParams: { @@ -50,33 +55,40 @@ export const Arrived = ({ onEvaluated }: { onEvaluated: () => void }) => { }, []); return ( -
-
- - - 目的地に到着しました - -
-
- 今回のドライブはいかがでしたか? - - {data?.fare && ( - + <> + +
+ + + 目的地に到着しました + +
+
+ 今回のドライブはいかがでしたか? + + {data?.fare && ( + + )} + +
+ {errorMessage && ( + + {errorMessage} + )} - -
-
+ + ); };