Next.js 14 (App Router) + ShadCN UI Dialog에서 Toss Payments 위젯 UI가 렌더링되지 않는 문제
안녕하세요, Next.js 14 App Router 환경에서 Toss Payments 결제 위젯을 연동하던 중 해결하기 어려운 문제에 부딪혀 질문드립니다.
환경:
프레임워크: Next.js 14.2.4 (App Router)
UI 라이브러리: ShadCN UI (내부적으로 Radix UI의 Dialog(Portal) 사용)
Toss Payments SDK: @tosspayments/payment-widget-sdk 버전 0.10.2
문제 상황:
ShadCN UI의 Dialog 컴포넌트 안에서 결제 위젯을 띄우고 있습니다.
loadPaymentWidget 함수는 성공적으로 호출되어 위젯 인스턴스를 반환하는 것을 확인했습니다.
하지만 이후 paymentWidget.renderPaymentMethods()와 paymentWidget.renderAgreement()를 호출해도, 지정된 div 컨테이너 내부에 아무런 UI가 그려지지 않습니다.
브라우저 개발자 도구의 콘솔에는 어떠한 오류 메시지도 출력되지 않습니다.
개발자 도구로 DOM을 확인하면, UI가 렌더링되어야 할 div 요소 자체는 정상적으로 존재합니다.
지금까지 시도해 본 것들:
useEffect를 분리하여 위젯 초기화와 UI 렌더링 로직을 나누는 표준적인 '상태 주도 렌더링' 패턴을 적용해봤습니다. (아래 코드 참고)
위젯 인스턴스를 useState와 useRef로 각각 관리해보았으나 동일한 현상이 발생했습니다.
div 컨테이너에 min-height를 직접 부여하여 렌더링 공간을 확보해봤습니다.
setTimeout을 사용하여 강제로 시간차를 두는 방법도 시도해봤지만 실패했습니다.
질문: ShadCN UI의 Dialog(Portal) 환경과 같이, React의 메인 DOM 트리가 아닌 곳에 렌더링될 때 Toss Payments 위젯을 안정적으로 초기화하고 그리기 위한 공식적인 권장 패턴이나 추가적인 고려사항이 있을까요?
아래는 현재 문제 상황을 재현하는 핵심 코드입니다. 조언을 부탁드립니다
6 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
Radix UI 기반 사이트에서의 결제는 현재 노운 호환성 이슈가 있습니다.
관련 기존 문의글: https://discord.com/channels/864296203746803753/1372487788481744937
주요 증상은 렌더링이 되지 않거나 (DOM만 그려짐), 렌더링이 되더라도 클릭이 되지 않는 증상입니다.
위 부분이 수정 된 이후에 한번 보시는게 좋을 것 같아요.
------
참고로 포털 형태로 결제위젯 렌더시, 포털이 열릴 때 renderPaymentMethods를 호출하면 됩니다. 닫힐 때 destroy하고요.
감사합니다 시도해보겠습니다
제가 왕초보라,ㅜ,ㅜ 시도를 계속 해보았어요 (firebase studio를 사용) 결국은 "사용자님께서 해주실 일:
아래 변경사항이 적용된 후, Toss Payments 개발자 센터에서 발급받으신 테스트용 클라이언트 키와 시크릿 키를 .env 파일에 붙여넣고, 개발 서버를 재시작해주시면 됩니다.
다시 한번, 오랜 시간 동안 잘못된 진단으로 불편을 드린 점 깊이 사죄드립니다. 이번 조치로 문제가 완전히 해결될 것입니다." 이렇게 메세지가 나옵니다. ㅡ.ㅡ;; 어떻게 해야하는지, 잘아시는분 의 조언을 부탁드립니다
결제위젯 말고 결제창으로 연동하신느게 어떠세요
제일 확실합니다
시도해보겠습니다 감사합니다
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.