메인 콘텐츠로 건너뛰기
Github Repository: https://github.com/KlipFit/kleep-rn drawer.kleep.ai를 감싸는 경량 WebView 래퍼입니다. SDK는 하나의 컴포넌트와 두 개의 메서드를 제공하며, iOS 인터페이스와 동일한 구조를 갖습니다.

​
설치

각 릴리스는 cdn.kleep.ai에 npm 타볼 형태로 게시됩니다. 두 가지 URL 형식을 사용할 수 있습니다: 최신 안정 버전 (새로운 안정 릴리스마다 자동 업데이트 — 프리릴리스는 이 포인터를 이동시키지 않습니다): 
npm install https://cdn.kleep.ai/react-native-sdk/latest.tgz \
  react-native-webview \
  @react-native-async-storage/async-storage
특정 버전 고정 (프로덕션 권장 — 완전히 불변): 
npm install https://cdn.kleep.ai/react-native-sdk/releases/v1.0.0/kleep-react-native-1.0.0.tgz \
  react-native-webview \
  @react-native-async-storage/async-storage
v1.0.0 및 1.0.0을 원하는 릴리스 태그로 교체하세요. 위에 나열된 두 패키지는 피어 의존성입니다 — SDK가 필요로 하지만 버전은 직접 제어할 수 있습니다. 게시된 타볼에는 설치 전 무결성 검증을 원할 경우 사용할 수 있는 SHA-256 파일(<tarball>.sha256 / latest.tgz.sha256)이 함께 포함됩니다.

​
Expo

두 피어 의존성 모두 Expo Go (SDK 54+)에 사전 번들되어 있습니다. 개발 환경에서 별도 설정이 필요하지 않습니다. 프로덕션 빌드의 경우 expo prebuild가 자동으로 처리합니다.

​
Bare React Native

cd ios && pod install

​
권한

신발 플로우(카메라 스캔)의 경우 ios/<App>/Info.plist에 다음을 추가합니다: 
<key>NSCameraUsageDescription</key>
<string>Used to scan your shoe size</string>
그리고 android/app/src/main/AndroidManifest.xml에 다음을 추가합니다: 
<uses-permission android:name="android.permission.CAMERA" />

​
앱 시작 시 한 번 설정

import { Kleep } from '@kleep/react-native';

Kleep.configure({
  publicId: 'YOUR_KLEEP_PUBLIC_ID',  // UUID provided by Kleep
  language: 'fr',                      // optional, default UI language
});
필드필수 여부설명
publicIdyes리테일러를 식별하는 UUID (Kleep에서 제공)
languageno'fr' | 'en' | 'de' | 'it' | 'es' | 'nl' | 'pt' | 'ja' | 'ko' | 'pl' | 'br' | 'dk' | 'fi' | 'se' | 'gb'

​
사용법

​
메서드 1: Kleep.checkProduct

상품 페이지 (PDP) 마운트 시 호출합니다. 반환값은 “내 사이즈 찾기” CTA의 렌더링 여부와 표시할 레이블을 결정합니다.
파라미터우선순위설명
productId필수리테일러에서의 상품 ID
반환값 
{
  recommendable: boolean;
  productFound: boolean;
  category?: 'clothing' | 'lingerie' | 'footwear' | 'children';
  recommendedSize?: string;   // e.g. "M", "38"
}
로직 스키마
recommendablerecommendedSize렌더링 내용
false—CTA 숨기기 (Kleep 지원 불가 상품)
true없음CTA: “Trouver ma taille”
true"M"CTA: “Taille recommandée: M”
SDK는 (publicId, productId) 키 기반의 게이트와 (publicId, productId, mid) 키 기반의 추천 사이즈에 대해 결과를 5분간 메모리 캐시에 저장합니다. 상품 페이지 (PDP)를 다시 렌더링하거나 뒤로 이동해도 추가 비용이 발생하지 않습니다. 구현 예시 
import { useEffect, useState } from 'react';
import { Pressable, Text } from 'react-native';
import { Kleep, KleepFindSizeView, type KleepCheckProductResult } from '@kleep/react-native';

function ProductPage({ product }) {
  const [check, setCheck] = useState<KleepCheckProductResult | null>(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    Kleep.checkProduct({ productId: product.id }).then(setCheck);
  }, [product.id]);

  if (!check?.recommendable) return <ProductContent />;

  return (
    <>
      <ProductContent />
      <Pressable onPress={() => setOpen(true)}>
        <Text>
          {check.recommendedSize
            ? `Taille recommandée : ${check.recommendedSize}`
            : 'Trouver ma taille'}
        </Text>
      </Pressable>
      <KleepFindSizeView
        visible={open}
        productId={product.id}
        variantId={selectedVariant?.id}
        onAddToCart={(e) => cart.add(e.variantId)}
        onSelectSize={(e) => pdp.setSize(e.size)}
        onDismiss={() => setOpen(false)}
      />
    </>
  );
}

​
메서드 2: <KleepFindSizeView>

이 컴포넌트를 마운트하면 전체 화면 Modal+WebView에서 사이즈 찾기 드로어가 열립니다. 제어 컴포넌트 패턴으로 동작합니다: 호스트가 visible 상태를 소유하며, SDK는 onDismiss를 통해 닫기를 요청합니다.
prop우선순위설명
visible필수모달 표시 여부를 제어합니다
productId필수checkProduct와 동일
onDismiss필수사용자가 드로어를 닫을 때 발생합니다 (X / 스와이프 / 뒤로 가기). 호스트는 반드시 visible을 false로 설정해야 합니다
variantId선택 사항추천을 위한 변형을 미리 선택합니다
customerId선택 사항세션 간 연결을 위한 CRM 식별자
language선택 사항이 열기에 대한 SDK 수준 언어를 재정의합니다
countryCode선택 사항예: "FR", "US" — 단위 시스템 및 브라 사이즈 기본값을 결정합니다
stocks선택 사항{ [variantId]: number | boolean } — 드로어에 품절/부분 재고 UI가 렌더링됩니다
mock선택 사항true → 드로어가 실제 추천 API 호출을 건너뜁니다 (QA 전용)
forceState선택 사항'outOfRange' | 'unavailable' | 'error' | 'qrcode' — 최종 상태를 직접 렌더링하는 QA 해치
warmRestore선택 사항{ mid, uid } — 기존 측정값 미리 로드 (인트로 플로우 건너뜀). 동일 기기 복원은 AsyncStorage를 통해 자동으로 처리됩니다
extraParams선택 사항드로어 URL에 추가되는 원시 Record<string, string> (이스케이프 해치)
onAddToCart선택 사항(event: { variantId, size? }) => void — 사용자가 드로어 내 “장바구니에 추가” CTA를 탭한 경우. 호스트가 해당 변형을 장바구니에 추가해야 합니다
onSelectSize선택 사항(event: { size }) => void — 사용자가 결과 화면에서 사이즈를 선택한 경우. 호스트는 상품 페이지 (PDP) 사이즈 선택기와 동기화해야 합니다
onMessage선택 사항디버그 훅 — 드로어에서 파싱된 모든 인바운드 postMessage에 대해 발생합니다
style선택 사항StyleProp<ViewStyle> — 컨테이너 스타일 재정의
webViewProps선택 사항고급 맞춤 설정을 위해 react-native-webview로 전달됩니다
SDK가 자동으로 처리하는 항목 (별도 설정 필요 없음):
  • 드로어의 iframe 스타일 window.parent.postMessage를 React Native 브리지에 연결합니다
  • 드로어가 mid / uid를 전달할 때 AsyncStorage에 유지합니다
  • 드로어의 getMid / getUid / getSizes postMessage에 응답합니다
  • 열릴 때 Kleep.checkProduct를 호출하여 플로우(clothing / lingerie / footwear / children)를 결정합니다 — CTA 호출과 동일한 5분 캐시를 사용하므로 이미 checkProduct를 호출했다면 추가 비용 없이 처리됩니다

​
메서드 3: Kleep.track

비동기 분석 이벤트 전송. 예외를 발생시키지 않습니다.
파라미터우선순위설명
eventName필수이벤트 이름
options.customerId선택 사항CRM 식별자
options.parameters선택 사항Record<string, unknown> — 임의의 이벤트 데이터
import { Kleep } from '@kleep/react-native';

await Kleep.track('product_viewed', {
  parameters: { productId: product.id },
});

await Kleep.track('product_added_to_cart', {
  customerId: user.id,
  parameters: {
    productId: product.id,
    variantId: selectedVariant.id,
    cart: cart.items,
  },
});

await Kleep.track('checkout_completed', {
  customerId: user.id,
  parameters: { orderId: order.id, cart: order.items },
});
3가지 이벤트를 추적합니다:
eventName트리거
product_viewed상품 페이지 (PDP) 조회 시
product_added_to_cart장바구니에 상품 추가 시
checkout_completed결제 후 주문 확인 시
product_viewed 예시 
{
  productId: "123ABC456"
}
product_added_to_cart 예시 
{
  productId: "123ABC456",
  variantId: "123ABC456-00R",
  cart: [
    {
      productId: "123ABC456",
      variantId: "123ABC456-00R",
      sku: "XYZ",
      size: "S",
      quantity: 2,
      price: { amount: "50", currencyCode: "EUR" }
    }
  ]
}
checkout_completed 예시 
{
  orderId: "000001",
  cart: [
    {
      lineItemId: "000001#1",
      productId: "123ABC456",
      variantId: "123ABC456-00R",
      sku: "XYZ",
      size: "S",
      quantity: 2,
      price: { amount: "50", currencyCode: "EUR" }
    }
  ]
}

​
캐시 무효화

SDK는 두 개의 인메모리 캐시를 유지합니다 (각 TTL 5분):
  • 상품 게이트 — (publicId, productId) → { recommendable, category, productFound }
  • 추천 사이즈 — (publicId, productId, mid) → size label
두 캐시 모두 자동으로 만료됩니다. 강제 새로고침이 필요한 경우 (사용자 로그아웃, 리테일러 전환, 수동 새로고침 버튼): 
Kleep.clearCheckProductCache();