[Feature] Paywall UX 설계 및 구현

[y0ngha]

구현할 기능

Paywall UX 레이어를 통해 사용자에게 티어 제한을 명확하게 표시. 제한된 기능에 🔒 아이콘을 표시하고, 접근 시도 시 업그레이드 모달 또는 가입 프롬프트를 표시.

왜 필요한가

• 사용자가 어떤 기능이 제한되었는지 명확하게 인지할 수 있어야 함
• 업그레이드 유도를 통한 수익화 메커니즘
• 사용성 좋은 UX를 통해 비즈니스와 사용자 만족도 동시 달성

구현 범위

• domain/ (계층/제한 비즈니스 로직)
• infrastructure/ (티어 API 연결)
• components/ (🔒 오버레이, 업그레이드 모달)
• app/ (페이지 레이어 통합)

요구사항

Analysis result (분석 결과)

• 제한된 필드(entry, stoploss, target, confidence)에 🔒 오버레이 표시
• #361의 info depth 필터 결과 기반 조건부 렌더링

Timeframe selector (시간대 선택)

• 제한된 시간대는 회색으로 표시하고 🔒 아이콘 추가
• 클릭 시 업그레이드 모달 표시

Model selector (모델 선택)

• 제한된 모델에 🔒 아이콘 표시
• 클릭 시 가입/업그레이드 프롬프트 트리거:
  • 로그인 안 함 → 무료 가입 프롬프트
  • 무료(Free) 사용자 → Member 업그레이드 프롬프트
  • Member 사용자 → Pro 업그레이드 프롬프트

Usage limit reached (사용 제한 도달)

• 일일 분석 횟수 또는 챗봇 제한 도달 시 친화적인 안내 메시지 표시 (향후 사용)

Upgrade modal / prompt (업그레이드 모달/프롬프트)

• 티어 비교 정보 표시
• 업그레이드 CTA (현재는 placeholder/static으로도 가능)

Feature flag

• TIER_CONFIG.featureFlags.enableTierRestrictions 기반 조건부 렌더링
• 플래그가 false일 때 🔒 표시 안 함

의존성

• Requires [Feature] 티어별 제한값 공통 상수 / 파라미터 분리 #353 (공통 상수 분리)
• Requires [Feature] 사용자 등급 시스템 구현 (Free / Member / Pro) #357 (사용자 등급 시스템)
• Requires [Feature] AI 분석 횟수 제한 구조 구현 #359 (분석 횟수 제한)
• Requires [Feature] AI 챗봇 사용량 제한 통합 #360 (챗봇 제한)
• Requires [Feature] 정보 깊이 제한 구조 구현 #361 (정보 깊이 제한)
• Requires [Feature] 타임프레임 제한 구조 구현 #362 (타임프레임 제한)
• Requires [Feature] AI 모델 티어 분리 구조 구현 #363 (AI 모델 티어 분리)

참고 문서

• docs/ARCHITECTURE.md
• docs/DESIGN.md (색상 시스템, UI 컴포넌트)
• docs/CONVENTIONS.md
• docs/FF.md

완료 조건

• 분석 결과에 🔒 오버레이 구현
• 시간대 선택 제한 UI 구현
• 모델 선택 제한 UI 구현
• 업그레이드 모달/프롬프트 구현
• Feature flag 조건부 렌더링 구현
• E2E 테스트 작성
• docs/ 업데이트 (필요한 경우)