From af210b04f52ff315ead198943e2e3ad00f142f7b Mon Sep 17 00:00:00 2001 From: sana-sagegami Date: Wed, 10 Jun 2026 12:15:34 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E3=83=81=E3=83=A3=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=B3=E3=83=B3=E3=83=9D?= =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=E3=81=97=E3=80=81=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=A1=E3=83=83?= =?UTF-8?q?=E3=82=BB=E3=83=BC=E3=82=B8=E8=A1=A8=E7=A4=BA=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChargeButton/ChargeButton.module.scss | 24 +++++++++ .../features/home/ChargeButton/index.tsx | 20 ++++++++ .../home/HomeButtons/HomeButtons.module.scss | 49 ------------------- .../features/home/HomeButtons/index.tsx | 28 ----------- sysken-pay-front/src/pages/index.module.scss | 36 +++++++++++++- sysken-pay-front/src/pages/index.tsx | 32 +++++++++++- 6 files changed, 109 insertions(+), 80 deletions(-) create mode 100644 sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss create mode 100644 sysken-pay-front/src/components/features/home/ChargeButton/index.tsx delete mode 100644 sysken-pay-front/src/components/features/home/HomeButtons/HomeButtons.module.scss delete mode 100644 sysken-pay-front/src/components/features/home/HomeButtons/index.tsx diff --git a/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss b/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss new file mode 100644 index 0000000..d472040 --- /dev/null +++ b/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss @@ -0,0 +1,24 @@ +.chargeButton { + width: 90%; + max-width: 88rem; + height: 10rem; + background-color: $blue-40; + color: $white; + font-size: 4.0625rem; + font-weight: bold; + border: none; + border-radius: 1.5rem; + cursor: pointer; + box-shadow: 0 0.25rem 0.625rem $shadow-20; + transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; + + &:hover { + opacity: 0.85; + } + + &:active { + transform: scale(0.97); + box-shadow: 0 0.125rem 0.25rem $shadow-20; + opacity: 0.9; + } +} diff --git a/sysken-pay-front/src/components/features/home/ChargeButton/index.tsx b/sysken-pay-front/src/components/features/home/ChargeButton/index.tsx new file mode 100644 index 0000000..b781428 --- /dev/null +++ b/sysken-pay-front/src/components/features/home/ChargeButton/index.tsx @@ -0,0 +1,20 @@ +import { useNavigate } from "react-router-dom"; +import styles from "./ChargeButton.module.scss"; + +interface ChargeButtonProps { + onCharge?: () => void; +} + +export function ChargeButton({ onCharge }: ChargeButtonProps) { + const navigate = useNavigate(); + + return ( + + ); +} diff --git a/sysken-pay-front/src/components/features/home/HomeButtons/HomeButtons.module.scss b/sysken-pay-front/src/components/features/home/HomeButtons/HomeButtons.module.scss deleted file mode 100644 index 3725d19..0000000 --- a/sysken-pay-front/src/components/features/home/HomeButtons/HomeButtons.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -.checkoutButton { - width: 90%; - max-width: 88rem; - height: 32rem; - background-color: $white; - color: $blue-40; - font-size: 6.8rem; - font-weight: bold; - border: 1.25rem solid $blue-40; - border-radius: 2.625rem; - cursor: pointer; - box-shadow: 0 0.25rem 0.625rem $shadow-20; - transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; - - &:hover { - opacity: 0.85; - } - - &:active { - transform: scale(0.97); - box-shadow: 0 0.125rem 0.25rem $shadow-20; - opacity: 0.9; - } -} - -.chargeButton { - width: 90%; - max-width: 88rem; - height: 10rem; - background-color: $blue-40; - color: $white; - font-size: 4.0625rem; - font-weight: bold; - border: none; - border-radius: 1.5rem; - cursor: pointer; - box-shadow: 0 0.25rem 0.625rem $shadow-20; - transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; - - &:hover { - opacity: 0.85; - } - - &:active { - transform: scale(0.97); - box-shadow: 0 0.125rem 0.25rem $shadow-20; - opacity: 0.9; - } -} diff --git a/sysken-pay-front/src/components/features/home/HomeButtons/index.tsx b/sysken-pay-front/src/components/features/home/HomeButtons/index.tsx deleted file mode 100644 index 91e4270..0000000 --- a/sysken-pay-front/src/components/features/home/HomeButtons/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useNavigate } from "react-router-dom"; -import styles from "./HomeButtons.module.scss"; - -interface HomeButtonsProps { - onBuy?: () => void; - onCharge?: () => void; -} - -export function HomeButtons({ onBuy, onCharge }: HomeButtonsProps) { - const navigate = useNavigate(); - - return ( - <> - - - - ); -} diff --git a/sysken-pay-front/src/pages/index.module.scss b/sysken-pay-front/src/pages/index.module.scss index 7d41ce4..18f7988 100644 --- a/sysken-pay-front/src/pages/index.module.scss +++ b/sysken-pay-front/src/pages/index.module.scss @@ -11,6 +11,40 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 3rem; padding: 1.5rem; } + +.error { + position: fixed; + bottom: 3.5rem; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + background-color: $red-10; + border: 0.125rem solid $red-100; + border-radius: 1rem; + color: $red-100; + font-size: 1.4rem; + font-weight: $bold; + text-align: center; + padding: 1.25rem 2rem; + margin: 0; + width: fit-content; + max-width: calc(100% - 4rem); + box-sizing: border-box; + z-index: 10; + animation: fadeIn 0.2s ease-out; + will-change: opacity, transform; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateX(-50%) translateY(-0.5rem); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} diff --git a/sysken-pay-front/src/pages/index.tsx b/sysken-pay-front/src/pages/index.tsx index 2878934..28c6c05 100644 --- a/sysken-pay-front/src/pages/index.tsx +++ b/sysken-pay-front/src/pages/index.tsx @@ -1,14 +1,42 @@ import type { JSX } from "react"; +import { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; import Header from "../components/layouts/Header"; -import { HomeButtons } from "../components/features/home/HomeButtons"; +import { ChargeButton } from "../components/features/home/ChargeButton"; +import { BarcodeReader } from "../components/ui/BarcodeReader"; +import { useCartStore } from "../store/useCartStore"; +import { ItemRepositoryImpl } from "../adapter/repository/ItemRepositoryImpl"; import styles from "./index.module.scss"; export default function Home(): JSX.Element { + const navigate = useNavigate(); + const addItem = useCartStore((state) => state.addItem); + const [error, setError] = useState(null); + + useEffect(() => { + if (!error) return; + const timer = setTimeout(() => setError(null), 5000); + return () => clearTimeout(timer); + }, [error]); + + const handleScan = async (barcode: string) => { + try { + const data = await ItemRepositoryImpl.getItemByJanCode(barcode); + if (!data?.item_id) throw new Error("商品が見つかりませんでした。ご不明の際は担当者にご連絡ください。"); + addItem(data); + navigate("/buy/list"); + } catch (e) { + setError(e instanceof Error ? e.message : "商品の取得に失敗しました"); + } + }; + return (
- + + {error &&

{error}

} +
); From 620f5c8b863e4bf6236e0ac054f451f0890c7bd9 Mon Sep 17 00:00:00 2001 From: sana-sagegami Date: Wed, 10 Jun 2026 12:17:38 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E3=83=9E=E3=83=BC=E3=82=B8=E3=83=B3?= =?UTF-8?q?=E3=83=9C=E3=83=88=E3=83=A0=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97?= =?UTF-8?q?=E3=81=A6=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E9=96=93=E9=9A=94?= =?UTF-8?q?=E3=82=92=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/home/ChargeButton/ChargeButton.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss b/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss index d472040..60eb52f 100644 --- a/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss +++ b/sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss @@ -1,4 +1,5 @@ .chargeButton { + margin-bottom: 1.5rem; width: 90%; max-width: 88rem; height: 10rem;