주어진 데이터를 기반으로 시계열 차트 만들기
git clone https://github.com/wanted-pre-onboarding-internship-1team/pre-onboarding-9th-3-1.git
npm install
npm start
http://wanted-intenship-project2.s3-website.ap-northeast-2.amazonaws.com/
📄.src
├── App.tsx
├── apis
│ ├── index.ts
│ ├── instance.ts
│ ├── mockService.ts
│ └── types
│ └── mock.ts
├── components
│ ├── chart
│ │ ├── Chart.tsx
│ │ ├── ChartHeader.tsx
│ │ └── types
│ │ └── Points.ts
│ └── filter
│ ├── Filter.tsx
│ └── types
│ └── StyleProps.ts
├── constants
│ └── colors.ts
├── hooks
│ ├── useMockList.ts
│ └── useQuerystring.ts
├── index.css
├── index.tsx
├── pages
│ └── Mainpage.tsx
└── router
└── router.tsx
주된 커뮤니케이션 툴로 팀 노션 페이지와 디스코드, Google meet를 사용했습니다.
- 팀원들의 코드를 분석하고, 그 중에서 Best Practice를 정리하였습니다.
- commit 컨벤션, git flow 전략, 네이밍을 정의하였습니다.
- 팀원들의 역할 분담, 일정 조율을 위해 활용되었습니다.
팀원들의 의사소통 및 화면 공유를 통한 협업을 위해 활용되었습니다.
- 추가 플러그인을 사용하지 않아 번들크기가 가볍고 기본기능이 많아서
ApexCharts사용- AWS S3를 통해 배포하여 CI/CD 자동화 배포를 구축
- 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
- 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
- Area 그래프의 기준값은 value_area 값을 이용해주세요
- Bar 그래프의 기준값은 value_bar 값을 이용해주세요
- 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)
💡 Best Practice 산정 이유
- 커스텀 훅으로 차트에 필요한 데이터 분리
- 차트에 필요한 데이터가 바뀔 경우 수정하기 용이
- 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요
💡 Best Practice 산정 이유
- tooltip을 custom하여 id, area, bar 데이터 노출
- 필터링 기능을 구현해주세요, 필터링은 특정 데이터를 하이라이트 하는 방식으로 구현해주세요
- 필터링 기능은 버튼 형태로 ID값(지역이름)을 이용해주세요
- 필터링 시 버튼에서 선택한 ID값과 동일한 ID값을 가진 데이터 구역만 하이라이트 처리를 해주세요
- 특정 데이터 구역을 클릭 시에도 필터링 기능과 동일한 형태로 동일한 ID값을 가진 데이터 구역을 하이라이트해주세요
💡 Best Practice 산정 이유
-querystring을 사용하여 필터링 적용
-필터링 하는 부분을 커스텀 훅을 통해 분리
-필터링 아이콘 클릭 시 필터링 버튼 노출
-버튼 형태로 구현하기 위해 input 속성 미노출
-데이터 구역을 bar는 빨간색, area의 포인터는 청록색으로 하이라이트
-필터링 시와 특정 데이터 구역 클릭 시 상태 공유하여 구역 클릭 시에도 필터링 속성에 체크
-필터링 체크 한 지역에 annotaion으로 차트에 표기
 조병민(팀장) |
 구수정 |
 김요한 |
 손혜수 |
|
 유승윤 |
 박수지 |
 신공섭 |
 윤동희 |
 이유태 |