# Image Frame
URL: /react/components/image-frame
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/image-frame.mdx
사용자가 업로드한 이미지를 표시하기 위한 컴포넌트입니다.
사용 가능 버전: @seed-design/react@1.2.0, @seed-design/css@1.2.0
## Preview
```tsx
import { ImageFrame } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFramePreview() {
return (
}
/>
);
}
```
## Usage
```tsx
import { ImageFrame } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
```
```tsx
}
/>
```
## Props
## Examples
### Ratio
다양한 비율을 지정할 수 있습니다. `1`은 정사각형, `4/3`은 일반적인 사진 비율, `16/9`는 와이드스크린 비율입니다.
```tsx
import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFrameRatio() {
return (
}
/>
1:1
}
/>
4:3
}
/>
16:9
);
}
```
### Border Radius
`borderRadius` prop으로 모서리 라운드 스타일을 적용할 수 있습니다. 기본값은 `"r2"`입니다.
```tsx
import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFrameBorderRadius() {
return (
}
/>
20 / r1 (4px)
}
/>
24 / r1 (4px)
}
/>
36 / r1_5 (6px)
}
/>
42 / r1_5 (6px)
}
/>
48 / r1_5 (6px)
}
/>
64+ / r2 (8px)
);
}
```
### Stroke
`stroke` prop으로 테두리 스타일을 적용할 수 있습니다.
```tsx
import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFrameStroke() {
return (
}
/>
stroke=false
}
/>
stroke=true
);
}
```
### Fallback Image
`fallback` prop으로 이미지가 로드되지 않았을 때 보여질 요소를 지정할 수 있습니다. 주로 [ContentPlaceholder](/react/components/content-placeholder)를 사용합니다.
```tsx
import { ImageFrame, Flex } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFrameFallbackExample() {
return (
}
/>
}
/>
}
/>
);
}
```
### Overlay
`ImageFrameFloater`를 사용하여 이미지 위에 오버레이 요소를 배치할 수 있습니다. `ImageFrameBadge`, `ImageFrameIcon`, `ImageFrameIndicator`, `ImageFrameReactionButton` 등 다양한 오버레이 컴포넌트를 제공합니다.
```tsx
import { IconCarrotFill } from "@karrotmarket/react-monochrome-icon";
import {
ImageFrame,
ImageFrameFloater,
ImageFrameBadge,
ImageFrameIcon,
ImageFrameIndicator,
ImageFrameReactionButton,
Flex,
VStack,
Text,
} from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
import { useState } from "react";
export default function ImageFrameOverlayExample() {
const [liked, setLiked] = useState(false);
return (
}
>
NEW
ImageFrameBadge
}
>
} />
ImageFrameIcon
}
>
+9
ImageFrameIndicator
}
>
ImageFrameReactionButton
);
}
```
#### Multiple Overlays
여러 위치에 오버레이를 동시에 배치할 수 있습니다.
```tsx
import {
ImageFrame,
ImageFrameFloater,
ImageFrameBadge,
ImageFrameReactionButton,
} from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
import { useState } from "react";
export default function ImageFrameOverlayMultipleExample() {
const [liked, setLiked] = useState(false);
return (
}
>
NEW
);
}
```
#### Custom Overlay
`ImageFrameFloater`는 모든 React 요소를 children으로 받을 수 있습니다. 미리 정의된 오버레이 컴포넌트 외에도 커스텀 UI를 배치할 수 있습니다.
```tsx
import { ImageFrame, ImageFrameFloater } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFrameOverlayCustomExample() {
return (
}
>
Custom Element
);
}
```
#### Offset
`offsetX`, `offsetY` prop으로 오버레이의 여백을 조절할 수 있습니다. 기본값은 `6px`입니다.
```tsx
import { ImageFrame, ImageFrameFloater, ImageFrameIndicator } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ImageFrameOverlayInsetExample() {
return (
}
>
default
}
>
offset=0
}
>
offset=12
);
}
```