주요 코드 📌

• 결제하기
  kakao pay API와 NHN KCP 일반결제를 연동하여 사용했습니다.
  IMP.requesst_pay(param, callback) 호출 후 callback으로 실행됩니다.
  pg: kakao pay API와 NHN kcp를 지정하였습니다.
  pay_method : card

function requestPayment(pg: string) {
    let paymentData = {
      pg: 'kcp',
      pay_method: 'card',
      merchant_uid: `mid_${new Date().getTime()}`,
      name: '주문명:결제테스트',
      amount: totalCost,
      buyer_email: userInfo.email,
      buyer_name: userInfo.name,
      buyer_tel: deliveryInfo.tel,
      buyer_addr: deliveryInfo.mainAddress,
      buyer_postcode: '123-456',
    };

    if (pg === 'kakao') {
      paymentData.pg = 'kakaopay';
    }

    IMP.init('imp38488078');
    IMP.request_pay(paymentData, async (response: PaymentResponse) => {
      if (response.success) {
        console.log('결제 성공', response);
        try {
          await handlePurchase();
          alert('결제가 완료되었습니다.');
        } catch (error) {
          console.error('결제 정보 저장 실패:', error);
        }
      } else {
        console.error('결제 실패', response);
      }
    });
  }

• 판매 상품 등록하기
  상품 데이터 모두 상태값 업데이트한 이후 post method를 이용하여 네트워크로 전송합니다.

const handleAllChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const { name, value } = event.target;
    if (name === 'price' || name === 'shippingFees') {
      const numericValue = parseFloat(value);
      setProductData((prev) => ({ ...prev, [name]: numericValue }));
    } else {
      setProductData((prev) => ({ ...prev, [name]: value }));
    }
  };

const productAllSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isValid) {
      alert('양식이 올바르지 않습니다.');
      return;
    }
    try {
      const response = await api.createProduct(productData);
      setProductData(response.data.item);
      alert('판매 상품 등록이 완료되었습니다.');
      navigate(`/user/${userId}/product-manager`);
    } catch (error) {
      console.error('API Error:', error);
    }
  };

createProduct: (productData: any) =>
    axiosInstance.post('/seller/products/', {
      ...initCreateData,
      ...productData,
      mainImages: productData.mainImages,
      name: productData.name,
      content: productData.content,
    }),