VideoProduct

비디오와 상품 정보를 함께 표시하는 컴포넌트입니다. 라이브 커머스 등에서 활용됩니다.

Astro

---
import VideoProduct from "@shared/module/video-product/VideoProduct.astro";
---

<VideoProduct
  title="라이브 방송 타이틀"
  smallTitle="브랜드명"
  video={{
    video: {
      src: "/path/to/video.mp4",
      autoplay: true,
    }
  }}
  product={{
    to: "/product/123",
    thumbnail: { src: "/path/to/thumbnail.jpg" },
    name: "상품명",
    price: "99,000원"
  }}
/>

Props:

• title?: MaybeTextContent: 비디오 타이틀
• smallTitle?: MaybeTextContent: 작은 타이틀 (브랜드명 등)
• video: object: 비디오 정보 (MediaEmbed props)
• product?: object: 상품 정보
  • to: string: 상품 링크
  • thumbnail: object: 썸네일 이미지 (MediaEmbed props)
  • name: string: 상품명
  • price: string: 가격
• liveButton?: boolean: 라이브 버튼 표시 여부 (기본: video.autoplay에 따름)

HTML

<div class="v-video-product">
  <div class="v-video-product__banner">
    <div class="v-video-product__video">
      <div class="v-media-embed v-media-embed--dim">
        <video class="v-media-embed__element v-media-embed__video" src="/path/to/video.mp4" autoplay muted playsinline></video>
      </div>
    </div>
    <button class="v-video-product__live-button">라이브 재생</button>
    <a href="/product/123" class="v-video-product__link">
      <div class="v-video-product__product">
        <div class="v-media-embed v-video-product__thumbnail">
          <img class="v-media-embed__element v-media-embed__image" src="/path/to/thumbnail.jpg" alt="" />
        </div>
        <div class="v-video-product__info">
          <div class="v-video-product__name v-line-clamp-2">상품명</div>
          <div class="v-video-product__price v-truncate">99,000원</div>
        </div>
      </div>
    </a>
  </div>
  <div class="v-video-product__text">
    <div class="v-video-product__small-title v-truncate">브랜드명</div>
    <div class="v-video-product__title v-truncate">라이브 방송 타이틀</div>
  </div>
</div>

구조

v-video-product
├── v-video-product__banner
│   ├── v-video-product__video (MediaEmbed)
│   ├── v-video-product__live-button (선택)
│   └── v-video-product__link
│       └── v-video-product__product
│           ├── v-video-product__thumbnail
│           └── v-video-product__info
│               ├── v-video-product__name
│               └── v-video-product__price
└── v-video-product__text (선택)
    ├── v-video-product__small-title
    └── v-video-product__title

Preview

라이브 재생

상품명

99,000원

SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE

TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE