Emotion Components

@hua-labs/ui

v1.2.0

감정 선택 및 분석을 위한 컴포넌트 모음입니다. 다이어리 앱, 정신건강 트래커, 감성 분석 UI에 적합합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { EmotionButton, EmotionMeter, EmotionSelector, EmotionAnalysis } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

Pro

AI-Ready

포함된 컴포넌트

• EmotionButton - 단일 감정 버튼
• EmotionMeter - 감정 강도 미터
• EmotionSelector - 감정 선택기 (복수 옵션)
• EmotionAnalysis - 감정 분석 결과 표시

라이브 데모

EmotionButton

첫 번째 버튼을 클릭해서 선택 상태 토글

EmotionMeter

기쁨

85%

평온

60%

걱정

30%

EmotionSelector

😊

기쁨

😢

슬픔

😠

화남

❤️

평온

⭐

설렘

😐

걱정

❤️

감사

👤

외로움

감정 강도65%

약함보통강함

EmotionAnalysis

주요 감정

기쁨

80% 강도

감정 분포

기쁨60%

평온30%

설렘10%

분석 지표

감정 강도

강함

긍정성

긍정적

에너지

높음

감정 키워드

happiness

gratitude

relaxation

peace

hope

EmotionButton Props

Props

이름	타입	기본값	설명
`emotion*`	`string`	-	감정 이모지 또는 텍스트
`isSelected`	`boolean`	`false`	선택 상태
`size`	`"sm" \| "md" \| "lg"`	`"md"`	버튼 크기

EmotionMeter Props

Props

이름	타입	기본값	설명
`value*`	`number`	-	감정 강도 값 (0-max)
`max`	`number`	`100`	최대값
`size`	`"sm" \| "md" \| "lg"`	`"md"`	미터 크기
`color`	`"blue" \| "green" \| "yellow" \| "red" \| ...`	`"blue"`	미터 색상

EmotionSelector Props

Props

이름	타입	기본값	설명
`selectedEmotion`	`string`	-	현재 선택된 감정 키
`onEmotionSelect`	`(emotion: string) => void`	-	감정 선택 콜백
`layout`	`"grid" \| "list" \| "compact"`	`"grid"`	레이아웃 타입
`variant`	`"button" \| "card" \| "chip"`	`"button"`	표시 스타일
`showIntensity`	`boolean`	`false`	강도 슬라이더 표시
`emotions`	`Array<{key, label, icon?, color?}>`	-	커스텀 감정 목록

EmotionAnalysis Props

Props

이름	타입	기본값	설명
`primaryEmotion`	`{ name: string, intensity: number, color?: string }`	-	주요 감정 정보
`emotionDistribution`	`Array<{emotion, percentage, color}>`	-	감정 분포 배열
`keywords`	`string[]`	-	키워드 배열
`layout`	`"compact" \| "detailed" \| "card"`	`"detailed"`	레이아웃 타입
`showMeter`	`boolean`	`true`	강도 미터 표시

코드 예시

docs:components.emotion.accessibility.emotionbuttontsx

1import { EmotionButton } from '@hua-labs/ui/advanced';
2 
3<EmotionButton emotion="😊" isSelected size="lg" />
4<EmotionButton emotion="😢" size="md" />

docs:components.emotion.accessibility.emotionmetertsx

1import { EmotionMeter } from '@hua-labs/ui/advanced';
2 
3<EmotionMeter value={75} color="green" size="md" />

docs:components.emotion.accessibility.emotionselectortsx

1import { EmotionSelector } from '@hua-labs/ui/advanced';
2 
3<EmotionSelector
4  selectedEmotion={selectedEmotion}
5  onEmotionSelect={setSelectedEmotion}
6  layout="grid"
7  variant="card"
8  showIntensity
9  intensity={intensity}
10  onIntensityChange={setIntensity}
11/>

docs:components.emotion.accessibility.emotionanalysistsx

1import { EmotionAnalysis } from '@hua-labs/ui/advanced';
2 
3<EmotionAnalysis
4  primaryEmotion={{ name: "기쁨", intensity: 80, color: "yellow" }}
5  emotionDistribution={[
6    { emotion: "기쁨", percentage: 60, color: "bg-yellow-500" },
7    { emotion: "평온", percentage: 40, color: "bg-green-500" },
8  ]}
9  keywords={["행복", "만족", "감사"]}
10  intensity={80}
11  positivity={85}
12  energy={70}
13  layout="detailed"
14/>

기본 제공 감정

😊 기쁨 (joy)

😢 슬픔 (sadness)

😠 화남 (anger)

😌 평온 (calm)

⭐ 설렘 (excitement)

😐 걱정 (worry)

💜 감사 (gratitude)

👤 외로움 (loneliness)

접근성

•키보드 탐색: Tab으로 감정 옵션 간 이동
•포커스 표시: 버튼에 명확한 포커스 링 표시
•색상 + 레이블: 감정을 색상과 텍스트 레이블로 함께 표시

StatsPanelPro StatCard