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

피드 상세 뷰 이미지 캐러셀 UI 추가 #409

Merged
merged 6 commits into from
Sep 17, 2023
Merged

Conversation

eunsukimme
Copy link
Member

@eunsukimme eunsukimme commented Sep 16, 2023

🚩 관련 이슈

📋 작업 내용

  • 캐러셀을 구현하기 위해 embla-carousel-react 를 추가했어요. 기존에 사용하는 react-slick 보다 가볍고 개발 경험이 좋아서 추가했어요(Github)
  • 이미지 캐러셀 모달 컴포넌트 ImageCarouselModal 을 추가했어요
  • 피드 상세 뷰에서 이미지를 클릭하면 이미지 캐러셀 모달이 열리도록 연동했어요
  • 스토리북에 OverlayProvider 데코레이터를 추가했어요. 이제 useOverlay 을 사용하는 컴포넌트도 스토리북에서 볼 수 있어요.

📌 PR Point

  • 나중에 캐러셀을 공통으로 사용할 수 있게 된다면 모달과 캐러셀을 분리할 수 있겠단 생각이 들었어요.

📸 스크린샷

Screen.Recording.2023-09-17.at.12.27.09.AM.mov

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Sep 16, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: a6b1cae
Status:⚡️  Build in progress...

View logs

@eunsukimme eunsukimme temporarily deployed to development September 16, 2023 15:22 — with GitHub Actions Inactive
@eunsukimme eunsukimme temporarily deployed to development September 16, 2023 15:28 — with GitHub Actions Inactive
@eunsukimme eunsukimme marked this pull request as ready for review September 16, 2023 15:28
Copy link
Member

@100Gyeon 100Gyeon left a comment

Choose a reason for hiding this comment

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

이렇게 좋은 게 있었다니.. 최고야 🤩

Comment on lines +21 to +28
useEffect(() => {
if (!api) return;
api.on('select', () => setCurrentIndex(api.selectedScrollSnap() + 1));

return () => {
api.destroy();
};
}, [api]);
Copy link
Member

Choose a reason for hiding this comment

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

이 부분 궁금해서 찾아봤는데 문서도 넘 친절하고 좋네요!
또 배워갑니다😊

@eunsukimme eunsukimme temporarily deployed to development September 17, 2023 04:51 — with GitHub Actions Inactive
Base automatically changed from feat/#404 to develop September 17, 2023 04:56
@eunsukimme eunsukimme temporarily deployed to development September 17, 2023 04:58 — with GitHub Actions Inactive
@eunsukimme eunsukimme merged commit 1a94682 into develop Sep 17, 2023
1 of 2 checks passed
@eunsukimme eunsukimme deleted the feat/#406 branch September 17, 2023 04:59
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.

피드 상세 뷰 이미지 캐러셀 UI 추가
2 participants