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

개요

메인페이지(/)에서 결제를 원할 때만 진행 (가입없이 후원하기)과 멤버쉽 페이지(/membership)으로 이동 후 결제하는 방향으로 나눴기 떄문에 checkout 에서 명칭을 바꿉니다.

결제 QR 이미지를 '가입없이 후원하기'를 누르기 전엔 blur 처리 하도록 하고 멤버쉽 페이지로 이동하도록 추가합니다.

작업사항

checkout -> membershipGateway로 명칭 변경 후 관련 부분 수정
membershipPrice에서 membershipInfo로 명칭 변경 후 관련 부분 수정
'가입없이 후원하기' 버튼 클릭 하면 QR 이미지가 보이는 기능 추가
MembershipInfo에서 QR 부분을 분리해서 MembershipLevelItem 컴포넌트로 분리

변경 전 폴더구조

📂checkout ┣ 📂membershipPrice ┃ ┣ 📜MembershipPrice.css.ts ┃ ┗ 📜MembershipPrice.tsx ┣ 📂sponsorsReview ┃ ┣ 📜SponsorsReview.css.ts ┃ ┗ 📜SponsorsReview.tsx ┣ 📜Checkout.css.ts ┗ 📜Checkout.tsx

변경 후 폴더구조

📦membershipGateway ┣ 📂membershipInfo ┃ ┣ 📜MembershipInfo.css.ts ┃ ┣ 📜MembershipInfo.tsx ┃ ┗ 📜MembershipLevelItem.tsx ┣ 📂sponsorsReview ┃ ┣ 📜SponsorsReview.css.ts ┃ ┗ 📜SponsorsReview.tsx ┣ 📜MembershipGateway.css.ts ┗ 📜MembershipGateway.tsx

MembershipLevelItem 컴포넌트

{paymentData.map(membershipLevel => (
          <li
            key={membershipLevel.title}
            className={styles.MembershipLevelItem}
          >
            <strong>{membershipLevel.title}</strong>
            <div className={styles.MembershipImageWrapper}>
              <Image
                src="https://placehold.co/400x400.png"
                alt="Placeholder Image"
                width={400}
                height={400}
              />
            </div>
            <div>{membershipLevel.가격.toLocaleString()}원</div>
          </li>
        ))}

이 부분에서 리스트 부분을 아래와 같이 따로 컴포넌트로 분리했습니다.

 <MembershipLevelItem
     key={title}
      title={title}
      imageUrl={image || 'https://placehold.co/300x300.png'}
      price={price}
 />

기타

SponsorReview의 캐러셀 부분 구현을 위해 이슈 #19 를 개설했습니다.
Main -> 하위 컴포넌트 간 props 전달을 zustand로 대체 하는 방법에 대해 고민중입니다.

WonhyeongLee / lwh-membership-page

[Feat] checkout 부분 변경 및 기능추가 #22

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

개요

작업사항

변경 전 폴더구조

변경 후 폴더구조

MembershipLevelItem 컴포넌트

기타