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 event 라우팅, 타이머, ref 오류 수정 #71

Merged
merged 6 commits into from
Aug 14, 2024

Conversation

leve68
Copy link
Member

@leve68 leve68 commented Aug 14, 2024

🎯 이슈 번호

💡 작업 내용

  • useAnimate hook 수정
  • 페이지 라우팅 구현
  • 타이머 레이아웃
  • 이벤트, 영상 섹션에 snap-stop 추가

💡 자세한 설명

2024-08-14.5.25.26.mov

useAnimation

elementRef.currentanimationRef.current가 null일 경우 에러가 발생

const elementRef = useRef<T | null>(null);
const animationRef = useRef<Animation | null>(null);

const startAnimation = async () => {
    const element = elementRef.current;
    if (!element) return;

    const animation = element.animate(startKeyframes, startOptions);
    animationRef.current = animation;

    if (afterStartKeyframes.length > 0) {
      await animation.finished;
      element.animate(afterStartKeyframes, afterStartOptions);
    }
  };

  const stopAnimation = () => {
    const element = elementRef.current;
    const animation = animationRef.current;
    if (!element || !animation) return;

    animationRef.current = element.animate(
      cancelKeyframes,
      cancelOptions ?? startOptions,
    );
  };
  • elementRef.current와 animationRef.current에 대한 null 체크를 각 함수 초기에 수행
  • afterStartKeyframes가 비어있지 않은 경우에만 finished 이벤트 후 animate를 실행하도록 조건을 추가

CSS

scroll-snap-stop: always; 를 통해서 스크롤 세기와 관계 없이 무조건 멈추고 지나가도록 함

forwardRef

  • 처음에는 ref 2개를 전달하여 인포 페이지 스크롤 버튼을 구현하려고 했음
  • 잘안됨
  • ref를 받아온 부모 컴포넌트에서 함수를 전달하는 방식으로 구현

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

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

@leve68 leve68 added the ✨ Feature new feature label Aug 14, 2024
@leve68 leve68 added this to the 이벤트 페이지 개발 milestone Aug 14, 2024
@leve68 leve68 requested a review from jw0097 August 14, 2024 08:33
@leve68 leve68 self-assigned this Aug 14, 2024
@leve68 leve68 merged commit 7423cc7 into develop Aug 14, 2024
1 check failed
@leve68 leve68 deleted the feature/main-event branch August 14, 2024 08:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant