[Error] 웹과 모바일 환경을 모두 고려하는 애니메이션 구현

## 어떤 에러가 발생했나요?
- 웹에서 애니메이션이 시작돼야 하는 위치와 모바일에서 애니메이션이 시작돼야 하는 위치가 달랐다
- 예를 들어 웹에서는 100px 에서 애니메이션을 구현해야 한다면 모바일에서는 30px 에서 그 애니메이션이 구현돼야 한다

### 에러가 발생한 폴더
- client > src > pages > mainPage.jsx

### 에러 원인
- 반응형으로 (vh) 구성을 했기 때문에 레이아웃은 거의 동일하지만 전체 길이가 그만큼 달라진 게 문제였다.

### 에러 해결 방법
```jsx
const maxScroll = document.body.offsetHeight - window.innerHeight;
const currentY = window.pageYOffset;
const ratio = currentY / maxScroll;
dispatch(scrollListener(ratio));
```

- 원래는 currentY 를 상태에 저장했다. window.pageYOffset 은 현재 어느 Y좌표, 정확히는 어느 픽셀의 화면을 보고 있는지를 의미한다.
- 그러나 오류의 원인은 이렇게 절대적인 기준에서 y좌표를 정하니 상대적인 반응형 화면에서는 이 애니메이션이 원하는 위치에서 동작하지 않았다
- 그래서 상대적인 기준으로 만들기 위해 maxScroll 이라고 하는 전체 화면 길이로 나눈 비율로 저장했다.
- 즉, 전체 height 기준으로 %에 도달했을 때 애니메이션이 구현될지를 설정한 것이다.

## 에러 핸들링을 위해 참고한 레퍼런스 링크
https://javascript.info/size-and-scroll-window