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>
   );
 }

app/components/ContactModal.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface ContactModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  service: string;
+  checklist: string[];
+  accentColor?: string; // tailwind class e.g. 'text-amber-400'
+  accentBg?: string;    // e.g. 'bg-amber-400'
+  headerFrom?: string;  // hex e.g. '#1a0a00'
+  headerTo?: string;    // hex e.g. '#3d1a00'
+}
+
+export default function ContactModal({
+  isOpen,
+  onClose,
+  service,
+  checklist,
+  accentColor = 'text-[#5ba4ff]',
+  accentBg = 'bg-[#1a56db]',
+  headerFrom = '#04102b',
+  headerTo = '#0a2060',
+}: ContactModalProps) {
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    email: '',
+    service,
+    message: '',
+  });
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [visible, setVisible] = useState(false);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+
+  /* sync service prop into form */
+  useEffect(() => {
+    setFormData((prev) => ({ ...prev, service }));
+  }, [service]);
+
+  /* animation: open/close */
+  useEffect(() => {
+    if (isOpen) {
+      setVisible(true);
+      setTimeout(() => firstInputRef.current?.focus(), 100);
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [isOpen]);
+
+  /* close on Escape */
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  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');
+    } catch (error) {
+      setStatus('error');
+      setErrorMessage(error instanceof Error ? error.message : '문의 전송에 실패했습니다.');
+    }
+  };
+
+  if (!isOpen && !visible) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ${
+        isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      }`}
+      style={{ background: 'rgba(4, 16, 43, 0.85)', backdropFilter: 'blur(8px)' }}
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onTransitionEnd={() => { if (!isOpen) setVisible(false); }}
+    >
+      <div
+        className={`relative w-full max-w-3xl bg-white rounded-2xl shadow-2xl shadow-[#04102b]/50 overflow-hidden transition-all duration-300 ${
+          isOpen ? 'scale-100 translate-y-0 opacity-100' : 'scale-95 translate-y-4 opacity-0'
+        }`}
+        style={{ maxHeight: '92vh', overflowY: 'auto' }}
+      >
+        {/* ─── Header ─── */}
+        <div
+          className="relative px-6 py-5 flex items-center justify-between"
+          style={{ background: `linear-gradient(135deg, ${headerFrom}, ${headerTo})` }}
+        >
+          <div className="absolute inset-0 opacity-[0.05]"
+            style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
+          <div className="relative">
+            <p className={`text-xs font-bold uppercase tracking-widest mb-0.5 ${accentColor}`}>CONTACT</p>
+            <h2 className="text-white font-extrabold text-lg leading-tight">{service}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="relative w-9 h-9 rounded-xl bg-white/10 hover:bg-white/20 border border-white/15 flex items-center justify-center text-white/70 hover:text-white transition-all"
+            aria-label="닫기"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* ─── Body ─── */}
+        {status === 'success' ? (
+          /* Success State */
+          <div className="flex flex-col items-center justify-center py-16 px-8 text-center">
+            <div className="w-16 h-16 rounded-full bg-emerald-100 border-2 border-emerald-300 flex items-center justify-center mb-5">
+              <svg className="w-8 h-8 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h3 className="text-[#04102b] text-xl font-extrabold mb-2">문의가 접수되었습니다</h3>
+            <p className="text-slate-500 text-sm mb-1">24시간 이내로 답변 드리겠습니다.</p>
+            <p className="text-slate-400 text-xs mb-6">bgg8988@gmail.com / 010-3907-1392</p>
+            <button
+              onClick={() => { setStatus('idle'); onClose(); setFormData({ name: '', phone: '', email: '', service, message: '' }); }}
+              className="bg-[#04102b] hover:bg-[#0a1f5c] text-white px-8 py-2.5 rounded-xl text-sm font-bold transition"
+            >
+              닫기
+            </button>
+          </div>
+        ) : (
+          <div className="grid md:grid-cols-5">
+            {/* Left: Checklist */}
+            <div className="md:col-span-2 bg-[#f0f5ff] border-r border-[#dbe8ff] p-6">
+              <h3 className="text-[#04102b] font-bold text-sm mb-4">신청 전 확인사항</h3>
+              <ul className="space-y-3 mb-6">
+                {checklist.map((item, i) => (
+                  <li key={i} className="flex items-start gap-2.5">
+                    <div className="w-5 h-5 rounded-full bg-white border-2 border-[#dbe8ff] flex items-center justify-center flex-shrink-0 mt-0.5">
+                      <div className="w-2 h-2 rounded-full bg-[#1a56db]" />
+                    </div>
+                    <span className="text-slate-600 text-xs leading-relaxed">{item}</span>
+                  </li>
+                ))}
+              </ul>
+
+              {/* quick contact */}
+              <div className="bg-white rounded-xl border border-[#dbe8ff] p-4">
+                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">직접 연락</div>
+                <a href="mailto:bgg8988@gmail.com" className="flex items-center gap-2 text-xs text-slate-600 hover:text-[#1a56db] transition mb-2">
+                  <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                  bgg8988@gmail.com
+                </a>
+                <a href="tel:010-3907-1392" className="flex items-center gap-2 text-xs text-slate-600 hover:text-[#1a56db] transition">
+                  <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                  </svg>
+                  010-3907-1392
+                </a>
+              </div>
+
+              <div className="mt-4 text-center">
+                <div className="inline-flex items-center gap-1.5 bg-white border border-[#dbe8ff] text-[#1a56db] text-xs font-bold px-3 py-1.5 rounded-full">
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+                  24h 이내 답변 보장
+                </div>
+              </div>
+            </div>
+
+            {/* Right: Form */}
+            <div className="md:col-span-3 p-6">
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="grid sm:grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs font-bold text-slate-600 mb-1.5">
+                      이름 <span className="text-red-400">*</span>
+                    </label>
+                    <input
+                      ref={firstInputRef}
+                      type="text"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleChange}
+                      required
+                      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 transition"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-bold text-slate-600 mb-1.5">연락처</label>
+                    <input
+                      type="tel"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleChange}
+                      disabled={status === 'loading'}
+                      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 transition"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-600 mb-1.5">
+                    이메일 <span className="text-red-400">*</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 transition"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold 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 transition"
+                  >
+                    <option>{service}</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>기타 문의</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-600 mb-1.5">
+                    문의 내용 <span className="text-red-400">*</span>
+                  </label>
+                  <textarea
+                    name="message"
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
+                    rows={4}
+                    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 resize-none bg-white disabled:bg-slate-50 transition"
+                  />
+                </div>
+
+                {status === 'error' && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 text-xs px-4 py-3 rounded-xl">
+                    {errorMessage}
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={status === 'loading'}
+                  className="w-full bg-[#1a56db] hover:bg-[#1e4fc2] disabled:opacity-50 disabled:cursor-not-allowed text-white py-3 rounded-xl text-sm font-extrabold transition shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2"
+                >
+                  {status === 'loading' ? (
+                    <>
+                      <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                      </svg>
+                      전송 중...
+                    </>
+                  ) : '문의 보내기 →'}
+                </button>
+
+                <p className="text-center text-slate-400 text-xs">
+                  문의 후 24시간 이내 답변 · 무료 상담 가능
+                </p>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/components/DashboardShell.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import Sidebar from './Sidebar';
+
+export default function DashboardShell({ children }: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="dashboard-layout">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col overflow-hidden min-w-0">
+        {/* Mobile top bar */}
+        <header className="lg:hidden flex items-center justify-between px-4 py-3 bg-[#04102b] border-b border-[#1a3a7a]/50 flex-shrink-0">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition"
+            aria-label="메뉴 열기"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <div className="flex items-center gap-2">
+            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs">
+              쟁
+            </div>
+            <span className="text-white font-bold text-base">쟁승메이드</span>
+          </div>
+          <div className="w-9" />
+        </header>
+
+        {/* Main scrollable content */}
+        <main className="main-content">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

app/components/Sidebar.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navItems = [
+  {
+    href: '/',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    ),
+    label: '홈',
+    desc: '대시보드 홈',
+  },
+  {
+    href: '/services/lotto',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+      </svg>
+    ),
+    label: '로또 번호 추천',
+    desc: '빅데이터 분석',
+    badge: 'HOT',
+  },
+  {
+    href: '/services/stock',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+      </svg>
+    ),
+    label: '주식 자동 매매',
+    desc: '텔레그램 연동',
+    badge: 'NEW',
+  },
+  {
+    href: '/services/prompt',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+      </svg>
+    ),
+    label: '프롬프트 엔지니어링',
+    desc: 'AI 최적화',
+  },
+  {
+    href: '/services/automation',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    label: '업무 자동화',
+    desc: 'RPA 개발',
+  },
+  {
+    href: '/freelance',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    ),
+    label: '외주 개발',
+    desc: '맞춤형 솔루션',
+  },
+];
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/60 z-20 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed top-0 left-0 h-full w-64 z-30 flex flex-col
+          bg-[#04102b] border-r border-[#1a3a7a]/50
+          transition-transform duration-300 ease-in-out
+          lg:translate-x-0 lg:static lg:flex
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+        `}
+      >
+        {/* Logo */}
+        <div className="p-5 border-b border-[#1a3a7a]/50 flex-shrink-0">
+          <Link href="/" onClick={onClose} className="flex items-center gap-3 group">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-base shadow-lg shadow-blue-500/25 flex-shrink-0">
+              쟁
+            </div>
+            <div>
+              <div className="text-white font-bold text-base leading-tight">쟁승메이드</div>
+              <div className="text-blue-400 text-xs font-medium">Premium Dev Services</div>
+            </div>
+          </Link>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
+          <div className="px-3 pt-2 pb-1">
+            <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider">메뉴</span>
+          </div>
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onClose}
+                className={`
+                  flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 group relative
+                  ${isActive
+                    ? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow-lg shadow-blue-600/20'
+                    : 'text-slate-400 hover:bg-[#0a1f5c] hover:text-slate-100'
+                  }
+                `}
+              >
+                <span className={`flex-shrink-0 ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
+                  {item.icon}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className={`text-sm font-semibold truncate ${isActive ? 'text-white' : ''}`}>
+                    {item.label}
+                  </div>
+                  <div className={`text-xs truncate ${isActive ? 'text-blue-200' : 'text-slate-600 group-hover:text-slate-500'}`}>
+                    {item.desc}
+                  </div>
+                </div>
+                {item.badge && (
+                  <span className={`
+                    text-xs font-bold px-1.5 py-0.5 rounded-md flex-shrink-0
+                    ${item.badge === 'HOT' ? 'bg-red-500/20 text-red-400' : 'bg-emerald-500/20 text-emerald-400'}
+                  `}>
+                    {item.badge}
+                  </span>
+                )}
+                {isActive && (
+                  <div className="absolute right-2 w-1 h-5 bg-white/40 rounded-full" />
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Bottom: Developer profile */}
+        <div className="p-4 border-t border-[#1a3a7a]/50 flex-shrink-0">
+          <div className="flex items-center gap-3 px-1">
+            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-white text-sm font-bold flex-shrink-0 shadow">
+              쟁
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-white text-sm font-semibold">쟁토리</div>
+              <div className="text-slate-500 text-xs">시니어 백엔드 개발자</div>
+            </div>
+            <div className="w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0" title="온라인" />
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}