"use client";
import { useEffect, useRef } from "react";
import { createCharge } from "@/lib/api/charge";

export default function CardForm() {
  const numberRef = useRef<any>(null);
  const expiryRef = useRef<any>(null);
  const cvcRef = useRef<any>(null);

  useEffect(() => {
    const payjp = Payjp("pk_test_********");
    const elements = payjp.elements();

    numberRef.current = elements.create("cardNumber");
    expiryRef.current = elements.create("cardExpiry");
    cvcRef.current = elements.create("cardCvc");

    numberRef.current.mount("#card-number");
    expiryRef.current.mount("#card-expiry");
    cvcRef.current.mount("#card-cvc");
  }, []);

  const handleSubmit = async () => {
    const payjp = Payjp("pk_test_********");
    const result = await payjp.createToken(numberRef.current); // ✅ 1つ渡せばOK

    if (result.error) {
      alert("カード情報が正しくありません");
    } else {
      const token = result.id;
      await createCharge({ token, amount: 1000 });
    }
  };

  return (
    <>
      <div id="card-number" />
      <div id="card-expiry" />
      <div id="card-cvc" />
      <button onClick={handleSubmit}>支払う</button>
    </>
  );
}

"use client";
import { useEffect, useRef } from "react";
import { createCharge } from "@/lib/api/charge";

export default function CardForm() {
  const numberRef = useRef<any>(null);
  const expiryRef = useRef<any>(null);
  const cvcRef = useRef<any>(null);

  useEffect(() => {
    const payjp = Payjp("pk_test_********");
    const elements = payjp.elements();

    numberRef.current = elements.create("cardNumber");
    expiryRef.current = elements.create("cardExpiry");
    cvcRef.current = elements.create("cardCvc");

    numberRef.current.mount("#card-number");
    expiryRef.current.mount("#card-expiry");
    cvcRef.current.mount("#card-cvc");
  }, []);

  const handleSubmit = async () => {
    const payjp = Payjp("pk_test_********");
    const result = await payjp.createToken(numberRef.current); // ✅ 1つ渡せばOK

    if (result.error) {
      alert("カード情報が正しくありません");
    } else {
      const token = result.id;
      await createCharge({ token, amount: 1000 });
    }
  };

  return (
    <>
      <div id="card-number" />
      <div id="card-expiry" />
      <div id="card-cvc" />
      <button onClick={handleSubmit}>支払う</button>
    </>
  );
}

type ChargePayload = {
  token: string;
  amount: number;
};

export const createCharge = async (
  payload: ChargePayload
): Promise<"ok" | "error"> => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/charge`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
    return res.ok ? "ok" : "error";
  } catch (e) {
    return "error";
  }
};

type ChargePayload = {
  token: string;
  amount: number;
};

export const createCharge = async (
  payload: ChargePayload
): Promise<"ok" | "error"> => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/charge`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
    return res.ok ? "ok" : "error";
  } catch (e) {
    return "error";
  }
};

import payjp
from fastapi import FastAPI, Request

payjp.api_key = "sk_test_********"  # 秘密鍵を設定

app = FastAPI()

@app.post("/api/charge")
async def charge(request: Request):
    body = await request.json()
    token = body["token"]
    amount = body["amount"]

    try:
        charge = payjp.Charge.create(
            amount=amount,
            currency="jpy",
            card=token
        )
        return {"status": "success", "charge_id": charge.id}
    except payjp.error.PayjpError as e:
        return {"status": "error", "message": str(e)}

import payjp
from fastapi import FastAPI, Request

payjp.api_key = "sk_test_********"  # 秘密鍵を設定

app = FastAPI()

@app.post("/api/charge")
async def charge(request: Request):
    body = await request.json()
    token = body["token"]
    amount = body["amount"]

    try:
        charge = payjp.Charge.create(
            amount=amount,
            currency="jpy",
            card=token
        )
        return {"status": "success", "charge_id": charge.id}
    except payjp.error.PayjpError as e:
        return {"status": "error", "message": str(e)}

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

version: '3'
services:
  mysql:
    image: mysql:8.0
    ... # 詳細は別記事へ

  FastAPI:
    build:
      context: ..　　// Dockerfile がある位置を指定
      dockerfile: docker/Dockerfile
    container_name: 任意のコンテナ名
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    env_file:
      - ../.env.local
    depends_on:　　// 「このアプリは mysql が先に起動していないとダメだよ」という意味
      - mysql

version: '3'
services:
  mysql:
    image: mysql:8.0
    ... # 詳細は別記事へ

  FastAPI:
    build:
      context: ..　　// Dockerfile がある位置を指定
      dockerfile: docker/Dockerfile
    container_name: 任意のコンテナ名
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    env_file:
      - ../.env.local
    depends_on:　　// 「このアプリは mysql が先に起動していないとダメだよ」という意味
      - mysql

// Pythonの軽くて早いバージョンを指定
FROM python:3.10-slim

// 実行時に.pycファイルを作らないように設定（大量にできてGitに上げれなくなる）
ENV PYTHONDONTWRITEBYTECODE=1

// コンテナ内で作業するディレクトリを作成
WORKDIR /app

// ホスト側の ./backend フォルダを、コンテナ内の /app に丸ごとコピー
COPY ./backend /app

// requirements.txt をコピーして、必要なライブラリをインストール
COPY ./backend/requirements.txt .

RUN pip install --upgrade pip
RUN pip install -r requirements.txt

// アプリを起動
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

// Pythonの軽くて早いバージョンを指定
FROM python:3.10-slim

// 実行時に.pycファイルを作らないように設定（大量にできてGitに上げれなくなる）
ENV PYTHONDONTWRITEBYTECODE=1

// コンテナ内で作業するディレクトリを作成
WORKDIR /app

// ホスト側の ./backend フォルダを、コンテナ内の /app に丸ごとコピー
COPY ./backend /app

// requirements.txt をコピーして、必要なライブラリをインストール
COPY ./backend/requirements.txt .

RUN pip install --upgrade pip
RUN pip install -r requirements.txt

// アプリを起動
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

"use client";

import { useState } from "react";

export default function RegisterForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("http://localhost:8000/registration", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage("登録成功！ ユーザーID: " + data.user_id);
      } else {
        setMessage("登録失敗: " + (data.detail || "エラーが発生しました"));
      }
    } catch (error) {
      console.error("エラー:", error);
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto mt-10">
      <div>
        <label htmlFor="name" className="block font-medium mb-1">
          お名前
        </label>
        <input
          id="name"
          name="name"
          placeholder="例：山田 太郎"
          value={form.name}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          placeholder="例：taro@example.com"
          type="email"
          value={form.email}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="password" className="block font-medium mb-1">
          パスワード
        </label>
        <input
          id="password"
          name="password"
          placeholder="半角英数字8文字以上"
          type="password"
          value={form.password}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded w-full"
      >
        ユーザー登録
      </button>

      {message && <p className="mt-4 text-sm text-gray-700">{message}</p>}
    </form>
  );
}

"use client";

import { useState } from "react";

export default function RegisterForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("http://localhost:8000/registration", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage("登録成功！ ユーザーID: " + data.user_id);
      } else {
        setMessage("登録失敗: " + (data.detail || "エラーが発生しました"));
      }
    } catch (error) {
      console.error("エラー:", error);
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto mt-10">
      <div>
        <label htmlFor="name" className="block font-medium mb-1">
          お名前
        </label>
        <input
          id="name"
          name="name"
          placeholder="例：山田 太郎"
          value={form.name}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          placeholder="例：taro@example.com"
          type="email"
          value={form.email}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="password" className="block font-medium mb-1">
          パスワード
        </label>
        <input
          id="password"
          name="password"
          placeholder="半角英数字8文字以上"
          type="password"
          value={form.password}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded w-full"
      >
        ユーザー登録
      </button>

      {message && <p className="mt-4 text-sm text-gray-700">{message}</p>}
    </form>
  );
}

from sqlalchemy import create_engine // DBとの接続エンジンを作るための関数
from sqlalchemy.orm import sessionmaker, declarative_base
from dotenv import load_dotenv  // .envファイルから環境変数を読み込むための関数
import os // 環境変数を取得するための標準ライブラリ

// ルートの.env読み込み
load_dotenv(dotenv_path=".env.local")

DB_HOST = os.getenv("DB_HOST")
DB_PORT = os.getenv("DB_PORT")
DB_NAME = os.getenv("DB_NAME")
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")

// データベース接続用のURLを作成
DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"

// 接続準備
engine = create_engine(DB_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()

from sqlalchemy import create_engine // DBとの接続エンジンを作るための関数
from sqlalchemy.orm import sessionmaker, declarative_base
from dotenv import load_dotenv  // .envファイルから環境変数を読み込むための関数
import os // 環境変数を取得するための標準ライブラリ

// ルートの.env読み込み
load_dotenv(dotenv_path=".env.local")

DB_HOST = os.getenv("DB_HOST")
DB_PORT = os.getenv("DB_PORT")
DB_NAME = os.getenv("DB_NAME")
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")

// データベース接続用のURLを作成
DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"

// 接続準備
engine = create_engine(DB_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware 　// 別ドメインからのアクセスを許可するための設定
from routers import registration

// FastAPIアプリケーションの本体を作成
app = FastAPI()

// CORS（クロスオリジン）設定を追加：別のドメインからアクセスを許可する
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  // フロントエンド（Next.js）からのアクセスを許可
    allow_credentials=True,  // クッキーなどの認証情報を含めた通信を許可
    allow_methods=["*"],  // GETやPOSTなど、すべてのHTTPメソッドを許可
    allow_headers=["*"],  // すべてのリクエストヘッダーを許可（認証トークンなど）
)

// APIの処理を追加（今回はregistration.pyのルーター）
app.include_router(registration.router)

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware 　// 別ドメインからのアクセスを許可するための設定
from routers import registration

// FastAPIアプリケーションの本体を作成
app = FastAPI()

// CORS（クロスオリジン）設定を追加：別のドメインからアクセスを許可する
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  // フロントエンド（Next.js）からのアクセスを許可
    allow_credentials=True,  // クッキーなどの認証情報を含めた通信を許可
    allow_methods=["*"],  // GETやPOSTなど、すべてのHTTPメソッドを許可
    allow_headers=["*"],  // すべてのリクエストヘッダーを許可（認証トークンなど）
)

// APIの処理を追加（今回はregistration.pyのルーター）
app.include_router(registration.router)

import uuid
from sqlalchemy import Column, String, Boolean, DateTime
from db import Base

class Users(Base):
    __tablename__ = "users"

    user_id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
    name = Column(String(100), nullable=False)
    email = Column(String(100), nullable=False, unique=True)
    password = Column(String(255), nullable=False)
    updated_by = Column(String(100))
    updated_at = Column(DateTime)

import uuid
from sqlalchemy import Column, String, Boolean, DateTime
from db import Base

class Users(Base):
    __tablename__ = "users"

    user_id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
    name = Column(String(100), nullable=False)
    email = Column(String(100), nullable=False, unique=True)
    password = Column(String(255), nullable=False)
    updated_by = Column(String(100))
    updated_at = Column(DateTime)

from pydantic import BaseModel

class UserCreate(BaseModel):
    name: str
    email: str
    password: str

from pydantic import BaseModel

class UserCreate(BaseModel):
    name: str
    email: str
    password: str

from datetime import datetime, timezone, timedelta

def generate_common_fields():
    jst_now = datetime.now(timezone(timedelta(hours=9)))
    return {
        "updated_by": "system",
        "updated_at": jst_now,
    }

from datetime import datetime, timezone, timedelta

def generate_common_fields():
    jst_now = datetime.now(timezone(timedelta(hours=9)))
    return {
        "updated_by": "system",
        "updated_at": jst_now,
    }

from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session　　// DBとのやりとりの型（Session）を指定
from db import SessionLocal
from models.user import Users
from schemas.user import UserCreate
from utils.common_fields import generate_common_fields

router = APIRouter()

// データベースとの接続を一時的に確立して、使い終わったら自動で切るための仕組み
def get_db():
    db = SessionLocal()  // DB接続を開始
    try:
        yield db　　 // データを登録・検索
    finally:
        db.close()　// DB接続を終了
        
@router.post("/registration")
def create_user(user: UserCreate, db: Session = Depends(get_db)):
    common_fields = generate_common_fields()

    db_user = Users(
        **user.dict(),
        **common_fields
    )

    db.add(db_user)
    db.commit()

    return {"message": "登録成功"}

from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session　　// DBとのやりとりの型（Session）を指定
from db import SessionLocal
from models.user import Users
from schemas.user import UserCreate
from utils.common_fields import generate_common_fields

router = APIRouter()

// データベースとの接続を一時的に確立して、使い終わったら自動で切るための仕組み
def get_db():
    db = SessionLocal()  // DB接続を開始
    try:
        yield db　　 // データを登録・検索
    finally:
        db.close()　// DB接続を終了
        
@router.post("/registration")
def create_user(user: UserCreate, db: Session = Depends(get_db)):
    common_fields = generate_common_fields()

    db_user = Users(
        **user.dict(),
        **common_fields
    )

    db.add(db_user)
    db.commit()

    return {"message": "登録成功"}

docker logs -f コンテナ名

docker logs -f コンテナ名

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello FastAPI!"}

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello FastAPI!"}

// app/api/auth/[...nextauth]/route.ts

// 認証のエントリーポイント
import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

// NextAuthに設定を渡して処理を作成
const handler = NextAuth(authOptions);

// App RouterではGETとPOSTのメソッドを個別にエクスポートする必要あり
export { handler as GET, handler as POST };

// lib/auth.ts

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";　// NextAuth.jsが使っているトークン（認証情報）の型名
import type { NextAuthOptions } from "next-auth";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export const authOptions: NextAuthOptions = {
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
};

// pages/api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export default NextAuth({
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
});

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

interface Token extends JWT {
  role?: string;
}

export const authOptions = {
  // CredentialsProvider の設定（IDとパスワードでログインさせるための仕組み）
  providers: [
    CredentialsProvider({
      // ログイン画面のフォームの中身
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },

      // 入力されたIDとパスワードが正しいかチェックする関数
      async authorize(credentials) {
        if (
          credentials?.username === process.env.["任意の環境変数名"] &&
          credentials?.password === process.env.["任意の環境変数名"]
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null;
      },
    }),
  ],
  // 独自に作成するページのパス
  pages: {
    signIn: "/auth/signin",
  },
  // セッションの設定
  session: {
    strategy: "jwt" as const,
    maxAge: 100,
  },
  // ログイン後、ユーザー情報（user）やトークン（token）に追加情報（ここでは role）を保持・共有
  callbacks: {
    // useSession() で取り出すとき、session.user にも role を渡す
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
    // ログイン後、トークンに role を保存
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
  },
};

import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

"use client";
import { SessionProvider } from "next-auth/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

import type { Metadata } from "next";
import { Providers } from "@/components/Providers";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";

export default function SignInForm() {
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg("");

    const res = await signIn("credentials", {
      redirect: false,
      username: userId,
      password,
    });

    if (res?.error) {
      setErrorMsg("ログインIDまたはパスワードが間違っています");
    } else if (res?.ok) {
      window.location.href = "/download";
    } else {
      setErrorMsg("不明なエラーが発生しました");
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-cover bg-center" style={{ backgroundImage: "url('/images/white-background.png')" }}>
      <form onSubmit={handleSubmit} className="bg-white p-8 rounded shadow-md w-[500px] mx-auto">
        <h1 className="text-2xl font-bold mb-6 text-center">ログイン</h1>

        <label className="block mb-4">
          <span className="block text-gray-700 font-semibold mb-1">ログインID</span>
          <input type="text" value={userId} onChange={(e) => setUserId(e.target.value)} required className="w-full px-3 py-2 border border-gray-300 rounded" />
        </label>

        <label className="block mb-4">
          <span className="block text-gray-700 font-semibold mb-1">パスワード</span>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="w-full px-3 py-2 border border-gray-300 rounded" />
        </label>

        {errorMsg && <p className="text-red-600 text-center mb-4">{errorMsg}</p>}

        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">ログイン</button>
      </form>
    </div>
  );
}

"use client";

import { signIn } from "next-auth/react";

export default function Login() {
  return (
    <div className="mt-8 text-center">
      <button
        className="text-blue-600 underline"
        onClick={() => signIn(undefined, { callbackUrl: "/auth/signin" })}
      >
        🔒 管理者ログインはこちら
      </button>
    </div>
  );
}

import { NextResponse } from "next/server";
import sgMail from "@sendgrid/mail";

export async function POST(req: Request) {
  const data = await req.json();
  const { name, email, phone, message } = data;

  // 自動送信メールの件名と本文
  const subject = "お問い合わせありがとうございます";
  const mailBody = `${name}様

  このたびはお問い合わせいただき、誠にありがとうございます。
  以下の内容で受付いたしました。
  
  ---------------

  お名前： ${name}
  メール： ${email}
  電話番号： ${phone}
  メッセージ： 
  ${message}

  ---------------

  担当より折り返しご連絡させていただきます。
  今しばらくお待ちください。`;

  try {
    // 自動送信メール
    sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
    await sgMail.send({
      from: process.env.SENDGRID_FROM_EMAIL!,
      to: email,
      subject,
      text: mailBody,
    });

    return NextResponse.json({ message: "メール送信成功" });
  } catch (error) {
    return NextResponse.json(
      { message: "Slack送信に失敗しました" },
      { status: 500 }
    );
  }
}

await fetch(process.env.SLACK_WEBHOOK_URL!, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name,
    email,
    phone,
    message,
  }),
});