@kurly-growth/growthman 0.1.13 → 0.1.15

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/api/endpoints/[id]/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { validatePath, validateMethod, validateStatusCode } from '@/lib/validation'
+
+type RouteParams = {
+  params: Promise<{ id: string }>
+}
+
+// GET: 단일 엔드포인트 조회
+export async function GET(_request: NextRequest, { params }: RouteParams) {
+  const { id } = await params
+
+  const endpoint = await prisma.mockEndpoint.findUnique({
+    where: { id },
+  })
+
+  if (!endpoint) {
+    return NextResponse.json({ error: 'Endpoint not found' }, { status: 404 })
+  }
+
+  return NextResponse.json(endpoint)
+}
+
+// PUT: 엔드포인트 수정
+export async function PUT(request: NextRequest, { params }: RouteParams) {
+  const { id } = await params
+  const body = await request.json()
+  const { path, method, description, statusCode, responseBody } = body
+
+  if (path !== undefined && !validatePath(path)) {
+    return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+  }
+  if (method !== undefined && !validateMethod(method)) {
+    return NextResponse.json({ error: 'Invalid method' }, { status: 400 })
+  }
+  if (!validateStatusCode(statusCode)) {
+    return NextResponse.json({ error: 'Invalid status code' }, { status: 400 })
+  }
+
+  const endpoint = await prisma.mockEndpoint.update({
+    where: { id },
+    data: {
+      path,
+      method: method?.toUpperCase(),
+      description,
+      statusCode,
+      responseBody,
+    },
+  })
+
+  return NextResponse.json(endpoint)
+}
+
+// DELETE: 엔드포인트 삭제
+export async function DELETE(_request: NextRequest, { params }: RouteParams) {
+  const { id } = await params
+
+  await prisma.mockEndpoint.delete({
+    where: { id },
+  })
+
+  return NextResponse.json({ success: true })
+}

package/app/api/endpoints/bulk/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+
+// DELETE: 여러 엔드포인트 일괄 삭제
+export async function DELETE(request: NextRequest) {
+  const body = await request.json()
+  const { ids } = body
+
+  if (!Array.isArray(ids) || ids.length === 0) {
+    return NextResponse.json(
+      { error: 'ids must be a non-empty array' },
+      { status: 400 }
+    )
+  }
+
+  const result = await prisma.mockEndpoint.deleteMany({
+    where: {
+      id: { in: ids },
+    },
+  })
+
+  return NextResponse.json({ deleted: result.count })
+}

package/app/api/endpoints/import/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { Prisma } from '@/generated/prisma'
+import { prisma } from '@/lib/prisma'
+import { parseOpenAPISpec } from '@/lib/openapi-parser'
+
+export async function POST(request: NextRequest) {
+  const body = await request.json()
+  const { spec, pathPrefix } = body
+
+  // Handle both old format (spec directly) and new format ({ spec, pathPrefix })
+  const actualSpec = spec ?? body
+  const endpoints = parseOpenAPISpec(actualSpec)
+
+  // Apply path prefix if provided
+  const normalizedPrefix = pathPrefix ? pathPrefix.replace(/\/+$/, '') : ''
+  const processedEndpoints = endpoints.map((ep) => ({
+    ...ep,
+    path: normalizedPrefix ? `${normalizedPrefix}${ep.path}` : ep.path,
+  }))
+
+  if (processedEndpoints.length === 0) {
+    return NextResponse.json(
+      { error: 'No valid endpoints found in OpenAPI spec' },
+      { status: 400 }
+    )
+  }
+
+  const results = await Promise.allSettled(
+    processedEndpoints.map((ep) =>
+      prisma.mockEndpoint.upsert({
+        where: {
+          path_method: {
+            path: ep.path,
+            method: ep.method,
+          },
+        },
+        update: {
+          description: ep.description,
+          statusCode: ep.statusCode,
+          responseBody: ep.responseBody as Prisma.InputJsonValue,
+        },
+        create: {
+          path: ep.path,
+          method: ep.method,
+          description: ep.description,
+          statusCode: ep.statusCode,
+          responseBody: ep.responseBody as Prisma.InputJsonValue,
+        },
+      })
+    )
+  )
+
+  const created = results.filter((r) => r.status === 'fulfilled').length
+  const failed = results.filter((r) => r.status === 'rejected').length
+
+  return NextResponse.json({
+    message: `Imported ${created} endpoints`,
+    created,
+    failed,
+    total: processedEndpoints.length,
+  })
+}

package/app/api/endpoints/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { validatePath, validateMethod, validateStatusCode } from '@/lib/validation'
+
+// GET: 모든 엔드포인트 조회
+export async function GET() {
+  const endpoints = await prisma.mockEndpoint.findMany({
+    orderBy: { createdAt: 'desc' },
+  })
+  return NextResponse.json(endpoints)
+}
+
+// POST: 새 엔드포인트 생성
+export async function POST(request: NextRequest) {
+  const body = await request.json()
+  const { path, method, description, statusCode, responseBody } = body
+
+  if (!validatePath(path)) {
+    return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+  }
+  if (!validateMethod(method)) {
+    return NextResponse.json({ error: 'Invalid method' }, { status: 400 })
+  }
+  if (!validateStatusCode(statusCode)) {
+    return NextResponse.json({ error: 'Invalid status code' }, { status: 400 })
+  }
+
+  const endpoint = await prisma.mockEndpoint.create({
+    data: {
+      path,
+      method: method.toUpperCase(),
+      description,
+      statusCode: statusCode ?? 200,
+      responseBody,
+    },
+  })
+
+  return NextResponse.json(endpoint, { status: 201 })
+}

package/app/api/endpoints/sync/route.ts

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { Prisma } from '@/generated/prisma'
+import { prisma } from '@/lib/prisma'
+import { parseOpenAPISpec } from '@/lib/openapi-parser'
+
+export async function POST(request: NextRequest) {
+  const { url, pathPrefix } = await request.json()
+
+  if (!url) {
+    return NextResponse.json({ error: 'URL is required' }, { status: 400 })
+  }
+
+  // Normalize path prefix (remove trailing slashes)
+  const normalizedPrefix = pathPrefix ? pathPrefix.replace(/\/+$/, '') : ''
+
+  try {
+    // OpenAPI JSON 가져오기
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `Failed to fetch OpenAPI spec: ${response.statusText}` },
+        { status: 400 }
+      )
+    }
+
+    const spec = await response.json()
+    const endpoints = parseOpenAPISpec(spec)
+
+    // Apply path prefix if provided
+    const processedEndpoints = endpoints.map((ep) => ({
+      ...ep,
+      path: normalizedPrefix ? `${normalizedPrefix}${ep.path}` : ep.path,
+    }))
+
+    if (processedEndpoints.length === 0) {
+      return NextResponse.json(
+        { error: 'No valid endpoints found in OpenAPI spec' },
+        { status: 400 }
+      )
+    }
+
+    // Upsert로 새로 추가하거나 업데이트
+    const results = await Promise.allSettled(
+      processedEndpoints.map((ep) =>
+        prisma.mockEndpoint.upsert({
+          where: {
+            path_method: {
+              path: ep.path,
+              method: ep.method,
+            },
+          },
+          update: {
+            description: ep.description,
+            statusCode: ep.statusCode,
+            responseBody: ep.responseBody as Prisma.InputJsonValue,
+          },
+          create: {
+            path: ep.path,
+            method: ep.method,
+            description: ep.description,
+            statusCode: ep.statusCode,
+            responseBody: ep.responseBody as Prisma.InputJsonValue,
+          },
+        })
+      )
+    )
+
+    const succeeded = results.filter((r) => r.status === 'fulfilled').length
+    const failed = results.filter((r) => r.status === 'rejected').length
+
+    return NextResponse.json({
+      message: `Synced ${succeeded} endpoints`,
+      succeeded,
+      failed,
+      total: processedEndpoints.length,
+    })
+  } catch (error) {
+    console.error('Sync error:', error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Sync failed' },
+      { status: 500 }
+    )
+  }
+}

package/app/api/mock/[...slug]/route.ts

@@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { match } from 'path-to-regexp'
+import { prisma } from '@/lib/prisma'
+
+type RouteParams = {
+  params: Promise<{ slug: string[] }>
+}
+
+async function findMatchingEndpoint(requestPath: string, method: string) {
+  // DB에서 해당 method의 모든 엔드포인트 조회
+  const endpoints = await prisma.mockEndpoint.findMany({
+    where: { method },
+  })
+
+  // 정확히 일치하는 경로 먼저 확인
+  const exactMatch = endpoints.find((ep) => ep.path === requestPath)
+  if (exactMatch) {
+    return { endpoint: exactMatch, params: {} }
+  }
+
+  // path-to-regexp를 사용한 패턴 매칭
+  for (const endpoint of endpoints) {
+    try {
+      const matchFn = match(endpoint.path, { decode: decodeURIComponent })
+      const result = matchFn(requestPath)
+
+      if (result) {
+        return { endpoint, params: result.params }
+      }
+    } catch {
+      // 잘못된 패턴은 무시
+      continue
+    }
+  }
+
+  return null
+}
+
+async function handleRequest(request: NextRequest, { params }: RouteParams) {
+  const { slug } = await params
+  const requestPath = '/' + slug.join('/')
+  const method = request.method
+
+  const result = await findMatchingEndpoint(requestPath, method)
+
+  if (!result) {
+    return NextResponse.json(
+      { error: 'Endpoint not found', path: requestPath, method },
+      { status: 404 }
+    )
+  }
+
+  const { endpoint, params: pathParams } = result
+
+  // responseBody에 pathParams를 포함하여 반환 (선택적)
+  const responseData =
+    Object.keys(pathParams).length > 0
+      ? { ...endpoint.responseBody as object, _pathParams: pathParams }
+      : endpoint.responseBody
+
+  return NextResponse.json(responseData, { status: endpoint.statusCode })
+}
+
+export async function GET(request: NextRequest, context: RouteParams) {
+  return handleRequest(request, context)
+}
+
+export async function POST(request: NextRequest, context: RouteParams) {
+  return handleRequest(request, context)
+}
+
+export async function PUT(request: NextRequest, context: RouteParams) {
+  return handleRequest(request, context)
+}
+
+export async function PATCH(request: NextRequest, context: RouteParams) {
+  return handleRequest(request, context)
+}
+
+export async function DELETE(request: NextRequest, context: RouteParams) {
+  return handleRequest(request, context)
+}

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>
+  );
+}