# Manner Temp
URL: /lynx/components/manner-temp
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/manner-temp.mdx

사용자의 매너온도를 온도와 표정 이미지로 표현하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

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

## Preview

```tsx
import { VStack } from "@seed-design/lynx-react";
import { MannerTemp } from "@/components/ui/manner-temp";

const temperatures = [12.5, 30, 36, 36.5, 37, 40, 45, 55, 65, 80];

export default function Example() {
  return (
    <VStack gap="x1" align="center">
      {temperatures.map((temperature) => (
        <MannerTemp key={temperature} temperature={temperature} />
      ))}
    </VStack>
  );
}
```

## 설치

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

## 속성

## 사용법

`temperature`를 전달하면 구간에 맞는 `level`을 계산해 온도와 표정 이미지를 표시합니다. `level`을 직접 지정하면 계산 결과보다 우선합니다.

```tsx
import { MannerTemp } from "@/components/ui/manner-temp";

export function App() {
  return <MannerTemp temperature={36.5} />;
}
```

### 직접 구성하기

표시 문구나 구성을 바꾸려면 `MannerTemp`와 `MannerTempEmote`를 조합합니다. 이때 계산한 `level`을 직접 전달합니다.

```tsx
import { MannerTemp, MannerTempEmote } from "@seed-design/lynx-react";

export function App() {
  return (
    <MannerTemp level="l4">
      36.5°C
      <MannerTempEmote />
    </MannerTemp>
  );
}
```

## 웹 버전과의 차이

<Callout type="warning">
  - HTML 속성 대신 각 native 요소의 속성을 사용합니다. 웹의 `asChild`는 지원하지 않습니다.
  - `MannerTempEmote`의 `src`, `mode`, `accessibility-elements-hidden`을 덮어쓰면 기본 이미지나 접근성 동작도 바뀝니다.
  - `MannerTempEmote`는 전달 순서와 관계없이 label 뒤에 배치됩니다. 다른 컴포넌트로 감싼 emote는 label의 일부로 처리됩니다.
  - `MannerTempEmote`는 단일 이미지를 사용하며 `children`을 렌더링하지 않습니다.
</Callout>