24.05.19~24.05.26

업무

정기 결제 구현

tosspayments를 통한 정기 결제 기능을 구현했다.

 

웹뷰를 통해 tosspayments 결제창을 띄워 카드 정보를 입력받고,

customer key와 billing key를 저장한 뒤

server에서 chron 작업을 생성해 매달 정해진 주기로 결제가 이뤄지도록 했다.

 

워낙에 공식문서가 잘 되어있고, API 사용법이 간단해 크게 어렵지 않게 구현할 수 있었다.

앱 <-> 웹 간 통신 역시 이전에 작업해 둔 모듈이 있어, 쉽게 마무리!

 

다음 주 서버 작업이 완료되면, 통합 테스트를 진행할 예정이며

카드사 심사가 끝나면 실제 client key로 테스트 후 마무리 할 계획이다.

 

멤버십 관련 권한 적용

정기 결제를 통해 멤버십 권한을 획득한 사용자에게만

특정 기능(알림톡)을 사용할 수 있도록 앱 내 기능을 변경해야 했다.

 

이때 해당 모듈은

1. 멤버십이 존재할 경우, 사용처 별 함수 동작
2. 멤버십이 존재하지 않을 경우, 전역 모달(멤버십 가입 안내) 노출 정책을 구현해야 했다.

const useCheckMembership = () => {
  const { data: subscription } = useGetSubscriptionQuery();

  // 유효한 멤버십이 존재하는지 여부
  const isMembershipExist =
    subscription !== undefined &&
    subscription !== null &&
    subscription.canceledAt === null &&
    subscription.status !== "expired";

  // 멤버십이 존재해야만 arg로 넘어온 함수를 실행시키는 고차 함수
  const withMembership = (fn) => {
    return (...args) => {
      if (isMembershipExist) {
        return fn(...args);
      } else {
        openModal(); // 전역 modal open
      }
    };
  };

  return { withMembership };
};

react hooks로 해당 기능을 구현! 

멤버십 데이터를 조회한 뒤, 내부 정책에 따라 동작하는 고차함수를 작성해 외부로 제공하는 형태로 작성했다.

 

  // SendReminderPage.jsx
  // (...)
  const { withMembership } = useCheckMembership();
  const onClickReminderToggle = withMembership(
    setCustomToggleStatus,
  );

사용처에서는 기존 함수들을 해당 고차함수로 감싸주기만 하면, 간단하게 정책을 적용할 수 있다.