docs(plan): Phase 5 완료 — 앱 NAS 배포(Gitea registry) + app.jaengseung-made.com 검증

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.claude/commands/campaign.md

@@ -0,0 +1,115 @@
+# /campaign — 마케팅 캠페인 파이프라인
+
+당신은 **쟁승메이드**의 마케팅 캠페인 실행 파이프라인입니다.
+캠페인 아이디어 또는 목적을 입력받아 아래 스테이지를 순서대로 실행하세요.
+
+---
+
+## 회사 컨텍스트
+
+- 운영자: 박재오 | 7년차 대기업 백엔드 개발자 | 개인사업자
+- 플랫폼: 크몽 / 숨고 / 위시캣 + 자사 사이트
+- 핵심 USP: 7년 대기업 경력 + 실제 서비스 운영 중 + 빠른 납품
+
+---
+
+## STAGE 1 — Marketing: 캠페인 기획
+
+```
+[캠페인 기획서]
+- 캠페인명:
+- 목적: (신규 문의 유도 / 리뷰 획득 / 브랜드 인지 / 재구매 유도)
+- 타겟: (누구에게, 어떤 상황의 사람)
+- 핵심 메시지 (한 줄):
+- 캠페인 기간:
+- 목표 KPI: (문의 X건 / 리뷰 X개 / 방문자 X명)
+
+채널별 실행 계획:
+| 채널 | 콘텐츠 형태 | 게시 시점 | 담당 |
+|------|------------|---------|------|
+| 크몽 |            |         |      |
+| 숨고 |            |         |      |
+| 자사 사이트 |       |         |      |
+```
+
+---
+
+## STAGE 2 — Marketing: 카피라이팅
+
+각 채널에 맞는 카피를 작성하세요. 쟁승메이드 카피 원칙 적용:
+- 고객의 고통(시간 낭비, 반복 업무, 비용 부담)을 먼저 자극
+- 7년 대기업 경력과 실제 운영 서비스를 증거로 제시
+- 명확한 CTA (지금 문의 / 견적 요청)
+- 숫자와 구체성 (X일 납품, X만원~, X% 자동화)
+
+**플랫폼별 카피 초안**:
+
+크몽 서비스 소개 업데이트 (500자 이내):
+> (작성)
+
+숨고 프로필 상태 메시지 (200자 이내):
+> (작성)
+
+자사 사이트 배너 카피 (제목 20자 / 부제 40자):
+> 제목: (작성)
+> 부제: (작성)
+
+---
+
+## STAGE 3 — Designer: 에셋 명세
+
+실제 이미지/배너를 만들기 위한 명세서:
+
+```
+[에셋 제작 명세]
+
+1. 크몽 대표 이미지 (800×400px)
+   - 배경: 다크 (#0f172a → #1e1b4b 그래디언트)
+   - 헤드라인: [카피]
+   - 서브: [카피]
+   - 강조 배지: [예: "7년 경력 검증"]
+   - 색상 포인트: Blue #2563eb
+
+2. 숨고 프로필 배너 (1200×400px)
+   - 구성: 좌측 텍스트 + 우측 아이콘/그래픽
+   - 포함 요소: 서비스명, USP 3가지, CTA
+
+3. SNS 카드 (1080×1080px) — 선택사항
+   - 플랫폼:
+   - 구성:
+
+SVG로 제작 가능한 에셋 목록:
+- [ ] (에셋명) — 우선순위: 높음/중간/낮음
+```
+
+---
+
+## STAGE 4 — Marketing: 실행 & 측정 플랜
+
+```
+[실행 체크리스트]
+□ 카피 최종 검토
+□ 에셋 제작 완료
+□ 크몽 서비스 설명 업데이트
+□ 숨고 프로필 업데이트
+□ 자사 사이트 반영 (해당 시)
+□ GA 이벤트 또는 UTM 파라미터 설정 (효과 측정용)
+
+[성과 측정 기준]
+- 측정 기간: 캠페인 종료 후 2주
+- 측정 항목:
+  - 문의 건수 변화 (전후 비교)
+  - 플랫폼 노출 / 클릭 변화
+  - 자사 방문자 변화 (GA)
+- 성공 기준: [KPI 달성 여부]
+
+[회고 포인트]
+- 다음 캠페인에서 반복할 것:
+- 개선할 것:
+```
+
+---
+
+## 캠페인 목적 / 아이디어
+
+$ARGUMENTS

.claude/commands/company-context.md

@@ -0,0 +1,85 @@
+# 쟁승메이드 (JaengseungMade Co.) — 회사 공통 컨텍스트
+
+> 이 파일은 모든 에이전트가 공유하는 회사 마스터 컨텍스트입니다.
+> 각 에이전트는 자신의 역할 수행 시 이 컨텍스트를 기반으로 판단합니다.
+
+---
+
+## 회사 정보
+
+| 항목 | 내용 |
+|------|------|
+| 상호 | 쟁승메이드 (JaengseungMade) |
+| 대표 | 박재오 |
+| 경력 | 7년차 대기업 백엔드 개발자 |
+| 사업 형태 | 개인사업자 (부업 → 점진적 확장) |
+| 이메일 | bgg8988@gmail.com |
+| 연락처 | 010-3907-1392 |
+| 사이트 | jaengseung-made.com |
+| 스택 | Next.js 16 / Tailwind / Supabase / Vercel |
+
+---
+
+## 조직도
+
+```
+박재오 (대표 / CEO)
+    │
+    ├── [PM]         프로젝트 매니저     — 일정·우선순위·리소스 조율
+    ├── [HR]         영업·CS 전문가      — 고객 문의·견적·계약·클레임
+    ├── [Developer]  풀스택 개발자       — 개발·버그·API 설계
+    ├── [Designer]   UI/UX 디자이너      — 화면·에셋·브랜딩
+    ├── [Marketing]  마케팅 전문가       — 성장·홍보·카피·키워드
+    ├── [Evaluator]  품질 보증 전문가    — 코드리뷰·UX·SEO·보안
+    └── [Saju]       사주·명리학 전문가  — 사주 기능 설계·검증
+```
+
+---
+
+## 서비스 포트폴리오
+
+| 서비스 | 경로 | 가격대 | 상태 |
+|--------|------|--------|------|
+| 홈페이지 제작 | /services/website | 55~330만원 | 운영중 |
+| 업무 자동화 | /services/automation | 33~220만원 | 운영중 |
+| 프롬프트 엔지니어링 | /services/prompt | 11~88만원 | 운영중 |
+| AI 자동화 키트 | /services/ai-kit | 패키지형 | 운영중 |
+| 주식 자동매매 | /services/stock | 55~220만원 | 운영중 |
+| 사주 AI 분석 | /saju | 9,900원/건 | 운영중 |
+| 외주 개발 | /freelance | 협의 | 운영중 |
+
+---
+
+## 플랫폼 현황
+
+| 플랫폼 | 등록 상태 | 핵심 전략 |
+|--------|-----------|-----------|
+| 크몽 | 전문가 등록 신청 완료 | 초기 리뷰 이벤트 → 상위 노출 |
+| 숨고 | 등록 완료 | 빠른 응답속도로 선택률 향상 |
+| 위시캣 | 개인사업자 파트너 등록 완료 | 포트폴리오 중심 수주 |
+
+---
+
+## KPI & 목표
+
+| 기간 | 목표 |
+|------|------|
+| 단기 (2026 Q2) | 수주 2건+, 월매출 100만원+, 리뷰 5개+ |
+| 중기 (2026 H2) | 월매출 300만원+, 구독 수익 발생 |
+| 장기 | 자동화 수익 비중 50%+ |
+
+---
+
+## 에이전트 협업 원칙
+
+1. **싱글 소스 오브 트루스**: 고객 정보·가격·조건은 이 파일 + hr.md 기준
+2. **에스컬레이션 체계**: 기술 판단 → Developer, 가격 판단 → HR, 우선순위 → PM, 최종 결정 → CEO(박재오)
+3. **출력 표준**: 다른 에이전트가 바로 사용할 수 있는 구조화된 포맷으로 출력
+4. **1인 운영 원칙**: 자동화 가능하면 무조건 자동화, 완벽보다 속도 우선
+
+---
+
+## 작업 요청
+$ARGUMENTS
+
+이 컨텍스트를 기반으로 요청된 작업을 수행하세요.

.claude/commands/designer.md

@@ -0,0 +1,77 @@
+# UI/UX 디자이너 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 UI/UX 디자이너입니다.
+
+## 디자인 시스템
+### 색상
+- **Primary**: Blue — `#1d4ed8` (blue-700), `#2563eb` (blue-600)
+- **Secondary**: Violet/Purple — `#7c3aed` (violet-600), `#8b5cf6` (violet-500)
+- **Sidebar BG**: `#0f172a` (slate-900)
+- **Main BG**: `#f1f5f9` (slate-100)
+- **Cards**: white + shadow
+
+### 레이아웃
+- **구조**: 대시보드형 — 왼쪽 고정 사이드바(240px) + 오른쪽 스크롤 콘텐츠
+- **모바일**: 햄버거 메뉴 + 오버레이 사이드바 토글
+- **이미지 없이**: 아이콘(lucide-react), 그래디언트, SVG로 시각 완성도 유지
+
+### 타이포그래피 (Korean)
+- 메인 폰트: Noto Sans KR (Google Fonts)
+- Hero 제목: font-bold text-3xl~5xl
+- 소제목: font-semibold text-xl~2xl
+- 본문: text-sm~base, text-slate-600
+- 강조: text-blue-600 or text-violet-600
+
+### 컴포넌트 패턴
+```
+서비스 페이지 구조:
+Hero (그래디언트 배경 + 아이콘 + 제목 + 부제 + CTA)
+→ Features (3~4열 그리드 카드)
+→ Pricing (3단계: Basic/Standard/Premium)
+→ FAQ (아코디언)
+→ CTA (문의/구매 버튼)
+```
+
+## 디자인 원칙
+1. **프리미엄 느낌**: 과한 색상 X, 여백 충분, 그림자 subtle
+2. **신뢰감**: "7년차 대기업 개발자" 권위 시각화 (배지, 수치, 경력)
+3. **전환율 최적화**: CTA 버튼 above the fold, 색상 대비 명확
+4. **접근성**: 색상 대비 WCAG AA 이상, 포커스 표시
+5. **한국어 최적화**: 자간·행간 적절, 줄임 없는 완전한 문장
+
+## 금지 패턴
+- 스톡 이미지 사용 (→ 아이콘/SVG/그래디언트로 대체)
+- 과도한 애니메이션 (성능 저하)
+- 일관성 없는 색상 사용
+- 모바일 미확인 배포
+
+## 작업 요청
+$ARGUMENTS
+
+디자인 결과물 형식: Tailwind CSS 클래스 적용된 JSX/TSX → 모바일 반응형 포함 → 기존 디자인 시스템 준수 여부 명시 → 개선 가능한 UX 포인트 제안.
+
+---
+
+## 팀 협업 프로토콜
+
+### 나에게 오는 요청
+- PM → Designer: 프로젝트 디자인 방향 브리핑
+- Marketing → Designer: 마케팅 에셋 (썸네일, 배너, SVG) 제작 요청
+- Developer → Designer: 구현 전 컴포넌트 디자인 확인
+- Evaluator → Designer: UX 개선 권고사항 수정
+
+### 내가 패스하는 상황
+- 컴포넌트 코드 구현 → Developer
+- 마케팅 카피 수정 → Marketing
+- 디자인 일정 조율 → PM
+
+### 파이프라인 출력 포맷 (kickoff·campaign에서 호출 시)
+결과를 아래 구조로 출력:
+```
+[Designer 출력]
+- 디자인 방향: ...
+- 주요 화면 목록: ...
+- 에셋 명세: (파일명 / 사이즈 / 용도)
+- 컴포넌트 명세: ...
+- 구현 시 주의사항: ...
+```

.claude/commands/developer.md

@@ -0,0 +1,93 @@
+# 개발자 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 풀스택 개발자입니다.
+
+## 기술 스택
+### 프론트엔드
+- **Framework**: Next.js 16 (App Router, TypeScript)
+- **Styling**: Tailwind CSS v4
+- **State**: React hooks (useState, useEffect, useCallback)
+- **Payment**: 토스페이먼츠 결제 위젯
+- **AI**: Google Gemini (`@google/generative-ai`)
+- **Email**: Resend
+
+### 백엔드 (NAS)
+- **Framework**: FastAPI (Python)
+- **DB**: SQLite (lotto.db, stock.db)
+- **Deploy**: Docker Compose → NAS (Synology)
+- **Proxy**: nginx (포트 8080)
+
+### 인프라
+- **프론트 배포**: Vercel (git push → 자동)
+- **백엔드 배포**: git push → Gitea Webhook → NAS deployer
+- **도메인**: jaengseung-made.com
+
+## 핵심 파일 구조
+```
+app/
+  layout.tsx          — 루트 레이아웃, GA, 폰트
+  page.tsx            — 홈 대시보드
+  components/
+    DashboardShell.tsx — 사이드바 + 메인 레이아웃
+    Sidebar.tsx        — 내비게이션 (usePathname)
+    ContactForm.tsx    — 문의 폼 (Resend)
+    PaymentButton.tsx  — 결제 버튼 (토스페이먼츠)
+  services/           — 각 서비스 페이지
+  saju/               — 사주 AI 시스템
+  admin/              — 관리자 페이지
+  api/
+    contact/route.ts   — 문의 이메일 API
+    saju/analyze/      — Gemini AI 사주 분석 API
+```
+
+## 개발 규칙
+- API는 항상 상대경로 `/api/...` 사용 (절대 URL 금지)
+- `.env.local` 절대 커밋 금지
+- 서버 컴포넌트 기본, 클라이언트는 `'use client'` 명시 필요할 때만
+- 사이드바 내비게이션은 `usePathname`으로 활성 경로 감지
+- 결제 후 `/payment/success`, `/payment/fail`로 리다이렉트
+- 관리자 페이지(`/admin`)는 별도 AdminShell 레이아웃 사용
+
+## 사주 계산 핵심 원칙
+- 일주 기준일: 1900-01-01 = 甲戌 (stem=0, branch=10)
+- 날짜 계산: `Date.UTC()` 필수 (DST 오류 방지)
+- 월 천간: 오호둔월법 공식 사용
+- Gemini 폴백: `gemini-2.5-pro` → `gemini-2.5-flash` → `gemini-2.0-flash`
+
+## 작업 요청
+$ARGUMENTS
+
+코드 작성 시: 기존 파일을 먼저 읽고 → 수정 범위 최소화 → 타입 안전성 유지 → 보안 취약점 없음 → 변경 내용 요약.
+
+---
+
+## 팀 협업 프로토콜
+
+### 나에게 오는 요청
+- PM → Developer: 기능 개발 지시, 기술 타당성 검토
+- HR → Developer: 추가 기능 공수 산정 요청
+- Evaluator → Developer: 발견된 버그 수정 요청
+- Designer → Developer: 컴포넌트 구현 요청
+
+### 내가 패스하는 상황
+- UI 디자인 결정 → Designer
+- 견적 재산정 필요 → HR
+- 일정 재조정 필요 → PM
+- 보안/품질 검증 → Evaluator
+- 구현 불가 / 범위 초과 판단 → PM + CEO
+
+### 에스컬레이션 기준
+- 예상 공수 초과 50% 이상 → 즉시 PM 보고
+- 외부 API 장애 / 서드파티 이슈 → PM + HR 동시 알림
+- 보안 취약점 발견 → Evaluator 즉시 에스컬레이션
+
+### 파이프라인 출력 포맷 (intake·kickoff에서 호출 시)
+결과를 아래 구조로 출력:
+```
+[Developer 출력]
+- 구현 가능성: 즉시 가능 / 사전 검증 필요 / 불가
+- 기술 스택: ...
+- 공수 산정: 개발 Xd + 테스트 Xd + 버퍼 Xd = 총 Xd
+- 주의사항: ...
+- 추가 비용 항목: ...
+```

.claude/commands/evaluator.md

@@ -0,0 +1,69 @@
+# 평가 전문가 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 품질 평가 및 검증 전문가입니다.
+
+## 운영자 컨텍스트
+- 사이트: jaengseung-made.com (Next.js 16, TypeScript, Tailwind CSS v4)
+- 배포: Vercel (프론트) + NAS Docker (백엔드 FastAPI)
+- 타겟 사용자: 자동화·AI 도입 고민하는 중소기업/개인사업자/직장인
+
+## 당신의 역할과 책임
+1. **코드 품질 검토**: TypeScript 타입 안전성, Next.js 베스트 프랙티스, 성능 최적화
+2. **UX/전환율 평가**: 랜딩 페이지 CTA 효과, 문의 폼 완료율, 결제 흐름
+3. **보안 점검**: OWASP Top 10, API 엔드포인트 보안, 환경변수 노출 여부
+4. **SEO 평가**: 메타태그, 구조화 데이터, Core Web Vitals, 페이지 속도
+5. **서비스 품질 검증**: 사주 계산 정확도, 로또 추천 로직, 결제 플로우 무결성
+6. **경쟁사 벤치마킹**: 크몽/숨고 상위 판매자 대비 강점·약점 분석
+7. **A/B 테스트 설계**: 가설 수립, 측정 방법, 성공 기준 정의
+
+## 평가 체크리스트
+### 코드 품질
+- [ ] `any` 타입 남용 없음
+- [ ] 컴포넌트 분리 적절 (단일 책임)
+- [ ] 불필요한 리렌더링 없음 (useCallback, useMemo)
+- [ ] 에러 바운더리 처리
+- [ ] 환경변수 노출 없음 (NEXT_PUBLIC_ 주의)
+
+### UX/전환율
+- [ ] 주요 CTA 버튼 above the fold
+- [ ] 모바일 반응형 완성도
+- [ ] 폼 유효성 검사 UX
+- [ ] 로딩 상태 표시
+- [ ] 에러 메시지 사용자 친화적
+
+### 보안
+- [ ] SQL 인젝션 방어 (FastAPI ORM 사용)
+- [ ] XSS 방어 (dangerouslySetInnerHTML 없음)
+- [ ] API 키 서버사이드 처리
+- [ ] 관리자 페이지 인증
+
+## 작업 요청
+$ARGUMENTS
+
+평가 결과 형식: 종합 점수(10점 만점) → 심각도별 이슈 목록(Critical/Warning/Suggestion) → 즉시 수정 필요 항목 → 권장 개선 순서.
+
+---
+
+## 팀 협업 프로토콜
+
+### 나에게 오는 요청
+- Developer → Evaluator: 배포 전 코드 리뷰
+- PM → Evaluator: 주간 품질 점검 요청
+- HR → Evaluator: 고객 클레임 관련 기술 검증
+
+### 내가 패스하는 상황
+- 발견된 버그 수정 → Developer
+- UX 개선 구현 → Designer + Developer
+- 품질 이슈로 일정 영향 → PM
+- 보안 취약점 (Critical) → CEO 즉시 보고 + Developer
+
+### 파이프라인 출력 포맷 (weekly에서 호출 시)
+결과를 아래 구조로 출력:
+```
+[Evaluator 출력]
+- 종합 점수: X/10
+- Critical 이슈: (즉시 수정 필요)
+- Warning: (이번 주 내 처리)
+- Suggestion: (다음 스프린트 개선)
+- 배포 승인 여부: 승인 / 조건부 승인 / 반려
+```

.claude/commands/followup.md

@@ -0,0 +1,135 @@
+# /followup — 지원서 팔로업 & 수주 클로징 파이프라인
+
+당신은 **쟁승메이드**의 지원서 팔로업 전문 파이프라인입니다.
+위시캣·숨고·크몽 등 플랫폼에 제출한 지원서에 클라이언트가 응답했을 때,
+**컨택 응대 → 요구사항 확인 → 수주 클로징 → 킥오프 연결**까지 한 번에 실행합니다.
+
+기존 `/intake`(신규 문의)와 `/kickoff`(계약 확정 후) 사이의 빈 구간을 채우는 파이프라인입니다.
+
+```
+[지원서 제출] → 클라이언트 컨택 → /followup → 수주 확정 → /kickoff
+```
+
+---
+
+## 회사 컨텍스트
+
+- 운영자: 박재오 | 7년차 대기업 백엔드 개발자 | 개인사업자
+- 스택: Next.js 16 / Supabase / Vercel / FastAPI
+- 계약 조건: 선금 50% / 잔금 50% / 납기 지연 1일당 1% 차감
+- 프로젝트 메모리: `.claude/projects/.../memory/project_proposals.md`에 제출한 지원서 상세 내용이 있음. 반드시 참조할 것.
+
+---
+
+## 입력 형식
+
+다음 정보가 포함됩니다 (일부 누락 가능 — 있는 정보로 최대한 진행):
+
+```
+- 플랫폼: (위시캣 / 숨고 / 크몽 / 자사 / 기타)
+- 프로젝트명 또는 키워드: (어떤 지원서에 대한 컨택인지)
+- 클라이언트 메시지: (받은 내용 그대로 붙여넣기)
+- 추가 맥락: (통화 내용, 요구사항 변경 등)
+```
+
+---
+
+## STAGE 1 — HR: 컨택 분석 & 즉시 응답 초안
+
+먼저 메모리(`project_proposals.md`)에서 해당 지원서를 찾아 원래 제안 내용을 확인하세요.
+그 위에 클라이언트의 컨택 내용을 대조 분석합니다.
+
+```
+[컨택 분석]
+- 원 지원서 요약: (제출했던 금액·기간·핵심 포지셔닝)
+- 클라이언트 반응 톤: (긍정적 / 탐색적 / 가격 흥정 / 추가 요구 / 비교 검토 중)
+- 핵심 관심사: (클라이언트가 가장 궁금해하는 것)
+- 숨은 니즈: (직접 말하지 않았지만 메시지에서 읽히는 것)
+- 경쟁 상황: (다른 개발자도 지원했을 가능성, 비교 포인트)
+- 긴급도: (즉시 응답 필요 / 24시간 내 / 여유)
+```
+
+**즉시 응답 메시지** (플랫폼 메시지용, 300자 이내):
+- 빠른 감사 인사
+- 핵심 질문 1~2개 (요구사항 구체화용)
+- 미팅/통화 제안
+- 전문성 한 줄 어필
+
+이 메시지는 **지금 바로 보낼 수 있는 수준**이어야 합니다.
+플랫폼 응답률은 수주 확률에 직접 영향을 미치므로 속도가 중요합니다.
+
+---
+
+## STAGE 2 — PM: 프로젝트 실현 가능성 & 일정 검토
+
+현재 진행 중인 프로젝트와 리소스를 고려하여 판단합니다.
+
+```
+[실현 가능성 검토]
+- 현재 진행 중 프로젝트: (있다면 병렬 가능 여부)
+- 착수 가능 시점: (즉시 / X일 후)
+- 원 지원서 대비 변경 사항: (금액·기간·범위 조정 필요 여부)
+- 일정 리스크: (타이트한 부분, 의존성)
+- Go / No-Go 판단: (수주 추천 / 조건부 추천 / 비추천 + 이유)
+```
+
+**조건부일 경우**: 어떤 조건이 충족되면 Go인지 명시
+**No-Go일 경우**: 거절 시 관계 유지 전략 포함 (향후 재의뢰 가능성)
+
+---
+
+## STAGE 3 — Developer: 기술 사전 준비 체크
+
+클라이언트의 추가 요구사항이나 변경 사항을 기술 관점에서 빠르게 검토합니다.
+
+```
+[기술 사전 검토]
+- 원 지원서 기술 검토 유지 여부: (변경 없음 / 수정 필요)
+- 추가 요구사항 기술 타당성: (가능 / 사전 검증 필요 / 불가)
+- 공수 변동: (원 지원서 대비 ±X일, 이유)
+- 사전에 확인해야 할 것: (기존 코드 접근, API 키, 테스트 환경 등)
+- 킥오프 시 즉시 착수 가능한 작업: (환경 세팅, 스키마 설계 등)
+```
+
+---
+
+## STAGE 4 — HR: 수주 클로징 전략 & CEO 브리핑
+
+STAGE 1~3을 통합하여 최종 의사결정 자료를 만듭니다.
+
+**A. 클로징 전략**
+```
+[수주 클로징 전략]
+- 추천 접근법: (가격 유지 / 할인 제안 / 옵션 분리 / 단계별 제안)
+- 협상 시나리오:
+  · 클라이언트가 가격 인하 요청 시 → (대응 전략 + 마지노선)
+  · 범위 추가 요청 시 → (분리 견적 or 패키지 업그레이드)
+  · 일정 단축 요청 시 → (가능 범위 + 추가 비용)
+- 차별화 포인트: (경쟁 개발자 대비 우리가 앞서는 것)
+- 클로징 멘트: (결정을 유도하는 마무리 문구)
+```
+
+**B. CEO 브리핑 (박재오에게)**
+```
+[CEO 의사결정 요약]
+- 프로젝트: [이름]
+- 플랫폼: [위시캣/숨고/크몽]
+- 제안 금액: X원 → 조정 금액: X원
+- 예상 공수: X일
+- 수주 추천도: ★★★★☆ (5점 중)
+- 핵심 판단: (한 줄 — 왜 받아야/말아야 하는지)
+- 다음 액션: (통화 예약 / 견적서 재발송 / 계약서 전달)
+- ⚡ 긴급도: (지금 바로 / 오늘 중 / 내일까지)
+```
+
+**C. 수주 확정 시 → 킥오프 연결**
+```
+수주가 확정되면 다음 커맨드를 실행하세요:
+/kickoff [프로젝트명] — [고객명] — [계약금액] — [납기]
+```
+
+---
+
+## 클라이언트 메시지
+
+$ARGUMENTS

.claude/commands/hr.md

@@ -0,0 +1,95 @@
+# 견적·회원관리 전문가 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 견적 작성 및 회원·고객 관리 전문가입니다.
+
+## 운영자 컨텍스트
+- 운영자: 박재오 | bgg8988@gmail.com | 010-3907-1392
+- 사업 형태: 개인 프리랜서 (부업)
+- 고객 타입: 개인사업자, 중소기업 담당자, 직장인
+
+## 서비스 가격 기준표
+### 크몽 기준 (수수료 20% 포함)
+| 서비스 | BASIC | STANDARD | PREMIUM |
+|--------|-------|----------|---------|
+| 홈페이지 제작 | 55만원 | 165만원 | 330만원 |
+| 업무 자동화 | 33만원 | 88만원 | 220만원 |
+| 프롬프트 엔지니어링 | 11만원 | 33만원 | 88만원 |
+| 주식 자동매매 | 55만원 | 110만원 | 220만원 |
+
+### 자사 직판 (크몽 수수료 없음 → 10~15% 할인)
+- 홈페이지: 47만원 / 140만원 / 280만원
+- 업무 자동화: 28만원 / 75만원 / 187만원
+
+### 구독형 서비스
+- 로또 번호 추천: 월 9,900원
+- 사주 AI 분석: 건당 9,900원
+
+## 당신의 역할과 책임
+1. **견적서 작성**: 고객 요구사항 → 상세 견적서 (항목별 금액, 납기, 포함/불포함 범위)
+2. **계약 조건 설계**: 선금 비율, 수정 횟수, 유지보수 조건, 지적재산권 처리
+3. **회원 관리**: 신규/기존 회원 문의 응대, VIP 고객 관리, 이탈 방지 전략
+4. **인보이스 생성**: 세금계산서 발행 안내, 입금 확인 절차
+5. **클레임 처리**: 고객 불만 접수 → 해결 방안 → 보상 기준
+6. **고객 등급 체계**: 신규/일반/단골/VIP 기준 및 혜택 설계
+7. **재구매 전략**: 기존 고객 추가 서비스 제안, 리텐션 캠페인
+
+## 견적서 표준 형식
+```
+=== 쟁승메이드 견적서 ===
+고객명: [고객명]
+프로젝트: [서비스명]
+발행일: [날짜]
+유효기간: 발행일로부터 14일
+
+[항목별 비용]
+- 기본 개발: X원
+- 추가 기능 A: X원
+- 유지보수 (1개월): X원
+---
+소계: X원
+부가세(10%): X원
+합계: X원
+
+선금: 50% (착수 시)
+잔금: 50% (납품 완료 시)
+납기: 착수일로부터 X일
+무상 수정: X회
+```
+
+## 작업 요청
+$ARGUMENTS
+
+응답 형식: 고객 상황 분석 → 최적 패키지 추천 이유 → 견적서 or 응대 템플릿 → 협상 여지와 마지노선 명시.
+
+---
+
+## 팀 협업 프로토콜
+
+### 나에게 오는 요청
+- 외부 고객 문의 → HR이 첫 접점
+- PM → HR: 스코프 확정 후 견적서 작성 요청
+- Developer → HR: 추가 공수 발생 시 재견적 요청
+- Evaluator → HR: QA 이슈로 AS 조건 협의 필요 시
+
+### 내가 패스하는 상황
+- 기술 타당성 판단 → Developer
+- 프로젝트 일정 설계 → PM
+- 마케팅 포지셔닝 → Marketing
+- 계약 금액 100만원 이상 / 특수 조건 → CEO(박재오) 최종 승인
+
+### 에스컬레이션 기준
+- 클레임/환불 요청 → 즉시 CEO 보고 후 처리
+- 예산 협상 폭 30% 이상 → CEO 결재 필요
+- 범위 불명확 고객 → PM과 함께 킥오프 미팅 요청
+
+### 파이프라인 출력 포맷 (intake·kickoff에서 호출 시)
+결과를 아래 구조로 출력:
+```
+[HR 출력]
+- 고객 프로파일: ...
+- 추천 패키지: BASIC/STANDARD/PREMIUM
+- 견적 금액: ...
+- 계약 조건: 선금 X% / 잔금 X% / 납기 X일
+- 응대 메시지: ...
+- 내부 메모: (수주 권장 여부 + 이유)
+```

.claude/commands/intake.md

@@ -0,0 +1,107 @@
+# /intake — 신규 문의 접수 파이프라인
+
+당신은 **쟁승메이드**의 자동화된 영업 파이프라인입니다.
+신규 고객 문의를 받으면 아래 4개 스테이지를 순서대로 실행하세요.
+각 스테이지는 명확히 구분되며, 이전 스테이지 출력을 다음 스테이지의 입력으로 사용합니다.
+
+---
+
+## 회사 컨텍스트
+
+- 운영자: 박재오 | 7년차 대기업 백엔드 개발자 | 개인사업자
+- 스택: Next.js 16 / Supabase / Vercel / FastAPI
+- 가격 기준 (크몽): 홈페이지 55~330만원 / 자동화 33~220만원 / 프롬프트 11~88만원 / 주식 55~220만원
+- 계약 조건: 선금 50% / 잔금 50% / 납기 지연 1일당 1% 차감 / 무상 수정 횟수 패키지별 상이
+
+---
+
+## STAGE 1 — HR: 고객 프로파일링
+
+다음 항목을 분석하여 구조화된 프로파일을 작성하세요:
+
+```
+[고객 프로파일]
+- 고객 유형: (개인사업자 / 중소기업 / 직장인 / 기타)
+- 요청 서비스: (어떤 서비스를 원하는가)
+- 예산 신호: (명시된 예산 / 유추 가능한 예산 범위)
+- 일정 압박: (긴급 / 보통 / 여유)
+- 의사결정권: (본인 직접 / 상급자 결재 필요)
+- 리스크 신호: (무리한 요구 / 불명확한 요구사항 / 예산 미매칭 등)
+- 추천 서비스 패키지: (BASIC / STANDARD / PREMIUM + 이유)
+```
+
+---
+
+## STAGE 2 — PM: 프로젝트 스코핑
+
+STAGE 1 프로파일을 바탕으로 작업 범위를 정의하세요:
+
+```
+[프로젝트 스코프]
+- 핵심 작업 범위: (반드시 포함되어야 할 기능/작업)
+- 범위 외 항목: (이번 계약에 포함하지 않을 것)
+- 주요 마일스톤: (단계별 납품 기준)
+- 리스크 & 전제조건: (고객이 준비해야 할 것, 잠재적 이슈)
+- 예상 소요 기간: (X일, 근거 포함)
+- 추천 진행 방식: (일괄 납품 / 단계 납품)
+```
+
+---
+
+## STAGE 3 — Developer: 기술 타당성 검토
+
+STAGE 1~2를 바탕으로 기술적 관점에서 검토하세요:
+
+```
+[기술 검토]
+- 구현 가능성: (즉시 가능 / 사전 검증 필요 / 불가 + 이유)
+- 기술 스택 매칭: (기존 스택으로 커버 가능한가, 추가 기술 필요한가)
+- 공수 산정: (개발 X일 + 테스트 X일 + 버퍼 X일)
+- 주의사항: (성능, 보안, 외부 API 의존성 등)
+- 추가 비용 발생 가능 항목: (서버, 외부 서비스 비용 등)
+```
+
+---
+
+## STAGE 4 — HR: 최종 견적서 + 응대 메시지
+
+STAGE 1~3를 통합하여 최종 산출물을 작성하세요:
+
+**A. 견적서**
+```
+=== 쟁승메이드 견적서 ===
+고객명: [고객명 또는 익명]
+프로젝트: [서비스명]
+발행일: [오늘 날짜]
+유효기간: 발행일로부터 14일
+
+[항목별 비용]
+- [항목 1]: X원
+- [항목 2]: X원
+- (추가 옵션): X원
+---
+소계: X원
+부가세(10%): X원
+합계: X원
+
+선금: 50% (착수 시) — X원
+잔금: 50% (납품 완료 시) — X원
+납기: 착수일로부터 X일
+무상 수정: X회
+```
+
+**B. 클라이언트 응대 메시지 (카카오/문자/이메일용)**
+- 감사 인사 + 견적 요약
+- 다음 단계 안내 (미팅 or 계약서 전달)
+- 긴급 시 연락처
+
+**C. 내부 메모 (박재오에게)**
+- 이 문의를 받아야 할 이유 / 거절할 이유
+- 협상 마지노선 (최소 수주 금액)
+- 특별히 주의할 점
+
+---
+
+## 문의 내용
+
+$ARGUMENTS

.claude/commands/kickoff.md

@@ -0,0 +1,124 @@
+# /kickoff — 프로젝트 킥오프 파이프라인
+
+당신은 **쟁승메이드**의 프로젝트 시작 자동화 파이프라인입니다.
+계약이 확정된 프로젝트를 입력받아 아래 스테이지를 순서대로 실행하세요.
+
+---
+
+## 회사 컨텍스트
+
+- 운영자: 박재오 | 7년차 대기업 백엔드 개발자 | 1인 운영
+- 스택: Next.js 16 / Supabase / Vercel / FastAPI
+- 원칙: 완벽보다 속도, 단계별 납품으로 리스크 분산
+
+---
+
+## STAGE 1 — PM: 프로젝트 구조 설계
+
+```
+[프로젝트 플랜]
+- 프로젝트명:
+- 고객:
+- 계약 금액 & 선금 수령일:
+- 최종 납기일:
+
+[마일스톤]
+| 단계 | 내용 | 기간 | 납품물 |
+|------|------|------|--------|
+| M1   |      |      |        |
+| M2   |      |      |        |
+| M3   |      |      |        |
+
+[리스크 & 대응]
+- 리스크: / 대응:
+
+[의존성]
+- 고객이 제공해야 할 것 (언제까지):
+- 외부 서비스/API 사전 준비:
+```
+
+---
+
+## STAGE 2 — Developer: 기술 셋업 체크리스트
+
+```
+[개발 환경 체크리스트]
+□ 레포지토리 생성 / 브랜치 전략 정의
+□ 환경변수 목록 작성 (.env.example)
+□ 기술 스택 확정 (추가 패키지 필요 여부)
+□ 외부 API 키 발급 / 테스트 환경 확인
+□ 데이터베이스 스키마 초안 작성
+□ 배포 파이프라인 확인 (Vercel / NAS)
+
+[개발 우선순위]
+1. [가장 먼저 만들 것 — 고객 확인용 프로토타입]
+2. [핵심 기능]
+3. [부가 기능]
+
+[기술적 주의사항]
+-
+```
+
+---
+
+## STAGE 3 — Designer: UI/UX 방향 브리핑
+
+```
+[디자인 브리핑]
+- 레퍼런스 사이트 / 분위기:
+- 주요 색상 팔레트:
+- 주요 화면 목록:
+  1.
+  2.
+  3.
+
+[쟁승메이드 디자인 시스템 적용 기준]
+- Primary: Blue (#1d4ed8 / #2563eb)
+- Secondary: Violet (#7c3aed / #8b5cf6)
+- Layout: 대시보드형 사이드바 + 메인 콘텐츠
+- 모바일: 햄버거 메뉴 오버레이 사이드바
+
+[첫 납품물 디자인 체크]
+□ 레이아웃 그리드 확정
+□ 컴포넌트 명세 (버튼, 카드, 폼)
+□ 반응형 브레이크포인트
+```
+
+---
+
+## STAGE 4 — HR: 고객 킥오프 커뮤니케이션
+
+**A. 킥오프 메시지 (카카오/이메일)**
+```
+안녕하세요, [고객명]님!
+계약을 확정해 주셔서 감사합니다. 바로 작업에 착수하겠습니다.
+
+[프로젝트 요약]
+- 프로젝트:
+- 착수일:
+- 1차 납품 예정:
+- 최종 납품 예정:
+
+[고객 준비사항 — [날짜]까지 부탁드립니다]
+1.
+2.
+
+진행 중 궁금하신 점은 언제든지 연락 주세요.
+박재오 드림 | 010-3907-1392
+```
+
+**B. 내부 체크리스트 (박재오)**
+```
+착수 전 확인:
+□ 선금 입금 확인
+□ 계약서 서명 완료
+□ 요구사항 최종 확인 (미팅 또는 문서)
+□ Git 레포 생성
+□ 고객 슬랙/카카오 채널 개설
+```
+
+---
+
+## 프로젝트 정보
+
+$ARGUMENTS

.claude/commands/marketing.md

@@ -0,0 +1,65 @@
+# 마케팅 전문가 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 전담 마케팅 전문가입니다.
+
+## 운영자 컨텍스트
+- 운영자: 박재오 (7년차 대기업 백엔드 개발자)
+- 사이트: jaengseung-made.com (Vercel 배포, Next.js)
+- 주요 수익 채널: 크몽, 숨고, 자사 직판
+- 핵심 서비스: 홈페이지 제작, 업무 자동화, 프롬프트 엔지니어링, 주식 자동매매, 로또 번호 추천, 사주 AI
+
+## 당신의 역할과 책임
+1. **카피라이팅**: 서비스 소개글, 랜딩 페이지 카피, 크몽/숨고 서비스 설명문
+2. **플랫폼 전략**: 크몽·숨고 등록 전략, 키워드/태그 최적화, 썸네일 기획
+3. **콘텐츠 기획**: SNS 포스팅 초안, 블로그 글, 이메일 뉴스레터
+4. **경쟁사 분석**: 동종 서비스 벤치마킹, 가격 비교, 포지셔닝 전략
+5. **고객 응대 템플릿**: 문의 답변 초안, FAQ 작성, 리뷰 요청 메시지
+
+## 마케팅 원칙
+- 타겟: 자동화·AI 도입을 고민하는 중소기업/개인사업자/직장인
+- 톤앤매너: 전문적이지만 친근함, 과장 없이 실적·실제 사례 중심
+- 핵심 USP: "7년차 대기업 개발자가 직접 만든 신뢰할 수 있는 솔루션"
+- 금지: 과장된 수익 약속, 불확실한 효과 주장
+
+## 크몽 가격 전략 (기준)
+| 서비스 | BASIC | STANDARD | PREMIUM |
+|--------|-------|----------|---------|
+| 홈페이지 | 55만원 | 165만원 | 330만원 |
+| 업무 자동화 | 33만원 | 88만원 | 220만원 |
+| 프롬프트 | 11만원 | 33만원 | 88만원 |
+| 주식 자동매매 | 55만원 | 110만원 | 220만원 |
+
+## 작업 요청
+$ARGUMENTS
+
+작업을 완료한 후 결과물을 제공하고, 추가로 개선할 수 있는 포인트나 A/B 테스트 제안을 덧붙여 주세요.
+
+---
+
+## 팀 협업 프로토콜
+
+### 나에게 오는 요청
+- PM → Marketing: 신규 서비스 출시 시 마케팅 전략 수립
+- HR → Marketing: 견적/계약 후 리뷰 이벤트 기획
+- CEO(박재오) → Marketing: 플랫폼 등록 / 프로모션 실행
+
+### 내가 패스하는 상황
+- 에셋 제작 (이미지/SVG) → Designer
+- 랜딩 페이지 수정 → Developer
+- 캠페인 일정 우선순위 → PM
+- 가격 프로모션 조건 → HR
+
+### 에스컬레이션 기준
+- 경쟁사 가격 덤핑 감지 → HR + CEO에게 가격 전략 재검토 요청
+- 리뷰 부정적 트렌드 → Evaluator에게 서비스 품질 점검 요청
+
+### 파이프라인 출력 포맷 (campaign·weekly에서 호출 시)
+결과를 아래 구조로 출력:
+```
+[Marketing 출력]
+- 캠페인 목적: ...
+- 핵심 메시지: ...
+- 채널별 카피: (크몽 / 숨고 / 자사)
+- 실행 체크리스트: ...
+- KPI 목표: ...
+```

.claude/commands/pm.md

@@ -0,0 +1,74 @@
+# PM 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 전담 프로젝트 매니저(PM)입니다.
+
+## 운영자 컨텍스트
+- 운영자: 박재오 (1인 개발·운영, 부업 형태)
+- 사이트: jaengseung-made.com (Next.js 16, Vercel)
+- 백엔드: FastAPI + Docker (NAS 자체 서버)
+- 수익 목표: 월 100만원 이상 (단기), 구독형 수익화 (장기)
+
+## 현재 서비스 현황
+| 서비스 | 경로 | 상태 |
+|--------|------|------|
+| 홈페이지 제작 | /services/website | 운영중 |
+| 업무 자동화 | /services/automation | 운영중 |
+| 프롬프트 엔지니어링 | /services/prompt | 운영중 |
+| AI 자동화 키트 | /services/ai-kit | 운영중 |
+| 주식 자동매매 | /services/stock | 운영중 |
+| 로또 번호 추천 | /services/lotto | 운영중 |
+| 사주 AI | /saju | 운영중 |
+| 외주 개발 | /freelance | 운영중 |
+
+## 당신의 역할과 책임
+1. **우선순위 결정**: 한정된 시간(부업)에서 ROI 최대화를 위한 작업 순서 결정
+2. **로드맵 수립**: 주간·월간 개발 계획, 마일스톤 정의
+3. **기능 기획**: 신규 기능 요구사항 정의, 유저 스토리 작성
+4. **리스크 관리**: 기술 부채, 배포 리스크, 고객 이탈 위험 식별
+5. **팀 조율**: 마케팅/개발/디자인/HR 에이전트 간 작업 분배 및 의존성 관리
+6. **성과 추적**: KPI 모니터링, 지표 분석, 개선안 도출
+
+## PM 원칙
+- 1인 운영이므로 자동화 가능한 것은 무조건 자동화
+- 수익에 직결되는 작업 최우선 (문의 전환율, 결제 완료율)
+- 완벽보다 빠른 배포 → 이후 개선 반복
+- 매주 금요일 기준으로 주간 회고 및 다음 주 계획 수립
+
+## KPI 현황 (2026-03 기준)
+- 30일 목표: 크몽 서비스 3~4개 등록, 리뷰 5개+, 수주 2건+, 월매출 100만원+
+
+## 작업 요청
+$ARGUMENTS
+
+응답 형식: 우선순위 매긴 태스크 목록 → 각 태스크의 예상 임팩트와 소요 시간 → 의존성 및 주의사항 → 권장 진행 순서.
+
+---
+
+## 팀 협업 프로토콜
+
+### 나에게 오는 요청
+- HR → PM: 견적 확정 후 프로젝트 스코핑 요청
+- Developer → PM: 기술 이슈로 일정 재조정 필요 시
+- Marketing → PM: 캠페인 실행을 위한 우선순위 협의
+
+### 내가 패스하는 상황
+- 기술 구현 판단 → Developer
+- 가격/계약 조건 → HR
+- 디자인 방향 결정 → Designer
+- 코드 품질 검증 → Evaluator
+- 최종 의사결정 (수주 여부, 방향 전환) → CEO(박재오)
+
+### 에스컬레이션 기준
+- 예산 초과 가능성 30% 이상 → CEO 보고
+- 납기 2일 이상 지연 예상 → CEO + 고객 동시 통보
+- 스코프 크리프 감지 → 즉시 HR에게 알림
+
+### 파이프라인 출력 포맷 (intake·kickoff·weekly에서 호출 시)
+결과를 아래 구조로 출력:
+```
+[PM 출력]
+- 스코프: ...
+- 마일스톤: ...
+- 리스크: ...
+- 다음 단계 에이전트: [Developer / HR / Designer]
+```

.claude/commands/saju.md

@@ -0,0 +1,118 @@
+# 역술 전문가 에이전트 — 쟁승메이드
+
+당신은 **쟁승메이드**의 역술·사주 전문가입니다.
+전통 명리학 이론과 이 프로젝트의 사주 시스템 구현을 모두 깊이 이해하고 있으며,
+사주 관련 기획·콘텐츠·개발 방향을 전문가 입장에서 조언합니다.
+
+---
+
+## 명리학 핵심 지식
+
+### 기본 체계
+- **천간(天干)**: 甲乙丙丁戊己庚辛壬癸 (10간)
+- **지지(地支)**: 子丑寅卯辰巳午未申酉戌亥 (12지)
+- **오행(五行)**: 木(목)·火(화)·土(토)·金(금)·水(수)
+- **음양**: 천간/지지 각각 음양 분류
+
+### 사주팔자 구성 원칙
+| 기둥 | 기준 | 주의사항 |
+|------|------|----------|
+| 년주(年柱) | 입춘 기준 연도 교체 | 입춘 이전 출생 → 전년도 년주 |
+| 월주(月柱) | 절기(節) 기준 월 교체 | 오호둔월법(五虎遁月法) 적용 |
+| 일주(日柱) | 자정 기준 일 교체 | 기준일: 1900-01-01 = 甲戌 |
+| 시주(時柱) | 23시 기준 자시(子時) | 야자시(夜子時) 처리 필요 |
+
+### 오호둔월법 (월 천간 계산)
+년간(年干) 기준 寅月(1월 절기) 시작 천간:
+- 甲·己년 → 丙寅
+- 乙·庚년 → 戊寅
+- 丙·辛년 → 庚寅
+- 丁·壬년 → 壬寅
+- 戊·癸년 → 甲寅
+
+### 십성(十星) — 일간 기준 관계
+| 십성 | 관계 | 의미 |
+|------|------|------|
+| 비겁(比劫) | 같은 오행 | 경쟁, 형제, 독립심 |
+| 식상(食傷) | 일간이 생하는 오행 | 표현력, 자식, 창의 |
+| 재성(財星) | 일간이 극하는 오행 | 재물, 아버지, 현실감각 |
+| 관성(官星) | 일간을 극하는 오행 | 직업, 명예, 규범 |
+| 인성(印星) | 일간을 생하는 오행 | 학문, 어머니, 보호 |
+
+### 용신(用神) 결정 원칙
+- **신강(身强) 사주**: 일간 기운이 과하면 → 관성·재성·식상으로 설기(洩氣)
+- **신약(身弱) 사주**: 일간 기운이 부족하면 → 인성·비겁 중 **점수 높은(실질적으로 강한) 것**이 용신
+  - ⚠️ 낮은 점수를 용신으로 고르면 실질적 도움이 안 됨
+
+---
+
+## 이 프로젝트의 사주 시스템 구현
+
+### 파일 구조
+```
+app/saju/                    — 사주 서비스 페이지
+  page.tsx                   — 메인 입력 화면
+  result/page.tsx            — 분석 결과 화면
+  components/
+    SajuAISection.tsx        — AI 해석 섹션 (mock 감지 포함)
+lib/
+  saju-calculator.ts         — 사주팔자 계산 엔진
+  saju-types.ts              — 타입 정의
+  solar-terms.ts             — 절기 계산 (getCurrentSolarTerm)
+  ai-interpretation.ts       — 용신 추정 (estimateYongShin)
+app/api/saju/analyze/route.ts — Gemini AI 호출 API
+```
+
+### 검증 완료 케이스
+```
+입력: 1992-12-23 16:30 남성
+년주: 壬申  월주: 壬子  일주: 癸酉  시주: 庚申
+```
+이 값이 나오지 않으면 계산 로직 버그.
+
+### AI 연동 패턴
+- **모델 폴백**: `gemini-2.5-pro` → `gemini-2.5-flash` → `gemini-2.0-flash`
+- **필수 패턴**: `systemInstruction`(전체 프롬프트) + `userMessage`(트리거 한 줄) 분리
+  - 전체를 userMessage에 넣으면 응답 품질 급락
+- **Mock 감지**: `isMockInterpretation()` 함수로 캐시된 예시 데이터 판별
+- **Vercel 타임아웃**: `export const maxDuration = 60`
+
+### 날짜 계산 주의사항
+- 반드시 `Date.UTC()` 사용 — `new Date()`는 DST/타임존으로 1일 오류 발생
+- `getCurrentSolarTerm()`: 입춘(0) 기준으로 두 구간 분리 처리 필수
+  - 입춘 이후: 입춘~동지 역순 검색
+  - 입춘 이전(1월): 소한/대한 → 전년도 동지~입춘 역순 검색
+
+---
+
+## 역할 범위
+
+### 1. 사주 콘텐츠 기획
+- 새로운 분석 카테고리 제안 (궁합, 운세, 직업운, 재물운 등)
+- 마케팅 카피 — 명리학 용어를 현대인 언어로 번역
+- 서비스 차별화 포인트 발굴
+
+### 2. 해석 품질 검토
+- Gemini 프롬프트의 명리학적 정확성 검토
+- 용신·격국·십성 해석의 오류 지적
+- 사용자가 납득할 수 있는 설명 방식 제안
+
+### 3. 계산 로직 검증
+- 특정 생년월일의 사주팔자 수동 계산으로 코드 검증
+- 절기 경계 케이스 (입춘 당일, 동지 전후 등) 테스트
+- 야자시, 절기 교체일 등 예외 케이스 처리 조언
+
+### 4. 신규 기능 기획
+- 10년 대운(大運) 계산 기능
+- 월운(月運)·일운(日運) 제공
+- 궁합 서비스 설계
+- 사주 기반 직업 추천, 방위 추천 등 부가 서비스
+
+---
+
+## 작업 요청
+
+$ARGUMENTS
+
+작업 시: 명리학 이론 근거를 먼저 제시 → 현재 시스템 구현과의 정합성 확인 → 구체적 개선안 제시.
+콘텐츠 작업 시: 전문 용어는 현대어로 풀어쓰되, 신뢰감을 주는 어조 유지.

.claude/commands/weekly.md

@@ -0,0 +1,121 @@
+# /weekly — 주간 리뷰 & 계획 파이프라인
+
+당신은 **쟁승메이드**의 주간 운영 리뷰 파이프라인입니다.
+매주 금요일(또는 요청 시) 아래 스테이지를 순서대로 실행하세요.
+
+---
+
+## 회사 컨텍스트
+
+- 운영자: 박재오 | 7년차 대기업 백엔드 개발자 | 1인 운영 부업
+- 수익 목표: 월 100만원+ (단기) → 월 300만원+ (중기)
+- 플랫폼: 크몽 / 숨고 / 위시캣 동시 운영
+
+---
+
+## STAGE 1 — PM: 이번 주 현황 집계
+
+박재오가 제공하는 이번 주 정보를 바탕으로 정리:
+
+```
+[이번 주 결과]
+기간: [날짜 ~ 날짜]
+
+수익 현황:
+- 신규 수주: X건 / X원
+- 입금 완료: X원
+- 이번 달 누적: X원 / 목표 100만원 대비 X%
+
+문의 현황:
+- 신규 문의: X건
+- 응대 완료: X건
+- 견적 제출: X건
+- 계약 전환: X건 (전환율 X%)
+
+작업 현황:
+- 완료한 개발 작업:
+- 진행 중인 프로젝트:
+- 배포/릴리즈:
+
+플랫폼 현황:
+- 크몽: 리뷰 X개 / 노출 변화
+- 숨고: 연결 X건
+- 위시캣: 지원 X건 / 컨택 X건
+```
+
+---
+
+## STAGE 2 — Evaluator: 이번 주 품질 점검
+
+```
+[품질 체크]
+
+사이트 상태:
+- Vercel 배포 정상 여부
+- 주요 페이지 오류 / 콘솔 에러
+- 모바일 반응형 이슈
+
+고객 응대 품질:
+- 응답 속도 (평균 X시간)
+- 클레임 / 불만 사항
+- 개선이 필요한 커뮤니케이션 패턴
+
+코드 / 기술 부채:
+- 이번 주 발생한 기술 부채
+- 다음 주 해결이 필요한 버그
+
+```
+
+---
+
+## STAGE 3 — Marketing: 마케팅 성과 & 다음 주 실행
+
+```
+[마케팅 현황]
+
+콘텐츠:
+- 이번 주 올린 글 / 이미지:
+- 반응이 좋았던 것:
+- 반응이 저조했던 것:
+
+SEO / 노출:
+- 크몽 검색 순위 변화
+- 숨고 노출 횟수
+- 자사 사이트 방문자 (GA 기준)
+
+다음 주 마케팅 실행 계획:
+1.
+2.
+3.
+```
+
+---
+
+## STAGE 4 — PM: 다음 주 계획 + 우선순위
+
+```
+[다음 주 액션 플랜]
+기간: [날짜 ~ 날짜]
+
+TOP 5 우선순위 태스크:
+1. [임팩트 높음] — 예상 시간: Xh
+2. [임팩트 높음] — 예상 시간: Xh
+3. [임팩트 중간] — 예상 시간: Xh
+4. [임팩트 중간] — 예상 시간: Xh
+5. [임팩트 낮음 / 유지보수] — 예상 시간: Xh
+
+이번 주 배운 것 / 다음에 반복할 것:
+-
+
+이번 주 하지 말아야 할 것 (시간 낭비 패턴):
+-
+
+수익 목표 달성을 위해 이번 주 반드시 해야 할 한 가지:
+→
+```
+
+---
+
+## 이번 주 현황 (없으면 빈 칸으로 채워서 템플릿만 출력)
+
+$ARGUMENTS

.claude/settings.local.json

@@ -0,0 +1,20 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(mkdir:*)",
+      "Bash(npx tsc:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Read(//c/Users/jaeoh/.claude/skills//**)",
+      "Read(//c/Users/jaeoh/.claude/skills/taste-skill//**)",
+      "Read(//c/Users/jaeoh/.claude/skills/soft-skill//**)",
+      "Bash(git push:*)",
+      "WebFetch(domain:jaengseung-made.com)",
+      "Bash(npx vercel:*)",
+      "Bash(1:*)",
+      "Bash(npx next:*)",
+      "Bash(grep -E \"^d|\\\\.tsx$|\\\\.ts$\")",
+      "Bash(grep -E \"^d|\\\\.ts$\")"
+    ]
+  }
+}

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+.next
+.git
+.env*
+docs
+supabase
+*.md
+.vercel
+.DS_Store
+npm-debug.log*

.gitignore

@@ -39,3 +39,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vercel
+
+# git worktrees
+/.worktrees/

CLAUDE.md

@@ -0,0 +1,161 @@
+# 쟁승메이드 (JaengseungMade) — 프리미엄 개발 서비스 사이트
+
+## 프로젝트 개요
+7년차 대기업 백엔드 개발자 **박재오**가 운영하는 개발 부업 사이트.
+고객 맞춤형 서비스를 개발·판매하거나, 이미 완성된 솔루션을 구독 형태로 제공한다.
+
+## 운영자 정보
+- 이름: 박재오
+- 경력: 7년차 대기업 백엔드 개발자
+- 이메일: bgg8988@gmail.com
+- 연락처: 010-3907-1392
+- NAS 개인 서버: 로또 랩, 주식 자동매매 프로그램 등 실제 서비스 운영 중
+
+## 핵심 서비스
+| 서비스 | 경로 | 설명 |
+|--------|------|------|
+| 로또 번호 추천 | `/services/lotto` | 빅데이터/통계 기반 로또 번호 분석 제공 |
+| 주식 자동 매매 | `/services/stock` | 텔레그램 연동 주식 자동 매매 프로그램 |
+| 프롬프트 엔지니어링 | `/services/prompt` | 업무 특화 AI 프롬프트 설계 서비스 |
+| 업무 자동화 | `/services/automation` | RPA·엑셀·이메일 등 일상 업무 자동화 개발 |
+| 외주 개발 | `/freelance` | 맞춤형 소프트웨어 외주 (포트폴리오 + 문의) |
+
+## 기술 스택
+- **Framework**: Next.js 16 (App Router, TypeScript)
+- **Styling**: Tailwind CSS v4
+- **Email**: Resend (API key: 환경변수 `RESEND_API_KEY`)
+- **Analytics**: Google Analytics G-WG77RNHXRK
+- **Deployment**: Vercel
+
+## 디자인 시스템
+- **Primary**: Blue (`#1d4ed8` blue-700, `#2563eb` blue-600)
+- **Secondary**: Violet/Purple (`#7c3aed` violet-600, `#8b5cf6` violet-500)
+- **Layout**: 대시보드형 — 왼쪽 고정 사이드바 + 오른쪽 스크롤 콘텐츠
+- **Sidebar bg**: `#0f172a` (slate-900)
+- **Main bg**: `#f1f5f9` (slate-100)
+- **Cards**: white + 그림자
+
+## 파일 구조
+```
+app/
+  layout.tsx              — 루트 레이아웃 (메타데이터, 폰트, GA, DashboardShell 래핑)
+  page.tsx                — 홈 대시보드 (서비스 카드 그리드)
+  globals.css             — 전역 스타일 + CSS 변수
+  components/
+    DashboardShell.tsx    — 클라이언트: 사이드바 + 메인 영역 레이아웃 래퍼
+    Sidebar.tsx           — 클라이언트: 왼쪽 사이드바 내비게이션
+    ContactForm.tsx       — 클라이언트: 문의 폼 (Resend 연동)
+  services/
+    lotto/page.tsx        — 로또 번호 추천 서비스 상세
+    stock/page.tsx        — 주식 자동 매매 서비스 상세
+    prompt/page.tsx       — 프롬프트 엔지니어링 서비스 상세
+    automation/page.tsx   — 업무 자동화 서비스 상세
+  freelance/
+    page.tsx              — 외주 개발 포트폴리오 + 문의 폼
+  api/
+    contact/route.ts      — POST: 문의 이메일 발송 (Resend)
+```
+
+## 쟁승메이드 Co. — AI 에이전트 팀 (`.claude/commands/`)
+
+쟁승메이드는 **회사 단위 AI 팀**으로 운영됩니다.
+각 에이전트는 고유 역할과 협업 프로토콜을 보유하며, 워크플로우 커맨드로 팀 단위 파이프라인을 실행합니다.
+
+### 조직도
+```
+박재오 (대표/CEO)
+    ├── /pm          프로젝트 매니저    — 일정·우선순위·리소스 조율
+    ├── /hr          영업·CS 전문가     — 고객 문의·견적·계약·클레임
+    ├── /developer   풀스택 개발자      — 개발·버그·API 설계
+    ├── /designer    UI/UX 디자이너     — 화면·에셋·브랜딩
+    ├── /marketing   마케팅 전문가      — 성장·홍보·카피·키워드
+    ├── /evaluator   품질 보증 전문가   — 코드리뷰·UX·SEO·보안
+    └── /saju        사주·명리학 전문가 — 사주 기능 설계·검증
+```
+
+### 워크플로우 파이프라인 (팀 자동 조율)
+상황별로 여러 에이전트가 순서대로 실행되는 자동화 파이프라인.
+
+| 커맨드 | 실행 파이프라인 | 사용 시점 |
+|--------|----------------|-----------|
+| `/intake [문의내용]` | HR → PM → Developer → HR | 신규 고객 문의 접수 시 |
+| `/followup [컨택내용]` | HR → PM → Developer → HR | 지원서에 클라이언트가 컨택 시 |
+| `/kickoff [프로젝트정보]` | PM → Developer → Designer → HR | 계약 확정 후 프로젝트 시작 시 |
+| `/weekly [이번주현황]` | PM → Evaluator → Marketing → PM | 매주 금요일 주간 리뷰 |
+| `/campaign [목적/아이디어]` | Marketing → Marketing(카피) → Designer → Marketing(실행) | 마케팅 캠페인 기획·실행 시 |
+
+### 개별 에이전트 호출
+```
+/marketing 크몽 홈페이지 제작 서비스 소개글 작성해줘
+/pm 이번 주 할 일 우선순위 잡아줘
+/evaluator 현재 랜딩 페이지 전환율 이슈 점검해줘
+/developer automation 페이지에 엑셀 다운로드 기능 추가해줘
+/designer hero 섹션 리디자인해줘
+/hr 고객이 홈페이지 제작 문의를 남겼어, 견적서 써줘
+/saju 대운 계산 기능을 추가하고 싶어, 로직 설계해줘
+```
+
+### 에스컬레이션 체계
+- 기술 판단 → `/developer`
+- 가격/계약 판단 → `/hr`
+- 일정/우선순위 → `/pm`
+- 품질/보안 → `/evaluator`
+- 최종 의사결정 → CEO(박재오) 직접 판단
+
+---
+
+## 개발 규칙
+- 서비스 페이지 공통 구조: Hero → Features → Pricing → FAQ → CTA
+- 구매/신청 CTA는 `/freelance` 페이지 ContactForm으로 연결 (service 파라미터로 pre-fill)
+- 사이드바는 `usePathname`으로 활성 경로 감지
+- 모바일: 햄버거 메뉴로 사이드바 토글 (overlay 포함)
+- 이미지 없이 아이콘·그래디언트·SVG로 시각적 완성도 유지
+
+---
+
+## 사주 시스템 (`/app/saju`, `/lib/saju-*.ts`)
+
+### AI 연동 (`app/api/saju/analyze/route.ts`)
+- **AI**: Google Gemini (`@google/generative-ai`)
+- **모델 폴백 순서**: `gemini-2.5-pro` → `gemini-2.5-flash` → `gemini-2.0-flash`
+- **핵심 패턴**: `systemInstruction`(프롬프트)과 `userMessage`(트리거) 분리 필수
+  - 전체 프롬프트를 user 메시지로 보내면 응답 품질 저하
+- **Windows 환경**: `dotenv`로 `.env.local`을 명시적 로드 (`override: true`)
+- **Vercel 타임아웃**: `export const maxDuration = 60` (Pro 플랜 기준)
+- **Mock 감지**: `isMockInterpretation()` 함수로 DB에 캐시된 예시 데이터 판별
+  - `SajuAISection.tsx`에서 mock이면 `validSaved = null`로 처리 → API 재호출
+  - 재생성 버튼(🔄)으로 수동 재생성 가능
+
+### 사주팔자 계산 원칙 (검증 완료)
+
+#### `lib/saju-calculator.ts`
+| 항목 | 올바른 값 | 주의사항 |
+|------|-----------|----------|
+| **일주 기준일** | 1900-01-01 = 甲戌 (stem=0, branch=10) | 丙寅(2,2)은 오답 |
+| **날짜 계산** | `Date.UTC()` 사용 필수 | `new Date()`는 DST/타임존 오차로 1일 오류 발생 |
+| **월 천간** | 오호둔월법(五虎遁月法) 공식 사용 | `yearStemIndex * 2 + branchIndex`는 子月/丑月 오답 |
+| **입춘 기준** | `getSolarTermDate(year, 0)`으로 입춘일 획득 후 비교 | 입춘 이전 출생 → 전년도 년주 사용 |
+
+**오호둔월법 공식** (`getMonthGanzi` 내):
+```typescript
+const startStem = ((yearStemIndex % 5) * 2 + 2) % 10; // 寅月 시작 천간
+const stemIndex = (startStem + (branchIndex - 2 + 12) % 12) % 10;
+```
+
+#### `lib/solar-terms.ts` — `getCurrentSolarTerm()`
+- 반드시 입춘(0) 기준으로 두 구간 분리 처리
+  - **입춘 이후(2~12월)**: 입춘(0)~동지(21) 역순 검색
+  - **입춘 이전(1월)**: 이 해의 소한(22)/대한(23) → 전년도 동지(21)~입춘(0) 역순 검색
+- 기존 단순 역순(i=23→0) 방식은 12월 날짜에서 丑月 오판하는 치명적 버그
+- 날짜 비교는 `Date.UTC()` 사용
+
+#### `lib/ai-interpretation.ts` — `estimateYongShin()`
+- **신약 사주 용신**: 인성/비겁 중 **점수가 높은(강하게 존재하는)** 것이 용신
+  - 내림차순 정렬: `candidates.sort((a, b) => b.score - a.score)`
+  - 낮은 점수를 용신으로 고르면 실질적 도움을 못 줌
+
+### 검증 케이스 (1992-12-23 16:30 남성)
+```
+년주: 壬申  월주: 壬子  일주: 癸酉  시주: 庚申
+```
+이 결과가 나오면 계산 로직 정상. 다른 값이면 위 원칙 재확인.

CONTENT/ARCHITECTURE_EBAY_PARTS_TOOL.md

@@ -0,0 +1,969 @@
+# 이베이 자동차 부품 리스팅 AI 자동화 툴 — 기술 아키텍처 설계서
+
+> 작성일: 2026-04-02  
+> 작성자: Developer Agent (쟁승메이드)  
+> 버전: v1.0 Draft
+
+---
+
+## 목차
+1. [시스템 아키텍처 설계](#1-시스템-아키텍처-설계)
+2. [기술 스택 선정 및 근거](#2-기술-스택-선정-및-근거)
+3. [핵심 모듈별 상세 설계](#3-핵심-모듈별-상세-설계)
+4. [DB 스키마 설계](#4-db-스키마-설계)
+5. [API 엔드포인트 설계](#5-api-엔드포인트-설계)
+6. [계정 안전성 설계](#6-계정-안전성-설계)
+7. [리스크 & 트레이드오프](#7-리스크--트레이드오프)
+
+---
+
+## 1. 시스템 아키텍처 설계
+
+### 1.1 전체 시스템 구성도
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│  클라이언트 (PC 브라우저)                                              │
+│  Next.js App Router — Tailwind CSS                                   │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐               │
+│  │ 부품 검색  │ │ 결과 대시 │ │ 리스팅    │ │ 히스토리  │               │
+│  │ 입력 폼   │ │ 보드     │ │ 편집기    │ │ /설정    │               │
+│  └──────────┘ └──────────┘ └──────────┘ └──────────┘               │
+└──────────────────────────┬───────────────────────────────────────────┘
+                           │ HTTPS (Vercel Edge)
+                           ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  Next.js API Routes (Vercel Serverless)                              │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐               │
+│  │ /api/     │ │ /api/     │ │ /api/     │ │ /api/     │               │
+│  │ search    │ │ analyze   │ │ listing   │ │ price     │               │
+│  └─────┬────┘ └─────┬────┘ └─────┬────┘ └─────┬────┘               │
+└────────┼────────────┼────────────┼────────────┼─────────────────────┘
+         │            │            │            │
+         ▼            ▼            ▼            ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  크롤러 워커 (별도 서버 — Docker/VPS)                                  │
+│                                                                      │
+│  ┌─────────────────┐   ┌─────────────────┐   ┌──────────────────┐   │
+│  │ Playwright 엔진  │   │ 사이트별 어댑터   │   │ 프록시 로테이터   │   │
+│  │ (브라우저 풀)     │   │ RockAuto/Amazon │   │ + User-Agent 풀  │   │
+│  │                  │   │ PartsGeek/eBay  │   │                  │   │
+│  └─────────────────┘   └─────────────────┘   └──────────────────┘   │
+│                                                                      │
+│  ┌─────────────────┐   ┌─────────────────┐                          │
+│  │ BullMQ 큐 관리   │   │ Redis           │                          │
+│  │ (작업 스케줄링)   │   │ (캐시/큐 백엔드) │                          │
+│  └─────────────────┘   └─────────────────┘                          │
+└──────────────────────────────────────────────────────────────────────┘
+         │
+         ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  AI 분석 파이프라인                                                    │
+│                                                                      │
+│  ┌─────────────────┐   ┌─────────────────┐   ┌──────────────────┐   │
+│  │ Claude API       │   │ 구조화 출력 파서 │   │ Fitment 검증기   │   │
+│  │ (주 분석 엔진)   │   │ (JSON Schema)   │   │ (Cross-ref)      │   │
+│  └─────────────────┘   └─────────────────┘   └──────────────────┘   │
+└──────────────────────────────────────────────────────────────────────┘
+         │
+         ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  데이터 저장                                                          │
+│                                                                      │
+│  ┌─────────────────┐   ┌─────────────────┐                          │
+│  │ Supabase         │   │ Redis Cache     │                          │
+│  │ (PostgreSQL)     │   │ (TTL 기반)      │                          │
+│  │ - 검색 히스토리   │   │ - 크롤링 결과   │                          │
+│  │ - 부품 데이터     │   │ - 환율 캐시     │                          │
+│  │ - 리스팅 초안     │   │ - 세션 상태     │                          │
+│  │ - 사용자 설정     │   │                 │                          │
+│  └─────────────────┘   └─────────────────┘                          │
+└──────────────────────────────────────────────────────────────────────┘
+```
+
+### 1.2 데이터 흐름도 (메인 파이프라인)
+
+```
+[사용자 입력]
+  품번: "16610-0H040"
+  품명: "Fuel Pump Assembly"
+       │
+       ▼
+[1단계: 초기 검색 — 2~5초]
+  ├─ Supabase 캐시 조회 (동일 품번 24시간 이내 검색 존재?)
+  │   ├─ HIT → 캐시 결과 즉시 반환 + 백그라운드 갱신 옵션 제공
+  │   └─ MISS → 크롤링 작업 생성
+  │
+       ▼
+[2단계: 크롤링 큐 등록 — 즉시]
+  ├─ BullMQ에 작업 등록
+  ├─ 클라이언트에 jobId 반환 → SSE/Polling으로 진행률 추적
+  │
+       ▼
+[3단계: 병렬 크롤링 — 15~45초]
+  ├─ [Worker 1] RockAuto 검색 → 가격, 호환 차종, 이미지
+  ├─ [Worker 2] PartsGeek 검색 → 가격, 리뷰 수
+  ├─ [Worker 3] Amazon 검색 → 가격, 판매량 추정
+  ├─ [Worker 4] eBay 기존 리스팅 검색 → 경쟁 가격, 판매량
+  ├─ [Worker 5] OEM DB 검색 (partsouq) → 순정 번호, 호환 번호
+  └─ 각 Worker: 성공/실패 개별 보고, 부분 실패 허용
+       │
+       ▼
+[4단계: AI 분석 — 5~15초]
+  ├─ 수집 데이터 정규화 + 병합
+  ├─ Claude API 호출 (구조화 출력 요청)
+  │   ├─ Fitment 매칭 (차종별 연도/모델/엔진)
+  │   ├─ 최적 리스팅 제목 생성 (80자 이내)
+  │   ├─ Item Specifics 추출
+  │   └─ 가격 추천 (시장가 분석 기반)
+  ├─ 정확도 검증 (Cross-reference 체크)
+  │
+       ▼
+[5단계: 가격 계산 — 1초]
+  ├─ 환율 API (KRW/USD)
+  ├─ 원가 + 관세(8%) + 국제배송비 + 이베이 수수료(13%) + 마진
+  ├─ 경쟁 가격 대비 포지셔닝
+  │
+       ▼
+[6단계: 리스팅 생성 — 즉시]
+  ├─ eBay 리스팅 템플릿 조립
+  ├─ Fitment Chart (Year/Make/Model/Engine 테이블)
+  ├─ Supabase에 초안 저장
+  └─ 사용자에게 최종 결과 반환 (편집 가능)
+```
+
+### 1.3 배포 아키텍처
+
+```
+┌─────────────────────────────────┐
+│       Vercel (프론트 + API)      │
+│  Next.js App Router             │
+│  - SSR 페이지                    │
+│  - API Routes (오케스트레이터)   │
+│  - Edge Functions (경량 API)    │
+│  maxDuration: 60s (Pro)         │
+└──────────────┬──────────────────┘
+               │ HTTPS
+               ▼
+┌─────────────────────────────────┐
+│    VPS (크롤러 전용 서버)        │
+│    Docker Compose               │
+│                                 │
+│  ┌───────────┐ ┌──────────┐    │
+│  │ crawler   │ │ Redis    │    │
+│  │ (Node.js  │ │ 7.x     │    │
+│  │ +Playwright│ │          │    │
+│  │ +BullMQ)  │ │          │    │
+│  └───────────┘ └──────────┘    │
+│                                 │
+│  비용: ~$10~20/월 (Contabo/     │
+│  Hetzner 2vCPU/4GB)            │
+└─────────────────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────┐
+│       Supabase (DB + Auth)      │
+│  PostgreSQL + Row Level Security│
+│  Free tier → Pro 필요 시 전환   │
+└─────────────────────────────────┘
+```
+
+**배포 분리 이유:**
+- Vercel Serverless는 최대 60초 타임아웃 (Pro). 크롤링은 45초 이상 소요 가능
+- Playwright는 ~400MB 브라우저 바이너리 필요. Vercel 함수 크기 제한(50MB) 초과
+- 크롤러 서버를 분리하면 IP 관리, 프록시 설정, 브라우저 풀 관리가 자유로움
+- Vercel API Routes는 오케스트레이터 역할만 수행 (크롤러 서버에 작업 위임)
+
+---
+
+## 2. 기술 스택 선정 및 근거
+
+### 2.1 프론트엔드
+
+| 항목 | 선택 | 근거 |
+|------|------|------|
+| 프레임워크 | **Next.js 16 App Router** | 기존 jaengseung-made 스택 동일. SSR/ISR, API Routes 통합 |
+| 스타일링 | **Tailwind CSS v4** | 기존 스택. 빠른 프로토타이핑, 일관된 디자인 시스템 |
+| 상태 관리 | **React 19 내장 (useState/useReducer)** | 복잡한 글로벌 상태 불필요. 폼 + 결과 뷰 중심 |
+| 실시간 갱신 | **SSE (Server-Sent Events)** | 크롤링 진행률 실시간 표시. WebSocket 대비 구현 단순 |
+
+### 2.2 백엔드 (오케스트레이터)
+
+| 항목 | 선택 | 근거 |
+|------|------|------|
+| API | **Next.js API Routes** | 별도 FastAPI 불필요. 크롤러만 분리하면 API Routes로 충분 |
+| 인증 | **Supabase Auth** | 기존 jaengseung-made 인증 체계 재사용 |
+| 비동기 통신 | **HTTP + SSE** | Vercel API → 크롤러 서버 HTTP 호출, 클라이언트에는 SSE로 진행률 전달 |
+
+**FastAPI 별도 서버 검토 결과: 불채택**
+- 크롤러 서버가 이미 분리되므로, API 오케스트레이션만 하는 레이어에 FastAPI를 또 세우면 인프라 복잡도만 증가
+- Next.js API Routes + Vercel Serverless로 오케스트레이션 충분
+- 단, 향후 사용량 급증 시 API 레이어 분리 고려 가능
+
+### 2.3 크롤러 엔진
+
+| 항목 | Playwright | Puppeteer |
+|------|-----------|-----------|
+| **브라우저 지원** | Chromium, Firefox, WebKit | Chromium only |
+| **Anti-bot 우회** | stealth 플러그인 생태계 넓음 | puppeteer-extra-stealth 있음 |
+| **안정성** | Microsoft 관리, 업데이트 빠름 | Google Chrome팀, 안정적 |
+| **멀티 컨텍스트** | 브라우저 하나에 격리된 컨텍스트 다수 생성 가능 | 유사하나 API 덜 직관적 |
+| **Docker 지원** | 공식 Docker 이미지 제공 | 수동 설정 필요 |
+| **선택** | **Playwright** | - |
+
+**Playwright 선택 이유:**
+1. `browser.newContext()`로 사이트별 격리된 세션 관리 용이 (쿠키/스토리지 분리)
+2. `playwright-extra` + `stealth` 플러그인으로 headless 탐지 우회 성숙
+3. 자동 대기(`waitForSelector`, `waitForLoadState`) API가 크롤링에 최적화
+4. Firefox 컨텍스트를 섞어 쓸 수 있어 fingerprint 다양화 가능
+
+### 2.4 AI 엔진
+
+| 항목 | Claude API (Anthropic) | OpenAI API |
+|------|----------------------|------------|
+| **구조화 출력** | Tool Use로 JSON Schema 강제 가능 | JSON Mode / Function Calling |
+| **긴 컨텍스트** | 200K 토큰 (크롤링 데이터 대량 입력에 유리) | 128K (GPT-4o) |
+| **정확도** | 복잡한 추론/분류에 강점 | 범용적으로 우수 |
+| **비용 (입/출력)** | Sonnet: $3/$15 per 1M tok | GPT-4o: $2.5/$10 per 1M tok |
+| **기존 의존성** | jaengseung-made에 `@anthropic-ai/sdk` 이미 설치 | `openai` 패키지도 설치됨 |
+| **선택** | **Claude API (주)** + OpenAI (폴백) | - |
+
+**Claude 선택 이유:**
+1. 200K 컨텍스트 윈도우 — 5개 사이트 크롤링 결과를 한 번에 분석 가능
+2. Tool Use 기반 구조화 출력 — Fitment 테이블, Item Specifics 등 복잡한 JSON 구조 강제
+3. 자동차 부품 도메인의 정밀한 분류/추론에서 강점 (호환 차종 판단은 환각 최소화 중요)
+4. 기존 프로젝트에 SDK 설치됨 — 추가 의존성 없음
+
+**비용 추정 (건당):**
+- 입력: ~8K 토큰 (5개 사이트 크롤링 결과 요약) = ~$0.024
+- 출력: ~2K 토큰 (구조화된 리스팅 정보) = ~$0.030
+- **건당 약 $0.05~0.06 (약 70~80원)**
+
+### 2.5 큐/비동기 처리
+
+| 항목 | 선택 | 근거 |
+|------|------|------|
+| 작업 큐 | **BullMQ** | Node.js 네이티브, Redis 기반, 재시도/우선순위/스케줄링 내장 |
+| 큐 백엔드 | **Redis 7** | BullMQ 필수. 크롤링 결과 TTL 캐시 겸용 |
+| 대안 검토 | ~~RabbitMQ~~ | 오버스펙. Node.js 단일 언어 환경에서 BullMQ가 최적 |
+| 대안 검토 | ~~Vercel Queue~~ | 아직 베타, 커스텀 재시도 로직 제한적 |
+
+**BullMQ 작업 흐름:**
+```
+Vercel API → HTTP POST → 크롤러 서버 /jobs 엔드포인트
+  → BullMQ 큐에 작업 등록
+  → Worker가 Playwright로 크롤링 실행
+  → 완료 시 Redis에 결과 저장 + Webhook/SSE로 Vercel에 통지
+  → Vercel API가 클라이언트 SSE로 결과 전달
+```
+
+### 2.6 기술 스택 종합표
+
+| 레이어 | 기술 | 비용 |
+|--------|------|------|
+| 프론트엔드 | Next.js 16 + Tailwind v4 + React 19 | Vercel Free/Pro |
+| API 오케스트레이터 | Next.js API Routes (Vercel Serverless) | Vercel에 포함 |
+| 크롤러 서버 | Node.js + Playwright + BullMQ | VPS $10~20/월 |
+| 캐시/큐 | Redis 7 (Docker) | VPS에 포함 |
+| AI | Claude API (Anthropic) | ~$0.05/건 |
+| DB | Supabase (PostgreSQL) | Free → Pro |
+| 환율 | ExchangeRate-API 또는 한국은행 API | 무료 |
+| 배포 | Vercel (프론트) + Docker Compose (크롤러) | 합계 ~$15~25/월 |
+
+---
+
+## 3. 핵심 모듈별 상세 설계
+
+### 3.1 크롤러 모듈
+
+#### 아키텍처: 어댑터 패턴
+
+각 대상 사이트를 독립된 어댑터로 구현. 공통 인터페이스를 통해 결과를 정규화.
+
+```
+CrawlerOrchestrator
+  ├── RockAutoAdapter      (가격, 호환차종, 이미지)
+  ├── PartsGeekAdapter     (가격, 리뷰)
+  ├── AmazonAdapter        (가격, 판매량)
+  ├── EbaySearchAdapter    (경쟁 리스팅, 판매량, 가격)
+  ├── PartsouqAdapter      (OEM 번호, 호환 번호, 차종)
+  └── (확장 가능: AutoZone, 7zap 등)
+```
+
+#### 사이트별 크롤링 전략
+
+| 사이트 | 방식 | 난이도 | 핵심 데이터 | 비고 |
+|--------|------|--------|------------|------|
+| **RockAuto** | Playwright (동적 렌더링) | 중 | 가격, Fitment, 이미지 URL | 카테고리 네비게이션 필요 |
+| **PartsGeek** | HTTP + HTML 파싱 | 하 | 가격, 리뷰 수 | 정적 HTML, 단순 파싱 가능 |
+| **Amazon** | Playwright (봇 감지 강함) | 상 | 가격, BSR, 리뷰 | CAPTCHA 빈번, 폴백 필요 |
+| **eBay** | **eBay Browse API (공식)** | 하 | 경쟁가, 판매량, 카테고리 | API 우선, 크롤링 최소화 |
+| **partsouq** | HTTP + JSON API | 중 | OEM 번호, 호환 번호 | 내부 API 엔드포인트 활용 |
+
+#### 공통 어댑터 인터페이스
+
+```
+Input:
+  - partNumber: string        (품번)
+  - partName: string          (품명, 영문)
+  - options?: { timeout, proxy, userAgent }
+
+Output (정규화):
+  - source: string            (사이트명)
+  - status: "success" | "partial" | "failed"
+  - products: Array<{
+      title: string
+      price: { amount: number, currency: "USD" | "KRW" }
+      imageUrls: string[]
+      brand: string
+      oemNumbers: string[]     (호환 품번)
+      fitment: Array<{ year: string, make: string, model: string, engine?: string }>
+      url: string
+      reviews?: { count: number, rating: number }
+      salesRank?: number
+    }>
+  - metadata: { crawledAt: ISO8601, responseTime: number }
+  - error?: string
+```
+
+#### Rate Limiting
+
+| 사이트 | 요청 간격 | 일일 한도 | 근거 |
+|--------|----------|----------|------|
+| RockAuto | 3~5초 (랜덤) | 200회 | 공격적 봇 감지 |
+| PartsGeek | 1~2초 | 500회 | 상대적 관대 |
+| Amazon | 5~10초 (랜덤) | 100회 | CAPTCHA 트리거 방지 |
+| eBay | API Rate Limit 준수 | 5000 calls/day | 공식 API 사용 |
+| partsouq | 2~3초 | 300회 | 내부 API 부하 방지 |
+
+#### 캐싱 전략
+
+- **Redis TTL 캐시**: 동일 품번 크롤링 결과를 24시간 캐시
+- **캐시 키**: `crawl:{site}:{partNumber}` (예: `crawl:rockauto:16610-0H040`)
+- **캐시 히트 시**: 즉시 반환 + "갱신" 버튼으로 수동 리크롤 가능
+- **Supabase 장기 캐시**: 30일간 부품 마스터 데이터 (OEM 번호, Fitment) 보관
+
+#### 차단 대응 (폴백 계층)
+
+```
+1차: Playwright + Stealth 플러그인 (기본)
+  ↓ 차단 감지 시
+2차: 프록시 로테이션 (주거용 프록시 풀)
+  ↓ 차단 지속 시  
+3차: 해당 사이트 스킵 + 나머지 사이트 결과로 분석 진행
+  ↓ 핵심 사이트(eBay) 차단 시
+4차: eBay 공식 API로 폴백 (Browse API / Finding API)
+```
+
+#### 에러 처리
+
+- 각 어댑터는 독립 실행. 1개 사이트 실패해도 나머지 정상 진행
+- 최소 2개 사이트 성공 시 AI 분석 진행 가능
+- 전체 실패 시: 사용자에게 수동 입력 폼 제공 (URL 붙여넣기)
+
+---
+
+### 3.2 AI 분석 모듈
+
+#### 프롬프트 설계 방향
+
+**System Instruction (고정)**:
+```
+역할: 자동차 부품 이베이 리스팅 전문가
+- 입력된 크롤링 데이터를 분석하여 이베이 리스팅 정보를 생성
+- Fitment 정보는 반드시 크롤링 데이터에서 확인된 차종만 포함 (추측 금지)
+- 이베이 Title은 80자 이내, 핵심 키워드 우선 배치
+- Item Specifics는 eBay Motors Parts & Accessories 카테고리 기준
+```
+
+**User Message (동적 — 크롤링 결과 포함)**:
+```
+품번: {partNumber}
+품명: {partName}
+
+[크롤링 결과]
+--- RockAuto ---
+{rockAutoData}
+
+--- eBay 경쟁 리스팅 ---
+{ebayData}
+
+--- OEM DB ---
+{oemData}
+
+위 데이터를 분석하여 다음을 생성해주세요:
+1. 이베이 최적 제목 (3개 후보)
+2. Item Specifics
+3. Fitment Chart
+4. 가격 추천
+```
+
+#### 구조화 출력 (Tool Use Schema)
+
+Claude API의 Tool Use를 활용하여 JSON 구조를 강제:
+
+```
+Tool Name: generate_ebay_listing
+
+Parameters Schema:
+{
+  titles: string[3]                    // 제목 후보 3개
+  recommendedTitle: string             // 추천 제목 (80자 이내)
+  category: {
+    id: number                         // eBay 카테고리 ID
+    name: string                       // 카테고리명
+  }
+  itemSpecifics: {
+    brand: string
+    manufacturerPartNumber: string
+    interchangePartNumber: string      // OE/OEM 호환 번호
+    placement: string                  // "Front", "Rear" 등
+    type: string                       // 부품 유형
+    material: string
+    color: string
+    warranty: string
+    country: string                    // 제조국
+    [key: string]: string              // 추가 Specifics
+  }
+  fitment: Array<{
+    year: string                       // "2007-2012" 범위 가능
+    make: string                       // "Toyota"
+    model: string                      // "Camry"
+    engine: string                     // "2.4L L4"
+    trim?: string                      // "LE, SE, XLE"
+    notes?: string                     // 특이사항
+  }>
+  priceAnalysis: {
+    competitorAvg: number              // 경쟁 평균가 (USD)
+    competitorRange: [number, number]  // 최저~최고
+    recommendedPrice: number           // 추천 판매가
+    reasoning: string                  // 가격 근거
+  }
+  description: string                  // HTML 상품 설명
+  confidence: {
+    fitment: "high" | "medium" | "low"
+    pricing: "high" | "medium" | "low"
+    overall: "high" | "medium" | "low"
+  }
+  warnings: string[]                   // 주의사항 (불확실한 정보 등)
+}
+```
+
+#### 정확도 검증 (Multi-source Cross-reference)
+
+1. **Fitment 교차 검증**: 2개 이상 소스에서 확인된 차종만 "high confidence"
+2. **OEM 번호 검증**: partsouq/7zap 데이터와 크롤링 결과 대조
+3. **가격 이상치 감지**: 경쟁 평균 대비 +-50% 이상 차이나면 경고
+4. **confidence 레벨**:
+   - `high`: 3개 이상 소스 일치
+   - `medium`: 2개 소스 일치
+   - `low`: 1개 소스만 확인 → 사용자에게 수동 확인 요청
+
+#### AI 폴백 전략
+
+```
+1차: Claude Sonnet 4 (비용 효율 + 정확도 밸런스)
+  ↓ 실패/타임아웃 시
+2차: Claude Haiku (빠른 응답, 약간의 정확도 트레이드오프)
+  ↓ Anthropic API 장애 시  
+3차: OpenAI GPT-4o (폴백)
+```
+
+---
+
+### 3.3 가격 계산 모듈
+
+#### Input/Output
+
+```
+Input:
+  - sourcePrices: Array<{ source, price, currency }>  // 크롤링된 가격들
+  - competitorPrices: Array<{ price, soldCount }>      // eBay 경쟁 가격
+  - userSettings: { marginPercent, shippingMethod, customsRate }
+
+Output:
+  - costBreakdown: {
+      purchasePrice: number (USD)     // 구매가 (최저가 기준)
+      exchangeRate: number            // 적용 환율
+      purchasePriceKRW: number        // 원화 구매가
+      customsDuty: number (KRW)       // 관세 (8% 기본)
+      customsTax: number (KRW)        // 부가세 (10%)
+      domesticShipping: number (KRW)  // 국내 배송비
+      intlShipping: number (USD)      // 국제 배송비
+      ebayFee: number (USD)           // eBay 수수료 (13.25%)
+      paypalFee: number (USD)         // PayPal 수수료 (3.49% + $0.49)
+      totalCost: number (USD)         // 총 원가
+    }
+  - pricing: {
+      breakEvenPrice: number (USD)    // 손익분기점
+      recommendedPrice: number (USD)  // 추천가 (마진 반영)
+      competitorAvg: number (USD)     // 경쟁 평균
+      marginPercent: number           // 예상 마진율
+      profitPerUnit: number (USD)     // 건당 예상 수익
+    }
+  - comparison: Array<{ source, price, diff }>  // 소스별 가격 비교표
+```
+
+#### 환율 처리
+
+- **주 API**: ExchangeRate-API (무료 1,500회/월) 또는 한국은행 Open API
+- **캐시**: Redis에 1시간 TTL로 환율 캐시
+- **폴백**: 캐시 만료 + API 장애 시 최근 캐시값 사용 (24시간 이내)
+- **사용자 수동 입력**: 환율 직접 입력 옵션 제공
+
+#### 관세/수수료 테이블
+
+| 항목 | 기본값 | 사용자 조정 가능 | 비고 |
+|------|--------|----------------|------|
+| 관세율 | 8% | O | 자동차 부품 HS Code 기준 |
+| 부가세 | 10% | X | 고정 |
+| eBay Final Value Fee | 13.25% | O | 카테고리별 상이 |
+| PayPal/Managed Payments | 3.49% + $0.49 | O | 결제 방식별 상이 |
+| 국제 배송비 | 무게 기반 계산 | O | EMS/K-Packet/FedEx 선택 |
+| 이베이 프로모션 할인 | 0% | O | Promoted Listings 비용 |
+
+---
+
+### 3.4 리스팅 생성 모듈
+
+#### eBay 카테고리 매핑
+
+주요 자동차 부품 카테고리 매핑 테이블 (DB 저장):
+
+| 부품 유형 | eBay Category ID | Category Path |
+|-----------|-----------------|---------------|
+| Fuel Pump | 33554 | eBay Motors > Parts > Fuel System > Fuel Pumps |
+| Brake Pad | 33560 | eBay Motors > Parts > Brakes > Pads & Shoes |
+| Air Filter | 33548 | eBay Motors > Parts > Air Intake > Filters |
+| ... | ... | 약 200개 주요 카테고리 사전 매핑 |
+
+- AI가 품명 기반으로 1차 카테고리 추천
+- 사전 매핑 테이블과 교차 검증
+- 사용자가 최종 선택/수정 가능
+
+#### Item Specifics 템플릿
+
+카테고리별 필수/선택 Item Specifics 템플릿:
+
+```
+[공통 필수]
+- Brand
+- Manufacturer Part Number
+- Interchange Part Number
+- Placement on Vehicle
+- Warranty
+- Country/Region of Manufacture
+- UPC (없으면 "Does Not Apply")
+
+[카테고리별 추가]
+- Fuel Pump: Fuel Type, Number of Outlets, Voltage
+- Brake Pad: Position (Front/Rear), Pad Material, Thickness
+```
+
+#### Fitment 테이블 출력 형식
+
+eBay Parts Compatibility 형식에 맞춘 CSV/테이블:
+
+```
+Year | Make | Model | Trim | Engine | Notes
+2007 | Toyota | Camry | LE, SE, XLE | 2.4L L4 DOHC | 
+2008 | Toyota | Camry | LE, SE, XLE | 2.4L L4 DOHC |
+2008 | Toyota | Camry | SE, XLE | 3.5L V6 DOHC |
+...
+```
+
+- eBay의 ePID (Product ID) 매칭 시도 (정확한 Fitment 보장)
+- CSV 다운로드 기능 (eBay Bulk Upload용)
+- 수동 행 추가/삭제 편집 기능
+
+#### 최종 출력 형태
+
+사용자에게 보여지는 리스팅 프리뷰:
+
+```
+[복사 가능 영역]
+  Title: [편집 가능]
+  Category: [드롭다운 선택]
+  Item Specifics: [테이블 형태, 각 필드 편집 가능]
+  Price: [입력 필드, 원가 계산기 연동]
+  Fitment Chart: [테이블, 행 추가/삭제 가능]
+  Description: [HTML 프리뷰 + 편집]
+
+[액션 버튼]
+  - "전체 복사" (클립보드)
+  - "CSV 다운로드" (Fitment)
+  - "초안 저장" (Supabase)
+  - "히스토리에서 불러오기"
+```
+
+---
+
+## 4. DB 스키마 설계 (Supabase / PostgreSQL)
+
+### 4.1 테이블 구조
+
+```sql
+-- 사용자 설정
+CREATE TABLE user_settings (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  default_margin_percent DECIMAL(5,2) DEFAULT 30.00,
+  default_shipping_method TEXT DEFAULT 'k-packet',
+  default_customs_rate DECIMAL(5,2) DEFAULT 8.00,
+  ebay_fee_percent DECIMAL(5,2) DEFAULT 13.25,
+  preferred_currency TEXT DEFAULT 'USD',
+  created_at TIMESTAMPTZ DEFAULT now(),
+  updated_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(user_id)
+);
+
+-- 검색 히스토리
+CREATE TABLE search_history (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  part_number TEXT NOT NULL,
+  part_name TEXT NOT NULL,
+  status TEXT DEFAULT 'pending',  -- pending, crawling, analyzing, completed, failed
+  crawl_sources JSONB,            -- 어떤 사이트를 크롤링했는지
+  result_summary JSONB,           -- 요약 정보 (가격 범위, 호환 차종 수 등)
+  created_at TIMESTAMPTZ DEFAULT now(),
+  completed_at TIMESTAMPTZ
+);
+CREATE INDEX idx_search_history_user ON search_history(user_id, created_at DESC);
+CREATE INDEX idx_search_history_part ON search_history(part_number);
+
+-- 부품 캐시 (크롤링 결과 장기 보관)
+CREATE TABLE parts_cache (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  part_number TEXT NOT NULL,
+  source TEXT NOT NULL,           -- 'rockauto', 'partsgeek', 'amazon', 'ebay', 'partsouq'
+  raw_data JSONB NOT NULL,        -- 크롤링 원본 데이터
+  normalized_data JSONB NOT NULL, -- 정규화된 데이터
+  crawled_at TIMESTAMPTZ DEFAULT now(),
+  expires_at TIMESTAMPTZ DEFAULT (now() + INTERVAL '30 days'),
+  UNIQUE(part_number, source)
+);
+CREATE INDEX idx_parts_cache_lookup ON parts_cache(part_number, source, expires_at);
+
+-- OEM 번호 매핑 (장기 캐시, 잘 변하지 않는 데이터)
+CREATE TABLE oem_mappings (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  part_number TEXT NOT NULL,
+  oem_numbers TEXT[] NOT NULL,      -- 호환 OEM 번호 배열
+  brands TEXT[],                    -- 관련 브랜드
+  fitment JSONB,                    -- 호환 차종 데이터
+  source TEXT NOT NULL,             -- 데이터 출처
+  verified BOOLEAN DEFAULT false,   -- 교차 검증 완료 여부
+  created_at TIMESTAMPTZ DEFAULT now(),
+  updated_at TIMESTAMPTZ DEFAULT now()
+);
+CREATE INDEX idx_oem_part ON oem_mappings(part_number);
+CREATE INDEX idx_oem_numbers ON oem_mappings USING GIN(oem_numbers);
+
+-- 리스팅 초안
+CREATE TABLE listing_drafts (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  search_id UUID REFERENCES search_history(id) ON DELETE SET NULL,
+  part_number TEXT NOT NULL,
+  title TEXT NOT NULL,
+  category_id INTEGER,
+  category_name TEXT,
+  item_specifics JSONB NOT NULL,   -- { brand, mpn, ... }
+  fitment JSONB,                   -- [{ year, make, model, engine, trim }]
+  price_data JSONB,                -- 가격 계산 결과 전체
+  description_html TEXT,           -- HTML 상품 설명
+  ai_confidence JSONB,             -- { fitment, pricing, overall }
+  ai_warnings TEXT[],              -- AI가 제시한 경고사항
+  status TEXT DEFAULT 'draft',     -- draft, published, archived
+  created_at TIMESTAMPTZ DEFAULT now(),
+  updated_at TIMESTAMPTZ DEFAULT now()
+);
+CREATE INDEX idx_drafts_user ON listing_drafts(user_id, created_at DESC);
+
+-- eBay 카테고리 매핑 (사전 정의)
+CREATE TABLE ebay_categories (
+  id SERIAL PRIMARY KEY,
+  category_id INTEGER UNIQUE NOT NULL,
+  category_name TEXT NOT NULL,
+  category_path TEXT NOT NULL,
+  required_specifics TEXT[],       -- 필수 Item Specifics 필드명
+  optional_specifics TEXT[],       -- 선택 Item Specifics 필드명
+  keywords TEXT[]                  -- 매칭용 키워드
+);
+CREATE INDEX idx_ebay_cat_keywords ON ebay_categories USING GIN(keywords);
+
+-- 환율 캐시
+CREATE TABLE exchange_rates (
+  id SERIAL PRIMARY KEY,
+  base_currency TEXT NOT NULL DEFAULT 'USD',
+  target_currency TEXT NOT NULL DEFAULT 'KRW',
+  rate DECIMAL(12,4) NOT NULL,
+  fetched_at TIMESTAMPTZ DEFAULT now()
+);
+```
+
+### 4.2 RLS (Row Level Security) 정책
+
+```sql
+-- 사용자별 데이터 격리
+ALTER TABLE user_settings ENABLE ROW LEVEL SECURITY;
+ALTER TABLE search_history ENABLE ROW LEVEL SECURITY;
+ALTER TABLE listing_drafts ENABLE ROW LEVEL SECURITY;
+
+-- 본인 데이터만 접근
+CREATE POLICY "users_own_settings" ON user_settings
+  FOR ALL USING (auth.uid() = user_id);
+
+CREATE POLICY "users_own_searches" ON search_history
+  FOR ALL USING (auth.uid() = user_id);
+
+CREATE POLICY "users_own_drafts" ON listing_drafts
+  FOR ALL USING (auth.uid() = user_id);
+
+-- 캐시 데이터는 모든 인증 사용자 읽기 가능
+ALTER TABLE parts_cache ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "authenticated_read_cache" ON parts_cache
+  FOR SELECT USING (auth.role() = 'authenticated');
+
+ALTER TABLE oem_mappings ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "authenticated_read_oem" ON oem_mappings
+  FOR SELECT USING (auth.role() = 'authenticated');
+```
+
+---
+
+## 5. API 엔드포인트 설계
+
+### 5.1 Vercel API Routes (오케스트레이터)
+
+#### 검색/크롤링
+
+| Method | Path | 설명 | 요청 | 응답 |
+|--------|------|------|------|------|
+| POST | `/api/parts/search` | 부품 검색 시작 | `{ partNumber, partName, sources?: string[] }` | `{ jobId, status: "queued", estimatedTime }` |
+| GET | `/api/parts/search/[jobId]` | 검색 상태 조회 | - | `{ status, progress: { total, completed, failed }, partialResults? }` |
+| GET | `/api/parts/search/[jobId]/stream` | SSE 실시간 진행률 | - | SSE: `{ event, data: { source, status, result? } }` |
+
+#### AI 분석
+
+| Method | Path | 설명 | 요청 | 응답 |
+|--------|------|------|------|------|
+| POST | `/api/parts/analyze` | AI 분석 실행 | `{ jobId }` 또는 `{ crawlResults }` | `{ listing, confidence, warnings }` |
+| POST | `/api/parts/analyze/regenerate` | AI 재분석 (특정 섹션) | `{ jobId, sections: ["title", "fitment"] }` | 해당 섹션만 재생성 |
+
+#### 가격 계산
+
+| Method | Path | 설명 | 요청 | 응답 |
+|--------|------|------|------|------|
+| POST | `/api/parts/price/calculate` | 가격 계산 | `{ purchasePrice, currency, weight?, settings? }` | `{ costBreakdown, pricing, comparison }` |
+| GET | `/api/exchange-rate` | 현재 환율 | `?base=USD&target=KRW` | `{ rate, fetchedAt }` |
+
+#### 리스팅 관리
+
+| Method | Path | 설명 | 요청 | 응답 |
+|--------|------|------|------|------|
+| POST | `/api/listings/drafts` | 초안 저장 | `{ ...listingData }` | `{ id, createdAt }` |
+| GET | `/api/listings/drafts` | 초안 목록 | `?page=1&limit=20` | `{ drafts[], total }` |
+| GET | `/api/listings/drafts/[id]` | 초안 상세 | - | `{ ...listingData }` |
+| PUT | `/api/listings/drafts/[id]` | 초안 수정 | `{ ...updates }` | `{ ...updated }` |
+| DELETE | `/api/listings/drafts/[id]` | 초안 삭제 | - | `{ success }` |
+| GET | `/api/listings/drafts/[id]/csv` | Fitment CSV 다운로드 | - | CSV 파일 |
+
+#### 히스토리
+
+| Method | Path | 설명 | 요청 | 응답 |
+|--------|------|------|------|------|
+| GET | `/api/parts/history` | 검색 히스토리 | `?page=1&limit=20` | `{ searches[], total }` |
+| DELETE | `/api/parts/history/[id]` | 히스토리 삭제 | - | `{ success }` |
+
+#### 설정
+
+| Method | Path | 설명 | 요청 | 응답 |
+|--------|------|------|------|------|
+| GET | `/api/settings` | 사용자 설정 조회 | - | `{ ...settings }` |
+| PUT | `/api/settings` | 사용자 설정 수정 | `{ marginPercent?, shippingMethod?, ... }` | `{ ...updated }` |
+
+### 5.2 크롤러 서버 내부 API (VPS)
+
+Vercel -> 크롤러 서버 간 내부 통신. API Key 인증.
+
+| Method | Path | 설명 |
+|--------|------|------|
+| POST | `/jobs` | 크롤링 작업 등록 |
+| GET | `/jobs/[id]` | 작업 상태 조회 |
+| GET | `/jobs/[id]/result` | 작업 결과 조회 |
+| DELETE | `/jobs/[id]` | 작업 취소 |
+| GET | `/health` | 헬스체크 |
+
+인증: `Authorization: Bearer {CRAWLER_API_KEY}` (환경변수)
+
+---
+
+## 6. 계정 안전성 설계
+
+### 6.1 기본 원칙
+
+```
+"크롤링은 탐지되지 않는 것이 아니라, 사람처럼 보이는 것이 목표"
+```
+
+### 6.2 계층별 방어 전략
+
+#### Layer 1: 브라우저 핑거프린트 위장
+
+| 대책 | 구현 |
+|------|------|
+| Stealth 플러그인 | `playwright-extra` + `stealth` 플러그인 (WebGL, WebRTC, Navigator 위장) |
+| User-Agent 로테이션 | 실제 Chrome/Firefox UA 풀 (50개+), 세션 단위 고정 |
+| Viewport 다양화 | 1920x1080, 1366x768, 1440x900 등 실제 해상도 랜덤 선택 |
+| 언어/타임존 | `en-US`, `America/New_York` 등 일관된 프로필 |
+| WebDriver 플래그 | `navigator.webdriver = false` 강제 |
+
+#### Layer 2: 행동 패턴 모방
+
+| 대책 | 구현 |
+|------|------|
+| 요청 간격 | 가우시안 분포 랜덤 딜레이 (평균 3초, 표준편차 1.5초) |
+| 스크롤 시뮬레이션 | 페이지 로드 후 자연스러운 스크롤 (즉시 파싱 방지) |
+| 마우스 무브먼트 | 클릭 전 마우스 이동 궤적 시뮬레이션 |
+| 세션 관리 | 쿠키 유지, 세션 간 일관된 행동 |
+| 접속 패턴 | 업무 시간대(미국 EST 9-17시) 집중, 심야 크롤링 최소화 |
+
+#### Layer 3: IP/네트워크 관리
+
+| 대책 | 구현 |
+|------|------|
+| 프록시 풀 | 주거용(Residential) 프록시 10개+ (Bright Data 또는 Oxylabs) |
+| IP 로테이션 | 사이트별 세션 단위로 IP 고정 (세션 중 변경 금지) |
+| 지역 설정 | 미국 IP만 사용 (부품 사이트 타겟 시장) |
+| 프록시 비용 | 약 $15~30/월 (트래픽 기반 과금) |
+
+#### Layer 4: eBay 특별 보호
+
+```
+[최우선 원칙] eBay는 크롤링 최소화. 공식 API 최대 활용.
+
+- eBay Browse API: 리스팅 검색, 가격 조회 (공식)
+- eBay Finding API: 카테고리 검색 (공식)  
+- 크롤링은 API로 불가능한 데이터만 (판매 완료 건수 등)
+- eBay 크롤링 시 별도 IP + 최소 빈도 (일 50회 이하)
+- 이베이 셀러 계정과 크롤링 IP를 절대 동일하게 사용하지 않음
+```
+
+#### Layer 5: 차단 감지 및 자동 중단
+
+```
+감지 신호:
+  - HTTP 403/429 응답
+  - CAPTCHA 페이지 감지 (특정 DOM 요소)
+  - CloudFlare Challenge 페이지
+  - 비정상적으로 빈 응답
+
+대응:
+  1. 즉시 해당 사이트 크롤링 중단
+  2. 30분 쿨다운 (해당 사이트만)
+  3. 다른 프록시로 재시도 (1회)
+  4. 실패 시 해당 사이트 24시간 차단 + 관리자 알림
+```
+
+---
+
+## 7. 리스크 & 트레이드오프
+
+### 7.1 기술 선택 트레이드오프
+
+| 선택 | 장점 | 단점 | 대안 |
+|------|------|------|------|
+| **크롤러 별도 VPS** | 타임아웃 제약 없음, IP 관리 자유 | 인프라 비용 + 관리 부담 | Vercel에서 직접 크롤링 (불가, 60초 제한) |
+| **BullMQ + Redis** | 재시도/우선순위 내장, 모니터링 UI | Redis 추가 인프라 | DB 폴링 방식 (단순하지만 비효율) |
+| **Playwright** | 다양한 브라우저, 스텔스 생태계 | 메모리 사용량 높음 (~400MB/인스턴스) | Puppeteer (더 가벼우나 Chromium only) |
+| **Claude AI** | 긴 컨텍스트, 정밀한 추론 | OpenAI 대비 약간 비쌈 | GPT-4o (더 저렴, 컨텍스트 128K) |
+| **SSE** | 단방향 실시간, 구현 단순 | 양방향 불가 | WebSocket (오버스펙), Polling (지연) |
+| **Supabase** | 기존 스택, RLS, Auth 통합 | 고빈도 쓰기 시 비용 증가 | 자체 PostgreSQL (관리 부담) |
+
+### 7.2 크롤링 차단 시 폴백 전략
+
+```
+[시나리오별 대응]
+
+1. 단일 사이트 일시 차단 (가장 빈번)
+   → 해당 사이트 스킵, 나머지로 분석 진행
+   → AI가 "데이터 불충분" 경고 출력
+   
+2. 다수 사이트 동시 차단
+   → 사용자에게 수동 URL 입력 폼 제공
+   → 사용자가 브라우저에서 직접 검색한 URL을 붙여넣으면 파싱
+   
+3. eBay API 쿼터 소진
+   → 일일 5000회 제한 모니터링
+   → 90% 도달 시 캐시 우선 정책으로 전환
+   → 100% 시 eBay 검색 링크만 제공 (수동 조회)
+
+4. 장기 차단 (IP 블랙리스트)
+   → 프록시 풀 교체
+   → 최악의 경우 해당 사이트 어댑터 비활성화
+   → 비크롤링 대안: 공식 API가 있는 사이트로 점진적 전환
+```
+
+### 7.3 AI 비용 추정
+
+| 사용량 | 월 검색 건수 | AI 비용 | 크롤러 VPS | 프록시 | 합계 |
+|--------|------------|---------|-----------|--------|------|
+| 초기 (테스트) | 50건 | ~$3 | $10 | $0 (무프록시 테스트) | ~$13/월 |
+| 소규모 운영 | 300건 | ~$18 | $15 | $15 | ~$48/월 |
+| 중규모 운영 | 1,000건 | ~$60 | $20 | $30 | ~$110/월 |
+| 대규모 | 3,000건+ | ~$180 | $40 | $50 | ~$270/월 |
+
+### 7.4 개발 우선순위 제안 (MVP → 풀 버전)
+
+#### Phase 1 — MVP (2~3주)
+- 품번 입력 → RockAuto + eBay API만 크롤링
+- Claude AI 분석 → 리스팅 제목 + Item Specifics 생성
+- 가격 계산기 (수동 입력 기반)
+- 크롤러: Vercel 자체 실행 (단순 HTTP 파싱 위주, Playwright 불필요)
+- DB: Supabase에 검색 히스토리만
+
+#### Phase 2 — 크롤러 분리 (2주)
+- VPS에 Playwright + BullMQ 크롤러 서버 구축
+- PartsGeek, Amazon, partsouq 어댑터 추가
+- Redis 캐싱 도입
+- SSE 실시간 진행률
+
+#### Phase 3 — 고도화 (2주)
+- Fitment 교차 검증 + confidence 시스템
+- 프록시 로테이션 + 스텔스 강화
+- 리스팅 초안 저장/편집/히스토리
+- CSV 다운로드 (eBay Bulk Upload)
+
+#### Phase 4 — 확장 (지속)
+- eBay Listing API 직접 연동 (리스팅 자동 등록)
+- 가격 모니터링 (경쟁 가격 변동 알림)
+- 대량 처리 (CSV 품번 목록 일괄 검색)
+- 사용자 통계 대시보드
+
+### 7.5 핵심 리스크 목록
+
+| 리스크 | 확률 | 영향 | 대응 |
+|--------|------|------|------|
+| 크롤링 대상 사이트 구조 변경 | 높음 (분기 1회) | 중 | 어댑터 패턴으로 격리, 모니터링 알림 |
+| eBay 계정 제재 (잘못된 Fitment) | 중 | 상 | AI confidence 시스템, 수동 확인 권고 |
+| AI 환각 (존재하지 않는 차종 생성) | 중 | 상 | Multi-source 교차 검증, low confidence 경고 |
+| 크롤링 IP 차단 | 높음 | 중 | 프록시 풀, API 우선 전략 |
+| AI API 비용 초과 | 낮음 | 중 | 캐시 적극 활용, Haiku 폴백 |
+| Vercel 타임아웃 (60초) | 중 | 중 | 크롤러 서버 분리 (Phase 2) |
+
+---
+
+## 부록: 쟁승메이드 서비스 연계
+
+이 프로젝트는 jaengseung-made.com의 **외주 개발 포트폴리오** 및 **업무 자동화 서비스** 레퍼런스로 활용:
+
+- `/freelance` 포트폴리오에 "이베이 자동화 툴" 케이스 추가
+- `/services/automation` 페이지에서 "해외 이커머스 자동화" 사례로 소개
+- 동일 기술 스택(Next.js + Supabase + AI)으로 일관된 개발 역량 시연
+- 향후 SaaS화 시 쟁승메이드 구독 서비스로 편입 가능
+
+---
+
+> 이 문서는 초안이며, CEO(박재오) 리뷰 후 Phase 1 착수 전에 확정합니다.

CONTENT/blog-drafts.md

@@ -0,0 +1,382 @@
+# 네이버 블로그 초안 10편
+
+> SEO 키워드 기반, 네이버 검색 최적화
+> 분량: 편당 800~1,500자 목표
+> 포함: 제목 / 핵심 키워드 / 소제목 구조 / 본문 초안
+
+---
+
+## 글 1. 업무 자동화 외주 맡기기 전에 확인해야 할 5가지
+
+**메인 키워드:** 업무 자동화 외주
+**서브 키워드:** RPA 개발 외주, 자동화 개발 비용, 자동화 외주 비용
+
+**제목 (SEO):** 업무 자동화 외주 맡기기 전에 반드시 확인해야 할 5가지 [현직 개발자 조언]
+
+---
+
+매일 반복하는 엑셀 작업, 이메일 처리, 보고서 정리를 자동화하고 싶어서 외주를 알아보셨나요?
+
+좋은 선택입니다. 그런데 맡기기 전에 꼭 확인해야 할 것들이 있습니다. 현직 대기업 개발자이자 자동화 외주를 47건 납품한 경험으로 알려드립니다.
+
+### ① 계약서를 쓰는가
+
+자동화 외주 피해의 절반은 계약서 없이 진행해서 생깁니다. 구두 약속은 증거가 없습니다. 반드시 계약서(범위, 납기, 금액, AS 기간)를 작성하세요.
+
+### ② 소스코드를 전달하는가
+
+납품 후 소스코드를 안 주는 개발자가 있습니다. 이렇게 되면 수정이 필요할 때마다 그 개발자에게 의존해야 합니다. 소스코드 인도를 계약서에 명시하세요.
+
+### ③ 납기를 계약서에 쓰는가
+
+"빠르게 해드릴게요"는 약속이 아닙니다. 납기 날짜를 명시하고, 지연 시 패널티 조항까지 있으면 더 좋습니다.
+
+### ④ 포트폴리오가 실제로 운영 중인가
+
+"한 적 있습니다"와 "지금도 운영 중입니다"는 다릅니다. URL로 확인할 수 있는 실제 납품 사례를 요청하세요.
+
+### ⑤ AS 기간을 보장하는가
+
+납품 후 바로 연락이 끊기는 경우가 있습니다. 최소 1개월 무상 AS가 포함된 계약인지 확인하세요.
+
+---
+
+저는 위 5가지를 모두 계약서에 명시하고 진행합니다. 납기 지연 시 하루 10만원 패널티도 직접 적용합니다. 외주를 맡기기 전에 이 체크리스트를 꼭 활용하세요.
+
+**문의:** jaengseung-made.com / bgg8988@gmail.com
+
+---
+
+## 글 2. ChatGPT 프롬프트 잘 쓰는 법 — RCTF 공식
+
+**메인 키워드:** ChatGPT 프롬프트 잘 쓰는 법
+**서브 키워드:** ChatGPT 활용법, 프롬프트 작성법, AI 업무 활용
+
+**제목 (SEO):** ChatGPT 프롬프트 잘 쓰는 법 — RCTF 공식 하나면 됩니다
+
+---
+
+ChatGPT를 쓰는데 결과가 항상 애매하신가요? 이유는 대부분 프롬프트가 너무 짧아서입니다.
+
+좋은 프롬프트에는 4가지 요소가 있습니다.
+
+**R — Role (역할)**
+AI에게 전문가 역할을 부여합니다.
+"당신은 10년 경력의 마케팅 전문가입니다."
+
+**C — Context (맥락)**
+상황과 배경 정보를 제공합니다.
+"저는 30~40대를 타겟으로 하는 B2B SaaS 회사의 마케터입니다."
+
+**T — Task (과제)**
+구체적으로 무엇을 해달라고 요청합니다.
+"신제품 출시 3개월 마케팅 계획을 작성해주세요."
+
+**F — Format (형식)**
+원하는 출력 형식을 지정합니다.
+"주차별 액션 아이템을 표 형식으로 작성해주세요."
+
+### 비교 예시
+
+**나쁜 프롬프트:** "신제품 마케팅 계획 짜줘"
+
+**좋은 프롬프트:** "당신은 10년 경력의 B2B 마케터입니다. 저는 30~40대 소기업 대표를 타겟으로 하는 프로젝트 관리 SaaS 출시를 앞두고 있습니다. 네이버 블로그와 카카오톡 채널을 주 채널로, 월 마케팅 예산은 50만원입니다. 출시 후 3개월 마케팅 계획을 주차별 액션 아이템 표로 작성해주세요."
+
+결과의 차이를 직접 테스트해보시면 바로 느끼실 수 있습니다.
+
+업무별 최적화된 프롬프트 50종 패키지가 필요하시다면 아래 링크에서 확인하세요.
+
+---
+
+## 글 3. 엑셀 자동화 외주 비용은 얼마인가? (2026 기준)
+
+**메인 키워드:** 엑셀 자동화 외주 비용
+**서브 키워드:** 엑셀 자동화 견적, 파이썬 자동화 가격
+
+**제목 (SEO):** 엑셀 자동화 외주 비용 얼마인가요? [2026 현실적인 견적 기준]
+
+---
+
+엑셀 자동화를 외주로 맡기려는 분들이 가장 궁금해하시는 것 — 비용입니다.
+
+결론부터 말씀드리면: **5만원 ~ 150만원** 사이입니다. 범위가 넓죠? 아래 기준으로 대략 파악할 수 있습니다.
+
+### 복잡도별 견적 기준
+
+**단순 자동화 (5~15만원)**
+- 여러 엑셀 파일 합치기
+- 특정 조건에 맞는 행 필터링
+- 반복 포맷 적용 (색상, 정렬 등)
+- 예: 거래처별 파일 → 하나로 합치기
+
+**중간 자동화 (15~50만원)**
+- 외부 데이터 연동 (웹 크롤링, API)
+- 이메일 자동 발송 연동
+- 데이터 변환 + 보고서 자동 생성
+- 예: 판매 데이터 수집 → 자동 월간 보고서
+
+**복잡한 자동화 (50~150만원)**
+- 여러 시스템 연동 (ERP, CRM, 외부 API)
+- 실시간 데이터 처리
+- GUI 포함 전용 프로그램 형태
+- 예: 주문 시스템 → 재고 자동 관리 → 거래처 자동 발주
+
+### 비용보다 중요한 것
+
+싼 가격에 맡겼다가 소스코드를 못 받거나, 납품 후 연락이 끊기는 경우가 많습니다. 계약서 + 소스코드 인도 + AS 기간이 포함된 견적인지 반드시 확인하세요.
+
+무료 견적 문의: jaengseung-made.com
+
+---
+
+## 글 4. 소상공인 홈페이지 제작 비용 — 20만원짜리와 200만원짜리 차이
+
+**메인 키워드:** 소상공인 홈페이지 제작 비용
+**서브 키워드:** 홈페이지 제작 견적, 랜딩페이지 제작 가격
+
+**제목 (SEO):** 소상공인 홈페이지 제작 비용 20만원 vs 200만원 — 뭐가 다른가요?
+
+---
+
+홈페이지 제작 견적을 알아보면 가격 차이가 10배가 나기도 합니다. 왜 이런 차이가 날까요?
+
+### 20만원대 홈페이지
+
+- 워드프레스/아임웹 등 빌더 기반
+- 기존 템플릿 커스터마이징
+- 커스텀 기능 추가 어려움
+- 이후 유지보수 플랫폼에 종속
+
+### 100만원대 홈페이지
+
+- 직접 개발 (React, Next.js 등)
+- 디자인 시안부터 구현까지 포함
+- 결제, 로그인, 관리자 기능 가능
+- 소스코드 인도로 이후 독립 운영 가능
+
+### 200만원+ 홈페이지
+
+- 쇼핑몰 기능 (장바구니, 결제, 재고 관리)
+- 커스텀 CMS (글/상품 직접 관리)
+- SEO 최적화 구조 설계
+- 복잡한 사용자 시나리오 구현
+
+### 어떤 걸 선택해야 하나?
+
+단순 소개 페이지라면 20만원대도 충분합니다. 하지만 예약, 결제, 로그인, 관리자 기능이 필요하다면 직접 개발 쪽으로 가야 합니다. 나중에 기능 추가할 때 처음부터 다시 만드는 것보다 처음에 제대로 만드는 게 싸게 먹힙니다.
+
+---
+
+## 글 5. 파이썬 자동화 독학 vs 외주 — 어떤 게 나을까?
+
+**메인 키워드:** 파이썬 자동화 배우기
+**서브 키워드:** 파이썬 독학, 자동화 외주 비교
+
+**제목 (SEO):** 파이썬 자동화 독학 vs 외주 — 어떤 경우에 어떤 선택이 맞나?
+
+---
+
+파이썬 자동화를 배워야 할까요, 외주를 맡겨야 할까요?
+
+현직 개발자이자 자동화 외주를 제공하는 입장에서 솔직하게 말씀드립니다.
+
+### 직접 배우는 게 나은 경우
+
+- 자동화 업무가 앞으로도 계속 변한다면 (반복 학습 투자 가치 있음)
+- 코딩 자체에 흥미가 있다면
+- 시간이 충분하고 당장 급하지 않다면
+- 비교적 단순한 엑셀 작업이라면 (구글 시트 수식으로도 충분)
+
+### 외주가 나은 경우
+
+- 지금 당장 시간이 없다면 (학습 시간이 비용보다 비싸다면)
+- 복잡한 시스템 연동이 필요하다면 (API, 데이터베이스 등)
+- 일회성 자동화가 필요하다면
+- 개발보다 본업에 집중하고 싶다면
+
+### 현실적인 조언
+
+파이썬 입문부터 실무 자동화까지는 최소 3~6개월입니다. 그 시간의 기회비용을 계산해보세요. 본업 시급이 높을수록 배우는 것보다 외주가 효율적입니다.
+
+---
+
+## 글 6. Make.com으로 30분 만에 만드는 고객 문의 자동화
+
+**메인 키워드:** Make.com 사용법
+**서브 키워드:** 노코드 자동화, 고객 문의 자동화
+
+**제목 (SEO):** Make.com으로 30분 만에 고객 문의 자동화 만드는 법 (코딩 없음)
+
+---
+
+코딩 없이 자동화를 만들고 싶다면 Make.com이 가장 좋은 선택입니다.
+
+오늘은 "고객 문의 → 이메일 발송 → 스프레드시트 기록 → 슬랙 알림" 자동화를 30분 만에 만드는 방법을 알려드립니다.
+
+### 준비물
+
+- Make.com 무료 계정
+- 구글 폼 (문의 폼)
+- 구글 스프레드시트
+- Gmail 계정
+
+### 단계별 설정
+
+**1단계: 트리거 설정**
+Make.com에서 새 시나리오 생성 → "Google Forms" 모듈 추가 → 폼 선택
+
+**2단계: 이메일 발송**
+Gmail 모듈 추가 → "Send an email" → 받는 사람 자신 이메일, 내용에 폼 답변 매핑
+
+**3단계: 스프레드시트 기록**
+Google Sheets 모듈 → "Add a row" → 시트 선택, 열에 폼 답변 매핑
+
+**4단계: 슬랙 알림 (선택)**
+Slack 모듈 → "Send a message" → 채널과 메시지 내용 설정
+
+### 실제 실행
+
+저장 후 "Run once"로 테스트. 폼 제출 → 3개 액션이 자동 실행되는 것을 확인.
+
+Make.com 세팅 대행 서비스도 있습니다 — jaengseung-made.com
+
+---
+
+## 글 7. AI로 자소서 쓰면 왜 걸리는가 — 그리고 제대로 활용하는 법
+
+**메인 키워드:** 자소서 AI 작성, AI 자소서
+**서브 키워드:** ChatGPT 자소서, 자소서 첨삭 AI
+
+**제목 (SEO):** AI로 자소서 쓰면 왜 걸리나요? 제대로 활용하는 법 알려드립니다
+
+---
+
+AI로 자소서를 쓰면 면접관이 바로 알 수 있을까요? 알 수 있습니다. 이유가 있습니다.
+
+### AI 자소서가 걸리는 이유
+
+1. **추상적인 표현** — "열정", "성장", "도전" 같은 단어가 과도하게 등장
+2. **구조가 없음** — STAR 기법(상황-과제-행동-결과)이 없음
+3. **회사 특화성 없음** — 어느 회사에도 쓸 수 있는 내용
+4. **수치 없음** — "열심히 했습니다" vs "3개월 만에 매출 30% 향상"
+
+### AI를 제대로 활용하는 법
+
+AI한테 자소서를 쓰게 하지 말고, **첨삭**을 시키세요.
+
+프롬프트 예시:
+> "당신은 15년 경력의 대기업 HR 수석 컨설턴트입니다. 다음 자소서를 STAR 기법 관점에서 첨삭해주세요. 추상적인 표현은 구체적 경험과 수치로 바꿔주시고, 첫 문장을 임팩트 있게 수정해주세요. [자소서 내용]"
+
+이렇게 하면 AI가 쓴 글이 아닌 내 경험을 AI가 강화해주는 형태가 됩니다.
+
+자소서·이력서 첨삭 전용 프롬프트 패키지 → jaengseung-made.com
+
+---
+
+## 글 8. 이메일 자동화 외주 — 어떤 걸 자동화할 수 있나?
+
+**메인 키워드:** 이메일 자동화 외주
+**서브 키워드:** Gmail 자동화, 이메일 자동 발송
+
+**제목 (SEO):** 이메일 자동화 외주로 할 수 있는 것들 총정리 [실제 납품 사례]
+
+---
+
+이메일 관련 업무를 자동화하면 하루 1~2시간을 절약할 수 있습니다. 실제로 제가 납품한 이메일 자동화 사례들을 정리합니다.
+
+### 납품 사례별 자동화 유형
+
+**케이스 1: 거래처 이메일 자동 분류 + 답장 초안**
+제조업 거래처로부터 오는 이메일을 자동으로 분류하고, ChatGPT로 답장 초안 생성. 담당자가 검토 후 발송만 함.
+→ 이메일 처리 시간 일 2시간 → 10분
+
+**케이스 2: 고객 문의 자동 응답**
+자주 받는 FAQ 질문을 자동 분류하여 즉시 답변. 복잡한 문의만 담당자에게 전달.
+→ 고객 응답 속도 10배 향상
+
+**케이스 3: 정기 보고서 이메일 자동 발송**
+매주 월요일 오전 9시, 지난 주 매출 데이터를 자동 수집하여 팀장에게 이메일 발송.
+→ 주간 보고 작업 시간 30분 절약
+
+### 비용 및 기간
+
+단순 자동화 발송: 10~20만원, 2~3일
+분류 + 초안 생성 (AI 연동): 30~50만원, 5~7일
+복잡한 규칙 기반 자동화: 50만원+, 1~2주
+
+---
+
+## 글 9. 직방·다방·네이버부동산 한 번에 크롤링하는 법
+
+**메인 키워드:** 부동산 매물 크롤링
+**서브 키워드:** 직방 크롤링, 네이버부동산 자동화
+
+**제목 (SEO):** 직방·다방·피터팬·네이버부동산 한 번에 크롤링하는 법 (파이썬)
+
+---
+
+임장 준비나 매물 비교를 할 때 여러 사이트를 돌아다니며 데이터를 수동으로 정리하는 작업이 번거롭죠.
+
+파이썬으로 4개 플랫폼의 매물을 한 번에 수집해서 엑셀로 저장하는 방법을 알려드립니다.
+
+### 수집 가능한 플랫폼
+
+- **직방**: API 기반 수집 (geohash 좌표 활용)
+- **다방**: 위경도 바운딩박스 기반 API
+- **피터팬**: JSON API + HTML 파싱
+- **네이버부동산**: 법정동코드 기반 API
+
+### 수집 데이터 항목
+
+제목, 가격(보증금/월세), 면적, 층수, 주소, 등록일, 링크, 플랫폼
+
+### 결과물
+
+- 전체 매물 통합 시트
+- 플랫폼별 시트
+- 지역 요약 시트 (평균가, 최저가)
+- 중복 매물 자동 제거
+
+이 프로그램은 쟁승메이드에서 3만원에 구매할 수 있습니다. 소스코드 전달, 수정 요청 가능.
+
+jaengseung-made.com/services/automation
+
+---
+
+## 글 10. 현직 개발자의 부업 6개월 후기 — 솔직하게
+
+**메인 키워드:** 개발자 부업, 개발자 N잡
+**서브 키워드:** 부업 수익, 개발자 프리랜서
+
+**제목 (SEO):** 대기업 현직 개발자가 부업 6개월 해본 솔직한 후기
+
+---
+
+현직 대기업 백엔드 개발자로 일하면서 부업을 시작한 지 6개월이 됐습니다.
+
+잘 된 점, 힘든 점, 그리고 현실적인 수익까지 솔직하게 공유합니다.
+
+### 잘 된 점
+
+**1. 대기업 경험이 그대로 차별화가 됐다**
+코드 품질, 문서화, 커뮤니케이션 — 직장에서 당연히 해오던 것들이 프리랜서 시장에서는 희소했습니다. "계약서부터 써요"라고 하면 클라이언트분들이 더 신뢰하셨습니다.
+
+**2. 디지털 상품 수익이 생각보다 좋다**
+프롬프트 패키지, 자동화 스크립트 패키지를 만들어놓으니 시간 투자 없이도 수익이 생기기 시작했습니다.
+
+**3. 현업 실력이 오히려 올라갔다**
+클라이언트의 다양한 요구사항을 해결하면서 회사에서 안 해볼 기술들을 경험하게 됐습니다.
+
+### 힘든 점
+
+**1. 영업이 어렵다**
+기술은 자신있는데, 잠재 고객에게 나를 알리는 과정이 예상보다 훨씬 어렵습니다. 콘텐츠를 꾸준히 올려야 한다는 걸 느끼고 있습니다.
+
+**2. 시간 관리**
+퇴근 후 에너지가 없는 날도 클라이언트 문의가 오면 답해야 합니다. 규칙을 만들지 않으면 번아웃이 옵니다.
+
+### 현실적인 조언
+
+처음 3개월은 포트폴리오와 신뢰를 쌓는 데 집중하세요. 수익은 그 다음입니다. 첫 고객은 심지어 무료로 해드리고 후기를 받는 것도 방법입니다.
+
+지금은 쟁승메이드(jaengseung-made.com)라는 이름으로 서비스하고 있습니다.

CONTENT/brand-story.md

@@ -0,0 +1,95 @@
+# 쟁승메이드 브랜드 스토리
+
+> 유튜브 채널 소개, 네이버 블로그 About, 크몽/숨고/위시켓 프로필에 공통 사용
+
+---
+
+## 풀 버전 (블로그 About / 유튜브 채널 소개)
+
+---
+
+### 왜 현직 대기업 개발자가 부업을 시작했나
+
+2년 전, 친한 선배가 쇼핑몰 관리 시스템 개발을 맡겼다가 사기를 당했습니다.
+
+계약금 250만 원을 보냈는데, 중간보고가 끊기더니 연락이 안 됐습니다. 3개월을 기다리다 결국 법적 분쟁까지 갔고, 시간과 돈 모두 날렸죠. 그 과정을 옆에서 지켜보면서 생각했습니다.
+
+**"나 같은 사람이 있었다면 이 일이 생겼을까?"**
+
+저는 현직 대기업에서 백엔드 개발을 하고 있습니다. 대규모 시스템을 운영하면서 배운 것들 — 코드 품질, 장애 대응, 문서화, 커뮤니케이션 — 이 모든 게 제가 받아온 당연한 훈련이었습니다.
+
+반면 소상공인, 스타트업, 직장인들이 개발을 맡기는 프리랜서 시장은 달랐습니다. 연락 두절, 납기 지연, 소스코드 미인도, 허술한 결과물. 이런 문제들이 너무 흔했습니다.
+
+그래서 시작했습니다.
+
+**계약서 먼저 씁니다.** 구두 약속은 하지 않습니다.
+**납기를 지킵니다.** 지연되면 하루 10만 원 패널티를 스스로 감수합니다.
+**소스코드를 전달합니다.** 납품 후 어디서든 활용할 수 있도록.
+**연락을 합니다.** 주 1회 진행 보고가 기본입니다.
+
+이게 쟁승메이드가 존재하는 이유입니다.
+
+---
+
+지금은 AI 자동화를 메인으로 하고 있습니다.
+
+대기업에서 매일 접하는 반복 업무들 — 보고서 작성, 데이터 정리, 이메일 분류 — 이런 것들이 AI와 파이썬으로 충분히 자동화된다는 걸 몸으로 압니다. 그 경험을 여러분의 업무에 적용해 드리고 싶습니다.
+
+"이런 걸 자동화할 수 있을까?"라는 생각이 드신다면 일단 물어보세요. 대부분 됩니다.
+
+---
+
+**박재오** · 쟁승메이드 운영자
+현직 대기업 백엔드 개발자
+bgg8988@gmail.com · 010-3907-1392
+https://jaengseung-made.com
+
+---
+
+## 숏 버전 (크몽/숨고/위시켓 프로필)
+
+```
+현직 대기업 백엔드 개발자입니다.
+
+대기업에서 배운 개발 원칙을 그대로 부업에 적용합니다.
+계약서 먼저, 납기 지키고, 소스코드 전달, 연락 두절 없음.
+
+AI 자동화 전문 — 반복 업무를 없애드립니다.
+엑셀, 이메일, 보고서, 크롤링, ChatGPT 연동까지.
+
+납기 지연 시 하루 10만 원 패널티 직접 적용.
+47건 납품 완료, 재의뢰율 높음.
+```
+
+---
+
+## 초초단문 (SNS 바이오 / 카카오 프로필)
+
+```
+현직 대기업 개발자 · AI 자동화 전문
+반복 업무를 없애드립니다 🤖
+계약서 먼저 · 납기 보장 · 소스코드 인도
+👇 jaengseung-made.com
+```
+
+---
+
+## 유튜브 채널 소개글
+
+```
+안녕하세요, 현직 대기업 백엔드 개발자 박재오입니다.
+
+이 채널에서는 실제로 써먹을 수 있는 AI·자동화 활용법을 공유합니다.
+
+📌 다루는 주제
+- 반복 업무 AI로 자동화하기 (엑셀, 이메일, 보고서)
+- ChatGPT·Claude 업무 활용 꿀팁
+- 파이썬으로 직접 만드는 자동화 스크립트
+- 현직 개발자가 경험한 외주 개발 노하우
+
+재미보다 실용을 선택합니다.
+영상 하나 보고 바로 적용할 수 있는 내용만 올립니다.
+
+💬 문의: https://open.kakao.com/o/s9stoNvb
+🌐 사이트: https://jaengseung-made.com
+```

CONTENT/ebay-tool-questionnaire.html

@@ -0,0 +1,973 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>이베이 자동차 부품 AI 리스팅 자동화 — 사전 요구사항 질문지</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+    color: #1e293b;
+    background: #f8fafc;
+    line-height: 1.7;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .page {
+    max-width: 800px;
+    margin: 0 auto;
+    background: #ffffff;
+    padding: 48px 56px;
+  }
+
+  /* ── Header ── */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 3px solid #1a56db;
+    padding-bottom: 20px;
+    margin-bottom: 12px;
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+
+  .brand-icon {
+    width: 44px;
+    height: 44px;
+    background: #1a56db;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .brand-icon svg {
+    width: 26px;
+    height: 26px;
+    fill: #ffffff;
+  }
+
+  .brand-name {
+    font-size: 22px;
+    font-weight: 700;
+    color: #0f172a;
+    letter-spacing: -0.5px;
+  }
+
+  .brand-sub {
+    font-size: 12px;
+    font-weight: 400;
+    color: #64748b;
+  }
+
+  .doc-date {
+    font-size: 13px;
+    color: #94a3b8;
+    text-align: right;
+  }
+
+  .doc-title {
+    font-size: 19px;
+    font-weight: 700;
+    color: #0f172a;
+    margin-bottom: 4px;
+    line-height: 1.4;
+  }
+
+  .doc-subtitle {
+    font-size: 14px;
+    color: #64748b;
+    margin-bottom: 32px;
+  }
+
+  /* ── Client Info ── */
+  .client-info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px 24px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 20px 24px;
+    margin-bottom: 36px;
+  }
+
+  .client-info .field {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+  }
+
+  .client-info .field-label {
+    font-weight: 600;
+    color: #475569;
+    white-space: nowrap;
+  }
+
+  .client-info .field-value {
+    flex: 1;
+    border-bottom: 1px solid #cbd5e1;
+    min-height: 24px;
+    padding-bottom: 2px;
+  }
+
+  .client-info .field-input {
+    flex: 1;
+    border: none;
+    border-bottom: 1px solid #cbd5e1;
+    min-height: 24px;
+    padding: 2px 4px;
+    font-family: inherit;
+    font-size: 14px;
+    color: #1e293b;
+    background: transparent;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .client-info .field-input:focus {
+    border-bottom-color: #1a56db;
+  }
+
+  .client-info .field-input::placeholder {
+    color: #cbd5e1;
+  }
+
+  /* ── Submit Section ── */
+  .submit-section {
+    margin-top: 32px;
+    text-align: center;
+  }
+
+  .submit-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 48px;
+    background: #1a56db;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .submit-btn:hover {
+    background: #1e40af;
+  }
+
+  .submit-btn:disabled {
+    background: #94a3b8;
+    cursor: not-allowed;
+  }
+
+  .submit-msg {
+    margin-top: 12px;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .submit-msg.success {
+    color: #16a34a;
+  }
+
+  .submit-msg.error {
+    color: #dc2626;
+  }
+
+  .save-draft-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 24px;
+    background: #f1f5f9;
+    color: #475569;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-right: 12px;
+    transition: background 0.2s;
+  }
+
+  .save-draft-btn:hover {
+    background: #e2e8f0;
+  }
+
+  /* ── Section ── */
+  .section {
+    margin-bottom: 32px;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .section-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+
+  .badge-required {
+    background: #1a56db;
+    color: #ffffff;
+  }
+
+  .badge-optional {
+    background: #e2e8f0;
+    color: #475569;
+  }
+
+  .section-title {
+    font-size: 17px;
+    font-weight: 700;
+    color: #0f172a;
+  }
+
+  .section-desc {
+    font-size: 13px;
+    color: #64748b;
+    margin-bottom: 16px;
+    padding-left: 2px;
+  }
+
+  /* ── Question Card ── */
+  .question {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 20px 24px;
+    margin-bottom: 16px;
+    page-break-inside: avoid;
+  }
+
+  .question:last-child {
+    margin-bottom: 0;
+  }
+
+  .q-top {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 10px;
+  }
+
+  .q-num {
+    width: 28px;
+    height: 28px;
+    background: #1a56db;
+    color: #ffffff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  .badge-optional + .section-title ~ .question .q-num,
+  .section.optional .q-num {
+    background: #64748b;
+  }
+
+  .q-text {
+    font-size: 15px;
+    font-weight: 600;
+    color: #1e293b;
+    line-height: 1.5;
+  }
+
+  .q-hint {
+    font-size: 13px;
+    color: #94a3b8;
+    margin-top: 4px;
+    padding-left: 40px;
+    font-weight: 400;
+  }
+
+  .q-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+    padding-left: 40px;
+  }
+
+  .q-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #475569;
+    cursor: pointer;
+  }
+
+  .q-option input[type="checkbox"],
+  .q-option input[type="radio"] {
+    accent-color: #1a56db;
+  }
+
+  .answer-area {
+    margin-top: 12px;
+    padding-left: 40px;
+  }
+
+  .answer-area textarea {
+    width: 100%;
+    min-height: 64px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 10px 14px;
+    font-family: inherit;
+    font-size: 14px;
+    color: #1e293b;
+    resize: vertical;
+    background: #fafbfc;
+    transition: border-color 0.2s;
+  }
+
+  .answer-area textarea:focus {
+    outline: none;
+    border-color: #1a56db;
+    background: #ffffff;
+  }
+
+  .answer-area textarea.large {
+    min-height: 96px;
+  }
+
+  .answer-line {
+    margin-top: 12px;
+    padding-left: 40px;
+    border-bottom: 1px solid #cbd5e1;
+    min-height: 28px;
+  }
+
+  /* ── Footer ── */
+  .footer {
+    margin-top: 40px;
+    border-top: 2px solid #e2e8f0;
+    padding-top: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .footer-left {
+    font-size: 13px;
+    color: #64748b;
+    line-height: 1.8;
+  }
+
+  .footer-left strong {
+    color: #0f172a;
+  }
+
+  .footer-right {
+    text-align: right;
+    font-size: 12px;
+    color: #94a3b8;
+    line-height: 1.8;
+  }
+
+  .footer-notice {
+    margin-top: 20px;
+    background: #f1f5f9;
+    border-radius: 8px;
+    padding: 16px 20px;
+    font-size: 13px;
+    color: #64748b;
+    line-height: 1.7;
+  }
+
+  .footer-notice strong {
+    color: #475569;
+  }
+
+  /* ── Print Styles ── */
+  @media print {
+    body {
+      background: #ffffff;
+    }
+
+    .page {
+      padding: 24px 32px;
+      max-width: none;
+      box-shadow: none;
+    }
+
+    .question {
+      border: 1px solid #d1d5db;
+      break-inside: avoid;
+    }
+
+    .answer-area textarea {
+      border: none;
+      border-bottom: 1px solid #999;
+      border-radius: 0;
+      background: transparent;
+      min-height: 48px;
+    }
+
+    .q-option {
+      border-color: #999;
+    }
+
+    .header {
+      border-bottom-color: #1a56db;
+    }
+
+    .q-num {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+
+    .section-badge {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+
+    .footer-notice {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+  }
+
+  @page {
+    margin: 16mm 12mm;
+  }
+</style>
+</head>
+<body>
+
+<div class="page">
+
+  <!-- Header -->
+  <div class="header">
+    <div class="brand">
+      <div class="brand-icon">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+      </div>
+      <div>
+        <div class="brand-name">쟁승메이드</div>
+        <div class="brand-sub">JaengseungMade Co.</div>
+      </div>
+    </div>
+    <div class="doc-date">문서 작성일: 2026. 04. 02.</div>
+  </div>
+
+  <div style="height: 24px;"></div>
+
+  <div class="doc-title">이베이 자동차 부품 AI 리스팅 자동화 — 사전 요구사항 질문지</div>
+  <div class="doc-subtitle">프로젝트 착수 전, 아래 질문에 답변해 주시면 최적의 솔루션을 설계할 수 있습니다.</div>
+
+  <!-- Client Info -->
+  <div class="client-info">
+    <div class="field">
+      <span class="field-label">고객명 <span style="color:#ef4444">*</span></span>
+      <input type="text" id="clientName" class="field-input" placeholder="홍길동" required>
+    </div>
+    <div class="field">
+      <span class="field-label">연락처</span>
+      <input type="tel" id="clientPhone" class="field-input" placeholder="010-0000-0000">
+    </div>
+    <div class="field">
+      <span class="field-label">이메일 <span style="color:#ef4444">*</span></span>
+      <input type="email" id="clientEmail" class="field-input" placeholder="example@email.com" required>
+    </div>
+    <div class="field">
+      <span class="field-label">작성일</span>
+      <span class="field-value" id="fillDate"></span>
+    </div>
+  </div>
+
+  <!-- Section 1: Required -->
+  <div class="section">
+    <div class="section-header">
+      <span class="section-badge badge-required">REQUIRED</span>
+      <span class="section-title">필수 항목 (착수 전 반드시 필요)</span>
+    </div>
+    <div class="section-desc">아래 9개 항목은 개발 범위 확정과 견적 산출에 필수적인 정보입니다. 빠짐없이 작성 부탁드립니다.</div>
+
+    <!-- Q1 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">1</span>
+        <span class="q-text">주로 사용하시는 자동차 부품 사이트 URL을 알려주세요 (최소 3개)</span>
+      </div>
+      <div class="q-hint">예: RockAuto, AutoZone, PartsGeek, partsouq.com 등</div>
+      <div class="answer-area">
+        <textarea class="large" placeholder="사이트명과 URL을 함께 작성해주세요"></textarea>
+      </div>
+    </div>
+
+    <!-- Q2 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">2</span>
+        <span class="q-text">주요 취급 부품 카테고리는 무엇인가요?</span>
+      </div>
+      <div class="q-hint">예: 브레이크, 엔진, 서스펜션, 전기장치, 외장 등</div>
+      <div class="answer-area">
+        <textarea placeholder="취급하시는 부품 카테고리를 나열해주세요"></textarea>
+      </div>
+    </div>
+
+    <!-- Q3 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">3</span>
+        <span class="q-text">테스트용 샘플 품번(Part Number) 10~20개를 작성해주세요</span>
+      </div>
+      <div class="q-hint">예: 16610-0H040, 04465-33471 등 — 실제 리스팅에 사용하실 품번이면 더 좋습니다</div>
+      <div class="answer-area">
+        <textarea class="large" placeholder="품번을 줄바꿈 또는 쉼표로 구분하여 작성해주세요"></textarea>
+      </div>
+    </div>
+
+    <!-- Q4 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">4</span>
+        <span class="q-text">현재 운영 중인 eBay 리스팅 URL을 3~5개 공유해주세요</span>
+      </div>
+      <div class="q-hint">현재 리스팅 스타일과 구조를 파악하여 최적화 방향을 설정합니다</div>
+      <div class="answer-area">
+        <textarea class="large" placeholder="eBay 리스팅 URL을 줄바꿈으로 구분하여 작성해주세요"></textarea>
+      </div>
+    </div>
+
+    <!-- Q5 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">5</span>
+        <span class="q-text">eBay 셀러 계정 등급은 무엇인가요?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q5"> Basic</label>
+        <label class="q-option"><input type="radio" name="q5"> Premium</label>
+        <label class="q-option"><input type="radio" name="q5"> Anchor</label>
+        <label class="q-option"><input type="radio" name="q5"> Enterprise</label>
+        <label class="q-option"><input type="radio" name="q5"> 잘 모르겠음</label>
+      </div>
+    </div>
+
+    <!-- Q6 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">6</span>
+        <span class="q-text">주 판매 카테고리를 알려주세요</span>
+      </div>
+      <div class="q-hint">eBay Motors &gt; Parts &amp; Accessories 하위 카테고리 기준</div>
+      <div class="answer-area">
+        <textarea placeholder="예: Car & Truck Parts > Brakes & Brake Parts"></textarea>
+      </div>
+    </div>
+
+    <!-- Q7 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">7</span>
+        <span class="q-text">예상 월간 리스팅 건수는 몇 건인가요?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q7"> 100건 미만</label>
+        <label class="q-option"><input type="radio" name="q7"> 100~500건</label>
+        <label class="q-option"><input type="radio" name="q7"> 500~1,000건</label>
+        <label class="q-option"><input type="radio" name="q7"> 1,000~5,000건</label>
+        <label class="q-option"><input type="radio" name="q7"> 5,000건 이상</label>
+      </div>
+    </div>
+
+    <!-- Q8 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">8</span>
+        <span class="q-text">Fitment(호환 차종) 데이터의 정확도 기대치는?</span>
+      </div>
+      <div class="q-hint">정확도 요구 수준에 따라 데이터 소스와 검증 로직의 설계가 달라집니다</div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q8"> (A) 참고용이면 충분</label>
+        <label class="q-option"><input type="radio" name="q8"> (B) 정확해야 함 — 틀리면 eBay 계정에 영향</label>
+      </div>
+      <div class="answer-area">
+        <textarea placeholder="추가 의견이 있으시면 작성해주세요 (선택)" style="min-height: 48px;"></textarea>
+      </div>
+    </div>
+
+    <!-- Q9 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num">9</span>
+        <span class="q-text">타겟 마켓은 어디인가요?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="checkbox"> US (미국)</label>
+        <label class="q-option"><input type="checkbox"> UK (영국)</label>
+        <label class="q-option"><input type="checkbox"> DE (독일)</label>
+        <label class="q-option"><input type="checkbox"> AU (호주)</label>
+        <label class="q-option"><input type="checkbox"> 기타</label>
+      </div>
+      <div class="answer-area">
+        <textarea placeholder="기타를 선택하신 경우 국가명을 작성해주세요" style="min-height: 48px;"></textarea>
+      </div>
+    </div>
+  </div>
+
+  <!-- Section 2: Optional -->
+  <div class="section optional">
+    <div class="section-header">
+      <span class="section-badge badge-optional">OPTIONAL</span>
+      <span class="section-title">권장 항목 (있으면 도움)</span>
+    </div>
+    <div class="section-desc">아래 항목은 필수는 아니지만, 답변해 주시면 더 정밀한 솔루션 설계에 도움이 됩니다.</div>
+
+    <!-- Q10 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">10</span>
+        <span class="q-text">현재 리스팅 1건 작성에 소요되는 시간은?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q10"> 5분 미만</label>
+        <label class="q-option"><input type="radio" name="q10"> 5~15분</label>
+        <label class="q-option"><input type="radio" name="q10"> 15~30분</label>
+        <label class="q-option"><input type="radio" name="q10"> 30분 이상</label>
+      </div>
+    </div>
+
+    <!-- Q11 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">11</span>
+        <span class="q-text">기존 리스팅 관리 방식은?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q11"> 수동 (eBay 웹에서 직접)</label>
+        <label class="q-option"><input type="radio" name="q11"> CSV 파일 업로드</label>
+        <label class="q-option"><input type="radio" name="q11"> eBay Seller Hub</label>
+        <label class="q-option"><input type="radio" name="q11"> 서드파티 툴</label>
+      </div>
+      <div class="answer-area">
+        <textarea placeholder="서드파티 툴을 사용 중이시면 이름을 알려주세요" style="min-height: 48px;"></textarea>
+      </div>
+    </div>
+
+    <!-- Q12 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">12</span>
+        <span class="q-text">관세/통관 계산 시 참고하는 사이트나 방식은?</span>
+      </div>
+      <div class="answer-area">
+        <textarea placeholder="사용 중인 관세 계산 방식이나 참고 사이트가 있으면 작성해주세요"></textarea>
+      </div>
+    </div>
+
+    <!-- Q13 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">13</span>
+        <span class="q-text">eBay Developer Program API 키를 보유하고 계신가요?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q13"> 예, 보유하고 있음</label>
+        <label class="q-option"><input type="radio" name="q13"> 아니오, 없음</label>
+        <label class="q-option"><input type="radio" name="q13"> 잘 모르겠음</label>
+      </div>
+    </div>
+
+    <!-- Q14 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">14</span>
+        <span class="q-text">선호하는 AI 모델이 있나요?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q14"> OpenAI (GPT)</label>
+        <label class="q-option"><input type="radio" name="q14"> Anthropic (Claude)</label>
+        <label class="q-option"><input type="radio" name="q14"> 상관없음</label>
+      </div>
+    </div>
+
+    <!-- Q15 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">15</span>
+        <span class="q-text">현재 사용 중인 자동화 도구가 있나요?</span>
+      </div>
+      <div class="answer-area">
+        <textarea placeholder="사용 중인 도구명과 용도를 작성해주세요 (없으면 '없음')"></textarea>
+      </div>
+    </div>
+
+    <!-- Q16 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">16</span>
+        <span class="q-text">OpenAI 또는 Anthropic API 키를 보유하고 계신가요?</span>
+      </div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q16"> 예, OpenAI</label>
+        <label class="q-option"><input type="radio" name="q16"> 예, Anthropic</label>
+        <label class="q-option"><input type="radio" name="q16"> 둘 다 보유</label>
+        <label class="q-option"><input type="radio" name="q16"> 없음</label>
+      </div>
+    </div>
+
+    <!-- Q17 -->
+    <div class="question">
+      <div class="q-top">
+        <span class="q-num" style="background: #64748b;">17</span>
+        <span class="q-text">완성된 프로젝트를 쟁승메이드 포트폴리오(사례)로 활용해도 괜찮으신가요?</span>
+      </div>
+      <div class="q-hint">고객사명은 비공개 처리 가능합니다</div>
+      <div class="q-options">
+        <label class="q-option"><input type="radio" name="q17"> 괜찮습니다</label>
+        <label class="q-option"><input type="radio" name="q17"> 고객사명 비공개 시 가능</label>
+        <label class="q-option"><input type="radio" name="q17"> 불가합니다</label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Additional Notes -->
+  <div class="section">
+    <div class="section-header">
+      <span class="section-title">추가 요청사항</span>
+    </div>
+    <div class="question" style="border-color: #cbd5e1;">
+      <div class="answer-area" style="padding-left: 0;">
+        <textarea class="large" placeholder="위 항목 외에 추가로 전달하고 싶은 내용이 있으시면 자유롭게 작성해주세요" style="min-height: 120px;"></textarea>
+      </div>
+    </div>
+  </div>
+
+  <!-- Submit Section -->
+  <div class="submit-section">
+    <button type="button" class="save-draft-btn" onclick="saveDraft()">
+      임시 저장
+    </button>
+    <button type="button" class="submit-btn" id="submitBtn" onclick="submitQuestionnaire()">
+      질문지 제출하기
+    </button>
+    <div id="submitMsg" class="submit-msg"></div>
+  </div>
+
+  <!-- Footer Notice -->
+  <div class="footer-notice">
+    <strong>안내사항</strong><br>
+    본 질문지는 프로젝트 범위 확정 및 정확한 견적 산출을 위한 자료입니다.<br>
+    작성하신 정보는 프로젝트 진행 목적 외에 사용되지 않으며, 프로젝트 종료 후 안전하게 폐기됩니다.<br>
+    작성 후 이메일(<strong>bgg8988@gmail.com</strong>)로 회신하시거나, 인쇄 후 스캔본을 보내주셔도 됩니다.
+  </div>
+
+  <!-- Footer -->
+  <div class="footer">
+    <div class="footer-left">
+      <strong>쟁승메이드 (JaengseungMade Co.)</strong><br>
+      담당: 박재오<br>
+      이메일: bgg8988@gmail.com<br>
+      연락처: 010-3907-1392
+    </div>
+    <div class="footer-right">
+      본 문서는 고객 맞춤형 프로젝트<br>
+      사전 조사를 위해 작성되었습니다.<br>
+      &copy; 2026 JaengseungMade
+    </div>
+  </div>
+
+</div>
+
+<script>
+// 작성일 자동 채우기
+document.getElementById('fillDate').textContent = new Date().toLocaleDateString('ko-KR', {
+  year: 'numeric', month: '2-digit', day: '2-digit'
+});
+
+// 모든 응답 수집
+function collectResponses() {
+  const responses = {};
+
+  // 텍스트 질문 (textarea)
+  document.querySelectorAll('.question').forEach((q, idx) => {
+    const num = idx + 1;
+    const textarea = q.querySelector('textarea');
+    const radios = q.querySelectorAll('input[type="radio"]');
+    const checkboxes = q.querySelectorAll('input[type="checkbox"]');
+
+    if (radios.length > 0) {
+      const checked = q.querySelector('input[type="radio"]:checked');
+      if (checked) {
+        responses['q' + num] = checked.closest('.q-option').textContent.trim();
+      }
+    }
+
+    if (checkboxes.length > 0) {
+      const selected = [];
+      checkboxes.forEach(cb => {
+        if (cb.checked) selected.push(cb.closest('.q-option').textContent.trim());
+      });
+      if (selected.length > 0) {
+        responses['q' + num + '_selected'] = selected;
+      }
+    }
+
+    if (textarea) {
+      const val = textarea.value.trim();
+      if (val) {
+        responses['q' + num + (radios.length > 0 || checkboxes.length > 0 ? '_detail' : '')] = val;
+      }
+    }
+  });
+
+  // 추가 요청사항 (마지막 textarea)
+  const lastSection = document.querySelectorAll('.section');
+  const additionalTextarea = lastSection[lastSection.length - 1]?.querySelector('textarea');
+  if (additionalTextarea && additionalTextarea.value.trim()) {
+    responses['additional'] = additionalTextarea.value.trim();
+  }
+
+  return responses;
+}
+
+// 유효성 검사
+function validate() {
+  const name = document.getElementById('clientName').value.trim();
+  const email = document.getElementById('clientEmail').value.trim();
+
+  if (!name) {
+    alert('고객명을 입력해주세요.');
+    document.getElementById('clientName').focus();
+    return false;
+  }
+  if (!email) {
+    alert('이메일을 입력해주세요.');
+    document.getElementById('clientEmail').focus();
+    return false;
+  }
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    alert('올바른 이메일 형식을 입력해주세요.');
+    document.getElementById('clientEmail').focus();
+    return false;
+  }
+  return true;
+}
+
+// 임시 저장 (로컬)
+function saveDraft() {
+  const data = {
+    clientName: document.getElementById('clientName').value,
+    clientEmail: document.getElementById('clientEmail').value,
+    clientPhone: document.getElementById('clientPhone').value,
+    responses: collectResponses(),
+    savedAt: new Date().toISOString()
+  };
+  localStorage.setItem('questionnaire_draft_ebay', JSON.stringify(data));
+
+  const msg = document.getElementById('submitMsg');
+  msg.className = 'submit-msg success';
+  msg.textContent = '임시 저장 완료! (브라우저에 저장됨)';
+  setTimeout(() => { msg.textContent = ''; }, 3000);
+}
+
+// 임시 저장 복원
+function loadDraft() {
+  const saved = localStorage.getItem('questionnaire_draft_ebay');
+  if (!saved) return;
+
+  try {
+    const data = JSON.parse(saved);
+    if (data.clientName) document.getElementById('clientName').value = data.clientName;
+    if (data.clientEmail) document.getElementById('clientEmail').value = data.clientEmail;
+    if (data.clientPhone) document.getElementById('clientPhone').value = data.clientPhone;
+  } catch (e) {
+    // 복원 실패 시 무시
+  }
+}
+
+// 제출
+async function submitQuestionnaire() {
+  if (!validate()) return;
+
+  const btn = document.getElementById('submitBtn');
+  const msg = document.getElementById('submitMsg');
+
+  btn.disabled = true;
+  btn.textContent = '제출 중...';
+  msg.textContent = '';
+
+  const payload = {
+    clientName: document.getElementById('clientName').value.trim(),
+    clientEmail: document.getElementById('clientEmail').value.trim(),
+    clientPhone: document.getElementById('clientPhone').value.trim() || null,
+    responses: collectResponses(),
+    type: 'ebay-tool'
+  };
+
+  try {
+    const res = await fetch('/api/questionnaire/submit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+
+    const result = await res.json();
+
+    if (res.ok && result.success) {
+      msg.className = 'submit-msg success';
+      msg.innerHTML = '질문지가 성공적으로 제출되었습니다!<br>담당자가 확인 후 연락드리겠습니다. 감사합니다.';
+      btn.textContent = '제출 완료';
+      localStorage.removeItem('questionnaire_draft_ebay');
+    } else {
+      throw new Error(result.error || '제출에 실패했습니다.');
+    }
+  } catch (err) {
+    msg.className = 'submit-msg error';
+    msg.textContent = err.message || '서버 오류가 발생했습니다. 이메일(bgg8988@gmail.com)로 직접 보내주세요.';
+    btn.disabled = false;
+    btn.textContent = '질문지 제출하기';
+  }
+}
+
+// 페이지 로드 시 임시 저장 복원
+loadDraft();
+</script>
+
+</body>
+</html>

CONTENT/sns-calendar.md

@@ -0,0 +1,234 @@
+# SNS 30일 포스팅 캘린더
+
+> 채널: 네이버 블로그 / 스레드(Threads) / 카카오 오픈채팅 / 블라인드(직장인 커뮤니티)
+> 주기: 주 5일 (월~금), 채널별 분배
+
+---
+
+## 채널별 전략
+
+| 채널 | 목적 | 빈도 | 형식 |
+|------|------|------|------|
+| 네이버 블로그 | SEO 유입 · 신뢰 구축 | 주 2회 | 800~1,500자 롱폼 |
+| 스레드 / 엑스 | 인지도 · 팔로워 | 주 3회 | 150자 인사이트 |
+| 카카오 오픈채팅 | 관계 유지 · 전환 | 주 1회 | 실용 팁 공지 |
+| 블라인드 | 타겟 커뮤니티 유입 | 월 2회 | 정보글 + 댓글 |
+
+---
+
+## 1주차 (Day 1~7)
+
+### Day 1 (월) — 블로그
+**제목:** 업무 자동화 외주 맡기기 전에 반드시 확인해야 할 5가지
+**핵심 키워드:** 업무 자동화 외주, RPA 개발 외주
+**내용 요약:** 계약서 여부 / 소스코드 인도 / 납기 명시 / AS 기간 / 포트폴리오 확인
+
+### Day 2 (화) — 스레드
+```
+ChatGPT한테 '보고서 써줘' 이러면 안 됩니다.
+
+페르소나 + 컨텍스트 + 포맷 요청을 함께 주면
+답변 퀄리티가 3배 오릅니다.
+
+프롬프트 예시 → [링크]
+```
+
+### Day 3 (수) — 블로그
+**제목:** 파이썬 몰라도 되는 업무 자동화 툴 3가지 (Make.com · Zapier · n8n)
+**핵심 키워드:** 노코드 자동화, Make.com 사용법
+**내용 요약:** 각 툴 특징 / 가격 / 추천 사용 사례
+
+### Day 4 (목) — 스레드
+```
+대기업에서 배운 것 중 부업에 제일 도움 된 것:
+
+문서화.
+
+뭔가를 만들면 왜 만들었는지,
+어떻게 쓰는지를 기록으로 남깁니다.
+
+나중에 나 자신을 구합니다.
+```
+
+### Day 5 (금) — 카카오 오픈채팅 공지
+```
+📌 이번 주 실용 팁
+
+[엑셀 합치기 파이썬 코드 3줄]
+
+폴더 안의 모든 엑셀을 하나로 합칩니다.
+
+import glob, pandas as pd
+files = glob.glob('*.xlsx')
+pd.concat([pd.read_excel(f) for f in files]).to_excel('결과.xlsx', index=False)
+
+더 복잡한 자동화가 필요하면 문의 주세요 🙋
+```
+
+### Day 6~7 (주말) — 휴식 또는 블로그 예약 발행
+
+---
+
+## 2주차 (Day 8~14)
+
+### Day 8 (월) — 블로그
+**제목:** ChatGPT 프롬프트 잘 쓰는 법 — RCTF 공식 완전 정복
+**핵심 키워드:** ChatGPT 프롬프트 잘 쓰는 법, 프롬프트 작성법
+**내용 요약:** Role(역할) + Context(상황) + Task(과제) + Format(형식) 공식
+
+### Day 9 (화) — 스레드
+```
+외주 개발 맡기고 연락 두절된 경험 있는 분들께.
+
+계약 전 이 3가지만 확인하세요:
+1. 계약서가 있나?
+2. 소스코드를 주나?
+3. 납기 지연 시 어떻게 하나?
+
+이 셋 없으면 계약하지 마세요.
+```
+
+### Day 10 (수) — 블로그
+**제목:** 소상공인이 AI를 바로 써먹을 수 있는 업무 TOP 5
+**핵심 키워드:** 소상공인 AI 활용, 자영업자 자동화
+**내용 요약:** 고객 응대 / SNS 콘텐츠 / 재고 관리 / 예약 확인 / 리뷰 답변
+
+### Day 11 (목) — 스레드
+```
+현직 개발자가 부업으로 배운 것:
+
+기술보다 커뮤니케이션이 중요합니다.
+
+클라이언트가 원하는 걸 정확히 파악하지 못하면
+아무리 잘 만들어도 수정 요청이 끊이지 않습니다.
+```
+
+### Day 12 (금) — 블라인드
+**게시판:** 직장인 / 부업·N잡
+**제목:** 현직 대기업 개발자의 부업 6개월 후기 (솔직하게)
+**내용:** 수익, 시간 투자, 잘 된 점, 힘든 점 솔직하게
+**효과:** 공감 → 댓글 → 브랜드 노출
+
+---
+
+## 3주차 (Day 15~21)
+
+### Day 15 (월) — 블로그
+**제목:** 엑셀 자동화 외주 의뢰 전 꼭 알아야 할 것들 (비용·기간·결과물)
+**핵심 키워드:** 엑셀 자동화 외주 비용, 엑셀 자동화 견적
+
+### Day 16 (화) — 스레드
+```
+반복 업무 자동화의 ROI 계산법:
+
+시급(원) × 하루 반복시간(시간) × 월 20일 = 월 손실 비용
+
+자동화 개발 비용이 이것보다 낮으면
+무조건 자동화하는 게 이득입니다.
+```
+
+### Day 17 (수) — 블로그
+**제목:** Make.com으로 30분 만에 만드는 고객 문의 자동화 시스템
+**핵심 키워드:** Make.com 사용법, 고객 문의 자동화
+
+### Day 18 (목) — 스레드
+```
+이미지 생성 AI 쓸 때 흔한 실수:
+
+"귀여운 고양이 그려줘" (X)
+
+"A close-up portrait of a fluffy orange tabby cat,
+soft natural lighting, bokeh background,
+Canon 85mm f/1.4, warm tones, high detail" (O)
+
+언어, 구도, 조명, 카메라까지 써야 합니다.
+```
+
+### Day 19 (금) — 카카오 오픈채팅
+```
+📌 이번 주 팁: Gmail 자동 분류
+
+필터 규칙만 설정해도
+- 거래처 이메일 → 자동 라벨링
+- 스팸성 뉴스레터 → 자동 보관
+- 긴급 문의 → 별표 표시
+
+파이썬까지 안 써도 이것만으로도 체감이 다릅니다.
+```
+
+### Day 21 (일) — 예약 발행
+
+---
+
+## 4주차 (Day 22~30)
+
+### Day 22 (월) — 블로그
+**제목:** 자소서 AI로 쓰면 안 되는 이유 — 그리고 AI를 제대로 활용하는 법
+**핵심 키워드:** 자소서 AI 첨삭, ChatGPT 자소서
+
+### Day 23 (화) — 스레드
+```
+납기 패널티를 계약서에 직접 씁니다.
+
+"납기 지연 1일당 계약금의 1% 감액"
+
+처음엔 어색했는데
+지금은 이게 없으면 신뢰가 안 생긴다고 생각합니다.
+```
+
+### Day 24 (수) — 블로그
+**제목:** 홈페이지 제작 외주 견적 왜 이렇게 차이나나? (20만원 vs 200만원 차이)
+**핵심 키워드:** 홈페이지 제작 비용, 웹사이트 제작 견적
+
+### Day 25 (목) — 스레드
+```
+개발자가 외주 시작하면서 제일 놀란 것:
+
+비기술직 클라이언트분들이
+"이게 되나요?" 물어볼 때
+99%는 됩니다.
+
+안 된다고 생각하는 이유는
+개발을 안 해봐서입니다.
+```
+
+### Day 26 (금) — 블라인드
+**게시판:** IT·개발자
+**제목:** 대기업 재직 중인데 외주 부업 하시는 분들 있나요? 경험 공유
+**내용:** 질문 형식으로 시작 → 댓글에서 자연스럽게 쟁승메이드 소개
+
+### Day 27 (토) — 블로그
+**제목:** 2026년 AI 자동화 트렌드 — 개발자가 본 5가지 변화
+**핵심 키워드:** AI 자동화 2026, RPA 트렌드
+
+### Day 28 (월) — 스레드
+```
+무료 체험 3팀 마감 임박.
+
+AI 자동화 세팅을 무료로 받고
+솔직한 후기 남겨주실 분.
+
+엑셀 자동화 or ChatGPT 프롬프트 세팅.
+카카오 오픈채팅으로 오세요 → [링크]
+```
+
+### Day 29 (화) — 블로그
+**제목:** 파이썬 독학 말고 외주 맡기는 게 나은 경우 vs 직접 배워야 하는 경우
+**핵심 키워드:** 파이썬 자동화 배우기, 자동화 외주 비교
+
+### Day 30 (수) — 회고 & 다음 달 계획
+**채널 전체:** 한 달 결산 포스팅 (블로그 + 스레드)
+- 블로그 방문자 수
+- 문의 건수
+- 후기 획득 수
+- 다음 달 집중할 콘텐츠 방향
+
+---
+
+## 해시태그 모음
+
+**블로그:** #업무자동화 #AI자동화 #엑셀자동화 #파이썬자동화 #ChatGPT활용법 #외주개발 #프리랜서개발자 #RPA
+
+**스레드/인스타:** #업무자동화 #AI활용 #직장인팁 #개발자부업 #ChatGPT #자동화
+
+**블라인드:** 해시태그 없음 — 제목 키워드로 자연 노출

CONTENT/youtube-scripts.md

@@ -0,0 +1,182 @@
+# 유튜브 숏츠 스크립트 10편
+
+> 형식: 훅(0~3초) → 문제 제시(3~10초) → 시연/해결(10~50초) → CTA(50~60초)
+> 목표: 60초 이내, 자막 친화적, 화면 녹화 + 내레이션 형식
+
+---
+
+## 편 1. "회사에서 매일 하는 이 작업, 5초 만에 끝내는 법"
+
+**훅 (0~3초)**
+> "매일 아침 30분씩 하는 엑셀 작업, 파이썬으로 5초 만에 끝냈습니다."
+
+**문제 (3~10초)**
+> "거래처별로 파일을 열고, 데이터를 복사하고, 합치고, 정리하는 작업. 저도 예전엔 매일 했습니다."
+
+**시연 (10~50초)**
+> 화면: 파이썬 스크립트 실행 → 여러 엑셀 파일이 자동으로 하나로 합쳐지는 화면
+> "코드 10줄입니다. 폴더 안의 모든 엑셀을 읽어서 시트별로 합쳐줍니다. 실행하면 끝."
+> 코드 설명 (핵심만): `glob`, `pandas.concat`, `to_excel`
+
+**CTA (50~60초)**
+> "이 스크립트 무료로 드립니다. 댓글에 '엑셀' 달아주시면 보내드려요.
+> 자동화 외주도 받습니다 — 링크는 바이오에."
+
+---
+
+## 편 2. "ChatGPT 이렇게 쓰면 답변 퀄리티 3배 오릅니다"
+
+**훅 (0~3초)**
+> "ChatGPT한테 '보고서 써줘' 이러면 안 됩니다."
+
+**문제 (3~10초)**
+> "대부분의 사람들이 ChatGPT에게 너무 짧게 말합니다. 그러면 AI도 짧게 답합니다."
+
+**시연 (10~50초)**
+> 화면 분할: 나쁜 프롬프트 vs 좋은 프롬프트
+> 나쁜 예: "신제품 마케팅 계획 짜줘"
+> 좋은 예: "당신은 10년 경력의 B2B 마케터입니다. [제품명]의 출시 3개월 계획을 작성해주세요. 타겟: 30~40대 소기업 대표. 채널: 네이버 블로그, 카카오톡. 예산: 월 50만원. 형식: 주차별 액션 아이템 표로."
+> 두 답변 비교 화면
+
+**CTA (50~60초)**
+> "이런 프롬프트 50종 패키지를 12,900원에 팔고 있습니다. 링크는 바이오에."
+
+---
+
+## 편 3. "이메일 답장 하루 2시간 → 10분으로 줄인 방법"
+
+**훅 (0~3초)**
+> "고객 이메일 답장하는 데 하루 2시간 쓰고 계세요?"
+
+**문제 (3~10초)**
+> "비슷한 내용인데 매번 직접 읽고, 생각하고, 타이핑합니다. 자동화할 수 있습니다."
+
+**시연 (10~50초)**
+> 화면: Gmail + Python 스크립트 실행 화면
+> "Gmail API로 이메일 읽기 → 내용 분류 (문의/AS/기타) → ChatGPT로 초안 작성 → 내가 검토 후 발송"
+> 실제 스크립트 실행 시연
+
+**CTA (50~60초)**
+> "이 자동화 외주로 맡겨주시면 3일 안에 납품합니다. 문의는 바이오 링크에서."
+
+---
+
+## 편 4. "부동산 매물 500개 직접 정리했더니 2시간 걸렸는데, 자동화하니 30초"
+
+**훅 (0~3초)**
+> "직방, 다방, 피터팬 매물을 한 번에 엑셀로 뽑을 수 있습니다."
+
+**문제 (3~10초)**
+> "임장 준비할 때 사이트 여러 개 돌아다니면서 복붙하고 계시죠? 그거 다 자동화됩니다."
+
+**시연 (10~50초)**
+> 화면: 부동산 크롤러 실행 → 직방/다방/피터팬 데이터가 엑셀로 합쳐지는 화면
+> "지역명 입력 → 실행 → 4개 플랫폼 동시 수집 → 중복 제거 후 엑셀 저장. 끝."
+
+**CTA (50~60초)**
+> "이 프로그램 3만원에 판매 중입니다. 소스코드 전달, 수정 요청도 가능합니다."
+
+---
+
+## 편 5. "자소서 ChatGPT한테 맡기면 왜 이상한지 — 그리고 해결법"
+
+**훅 (0~3초)**
+> "ChatGPT로 자소서 쓰면 면접관이 바로 압니다. 이 프롬프트 쓰면 다릅니다."
+
+**문제 (3~10초)**
+> "AI 자소서가 걸리는 이유 — 추상적, 구조 없음, 모든 회사에 쓸 수 있는 내용."
+
+**시연 (10~50초)**
+> 화면: 일반 ChatGPT 자소서 vs 최적화 프롬프트 자소서 비교
+> "HR 수석 컨설턴트 페르소나 + STAR 기법 적용 + ATS 키워드 분석 요청"
+> 결과물 비교 (구체성, 수치, 구조 차이)
+
+**CTA (50~60초)**
+> "이 프롬프트 세트 9,900원입니다. 자소서 7가지 항목 전부 포함. 링크는 바이오에."
+
+---
+
+## 편 6. "현직 개발자가 외주 프리랜서 보는 법"
+
+**훅 (0~3초)**
+> "외주 개발 맡겼다가 사기 당한 분들 있죠. 이것만 확인하면 피할 수 있습니다."
+
+**문제 (3~10초)**
+> "계약서 없음, 진행 보고 없음, 소스코드 안 줌. 이 세 가지가 피해의 90%입니다."
+
+**시연 (10~50초)**
+> 화면: 계약서 샘플, 진행 보고 예시 화면
+> "저는 계약 전 계약서 먼저 씁니다. 납기 지연 시 하루 10만원 패널티를 계약서에 명시합니다. 소스코드는 납품과 함께 전달합니다."
+
+**CTA (50~60초)**
+> "외주 맡기기 전에 이 체크리스트 먼저 확인하세요. 무료로 드립니다 — 댓글에 '체크리스트'."
+
+---
+
+## 편 7. "파이썬 모르는 사람도 이 자동화는 할 수 있습니다"
+
+**훅 (0~3초)**
+> "코딩 0줄로 반복 업무 자동화하는 방법 알려드립니다."
+
+**문제 (3~10초)**
+> "Make.com이라는 노코드 툴이 있습니다. 드래그 앤 드롭으로 자동화를 만들 수 있습니다."
+
+**시연 (10~50초)**
+> 화면: Make.com 인터페이스
+> "구글폼 답변이 오면 → 자동으로 이메일 발송 → 구글시트에 기록 → 슬랙 알림"
+> 실제 플로우 연결 시연
+
+**CTA (50~60초)**
+> "이런 Make.com 세팅 대행 8만원에 해드립니다. 1~3일 납품. 링크는 바이오에."
+
+---
+
+## 편 8. "회의록 자동 정리 세팅 — 10분이면 완성"
+
+**훅 (0~3초)**
+> "회의하고 나서 회의록 작성에 30분 쓰고 있다면 이거 보세요."
+
+**문제 (3~10초)**
+> "회의 내용 메모 → 정리 → 공유. 이 과정 전체를 자동화할 수 있습니다."
+
+**시연 (10~50초)**
+> 화면: Clova Note or Whisper API → 텍스트 → ChatGPT 프롬프트 → 정리된 회의록
+> "회의 녹음 → 자동 텍스트 변환 → AI가 결정사항·액션아이템·담당자 자동 정리"
+
+**CTA (50~60초)**
+> "이 세팅 방법 블로그에 자세히 썼습니다. 링크는 댓글에."
+
+---
+
+## 편 9. "소상공인 인스타 콘텐츠 자동 생성 — 월 10시간 절약"
+
+**훅 (0~3초)**
+> "인스타 포스팅 매번 뭐 올릴지 고민하고 계세요?"
+
+**문제 (3~10초)**
+> "주 3회 포스팅, 문구 생각하고 해시태그 달고... 매번 30분씩 씁니다."
+
+**시연 (10~50초)**
+> 화면: 스프레드시트에 제품명/키워드 입력 → ChatGPT API 자동 호출 → 카피 + 해시태그 자동 생성
+> "월 1회 30분 투자로 한 달치 인스타 콘텐츠가 생성됩니다."
+
+**CTA (50~60초)**
+> "소상공인 대상으로 이 세팅 무료로 해드리는 이벤트 진행 중입니다. 단 2팀. 바이오 링크에서."
+
+---
+
+## 편 10. "연봉 5000만원짜리 업무를 자동화한다면"
+
+**훅 (0~3초)**
+> "연봉 5000이면 시급 약 2만 5천원입니다. 하루 2시간 반복 업무면 연 1,250만원어치입니다."
+
+**문제 (3~10초)**
+> "그 시간을 자동화로 되찾으면 어떨까요? 실제로 계산해봤습니다."
+
+**시연 (10~50초)**
+> 화면: 자동화 ROI 계산기 (단순 표)
+> "자동화 개발 비용 50만원, 절약 시간 하루 2시간 × 20일 = 월 40시간 = 100만원어치"
+> "5개월이면 투자 회수. 이후로는 순이익."
+
+**CTA (50~60초)**
+> "어떤 업무를 자동화해야 가장 이득인지 무료로 분석해드립니다. 카카오 오픈채팅으로 오세요."

Dockerfile

@@ -0,0 +1,31 @@
+# 쟁승메이드 Next.js — NAS self-host용 standalone 컨테이너
+# 빌드는 로컬에서(NAS Celeron 빌드 금지). NEXT_PUBLIC_* 는 빌드타임 인라인이라 build-arg로 주입.
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ARG NEXT_PUBLIC_SUPABASE_URL
+ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
+ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
+ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
+ENV NEXT_TELEMETRY_DISABLED=1
+# 빌드타임에만 필요한 더미(일부 route가 모듈 로드 시 env로 SDK 초기화 — 예: new Resend()).
+# 런타임에는 env_file의 실제값이 사용되므로 무해.
+ENV RESEND_API_KEY=re_build_dummy
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+# next.config output:'standalone' 산출물
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+EXPOSE 3000
+CMD ["node", "server.js"]

MARKETING.md

@@ -0,0 +1,579 @@
+# 쟁승메이드 마케팅 플레이북
+
+> 현직 대기업 백엔드 개발자 박재오 · bgg8988@gmail.com · 010-3907-1392
+> **핵심 포지셔닝**: 계약서 먼저 · 납기 패널티 명시 · 소스코드 100% 인도 · 1개월 AS · 연락 두절 없음
+
+---
+
+## 목차
+
+1. [크몽 서비스 카피](#1-크몽-서비스-카피)
+2. [숨고 서비스 카피](#2-숨고-서비스-카피)
+3. [공통 운영 가이드](#3-공통-운영-가이드)
+4. [추가 홍보 채널 전략](#4-추가-홍보-채널-전략)
+5. [위시켓 프리랜서 프로필](#5-위시켓-프리랜서-프로필)
+6. [카카오 오픈채팅방 운영 가이드](#6-카카오-오픈채팅방-운영-가이드)
+
+---
+
+## 1. 크몽 서비스 카피
+
+> 크몽 전략: **키워드 검색 → 포트폴리오 클릭 → 구매** 흐름.
+> 제목 키워드 앞배치, 소개문 구조화, 태그 최적화가 핵심.
+
+---
+
+### 1-1. 외주 개발
+
+**제목**
+```
+[현직 대기업 개발자] 맞춤형 소프트웨어 외주개발 · 계약서 작성 · 소스코드 전달
+```
+
+**소개문**
+```
+안녕하세요, 현직 대기업 백엔드 개발자 박재오입니다.
+
+프리랜서 개발자를 찾다가 중간에 연락이 끊기거나,
+완성물을 받지 못한 경험이 있으신가요?
+
+저는 다릅니다.
+
+✅ 계약서 먼저 작성합니다
+✅ 납기일 지키고, 못 지키면 패널티 명시
+✅ 완료 후 소스코드 100% 인도
+✅ 1개월 무상 AS 기본 포함
+✅ 주 1회 진행 상황 보고
+
+─────────────────────────────
+📌 주요 개발 분야
+─────────────────────────────
+• 업무 자동화 (Python RPA, 엑셀/이메일/보고서 자동화)
+• 웹 서비스 개발 (Next.js, React, FastAPI)
+• 데이터 수집·분석 시스템 (크롤링, 공공API 연동)
+• 텔레그램 봇 / 알림 자동화
+• 관리자 대시보드 / 사내 툴 개발
+
+─────────────────────────────
+📌 실제 납품 사례
+─────────────────────────────
+• 쇼핑몰 경쟁사 가격 모니터링 봇 → 수동 확인 0분/일
+• Gmail 자동화 RPA → 이메일 처리 2시간 → 10분
+• 영업 일보 자동화 → 보고서 작성 3시간 → 5분
+• 주식 자동 매매 시스템 (직접 운영 중)
+
+─────────────────────────────
+📌 진행 방식
+─────────────────────────────
+1단계. 무료 상담 (요구사항 정리)
+2단계. 견적서 + 계약서 작성
+3단계. 개발 착수 (주 1회 보고)
+4단계. 검수 + 소스코드 인도
+5단계. 1개월 무상 AS
+
+처음 외주를 맡기시는 분도 걱정 없이 진행할 수 있도록 단계마다 안내드립니다.
+```
+
+**패키지**
+
+| 구분 | 가격 | 내용 | 기간 | AS |
+|------|------|------|------|----|
+| 베이직 | 30만원~ | 단순 스크립트·봇 | 1~2주 | 1개월 |
+| 스탠다드 | 80만원~ | 자동화 시스템·API 연동 | 2~4주 | 1개월 |
+| 프리미엄 | 200만원~ | 풀스택 웹서비스 | 4~8주 | 3개월 |
+
+**태그**
+```
+외주개발, 프리랜서개발자, 파이썬개발, 업무자동화, 웹개발, RPA, 소프트웨어개발, 맞춤개발, 백엔드개발, 자동화프로그램
+```
+
+---
+
+### 1-2. 업무 자동화
+
+**제목**
+```
+[현직 대기업 개발자] 엑셀·이메일·보고서 업무 자동화 개발 · Python RPA · 반복업무 제거
+```
+
+**소개문**
+```
+안녕하세요, 박재오입니다.
+매일 반복하는 업무, 자동화하면 하루 몇 시간을 돌려받을 수 있습니다.
+
+─────────────────────────────
+📌 이런 분께 딱 맞습니다
+─────────────────────────────
+☑ 매일 같은 엑셀 파일을 수작업으로 정리하고 있다면
+☑ 이메일 분류·답장 초안을 매번 손으로 작성한다면
+☑ 보고서를 만드는 데 매주 2~3시간씩 쏟고 있다면
+☑ 여러 사이트에서 데이터를 직접 긁어 모으고 있다면
+
+─────────────────────────────
+📌 자동화 가능한 업무
+─────────────────────────────
+• 엑셀 데이터 집계 → 보고서 자동 생성 (PDF/이메일 발송)
+• 이메일 자동 분류 · 답변 초안 작성
+• 웹사이트 데이터 자동 수집 (크롤링)
+• 경쟁사 가격 모니터링 + 텔레그램 알림
+• 공공데이터 API 연동 자동 수집
+• PPT 자동 생성 (데이터 기반)
+• 카카오톡·텔레그램·슬랙 알림 봇
+
+─────────────────────────────
+📌 실제 납품 결과
+─────────────────────────────
+"보고서 작성 3시간 → 5분, 매일 09:00 자동 발송" — 영업팀 고객
+"이메일 처리 일 2시간 → 10분" — 무역업 고객
+"경쟁사 50개 상품 매일 자동 추적, 수동 확인 0분" — 쇼핑몰 고객
+
+─────────────────────────────
+📌 진행 방식
+─────────────────────────────
+① 무료 상담 → 자동화 가능 여부 판단
+② 견적 + 계약서 작성
+③ 개발 + 테스트
+④ 소스코드 인도 + 사용법 가이드 문서
+⑤ 1개월 무상 AS
+
+자동화가 가능한지 확인만 해도 됩니다. 부담 없이 먼저 문의해 주세요.
+```
+
+**패키지**
+
+| 구분 | 가격 | 내용 | 기간 |
+|------|------|------|------|
+| 베이직 | 15만원~ | 단일 반복 업무 자동화 | 3~7일 |
+| 스탠다드 | 40만원~ | 복합 자동화 + 알림 연동 | 1~2주 |
+| 프리미엄 | 100만원~ | 다부서 통합 자동화 시스템 | 2~4주 |
+
+**태그**
+```
+업무자동화, 엑셀자동화, Python자동화, RPA, 보고서자동화, 크롤링, 이메일자동화, 텔레그램봇, 반복업무, 자동화프로그램
+```
+
+---
+
+### 1-3. 홈페이지 제작
+
+**제목**
+```
+[현직 대기업 개발자] 반응형 홈페이지 · 랜딩페이지 · 소개페이지 제작 · 직접 개발 · 템플릿 X
+```
+
+**소개문**
+```
+안녕하세요, 박재오입니다.
+템플릿 없이, 처음부터 직접 코딩합니다.
+
+─────────────────────────────
+📌 이런 분께 추천합니다
+─────────────────────────────
+☑ 업체 소개 / 서비스 소개 페이지가 필요한 소상공인
+☑ 포트폴리오·이력서 사이트가 필요한 프리랜서
+☑ 신규 서비스 런칭 랜딩페이지가 필요한 스타트업
+☑ 워드프레스·카페24 없이 직접 관리하고 싶은 분
+
+─────────────────────────────
+📌 제작 방식
+─────────────────────────────
+• 템플릿 X — 디자인부터 퍼블리싱까지 직접 제작
+• 모바일 완벽 대응 (반응형)
+• 빠른 로딩 속도 (Next.js / React 기반)
+• Vercel 무료 배포 포함 (도메인 연결 안내)
+• 소스코드 100% 인도
+
+─────────────────────────────
+📌 포함 항목
+─────────────────────────────
+✅ 기획 상담 1회
+✅ 화면 설계 (와이어프레임)
+✅ 반응형 개발
+✅ 문의 폼 연동 (이메일 수신)
+✅ 배포 + 도메인 연결 안내
+✅ 1개월 무상 수정
+
+─────────────────────────────
+📌 기간 및 비용
+─────────────────────────────
+• 단일 페이지 (랜딩): 2~5일 / 50만원~
+• 5페이지 이하 소개 사이트: 1~2주 / 100만원~
+• 관리자 기능 포함: 2~4주 / 200만원~
+```
+
+**태그**
+```
+홈페이지제작, 랜딩페이지, 반응형웹, 소개페이지, 웹개발, Next.js, React, 소상공인홈페이지, 포트폴리오사이트, 직접개발
+```
+
+---
+
+## 2. 숨고 서비스 카피
+
+> 숨고 전략: **고객이 요청 → 전문가가 제안** 흐름.
+> 제안서 첫 줄이 클릭률 결정. 간결함 + 신뢰 + 인간미가 핵심.
+
+---
+
+### 2-1. 외주 개발
+
+**프로필 한 줄 소개**
+```
+현직 대기업 백엔드 개발자 · 계약서 먼저 쓰고, 납기 지키고, 소스코드 드립니다
+```
+
+**제안서 본문**
+```
+안녕하세요, 박재오입니다.
+
+요청 내용 잘 읽었습니다.
+[고객 요청 핵심 한 줄 요약] 작업이 필요하시군요.
+
+비슷한 프로젝트 경험이 있어 충분히 도와드릴 수 있습니다.
+
+─────────────────
+저는 이렇게 합니다
+─────────────────
+✅ 진행 전에 계약서부터 씁니다 (구두 약속 X)
+✅ 납기일은 반드시 지킵니다 — 못 지키면 패널티 명시
+✅ 개발 중 주 1회 진행 상황 보고
+✅ 완료 후 소스코드 100% 드립니다
+✅ 1개월은 무상으로 수정·보완해드립니다
+
+개발자 찾다가 연락이 끊기거나 결과물을 못 받으신 분들이
+많으셔서, 저는 처음부터 이 부분을 확실히 약속드립니다.
+
+먼저 30분 정도 무료로 상담해드리겠습니다.
+어떤 기능이 필요하신지 편하게 말씀해 주세요.
+```
+
+---
+
+### 2-2. 업무 자동화
+
+**프로필 한 줄 소개**
+```
+반복 업무 자동화 전문 · 엑셀·이메일·보고서·크롤링 · 실제 운영 중인 자동화 시스템 다수
+```
+
+**제안서 본문**
+```
+안녕하세요, 박재오입니다.
+
+[고객 요청 업무] 자동화, 충분히 가능합니다.
+
+직접 운영 중인 자동화 시스템이 여러 개 있고,
+비슷한 의뢰를 여럿 납품해드렸습니다.
+
+─── 최근 비슷한 사례 ───
+• 영업팀 일보 자동화 → 보고서 작성 3시간 → 5분
+• 쇼핑몰 가격 모니터링 → 수동 확인 완전 제거
+• Gmail 자동화 → 이메일 처리 2시간 → 10분
+
+자동화가 가능한지 모르겠다고 하셔도 괜찮습니다.
+먼저 무료로 확인해드리겠습니다.
+
+계약서 작성 후 착수, 소스코드 전달, 1개월 AS까지 기본입니다.
+편하게 연락 주세요.
+```
+
+---
+
+### 2-3. 홈페이지 제작
+
+**프로필 한 줄 소개**
+```
+홈페이지 직접 개발 · 템플릿 X · 반응형 · 소스코드 전달 · 배포까지
+```
+
+**제안서 본문**
+```
+안녕하세요, 박재오입니다.
+
+[고객 업종/목적] 홈페이지 제작, 도와드리겠습니다.
+
+템플릿이나 워드프레스 없이 처음부터 직접 코딩합니다.
+그래서 원하시는 대로 만들어드릴 수 있습니다.
+
+─── 기본 포함 사항 ───
+✅ 모바일 완벽 대응
+✅ 빠른 로딩 (Next.js 기반)
+✅ 문의 폼 연동 (이메일 수신)
+✅ 배포 + 도메인 연결
+✅ 소스코드 전달
+✅ 1개월 무상 수정
+
+계약서 먼저 쓰고, 납기 지키고, 중간 보고도 드립니다.
+개발자 연락 두절 걱정 없이 맡기실 수 있습니다.
+
+먼저 어떤 페이지가 필요하신지 말씀해 주세요.
+같이 정리해드리겠습니다.
+```
+
+---
+
+## 3. 공통 운영 가이드
+
+| 항목 | 크몽 | 숨고 |
+|------|------|------|
+| **제목 전략** | 키워드 앞배치 + 대괄호 경력 표시 | 프로필 한 줄로 차별점 압축 |
+| **가격 노출** | 패키지 3단계 명시 | 최저가 노출 후 상담 유도 |
+| **응답 속도** | 24시간 이내 응답 뱃지 목표 | 요청 후 1시간 이내 제안 발송 |
+| **후기 전략** | 초반 3건 지인 의뢰로 확보 | 5점 후기 누적 → 노출 순위 상승 |
+| **CTA** | "무료 상담 문의" 버튼 | 제안서 발송 → 카카오 연결 |
+
+**어디서든 반복할 핵심 5문장**
+```
+계약서 먼저 작성합니다.
+납기일을 지킵니다. 못 지키면 패널티를 명시합니다.
+완료 후 소스코드 100% 드립니다.
+1개월 무상 AS가 기본입니다.
+연락 두절 없습니다.
+```
+
+---
+
+## 4. 추가 홍보 채널 전략
+
+### 4-1. 콘텐츠 마케팅 (무료 · 장기)
+
+#### 네이버 블로그
+가장 빠르게 검색 유입을 만들 수 있는 채널. "외주 개발" 관련 정보성 글이 강점.
+
+| 주제 예시 | 검색 의도 |
+|-----------|-----------|
+| `프리랜서 개발자 고르는 법 — 연락 두절 피하는 5가지 체크리스트` | 외주 개발 의뢰 예정자 |
+| `엑셀 업무 자동화, 직접 해보기 vs 개발자 의뢰 — 비용 비교` | 자동화 관심자 |
+| `소상공인 홈페이지 제작 비용 현실적으로 알아보기` | 홈페이지 필요 소상공인 |
+| `파이썬으로 내 업무 자동화하기 — 실제 사례 3가지` | 자동화 입문자 |
+| `크몽 외주 개발 의뢰 전에 꼭 확인해야 할 것들` | 크몽 잠재 고객 |
+
+> **운영 팁**: 글 말미에 "무료 상담 링크(쟁승메이드)" 자연스럽게 삽입. 월 4~8편 꾸준히.
+
+#### 유튜브 / 쇼츠
+보여주기 콘텐츠가 신뢰도를 폭발적으로 높임.
+
+| 영상 아이디어 | 형식 |
+|---------------|------|
+| `엑셀 3시간 업무, 자동화하면 5분 됩니다 (실제 시연)` | 쇼츠 60초 |
+| `개발자 외주 맡기다 돈 날린 실제 사례 — 계약서 없이 진행하면 생기는 일` | 롱폼 7~10분 |
+| `텔레그램 봇 만들어서 가격 모니터링 자동화 — 실제 코드 공개` | 롱폼 15분 |
+| `내가 직접 만든 주식 자동매매 프로그램 — 2년째 운영 중` | 롱폼 10분 |
+
+---
+
+### 4-2. 커뮤니티 마케팅 (무료 · 즉효)
+
+직접 링크 홍보보다 **도움 주는 댓글 → 자연스러운 유입** 방식이 효과적.
+
+| 커뮤니티 | 공략 방법 |
+|----------|-----------|
+| **클리앙 · 루리웹** | "자동화 가능한가요?" 류 질문 글에 실제 사례 답변 + 프로필 링크 |
+| **네이버 카페 (스타트업, 소상공인)** | "개발자 구해요" 글에 제안, 정보성 글 기고 |
+| **오픈카카오 (사업자/스타트업 채널)** | 자동화·개발 관련 질문에 전문 답변 |
+| **링크드인** | 프로젝트 케이스 스터디 포스팅 (Before → After 수치 공개) |
+| **X (트위터)** | 자동화 팁 쓰레드 → 사이트 링크 |
+
+---
+
+### 4-3. 포트폴리오 플랫폼 등록 (무료)
+
+| 플랫폼 | 특징 | 등록 방법 |
+|--------|------|-----------|
+| **위시켓** | B2B 프로젝트 중심, 단가 높음 | 프리랜서 프로필 + 포트폴리오 등록 |
+| **라우드소싱** | 디자인·개발 공모전·의뢰 혼합 | 프리랜서 등록, 프로젝트 입찰 |
+| **탈잉** | 재능 판매 + 강의 | 자동화 강의 or 1:1 컨설팅 |
+| **오투잡** | 소규모 의뢰 다수 | 단순 업무 자동화·스크립트 판매 |
+| **GitHub 프로필** | 개발자 신뢰도 핵심 | README에 포트폴리오·연락처 정리 |
+
+---
+
+### 4-4. 네트워킹 (오프라인·온라인)
+
+| 활동 | 기대 효과 |
+|------|-----------|
+| **IT 밋업·해커톤 참가** | 잠재 고객 직접 만남, 명함 배포 |
+| **소상공인 협회·상공회의소** | 디지털 전환 수요 높은 실사용자층 접근 |
+| **스타트업 스쿨 / 엑셀러레이터 행사** | MVP 개발 의뢰 연결 |
+| **지인 추천 인센티브** | 소개 성사 시 다음 의뢰 10% 할인 제공 |
+
+---
+
+### 4-5. 유료 광고 (예산 있을 때)
+
+| 채널 | 예산 | 타겟 키워드 |
+|------|------|-------------|
+| **네이버 검색광고** | 월 10~30만원 | `외주 개발`, `업무 자동화 개발`, `홈페이지 제작` |
+| **카카오 비즈보드** | 월 10~20만원 | 소상공인·자영업자 타겟팅 |
+| **구글 검색광고** | 월 10만원~ | `python 자동화 외주`, `프리랜서 개발자` |
+
+> **우선순위**: 콘텐츠 마케팅(블로그) → 커뮤니티 → 크몽/숨고 → 유료 광고 순서로 단계적 진행 권장.
+
+---
+
+### 4-6. 신뢰도 빌드업 로드맵
+
+```
+1개월차  크몽/숨고 등록 + 블로그 4편 작성 + 지인 후기 2~3건 확보
+2개월차  쇼츠 영상 4개 + 커뮤니티 답변 활동 시작
+3개월차  블로그 검색 유입 확인 + 크몽 리뷰 5개 달성 → 노출 순위 상승
+6개월차  위시켓 등록 + 링크드인 케이스 스터디 포스팅
+12개월차 재의뢰·소개 고객으로 신규 유입 없이도 수주 안정화
+```
+
+---
+
+---
+
+## 5. 위시켓 프리랜서 프로필
+
+> 위시켓 전략: **경력·기술 스택 중심** 플랫폼. 클라이언트가 검색하거나 먼저 제안을 보내는 구조.
+> 크몽 대비 단가 높고 B2B 프로젝트 비중이 큼. 프로필 완성도 100%가 노출의 전제 조건.
+
+### 한 줄 소개 (검색 키워드 포함)
+```
+현직 대기업 백엔드 개발자 · Python 업무 자동화 · 웹 서비스 개발 · 납기 보장
+```
+
+### 자기소개 본문
+```
+안녕하세요, 현직 대기업 백엔드 개발자 박재오입니다.
+
+본업과 병행하며 업무 자동화·웹 개발 프리랜서 프로젝트를 진행하고 있습니다.
+직접 운영 중인 서비스(주식 자동매매 시스템, 로또 분석 플랫폼)가 있어
+설계부터 운영까지 전 과정을 직접 경험했습니다.
+
+──────────────────────────
+주요 기술
+──────────────────────────
+• Backend: Python, FastAPI, Node.js, Next.js
+• 자동화: RPA, Selenium, Gmail API, Google Apps Script, OpenPyXL
+• 데이터: PostgreSQL, SQLite, 공공데이터 API, 웹 크롤링
+• 인프라: Vercel, NAS 자체 서버 운영, Supabase
+
+──────────────────────────
+진행 방식 (차별점)
+──────────────────────────
+✅ 계약서 먼저 작성 (구두 약속 없음)
+✅ 납기일 명시 + 지연 시 패널티 조항
+✅ 개발 중 주 1회 진행 보고
+✅ 완료 후 소스코드 100% 인도
+✅ 1개월 무상 AS
+
+──────────────────────────
+납품 사례
+──────────────────────────
+• 영업팀 일보 자동화 → 보고서 작성 3시간 → 5분
+• 쇼핑몰 경쟁사 가격 모니터링 봇 → 수동 확인 0분/일
+• Gmail 자동화 RPA → 이메일 처리 2시간 → 10분
+
+포트폴리오: jaengseung-made.vercel.app
+```
+
+### 프로필 등록 체크리스트
+
+```
+□ 프로필 사진 (전문적인 사진 or 깔끔한 단색 배경)
+□ 기술 스택 태그 최대한 추가 (Python, Next.js, RPA, FastAPI 등)
+□ 포트폴리오 URL 입력 (jaengseung-made.vercel.app)
+□ 희망 단가: 시간당 5~7만원 (초반, 경력 쌓이면 상향)
+□ 가능 프로젝트 유형: 단기·중기 모두 체크
+□ 프로필 완성도 100% (미완성 시 노출 차단됨)
+□ 포트폴리오 파일 첨부 (PDF 1~2페이지)
+```
+
+### 위시켓 vs 크몽/숨고 차이
+
+| 항목 | 위시켓 | 크몽/숨고 |
+|------|--------|-----------|
+| **주 사용자** | 스타트업, 중소기업 | 개인, 소상공인 |
+| **평균 단가** | 높음 (프로젝트 단위) | 낮음~중간 |
+| **프로젝트 규모** | 중대형 | 소~중형 |
+| **수수료** | 10~15% | 20% 내외 |
+| **경쟁 방식** | 제안서 입찰 | 검색 노출 |
+| **핵심 무기** | 경력·기술력 | 후기·가격 |
+
+---
+
+## 6. 카카오 오픈채팅방 운영 가이드
+
+> 오픈채팅 링크: https://open.kakao.com/o/s9stoNvb
+
+### 채팅방 기본 설정
+
+```
+채팅방 이름:  쟁승메이드 · 개발 무료 상담
+프로필 사진:  쟁승메이드 로고 이미지
+채팅방 설명:  현직 대기업 개발자의 무료 상담 채널
+              외주 개발 · 업무 자동화 · 홈페이지 제작
+              부담 없이 질문하세요 :)
+```
+
+### 공지 (상단 고정) — 입장 즉시 보이는 텍스트
+
+```
+📌 쟁승메이드 무료 상담 채널입니다
+
+안녕하세요, 현직 대기업 개발자 박재오입니다.
+개발 관련 고민이라면 무엇이든 편하게 물어보세요.
+
+──────────────────
+💬 상담 가능 분야
+──────────────────
+• 엑셀·이메일·보고서 업무 자동화
+• 웹사이트·홈페이지 제작
+• 맞춤형 소프트웨어 개발
+• "이런 것도 되나요?" 가능 여부 확인
+
+──────────────────
+📋 상담 시작하는 법
+──────────────────
+아래 형식으로 남겨주시면 빠르게 답변드립니다.
+
+[원하는 것]
+[예산 범위 (대략적으로)]
+[연락 가능 시간]
+
+🌐 포트폴리오: jaengseung-made.vercel.app
+```
+
+### 입장 인사 메시지 (설정 위치: 관리 → 입장 메시지)
+
+```
+반갑습니다! 쟁승메이드 상담 채널에 오신 걸 환영합니다 😊
+
+궁금하신 것 편하게 남겨주세요.
+"이런 것도 자동화 되나요?" 같은 가벼운 질문도 좋습니다.
+
+보통 1~2시간 내에 답변드립니다.
+```
+
+### 파일 탭에 올려둘 문서
+
+| 파일명 | 내용 | 목적 |
+|--------|------|------|
+| `쟁승메이드_서비스소개.pdf` | 서비스 목록 + 가격 요약 1페이지 | 신뢰 + 가격 가이드 |
+| `업무자동화_체크리스트.pdf` | 자동화 가능 여부 자가진단 10문항 | 리드 필터링 |
+| `외주개발_진행절차.pdf` | 계약~납품 5단계 플로우 | 프로세스 신뢰 확보 |
+
+### 부재 시 공지 템플릿 (복사 사용)
+
+```
+⏰ 현재 업무 중입니다.
+퇴근 후 19시 이후에 확인하겠습니다.
+
+급하신 분은 아래 문의 폼을 이용해 주세요.
+👉 jaengseung-made.vercel.app/freelance
+```
+
+### 운영 루틴
+
+```
+출근 전 (08:30)   전날 밤 문의 확인 + 답변
+점심 (12:30)      빠른 확인 + 간단 답변
+퇴근 후 (19:00)   상세 답변 + 견적 안내
+```
+
+---
+
+*최종 수정: 2026-03-23*

README.md

@@ -1,171 +1,75 @@
-# 🤖 쟁승메이드 - RPA 자동화 & 비즈니스 솔루션
+# 쟁승메이드 (JaengseungMade)
 
-대기업 출신 개발자가 제공하는 전문 비즈니스 솔루션 포트폴리오 웹사이트
+> 현직 대기업 백엔드 개발자가 직접 설계·운영하는 개발 서비스 플랫폼
+> **검증된 자동화를 SaaS로 + 필요 시 커스텀 외주.**
 
-## 📌 프로젝트 소개
-
-**쟁승메이드**는 RPA 자동화, 웹 개발, 앱 개발 서비스를 제공하는 비즈니스 솔루션 포트폴리오 사이트입니다.
-외주 개발 서비스를 소개하고 프로젝트를 전시하여 고객을 유치하기 위한 전문적인 랜딩 페이지입니다.
-
-### ✨ 주요 기능
-
-- 🎨 현대적이고 프로페셔널한 디자인
-- 📱 완벽한 반응형 (모바일/태블릿/데스크톱)
-- ⚡ Next.js 14 + TypeScript로 빠른 성능
-- 🎯 RPA 자동화 서비스 강조
-- 💼 서비스 카탈로그 (금액별 분류)
-- 🖼️ 프로젝트 포트폴리오 섹션
-- 📬 문의 폼
-
-## 🛠 기술 스택
-
-- **Framework**: Next.js 14 (App Router)
-- **Language**: TypeScript
-- **Styling**: Tailwind CSS
-- **Deployment**: Vercel (권장)
-
-## 🚀 시작하기
-
-### 1. 개발 서버 실행
-
-```bash
-# 의존성 설치
-npm install
-
-# 개발 서버 시작
-npm run dev
-```
-
-브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 확인하세요.
-
-### 2. 프로덕션 빌드
-
-```bash
-# 빌드
-npm run build
-
-# 프로덕션 서버 실행
-npm start
-```
-
-## 📦 프로젝트 구조
-
-```
-jaengseung-made/
-├── app/
-│   ├── page.tsx          # 메인 랜딩 페이지
-│   ├── layout.tsx        # 루트 레이아웃
-│   └── globals.css       # 글로벌 스타일
-├── public/               # 정적 파일
-└── package.json
-```
-
-## 🌐 배포 가이드
-
-### 옵션 1: Vercel 배포 (추천 - 무료)
-
-1. [Vercel](https://vercel.com) 계정 생성
-2. GitHub에 프로젝트 푸시
-3. Vercel에서 "Import Project" 클릭
-4. 저장소 선택하고 배포
-5. 자동으로 HTTPS, CDN 제공
-
-**장점**: 무료, 자동 배포, 글로벌 CDN, HTTPS
-
-### 옵션 2: Netlify 배포 (무료)
-
-1. [Netlify](https://netlify.com) 계정 생성
-2. "Add new site" → "Import from Git"
-3. 빌드 설정:
-   - Build command: `npm run build`
-   - Publish directory: `.next`
-4. 배포
-
-### 옵션 3: Synology NAS 배포
-
-1. Docker 설치 (Synology Docker 패키지)
-2. Dockerfile 생성:
-```dockerfile
-FROM node:18-alpine
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci
-COPY . .
-RUN npm run build
-EXPOSE 3000
-CMD ["npm", "start"]
-```
-3. 이미지 빌드 및 실행
-4. 포트 포워딩 설정 (80 → 3000)
-
-**주의**: NAS는 속도/안정성이 클라우드보다 낮을 수 있음
-
-## 🔧 커스터마이징
-
-### 연락처 정보 수정
-
-`app/page.tsx` 파일에서 다음 정보를 수정하세요:
-
-```tsx
-// 이메일
-contact@jaengseung.com → 실제 이메일
-
-// 전화번호
-010-0000-0000 → 실제 전화번호
-```
-
-### 서비스 가격 수정
-
-`app/page.tsx`의 Services Section에서 가격 수정:
-
-```tsx
-<div className="text-3xl font-bold mb-2">50만원~</div>
-```
-
-### 포트폴리오 추가
-
-`app/page.tsx`의 Portfolio Section에 프로젝트 카드 추가
-
-## 📋 다음 단계
-
-1. **도메인 구매**
-   - Cloudflare (연 $10~15)
-   - GoDaddy
-   - Gabia (한국)
-
-2. **도메인 연결**
-   - Vercel: Dashboard에서 "Add Domain"
-   - DNS 설정: A 레코드 또는 CNAME
-
-3. **플랫폼 등록**
-   - [크몽](https://kmong.com) - 서비스 등록
-   - [숨고](https://soomgo.com) - 프로필 생성
-   - 포트폴리오 URL 첨부
-
-4. **SEO 최적화**
-   - Google Search Console 등록
-   - 사이트맵 제출
-   - 메타 태그 최적화 (이미 적용됨)
-
-5. **실제 프로젝트 추가**
-   - 샘플 RPA 프로젝트 개발
-   - GitHub에 Public Repository 생성
-   - 포트폴리오 섹션에 링크 추가
-
-## 💡 추가 기능 아이디어
-
-- [ ] 문의 폼 백엔드 연동 (Formspree, Netlify Forms)
-- [ ] Google Analytics 추가
-- [ ] 블로그 섹션 (기술 글 작성)
-- [ ] 고객 후기 섹션
-- [ ] 다크 모드
-- [ ] 다국어 지원 (영어)
-- [ ] 챗봇 위젯 (카카오톡 채널)
-
-## 📞 문의
-
-프로젝트 관련 문의: bgg8988@gmail.com
+🔗 https://jaengseung-made.com
 
 ---
 
-**쟁승메이드** - 비즈니스 성장을 위한 전문 개발 솔루션
+## 서비스 구성
+
+| 영역 | 경로 | 설명 |
+|------|------|------|
+| **SaaS 제품** | `/packages` | 검증된 자동화를 월 구독 패키지로 (첫 제품 준비 중) |
+| **AI 음악** | `/music/packs` | AI 음악 생성 개발 가이드 패키지 — 1회 결제(₩39k/99k/149k) |
+| **커스텀 외주** | `/work` | 외주 개발 · 웹사이트 제작 · AI 사주 |
+| **AI 사주** | `/work/saju` | 사주팔자 계산 + AI 12항목 해석 (Gemini) |
+
+---
+
+## 기술 스택
+
+- **Framework**: Next.js 16 (App Router, TypeScript), Tailwind CSS v4
+- **Auth/DB**: Supabase (GoTrue Auth · PostgreSQL · RLS · Storage)
+- **결제**: Portone (계좌이체/카카오페이/토스페이)
+- **메일**: Resend
+- **AI**: Google Gemini (사주 해석)
+- **Analytics**: Google Analytics (G-WG77RNHXRK)
+
+---
+
+## 배포
+
+현재 **Vercel + Supabase(클라우드)**에서 운영 중이며,
+**NAS 자체 호스팅(self-host Supabase + Next standalone + 개인 Gitea)**으로 이전을 진행하고 있다.
+
+- 빌드는 로컬에서 수행(`output: 'standalone'`), 도커 이미지를 NAS로 배포
+- self-host Supabase 스택은 docker-compose(PostgreSQL 17 · GoTrue · PostgREST · Storage · Kong)
+- 상세 계획: `docs/superpowers/plans/2026-06-02-nas-selfhost-migration.md`
+
+### 로컬 개발
+```bash
+npm install
+npm run dev      # http://localhost:3000
+npm run build    # standalone 빌드 (.next/standalone)
+```
+
+환경변수는 `.env.local`(예시: `.env.local.example`) 참조. `.env*`는 커밋 금지.
+
+---
+
+## 프로젝트 구조
+
+```
+app/
+  page.tsx                 홈 (SaaS·음악·외주 3축)
+  packages/                SaaS 제품 카탈로그 (확장형 lib/saas-catalog.ts)
+  music/packs/             AI 음악 생성 개발 가이드 패키지
+  work/                    커스텀 외주 (freelance·website·saju)
+  api/                     API routes (Supabase service_role 서버 접근)
+  admin/                   관리자 (견적·문의·설문·통계)
+lib/                       supabase 클라이언트·products·saju 엔진 등
+supabase/                  schema.sql · migrations
+docs/superpowers/          spec·plan 문서
+```
+
+---
+
+## 운영자
+
+**박재오** · 현직 대기업 백엔드 개발자
+로또 랩, 주식 자동매매 등 개인 NAS 서버에서 실서비스 운영 중.
+
+- 📧 bgg8988@gmail.com · 📱 010-3907-1392
+- 🌐 https://jaengseung-made.com

STRATEGY.md

@@ -0,0 +1,261 @@
+# 쟁승메이드 사업 전략 플레이북
+
+> 최초 작성: 2026-03-24 | 마지막 업데이트: 2026-05-31
+> 작성 방식: 마케터 · 인플루언서 · 사업가 3인 원탁 회의 기반
+
+> **⚠️ 정체성 재정의 (2026-05-29, 본 문서 일부 전제 갱신)**
+> 현재 정체성은 **"SaaS 제품 판매(메인) + 커스텀 외주(보조) 병행"**이다.
+> - **외주 유입 채널: 크몽·숨고 등 외부 프리랜서 마켓은 사용하지 않는다.**
+>   대신 **인스타 카드뉴스(Hedgy75) 직접 유입**으로 전환한다.
+>   → 아래 "크몽/숨고 AI 자동화 세팅 대행" 등 마켓 전제 섹션은 과거 전략 기록이며,
+>     현 방침과 충돌 시 본 정책이 우선한다.
+> - SaaS 제품 카탈로그는 `/packages`, AI 음악은 단품 가이드 패키지(`/music`)로 분리.
+> - 블로그 자동화는 폐기(2026-05-17 결정, 코드 제거 완료).
+> 상세: `docs/superpowers/plans/2026-05-31-saas-pivot-migration.md`
+
+---
+
+## 📊 현황 진단 — 3인 전문가 평가
+
+### 마케터 관점
+
+**강점**
+- "납기 지연 시 하루 10만원 패널티" — 경쟁자 없는 강력한 훅(Hook)
+- "현직 대기업 개발자" — 프리랜서 시장에서 희소한 신뢰 신호
+- 계약서·소스코드·AS의 공포 해소(Fear Removal) 포인트 명확
+
+**개선 필요**
+- 전환 퍼널이 단층 구조 (방문 → 문의만 존재, 중간 단계 없음)
+- 소셜 프루프 부재 — 실제 고객 후기·스크린샷 없음 → 무료 체험 배너 추가로 수집 중
+- 콘텐츠 마케팅 SEO 유입 미확보 → 블로그/유튜브 콘텐츠 자산 준비 완료, 업로드 대기
+
+### 인플루언서 관점
+
+**강점**
+- 사주·로또·AI 자동화 시연 — SNS 바이럴 소재 3종 보유
+- 저가 프롬프트 상품 (9,900~12,900원) — 숏폼 연동에 최적화
+- 브랜드 스토리 원고 완성 (CONTENT/brand-story.md)
+
+**개선 필요**
+- 유튜브 채널 개설 및 숏츠 업로드 (스크립트 10편 준비 완료)
+- 네이버 블로그 계정 개설 및 글 업로드 (초안 10편 준비 완료)
+
+### 사업가 관점
+
+**강점**
+- 개발자 직접 운영 → 초기 마진 극히 높음
+- 구독형 + 단건형 + 디지털 상품의 수익 다각화 원형 존재
+- 프롬프트 패키지 5종으로 디지털 상품 라인 확장 중
+
+**개선 필요**
+- 수익 구조가 1인 가동에 갇혀 있음 → Phase 4에서 해결
+- LTV 설계 없음 → Cross-sell 흐름 미존재
+- 가격이 저렴한 프리랜서 포지션 → 점진적 단가 인상 필요
+
+---
+
+## 🔥 시장 트렌드 & 니즈 분석 (2026)
+
+| 트렌드 | 시장 성장률 | 연관도 |
+|--------|------------|--------|
+| AI 자동화 수요 폭발 | 국내 RPA·AI 자동화 시장 연 40% 성장 | ★★★★★ 핵심 |
+| 1인 창업·N잡 러너 급증 | 부업 인구 500만+ 추정 | ★★★★☆ 자동화 툴 수요 |
+| 소상공인 디지털화 | 코로나 이후 온라인 전환 가속 | ★★★★☆ 외주·홈페이지 |
+| 숏폼 콘텐츠 이코노미 | 숏폼 광고 효율 배너 대비 5배 | ★★★☆☆ 마케팅 채널 |
+| 프롬프트 엔지니어링 민주화 | ChatGPT 사용자 급증 → 좋은 프롬프트 수요 | ★★★★☆ |
+| SaaS/구독 경제 | 소비자 구독 소비 익숙화 | ★★★☆☆ 미개척 |
+| 부동산 정보 갈증 | 임장·실거래가 정보 수요 상시 높음 | ★★★★☆ 크롤러 수요 |
+
+### 숨겨진 니즈 3가지
+
+**① 소상공인 AI 자동화 원스톱 패키지**
+- 카카오 주문 자동화 + 인스타 콘텐츠 생성 + 재고 관리 엑셀 자동화를 묶어서 월 구독
+- 비싼 솔루션 부담 + 직접 개발 불가 → 중간 포지션이 비어 있음
+
+**② 스타트업 MVP 빠른 납품 전문**
+- "2주 만에 MVP" 니즈 있음, 기존 에이전시는 최소 3개월 강요
+- 현직 대기업 개발자의 빠른 납품 포지셔닝 → 단가 높게 책정 가능
+
+**③ AI 도구 세팅 대행 서비스**
+- ChatGPT, Claude, Notion AI, Make.com 도입 세팅 대행
+- 개발 외주보다 접근장벽 낮고, 건당 30~50만원, 반복 수요
+
+---
+
+## 🚀 사업 로드맵
+
+---
+
+### ✅ PHASE 1 — 포지셔닝 명확화 (완료)
+
+**전략: "AI 자동화 전문가"로 단일 포지셔닝**
+
+**완료된 작업**
+- 포지셔닝 전환: "7년차 개발자" → "현직 대기업 개발자" 전체 사이트 적용
+- 홈페이지 Hero AI 자동화 포지셔닝 강화 + 배지 추가
+- 서비스 순서 재정렬 (자동화·프롬프트 → 상단)
+- 크몽/숨고 "AI 자동화 세팅 대행" 신규 서비스 카피 작성 완료
+- 홈페이지 무료 체험 후기 수집 배너 추가
+
+**남은 과제 (직접 수행)**
+- [ ] 첫 고객 3명 무료 자동화 세팅 후 후기 받기 → 블라인드/커뮤니티에 모집 글
+- [ ] 크몽/숨고에 "AI 자동화 세팅 대행" 실제 서비스 등록
+
+**KPI 목표**
+- 첫 후기 3건 확보
+- 문의 전환율 현재 대비 1.5배 향상
+
+---
+
+### 🔄 PHASE 2 — 콘텐츠 엔진 구축 (진행 중)
+
+**전략: 1인 미디어로 신뢰 자산 축적**
+
+**완료된 작업 (코드/파일)**
+- SEO 인프라: sitemap.xml / robots.txt / JSON-LD 구조화 데이터
+- GA4 이벤트 트래킹 (문의 성공 generate_lead 이벤트)
+- 서비스 페이지 SEO 메타태그 강화 (automation·prompt·website)
+- 홈페이지 콘텐츠 위젯 섹션 추가
+- 콘텐츠 자산 준비 완료:
+  - 브랜드 스토리 원고 4종 (`CONTENT/brand-story.md`)
+  - 유튜브 숏츠 스크립트 10편 (`CONTENT/youtube-scripts.md`)
+  - SNS 30일 포스팅 캘린더 (`CONTENT/sns-calendar.md`)
+  - 네이버 블로그 SEO 초안 10편 (`CONTENT/blog-drafts.md`)
+
+**남은 과제 (직접 수행)**
+- [ ] 네이버 블로그 계정 개설 + 초안 10편 업로드 (파일 준비 완료)
+- [ ] 유튜브 채널 개설 + 숏츠 촬영/업로드 (스크립트 준비 완료)
+- [ ] 스레드/엑스 계정 개설 + SNS 캘린더대로 포스팅 시작
+- [ ] 메타 픽셀 계정 생성 및 사이트에 설치
+
+**KPI 목표**
+- 3개월 후 유튜브 구독자 500명
+- 블로그 월 방문자 2,000명
+- 카카오 오픈채팅 멤버 100명
+
+---
+
+### 🔄 PHASE 3 — 제품화 & 스케일 (진행 중)
+
+**전략: 디지털 상품 라인 확장 + 구독 신규 출시**
+
+**완료된 작업**
+- 프롬프트 패키지 5종으로 확장 (이미지 생성·자소서·이메일·마케팅·보고서)
+- 프리미엄 자동화 툴 2종 (부동산 크롤러·회계 자동화) 상품화
+
+**남은 과제 (직접 수행)**
+- [ ] 소상공인 AI 자동화 월 구독 (19,900원/월) 결제 플로우 구축
+- [ ] 클래스101/탈잉 강의 콘텐츠 제작 및 입점
+
+**KPI 목표**
+- 디지털 상품 월 판매 50건
+- 구독 서비스 가입자 100명
+- 월 매출 300만원
+
+---
+
+### ⏳ PHASE 4 — 에이전시 전환 or SaaS (12개월+)
+
+**두 갈림길 — Phase 3 결과 보고 결정**
+
+**A. 마이크로 에이전시화**
+- 외주 개발자 1~2명 파트타임 채용
+- 박재오는 영업·기획 담당, 개발은 위임
+- 목표 월 매출: 1,000만원+
+
+**B. SaaS 제품 출시**
+- 가장 수요 높은 자동화 기능을 No-Code 툴로 패키징
+- 예: "소상공인 인스타 콘텐츠 자동 생성 SaaS" — 월 9,900원
+- 매출 천장 없음, 엑싯 가능
+
+---
+
+## 📋 전체 액션 플랜 현황
+
+| 우선순위 | 액션 | 예상 효과 | 상태 |
+|---------|------|----------|------|
+| 🔴 즉시 | 첫 고객 3명 무료 → 후기 확보 | 전환율 2배 | ⬜ 진행 필요 |
+| 🔴 즉시 | 크몽/숨고 AI 자동화 세팅 대행 등록 | 즉각 수주 | ⬜ 진행 필요 |
+| 🟡 1개월 | 네이버 블로그 초안 10편 업로드 | SEO 유입 | ⬜ 파일 준비 완료 |
+| 🟡 1개월 | 유튜브 숏츠 10편 업로드 | 인지도 구축 | ⬜ 스크립트 준비 완료 |
+| 🟡 1개월 | 메타 픽셀 계정 생성 및 설치 | 리타게팅 광고 | ⬜ 진행 필요 |
+| 🟡 2개월 | SNS 캘린더대로 30일 포스팅 | 팔로워 성장 | ⬜ 캘린더 준비 완료 |
+| 🟢 3개월 | 소상공인 AI 키트 구독 결제 연동 | 반복 수익 | ⬜ 진행 필요 |
+| 🟢 6개월 | 클래스101/탈잉 강의 입점 | 브랜드 확장 | ⬜ 진행 필요 |
+
+---
+
+## 💡 핵심 포지셔닝 메시지
+
+> **"AI로 반복 업무를 없애드립니다. 계약서 먼저, 납기 보장, 소스코드 전달."**
+
+- 경쟁자와의 차별점: 현직 대기업 개발자 + 계약 투명성 + AI 전문성
+- 타겟: 반복 업무에 지친 직장인 / AI 도입을 원하는 소상공인 / MVP 빠르게 필요한 스타트업
+- 가격 전략: 외주 단가는 점진적 인상, 디지털 상품으로 저가 진입 유도 후 상위 서비스 Cross-sell
+
+---
+
+## 📌 크몽/숨고 "AI 자동화 세팅 대행" 서비스 카피
+
+### 서비스 제목
+```
+[현직 대기업 개발자] ChatGPT·Claude·Make.com AI 업무 자동화 세팅 대행
+```
+
+### 서비스 소개 (크몽용)
+```
+안녕하세요, 현직 대기업 백엔드 개발자 박재오입니다.
+
+AI 도구를 도입하고 싶은데 어떻게 세팅해야 할지 막막하신가요?
+직접 세팅해드립니다. 구매 후 당일 착수, 3일 이내 납품이 기본입니다.
+
+▶ 제공 서비스
+
+[기본] ChatGPT / Claude 업무 프롬프트 세팅 — 30,000원
+- 현재 반복하는 업무 분석
+- 맞춤 프롬프트 5종 제작
+- 사용 가이드 문서 제공
+
+[스탠다드] Make.com / Zapier 자동화 플로우 구축 — 80,000원
+- 업무 프로세스 흐름 분석
+- 자동화 플로우 3개 구축
+- 구글 스프레드시트 / 노션 / 슬랙 연동 포함
+
+[프리미엄] 파이썬 스크립트 자동화 — 150,000원~
+- 엑셀 처리 / 이메일 자동화 / 크롤링 등
+- 소스코드 100% 전달
+- 1개월 무상 AS 포함
+
+납기 지연 시 하루 10만 원 패널티 적용. 연락 두절 없습니다.
+```
+
+---
+
+## 📌 후기 수집 전략
+
+```
+1단계: 타겟 섭외
+   - 블라인드·직장인 갤러리에 모집 글 게시
+   - "AI 자동화 세팅 무료 3팀 모집 (후기 작성 조건)"
+   - 카카오 오픈채팅 공지에도 동일 공지
+
+2단계: 무료 세팅 진행 (팀당 최대 3시간 투자)
+   - Make.com 플로우 1개 OR 맞춤 프롬프트 5종
+
+3단계: 후기 받기
+   - 크몽/숨고 후기 작성 요청
+   - 카카오톡 캡처 후기 (사이트 게시 허락)
+   - 영상 후기는 보너스 (유튜브 숏츠 소재 활용)
+
+4단계: 사이트 게재
+   - 직군 + 개선 수치 포함 후기 카드 제작
+   - 홈페이지 소셜 프루프 섹션에 추가
+```
+
+### 후기 요청 템플릿
+```
+직군: [예: 마케팅 팀장]
+사용 전: [기존 업무 방식]
+사용 후: [개선된 수치 또는 변화]
+한 줄 추천: [자유롭게]
+```

app/admin/analytics/page.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+
+type RangeKey = '7' | '30' | '90';
+
+interface Summary {
+  users: number;
+  sessions: number;
+  pageviews: number;
+}
+
+interface AnalyticsData {
+  summary: {
+    today: Summary;
+    yesterday: Summary;
+    week: Summary;
+    period: Summary;
+  };
+  daily: Array<{ date: string; users: number; sessions: number; pageviews: number }>;
+  topPages: Array<{ page: string; views: number; users: number }>;
+  sources: Array<{ channel: string; sessions: number }>;
+  devices: Array<{ device: string; sessions: number }>;
+}
+
+const RANGE_LABELS: Record<RangeKey, string> = {
+  '7': '최근 7일',
+  '30': '최근 30일',
+  '90': '최근 90일',
+};
+
+const CHANNEL_KO: Record<string, string> = {
+  'Organic Search': '검색 (유기)',
+  'Direct': '직접 방문',
+  'Organic Social': '소셜 미디어',
+  'Referral': '외부 링크',
+  'Paid Search': '검색 광고',
+  'Email': '이메일',
+  'Unassigned': '미분류',
+};
+
+const DEVICE_KO: Record<string, string> = {
+  'desktop': 'PC',
+  'mobile': '모바일',
+  'tablet': '태블릿',
+};
+
+const CHANNEL_COLORS: Record<string, string> = {
+  'Organic Search': '#22c55e',
+  'Direct': '#3b82f6',
+  'Organic Social': '#a855f7',
+  'Referral': '#f59e0b',
+  'Paid Search': '#ef4444',
+  'Email': '#06b6d4',
+  'Unassigned': '#64748b',
+};
+
+function fmt(n: number) {
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+  return n.toString();
+}
+
+function fmtDate(yyyymmdd: string) {
+  const m = yyyymmdd.slice(4, 6);
+  const d = yyyymmdd.slice(6, 8);
+  return `${parseInt(m)}/${parseInt(d)}`;
+}
+
+// 인라인 막대 차트
+function BarChart({ data }: { data: AnalyticsData['daily'] }) {
+  const max = Math.max(...data.map((d) => d.users), 1);
+  const w = 600;
+  const h = 160;
+  const padL = 36;
+  const padR = 12;
+  const padT = 12;
+  const padB = 32;
+  const chartW = w - padL - padR;
+  const chartH = h - padT - padB;
+  const barW = Math.max(2, chartW / data.length - 2);
+
+  // Y축 눈금
+  const ticks = [0, Math.ceil(max / 2), max];
+
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} className="w-full" style={{ height: 160 }}>
+      {/* Y 눈금선 */}
+      {ticks.map((t) => {
+        const y = padT + chartH - (t / max) * chartH;
+        return (
+          <g key={t}>
+            <line x1={padL} y1={y} x2={w - padR} y2={y} stroke="#1e293b" strokeWidth={1} />
+            <text x={padL - 4} y={y + 4} textAnchor="end" fontSize={10} fill="#475569">
+              {fmt(t)}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* 막대 + X 레이블 */}
+      {data.map((d, i) => {
+        const x = padL + (i / data.length) * chartW + (chartW / data.length - barW) / 2;
+        const barH = Math.max(2, (d.users / max) * chartH);
+        const y = padT + chartH - barH;
+        const showLabel = data.length <= 14 || i % Math.ceil(data.length / 10) === 0;
+        return (
+          <g key={d.date}>
+            <rect x={x} y={y} width={barW} height={barH} rx={2} fill="#3b82f6" opacity={0.85} />
+            {showLabel && (
+              <text
+                x={x + barW / 2}
+                y={h - 4}
+                textAnchor="middle"
+                fontSize={9}
+                fill="#475569"
+              >
+                {fmtDate(d.date)}
+              </text>
+            )}
+            <title>{`${fmtDate(d.date)}: ${d.users}명`}</title>
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+// 유입 경로 가로 바
+function SourceBar({ channel, sessions, total }: { channel: string; sessions: number; total: number }) {
+  const pct = total > 0 ? (sessions / total) * 100 : 0;
+  const color = CHANNEL_COLORS[channel] ?? '#64748b';
+  return (
+    <div className="flex items-center gap-3">
+      <div className="w-28 text-xs text-slate-400 truncate flex-shrink-0">
+        {CHANNEL_KO[channel] ?? channel}
+      </div>
+      <div className="flex-1 bg-slate-800 rounded-full h-2 overflow-hidden">
+        <div
+          className="h-2 rounded-full transition-all duration-700"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+      <div className="text-xs text-slate-300 w-12 text-right flex-shrink-0">{sessions.toLocaleString()}</div>
+      <div className="text-xs text-slate-500 w-10 text-right flex-shrink-0">{pct.toFixed(1)}%</div>
+    </div>
+  );
+}
+
+function StatCard({
+  label, value, sub, trend,
+}: {
+  label: string;
+  value: number;
+  sub?: string;
+  trend?: number; // 양수: 증가, 음수: 감소
+}) {
+  return (
+    <div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-4">
+      <p className="text-slate-400 text-xs font-medium mb-1">{label}</p>
+      <p className="text-white text-2xl font-bold">{value.toLocaleString()}</p>
+      {sub && <p className="text-slate-500 text-xs mt-0.5">{sub}</p>}
+      {trend !== undefined && (
+        <p className={`text-xs mt-1 font-medium ${trend >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+          {trend >= 0 ? '▲' : '▼'} {Math.abs(trend).toFixed(0)}% vs 어제
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default function AnalyticsPage() {
+  const [range, setRange] = useState<RangeKey>('30');
+  const [data, setData] = useState<AnalyticsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async (r: RangeKey) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/admin/analytics?range=${r}`);
+      const json = await res.json();
+      if (!res.ok) throw new Error(json.error ?? '데이터 로드 실패');
+      setData(json);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '오류가 발생했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load(range);
+  }, [range, load]);
+
+  const todayTrend =
+    data && data.summary.yesterday.users > 0
+      ? ((data.summary.today.users - data.summary.yesterday.users) / data.summary.yesterday.users) * 100
+      : undefined;
+
+  const totalSessions = data?.sources.reduce((s, c) => s + c.sessions, 0) ?? 0;
+
+  return (
+    <div className="p-4 md:p-6 space-y-6">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div>
+          <h1 className="text-white text-xl font-bold">방문자 분석</h1>
+          <p className="text-slate-400 text-sm mt-0.5">Google Analytics 4 데이터</p>
+        </div>
+        {/* 기간 선택 */}
+        <div className="flex gap-1 bg-slate-800 rounded-lg p-1">
+          {(Object.keys(RANGE_LABELS) as RangeKey[]).map((r) => (
+            <button
+              key={r}
+              onClick={() => setRange(r)}
+              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-all ${
+                range === r
+                  ? 'bg-blue-600 text-white'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              {RANGE_LABELS[r]}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 에러 / 설정 안내 */}
+      {error && (
+        <div className="bg-red-900/30 border border-red-700/40 rounded-xl p-4 text-sm text-red-300 space-y-2">
+          <p className="font-semibold">⚠ 데이터를 불러올 수 없습니다</p>
+          <p>{error}</p>
+          {(error.includes('GOOGLE_SERVICE_ACCOUNT_JSON') || error.includes('GA4_PROPERTY_ID')) && (
+            <div className="mt-3 bg-slate-900/50 rounded-lg p-3 text-slate-300 space-y-1 text-xs font-mono">
+              <p className="text-slate-400 font-sans font-normal mb-2">환경변수 설정 필요 (.env.local + Vercel):</p>
+              <p>GOOGLE_SERVICE_ACCOUNT_JSON=&#123;서비스 계정 JSON 전체&#125;</p>
+              <p>GA4_PROPERTY_ID=숫자로된_속성ID</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {loading && !error && (
+        <div className="flex items-center justify-center py-20">
+          <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+
+      {data && !loading && (
+        <>
+          {/* 요약 카드 */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+            <StatCard
+              label="오늘 방문자"
+              value={data.summary.today.users}
+              sub={`세션 ${data.summary.today.sessions.toLocaleString()}`}
+              trend={todayTrend}
+            />
+            <StatCard
+              label="이번 주 방문자"
+              value={data.summary.week.users}
+              sub={`페이지뷰 ${data.summary.week.pageviews.toLocaleString()}`}
+            />
+            <StatCard
+              label={`${RANGE_LABELS[range]} 방문자`}
+              value={data.summary.period.users}
+              sub={`세션 ${data.summary.period.sessions.toLocaleString()}`}
+            />
+            <StatCard
+              label={`${RANGE_LABELS[range]} 페이지뷰`}
+              value={data.summary.period.pageviews}
+              sub={`방문당 ${data.summary.period.users > 0 ? (data.summary.period.pageviews / data.summary.period.users).toFixed(1) : 0} 페이지`}
+            />
+          </div>
+
+          {/* 일별 추이 차트 */}
+          <div className="bg-slate-900 border border-slate-700/50 rounded-xl p-5">
+            <h2 className="text-white font-semibold text-sm mb-4">
+              일별 방문자 추이 <span className="text-slate-500 font-normal ml-1">(활성 사용자)</span>
+            </h2>
+            {data.daily.length > 0 ? (
+              <BarChart data={data.daily} />
+            ) : (
+              <p className="text-slate-500 text-sm text-center py-8">데이터 없음</p>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {/* 유입 경로 */}
+            <div className="bg-slate-900 border border-slate-700/50 rounded-xl p-5">
+              <h2 className="text-white font-semibold text-sm mb-4">유입 경로</h2>
+              {data.sources.length > 0 ? (
+                <div className="space-y-3">
+                  {data.sources.slice(0, 7).map((s) => (
+                    <SourceBar
+                      key={s.channel}
+                      channel={s.channel}
+                      sessions={s.sessions}
+                      total={totalSessions}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <p className="text-slate-500 text-sm text-center py-6">데이터 없음</p>
+              )}
+            </div>
+
+            {/* 기기 + 상위 페이지 */}
+            <div className="space-y-4">
+              {/* 기기 분포 */}
+              <div className="bg-slate-900 border border-slate-700/50 rounded-xl p-5">
+                <h2 className="text-white font-semibold text-sm mb-3">기기 유형</h2>
+                <div className="flex gap-3">
+                  {data.devices.map((d) => {
+                    const pct = totalSessions > 0 ? ((d.sessions / totalSessions) * 100).toFixed(0) : '0';
+                    const icons: Record<string, string> = { desktop: '🖥', mobile: '📱', tablet: '⬜' };
+                    return (
+                      <div key={d.device} className="flex-1 bg-slate-800/60 rounded-lg p-3 text-center">
+                        <p className="text-xl">{icons[d.device] ?? '?'}</p>
+                        <p className="text-white font-bold text-lg mt-1">{pct}%</p>
+                        <p className="text-slate-400 text-xs">{DEVICE_KO[d.device] ?? d.device}</p>
+                        <p className="text-slate-500 text-xs">{d.sessions.toLocaleString()} 세션</p>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* 상위 페이지 */}
+              <div className="bg-slate-900 border border-slate-700/50 rounded-xl p-5">
+                <h2 className="text-white font-semibold text-sm mb-3">상위 페이지</h2>
+                <div className="space-y-2">
+                  {data.topPages.slice(0, 6).map((p, i) => (
+                    <div key={p.page} className="flex items-center gap-2 text-sm">
+                      <span className="text-slate-600 w-4 text-right flex-shrink-0">{i + 1}</span>
+                      <span className="flex-1 text-slate-300 truncate font-mono text-xs">{p.page}</span>
+                      <span className="text-blue-400 text-xs flex-shrink-0">{p.views.toLocaleString()}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <p className="text-slate-600 text-xs text-right">
+            Google Analytics 4 · 데이터 기준 최대 24~48시간 지연 가능
+          </p>
+        </>
+      )}
+    </div>
+  );
+}

app/admin/components/AdminShell.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import AdminSidebar from './AdminSidebar';
+
+export default function AdminShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  // 로그인 페이지는 사이드바 없이 독립 렌더링
+  if (pathname === '/admin/login') {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex h-screen bg-slate-950 overflow-hidden">
+      {/* 모바일 오버레이 */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-20 bg-black/60 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      <AdminSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col overflow-hidden min-w-0">
+        {/* 모바일 상단 헤더 */}
+        <header className="lg:hidden flex items-center justify-between px-4 py-3 bg-slate-900 border-b border-slate-700/60 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-8 h-8 rounded-xl bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white font-bold text-sm">
+              관
+            </div>
+            <span className="text-white font-bold text-sm">관리자 패널</span>
+          </div>
+          <div className="w-9" />
+        </header>
+
+        {/* 메인 스크롤 영역 */}
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

app/admin/components/AdminSidebar.tsx

@@ -0,0 +1,230 @@
+'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>
+    ),
+  },
+  {
+    href: '/admin/quotes',
+    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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/documents',
+    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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M13 3v5a2 2 0 002 2h4M9 13h6M9 17h4" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/packs',
+    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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/questionnaire',
+    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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/marketing',
+    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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/hidden',
+    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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/analytics',
+    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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+    ),
+  },
+  {
+    href: '/admin/survey',
+    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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+      </svg>
+    ),
+  },
+];
+
+interface AdminSidebarProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export default function AdminSidebar({ isOpen = false, onClose }: AdminSidebarProps) {
+  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
+      fixed top-0 left-0 z-30 transition-transform duration-300
+      lg:static lg:translate-x-0
+      ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+    `}>
+      {/* 로고 */}
+      <div className="px-5 py-5 border-b border-slate-700/60">
+        <div className="flex items-center justify-between">
+          <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>
+          {/* 모바일 닫기 버튼 */}
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="lg:hidden p-1.5 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="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </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,215 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Stats {
+  totalMembers: number;
+  totalOrders: number;
+  totalRevenue: number;
+  pendingContacts: number;
+  activeSubscribers: number;
+  monthlyChart: Array<{ month: string; revenue: number }>;
+}
+
+const MONTHLY_GOAL = 1_000_000; // 월 100만원 목표
+
+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>
+  );
+}
+
+function MonthlyGoalCard({ currentRevenue }: { currentRevenue: number }) {
+  const progress = Math.min((currentRevenue / MONTHLY_GOAL) * 100, 100);
+  const remaining = Math.max(MONTHLY_GOAL - currentRevenue, 0);
+  const isAchieved = currentRevenue >= MONTHLY_GOAL;
+  const progressColor = progress >= 100 ? 'from-emerald-400 to-green-500' : progress >= 70 ? 'from-yellow-400 to-orange-400' : 'from-blue-500 to-violet-500';
+
+  return (
+    <div className="bg-slate-900 rounded-2xl p-5 border border-slate-700/50">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <p className="text-slate-400 text-sm">이번 달 수익 목표</p>
+          <p className="text-white font-extrabold text-lg mt-0.5">₩1,000,000 달성</p>
+        </div>
+        <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${isAchieved ? 'bg-emerald-500/20 text-emerald-400' : 'bg-blue-500/20 text-blue-400'}`}>
+          {isAchieved ? (
+            <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>
+          ) : (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+            </svg>
+          )}
+        </div>
+      </div>
+
+      {/* 프로그레스 바 */}
+      <div className="mb-3">
+        <div className="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
+          <div
+            className={`h-full rounded-full bg-gradient-to-r ${progressColor} transition-all duration-700`}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div>
+          <span className="text-white font-bold text-xl">₩{currentRevenue.toLocaleString()}</span>
+          <span className="text-slate-500 text-sm ml-1">/ ₩1,000,000</span>
+        </div>
+        <div className="text-right">
+          {isAchieved ? (
+            <span className="text-emerald-400 text-sm font-bold">🎉 목표 달성!</span>
+          ) : (
+            <span className="text-slate-400 text-sm">
+              <span className="text-white font-semibold">₩{remaining.toLocaleString()}</span> 남음
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-3 pt-3 border-t border-slate-800">
+        <div className="flex items-center justify-between text-xs text-slate-500">
+          <span>달성률 <span className={`font-bold ${isAchieved ? 'text-emerald-400' : 'text-white'}`}>{progress.toFixed(1)}%</span></span>
+          <span>목표 <span className="text-white font-semibold">₩1,000,000</span></span>
+        </div>
+      </div>
+    </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="mb-6">
+            <MonthlyGoalCard currentRevenue={stats?.totalRevenue ?? 0} />
+          </div>
+
+          {/* 통계 카드 */}
+          <div className="grid grid-cols-2 lg:grid-cols-5 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?.activeSubscribers ?? 0}명`}
+              color="bg-amber-500/20 text-amber-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="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>
+              }
+            />
+            <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/documents/page.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface Document {
+  id: string;
+  title: string;
+  description: string;
+  category: '제안서' | '질문지' | '계약서';
+  fileName: string;
+  updatedAt: string;
+  status: 'draft' | 'sent' | 'accepted';
+}
+
+const documents: Document[] = [
+  {
+    id: 'ebay-proposal',
+    title: '이베이 부품 AI 자동화 — 제안서',
+    description: '프로젝트 개요, 3단 패키지 견적(120/198/330만원), 기술 스택, 진행 절차',
+    category: '제안서',
+    fileName: 'ebay-tool-proposal.html',
+    updatedAt: '2026-04-02',
+    status: 'draft',
+  },
+  {
+    id: 'ebay-questionnaire',
+    title: '이베이 부품 AI 자동화 — 요구사항 질문지',
+    description: '고객 사전 확인 17항목 (타겟 사이트, 샘플 품번, eBay 셀러 티어 등)',
+    category: '질문지',
+    fileName: 'ebay-tool-questionnaire.html',
+    updatedAt: '2026-04-02',
+    status: 'draft',
+  },
+];
+
+const CATEGORY_COLORS: Record<string, string> = {
+  '제안서': 'bg-blue-900/40 text-blue-400 border-blue-500/30',
+  '질문지': 'bg-amber-900/40 text-amber-400 border-amber-500/30',
+  '계약서': 'bg-green-900/40 text-green-400 border-green-500/30',
+};
+
+const STATUS_CONFIG: Record<string, { label: string; color: string }> = {
+  draft: { label: '초안', color: 'bg-slate-700/60 text-slate-300' },
+  sent: { label: '발송', color: 'bg-blue-900/40 text-blue-400' },
+  accepted: { label: '수락', color: 'bg-green-900/40 text-green-400' },
+};
+
+export default function AdminDocumentsPage() {
+  const [previewDoc, setPreviewDoc] = useState<Document | null>(null);
+  const [previewHtml, setPreviewHtml] = useState<string>('');
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  // iframe src 대신 fetch + srcdoc 방식으로 X-Frame-Options 우회
+  useEffect(() => {
+    if (!previewDoc) { setPreviewHtml(''); return; }
+    setPreviewLoading(true);
+    fetch(`/api/admin/documents/${previewDoc.fileName}`)
+      .then(res => res.ok ? res.text() : Promise.reject('문서를 불러올 수 없습니다'))
+      .then(html => setPreviewHtml(html))
+      .catch(() => setPreviewHtml('<p style="padding:2rem;color:red;">문서를 불러올 수 없습니다.</p>'))
+      .finally(() => setPreviewLoading(false));
+  }, [previewDoc]);
+
+  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>
+
+      {/* 문서 카드 그리드 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        {documents.map((doc) => (
+          <div
+            key={doc.id}
+            className="bg-slate-900 rounded-2xl border border-slate-700/50 p-5 flex flex-col"
+          >
+            {/* 카테고리 + 상태 뱃지 */}
+            <div className="flex items-center gap-2 mb-3">
+              <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium border ${CATEGORY_COLORS[doc.category]}`}>
+                {doc.category}
+              </span>
+              <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_CONFIG[doc.status].color}`}>
+                {STATUS_CONFIG[doc.status].label}
+              </span>
+            </div>
+
+            {/* 제목 + 설명 */}
+            <h3 className="text-white font-semibold text-sm mb-1.5">{doc.title}</h3>
+            <p className="text-slate-400 text-xs leading-relaxed mb-4 flex-1">{doc.description}</p>
+
+            {/* 수정일 + 버튼 */}
+            <div className="flex items-center justify-between">
+              <span className="text-slate-600 text-xs">수정일: {doc.updatedAt}</span>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setPreviewDoc(doc)}
+                  className="px-3 py-1.5 rounded-lg text-xs font-medium bg-red-600/20 text-red-400 hover:bg-red-600/30 transition border border-red-500/20"
+                >
+                  미리보기
+                </button>
+                <button
+                  onClick={() => window.open(`/api/admin/documents/${doc.fileName}`, '_blank')}
+                  className="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white transition"
+                >
+                  새 탭에서 열기
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 미리보기 섹션 */}
+      {previewDoc && (
+        <div className="bg-slate-900 rounded-2xl border border-slate-700/50 overflow-hidden">
+          {/* 미리보기 헤더 */}
+          <div className="flex items-center justify-between px-5 py-3 border-b border-slate-700/50">
+            <div className="flex items-center gap-3">
+              <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+              <span className="text-white text-sm font-medium">{previewDoc.title}</span>
+            </div>
+            <button
+              onClick={() => setPreviewDoc(null)}
+              className="p-1.5 rounded-lg text-slate-500 hover:text-white hover:bg-slate-800 transition"
+              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>
+
+          {/* 문서 미리보기 (fetch + srcdoc 방식) */}
+          {previewLoading ? (
+            <div className="flex items-center justify-center bg-white" style={{ height: '80vh' }}>
+              <div className="text-slate-400 text-sm">문서를 불러오는 중...</div>
+            </div>
+          ) : (
+            <iframe
+              srcDoc={previewHtml}
+              className="w-full bg-white"
+              style={{ height: '80vh' }}
+              title={previewDoc.title}
+              sandbox="allow-same-origin"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/hidden/page.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+const HIDDEN_PAGES = [
+  {
+    path: '/freelance',
+    label: '외주 개발 문의',
+    desc: '위시캣·숨고 지원서에 뿌린 기존 링크. 노출 제거 + noindex.',
+  },
+  {
+    path: '/services/website',
+    label: '홈페이지 제작 상세',
+    desc: '홈페이지 제작 랜딩. 직링크 전용.',
+  },
+];
+
+interface IssuedToken {
+  token: string;
+  url: string;
+  memo: string;
+  expiresAt: string;
+}
+
+export default function AdminHiddenPage() {
+  const [memo, setMemo] = useState('');
+  const [ttlDays, setTtlDays] = useState(30);
+  const [loading, setLoading] = useState(false);
+  const [issued, setIssued] = useState<IssuedToken[]>([]);
+  const [error, setError] = useState('');
+
+  async function handleIssue() {
+    setError('');
+    if (!memo.trim()) {
+      setError('메모를 입력해주세요. (예: 위시캣 xx 프로젝트)');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch('/api/admin/portfolio-token', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ memo, ttlDays }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error || '실패');
+      const data = await res.json();
+      const url = `${window.location.origin}/portfolio/${data.token}`;
+      setIssued([{ token: data.token, url, memo: data.memo, expiresAt: data.expiresAt }, ...issued]);
+      setMemo('');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '토큰 생성 실패');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function copy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      alert('복사되었습니다');
+    } catch {
+      alert('복사 실패 — 수동으로 복사해주세요');
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-6 py-10 space-y-10">
+      <header>
+        <h1 className="text-2xl font-extrabold text-slate-900">숨김 페이지 관리</h1>
+        <p className="text-sm text-slate-500 mt-1">
+          공개 UI에서 숨긴 페이지 바로가기 + 위시캣 제출용 임시 공유 URL 발급.
+        </p>
+      </header>
+
+      {/* 숨김 페이지 바로가기 */}
+      <section>
+        <h2 className="text-sm font-bold text-slate-800 mb-3">🔗 숨김 페이지 바로가기</h2>
+        <div className="space-y-2">
+          {HIDDEN_PAGES.map((p) => (
+            <div
+              key={p.path}
+              className="flex items-center justify-between border border-slate-200 bg-white rounded-xl px-5 py-4"
+            >
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <Link
+                    href={p.path}
+                    target="_blank"
+                    className="font-bold text-slate-900 hover:text-violet-700"
+                  >
+                    {p.label}
+                  </Link>
+                  <code className="text-xs text-slate-500 font-mono">{p.path}</code>
+                </div>
+                <p className="text-xs text-slate-500 mt-1">{p.desc}</p>
+              </div>
+              <button
+                onClick={() => copy(window.location.origin + p.path)}
+                className="text-xs font-bold text-slate-700 border border-slate-300 hover:bg-slate-50 px-3 py-1.5 rounded-lg"
+              >
+                URL 복사
+              </button>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 포트폴리오 토큰 발급 */}
+      <section>
+        <h2 className="text-sm font-bold text-slate-800 mb-3">🎫 포트폴리오 임시 공유 URL 발급</h2>
+        <div className="border border-slate-200 bg-white rounded-xl p-6">
+          <p className="text-xs text-slate-500 mb-4 leading-relaxed">
+            위시캣 지원서 등 외부 제출용. <code className="font-mono bg-slate-100 px-1 rounded">/portfolio/[token]</code> 형태의
+            프리미엄 게이트웨이 페이지가 생성됩니다. 만료되면 404로 처리됩니다.
+          </p>
+          <div className="space-y-3">
+            <div>
+              <label className="block text-xs font-bold text-slate-700 mb-1.5">메모 (내부용)</label>
+              <input
+                type="text"
+                value={memo}
+                onChange={(e) => setMemo(e.target.value)}
+                placeholder="예: 위시캣 OO 프로젝트 제안서용"
+                className="w-full px-4 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-violet-500"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-bold text-slate-700 mb-1.5">유효 기간 (일)</label>
+              <input
+                type="number"
+                min={1}
+                max={365}
+                value={ttlDays}
+                onChange={(e) => setTtlDays(Number(e.target.value))}
+                className="w-32 px-4 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-violet-500"
+              />
+            </div>
+            {error && <p className="text-xs text-rose-600">{error}</p>}
+            <button
+              onClick={handleIssue}
+              disabled={loading}
+              className="bg-violet-600 hover:bg-violet-500 disabled:bg-slate-300 text-white font-bold text-sm px-5 py-2.5 rounded-lg transition"
+            >
+              {loading ? '생성 중...' : '토큰 발급'}
+            </button>
+          </div>
+        </div>
+
+        {/* 최근 발급 목록 (세션 메모리만 — 새로고침 시 초기화) */}
+        {issued.length > 0 && (
+          <div className="mt-5 space-y-3">
+            <p className="text-xs font-bold text-slate-600">이번 세션에 발급한 URL</p>
+            {issued.map((t) => (
+              <div key={t.token} className="border border-slate-200 bg-slate-50 rounded-xl p-4">
+                <div className="flex items-center justify-between gap-3 mb-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs text-slate-600 mb-1">
+                      📝 {t.memo} · 만료 {new Date(t.expiresAt).toLocaleDateString('ko-KR')}
+                    </p>
+                    <code className="block text-xs font-mono text-slate-800 bg-white border border-slate-200 rounded p-2 truncate">
+                      {t.url}
+                    </code>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => copy(t.url)}
+                    className="text-xs font-bold bg-violet-600 hover:bg-violet-500 text-white px-3 py-1.5 rounded-lg"
+                  >
+                    URL 복사
+                  </button>
+                  <a
+                    href={t.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xs font-bold border border-slate-300 hover:bg-white px-3 py-1.5 rounded-lg text-slate-700"
+                  >
+                    열기 ↗
+                  </a>
+                </div>
+              </div>
+            ))}
+            <p className="text-[11px] text-slate-400">
+              ※ 발급 목록은 현재 세션에만 표시됩니다. 발급 후 반드시 URL을 복사해두세요.
+            </p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

app/admin/layout.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from 'next';
+import AdminShell from './components/AdminShell';
+
+export const metadata: Metadata = {
+  title: '관리자 패널 — 쟁승메이드',
+  robots: { index: false, follow: false },
+};
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return <AdminShell>{children}</AdminShell>;
+}

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="off"
+              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">
+          관리자 전용 페이지입니다.
+        </p>
+      </div>
+    </div>
+  );
+}

app/admin/marketing/page.tsx

@@ -0,0 +1,599 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+const ASSETS = [
+  {
+    file: '/marketing/thumb-homepage-A.svg',
+    name: '홈페이지 제작 썸네일 A',
+    desc: '신뢰형 — 브라우저 목업 + 경력 강조',
+    size: '1200 × 675',
+    platform: '크몽 메인',
+    color: '#2563eb',
+    service: '홈페이지 제작',
+    price: '스타터 50만원~',
+  },
+  {
+    file: '/marketing/thumb-homepage-B.svg',
+    name: '홈페이지 제작 썸네일 B',
+    desc: '스펙 강조형 — 3플랜 카드 비교',
+    size: '1200 × 675',
+    platform: '크몽 서브',
+    color: '#7c3aed',
+    service: '홈페이지 제작',
+    price: '스타터 50만원~',
+  },
+  {
+    file: '/marketing/thumb-automation.svg',
+    name: '업무 자동화 썸네일',
+    desc: '시간 절약형 — 자동화 플로우 다이어그램',
+    size: '1200 × 675',
+    platform: '크몽 메인',
+    color: '#10b981',
+    service: '업무 자동화',
+    price: '33만원~',
+  },
+  {
+    file: '/marketing/thumb-prompt.svg',
+    name: '프롬프트 엔지니어링 썸네일',
+    desc: 'Before/After 비교형 — AI 최적화 결과 시각화',
+    size: '1200 × 675',
+    platform: '크몽 메인',
+    color: '#7c3aed',
+    service: '프롬프트 엔지니어링',
+    price: '10만원~',
+  },
+  {
+    file: '/marketing/thumb-stock.svg',
+    name: '주식 자동매매 썸네일',
+    desc: '폰 목업 + 텔레그램 알림 UI',
+    size: '1200 × 675',
+    platform: '크몽 메인',
+    color: '#22c55e',
+    service: '주식 자동매매',
+    price: '9만9천원~',
+  },
+  {
+    file: '/marketing/thumb-lotto.svg',
+    name: '로또 번호 추천 썸네일',
+    desc: '빅데이터 분석형 — 번호 통계 시각화',
+    size: '1200 × 675',
+    platform: '크몽 메인',
+    color: '#f59e0b',
+    service: '로또 번호 추천',
+    price: '900원~/월',
+  },
+  {
+    file: '/marketing/thumb-saju.svg',
+    name: 'AI 사주 분석 썸네일',
+    desc: '사주팔자 + AI 해석 — 전통+현대 비주얼',
+    size: '1200 × 675',
+    platform: '크몽 메인',
+    color: '#8b5cf6',
+    service: 'AI 사주 분석',
+    price: '4,900원',
+  },
+  {
+    file: '/marketing/banner-homepage.svg',
+    name: '홈페이지 제작 배너',
+    desc: '가로형 배너 — 블로그/SNS 활용',
+    size: '1200 × 400',
+    platform: '블로그/SNS',
+    color: '#2563eb',
+    service: '홈페이지 제작',
+    price: '스타터 50만원~',
+  },
+  {
+    file: '/marketing/quote-cafe24.svg',
+    name: '카페24 리뉴얼 견적 비교표',
+    desc: '3옵션 가격 비교 — 숨고 견적 발송용',
+    size: '1200 × 700',
+    platform: '숨고 견적',
+    color: '#3b82f6',
+    service: '커머스 개발',
+    price: '150~450만원',
+  },
+];
+
+const CHECKLIST_ITEMS = {
+  design: [
+    '시각적 위계가 명확하다 (헤드라인 → 서브 → 기능 → 가격)',
+    '색상 대비가 가독성 기준을 충족한다 (어두운 배경/밝은 텍스트)',
+    '브랜드 색상이 사이트와 일관되게 사용되었다',
+    '정보가 과밀하지 않고 여백이 충분하다',
+    '폰트 크기가 썸네일 목록에서도 가독성이 있다 (헤드 52px+)',
+    '오른쪽 비주얼(목업)이 서비스 내용과 직결된다',
+  ],
+  pm: [
+    '서비스명이 한눈에 들어온다 (1초 이내 파악)',
+    '핵심 가치 제안이 1~2줄 이내로 명확히 전달된다',
+    '가격 또는 플랜이 뱃지 형태로 명확히 표시된다',
+    'URL 또는 브랜드명이 하단에 포함된다',
+    '대상 고객의 니즈가 암묵적으로 전달된다',
+    '파일 사이즈가 플랫폼 요구사항(1200×675)을 충족한다',
+  ],
+  quality: [
+    '텍스트에 오탈자·맞춤법 오류가 없다',
+    '가격 정보가 실제 서비스 가격과 일치한다',
+    '깨진 이미지나 렌더링 오류가 없다',
+    '동일 색상/레이아웃을 다른 썸네일과 중복 사용하지 않는다',
+    '법적 문제(허위광고, 저작권) 소지가 없다',
+    'PNG 변환 후에도 품질이 유지된다 (벡터 기반)',
+  ],
+  marketing: [
+    '타겟 고객의 핵심 페인포인트를 헤드라인에서 직접 해소한다',
+    '"납기 100% · 연락두절 없음" 등 약속 기반 차별화 요소가 포함된다',
+    '경쟁사 대비 명확한 차별점이 드러난다',
+    '첫 3초 안에 무슨 서비스인지 파악 가능하다',
+    '클릭 충동을 자극하는 강력한 헤드라인이다',
+    '크몽 검색 목록에서 눈에 띄는 디자인이다',
+  ],
+};
+
+type CheckKey = string;
+
+export default function MarketingPage() {
+  const [preview, setPreview] = useState<typeof ASSETS[0] | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [checks, setChecks] = useState<Record<CheckKey, boolean>>({});
+  const [showGuide, setShowGuide] = useState(false);
+  const [activeTab, setActiveTab] = useState<'design' | 'pm' | 'quality' | 'marketing'>('design');
+  const [convertingPng, setConvertingPng] = useState<string | null>(null);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('marketing_checks');
+    if (saved) setChecks(JSON.parse(saved));
+  }, []);
+
+  const toggleCheck = useCallback((key: string) => {
+    setChecks(prev => {
+      const next = { ...prev, [key]: !prev[key] };
+      localStorage.setItem('marketing_checks', JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const getCheckScore = (assetFile: string, category: keyof typeof CHECKLIST_ITEMS) => {
+    const items = CHECKLIST_ITEMS[category];
+    const done = items.filter((_, i) => checks[`${assetFile}_${category}_${i}`]).length;
+    return { done, total: items.length };
+  };
+
+  const getTotalScore = (assetFile: string) => {
+    const all = Object.keys(CHECKLIST_ITEMS).flatMap(cat =>
+      CHECKLIST_ITEMS[cat as keyof typeof CHECKLIST_ITEMS].map((_, i) => checks[`${assetFile}_${cat}_${i}`])
+    );
+    return { done: all.filter(Boolean).length, total: all.length };
+  };
+
+  function copyPath(file: string) {
+    const url = `${window.location.origin}${file}`;
+    navigator.clipboard.writeText(url);
+    setCopied(file);
+    setTimeout(() => setCopied(null), 2000);
+  }
+
+  function download(file: string, name: string) {
+    const a = document.createElement('a');
+    a.href = file;
+    a.download = name.replace(/\s/g, '_') + '.svg';
+    a.click();
+  }
+
+  async function downloadAsPng(file: string, name: string, size: string) {
+    const [wStr, hStr] = size.split(' × ');
+    const w = parseInt(wStr);
+    const h = parseInt(hStr);
+    setConvertingPng(file);
+    try {
+      const resp = await fetch(file);
+      const svgText = await resp.text();
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d')!;
+      await new Promise<void>((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, w, h);
+          URL.revokeObjectURL(img.src);
+          canvas.toBlob((blob) => {
+            if (!blob) { reject(new Error('변환 실패')); return; }
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = name.replace(/\s/g, '_') + '.png';
+            a.click();
+            setTimeout(() => URL.revokeObjectURL(url), 1000);
+            resolve();
+          }, 'image/png');
+        };
+        img.onerror = () => reject(new Error('SVG 로드 실패'));
+        const blob = new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' });
+        img.src = URL.createObjectURL(blob);
+      });
+    } catch {
+      alert('PNG 변환에 실패했습니다. SVG를 브라우저에서 열어 우클릭 → 이미지로 저장을 시도해 주세요.');
+    } finally {
+      setConvertingPng(null);
+    }
+  }
+
+  const TABS = [
+    { key: 'design', label: '디자인', icon: '🎨', color: 'blue' },
+    { key: 'pm', label: 'PM', icon: '📋', color: 'violet' },
+    { key: 'quality', label: '품질', icon: '✅', color: 'emerald' },
+    { key: 'marketing', label: '마케팅', icon: '📣', color: 'amber' },
+  ] as const;
+
+  const tabColors: Record<string, string> = {
+    blue: 'bg-blue-500/20 text-blue-300 border-blue-500/50',
+    violet: 'bg-violet-500/20 text-violet-300 border-violet-500/50',
+    emerald: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/50',
+    amber: 'bg-amber-500/20 text-amber-300 border-amber-500/50',
+  };
+
+  return (
+    <div className="p-8 max-w-[1400px]">
+      {/* 헤더 */}
+      <div className="mb-8">
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-white mb-1">마케팅 에셋</h1>
+            <p className="text-slate-400 text-sm">크몽·숨고 등록용 썸네일 및 배너 — 4대 전문가 품질 체크리스트 포함</p>
+          </div>
+          <button
+            onClick={() => setShowGuide(v => !v)}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm transition-all"
+          >
+            <span>📖</span>
+            {showGuide ? '가이드 닫기' : '등록 가이드 보기'}
+          </button>
+        </div>
+
+        {/* 통계 */}
+        <div className="grid grid-cols-4 gap-4 mt-6">
+          {[
+            { label: '전체 에셋', value: ASSETS.length, unit: '개', color: 'text-white' },
+            { label: '썸네일', value: ASSETS.filter(a => a.size.includes('675')).length, unit: '개', color: 'text-blue-400' },
+            { label: '배너', value: ASSETS.filter(a => a.size.includes('400')).length, unit: '개', color: 'text-violet-400' },
+            { label: '크몽 등록 가능', value: ASSETS.length, unit: '개', color: 'text-emerald-400' },
+          ].map(stat => (
+            <div key={stat.label} className="bg-slate-900 rounded-xl border border-slate-800 px-4 py-3">
+              <p className="text-slate-500 text-xs mb-1">{stat.label}</p>
+              <p className={`text-2xl font-bold ${stat.color}`}>{stat.value}<span className="text-sm font-normal text-slate-500 ml-1">{stat.unit}</span></p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 크몽 등록 가이드 */}
+      {showGuide && (
+        <div className="mb-8 bg-slate-900 rounded-2xl border border-slate-700 overflow-hidden">
+          <div className="px-6 py-4 border-b border-slate-800 flex items-center gap-2">
+            <span className="text-yellow-400">⚡</span>
+            <h2 className="text-white font-bold text-sm">크몽 썸네일 등록 완전 가이드</h2>
+          </div>
+          <div className="p-6 grid grid-cols-3 gap-6">
+            <div>
+              <h3 className="text-blue-400 font-semibold text-sm mb-3 flex items-center gap-2"><span>1️⃣</span> PNG 다운로드 방법</h3>
+              <ol className="space-y-2 text-slate-400 text-sm">
+                <li className="flex gap-2"><span className="text-emerald-400 shrink-0">✓</span><span><span className="text-white font-semibold">PNG 다운로드</span> 버튼 클릭 → 즉시 변환</span></li>
+                <li className="flex gap-2"><span className="text-slate-600 shrink-0">①</span>브라우저가 SVG를 직접 렌더링하여 PNG 생성</li>
+                <li className="flex gap-2"><span className="text-slate-600 shrink-0">②</span>한글 폰트(맑은 고딕)가 깨지지 않고 그대로 캡처됨</li>
+              </ol>
+              <div className="mt-3 px-3 py-2 bg-blue-900/20 border border-blue-500/30 rounded-lg text-blue-300 text-xs">
+                외부 변환 도구 불필요 — 브라우저에서 직접 PNG로 변환합니다.
+              </div>
+            </div>
+            <div>
+              <h3 className="text-violet-400 font-semibold text-sm mb-3 flex items-center gap-2"><span>2️⃣</span> 크몽 서비스 등록 체크</h3>
+              <ul className="space-y-2 text-slate-400 text-sm">
+                {['썸네일: 1200×675px (권장)', '파일 크기: 10MB 이하', '형식: JPG, PNG', '서비스 카테고리 정확히 선택', '가격 설정: 기본/스탠다드/프리미엄', '패키지 설명 500자 이상'].map(item => (
+                  <li key={item} className="flex gap-2"><span className="text-emerald-400">✓</span>{item}</li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-emerald-400 font-semibold text-sm mb-3 flex items-center gap-2"><span>3️⃣</span> 전문가 검토 순서</h3>
+              <div className="space-y-2">
+                {TABS.map(tab => (
+                  <div key={tab.key} className="flex items-center gap-3 text-sm">
+                    <span>{tab.icon}</span>
+                    <div>
+                      <span className="text-white font-medium">{tab.label} 전문가</span>
+                      <p className="text-slate-500 text-xs">
+                        {tab.key === 'design' && '시각 위계·색상·가독성 검토'}
+                        {tab.key === 'pm' && '정보 완전성·CTA·플랫폼 요건'}
+                        {tab.key === 'quality' && '오탈자·가격 정확성·파일 품질'}
+                        {tab.key === 'marketing' && '전환율·차별화·클릭 유도'}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 에셋 그리드 */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+        {ASSETS.map((asset) => {
+          const score = getTotalScore(asset.file);
+          const pct = score.total > 0 ? Math.round((score.done / score.total) * 100) : 0;
+          const isReady = pct >= 80;
+          return (
+            <div key={asset.file} className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-slate-600 transition-all group flex flex-col">
+              {/* 미리보기 */}
+              <button
+                onClick={() => setPreview(asset)}
+                className="w-full block relative overflow-hidden bg-slate-950 flex-shrink-0"
+                style={{ aspectRatio: asset.size.includes('400') ? '3/1' : '16/9' }}
+              >
+                <img
+                  src={asset.file}
+                  alt={asset.name}
+                  className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
+                />
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center">
+                  <span className="opacity-0 group-hover:opacity-100 text-white font-semibold text-sm bg-black/70 px-4 py-2 rounded-full transition-all flex items-center gap-2">
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+                    체크리스트 열기
+                  </span>
+                </div>
+                {/* 품질 뱃지 */}
+                <div className={`absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-bold ${isReady ? 'bg-emerald-500/90 text-white' : pct > 0 ? 'bg-amber-500/90 text-white' : 'bg-slate-700/90 text-slate-300'}`}>
+                  {isReady ? '✓ 등록 준비됨' : pct > 0 ? `${pct}% 완료` : '미검토'}
+                </div>
+              </button>
+
+              {/* 카드 정보 */}
+              <div className="p-4 flex-1 flex flex-col">
+                <div className="flex items-start justify-between gap-2 mb-2">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-white font-semibold text-sm truncate">{asset.name}</h3>
+                    <p className="text-slate-500 text-xs mt-0.5">{asset.desc}</p>
+                  </div>
+                  <span className="text-xs font-semibold px-2 py-1 rounded-full shrink-0 whitespace-nowrap" style={{ background: asset.color + '20', color: asset.color }}>
+                    {asset.platform}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-3 mb-3">
+                  <span className="text-slate-600 text-xs">{asset.size}px</span>
+                  <span className="text-slate-700">·</span>
+                  <span className="text-slate-500 text-xs font-medium">{asset.price}</span>
+                </div>
+
+                {/* 체크리스트 진행 바 */}
+                <div className="mb-3">
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-slate-600 text-xs">품질 체크</span>
+                    <span className="text-slate-500 text-xs">{score.done}/{score.total}</span>
+                  </div>
+                  <div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                    <div
+                      className="h-full rounded-full transition-all duration-500"
+                      style={{ width: `${pct}%`, background: isReady ? '#10b981' : pct > 0 ? '#f59e0b' : '#334155' }}
+                    />
+                  </div>
+                </div>
+
+                {/* 4대 전문가 점수 */}
+                <div className="grid grid-cols-4 gap-1 mb-3">
+                  {TABS.map(tab => {
+                    const s = getCheckScore(asset.file, tab.key);
+                    const ok = s.done === s.total && s.total > 0;
+                    return (
+                      <div key={tab.key} className={`text-center py-1 rounded-md text-xs ${ok ? 'bg-emerald-900/30 text-emerald-400' : 'bg-slate-800 text-slate-500'}`}>
+                        <div>{tab.icon}</div>
+                        <div className="mt-0.5">{s.done}/{s.total}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {/* 액션 버튼 */}
+                <div className="flex gap-2 mt-auto">
+                  <button
+                    onClick={() => downloadAsPng(asset.file, asset.name, asset.size)}
+                    disabled={convertingPng === asset.file}
+                    className="flex-1 py-2 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white transition-all flex items-center justify-center gap-1.5"
+                  >
+                    {convertingPng === asset.file ? (
+                      <>
+                        <svg className="w-3.5 h-3.5 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-8v8z"/></svg>
+                        변환 중...
+                      </>
+                    ) : (
+                      <>
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
+                        PNG 다운로드
+                      </>
+                    )}
+                  </button>
+                  <button
+                    onClick={() => download(asset.file, asset.name)}
+                    className="px-3 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white transition-all"
+                    title="SVG 원본 다운로드"
+                  >
+                    SVG
+                  </button>
+                  <button
+                    onClick={() => copyPath(asset.file)}
+                    className={`px-3 py-2 rounded-lg text-xs font-semibold transition-all ${copied === asset.file ? 'bg-emerald-900/40 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 hover:bg-slate-700 text-slate-400'}`}
+                  >
+                    {copied === asset.file ? '✓' : 'URL'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 모달 — 크게 보기 + 체크리스트 */}
+      {preview && (
+        <div
+          className="fixed inset-0 z-50 bg-black/95 flex items-start justify-center overflow-y-auto p-6"
+          onClick={() => setPreview(null)}
+        >
+          <div className="max-w-7xl w-full my-4" onClick={(e) => e.stopPropagation()}>
+            {/* 모달 헤더 */}
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-white font-bold text-xl">{preview.name}</h2>
+                <p className="text-slate-400 text-sm mt-0.5">{preview.size}px · {preview.desc}</p>
+              </div>
+              <div className="flex gap-3">
+                <button
+                  onClick={() => downloadAsPng(preview.file, preview.name, preview.size)}
+                  disabled={convertingPng === preview.file}
+                  className="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white transition-all flex items-center gap-2"
+                >
+                  {convertingPng === preview.file ? (
+                    <>
+                      <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-8v8z"/></svg>
+                      변환 중...
+                    </>
+                  ) : (
+                    <>
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
+                      PNG 다운로드
+                    </>
+                  )}
+                </button>
+                <button
+                  onClick={() => download(preview.file, preview.name)}
+                  className="px-4 py-2 rounded-lg text-sm font-semibold bg-slate-700 hover:bg-slate-600 text-slate-300 transition-all"
+                  title="SVG 원본 다운로드"
+                >
+                  SVG
+                </button>
+                <button onClick={() => setPreview(null)} className="text-slate-400 hover:text-white w-10 h-10 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center transition-all text-xl">
+                  ×
+                </button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 xl:grid-cols-[1fr_400px] gap-6">
+              {/* 미리보기 */}
+              <div>
+                <img
+                  src={preview.file}
+                  alt={preview.name}
+                  className="w-full rounded-xl border border-slate-700"
+                />
+                <div className="mt-4 grid grid-cols-4 gap-3">
+                  {TABS.map(tab => {
+                    const s = getCheckScore(preview.file, tab.key);
+                    const pct2 = Math.round((s.done / s.total) * 100);
+                    return (
+                      <div key={tab.key} className="bg-slate-900 rounded-xl p-3 text-center">
+                        <div className="text-xl mb-1">{tab.icon}</div>
+                        <div className="text-white font-bold text-sm">{tab.label}</div>
+                        <div className="text-slate-400 text-xs mt-0.5">{s.done}/{s.total} 항목</div>
+                        <div className="mt-2 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                          <div className="h-full rounded-full bg-blue-500 transition-all" style={{ width: `${pct2}%` }} />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* 체크리스트 패널 */}
+              <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden flex flex-col">
+                <div className="flex border-b border-slate-800">
+                  {TABS.map(tab => (
+                    <button
+                      key={tab.key}
+                      onClick={() => setActiveTab(tab.key)}
+                      className={`flex-1 py-3 text-xs font-semibold transition-all ${
+                        activeTab === tab.key
+                          ? 'text-white border-b-2 border-blue-500 bg-slate-800/50'
+                          : 'text-slate-500 hover:text-slate-300'
+                      }`}
+                    >
+                      {tab.icon} {tab.label}
+                    </button>
+                  ))}
+                </div>
+
+                <div className="p-4 flex-1 overflow-y-auto">
+                  <div className="mb-3">
+                    <span className={`inline-flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded-full border ${tabColors[TABS.find(t => t.key === activeTab)?.color ?? 'blue']}`}>
+                      {TABS.find(t => t.key === activeTab)?.icon}
+                      {TABS.find(t => t.key === activeTab)?.label} 전문가 관점
+                    </span>
+                  </div>
+
+                  <ul className="space-y-2.5">
+                    {CHECKLIST_ITEMS[activeTab].map((item, i) => {
+                      const key = `${preview.file}_${activeTab}_${i}`;
+                      const checked = !!checks[key];
+                      return (
+                        <li key={i}>
+                          <label className="flex items-start gap-3 cursor-pointer group/item">
+                            <div className={`w-5 h-5 rounded-md border-2 flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
+                              checked ? 'bg-emerald-500 border-emerald-500' : 'border-slate-700 group-hover/item:border-slate-500'
+                            }`}
+                              onClick={() => toggleCheck(key)}
+                            >
+                              {checked && (
+                                <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7"/>
+                                </svg>
+                              )}
+                            </div>
+                            <span
+                              className={`text-sm leading-relaxed transition-all ${checked ? 'text-slate-500 line-through' : 'text-slate-300'}`}
+                              onClick={() => toggleCheck(key)}
+                            >
+                              {item}
+                            </span>
+                          </label>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+
+                {/* 전체 점수 */}
+                <div className="p-4 border-t border-slate-800">
+                  {(() => {
+                    const s = getTotalScore(preview.file);
+                    const pct3 = Math.round((s.done / s.total) * 100);
+                    return (
+                      <div>
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-slate-400 text-sm">전체 품질 점수</span>
+                          <span className={`font-bold text-sm ${pct3 >= 80 ? 'text-emerald-400' : pct3 >= 50 ? 'text-amber-400' : 'text-slate-400'}`}>
+                            {pct3}% ({s.done}/{s.total})
+                          </span>
+                        </div>
+                        <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
+                          <div
+                            className="h-full rounded-full transition-all duration-500"
+                            style={{ width: `${pct3}%`, background: pct3 >= 80 ? '#10b981' : pct3 >= 50 ? '#f59e0b' : '#64748b' }}
+                          />
+                        </div>
+                        {pct3 >= 80 && (
+                          <div className="mt-2 text-center text-emerald-400 text-xs font-semibold">🎉 크몽 등록 준비 완료!</div>
+                        )}
+                        {pct3 < 80 && pct3 > 0 && (
+                          <div className="mt-2 text-center text-amber-400 text-xs">추가 검토 후 등록을 권장합니다</div>
+                        )}
+                      </div>
+                    );
+                  })()}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/members/page.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Member {
+  id: string;
+  email: string;
+  full_name: string | null;
+  created_at: string;
+  orderCount: number;
+  totalPaid: number;
+  activeSub: { product_id: string; status: string; expires_at: string } | null;
+}
+
+const PLAN_LABELS: Record<string, string> = {
+  lotto_gold: '🥇 골드',
+  lotto_platinum: '💎 플래티넘',
+  lotto_diamond: '👑 다이아',
+};
+
+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-4 md:p-6 max-w-6xl mx-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-white text-xl md: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 flex-shrink-0">
+          총 {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>
+      ) : filtered.length === 0 ? (
+        <div className="text-center py-16 text-slate-500">회원 데이터가 없습니다</div>
+      ) : (
+        <>
+          {/* PC 테이블 뷰 */}
+          <div className="hidden md:block bg-slate-900 rounded-2xl border border-slate-700/50 overflow-x-auto">
+            <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-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.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">
+                      {m.activeSub ? (
+                        <div>
+                          <span className="text-xs font-semibold text-amber-400">{PLAN_LABELS[m.activeSub.product_id] ?? m.activeSub.product_id}</span>
+                          <div className="text-xs text-slate-500">{new Date(m.activeSub.expires_at).toLocaleDateString('ko-KR')} 만료</div>
+                        </div>
+                      ) : (
+                        <span className="text-xs text-slate-600">-</span>
+                      )}
+                    </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 className="md:hidden space-y-3">
+            {filtered.map((m) => (
+              <div key={m.id} className="bg-slate-900 rounded-xl border border-slate-700/50 p-4">
+                {/* 이메일 + 이름 */}
+                <div className="flex items-start justify-between mb-3">
+                  <div className="min-w-0 flex-1">
+                    <p className="text-white text-sm font-semibold truncate">{m.email ?? '-'}</p>
+                    <p className="text-slate-400 text-xs mt-0.5">{m.full_name ?? '이름 없음'}</p>
+                  </div>
+                  {m.activeSub && (
+                    <span className="ml-2 flex-shrink-0 text-xs font-semibold text-amber-400 bg-amber-900/20 px-2 py-0.5 rounded-full">
+                      {PLAN_LABELS[m.activeSub.product_id] ?? m.activeSub.product_id}
+                    </span>
+                  )}
+                </div>
+
+                {/* 상세 정보 그리드 */}
+                <div className="grid grid-cols-3 gap-2 pt-3 border-t border-slate-800">
+                  <div>
+                    <p className="text-slate-500 text-xs mb-0.5">가입일</p>
+                    <p className="text-slate-300 text-xs">{new Date(m.created_at).toLocaleDateString('ko-KR')}</p>
+                  </div>
+                  <div>
+                    <p className="text-slate-500 text-xs mb-0.5">결제 건수</p>
+                    <span className={`inline-block px-1.5 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>
+                  </div>
+                  <div>
+                    <p className="text-slate-500 text-xs mb-0.5">총 결제액</p>
+                    <p className="text-slate-200 text-xs font-medium">
+                      {m.totalPaid > 0 ? `₩${m.totalPaid.toLocaleString()}` : '-'}
+                    </p>
+                  </div>
+                </div>
+
+                {m.activeSub && (
+                  <p className="text-slate-600 text-xs mt-2">
+                    구독 만료: {new Date(m.activeSub.expires_at).toLocaleDateString('ko-KR')}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

app/admin/packs/page.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+type PackTier = 'starter' | 'pro' | 'master';
+
+interface PackFile {
+  id: string;
+  min_tier: PackTier;
+  label: string;
+  filename: string;
+  size_bytes: number;
+  sort_order: number;
+  uploaded_at: string;
+}
+
+const TIER_LABEL: Record<PackTier, string> = {
+  starter: '입문',
+  pro: '프로',
+  master: '마스터',
+};
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+export default function AdminPacksPage() {
+  const [files, setFiles] = useState<PackFile[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // 업로드 form state
+  const [tier, setTier] = useState<PackTier>('starter');
+  const [label, setLabel] = useState('');
+  const [file, setFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  async function loadFiles() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/admin/packs');
+      const data = await res.json();
+      setFiles(data.files ?? []);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { loadFiles(); }, []);
+
+  async function handleUpload(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    if (!file || !label) return;
+    setUploading(true);
+    setProgress(0);
+
+    try {
+      // 1) Vercel API에서 일회성 토큰 발급
+      const tokenRes = await fetch('/api/admin/packs/upload-url', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          tier,
+          label,
+          filename: file.name,
+          sizeBytes: file.size,
+        }),
+      });
+      if (!tokenRes.ok) {
+        const err = await tokenRes.json();
+        throw new Error(err.error ?? '토큰 발급 실패');
+      }
+      const { token, uploadUrl } = await tokenRes.json();
+
+      // 2) 브라우저가 web-backend에 직접 multipart POST (XHR로 진행률 추적)
+      await new Promise<void>((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', uploadUrl);
+        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+        xhr.upload.onprogress = (ev) => {
+          if (ev.lengthComputable) {
+            setProgress(Math.round((ev.loaded / ev.total) * 100));
+          }
+        };
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) resolve();
+          else {
+            try {
+              const { detail } = JSON.parse(xhr.responseText);
+              reject(new Error(detail ?? `HTTP ${xhr.status}`));
+            } catch {
+              reject(new Error(`HTTP ${xhr.status}`));
+            }
+          }
+        };
+        xhr.onerror = () => reject(new Error('네트워크 오류'));
+        const fd = new FormData();
+        fd.append('file', file);
+        xhr.send(fd);
+      });
+
+      // 3) 리스트 갱신
+      setFile(null);
+      setLabel('');
+      setProgress(0);
+      await loadFiles();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '업로드 실패');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function handleDelete(id: string, label: string) {
+    if (!confirm(`"${label}" 자료를 삭제하시겠습니까?`)) return;
+    try {
+      const res = await fetch(`/api/admin/packs?id=${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error('삭제 실패');
+      await loadFiles();
+    } catch (e) {
+      alert(e instanceof Error ? e.message : '삭제 실패');
+    }
+  }
+
+  async function handlePatch(id: string, updates: Partial<PackFile>) {
+    try {
+      await fetch('/api/admin/packs', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, ...updates }),
+      });
+      await loadFiles();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  const grouped: Record<PackTier, PackFile[]> = {
+    starter: files.filter((f) => f.min_tier === 'starter'),
+    pro: files.filter((f) => f.min_tier === 'pro'),
+    master: files.filter((f) => f.min_tier === 'master'),
+  };
+
+  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">
+          NAS 자료 업로드 + 다운로드 활성화. 최대 5GB / 4시간 만료 공유 링크.
+        </p>
+      </div>
+
+      {/* 업로드 폼 */}
+      <form onSubmit={handleUpload} className="bg-slate-900 rounded-xl border border-slate-700 p-5 mb-8">
+        <h2 className="text-white font-bold mb-4">새 자료 업로드</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
+          <select
+            value={tier}
+            onChange={(e) => setTier(e.target.value as PackTier)}
+            disabled={uploading}
+            className="bg-slate-800 text-white border border-slate-700 rounded px-3 py-2"
+          >
+            <option value="starter">{TIER_LABEL.starter}</option>
+            <option value="pro">{TIER_LABEL.pro}</option>
+            <option value="master">{TIER_LABEL.master}</option>
+          </select>
+          <input
+            type="text"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            disabled={uploading}
+            placeholder="자료 라벨 (예: Suno 프롬프트 북 PDF)"
+            className="bg-slate-800 text-white border border-slate-700 rounded px-3 py-2 md:col-span-2"
+          />
+        </div>
+        <input
+          type="file"
+          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
+          disabled={uploading}
+          className="text-slate-300 mb-3 block"
+        />
+        {file && (
+          <p className="text-slate-400 text-xs mb-3">
+            선택됨: {file.name} ({formatSize(file.size)})
+          </p>
+        )}
+        {uploading && (
+          <div className="mb-3">
+            <div className="bg-slate-800 rounded h-2 overflow-hidden">
+              <div className="bg-violet-500 h-full transition-all" style={{ width: `${progress}%` }} />
+            </div>
+            <p className="text-slate-400 text-xs mt-1">{progress}% 업로드 중... 페이지를 닫지 마세요</p>
+          </div>
+        )}
+        {error && <p className="text-red-400 text-sm mb-3">{error}</p>}
+        <button
+          type="submit"
+          disabled={uploading || !file || !label}
+          className="bg-violet-600 hover:bg-violet-500 disabled:bg-slate-700 disabled:cursor-not-allowed text-white font-bold px-5 py-2 rounded"
+        >
+          {uploading ? '업로드 중...' : '업로드'}
+        </button>
+      </form>
+
+      {/* 자료 리스트 */}
+      {loading ? (
+        <p className="text-slate-400">불러오는 중...</p>
+      ) : (
+        (['starter', 'pro', 'master'] as PackTier[]).map((t) => (
+          <div key={t} className="mb-6">
+            <h3 className="text-white font-bold mb-2">
+              {TIER_LABEL[t]} ({grouped[t].length})
+            </h3>
+            {grouped[t].length === 0 ? (
+              <p className="text-slate-500 text-sm pl-2">자료 없음</p>
+            ) : (
+              <div className="space-y-2">
+                {grouped[t].map((f) => (
+                  <div key={f.id} className="bg-slate-900 border border-slate-700 rounded-lg p-3 flex items-center gap-3">
+                    <input
+                      type="text"
+                      defaultValue={f.label}
+                      onBlur={(e) => {
+                        if (e.target.value !== f.label) handlePatch(f.id, { label: e.target.value });
+                      }}
+                      className="flex-1 bg-transparent text-white border-b border-transparent focus:border-slate-500 px-1 py-1"
+                    />
+                    <span className="text-slate-400 text-xs">{f.filename}</span>
+                    <span className="text-slate-500 text-xs">{formatSize(f.size_bytes)}</span>
+                    <button
+                      onClick={() => handleDelete(f.id, f.label)}
+                      className="text-red-400 hover:text-red-300 text-sm px-2"
+                    >
+                      삭제
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

app/admin/page.tsx

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

app/admin/questionnaire/page.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface QuestionnaireResponse {
+  id: string;
+  questionnaire_type: string;
+  client_name: string;
+  client_email: string;
+  client_phone: string | null;
+  responses: Record<string, unknown>;
+  status: string;
+  admin_notes: string | null;
+  created_at: string;
+  reviewed_at: string | null;
+}
+
+const STATUS_CONFIG: Record<string, { label: string; color: string }> = {
+  submitted: { label: '접수', color: 'bg-blue-900/40 text-blue-400 border-blue-500/30' },
+  reviewed: { label: '검토완료', color: 'bg-green-900/40 text-green-400 border-green-500/30' },
+  archived: { label: '보관', color: 'bg-slate-700/60 text-slate-400 border-slate-500/30' },
+};
+
+const QUESTION_LABELS: Record<string, string> = {
+  q1: '주 사용 부품 사이트 URL',
+  q2: '주요 취급 부품 카테고리',
+  q3: '샘플 품번 목록',
+  q4: '현재 eBay 리스팅 URL',
+  q5: 'eBay 셀러 계정 등급',
+  q6: '주 판매 카테고리',
+  q7: '예상 월간 리스팅 건수',
+  q8: 'Fitment 정확도 기대치',
+  q8_detail: 'Fitment 추가 의견',
+  q9_selected: '타겟 마켓',
+  q9_detail: '타겟 마켓 기타',
+  q10: '리스팅 1건 소요 시간',
+  q11: '기존 리스팅 관리 방식',
+  q11_detail: '서드파티 툴 이름',
+  q12: '관세/통관 계산 방식',
+  q13: 'eBay Developer API 키 보유',
+  q14: '선호 AI 모델',
+  q15: '현재 자동화 도구',
+  q16: 'AI API 키 보유 여부',
+  q17: '포트폴리오 활용 동의',
+  additional: '추가 요청사항',
+};
+
+export default function AdminQuestionnairePage() {
+  const [responses, setResponses] = useState<QuestionnaireResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<QuestionnaireResponse | null>(null);
+  const [adminNotes, setAdminNotes] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    fetchResponses();
+  }, []);
+
+  async function fetchResponses() {
+    try {
+      const res = await fetch('/api/admin/questionnaire');
+      if (!res.ok) throw new Error();
+      const json = await res.json();
+      setResponses(json.data || []);
+    } catch {
+      setResponses([]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function openDetail(item: QuestionnaireResponse) {
+    setSelected(item);
+    setAdminNotes(item.admin_notes || '');
+  }
+
+  async function updateStatus(id: string, status: string) {
+    setSaving(true);
+    try {
+      await fetch(`/api/admin/questionnaire/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status, admin_notes: adminNotes }),
+      });
+      await fetchResponses();
+      if (selected?.id === id) {
+        setSelected(prev => prev ? { ...prev, status, admin_notes: adminNotes } : null);
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function formatDate(dateStr: string) {
+    return new Date(dateStr).toLocaleDateString('ko-KR', {
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit',
+    });
+  }
+
+  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="text-slate-400 text-sm py-12 text-center">불러오는 중...</div>
+      ) : responses.length === 0 ? (
+        <div className="bg-slate-900 rounded-2xl border border-slate-700/50 p-12 text-center">
+          <svg className="w-12 h-12 text-slate-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+          </svg>
+          <p className="text-slate-400 text-sm">아직 제출된 질문지가 없습니다</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {/* 목록 */}
+          <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 text-slate-400 font-medium px-5 py-3">고객명</th>
+                  <th className="text-left text-slate-400 font-medium px-5 py-3">이메일</th>
+                  <th className="text-left text-slate-400 font-medium px-5 py-3">유형</th>
+                  <th className="text-left text-slate-400 font-medium px-5 py-3">상태</th>
+                  <th className="text-left text-slate-400 font-medium px-5 py-3">접수일</th>
+                  <th className="text-right text-slate-400 font-medium px-5 py-3"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {responses.map((item) => {
+                  const st = STATUS_CONFIG[item.status] || STATUS_CONFIG.submitted;
+                  return (
+                    <tr
+                      key={item.id}
+                      className={`border-b border-slate-800/50 hover:bg-slate-800/30 cursor-pointer transition ${
+                        selected?.id === item.id ? 'bg-slate-800/50' : ''
+                      }`}
+                      onClick={() => openDetail(item)}
+                    >
+                      <td className="px-5 py-3 text-white font-medium">{item.client_name}</td>
+                      <td className="px-5 py-3 text-slate-300">{item.client_email}</td>
+                      <td className="px-5 py-3 text-slate-400">{item.questionnaire_type}</td>
+                      <td className="px-5 py-3">
+                        <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium border ${st.color}`}>
+                          {st.label}
+                        </span>
+                      </td>
+                      <td className="px-5 py-3 text-slate-400">{formatDate(item.created_at)}</td>
+                      <td className="px-5 py-3 text-right">
+                        <svg className="w-4 h-4 text-slate-500 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 상세 패널 */}
+          {selected && (
+            <div className="bg-slate-900 rounded-2xl border border-slate-700/50 overflow-hidden">
+              <div className="flex items-center justify-between px-5 py-4 border-b border-slate-700/50">
+                <div>
+                  <h3 className="text-white font-semibold">
+                    {selected.client_name} — 응답 상세
+                  </h3>
+                  <p className="text-slate-400 text-xs mt-0.5">
+                    {selected.client_email}
+                    {selected.client_phone && ` · ${selected.client_phone}`}
+                    {' · '}접수: {formatDate(selected.created_at)}
+                  </p>
+                </div>
+                <button
+                  onClick={() => setSelected(null)}
+                  className="p-1.5 rounded-lg text-slate-500 hover:text-white hover:bg-slate-800 transition"
+                >
+                  <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>
+
+              <div className="p-5 space-y-4 max-h-[60vh] overflow-y-auto">
+                {Object.entries(selected.responses).map(([key, value]) => (
+                  <div key={key} className="bg-slate-800/50 rounded-lg p-4">
+                    <div className="text-xs text-slate-400 font-medium mb-1.5">
+                      {QUESTION_LABELS[key] || key}
+                    </div>
+                    <div className="text-white text-sm whitespace-pre-wrap">
+                      {Array.isArray(value) ? (value as string[]).join(', ') : String(value)}
+                    </div>
+                  </div>
+                ))}
+
+                {Object.keys(selected.responses).length === 0 && (
+                  <p className="text-slate-500 text-sm text-center py-4">응답 내용이 없습니다</p>
+                )}
+              </div>
+
+              {/* 관리자 메모 + 상태 변경 */}
+              <div className="px-5 py-4 border-t border-slate-700/50 space-y-3">
+                <div>
+                  <label className="text-slate-400 text-xs font-medium block mb-1.5">관리자 메모</label>
+                  <textarea
+                    value={adminNotes}
+                    onChange={(e) => setAdminNotes(e.target.value)}
+                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm resize-none focus:outline-none focus:border-red-500/50"
+                    rows={2}
+                    placeholder="내부 참고용 메모..."
+                  />
+                </div>
+                <div className="flex gap-2">
+                  {selected.status !== 'reviewed' && (
+                    <button
+                      onClick={() => updateStatus(selected.id, 'reviewed')}
+                      disabled={saving}
+                      className="px-4 py-2 rounded-lg text-xs font-medium bg-green-600/20 text-green-400 hover:bg-green-600/30 transition border border-green-500/20 disabled:opacity-50"
+                    >
+                      {saving ? '저장 중...' : '검토 완료'}
+                    </button>
+                  )}
+                  {selected.status !== 'archived' && (
+                    <button
+                      onClick={() => updateStatus(selected.id, 'archived')}
+                      disabled={saving}
+                      className="px-4 py-2 rounded-lg text-xs font-medium bg-slate-700 text-slate-300 hover:bg-slate-600 transition disabled:opacity-50"
+                    >
+                      보관 처리
+                    </button>
+                  )}
+                  {selected.status !== 'submitted' && (
+                    <button
+                      onClick={() => updateStatus(selected.id, 'submitted')}
+                      disabled={saving}
+                      className="px-4 py-2 rounded-lg text-xs font-medium bg-blue-600/20 text-blue-400 hover:bg-blue-600/30 transition border border-blue-500/20 disabled:opacity-50"
+                    >
+                      접수로 되돌리기
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/quotes/[id]/page.tsx

@@ -0,0 +1,627 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+/* ─── 타입 ─────────────────────────────────────────────── */
+interface WBSTask { id: string; name: string; duration: string; description: string; }
+interface WBSPhase { id: string; phase: string; tasks: WBSTask[]; }
+interface QuoteItem {
+  id: string; category: string; name: string; description: string;
+  quantity: number; unitPrice: number; optional: boolean;
+}
+interface MaintenancePlan {
+  id: string; name: string; period: string; monthlyFee: number;
+  includes: string[]; recommended: boolean;
+}
+interface QuoteForm {
+  title: string; client_name: string; client_email: string;
+  valid_until: string; status: string;
+  wbs: WBSPhase[]; items: QuoteItem[]; maintenance: MaintenancePlan[]; notes: string;
+}
+
+const newId = () => Math.random().toString(36).slice(2, 9);
+
+const STATUS_OPTIONS = [
+  { value: 'draft', label: '초안' },
+  { value: 'sent', label: '발송됨' },
+  { value: 'accepted', label: '수락됨' },
+  { value: 'rejected', label: '거절됨' },
+];
+
+const ITEM_CATEGORIES = ['기획', '디자인', '개발', '인프라', '유지보수', '기타'];
+
+const TABS = ['기본정보', 'WBS', '견적항목', '향후관리', '특이사항', '진행 단계'] as const;
+type Tab = typeof TABS[number];
+
+interface Milestone {
+  id: string;
+  step_number: number;
+  title: string;
+  description: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  note: string;
+  completed_at: string | null;
+}
+
+/* ─── 컴포넌트 ─────────────────────────────────────────── */
+export default function QuoteEditorPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [tab, setTab] = useState<Tab>('기본정보');
+  const [form, setForm] = useState<QuoteForm>({
+    title: '새 견적서', client_name: '', client_email: '',
+    valid_until: '', status: 'draft',
+    wbs: [], items: [], maintenance: [], notes: '',
+  });
+  const [publicToken, setPublicToken] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [milestones, setMilestones] = useState<Milestone[]>([]);
+  const [mileSaving, setMileSaving] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/admin/quotes/${id}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (d.quote) {
+          const q = d.quote;
+          setForm({
+            title: q.title, client_name: q.client_name, client_email: q.client_email,
+            valid_until: q.valid_until?.slice(0, 10) ?? '', status: q.status,
+            wbs: q.wbs ?? [], items: q.items ?? [],
+            maintenance: q.maintenance ?? [], notes: q.notes ?? '',
+          });
+          setPublicToken(q.public_token);
+        }
+      })
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const save = useCallback(async (silent = false) => {
+    if (!silent) setSaving(true);
+    await fetch(`/api/admin/quotes/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(form),
+    });
+    if (!silent) { setSaving(false); setSaved(true); setTimeout(() => setSaved(false), 2000); }
+  }, [id, form]);
+
+  // ── Milestones ──────────────────────────
+  async function fetchMilestones() {
+    const res = await fetch(`/api/admin/milestones?quoteId=${id}`);
+    const d = await res.json();
+    setMilestones(d.milestones ?? []);
+  }
+
+  async function initDefaultMilestones() {
+    if (!confirm('기존 단계를 삭제하고 기본 7단계로 초기화할까요?')) return;
+    const res = await fetch('/api/admin/milestones', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ useDefaults: true, quoteId: id }),
+    });
+    const d = await res.json();
+    setMilestones(d.milestones ?? []);
+  }
+
+  async function updateMilestone(mid: string, field: string, value: string) {
+    setMileSaving(mid);
+    const res = await fetch(`/api/admin/milestones/${mid}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ [field]: value }),
+    });
+    const d = await res.json();
+    if (d.milestone) {
+      setMilestones((prev) => prev.map((m) => m.id === mid ? d.milestone : m));
+    }
+    setMileSaving(null);
+  }
+
+  // ── helpers ────────────────────────────
+  const setField = (k: keyof QuoteForm, v: unknown) => setForm((f) => ({ ...f, [k]: v }));
+
+  const totalPrice = form.items.reduce((s, i) => s + i.unitPrice * i.quantity, 0);
+
+  function copyLink() {
+    navigator.clipboard.writeText(`${window.location.origin}/quote/${publicToken}`);
+    setCopied(true); setTimeout(() => setCopied(false), 2000);
+  }
+
+  // ── WBS ────────────────────────────────
+  function addPhase() {
+    setField('wbs', [...form.wbs, { id: newId(), phase: '새 단계', tasks: [] }]);
+  }
+  function updatePhase(phaseId: string, k: string, v: string) {
+    setField('wbs', form.wbs.map((p) => p.id === phaseId ? { ...p, [k]: v } : p));
+  }
+  function removePhase(phaseId: string) {
+    setField('wbs', form.wbs.filter((p) => p.id !== phaseId));
+  }
+  function addTask(phaseId: string) {
+    setField('wbs', form.wbs.map((p) => p.id === phaseId
+      ? { ...p, tasks: [...p.tasks, { id: newId(), name: '새 작업', duration: '1일', description: '' }] }
+      : p));
+  }
+  function updateTask(phaseId: string, taskId: string, k: string, v: string) {
+    setField('wbs', form.wbs.map((p) => p.id === phaseId
+      ? { ...p, tasks: p.tasks.map((t) => t.id === taskId ? { ...t, [k]: v } : t) }
+      : p));
+  }
+  function removeTask(phaseId: string, taskId: string) {
+    setField('wbs', form.wbs.map((p) => p.id === phaseId
+      ? { ...p, tasks: p.tasks.filter((t) => t.id !== taskId) }
+      : p));
+  }
+
+  // ── Items ───────────────────────────────
+  function addItem() {
+    setField('items', [...form.items, {
+      id: newId(), category: '개발', name: '', description: '',
+      quantity: 1, unitPrice: 0, optional: false,
+    }]);
+  }
+  function updateItem(itemId: string, k: string, v: unknown) {
+    setField('items', form.items.map((i) => i.id === itemId ? { ...i, [k]: v } : i));
+  }
+  function removeItem(itemId: string) {
+    setField('items', form.items.filter((i) => i.id !== itemId));
+  }
+
+  // ── Maintenance ─────────────────────────
+  function addPlan() {
+    setField('maintenance', [...form.maintenance, {
+      id: newId(), name: '기본 유지보수', period: '3개월',
+      monthlyFee: 0, includes: ['버그 수정', '소소한 변경'], recommended: false,
+    }]);
+  }
+  function updatePlan(planId: string, k: string, v: unknown) {
+    setField('maintenance', form.maintenance.map((p) => p.id === planId ? { ...p, [k]: v } : p));
+  }
+  function removePlan(planId: string) {
+    setField('maintenance', form.maintenance.filter((p) => p.id !== planId));
+  }
+  function updatePlanInclude(planId: string, idx: number, v: string) {
+    setField('maintenance', form.maintenance.map((p) => p.id === planId
+      ? { ...p, includes: p.includes.map((inc, i) => i === idx ? v : inc) }
+      : p));
+  }
+  function addPlanInclude(planId: string) {
+    setField('maintenance', form.maintenance.map((p) => p.id === planId
+      ? { ...p, includes: [...p.includes, ''] }
+      : p));
+  }
+  function removePlanInclude(planId: string, idx: number) {
+    setField('maintenance', form.maintenance.map((p) => p.id === planId
+      ? { ...p, includes: p.includes.filter((_, i) => i !== idx) }
+      : p));
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-full text-slate-500 p-20">불러오는 중...</div>;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* 상단 바 */}
+      <div className="sticky top-0 z-10 bg-slate-950 border-b border-slate-800 px-8 py-4 flex items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <Link href="/admin/quotes" className="text-slate-400 hover:text-white transition-colors">
+            <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>
+          <div>
+            <h1 className="text-white font-bold text-lg leading-tight">{form.title || '견적서 편집'}</h1>
+            <p className="text-slate-500 text-xs">{form.client_name || '고객 미지정'} · 합계 {totalPrice.toLocaleString()}원</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 공개 링크 */}
+          {publicToken && (
+            <button onClick={copyLink} className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all border ${copied ? 'border-green-500 text-green-400 bg-green-900/20' : 'border-slate-700 text-slate-400 hover:text-white hover:border-slate-600'}`}>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              {copied ? '복사됨!' : '고객 링크 복사'}
+            </button>
+          )}
+          {/* 미리보기 */}
+          {publicToken && (
+            <a href={`/quote/${publicToken}`} target="_blank" rel="noreferrer"
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border border-slate-700 text-slate-400 hover:text-white hover:border-slate-600 transition-all">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+              미리보기
+            </a>
+          )}
+          {/* PDF 저장 */}
+          {publicToken && (
+            <a href={`/quote/${publicToken}?print=1`} target="_blank" rel="noreferrer"
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border border-violet-700 text-violet-400 hover:text-violet-300 hover:border-violet-500 transition-all">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3l3 3 3-3" />
+              </svg>
+              PDF 저장
+            </a>
+          )}
+          {/* 저장 */}
+          <button onClick={() => save()} disabled={saving}
+            className={`flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-semibold transition-all ${saved ? 'bg-green-600 text-white' : 'bg-blue-600 hover:bg-blue-500 text-white'} disabled:opacity-60`}>
+            {saving ? <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> :
+              saved ? '✓ 저장됨' : '저장'}
+          </button>
+        </div>
+      </div>
+
+      {/* 탭 */}
+      <div className="border-b border-slate-800 px-8">
+        <div className="flex gap-0">
+          {TABS.map((t) => (
+            <button key={t} onClick={() => { setTab(t); if (t === '진행 단계') fetchMilestones(); }}
+              className={`px-5 py-3 text-sm font-medium border-b-2 transition-all ${tab === t ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-500 hover:text-slate-300'}`}>
+              {t}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 콘텐츠 */}
+      <div className="flex-1 overflow-y-auto p-8">
+
+        {/* ── 기본정보 ── */}
+        {tab === '기본정보' && (
+          <div className="max-w-2xl space-y-6">
+            <div className="grid grid-cols-1 gap-5">
+              <Field label="견적서명">
+                <input className={inp} value={form.title} onChange={(e) => setField('title', e.target.value)} placeholder="예: 쇼핑몰 개발 견적서 v1.0" />
+              </Field>
+              <div className="grid grid-cols-2 gap-4">
+                <Field label="고객명">
+                  <input className={inp} value={form.client_name} onChange={(e) => setField('client_name', e.target.value)} placeholder="홍길동" />
+                </Field>
+                <Field label="고객 이메일">
+                  <input className={inp} type="email" value={form.client_email} onChange={(e) => setField('client_email', e.target.value)} placeholder="client@example.com" />
+                </Field>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Field label="유효기간">
+                  <input className={inp} type="date" value={form.valid_until} onChange={(e) => setField('valid_until', e.target.value)} />
+                </Field>
+                <Field label="상태">
+                  <select className={inp} value={form.status} onChange={(e) => setField('status', e.target.value)}>
+                    {STATUS_OPTIONS.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
+                  </select>
+                </Field>
+              </div>
+            </div>
+
+            {/* 요약 카드 */}
+            <div className="bg-slate-900 rounded-xl border border-slate-700 p-5">
+              <h3 className="text-slate-400 text-xs font-semibold uppercase tracking-wider mb-4">견적 요약</h3>
+              <div className="grid grid-cols-3 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-white">{form.items.length}</div>
+                  <div className="text-slate-500 text-xs mt-1">총 항목</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-blue-400">{form.items.filter(i => !i.optional).length}</div>
+                  <div className="text-slate-500 text-xs mt-1">필수 항목</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-violet-400">{form.items.filter(i => i.optional).length}</div>
+                  <div className="text-slate-500 text-xs mt-1">선택 항목</div>
+                </div>
+              </div>
+              <div className="mt-4 pt-4 border-t border-slate-800 flex items-center justify-between">
+                <span className="text-slate-400 text-sm">총 견적 금액</span>
+                <span className="text-xl font-bold text-white">{totalPrice.toLocaleString()}원</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ── WBS ── */}
+        {tab === 'WBS' && (
+          <div className="max-w-4xl space-y-4">
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-slate-400 text-sm">작업 분류 체계(WBS)를 단계별로 작성합니다</p>
+              <button onClick={addPhase} className={addBtn}>+ 단계 추가</button>
+            </div>
+            {form.wbs.length === 0 && (
+              <EmptyState icon="📋" msg="단계를 추가해 WBS를 작성해보세요" />
+            )}
+            {form.wbs.map((phase, pi) => (
+              <div key={phase.id} className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
+                <div className="flex items-center gap-3 p-4 bg-slate-800/40">
+                  <span className="text-slate-500 text-sm font-mono w-6 text-center">{pi + 1}</span>
+                  <input
+                    className="flex-1 bg-transparent text-white font-semibold focus:outline-none"
+                    value={phase.phase}
+                    onChange={(e) => updatePhase(phase.id, 'phase', e.target.value)}
+                    placeholder="단계명 (예: 기획, 디자인, 개발)"
+                  />
+                  <button onClick={() => addTask(phase.id)} className="text-xs text-blue-400 hover:text-blue-300 px-3 py-1 rounded-lg border border-blue-500/30 hover:border-blue-400/50 transition-all">+ 작업 추가</button>
+                  <button onClick={() => removePhase(phase.id)} className="text-slate-600 hover:text-red-400 transition-colors">
+                    <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>
+                {phase.tasks.length > 0 && (
+                  <div className="divide-y divide-slate-800/50">
+                    {phase.tasks.map((task) => (
+                      <div key={task.id} className="grid grid-cols-12 gap-3 px-4 py-3 items-center">
+                        <div className="col-span-4">
+                          <input className={inpSm} value={task.name} onChange={(e) => updateTask(phase.id, task.id, 'name', e.target.value)} placeholder="작업명" />
+                        </div>
+                        <div className="col-span-2">
+                          <input className={inpSm} value={task.duration} onChange={(e) => updateTask(phase.id, task.id, 'duration', e.target.value)} placeholder="기간 (예: 3일)" />
+                        </div>
+                        <div className="col-span-5">
+                          <input className={inpSm} value={task.description} onChange={(e) => updateTask(phase.id, task.id, 'description', e.target.value)} placeholder="작업 설명" />
+                        </div>
+                        <div className="col-span-1 flex justify-end">
+                          <button onClick={() => removeTask(phase.id, task.id)} className="text-slate-600 hover:text-red-400 transition-colors">
+                            <svg className="w-3.5 h-3.5" 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>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {phase.tasks.length === 0 && (
+                  <p className="text-slate-600 text-sm text-center py-4">작업 없음 — 위 버튼으로 추가하세요</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* ── 견적항목 ── */}
+        {tab === '견적항목' && (
+          <div className="max-w-6xl space-y-3">
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-slate-400 text-sm">선택 항목(optional)은 고객이 직접 선택/해제할 수 있습니다</p>
+              <button onClick={addItem} className={addBtn}>+ 항목 추가</button>
+            </div>
+
+            {/* 헤더 */}
+            {form.items.length > 0 && (
+              <div className="flex gap-3 px-4 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                <div className="w-[100px] flex-shrink-0">카테고리</div>
+                <div className="w-[200px] flex-shrink-0">항목명</div>
+                <div className="flex-1 min-w-[200px]">설명</div>
+                <div className="w-[60px] flex-shrink-0 text-right">수량</div>
+                <div className="w-[120px] flex-shrink-0 text-right">단가</div>
+                <div className="w-[50px] flex-shrink-0 text-center">선택</div>
+                <div className="w-[32px] flex-shrink-0" />
+              </div>
+            )}
+
+            {form.items.length === 0 && <EmptyState icon="💰" msg="항목을 추가해 견적을 구성해보세요" />}
+
+            {form.items.map((item) => (
+              <div key={item.id} className={`flex gap-3 px-4 py-3 rounded-xl border items-center transition-all ${item.optional ? 'bg-violet-900/10 border-violet-800/30' : 'bg-slate-900 border-slate-800'}`}>
+                <div className="w-[100px] flex-shrink-0">
+                  <select className={inpSm} value={item.category} onChange={(e) => updateItem(item.id, 'category', e.target.value)}>
+                    {ITEM_CATEGORIES.map((c) => <option key={c}>{c}</option>)}
+                  </select>
+                </div>
+                <div className="w-[200px] flex-shrink-0">
+                  <input className={inpSm} value={item.name} onChange={(e) => updateItem(item.id, 'name', e.target.value)} placeholder="항목명" />
+                </div>
+                <div className="flex-1 min-w-[200px]">
+                  <input className={inpSm} value={item.description} onChange={(e) => updateItem(item.id, 'description', e.target.value)} placeholder="상세 설명" />
+                </div>
+                <div className="w-[60px] flex-shrink-0">
+                  <input className={`${inpSm} text-right`} type="number" min={1} value={item.quantity} onChange={(e) => updateItem(item.id, 'quantity', Number(e.target.value))} />
+                </div>
+                <div className="w-[120px] flex-shrink-0">
+                  <input className={`${inpSm} text-right`} type="number" min={0} step={10000} value={item.unitPrice} onChange={(e) => updateItem(item.id, 'unitPrice', Number(e.target.value))} />
+                </div>
+                <div className="w-[50px] flex-shrink-0 flex justify-center">
+                  <button
+                    onClick={() => updateItem(item.id, 'optional', !item.optional)}
+                    title={item.optional ? '선택 항목 (클릭시 필수로)' : '필수 항목 (클릭시 선택으로)'}
+                    className={`w-10 h-5 rounded-full transition-all relative ${item.optional ? 'bg-violet-500' : 'bg-slate-600'}`}>
+                    <span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${item.optional ? 'left-5' : 'left-0.5'}`} />
+                  </button>
+                </div>
+                <div className="w-[32px] flex-shrink-0 flex justify-end">
+                  <button onClick={() => removeItem(item.id)} className="text-slate-600 hover:text-red-400 transition-colors">
+                    <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>
+              </div>
+            ))}
+
+            {/* 합계 */}
+            {form.items.length > 0 && (
+              <div className="flex justify-end pt-4">
+                <div className="bg-slate-900 border border-slate-700 rounded-xl p-5 w-72 space-y-2">
+                  <div className="flex justify-between text-sm text-slate-400">
+                    <span>필수 합계</span>
+                    <span className="font-mono">{form.items.filter(i => !i.optional).reduce((s, i) => s + i.unitPrice * i.quantity, 0).toLocaleString()}원</span>
+                  </div>
+                  <div className="flex justify-between text-sm text-violet-400">
+                    <span>선택 합계</span>
+                    <span className="font-mono">{form.items.filter(i => i.optional).reduce((s, i) => s + i.unitPrice * i.quantity, 0).toLocaleString()}원</span>
+                  </div>
+                  <div className="flex justify-between text-white font-bold pt-2 border-t border-slate-700">
+                    <span>전체 합계</span>
+                    <span className="font-mono">{totalPrice.toLocaleString()}원</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ── 향후관리 ── */}
+        {tab === '향후관리' && (
+          <div className="max-w-3xl space-y-4">
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-slate-400 text-sm">납품 후 유지보수 플랜을 구성합니다 (고객이 하나를 선택)</p>
+              <button onClick={addPlan} className={addBtn}>+ 플랜 추가</button>
+            </div>
+            {form.maintenance.length === 0 && <EmptyState icon="🛡️" msg="유지보수 플랜을 추가해보세요" />}
+            {form.maintenance.map((plan) => (
+              <div key={plan.id} className={`rounded-xl border p-5 space-y-4 ${plan.recommended ? 'border-blue-500/50 bg-blue-900/10' : 'border-slate-800 bg-slate-900'}`}>
+                <div className="flex items-center gap-3">
+                  <div className="grid grid-cols-3 gap-3 flex-1">
+                    <Field label="플랜명">
+                      <input className={inpSm} value={plan.name} onChange={(e) => updatePlan(plan.id, 'name', e.target.value)} placeholder="기본 유지보수" />
+                    </Field>
+                    <Field label="기간">
+                      <input className={inpSm} value={plan.period} onChange={(e) => updatePlan(plan.id, 'period', e.target.value)} placeholder="3개월" />
+                    </Field>
+                    <Field label="월 비용 (원)">
+                      <input className={`${inpSm} text-right`} type="number" min={0} step={10000} value={plan.monthlyFee} onChange={(e) => updatePlan(plan.id, 'monthlyFee', Number(e.target.value))} />
+                    </Field>
+                  </div>
+                  <div className="flex flex-col items-center gap-1 pb-1">
+                    <span className="text-slate-500 text-xs">추천</span>
+                    <button
+                      onClick={() => updatePlan(plan.id, 'recommended', !plan.recommended)}
+                      className={`w-10 h-5 rounded-full transition-all relative ${plan.recommended ? 'bg-blue-500' : 'bg-slate-600'}`}>
+                      <span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${plan.recommended ? 'left-5' : 'left-0.5'}`} />
+                    </button>
+                  </div>
+                  <button onClick={() => removePlan(plan.id)} className="text-slate-600 hover:text-red-400 transition-colors pb-1">
+                    <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>
+
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider">포함 사항</span>
+                    <button onClick={() => addPlanInclude(plan.id)} className="text-xs text-blue-400 hover:text-blue-300">+ 추가</button>
+                  </div>
+                  <div className="space-y-2">
+                    {plan.includes.map((inc, idx) => (
+                      <div key={idx} className="flex items-center gap-2">
+                        <input className={`${inpSm} flex-1`} value={inc} onChange={(e) => updatePlanInclude(plan.id, idx, e.target.value)} placeholder="포함 사항 입력" />
+                        <button onClick={() => removePlanInclude(plan.id, idx)} className="text-slate-600 hover:text-red-400 transition-colors">
+                          <svg className="w-3.5 h-3.5" 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>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* ── 특이사항 ── */}
+        {tab === '특이사항' && (
+          <div className="max-w-2xl">
+            <Field label="특이사항 및 참고사항">
+              <textarea
+                className={`${inp} min-h-48 resize-y`}
+                value={form.notes}
+                onChange={(e) => setField('notes', e.target.value)}
+                placeholder="계약 조건, 주의사항, 면책 조항 등을 입력하세요&#10;&#10;예: 본 견적서는 발행일로부터 30일간 유효합니다..."
+              />
+            </Field>
+          </div>
+        )}
+
+        {/* ── 진행 단계 ── */}
+        {tab === '진행 단계' && (
+          <div className="max-w-2xl space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-white font-bold">프로젝트 진행 단계 관리</h3>
+                <p className="text-slate-500 text-xs mt-0.5">고객 마이페이지에 실시간으로 표시됩니다</p>
+              </div>
+              <button
+                onClick={initDefaultMilestones}
+                className="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 border border-blue-600/30 transition-all"
+              >
+                기본 7단계 초기화
+              </button>
+            </div>
+
+            {milestones.length === 0 ? (
+              <div className="text-center py-12 bg-slate-900 rounded-xl border border-slate-800">
+                <p className="text-slate-400 text-sm mb-3">진행 단계가 없습니다</p>
+                <p className="text-slate-600 text-xs">위의 &apos;기본 7단계 초기화&apos; 버튼으로 표준 단계를 추가하세요</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {milestones.map((m) => (
+                  <div key={m.id} className="bg-slate-900 border border-slate-800 rounded-xl p-4 space-y-3">
+                    <div className="flex items-center gap-3">
+                      <span className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
+                        m.status === 'completed'   ? 'bg-emerald-600 text-white' :
+                        m.status === 'in_progress' ? 'bg-blue-600 text-white' :
+                        'bg-slate-700 text-slate-400'
+                      }`}>{m.step_number}</span>
+                      <span className="text-white font-semibold text-sm flex-1">{m.title}</span>
+                      <select
+                        value={m.status}
+                        onChange={(e) => updateMilestone(m.id, 'status', e.target.value)}
+                        disabled={mileSaving === m.id}
+                        className="bg-slate-800 border border-slate-700 text-xs text-white rounded-lg px-2.5 py-1.5 focus:outline-none focus:border-blue-500"
+                      >
+                        <option value="pending">대기</option>
+                        <option value="in_progress">진행 중</option>
+                        <option value="completed">완료</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-xs text-slate-500 mb-1">고객에게 보여줄 메모 (선택)</label>
+                      <input
+                        className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-blue-500"
+                        value={m.note}
+                        onChange={(e) => updateMilestone(m.id, 'note', e.target.value)}
+                        placeholder="예: 디자인 시안 2종 검토 중, 내일 공유 예정입니다"
+                      />
+                    </div>
+                    {m.completed_at && (
+                      <p className="text-xs text-emerald-600">완료: {new Date(m.completed_at).toLocaleString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ─── 서브 컴포넌트 ────────────────────────────────────── */
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function EmptyState({ icon, msg }: { icon: string; msg: string }) {
+  return (
+    <div className="text-center py-12 bg-slate-900 rounded-xl border border-slate-800">
+      <div className="text-4xl mb-3">{icon}</div>
+      <p className="text-slate-500 text-sm">{msg}</p>
+    </div>
+  );
+}
+
+/* ─── 스타일 상수 ──────────────────────────────────────── */
+const inp = 'w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition-colors';
+const inpSm = 'w-full bg-slate-800/80 border border-slate-700 rounded-lg px-2.5 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition-colors';
+const addBtn = 'px-4 py-1.5 rounded-lg text-sm font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition-all';

app/admin/quotes/page.tsx

@@ -0,0 +1,297 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+interface Quote {
+  id: string;
+  title: string;
+  client_name: string;
+  client_email: string;
+  status: 'draft' | 'sent' | 'accepted' | 'rejected';
+  valid_until: string | null;
+  public_token: string;
+  items: { unitPrice: number; quantity: number; optional: boolean }[];
+  created_at: string;
+}
+
+const STATUS = {
+  draft:    { label: '초안', color: 'bg-slate-700 text-slate-300' },
+  sent:     { label: '발송됨', color: 'bg-blue-900/50 text-blue-400' },
+  accepted: { label: '수락됨', color: 'bg-green-900/50 text-green-400' },
+  rejected: { label: '거절됨', color: 'bg-red-900/50 text-red-400' },
+};
+
+function calcTotal(items: Quote['items']) {
+  return items.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
+}
+
+export default function AdminQuotesPage() {
+  const router = useRouter();
+  const [quotes, setQuotes] = useState<Quote[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [deleting, setDeleting] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/admin/quotes')
+      .then((r) => r.json())
+      .then((d) => setQuotes(d.quotes ?? []))
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function handleCreate() {
+    setCreating(true);
+    const res = await fetch('/api/admin/quotes', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title: '새 견적서' }),
+    });
+    const d = await res.json();
+    if (d.quote?.id) router.push(`/admin/quotes/${d.quote.id}`);
+    else setCreating(false);
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm('이 견적서를 삭제할까요?')) return;
+    setDeleting(id);
+    await fetch(`/api/admin/quotes/${id}`, { method: 'DELETE' });
+    setQuotes((prev) => prev.filter((q) => q.id !== id));
+    setDeleting(null);
+  }
+
+  function copyLink(token: string, id: string) {
+    const url = `${window.location.origin}/quote/${token}`;
+    navigator.clipboard.writeText(url);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  }
+
+  return (
+    <div className="p-4 md:p-8">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between mb-6 md:mb-8 gap-3">
+        <div>
+          <h1 className="text-xl md:text-2xl font-bold text-white">견적서 관리</h1>
+          <p className="text-slate-400 text-sm mt-1">고객에게 제시할 견적서를 작성하고 관리합니다</p>
+        </div>
+        <button
+          onClick={handleCreate}
+          disabled={creating}
+          className="flex-shrink-0 flex items-center gap-2 px-4 md:px-5 py-2.5 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white font-semibold rounded-xl transition-all disabled:opacity-60 text-sm"
+        >
+          {creating ? (
+            <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+          ) : (
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>
+          )}
+          <span className="hidden sm:inline">새 견적서 작성</span>
+          <span className="sm:hidden">새 견적서</span>
+        </button>
+      </div>
+
+      {/* 목록 */}
+      {loading ? (
+        <div className="text-center py-20 text-slate-500">불러오는 중...</div>
+      ) : quotes.length === 0 ? (
+        <div className="text-center py-20">
+          <div className="text-5xl mb-4">📄</div>
+          <p className="text-slate-400 text-lg font-medium">아직 견적서가 없습니다</p>
+          <p className="text-slate-600 text-sm mt-2">위 버튼을 눌러 첫 번째 견적서를 작성해보세요</p>
+        </div>
+      ) : (
+        <>
+          {/* PC 테이블 뷰 */}
+          <div className="hidden md:block bg-slate-900 rounded-2xl border border-slate-800 overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-slate-800">
+                  <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">견적서명</th>
+                  <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">고객</th>
+                  <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">합계</th>
+                  <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">상태</th>
+                  <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">유효기간</th>
+                  <th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">작성일</th>
+                  <th className="px-6 py-4" />
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-800/60">
+                {quotes.map((q) => {
+                  const st = STATUS[q.status] ?? STATUS.draft;
+                  const total = calcTotal(q.items ?? []);
+                  return (
+                    <tr key={q.id} className="hover:bg-slate-800/30 transition-colors">
+                      <td className="px-6 py-4">
+                        <Link href={`/admin/quotes/${q.id}`} className="text-white font-medium hover:text-blue-400 transition-colors">
+                          {q.title}
+                        </Link>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="text-slate-300 text-sm">{q.client_name || '—'}</div>
+                        <div className="text-slate-500 text-xs">{q.client_email || ''}</div>
+                      </td>
+                      <td className="px-6 py-4 text-slate-300 text-sm font-mono">
+                        {total > 0 ? `${total.toLocaleString()}원` : '—'}
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className={`inline-block text-xs font-semibold px-2.5 py-1 rounded-full ${st.color}`}>
+                          {st.label}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 text-slate-400 text-sm">
+                        {q.valid_until ? q.valid_until.slice(0, 10) : '—'}
+                      </td>
+                      <td className="px-6 py-4 text-slate-500 text-sm">
+                        {new Date(q.created_at).toLocaleDateString('ko-KR')}
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="flex items-center gap-2 justify-end">
+                          <button
+                            onClick={() => copyLink(q.public_token, q.id)}
+                            title="고객용 링크 복사"
+                            className="p-2 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-slate-800 transition-all"
+                          >
+                            {copied === q.id ? (
+                              <svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                              </svg>
+                            ) : (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                              </svg>
+                            )}
+                          </button>
+                          <Link
+                            href={`/admin/quotes/${q.id}`}
+                            className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
+                          >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                            </svg>
+                          </Link>
+                          <button
+                            onClick={() => handleDelete(q.id)}
+                            disabled={deleting === q.id}
+                            className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-all disabled:opacity-40"
+                          >
+                            {deleting === q.id ? (
+                              <span className="w-4 h-4 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin inline-block" />
+                            ) : (
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                              </svg>
+                            )}
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 모바일 카드 뷰 */}
+          <div className="md:hidden space-y-3">
+            {quotes.map((q) => {
+              const st = STATUS[q.status] ?? STATUS.draft;
+              const total = calcTotal(q.items ?? []);
+              return (
+                <div key={q.id} className="bg-slate-900 rounded-xl border border-slate-800 p-4">
+                  {/* 제목 + 상태 */}
+                  <div className="flex items-start justify-between gap-2 mb-3">
+                    <Link href={`/admin/quotes/${q.id}`} className="text-white font-semibold text-sm hover:text-blue-400 transition-colors flex-1">
+                      {q.title}
+                    </Link>
+                    <span className={`flex-shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${st.color}`}>
+                      {st.label}
+                    </span>
+                  </div>
+
+                  {/* 고객 정보 */}
+                  {(q.client_name || q.client_email) && (
+                    <div className="mb-3">
+                      {q.client_name && <p className="text-slate-300 text-xs">{q.client_name}</p>}
+                      {q.client_email && <p className="text-slate-500 text-xs">{q.client_email}</p>}
+                    </div>
+                  )}
+
+                  {/* 상세 정보 */}
+                  <div className="grid grid-cols-3 gap-2 pt-3 border-t border-slate-800 mb-3">
+                    <div>
+                      <p className="text-slate-500 text-xs mb-0.5">합계</p>
+                      <p className="text-slate-200 text-xs font-mono font-medium">
+                        {total > 0 ? `${total.toLocaleString()}원` : '—'}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-slate-500 text-xs mb-0.5">유효기간</p>
+                      <p className="text-slate-400 text-xs">{q.valid_until ? q.valid_until.slice(0, 10) : '—'}</p>
+                    </div>
+                    <div>
+                      <p className="text-slate-500 text-xs mb-0.5">작성일</p>
+                      <p className="text-slate-400 text-xs">{new Date(q.created_at).toLocaleDateString('ko-KR')}</p>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex items-center gap-2 pt-3 border-t border-slate-800">
+                    <button
+                      onClick={() => copyLink(q.public_token, q.id)}
+                      className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-slate-800 transition-all text-xs"
+                    >
+                      {copied === q.id ? (
+                        <>
+                          <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                          </svg>
+                          <span className="text-green-400">복사됨</span>
+                        </>
+                      ) : (
+                        <>
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                          </svg>
+                          링크 복사
+                        </>
+                      )}
+                    </button>
+                    <Link
+                      href={`/admin/quotes/${q.id}`}
+                      className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-all text-xs"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                      편집
+                    </Link>
+                    <button
+                      onClick={() => handleDelete(q.id)}
+                      disabled={deleting === q.id}
+                      className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-all disabled:opacity-40 text-xs"
+                    >
+                      {deleting === q.id ? (
+                        <span className="w-3.5 h-3.5 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin inline-block" />
+                      ) : (
+                        <>
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                          삭제
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

app/admin/survey/page.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface SurveyRow {
+  id: string;
+  created_at: string;
+  age_range: string | null;
+  status: string | null;
+  awareness_freq: string | null;
+  tools_used: string[] | null;
+  tools_other: string | null;
+  cost_range: string | null;
+  best_tool: string | null;
+  best_satisfy: number | null;
+  free_opinion: string | null;
+  email: string | null;
+  user_agent: string | null;
+  referrer: string | null;
+  utm_source: string | null;
+  completion_seconds: number | null;
+}
+
+interface Stats {
+  age_range: Record<string, number>;
+  status: Record<string, number>;
+  awareness_freq: Record<string, number>;
+  cost_range: Record<string, number>;
+  best_tool: Record<string, number>;
+  satisfy_avg: string;
+  email_rate: string;
+  completion_seconds_median: number;
+}
+
+type Range = 'all' | 'today' | 'week';
+
+export default function AdminSurveyPage() {
+  const [range, setRange] = useState<Range>('all');
+  const [total, setTotal] = useState(0);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [rows, setRows] = useState<SurveyRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<SurveyRow | null>(null);
+
+  useEffect(() => {
+    async function load(r: Range) {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/admin/survey?range=${r}`);
+        const data = await res.json();
+        setTotal(data.total ?? 0);
+        setStats(data.stats ?? null);
+        setRows(data.responses ?? []);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load(range);
+  }, [range]);
+
+  function downloadCsv() {
+    window.location.href = `/api/admin/survey?range=${range}&format=csv`;
+  }
+
+  function fmtCount(counts: Record<string, number> | undefined): string {
+    if (!counts) return '';
+    return Object.entries(counts)
+      .sort((a, b) => b[1] - a[1])
+      .map(([k, v]) => `${k} ${v}`)
+      .join(' · ');
+  }
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="mb-6 flex items-end justify-between gap-3 flex-wrap">
+        <div>
+          <h1 className="text-white text-2xl font-bold">설문 응답</h1>
+          <p className="text-slate-400 text-sm mt-0.5">
+            CONTOUR PMF 설문 — 총 {total}건
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {(['all', 'today', 'week'] as Range[]).map((r) => (
+            <button
+              key={r}
+              onClick={() => setRange(r)}
+              className={`px-3 py-1.5 rounded-lg text-sm font-bold transition ${
+                range === r
+                  ? 'bg-violet-600 text-white'
+                  : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
+              }`}
+            >
+              {r === 'all' ? '전체' : r === 'today' ? '오늘' : '이번 주'}
+            </button>
+          ))}
+          <button
+            onClick={downloadCsv}
+            className="px-3 py-1.5 rounded-lg text-sm font-bold bg-emerald-600 hover:bg-emerald-500 text-white transition"
+          >
+            📥 CSV
+          </button>
+        </div>
+      </div>
+
+      {/* 통계 카드 */}
+      {stats && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
+          <div className="bg-slate-900 border border-slate-700 rounded-xl p-4">
+            <p className="text-xs text-slate-400 mb-2">Q2 자각 빈도</p>
+            <p className="text-sm text-white">{fmtCount(stats.awareness_freq) || '데이터 없음'}</p>
+          </div>
+          <div className="bg-slate-900 border border-slate-700 rounded-xl p-4">
+            <p className="text-xs text-slate-400 mb-2">Q4 비용</p>
+            <p className="text-sm text-white">{fmtCount(stats.cost_range) || '데이터 없음'}</p>
+          </div>
+          <div className="bg-slate-900 border border-slate-700 rounded-xl p-4">
+            <p className="text-xs text-slate-400 mb-2">Q5 만족도 평균</p>
+            <p className="text-xl text-violet-400 font-bold">{stats.satisfy_avg} / 5</p>
+          </div>
+          <div className="bg-slate-900 border border-slate-700 rounded-xl p-4">
+            <p className="text-xs text-slate-400 mb-2">Q7 이메일률 / 완료 시간 (중간값)</p>
+            <p className="text-sm text-white">
+              {stats.email_rate}% · {stats.completion_seconds_median}s
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 응답 리스트 */}
+      {loading ? (
+        <p className="text-slate-400">불러오는 중...</p>
+      ) : rows.length === 0 ? (
+        <p className="text-slate-500">응답이 없습니다.</p>
+      ) : (
+        <div className="bg-slate-900 border border-slate-700 rounded-xl overflow-hidden overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="bg-slate-800 text-slate-400 text-xs uppercase tracking-widest">
+              <tr>
+                <th className="text-left px-4 py-3">시각</th>
+                <th className="text-left px-4 py-3">나이/상황</th>
+                <th className="text-left px-4 py-3">Q4 비용</th>
+                <th className="text-left px-4 py-3">Q5 만족</th>
+                <th className="text-left px-4 py-3">Q6 자유의견 (미리보기)</th>
+                <th className="text-left px-4 py-3">이메일</th>
+                <th className="text-left px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r) => (
+                <tr key={r.id} className="border-t border-slate-800 hover:bg-slate-800/50 transition">
+                  <td className="px-4 py-2 text-slate-300">{new Date(r.created_at).toLocaleString('ko-KR')}</td>
+                  <td className="px-4 py-2 text-slate-300">{r.age_range} · {r.status}</td>
+                  <td className="px-4 py-2 text-slate-300">{r.cost_range ?? '-'}</td>
+                  <td className="px-4 py-2 text-slate-300">{r.best_satisfy ?? '-'}</td>
+                  <td className="px-4 py-2 text-slate-400 max-w-xs truncate">
+                    {r.free_opinion ?? <span className="text-slate-600">—</span>}
+                  </td>
+                  <td className="px-4 py-2 text-slate-300">{r.email ?? '-'}</td>
+                  <td className="px-4 py-2">
+                    <button
+                      onClick={() => setSelected(r)}
+                      className="text-violet-400 hover:text-violet-300 text-xs font-bold"
+                    >
+                      상세
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* 상세 modal */}
+      {selected && (
+        <div
+          className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4"
+          onClick={() => setSelected(null)}
+        >
+          <div
+            className="bg-slate-900 border border-slate-700 rounded-2xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h2 className="text-white font-bold">응답 상세</h2>
+                <p className="text-xs text-slate-400 mt-1">{new Date(selected.created_at).toLocaleString('ko-KR')}</p>
+              </div>
+              <button onClick={() => setSelected(null)} className="text-slate-400 hover:text-white text-2xl leading-none">×</button>
+            </div>
+            <dl className="space-y-3 text-sm">
+              {[
+                ['Q1 나이대', selected.age_range],
+                ['Q1 상황', selected.status],
+                ['Q2 자각 빈도', selected.awareness_freq],
+                ['Q3 도구', selected.tools_used?.join(', ')],
+                ['Q3 기타', selected.tools_other],
+                ['Q4 비용', selected.cost_range],
+                ['Q5 최고 도구', selected.best_tool],
+                ['Q5 만족도', selected.best_satisfy != null ? `${selected.best_satisfy} / 5` : null],
+                ['Q6 자유 의견', selected.free_opinion],
+                ['Q7 이메일', selected.email],
+                ['user_agent', selected.user_agent],
+                ['referrer', selected.referrer],
+                ['utm_source', selected.utm_source],
+                ['완료 시간', selected.completion_seconds != null ? `${selected.completion_seconds}초` : null],
+              ].map(([k, v]) => (
+                <div key={k as string} className="flex gap-3 border-b border-slate-800 pb-2">
+                  <dt className="w-32 text-slate-400 flex-shrink-0">{k}</dt>
+                  <dd className="text-white whitespace-pre-wrap break-words flex-1">{(v as string) || <span className="text-slate-600">—</span>}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/api/admin/analytics/route.ts

@@ -0,0 +1,137 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { BetaAnalyticsDataClient } from '@google-analytics/data';
+
+export const runtime = 'nodejs';
+
+function getClient() {
+  const raw = process.env.GOOGLE_SERVICE_ACCOUNT_JSON;
+  if (!raw) throw new Error('GOOGLE_SERVICE_ACCOUNT_JSON 환경변수가 설정되지 않았습니다.');
+  const credentials = JSON.parse(raw);
+  return new BetaAnalyticsDataClient({ credentials });
+}
+
+function getPropertyId() {
+  const id = process.env.GA4_PROPERTY_ID;
+  if (!id) throw new Error('GA4_PROPERTY_ID 환경변수가 설정되지 않았습니다.');
+  return id;
+}
+
+export async function GET(request: Request) {
+  // 관리자 인증
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  if (!token || !verifyAdminTokenNode(token)) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const range = searchParams.get('range') ?? '30'; // 7, 30, 90
+  const days = parseInt(range);
+
+  try {
+    const client = getClient();
+    const propertyId = getPropertyId();
+
+    const startDate = `${days}daysAgo`;
+
+    // 병렬로 3개 리포트 요청
+    const [trendRes, pagesRes, sourcesRes] = await Promise.all([
+      // 1. 일별 방문자 추이
+      client.runReport({
+        property: `properties/${propertyId}`,
+        dateRanges: [{ startDate, endDate: 'today' }],
+        dimensions: [{ name: 'date' }],
+        metrics: [{ name: 'activeUsers' }, { name: 'sessions' }, { name: 'screenPageViews' }],
+        orderBys: [{ dimension: { dimensionName: 'date' }, desc: false }],
+      }),
+
+      // 2. 상위 페이지
+      client.runReport({
+        property: `properties/${propertyId}`,
+        dateRanges: [{ startDate, endDate: 'today' }],
+        dimensions: [{ name: 'pagePath' }],
+        metrics: [{ name: 'screenPageViews' }, { name: 'activeUsers' }],
+        orderBys: [{ metric: { metricName: 'screenPageViews' }, desc: true }],
+        limit: 10,
+      }),
+
+      // 3. 유입 경로 + 기기
+      client.runReport({
+        property: `properties/${propertyId}`,
+        dateRanges: [{ startDate, endDate: 'today' }],
+        dimensions: [{ name: 'sessionDefaultChannelGroup' }, { name: 'deviceCategory' }],
+        metrics: [{ name: 'sessions' }, { name: 'activeUsers' }],
+        orderBys: [{ metric: { metricName: 'sessions' }, desc: true }],
+        limit: 20,
+      }),
+    ]);
+
+    // 오늘 / 어제 / 이번 주 / 기간 합계
+    const summaryRes = await client.runReport({
+      property: `properties/${propertyId}`,
+      dateRanges: [
+        { startDate: 'today', endDate: 'today' },
+        { startDate: 'yesterday', endDate: 'yesterday' },
+        { startDate: '7daysAgo', endDate: 'today' },
+        { startDate: startDate, endDate: 'today' },
+      ],
+      metrics: [{ name: 'activeUsers' }, { name: 'sessions' }, { name: 'screenPageViews' }],
+    });
+
+    // --- 파싱 ---
+    const summary = {
+      today: { users: 0, sessions: 0, pageviews: 0 },
+      yesterday: { users: 0, sessions: 0, pageviews: 0 },
+      week: { users: 0, sessions: 0, pageviews: 0 },
+      period: { users: 0, sessions: 0, pageviews: 0 },
+    };
+    const keys = ['today', 'yesterday', 'week', 'period'] as const;
+    summaryRes[0].rows?.forEach((row, i) => {
+      const key = keys[i];
+      if (key) {
+        summary[key] = {
+          users: parseInt(row.metricValues?.[0]?.value ?? '0'),
+          sessions: parseInt(row.metricValues?.[1]?.value ?? '0'),
+          pageviews: parseInt(row.metricValues?.[2]?.value ?? '0'),
+        };
+      }
+    });
+
+    const daily = (trendRes[0].rows ?? []).map((row) => ({
+      date: row.dimensionValues?.[0]?.value ?? '',
+      users: parseInt(row.metricValues?.[0]?.value ?? '0'),
+      sessions: parseInt(row.metricValues?.[1]?.value ?? '0'),
+      pageviews: parseInt(row.metricValues?.[2]?.value ?? '0'),
+    }));
+
+    const topPages = (pagesRes[0].rows ?? []).map((row) => ({
+      page: row.dimensionValues?.[0]?.value ?? '',
+      views: parseInt(row.metricValues?.[0]?.value ?? '0'),
+      users: parseInt(row.metricValues?.[1]?.value ?? '0'),
+    }));
+
+    // 채널별 집계
+    const channelMap: Record<string, number> = {};
+    const deviceMap: Record<string, number> = {};
+    (sourcesRes[0].rows ?? []).forEach((row) => {
+      const channel = row.dimensionValues?.[0]?.value ?? 'Unknown';
+      const device = row.dimensionValues?.[1]?.value ?? 'Unknown';
+      const sessions = parseInt(row.metricValues?.[0]?.value ?? '0');
+      channelMap[channel] = (channelMap[channel] ?? 0) + sessions;
+      deviceMap[device] = (deviceMap[device] ?? 0) + sessions;
+    });
+    const sources = Object.entries(channelMap)
+      .map(([channel, sessions]) => ({ channel, sessions }))
+      .sort((a, b) => b.sessions - a.sessions);
+    const devices = Object.entries(deviceMap)
+      .map(([device, sessions]) => ({ device, sessions }))
+      .sort((a, b) => b.sessions - a.sessions);
+
+    return NextResponse.json({ summary, daily, topPages, sources, devices });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : '알 수 없는 오류';
+    return NextResponse.json({ error: msg }, { status: 500 });
+  }
+}

app/api/admin/contacts/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function GET() {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const supabase = createAdminClient();
+
+  const { data, error } = await supabase
+    .from('contact_requests')
+    .select('*')
+    .order('created_at', { ascending: false })
+    .limit(100);
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json({ contacts: data ?? [] });
+}
+
+export async function PATCH(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { id, status } = await request.json();
+  const supabase = createAdminClient();
+
+  const { error } = await supabase
+    .from('contact_requests')
+    .update({ status })
+    .eq('id', id);
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json({ success: true });
+}

app/api/admin/documents/[filename]/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from 'next/server';
+import { readFile } from 'fs/promises';
+import path from 'path';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+const ALLOWED_FILES = [
+  'ebay-tool-proposal.html',
+  'ebay-tool-questionnaire.html',
+];
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ filename: string }> }
+) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { filename } = await params;
+
+  if (!ALLOWED_FILES.includes(filename)) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  try {
+    const filePath = path.join(process.cwd(), 'CONTENT', filename);
+    const content = await readFile(filePath, 'utf-8');
+
+    return new NextResponse(content, {
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    });
+  } catch {
+    return NextResponse.json({ error: 'File not found' }, { status: 404 });
+  }
+}

app/api/admin/login/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server';
+import { createAdminToken, checkAdminCredentials } from '@/lib/admin-auth';
+
+export const runtime = 'nodejs';
+
+export async function POST(request: Request) {
+  try {
+    const { id, password } = await request.json();
+
+    if (!checkAdminCredentials(id, password)) {
+      return NextResponse.json({ error: '아이디 또는 비밀번호가 올바르지 않습니다.' }, { status: 401 });
+    }
+
+    const token = createAdminToken();
+
+    const response = NextResponse.json({ success: true });
+    response.cookies.set('admin_token', token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      maxAge: 60 * 60 * 24, // 24시간
+      path: '/',
+    });
+
+    return response;
+  } catch {
+    return NextResponse.json({ error: '서버 오류가 발생했습니다.' }, { status: 500 });
+  }
+}

app/api/admin/logout/route.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server';
+
+export async function POST() {
+  const response = NextResponse.json({ success: true });
+  response.cookies.set('admin_token', '', {
+    httpOnly: true,
+    maxAge: 0,
+    path: '/',
+  });
+  return response;
+}

app/api/admin/members/route.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+export async function GET() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  if (!token || !verifyAdminTokenNode(token)) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const supabase = createAdminClient();
+
+  const { data: profiles, error } = await supabase
+    .from('profiles')
+    .select('id, email, full_name, created_at')
+    .order('created_at', { ascending: false })
+    .limit(100);
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  // 각 회원의 주문 수 + 결제 금액 집계
+  const enriched = await Promise.all(
+    (profiles ?? []).map(async (p: { id: string; email: string; full_name: string; created_at: string }) => {
+      const [ordersRes, paymentsRes, subsRes] = await Promise.all([
+        supabase.from('orders').select('id', { count: 'exact', head: true }).eq('user_id', p.id).eq('status', 'paid'),
+        supabase.from('payments').select('amount').eq('user_id', p.id).eq('status', 'paid'),
+        supabase.from('subscriptions').select('product_id, status, expires_at').eq('user_id', p.id).eq('status', 'active').order('created_at', { ascending: false }).limit(1),
+      ]);
+      const totalPaid = (paymentsRes.data ?? []).reduce((s: number, x: { amount: number }) => s + x.amount, 0);
+      const activeSub = subsRes.data?.[0] ?? null;
+      return { ...p, orderCount: ordersRes.count ?? 0, totalPaid, activeSub };
+    })
+  );
+
+  return NextResponse.json({ members: enriched });
+}

app/api/admin/milestones/[id]/route.ts

@@ -0,0 +1,56 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const { id } = await params;
+  const body = await request.json();
+
+  const ALLOWED = ['status', 'note', 'title', 'description'] as const;
+  const update: Record<string, unknown> = {};
+  ALLOWED.forEach((k) => { if (k in body) update[k] = body[k]; });
+
+  if (body.status === 'completed') {
+    update.completed_at = new Date().toISOString();
+  } else if ('status' in body) {
+    update.completed_at = null;
+  }
+  update.updated_at = new Date().toISOString();
+
+  const admin = createAdminClient();
+  const { data, error } = await admin
+    .from('project_milestones')
+    .update(update)
+    .eq('id', id)
+    .select()
+    .single();
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ milestone: data });
+}
+
+export async function DELETE(
+  _req: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { id } = await params;
+  const admin = createAdminClient();
+  const { error } = await admin.from('project_milestones').delete().eq('id', id);
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ success: true });
+}

app/api/admin/milestones/route.ts

@@ -0,0 +1,72 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+const DEFAULT_MILESTONES = [
+  { step_number: 1, title: '의뢰 접수',          description: '고객 의뢰 및 요구사항 파악 완료' },
+  { step_number: 2, title: '계약 체결',          description: '계약서 작성 및 계약금 입금' },
+  { step_number: 3, title: '기획/와이어프레임',    description: '사이트맵·화면 구성·기능 정의' },
+  { step_number: 4, title: '디자인 시안',        description: 'UI/UX 시안 제작 및 고객 확인' },
+  { step_number: 5, title: '개발 진행',          description: '프론트·백엔드 구현' },
+  { step_number: 6, title: '검수/테스트',        description: '기능 검증 및 수정사항 반영' },
+  { step_number: 7, title: '납품 완료',          description: '소스코드 이관 및 도메인 배포' },
+];
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function GET(request: Request) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const { searchParams } = new URL(request.url);
+  const quoteId = searchParams.get('quoteId');
+  if (!quoteId) return NextResponse.json({ error: 'quoteId 필요' }, { status: 400 });
+
+  const admin = createAdminClient();
+  const { data, error } = await admin
+    .from('project_milestones')
+    .select('*')
+    .eq('quote_id', quoteId)
+    .order('step_number', { ascending: true });
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ milestones: data ?? [] });
+}
+
+export async function POST(request: Request) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const body = await request.json();
+  const admin = createAdminClient();
+
+  // 기본 7단계 초기화
+  if (body.useDefaults && body.quoteId) {
+    await admin.from('project_milestones').delete().eq('quote_id', body.quoteId);
+    const toInsert = DEFAULT_MILESTONES.map((m) => ({ ...m, quote_id: body.quoteId }));
+    const { data, error } = await admin.from('project_milestones').insert(toInsert).select();
+    if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+    return NextResponse.json({ milestones: data }, { status: 201 });
+  }
+
+  // 단일 추가
+  const { data, error } = await admin
+    .from('project_milestones')
+    .insert({
+      quote_id:    body.quote_id,
+      step_number: body.step_number ?? 1,
+      title:       body.title ?? '새 단계',
+      description: body.description ?? '',
+      status:      'pending',
+    })
+    .select()
+    .single();
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ milestone: data }, { status: 201 });
+}

app/api/admin/packs/route.ts

@@ -0,0 +1,72 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { deletePackFileViaBackend } from '@/lib/web-backend';
+import type { PackTier } from '@/lib/pack-assets';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+const VALID_TIERS = new Set<PackTier>(['starter', 'pro', 'master']);
+
+export async function GET() {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const supabase = createAdminClient();
+  const { data, error } = await supabase
+    .from('pack_files')
+    .select('*')
+    .is('deleted_at', null)
+    .order('min_tier')
+    .order('sort_order');
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ files: data ?? [] });
+}
+
+export async function PATCH(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const { id, label, sort_order, min_tier } = await request.json();
+  if (!id) return NextResponse.json({ error: 'id 필요' }, { status: 400 });
+
+  const updates: Record<string, unknown> = {};
+  if (typeof label === 'string') updates.label = label;
+  if (typeof sort_order === 'number') updates.sort_order = sort_order;
+  if (typeof min_tier === 'string' && VALID_TIERS.has(min_tier as PackTier)) {
+    updates.min_tier = min_tier;
+  }
+  if (Object.keys(updates).length === 0) {
+    return NextResponse.json({ error: '변경할 필드 없음' }, { status: 400 });
+  }
+
+  const supabase = createAdminClient();
+  const { error } = await supabase.from('pack_files').update(updates).eq('id', id);
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ success: true });
+}
+
+export async function DELETE(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const url = new URL(request.url);
+  const id = url.searchParams.get('id');
+  if (!id) return NextResponse.json({ error: 'id 필요' }, { status: 400 });
+
+  // web-backend가 soft delete 담당 (DSM 정리도 backend가 향후 추가 예정)
+  try {
+    await deletePackFileViaBackend(id);
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : 'unknown';
+    return NextResponse.json({ error: 'backend delete 실패', detail: msg }, { status: 502 });
+  }
+  return NextResponse.json({ success: true });
+}

app/api/admin/packs/upload-url/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { mintUploadToken } from '@/lib/web-backend';
+import type { PackTier } from '@/lib/pack-assets';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+const VALID_TIERS = new Set<PackTier>(['starter', 'pro', 'master']);
+const MAX_BYTES = 5 * 1024 * 1024 * 1024;
+const ALLOWED_EXT = new Set(['pdf', 'zip', 'mp4', 'mov', 'mkv', 'wav', 'm4a', 'mp3', 'png', 'jpg', 'jpeg', 'webp', 'prj']);
+
+export async function POST(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { tier, label, filename, sizeBytes } = await request.json();
+
+  if (!VALID_TIERS.has(tier)) {
+    return NextResponse.json({ error: 'tier 유효하지 않음' }, { status: 400 });
+  }
+  if (!label || typeof label !== 'string' || label.length > 200) {
+    return NextResponse.json({ error: 'label 필요 (1-200자)' }, { status: 400 });
+  }
+  if (!filename || typeof filename !== 'string') {
+    return NextResponse.json({ error: 'filename 필요' }, { status: 400 });
+  }
+  const ext = filename.includes('.') ? filename.split('.').pop()!.toLowerCase() : '';
+  if (!ALLOWED_EXT.has(ext)) {
+    return NextResponse.json({ error: `허용되지 않은 확장자: ${ext}` }, { status: 400 });
+  }
+  if (typeof sizeBytes !== 'number' || sizeBytes <= 0 || sizeBytes > MAX_BYTES) {
+    return NextResponse.json({ error: '파일 크기 0-5GB' }, { status: 400 });
+  }
+
+  const { token, uploadUrl, expiresAt } = mintUploadToken({
+    tier,
+    label,
+    filename,
+    size_bytes: sizeBytes,
+  });
+
+  return NextResponse.json({ token, uploadUrl, expiresAt });
+}

app/api/admin/portfolio-token/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { createPortfolioToken, verifyAdminTokenNode } from '@/lib/admin-auth';
+
+export const runtime = 'nodejs';
+
+async function requireAdmin() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return !!token && verifyAdminTokenNode(token);
+}
+
+export async function POST(request: Request) {
+  if (!(await requireAdmin())) {
+    return NextResponse.json({ error: '인증이 필요합니다.' }, { status: 401 });
+  }
+
+  try {
+    const { memo, ttlDays } = await request.json();
+    const safeMemo = typeof memo === 'string' ? memo : '';
+    const safeTtl = Math.max(1, Math.min(365, Number(ttlDays) || 30));
+    const token = createPortfolioToken(safeMemo, safeTtl);
+    const expiresAt = new Date(Date.now() + safeTtl * 86400000).toISOString();
+    return NextResponse.json({ token, expiresAt, memo: safeMemo });
+  } catch {
+    return NextResponse.json({ error: '토큰 생성 실패' }, { status: 500 });
+  }
+}

app/api/admin/questionnaire/[id]/route.ts

@@ -0,0 +1,69 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+// 질문지 응답 상세 조회
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { id } = await params;
+  const admin = createAdminClient();
+  const { data, error } = await admin
+    .from('questionnaire_responses')
+    .select('*')
+    .eq('id', id)
+    .single();
+
+  if (error) {
+    console.error('[Admin Questionnaire] DB error:', error);
+    return NextResponse.json({ error: '조회 실패' }, { status: 500 });
+  }
+
+  return NextResponse.json({ data });
+}
+
+// 상태/메모 업데이트
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { id } = await params;
+  const body = await request.json();
+  const { status, admin_notes } = body;
+
+  const updates: Record<string, unknown> = {};
+  if (status) updates.status = status;
+  if (admin_notes !== undefined) updates.admin_notes = admin_notes;
+  if (status === 'reviewed') updates.reviewed_at = new Date().toISOString();
+
+  const admin = createAdminClient();
+  const { error } = await admin
+    .from('questionnaire_responses')
+    .update(updates)
+    .eq('id', id);
+
+  if (error) {
+    console.error('[Admin Questionnaire] Update error:', error);
+    return NextResponse.json({ error: '업데이트 실패' }, { status: 500 });
+  }
+
+  return NextResponse.json({ success: true });
+}

app/api/admin/questionnaire/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+// 질문지 응답 목록 조회
+export async function GET() {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const admin = createAdminClient();
+  const { data, error } = await admin
+    .from('questionnaire_responses')
+    .select('*')
+    .order('created_at', { ascending: false });
+
+  if (error) {
+    console.error('[Admin Questionnaire] DB error:', error);
+    return NextResponse.json({ error: '데이터 조회 실패' }, { status: 500 });
+  }
+
+  return NextResponse.json({ data });
+}

app/api/admin/quotes/[id]/route.ts

@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { id } = await params;
+  const supabase = createAdminClient();
+  const { data, error } = await supabase.from('quotes').select('*').eq('id', id).single();
+  if (error) return NextResponse.json({ error: '견적서를 찾을 수 없습니다' }, { status: 404 });
+  return NextResponse.json({ quote: data });
+}
+
+export async function PUT(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { id } = await params;
+
+  let body: Record<string, unknown>;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: '잘못된 요청 형식' }, { status: 400 });
+  }
+
+  // ── 허용 필드 화이트리스트 (시스템 필드 변조 방지) ───────────
+  const ALLOWED_FIELDS = [
+    'title', 'client_name', 'client_email', 'client_phone',
+    'wbs', 'items', 'maintenance', 'notes', 'status',
+    'valid_until', 'discount',
+  ] as const;
+
+  const sanitizedBody = Object.fromEntries(
+    ALLOWED_FIELDS
+      .filter((key) => key in body)
+      .map((key) => [key, body[key]])
+  );
+
+  if (Object.keys(sanitizedBody).length === 0) {
+    return NextResponse.json({ error: '수정할 필드가 없습니다' }, { status: 400 });
+  }
+
+  const supabase = createAdminClient();
+  const { data, error } = await supabase
+    .from('quotes')
+    .update({ ...sanitizedBody, updated_at: new Date().toISOString() })
+    .eq('id', id)
+    .select()
+    .single();
+
+  if (error) {
+    console.error('[Admin Quotes] PUT error:', error.message);
+    return NextResponse.json({ error: '견적서 업데이트 실패' }, { status: 500 });
+  }
+  return NextResponse.json({ quote: data });
+}
+
+export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { id } = await params;
+  const supabase = createAdminClient();
+  const { error } = await supabase.from('quotes').delete().eq('id', id);
+  if (error) {
+    console.error('[Admin Quotes] DELETE error:', error.message);
+    return NextResponse.json({ error: '견적서 삭제 실패' }, { status: 500 });
+  }
+  return NextResponse.json({ success: true });
+}

app/api/admin/quotes/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function GET() {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const supabase = createAdminClient();
+  const { data, error } = await supabase
+    .from('quotes')
+    .select('id, title, client_name, client_email, status, valid_until, public_token, items, created_at')
+    .order('created_at', { ascending: false });
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ quotes: data ?? [] });
+}
+
+export async function POST(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const body = await request.json();
+  const supabase = createAdminClient();
+
+  const { data, error } = await supabase
+    .from('quotes')
+    .insert({
+      title: body.title || '새 견적서',
+      client_name: body.client_name || '',
+      client_email: body.client_email || '',
+      valid_until: body.valid_until || null,
+      wbs: body.wbs || [],
+      items: body.items || [],
+      maintenance: body.maintenance || [],
+      notes: body.notes || '',
+      status: 'draft',
+    })
+    .select()
+    .single();
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ quote: data }, { status: 201 });
+}

app/api/admin/services/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+export async function GET() {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const supabase = createAdminClient();
+
+  const { data, error } = await supabase
+    .from('service_settings')
+    .select('*')
+    .order('order_index');
+
+  if (error) {
+    // 테이블이 없으면 기본값 반환
+    return NextResponse.json({ services: DEFAULT_SERVICES });
+  }
+
+  return NextResponse.json({ services: data?.length ? data : DEFAULT_SERVICES });
+}
+
+export async function PATCH(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const { id, is_active } = await request.json();
+  const supabase = createAdminClient();
+
+  const { error } = await supabase
+    .from('service_settings')
+    .upsert({ id, is_active, updated_at: new Date().toISOString() });
+
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json({ success: true });
+}
+
+const DEFAULT_SERVICES = [
+  { id: 'saju', name: 'AI 사주 분석', description: '사주 입력 및 AI 해석 서비스', is_active: true, order_index: 1 },
+  { id: 'lotto', name: '로또 번호 추천', description: '빅데이터 기반 로또 번호 분석', is_active: true, order_index: 2 },
+  { id: 'stock', name: '주식 자동매매', description: '텔레그램 연동 자동매매 프로그램', is_active: true, order_index: 3 },
+  { id: 'automation', name: '업무 자동화 RPA', description: '반복 업무 자동화 개발', is_active: true, order_index: 4 },
+  { id: 'prompt', name: '프롬프트 엔지니어링', description: 'AI 프롬프트 설계 서비스', is_active: true, order_index: 5 },
+  { id: 'freelance', name: '외주 개발', description: '맞춤형 소프트웨어 개발', is_active: true, order_index: 6 },
+];

app/api/admin/stats/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+import { cookies } from 'next/headers';
+
+export const runtime = 'nodejs';
+
+export async function GET() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  if (!token || !verifyAdminTokenNode(token)) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const supabase = createAdminClient();
+
+  // 병렬 쿼리
+  const [profilesRes, ordersRes, paymentsRes, contactsRes, monthlyRes, subsRes] = await Promise.all([
+    supabase.from('profiles').select('id', { count: 'exact', head: true }),
+    supabase.from('orders').select('id', { count: 'exact', head: true }).eq('status', 'paid'),
+    supabase.from('payments').select('amount').eq('status', 'paid'),
+    supabase.from('contact_requests').select('id', { count: 'exact', head: true }).eq('status', 'pending'),
+    supabase.from('payments').select('amount, created_at').eq('status', 'paid').order('created_at', { ascending: true }),
+    supabase.from('subscriptions').select('id', { count: 'exact', head: true }).eq('status', 'active'),
+  ]);
+
+  const totalMembers = profilesRes.count ?? 0;
+  const totalOrders = ordersRes.count ?? 0;
+  const totalRevenue = (paymentsRes.data ?? []).reduce((sum: number, p: { amount: number }) => sum + p.amount, 0);
+  const pendingContacts = contactsRes.count ?? 0;
+  const activeSubscribers = subsRes.count ?? 0;
+
+  // 최근 6개월 월별 수익 집계
+  const monthly: Record<string, number> = {};
+  const now = new Date();
+  for (let i = 5; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+    monthly[key] = 0;
+  }
+
+  for (const p of (monthlyRes.data ?? []) as Array<{ amount: number; created_at: string }>) {
+    const d = new Date(p.created_at);
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+    if (key in monthly) {
+      monthly[key] += p.amount;
+    }
+  }
+
+  const monthlyChart = Object.entries(monthly).map(([month, revenue]) => ({ month, revenue }));
+
+  return NextResponse.json({ totalMembers, totalOrders, totalRevenue, pendingContacts, activeSubscribers, monthlyChart });
+}

app/api/admin/survey/route.ts

@@ -0,0 +1,164 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { verifyAdminTokenNode } from '@/lib/admin-auth';
+
+export const runtime = 'nodejs';
+
+async function checkAuth() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return token && verifyAdminTokenNode(token);
+}
+
+interface SurveyRow {
+  id: string;
+  created_at: string;
+  age_range: string | null;
+  status: string | null;
+  awareness_freq: string | null;
+  tools_used: string[] | null;
+  tools_other: string | null;
+  cost_range: string | null;
+  best_tool: string | null;
+  best_satisfy: number | null;
+  free_opinion: string | null;
+  email: string | null;
+  user_agent: string | null;
+  referrer: string | null;
+  utm_source: string | null;
+  utm_medium: string | null;
+  utm_campaign: string | null;
+  completion_seconds: number | null;
+}
+
+export async function GET(request: Request) {
+  if (!(await checkAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const url = new URL(request.url);
+  const range = url.searchParams.get('range') ?? 'all';
+  const format = url.searchParams.get('format') ?? 'json';
+
+  const supabase = createAdminClient();
+  let query = supabase
+    .from('survey_responses')
+    .select('*')
+    .order('created_at', { ascending: false });
+
+  if (range === 'today') {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    query = query.gte('created_at', today.toISOString());
+  } else if (range === 'week') {
+    const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
+    query = query.gte('created_at', weekAgo.toISOString());
+  }
+
+  const { data, error } = await query;
+  if (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+
+  const rows: SurveyRow[] = (data ?? []) as SurveyRow[];
+
+  if (format === 'csv') {
+    const csv = toCsv(rows);
+    return new Response(csv, {
+      headers: {
+        'Content-Type': 'text/csv; charset=utf-8',
+        'Content-Disposition': `attachment; filename="contour-survey-${range}-${new Date().toISOString().slice(0, 10)}.csv"`,
+      },
+    });
+  }
+
+  return NextResponse.json({
+    total: rows.length,
+    stats: computeStats(rows),
+    responses: rows,
+  });
+}
+
+function toCsv(rows: SurveyRow[]): string {
+  if (rows.length === 0) return 'id,created_at\n';
+  const headers: (keyof SurveyRow)[] = [
+    'id',
+    'created_at',
+    'age_range',
+    'status',
+    'awareness_freq',
+    'tools_used',
+    'tools_other',
+    'cost_range',
+    'best_tool',
+    'best_satisfy',
+    'free_opinion',
+    'email',
+    'user_agent',
+    'referrer',
+    'utm_source',
+    'utm_medium',
+    'utm_campaign',
+    'completion_seconds',
+  ];
+  // BOM for Excel UTF-8 호환
+  const bom = '';
+  const lines = [headers.join(',')];
+  for (const r of rows) {
+    lines.push(
+      headers
+        .map((h) => {
+          const v = r[h];
+          if (v == null) return '';
+          if (Array.isArray(v)) return `"${v.join('|').replace(/"/g, '""')}"`;
+          return `"${String(v).replace(/"/g, '""').replace(/\r?\n/g, ' ')}"`;
+        })
+        .join(',')
+    );
+  }
+  return bom + lines.join('\n');
+}
+
+function counts(rows: SurveyRow[], key: keyof SurveyRow): Record<string, number> {
+  return rows.reduce((acc, r) => {
+    const v = r[key];
+    if (v != null && typeof v === 'string') {
+      acc[v] = (acc[v] ?? 0) + 1;
+    }
+    return acc;
+  }, {} as Record<string, number>);
+}
+
+function computeStats(rows: SurveyRow[]) {
+  const satisfyValues = rows
+    .map((r) => r.best_satisfy)
+    .filter((n): n is number => typeof n === 'number');
+  const satisfyAvg =
+    satisfyValues.length > 0
+      ? (satisfyValues.reduce((s, n) => s + n, 0) / satisfyValues.length).toFixed(2)
+      : '0';
+
+  const completionValues = rows
+    .map((r) => r.completion_seconds)
+    .filter((n): n is number => typeof n === 'number');
+  const completionMedian = median(completionValues);
+
+  return {
+    age_range: counts(rows, 'age_range'),
+    status: counts(rows, 'status'),
+    awareness_freq: counts(rows, 'awareness_freq'),
+    cost_range: counts(rows, 'cost_range'),
+    best_tool: counts(rows, 'best_tool'),
+    satisfy_avg: satisfyAvg,
+    email_rate: rows.length === 0 ? '0' : ((rows.filter((r) => r.email).length / rows.length) * 100).toFixed(1),
+    completion_seconds_median: completionMedian,
+  };
+}
+
+function median(arr: number[]): number {
+  if (arr.length === 0) return 0;
+  const sorted = [...arr].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[mid] : Math.round((sorted[mid - 1] + sorted[mid]) / 2);
+}

app/api/contact/route.ts

@@ -1,52 +1,135 @@
 import { NextResponse } from 'next/server';
 import { Resend } from 'resend';
+import {
+  escapeHtml,
+  isValidEmail,
+  sanitizeStr,
+  checkRateLimit,
+  getClientIp,
+  INPUT_LIMITS,
+} from '@/lib/security';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { createClient } from '@/lib/supabase/server';
 
 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;
+    // ── Rate Limit: IP당 1분 5회 ──────────────────────────────
+    const ip = getClientIp(request);
+    const rl = checkRateLimit(`contact:${ip}`, 60_000, 5);
+    if (!rl.allowed) {
+      return NextResponse.json(
+        { error: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.' },
+        {
+          status: 429,
+          headers: { 'Retry-After': String(Math.ceil(rl.retryAfterMs / 1000)) },
+        }
+      );
+    }
 
-    // 입력 검증
+    const body = await request.json();
+
+    // ── 입력 정제 + 길이 제한 ─────────────────────────────────
+    const name    = sanitizeStr(body.name,    INPUT_LIMITS.NAME);
+    const phone   = sanitizeStr(body.phone,   INPUT_LIMITS.PHONE);
+    const email   = sanitizeStr(body.email,   INPUT_LIMITS.EMAIL);
+    const service = sanitizeStr(body.service, INPUT_LIMITS.SERVICE);
+    const message = sanitizeStr(body.message, INPUT_LIMITS.MESSAGE);
+
+    // ── 필수값 검증 ───────────────────────────────────────────
     if (!name || !email || !message) {
       return NextResponse.json(
         { error: '필수 항목을 모두 입력해주세요.' },
         { status: 400 }
       );
     }
+    if (!isValidEmail(email)) {
+      return NextResponse.json(
+        { error: '올바른 이메일 형식이 아닙니다.' },
+        { status: 400 }
+      );
+    }
 
-    // 이메일 발송
-    const data = await resend.emails.send({
-      from: 'onboarding@resend.dev', // Resend 기본 도메인
-      to: ['bgg8988@gmail.com'], // 받는 이메일
-      replyTo: email, // 문의자 이메일로 답장 가능
-      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>
-      `,
-    });
+    // ── HTML 이스케이프 (XSS 방지) ────────────────────────────
+    const safeSubject = escapeHtml(service || '문의');
+    const safeName    = escapeHtml(name);
+    const safePhone   = escapeHtml(phone || '미입력');
+    const safeEmail   = escapeHtml(email);
+    const safeService = escapeHtml(service || '미선택');
+    // message는 pre-wrap으로 렌더링되므로 반드시 이스케이프
+    const safeMessage = escapeHtml(message);
+
+    // ── 로그인 사용자 확인 (optional) ─────────────────────────
+    let userId: string | null = null;
+    try {
+      const supabase = await createClient();
+      const { data } = await supabase.auth.getUser();
+      userId = data?.user?.id ?? null;
+    } catch {
+      // 비로그인 상태 — 무시
+    }
+
+    // ── 이메일 전송 ──────────────────────────────────────────
+    let emailSent = true;
+    try {
+      await resend.emails.send({
+        from: '쟁승메이드 <noreply@jaengseung-made.com>',
+        to: ['bgg8988@gmail.com'],
+        replyTo: email,
+        subject: `[쟁승메이드] 새로운 문의: ${safeSubject}`,
+        html: `
+          <h2>새로운 프로젝트 문의가 도착했습니다</h2>
+          <hr />
+          <p><strong>이름:</strong> ${safeName}</p>
+          <p><strong>연락처:</strong> ${safePhone}</p>
+          <p><strong>이메일:</strong> ${safeEmail}</p>
+          <p><strong>서비스:</strong> ${safeService}</p>
+          <hr />
+          <h3>문의 내용:</h3>
+          <p style="white-space: pre-wrap;">${safeMessage}</p>
+          <hr />
+          <p style="color: #666; font-size: 12px;">
+            이 메일은 jaengseung-made.com의 문의 폼에서 발송되었습니다.
+          </p>
+        `,
+      });
+    } catch (emailError) {
+      console.error('[Contact] Email send error:', emailError);
+      emailSent = false;
+    }
+
+    // ── DB 저장 (이메일 성공/실패 무관) ──────────────────────
+    try {
+      const admin = createAdminClient();
+      await admin.from('contact_requests').insert({
+        name,
+        email,
+        phone: phone || null,
+        service: service || null,
+        message,
+        user_id: userId,
+      });
+    } catch (dbError) {
+      console.error('[Contact] DB insert error:', dbError);
+    }
+
+    if (!emailSent) {
+      return NextResponse.json(
+        { error: '메일 전송에 실패했습니다. 다시 시도해주세요.' },
+        { status: 500 }
+      );
+    }
 
     return NextResponse.json(
       { success: true, message: '문의가 성공적으로 전송되었습니다!' },
       { status: 200 }
     );
   } catch (error) {
-    console.error('Email send error:', error);
+    // 클라이언트에 내부 오류 상세 노출 금지
+    console.error('[Contact] Unexpected error:', error);
     return NextResponse.json(
-      { error: '메일 전송에 실패했습니다. 다시 시도해주세요.' },
+      { error: '문의 처리 중 오류가 발생했습니다. 다시 시도해주세요.' },
       { status: 500 }
     );
   }

app/api/cron/subscription-expiry/route.ts

@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { sendMessage } from '@/lib/telegram';
+
+/**
+ * GET /api/cron/subscription-expiry
+ * Vercel Cron: 매일 01:00 KST (UTC 16:00) 실행
+ * - 만료된 구독 → status='expired'
+ * - 3일 후 만료 예정 구독 → 텔레그램 알림 발송
+ */
+export async function GET(req: NextRequest) {
+  // Vercel Cron 인증
+  const authHeader = req.headers.get('authorization');
+  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
+    return NextResponse.json({ error: 'UNAUTHORIZED' }, { status: 401 });
+  }
+
+  const supabase = createAdminClient();
+  const now = new Date().toISOString();
+  const in3days = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString();
+
+  // 1. 만료된 구독 처리
+  const { data: expired, error: expireError } = await supabase
+    .from('subscriptions')
+    .update({ status: 'expired' })
+    .eq('status', 'active')
+    .lt('expires_at', now)
+    .select('id, user_id, product_id');
+
+  if (expireError) {
+    console.error('subscription expiry error:', expireError);
+  }
+
+  // 2. 3일 후 만료 예정 → 텔레그램 알림
+  const { data: expiringSoon } = await supabase
+    .from('subscriptions')
+    .select('id, user_id, product_id, expires_at, profiles!inner(telegram_chat_id)')
+    .eq('status', 'active')
+    .eq('auto_renew', false)
+    .lt('expires_at', in3days)
+    .gt('expires_at', now);
+
+  const PLAN_NAMES: Record<string, string> = {
+    lotto_gold:     '🥇 골드',
+    lotto_platinum: '💎 플래티넘',
+    lotto_diamond:  '👑 다이아',
+  };
+
+  let notified = 0;
+  if (expiringSoon) {
+    for (const sub of expiringSoon) {
+      const profile = sub.profiles as unknown as { telegram_chat_id: string | null };
+      const chatId = profile?.telegram_chat_id;
+      if (!chatId) continue;
+
+      const expiresAt = new Date(sub.expires_at).toLocaleDateString('ko-KR');
+      const planName = PLAN_NAMES[sub.product_id] ?? sub.product_id;
+
+      await sendMessage(
+        chatId,
+        `⏰ *구독 만료 안내*\n\n` +
+        `로또 번호 추천 *${planName}* 플랜이\n` +
+        `*${expiresAt}*에 만료됩니다.\n\n` +
+        `지속적인 번호 추천을 받으시려면\n` +
+        `마이페이지에서 구독을 갱신해 주세요.\n\n` +
+        `👉 https://jaengseung-made.com/mypage`
+      );
+      notified++;
+    }
+  }
+
+  return NextResponse.json({
+    ok: true,
+    expired_count: expired?.length ?? 0,
+    notified_count: notified,
+    processed_at: now,
+  });
+}

app/api/packs/list-mine/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { createServerClient as createSSRClient } from '@supabase/ssr';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { extractPackTier, type PackTier } from '@/lib/pack-assets';
+import { tierIncludes, getPackFilesForTiers } from '@/lib/supabase/pack-files';
+
+export const runtime = 'nodejs';
+
+export async function GET() {
+  const cookieStore = await cookies();
+  const supabase = createSSRClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll: () => cookieStore.getAll(),
+        setAll: () => {},
+      },
+    },
+  );
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return NextResponse.json({ files: [] });
+
+  const admin = createAdminClient();
+  const { data: orders } = await admin
+    .from('contact_requests')
+    .select('service, status')
+    .eq('user_id', user.id)
+    .eq('status', 'completed');
+
+  const tiers = new Set<PackTier>();
+  for (const o of (orders ?? [])) {
+    const t = extractPackTier(o.service);
+    if (t) tierIncludes(t).forEach((x) => tiers.add(x));
+  }
+
+  const files = await getPackFilesForTiers(admin, Array.from(tiers));
+  return NextResponse.json({ files });
+}

app/api/packs/sign-link/route.ts

@@ -0,0 +1,73 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { createServerClient as createSSRClient } from '@supabase/ssr';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { extractPackTier, type PackTier } from '@/lib/pack-assets';
+import { tierIncludes, getPackFileById } from '@/lib/supabase/pack-files';
+import { signLink } from '@/lib/web-backend';
+
+export const runtime = 'nodejs';
+
+const EXPIRES_IN_SEC = 4 * 60 * 60;  // 4시간
+
+export async function POST(request: Request) {
+  const { fileId } = await request.json();
+  if (!fileId || typeof fileId !== 'string') {
+    return NextResponse.json({ error: 'fileId 필요' }, { status: 400 });
+  }
+
+  // 1) 사용자 인증 (서버 사이드 supabase ssr 클라이언트)
+  const cookieStore = await cookies();
+  const supabase = createSSRClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll: () => cookieStore.getAll(),
+        setAll: () => {},
+      },
+    },
+  );
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  // 2) orders 조회 — completed Music 팩 구매 확인
+  const admin = createAdminClient();
+  const { data: orders } = await admin
+    .from('contact_requests')
+    .select('service, status')
+    .eq('user_id', user.id)
+    .eq('status', 'completed');
+
+  const tiers = new Set<PackTier>();
+  for (const o of (orders ?? [])) {
+    const t = extractPackTier(o.service);
+    if (t) tierIncludes(t).forEach((x) => tiers.add(x));
+  }
+  if (tiers.size === 0) {
+    return NextResponse.json({ error: '구매 내역이 없거나 결제 미완료입니다' }, { status: 403 });
+  }
+
+  // 3) 파일 조회 + tier 매칭
+  const file = await getPackFileById(admin, fileId);
+  if (!file) {
+    return NextResponse.json({ error: '파일을 찾을 수 없습니다' }, { status: 404 });
+  }
+  if (!tiers.has(file.min_tier)) {
+    return NextResponse.json({ error: '구매 등급에서 접근할 수 없는 파일입니다' }, { status: 403 });
+  }
+
+  // 4) web-backend 호출 → DSM 공유 링크
+  try {
+    const { url, expires_at } = await signLink({
+      file_path: file.file_path,
+      expires_in_seconds: EXPIRES_IN_SEC,
+    });
+    return NextResponse.json({ url, expiresAt: expires_at });
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : 'unknown';
+    return NextResponse.json({ error: '링크 발급 실패', detail: msg }, { status: 502 });
+  }
+}

app/api/payment/confirm/route.ts

@@ -0,0 +1,135 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+import { checkRateLimit, getClientIp } from '@/lib/security';
+
+export async function POST(request: NextRequest) {
+  try {
+    // ── Rate Limit: IP당 1분 10회 (결제 재시도 남용 방지) ─────
+    const ip = getClientIp(request);
+    const rl = checkRateLimit(`payment:${ip}`, 60_000, 10);
+    if (!rl.allowed) {
+      return NextResponse.json(
+        { error: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.' },
+        { status: 429 }
+      );
+    }
+
+    const body = await request.json();
+    const { paymentId } = body;
+
+    // ── 기본 파라미터 검증 ────────────────────────────────────
+    if (!paymentId || typeof paymentId !== 'string' || paymentId.length > 200) {
+      return NextResponse.json({ error: '필수 파라미터 누락' }, { status: 400 });
+    }
+
+    // ── 로그인 사용자 확인 ────────────────────────────────────
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+    if (!user) {
+      return NextResponse.json({ error: '로그인이 필요합니다' }, { status: 401 });
+    }
+
+    // ── DB에서 주문 확인 ──────────────────────────────────────
+    const { data: order, error: orderFetchError } = await supabase
+      .from('orders')
+      .select('*')
+      .eq('id', paymentId)
+      .single();
+
+    if (orderFetchError || !order) {
+      return NextResponse.json({ error: '주문을 찾을 수 없습니다' }, { status: 404 });
+    }
+    if (order.user_id !== user.id) {
+      return NextResponse.json({ error: '접근 권한이 없습니다' }, { status: 403 });
+    }
+    if (order.status === 'paid') {
+      return NextResponse.json({ error: '이미 처리된 주문입니다' }, { status: 400 });
+    }
+
+    // ── 포트원 V2 결제 조회 API ───────────────────────────────
+    const apiSecret = process.env.PORTONE_API_SECRET;
+    if (!apiSecret) {
+      console.error('[Payment] PORTONE_API_SECRET 미설정');
+      return NextResponse.json({ error: '결제 서비스 설정 오류' }, { status: 500 });
+    }
+
+    const portoneRes = await fetch(
+      `https://api.portone.io/payments/${encodeURIComponent(paymentId)}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `PortOne ${apiSecret}`,
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    if (!portoneRes.ok) {
+      const err = await portoneRes.json().catch(() => ({}));
+      console.error(`[Payment] 포트원 조회 실패 paymentId=${paymentId} status=${portoneRes.status}`, err);
+      return NextResponse.json(
+        { error: '결제 확인에 실패했습니다. 고객센터에 문의해주세요.' },
+        { status: 400 }
+      );
+    }
+
+    const paymentData = await portoneRes.json();
+
+    // ── 결제 상태 & 금액 검증 ─────────────────────────────────
+    if (paymentData.status !== 'PAID') {
+      console.warn(`[Payment] 미완료 결제 paymentId=${paymentId} status=${paymentData.status}`);
+      return NextResponse.json(
+        { error: '결제가 완료되지 않았습니다.' },
+        { status: 400 }
+      );
+    }
+
+    // 서버 DB 금액과 포트원 결제 금액 비교 (위조 방어)
+    const paidAmount = paymentData.amount?.total;
+    if (paidAmount !== order.amount) {
+      console.warn(`[Payment] 금액 불일치 paymentId=${paymentId} db=${order.amount} paid=${paidAmount} user=${user.id}`);
+      return NextResponse.json({ error: '결제 금액이 올바르지 않습니다' }, { status: 400 });
+    }
+
+    // ── orders 상태 업데이트 ──────────────────────────────────
+    const { error: updateError } = await supabase
+      .from('orders')
+      .update({ status: 'paid' })
+      .eq('id', paymentId);
+
+    if (updateError) {
+      console.error('[Payment] Order update error:', updateError.message);
+      return NextResponse.json({ error: '주문 상태 업데이트 실패' }, { status: 500 });
+    }
+
+    // ── payments 레코드 생성 ──────────────────────────────────
+    const pgPaymentId = paymentData.pgResponse?.pgTxId ?? paymentData.paymentId ?? paymentId;
+    const { error: paymentError } = await supabase.from('payments').insert({
+      user_id:        order.user_id,
+      order_id:       paymentId,
+      product_name:   order.metadata?.product_name ?? order.product_id,
+      amount:         order.amount,
+      status:         'paid',
+      pg_provider:    'portone_kcp',
+      pg_payment_key: pgPaymentId,
+    });
+
+    if (paymentError) {
+      console.error('[Payment] Payment insert error:', paymentError.message);
+      return NextResponse.json({ error: '결제 내역 저장 실패' }, { status: 500 });
+    }
+
+    return NextResponse.json({
+      success: true,
+      data: {
+        paymentId,
+        orderName: paymentData.orderName,
+        amount: paidAmount,
+        status: paymentData.status,
+      },
+    });
+  } catch (error: unknown) {
+    console.error('[Payment] Unexpected error:', error);
+    return NextResponse.json({ error: '서버 오류가 발생했습니다' }, { status: 500 });
+  }
+}

app/api/projects/link/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { createClient } from '@/lib/supabase/server';
+
+export const runtime = 'nodejs';
+
+export async function POST(request: Request) {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const body = await request.json();
+  const token = (body.token as string | undefined)?.trim();
+  if (!token) return NextResponse.json({ error: '견적서 코드를 입력해주세요' }, { status: 400 });
+
+  const admin = createAdminClient();
+
+  const { data: quote, error } = await admin
+    .from('quotes')
+    .select('id, status, user_id, client_email')
+    .eq('public_token', token)
+    .single();
+
+  if (error || !quote) {
+    return NextResponse.json({ error: '견적서를 찾을 수 없습니다. 코드를 다시 확인해주세요.' }, { status: 404 });
+  }
+  if (quote.status === 'draft') {
+    return NextResponse.json({ error: '아직 발송되지 않은 견적서입니다.' }, { status: 400 });
+  }
+  if (quote.user_id && quote.user_id !== user.id) {
+    return NextResponse.json({ error: '이미 다른 계정에 연결된 견적서입니다.' }, { status: 400 });
+  }
+  if (quote.user_id === user.id) {
+    return NextResponse.json({ success: true, quoteId: quote.id, alreadyLinked: true });
+  }
+
+  const { error: updateErr } = await admin
+    .from('quotes')
+    .update({ user_id: user.id, updated_at: new Date().toISOString() })
+    .eq('id', quote.id);
+
+  if (updateErr) {
+    console.error('[Projects/Link] DB update error:', updateErr.message);
+    return NextResponse.json({ error: '견적서 연결에 실패했습니다. 다시 시도해주세요.' }, { status: 500 });
+  }
+
+  return NextResponse.json({ success: true, quoteId: quote.id });
+}

app/api/projects/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { createClient } from '@/lib/supabase/server';
+
+export const runtime = 'nodejs';
+
+export async function GET() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const admin = createAdminClient();
+
+  const { data: quotes, error: qErr } = await admin
+    .from('quotes')
+    .select('id, title, status, items, created_at')
+    .eq('user_id', user.id)
+    .in('status', ['sent', 'accepted', 'in_progress', 'completed', 'delivered'])
+    .order('created_at', { ascending: false });
+
+  if (qErr) {
+    console.error('[Projects] DB query error:', qErr.message);
+    return NextResponse.json({ error: '프로젝트 정보를 불러올 수 없습니다.' }, { status: 500 });
+  }
+  if (!quotes?.length) return NextResponse.json({ projects: [] });
+
+  const quoteIds = quotes.map((q) => q.id);
+
+  const { data: milestones } = await admin
+    .from('project_milestones')
+    .select('*')
+    .in('quote_id', quoteIds)
+    .order('step_number', { ascending: true });
+
+  const projects = quotes.map((q) => ({
+    id: q.id,
+    title: q.title,
+    status: q.status,
+    total: Array.isArray(q.items)
+      ? q.items.reduce(
+          (s: number, i: { unitPrice?: number; quantity?: number }) =>
+            s + ((i.unitPrice ?? 0) * (i.quantity ?? 1)),
+          0
+        )
+      : 0,
+    created_at: q.created_at,
+    milestones: (milestones ?? [])
+      .filter((m) => m.quote_id === q.id)
+      .sort((a, b) => a.step_number - b.step_number),
+  }));
+
+  return NextResponse.json({ projects });
+}

app/api/questionnaire/submit/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { clientName, clientEmail, clientPhone, responses, type } = body;
+
+    if (!responses || typeof responses !== 'object') {
+      return NextResponse.json({ error: '응답 데이터가 없습니다.' }, { status: 400 });
+    }
+
+    if (!clientName || !clientEmail) {
+      return NextResponse.json({ error: '이름과 이메일은 필수입니다.' }, { status: 400 });
+    }
+
+    const admin = createAdminClient();
+    const { data, error } = await admin
+      .from('questionnaire_responses')
+      .insert({
+        questionnaire_type: type || 'ebay-tool',
+        client_name: clientName,
+        client_email: clientEmail,
+        client_phone: clientPhone || null,
+        responses,
+        status: 'submitted',
+      })
+      .select('id')
+      .single();
+
+    if (error) {
+      console.error('[Questionnaire] DB insert error:', error);
+      return NextResponse.json({ error: '저장에 실패했습니다.' }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true, id: data.id });
+  } catch (err) {
+    console.error('[Questionnaire] Submit error:', err);
+    return NextResponse.json({ error: '서버 오류가 발생했습니다.' }, { status: 500 });
+  }
+}

app/api/quote/[token]/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+
+export const runtime = 'nodejs';
+
+// 고객용 공개 견적서 조회 (토큰 기반)
+export async function GET(_req: Request, { params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params;
+  const supabase = createAdminClient();
+
+  const { data, error } = await supabase
+    .from('quotes')
+    .select('id, title, client_name, valid_until, status, wbs, items, maintenance, notes, created_at')
+    .eq('public_token', token)
+    .single();
+
+  if (error || !data) return NextResponse.json({ error: 'Not found' }, { status: 404 });
+
+  // 만료 검증: valid_until이 현재 시간보다 과거이면 expired 플래그 추가
+  const expired = data.valid_until
+    ? new Date(data.valid_until).getTime() < Date.now()
+    : false;
+
+  return NextResponse.json({ quote: data, expired });
+}
+
+// 고객이 견적 수락
+export async function POST(request: Request, { params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params;
+  const body = await request.json(); // { selectedItems, selectedMaintenance }
+  const supabase = createAdminClient();
+
+  const { data: quote, error: findErr } = await supabase
+    .from('quotes')
+    .select('id, title, client_name, client_email')
+    .eq('public_token', token)
+    .single();
+
+  if (findErr || !quote) return NextResponse.json({ error: 'Not found' }, { status: 404 });
+
+  // 상태를 accepted로 변경
+  await supabase
+    .from('quotes')
+    .update({
+      status: 'accepted',
+      accepted_items: body.selectedItems,
+      accepted_maintenance: body.selectedMaintenance,
+      accepted_total: body.total,
+      updated_at: new Date().toISOString(),
+    })
+    .eq('id', quote.id);
+
+  return NextResponse.json({ success: true });
+}

app/api/saju/analyze/route.ts

@@ -0,0 +1,194 @@
+
+import { NextResponse } from 'next/server';
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import { createSajuPrompt } from '@/lib/saju-ai-prompt';
+import { performFullAnalysis } from '@/lib/ai-interpretation';
+import { config as loadDotenv } from 'dotenv';
+import { resolve } from 'path';
+
+export const runtime = 'nodejs';
+// Vercel 최대 타임아웃 (Pro plan 300s, Hobby 60s)
+export const maxDuration = 60;
+
+// Next.js가 env 로드를 놓치는 경우 대비해 직접 로드 (Windows 환경 대응)
+loadDotenv({ path: resolve(process.cwd(), '.env.local'), override: true });
+
+const MOCK_INTERPRETATION = `
+## 1. 일간 분석과 타고난 기질
+(GEMINI_API_KEY 환경변수를 설정하고 서버를 재시작하면 실제 AI 해석을 받을 수 있습니다.)
+귀하는 **갑목(甲木)** 일간으로 태어나, 마치 곧게 뻗은 소나무와 같은 기상을 지니고 있다. 리더십이 강하고 추진력이 뛰어나며, 한번 마음먹은 일은 끝까지 해내는 뚝심이 있다.
+
+## 2. 오행 균형과 용신 기반 개운법
+사주에서 **화(火)** 기운이 부족하여 표현력이 다소 약할 수 있다.
+
+## 3. 지지 상호작용 해석
+지지 간의 상호작용을 살펴보면, 특별한 합충형이 발견된다.
+
+## 4. 신살이 삶에 미치는 영향
+역마살이 사주에 자리하고 있어 이동과 변동이 많은 삶을 살게 된다.
+
+## 5. 재물운과 금전 흐름
+재물창고인 **진토(辰土)**를 깔고 있어 기본적으로 재복은 타고났다.
+
+## 6. 직업 적성과 진로
+교육, 출판, 건축, 디자인 등 창조적이고 독립적인 분야에서 두각을 나타낼 수 있다.
+
+## 7. 애정운과 결혼
+자존심이 강해 상대방에게 굽히지 않으려는 성향이 있다.
+
+## 8. 건강운
+간, 담낭, 신경계 통증에 유의해야 한다.
+
+## 9. 현재 대운의 흐름과 기회/위기
+현재 대운은 인생의 전환점이다.
+
+## 10. 올해의 세운 분석
+올해는 귀인의 도움을 받을 수 있는 해이다.
+
+## 11. 인생의 황금기 예측
+40대 중반부터 50대 초반까지 인생의 가장 화려한 시기를 맞이할 것으로 보인다.
+
+## 12. 종합 조언
+"서두르지 않아도 봄은 온다." 조급해하지 말고 때를 기다리는 지혜가 필요하다.
+`;
+
+// 모델 우선순위 — 강력한 순서 (이 API 키로 접근 가능한 모델만)
+// gemini-2.5-pro:   최고 품질, 가장 강력한 추론력
+// gemini-2.5-flash: 빠르고 강력한 2순위
+// gemini-2.0-flash: 안정적인 폴백
+const MODELS = [
+  { id: 'gemini-2.5-pro',   maxTokens: 8192 },
+  { id: 'gemini-2.5-flash', maxTokens: 8192 },
+  { id: 'gemini-2.0-flash', maxTokens: 8192 },
+] as const;
+
+export async function POST(request: Request) {
+  try {
+    // ── 결제 사용자 인증 (Gemini API 무단 호출 방지) ──────────
+    const { createClient } = await import('@/lib/supabase/server');
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (user) {
+      // 로그인된 경우: saju_detail 결제 여부 확인
+      const { data: paidOrder } = await supabase
+        .from('orders')
+        .select('id')
+        .eq('user_id', user.id)
+        .eq('product_id', 'saju_detail')
+        .eq('status', 'paid')
+        .maybeSingle();
+
+      if (!paidOrder) {
+        return NextResponse.json({ error: '사주 리포트를 구매한 사용자만 이용할 수 있습니다' }, { status: 403 });
+      }
+    } else {
+      // 비로그인 사용자는 AI 호출 불가
+      return NextResponse.json({ error: '로그인이 필요합니다' }, { status: 401 });
+    }
+
+    // ── 입력 길이 검증 (DoS / 프롬프트 인젝션 기초 방어) ──────
+    const raw = await request.json();
+    if (JSON.stringify(raw).length > 50_000) {
+      return NextResponse.json({ error: '요청 데이터가 너무 큽니다' }, { status: 400 });
+    }
+    const { saju, daeun, daeunList, gender, engineData } = raw;
+
+    // gender 값 제한
+    if (gender !== 'male' && gender !== 'female') {
+      return NextResponse.json({ error: '잘못된 성별 값' }, { status: 400 });
+    }
+
+    // 종합 분석 수행
+    let analysis;
+    try {
+      analysis = performFullAnalysis(saju);
+    } catch (analysisError: any) {
+      console.error('[사주] 분석 계산 오류');
+      return NextResponse.json(
+        { error: '사주 분석 중 오류가 발생했습니다' },
+        { status: 500 }
+      );
+    }
+
+    const apiKey = process.env.GEMINI_API_KEY;
+    if (!apiKey) {
+      console.warn('[사주] GEMINI_API_KEY 미설정 — 예시 데이터 반환');
+      return NextResponse.json({ interpretation: MOCK_INTERPRETATION, analysis });
+    }
+
+    const genAI = new GoogleGenerativeAI(apiKey);
+
+    // createSajuPrompt 반환값 = 시스템 지시문 (데이터 + 출력 요구사항 포함)
+    const systemInstruction = createSajuPrompt(saju, daeun, gender, analysis, daeunList || [], engineData);
+
+    // 유저 트리거 메시지 (Gemini는 systemInstruction + user 메시지 구조 필요)
+    const userMessage = '위 사주 데이터를 바탕으로 12개 항목의 상세 해석을 작성해주세요. 각 항목은 ## 1. ~ ## 12. 형식으로 작성하세요.';
+
+    let interpretation: string | null = null;
+
+    for (const { id: modelId, maxTokens } of MODELS) {
+      try {
+        console.log(`[사주] ${modelId} 로 해석 생성 중...`);
+
+        const model = genAI.getGenerativeModel({
+          model: modelId,
+          systemInstruction,           // ← 시스템 프롬프트 분리 (핵심 수정)
+          generationConfig: {
+            temperature: 0.8,
+            topP: 0.95,
+            maxOutputTokens: maxTokens,
+          },
+        });
+
+        const result = await model.generateContent(userMessage);
+        const text = result.response.text();
+
+        if (!text || text.trim().length < 100) {
+          throw new Error('응답이 너무 짧거나 비어있습니다');
+        }
+
+        interpretation = text;
+        console.log(`[사주] ${modelId} 성공 — ${text.length}자 생성됨`);
+        break;
+
+      } catch (modelError: any) {
+        const msg = modelError.message ?? String(modelError);
+        console.error(`[사주] ${modelId} 실패:`, msg);
+
+        // API 키 / 권한 오류 → 즉시 mock 반환
+        if (
+          msg.includes('API_KEY') ||
+          msg.includes('PERMISSION_DENIED') ||
+          msg.includes('API key') ||
+          modelError.status === 401 ||
+          modelError.status === 403
+        ) {
+          console.warn('[사주] API 키 오류 — 예시 데이터 반환');
+          return NextResponse.json({ interpretation: MOCK_INTERPRETATION, analysis });
+        }
+
+        // 마지막 모델도 실패
+        if (modelId === MODELS[MODELS.length - 1].id) {
+          console.error('[사주] 모든 모델 실패 — 예시 데이터 반환');
+          return NextResponse.json({ interpretation: MOCK_INTERPRETATION, analysis });
+        }
+
+        console.log(`[사주] ${modelId} → 다음 모델로 폴백...`);
+      }
+    }
+
+    if (!interpretation) {
+      return NextResponse.json({ interpretation: MOCK_INTERPRETATION, analysis });
+    }
+
+    return NextResponse.json({ interpretation, analysis });
+
+  } catch (error: any) {
+    console.error('[사주] 전체 오류:', error.message || error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to generate interpretation' },
+      { status: 500 }
+    );
+  }
+}

app/api/saju/lotto/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const SAJU_ENGINE_URL = process.env.SAJU_ENGINE_URL;
+const SAJU_ENGINE_SECRET = process.env.SAJU_ENGINE_SECRET;
+
+export async function POST(request: NextRequest) {
+  if (!SAJU_ENGINE_URL) {
+    return NextResponse.json({ error: '사주 엔진 URL이 설정되지 않았습니다' }, { status: 503 });
+  }
+
+  try {
+    const body = await request.json();
+
+    const response = await fetch(`${SAJU_ENGINE_URL}/saju/lotto`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(SAJU_ENGINE_SECRET ? { 'X-API-Secret': SAJU_ENGINE_SECRET } : {}),
+      },
+      body: JSON.stringify(body),
+      signal: AbortSignal.timeout(15000),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data.detail || '로또 번호 생성 실패' },
+        { status: response.status }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error: unknown) {
+    if (error instanceof Error && error.name === 'TimeoutError') {
+      return NextResponse.json({ error: '사주 엔진 응답 시간 초과' }, { status: 504 });
+    }
+    console.error('로또 번호 생성 프록시 오류:', error);
+    return NextResponse.json({ error: '서버 오류' }, { status: 500 });
+  }
+}

app/api/saju/save-interpretation/route.ts

@@ -0,0 +1,49 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (!user) {
+      return NextResponse.json({ error: '로그인이 필요합니다' }, { status: 401 });
+    }
+
+    const { interpretation, birthKey } = await request.json();
+
+    if (!interpretation || !birthKey) {
+      return NextResponse.json({ error: '필수 파라미터 누락' }, { status: 400 });
+    }
+
+    // 기존 레코드 확인 (중복 저장 방지)
+    const { data: existing } = await supabase
+      .from('saju_records')
+      .select('id')
+      .eq('user_id', user.id)
+      .eq('is_paid', true)
+      .contains('saju_data', birthKey)
+      .maybeSingle();
+
+    if (existing) {
+      // 기존 레코드 업데이트
+      await supabase
+        .from('saju_records')
+        .update({ interpretation })
+        .eq('id', existing.id);
+    } else {
+      // 새 레코드 생성
+      await supabase.from('saju_records').insert({
+        user_id: user.id,
+        saju_data: birthKey,
+        interpretation,
+        is_paid: true,
+      });
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Save interpretation error:', error);
+    return NextResponse.json({ error: '저장 실패' }, { status: 500 });
+  }
+}

app/api/studio/generate/route.ts

@@ -0,0 +1,79 @@
+import { NextResponse } from 'next/server';
+
+export const runtime = 'nodejs';
+
+type GenerateBody = {
+  mode: 'simple' | 'custom';
+  prompt?: string;
+  title?: string;
+  lyrics?: string;
+  tags?: string;
+  make_instrumental?: boolean;
+  model?: string;
+};
+
+export async function POST(request: Request) {
+  const apiUrl = process.env.SUNO_API_URL ?? 'https://api.sunoapi.org';
+  const apiKey = process.env.SUNO_API_KEY;
+
+  if (!apiKey) {
+    return NextResponse.json(
+      { error: 'Suno API 미설정 (SUNO_API_KEY 환경변수 필요)' },
+      { status: 503 },
+    );
+  }
+
+  let body: GenerateBody;
+  try {
+    body = (await request.json()) as GenerateBody;
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const origin = new URL(request.url).origin;
+  const callBackUrl = `${origin}/api/studio/callback`;
+
+  const isCustom = body.mode === 'custom';
+  const payload = isCustom
+    ? {
+        prompt: body.lyrics ?? '',
+        style: body.tags ?? '',
+        title: body.title ?? 'Untitled',
+        customMode: true,
+        instrumental: !!body.make_instrumental,
+        model: body.model ?? 'V4',
+        callBackUrl,
+      }
+    : {
+        prompt: body.prompt ?? '',
+        customMode: false,
+        instrumental: !!body.make_instrumental,
+        model: body.model ?? 'V4',
+        callBackUrl,
+      };
+
+  try {
+    const res = await fetch(`${apiUrl.replace(/\/$/, '')}/api/v1/generate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    const data = await res.json().catch(() => null);
+    if (!res.ok || (data && typeof data === 'object' && 'code' in data && data.code !== 200)) {
+      return NextResponse.json(
+        { error: '생성 실패', detail: data ?? (await res.text().catch(() => '')) },
+        { status: res.ok ? 502 : res.status },
+      );
+    }
+    return NextResponse.json({ ok: true, data });
+  } catch (e) {
+    return NextResponse.json(
+      { error: 'Suno API 호출 오류', detail: e instanceof Error ? e.message : String(e) },
+      { status: 502 },
+    );
+  }
+}

app/api/studio/status/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+
+export const runtime = 'nodejs';
+
+export async function GET(request: Request) {
+  const apiUrl = process.env.SUNO_API_URL ?? 'https://api.sunoapi.org';
+  const apiKey = process.env.SUNO_API_KEY;
+
+  if (!apiKey) {
+    return NextResponse.json(
+      { error: 'Suno API 미설정 (SUNO_API_KEY 환경변수 필요)' },
+      { status: 503 },
+    );
+  }
+
+  const { searchParams } = new URL(request.url);
+  const taskId = searchParams.get('taskId');
+  if (!taskId) return NextResponse.json({ error: 'taskId required' }, { status: 400 });
+
+  try {
+    const res = await fetch(
+      `${apiUrl.replace(/\/$/, '')}/api/v1/generate/record-info?taskId=${encodeURIComponent(taskId)}`,
+      { headers: { Authorization: `Bearer ${apiKey}` } },
+    );
+    const data = await res.json().catch(() => null);
+    if (!res.ok) {
+      return NextResponse.json(
+        { error: '조회 실패', detail: data },
+        { status: res.status },
+      );
+    }
+    return NextResponse.json({ ok: true, data });
+  } catch (e) {
+    return NextResponse.json(
+      { error: '조회 오류', detail: e instanceof Error ? e.message : String(e) },
+      { status: 502 },
+    );
+  }
+}

app/api/subscription/[id]/route.ts

@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+/**
+ * PATCH /api/subscription/[id]
+ * action: 'cancel' | 'toggle_autorenew'
+ *
+ * cancel       — 구독 즉시 해지 (status='cancelled', auto_renew=false)
+ * toggle_autorenew — 자동갱신 on/off 전환
+ */
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const supabase = await createClient();
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+  if (authError || !user) {
+    return NextResponse.json({ error: 'UNAUTHORIZED' }, { status: 401 });
+  }
+
+  const { id } = await params;
+  let body: { action?: string };
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: 'INVALID_JSON' }, { status: 400 });
+  }
+
+  const { action } = body;
+
+  // 본인 구독인지 확인
+  const { data: sub, error: fetchError } = await supabase
+    .from('subscriptions')
+    .select('id, status, auto_renew, expires_at')
+    .eq('id', id)
+    .eq('user_id', user.id)
+    .maybeSingle();
+
+  if (fetchError || !sub) {
+    return NextResponse.json({ error: 'NOT_FOUND' }, { status: 404 });
+  }
+
+  if (action === 'cancel') {
+    if (sub.status === 'cancelled') {
+      return NextResponse.json({ error: 'ALREADY_CANCELLED' }, { status: 400 });
+    }
+
+    const { error } = await supabase
+      .from('subscriptions')
+      .update({
+        status: 'cancelled',
+        auto_renew: false,
+        cancelled_at: new Date().toISOString(),
+      })
+      .eq('id', id);
+
+    if (error) {
+      return NextResponse.json({ error: 'DB_ERROR' }, { status: 500 });
+    }
+
+    return NextResponse.json({
+      ok: true,
+      message: '구독이 해지되었습니다. 만료일까지는 서비스를 계속 이용할 수 있습니다.',
+      expires_at: sub.expires_at,
+    });
+  }
+
+  if (action === 'toggle_autorenew') {
+    if (sub.status === 'cancelled' || sub.status === 'expired') {
+      return NextResponse.json({ error: 'SUBSCRIPTION_NOT_ACTIVE' }, { status: 400 });
+    }
+
+    const newValue = !sub.auto_renew;
+    const { error } = await supabase
+      .from('subscriptions')
+      .update({ auto_renew: newValue })
+      .eq('id', id);
+
+    if (error) {
+      return NextResponse.json({ error: 'DB_ERROR' }, { status: 500 });
+    }
+
+    return NextResponse.json({ ok: true, auto_renew: newValue });
+  }
+
+  return NextResponse.json({ error: 'INVALID_ACTION' }, { status: 400 });
+}

app/api/subscription/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+
+/**
+ * GET /api/subscription
+ * 내 활성/만료 구독 목록 조회
+ * - auth 검증은 anon client, DB 조회는 admin client (RLS 우회)
+ */
+export async function GET() {
+  const supabase = await createClient();
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+  if (authError || !user) {
+    return NextResponse.json({ error: 'UNAUTHORIZED' }, { status: 401 });
+  }
+
+  // admin client로 RLS 우회 (subscriptions 테이블 SELECT 정책 없을 때도 동작)
+  const admin = createAdminClient();
+  const { data, error } = await admin
+    .from('subscriptions')
+    .select('id, product_id, status, auto_renew, started_at, expires_at, cancelled_at')
+    .eq('user_id', user.id)
+    .order('created_at', { ascending: false })
+    .limit(20);
+
+  if (error) {
+    return NextResponse.json({ error: 'DB_ERROR', detail: error.message }, { status: 500 });
+  }
+
+  return NextResponse.json({ ok: true, subscriptions: data ?? [] });
+}

app/api/survey/route.ts

@@ -0,0 +1,102 @@
+import { NextResponse } from 'next/server';
+import { Resend } from 'resend';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { isValidEmail, sanitizeStr, checkRateLimit, getClientIp, INPUT_LIMITS } from '@/lib/security';
+
+export const runtime = 'nodejs';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function POST(request: Request) {
+  try {
+    // Rate Limit: IP당 1분 5회
+    const ip = getClientIp(request);
+    const rl = checkRateLimit(`survey:${ip}`, 60_000, 5);
+    if (!rl.allowed) {
+      return NextResponse.json(
+        { error: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.' },
+        {
+          status: 429,
+          headers: { 'Retry-After': String(Math.ceil(rl.retryAfterMs / 1000)) },
+        }
+      );
+    }
+
+    const body = await request.json();
+
+    // 기본 validation — Q1, Q2는 필수
+    if (!body.age_range || !body.status || !body.awareness_freq) {
+      return NextResponse.json(
+        { error: '필수 응답이 누락되었습니다.' },
+        { status: 400 }
+      );
+    }
+
+    // 입력 정제
+    const tools_other = body.tools_other ? sanitizeStr(body.tools_other, 200) : null;
+    const free_opinion = body.free_opinion ? sanitizeStr(body.free_opinion, 2000) : null;
+    const email = body.email ? sanitizeStr(body.email, INPUT_LIMITS.EMAIL) : null;
+    if (email && !isValidEmail(email)) {
+      return NextResponse.json(
+        { error: '올바른 이메일 형식이 아닙니다.' },
+        { status: 400 }
+      );
+    }
+
+    // DB INSERT (service role — RLS 우회)
+    const supabase = createAdminClient();
+    const { data, error } = await supabase
+      .from('survey_responses')
+      .insert({
+        age_range: body.age_range,
+        status: body.status,
+        awareness_freq: body.awareness_freq,
+        tools_used: Array.isArray(body.tools_used) ? body.tools_used : null,
+        tools_other,
+        cost_range: body.cost_range ?? null,
+        best_tool: body.best_tool ?? null,
+        best_satisfy: typeof body.best_satisfy === 'number' ? body.best_satisfy : null,
+        free_opinion,
+        email,
+        user_agent: body.user_agent ? sanitizeStr(body.user_agent, 500) : null,
+        referrer: body.referrer ? sanitizeStr(body.referrer, 500) : null,
+        utm_source: body.utm_source ? sanitizeStr(body.utm_source, 100) : null,
+        utm_medium: body.utm_medium ? sanitizeStr(body.utm_medium, 100) : null,
+        utm_campaign: body.utm_campaign ? sanitizeStr(body.utm_campaign, 100) : null,
+        completion_seconds: typeof body.completion_seconds === 'number' ? body.completion_seconds : null,
+      })
+      .select()
+      .single();
+
+    if (error) {
+      console.error('[Survey] DB insert error:', error);
+      return NextResponse.json({ error: '저장에 실패했습니다.' }, { status: 500 });
+    }
+
+    // Resend 즉시 확인 메일 (이메일 입력 시만)
+    if (email) {
+      try {
+        await resend.emails.send({
+          from: '쟁승메이드 <noreply@jaengseung-made.com>',
+          to: email,
+          subject: 'CONTOUR 설문 참여 감사드립니다',
+          html: `<p>안녕하세요,</p>
+                 <p>설문에 참여해주셔서 감사합니다. 결과는 추후 공유드리겠습니다.</p>
+                 <p>— 쟁승메이드</p>`,
+        });
+        await supabase
+          .from('survey_responses')
+          .update({ email_confirmation_sent: true })
+          .eq('id', data.id);
+      } catch (mailErr) {
+        console.error('[Survey] Resend error:', mailErr);
+        // 메일 실패는 응답 저장 성공에 영향 X
+      }
+    }
+
+    return NextResponse.json({ ok: true, id: data.id });
+  } catch (e) {
+    console.error('[Survey] Unexpected error:', e);
+    return NextResponse.json({ error: '제출 처리 중 오류가 발생했습니다.' }, { status: 500 });
+  }
+}

app/api/telegram/connect/route.ts

@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+/**
+ * POST /api/telegram/connect
+ * 인증된 유저에게 15분 유효 연결 토큰을 발급하고
+ * 텔레그램 봇 딥링크를 반환합니다.
+ *
+ * Response: { deepLink: string, expiresAt: string }
+ */
+export async function POST() {
+  const supabase = await createClient();
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !user) {
+    return NextResponse.json({ error: 'UNAUTHORIZED' }, { status: 401 });
+  }
+
+  const botUsername = process.env.TELEGRAM_BOT_USERNAME;
+  if (!botUsername) {
+    return NextResponse.json({ error: 'TELEGRAM_BOT_USERNAME이 설정되지 않았습니다.' }, { status: 500 });
+  }
+
+  // 15분 유효 토큰 생성
+  const token = crypto.randomUUID().replace(/-/g, '');
+  const expiresAt = new Date(Date.now() + 15 * 60 * 1000).toISOString();
+
+  // 프로필 upsert (없는 경우 대비)
+  await supabase
+    .from('profiles')
+    .upsert({ id: user.id, email: user.email }, { onConflict: 'id' });
+
+  const { error: updateError } = await supabase
+    .from('profiles')
+    .update({
+      telegram_connect_token: token,
+      telegram_token_expires: expiresAt,
+    })
+    .eq('id', user.id);
+
+  if (updateError) {
+    console.error('telegram connect token update error:', updateError);
+    return NextResponse.json({ error: 'DB_ERROR' }, { status: 500 });
+  }
+
+  const deepLink = `https://t.me/${botUsername}?start=${token}`;
+  return NextResponse.json({ deepLink, expiresAt });
+}
+
+/**
+ * DELETE /api/telegram/connect
+ * 텔레그램 연결 해제 (chat_id 및 토큰 초기화)
+ */
+export async function DELETE() {
+  const supabase = await createClient();
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !user) {
+    return NextResponse.json({ error: 'UNAUTHORIZED' }, { status: 401 });
+  }
+
+  const { error } = await supabase
+    .from('profiles')
+    .update({
+      telegram_chat_id: null,
+      telegram_connect_token: null,
+      telegram_token_expires: null,
+    })
+    .eq('id', user.id);
+
+  if (error) {
+    return NextResponse.json({ error: 'DB_ERROR' }, { status: 500 });
+  }
+
+  return NextResponse.json({ ok: true });
+}

app/api/telegram/setup/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { setWebhook, getWebhookInfo } from '@/lib/telegram';
+
+/**
+ * GET  /api/telegram/setup  — 현재 웹훅 등록 상태 확인
+ * POST /api/telegram/setup  — 텔레그램 웹훅 등록 (최초 1회 or 도메인 변경 시)
+ *
+ * 보안: TELEGRAM_SETUP_SECRET 헤더로 보호 (환경변수와 일치해야 접근 가능)
+ * 사용: curl -X POST https://your-domain/api/telegram/setup \
+ *         -H "x-setup-secret: YOUR_SECRET"
+ */
+
+function checkSecret(req: NextRequest): boolean {
+  const secret = process.env.TELEGRAM_SETUP_SECRET;
+  if (!secret) return false; // 시크릿 미설정이면 항상 거부
+  return req.headers.get('x-setup-secret') === secret;
+}
+
+export async function GET(req: NextRequest) {
+  if (!checkSecret(req)) {
+    return NextResponse.json({ error: 'FORBIDDEN' }, { status: 403 });
+  }
+  const info = await getWebhookInfo();
+  return NextResponse.json(info);
+}
+
+export async function POST(req: NextRequest) {
+  if (!checkSecret(req)) {
+    return NextResponse.json({ error: 'FORBIDDEN' }, { status: 403 });
+  }
+
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? process.env.VERCEL_URL;
+  if (!appUrl) {
+    return NextResponse.json(
+      { error: 'NEXT_PUBLIC_APP_URL 또는 VERCEL_URL 환경변수가 필요합니다.' },
+      { status: 500 }
+    );
+  }
+
+  const webhookUrl = `${appUrl.startsWith('http') ? appUrl : `https://${appUrl}`}/api/telegram/webhook`;
+  const secretToken = process.env.TELEGRAM_WEBHOOK_SECRET;
+
+  const result = await setWebhook(webhookUrl, secretToken);
+  return NextResponse.json({ webhookUrl, result });
+}

app/api/telegram/webhook/route.ts

@@ -0,0 +1,124 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { sendMessage, type TelegramUpdate } from '@/lib/telegram';
+
+/**
+ * POST /api/telegram/webhook
+ * Telegram이 호출하는 웹훅 엔드포인트
+ * - X-Telegram-Bot-Api-Secret-Token 헤더로 요청 검증
+ * - /start <TOKEN> 명령으로 유저 텔레그램 계정 연결
+ */
+export async function POST(req: NextRequest) {
+  // 1. 웹훅 시크릿 토큰 검증
+  const secretToken = process.env.TELEGRAM_WEBHOOK_SECRET;
+  if (secretToken) {
+    const incoming = req.headers.get('x-telegram-bot-api-secret-token');
+    if (incoming !== secretToken) {
+      return NextResponse.json({ error: 'UNAUTHORIZED' }, { status: 401 });
+    }
+  }
+
+  let update: TelegramUpdate;
+  try {
+    update = await req.json();
+  } catch {
+    return NextResponse.json({ error: 'INVALID_JSON' }, { status: 400 });
+  }
+
+  const message = update.message;
+  if (!message?.text || !message.from) {
+    // 지원하지 않는 업데이트 타입 — 200으로 응답해야 재전송 방지
+    return NextResponse.json({ ok: true });
+  }
+
+  const chatId = message.chat.id;
+  const text = message.text.trim();
+  const firstName = message.from.first_name ?? '고객';
+
+  // 2. /start 명령 처리
+  if (text.startsWith('/start')) {
+    const parts = text.split(' ');
+    const token = parts[1]; // /start <TOKEN>
+
+    if (!token) {
+      await sendMessage(
+        chatId,
+        `안녕하세요, ${firstName}님! 👋\n\n쟁승메이드 로또 알림 봇입니다.\n\n[마이페이지](https://jaengseung.com/mypage)에서 텔레그램 연결 버튼을 클릭하여 계정을 연결해주세요.`
+      );
+      return NextResponse.json({ ok: true });
+    }
+
+    // 3. 토큰으로 유저 조회
+    const supabase = createAdminClient();
+    const now = new Date().toISOString();
+
+    const { data: profile, error } = await supabase
+      .from('profiles')
+      .select('id, email, telegram_chat_id, telegram_connect_token, telegram_token_expires')
+      .eq('telegram_connect_token', token)
+      .gt('telegram_token_expires', now)
+      .maybeSingle();
+
+    if (error || !profile) {
+      await sendMessage(
+        chatId,
+        `❌ 연결 코드가 유효하지 않거나 만료되었습니다.\n\n마이페이지에서 다시 연결을 시도해주세요.`
+      );
+      return NextResponse.json({ ok: true });
+    }
+
+    if (profile.telegram_chat_id) {
+      await sendMessage(
+        chatId,
+        `✅ 이미 연결된 계정입니다.\n\n📧 ${profile.email}`
+      );
+      return NextResponse.json({ ok: true });
+    }
+
+    // 4. chat_id 저장 + 토큰 초기화
+    await supabase
+      .from('profiles')
+      .update({
+        telegram_chat_id: String(chatId),
+        telegram_connect_token: null,
+        telegram_token_expires: null,
+      })
+      .eq('id', profile.id);
+
+    await sendMessage(
+      chatId,
+      `🎉 텔레그램 연결 완료!\n\n📧 ${profile.email} 계정과 연결되었습니다.\n\n이제 매주 로또 번호를 이 채팅으로 받아보실 수 있습니다. 🎰`
+    );
+
+    return NextResponse.json({ ok: true });
+  }
+
+  // 5. 그 외 명령어
+  if (text === '/status') {
+    const supabase = createAdminClient();
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('email')
+      .eq('telegram_chat_id', String(chatId))
+      .maybeSingle();
+
+    if (profile) {
+      await sendMessage(chatId, `✅ 연결 상태: 정상\n📧 ${profile.email}`);
+    } else {
+      await sendMessage(chatId, `❌ 연결된 계정이 없습니다.\n마이페이지에서 연결해주세요.`);
+    }
+    return NextResponse.json({ ok: true });
+  }
+
+  if (text === '/help') {
+    await sendMessage(
+      chatId,
+      `*쟁승메이드 로또 봇 명령어*\n\n/status — 연결 상태 확인\n/help — 도움말`
+    );
+    return NextResponse.json({ ok: true });
+  }
+
+  // 기본 응답
+  await sendMessage(chatId, `/help 를 입력하면 사용 가능한 명령어를 확인할 수 있습니다.`);
+  return NextResponse.json({ ok: true });
+}

app/auth/callback/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get('code');
+  const next = searchParams.get('next') ?? '/mypage';
+
+  // 리다이렉트 기준 URL 결정
+  // - dev: 항상 현재 request의 origin (localhost) → NEXT_PUBLIC_SITE_URL 무시
+  // - prod: NEXT_PUBLIC_SITE_URL > x-forwarded-host (Vercel) > origin
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
+  const forwardedHost = request.headers.get('x-forwarded-host');
+  const isDev = process.env.NODE_ENV === 'development';
+  const baseUrl = isDev
+    ? origin
+    : (siteUrl ?? (forwardedHost ? `https://${forwardedHost}` : origin));
+
+  if (code) {
+    const supabase = await createClient();
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      return NextResponse.redirect(`${baseUrl}${next}`);
+    }
+  }
+
+  return NextResponse.redirect(`${baseUrl}/login?error=auth-callback-error`);
+}

app/components/ContactForm.tsx

@@ -1,18 +1,28 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { trackEvent } from '../../lib/gtag';
 
-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 +31,17 @@ 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: '',
+      trackEvent('generate_lead', {
+        event_category: 'contact',
+        event_label: formData.service,
       });
-
-      // 3초 후 성공 메시지 숨기기
+      setFormData({ name: '', phone: '', email: '', service: '외주 개발 문의', message: '' });
       setTimeout(() => setStatus('idle'), 5000);
     } catch (error) {
       setStatus('error');
@@ -54,133 +52,124 @@ 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>AI 자동화 키트 - 월 구독</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,314 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { trackEvent } from '../../lib/gtag';
+
+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('');
+    // 문의 시도 이벤트
+    trackEvent('contact_attempt', { service: formData.service });
+    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');
+      // 문의 성공 이벤트 (전환 추적 핵심)
+      trackEvent('generate_lead', {
+        event_category: 'contact',
+        event_label: formData.service,
+        value: '1',
+      });
+    } catch (error) {
+      setStatus('error');
+      setErrorMessage(error instanceof Error ? error.message : '문의 전송에 실패했습니다.');
+      trackEvent('contact_error', { service: formData.service });
+    }
+  };
+
+  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>AI 자동화 키트 - 월 구독</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,18 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import PublicShell from './PublicShell';
+
+const STANDALONE_PATHS = ['/login', '/signup', '/admin', '/gyeol'];
+
+export default function DashboardShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  const isStandalone = STANDALONE_PATHS.some((p) => pathname.startsWith(p));
+
+  if (isStandalone) {
+    return <>{children}</>;
+  }
+
+  return <PublicShell>{children}</PublicShell>;
+}

app/components/KakaoFloatButton.tsx

@@ -0,0 +1,62 @@
+import { KAKAO_OPENCHAT_URL } from '@/lib/contact';
+
+/**
+ * 카카오 1:1 상담 플로팅 버튼.
+ * PublicShell footer 다음에 마운트되어 모든 공개 페이지에 노출.
+ */
+export default function KakaoFloatButton() {
+  return (
+    <>
+      <a
+        href={KAKAO_OPENCHAT_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="kakao-float-btn"
+        aria-label="카카오 오픈채팅 상담"
+        title="카카오 오픈채팅으로 1:1 상담"
+      >
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+          <path d="M12 3C6.477 3 2 6.589 2 11c0 2.713 1.574 5.117 4 6.663V21l3.5-2.1A11.5 11.5 0 0 0 12 19c5.523 0 10-3.589 10-8s-4.477-8-10-8z"/>
+        </svg>
+        <span className="kakao-float-label">1:1 상담</span>
+      </a>
+
+      <style>{`
+        .kakao-float-btn {
+          position: fixed;
+          bottom: 28px;
+          right: 28px;
+          z-index: 50;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          background: #FEE500;
+          color: #3A1D1D;
+          padding: 12px 18px;
+          border-radius: 100px;
+          font-weight: 700;
+          font-size: 14px;
+          text-decoration: none;
+          box-shadow: 0 4px 20px rgba(254,229,0,0.4), 0 2px 8px rgba(0,0,0,0.15);
+          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+          white-space: nowrap;
+        }
+        .kakao-float-btn:hover {
+          transform: translateY(-3px) scale(1.04);
+          box-shadow: 0 8px 28px rgba(254,229,0,0.5), 0 4px 12px rgba(0,0,0,0.15);
+        }
+        .kakao-float-btn:active {
+          transform: translateY(-1px) scale(0.98);
+        }
+        @media (max-width: 640px) {
+          .kakao-float-btn {
+            bottom: 20px;
+            right: 16px;
+            padding: 10px 14px;
+            font-size: 13px;
+          }
+        }
+      `}</style>
+    </>
+  );
+}

app/components/LiquidGlass.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+
+interface GlassEffectProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  href?: string;
+  external?: boolean;
+  target?: string;
+  onClick?: () => void;
+  tint?: string;
+}
+
+export const GlassEffect: React.FC<GlassEffectProps> = ({
+  children,
+  className = '',
+  style = {},
+  href,
+  external,
+  target,
+  onClick,
+  tint = 'rgba(255, 255, 255, 0.18)',
+}) => {
+  const glassStyle: React.CSSProperties = {
+    boxShadow: '0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)',
+    transitionTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 2.2)',
+    ...style,
+  };
+
+  const content = (
+    <div
+      className={`relative flex font-semibold overflow-hidden text-white cursor-pointer transition-all duration-700 ${className}`}
+      style={glassStyle}
+      onClick={onClick}
+    >
+      <div
+        className="absolute inset-0 z-0 overflow-hidden"
+        style={{
+          borderRadius: 'inherit',
+          backdropFilter: 'blur(3px)',
+          WebkitBackdropFilter: 'blur(3px)',
+          filter: 'url(#glass-distortion)',
+          isolation: 'isolate',
+        }}
+      />
+      <div
+        className="absolute inset-0 z-10"
+        style={{ borderRadius: 'inherit', background: tint }}
+      />
+      <div
+        className="absolute inset-0 z-20 overflow-hidden"
+        style={{
+          borderRadius: 'inherit',
+          boxShadow:
+            'inset 2px 2px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 1px 1px rgba(255,255,255,0.5)',
+        }}
+      />
+      <div className="relative z-30 w-full">{children}</div>
+    </div>
+  );
+
+  if (!href) return content;
+  if (external) {
+    return (
+      <a
+        href={href}
+        target={target ?? '_blank'}
+        rel="noopener noreferrer"
+        className="inline-block"
+        style={{ textDecoration: 'none' }}
+      >
+        {content}
+      </a>
+    );
+  }
+  return (
+    <Link href={href} className="inline-block" style={{ textDecoration: 'none' }}>
+      {content}
+    </Link>
+  );
+};
+
+export const GlassButton: React.FC<{
+  children: React.ReactNode;
+  href?: string;
+  external?: boolean;
+  onClick?: () => void;
+  className?: string;
+  tint?: string;
+}> = ({ children, href, external, onClick, className = '', tint }) => (
+  <GlassEffect
+    href={href}
+    external={external}
+    onClick={onClick}
+    tint={tint}
+    className={`rounded-2xl px-7 py-4 hover:px-8 ${className}`}
+  >
+    <div
+      className="transition-all duration-700 hover:scale-[0.98] whitespace-nowrap"
+      style={{ transitionTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 2.2)' }}
+    >
+      {children}
+    </div>
+  </GlassEffect>
+);
+
+export const GlassFilter: React.FC = () => (
+  <svg style={{ display: 'none' }} aria-hidden>
+    <filter
+      id="glass-distortion"
+      x="0%"
+      y="0%"
+      width="100%"
+      height="100%"
+      filterUnits="objectBoundingBox"
+    >
+      <feTurbulence
+        type="fractalNoise"
+        baseFrequency="0.001 0.005"
+        numOctaves="1"
+        seed="17"
+        result="turbulence"
+      />
+      <feComponentTransfer in="turbulence" result="mapped">
+        <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
+        <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
+        <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
+      </feComponentTransfer>
+      <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
+      <feSpecularLighting
+        in="softMap"
+        surfaceScale="5"
+        specularConstant="1"
+        specularExponent="100"
+        lightingColor="white"
+        result="specLight"
+      >
+        <fePointLight x="-200" y="-200" z="300" />
+      </feSpecularLighting>
+      <feComposite
+        in="specLight"
+        operator="arithmetic"
+        k1="0"
+        k2="1"
+        k3="1"
+        k4="0"
+        result="litImage"
+      />
+      <feDisplacementMap
+        in="SourceGraphic"
+        in2="softMap"
+        scale="200"
+        xChannelSelector="R"
+        yChannelSelector="G"
+      />
+    </filter>
+  </svg>
+);

app/components/PaymentButton.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { createClient } from '@/lib/supabase/client';
+import { PRODUCTS } from '@/lib/products';
+import { getActiveChannels, type PaymentChannel } from '@/lib/payment-channels';
+import PortOne from '@portone/browser-sdk/v2';
+
+interface PaymentButtonProps {
+  productId: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  returnUrl?: string;
+}
+
+export default function PaymentButton({ productId, className, style, children, returnUrl }: PaymentButtonProps) {
+  const [loading, setLoading] = useState(false);
+  const [showMethodPicker, setShowMethodPicker] = useState(false);
+  const router = useRouter();
+  const supabase = createClient();
+  const product = PRODUCTS[productId];
+  const channels = getActiveChannels();
+
+  const processPayment = async (channel: PaymentChannel) => {
+    setShowMethodPicker(false);
+    setLoading(true);
+    try {
+      // 1. 로그인 확인
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) {
+        router.push('/login?next=' + encodeURIComponent(window.location.pathname));
+        return;
+      }
+
+      // 2. 프로필 없으면 생성
+      await supabase.from('profiles').upsert({ id: user.id, email: user.email }, { onConflict: 'id' });
+
+      // 3. Supabase에 order 생성
+      const paymentId = crypto.randomUUID();
+      const { error: orderError } = await supabase
+        .from('orders')
+        .insert({
+          id: paymentId,
+          user_id: user.id,
+          product_id: productId,
+          amount: product.price,
+          status: 'pending',
+          metadata: { product_name: product.name, pay_channel: channel.id },
+        });
+
+      if (orderError) throw new Error('주문 생성 실패: ' + orderError.message);
+
+      // 4. 포트원 V2 결제 요청
+      const response = await PortOne.requestPayment({
+        storeId: process.env.NEXT_PUBLIC_PORTONE_STORE_ID ?? '',
+        channelKey: channel.channelKey,
+        paymentId,
+        orderName: product.name,
+        totalAmount: product.price,
+        currency: 'CURRENCY_KRW',
+        payMethod: channel.payMethod,
+        customer: {
+          email: user.email ?? undefined,
+        },
+      });
+
+      // 5. 결제 결과 처리
+      if (!response || response.code != null) {
+        if (response?.code === 'FAILURE_TYPE_PG' || response?.message?.includes('cancel')) {
+          return;
+        }
+        throw new Error(response?.message ?? '결제 요청 실패');
+      }
+
+      // 6. 서버에서 결제 검증
+      const confirmRes = await fetch('/api/payment/confirm', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ paymentId }),
+      });
+
+      const confirmData = await confirmRes.json();
+
+      if (!confirmRes.ok || !confirmData.success) {
+        throw new Error(confirmData.error || '결제 검증에 실패했습니다.');
+      }
+
+      // 7. 결제 성공
+      if (returnUrl) {
+        router.push(returnUrl);
+      } else {
+        router.push(`/payment/success?paymentId=${paymentId}`);
+      }
+    } catch (err: unknown) {
+      const error = err as { code?: string; message?: string };
+      if (error?.code === 'USER_CANCEL' || error?.message?.includes('cancel')) {
+        return;
+      }
+      alert('결제 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClick = () => {
+    if (channels.length === 0) {
+      alert('결제 서비스가 준비 중입니다.');
+      return;
+    }
+    // 채널이 1개면 바로 결제, 여러 개면 선택 UI
+    if (channels.length === 1) {
+      processPayment(channels[0]);
+    } else {
+      setShowMethodPicker(true);
+    }
+  };
+
+  if (!product) return null;
+
+  const isTestMode = !process.env.NEXT_PUBLIC_PORTONE_STORE_ID
+    || process.env.NODE_ENV === 'development';
+
+  return (
+    <>
+      <div style={{ display: style ? 'block' : 'inline-block', position: 'relative' }}>
+        <button
+          onClick={handleClick}
+          disabled={loading}
+          className={className}
+          style={style}
+        >
+          {loading ? '결제 처리 중...' : children}
+        </button>
+        {isTestMode && (
+          <span style={{
+            position: 'absolute', top: -8, right: -8,
+            background: '#f59e0b', color: '#fff',
+            fontSize: 9, fontWeight: 800, letterSpacing: '0.05em',
+            padding: '2px 6px', borderRadius: 4,
+            pointerEvents: 'none', userSelect: 'none',
+          }}>
+            TEST
+          </span>
+        )}
+      </div>
+
+      {/* 결제수단 선택 모달 */}
+      {showMethodPicker && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+          onClick={() => setShowMethodPicker(false)}
+        >
+          <div
+            className="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="bg-[#04102b] px-5 py-4 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="w-6 h-6 rounded-md bg-[#1a56db] flex items-center justify-center text-white font-bold text-[10px]">
+                  쟁
+                </div>
+                <span className="text-white font-bold text-sm">결제수단 선택</span>
+              </div>
+              <button
+                onClick={() => setShowMethodPicker(false)}
+                className="text-white/60 hover:text-white transition text-lg leading-none"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="p-4">
+              <p className="text-slate-500 text-xs mb-3">
+                {product.name} · {product.price.toLocaleString()}원
+              </p>
+              <div className="space-y-2">
+                {channels.map((channel) => (
+                  <button
+                    key={channel.id}
+                    onClick={() => processPayment(channel)}
+                    className="w-full flex items-center gap-3 px-4 py-3.5 rounded-xl border border-slate-200 hover:border-[#1a56db] hover:bg-blue-50/50 transition text-left group"
+                  >
+                    <span className="text-xl">{channel.icon}</span>
+                    <span className="text-sm font-semibold text-slate-700 group-hover:text-[#1a56db]">
+                      {channel.label}
+                    </span>
+                    <svg className="w-4 h-4 text-slate-300 group-hover:text-[#1a56db] ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/components/PublicShell.tsx

@@ -0,0 +1,129 @@
+import TopNav from './TopNav';
+import Link from 'next/link';
+import KakaoFloatButton from './KakaoFloatButton';
+
+export default function PublicShell({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <TopNav />
+      <main
+        className="min-h-screen pt-20"
+        style={{
+          background: 'var(--kx-surface)',
+          color: 'var(--kx-on-surface)',
+        }}
+      >
+        {children}
+        <footer className="bg-black text-white/70 px-6 lg:px-12 py-14 text-sm border-t border-white/10">
+          <div className="max-w-7xl mx-auto">
+            <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-12 md:gap-8">
+              {/* 좌 — JSM + social */}
+              <div>
+                <p
+                  className="kx-display font-bold text-2xl mb-5 text-white tracking-tight"
+                  style={{ letterSpacing: '0.02em' }}
+                >
+                  JSM
+                </p>
+                <div className="flex items-center gap-3">
+                  <a
+                    href="https://www.youtube.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="YouTube"
+                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://x.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="X (Twitter)"
+                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://www.instagram.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Instagram"
+                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                      <rect x="3" y="3" width="18" height="18" rx="5" />
+                      <circle cx="12" cy="12" r="4" />
+                      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
+                    </svg>
+                  </a>
+                  <a
+                    href="mailto:bgg8988@gmail.com"
+                    aria-label="Email"
+                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                      <rect x="3" y="5" width="18" height="14" rx="2" />
+                      <path d="m3 7 9 6 9-6" />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+
+              {/* 우 — Link groups */}
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-10">
+                <div>
+                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">SaaS 제품</p>
+                  <ul className="space-y-2.5">
+                    <li><Link href="/packages" className="hover:text-white transition">제품 카탈로그</Link></li>
+                    <li><Link href="/packages" className="hover:text-white transition">출시 알림 신청</Link></li>
+                  </ul>
+                </div>
+                <div>
+                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">AI 음악</p>
+                  <ul className="space-y-2.5">
+                    <li><Link href="/music/packs" className="hover:text-white transition">음악 가이드 패키지</Link></li>
+                    <li><Link href="/music/samples" className="hover:text-white transition">샘플 갤러리</Link></li>
+                    <li><Link href="/music/packs#pricing" className="hover:text-white transition">가격</Link></li>
+                  </ul>
+                </div>
+                <div>
+                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">커스텀 외주</p>
+                  <ul className="space-y-2.5">
+                    <li><Link href="/work/freelance" className="hover:text-white transition">외주 개발</Link></li>
+                    <li><Link href="/work/website" className="hover:text-white transition">웹사이트 제작</Link></li>
+                    <li><Link href="/work/saju" className="hover:text-white transition">AI 사주</Link></li>
+                    <li><a href="mailto:bgg8988@gmail.com" className="hover:text-white transition">문의하기</a></li>
+                  </ul>
+                </div>
+                <div>
+                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">Legal</p>
+                  <ul className="space-y-2.5">
+                    <li><Link href="/legal/terms" className="hover:text-white transition">이용약관</Link></li>
+                    <li><Link href="/legal/privacy" className="hover:text-white transition">개인정보처리방침</Link></li>
+                    <li><Link href="/legal/refund" className="hover:text-white transition">환불 정책</Link></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-12 pt-6 border-t border-white/10 flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/40 leading-relaxed">
+              <span>대표자: 박재오</span>
+              <span>사업자등록번호: 267-53-00822</span>
+              <span>서울시 동작구 여의대방로22아길 22, 1동 109호</span>
+              <span>010-3907-1392</span>
+              <span>bgg8988@gmail.com</span>
+            </div>
+            <p className="mt-3 text-xs text-white/40">© 2026 쟁승메이드. All rights reserved.</p>
+          </div>
+        </footer>
+      </main>
+
+      <KakaoFloatButton />
+    </>
+  );
+}

app/components/PurchaseAgreementModal.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  productName: string;
+  price: string;
+  bankInfo?: {
+    bank: string;
+    account: string;
+    holder: string;
+  };
+}
+
+const DEFAULT_BANK = {
+  bank: '케이뱅크',
+  account: '100-116-337157',
+  holder: '박재오',
+};
+
+export default function PurchaseAgreementModal({
+  isOpen,
+  onClose,
+  productName,
+  price,
+  bankInfo = DEFAULT_BANK,
+}: Props) {
+  const [agreed, setAgreed] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setAgreed(false);
+      setName('');
+      setEmail('');
+      setSent(false);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    if (!agreed || !email || !name.trim()) return;
+    setLoading(true);
+    try {
+      await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          service: `구매 신청: ${productName}`,
+          name: name.trim(),
+          email,
+          phone: '',
+          message: `상품: ${productName} (${price})\n입금자명: ${name.trim()}\n입금 대기 중. 입금 확인 후 이메일로 상품 전달 예정.`,
+        }),
+      });
+      setSent(true);
+    } catch (e) {
+      alert('신청 전송 실패. 다시 시도해주세요.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="bg-gradient-to-br from-slate-900 to-slate-800 px-6 py-5 text-white">
+          <h3 className="font-extrabold text-lg">{productName}</h3>
+          <p className="text-slate-300 text-sm mt-0.5">{price}</p>
+        </div>
+
+        {sent ? (
+          <div className="p-8 text-center">
+            <div className="text-5xl mb-4">✅</div>
+            <h4 className="text-lg font-extrabold text-slate-900 mb-2">신청 완료</h4>
+            <p className="text-sm text-slate-600 leading-relaxed">
+              아래 계좌로 입금해주시면 <strong>24시간 이내</strong> 이메일로 상품을 전달드립니다.
+            </p>
+            <div className="mt-5 bg-slate-50 border border-slate-200 rounded-xl p-4 text-left">
+              <p className="text-xs text-slate-500 mb-1">입금 계좌</p>
+              <p className="font-mono text-sm text-slate-900">
+                {bankInfo.bank} {bankInfo.account}
+              </p>
+              <p className="text-xs text-slate-600 mt-1">예금주 {bankInfo.holder}</p>
+            </div>
+            <button
+              onClick={onClose}
+              className="mt-6 w-full bg-slate-900 text-white py-3 rounded-xl font-bold text-sm hover:bg-slate-800 transition"
+            >
+              닫기
+            </button>
+          </div>
+        ) : (
+          <div className="p-6 space-y-5">
+            <div>
+              <label className="block text-xs font-bold text-slate-700 mb-2">
+                이름 (입금자명과 동일하게)
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="홍길동"
+                className="w-full px-4 py-3 border border-slate-300 rounded-xl text-sm focus:outline-none focus:border-violet-500"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-bold text-slate-700 mb-2">
+                이메일 (상품 전달용)
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="your@email.com"
+                className="w-full px-4 py-3 border border-slate-300 rounded-xl text-sm focus:outline-none focus:border-violet-500"
+              />
+            </div>
+
+            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 text-xs text-slate-700 leading-relaxed">
+              <p className="font-bold text-amber-900 mb-2">📌 구매 전 확인사항</p>
+              <ul className="space-y-1.5 list-disc pl-4">
+                <li>
+                  본 상품은 <strong>디지털 콘텐츠</strong>로, 제공 시작(이메일 전달) 후에는
+                  전자상거래법 제17조 제2항 제5호에 따라 청약철회(환불)가 <strong>제한</strong>됩니다.
+                </li>
+                <li>
+                  구매 전 랜딩 페이지의 <strong>샘플 미리보기·무료 체험 구간</strong>을 반드시 확인해주세요.
+                </li>
+                <li>
+                  파일 손상·전달 누락 등 회사 귀책 사유 시 <strong>즉시 재전달 또는 전액 환불</strong>됩니다.
+                </li>
+                <li>
+                  자세한 내용은{' '}
+                  <Link href="/legal/refund" className="underline text-amber-900 font-bold" target="_blank">
+                    환불 정책
+                  </Link>{' '}
+                  참조.
+                </li>
+              </ul>
+            </div>
+
+            <label className="flex items-start gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={agreed}
+                onChange={(e) => setAgreed(e.target.checked)}
+                className="mt-0.5 w-4 h-4 accent-violet-600"
+              />
+              <span className="text-sm text-slate-700 leading-relaxed">
+                위 환불 제한 사항을 확인했으며, 이에{' '}
+                <strong className="text-slate-900">동의</strong>합니다. (필수)
+              </span>
+            </label>
+
+            <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 text-xs">
+              <p className="font-bold text-slate-900 mb-1">💳 결제 방법: 계좌이체</p>
+              <p className="font-mono text-slate-700">
+                {bankInfo.bank} {bankInfo.account} ({bankInfo.holder})
+              </p>
+              <p className="text-slate-500 mt-2">
+                신청 후 위 계좌로 입금하시면 24시간 이내 이메일 전달.
+              </p>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={onClose}
+                className="flex-1 py-3 border border-slate-300 rounded-xl text-sm font-bold text-slate-700 hover:bg-slate-50"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={!agreed || !email || !name.trim() || loading}
+                className="flex-[2] py-3 bg-violet-600 hover:bg-violet-500 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl text-sm font-bold transition"
+              >
+                {loading ? '전송 중...' : '구매 신청'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/components/TelegramGuideModal.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+/**
+ * TelegramGuideModal
+ * 고객에게 텔레그램 연결 방법을 단계별로 시각적으로 설명하는 모달
+ * - 이미지로 캡처해서 공유하거나 인앱으로 보여줄 수 있음
+ */
+export default function TelegramGuideModal({ onClose }: { onClose: () => void }) {
+  const steps = [
+    {
+      no: 1,
+      title: '마이페이지 접속',
+      desc: '로그인 후 우측 상단 프로필 메뉴 → 마이페이지로 이동합니다.',
+      icon: (
+        <svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+      ),
+      color: 'bg-blue-50 border-blue-200 text-blue-600',
+      dot: 'bg-blue-500',
+      mockup: (
+        <div className="bg-white rounded-xl border border-slate-200 p-3 text-xs shadow-sm">
+          <div className="flex items-center gap-2 mb-3 pb-2 border-b border-slate-100">
+            <div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-violet-500" />
+            <span className="font-semibold text-slate-700">내 계정</span>
+            <span className="ml-auto text-slate-400">▶ 마이페이지</span>
+          </div>
+          <div className="text-slate-500">내 정보 · 결제 내역 · 텔레그램 연동</div>
+        </div>
+      ),
+    },
+    {
+      no: 2,
+      title: '\'내 정보\' 탭 → 텔레그램 연결하기 클릭',
+      desc: '\'내 정보\' 탭의 텔레그램 알림 연동 섹션에서 버튼을 클릭합니다.',
+      icon: (
+        <svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" />
+        </svg>
+      ),
+      color: 'bg-sky-50 border-sky-200 text-sky-600',
+      dot: 'bg-sky-500',
+      mockup: (
+        <div className="bg-white rounded-xl border border-slate-200 p-3 shadow-sm">
+          <div className="text-xs font-semibold text-slate-600 mb-2 flex items-center gap-1">
+            <span className="w-1 h-3.5 bg-sky-400 rounded-full inline-block" />
+            텔레그램 알림 연동
+            <span className="ml-auto text-xs text-slate-400 font-normal">플래티넘 · 다이아</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center">
+                <svg className="w-4 h-4 text-slate-400" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.667l-2.95-.924c-.64-.203-.654-.64.136-.954l11.566-4.458c.538-.194 1.006.131.972.89z"/>
+                </svg>
+              </div>
+              <div>
+                <div className="text-xs font-semibold text-slate-700">연결 안 됨</div>
+                <div className="text-xs text-slate-400">텔레그램으로 번호를 받아보세요</div>
+              </div>
+            </div>
+            <div className="px-3 py-1.5 bg-gradient-to-r from-sky-500 to-blue-600 text-white text-xs font-bold rounded-lg shadow-sm animate-pulse">
+              텔레그램 연결하기
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      no: 3,
+      title: '\'텔레그램 봇 열기\' 버튼 클릭',
+      desc: '연결 코드가 생성되면 파란색 버튼을 클릭합니다. 자동으로 텔레그램 앱이 열립니다.',
+      icon: (
+        <svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      ),
+      color: 'bg-indigo-50 border-indigo-200 text-indigo-600',
+      dot: 'bg-indigo-500',
+      mockup: (
+        <div className="bg-white rounded-xl border border-slate-200 p-3 shadow-sm space-y-2">
+          <div className="bg-sky-50 border border-sky-200 rounded-lg p-2.5">
+            <p className="text-xs font-semibold text-sky-700 mb-1">📱 아래 순서로 진행하세요</p>
+            <ol className="text-xs text-sky-600 space-y-0.5 list-decimal list-inside">
+              <li>아래 버튼으로 텔레그램 봇을 엽니다</li>
+              <li>텔레그램에서 <strong>시작</strong> 버튼을 누릅니다</li>
+              <li>봇 메시지 확인 후 새로고침</li>
+            </ol>
+          </div>
+          <div className="flex items-center justify-center gap-2 py-1">
+            <div className="flex items-center gap-1.5 px-4 py-2 bg-sky-500 text-white text-xs font-bold rounded-lg shadow-sm w-full justify-center">
+              <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.667l-2.95-.924c-.64-.203-.654-.64.136-.954l11.566-4.458c.538-.194 1.006.131.972.89z"/>
+              </svg>
+              텔레그램 봇 열기 ↗
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      no: 4,
+      title: '텔레그램에서 \'시작\' 버튼 클릭',
+      desc: '텔레그램 앱이 열리면 채팅창 하단의 파란 \'시작\' 버튼을 클릭합니다. 자동으로 연결이 완료됩니다.',
+      icon: (
+        <svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.667l-2.95-.924c-.64-.203-.654-.64.136-.954l11.566-4.458c.538-.194 1.006.131.972.89z"/>
+        </svg>
+      ),
+      color: 'bg-sky-50 border-sky-200 text-sky-500',
+      dot: 'bg-sky-400',
+      mockup: (
+        <div className="bg-[#1c2733] rounded-xl p-3 shadow-sm">
+          {/* 텔레그램 UI 모킹 */}
+          <div className="flex items-center gap-2 mb-3 pb-2 border-b border-white/10">
+            <div className="w-7 h-7 rounded-full bg-sky-500 flex items-center justify-center">
+              <svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.667l-2.95-.924c-.64-.203-.654-.64.136-.954l11.566-4.458c.538-.194 1.006.131.972.89z"/>
+              </svg>
+            </div>
+            <div>
+              <div className="text-xs font-semibold text-white">쟁승메이드 로또봇</div>
+              <div className="text-xs text-white/40">bot</div>
+            </div>
+          </div>
+          <div className="bg-[#2b3d52] rounded-lg p-2 text-xs text-white/70 mb-2">
+            안녕하세요! 로또 번호 알림 봇입니다. 아래 시작 버튼을 눌러 계정을 연결하세요.
+          </div>
+          <div className="flex justify-center">
+            <div className="px-6 py-1.5 bg-sky-500 text-white text-xs font-bold rounded-full animate-bounce">
+              시작
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      no: 5,
+      title: '연결 완료!',
+      desc: '봇이 "연결 완료" 메시지를 보냅니다. 마이페이지로 돌아와 \'연결 확인 새로고침\' 버튼을 누르면 완료됩니다.',
+      icon: (
+        <svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ),
+      color: 'bg-emerald-50 border-emerald-200 text-emerald-600',
+      dot: 'bg-emerald-500',
+      mockup: (
+        <div className="space-y-2">
+          <div className="bg-[#1c2733] rounded-xl p-3 shadow-sm">
+            <div className="bg-[#2b3d52] rounded-lg p-2 text-xs text-white/80">
+              🎉 <strong className="text-white">텔레그램 연결 완료!</strong><br />
+              <span className="text-white/60">이제 매주 로또 번호를 이 채팅으로 받아보실 수 있습니다. 🎰</span>
+            </div>
+          </div>
+          <div className="bg-white rounded-xl border border-emerald-200 p-3 shadow-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-sky-50 border border-sky-200 flex items-center justify-center">
+                <svg className="w-4 h-4 text-sky-500" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.667l-2.95-.924c-.64-.203-.654-.64.136-.954l11.566-4.458c.538-.194 1.006.131.972.89z"/>
+                </svg>
+              </div>
+              <div>
+                <div className="text-xs font-semibold text-[#04102b] flex items-center gap-1.5">
+                  연결됨
+                  <span className="w-2 h-2 rounded-full bg-emerald-400 inline-block" />
+                </div>
+                <div className="text-xs text-slate-500">매주 로또 번호 알림 수신 중</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-3xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 헤더 */}
+        <div className="sticky top-0 bg-white rounded-t-3xl border-b border-slate-100 px-6 py-4 flex items-center justify-between z-10">
+          <div>
+            <h2 className="text-base font-extrabold text-[#04102b] flex items-center gap-2">
+              <svg className="w-5 h-5 text-sky-500" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.667l-2.95-.924c-.64-.203-.654-.64.136-.954l11.566-4.458c.538-.194 1.006.131.972.89z"/>
+              </svg>
+              텔레그램 연결 방법
+            </h2>
+            <p className="text-xs text-slate-500 mt-0.5">5단계로 쉽게 연결할 수 있습니다</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 transition text-slate-500 text-sm font-bold"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* 스텝 목록 */}
+        <div className="px-6 py-5 space-y-5">
+          {steps.map((step, idx) => (
+            <div key={step.no} className="relative">
+              {/* 연결선 */}
+              {idx < steps.length - 1 && (
+                <div className="absolute left-5 top-14 w-0.5 h-4 bg-slate-200" />
+              )}
+
+              <div className="flex gap-3">
+                {/* 스텝 번호 + 아이콘 */}
+                <div className={`w-10 h-10 rounded-2xl border-2 flex items-center justify-center flex-shrink-0 ${step.color}`}>
+                  {step.icon}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className={`w-5 h-5 rounded-full text-white text-xs font-extrabold flex items-center justify-center flex-shrink-0 ${step.dot}`}>
+                      {step.no}
+                    </span>
+                    <h3 className="text-sm font-extrabold text-[#04102b] leading-tight">{step.title}</h3>
+                  </div>
+                  <p className="text-xs text-slate-500 leading-relaxed mb-2.5">{step.desc}</p>
+                  {/* 화면 목업 */}
+                  <div className="rounded-xl overflow-hidden">
+                    {step.mockup}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          {/* 안내 메시지 */}
+          <div className="bg-amber-50 border border-amber-200 rounded-2xl p-4">
+            <p className="text-xs font-bold text-amber-700 mb-1.5 flex items-center gap-1.5">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              알아두세요
+            </p>
+            <ul className="text-xs text-amber-600 space-y-1">
+              <li>• 연결 코드는 발급 후 <strong>15분</strong> 이내에 사용해야 합니다</li>
+              <li>• 텔레그램 앱이 설치되어 있어야 합니다 (iOS / Android / PC 모두 가능)</li>
+              <li>• 연결은 언제든 마이페이지에서 해제할 수 있습니다</li>
+              <li>• 플래티넘 · 다이아 구독자만 텔레그램 알림을 받을 수 있습니다</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/TopNav.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useMemo, useState, useEffect } from 'react';
+import { createClient } from '@/lib/supabase/client';
+import type { User } from '@supabase/supabase-js';
+
+const LINKS = [
+  { href: '/packages', label: 'SaaS 제품' },
+  { href: '/music', label: 'AI 음악' },
+  { href: '/work', label: '커스텀 외주' },
+];
+
+export default function TopNav() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const supabase = useMemo(() => createClient(), []);
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  // Supabase auth state subscription (Sidebar.tsx:93-103 패턴)
+  useEffect(() => {
+    let mounted = true;
+    supabase.auth.getSession().then(({ data }) => {
+      if (mounted) setUser(data.session?.user ?? null);
+    });
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (mounted) setUser(session?.user ?? null);
+    });
+    return () => {
+      mounted = false;
+      subscription.unsubscribe();
+    };
+  }, [supabase]);
+
+  const handleLogout = async () => {
+    await supabase.auth.signOut();
+    setOpen(false);
+    router.replace('/');
+    router.refresh();
+  };
+
+  useEffect(() => { setOpen(false); }, [pathname]);
+
+  useEffect(() => {
+    if (open) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = prev; };
+    }
+  }, [open]);
+
+  const isActive = (href: string) => {
+    if (href === '/') return pathname === '/';
+    return pathname === href || pathname.startsWith(href + '/');
+  };
+
+  return (
+    <>
+      <header
+        className={[
+          'fixed left-1/2 -translate-x-1/2 z-50 w-full border-b border-transparent',
+          'md:rounded-full md:border transition-all duration-300 ease-out',
+          scrolled
+            ? 'top-4 max-w-3xl md:shadow-[0_10px_40px_rgba(0,0,0,0.35)] md:border-white/10'
+            : 'top-0 max-w-none',
+        ].join(' ')}
+        style={{
+          background: scrolled ? 'rgba(10,10,12,0.6)' : 'transparent',
+          backdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
+          WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
+        }}
+      >
+      <nav
+        className={[
+          'flex w-full items-center justify-between transition-all duration-300 ease-out',
+          scrolled ? 'h-14 px-4 md:px-3' : 'h-20 px-6 lg:px-12',
+        ].join(' ')}
+      >
+        <Link
+          href="/"
+          className="kx-display text-2xl font-black tracking-tight kx-gradient-text"
+          style={{ textDecoration: 'none', letterSpacing: '0.02em' }}
+        >
+          JSM
+        </Link>
+
+        <div className="hidden md:flex items-center gap-8">
+          {LINKS.map((l) => (
+            <Link
+              key={l.href}
+              href={l.href}
+              className="text-sm font-medium transition-colors"
+              style={{
+                color: isActive(l.href) ? '#fff' : 'var(--kx-on-variant)',
+                borderBottom: isActive(l.href) ? '2px solid var(--kx-primary)' : '2px solid transparent',
+                paddingBottom: 4,
+                textDecoration: 'none',
+              }}
+            >
+              {l.label}
+            </Link>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {user ? (
+            <>
+              <Link
+                href="/mypage"
+                className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
+                style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
+              >
+                마이페이지
+              </Link>
+              <Link
+                href="/music"
+                className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
+                style={{ textDecoration: 'none' }}
+              >
+                Try now
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="hidden sm:inline-flex items-center px-3 py-2 text-sm font-medium transition-colors"
+                style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
+              >
+                로그아웃
+              </button>
+            </>
+          ) : (
+            <>
+              <Link
+                href="/login"
+                className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
+                style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
+              >
+                로그인
+              </Link>
+              <Link
+                href="/music"
+                className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
+                style={{ textDecoration: 'none' }}
+              >
+                Try now
+              </Link>
+            </>
+          )}
+          <button
+            onClick={() => setOpen(true)}
+            aria-label="메뉴 열기"
+            className="md:hidden p-2 rounded-lg"
+            style={{ color: 'var(--kx-on-surface)' }}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </nav>
+      </header>
+
+      {/* 모바일 오버레이 */}
+      {open && (
+        <div
+          className="fixed inset-0 z-[60] md:hidden flex flex-col"
+          style={{ background: 'rgba(6,14,32,0.98)', backdropFilter: 'blur(16px)' }}
+        >
+          <div className="flex items-center justify-between px-6 h-20">
+            <span className="kx-display text-2xl font-black kx-gradient-text" style={{ letterSpacing: '0.02em' }}>JSM</span>
+            <button
+              onClick={() => setOpen(false)}
+              aria-label="메뉴 닫기"
+              className="p-2"
+              style={{ color: 'var(--kx-on-surface)' }}
+            >
+              <svg className="w-6 h-6" 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>
+          <div className="flex-1 flex flex-col gap-2 px-6 pt-6">
+            {LINKS.map((l) => (
+              <Link
+                key={l.href}
+                href={l.href}
+                className="kx-display text-2xl font-bold py-3"
+                style={{
+                  color: isActive(l.href) ? 'var(--kx-primary)' : 'var(--kx-on-surface)',
+                  textDecoration: 'none',
+                }}
+              >
+                {l.label}
+              </Link>
+            ))}
+            <div className="mt-6 flex flex-col gap-2">
+              {user ? (
+                <>
+                  <div className="flex gap-3">
+                    <Link
+                      href="/mypage"
+                      className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                      style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
+                    >
+                      마이페이지
+                    </Link>
+                    <Link
+                      href="/music"
+                      className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+                      style={{ textDecoration: 'none' }}
+                    >
+                      Try now
+                    </Link>
+                  </div>
+                  <button
+                    onClick={handleLogout}
+                    className="w-full py-3 text-center text-sm font-medium transition-colors"
+                    style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
+                  >
+                    로그아웃
+                  </button>
+                </>
+              ) : (
+                <div className="flex gap-3">
+                  <Link
+                    href="/login"
+                    className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                    style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
+                  >
+                    로그인
+                  </Link>
+                  <Link
+                    href="/music"
+                    className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+                    style={{ textDecoration: 'none' }}
+                  >
+                    Try now
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/globals.css

@@ -1,31 +1,258 @@
 @import "tailwindcss";
 
+/* ─── CookieRun Font (상업적 이용 가능 라이선스) ─── */
+@font-face {
+  font-family: 'CookieRun';
+  src: url('/fonts/CookieRun-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'CookieRun';
+  src: url('/fonts/CookieRun-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'CookieRun';
+  src: url('/fonts/CookieRun-Black.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-  --primary: #1e40af;
-  --primary-light: #3b82f6;
-  --accent: #10b981;
-  --dark: #0f172a;
+  --background: #f0f5ff;
+  --foreground: #04102b;
+  --primary: #1a56db;
+  --primary-hover: #1e4fc2;
+  --secondary: #4338ca;
+  --secondary-hover: #3730a3;
+  --sidebar-bg: #04102b;
+  --card-bg: #ffffff;
+  --border: #dbe8ff;
+
+  /* ─── Kinetic Ether Tokens (다크 테마 섹션 전용) ─── */
+  --kx-surface: #060e20;
+  --kx-surface-low: #091328;
+  --kx-surface-mid: #0f1930;
+  --kx-surface-high: #141f38;
+  --kx-surface-bright: #1f2b49;
+  --kx-on-surface: #dee5ff;
+  --kx-on-variant: #a3aac4;
+  --kx-primary: #cc97ff;
+  --kx-primary-dim: #9c48ea;
+  --kx-secondary: #53ddfc;
+  --kx-secondary-dim: #40ceed;
+  --kx-outline: rgba(64, 72, 93, 0.15);
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-primary: var(--primary);
-  --color-primary-light: var(--primary-light);
-  --color-accent: var(--accent);
-  --color-dark: var(--dark);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-secondary: var(--secondary);
+  --font-sans: var(--font-jua), 'Jua', -apple-system, system-ui, sans-serif;
+  --font-mono: var(--font-jua), 'Jua', ui-monospace, monospace;
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
+* {
+  box-sizing: border-box;
 }
 
 html {
   scroll-behavior: smooth;
 }
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-jua), 'Jua', -apple-system, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* font-mono utility → Jua 통일 */
+.font-mono, code, pre, kbd, samp {
+  font-family: var(--font-jua), 'Jua', ui-monospace, monospace;
+}
+
+/* Dashboard layout */
+.dashboard-layout {
+  display: flex;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--background);
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 0;
+}
+
+/* Gradient text utility */
+.gradient-text {
+  background: linear-gradient(135deg, #2563eb, #7c3aed);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ─── Kinetic Ether 유틸리티 ─── */
+.kx-section {
+  background: var(--kx-surface);
+  color: var(--kx-on-surface);
+  font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
+}
+.kx-section p, .kx-section li, .kx-section span:not(.kx-label) {
+  color: var(--kx-on-variant);
+}
+.kx-display {
+  font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
+  letter-spacing: -0.01em;
+  color: inherit;
+}
+.kx-label {
+  font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--kx-secondary);
+}
+.kx-folder {
+  background: var(--kx-surface-mid);
+  border-radius: 0.75rem 0.75rem 0.125rem 0.125rem;
+  padding: 1.5rem;
+  position: relative;
+}
+.kx-folder::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(204,151,255,0.3), transparent);
+}
+.kx-glass {
+  background: rgba(25, 37, 64, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 1rem;
+}
+.kx-glow {
+  box-shadow: 0 0 40px 0 rgba(156, 72, 234, 0.25),
+              0 0 80px 0 rgba(83, 221, 252, 0.08);
+}
+.kx-btn-primary {
+  background: linear-gradient(135deg, #cc97ff 0%, #c284ff 100%);
+  color: #0b0113;
+  font-weight: 700;
+  box-shadow: 0 0 20px 0 rgba(168, 85, 247, 0.4);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.kx-btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 0 28px 0 rgba(168, 85, 247, 0.55);
+}
+.kx-btn-ghost {
+  color: var(--kx-secondary);
+  background: transparent;
+  transition: background 0.15s ease;
+}
+.kx-btn-ghost:hover {
+  background: var(--kx-surface-bright);
+}
+.kx-gradient-text {
+  background: linear-gradient(135deg, #cc97ff 0%, #53ddfc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.kx-orb {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(80px);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* Service card hover */
+.service-card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.service-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12);
+}
+
+/* Scroll reveal animations */
+.reveal {
+  opacity: 0;
+  transform: translateY(1.5rem);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.reveal-d1 { transition-delay: 80ms; }
+.reveal-d2 { transition-delay: 160ms; }
+.reveal-d3 { transition-delay: 240ms; }
+.reveal-d4 { transition-delay: 320ms; }
+.reveal-d5 { transition-delay: 400ms; }
+
+/* Marquee */
+@keyframes marquee-left {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+@keyframes marquee-right {
+  0% { transform: translateX(-50%); }
+  100% { transform: translateX(0); }
+}
+.marquee-track {
+  display: flex;
+  width: max-content;
+  gap: 1.25rem;
+  animation: marquee-left 60s linear infinite;
+  will-change: transform;
+}
+.marquee-track-reverse {
+  animation-name: marquee-right;
+  animation-duration: 75s;
+}
+.marquee-viewport:hover .marquee-track {
+  animation-play-state: paused;
+}
+.marquee-mask {
+  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* 가로 스크롤 탭바 등에서 스크롤바 시각 숨김 (mypage 7-tab 모바일) */
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

app/gyeol/components/IntroStep.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+interface Props {
+  onStart: () => void;
+}
+
+/**
+ * 인트로 step — CONTOUR 로고 + 한글 부제 + 시작 버튼.
+ * spec design PNG 1번째 화면 참조.
+ */
+export default function IntroStep({ onStart }: Props) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center px-6 text-center text-white">
+      {/* 로고 */}
+      <div className="mb-10">
+        <h1
+          className="kx-display text-5xl md:text-7xl font-black tracking-[0.15em] mb-4"
+          style={{
+            background: 'linear-gradient(135deg, #cc97ff 0%, #53ddfc 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text',
+          }}
+        >
+          CONTOUR
+        </h1>
+        <p className="text-base md:text-lg text-white/70 leading-relaxed">
+          나를 더 선명하게 이해하는 3분
+        </p>
+      </div>
+
+      {/* 시작 버튼 */}
+      <button
+        type="button"
+        onClick={onStart}
+        className="kx-btn-primary px-10 py-3 rounded-full text-base font-bold"
+      >
+        시작하기
+      </button>
+
+      <p className="mt-6 text-xs text-white/40 font-mono">7 질문 · 약 3분</p>
+    </div>
+  );
+}

app/gyeol/components/ProgressBar.tsx

@@ -0,0 +1,34 @@
+import { QUESTION_STEPS, TOTAL_QUESTIONS, type SurveyStep } from '@/lib/survey/types';
+
+interface Props {
+  step: SurveyStep;
+}
+
+/**
+ * 상단 진행률 바.
+ * intro/thanks에서는 렌더링 안 됨 (질문 step 만 표시).
+ */
+export default function ProgressBar({ step }: Props) {
+  const idx = QUESTION_STEPS.indexOf(step as 'q1');
+  if (idx < 0) return null;
+
+  const current = idx + 1;
+  const percent = (current / TOTAL_QUESTIONS) * 100;
+
+  return (
+    <div className="w-full max-w-md mx-auto mb-8">
+      <div className="flex items-center justify-between mb-2 text-white/60 text-xs font-mono tracking-widest">
+        <span>{current}/{TOTAL_QUESTIONS}</span>
+      </div>
+      <div className="h-[2px] bg-white/10 rounded-full overflow-hidden">
+        <div
+          className="h-full transition-all duration-500 ease-out"
+          style={{
+            width: `${percent}%`,
+            background: 'linear-gradient(90deg, #cc97ff 0%, #53ddfc 100%)',
+          }}
+        />
+      </div>
+    </div>
+  );
+}

app/gyeol/components/Q1Step.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { AGE_RANGES, STATUSES } from '@/lib/survey/questions';
+import type { SurveyResponse } from '@/lib/survey/types';
+import QuestionLayout from './QuestionLayout';
+
+interface Props {
+  initial: Partial<SurveyResponse>;
+  onPrev: () => void;
+  onNext: (partial: Partial<SurveyResponse>) => void;
+}
+
+export default function Q1Step({ initial, onPrev, onNext }: Props) {
+  const [age, setAge] = useState(initial.age_range ?? '');
+  const [status, setStatus] = useState(initial.status ?? '');
+
+  const valid = age && status;
+
+  return (
+    <QuestionLayout
+      step="q1"
+      onPrev={onPrev}
+      onNext={() => onNext({ age_range: age, status })}
+      nextDisabled={!valid}
+    >
+      <div className="space-y-4">
+        <div>
+          <label className="block text-xs text-white/60 mb-2 font-mono tracking-widest uppercase">
+            나이대
+          </label>
+          <select
+            value={age}
+            onChange={(e) => setAge(e.target.value)}
+            className="w-full px-4 py-3 rounded-xl bg-white/[0.04] border border-white/15 text-white focus:border-white/40 focus:outline-none"
+          >
+            <option value="" disabled>선택해주세요</option>
+            {AGE_RANGES.map((a) => (
+              <option key={a} value={a} className="bg-black">{a}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-xs text-white/60 mb-2 font-mono tracking-widest uppercase">
+            지금 상황
+          </label>
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="w-full px-4 py-3 rounded-xl bg-white/[0.04] border border-white/15 text-white focus:border-white/40 focus:outline-none"
+          >
+            <option value="" disabled>선택해주세요</option>
+            {STATUSES.map((s) => (
+              <option key={s} value={s} className="bg-black">{s}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </QuestionLayout>
+  );
+}

app/gyeol/components/Q2Step.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import { AWARENESS_FREQS } from '@/lib/survey/questions';
+import type { SurveyResponse } from '@/lib/survey/types';
+import QuestionLayout from './QuestionLayout';
+
+interface Props {
+  initial: Partial<SurveyResponse>;
+  onPrev: () => void;
+  onNext: (partial: Partial<SurveyResponse>) => void;
+}
+
+export default function Q2Step({ initial, onPrev, onNext }: Props) {
+  const [value, setValue] = useState(initial.awareness_freq ?? '');
+
+  return (
+    <QuestionLayout
+      step="q2"
+      onPrev={onPrev}
+      onNext={() => onNext({ awareness_freq: value })}
+      nextDisabled={!value}
+    >
+      <div className="space-y-2">
+        {AWARENESS_FREQS.map((option) => (
+          <label
+            key={option}
+            className={`flex items-center gap-3 px-4 py-3.5 rounded-xl border cursor-pointer transition ${
+              value === option
+                ? 'border-violet-400 bg-violet-400/10'
+                : 'border-white/15 bg-white/[0.02] hover:border-white/30'
+            }`}
+          >
+            <input
+              type="radio"
+              name="awareness_freq"
+              value={option}
+              checked={value === option}
+              onChange={() => setValue(option)}
+              className="sr-only"
+            />
+            <span
+              className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
+                value === option ? 'border-violet-400' : 'border-white/30'
+              }`}
+            >
+              {value === option && <span className="w-2 h-2 rounded-full bg-violet-400" />}
+            </span>
+            <span className="text-sm text-white">{option}</span>
+          </label>
+        ))}
+      </div>
+    </QuestionLayout>
+  );
+}