145 refactor payment

[ruddnjs3769]

orderComplete 페이지에서, 주문한 상품 내역이 안나오는 오류를 수정했습니다.
전체 코드

import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import PayProcessFlow from '@/components/payment/PayProcessFlow'
import Btn from '@/components/payment/Btn'
import { UserTransactionDetails } from '@/types/product'
import { getTransactionDetails } from '@/apis/payment/product'
import Loading from '@/components/payment/Loading'
import useUserInfo from '@/hooks/useUserInfo'
import useCartItems from '@/hooks/useCartItems'

export default function OrderComplete() {
  const [transactionDetails, setTransactionDetails] = useState<UserTransactionDetails>([])
  const [isLoading, setIsLoading] = useState<boolean>(false)

  const accessToken = localStorage.getItem('token') || ''
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [userInfo, _isLoggedIn, _logout] = useUserInfo()
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [cartItems, _addcartItems, removeCartItemsByUser, _removeOneCartItemByUser] = useCartItems(userInfo)

  useEffect(() => {
    // 랜딩 시 details 저장
    matchedTransactionDetails().then(() => {
      removeCartItemsByUser(userInfo)
    })
  }, [userInfo])

  const matchedTransactionDetails = async (): Promise<void> => {
    // 제품 전체 거래(구매) 내역 API 호출 또는 dummy 데이터 사용
    try {
      setIsLoading(true)
      const transactionDetails: UserTransactionDetails = await getTransactionDetails(accessToken)

      // 장바구니에 있는 제품과 비교하여 매칭된 거래 내역 필터링
      const matchedDetails = transactionDetails.filter((detail) =>
        cartItems.some((item) => item.id === detail.product.productId)
      )
      setTransactionDetails(matchedDetails)
      setIsLoading(false)
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <>
      <PayProcessFlow />
      {isLoading ? (
        <Loading color={'#666666'} />
      ) : (
        <div className={styles.orderer}>
          <div className={styles.orderInfo}>주문 완료</div>
          {transactionDetails.map((detail, index) => (
            <div key={index} className={styles.info}>
              <div className={styles.titleContainer}>
                <div className={styles.title}>
                  <span>주문 번호</span>
                </div>
                <div className={styles.title}>
                  <span>상품명</span>
                </div>
              </div>
              <div className={styles.contentContainer}>
                <div className={styles.content}>
                  <span>{detail.detailId}</span>
                </div>
                <div className={styles.content}>
                  <span>{detail.product.title}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
      <div className={styles.btnContainer}>
        <Btn text="계속 쇼핑하기" targetURL="/" />
        <Btn text="주문내역 확인하기" targetURL="/user/:username" />
      </div>
    </>
  )
}

수정 이전

  useEffect(() => {
    // 랜딩 시 details 저장
    matchedTransactionDetails()
    // 장바구니에 담겨있던 제품들을 삭제
    removeCartItemsByUser(userInfo)
  }, [])

기존 코드는 비동기 완료 이전에 cartItems가 삭제되면서 matchedTransactionDetails 호출 중에 비교할 cartItems가 빈 배열로 나타남. matchedTransactionDetails 완료 이후에 removeCartItemsByUser가 실행되도록 then메서드 사용.
또한, cartItems는 customHooks인 useCartItems에서 userInfo를 받아오게 되면 활성화되는데, 따라서 useEffect 감시 데이터에도 userInfo를 추가해줌.

수정 이후

  useEffect(() => {
  // 랜딩 시 details 저장
  matchedTransactionDetails().then(() => {
    removeCartItemsByUser(userInfo)
  })
}, [userInfo])

---

orderComplete 페이지에서, 주문내역 확인하기 버튼의
<Btn text="주문내역 확인하기" targetURL="/user/:username" />을
<Btn text="주문내역 확인하기" targetURL={/user/${userInfo.displayName}/getItemAll} />
로 바로 getItemAll로 이동하도록 수정했습니다.