Svelte와의 통합
DHTMLX Booking은 바인딩된 컨테이너 안에 위젯을 마운트하는 단일 파일 컴포넌트를 통해 Svelte와 통합됩니다. 이 가이드는 Svelte 프로젝트를 스캐폴딩하고, Booking을 설치하며, 데이터와 이벤트가 포함된 위젯을 렌더링하는 과정을 안내합니다. 완전한 참조 구현은 GitHub의 Svelte 예제를 참조하세요.
이 가이드는 Svelte 핵심 개념에 대한 사전 지식을 전제로 합니다. 입문 내용은 Svelte 공식 문서를 참조하세요.
프로젝트 생성
Booking 통합을 추가하기 전에 Svelte 프로젝트를 스캐폴딩합니다.
다음 명령어는 Vite 스캐폴딩 도구를 실행합니다:
npm create vite@latest
프롬프트가 표시되면 프로젝트 이름을 my-svelte-booking-app으로 지정합니다.
의존성 설치
프로젝트 디렉토리로 이동합니다.
다음 명령어는 새로 생성된 앱 폴더를 엽니다:
cd my-svelte-booking-app
패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작합니다.
다음 명령어는 yarn을 사용합니다:
yarn
yarn dev
다음 명령어는 npm을 사용합니다:
npm install
npm run dev
앱은 로컬호스트(예: http://localhost:5173)에서 실행됩니다.
앱에 Booking 추가하기
Booking 패키지를 설치하기 전에 개발 서버를 중지한 후, 위젯을 감싸는 Svelte 컴포넌트를 생성합니다.
1단계. 패키지 설치
Booking 평가판 패키지를 다운로드하고 패키지 README의 단계를 따르세요. 평가판 버전은 30일간 활성화됩니다.
2단계. Booking 컴포넌트 생성
src/ 디렉토리에 Booking.svelte 파일을 생성하고, 아래 단계를 완료하여 위젯을 연결합니다.
소스 파일 가져오기
배포 방식에 맞는 경로로 Booking 클래스와 스타일시트를 가져옵니다:
- dhx-booking-package — 로컬 폴더에서 설치된 PRO 버전
- @dhx/trial-booking — 평가판 버전
다음 코드 스니펫은 PRO 패키지에서 Booking을 가져옵니다:
<script>
import { Booking } from 'dhx-booking-package';
import 'dhx-booking-package/dist/booking.css';
</script>
PRO 패키지에 최소화된 에셋이 포함된 경우, CSS 파일을 booking.min.css로 가져옵니다.
다음 코드 스니펫은 평가판 패키지에서 Booking을 가져옵니다:
<script>
import { Booking } from '@dhx/trial-booking';
import '@dhx/trial-booking/dist/booking.css';
</script>
이 튜토리얼은 Booking 평가판 버전을 사용합니다.
컨테이너 설정 및 Booking 초기화
bind:this로 호스트 컨테이너를 바인딩하고 onMount() 안에서 Booking을 인스턴스화합니다. Svelte가 컴포넌트를 제거할 때 위젯을 언마운트하려면 onDestroy()에서 destructor()를 호출합니다.
다음 코드 스니펫은 바인딩된 컨테이너와 라이프사이클 훅을 포함한 Booking 컴포넌트를 선언합니다:
<script>
import { onMount, onDestroy } from "svelte";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
let container; // Booking의 호스트 컨테이너
let booking;
onMount(() => {
// Booking 인스턴스 생성
booking = new Booking(container, {})
});
onDestroy(() => {
booking.destructor(); // Booking 언마운트
});
</script>
<div bind:this={container} class="widget"></div>
스타일 추가
Booking에는 위젯 스타 일시트(위에서 가져온)와 크기가 지정된 컨테이너가 모두 필요합니다. 프로젝트의 메인 CSS 파일에서 페이지와 위젯 컨테이너에 전체 높이를 설정합니다.
다음 코드 스니펫은 페이지와 Booking 컨테이너에 전체 높이를 설정합니다:
/* 페이지 스타일; #app 루트 컨테이너 사용 */
html,
body,
#app {
height: 100%;
padding: 0;
margin: 0;
}
/* Booking 컨테이너 */
.widget {
height: 100%;
}
데이터 로드
Booking에 카드 데이터를 로드하려면 data 속성과 일치하는 데이터셋을 준비합니다. 전체 데이터 형식과 로딩 시나리오는 데이터 로딩 가이드를 참조하세요.
src/ 디렉토리에 data.js 파일을 생성합니다.
다음 코드 스니펫은 샘플 데이터셋을 반환하는 getData() 헬퍼를 정의합니다:
export function getData() {
function getDate(addDays, hoursValue = 0, minutesValue = 0) {
const date = new Date();
const secondsValue = 0; // 분 단위로 반올림
const msValue = 0;
date.setDate(date.getDate() + addDays);
date.setHours(hoursValue, minutesValue, secondsValue, msValue);
return date.getTime();
}
return [
{
id: "ee828b5d-a034-420c-889b-978840015d6a",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "$35",
review: {
stars: 4,
count: 120
},
slots: [
{
from: 9,
to: 20,
days: [1, 2, 3, 4, 5]
},
{
from: 10,
to: 18,
days: [6, 0]
}
]
},
{
id: "9b037564-77be-429f-b719-eebbe499027a",
title: "Emma Johnson",
category: "Cardiologist",
subtitle: "2 years of experience",
details: "Stanford Health Care\n1468 Madison Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/03.jpg",
price: "$25",
review: {
stars: 5,
count: 10
},
slots: [
{
from: 14,
to: 17,
size: 30,
gap: 10
},
{
from: 12,
to: 19,
size: 50,
gap: 20,
days: [2],
dates: [getDate(0)]
},
{
from: "18:30",
to: 20,
size: 20,
gap: 20,
days: [3, 4, 5]
}
],
usedSlots: [getDate(0, 12), getDate(0, 18)]
},
// ...
];
}
App.svelte를 열고, 데이터셋을 가져온 후 <Booking/> 컴포넌트에 prop으로 전달합니다.
다음 코드 스니펫은 data prop을 포함한 Booking 컴포넌트를 렌더링합니다:
<script>
import Booking from "./Booking.svelte";
import { getData } from "./data.js";
const dataset = getData();
</script>
<Booking data={dataset} />
Booking.svelte를 열고 data prop을 Booking 구성에 전달합니다.
다음 코드 스니펫은 prop을 Booking 생성자에 연결합니다:
<script>
import { onMount, onDestroy } from "svelte";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
export let data;
let container;
let booking;
onMount(() => {
booking = new Booking(container, {
data
})
});
onDestroy(() => {
booking.destructor();
});
</script>
<div bind:this={container} class="widget"></div>
이제 Booking 컴포넌트가 로드된 데이터와 함께 렌더링됩니다. 위젯을 추가로 커스터마이즈하려면 추가 구성 속성을 전달하세요. 전체 목록은 속성 개요를 참조하세요.
이벤트 처리
위젯에서 사용자 액션이 발생하면 이벤트가 트리거됩니다. booking.api.on(eventName, handler)를 사용하여 이벤트를 구독하고 액션에 반응합니다. 전체 이벤트 목록은 이벤트 개요를 참조하세요.
Booking.svelte를 열고 onMount()에 이벤트 구독을 추가합니다.
다음 코드 스니펫은 사용자가 슬롯을 선택할 때 슬롯 ID를 로그에 출력합니다:
<script>
// ...
let booking;
onMount(() => {
booking = new Booking(container, {})
// 선택된 슬롯 id를 로그에 출력
booking.api.on("select-slot", (obj) => {
console.log(obj.id);
});
});
onDestroy(() => {
booking.destructor();
});
</script>
// ...
앱을 시작하면 페이지에 데이터가 로드된 Booking을 확인할 수 있습니다.
프로젝트 요구 사항에 맞게 코드를 커스터마이즈하세요. 완전한 참조 구현은 GitHub에서 확인할 수 있습니다.