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

인물 이미지가 로드되지 않았을 때 표시하는 대체 요소입니다.

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

## Preview

```tsx
import { Box } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";

export default function Example() {
  return (
    <Box width="160px" height="160px">
      <IdentityPlaceholder />
    </Box>
  );
}
```

## Installation

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

## Usage

부모의 너비와 높이를 모두 채우며, 도형은 비율을 유지한 채 중앙에 표시됩니다. 크기를 지정한 부모 안에 배치하세요.

```tsx
import { Box } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";

export function ProfileFallback() {
  return (
    <Box width="160px" height="160px">
      <IdentityPlaceholder />
    </Box>
  );
}
```

기본값인 `identity="person"`은 사람 도형을 표시합니다. 매장에는 `identity="business"`를 사용합니다.

## Props

`imageProps`로 native `<image>`의 접근성 속성을 전달할 수 있습니다. 기본 접근성 레이블은 `"Identity placeholder"`입니다.

```tsx
<IdentityPlaceholder imageProps={{ "accessibility-label": "프로필 이미지 없음" }} />
```

## Examples

### Identity

`identity`로 사람과 매장 도형을 선택합니다.

```tsx
import { Box, HStack } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";

export default function Example() {
  return (
    <HStack
      gap="x4"
      align="center"
      justify="center"
      style={{ display: "flex", flexWrap: "wrap", maxWidth: "100%" }}
    >
      <Box width="160px" height="160px">
        <IdentityPlaceholder identity="person" />
      </Box>
      <Box width="160px" height="160px">
        <IdentityPlaceholder identity="business" />
      </Box>
    </HStack>
  );
}
```

### Aspect Ratio

정방형, 가로형, 세로형 영역에서 사람과 매장 도형의 비율을 유지합니다.

```tsx
import { Box, HStack, VStack } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";

const identities = ["person", "business"] as const;

export default function Example() {
  return (
    <VStack gap="x4" align="center" style={{ maxWidth: "100%" }}>
      {identities.map((identity) => (
        <HStack
          key={identity}
          align="center"
          gap="x4"
          justify="center"
          style={{ display: "flex", flexWrap: "wrap", maxWidth: "100%" }}
        >
          <Box width="80px" height="80px">
            <IdentityPlaceholder identity={identity} />
          </Box>
          <Box width="160px" height="80px">
            <IdentityPlaceholder identity={identity} />
          </Box>
          <Box width="80px" height="160px">
            <IdentityPlaceholder identity={identity} />
          </Box>
        </HStack>
      ))}
    </VStack>
  );
}
```

## 웹 버전과의 차이

- SVG 대신 패키지에 포함된 native 이미지를 사용합니다. 외부 URL 요청은 발생하지 않습니다.
- `imageProps`로 `src`나 `mode`를 지정하면 기본 이미지와 맞춤 방식을 덮어씁니다.
- 동적 tint와 `asChild`는 지원하지 않습니다.