기업 랜딩페이지
🖼️Demo
⚡Features
- 다양한 해상도를 지원하기 위해 브라우저의 높이, 너비에 따라 반응형이 대응되는 가로스크롤 홈페이지입니다.
- 모든 컴포넌트의 사이즈를 vh로 손수 측정하고 relative position, absolute position을 활용하여 UI를 구현하였습니다.
- recoil을 활용하여 브라우저 높이를 전역 상태로 정의하여 높이가 변할 때 마다 모든 컴포넌트의 사이즈, 위치가 리렌더링되도록 처리하였습니다.
- 가로스크롤 베이스 스크롤이지만 “채용”페이지는 세로스크롤로 전환되도록 브라우저 이벤트를 제어하였습니다.
- 비동기인 JS 이벤트가 스크롤 방향 전환 타이밍을 지연하지 않도록 정확히 제어하기 위해 스크롤 이벤트를 후킹하여 스크롤 전환을 구현하였습니다.
- Windows 마우스 스크롤 이벤트와 Mac OS의 trackpad 이벤트를 구분하여 제어하였습니다.
🖥️Skills
- vanilla CSS, styled-components
📂Extra Info
(1) 프로젝트 정보
(2) 작업기간
- 개발기간 : 2023.08~2023.08 (14일)
- 총 작업기간 : 2023.08~2023.08 (3주)
