[Feat/#120] 메인 페이지 Carousel 기능 추가 #121
Conversation
|
PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶 |
| const moveToNthSlide = (index: number) => { | ||
| setTimeout(() => { | ||
| setCurrIndex(index); | ||
| if (carouselRef.current !== null) { | ||
| carouselRef.current.style.transition = ""; | ||
| } | ||
| }, 500); | ||
| }; |
There was a problem hiding this comment.
p5) 일정 시간을 준 뒤에 우선 인덱스를 옮겨보고, 해당 인덱스의 위치가 존재하지 않으면 이동하는 애니메이션을 존재하지 않도록 하는 센스 좋아요 ~~!
| useEffect(() => { | ||
| if (carouselList.length !== 0) { | ||
| const startData = carouselList[0]; | ||
| const endData = carouselList[carouselList.length - 1]; | ||
| const newList = [endData, ...carouselList, startData]; | ||
|
|
||
| setCurrList(newList); | ||
| } | ||
| }, [carouselList]); |
There was a problem hiding this comment.
p5) 새로운 배열을 연결하는 방식을 채택하셨네요! 그걸 위해 마지막 데이터와 시작 데이터를 양쪽에 추가해줘서 좀 더 자연스럽게 만들어준 것도 좋아요 ~!
| // idx 변경되면 위치 이동 | ||
| useEffect(() => { | ||
| if (carouselRef.current !== null) { | ||
| carouselRef.current.style.transform = `translateX(-${currIndex}00%)`; |
There was a problem hiding this comment.
p5) ${currIndex}00% 귀엽네요! 가독성도 좋아요!
| return () => { | ||
| clearInterval(time); |
There was a problem hiding this comment.
p5) 언마운트될 때 클린업 함수 작성하는 센스 좋은데요? 사이드 이펙트 방지하는 것 같고 좋네요!
|
|
||
| list-style: none; | ||
|
|
||
| img { |
There was a problem hiding this comment.
p5) 까먹고 있었는데 button 요소 의 하위 요소로 img 요소가 왔을 떄의 스타일 정의 방식은 오랜만에 보내요!
딱히 코드의 내용이 없을 때 활용하면 좋긴 하겠네요 ~!
| <S.InfoLayout> | ||
| <S.InfoBtn | ||
| onClick={() => { | ||
| window.open(privacy, "개인정보처리방침", "noopener"); |
There was a problem hiding this comment.
p5) 오 ! 주소는 privacy 변수로 담아 넘겨주고, 두번째 인자 windowName 은 새 창의 name 속성으로 사용된다고 하더라구요. 그래서 만약 이미 같은 name의 창이 열려있으면 해당 창으로 이동하게 만들어주는 기능을 해준다고 합니다!
마지막으로, 세번째 인자인 windowFeatures는 보안 기능이라고 합니다 ! noopener를 줄 경우 새 창이 원본 창의 window.opener 속성을 제어할 수 없게 만든다고 하네요. XSS에 대해 한번 설명한 적이 있는데, 악성 스크립트가 삽입되어 있는 사이트나, 애초에 악의적인 목적으로 만들어진 사이트에서 원본 창을 제어하여 쿠키를 유출하는 경우를 방지하기 위함인 것 같습니다 . 참고하세요~!
| // 서버에서 이미지 url 받아오기 | ||
| const ImgList = [carouselImg, carouselImg, carouselImg, carouselImg, carouselImg]; | ||
|
|
||
| const Carousel = (promotionList: PromotionComponentProps) => { |
There was a problem hiding this comment.
| const Carousel = (promotionList: PromotionComponentProps) => { | |
| const Carousel = ({ promotionList }: PromotionComponentProps) => { |
|
|
||
| import carouselImg from "../../../../assets/images/banner_roll.png"; | ||
| interface PromotionProps { |
There was a problem hiding this comment.
p5) 파일 경로 이렇게 작성하신 이유가 있을까여??
There was a problem hiding this comment.
서버에서 보내주는 이미지를 삽입해야 해서 임시로 넣은 이미지입니다!
|
📌 관련 이슈번호
🎟️ PR 유형
어떤 변경 사항이 있나요?
✅ Key Changes
📢 To Reviewers
main > components > carousel파일만 보면 됩니다~📸 스크린샷
현재 gif는 5초인데 디자인 측 요청으로 3초로 변경되었습니다!