React 예제

사전 준비

index.html의 <head>에 SDK 스크립트를 추가합니다.

html

<script src="https://klleon.k1.klleon.io/{VERSION}/klleon-sdk.umd.js"></script>

기본 예제

SDK Web Component를 사용하는 기본 React 예제입니다.

StrictMode 동작

SDK는 내부 Mutex로 init()/destroy() 호출을 직렬화합니다. React StrictMode에서 mount → unmount → remount가 발생하면 init → destroy → init 순서로 큐잉되어 3회 왕복이 실행됩니다. 개발 환경에서 초기 연결이 느릴 수 있으나, 프로덕션에서는 StrictMode가 없으므로 1회만 실행됩니다.

tsx

import { useEffect, useState } from 'react';

const SDK_KEY = 'YOUR_SDK_KEY';
const AVATAR_ID = 'YOUR_AVATAR_ID';

function App() {
  const [status, setStatus] = useState('IDLE');
  const [speakText, setSpeakText] = useState('');

  useEffect(() => {
    const SDK = window.KlleonSDK;

    SDK.onStatus((s) => setStatus(s));

    SDK.onSignal((data) => {
      console.log('시그널:', data.signal, data.payload);
    });

    SDK.onError((error) => {
      console.error('에러:', error.code, error.message);
    });

    SDK.init({ sdk_key: SDK_KEY, avatar_id: AVATAR_ID })
      .catch((e) => console.error('초기화 실패:', e.message));

    return () => { SDK.destroy(); };
  }, []);

  const handleSpeak = () => {
    if (speakText.trim()) {
      window.KlleonSDK.speak(speakText);
      setSpeakText('');
    }
  };

  return (
    <div style={{ display: 'flex', width: 800, height: 720, gap: 24 }}>
      <avatar-container
        style={{ flex: 1, borderRadius: 24, overflow: 'hidden' }}
      />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <p>상태: {status}</p>
        <chat-container style={{ flex: 1, borderRadius: 24 }} />
        <input
          value={speakText}
          onChange={(e) => setSpeakText(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && !e.nativeEvent.isComposing && handleSpeak()}
          placeholder="speak 내용 입력..."
        />
        <button onClick={handleSpeak}>speak 전송</button>
      </div>
    </div>
  );
}

export default App;

TypeScript 프로젝트

TypeScript에서 Web Component 사용 시 타입 에러가 발생하면 TypeScript 지원 페이지의 타입 정의 파일을 추가하세요.

커스텀 예제 (Web Component 없이)

SDK Web Component를 사용하지 않고 직접 UI를 구성하는 고급 예제입니다. SDK 이벤트와 메서드를 활용해 자유롭게 UI를 제어할 수 있습니다.

tsx

import { useEffect, useState } from 'react';

const SDK_KEY = 'YOUR_SDK_KEY';
const AVATAR_ID = 'YOUR_AVATAR_ID';

function CustomChat() {
  const [status, setStatus] = useState('IDLE');
  const [messages, setMessages] = useState([]);
  const [text, setText] = useState('');
  const [isSpeaking, setIsSpeaking] = useState(false);

  useEffect(() => {
    const SDK = window.KlleonSDK;

    SDK.onStatus((s) => setStatus(s));

    SDK.onSignal((data) => {
      switch (data.signal) {
        case 'RESPONSE_TEXT':
          setMessages((prev) => [...prev, {
            type: 'response', text: data.payload?.text
          }]);
          setIsSpeaking(true);
          break;
        case 'STT_RESULT':
          setMessages((prev) => [...prev, {
            type: 'request', text: data.payload?.text
          }]);
          break;
        case 'RESPONSE_PREPARING':
          setIsSpeaking(true);
          break;
        case 'RESPONSE_ENDED':
          setIsSpeaking(false);
          break;
      }
    });

    SDK.onError((error) => {
      console.error(error.code, error.message);
    });

    SDK.init({ sdk_key: SDK_KEY, avatar_id: AVATAR_ID })
      .catch((e) => console.error(e.message));

    return () => { SDK.destroy(); };
  }, []);

  const send = () => {
    if (!text.trim() || isSpeaking) return;
    window.KlleonSDK.sendMessage(text);
    setMessages((prev) => [...prev, { type: 'request', text }]);
    setText('');
  };

  const isReady = status === 'CONNECTED_FINISH';

  return (
    <div style={{ display: 'flex', gap: 24, height: 720 }}>
      {/* 아바타 영역 */}
      <avatar-container style={{ flex: 1, borderRadius: 24, overflow: 'hidden' }} />

      {/* 채팅 영역 (직접 구현) */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <p>상태: {status}</p>

        <div style={{
          flex: 1, overflowY: 'auto', border: '1px solid #ccc',
          borderRadius: 12, padding: 12
        }}>
          {messages.map((m, i) => (
            <div key={i} style={{
              textAlign: m.type === 'request' ? 'right' : 'left',
              margin: '4px 0'
            }}>
              <span style={{
                display: 'inline-block', padding: '8px 12px', borderRadius: 8,
                background: m.type === 'request' ? '#3579CC' : '#f0f0f0',
                color: m.type === 'request' ? '#fff' : '#333',
              }}>
                {m.text}
              </span>
            </div>
          ))}
        </div>

        {/* 컨트롤 */}
        <div style={{ display: 'flex', gap: 8 }}>
          <input
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && !e.nativeEvent.isComposing && send()}
            placeholder={isSpeaking ? '아바타 발화 중...' : '메시지 입력'}
            disabled={!isReady || isSpeaking}
            style={{ flex: 1, padding: 8 }}
          />
          <button onClick={send} disabled={!isReady || isSpeaking}>전송</button>
        </div>

        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={() => window.KlleonSDK.startListening()} disabled={!isReady}>STT 시작</button>
          <button onClick={() => window.KlleonSDK.endListening()} disabled={!isReady}>STT 종료</button>
          <button onClick={() => window.KlleonSDK.stopSpeaking()} disabled={!isSpeaking}>발화 중단</button>
        </div>
      </div>
    </div>
  );
}

export default CustomChat;

React 예제 ​

사전 준비 ​

기본 예제 ​

커스텀 예제 (Web Component 없이) ​

React 예제

사전 준비

기본 예제

커스텀 예제 (Web Component 없이)