[FE] 랜딩페이지 스크롤 오류 해결

[Todari]

issue

• close [FE] 랜딩페이지 스크롤 오류 해결 #796

구현 목적

• 현재 모바일 환경이나 일부 데스크탑 환경에서 가로 스크롤이 제대로 되지 않는 오류가 있어 이를 해결합니다.

구현 사항

현재 가로 스크롤이 작동하는 과정은 아래와 같습니다.

1. 스크롤이 featureSection에 도달한다.
2. featureSection 영역부터, 종방향 스크롤을 하면 이를 featureSection 위치로 다시 종방향 스크롤시킨다
3. 종방향 스크롤을 한 만큼, featureSection을 translateX 시킨다.
4. translateX가 최대치에 도달하면, 다시 종방향 스크롤을 가능하게 한다.

이 과정에서, 종방향 스크롤을 강제로 못하게 원 위치로 되돌리는 방식이다 보니, 스크롤이 계속 유지되는 모바일 환경의 touch 이벤트에서는 제대로 작동하지 않는 것이 문제가 되었습니다.
또한, 스크롤 자체를 다시 원위치로 되돌이는 것이다 보니, 중간 중간 스크롤이 꿀렁거리는 오류가 있었습니다.
이를 해결하기 위해 작동 방식을 아래와 같이 변경하였습니다.

1. 스크롤이 featureSection에 도달한다.
2. featureSection의 position을 fixed로 변경한다.
3. featureSection이 fixed인 상태로 스크롤 되는 만큼 페이지에 여백을 만들어 둔다.
4. 여백 내부에서 종방향 스크롤을 한 만큼, featureSection을 translateX 시킨다.
5. 여백이 끝에 도달할 때, opacity를 이용해 featureSection을 없애준다.

따라서, 스크롤은 실제로 이루어지고, default Event를 강제로 조작하지 않으므로 많은 환경에서 동일하게 작동할 것으로 기대됩니다.

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qxaczvwaqr.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-vxreeyydeg.chromatic.com/

[jinhokim98]

고생 많았습니다. 토다리
삼성 인터넷은 버그가 있지만 우리가 타겟으로 한 브라우저 환경이 아니기 때문에 넘어가도 될 것 같아요

[soi-ha]

진짜 큰 이유였는데 뚝딱 해결해줘서 고마워요!