Getting Started

Runtime Setup

DialogRuntime과 Toaster를 앱 루트에 mount해 dialog와 toast runtime을 연결하는 방법을 안내합니다.

import { DialogRuntime } from '@woon-ui/dialog'
import { Toaster } from '@woon-ui/toast'

개요

Runtime Setup은 명령형 API를 실제 React 트리에 연결하는 단계입니다. Woon은 더 이상 provider나 plugin을 요구하지 않고, 필요한 runtime만 앱 루트에 직접 mount합니다.

useDialog(), alert(), confirm()에는 DialogRuntime
toast()에는 Toaster
둘은 독립적이므로 사용하는 쪽만 mount

상세 API는 각 기능 문서에서 확인하세요.

DialogRuntime props: Dialog
Toaster props: Toast

Dialog Runtime

Dialog 계열 API를 쓴다면 앱 루트에 DialogRuntime을 한 번 배치합니다.

import { DialogRuntime } from '@woon-ui/dialog'

export function AppRoot() {
  return (
    <>
      <App />
      <DialogRuntime />
    </>
  )
}

DialogRuntime은 dialog runtime mount이며 zIndex, scrollTarget, components 같은 앱 전역 기본값을 정의할 수 있습니다.

Toast Runtime

Toast를 쓴다면 앱 루트에 Toaster를 한 번 배치합니다.

import { Toaster } from '@woon-ui/toast'
import { Toast } from '@/woon/ui/toast' // or your configured ui path

export function AppRoot() {
  return (
    <>
      <App />
      <Toaster position="bottom-right" render={Toast} />
    </>
  )
}

CLI로 생성한 local Toast wrapper를 쓰고 있다면 render={Toast}를 함께 넘기면 됩니다. Toaster는 toast runtime mount이며 position, maxVisible, zIndex, render로 기본 동작과 UI를 제어합니다.

함께 설정하기

Dialog와 Toast를 같이 쓴다면 둘을 나란히 두면 됩니다.

import { DialogRuntime } from '@woon-ui/dialog'
import { Toaster } from '@woon-ui/toast'
import { Toast } from '@/woon/ui/toast'

export function AppRoot() {
  return (
    <>
      <App />
      <DialogRuntime />
      <Toaster position="bottom-right" render={Toast} />
    </>
  )
}

어디에 둘까

보통은 앱 루트의 마지막에 두는 것이 가장 단순합니다. 기존에 Providers 같은 래퍼 컴포넌트를 두고 있다면 그 안에 배치해도 괜찮지만, Woon 전용 provider를 만들 필요는 없습니다.

import { DialogRuntime } from '@woon-ui/dialog'
import { Toaster } from '@woon-ui/toast'
import { Toast } from '@/woon/ui/toast'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <DialogRuntime />
      <Toaster position="bottom-right" render={Toast} />
    </>
  )
}

핵심은 “전역에서 한 번만 mount”라는 점입니다.

Migration

import { WoonProvider, dialogPlugin, toastPlugin } from '@woon-ui/react'

export function AppRoot() {
  return (
    <WoonProvider plugins={[dialogPlugin(), toastPlugin()]}>
      <App />
    </WoonProvider>
  )
}

이후:

import { DialogRuntime } from '@woon-ui/dialog'
import { Toaster } from '@woon-ui/toast'
import { Toast } from '@/woon/ui/toast'

export function AppRoot() {
  return (
    <>
      <App />
      <DialogRuntime />
      <Toaster position="bottom-right" render={Toast} />
    </>
  )
}

권장 import도 기능별 패키지 기준으로 맞추면 문서와 예제가 그대로 맞아떨어집니다.

ModalRoot를 이미 사용 중이었다면 이름만 DialogRuntime으로 바꾸면 됩니다.