자주 묻는 질문

@import "tailwindcss";

/* Add this line to scan HUA UX package */
@source "../node_modules/@hua-labs/hua-ux/dist/**/*.{js,mjs}";

// Instead of useToast
import { useToastSafe } from '@hua-labs/hua-ux';

function MyComponent() {
  const { addToast } = useToastSafe();
  // Returns no-op functions when ToastProvider is not available
}

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

// Bad: Runs at module load (build time)
const client = createClient(process.env.API_URL);

// Good: Lazy initialization
function getClient() {
  return createClient(process.env.API_URL);
}

// Circular: package-a imports package-b, package-b imports package-a
import { SomeType } from '@hua-labs/package-b';

// Solution: Define locally
interface SomeType {
  // Define what you need
}

{
  "installCommand": "corepack enable && corepack use pnpm@10.24.0 && pnpm install --frozen-lockfile"
}

// File: translations/en/common.json
{
  "nav": {
    "home": "Home",
    "about": "About"
  },
  "buttons": {
    "save": "Save",
    "cancel": "Cancel"
  }
}

// Usage
t("common:nav.home")     // → "Home"
t("common:buttons.save") // → "Save"

// Staggered list animation
{items.map((item, index) => {
  const motion = useMotion({
    type: 'slideUp',
    duration: 400,
    delay: index * 100, // 100ms stagger
  });
  return <div ref={motion.ref} style={motion.style}>{item}</div>;
})}

// Scroll-triggered with threshold
const motion = useMotion({
  type: 'fadeIn',
  threshold: 0.2, // Trigger when 20% visible
});

export default defineConfig({
  branding: {
    name: 'My App',
    colors: {
      primary: '#0D9488',   // Main brand color
      secondary: '#14B8A6', // Secondary color
      accent: '#06B6D4',    // Accent color
    },
  },
});