import React, { useState } from 'react';
import { Package, User, Phone, MapPin, Calendar, CreditCard } from 'lucide-react';
export default function OrderForm() {
const [formData, setFormData] = useState({
customerName: '',
address: '',
phone: '',
product: '절임배추 20kg',
quantity: 1,
price: 43800,
deliveryDate: '',
notes: ''
});
const [submitted, setSubmitted] = useState(false);
const products = [
{ name: '절임배추 20kg', price: 43800 },
{ name: '다른 제품', price: 0 }
];
const handleChange = (e) => {
const { name, value } = e.target;
// 배송 희망일이 일요일인지 체크 (2025년)
if (name === 'deliveryDate' && value) {
const selectedDate = new Date(value);
const dayOfWeek = selectedDate.getDay();
if (dayOfWeek === 0) { // 0 = 일요일
alert('일요일은 배송이 불가능합니다. 다른 날짜를 선택해주세요.');
return;
}
}
setFormData(prev => ({
...prev,
[name]: value
}));
if (name === 'product') {
const selectedProduct = products.find(p => p.name === value);
if (selectedProduct) {
setFormData(prev => ({
...prev,
price: selectedProduct.price
}));
}
}
};
const totalAmount = formData.price * formData.quantity;
const handleSubmit = async () => {
if (!formData.customerName || !formData.address || !formData.phone || !formData.deliveryDate) {
alert('필수 항목을 모두 입력해주세요.');
return;
}
const orderData = {
...formData,
totalAmount,
timestamp: new Date().toLocaleString('ko-KR'),
arrivalDate: formData.deliveryDate,
paymentStatus: '국민은행'
};
try {
// 구글 시트 연동 URL (아래 안내 참조)
const GOOGLE_SCRIPT_URL = 'YOUR_GOOGLE_APPS_SCRIPT_URL_HERE';
await fetch(GOOGLE_SCRIPT_URL, {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(orderData)
});
console.log('주문 데이터:', orderData);
setSubmitted(true);
setTimeout(() => {
setSubmitted(false);
setFormData({
customerName: '',
address: '',
phone: '',
product: '절임배추 20kg',
quantity: 1,
price: 43800,
deliveryDate: '',
notes: ''
});
}, 3000);
} catch (error) {
console.error('제출 오류:', error);
setSubmitted(true);
}
};
if (submitted) {
return (
);
}
return (
);
}
주문이 접수되었습니다!
곧 연락드리겠습니다. 감사합니다.
주문하기
아래 정보를 입력해주세요
총 금액
{totalAmount.toLocaleString()}원
💡 구글 시트 연동 방법
아래 단계를 따라하시면 이 폼이 구글 시트와 자동으로 연동됩니다!
