Closed nakyoung98 closed 8 months ago
return ( <> <RollingPaperPageBlock> <HeaderVisibilitySensor ref={header}> <StyledHeader /> </HeaderVisibilitySensor> <main> <PostHeader></PostHeader> <CardLazyGridContainer postId={id} /> </main> </RollingPaperPageBlock> {isScrollToTopVisible && ( <ScrollToTopButton onClick={scrollToTop}>UP</ScrollToTopButton> )} </> );
HeaderVisibilitySensor 컴포넌트 구현
!target.isIntersecting
ScrollToTopButton 컴포넌트 구현
CardLazyGridContainer 컴포넌트 사용
<CardLazyGridContainerBlock> <CardLazyGridBlock $columnNum={maxCardsPerLine}> <Card /> {cardDataList.map((cardData) => { return <Card key={cardData.id} cardData={cardData} />; })} </CardLazyGridBlock> {isLoading && <LoadingAnimator src={loadingImg} alt={"Loading"} />} {(hasNext && !isLoading) && ( <LoaderObserver ref={loadingBlock}></LoaderObserver> )} </CardLazyGridContainerBlock>
getData
maxCardsPerLine
LoaderObserver
LoadingAnimator
변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.
UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:
이 PR은 어떤 유형인가요?
설명
RollingPaperPage 구현 (Post/id 페이지 부분만)
HeaderVisibilitySensor 컴포넌트 구현
!target.isIntersecting
ScrollToTopButton이 보이도록 함ScrollToTopButton 컴포넌트 구현
CardLazyGridContainer 컴포넌트 사용
CardLazyGridContainer 구현 (Post/id 페이지 부분만)
getData
를 통해 데이터를 가져오는 컴포넌트maxCardsPerLine
을 통해 Card를 grid로 다룸LoaderObserver
추적LoaderObserver
가 tracking될 시LoadingAnimator
가 활성화되고 LoaderObserver가 사라짐LoadingAnimator
가 안보이고LoaderObserver
가 나타남관련 티켓 및 문서
스크린샷, 녹화
변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.
UI 접근성 체크리스트
UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:
[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?