프로젝트 개요

• Svg를 이용한 유저 레포트 차트 페이지 구현
• API 데이터를 무한 스크롤 페이지를 통해 시각화

실행방법

Project setup

npm install

Project Start

npm start

Skills

• React, Typescript, Styled Components, ES6+

구현 기능 상세

Svg를 이용한 유저 레포트 차트 페이지 구현

• User Report 데이터 Get
• Cycle 값을 기반한 Svg 그래프 표현
• 100일이 넘을 경우 그래프 정보 color 변경
• 최대 일수 를 기준으로 바 차트 구현
• Grid를 통해 바 차트 동적 레이아웃 구현

API 데이터를 무한 스크롤 페이지를 통해 시각화

• 승객 데이터 시각화
• Restful API를 이용한 데이터 Get 제어
• 무한 스크롤 페이지 구현

시연 gif

Svg를 이용한 유저 레포트 차트 페이지 구현

API 데이터를 무한 스크롤 페이지를 통해 시각화