@kurly-growth/growthman 0.1.12 → 0.1.14

package/CLAUDE.md

@@ -0,0 +1,58 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+```bash
+pnpm dev              # Start dev server (http://localhost:3100)
+pnpm dev:clean        # Reset DB with seed data and start dev server
+pnpm build            # Build for production
+pnpm lint             # Run ESLint
+pnpm db:seed          # Seed the database
+pnpm db:reset         # Reset database with migrations
+```
+
+## Architecture Overview
+
+This is a **Mock Server Dashboard** - a Next.js 16 application that allows users to create, manage, and serve mock API endpoints stored in PostgreSQL via Prisma.
+
+### Core Concept
+
+1. Users define mock endpoints (path, method, status code, response body) through a web UI
+2. These endpoints are stored in the `MockEndpoint` table
+3. Requests to `/api/mock/*` are dynamically matched against stored endpoints using `path-to-regexp`
+
+### Key Components
+
+- **`/app/api/mock/[...slug]/route.ts`** - Catch-all route that handles all mock requests. Matches incoming requests against stored endpoints using pattern matching (supports path parameters like `:id`)
+
+- **`/app/api/endpoints/`** - CRUD API for managing mock endpoints
+  - `route.ts` - GET (list all), POST (create)
+  - `[id]/route.ts` - PUT (update), DELETE
+  - `import/route.ts` - Bulk import from OpenAPI spec
+  - `sync/route.ts` - Sync endpoints with external spec
+
+- **`/lib/openapi-parser.ts`** - Parses OpenAPI 3.x specs and generates mock response data based on schema definitions. Handles `$ref`, `allOf`, `oneOf`, `anyOf`, and generates type-appropriate mock values.
+
+- **`/components/`** - React components for the dashboard UI
+  - `endpoint-table.tsx` - Display list of endpoints
+  - `endpoint-edit-dialog.tsx` - Create/edit endpoint with Monaco editor for JSON
+  - `openapi-upload-dialog.tsx` - Import endpoints from OpenAPI spec
+
+### Database Schema
+
+Single table `MockEndpoint` with unique constraint on `(path, method)`:
+- `path` - Express-style route (e.g., `/v1/users/:id`)
+- `method` - HTTP method
+- `statusCode` - Response status code
+- `responseBody` - JSON response data
+
+### Tech Stack
+
+- Next.js 16 (App Router)
+- React 19
+- Prisma with PostgreSQL
+- Tailwind CSS 4
+- Radix UI + shadcn/ui components
+- Monaco Editor for JSON editing

package/app/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Toaster } from "@/components/ui/sonner";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Growthman",
+  description: "Local mock API server with UI dashboard",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}

package/app/page.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { MockEndpoint } from '@/types/endpoint'
+import { EndpointTable } from '@/components/endpoint-table'
+import { EndpointEditDialog } from '@/components/endpoint-edit-dialog'
+import { OpenAPIUploadDialog } from '@/components/openapi-upload-dialog'
+import { ApiTestDialog } from '@/components/api-test-dialog'
+import { Button } from '@/components/ui/button'
+import { toast } from 'sonner'
+
+export default function Home() {
+  const [endpoints, setEndpoints] = useState<MockEndpoint[]>([])
+  const [loading, setLoading] = useState(true)
+  const [editDialogOpen, setEditDialogOpen] = useState(false)
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false)
+  const [testDialogOpen, setTestDialogOpen] = useState(false)
+  const [selectedEndpoint, setSelectedEndpoint] = useState<MockEndpoint | null>(null)
+  const [testEndpoint, setTestEndpoint] = useState<MockEndpoint | null>(null)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [baseUrl, setBaseUrl] = useState('')
+  const [lastModifiedId, setLastModifiedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    setBaseUrl(window.location.origin)
+  }, [])
+
+  const fetchEndpoints = useCallback(async () => {
+    try {
+      const response = await fetch('/api/endpoints')
+      const data = await response.json()
+      setEndpoints(data)
+    } catch (error) {
+      console.error('Failed to fetch endpoints:', error)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchEndpoints()
+  }, [fetchEndpoints])
+
+  const handleEdit = (endpoint: MockEndpoint) => {
+    setSelectedEndpoint(endpoint)
+    setEditDialogOpen(true)
+  }
+
+  const handleCreate = () => {
+    setSelectedEndpoint(null)
+    setEditDialogOpen(true)
+  }
+
+  const handleTest = (endpoint: MockEndpoint) => {
+    setTestEndpoint(endpoint)
+    setTestDialogOpen(true)
+  }
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this endpoint?')) return
+
+    try {
+      const response = await fetch(`/api/endpoints/${id}`, { method: 'DELETE' })
+      if (!response.ok) throw new Error('Failed to delete')
+      setSelectedIds((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(id)
+        return newSet
+      })
+      toast.success('Endpoint deleted successfully')
+      fetchEndpoints()
+    } catch (error) {
+      console.error('Failed to delete endpoint:', error)
+      toast.error('Failed to delete endpoint')
+    }
+  }
+
+  const handleBulkDelete = async () => {
+    if (selectedIds.size === 0) return
+    if (!confirm(`Are you sure you want to delete ${selectedIds.size} endpoint(s)?`)) return
+
+    try {
+      const response = await fetch('/api/endpoints/bulk', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ids: Array.from(selectedIds) }),
+      })
+      if (!response.ok) throw new Error('Failed to delete')
+      const count = selectedIds.size
+      setSelectedIds(new Set())
+      toast.success(`${count} endpoint(s) deleted successfully`)
+      fetchEndpoints()
+    } catch (error) {
+      console.error('Failed to delete endpoints:', error)
+      toast.error('Failed to delete endpoints')
+    }
+  }
+
+  const handleSave = async (endpoint: Partial<MockEndpoint> & { id?: string }) => {
+    try {
+      const isUpdate = !!endpoint.id
+      const response = isUpdate
+        ? await fetch(`/api/endpoints/${endpoint.id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(endpoint),
+          })
+        : await fetch('/api/endpoints', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(endpoint),
+          })
+
+      if (!response.ok) {
+        const data = await response.json()
+        throw new Error(data.error || 'Failed to save')
+      }
+
+      const savedEndpoint = await response.json()
+      setLastModifiedId(savedEndpoint.id)
+      toast.success(isUpdate ? 'Endpoint updated successfully' : 'Endpoint created successfully')
+      fetchEndpoints()
+    } catch (error) {
+      console.error('Failed to save endpoint:', error)
+      toast.error(error instanceof Error ? error.message : 'Failed to save endpoint')
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Growthman</h1>
+            <p className="mt-1 text-gray-500">
+              Manage your mock API endpoints
+            </p>
+            {baseUrl && (
+              <p className="mt-2 text-sm font-mono bg-gray-100 px-3 py-1.5 rounded-md inline-block">
+                {baseUrl}/api/mock
+              </p>
+            )}
+          </div>
+          <div className="flex gap-3">
+            <Button variant="outline" onClick={() => setUploadDialogOpen(true)}>
+              Import OpenAPI
+            </Button>
+            <Button onClick={handleCreate}>
+              + New Endpoint
+            </Button>
+          </div>
+        </div>
+
+        {selectedIds.size > 0 && (
+          <div className="mb-4 flex items-center gap-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+            <span className="text-sm text-blue-800">
+              {selectedIds.size} endpoint(s) selected
+            </span>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleBulkDelete}
+            >
+              Delete Selected
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setSelectedIds(new Set())}
+            >
+              Clear Selection
+            </Button>
+          </div>
+        )}
+
+        <div className="bg-white shadow rounded-lg">
+          {loading ? (
+            <div className="p-8 text-center text-gray-500">Loading...</div>
+          ) : (
+            <EndpointTable
+              endpoints={endpoints}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              onTest={handleTest}
+              selectedIds={selectedIds}
+              onSelectionChange={setSelectedIds}
+              lastModifiedId={lastModifiedId}
+            />
+          )}
+        </div>
+      </div>
+
+      <EndpointEditDialog
+        endpoint={selectedEndpoint}
+        open={editDialogOpen}
+        onOpenChange={setEditDialogOpen}
+        onSave={handleSave}
+      />
+
+      <OpenAPIUploadDialog
+        open={uploadDialogOpen}
+        onOpenChange={setUploadDialogOpen}
+        onImportComplete={fetchEndpoints}
+      />
+
+      <ApiTestDialog
+        endpoint={testEndpoint}
+        open={testDialogOpen}
+        onOpenChange={setTestDialogOpen}
+      />
+    </div>
+  )
+}

package/bin/cli.js

@@ -22,11 +22,48 @@ const env = {
   DATABASE_URL: `file:${dbPath}`,
 };
 
+// CLI 바이너리 경로 찾기
+function getBinPath(packageName, binName) {
+  try {
+    const pkgJsonPath = require.resolve(`${packageName}/package.json`, {
+      paths: [packageDir],
+    });
+    const pkgDir = path.dirname(pkgJsonPath);
+    const pkgJson = require(pkgJsonPath);
+
+    let binRelPath;
+    if (typeof pkgJson.bin === 'string') {
+      binRelPath = pkgJson.bin;
+    } else if (pkgJson.bin && pkgJson.bin[binName]) {
+      binRelPath = pkgJson.bin[binName];
+    }
+
+    if (binRelPath) {
+      return path.join(pkgDir, binRelPath);
+    }
+  } catch (e) {
+    // fallback to node_modules/.bin
+  }
+  return path.join(packageDir, 'node_modules', '.bin', binName);
+}
+
 // DB가 없으면 생성
 if (!fs.existsSync(dbPath)) {
   console.log('Initializing database...');
-  const prismaPath = path.join(packageDir, 'node_modules', '.bin', 'prisma');
-  execSync(`"${prismaPath}" db push`, {
+  const prismaPath = getBinPath('prisma', 'prisma');
+  execSync(`node "${prismaPath}" db push`, {
+    cwd: packageDir,
+    stdio: 'inherit',
+    env,
+  });
+}
+
+// .next 폴더가 없으면 빌드
+const nextDir = path.join(packageDir, '.next');
+if (!fs.existsSync(nextDir)) {
+  console.log('Building application (first run)...');
+  const nextPath = getBinPath('next', 'next');
+  execSync(`node "${nextPath}" build`, {
     cwd: packageDir,
     stdio: 'inherit',
     env,
@@ -39,8 +76,8 @@ const url = `http://localhost:${port}`;
 console.log(`Database: ${dbPath}`);
 console.log(`Starting mock server at ${url}`);
 
-const nextPath = path.join(packageDir, 'node_modules', '.bin', 'next');
-const server = spawn(nextPath, ['start', '-p', String(port)], {
+const nextPath = getBinPath('next', 'next');
+const server = spawn('node', [nextPath, 'start', '-p', String(port)], {
   cwd: packageDir,
   stdio: 'inherit',
   env,