37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import BankTransferModal from '@/app/components/BankTransferModal';
|
|
|
|
// 상세 페이지의 구매 버튼 + 모달 트리거 (클라이언트 경계).
|
|
// 서버 페이지가 product 요약만 넘겨주고, 주문 금액은 서버(API)가 DB로 확정한다.
|
|
|
|
const KOR_BODY = { letterSpacing: '-0.01em' } as const;
|
|
|
|
interface Props {
|
|
product: { id: string; name: string; price: number };
|
|
}
|
|
|
|
export default function BuySection({ product }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
className="inline-flex items-center justify-center w-full sm:w-auto px-8 py-3.5 rounded-lg text-sm font-semibold transition-colors hover:bg-[var(--jsm-accent-hover)]"
|
|
style={{ background: 'var(--jsm-accent)', color: '#ffffff', ...KOR_BODY }}
|
|
>
|
|
구매하기
|
|
</button>
|
|
|
|
<BankTransferModal
|
|
product={product}
|
|
isOpen={open}
|
|
onClose={() => setOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|