메타클럽

개요

메타클럽은 상품권 전환 및 포인트를 충전할 수 있는 포인트 테크 플랫폼입니다. 문화상품권, 도서문화상품권의 핀번호를 등록하여 다양한 곳에서 사용할 수 있게 해줍니다. 해당 프로젝트에서 퍼블리싱을 중심으로 일부 기능 구현까지 담당하며 서비스 구축 과정에 참여하였습니다.

진행 방식

구축 프로젝트이며, Vue.js(Nuxt.js) 환경에서 scss 를 사용하여 작업했습니다. 디자인 수급은 figma 로 이루어졌으며, UI 컴포넌트 관리로는 Storybook 을 사용하였습니다. 기획(6), 디자인(7), 프론트엔드(6), 백엔드(5) 개발까지 한 부문 전체가 TF팀으로 협업하였습니다.

주요 작업 내용

• 1. 문화상품권 충전 페이지

  • 정규표현식과 yup 라이브러리를 적용하여 입력 데이터의 유효성을 보장, 잘못된 입력으로 인한 오류를 사전에 방지

  • 액수 계산 로직을 구현하여 충전 금액/수수료/잔액 부족 여부를 직관적으로 확인할 수 있게 해 사용자 편의성을 높임

    • - 1000원, 5000원, 5만원 권 단위로 +, - 버튼을 통해 갯수에 따른 액수 표현 및 충전된 액수에서 수수료(%)계산, 잔액부족 등 계산하여 값 표시

  • 모달 컴포넌트를 동적으로 구성하여 상황별로 안내가 가능하도록 개선, 사용자 경험을 강화

• 2. 약관 / 에러페이지

  • 약관 페이지를 풀팝업 형태로 구현

  • 백엔드측 에러 코드를 기반으로 상황별로 화면을 제공