[Feature] 차량 편의, 드라이빙 정보 제공 컴포넌트 구현, 캐러셀 클릭 오류 수정

[jw0097]

🎯 이슈 번호

#63

💡 작업 내용

• 차량 편의 정보 제공 컴포넌트 구현
• 차량 드라이빙 정보 제공 컴포넌트 구현
• 캐러셀 클릭시 확률적으로 이동하던 오류 수정

💡 자세한 설명

• 캐러셀에서 클릭을 했을 때, 확률적으로 스크롤이 이동하는 문제를 발견했다. 위의 요소(자동차 외장 이미지)가 보이지 않으면 제대로 동작하는 것을 보았을때, 여러 snap요소가 중복되면서 발생하는 문제인 것 같았다. 따라서 scrollintoview를 scrollto로 변경해서 문제를 해결했다. 이때도, window.scrollTo를 하면 안되었고 캐러셀 요소를 직접 잡아서 carousel.scrollTo를 해줘야 문제가 해결되었다.

onClick={(event) => {
  const index = itemRefs.current.indexOf(
    event.currentTarget as HTMLDivElement,
  );
  const targetElement = itemRefs.current[index];

  if (targetElement) {
    const carouselContainer = targetElement.parentElement;

    if (carouselContainer) {
      const targetPosition =
        targetElement.offsetLeft - carouselContainer.offsetLeft;

      carouselContainer.scrollTo({
        top: 0,
        left: targetPosition,
        behavior: "smooth",
      });

      setSelectedIndex(index);
    }
  }
}}

---

• 인터섹션 옵저버를 적극적으로 활용하여 스크롤 시, 애니메이션을 구현하였다.

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?