# Content Placeholder
URL: /lynx/components/content-placeholder
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/content-placeholder.mdx

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

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@1.0.0, @seed-design/lynx-css@1.0.0

## Preview

```tsx
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

- npm: npx @seed-design/cli@latest add ui:content-placeholder
- pnpm: pnpm dlx @seed-design/cli@latest add ui:content-placeholder
- yarn: yarn dlx @seed-design/cli@latest add ui:content-placeholder
- bun: bun x @seed-design/cli@latest add ui:content-placeholder

## Usage

```tsx
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" />
```

## Props

## 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`으로 전달한 에셋만 표시합니다.

```tsx
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입니다.

```tsx
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`를 지정하세요.

```tsx
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"`과 크기 스타일을 지정합니다.

```tsx
<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`로 지정합니다.