캐러셀 슬라이드 구현 (issue#57) #70
Conversation
frontend/src/hooks/useCarousel.ts
Outdated
| const carouselItems = React.Children.toArray(children); | ||
| const carouselItemLength = carouselItems.length; | ||
| const [currentIndex, setCurrentIndex] = useState(1); | ||
| const [isAnimating, setIsAnimating] = useState(false); |
There was a problem hiding this comment.
[A]
아주 아주 사소하지만, 찾아보니 Animate의 의미가 '움직이게 만들다'의 느낌이어서 isMoving이나, isSliding 정도로 바꿔보면 어떨까요? 만약 '움직이게 만들다'의 의미를 담고 싶으셨던 거면 유지해도 좋을 것 같습니다 😄
There was a problem hiding this comment.
헉 짚어주셔서 감사합니다~!
isSliding으로 바꿔보았어요 !
frontend/src/hooks/useCarousel.ts
Outdated
| const useCarousel = ({ children }: PropsWithChildren) => { | ||
| const carouselItems = React.Children.toArray(children); | ||
| const carouselItemLength = carouselItems.length; | ||
| const [currentIndex, setCurrentIndex] = useState(1); |
There was a problem hiding this comment.
단순 궁금) currentIndex 초기값이 0이 아니라 1인 이유가 궁금해요~~!
There was a problem hiding this comment.
헉 짚어주셔서 감사합니다 :)
(이유 없습니다.. 휴먼 에러.. 🥲)
| import type { PropsWithChildren } from 'react'; | ||
| import React, { useState, useRef, useEffect } from 'react'; | ||
|
|
||
| const useCarousel = ({ children }: PropsWithChildren) => { |
There was a problem hiding this comment.
버건디 말씀과 다르게 useCarousel 로직 깔끔한데요 ㅎㅎ 뚝딱뚝딱 잘 만드셨네요 👍🏻
| import React, { useState, useRef, useEffect } from 'react'; | ||
|
|
||
| const useCarousel = ({ children }: PropsWithChildren) => { | ||
| const carouselItems = React.Children.toArray(children); |
There was a problem hiding this comment.
오 이런 방법으로도 배열을 만들 수 있군요!! 배워갑니다 👍
| {carouselItems.map((item, index) => ( | ||
| <S.Slide key={`original-${index}`}>{item}</S.Slide> | ||
| ))} | ||
| {carouselItems.map((item, index) => ( | ||
| <S.Slide key={`clone-${index}`}>{item}</S.Slide> | ||
| ))} |
There was a problem hiding this comment.
단순 질문) clone 슬라이드는 어떤 역할을 하는지 궁금합니다~! original과 clone 두 개가 있어서요 ㅎㅎ
There was a problem hiding this comment.
보통 무한 캐러셀을 구현할때 부드러운 애니메이션을 위해서 복제본을 만들더라구요 !
(가령 마지막 슬라이드에서 Next 버튼을 눌렀을때 다시 첫번째 슬라이드로 넘어가는 경우)
사용하고 있던 기존 캐러셀 라이브러리도 이런식으로 복제본을 만들어서 사용하길래 적용시켜보았습니다!
구현 요약
캐러셀 슬라이드를 구현했습니다.
연관 이슈
일단 돌아가는 쓰레기 만들어보았습니다..
close #57