Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: useEffect 의존성 값 삭제 #285

Merged
merged 2 commits into from
Mar 27, 2024
Merged

Fix: useEffect 의존성 값 삭제 #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76593b4
Fix: useEffect 의존성 값 삭제
hhbb0081 Mar 27, 2024
a52abf4
Merge branch 'test' of https://github.com/hhbb0081/readyFront into test
hhbb0081 Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/hooks/useRequestPayment.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ const apiUrl = `/order/toss`;

const useRequestPayment = () => {
const token = localStorage.getItem("accessToken");
const requestPayment = async (cartId, couponId, paymentWidget, point) => {
const requestPayment = async (cartId, couponId, paymentWidget, paymentMethodsWidget, point) => {
try {
const body = { cartId, couponId, point };
console.log('body: ', body);
console.log('paymentWidget: ', paymentWidget.requestPayment);
const response = await commonApis.post(apiUrl, body,{
headers: {
Authorization: `Bearer ${token}`
Expand All @@ -19,6 +21,10 @@ const useRequestPayment = () => {
`?paymentType=NORMAL&orderId=${response.data.orderId}&paymentKey=membership&amount=${response.data.amount}`;
return;
}
console.log(response.data);
paymentMethodsWidget.updateAmount(
Math.max(response.data.amount, 0)
);
paymentWidget?.requestPayment(response.data);
return;
} catch (error) {
Expand Down
30 changes: 9 additions & 21 deletions src/pages/PaymentPage/PaymentPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ const PaymentPage = () => {
const point = useGetPoint();
const paymentRequest = () => {
const paymentWidget = paymentWidgetRef.current;
requestPayment(cartId, couponId, paymentWidget, usedPoint);
const paymentMethodsWidget = paymentMethodsWidgetRef.current;
requestPayment(cartId, couponId, paymentWidget, paymentMethodsWidget, usedPoint);
};
const handleSetPoint = () => {
if (usedPoint !== 0) {
Expand All @@ -40,21 +41,21 @@ const PaymentPage = () => {
setUsedPoint(Math.min(point, MiddleSumPrice));
}
};

useEffect(() => {
(async () => {
try {

// ------ 결제위젯 초기화 ------
// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요.
const paymentWidget = await loadPaymentWidget(clientKey, customerKey); // 회원 결제
// const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) // 비회원 결제

// ------ 결제 UI 렌더링 ------
// 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요.
// DOM이 생성된 이후에 렌더링 메서드를 호출하세요.
// https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션

const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
"#payment-page__payment-widget",
{ value: Math.max(totalPrice - salePrice - usedPoint, 0) },
// { value: 3000 },


// 렌더링하고 싶은 결제 UI의 variantKey
// 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
Expand All @@ -77,22 +78,9 @@ const PaymentPage = () => {
// 필요에 따라 사용자에게 피드백을 주거나 다른 오류 처리 동작을 추가할 수 있습니다.
}
})();
}, [totalPrice, salePrice, usedPoint]);

useEffect(() => {
const paymentMethodsWidget = paymentMethodsWidgetRef.current;

if (paymentMethodsWidget == null) {
return;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

// ------ 금액 업데이트 ------
// 새로운 결제 금액을 넣어주세요.
// https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액
paymentMethodsWidget.updateAmount(
Math.max(totalPrice - salePrice - usedPoint, 0)
);
}, [totalPrice, salePrice, usedPoint]);

return (
<div className="payment-page">
Expand Down
Loading