김지훈 - carousel

[kigpand]

프로젝트 이름

ji-react-carousel

개요

여러 이미지를 슬라이드로 보여줄 수 있는 가벼운 라이브러리.
기능

1. 사이드 화살표로 양옆으로 포커스된 컴포넌트를 전환하는 기능
2. 마우스 드래그나 터치를 통해 슬라이드를 전환하는 기능
3. 페이지네이션 버튼과 연동해서 동작하도록 구현할 예정입니다(페이지네이션 버튼은 on/off가능)
4. 포커스된 슬라이드 제거 기능

또한 슬라이드는 단순한 carousel뿐 아니라 아래 리스트와 같이 작업할 예정입니다.

1. 기존 옆으로 슬라이드되는 형식의 carousel(ex. 넷플릭스 영화 리스트 동작)
2. https://swiperjs.com/ 사이트에서 endless creativity의 첫번째 UI

시간이 괜찮으면 또 다른 UI들을 추가할 예정입니다.

저장소 주소

https://github.com/kigpand/ji-react-carousel

npm 주소

https://www.npmjs.com/package/ji-react-carousel

체크리스트

• 개인 저장소 생성
• README.md 파일 작성 (다음 항목 포함)
  • 프로젝트 개요
  • 설치 방법 / 사용 방법
    • 가능하다면 동영상이나 animated gif 첨부
  • 라이선스 표기
• 기능 구현
  • 기본 Carousel Slider 구현
  • Carousel infinite 기능 구현
  • auto slide 구현
  • 페이징 구현
  • drag, touch slide 기능 구현
  • 슬라이드 제거 기능
  • 추가 UI 구현(추후 추가 예정)
• 테스트 추가 (라인 커버리지 60% 이상)
• 사용 예제 프로젝트 추가 (examples 폴더 아래에 2개 이상)
• npm 퍼블리싱
• CI 설정
  • PR에 등록되었을 때 테스트 실행
  • main 프로젝트에 머지되었을 때 npm 퍼블리싱

[taggon]

의외로 이것저것 신경쓰다보면 설계부터 시간이 많이 걸릴 내용으로 보입니다.
나름의 로드맵을 정해서 일단 제일 단순한 기능 완료 - 테스트 - 그 다음 기능 - 테스트 - .. 의 짧은 반복 주기로 작업하시면 도움이 될 것 같습니다. 시간이 되면 다음 기능을 구현하고 그렇지 않으면 일단 멈추고 완성도를 높이는 식으로요.

[kigpand]

알겠습니다!