ASTERUM TRAVELER

PLAVE 팬을 위한 팬페이지

소개

Asterum Traveler는 K-pop 그룹 PLAVE의 활동 기록, 스케줄, 영상, 기념일 등을 정리한 PLAVE 팬 웹사이트입니다. 👉 바로가기

데모

개발 기간 및 팀 구성

• 개발 기간: 2024.10.02 ~
• 1인 개발 (프론트엔드 중심 + 백엔드 서버리스 구조)

사용 기술 스택

기능

주요 기능 (사용자 흐름 기준)

• PLAVE 멤버 라이브 or 이미지를 기준으로 사용한 제품 조회
• React Calendar 기반으로 팬 일정(Schedule)을 등록 및 조회
• 팬이 Dear 페이지에 메시지를 작성
• 모든 기능은 Firebase Firestore를 기반으로 실시간 저장 및 관리

기술적 구현

• Yarn Workspaces 기반의 모노레포 구성으로 App/Admin 분리
• Firebase Firestore를 데이터베이스로 사용하여 실시간 데이터 관리
• vite-plugin-ssr을 도입해 페이지별 meta 태그 SSR 구성 및 SEO 최적화 대응
• Firebase Functions + Slack Webhook으로 실시간 에러 모니터링 구축
• Framer Motion을 통한 UI 애니메이션 및 전환 효과 적용
• Jest 기반 주요 컴포넌트 단위 테스트 작성

---

기술적 고민 & 트러블슈팅

• Firebase Functions와 Slack Webhook을 활용한 에러 알림 시스템 구축
• SEO 대응을 위한 vite-plugin-ssr 도입
• Vercel 배포 환경에서 vite-plugin-ssr 적용 시 404 오류 해결 과정
• 모노레포와 Yarn Workspaces를 선택한 이유
• 모바일 대응을 위한 화면 크기 감지 및 Zoom 기반 대응 전략

---

향후 개선/추가 예정 기능

• 어드민에서 Report 이미지 업로드 시 자동으로 WebP 포맷으로 변환 처리
• 어드민에서 Dear 카드 다중 선택 후 일괄 삭제 기능 추가
• Dear 카드 작성 시 욕설 입력 감지 후 사용자에게 경고 메시지 노출
• 모바일 환경에서 접속 시 "PC 웹 환경에 최적화된 서비스" 안내 메시지 제공