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 위젯을 안정적으로 초기화하고 그리기 위한 공식적인 권장 패턴이나 추가적인 고려사항이 있을까요?
아래는 현재 문제 상황을 재현하는 핵심 코드입니다. 조언을 부탁드립니다
환경:
프레임워크: 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 위젯을 안정적으로 초기화하고 그리기 위한 공식적인 권장 패턴이나 추가적인 고려사항이 있을까요?
아래는 현재 문제 상황을 재현하는 핵심 코드입니다. 조언을 부탁드립니다
