Content Placeholder

이미지나 콘텐츠가 없거나 로딩되기 전인 영역을 채우는 플레이스홀더 컴포넌트입니다.

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Lynx 예제를 불러오는 중입니다.

import { defaultPreset } from "@seed-design/lynx-react/content-placeholder-presets/default";
import { ContentPlaceholder } from "@/components/ui/content-placeholder";

export default function ContentPlaceholderPreview() {
  return <ContentPlaceholder preset={defaultPreset} width="200px" height="200px" />;
}

Installation

npx @seed-design/cli@latest add ui:content-placeholder

pnpm dlx @seed-design/cli@latest add ui:content-placeholder

yarn dlx @seed-design/cli@latest add ui:content-placeholder

bun x @seed-design/cli@latest add ui:content-placeholder

의존성 설치

npm install @seed-design/lynx-react

yarn add @seed-design/lynx-react

pnpm add @seed-design/lynx-react

bun add @seed-design/lynx-react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:content-placeholder
 * @requires @seed-design/lynx-react@^1.0.0
 * @requires @seed-design/lynx-css@^1.0.0
 **/

import {
  ContentPlaceholder as SeedContentPlaceholder,
  type ContentPlaceholderRootProps,
} from "@seed-design/lynx-react";

export interface ContentPlaceholderProps extends ContentPlaceholderRootProps {}

/** @see https://seed-design.io/lynx/components/content-placeholder */
export function ContentPlaceholder({ children, ...props }: ContentPlaceholderProps) {
  return (
    <SeedContentPlaceholder.Root {...props}>
      <SeedContentPlaceholder.Asset>{children}</SeedContentPlaceholder.Asset>
    </SeedContentPlaceholder.Root>
  );
}

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Usage

import { ContentPlaceholder } from "@/components/ui/content-placeholder";
import { car } from "@seed-design/lynx-react/content-placeholder-presets/car";

<ContentPlaceholder preset={car} width="160px" height="160px" />

Examples

Type Preset

12개 프리셋을 제공합니다. 사용할 프리셋만 개별 경로에서 import해 preset으로 전달합니다.

기본 모양은 content-placeholder-presets/default의 defaultPreset, 구매·판매 모양은 content-placeholder-presets/buy-sell의 buySell입니다. 나머지는 car, commerce, coupon, food, group, image, jobs, business, post, realty 경로와 같은 이름으로 import합니다.

preset을 생략하면 기본 이미지를 자동으로 넣지 않습니다. children으로 전달한 에셋만 표시합니다.

Lynx 예제를 불러오는 중입니다.

import { HStack } from "@seed-design/lynx-react";
import { defaultPreset } from "@seed-design/lynx-react/content-placeholder-presets/default";
import { buySell } from "@seed-design/lynx-react/content-placeholder-presets/buy-sell";
import { car } from "@seed-design/lynx-react/content-placeholder-presets/car";
import { commerce } from "@seed-design/lynx-react/content-placeholder-presets/commerce";
import { coupon } from "@seed-design/lynx-react/content-placeholder-presets/coupon";
import { food } from "@seed-design/lynx-react/content-placeholder-presets/food";
import { group } from "@seed-design/lynx-react/content-placeholder-presets/group";
import { image } from "@seed-design/lynx-react/content-placeholder-presets/image";
import { jobs } from "@seed-design/lynx-react/content-placeholder-presets/jobs";
import { business } from "@seed-design/lynx-react/content-placeholder-presets/business";
import { post } from "@seed-design/lynx-react/content-placeholder-presets/post";
import { realty } from "@seed-design/lynx-react/content-placeholder-presets/realty";

import { ContentPlaceholder } from "@/components/ui/content-placeholder";

const presets = {
  default: defaultPreset,
  buySell,
  car,
  commerce,
  coupon,
  food,
  group,
  image,
  jobs,
  business,
  post,
  realty,
};

export default function ContentPlaceholderTypeExample() {
  return (
    <HStack gap="x3" wrap="wrap">
      {Object.entries(presets).map(([name, preset]) => (
        <ContentPlaceholder key={name} preset={preset} width="120px" height="120px" />
      ))}
    </HStack>
  );
}

Sizes

width와 height로 영역의 크기를 지정합니다. 에셋은 영역 높이의 절반으로 표시되며 최대 너비는 160px입니다.

Lynx 예제를 불러오는 중입니다.

import { defaultPreset } from "@seed-design/lynx-react/content-placeholder-presets/default";
import { HStack, VStack, Text } from "@seed-design/lynx-react";
import { ContentPlaceholder } from "@/components/ui/content-placeholder";

const sizes = [
  { label: "48x48", width: 48, height: 48 },
  { label: "200x80", width: 200, height: 80 },
  { label: "200x120", width: 200, height: 120 },
  { label: "200x50", width: 200, height: 50 },
  { label: "300x300", width: 300, height: 300 },
  { label: "320x200", width: 320, height: 200 },
  { label: "40x120", width: 40, height: 120 },
  { label: "40x40", width: 40, height: 40 },
];

export default function ContentPlaceholderSizes() {
  return (
    <HStack gap="x4" wrap="wrap" align="flex-end">
      {sizes.map(({ label, width, height }) => (
        <VStack key={label} gap="x1" align="center">
          <ContentPlaceholder preset={defaultPreset} width={`${width}px`} height={`${height}px`} />
          <Text textStyle="t1Regular" color="fg.neutralSubtle">
            {label}
          </Text>
        </VStack>
      ))}
    </HStack>
  );
}

Customizing Asset

아이콘이나 이미지를 children으로 전달하면 프리셋을 대체합니다. 컴포넌트는 자식의 색을 바꾸지 않으므로, 모노크롬 아이콘에는 tint-color를 지정하세요.

Lynx 예제를 불러오는 중입니다.

import IconAppleFill from "@karrotmarket/lynx-monochrome-icon/IconAppleFill";
import IconSparkle2Fill from "@karrotmarket/lynx-monochrome-icon/IconSparkle2Fill";
import IconDiamondFill from "@karrotmarket/lynx-monochrome-icon/IconDiamondFill";
import { HStack } from "@seed-design/lynx-react";
import { ContentPlaceholder } from "@/components/ui/content-placeholder";

export default function ContentPlaceholderSvgExample() {
  return (
    <HStack gap="x3" wrap="wrap">
      <ContentPlaceholder width="150px" height="150px">
        <IconAppleFill tint-color="#ff6600" />
      </ContentPlaceholder>
      <ContentPlaceholder width="100px" height="150px">
        <IconSparkle2Fill tint-color="#ff6600" />
      </ContentPlaceholder>
      <ContentPlaceholder width="200px" height="150px">
        <IconDiamondFill tint-color="#ff6600" />
      </ContentPlaceholder>
    </HStack>
  );
}

커스텀 아이콘 컴포넌트는 전달받은 style과 tint-color를 실제 <image>에 연결해야 합니다. 직접 넣는 <image>에는 mode="aspectFit"과 크기 스타일을 지정합니다.

<ContentPlaceholder width="160px" height="160px">
  <image
    src={customAssetSrc}
    mode="aspectFit"
    style={{ width: "100%", height: "100%" }}
  />
</ContentPlaceholder>

tint-color는 자식 아이콘에 전달하는 native 속성입니다.

웹 버전과의 차이

프리셋은 SEED 테마 클래스에 따라 light 또는 dark 이미지를 표시합니다.
커스텀 아이콘의 색은 currentColor 대신 tint-color로 지정합니다.

Content Placeholder

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

목차