결제수단 | Notion

paymentMethodSlice(결제수단)

1순위, 2순위 결제수단에 대한 상태를 업데이트, 관리하는 slice입니다. 해당 slice의 인터페이스는 다음과 같습니다.

interface PaymentMethodState {
    cardList: Card[]
    accountList: Account[]
    firstPayment: Card | Account
    secondPayment: Card | Account | null
}

데이터 초기화 로직

데이터를 fetch해오면, registeredPGs(이전에 선택된 결제수단 정보)배열에서 알맞은 값들을 찾아 1순위, 2순위 결제수단을 초기화합니다. 현재는 일치하는 값이 없으면 기본값으로 초기화하고 있지만, 이 부분에 대한 개선이 필요해 보입니다.

let {firstPayment, secondPayment} = state
registeredPGs.forEach(({pgcd, corpKey, corpcd, order}) => {
    // TODO
    /** 기본 값으로 할당 중(추후 개선 필요) */
    let payMethod: Card | Account = DEFAULT_ACCOUNT_INFO

    if (pgcd === '61') {
        const card = findCardByCorpKeyAndCode(corpKey, corpcd, cardList)

        payMethod = card ?? DEFAULT_ACCOUNT_INFO
    } else if (pgcd === '80') {
        const account = findAccountByCorpKeyAndCode(corpKey, corpcd, accountList)
        payMethod = account ?? DEFAULT_ACCOUNT_INFO
    }

    if (order === 1) {
        firstPayment = payMethod
    } else if (order === 2) {
        secondPayment = payMethod
    }
})

결제수단 선택 로직

set-PaymentMethodType은 결제수단 타입의 값을 업데이트 합니다.

dd490db5-fce2-47d8-bf8f-2a9cd507e54b.MOV

set-PaymentMethod은 다음 실제 결제수단의 값을 업데이트 합니다.

dd490db5-fce2-47d8-bf8f-2a9cd507e54b 2.MOV

기본적으로 2순위 결제수단은 1순위 결제수단 결과에 종속적입니다. 여러 케이스로 나누어 살펴보겠습니다.

1순위: 페이머니 충전결제 선택 -> 2순위: 카드 간편결제로 고정

1순위 카드 간편결제 선택시
1순위 결제수단은 등록된 카드들 중 첫번째 카드로 설정합니다.

1785d612-69c0-43fe-869a-e56e1362569e.MOV

setFirstPaymentMethodType(state, action: PayloadAction<FirstPayMethodIDType>) {
    // . . .
    if (selectedType === 'RECHARGE_POINT_1' && accountList[0] && cardList[0]) {
          state.firstPayment = accountList[0]
          state.secondPayment = cardList[0]
    } else if (selectedType === 'CARD_EASY_PAY_1' && cardList[0]) {
     // . . .
    }
},

1순위 카드 간편결제 선택 -> 2순위 선택안함 설정
- 1순위 결제수단은 등록된 카드들 중 첫번째 카드로 설정합니다.
- 2순위 결제수단은 null(선택안함)으로 설정합니다.
  
  b23ece05-d470-4f34-929b-003a77abab96.MOV
```
if (selectedType === 'RECHARGE_POINT_1' && accountList[0] && cardList[0]) {
    // . . .
} else if (selectedType === 'CARD_EASY_PAY_1' && cardList[0]) {
    state.firstPayment = cardList[0]
    state.secondPayment = null
}
```

1순위: 카드 선택 -> 2순위: 선택된 수단이 카드라면 영향을 받음

2순위 결제수단은 선택된 1순위 결제수단에 영향을 받습니다.
1순위, 2순위 모두 카드타입이라면, 2순위는 1순위로 선택되지 않은 카드들 중 가장 앞에 있는 카드를 저장합니다.

a16528a7-a2dd-49e4-b6c7-1794688b62fb.MOV

setFirstPaymentMethod(state, action: PayloadAction<Account | Card>) {
    /** 1순위 결제수단 선택에는 별다른 제약이 없습니다. */
    state.firstPayment = action.payload

    const {cardList, firstPayment, secondPayment} = state

    if (isCardType(firstPayment) && isCardType(secondPayment) && isSameCard(firstPayment, secondPayment)) {
        const nonRedundantCard = getNonRedundantCard(cardList, firstPayment)

        if (nonRedundantCard) {
            state.secondPayment = nonRedundantCard
        } else {
            state.secondPayment = null
        }
    }
},

2순위 카드 간편결제 선택 -> 1순위에서 선택되지 않은 카드들 중 맨 처음 카드로 설정
- 2순위로 카드 간편결제를 선택한 경우, 그리고 1순위로 선택되어 있는 결제수단이 카드인 경우
- 2순위는 1순위로 선택되지 않은 카드들 중 가장 앞에 있는 카드를 저장합니다.
- 그 이외에는 카드 리스트들 중 가장 앞에 있는 카드를 저장합니다.
174e12cb-fe64-4694-a622-cf1d32675df5.MOV
```
} else if (selectedType === 'CARD_EASY_PAY_2' && cardList[0]) {
    if (isCardType(firstPayment)) {
        const nonRedundantCard = getNonRedundantCard(cardList, firstPayment)

        if (nonRedundantCard) {
            state.secondPayment = nonRedundantCard
        } else {
            state.secondPayment = null
        }
    } else {
        state.secondPayment = cardList[0]
    }
}
```

결제수단 변경 로직에서 고민한 점

현재 카드정보에 대한 컴포넌트(CardList)는 1순위 결제수단과 2순위 결제수단이 공유하고 있습니다. 그러나, 1순위 결제수단과 2순위 결제수단에서 보여줘야 하는 상태가 다릅니다.