@kurly-growth/growthman 0.1.13 → 0.1.15

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

@@ -25,14 +25,12 @@ const env = {
 // CLI 바이너리 경로 찾기
 function getBinPath(packageName, binName) {
   try {
-    // 패키지의 package.json 찾기
     const pkgJsonPath = require.resolve(`${packageName}/package.json`, {
       paths: [packageDir],
     });
     const pkgDir = path.dirname(pkgJsonPath);
     const pkgJson = require(pkgJsonPath);
 
-    // bin 필드에서 실행 파일 경로 찾기
     let binRelPath;
     if (typeof pkgJson.bin === 'string') {
       binRelPath = pkgJson.bin;
@@ -60,6 +58,18 @@ if (!fs.existsSync(dbPath)) {
   });
 }
 
+// .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,
+  });
+}
+
 // 서버 시작
 const port = process.env.PORT || 3100;
 const url = `http://localhost:${port}`;

package/components/api-test-dialog.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { useState } from 'react'
+import dynamic from 'next/dynamic'
+import { MockEndpoint } from '@/types/endpoint'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
+  ssr: false,
+  loading: () => <div className="h-[300px] bg-gray-100 animate-pulse rounded" />,
+})
+
+interface ApiTestDialogProps {
+  endpoint: MockEndpoint | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const methodColors: Record<string, string> = {
+  GET: 'bg-green-100 text-green-800',
+  POST: 'bg-blue-100 text-blue-800',
+  PUT: 'bg-yellow-100 text-yellow-800',
+  PATCH: 'bg-orange-100 text-orange-800',
+  DELETE: 'bg-red-100 text-red-800',
+}
+
+export function ApiTestDialog({
+  endpoint,
+  open,
+  onOpenChange,
+}: ApiTestDialogProps) {
+  const [loading, setLoading] = useState(false)
+  const [response, setResponse] = useState<{
+    status: number
+    statusText: string
+    body: string
+    time: number
+  } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [pathParams, setPathParams] = useState<Record<string, string>>({})
+
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'
+
+  // Extract path parameters like :id, :userId from path
+  const extractPathParams = (path: string): string[] => {
+    const matches = path.match(/:(\w+)/g)
+    return matches ? matches.map((m) => m.slice(1)) : []
+  }
+
+  const paramNames = endpoint ? extractPathParams(endpoint.path) : []
+
+  // Build the actual URL with path parameters replaced
+  const buildUrl = (): string => {
+    if (!endpoint) return ''
+    let path = endpoint.path
+    for (const [key, value] of Object.entries(pathParams)) {
+      path = path.replace(`:${key}`, value || `:${key}`)
+    }
+    return `${baseUrl}/api/mock${path}`
+  }
+
+  const handleSend = async () => {
+    if (!endpoint) return
+
+    setLoading(true)
+    setError(null)
+    setResponse(null)
+
+    const startTime = performance.now()
+
+    try {
+      const res = await fetch(buildUrl(), {
+        method: endpoint.method,
+      })
+
+      const endTime = performance.now()
+      const body = await res.text()
+
+      let formattedBody = body
+      try {
+        formattedBody = JSON.stringify(JSON.parse(body), null, 2)
+      } catch {
+        // Not JSON, use as-is
+      }
+
+      setResponse({
+        status: res.status,
+        statusText: res.statusText,
+        body: formattedBody,
+        time: Math.round(endTime - startTime),
+      })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Request failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      setResponse(null)
+      setError(null)
+      setPathParams({})
+    }
+    onOpenChange(isOpen)
+  }
+
+  const getStatusColor = (status: number) => {
+    if (status >= 200 && status < 300) return 'text-green-600'
+    if (status >= 400 && status < 500) return 'text-yellow-600'
+    if (status >= 500) return 'text-red-600'
+    return 'text-gray-600'
+  }
+
+  if (!endpoint) return null
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3">
+            <span
+              className={`px-2 py-1 rounded text-xs font-medium ${methodColors[endpoint.method] || 'bg-gray-100'}`}
+            >
+              {endpoint.method}
+            </span>
+            <span>Test API</span>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 flex-1 overflow-hidden">
+          {/* URL Display */}
+          <div className="flex items-center gap-2">
+            <Input
+              readOnly
+              value={buildUrl()}
+              className="flex-1 font-mono text-sm bg-gray-50"
+            />
+            <Button onClick={handleSend} disabled={loading}>
+              {loading ? 'Sending...' : 'Send'}
+            </Button>
+          </div>
+
+          {/* Path Parameters */}
+          {paramNames.length > 0 && (
+            <div className="space-y-2 p-3 bg-gray-50 rounded-lg">
+              <Label className="text-sm font-medium">Path Parameters</Label>
+              <div className="grid gap-2">
+                {paramNames.map((param) => (
+                  <div key={param} className="flex items-center gap-2">
+                    <Label className="w-24 text-sm text-gray-600">:{param}</Label>
+                    <Input
+                      placeholder={`Enter ${param}`}
+                      value={pathParams[param] || ''}
+                      onChange={(e) =>
+                        setPathParams((prev) => ({
+                          ...prev,
+                          [param]: e.target.value,
+                        }))
+                      }
+                      className="flex-1"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Error Display */}
+          {error && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+              <p className="text-red-600 text-sm">{error}</p>
+            </div>
+          )}
+
+          {/* Response Display */}
+          {response && (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <div className="flex items-center gap-4 mb-2">
+                <span className="text-sm font-medium">Response</span>
+                <span className={`text-sm font-medium ${getStatusColor(response.status)}`}>
+                  {response.status} {response.statusText}
+                </span>
+                <span className="text-sm text-gray-500">{response.time}ms</span>
+              </div>
+              <div className="border rounded-md overflow-hidden flex-1">
+                <MonacoEditor
+                  height="300px"
+                  language="json"
+                  theme="vs-dark"
+                  value={response.body}
+                  options={{
+                    readOnly: true,
+                    minimap: { enabled: false },
+                    fontSize: 13,
+                    scrollBeyondLastLine: false,
+                    automaticLayout: true,
+                  }}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Initial State */}
+          {!response && !error && !loading && (
+            <div className="flex-1 flex items-center justify-center text-gray-400 border-2 border-dashed rounded-lg">
+              Click Send to test the API
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/endpoint-edit-dialog.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import { MockEndpoint } from '@/types/endpoint'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
+  ssr: false,
+  loading: () => <div className="h-[400px] bg-gray-100 animate-pulse rounded" />,
+})
+
+interface EndpointEditDialogProps {
+  endpoint: MockEndpoint | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSave: (endpoint: Partial<MockEndpoint> & { id?: string }) => void
+}
+
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']
+
+export function EndpointEditDialog({
+  endpoint,
+  open,
+  onOpenChange,
+  onSave,
+}: EndpointEditDialogProps) {
+  const [path, setPath] = useState('')
+  const [method, setMethod] = useState('GET')
+  const [description, setDescription] = useState('')
+  const [statusCode, setStatusCode] = useState(200)
+  const [responseBody, setResponseBody] = useState('{}')
+  const [jsonError, setJsonError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (endpoint) {
+      setPath(endpoint.path)
+      setMethod(endpoint.method)
+      setDescription(endpoint.description || '')
+      setStatusCode(endpoint.statusCode)
+      setResponseBody(JSON.stringify(endpoint.responseBody, null, 2))
+    } else {
+      setPath('')
+      setMethod('GET')
+      setDescription('')
+      setStatusCode(200)
+      setResponseBody('{}')
+    }
+    setJsonError(null)
+  }, [endpoint, open])
+
+  const handleSave = () => {
+    try {
+      const parsedBody = JSON.parse(responseBody)
+      setJsonError(null)
+      onSave({
+        id: endpoint?.id,
+        path,
+        method,
+        description: description || null,
+        statusCode,
+        responseBody: parsedBody,
+      })
+      onOpenChange(false)
+    } catch {
+      setJsonError('Invalid JSON format')
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[70vw] h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>
+            {endpoint ? 'Edit Endpoint' : 'Create New Endpoint'}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4 flex-1 overflow-hidden">
+          <div className="flex items-center gap-4">
+            <Label htmlFor="method" className="w-28 text-right shrink-0">
+              Method
+            </Label>
+            <select
+              id="method"
+              value={method}
+              onChange={(e) => setMethod(e.target.value)}
+              className="flex-1 h-10 rounded-md border border-input bg-background px-3 py-2"
+            >
+              {HTTP_METHODS.map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Label htmlFor="path" className="w-28 text-right shrink-0">
+              Path
+            </Label>
+            <Input
+              id="path"
+              value={path}
+              onChange={(e) => setPath(e.target.value)}
+              placeholder="/v1/users/:userId"
+              className="flex-1"
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Label htmlFor="description" className="w-28 text-right shrink-0">
+              Description
+            </Label>
+            <Input
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="API description"
+              className="flex-1"
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Label htmlFor="statusCode" className="w-28 text-right shrink-0">
+              Status Code
+            </Label>
+            <Input
+              id="statusCode"
+              type="number"
+              value={statusCode}
+              onChange={(e) => setStatusCode(Number(e.target.value))}
+              className="flex-1"
+            />
+          </div>
+
+          <div className="flex items-start gap-4">
+            <Label className="w-28 text-right shrink-0 pt-2">Response Body</Label>
+            <div className="flex-1">
+              <div className="border rounded-md overflow-hidden">
+                <MonacoEditor
+                  height="calc(85vh - 320px)"
+                  language="json"
+                  theme="vs-dark"
+                  value={responseBody}
+                  onChange={(value) => setResponseBody(value || '{}')}
+                  options={{
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    formatOnPaste: true,
+                    automaticLayout: true,
+                    scrollBeyondLastLine: false,
+                  }}
+                />
+              </div>
+              {jsonError && (
+                <p className="text-red-500 text-sm mt-2">{jsonError}</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="shrink-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}