← Kitchen Sink로 돌아가기

MediaEmbed

피그마 디자인 토큰을 사용하는 미디어 임베드 컴포넌트 데모

Image

기본 이미지 (기본값: aspect-square)
<MediaEmbed src="..." width="500" height="500" alt="" />
Video (16:9)
Video aspect ratio
<MediaEmbed src="..." width="500" height="500" class="aspect-video" />
Custom Aspect Ratio
Custom aspect ratio
<MediaEmbed src="..." width="500" height="500" class="aspect-[2/3]" />

Fit Variants

Contain (기본값)
Wide image contain
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" />
Cover
Wide image cover
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" elementClass="object-cover" />

Rounded

Rounded (부모 컨테이너에 적용)
Rounded image
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" class="rounded-lg" />
Rounded Full
Rounded full image
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" class="rounded-full" />
Rounded + Cover
Rounded cover image
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" class="rounded-lg" elementClass="object-cover" />
Rounded + Dim
Rounded dim image
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" class="rounded-lg" dim />

Dim Overlay

Dim (기본 색상: rgba(255, 255, 255, 1))
Image with dim overlay
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" dim />
Dim + 커스텀 색상
Image with custom dim color
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" dim dimColor="rgba(0, 0, 0, 0.5)" />
Dim + CSS 변수 사용
Image with CSS variable dim
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" dim dimColor="var(--custom-dim-color, rgba(0, 0, 0, 0.3))" />
레거시 방식 (class prop 사용)
Image with dim overlay (legacy)
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" class="after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:bg-black/[0.03]" />

Video

기본 비디오
<MediaEmbed src="..." video />
비디오 with Controls
<MediaEmbed src="..." video=[object Object] />
비디오 with Autoplay & Loop
<MediaEmbed src="..." video=[object Object] />

Combined Examples

기본값 (aspect-square) + Cover + Dim
Square cover dim
<MediaEmbed src="/assets/images/product-500x500.jpg" width="500" height="500" dim dimColor="rgba(0, 0, 0, 0.03)" elementClass="object-cover" />
Video + 기본값 (aspect-square) + Cover
<MediaEmbed src="..." video=[object Object] />

Tailwind Classes

컨테이너 디폴트 클래스:

relative w-full h-auto overflow-clip aspect-square

이미지/비디오 디폴트 클래스:

block w-full h-full aspect-square object-contain object-center

Object-fit 클래스 (elementClass prop 사용):

  • object-contain - 기본값
  • object-cover - elementClass="object-cover"

Rounded 클래스 (class prop 사용):

rounded-lg, rounded-full, rounded-md 등

rounded 클래스는 이미지 요소가 아닌 부모 컨테이너에 적용됩니다. class prop 또는 elementClass prop에 rounded 클래스를 지정하면 자동으로 컨테이너로 이동됩니다.

Dim Overlay (dim prop 사용 - 권장):

dim dimColor="rgba(0, 0, 0, 0.5)"

dim prop을 사용하면 자동으로 after: pseudo-element가 생성됩니다. dimColor prop으로 배경색을 커스터마이징할 수 있으며, 기본값은 rgba(255, 255, 255, 1)입니다.

Aspect Ratio Classes:

⚡ 기본값으로 aspect-square가 적용됩니다. 다른 비율이 필요한 경우에만 class prop에 지정하세요.

  • aspect-square - 1:1 정사각형 (기본값, 명시 불필요)
  • aspect-video - 16:9 비디오
  • aspect-[2/3] - 커스텀 비율 (예: aspect-[264/264])

예: class="aspect-video"를 지정하면 기본값 aspect-square를 덮어쓰고 컨테이너와 이미지 모두에 aspect-video가 적용됩니다.

Props

Prop Type Default Description
src string - 미디어 소스 URL (이미지 또는 비디오)
alt string "" 이미지 대체 텍스트
width number | string - 너비
height number | string - 높이
elementClass string - 이미지/비디오 요소에 적용할 CSS 클래스 (예: object-cover)
class string - 컨테이너 div에 적용할 CSS 클래스. 기본값으로 aspect-square가 적용되며, 다른 aspect-ratio 클래스(예: aspect-video, aspect-[2/3])를 지정하면 기본값을 덮어씁니다. aspect-ratio 클래스는 자동으로 img/video 요소에도 적용됩니다.
dim boolean false dim 효과 활성화 여부
dimColor string rgba(255, 255, 255, 1) dim 배경색상 (CSS 변수명 또는 색상 값, 예: rgba(0, 0, 0, 0.5) 또는 var(--custom-dim-color))
video boolean | VideoPlayerProps - 비디오 모드 (true 또는 VideoPlayer props 객체)