feat: チャージボタンコンポーネントを追加

sysken-pay-front/src/components/features/home/ChargeButton/ChargeButton.module.scss

@@ -0,0 +1,25 @@
+.chargeButton {
+  margin-bottom: 1.5rem;
+  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;
+  }
+}

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 (
+    <button
+      type="button"
+      className={styles.chargeButton}
+      onClick={onCharge ?? (() => navigate("/charge"))}
+    >
+      チャージ
+    </button>
+  );
+}

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);
+  }
+}

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<string | null>(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 (
     <div className={styles.container}>
       <Header title="シス研Pay" right="setting" shadow={true} />
       <main className={styles.main}>
-        <HomeButtons />
+        <BarcodeReader mode="product" onScan={handleScan} />
+        {error && <p className={styles.error}>{error}</p>}
+        <ChargeButton />
       </main>
     </div>
   );