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

매너온도를 작은 배지 형태로 표현하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

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

## Preview

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { MannerTempBadge, useSeedClassName, VStack } from "@seed-design/lynx-react";

const mannerTemps = [
  ["l1", "12.5°C"],
  ["l2", "30°C"],
  ["l3", "36°C"],
  ["l4", "36.5°C"],
  ["l5", "37°C"],
  ["l6", "40°C"],
  ["l7", "45°C"],
  ["l8", "55°C"],
  ["l9", "65°C"],
  ["l10", "80°C"],
] as const;

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <VStack
        width="full"
        height="full"
        align="center"
        justify="center"
        gap="x1"
        p="x4"
        bg="bg.layerDefault"
      >
        {mannerTemps.map(([level, label]) => (
          <MannerTempBadge key={level} level={level}>
            {label}
          </MannerTempBadge>
        ))}
      </VStack>
    </page>
  );
}

root.render(<Root />);
```

## 설치

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

<Callout>
  Lynx `MannerTempBadge`는 별도 `ui:manner-temp-badge` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## 속성

## 사용법

`level`에 매너온도 구간을 지정하고 자식으로 표시할 온도를 전달합니다.

```tsx
import { MannerTempBadge } from "@seed-design/lynx-react";

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

## 웹 버전과의 차이

<Callout type="warning">
  - **렌더링 요소.** HTML `<span>` 대신 native `<view>`와 `<text>`를 렌더링합니다.
  - **공개 경로.** React 문서의 `ui:manner-temp-badge` snippet과 달리 Lynx에서는 패키지 API를 직접 사용합니다.
  - **온도 변환.** Lynx 패키지는 `temperature`를 `level`로 바꾸지 않습니다. 제품의 매너온도 기준에 따라 `level`을 계산해 전달하세요.
  - **다형 렌더링.** 웹의 `asChild`와 HTML attribute 표면은 제공하지 않습니다.
</Callout>