作成ページの実装完了

packages/nextjs/app/enterpreneur/create/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+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";
+
+// タブの種類を表すユニオン型を定義
+type TabType = "割引券" | "引換券" | "会員券";
+
+const content = {
+  title: "割引券", // タイトル
+  issueDate: "12/6", // 発行日
+  amount: 5000, // 金額
+  expiryDate: "12/5 ~ 12/6", // 有効期限
+  usageScope: "商用化", // 使用範囲
+};
+
+export default function TicketTabs() {
+  const [value, setValue] = useState<TabType>("割引券");
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    const tabLabels: TabType[] = ["割引券", "引換券", "会員券"];
+    setValue(tabLabels[newValue]);
+  };
+
+  useEffect(() => {
+    console.log(value);
+  }, [value]);
+
+  return (
+    <div>
+      <Typography variant="h5" sx={{ textAlign: "center", mt: 5 }}>
+        クーポンの登録
+      </Typography>
+      <SelectTab value={value} handleChange={handleChange} />
+      <Box sx={{ display: "flex", gap: 2, justifyContent: "center" }}>
+        <Card {...content} />
+        <SwitchField value={value} />
+      </Box>
+    </div>
+  );
+}

packages/nextjs/app/enterpreneur/form/card.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import { Box, CardContent, Divider, Card as MuiCard, Typography } from "@mui/material";
+
+type CardProps = {
+  title: string; // タイトル
+  amount: number; // 金額
+  expiryDate: string; // 有効期限
+  usageScope: string; // 使用範囲
+};
+
+export const Card = ({ title, amount, expiryDate, usageScope }: CardProps) => {
+  return (
+    <MuiCard
+      sx={{
+        width: 300,
+        borderRadius: 2,
+        boxShadow: 3,
+        backgroundColor: "#F0F0F0",
+        padding: 2,
+        position: "relative",
+        overflow: "visible",
+        pt: 5,
+      }}
+    >
+      {/* 上部の丸いアイコン */}
+      <Box
+        sx={{
+          width: 50,
+          height: 50,
+          backgroundColor: "#A9A9A9",
+          borderRadius: "50%",
+          position: "absolute",
+          top: -25,
+          left: "50%",
+          transform: "translateX(-50%)",
+          mt: 5,
+        }}
+      />
+
+      <CardContent>
+        {/* 金額 */}
+        <Typography
+          variant="h3"
+          sx={{
+            textAlign: "center",
+            fontWeight: "bold",
+            color: "#000",
+            marginBottom: 2,
+            mt: 3,
+          }}
+        >
+          {amount}円
+        </Typography>
+
+        {/* バーコード */}
+        <Box
+          sx={{
+            textAlign: "center",
+            marginBottom: 3,
+          }}
+        >
+          <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={{
+            fontSize: "12px",
+            color: "#666",
+            textAlign: "left",
+          }}
+        >
+          <Typography variant="body2" sx={{ lineHeight: 1.5 }}>
+            1. クーポンは1回のご購入につき1枚のみご利用いただけます。
+            <br />
+            2. 他のクーポンや割引サービスの併用はできません。
+          </Typography>
+        </Box>
+      </CardContent>
+    </MuiCard>
+  );
+};

packages/nextjs/app/enterpreneur/form/fieldSet.tsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { FC } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Grid from "@mui/material/Grid";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import TextField from "@mui/material/TextField";
+
+type FiledSetProps = {
+  title: string;
+};
+
+export const FiledSet: FC<FiledSetProps> = ({ title }) => {
+  const [amount, setAmount] = useState<string>("");
+  const [startDate, setStartDate] = useState<string>("");
+  const [endDate, setEndDate] = useState<string>("");
+  const [usage, setUsage] = useState<string>("会社全体");
+  const [details, setDetails] = useState<string>("");
+  const [storeName, setStoreName] = useState<string>("");
+
+  return (
+    <>
+      <Grid item xs={12} md={6}>
+        <Box sx={{ width: "100%", maxWidth: 400 }}>
+          <TextField fullWidth label={title} value={amount} onChange={e => setAmount(e.target.value)} sx={{ mb: 2 }} />
+          <Grid container spacing={2}>
+            <Grid item xs={6}>
+              <TextField
+                fullWidth
+                label="開始期間"
+                type="date"
+                InputLabelProps={{ shrink: true }}
+                value={startDate}
+                onChange={e => setStartDate(e.target.value)}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <TextField
+                fullWidth
+                label="有効期限"
+                type="date"
+                InputLabelProps={{ shrink: true }}
+                value={endDate}
+                onChange={e => setEndDate(e.target.value)}
+              />
+            </Grid>
+          </Grid>
+          <RadioGroup row value={usage} onChange={e => setUsage(e.target.value)} sx={{ mt: 2, mb: 2 }}>
+            <FormControlLabel value="会社全体" control={<Radio />} label="会社全体" />
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              <FormControlLabel value="店舗名入力" control={<Radio />} label="店舗名入力" />
+              <TextField label="店舗名" value={storeName} onChange={e => setStoreName(e.target.value)} sx={{ ml: 2 }} />
+            </Box>
+          </RadioGroup>
+          <TextField
+            fullWidth
+            label="詳細情報"
+            multiline
+            rows={4}
+            value={details}
+            onChange={e => setDetails(e.target.value)}
+            sx={{ mb: 2 }}
+          />
+          <Button variant="contained" color="error" fullWidth sx={{ fontWeight: "bold" }}>
+            クーポンを発行する
+          </Button>
+        </Box>
+      </Grid>
+    </>
+  );
+};

packages/nextjs/app/enterpreneur/form/selectTab.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { Box, Tab, Tabs } from "@mui/material";
+import { styled } from "@mui/system";
+
+type SelectTabProps = {
+  value: tabType;
+  handleChange: (event: React.SyntheticEvent, newValue: number) => void;
+};
+
+type tabType = "割引券" | "引換券" | "会員券";
+
+const CustomTabs = styled(Tabs)({
+  backgroundColor: "#D3D3D3", // 背景色
+  borderRadius: "20px", // 丸みを付ける
+  padding: "4px", // 全体のパディング
+  "& .MuiTabs-indicator": {
+    display: "none", // デフォルトのインジケータを非表示
+  },
+});
+
+const CustomTab = styled(Tab)(({ theme }) => ({
+  textTransform: "none", // テキストの大文字変換を無効化
+  fontWeight: 500, // テキストの太さ
+  fontSize: "1.2rem", // フォントサイズ
+  color: "black", // 未選択時の文字色
+  borderRadius: "100px", // タブの丸み
+  minWidth: "auto", // タブの幅調整
+  padding: "8px 30px", // タブ内の余白
+  "&.Mui-selected": {
+    backgroundColor: "white", // 選択時の背景色
+    color: "black", // 選択時の文字色
+  },
+}));
+
+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="会員券" />
+      </CustomTabs>
+    </Box>
+  );
+};

packages/nextjs/app/enterpreneur/form/switchField.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { FiledSet } from "./fieldSet";
+
+type SwitchFieldProps = {
+  value: TabType;
+};
+
+type TabType = "割引券" | "引換券" | "会員券" | null;
+
+export const SwitchField: FC<SwitchFieldProps> = ({ value }) => {
+  switch (value) {
+    case "割引券":
+      return <DiscountField />;
+    case "引換券":
+      return <ExchangeField />;
+    case "会員券":
+      return <MemberField />;
+    default:
+      return null;
+  }
+};
+
+export const DiscountField = () => {
+  return (
+    <>
+      <FiledSet title={"金額"} />
+    </>
+  );
+};
+
+export const ExchangeField = () => {
+  return (
+    <>
+      <FiledSet title={"引換対象の商品・サービス"} />
+    </>
+  );
+};
+
+export const MemberField = () => {
+  return (
+    <>
+      <FiledSet title={"引換対象"} />
+    </>
+  );
+};