결제창 -> React Portal 마우스 이벤트 전파 막는 방법 문의
결제창이 렌더링 된 이후에, 마우스 오버 또는 클릭 이벤트가 뒤에 있는 모달 컴포넌트(React Portal) 에 전달이 됩니다.
첨부된 이미지를 보시면, 사용자에게 총 3개의 시각적인 팝업 요소가 보여집니다.
(편의상 겹쳐진 UI를 모두 팝업으로 칭하겠습니다)
가장 아래에 [서비스 플랜], 가운데 [결제하기], 그리고 가장 위쪽에 [NHCard]가 있습니다.
[NHCard] 팝업에서 [결제하기] 버튼을 누르려다보니 검은색 오버레이 뒤의 [결제하기]가 팝업으로 마우스 이벤트가 전달됩니다.
[결제하기] 팝업을 제거하면 그 뒤에 [서비스플랜]으로 마우스 이벤트가 전달이되구요.
모든 팝업을 제거하고나면 그제서야 [NHCard]의 마우스 이벤트가 정상적으로 전달됩니다.
혹시 결제창에서 마우스 이벤트 전달을 막을 수 있는 방법이 있을까요?
NHCard 결제 창에서 [결제하기] 버튼 클릭 시에, 뒤에 있는 React Portal로 클릭이벤트가 전달이 되어서, NHCard 결제 창을 클릭할 수 없습니다.
7 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
어떤 SDK 를 사용중이신가요?
"@tosspayments/tosspayments-sdk": "^2.3.4",
를 사용하고 있습니다
그러면 이부분은 React Portal 이 iframe 을 정상 처리 못하는게 아닌가 싶은데요.
위젯의 iframe 수준에서는 문제가 없습니다.
위젯에서 각 카드사 결제창이 나타날 때 문제가 있습니다.
이 이슈는 해결이 어려울까요?
네 위젯위에서 iframe 열릴때 일반 브라우저에서 발생하는 문제는 아니다 보니 React Portal 에서 뭔가를 잘못 처리하는 것 같습니다.
저희가 수정해 드릴수는 없는 부분일것 같아요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.