Feat/one page scroll

[designDefined]

태스크 URL

PR 체크리스트

• pre-commit 성공 여부
• Type label 추가

Merge 체크리스트

• Squash & Merge
• 노션 태스크 완료 처리
• 이슈 코멘트 resolve

설명

사용하던 스크롤 훅을 고쳐서 원-페이지 스크롤을 구현했습니다. 엄밀히 말해서 원 페이지 스크롤까진 아니고, 약간 하이브리드입니다.

원 페이지 스크롤의 UX

원-페이지 스크롤 인터랙션을 어떻게 처리하는 게 제일 좋을까 고민해보았습니다. 지키고자 하는 원칙은 다음과 같습니다.

1. 한 페이지를 감상하고 나면, 스크롤 시 다음 페이지로 바로 넘어간다.
2. 조금 스크롤했다고 실수로 페이지를 두 개 넘길 일이 없다.
3. 혹시라도 지나간 페이지를 다시 보고 싶으면 금방 전환된다.
4. 분노의 스크롤을 하면 금방 맨 아래/위 페이지로 갈 수 있다

따라서 인터랙션은 다음과 같이 구현해 보았습니다.

1. 첫 스크롤 시 화면이 바로 전환됨.
2. 전환 후에도 같은 방향으로 계속 스크롤했을 때에는, 한 화면 분량만큼 추가로 스크롤을 해야 그 다음 페이지로 넘어간다.
3. 반대 방향으로 스크롤 시에는 바로 이전 페이지로 돌아간다
4. 스크롤을 멈춘 지 0.5초가 지난 후에는, 다시 1처럼 바로 스크롤이 전환되는 상태가 된다.

구현 로직은 다음과 같습니다.

1. 각 화면의 위치를 지정하는 보이지 않는 블록들이 화면에 쌓여 있다.
2. 위 / 아래 방향으로 스크롤 할 때 각각 화면의 맨 위 선 / 맨 아래 선이 지나고 있는 블록의 화면을 활성화시킨다.
3. debounce를 이용하여 스크롤을 멈춘 지 0.5초가 지난 후에는 바로 다음 스크롤에 반응할 수 있게끔 화면과 블록의 위치를 동기화시킵니다.

아직 작업 안한 것

• debounce / throttle을 편하게 적용할 수 있도록 스크롤 훅 api 세팅하기
• 스크롤 훅 불필요한 코드 삭제하기
• 도큐먼트 최신화

스크롤 훅은 아직도 갈 길이 멉니다... 좋은 의견 부탁드립니다

테스트 방법 (Optional)

기타 질문 및 공유 사항 (Optional)

[minkyu97]

lgtm