// next.config.ts
const nextConfig: NextConfig = {
  async rewrites() {
    return [{
      source: "/api/:path*",
      destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
    }];
  },
};

/* globals.css */
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --flopi-bg: #f8fafc;
  --flopi-card: rgba(255,255,255,0.85);
  --flopi-primary: #059669;
  --flopi-text: #1f2937;
}
.dark {
  --flopi-bg: #030712;
  --flopi-card: rgba(17,24,39,0.6);
  --flopi-primary: #10b981;
  --flopi-text: #f3f4f6;
}

.glass-card {
  background: var(--flopi-card);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--flopi-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

// lib/constants.ts
export const ICON_MAP: Record<string, LucideIcon> = {
  dashboard: LayoutDashboard,
  warning: AlertTriangle,
  sensors: Gauge,
  chat: MessageSquare,
  storage: Database,
  // ... 25개+ 매핑
};

"use client";

import { useEffect, useState } from "react";
import GlassCard from "@/components/GlassCard";
import EmptyState from "@/components/EmptyState";

export default function MyPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/my-endpoint")
      .then(res => res.json())
      .then(setData)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <Spinner />;

  return (
    <div className="space-y-6 animate-in">
      <h1 className="text-xl font-bold"
          style={{ color: "var(--flopi-text)" }}>
        페이지 제목
      </h1>
      <GlassCard>
        {data ? <Content /> : <EmptyState message="데이터 없음" />}
      </GlassCard>
    </div>
  );
}

# 의존성 설치
cd FLOPI/frontend && npm install

# 개발 서버 (포트 18081, Turbopack)
npm run dev

# 빌드 검증
npm run build

# 프로덕션 실행
npm run start