Embla Carousel 컴포넌트 구현

[sumi-0011]

💻 작업 내용

Embla Carousel 라이브러리를 활용한 새로운 캐러셀 컴포넌트를 구현했습니다.

주요 변경사항:

• 새로운 캐러셀 시스템 구축

  • EmblaCarousel.tsx: 메인 캐러셀 컴포넌트 (122줄)
  • EmblaCarouselArrowButtons.tsx: 좌우 네비게이션 화살표 버튼 (110줄)
  • EmblaCarouselDotButton.tsx: 하단 도트 인디케이터 (94줄)
  • Arrow.tsx: 화살표 아이콘 SVG 컴포넌트 (74줄)

• 라이브러리 의존성 추가

  • embla-carousel: 코어 캐러셀 라이브러리
  • embla-carousel-react: React 바인딩

• 기타 개선사항

  • Laboratory 페이지 레이아웃 정리
  • 드래그 선택 컴포넌트 export 수정
  • 백그라운드 섹션 스타일 개선

구현 흐름:

1. Embla Carousel 라이브러리 설치 및 의존성 추가
2. 캐러셀 컴포넌트 아키텍처 설계 (메인 컴포넌트 + 컨트롤 컴포넌트 분리)
3. 도트 및 화살표 네비게이션 스타일 적용
4. 재사용 가능한 컴포넌트로 모듈화

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/update-carosel

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}