Guides

프레임워크 어댑터

EOND UI는 HTML 클래스만으로 동작하는 게 기본이지만, Svelte·React·Vue에서 컴포넌트로 조립하고 싶을 때를 위한 어댑터 뼈대를 제공합니다. 저장소의 eondui/adapters/ 디렉토리에서 프로젝트로 복사해 쓰는 방식입니다 (shadcn/ui와 같은 복사-소유 철학).

원칙: 어댑터는 껍데기

스타일은 전부 eondui.css의 .e-* 클래스가 소유합니다. 어댑터는 props를 클래스 문자열로 바꿔줄 뿐이라, 세 프레임워크 어느 쪽에서 만들어도 렌더 결과 HTML이 완전히 같습니다. 새 컴포넌트가 필요하면 CSS를 먼저 만들고 어댑터는 그 다음입니다 — 순서 거꾸로 금지.

공통 셋업 (한 번만)

// 앱 진입점 (main.js / +layout.svelte 등)에서 한 번
import '/static/el_design/eondui.css';   // 토큰 + .e-* 클래스
import '/static/el_design/eondui.js';    // window.EUI (토스트·모달·슬라이드)

Svelte

주력

eondui/adapters/svelte/ — Button · Badge · Card · Input · Modal · toast. Modal은 bind:open으로 Svelte 상태와 직접 연결되고, Input은 label/help/error를 한 컴포넌트로 묶었습니다.

<script>
  import { Button, Card, Badge, Input, Modal, toast } from '$lib/eondui';

  let open = false;
  let email = '';
</script>

<Card hover>
  <Badge color="accent">NEW</Badge>
  <h3>AI 업무 진단</h3>
  <Input label="이메일" bind:value={email} help="회사 메일을 권장합니다" />
  <Button variant="primary" size="lg" on:click={() => open = true}>신청하기</Button>
</Card>

<Modal bind:open title="신청 확인">
  입력하신 메일로 진단 결과를 보내드립니다.
  <svelte:fragment slot="foot">
    <Button variant="ghost" on:click={() => open = false}>취소</Button>
    <Button variant="primary" on:click={() => { open = false; toast('신청되었습니다', {type:'success'}); }}>확인</Button>
  </svelte:fragment>
</Modal>

React

eondui/adapters/react/ — 같은 컴포넌트 세트, TypeScript. Modal은 open/onClose, footer는 prop으로.

import { Button, Modal, toast } from '@/eondui';

<Button variant="primary" size="lg" onClick={() => setOpen(true)}>신청하기</Button>
<Modal open={open} onClose={() => setOpen(false)} title="신청 확인"
       footer={<Button variant="primary" onClick={confirm}>확인</Button>}>
  입력하신 메일로 진단 결과를 보내드립니다.
</Modal>

Vue 3

eondui/adapters/vue/ — script setup 기반. Modal은 v-model:open, footer는 #foot 슬롯.

<script setup>
import { Button, Modal, toast } from '@/eondui';
</script>

<Button variant="primary" size="lg" @click="open = true">신청하기</Button>
<Modal v-model:open="open" title="신청 확인">
  입력하신 메일로 진단 결과를 보내드립니다.
  <template #foot>
    <Button variant="primary" @click="confirm">확인</Button>
  </template>
</Modal>

뼈대에 없는 것

탭·콤보박스·슬라이드 등 나머지 컴포넌트는 어댑터 없이도 클래스(.e-tabs 등)와 data-eui-* 속성으로 그대로 동작합니다. 어댑터가 꼭 필요해지는 시점에 같은 패턴(props → 클래스)으로 하나씩 추가하세요. 전부 미리 만들어두지 않는 것이 의도입니다.