[FE] 구독권 안내 모달 페이지 구현

[jiva-z]

개요

• 사용자에게 구독권 상품의 종류와 특징을 명확하게 전달하는 모달 페이지 구현
• 직관적이고 시각적으로 매력적인 UI/UX 제공

구현할 상품 정보

1. 구독형 유료 서비스 (Standard 요금제)

• 가격: 월 18만원
• 제공 내용:
  • 모든 기능 무제한 이용 가능
  • 요양일 예측 기반 공고 등록
  • AI 기반 인재 추천
  • 구직자 이력서 열람
• 목적: 지속적으로 대체 인력이 채용이 필요할 경우, 상시 채용 수요가 있고 안정적이고 체계적인 인력 운용 지원

2. 광고형 유료 서비스 (프리미엄 광고권)

• 가격: 주 15만원
• 제공 내용: 채용 공고를 홈페이지 상단에 7일간 고정
• 목적: 채용 공고의 주목도 및 지원자 유입 극대화

3. 체험형 무료 상품 (무료 이용권)

• 가격: 0원
• 제공 내용:
  • 공고 등록 무료 (1건 한정)
  • 해당 공고 지원자의 이력서만 열람 가능
• 목적: 서비스 체험 기회 제공 및 플랫폼 진입 유도

구현 요구사항

• 모달 형태로 구현
• 외부 영역 클릭 시 자동으로 닫히는 기능
• 각 구독권별 카드 컴포넌트 구현
• Framer Motion을 활용한 모달 애니메이션 효과
• 반응형 디자인 적용
• styled-components를 활용한 스타일링

기술 스택

• React
• styled-components
• Framer Motion

구현 상세

1. 컴포넌트 구조

   • SubscriptionModal (메인 모달 컴포넌트)
   • SubscriptionCard (각 구독권 카드 컴포넌트)

2. 스타일링

   • 모던하고 깔끔한 디자인
   • 구독권별 차별화된 시각적 표현
   • 호버 효과 및 인터랙션

3. 반응형 브레이크포인트

   • 모바일: ~768px
   • 태블릿: 768px~1024px
   • 데스크톱: 1024px~

참고사항

• PredictPage의 디자인 시스템 준수
• 접근성 고려 (키보드 네비게이션, 스크린리더 지원)