전수현 - scrollmeter

[freechird2]

프로젝트 이름

Scrollmeter

개요

스크롤 프로그레스 바를 구현하는 웹용 라이브러리입니다.
이 라이브러리는 웹 페이지의 스크롤 위치를 기반으로 화면 높이와 현재 스크롤 위치를 프로그레스 바 형식으로 시각화합니다.
또한, 페이지 내 h1 태그 위치를 퍼센트로 계산하여 프로그레스 바에 표시하며, 해당 표시를 클릭하면 해당 위치로 이동할 수 있는 기능(ex: 유튜브timeline)을 제공합니다.

저장소 주소

https://github.com/freechird2/scrollmeter

npm 주소

https://www.npmjs.com/package/@scrollmeter/core

체크리스트

• 개인 저장소 생성
• README.md 파일 작성 (다음 항목 포함)
  • 프로젝트 개요
  • 설치 방법 / 사용 방법
    • 가능하다면 동영상이나 animated gif 첨부
  • 라이선스 표기
• 기능 구현
  • 기능
    • container 높이와 scroll된 비율 만큼 프로그레스 바의 width를 조절
    • children으로 받은 요소 안에서 가장 높은 zIndex(highestZIndex)를 찾아 프로그레스 바의 zIndex를 그보다 높게 (highestZIndex +1) 설정
    • children으로 받은 요소 안에서 h1 태그를 찾아 프로그레스 바 위에 timeline 설정
    • timeline hover 시 해당 h1의 text를 tooltip으로 노출
    • timeline 클릭 시 해당 h1 위치로 이동
  • 디자인 Custom 기능
    • 프로그레스 바 디자인 custom
    • Timeline 디자인 custom
    • Tooltip 디자인 custom
• 테스트 추가 (라인 커버리지 60% 이상)
• 사용 예제 프로젝트 추가 (examples 폴더 아래에 2개 이상)
• npm 퍼블리싱
• CI 설정
  • PR에 등록되었을 때 테스트 실행
  • main 프로젝트에 머지되었을 때 npm 퍼블리싱