Astro

Astro는 기본적으로 JavaScript를 전혀 포함하지 않으며 모든 컴포넌트를 서버에서 정적 HTML로 렌더링합니다. Wink 웹 컴포넌트는 클라이언트 사이드 <script> 태그를 통해 로드되어야 합니다. Astro의 아일랜드 아키텍처 덕분에 이 작업이 간단해집니다.

@wink/elements npm package TypeScript 타입과 함께 CDN 번들을 설치하고 로드하세요.

설치

npm install @wink/elements

공통 레이아웃에 로드하기

기본 레이아웃에 로더 스크립트를 추가하여 모든 페이지에서 실행되도록 하세요:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
  </head>
  <body>
    <slot />

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

페이지에서 사용하기

Astro 컴포넌트는 서버에서 렌더링되므로 <wink-*> 태그는 정적 HTML로 출력됩니다. CDN 스크립트는 페이지가 브라우저에서 로드될 때 커스텀 요소를 등록합니다:

---
import Layout from '../layouts/Layout.astro';
---

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

프레임워크 컴포넌트(아일랜드) 내부에서

React, Vue, Svelte 아일랜드를 Wink와 함께 사용하는 경우, 위와 같이 레이아웃에서 @wink/elements를 로드하고 아일랜드 컴포넌트 내부에서 <wink-*> 태그를 정상적으로 사용하세요 — 아일랜드가 하이드레이션될 때쯤 커스텀 요소가 등록됩니다.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load()는 이미 레이아웃에서 호출됨 — 여기서 렌더링해도 안전합니다
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

---
import HotelCard from '../components/HotelCard.tsx';
---
<HotelCard client:load layoutId="YOUR_LAYOUT_ID" />

환경 변수

Astro는 PUBLIC_ 접두사가 붙은 변수만 브라우저에 노출합니다:

PUBLIC_WINK_CLIENT_ID=your-client-id