Skip to Content
ComponentsCalsIFrame

IFrame

외부 웹 페이지 또는 내부 서비스 화면을 현재 화면 안에 내장하여 표시하는 인라인 프레임 컴포넌트

개요

Cals IFrame은 Foundation Iframe을 래핑하여 CALS 프로그램에서 사용하는 주소 조합, 인증 query 자동 부착, 재로드 제어, close 메시지 수신 기능을 제공합니다.

주요 특징

  • ✅ src + queryString 결합: 조회 조건을 주소 뒤에 그대로 결합
  • ✅ 인증 query 자동 부착: GMS/AeroSuite에서 accessToken, identityPoolId 자동 포함
  • ✅ 로드 상태 제어: load, reloadOnMount로 재생성 여부 제어
  • ✅ 전체 크기 모드: fullSize prop으로 외부 레이아웃 결정 결과 반영
  • ✅ 닫기 요청 수신: { method: "close" } 메시지 수신 시 콜백 호출
  • ✅ 표준 iframe 호환: native iframe 속성과 이벤트를 그대로 전달

기본 사용

src와 title만으로 기본 iframe을 렌더링할 수 있습니다.

queryString 결합

인증 정보 자동 포함

GMS/AeroSuite 환경에서는 accessToken, identityPoolId를 최종 URL query에 자동 포함할 수 있습니다.

전체 화면 표시

전체 화면 여부는 외부 화면 레이아웃이 결정하고, IFrame은 fullSize prop으로 표시 모드만 반영합니다.

API Reference

Props

PropTypeDefaultDescription
srcstring-iframe 기본 주소
queryStringstring-src 뒤에 결합할 query string
visiblebooleantruefalse이면 렌더링하지 않음
loadbooleantrueiframe 렌더링 여부를 제어하는 로드 상태
reloadOnMountbooleanfalsefalse면 숨김 후 재표시 시 기존 로드 상태 유지
authIntegration"gms" | "aerosuite"-인증 query 자동 부착 대상 앱
accessTokenstring-accessToken query 값
identityPoolIdstring-identityPoolId query 값
fullSizebooleanfalse전체 크기 표시 여부
heightstring | number250iframe 높이
classNamestring-컨테이너 className
styleReact.CSSProperties-컨테이너 인라인 스타일
titlestring-iframe accessible name/title

Events

EventTypeDescription
onCloseRequest() => void{ method: "close" } 메시지 수신 시 호출
onLoad(event) => voidiframe 로드 완료 시 호출
onError(event) => voidiframe 로드 오류 시 호출

접근성

권장 사항

  • ✅ title 또는 aria-label로 iframe의 accessible name을 제공합니다.
  • ✅ 외부 페이지 내용을 설명할 수 있는 의미 있는 제목을 사용합니다.
  • ✅ 보안 정책상 필요한 경우 sandbox, referrerPolicy, allow 등의 표준 iframe 속성을 함께 지정합니다.
  • ❌ 제목 없는 iframe을 사용하지 않습니다.

관련 컴포넌트

Last updated on
HiddenImageUpload