시작하기

HUA Labs 패키지로 빠르게 시작하는 방법을 알아보세요.

1. 패키지 선택

프로젝트에 맞는 패키지를 선택하세요. 빠른 시작을 원하면 hua-ux를 추천합니다.

@hua-labs/hua-ux

2. 설치

npm, yarn, 또는 pnpm으로 패키지를 설치하세요.

npmnpm install @hua-labs/hua-ux

yarnyarn add @hua-labs/hua-ux

pnpmpnpm add @hua-labs/hua-ux

3. 설정

프로젝트 루트에 설정 파일을 생성하세요.

// hua-ux.config.ts
import { defineConfig } from '@hua-labs/hua-ux/framework/config';

export default defineConfig({
  branding: {
    name: 'My App',
    colors: {
      primary: 'hsl(220 90% 56%)',
    },
  },
  i18n: {
    defaultLanguage: 'en',
    supportedLanguages: ['en', 'ko'],
  },
});

4. 레이아웃 설정

앱의 루트 레이아웃에 HuaUxLayout을 추가하세요.

// app/layout.tsx
import { HuaUxLayout } from '@hua-labs/hua-ux/framework';
import config from '../hua-ux.config';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <HuaUxLayout config={config}>
          {children}
        </HuaUxLayout>
      </body>
    </html>
  );
}

5. 컴포넌트 사용

이제 컴포넌트와 훅을 사용할 수 있습니다!

// app/page.tsx
'use client';

import { Button, Card, useMotion, useTranslation } from '@hua-labs/hua-ux';

export default function Page() {
  const { t } = useTranslation();
  const motion = useMotion({ type: 'fadeIn' });

  return (
    <div ref={motion.ref} style={motion.style}>
      <Card>
        <h1>{t('common:welcome')}</h1>
        <Button>Click me</Button>
      </Card>
    </div>
  );
}

다음 단계

CLI로 더 빠르게 시작하기

create-hua-ux CLI를 사용하면 모든 설정이 완료된 프로젝트를 바로 시작할 수 있습니다.

npx create-hua-ux my-app