feat(vton): Try-on 횟수 제한 + 공유/저장 + 유저 페이지 연동

[thxforall]

개요

Virtual Try-on 기능을 프로덕션 수준으로 완성. 유저당 횟수 제한, 결과 공유/저장, 유저 페이지 연동.

Epic: #37
관련 기존 이슈: #24 (Try 포스트 백엔드), #25 (Try 업로드 페이지)

현재 상태 ✅ 구현됨

• VtonLab: /lab/vton — 사진 업로드 → 아이템 선택 → VTON 결과
• API: /api/v1/vton → Google Vertex AI (virtual-try-on-001)
• 아이템 필터링: SAM prompt 기반 카테고리 (dress, shirt, jacket 등)
• 다중 아이템: 체이닝 (person → item1 → result → item2)
• Try-on History: user_tryon_history 테이블 존재
• Profile Tab: Tries 탭에 VTON 이력 표시
• Before/After: BeforeAfterSlider 컴포넌트

TODO

횟수 제한

• 유저당 일일/월간 Try-on 횟수 제한
  • 비로그인: 0회 (로그인 유도)
  • 무료 유저: 일 3회 (또는 월 10회)
  • 프리미엄: 무제한 (향후)
• 남은 횟수 표시 UI
• 제한 초과 시 안내 + 업그레이드 CTA
• 서버 사이드 제한 (API rate limiting)

결과 공유

• Try-on 결과 이미지 저장 (Supabase Storage or Vercel Blob)
• 공유 기능 (소셜: X, Facebook, KakaoTalk, 링크)
• 공유 시 OG 이미지 생성 (Before/After 합성)
• Try-on 결과를 포스트로 업로드 (feat(community): Try 포스트 백엔드 — parent_post_id, tries API, OpenAPI/Orval #24 — parent_post_id 연결)

유저 페이지 연동

• Profile > Tries 탭에 실제 VTON 이력 표시
  • 썸네일 그리드
  • Before/After 비교 뷰
  • 사용한 아이템 정보
• Try-on 이력 삭제 기능
• 다른 유저의 Try 결과 공개 여부 설정

UX 개선

• Try-on 로딩 애니메이션 개선 (현재 VtonLoadingAnimation 있음)
• 결과 이미지 품질 개선 (워터마크 위치/크기)
• 모바일에서 VTON 플로우 최적화

참고 파일

• packages/web/lib/components/vton/VtonLab.tsx — 메인 VTON
• packages/web/lib/components/vton/VtonModal.tsx — 모달
• packages/web/lib/components/vton/BeforeAfterSlider.tsx
• packages/web/app/api/v1/vton/route.ts — VTON API
• packages/api-server/migration/sql/05_user_tryon_history.sql — 이력 DB