설정

HUA UX는 매우 구성 가능합니다. 프리셋, 브랜딩, i18n, 모션 설정을 커스터마이징하는 방법을 배워보세요.

프리셋

프로젝트 유형에 맞는 프리셋으로 시작하세요.

product

빠르고 최소한의 애니메이션. 대시보드, 앱, 도구에 완벽합니다. 애니메이션: 200-400ms, 지연: 50-200ms.

marketing

극적이고 눈에 띄는 애니메이션. 랜딩 페이지에 완벽합니다. 애니메이션: 600-1000ms, 지연: 300-700ms.

기본 프리셋 선택

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

export default defineConfig({
  preset: 'product', // or 'marketing'
});

고급 프리셋 커스터마이징

export default defineConfig({
  preset: {
    type: 'product',
    motion: {
      duration: 300, // Override default duration
    },
    spacing: {
      default: 'lg', // 'sm' | 'md' | 'lg' | 'xl'
    },
  },
});

Branding

Customize your brand colors, logo, and typography.

export default defineConfig({
  preset: 'product',

  branding: {
    name: 'My Company',
    logo: '/logo.svg',
    colors: {
      primary: '#8b5cf6',    // Main brand color
      secondary: '#3b82f6',  // Secondary color
      accent: '#d946ef',     // Accent color
    },
    // Optional: Custom typography
    typography: {
      fontFamily: 'Inter, system-ui, sans-serif',
    },
  },
});

팁: 브랜딩 색상은 자동으로 CSS 변수로 변환되며 bg-primary, text-primary과 같은 Tailwind 클래스와 함께 사용할 수 있습니다.

다국어 지원 (i18n)

SSR로 다국어 지원을 설정하세요.

export default defineConfig({
  preset: 'product',

  i18n: {
    defaultLanguage: 'ko',
    supportedLanguages: ['ko', 'en', 'ja'],
    fallbackLanguage: 'en',

    // Namespace organization
    namespaces: ['common', 'home', 'about'],

    // Translation loading strategy
    translationLoader: 'static', // 'static' | 'api' | 'custom'

    // For 'api' loader
    translationApiPath: '/api/translations',

    // For 'custom' loader
    loadTranslations: async (lang, namespace) => {
      const res = await fetch(`/locales/${lang}/${namespace}.json`);
      return res.json();
    },
  },
});

번역 파일 구조

public/translations/
├── ko/
│   ├── common.json
│   └── home.json
├── en/
│   ├── common.json
│   └── home.json
└── ja/
    ├── common.json
    └── home.json

SSR 지원

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

export default async function RootLayout({ children }) {
  const initialTranslations = await getSSRTranslations(
    huaUxConfig,
    'public/translations'
  );

  const configWithSSR = {
    ...huaUxConfig,
    i18n: {
      ...huaUxConfig.i18n,
      initialTranslations,
    },
  };

  return (
    <html>
      <body>
        <HuaUxLayout config={configWithSSR}>
          {children}
        </HuaUxLayout>
      </body>
    </html>
  );
}

모션

애니메이션 동작 및 스타일을 구성하세요.

export default defineConfig({
  preset: 'product',

  motion: {
    // Motion style
    style: 'smooth', // 'smooth' | 'minimal' | 'dramatic'

    // Enable/disable animations
    enableAnimations: true,

    // Respect user's reduce motion preference
    respectReduceMotion: true,
  },
});

모션 타입

fadeIn

slideUp

slideLeft

slideRight

scaleIn

bounceIn

상태 관리

상태 지속성 및 SSR을 구성하세요.

export default defineConfig({
  preset: 'product',

  state: {
    // Persist state to localStorage
    persist: true,

    // SSR hydration support
    ssr: true,
  },
});

전체 설정 예제

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

export default defineConfig({
  preset: 'product',

  i18n: {
    defaultLanguage: 'ko',
    supportedLanguages: ['ko', 'en', 'ja'],
    namespaces: ['common', 'home', 'products', 'about'],
    translationLoader: 'static',
  },

  motion: {
    style: 'smooth',
    enableAnimations: true,
  },

  state: {
    persist: true,
    ssr: true,
  },

  branding: {
    name: 'HUA Labs',
    colors: {
      primary: '#8b5cf6',
      secondary: '#3b82f6',
      accent: '#d946ef',
    },
  },
});

SDUI API 레퍼런스