Skip to content
Docs
패키지 목록

@hua-labs/hua

v1.1.0
Framework
SSR

Framework bundle for UI, motion, i18n, loaders, formatters, state, hooks, and dot.

$npm install @hua-labs/hua

주요 기능

UI 컴포넌트 통합

hua-ui의 50+ 컴포넌트를 추가 설정 없이 바로 사용할 수 있습니다.

모션 & 애니메이션

motion-core의 15+ 애니메이션 훅이 기본 내장되어 있습니다.

국제화 (i18n)

i18n-core 기반의 SSR 완벽 지원, 깜박임 없는 다국어 처리를 제공합니다.

상태 관리

Zustand 기반의 SSR 안전한 상태 관리를 기본 제공합니다.

빠른 시작

1. 설정 파일 생성

typescript
// hua.config.ts
import { defineConfig } from '@hua-labs/hua/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 { HuaProvider } from '@hua-labs/hua/framework';
import { getSSRTranslations } from '@hua-labs/hua/framework/server';
import config from './hua.config';

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

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

3. 컴포넌트 사용

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

import { Button, Card } from '@hua-labs/hua';
import { useTranslation } from '@hua-labs/i18n-core';
import { useMotion } from '@hua-labs/hua/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/huaUI 컴포넌트, 훅, 유틸리티
@hua-labs/hua/framework프레임워크 레이어 (HuaProvider, useMotion 등)
@hua-labs/hua/framework/shared서버/클라이언트 공용 (타입, GEO, metadata, CSS 변수 생성)
@hua-labs/hua/framework/server서버 전용 (getSSRTranslations, loadConfig) + shared re-export
@hua-labs/hua/framework/config설정 유틸리티 (defineConfig, setConfig)
@hua-labs/hua/presets프리셋 (product, marketing)
@hua-labs/hua/framework/seo/geoAI 검색엔진 최적화 (GEO)

내부 의존성

외부 의존성