first commit
bluebamus
commit
086d898b68
|
|
@ -0,0 +1,30 @@
|
||||||
|
FROM ubuntu:24.04
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
ENV DEBIAN_FRONTEND=noninteractive
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
|
||||||
|
# 시스템 패키지 설치
|
||||||
|
RUN apt-get update && apt-get install -y \
|
||||||
|
curl \
|
||||||
|
wget \
|
||||||
|
gnupg \
|
||||||
|
lsb-release \
|
||||||
|
apt-transport-https \
|
||||||
|
ca-certificates \
|
||||||
|
git \
|
||||||
|
build-essential \
|
||||||
|
python3 \
|
||||||
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
# Node.js 및 npm 설치
|
||||||
|
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
|
||||||
|
apt-get install -y nodejs && \
|
||||||
|
rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
# 포트 개방
|
||||||
|
EXPOSE 3000 3001
|
||||||
|
|
||||||
|
# 컨테이너 실행 상태 유지
|
||||||
|
CMD ["tail", "-f", "/dev/null"]
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
# ============================================
|
||||||
|
# CaStAD v3.2.0 개발 환경 설정 파일
|
||||||
|
# ============================================
|
||||||
|
# 이 파일을 .env로 복사하여 사용하세요
|
||||||
|
# cp .env.example .env
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔧 기본 설정 (Basic Configuration)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Node 환경 설정
|
||||||
|
# - development: 개발 모드 (상세 로그, 핫 리로딩)
|
||||||
|
# - production: 프로덕션 모드 (최적화, 보안 강화)
|
||||||
|
NODE_ENV=development
|
||||||
|
|
||||||
|
# 백엔드 서버 포트 (Express.js)
|
||||||
|
# - 기본값: 3001
|
||||||
|
# - Vite 프록시가 이 포트로 API 요청을 전달합니다
|
||||||
|
PORT=3001
|
||||||
|
|
||||||
|
# JWT 인증 시크릿 키
|
||||||
|
# - 사용자 인증 토큰 생성에 사용
|
||||||
|
# - 프로덕션에서는 반드시 복잡한 랜덤 문자열로 변경하세요!
|
||||||
|
# - 예: openssl rand -base64 32
|
||||||
|
JWT_SECRET=dev-secret-key-change-in-production
|
||||||
|
|
||||||
|
# URL 설정 (개발 환경)
|
||||||
|
# - FRONTEND_URL: 프론트엔드 URL (Vite 개발 서버)
|
||||||
|
# - BACKEND_URL: 백엔드 API URL
|
||||||
|
# - ALLOWED_ORIGINS: CORS 허용 도메인 (쉼표로 구분)
|
||||||
|
FRONTEND_URL=http://localhost:5173
|
||||||
|
BACKEND_URL=http://localhost:3001
|
||||||
|
ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔑 필수 API 키 (Required APIs)
|
||||||
|
# ============================================
|
||||||
|
# 이 키들이 없으면 핵심 기능이 작동하지 않습니다
|
||||||
|
|
||||||
|
# Google Gemini AI API
|
||||||
|
# - 용도: AI 텍스트 생성, 마케팅 문구 작성, AI 매직 라이트
|
||||||
|
# - 발급: https://ai.google.dev/ (Google AI Studio)
|
||||||
|
# - 무료 할당량: 분당 60회 요청
|
||||||
|
# - 참고: 서버와 프론트엔드 모두에서 사용 (VITE_ 접두사 필요)
|
||||||
|
VITE_GEMINI_API_KEY=your-gemini-api-key
|
||||||
|
|
||||||
|
# Suno AI API
|
||||||
|
# - 용도: AI 음악 생성 (배경음악, 광고 음악)
|
||||||
|
# - 발급: https://suno.ai/ 또는 프록시 서비스 사용
|
||||||
|
# - 프록시 예시: https://github.com/gcui-art/suno-api
|
||||||
|
SUNO_API_KEY=your-suno-api-key
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🎪 축제 연동 API (Festival Integration)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# 한국관광공사 Tour API
|
||||||
|
# - 용도: 전국 축제/행사 정보 조회, 지역별 축제 연동
|
||||||
|
# - 발급: https://api.visitkorea.or.kr/ (회원가입 후 키 발급)
|
||||||
|
# - 무료 할당량: 일 1,000회
|
||||||
|
# - 서비스: KorService2 (최신 버전)
|
||||||
|
TOURAPI_KEY=your-tour-api-key
|
||||||
|
TOURAPI_ENDPOINT=https://apis.data.go.kr/B551011/KorService2
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📍 지오코딩 API (Geocoding)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Kakao REST API
|
||||||
|
# - 용도: 주소 → 좌표 변환, 펜션 위치 기반 근처 축제 검색
|
||||||
|
# - 발급: https://developers.kakao.com/ (앱 생성 후 REST API 키)
|
||||||
|
# - 무료 할당량: 일 30,000회
|
||||||
|
KAKAO_REST_KEY=your-kakao-rest-api-key
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📺 YouTube 업로드 (YouTube Upload)
|
||||||
|
# ============================================
|
||||||
|
# OAuth 2.0 방식 - 사용자별 개인 채널 연동
|
||||||
|
|
||||||
|
# YouTube OAuth 설정
|
||||||
|
# - 설정 파일: server/client_secret.json
|
||||||
|
# - 발급 방법:
|
||||||
|
# 1. Google Cloud Console (https://console.cloud.google.com)
|
||||||
|
# 2. "사용자 인증 정보" → "OAuth 2.0 클라이언트 ID" 생성
|
||||||
|
# 3. 리디렉션 URI 추가: http://localhost:3001/api/youtube/oauth/callback
|
||||||
|
# 4. JSON 다운로드 → server/client_secret.json으로 저장
|
||||||
|
# - 주의: 개발/테스트 앱은 "Google에서 확인하지 않은 앱" 경고가 표시됨
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📊 Google Cloud Billing (선택)
|
||||||
|
# ============================================
|
||||||
|
# BigQuery를 통한 클라우드 비용 분석
|
||||||
|
|
||||||
|
# Google Cloud Billing 설정
|
||||||
|
# - 용도: API 사용량 비용 추적, 비용 분석 대시보드
|
||||||
|
# - 전제 조건:
|
||||||
|
# 1. Google Cloud 프로젝트에서 결제 내보내기 → BigQuery 설정
|
||||||
|
# 2. 서비스 계정 생성 (BigQuery 읽기 권한)
|
||||||
|
# 3. 서비스 계정 키 JSON 다운로드
|
||||||
|
# - KEY_PATH: 서비스 계정 키 파일 경로
|
||||||
|
# - PROJECT_ID: Google Cloud 프로젝트 ID
|
||||||
|
# - DATASET_ID: BigQuery 데이터셋 ID
|
||||||
|
GOOGLE_BILLING_KEY_PATH=./server/google-billing-key.json
|
||||||
|
GOOGLE_CLOUD_PROJECT_ID=your-project-id
|
||||||
|
GOOGLE_BILLING_DATASET_ID=billing_export
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📧 이메일 서비스 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Resend 이메일 API
|
||||||
|
# - 용도: 비밀번호 재설정, 알림 이메일 발송
|
||||||
|
# - 발급: https://resend.com/ (가입 후 API 키 발급)
|
||||||
|
# - 무료 할당량: 월 100통
|
||||||
|
# - 설정 안 하면 이메일 기능 비활성화 (앱은 정상 작동)
|
||||||
|
RESEND_API_KEY=your-resend-api-key
|
||||||
|
RESEND_FROM_EMAIL=CastAD <noreply@yourdomain.com>
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔐 소셜 로그인 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Google OAuth 로그인
|
||||||
|
# - 용도: "Google로 로그인" 기능
|
||||||
|
# - 발급: Google Cloud Console → 사용자 인증 정보 → OAuth 2.0
|
||||||
|
# - 리디렉션 URI: http://localhost:3001/auth/google/callback
|
||||||
|
GOOGLE_CLIENT_ID=your-google-client-id
|
||||||
|
GOOGLE_CLIENT_SECRET=your-google-client-secret
|
||||||
|
|
||||||
|
# Naver OAuth 로그인
|
||||||
|
# - 용도: "네이버로 로그인" 기능
|
||||||
|
# - 발급: https://developers.naver.com/ → 애플리케이션 등록
|
||||||
|
# - 리디렉션 URI: http://localhost:3001/auth/naver/callback
|
||||||
|
NAVER_CLIENT_ID=your-naver-client-id
|
||||||
|
NAVER_CLIENT_SECRET=your-naver-client-secret
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📱 SNS 연동 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Instagram 서비스 (Python 마이크로서비스)
|
||||||
|
# - 용도: Instagram 자동 업로드
|
||||||
|
# - 별도 설치 필요: server/instagram-service/
|
||||||
|
# - 의존성: Python 3.8+, Fernet 암호화
|
||||||
|
INSTAGRAM_SERVICE_URL=http://localhost:5001
|
||||||
|
INSTAGRAM_SERVICE_PORT=5001
|
||||||
|
INSTAGRAM_ENCRYPTION_KEY=your-fernet-encryption-key
|
||||||
|
|
||||||
|
# TikTok API
|
||||||
|
# - 용도: TikTok 영상 업로드
|
||||||
|
# - 발급: https://developers.tiktok.com/ → 앱 생성
|
||||||
|
# - 리디렉션 URI: http://localhost:3001/api/tiktok/oauth/callback
|
||||||
|
TIKTOK_CLIENT_KEY=your-tiktok-client-key
|
||||||
|
TIKTOK_CLIENT_SECRET=your-tiktok-client-secret
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔧 기타 설정 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Naver 크롤링 쿠키 (선택)
|
||||||
|
# - 용도: 네이버 지도에서 펜션 정보/사진 크롤링
|
||||||
|
# - 획득 방법: 브라우저 개발자 도구 (F12) → Application → Cookies에서 복사
|
||||||
|
# - 주의: 쿠키 만료 시 재설정 필요 (또는 관리자 대시보드에서 설정)
|
||||||
|
# NAVER_COOKIES="NNB=xxx; JSESSIONID=xxx"
|
||||||
|
|
||||||
|
# Instagram 크롤링 쿠키 (선택)
|
||||||
|
# - 용도: 인스타그램 프로필에서 펜션 사진 크롤링
|
||||||
|
# - 획득 방법: 인스타그램 로그인 후 개발자 도구에서 쿠키 복사
|
||||||
|
# - 필수 쿠키: sessionid, csrftoken, ds_user_id
|
||||||
|
# - 주의: 쿠키 만료 시 재설정 필요 (또는 관리자 대시보드에서 설정)
|
||||||
|
# INSTAGRAM_COOKIES="sessionid=xxx; csrftoken=xxx; ds_user_id=xxx"
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📝 설정 체크리스트
|
||||||
|
# ============================================
|
||||||
|
# 최소 필수 설정 (앱 실행에 필요):
|
||||||
|
# ✅ JWT_SECRET
|
||||||
|
# ✅ VITE_GEMINI_API_KEY
|
||||||
|
# ✅ SUNO_API_KEY
|
||||||
|
#
|
||||||
|
# 권장 설정 (주요 기능 활성화):
|
||||||
|
# ⬜ TOURAPI_KEY (축제 연동)
|
||||||
|
# ⬜ KAKAO_REST_KEY (위치 기반 축제 검색)
|
||||||
|
# ⬜ YouTube client_secret.json (YouTube 업로드)
|
||||||
|
#
|
||||||
|
# 선택 설정 (부가 기능):
|
||||||
|
# ⬜ RESEND_API_KEY (이메일 발송)
|
||||||
|
# ⬜ GOOGLE_CLIENT_ID/SECRET (Google 로그인)
|
||||||
|
# ⬜ NAVER_CLIENT_ID/SECRET (네이버 로그인)
|
||||||
|
# ⬜ TIKTOK_CLIENT_KEY/SECRET (TikTok 업로드)
|
||||||
|
# ⬜ INSTAGRAM_* (Instagram 업로드)
|
||||||
|
# ⬜ GOOGLE_BILLING_* (비용 분석)
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
# ============================================
|
||||||
|
# CaStAD v3.2.0 프로덕션 환경 설정 파일
|
||||||
|
# ============================================
|
||||||
|
# 도메인: castad1.ktenterprise.net
|
||||||
|
# 서버 배포 시 이 파일을 .env로 복사하여 사용
|
||||||
|
# cp .env.production.example .env
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔧 기본 설정 (Basic Configuration)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Node 환경 - 반드시 production으로 설정
|
||||||
|
NODE_ENV=production
|
||||||
|
|
||||||
|
# 백엔드 서버 포트
|
||||||
|
# - nginx가 이 포트로 프록시합니다
|
||||||
|
PORT=3001
|
||||||
|
|
||||||
|
# JWT 인증 시크릿 키
|
||||||
|
# - ⚠️ 반드시 복잡한 랜덤 문자열로 변경하세요!
|
||||||
|
# - 생성 명령: openssl rand -base64 32
|
||||||
|
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
|
||||||
|
|
||||||
|
# URL 설정 (프로덕션)
|
||||||
|
# - 실제 도메인으로 설정
|
||||||
|
# - HTTPS 필수
|
||||||
|
ALLOWED_ORIGINS=https://castad1.ktenterprise.net
|
||||||
|
FRONTEND_URL=https://castad1.ktenterprise.net
|
||||||
|
BACKEND_URL=https://castad1.ktenterprise.net
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔑 필수 API 키 (Required APIs)
|
||||||
|
# ============================================
|
||||||
|
# ⚠️ 이 키들이 없으면 핵심 기능이 작동하지 않습니다
|
||||||
|
|
||||||
|
# Google Gemini AI API
|
||||||
|
# - 용도: AI 텍스트 생성, 마케팅 문구 작성, AI 매직 라이트
|
||||||
|
# - 발급: https://ai.google.dev/ (Google AI Studio)
|
||||||
|
# - 무료 할당량: 분당 60회 요청, 일 1,500회
|
||||||
|
# - 유료 전환 시 사용량 기반 과금
|
||||||
|
VITE_GEMINI_API_KEY=your-gemini-api-key
|
||||||
|
|
||||||
|
# Suno AI API
|
||||||
|
# - 용도: AI 음악 생성 (배경음악, 광고 음악)
|
||||||
|
# - 발급: Suno API 프록시 서비스 사용
|
||||||
|
# - 참고: https://github.com/gcui-art/suno-api
|
||||||
|
SUNO_API_KEY=your-suno-api-key
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🎪 축제 연동 API (Festival Integration)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# 한국관광공사 Tour API
|
||||||
|
# - 용도: 전국 축제/행사 정보 조회, 지역별 축제 연동
|
||||||
|
# - 발급: https://api.visitkorea.or.kr/ (회원가입 후 키 발급)
|
||||||
|
# - 무료 할당량: 일 1,000회
|
||||||
|
# - 서비스: KorService2 사용
|
||||||
|
TOURAPI_KEY=your-tour-api-key
|
||||||
|
TOURAPI_ENDPOINT=https://apis.data.go.kr/B551011/KorService2
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📍 지오코딩 API (Geocoding)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Kakao REST API
|
||||||
|
# - 용도: 주소 → 좌표 변환, 펜션 위치 기반 근처 축제 검색
|
||||||
|
# - 발급: https://developers.kakao.com/
|
||||||
|
# - 무료 할당량: 일 30,000회
|
||||||
|
KAKAO_REST_KEY=your-kakao-rest-api-key
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📺 YouTube 업로드 (YouTube Upload)
|
||||||
|
# ============================================
|
||||||
|
# OAuth 2.0 방식 - 사용자별 개인 채널 연동
|
||||||
|
|
||||||
|
# YouTube OAuth 설정
|
||||||
|
# - 설정 파일: server/client_secret.json (별도 생성 필요)
|
||||||
|
# - 설정 방법:
|
||||||
|
# 1. Google Cloud Console → 사용자 인증 정보
|
||||||
|
# 2. OAuth 2.0 클라이언트 ID 생성 (웹 애플리케이션)
|
||||||
|
# 3. 승인된 리디렉션 URI 추가:
|
||||||
|
# https://castad1.ktenterprise.net/api/youtube/oauth/callback
|
||||||
|
# 4. JSON 다운로드 → server/client_secret.json으로 저장
|
||||||
|
# - 앱 게시: 테스트 사용자 100명 이상이면 앱 검증 필요
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📊 Google Cloud Billing (선택)
|
||||||
|
# ============================================
|
||||||
|
# BigQuery를 통한 API 비용 분석 - 관리자 대시보드 기능
|
||||||
|
|
||||||
|
# Google Cloud Billing 설정
|
||||||
|
# - 용도: Gemini/Suno 등 API 사용 비용 추적
|
||||||
|
# - 설정 파일: server/google-billing-key.json (서비스 계정 키)
|
||||||
|
# - 설정 방법:
|
||||||
|
# 1. Google Cloud Console → 결제 → 결제 내보내기 → BigQuery
|
||||||
|
# 2. IAM → 서비스 계정 생성 (BigQuery 데이터 뷰어 역할)
|
||||||
|
# 3. 키 생성 → JSON 다운로드 → server/google-billing-key.json
|
||||||
|
GOOGLE_BILLING_KEY_PATH=./server/google-billing-key.json
|
||||||
|
GOOGLE_CLOUD_PROJECT_ID=your-project-id
|
||||||
|
GOOGLE_BILLING_DATASET_ID=billing_export
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📧 이메일 서비스 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Resend 이메일 API
|
||||||
|
# - 용도: 비밀번호 재설정, 알림 이메일
|
||||||
|
# - 발급: https://resend.com/
|
||||||
|
# - 설정 안 하면 이메일 기능 비활성화 (앱은 정상 작동)
|
||||||
|
# - 프로덕션: 도메인 인증 필요
|
||||||
|
RESEND_API_KEY=your-resend-api-key
|
||||||
|
RESEND_FROM_EMAIL=CastAD <noreply@castad1.ktenterprise.net>
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 🔐 소셜 로그인 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Google OAuth 로그인
|
||||||
|
# - 리디렉션 URI: https://castad1.ktenterprise.net/auth/google/callback
|
||||||
|
GOOGLE_CLIENT_ID=your-google-client-id
|
||||||
|
GOOGLE_CLIENT_SECRET=your-google-client-secret
|
||||||
|
|
||||||
|
# Naver OAuth 로그인
|
||||||
|
# - 리디렉션 URI: https://castad1.ktenterprise.net/auth/naver/callback
|
||||||
|
NAVER_CLIENT_ID=your-naver-client-id
|
||||||
|
NAVER_CLIENT_SECRET=your-naver-client-secret
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📱 SNS 연동 (선택)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Instagram 서비스 (Python 마이크로서비스)
|
||||||
|
# - 별도 설치 필요: server/instagram-service/
|
||||||
|
# - PM2로 별도 프로세스로 실행
|
||||||
|
INSTAGRAM_SERVICE_URL=http://localhost:5001
|
||||||
|
INSTAGRAM_SERVICE_PORT=5001
|
||||||
|
INSTAGRAM_ENCRYPTION_KEY=your-fernet-encryption-key
|
||||||
|
|
||||||
|
# TikTok API
|
||||||
|
# - 리디렉션 URI: https://castad1.ktenterprise.net/api/tiktok/oauth/callback
|
||||||
|
TIKTOK_CLIENT_KEY=your-tiktok-client-key
|
||||||
|
TIKTOK_CLIENT_SECRET=your-tiktok-client-secret
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 📋 프로덕션 배포 체크리스트
|
||||||
|
# ============================================
|
||||||
|
#
|
||||||
|
# 🔴 필수 (앱 실행에 반드시 필요):
|
||||||
|
# ✅ NODE_ENV=production
|
||||||
|
# ✅ JWT_SECRET (랜덤 문자열로 변경)
|
||||||
|
# ✅ VITE_GEMINI_API_KEY
|
||||||
|
# ✅ SUNO_API_KEY
|
||||||
|
# ✅ FRONTEND_URL, BACKEND_URL (실제 도메인)
|
||||||
|
#
|
||||||
|
# 🟡 권장 (주요 기능):
|
||||||
|
# ⬜ TOURAPI_KEY (축제 연동)
|
||||||
|
# ⬜ KAKAO_REST_KEY (위치 기반 축제 검색)
|
||||||
|
# ⬜ server/client_secret.json (YouTube 업로드)
|
||||||
|
#
|
||||||
|
# 🟢 선택 (부가 기능):
|
||||||
|
# ⬜ RESEND_API_KEY (이메일)
|
||||||
|
# ⬜ GOOGLE_CLIENT_ID/SECRET (Google 로그인)
|
||||||
|
# ⬜ NAVER_CLIENT_ID/SECRET (네이버 로그인)
|
||||||
|
# ⬜ TIKTOK_CLIENT_KEY/SECRET (TikTok)
|
||||||
|
# ⬜ INSTAGRAM_* (Instagram)
|
||||||
|
# ⬜ GOOGLE_BILLING_* (비용 분석)
|
||||||
|
#
|
||||||
|
# 🔒 보안 파일 (git에 포함하지 않음):
|
||||||
|
# ⬜ .env (이 파일)
|
||||||
|
# ⬜ server/client_secret.json (YouTube OAuth)
|
||||||
|
# ⬜ server/google-billing-key.json (BigQuery)
|
||||||
|
# ⬜ server/youtube-tokens.json (사용자 토큰, 자동생성)
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
*.tar.gz
|
||||||
|
server/downloads/*
|
||||||
|
!server/downloads/.gitkeep
|
||||||
|
server/database.sqlite
|
||||||
|
|
||||||
|
# Environment
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
!.env.production.example
|
||||||
|
|
||||||
|
# Sensitive files (API keys, credentials)
|
||||||
|
server/google-billing-key.json
|
||||||
|
server/client_secret.json
|
||||||
|
server/youtube-tokens.json
|
||||||
|
**/tokens.json
|
||||||
|
|
||||||
|
# Analysis files
|
||||||
|
*_analysis_*.txt
|
||||||
|
|
||||||
|
# Windows Zone.Identifier files
|
||||||
|
*:Zone.Identifier
|
||||||
|
|
||||||
|
# Python
|
||||||
|
__pycache__/
|
||||||
|
*.py[cod]
|
||||||
|
*$py.class
|
||||||
|
venv/
|
||||||
|
*.egg-info/
|
||||||
|
|
||||||
|
# Data files
|
||||||
|
data/
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import { AuthProvider, useAuth } from './src/contexts/AuthContext';
|
||||||
|
import { LanguageProvider } from './src/contexts/LanguageContext';
|
||||||
|
import { ThemeProvider } from './src/contexts/ThemeContext';
|
||||||
|
import Navbar from './components/Navbar';
|
||||||
|
import CastADApp from './src/pages/CastADApp';
|
||||||
|
import LoginPage from './src/pages/LoginPage';
|
||||||
|
import RegisterPage from './src/pages/RegisterPage';
|
||||||
|
import ForgotPasswordPage from './src/pages/ForgotPasswordPage';
|
||||||
|
import ResetPasswordPage from './src/pages/ResetPasswordPage';
|
||||||
|
import VerifyEmailPage from './src/pages/VerifyEmailPage';
|
||||||
|
import OAuthCallbackPage from './src/pages/OAuthCallbackPage';
|
||||||
|
import AdminDashboard from './src/pages/AdminDashboard';
|
||||||
|
import LandingPage from './src/pages/LandingPage';
|
||||||
|
import BrandPage from './src/pages/BrandPage';
|
||||||
|
import CreditsPage from './src/pages/CreditsPage';
|
||||||
|
import './src/styles/globals.css';
|
||||||
|
import './src/styles/text-effects.css';
|
||||||
|
import './src/styles/animations.css';
|
||||||
|
|
||||||
|
// 홈 라우트: 로그인 여부에 따라 랜딩 또는 SaaS 앱 표시
|
||||||
|
const HomeRoute: React.FC = () => {
|
||||||
|
const { user } = useAuth();
|
||||||
|
return user ? <CastADApp /> : <LandingPage />;
|
||||||
|
};
|
||||||
|
|
||||||
|
// SaaS 앱 보호 라우트: 로그인 필요
|
||||||
|
const ProtectedAppRoute: React.FC = () => {
|
||||||
|
const { user } = useAuth();
|
||||||
|
return user ? <CastADApp /> : <Navigate to="/login" />;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 랜딩 페이지용 라우트 (Navbar 포함)
|
||||||
|
const PublicRoutes: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar />
|
||||||
|
<div className="pt-16 min-h-screen bg-background text-foreground font-sans">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
<Route path="/register" element={<RegisterPage />} />
|
||||||
|
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
|
||||||
|
<Route path="/reset-password" element={<ResetPasswordPage />} />
|
||||||
|
<Route path="/verify-email" element={<VerifyEmailPage />} />
|
||||||
|
<Route path="/oauth/callback" element={<OAuthCallbackPage />} />
|
||||||
|
<Route path="/admin" element={<AdminDashboard />} />
|
||||||
|
<Route path="/brand" element={<BrandPage />} />
|
||||||
|
<Route path="/" element={<LandingPage />} />
|
||||||
|
<Route path="/app/*" element={<Navigate to="/login" />} />
|
||||||
|
<Route path="*" element={<Navigate to="/" />} />
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const AppRoutes: React.FC = () => {
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
// 로그인된 사용자는 SaaS 앱으로 (Navbar 없음, Sidebar 사용)
|
||||||
|
if (user) {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<Navigate to="/app" />} />
|
||||||
|
<Route path="/register" element={<Navigate to="/app" />} />
|
||||||
|
<Route path="/forgot-password" element={<Navigate to="/app" />} />
|
||||||
|
<Route path="/reset-password" element={<ResetPasswordPage />} />
|
||||||
|
<Route path="/verify-email" element={<VerifyEmailPage />} />
|
||||||
|
<Route path="/oauth/callback" element={<OAuthCallbackPage />} />
|
||||||
|
<Route path="/admin" element={<AdminDashboard />} />
|
||||||
|
<Route path="/brand" element={<BrandPage />} />
|
||||||
|
<Route path="/credits" element={<CreditsPage />} />
|
||||||
|
<Route path="/app/*" element={<CastADApp />} />
|
||||||
|
<Route path="/" element={<Navigate to="/app" />} />
|
||||||
|
<Route path="*" element={<Navigate to="/app" />} />
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 로그인되지 않은 사용자는 공개 페이지로
|
||||||
|
return <PublicRoutes />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<LanguageProvider>
|
||||||
|
<ThemeProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<AppRoutes />
|
||||||
|
</BrowserRouter>
|
||||||
|
</ThemeProvider>
|
||||||
|
</LanguageProvider>
|
||||||
|
</AuthProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
CastAD (formerly ADo4) is an AI-powered marketing video generation platform for pension (accommodation) businesses. It uses Google Gemini for content generation/TTS and Suno AI for music creation, with Puppeteer for server-side video rendering.
|
||||||
|
|
||||||
|
## Development Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start both frontend and backend concurrently (recommended)
|
||||||
|
./start.sh
|
||||||
|
|
||||||
|
# Or run manually:
|
||||||
|
npm run dev # Run frontend + backend together
|
||||||
|
npm run build # Build frontend for production
|
||||||
|
cd server && node index.js # Run backend only
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
npm install # Frontend dependencies
|
||||||
|
cd server && npm install # Backend dependencies
|
||||||
|
npm run build:all # Install all + build frontend
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Three-Layer Structure
|
||||||
|
- **Frontend**: React 19 + TypeScript + Vite (port 3000/5173)
|
||||||
|
- **Backend**: Express.js + SQLite (port 3001)
|
||||||
|
- **External APIs**: Google Gemini, Suno AI, YouTube Data API
|
||||||
|
|
||||||
|
### Key Directories
|
||||||
|
- `components/` - React UI components (InputForm, Navbar, ResultPlayer, etc.)
|
||||||
|
- `src/pages/` - Page components (GeneratorPage, Dashboard, AdminDashboard, Login/Register)
|
||||||
|
- `src/contexts/` - Global state (AuthContext for JWT auth, LanguageContext for i18n)
|
||||||
|
- `src/locales.ts` - Multi-language translations (ko, en, ja, zh, th, vi)
|
||||||
|
- `services/` - Frontend API services (geminiService, sunoService, ffmpegService, naverService)
|
||||||
|
- `server/` - Express backend
|
||||||
|
- `index.js` - Main server with auth, rendering, and API routes
|
||||||
|
- `db.js` - SQLite schema (users, history tables)
|
||||||
|
- `geminiBackendService.js` - Server-side Gemini operations
|
||||||
|
- `youtubeService.js` - YouTube upload via OAuth
|
||||||
|
- `downloads/` - Generated video storage
|
||||||
|
- `temp/` - Temporary rendering files
|
||||||
|
|
||||||
|
### Data Flow
|
||||||
|
1. User inputs business info/photos → GeneratorPage.tsx
|
||||||
|
2. Frontend calls Gemini API for creative content → geminiService.ts
|
||||||
|
3. Music generation via Suno proxy → sunoService.ts
|
||||||
|
4. Render request sent to backend → server/index.js
|
||||||
|
5. Puppeteer captures video, FFmpeg merges audio → final MP4 in downloads/
|
||||||
|
|
||||||
|
### Authentication
|
||||||
|
- JWT tokens stored in localStorage
|
||||||
|
- Auth middleware in server/index.js (`authenticateToken`, `requireAdmin`)
|
||||||
|
- Roles: 'user' and 'admin'
|
||||||
|
- Default admin: `admin` / `admin123`
|
||||||
|
|
||||||
|
### Environment Variables (.env in root)
|
||||||
|
```
|
||||||
|
VITE_GEMINI_API_KEY= # Required: Google AI Studio API key
|
||||||
|
SUNO_API_KEY= # Required: Suno AI proxy key
|
||||||
|
JWT_SECRET= # Required: JWT signing secret
|
||||||
|
FRONTEND_URL= # Optional: For CORS (default: http://localhost:5173)
|
||||||
|
PORT= # Optional: Backend port (default: 3001)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tech Notes
|
||||||
|
|
||||||
|
- Vite proxies `/api`, `/render`, `/downloads`, `/temp` to backend (port 3001)
|
||||||
|
- Path alias `@/` maps to project root
|
||||||
|
- SQLite database at `server/database.sqlite` (not tracked in git)
|
||||||
|
- Video rendering uses Puppeteer headless Chrome + FFmpeg
|
||||||
|
- Multi-language support: UI language separate from content generation language
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
# CaStAD 서버 배포 가이드
|
||||||
|
|
||||||
|
## 도메인 정보
|
||||||
|
- **Primary**: https://castad.ktenterprise.net
|
||||||
|
- **Secondary**: https://ado2.whitedonkey.kr
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 서버 요구사항
|
||||||
|
|
||||||
|
| 항목 | 최소 | 권장 |
|
||||||
|
|------|------|------|
|
||||||
|
| **CPU** | 2 Core | 4 Core |
|
||||||
|
| **RAM** | 4GB | 8GB |
|
||||||
|
| **Storage** | 50GB | 100GB SSD |
|
||||||
|
| **OS** | Ubuntu 20.04+ | Ubuntu 22.04 LTS |
|
||||||
|
|
||||||
|
### 필수 소프트웨어
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Node.js 18+
|
||||||
|
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||||
|
sudo apt-get install -y nodejs
|
||||||
|
|
||||||
|
# PM2 (프로세스 관리)
|
||||||
|
sudo npm install -g pm2
|
||||||
|
|
||||||
|
# Nginx
|
||||||
|
sudo apt-get install -y nginx
|
||||||
|
|
||||||
|
# FFmpeg (영상 렌더링)
|
||||||
|
sudo apt-get install -y ffmpeg
|
||||||
|
|
||||||
|
# Python 3 (Instagram 서비스)
|
||||||
|
sudo apt-get install -y python3 python3-pip
|
||||||
|
|
||||||
|
# Chromium (Puppeteer용)
|
||||||
|
sudo apt-get install -y chromium-browser
|
||||||
|
|
||||||
|
# Certbot (SSL 인증서)
|
||||||
|
sudo apt-get install -y certbot python3-certbot-nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 프로젝트 클론
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 디렉토리 생성
|
||||||
|
sudo mkdir -p /var/www/castad
|
||||||
|
sudo chown $USER:$USER /var/www/castad
|
||||||
|
|
||||||
|
# Git 클론
|
||||||
|
cd /var/www/castad
|
||||||
|
git clone https://github.com/waabaa/19-claude-saas-castad.git .
|
||||||
|
|
||||||
|
# 실행 권한 부여
|
||||||
|
chmod +x startserver.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 환경 변수 설정
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# .env 파일 생성
|
||||||
|
cp .env.production.example .env
|
||||||
|
|
||||||
|
# 편집
|
||||||
|
nano .env
|
||||||
|
```
|
||||||
|
|
||||||
|
**필수 변경 항목:**
|
||||||
|
```bash
|
||||||
|
# JWT 시크릿 (반드시 변경!)
|
||||||
|
JWT_SECRET=your-unique-secret-key-here
|
||||||
|
|
||||||
|
# Gemini API 키
|
||||||
|
VITE_GEMINI_API_KEY=your-key
|
||||||
|
|
||||||
|
# Suno API 키
|
||||||
|
SUNO_API_KEY=your-key
|
||||||
|
|
||||||
|
# Instagram 암호화 키 (생성 명령)
|
||||||
|
python3 -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. YouTube OAuth 설정
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Google Cloud Console에서 다운로드한 파일을 복사
|
||||||
|
cp /path/to/client_secret.json server/client_secret.json
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Nginx 설정
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Nginx 설정 파일 복사
|
||||||
|
sudo cp nginx/castad.conf /etc/nginx/sites-available/castad.conf
|
||||||
|
|
||||||
|
# 심볼릭 링크 생성
|
||||||
|
sudo ln -s /etc/nginx/sites-available/castad.conf /etc/nginx/sites-enabled/
|
||||||
|
|
||||||
|
# 기본 사이트 비활성화 (선택)
|
||||||
|
sudo rm /etc/nginx/sites-enabled/default
|
||||||
|
|
||||||
|
# 문법 검사
|
||||||
|
sudo nginx -t
|
||||||
|
|
||||||
|
# Nginx 재시작
|
||||||
|
sudo systemctl restart nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. SSL 인증서 발급
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Let's Encrypt SSL 인증서 발급
|
||||||
|
sudo certbot --nginx -d castad.ktenterprise.net -d ado2.whitedonkey.kr
|
||||||
|
|
||||||
|
# 자동 갱신 테스트
|
||||||
|
sudo certbot renew --dry-run
|
||||||
|
```
|
||||||
|
|
||||||
|
**Nginx 설정 업데이트 (자동 수정됨):**
|
||||||
|
인증서 경로가 다를 경우 `nginx/castad.conf` 수정:
|
||||||
|
```nginx
|
||||||
|
ssl_certificate /etc/letsencrypt/live/castad.ktenterprise.net/fullchain.pem;
|
||||||
|
ssl_certificate_key /etc/letsencrypt/live/castad.ktenterprise.net/privkey.pem;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 서버 시작
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 서버 시작 (빌드 포함)
|
||||||
|
./startserver.sh start
|
||||||
|
|
||||||
|
# 상태 확인
|
||||||
|
./startserver.sh status
|
||||||
|
|
||||||
|
# 로그 보기
|
||||||
|
./startserver.sh logs
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. PM2 시작 시 자동 실행 설정
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 현재 상태 저장
|
||||||
|
pm2 save
|
||||||
|
|
||||||
|
# 시스템 시작 시 자동 실행
|
||||||
|
pm2 startup
|
||||||
|
|
||||||
|
# 표시되는 명령어 실행 (예시)
|
||||||
|
sudo env PATH=$PATH:/usr/bin pm2 startup systemd -u ubuntu --hp /home/ubuntu
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 방화벽 설정 (선택)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# UFW 설정
|
||||||
|
sudo ufw allow 80/tcp
|
||||||
|
sudo ufw allow 443/tcp
|
||||||
|
sudo ufw allow 22/tcp
|
||||||
|
sudo ufw enable
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 명령어 요약
|
||||||
|
|
||||||
|
| 명령어 | 설명 |
|
||||||
|
|--------|------|
|
||||||
|
| `./startserver.sh start` | 서버 시작 (빌드 포함) |
|
||||||
|
| `./startserver.sh stop` | 서버 중지 |
|
||||||
|
| `./startserver.sh restart` | 서버 재시작 |
|
||||||
|
| `./startserver.sh status` | 상태 확인 |
|
||||||
|
| `./startserver.sh logs` | 로그 보기 |
|
||||||
|
| `./startserver.sh update` | Git pull + 재빌드 + 재시작 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 업데이트 방법
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /var/www/castad
|
||||||
|
|
||||||
|
# 간단한 방법
|
||||||
|
./startserver.sh update
|
||||||
|
|
||||||
|
# 또는 수동으로
|
||||||
|
git pull origin main
|
||||||
|
npm install --legacy-peer-deps
|
||||||
|
cd server && npm install --legacy-peer-deps && cd ..
|
||||||
|
npm run build
|
||||||
|
pm2 restart all
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 트러블슈팅
|
||||||
|
|
||||||
|
### 502 Bad Gateway
|
||||||
|
```bash
|
||||||
|
# 백엔드 상태 확인
|
||||||
|
pm2 status
|
||||||
|
pm2 logs castad-backend
|
||||||
|
|
||||||
|
# 포트 확인
|
||||||
|
sudo netstat -tlnp | grep 3001
|
||||||
|
```
|
||||||
|
|
||||||
|
### SSL 인증서 오류
|
||||||
|
```bash
|
||||||
|
# 인증서 갱신
|
||||||
|
sudo certbot renew
|
||||||
|
|
||||||
|
# Nginx 재시작
|
||||||
|
sudo systemctl restart nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
### Puppeteer 오류
|
||||||
|
```bash
|
||||||
|
# Chromium 설치 확인
|
||||||
|
chromium-browser --version
|
||||||
|
|
||||||
|
# 또는 환경변수 설정
|
||||||
|
export PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
|
||||||
|
```
|
||||||
|
|
||||||
|
### Instagram 서비스 오류
|
||||||
|
```bash
|
||||||
|
# Python 의존성 재설치
|
||||||
|
pip3 install -r server/instagram/requirements.txt
|
||||||
|
|
||||||
|
# 서비스 재시작
|
||||||
|
pm2 restart castad-instagram
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 백업
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 데이터베이스 백업
|
||||||
|
cp server/database.sqlite backups/database_$(date +%Y%m%d).sqlite
|
||||||
|
|
||||||
|
# 업로드 파일 백업
|
||||||
|
tar -czvf backups/uploads_$(date +%Y%m%d).tar.gz server/downloads/
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 모니터링
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# PM2 모니터링
|
||||||
|
pm2 monit
|
||||||
|
|
||||||
|
# 시스템 리소스
|
||||||
|
htop
|
||||||
|
|
||||||
|
# Nginx 접속 로그
|
||||||
|
tail -f /var/log/nginx/castad_access.log
|
||||||
|
|
||||||
|
# Nginx 에러 로그
|
||||||
|
tail -f /var/log/nginx/castad_error.log
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
# BizVibe - AI Music Video Generator
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
**BizVibe** is a React-based web application designed to automatically generate marketing music videos for businesses. It leverages the power of Google's Gemini ecosystem and Suno AI to create a comprehensive multimedia package including:
|
||||||
|
|
||||||
|
* **Creative Text:** Ad copy and lyrics/scripts generated by **Gemini 3 Pro**.
|
||||||
|
* **Audio:**
|
||||||
|
* Custom songs composed by **Suno AI** (V5 model).
|
||||||
|
* Professional voiceovers generated by **Gemini TTS** (`gemini-2.5-flash-preview-tts`).
|
||||||
|
* **Visuals:**
|
||||||
|
* High-quality ad posters designed by **Gemini 3 Pro Image** (`gemini-3-pro-image-preview`).
|
||||||
|
* Cinematic video backgrounds created by **Veo** (`veo-3.1-fast-generate-preview`).
|
||||||
|
|
||||||
|
The application provides an end-to-end flow: collecting business details -> generating assets -> previewing the final music video.
|
||||||
|
|
||||||
|
## Architecture & Tech Stack
|
||||||
|
* **Frontend Framework:** React 19 with Vite.
|
||||||
|
* **Language:** TypeScript.
|
||||||
|
* **AI Integration:**
|
||||||
|
* `@google/genai` SDK for interacting with Gemini and Veo models.
|
||||||
|
* Custom REST API integration for Suno AI (via CORS proxy).
|
||||||
|
* **Media Processing:** FFmpeg (WASM) is included in dependencies (`@ffmpeg/ffmpeg`), likely for client-side media assembly.
|
||||||
|
* **Styling:** Tailwind CSS.
|
||||||
|
* **State Management:** React Context / Local State.
|
||||||
|
|
||||||
|
## Building and Running
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
* Node.js (v18+ recommended)
|
||||||
|
* A valid Google Cloud Project with Gemini API access enabled.
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
Install the project dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Development Server
|
||||||
|
Start the local development server:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
Access the app at `http://localhost:5173` (default Vite port).
|
||||||
|
|
||||||
|
### Production Build
|
||||||
|
Create a production-ready build:
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
Preview the build locally:
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
### Configuration
|
||||||
|
* **API Key:** The application requires a Google Gemini API Key.
|
||||||
|
* It checks for `process.env.API_KEY`.
|
||||||
|
* It also includes an `ApiKeySelector` component that allows users to select/input a key if running in a specific AI Studio environment.
|
||||||
|
* **Suno API:** The `sunoService.ts` currently contains a hardcoded API key and uses a CORS proxy. *Note: This should be externalized in a production environment.*
|
||||||
|
|
||||||
|
## Development Conventions
|
||||||
|
|
||||||
|
### File Structure
|
||||||
|
* `src/components/`: Reusable UI components (Input forms, Result players, Loading overlays).
|
||||||
|
* `src/services/`: specialized modules for API interactions.
|
||||||
|
* `geminiService.ts`: Handles Text, Image, Video (Veo), and TTS generation.
|
||||||
|
* `sunoService.ts`: Handles music generation via Suno API.
|
||||||
|
* `ffmpegService.ts`: Media processing utilities.
|
||||||
|
* `src/types.ts`: Centralized TypeScript definitions for domain models (`BusinessInfo`, `GeneratedAssets`, etc.).
|
||||||
|
* `App.tsx`: Main application controller handling the generation workflow state machine.
|
||||||
|
|
||||||
|
### Code Style
|
||||||
|
* **Components:** Functional components with Hooks.
|
||||||
|
* **Styling:** Utility-first CSS using Tailwind classes.
|
||||||
|
* **Async Handling:** `async/await` pattern used extensively in services with error handling for API failures.
|
||||||
|
* **Type Safety:** Strict TypeScript interfaces for all data models and API responses.
|
||||||
|
|
||||||
|
### Key Workflows
|
||||||
|
1. **Input:** User submits `BusinessInfo` (including images).
|
||||||
|
2. **Processing (Sequential/Parallel):**
|
||||||
|
* Text content is generated first.
|
||||||
|
* Audio (Song or TTS) is generated using the text.
|
||||||
|
* Poster image is generated using uploaded images.
|
||||||
|
* Video background is generated using the Poster image.
|
||||||
|
3. **Output:** `GeneratedAssets` are aggregated and displayed in the `ResultPlayer`.
|
||||||
|
|
@ -0,0 +1,305 @@
|
||||||
|
# CastAD SaaS UI/UX 전체 리디자인 계획
|
||||||
|
|
||||||
|
## 개요
|
||||||
|
POC 상태의 펜션 쇼츠 자동 생성 웹사이트를 프로페셔널한 SaaS 서비스로 전환
|
||||||
|
|
||||||
|
## 기술 스택 결정
|
||||||
|
|
||||||
|
| 항목 | 현재 | 변경 후 |
|
||||||
|
|------|------|---------|
|
||||||
|
| CSS Framework | Tailwind CDN | Tailwind npm + PostCSS |
|
||||||
|
| UI Components | 직접 구현 | shadcn/ui (Radix 기반) |
|
||||||
|
| Icons | lucide-react | lucide-react (유지) |
|
||||||
|
| Design System | 없음 | CSS Variables 기반 토큰 |
|
||||||
|
| Animations | index.html 인라인 | tailwind-animate + CSS 파일 분리 |
|
||||||
|
|
||||||
|
## 디자인 방향
|
||||||
|
|
||||||
|
### 컬러 팔레트 (다크 테마)
|
||||||
|
- **Background**: `#09090b` (zinc-950)
|
||||||
|
- **Card**: `#18181b` (zinc-900)
|
||||||
|
- **Border**: `#27272a` (zinc-800)
|
||||||
|
- **Primary**: `#a855f7` (purple-500) → `#9333ea` (purple-600)
|
||||||
|
- **Accent**: `#06b6d4` (cyan-500)
|
||||||
|
- **Success**: `#22c55e` (green-500)
|
||||||
|
- **Destructive**: `#ef4444` (red-500)
|
||||||
|
|
||||||
|
### 타이포그래피
|
||||||
|
- **Display**: Inter (600-700)
|
||||||
|
- **Body**: Inter (400)
|
||||||
|
- **Mono**: JetBrains Mono
|
||||||
|
|
||||||
|
### 레이아웃 원칙
|
||||||
|
- 최대 너비: 1280px (7xl)
|
||||||
|
- 섹션 패딩: 24-32px
|
||||||
|
- 카드 둥글기: 12px (rounded-xl)
|
||||||
|
- 일관된 8px 그리드 시스템
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 단계별 구현 계획
|
||||||
|
|
||||||
|
### Phase 1: 인프라 설정 (기반 작업)
|
||||||
|
|
||||||
|
#### 1.1 Tailwind CSS npm 전환
|
||||||
|
- [ ] `tailwindcss`, `postcss`, `autoprefixer` 설치
|
||||||
|
- [ ] `tailwind.config.js` 생성 (커스텀 컬러, 폰트, 애니메이션)
|
||||||
|
- [ ] `postcss.config.js` 생성
|
||||||
|
- [ ] `src/styles/globals.css` 생성 (Tailwind directives)
|
||||||
|
- [ ] index.html에서 CDN 제거
|
||||||
|
|
||||||
|
#### 1.2 shadcn/ui 초기화
|
||||||
|
- [ ] `npx shadcn@latest init` 실행
|
||||||
|
- [ ] components.json 설정 (경로, 스타일)
|
||||||
|
- [ ] `src/components/ui/` 디렉토리 구조 설정
|
||||||
|
|
||||||
|
#### 1.3 디자인 토큰 설정
|
||||||
|
- [ ] CSS variables 정의 (colors, radius, spacing)
|
||||||
|
- [ ] 다크 테마 기본값 설정
|
||||||
|
- [ ] 폰트 로딩 최적화 (Google Fonts → next/font 스타일)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 2: 기본 컴포넌트 구축
|
||||||
|
|
||||||
|
#### 2.1 shadcn/ui 컴포넌트 설치
|
||||||
|
```bash
|
||||||
|
npx shadcn@latest add button card input label select textarea
|
||||||
|
npx shadcn@latest add dialog sheet tabs toast sonner
|
||||||
|
npx shadcn@latest add dropdown-menu avatar badge separator
|
||||||
|
npx shadcn@latest add progress skeleton scroll-area
|
||||||
|
npx shadcn@latest add form (react-hook-form + zod)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2.2 커스텀 컴포넌트 생성
|
||||||
|
- [ ] `PageHeader` - 페이지 제목 + 설명
|
||||||
|
- [ ] `PageContainer` - 일관된 레이아웃 래퍼
|
||||||
|
- [ ] `FeatureCard` - 기능 소개 카드
|
||||||
|
- [ ] `PricingCard` - 가격표 카드
|
||||||
|
- [ ] `StatCard` - 통계 카드
|
||||||
|
- [ ] `VideoPlayer` - 영상 재생기 (기존 ResultPlayer 리팩토링)
|
||||||
|
- [ ] `LoadingSpinner` - 로딩 인디케이터
|
||||||
|
- [ ] `EmptyState` - 빈 상태 표시
|
||||||
|
|
||||||
|
#### 2.3 레이아웃 컴포넌트
|
||||||
|
- [ ] `MainLayout` - 전체 앱 레이아웃
|
||||||
|
- [ ] `DashboardLayout` - 대시보드용 사이드바 레이아웃
|
||||||
|
- [ ] `AuthLayout` - 로그인/회원가입 전용 레이아웃
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 3: Navbar 리디자인
|
||||||
|
|
||||||
|
#### 현재 문제점
|
||||||
|
- 모바일 메뉴 없음
|
||||||
|
- 언어 선택 UI 투박함
|
||||||
|
- 사용자 메뉴 단순함
|
||||||
|
|
||||||
|
#### 개선 사항
|
||||||
|
- [ ] 반응형 모바일 메뉴 (Sheet 컴포넌트 활용)
|
||||||
|
- [ ] 언어 선택 드롭다운 개선
|
||||||
|
- [ ] 사용자 아바타 + 드롭다운 메뉴
|
||||||
|
- [ ] 네비게이션 링크 호버 효과
|
||||||
|
- [ ] 스크롤 시 배경 blur 효과
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 4: Landing Page 리디자인
|
||||||
|
|
||||||
|
#### 4.1 Hero 섹션
|
||||||
|
- [ ] 더 절제된 타이포그래피 (text-4xl → text-5xl)
|
||||||
|
- [ ] 애니메이션 최적화 (framer-motion 고려)
|
||||||
|
- [ ] CTA 버튼 개선 (그래디언트 보더)
|
||||||
|
- [ ] 신뢰도 지표 리디자인
|
||||||
|
|
||||||
|
#### 4.2 Features 섹션
|
||||||
|
- [ ] FeatureCard 컴포넌트로 통일
|
||||||
|
- [ ] 아이콘 + 제목 + 설명 구조
|
||||||
|
- [ ] 호버 시 미묘한 상승 효과
|
||||||
|
|
||||||
|
#### 4.3 How It Works
|
||||||
|
- [ ] 스텝 카드 (번호 + 아이콘 + 설명)
|
||||||
|
- [ ] 연결선 또는 화살표 그래픽
|
||||||
|
|
||||||
|
#### 4.4 Success Cases
|
||||||
|
- [ ] 캐러셀 개선 (자동 재생 + 수동 조작)
|
||||||
|
- [ ] 후기 카드 디자인 개선
|
||||||
|
|
||||||
|
#### 4.5 Pricing 섹션
|
||||||
|
- [ ] PricingCard 컴포넌트 활용
|
||||||
|
- [ ] 인기 플랜 하이라이트
|
||||||
|
- [ ] 기능 비교표 추가 고려
|
||||||
|
|
||||||
|
#### 4.6 Footer
|
||||||
|
- [ ] 링크 구조화
|
||||||
|
- [ ] 소셜 미디어 아이콘
|
||||||
|
- [ ] 저작권 정보
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 5: Generator Page 리디자인
|
||||||
|
|
||||||
|
#### 5.1 InputForm 분할 (47KB → 6개 컴포넌트)
|
||||||
|
- [ ] `BusinessInfoSection` - 비즈니스 기본 정보
|
||||||
|
- [ ] `ImageUploadSection` - 이미지 업로드
|
||||||
|
- [ ] `AudioSettingsSection` - 오디오 설정
|
||||||
|
- [ ] `VisualSettingsSection` - 비주얼 설정
|
||||||
|
- [ ] `CategorySection` - 카테고리 선택
|
||||||
|
- [ ] `FormActions` - 제출 버튼
|
||||||
|
|
||||||
|
#### 5.2 폼 UI 개선
|
||||||
|
- [ ] shadcn Form + react-hook-form + zod 적용
|
||||||
|
- [ ] 실시간 유효성 검사
|
||||||
|
- [ ] 섹션별 접기/펼치기 (Collapsible)
|
||||||
|
- [ ] 진행 상태 인디케이터
|
||||||
|
|
||||||
|
#### 5.3 Loading 상태 개선
|
||||||
|
- [ ] 스켈레톤 UI
|
||||||
|
- [ ] 단계별 진행 표시 (Stepper)
|
||||||
|
- [ ] 취소 기능
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 6: Result Player 리디자인
|
||||||
|
|
||||||
|
#### 6.1 ResultPlayer 분할 (38KB → 5개 컴포넌트)
|
||||||
|
- [ ] `VideoPreview` - 영상 미리보기
|
||||||
|
- [ ] `AudioControls` - 오디오 컨트롤
|
||||||
|
- [ ] `TextOverlayPreview` - 텍스트 오버레이
|
||||||
|
- [ ] `DownloadOptions` - 다운로드 옵션
|
||||||
|
- [ ] `SharePanel` - 공유 기능
|
||||||
|
|
||||||
|
#### 6.2 UI 개선
|
||||||
|
- [ ] 탭 UI 개선 (Tabs 컴포넌트)
|
||||||
|
- [ ] 진행률 표시 개선
|
||||||
|
- [ ] 토스트 알림 (Sonner)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 7: Dashboard 리디자인
|
||||||
|
|
||||||
|
#### 7.1 사용자 대시보드
|
||||||
|
- [ ] 사이드바 레이아웃 적용
|
||||||
|
- [ ] 통계 카드 (생성 횟수, 저장 공간 등)
|
||||||
|
- [ ] 최근 생성물 그리드
|
||||||
|
- [ ] 필터링 + 검색 기능
|
||||||
|
- [ ] 페이지네이션
|
||||||
|
|
||||||
|
#### 7.2 관리자 대시보드
|
||||||
|
- [ ] DataTable 컴포넌트 (정렬, 필터, 페이지네이션)
|
||||||
|
- [ ] 사용자 관리 UI 개선
|
||||||
|
- [ ] 통계 차트 (선택적)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 8: Auth Pages 리디자인
|
||||||
|
|
||||||
|
#### 8.1 Login/Register
|
||||||
|
- [ ] AuthLayout 적용
|
||||||
|
- [ ] 폼 유효성 검사 개선
|
||||||
|
- [ ] 소셜 로그인 버튼 (UI만, 추후 구현)
|
||||||
|
- [ ] 비밀번호 강도 표시
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 9: 반응형 및 접근성
|
||||||
|
|
||||||
|
#### 9.1 반응형
|
||||||
|
- [ ] 모든 페이지 모바일 테스트
|
||||||
|
- [ ] 터치 타겟 크기 확인 (44x44px 최소)
|
||||||
|
- [ ] 가로 스크롤 제거
|
||||||
|
|
||||||
|
#### 9.2 접근성
|
||||||
|
- [ ] ARIA 라벨 추가
|
||||||
|
- [ ] 키보드 네비게이션 확인
|
||||||
|
- [ ] 색상 대비 검사 (WCAG AA)
|
||||||
|
- [ ] 포커스 상태 시각화
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 10: 마무리
|
||||||
|
|
||||||
|
#### 10.1 성능 최적화
|
||||||
|
- [ ] 이미지 최적화 (lazy loading)
|
||||||
|
- [ ] 번들 사이즈 분석
|
||||||
|
- [ ] 불필요한 의존성 제거
|
||||||
|
|
||||||
|
#### 10.2 코드 정리
|
||||||
|
- [ ] 사용하지 않는 코드 제거
|
||||||
|
- [ ] TypeScript 타입 정리
|
||||||
|
- [ ] 컴포넌트 문서화 (주석)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 파일 구조 변경
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── src/
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── ui/ # shadcn/ui 컴포넌트
|
||||||
|
│ │ │ ├── button.tsx
|
||||||
|
│ │ │ ├── card.tsx
|
||||||
|
│ │ │ ├── input.tsx
|
||||||
|
│ │ │ └── ...
|
||||||
|
│ │ ├── layout/ # 레이아웃 컴포넌트
|
||||||
|
│ │ │ ├── MainLayout.tsx
|
||||||
|
│ │ │ ├── DashboardLayout.tsx
|
||||||
|
│ │ │ └── AuthLayout.tsx
|
||||||
|
│ │ ├── generator/ # Generator 관련 컴포넌트
|
||||||
|
│ │ │ ├── BusinessInfoSection.tsx
|
||||||
|
│ │ │ ├── ImageUploadSection.tsx
|
||||||
|
│ │ │ └── ...
|
||||||
|
│ │ ├── player/ # Player 관련 컴포넌트
|
||||||
|
│ │ │ ├── VideoPreview.tsx
|
||||||
|
│ │ │ └── ...
|
||||||
|
│ │ └── shared/ # 공유 컴포넌트
|
||||||
|
│ │ ├── PageHeader.tsx
|
||||||
|
│ │ ├── FeatureCard.tsx
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── styles/
|
||||||
|
│ │ ├── globals.css # Tailwind + CSS variables
|
||||||
|
│ │ └── animations.css # 텍스트 이펙트 (유지)
|
||||||
|
│ ├── lib/
|
||||||
|
│ │ └── utils.ts # cn() 등 유틸리티
|
||||||
|
│ └── pages/ # 페이지 컴포넌트
|
||||||
|
├── components/ # 기존 컴포넌트 (점진적 이전)
|
||||||
|
├── tailwind.config.js # 새로 생성
|
||||||
|
├── postcss.config.js # 새로 생성
|
||||||
|
└── components.json # shadcn/ui 설정
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 예상 작업량
|
||||||
|
|
||||||
|
| Phase | 작업 내용 | 파일 수 |
|
||||||
|
|-------|----------|--------|
|
||||||
|
| 1 | 인프라 설정 | 5-6 |
|
||||||
|
| 2 | 기본 컴포넌트 | 15-20 |
|
||||||
|
| 3 | Navbar | 2-3 |
|
||||||
|
| 4 | Landing Page | 5-6 |
|
||||||
|
| 5 | Generator Page | 8-10 |
|
||||||
|
| 6 | Result Player | 6-8 |
|
||||||
|
| 7 | Dashboard | 4-5 |
|
||||||
|
| 8 | Auth Pages | 2-3 |
|
||||||
|
| 9 | 반응형/접근성 | 전체 수정 |
|
||||||
|
| 10 | 마무리 | 전체 검토 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 주의사항
|
||||||
|
|
||||||
|
1. **점진적 마이그레이션**: 기존 기능이 깨지지 않도록 단계별 진행
|
||||||
|
2. **텍스트 이펙트 보존**: 11가지 텍스트 이펙트는 유지 (핵심 기능)
|
||||||
|
3. **다국어 지원 유지**: i18n 구조 그대로 유지
|
||||||
|
4. **백엔드 연동 유지**: API 호출 로직 변경 없음
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 승인 필요 항목
|
||||||
|
|
||||||
|
진행 전 확인:
|
||||||
|
1. 이 계획대로 진행해도 될까요?
|
||||||
|
2. 특별히 우선순위를 높이거나 제외할 부분이 있나요?
|
||||||
|
3. Phase 1부터 순차적으로 진행할까요?
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,360 @@
|
||||||
|
# CaStAD (카스타드) 영업 매뉴얼 v3.0
|
||||||
|
|
||||||
|
## 솔루션 한 줄 소개
|
||||||
|
|
||||||
|
> **"네이버 플레이스 URL 하나로 15초만에 인스타그램 릴스, 틱톡, 유튜브 쇼츠 영상을 자동 생성하는 AI 마케팅 플랫폼"**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 목차
|
||||||
|
|
||||||
|
1. [솔루션 개요](#1-솔루션-개요)
|
||||||
|
2. [타겟 고객](#2-타겟-고객)
|
||||||
|
3. [핵심 가치 제안](#3-핵심-가치-제안)
|
||||||
|
4. [경쟁 우위](#4-경쟁-우위)
|
||||||
|
5. [요금제 안내](#5-요금제-안내)
|
||||||
|
6. [데모 시나리오](#6-데모-시나리오)
|
||||||
|
7. [예상 질문 및 답변 (FAQ)](#7-예상-질문-및-답변-faq)
|
||||||
|
8. [성공 사례](#8-성공-사례)
|
||||||
|
9. [계약 절차](#9-계약-절차)
|
||||||
|
10. [기술 지원 정책](#10-기술-지원-정책)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 솔루션 개요
|
||||||
|
|
||||||
|
### CaStAD란?
|
||||||
|
CaStAD(카스타드)는 펜션, 풀빌라, 리조트 등 숙박업 사업자를 위한 **AI 기반 마케팅 영상 자동 생성 SaaS 플랫폼**입니다.
|
||||||
|
|
||||||
|
### 핵심 기능
|
||||||
|
| 기능 | 설명 |
|
||||||
|
|------|------|
|
||||||
|
| **AI 영상 자동 생성** | 네이버 플레이스 URL만 입력하면 사진, 리뷰 등을 분석하여 자동으로 홍보 영상 생성 |
|
||||||
|
| **AI 음악 생성** | 펜션 분위기에 맞는 배경음악 자동 생성 (Suno AI 연동) |
|
||||||
|
| **AI 카피라이팅** | Google Gemini AI가 감성적인 광고 문구 자동 생성 |
|
||||||
|
| **다국어 지원** | 한국어, 영어, 일본어, 중국어, 태국어, 베트남어 6개국어 |
|
||||||
|
| **3채널 동시 업로드** | YouTube, Instagram Reels, TikTok 원클릭 업로드 |
|
||||||
|
| **통합 분석 대시보드** | 모든 채널의 조회수, 참여율 등을 한눈에 확인 |
|
||||||
|
|
||||||
|
### 주요 특징
|
||||||
|
- **시간 절약**: 기존 2시간 → 15초로 영상 제작 시간 99% 단축
|
||||||
|
- **비용 절감**: 영상 제작 외주비 월 50만원+ → 월 2.9만원부터
|
||||||
|
- **전문가 수준**: AI가 최신 트렌드를 반영한 전문적인 영상 제작
|
||||||
|
- **자동화**: 정기적인 업로드까지 완전 자동화 가능
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 타겟 고객
|
||||||
|
|
||||||
|
### 주요 타겟
|
||||||
|
| 업종 | 예시 | 니즈 |
|
||||||
|
|------|------|------|
|
||||||
|
| **펜션** | 전국 2만+ 펜션 | 저렴하고 쉬운 마케팅 |
|
||||||
|
| **풀빌라** | 프리미엄 풀빌라 | 고급스러운 영상 콘텐츠 |
|
||||||
|
| **리조트/호텔** | 중소형 리조트 | 일관된 브랜딩 영상 |
|
||||||
|
| **글램핑** | 글램핑장 | 감성적인 분위기 전달 |
|
||||||
|
| **게스트하우스** | 외국인 대상 숙소 | 다국어 마케팅 |
|
||||||
|
|
||||||
|
### 이상적인 고객 프로필
|
||||||
|
- 네이버 플레이스에 등록된 사업자
|
||||||
|
- SNS 마케팅 필요성을 인지하지만 시간/역량 부족
|
||||||
|
- 마케팅 예산이 제한적인 개인 사업자
|
||||||
|
- 여러 펜션을 운영하는 법인 사업자
|
||||||
|
|
||||||
|
### 고객 Pain Point
|
||||||
|
1. "영상 만들 시간이 없어요"
|
||||||
|
2. "영상 편집할 줄 몰라요"
|
||||||
|
3. "외주 맡기기엔 너무 비싸요"
|
||||||
|
4. "SNS에 올리는 것도 귀찮아요"
|
||||||
|
5. "어떤 콘텐츠가 효과적인지 모르겠어요"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 핵심 가치 제안
|
||||||
|
|
||||||
|
### Value Proposition Canvas
|
||||||
|
|
||||||
|
**고객 문제 (Pains)**
|
||||||
|
- 영상 제작 시간 부족
|
||||||
|
- 편집 기술 부족
|
||||||
|
- 높은 외주 비용
|
||||||
|
- 일관성 없는 마케팅
|
||||||
|
|
||||||
|
**솔루션 제공 (Gains)**
|
||||||
|
- 15초 만에 영상 완성
|
||||||
|
- 기술 필요 없음
|
||||||
|
- 월 2.9만원부터
|
||||||
|
- AI가 일관된 품질 보장
|
||||||
|
|
||||||
|
### ROI 계산 예시
|
||||||
|
|
||||||
|
**현재 비용 (외주 의뢰 시)**
|
||||||
|
- 영상 제작: 30만원/건
|
||||||
|
- 월 2개 제작: 60만원
|
||||||
|
- 연간: 720만원
|
||||||
|
|
||||||
|
**CaStAD 사용 시 (Pro 플랜)**
|
||||||
|
- 월 요금: 9.9만원
|
||||||
|
- 연간: 118.8만원
|
||||||
|
- **절감 효과: 연 600만원 이상**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 경쟁 우위
|
||||||
|
|
||||||
|
### 경쟁사 비교표
|
||||||
|
|
||||||
|
| 항목 | CaStAD | A사 (영상 편집 앱) | B사 (마케팅 대행) |
|
||||||
|
|------|--------|------------------|------------------|
|
||||||
|
| 자동화 수준 | ★★★★★ | ★★☆☆☆ | ★☆☆☆☆ |
|
||||||
|
| 가격 | ★★★★★ | ★★★☆☆ | ★☆☆☆☆ |
|
||||||
|
| 숙박업 특화 | ★★★★★ | ★☆☆☆☆ | ★★★☆☆ |
|
||||||
|
| AI 음악 생성 | ★★★★★ | ☆☆☆☆☆ | ☆☆☆☆☆ |
|
||||||
|
| 3채널 통합 | ★★★★★ | ☆☆☆☆☆ | ★★★☆☆ |
|
||||||
|
| 다국어 지원 | ★★★★★ | ★☆☆☆☆ | ★★☆☆☆ |
|
||||||
|
|
||||||
|
### 우리만의 차별점
|
||||||
|
|
||||||
|
1. **숙박업 완전 특화**
|
||||||
|
- 네이버 플레이스 데이터 자동 추출
|
||||||
|
- 숙박업에 최적화된 AI 프롬프트
|
||||||
|
- 업종별 최적화된 템플릿
|
||||||
|
|
||||||
|
2. **완전 자동화**
|
||||||
|
- URL 입력 → 영상 생성 → SNS 업로드까지 원스톱
|
||||||
|
- 예약 업로드 기능으로 정기 마케팅 자동화
|
||||||
|
|
||||||
|
3. **AI 음악 생성**
|
||||||
|
- 로열티 프리 음악 걱정 없음
|
||||||
|
- 펜션 분위기에 맞춤 생성
|
||||||
|
|
||||||
|
4. **합리적인 가격**
|
||||||
|
- 영상 1개 비용 = 커피 한잔 가격
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 요금제 안내
|
||||||
|
|
||||||
|
### 요금제 비교
|
||||||
|
|
||||||
|
| 항목 | Free | Basic | Pro | Business |
|
||||||
|
|------|------|-------|-----|----------|
|
||||||
|
| 월 요금 | 무료 | ₩29,000 | ₩99,000 | ₩299,000 |
|
||||||
|
| 월 크레딧 | 10회 | 15회 | 75회 | 무제한 |
|
||||||
|
| 관리 펜션 | 1개 | 1개 | 5개 | 무제한 |
|
||||||
|
| YouTube 업로드 | ✓ | ✓ | ✓ | ✓ |
|
||||||
|
| Instagram 업로드 | - | ✓ | ✓ | ✓ |
|
||||||
|
| TikTok 업로드 | - | ✓ | ✓ | ✓ |
|
||||||
|
| 다국어 콘텐츠 | - | - | ✓ | ✓ |
|
||||||
|
| 프리미엄 템플릿 | - | - | ✓ | ✓ |
|
||||||
|
| 전담 매니저 | - | - | - | ✓ |
|
||||||
|
| 분석 리포트 | - | - | 주간 | 일간 |
|
||||||
|
|
||||||
|
### 타겟별 추천 플랜
|
||||||
|
|
||||||
|
| 고객 유형 | 추천 플랜 | 이유 |
|
||||||
|
|----------|----------|------|
|
||||||
|
| 개인 펜션 운영자 | Basic | 1개 펜션 관리에 충분한 기능 |
|
||||||
|
| 2-5개 펜션 운영 법인 | Pro | 다중 펜션 관리 + 다국어 |
|
||||||
|
| 리조트/체인 | Business | 무제한 + 전담 지원 |
|
||||||
|
| 시작 테스트 | Free | 무료로 기능 체험 |
|
||||||
|
|
||||||
|
### 업셀링 포인트
|
||||||
|
|
||||||
|
**Free → Basic**
|
||||||
|
- "월 10회로 부족하시죠? 15회로 늘리면서 Instagram까지!"
|
||||||
|
|
||||||
|
**Basic → Pro**
|
||||||
|
- "펜션 추가하셨나요? Pro면 5개까지 관리 가능!"
|
||||||
|
- "외국인 손님 많으시죠? 다국어로 글로벌 마케팅!"
|
||||||
|
|
||||||
|
**Pro → Business**
|
||||||
|
- "월 75회 이상 필요하시면 무제한이 경제적!"
|
||||||
|
- "전담 매니저가 성과 분석까지 도와드립니다!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 데모 시나리오
|
||||||
|
|
||||||
|
### 5분 데모 시나리오
|
||||||
|
|
||||||
|
**1단계: 문제 제기 (30초)**
|
||||||
|
> "사장님, 요즘 인스타 릴스나 틱톡 마케팅 하고 계신가요? 하시려면 영상을 만들어야 하는데 시간도 없고 어렵죠?"
|
||||||
|
|
||||||
|
**2단계: 솔루션 소개 (30초)**
|
||||||
|
> "저희 CaStAD는 네이버 플레이스 URL만 넣으면 자동으로 영상이 만들어집니다. 한번 보시겠어요?"
|
||||||
|
|
||||||
|
**3단계: 실시간 데모 (2분)**
|
||||||
|
1. 고객 펜션의 네이버 플레이스 URL 복사
|
||||||
|
2. CaStAD에 붙여넣기
|
||||||
|
3. 15초 후 영상 생성 완료
|
||||||
|
4. 영상 미리보기 및 다운로드
|
||||||
|
|
||||||
|
**4단계: 기능 설명 (1분)**
|
||||||
|
> "이 영상이 자동으로 만들어졌습니다. 음악도 AI가 만든 거예요.
|
||||||
|
> 여기서 바로 유튜브, 인스타, 틱톡에 업로드할 수 있어요."
|
||||||
|
|
||||||
|
**5단계: 클로징 (30초)**
|
||||||
|
> "지금 무료 체험 가입하시면 10회까지 무료로 사용 가능합니다.
|
||||||
|
> 한번 사용해보시고 효과 있으시면 Basic 플랜 추천드릴게요."
|
||||||
|
|
||||||
|
### 핵심 데모 포인트
|
||||||
|
|
||||||
|
1. **고객의 실제 펜션으로 데모** → 즉각적인 공감
|
||||||
|
2. **15초 생성 시간 강조** → "이게 15초 만에요?"
|
||||||
|
3. **음악도 AI 생성** → "음악도 따로 안 구해도 돼요?"
|
||||||
|
4. **원클릭 업로드** → "바로 올릴 수 있네요!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 예상 질문 및 답변 (FAQ)
|
||||||
|
|
||||||
|
### 제품 관련
|
||||||
|
|
||||||
|
**Q: 영상 품질이 어느 정도예요?**
|
||||||
|
> A: 1080p Full HD로 제작되며, 인스타 릴스나 틱톡에 올리기에 전문가 수준입니다. 실제 데모 영상을 보여드릴까요?
|
||||||
|
|
||||||
|
**Q: 네이버 플레이스가 없으면 못 써요?**
|
||||||
|
> A: 직접 사진 업로드도 가능합니다. 다만 네이버 플레이스가 있으면 리뷰, 정보가 자동 추출되어 더 풍부한 영상이 만들어져요.
|
||||||
|
|
||||||
|
**Q: 음악 저작권 문제는 없나요?**
|
||||||
|
> A: 모든 음악이 Suno AI로 자동 생성되어 저작권 문제가 전혀 없습니다. 상업적 사용도 100% 가능해요.
|
||||||
|
|
||||||
|
**Q: 영상 수정할 수 있어요?**
|
||||||
|
> A: 마음에 안 드시면 다른 스타일로 다시 생성하실 수 있어요. 생성 횟수 내에서 무제한 재생성 가능합니다.
|
||||||
|
|
||||||
|
### 가격 관련
|
||||||
|
|
||||||
|
**Q: 왜 월 구독제예요?**
|
||||||
|
> A: AI 서버 운영 비용이 들기 때문에 구독제로 운영됩니다. 대신 영상 1개당 비용으로 계산하면 건당 2,000원도 안 돼요.
|
||||||
|
|
||||||
|
**Q: 계약 기간은요?**
|
||||||
|
> A: 월 단위 구독이라 언제든 해지 가능합니다. 연 결제 시 20% 할인 혜택도 있어요.
|
||||||
|
|
||||||
|
**Q: 크레딧이 남으면 이월되나요?**
|
||||||
|
> A: 죄송하지만 미사용 크레딧은 이월되지 않습니다. 대신 크레딧 추가 구매가 가능해요.
|
||||||
|
|
||||||
|
### 기술 관련
|
||||||
|
|
||||||
|
**Q: 설치해야 해요?**
|
||||||
|
> A: 웹 기반이라 설치 필요 없습니다. 크롬 브라우저만 있으면 PC, 모바일 어디서든 사용 가능해요.
|
||||||
|
|
||||||
|
**Q: 인스타 연동이 안전한가요?**
|
||||||
|
> A: 비밀번호는 암호화되어 저장되고, 원하시면 언제든 연결 해제 가능합니다. 인스타 공식 연동 방식도 지원해요.
|
||||||
|
|
||||||
|
**Q: 여러 명이 함께 쓸 수 있어요?**
|
||||||
|
> A: Business 플랜에서 팀 계정 기능을 지원합니다. 직원분들과 함께 사용 가능해요.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 성공 사례
|
||||||
|
|
||||||
|
### 사례 1: 제주 오션뷰 펜션
|
||||||
|
> "인스타 팔로워가 한 달 만에 3배 늘었어요.
|
||||||
|
> 매주 릴스 올리는데 10분도 안 걸려요."
|
||||||
|
>
|
||||||
|
> - 월 영상 제작: 15개
|
||||||
|
> - 예약률 증가: 25%
|
||||||
|
> - 팔로워 증가: 850명 → 2,400명
|
||||||
|
|
||||||
|
### 사례 2: 강원도 풀빌라 체인 (5개 지점)
|
||||||
|
> "각 지점 개별로 마케팅하는 게 힘들었는데,
|
||||||
|
> 이제 한 곳에서 5개 다 관리해요."
|
||||||
|
>
|
||||||
|
> - 관리 시간: 주 10시간 → 1시간
|
||||||
|
> - 월 콘텐츠: 5개 → 50개
|
||||||
|
> - 마케팅 비용: 200만원 → 10만원
|
||||||
|
|
||||||
|
### 사례 3: 경기도 글램핑장
|
||||||
|
> "틱톡에서 영상 하나가 10만뷰 나왔어요.
|
||||||
|
> 외국인 예약이 갑자기 늘어났어요."
|
||||||
|
>
|
||||||
|
> - 틱톡 조회수: 평균 1,000 → 15,000
|
||||||
|
> - 외국인 예약: 10% → 35%
|
||||||
|
> - 네이버 플레이스 순위: 8위 → 2위
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 계약 절차
|
||||||
|
|
||||||
|
### 신규 계약 프로세스
|
||||||
|
|
||||||
|
```
|
||||||
|
1. 무료 체험
|
||||||
|
↓
|
||||||
|
2. 데모 및 상담
|
||||||
|
↓
|
||||||
|
3. 플랜 선택
|
||||||
|
↓
|
||||||
|
4. 결제 및 계정 생성
|
||||||
|
↓
|
||||||
|
5. 초기 설정 지원
|
||||||
|
↓
|
||||||
|
6. 정기 영상 생성 시작
|
||||||
|
```
|
||||||
|
|
||||||
|
### 필요 서류
|
||||||
|
- 사업자등록증 (세금계산서 발행 시)
|
||||||
|
- 결제 카드 정보 (자동결제)
|
||||||
|
|
||||||
|
### 결제 방법
|
||||||
|
- 신용카드 (자동결제)
|
||||||
|
- 계좌이체 (연 결제 시)
|
||||||
|
- 세금계산서 발행 가능
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 기술 지원 정책
|
||||||
|
|
||||||
|
### 지원 채널
|
||||||
|
|
||||||
|
| 플랜 | 이메일 | 채팅 | 전화 | 전담 매니저 |
|
||||||
|
|------|--------|------|------|------------|
|
||||||
|
| Free | ✓ (48h) | - | - | - |
|
||||||
|
| Basic | ✓ (24h) | ✓ | - | - |
|
||||||
|
| Pro | ✓ (12h) | ✓ | ✓ | - |
|
||||||
|
| Business | ✓ (4h) | ✓ | ✓ | ✓ |
|
||||||
|
|
||||||
|
### 지원 범위
|
||||||
|
- 계정 및 결제 문의
|
||||||
|
- 기능 사용 방법
|
||||||
|
- SNS 연동 문제
|
||||||
|
- 영상 생성 오류
|
||||||
|
- 비즈니스 플랜: 마케팅 전략 컨설팅 포함
|
||||||
|
|
||||||
|
### 응답 시간 보장
|
||||||
|
- Business 플랜: 4시간 내 응답 보장
|
||||||
|
- 긴급 이슈: 1시간 내 처리
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 영업 자료 체크리스트
|
||||||
|
|
||||||
|
### 필수 준비물
|
||||||
|
- [ ] 데모 계정 (관리자 권한)
|
||||||
|
- [ ] 노트북 + 인터넷 (데모용)
|
||||||
|
- [ ] 명함 및 회사 소개서
|
||||||
|
- [ ] 요금표 출력물
|
||||||
|
- [ ] 계약서 양식
|
||||||
|
|
||||||
|
### 현장 체크
|
||||||
|
- [ ] 고객 네이버 플레이스 URL 확인
|
||||||
|
- [ ] 현재 마케팅 방법 파악
|
||||||
|
- [ ] 예산 및 결정권자 확인
|
||||||
|
- [ ] 경쟁사 사용 여부 확인
|
||||||
|
- [ ] 다음 미팅 일정 잡기
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 연락처
|
||||||
|
|
||||||
|
- **영업 문의**: sales@castad.io
|
||||||
|
- **기술 지원**: support@castad.io
|
||||||
|
- **파트너십**: partners@castad.io
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*이 매뉴얼은 영업팀 내부용입니다. 외부 유출을 금합니다.*
|
||||||
|
|
||||||
|
**마지막 업데이트: 2025년 12월**
|
||||||
|
**버전: 3.0.0**
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# 배포 가이드 (서버에서 실행하세요)
|
||||||
|
|
||||||
|
# 1. 압축 해제
|
||||||
|
# tar -xzvf bizvibe_deploy.tar.gz
|
||||||
|
|
||||||
|
# 2. 필수 패키지 설치 (Ubuntu 기준)
|
||||||
|
# sudo apt-get update && sudo apt-get install -y ffmpeg fonts-noto-cjk
|
||||||
|
|
||||||
|
# 3. 의존성 설치 및 빌드
|
||||||
|
# ./deploy.sh
|
||||||
|
|
||||||
|
# 4. 환경 변수 설정
|
||||||
|
# .env 파일을 열어 API 키들을 확인하고 채워주세요.
|
||||||
|
# 특히 SUNO_API_KEY, VITE_GEMINI_API_KEY 확인 필수!
|
||||||
|
|
||||||
|
# 5. 서버 실행
|
||||||
|
# ./start.sh
|
||||||
|
|
||||||
|
echo "배포 준비 완료! bizvibe_deploy.tar.gz 파일을 서버로 전송하세요."
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
# ADo4 사용자 매뉴얼 (User Manual)
|
||||||
|
|
||||||
|
**ADo4**는 AI 기술을 활용하여 누구나 쉽게 전문가 수준의 마케팅 비디오를 만들 수 있는 도구입니다. 이 매뉴얼을 따라 단계별로 영상을 만들어보세요.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 시작하기 (메인 화면)
|
||||||
|
|
||||||
|
서비스에 접속하면 가장 먼저 보게 되는 메인 대시보드입니다. 왼쪽은 **데이터 입력 영역**, 오른쪽은 **설정 영역**으로 구성되어 있습니다.
|
||||||
|
|
||||||
|
### 1-1. 업체 정보 입력 (자동 검색 기능)
|
||||||
|
|
||||||
|
가장 쉬운 방법은 **[정보 자동 검색]** 기능을 활용하는 것입니다.
|
||||||
|
|
||||||
|
* **Google Maps 검색:** '지도 검색 (Global)' 입력창에 `지역명 + 상호명` (예: "강남 스타벅스", "군산 이성당")을 입력하고 **[검색]** 버튼을 누르세요.
|
||||||
|
* **Naver 플레이스:** 네이버 지도 URL이 있다면 붙여넣고 **[가져오기]**를 누르면 더욱 정확한 한국형 데이터를 가져올 수 있습니다.
|
||||||
|
|
||||||
|
> 💡 **Tip:** 자동 검색을 사용하면 업체명, 설명, 대표 사진(AI가 선별한 베스트 컷)이 자동으로 채워집니다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 세부 설정 (Customization)
|
||||||
|
|
||||||
|
자동으로 입력된 정보를 확인하고, 원하는 스타일로 다듬어 보세요.
|
||||||
|
|
||||||
|
### 2-1. 프로젝트 설정
|
||||||
|
* **브랜드 이름 & 설명:** 자동 입력된 내용을 수정하거나 직접 입력합니다. 이곳에 적힌 내용(분위기, 특징)을 바탕으로 AI가 가사를 씁니다.
|
||||||
|
* **화면 비율:**
|
||||||
|
* `16:9`: 유튜브, TV, 모니터용 (가로형)
|
||||||
|
* `9:16`: 인스타그램 릴스, 틱톡, 유튜브 쇼츠용 (세로형)
|
||||||
|
* **비주얼 스타일:**
|
||||||
|
* `슬라이드`: 사진들이 부드럽게 전환되는 슬라이드쇼 영상 (추천)
|
||||||
|
* `AI 비디오`: 사진을 바탕으로 AI가 움직이는 영상을 생성 (생성 시간 김)
|
||||||
|
|
||||||
|
### 2-2. 오디오 및 자막 설정
|
||||||
|
* **오디오 모드:**
|
||||||
|
* `노래 (Song)`: 나만의 오리지널 CM송을 작곡합니다.
|
||||||
|
* `성우 (Narration)`: 차분하고 신뢰감 있는 성우 목소리로 읽어줍니다.
|
||||||
|
* **장르 선택:** 팝, 발라드, 재즈, 힙합 등 원하는 분위기를 고르세요.
|
||||||
|
* **자막 스타일:** 영상 위에 입혀질 자막의 디자인(네온, 타자기 등)을 선택하세요.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 영상 생성 시작
|
||||||
|
|
||||||
|
모든 설정이 끝났다면, 우측 하단의 **[영상 생성 시작]** 버튼을 클릭하세요.
|
||||||
|
|
||||||
|
> ⏳ **소요 시간:** 약 1~2분 정도 소요됩니다.
|
||||||
|
> AI가 시나리오 작성 -> 작곡 -> 이미지 검수 -> 영상 합성을 진행하는 동안 잠시만 기다려주세요.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 결과 확인 및 저장 (플레이어 화면)
|
||||||
|
|
||||||
|
영상이 완성되면 자동으로 **결과 플레이어** 화면이 나타납니다.
|
||||||
|
|
||||||
|
### 4-1. 영상 재생
|
||||||
|
* 가운데 **[재생 ▶]** 버튼을 눌러 완성된 영상을 감상해 보세요.
|
||||||
|
* 가사나 광고 문구가 음악에 맞춰 화면에 나타나는 것을 볼 수 있습니다.
|
||||||
|
|
||||||
|
### 4-2. 영상 저장 및 활용
|
||||||
|
* **[영상 저장 (텍스트 효과 포함)]:** 완성된 고화질 MP4 파일을 내 컴퓨터로 다운로드합니다. 동시에 서버에서 **YouTube 자동 업로드** 준비가 진행됩니다.
|
||||||
|
* **[YouTube 업로드]:** (영상 저장 후 활성화됨) 클릭 한 번으로 내 유튜브 채널에 영상을 업로드합니다. 업로드가 완료되면 **[보러가기]** 버튼이 나타납니다.
|
||||||
|
* **[빠른 저장 (효과X)]:** 자막 효과 없이 원본 영상과 음악만 빠르게 합쳐서 저장하고 싶을 때 사용합니다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ❓ 자주 묻는 질문 (FAQ)
|
||||||
|
|
||||||
|
**Q. 영상 생성이 실패했어요.**
|
||||||
|
A. 일시적인 네트워크 문제일 수 있습니다. 잠시 후 다시 시도해 주세요. 계속 실패한다면 입력한 이미지의 용량이 너무 크거나(개당 10MB 이상), 인터넷 연결이 불안정할 수 있습니다.
|
||||||
|
|
||||||
|
**Q. 유튜브 업로드가 안 돼요.**
|
||||||
|
A. 최초 1회 인증이 필요합니다. 관리자에게 문의하거나 서버 설정 가이드를 참고하여 구글 계정 인증을 완료해주세요.
|
||||||
|
|
||||||
|
**Q. 세로 영상(9:16)인데 사진이 잘려요.**
|
||||||
|
A. AI가 자동으로 최적의 구도를 찾지만, 가로로 긴 사진은 양옆이 잘릴 수밖에 없습니다. 되도록 세로로 찍은 사진을 업로드하거나, AI에게 맡겨주세요.
|
||||||
|
|
||||||
|
---
|
||||||
|
© 2025 ADo4. All Rights Reserved.
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "default",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.js",
|
||||||
|
"css": "src/styles/globals.css",
|
||||||
|
"baseColor": "zinc",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/src/components",
|
||||||
|
"utils": "@/src/lib/utils",
|
||||||
|
"ui": "@/src/components/ui",
|
||||||
|
"lib": "@/src/lib",
|
||||||
|
"hooks": "@/src/hooks"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Key } from 'lucide-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ApiKeySelector 컴포넌트의 props 정의
|
||||||
|
* @interface ApiKeySelectorProps
|
||||||
|
* @property {(key?: string) => void} onKeySelected - API 키가 성공적으로 선택되거나 입력되었을 때 호출될 콜백 함수. (선택된 키를 인자로 받을 수 있음)
|
||||||
|
* @property {string | null} [initialError] - 초기 에러 메시지 (선택 사항)
|
||||||
|
*/
|
||||||
|
interface ApiKeySelectorProps {
|
||||||
|
onKeySelected: (key?: string) => void;
|
||||||
|
initialError?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* API 키 선택 및 입력 컴포넌트
|
||||||
|
* Gemini 및 Veo 모델 사용을 위해 Google Cloud Project의 API 키를 설정하도록 안내하고,
|
||||||
|
* AI Studio 환경 또는 수동 입력 방식을 제공합니다.
|
||||||
|
*/
|
||||||
|
const ApiKeySelector: React.FC<ApiKeySelectorProps> = ({ onKeySelected, initialError }) => {
|
||||||
|
const [loading, setLoading] = useState(false); // 로딩 상태 관리
|
||||||
|
const [error, setError] = useState<string | null>(initialError || null); // 에러 메시지 관리
|
||||||
|
const [manualKey, setManualKey] = useState(''); // 수동으로 입력된 API 키
|
||||||
|
const [isAiStudio, setIsAiStudio] = useState(false); // 현재 환경이 Google AI Studio인지 여부
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 환경 체크 및 초기 API 키 확인
|
||||||
|
* 컴포넌트 마운트 시 Google AI Studio 환경인지 확인하고, 이미 API 키가 선택되어 있는지 검사합니다.
|
||||||
|
*/
|
||||||
|
const checkKey = async () => {
|
||||||
|
try {
|
||||||
|
// window 객체에 aistudio 속성이 있는지 확인하여 AI Studio 환경을 감지합니다.
|
||||||
|
if ((window as any).aistudio) {
|
||||||
|
setIsAiStudio(true);
|
||||||
|
// AI Studio에서 이미 API 키가 선택되어 있는지 확인합니다.
|
||||||
|
const hasKey = await (window as any).aistudio.hasSelectedApiKey();
|
||||||
|
if (hasKey && !initialError) {
|
||||||
|
// 키가 이미 선택되어 있고 초기 에러가 없으면 onKeySelected 콜백을 호출하여 앱 시작
|
||||||
|
onKeySelected();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("API 키 확인 중 오류 발생:", e);
|
||||||
|
// 오류가 발생해도 isAiStudio 상태는 유지
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컴포넌트가 처음 렌더링될 때 한 번만 checkKey 함수 실행
|
||||||
|
useEffect(() => {
|
||||||
|
checkKey();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AI Studio에서 API 키 선택 핸들러
|
||||||
|
* AI Studio의 `openSelectKey()` 함수를 호출하여 API 키 선택 UI를 띄웁니다.
|
||||||
|
*/
|
||||||
|
const handleSelectKey = async () => {
|
||||||
|
setLoading(true); // 로딩 상태 시작
|
||||||
|
setError(null); // 기존 에러 메시지 초기화
|
||||||
|
try {
|
||||||
|
if((window as any).aistudio) {
|
||||||
|
await (window as any).aistudio.openSelectKey(); // AI Studio 키 선택 대화 상자 열기
|
||||||
|
onKeySelected(); // 키 선택 성공 시 콜백 호출
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("API 키 선택 중 오류 발생:", e);
|
||||||
|
// 특정 에러 메시지에 따라 사용자에게 더 명확한 안내 제공
|
||||||
|
if (e.message && e.message.includes("Requested entity was not found")) {
|
||||||
|
setError("유효하지 않은 프로젝트/키가 선택되었습니다. 다시 시도해주세요.");
|
||||||
|
} else {
|
||||||
|
setError("API 키 선택에 실패했습니다. 다시 시도해주세요.");
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false); // 로딩 상태 종료
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 수동 API 키 입력 폼 제출 핸들러
|
||||||
|
* 사용자가 직접 입력한 API 키를 검증하고 콜백 함수를 호출합니다.
|
||||||
|
*/
|
||||||
|
const handleManualSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault(); // 폼 기본 제출 동작 방지
|
||||||
|
if(!manualKey.trim()) {
|
||||||
|
setError("유효한 API 키를 입력해주세요."); // 빈 값일 경우 에러 메시지
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onKeySelected(manualKey.trim()); // 유효한 키가 입력되면 콜백 호출
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 p-4">
|
||||||
|
<div className="glass-panel p-8 rounded-2xl max-w-md w-full text-center border border-purple-500/30 shadow-2xl shadow-purple-900/20">
|
||||||
|
<div className="mb-6 flex justify-center">
|
||||||
|
<div className="p-4 bg-purple-900/30 rounded-full">
|
||||||
|
<Key className="w-8 h-8 text-purple-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">API 키 필요</h2>
|
||||||
|
<p className="text-gray-400 mb-6">
|
||||||
|
Veo 및 Gemini로 고품질 뮤직 비디오를 생성하려면, 결제 가능한 Google Cloud 프로젝트의 API 키를 선택해주세요.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 p-3 bg-red-900/30 border border-red-500/30 rounded text-red-200 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isAiStudio ? (
|
||||||
|
// AI Studio 환경일 경우 API 키 선택 버튼 제공
|
||||||
|
<button
|
||||||
|
onClick={handleSelectKey}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-xl transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
|
||||||
|
>
|
||||||
|
{loading ? '연결 중...' : 'API 키 선택'}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
// 일반 브라우저 환경일 경우 수동 API 키 입력 폼 제공
|
||||||
|
<form onSubmit={handleManualSubmit} className="flex flex-col gap-4">
|
||||||
|
<input
|
||||||
|
type="password" // 비밀번호 타입으로 입력 값 숨김
|
||||||
|
value={manualKey}
|
||||||
|
onChange={(e) => setManualKey(e.target.value)}
|
||||||
|
placeholder="Gemini API 키 입력"
|
||||||
|
className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-xl transition-all transform hover:scale-105 shadow-lg"
|
||||||
|
>
|
||||||
|
앱 시작
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-4 text-xs text-gray-500">
|
||||||
|
<a href="https://ai.google.dev/gemini-api/docs/billing" target="_blank" rel="noreferrer" className="underline hover:text-gray-300">
|
||||||
|
결제 문서 보기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ApiKeySelector;
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface CaStADLogoProps {
|
||||||
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||||
|
showText?: boolean;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: { icon: 'w-8 h-8', text: 'text-lg' },
|
||||||
|
md: { icon: 'w-12 h-12', text: 'text-xl' },
|
||||||
|
lg: { icon: 'w-16 h-16', text: 'text-2xl' },
|
||||||
|
xl: { icon: 'w-24 h-24', text: 'text-4xl' },
|
||||||
|
};
|
||||||
|
|
||||||
|
// Main CaStAD Logo with custard pudding icon
|
||||||
|
export const CaStADLogo: React.FC<CaStADLogoProps> = ({
|
||||||
|
size = 'md',
|
||||||
|
showText = true,
|
||||||
|
className
|
||||||
|
}) => {
|
||||||
|
const { icon, text } = sizeClasses[size];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-2 ${className || ''}`}>
|
||||||
|
{/* Custard Pudding SVG Icon */}
|
||||||
|
<div className={`${icon} relative`}>
|
||||||
|
<img
|
||||||
|
src="/images/castad-logo.svg"
|
||||||
|
alt="CaStAD"
|
||||||
|
className="w-full h-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{showText && (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent`}>
|
||||||
|
CaStAD
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-muted-foreground tracking-wide">
|
||||||
|
카스타드
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Inline version with custard cream colors
|
||||||
|
export const CaStADLogoInline: React.FC<CaStADLogoProps> = ({
|
||||||
|
size = 'md',
|
||||||
|
className
|
||||||
|
}) => {
|
||||||
|
const { icon, text } = sizeClasses[size];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-2 ${className || ''}`}>
|
||||||
|
{/* Custard emoji as simple icon */}
|
||||||
|
<span className={`${icon} flex items-center justify-center`}>
|
||||||
|
<span className="text-2xl">🍮</span>
|
||||||
|
</span>
|
||||||
|
<span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent`}>
|
||||||
|
CaStAD
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Icon only version
|
||||||
|
export const CaStADIcon: React.FC<{ size?: 'sm' | 'md' | 'lg' | 'xl'; className?: string }> = ({
|
||||||
|
size = 'md',
|
||||||
|
className
|
||||||
|
}) => {
|
||||||
|
const { icon } = sizeClasses[size];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${icon} ${className || ''}`}>
|
||||||
|
<img
|
||||||
|
src="/images/castad-logo.svg"
|
||||||
|
alt="CaStAD"
|
||||||
|
className="w-full h-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Text only gradient version
|
||||||
|
export const CaStADText: React.FC<{ size?: 'sm' | 'md' | 'lg' | 'xl'; className?: string }> = ({
|
||||||
|
size = 'md',
|
||||||
|
className
|
||||||
|
}) => {
|
||||||
|
const { text } = sizeClasses[size];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent ${className || ''}`}>
|
||||||
|
CaStAD
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CaStADLogo;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,133 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { useLanguage } from '../src/contexts/LanguageContext';
|
||||||
|
import { cn } from '../src/lib/utils';
|
||||||
|
import { Card, CardContent } from '../src/components/ui/card';
|
||||||
|
import { Progress } from '../src/components/ui/progress';
|
||||||
|
import { Loader2, Sparkles, Music, Image, Video, CheckCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
interface LoadingOverlayProps {
|
||||||
|
status: string;
|
||||||
|
message: string;
|
||||||
|
progress?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEP_ICONS: Record<string, React.ReactNode> = {
|
||||||
|
'crawling': <Sparkles className="w-6 h-6" />,
|
||||||
|
'generating_text': <Sparkles className="w-6 h-6" />,
|
||||||
|
'generating_audio': <Music className="w-6 h-6" />,
|
||||||
|
'generating_poster': <Image className="w-6 h-6" />,
|
||||||
|
'generating_video': <Video className="w-6 h-6" />,
|
||||||
|
'completed': <CheckCircle className="w-6 h-6 text-green-500" />,
|
||||||
|
};
|
||||||
|
|
||||||
|
const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ status, message, progress }) => {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
|
||||||
|
let displayMessage = message;
|
||||||
|
|
||||||
|
switch (status) {
|
||||||
|
case 'crawling':
|
||||||
|
case 'generating_text':
|
||||||
|
displayMessage = t('loadingStep1');
|
||||||
|
break;
|
||||||
|
case 'generating_audio':
|
||||||
|
displayMessage = t('loadingStep2').replace('{style}', 'Auto');
|
||||||
|
break;
|
||||||
|
case 'generating_poster':
|
||||||
|
case 'generating_video':
|
||||||
|
displayMessage = t('loadingStep3');
|
||||||
|
break;
|
||||||
|
case 'completed':
|
||||||
|
displayMessage = t('loadingStep4');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentProgress = progress || (
|
||||||
|
status === 'crawling' ? 10 :
|
||||||
|
status === 'generating_text' ? 25 :
|
||||||
|
status === 'generating_audio' ? 50 :
|
||||||
|
status === 'generating_poster' ? 70 :
|
||||||
|
status === 'generating_video' ? 85 :
|
||||||
|
status === 'completed' ? 100 : 10
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentIcon = STEP_ICONS[status] || <Sparkles className="w-6 h-6" />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm">
|
||||||
|
<Card className="w-full max-w-md mx-4 border-border/50 shadow-2xl">
|
||||||
|
<CardContent className="pt-8 pb-8 text-center">
|
||||||
|
|
||||||
|
{/* Animated Icon */}
|
||||||
|
<div className="relative w-24 h-24 mx-auto mb-8">
|
||||||
|
{/* Outer ring */}
|
||||||
|
<div className="absolute inset-0 rounded-full border-4 border-primary/20 animate-ping" style={{ animationDuration: '2s' }} />
|
||||||
|
|
||||||
|
{/* Spinning ring */}
|
||||||
|
<div className="absolute inset-0 rounded-full border-4 border-transparent border-t-primary border-r-accent animate-spin" style={{ animationDuration: '1.5s' }} />
|
||||||
|
|
||||||
|
{/* Center icon */}
|
||||||
|
<div className="absolute inset-3 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg">
|
||||||
|
<div className="text-primary-foreground animate-pulse">
|
||||||
|
{currentIcon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-2">
|
||||||
|
{t('loadingTitle')}
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted-foreground text-sm mb-6">
|
||||||
|
{t('loadingSubtitle')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<Progress value={currentProgress} className="h-2" />
|
||||||
|
<div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
|
||||||
|
<span>{t('textStyle') === '자막 스타일' ? '진행률' : 'Progress'}</span>
|
||||||
|
<span className="font-medium">{currentProgress}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Message */}
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-4">
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin text-primary" />
|
||||||
|
<p className="text-lg font-semibold gradient-text">
|
||||||
|
{displayMessage}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Steps indicator */}
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-6">
|
||||||
|
{['generating_text', 'generating_audio', 'generating_poster', 'completed'].map((step, idx) => {
|
||||||
|
const isActive = status === step;
|
||||||
|
const isPast = ['generating_text', 'generating_audio', 'generating_poster', 'generating_video', 'completed'].indexOf(status) >
|
||||||
|
['generating_text', 'generating_audio', 'generating_poster', 'completed'].indexOf(step);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={step}
|
||||||
|
className={cn(
|
||||||
|
"w-2 h-2 rounded-full transition-all",
|
||||||
|
isActive && "w-6 bg-primary",
|
||||||
|
isPast && "bg-primary/60",
|
||||||
|
!isActive && !isPast && "bg-muted-foreground/30"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t('loadingWait')}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoadingOverlay;
|
||||||
|
|
@ -0,0 +1,555 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||||
|
import { useAuth } from '../src/contexts/AuthContext';
|
||||||
|
import { useLanguage } from '../src/contexts/LanguageContext';
|
||||||
|
import { useTheme, PALETTES, ColorPalette } from '../src/contexts/ThemeContext';
|
||||||
|
import {
|
||||||
|
LogOut,
|
||||||
|
User,
|
||||||
|
LayoutDashboard,
|
||||||
|
Menu,
|
||||||
|
Settings,
|
||||||
|
Globe,
|
||||||
|
ChevronDown,
|
||||||
|
Video,
|
||||||
|
Shield,
|
||||||
|
X,
|
||||||
|
Coins,
|
||||||
|
AlertCircle,
|
||||||
|
Sun,
|
||||||
|
Moon,
|
||||||
|
Palette,
|
||||||
|
Check
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { CaStADLogo, CaStADLogoInline } from './CaStADLogo';
|
||||||
|
import { Language } from '../types';
|
||||||
|
import { cn } from '../src/lib/utils';
|
||||||
|
import { Button } from '../src/components/ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '../src/components/ui/dropdown-menu';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
} from '../src/components/ui/sheet';
|
||||||
|
import { Avatar, AvatarFallback } from '../src/components/ui/avatar';
|
||||||
|
import { Badge } from '../src/components/ui/badge';
|
||||||
|
import { Separator } from '../src/components/ui/separator';
|
||||||
|
|
||||||
|
const LANGUAGES = [
|
||||||
|
{ code: 'KO', label: '한국어', flag: 'kr' },
|
||||||
|
{ code: 'EN', label: 'English', flag: 'us' },
|
||||||
|
{ code: 'JP', label: '日本語', flag: 'jp' },
|
||||||
|
{ code: 'CN', label: '中文', flag: 'cn' },
|
||||||
|
{ code: 'TH', label: 'ไทย', flag: 'th' },
|
||||||
|
{ code: 'VN', label: 'Tiếng Việt', flag: 'vn' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const Navbar: React.FC = () => {
|
||||||
|
const { user, logout, token } = useAuth();
|
||||||
|
const { language, setLanguage, t } = useLanguage();
|
||||||
|
const { theme, palette, toggleTheme, setPalette } = useTheme();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [mobileOpen, setMobileOpen] = useState(false);
|
||||||
|
const [credits, setCredits] = useState<number | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 10);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 크레딧 조회
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchCredits = async () => {
|
||||||
|
if (!user || !token) {
|
||||||
|
setCredits(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const backendPort = import.meta.env.VITE_BACKEND_PORT || '3001';
|
||||||
|
const res = await fetch(`http://localhost:${backendPort}/api/credits`, {
|
||||||
|
headers: { Authorization: `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setCredits(data.credits);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch credits:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchCredits();
|
||||||
|
// 주기적으로 업데이트 (30초마다)
|
||||||
|
const interval = setInterval(fetchCredits, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [user, token]);
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
logout();
|
||||||
|
navigate('/login');
|
||||||
|
setMobileOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Hide navbar during server rendering (autoplay mode)
|
||||||
|
const searchParams = new URLSearchParams(location.search);
|
||||||
|
if (searchParams.get('autoplay') === 'true') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentLanguage = LANGUAGES.find(l => l.code === language) || LANGUAGES[0];
|
||||||
|
|
||||||
|
const NavLink = ({ to, children, icon: Icon }: { to: string; children: React.ReactNode; icon?: React.ElementType }) => {
|
||||||
|
const isActive = location.pathname === to;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
to={to}
|
||||||
|
onClick={() => setMobileOpen(false)}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200",
|
||||||
|
isActive
|
||||||
|
? "bg-primary/10 text-primary"
|
||||||
|
: "text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{Icon && <Icon className="w-4 h-4" />}
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
className={cn(
|
||||||
|
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
|
||||||
|
isScrolled
|
||||||
|
? "bg-background/80 backdrop-blur-xl border-b border-border shadow-sm"
|
||||||
|
: "bg-background/50 backdrop-blur-md"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link to="/" className="flex items-center group hover:opacity-90 transition-opacity">
|
||||||
|
<CaStADLogo size="sm" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<div className="hidden md:flex items-center gap-1">
|
||||||
|
<NavLink to="/" icon={Video}>
|
||||||
|
{t('menuCreate')}
|
||||||
|
</NavLink>
|
||||||
|
{user && (
|
||||||
|
<NavLink to="/dashboard" icon={LayoutDashboard}>
|
||||||
|
{t('menuLibrary')}
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
|
{user?.role === 'admin' && (
|
||||||
|
<NavLink to="/admin" icon={Shield}>
|
||||||
|
{t('menuAdmin')}
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Actions */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* Language Switcher */}
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="gap-1.5 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<span className={`fi fi-${currentLanguage.flag} rounded-sm`} />
|
||||||
|
<span className="hidden sm:inline text-xs font-medium">
|
||||||
|
{currentLanguage.code}
|
||||||
|
</span>
|
||||||
|
<ChevronDown className="w-3 h-3 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-40">
|
||||||
|
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||||
|
{t('settingLanguage') || 'Language'}
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{LANGUAGES.map((lang) => (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={lang.code}
|
||||||
|
onClick={() => setLanguage(lang.code as Language)}
|
||||||
|
className={cn(
|
||||||
|
"gap-2 cursor-pointer",
|
||||||
|
language === lang.code && "bg-accent"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className={`fi fi-${lang.flag} rounded-sm`} />
|
||||||
|
<span className="text-sm">{lang.label}</span>
|
||||||
|
{language === lang.code && (
|
||||||
|
<Badge variant="secondary" className="ml-auto text-[10px] px-1.5">
|
||||||
|
✓
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
|
||||||
|
{/* Theme Toggle */}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="w-9 h-9 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
{theme === 'dark' ? (
|
||||||
|
<Sun className="w-4 h-4" />
|
||||||
|
) : (
|
||||||
|
<Moon className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
<span className="sr-only">테마 변경</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Palette Selector */}
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="w-9 h-9 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Palette className="w-4 h-4" />
|
||||||
|
<span className="sr-only">컬러 팔레트</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-44">
|
||||||
|
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||||
|
컬러 팔레트
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{(Object.keys(PALETTES) as ColorPalette[]).map((key) => (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={key}
|
||||||
|
onClick={() => setPalette(key)}
|
||||||
|
className="gap-2 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className={cn(
|
||||||
|
"w-5 h-5 rounded-full bg-gradient-to-r",
|
||||||
|
PALETTES[key].preview
|
||||||
|
)} />
|
||||||
|
<span className="text-sm">{PALETTES[key].name}</span>
|
||||||
|
{palette === key && (
|
||||||
|
<Check className="w-4 h-4 ml-auto text-primary" />
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
|
||||||
|
{/* User Menu / Auth Buttons */}
|
||||||
|
{user ? (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="sm" className="gap-2 pl-2">
|
||||||
|
<Avatar className="w-7 h-7">
|
||||||
|
<AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">
|
||||||
|
{user.name?.charAt(0).toUpperCase() || 'U'}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<span className="hidden sm:inline text-sm font-medium max-w-[100px] truncate">
|
||||||
|
{user.name}
|
||||||
|
</span>
|
||||||
|
<ChevronDown className="w-3 h-3 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-56">
|
||||||
|
<DropdownMenuLabel className="font-normal">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<p className="text-sm font-medium">{user.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">@{user.username}</p>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{/* 크레딧 표시 */}
|
||||||
|
{user.role !== 'admin' && credits !== null && (
|
||||||
|
<>
|
||||||
|
<div className="px-2 py-2">
|
||||||
|
<div className={cn(
|
||||||
|
"flex items-center justify-between px-3 py-2 rounded-lg",
|
||||||
|
credits <= 0 ? "bg-destructive/10" : credits <= 3 ? "bg-yellow-500/10" : "bg-primary/10"
|
||||||
|
)}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Coins className={cn(
|
||||||
|
"w-4 h-4",
|
||||||
|
credits <= 0 ? "text-destructive" : credits <= 3 ? "text-yellow-600" : "text-primary"
|
||||||
|
)} />
|
||||||
|
<span className="text-sm font-medium">크레딧</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className={cn(
|
||||||
|
"text-lg font-bold",
|
||||||
|
credits <= 0 ? "text-destructive" : credits <= 3 ? "text-yellow-600" : "text-primary"
|
||||||
|
)}>
|
||||||
|
{credits}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground">개</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{credits <= 3 && (
|
||||||
|
<Link
|
||||||
|
to="/credits"
|
||||||
|
className="flex items-center gap-1.5 mt-2 text-xs text-muted-foreground hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
<AlertCircle className="w-3 h-3" />
|
||||||
|
{credits <= 0 ? '크레딧이 부족합니다. 충전 요청하기' : '크레딧이 부족합니다'}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<DropdownMenuItem asChild className="cursor-pointer">
|
||||||
|
<Link to="/dashboard" className="flex items-center gap-2">
|
||||||
|
<LayoutDashboard className="w-4 h-4" />
|
||||||
|
{t('menuLibrary')}
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{user.role === 'admin' && (
|
||||||
|
<DropdownMenuItem asChild className="cursor-pointer">
|
||||||
|
<Link to="/admin" className="flex items-center gap-2">
|
||||||
|
<Shield className="w-4 h-4" />
|
||||||
|
{t('menuAdmin')}
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="cursor-pointer text-destructive focus:text-destructive"
|
||||||
|
>
|
||||||
|
<LogOut className="w-4 h-4 mr-2" />
|
||||||
|
{t('menuLogout')}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
) : (
|
||||||
|
<div className="hidden md:flex items-center gap-2">
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link to="/login">{t('menuLogin')}</Link>
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" className="shadow-lg shadow-primary/20" asChild>
|
||||||
|
<Link to="/register">{t('menuStart')}</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||||
|
<SheetTrigger asChild className="md:hidden">
|
||||||
|
<Button variant="ghost" size="icon" className="shrink-0">
|
||||||
|
<Menu className="w-5 h-5" />
|
||||||
|
<span className="sr-only">메뉴 열기</span>
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent side="right" className="w-[300px] sm:w-[350px]">
|
||||||
|
<SheetHeader className="text-left">
|
||||||
|
<SheetTitle>
|
||||||
|
<CaStADLogo size="sm" />
|
||||||
|
</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
|
||||||
|
<div className="mt-8 flex flex-col gap-2">
|
||||||
|
{/* Mobile Navigation Links */}
|
||||||
|
<NavLink to="/" icon={Video}>
|
||||||
|
{t('menuCreate')}
|
||||||
|
</NavLink>
|
||||||
|
{user && (
|
||||||
|
<NavLink to="/dashboard" icon={LayoutDashboard}>
|
||||||
|
{t('menuLibrary')}
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
|
{user?.role === 'admin' && (
|
||||||
|
<NavLink to="/admin" icon={Shield}>
|
||||||
|
{t('menuAdmin')}
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
|
{/* Mobile User Section */}
|
||||||
|
{user ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-3 px-3 py-2">
|
||||||
|
<Avatar className="w-10 h-10">
|
||||||
|
<AvatarFallback className="bg-primary/10 text-primary font-semibold">
|
||||||
|
{user.name?.charAt(0).toUpperCase() || 'U'}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium truncate">{user.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">@{user.username}</p>
|
||||||
|
</div>
|
||||||
|
{user.role === 'admin' && (
|
||||||
|
<Badge variant="secondary" className="text-[10px]">Admin</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* 모바일 크레딧 표시 */}
|
||||||
|
{user.role !== 'admin' && credits !== null && (
|
||||||
|
<div className={cn(
|
||||||
|
"flex items-center justify-between px-3 py-3 rounded-lg mx-3",
|
||||||
|
credits <= 0 ? "bg-destructive/10" : credits <= 3 ? "bg-yellow-500/10" : "bg-primary/10"
|
||||||
|
)}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Coins className={cn(
|
||||||
|
"w-5 h-5",
|
||||||
|
credits <= 0 ? "text-destructive" : credits <= 3 ? "text-yellow-600" : "text-primary"
|
||||||
|
)} />
|
||||||
|
<span className="font-medium">크레딧</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className={cn(
|
||||||
|
"text-xl font-bold",
|
||||||
|
credits <= 0 ? "text-destructive" : credits <= 3 ? "text-yellow-600" : "text-primary"
|
||||||
|
)}>
|
||||||
|
{credits}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-muted-foreground">개</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{user.role !== 'admin' && credits !== null && credits <= 3 && (
|
||||||
|
<Link
|
||||||
|
to="/credits"
|
||||||
|
onClick={() => setMobileOpen(false)}
|
||||||
|
className="flex items-center justify-center gap-2 mx-3 px-3 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors"
|
||||||
|
>
|
||||||
|
<Coins className="w-4 h-4" />
|
||||||
|
크레딧 충전 요청
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start gap-2 text-destructive hover:text-destructive"
|
||||||
|
onClick={handleLogout}
|
||||||
|
>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
{t('menuLogout')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Button variant="outline" className="w-full" asChild>
|
||||||
|
<Link to="/login" onClick={() => setMobileOpen(false)}>
|
||||||
|
{t('menuLogin')}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<Button className="w-full" asChild>
|
||||||
|
<Link to="/register" onClick={() => setMobileOpen(false)}>
|
||||||
|
{t('menuStart')}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
|
{/* Mobile Theme Settings */}
|
||||||
|
<div className="px-3 space-y-4">
|
||||||
|
{/* Theme Toggle */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{theme === 'dark' ? '다크 모드' : '라이트 모드'}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
{theme === 'dark' ? (
|
||||||
|
<>
|
||||||
|
<Sun className="w-4 h-4" />
|
||||||
|
<span>라이트</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Moon className="w-4 h-4" />
|
||||||
|
<span>다크</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Palette Selection */}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-muted-foreground mb-2">
|
||||||
|
컬러 팔레트
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{(Object.keys(PALETTES) as ColorPalette[]).map((key) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
onClick={() => setPalette(key)}
|
||||||
|
className={cn(
|
||||||
|
"w-8 h-8 rounded-full bg-gradient-to-r transition-all",
|
||||||
|
PALETTES[key].preview,
|
||||||
|
palette === key
|
||||||
|
? "ring-2 ring-offset-2 ring-offset-background ring-primary scale-110"
|
||||||
|
: "hover:scale-105"
|
||||||
|
)}
|
||||||
|
title={PALETTES[key].name}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
|
{/* Mobile Language Selection */}
|
||||||
|
<div className="px-3">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground mb-2">
|
||||||
|
{t('settingLanguage') || 'Language'}
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{LANGUAGES.map((lang) => (
|
||||||
|
<button
|
||||||
|
key={lang.code}
|
||||||
|
onClick={() => setLanguage(lang.code as Language)}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors",
|
||||||
|
language === lang.code
|
||||||
|
? "bg-primary/10 text-primary border border-primary/20"
|
||||||
|
: "bg-accent/50 hover:bg-accent"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className={`fi fi-${lang.flag} rounded-sm`} />
|
||||||
|
<span className="truncate">{lang.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
|
|
@ -0,0 +1,234 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { X, ChevronRight, Check } from 'lucide-react';
|
||||||
|
|
||||||
|
interface TourStep {
|
||||||
|
target: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
placement?: 'top' | 'bottom' | 'left' | 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OnboardingTourProps {
|
||||||
|
steps: TourStep[];
|
||||||
|
onComplete: () => void;
|
||||||
|
onSkip: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const OnboardingTour: React.FC<OnboardingTourProps> = ({ steps, onComplete, onSkip }) => {
|
||||||
|
const [currentStep, setCurrentStep] = useState(0);
|
||||||
|
const [position, setPosition] = useState({ top: 0, left: 0 });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Remove previous highlights
|
||||||
|
document.querySelectorAll('.tour-highlight').forEach(el => {
|
||||||
|
el.classList.remove('tour-highlight');
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatePosition = () => {
|
||||||
|
const target = document.querySelector(steps[currentStep].target);
|
||||||
|
|
||||||
|
if (!target) {
|
||||||
|
console.warn(`Tour target not found: ${steps[currentStep].target}`);
|
||||||
|
// Try again after a short delay
|
||||||
|
setTimeout(updatePosition, 100);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 팝업을 화면 기준으로 고정 배치 (스크롤에 영향받지 않음)
|
||||||
|
const viewportWidth = window.innerWidth;
|
||||||
|
|
||||||
|
// 모바일/데스크톱 구분
|
||||||
|
const isMobile = viewportWidth < 768;
|
||||||
|
|
||||||
|
let top: number;
|
||||||
|
let left: number;
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
// 모바일: 화면 하단 고정
|
||||||
|
top = 20; // viewport 기준
|
||||||
|
left = 20;
|
||||||
|
} else {
|
||||||
|
// 데스크톱: 화면 우측 상단 고정
|
||||||
|
top = 20; // viewport 기준 (상단에서 20px)
|
||||||
|
left = viewportWidth - 340; // 우측에서 340px (카드 너비 320 + 여유 20)
|
||||||
|
}
|
||||||
|
|
||||||
|
setPosition({ top, left });
|
||||||
|
|
||||||
|
// Highlight target element
|
||||||
|
target.classList.add('tour-highlight');
|
||||||
|
|
||||||
|
// Scroll into view
|
||||||
|
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Wait for DOM to be ready
|
||||||
|
const timer = setTimeout(updatePosition, 150);
|
||||||
|
|
||||||
|
window.addEventListener('resize', updatePosition);
|
||||||
|
window.addEventListener('scroll', updatePosition);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
window.removeEventListener('resize', updatePosition);
|
||||||
|
window.removeEventListener('scroll', updatePosition);
|
||||||
|
};
|
||||||
|
}, [currentStep, steps]);
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentStep < steps.length - 1) {
|
||||||
|
setCurrentStep(currentStep + 1);
|
||||||
|
} else {
|
||||||
|
onComplete();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = () => {
|
||||||
|
if (currentStep > 0) {
|
||||||
|
setCurrentStep(currentStep - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentStepData = steps[currentStep];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Overlay - 매우 투명하게 */}
|
||||||
|
<div className="fixed inset-0 bg-black/5 z-40 animate-in fade-in" />
|
||||||
|
|
||||||
|
{/* Tour Card - viewport 기준 고정 위치 */}
|
||||||
|
<div
|
||||||
|
className="fixed z-50 w-80 bg-gray-900/98 backdrop-blur-md border-2 border-purple-500 rounded-2xl shadow-2xl animate-in fade-in zoom-in-95"
|
||||||
|
style={{
|
||||||
|
top: `${position.top}px`, // viewport 기준
|
||||||
|
right: '20px', // 우측 고정
|
||||||
|
maxHeight: 'calc(100vh - 40px)', // 화면 높이에서 여유 40px
|
||||||
|
overflowY: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-gray-700 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{steps.map((_, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className={`h-2 rounded-full transition-all ${
|
||||||
|
idx === currentStep
|
||||||
|
? 'w-8 bg-purple-500'
|
||||||
|
: idx < currentStep
|
||||||
|
? 'w-2 bg-green-500'
|
||||||
|
: 'w-2 bg-gray-600'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-400 ml-2">
|
||||||
|
{currentStep + 1} / {steps.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onSkip}
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-5">
|
||||||
|
<h3 className="text-xl font-bold text-white mb-2 flex items-center gap-2">
|
||||||
|
<span className="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-sm">
|
||||||
|
{currentStep + 1}
|
||||||
|
</span>
|
||||||
|
{currentStepData.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-300 text-sm leading-relaxed">
|
||||||
|
{currentStepData.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="p-4 border-t border-gray-700 flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
onClick={onSkip}
|
||||||
|
className="text-sm text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
건너뛰기
|
||||||
|
</button>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{currentStep > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={handlePrev}
|
||||||
|
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm font-semibold transition-all"
|
||||||
|
>
|
||||||
|
이전
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={handleNext}
|
||||||
|
className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-semibold transition-all flex items-center gap-2"
|
||||||
|
>
|
||||||
|
{currentStep === steps.length - 1 ? (
|
||||||
|
<>
|
||||||
|
<Check className="w-4 h-4" />
|
||||||
|
완료
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
다음
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CSS for highlight effect */}
|
||||||
|
<style>{`
|
||||||
|
.tour-highlight {
|
||||||
|
position: relative !important;
|
||||||
|
z-index: 9999 !important;
|
||||||
|
background-color: white !important;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 6px rgba(168, 85, 247, 1),
|
||||||
|
0 0 0 12px rgba(168, 85, 247, 0.5),
|
||||||
|
0 0 40px 0 rgba(168, 85, 247, 0.6),
|
||||||
|
0 0 80px 0 rgba(168, 85, 247, 0.3) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
animation: pulse-highlight 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
|
||||||
|
outline: none !important;
|
||||||
|
transform: scale(1.02) !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tour-highlight * {
|
||||||
|
position: relative !important;
|
||||||
|
z-index: 10000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-highlight {
|
||||||
|
0%, 100% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 6px rgba(168, 85, 247, 1),
|
||||||
|
0 0 0 12px rgba(168, 85, 247, 0.5),
|
||||||
|
0 0 40px 0 rgba(168, 85, 247, 0.6),
|
||||||
|
0 0 80px 0 rgba(168, 85, 247, 0.3);
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 8px rgba(168, 85, 247, 1),
|
||||||
|
0 0 0 16px rgba(168, 85, 247, 0.6),
|
||||||
|
0 0 60px 0 rgba(168, 85, 247, 0.8),
|
||||||
|
0 0 100px 0 rgba(168, 85, 247, 0.4);
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OnboardingTour;
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { GeneratedAssets } from '../types';
|
||||||
|
import { Play, Clock, Music, Mic, Video, Image as ImageIcon, Download } from 'lucide-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ResultList 컴포넌트의 Props 정의
|
||||||
|
* @interface ResultListProps
|
||||||
|
* @property {GeneratedAssets[]} history - 생성된 에셋들의 배열 (기록)
|
||||||
|
* @property {(asset: GeneratedAssets) => void} onSelect - 목록에서 에셋 선택 시 호출될 콜백 함수
|
||||||
|
* @property {string} [currentId] - 현재 선택된 에셋의 ID (선택 사항, UI에서 강조 표시용)
|
||||||
|
*/
|
||||||
|
interface ResultListProps {
|
||||||
|
history: GeneratedAssets[];
|
||||||
|
onSelect: (asset: GeneratedAssets) => void;
|
||||||
|
currentId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 생성 기록 목록 컴포넌트
|
||||||
|
* 이전에 생성된 AI 광고 영상/포스터 목록을 보여주고, 클릭 시 해당 에셋을 다시 볼 수 있도록 합니다.
|
||||||
|
*/
|
||||||
|
const ResultList: React.FC<ResultListProps> = ({ history, onSelect, currentId }) => {
|
||||||
|
// 파일 강제 다운로드 핸들러
|
||||||
|
const handleDirectDownload = async (e: React.MouseEvent, url: string, filename: string) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url);
|
||||||
|
const blob = await response.blob();
|
||||||
|
const blobUrl = window.URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = blobUrl;
|
||||||
|
a.download = filename;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
|
||||||
|
window.URL.revokeObjectURL(blobUrl);
|
||||||
|
a.remove();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("다운로드 실패:", err);
|
||||||
|
window.open(url, '_blank');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (history.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-5xl mx-auto mt-12 mb-20 animate-in slide-in-from-bottom-10 duration-700">
|
||||||
|
<div className="flex items-center gap-3 mb-6 px-4">
|
||||||
|
<Clock className="w-5 h-5 text-purple-400" />
|
||||||
|
<h3 className="text-xl font-bold text-white">생성 기록 (History)</h3>
|
||||||
|
<span className="px-2 py-0.5 bg-purple-500/20 text-purple-300 text-xs rounded-full font-mono">{history.length}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||||
|
{history.map((asset) => (
|
||||||
|
<div
|
||||||
|
key={asset.id}
|
||||||
|
onClick={() => onSelect(asset)}
|
||||||
|
className={`group relative bg-white/5 border rounded-2xl overflow-hidden cursor-pointer transition-all hover:scale-[1.02] hover:shadow-xl hover:shadow-purple-500/10
|
||||||
|
${currentId === asset.id ? 'border-purple-500 ring-1 ring-purple-500 bg-white/10' : 'border-white/10 hover:border-purple-500/50'}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{/* 포스터 썸네일 */}
|
||||||
|
<div className="aspect-video bg-black relative overflow-hidden">
|
||||||
|
{asset.posterUrl ? (
|
||||||
|
<img
|
||||||
|
src={asset.posterUrl}
|
||||||
|
alt={asset.businessName}
|
||||||
|
className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.style.display = 'none'; // 이미지 숨김
|
||||||
|
e.currentTarget.nextElementSibling?.classList.remove('hidden'); // 대체 div 표시 (구조상 별도 처리 필요하지만 간단히 숨김 처리)
|
||||||
|
// 부모 요소에 배경색이 있으므로 이미지가 숨겨지면 배경색이 보임.
|
||||||
|
// 더 완벽하게 하려면 state로 관리해야 하나, 여기선 간단히 처리.
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gray-800 flex items-center justify-center text-gray-500"><ImageIcon /></div>
|
||||||
|
)}
|
||||||
|
{/* 이미지 로드 실패 시 보여줄 폴백 (JS로 제어하기보다, 위 onError에서 이미지 숨기면 아래 배경이 보임) */}
|
||||||
|
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity backdrop-blur-[2px]">
|
||||||
|
<div className="p-3 rounded-full bg-white/20 backdrop-blur-sm border border-white/30">
|
||||||
|
<Play className="w-6 h-6 text-white fill-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-2 left-2 flex gap-1 flex-wrap">
|
||||||
|
{asset.audioMode === 'Song' ? (
|
||||||
|
<div className="p-1 bg-purple-600/90 rounded text-white shadow-sm"><Music className="w-3 h-3" /></div>
|
||||||
|
) : (
|
||||||
|
<div className="p-1 bg-blue-600/90 rounded text-white shadow-sm"><Mic className="w-3 h-3" /></div>
|
||||||
|
)}
|
||||||
|
<div className="px-2 py-0.5 bg-black/60 backdrop-blur-sm rounded text-[10px] text-white font-bold border border-white/10 flex items-center">
|
||||||
|
{asset.textEffect}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 정보 영역 */}
|
||||||
|
<div className="p-4">
|
||||||
|
<h4 className="text-white font-bold truncate mb-1 text-base">{asset.businessName}</h4>
|
||||||
|
|
||||||
|
{asset.sourceUrl && (
|
||||||
|
<a href={asset.sourceUrl} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()} className="text-xs text-blue-400 hover:underline truncate block mb-2 opacity-70 hover:opacity-100">
|
||||||
|
{asset.sourceUrl}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between text-xs text-gray-400">
|
||||||
|
{/* 생성 날짜 및 시간 */}
|
||||||
|
<span>
|
||||||
|
{new Date(asset.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
{/* 장르 또는 비디오 타입 표시 */}
|
||||||
|
<span className="flex items-center gap-1 bg-white/5 px-1.5 py-0.5 rounded">
|
||||||
|
{asset.audioMode === 'Song' ? (
|
||||||
|
<>{asset.musicGenre || 'Music'}</>
|
||||||
|
) : (
|
||||||
|
<><Mic className="w-3 h-3" /> Narration</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 하단 버튼 영역 */}
|
||||||
|
<div className="px-4 pb-4 pt-0 flex gap-2">
|
||||||
|
{asset.finalVideoPath ? (
|
||||||
|
<button
|
||||||
|
onClick={(e) => handleDirectDownload(e, asset.finalVideoPath!, `CastAD_${asset.businessName}_Final.mp4`)}
|
||||||
|
className="flex-1 py-2 bg-green-600 hover:bg-green-500 rounded-lg text-sm font-bold text-white transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4" /> 다운로드
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onSelect(asset);
|
||||||
|
}}
|
||||||
|
className={`flex-1 py-2 bg-purple-600 hover:bg-purple-500 rounded-lg text-sm font-bold text-white transition-colors flex items-center justify-center gap-2 ${asset.finalVideoPath ? 'bg-gray-700 hover:bg-gray-600' : ''}`}
|
||||||
|
>
|
||||||
|
<Play className="w-4 h-4" /> {asset.finalVideoPath ? '수정/재생성' : '결과 보기 / 다운로드'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ResultList;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,189 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { X, Copy, Check, Share2, Smartphone, Link as LinkIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ShareModal 컴포넌트의 Props 정의
|
||||||
|
* @interface ShareModalProps
|
||||||
|
* @property {string} videoUrl - 공유할 비디오 파일의 URL
|
||||||
|
* @property {string} posterUrl - (현재 사용되지 않지만, 공유 데이터에 포함될 수 있는) 포스터 이미지 URL
|
||||||
|
* @property {string} businessName - 비디오의 비즈니스 이름 (파일 이름 등에 사용)
|
||||||
|
* @property {() => void} onClose - 모달을 닫을 때 호출될 콜백 함수
|
||||||
|
*/
|
||||||
|
interface ShareModalProps {
|
||||||
|
videoUrl: string;
|
||||||
|
posterUrl: string; // 현재 사용되지 않음
|
||||||
|
businessName: string;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 공유 모달 컴포넌트
|
||||||
|
* 생성된 비디오를 공유하기 위한 옵션을 제공합니다. (링크 복사, 파일 직접 공유 등)
|
||||||
|
*/
|
||||||
|
const ShareModal: React.FC<ShareModalProps> = ({ videoUrl, businessName, onClose }) => {
|
||||||
|
const [isGenerating, setIsGenerating] = useState(true); // 공유 링크 생성 중 여부
|
||||||
|
const [shareLink, setShareLink] = useState(''); // 생성된 공유 링크
|
||||||
|
const [copied, setCopied] = useState(false); // 링크 복사 성공 여부
|
||||||
|
const [canShareFile, setCanShareFile] = useState(false); // Web Share API로 파일 공유 가능한지 여부
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 컴포넌트 마운트 시 공유 링크를 생성하고 Web Share API 지원 여부를 확인합니다.
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
// 고유 ID를 기반으로 목업 공유 링크를 생성합니다. (실제 서비스에서는 백엔드에서 생성)
|
||||||
|
const uniqueId = Math.random().toString(36).substring(2, 10);
|
||||||
|
const mockLink = `${window.location.origin}/share/${uniqueId}`; // 실제 앱에서는 호스팅된 비디오 URL이 됩니다.
|
||||||
|
|
||||||
|
// 링크 생성 시뮬레이션 (1.5초 후 완료)
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setShareLink(mockLink);
|
||||||
|
setIsGenerating(false);
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
// Web Share API (파일 공유) 지원 여부 확인
|
||||||
|
if (navigator.share && navigator.canShare) {
|
||||||
|
setCanShareFile(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => clearTimeout(timer); // 컴포넌트 언마운트 시 타이머 정리
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 공유 링크를 클립보드에 복사하는 핸들러
|
||||||
|
*/
|
||||||
|
const handleCopy = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(shareLink);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000); // 2초 후 복사 상태 초기화
|
||||||
|
} catch (err) {
|
||||||
|
console.error('링크 복사 실패:', err);
|
||||||
|
alert("링크 복사에 실패했습니다. 수동으로 복사해주세요.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 네이티브 웹 공유 API를 사용하여 비디오 파일을 직접 공유하는 핸들러
|
||||||
|
* Instagram, KakaoTalk 등 모바일 앱으로 직접 공유할 때 유용합니다.
|
||||||
|
*/
|
||||||
|
const handleNativeShare = async () => {
|
||||||
|
try {
|
||||||
|
// 비디오 Blob URL을 File 객체로 변환하여 공유 데이터에 포함시킵니다.
|
||||||
|
const response = await fetch(videoUrl);
|
||||||
|
const blob = await response.blob();
|
||||||
|
// 파일 이름은 업체명과 광고로 구성
|
||||||
|
const file = new File([blob], `${businessName.replace(/\s+/g, '_')}_광고.mp4`, { type: 'video/mp4' });
|
||||||
|
|
||||||
|
const shareData = {
|
||||||
|
title: `${businessName} AI 광고 영상`,
|
||||||
|
text: 'BizVibe로 제작된 AI 음악 비디오 광고를 확인해보세요!',
|
||||||
|
files: [file] // 공유할 파일 배열
|
||||||
|
};
|
||||||
|
|
||||||
|
// 파일 공유가 가능한지 다시 확인 후 공유
|
||||||
|
if (navigator.canShare(shareData)) {
|
||||||
|
await navigator.share(shareData);
|
||||||
|
} else {
|
||||||
|
// 파일 공유가 지원되지 않을 경우, 텍스트와 링크만 공유하는 폴백
|
||||||
|
await navigator.share({
|
||||||
|
title: shareData.title,
|
||||||
|
text: shareData.text,
|
||||||
|
url: shareLink
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('공유 중 오류 발생:', err);
|
||||||
|
alert("공유 기능 사용 중 오류가 발생했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200"> {/* 모달 배경 및 페이드인 애니메이션 */}
|
||||||
|
<div className="relative w-full max-w-md mx-4 bg-[#1a1a1d] border border-purple-500/30 rounded-2xl shadow-2xl overflow-hidden">
|
||||||
|
|
||||||
|
{/* 모달 헤더 */}
|
||||||
|
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-white/5">
|
||||||
|
<h3 className="text-xl font-bold text-white flex items-center gap-2">
|
||||||
|
<Share2 className="w-5 h-5 text-purple-400" />
|
||||||
|
공유하기
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose} // 모달 닫기 버튼
|
||||||
|
className="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
{isGenerating ? (
|
||||||
|
// 링크 생성 중일 때 로딩 스피너 표시
|
||||||
|
<div className="text-center py-8 space-y-4">
|
||||||
|
<div className="relative w-16 h-16 mx-auto">
|
||||||
|
<div className="absolute inset-0 border-4 border-purple-500/30 rounded-full"></div>
|
||||||
|
<div className="absolute inset-0 border-4 border-t-purple-500 rounded-full animate-spin"></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-300 animate-pulse">고유 공유 링크 생성 중...</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* 고유 링크 섹션 */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1">
|
||||||
|
<LinkIcon className="w-3 h-3" /> 공개 링크
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-2 p-2 bg-black/50 rounded-xl border border-gray-700">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
readOnly // 읽기 전용
|
||||||
|
value={shareLink}
|
||||||
|
className="flex-1 bg-transparent text-sm text-purple-300 outline-none font-mono"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleCopy} // 복사 버튼
|
||||||
|
className={`p-2 rounded-lg transition-all ${
|
||||||
|
copied
|
||||||
|
? 'bg-green-500/20 text-green-400' // 복사 완료 시 초록색 강조
|
||||||
|
: 'bg-white/10 hover:bg-white/20 text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />} {/* 복사 아이콘 변경 */}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-[10px] text-gray-500">
|
||||||
|
* 이 링크는 데모용이며 실제로는 호스팅되지 않습니다. 비디오 파일을 직접 공유하려면 아래 버튼을 사용하세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 네이티브 공유 섹션 */}
|
||||||
|
{canShareFile && (
|
||||||
|
<button
|
||||||
|
onClick={handleNativeShare} // 네이티브 공유 버튼
|
||||||
|
className="w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-xl shadow-lg shadow-purple-900/30 transform transition-all hover:scale-[1.02] flex items-center justify-center gap-3"
|
||||||
|
>
|
||||||
|
<Smartphone className="w-5 h-5" />
|
||||||
|
영상 파일 직접 공유 (Instagram, Kakao 등)
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 소셜 아이콘 목업 (클릭 시 새 탭 열림) */}
|
||||||
|
<div className="grid grid-cols-3 gap-3 pt-2">
|
||||||
|
{['Twitter', 'Facebook', 'LinkedIn'].map((platform) => (
|
||||||
|
<button
|
||||||
|
key={platform}
|
||||||
|
className="py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 text-gray-400 hover:text-white text-xs font-medium transition-all"
|
||||||
|
onClick={() => window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent('BizVibe로 만든 AI 음악 비디오를 확인해보세요! ' + shareLink)}`, '_blank')} // 소셜 공유 링크 생성
|
||||||
|
>
|
||||||
|
{platform}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShareModal;
|
||||||
|
|
@ -0,0 +1,222 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { TransitionEffect } from '../types';
|
||||||
|
|
||||||
|
interface SlideshowBackgroundProps {
|
||||||
|
images: string[];
|
||||||
|
durationPerImage?: number;
|
||||||
|
transitionDuration?: number;
|
||||||
|
effect?: TransitionEffect; // 선택된 효과
|
||||||
|
}
|
||||||
|
|
||||||
|
const EFFECTS_MAP: Record<TransitionEffect, string[]> = {
|
||||||
|
'Mix': ['fade', 'blur-fade'],
|
||||||
|
'Zoom': ['zoom-in', 'zoom-out', 'ken-burns-extreme'],
|
||||||
|
'Slide': ['slide-left', 'slide-right', 'slide-up', 'slide-down'],
|
||||||
|
'Wipe': ['pixelate-sim', 'flash', 'glitch'] // Wipe 대신 화려한 효과들을 매핑
|
||||||
|
};
|
||||||
|
|
||||||
|
const ALL_EFFECTS = [
|
||||||
|
'fade',
|
||||||
|
'slide-left', 'slide-right', 'slide-up', 'slide-down',
|
||||||
|
'zoom-in', 'zoom-out', 'zoom-spin',
|
||||||
|
'flip-x', 'flip-y',
|
||||||
|
'blur-fade',
|
||||||
|
'glitch',
|
||||||
|
'ken-burns-extreme',
|
||||||
|
'pixelate-sim',
|
||||||
|
'flash'
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 선택에 따른 전환 효과를 적용한 슬라이드쇼 컴포넌트
|
||||||
|
*/
|
||||||
|
const SlideshowBackground: React.FC<SlideshowBackgroundProps> = ({
|
||||||
|
images,
|
||||||
|
durationPerImage = 6000,
|
||||||
|
transitionDuration = 1500,
|
||||||
|
effect = 'Mix' // 기본값 Mix
|
||||||
|
}) => {
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0);
|
||||||
|
const [currentAnimName, setCurrentAnimName] = useState('fade');
|
||||||
|
|
||||||
|
// 효과 매핑 로직
|
||||||
|
const getNextEffect = () => {
|
||||||
|
const candidates = EFFECTS_MAP[effect] || EFFECTS_MAP['Mix'];
|
||||||
|
return candidates[Math.floor(Math.random() * candidates.length)];
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (images.length <= 1) return;
|
||||||
|
|
||||||
|
// 초기 효과 설정
|
||||||
|
setCurrentAnimName(getNextEffect());
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
const nextIndex = (activeIndex + 1) % images.length;
|
||||||
|
setCurrentAnimName(getNextEffect()); // 다음 효과 랜덤 선택 (카테고리 내에서)
|
||||||
|
setActiveIndex(nextIndex);
|
||||||
|
}, durationPerImage);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [activeIndex, images.length, durationPerImage, effect]);
|
||||||
|
|
||||||
|
if (!images || images.length === 0) return <div className="w-full h-full bg-black" />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute inset-0 w-full h-full overflow-hidden bg-black perspective-1000">
|
||||||
|
{images.map((src, index) => {
|
||||||
|
const isActive = index === activeIndex;
|
||||||
|
const isPrev = index === (activeIndex - 1 + images.length) % images.length;
|
||||||
|
|
||||||
|
let effectClass = '';
|
||||||
|
if (isActive) {
|
||||||
|
effectClass = `animate-${currentAnimName}-in`;
|
||||||
|
} else if (isPrev) {
|
||||||
|
effectClass = `animate-fade-out`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`${src}-${index}`}
|
||||||
|
className={`absolute inset-0 w-full h-full
|
||||||
|
${isActive ? 'z-20 opacity-100' : isPrev ? 'z-10 opacity-100' : 'z-0 opacity-0'}
|
||||||
|
${effectClass}
|
||||||
|
`}
|
||||||
|
style={{
|
||||||
|
animationDuration: `${transitionDuration}ms`,
|
||||||
|
animationFillMode: 'forwards',
|
||||||
|
transformOrigin: 'center center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt={`Slide ${index}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
style={{ objectPosition: 'center' }}
|
||||||
|
/>
|
||||||
|
{/* 텍스트 가독성을 위한 오버레이 */}
|
||||||
|
<div className="absolute inset-0 bg-black/30 pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
.perspective-1000 { perspective: 1000px; }
|
||||||
|
|
||||||
|
/* === Common Out Animation === */
|
||||||
|
@keyframes fade-out {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
.animate-fade-out { animation-name: fade-out; }
|
||||||
|
|
||||||
|
/* === 1. Fade === */
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-fade-in { animation-name: fade-in; }
|
||||||
|
|
||||||
|
/* === 2-5. Slides === */
|
||||||
|
@keyframes slide-left-in {
|
||||||
|
0% { transform: translateX(100%); opacity: 0; }
|
||||||
|
100% { transform: translateX(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-slide-left-in { animation-name: slide-left-in; }
|
||||||
|
|
||||||
|
@keyframes slide-right-in {
|
||||||
|
0% { transform: translateX(-100%); opacity: 0; }
|
||||||
|
100% { transform: translateX(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-slide-right-in { animation-name: slide-right-in; }
|
||||||
|
|
||||||
|
@keyframes slide-up-in {
|
||||||
|
0% { transform: translateY(100%); opacity: 0; }
|
||||||
|
100% { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-slide-up-in { animation-name: slide-up-in; }
|
||||||
|
|
||||||
|
@keyframes slide-down-in {
|
||||||
|
0% { transform: translateY(-100%); opacity: 0; }
|
||||||
|
100% { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-slide-down-in { animation-name: slide-down-in; }
|
||||||
|
|
||||||
|
/* === 6-8. Zooms === */
|
||||||
|
@keyframes zoom-in-in {
|
||||||
|
0% { transform: scale(0.5); opacity: 0; }
|
||||||
|
100% { transform: scale(1); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-zoom-in-in { animation-name: zoom-in-in; }
|
||||||
|
|
||||||
|
@keyframes zoom-out-in {
|
||||||
|
0% { transform: scale(1.5); opacity: 0; }
|
||||||
|
100% { transform: scale(1); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-zoom-out-in { animation-name: zoom-out-in; }
|
||||||
|
|
||||||
|
@keyframes zoom-spin-in {
|
||||||
|
0% { transform: scale(0) rotate(-180deg); opacity: 0; }
|
||||||
|
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-zoom-spin-in { animation-name: zoom-spin-in; }
|
||||||
|
|
||||||
|
/* === 9-10. Flips (3D) === */
|
||||||
|
@keyframes flip-x-in {
|
||||||
|
0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
|
||||||
|
100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-flip-x-in { animation-name: flip-x-in; }
|
||||||
|
|
||||||
|
@keyframes flip-y-in {
|
||||||
|
0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
|
||||||
|
100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-flip-y-in { animation-name: flip-y-in; }
|
||||||
|
|
||||||
|
/* === 11. Blur Fade === */
|
||||||
|
@keyframes blur-fade-in {
|
||||||
|
0% { filter: blur(20px); opacity: 0; transform: scale(1.1); }
|
||||||
|
100% { filter: blur(0px); opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
.animate-blur-fade-in { animation-name: blur-fade-in; }
|
||||||
|
|
||||||
|
/* === 12. Glitch === */
|
||||||
|
@keyframes glitch-in {
|
||||||
|
0% { transform: translate(0); opacity: 0; }
|
||||||
|
20% { transform: translate(-5px, 5px); opacity: 1; }
|
||||||
|
40% { transform: translate(-5px, -5px); }
|
||||||
|
60% { transform: translate(5px, 5px); }
|
||||||
|
80% { transform: translate(5px, -5px); }
|
||||||
|
100% { transform: translate(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-glitch-in { animation-name: glitch-in; }
|
||||||
|
|
||||||
|
/* === 13. Ken Burns Extreme === */
|
||||||
|
@keyframes ken-burns-extreme-in {
|
||||||
|
0% { transform: scale(1.5) translate(10%, 10%); opacity: 0; }
|
||||||
|
100% { transform: scale(1) translate(0, 0); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-ken-burns-extreme-in { animation-name: ken-burns-extreme-in; }
|
||||||
|
|
||||||
|
/* === 14. Pixelate Simulation === */
|
||||||
|
@keyframes pixelate-sim-in {
|
||||||
|
0% { filter: blur(10px) contrast(200%); opacity: 0; }
|
||||||
|
50% { filter: blur(5px) contrast(150%); opacity: 0.5; }
|
||||||
|
100% { filter: blur(0) contrast(100%); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-pixelate-sim-in { animation-name: pixelate-sim-in; }
|
||||||
|
|
||||||
|
/* === 15. Flash (Lens Flare Vibe) === */
|
||||||
|
@keyframes flash-in {
|
||||||
|
0% { filter: brightness(300%); opacity: 0; }
|
||||||
|
50% { filter: brightness(200%); opacity: 1; }
|
||||||
|
100% { filter: brightness(100%); opacity: 1; }
|
||||||
|
}
|
||||||
|
.animate-flash-in { animation-name: flash-in; }
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SlideshowBackground;
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
#!/bin/bash
|
||||||
|
#
|
||||||
|
# CaStAD 배포 스크립트
|
||||||
|
# 로컬에서 castad1.ktenterprise.net으로 배포
|
||||||
|
#
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 설정
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
SERVER="castad1.ktenterprise.net"
|
||||||
|
SERVER_USER="castad" # 서버 사용자
|
||||||
|
REMOTE_PATH="/home/${SERVER_USER}/castad" # 서버 경로
|
||||||
|
LOCAL_PATH="$(cd "$(dirname "$0")" && pwd)"
|
||||||
|
|
||||||
|
# 색상
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
CYAN='\033[0;36m'
|
||||||
|
YELLOW='\033[1;33m'
|
||||||
|
RED='\033[0;31m'
|
||||||
|
BOLD='\033[1m'
|
||||||
|
NC='\033[0m'
|
||||||
|
|
||||||
|
log() { echo -e "${GREEN}[Deploy]${NC} $1"; }
|
||||||
|
error() { echo -e "${RED}[ERROR]${NC} $1"; }
|
||||||
|
info() { echo -e "${CYAN}[INFO]${NC} $1"; }
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 빌드
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
do_build() {
|
||||||
|
log "프론트엔드 빌드 중..."
|
||||||
|
cd "$LOCAL_PATH"
|
||||||
|
npm run build
|
||||||
|
if [ $? -ne 0 ]; then
|
||||||
|
error "빌드 실패!"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
info "빌드 완료"
|
||||||
|
}
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 서버로 파일 전송
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
do_upload() {
|
||||||
|
log "서버로 파일 전송 중..."
|
||||||
|
|
||||||
|
# 제외할 파일/폴더
|
||||||
|
EXCLUDES="--exclude=node_modules --exclude=.git --exclude=*.log --exclude=pids --exclude=logs --exclude=server/database.sqlite --exclude=server/downloads --exclude=server/temp --exclude=.env"
|
||||||
|
|
||||||
|
# rsync로 동기화
|
||||||
|
rsync -avz --progress $EXCLUDES \
|
||||||
|
"$LOCAL_PATH/" \
|
||||||
|
"${SERVER_USER}@${SERVER}:${REMOTE_PATH}/"
|
||||||
|
|
||||||
|
if [ $? -ne 0 ]; then
|
||||||
|
error "파일 전송 실패!"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
info "파일 전송 완료"
|
||||||
|
}
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 서버에서 설치 및 재시작
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
do_install() {
|
||||||
|
log "서버에서 의존성 설치 중..."
|
||||||
|
|
||||||
|
ssh "${SERVER_USER}@${SERVER}" << 'REMOTE_SCRIPT'
|
||||||
|
cd /home/castad/castad
|
||||||
|
|
||||||
|
# npm 의존성 설치
|
||||||
|
echo "=== 프론트엔드 의존성 설치 ==="
|
||||||
|
npm install --legacy-peer-deps --silent
|
||||||
|
|
||||||
|
echo "=== 백엔드 의존성 설치 ==="
|
||||||
|
cd server && npm install --legacy-peer-deps --silent && cd ..
|
||||||
|
|
||||||
|
echo "=== 완료 ==="
|
||||||
|
REMOTE_SCRIPT
|
||||||
|
|
||||||
|
if [ $? -ne 0 ]; then
|
||||||
|
error "서버 설치 실패!"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
info "서버 설치 완료"
|
||||||
|
}
|
||||||
|
|
||||||
|
do_restart() {
|
||||||
|
log "서버 재시작 중..."
|
||||||
|
|
||||||
|
ssh "${SERVER_USER}@${SERVER}" << 'REMOTE_SCRIPT'
|
||||||
|
cd /home/castad/castad
|
||||||
|
./startserver.sh restart
|
||||||
|
REMOTE_SCRIPT
|
||||||
|
|
||||||
|
info "서버 재시작 완료"
|
||||||
|
}
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 전체 배포
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
do_full_deploy() {
|
||||||
|
echo ""
|
||||||
|
echo -e "${BOLD}${CYAN}╔════════════════════════════════════════════════════════╗${NC}"
|
||||||
|
echo -e "${BOLD}${CYAN}║ CaStAD 배포 시작 ║${NC}"
|
||||||
|
echo -e "${BOLD}${CYAN}║ Target: ${SERVER} ║${NC}"
|
||||||
|
echo -e "${BOLD}${CYAN}╚════════════════════════════════════════════════════════╝${NC}"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
do_build
|
||||||
|
do_upload
|
||||||
|
do_install
|
||||||
|
do_restart
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo -e "${GREEN}╔════════════════════════════════════════════════════════╗${NC}"
|
||||||
|
echo -e "${GREEN}║ 배포 완료! ║${NC}"
|
||||||
|
echo -e "${GREEN}║ URL: https://${SERVER} ║${NC}"
|
||||||
|
echo -e "${GREEN}╚════════════════════════════════════════════════════════╝${NC}"
|
||||||
|
echo ""
|
||||||
|
}
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 도움말
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
show_help() {
|
||||||
|
echo ""
|
||||||
|
echo -e "${BOLD}CaStAD 배포 스크립트${NC}"
|
||||||
|
echo ""
|
||||||
|
echo -e "${CYAN}사용법:${NC}"
|
||||||
|
echo " ./deploy.sh <command>"
|
||||||
|
echo ""
|
||||||
|
echo -e "${CYAN}명령어:${NC}"
|
||||||
|
echo " deploy - 전체 배포 (빌드 → 업로드 → 설치 → 재시작)"
|
||||||
|
echo " build - 로컬 빌드만"
|
||||||
|
echo " upload - 파일 업로드만"
|
||||||
|
echo " install - 서버 의존성 설치"
|
||||||
|
echo " restart - 서버 재시작만"
|
||||||
|
echo ""
|
||||||
|
echo -e "${CYAN}설정:${NC}"
|
||||||
|
echo " 서버: ${SERVER}"
|
||||||
|
echo " 사용자: ${SERVER_USER}"
|
||||||
|
echo " 경로: ${REMOTE_PATH}"
|
||||||
|
echo ""
|
||||||
|
echo -e "${YELLOW}사전 준비:${NC}"
|
||||||
|
echo " 1. SSH 키 설정: ssh-copy-id ${SERVER_USER}@${SERVER}"
|
||||||
|
echo " 2. 서버에 .env 파일 생성"
|
||||||
|
echo " 3. Nginx 설정 (nginx.castad.conf 참고)"
|
||||||
|
echo " 4. SSL 인증서 설정 (Let's Encrypt)"
|
||||||
|
echo ""
|
||||||
|
}
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
# 메인
|
||||||
|
# ═══════════════════════════════════════════════════════════════
|
||||||
|
case "$1" in
|
||||||
|
deploy)
|
||||||
|
do_full_deploy
|
||||||
|
;;
|
||||||
|
build)
|
||||||
|
do_build
|
||||||
|
;;
|
||||||
|
upload)
|
||||||
|
do_upload
|
||||||
|
;;
|
||||||
|
install)
|
||||||
|
do_install
|
||||||
|
;;
|
||||||
|
restart)
|
||||||
|
do_restart
|
||||||
|
;;
|
||||||
|
*)
|
||||||
|
show_help
|
||||||
|
;;
|
||||||
|
esac
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,168 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 800" font-family="Arial, sans-serif">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="lbGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="apiGradD" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#11998e;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#38ef7d;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="redisGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#dc2626;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#ef4444;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="pgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#336791;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#4a90c2;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="s3Grad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#ff9900;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#ffb84d;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="workerGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#a78bfa;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="uploadGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#ec4899;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#f472b6;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="shadowD" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
<marker id="arrowD" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">
|
||||||
|
CaStAD Distributed Architecture (Scale-Out)
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Load Balancer -->
|
||||||
|
<rect x="325" y="50" width="250" height="60" rx="10" fill="url(#lbGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="450" y="78" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Load Balancer</text>
|
||||||
|
<text x="450" y="98" text-anchor="middle" font-size="11" fill="white">nginx / AWS ALB</text>
|
||||||
|
|
||||||
|
<!-- Arrows to API Servers -->
|
||||||
|
<path d="M 350 110 L 175 145" stroke="#666" stroke-width="2" marker-end="url(#arrowD)"/>
|
||||||
|
<path d="M 450 110 L 450 145" stroke="#666" stroke-width="2" marker-end="url(#arrowD)"/>
|
||||||
|
<path d="M 550 110 L 725 145" stroke="#666" stroke-width="2" marker-end="url(#arrowD)"/>
|
||||||
|
|
||||||
|
<!-- API Servers -->
|
||||||
|
<rect x="75" y="145" width="200" height="70" rx="10" fill="url(#apiGradD)" filter="url(#shadowD)"/>
|
||||||
|
<text x="175" y="175" text-anchor="middle" font-size="13" font-weight="bold" fill="white">API Server 1</text>
|
||||||
|
<text x="175" y="195" text-anchor="middle" font-size="11" fill="white">Express.js</text>
|
||||||
|
|
||||||
|
<rect x="350" y="145" width="200" height="70" rx="10" fill="url(#apiGradD)" filter="url(#shadowD)"/>
|
||||||
|
<text x="450" y="175" text-anchor="middle" font-size="13" font-weight="bold" fill="white">API Server 2</text>
|
||||||
|
<text x="450" y="195" text-anchor="middle" font-size="11" fill="white">Express.js</text>
|
||||||
|
|
||||||
|
<rect x="625" y="145" width="200" height="70" rx="10" fill="url(#apiGradD)" filter="url(#shadowD)"/>
|
||||||
|
<text x="725" y="175" text-anchor="middle" font-size="13" font-weight="bold" fill="white">API Server N</text>
|
||||||
|
<text x="725" y="195" text-anchor="middle" font-size="11" fill="white">Express.js</text>
|
||||||
|
|
||||||
|
<!-- Vertical line connecting API servers -->
|
||||||
|
<path d="M 175 215 L 175 250 L 725 250 L 725 215" stroke="#666" stroke-width="1.5" fill="none"/>
|
||||||
|
<path d="M 450 215 L 450 250" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 450 250 L 450 285" stroke="#666" stroke-width="2" marker-end="url(#arrowD)"/>
|
||||||
|
|
||||||
|
<!-- Data Layer -->
|
||||||
|
<!-- Redis -->
|
||||||
|
<rect x="50" y="300" width="220" height="120" rx="10" fill="url(#redisGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="160" y="330" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Redis</text>
|
||||||
|
<text x="160" y="350" text-anchor="middle" font-size="11" fill="white">(Cache / Queue)</text>
|
||||||
|
<text x="160" y="375" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">• Session Store</text>
|
||||||
|
<text x="160" y="390" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">• Job Queue (Bull)</text>
|
||||||
|
<text x="160" y="405" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">• Rate Limiting</text>
|
||||||
|
|
||||||
|
<!-- PostgreSQL -->
|
||||||
|
<rect x="340" y="300" width="220" height="120" rx="10" fill="url(#pgGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="450" y="330" text-anchor="middle" font-size="14" font-weight="bold" fill="white">PostgreSQL</text>
|
||||||
|
<text x="450" y="350" text-anchor="middle" font-size="11" fill="white">(Primary)</text>
|
||||||
|
<rect x="370" y="365" width="160" height="40" rx="5" fill="rgba(255,255,255,0.2)"/>
|
||||||
|
<text x="450" y="385" text-anchor="middle" font-size="10" fill="white">Replica (Read)</text>
|
||||||
|
<text x="450" y="400" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.8)">High Availability</text>
|
||||||
|
|
||||||
|
<!-- S3/MinIO -->
|
||||||
|
<rect x="630" y="300" width="220" height="120" rx="10" fill="url(#s3Grad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="740" y="330" text-anchor="middle" font-size="14" font-weight="bold" fill="white">S3 / MinIO</text>
|
||||||
|
<text x="740" y="350" text-anchor="middle" font-size="11" fill="white">(Storage)</text>
|
||||||
|
<text x="740" y="375" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">• Videos</text>
|
||||||
|
<text x="740" y="390" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">• Images</text>
|
||||||
|
<text x="740" y="405" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">• Assets</text>
|
||||||
|
|
||||||
|
<!-- Connecting lines from data layer -->
|
||||||
|
<path d="M 160 420 L 160 450 L 450 450 L 450 480" stroke="#666" stroke-width="1.5" fill="none"/>
|
||||||
|
<path d="M 450 420 L 450 480" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 740 420 L 740 450 L 450 450" stroke="#666" stroke-width="1.5" fill="none"/>
|
||||||
|
<path d="M 450 480 L 450 495" stroke="#666" stroke-width="2" marker-end="url(#arrowD)"/>
|
||||||
|
|
||||||
|
<!-- Render Workers -->
|
||||||
|
<rect x="75" y="510" width="180" height="70" rx="10" fill="url(#workerGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="165" y="540" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Render Worker 1</text>
|
||||||
|
<text x="165" y="560" text-anchor="middle" font-size="10" fill="white">Puppeteer + FFmpeg</text>
|
||||||
|
|
||||||
|
<rect x="310" y="510" width="180" height="70" rx="10" fill="url(#workerGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="400" y="540" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Render Worker 2</text>
|
||||||
|
<text x="400" y="560" text-anchor="middle" font-size="10" fill="white">Puppeteer + FFmpeg</text>
|
||||||
|
|
||||||
|
<rect x="545" y="510" width="180" height="70" rx="10" fill="url(#workerGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="635" y="540" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Render Worker N</text>
|
||||||
|
<text x="635" y="560" text-anchor="middle" font-size="10" fill="white">Puppeteer + FFmpeg</text>
|
||||||
|
|
||||||
|
<!-- Arrows to Render Workers -->
|
||||||
|
<path d="M 350 495 L 165 510" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 450 495 L 400 510" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 550 495 L 635 510" stroke="#666" stroke-width="1.5"/>
|
||||||
|
|
||||||
|
<!-- Connecting line to Upload Workers -->
|
||||||
|
<path d="M 165 580 L 165 610 L 635 610 L 635 580" stroke="#666" stroke-width="1.5" fill="none"/>
|
||||||
|
<path d="M 400 580 L 400 610" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 400 610 L 400 640" stroke="#666" stroke-width="2" marker-end="url(#arrowD)"/>
|
||||||
|
|
||||||
|
<!-- Upload Workers -->
|
||||||
|
<rect x="75" y="655" width="180" height="70" rx="10" fill="url(#uploadGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="165" y="685" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Upload Worker 1</text>
|
||||||
|
<text x="165" y="705" text-anchor="middle" font-size="10" fill="white">YouTube</text>
|
||||||
|
|
||||||
|
<rect x="310" y="655" width="180" height="70" rx="10" fill="url(#uploadGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="400" y="685" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Upload Worker 2</text>
|
||||||
|
<text x="400" y="705" text-anchor="middle" font-size="10" fill="white">Instagram</text>
|
||||||
|
|
||||||
|
<rect x="545" y="655" width="180" height="70" rx="10" fill="url(#uploadGrad)" filter="url(#shadowD)"/>
|
||||||
|
<text x="635" y="685" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Upload Worker N</text>
|
||||||
|
<text x="635" y="705" text-anchor="middle" font-size="10" fill="white">TikTok</text>
|
||||||
|
|
||||||
|
<!-- Arrows to Upload Workers -->
|
||||||
|
<path d="M 300 640 L 165 655" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 400 640 L 400 655" stroke="#666" stroke-width="1.5"/>
|
||||||
|
<path d="M 500 640 L 635 655" stroke="#666" stroke-width="1.5"/>
|
||||||
|
|
||||||
|
<!-- External APIs label -->
|
||||||
|
<rect x="750" y="655" width="130" height="70" rx="8" fill="#f0f0f0" stroke="#ccc" stroke-width="1"/>
|
||||||
|
<text x="815" y="680" text-anchor="middle" font-size="11" font-weight="bold" fill="#666">External APIs</text>
|
||||||
|
<text x="815" y="698" text-anchor="middle" font-size="9" fill="#888">Gemini • Suno</text>
|
||||||
|
<text x="815" y="712" text-anchor="middle" font-size="9" fill="#888">YouTube • IG • TikTok</text>
|
||||||
|
|
||||||
|
<!-- Capacity Labels -->
|
||||||
|
<rect x="780" y="50" width="100" height="25" rx="5" fill="#22c55e"/>
|
||||||
|
<text x="830" y="68" text-anchor="middle" font-size="11" fill="white">50,000+ users</text>
|
||||||
|
|
||||||
|
<!-- Legend -->
|
||||||
|
<rect x="20" y="750" width="860" height="40" rx="5" fill="#f8f9fa" stroke="#e9ecef"/>
|
||||||
|
<circle cx="60" cy="770" r="8" fill="url(#apiGradD)"/>
|
||||||
|
<text x="75" y="774" font-size="10" fill="#666">API Server</text>
|
||||||
|
<circle cx="180" cy="770" r="8" fill="url(#redisGrad)"/>
|
||||||
|
<text x="195" y="774" font-size="10" fill="#666">Redis</text>
|
||||||
|
<circle cx="280" cy="770" r="8" fill="url(#pgGrad)"/>
|
||||||
|
<text x="295" y="774" font-size="10" fill="#666">PostgreSQL</text>
|
||||||
|
<circle cx="400" cy="770" r="8" fill="url(#s3Grad)"/>
|
||||||
|
<text x="415" y="774" font-size="10" fill="#666">S3/MinIO</text>
|
||||||
|
<circle cx="510" cy="770" r="8" fill="url(#workerGrad)"/>
|
||||||
|
<text x="525" y="774" font-size="10" fill="#666">Render Worker</text>
|
||||||
|
<circle cx="650" cy="770" r="8" fill="url(#uploadGrad)"/>
|
||||||
|
<text x="665" y="774" font-size="10" fill="#666">Upload Worker</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,183 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 700" font-family="Arial, sans-serif">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="k8sGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#326ce5;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="ingressGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#4f46e5;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="deployGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="podGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#34d399;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#10b981;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="statefulGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="externalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#94a3b8;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#64748b;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="shadowK" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text x="450" y="28" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">
|
||||||
|
CaStAD Kubernetes Architecture
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Main K8s Cluster Box -->
|
||||||
|
<rect x="30" y="45" width="840" height="590" rx="15" fill="url(#k8sGrad)" filter="url(#shadowK)" opacity="0.1"/>
|
||||||
|
<rect x="30" y="45" width="840" height="590" rx="15" fill="none" stroke="url(#k8sGrad)" stroke-width="3"/>
|
||||||
|
|
||||||
|
<!-- K8s Logo and Label -->
|
||||||
|
<text x="450" y="75" text-anchor="middle" font-size="16" font-weight="bold" fill="#326ce5">Kubernetes Cluster</text>
|
||||||
|
|
||||||
|
<!-- Ingress Controller -->
|
||||||
|
<rect x="250" y="95" width="400" height="55" rx="10" fill="url(#ingressGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="450" y="120" text-anchor="middle" font-size="13" font-weight="bold" fill="white">Ingress Controller</text>
|
||||||
|
<text x="450" y="138" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">nginx-ingress / Traefik</text>
|
||||||
|
|
||||||
|
<!-- Arrow from Ingress -->
|
||||||
|
<path d="M 450 150 L 450 175" stroke="#666" stroke-width="2"/>
|
||||||
|
|
||||||
|
<!-- Deployments Section -->
|
||||||
|
<rect x="50" y="175" width="800" height="280" rx="10" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1" stroke-dasharray="5,5"/>
|
||||||
|
<text x="450" y="195" text-anchor="middle" font-size="12" font-weight="bold" fill="#059669">Deployments (Auto-Scaling with HPA)</text>
|
||||||
|
|
||||||
|
<!-- API Deployment -->
|
||||||
|
<rect x="70" y="210" width="250" height="110" rx="8" fill="url(#deployGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="195" y="232" text-anchor="middle" font-size="12" font-weight="bold" fill="white">API Deployment</text>
|
||||||
|
<text x="195" y="248" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">HPA: 2-10 pods</text>
|
||||||
|
|
||||||
|
<!-- API Pods -->
|
||||||
|
<g transform="translate(85, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(130, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(175, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(220, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="#d1d5db"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="#666">...</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Render Worker Deployment -->
|
||||||
|
<rect x="340" y="210" width="250" height="110" rx="8" fill="url(#deployGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="465" y="232" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Render Worker</text>
|
||||||
|
<text x="465" y="248" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">HPA: 3-20 pods (GPU nodes)</text>
|
||||||
|
|
||||||
|
<!-- Render Pods -->
|
||||||
|
<g transform="translate(355, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(400, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(445, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(490, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="#d1d5db"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="#666">...</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Upload Worker Deployment -->
|
||||||
|
<rect x="610" y="210" width="220" height="110" rx="8" fill="url(#deployGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="720" y="232" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Upload Worker</text>
|
||||||
|
<text x="720" y="248" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">HPA: 2-5 pods</text>
|
||||||
|
|
||||||
|
<!-- Upload Pods -->
|
||||||
|
<g transform="translate(640, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(685, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="url(#podGrad)"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="white">Pod</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(730, 260)">
|
||||||
|
<rect x="0" y="0" width="40" height="45" rx="5" fill="#d1d5db"/>
|
||||||
|
<text x="20" y="28" text-anchor="middle" font-size="9" fill="#666">...</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Scheduler Deployment -->
|
||||||
|
<rect x="70" y="335" width="250" height="70" rx="8" fill="url(#deployGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="195" y="362" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Scheduler (CronJob)</text>
|
||||||
|
<text x="195" y="382" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">Weekly Auto-Generation</text>
|
||||||
|
|
||||||
|
<!-- Monitoring Deployment -->
|
||||||
|
<rect x="340" y="335" width="250" height="70" rx="8" fill="url(#deployGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="465" y="362" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Monitoring Stack</text>
|
||||||
|
<text x="465" y="382" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">Prometheus + Grafana</text>
|
||||||
|
|
||||||
|
<!-- StatefulSets Section -->
|
||||||
|
<rect x="50" y="460" width="800" height="95" rx="10" fill="rgba(245,158,11,0.1)" stroke="#f59e0b" stroke-width="1" stroke-dasharray="5,5"/>
|
||||||
|
<text x="450" y="480" text-anchor="middle" font-size="12" font-weight="bold" fill="#d97706">StatefulSets (Persistent Data)</text>
|
||||||
|
|
||||||
|
<!-- PostgreSQL StatefulSet -->
|
||||||
|
<rect x="100" y="495" width="300" height="50" rx="8" fill="url(#statefulGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="250" y="520" text-anchor="middle" font-size="12" font-weight="bold" fill="white">PostgreSQL (Primary + Replicas)</text>
|
||||||
|
<text x="250" y="538" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">PersistentVolumeClaim</text>
|
||||||
|
|
||||||
|
<!-- Redis StatefulSet -->
|
||||||
|
<rect x="500" y="495" width="300" height="50" rx="8" fill="url(#statefulGrad)" filter="url(#shadowK)"/>
|
||||||
|
<text x="650" y="520" text-anchor="middle" font-size="12" font-weight="bold" fill="white">Redis Cluster (3-node)</text>
|
||||||
|
<text x="650" y="538" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.9)">PersistentVolumeClaim</text>
|
||||||
|
|
||||||
|
<!-- External Services Section -->
|
||||||
|
<rect x="50" y="565" width="800" height="60" rx="10" fill="rgba(148,163,184,0.1)" stroke="#94a3b8" stroke-width="1" stroke-dasharray="5,5"/>
|
||||||
|
<text x="450" y="585" text-anchor="middle" font-size="12" font-weight="bold" fill="#64748b">External Services</text>
|
||||||
|
|
||||||
|
<!-- External Service Icons -->
|
||||||
|
<rect x="90" y="595" width="100" height="25" rx="5" fill="url(#externalGrad)"/>
|
||||||
|
<text x="140" y="612" text-anchor="middle" font-size="10" fill="white">AWS S3</text>
|
||||||
|
|
||||||
|
<rect x="220" y="595" width="100" height="25" rx="5" fill="url(#externalGrad)"/>
|
||||||
|
<text x="270" y="612" text-anchor="middle" font-size="10" fill="white">Gemini API</text>
|
||||||
|
|
||||||
|
<rect x="350" y="595" width="100" height="25" rx="5" fill="url(#externalGrad)"/>
|
||||||
|
<text x="400" y="612" text-anchor="middle" font-size="10" fill="white">Suno API</text>
|
||||||
|
|
||||||
|
<rect x="480" y="595" width="100" height="25" rx="5" fill="url(#externalGrad)"/>
|
||||||
|
<text x="530" y="612" text-anchor="middle" font-size="10" fill="white">YouTube API</text>
|
||||||
|
|
||||||
|
<rect x="610" y="595" width="100" height="25" rx="5" fill="url(#externalGrad)"/>
|
||||||
|
<text x="660" y="612" text-anchor="middle" font-size="10" fill="white">Instagram</text>
|
||||||
|
|
||||||
|
<rect x="740" y="595" width="100" height="25" rx="5" fill="url(#externalGrad)"/>
|
||||||
|
<text x="790" y="612" text-anchor="middle" font-size="10" fill="white">TikTok</text>
|
||||||
|
|
||||||
|
<!-- Legend -->
|
||||||
|
<rect x="30" y="650" width="840" height="40" rx="5" fill="#f8f9fa" stroke="#e9ecef"/>
|
||||||
|
<rect x="60" y="663" width="30" height="15" rx="3" fill="url(#ingressGrad)"/>
|
||||||
|
<text x="100" y="675" font-size="10" fill="#666">Ingress</text>
|
||||||
|
<rect x="170" y="663" width="30" height="15" rx="3" fill="url(#deployGrad)"/>
|
||||||
|
<text x="210" y="675" font-size="10" fill="#666">Deployment</text>
|
||||||
|
<rect x="300" y="663" width="30" height="15" rx="3" fill="url(#podGrad)"/>
|
||||||
|
<text x="340" y="675" font-size="10" fill="#666">Pod</text>
|
||||||
|
<rect x="400" y="663" width="30" height="15" rx="3" fill="url(#statefulGrad)"/>
|
||||||
|
<text x="440" y="675" font-size="10" fill="#666">StatefulSet</text>
|
||||||
|
<rect x="530" y="663" width="30" height="15" rx="3" fill="url(#externalGrad)"/>
|
||||||
|
<text x="570" y="675" font-size="10" fill="#666">External</text>
|
||||||
|
|
||||||
|
<!-- HPA indicator -->
|
||||||
|
<text x="700" y="675" font-size="10" fill="#666">HPA = Horizontal Pod Autoscaler</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,112 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 650" font-family="Arial, sans-serif">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="serverGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="frontendGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#11998e;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#38ef7d;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="backendGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#fc4a1a;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#f7b733;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="dbGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="storageGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#a8edea;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#fed6e3;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="apiGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#ffecd2;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#fcb69f;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text x="400" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">
|
||||||
|
CaStAD Single Server Architecture
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Main Server Box -->
|
||||||
|
<rect x="100" y="50" width="600" height="420" rx="15" fill="url(#serverGrad)" filter="url(#shadow)" opacity="0.15"/>
|
||||||
|
<rect x="100" y="50" width="600" height="420" rx="15" fill="none" stroke="url(#serverGrad)" stroke-width="3"/>
|
||||||
|
<text x="400" y="80" text-anchor="middle" font-size="16" font-weight="bold" fill="#667eea">Single Server</text>
|
||||||
|
|
||||||
|
<!-- Frontend Box -->
|
||||||
|
<rect x="150" y="100" width="500" height="70" rx="10" fill="url(#frontendGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="400" y="130" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Frontend</text>
|
||||||
|
<text x="400" y="150" text-anchor="middle" font-size="12" fill="white">React + Vite (Port 5173)</text>
|
||||||
|
|
||||||
|
<!-- Arrow from Frontend to Backend -->
|
||||||
|
<path d="M 400 170 L 400 190" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
<defs>
|
||||||
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Backend Box -->
|
||||||
|
<rect x="150" y="190" width="500" height="100" rx="10" fill="url(#backendGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="400" y="215" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Backend</text>
|
||||||
|
<text x="400" y="235" text-anchor="middle" font-size="12" fill="white">Express.js (Port 3001)</text>
|
||||||
|
|
||||||
|
<!-- Service boxes inside Backend -->
|
||||||
|
<rect x="175" y="250" width="120" height="30" rx="5" fill="white" opacity="0.9"/>
|
||||||
|
<text x="235" y="270" text-anchor="middle" font-size="11" fill="#fc4a1a">Auth Service</text>
|
||||||
|
|
||||||
|
<rect x="315" y="250" width="120" height="30" rx="5" fill="white" opacity="0.9"/>
|
||||||
|
<text x="375" y="270" text-anchor="middle" font-size="11" fill="#fc4a1a">Render Service</text>
|
||||||
|
|
||||||
|
<rect x="455" y="250" width="120" height="30" rx="5" fill="white" opacity="0.9"/>
|
||||||
|
<text x="515" y="270" text-anchor="middle" font-size="11" fill="#fc4a1a">API Proxy</text>
|
||||||
|
|
||||||
|
<!-- Arrow from Backend to Database -->
|
||||||
|
<path d="M 400 290 L 400 310" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
|
||||||
|
<!-- Database Box -->
|
||||||
|
<rect x="150" y="310" width="500" height="60" rx="10" fill="url(#dbGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="400" y="340" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Database</text>
|
||||||
|
<text x="400" y="358" text-anchor="middle" font-size="12" fill="white">SQLite (File-based)</text>
|
||||||
|
|
||||||
|
<!-- Arrow from Database to Storage -->
|
||||||
|
<path d="M 400 370 L 400 390" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
|
||||||
|
<!-- File Storage Box -->
|
||||||
|
<rect x="150" y="390" width="500" height="60" rx="10" fill="url(#storageGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="400" y="418" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">File Storage</text>
|
||||||
|
<text x="400" y="438" text-anchor="middle" font-size="11" fill="#666">Local Filesystem (downloads/, temp/, uploads/)</text>
|
||||||
|
|
||||||
|
<!-- External APIs -->
|
||||||
|
<path d="M 400 470 L 400 500" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
|
||||||
|
<!-- Gemini API -->
|
||||||
|
<rect x="120" y="520" width="150" height="60" rx="10" fill="url(#apiGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="195" y="545" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">Gemini API</text>
|
||||||
|
<text x="195" y="565" text-anchor="middle" font-size="10" fill="#666">AI Content</text>
|
||||||
|
|
||||||
|
<!-- Suno API -->
|
||||||
|
<rect x="325" y="520" width="150" height="60" rx="10" fill="url(#apiGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="400" y="545" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">Suno API</text>
|
||||||
|
<text x="400" y="565" text-anchor="middle" font-size="10" fill="#666">AI Music</text>
|
||||||
|
|
||||||
|
<!-- YouTube API -->
|
||||||
|
<rect x="530" y="520" width="150" height="60" rx="10" fill="url(#apiGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="605" y="545" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">YouTube API</text>
|
||||||
|
<text x="605" y="565" text-anchor="middle" font-size="10" fill="#666">Video Upload</text>
|
||||||
|
|
||||||
|
<!-- Connecting lines to APIs -->
|
||||||
|
<path d="M 300 500 L 195 520" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/>
|
||||||
|
<path d="M 400 500 L 400 520" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/>
|
||||||
|
<path d="M 500 500 L 605 520" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/>
|
||||||
|
|
||||||
|
<!-- Capacity Label -->
|
||||||
|
<rect x="620" y="60" width="70" height="25" rx="5" fill="#e74c3c"/>
|
||||||
|
<text x="655" y="78" text-anchor="middle" font-size="11" fill="white">~50 users</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.2 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>CaStAD - 카스타드 | AI 펜션 마케팅 영상 플랫폼</title>
|
||||||
|
<meta name="description" content="CaStAD(카스타드) - 펜션, 풀빌라, 오션뷰 숙소를 위한 AI 마케팅 영상 제작 SaaS 플랫폼. 15초만에 인스타그램 릴스, 틱톡, YouTube Shorts용 홍보 영상을 자동 생성합니다." />
|
||||||
|
<meta name="keywords" content="CaStAD, 카스타드, 펜션 마케팅, AI 영상 제작, 인스타그램 릴스, 틱톡 영상, 유튜브 쇼츠, 숙박업 마케팅, 풀빌라, 오션뷰, 펜션 홍보, SaaS" />
|
||||||
|
<meta property="og:title" content="CaStAD - 카스타드 | AI 펜션 마케팅 영상 플랫폼" />
|
||||||
|
<meta property="og:description" content="AI가 만드는 펜션 홍보 영상. 네이버 플레이스 URL만 입력하면 15초만에 인스타 릴스 영상 완성!" />
|
||||||
|
<meta property="og:image" content="/images/castad-logo.svg" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/images/castad-logo.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
|
||||||
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
|
||||||
|
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
|
||||||
|
"react/": "https://aistudiocdn.com/react@^19.2.0/",
|
||||||
|
"react": "https://aistudiocdn.com/react@^19.2.0",
|
||||||
|
"@ffmpeg/ffmpeg": "https://unpkg.com/@ffmpeg/ffmpeg@0.12.10/dist/esm/index.js",
|
||||||
|
"@ffmpeg/util": "https://unpkg.com/@ffmpeg/util@0.12.1/dist/esm/index.js",
|
||||||
|
"@ffmpeg/core": "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.js",
|
||||||
|
"dom": "https://aistudiocdn.com/dom@^0.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/// <reference lib="dom" />
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
if (!rootElement) {
|
||||||
|
throw new Error("Could not find root element to mount to");
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(rootElement);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"name": "BizVibe - AI Music Video Generator",
|
||||||
|
"description": "Transform your business photo and info into a stunning music video with AI-generated Korean ad copy and visuals.",
|
||||||
|
"requestFramePermissions": []
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# ==============================================================================
|
||||||
|
# BizVibe Multi-Domain Deployment & Setup Script
|
||||||
|
# ==============================================================================
|
||||||
|
# 이 스크립트는 멀티 도메인 Nginx 환경에 BizVibe 서비스를 안전하게 배포합니다.
|
||||||
|
# 기존 서비스와의 포트 충돌을 방지하며 Nginx 설정을 자동으로 생성합니다.
|
||||||
|
# ==============================================================================
|
||||||
|
|
||||||
|
# 색상 정의
|
||||||
|
RED='\033[0;31m'
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
YELLOW='\033[1;33m'
|
||||||
|
CYAN='\033[0;36m'
|
||||||
|
NC='\033[0m' # No Color
|
||||||
|
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# 1. 포트 자동 할당 (충돌 방지)
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
echo -e "${CYAN}[1] 사용 가능한 포트 확인 중...${NC}"
|
||||||
|
|
||||||
|
# 사용 중인 포트 목록 가져오기
|
||||||
|
USED_PORTS=$(netstat -tuln | grep LISTEN | awk '{print $4}' | awk -F: '{print $NF}' | sort -n | uniq)
|
||||||
|
|
||||||
|
# 추천 포트 범위 (3000번대 -> 4000번대 순으로 검색)
|
||||||
|
# nginx_analysis.txt에 따르면 3000번은 whitedonkey가 사용 중일 수 있으므로 3001부터 시작
|
||||||
|
START_PORT=3001
|
||||||
|
END_PORT=4000
|
||||||
|
TARGET_PORT=""
|
||||||
|
|
||||||
|
for port in $(seq $START_PORT $END_PORT); do
|
||||||
|
if ! echo "$USED_PORTS" | grep -q "^$port$"; then
|
||||||
|
TARGET_PORT=$port
|
||||||
|
break
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
if [ -z "$TARGET_PORT" ]; then
|
||||||
|
echo -e "${RED}❌ 사용 가능한 포트를 찾을 수 없습니다 (3001-4000). 수동으로 설정해주세요.${NC}"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo -e "${GREEN}✅ BizVibe 백엔드 포트로 ${TARGET_PORT}번을 할당했습니다.${NC}"
|
||||||
|
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# 2. 필수 패키지 설치
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
echo -e "${CYAN}[2] 시스템 패키지 업데이트 및 필수 라이브러리 설치...${NC}"
|
||||||
|
|
||||||
|
# Node.js, FFmpeg, 한글 폰트 등 필수 패키지 설치
|
||||||
|
if [ -x "$(command -v apt-get)" ]; then
|
||||||
|
sudo apt-get update
|
||||||
|
sudo apt-get install -y ffmpeg fonts-noto-cjk nginx certbot python3-certbot-nginx \
|
||||||
|
ca-certificates fonts-liberation libasound2t64 libatk-bridge2.0-0 libatk1.0-0 \
|
||||||
|
libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 \
|
||||||
|
libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 \
|
||||||
|
libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
|
||||||
|
libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release \
|
||||||
|
wget xdg-utils
|
||||||
|
else
|
||||||
|
echo -e "${YELLOW}⚠️ apt-get을 찾을 수 없습니다. 패키지 설치를 건너뜁니다.${NC}"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# 3. 프로젝트 빌드 및 설정
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
echo -e "${CYAN}[3] 프로젝트 의존성 설치 및 빌드...${NC}"
|
||||||
|
|
||||||
|
# 프론트엔드 의존성
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 백엔드 의존성
|
||||||
|
cd server
|
||||||
|
npm install --legacy-peer-deps
|
||||||
|
cd ..
|
||||||
|
|
||||||
|
# 포트 설정 적용 (vite.config.ts 및 server/index.js 수정 필요 시 환경 변수로 처리 권장)
|
||||||
|
# 여기서는 .env 파일 생성/수정으로 처리
|
||||||
|
if [ ! -f .env ]; then
|
||||||
|
echo "VITE_GEMINI_API_KEY=YOUR_GEMINI_KEY" > .env
|
||||||
|
echo "SUNO_API_KEY=YOUR_SUNO_KEY" >> .env
|
||||||
|
echo -e "${YELLOW}⚠️ .env 파일이 생성되었습니다. API 키를 입력해야 합니다.${NC}"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 프론트엔드 URL 설정 (배포 시 도메인 주소로 설정)
|
||||||
|
# 이 부분은 아래 도메인 입력 후에 업데이트하도록 이동하거나, 여기서 미리 placeholder로 설정
|
||||||
|
if ! grep -q "FRONTEND_URL=" .env; then
|
||||||
|
echo "FRONTEND_URL=http://localhost:3000" >> .env
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 백엔드 포트 환경변수 추가
|
||||||
|
if grep -q "PORT=" .env; then
|
||||||
|
sed -i "s/^PORT=.*/PORT=$TARGET_PORT/" .env
|
||||||
|
else
|
||||||
|
echo "PORT=$TARGET_PORT" >> .env
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 프론트엔드 빌드 (Vite가 .env의 설정을 참조함)
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# 4. PM2 프로세스 관리 (무중단 배포)
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
echo -e "${CYAN}[4] PM2로 서비스 실행...${NC}"
|
||||||
|
|
||||||
|
# PM2 설치 확인
|
||||||
|
if ! command -v pm2 &> /dev/null; then
|
||||||
|
npm install -g pm2
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 기존 프로세스 정리 (이름 기준)
|
||||||
|
pm2 delete bizvibe-backend 2>/dev/null
|
||||||
|
|
||||||
|
# 백엔드 실행 (서버 사이드 렌더링 포함)
|
||||||
|
# 정적 파일(프론트엔드 dist)도 백엔드(Express)에서 서빙하도록 server/index.js가 수정되어야 함.
|
||||||
|
# 현재 server/index.js는 API만 제공하므로, Nginx가 프론트엔드를 서빙하고 API는 백엔드로 프록시하는 구조가 적합.
|
||||||
|
|
||||||
|
cd server
|
||||||
|
pm2 start index.js --name "bizvibe-backend" -- --port $TARGET_PORT
|
||||||
|
cd ..
|
||||||
|
pm2 save
|
||||||
|
|
||||||
|
echo -e "${GREEN}✅ PM2 서비스 시작 완료 (Port: $TARGET_PORT)${NC}"
|
||||||
|
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
# 5. Nginx 가상호스트 설정 (자동 생성)
|
||||||
|
# ------------------------------------------------------------------------------
|
||||||
|
echo -e "${CYAN}[5] Nginx 설정 파일 생성...${NC}"
|
||||||
|
|
||||||
|
# 사용자에게 도메인 입력 받기
|
||||||
|
read -p "배포할 도메인 주소를 입력하세요 (예: bizvibe.ktenterprise.net): " DOMAIN_NAME
|
||||||
|
|
||||||
|
if [ -z "$DOMAIN_NAME" ]; then
|
||||||
|
echo -e "${RED}❌ 도메인이 입력되지 않아 Nginx 설정을 건너뜁니다.${NC}"
|
||||||
|
else
|
||||||
|
# .env 파일에 FRONTEND_URL 업데이트 (https://도메인)
|
||||||
|
# 기존 값이 있으면 교체, 없으면 추가
|
||||||
|
if grep -q "FRONTEND_URL=" .env; then
|
||||||
|
sed -i "s|^FRONTEND_URL=.*|FRONTEND_URL=https://$DOMAIN_NAME|" .env
|
||||||
|
else
|
||||||
|
echo "FRONTEND_URL=https://$DOMAIN_NAME" >> .env
|
||||||
|
fi
|
||||||
|
echo -e "${GREEN}✅ .env 파일에 FRONTEND_URL=https://$DOMAIN_NAME 설정 완료${NC}"
|
||||||
|
|
||||||
|
# PM2 재시작하여 변경된 환경변수 적용
|
||||||
|
pm2 restart bizvibe-backend
|
||||||
|
|
||||||
|
NGINX_CONF="/etc/nginx/sites-available/$DOMAIN_NAME"
|
||||||
|
PROJECT_ROOT=$(pwd)
|
||||||
|
|
||||||
|
# Nginx 설정 파일 작성
|
||||||
|
sudo tee $NGINX_CONF > /dev/null <<EOF
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name $DOMAIN_NAME;
|
||||||
|
|
||||||
|
# 대용량 파일 업로드 허용 (영상 생성 요청 시 Base64 데이터 전송 때문)
|
||||||
|
client_max_body_size 500M;
|
||||||
|
|
||||||
|
# 프론트엔드 정적 파일 서빙
|
||||||
|
location / {
|
||||||
|
# 로컬(서버 내부) 및 공인 IP 접속은 인증 제외 (비활성화)
|
||||||
|
# satisfy any;
|
||||||
|
# allow 127.0.0.1;
|
||||||
|
# allow 116.125.140.86; # 서버 공인 IP 추가
|
||||||
|
# deny all;
|
||||||
|
|
||||||
|
# 기본 인증 설정 (외부 접속 시) - 비활성화
|
||||||
|
# auth_basic "Restricted Area";
|
||||||
|
# auth_basic_user_file /etc/nginx/.htpasswd;
|
||||||
|
|
||||||
|
root $PROJECT_ROOT/dist;
|
||||||
|
index index.html;
|
||||||
|
try_files \$uri \$uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 백엔드 API 프록시
|
||||||
|
location /api {
|
||||||
|
proxy_pass http://127.0.0.1:$TARGET_PORT;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade \$http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host \$host;
|
||||||
|
proxy_cache_bypass \$http_upgrade;
|
||||||
|
proxy_set_header X-Real-IP \$remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||||
|
proxy_read_timeout 300s; # 긴 API 응답 시간 허용 (Suno 생성 등)
|
||||||
|
}
|
||||||
|
|
||||||
|
# 렌더링/업로드 엔드포인트 프록시
|
||||||
|
location /render {
|
||||||
|
proxy_pass http://127.0.0.1:$TARGET_PORT;
|
||||||
|
proxy_set_header Host \$host;
|
||||||
|
proxy_read_timeout 300s; # 긴 렌더링 시간 허용
|
||||||
|
}
|
||||||
|
|
||||||
|
location /auth {
|
||||||
|
proxy_pass http://127.0.0.1:$TARGET_PORT;
|
||||||
|
proxy_set_header Host \$host;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /oauth2callback {
|
||||||
|
proxy_pass http://127.0.0.1:$TARGET_PORT;
|
||||||
|
proxy_set_header Host \$host;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
# 심볼릭 링크 생성
|
||||||
|
sudo ln -sfn $NGINX_CONF /etc/nginx/sites-enabled/
|
||||||
|
|
||||||
|
# 설정 검증 및 재시작
|
||||||
|
if sudo nginx -t; then
|
||||||
|
sudo systemctl reload nginx
|
||||||
|
echo -e "${GREEN}✅ Nginx 설정 완료! http://$DOMAIN_NAME 에서 접속 가능합니다.${NC}"
|
||||||
|
|
||||||
|
# SSL 인증서 발급 여부 확인
|
||||||
|
read -p "SSL 인증서(Let's Encrypt)를 발급하시겠습니까? (y/n): " INSTALL_SSL
|
||||||
|
if [[ "$INSTALL_SSL" == "y" || "$INSTALL_SSL" == "Y" ]]; then
|
||||||
|
sudo certbot --nginx -d $DOMAIN_NAME
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
echo -e "${RED}❌ Nginx 설정 오류 발생. 설정 파일을 확인하세요: $NGINX_CONF${NC}"
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo -e "${CYAN}======================================================${NC}"
|
||||||
|
echo -e "${GREEN}🎉 배포 완료!${NC}"
|
||||||
|
echo -e "Backend Port: $TARGET_PORT"
|
||||||
|
echo -e "Domain: http://$DOMAIN_NAME"
|
||||||
|
echo -e "${CYAN}======================================================${NC}"
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
# CaStAD Nginx Configuration
|
||||||
|
# Target: castad1.ktenterprise.net
|
||||||
|
#
|
||||||
|
# 설치 방법:
|
||||||
|
# sudo cp nginx.castad.conf /etc/nginx/sites-available/castad
|
||||||
|
# sudo ln -s /etc/nginx/sites-available/castad /etc/nginx/sites-enabled/
|
||||||
|
# sudo nginx -t && sudo systemctl reload nginx
|
||||||
|
#
|
||||||
|
|
||||||
|
upstream castad_backend {
|
||||||
|
server 127.0.0.1:3001;
|
||||||
|
keepalive 64;
|
||||||
|
}
|
||||||
|
|
||||||
|
upstream castad_instagram {
|
||||||
|
server 127.0.0.1:5001;
|
||||||
|
keepalive 32;
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTP → HTTPS 리다이렉트
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name castad1.ktenterprise.net;
|
||||||
|
return 301 https://$server_name$request_uri;
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTPS 메인 서버
|
||||||
|
server {
|
||||||
|
listen 443 ssl http2;
|
||||||
|
server_name castad1.ktenterprise.net;
|
||||||
|
|
||||||
|
# SSL 인증서 (Let's Encrypt 사용 시)
|
||||||
|
ssl_certificate /etc/letsencrypt/live/castad1.ktenterprise.net/fullchain.pem;
|
||||||
|
ssl_certificate_key /etc/letsencrypt/live/castad1.ktenterprise.net/privkey.pem;
|
||||||
|
|
||||||
|
# SSL 보안 설정
|
||||||
|
ssl_protocols TLSv1.2 TLSv1.3;
|
||||||
|
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
|
||||||
|
ssl_prefer_server_ciphers off;
|
||||||
|
ssl_session_cache shared:SSL:10m;
|
||||||
|
ssl_session_timeout 1d;
|
||||||
|
|
||||||
|
# 보안 헤더
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-XSS-Protection "1; mode=block" always;
|
||||||
|
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||||
|
|
||||||
|
# 클라이언트 요청 크기 (이미지 업로드용)
|
||||||
|
client_max_body_size 100M;
|
||||||
|
client_body_timeout 300s;
|
||||||
|
|
||||||
|
# Gzip 압축
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_proxied any;
|
||||||
|
gzip_comp_level 6;
|
||||||
|
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
|
||||||
|
|
||||||
|
# 로그
|
||||||
|
access_log /var/log/nginx/castad_access.log;
|
||||||
|
error_log /var/log/nginx/castad_error.log;
|
||||||
|
|
||||||
|
# 정적 파일 (빌드된 프론트엔드)
|
||||||
|
root /home/castad/castad/dist;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# API 프록시 (백엔드)
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
proxy_read_timeout 300s;
|
||||||
|
proxy_connect_timeout 75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 렌더링 엔드포인트 (긴 타임아웃)
|
||||||
|
location /render/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_read_timeout 600s; # 10분 (영상 렌더링용)
|
||||||
|
proxy_connect_timeout 75s;
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 다운로드 파일
|
||||||
|
location /downloads/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 임시 파일 (렌더링 미리보기)
|
||||||
|
location /temp/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Instagram API (Python 서비스)
|
||||||
|
location /instagram/ {
|
||||||
|
proxy_pass http://castad_instagram/;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_read_timeout 120s;
|
||||||
|
}
|
||||||
|
|
||||||
|
# SPA 라우팅 (React Router)
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
|
||||||
|
# 정적 에셋 캐싱
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# 헬스체크
|
||||||
|
location /health {
|
||||||
|
proxy_pass http://castad_backend/api/health;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
access_log off;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
# ============================================
|
||||||
|
# CaStAD Nginx Configuration
|
||||||
|
# ============================================
|
||||||
|
# 도메인:
|
||||||
|
# - castad.ktenterprise.net
|
||||||
|
# - ado2.whitedonkey.kr
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# Upstream 설정
|
||||||
|
upstream castad_backend {
|
||||||
|
server 127.0.0.1:3001;
|
||||||
|
keepalive 64;
|
||||||
|
}
|
||||||
|
|
||||||
|
upstream castad_instagram {
|
||||||
|
server 127.0.0.1:5001;
|
||||||
|
keepalive 32;
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTP → HTTPS 리다이렉트
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
server_name castad.ktenterprise.net ado2.whitedonkey.kr;
|
||||||
|
|
||||||
|
location /.well-known/acme-challenge/ {
|
||||||
|
root /var/www/certbot;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
return 301 https://$host$request_uri;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTPS 서버 설정
|
||||||
|
server {
|
||||||
|
listen 443 ssl http2;
|
||||||
|
listen [::]:443 ssl http2;
|
||||||
|
server_name castad.ktenterprise.net ado2.whitedonkey.kr;
|
||||||
|
|
||||||
|
# SSL 인증서 (Let's Encrypt)
|
||||||
|
ssl_certificate /etc/letsencrypt/live/castad.ktenterprise.net/fullchain.pem;
|
||||||
|
ssl_certificate_key /etc/letsencrypt/live/castad.ktenterprise.net/privkey.pem;
|
||||||
|
|
||||||
|
# SSL 설정
|
||||||
|
ssl_protocols TLSv1.2 TLSv1.3;
|
||||||
|
ssl_prefer_server_ciphers on;
|
||||||
|
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
|
||||||
|
ssl_session_cache shared:SSL:10m;
|
||||||
|
ssl_session_timeout 10m;
|
||||||
|
ssl_session_tickets off;
|
||||||
|
|
||||||
|
# HSTS
|
||||||
|
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
|
||||||
|
|
||||||
|
# 기타 보안 헤더
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-XSS-Protection "1; mode=block" always;
|
||||||
|
|
||||||
|
# 로그
|
||||||
|
access_log /var/log/nginx/castad_access.log;
|
||||||
|
error_log /var/log/nginx/castad_error.log;
|
||||||
|
|
||||||
|
# 파일 업로드 크기 제한 (영상 업로드용)
|
||||||
|
client_max_body_size 500M;
|
||||||
|
client_body_timeout 300s;
|
||||||
|
|
||||||
|
# 정적 파일 캐싱 (프론트엔드 빌드 파일)
|
||||||
|
root /var/www/castad/dist;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip 압축
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
gzip_proxied any;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml;
|
||||||
|
gzip_comp_level 6;
|
||||||
|
|
||||||
|
# 정적 자원 캐싱
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# API 요청 → Backend
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
proxy_read_timeout 300s;
|
||||||
|
proxy_connect_timeout 75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 렌더링 요청 → Backend (긴 타임아웃)
|
||||||
|
location /render {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_read_timeout 600s;
|
||||||
|
proxy_connect_timeout 75s;
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 다운로드 파일
|
||||||
|
location /downloads/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 임시 파일
|
||||||
|
location /temp/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 업로드된 에셋
|
||||||
|
location /uploads/ {
|
||||||
|
proxy_pass http://castad_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Instagram 서비스 (내부 프록시)
|
||||||
|
location /instagram-service/ {
|
||||||
|
internal;
|
||||||
|
proxy_pass http://castad_instagram/;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
|
||||||
|
# SPA 라우팅 - 모든 요청을 index.html로
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 에러 페이지
|
||||||
|
error_page 500 502 503 504 /50x.html;
|
||||||
|
location = /50x.html {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name YOUR_DOMAIN_OR_IP; # 예: bizvibe.ktenterprise.net
|
||||||
|
|
||||||
|
# 1. 프론트엔드 (React 빌드 결과물)
|
||||||
|
# 'npm run build'로 생성된 dist 폴더 경로를 지정하세요.
|
||||||
|
location / {
|
||||||
|
root /home/ubuntu/projects/bizvibe/dist; # [수정 필요] 실제 프로젝트 경로로 변경
|
||||||
|
index index.html;
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 2. 백엔드 API 프록시
|
||||||
|
# Node.js 서버(포트 3001)로 요청을 전달합니다.
|
||||||
|
location /api {
|
||||||
|
proxy_pass http://127.0.0.1:3001;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 3. 영상 생성 및 다운로드 프록시
|
||||||
|
location /render {
|
||||||
|
proxy_pass http://127.0.0.1:3001;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /downloads {
|
||||||
|
proxy_pass http://127.0.0.1:3001;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /temp {
|
||||||
|
proxy_pass http://127.0.0.1:3001;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,59 @@
|
||||||
|
{
|
||||||
|
"name": "castad-ai-marketing-video-platform",
|
||||||
|
"private": true,
|
||||||
|
"version": "3.7.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "concurrently \"vite\" \"cd server && node index.js\"",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"start:server": "cd server && node index.js",
|
||||||
|
"build:all": "npm install && npm run build && cd server && npm install"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ffmpeg/core": "0.12.6",
|
||||||
|
"@ffmpeg/ffmpeg": "0.12.10",
|
||||||
|
"@ffmpeg/util": "0.12.1",
|
||||||
|
"@google/genai": "^1.30.0",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-avatar": "^1.1.11",
|
||||||
|
"@radix-ui/react-checkbox": "^1.3.3",
|
||||||
|
"@radix-ui/react-collapsible": "^1.1.12",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-progress": "^1.1.8",
|
||||||
|
"@radix-ui/react-radio-group": "^1.3.8",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
|
"@radix-ui/react-switch": "^1.2.6",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
|
"@radix-ui/react-tooltip": "^1.2.8",
|
||||||
|
"dom": "^0.0.3",
|
||||||
|
"lottie-react": "^2.4.1",
|
||||||
|
"lucide-react": "^0.554.0",
|
||||||
|
"mammoth": "^1.11.0",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-router-dom": "^7.9.6",
|
||||||
|
"sonner": "^2.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"@vitejs/plugin-react": "^5.0.0",
|
||||||
|
"autoprefixer": "^10.4.22",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"concurrently": "^9.2.1",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwind-merge": "^3.4.0",
|
||||||
|
"tailwindcss": "^3.4.18",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
39498
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
39458
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" font-family="Arial, sans-serif">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#f8fafc"/>
|
||||||
|
<stop offset="100%" style="stop-color:#e2e8f0"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="frontendGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1d4ed8"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="backendGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#10b981"/>
|
||||||
|
<stop offset="100%" style="stop-color:#059669"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="dbGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#f59e0b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#d97706"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="externalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#8b5cf6"/>
|
||||||
|
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="platformGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#ef4444"/>
|
||||||
|
<stop offset="100%" style="stop-color:#dc2626"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.2"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect width="1200" height="800" fill="url(#bgGrad)"/>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text x="600" y="40" text-anchor="middle" font-size="24" font-weight="bold" fill="#1e293b">CaStAD System Architecture</text>
|
||||||
|
|
||||||
|
<!-- Frontend Section -->
|
||||||
|
<g transform="translate(50, 70)">
|
||||||
|
<rect width="320" height="280" rx="12" fill="url(#frontendGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="160" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">Frontend (React 19 + Vite)</text>
|
||||||
|
<rect x="15" y="50" width="290" height="210" rx="8" fill="white" fill-opacity="0.95"/>
|
||||||
|
|
||||||
|
<!-- Frontend Components -->
|
||||||
|
<text x="25" y="75" font-size="11" font-weight="bold" fill="#1e40af">Pages</text>
|
||||||
|
<text x="25" y="92" font-size="10" fill="#475569">• GeneratorPage (영상 생성)</text>
|
||||||
|
<text x="25" y="106" font-size="10" fill="#475569">• AdminDashboard (관리자)</text>
|
||||||
|
<text x="25" y="120" font-size="10" fill="#475569">• PensionsView (펜션 관리)</text>
|
||||||
|
|
||||||
|
<text x="25" y="145" font-size="11" font-weight="bold" fill="#1e40af">Services</text>
|
||||||
|
<text x="25" y="162" font-size="10" fill="#475569">• geminiService (AI 콘텐츠)</text>
|
||||||
|
<text x="25" y="176" font-size="10" fill="#475569">• sunoService (음악 생성)</text>
|
||||||
|
<text x="25" y="190" font-size="10" fill="#475569">• naverService (크롤링)</text>
|
||||||
|
<text x="25" y="204" font-size="10" fill="#475569">• instagramService (크롤링)</text>
|
||||||
|
|
||||||
|
<text x="170" y="75" font-size="11" font-weight="bold" fill="#1e40af">Contexts</text>
|
||||||
|
<text x="170" y="92" font-size="10" fill="#475569">• AuthContext</text>
|
||||||
|
<text x="170" y="106" font-size="10" fill="#475569">• LanguageContext</text>
|
||||||
|
<text x="170" y="120" font-size="10" fill="#475569">• ThemeContext</text>
|
||||||
|
|
||||||
|
<text x="170" y="145" font-size="11" font-weight="bold" fill="#1e40af">Features</text>
|
||||||
|
<text x="170" y="162" font-size="10" fill="#475569">• 다국어 지원 (6개)</text>
|
||||||
|
<text x="170" y="176" font-size="10" fill="#475569">• JWT 인증</text>
|
||||||
|
<text x="170" y="190" font-size="10" fill="#475569">• OAuth (Google/Naver)</text>
|
||||||
|
<text x="170" y="204" font-size="10" fill="#475569">• 실시간 프리뷰</text>
|
||||||
|
|
||||||
|
<text x="160" y="248" text-anchor="middle" font-size="10" fill="#64748b">Port: 5173 (dev) / 3000 (prod)</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Backend Section -->
|
||||||
|
<g transform="translate(440, 70)">
|
||||||
|
<rect width="320" height="280" rx="12" fill="url(#backendGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="160" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">Backend (Express.js)</text>
|
||||||
|
<rect x="15" y="50" width="290" height="210" rx="8" fill="white" fill-opacity="0.95"/>
|
||||||
|
|
||||||
|
<!-- Backend Components -->
|
||||||
|
<text x="25" y="75" font-size="11" font-weight="bold" fill="#065f46">API Endpoints (107+)</text>
|
||||||
|
<text x="25" y="92" font-size="10" fill="#475569">• /api/auth/* (인증)</text>
|
||||||
|
<text x="25" y="106" font-size="10" fill="#475569">• /api/profile/* (펜션)</text>
|
||||||
|
<text x="25" y="120" font-size="10" fill="#475569">• /api/youtube/* (YouTube)</text>
|
||||||
|
<text x="25" y="134" font-size="10" fill="#475569">• /api/instagram/* (Instagram)</text>
|
||||||
|
<text x="25" y="148" font-size="10" fill="#475569">• /api/tiktok/* (TikTok)</text>
|
||||||
|
<text x="25" y="162" font-size="10" fill="#475569">• /api/gemini/* (AI)</text>
|
||||||
|
<text x="25" y="176" font-size="10" fill="#475569">• /api/admin/* (관리자)</text>
|
||||||
|
|
||||||
|
<text x="170" y="75" font-size="11" font-weight="bold" fill="#065f46">Core Services</text>
|
||||||
|
<text x="170" y="92" font-size="10" fill="#475569">• Puppeteer (렌더링)</text>
|
||||||
|
<text x="170" y="106" font-size="10" fill="#475569">• FFmpeg (영상 병합)</text>
|
||||||
|
<text x="170" y="120" font-size="10" fill="#475569">• JWT 인증</text>
|
||||||
|
<text x="170" y="134" font-size="10" fill="#475569">• 쿠키 기반 크롤링</text>
|
||||||
|
<text x="170" y="148" font-size="10" fill="#475569">• API 사용량 추적</text>
|
||||||
|
<text x="170" y="162" font-size="10" fill="#475569">• 자동 생성 스케줄러</text>
|
||||||
|
|
||||||
|
<text x="160" y="248" text-anchor="middle" font-size="10" fill="#64748b">Port: 3001</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Database Section -->
|
||||||
|
<g transform="translate(830, 70)">
|
||||||
|
<rect width="320" height="280" rx="12" fill="url(#dbGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="160" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">Database (SQLite)</text>
|
||||||
|
<rect x="15" y="50" width="290" height="210" rx="8" fill="white" fill-opacity="0.95"/>
|
||||||
|
|
||||||
|
<!-- Database Tables -->
|
||||||
|
<text x="25" y="75" font-size="11" font-weight="bold" fill="#92400e">Core Tables (30+)</text>
|
||||||
|
<text x="25" y="92" font-size="10" fill="#475569">• users (사용자/플랜/크레딧)</text>
|
||||||
|
<text x="25" y="106" font-size="10" fill="#475569">• pension_profiles (펜션)</text>
|
||||||
|
<text x="25" y="120" font-size="10" fill="#475569">• pension_images (이미지)</text>
|
||||||
|
<text x="25" y="134" font-size="10" fill="#475569">• history (영상 이력)</text>
|
||||||
|
<text x="25" y="148" font-size="10" fill="#475569">• youtube_connections</text>
|
||||||
|
<text x="25" y="162" font-size="10" fill="#475569">• instagram_connections</text>
|
||||||
|
<text x="25" y="176" font-size="10" fill="#475569">• tiktok_connections</text>
|
||||||
|
|
||||||
|
<text x="170" y="75" font-size="11" font-weight="bold" fill="#92400e">Data Tables</text>
|
||||||
|
<text x="170" y="92" font-size="10" fill="#475569">• festivals (축제)</text>
|
||||||
|
<text x="170" y="106" font-size="10" fill="#475569">• public_pensions</text>
|
||||||
|
<text x="170" y="120" font-size="10" fill="#475569">• api_usage_logs</text>
|
||||||
|
<text x="170" y="134" font-size="10" fill="#475569">• system_settings</text>
|
||||||
|
<text x="170" y="148" font-size="10" fill="#475569">• activity_logs</text>
|
||||||
|
<text x="170" y="162" font-size="10" fill="#475569">• credit_history</text>
|
||||||
|
|
||||||
|
<text x="160" y="248" text-anchor="middle" font-size="10" fill="#64748b">File: server/database.sqlite</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- External APIs Section -->
|
||||||
|
<g transform="translate(50, 380)">
|
||||||
|
<rect width="540" height="180" rx="12" fill="url(#externalGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="270" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">External APIs</text>
|
||||||
|
<rect x="15" y="50" width="510" height="110" rx="8" fill="white" fill-opacity="0.95"/>
|
||||||
|
|
||||||
|
<!-- API Groups -->
|
||||||
|
<g transform="translate(25, 70)">
|
||||||
|
<rect width="110" height="70" rx="6" fill="#f0f9ff" stroke="#0ea5e9" stroke-width="1"/>
|
||||||
|
<text x="55" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#0369a1">Google</text>
|
||||||
|
<text x="55" y="38" text-anchor="middle" font-size="9" fill="#475569">Gemini AI</text>
|
||||||
|
<text x="55" y="52" text-anchor="middle" font-size="9" fill="#475569">Places API</text>
|
||||||
|
<text x="55" y="66" text-anchor="middle" font-size="9" fill="#475569">OAuth 2.0</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(145, 70)">
|
||||||
|
<rect width="110" height="70" rx="6" fill="#fdf4ff" stroke="#d946ef" stroke-width="1"/>
|
||||||
|
<text x="55" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#a21caf">Suno AI</text>
|
||||||
|
<text x="55" y="38" text-anchor="middle" font-size="9" fill="#475569">Music Gen</text>
|
||||||
|
<text x="55" y="52" text-anchor="middle" font-size="9" fill="#475569">V5 Model</text>
|
||||||
|
<text x="55" y="66" text-anchor="middle" font-size="9" fill="#475569">Custom Mode</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(265, 70)">
|
||||||
|
<rect width="110" height="70" rx="6" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||||
|
<text x="55" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#16a34a">Naver</text>
|
||||||
|
<text x="55" y="38" text-anchor="middle" font-size="9" fill="#475569">Map GraphQL</text>
|
||||||
|
<text x="55" y="52" text-anchor="middle" font-size="9" fill="#475569">OAuth 2.0</text>
|
||||||
|
<text x="55" y="66" text-anchor="middle" font-size="9" fill="#475569">Cookie Auth</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(385, 70)">
|
||||||
|
<rect width="110" height="70" rx="6" fill="#fff7ed" stroke="#f97316" stroke-width="1"/>
|
||||||
|
<text x="55" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#ea580c">TourAPI</text>
|
||||||
|
<text x="55" y="38" text-anchor="middle" font-size="9" fill="#475569">축제 정보</text>
|
||||||
|
<text x="55" y="52" text-anchor="middle" font-size="9" fill="#475569">펜션 정보</text>
|
||||||
|
<text x="55" y="66" text-anchor="middle" font-size="9" fill="#475569">지역 코드</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Upload Platforms Section -->
|
||||||
|
<g transform="translate(610, 380)">
|
||||||
|
<rect width="540" height="180" rx="12" fill="url(#platformGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="270" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">Upload Platforms</text>
|
||||||
|
<rect x="15" y="50" width="510" height="110" rx="8" fill="white" fill-opacity="0.95"/>
|
||||||
|
|
||||||
|
<!-- Platform Groups -->
|
||||||
|
<g transform="translate(35, 70)">
|
||||||
|
<rect width="140" height="70" rx="6" fill="#fef2f2" stroke="#ef4444" stroke-width="1"/>
|
||||||
|
<text x="70" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#dc2626">YouTube</text>
|
||||||
|
<text x="70" y="38" text-anchor="middle" font-size="9" fill="#475569">OAuth 2.0 연동</text>
|
||||||
|
<text x="70" y="52" text-anchor="middle" font-size="9" fill="#475569">플레이리스트 관리</text>
|
||||||
|
<text x="70" y="66" text-anchor="middle" font-size="9" fill="#475569">Analytics API</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(185, 70)">
|
||||||
|
<rect width="140" height="70" rx="6" fill="#fdf2f8" stroke="#ec4899" stroke-width="1"/>
|
||||||
|
<text x="70" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#db2777">Instagram</text>
|
||||||
|
<text x="70" y="38" text-anchor="middle" font-size="9" fill="#475569">Reels 업로드</text>
|
||||||
|
<text x="70" y="52" text-anchor="middle" font-size="9" fill="#475569">자동 캡션/해시태그</text>
|
||||||
|
<text x="70" y="66" text-anchor="middle" font-size="9" fill="#475569">주간 통계</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(335, 70)">
|
||||||
|
<rect width="140" height="70" rx="6" fill="#f0f0f0" stroke="#171717" stroke-width="1"/>
|
||||||
|
<text x="70" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#171717">TikTok</text>
|
||||||
|
<text x="70" y="38" text-anchor="middle" font-size="9" fill="#475569">OAuth 2.0 연동</text>
|
||||||
|
<text x="70" y="52" text-anchor="middle" font-size="9" fill="#475569">Direct Post API</text>
|
||||||
|
<text x="70" y="66" text-anchor="middle" font-size="9" fill="#475569">개인정보 설정</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Data Flow Section -->
|
||||||
|
<g transform="translate(50, 590)">
|
||||||
|
<rect width="1100" height="180" rx="12" fill="#1e293b" filter="url(#shadow)"/>
|
||||||
|
<text x="550" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">Video Generation Pipeline</text>
|
||||||
|
|
||||||
|
<!-- Flow Steps -->
|
||||||
|
<g transform="translate(30, 55)">
|
||||||
|
<rect width="150" height="100" rx="8" fill="#3b82f6"/>
|
||||||
|
<text x="75" y="25" text-anchor="middle" font-size="11" font-weight="bold" fill="white">1. 입력</text>
|
||||||
|
<text x="75" y="45" text-anchor="middle" font-size="9" fill="#dbeafe">펜션 정보</text>
|
||||||
|
<text x="75" y="60" text-anchor="middle" font-size="9" fill="#dbeafe">이미지 (최대 100장)</text>
|
||||||
|
<text x="75" y="75" text-anchor="middle" font-size="9" fill="#dbeafe">URL 크롤링</text>
|
||||||
|
<text x="75" y="90" text-anchor="middle" font-size="9" fill="#dbeafe">(Naver/Google/Insta)</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path d="M195 105 L225 105" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
|
||||||
|
<g transform="translate(235, 55)">
|
||||||
|
<rect width="150" height="100" rx="8" fill="#8b5cf6"/>
|
||||||
|
<text x="75" y="25" text-anchor="middle" font-size="11" font-weight="bold" fill="white">2. AI 콘텐츠 생성</text>
|
||||||
|
<text x="75" y="45" text-anchor="middle" font-size="9" fill="#ede9fe">Gemini: 광고 카피</text>
|
||||||
|
<text x="75" y="60" text-anchor="middle" font-size="9" fill="#ede9fe">Gemini: TTS 음성</text>
|
||||||
|
<text x="75" y="75" text-anchor="middle" font-size="9" fill="#ede9fe">Suno: 배경 음악</text>
|
||||||
|
<text x="75" y="90" text-anchor="middle" font-size="9" fill="#ede9fe">DNA 분석</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path d="M400 105 L430 105" stroke="#94a3b8" stroke-width="2"/>
|
||||||
|
|
||||||
|
<g transform="translate(440, 55)">
|
||||||
|
<rect width="150" height="100" rx="8" fill="#10b981"/>
|
||||||
|
<text x="75" y="25" text-anchor="middle" font-size="11" font-weight="bold" fill="white">3. 영상 렌더링</text>
|
||||||
|
<text x="75" y="45" text-anchor="middle" font-size="9" fill="#d1fae5">Puppeteer 캡처</text>
|
||||||
|
<text x="75" y="60" text-anchor="middle" font-size="9" fill="#d1fae5">FFmpeg 병합</text>
|
||||||
|
<text x="75" y="75" text-anchor="middle" font-size="9" fill="#d1fae5">H.264 + AAC</text>
|
||||||
|
<text x="75" y="90" text-anchor="middle" font-size="9" fill="#d1fae5">9:16 / 16:9 / 1:1</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path d="M605 105 L635 105" stroke="#94a3b8" stroke-width="2"/>
|
||||||
|
|
||||||
|
<g transform="translate(645, 55)">
|
||||||
|
<rect width="150" height="100" rx="8" fill="#f59e0b"/>
|
||||||
|
<text x="75" y="25" text-anchor="middle" font-size="11" font-weight="bold" fill="white">4. 후처리</text>
|
||||||
|
<text x="75" y="45" text-anchor="middle" font-size="9" fill="#fef3c7">SEO 최적화</text>
|
||||||
|
<text x="75" y="60" text-anchor="middle" font-size="9" fill="#fef3c7">다국어 제목/설명</text>
|
||||||
|
<text x="75" y="75" text-anchor="middle" font-size="9" fill="#fef3c7">해시태그 생성</text>
|
||||||
|
<text x="75" y="90" text-anchor="middle" font-size="9" fill="#fef3c7">썸네일 생성</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<path d="M810 105 L840 105" stroke="#94a3b8" stroke-width="2"/>
|
||||||
|
|
||||||
|
<g transform="translate(850, 55)">
|
||||||
|
<rect width="200" height="100" rx="8" fill="#ef4444"/>
|
||||||
|
<text x="100" y="25" text-anchor="middle" font-size="11" font-weight="bold" fill="white">5. 멀티 플랫폼 업로드</text>
|
||||||
|
<text x="100" y="45" text-anchor="middle" font-size="9" fill="#fecaca">YouTube (플레이리스트)</text>
|
||||||
|
<text x="100" y="60" text-anchor="middle" font-size="9" fill="#fecaca">Instagram (Reels)</text>
|
||||||
|
<text x="100" y="75" text-anchor="middle" font-size="9" fill="#fecaca">TikTok (Direct Post)</text>
|
||||||
|
<text x="100" y="90" text-anchor="middle" font-size="9" fill="#fecaca">자동/수동 선택</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Arrows -->
|
||||||
|
<defs>
|
||||||
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Connection Lines -->
|
||||||
|
<path d="M210 350 L210 380" stroke="#64748b" stroke-width="2" stroke-dasharray="5,5"/>
|
||||||
|
<path d="M600 350 L600 380" stroke="#64748b" stroke-width="2" stroke-dasharray="5,5"/>
|
||||||
|
<path d="M990 350 L990 380" stroke="#64748b" stroke-width="2" stroke-dasharray="5,5"/>
|
||||||
|
|
||||||
|
<path d="M370 210 L440 210" stroke="#64748b" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
<path d="M760 210 L830 210" stroke="#64748b" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||||
|
|
||||||
|
<!-- Version Info -->
|
||||||
|
<text x="1150" y="790" text-anchor="end" font-size="10" fill="#94a3b8">v3.6.0 - CaStAD Architecture</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1,69 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
|
||||||
|
<defs>
|
||||||
|
<!-- Custard cream gradient -->
|
||||||
|
<linearGradient id="custardGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#FFF5E1"/>
|
||||||
|
<stop offset="50%" style="stop-color:#FFE4B5"/>
|
||||||
|
<stop offset="100%" style="stop-color:#F5C97A"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- Caramel top gradient -->
|
||||||
|
<linearGradient id="caramelGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#D4A056"/>
|
||||||
|
<stop offset="100%" style="stop-color:#B8860B"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- Bowl/Cup gradient -->
|
||||||
|
<linearGradient id="bowlGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#8B7355"/>
|
||||||
|
<stop offset="50%" style="stop-color:#6B4423"/>
|
||||||
|
<stop offset="100%" style="stop-color:#4A2C17"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- Shine effect -->
|
||||||
|
<linearGradient id="shineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
|
||||||
|
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0"/>
|
||||||
|
</linearGradient>
|
||||||
|
<!-- Drop shadow -->
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000000" flood-opacity="0.2"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Ramekin/Bowl base -->
|
||||||
|
<ellipse cx="60" cy="95" rx="40" ry="8" fill="#3D2314" opacity="0.3"/>
|
||||||
|
|
||||||
|
<!-- Bowl body -->
|
||||||
|
<path d="M20 55 L25 90 Q60 100 95 90 L100 55 Q100 50 95 48 L25 48 Q20 50 20 55" fill="url(#bowlGradient)" filter="url(#shadow)"/>
|
||||||
|
|
||||||
|
<!-- Bowl rim -->
|
||||||
|
<ellipse cx="60" cy="48" rx="38" ry="8" fill="#8B7355"/>
|
||||||
|
<ellipse cx="60" cy="48" rx="35" ry="6" fill="#6B4423"/>
|
||||||
|
|
||||||
|
<!-- Custard cream -->
|
||||||
|
<ellipse cx="60" cy="46" rx="32" ry="5" fill="url(#custardGradient)"/>
|
||||||
|
|
||||||
|
<!-- Caramel top layer -->
|
||||||
|
<ellipse cx="60" cy="44" rx="28" ry="4" fill="url(#caramelGradient)"/>
|
||||||
|
|
||||||
|
<!-- Caramelized sugar drizzle -->
|
||||||
|
<path d="M40 43 Q50 41 60 43 Q70 45 80 43" stroke="#8B4513" stroke-width="1.5" fill="none" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Shine on custard -->
|
||||||
|
<ellipse cx="48" cy="42" rx="8" ry="2" fill="url(#shineGradient)"/>
|
||||||
|
|
||||||
|
<!-- Steam wisps -->
|
||||||
|
<path d="M45 35 Q43 28 47 22" stroke="#D4A056" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.5">
|
||||||
|
<animate attributeName="d" dur="2s" repeatCount="indefinite" values="M45 35 Q43 28 47 22;M45 35 Q47 28 43 22;M45 35 Q43 28 47 22"/>
|
||||||
|
<animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="0.5;0.3;0.5"/>
|
||||||
|
</path>
|
||||||
|
<path d="M60 33 Q58 26 62 20" stroke="#D4A056" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6">
|
||||||
|
<animate attributeName="d" dur="2.5s" repeatCount="indefinite" values="M60 33 Q58 26 62 20;M60 33 Q62 26 58 20;M60 33 Q58 26 62 20"/>
|
||||||
|
<animate attributeName="opacity" dur="2.5s" repeatCount="indefinite" values="0.6;0.3;0.6"/>
|
||||||
|
</path>
|
||||||
|
<path d="M75 35 Q73 28 77 22" stroke="#D4A056" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.4">
|
||||||
|
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="M75 35 Q73 28 77 22;M75 35 Q77 28 73 22;M75 35 Q73 28 77 22"/>
|
||||||
|
<animate attributeName="opacity" dur="3s" repeatCount="indefinite" values="0.4;0.2;0.4"/>
|
||||||
|
</path>
|
||||||
|
|
||||||
|
<!-- "C" letter integrated into design (subtle) -->
|
||||||
|
<text x="60" y="75" font-family="Georgia, serif" font-size="20" font-weight="bold" fill="#FFF5E1" text-anchor="middle" opacity="0.9">C</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,196 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="clientGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1d4ed8"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="serverGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#10b981"/>
|
||||||
|
<stop offset="100%" style="stop-color:#059669"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="workerGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#f59e0b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#d97706"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="dbGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#8b5cf6"/>
|
||||||
|
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="uploadGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#ec4899"/>
|
||||||
|
<stop offset="100%" style="stop-color:#db2777"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="2" dy="4" stdDeviation="4" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8"/>
|
||||||
|
</marker>
|
||||||
|
<marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#10b981"/>
|
||||||
|
</marker>
|
||||||
|
<marker id="arrowOrange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||||
|
<polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect width="1200" height="700" fill="url(#bgGrad)"/>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<text x="600" y="40" text-anchor="middle" fill="#f8fafc" font-size="24" font-weight="bold" font-family="system-ui">
|
||||||
|
CastAD v3.7.0 - Background Render Queue System
|
||||||
|
</text>
|
||||||
|
<text x="600" y="65" text-anchor="middle" fill="#94a3b8" font-size="14" font-family="system-ui">
|
||||||
|
Asynchronous Video Rendering with Credit Management
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Client Section -->
|
||||||
|
<rect x="50" y="100" width="280" height="280" rx="12" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2" filter="url(#shadow)"/>
|
||||||
|
<text x="190" y="130" text-anchor="middle" fill="#60a5fa" font-size="16" font-weight="bold" font-family="system-ui">CLIENT (React)</text>
|
||||||
|
|
||||||
|
<!-- Client Components -->
|
||||||
|
<rect x="70" y="150" width="240" height="50" rx="8" fill="url(#clientGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="190" y="180" text-anchor="middle" fill="white" font-size="13" font-weight="500" font-family="system-ui">ResultPlayer.tsx</text>
|
||||||
|
|
||||||
|
<rect x="70" y="210" width="115" height="40" rx="6" fill="#2563eb"/>
|
||||||
|
<text x="127" y="235" text-anchor="middle" fill="white" font-size="11" font-family="system-ui">handleServerDownload()</text>
|
||||||
|
|
||||||
|
<rect x="195" y="210" width="115" height="40" rx="6" fill="#2563eb"/>
|
||||||
|
<text x="252" y="235" text-anchor="middle" fill="white" font-size="11" font-family="system-ui">pollJobStatus()</text>
|
||||||
|
|
||||||
|
<rect x="70" y="260" width="240" height="50" rx="8" fill="url(#clientGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="190" y="290" text-anchor="middle" fill="white" font-size="13" font-weight="500" font-family="system-ui">LibraryView.tsx</text>
|
||||||
|
|
||||||
|
<rect x="70" y="320" width="115" height="40" rx="6" fill="#2563eb"/>
|
||||||
|
<text x="127" y="340" text-anchor="middle" fill="white" font-size="10" font-family="system-ui">YouTube Upload</text>
|
||||||
|
|
||||||
|
<rect x="195" y="320" width="115" height="40" rx="6" fill="#c026d3"/>
|
||||||
|
<text x="252" y="340" text-anchor="middle" fill="white" font-size="10" font-family="system-ui">Instagram Upload</text>
|
||||||
|
|
||||||
|
<!-- Server Section -->
|
||||||
|
<rect x="400" y="100" width="350" height="400" rx="12" fill="#134e4a" stroke="#10b981" stroke-width="2" filter="url(#shadow)"/>
|
||||||
|
<text x="575" y="130" text-anchor="middle" fill="#34d399" font-size="16" font-weight="bold" font-family="system-ui">SERVER (Express.js)</text>
|
||||||
|
|
||||||
|
<!-- API Endpoints -->
|
||||||
|
<rect x="420" y="150" width="310" height="120" rx="8" fill="url(#serverGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="575" y="175" text-anchor="middle" fill="white" font-size="13" font-weight="bold" font-family="system-ui">Render Queue API</text>
|
||||||
|
|
||||||
|
<text x="440" y="200" fill="#d1fae5" font-size="11" font-family="monospace">POST /api/render/start</text>
|
||||||
|
<text x="640" y="200" fill="#fef3c7" font-size="10" font-family="system-ui">→ jobId, credit deduction</text>
|
||||||
|
|
||||||
|
<text x="440" y="220" fill="#d1fae5" font-size="11" font-family="monospace">GET /api/render/status/:id</text>
|
||||||
|
<text x="670" y="220" fill="#fef3c7" font-size="10" font-family="system-ui">→ progress %</text>
|
||||||
|
|
||||||
|
<text x="440" y="240" fill="#d1fae5" font-size="11" font-family="monospace">GET /api/render/jobs</text>
|
||||||
|
<text x="640" y="240" fill="#fef3c7" font-size="10" font-family="system-ui">→ job list</text>
|
||||||
|
|
||||||
|
<text x="440" y="260" fill="#fca5a5" font-size="10" font-family="system-ui">* 계정당 동시 렌더링 1개 제한</text>
|
||||||
|
|
||||||
|
<!-- Worker Section -->
|
||||||
|
<rect x="420" y="290" width="310" height="100" rx="8" fill="url(#workerGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="575" y="315" text-anchor="middle" fill="white" font-size="13" font-weight="bold" font-family="system-ui">Background Worker</text>
|
||||||
|
|
||||||
|
<text x="440" y="340" fill="#fef3c7" font-size="11" font-family="system-ui">• processRenderQueue()</text>
|
||||||
|
<text x="440" y="358" fill="#fef3c7" font-size="11" font-family="system-ui">• MAX_CONCURRENT_RENDERS: 3</text>
|
||||||
|
<text x="440" y="376" fill="#fef3c7" font-size="11" font-family="system-ui">• Puppeteer + FFmpeg</text>
|
||||||
|
|
||||||
|
<!-- Upload APIs -->
|
||||||
|
<rect x="420" y="405" width="310" height="80" rx="8" fill="url(#uploadGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="575" y="430" text-anchor="middle" fill="white" font-size="13" font-weight="bold" font-family="system-ui">Platform Upload APIs</text>
|
||||||
|
|
||||||
|
<text x="440" y="455" fill="#fce7f3" font-size="11" font-family="monospace">POST /api/youtube/my-upload</text>
|
||||||
|
<text x="440" y="475" fill="#fce7f3" font-size="11" font-family="monospace">POST /api/instagram/upload</text>
|
||||||
|
|
||||||
|
<!-- Database Section -->
|
||||||
|
<rect x="820" y="100" width="330" height="400" rx="12" fill="#4c1d95" stroke="#8b5cf6" stroke-width="2" filter="url(#shadow)"/>
|
||||||
|
<text x="985" y="130" text-anchor="middle" fill="#c4b5fd" font-size="16" font-weight="bold" font-family="system-ui">DATABASE (SQLite)</text>
|
||||||
|
|
||||||
|
<!-- Tables -->
|
||||||
|
<rect x="840" y="150" width="290" height="140" rx="8" fill="url(#dbGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="985" y="175" text-anchor="middle" fill="white" font-size="13" font-weight="bold" font-family="system-ui">render_jobs</text>
|
||||||
|
|
||||||
|
<text x="860" y="200" fill="#e9d5ff" font-size="10" font-family="monospace">id TEXT PRIMARY KEY</text>
|
||||||
|
<text x="860" y="218" fill="#e9d5ff" font-size="10" font-family="monospace">user_id, pension_id</text>
|
||||||
|
<text x="860" y="236" fill="#e9d5ff" font-size="10" font-family="monospace">status: pending|processing|completed|failed</text>
|
||||||
|
<text x="860" y="254" fill="#e9d5ff" font-size="10" font-family="monospace">progress: 0-100</text>
|
||||||
|
<text x="860" y="272" fill="#e9d5ff" font-size="10" font-family="monospace">credits_charged, credits_refunded</text>
|
||||||
|
|
||||||
|
<rect x="840" y="305" width="290" height="80" rx="8" fill="url(#dbGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="985" y="330" text-anchor="middle" fill="white" font-size="13" font-weight="bold" font-family="system-ui">credit_history</text>
|
||||||
|
<text x="860" y="355" fill="#e9d5ff" font-size="10" font-family="monospace">user_id, amount, type</text>
|
||||||
|
<text x="860" y="373" fill="#e9d5ff" font-size="10" font-family="monospace">description, balance_after</text>
|
||||||
|
|
||||||
|
<rect x="840" y="400" width="290" height="80" rx="8" fill="url(#dbGrad)" filter="url(#shadow)"/>
|
||||||
|
<text x="985" y="425" text-anchor="middle" fill="white" font-size="13" font-weight="bold" font-family="system-ui">history</text>
|
||||||
|
<text x="860" y="450" fill="#e9d5ff" font-size="10" font-family="monospace">final_video_path</text>
|
||||||
|
<text x="860" y="468" fill="#e9d5ff" font-size="10" font-family="monospace">business_name, pension_id</text>
|
||||||
|
|
||||||
|
<!-- Flow Arrows -->
|
||||||
|
<!-- Client to Server -->
|
||||||
|
<path d="M 330 200 L 400 200" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
|
||||||
|
<text x="365" y="195" fill="#60a5fa" font-size="9" font-family="system-ui">1. 렌더링 요청</text>
|
||||||
|
|
||||||
|
<!-- Server to DB (save job) -->
|
||||||
|
<path d="M 730 200 L 820 200" stroke="#10b981" stroke-width="2" fill="none" marker-end="url(#arrowGreen)"/>
|
||||||
|
<text x="775" y="195" fill="#34d399" font-size="9" font-family="system-ui">2. 작업 저장</text>
|
||||||
|
|
||||||
|
<!-- Server immediate response -->
|
||||||
|
<path d="M 400 220 L 330 220" stroke="#f59e0b" stroke-width="2" fill="none" marker-end="url(#arrowOrange)"/>
|
||||||
|
<text x="365" y="235" fill="#fbbf24" font-size="9" font-family="system-ui">3. jobId 반환</text>
|
||||||
|
|
||||||
|
<!-- Worker processing -->
|
||||||
|
<path d="M 730 340 L 820 300" stroke="#f59e0b" stroke-width="2" fill="none" marker-end="url(#arrowOrange)"/>
|
||||||
|
<text x="760" y="310" fill="#fbbf24" font-size="9" font-family="system-ui">4. 진행률</text>
|
||||||
|
|
||||||
|
<!-- Polling -->
|
||||||
|
<path d="M 330 230 C 350 280 350 280 400 280" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowhead)"/>
|
||||||
|
<text x="340" y="275" fill="#94a3b8" font-size="8" font-family="system-ui">5. 폴링</text>
|
||||||
|
|
||||||
|
<!-- Credit Flow Section -->
|
||||||
|
<rect x="50" y="520" width="500" height="160" rx="12" fill="#1e293b" stroke="#64748b" stroke-width="1" filter="url(#shadow)"/>
|
||||||
|
<text x="300" y="550" text-anchor="middle" fill="#f8fafc" font-size="14" font-weight="bold" font-family="system-ui">Credit Management Flow</text>
|
||||||
|
|
||||||
|
<!-- Credit flow boxes -->
|
||||||
|
<rect x="70" y="570" width="100" height="45" rx="6" fill="#3b82f6"/>
|
||||||
|
<text x="120" y="590" text-anchor="middle" fill="white" font-size="10" font-family="system-ui">렌더링 요청</text>
|
||||||
|
<text x="120" y="605" text-anchor="middle" fill="#bfdbfe" font-size="9" font-family="system-ui">크레딧 체크</text>
|
||||||
|
|
||||||
|
<rect x="190" y="570" width="100" height="45" rx="6" fill="#f59e0b"/>
|
||||||
|
<text x="240" y="590" text-anchor="middle" fill="white" font-size="10" font-family="system-ui">선차감</text>
|
||||||
|
<text x="240" y="605" text-anchor="middle" fill="#fef3c7" font-size="9" font-family="system-ui">-1 크레딧</text>
|
||||||
|
|
||||||
|
<rect x="310" y="570" width="100" height="45" rx="6" fill="#10b981"/>
|
||||||
|
<text x="360" y="590" text-anchor="middle" fill="white" font-size="10" font-family="system-ui">성공</text>
|
||||||
|
<text x="360" y="605" text-anchor="middle" fill="#d1fae5" font-size="9" font-family="system-ui">완료</text>
|
||||||
|
|
||||||
|
<rect x="310" y="625" width="100" height="45" rx="6" fill="#ef4444"/>
|
||||||
|
<text x="360" y="645" text-anchor="middle" fill="white" font-size="10" font-family="system-ui">실패</text>
|
||||||
|
<text x="360" y="660" text-anchor="middle" fill="#fecaca" font-size="9" font-family="system-ui">크레딧 환불</text>
|
||||||
|
|
||||||
|
<!-- Credit flow arrows -->
|
||||||
|
<path d="M 170 592 L 190 592" stroke="#94a3b8" stroke-width="1.5" fill="none" marker-end="url(#arrowhead)"/>
|
||||||
|
<path d="M 290 592 L 310 592" stroke="#94a3b8" stroke-width="1.5" fill="none" marker-end="url(#arrowhead)"/>
|
||||||
|
<path d="M 290 600 L 295 600 L 295 647 L 310 647" stroke="#94a3b8" stroke-width="1.5" fill="none" marker-end="url(#arrowhead)"/>
|
||||||
|
|
||||||
|
<!-- Constraint boxes -->
|
||||||
|
<rect x="430" y="570" width="105" height="100" rx="6" fill="#7c3aed"/>
|
||||||
|
<text x="482" y="595" text-anchor="middle" fill="white" font-size="11" font-weight="bold" font-family="system-ui">제한 사항</text>
|
||||||
|
<text x="482" y="615" text-anchor="middle" fill="#e9d5ff" font-size="10" font-family="system-ui">계정당: 1개</text>
|
||||||
|
<text x="482" y="635" text-anchor="middle" fill="#e9d5ff" font-size="10" font-family="system-ui">서버: 3개</text>
|
||||||
|
<text x="482" y="655" text-anchor="middle" fill="#e9d5ff" font-size="10" font-family="system-ui">동시 렌더링</text>
|
||||||
|
|
||||||
|
<!-- Feature Summary -->
|
||||||
|
<rect x="580" y="520" width="570" height="160" rx="12" fill="#1e293b" stroke="#64748b" stroke-width="1" filter="url(#shadow)"/>
|
||||||
|
<text x="865" y="550" text-anchor="middle" fill="#f8fafc" font-size="14" font-weight="bold" font-family="system-ui">v3.7.0 New Features</text>
|
||||||
|
|
||||||
|
<text x="600" y="580" fill="#60a5fa" font-size="12" font-family="system-ui">• Background Render Queue - 페이지 이동/로그아웃해도 작업 계속</text>
|
||||||
|
<text x="600" y="605" fill="#34d399" font-size="12" font-family="system-ui">• Credit Pre-deduction - 작업 시작 시 선차감, 실패 시 환불</text>
|
||||||
|
<text x="600" y="630" fill="#fbbf24" font-size="12" font-family="system-ui">• Per-user Rate Limit - 계정당 동시 렌더링 1개 제한</text>
|
||||||
|
<text x="600" y="655" fill="#f472b6" font-size="12" font-family="system-ui">• Instagram Upload - ResultPlayer & LibraryView에서 업로드</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
|
|
@ -0,0 +1,309 @@
|
||||||
|
/**
|
||||||
|
* Google Cloud Billing Service
|
||||||
|
* BigQuery를 통해 실제 결제 데이터를 조회합니다.
|
||||||
|
*/
|
||||||
|
const { BigQuery } = require('@google-cloud/bigquery');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// 환경 변수
|
||||||
|
const KEY_PATH = process.env.GOOGLE_BILLING_KEY_PATH?.replace('./server/', path.join(__dirname, '/').replace('/server/', '/'));
|
||||||
|
const PROJECT_ID = process.env.GOOGLE_CLOUD_PROJECT_ID || 'grand-solstice-477822-s9';
|
||||||
|
const DATASET_ID = process.env.GOOGLE_BILLING_DATASET_ID || 'billing_export';
|
||||||
|
const BILLING_TABLE_PREFIX = 'gcp_billing_export';
|
||||||
|
|
||||||
|
let bigqueryClient = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* BigQuery 클라이언트 초기화
|
||||||
|
*/
|
||||||
|
const getBigQueryClient = () => {
|
||||||
|
if (!bigqueryClient) {
|
||||||
|
const keyPath = KEY_PATH || path.join(__dirname, 'google-billing-key.json');
|
||||||
|
bigqueryClient = new BigQuery({
|
||||||
|
keyFilename: keyPath,
|
||||||
|
projectId: PROJECT_ID
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return bigqueryClient;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 결제 테이블 이름 찾기
|
||||||
|
*/
|
||||||
|
const findBillingTable = async () => {
|
||||||
|
try {
|
||||||
|
const bigquery = getBigQueryClient();
|
||||||
|
const dataset = bigquery.dataset(DATASET_ID);
|
||||||
|
const [tables] = await dataset.getTables();
|
||||||
|
|
||||||
|
const billingTable = tables.find(t =>
|
||||||
|
t.id.includes(BILLING_TABLE_PREFIX) ||
|
||||||
|
t.id.includes('cloud_billing')
|
||||||
|
);
|
||||||
|
|
||||||
|
return billingTable ? billingTable.id : null;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[BillingService] 테이블 조회 오류:', error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 서비스별 비용 요약 (최근 N일)
|
||||||
|
*/
|
||||||
|
const getCostByService = async (days = 30) => {
|
||||||
|
try {
|
||||||
|
const tableName = await findBillingTable();
|
||||||
|
if (!tableName) {
|
||||||
|
return { error: '결제 데이터 테이블이 아직 생성되지 않았습니다. 24-48시간 후 다시 시도하세요.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const bigquery = getBigQueryClient();
|
||||||
|
const query = `
|
||||||
|
SELECT
|
||||||
|
service.description as service_name,
|
||||||
|
SUM(cost) as total_cost,
|
||||||
|
SUM(CASE WHEN cost > 0 THEN cost ELSE 0 END) as actual_cost,
|
||||||
|
currency,
|
||||||
|
COUNT(*) as usage_count
|
||||||
|
FROM \`${PROJECT_ID}.${DATASET_ID}.${tableName}\`
|
||||||
|
WHERE DATE(usage_start_time) >= DATE_SUB(CURRENT_DATE(), INTERVAL ${days} DAY)
|
||||||
|
GROUP BY service.description, currency
|
||||||
|
HAVING total_cost != 0
|
||||||
|
ORDER BY total_cost DESC
|
||||||
|
`;
|
||||||
|
|
||||||
|
const [rows] = await bigquery.query(query);
|
||||||
|
return {
|
||||||
|
period: `${days}일`,
|
||||||
|
services: rows.map(row => ({
|
||||||
|
serviceName: row.service_name,
|
||||||
|
totalCost: parseFloat(row.total_cost?.toFixed(6) || 0),
|
||||||
|
actualCost: parseFloat(row.actual_cost?.toFixed(6) || 0),
|
||||||
|
currency: row.currency,
|
||||||
|
usageCount: row.usage_count
|
||||||
|
})),
|
||||||
|
totalCost: rows.reduce((sum, r) => sum + (r.actual_cost || 0), 0)
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[BillingService] 서비스별 비용 조회 오류:', error.message);
|
||||||
|
return { error: error.message };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 일별 비용 추이 (최근 N일)
|
||||||
|
*/
|
||||||
|
const getDailyCostTrend = async (days = 30) => {
|
||||||
|
try {
|
||||||
|
const tableName = await findBillingTable();
|
||||||
|
if (!tableName) {
|
||||||
|
return { error: '결제 데이터 테이블이 아직 생성되지 않았습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const bigquery = getBigQueryClient();
|
||||||
|
const query = `
|
||||||
|
SELECT
|
||||||
|
DATE(usage_start_time) as date,
|
||||||
|
SUM(cost) as total_cost,
|
||||||
|
currency
|
||||||
|
FROM \`${PROJECT_ID}.${DATASET_ID}.${tableName}\`
|
||||||
|
WHERE DATE(usage_start_time) >= DATE_SUB(CURRENT_DATE(), INTERVAL ${days} DAY)
|
||||||
|
GROUP BY DATE(usage_start_time), currency
|
||||||
|
ORDER BY date DESC
|
||||||
|
`;
|
||||||
|
|
||||||
|
const [rows] = await bigquery.query(query);
|
||||||
|
return {
|
||||||
|
period: `${days}일`,
|
||||||
|
daily: rows.map(row => ({
|
||||||
|
date: row.date?.value || row.date,
|
||||||
|
cost: parseFloat(row.total_cost?.toFixed(6) || 0),
|
||||||
|
currency: row.currency
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[BillingService] 일별 비용 조회 오류:', error.message);
|
||||||
|
return { error: error.message };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SKU별 상세 비용 (Gemini API 등)
|
||||||
|
*/
|
||||||
|
const getCostBySKU = async (days = 30, serviceFilter = null) => {
|
||||||
|
try {
|
||||||
|
const tableName = await findBillingTable();
|
||||||
|
if (!tableName) {
|
||||||
|
return { error: '결제 데이터 테이블이 아직 생성되지 않았습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const bigquery = getBigQueryClient();
|
||||||
|
let whereClause = `DATE(usage_start_time) >= DATE_SUB(CURRENT_DATE(), INTERVAL ${days} DAY)`;
|
||||||
|
|
||||||
|
if (serviceFilter) {
|
||||||
|
whereClause += ` AND LOWER(service.description) LIKE '%${serviceFilter.toLowerCase()}%'`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = `
|
||||||
|
SELECT
|
||||||
|
service.description as service_name,
|
||||||
|
sku.description as sku_name,
|
||||||
|
SUM(cost) as total_cost,
|
||||||
|
SUM(usage.amount) as total_usage,
|
||||||
|
usage.unit as usage_unit,
|
||||||
|
currency
|
||||||
|
FROM \`${PROJECT_ID}.${DATASET_ID}.${tableName}\`
|
||||||
|
WHERE ${whereClause}
|
||||||
|
GROUP BY service.description, sku.description, usage.unit, currency
|
||||||
|
HAVING total_cost > 0
|
||||||
|
ORDER BY total_cost DESC
|
||||||
|
LIMIT 50
|
||||||
|
`;
|
||||||
|
|
||||||
|
const [rows] = await bigquery.query(query);
|
||||||
|
return {
|
||||||
|
period: `${days}일`,
|
||||||
|
filter: serviceFilter,
|
||||||
|
skus: rows.map(row => ({
|
||||||
|
serviceName: row.service_name,
|
||||||
|
skuName: row.sku_name,
|
||||||
|
totalCost: parseFloat(row.total_cost?.toFixed(6) || 0),
|
||||||
|
totalUsage: row.total_usage,
|
||||||
|
usageUnit: row.usage_unit,
|
||||||
|
currency: row.currency
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[BillingService] SKU별 비용 조회 오류:', error.message);
|
||||||
|
return { error: error.message };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 월별 비용 요약
|
||||||
|
*/
|
||||||
|
const getMonthlyCost = async (months = 6) => {
|
||||||
|
try {
|
||||||
|
const tableName = await findBillingTable();
|
||||||
|
if (!tableName) {
|
||||||
|
return { error: '결제 데이터 테이블이 아직 생성되지 않았습니다.' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const bigquery = getBigQueryClient();
|
||||||
|
const query = `
|
||||||
|
SELECT
|
||||||
|
FORMAT_DATE('%Y-%m', DATE(usage_start_time)) as month,
|
||||||
|
service.description as service_name,
|
||||||
|
SUM(cost) as total_cost,
|
||||||
|
currency
|
||||||
|
FROM \`${PROJECT_ID}.${DATASET_ID}.${tableName}\`
|
||||||
|
WHERE DATE(usage_start_time) >= DATE_SUB(CURRENT_DATE(), INTERVAL ${months} MONTH)
|
||||||
|
GROUP BY month, service.description, currency
|
||||||
|
HAVING total_cost > 0
|
||||||
|
ORDER BY month DESC, total_cost DESC
|
||||||
|
`;
|
||||||
|
|
||||||
|
const [rows] = await bigquery.query(query);
|
||||||
|
|
||||||
|
// 월별로 그룹화
|
||||||
|
const byMonth = {};
|
||||||
|
rows.forEach(row => {
|
||||||
|
if (!byMonth[row.month]) {
|
||||||
|
byMonth[row.month] = { month: row.month, services: [], total: 0 };
|
||||||
|
}
|
||||||
|
byMonth[row.month].services.push({
|
||||||
|
serviceName: row.service_name,
|
||||||
|
cost: parseFloat(row.total_cost?.toFixed(6) || 0),
|
||||||
|
currency: row.currency
|
||||||
|
});
|
||||||
|
byMonth[row.month].total += row.total_cost || 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
period: `${months}개월`,
|
||||||
|
monthly: Object.values(byMonth).map(m => ({
|
||||||
|
...m,
|
||||||
|
total: parseFloat(m.total.toFixed(6))
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[BillingService] 월별 비용 조회 오류:', error.message);
|
||||||
|
return { error: error.message };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gemini/Vertex AI 비용만 조회
|
||||||
|
*/
|
||||||
|
const getGeminiCost = async (days = 30) => {
|
||||||
|
return getCostBySKU(days, 'vertex ai');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 전체 비용 대시보드 데이터
|
||||||
|
*/
|
||||||
|
const getBillingDashboard = async (days = 30) => {
|
||||||
|
try {
|
||||||
|
const [byService, dailyTrend, geminiCost] = await Promise.all([
|
||||||
|
getCostByService(days),
|
||||||
|
getDailyCostTrend(days),
|
||||||
|
getGeminiCost(days)
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 총 비용 계산
|
||||||
|
const totalCost = byService.services?.reduce((sum, s) => sum + s.actualCost, 0) || 0;
|
||||||
|
|
||||||
|
// KRW 환산
|
||||||
|
const usdToKrw = 1350;
|
||||||
|
|
||||||
|
return {
|
||||||
|
period: `${days}일`,
|
||||||
|
summary: {
|
||||||
|
totalCostUSD: totalCost.toFixed(4),
|
||||||
|
totalCostKRW: Math.round(totalCost * usdToKrw),
|
||||||
|
serviceCount: byService.services?.length || 0
|
||||||
|
},
|
||||||
|
byService: byService.services || [],
|
||||||
|
dailyTrend: dailyTrend.daily || [],
|
||||||
|
geminiUsage: geminiCost.skus || [],
|
||||||
|
exchangeRate: { USD_KRW: usdToKrw },
|
||||||
|
dataSource: 'Google Cloud BigQuery (실제 결제 데이터)',
|
||||||
|
error: byService.error || dailyTrend.error || null
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[BillingService] 대시보드 데이터 조회 오류:', error.message);
|
||||||
|
return { error: error.message };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 결제 데이터 사용 가능 여부 확인
|
||||||
|
*/
|
||||||
|
const checkBillingDataAvailable = async () => {
|
||||||
|
try {
|
||||||
|
const tableName = await findBillingTable();
|
||||||
|
return {
|
||||||
|
available: !!tableName,
|
||||||
|
tableName: tableName,
|
||||||
|
message: tableName
|
||||||
|
? '결제 데이터를 사용할 수 있습니다.'
|
||||||
|
: '결제 데이터 테이블이 아직 생성되지 않았습니다. BigQuery Export 설정 후 24-48시간이 필요합니다.'
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
available: false,
|
||||||
|
error: error.message
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getCostByService,
|
||||||
|
getDailyCostTrend,
|
||||||
|
getCostBySKU,
|
||||||
|
getMonthlyCost,
|
||||||
|
getGeminiCost,
|
||||||
|
getBillingDashboard,
|
||||||
|
checkBillingDataAvailable
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,897 @@
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const path = require('path');
|
||||||
|
const bcrypt = require('bcrypt');
|
||||||
|
|
||||||
|
const DB_PATH = path.join(__dirname, 'database.sqlite');
|
||||||
|
|
||||||
|
const db = new sqlite3.Database(DB_PATH, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('데이터베이스 연결 실패:', err.message);
|
||||||
|
} else {
|
||||||
|
console.log('SQLite 데이터베이스에 연결되었습니다.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 테이블 초기화
|
||||||
|
db.serialize(() => {
|
||||||
|
// Users 테이블
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS users (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
username TEXT UNIQUE NOT NULL,
|
||||||
|
email TEXT UNIQUE,
|
||||||
|
password TEXT NOT NULL,
|
||||||
|
name TEXT,
|
||||||
|
phone TEXT,
|
||||||
|
role TEXT DEFAULT 'user',
|
||||||
|
approved INTEGER DEFAULT 0,
|
||||||
|
email_verified INTEGER DEFAULT 0,
|
||||||
|
verification_token TEXT,
|
||||||
|
reset_token TEXT,
|
||||||
|
reset_token_expiry DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 기존 테이블에 새 컬럼 추가 (이미 존재하면 무시)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN email TEXT UNIQUE", (err) => {});
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN email_verified INTEGER DEFAULT 0", (err) => {});
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN verification_token TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN reset_token TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN reset_token_expiry DATETIME", (err) => {});
|
||||||
|
// OAuth 컬럼 추가
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN oauth_provider TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN oauth_provider_id TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN profile_image TEXT", (err) => {});
|
||||||
|
// 크레딧 컬럼 추가 (무료 플랜 기본값 10)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN credits INTEGER DEFAULT 10", (err) => {});
|
||||||
|
|
||||||
|
// 구독 플랜 컬럼 추가 (free, basic, pro, business)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN plan_type TEXT DEFAULT 'free'", (err) => {});
|
||||||
|
// 최대 펜션 수 (free/basic: 1, pro: 5, business: unlimited)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN max_pensions INTEGER DEFAULT 1", (err) => {});
|
||||||
|
// 월간 크레딧 한도 (플랜별 다름, 무료=10)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN monthly_credits INTEGER DEFAULT 10", (err) => {});
|
||||||
|
// 구독 시작일
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN subscription_started_at DATETIME", (err) => {});
|
||||||
|
// 구독 만료일
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN subscription_expires_at DATETIME", (err) => {});
|
||||||
|
|
||||||
|
// 사용자 경험 레벨 (beginner, intermediate, pro)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN experience_level TEXT DEFAULT 'beginner'", (err) => {});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 자동 생성 설정 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS auto_generation_settings (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
enabled INTEGER DEFAULT 0,
|
||||||
|
day_of_week INTEGER DEFAULT 1,
|
||||||
|
time_of_day TEXT DEFAULT '09:00',
|
||||||
|
pension_id INTEGER,
|
||||||
|
last_generated_at DATETIME,
|
||||||
|
next_scheduled_at DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 자동 업로드 플래그 추가 (Pro 사용자용)
|
||||||
|
db.run("ALTER TABLE auto_generation_settings ADD COLUMN auto_youtube INTEGER DEFAULT 1", (err) => {});
|
||||||
|
db.run("ALTER TABLE auto_generation_settings ADD COLUMN auto_instagram INTEGER DEFAULT 1", (err) => {});
|
||||||
|
db.run("ALTER TABLE auto_generation_settings ADD COLUMN auto_tiktok INTEGER DEFAULT 1", (err) => {});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 업로드 이력 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS upload_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
history_id INTEGER,
|
||||||
|
platform TEXT NOT NULL,
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
external_id TEXT,
|
||||||
|
external_url TEXT,
|
||||||
|
error_message TEXT,
|
||||||
|
uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(history_id) REFERENCES history(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 자동 생성 작업 큐 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS generation_queue (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
scheduled_at DATETIME,
|
||||||
|
started_at DATETIME,
|
||||||
|
completed_at DATETIME,
|
||||||
|
error_message TEXT,
|
||||||
|
result_video_path TEXT,
|
||||||
|
result_history_id INTEGER,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 펜션/브랜드 프로필 테이블 (다중 펜션 지원)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS pension_profiles (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
is_default INTEGER DEFAULT 0,
|
||||||
|
brand_name TEXT,
|
||||||
|
brand_name_en TEXT,
|
||||||
|
region TEXT,
|
||||||
|
address TEXT,
|
||||||
|
pension_types TEXT,
|
||||||
|
target_customers TEXT,
|
||||||
|
key_features TEXT,
|
||||||
|
nearby_attractions TEXT,
|
||||||
|
booking_url TEXT,
|
||||||
|
homepage_url TEXT,
|
||||||
|
kakao_channel TEXT,
|
||||||
|
instagram_handle TEXT,
|
||||||
|
languages TEXT DEFAULT 'KO',
|
||||||
|
price_range TEXT,
|
||||||
|
description TEXT,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 펜션별 is_default 컬럼 추가 (기존 테이블용)
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN is_default INTEGER DEFAULT 0", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
// 펜션별 YouTube 플레이리스트 ID 직접 연결
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN youtube_playlist_id TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN youtube_playlist_title TEXT", (err) => {});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 펜션 이미지 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS pension_images (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
pension_id INTEGER NOT NULL,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
filename TEXT NOT NULL,
|
||||||
|
original_url TEXT,
|
||||||
|
file_path TEXT NOT NULL,
|
||||||
|
file_size INTEGER,
|
||||||
|
mime_type TEXT DEFAULT 'image/jpeg',
|
||||||
|
source TEXT DEFAULT 'crawl',
|
||||||
|
is_priority INTEGER DEFAULT 0,
|
||||||
|
used_count INTEGER DEFAULT 0,
|
||||||
|
last_used_at DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// pension_images 우선순위 컬럼 추가 (기존 테이블용)
|
||||||
|
db.run("ALTER TABLE pension_images ADD COLUMN is_priority INTEGER DEFAULT 0", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_images ADD COLUMN used_count INTEGER DEFAULT 0", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_images ADD COLUMN last_used_at DATETIME", (err) => {});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 일일 자동 생성 설정 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS daily_auto_generation (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
pension_id INTEGER NOT NULL UNIQUE,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
enabled INTEGER DEFAULT 0,
|
||||||
|
generation_time TEXT DEFAULT '09:00',
|
||||||
|
image_mode TEXT DEFAULT 'random',
|
||||||
|
random_count INTEGER DEFAULT 10,
|
||||||
|
auto_upload_youtube INTEGER DEFAULT 1,
|
||||||
|
auto_upload_instagram INTEGER DEFAULT 0,
|
||||||
|
auto_upload_tiktok INTEGER DEFAULT 0,
|
||||||
|
last_generated_at DATETIME,
|
||||||
|
next_scheduled_at DATETIME,
|
||||||
|
consecutive_failures INTEGER DEFAULT 0,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 자동 생성 로그 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS auto_generation_logs (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
pension_id INTEGER NOT NULL,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
video_path TEXT,
|
||||||
|
youtube_video_id TEXT,
|
||||||
|
instagram_media_id TEXT,
|
||||||
|
tiktok_video_id TEXT,
|
||||||
|
images_used TEXT,
|
||||||
|
error_message TEXT,
|
||||||
|
started_at DATETIME,
|
||||||
|
completed_at DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// YouTube 분석 데이터 캐시 테이블 (펜션별)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS youtube_analytics (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
pension_id INTEGER NOT NULL,
|
||||||
|
playlist_id TEXT NOT NULL,
|
||||||
|
date DATE NOT NULL,
|
||||||
|
views INTEGER DEFAULT 0,
|
||||||
|
playlist_starts INTEGER DEFAULT 0,
|
||||||
|
average_time_in_playlist REAL DEFAULT 0,
|
||||||
|
estimated_minutes_watched REAL DEFAULT 0,
|
||||||
|
subscribers_gained INTEGER DEFAULT 0,
|
||||||
|
likes INTEGER DEFAULT 0,
|
||||||
|
comments INTEGER DEFAULT 0,
|
||||||
|
shares INTEGER DEFAULT 0,
|
||||||
|
cached_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE CASCADE,
|
||||||
|
UNIQUE(pension_id, date)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 펜션별 월간 요약 통계 테이블
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS pension_monthly_stats (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
pension_id INTEGER NOT NULL,
|
||||||
|
year_month TEXT NOT NULL,
|
||||||
|
total_views INTEGER DEFAULT 0,
|
||||||
|
total_videos INTEGER DEFAULT 0,
|
||||||
|
total_watch_time REAL DEFAULT 0,
|
||||||
|
avg_view_duration REAL DEFAULT 0,
|
||||||
|
top_video_id TEXT,
|
||||||
|
growth_rate REAL DEFAULT 0,
|
||||||
|
cached_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE CASCADE,
|
||||||
|
UNIQUE(pension_id, year_month)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// YouTube OAuth 토큰 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS youtube_connections (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
google_user_id TEXT,
|
||||||
|
google_email TEXT,
|
||||||
|
youtube_channel_id TEXT,
|
||||||
|
youtube_channel_title TEXT,
|
||||||
|
access_token TEXT,
|
||||||
|
refresh_token TEXT,
|
||||||
|
token_expiry DATETIME,
|
||||||
|
scopes TEXT,
|
||||||
|
connected_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// YouTube 업로드 설정 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS youtube_settings (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
default_privacy TEXT DEFAULT 'private',
|
||||||
|
default_category_id TEXT DEFAULT '19',
|
||||||
|
default_tags TEXT,
|
||||||
|
default_hashtags TEXT,
|
||||||
|
auto_upload INTEGER DEFAULT 0,
|
||||||
|
upload_timing TEXT DEFAULT 'manual',
|
||||||
|
scheduled_day TEXT,
|
||||||
|
scheduled_time TEXT,
|
||||||
|
default_playlist_id TEXT,
|
||||||
|
notify_on_upload INTEGER DEFAULT 1,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// YouTube 플레이리스트 캐시 테이블 (펜션별 연결 지원)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS youtube_playlists (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
playlist_id TEXT NOT NULL,
|
||||||
|
title TEXT,
|
||||||
|
item_count INTEGER DEFAULT 0,
|
||||||
|
cached_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
UNIQUE(user_id, playlist_id)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 플레이리스트에 pension_id 컬럼 추가 (기존 테이블용)
|
||||||
|
db.run("ALTER TABLE youtube_playlists ADD COLUMN pension_id INTEGER", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 업로드 히스토리 테이블 (펜션별 연결 지원)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS upload_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
history_id INTEGER,
|
||||||
|
youtube_video_id TEXT,
|
||||||
|
youtube_url TEXT,
|
||||||
|
title TEXT,
|
||||||
|
privacy_status TEXT,
|
||||||
|
playlist_id TEXT,
|
||||||
|
uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
status TEXT DEFAULT 'completed',
|
||||||
|
error_message TEXT,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
FOREIGN KEY(history_id) REFERENCES history(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 업로드 히스토리에 pension_id 컬럼 추가 (기존 테이블용)
|
||||||
|
db.run("ALTER TABLE upload_history ADD COLUMN pension_id INTEGER", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Instagram 연결 정보 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS instagram_connections (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
instagram_username TEXT NOT NULL,
|
||||||
|
encrypted_password TEXT NOT NULL,
|
||||||
|
encrypted_session TEXT,
|
||||||
|
is_active INTEGER DEFAULT 1,
|
||||||
|
last_login_at DATETIME,
|
||||||
|
two_factor_required INTEGER DEFAULT 0,
|
||||||
|
connected_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Instagram 업로드 설정 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS instagram_settings (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
auto_upload INTEGER DEFAULT 0,
|
||||||
|
upload_as_reel INTEGER DEFAULT 1,
|
||||||
|
default_caption_template TEXT,
|
||||||
|
default_hashtags TEXT,
|
||||||
|
max_uploads_per_week INTEGER DEFAULT 1,
|
||||||
|
notify_on_upload INTEGER DEFAULT 1,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Instagram 업로드 히스토리 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS instagram_upload_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
history_id INTEGER,
|
||||||
|
instagram_media_id TEXT,
|
||||||
|
instagram_post_code TEXT,
|
||||||
|
permalink TEXT,
|
||||||
|
caption TEXT,
|
||||||
|
upload_type TEXT DEFAULT 'reel',
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
error_message TEXT,
|
||||||
|
retry_count INTEGER DEFAULT 0,
|
||||||
|
uploaded_at DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
FOREIGN KEY(history_id) REFERENCES history(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// TikTok 연결 정보 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS tiktok_connections (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
open_id TEXT NOT NULL,
|
||||||
|
display_name TEXT,
|
||||||
|
avatar_url TEXT,
|
||||||
|
follower_count INTEGER DEFAULT 0,
|
||||||
|
following_count INTEGER DEFAULT 0,
|
||||||
|
access_token TEXT NOT NULL,
|
||||||
|
refresh_token TEXT,
|
||||||
|
token_expiry DATETIME,
|
||||||
|
scopes TEXT,
|
||||||
|
connected_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// TikTok 업로드 설정 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS tiktok_settings (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER UNIQUE NOT NULL,
|
||||||
|
default_privacy TEXT DEFAULT 'SELF_ONLY',
|
||||||
|
disable_duet INTEGER DEFAULT 0,
|
||||||
|
disable_comment INTEGER DEFAULT 0,
|
||||||
|
disable_stitch INTEGER DEFAULT 0,
|
||||||
|
auto_upload INTEGER DEFAULT 0,
|
||||||
|
upload_to_inbox INTEGER DEFAULT 1,
|
||||||
|
default_hashtags TEXT,
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// TikTok 업로드 히스토리 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS tiktok_upload_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
history_id INTEGER,
|
||||||
|
publish_id TEXT,
|
||||||
|
video_id TEXT,
|
||||||
|
title TEXT,
|
||||||
|
privacy_level TEXT DEFAULT 'SELF_ONLY',
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
error_message TEXT,
|
||||||
|
uploaded_at DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
FOREIGN KEY(history_id) REFERENCES history(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 플랫폼 통합 통계 테이블 (YouTube, Instagram, TikTok)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS platform_stats (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
platform TEXT NOT NULL,
|
||||||
|
date DATE NOT NULL,
|
||||||
|
views INTEGER DEFAULT 0,
|
||||||
|
likes INTEGER DEFAULT 0,
|
||||||
|
comments INTEGER DEFAULT 0,
|
||||||
|
shares INTEGER DEFAULT 0,
|
||||||
|
followers_gained INTEGER DEFAULT 0,
|
||||||
|
impressions INTEGER DEFAULT 0,
|
||||||
|
reach INTEGER DEFAULT 0,
|
||||||
|
engagement_rate REAL DEFAULT 0,
|
||||||
|
cached_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
UNIQUE(user_id, pension_id, platform, date)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 시스템 활동 로그 테이블 (어드민 분석용)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS activity_logs (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER,
|
||||||
|
action_type TEXT NOT NULL,
|
||||||
|
action_detail TEXT,
|
||||||
|
ip_address TEXT,
|
||||||
|
user_agent TEXT,
|
||||||
|
metadata TEXT,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 시스템 통계 스냅샷 테이블 (일별 집계)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS system_stats_daily (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
date DATE UNIQUE NOT NULL,
|
||||||
|
total_users INTEGER DEFAULT 0,
|
||||||
|
new_users INTEGER DEFAULT 0,
|
||||||
|
active_users INTEGER DEFAULT 0,
|
||||||
|
total_videos_generated INTEGER DEFAULT 0,
|
||||||
|
total_uploads INTEGER DEFAULT 0,
|
||||||
|
youtube_uploads INTEGER DEFAULT 0,
|
||||||
|
instagram_uploads INTEGER DEFAULT 0,
|
||||||
|
tiktok_uploads INTEGER DEFAULT 0,
|
||||||
|
total_credits_used INTEGER DEFAULT 0,
|
||||||
|
avg_generation_time REAL DEFAULT 0,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 사용자 에셋 테이블 (이미지, 오디오, 비디오)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS user_assets (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
history_id INTEGER,
|
||||||
|
asset_type TEXT NOT NULL,
|
||||||
|
source_type TEXT NOT NULL,
|
||||||
|
file_name TEXT NOT NULL,
|
||||||
|
file_path TEXT NOT NULL,
|
||||||
|
file_size INTEGER DEFAULT 0,
|
||||||
|
mime_type TEXT,
|
||||||
|
thumbnail_path TEXT,
|
||||||
|
duration REAL,
|
||||||
|
width INTEGER,
|
||||||
|
height INTEGER,
|
||||||
|
metadata TEXT,
|
||||||
|
is_deleted INTEGER DEFAULT 0,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
FOREIGN KEY(history_id) REFERENCES history(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 사용자별 스토리지 한도 컬럼 추가 (MB 단위, 기본 500MB)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN storage_limit INTEGER DEFAULT 500", (err) => {});
|
||||||
|
// 현재 사용 용량 (캐시)
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN storage_used INTEGER DEFAULT 0", (err) => {});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 크레딧 요청 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS credit_requests (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
requested_credits INTEGER DEFAULT 10,
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
reason TEXT,
|
||||||
|
admin_note TEXT,
|
||||||
|
processed_by INTEGER,
|
||||||
|
processed_at DATETIME,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(processed_by) REFERENCES users(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 크레딧 히스토리 테이블 (변동 내역 추적)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS credit_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
amount INTEGER NOT NULL,
|
||||||
|
type TEXT NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
balance_after INTEGER,
|
||||||
|
related_request_id INTEGER,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(related_request_id) REFERENCES credit_requests(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 렌더링 작업 큐 테이블 (백그라운드 처리)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS render_jobs (
|
||||||
|
id TEXT PRIMARY KEY,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
pension_id INTEGER,
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
progress INTEGER DEFAULT 0,
|
||||||
|
input_data TEXT,
|
||||||
|
output_path TEXT,
|
||||||
|
history_id INTEGER,
|
||||||
|
error_message TEXT,
|
||||||
|
credits_charged INTEGER DEFAULT 1,
|
||||||
|
credits_refunded INTEGER DEFAULT 0,
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
started_at DATETIME,
|
||||||
|
completed_at DATETIME,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
FOREIGN KEY(pension_id) REFERENCES pension_profiles(id) ON DELETE SET NULL,
|
||||||
|
FOREIGN KEY(history_id) REFERENCES history(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// render_jobs 인덱스
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_render_jobs_user ON render_jobs(user_id)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_render_jobs_status ON render_jobs(status)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_render_jobs_created ON render_jobs(created_at)");
|
||||||
|
|
||||||
|
// 기존 테이블에 business_name 컬럼 추가 (존재하지 않을 경우를 대비해 try-catch 대신 별도 실행)
|
||||||
|
// SQLite는 IF NOT EXISTS 컬럼 추가를 지원하지 않으므로, 에러를 무시하는 방식으로 처리하거나 스키마 버전을 관리해야 함.
|
||||||
|
// 여기서는 간단히 컬럼 추가 시도 후 에러 무시 패턴을 사용.
|
||||||
|
db.run("ALTER TABLE users ADD COLUMN business_name TEXT", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
db.run("ALTER TABLE history ADD COLUMN final_video_path TEXT", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
db.run("ALTER TABLE history ADD COLUMN poster_path TEXT", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
db.run("ALTER TABLE history ADD COLUMN pension_id INTEGER", (err) => {
|
||||||
|
// 이미 존재하면 에러가 발생하므로 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
// History 테이블
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER,
|
||||||
|
business_name TEXT,
|
||||||
|
details TEXT,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 축제 테이블 (TourAPI 연동)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS festivals (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
content_id TEXT UNIQUE NOT NULL,
|
||||||
|
content_type_id TEXT DEFAULT '15',
|
||||||
|
title TEXT NOT NULL,
|
||||||
|
overview TEXT,
|
||||||
|
addr1 TEXT,
|
||||||
|
addr2 TEXT,
|
||||||
|
zipcode TEXT,
|
||||||
|
area_code TEXT,
|
||||||
|
sigungu_code TEXT,
|
||||||
|
sido TEXT,
|
||||||
|
sigungu TEXT,
|
||||||
|
mapx REAL,
|
||||||
|
mapy REAL,
|
||||||
|
event_start_date TEXT,
|
||||||
|
event_end_date TEXT,
|
||||||
|
first_image TEXT,
|
||||||
|
first_image2 TEXT,
|
||||||
|
tel TEXT,
|
||||||
|
homepage TEXT,
|
||||||
|
place TEXT,
|
||||||
|
place_info TEXT,
|
||||||
|
play_time TEXT,
|
||||||
|
program TEXT,
|
||||||
|
use_fee TEXT,
|
||||||
|
age_limit TEXT,
|
||||||
|
sponsor1 TEXT,
|
||||||
|
sponsor1_tel TEXT,
|
||||||
|
sponsor2 TEXT,
|
||||||
|
sponsor2_tel TEXT,
|
||||||
|
sub_event TEXT,
|
||||||
|
booking_place TEXT,
|
||||||
|
is_active INTEGER DEFAULT 1,
|
||||||
|
view_count INTEGER DEFAULT 0,
|
||||||
|
last_synced_at TEXT,
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TEXT DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 축제 인덱스
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_festivals_area ON festivals(area_code, sigungu_code)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_festivals_date ON festivals(event_start_date, event_end_date)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_festivals_coords ON festivals(mapx, mapy)");
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 전국 펜션 마스터 테이블 (TourAPI 연동)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS public_pensions (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
source TEXT NOT NULL,
|
||||||
|
source_id TEXT,
|
||||||
|
content_id TEXT,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
name_normalized TEXT,
|
||||||
|
address TEXT,
|
||||||
|
road_address TEXT,
|
||||||
|
jibun_address TEXT,
|
||||||
|
zipcode TEXT,
|
||||||
|
sido TEXT,
|
||||||
|
sigungu TEXT,
|
||||||
|
eupmyeondong TEXT,
|
||||||
|
area_code TEXT,
|
||||||
|
sigungu_code TEXT,
|
||||||
|
mapx REAL,
|
||||||
|
mapy REAL,
|
||||||
|
tel TEXT,
|
||||||
|
homepage TEXT,
|
||||||
|
thumbnail TEXT,
|
||||||
|
images TEXT,
|
||||||
|
checkin_time TEXT,
|
||||||
|
checkout_time TEXT,
|
||||||
|
room_count INTEGER,
|
||||||
|
room_type TEXT,
|
||||||
|
facilities TEXT,
|
||||||
|
parking TEXT,
|
||||||
|
reservation_url TEXT,
|
||||||
|
pet_allowed INTEGER DEFAULT 0,
|
||||||
|
pickup_available INTEGER DEFAULT 0,
|
||||||
|
cooking_available INTEGER DEFAULT 0,
|
||||||
|
barbecue_available INTEGER DEFAULT 0,
|
||||||
|
business_status TEXT DEFAULT '영업중',
|
||||||
|
license_date TEXT,
|
||||||
|
closure_date TEXT,
|
||||||
|
is_verified INTEGER DEFAULT 0,
|
||||||
|
is_claimed INTEGER DEFAULT 0,
|
||||||
|
claimed_by INTEGER,
|
||||||
|
claimed_at TEXT,
|
||||||
|
view_count INTEGER DEFAULT 0,
|
||||||
|
last_synced_at TEXT,
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (claimed_by) REFERENCES users(id)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 펜션 인덱스
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_public_pensions_sido ON public_pensions(sido)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_public_pensions_sigungu ON public_pensions(sido, sigungu)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_public_pensions_coords ON public_pensions(mapx, mapy)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_public_pensions_name ON public_pensions(name_normalized)");
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 펜션-축제 매칭 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS pension_festival_matches (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
pension_id INTEGER NOT NULL,
|
||||||
|
pension_type TEXT DEFAULT 'public',
|
||||||
|
festival_id INTEGER NOT NULL,
|
||||||
|
distance_km REAL,
|
||||||
|
travel_time_min INTEGER,
|
||||||
|
match_type TEXT,
|
||||||
|
match_score INTEGER DEFAULT 0,
|
||||||
|
is_featured INTEGER DEFAULT 0,
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (festival_id) REFERENCES festivals(id),
|
||||||
|
UNIQUE(pension_id, pension_type, festival_id)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 매칭 인덱스
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_matches_pension ON pension_festival_matches(pension_id, pension_type)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_matches_festival ON pension_festival_matches(festival_id)");
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 지역코드 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS area_codes (
|
||||||
|
code TEXT PRIMARY KEY,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
name_short TEXT,
|
||||||
|
name_en TEXT
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 지역코드 초기 데이터
|
||||||
|
const areaCodes = [
|
||||||
|
['1', '서울특별시', '서울', 'Seoul'],
|
||||||
|
['2', '인천광역시', '인천', 'Incheon'],
|
||||||
|
['3', '대전광역시', '대전', 'Daejeon'],
|
||||||
|
['4', '대구광역시', '대구', 'Daegu'],
|
||||||
|
['5', '광주광역시', '광주', 'Gwangju'],
|
||||||
|
['6', '부산광역시', '부산', 'Busan'],
|
||||||
|
['7', '울산광역시', '울산', 'Ulsan'],
|
||||||
|
['8', '세종특별자치시', '세종', 'Sejong'],
|
||||||
|
['31', '경기도', '경기', 'Gyeonggi'],
|
||||||
|
['32', '강원특별자치도', '강원', 'Gangwon'],
|
||||||
|
['33', '충청북도', '충북', 'Chungbuk'],
|
||||||
|
['34', '충청남도', '충남', 'Chungnam'],
|
||||||
|
['35', '경상북도', '경북', 'Gyeongbuk'],
|
||||||
|
['36', '경상남도', '경남', 'Gyeongnam'],
|
||||||
|
['37', '전북특별자치도', '전북', 'Jeonbuk'],
|
||||||
|
['38', '전라남도', '전남', 'Jeonnam'],
|
||||||
|
['39', '제주특별자치도', '제주', 'Jeju'],
|
||||||
|
];
|
||||||
|
areaCodes.forEach(([code, name, nameShort, nameEn]) => {
|
||||||
|
db.run("INSERT OR IGNORE INTO area_codes (code, name, name_short, name_en) VALUES (?, ?, ?, ?)",
|
||||||
|
[code, name, nameShort, nameEn]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// pension_profiles에 좌표 컬럼 추가 (기존 테이블용)
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN mapx REAL", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN mapy REAL", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN area_code TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN sigungu_code TEXT", (err) => {});
|
||||||
|
db.run("ALTER TABLE pension_profiles ADD COLUMN public_pension_id INTEGER", (err) => {});
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// API 사용량 추적 테이블 (Gemini, Suno 등)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS api_usage_logs (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
service TEXT NOT NULL,
|
||||||
|
model TEXT,
|
||||||
|
endpoint TEXT,
|
||||||
|
user_id INTEGER,
|
||||||
|
tokens_input INTEGER DEFAULT 0,
|
||||||
|
tokens_output INTEGER DEFAULT 0,
|
||||||
|
image_count INTEGER DEFAULT 0,
|
||||||
|
audio_seconds REAL DEFAULT 0,
|
||||||
|
video_seconds REAL DEFAULT 0,
|
||||||
|
status TEXT DEFAULT 'success',
|
||||||
|
error_message TEXT,
|
||||||
|
latency_ms INTEGER DEFAULT 0,
|
||||||
|
cost_estimate REAL DEFAULT 0,
|
||||||
|
metadata TEXT,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// API 사용량 인덱스
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_api_usage_service ON api_usage_logs(service, createdAt)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_api_usage_user ON api_usage_logs(user_id, createdAt)");
|
||||||
|
db.run("CREATE INDEX IF NOT EXISTS idx_api_usage_date ON api_usage_logs(createdAt)");
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 시스템 설정 테이블 (쿠키, API 키 등)
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS system_settings (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
setting_key TEXT UNIQUE NOT NULL,
|
||||||
|
setting_value TEXT,
|
||||||
|
description TEXT,
|
||||||
|
is_encrypted INTEGER DEFAULT 0,
|
||||||
|
updated_by INTEGER,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY(updated_by) REFERENCES users(id) ON DELETE SET NULL
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// API 일별 집계 테이블
|
||||||
|
// ============================================
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS api_usage_daily (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
date DATE NOT NULL,
|
||||||
|
service TEXT NOT NULL,
|
||||||
|
model TEXT,
|
||||||
|
total_calls INTEGER DEFAULT 0,
|
||||||
|
success_count INTEGER DEFAULT 0,
|
||||||
|
error_count INTEGER DEFAULT 0,
|
||||||
|
total_tokens_input INTEGER DEFAULT 0,
|
||||||
|
total_tokens_output INTEGER DEFAULT 0,
|
||||||
|
total_images INTEGER DEFAULT 0,
|
||||||
|
total_audio_seconds REAL DEFAULT 0,
|
||||||
|
total_video_seconds REAL DEFAULT 0,
|
||||||
|
total_cost_estimate REAL DEFAULT 0,
|
||||||
|
avg_latency_ms REAL DEFAULT 0,
|
||||||
|
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
UNIQUE(date, service, model)
|
||||||
|
)`);
|
||||||
|
|
||||||
|
// 기본 관리자 계정 생성 (존재하지 않을 경우)
|
||||||
|
const adminUsername = 'admin';
|
||||||
|
const adminPassword = 'admin123'; // 초기 비밀번호
|
||||||
|
|
||||||
|
db.get("SELECT * FROM users WHERE username = ?", [adminUsername], (err, row) => {
|
||||||
|
if (!row) {
|
||||||
|
const salt = bcrypt.genSaltSync(10);
|
||||||
|
const hash = bcrypt.hashSync(adminPassword, salt);
|
||||||
|
|
||||||
|
db.run(`INSERT INTO users (username, password, name, phone, role, approved, credits)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?)`,
|
||||||
|
[adminUsername, hash, 'Super Admin', '000-0000-0000', 'admin', 1, 999999],
|
||||||
|
(err) => {
|
||||||
|
if (err) console.error("초기 관리자 생성 실패:", err);
|
||||||
|
else console.log(`초기 관리자 계정 생성 완료. (ID: ${adminUsername}, PW: ${adminPassword})`);
|
||||||
|
});
|
||||||
|
} else if (row.role === 'admin' && (row.credits === null || row.credits < 999999)) {
|
||||||
|
// 기존 관리자에게 무제한 크레딧 부여
|
||||||
|
db.run("UPDATE users SET credits = 999999 WHERE id = ?", [row.id]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = db;
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
/**
|
||||||
|
* Email Service using Resend
|
||||||
|
*
|
||||||
|
* 환경변수 필요:
|
||||||
|
* - RESEND_API_KEY: Resend API 키 (https://resend.com에서 발급)
|
||||||
|
* - RESEND_FROM_EMAIL: 발신 이메일 (도메인 인증 전에는 'onboarding@resend.dev' 사용)
|
||||||
|
* - FRONTEND_URL: 프론트엔드 URL (인증 링크용)
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { Resend } = require('resend');
|
||||||
|
|
||||||
|
// Resend 인스턴스 - API 키가 없으면 null (이메일 기능 비활성화)
|
||||||
|
let resend = null;
|
||||||
|
const RESEND_API_KEY = process.env.RESEND_API_KEY;
|
||||||
|
|
||||||
|
if (RESEND_API_KEY && RESEND_API_KEY !== 'your-resend-api-key') {
|
||||||
|
resend = new Resend(RESEND_API_KEY);
|
||||||
|
console.log('📧 이메일 서비스 활성화됨 (Resend)');
|
||||||
|
} else {
|
||||||
|
console.warn('⚠️ 이메일 서비스 비활성화됨: RESEND_API_KEY가 설정되지 않았습니다.');
|
||||||
|
console.warn(' 이메일 인증 기능을 사용하려면 .env에 RESEND_API_KEY를 설정하세요.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 기본 발신 이메일 (도메인 미인증 시 Resend 기본 도메인 사용)
|
||||||
|
const FROM_EMAIL = process.env.RESEND_FROM_EMAIL || 'CastAD <onboarding@resend.dev>';
|
||||||
|
const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3000';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이메일 인증 메일 발송
|
||||||
|
*/
|
||||||
|
async function sendVerificationEmail(to, name, verificationToken) {
|
||||||
|
if (!resend) {
|
||||||
|
console.warn('이메일 발송 건너뜀 (서비스 비활성화):', to);
|
||||||
|
return { success: false, error: '이메일 서비스가 설정되지 않았습니다', disabled: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
const verifyUrl = `${FRONTEND_URL}/verify-email?token=${verificationToken}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data, error } = await resend.emails.send({
|
||||||
|
from: FROM_EMAIL,
|
||||||
|
to: [to],
|
||||||
|
subject: '[CastAD] 이메일 인증을 완료해주세요',
|
||||||
|
html: `
|
||||||
|
<div style="font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; max-width: 600px; margin: 0 auto; padding: 40px 20px;">
|
||||||
|
<div style="text-align: center; margin-bottom: 40px;">
|
||||||
|
<h1 style="color: #6366f1; margin: 0;">CastAD</h1>
|
||||||
|
<p style="color: #64748b; margin-top: 8px;">AI 펜션 마케팅 영상 제작</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: #f8fafc; border-radius: 12px; padding: 32px;">
|
||||||
|
<h2 style="margin: 0 0 16px 0; color: #1e293b;">안녕하세요, ${name || '고객'}님!</h2>
|
||||||
|
<p style="color: #475569; line-height: 1.6; margin: 0 0 24px 0;">
|
||||||
|
CastAD 회원가입을 환영합니다. 아래 버튼을 클릭하여 이메일 인증을 완료해주세요.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin: 32px 0;">
|
||||||
|
<a href="${verifyUrl}"
|
||||||
|
style="display: inline-block; background: #6366f1; color: white; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 600;">
|
||||||
|
이메일 인증하기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="color: #64748b; font-size: 14px; margin: 24px 0 0 0;">
|
||||||
|
버튼이 작동하지 않으면 아래 링크를 브라우저에 복사해주세요:<br>
|
||||||
|
<a href="${verifyUrl}" style="color: #6366f1; word-break: break-all;">${verifyUrl}</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-top: 32px; color: #94a3b8; font-size: 12px;">
|
||||||
|
<p>이 이메일은 CastAD 회원가입 요청으로 발송되었습니다.</p>
|
||||||
|
<p>본인이 요청하지 않았다면 이 이메일을 무시해주세요.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error('이메일 발송 실패:', error);
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('인증 이메일 발송 완료:', data.id);
|
||||||
|
return { success: true, id: data.id };
|
||||||
|
} catch (err) {
|
||||||
|
console.error('이메일 발송 예외:', err);
|
||||||
|
return { success: false, error: err.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비밀번호 재설정 이메일 발송
|
||||||
|
*/
|
||||||
|
async function sendPasswordResetEmail(to, name, resetToken) {
|
||||||
|
if (!resend) {
|
||||||
|
console.warn('이메일 발송 건너뜀 (서비스 비활성화):', to);
|
||||||
|
return { success: false, error: '이메일 서비스가 설정되지 않았습니다', disabled: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetUrl = `${FRONTEND_URL}/reset-password?token=${resetToken}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data, error } = await resend.emails.send({
|
||||||
|
from: FROM_EMAIL,
|
||||||
|
to: [to],
|
||||||
|
subject: '[CastAD] 비밀번호 재설정 안내',
|
||||||
|
html: `
|
||||||
|
<div style="font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; max-width: 600px; margin: 0 auto; padding: 40px 20px;">
|
||||||
|
<div style="text-align: center; margin-bottom: 40px;">
|
||||||
|
<h1 style="color: #6366f1; margin: 0;">CastAD</h1>
|
||||||
|
<p style="color: #64748b; margin-top: 8px;">AI 펜션 마케팅 영상 제작</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: #f8fafc; border-radius: 12px; padding: 32px;">
|
||||||
|
<h2 style="margin: 0 0 16px 0; color: #1e293b;">비밀번호 재설정</h2>
|
||||||
|
<p style="color: #475569; line-height: 1.6; margin: 0 0 24px 0;">
|
||||||
|
${name || '고객'}님, 비밀번호 재설정을 요청하셨습니다.<br>
|
||||||
|
아래 버튼을 클릭하여 새 비밀번호를 설정해주세요.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin: 32px 0;">
|
||||||
|
<a href="${resetUrl}"
|
||||||
|
style="display: inline-block; background: #6366f1; color: white; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 600;">
|
||||||
|
비밀번호 재설정하기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: #fef3c7; border-radius: 8px; padding: 16px; margin: 24px 0;">
|
||||||
|
<p style="color: #92400e; font-size: 14px; margin: 0;">
|
||||||
|
⚠️ 이 링크는 1시간 동안만 유효합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="color: #64748b; font-size: 14px; margin: 0;">
|
||||||
|
버튼이 작동하지 않으면 아래 링크를 브라우저에 복사해주세요:<br>
|
||||||
|
<a href="${resetUrl}" style="color: #6366f1; word-break: break-all;">${resetUrl}</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-top: 32px; color: #94a3b8; font-size: 12px;">
|
||||||
|
<p>본인이 비밀번호 재설정을 요청하지 않았다면 이 이메일을 무시해주세요.</p>
|
||||||
|
<p>계정은 안전하게 보호됩니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error('비밀번호 재설정 이메일 발송 실패:', error);
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('비밀번호 재설정 이메일 발송 완료:', data.id);
|
||||||
|
return { success: true, id: data.id };
|
||||||
|
} catch (err) {
|
||||||
|
console.error('이메일 발송 예외:', err);
|
||||||
|
return { success: false, error: err.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 환영 이메일 발송 (인증 완료 후)
|
||||||
|
*/
|
||||||
|
async function sendWelcomeEmail(to, name) {
|
||||||
|
if (!resend) {
|
||||||
|
console.warn('이메일 발송 건너뜀 (서비스 비활성화):', to);
|
||||||
|
return { success: false, error: '이메일 서비스가 설정되지 않았습니다', disabled: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data, error } = await resend.emails.send({
|
||||||
|
from: FROM_EMAIL,
|
||||||
|
to: [to],
|
||||||
|
subject: '[CastAD] 가입을 환영합니다! 🎉',
|
||||||
|
html: `
|
||||||
|
<div style="font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; max-width: 600px; margin: 0 auto; padding: 40px 20px;">
|
||||||
|
<div style="text-align: center; margin-bottom: 40px;">
|
||||||
|
<h1 style="color: #6366f1; margin: 0;">CastAD</h1>
|
||||||
|
<p style="color: #64748b; margin-top: 8px;">AI 펜션 마케팅 영상 제작</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); border-radius: 12px; padding: 32px; color: white;">
|
||||||
|
<h2 style="margin: 0 0 16px 0;">🎉 환영합니다, ${name || '고객'}님!</h2>
|
||||||
|
<p style="line-height: 1.6; margin: 0; opacity: 0.9;">
|
||||||
|
CastAD 가입이 완료되었습니다.<br>
|
||||||
|
이제 AI가 만드는 펜션 마케팅 영상을 경험해보세요!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 32px; padding: 24px; background: #f8fafc; border-radius: 12px;">
|
||||||
|
<h3 style="margin: 0 0 16px 0; color: #1e293b;">시작하기</h3>
|
||||||
|
<ul style="color: #475569; line-height: 2; padding-left: 20px; margin: 0;">
|
||||||
|
<li>펜션 정보를 등록하세요</li>
|
||||||
|
<li>사진을 업로드하고 AI 영상을 생성하세요</li>
|
||||||
|
<li>YouTube에 바로 업로드하세요</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-top: 24px;">
|
||||||
|
<a href="${FRONTEND_URL}/app"
|
||||||
|
style="display: inline-block; background: #6366f1; color: white; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 600;">
|
||||||
|
CastAD 시작하기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-top: 32px; color: #94a3b8; font-size: 12px;">
|
||||||
|
<p>문의사항이 있으시면 언제든 연락주세요.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error('환영 이메일 발송 실패:', error);
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, id: data.id };
|
||||||
|
} catch (err) {
|
||||||
|
console.error('이메일 발송 예외:', err);
|
||||||
|
return { success: false, error: err.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이메일 서비스 활성화 여부 확인
|
||||||
|
*/
|
||||||
|
function isEmailServiceEnabled() {
|
||||||
|
return resend !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
sendVerificationEmail,
|
||||||
|
sendPasswordResetEmail,
|
||||||
|
sendWelcomeEmail,
|
||||||
|
isEmailServiceEnabled
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,243 @@
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
"""
|
||||||
|
암호화 서비스
|
||||||
|
|
||||||
|
Fernet 대칭 암호화를 사용하여 Instagram 비밀번호와 세션 데이터를
|
||||||
|
안전하게 암호화/복호화합니다.
|
||||||
|
|
||||||
|
Fernet 특징:
|
||||||
|
- AES-128-CBC 암호화
|
||||||
|
- HMAC-SHA256 무결성 검증
|
||||||
|
- 타임스탬프 포함 (TTL 검증 가능)
|
||||||
|
- URL-safe base64 인코딩
|
||||||
|
|
||||||
|
사용 예시:
|
||||||
|
encryptor = EncryptionService()
|
||||||
|
encrypted = encryptor.encrypt("비밀번호")
|
||||||
|
decrypted = encryptor.decrypt(encrypted)
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
import json
|
||||||
|
import base64
|
||||||
|
import logging
|
||||||
|
from typing import Optional, Any, Dict
|
||||||
|
|
||||||
|
from cryptography.fernet import Fernet, InvalidToken
|
||||||
|
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
|
||||||
|
class EncryptionService:
|
||||||
|
"""
|
||||||
|
Fernet 기반 암호화/복호화 서비스
|
||||||
|
|
||||||
|
비밀번호, 세션 데이터 등 민감한 정보를 안전하게 저장하기 위한
|
||||||
|
암호화 기능을 제공합니다.
|
||||||
|
|
||||||
|
Attributes:
|
||||||
|
_cipher: Fernet 암호화 인스턴스
|
||||||
|
_key: 암호화 키 (bytes)
|
||||||
|
|
||||||
|
Example:
|
||||||
|
>>> service = EncryptionService()
|
||||||
|
>>> encrypted = service.encrypt("my_password")
|
||||||
|
>>> decrypted = service.decrypt(encrypted)
|
||||||
|
>>> print(decrypted) # "my_password"
|
||||||
|
"""
|
||||||
|
|
||||||
|
def __init__(self, key: Optional[str] = None):
|
||||||
|
"""
|
||||||
|
암호화 서비스 초기화
|
||||||
|
|
||||||
|
Args:
|
||||||
|
key: Base64 인코딩된 Fernet 키 (32바이트)
|
||||||
|
None이면 새 키 생성
|
||||||
|
|
||||||
|
Raises:
|
||||||
|
ValueError: 유효하지 않은 키 형식
|
||||||
|
"""
|
||||||
|
if key:
|
||||||
|
try:
|
||||||
|
# Base64 문자열을 바이트로 디코딩
|
||||||
|
self._key = key.encode() if isinstance(key, str) else key
|
||||||
|
self._cipher = Fernet(self._key)
|
||||||
|
logger.info("암호화 서비스 초기화 완료 (기존 키 사용)")
|
||||||
|
except Exception as e:
|
||||||
|
raise ValueError(f"유효하지 않은 암호화 키입니다: {e}")
|
||||||
|
else:
|
||||||
|
# 새 키 생성
|
||||||
|
self._key = Fernet.generate_key()
|
||||||
|
self._cipher = Fernet(self._key)
|
||||||
|
logger.warning("새 암호화 키가 생성되었습니다. 환경변수에 저장하세요!")
|
||||||
|
|
||||||
|
def get_key_string(self) -> str:
|
||||||
|
"""
|
||||||
|
암호화 키를 문자열로 반환
|
||||||
|
|
||||||
|
환경변수에 저장할 수 있는 형태로 키를 반환합니다.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
Base64 인코딩된 키 문자열
|
||||||
|
"""
|
||||||
|
return self._key.decode() if isinstance(self._key, bytes) else self._key
|
||||||
|
|
||||||
|
def encrypt(self, data: str) -> str:
|
||||||
|
"""
|
||||||
|
문자열 데이터 암호화
|
||||||
|
|
||||||
|
Args:
|
||||||
|
data: 암호화할 평문 문자열
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
Base64 인코딩된 암호문
|
||||||
|
|
||||||
|
Raises:
|
||||||
|
ValueError: 빈 데이터
|
||||||
|
"""
|
||||||
|
if not data:
|
||||||
|
raise ValueError("암호화할 데이터가 없습니다")
|
||||||
|
|
||||||
|
try:
|
||||||
|
# 문자열을 UTF-8 바이트로 변환 후 암호화
|
||||||
|
encrypted_bytes = self._cipher.encrypt(data.encode('utf-8'))
|
||||||
|
# Base64 문자열로 반환
|
||||||
|
return encrypted_bytes.decode('utf-8')
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"암호화 실패: {e}")
|
||||||
|
raise
|
||||||
|
|
||||||
|
def decrypt(self, encrypted_data: str) -> str:
|
||||||
|
"""
|
||||||
|
암호화된 데이터 복호화
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_data: Base64 인코딩된 암호문
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
복호화된 평문 문자열
|
||||||
|
|
||||||
|
Raises:
|
||||||
|
ValueError: 빈 데이터 또는 유효하지 않은 암호문
|
||||||
|
InvalidToken: 잘못된 토큰 또는 키 불일치
|
||||||
|
"""
|
||||||
|
if not encrypted_data:
|
||||||
|
raise ValueError("복호화할 데이터가 없습니다")
|
||||||
|
|
||||||
|
try:
|
||||||
|
# Base64 문자열을 바이트로 변환 후 복호화
|
||||||
|
encrypted_bytes = encrypted_data.encode('utf-8')
|
||||||
|
decrypted_bytes = self._cipher.decrypt(encrypted_bytes)
|
||||||
|
return decrypted_bytes.decode('utf-8')
|
||||||
|
except InvalidToken:
|
||||||
|
logger.error("복호화 실패: 유효하지 않은 토큰 또는 키 불일치")
|
||||||
|
raise ValueError("암호화 키가 올바르지 않거나 데이터가 손상되었습니다")
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"복호화 실패: {e}")
|
||||||
|
raise
|
||||||
|
|
||||||
|
def encrypt_json(self, data: Dict[str, Any]) -> str:
|
||||||
|
"""
|
||||||
|
JSON 객체 암호화
|
||||||
|
|
||||||
|
딕셔너리를 JSON 문자열로 변환 후 암호화합니다.
|
||||||
|
세션 데이터 저장에 유용합니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
data: 암호화할 딕셔너리 데이터
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
암호화된 문자열
|
||||||
|
"""
|
||||||
|
json_string = json.dumps(data, ensure_ascii=False)
|
||||||
|
return self.encrypt(json_string)
|
||||||
|
|
||||||
|
def decrypt_json(self, encrypted_data: str) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
암호화된 JSON 데이터 복호화
|
||||||
|
|
||||||
|
암호문을 복호화하여 딕셔너리로 파싱합니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_data: 암호화된 문자열
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
복호화된 딕셔너리
|
||||||
|
|
||||||
|
Raises:
|
||||||
|
ValueError: JSON 파싱 실패
|
||||||
|
"""
|
||||||
|
decrypted_string = self.decrypt(encrypted_data)
|
||||||
|
try:
|
||||||
|
return json.loads(decrypted_string)
|
||||||
|
except json.JSONDecodeError as e:
|
||||||
|
logger.error(f"JSON 파싱 실패: {e}")
|
||||||
|
raise ValueError("유효하지 않은 JSON 데이터입니다")
|
||||||
|
|
||||||
|
@staticmethod
|
||||||
|
def generate_new_key() -> str:
|
||||||
|
"""
|
||||||
|
새 암호화 키 생성
|
||||||
|
|
||||||
|
환경변수 설정에 사용할 수 있는 새 Fernet 키를 생성합니다.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
새로 생성된 Base64 인코딩 키 문자열
|
||||||
|
|
||||||
|
Example:
|
||||||
|
>>> new_key = EncryptionService.generate_new_key()
|
||||||
|
>>> print(f"INSTAGRAM_ENCRYPTION_KEY={new_key}")
|
||||||
|
"""
|
||||||
|
return Fernet.generate_key().decode()
|
||||||
|
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 테스트용 메인 함수
|
||||||
|
# ============================================
|
||||||
|
if __name__ == '__main__':
|
||||||
|
# 새 키 생성 테스트
|
||||||
|
print("=" * 50)
|
||||||
|
print("새 암호화 키 생성 테스트")
|
||||||
|
print("=" * 50)
|
||||||
|
|
||||||
|
new_key = EncryptionService.generate_new_key()
|
||||||
|
print(f"\n생성된 키: {new_key}")
|
||||||
|
print(f"\n환경변수 설정:")
|
||||||
|
print(f"INSTAGRAM_ENCRYPTION_KEY={new_key}")
|
||||||
|
|
||||||
|
# 암호화/복호화 테스트
|
||||||
|
print("\n" + "=" * 50)
|
||||||
|
print("암호화/복호화 테스트")
|
||||||
|
print("=" * 50)
|
||||||
|
|
||||||
|
encryptor = EncryptionService(new_key)
|
||||||
|
|
||||||
|
# 문자열 테스트
|
||||||
|
test_password = "my_instagram_password_123!"
|
||||||
|
encrypted = encryptor.encrypt(test_password)
|
||||||
|
decrypted = encryptor.decrypt(encrypted)
|
||||||
|
|
||||||
|
print(f"\n원본: {test_password}")
|
||||||
|
print(f"암호화: {encrypted[:50]}...")
|
||||||
|
print(f"복호화: {decrypted}")
|
||||||
|
print(f"일치: {test_password == decrypted}")
|
||||||
|
|
||||||
|
# JSON 테스트
|
||||||
|
print("\n" + "=" * 50)
|
||||||
|
print("JSON 암호화 테스트")
|
||||||
|
print("=" * 50)
|
||||||
|
|
||||||
|
test_session = {
|
||||||
|
'session_id': 'abc123',
|
||||||
|
'cookies': {'ds_user_id': '12345'},
|
||||||
|
'user_agent': 'Instagram 123.0'
|
||||||
|
}
|
||||||
|
|
||||||
|
encrypted_json = encryptor.encrypt_json(test_session)
|
||||||
|
decrypted_json = encryptor.decrypt_json(encrypted_json)
|
||||||
|
|
||||||
|
print(f"\n원본: {test_session}")
|
||||||
|
print(f"암호화: {encrypted_json[:50]}...")
|
||||||
|
print(f"복호화: {decrypted_json}")
|
||||||
|
print(f"일치: {test_session == decrypted_json}")
|
||||||
|
|
@ -0,0 +1,558 @@
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
"""
|
||||||
|
Instagram 클라이언트 매니저
|
||||||
|
|
||||||
|
instagrapi 라이브러리를 래핑하여 Instagram 로그인, 세션 관리,
|
||||||
|
영상 업로드 기능을 제공합니다.
|
||||||
|
|
||||||
|
주요 클래스:
|
||||||
|
- InstagramClientManager: Instagram API 작업을 위한 고수준 인터페이스
|
||||||
|
|
||||||
|
안전한 사용을 위한 권장사항:
|
||||||
|
- 주 1회 이하 업로드 권장
|
||||||
|
- 빠른 연속 요청 자제
|
||||||
|
- 2FA 활성화된 계정 지원
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
import json
|
||||||
|
import time
|
||||||
|
import logging
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Optional, Dict, Any, Tuple
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
from instagrapi import Client
|
||||||
|
from instagrapi.exceptions import (
|
||||||
|
LoginRequired,
|
||||||
|
TwoFactorRequired,
|
||||||
|
ChallengeRequired,
|
||||||
|
BadPassword,
|
||||||
|
PleaseWaitFewMinutes,
|
||||||
|
ClientError
|
||||||
|
)
|
||||||
|
|
||||||
|
from encryption_service import EncryptionService
|
||||||
|
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 상수 정의
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# 기본 User-Agent (Instagram Android 앱)
|
||||||
|
DEFAULT_USER_AGENT = (
|
||||||
|
"Instagram 275.0.0.27.98 Android "
|
||||||
|
"(33/13; 420dpi; 1080x2400; samsung; SM-G998B; "
|
||||||
|
"o1s; exynos2100; ko_KR; 458229258)"
|
||||||
|
)
|
||||||
|
|
||||||
|
# 업로드 재시도 설정
|
||||||
|
MAX_UPLOAD_RETRIES = 2
|
||||||
|
RETRY_DELAY_SECONDS = 5
|
||||||
|
|
||||||
|
# 세션 파일 저장 경로 (디버깅용)
|
||||||
|
SESSION_DIR = Path(__file__).parent / 'sessions'
|
||||||
|
|
||||||
|
|
||||||
|
class InstagramClientManager:
|
||||||
|
"""
|
||||||
|
Instagram API 클라이언트 매니저
|
||||||
|
|
||||||
|
Instagram 계정 로그인, 세션 관리, 영상 업로드 등의 기능을 제공합니다.
|
||||||
|
모든 민감한 데이터는 암호화하여 처리합니다.
|
||||||
|
|
||||||
|
Attributes:
|
||||||
|
encryption: 암호화 서비스 인스턴스
|
||||||
|
|
||||||
|
Example:
|
||||||
|
>>> manager = InstagramClientManager(encryption_service)
|
||||||
|
>>> result = manager.login("username", "password")
|
||||||
|
>>> if result['success']:
|
||||||
|
... print(f"로그인 성공! 세션: {result['encrypted_session']}")
|
||||||
|
"""
|
||||||
|
|
||||||
|
def __init__(self, encryption_service: EncryptionService):
|
||||||
|
"""
|
||||||
|
Instagram 클라이언트 매니저 초기화
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encryption_service: 비밀번호/세션 암호화를 위한 서비스
|
||||||
|
"""
|
||||||
|
self.encryption = encryption_service
|
||||||
|
|
||||||
|
# 세션 디렉토리 생성 (디버깅용)
|
||||||
|
SESSION_DIR.mkdir(exist_ok=True)
|
||||||
|
|
||||||
|
def _create_client(self) -> Client:
|
||||||
|
"""
|
||||||
|
새 Instagram 클라이언트 인스턴스 생성
|
||||||
|
|
||||||
|
적절한 설정으로 초기화된 instagrapi Client를 반환합니다.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
초기화된 Client 인스턴스
|
||||||
|
"""
|
||||||
|
client = Client()
|
||||||
|
|
||||||
|
# 기본 설정
|
||||||
|
client.delay_range = [1, 3] # API 호출 간 딜레이 (초)
|
||||||
|
client.set_locale('ko_KR')
|
||||||
|
client.set_timezone_offset(9 * 3600) # KST (UTC+9)
|
||||||
|
|
||||||
|
return client
|
||||||
|
|
||||||
|
def _handle_login_error(self, error: Exception, username: str) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
로그인 에러 처리 및 적절한 응답 생성
|
||||||
|
|
||||||
|
Args:
|
||||||
|
error: 발생한 예외
|
||||||
|
username: 로그인 시도한 사용자명
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
에러 정보가 담긴 딕셔너리
|
||||||
|
"""
|
||||||
|
error_str = str(error).lower()
|
||||||
|
|
||||||
|
if isinstance(error, BadPassword):
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '아이디 또는 비밀번호가 올바르지 않습니다.',
|
||||||
|
'error_code': 'BAD_PASSWORD'
|
||||||
|
}
|
||||||
|
|
||||||
|
elif isinstance(error, TwoFactorRequired):
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '2단계 인증이 필요합니다. 인증 코드를 입력해주세요.',
|
||||||
|
'error_code': 'TWO_FACTOR_REQUIRED',
|
||||||
|
'requires_2fa': True
|
||||||
|
}
|
||||||
|
|
||||||
|
elif isinstance(error, ChallengeRequired):
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': 'Instagram 보안 확인이 필요합니다. 앱에서 확인 후 다시 시도해주세요.',
|
||||||
|
'error_code': 'CHALLENGE_REQUIRED'
|
||||||
|
}
|
||||||
|
|
||||||
|
elif isinstance(error, PleaseWaitFewMinutes):
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '너무 많은 요청이 발생했습니다. 몇 분 후 다시 시도해주세요.',
|
||||||
|
'error_code': 'RATE_LIMITED'
|
||||||
|
}
|
||||||
|
|
||||||
|
elif 'checkpoint' in error_str or 'challenge' in error_str:
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': 'Instagram에서 계정 확인을 요청했습니다. 앱에서 확인 후 다시 시도해주세요.',
|
||||||
|
'error_code': 'CHECKPOINT_REQUIRED'
|
||||||
|
}
|
||||||
|
|
||||||
|
else:
|
||||||
|
logger.error(f"[로그인 에러] 사용자: {username}, 에러: {error}", exc_info=True)
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': f'로그인 중 오류가 발생했습니다: {str(error)}',
|
||||||
|
'error_code': 'LOGIN_FAILED'
|
||||||
|
}
|
||||||
|
|
||||||
|
def login(
|
||||||
|
self,
|
||||||
|
username: str,
|
||||||
|
password: str,
|
||||||
|
verification_code: Optional[str] = None
|
||||||
|
) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
Instagram 계정 로그인
|
||||||
|
|
||||||
|
사용자명과 비밀번호로 Instagram에 로그인합니다.
|
||||||
|
성공 시 암호화된 비밀번호와 세션 정보를 반환합니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
username: Instagram 사용자명
|
||||||
|
password: Instagram 비밀번호
|
||||||
|
verification_code: 2FA 인증 코드 (선택)
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
성공 시: {
|
||||||
|
'success': True,
|
||||||
|
'encrypted_password': '암호화된 비밀번호',
|
||||||
|
'encrypted_session': '암호화된 세션',
|
||||||
|
'username': '확인된 사용자명',
|
||||||
|
'user_id': 'Instagram 사용자 ID',
|
||||||
|
'full_name': '표시 이름'
|
||||||
|
}
|
||||||
|
실패 시: {
|
||||||
|
'success': False,
|
||||||
|
'error': '에러 메시지',
|
||||||
|
'error_code': '에러 코드'
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
client = self._create_client()
|
||||||
|
|
||||||
|
try:
|
||||||
|
logger.info(f"[로그인 시도] 사용자: {username}")
|
||||||
|
|
||||||
|
# 2FA 코드가 있는 경우
|
||||||
|
if verification_code:
|
||||||
|
logger.info(f"[2FA 인증] 코드 입력됨")
|
||||||
|
client.login(
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
verification_code=verification_code
|
||||||
|
)
|
||||||
|
else:
|
||||||
|
client.login(username, password)
|
||||||
|
|
||||||
|
# 로그인 성공 - 세션 정보 추출
|
||||||
|
session_data = client.get_settings()
|
||||||
|
user_id = client.user_id
|
||||||
|
user_info = client.user_info(user_id)
|
||||||
|
|
||||||
|
# 비밀번호와 세션 암호화
|
||||||
|
encrypted_password = self.encryption.encrypt(password)
|
||||||
|
encrypted_session = self.encryption.encrypt_json(session_data)
|
||||||
|
|
||||||
|
logger.info(f"[로그인 성공] 사용자: {username}, ID: {user_id}")
|
||||||
|
|
||||||
|
return {
|
||||||
|
'success': True,
|
||||||
|
'encrypted_password': encrypted_password,
|
||||||
|
'encrypted_session': encrypted_session,
|
||||||
|
'username': user_info.username,
|
||||||
|
'user_id': str(user_id),
|
||||||
|
'full_name': user_info.full_name,
|
||||||
|
'profile_pic_url': str(user_info.profile_pic_url) if user_info.profile_pic_url else None
|
||||||
|
}
|
||||||
|
|
||||||
|
except TwoFactorRequired:
|
||||||
|
# 2FA 필요 - 사용자에게 코드 입력 요청
|
||||||
|
logger.info(f"[2FA 필요] 사용자: {username}")
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '2단계 인증이 필요합니다. 인증 코드를 입력해주세요.',
|
||||||
|
'error_code': 'TWO_FACTOR_REQUIRED',
|
||||||
|
'requires_2fa': True
|
||||||
|
}
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
return self._handle_login_error(e, username)
|
||||||
|
|
||||||
|
def login_with_session(self, encrypted_session: str) -> Tuple[Optional[Client], Optional[str]]:
|
||||||
|
"""
|
||||||
|
저장된 세션으로 로그인
|
||||||
|
|
||||||
|
암호화된 세션 데이터를 복호화하여 로그인 상태를 복원합니다.
|
||||||
|
새 로그인 과정 없이 빠르게 인증된 클라이언트를 얻을 수 있습니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_session: 암호화된 세션 JSON 문자열
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
(Client 인스턴스, None) - 성공 시
|
||||||
|
(None, 에러 메시지) - 실패 시
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
# 세션 복호화
|
||||||
|
session_data = self.encryption.decrypt_json(encrypted_session)
|
||||||
|
|
||||||
|
# 클라이언트 생성 및 세션 설정
|
||||||
|
client = self._create_client()
|
||||||
|
client.set_settings(session_data)
|
||||||
|
|
||||||
|
# 세션 유효성 확인 (간단한 API 호출)
|
||||||
|
client.get_timeline_feed()
|
||||||
|
|
||||||
|
return client, None
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.warning(f"[세션 로그인 실패] {e}")
|
||||||
|
return None, str(e)
|
||||||
|
|
||||||
|
def verify_and_refresh_session(
|
||||||
|
self,
|
||||||
|
encrypted_session: str,
|
||||||
|
encrypted_password: Optional[str] = None,
|
||||||
|
username: Optional[str] = None
|
||||||
|
) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
세션 유효성 검증 및 필요시 갱신
|
||||||
|
|
||||||
|
저장된 세션이 유효한지 확인하고, 만료된 경우
|
||||||
|
비밀번호로 재로그인을 시도합니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_session: 암호화된 세션
|
||||||
|
encrypted_password: 암호화된 비밀번호 (재로그인용)
|
||||||
|
username: 사용자명 (재로그인용)
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
세션 상태 및 갱신된 세션 정보
|
||||||
|
"""
|
||||||
|
# 먼저 기존 세션으로 시도
|
||||||
|
client, error = self.login_with_session(encrypted_session)
|
||||||
|
|
||||||
|
if client:
|
||||||
|
return {
|
||||||
|
'success': True,
|
||||||
|
'valid': True,
|
||||||
|
'message': '세션이 유효합니다.',
|
||||||
|
'encrypted_session': encrypted_session
|
||||||
|
}
|
||||||
|
|
||||||
|
# 세션 만료 - 재로그인 시도
|
||||||
|
if encrypted_password and username:
|
||||||
|
logger.info(f"[세션 만료] 재로그인 시도: {username}")
|
||||||
|
try:
|
||||||
|
password = self.encryption.decrypt(encrypted_password)
|
||||||
|
return self.login(username, password)
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[재로그인 실패] {e}")
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'valid': False,
|
||||||
|
'error': '세션이 만료되었고 재로그인에 실패했습니다.',
|
||||||
|
'error_code': 'SESSION_EXPIRED'
|
||||||
|
}
|
||||||
|
else:
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'valid': False,
|
||||||
|
'error': '세션이 만료되었습니다. 다시 로그인해주세요.',
|
||||||
|
'error_code': 'SESSION_EXPIRED'
|
||||||
|
}
|
||||||
|
|
||||||
|
def upload_video(
|
||||||
|
self,
|
||||||
|
encrypted_session: str,
|
||||||
|
encrypted_password: Optional[str],
|
||||||
|
username: Optional[str],
|
||||||
|
video_path: str,
|
||||||
|
caption: str = "",
|
||||||
|
thumbnail_path: Optional[str] = None,
|
||||||
|
as_reel: bool = True
|
||||||
|
) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
Instagram에 영상 업로드
|
||||||
|
|
||||||
|
릴스(Reels) 또는 일반 비디오로 영상을 업로드합니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_session: 암호화된 세션
|
||||||
|
encrypted_password: 암호화된 비밀번호 (세션 만료 시 재로그인용)
|
||||||
|
username: 사용자명
|
||||||
|
video_path: 업로드할 영상 파일 경로
|
||||||
|
caption: 게시물 캡션 (해시태그 포함 가능)
|
||||||
|
thumbnail_path: 커버 이미지 경로 (선택)
|
||||||
|
as_reel: True면 릴스로, False면 일반 비디오로 업로드
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
성공 시: {
|
||||||
|
'success': True,
|
||||||
|
'media_id': 'Instagram 미디어 ID',
|
||||||
|
'post_code': '게시물 코드',
|
||||||
|
'permalink': '게시물 URL',
|
||||||
|
'new_session': '갱신된 세션 (있는 경우)'
|
||||||
|
}
|
||||||
|
실패 시: {
|
||||||
|
'success': False,
|
||||||
|
'error': '에러 메시지',
|
||||||
|
'error_code': '에러 코드'
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
client = None
|
||||||
|
new_session = None
|
||||||
|
|
||||||
|
# 1. 세션으로 로그인 시도
|
||||||
|
client, error = self.login_with_session(encrypted_session)
|
||||||
|
|
||||||
|
# 2. 세션 만료 시 재로그인
|
||||||
|
if not client and encrypted_password and username:
|
||||||
|
logger.info(f"[세션 만료] 재로그인 후 업로드 시도: {username}")
|
||||||
|
try:
|
||||||
|
password = self.encryption.decrypt(encrypted_password)
|
||||||
|
login_result = self.login(username, password)
|
||||||
|
if login_result['success']:
|
||||||
|
client, _ = self.login_with_session(login_result['encrypted_session'])
|
||||||
|
new_session = login_result['encrypted_session']
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[재로그인 실패] {e}")
|
||||||
|
|
||||||
|
if not client:
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '로그인에 실패했습니다. 계정 연결을 다시 해주세요.',
|
||||||
|
'error_code': 'LOGIN_FAILED'
|
||||||
|
}
|
||||||
|
|
||||||
|
# 3. 업로드 실행 (재시도 로직 포함)
|
||||||
|
for attempt in range(MAX_UPLOAD_RETRIES + 1):
|
||||||
|
try:
|
||||||
|
logger.info(f"[업로드 시도 {attempt + 1}/{MAX_UPLOAD_RETRIES + 1}] {video_path}")
|
||||||
|
|
||||||
|
# 파일 경로 처리
|
||||||
|
video_path_obj = Path(video_path)
|
||||||
|
|
||||||
|
if as_reel:
|
||||||
|
# 릴스로 업로드
|
||||||
|
if thumbnail_path and Path(thumbnail_path).exists():
|
||||||
|
media = client.clip_upload(
|
||||||
|
path=video_path_obj,
|
||||||
|
caption=caption,
|
||||||
|
thumbnail=Path(thumbnail_path)
|
||||||
|
)
|
||||||
|
else:
|
||||||
|
media = client.clip_upload(
|
||||||
|
path=video_path_obj,
|
||||||
|
caption=caption
|
||||||
|
)
|
||||||
|
else:
|
||||||
|
# 일반 비디오로 업로드
|
||||||
|
if thumbnail_path and Path(thumbnail_path).exists():
|
||||||
|
media = client.video_upload(
|
||||||
|
path=video_path_obj,
|
||||||
|
caption=caption,
|
||||||
|
thumbnail=Path(thumbnail_path)
|
||||||
|
)
|
||||||
|
else:
|
||||||
|
media = client.video_upload(
|
||||||
|
path=video_path_obj,
|
||||||
|
caption=caption
|
||||||
|
)
|
||||||
|
|
||||||
|
# 업로드 성공
|
||||||
|
result = {
|
||||||
|
'success': True,
|
||||||
|
'media_id': str(media.pk),
|
||||||
|
'post_code': media.code,
|
||||||
|
'permalink': f'https://www.instagram.com/p/{media.code}/',
|
||||||
|
'media_type': 'reel' if as_reel else 'video'
|
||||||
|
}
|
||||||
|
|
||||||
|
if new_session:
|
||||||
|
result['new_session'] = new_session
|
||||||
|
|
||||||
|
logger.info(f"[업로드 성공] 미디어 ID: {media.pk}")
|
||||||
|
return result
|
||||||
|
|
||||||
|
except PleaseWaitFewMinutes as e:
|
||||||
|
logger.warning(f"[Rate Limit] {e}")
|
||||||
|
if attempt < MAX_UPLOAD_RETRIES:
|
||||||
|
time.sleep(RETRY_DELAY_SECONDS * (attempt + 1))
|
||||||
|
continue
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '업로드 제한에 걸렸습니다. 나중에 다시 시도해주세요.',
|
||||||
|
'error_code': 'RATE_LIMITED'
|
||||||
|
}
|
||||||
|
|
||||||
|
except LoginRequired as e:
|
||||||
|
logger.error(f"[로그인 필요] {e}")
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '세션이 만료되었습니다. 다시 로그인해주세요.',
|
||||||
|
'error_code': 'SESSION_EXPIRED'
|
||||||
|
}
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[업로드 에러] {e}", exc_info=True)
|
||||||
|
if attempt < MAX_UPLOAD_RETRIES:
|
||||||
|
time.sleep(RETRY_DELAY_SECONDS)
|
||||||
|
continue
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': f'업로드 중 오류가 발생했습니다: {str(e)}',
|
||||||
|
'error_code': 'UPLOAD_FAILED'
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '업로드에 실패했습니다. 최대 재시도 횟수를 초과했습니다.',
|
||||||
|
'error_code': 'MAX_RETRIES_EXCEEDED'
|
||||||
|
}
|
||||||
|
|
||||||
|
def get_account_info(self, encrypted_session: str) -> Dict[str, Any]:
|
||||||
|
"""
|
||||||
|
연결된 Instagram 계정 정보 조회
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_session: 암호화된 세션
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
계정 정보 딕셔너리
|
||||||
|
"""
|
||||||
|
client, error = self.login_with_session(encrypted_session)
|
||||||
|
|
||||||
|
if not client:
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': '세션이 유효하지 않습니다.',
|
||||||
|
'error_code': 'INVALID_SESSION'
|
||||||
|
}
|
||||||
|
|
||||||
|
try:
|
||||||
|
user_id = client.user_id
|
||||||
|
user_info = client.user_info(user_id)
|
||||||
|
|
||||||
|
return {
|
||||||
|
'success': True,
|
||||||
|
'username': user_info.username,
|
||||||
|
'full_name': user_info.full_name,
|
||||||
|
'profile_pic_url': str(user_info.profile_pic_url) if user_info.profile_pic_url else None,
|
||||||
|
'follower_count': user_info.follower_count,
|
||||||
|
'following_count': user_info.following_count,
|
||||||
|
'media_count': user_info.media_count,
|
||||||
|
'is_private': user_info.is_private,
|
||||||
|
'is_verified': user_info.is_verified
|
||||||
|
}
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[계정 정보 조회 실패] {e}")
|
||||||
|
return {
|
||||||
|
'success': False,
|
||||||
|
'error': f'계정 정보를 가져오는 데 실패했습니다: {str(e)}',
|
||||||
|
'error_code': 'INFO_FAILED'
|
||||||
|
}
|
||||||
|
|
||||||
|
def logout(self, encrypted_session: str) -> bool:
|
||||||
|
"""
|
||||||
|
로그아웃 (세션 무효화)
|
||||||
|
|
||||||
|
실제로 Instagram 세션을 로그아웃하지는 않고,
|
||||||
|
로컬에서 세션 데이터만 제거합니다.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
encrypted_session: 암호화된 세션
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
항상 True (에러 무시)
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
client, _ = self.login_with_session(encrypted_session)
|
||||||
|
if client:
|
||||||
|
# Instagram API에는 공식 로그아웃이 없음
|
||||||
|
# 세션 데이터만 버림
|
||||||
|
pass
|
||||||
|
except:
|
||||||
|
pass
|
||||||
|
|
||||||
|
return True
|
||||||
|
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 테스트용 메인 함수
|
||||||
|
# ============================================
|
||||||
|
if __name__ == '__main__':
|
||||||
|
from encryption_service import EncryptionService
|
||||||
|
|
||||||
|
print("=" * 50)
|
||||||
|
print("Instagram 클라이언트 매니저 테스트")
|
||||||
|
print("=" * 50)
|
||||||
|
print("\n이 모듈은 직접 실행하지 않습니다.")
|
||||||
|
print("instagram_service.py를 실행하세요.")
|
||||||
|
print("\n사용 예:")
|
||||||
|
print(" python instagram_service.py")
|
||||||
|
|
@ -0,0 +1,432 @@
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
"""
|
||||||
|
Instagram 자동 업로드 서비스
|
||||||
|
|
||||||
|
이 모듈은 Instagram 계정 연결 및 릴스/영상 업로드 기능을 제공합니다.
|
||||||
|
Flask REST API를 통해 Node.js 백엔드와 통신합니다.
|
||||||
|
|
||||||
|
주요 기능:
|
||||||
|
1. Instagram 계정 로그인 및 세션 관리
|
||||||
|
2. 비밀번호/세션 암호화 저장
|
||||||
|
3. 릴스(Reels) 영상 업로드
|
||||||
|
4. 업로드 상태 추적
|
||||||
|
|
||||||
|
사용법:
|
||||||
|
python instagram_service.py
|
||||||
|
|
||||||
|
환경변수:
|
||||||
|
INSTAGRAM_ENCRYPTION_KEY: Fernet 암호화 키 (32바이트 base64)
|
||||||
|
INSTAGRAM_SERVICE_PORT: 서비스 포트 (기본: 5001)
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
import json
|
||||||
|
import logging
|
||||||
|
from datetime import datetime
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Optional, Dict, Any, Tuple
|
||||||
|
|
||||||
|
from flask import Flask, request, jsonify
|
||||||
|
from flask_cors import CORS
|
||||||
|
from dotenv import load_dotenv
|
||||||
|
|
||||||
|
from encryption_service import EncryptionService
|
||||||
|
from instagram_client import InstagramClientManager
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 로깅 설정
|
||||||
|
# ============================================
|
||||||
|
logging.basicConfig(
|
||||||
|
level=logging.INFO,
|
||||||
|
format='[%(asctime)s] [%(levelname)s] %(message)s',
|
||||||
|
datefmt='%Y-%m-%d %H:%M:%S'
|
||||||
|
)
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 환경변수 로드
|
||||||
|
# ============================================
|
||||||
|
load_dotenv(dotenv_path=Path(__file__).parent.parent.parent / '.env')
|
||||||
|
|
||||||
|
# Flask 앱 초기화
|
||||||
|
app = Flask(__name__)
|
||||||
|
CORS(app)
|
||||||
|
|
||||||
|
# 서비스 초기화
|
||||||
|
encryption_service: Optional[EncryptionService] = None
|
||||||
|
instagram_manager: Optional[InstagramClientManager] = None
|
||||||
|
|
||||||
|
|
||||||
|
def get_encryption_service() -> EncryptionService:
|
||||||
|
"""암호화 서비스 인스턴스 반환 (지연 초기화)"""
|
||||||
|
global encryption_service
|
||||||
|
if encryption_service is None:
|
||||||
|
key = os.getenv('INSTAGRAM_ENCRYPTION_KEY')
|
||||||
|
if not key:
|
||||||
|
# 키가 없으면 새로 생성하고 경고
|
||||||
|
logger.warning("INSTAGRAM_ENCRYPTION_KEY 환경변수가 없습니다. 새 키를 생성합니다.")
|
||||||
|
encryption_service = EncryptionService()
|
||||||
|
logger.warning(f"생성된 키 (환경변수에 저장하세요): {encryption_service.get_key_string()}")
|
||||||
|
else:
|
||||||
|
encryption_service = EncryptionService(key)
|
||||||
|
return encryption_service
|
||||||
|
|
||||||
|
|
||||||
|
def get_instagram_manager() -> InstagramClientManager:
|
||||||
|
"""Instagram 클라이언트 매니저 인스턴스 반환 (지연 초기화)"""
|
||||||
|
global instagram_manager
|
||||||
|
if instagram_manager is None:
|
||||||
|
instagram_manager = InstagramClientManager(get_encryption_service())
|
||||||
|
return instagram_manager
|
||||||
|
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# API 엔드포인트
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
@app.route('/health', methods=['GET'])
|
||||||
|
def health_check():
|
||||||
|
"""
|
||||||
|
헬스 체크 엔드포인트
|
||||||
|
|
||||||
|
서비스가 정상 동작 중인지 확인합니다.
|
||||||
|
"""
|
||||||
|
return jsonify({
|
||||||
|
'status': 'ok',
|
||||||
|
'service': 'instagram-upload-service',
|
||||||
|
'timestamp': datetime.now().isoformat()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/connect', methods=['POST'])
|
||||||
|
def connect_account():
|
||||||
|
"""
|
||||||
|
Instagram 계정 연결
|
||||||
|
|
||||||
|
사용자의 Instagram 아이디/비밀번호로 로그인을 시도하고,
|
||||||
|
성공 시 암호화된 비밀번호와 세션 정보를 반환합니다.
|
||||||
|
|
||||||
|
Request Body:
|
||||||
|
{
|
||||||
|
"username": "instagram_username",
|
||||||
|
"password": "instagram_password",
|
||||||
|
"verification_code": "2FA 코드 (선택사항)"
|
||||||
|
}
|
||||||
|
|
||||||
|
Response:
|
||||||
|
성공: {
|
||||||
|
"success": true,
|
||||||
|
"encrypted_password": "암호화된 비밀번호",
|
||||||
|
"encrypted_session": "암호화된 세션 데이터",
|
||||||
|
"username": "확인된 사용자명",
|
||||||
|
"user_id": "Instagram 사용자 ID"
|
||||||
|
}
|
||||||
|
실패: {
|
||||||
|
"success": false,
|
||||||
|
"error": "에러 메시지",
|
||||||
|
"error_code": "에러 코드",
|
||||||
|
"requires_2fa": true/false
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json()
|
||||||
|
|
||||||
|
if not data:
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': '요청 데이터가 없습니다.',
|
||||||
|
'error_code': 'NO_DATA'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
# None 값 안전하게 처리
|
||||||
|
raw_username = data.get('username')
|
||||||
|
raw_password = data.get('password')
|
||||||
|
raw_verification = data.get('verification_code')
|
||||||
|
|
||||||
|
logger.info(f"[DEBUG] raw values - username: {type(raw_username)}, password: {type(raw_password)}, verification: {type(raw_verification)}")
|
||||||
|
|
||||||
|
username = str(raw_username).strip() if raw_username else ''
|
||||||
|
password = str(raw_password).strip() if raw_password else ''
|
||||||
|
verification_code = str(raw_verification).strip() if raw_verification else ''
|
||||||
|
|
||||||
|
if not username or not password:
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': '아이디와 비밀번호를 입력해주세요.',
|
||||||
|
'error_code': 'MISSING_CREDENTIALS'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
logger.info(f"[Instagram 연결 시도] 사용자: {username}")
|
||||||
|
|
||||||
|
manager = get_instagram_manager()
|
||||||
|
result = manager.login(username, password, verification_code)
|
||||||
|
|
||||||
|
if result['success']:
|
||||||
|
logger.info(f"[Instagram 연결 성공] 사용자: {username}")
|
||||||
|
return jsonify(result)
|
||||||
|
else:
|
||||||
|
logger.warning(f"[Instagram 연결 실패] 사용자: {username}, 에러: {result.get('error')}")
|
||||||
|
return jsonify(result), 401 if result.get('error_code') == 'LOGIN_FAILED' else 400
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[Instagram 연결 에러] {str(e)}", exc_info=True)
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': f'서버 오류가 발생했습니다: {str(e)}',
|
||||||
|
'error_code': 'SERVER_ERROR'
|
||||||
|
}), 500
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/verify-session', methods=['POST'])
|
||||||
|
def verify_session():
|
||||||
|
"""
|
||||||
|
저장된 세션 유효성 검증
|
||||||
|
|
||||||
|
암호화된 세션으로 로그인이 가능한지 확인합니다.
|
||||||
|
세션이 만료되었으면 비밀번호로 재로그인을 시도합니다.
|
||||||
|
|
||||||
|
Request Body:
|
||||||
|
{
|
||||||
|
"encrypted_session": "암호화된 세션",
|
||||||
|
"encrypted_password": "암호화된 비밀번호 (재로그인용)",
|
||||||
|
"username": "사용자명"
|
||||||
|
}
|
||||||
|
|
||||||
|
Response:
|
||||||
|
성공: {
|
||||||
|
"success": true,
|
||||||
|
"valid": true,
|
||||||
|
"new_session": "새 세션 (갱신된 경우)",
|
||||||
|
"username": "사용자명"
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json()
|
||||||
|
|
||||||
|
encrypted_session = data.get('encrypted_session')
|
||||||
|
encrypted_password = data.get('encrypted_password')
|
||||||
|
username = data.get('username')
|
||||||
|
|
||||||
|
if not encrypted_session:
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': '세션 정보가 없습니다.',
|
||||||
|
'error_code': 'NO_SESSION'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
manager = get_instagram_manager()
|
||||||
|
result = manager.verify_and_refresh_session(
|
||||||
|
encrypted_session,
|
||||||
|
encrypted_password,
|
||||||
|
username
|
||||||
|
)
|
||||||
|
|
||||||
|
return jsonify(result)
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[세션 검증 에러] {str(e)}", exc_info=True)
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': f'세션 검증 중 오류: {str(e)}',
|
||||||
|
'error_code': 'SERVER_ERROR'
|
||||||
|
}), 500
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/upload', methods=['POST'])
|
||||||
|
def upload_video():
|
||||||
|
"""
|
||||||
|
Instagram에 릴스/영상 업로드
|
||||||
|
|
||||||
|
저장된 세션을 사용하여 영상을 Instagram에 업로드합니다.
|
||||||
|
|
||||||
|
Request Body:
|
||||||
|
{
|
||||||
|
"encrypted_session": "암호화된 세션",
|
||||||
|
"encrypted_password": "암호화된 비밀번호 (세션 만료 시 재로그인용)",
|
||||||
|
"username": "사용자명",
|
||||||
|
"video_path": "업로드할 영상 파일 경로",
|
||||||
|
"caption": "게시물 캡션",
|
||||||
|
"thumbnail_path": "썸네일 이미지 경로 (선택)",
|
||||||
|
"upload_as_reel": true/false (기본: true)
|
||||||
|
}
|
||||||
|
|
||||||
|
Response:
|
||||||
|
성공: {
|
||||||
|
"success": true,
|
||||||
|
"media_id": "Instagram 미디어 ID",
|
||||||
|
"post_code": "게시물 코드",
|
||||||
|
"permalink": "게시물 URL"
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json()
|
||||||
|
|
||||||
|
encrypted_session = data.get('encrypted_session')
|
||||||
|
encrypted_password = data.get('encrypted_password')
|
||||||
|
username = data.get('username')
|
||||||
|
video_path = data.get('video_path')
|
||||||
|
caption = data.get('caption', '')
|
||||||
|
thumbnail_path = data.get('thumbnail_path')
|
||||||
|
upload_as_reel = data.get('upload_as_reel', True)
|
||||||
|
|
||||||
|
# 필수 필드 검증
|
||||||
|
if not encrypted_session:
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': '세션 정보가 없습니다. 먼저 계정을 연결해주세요.',
|
||||||
|
'error_code': 'NO_SESSION'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
if not video_path:
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': '업로드할 영상 경로가 없습니다.',
|
||||||
|
'error_code': 'NO_VIDEO'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
# 파일 존재 확인
|
||||||
|
if not os.path.exists(video_path):
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': f'영상 파일을 찾을 수 없습니다: {video_path}',
|
||||||
|
'error_code': 'FILE_NOT_FOUND'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
logger.info(f"[Instagram 업로드 시작] 사용자: {username}, 파일: {video_path}")
|
||||||
|
|
||||||
|
manager = get_instagram_manager()
|
||||||
|
result = manager.upload_video(
|
||||||
|
encrypted_session=encrypted_session,
|
||||||
|
encrypted_password=encrypted_password,
|
||||||
|
username=username,
|
||||||
|
video_path=video_path,
|
||||||
|
caption=caption,
|
||||||
|
thumbnail_path=thumbnail_path,
|
||||||
|
as_reel=upload_as_reel
|
||||||
|
)
|
||||||
|
|
||||||
|
if result['success']:
|
||||||
|
logger.info(f"[Instagram 업로드 성공] 미디어 ID: {result.get('media_id')}")
|
||||||
|
return jsonify(result)
|
||||||
|
else:
|
||||||
|
logger.error(f"[Instagram 업로드 실패] {result.get('error')}")
|
||||||
|
return jsonify(result), 400
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[Instagram 업로드 에러] {str(e)}", exc_info=True)
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': f'업로드 중 오류 발생: {str(e)}',
|
||||||
|
'error_code': 'UPLOAD_ERROR'
|
||||||
|
}), 500
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/disconnect', methods=['POST'])
|
||||||
|
def disconnect_account():
|
||||||
|
"""
|
||||||
|
Instagram 계정 연결 해제
|
||||||
|
|
||||||
|
로컬에 저장된 세션 정보만 삭제합니다.
|
||||||
|
Instagram 계정 자체에는 영향이 없습니다.
|
||||||
|
|
||||||
|
Request Body:
|
||||||
|
{
|
||||||
|
"encrypted_session": "암호화된 세션"
|
||||||
|
}
|
||||||
|
|
||||||
|
Response:
|
||||||
|
{
|
||||||
|
"success": true,
|
||||||
|
"message": "계정 연결이 해제되었습니다."
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json()
|
||||||
|
encrypted_session = data.get('encrypted_session')
|
||||||
|
|
||||||
|
if encrypted_session:
|
||||||
|
manager = get_instagram_manager()
|
||||||
|
manager.logout(encrypted_session)
|
||||||
|
|
||||||
|
return jsonify({
|
||||||
|
'success': True,
|
||||||
|
'message': '계정 연결이 해제되었습니다.'
|
||||||
|
})
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[연결 해제 에러] {str(e)}", exc_info=True)
|
||||||
|
return jsonify({
|
||||||
|
'success': True, # 에러가 나도 성공으로 처리 (어차피 연결 해제)
|
||||||
|
'message': '계정 연결이 해제되었습니다.'
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/account-info', methods=['POST'])
|
||||||
|
def get_account_info():
|
||||||
|
"""
|
||||||
|
Instagram 계정 정보 조회
|
||||||
|
|
||||||
|
연결된 계정의 기본 정보를 조회합니다.
|
||||||
|
|
||||||
|
Request Body:
|
||||||
|
{
|
||||||
|
"encrypted_session": "암호화된 세션"
|
||||||
|
}
|
||||||
|
|
||||||
|
Response:
|
||||||
|
{
|
||||||
|
"success": true,
|
||||||
|
"username": "사용자명",
|
||||||
|
"full_name": "이름",
|
||||||
|
"profile_pic_url": "프로필 사진 URL",
|
||||||
|
"follower_count": 팔로워 수,
|
||||||
|
"media_count": 게시물 수
|
||||||
|
}
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json()
|
||||||
|
encrypted_session = data.get('encrypted_session')
|
||||||
|
|
||||||
|
if not encrypted_session:
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': '세션 정보가 없습니다.',
|
||||||
|
'error_code': 'NO_SESSION'
|
||||||
|
}), 400
|
||||||
|
|
||||||
|
manager = get_instagram_manager()
|
||||||
|
result = manager.get_account_info(encrypted_session)
|
||||||
|
|
||||||
|
return jsonify(result)
|
||||||
|
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"[계정 정보 조회 에러] {str(e)}", exc_info=True)
|
||||||
|
return jsonify({
|
||||||
|
'success': False,
|
||||||
|
'error': f'계정 정보 조회 중 오류: {str(e)}',
|
||||||
|
'error_code': 'SERVER_ERROR'
|
||||||
|
}), 500
|
||||||
|
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 메인 실행
|
||||||
|
# ============================================
|
||||||
|
if __name__ == '__main__':
|
||||||
|
port = int(os.getenv('INSTAGRAM_SERVICE_PORT', 5001))
|
||||||
|
debug = os.getenv('FLASK_DEBUG', 'false').lower() == 'true'
|
||||||
|
|
||||||
|
logger.info(f"Instagram 업로드 서비스 시작 - 포트: {port}")
|
||||||
|
logger.info("엔드포인트:")
|
||||||
|
logger.info(" GET /health - 헬스 체크")
|
||||||
|
logger.info(" POST /connect - 계정 연결")
|
||||||
|
logger.info(" POST /verify-session - 세션 검증")
|
||||||
|
logger.info(" POST /upload - 영상 업로드")
|
||||||
|
logger.info(" POST /disconnect - 계정 연결 해제")
|
||||||
|
logger.info(" POST /account-info - 계정 정보 조회")
|
||||||
|
|
||||||
|
app.run(
|
||||||
|
host='0.0.0.0',
|
||||||
|
port=port,
|
||||||
|
debug=debug
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
# Instagram 자동 업로드를 위한 Python 패키지
|
||||||
|
# pip install -r requirements.txt
|
||||||
|
|
||||||
|
instagrapi==2.1.2 # Instagram Private API 클라이언트
|
||||||
|
Pillow>=8.1.1 # 이미지 처리 (instagrapi 의존성)
|
||||||
|
cryptography==41.0.7 # 비밀번호/세션 암호화
|
||||||
|
flask==3.0.0 # REST API 서버
|
||||||
|
flask-cors==4.0.0 # CORS 지원
|
||||||
|
python-dotenv==1.0.0 # 환경변수 로드
|
||||||
|
|
@ -0,0 +1,611 @@
|
||||||
|
/**
|
||||||
|
* Instagram 업로드 서비스
|
||||||
|
*
|
||||||
|
* Python Instagram 마이크로서비스와 통신하여
|
||||||
|
* Instagram 계정 연결 및 영상 업로드 기능을 제공합니다.
|
||||||
|
*
|
||||||
|
* 주요 기능:
|
||||||
|
* 1. Instagram 계정 연결 (로그인)
|
||||||
|
* 2. 계정 연결 해제
|
||||||
|
* 3. 릴스/영상 업로드
|
||||||
|
* 4. 업로드 히스토리 관리
|
||||||
|
*
|
||||||
|
* @module instagramService
|
||||||
|
*/
|
||||||
|
|
||||||
|
const db = require('./db');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 설정
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Python Instagram 서비스 URL
|
||||||
|
const INSTAGRAM_SERVICE_URL = process.env.INSTAGRAM_SERVICE_URL || 'http://localhost:5001';
|
||||||
|
|
||||||
|
// 주당 최대 업로드 횟수 (안전한 사용을 위해)
|
||||||
|
const MAX_UPLOADS_PER_WEEK = 1;
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 유틸리티 함수
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Python Instagram 서비스에 HTTP 요청
|
||||||
|
*
|
||||||
|
* @param {string} endpoint - API 엔드포인트 (예: '/connect')
|
||||||
|
* @param {Object} data - 요청 본문 데이터
|
||||||
|
* @returns {Promise<Object>} 응답 데이터
|
||||||
|
*/
|
||||||
|
async function callInstagramService(endpoint, data = {}) {
|
||||||
|
const url = `${INSTAGRAM_SERVICE_URL}${endpoint}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[Instagram 서비스 호출 실패] ${endpoint}:`, error.message);
|
||||||
|
|
||||||
|
// 서비스 연결 실패
|
||||||
|
if (error.code === 'ECONNREFUSED') {
|
||||||
|
throw new Error('Instagram 서비스에 연결할 수 없습니다. 서비스가 실행 중인지 확인하세요.');
|
||||||
|
}
|
||||||
|
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 서비스 헬스 체크
|
||||||
|
*
|
||||||
|
* @returns {Promise<boolean>} 서비스 정상 여부
|
||||||
|
*/
|
||||||
|
async function checkServiceHealth() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${INSTAGRAM_SERVICE_URL}/health`);
|
||||||
|
const data = await response.json();
|
||||||
|
return data.status === 'ok';
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Instagram 서비스 헬스 체크 실패]', error.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 계정 연결 관리
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 계정 연결
|
||||||
|
*
|
||||||
|
* 사용자의 Instagram 계정을 연결하고 인증 정보를 암호화하여 저장합니다.
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} username - Instagram 사용자명
|
||||||
|
* @param {string} password - Instagram 비밀번호
|
||||||
|
* @param {string} [verificationCode] - 2FA 인증 코드 (선택)
|
||||||
|
* @returns {Promise<Object>} 연결 결과
|
||||||
|
*/
|
||||||
|
async function connectAccount(userId, username, password, verificationCode = null) {
|
||||||
|
console.log(`[Instagram 연결 시도] 사용자 ID: ${userId}, Instagram: ${username}`);
|
||||||
|
|
||||||
|
// Python 서비스에 로그인 요청
|
||||||
|
const loginResult = await callInstagramService('/connect', {
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
verification_code: verificationCode
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!loginResult.success) {
|
||||||
|
return loginResult;
|
||||||
|
}
|
||||||
|
|
||||||
|
// DB에 연결 정보 저장
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO instagram_connections
|
||||||
|
(user_id, instagram_username, encrypted_password, encrypted_session,
|
||||||
|
is_active, last_login_at, connected_at, updated_at)
|
||||||
|
VALUES (?, ?, ?, ?, 1, datetime('now'), datetime('now'), datetime('now'))
|
||||||
|
`, [
|
||||||
|
userId,
|
||||||
|
loginResult.username,
|
||||||
|
loginResult.encrypted_password,
|
||||||
|
loginResult.encrypted_session
|
||||||
|
], function(err) {
|
||||||
|
if (err) {
|
||||||
|
console.error('[Instagram 연결 정보 저장 실패]', err);
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 기본 설정도 생성
|
||||||
|
db.run(`
|
||||||
|
INSERT OR IGNORE INTO instagram_settings
|
||||||
|
(user_id, auto_upload, upload_as_reel, max_uploads_per_week)
|
||||||
|
VALUES (?, 0, 1, ?)
|
||||||
|
`, [userId, MAX_UPLOADS_PER_WEEK]);
|
||||||
|
|
||||||
|
console.log(`[Instagram 연결 성공] 사용자 ID: ${userId}`);
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
message: 'Instagram 계정이 연결되었습니다.',
|
||||||
|
username: loginResult.username,
|
||||||
|
user_id: loginResult.user_id,
|
||||||
|
full_name: loginResult.full_name,
|
||||||
|
profile_pic_url: loginResult.profile_pic_url
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 계정 연결 해제
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @returns {Promise<Object>} 해제 결과
|
||||||
|
*/
|
||||||
|
async function disconnectAccount(userId) {
|
||||||
|
console.log(`[Instagram 연결 해제] 사용자 ID: ${userId}`);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 먼저 저장된 세션 조회
|
||||||
|
db.get(
|
||||||
|
'SELECT encrypted_session FROM instagram_connections WHERE user_id = ?',
|
||||||
|
[userId],
|
||||||
|
async (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Python 서비스에 로그아웃 요청 (실패해도 무시)
|
||||||
|
if (row && row.encrypted_session) {
|
||||||
|
try {
|
||||||
|
await callInstagramService('/disconnect', {
|
||||||
|
encrypted_session: row.encrypted_session
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// 무시
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DB에서 삭제
|
||||||
|
db.run(
|
||||||
|
'DELETE FROM instagram_connections WHERE user_id = ?',
|
||||||
|
[userId],
|
||||||
|
function(err) {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 설정도 삭제
|
||||||
|
db.run(
|
||||||
|
'DELETE FROM instagram_settings WHERE user_id = ?',
|
||||||
|
[userId]
|
||||||
|
);
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
message: 'Instagram 계정 연결이 해제되었습니다.'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 연결 상태 조회
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @returns {Promise<Object>} 연결 상태 정보
|
||||||
|
*/
|
||||||
|
async function getConnectionStatus(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
ic.instagram_username,
|
||||||
|
ic.is_active,
|
||||||
|
ic.two_factor_required,
|
||||||
|
ic.connected_at,
|
||||||
|
ic.last_login_at,
|
||||||
|
ic.encrypted_session,
|
||||||
|
inst.auto_upload,
|
||||||
|
inst.upload_as_reel,
|
||||||
|
inst.default_caption_template,
|
||||||
|
inst.default_hashtags,
|
||||||
|
inst.max_uploads_per_week,
|
||||||
|
inst.notify_on_upload
|
||||||
|
FROM instagram_connections ic
|
||||||
|
LEFT JOIN instagram_settings inst ON ic.user_id = inst.user_id
|
||||||
|
WHERE ic.user_id = ?
|
||||||
|
`, [userId], async (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!row) {
|
||||||
|
resolve({
|
||||||
|
connected: false,
|
||||||
|
message: 'Instagram 계정이 연결되지 않았습니다.'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 계정 정보 조회 시도 (세션 유효성 확인)
|
||||||
|
let accountInfo = null;
|
||||||
|
if (row.encrypted_session) {
|
||||||
|
try {
|
||||||
|
const info = await callInstagramService('/account-info', {
|
||||||
|
encrypted_session: row.encrypted_session
|
||||||
|
});
|
||||||
|
if (info.success) {
|
||||||
|
accountInfo = info;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// 세션 만료 가능성
|
||||||
|
console.warn('[Instagram 계정 정보 조회 실패]', e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
connected: true,
|
||||||
|
username: row.instagram_username,
|
||||||
|
is_active: row.is_active === 1,
|
||||||
|
two_factor_required: row.two_factor_required === 1,
|
||||||
|
connected_at: row.connected_at,
|
||||||
|
last_login_at: row.last_login_at,
|
||||||
|
settings: {
|
||||||
|
auto_upload: row.auto_upload === 1,
|
||||||
|
upload_as_reel: row.upload_as_reel === 1,
|
||||||
|
default_caption_template: row.default_caption_template,
|
||||||
|
default_hashtags: row.default_hashtags,
|
||||||
|
max_uploads_per_week: row.max_uploads_per_week || MAX_UPLOADS_PER_WEEK,
|
||||||
|
notify_on_upload: row.notify_on_upload === 1
|
||||||
|
},
|
||||||
|
account_info: accountInfo ? {
|
||||||
|
full_name: accountInfo.full_name,
|
||||||
|
profile_pic_url: accountInfo.profile_pic_url,
|
||||||
|
follower_count: accountInfo.follower_count,
|
||||||
|
media_count: accountInfo.media_count
|
||||||
|
} : null
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 설정 관리
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 업로드 설정 업데이트
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {Object} settings - 설정 객체
|
||||||
|
* @returns {Promise<Object>} 업데이트 결과
|
||||||
|
*/
|
||||||
|
async function updateSettings(userId, settings) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const {
|
||||||
|
auto_upload,
|
||||||
|
upload_as_reel,
|
||||||
|
default_caption_template,
|
||||||
|
default_hashtags,
|
||||||
|
max_uploads_per_week,
|
||||||
|
notify_on_upload
|
||||||
|
} = settings;
|
||||||
|
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO instagram_settings
|
||||||
|
(user_id, auto_upload, upload_as_reel, default_caption_template,
|
||||||
|
default_hashtags, max_uploads_per_week, notify_on_upload, updatedAt)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [
|
||||||
|
userId,
|
||||||
|
auto_upload ? 1 : 0,
|
||||||
|
upload_as_reel !== false ? 1 : 0, // 기본값 true
|
||||||
|
default_caption_template || null,
|
||||||
|
default_hashtags || null,
|
||||||
|
max_uploads_per_week || MAX_UPLOADS_PER_WEEK,
|
||||||
|
notify_on_upload !== false ? 1 : 0 // 기본값 true
|
||||||
|
], function(err) {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
message: '설정이 저장되었습니다.'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 영상 업로드
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 주간 업로드 횟수 확인
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @returns {Promise<Object>} 이번 주 업로드 정보
|
||||||
|
*/
|
||||||
|
async function getWeeklyUploadCount(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 이번 주 월요일 기준
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
COUNT(*) as count,
|
||||||
|
MAX(uploaded_at) as last_upload
|
||||||
|
FROM instagram_upload_history
|
||||||
|
WHERE user_id = ?
|
||||||
|
AND status = 'success'
|
||||||
|
AND uploaded_at >= date('now', 'weekday 0', '-6 days')
|
||||||
|
`, [userId], (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
db.get(
|
||||||
|
'SELECT max_uploads_per_week FROM instagram_settings WHERE user_id = ?',
|
||||||
|
[userId],
|
||||||
|
(err, settings) => {
|
||||||
|
resolve({
|
||||||
|
count: row?.count || 0,
|
||||||
|
max: settings?.max_uploads_per_week || MAX_UPLOADS_PER_WEEK,
|
||||||
|
last_upload: row?.last_upload
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram에 영상 업로드
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {number} historyId - 영상 히스토리 ID
|
||||||
|
* @param {string} videoPath - 영상 파일 경로
|
||||||
|
* @param {string} caption - 게시물 캡션
|
||||||
|
* @param {Object} [options] - 추가 옵션
|
||||||
|
* @param {string} [options.thumbnailPath] - 썸네일 이미지 경로
|
||||||
|
* @param {boolean} [options.forceUpload] - 주간 제한 무시 여부
|
||||||
|
* @returns {Promise<Object>} 업로드 결과
|
||||||
|
*/
|
||||||
|
async function uploadVideo(userId, historyId, videoPath, caption, options = {}) {
|
||||||
|
console.log(`[Instagram 업로드 시작] 사용자 ID: ${userId}, 히스토리: ${historyId}`);
|
||||||
|
|
||||||
|
const { thumbnailPath, forceUpload = false } = options;
|
||||||
|
|
||||||
|
// 1. 주간 업로드 횟수 확인
|
||||||
|
if (!forceUpload) {
|
||||||
|
const weeklyStats = await getWeeklyUploadCount(userId);
|
||||||
|
if (weeklyStats.count >= weeklyStats.max) {
|
||||||
|
console.log(`[Instagram 업로드 제한] 주간 최대 ${weeklyStats.max}회 초과`);
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: `이번 주 업로드 제한(${weeklyStats.max}회)을 초과했습니다. 다음 주에 다시 시도해주세요.`,
|
||||||
|
error_code: 'WEEKLY_LIMIT_EXCEEDED',
|
||||||
|
weekly_count: weeklyStats.count,
|
||||||
|
weekly_max: weeklyStats.max,
|
||||||
|
last_upload: weeklyStats.last_upload
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 연결 정보 조회
|
||||||
|
const connection = await new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT * FROM instagram_connections WHERE user_id = ? AND is_active = 1
|
||||||
|
`, [userId], (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!connection) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
error: 'Instagram 계정이 연결되지 않았습니다.',
|
||||||
|
error_code: 'NOT_CONNECTED'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 설정 조회
|
||||||
|
const settings = await new Promise((resolve, reject) => {
|
||||||
|
db.get(
|
||||||
|
'SELECT * FROM instagram_settings WHERE user_id = ?',
|
||||||
|
[userId],
|
||||||
|
(err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row || {});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. 업로드 히스토리 레코드 생성 (pending 상태)
|
||||||
|
const uploadHistoryId = await new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO instagram_upload_history
|
||||||
|
(user_id, history_id, caption, upload_type, status, createdAt)
|
||||||
|
VALUES (?, ?, ?, ?, 'pending', datetime('now'))
|
||||||
|
`, [
|
||||||
|
userId,
|
||||||
|
historyId,
|
||||||
|
caption,
|
||||||
|
settings.upload_as_reel ? 'reel' : 'video'
|
||||||
|
], function(err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(this.lastID);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. Python 서비스에 업로드 요청
|
||||||
|
try {
|
||||||
|
const result = await callInstagramService('/upload', {
|
||||||
|
encrypted_session: connection.encrypted_session,
|
||||||
|
encrypted_password: connection.encrypted_password,
|
||||||
|
username: connection.instagram_username,
|
||||||
|
video_path: videoPath,
|
||||||
|
caption: caption,
|
||||||
|
thumbnail_path: thumbnailPath,
|
||||||
|
upload_as_reel: settings.upload_as_reel !== 0
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
// 성공 - 히스토리 업데이트
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
UPDATE instagram_upload_history
|
||||||
|
SET instagram_media_id = ?,
|
||||||
|
instagram_post_code = ?,
|
||||||
|
permalink = ?,
|
||||||
|
status = 'success',
|
||||||
|
uploaded_at = datetime('now')
|
||||||
|
WHERE id = ?
|
||||||
|
`, [
|
||||||
|
result.media_id,
|
||||||
|
result.post_code,
|
||||||
|
result.permalink,
|
||||||
|
uploadHistoryId
|
||||||
|
], (err) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 세션 갱신된 경우 DB 업데이트
|
||||||
|
if (result.new_session) {
|
||||||
|
db.run(`
|
||||||
|
UPDATE instagram_connections
|
||||||
|
SET encrypted_session = ?, last_login_at = datetime('now'), updated_at = datetime('now')
|
||||||
|
WHERE user_id = ?
|
||||||
|
`, [result.new_session, userId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`[Instagram 업로드 성공] 미디어 ID: ${result.media_id}`);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
media_id: result.media_id,
|
||||||
|
post_code: result.post_code,
|
||||||
|
permalink: result.permalink,
|
||||||
|
upload_history_id: uploadHistoryId
|
||||||
|
};
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// 실패 - 히스토리 업데이트
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
UPDATE instagram_upload_history
|
||||||
|
SET status = 'failed',
|
||||||
|
error_message = ?,
|
||||||
|
retry_count = retry_count + 1
|
||||||
|
WHERE id = ?
|
||||||
|
`, [result.error, uploadHistoryId], (err) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.error(`[Instagram 업로드 실패] ${result.error}`);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
// 에러 - 히스토리 업데이트
|
||||||
|
await new Promise((resolve) => {
|
||||||
|
db.run(`
|
||||||
|
UPDATE instagram_upload_history
|
||||||
|
SET status = 'failed',
|
||||||
|
error_message = ?,
|
||||||
|
retry_count = retry_count + 1
|
||||||
|
WHERE id = ?
|
||||||
|
`, [error.message, uploadHistoryId], () => resolve());
|
||||||
|
});
|
||||||
|
|
||||||
|
console.error(`[Instagram 업로드 에러]`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 히스토리 조회
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 업로드 히스토리 조회
|
||||||
|
*
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {number} [limit=20] - 최대 조회 개수
|
||||||
|
* @param {number} [offset=0] - 시작 위치
|
||||||
|
* @returns {Promise<Array>} 업로드 히스토리 목록
|
||||||
|
*/
|
||||||
|
async function getUploadHistory(userId, limit = 20, offset = 0) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
iuh.*,
|
||||||
|
h.business_name,
|
||||||
|
h.details as video_details,
|
||||||
|
pp.brand_name as pension_name
|
||||||
|
FROM instagram_upload_history iuh
|
||||||
|
LEFT JOIN history h ON iuh.history_id = h.id
|
||||||
|
LEFT JOIN pension_profiles pp ON iuh.pension_id = pp.id
|
||||||
|
WHERE iuh.user_id = ?
|
||||||
|
ORDER BY iuh.createdAt DESC
|
||||||
|
LIMIT ? OFFSET ?
|
||||||
|
`, [userId, limit, offset], (err, rows) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 모듈 익스포트
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// 서비스 상태
|
||||||
|
checkServiceHealth,
|
||||||
|
|
||||||
|
// 계정 관리
|
||||||
|
connectAccount,
|
||||||
|
disconnectAccount,
|
||||||
|
getConnectionStatus,
|
||||||
|
|
||||||
|
// 설정
|
||||||
|
updateSettings,
|
||||||
|
|
||||||
|
// 업로드
|
||||||
|
uploadVideo,
|
||||||
|
getWeeklyUploadCount,
|
||||||
|
getUploadHistory,
|
||||||
|
|
||||||
|
// 상수
|
||||||
|
INSTAGRAM_SERVICE_URL,
|
||||||
|
MAX_UPLOADS_PER_WEEK
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,263 @@
|
||||||
|
-- ============================================
|
||||||
|
-- 축제-펜션 연동 테이블 마이그레이션
|
||||||
|
-- 버전: 1.0
|
||||||
|
-- 날짜: 2024-12-08
|
||||||
|
-- ============================================
|
||||||
|
|
||||||
|
-- 축제 테이블
|
||||||
|
CREATE TABLE IF NOT EXISTS festivals (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
|
||||||
|
-- TourAPI 식별자
|
||||||
|
content_id TEXT UNIQUE NOT NULL,
|
||||||
|
content_type_id TEXT DEFAULT '15',
|
||||||
|
|
||||||
|
-- 기본 정보
|
||||||
|
title TEXT NOT NULL,
|
||||||
|
overview TEXT,
|
||||||
|
|
||||||
|
-- 주소 정보
|
||||||
|
addr1 TEXT,
|
||||||
|
addr2 TEXT,
|
||||||
|
zipcode TEXT,
|
||||||
|
|
||||||
|
-- 지역 코드
|
||||||
|
area_code TEXT,
|
||||||
|
sigungu_code TEXT,
|
||||||
|
sido TEXT,
|
||||||
|
sigungu TEXT,
|
||||||
|
|
||||||
|
-- 좌표
|
||||||
|
mapx REAL,
|
||||||
|
mapy REAL,
|
||||||
|
|
||||||
|
-- 기간
|
||||||
|
event_start_date TEXT,
|
||||||
|
event_end_date TEXT,
|
||||||
|
|
||||||
|
-- 이미지
|
||||||
|
first_image TEXT,
|
||||||
|
first_image2 TEXT,
|
||||||
|
|
||||||
|
-- 연락처
|
||||||
|
tel TEXT,
|
||||||
|
homepage TEXT,
|
||||||
|
|
||||||
|
-- 상세 정보
|
||||||
|
place TEXT,
|
||||||
|
place_info TEXT,
|
||||||
|
play_time TEXT,
|
||||||
|
program TEXT,
|
||||||
|
use_fee TEXT,
|
||||||
|
age_limit TEXT,
|
||||||
|
|
||||||
|
-- 주최/주관
|
||||||
|
sponsor1 TEXT,
|
||||||
|
sponsor1_tel TEXT,
|
||||||
|
sponsor2 TEXT,
|
||||||
|
sponsor2_tel TEXT,
|
||||||
|
|
||||||
|
-- 부대정보
|
||||||
|
sub_event TEXT,
|
||||||
|
booking_place TEXT,
|
||||||
|
|
||||||
|
-- 시스템
|
||||||
|
is_active INTEGER DEFAULT 1,
|
||||||
|
view_count INTEGER DEFAULT 0,
|
||||||
|
last_synced_at TEXT,
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TEXT DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
-- 인덱스
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_festivals_area ON festivals(area_code, sigungu_code);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_festivals_date ON festivals(event_start_date, event_end_date);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_festivals_coords ON festivals(mapx, mapy);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_festivals_active ON festivals(is_active, event_end_date);
|
||||||
|
|
||||||
|
|
||||||
|
-- 전국 펜션 마스터 테이블
|
||||||
|
CREATE TABLE IF NOT EXISTS public_pensions (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
|
||||||
|
-- 데이터 출처
|
||||||
|
source TEXT NOT NULL,
|
||||||
|
source_id TEXT,
|
||||||
|
content_id TEXT,
|
||||||
|
|
||||||
|
-- 기본 정보
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
name_normalized TEXT,
|
||||||
|
|
||||||
|
-- 주소 정보
|
||||||
|
address TEXT,
|
||||||
|
road_address TEXT,
|
||||||
|
jibun_address TEXT,
|
||||||
|
zipcode TEXT,
|
||||||
|
|
||||||
|
-- 지역 코드
|
||||||
|
sido TEXT,
|
||||||
|
sigungu TEXT,
|
||||||
|
eupmyeondong TEXT,
|
||||||
|
area_code TEXT,
|
||||||
|
sigungu_code TEXT,
|
||||||
|
|
||||||
|
-- 좌표
|
||||||
|
mapx REAL,
|
||||||
|
mapy REAL,
|
||||||
|
|
||||||
|
-- 연락처
|
||||||
|
tel TEXT,
|
||||||
|
homepage TEXT,
|
||||||
|
|
||||||
|
-- 이미지
|
||||||
|
thumbnail TEXT,
|
||||||
|
images TEXT,
|
||||||
|
|
||||||
|
-- 숙박 상세
|
||||||
|
checkin_time TEXT,
|
||||||
|
checkout_time TEXT,
|
||||||
|
room_count INTEGER,
|
||||||
|
room_type TEXT,
|
||||||
|
facilities TEXT,
|
||||||
|
parking TEXT,
|
||||||
|
reservation_url TEXT,
|
||||||
|
|
||||||
|
-- 특성
|
||||||
|
pet_allowed INTEGER DEFAULT 0,
|
||||||
|
pickup_available INTEGER DEFAULT 0,
|
||||||
|
cooking_available INTEGER DEFAULT 0,
|
||||||
|
barbecue_available INTEGER DEFAULT 0,
|
||||||
|
|
||||||
|
-- 영업 상태
|
||||||
|
business_status TEXT DEFAULT '영업중',
|
||||||
|
license_date TEXT,
|
||||||
|
closure_date TEXT,
|
||||||
|
|
||||||
|
-- 소유권
|
||||||
|
is_verified INTEGER DEFAULT 0,
|
||||||
|
is_claimed INTEGER DEFAULT 0,
|
||||||
|
claimed_by INTEGER,
|
||||||
|
claimed_at TEXT,
|
||||||
|
|
||||||
|
-- 통계
|
||||||
|
view_count INTEGER DEFAULT 0,
|
||||||
|
|
||||||
|
-- 타임스탬프
|
||||||
|
last_synced_at TEXT,
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
|
||||||
|
FOREIGN KEY (claimed_by) REFERENCES users(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
-- 인덱스
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_public_pensions_sido ON public_pensions(sido);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_public_pensions_sigungu ON public_pensions(sido, sigungu);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_public_pensions_coords ON public_pensions(mapx, mapy);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_public_pensions_name ON public_pensions(name_normalized);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_public_pensions_source ON public_pensions(source, source_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_public_pensions_claimed ON public_pensions(is_claimed, claimed_by);
|
||||||
|
CREATE UNIQUE INDEX IF NOT EXISTS idx_public_pensions_unique ON public_pensions(source, source_id);
|
||||||
|
|
||||||
|
|
||||||
|
-- 펜션-축제 매칭 테이블
|
||||||
|
CREATE TABLE IF NOT EXISTS pension_festival_matches (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
|
||||||
|
pension_id INTEGER NOT NULL,
|
||||||
|
pension_type TEXT DEFAULT 'public',
|
||||||
|
festival_id INTEGER NOT NULL,
|
||||||
|
|
||||||
|
distance_km REAL,
|
||||||
|
travel_time_min INTEGER,
|
||||||
|
|
||||||
|
match_type TEXT,
|
||||||
|
match_score INTEGER DEFAULT 0,
|
||||||
|
|
||||||
|
is_featured INTEGER DEFAULT 0,
|
||||||
|
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
|
||||||
|
FOREIGN KEY (festival_id) REFERENCES festivals(id),
|
||||||
|
UNIQUE(pension_id, pension_type, festival_id)
|
||||||
|
);
|
||||||
|
|
||||||
|
-- 인덱스
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_matches_pension ON pension_festival_matches(pension_id, pension_type);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_matches_festival ON pension_festival_matches(festival_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_matches_distance ON pension_festival_matches(distance_km);
|
||||||
|
|
||||||
|
|
||||||
|
-- 지역코드 테이블
|
||||||
|
CREATE TABLE IF NOT EXISTS area_codes (
|
||||||
|
code TEXT PRIMARY KEY,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
name_short TEXT,
|
||||||
|
name_en TEXT
|
||||||
|
);
|
||||||
|
|
||||||
|
-- 시군구코드 테이블
|
||||||
|
CREATE TABLE IF NOT EXISTS sigungu_codes (
|
||||||
|
area_code TEXT NOT NULL,
|
||||||
|
sigungu_code TEXT NOT NULL,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
name_en TEXT,
|
||||||
|
PRIMARY KEY (area_code, sigungu_code),
|
||||||
|
FOREIGN KEY (area_code) REFERENCES area_codes(code)
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
-- 펜션 클레임 테이블
|
||||||
|
CREATE TABLE IF NOT EXISTS pension_claims (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
|
||||||
|
public_pension_id INTEGER NOT NULL,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
|
||||||
|
status TEXT DEFAULT 'pending',
|
||||||
|
verification_method TEXT,
|
||||||
|
verification_data TEXT,
|
||||||
|
|
||||||
|
reviewed_by INTEGER,
|
||||||
|
reviewed_at TEXT,
|
||||||
|
reject_reason TEXT,
|
||||||
|
|
||||||
|
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
|
||||||
|
FOREIGN KEY (public_pension_id) REFERENCES public_pensions(id),
|
||||||
|
FOREIGN KEY (user_id) REFERENCES users(id),
|
||||||
|
FOREIGN KEY (reviewed_by) REFERENCES users(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
-- 지역코드 초기 데이터
|
||||||
|
INSERT OR IGNORE INTO area_codes (code, name, name_short, name_en) VALUES
|
||||||
|
('1', '서울특별시', '서울', 'Seoul'),
|
||||||
|
('2', '인천광역시', '인천', 'Incheon'),
|
||||||
|
('3', '대전광역시', '대전', 'Daejeon'),
|
||||||
|
('4', '대구광역시', '대구', 'Daegu'),
|
||||||
|
('5', '광주광역시', '광주', 'Gwangju'),
|
||||||
|
('6', '부산광역시', '부산', 'Busan'),
|
||||||
|
('7', '울산광역시', '울산', 'Ulsan'),
|
||||||
|
('8', '세종특별자치시', '세종', 'Sejong'),
|
||||||
|
('31', '경기도', '경기', 'Gyeonggi'),
|
||||||
|
('32', '강원특별자치도', '강원', 'Gangwon'),
|
||||||
|
('33', '충청북도', '충북', 'Chungbuk'),
|
||||||
|
('34', '충청남도', '충남', 'Chungnam'),
|
||||||
|
('35', '경상북도', '경북', 'Gyeongbuk'),
|
||||||
|
('36', '경상남도', '경남', 'Gyeongnam'),
|
||||||
|
('37', '전북특별자치도', '전북', 'Jeonbuk'),
|
||||||
|
('38', '전라남도', '전남', 'Jeonnam'),
|
||||||
|
('39', '제주특별자치도', '제주', 'Jeju');
|
||||||
|
|
||||||
|
|
||||||
|
-- pension_profiles 테이블에 컬럼 추가 (이미 존재하면 무시)
|
||||||
|
-- SQLite는 IF NOT EXISTS를 ALTER TABLE에서 지원하지 않으므로 별도 처리 필요
|
||||||
|
-- 아래는 참고용, 실제로는 코드에서 처리
|
||||||
|
|
||||||
|
-- ALTER TABLE pension_profiles ADD COLUMN mapx REAL;
|
||||||
|
-- ALTER TABLE pension_profiles ADD COLUMN mapy REAL;
|
||||||
|
-- ALTER TABLE pension_profiles ADD COLUMN area_code TEXT;
|
||||||
|
-- ALTER TABLE pension_profiles ADD COLUMN sigungu_code TEXT;
|
||||||
|
-- ALTER TABLE pension_profiles ADD COLUMN public_pension_id INTEGER REFERENCES public_pensions(id);
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "bizvibe-render-server",
|
||||||
|
"version": "0.5.0",
|
||||||
|
"description": "Puppeteer render server for BizVibe",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "node index.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@google-cloud/bigquery": "^8.1.1",
|
||||||
|
"@google-cloud/billing": "^5.1.1",
|
||||||
|
"axios": "^1.13.2",
|
||||||
|
"bcrypt": "^6.0.0",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"dotenv": "^17.2.3",
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"googleapis": "^166.0.0",
|
||||||
|
"jsonwebtoken": "^9.0.2",
|
||||||
|
"multer": "^2.0.2",
|
||||||
|
"node-cron": "^4.2.1",
|
||||||
|
"open": "^11.0.0",
|
||||||
|
"puppeteer": "^19.0.0",
|
||||||
|
"puppeteer-screen-recorder": "^3.0.0",
|
||||||
|
"resend": "^6.5.2",
|
||||||
|
"sqlite3": "^5.1.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"concurrently": "^9.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,440 @@
|
||||||
|
/**
|
||||||
|
* 축제 & 펜션 데이터 동기화 스크립트
|
||||||
|
*
|
||||||
|
* 사용법:
|
||||||
|
* node server/scripts/syncData.js # 전체 동기화
|
||||||
|
* node server/scripts/syncData.js festivals # 축제만
|
||||||
|
* node server/scripts/syncData.js pensions # 펜션만
|
||||||
|
* node server/scripts/syncData.js --area=32 # 특정 지역만 (32=강원)
|
||||||
|
* node server/scripts/syncData.js festivals --startDate=20251201 --endDate=20261231
|
||||||
|
* # 특정 날짜 범위 축제 동기화
|
||||||
|
*/
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
require('dotenv').config({ path: path.join(__dirname, '../../.env') });
|
||||||
|
const axios = require('axios');
|
||||||
|
const db = require('../db');
|
||||||
|
|
||||||
|
// 설정
|
||||||
|
const TOURAPI_KEY = process.env.TOURAPI_KEY;
|
||||||
|
const TOURAPI_ENDPOINT = process.env.TOURAPI_ENDPOINT || 'https://apis.data.go.kr/B551011/KorService2';
|
||||||
|
|
||||||
|
// 지역코드 매핑
|
||||||
|
const AREA_NAMES = {
|
||||||
|
'1': '서울', '2': '인천', '3': '대전', '4': '대구', '5': '광주',
|
||||||
|
'6': '부산', '7': '울산', '8': '세종', '31': '경기', '32': '강원',
|
||||||
|
'33': '충북', '34': '충남', '35': '경북', '36': '경남', '37': '전북',
|
||||||
|
'38': '전남', '39': '제주',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 유틸리티 함수
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTodayString() {
|
||||||
|
return new Date().toISOString().slice(0, 10).replace(/-/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDateAfterMonths(months) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setMonth(date.getMonth() + months);
|
||||||
|
return date.toISOString().slice(0, 10).replace(/-/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeText(text) {
|
||||||
|
if (!text) return '';
|
||||||
|
return text.replace(/\s+/g, '').toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
// DB 프로미스 래퍼
|
||||||
|
function dbRun(sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(sql, params, function(err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve({ lastID: this.lastID, changes: this.changes });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function dbGet(sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(sql, params, (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function dbAll(sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(sql, params, (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// TourAPI 호출
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
async function callTourApi(operation, params = {}) {
|
||||||
|
try {
|
||||||
|
const url = `${TOURAPI_ENDPOINT}/${operation}`;
|
||||||
|
const response = await axios.get(url, {
|
||||||
|
params: {
|
||||||
|
serviceKey: TOURAPI_KEY,
|
||||||
|
MobileOS: 'ETC',
|
||||||
|
MobileApp: 'CastAD',
|
||||||
|
_type: 'json',
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
timeout: 30000,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = response.data;
|
||||||
|
if (data.response?.header?.resultCode !== '0000') {
|
||||||
|
throw new Error(data.response?.header?.resultMsg || 'API Error');
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = data.response?.body;
|
||||||
|
let items = body?.items?.item || [];
|
||||||
|
|
||||||
|
// 단일 아이템일 경우 배열로 변환
|
||||||
|
if (items && !Array.isArray(items)) {
|
||||||
|
items = [items];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
items,
|
||||||
|
totalCount: body?.totalCount || 0,
|
||||||
|
pageNo: body?.pageNo || 1,
|
||||||
|
numOfRows: body?.numOfRows || 10,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
throw new Error('TourAPI 인증 실패');
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 축제 동기화
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
async function syncFestivals(areaCode = null, customStartDate = null, customEndDate = null) {
|
||||||
|
console.log('\n========================================');
|
||||||
|
console.log('🎪 축제 데이터 동기화 시작');
|
||||||
|
console.log('========================================');
|
||||||
|
|
||||||
|
// 날짜 설정: 커스텀 날짜가 있으면 사용, 없으면 기본값 (오늘~1년 후)
|
||||||
|
const startDate = customStartDate || getTodayString();
|
||||||
|
const endDate = customEndDate || getDateAfterMonths(12);
|
||||||
|
|
||||||
|
console.log(` 기간: ${startDate} ~ ${endDate}`);
|
||||||
|
|
||||||
|
let totalSynced = 0;
|
||||||
|
let pageNo = 1;
|
||||||
|
const errors = [];
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
numOfRows: 100,
|
||||||
|
pageNo,
|
||||||
|
eventStartDate: startDate,
|
||||||
|
eventEndDate: endDate,
|
||||||
|
arrange: 'A',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (areaCode) {
|
||||||
|
params.areaCode = areaCode;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n📄 페이지 ${pageNo} 조회 중...`);
|
||||||
|
const result = await callTourApi('searchFestival2', params);
|
||||||
|
|
||||||
|
if (!result.items || result.items.length === 0) {
|
||||||
|
console.log(' → 더 이상 데이터 없음');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(` → ${result.items.length}건 발견 (전체 ${result.totalCount}건)`);
|
||||||
|
|
||||||
|
for (const item of result.items) {
|
||||||
|
try {
|
||||||
|
await upsertFestival(item);
|
||||||
|
totalSynced++;
|
||||||
|
} catch (err) {
|
||||||
|
errors.push({ contentId: item.contentid, error: err.message });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (result.items.length < 100) break;
|
||||||
|
pageNo++;
|
||||||
|
|
||||||
|
// API 호출 제한 대응
|
||||||
|
await sleep(200);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(` ❌ 페이지 ${pageNo} 에러:`, error.message);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\n========================================');
|
||||||
|
console.log(`✅ 축제 동기화 완료: ${totalSynced}건`);
|
||||||
|
if (errors.length > 0) {
|
||||||
|
console.log(`⚠️ 에러: ${errors.length}건`);
|
||||||
|
}
|
||||||
|
console.log('========================================\n');
|
||||||
|
|
||||||
|
return { synced: totalSynced, errors };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function upsertFestival(item) {
|
||||||
|
const exists = await dbGet('SELECT id FROM festivals WHERE content_id = ?', [item.contentid]);
|
||||||
|
|
||||||
|
const sido = AREA_NAMES[item.areacode] || null;
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
await dbRun(`
|
||||||
|
UPDATE festivals SET
|
||||||
|
title = ?, addr1 = ?, addr2 = ?, area_code = ?, sigungu_code = ?, sido = ?,
|
||||||
|
mapx = ?, mapy = ?, event_start_date = ?, event_end_date = ?,
|
||||||
|
first_image = ?, first_image2 = ?, tel = ?, zipcode = ?,
|
||||||
|
last_synced_at = ?, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE content_id = ?
|
||||||
|
`, [
|
||||||
|
item.title, item.addr1, item.addr2, item.areacode, item.sigungucode, sido,
|
||||||
|
item.mapx ? parseFloat(item.mapx) : null,
|
||||||
|
item.mapy ? parseFloat(item.mapy) : null,
|
||||||
|
item.eventstartdate, item.eventenddate,
|
||||||
|
item.firstimage, item.firstimage2, item.tel, item.zipcode,
|
||||||
|
new Date().toISOString(),
|
||||||
|
item.contentid
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
await dbRun(`
|
||||||
|
INSERT INTO festivals (
|
||||||
|
content_id, content_type_id, title, addr1, addr2, area_code, sigungu_code, sido,
|
||||||
|
mapx, mapy, event_start_date, event_end_date, first_image, first_image2,
|
||||||
|
tel, zipcode, last_synced_at
|
||||||
|
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||||
|
`, [
|
||||||
|
item.contentid, item.contenttypeid || '15', item.title, item.addr1, item.addr2,
|
||||||
|
item.areacode, item.sigungucode, sido,
|
||||||
|
item.mapx ? parseFloat(item.mapx) : null,
|
||||||
|
item.mapy ? parseFloat(item.mapy) : null,
|
||||||
|
item.eventstartdate, item.eventenddate, item.firstimage, item.firstimage2,
|
||||||
|
item.tel, item.zipcode, new Date().toISOString()
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 펜션 동기화
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
async function syncPensions(areaCode = null) {
|
||||||
|
console.log('\n========================================');
|
||||||
|
console.log('🏡 펜션 데이터 동기화 시작');
|
||||||
|
console.log('========================================');
|
||||||
|
|
||||||
|
let totalSynced = 0;
|
||||||
|
const errors = [];
|
||||||
|
|
||||||
|
// 지역별로 순회 (전체 또는 특정 지역)
|
||||||
|
const areaCodes = areaCode ? [areaCode] : Object.keys(AREA_NAMES);
|
||||||
|
|
||||||
|
for (const area of areaCodes) {
|
||||||
|
console.log(`\n📍 ${AREA_NAMES[area]} (코드: ${area}) 조회 중...`);
|
||||||
|
|
||||||
|
let pageNo = 1;
|
||||||
|
let areaTotal = 0;
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
numOfRows: 100,
|
||||||
|
pageNo,
|
||||||
|
areaCode: area,
|
||||||
|
arrange: 'A',
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = await callTourApi('searchStay2', params);
|
||||||
|
|
||||||
|
if (!result.items || result.items.length === 0) break;
|
||||||
|
|
||||||
|
// 펜션만 필터링 (이름에 '펜션' 포함 또는 cat3 코드)
|
||||||
|
const pensions = result.items.filter(item =>
|
||||||
|
item.title?.includes('펜션') ||
|
||||||
|
item.cat3 === 'B02010700' ||
|
||||||
|
item.title?.toLowerCase().includes('pension')
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const item of pensions) {
|
||||||
|
try {
|
||||||
|
await upsertPension(item);
|
||||||
|
totalSynced++;
|
||||||
|
areaTotal++;
|
||||||
|
} catch (err) {
|
||||||
|
errors.push({ contentId: item.contentid, error: err.message });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (result.items.length < 100) break;
|
||||||
|
pageNo++;
|
||||||
|
|
||||||
|
await sleep(200);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(` ❌ ${AREA_NAMES[area]} 에러:`, error.message);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(` → ${AREA_NAMES[area]}: ${areaTotal}건`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\n========================================');
|
||||||
|
console.log(`✅ 펜션 동기화 완료: ${totalSynced}건`);
|
||||||
|
if (errors.length > 0) {
|
||||||
|
console.log(`⚠️ 에러: ${errors.length}건`);
|
||||||
|
}
|
||||||
|
console.log('========================================\n');
|
||||||
|
|
||||||
|
return { synced: totalSynced, errors };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function upsertPension(item) {
|
||||||
|
const exists = await dbGet(
|
||||||
|
'SELECT id FROM public_pensions WHERE source = ? AND content_id = ?',
|
||||||
|
['TOURAPI', item.contentid]
|
||||||
|
);
|
||||||
|
|
||||||
|
const sido = AREA_NAMES[item.areacode] || null;
|
||||||
|
const nameNormalized = normalizeText(item.title);
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
await dbRun(`
|
||||||
|
UPDATE public_pensions SET
|
||||||
|
name = ?, name_normalized = ?, address = ?, area_code = ?, sigungu_code = ?, sido = ?,
|
||||||
|
mapx = ?, mapy = ?, tel = ?, thumbnail = ?, zipcode = ?,
|
||||||
|
last_synced_at = ?, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE source = 'TOURAPI' AND content_id = ?
|
||||||
|
`, [
|
||||||
|
item.title, nameNormalized, item.addr1, item.areacode, item.sigungucode, sido,
|
||||||
|
item.mapx ? parseFloat(item.mapx) : null,
|
||||||
|
item.mapy ? parseFloat(item.mapy) : null,
|
||||||
|
item.tel, item.firstimage, item.zipcode,
|
||||||
|
new Date().toISOString(),
|
||||||
|
item.contentid
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
await dbRun(`
|
||||||
|
INSERT INTO public_pensions (
|
||||||
|
source, source_id, content_id, name, name_normalized, address,
|
||||||
|
area_code, sigungu_code, sido, mapx, mapy, tel, thumbnail, zipcode, last_synced_at
|
||||||
|
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||||
|
`, [
|
||||||
|
'TOURAPI', item.contentid, item.contentid, item.title, nameNormalized, item.addr1,
|
||||||
|
item.areacode, item.sigungucode, sido,
|
||||||
|
item.mapx ? parseFloat(item.mapx) : null,
|
||||||
|
item.mapy ? parseFloat(item.mapy) : null,
|
||||||
|
item.tel, item.firstimage, item.zipcode, new Date().toISOString()
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 통계 출력
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
async function printStats() {
|
||||||
|
console.log('\n========================================');
|
||||||
|
console.log('📊 현재 데이터 현황');
|
||||||
|
console.log('========================================');
|
||||||
|
|
||||||
|
// 축제 통계
|
||||||
|
const festivalCount = await dbGet('SELECT COUNT(*) as count FROM festivals');
|
||||||
|
const festivalByArea = await dbAll(`
|
||||||
|
SELECT sido, COUNT(*) as count
|
||||||
|
FROM festivals
|
||||||
|
WHERE sido IS NOT NULL
|
||||||
|
GROUP BY sido
|
||||||
|
ORDER BY count DESC
|
||||||
|
`);
|
||||||
|
|
||||||
|
console.log(`\n🎪 축제: 총 ${festivalCount.count}건`);
|
||||||
|
festivalByArea.forEach(row => {
|
||||||
|
console.log(` - ${row.sido}: ${row.count}건`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 펜션 통계
|
||||||
|
const pensionCount = await dbGet('SELECT COUNT(*) as count FROM public_pensions');
|
||||||
|
const pensionByArea = await dbAll(`
|
||||||
|
SELECT sido, COUNT(*) as count
|
||||||
|
FROM public_pensions
|
||||||
|
WHERE sido IS NOT NULL
|
||||||
|
GROUP BY sido
|
||||||
|
ORDER BY count DESC
|
||||||
|
`);
|
||||||
|
|
||||||
|
console.log(`\n🏡 펜션: 총 ${pensionCount.count}건`);
|
||||||
|
pensionByArea.forEach(row => {
|
||||||
|
console.log(` - ${row.sido}: ${row.count}건`);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('\n========================================\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 메인 실행
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const args = process.argv.slice(2);
|
||||||
|
|
||||||
|
// 옵션 파싱
|
||||||
|
let syncType = 'all'; // festivals, pensions, all
|
||||||
|
let areaCode = null;
|
||||||
|
let startDate = null;
|
||||||
|
let endDate = null;
|
||||||
|
|
||||||
|
args.forEach(arg => {
|
||||||
|
if (arg === 'festivals') syncType = 'festivals';
|
||||||
|
else if (arg === 'pensions') syncType = 'pensions';
|
||||||
|
else if (arg.startsWith('--area=')) areaCode = arg.split('=')[1];
|
||||||
|
else if (arg.startsWith('--startDate=')) startDate = arg.split('=')[1];
|
||||||
|
else if (arg.startsWith('--endDate=')) endDate = arg.split('=')[1];
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('\n🚀 TourAPI 데이터 동기화');
|
||||||
|
console.log(` - 유형: ${syncType}`);
|
||||||
|
console.log(` - 지역: ${areaCode ? AREA_NAMES[areaCode] : '전체'}`);
|
||||||
|
if (startDate || endDate) {
|
||||||
|
console.log(` - 날짜 범위: ${startDate || '오늘'} ~ ${endDate || '1년 후'}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (syncType === 'all' || syncType === 'festivals') {
|
||||||
|
await syncFestivals(areaCode, startDate, endDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (syncType === 'all' || syncType === 'pensions') {
|
||||||
|
await syncPensions(areaCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
await printStats();
|
||||||
|
|
||||||
|
console.log('✅ 동기화 완료!\n');
|
||||||
|
process.exit(0);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('\n❌ 동기화 실패:', error.message);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 실행
|
||||||
|
main();
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
#!/bin/bash
|
||||||
|
# ============================================
|
||||||
|
# 주간 축제/펜션 데이터 동기화 스크립트
|
||||||
|
# 매주 일요일 새벽 3시 실행 (cron)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||||
|
SERVER_DIR="$(dirname "$SCRIPT_DIR")"
|
||||||
|
LOG_DIR="$SERVER_DIR/logs"
|
||||||
|
LOG_FILE="$LOG_DIR/sync_$(date +%Y%m%d_%H%M%S).log"
|
||||||
|
|
||||||
|
# 로그 디렉토리 생성
|
||||||
|
mkdir -p "$LOG_DIR"
|
||||||
|
|
||||||
|
echo "============================================" >> "$LOG_FILE"
|
||||||
|
echo "동기화 시작: $(date)" >> "$LOG_FILE"
|
||||||
|
echo "============================================" >> "$LOG_FILE"
|
||||||
|
|
||||||
|
# Node.js 경로 (nvm 사용 시)
|
||||||
|
export NVM_DIR="$HOME/.nvm"
|
||||||
|
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
|
||||||
|
|
||||||
|
cd "$SERVER_DIR"
|
||||||
|
|
||||||
|
# 축제 동기화 (2년치)
|
||||||
|
echo "" >> "$LOG_FILE"
|
||||||
|
echo "[축제 동기화]" >> "$LOG_FILE"
|
||||||
|
node scripts/syncData.js festivals --endDate=$(date -d "+2 years" +%Y%m%d) >> "$LOG_FILE" 2>&1
|
||||||
|
|
||||||
|
# 펜션 동기화
|
||||||
|
echo "" >> "$LOG_FILE"
|
||||||
|
echo "[펜션 동기화]" >> "$LOG_FILE"
|
||||||
|
node scripts/syncData.js pensions >> "$LOG_FILE" 2>&1
|
||||||
|
|
||||||
|
echo "" >> "$LOG_FILE"
|
||||||
|
echo "============================================" >> "$LOG_FILE"
|
||||||
|
echo "동기화 완료: $(date)" >> "$LOG_FILE"
|
||||||
|
echo "============================================" >> "$LOG_FILE"
|
||||||
|
|
||||||
|
# 오래된 로그 삭제 (30일 이상)
|
||||||
|
find "$LOG_DIR" -name "sync_*.log" -mtime +30 -delete
|
||||||
|
|
||||||
|
echo "Weekly sync completed. Log: $LOG_FILE"
|
||||||
|
|
@ -0,0 +1,311 @@
|
||||||
|
/**
|
||||||
|
* Auto Upload Service
|
||||||
|
*
|
||||||
|
* Beginner/Intermediate 레벨 사용자의 영상 자동 업로드를 처리합니다.
|
||||||
|
* - YouTube, Instagram, TikTok에 자동 업로드
|
||||||
|
* - SEO 데이터 자동 생성 (Gemini 사용)
|
||||||
|
*/
|
||||||
|
|
||||||
|
const db = require('../db');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 레벨에 따른 자동 업로드 설정 확인
|
||||||
|
*/
|
||||||
|
const shouldAutoUpload = async (userId) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const query = `
|
||||||
|
SELECT u.experience_level, ags.auto_youtube, ags.auto_instagram, ags.auto_tiktok
|
||||||
|
FROM users u
|
||||||
|
LEFT JOIN auto_generation_settings ags ON u.id = ags.user_id
|
||||||
|
WHERE u.id = ?
|
||||||
|
`;
|
||||||
|
|
||||||
|
db.get(query, [userId], (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('자동 업로드 설정 조회 실패:', err);
|
||||||
|
return resolve({ shouldUpload: false, platforms: {} });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!row) {
|
||||||
|
return resolve({ shouldUpload: false, platforms: {} });
|
||||||
|
}
|
||||||
|
|
||||||
|
const level = row.experience_level || 'beginner';
|
||||||
|
|
||||||
|
// Beginner/Intermediate는 기본 자동 업로드
|
||||||
|
if (level === 'beginner' || level === 'intermediate') {
|
||||||
|
return resolve({
|
||||||
|
shouldUpload: true,
|
||||||
|
platforms: {
|
||||||
|
youtube: true,
|
||||||
|
instagram: true,
|
||||||
|
tiktok: true
|
||||||
|
},
|
||||||
|
level
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pro는 사용자 설정에 따름
|
||||||
|
if (level === 'pro') {
|
||||||
|
return resolve({
|
||||||
|
shouldUpload: row.auto_youtube || row.auto_instagram || row.auto_tiktok,
|
||||||
|
platforms: {
|
||||||
|
youtube: Boolean(row.auto_youtube),
|
||||||
|
instagram: Boolean(row.auto_instagram),
|
||||||
|
tiktok: Boolean(row.auto_tiktok)
|
||||||
|
},
|
||||||
|
level
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve({ shouldUpload: false, platforms: {} });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SEO 데이터 자동 생성 (Gemini 사용)
|
||||||
|
*/
|
||||||
|
const generateAutoSeo = async (businessInfo, language = 'KO') => {
|
||||||
|
const { GoogleGenerativeAI } = require('@google/generative-ai');
|
||||||
|
const genAI = new GoogleGenerativeAI(process.env.VITE_GEMINI_API_KEY);
|
||||||
|
|
||||||
|
const langPrompts = {
|
||||||
|
KO: {
|
||||||
|
title: '한국어로',
|
||||||
|
tags: '한국어 해시태그',
|
||||||
|
},
|
||||||
|
EN: {
|
||||||
|
title: 'in English',
|
||||||
|
tags: 'English hashtags',
|
||||||
|
},
|
||||||
|
JA: {
|
||||||
|
title: '日本語で',
|
||||||
|
tags: '日本語ハッシュタグ',
|
||||||
|
},
|
||||||
|
ZH: {
|
||||||
|
title: '用中文',
|
||||||
|
tags: '中文标签',
|
||||||
|
},
|
||||||
|
TH: {
|
||||||
|
title: 'ในภาษาไทย',
|
||||||
|
tags: 'แฮชแท็กภาษาไทย',
|
||||||
|
},
|
||||||
|
VI: {
|
||||||
|
title: 'bằng tiếng Việt',
|
||||||
|
tags: 'hashtag tiếng Việt',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const langConfig = langPrompts[language] || langPrompts.KO;
|
||||||
|
|
||||||
|
const prompt = `
|
||||||
|
당신은 펜션/숙소 홍보 영상의 SEO 전문가입니다.
|
||||||
|
아래 정보를 바탕으로 YouTube, Instagram, TikTok용 SEO 데이터를 생성하세요.
|
||||||
|
|
||||||
|
펜션 정보:
|
||||||
|
- 이름: ${businessInfo.name || '펜션'}
|
||||||
|
- 설명: ${businessInfo.description || ''}
|
||||||
|
- 주소: ${businessInfo.address || ''}
|
||||||
|
- 카테고리: ${businessInfo.categories?.join(', ') || ''}
|
||||||
|
|
||||||
|
요구사항:
|
||||||
|
1. title: 매력적인 제목 (${langConfig.title}, 60자 이내)
|
||||||
|
2. description: 상세 설명 (${langConfig.title}, 200자 이내)
|
||||||
|
3. tags: 검색용 태그 10개 (${langConfig.tags}, 쉼표로 구분)
|
||||||
|
4. hashtags: 소셜미디어용 해시태그 15개 (${langConfig.tags}, #포함)
|
||||||
|
|
||||||
|
JSON 형식으로 응답하세요:
|
||||||
|
{
|
||||||
|
"title": "제목",
|
||||||
|
"description": "설명",
|
||||||
|
"tags": ["태그1", "태그2", ...],
|
||||||
|
"hashtags": "#태그1 #태그2 ..."
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
|
||||||
|
const result = await model.generateContent(prompt);
|
||||||
|
const text = result.response.text();
|
||||||
|
|
||||||
|
// JSON 추출
|
||||||
|
const jsonMatch = text.match(/\{[\s\S]*\}/);
|
||||||
|
if (jsonMatch) {
|
||||||
|
return JSON.parse(jsonMatch[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 기본값 반환
|
||||||
|
return {
|
||||||
|
title: `${businessInfo.name || '펜션'} - 힐링 여행`,
|
||||||
|
description: businessInfo.description || '아름다운 펜션에서 특별한 휴식을 경험하세요.',
|
||||||
|
tags: ['펜션', '여행', '힐링', '휴식', '숙소'],
|
||||||
|
hashtags: '#펜션 #여행 #힐링 #휴식 #숙소 #vacation #travel'
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('SEO 자동 생성 실패:', error);
|
||||||
|
return {
|
||||||
|
title: `${businessInfo.name || '펜션'} - 힐링 여행`,
|
||||||
|
description: businessInfo.description || '아름다운 펜션에서 특별한 휴식을 경험하세요.',
|
||||||
|
tags: ['펜션', '여행', '힐링', '휴식', '숙소'],
|
||||||
|
hashtags: '#펜션 #여행 #힐링 #휴식 #숙소 #vacation #travel'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 자동 업로드 실행
|
||||||
|
*/
|
||||||
|
const executeAutoUpload = async (userId, videoPath, businessInfo, language = 'KO') => {
|
||||||
|
const results = {
|
||||||
|
youtube: { success: false, error: null },
|
||||||
|
instagram: { success: false, error: null },
|
||||||
|
tiktok: { success: false, error: null }
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 자동 업로드 설정 확인
|
||||||
|
const uploadConfig = await shouldAutoUpload(userId);
|
||||||
|
|
||||||
|
if (!uploadConfig.shouldUpload) {
|
||||||
|
console.log('자동 업로드 비활성화 - 사용자 설정에 따름');
|
||||||
|
return { skipped: true, reason: '자동 업로드 비활성화됨', results };
|
||||||
|
}
|
||||||
|
|
||||||
|
// SEO 데이터 자동 생성
|
||||||
|
const seoData = await generateAutoSeo(businessInfo, language);
|
||||||
|
console.log('SEO 데이터 생성 완료:', seoData.title);
|
||||||
|
|
||||||
|
// YouTube 업로드
|
||||||
|
if (uploadConfig.platforms.youtube) {
|
||||||
|
try {
|
||||||
|
const youtubeService = require('../youtubeService');
|
||||||
|
const youtubeResult = await youtubeService.uploadVideo(
|
||||||
|
userId,
|
||||||
|
videoPath,
|
||||||
|
seoData.title,
|
||||||
|
seoData.description + '\n\n' + seoData.hashtags,
|
||||||
|
seoData.tags
|
||||||
|
);
|
||||||
|
results.youtube = { success: true, videoId: youtubeResult.videoId };
|
||||||
|
console.log('YouTube 업로드 성공:', youtubeResult.videoId);
|
||||||
|
} catch (ytError) {
|
||||||
|
console.error('YouTube 업로드 실패:', ytError.message);
|
||||||
|
results.youtube = { success: false, error: ytError.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Instagram 업로드
|
||||||
|
if (uploadConfig.platforms.instagram) {
|
||||||
|
try {
|
||||||
|
// Instagram은 비디오를 릴스로 업로드
|
||||||
|
const response = await fetch('http://localhost:5001/upload-reel', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: await getInstagramUsername(userId),
|
||||||
|
video_path: videoPath,
|
||||||
|
caption: seoData.description + '\n\n' + seoData.hashtags
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
results.instagram = { success: true, mediaId: result.media_id };
|
||||||
|
console.log('Instagram 업로드 성공');
|
||||||
|
} else {
|
||||||
|
const errorData = await response.json();
|
||||||
|
results.instagram = { success: false, error: errorData.detail || '업로드 실패' };
|
||||||
|
}
|
||||||
|
} catch (igError) {
|
||||||
|
console.error('Instagram 업로드 실패:', igError.message);
|
||||||
|
results.instagram = { success: false, error: igError.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TikTok 업로드
|
||||||
|
if (uploadConfig.platforms.tiktok) {
|
||||||
|
try {
|
||||||
|
const tiktokService = require('../tiktokService');
|
||||||
|
const tiktokResult = await tiktokService.uploadVideo(
|
||||||
|
userId,
|
||||||
|
videoPath,
|
||||||
|
seoData.description + ' ' + seoData.hashtags
|
||||||
|
);
|
||||||
|
results.tiktok = { success: true, videoId: tiktokResult.videoId };
|
||||||
|
console.log('TikTok 업로드 성공');
|
||||||
|
} catch (ttError) {
|
||||||
|
console.error('TikTok 업로드 실패:', ttError.message);
|
||||||
|
results.tiktok = { success: false, error: ttError.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
skipped: false,
|
||||||
|
level: uploadConfig.level,
|
||||||
|
seoData,
|
||||||
|
results
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('자동 업로드 실행 중 오류:', error);
|
||||||
|
return {
|
||||||
|
skipped: false,
|
||||||
|
error: error.message,
|
||||||
|
results
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자의 Instagram 계정명 가져오기
|
||||||
|
*/
|
||||||
|
const getInstagramUsername = async (userId) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(
|
||||||
|
'SELECT instagram_username FROM social_connections WHERE user_id = ?',
|
||||||
|
[userId],
|
||||||
|
(err, row) => {
|
||||||
|
if (err || !row) {
|
||||||
|
resolve(null);
|
||||||
|
} else {
|
||||||
|
resolve(row.instagram_username);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 업로드 이력 저장
|
||||||
|
*/
|
||||||
|
const saveUploadHistory = async (userId, historyId, platform, result) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const query = `
|
||||||
|
INSERT INTO upload_history (user_id, history_id, platform, status, external_id, error_message, uploaded_at)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, datetime('now'))
|
||||||
|
`;
|
||||||
|
|
||||||
|
db.run(query, [
|
||||||
|
userId,
|
||||||
|
historyId,
|
||||||
|
platform,
|
||||||
|
result.success ? 'success' : 'failed',
|
||||||
|
result.videoId || result.mediaId || null,
|
||||||
|
result.error || null
|
||||||
|
], (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('업로드 이력 저장 실패:', err);
|
||||||
|
}
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
shouldAutoUpload,
|
||||||
|
generateAutoSeo,
|
||||||
|
executeAutoUpload,
|
||||||
|
saveUploadHistory
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,445 @@
|
||||||
|
/**
|
||||||
|
* 축제 서비스
|
||||||
|
* TourAPI 축제 데이터 동기화 및 관리
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { tourApiClient, AREA_CODE, AREA_NAME } = require('./tourApiClient');
|
||||||
|
|
||||||
|
class FestivalService {
|
||||||
|
constructor(db) {
|
||||||
|
this.db = db;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 축제 데이터 동기화
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 전체 축제 동기화 (향후 6개월)
|
||||||
|
*/
|
||||||
|
async syncAllFestivals() {
|
||||||
|
console.log('=== 축제 데이터 동기화 시작 ===');
|
||||||
|
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
const endDate = tourApiClient.getDateAfterMonths(6);
|
||||||
|
|
||||||
|
let totalSynced = 0;
|
||||||
|
let pageNo = 1;
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
try {
|
||||||
|
const result = await tourApiClient.searchFestival({
|
||||||
|
eventStartDate: today,
|
||||||
|
eventEndDate: endDate,
|
||||||
|
numOfRows: 100,
|
||||||
|
pageNo,
|
||||||
|
arrange: 'A',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!result.items || result.items.length === 0) break;
|
||||||
|
|
||||||
|
// 배열로 변환 (단일 아이템일 경우)
|
||||||
|
const items = Array.isArray(result.items) ? result.items : [result.items];
|
||||||
|
|
||||||
|
for (const item of items) {
|
||||||
|
await this.upsertFestival(item);
|
||||||
|
totalSynced++;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(` - 페이지 ${pageNo}: ${items.length}건 처리`);
|
||||||
|
|
||||||
|
if (items.length < 100) break;
|
||||||
|
pageNo++;
|
||||||
|
|
||||||
|
// API 호출 제한 대응
|
||||||
|
await this.sleep(100);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(` - 페이지 ${pageNo} 에러:`, error.message);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`=== 축제 동기화 완료: ${totalSynced}건 ===`);
|
||||||
|
return totalSynced;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 특정 지역 축제 동기화
|
||||||
|
*/
|
||||||
|
async syncFestivalsByArea(areaCode) {
|
||||||
|
console.log(`=== ${AREA_NAME[areaCode] || areaCode} 축제 동기화 ===`);
|
||||||
|
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
const endDate = tourApiClient.getDateAfterMonths(6);
|
||||||
|
|
||||||
|
let totalSynced = 0;
|
||||||
|
let pageNo = 1;
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
const result = await tourApiClient.searchFestival({
|
||||||
|
eventStartDate: today,
|
||||||
|
eventEndDate: endDate,
|
||||||
|
areaCode,
|
||||||
|
numOfRows: 100,
|
||||||
|
pageNo,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!result.items || result.items.length === 0) break;
|
||||||
|
|
||||||
|
const items = Array.isArray(result.items) ? result.items : [result.items];
|
||||||
|
|
||||||
|
for (const item of items) {
|
||||||
|
await this.upsertFestival(item);
|
||||||
|
totalSynced++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items.length < 100) break;
|
||||||
|
pageNo++;
|
||||||
|
await this.sleep(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
return totalSynced;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 축제 데이터 저장/업데이트
|
||||||
|
*/
|
||||||
|
async upsertFestival(item) {
|
||||||
|
const exists = await this.db.get(
|
||||||
|
'SELECT id FROM festivals WHERE content_id = ?',
|
||||||
|
[item.contentid]
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
content_id: item.contentid,
|
||||||
|
content_type_id: item.contenttypeid || '15',
|
||||||
|
title: item.title,
|
||||||
|
addr1: item.addr1,
|
||||||
|
addr2: item.addr2,
|
||||||
|
area_code: item.areacode,
|
||||||
|
sigungu_code: item.sigungucode,
|
||||||
|
sido: AREA_NAME[item.areacode] || null,
|
||||||
|
mapx: item.mapx ? parseFloat(item.mapx) : null,
|
||||||
|
mapy: item.mapy ? parseFloat(item.mapy) : null,
|
||||||
|
event_start_date: item.eventstartdate,
|
||||||
|
event_end_date: item.eventenddate,
|
||||||
|
first_image: item.firstimage,
|
||||||
|
first_image2: item.firstimage2,
|
||||||
|
tel: item.tel,
|
||||||
|
last_synced_at: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
await this.db.run(`
|
||||||
|
UPDATE festivals SET
|
||||||
|
title = ?, addr1 = ?, addr2 = ?, area_code = ?, sigungu_code = ?, sido = ?,
|
||||||
|
mapx = ?, mapy = ?, event_start_date = ?, event_end_date = ?,
|
||||||
|
first_image = ?, first_image2 = ?, tel = ?, last_synced_at = ?,
|
||||||
|
updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE content_id = ?
|
||||||
|
`, [
|
||||||
|
data.title, data.addr1, data.addr2, data.area_code, data.sigungu_code, data.sido,
|
||||||
|
data.mapx, data.mapy, data.event_start_date, data.event_end_date,
|
||||||
|
data.first_image, data.first_image2, data.tel, data.last_synced_at,
|
||||||
|
data.content_id
|
||||||
|
]);
|
||||||
|
return { action: 'updated', id: exists.id };
|
||||||
|
} else {
|
||||||
|
const result = await this.db.run(`
|
||||||
|
INSERT INTO festivals (
|
||||||
|
content_id, content_type_id, title, addr1, addr2, area_code, sigungu_code, sido,
|
||||||
|
mapx, mapy, event_start_date, event_end_date, first_image, first_image2,
|
||||||
|
tel, last_synced_at
|
||||||
|
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||||
|
`, [
|
||||||
|
data.content_id, data.content_type_id, data.title, data.addr1, data.addr2,
|
||||||
|
data.area_code, data.sigungu_code, data.sido, data.mapx, data.mapy,
|
||||||
|
data.event_start_date, data.event_end_date, data.first_image, data.first_image2,
|
||||||
|
data.tel, data.last_synced_at
|
||||||
|
]);
|
||||||
|
return { action: 'inserted', id: result.lastID };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 축제 상세 정보 업데이트
|
||||||
|
*/
|
||||||
|
async fetchAndUpdateDetail(contentId) {
|
||||||
|
try {
|
||||||
|
const detail = await tourApiClient.getFestivalDetail(contentId);
|
||||||
|
|
||||||
|
const { common, intro } = detail;
|
||||||
|
|
||||||
|
await this.db.run(`
|
||||||
|
UPDATE festivals SET
|
||||||
|
overview = ?,
|
||||||
|
homepage = ?,
|
||||||
|
place = ?,
|
||||||
|
place_info = ?,
|
||||||
|
play_time = ?,
|
||||||
|
program = ?,
|
||||||
|
use_fee = ?,
|
||||||
|
age_limit = ?,
|
||||||
|
sponsor1 = ?,
|
||||||
|
sponsor1_tel = ?,
|
||||||
|
sponsor2 = ?,
|
||||||
|
sponsor2_tel = ?,
|
||||||
|
sub_event = ?,
|
||||||
|
booking_place = ?,
|
||||||
|
updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE content_id = ?
|
||||||
|
`, [
|
||||||
|
common.overview,
|
||||||
|
common.homepage,
|
||||||
|
intro.eventplace,
|
||||||
|
intro.placeinfo,
|
||||||
|
intro.playtime,
|
||||||
|
intro.program,
|
||||||
|
intro.usetimefestival,
|
||||||
|
intro.agelimit,
|
||||||
|
intro.sponsor1,
|
||||||
|
intro.sponsor1tel,
|
||||||
|
intro.sponsor2,
|
||||||
|
intro.sponsor2tel,
|
||||||
|
intro.subevent,
|
||||||
|
intro.bookingplace,
|
||||||
|
contentId
|
||||||
|
]);
|
||||||
|
|
||||||
|
return detail;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`축제 상세 조회 실패 (${contentId}):`, error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 축제 조회
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 활성 축제 목록 (종료되지 않은)
|
||||||
|
*/
|
||||||
|
async getActiveFestivals(options = {}) {
|
||||||
|
const {
|
||||||
|
areaCode = null,
|
||||||
|
limit = 20,
|
||||||
|
offset = 0,
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
|
||||||
|
let query = `
|
||||||
|
SELECT * FROM festivals
|
||||||
|
WHERE is_active = 1
|
||||||
|
AND event_end_date >= ?
|
||||||
|
`;
|
||||||
|
const params = [today];
|
||||||
|
|
||||||
|
if (areaCode) {
|
||||||
|
query += ' AND area_code = ?';
|
||||||
|
params.push(areaCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
query += ' ORDER BY event_start_date ASC LIMIT ? OFFSET ?';
|
||||||
|
params.push(limit, offset);
|
||||||
|
|
||||||
|
return this.db.all(query, params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 진행중인 축제
|
||||||
|
*/
|
||||||
|
async getOngoingFestivals(areaCode = null, limit = 20) {
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
|
||||||
|
let query = `
|
||||||
|
SELECT * FROM festivals
|
||||||
|
WHERE is_active = 1
|
||||||
|
AND event_start_date <= ?
|
||||||
|
AND event_end_date >= ?
|
||||||
|
`;
|
||||||
|
const params = [today, today];
|
||||||
|
|
||||||
|
if (areaCode) {
|
||||||
|
query += ' AND area_code = ?';
|
||||||
|
params.push(areaCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
query += ' ORDER BY event_end_date ASC LIMIT ?';
|
||||||
|
params.push(limit);
|
||||||
|
|
||||||
|
return this.db.all(query, params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 예정 축제
|
||||||
|
*/
|
||||||
|
async getUpcomingFestivals(areaCode = null, limit = 20) {
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
|
||||||
|
let query = `
|
||||||
|
SELECT * FROM festivals
|
||||||
|
WHERE is_active = 1
|
||||||
|
AND event_start_date > ?
|
||||||
|
`;
|
||||||
|
const params = [today];
|
||||||
|
|
||||||
|
if (areaCode) {
|
||||||
|
query += ' AND area_code = ?';
|
||||||
|
params.push(areaCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
query += ' ORDER BY event_start_date ASC LIMIT ?';
|
||||||
|
params.push(limit);
|
||||||
|
|
||||||
|
return this.db.all(query, params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 축제 상세 조회
|
||||||
|
*/
|
||||||
|
async getFestivalById(id) {
|
||||||
|
const festival = await this.db.get('SELECT * FROM festivals WHERE id = ?', [id]);
|
||||||
|
|
||||||
|
if (festival && !festival.overview) {
|
||||||
|
// 상세 정보가 없으면 API에서 가져오기
|
||||||
|
await this.fetchAndUpdateDetail(festival.content_id);
|
||||||
|
return this.db.get('SELECT * FROM festivals WHERE id = ?', [id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return festival;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* content_id로 축제 조회
|
||||||
|
*/
|
||||||
|
async getFestivalByContentId(contentId) {
|
||||||
|
return this.db.get('SELECT * FROM festivals WHERE content_id = ?', [contentId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 축제 검색
|
||||||
|
*/
|
||||||
|
async searchFestivals(keyword, limit = 20) {
|
||||||
|
return this.db.all(`
|
||||||
|
SELECT * FROM festivals
|
||||||
|
WHERE is_active = 1
|
||||||
|
AND (title LIKE ? OR addr1 LIKE ?)
|
||||||
|
AND event_end_date >= ?
|
||||||
|
ORDER BY event_start_date ASC
|
||||||
|
LIMIT ?
|
||||||
|
`, [`%${keyword}%`, `%${keyword}%`, tourApiClient.getTodayString(), limit]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 월별 축제 조회
|
||||||
|
*/
|
||||||
|
async getFestivalsByMonth(year, month) {
|
||||||
|
const startDate = `${year}${String(month).padStart(2, '0')}01`;
|
||||||
|
const endDate = `${year}${String(month).padStart(2, '0')}31`;
|
||||||
|
|
||||||
|
return this.db.all(`
|
||||||
|
SELECT * FROM festivals
|
||||||
|
WHERE is_active = 1
|
||||||
|
AND event_start_date <= ?
|
||||||
|
AND event_end_date >= ?
|
||||||
|
ORDER BY event_start_date ASC
|
||||||
|
`, [endDate, startDate]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 지역별 축제 통계
|
||||||
|
*/
|
||||||
|
async getFestivalStatsByRegion() {
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
|
||||||
|
return this.db.all(`
|
||||||
|
SELECT
|
||||||
|
area_code,
|
||||||
|
sido,
|
||||||
|
COUNT(*) as total,
|
||||||
|
SUM(CASE WHEN event_start_date <= ? AND event_end_date >= ? THEN 1 ELSE 0 END) as ongoing,
|
||||||
|
SUM(CASE WHEN event_start_date > ? THEN 1 ELSE 0 END) as upcoming
|
||||||
|
FROM festivals
|
||||||
|
WHERE is_active = 1 AND event_end_date >= ?
|
||||||
|
GROUP BY area_code
|
||||||
|
ORDER BY total DESC
|
||||||
|
`, [today, today, today, today]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 좌표 기반 조회
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 좌표 근처 축제 조회 (DB에서)
|
||||||
|
*/
|
||||||
|
async getNearbyFestivals(mapX, mapY, radiusKm = 50) {
|
||||||
|
const today = tourApiClient.getTodayString();
|
||||||
|
|
||||||
|
// 대략적인 위경도 범위 계산 (1도 ≈ 111km)
|
||||||
|
const latRange = radiusKm / 111;
|
||||||
|
const lngRange = radiusKm / 88; // 한국 위도 기준
|
||||||
|
|
||||||
|
const festivals = await this.db.all(`
|
||||||
|
SELECT * FROM festivals
|
||||||
|
WHERE is_active = 1
|
||||||
|
AND event_end_date >= ?
|
||||||
|
AND mapx IS NOT NULL AND mapy IS NOT NULL
|
||||||
|
AND mapy BETWEEN ? AND ?
|
||||||
|
AND mapx BETWEEN ? AND ?
|
||||||
|
`, [
|
||||||
|
today,
|
||||||
|
mapY - latRange, mapY + latRange,
|
||||||
|
mapX - lngRange, mapX + lngRange,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 정확한 거리 계산 및 필터링
|
||||||
|
return festivals
|
||||||
|
.map(f => ({
|
||||||
|
...f,
|
||||||
|
distance_km: this.calculateDistance(mapY, mapX, f.mapy, f.mapx),
|
||||||
|
}))
|
||||||
|
.filter(f => f.distance_km <= radiusKm)
|
||||||
|
.sort((a, b) => a.distance_km - b.distance_km);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 좌표 근처 축제 조회 (API 직접)
|
||||||
|
*/
|
||||||
|
async getNearbyFestivalsFromApi(mapX, mapY, radius = 20000) {
|
||||||
|
return tourApiClient.getNearbyFestivals(mapX, mapY, radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 유틸리티
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Haversine 공식으로 거리 계산 (km)
|
||||||
|
*/
|
||||||
|
calculateDistance(lat1, lon1, lat2, lon2) {
|
||||||
|
const R = 6371; // 지구 반경 (km)
|
||||||
|
const dLat = this.toRad(lat2 - lat1);
|
||||||
|
const dLon = this.toRad(lon2 - lon1);
|
||||||
|
|
||||||
|
const a =
|
||||||
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||||
|
Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) *
|
||||||
|
Math.sin(dLon / 2) * Math.sin(dLon / 2);
|
||||||
|
|
||||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||||
|
return Math.round(R * c * 100) / 100; // 소수점 2자리
|
||||||
|
}
|
||||||
|
|
||||||
|
toRad(deg) {
|
||||||
|
return deg * (Math.PI / 180);
|
||||||
|
}
|
||||||
|
|
||||||
|
sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = FestivalService;
|
||||||
|
|
@ -0,0 +1,355 @@
|
||||||
|
/**
|
||||||
|
* Geocoding 서비스
|
||||||
|
* 카카오 Local API를 사용한 주소 ↔ 좌표 변환
|
||||||
|
*
|
||||||
|
* 문서: https://developers.kakao.com/docs/latest/ko/local/dev-guide
|
||||||
|
*/
|
||||||
|
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
class GeocodingService {
|
||||||
|
constructor() {
|
||||||
|
this.baseUrl = 'https://dapi.kakao.com/v2/local';
|
||||||
|
this.apiKey = process.env.KAKAO_REST_KEY;
|
||||||
|
|
||||||
|
this.client = axios.create({
|
||||||
|
baseURL: this.baseUrl,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
Authorization: `KakaoAK ${this.apiKey}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 주소 → 좌표 변환 (Geocoding)
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 주소를 좌표로 변환
|
||||||
|
* @param {string} address - 주소 문자열
|
||||||
|
* @returns {Object|null} { mapx, mapy, address, sido, sigungu, ... }
|
||||||
|
*/
|
||||||
|
async geocode(address) {
|
||||||
|
try {
|
||||||
|
const response = await this.client.get('/search/address.json', {
|
||||||
|
params: { query: address },
|
||||||
|
});
|
||||||
|
|
||||||
|
const documents = response.data.documents;
|
||||||
|
if (!documents || documents.length === 0) {
|
||||||
|
console.log(`Geocoding: 결과 없음 - "${address}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = documents[0];
|
||||||
|
const addr = result.address || {};
|
||||||
|
|
||||||
|
return {
|
||||||
|
mapx: parseFloat(result.x), // 경도 (longitude)
|
||||||
|
mapy: parseFloat(result.y), // 위도 (latitude)
|
||||||
|
address: result.address_name, // 전체 주소
|
||||||
|
addressType: result.address_type, // REGION, ROAD, ROAD_ADDR
|
||||||
|
sido: addr.region_1depth_name || null, // 시도
|
||||||
|
sigungu: addr.region_2depth_name || null, // 시군구
|
||||||
|
eupmyeondong: addr.region_3depth_name || null, // 읍면동
|
||||||
|
bCode: addr.b_code || null, // 법정동 코드
|
||||||
|
hCode: addr.h_code || null, // 행정동 코드
|
||||||
|
roadAddress: result.road_address?.address_name || null,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Geocoding 실패:', address, error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 도로명 주소 검색
|
||||||
|
*/
|
||||||
|
async geocodeRoad(address) {
|
||||||
|
try {
|
||||||
|
const response = await this.client.get('/search/address.json', {
|
||||||
|
params: {
|
||||||
|
query: address,
|
||||||
|
analyze_type: 'exact', // 정확히 일치
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const documents = response.data.documents;
|
||||||
|
if (!documents || documents.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 도로명 주소 결과 우선
|
||||||
|
const roadResult = documents.find(d => d.road_address);
|
||||||
|
if (roadResult) {
|
||||||
|
const road = roadResult.road_address;
|
||||||
|
return {
|
||||||
|
mapx: parseFloat(roadResult.x),
|
||||||
|
mapy: parseFloat(roadResult.y),
|
||||||
|
address: road.address_name,
|
||||||
|
roadAddress: road.address_name,
|
||||||
|
sido: road.region_1depth_name,
|
||||||
|
sigungu: road.region_2depth_name,
|
||||||
|
eupmyeondong: road.region_3depth_name,
|
||||||
|
roadName: road.road_name,
|
||||||
|
buildingName: road.building_name,
|
||||||
|
zoneNo: road.zone_no, // 우편번호
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.geocode(address);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('도로명 Geocoding 실패:', error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 좌표 → 주소 변환 (역지오코딩)
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 좌표를 주소로 변환
|
||||||
|
* @param {number} mapx - 경도 (longitude)
|
||||||
|
* @param {number} mapy - 위도 (latitude)
|
||||||
|
*/
|
||||||
|
async reverseGeocode(mapx, mapy) {
|
||||||
|
try {
|
||||||
|
const response = await this.client.get('/geo/coord2address.json', {
|
||||||
|
params: {
|
||||||
|
x: mapx,
|
||||||
|
y: mapy,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const documents = response.data.documents;
|
||||||
|
if (!documents || documents.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = documents[0];
|
||||||
|
const addr = result.address || {};
|
||||||
|
const road = result.road_address;
|
||||||
|
|
||||||
|
return {
|
||||||
|
address: addr.address_name,
|
||||||
|
roadAddress: road?.address_name || null,
|
||||||
|
sido: addr.region_1depth_name, // 시도
|
||||||
|
sigungu: addr.region_2depth_name, // 시군구
|
||||||
|
eupmyeondong: addr.region_3depth_name, // 읍면동
|
||||||
|
hCode: addr.h_code, // 행정동 코드
|
||||||
|
bCode: addr.b_code, // 법정동 코드
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('역지오코딩 실패:', mapx, mapy, error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 좌표로 행정구역 정보만 조회
|
||||||
|
*/
|
||||||
|
async getRegionByCoord(mapx, mapy) {
|
||||||
|
try {
|
||||||
|
const response = await this.client.get('/geo/coord2regioncode.json', {
|
||||||
|
params: {
|
||||||
|
x: mapx,
|
||||||
|
y: mapy,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const documents = response.data.documents;
|
||||||
|
if (!documents || documents.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// B: 법정동, H: 행정동
|
||||||
|
const bDong = documents.find(d => d.region_type === 'B');
|
||||||
|
const hDong = documents.find(d => d.region_type === 'H');
|
||||||
|
|
||||||
|
return {
|
||||||
|
sido: bDong?.region_1depth_name || hDong?.region_1depth_name,
|
||||||
|
sigungu: bDong?.region_2depth_name || hDong?.region_2depth_name,
|
||||||
|
eupmyeondong: bDong?.region_3depth_name || hDong?.region_3depth_name,
|
||||||
|
bCode: bDong?.code,
|
||||||
|
hCode: hDong?.code,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('행정구역 조회 실패:', error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 키워드 검색
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 키워드로 장소 검색
|
||||||
|
* @param {string} keyword - 검색어 (예: "가평 펜션")
|
||||||
|
* @param {Object} options - { x, y, radius, page, size }
|
||||||
|
*/
|
||||||
|
async searchKeyword(keyword, options = {}) {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
query: keyword,
|
||||||
|
page: options.page || 1,
|
||||||
|
size: options.size || 15,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 중심 좌표가 있으면 거리순 정렬
|
||||||
|
if (options.x && options.y) {
|
||||||
|
params.x = options.x;
|
||||||
|
params.y = options.y;
|
||||||
|
params.sort = 'distance';
|
||||||
|
if (options.radius) {
|
||||||
|
params.radius = Math.min(options.radius, 20000); // 최대 20km
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await this.client.get('/search/keyword.json', params);
|
||||||
|
|
||||||
|
return {
|
||||||
|
places: response.data.documents.map(place => ({
|
||||||
|
id: place.id,
|
||||||
|
name: place.place_name,
|
||||||
|
category: place.category_name,
|
||||||
|
phone: place.phone,
|
||||||
|
address: place.address_name,
|
||||||
|
roadAddress: place.road_address_name,
|
||||||
|
mapx: parseFloat(place.x),
|
||||||
|
mapy: parseFloat(place.y),
|
||||||
|
placeUrl: place.place_url,
|
||||||
|
distance: place.distance ? parseInt(place.distance) : null,
|
||||||
|
})),
|
||||||
|
meta: response.data.meta,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('키워드 검색 실패:', error.message);
|
||||||
|
return { places: [], meta: {} };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 펜션 검색 (지역 + 펜션 키워드)
|
||||||
|
*/
|
||||||
|
async searchPensions(region, options = {}) {
|
||||||
|
return this.searchKeyword(`${region} 펜션`, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 지역코드 매핑
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시도명 → TourAPI 지역코드 변환
|
||||||
|
*/
|
||||||
|
getAreaCode(sido) {
|
||||||
|
const areaCodeMap = {
|
||||||
|
'서울': '1', '서울특별시': '1',
|
||||||
|
'인천': '2', '인천광역시': '2',
|
||||||
|
'대전': '3', '대전광역시': '3',
|
||||||
|
'대구': '4', '대구광역시': '4',
|
||||||
|
'광주': '5', '광주광역시': '5',
|
||||||
|
'부산': '6', '부산광역시': '6',
|
||||||
|
'울산': '7', '울산광역시': '7',
|
||||||
|
'세종': '8', '세종특별자치시': '8',
|
||||||
|
'경기': '31', '경기도': '31',
|
||||||
|
'강원': '32', '강원도': '32', '강원특별자치도': '32',
|
||||||
|
'충북': '33', '충청북도': '33',
|
||||||
|
'충남': '34', '충청남도': '34',
|
||||||
|
'경북': '35', '경상북도': '35',
|
||||||
|
'경남': '36', '경상남도': '36',
|
||||||
|
'전북': '37', '전라북도': '37', '전북특별자치도': '37',
|
||||||
|
'전남': '38', '전라남도': '38',
|
||||||
|
'제주': '39', '제주특별자치도': '39',
|
||||||
|
};
|
||||||
|
|
||||||
|
return areaCodeMap[sido] || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 좌표에서 TourAPI 지역코드 조회
|
||||||
|
*/
|
||||||
|
async getAreaCodeFromCoords(mapx, mapy) {
|
||||||
|
const region = await this.getRegionByCoord(mapx, mapy);
|
||||||
|
if (!region) return null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
areaCode: this.getAreaCode(region.sido),
|
||||||
|
sido: region.sido,
|
||||||
|
sigungu: region.sigungu,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 주소 파싱 유틸리티
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 주소 문자열에서 시도/시군구 추출
|
||||||
|
*/
|
||||||
|
parseAddress(address) {
|
||||||
|
if (!address) return { sido: null, sigungu: null };
|
||||||
|
|
||||||
|
const sidoPatterns = [
|
||||||
|
{ pattern: /^(서울특별시|서울)/, name: '서울' },
|
||||||
|
{ pattern: /^(부산광역시|부산)/, name: '부산' },
|
||||||
|
{ pattern: /^(대구광역시|대구)/, name: '대구' },
|
||||||
|
{ pattern: /^(인천광역시|인천)/, name: '인천' },
|
||||||
|
{ pattern: /^(광주광역시|광주)/, name: '광주' },
|
||||||
|
{ pattern: /^(대전광역시|대전)/, name: '대전' },
|
||||||
|
{ pattern: /^(울산광역시|울산)/, name: '울산' },
|
||||||
|
{ pattern: /^(세종특별자치시|세종)/, name: '세종' },
|
||||||
|
{ pattern: /^(경기도|경기)/, name: '경기' },
|
||||||
|
{ pattern: /^(강원특별자치도|강원도|강원)/, name: '강원' },
|
||||||
|
{ pattern: /^(충청북도|충북)/, name: '충북' },
|
||||||
|
{ pattern: /^(충청남도|충남)/, name: '충남' },
|
||||||
|
{ pattern: /^(전북특별자치도|전라북도|전북)/, name: '전북' },
|
||||||
|
{ pattern: /^(전라남도|전남)/, name: '전남' },
|
||||||
|
{ pattern: /^(경상북도|경북)/, name: '경북' },
|
||||||
|
{ pattern: /^(경상남도|경남)/, name: '경남' },
|
||||||
|
{ pattern: /^(제주특별자치도|제주)/, name: '제주' },
|
||||||
|
];
|
||||||
|
|
||||||
|
let sido = null;
|
||||||
|
let sigungu = null;
|
||||||
|
|
||||||
|
for (const { pattern, name } of sidoPatterns) {
|
||||||
|
const match = address.match(pattern);
|
||||||
|
if (match) {
|
||||||
|
sido = name;
|
||||||
|
|
||||||
|
// 시군구 추출
|
||||||
|
const remaining = address.slice(match[0].length).trim();
|
||||||
|
const sigunguMatch = remaining.match(/^([가-힣]+[시군구])/);
|
||||||
|
if (sigunguMatch) {
|
||||||
|
sigungu = sigunguMatch[1];
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { sido, sigungu, areaCode: this.getAreaCode(sido) };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 주소 정규화 (검색용)
|
||||||
|
*/
|
||||||
|
normalizeAddress(address) {
|
||||||
|
if (!address) return '';
|
||||||
|
return address
|
||||||
|
.replace(/특별시|광역시|특별자치시|특별자치도/g, '')
|
||||||
|
.replace(/\s+/g, ' ')
|
||||||
|
.trim();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 싱글톤 인스턴스
|
||||||
|
const geocodingService = new GeocodingService();
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
geocodingService,
|
||||||
|
GeocodingService,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,249 @@
|
||||||
|
/**
|
||||||
|
* Scheduler Service
|
||||||
|
*
|
||||||
|
* 주간 자동 영상 생성을 위한 cron job 스케줄러
|
||||||
|
* - 매 시간마다 예약된 작업 확인
|
||||||
|
* - generation_queue에 작업 추가
|
||||||
|
* - 워커가 순차적으로 처리
|
||||||
|
*/
|
||||||
|
|
||||||
|
const cron = require('node-cron');
|
||||||
|
const db = require('../db');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 예약된 자동 생성 작업 확인
|
||||||
|
*/
|
||||||
|
const getPendingGenerationJobs = () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
db.all(`
|
||||||
|
SELECT ags.*, u.username, u.email, pp.brand_name, pp.description, pp.address, pp.pension_types
|
||||||
|
FROM auto_generation_settings ags
|
||||||
|
JOIN users u ON ags.user_id = u.id
|
||||||
|
LEFT JOIN pension_profiles pp ON ags.pension_id = pp.id
|
||||||
|
WHERE ags.enabled = 1
|
||||||
|
AND ags.next_scheduled_at <= ?
|
||||||
|
AND NOT EXISTS (
|
||||||
|
SELECT 1 FROM generation_queue gq
|
||||||
|
WHERE gq.user_id = ags.user_id
|
||||||
|
AND gq.status IN ('pending', 'processing')
|
||||||
|
)
|
||||||
|
`, [now], (err, rows) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('예약 작업 조회 실패:', err);
|
||||||
|
return resolve([]);
|
||||||
|
}
|
||||||
|
resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 작업 큐에 추가
|
||||||
|
*/
|
||||||
|
const addToQueue = (userId, pensionId) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO generation_queue (user_id, pension_id, status, scheduled_at)
|
||||||
|
VALUES (?, ?, 'pending', datetime('now'))
|
||||||
|
`, [userId, pensionId], function(err) {
|
||||||
|
if (err) {
|
||||||
|
console.error('큐 추가 실패:', err);
|
||||||
|
return resolve(null);
|
||||||
|
}
|
||||||
|
resolve(this.lastID);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 다음 예약 시간 업데이트
|
||||||
|
*/
|
||||||
|
const updateNextScheduledTime = (userId, dayOfWeek, timeOfDay) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const now = new Date();
|
||||||
|
const [hours, minutes] = (timeOfDay || '09:00').split(':').map(Number);
|
||||||
|
|
||||||
|
let next = new Date(now);
|
||||||
|
next.setHours(hours, minutes, 0, 0);
|
||||||
|
|
||||||
|
// 다음 주 같은 요일로 설정
|
||||||
|
const daysUntilNext = (dayOfWeek - now.getDay() + 7) % 7 || 7;
|
||||||
|
next.setDate(next.getDate() + daysUntilNext);
|
||||||
|
|
||||||
|
const nextIso = next.toISOString();
|
||||||
|
|
||||||
|
db.run(`
|
||||||
|
UPDATE auto_generation_settings
|
||||||
|
SET next_scheduled_at = ?, last_generated_at = datetime('now')
|
||||||
|
WHERE user_id = ?
|
||||||
|
`, [nextIso, userId], (err) => {
|
||||||
|
if (err) console.error('다음 예약 시간 업데이트 실패:', err);
|
||||||
|
resolve(nextIso);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 큐에서 대기 중인 작업 처리
|
||||||
|
*/
|
||||||
|
const processPendingQueue = async () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT gq.*, pp.brand_name, pp.description, pp.address, pp.pension_types, pp.user_id
|
||||||
|
FROM generation_queue gq
|
||||||
|
LEFT JOIN pension_profiles pp ON gq.pension_id = pp.id
|
||||||
|
WHERE gq.status = 'pending'
|
||||||
|
ORDER BY gq.scheduled_at ASC
|
||||||
|
LIMIT 1
|
||||||
|
`, async (err, job) => {
|
||||||
|
if (err || !job) {
|
||||||
|
return resolve(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`[Scheduler] 작업 처리 시작: 사용자 ${job.user_id}, 펜션 ${job.pension_id}`);
|
||||||
|
|
||||||
|
// 상태를 processing으로 변경
|
||||||
|
db.run(`
|
||||||
|
UPDATE generation_queue
|
||||||
|
SET status = 'processing', started_at = datetime('now')
|
||||||
|
WHERE id = ?
|
||||||
|
`, [job.id]);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 영상 생성 로직 실행
|
||||||
|
const result = await generateVideoForJob(job);
|
||||||
|
|
||||||
|
// 성공 시 상태 업데이트
|
||||||
|
db.run(`
|
||||||
|
UPDATE generation_queue
|
||||||
|
SET status = 'completed', completed_at = datetime('now'),
|
||||||
|
result_video_path = ?, result_history_id = ?
|
||||||
|
WHERE id = ?
|
||||||
|
`, [result.videoPath, result.historyId, job.id]);
|
||||||
|
|
||||||
|
console.log(`[Scheduler] 작업 완료: ${job.id}`);
|
||||||
|
resolve(result);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[Scheduler] 작업 실패: ${job.id}`, error);
|
||||||
|
|
||||||
|
// 실패 시 상태 업데이트
|
||||||
|
db.run(`
|
||||||
|
UPDATE generation_queue
|
||||||
|
SET status = 'failed', completed_at = datetime('now'),
|
||||||
|
error_message = ?
|
||||||
|
WHERE id = ?
|
||||||
|
`, [error.message, job.id]);
|
||||||
|
|
||||||
|
resolve(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 실제 영상 생성 실행
|
||||||
|
* TODO: 실제 영상 생성 로직과 연동 필요
|
||||||
|
*/
|
||||||
|
const generateVideoForJob = async (job) => {
|
||||||
|
// 펜션 정보 기반으로 영상 생성
|
||||||
|
const businessInfo = {
|
||||||
|
name: job.brand_name || '펜션',
|
||||||
|
description: job.description || '',
|
||||||
|
address: job.address || '',
|
||||||
|
pensionCategories: job.pension_types ? JSON.parse(job.pension_types) : []
|
||||||
|
};
|
||||||
|
|
||||||
|
// 실제 영상 생성 API 호출 (내부 API 사용)
|
||||||
|
// 현재는 placeholder - 실제 구현 시 render API 호출 필요
|
||||||
|
console.log('[Scheduler] 영상 생성 요청:', businessInfo.name);
|
||||||
|
|
||||||
|
// TODO: 실제 영상 생성 로직 구현
|
||||||
|
// const response = await fetch('http://localhost:3001/render', { ... });
|
||||||
|
|
||||||
|
return {
|
||||||
|
videoPath: null, // 실제 생성된 비디오 경로
|
||||||
|
historyId: null // 히스토리 ID
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 스케줄러 시작
|
||||||
|
*/
|
||||||
|
const startScheduler = () => {
|
||||||
|
console.log('[Scheduler] 자동 생성 스케줄러 시작');
|
||||||
|
|
||||||
|
// 매 시간 정각에 실행 (0분)
|
||||||
|
cron.schedule('0 * * * *', async () => {
|
||||||
|
console.log(`[Scheduler] 예약 작업 확인 중... ${new Date().toISOString()}`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 예약된 작업 확인
|
||||||
|
const pendingJobs = await getPendingGenerationJobs();
|
||||||
|
console.log(`[Scheduler] ${pendingJobs.length}개의 예약 작업 발견`);
|
||||||
|
|
||||||
|
for (const job of pendingJobs) {
|
||||||
|
// 큐에 작업 추가
|
||||||
|
await addToQueue(job.user_id, job.pension_id);
|
||||||
|
|
||||||
|
// 다음 예약 시간 업데이트
|
||||||
|
await updateNextScheduledTime(job.user_id, job.day_of_week, job.time_of_day);
|
||||||
|
|
||||||
|
console.log(`[Scheduler] 작업 예약됨: 사용자 ${job.user_id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 대기 중인 작업 처리
|
||||||
|
await processPendingQueue();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Scheduler] 스케줄러 오류:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 10분마다 큐 처리 (백업)
|
||||||
|
cron.schedule('*/10 * * * *', async () => {
|
||||||
|
try {
|
||||||
|
await processPendingQueue();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Scheduler] 큐 처리 오류:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('[Scheduler] 스케줄러 등록 완료 - 매 시간 정각에 실행');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 수동으로 특정 사용자의 자동 생성 실행
|
||||||
|
*/
|
||||||
|
const triggerManualGeneration = async (userId) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT ags.*, pp.id as pension_id
|
||||||
|
FROM auto_generation_settings ags
|
||||||
|
LEFT JOIN pension_profiles pp ON ags.pension_id = pp.id OR (pp.user_id = ags.user_id AND pp.is_default = 1)
|
||||||
|
WHERE ags.user_id = ?
|
||||||
|
`, [userId], async (err, settings) => {
|
||||||
|
if (err || !settings) {
|
||||||
|
return reject(new Error('자동 생성 설정을 찾을 수 없습니다.'));
|
||||||
|
}
|
||||||
|
|
||||||
|
const queueId = await addToQueue(userId, settings.pension_id);
|
||||||
|
if (!queueId) {
|
||||||
|
return reject(new Error('큐 추가 실패'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 즉시 처리
|
||||||
|
const result = await processPendingQueue();
|
||||||
|
resolve(result);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
startScheduler,
|
||||||
|
getPendingGenerationJobs,
|
||||||
|
processPendingQueue,
|
||||||
|
triggerManualGeneration
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,439 @@
|
||||||
|
/**
|
||||||
|
* TourAPI 4.0 클라이언트
|
||||||
|
* 한국관광공사 국문 관광정보 서비스 (KorService2)
|
||||||
|
*
|
||||||
|
* 문서: https://www.data.go.kr/data/15101578/openapi.do
|
||||||
|
* Base URL: https://apis.data.go.kr/B551011/KorService2
|
||||||
|
*/
|
||||||
|
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
// 관광타입 ID
|
||||||
|
const CONTENT_TYPE = {
|
||||||
|
TOURIST_SPOT: '12', // 관광지
|
||||||
|
CULTURAL: '14', // 문화시설
|
||||||
|
FESTIVAL: '15', // 행사/공연/축제
|
||||||
|
TRAVEL_COURSE: '25', // 여행코스
|
||||||
|
LEISURE: '28', // 레포츠
|
||||||
|
STAY: '32', // 숙박 (펜션)
|
||||||
|
SHOPPING: '38', // 쇼핑
|
||||||
|
RESTAURANT: '39', // 음식점
|
||||||
|
};
|
||||||
|
|
||||||
|
// 지역코드
|
||||||
|
const AREA_CODE = {
|
||||||
|
SEOUL: '1',
|
||||||
|
INCHEON: '2',
|
||||||
|
DAEJEON: '3',
|
||||||
|
DAEGU: '4',
|
||||||
|
GWANGJU: '5',
|
||||||
|
BUSAN: '6',
|
||||||
|
ULSAN: '7',
|
||||||
|
SEJONG: '8',
|
||||||
|
GYEONGGI: '31',
|
||||||
|
GANGWON: '32',
|
||||||
|
CHUNGBUK: '33',
|
||||||
|
CHUNGNAM: '34',
|
||||||
|
GYEONGBUK: '35',
|
||||||
|
GYEONGNAM: '36',
|
||||||
|
JEONBUK: '37',
|
||||||
|
JEONNAM: '38',
|
||||||
|
JEJU: '39',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 지역코드 이름 매핑
|
||||||
|
const AREA_NAME = {
|
||||||
|
'1': '서울',
|
||||||
|
'2': '인천',
|
||||||
|
'3': '대전',
|
||||||
|
'4': '대구',
|
||||||
|
'5': '광주',
|
||||||
|
'6': '부산',
|
||||||
|
'7': '울산',
|
||||||
|
'8': '세종',
|
||||||
|
'31': '경기',
|
||||||
|
'32': '강원',
|
||||||
|
'33': '충북',
|
||||||
|
'34': '충남',
|
||||||
|
'35': '경북',
|
||||||
|
'36': '경남',
|
||||||
|
'37': '전북',
|
||||||
|
'38': '전남',
|
||||||
|
'39': '제주',
|
||||||
|
};
|
||||||
|
|
||||||
|
class TourApiClient {
|
||||||
|
constructor() {
|
||||||
|
this.baseUrl = process.env.TOURAPI_ENDPOINT || 'https://apis.data.go.kr/B551011/KorService2';
|
||||||
|
this.serviceKey = process.env.TOURAPI_KEY;
|
||||||
|
|
||||||
|
this.client = axios.create({
|
||||||
|
baseURL: this.baseUrl,
|
||||||
|
timeout: 30000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* API 요청 공통 메서드
|
||||||
|
*/
|
||||||
|
async request(operation, params = {}) {
|
||||||
|
try {
|
||||||
|
const response = await this.client.get(`/${operation}`, {
|
||||||
|
params: {
|
||||||
|
serviceKey: this.serviceKey,
|
||||||
|
MobileOS: 'ETC',
|
||||||
|
MobileApp: 'CastAD',
|
||||||
|
_type: 'json',
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = response.data;
|
||||||
|
|
||||||
|
// 에러 체크
|
||||||
|
if (data.response?.header?.resultCode !== '0000') {
|
||||||
|
const errorMsg = data.response?.header?.resultMsg || 'Unknown error';
|
||||||
|
throw new Error(`TourAPI Error: ${errorMsg}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = data.response?.body;
|
||||||
|
return {
|
||||||
|
items: body?.items?.item || [],
|
||||||
|
totalCount: body?.totalCount || 0,
|
||||||
|
pageNo: body?.pageNo || 1,
|
||||||
|
numOfRows: body?.numOfRows || 10,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
throw new Error('TourAPI 인증 실패: 서비스키를 확인하세요');
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 지역/분류 코드 조회
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 지역코드 조회
|
||||||
|
* @param {string} areaCode - 시도 코드 (없으면 전체 시도 조회)
|
||||||
|
*/
|
||||||
|
async getAreaCodes(areaCode = null) {
|
||||||
|
const params = { numOfRows: 100, pageNo: 1 };
|
||||||
|
if (areaCode) params.areaCode = areaCode;
|
||||||
|
return this.request('areaCode2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 서비스 분류코드 조회
|
||||||
|
*/
|
||||||
|
async getCategoryCodes(contentTypeId = null, cat1 = null, cat2 = null) {
|
||||||
|
const params = { numOfRows: 100, pageNo: 1 };
|
||||||
|
if (contentTypeId) params.contentTypeId = contentTypeId;
|
||||||
|
if (cat1) params.cat1 = cat1;
|
||||||
|
if (cat2) params.cat2 = cat2;
|
||||||
|
return this.request('categoryCode2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 축제/행사 조회 (핵심!)
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 행사정보 조회 (축제)
|
||||||
|
* @param {Object} options
|
||||||
|
* @param {string} options.eventStartDate - 행사 시작일 (YYYYMMDD) - 필수!
|
||||||
|
* @param {string} options.eventEndDate - 행사 종료일 (YYYYMMDD)
|
||||||
|
* @param {string} options.areaCode - 지역코드
|
||||||
|
* @param {string} options.sigunguCode - 시군구코드
|
||||||
|
* @param {number} options.numOfRows - 한 페이지 결과 수
|
||||||
|
* @param {number} options.pageNo - 페이지 번호
|
||||||
|
* @param {string} options.arrange - 정렬 (A=제목순, C=수정일순, D=생성일순)
|
||||||
|
*/
|
||||||
|
async searchFestival(options = {}) {
|
||||||
|
const {
|
||||||
|
eventStartDate = this.getTodayString(),
|
||||||
|
eventEndDate,
|
||||||
|
areaCode,
|
||||||
|
sigunguCode,
|
||||||
|
numOfRows = 100,
|
||||||
|
pageNo = 1,
|
||||||
|
arrange = 'A',
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
numOfRows,
|
||||||
|
pageNo,
|
||||||
|
arrange,
|
||||||
|
eventStartDate,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (eventEndDate) params.eventEndDate = eventEndDate;
|
||||||
|
if (areaCode) params.areaCode = areaCode;
|
||||||
|
if (sigunguCode) params.sigunguCode = sigunguCode;
|
||||||
|
|
||||||
|
return this.request('searchFestival2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 진행중인 축제 조회
|
||||||
|
*/
|
||||||
|
async getOngoingFestivals(areaCode = null) {
|
||||||
|
const today = this.getTodayString();
|
||||||
|
return this.searchFestival({
|
||||||
|
eventStartDate: '20240101', // 과거부터
|
||||||
|
eventEndDate: today, // 오늘까지 종료되지 않은
|
||||||
|
areaCode,
|
||||||
|
arrange: 'C', // 수정일순
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 예정 축제 조회 (향후 6개월)
|
||||||
|
*/
|
||||||
|
async getUpcomingFestivals(areaCode = null, months = 6) {
|
||||||
|
const today = this.getTodayString();
|
||||||
|
const endDate = this.getDateAfterMonths(months);
|
||||||
|
return this.searchFestival({
|
||||||
|
eventStartDate: today,
|
||||||
|
eventEndDate: endDate,
|
||||||
|
areaCode,
|
||||||
|
arrange: 'A', // 제목순
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 숙박 조회 (펜션)
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 숙박정보 조회
|
||||||
|
* @param {Object} options
|
||||||
|
* @param {string} options.areaCode - 지역코드
|
||||||
|
* @param {string} options.sigunguCode - 시군구코드
|
||||||
|
* @param {number} options.numOfRows - 한 페이지 결과 수
|
||||||
|
* @param {number} options.pageNo - 페이지 번호
|
||||||
|
* @param {string} options.arrange - 정렬
|
||||||
|
*/
|
||||||
|
async searchStay(options = {}) {
|
||||||
|
const {
|
||||||
|
areaCode,
|
||||||
|
sigunguCode,
|
||||||
|
numOfRows = 100,
|
||||||
|
pageNo = 1,
|
||||||
|
arrange = 'A',
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const params = { numOfRows, pageNo, arrange };
|
||||||
|
if (areaCode) params.areaCode = areaCode;
|
||||||
|
if (sigunguCode) params.sigunguCode = sigunguCode;
|
||||||
|
|
||||||
|
return this.request('searchStay2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 지역/위치 기반 조회
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 지역기반 관광정보 조회
|
||||||
|
*/
|
||||||
|
async getAreaBasedList(options = {}) {
|
||||||
|
const {
|
||||||
|
contentTypeId,
|
||||||
|
areaCode,
|
||||||
|
sigunguCode,
|
||||||
|
cat1, cat2, cat3,
|
||||||
|
numOfRows = 100,
|
||||||
|
pageNo = 1,
|
||||||
|
arrange = 'C',
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const params = { numOfRows, pageNo, arrange };
|
||||||
|
if (contentTypeId) params.contentTypeId = contentTypeId;
|
||||||
|
if (areaCode) params.areaCode = areaCode;
|
||||||
|
if (sigunguCode) params.sigunguCode = sigunguCode;
|
||||||
|
if (cat1) params.cat1 = cat1;
|
||||||
|
if (cat2) params.cat2 = cat2;
|
||||||
|
if (cat3) params.cat3 = cat3;
|
||||||
|
|
||||||
|
return this.request('areaBasedList2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 위치기반 관광정보 조회 (근처 검색)
|
||||||
|
* @param {number} mapX - 경도 (longitude)
|
||||||
|
* @param {number} mapY - 위도 (latitude)
|
||||||
|
* @param {number} radius - 반경 (미터, 최대 20000)
|
||||||
|
* @param {string} contentTypeId - 관광타입
|
||||||
|
*/
|
||||||
|
async getLocationBasedList(mapX, mapY, radius = 10000, contentTypeId = null) {
|
||||||
|
const params = {
|
||||||
|
mapX: mapX.toString(),
|
||||||
|
mapY: mapY.toString(),
|
||||||
|
radius: Math.min(radius, 20000), // 최대 20km
|
||||||
|
numOfRows: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
arrange: 'E', // 거리순
|
||||||
|
};
|
||||||
|
|
||||||
|
if (contentTypeId) params.contentTypeId = contentTypeId;
|
||||||
|
|
||||||
|
return this.request('locationBasedList2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 근처 축제 검색
|
||||||
|
*/
|
||||||
|
async getNearbyFestivals(mapX, mapY, radius = 20000) {
|
||||||
|
return this.getLocationBasedList(mapX, mapY, radius, CONTENT_TYPE.FESTIVAL);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 근처 숙박시설 검색
|
||||||
|
*/
|
||||||
|
async getNearbyStay(mapX, mapY, radius = 20000) {
|
||||||
|
return this.getLocationBasedList(mapX, mapY, radius, CONTENT_TYPE.STAY);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 상세 정보 조회
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 공통정보 조회 (상세정보1)
|
||||||
|
*/
|
||||||
|
async getDetailCommon(contentId) {
|
||||||
|
return this.request('detailCommon2', { contentId });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 소개정보 조회 (상세정보2) - 타입별 상세
|
||||||
|
*/
|
||||||
|
async getDetailIntro(contentId, contentTypeId) {
|
||||||
|
return this.request('detailIntro2', { contentId, contentTypeId });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 반복정보 조회 (상세정보3) - 객실정보 등
|
||||||
|
*/
|
||||||
|
async getDetailInfo(contentId, contentTypeId) {
|
||||||
|
return this.request('detailInfo2', { contentId, contentTypeId });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이미지정보 조회 (상세정보4)
|
||||||
|
*/
|
||||||
|
async getDetailImage(contentId) {
|
||||||
|
return this.request('detailImage2', { contentId });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 축제 전체 상세정보 조회
|
||||||
|
*/
|
||||||
|
async getFestivalDetail(contentId) {
|
||||||
|
const [common, intro, images] = await Promise.all([
|
||||||
|
this.getDetailCommon(contentId),
|
||||||
|
this.getDetailIntro(contentId, CONTENT_TYPE.FESTIVAL),
|
||||||
|
this.getDetailImage(contentId),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
common: common.items[0] || {},
|
||||||
|
intro: intro.items[0] || {},
|
||||||
|
images: images.items || [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 숙박 전체 상세정보 조회
|
||||||
|
*/
|
||||||
|
async getStayDetail(contentId) {
|
||||||
|
const [common, intro, rooms, images] = await Promise.all([
|
||||||
|
this.getDetailCommon(contentId),
|
||||||
|
this.getDetailIntro(contentId, CONTENT_TYPE.STAY),
|
||||||
|
this.getDetailInfo(contentId, CONTENT_TYPE.STAY),
|
||||||
|
this.getDetailImage(contentId),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
common: common.items[0] || {},
|
||||||
|
intro: intro.items[0] || {},
|
||||||
|
rooms: rooms.items || [],
|
||||||
|
images: images.items || [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 동기화
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 관광정보 동기화 목록 조회 (변경된 데이터)
|
||||||
|
*/
|
||||||
|
async getSyncList(options = {}) {
|
||||||
|
const {
|
||||||
|
contentTypeId,
|
||||||
|
modifiedTime, // YYYYMMDD 형식
|
||||||
|
numOfRows = 100,
|
||||||
|
pageNo = 1,
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
const params = { numOfRows, pageNo };
|
||||||
|
if (contentTypeId) params.contentTypeId = contentTypeId;
|
||||||
|
if (modifiedTime) params.modifiedtime = modifiedTime;
|
||||||
|
|
||||||
|
return this.request('areaBasedSyncList2', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 유틸리티
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 오늘 날짜 문자열 (YYYYMMDD)
|
||||||
|
*/
|
||||||
|
getTodayString() {
|
||||||
|
return new Date().toISOString().slice(0, 10).replace(/-/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* N개월 후 날짜 문자열
|
||||||
|
*/
|
||||||
|
getDateAfterMonths(months) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setMonth(date.getMonth() + months);
|
||||||
|
return date.toISOString().slice(0, 10).replace(/-/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 날짜 파싱 (YYYYMMDD -> Date)
|
||||||
|
*/
|
||||||
|
parseDate(dateStr) {
|
||||||
|
if (!dateStr || dateStr.length < 8) return null;
|
||||||
|
const year = dateStr.slice(0, 4);
|
||||||
|
const month = dateStr.slice(4, 6);
|
||||||
|
const day = dateStr.slice(6, 8);
|
||||||
|
return new Date(`${year}-${month}-${day}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 날짜 포맷팅 (YYYYMMDD -> YYYY.MM.DD)
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr || dateStr.length < 8) return '';
|
||||||
|
return `${dateStr.slice(0, 4)}.${dateStr.slice(4, 6)}.${dateStr.slice(6, 8)}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 싱글톤 인스턴스
|
||||||
|
const tourApiClient = new TourApiClient();
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
tourApiClient,
|
||||||
|
TourApiClient,
|
||||||
|
CONTENT_TYPE,
|
||||||
|
AREA_CODE,
|
||||||
|
AREA_NAME,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,580 @@
|
||||||
|
/**
|
||||||
|
* CaStAD Statistics Service v3.0.0
|
||||||
|
* 고급 통계 및 분석 서비스
|
||||||
|
*/
|
||||||
|
|
||||||
|
const db = require('./db');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 일별 시스템 통계 스냅샷 생성/업데이트
|
||||||
|
*/
|
||||||
|
async function updateDailyStats() {
|
||||||
|
const today = new Date().toISOString().split('T')[0];
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 오늘의 통계 계산
|
||||||
|
db.serialize(() => {
|
||||||
|
// 전체 사용자 수
|
||||||
|
db.get('SELECT COUNT(*) as total FROM users', [], (err, totalUsers) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
// 오늘 신규 가입자
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(*) as count FROM users
|
||||||
|
WHERE date(createdAt) = date('now')
|
||||||
|
`, [], (err, newUsers) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
// 오늘 활성 사용자 (영상 생성)
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(DISTINCT user_id) as count FROM history
|
||||||
|
WHERE date(createdAt) = date('now')
|
||||||
|
`, [], (err, activeUsers) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
// 오늘 생성된 영상 수
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(*) as count FROM history
|
||||||
|
WHERE date(createdAt) = date('now')
|
||||||
|
`, [], (err, videos) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
// 오늘 전체 업로드 수 (YouTube + Instagram + TikTok)
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
(SELECT COUNT(*) FROM upload_history WHERE date(uploaded_at) = date('now')) +
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history WHERE date(createdAt) = date('now')) +
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history WHERE date(createdAt) = date('now'))
|
||||||
|
as total_uploads,
|
||||||
|
(SELECT COUNT(*) FROM upload_history WHERE date(uploaded_at) = date('now')) as youtube,
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history WHERE date(createdAt) = date('now')) as instagram,
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history WHERE date(createdAt) = date('now')) as tiktok
|
||||||
|
`, [], (err, uploads) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
// 오늘 사용된 크레딧
|
||||||
|
db.get(`
|
||||||
|
SELECT COALESCE(SUM(ABS(amount)), 0) as total FROM credit_history
|
||||||
|
WHERE amount < 0 AND date(createdAt) = date('now')
|
||||||
|
`, [], (err, credits) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
// 저장 또는 업데이트
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO system_stats_daily
|
||||||
|
(date, total_users, new_users, active_users, total_videos_generated,
|
||||||
|
total_uploads, youtube_uploads, instagram_uploads, tiktok_uploads,
|
||||||
|
total_credits_used, createdAt)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [
|
||||||
|
today,
|
||||||
|
totalUsers.total,
|
||||||
|
newUsers.count,
|
||||||
|
activeUsers.count,
|
||||||
|
videos.count,
|
||||||
|
uploads?.total_uploads || 0,
|
||||||
|
uploads?.youtube || 0,
|
||||||
|
uploads?.instagram || 0,
|
||||||
|
uploads?.tiktok || 0,
|
||||||
|
credits.total
|
||||||
|
], function (err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve({ success: true });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 성장 트렌드 조회
|
||||||
|
* @param {number} days - 조회 기간 (일)
|
||||||
|
*/
|
||||||
|
function getUserGrowthTrend(days = 30) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
date(createdAt) as date,
|
||||||
|
COUNT(*) as new_users,
|
||||||
|
SUM(COUNT(*)) OVER (ORDER BY date(createdAt)) as cumulative_users
|
||||||
|
FROM users
|
||||||
|
WHERE createdAt >= date('now', '-' || ? || ' days')
|
||||||
|
GROUP BY date(createdAt)
|
||||||
|
ORDER BY date ASC
|
||||||
|
`, [days], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 영상 생성 트렌드 조회
|
||||||
|
* @param {number} days - 조회 기간 (일)
|
||||||
|
*/
|
||||||
|
function getVideoGenerationTrend(days = 30) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
date(createdAt) as date,
|
||||||
|
COUNT(*) as videos_generated,
|
||||||
|
COUNT(DISTINCT user_id) as unique_users
|
||||||
|
FROM history
|
||||||
|
WHERE createdAt >= date('now', '-' || ? || ' days')
|
||||||
|
GROUP BY date(createdAt)
|
||||||
|
ORDER BY date ASC
|
||||||
|
`, [days], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 플랫폼별 업로드 통계
|
||||||
|
* @param {number} days - 조회 기간 (일)
|
||||||
|
*/
|
||||||
|
function getPlatformUploadStats(days = 30) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const result = {
|
||||||
|
youtube: [],
|
||||||
|
instagram: [],
|
||||||
|
tiktok: [],
|
||||||
|
summary: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
db.all(`
|
||||||
|
SELECT date(uploaded_at) as date, COUNT(*) as count, status
|
||||||
|
FROM upload_history
|
||||||
|
WHERE uploaded_at >= date('now', '-' || ? || ' days')
|
||||||
|
GROUP BY date(uploaded_at), status
|
||||||
|
ORDER BY date ASC
|
||||||
|
`, [days], (err, youtubeRows) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
result.youtube = youtubeRows || [];
|
||||||
|
|
||||||
|
db.all(`
|
||||||
|
SELECT date(createdAt) as date, COUNT(*) as count, status
|
||||||
|
FROM instagram_upload_history
|
||||||
|
WHERE createdAt >= date('now', '-' || ? || ' days')
|
||||||
|
GROUP BY date(createdAt), status
|
||||||
|
ORDER BY date ASC
|
||||||
|
`, [days], (err, instaRows) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
result.instagram = instaRows || [];
|
||||||
|
|
||||||
|
db.all(`
|
||||||
|
SELECT date(createdAt) as date, COUNT(*) as count, status
|
||||||
|
FROM tiktok_upload_history
|
||||||
|
WHERE createdAt >= date('now', '-' || ? || ' days')
|
||||||
|
GROUP BY date(createdAt), status
|
||||||
|
ORDER BY date ASC
|
||||||
|
`, [days], (err, tiktokRows) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
result.tiktok = tiktokRows || [];
|
||||||
|
|
||||||
|
// 요약 통계 계산
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
(SELECT COUNT(*) FROM upload_history WHERE uploaded_at >= date('now', '-' || ? || ' days')) as youtube_total,
|
||||||
|
(SELECT COUNT(*) FROM upload_history WHERE uploaded_at >= date('now', '-' || ? || ' days') AND status = 'completed') as youtube_success,
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history WHERE createdAt >= date('now', '-' || ? || ' days')) as instagram_total,
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history WHERE createdAt >= date('now', '-' || ? || ' days') AND status = 'completed') as instagram_success,
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history WHERE createdAt >= date('now', '-' || ? || ' days')) as tiktok_total,
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history WHERE createdAt >= date('now', '-' || ? || ' days') AND status = 'completed') as tiktok_success
|
||||||
|
`, [days, days, days, days, days, days], (err, summary) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
result.summary = summary || {};
|
||||||
|
resolve(result);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 크레딧 사용 통계
|
||||||
|
* @param {number} days - 조회 기간 (일)
|
||||||
|
*/
|
||||||
|
function getCreditUsageStats(days = 30) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
date(createdAt) as date,
|
||||||
|
type,
|
||||||
|
SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END) as credits_added,
|
||||||
|
SUM(CASE WHEN amount < 0 THEN ABS(amount) ELSE 0 END) as credits_used
|
||||||
|
FROM credit_history
|
||||||
|
WHERE createdAt >= date('now', '-' || ? || ' days')
|
||||||
|
GROUP BY date(createdAt), type
|
||||||
|
ORDER BY date ASC
|
||||||
|
`, [days], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 플랜별 사용자 분포
|
||||||
|
*/
|
||||||
|
function getPlanDistribution() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
COALESCE(plan_type, 'free') as plan,
|
||||||
|
COUNT(*) as count,
|
||||||
|
ROUND(COUNT(*) * 100.0 / (SELECT COUNT(*) FROM users), 2) as percentage
|
||||||
|
FROM users
|
||||||
|
GROUP BY plan_type
|
||||||
|
ORDER BY count DESC
|
||||||
|
`, [], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 톱 사용자 (가장 많은 영상 생성)
|
||||||
|
* @param {number} limit - 조회 개수
|
||||||
|
*/
|
||||||
|
function getTopUsers(limit = 10) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
u.id,
|
||||||
|
u.username,
|
||||||
|
u.name,
|
||||||
|
u.plan_type,
|
||||||
|
u.credits,
|
||||||
|
COUNT(h.id) as total_videos,
|
||||||
|
(SELECT COUNT(*) FROM upload_history WHERE user_id = u.id) as youtube_uploads,
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history WHERE user_id = u.id) as instagram_uploads,
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history WHERE user_id = u.id) as tiktok_uploads,
|
||||||
|
(SELECT COUNT(*) FROM pension_profiles WHERE user_id = u.id) as pension_count
|
||||||
|
FROM users u
|
||||||
|
LEFT JOIN history h ON u.id = h.user_id
|
||||||
|
WHERE u.role != 'admin'
|
||||||
|
GROUP BY u.id
|
||||||
|
ORDER BY total_videos DESC
|
||||||
|
LIMIT ?
|
||||||
|
`, [limit], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 최근 활동 로그
|
||||||
|
* @param {number} limit - 조회 개수
|
||||||
|
*/
|
||||||
|
function getRecentActivityLogs(limit = 50) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
al.*,
|
||||||
|
u.username,
|
||||||
|
u.name
|
||||||
|
FROM activity_logs al
|
||||||
|
LEFT JOIN users u ON al.user_id = u.id
|
||||||
|
ORDER BY al.createdAt DESC
|
||||||
|
LIMIT ?
|
||||||
|
`, [limit], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 활동 로그 기록
|
||||||
|
* @param {number|null} userId - 사용자 ID
|
||||||
|
* @param {string} actionType - 액션 타입
|
||||||
|
* @param {string} actionDetail - 액션 상세
|
||||||
|
* @param {object} metadata - 추가 메타데이터
|
||||||
|
*/
|
||||||
|
function logActivity(userId, actionType, actionDetail, metadata = {}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO activity_logs (user_id, action_type, action_detail, metadata, createdAt)
|
||||||
|
VALUES (?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [userId, actionType, actionDetail, JSON.stringify(metadata)], function (err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve({ id: this.lastID });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 대시보드 요약 통계
|
||||||
|
*/
|
||||||
|
function getDashboardSummary() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const summary = {};
|
||||||
|
|
||||||
|
db.serialize(() => {
|
||||||
|
// 전체 사용자
|
||||||
|
db.get('SELECT COUNT(*) as total FROM users WHERE role != ?', ['admin'], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.totalUsers = row.total;
|
||||||
|
|
||||||
|
// 오늘 신규 가입
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(*) as count FROM users
|
||||||
|
WHERE date(createdAt) = date('now') AND role != 'admin'
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.newUsersToday = row.count;
|
||||||
|
|
||||||
|
// 이번 주 활성 사용자
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(DISTINCT user_id) as count FROM history
|
||||||
|
WHERE createdAt >= date('now', '-7 days')
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.activeUsersWeek = row.count;
|
||||||
|
|
||||||
|
// 전체 생성 영상 수
|
||||||
|
db.get('SELECT COUNT(*) as total FROM history', [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.totalVideos = row.total;
|
||||||
|
|
||||||
|
// 오늘 생성 영상
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(*) as count FROM history
|
||||||
|
WHERE date(createdAt) = date('now')
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.videosToday = row.count;
|
||||||
|
|
||||||
|
// 전체 업로드 수
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
(SELECT COUNT(*) FROM upload_history) +
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history) +
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history) as total
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.totalUploads = row.total;
|
||||||
|
|
||||||
|
// 플랫폼별 업로드
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
(SELECT COUNT(*) FROM upload_history) as youtube,
|
||||||
|
(SELECT COUNT(*) FROM instagram_upload_history) as instagram,
|
||||||
|
(SELECT COUNT(*) FROM tiktok_upload_history) as tiktok
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.platformUploads = row;
|
||||||
|
|
||||||
|
// 전체 펜션 수
|
||||||
|
db.get('SELECT COUNT(*) as total FROM pension_profiles', [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.totalPensions = row.total;
|
||||||
|
|
||||||
|
// 대기중인 승인 요청
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(*) as count FROM users
|
||||||
|
WHERE approved = 0 AND role != 'admin'
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.pendingApprovals = row.count;
|
||||||
|
|
||||||
|
// 대기중인 크레딧 요청
|
||||||
|
db.get(`
|
||||||
|
SELECT COUNT(*) as count FROM credit_requests
|
||||||
|
WHERE status = 'pending'
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.pendingCreditRequests = row.count;
|
||||||
|
|
||||||
|
// 전체 크레딧 발행량
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
COALESCE(SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END), 0) as issued,
|
||||||
|
COALESCE(SUM(CASE WHEN amount < 0 THEN ABS(amount) ELSE 0 END), 0) as used
|
||||||
|
FROM credit_history
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
summary.credits = row;
|
||||||
|
|
||||||
|
resolve(summary);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시간대별 사용 패턴 분석
|
||||||
|
*/
|
||||||
|
function getUsagePattern() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
strftime('%H', createdAt) as hour,
|
||||||
|
COUNT(*) as count
|
||||||
|
FROM history
|
||||||
|
WHERE createdAt >= date('now', '-30 days')
|
||||||
|
GROUP BY strftime('%H', createdAt)
|
||||||
|
ORDER BY hour ASC
|
||||||
|
`, [], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 지역별 사용자 분포 (펜션 주소 기반)
|
||||||
|
*/
|
||||||
|
function getRegionalDistribution() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
COALESCE(region, '미설정') as region,
|
||||||
|
COUNT(*) as count
|
||||||
|
FROM pension_profiles
|
||||||
|
GROUP BY region
|
||||||
|
ORDER BY count DESC
|
||||||
|
LIMIT 20
|
||||||
|
`, [], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 월별 수익 예측 (플랜 기반)
|
||||||
|
*/
|
||||||
|
function getRevenueProjection() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const PLAN_PRICES = {
|
||||||
|
free: 0,
|
||||||
|
basic: 29000,
|
||||||
|
pro: 99000,
|
||||||
|
business: 299000
|
||||||
|
};
|
||||||
|
|
||||||
|
db.all(`
|
||||||
|
SELECT
|
||||||
|
COALESCE(plan_type, 'free') as plan,
|
||||||
|
COUNT(*) as count
|
||||||
|
FROM users
|
||||||
|
WHERE role != 'admin'
|
||||||
|
GROUP BY plan_type
|
||||||
|
`, [], (err, rows) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
|
||||||
|
let monthlyRevenue = 0;
|
||||||
|
const breakdown = {};
|
||||||
|
|
||||||
|
(rows || []).forEach(row => {
|
||||||
|
const price = PLAN_PRICES[row.plan] || 0;
|
||||||
|
const revenue = price * row.count;
|
||||||
|
monthlyRevenue += revenue;
|
||||||
|
breakdown[row.plan] = {
|
||||||
|
users: row.count,
|
||||||
|
price,
|
||||||
|
revenue
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
monthlyRevenue,
|
||||||
|
annualProjection: monthlyRevenue * 12,
|
||||||
|
breakdown
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 시스템 헬스 체크
|
||||||
|
*/
|
||||||
|
function getSystemHealth() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const health = {
|
||||||
|
database: 'ok',
|
||||||
|
diskUsage: null,
|
||||||
|
lastVideoGenerated: null,
|
||||||
|
uptime: process.uptime()
|
||||||
|
};
|
||||||
|
|
||||||
|
// DB 연결 확인
|
||||||
|
db.get('SELECT 1', [], (err) => {
|
||||||
|
if (err) {
|
||||||
|
health.database = 'error';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 마지막 영상 생성 시간
|
||||||
|
db.get(`
|
||||||
|
SELECT createdAt FROM history
|
||||||
|
ORDER BY createdAt DESC LIMIT 1
|
||||||
|
`, [], (err, row) => {
|
||||||
|
if (!err && row) {
|
||||||
|
health.lastVideoGenerated = row.createdAt;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 디스크 사용량 (downloads 폴더)
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const downloadsDir = path.join(__dirname, 'downloads');
|
||||||
|
|
||||||
|
try {
|
||||||
|
let totalSize = 0;
|
||||||
|
const files = fs.readdirSync(downloadsDir);
|
||||||
|
files.forEach(file => {
|
||||||
|
const filePath = path.join(downloadsDir, file);
|
||||||
|
const stats = fs.statSync(filePath);
|
||||||
|
totalSize += stats.size;
|
||||||
|
});
|
||||||
|
health.diskUsage = {
|
||||||
|
bytes: totalSize,
|
||||||
|
mb: Math.round(totalSize / 1024 / 1024),
|
||||||
|
fileCount: files.length
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
health.diskUsage = { error: e.message };
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve(health);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
updateDailyStats,
|
||||||
|
getUserGrowthTrend,
|
||||||
|
getVideoGenerationTrend,
|
||||||
|
getPlatformUploadStats,
|
||||||
|
getCreditUsageStats,
|
||||||
|
getPlanDistribution,
|
||||||
|
getTopUsers,
|
||||||
|
getRecentActivityLogs,
|
||||||
|
logActivity,
|
||||||
|
getDashboardSummary,
|
||||||
|
getUsagePattern,
|
||||||
|
getRegionalDistribution,
|
||||||
|
getRevenueProjection,
|
||||||
|
getSystemHealth
|
||||||
|
};
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,606 @@
|
||||||
|
/**
|
||||||
|
* TikTok Content Posting API Service
|
||||||
|
* CaStAD v3.0.0
|
||||||
|
*
|
||||||
|
* TikTok API Reference: https://developers.tiktok.com/doc/content-posting-api-get-started/
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const axios = require('axios');
|
||||||
|
const db = require('./db');
|
||||||
|
|
||||||
|
// TikTok API Endpoints
|
||||||
|
const TIKTOK_AUTH_URL = 'https://www.tiktok.com/v2/auth/authorize/';
|
||||||
|
const TIKTOK_TOKEN_URL = 'https://open.tiktokapis.com/v2/oauth/token/';
|
||||||
|
const TIKTOK_REVOKE_URL = 'https://open.tiktokapis.com/v2/oauth/revoke/';
|
||||||
|
const TIKTOK_USER_INFO_URL = 'https://open.tiktokapis.com/v2/user/info/';
|
||||||
|
const TIKTOK_UPLOAD_INIT_URL = 'https://open.tiktokapis.com/v2/post/publish/video/init/';
|
||||||
|
const TIKTOK_UPLOAD_INBOX_URL = 'https://open.tiktokapis.com/v2/post/publish/inbox/video/init/';
|
||||||
|
const TIKTOK_PUBLISH_STATUS_URL = 'https://open.tiktokapis.com/v2/post/publish/status/fetch/';
|
||||||
|
|
||||||
|
// Scopes
|
||||||
|
const TIKTOK_SCOPES = [
|
||||||
|
'user.info.basic',
|
||||||
|
'user.info.profile',
|
||||||
|
'user.info.stats',
|
||||||
|
'video.publish',
|
||||||
|
'video.upload'
|
||||||
|
];
|
||||||
|
|
||||||
|
// TikTok Client credentials (from environment or config)
|
||||||
|
const TIKTOK_CLIENT_KEY = process.env.TIKTOK_CLIENT_KEY;
|
||||||
|
const TIKTOK_CLIENT_SECRET = process.env.TIKTOK_CLIENT_SECRET;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TikTok OAuth 인증 URL 생성
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} redirectUri - 콜백 URI
|
||||||
|
*/
|
||||||
|
function generateAuthUrl(userId, redirectUri = null) {
|
||||||
|
if (!TIKTOK_CLIENT_KEY) {
|
||||||
|
throw new Error('TIKTOK_CLIENT_KEY 환경변수가 설정되지 않았습니다.');
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalRedirectUri = redirectUri || `${process.env.BACKEND_URL || 'http://localhost:3001'}/api/tiktok/oauth/callback`;
|
||||||
|
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
client_key: TIKTOK_CLIENT_KEY,
|
||||||
|
scope: TIKTOK_SCOPES.join(','),
|
||||||
|
response_type: 'code',
|
||||||
|
redirect_uri: finalRedirectUri,
|
||||||
|
state: JSON.stringify({ userId })
|
||||||
|
});
|
||||||
|
|
||||||
|
return `${TIKTOK_AUTH_URL}?${params.toString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 인증 코드로 토큰 교환
|
||||||
|
* @param {string} code - 인증 코드
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} redirectUri - 콜백 URI
|
||||||
|
*/
|
||||||
|
async function exchangeCodeForTokens(code, userId, redirectUri = null) {
|
||||||
|
if (!TIKTOK_CLIENT_KEY || !TIKTOK_CLIENT_SECRET) {
|
||||||
|
throw new Error('TikTok 클라이언트 자격증명이 설정되지 않았습니다.');
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalRedirectUri = redirectUri || `${process.env.BACKEND_URL || 'http://localhost:3001'}/api/tiktok/oauth/callback`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 토큰 요청
|
||||||
|
const tokenResponse = await axios.post(TIKTOK_TOKEN_URL, null, {
|
||||||
|
params: {
|
||||||
|
client_key: TIKTOK_CLIENT_KEY,
|
||||||
|
client_secret: TIKTOK_CLIENT_SECRET,
|
||||||
|
code,
|
||||||
|
grant_type: 'authorization_code',
|
||||||
|
redirect_uri: finalRedirectUri
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const tokens = tokenResponse.data;
|
||||||
|
|
||||||
|
if (tokens.error) {
|
||||||
|
throw new Error(tokens.error.message || 'Token exchange failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
const accessToken = tokens.access_token;
|
||||||
|
const refreshToken = tokens.refresh_token;
|
||||||
|
const expiresIn = tokens.expires_in;
|
||||||
|
const openId = tokens.open_id;
|
||||||
|
const tokenExpiry = new Date(Date.now() + expiresIn * 1000).toISOString();
|
||||||
|
|
||||||
|
// 사용자 정보 가져오기
|
||||||
|
const userInfo = await getTikTokUserInfo(accessToken, openId);
|
||||||
|
|
||||||
|
// DB에 저장
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO tiktok_connections
|
||||||
|
(user_id, open_id, display_name, avatar_url, follower_count, following_count,
|
||||||
|
access_token, refresh_token, token_expiry, scopes, connected_at)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [
|
||||||
|
userId,
|
||||||
|
openId,
|
||||||
|
userInfo.display_name || null,
|
||||||
|
userInfo.avatar_url || null,
|
||||||
|
userInfo.follower_count || 0,
|
||||||
|
userInfo.following_count || 0,
|
||||||
|
accessToken,
|
||||||
|
refreshToken,
|
||||||
|
tokenExpiry,
|
||||||
|
TIKTOK_SCOPES.join(',')
|
||||||
|
], function (err) {
|
||||||
|
if (err) {
|
||||||
|
console.error('[TikTok OAuth] 토큰 저장 실패:', err);
|
||||||
|
reject(err);
|
||||||
|
} else {
|
||||||
|
// 기본 설정 생성
|
||||||
|
db.run(`INSERT OR IGNORE INTO tiktok_settings (user_id) VALUES (?)`, [userId]);
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
openId,
|
||||||
|
displayName: userInfo.display_name,
|
||||||
|
avatarUrl: userInfo.avatar_url,
|
||||||
|
followerCount: userInfo.follower_count
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[TikTok OAuth] 토큰 교환 실패:', error.response?.data || error.message);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TikTok 사용자 정보 조회
|
||||||
|
* @param {string} accessToken - 액세스 토큰
|
||||||
|
* @param {string} openId - TikTok Open ID
|
||||||
|
*/
|
||||||
|
async function getTikTokUserInfo(accessToken, openId) {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(TIKTOK_USER_INFO_URL, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${accessToken}`
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
fields: 'open_id,display_name,avatar_url,follower_count,following_count,bio_description'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return response.data.data?.user || {};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[TikTok] 사용자 정보 조회 실패:', error.response?.data || error.message);
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 토큰 갱신
|
||||||
|
* @param {string} refreshToken - 리프레시 토큰
|
||||||
|
*/
|
||||||
|
async function refreshAccessToken(refreshToken) {
|
||||||
|
try {
|
||||||
|
const response = await axios.post(TIKTOK_TOKEN_URL, null, {
|
||||||
|
params: {
|
||||||
|
client_key: TIKTOK_CLIENT_KEY,
|
||||||
|
client_secret: TIKTOK_CLIENT_SECRET,
|
||||||
|
grant_type: 'refresh_token',
|
||||||
|
refresh_token: refreshToken
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[TikTok] 토큰 갱신 실패:', error.response?.data || error.message);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자별 인증된 클라이언트 정보 가져오기
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
*/
|
||||||
|
async function getAuthenticatedCredentials(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`SELECT * FROM tiktok_connections WHERE user_id = ?`, [userId], async (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!row) {
|
||||||
|
reject(new Error('TikTok 계정이 연결되지 않았습니다. 설정에서 계정을 연결해주세요.'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 토큰 만료 체크
|
||||||
|
const tokenExpiry = new Date(row.token_expiry);
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
if (tokenExpiry <= now) {
|
||||||
|
// 토큰 갱신 시도
|
||||||
|
try {
|
||||||
|
const newTokens = await refreshAccessToken(row.refresh_token);
|
||||||
|
|
||||||
|
const newExpiry = new Date(Date.now() + newTokens.expires_in * 1000).toISOString();
|
||||||
|
|
||||||
|
// DB 업데이트
|
||||||
|
db.run(`
|
||||||
|
UPDATE tiktok_connections
|
||||||
|
SET access_token = ?, refresh_token = ?, token_expiry = ?
|
||||||
|
WHERE user_id = ?
|
||||||
|
`, [newTokens.access_token, newTokens.refresh_token, newExpiry, userId]);
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
accessToken: newTokens.access_token,
|
||||||
|
openId: row.open_id,
|
||||||
|
displayName: row.display_name
|
||||||
|
});
|
||||||
|
} catch (refreshError) {
|
||||||
|
console.error('[TikTok] 토큰 갱신 실패:', refreshError);
|
||||||
|
// 연결 해제
|
||||||
|
db.run(`DELETE FROM tiktok_connections WHERE user_id = ?`, [userId]);
|
||||||
|
reject(new Error('TikTok 인증이 만료되었습니다. 다시 연결해주세요.'));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
resolve({
|
||||||
|
accessToken: row.access_token,
|
||||||
|
openId: row.open_id,
|
||||||
|
displayName: row.display_name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자의 TikTok 연결 상태 확인
|
||||||
|
*/
|
||||||
|
function getConnectionStatus(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT open_id, display_name, avatar_url, follower_count, following_count, connected_at
|
||||||
|
FROM tiktok_connections WHERE user_id = ?
|
||||||
|
`, [userId], (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row || null);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TikTok 연결 해제
|
||||||
|
*/
|
||||||
|
async function disconnectTikTok(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`SELECT access_token FROM tiktok_connections WHERE user_id = ?`, [userId], async (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 토큰 폐기 시도
|
||||||
|
if (row?.access_token) {
|
||||||
|
try {
|
||||||
|
await axios.post(TIKTOK_REVOKE_URL, null, {
|
||||||
|
params: {
|
||||||
|
client_key: TIKTOK_CLIENT_KEY,
|
||||||
|
client_secret: TIKTOK_CLIENT_SECRET,
|
||||||
|
token: row.access_token
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (revokeError) {
|
||||||
|
console.error('[TikTok] 토큰 폐기 실패 (무시):', revokeError.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DB에서 삭제
|
||||||
|
db.run(`DELETE FROM tiktok_connections WHERE user_id = ?`, [userId], function (delErr) {
|
||||||
|
if (delErr) reject(delErr);
|
||||||
|
else resolve({ success: true, deleted: this.changes });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비디오 업로드 (Direct Post)
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} videoPath - 비디오 파일 경로
|
||||||
|
* @param {object} metadata - 메타데이터 (title, description, etc.)
|
||||||
|
* @param {object} options - 업로드 옵션
|
||||||
|
*/
|
||||||
|
async function uploadVideo(userId, videoPath, metadata, options = {}) {
|
||||||
|
try {
|
||||||
|
const credentials = await getAuthenticatedCredentials(userId);
|
||||||
|
const fileSize = fs.statSync(videoPath).size;
|
||||||
|
|
||||||
|
// Step 1: Initialize upload
|
||||||
|
const initResponse = await axios.post(
|
||||||
|
TIKTOK_UPLOAD_INIT_URL,
|
||||||
|
{
|
||||||
|
post_info: {
|
||||||
|
title: (metadata.title || 'CaStAD Video').substring(0, 150),
|
||||||
|
privacy_level: options.privacyLevel || 'SELF_ONLY', // SELF_ONLY, MUTUAL_FOLLOW_FRIENDS, FOLLOWER_OF_CREATOR, PUBLIC_TO_EVERYONE
|
||||||
|
disable_duet: options.disableDuet || false,
|
||||||
|
disable_comment: options.disableComment || false,
|
||||||
|
disable_stitch: options.disableStitch || false,
|
||||||
|
video_cover_timestamp_ms: options.coverTimestamp || 1000
|
||||||
|
},
|
||||||
|
source_info: {
|
||||||
|
source: 'FILE_UPLOAD',
|
||||||
|
video_size: fileSize,
|
||||||
|
chunk_size: Math.min(fileSize, 10 * 1024 * 1024), // 10MB chunks
|
||||||
|
total_chunk_count: Math.ceil(fileSize / (10 * 1024 * 1024))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${credentials.accessToken}`,
|
||||||
|
'Content-Type': 'application/json; charset=UTF-8'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (initResponse.data.error?.code) {
|
||||||
|
throw new Error(initResponse.data.error.message || 'Upload initialization failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
const uploadUrl = initResponse.data.data?.upload_url;
|
||||||
|
const publishId = initResponse.data.data?.publish_id;
|
||||||
|
|
||||||
|
if (!uploadUrl) {
|
||||||
|
throw new Error('Upload URL not received from TikTok');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 2: Upload video file in chunks
|
||||||
|
const chunkSize = 10 * 1024 * 1024; // 10MB
|
||||||
|
const totalChunks = Math.ceil(fileSize / chunkSize);
|
||||||
|
const fileStream = fs.createReadStream(videoPath);
|
||||||
|
|
||||||
|
let uploadedBytes = 0;
|
||||||
|
let chunkIndex = 0;
|
||||||
|
|
||||||
|
for await (const chunk of fileStream) {
|
||||||
|
const start = uploadedBytes;
|
||||||
|
const end = Math.min(uploadedBytes + chunk.length - 1, fileSize - 1);
|
||||||
|
|
||||||
|
await axios.put(uploadUrl, chunk, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'video/mp4',
|
||||||
|
'Content-Length': chunk.length,
|
||||||
|
'Content-Range': `bytes ${start}-${end}/${fileSize}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadedBytes += chunk.length;
|
||||||
|
chunkIndex++;
|
||||||
|
|
||||||
|
if (options.onProgress) {
|
||||||
|
options.onProgress((uploadedBytes / fileSize) * 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`[TikTok] 업로드 완료! Publish ID: ${publishId}`);
|
||||||
|
|
||||||
|
// Step 3: Check publish status
|
||||||
|
const status = await checkPublishStatus(credentials.accessToken, publishId);
|
||||||
|
|
||||||
|
// 업로드 히스토리 저장
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO tiktok_upload_history
|
||||||
|
(user_id, history_id, publish_id, title, privacy_level, status, uploaded_at)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [userId, options.historyId || null, publishId, metadata.title, options.privacyLevel || 'SELF_ONLY', status.status]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
publishId,
|
||||||
|
status: status.status,
|
||||||
|
videoId: status.video_id
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[TikTok] 업로드 오류:', error.response?.data || error.message);
|
||||||
|
|
||||||
|
// 에러 기록
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO tiktok_upload_history
|
||||||
|
(user_id, history_id, status, error_message, uploaded_at)
|
||||||
|
VALUES (?, ?, 'failed', ?, datetime('now'))
|
||||||
|
`, [userId, options.historyId || null, error.message]);
|
||||||
|
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비디오 업로드 (Inbox/Draft 방식)
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} videoPath - 비디오 파일 경로
|
||||||
|
* @param {object} metadata - 메타데이터
|
||||||
|
* @param {object} options - 업로드 옵션
|
||||||
|
*/
|
||||||
|
async function uploadVideoToInbox(userId, videoPath, metadata, options = {}) {
|
||||||
|
try {
|
||||||
|
const credentials = await getAuthenticatedCredentials(userId);
|
||||||
|
const fileSize = fs.statSync(videoPath).size;
|
||||||
|
|
||||||
|
// Initialize inbox upload
|
||||||
|
const initResponse = await axios.post(
|
||||||
|
TIKTOK_UPLOAD_INBOX_URL,
|
||||||
|
{
|
||||||
|
source_info: {
|
||||||
|
source: 'FILE_UPLOAD',
|
||||||
|
video_size: fileSize,
|
||||||
|
chunk_size: Math.min(fileSize, 10 * 1024 * 1024),
|
||||||
|
total_chunk_count: Math.ceil(fileSize / (10 * 1024 * 1024))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${credentials.accessToken}`,
|
||||||
|
'Content-Type': 'application/json; charset=UTF-8'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (initResponse.data.error?.code) {
|
||||||
|
throw new Error(initResponse.data.error.message || 'Inbox upload initialization failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
const uploadUrl = initResponse.data.data?.upload_url;
|
||||||
|
const publishId = initResponse.data.data?.publish_id;
|
||||||
|
|
||||||
|
// Upload file
|
||||||
|
const fileBuffer = fs.readFileSync(videoPath);
|
||||||
|
await axios.put(uploadUrl, fileBuffer, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'video/mp4',
|
||||||
|
'Content-Length': fileSize,
|
||||||
|
'Content-Range': `bytes 0-${fileSize - 1}/${fileSize}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`[TikTok] Inbox 업로드 완료! Publish ID: ${publishId}`);
|
||||||
|
|
||||||
|
return {
|
||||||
|
publishId,
|
||||||
|
status: 'uploaded_to_inbox',
|
||||||
|
message: 'TikTok 앱에서 영상을 확인하고 게시해주세요.'
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[TikTok] Inbox 업로드 오류:', error.response?.data || error.message);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 게시 상태 확인
|
||||||
|
* @param {string} accessToken - 액세스 토큰
|
||||||
|
* @param {string} publishId - 게시 ID
|
||||||
|
*/
|
||||||
|
async function checkPublishStatus(accessToken, publishId) {
|
||||||
|
try {
|
||||||
|
const response = await axios.post(
|
||||||
|
TIKTOK_PUBLISH_STATUS_URL,
|
||||||
|
{ publish_id: publishId },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${accessToken}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return response.data.data || { status: 'unknown' };
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[TikTok] 상태 확인 오류:', error.response?.data || error.message);
|
||||||
|
return { status: 'unknown', error: error.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 TikTok 설정 조회
|
||||||
|
*/
|
||||||
|
function getUserTikTokSettings(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`SELECT * FROM tiktok_settings WHERE user_id = ?`, [userId], (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row || {
|
||||||
|
default_privacy: 'SELF_ONLY',
|
||||||
|
disable_duet: 0,
|
||||||
|
disable_comment: 0,
|
||||||
|
disable_stitch: 0,
|
||||||
|
auto_upload: 0,
|
||||||
|
upload_to_inbox: 1
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 TikTok 설정 업데이트
|
||||||
|
*/
|
||||||
|
function updateUserTikTokSettings(userId, settings) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const fields = [];
|
||||||
|
const values = [];
|
||||||
|
|
||||||
|
const allowedFields = [
|
||||||
|
'default_privacy', 'disable_duet', 'disable_comment',
|
||||||
|
'disable_stitch', 'auto_upload', 'upload_to_inbox', 'default_hashtags'
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const field of allowedFields) {
|
||||||
|
if (settings[field] !== undefined) {
|
||||||
|
fields.push(`${field} = ?`);
|
||||||
|
values.push(settings[field]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fields.length === 0) {
|
||||||
|
resolve({ success: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
values.push(userId);
|
||||||
|
|
||||||
|
db.run(`
|
||||||
|
UPDATE tiktok_settings SET ${fields.join(', ')}, updated_at = datetime('now')
|
||||||
|
WHERE user_id = ?
|
||||||
|
`, values, function (err) {
|
||||||
|
if (err) {
|
||||||
|
// INSERT 시도
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO tiktok_settings (user_id, ${fields.map(f => f.split(' = ')[0]).join(', ')})
|
||||||
|
VALUES (?, ${fields.map(() => '?').join(', ')})
|
||||||
|
`, [userId, ...values.slice(0, -1)], function (err2) {
|
||||||
|
if (err2) reject(err2);
|
||||||
|
else resolve({ success: true });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
resolve({ success: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 업로드 히스토리 조회
|
||||||
|
*/
|
||||||
|
function getUploadHistory(userId, limit = 20) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT * FROM tiktok_upload_history
|
||||||
|
WHERE user_id = ?
|
||||||
|
ORDER BY uploaded_at DESC
|
||||||
|
LIMIT ?
|
||||||
|
`, [userId, limit], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TikTok 통계 조회 (사용자별)
|
||||||
|
*/
|
||||||
|
function getTikTokStats(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT
|
||||||
|
COUNT(*) as total_uploads,
|
||||||
|
SUM(CASE WHEN status = 'completed' THEN 1 ELSE 0 END) as successful_uploads,
|
||||||
|
SUM(CASE WHEN status = 'failed' THEN 1 ELSE 0 END) as failed_uploads
|
||||||
|
FROM tiktok_upload_history
|
||||||
|
WHERE user_id = ?
|
||||||
|
`, [userId], (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row || { total_uploads: 0, successful_uploads: 0, failed_uploads: 0 });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
generateAuthUrl,
|
||||||
|
exchangeCodeForTokens,
|
||||||
|
getAuthenticatedCredentials,
|
||||||
|
getConnectionStatus,
|
||||||
|
disconnectTikTok,
|
||||||
|
uploadVideo,
|
||||||
|
uploadVideoToInbox,
|
||||||
|
checkPublishStatus,
|
||||||
|
getUserTikTokSettings,
|
||||||
|
updateUserTikTokSettings,
|
||||||
|
getUploadHistory,
|
||||||
|
getTikTokStats,
|
||||||
|
TIKTOK_SCOPES
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,610 @@
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const { google } = require('googleapis');
|
||||||
|
const db = require('./db');
|
||||||
|
|
||||||
|
// 클라이언트 시크릿 파일 (Google Cloud Console에서 다운로드)
|
||||||
|
const CREDENTIALS_PATH = path.join(__dirname, 'client_secret.json');
|
||||||
|
|
||||||
|
const SCOPES = [
|
||||||
|
'https://www.googleapis.com/auth/youtube.upload',
|
||||||
|
'https://www.googleapis.com/auth/youtube',
|
||||||
|
'https://www.googleapis.com/auth/youtube.readonly',
|
||||||
|
'https://www.googleapis.com/auth/userinfo.email',
|
||||||
|
'https://www.googleapis.com/auth/userinfo.profile'
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Google OAuth2 클라이언트 생성
|
||||||
|
* @param {string} redirectUri - 콜백 URI
|
||||||
|
*/
|
||||||
|
function createOAuth2Client(redirectUri = null) {
|
||||||
|
if (!fs.existsSync(CREDENTIALS_PATH)) {
|
||||||
|
throw new Error("client_secret.json 파일이 없습니다. Google Cloud Console에서 다운로드하여 server 폴더에 넣어주세요.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const content = fs.readFileSync(CREDENTIALS_PATH, 'utf-8');
|
||||||
|
const credentials = JSON.parse(content);
|
||||||
|
const { client_secret, client_id, redirect_uris } = credentials.installed || credentials.web;
|
||||||
|
|
||||||
|
const finalRedirectUri = redirectUri || redirect_uris[0] || 'http://localhost:3001/api/youtube/oauth/callback';
|
||||||
|
|
||||||
|
return new google.auth.OAuth2(client_id, client_secret, finalRedirectUri);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* OAuth 인증 URL 생성
|
||||||
|
* @param {number} userId - 사용자 ID (state 파라미터로 전달)
|
||||||
|
* @param {string} redirectUri - 콜백 URI
|
||||||
|
*/
|
||||||
|
function generateAuthUrl(userId, redirectUri = null) {
|
||||||
|
const oAuth2Client = createOAuth2Client(redirectUri);
|
||||||
|
|
||||||
|
const authUrl = oAuth2Client.generateAuthUrl({
|
||||||
|
access_type: 'offline',
|
||||||
|
scope: SCOPES,
|
||||||
|
prompt: 'consent', // 항상 refresh_token 받기 위해
|
||||||
|
state: JSON.stringify({ userId }) // 콜백에서 사용자 식별용
|
||||||
|
});
|
||||||
|
|
||||||
|
return authUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 인증 코드로 토큰 교환 및 저장
|
||||||
|
* @param {string} code - 인증 코드
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} redirectUri - 콜백 URI
|
||||||
|
*/
|
||||||
|
async function exchangeCodeForTokens(code, userId, redirectUri = null) {
|
||||||
|
const oAuth2Client = createOAuth2Client(redirectUri);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { tokens } = await oAuth2Client.getToken(code);
|
||||||
|
oAuth2Client.setCredentials(tokens);
|
||||||
|
|
||||||
|
// 사용자 정보 가져오기
|
||||||
|
const oauth2 = google.oauth2({ version: 'v2', auth: oAuth2Client });
|
||||||
|
const userInfo = await oauth2.userinfo.get();
|
||||||
|
|
||||||
|
// YouTube 채널 정보 가져오기
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth: oAuth2Client });
|
||||||
|
const channelRes = await youtube.channels.list({
|
||||||
|
part: 'snippet',
|
||||||
|
mine: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const channel = channelRes.data.items?.[0];
|
||||||
|
|
||||||
|
// DB에 저장
|
||||||
|
const tokenExpiry = tokens.expiry_date ? new Date(tokens.expiry_date).toISOString() : null;
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO youtube_connections
|
||||||
|
(user_id, google_user_id, google_email, youtube_channel_id, youtube_channel_title,
|
||||||
|
access_token, refresh_token, token_expiry, scopes, connected_at)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [
|
||||||
|
userId,
|
||||||
|
userInfo.data.id,
|
||||||
|
userInfo.data.email,
|
||||||
|
channel?.id || null,
|
||||||
|
channel?.snippet?.title || null,
|
||||||
|
tokens.access_token,
|
||||||
|
tokens.refresh_token,
|
||||||
|
tokenExpiry,
|
||||||
|
SCOPES.join(',')
|
||||||
|
], function(err) {
|
||||||
|
if (err) {
|
||||||
|
console.error('[YouTube OAuth] 토큰 저장 실패:', err);
|
||||||
|
reject(err);
|
||||||
|
} else {
|
||||||
|
// 기본 설정도 생성
|
||||||
|
db.run(`
|
||||||
|
INSERT OR IGNORE INTO youtube_settings (user_id) VALUES (?)
|
||||||
|
`, [userId]);
|
||||||
|
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
channelId: channel?.id,
|
||||||
|
channelTitle: channel?.snippet?.title,
|
||||||
|
email: userInfo.data.email
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[YouTube OAuth] 토큰 교환 실패:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자별 인증된 클라이언트 가져오기
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
*/
|
||||||
|
async function getAuthenticatedClientForUser(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT * FROM youtube_connections WHERE user_id = ?
|
||||||
|
`, [userId], async (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!row) {
|
||||||
|
reject(new Error('YouTube 채널이 연결되지 않았습니다. 설정에서 채널을 연결해주세요.'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const oAuth2Client = createOAuth2Client();
|
||||||
|
oAuth2Client.setCredentials({
|
||||||
|
access_token: row.access_token,
|
||||||
|
refresh_token: row.refresh_token,
|
||||||
|
expiry_date: row.token_expiry ? new Date(row.token_expiry).getTime() : null
|
||||||
|
});
|
||||||
|
|
||||||
|
// 토큰 만료 체크 및 갱신
|
||||||
|
try {
|
||||||
|
const tokenInfo = await oAuth2Client.getAccessToken();
|
||||||
|
|
||||||
|
// 새 토큰으로 갱신되었으면 DB 업데이트
|
||||||
|
if (tokenInfo.token !== row.access_token) {
|
||||||
|
const credentials = oAuth2Client.credentials;
|
||||||
|
db.run(`
|
||||||
|
UPDATE youtube_connections
|
||||||
|
SET access_token = ?, token_expiry = ?
|
||||||
|
WHERE user_id = ?
|
||||||
|
`, [
|
||||||
|
credentials.access_token,
|
||||||
|
credentials.expiry_date ? new Date(credentials.expiry_date).toISOString() : null,
|
||||||
|
userId
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve(oAuth2Client);
|
||||||
|
} catch (refreshError) {
|
||||||
|
console.error('[YouTube] 토큰 갱신 실패:', refreshError);
|
||||||
|
// 연결 해제 처리
|
||||||
|
db.run(`DELETE FROM youtube_connections WHERE user_id = ?`, [userId]);
|
||||||
|
reject(new Error('YouTube 인증이 만료되었습니다. 다시 연결해주세요.'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자의 YouTube 연결 상태 확인
|
||||||
|
*/
|
||||||
|
function getConnectionStatus(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`
|
||||||
|
SELECT youtube_channel_id, youtube_channel_title, google_email, connected_at
|
||||||
|
FROM youtube_connections WHERE user_id = ?
|
||||||
|
`, [userId], (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row || null);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* YouTube 연결 해제
|
||||||
|
*/
|
||||||
|
function disconnectYouTube(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(`DELETE FROM youtube_connections WHERE user_id = ?`, [userId], function(err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve({ success: true, deleted: this.changes });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자별 비디오 업로드
|
||||||
|
* @param {number} userId - 사용자 ID
|
||||||
|
* @param {string} videoPath - 비디오 파일 경로
|
||||||
|
* @param {object} seoData - SEO 메타데이터
|
||||||
|
* @param {object} options - 업로드 옵션
|
||||||
|
*/
|
||||||
|
async function uploadVideoForUser(userId, videoPath, seoData, options = {}) {
|
||||||
|
try {
|
||||||
|
const auth = await getAuthenticatedClientForUser(userId);
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth });
|
||||||
|
|
||||||
|
// 사용자 설정 가져오기
|
||||||
|
const settings = await getUserYouTubeSettings(userId);
|
||||||
|
|
||||||
|
const fileSize = fs.statSync(videoPath).size;
|
||||||
|
|
||||||
|
// SEO 데이터 + 기본 설정 병합
|
||||||
|
const title = (seoData.title || 'CastAD 생성 영상').substring(0, 100);
|
||||||
|
const description = (seoData.description || '').substring(0, 5000);
|
||||||
|
const tags = [...(seoData.tags || []), ...(settings.default_tags ? JSON.parse(settings.default_tags) : [])];
|
||||||
|
const categoryId = options.categoryId || settings.default_category_id || '19';
|
||||||
|
const privacyStatus = options.privacyStatus || settings.default_privacy || 'private';
|
||||||
|
|
||||||
|
const res = await youtube.videos.insert({
|
||||||
|
part: 'snippet,status',
|
||||||
|
requestBody: {
|
||||||
|
snippet: {
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
tags: tags.slice(0, 500), // YouTube 태그 제한
|
||||||
|
categoryId,
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
privacyStatus,
|
||||||
|
selfDeclaredMadeForKids: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
media: {
|
||||||
|
body: fs.createReadStream(videoPath),
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
onUploadProgress: evt => {
|
||||||
|
const progress = (evt.bytesRead / fileSize) * 100;
|
||||||
|
if (options.onProgress) options.onProgress(progress);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const videoId = res.data.id;
|
||||||
|
const youtubeUrl = `https://youtu.be/${videoId}`;
|
||||||
|
|
||||||
|
console.log(`[YouTube] 업로드 성공! ${youtubeUrl}`);
|
||||||
|
|
||||||
|
// 플레이리스트에 추가
|
||||||
|
const playlistId = options.playlistId || settings.default_playlist_id;
|
||||||
|
if (playlistId) {
|
||||||
|
try {
|
||||||
|
await addVideoToPlaylist(youtube, playlistId, videoId);
|
||||||
|
console.log(`[YouTube] 플레이리스트(${playlistId})에 추가 완료`);
|
||||||
|
} catch (playlistError) {
|
||||||
|
console.error('[YouTube] 플레이리스트 추가 실패:', playlistError.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 고정 댓글 달기
|
||||||
|
if (seoData.pinnedComment) {
|
||||||
|
try {
|
||||||
|
await postPinnedComment(youtube, videoId, seoData.pinnedComment);
|
||||||
|
console.log('[YouTube] 고정 댓글 추가 완료');
|
||||||
|
} catch (commentError) {
|
||||||
|
console.error('[YouTube] 고정 댓글 실패:', commentError.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 업로드 히스토리 저장
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO upload_history
|
||||||
|
(user_id, history_id, youtube_video_id, youtube_url, title, privacy_status, playlist_id, status)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, 'completed')
|
||||||
|
`, [userId, options.historyId || null, videoId, youtubeUrl, title, privacyStatus, playlistId]);
|
||||||
|
|
||||||
|
return { videoId, url: youtubeUrl };
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[YouTube] 업로드 오류:', error.message);
|
||||||
|
|
||||||
|
// 에러 기록
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO upload_history
|
||||||
|
(user_id, history_id, status, error_message)
|
||||||
|
VALUES (?, ?, 'failed', ?)
|
||||||
|
`, [userId, options.historyId || null, error.message]);
|
||||||
|
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 고정 댓글 달기
|
||||||
|
*/
|
||||||
|
async function postPinnedComment(youtube, videoId, commentText) {
|
||||||
|
const res = await youtube.commentThreads.insert({
|
||||||
|
part: 'snippet',
|
||||||
|
requestBody: {
|
||||||
|
snippet: {
|
||||||
|
videoId,
|
||||||
|
topLevelComment: {
|
||||||
|
snippet: {
|
||||||
|
textOriginal: commentText
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 댓글 고정 (채널 소유자만 가능)
|
||||||
|
// Note: YouTube API에서 직접 고정은 지원하지 않음, 수동으로 해야 함
|
||||||
|
return res.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 플레이리스트에 비디오 추가
|
||||||
|
*/
|
||||||
|
async function addVideoToPlaylist(youtube, playlistId, videoId) {
|
||||||
|
await youtube.playlistItems.insert({
|
||||||
|
part: 'snippet',
|
||||||
|
requestBody: {
|
||||||
|
snippet: {
|
||||||
|
playlistId,
|
||||||
|
resourceId: {
|
||||||
|
kind: 'youtube#video',
|
||||||
|
videoId,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자의 플레이리스트 목록 조회
|
||||||
|
*/
|
||||||
|
async function getPlaylistsForUser(userId) {
|
||||||
|
try {
|
||||||
|
const auth = await getAuthenticatedClientForUser(userId);
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth });
|
||||||
|
|
||||||
|
const res = await youtube.playlists.list({
|
||||||
|
part: 'snippet,contentDetails',
|
||||||
|
mine: true,
|
||||||
|
maxResults: 50,
|
||||||
|
});
|
||||||
|
|
||||||
|
const playlists = res.data.items.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
title: item.snippet.title,
|
||||||
|
description: item.snippet.description,
|
||||||
|
itemCount: item.contentDetails.itemCount,
|
||||||
|
thumbnail: item.snippet.thumbnails?.default?.url,
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 캐시 업데이트
|
||||||
|
playlists.forEach(p => {
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO youtube_playlists
|
||||||
|
(user_id, playlist_id, title, item_count, cached_at)
|
||||||
|
VALUES (?, ?, ?, ?, datetime('now'))
|
||||||
|
`, [userId, p.id, p.title, p.itemCount]);
|
||||||
|
});
|
||||||
|
|
||||||
|
return playlists;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[YouTube] 플레이리스트 조회 오류:', error.message);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 플레이리스트 생성
|
||||||
|
*/
|
||||||
|
async function createPlaylistForUser(userId, title, description = '', privacyStatus = 'public') {
|
||||||
|
try {
|
||||||
|
const auth = await getAuthenticatedClientForUser(userId);
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth });
|
||||||
|
|
||||||
|
const res = await youtube.playlists.insert({
|
||||||
|
part: 'snippet,status',
|
||||||
|
requestBody: {
|
||||||
|
snippet: {
|
||||||
|
title: title.substring(0, 150),
|
||||||
|
description: description.substring(0, 5000),
|
||||||
|
},
|
||||||
|
status: { privacyStatus },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const playlist = {
|
||||||
|
id: res.data.id,
|
||||||
|
title: res.data.snippet.title
|
||||||
|
};
|
||||||
|
|
||||||
|
// 캐시에 추가
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO youtube_playlists
|
||||||
|
(user_id, playlist_id, title, item_count, cached_at)
|
||||||
|
VALUES (?, ?, ?, 0, datetime('now'))
|
||||||
|
`, [userId, playlist.id, playlist.title]);
|
||||||
|
|
||||||
|
return playlist;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[YouTube] 플레이리스트 생성 오류:', error.message);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 YouTube 설정 조회
|
||||||
|
*/
|
||||||
|
function getUserYouTubeSettings(userId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(`SELECT * FROM youtube_settings WHERE user_id = ?`, [userId], (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row || {
|
||||||
|
default_privacy: 'private',
|
||||||
|
default_category_id: '19',
|
||||||
|
default_tags: '[]',
|
||||||
|
auto_upload: 0,
|
||||||
|
upload_timing: 'manual'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자 YouTube 설정 업데이트
|
||||||
|
*/
|
||||||
|
function updateUserYouTubeSettings(userId, settings) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const fields = [];
|
||||||
|
const values = [];
|
||||||
|
|
||||||
|
const allowedFields = [
|
||||||
|
'default_privacy', 'default_category_id', 'default_tags',
|
||||||
|
'default_hashtags', 'auto_upload', 'upload_timing',
|
||||||
|
'scheduled_day', 'scheduled_time', 'default_playlist_id', 'notify_on_upload'
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const field of allowedFields) {
|
||||||
|
if (settings[field] !== undefined) {
|
||||||
|
fields.push(`${field} = ?`);
|
||||||
|
values.push(typeof settings[field] === 'object' ? JSON.stringify(settings[field]) : settings[field]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fields.length === 0) {
|
||||||
|
resolve({ success: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
values.push(userId);
|
||||||
|
|
||||||
|
db.run(`
|
||||||
|
INSERT INTO youtube_settings (user_id, ${allowedFields.map(f => f).join(', ')})
|
||||||
|
VALUES (?, ${allowedFields.map(() => '?').join(', ')})
|
||||||
|
ON CONFLICT(user_id) DO UPDATE SET ${fields.join(', ')}, updatedAt = datetime('now')
|
||||||
|
`.replace('INSERT INTO youtube_settings (user_id, ', `UPDATE youtube_settings SET ${fields.join(', ')}, updatedAt = datetime('now') WHERE user_id = ?`).split('ON CONFLICT')[0] + ' WHERE user_id = ?', values, function(err) {
|
||||||
|
if (err) {
|
||||||
|
// INSERT 시도
|
||||||
|
db.run(`
|
||||||
|
INSERT OR REPLACE INTO youtube_settings (user_id, ${fields.map(f => f.split(' = ')[0]).join(', ')})
|
||||||
|
VALUES (?, ${fields.map(() => '?').join(', ')})
|
||||||
|
`, [userId, ...values.slice(0, -1)], function(err2) {
|
||||||
|
if (err2) reject(err2);
|
||||||
|
else resolve({ success: true });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
resolve({ success: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사용자의 업로드 히스토리 조회
|
||||||
|
*/
|
||||||
|
function getUploadHistory(userId, limit = 20) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(`
|
||||||
|
SELECT * FROM upload_history
|
||||||
|
WHERE user_id = ?
|
||||||
|
ORDER BY uploaded_at DESC
|
||||||
|
LIMIT ?
|
||||||
|
`, [userId, limit], (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows || []);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Legacy 함수들 (기존 코드 호환용)
|
||||||
|
// ============================================
|
||||||
|
const TOKEN_PATH = path.join(__dirname, 'tokens.json');
|
||||||
|
|
||||||
|
async function getAuthenticatedClient() {
|
||||||
|
if (!fs.existsSync(CREDENTIALS_PATH)) {
|
||||||
|
throw new Error("client_secret.json 파일이 없습니다.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const content = fs.readFileSync(CREDENTIALS_PATH, 'utf-8');
|
||||||
|
const credentials = JSON.parse(content);
|
||||||
|
const { client_secret, client_id, redirect_uris } = credentials.installed || credentials.web;
|
||||||
|
|
||||||
|
const oAuth2Client = new google.auth.OAuth2(client_id, client_secret, "http://localhost:3001/oauth2callback");
|
||||||
|
|
||||||
|
if (fs.existsSync(TOKEN_PATH)) {
|
||||||
|
const token = fs.readFileSync(TOKEN_PATH, 'utf-8');
|
||||||
|
oAuth2Client.setCredentials(JSON.parse(token));
|
||||||
|
return oAuth2Client;
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error("YouTube 인증 토큰이 없습니다.");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function uploadVideo(videoPath, seoData, playlistId = null, privacyStatus = 'public') {
|
||||||
|
// Legacy: 기존 단일 계정 방식
|
||||||
|
try {
|
||||||
|
const auth = await getAuthenticatedClient();
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth });
|
||||||
|
|
||||||
|
const fileSize = fs.statSync(videoPath).size;
|
||||||
|
const title = (seoData.title || 'CastAD 생성 영상').substring(0, 100);
|
||||||
|
const description = (seoData.description || '').substring(0, 5000);
|
||||||
|
const tags = seoData.tags || ['AI', 'CastAD'];
|
||||||
|
|
||||||
|
const res = await youtube.videos.insert({
|
||||||
|
part: 'snippet,status',
|
||||||
|
requestBody: {
|
||||||
|
snippet: { title, description, tags, categoryId: '22' },
|
||||||
|
status: { privacyStatus, selfDeclaredMadeForKids: false },
|
||||||
|
},
|
||||||
|
media: { body: fs.createReadStream(videoPath) },
|
||||||
|
});
|
||||||
|
|
||||||
|
const videoId = res.data.id;
|
||||||
|
console.log(`[YouTube] 업로드 성공! https://youtu.be/${videoId}`);
|
||||||
|
|
||||||
|
if (playlistId) {
|
||||||
|
await addVideoToPlaylist(youtube, playlistId, videoId);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { videoId, url: `https://youtu.be/${videoId}` };
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[YouTube] 업로드 오류:', error.message);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPlaylists(maxResults = 50) {
|
||||||
|
const auth = await getAuthenticatedClient();
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth });
|
||||||
|
const res = await youtube.playlists.list({ part: 'snippet,contentDetails', mine: true, maxResults });
|
||||||
|
return res.data.items.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
title: item.snippet.title,
|
||||||
|
itemCount: item.contentDetails.itemCount,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createPlaylist(title, description = '', privacyStatus = 'public') {
|
||||||
|
const auth = await getAuthenticatedClient();
|
||||||
|
const youtube = google.youtube({ version: 'v3', auth });
|
||||||
|
const res = await youtube.playlists.insert({
|
||||||
|
part: 'snippet,status',
|
||||||
|
requestBody: {
|
||||||
|
snippet: { title, description },
|
||||||
|
status: { privacyStatus },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return { playlistId: res.data.id, title: res.data.snippet.title };
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// 새로운 다중 사용자 함수들
|
||||||
|
createOAuth2Client,
|
||||||
|
generateAuthUrl,
|
||||||
|
exchangeCodeForTokens,
|
||||||
|
getAuthenticatedClientForUser,
|
||||||
|
getConnectionStatus,
|
||||||
|
disconnectYouTube,
|
||||||
|
uploadVideoForUser,
|
||||||
|
getPlaylistsForUser,
|
||||||
|
createPlaylistForUser,
|
||||||
|
getUserYouTubeSettings,
|
||||||
|
updateUserYouTubeSettings,
|
||||||
|
getUploadHistory,
|
||||||
|
SCOPES,
|
||||||
|
|
||||||
|
// Legacy 함수들 (기존 코드 호환)
|
||||||
|
getAuthenticatedClient,
|
||||||
|
uploadVideo,
|
||||||
|
getPlaylists,
|
||||||
|
createPlaylist,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
/// <reference lib="dom" />
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Base64로 인코딩된 오디오 데이터를 Uint8Array로 디코딩하는 유틸리티 함수입니다.
|
||||||
|
* @param {string} base64 - Base64 인코딩된 문자열 (data URI 접두사 없이 순수 데이터)
|
||||||
|
* @returns {Uint8Array} - 디코딩된 바이트 배열
|
||||||
|
*/
|
||||||
|
export function decodeBase64(base64: string): Uint8Array {
|
||||||
|
// `atob` 함수를 사용하여 Base64 문자열을 이진 문자열로 디코딩합니다.
|
||||||
|
const binaryString = atob(base64);
|
||||||
|
const len = binaryString.length;
|
||||||
|
// 디코딩된 바이트를 저장할 Uint8Array를 생성합니다.
|
||||||
|
const bytes = new Uint8Array(len);
|
||||||
|
// 각 문자의 ASCII 코드를 바이트 배열에 저장합니다.
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
bytes[i] = binaryString.charCodeAt(i);
|
||||||
|
}
|
||||||
|
return bytes;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PCM 오디오 데이터를 AudioBuffer 객체로 디코딩하는 비동기 함수입니다.
|
||||||
|
* 웹 오디오 API를 사용하여 브라우저에서 오디오를 재생하거나 처리하기 위해 사용됩니다.
|
||||||
|
*
|
||||||
|
* @param {Uint8Array} data - 디코딩할 PCM 오디오 데이터 (Uint8Array 형식)
|
||||||
|
* @param {AudioContext} ctx - 현재 사용 중인 AudioContext 인스턴스
|
||||||
|
* @param {number} sampleRate - 오디오 샘플 레이트 (기본값: 24000 Hz)
|
||||||
|
* @param {number} numChannels - 오디오 채널 수 (기본값: 1, 모노)
|
||||||
|
* @returns {Promise<AudioBuffer>} - 디코딩된 AudioBuffer 객체
|
||||||
|
*/
|
||||||
|
export async function decodeAudioData(
|
||||||
|
data: Uint8Array,
|
||||||
|
ctx: AudioContext,
|
||||||
|
sampleRate: number = 24000,
|
||||||
|
numChannels: number = 1,
|
||||||
|
): Promise<AudioBuffer> {
|
||||||
|
// 16비트 정렬을 확인하고 필요한 경우 버퍼 크기를 조정합니다.
|
||||||
|
// (createBuffer는 짝수 길이의 버퍼를 선호할 수 있습니다.)
|
||||||
|
let buffer = data.buffer;
|
||||||
|
if (buffer.byteLength % 2 !== 0) {
|
||||||
|
const newBuffer = new ArrayBuffer(buffer.byteLength + 1);
|
||||||
|
new Uint8Array(newBuffer).set(data);
|
||||||
|
buffer = newBuffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Int16Array로 데이터를 해석하여 16비트 PCM 데이터를 처리합니다.
|
||||||
|
const dataInt16 = new Int16Array(buffer);
|
||||||
|
// 총 프레임 수를 계산합니다 (샘플 수 / 채널 수).
|
||||||
|
const frameCount = dataInt16.length / numChannels;
|
||||||
|
// AudioBuffer를 생성합니다. (채널 수, 프레임 수, 샘플 레이트)
|
||||||
|
const audioBuffer = ctx.createBuffer(numChannels, frameCount, sampleRate);
|
||||||
|
|
||||||
|
// 각 오디오 채널에 대해 데이터를 처리합니다.
|
||||||
|
for (let channel = 0; channel < numChannels; channel++) {
|
||||||
|
// 현재 채널의 데이터를 가져옵니다 (Float32Array).
|
||||||
|
const channelData = audioBuffer.getChannelData(channel);
|
||||||
|
for (let i = 0; i < frameCount; i++) {
|
||||||
|
// Int16 값을 Float32 범위 [-1.0, 1.0]으로 변환합니다.
|
||||||
|
// 16비트 부호 있는 정수(short)의 최대값은 32767이므로 이 값으로 나눕니다.
|
||||||
|
channelData[i] = dataInt16[i * numChannels + channel] / 32768.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return audioBuffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AudioBuffer 객체를 WAV 형식의 Blob으로 변환하는 함수입니다.
|
||||||
|
* 이렇게 생성된 Blob은 HTML <audio> 태그에서 직접 재생할 수 있습니다.
|
||||||
|
*
|
||||||
|
* @param {AudioBuffer} abuffer - WAV로 변환할 AudioBuffer 객체
|
||||||
|
* @param {number} len - AudioBuffer의 총 샘플 길이 (프레임 수)
|
||||||
|
* @returns {Blob} - WAV 형식의 오디오 데이터를 담은 Blob 객체
|
||||||
|
*/
|
||||||
|
export function bufferToWaveBlob(abuffer: AudioBuffer, len: number): Blob {
|
||||||
|
const numOfChan = abuffer.numberOfChannels; // 채널 수 (예: 1=모노, 2=스테레오)
|
||||||
|
// WAV 파일의 총 길이를 계산합니다. (데이터 길이 + 헤더 길이)
|
||||||
|
// (샘플 수 * 채널 수 * 2 바이트/샘플 (16비트) + 44 바이트 (WAV 헤더))
|
||||||
|
const length = len * numOfChan * 2 + 44;
|
||||||
|
const buffer = new ArrayBuffer(length); // 전체 WAV 파일 크기의 ArrayBuffer
|
||||||
|
const view = new DataView(buffer); // 데이터를 쓰기 위한 DataView
|
||||||
|
const channels = []; // 각 채널의 데이터를 저장할 배열
|
||||||
|
let i;
|
||||||
|
let sample;
|
||||||
|
let offset = 0; // 현재 읽고 있는 샘플 오프셋
|
||||||
|
let pos = 0; // DataView에 쓰는 현재 위치
|
||||||
|
|
||||||
|
// 16비트 정수를 DataView에 쓰는 헬퍼 함수
|
||||||
|
function setUint16(data: number) {
|
||||||
|
view.setUint16(pos, data, true); // little-endian
|
||||||
|
pos += 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 32비트 정수를 DataView에 쓰는 헬퍼 함수
|
||||||
|
function setUint32(data: number) {
|
||||||
|
view.setUint32(pos, data, true); // little-endian
|
||||||
|
pos += 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- WAV 헤더 작성 ---
|
||||||
|
setUint32(0x46464952); // "RIFF" chunk ID
|
||||||
|
setUint32(length - 8); // ChunkSize (파일 길이 - 8 바이트)
|
||||||
|
setUint32(0x45564157); // "WAVE" format
|
||||||
|
|
||||||
|
setUint32(0x20746d66); // "fmt " sub-chunk ID
|
||||||
|
setUint32(16); // Subchunk1Size (fmt 서브 청크 길이 = 16 바이트)
|
||||||
|
setUint16(1); // AudioFormat (PCM = 1)
|
||||||
|
setUint16(numOfChan); // NumChannels
|
||||||
|
setUint32(abuffer.sampleRate); // SampleRate
|
||||||
|
setUint32(abuffer.sampleRate * 2 * numOfChan); // ByteRate (SampleRate * NumChannels * BitsPerSample/8)
|
||||||
|
setUint16(numOfChan * 2); // BlockAlign (NumChannels * BitsPerSample/8)
|
||||||
|
setUint16(16); // BitsPerSample (현재 예제에서는 16비트로 고정)
|
||||||
|
|
||||||
|
setUint32(0x61746164); // "data" sub-chunk ID
|
||||||
|
setUint32(length - pos - 4); // Subchunk2Size (데이터 길이)
|
||||||
|
|
||||||
|
// --- 인터리브된 오디오 데이터 작성 ---
|
||||||
|
// 각 채널의 오디오 데이터를 배열에 저장
|
||||||
|
for (i = 0; i < abuffer.numberOfChannels; i++)
|
||||||
|
channels.push(abuffer.getChannelData(i));
|
||||||
|
|
||||||
|
// 각 샘플을 순회하며 채널 데이터를 인터리브하여 DataView에 작성
|
||||||
|
while (offset < len) {
|
||||||
|
for (i = 0; i < numOfChan; i++) {
|
||||||
|
// DataView에 쓰기 전 안전한 경계 검사
|
||||||
|
if (pos + 2 > length) break;
|
||||||
|
|
||||||
|
// 채널 인터리브 (예: 좌, 우, 좌, 우 ...)
|
||||||
|
const channel = channels[i];
|
||||||
|
// 채널 데이터에서 현재 오프셋의 샘플을 가져옵니다. (안전하게 접근)
|
||||||
|
const s = channel && offset < channel.length ? channel[offset] : 0;
|
||||||
|
|
||||||
|
// 샘플 값을 -1에서 1 사이로 클램프(clamp)합니다.
|
||||||
|
sample = Math.max(-1, Math.min(1, s));
|
||||||
|
// 16비트 부호 있는 정수(-32768 ~ 32767) 스케일로 변환합니다.
|
||||||
|
sample = (sample < 0 ? sample * 0x8000 : sample * 0x7FFF) | 0;
|
||||||
|
view.setInt16(pos, sample, true); // 16비트 샘플 작성 (little-endian)
|
||||||
|
pos += 2;
|
||||||
|
}
|
||||||
|
offset++; // 다음 원본 샘플로 이동
|
||||||
|
}
|
||||||
|
|
||||||
|
// 최종적으로 WAV Blob을 생성하여 반환합니다.
|
||||||
|
return new Blob([buffer], { type: 'audio/wav' });
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
import { FFmpeg } from '@ffmpeg/ffmpeg';
|
||||||
|
import { fetchFile, toBlobURL } from '@ffmpeg/util';
|
||||||
|
|
||||||
|
let ffmpeg: FFmpeg | null = null; // FFmpeg 인스턴스를 저장할 변수
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FFmpeg WASM 모듈을 로드하는 함수입니다.
|
||||||
|
* 한 번 로드된 FFmpeg 인스턴스는 재사용됩니다.
|
||||||
|
* FFmpeg worker 스크립트의 상대 경로 문제를 해결하기 위한 패치 로직을 포함합니다.
|
||||||
|
* @returns {Promise<FFmpeg>} - 로드된 FFmpeg 인스턴스
|
||||||
|
*/
|
||||||
|
const loadFFmpeg = async () => {
|
||||||
|
if (ffmpeg) return ffmpeg; // 이미 로드되어 있다면 기존 인스턴스 반환
|
||||||
|
|
||||||
|
ffmpeg = new FFmpeg(); // 새로운 FFmpeg 인스턴스 생성
|
||||||
|
|
||||||
|
// FFmpeg 코어 및 관련 파일의 CDN 기본 URL
|
||||||
|
const coreBaseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm';
|
||||||
|
const ffmpegBaseURL = 'https://unpkg.com/@ffmpeg/ffmpeg@0.12.10/dist/esm';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FFmpeg worker 스크립트의 상대 경로 import를 절대 경로로 패치하는 헬퍼 함수입니다.
|
||||||
|
* `@ffmpeg/ffmpeg` 라이브러리의 worker.js 파일은 내부적으로 `./classes.js`와 같은 상대 경로를 사용하는데,
|
||||||
|
* Blob URL로 로드될 경우 이 상대 경로를 해석하지 못하는 문제가 발생합니다.
|
||||||
|
* 따라서 worker.js 내용을 동적으로 가져와 절대 경로로 수정한 후 Blob URL로 만들어 사용합니다.
|
||||||
|
* @returns {Promise<string>} - 패치된 worker 스크립트의 Blob URL
|
||||||
|
*/
|
||||||
|
const getPatchedWorkerBlob = async () => {
|
||||||
|
try {
|
||||||
|
// 원본 worker.js 스크립트를 CDN에서 가져옵니다.
|
||||||
|
const response = await fetch(`${ffmpegBaseURL}/worker.js`);
|
||||||
|
let text = await response.text();
|
||||||
|
|
||||||
|
console.log("원본 Worker 스크립트 길이:", text.length);
|
||||||
|
|
||||||
|
// 상대 경로 임포트(예: from "./classes.js")를 절대 경로로 교체합니다.
|
||||||
|
// 정규식을 사용하여 "./classes.js" 또는 './classes.js' 패턴을 찾아 교체합니다.
|
||||||
|
const patchedText = text.replace(
|
||||||
|
/from\s*["']\.\/classes\.js["']/g,
|
||||||
|
`from "${ffmpegBaseURL}/classes.js"`
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("패치된 Worker 스크립트 길이:", patchedText.length);
|
||||||
|
|
||||||
|
// 패치된 스크립트 내용을 Blob으로 만들고, 이를 위한 URL을 생성합니다.
|
||||||
|
const blob = new Blob([patchedText], { type: 'text/javascript' });
|
||||||
|
const blobUrl = URL.createObjectURL(blob);
|
||||||
|
console.log("생성된 Worker Blob URL:", blobUrl);
|
||||||
|
|
||||||
|
return blobUrl;
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Worker 스크립트 패치 실패:", e);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// FFmpeg의 코어, WASM, worker 스크립트를 로드합니다.
|
||||||
|
// workerURL은 위에서 패치된 Blob URL을 사용합니다.
|
||||||
|
const workerBlobUrl = await getPatchedWorkerBlob(); // 패치된 worker 스크립트 URL을 먼저 생성
|
||||||
|
|
||||||
|
await ffmpeg.load({
|
||||||
|
coreURL: await toBlobURL(`${coreBaseURL}/ffmpeg-core.js`, 'text/javascript'),
|
||||||
|
wasmURL: await toBlobURL(`${coreBaseURL}/ffmpeg-core.wasm`, 'application/wasm'),
|
||||||
|
workerURL: workerBlobUrl, // 패치된 worker URL 사용
|
||||||
|
});
|
||||||
|
|
||||||
|
return ffmpeg;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비디오와 오디오 파일을 클라이언트 사이드에서 FFmpeg WASM을 이용하여 병합합니다.
|
||||||
|
* 이 함수는 주로 미리보기 기능의 '빠른 저장'에 사용됩니다.
|
||||||
|
* @param {string} videoUrl - 병합할 비디오 파일의 URL
|
||||||
|
* @param {string} audioUrl - 병합할 오디오 파일의 URL
|
||||||
|
* @param {(msg: string) => void} onProgress - 진행 상황을 업데이트하는 콜백 함수
|
||||||
|
* @returns {Promise<string>} - 병합된 비디오의 Blob URL
|
||||||
|
*/
|
||||||
|
export const mergeVideoAndAudio = async (
|
||||||
|
videoUrl: string,
|
||||||
|
audioUrl: string,
|
||||||
|
onProgress: (msg: string) => void
|
||||||
|
): Promise<string> => {
|
||||||
|
try {
|
||||||
|
onProgress("FFmpeg 엔진 로딩 중...");
|
||||||
|
const ffmpeg = await loadFFmpeg(); // FFmpeg 인스턴스 로드
|
||||||
|
|
||||||
|
onProgress("비디오/오디오 파일 다운로드 중...");
|
||||||
|
// 비디오와 오디오 파일을 FFmpeg의 가상 파일 시스템(MEMFS)에 씁니다.
|
||||||
|
await ffmpeg.writeFile('input_video.mp4', await fetchFile(videoUrl));
|
||||||
|
|
||||||
|
// 오디오 파일의 확장자를 감지하여 올바른 파일명으로 저장합니다.
|
||||||
|
const isWav = audioUrl.endsWith('wav') || audioUrl.startsWith('blob:'); // Blob URL은 대부분 WAV임
|
||||||
|
const audioExt = isWav ? 'wav' : 'mp3';
|
||||||
|
const audioFilename = `input_audio.${audioExt}`;
|
||||||
|
|
||||||
|
await ffmpeg.writeFile(audioFilename, await fetchFile(audioUrl));
|
||||||
|
|
||||||
|
onProgress("비디오/오디오 병합 및 렌더링 중 (무한 루프 & 오디오 길이 맞춤)...");
|
||||||
|
|
||||||
|
// FFmpeg 명령어 실행
|
||||||
|
// -stream_loop -1 : 비디오를 무한 반복 재생합니다. (오디오가 끝나면 멈추도록 -shortest와 함께 사용)
|
||||||
|
// -i input_video.mp4 : 첫 번째 입력 파일 (비디오)
|
||||||
|
// -i input_audio.wav : 두 번째 입력 파일 (오디오)
|
||||||
|
// -shortest : 가장 짧은 스트림(여기서는 오디오)의 길이에 맞춰 출력을 중단합니다.
|
||||||
|
// -map 0:v:0 : 첫 번째 입력(비디오)의 비디오 스트림을 출력에 매핑합니다.
|
||||||
|
// -map 1:a:0 : 두 번째 입력(오디오)의 오디오 스트림을 출력에 매핑합니다.
|
||||||
|
// -c:v libx264 : 비디오 코덱을 H.264로 재인코딩합니다 (호환성 및 압축).
|
||||||
|
// -preset ultrafast : 인코딩 속도를 최우선으로 설정합니다 (빠른 미리보기용).
|
||||||
|
// -c:a aac : 오디오 코덱을 AAC로 재인코딩합니다 (MP4 표준 오디오 코덱).
|
||||||
|
// -strict experimental : 실험적인 기능(예: AAC 인코더) 사용을 허용합니다.
|
||||||
|
await ffmpeg.exec([
|
||||||
|
'-stream_loop', '-1',
|
||||||
|
'-i', 'input_video.mp4',
|
||||||
|
'-i', audioFilename,
|
||||||
|
'-shortest',
|
||||||
|
'-map', '0:v:0',
|
||||||
|
'-map', '1:a:0',
|
||||||
|
'-c:v', 'libx264',
|
||||||
|
'-preset', 'ultrafast',
|
||||||
|
'-c:a', 'aac',
|
||||||
|
'-strict', 'experimental',
|
||||||
|
'output.mp4'
|
||||||
|
]);
|
||||||
|
|
||||||
|
onProgress("최종 파일 생성 중...");
|
||||||
|
// FFmpeg 가상 파일 시스템에서 결과 파일(output.mp4)을 읽어옵니다.
|
||||||
|
const data = await ffmpeg.readFile('output.mp4');
|
||||||
|
|
||||||
|
// 읽어온 데이터를 Blob으로 만들고, 이를 위한 URL을 생성하여 반환합니다.
|
||||||
|
const blob = new Blob([data], { type: 'video/mp4' });
|
||||||
|
return URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("FFmpeg 병합 오류 발생:", error);
|
||||||
|
throw new Error(`영상 합성 중 오류가 발생했습니다: ${error.message}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,380 @@
|
||||||
|
import { BusinessInfo, TTSConfig, AspectRatio, Language, BusinessDNA } from '../types';
|
||||||
|
import { decodeBase64, decodeAudioData, bufferToWaveBlob } from './audioUtils';
|
||||||
|
|
||||||
|
const SUPPORTED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/heic', 'image/heif'];
|
||||||
|
|
||||||
|
// Helper to convert File object to base64 Data URL (MIME type 포함)
|
||||||
|
export const fileToBase64 = (file: File): Promise<{ base64: string; mimeType: string }> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => {
|
||||||
|
const result = reader.result as string;
|
||||||
|
const [header, base64] = result.split(',');
|
||||||
|
const mimeType = header.split(':')[1].split(';')[0];
|
||||||
|
resolve({ base64, mimeType });
|
||||||
|
};
|
||||||
|
reader.onerror = error => reject(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비즈니스 정보 검색 (Gemini 2.5 Flash + Google Maps Tool) - 백엔드 프록시 이용
|
||||||
|
* @param {string} query - 검색어 (업체명 또는 주소)
|
||||||
|
* @returns {Promise<{name: string, description: string, mapLink?: string}>}
|
||||||
|
*/
|
||||||
|
export const searchBusinessInfo = async (
|
||||||
|
query: string
|
||||||
|
): Promise<{ name: string; description: string; mapLink?: string }> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/gemini/search-business', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}` // 인증 토큰 포함
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ query })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Search Business (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "업체 정보 검색에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 창의적 콘텐츠 생성 (광고 카피 & 가사/스크립트) - 백엔드 프록시 이용
|
||||||
|
* @param {BusinessInfo} info - 비즈니스 정보 객체
|
||||||
|
* @returns {Promise<{adCopy: string[], lyrics: string}>}
|
||||||
|
*/
|
||||||
|
export const generateCreativeContent = async (
|
||||||
|
info: BusinessInfo
|
||||||
|
): Promise<{ adCopy: string[]; lyrics: string }> => {
|
||||||
|
try {
|
||||||
|
// 이미지 File 객체를 Base64로 변환하여 백엔드로 전달
|
||||||
|
const imagesForBackend = await Promise.all(
|
||||||
|
info.images.map(async (file) => await fileToBase64(file))
|
||||||
|
);
|
||||||
|
|
||||||
|
const payload = { ...info, images: imagesForBackend };
|
||||||
|
|
||||||
|
const response = await fetch('/api/gemini/creative-content', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Generate Creative Content (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "창의적 콘텐츠 생성에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 사용자 설정(성별/톤)을 Gemini 미리 정의된 목소리 이름으로 매핑 (이 함수는 백엔드에서 사용)
|
||||||
|
// const getVoiceName = (config: TTSConfig): string => { ... };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 고급 음성 합성 (TTS) - 백엔드 프록시 이용
|
||||||
|
* @param {string} text - 음성으로 변환할 텍스트
|
||||||
|
* @param {TTSConfig} config - TTS 설정
|
||||||
|
* @returns {Promise<string>} - Base64 인코딩된 오디오 데이터 URL
|
||||||
|
*/
|
||||||
|
export const generateAdvancedSpeech = async (
|
||||||
|
text: string,
|
||||||
|
config: TTSConfig
|
||||||
|
): Promise<string> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/gemini/speech', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ text, config })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
// Base64 오디오 데이터를 Blob URL로 변환하여 반환
|
||||||
|
const audioContext = new ((window as any).AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
|
||||||
|
const audioBytes = decodeBase64(data.base64Audio);
|
||||||
|
const audioBuffer = await decodeAudioData(audioBytes, audioContext, 24000, 1);
|
||||||
|
const wavBlob = bufferToWaveBlob(audioBuffer, audioBuffer.length);
|
||||||
|
return URL.createObjectURL(wavBlob);
|
||||||
|
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Generate Advanced Speech (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "성우 음성 생성에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 광고 포스터 생성 - 백엔드 프록시 이용
|
||||||
|
* @param {BusinessInfo} info - 비즈니스 정보 객체
|
||||||
|
* @returns {Promise<{ blobUrl: string; base64: string; mimeType: string }>}
|
||||||
|
*/
|
||||||
|
export const generateAdPoster = async (
|
||||||
|
info: BusinessInfo
|
||||||
|
): Promise<{ blobUrl: string; base64: string; mimeType: string }> => {
|
||||||
|
try {
|
||||||
|
const imagesForBackend = await Promise.all(
|
||||||
|
info.images.map(async (file) => await fileToBase64(file))
|
||||||
|
);
|
||||||
|
const payload = { ...info, images: imagesForBackend };
|
||||||
|
|
||||||
|
const response = await fetch('/api/gemini/ad-poster', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ info: payload })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
// Base64를 Blob URL로 변환
|
||||||
|
const byteCharacters = atob(data.base64);
|
||||||
|
const byteNumbers = new Array(byteCharacters.length);
|
||||||
|
for (let i = 0; i < byteCharacters.length; i++) {
|
||||||
|
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||||
|
}
|
||||||
|
const byteArray = new Uint8Array(byteNumbers);
|
||||||
|
const blob = new Blob([byteArray], { type: data.mimeType });
|
||||||
|
const blobUrl = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
return { blobUrl, base64: data.base64, mimeType: data.mimeType };
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Generate Ad Poster (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "광고 포스터 생성에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 다수의 비즈니스 관련 이미지 생성 (갤러리/슬라이드쇼용) - 백엔드 프록시 이용
|
||||||
|
* @param {BusinessInfo} info - 비즈니스 정보 객체
|
||||||
|
* @param {number} count - 생성할 이미지 개수
|
||||||
|
* @returns {Promise<string[]>} - Base64 Data URL 배열
|
||||||
|
*/
|
||||||
|
export const generateImageGallery = async (
|
||||||
|
info: BusinessInfo,
|
||||||
|
count: number
|
||||||
|
): Promise<string[]> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/gemini/image-gallery', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ info, count })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data.images;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Generate Image Gallery (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "이미지 갤러리 생성에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비디오 배경 생성 - 백엔드 프록시 이용
|
||||||
|
* @param {string} posterBase64 - Base64 인코딩된 포스터 이미지 데이터
|
||||||
|
* @param {string} posterMimeType - 포스터 이미지 MIME 타입
|
||||||
|
* @param {AspectRatio} aspectRatio - 비디오 화면 비율
|
||||||
|
* @returns {Promise<string>} - 생성된 비디오의 원격 URL
|
||||||
|
*/
|
||||||
|
export const generateVideoBackground = async (
|
||||||
|
posterBase64: string,
|
||||||
|
posterMimeType: string,
|
||||||
|
aspectRatio: AspectRatio = '16:9'
|
||||||
|
): Promise<string> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/gemini/video-background', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ posterBase64, posterMimeType, aspectRatio })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
// 서버에서 받은 비디오 URL에 API 키를 붙이지 않고 그대로 반환
|
||||||
|
return data.videoUrl;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Generate Video Background (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "비디오 배경 생성에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AI 이미지 검수 (Gemini Vision) - 백엔드 프록시 이용
|
||||||
|
* @param {Array<object>} imagesData - Base64 인코딩된 이미지 데이터 배열 ({ mimeType, base64 })
|
||||||
|
* @returns {Promise<Array<object>>} - 선별된 Base64 이미지 데이터 배열
|
||||||
|
*/
|
||||||
|
export const filterBestImages = async (
|
||||||
|
imagesData: { base64: string; mimeType: string }[]
|
||||||
|
): Promise<{ base64: string; mimeType: string }[]> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/gemini/filter-images', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ imagesData })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data.filteredImages;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Filter Best Images (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "이미지 검수에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 리뷰 기반 마케팅 설명 생성 - 백엔드 프록시 이용
|
||||||
|
* @param {string} name - 업체명
|
||||||
|
* @param {string} rawDescription - 기본 설명
|
||||||
|
* @param {string[]} reviews - 고객 리뷰 배열
|
||||||
|
* @param {number} rating - 평균 별점
|
||||||
|
* @returns {Promise<string>} - 생성된 설명
|
||||||
|
*/
|
||||||
|
export const enrichDescriptionWithReviews = async (
|
||||||
|
name: string,
|
||||||
|
rawDescription: string,
|
||||||
|
reviews: string[],
|
||||||
|
rating: number
|
||||||
|
): Promise<string> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/gemini/enrich-description', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ name, rawDescription, reviews, rating })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data.enrichedDescription;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Enrich Description (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "마케팅 설명 생성에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이미지에서 텍스트 스타일(CSS) 추출 - 백엔드 프록시 이용
|
||||||
|
* @param {File} imageFile - 이미지 File 객체
|
||||||
|
* @returns {Promise<string>} - 생성된 CSS 코드
|
||||||
|
*/
|
||||||
|
export const extractTextEffectFromImage = async (
|
||||||
|
imageFile: File
|
||||||
|
): Promise<string> => {
|
||||||
|
try {
|
||||||
|
const imageForBackend = await fileToBase64(imageFile);
|
||||||
|
const response = await fetch('/api/gemini/text-effect', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ imageFile: imageForBackend })
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data.cssCode;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Extract Text Effect (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "텍스트 스타일 분석에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 비즈니스 DNA 분석 (Gemini 2.5 Flash + Google Search Grounding) - 백엔드 프록시 이용
|
||||||
|
* 펜션/숙소의 브랜드 DNA를 분석하여 톤앤매너, 타겟 고객, 컬러, 키워드, 시각적 스타일을 추출
|
||||||
|
* @param {string} nameOrUrl - 펜션 이름 또는 URL
|
||||||
|
* @param {File[]} images - 펜션 이미지들 (선택)
|
||||||
|
* @param {(progress: string) => void} onProgress - 진행 상황 콜백
|
||||||
|
* @returns {Promise<BusinessDNA>} - 분석된 DNA 데이터
|
||||||
|
*/
|
||||||
|
export const analyzeBusinessDNA = async (
|
||||||
|
nameOrUrl: string,
|
||||||
|
images?: File[],
|
||||||
|
onProgress?: (progress: string) => void
|
||||||
|
): Promise<BusinessDNA> => {
|
||||||
|
try {
|
||||||
|
onProgress?.('Google 검색으로 정보 수집 중...');
|
||||||
|
|
||||||
|
// 이미지가 있으면 Base64로 변환
|
||||||
|
let imagesForBackend: { base64: string; mimeType: string }[] = [];
|
||||||
|
if (images && images.length > 0) {
|
||||||
|
onProgress?.('이미지 분석 준비 중...');
|
||||||
|
imagesForBackend = await Promise.all(
|
||||||
|
images.slice(0, 5).map(file => fileToBase64(file)) // 최대 5장만
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress?.('AI가 브랜드 DNA를 분석하고 있습니다...');
|
||||||
|
|
||||||
|
const response = await fetch('/api/gemini/analyze-dna', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
nameOrUrl,
|
||||||
|
images: imagesForBackend
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
onProgress?.('DNA 분석 완료!');
|
||||||
|
return data.dna as BusinessDNA;
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Analyze Business DNA (Frontend) Failed:", e);
|
||||||
|
throw new Error(e.message || "비즈니스 DNA 분석에 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,259 @@
|
||||||
|
import { BusinessInfo } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이미지 파일의 간단한 해시를 생성합니다 (파일 크기 + 첫 바이트).
|
||||||
|
*/
|
||||||
|
const getImageFingerprint = async (file: File): Promise<string> => {
|
||||||
|
const size = file.size;
|
||||||
|
const slice = file.slice(0, 1024);
|
||||||
|
const buffer = await slice.arrayBuffer();
|
||||||
|
const bytes = new Uint8Array(buffer);
|
||||||
|
let sum = 0;
|
||||||
|
for (let i = 0; i < bytes.length; i++) {
|
||||||
|
sum = (sum + bytes[i]) % 65536;
|
||||||
|
}
|
||||||
|
return `${size}-${sum}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface CrawlOptions {
|
||||||
|
maxImages?: number;
|
||||||
|
existingFingerprints?: Set<string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Google Maps URL에서 장소 정보를 추출합니다.
|
||||||
|
* 지원 URL 형식:
|
||||||
|
* - https://maps.google.com/maps?q=장소이름
|
||||||
|
* - https://www.google.com/maps/place/장소이름
|
||||||
|
* - https://goo.gl/maps/...
|
||||||
|
* - https://maps.app.goo.gl/...
|
||||||
|
*/
|
||||||
|
export const parseGoogleMapsUrl = (url: string): string | null => {
|
||||||
|
try {
|
||||||
|
// maps.google.com 또는 google.com/maps 형식
|
||||||
|
if (url.includes('google.com/maps') || url.includes('maps.google.com')) {
|
||||||
|
// /place/장소이름 형식
|
||||||
|
const placeMatch = url.match(/\/place\/([^\/\?]+)/);
|
||||||
|
if (placeMatch) {
|
||||||
|
return decodeURIComponent(placeMatch[1].replace(/\+/g, ' '));
|
||||||
|
}
|
||||||
|
// ?q=장소이름 형식
|
||||||
|
const urlObj = new URL(url);
|
||||||
|
const query = urlObj.searchParams.get('q');
|
||||||
|
if (query) {
|
||||||
|
return decodeURIComponent(query.replace(/\+/g, ' '));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Google Maps URL 또는 검색어로 장소 정보를 가져옵니다.
|
||||||
|
*/
|
||||||
|
export const crawlGooglePlace = async (
|
||||||
|
urlOrQuery: string,
|
||||||
|
onProgress?: (msg: string) => void,
|
||||||
|
options?: CrawlOptions
|
||||||
|
): Promise<Partial<BusinessInfo>> => {
|
||||||
|
const maxImages = options?.maxImages ?? 100;
|
||||||
|
const existingFingerprints = options?.existingFingerprints ?? new Set<string>();
|
||||||
|
|
||||||
|
onProgress?.("Google 지도 정보 가져오는 중...");
|
||||||
|
|
||||||
|
try {
|
||||||
|
// URL에서 검색어 추출 시도
|
||||||
|
let query = parseGoogleMapsUrl(urlOrQuery);
|
||||||
|
|
||||||
|
// URL 파싱 실패 시 직접 검색어로 사용
|
||||||
|
if (!query) {
|
||||||
|
// URL 형식이 아니면 검색어로 간주
|
||||||
|
if (!urlOrQuery.startsWith('http')) {
|
||||||
|
query = urlOrQuery;
|
||||||
|
} else {
|
||||||
|
throw new Error("지원되지 않는 Google Maps URL 형식입니다.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress?.(`'${query}' 검색 중...`);
|
||||||
|
|
||||||
|
// Google Places API로 검색
|
||||||
|
const placeDetails = await searchPlaceDetails(query);
|
||||||
|
if (!placeDetails) {
|
||||||
|
throw new Error("Google Places에서 해당 장소를 찾을 수 없습니다.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalPhotos = placeDetails.photos?.length || 0;
|
||||||
|
onProgress?.(`'${placeDetails.displayName.text}' 정보 수신 완료. 이미지 다운로드 중... (총 ${totalPhotos}장 중 최대 ${maxImages}장)`);
|
||||||
|
|
||||||
|
// 사진을 랜덤하게 섞기
|
||||||
|
const photos = placeDetails.photos || [];
|
||||||
|
const shuffledPhotos = [...photos].sort(() => Math.random() - 0.5);
|
||||||
|
|
||||||
|
// 사진 다운로드 (중복 검사 포함)
|
||||||
|
const imageFiles: File[] = [];
|
||||||
|
let skippedDuplicates = 0;
|
||||||
|
|
||||||
|
for (let i = 0; i < shuffledPhotos.length && imageFiles.length < maxImages; i++) {
|
||||||
|
try {
|
||||||
|
onProgress?.(`이미지 다운로드 중 (${imageFiles.length + 1}/${maxImages})...`);
|
||||||
|
const file = await fetchPlacePhoto(shuffledPhotos[i].name);
|
||||||
|
if (file) {
|
||||||
|
const newFile = new File([file], `google_${i}.jpg`, { type: 'image/jpeg' });
|
||||||
|
|
||||||
|
// 중복 검사
|
||||||
|
const fingerprint = await getImageFingerprint(newFile);
|
||||||
|
if (existingFingerprints.has(fingerprint)) {
|
||||||
|
console.log(`중복 이미지 발견, 건너뜁니다`);
|
||||||
|
skippedDuplicates++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
imageFiles.push(newFile);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("이미지 다운로드 실패:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (skippedDuplicates > 0) {
|
||||||
|
console.log(`총 ${skippedDuplicates}장의 중복 이미지를 건너뛰었습니다.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress?.(`${imageFiles.length}장의 이미지를 가져왔습니다.`);
|
||||||
|
|
||||||
|
// 설명 생성
|
||||||
|
let description = '';
|
||||||
|
if (placeDetails.generativeSummary?.overview?.text) {
|
||||||
|
description = placeDetails.generativeSummary.overview.text;
|
||||||
|
} else if (placeDetails.reviews && placeDetails.reviews.length > 0) {
|
||||||
|
description = placeDetails.reviews[0].text.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: placeDetails.displayName.text,
|
||||||
|
description: description || `${placeDetails.displayName.text} - ${placeDetails.primaryTypeDisplayName?.text || ''} (${placeDetails.formattedAddress})`,
|
||||||
|
images: imageFiles,
|
||||||
|
address: placeDetails.formattedAddress,
|
||||||
|
category: placeDetails.primaryTypeDisplayName?.text,
|
||||||
|
sourceUrl: urlOrQuery
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Google Places 크롤링 실패:", error);
|
||||||
|
throw new Error(error.message || "Google Places 정보를 가져오는데 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
interface PlaceDetails {
|
||||||
|
displayName: { text: string };
|
||||||
|
formattedAddress: string;
|
||||||
|
rating?: number;
|
||||||
|
userRatingCount?: number;
|
||||||
|
reviews?: {
|
||||||
|
name: string;
|
||||||
|
relativePublishTimeDescription: string;
|
||||||
|
text: { text: string };
|
||||||
|
rating: number;
|
||||||
|
}[];
|
||||||
|
photos?: {
|
||||||
|
name: string;
|
||||||
|
widthPx: number;
|
||||||
|
heightPx: number;
|
||||||
|
}[];
|
||||||
|
generativeSummary?: { overview: { text: string } };
|
||||||
|
primaryTypeDisplayName?: { text: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Google Places API를 사용하여 장소를 검색하고 상세 정보를 가져옵니다.
|
||||||
|
*/
|
||||||
|
export const searchPlaceDetails = async (query: string): Promise<PlaceDetails | null> => {
|
||||||
|
try {
|
||||||
|
// 1. 텍스트 검색 (Text Search) - 백엔드 프록시 사용
|
||||||
|
const searchRes = await fetch(`/api/google/places/search`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
textQuery: query,
|
||||||
|
languageCode: "ko"
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!searchRes.ok) {
|
||||||
|
const errorData = await searchRes.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${searchRes.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchData = await searchRes.json();
|
||||||
|
if (!searchData.places || searchData.places.length === 0) return null;
|
||||||
|
|
||||||
|
const placeId = searchData.places[0].name.split('/')[1];
|
||||||
|
|
||||||
|
// 2. 상세 정보 요청 (Details) - 백엔드 프록시 사용
|
||||||
|
const fieldMask = [
|
||||||
|
'displayName',
|
||||||
|
'formattedAddress',
|
||||||
|
'rating',
|
||||||
|
'userRatingCount',
|
||||||
|
'reviews',
|
||||||
|
'photos',
|
||||||
|
'primaryTypeDisplayName'
|
||||||
|
].join(',');
|
||||||
|
|
||||||
|
const detailRes = await fetch(`/api/google/places/details`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
placeId,
|
||||||
|
fieldMask
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!detailRes.ok) {
|
||||||
|
const errorData = await detailRes.json();
|
||||||
|
throw new Error(errorData.error || `Server error: ${detailRes.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await detailRes.json();
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Google Places API Error (Frontend):", error);
|
||||||
|
throw new Error(error.message || "Google Places 정보를 가져오는데 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 사진 리소스 이름(media key)을 사용하여 실제 이미지 Blob을 다운로드합니다.
|
||||||
|
* 백엔드 프록시 이용.
|
||||||
|
*/
|
||||||
|
export const fetchPlacePhoto = async (photoName: string, maxWidth = 800): Promise<File | null> => {
|
||||||
|
try {
|
||||||
|
if (!photoName) return null;
|
||||||
|
|
||||||
|
const response = await fetch('/api/google/places/photo', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ photoName, maxWidthPx: maxWidth })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) return null;
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new File([blob], "place_photo.jpg", { type: "image/jpeg" });
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Photo Fetch Error (Frontend):", error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
import { BusinessInfo } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 헬퍼 함수: URL에서 파일을 가져와 File 객체로 변환합니다.
|
||||||
|
* CORS 문제를 해결하기 위해 백엔드 프록시를 사용합니다.
|
||||||
|
*/
|
||||||
|
const urlToFile = async (url: string, filename: string): Promise<File> => {
|
||||||
|
try {
|
||||||
|
const proxyUrl = `/api/proxy/image?url=${encodeURIComponent(url)}`;
|
||||||
|
const response = await fetch(proxyUrl);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Proxy failed with status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new File([blob], filename, { type: blob.type || 'image/jpeg' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`이미지 다운로드 실패 ${url}:`, e);
|
||||||
|
throw new Error(`이미지 다운로드 실패: ${url}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이미지 파일의 간단한 해시를 생성합니다 (파일 크기 + 첫 바이트).
|
||||||
|
*/
|
||||||
|
const getImageFingerprint = async (file: File): Promise<string> => {
|
||||||
|
const size = file.size;
|
||||||
|
const slice = file.slice(0, 1024);
|
||||||
|
const buffer = await slice.arrayBuffer();
|
||||||
|
const bytes = new Uint8Array(buffer);
|
||||||
|
let sum = 0;
|
||||||
|
for (let i = 0; i < bytes.length; i++) {
|
||||||
|
sum = (sum + bytes[i]) % 65536;
|
||||||
|
}
|
||||||
|
return `${size}-${sum}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 기존 이미지들의 fingerprint 목록을 생성합니다.
|
||||||
|
*/
|
||||||
|
export const getExistingFingerprints = async (existingImages: File[]): Promise<Set<string>> => {
|
||||||
|
const fingerprints = new Set<string>();
|
||||||
|
for (const img of existingImages) {
|
||||||
|
try {
|
||||||
|
const fp = await getImageFingerprint(img);
|
||||||
|
fingerprints.add(fp);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Fingerprint 생성 실패:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fingerprints;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface CrawlOptions {
|
||||||
|
maxImages?: number;
|
||||||
|
existingFingerprints?: Set<string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instagram 프로필 URL에서 username을 추출합니다.
|
||||||
|
*/
|
||||||
|
export const parseInstagramUrl = (url: string): string | null => {
|
||||||
|
try {
|
||||||
|
// instagram.com/username 형식
|
||||||
|
const match = url.match(/instagram\.com\/([a-zA-Z0-9._]+)/);
|
||||||
|
if (match && match[1] && !['p', 'reel', 'stories', 'explore', 'accounts'].includes(match[1])) {
|
||||||
|
return match[1];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 인스타그램 프로필 정보를 크롤링하는 함수입니다.
|
||||||
|
* 클라이언트에서 백엔드 API를 호출하여 인스타그램 프로필 정보를 가져옵니다.
|
||||||
|
* @param {string} url - 인스타그램 프로필 URL
|
||||||
|
* @param {(msg: string) => void} [onProgress] - 진행 상황을 알리는 콜백 함수
|
||||||
|
* @param {CrawlOptions} [options] - 추가 옵션 (maxImages, existingFingerprints)
|
||||||
|
* @returns {Promise<Partial<BusinessInfo>>} - 비즈니스 정보의 부분 객체
|
||||||
|
*/
|
||||||
|
export const crawlInstagramProfile = async (
|
||||||
|
url: string,
|
||||||
|
onProgress?: (msg: string) => void,
|
||||||
|
options?: CrawlOptions
|
||||||
|
): Promise<Partial<BusinessInfo>> => {
|
||||||
|
const maxImages = options?.maxImages ?? 100;
|
||||||
|
const existingFingerprints = options?.existingFingerprints ?? new Set<string>();
|
||||||
|
|
||||||
|
onProgress?.("인스타그램 프로필 정보 가져오는 중 (서버 요청)...");
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 백엔드 Express 서버의 /api/instagram/crawl 엔드포인트 호출
|
||||||
|
const response = await fetch('/api/instagram/crawl', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errData = await response.json().catch(() => ({}));
|
||||||
|
throw new Error(errData.error || "서버 크롤링 요청 실패");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(`백엔드 크롤링 결과: ${data.name}, 총 ${data.totalImages || data.images?.length}장 이미지 (셔플됨)`);
|
||||||
|
|
||||||
|
onProgress?.(`'${data.name}' 정보 수신 완료. 이미지 다운로드 중... (총 ${data.totalImages || '?'}장 중 최대 ${maxImages}장)`);
|
||||||
|
|
||||||
|
// 크롤링된 이미지 URL들을 File 객체로 변환 (중복 검사 포함)
|
||||||
|
const imageFiles: File[] = [];
|
||||||
|
const imageUrls = data.images || [];
|
||||||
|
let skippedDuplicates = 0;
|
||||||
|
|
||||||
|
for (let i = 0; i < imageUrls.length && imageFiles.length < maxImages; i++) {
|
||||||
|
const imgUrl = imageUrls[i];
|
||||||
|
try {
|
||||||
|
onProgress?.(`이미지 다운로드 중 (${imageFiles.length + 1}/${maxImages})...`);
|
||||||
|
const file = await urlToFile(imgUrl, `instagram_${data.username}_${i}.jpg`);
|
||||||
|
|
||||||
|
// 중복 검사
|
||||||
|
const fingerprint = await getImageFingerprint(file);
|
||||||
|
if (existingFingerprints.has(fingerprint)) {
|
||||||
|
console.log(`중복 이미지 발견, 건너뜁니다: ${imgUrl.slice(-30)}`);
|
||||||
|
skippedDuplicates++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
imageFiles.push(file);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("이미지 다운로드 실패, 건너뜁니다:", imgUrl, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (skippedDuplicates > 0) {
|
||||||
|
console.log(`총 ${skippedDuplicates}장의 중복 이미지를 건너뛰었습니다.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (imageFiles.length === 0) {
|
||||||
|
throw new Error("유효한 이미지를 하나도 다운로드하지 못했습니다. 다른 URL을 시도해보세요.");
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress?.(`${imageFiles.length}장의 이미지를 가져왔습니다.`);
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: data.name,
|
||||||
|
description: data.description || `${data.name} - Instagram (@${data.username})`,
|
||||||
|
images: imageFiles,
|
||||||
|
address: '',
|
||||||
|
category: 'Instagram',
|
||||||
|
sourceUrl: url
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("인스타그램 크롤링 실패:", error);
|
||||||
|
throw new Error(error.message || "인스타그램 프로필 정보를 가져오는데 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
import { BusinessInfo } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 헬퍼 함수: URL에서 파일을 가져와 File 객체로 변환합니다.
|
||||||
|
* CORS 문제나 Blob URL 등을 처리하기 위해 백업 프록시 로직을 포함합니다.
|
||||||
|
* @param {string} url - 가져올 파일의 URL
|
||||||
|
* @param {string} filename - 생성할 File 객체의 이름
|
||||||
|
* @returns {Promise<File>} - File 객체
|
||||||
|
*/
|
||||||
|
const urlToFile = async (url: string, filename: string): Promise<File> => {
|
||||||
|
try {
|
||||||
|
// 백엔드 프록시를 통해 이미지 다운로드 (CORS 우회)
|
||||||
|
const proxyUrl = `/api/proxy/image?url=${encodeURIComponent(url)}`;
|
||||||
|
const response = await fetch(proxyUrl);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Proxy failed with status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new File([blob], filename, { type: blob.type || 'image/jpeg' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`이미지 다운로드 실패 ${url}:`, e);
|
||||||
|
throw new Error(`이미지 다운로드 실패: ${url}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 이미지 파일의 간단한 해시를 생성합니다 (파일 크기 + 첫 바이트).
|
||||||
|
* 완벽한 중복 검사는 아니지만 빠르고 대부분의 경우를 처리합니다.
|
||||||
|
*/
|
||||||
|
const getImageFingerprint = async (file: File): Promise<string> => {
|
||||||
|
const size = file.size;
|
||||||
|
const slice = file.slice(0, 1024); // 첫 1KB만 읽기
|
||||||
|
const buffer = await slice.arrayBuffer();
|
||||||
|
const bytes = new Uint8Array(buffer);
|
||||||
|
let sum = 0;
|
||||||
|
for (let i = 0; i < bytes.length; i++) {
|
||||||
|
sum = (sum + bytes[i]) % 65536;
|
||||||
|
}
|
||||||
|
return `${size}-${sum}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 기존 이미지들의 fingerprint 목록을 생성합니다.
|
||||||
|
*/
|
||||||
|
export const getExistingFingerprints = async (existingImages: File[]): Promise<Set<string>> => {
|
||||||
|
const fingerprints = new Set<string>();
|
||||||
|
for (const img of existingImages) {
|
||||||
|
try {
|
||||||
|
const fp = await getImageFingerprint(img);
|
||||||
|
fingerprints.add(fp);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Fingerprint 생성 실패:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fingerprints;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface CrawlOptions {
|
||||||
|
maxImages?: number; // 가져올 최대 이미지 수 (기본값: 100)
|
||||||
|
existingFingerprints?: Set<string>; // 중복 검사용 기존 이미지 fingerprints
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 네이버 플레이스 정보를 크롤링하는 함수입니다.
|
||||||
|
* 클라이언트에서 백엔드 API를 호출하여 네이버 장소 정보를 가져옵니다.
|
||||||
|
* @param {string} url - 네이버 플레이스 URL 또는 장소 ID
|
||||||
|
* @param {(msg: string) => void} [onProgress] - 진행 상황을 알리는 콜백 함수 (선택 사항)
|
||||||
|
* @param {CrawlOptions} [options] - 추가 옵션 (maxImages, existingFingerprints)
|
||||||
|
* @returns {Promise<Partial<BusinessInfo>>} - 비즈니스 정보의 부분 객체
|
||||||
|
*/
|
||||||
|
export const crawlNaverPlace = async (
|
||||||
|
url: string,
|
||||||
|
onProgress?: (msg: string) => void,
|
||||||
|
options?: CrawlOptions
|
||||||
|
): Promise<Partial<BusinessInfo>> => {
|
||||||
|
const maxImages = options?.maxImages ?? 100;
|
||||||
|
const existingFingerprints = options?.existingFingerprints ?? new Set<string>();
|
||||||
|
|
||||||
|
onProgress?.("네이버 플레이스 정보 가져오는 중 (서버 요청)...");
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 백엔드 Express 서버의 /api/naver/crawl 엔드포인트 호출
|
||||||
|
const response = await fetch('/api/naver/crawl', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url }) // 크롤링할 URL을 백엔드로 전송
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
// 서버 응답이 성공적이지 않을 경우 에러 처리
|
||||||
|
const errData = await response.json().catch(() => ({})); // 에러 JSON 파싱 시도
|
||||||
|
throw new Error(errData.error || "서버 크롤링 요청 실패");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json(); // 성공 시 응답 데이터 파싱
|
||||||
|
console.log(`백엔드 크롤링 결과: ${data.name}, 총 ${data.totalImages || data.images?.length}장 이미지 (셔플됨)`);
|
||||||
|
|
||||||
|
onProgress?.(`'${data.name}' 정보 수신 완료. 이미지 다운로드 중... (총 ${data.totalImages || '?'}장 중 최대 ${maxImages}장)`);
|
||||||
|
|
||||||
|
// 크롤링된 이미지 URL들을 File 객체로 변환 (중복 검사 포함)
|
||||||
|
const imageFiles: File[] = [];
|
||||||
|
const imageUrls = data.images || [];
|
||||||
|
let skippedDuplicates = 0;
|
||||||
|
|
||||||
|
for (let i = 0; i < imageUrls.length && imageFiles.length < maxImages; i++) {
|
||||||
|
const imgUrl = imageUrls[i];
|
||||||
|
try {
|
||||||
|
onProgress?.(`이미지 다운로드 중 (${imageFiles.length + 1}/${maxImages})...`);
|
||||||
|
// 각 이미지 URL을 File 객체로 변환
|
||||||
|
const file = await urlToFile(imgUrl, `naver_${data.place_id}_${i}.jpg`);
|
||||||
|
|
||||||
|
// 중복 검사
|
||||||
|
const fingerprint = await getImageFingerprint(file);
|
||||||
|
if (existingFingerprints.has(fingerprint)) {
|
||||||
|
console.log(`중복 이미지 발견, 건너뜁니다: ${imgUrl.slice(-30)}`);
|
||||||
|
skippedDuplicates++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
imageFiles.push(file);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("이미지 다운로드 실패, 건너뜁니다:", imgUrl, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (skippedDuplicates > 0) {
|
||||||
|
console.log(`총 ${skippedDuplicates}장의 중복 이미지를 건너뛰었습니다.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 다운로드된 이미지가 없을 경우 에러 발생
|
||||||
|
if (imageFiles.length === 0) {
|
||||||
|
throw new Error("유효한 이미지를 하나도 다운로드하지 못했습니다. 다른 URL을 시도해보세요.");
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress?.(`${imageFiles.length}장의 이미지를 가져왔습니다.`);
|
||||||
|
|
||||||
|
// 비즈니스 정보 객체 반환
|
||||||
|
return {
|
||||||
|
name: data.name,
|
||||||
|
description: data.description || `${data.name} - ${data.category} (${data.address})`,
|
||||||
|
images: imageFiles,
|
||||||
|
address: data.address,
|
||||||
|
category: data.category,
|
||||||
|
sourceUrl: url
|
||||||
|
};
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("크롤링 실패:", error);
|
||||||
|
throw new Error(error.message || "네이버 플레이스 정보를 가져오는데 실패했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
|
||||||
|
|
||||||
|
// Suno API 응답 인터페이스 (백엔드 응답용)
|
||||||
|
interface SunoBackendResponse {
|
||||||
|
audioUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 가사 정제 로직 (Python의 _sanitize_lyrics 함수를 JavaScript로 포팅).
|
||||||
|
* Suno AI가 가사를 올바르게 해석하도록 특정 패턴을 [Verse 1]과 같은 태그로 변환합니다.
|
||||||
|
* @param {string} lyrics - 원본 가사 텍스트
|
||||||
|
* @returns {string} - Suno AI에 최적화된 정제된 가사 텍스트
|
||||||
|
*/
|
||||||
|
const sanitizeLyrics = (lyrics: string): string => {
|
||||||
|
// 섹션 헤더를 감지하는 정규식 (예: Verse, Chorus, Bridge, Hook, Intro, Outro)
|
||||||
|
const sectionPattern = /^(verse|chorus|bridge|hook|intro|outro)\s*(\d+)?\s*:?/i;
|
||||||
|
const sanitizedLines: string[] = []; // 정제된 가사 라인들을 저장할 배열
|
||||||
|
|
||||||
|
const lines = lyrics.split('\n'); // 가사를 줄 단위로 분리
|
||||||
|
|
||||||
|
for (const rawLine of lines) {
|
||||||
|
const line = rawLine.trim(); // 각 줄의 앞뒤 공백 제거
|
||||||
|
if (!line) {
|
||||||
|
sanitizedLines.push(""); // 빈 줄은 그대로 추가
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = line.match(sectionPattern); // 섹션 패턴 매칭 시도
|
||||||
|
if (match) {
|
||||||
|
// 섹션 이름 첫 글자 대문자화
|
||||||
|
const name = match[1].charAt(0).toUpperCase() + match[1].slice(1).toLowerCase();
|
||||||
|
const number = match[2] || ""; // 섹션 번호 (있으면 사용, 없으면 빈 문자열)
|
||||||
|
// [Verse 1] 형태의 태그로 변환하여 추가
|
||||||
|
const label = `[${name}${number ? ' ' + number : ''}]`;
|
||||||
|
sanitizedLines.push(label);
|
||||||
|
} else {
|
||||||
|
sanitizedLines.push(line); // 패턴에 해당하지 않으면 원본 줄 추가
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = sanitizedLines.join('\n').trim(); // 정제된 줄들을 다시 합치고 최종 공백 제거
|
||||||
|
if (!result) throw new Error("정제된 가사가 비어있습니다. Suno AI에 전달할 유효한 가사가 필요합니다.");
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Suno AI를 사용하여 음악을 생성하는 함수입니다.
|
||||||
|
* 백엔드 프록시 서버(/api/suno/generate)를 통해 요청을 전송하여 CORS 문제 및 안정성을 개선했습니다.
|
||||||
|
*
|
||||||
|
* @param {string} rawLyrics - 사용자가 입력한 원본 가사
|
||||||
|
* @param {string} style - 음악 스타일 (예: Pop, Rock, Acoustic 등)
|
||||||
|
* @param {string} title - 노래 제목
|
||||||
|
* @param {boolean} isFullSong - 전체 길이 곡 생성 여부 (현재는 사용되지 않지만, API에 따라 달라질 수 있음)
|
||||||
|
* @returns {Promise<string>} - 생성된 음악 파일의 URL
|
||||||
|
*/
|
||||||
|
export const generateSunoMusic = async (
|
||||||
|
rawLyrics: string,
|
||||||
|
style: string,
|
||||||
|
title: string,
|
||||||
|
isFullSong: boolean, // 현재는 사용되지 않음
|
||||||
|
isInstrumental: boolean = false // 연주곡 여부
|
||||||
|
): Promise<string> => {
|
||||||
|
|
||||||
|
// 1. 가사 정제 (연주곡이 아닐 때만 수행)
|
||||||
|
let sanitizedLyrics = "";
|
||||||
|
if (!isInstrumental) {
|
||||||
|
sanitizedLyrics = sanitizeLyrics(rawLyrics);
|
||||||
|
} else {
|
||||||
|
// console.log("연주곡 모드: 가사 생성 생략"); // 제거
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 요청 페이로드 구성 (Suno OpenAPI v1 Spec 준수)
|
||||||
|
const payload = {
|
||||||
|
// Custom Mode에서 instrumental이 false이면 prompt는 가사로 사용됨.
|
||||||
|
// instrumental이 true이면 prompt는 사용되지 않음 (하지만 예제에는 포함되어 있으므로 안전하게 유지).
|
||||||
|
prompt: isInstrumental ? "" : sanitizedLyrics,
|
||||||
|
style: style, // tags -> style 로 복구
|
||||||
|
title: title.substring(0, 80), // V4/V4_5ALL 기준 80자 제한 안전하게 적용
|
||||||
|
customMode: true,
|
||||||
|
instrumental: isInstrumental, // make_instrumental -> instrumental 로 복구
|
||||||
|
model: "V5", // 필수 필드: V5 사용
|
||||||
|
callBackUrl: "https://api.example.com/callback" // 필수 필드: 더미 URL이라도 보내야 함
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
// console.log("백엔드를 통해 Suno 음악 생성 요청 시작..."); // 제거
|
||||||
|
|
||||||
|
// 백엔드 엔드포인트 호출 (프록시 사용 X, 로컬 서버 사용)
|
||||||
|
const response = await fetch('/api/suno/generate', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}` // 인증 토큰 포함
|
||||||
|
},
|
||||||
|
body: JSON.stringify(payload) // JSON 페이로드 전송
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorJson = await response.json().catch(() => ({ error: "Unknown Error" }));
|
||||||
|
console.error("Suno Backend Error:", errorJson);
|
||||||
|
throw new Error(`음악 생성 실패 (서버): ${errorJson.error || response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const resData: SunoBackendResponse = await response.json();
|
||||||
|
|
||||||
|
if (!resData.audioUrl) {
|
||||||
|
throw new Error("서버에서 오디오 URL을 반환하지 않았습니다.");
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`생성 완료! Audio URL: ${resData.audioUrl}`);
|
||||||
|
return resData.audioUrl;
|
||||||
|
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error("Suno 서비스 오류 발생", e);
|
||||||
|
throw new Error(e.message || "음악 생성 중 알 수 없는 오류가 발생했습니다.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
#!/bin/bash
|
||||||
|
#
|
||||||
|
# CaStAD1 Nginx 설정 스크립트
|
||||||
|
# 도메인: castad1.ktenterprise.net
|
||||||
|
# 포트: 3001 (백엔드), 5003 (Instagram)
|
||||||
|
#
|
||||||
|
|
||||||
|
# 색상
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
RED='\033[0;31m'
|
||||||
|
YELLOW='\033[1;33m'
|
||||||
|
NC='\033[0m'
|
||||||
|
|
||||||
|
log() { echo -e "${GREEN}[Setup]${NC} $1"; }
|
||||||
|
error() { echo -e "${RED}[ERROR]${NC} $1"; }
|
||||||
|
warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
|
||||||
|
|
||||||
|
# root 권한 확인
|
||||||
|
if [ "$EUID" -ne 0 ]; then
|
||||||
|
error "이 스크립트는 sudo로 실행해야 합니다"
|
||||||
|
echo "사용법: sudo ./setup-nginx-castad1.sh"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
log "CaStAD1 Nginx 설정을 시작합니다..."
|
||||||
|
|
||||||
|
# nginx 설정 파일 생성
|
||||||
|
NGINX_CONF="/etc/nginx/sites-available/castad1"
|
||||||
|
|
||||||
|
log "nginx 설정 파일 생성 중: $NGINX_CONF"
|
||||||
|
|
||||||
|
cat > "$NGINX_CONF" << 'EOF'
|
||||||
|
# ============================================
|
||||||
|
# CaStAD1 Nginx Configuration
|
||||||
|
# Domain: castad1.ktenterprise.net
|
||||||
|
# Port: 3001 (backend), 5003 (instagram)
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
upstream castad1_backend {
|
||||||
|
server 127.0.0.1:3001;
|
||||||
|
keepalive 64;
|
||||||
|
}
|
||||||
|
|
||||||
|
upstream castad1_instagram {
|
||||||
|
server 127.0.0.1:5003;
|
||||||
|
keepalive 32;
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTP → HTTPS 리다이렉트
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
server_name castad1.ktenterprise.net;
|
||||||
|
|
||||||
|
location /.well-known/acme-challenge/ {
|
||||||
|
root /var/www/certbot;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
return 301 https://$host$request_uri;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# HTTPS 서버
|
||||||
|
server {
|
||||||
|
listen 443 ssl http2;
|
||||||
|
listen [::]:443 ssl http2;
|
||||||
|
server_name castad1.ktenterprise.net;
|
||||||
|
|
||||||
|
# SSL 인증서
|
||||||
|
ssl_certificate /etc/letsencrypt/live/castad1.ktenterprise.net/fullchain.pem;
|
||||||
|
ssl_certificate_key /etc/letsencrypt/live/castad1.ktenterprise.net/privkey.pem;
|
||||||
|
|
||||||
|
ssl_protocols TLSv1.2 TLSv1.3;
|
||||||
|
ssl_prefer_server_ciphers on;
|
||||||
|
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
|
||||||
|
ssl_session_cache shared:SSL:10m;
|
||||||
|
|
||||||
|
# 보안 헤더
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-XSS-Protection "1; mode=block" always;
|
||||||
|
|
||||||
|
# 로그
|
||||||
|
access_log /var/log/nginx/castad1_access.log;
|
||||||
|
error_log /var/log/nginx/castad1_error.log;
|
||||||
|
|
||||||
|
# 파일 업로드 크기
|
||||||
|
client_max_body_size 500M;
|
||||||
|
client_body_timeout 300s;
|
||||||
|
|
||||||
|
# 정적 파일 (프론트엔드) - castad1 디렉토리
|
||||||
|
root /home/developer/castad1/dist;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml;
|
||||||
|
|
||||||
|
# 정적 자원 캐싱
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# API 요청
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://castad1_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
proxy_read_timeout 300s;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Instagram API
|
||||||
|
location /instagram/ {
|
||||||
|
proxy_pass http://castad1_instagram/;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_read_timeout 120s;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 렌더링 요청 (긴 타임아웃)
|
||||||
|
location /render {
|
||||||
|
proxy_pass http://castad1_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_read_timeout 600s;
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 다운로드/업로드/임시 파일
|
||||||
|
location ~ ^/(downloads|temp|uploads)/ {
|
||||||
|
proxy_pass http://castad1_backend;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
}
|
||||||
|
|
||||||
|
# SPA 라우팅
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
log "nginx 설정 파일 생성 완료"
|
||||||
|
|
||||||
|
# 심볼릭 링크 생성
|
||||||
|
LINK_PATH="/etc/nginx/sites-enabled/castad1"
|
||||||
|
if [ -L "$LINK_PATH" ]; then
|
||||||
|
warn "심볼릭 링크가 이미 존재합니다. 재생성합니다..."
|
||||||
|
rm "$LINK_PATH"
|
||||||
|
fi
|
||||||
|
|
||||||
|
ln -s "$NGINX_CONF" "$LINK_PATH"
|
||||||
|
log "심볼릭 링크 생성 완료"
|
||||||
|
|
||||||
|
# nginx 설정 테스트
|
||||||
|
log "nginx 설정 테스트 중..."
|
||||||
|
if nginx -t; then
|
||||||
|
log "nginx 설정 테스트 통과"
|
||||||
|
else
|
||||||
|
error "nginx 설정 테스트 실패!"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# nginx 재시작
|
||||||
|
log "nginx 재시작 중..."
|
||||||
|
systemctl reload nginx
|
||||||
|
log "nginx 재시작 완료"
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo -e "${GREEN}╔════════════════════════════════════════════════════════════╗${NC}"
|
||||||
|
echo -e "${GREEN}║ CaStAD1 Nginx 설정 완료! ║${NC}"
|
||||||
|
echo -e "${GREEN}╠════════════════════════════════════════════════════════════╣${NC}"
|
||||||
|
echo -e "${GREEN}║ 도메인: https://castad1.ktenterprise.net ║${NC}"
|
||||||
|
echo -e "${GREEN}║ 백엔드: 127.0.0.1:3001 ║${NC}"
|
||||||
|
echo -e "${GREEN}║ Instagram: 127.0.0.1:5003 ║${NC}"
|
||||||
|
echo -e "${GREEN}║ 정적파일: /home/developer/castad1/dist ║${NC}"
|
||||||
|
echo -e "${GREEN}╚════════════════════════════════════════════════════════════╝${NC}"
|
||||||
|
echo ""
|
||||||
|
|
@ -0,0 +1,296 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { BusinessDNA } from '../../types';
|
||||||
|
import { Badge } from './ui/badge';
|
||||||
|
import {
|
||||||
|
Palette,
|
||||||
|
Users,
|
||||||
|
Sparkles,
|
||||||
|
Eye,
|
||||||
|
Target,
|
||||||
|
Hash,
|
||||||
|
Star,
|
||||||
|
TrendingUp,
|
||||||
|
ExternalLink,
|
||||||
|
Camera,
|
||||||
|
Home,
|
||||||
|
Heart
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
interface DNACardProps {
|
||||||
|
dna: BusinessDNA;
|
||||||
|
className?: string;
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DNACard: React.FC<DNACardProps> = ({ dna, className, compact = false }) => {
|
||||||
|
if (compact) {
|
||||||
|
return (
|
||||||
|
<div className={cn("bg-card rounded-xl border border-border p-4", className)}>
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-lg flex items-center justify-center"
|
||||||
|
style={{ backgroundColor: dna.brandColors.primary + '20' }}
|
||||||
|
>
|
||||||
|
<Sparkles className="w-5 h-5" style={{ color: dna.brandColors.primary }} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">{dna.name}</h3>
|
||||||
|
{dna.tagline && (
|
||||||
|
<p className="text-xs text-muted-foreground">{dna.tagline}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Color Palette (mini) */}
|
||||||
|
<div className="flex gap-1 mb-3">
|
||||||
|
{dna.brandColors.palette?.slice(0, 5).map((color, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="w-6 h-6 rounded-md border border-border/50"
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
title={color}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Keywords (mini) */}
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{dna.keywords.primary.slice(0, 4).map((keyword, idx) => (
|
||||||
|
<Badge key={idx} variant="secondary" className="text-xs">
|
||||||
|
{keyword}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("bg-card rounded-2xl border border-border overflow-hidden", className)}>
|
||||||
|
{/* Header with gradient */}
|
||||||
|
<div
|
||||||
|
className="p-6 text-white"
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(135deg, ${dna.brandColors.primary}, ${dna.brandColors.secondary || dna.brandColors.primary})`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Sparkles className="w-5 h-5" />
|
||||||
|
<span className="text-sm font-medium opacity-90">Business DNA</span>
|
||||||
|
</div>
|
||||||
|
{dna.confidence && (
|
||||||
|
<Badge variant="secondary" className="bg-white/20 text-white border-0">
|
||||||
|
신뢰도 {Math.round(dna.confidence * 100)}%
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold">{dna.name}</h2>
|
||||||
|
{dna.tagline && (
|
||||||
|
<p className="text-white/80 mt-1">{dna.tagline}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
{/* Tone & Manner */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Heart className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">톤 & 매너</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 mb-2">
|
||||||
|
<Badge>{dna.toneAndManner.primary}</Badge>
|
||||||
|
{dna.toneAndManner.secondary && (
|
||||||
|
<Badge variant="outline">{dna.toneAndManner.secondary}</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{dna.toneAndManner.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Target Customers */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Users className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">타겟 고객</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 mb-2">
|
||||||
|
<Badge variant="default">{dna.targetCustomers.primary}</Badge>
|
||||||
|
{dna.targetCustomers.secondary?.map((target, idx) => (
|
||||||
|
<Badge key={idx} variant="outline">{target}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{dna.targetCustomers.ageRange && (
|
||||||
|
<p className="text-xs text-muted-foreground mb-1">
|
||||||
|
예상 연령대: {dna.targetCustomers.ageRange}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{dna.targetCustomers.characteristics && (
|
||||||
|
<div className="flex flex-wrap gap-1 mt-2">
|
||||||
|
{dna.targetCustomers.characteristics.map((char, idx) => (
|
||||||
|
<span key={idx} className="text-xs bg-muted px-2 py-0.5 rounded">
|
||||||
|
{char}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand Colors */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Palette className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">브랜드 컬러</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 mb-2">
|
||||||
|
{dna.brandColors.palette?.map((color, idx) => (
|
||||||
|
<div key={idx} className="flex flex-col items-center">
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-lg border border-border shadow-sm"
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
/>
|
||||||
|
<span className="text-[10px] text-muted-foreground mt-1">{color}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{dna.brandColors.mood}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Visual Style */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Camera className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">시각적 스타일</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3">
|
||||||
|
<div className="flex items-center gap-1 mb-1">
|
||||||
|
<Home className="w-3 h-3 text-muted-foreground" />
|
||||||
|
<span className="text-xs text-muted-foreground">인테리어</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium">{dna.visualStyle.interior}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3">
|
||||||
|
<div className="flex items-center gap-1 mb-1">
|
||||||
|
<Eye className="w-3 h-3 text-muted-foreground" />
|
||||||
|
<span className="text-xs text-muted-foreground">외관</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium">{dna.visualStyle.exterior}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 p-3 bg-muted/30 rounded-lg">
|
||||||
|
<p className="text-xs text-muted-foreground mb-1">분위기</p>
|
||||||
|
<p className="text-sm">{dna.visualStyle.atmosphere}</p>
|
||||||
|
<p className="text-xs text-muted-foreground mt-2">추천 사진 스타일: {dna.visualStyle.photoStyle}</p>
|
||||||
|
{dna.visualStyle.suggestedFilters && (
|
||||||
|
<div className="flex gap-1 mt-2">
|
||||||
|
{dna.visualStyle.suggestedFilters.map((filter, idx) => (
|
||||||
|
<Badge key={idx} variant="outline" className="text-xs">
|
||||||
|
{filter}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Keywords & Hashtags */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Hash className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">키워드 & 해시태그</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-1 mb-2">
|
||||||
|
{dna.keywords.primary.map((keyword, idx) => (
|
||||||
|
<Badge key={idx} className="bg-primary/10 text-primary border-0">
|
||||||
|
{keyword}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{dna.keywords.secondary && (
|
||||||
|
<div className="flex flex-wrap gap-1 mb-3">
|
||||||
|
{dna.keywords.secondary.map((keyword, idx) => (
|
||||||
|
<Badge key={idx} variant="outline" className="text-xs">
|
||||||
|
{keyword}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{dna.keywords.hashtags && (
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{dna.keywords.hashtags.map((tag, idx) => (
|
||||||
|
<span key={idx} className="text-xs text-primary">
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Unique Selling Points */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Star className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">차별화 포인트</h3>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{dna.uniqueSellingPoints.map((usp, idx) => (
|
||||||
|
<li key={idx} className="flex items-start gap-2 text-sm">
|
||||||
|
<TrendingUp className="w-4 h-4 text-green-500 shrink-0 mt-0.5" />
|
||||||
|
{usp}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mood */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Target className="w-4 h-4 text-primary" />
|
||||||
|
<h3 className="font-semibold text-sm">분위기 & 감정</h3>
|
||||||
|
</div>
|
||||||
|
<Badge className="mb-2">{dna.mood.primary}</Badge>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{dna.mood.emotions.map((emotion, idx) => (
|
||||||
|
<span key={idx} className="text-xs bg-muted px-2 py-1 rounded-full">
|
||||||
|
{emotion}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sources */}
|
||||||
|
{dna.sources && dna.sources.length > 0 && (
|
||||||
|
<div className="pt-4 border-t border-border">
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">분석 소스</p>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{dna.sources.map((source, idx) => (
|
||||||
|
<a
|
||||||
|
key={idx}
|
||||||
|
href={source}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
{new URL(source).hostname}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Analyzed At */}
|
||||||
|
{dna.analyzedAt && (
|
||||||
|
<p className="text-xs text-muted-foreground text-right">
|
||||||
|
분석 시간: {new Date(dna.analyzedAt).toLocaleString('ko-KR')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DNACard;
|
||||||
|
|
@ -0,0 +1,194 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
interface RegionData {
|
||||||
|
sido: string;
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface KoreaMapProps {
|
||||||
|
data: RegionData[];
|
||||||
|
onRegionClick?: (sido: string) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 지역별 색상 (축제 수에 따라 그라데이션)
|
||||||
|
const getRegionColor = (count: number, maxCount: number) => {
|
||||||
|
if (count === 0) return '#e5e7eb'; // gray-200
|
||||||
|
const intensity = Math.min(count / Math.max(maxCount, 1), 1);
|
||||||
|
// Orange gradient from light to dark
|
||||||
|
if (intensity < 0.2) return '#fed7aa'; // orange-200
|
||||||
|
if (intensity < 0.4) return '#fdba74'; // orange-300
|
||||||
|
if (intensity < 0.6) return '#fb923c'; // orange-400
|
||||||
|
if (intensity < 0.8) return '#f97316'; // orange-500
|
||||||
|
return '#ea580c'; // orange-600
|
||||||
|
};
|
||||||
|
|
||||||
|
// 한국 지도 SVG 경로 데이터 (간략화된 버전)
|
||||||
|
const REGION_PATHS: Record<string, { path: string; labelX: number; labelY: number }> = {
|
||||||
|
'서울': {
|
||||||
|
path: 'M 145 95 L 155 90 L 165 95 L 165 105 L 155 110 L 145 105 Z',
|
||||||
|
labelX: 155, labelY: 100
|
||||||
|
},
|
||||||
|
'인천': {
|
||||||
|
path: 'M 120 90 L 140 85 L 145 95 L 145 110 L 135 115 L 120 105 Z',
|
||||||
|
labelX: 132, labelY: 100
|
||||||
|
},
|
||||||
|
'경기': {
|
||||||
|
path: 'M 120 70 L 180 60 L 195 80 L 190 120 L 165 130 L 135 125 L 110 110 L 115 85 Z',
|
||||||
|
labelX: 155, labelY: 85
|
||||||
|
},
|
||||||
|
'강원': {
|
||||||
|
path: 'M 180 45 L 250 30 L 280 60 L 270 120 L 220 140 L 190 120 L 195 80 Z',
|
||||||
|
labelX: 230, labelY: 85
|
||||||
|
},
|
||||||
|
'충북': {
|
||||||
|
path: 'M 165 130 L 220 140 L 230 170 L 200 195 L 165 185 L 155 155 Z',
|
||||||
|
labelX: 190, labelY: 165
|
||||||
|
},
|
||||||
|
'충남': {
|
||||||
|
path: 'M 90 130 L 155 125 L 165 155 L 155 190 L 120 210 L 80 190 L 70 155 Z',
|
||||||
|
labelX: 115, labelY: 170
|
||||||
|
},
|
||||||
|
'세종': {
|
||||||
|
path: 'M 145 155 L 165 155 L 165 175 L 145 175 Z',
|
||||||
|
labelX: 155, labelY: 165
|
||||||
|
},
|
||||||
|
'대전': {
|
||||||
|
path: 'M 155 175 L 175 175 L 175 195 L 155 195 Z',
|
||||||
|
labelX: 165, labelY: 185
|
||||||
|
},
|
||||||
|
'전북': {
|
||||||
|
path: 'M 80 190 L 155 190 L 165 185 L 175 210 L 155 250 L 100 260 L 70 230 Z',
|
||||||
|
labelX: 120, labelY: 225
|
||||||
|
},
|
||||||
|
'전남': {
|
||||||
|
path: 'M 70 230 L 100 260 L 155 250 L 170 280 L 150 320 L 90 330 L 50 300 L 45 260 Z',
|
||||||
|
labelX: 105, labelY: 290
|
||||||
|
},
|
||||||
|
'광주': {
|
||||||
|
path: 'M 95 270 L 115 265 L 120 285 L 100 290 Z',
|
||||||
|
labelX: 107, labelY: 278
|
||||||
|
},
|
||||||
|
'경북': {
|
||||||
|
path: 'M 200 140 L 270 120 L 290 160 L 280 220 L 240 240 L 200 230 L 175 210 L 175 175 L 200 170 Z',
|
||||||
|
labelX: 235, labelY: 185
|
||||||
|
},
|
||||||
|
'대구': {
|
||||||
|
path: 'M 225 210 L 250 205 L 255 225 L 230 230 Z',
|
||||||
|
labelX: 240, labelY: 218
|
||||||
|
},
|
||||||
|
'울산': {
|
||||||
|
path: 'M 275 220 L 295 210 L 300 235 L 280 245 Z',
|
||||||
|
labelX: 287, labelY: 228
|
||||||
|
},
|
||||||
|
'부산': {
|
||||||
|
path: 'M 260 265 L 290 255 L 300 280 L 275 295 L 255 285 Z',
|
||||||
|
labelX: 275, labelY: 275
|
||||||
|
},
|
||||||
|
'경남': {
|
||||||
|
path: 'M 155 250 L 200 230 L 240 240 L 260 265 L 255 285 L 220 310 L 170 300 L 150 280 Z',
|
||||||
|
labelX: 200, labelY: 270
|
||||||
|
},
|
||||||
|
'제주': {
|
||||||
|
path: 'M 80 380 L 150 375 L 160 400 L 140 420 L 90 420 L 70 400 Z',
|
||||||
|
labelX: 115, labelY: 400
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const KoreaMap: React.FC<KoreaMapProps> = ({ data, onRegionClick, className }) => {
|
||||||
|
const [hoveredRegion, setHoveredRegion] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// 데이터를 지역명으로 매핑
|
||||||
|
const dataMap = new Map(data.map(d => [d.sido, d.count]));
|
||||||
|
const maxCount = Math.max(...data.map(d => d.count), 1);
|
||||||
|
|
||||||
|
const getCount = (sido: string) => dataMap.get(sido) || 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("relative", className)}>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 350 450"
|
||||||
|
className="w-full h-auto"
|
||||||
|
style={{ maxHeight: '400px' }}
|
||||||
|
>
|
||||||
|
{/* 배경 */}
|
||||||
|
<rect x="0" y="0" width="350" height="450" fill="transparent" />
|
||||||
|
|
||||||
|
{/* 지역별 경로 */}
|
||||||
|
{Object.entries(REGION_PATHS).map(([sido, { path, labelX, labelY }]) => {
|
||||||
|
const count = getCount(sido);
|
||||||
|
const isHovered = hoveredRegion === sido;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<g key={sido}>
|
||||||
|
{/* 지역 영역 */}
|
||||||
|
<path
|
||||||
|
d={path}
|
||||||
|
fill={getRegionColor(count, maxCount)}
|
||||||
|
stroke={isHovered ? '#ea580c' : '#9ca3af'}
|
||||||
|
strokeWidth={isHovered ? 2 : 1}
|
||||||
|
className="cursor-pointer transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
filter: isHovered ? 'brightness(1.1)' : 'none',
|
||||||
|
transform: isHovered ? 'scale(1.02)' : 'scale(1)',
|
||||||
|
transformOrigin: `${labelX}px ${labelY}px`
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setHoveredRegion(sido)}
|
||||||
|
onMouseLeave={() => setHoveredRegion(null)}
|
||||||
|
onClick={() => onRegionClick?.(sido)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 지역명 & 축제 수 */}
|
||||||
|
<text
|
||||||
|
x={labelX}
|
||||||
|
y={labelY - 5}
|
||||||
|
textAnchor="middle"
|
||||||
|
className="text-[10px] font-bold fill-gray-700 pointer-events-none select-none"
|
||||||
|
>
|
||||||
|
{sido}
|
||||||
|
</text>
|
||||||
|
{count > 0 && (
|
||||||
|
<text
|
||||||
|
x={labelX}
|
||||||
|
y={labelY + 8}
|
||||||
|
textAnchor="middle"
|
||||||
|
className="text-[9px] font-medium fill-orange-700 pointer-events-none select-none"
|
||||||
|
>
|
||||||
|
{count}개
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* 호버 툴팁 */}
|
||||||
|
{hoveredRegion && (
|
||||||
|
<div className="absolute top-2 right-2 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 border z-10">
|
||||||
|
<p className="font-bold text-sm">{hoveredRegion}</p>
|
||||||
|
<p className="text-orange-500 font-medium">
|
||||||
|
{getCount(hoveredRegion)}개 축제
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 범례 */}
|
||||||
|
<div className="mt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<span>적음</span>
|
||||||
|
<div className="flex">
|
||||||
|
{['#e5e7eb', '#fed7aa', '#fdba74', '#fb923c', '#f97316', '#ea580c'].map((color, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="w-6 h-3"
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span>많음</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default KoreaMap;
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from './ui/dialog';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
import {
|
||||||
|
Sparkles,
|
||||||
|
Video,
|
||||||
|
Music,
|
||||||
|
Image as ImageIcon,
|
||||||
|
Wand2,
|
||||||
|
ChevronRight,
|
||||||
|
ChevronLeft,
|
||||||
|
Rocket
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const ONBOARDING_KEY = 'castad-onboarding-completed';
|
||||||
|
|
||||||
|
interface OnboardingStep {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STEPS: OnboardingStep[] = [
|
||||||
|
{
|
||||||
|
icon: <Sparkles className="w-12 h-12 text-primary" />,
|
||||||
|
title: 'CastAD Pro에 오신 것을 환영합니다!',
|
||||||
|
description: 'AI 기반 펜션 홍보 영상 제작 플랫폼입니다. 단 몇 분 만에 전문적인 숏폼 영상을 만들어보세요.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <ImageIcon className="w-12 h-12 text-primary" />,
|
||||||
|
title: '펜션 정보 입력',
|
||||||
|
description: '펜션 유형을 선택하고, 이름과 URL을 입력하세요. 네이버 플레이스 URL을 입력하면 정보를 자동으로 가져옵니다.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Wand2 className="w-12 h-12 text-accent" />,
|
||||||
|
title: 'AI가 자동으로 제작',
|
||||||
|
description: '이미지, 텍스트, 음악을 AI가 분석하고 최적화된 홍보 영상을 자동으로 생성합니다.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Video className="w-12 h-12 text-green-500" />,
|
||||||
|
title: '다양한 스타일 선택',
|
||||||
|
description: '11가지 텍스트 이펙트, 다양한 전환 효과, AI 음악 또는 TTS 내레이션 중 선택하세요.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Rocket className="w-12 h-12 text-primary" />,
|
||||||
|
title: '시작할 준비가 되셨나요?',
|
||||||
|
description: '첫 번째 프로젝트를 만들어보세요. 언제든지 도움이 필요하면 물어보세요!',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface OnboardingDialogProps {
|
||||||
|
onComplete?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const OnboardingDialog: React.FC<OnboardingDialogProps> = ({ onComplete }) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [currentStep, setCurrentStep] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const completed = localStorage.getItem(ONBOARDING_KEY);
|
||||||
|
if (!completed) {
|
||||||
|
// Small delay to let the app render first
|
||||||
|
const timer = setTimeout(() => setOpen(true), 500);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentStep < STEPS.length - 1) {
|
||||||
|
setCurrentStep(currentStep + 1);
|
||||||
|
} else {
|
||||||
|
handleComplete();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = () => {
|
||||||
|
if (currentStep > 0) {
|
||||||
|
setCurrentStep(currentStep - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleComplete = () => {
|
||||||
|
localStorage.setItem(ONBOARDING_KEY, 'true');
|
||||||
|
setOpen(false);
|
||||||
|
onComplete?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSkip = () => {
|
||||||
|
localStorage.setItem(ONBOARDING_KEY, 'true');
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const step = STEPS[currentStep];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogContent className="sm:max-w-lg">
|
||||||
|
<DialogHeader className="text-center pb-4">
|
||||||
|
{/* Step Dots */}
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-6">
|
||||||
|
{STEPS.map((_, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className={cn(
|
||||||
|
"w-2 h-2 rounded-full transition-all",
|
||||||
|
idx === currentStep ? "w-6 bg-primary" : "bg-muted"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Icon */}
|
||||||
|
<div className="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center mb-4">
|
||||||
|
{step.icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogTitle className="text-xl font-bold">
|
||||||
|
{step.title}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription className="text-base mt-2">
|
||||||
|
{step.description}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<DialogFooter className="flex-col sm:flex-row gap-2 pt-4">
|
||||||
|
<div className="flex items-center justify-between w-full gap-2">
|
||||||
|
{currentStep > 0 ? (
|
||||||
|
<Button variant="ghost" onClick={handlePrev}>
|
||||||
|
<ChevronLeft className="w-4 h-4 mr-1" />
|
||||||
|
이전
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button variant="ghost" onClick={handleSkip}>
|
||||||
|
건너뛰기
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button onClick={handleNext}>
|
||||||
|
{currentStep < STEPS.length - 1 ? (
|
||||||
|
<>
|
||||||
|
다음
|
||||||
|
<ChevronRight className="w-4 h-4 ml-1" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
시작하기
|
||||||
|
<Rocket className="w-4 h-4 ml-1" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OnboardingDialog;
|
||||||
|
|
||||||
|
// Helper to reset onboarding (for testing)
|
||||||
|
export const resetOnboarding = () => {
|
||||||
|
localStorage.removeItem(ONBOARDING_KEY);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,415 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from './ui/dialog';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import { Input } from './ui/input';
|
||||||
|
import { Label } from './ui/label';
|
||||||
|
import { Textarea } from './ui/textarea';
|
||||||
|
import { Badge } from './ui/badge';
|
||||||
|
import {
|
||||||
|
Building,
|
||||||
|
MapPin,
|
||||||
|
FileText,
|
||||||
|
Loader2,
|
||||||
|
CheckCircle,
|
||||||
|
AlertCircle,
|
||||||
|
Link2,
|
||||||
|
Image as ImageIcon,
|
||||||
|
Sparkles
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { crawlNaverPlace } from '../../services/naverService';
|
||||||
|
import { crawlGooglePlace } from '../../services/googlePlacesService';
|
||||||
|
import { crawlInstagramProfile } from '../../services/instagramService';
|
||||||
|
import { fileToBase64 } from '../../services/geminiService';
|
||||||
|
|
||||||
|
const PENSION_ONBOARDING_KEY = 'castad-pension-onboarding-shown';
|
||||||
|
|
||||||
|
interface PensionOnboardingDialogProps {
|
||||||
|
onComplete?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PensionOnboardingDialog: React.FC<PensionOnboardingDialogProps> = ({ onComplete }) => {
|
||||||
|
const { token, user } = useAuth();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
address: '',
|
||||||
|
description: '',
|
||||||
|
sourceUrl: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// Crawling state
|
||||||
|
const [isFetching, setIsFetching] = useState(false);
|
||||||
|
const [fetchProgress, setFetchProgress] = useState('');
|
||||||
|
const [crawledImages, setCrawledImages] = useState<File[]>([]);
|
||||||
|
|
||||||
|
// Check if user has pensions on mount
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPensions = async () => {
|
||||||
|
if (!token) {
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/profile/pensions', {
|
||||||
|
headers: { Authorization: `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const pensions = await response.json();
|
||||||
|
// If no pensions, show dialog
|
||||||
|
if (pensions.length === 0) {
|
||||||
|
// Small delay for better UX
|
||||||
|
setTimeout(() => {
|
||||||
|
setOpen(true);
|
||||||
|
}, 800);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to check pensions:', e);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkPensions();
|
||||||
|
}, [token]);
|
||||||
|
|
||||||
|
// Detect URL type
|
||||||
|
const detectUrlType = (url: string): 'naver' | 'google' | 'instagram' | 'unknown' => {
|
||||||
|
const lowerUrl = url.toLowerCase();
|
||||||
|
if (lowerUrl.includes('naver.me') || lowerUrl.includes('naver.com') || lowerUrl.includes('map.naver')) {
|
||||||
|
return 'naver';
|
||||||
|
}
|
||||||
|
if (lowerUrl.includes('google.com/maps') || lowerUrl.includes('maps.google') || lowerUrl.includes('goo.gl/maps') || lowerUrl.includes('maps.app.goo.gl')) {
|
||||||
|
return 'google';
|
||||||
|
}
|
||||||
|
if (lowerUrl.includes('instagram.com') || lowerUrl.includes('instagr.am')) {
|
||||||
|
return 'instagram';
|
||||||
|
}
|
||||||
|
return 'unknown';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fetch place info from URL
|
||||||
|
const handleFetchUrl = async () => {
|
||||||
|
if (!formData.sourceUrl.trim()) {
|
||||||
|
setError('URL을 입력해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const urlType = detectUrlType(formData.sourceUrl);
|
||||||
|
if (urlType === 'unknown') {
|
||||||
|
setError('네이버 플레이스, 구글 지도 또는 인스타그램 URL을 입력해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsFetching(true);
|
||||||
|
setError('');
|
||||||
|
const progressMessages: Record<string, string> = {
|
||||||
|
naver: '네이버 플레이스 정보 가져오는 중...',
|
||||||
|
google: '구글 지도 정보 가져오는 중...',
|
||||||
|
instagram: '인스타그램 프로필 정보 가져오는 중...'
|
||||||
|
};
|
||||||
|
setFetchProgress(progressMessages[urlType]);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const crawlOptions = { maxImages: 100 };
|
||||||
|
|
||||||
|
let placeData;
|
||||||
|
if (urlType === 'naver') {
|
||||||
|
placeData = await crawlNaverPlace(formData.sourceUrl, (msg) => setFetchProgress(msg), crawlOptions);
|
||||||
|
} else if (urlType === 'google') {
|
||||||
|
placeData = await crawlGooglePlace(formData.sourceUrl, (msg) => setFetchProgress(msg), crawlOptions);
|
||||||
|
} else {
|
||||||
|
placeData = await crawlInstagramProfile(formData.sourceUrl, (msg) => setFetchProgress(msg), crawlOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update form with fetched data
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
name: placeData.name || prev.name,
|
||||||
|
address: placeData.address || prev.address,
|
||||||
|
description: placeData.description || prev.description
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Store crawled images
|
||||||
|
if (placeData.images && placeData.images.length > 0) {
|
||||||
|
setCrawledImages(placeData.images);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFetchProgress(`${placeData.name} 정보를 가져왔습니다! (사진 ${placeData.images?.length || 0}장)`);
|
||||||
|
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('Fetch failed:', err);
|
||||||
|
setError(err.message || '정보를 가져오는데 실패했습니다.');
|
||||||
|
setFetchProgress('');
|
||||||
|
} finally {
|
||||||
|
setIsFetching(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Save crawled images to pension
|
||||||
|
const saveCrawledImagesToPension = async (pensionId: number) => {
|
||||||
|
if (crawledImages.length === 0) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Convert files to base64, detect source from filename
|
||||||
|
const imagesData = await Promise.all(crawledImages.map(async (file) => {
|
||||||
|
const { base64, mimeType } = await fileToBase64(file);
|
||||||
|
// Detect source from filename (naver_, google_, instagram_)
|
||||||
|
let source = 'crawl';
|
||||||
|
if (file.name.startsWith('naver_')) source = 'naver';
|
||||||
|
else if (file.name.startsWith('google_')) source = 'google';
|
||||||
|
else if (file.name.startsWith('instagram_')) source = 'instagram';
|
||||||
|
return { base64, mimeType, filename: file.name, source };
|
||||||
|
}));
|
||||||
|
|
||||||
|
await fetch(`/api/profile/pension/${pensionId}/images`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ images: imagesData })
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`펜션 이미지 ${imagesData.length}장 저장 완료`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('펜션 이미지 저장 실패:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
setError('펜션 이름을 입력해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/profile/pensions', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Authorization: `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
brand_name: formData.name,
|
||||||
|
brand_name_en: formData.name,
|
||||||
|
address: formData.address,
|
||||||
|
description: formData.description,
|
||||||
|
pension_types: ['Family'],
|
||||||
|
target_customers: [],
|
||||||
|
key_features: [],
|
||||||
|
is_default: 1
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
throw new Error(data.error || '펜션 등록에 실패했습니다.');
|
||||||
|
}
|
||||||
|
|
||||||
|
const pensionData = await response.json();
|
||||||
|
|
||||||
|
// Save crawled images if any
|
||||||
|
if (crawledImages.length > 0 && pensionData.pension_id) {
|
||||||
|
setFetchProgress('이미지 저장 중...');
|
||||||
|
await saveCrawledImagesToPension(pensionData.pension_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success - close dialog
|
||||||
|
localStorage.setItem(PENSION_ONBOARDING_KEY, 'true');
|
||||||
|
setOpen(false);
|
||||||
|
onComplete?.();
|
||||||
|
} catch (err: any) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
setFetchProgress('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSkip = () => {
|
||||||
|
localStorage.setItem(PENSION_ONBOARDING_KEY, 'skipped');
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={(isOpen) => {
|
||||||
|
// Prevent closing by clicking outside
|
||||||
|
if (!isOpen && !submitting) {
|
||||||
|
// Allow closing only via skip button
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto" onPointerDownOutside={(e) => e.preventDefault()}>
|
||||||
|
<DialogHeader className="text-center pb-4">
|
||||||
|
{/* Icon */}
|
||||||
|
<div className="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center mb-4">
|
||||||
|
<Building className="w-8 h-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogTitle className="text-xl font-bold">
|
||||||
|
펜션 정보를 등록해주세요
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription className="text-base mt-2">
|
||||||
|
영상을 만들기 위해 펜션 기본 정보가 필요합니다.
|
||||||
|
<br />
|
||||||
|
<span className="text-muted-foreground text-sm">
|
||||||
|
나중에 설정에서 수정할 수 있습니다.
|
||||||
|
</span>
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
|
||||||
|
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* URL Input - Optional */}
|
||||||
|
<div className="space-y-2 p-4 bg-muted/30 rounded-xl border border-dashed border-border">
|
||||||
|
<Label htmlFor="source-url" className="flex items-center gap-2 text-primary">
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
자동으로 정보 가져오기 (선택)
|
||||||
|
</Label>
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">
|
||||||
|
네이버 플레이스, 구글 지도 또는 인스타그램 URL을 입력하면 자동으로 정보와 사진을 가져옵니다.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id="source-url"
|
||||||
|
value={formData.sourceUrl}
|
||||||
|
onChange={(e) => setFormData({ ...formData, sourceUrl: e.target.value })}
|
||||||
|
placeholder="https://naver.me/... 또는 https://instagram.com/username"
|
||||||
|
disabled={submitting || isFetching}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleFetchUrl}
|
||||||
|
disabled={submitting || isFetching || !formData.sourceUrl.trim()}
|
||||||
|
>
|
||||||
|
{isFetching ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Link2 className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{fetchProgress && (
|
||||||
|
<div className="flex items-center gap-2 text-xs text-primary mt-2">
|
||||||
|
{isFetching && <Loader2 className="w-3 h-3 animate-spin" />}
|
||||||
|
{fetchProgress}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{crawledImages.length > 0 && (
|
||||||
|
<div className="flex items-center gap-2 text-xs text-green-600 mt-2">
|
||||||
|
<ImageIcon className="w-3 h-3" />
|
||||||
|
{crawledImages.length}장의 사진이 준비되었습니다
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pension Name */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="pension-name" className="flex items-center gap-2">
|
||||||
|
<Building className="w-4 h-4" />
|
||||||
|
펜션 이름 <span className="text-destructive">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="pension-name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
placeholder="예: 행복한 펜션"
|
||||||
|
disabled={submitting || isFetching}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="pension-address" className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
주소
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="pension-address"
|
||||||
|
value={formData.address}
|
||||||
|
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||||
|
placeholder="예: 강원도 강릉시 사천면"
|
||||||
|
disabled={submitting || isFetching}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="pension-description" className="flex items-center gap-2">
|
||||||
|
<FileText className="w-4 h-4" />
|
||||||
|
펜션 소개 (선택)
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="pension-description"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||||
|
placeholder="펜션의 특징이나 매력 포인트를 간단히 작성해주세요"
|
||||||
|
rows={3}
|
||||||
|
disabled={submitting || isFetching}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter className="flex-col sm:flex-row gap-2 pt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={handleSkip}
|
||||||
|
disabled={submitting || isFetching}
|
||||||
|
>
|
||||||
|
나중에 하기
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={submitting || isFetching || !formData.name.trim()}>
|
||||||
|
{submitting ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
등록 중...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
등록하고 시작하기
|
||||||
|
{crawledImages.length > 0 && (
|
||||||
|
<Badge variant="secondary" className="ml-2">
|
||||||
|
+{crawledImages.length} 사진
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PensionOnboardingDialog;
|
||||||
|
|
@ -0,0 +1,526 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import { Input } from './ui/input';
|
||||||
|
import { Label } from './ui/label';
|
||||||
|
import { Textarea } from './ui/textarea';
|
||||||
|
import { Badge } from './ui/badge';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
|
||||||
|
import { Separator } from './ui/separator';
|
||||||
|
import {
|
||||||
|
Youtube,
|
||||||
|
Loader2,
|
||||||
|
Sparkles,
|
||||||
|
Globe,
|
||||||
|
Tag,
|
||||||
|
Clock,
|
||||||
|
MessageSquare,
|
||||||
|
Image as ImageIcon,
|
||||||
|
Copy,
|
||||||
|
Check,
|
||||||
|
RefreshCw,
|
||||||
|
Upload,
|
||||||
|
Link as LinkIcon,
|
||||||
|
X
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
interface YouTubeSEOPreviewProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
businessInfo: {
|
||||||
|
businessName: string;
|
||||||
|
description: string;
|
||||||
|
categories: string[];
|
||||||
|
address: string;
|
||||||
|
language: string;
|
||||||
|
};
|
||||||
|
videoPath?: string;
|
||||||
|
videoDuration?: number;
|
||||||
|
onUpload?: (seoData: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SEOData {
|
||||||
|
snippet: {
|
||||||
|
title_ko: string;
|
||||||
|
title_en?: string;
|
||||||
|
description_ko: string;
|
||||||
|
description_en?: string;
|
||||||
|
tags_ko: string[];
|
||||||
|
tags_en?: string[];
|
||||||
|
hashtags_ko: string[];
|
||||||
|
categoryId: string;
|
||||||
|
[key: string]: any;
|
||||||
|
};
|
||||||
|
chapters: Array<{
|
||||||
|
time: string;
|
||||||
|
title_ko: string;
|
||||||
|
title_en?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}>;
|
||||||
|
thumbnail_text: {
|
||||||
|
short_ko: string;
|
||||||
|
short_en?: string;
|
||||||
|
sub_ko: string;
|
||||||
|
sub_en?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
};
|
||||||
|
pinned_comment_ko: string;
|
||||||
|
pinned_comment_en?: string;
|
||||||
|
meta?: any;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const YouTubeSEOPreview: React.FC<YouTubeSEOPreviewProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
businessInfo,
|
||||||
|
videoPath,
|
||||||
|
videoDuration = 60,
|
||||||
|
onUpload
|
||||||
|
}) => {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
const { token } = useAuth();
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
|
const [seoData, setSeoData] = useState<SEOData | null>(null);
|
||||||
|
const [bookingUrl, setBookingUrl] = useState('');
|
||||||
|
const [copied, setCopied] = useState<string | null>(null);
|
||||||
|
const [activeTab, setActiveTab] = useState('korean');
|
||||||
|
|
||||||
|
// 추가 언어 코드 (KO 외)
|
||||||
|
const additionalLangCode = businessInfo.language !== 'KO' ? businessInfo.language.toLowerCase() : 'en';
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && !seoData) {
|
||||||
|
generateSEO();
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const generateSEO = async () => {
|
||||||
|
setIsGenerating(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/youtube/seo', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
businessName: businessInfo.businessName,
|
||||||
|
description: businessInfo.description,
|
||||||
|
categories: businessInfo.categories,
|
||||||
|
address: businessInfo.address,
|
||||||
|
bookingUrl: bookingUrl,
|
||||||
|
videoDuration: videoDuration,
|
||||||
|
language: businessInfo.language
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setSeoData(data);
|
||||||
|
} else {
|
||||||
|
console.error('SEO 생성 실패');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('SEO 생성 오류:', error);
|
||||||
|
} finally {
|
||||||
|
setIsGenerating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = (text: string, key: string) => {
|
||||||
|
navigator.clipboard.writeText(text);
|
||||||
|
setCopied(key);
|
||||||
|
setTimeout(() => setCopied(null), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateSeoField = (path: string, value: any) => {
|
||||||
|
if (!seoData) return;
|
||||||
|
|
||||||
|
const keys = path.split('.');
|
||||||
|
const newData = { ...seoData };
|
||||||
|
let current: any = newData;
|
||||||
|
|
||||||
|
for (let i = 0; i < keys.length - 1; i++) {
|
||||||
|
current[keys[i]] = { ...current[keys[i]] };
|
||||||
|
current = current[keys[i]];
|
||||||
|
}
|
||||||
|
current[keys[keys.length - 1]] = value;
|
||||||
|
|
||||||
|
setSeoData(newData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpload = () => {
|
||||||
|
if (seoData && onUpload) {
|
||||||
|
onUpload(seoData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 overflow-y-auto">
|
||||||
|
<div className="bg-background rounded-xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between p-6 border-b">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-red-500/10">
|
||||||
|
<Youtube className="w-6 h-6 text-red-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold">YouTube SEO 설정</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">업로드 전 메타데이터를 확인하고 수정하세요</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-6">
|
||||||
|
{isGenerating ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20">
|
||||||
|
<Loader2 className="w-12 h-12 animate-spin text-primary mb-4" />
|
||||||
|
<p className="text-lg font-medium">AI가 SEO 메타데이터를 생성 중입니다...</p>
|
||||||
|
<p className="text-sm text-muted-foreground">잠시만 기다려주세요</p>
|
||||||
|
</div>
|
||||||
|
) : seoData ? (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Booking URL Input */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<LinkIcon className="w-4 h-4" />
|
||||||
|
예약 URL
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="https://booking.example.com/pension-name"
|
||||||
|
value={bookingUrl}
|
||||||
|
onChange={(e) => setBookingUrl(e.target.value)}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
<Button variant="outline" onClick={generateSEO}>
|
||||||
|
<RefreshCw className="w-4 h-4 mr-2" />
|
||||||
|
반영
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-2">
|
||||||
|
예약 URL을 입력하면 설명에 자동으로 포함됩니다
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Language Tabs */}
|
||||||
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||||
|
<TabsList className="grid w-full grid-cols-2">
|
||||||
|
<TabsTrigger value="korean" className="flex items-center gap-2">
|
||||||
|
🇰🇷 한국어
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="additional" className="flex items-center gap-2">
|
||||||
|
<Globe className="w-4 h-4" />
|
||||||
|
{businessInfo.language === 'EN' ? '🇺🇸 English' :
|
||||||
|
businessInfo.language === 'JA' ? '🇯🇵 日本語' :
|
||||||
|
businessInfo.language === 'ZH' ? '🇨🇳 中文' :
|
||||||
|
businessInfo.language === 'TH' ? '🇹🇭 ไทย' :
|
||||||
|
businessInfo.language === 'VI' ? '🇻🇳 Tiếng Việt' : '🇺🇸 English'}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Korean Tab */}
|
||||||
|
<TabsContent value="korean" className="space-y-4 mt-4">
|
||||||
|
{/* Title */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center justify-between">
|
||||||
|
제목
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{seoData.snippet.title_ko?.length || 0}/100
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
value={seoData.snippet.title_ko || ''}
|
||||||
|
onChange={(e) => updateSeoField('snippet.title_ko', e.target.value)}
|
||||||
|
maxLength={100}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handleCopy(seoData.snippet.title_ko, 'title_ko')}
|
||||||
|
>
|
||||||
|
{copied === 'title_ko' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center justify-between">
|
||||||
|
설명
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{seoData.snippet.description_ko?.length || 0}/5000
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Textarea
|
||||||
|
value={seoData.snippet.description_ko || ''}
|
||||||
|
onChange={(e) => updateSeoField('snippet.description_ko', e.target.value)}
|
||||||
|
rows={10}
|
||||||
|
className="font-mono text-sm"
|
||||||
|
maxLength={5000}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="shrink-0"
|
||||||
|
onClick={() => handleCopy(seoData.snippet.description_ko, 'desc_ko')}
|
||||||
|
>
|
||||||
|
{copied === 'desc_ko' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center gap-2">
|
||||||
|
<Tag className="w-4 h-4" />
|
||||||
|
태그
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
({seoData.snippet.tags_ko?.length || 0}개)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{seoData.snippet.tags_ko?.map((tag, i) => (
|
||||||
|
<Badge key={i} variant="secondary" className="text-xs">
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
placeholder="태그 추가 (쉼표로 구분)"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
const input = e.currentTarget;
|
||||||
|
const newTags = input.value.split(',').map(t => t.trim()).filter(t => t);
|
||||||
|
if (newTags.length > 0) {
|
||||||
|
updateSeoField('snippet.tags_ko', [...(seoData.snippet.tags_ko || []), ...newTags]);
|
||||||
|
input.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hashtags */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>해시태그</Label>
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{seoData.snippet.hashtags_ko?.map((tag, i) => (
|
||||||
|
<Badge key={i} variant="outline" className="text-xs">
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pinned Comment */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
고정 댓글
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
value={seoData.pinned_comment_ko || ''}
|
||||||
|
onChange={(e) => updateSeoField('pinned_comment_ko', e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Additional Language Tab */}
|
||||||
|
<TabsContent value="additional" className="space-y-4 mt-4">
|
||||||
|
{/* Title */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center justify-between">
|
||||||
|
Title
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{seoData.snippet[`title_${additionalLangCode}`]?.length || 0}/100
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
value={seoData.snippet[`title_${additionalLangCode}`] || seoData.snippet.title_en || ''}
|
||||||
|
onChange={(e) => updateSeoField(`snippet.title_${additionalLangCode}`, e.target.value)}
|
||||||
|
maxLength={100}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handleCopy(seoData.snippet[`title_${additionalLangCode}`] || seoData.snippet.title_en || '', 'title_en')}
|
||||||
|
>
|
||||||
|
{copied === 'title_en' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center justify-between">
|
||||||
|
Description
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{seoData.snippet[`description_${additionalLangCode}`]?.length || seoData.snippet.description_en?.length || 0}/5000
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Textarea
|
||||||
|
value={seoData.snippet[`description_${additionalLangCode}`] || seoData.snippet.description_en || ''}
|
||||||
|
onChange={(e) => updateSeoField(`snippet.description_${additionalLangCode}`, e.target.value)}
|
||||||
|
rows={10}
|
||||||
|
className="font-mono text-sm"
|
||||||
|
maxLength={5000}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="shrink-0"
|
||||||
|
onClick={() => handleCopy(seoData.snippet[`description_${additionalLangCode}`] || seoData.snippet.description_en || '', 'desc_en')}
|
||||||
|
>
|
||||||
|
{copied === 'desc_en' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center gap-2">
|
||||||
|
<Tag className="w-4 h-4" />
|
||||||
|
Tags
|
||||||
|
</Label>
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{(seoData.snippet[`tags_${additionalLangCode}`] || seoData.snippet.tags_en)?.map((tag: string, i: number) => (
|
||||||
|
<Badge key={i} variant="secondary" className="text-xs">
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pinned Comment */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
Pinned Comment
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
value={seoData[`pinned_comment_${additionalLangCode}`] || seoData.pinned_comment_en || ''}
|
||||||
|
onChange={(e) => updateSeoField(`pinned_comment_${additionalLangCode}`, e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* Chapters */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
챕터 (타임스탬프)
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{seoData.chapters?.map((chapter, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-3 text-sm">
|
||||||
|
<span className="font-mono text-primary w-12">{chapter.time}</span>
|
||||||
|
<span className="flex-1">{chapter.title_ko}</span>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{chapter[`title_${additionalLangCode}`] || chapter.title_en}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Thumbnail Text */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<ImageIcon className="w-4 h-4" />
|
||||||
|
썸네일 텍스트 추천
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs text-muted-foreground">메인 텍스트</Label>
|
||||||
|
<p className="font-bold">{seoData.thumbnail_text?.short_ko}</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{seoData.thumbnail_text?.[`short_${additionalLangCode}`] || seoData.thumbnail_text?.short_en}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs text-muted-foreground">서브 텍스트</Label>
|
||||||
|
<p className="font-medium">{seoData.thumbnail_text?.sub_ko}</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{seoData.thumbnail_text?.[`sub_${additionalLangCode}`] || seoData.thumbnail_text?.sub_en}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center py-20">
|
||||||
|
<Sparkles className="w-12 h-12 text-primary mb-4" />
|
||||||
|
<p className="text-lg font-medium">SEO 메타데이터 생성하기</p>
|
||||||
|
<Button className="mt-4" onClick={generateSEO}>
|
||||||
|
<Sparkles className="w-4 h-4 mr-2" />
|
||||||
|
AI로 생성
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="flex items-center justify-between p-6 border-t bg-muted/30">
|
||||||
|
<Button variant="outline" onClick={generateSEO} disabled={isGenerating}>
|
||||||
|
<RefreshCw className={`w-4 h-4 mr-2 ${isGenerating ? 'animate-spin' : ''}`} />
|
||||||
|
다시 생성
|
||||||
|
</Button>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button variant="outline" onClick={onClose}>
|
||||||
|
닫기
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleUpload}
|
||||||
|
disabled={!seoData || isLoading}
|
||||||
|
className="bg-red-600 hover:bg-red-700"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
|
업로드 중...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Upload className="w-4 h-4 mr-2" />
|
||||||
|
YouTube 업로드
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default YouTubeSEOPreview;
|
||||||
|
|
@ -0,0 +1,206 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Plus,
|
||||||
|
FolderOpen,
|
||||||
|
Image,
|
||||||
|
User,
|
||||||
|
Moon,
|
||||||
|
Sun,
|
||||||
|
LogOut,
|
||||||
|
Sparkles,
|
||||||
|
CreditCard,
|
||||||
|
Settings,
|
||||||
|
Building2,
|
||||||
|
PartyPopper
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useTheme } from '../../contexts/ThemeContext';
|
||||||
|
import { useLanguage } from '../../contexts/LanguageContext';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import { useUserLevel, LEVEL_INFO } from '../../contexts/UserLevelContext';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Switch } from '../ui/switch';
|
||||||
|
import { Progress } from '../ui/progress';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
|
||||||
|
export type ViewType = 'dashboard' | 'new-project' | 'library' | 'assets' | 'pensions' | 'festivals' | 'account' | 'settings';
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
currentView: ViewType;
|
||||||
|
onViewChange: (view: ViewType) => void;
|
||||||
|
libraryCount?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NavItemProps {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
label: string;
|
||||||
|
active?: boolean;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NavItem: React.FC<NavItemProps> = ({ icon, label, active, onClick }) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className={cn(
|
||||||
|
"w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200",
|
||||||
|
active
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className={cn("w-5 h-5", active && "text-primary-foreground")}>
|
||||||
|
{icon}
|
||||||
|
</span>
|
||||||
|
<span>{label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Sidebar: React.FC<SidebarProps> = ({
|
||||||
|
currentView,
|
||||||
|
onViewChange,
|
||||||
|
libraryCount = 0
|
||||||
|
}) => {
|
||||||
|
const { theme, toggleTheme } = useTheme();
|
||||||
|
const { t } = useLanguage();
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
const { level, features } = useUserLevel();
|
||||||
|
const levelInfo = LEVEL_INFO[level];
|
||||||
|
|
||||||
|
// Mock credits - replace with actual user data
|
||||||
|
const credits = 850;
|
||||||
|
const maxCredits = 1000;
|
||||||
|
const creditPercentage = (credits / maxCredits) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="w-64 h-screen bg-card border-r border-border flex flex-col shrink-0">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="p-5">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
|
||||||
|
<Sparkles className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-lg font-bold text-foreground">CastAD</span>
|
||||||
|
<Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 w-fit">
|
||||||
|
{levelInfo.icon} {levelInfo.name}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="flex-1 px-3 py-2 space-y-1">
|
||||||
|
{/* 항상 표시: 대시보드 */}
|
||||||
|
<NavItem
|
||||||
|
icon={<LayoutDashboard className="w-5 h-5" />}
|
||||||
|
label={user?.name || user?.username || t('dashWelcome').replace('!', '')}
|
||||||
|
active={currentView === 'dashboard'}
|
||||||
|
onClick={() => onViewChange('dashboard')}
|
||||||
|
/>
|
||||||
|
{/* 항상 표시: 새 영상 만들기 */}
|
||||||
|
<NavItem
|
||||||
|
icon={<Plus className="w-5 h-5" />}
|
||||||
|
label={t('dashNewProject')}
|
||||||
|
active={currentView === 'new-project'}
|
||||||
|
onClick={() => onViewChange('new-project')}
|
||||||
|
/>
|
||||||
|
{/* 항상 표시: 보관함 */}
|
||||||
|
<NavItem
|
||||||
|
icon={<FolderOpen className="w-5 h-5" />}
|
||||||
|
label={t('libTitle')}
|
||||||
|
active={currentView === 'library'}
|
||||||
|
onClick={() => onViewChange('library')}
|
||||||
|
/>
|
||||||
|
{/* 중급/프로만: 에셋 라이브러리 */}
|
||||||
|
{features.showAssetLibrary && (
|
||||||
|
<NavItem
|
||||||
|
icon={<Image className="w-5 h-5" />}
|
||||||
|
label={t('dashAssetManage')}
|
||||||
|
active={currentView === 'assets'}
|
||||||
|
onClick={() => onViewChange('assets')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* 중급/프로만: 펜션 관리 */}
|
||||||
|
{features.showPensionManagement && (
|
||||||
|
<NavItem
|
||||||
|
icon={<Building2 className="w-5 h-5" />}
|
||||||
|
label={t('sidebarMyPensions')}
|
||||||
|
active={currentView === 'pensions'}
|
||||||
|
onClick={() => onViewChange('pensions')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* 프로만: 축제 정보 */}
|
||||||
|
{features.showFestivalMenu && (
|
||||||
|
<NavItem
|
||||||
|
icon={<PartyPopper className="w-5 h-5" />}
|
||||||
|
label="축제 정보"
|
||||||
|
active={currentView === 'festivals'}
|
||||||
|
onClick={() => onViewChange('festivals')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* 항상 표시: 계정 */}
|
||||||
|
<NavItem
|
||||||
|
icon={<User className="w-5 h-5" />}
|
||||||
|
label={t('accountTitle')}
|
||||||
|
active={currentView === 'account'}
|
||||||
|
onClick={() => onViewChange('account')}
|
||||||
|
/>
|
||||||
|
{/* 중급/프로만: 비즈니스 설정 */}
|
||||||
|
{features.showAdvancedSettings && (
|
||||||
|
<NavItem
|
||||||
|
icon={<Settings className="w-5 h-5" />}
|
||||||
|
label={t('settingsTitle')}
|
||||||
|
active={currentView === 'settings'}
|
||||||
|
onClick={() => onViewChange('settings')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Bottom Section */}
|
||||||
|
<div className="p-4 space-y-4">
|
||||||
|
{/* Dark Mode Toggle */}
|
||||||
|
<div className="flex items-center justify-between px-2">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
{theme === 'dark' ? (
|
||||||
|
<Moon className="w-4 h-4" />
|
||||||
|
) : (
|
||||||
|
<Sun className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
<span>{theme === 'dark' ? t('accountThemeDark') : t('accountThemeLight')}</span>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={theme === 'dark'}
|
||||||
|
onCheckedChange={toggleTheme}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Credits */}
|
||||||
|
<div className="bg-muted/50 rounded-xl p-4 space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">CREDITS</span>
|
||||||
|
<span className="text-sm font-bold text-foreground">{credits} / {maxCredits}</span>
|
||||||
|
</div>
|
||||||
|
<Progress value={creditPercentage} className="h-2" />
|
||||||
|
<Button variant="outline" className="w-full" size="sm">
|
||||||
|
<CreditCard className="w-4 h-4 mr-2" />
|
||||||
|
{t('accountUpgrade')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Logout */}
|
||||||
|
<button
|
||||||
|
onClick={logout}
|
||||||
|
className="w-full flex items-center gap-3 px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
<span>{t('authLogout')}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { LucideIcon } from 'lucide-react';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
|
||||||
|
interface SidebarItemProps {
|
||||||
|
icon: LucideIcon;
|
||||||
|
label: string;
|
||||||
|
active?: boolean;
|
||||||
|
badge?: number | string;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SidebarItem: React.FC<SidebarItemProps> = ({
|
||||||
|
icon: Icon,
|
||||||
|
label,
|
||||||
|
active = false,
|
||||||
|
badge,
|
||||||
|
onClick
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className={cn(
|
||||||
|
"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200",
|
||||||
|
"hover:bg-accent/10",
|
||||||
|
active
|
||||||
|
? "bg-primary/10 text-primary border border-primary/20"
|
||||||
|
: "text-muted-foreground hover:text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className={cn("w-5 h-5", active && "text-primary")} />
|
||||||
|
<span className="flex-1 text-left">{label}</span>
|
||||||
|
{badge !== undefined && (
|
||||||
|
<Badge
|
||||||
|
variant={active ? "default" : "secondary"}
|
||||||
|
className="text-xs px-1.5 py-0.5 min-w-[20px] justify-center"
|
||||||
|
>
|
||||||
|
{badge}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SidebarItem;
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { ChevronDown, User } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../../contexts/LanguageContext';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import { Language } from '../../../types';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '../ui/select';
|
||||||
|
|
||||||
|
interface TopHeaderProps {
|
||||||
|
breadcrumb?: string;
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LANGUAGES: { value: Language; label: string; flag: string }[] = [
|
||||||
|
{ value: 'KO', label: '한국어', flag: 'KR' },
|
||||||
|
{ value: 'EN', label: 'English', flag: 'EN' },
|
||||||
|
{ value: 'JA', label: '日本語', flag: 'JP' },
|
||||||
|
{ value: 'ZH', label: '中文', flag: 'CN' },
|
||||||
|
{ value: 'TH', label: 'ภาษาไทย', flag: 'TH' },
|
||||||
|
{ value: 'VI', label: 'Tiếng Việt', flag: 'VN' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const TopHeader: React.FC<TopHeaderProps> = ({ breadcrumb, title }) => {
|
||||||
|
const { language, setLanguage } = useLanguage();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
const currentLang = LANGUAGES.find(l => l.value === language) || LANGUAGES[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="h-16 border-b border-border bg-card/50 backdrop-blur-sm flex items-center justify-between px-6">
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<div className="flex items-center gap-2 text-sm">
|
||||||
|
{breadcrumb && (
|
||||||
|
<>
|
||||||
|
<span className="text-muted-foreground">{breadcrumb}</span>
|
||||||
|
<span className="text-muted-foreground">/</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{title && (
|
||||||
|
<span className="font-medium text-foreground">{title}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Section */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* Language Selector */}
|
||||||
|
<Select value={language} onValueChange={(v) => setLanguage(v as Language)}>
|
||||||
|
<SelectTrigger className="w-[130px] h-9 bg-muted/50 border-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">{currentLang.flag}</span>
|
||||||
|
<SelectValue>{currentLang.label}</SelectValue>
|
||||||
|
</div>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{LANGUAGES.map((lang) => (
|
||||||
|
<SelectItem key={lang.value} value={lang.value}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">{lang.flag}</span>
|
||||||
|
<span>{lang.label}</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{/* User Avatar */}
|
||||||
|
<div className="w-9 h-9 rounded-full bg-primary/20 flex items-center justify-center text-sm font-bold text-primary">
|
||||||
|
{user?.name?.charAt(0).toUpperCase() || 'U'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TopHeader;
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { UserLevel } from '../../../types';
|
||||||
|
import { useUserLevel, LEVEL_INFO } from '../../contexts/UserLevelContext';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Check, Loader2 } from 'lucide-react';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
interface LevelSelectorProps {
|
||||||
|
onSelect?: (level: UserLevel) => void;
|
||||||
|
showTitle?: boolean;
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LevelSelector: React.FC<LevelSelectorProps> = ({
|
||||||
|
onSelect,
|
||||||
|
showTitle = true,
|
||||||
|
compact = false,
|
||||||
|
}) => {
|
||||||
|
const { level: currentLevel, setLevel, isLoading } = useUserLevel();
|
||||||
|
const [isUpdating, setIsUpdating] = useState(false);
|
||||||
|
const [selectedLevel, setSelectedLevel] = useState<UserLevel | null>(null);
|
||||||
|
|
||||||
|
const handleSelect = async (newLevel: UserLevel) => {
|
||||||
|
if (newLevel === currentLevel || isUpdating) return;
|
||||||
|
|
||||||
|
setSelectedLevel(newLevel);
|
||||||
|
setIsUpdating(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await setLevel(newLevel);
|
||||||
|
onSelect?.(newLevel);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to update level:', error);
|
||||||
|
} finally {
|
||||||
|
setIsUpdating(false);
|
||||||
|
setSelectedLevel(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const levels: UserLevel[] = ['beginner', 'intermediate', 'pro'];
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-8">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (compact) {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{levels.map((lvl) => {
|
||||||
|
const info = LEVEL_INFO[lvl];
|
||||||
|
const isSelected = lvl === currentLevel;
|
||||||
|
const isSelecting = selectedLevel === lvl;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={lvl}
|
||||||
|
variant={isSelected ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleSelect(lvl)}
|
||||||
|
disabled={isUpdating}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-2',
|
||||||
|
isSelected && 'ring-2 ring-primary ring-offset-2'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isSelecting ? (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<span>{info.icon}</span>
|
||||||
|
)}
|
||||||
|
<span>{info.name}</span>
|
||||||
|
{isSelected && <Check className="h-4 w-4" />}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{showTitle && (
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<h3 className="text-xl font-semibold">나에게 맞는 모드를 선택하세요</h3>
|
||||||
|
<p className="text-muted-foreground text-sm">
|
||||||
|
언제든 설정에서 변경할 수 있습니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{levels.map((lvl) => {
|
||||||
|
const info = LEVEL_INFO[lvl];
|
||||||
|
const isSelected = lvl === currentLevel;
|
||||||
|
const isSelecting = selectedLevel === lvl;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={lvl}
|
||||||
|
className={cn(
|
||||||
|
'cursor-pointer transition-all hover:shadow-lg relative overflow-hidden',
|
||||||
|
isSelected
|
||||||
|
? 'ring-2 ring-primary border-primary bg-primary/5'
|
||||||
|
: 'hover:border-primary/50',
|
||||||
|
isUpdating && !isSelecting && 'opacity-50'
|
||||||
|
)}
|
||||||
|
onClick={() => handleSelect(lvl)}
|
||||||
|
>
|
||||||
|
{isSelected && (
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<Badge variant="default" className="gap-1">
|
||||||
|
<Check className="h-3 w-3" />
|
||||||
|
현재
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CardHeader className="text-center pb-2">
|
||||||
|
<div className="text-4xl mb-2">{info.icon}</div>
|
||||||
|
<CardTitle className="text-lg">
|
||||||
|
{isSelecting ? (
|
||||||
|
<Loader2 className="h-5 w-5 animate-spin inline mr-2" />
|
||||||
|
) : null}
|
||||||
|
{info.name}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-base font-medium text-foreground/80">
|
||||||
|
"{info.tagline}"
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="text-center space-y-3">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{info.description}
|
||||||
|
</p>
|
||||||
|
<ul className="text-sm space-y-1">
|
||||||
|
{info.features.map((feature, idx) => (
|
||||||
|
<li key={idx} className="flex items-center justify-center gap-2">
|
||||||
|
<Check className="h-3 w-3 text-green-500" />
|
||||||
|
<span>{feature}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LevelSelector;
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
import { buttonVariants } from "@/src/components/ui/button"
|
||||||
|
|
||||||
|
const AlertDialog = AlertDialogPrimitive.Root
|
||||||
|
|
||||||
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
|
||||||
|
|
||||||
|
const AlertDialogPortal = AlertDialogPrimitive.Portal
|
||||||
|
|
||||||
|
const AlertDialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
|
||||||
|
|
||||||
|
const AlertDialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
))
|
||||||
|
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const AlertDialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-2 text-center sm:text-left",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
AlertDialogHeader.displayName = "AlertDialogHeader"
|
||||||
|
|
||||||
|
const AlertDialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
AlertDialogFooter.displayName = "AlertDialogFooter"
|
||||||
|
|
||||||
|
const AlertDialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-lg font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
|
||||||
|
|
||||||
|
const AlertDialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertDialogDescription.displayName =
|
||||||
|
AlertDialogPrimitive.Description.displayName
|
||||||
|
|
||||||
|
const AlertDialogAction = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
ref={ref}
|
||||||
|
className={cn(buttonVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
|
||||||
|
|
||||||
|
const AlertDialogCancel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({ variant: "outline" }),
|
||||||
|
"mt-2 sm:mt-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const Avatar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Avatar.displayName = AvatarPrimitive.Root.displayName
|
||||||
|
|
||||||
|
const AvatarImage = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
ref={ref}
|
||||||
|
className={cn("aspect-square h-full w-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
||||||
|
|
||||||
|
const AvatarFallback = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback }
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||||
|
outline: "text-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-10 px-4 py-2",
|
||||||
|
sm: "h-9 rounded-md px-3",
|
||||||
|
lg: "h-11 rounded-md px-8",
|
||||||
|
icon: "h-10 w-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Button.displayName = "Button"
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const Card = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Card.displayName = "Card"
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardHeader.displayName = "CardHeader"
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-2xl font-semibold leading-none tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardTitle.displayName = "CardTitle"
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardDescription.displayName = "CardDescription"
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
|
))
|
||||||
|
CardContent.displayName = "CardContent"
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex items-center p-6 pt-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardFooter.displayName = "CardFooter"
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||||
|
import { Check } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const Checkbox = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
className={cn("grid place-content-center text-current")}
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
))
|
||||||
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Checkbox }
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||||
|
|
||||||
|
const Collapsible = CollapsiblePrimitive.Root
|
||||||
|
|
||||||
|
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
|
||||||
|
|
||||||
|
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
|
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { X } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
))
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogHeader.displayName = "DialogHeader"
|
||||||
|
|
||||||
|
const DialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogFooter.displayName = "DialogFooter"
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-semibold leading-none tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogPortal,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogClose,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
))
|
||||||
|
DropdownMenuSubTrigger.displayName =
|
||||||
|
DropdownMenuPrimitive.SubTrigger.displayName
|
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuSubContent.displayName =
|
||||||
|
DropdownMenuPrimitive.SubContent.displayName
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
))
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
))
|
||||||
|
DropdownMenuCheckboxItem.displayName =
|
||||||
|
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-2 w-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
))
|
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Input.displayName = "Input"
|
||||||
|
|
||||||
|
export { Input }
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/src/lib/utils"
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
)
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Label }
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue