Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎉 이미지 슬라이더 구현 #22

Merged
merged 8 commits into from
Nov 7, 2023
Merged

🎉 이미지 슬라이더 구현 #22

merged 8 commits into from
Nov 7, 2023

Conversation

juyeon-park
Copy link
Contributor

- 목적

관련 티켓 번호: 87

  • 이미지 슬라이더 구현

- 주요 변경 사항

  • 화살표 버튼을 통해 이전, 다음 슬라이드로 이동가능
  • autoSlide를 true로 주면 default 3초마다 자동으로 슬라이더 이동 적용 가능
  • 마지막 사진에서 다음 버튼 또는 첫번째 사진에서 이전 버튼을 눌렀을때 자연스러운 이동을 위해 이미지 배열에 trick용 이미지를 양쪽 끝에 추가하고 사용자는 보이지 않게 transition duration 없이 이동시킴.

기타 사항 (선택)

  • 원래는 useRef를 이용해서 ref.current.style.transform 등등으로 조건이 일어났을 때 css 변경을 시키려고 했는데 transition, transform이 계속 안먹어서 useState 사용해서 style 내용을 계속 바꾸게 구현해놨습니다.

- 스크린샷 (선택)

image

@juyeon-park juyeon-park added the D-1 label Nov 1, 2023
@juyeon-park juyeon-park self-assigned this Nov 1, 2023
@oaoong oaoong closed this Nov 1, 2023
Copy link
Collaborator

@oaoong oaoong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

테스트코드를 다시 확인해주세요.

@oaoong oaoong reopened this Nov 1, 2023
oaoong

This comment was marked as resolved.

@oaoong oaoong closed this Nov 1, 2023
@oaoong oaoong reopened this Nov 1, 2023
@oaoong oaoong closed this Nov 1, 2023
@oaoong oaoong reopened this Nov 1, 2023
Copy link
Collaborator

@oaoong oaoong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 슬라이더 같은게 만들기 꽤 까다로운데 깔끔하게 잘 만들어주셨네요!!

const [currentIndex, setCurrentIndex] = useState(1)
const [coordinate, setCoordinate] = useState({ start: 0, end: 0 })
const [style, setStyle] = useState({
transform: `translateX(-${currentIndex}00%)`,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 currentIndex * 100같은 연산으로 처리하는거 어떨까요??

}
}, [currentIndex, imageList.length])

return (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트가 이미지, 버튼, 하단 인디케이터 세 가지로 분리되는 것 같은데
인디케이터 정도라도 따로 외부에서 빼서 만들면 조금 코드 읽기 수월해질 것 같습니다!

Comment on lines +78 to +93
useEffect(() => {
if (!autoSlide) return
const slideInterval = setInterval(goNextSlide, autoSlideInterval)
return () => clearInterval(slideInterval)
}, [autoSlide, autoSlideInterval, currentIndex, goNextSlide])

useEffect(() => {
if (currentIndex === 0) {
setCurrentIndex(imageList.length - 2)
setTimeout(function () {
setStyle({
transform: `translateX(-${imageList.length - 2}00%)`,
transition: '0ms',
})
}, 400)
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 핸들러가 아니라 effect로 각 케이스를 따로 주어야 하는 이유가 있나요? (제가 제대로 이해를 못 한거 같아서) 궁금해서 남깁니다.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

물론 저희 기획 상 이미지가 있는 가정이지만, 해당 슬라이더는 그와 별개로 추상화되어야 하므로 이미지가 없을 때 기본 이미지가 있는게 좋을 것 같습니다! CLS 때문이라도 그게 좋을 것 같아요

Copy link
Contributor

@doggopawer doggopawer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주연님 어려운 이미지 슬라이더 구현 잘해주셨습니다. 감사합니다.

const end = e.changedTouches[0].pageX
const distance = Math.abs(coordinate.start - end)

if (coordinate.start > end && distance > 2) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2라는 특정 숫자가 많이 나오는데, 코드에 대한 자세한 이해는 못했지만 매직넘버인 것 같아 상수화 하시면 좋을 것 같습니다.

Comment on lines +84 to +92
useEffect(() => {
if (currentIndex === 0) {
setCurrentIndex(imageList.length - 2)
setTimeout(function () {
setStyle({
transform: `translateX(-${imageList.length - 2}00%)`,
transition: '0ms',
})
}, 400)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const SLIDE_TRANSITION_DELAY = 400; 으로 정의해줘도 좋을 것 같습니다.

Copy link
Collaborator

@oaoong oaoong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actions 결과를 다시 확인해주세요. -자동으로 작성됨-

@juyeon-park juyeon-park merged commit c156c75 into develop Nov 7, 2023
2 checks passed
@juyeon-park juyeon-park deleted the NABI-87 branch November 7, 2023 06:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants