[DEV LOG] 2021.08.19. 박성현

## Contributions
- Visual Page
- DB에서 전달되는 데이터에 알맞는 Chart를 react-apexchart에서 찾아 적용
- Chart마다 필요한 option(legend, color, responsive, xaxis, yaxis)을 적용
- `scrollY`값이 chart element 각각의 높이에 들어간다면 다른 CSS가 적용되도록 구현 완료
```jsx
for (let i = 0; i < chartcontainer.length; i++) {
if (
Pos > chartcontainer[i].offsetTop - window.outerHeight / 3 &&
Pos <
chartcontainer[i].offsetTop -
window.outerHeight / 2 +
chartcontainer[i].offsetHeight
) {
chartcontainer[i].style.opacity = 1;
} else {
chartcontainer[i].style.opacity = 0;
}
}
```
## Difficult point
- react-apexchart의 chart들은 기본적으로 animation이 적용되어있다.
- 하지만 이 animation은 mount가 될 때에만 즉 화면에 render가 될 때에만 보인다.
- 흔한 scroll reveal과 달리 element자체를 mount/unmount 해야하는 것이다.
- element 수만큼 state를 만든다면 가능하겠지만 이것은 무리가 있다.
- 어떻게 state를 만들고 관리해야 할 지 고민해야한다.(일단 배열로 관리를 시도해 볼 것이다.)

## TODO tomorrow
- `scrollY`의 위치에 해당하는 element가 mount/unmount되게 구현
- mount/unmount 시 animation을 적용하게 하는 Spring의 useTransition Hook을 적용