MediaCard

이미지와 텍스트를 묶는 피드·상품 카드예요. 중고거래·쇼핑 목록에 맞춰요.

사용법

MediaCard는 중고거래·쇼핑 피드처럼 이미지와 텍스트를 묶는 카드예요. layout으로 세로·가로형을 바꿀 수 있어요.

스타일 커스터마이징

MediaCard 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<MediaCard
  className="shadow-md"
  style={{
    --gtd-border: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<MediaCard
  classNames={{
    media: "my-media-card-media",
    img: "my-media-card-img",
    body: "my-media-card-body",
    head: "my-media-card-head",
    copy: "my-media-card-copy",
    title: "my-media-card-title",
    subtitle: "my-media-card-subtitle",
    badge: "my-media-card-badge",
    meta: "my-media-card-meta",
    footer: "my-media-card-footer"
  }}
/>

CSS 변수

변수	설명
--gtd-border	카드 테두리

인터페이스

MediaCardProps

속성	타입	기본값	설명
layout	"vertical" \| "horizontal"	vertical	카드 배치
title*	string	—	제목
subtitle	string	—	부제·위치
meta	string	—	가격·시간 등 메타
imageUrl	string	—	썸네일 URL
image	ReactNode	—	커스텀 미디어 슬롯
badge	ReactNode	—	상태 뱃지
footer	ReactNode	—	하단 슬롯 (Price 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { MediaCard } from "@/components/ui/MediaCard";