당장은 이렇게만 설정하면 됨
// package.json
{
"name": "pop-up-journey",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroui/react": "2.8.0-beta.6",
"framer-motion": "^12.15.0",
"next": "15.3.2",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.3.2",
"tailwindcss": "^4",
"typescript": "^5"
},
"pnpm": {
"onlyBuiltDependencies": [
"@heroui/shared-utils",
"@tailwindcss/oxide",
"sharp",
"unrs-resolver"
]
}
}//postcss.config.mjs
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;/* global.css */
@import "tailwindcss";
@plugin "./hero.ts";
/* // Note: You may need to change the path to fit your project structure */
@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";
@custom-variant dark (&:is(.dark *));
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}// hero.ts
import { heroui } from "@heroui/react";
export default heroui();
// provider.tsx
// app/providers.tsx
"use client";
import { HeroUIProvider } from "@heroui/react";
export function Providers({ children }: { children: React.ReactNode }) {
return <HeroUIProvider>{children}</HeroUIProvider>;
}// provider.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="dark">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Providers>{children}</Providers>
</body>
</html>
);
}// page.tsx
"use client";
import { Button } from "@heroui/react";
export default function Page() {
return (
<div className="flex items-center justify-center h-screen gap-10">
<Button color="primary">Button</Button>
<Button color="warning">Button</Button>
<Button color="primary">Button</Button>
</div>
);
}
Improvise, Adapt, Overcome