Merge pull request #4 from aki-0517/feat/create-page

fix ui
aki-0517 · Dec 5, 2024 · 64099ec · 64099ec
2 parents 13bd260 + e67ad58
commit 64099ec
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 149 deletions.
diff --git a/packages/nextjs/app/enterpreneur/create/page.tsx b/packages/nextjs/app/enterpreneur/create/page.tsx
@@ -2,11 +2,13 @@
 
 import { useState } from "react";
 import { useEffect } from "react";
-import { Card } from "../form/card";
 import { SelectTab } from "../form/selectTab";
 import { SwitchField } from "../form/switchField";
 import { Box, Tab, Tabs } from "@mui/material";
 import { Typography } from "@mui/material";
+import { Card } from "~~/components/Card";
+import { CardList } from "~~/components/CardList";
+import DividerWithText from "~~/components/DividerWithText";
 
 // タブの種類を表すユニオン型を定義
 type TabType = "割引券" | "引換券" | "会員券";
@@ -27,20 +29,49 @@ export default function TicketTabs() {
     setValue(tabLabels[newValue]);
   };
 
-  useEffect(() => {
-    console.log(value);
-  }, [value]);
+  const cards = [
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+    {
+      title: "引換券",
+      issueDate: "2024.12.05",
+      amount: 7000,
+      expiryDate: "2025.06.30",
+      usageScope: "店舗全体",
+    },
+  ];
 
   return (
     <div>
       <Typography variant="h5" sx={{ textAlign: "center", mt: 5 }}>
         クーポンの登録
       </Typography>
       <SelectTab value={value} handleChange={handleChange} />
-      <Box sx={{ display: "flex", gap: 2, justifyContent: "center" }}>
+      <Box sx={{ display: "flex", gap: 4, justifyContent: "center", mb: 5, pb: 3 }}>
         <Card {...content} />
         <SwitchField value={value} />
       </Box>
+      <DividerWithText />
+      <CardList cards={cards} />
     </div>
   );
 }
diff --git a/packages/nextjs/app/enterpreneur/form/card.tsx b/packages/nextjs/app/enterpreneur/form/card.tsx
diff --git a/packages/nextjs/app/enterpreneur/form/selectTab.tsx b/packages/nextjs/app/enterpreneur/form/selectTab.tsx
@@ -36,9 +36,27 @@ export const SelectTab: FC<SelectTabProps> = ({ value, handleChange }) => {
   return (
     <Box sx={{ display: "flex", justifyContent: "center", mt: 3, mb: 3 }}>
       <CustomTabs value={value} onChange={handleChange} aria-label="custom tabs">
-        <CustomTab label="割引券" />
-        <CustomTab label="引換券" />
-        <CustomTab label="会員券" />
+        <CustomTab
+          sx={{
+            color: value === "割引券" ? "white" : "black",
+            backgroundColor: value === "割引券" ? "red" : "transparent",
+          }}
+          label="割引券"
+        />
+        <CustomTab
+          sx={{
+            color: value === "引換券" ? "white" : "black",
+            backgroundColor: value === "引換券" ? "red" : "transparent",
+          }}
+          label="引換券"
+        />
+        <CustomTab
+          sx={{
+            color: value === "会員券" ? "white" : "black",
+            backgroundColor: value === "会員券" ? "red" : "transparent",
+          }}
+          label="会員券"
+        />
       </CustomTabs>
     </Box>
   );

diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { Box, CardContent, Card as MuiCard, Typography } from "@mui/material";
+import { Divider } from "@mui/material";
 
 type CardProps = {
   title: string; // タイトル
@@ -18,47 +19,101 @@ export const Card = ({ title, issueDate, amount, expiryDate, usageScope }: CardP
         width: 300,
         borderRadius: 2,
         boxShadow: 3,
-        backgroundColor: "#f9f9f9",
+        backgroundColor: "#F0F0F0",
+        padding: 2,
+        position: "relative",
+        overflow: "visible",
+        pt: 5,
+        mb: 4,
       }}
     >
-      <CardContent>
-        <Typography variant="h4" sx={{ fontWeight: "bold", marginBottom: 3, textAlign: "center" }}>
-          {title}
-        </Typography>
+      {/* 上部の丸いアイコン */}
+      <Box
+        sx={{
+          width: 50,
+          height: 50,
+          borderRadius: "50%",
+          position: "absolute",
+          top: -25,
+          left: "50%",
+          transform: "translateX(-50%)",
+          mt: 5,
+        }}
+      >
+        <img src="https://s3-alpha-sig.figma.com/img/1852/3be3/3bd208d48503fe4dd2ecab76c3ced683?Expires=1734307200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Nwv7petZMCtj40Kwud6oHexi6jLRp~4js3ABJibM3vCtiBBXDIi2b0yHp6RR7AWdXIHMA5KKBOu5x0q~3G9LYyf35NFrIfLLxoi7j7M4boZK~uWIdOyYXrout8RBuUTWXKSqGWSpdPVdN8AD8ctzgt7-8qKI1QElDPMO3P9kfdLqE3bHrNNbUeYOsQBAEcHnq2~HPCgCzyULl7Kr1jVZTMvkZeWwlrEt0d-BJlvkhRVu0o-irWDLDR2aFCko7mL8MKgQVsQFC4meg3wHlISsuWy4F8AAIL6Rp5fxByfWdpgiQB1xdufQ~wGTw42fRhPS5gQbFOIel6AefnJ~PC5~Lw__"></img>
+      </Box>
 
-        <Typography variant="body2" color="text.secondary" sx={{ textAlign: "right", marginBottom: 2 }}>
-          {issueDate} 発行
+      <CardContent>
+        {/* 金額 */}
+        <Typography
+          variant="h3"
+          sx={{
+            textAlign: "center",
+            fontWeight: "bold",
+            color: "#000",
+            marginBottom: 2,
+            mt: 3,
+          }}
+        >
+          {amount}円
         </Typography>
 
+        {/* バーコード */}
         <Box
           sx={{
-            fontSize: "24px",
-            fontWeight: "bold",
             textAlign: "center",
-            color: "#000",
             marginBottom: 3,
           }}
         >
-          {amount}円
+          <img
+            src="https://barcode.tec-it.com/barcode.ashx?data=7000&type=Code128&translate-esc=true&width=500&height=200"
+            alt="バーコード"
+            style={{
+              width: "100%",
+              height: "50px",
+              objectFit: "contain",
+            }}
+          />
         </Box>
 
+        <Divider sx={{ marginY: 2 }} />
+
+        {/* 有効期限 */}
+        <Box sx={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
+          <Typography variant="body2" sx={{ color: "#666" }}>
+            有効期限
+          </Typography>
+          <Typography variant="body2" sx={{ color: "#000" }}>
+            {expiryDate}
+          </Typography>
+        </Box>
+
+        {/* 使用範囲 */}
+        <Box sx={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
+          <Typography variant="body2" sx={{ color: "#666" }}>
+            使用範囲
+          </Typography>
+          <Typography variant="body2" sx={{ color: "#000" }}>
+            {usageScope}
+          </Typography>
+        </Box>
+
+        <Divider sx={{ marginY: 2 }} />
+
+        {/* 詳細情報 */}
         <Box
           sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            fontSize: "14px",
-            color: "text.secondary",
-            marginBottom: 2,
+            fontSize: "12px",
+            color: "#666",
+            textAlign: "left",
           }}
         >
-          <Typography variant="body2" color="text.secondary">
-            有効期限: {expiryDate}
+          <Typography variant="body2" sx={{ lineHeight: 1.5 }}>
+            1. クーポンは1回のご購入につき1枚のみご利用いただけます。
+            <br />
+            2. 他のクーポンや割引サービスの併用はできません。
           </Typography>
         </Box>
-
-        <Typography variant="body2" color="text.secondary">
-          使用範囲: {usageScope}
-        </Typography>
       </CardContent>
     </MuiCard>
   );

diff --git a/packages/nextjs/components/CardList.tsx b/packages/nextjs/components/CardList.tsx
@@ -23,7 +23,7 @@ export const CardList = ({ cards }: CardListProps) => {
         justifyContent: "center",
         alignItems: "center",
         width: "70%",
-        margin: "100px auto",
+        margin: "50px auto",
       }}
     >
       {cards.map((card, index) => (