[React] 쿠폰 전체 받기 기능을 개선해보자!

📍 쿠폰 전체 받기 기능을 개선해보자!

문제 상황

상품 상세 페이지(PDP) 내 쿠폰받기 팝업에서 쿠폰 전체 받기 버튼 클릭시, 일부 유저가 쿠폰 다운로드 실패 알럿이 반복적으로 노출된다는 CS 접수되었다. 즉, 사용자는 전체 쿠폰 받기 버튼을 눌렀는데 실제로는 다운로드가 일부 실패하거나 에러 메시지만 보는 상황

원인 분석

DataDog에서 쿠폰 다운로드시 호출되는 베네핏 API 확인. 에러로그를 살펴보니 문제가 발생한 시점에 0.1초 간격으로 할인 쿠폰이 이미 발급되었습니다. 에러로그가 찍혀있는것을 발견함.(01:12:00.520, 01:12:00.521, 01:12:00.522, 01:12:00.525 ...) 그러나 프로그램을 사용하지 않는 이상 유저가 0.1초 간격으로 다운로드 버튼을 누를 수 없기때문에 쿠폰 전체 받기 로직에서 에러가 발생했다고 판단하여 이를 개선함

개선 방안

1. Promise.allSettled 사용

• 기존: Promise.all → 하나라도 실패하면 전체가 rejected 상태되어 각각의 쿠폰 다운로드 결과를 추적할 수 없음
• 개선: Promise.allSettled → 각 쿠폰의 성공/실패 여부를 개별적으로 확인 가능

이를 통해 “몇 장이 성공하고 몇 장이 실패했는지”를 집계할 수 있습니다.

2. 사용자 친화적인 에러 메시지

• 기존: 쿠폰을 다운로드하는데 실패했습니다. 잠시 후 다시 시도해주세요.
• 개선: 총 5장의 쿠폰 중 4장은 받았으며, 1장은 받는 데 실패했습니다. 확인 버튼을 눌러 쿠폰 리스트를 다시 확인해 주세요.

유저가 실제 상황을 투명하게 인지하도록 에러 메시지를 개선

3. 실패시 쿠폰 목록 최신화: 다운로드 실패한 쿠폰은 여전히 클릭 가능한 상태로 남아 다시 에러를 발생시키는 문제가 발생하여 다운로드 실패시 refetch()를 통해 최신 쿠폰 목록을 다시 불러오도록 수정

코드 비교

// AS-IS
  const handleDownloadAllExtraCoupons = useCallback(() => {
    try {
      await Promise.all(downloadableCouponIdList.map((couponId) => fetchCouponDownload(couponId)))

      setAlert({
        open: true,
        message: `${downloadableCouponIdList.length}장의 쿠폰이 다운로드 되었습니다. 자동으로 최대 혜택 쿠폰이 적용되었습니다.`,
      })

      setCouponDefinitions((coupons) => {
        const newCoupons = coupons.map((coupon) =>
          downloadableCouponIdList.includes(coupon.id) ? { ...coupon, downloaded: true } : coupon,
        )

        return newCoupons
      })
    } catch {
      setAlert({
        open: true,
        message: '쿠폰을 다운로드하는데 실패했습니다. 잠시 후 다시 시도해주세요.',
      })
    }
  })

// TO-BE
 const handleDownloadAllExtraCoupons = useCallback(async () => {
    let successfulCouponDownloadCount = 0  // 값이 바뀌어도 유저뷰에 리렌더링 하지않아도 되고, 컨텍스트 내부에서만 사용하는 임시값이므로 useState 대신 let 사용
    let failedCouponDownloadCount = 0

    try {
      const downloadAllCouponsResponse = await Promise.allSettled(
        downloadableCouponIdList.map(async (couponId) => {
          const response = await fetchCouponDownload(couponId)

          if (response.status === 200) {
            setCouponDefinitions((coupons) => {
              const newCoupons = coupons.map((coupon) =>
                coupon.id === couponId ? { ...coupon, downloaded: true } : coupon,
              )

              return newCoupons
            })
          }

          return response
        }),
      )

      successfulCouponDownloadCount = downloadAllCouponsResponse.filter(
        (coupon) => coupon.status === 'fulfilled' && coupon.value.status === 200,
      ).length

      failedCouponDownloadCount = downloadAllCouponsResponse.filter(
        (coupon) =>
          (coupon.status === 'fulfilled' && coupon.value.status !== 200) ||
          coupon.status === 'rejected',
      ).length

      if (failedCouponDownloadCount > 0) {  // 실패한 쿠폰이 존재하는경우 catch절로 이동하기위해 throw error
        throw new Error(
          `Some coupons failed to download. (Total: ${downloadableCouponIdList.length}, Success: ${successfulCouponDownloadCount}, Failed: ${failedCouponDownloadCount})`,
        )
      }

      setAlert({
        open: true,
        message: `${successfulCouponDownloadCount}장의 쿠폰이 다운로드 되었습니다. 자동으로 최대 혜택 쿠폰이 적용되었습니다.`,
      })
    } catch {
      setAlert({
        open: true,
        message: `총 ${downloadableCouponIdList.length}장의 쿠폰 중 ${successfulCouponDownloadCount}장은 받았으며, ${failedCouponDownloadCount}장은 받는 데 실패했습니다.<br/>확인 버튼을 눌러 쿠폰 리스트를 다시 확인해 주세요.`,
        onConfirm: () => {
          refetch() // 쿠폰 목록을 최신화하기위해 refetch 사용
        },
      })
    }
  }, [downloadableCouponIdList, setAlert, setCouponDefinitions, refetch])

결론

1. Promise.allSettled을 사용해 다운로드 성공/실패를 세밀하게 추적함
2. 사용자에게는 실패한 이유와 현황을 친절하게 안내
3. 쿠폰 다운로드 실패 시에는 쿠폰 목록을 최신화하여 반복 오류 방지

이 과정을 통해 사용자 경험(UX)을 개선하고, 불필요한 CS 감소를 기대 할 수 있습니다.