[Feature] performance 섹션 구현, useInView 커스텀 훅 제작

[leve68]

🎯 이슈 번호

• [Feature] Main Screen 구현 #53
• [Feature] Info Screen 구현 #59

💡 작업 내용

• performance sectioin
• useInView custom hook

💡 자세한 설명

2024-08-14.11.24.49.mov

Custom Hook

자주 사용되는 페이지 진입 인터렉션을 위한 훅을 만듦

/**
 * 훅을 사용하는 컴포넌트가 랜더링 될 때 ref에 옵저버 등록
 * 사용자 뷰에 threshold만큼 ref요소가 들어오면 isInView true 리턴
 * @param {number} threshold 임계점
 * @returns { isInView, elementRef }
 * @example
 * const ExampleComponent = () => {
 *   const { isInView, elementRef } = useInView<HTMLDivElement>(0.5);
 *   return <div ref={elementRef}>{isInView ? "In view" : "Out of view"}</div>;
 * };
 */

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

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

[jw0097]

IntersectionObserver 훅 잘 사용하겠습니다👍