# 쟁승메이드 (JaengseungMade) — 프리미엄 개발 서비스 사이트 ## 프로젝트 개요 7년차 대기업 백엔드 개발자 **박재오**가 운영하는 개발 부업 사이트. 고객 맞춤형 서비스를 외주 개발하거나, 이미 완성된 솔루션을 계좌이체 구매 형태로 제공한다. ## 운영자 정보 - 이름: 박재오 - 경력: 7년차 대기업 백엔드 개발자 - 이메일: bgg8988@gmail.com - 연락처: 010-3907-1392 - NAS 개인 서버: 로또 랩, 주식 자동매매 프로그램 등 실제 서비스 운영 중 ## 핵심 IA (공개 라우트) | 경로 | 설명 | |------|------| | `/` | 메인 — 외주 개발 + 완성 소프트웨어 2축 소개 | | `/outsourcing` | 외주 개발 — 4단계 의뢰 폼 · 프로세스 · 포트폴리오 · FAQ | | `/products` | 완성 소프트웨어 목록 — 계좌이체 구매 | | `/products/[id]` | 제품 상세 — 구매 신청·결제 안내 | | `/showcase` | 제작 사례 — 웹 데모 8종 + 실서비스 운영 사례 | | `/work/saju` | 사주 분석 — 공개 AI 사주 (로그인 시 무료 해석 1회/일) | | `/tarot` | 타로 — 3카드 셔플·해석 (비로그인 카드 리딩, 로그인 AI 인사이트) | | `/music` | 공개 음악 — 스토리→음악 AI 스튜디오 (studio·samples, 로그인 시 생성·저장) | | `/track/[token]` | 비회원 의뢰 진행 추적 | | `/quote/[token]` | 공개 견적 — 고객 수락/거절 | | `/login` | 로그인 (`?next=` 리다이렉트 지원) | | `/mypage` | 5탭: 프로필 / 발주·진행(발주서·마일스톤·견적코드 연결) / 내 제품(다운로드) / 주문 내역 / AI 기록(사주·타로·음악 병합) | | `/legal/*` | 이용약관 · 개인정보처리방침 · 환불정책 | ## 숨김 서비스 (admin_token 세션 전용) `service_settings` 테이블 토글 + `lib/service-visibility.ts` 가드로 접근 제한. admin/services 패널에서 ON/OFF 전환 가능. | 경로 | 서비스 | |------|--------| | `/gyeol` | CONTOUR PMF 설문 | ## 기술 스택 - **Framework**: Next.js 16 (App Router, TypeScript) - **Styling**: Tailwind CSS v4 - **DB**: Supabase (클라우드 + NAS self-host 이중 운영) - **Email**: Resend (`RESEND_API_KEY`) — 문의 접수·주문 확인·견적 발송 메일 - **Analytics**: Google Analytics G-WG77RNHXRK - **Test**: vitest (`npm test`) — lib 단위 테스트 - **Deployment**: Vercel (NAS self-host 전환 진행 중, 컷오버 전 Vercel 운영) ## 디자인 시스템 (`--jsm-*` 토큰) ### CSS 변수 | 토큰 | 값 | 역할 | |------|----|------| | `--jsm-bg` | `#f8fafc` | 페이지 배경 | | `--jsm-surface` | `#ffffff` | 카드·패널 배경 | | `--jsm-ink` | `#0f172a` | 본문 텍스트 | | `--jsm-line` | `#e2e8f0` | 구분선·테두리 | | `--jsm-navy` | `#0b1f3a` | 헤더·강조 배경 | | `--jsm-accent` | `#1d4ed8` | 단일 포인트 컬러 (버튼·링크) | ### 레이아웃 - 상단 네비(`TopNav`) + 푸터 포함 `PublicShell` 기업형 레이아웃 - Pretendard 폰트 ### 금지 가이드레일 - gradient / blur / 보라(violet/purple) 계열 색상 사용 금지 - 이모지 사용 금지 (UI 내) - `--jsm-*` 토큰 외 임의 색상 변수 추가 금지 ## 파일 구조 ``` app/ layout.tsx — 루트 레이아웃 (메타데이터·폰트·GA·PublicShell) page.tsx — 메인 (2축 랜딩) globals.css — 전역 스타일 + --jsm-* CSS 변수 components/ — 공용 UI (TopNav, PublicShell, ContactForm 등) outsourcing/page.tsx — 외주 의뢰 페이지 products/ page.tsx — 완성 소프트웨어 목록 [id]/page.tsx — 제품 상세 + 구매 신청 track/[token]/page.tsx — 비회원 의뢰 추적 quote/[token]/page.tsx — 공개 견적 수락/거절 login/page.tsx — 로그인 (?next= 지원) mypage/page.tsx — 마이페이지 4탭 legal/ — privacy / terms / refund showcase/page.tsx — 제작 사례 허브 (웹 데모 8종 + 실서비스 운영 사례) admin/ — 관리자 전용 (dashboard·members·services·orders·products·contacts·quotes·marketing(광고 관리: 채널 CRUD + 에셋)·...) api/ contact/route.ts — POST: 의뢰 접수 (public_token 발급 + 고객 메일) orders/route.ts — POST: 주문 생성(pending) quote/[token]/route.ts — GET/POST: 견적 조회·수락/거절 admin/quotes/[id]/send/route.ts — 견적 발송 (메일 + 'quoted' 상태 동기화) admin/ad-channels/ — 광고 채널 CRUD (ad_channels 테이블) saju/analyze/route.ts — 사주 AI 분석 (Gemini) tarot/interpret/route.ts — 타로 AI 인사이트 (로그인·일 3회 제한) tarot/readings/route.ts — 타로 리딩 저장·조회 (tarot_readings) studio/story/route.ts — POST: 스토리→가사 생성 (Gemini, 로그인 필요) studio/tracks/route.ts — GET/POST: 음악 트랙 저장·조회 (music_tracks, 본인 것만·video 상태 포함) studio/callback/route.ts — POST: Suno webhook 수신용 최소 엔드포인트 studio/video-product/route.ts — GET: 음악 영상화(music_video) 제품 조회 (로그인, 모달 가격 표시용) work/saju/ — 공개: 사주 서비스 (로그인 시 AI 해석 무료 1회/일) tarot/ — 공개: 타로 3카드 (셔플·reference·AI 해석) music/ — 공개: 스토리→음악 AI 스튜디오 (studio·samples, packs는 /products로 308) gyeol/ — 숨김: CONTOUR PMF 설문 lib/ service-visibility.ts — 숨김 서비스 접근 가드 product-access.ts — orders→제품 접근 확장 (music tier 하위 호환) request-status.ts — 의뢰 상태 머신 단일 소스 order-emails.ts — 주문 관련 Resend 메일 request-emails.ts — 의뢰 관련 Resend 메일 supabase/ product-files.ts — 제품·파일 조회 pack-files.ts — 레거시 팩 파일 saju-calculator.ts — 사주팔자 계산 (검증 완료) solar-terms.ts — 절기 계산 ai-interpretation.ts — 사주 AI 해석·용신 추정 ai-usage.ts — AI 기능 일일 사용량 제한 (ai_usage_log 테이블) tarot/ cards.ts — 타로 78장 카드 데이터 shuffle.ts — 셔플·3카드 드로우 로직 reference.ts — 카드 의미 레퍼런스 prompt.ts — AI 해석 프롬프트 music/ story-prompt.ts — 스토리→가사 AI 프롬프트 (시스템 프롬프트·JSON 파싱·검증) ``` --- ## 외주 플로우 (의뢰 상태 머신) ``` 고객 의뢰 (/api/contact) → public_token 발급 + 고객 접수 메일 → admin/contacts 수신 ↓ pending → reviewing → quoted ──→ accepted ──→ in_progress → completed ↓ ↓ on_hold on_hold ↓ cancelled (어느 단계에서도 가능) ``` | 전환 | 트리거 | |------|--------| | `pending → reviewing` | 관리자 확인 | | `reviewing → quoted` | 관리자 견적 작성 + `/api/admin/quotes/[id]/send` 발송 (메일 + 상태 동기화) | | `quoted → accepted` | 고객 `/quote/[token]` 수락 (관리자 메일 알림) | | `quoted → on_hold` | 고객 `/quote/[token]` 거절 | | `accepted → in_progress` | 관리자 착수 처리 | | `in_progress → completed` | 관리자 완료 처리 | --- ## 결제 플로우 (계좌이체 단일 소스) ``` 고객 구매 신청 (/products/[id]) → POST /api/orders → orders 레코드 생성 (status: pending) → 입금 안내 메일 발송 (케이뱅크 100-116-337157 박재오) 관리자 입금 확인 (/admin/orders) → orders.status: pending → paid → 다운로드 링크 메일 발송 고객 다운로드 (/mypage → 내 제품 탭) → POST /api/packs/sign-link → DSM 서명 링크 (4시간 TTL) ``` - `lib/product-access.ts`: orders 기반 접근 + music tier 하위 호환 ### 음악 영상화 발주 (music_video, 유료 계좌이체) — Phase 3b ``` 회원이 저장한 음악 트랙 (마이페이지 → AI 기록 탭 음악 카드) → "영상화 신청" → GET /api/studio/video-product (고정가 ₩30,000) → BankTransferModal (musicTrackId 전달) → POST /api/orders {productId:'music_video', musicTrackId} → orders 생성 (metadata.music_track_id) + music_tracks.video_status='requested' → 입금 안내 메일 (기존 계좌이체 흐름 재사용) 관리자 납품 (/admin/orders) → music_video 주문에 연결 트랙(title·audio) 표시 → 영상 URL 입력 + "납품 완료" → PATCH {id, status:'paid', videoUrl} → music_tracks.video_url 세팅 + video_status='delivered' → (선택) "제작 중" → PATCH {id, videoStatus:'in_progress'} 고객 확인 (마이페이지 음악 카드) → video_status 뱃지(requested/in_progress) → delivered 시