Content Placeholder

이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소예요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/content-placeholder.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/content-placeholder.json

radix-ui, class-variance-authority, lucide-react 를 설치하고 아래 코드를 components/ui/content-placeholder.tsx 에 복사해요.

components/ui/content-placeholder.tsx

/** * @title Content Placeholder * @description 이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소예요. */import * as React from 'react';import { Slot } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import {  Briefcase,  Building2,  Car,  FileText,  House,  Image,  Package,  ShoppingBag,  Store,  TicketPercent,  Users,  UtensilsCrossed,} from 'lucide-react';import { cn } from '@/lib/utils';// SEED Rootage spec: content-placeholder.yaml// root: $color.palette.gray-200 / asset: min $dimension.x4, max 160px, height 50%, $color.palette.gray-400const contentPlaceholderVariants = cva(  'relative box-border inline-flex size-full items-center justify-center overflow-hidden bg-palette-gray-200 align-top',  {    variants: {      type: {        default: '',        buySell: '',        car: '',        commerce: '',        coupon: '',        food: '',        group: '',        image: '',        jobs: '',        business: '',        post: '',        realty: '',      },    },    defaultVariants: {      type: 'default',    },  },);type ContentPlaceholderType = NonNullable<VariantProps<typeof contentPlaceholderVariants>['type']>;const presetIcons: Record<ContentPlaceholderType, React.ComponentType<React.ComponentProps<'svg'>>> = {  default: Package,  buySell: ShoppingBag,  car: Car,  commerce: Store,  coupon: TicketPercent,  food: UtensilsCrossed,  group: Users,  image: Image,  jobs: Briefcase,  business: Building2,  post: FileText,  realty: House,};export interface ContentPlaceholderProps  extends React.ComponentProps<'div'>,    VariantProps<typeof contentPlaceholderVariants> {  /** 프리셋 대신 사용할 에셋(svg, img 등). 지정하면 `type` 아이콘을 대체해요. */  children?: React.ReactElement;}function ContentPlaceholder({ className, type, children, ...props }: ContentPlaceholderProps) {  const Icon = presetIcons[type ?? 'default'];  return (    <div      data-slot="content-placeholder"      data-type={type ?? 'default'}      className={cn(contentPlaceholderVariants({ type }), className)}      {...props}    >      <Slot.Root        data-slot="content-placeholder-asset"        aria-hidden        className="block aspect-square h-1/2 w-auto min-w-x4 max-w-[160px] object-contain text-palette-gray-400"      >        {children ?? <Icon strokeWidth={1.5} />}      </Slot.Root>    </div>  );}export { ContentPlaceholder, contentPlaceholderVariants };

Anatomy

Content Placeholder는 Root 컨테이너와 Asset으로 구성돼요. 컨테이너의 사이즈에 따라 내부 Asset을 자연스럽게 표시해요.

Asset은 컨테이너 높이의 50%를 차지해요.
Asset의 최소 너비는 16px, 최대 너비는 160px이며 정방형 비율을 유지해요.

Properties

Type

기본 타입과 서비스나 카테고리별 타입을 제공해요. 이미지가 없거나 표시할 수 없는 상태일 때 대체 이미지로 사용해요. type 을 지정하지 않으면 default 타입이 표시돼요.

default

buySell

car

commerce

coupon

food

group

image

jobs

business

post

realty

Size

Content Placeholder는 부모 요소를 가득 채워요(width: 100%, height: 100%). 부모의 크기와 모서리를 지정해서 원하는 크기로 사용해요.

Custom Asset

children 으로 svg 요소를 넘기면 프리셋에 없는 아이콘을 사용할 수 있어요. 넘긴 요소에도 Asset 스타일(크기, 색상)이 그대로 적용돼요.

Guidelines

콘텐츠 성격에 맞는 Type 사용하기

대체 이미지만 보고도 어떤 콘텐츠인지 짐작할 수 있도록, 영역이 담을 콘텐츠의 성격에 맞는 Type을 골라요. 성격을 특정하기 어렵다면 default 를 사용해요.

car

Do· 콘텐츠에 맞는 Type

중고차 목록의 썸네일에는 car 타입을 사용해요.

food

Don't· 맥락과 다른 Type

콘텐츠와 관계없는 Type은 사용자에게 혼란을 줘요.

Skeleton과 구분하기

Content Placeholder는 이미지를 불러오지 못했거나 이미지가 없는 최종 상태를 나타내요. 아직 불러오는 중이라면 Skeleton을 사용해요.

/** * @title Content Placeholder * @description 이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소예요. */ import * as React from 'react'; import { Slot } from 'radix-ui'; import { cva, type VariantProps } from 'class-variance-authority'; import { Briefcase, Building2, Car, FileText, House, Image, Package, ShoppingBag, Store, TicketPercent, Users, UtensilsCrossed, } from 'lucide-react'; import { cn } from '@/lib/utils'; // SEED Rootage spec: content-placeholder.yaml // root: $color.palette.gray-200 / asset: min $dimension.x4, max 160px, height 50%, $color.palette.gray-400 const contentPlaceholderVariants = cva( 'relative box-border inline-flex size-full items-center justify-center overflow-hidden bg-palette-gray-200 align-top', { variants: { type: { default: '', buySell: '', car: '', commerce: '', coupon: '', food: '', group: '', image: '', jobs: '', business: '', post: '', realty: '', }, }, defaultVariants: { type: 'default', }, }, ); type ContentPlaceholderType = NonNullable<VariantProps<typeof contentPlaceholderVariants>['type']>; const presetIcons: Record<ContentPlaceholderType, React.ComponentType<React.ComponentProps<'svg'>>> = { default: Package, buySell: ShoppingBag, car: Car, commerce: Store, coupon: TicketPercent, food: UtensilsCrossed, group: Users, image: Image, jobs: Briefcase, business: Building2, post: FileText, realty: House, }; export interface ContentPlaceholderProps extends React.ComponentProps<'div'>, VariantProps<typeof contentPlaceholderVariants> { /** 프리셋 대신 사용할 에셋(svg, img 등). 지정하면 `type` 아이콘을 대체해요. */ children?: React.ReactElement; } function ContentPlaceholder({ className, type, children, ...props }: ContentPlaceholderProps) { const Icon = presetIcons[type ?? 'default']; return ( <div data-slot="content-placeholder" data-type={type ?? 'default'} className={cn(contentPlaceholderVariants({ type }), className)} {...props} > <Slot.Root data-slot="content-placeholder-asset" aria-hidden className="block aspect-square h-1/2 w-auto min-w-x4 max-w-[160px] object-contain text-palette-gray-400" > {children ?? <Icon strokeWidth={1.5} />} </Slot.Root> </div> ); } export { ContentPlaceholder, contentPlaceholderVariants };

/** * @title Content Placeholder * @description 이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소예요. */import * as React from 'react';import { Slot } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import { Briefcase, Building2, Car, FileText, House, Image, Package, ShoppingBag, Store, TicketPercent, Users, UtensilsCrossed,} from 'lucide-react';import { cn } from '@/lib/utils';// SEED Rootage spec: content-placeholder.yaml// root: $color.palette.gray-200 / asset: min $dimension.x4, max 160px, height 50%, $color.palette.gray-400const contentPlaceholderVariants = cva( 'relative box-border inline-flex size-full items-center justify-center overflow-hidden bg-palette-gray-200 align-top', { variants: { type: { default: '', buySell: '', car: '', commerce: '', coupon: '', food: '', group: '', image: '', jobs: '', business: '', post: '', realty: '', }, }, defaultVariants: { type: 'default', }, },);type ContentPlaceholderType = NonNullable<VariantProps<typeof contentPlaceholderVariants>['type']>;const presetIcons: Record<ContentPlaceholderType, React.ComponentType<React.ComponentProps<'svg'>>> = { default: Package, buySell: ShoppingBag, car: Car, commerce: Store, coupon: TicketPercent, food: UtensilsCrossed, group: Users, image: Image, jobs: Briefcase, business: Building2, post: FileText, realty: House,};export interface ContentPlaceholderProps extends React.ComponentProps<'div'>, VariantProps<typeof contentPlaceholderVariants> { /** 프리셋 대신 사용할 에셋(svg, img 등). 지정하면 `type` 아이콘을 대체해요. */ children?: React.ReactElement;}function ContentPlaceholder({ className, type, children, ...props }: ContentPlaceholderProps) { const Icon = presetIcons[type ?? 'default']; return ( <div data-slot="content-placeholder" data-type={type ?? 'default'} className={cn(contentPlaceholderVariants({ type }), className)} {...props} > <Slot.Root data-slot="content-placeholder-asset" aria-hidden className="block aspect-square h-1/2 w-auto min-w-x4 max-w-[160px] object-contain text-palette-gray-400" > {children ?? <Icon strokeWidth={1.5} />} </Slot.Root> </div> );}export { ContentPlaceholder, contentPlaceholderVariants };

Content Placeholder

설치Copy Anchor Link

수동 설치

AnatomyCopy Anchor Link

PropertiesCopy Anchor Link

TypeCopy Anchor Link

SizeCopy Anchor Link

Custom AssetCopy Anchor Link

GuidelinesCopy Anchor Link

콘텐츠 성격에 맞는 Type 사용하기Copy Anchor Link

Skeleton과 구분하기Copy Anchor Link

PropsCopy Anchor Link

On this page

설치