feat: 로또 추천 API, 텔레그램 봇 연동, 관리자 페이지 추가

- 로또 번호 추천 구독자 전용 페이지 (/services/lotto/recommend)
- NAS 몬테카를로 API 연동 + 클라이언트 사이드 폴백
- 무료 미리보기 1개 + 구독자용 프리미엄 번호 추천
- 구독 플랜 변경: 골드(900원)/플래티넘(2,900원)/다이아(9,900원)
- 텔레그램 봇 연동: 연결/해제, 웹훅, /start 명령 처리
- 마이페이지 텔레그램 연결 UI + 가이드 모달
- 관리자 페이지 (/admin): 대시보드, 회원, 서비스, 문의 관리
- Supabase 마이그레이션: profiles 텔레그램 컬럼, 신규 상품

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

app/admin/components/AdminSidebar.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+const NAV_ITEMS = [
+  {
+    href: '/admin/dashboard',
+    label: '대시보드',
+    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>
+    ),
+  },
+  {
+    href: '/admin/members',
+    label: '회원 관리',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/services',
+    label: '서비스 설정',
+    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>
+    ),
+  },
+  {
+    href: '/admin/contacts',
+    label: '문의 내역',
+    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 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>
+    ),
+  },
+];
+
+export default function AdminSidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  async function handleLogout() {
+    setLoggingOut(true);
+    await fetch('/api/admin/logout', { method: 'POST' });
+    router.push('/admin/login');
+  }
+
+  return (
+    <aside className="w-60 flex-shrink-0 bg-slate-900 flex flex-col h-screen sticky top-0">
+      {/* 로고 */}
+      <div className="px-5 py-5 border-b border-slate-700/60">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white font-bold text-sm">
+            관
+          </div>
+          <div>
+            <p className="text-white font-bold text-sm leading-tight">관리자 패널</p>
+            <p className="text-slate-400 text-xs">쟁승메이드</p>
+          </div>
+        </div>
+      </div>
+
+      {/* 네비게이션 */}
+      <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
+        {NAV_ITEMS.map((item) => {
+          const active = pathname.startsWith(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
+                active
+                  ? 'bg-gradient-to-r from-red-600/30 to-orange-500/20 text-white border border-red-500/30'
+                  : 'text-slate-400 hover:text-white hover:bg-slate-800'
+              }`}
+            >
+              <span className={active ? 'text-red-400' : ''}>{item.icon}</span>
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* 사이트로 돌아가기 + 로그아웃 */}
+      <div className="px-3 py-4 border-t border-slate-700/60 space-y-2">
+        <Link
+          href="/"
+          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+          </svg>
+          사이트로 돌아가기
+        </Link>
+        <button
+          onClick={handleLogout}
+          disabled={loggingOut}
+          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-red-400 hover:text-red-300 hover:bg-red-900/20 transition-all"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+          {loggingOut ? '로그아웃 중...' : '로그아웃'}
+        </button>
+      </div>
+    </aside>
+  );
+}

app/admin/contacts/page.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Contact {
+  id: string;
+  email: string;
+  name: string | null;
+  service: string;
+  message: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  created_at: string;
+}
+
+const STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  pending: { label: '미처리', color: 'bg-yellow-900/40 text-yellow-400' },
+  in_progress: { label: '처리중', color: 'bg-blue-900/40 text-blue-400' },
+  completed: { label: '완료', color: 'bg-green-900/40 text-green-400' },
+};
+
+const SERVICE_LABELS: Record<string, string> = {
+  lotto: '로또 추천',
+  stock: '주식 자동매매',
+  automation: '업무 자동화',
+  prompt: '프롬프트 엔지니어링',
+  freelance: '외주 개발',
+  saju: 'AI 사주',
+  general: '일반 문의',
+};
+
+export default function AdminContactsPage() {
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<Contact | null>(null);
+  const [updating, setUpdating] = useState<string | null>(null);
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+
+  useEffect(() => {
+    fetch('/api/admin/contacts')
+      .then((r) => r.json())
+      .then((d) => setContacts(d.contacts ?? []))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function updateStatus(id: string, status: string) {
+    setUpdating(id);
+    try {
+      const res = await fetch('/api/admin/contacts', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, status }),
+      });
+      if (res.ok) {
+        setContacts((prev) =>
+          prev.map((c) => (c.id === id ? { ...c, status: status as Contact['status'] } : c))
+        );
+        if (selected?.id === id) {
+          setSelected((prev) => prev ? { ...prev, status: status as Contact['status'] } : null);
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setUpdating(null);
+    }
+  }
+
+  const filtered = contacts.filter((c) => filterStatus === 'all' || c.status === filterStatus);
+  const pendingCount = contacts.filter((c) => c.status === 'pending').length;
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-white text-2xl font-bold">문의 내역</h1>
+          <p className="text-slate-400 text-sm mt-0.5">고객 문의 및 외주 의뢰 관리</p>
+        </div>
+        {pendingCount > 0 && (
+          <span className="bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 px-3 py-1 rounded-full text-sm font-medium">
+            미처리 {pendingCount}건
+          </span>
+        )}
+      </div>
+
+      {/* 필터 탭 */}
+      <div className="flex gap-2 mb-4">
+        {[['all', '전체'], ['pending', '미처리'], ['in_progress', '처리중'], ['completed', '완료']].map(([val, label]) => (
+          <button
+            key={val}
+            onClick={() => setFilterStatus(val)}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
+              filterStatus === val
+                ? 'bg-red-600/30 text-red-300 border border-red-500/30'
+                : 'bg-slate-800 text-slate-400 hover:text-white'
+            }`}
+          >
+            {label}
+            {val !== 'all' && (
+              <span className="ml-1.5 text-xs opacity-70">
+                {contacts.filter((c) => c.status === val).length}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-48">
+          <div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" />
+        </div>
+      ) : (
+        <div className="flex gap-4">
+          {/* 목록 */}
+          <div className="flex-1 space-y-2">
+            {filtered.length === 0 ? (
+              <div className="bg-slate-900 rounded-2xl p-10 text-center text-slate-500 border border-slate-700/50">
+                문의 내역이 없습니다
+              </div>
+            ) : (
+              filtered.map((contact) => (
+                <button
+                  key={contact.id}
+                  onClick={() => setSelected(contact)}
+                  className={`w-full text-left bg-slate-900 rounded-xl p-4 border transition-all hover:border-slate-600 ${
+                    selected?.id === contact.id ? 'border-red-500/50' : 'border-slate-700/50'
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-white font-medium text-sm truncate">
+                          {contact.name ?? contact.email}
+                        </span>
+                        <span className="text-xs bg-slate-700 text-slate-300 px-2 py-0.5 rounded-full flex-shrink-0">
+                          {SERVICE_LABELS[contact.service] ?? contact.service}
+                        </span>
+                      </div>
+                      <p className="text-slate-400 text-xs truncate">{contact.message}</p>
+                    </div>
+                    <div className="flex flex-col items-end gap-1 flex-shrink-0">
+                      <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_LABELS[contact.status]?.color}`}>
+                        {STATUS_LABELS[contact.status]?.label}
+                      </span>
+                      <span className="text-slate-600 text-xs">
+                        {new Date(contact.created_at).toLocaleDateString('ko-KR')}
+                      </span>
+                    </div>
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+
+          {/* 상세 패널 */}
+          {selected && (
+            <div className="w-80 flex-shrink-0 bg-slate-900 rounded-2xl border border-slate-700/50 p-5 h-fit sticky top-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-white font-semibold">문의 상세</h3>
+                <button onClick={() => setSelected(null)} className="text-slate-500 hover:text-white">
+                  <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>
+
+              <dl className="space-y-3 text-sm mb-4">
+                <div>
+                  <dt className="text-slate-500 mb-0.5">이름</dt>
+                  <dd className="text-white">{selected.name ?? '-'}</dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500 mb-0.5">이메일</dt>
+                  <dd className="text-blue-400">{selected.email}</dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500 mb-0.5">서비스</dt>
+                  <dd className="text-white">{SERVICE_LABELS[selected.service] ?? selected.service}</dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500 mb-0.5">접수일</dt>
+                  <dd className="text-slate-300">{new Date(selected.created_at).toLocaleString('ko-KR')}</dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500 mb-1">내용</dt>
+                  <dd className="text-slate-200 bg-slate-800 rounded-lg p-3 leading-relaxed whitespace-pre-wrap">
+                    {selected.message}
+                  </dd>
+                </div>
+              </dl>
+
+              {/* 상태 변경 */}
+              <div>
+                <p className="text-slate-500 text-xs mb-2">상태 변경</p>
+                <div className="flex gap-2">
+                  {(['pending', 'in_progress', 'completed'] as const).map((s) => (
+                    <button
+                      key={s}
+                      onClick={() => updateStatus(selected.id, s)}
+                      disabled={selected.status === s || updating === selected.id}
+                      className={`flex-1 py-1.5 rounded-lg text-xs font-medium transition ${
+                        selected.status === s
+                          ? STATUS_LABELS[s].color + ' opacity-100'
+                          : 'bg-slate-700 text-slate-400 hover:bg-slate-600'
+                      } disabled:opacity-50`}
+                    >
+                      {STATUS_LABELS[s].label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* 이메일 바로 보내기 링크 */}
+              <a
+                href={`mailto:${selected.email}?subject=[쟁승메이드] 문의 답변&body=안녕하세요, 쟁승메이드입니다.%0A%0A`}
+                className="mt-3 w-full flex items-center justify-center gap-2 py-2 bg-blue-600/20 text-blue-400 rounded-lg text-xs hover:bg-blue-600/30 transition"
+              >
+                <svg className="w-4 h-4" 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>
+                이메일 답장하기
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/dashboard/page.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Stats {
+  totalMembers: number;
+  totalOrders: number;
+  totalRevenue: number;
+  pendingContacts: number;
+  monthlyChart: Array<{ month: string; revenue: number }>;
+}
+
+function StatCard({ label, value, icon, color }: { label: string; value: string; icon: React.ReactNode; color: string }) {
+  return (
+    <div className="bg-slate-900 rounded-2xl p-5 border border-slate-700/50">
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-slate-400 text-sm">{label}</span>
+        <div className={`w-9 h-9 rounded-xl flex items-center justify-center ${color}`}>
+          {icon}
+        </div>
+      </div>
+      <p className="text-white text-2xl font-bold">{value}</p>
+    </div>
+  );
+}
+
+export default function AdminDashboard() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/admin/stats')
+      .then((r) => r.json())
+      .then((d) => setStats(d))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const maxRevenue = stats ? Math.max(...stats.monthlyChart.map((m) => m.revenue), 1) : 1;
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      {/* 헤더 */}
+      <div className="mb-6">
+        <h1 className="text-white text-2xl font-bold">대시보드</h1>
+        <p className="text-slate-400 text-sm mt-0.5">쟁승메이드 운영 현황</p>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-64">
+          <div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" />
+        </div>
+      ) : (
+        <>
+          {/* 통계 카드 */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            <StatCard
+              label="총 회원 수"
+              value={`${stats?.totalMembers ?? 0}명`}
+              color="bg-blue-500/20 text-blue-400"
+              icon={
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              }
+            />
+            <StatCard
+              label="총 결제 건수"
+              value={`${stats?.totalOrders ?? 0}건`}
+              color="bg-green-500/20 text-green-400"
+              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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              }
+            />
+            <StatCard
+              label="총 수익"
+              value={`₩${(stats?.totalRevenue ?? 0).toLocaleString()}`}
+              color="bg-yellow-500/20 text-yellow-400"
+              icon={
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              }
+            />
+            <StatCard
+              label="미처리 문의"
+              value={`${stats?.pendingContacts ?? 0}건`}
+              color="bg-red-500/20 text-red-400"
+              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 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>
+              }
+            />
+          </div>
+
+          {/* 월별 수익 차트 */}
+          <div className="bg-slate-900 rounded-2xl p-5 border border-slate-700/50">
+            <h2 className="text-white font-semibold mb-5">월별 수익 현황 (최근 6개월)</h2>
+            <div className="flex items-end gap-3 h-48">
+              {stats?.monthlyChart.map((item) => {
+                const height = maxRevenue > 0 ? Math.max((item.revenue / maxRevenue) * 100, item.revenue > 0 ? 4 : 0) : 0;
+                const monthLabel = item.month.slice(5); // MM
+                return (
+                  <div key={item.month} className="flex-1 flex flex-col items-center gap-2">
+                    <span className="text-slate-400 text-xs">
+                      {item.revenue > 0 ? `₩${(item.revenue / 1000).toFixed(0)}K` : ''}
+                    </span>
+                    <div className="w-full flex items-end justify-center h-32">
+                      <div
+                        className="w-full rounded-t-lg bg-gradient-to-t from-red-600 to-orange-400 transition-all duration-500"
+                        style={{ height: `${height}%`, minHeight: item.revenue > 0 ? '4px' : '0' }}
+                      />
+                    </div>
+                    <span className="text-slate-400 text-xs">{monthLabel}월</span>
+                  </div>
+                );
+              })}
+            </div>
+            {(stats?.totalRevenue ?? 0) === 0 && (
+              <p className="text-center text-slate-600 text-sm mt-2">결제 데이터가 없습니다</p>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

app/admin/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+import AdminSidebar from './components/AdminSidebar';
+
+export const metadata: Metadata = {
+  title: '관리자 패널 — 쟁승메이드',
+  robots: { index: false, follow: false },
+};
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen bg-slate-950 overflow-hidden">
+      <AdminSidebar />
+      <main className="flex-1 overflow-y-auto">
+        {children}
+      </main>
+    </div>
+  );
+}

app/admin/login/page.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function AdminLoginPage() {
+  const router = useRouter();
+  const [id, setId] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('/api/admin/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, password }),
+      });
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || '로그인에 실패했습니다.');
+      } else {
+        router.push('/admin/dashboard');
+      }
+    } catch {
+      setError('서버 연결에 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        {/* 로고 */}
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white font-bold text-2xl mx-auto mb-4">
+            관
+          </div>
+          <h1 className="text-white text-2xl font-bold">관리자 로그인</h1>
+          <p className="text-slate-400 text-sm mt-1">쟁승메이드 관리자 전용</p>
+        </div>
+
+        {/* 폼 */}
+        <form onSubmit={handleSubmit} className="bg-slate-900 rounded-2xl p-6 space-y-4 border border-slate-700/50">
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-1.5">관리자 ID</label>
+            <input
+              type="text"
+              value={id}
+              onChange={(e) => setId(e.target.value)}
+              required
+              autoComplete="username"
+              className="w-full bg-slate-800 border border-slate-600 rounded-lg px-4 py-2.5 text-white text-sm placeholder-slate-500 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition"
+              placeholder="관리자 ID 입력"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-1.5">비밀번호</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+              className="w-full bg-slate-800 border border-slate-600 rounded-lg px-4 py-2.5 text-white text-sm placeholder-slate-500 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition"
+              placeholder="비밀번호 입력"
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-900/30 border border-red-700/50 rounded-lg px-4 py-2.5 text-red-300 text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-gradient-to-r from-red-600 to-orange-500 text-white font-semibold py-2.5 rounded-lg text-sm hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? '로그인 중...' : '로그인'}
+          </button>
+        </form>
+
+        <p className="text-center text-slate-600 text-xs mt-4">
+          .env.local의 ADMIN_ID / ADMIN_PASSWORD로 로그인
+        </p>
+      </div>
+    </div>
+  );
+}

app/admin/members/page.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Member {
+  id: string;
+  email: string;
+  full_name: string | null;
+  created_at: string;
+  orderCount: number;
+  totalPaid: number;
+}
+
+export default function AdminMembersPage() {
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    fetch('/api/admin/members')
+      .then((r) => r.json())
+      .then((d) => setMembers(d.members ?? []))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const filtered = members.filter(
+    (m) =>
+      m.email?.toLowerCase().includes(search.toLowerCase()) ||
+      m.full_name?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-white text-2xl font-bold">회원 관리</h1>
+          <p className="text-slate-400 text-sm mt-0.5">가입 회원 목록 및 결제 현황</p>
+        </div>
+        <span className="bg-slate-700 text-slate-300 px-3 py-1 rounded-full text-sm">
+          총 {members.length}명
+        </span>
+      </div>
+
+      {/* 검색 */}
+      <div className="mb-4">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="이메일 또는 이름으로 검색..."
+          className="w-full max-w-sm bg-slate-800 border border-slate-600 rounded-lg px-4 py-2.5 text-white text-sm placeholder-slate-500 focus:outline-none focus:border-red-500 transition"
+        />
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-48">
+          <div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" />
+        </div>
+      ) : (
+        <div className="bg-slate-900 rounded-2xl border border-slate-700/50 overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-slate-700/50">
+                <th className="text-left px-5 py-3 text-slate-400 font-medium">이메일</th>
+                <th className="text-left px-5 py-3 text-slate-400 font-medium">이름</th>
+                <th className="text-left px-5 py-3 text-slate-400 font-medium">가입일</th>
+                <th className="text-right px-5 py-3 text-slate-400 font-medium">결제 건수</th>
+                <th className="text-right px-5 py-3 text-slate-400 font-medium">총 결제액</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="text-center py-12 text-slate-500">
+                    회원 데이터가 없습니다
+                  </td>
+                </tr>
+              ) : (
+                filtered.map((m) => (
+                  <tr key={m.id} className="border-b border-slate-800 last:border-0 hover:bg-slate-800/50 transition">
+                    <td className="px-5 py-3 text-white">{m.email ?? '-'}</td>
+                    <td className="px-5 py-3 text-slate-300">{m.full_name ?? '-'}</td>
+                    <td className="px-5 py-3 text-slate-400">
+                      {new Date(m.created_at).toLocaleDateString('ko-KR')}
+                    </td>
+                    <td className="px-5 py-3 text-right">
+                      <span className={`px-2 py-0.5 rounded-full text-xs ${m.orderCount > 0 ? 'bg-green-900/40 text-green-400' : 'bg-slate-700 text-slate-500'}`}>
+                        {m.orderCount}건
+                      </span>
+                    </td>
+                    <td className="px-5 py-3 text-right text-slate-200 font-medium">
+                      {m.totalPaid > 0 ? `₩${m.totalPaid.toLocaleString()}` : '-'}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function AdminRootPage() {
+  redirect('/admin/dashboard');
+}

app/admin/services/page.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Service {
+  id: string;
+  name: string;
+  description: string;
+  is_active: boolean;
+  order_index: number;
+}
+
+const SERVICE_ICONS: Record<string, string> = {
+  saju: '🔮',
+  lotto: '🎰',
+  stock: '📈',
+  automation: '🤖',
+  prompt: '💡',
+  freelance: '🛠',
+};
+
+export default function AdminServicesPage() {
+  const [services, setServices] = useState<Service[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [toggling, setToggling] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/admin/services')
+      .then((r) => r.json())
+      .then((d) => setServices(d.services ?? []))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function toggleService(id: string, current: boolean) {
+    setToggling(id);
+    try {
+      const res = await fetch('/api/admin/services', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, is_active: !current }),
+      });
+      if (res.ok) {
+        setServices((prev) =>
+          prev.map((s) => (s.id === id ? { ...s, is_active: !current } : s))
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setToggling(null);
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      <div className="mb-6">
+        <h1 className="text-white text-2xl font-bold">서비스 설정</h1>
+        <p className="text-slate-400 text-sm mt-0.5">각 서비스의 노출 여부를 관리합니다</p>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-48">
+          <div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" />
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {services.map((service) => (
+            <div
+              key={service.id}
+              className={`bg-slate-900 rounded-2xl p-5 border transition-all ${
+                service.is_active ? 'border-slate-700/50' : 'border-slate-800 opacity-60'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <span className="text-2xl">{SERVICE_ICONS[service.id] ?? '📦'}</span>
+                  <div>
+                    <h3 className="text-white font-semibold">{service.name}</h3>
+                    <p className="text-slate-400 text-sm">{service.description}</p>
+                  </div>
+                </div>
+                {/* 토글 스위치 */}
+                <button
+                  onClick={() => toggleService(service.id, service.is_active)}
+                  disabled={toggling === service.id}
+                  aria-label={`${service.name} ${service.is_active ? '비활성화' : '활성화'}`}
+                  className={`relative w-12 h-6 rounded-full transition-colors duration-200 focus:outline-none ${
+                    service.is_active ? 'bg-green-500' : 'bg-slate-600'
+                  } ${toggling === service.id ? 'opacity-50' : ''}`}
+                >
+                  <span
+                    className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 ${
+                      service.is_active ? 'translate-x-6' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {/* 상태 배지 */}
+              <div className="mt-3 flex items-center gap-2">
+                <span
+                  className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${
+                    service.is_active
+                      ? 'bg-green-900/40 text-green-400'
+                      : 'bg-slate-700 text-slate-500'
+                  }`}
+                >
+                  <span className={`w-1.5 h-1.5 rounded-full ${service.is_active ? 'bg-green-400' : 'bg-slate-500'}`} />
+                  {service.is_active ? '활성' : '비활성'}
+                </span>
+                {!service.is_active && (
+                  <span className="text-slate-500 text-xs">사이트에서 숨겨집니다</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-6 bg-slate-800/50 rounded-xl p-4 border border-slate-700/30">
+        <p className="text-slate-400 text-xs">
+          💡 서비스 on/off는 Supabase의 <code className="text-slate-300">service_settings</code> 테이블에 저장됩니다.
+          아직 테이블이 없으면 아래 SQL을 실행하세요.
+        </p>
+        <pre className="text-slate-500 text-xs mt-2 bg-slate-900 rounded p-3 overflow-x-auto">{`CREATE TABLE service_settings (
+  id text PRIMARY KEY,
+  name text,
+  description text,
+  is_active boolean DEFAULT true,
+  order_index integer DEFAULT 0,
+  updated_at timestamptz DEFAULT now()
+);`}</pre>
+      </div>
+    </div>
+  );
+}