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

사용자의 매너온도를 시각적으로 표현하는 컴포넌트입니다. 신뢰도/매너 정도를 직관적으로 보여주는 데에 사용합니다.

### Manner Temp

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/manner-temp) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

### Manner Temp Badge

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/manner-temp-badge) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

## Anatomy

![Manner Temp와 Manner Temp Badge의 Anatomy 이미지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1548e56a-e381-4a48-9d80-9597b7819fc5)

Manner Temp 컴포넌트는 사용자의 신뢰 지표를 온도 기반으로 시각화하는 그래픽 UI 요소입니다. 사용자 프로필이나 게시글 상세에서 매너온도를 강조할 때 사용합니다.

Manner Temp Badge는 매너온도를 배지 형태로 간결하게 표시합니다. 공간이 제한적일 때 매너 온도를 시각적으로 전달하기에 적합합니다.

## Properties

### Level

![Manner Temp의 Level Property - 10단계 레벨로 표시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f2d99bb6-5d9a-4f47-802b-1d0277252560)

매너온도는 구간에 따라 10단계 레벨로 표시되며, 각 레벨마다 텍스트 색상과 그래픽이 달라집니다. temperature는 실제 값(숫자)을 받으며, 이를 기반으로 레벨/시각 스타일이 자동 계산됩니다.

## Guidelines

### Manner Temp와 Manner Temp Badge의 사용

![Manner Temp와 Manner Temp Badge 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/66ea683c-4a98-4d9d-8f4f-70c6fe36fe70)

Manner Temp는 매너온도를 시각적으로 강조할 때 사용합니다. 게시글 상세의 판매자 정보처럼 매너온도가 중요한 정보일 때 적합합니다.

Manner Temp Badge는 작은 영역에서 매너온도를 간단히 표현할 때 사용합니다. 매너온도 외에 다른 요약 정보도 함께 표시하는 경우 적합합니다.

## Specification

### Manner Temp

Component spec (JSON): /rootage/components/manner-temp.json

### Manner Temp Badge

Component spec (JSON): /rootage/components/manner-temp-badge.json