[CREATE] postid 페이지 구현

[nakyoung98]

이 PR은 어떤 유형인가요?

• [ ] 리팩터링
• [x] 기능
• [ ] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

RollingPaperPage 구현 (Post/id 페이지 부분만)

  return (
    <>
      <RollingPaperPageBlock>
        <HeaderVisibilitySensor ref={header}>
          <StyledHeader />
        </HeaderVisibilitySensor>

        <main>
          <PostHeader></PostHeader>
          <CardLazyGridContainer postId={id} />
        </main>
      </RollingPaperPageBlock>
      {isScrollToTopVisible && (
        <ScrollToTopButton onClick={scrollToTop}>UP</ScrollToTopButton>
      )}
    </>
  );

1. HeaderVisibilitySensor 컴포넌트 구현

   • header를 감싸는 div 태그
   • Observer를 통해 지속적으로 추적, 보이지 않으면 !target.isIntersecting ScrollToTopButton이 보이도록 함
   • 보이면 ScrollToTopButton이 보이지 않도록 함

2. ScrollToTopButton 컴포넌트 구현

   • 버튼 클릭 시 브라우저 상단으로 이동

3. CardLazyGridContainer 컴포넌트 사용

   • 실질적인 result 데이터를 호출해 카드에 보여주는 컨테이너 컴포넌트

CardLazyGridContainer 구현 (Post/id 페이지 부분만)

    <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>

1. getData를 통해 데이터를 가져오는 컴포넌트
   • 리스트의 map 함수를 통해 Card 컴포넌트를 생성
2. maxCardsPerLine을 통해 Card를 grid로 다룸
   • 맨 앞의 Card는 message 추가 페이지로 이동함
3. observer로 LoaderObserver추적
   • LoaderObserver가 tracking될 시 LoadingAnimator가 활성화되고 LoaderObserver가 사라짐
   • 로딩이 끝날 시 LoadingAnimator가 안보이고 LoaderObserver가 나타남

관련 티켓 및 문서

• Related Issue #56
• Closes #56

스크린샷, 녹화

변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [ ] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [ ] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?

[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?