test: 최초 렌더링 시 인피니티 스크롤이 동작하지 않는 코드를 수정중입니다.

Author: Jeremy-Kr

src/components/Common/Footer.tsx

@@ -7,7 +7,7 @@ const Footer: FunctionComponent = () => {
     <FooterWrapper>
       제 블로그에 방문해 주셔서 감사합니다. 좋은 하루 보내세요!😆 <br /> &copy;
       2022 Developer Jeremy, Powered By Gatsby.
-      <Link to="easter-egg">🥚</Link>
+      <Link to="https://jeremy-kr.github.io/easter-egg/">🥚</Link>
     </FooterWrapper>
   )
 }

src/hooks/useInfiniteScroll.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
+import { MutableRefObject, useState, useEffect, useRef, useMemo } from 'react'
 import { PostListItemType } from 'types/PostItem.types'
 
 export type useInfiniteScrollType = {
@@ -8,18 +8,16 @@ export type useInfiniteScrollType = {
 
 const NUMBER_OF_ITEMS_PER_PAGE = 10
 
-const useInfiniteScroll = (
+const useInfiniteScroll = function (
   selectedCategory: string,
   posts: PostListItemType[],
-): useInfiniteScrollType => {
+): useInfiniteScrollType {
   const containerRef: MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement>(null)
   const observer: MutableRefObject<IntersectionObserver | null> =
     useRef<IntersectionObserver>(null)
   const [count, setCount] = useState<number>(1)
 
-  const containerRefNode = containerRef.current
-
   const postListByCategory = useMemo<PostListItemType[]>(
     () =>
       posts.filter(
@@ -49,14 +47,14 @@ const useInfiniteScroll = (
   useEffect(() => {
     if (
       NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length ||
-      containerRefNode === null ||
-      containerRefNode.children.length === 0 ||
+      containerRef.current === null ||
+      containerRef.current.children.length === 0 ||
       observer.current === null
     )
       return
 
     observer.current.observe(
-      containerRefNode.children[containerRefNode.children.length - 1],
+      containerRef.current.children[containerRef.current.children.length - 1],
     )
   }, [count, selectedCategory])