refactor state management with zustand

[WonhyeongLee]

개요

현재 아래와 같이 MainPage에서 필요한 데이터를 getMembershipInfo를 통해 받아오고 각 컴포넌트에 props로 넘겨주는 방식으로 구현되어 있습니다.

const MainPage = async () => {
  const {
    commonBenefits,
    membershipBenefits,
    paymentOptions,
    sponsorsReviews,
  } = await getMembershipInfo();

  return (
    <>
      <Introduction />
      <CommonBenefits commonBenefits={commonBenefits} />
      <MembershipBenefits membershipBenefits={membershipBenefits} />
      <MembershipGateway
        sponsorsReviews={sponsorsReviews}
        paymentOptions={paymentOptions}
      />
    </>
  );
};

export default MainPage;

23 의 작업을 하던 중 MembershipBenefits 컴포넌트를 BenefitsList, SelectedBenefitDetail으로 분리했고 아래와 같은 구조를 가지게 되었습니다.

MembershipBenefits의 자식 컴포넌트간 state와 props를 관리하기 위해 ContextAPI를 사용해서 구현하다가 아예 MainPage에서 가져온 데이터를 zustand 라이브러리를 사용하면 전역 상태 관리를 단순화하고 Props drilling문제를 해결하기 위해 리팩토링을 진행하려고 합니다.

작업 목록

• [x] Next.js 14 환경에서 사용하기 위해 별도의 컴포넌트로 감싸주는 작업을 진행합니다.
• [x] commonBenefits, membershipBenefits, paymentOptions, sponsorsReviews 각 데이터 유형에 대한 store를 생성합니다.
• [x] 리팩토링 후 정상작동하는지 확인

[github-actions[bot]]

A branch has been created for this issue: refactor/32-refactor_state_management_with_zustand.