32 이슈에 대한 작업 내용입니다.

기존 이슈 작업방향 변경 배경

먼저 기존 이슈에 따라서 fetch 한 데이터를 zustand로 저장 후 각 컴포넌트에서 구독해서 사용하는 방식으로 구현했습니다. 공식문서 를 참고해서 구현했는데 해당 데이터를 사용하는 부분이 렌더링 되는 것 자체는 문제가 없지만 이전과 달리 SSR이 동작하지 않아서 아래와 같이 gsap의 target으로 className을 사용하고 있을 때 해당 target을 찾을 수 없다는 오류가 발생했습니다.

      commonBenefitsTl.fromTo(
        `.${styles.CommonBenefitItem}`,
        { xPercent: -50, opacity: 0 },
        {
          xPercent: 0,
          opacity: 1,
          duration: 0.4,
          stagger: 0.4,
          ease: 'power2.out',
        },
        '<0.5',
      );

해결하려고 시간을 투자했지만 zustand에서 Next 적용을 위해 provider을 사용해야 하는 문제 (간단한게 장점인데 이 부분이 없어짐)와 결국 해결은 못했기 때문에 tanstack-query를 사용하기로 계획을 변경했습니다.

zustand는 membershipBenefits 내에서 컴포넌트간에 전달되어야 하는 상태와 작업들을 공유하기 위해 사용했습니다.

작업 내용

api 호출을 필요한 섹션에 맞춰서 /api/memberships, /api/membership-benefits, /api/sponsors-reviews 로 분리하고 연관된 부분 모두 수정
Next환경의 app-router에서 tanstack-query를 사용하기 위한 prefetch, hydrate, dehydrate 추가
각 컴포넌트에서 prefetching 된 데이터를 사용하도록 수정

참고 링크

Next에서 tanstack-query 사용 관련 자세한 내용의 블로그

WonhyeongLee / lwh-membership-page

Tanstack-query와 zustand를 사용해 리팩터링 #33

32 이슈에 대한 작업 내용입니다.

기존 이슈 작업방향 변경 배경

작업 내용

참고 링크