Redesign full site: dashboard layout, service pages, modal contact, CookieRun font

- 전체 디자인 시스템 개편: 딥 네이비 (#04102b) + 로열 블루 (#1a56db) 팔레트
- 홈 대시보드: 가운데 정렬, 서비스별 고유 카드 디자인 (로또/주식/프롬프트/자동화)
- 서비스 페이지 4종: 각 서비스 테마 색상 + 장식 요소 + 가운데 정렬 레이아웃
- 외주 개발 페이지: 라이브 카운터 (진행중/상담중/납품완료), 수직 타임라인
- ContactModal 컴포넌트: 서비스별 모달 문의폼 + 체크리스트 (페이지 이동 없이 문의)
- CookieRun 폰트 적용 (Regular/Bold/Black, 상업적 이용 가능 라이선스)
- 실명 '박재오' → '쟁토리' 전체 변경, 7년차 강조 홈 페이지에만 표시

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

app/components/ContactForm.tsx

@@ -1,18 +1,27 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 
-export default function ContactForm() {
+function ContactFormInner() {
+  const searchParams = useSearchParams();
   const [formData, setFormData] = useState({
     name: '',
     phone: '',
     email: '',
-    service: 'RPA 자동화',
+    service: '외주 개발 문의',
     message: '',
   });
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
   const [errorMessage, setErrorMessage] = useState('');
 
+  useEffect(() => {
+    const serviceParam = searchParams.get('service');
+    if (serviceParam) {
+      setFormData((prev) => ({ ...prev, service: serviceParam }));
+    }
+  }, [searchParams]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setStatus('loading');
@@ -21,29 +30,13 @@ export default function ContactForm() {
     try {
       const response = await fetch('/api/contact', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(formData),
       });
-
       const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || '문의 전송에 실패했습니다.');
-      }
-
+      if (!response.ok) throw new Error(data.error || '문의 전송에 실패했습니다.');
       setStatus('success');
-      // 폼 초기화
-      setFormData({
-        name: '',
-        phone: '',
-        email: '',
-        service: 'RPA 자동화',
-        message: '',
-      });
-
-      // 3초 후 성공 메시지 숨기기
+      setFormData({ name: '', phone: '', email: '', service: '외주 개발 문의', message: '' });
       setTimeout(() => setStatus('idle'), 5000);
     } catch (error) {
       setStatus('error');
@@ -54,133 +47,129 @@ export default function ContactForm() {
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
   ) => {
-    setFormData((prev) => ({
-      ...prev,
-      [e.target.name]: e.target.value,
-    }));
+    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>
-
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
-            이메일 <span className="text-red-500">*</span>
+          <label className="block text-xs font-semibold text-slate-600 mb-1.5">
+            이름 <span className="text-red-500">*</span>
           </label>
           <input
-            type="email"
-            name="email"
-            value={formData.email}
+            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="example@email.com"
             disabled={status === 'loading'}
+            placeholder="홍길동"
+            className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
           />
         </div>
-
         <div>
-          <label className="block text-sm font-semibold text-gray-700 mb-2">서비스 선택</label>
-          <select
-            name="service"
-            value={formData.service}
+          <label className="block text-xs font-semibold text-slate-600 mb-1.5">연락처</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"
             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>
+            placeholder="010-0000-0000"
+            className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
+          />
         </div>
       </div>
-    </div>
+
+      <div>
+        <label className="block text-xs font-semibold text-slate-600 mb-1.5">
+          이메일 <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          disabled={status === 'loading'}
+          placeholder="example@email.com"
+          className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-semibold text-slate-600 mb-1.5">문의 서비스</label>
+        <select
+          name="service"
+          value={formData.service}
+          onChange={handleChange}
+          disabled={status === 'loading'}
+          className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
+        >
+          <option>외주 개발 문의</option>
+          <option>로또 번호 추천 - 기본 플랜</option>
+          <option>로또 번호 추천 - 프리미엄 플랜</option>
+          <option>로또 번호 추천 - 연간 플랜</option>
+          <option>주식 자동 매매 - 스타터</option>
+          <option>주식 자동 매매 - 프로</option>
+          <option>주식 자동 매매 - 엔터프라이즈</option>
+          <option>프롬프트 엔지니어링 - 단건 설계</option>
+          <option>프롬프트 엔지니어링 - 비즈니스 패키지</option>
+          <option>프롬프트 엔지니어링 - 팀/기업 패키지</option>
+          <option>업무 자동화 - 단순 자동화</option>
+          <option>업무 자동화 - 중간 자동화</option>
+          <option>업무 자동화 - 대형 자동화</option>
+          <option>기타 문의</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-xs font-semibold text-slate-600 mb-1.5">
+          문의 내용 <span className="text-red-500">*</span>
+        </label>
+        <textarea
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          required
+          rows={5}
+          disabled={status === 'loading'}
+          placeholder="문의하실 내용을 자유롭게 작성해주세요. 프로젝트 목적, 원하시는 기능, 예산 등을 적어주시면 더 정확한 답변이 가능합니다."
+          className="w-full px-3.5 py-2.5 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none bg-white disabled:bg-slate-50"
+        />
+      </div>
+
+      {status === 'success' && (
+        <div className="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm px-4 py-3 rounded-xl">
+          ✅ 문의가 전송되었습니다! 24시간 이내 답변드리겠습니다.
+        </div>
+      )}
+      {status === 'error' && (
+        <div className="bg-red-50 border border-red-200 text-red-800 text-sm px-4 py-3 rounded-xl">
+          ❌ {errorMessage}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={status === 'loading'}
+        className="w-full bg-[#1a56db] hover:bg-[#1e4fc2] text-white py-3 rounded-xl text-sm font-bold transition shadow-lg shadow-blue-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {status === 'loading' ? '전송 중...' : '문의 보내기'}
+      </button>
+
+      <p className="text-slate-400 text-xs text-center">
+        문의 후 24시간 이내 답변 보장 · 무료 상담 가능
+      </p>
+    </form>
+  );
+}
+
+export default function ContactForm() {
+  return (
+    <Suspense fallback={<div className="text-slate-400 text-sm">로딩 중...</div>}>
+      <ContactFormInner />
+    </Suspense>
   );
 }