@mycrm-ui/react

공통 React 컴포넌트 모음입니다. Portal과 ErrorBoundary를 제공합니다.

import { Portal, ErrorBoundary } from '@mycrm-ui/react'

// Portal: 특정 DOM 노드에 자식을 렌더링
<Portal container={document.body}>
  <Modal />
</Portal>

// ErrorBoundary: 컴포넌트 에러 경계
<ErrorBoundary
  fallback={(error) => <div>오류 발생: {error.message}</div>}
  onError={(error, info) => console.error(error, info)}
>
  <App />
</ErrorBoundary>

테마와 로케일을 관리하는 Provider/Hook 쌍을 제공합니다.

import { ThemeProvider, useTheme, LocaleProvider, useLocale } from '@mycrm-ui/react'

// 테마
<ThemeProvider defaultTheme="light">
  <App />
</ThemeProvider>

function MyComponent() {
  const { theme, setTheme } = useTheme()
  return <button onClick={() => setTheme('dark')}>다크 모드</button>
}

// 로케일
<LocaleProvider defaultLocale="ko-KR">
  <App />
</LocaleProvider>

function MyComponent() {
  const { locale, setLocale } = useLocale()
}

디바운스, 외부 클릭 감지, 크기 관찰 등 재사용 가능한 커스텀 훅입니다.

import { useDebounce, useClickOutside, useResizeObserver, useId } from '@mycrm-ui/react'

// 값 디바운스
const debouncedSearch = useDebounce(searchTerm, 300)

// 외부 클릭 감지
const ref = useRef<HTMLDivElement>(null)
useClickOutside(ref, () => setOpen(false))

// 엘리먼트 크기 감지
const size = useResizeObserver(ref)  // { width, height } | null

// 고유 ID 생성
const id = useId('input')  // 'input-abc123'