문서
시작하기
5분 안에 HUA UX를 시작해보세요. 이 가이드는 설치, 설정, 그리고 첫 번째 컴포넌트를 안내합니다.
사전 요구사항
시작하기 전에 다음이 준비되어 있어야 합니다:
- Node.js 18.17 이상
- Next.js 14 이상 (App Router 권장)
- React 18 이상
- pnpm, npm, 또는 yarn
1
HUA UX 설치
hua-ux 패키지와 필수 의존성을 설치하세요.
pnpm add @hua-labs/hua-ux
# or with npm
npm install @hua-labs/hua-ux
# or with yarn
yarn add @hua-labs/hua-ux2
설정 파일 생성
프로젝트 루트에 hua-ux.config.ts를 생성하세요. 필요에 맞는 프리셋을 선택하세요.
typescript
// hua-ux.config.ts
import { defineConfig } from '@hua-labs/hua-ux/framework/config';
export default defineConfig({
// 'product' for dashboards/apps, 'marketing' for landing pages
preset: 'product',
// Optional: Multi-language support
i18n: {
defaultLanguage: 'ko',
supportedLanguages: ['ko', 'en', 'ja'],
namespaces: ['common', 'home'],
translationLoader: 'static',
},
// Optional: Custom branding
branding: {
name: 'My App',
colors: {
primary: '#8b5cf6',
secondary: '#3b82f6',
},
},
});3
루트 레이아웃 설정
루트 레이아웃 파일에서 앱을 HuaUxLayout으로 감싸세요.
tsx
// app/layout.tsx
import { HuaUxLayout } from '@hua-labs/hua-ux/framework';
import { setConfig } from '@hua-labs/hua-ux/framework/config';
import huaUxConfig from '../hua-ux.config';
import './globals.css';
// Initialize config on server
setConfig(huaUxConfig);
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko" suppressHydrationWarning>
<body>
<HuaUxLayout config={huaUxConfig}>
{children}
</HuaUxLayout>
</body>
</html>
);
}4
Tailwind CSS 추가
Tailwind CSS v4가 설정되어 있는지 확인하세요. HUA UX는 스타일링을 위해 Tailwind를 사용합니다.
css
/* globals.css */
@import "tailwindcss";
/* Tailwind v4: Scan HUA UX packages for classes */
@source "../node_modules/@hua-labs/hua-ux/dist/**/*.{js,mjs}";
/* Gradient text utility */
.gradient-text {
background: linear-gradient(135deg, var(--hua-primary), var(--hua-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Tailwind v4: @source 지시어는 Tailwind에게 HUA UX 패키지의 클래스를 스캔하도록 알립니다. 모노레포 설정이나 node_modules 패키지를 사용할 때 필요합니다.
5
첫 번째 페이지 생성
HUA UX 컴포넌트와 훅을 사용하여 페이지를 만드세요.
tsx
// app/page.tsx
"use client";
import { Button, Card, Container, useTranslation } from '@hua-labs/hua-ux';
import { useMotion, useBranding } from '@hua-labs/hua-ux/framework';
export default function HomePage() {
const { t } = useTranslation();
const branding = useBranding();
const motion = useMotion({
type: 'slideUp',
duration: 800,
delay: 100,
});
return (
<Container className="py-24 text-center">
<div ref={motion.ref} style={motion.style}>
<h1 className="text-4xl font-bold mb-4">
Welcome to {branding?.name || 'My App'}
</h1>
<p className="text-muted-foreground mb-8">
Built with HUA UX Framework
</p>
<Button size="lg">
{t('common:buttons.getStarted')}
</Button>
</div>
</Container>
);
}