Iframe

외부 URL 또는 외부 시스템 화면을 현재 화면 내부에 포함하여 출력하는 컨테이너형 컴포넌트

개요

Iframe 컴포넌트는 네이티브 <iframe> 요소를 래핑하여 외부 페이지를 임베드합니다. HTML 표준 속성을 모두 지원하며, Tailwind CSS 클래스를 통해 크기와 스타일을 유연하게 구성할 수 있습니다.

주요 특징

• ✅ URL 바인딩: src prop으로 외부 페이지 URL 연결
• ✅ 크기 설정: width, height, className으로 크기 정의
• ✅ 스크롤 처리: 내부 콘텐츠 스크롤 자동 지원
• ✅ 접근성: title 속성으로 목적 설명

기본 상태 / URL 바인딩

import { Iframe } from "@vortex/ui-foundation"
 
<Iframe
  src="https://example.com"
  title="외부 시스템"
  className="w-full h-64 border rounded"
/>

크기 설정

가로/세로 크기는 width, height 속성이나 className을 통해 정의합니다.

{/* 고정 크기 */}
<Iframe src="..." width={400} height={300} className="border rounded" />
 
{/* 반응형 16:9 비율 */}
<div className="w-full max-w-2xl aspect-video">
  <Iframe src="..." className="w-full h-full border rounded" />
</div>

스크롤 처리

Iframe 내부에서도 스크롤 처리를 지원합니다. 내부 콘텐츠가 영역을 초과할 경우 자동으로 스크롤을 표시합니다.

<Iframe
  src="..."
  className="w-full h-48 border rounded"
  title="스크롤 가능한 Iframe"
/>

API Reference

Props

Iframe은 네이티브 <iframe> 요소의 모든 HTML 속성을 지원합니다.

기본 사용법

import { Iframe } from "@vortex/ui-foundation"
 
<Iframe
  src="https://example.com"
  title="외부 페이지"
  className="w-full h-96 border rounded"
/>

접근성

권장 사항

• ✅ 모든 Iframe에 title 속성으로 목적 설명 제공
• ✅ 필요 시 sandbox 속성으로 보안 제한 적용
• ❌ title 속성 누락 지양