Feat/carousel: Carousel 컴포넌트 구현

[leesunmin1231]

🤠 개요

• Feat: Carousel 컴포넌트 구현 #60
• 이슈에 첨부한 링크 참고하여 구현하였습니다.
• 전체적인 UI는 애플 공식 홈페이지, idus 어플 참고하였습니당
  애플 홈페이지

추가된 사항

• props가 바뀌었습니다.
• slide 형태가 추가되었습니다.

최종 수정

• 슬라이딩 방식 변경: useEffect로 스크롤 옮기는 방식 -> 스크롤 옮기는 함수 호출
• scrollIntoView 메소드 behavior: 'smooth'옵션이 크롬 브라우저에서 제대로 동작 안하는 오류 -> setTimeout으로 감쌌습니다. 자세한 설명은 Feat: Carousel 컴포넌트 구현 #60 이슈에 가면 확인하실 수 있습니다.
• 슬라이드 이동 버튼 빠르게 클릭시 progress 상태가 왔다갔다 하는 오류가 있어서, throttle을 걸어주었습니다.
• useContext 커스텀 훅 분리

이외에 추가적으로 궁금하신 사항이나 수정할 사항있으면 댓글 남겨주세요~~

💫 설명

• 디자인을 어떻게 해야할까 고민을 많이 했는데 모바일 퍼스트라는 점을 가장 크게 고려했어요.
• 처음에 넣어줄 내용들을 배열 타입 props로 받았다가, 너무 유연함이 없는 컴포넌트인 거 같아서 Compound component 패턴으로 리팩토링했습니다.
• Carousel 컴포넌트 안에 자식 컴포넌트로 여러개의 Card 컴포넌트가 있는 형태이며, Card 컴포넌트 내에 있는 자식 요소들은 하나의 카드 안에 들어가게 됩니다.
• 자식 컴포넌트는 Card, Slide 컴포넌트가 있으며 Slide 컴포넌트를 사용하게 될 경우, width가 100%인 캐러셀을 사용할 수 있습니다. (자세한 건 스토리북을 참고해주세요)
• 가로 스크롤과 버튼으로 slide를 이동할 수 있습니다.

components

Carousel: 감싸는 부모 컴포넌트
Card: 카드 형태 자식 컴포넌트
Slide: slide 형태 자식 컴포넌트: 적용시 width는 100vw로 들어가는 layout입니다. Carousel props로 width나 line을 넘겨줘도 무시됩니다. height는 정상적으로 반영됩니다.

props

line: number => 캐러셀 카드형태일 때, 가로줄 개수
width: number => 캐러셀에 들어갈 카드 하나의 너비
height: number => 캐러셀에 들어갈 카드 하나의 높이

line 제외하고 optional 이고, line의 경우 default를 1로 설정해두었습니다.
width, height는 카드 하나의 규격을 커스텀 할 수 있도록 넣어주었습니다.

📷 스크린샷 (Optional)

Default inline layout

Custom inline layout

Default Two Line layout

Custom Two Line layout

Multi Line layout

Slide layout

[prayinforrain]

멋있어요~! 너무 이뻐요
리뷰에 자잘한 생각을 적어뒀고 하나만 더 추가할게요. 지금 구현된 캐러셀에서 선택된 페이지가 오는 위치를 지정할 수 있을까요?
그러니까 음.. 애플의 캐러셀을 예로 들면

선택된 카드가 이 체크한 위치에 오도록 되어 있고, usecase에 따라 선택된 카드가 캐러셀의 중앙에 오도록 하고싶을 수도 있을 것 같아요. 이 부분을 어떻게 제어할 수 있는지 궁금해요.

[iyu88]

수고 많으셨어요! 👍👍👍
변경 사항이 많을 것 같은데 천천히 해주세요~ 😊

[se030]

고생하셨습니다 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
리뷰할게 자잘한 것밖에 없어요 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[prayinforrain]

고생하셨어요!

작은 버그가 있는데..ㅎㅎ..
NavigationButton으로 페이지 이동 -> scrollEventHandler 디바운스 타이머 시작 -> 타이머가 끝나기 전에 한번 더 눌러 페이지 이동
이런 상황에서 자꾸 이전 카드로 돌아오는 것 같아요. 간단히 말하면 네비게이션 버튼을 막 광클하면 덜컹덜컹해요.

이것만 해결되면 다른 문제는 없는 것 같아요! 너무 좋아요

[iyu88]

수고많으셨어요~~
무수히 많은 Conversation을 처리하느라 고생하셨습니다.
👍👍👍

[prayinforrain]

너무 고생하셨어요 ㅎㅎ..... 면목없네요
두 가지만 반영해 주시구.. 혹시 주말에 제가 늦게 확인하면 곤란하니 approve는 미리 꽂아 둘게요..

[iyu88]

수정사항만 반영하고 합치면 될 것 같아요~
고생 많으셨습니다!