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

[Feature] main 이벤트 화면 레이아웃, 화면 전환 구현 #62

Merged
merged 8 commits into from
Aug 13, 2024

Conversation

leve68
Copy link
Member

@leve68 leve68 commented Aug 12, 2024

🎯 이슈 번호

💡 작업 내용

  • 이벤트 1,2 페이지 레이아웃
  • 이벤트 화면 이동 애니메이션
  • 이벤트 화면 이동간 자동차 이미지

💡 자세한 설명

2024-08-12.9.48.54.mov

IntersectionObserver

const observerCallback = (entries: IntersectionObserverEntry[]) => {};

const options = {
  root: null,
  rootMargin: "0px",
  threshold: [0.9],
};

const observer = new IntersectionObserver(observerCallback, options);

fadeElements.forEach((element) => {
  if (element) {
    observer.observe(element);
  }
});
  • 관찰할 대상을 ref 배열로 등록
  • 옵션과 콜백함수 선언
  • 옵션에 맞는 인터랙션이 있을 때 옵저버가 콜백함수를 실행함

Snap

<div ref={SectionRef}>
  <FCFSEventSection ref={FCFSRef}></FCFSEventSection>
  <RandomEventSection ref={RandomRef}></RandomEventSection>
</div>
  • 자동차를 섹션 이동 간 고정하기 위해 div로 묶음
  • snap align 이 snap부모 요소 바로 아래에 있지 않아도 잘 적용됨

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

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

@leve68 leve68 added ✨ Feature new feature 🎨Style For Style labels Aug 12, 2024
@leve68 leve68 added this to the 이벤트 페이지 개발 milestone Aug 12, 2024
@leve68 leve68 requested a review from jw0097 August 12, 2024 13:24
@leve68 leve68 self-assigned this Aug 12, 2024
Copy link
Collaborator

@jw0097 jw0097 left a comment

Choose a reason for hiding this comment

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

👍

const SectionRef = useRef<HTMLDivElement>(null);

const [isImageVisible, setIsImageVisible] = useState(false);
const [isSectionVisible, setIsSectionVisible] = useState({
Copy link
Collaborator

Choose a reason for hiding this comment

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

이거 안쓰이는 값 같습니다!

Copy link
Member Author

Choose a reason for hiding this comment

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

덕분에 수정해씁니다~

@leve68 leve68 merged commit b06e110 into develop Aug 13, 2024
1 check passed
@leve68 leve68 deleted the feature/main-landing branch August 13, 2024 01:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature new feature 🎨Style For Style
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants