와르르 쏟아지는 구독을 한번에! 흩어져 있는 구독 서비스를 한 곳에서 관리하고, 합리적인 소비 결정을 내릴 수 있도록 돕는 올인원 구독 관리 서비스입니다.
서비스 링크 : https://waguwagu.site
점점 늘어나는 구독 서비스로 인해 사용자들이 겪는 관리의 복잡함과 선택의 어려움을 해결하고자 시작되었습니다. '와구와구'는 결제일 알림, 서비스별 혜택 비교, 간편 해지 등 스마트한 구독 생활을 위한 다양한 기능을 제공하여 불필요한 지출을 막고 합리적인 소비를 돕습니다.
구독 현황 대시보드
- 구독 중인 서비스 개수, 월별 총 결제 예상 금액, 남은 결제액 등을 한눈에 파악할 수 있습니다.
결제일 임박 알림
- 7일 이내 결제 예정인 서비스를 알려드립니다. 또한, 이메일 수신 설정도 가능합니다.
구독 서비스 비교
- OTT, 쇼핑 등 카테고리별로 여러 구독 서비스의 요금제, 혜택(화질, 동시접속 등)을 최대 4개까지 비교할 수 있습니다.
- 더 저렴한 대체 서비스를 추천받아 합리적인 선택을 할 수 있습니다.
간편한 등록 및 해지
- 4단계의 간단한 플로우(카테고리 → 서비스 → 요금제 → 정보 확인)를 통해 구독 정보를 쉽게 등록할 수 있습니다.
- 해지 바로가기 링크를 제공하여 복잡한 과정 없이 구독을 해지할 수 있습니다.
폭넓은 이용권 관리(예정)
- OTT나 멤버십뿐만 아니라 헬스장, 스터디 카페, 요가 레슨 등 일상생활과 밀접한 기간권/횟수권까지 관리할 수 있습니다.
아키텍처
- Feature-Sliced Design (FSD) 아키텍처를 채택하여 프로젝트의 유지보수성과 확장성을 높였습니다.
- 코드를 app, pages, widgets, features, entities, shared의 6개 레이어로 분리하여 관리합니다.
주요 기술
- React Query: 서버 상태 관리, 캐싱, Optimistic Update 등에 활용하여 데이터 동기화를 효율적으로 처리합니다.
- Tailwind CSS: 일관된 디자인 시스템을 적용하기 위해 사용합니다.
- JWT 인증: Refresh Token(Cookies)과 Access Token(Memory)을 활용한 JWT 기반 인증 시스템을 구현하여 보안을 강화했습니다.
최적화
- Lazy Loading 및 Fallback 처리로 초기 로딩 속도를 개선했습니다.
- Toast 메시지를 통해 사용자에게 직관적인 피드백을 제공합니다.
Typography
- Pretendard
Color System
- primary_700: #E83A4F
- secondary_200: #18D569
- yellow: #FFAA00
Icons: 일관성 있는 UI를 위해 정의된 시스템 아이콘과 그래픽 아이콘을 사용합니다.
🚀 시작하기
# 1. 레포지토리 클론
git clone https://github.com/dnd-side-project/dnd-13th-5-frontend.git
# 2. 프로젝트 디렉토리로 이동
cd dnd-13th-5-frontend
# 3. 의존성 패키지 설치
pnpm install
# 4. 개발 서버 실행
pnpm devFE Developer 이소연, 정성연
BE Developer 최유성, 황서은
Designer 김예진, 박진이