SDK 연동
마이그레이션 가이드
Legacy API (v1.x)에서 Web Component API (v2.0+)로 마이그레이션
마이그레이션 가이드
Legacy API (v1.x)에서 Web Component API (v2.0+)로 마이그레이션하는 방법을 안내합니다.
Deprecation 타임라인
- v2.0 (현재): Legacy API deprecated, 사용 가능하지만 경고 표시
- v3.0 (예정): Legacy API 완전 제거
가능한 빨리 마이그레이션하는 것을 권장합니다.
Breaking Changes (v2.0)
1. 기본 모드 변경: Floating → Inline
<!-- v1.x: Floating 기본 -->
<script>
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({ ... });
</script>
<!-- v2.0: Inline 기본, Floating은 명시적으로 지정 -->
<tap-kit floating user-id="..." course-id="..." clip-id="..."></tap-kit>2. API 변경: 클래스 → Web Component
// v1.x (클래스)
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: '...', courseId: '...', clipId: '...' }
});<!-- v2.0 (Web Component) -->
<tap-kit user-id="..." course-id="..." clip-id="..."></tap-kit>
<script>
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
</script>3. 스타일 설정 변경: container → CSS
// v1.x
container: {
floatingConfig: {
position: { top: '64px', right: '32px' },
width: '360px',
borderRadius: '18px'
}
}/* v2.0 */
tap-kit[floating] {
top: 64px;
right: 32px;
width: 360px;
border-radius: 18px;
}마이그레이션 시나리오
CDN: Floating 위젯
Before (v1.x)
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<tap-button></tap-button>
<script>
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' }
});
</script>After (v2.0)
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<tap-button></tap-button>
<tap-kit floating user-id="user-123" course-id="course-456" clip-id="clip-789"></tap-kit>
<script>
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
</script>React 통합
Before (v1.x)
import { useEffect, useRef } from 'react';
function App() {
const initialized = useRef(false);
useEffect(() => {
if (initialized.current) return;
initialized.current = true;
const sdk = new TapKit({ apiKey: 'your-api-key' });
sdk.init({
course: { userId: '...', courseId: '...', clipId: '...' }
});
return () => sdk.destroy();
}, []);
return <button id="chat-button">AI 튜터</button>;
}After (v2.0)
'use client';
import { TapKit, useTapKit } from '@coxwave/tap-kit/react';
function App() {
const tapkit = useTapKit({
apiKey: 'your-api-key',
userId: 'user-123',
courseId: 'course-456',
clipId: 'clip-789',
});
return <TapKit control={tapkit.control} style={{ height: '600px' }} />;
}단계별 마이그레이션
1단계: HTML 변경
<!-- Before -->
<tap-button></tap-button>
<!-- After -->
<tap-button></tap-button>
<tap-kit floating user-id="..." course-id="..." clip-id="..."></tap-kit>2단계: JavaScript 변경
// Before
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({ course: { ... } });
// After
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
await kit.ready;3단계: 스타일 변경
/* container.floatingConfig → CSS */
tap-kit[floating] {
top: 64px;
right: 32px;
width: 360px;
}4단계: 테스트
- 채팅 열기/닫기 동작 확인
- 위치 및 크기 확인
- 이벤트 리스너 동작 확인
자주 묻는 질문
Q. v1.x 코드가 v2.0에서도 동작하나요?
네, deprecated 경고와 함께 동작합니다. v3.0에서 제거될 예정이므로 빨리 마이그레이션하세요.
Q. Floating 모드를 계속 사용하고 싶어요
floating 속성을 추가하면 됩니다:
<tap-kit floating user-id="..." course-id="..." clip-id="..."></tap-kit>마이그레이션 체크리스트
-
new TapKit()→<tap-kit>또는useTapKit()변경 -
init()호출 제거 -
floating속성 추가 (Floating 모드) -
container.floatingConfig→ CSS 변경 - Property 이름: camelCase → kebab-case
- 테스트 완료