[feat] 카드 결제 방식 추가 폼 추가

[cjhih456]

어떤 부분에 대한 featured인지 기제해 주세요

• 카드 결제 방식

왜 수행해야 하는지 설명해 주세요.
결제 방식 중 카드를 선택 하였을 때, 보여지는 입력품을 만들기 위함 입니다.
진입 방법은 다음과 같습니다.

1. 최초 결제 방식을 등록할 때 (최초의 경우는 결제 방식이 등록되지 않은 회원의 진입을 의미합니다.)
2. 추가로 결제 방식을 등록할 때

선행되어야 할 작업

• Signup design #15
• Page/signin #14

추가할 작업 목록
공통

• 카드 입력 정보 입력 영역 폼 추가

최초 결제 방식 등록의 경우

• 정책 동의 확인 영역 폼 추가
• signup/platform step에서 선택한 membership 정보를 로드할 필요가 있다.

[cjhih456]

카드 정보 입력 영역의 경우 다른 곳에서도 재활용할 수 있는 형식으로 개발하기 위해
다음과 같은 방식을 취하였습니다.

type CardInfoProps<T extends FieldValues> = {
  register: T extends PaymentMethodCardInfo ? UseFormRegister<T> : never;
  formState: T extends PaymentMethodCardInfo ? UseFormStateReturn<T> : never;
};
export default function CardInfoArea<T extends PaymentMethodCardInfo>({ register, formState }: CardInfoProps<T>) {
  return <>
    <TextInput.Light
      {...register('cardNumber')}
      {...RHFValidErrorHelper(
        formState.errors.cardNumber?.message,
        formState.touchedFields.cardNumber
      )}
    />
  </>
}

작업물 : https://github.com/f-lab-edu/netflix-clone-v2/blob/dd8a899501c12af653838c7e59e3eb2adb91be83/src/components/pages/Payment/RegistCardFormPage/component/CardInfoArea.tsx

[cjhih456]

정책 동의 확인 영역또한 위 방식과 동일한 방식으로 처리되었습니다.

[cjhih456]

위 부분들은 FormProvider를 활용할 경우 불필요한 요소이기 떄문에, 제거하고 FormProvider를 활용하여 처리하였다.