@hua-labs/hua-ux

v0.1.0-alpha.12

Framework

SSR

UI + Motion + i18n을 한 번에 제공하는 React 프레임워크. 더 빠르게 UX를 구축하세요.

$npm install @hua-labs/hua-ux

주요 기능

UI 컴포넌트 통합

@hua-labs/ui의 모든 컴포넌트를 브랜딩 시스템과 함께 제공합니다. BrandedButton, BrandedCard 등 자동으로 브랜드 색상이 적용됩니다.

모션 & 애니메이션

@hua-labs/motion-core의 모든 애니메이션 훅을 제공합니다. useMotion, usePageTransition 등으로 쉽게 애니메이션을 적용할 수 있습니다.

국제화 (i18n)

@hua-labs/i18n-core를 기반으로 SSR/CSR 모두 지원하며, 깜박임 없는 언어 전환을 제공합니다.

상태 관리

@hua-labs/state와 통합된 Zustand 기반 상태 관리. SSR 호환 및 영속화를 지원합니다.

빠른 시작

1. 설정 파일 생성

typescript

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

export default defineConfig({
  preset: 'product',
  i18n: {
    defaultLanguage: 'ko',
    supportedLanguages: ['ko', 'en'],
    namespaces: ['common'],
    translationLoader: 'static',
  },
  branding: {
    name: 'My App',
    colors: {
      primary: '#6366F1',
      secondary: '#8B5CF6',
    },
  },
});

2. 레이아웃 설정

tsx

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

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

  return (
    <html>
      <body>
        <HuaUxLayout config={{ ...config, i18n: { ...config.i18n, initialTranslations: translations } }}>
          {children}
        </HuaUxLayout>
      </body>
    </html>
  );
}

3. 컴포넌트 사용

tsx

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

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

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

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

Exports

Import Path	설명
@hua-labs/hua-ux	UI 컴포넌트, 훅, 유틸리티
@hua-labs/hua-ux/framework	프레임워크 레이어 (HuaUxLayout, useMotion 등)
@hua-labs/hua-ux/framework/server	서버 사이드 유틸리티 (getSSRTranslations)
@hua-labs/hua-ux/framework/config	설정 유틸리티 (defineConfig, setConfig)
@hua-labs/hua-ux/presets	프리셋 (product, marketing)
@hua-labs/hua-ux/framework/seo/geo	AI 검색엔진 최적화 (GEO)

내부 의존성

@hua-labs/ui

@hua-labs/motion-core

@hua-labs/i18n-core

@hua-labs/i18n-core-zustand

@hua-labs/state

외부 의존성

react

zustand