창 밖에서만
화면이 다른 페이지의 iframe 안에 끼워져 있으면 감싼 내용을 그리지 않는다. 본진의 데모 창이나 웹 데스크톱(os) 창 안의 사람은 이미 그 사이트에 와 있어 CTA 를 다시 볼 이유가 없고, 누르면 창 안에 같은 사이트가 한 번 더 뜬다. 창 관계는 브라우저에서만 알 수 있어 client component 이고, 서버 렌더와 첫 hydration 에서는 fallback 을 그려 창 안에서 잠깐 보였다 사라지지 않는다.
활용 방법
CTA 감싸기
이 문서를 iframe 에 넣어 열면 알약 대신 fallback 문구가 보인다.
Preview
iframe 안이라 그리지 않음
tsx
<TopLevelOnly><CtaPill href={consultUrl}>맞춤 제작 문의</CtaPill></TopLevelOnly>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children | ReactNode | - | 창 밖에서만 그릴 내용 |
| fallback | ReactNode | null | iframe 안이거나 서버 렌더일 때 그릴 것 |