Add contact form backend and deployment guide

- Resend API 통합 (이메일 발송)
- ContactForm 클라이언트 컴포넌트 생성
- API Route (/api/contact) 구현
- 입력 검증 및 에러 처리
- 성공/실패 메시지 표시
- 환경변수 설정 (.env.local, .env.example)
- 배포 가이드 작성 (DEPLOYMENT.md)
  - Resend 설정 방법
  - Vercel 배포 가이드
  - 가비아 도메인 연결 방법
  - 트러블슈팅 가이드

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/api/contact/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { name, phone, email, service, message } = body;
+
+    // 입력 검증
+    if (!name || !email || !message) {
+      return NextResponse.json(
+        { error: '필수 항목을 모두 입력해주세요.' },
+        { status: 400 }
+      );
+    }
+
+    // 이메일 발송
+    const data = await resend.emails.send({
+      from: 'contact@jaengseung-made.com', // Resend에서 인증된 도메인
+      to: ['bgg8988@gmail.com'], // 받는 이메일
+      subject: `[쟁승메이드] 새로운 문의: ${service || '문의'}`,
+      html: `
+        <h2>새로운 프로젝트 문의가 도착했습니다</h2>
+        <hr />
+        <p><strong>이름:</strong> ${name}</p>
+        <p><strong>연락처:</strong> ${phone || '미입력'}</p>
+        <p><strong>이메일:</strong> ${email}</p>
+        <p><strong>서비스:</strong> ${service || '미선택'}</p>
+        <hr />
+        <h3>문의 내용:</h3>
+        <p style="white-space: pre-wrap;">${message}</p>
+        <hr />
+        <p style="color: #666; font-size: 12px;">
+          이 메일은 jaengseung-made.com의 문의 폼에서 발송되었습니다.
+        </p>
+      `,
+    });
+
+    return NextResponse.json(
+      { success: true, message: '문의가 성공적으로 전송되었습니다!' },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('Email send error:', error);
+    return NextResponse.json(
+      { error: '메일 전송에 실패했습니다. 다시 시도해주세요.' },
+      { status: 500 }
+    );
+  }
+}

app/components/ContactForm.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function ContactForm() {
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    email: '',
+    service: 'RPA 자동화',
+    message: '',
+  });
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+    setErrorMessage('');
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || '문의 전송에 실패했습니다.');
+      }
+
+      setStatus('success');
+      // 폼 초기화
+      setFormData({
+        name: '',
+        phone: '',
+        email: '',
+        service: 'RPA 자동화',
+        message: '',
+      });
+
+      // 3초 후 성공 메시지 숨기기
+      setTimeout(() => setStatus('idle'), 5000);
+    } catch (error) {
+      setStatus('error');
+      setErrorMessage(error instanceof Error ? error.message : '문의 전송에 실패했습니다.');
+    }
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="grid md:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              이름 <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+              placeholder="홍길동"
+              disabled={status === 'loading'}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">연락처</label>
+            <input
+              type="tel"
+              name="phone"
+              value={formData.phone}
+              onChange={handleChange}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+              placeholder="010-0000-0000"
+              disabled={status === 'loading'}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-semibold text-gray-700 mb-2">
+            이메일 <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            required
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            placeholder="example@email.com"
+            disabled={status === 'loading'}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-semibold text-gray-700 mb-2">서비스 선택</label>
+          <select
+            name="service"
+            value={formData.service}
+            onChange={handleChange}
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            disabled={status === 'loading'}
+          >
+            <option>RPA 자동화</option>
+            <option>웹 개발</option>
+            <option>앱 개발</option>
+            <option>맞춤형 솔루션</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-semibold text-gray-700 mb-2">
+            프로젝트 설명 <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            name="message"
+            value={formData.message}
+            onChange={handleChange}
+            required
+            rows={6}
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"
+            placeholder="프로젝트에 대해 자세히 설명해주세요. 목적, 예상 기간, 예산 등을 포함하면 더 정확한 상담이 가능합니다."
+            disabled={status === 'loading'}
+          ></textarea>
+        </div>
+
+        {status === 'success' && (
+          <div className="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
+            ✅ 문의가 성공적으로 전송되었습니다! 24시간 이내 답변드리겠습니다.
+          </div>
+        )}
+
+        {status === 'error' && (
+          <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
+            ❌ {errorMessage}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={status === 'loading'}
+          className="w-full bg-blue-700 text-white py-4 rounded-lg text-lg font-bold hover:bg-blue-800 transition shadow-lg disabled:bg-gray-400 disabled:cursor-not-allowed"
+        >
+          {status === 'loading' ? '전송 중...' : '무료 상담 신청하기'}
+        </button>
+      </form>
+
+      <div className="mt-8 pt-8 border-t border-gray-200">
+        <div className="text-center text-gray-600">
+          <p className="mb-4">또는 아래 연락처로 직접 문의주세요</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="mailto:bgg8988@gmail.com"
+              className="flex items-center justify-center text-blue-700 hover:text-blue-800"
+            >
+              <span className="mr-2">📧</span> bgg8988@gmail.com
+            </a>
+            <a
+              href="tel:010-3907-1392"
+              className="flex items-center justify-center text-blue-700 hover:text-blue-800"
+            >
+              <span className="mr-2">📱</span> 010-3907-1392
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,3 +1,5 @@
+import ContactForm from './components/ContactForm';
+
 export default function Home() {
   return (
     <div className="min-h-screen">
@@ -331,77 +333,7 @@ export default function Home() {
             <p className="text-xl text-gray-600">무엇이든 편하게 상담해주세요. 24시간 이내 답변드립니다.</p>
           </div>
 
-          <div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
-            <form className="space-y-6">
-              <div className="grid md:grid-cols-2 gap-6">
-                <div>
-                  <label className="block text-sm font-semibold text-gray-700 mb-2">이름</label>
-                  <input
-                    type="text"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-                    placeholder="홍길동"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-semibold text-gray-700 mb-2">연락처</label>
-                  <input
-                    type="tel"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-                    placeholder="010-0000-0000"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-2">이메일</label>
-                <input
-                  type="email"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-                  placeholder="example@email.com"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-2">서비스 선택</label>
-                <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
-                  <option>RPA 자동화</option>
-                  <option>웹 개발</option>
-                  <option>앱 개발</option>
-                  <option>맞춤형 솔루션</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold text-gray-700 mb-2">프로젝트 설명</label>
-                <textarea
-                  rows={6}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"
-                  placeholder="프로젝트에 대해 자세히 설명해주세요. 목적, 예상 기간, 예산 등을 포함하면 더 정확한 상담이 가능합니다."
-                ></textarea>
-              </div>
-
-              <button
-                type="submit"
-                className="w-full bg-blue-700 text-white py-4 rounded-lg text-lg font-bold hover:bg-blue-800 transition shadow-lg"
-              >
-                무료 상담 신청하기
-              </button>
-            </form>
-
-            <div className="mt-8 pt-8 border-t border-gray-200">
-              <div className="text-center text-gray-600">
-                <p className="mb-4">또는 아래 연락처로 직접 문의주세요</p>
-                <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                  <a href="mailto:bgg8988@gmail.com" className="flex items-center justify-center text-blue-700 hover:text-blue-800">
-                    <span className="mr-2">📧</span> bgg8988@gmail.com
-                  </a>
-                  <a href="tel:010-3907-1392" className="flex items-center justify-center text-blue-700 hover:text-blue-800">
-                    <span className="mr-2">📱</span> 010-3907-1392
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
+          <ContactForm />
         </div>
       </section>