Haewon Kam
2888ff2c28
랜딩은 ssr:false 정적 빌드라 서버 라우트가 없다. Vercel /api 디렉터리 함수로 받는다.
클라이언트가 같은 오리진(/api/lead)으로 쏘므로 엔드포인트 환경변수도 CORS 도 없다.
api/lead.ts — 리드를 잃지 않는 것이 유일한 책임
1) 먼저 구조화 로그를 남긴다. 웹훅이 죽어도 Vercel 로그에 리드가 남는다.
2) LEAD_WEBHOOK_URL 이 있으면 전달(Slack Incoming Webhook·Zapier·자체 API 모두 POST).
Slack 용 text 와 원본 필드를 함께 실어 수신처를 바꿔도 이 파일을 안 고친다.
3) 웹훅 실패해도 200 — 1) 에서 리드를 확보했으니 방문자에게 재입력을 시킬 이유가 없다.
대신 실패는 로그에 크게 남긴다.
봇 함정(website) 값이 차 있으면 조용히 200. 400 을 주면 어떤 필드가 함정인지 알려주는 셈이다.
contact.tsx — 가짜 성공 제거
기존엔 setTimeout 1.2초 뒤 성공 화면만 띄우고 아무 데도 보내지 않았다. 화면은
"접수되었습니다"인데 영업이 받을 리드는 없었다. 이제 같은 함수로 보내고 서버가
리드를 확보했을 때만 성공을 띄운다. 실패 시 role="alert" 로 안내.
vercel.json — SPA 리라이트가 /api 를 삼키지 않도록 제외.
"/(.*)" 그대로 두면 /api/lead 요청이 index.html 로 갔다.
데모 요청 모달 카피
"이름과 이메일만 남겨주시면, 담당자가 일정을 잡아 연락드립니다"
→ "성함과 이메일만 남겨주시면, 사용해보실 수 있는 Demo를 보내드립니다!"
성공 화면도 같은 약속으로 맞췄다. 폼은 데모를 보낸다는데 성공 화면이 일정을
잡는다고 하면 방문자가 무엇을 기다려야 하는지 모른다. 라벨도 성함으로 통일.
⚠️ LEAD_WEBHOOK_URL 미설정 시 리드는 Vercel 로그에만 남는다. 로그는 최후의 그물이지
CRM 이 아니다.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
213 lines
8.0 KiB
TypeScript
213 lines
8.0 KiB
TypeScript
import { useState } from "react"
|
|
import { AnimatePresence, motion } from "motion/react"
|
|
import { Check, Loader2 } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input, Textarea } from "@/components/ui/input"
|
|
import { Section } from "@/components/ui/section"
|
|
import { SectionHeading } from "@/components/ui/section-heading"
|
|
import { Typography } from "@/components/ui/typography"
|
|
import { EASE_OUT_EXPO } from "@/lib/motion"
|
|
import { submitLead } from "@/lib/lead"
|
|
|
|
const EMPTY_FORM = {
|
|
companyName: '',
|
|
contactName: '',
|
|
email: '',
|
|
phone: '',
|
|
message: '',
|
|
}
|
|
|
|
/*
|
|
* 상담 신청 폼 — 고관여 경로. 저관여 리드 캡처는 데모 요청 모달이 맡는다.
|
|
*
|
|
* 예전에는 백엔드가 없어서 1.2초 뒤 성공 화면만 띄웠다. 화면은 "접수되었습니다"인데
|
|
* 영업이 받을 리드는 존재하지 않았고, 아무도 그 사실을 몰랐다. 지금은 데모 요청과
|
|
* 같은 서버리스 함수(api/lead.ts)로 보내고, 서버가 리드를 확보했을 때만 성공을 띄운다.
|
|
*/
|
|
export function Contact() {
|
|
const [formData, setFormData] = useState(EMPTY_FORM)
|
|
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!formData.companyName || !formData.contactName || !formData.email || !formData.phone) {
|
|
return
|
|
}
|
|
|
|
setStatus('submitting')
|
|
const result = await submitLead({
|
|
source: 'contact',
|
|
name: formData.contactName,
|
|
email: formData.email,
|
|
company: formData.companyName,
|
|
phone: formData.phone,
|
|
message: formData.message,
|
|
})
|
|
setStatus(result.ok ? 'success' : 'error')
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target
|
|
setFormData((prev) => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const submitting = status === 'submitting'
|
|
|
|
return (
|
|
<Section id="contact-section" bordered>
|
|
<SectionHeading
|
|
align="center"
|
|
eyebrow="Get in Touch"
|
|
title="도입 문의"
|
|
description="품목과 협력사 규모를 알려주시면, 예상 절감 구간과 도입 절차를 정리해 드립니다."
|
|
descriptionClassName="max-w-xl"
|
|
/>
|
|
|
|
<div className="max-w-2xl mx-auto">
|
|
<AnimatePresence mode="wait">
|
|
{status !== 'success' ? (
|
|
<motion.form
|
|
key="contact-form"
|
|
onSubmit={handleSubmit}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.5, ease: EASE_OUT_EXPO }}
|
|
className="space-y-9"
|
|
>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-9">
|
|
<FormField label="회사명" required>
|
|
<Input
|
|
type="text"
|
|
name="companyName"
|
|
required
|
|
placeholder="예: (주)한빛유통"
|
|
value={formData.companyName}
|
|
onChange={handleChange}
|
|
disabled={submitting}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="담당자 성함 / 직책" required>
|
|
<Input
|
|
type="text"
|
|
name="contactName"
|
|
required
|
|
placeholder="예: 홍길동 팀장"
|
|
value={formData.contactName}
|
|
onChange={handleChange}
|
|
disabled={submitting}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-9">
|
|
<FormField label="이메일 주소" required>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
required
|
|
placeholder="example@company.com"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
disabled={submitting}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="연락처" required>
|
|
<Input
|
|
type="tel"
|
|
name="phone"
|
|
required
|
|
placeholder="010-0000-0000"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
disabled={submitting}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<FormField label="상세 문의 및 요구사항">
|
|
<Textarea
|
|
name="message"
|
|
rows={4}
|
|
placeholder="협상 자동화를 검토 중인 품목이나 현재 겪는 어려움을 적어주세요."
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
disabled={submitting}
|
|
/>
|
|
</FormField>
|
|
|
|
{/* 대체 연락처(이메일 등)를 넣으려면 실제 영업 주소를 받아서 채워야 한다.
|
|
임의의 주소를 공개 랜딩에 박아둘 수는 없다. */}
|
|
{status === 'error' && (
|
|
<p role="alert" className="text-[13px] text-ink-soft leading-[1.6] break-keep">
|
|
지금은 접수가 어렵습니다. 잠시 후 다시 시도해 주세요.
|
|
</p>
|
|
)}
|
|
|
|
<Typography variant="caption" className="font-medium">
|
|
입력하신 정보는 문의 응답과 도입 검토 목적으로만 사용됩니다.
|
|
</Typography>
|
|
|
|
<div className="pt-2">
|
|
<Button type="submit" disabled={submitting} size="lg" className="w-full">
|
|
{submitting ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
<span>신청서 전송 중...</span>
|
|
</>
|
|
) : (
|
|
<span>상담 신청</span>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</motion.form>
|
|
) : (
|
|
<motion.div
|
|
key="success-message"
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, ease: EASE_OUT_EXPO }}
|
|
className="text-center py-20 px-6 border border-line-strong rounded-card text-ink break-keep"
|
|
>
|
|
<div className="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<Check className="w-6 h-6" strokeWidth={2.5} />
|
|
</div>
|
|
<h3 className="text-[24px] font-semibold tracking-[-0.02em] text-ink mb-3">도입 문의 신청이 접수되었습니다</h3>
|
|
<p className="text-ink-soft text-[15px] leading-[1.6] max-w-md mx-auto mb-8">
|
|
{formData.contactName} 님께 영업일 기준 하루 안에 연락드리겠습니다.
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
size="md"
|
|
onClick={() => {
|
|
setFormData(EMPTY_FORM)
|
|
setStatus('idle')
|
|
}}
|
|
>
|
|
새로 문의하기
|
|
</Button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
/* 라벨 옆 작은 아이콘은 정보를 더하지 않는다 — "회사명" 옆의 빌딩 아이콘이 알려주는 건
|
|
이미 글자가 말한 것뿐이고, 필드마다 반복되면 폼이 산만해진다. 글자만 남긴다. */
|
|
function FormField({ label, required = false, children }: { label: string; required?: boolean; children: React.ReactNode }) {
|
|
return (
|
|
<div className="space-y-2.5">
|
|
<label className="block text-[14px] font-medium text-ink">
|
|
{label}
|
|
{required && <span className="text-primary ml-1" aria-hidden>*</span>}
|
|
</label>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|