콘텐츠로 이동

npm 패키지

@wink/elements npm 패키지는 Wink 웹 컴포넌트를 모든 JavaScript 또는 TypeScript 프로젝트에 가장 빠르게 추가하는 방법입니다. CDN 리소스를 주입하는 load() 함수와 모든 컴포넌트 속성에 대한 완전한 TypeScript 타입 선언을 제공합니다.

wink-travel/wink-elements on GitHub 소스 코드, API 참조 및 기여 지침.

설치

npm install @wink/elements

빠른 시작

앱 시작 시 한 번 load()를 호출하세요. 이 함수는 멱등성이 있어 여러 번 호출해도 안전합니다.

import { load } from '@wink/elements';

load({ clientId: 'YOUR_CLIENT_ID' });

그런 다음 HTML 또는 JSX에서 원하는 Wink 컴포넌트를 사용하세요:

<wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID"></wink-content-loader>

프레임워크 예제

Next.js (App Router)

'use client';
import { useEffect } from 'react';
import { load } from '@wink/elements';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    load({ clientId: process.env.NEXT_PUBLIC_WINK_CLIENT_ID! });
  }, []);
  return <html><body>{children}</body></html>;
}

Nuxt 3

import { load } from '@wink/elements';

export default defineNuxtPlugin(() => {
  load({ clientId: useRuntimeConfig().public.winkClientId });
});

Astro

---
import { load } from '@wink/elements';
---
<script>
  import { load } from '@wink/elements';
  load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
</script>

SvelteKit

import { load as loadWink } from '@wink/elements';
import { browser } from '$app/environment';

export function load() {
  if (browser) {
    loadWink({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  }
}

TypeScript 타입

모든 컴포넌트 속성 인터페이스는 JSX, 템플릿 리터럴 또는 타입이 지정된 딕셔너리에서 사용하도록 내보내집니다:

import type { WinkContentLoaderAttributes, WinkLayout } from '@wink/elements';

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript가 잘못된 layout 값을 잡아냅니다
  id: 'abc123',
  sort: 'POPULARITY',
};

스테이징 CDN 사용하기

load({
  clientId: 'YOUR_CLIENT_ID',
  cdnBaseUrl: 'https://staging-elements.wink.travel',
});

API

`load(options)`

옵션	타입	필수	기본값	설명
`clientId`	`string`	예	—	Wink OAuth2 클라이언트 ID
`configurationId`	`string`	아니요	—	선택적 커스터마이징 ID
`cdnBaseUrl`	`string`	아니요	`https://elements.wink.travel`	CDN URL 재정의

추가 자료