프로젝트 구조

배우기

HUA UX 프로젝트의 권장 폴더 구조와 파일 배치

기본 구조

app/— Next.js App Router 페이지
layout.tsx— UnifiedProviders가 있는 루트 레이아웃
page.tsx— 홈 페이지
api/— API 라우트
translations/[lang]/route.ts— 번역 API 엔드포인트
components/— 공유 컴포넌트
layout/— 레이아웃 컴포넌트
Header.tsx
Footer.tsx
Sidebar.tsx
ui/— 커스텀 UI 컴포넌트
lib/— 유틸리티 및 헬퍼
translations/— 번역 파일
en.json
ko.json
hua.config.ts
tailwind.config.ts— Tailwind CSS 설정

핵심 파일

hua.config.ts

프로젝트 전체 설정을 정의하는 중앙 설정 파일입니다.

typescript

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

export default defineConfig({
  branding: {
    name: "My App",
    primaryColor: "#6366f1",
  },
  i18n: {
    defaultLanguage: "en",
    supportedLanguages: ["en", "ko"],
  },
  motion: {
    reducedMotion: "user",
    defaultDuration: 300,
  },
});

app/layout.tsx

UnifiedProviders로 앱 전체를 감싸는 루트 레이아웃입니다.

typescript

// app/layout.tsx
import { UnifiedProviders } from "@hua-labs/hua/framework";
import config from "../hua.config";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <UnifiedProviders config={config}>
          {children}
        </UnifiedProviders>
      </body>
    </html>
  );
}

모범 사례

컴포넌트 분리

레이아웃 컴포넌트는 components/layout/, 기능 컴포넌트는 components/features/에 배치

번역 파일 관리

public/translations/ (static) 또는 lib/translations/ (API loader)에 배치

설정 파일

hua.config.ts는 프로젝트 루트에 배치

API 라우트

번역 API는 app/api/translations/[lang]/route.ts에 구현