claudeship 0.2.14 → 0.2.16

package/apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudeship/web",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "private": true,
   "scripts": {
     "dev": "node scripts/dev-with-recovery.mjs",

package/apps/web/src/components/workspace/WorkspaceLayout.tsx

@@ -5,7 +5,19 @@ import { ChatPanel } from "@/components/chat/ChatPanel";
 import { PreviewPanel } from "@/components/preview/PreviewPanel";
 import { FileExplorer } from "@/components/file/FileExplorer";
 import { FileViewer } from "@/components/file/FileViewer";
-import { FolderTree, X } from "lucide-react";
+import { DatabasePanel } from "@/components/database/DatabasePanel";
+import { TestRunner } from "@/components/testing/TestRunner";
+import { CheckpointPanel } from "@/components/checkpoint/CheckpointPanel";
+import { EnvPanel } from "@/components/env/EnvPanel";
+import {
+  FolderTree,
+  X,
+  Eye,
+  Database,
+  FlaskConical,
+  GitBranch,
+  Settings2,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/lib/i18n";
 
@@ -19,10 +31,21 @@ interface SelectedFile {
   extension: string;
 }
 
+type RightPanelTab = "preview" | "database" | "testing" | "checkpoint" | "env";
+
+const tabConfig: { id: RightPanelTab; icon: React.ReactNode; label: string }[] = [
+  { id: "preview", icon: <Eye className="h-4 w-4" />, label: "Preview" },
+  { id: "database", icon: <Database className="h-4 w-4" />, label: "Database" },
+  { id: "testing", icon: <FlaskConical className="h-4 w-4" />, label: "Testing" },
+  { id: "checkpoint", icon: <GitBranch className="h-4 w-4" />, label: "Checkpoint" },
+  { id: "env", icon: <Settings2 className="h-4 w-4" />, label: "Env" },
+];
+
 export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
   const { t } = useTranslation();
   const [showFileExplorer, setShowFileExplorer] = useState(false);
   const [selectedFile, setSelectedFile] = useState<SelectedFile | null>(null);
+  const [activeTab, setActiveTab] = useState<RightPanelTab>("preview");
 
   const handleFileSelect = (path: string, content: string) => {
     const extension = path.split(".").pop() || "";
@@ -33,6 +56,23 @@ export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
     setSelectedFile(null);
   };
 
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "preview":
+        return <PreviewPanel projectId={projectId} />;
+      case "database":
+        return <DatabasePanel projectId={projectId} />;
+      case "testing":
+        return <TestRunner projectId={projectId} />;
+      case "checkpoint":
+        return <CheckpointPanel projectId={projectId} />;
+      case "env":
+        return <EnvPanel projectId={projectId} />;
+      default:
+        return <PreviewPanel projectId={projectId} />;
+    }
+  };
+
   return (
     <div className="flex h-[calc(100vh-3.5rem)]">
       {/* File Explorer Toggle Button */}
@@ -65,12 +105,34 @@ export function WorkspaceLayout({ projectId }: WorkspaceLayoutProps) {
         <ChatPanel projectId={projectId} />
       </div>
 
-      {/* Preview Panel - 70% width */}
+      {/* Right Panel - 70% width */}
       <div
-        className="flex-1"
+        className="flex-1 flex flex-col"
         style={{ width: showFileExplorer ? "calc(70%)" : "70%" }}
       >
-        <PreviewPanel projectId={projectId} />
+        {/* Tab Bar */}
+        <div className="flex items-center border-b bg-muted/30 px-2">
+          {tabConfig.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                activeTab === tab.id
+                  ? "border-primary text-primary"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+              title={tab.label}
+            >
+              {tab.icon}
+              <span className="hidden lg:inline">{tab.label}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Tab Content */}
+        <div className="flex-1 overflow-hidden">
+          {renderTabContent()}
+        </div>
       </div>
 
       {/* File Viewer Modal */}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "claudeship",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "AI-Powered App Builder using Claude Code CLI",
   "bin": {
     "claudeship": "./bin/claudeship.js"
   },
   "scripts": {
-    "prepare": "bash scripts/setup-hooks.sh || true",
+    "prepare": "bash scripts/setup.sh || true",
     "dev": "node scripts/dev.js",
     "dev:parallel": "pnpm run --parallel dev",
     "dev:web": "pnpm --filter @claudeship/web dev",

package/scripts/setup.sh

@@ -0,0 +1,89 @@
+#!/bin/bash
+
+# 프로젝트 초기 설정 스크립트
+# - Git hooks 설치
+# - .env 파일 생성
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+HOOKS_DIR="$SCRIPT_DIR/hooks"
+
+echo "=========================================="
+echo "  Claudeship 프로젝트 초기 설정"
+echo "=========================================="
+echo ""
+
+# ===========================================
+# 1. Git hooks 설치
+# ===========================================
+setup_git_hooks() {
+    GIT_HOOKS_DIR="$(git rev-parse --git-dir 2>/dev/null)/hooks"
+
+    if [ ! -d "$GIT_HOOKS_DIR" ]; then
+        echo "⚠️  Git 저장소가 아닙니다. Git hooks 설치를 건너뜁니다."
+        return
+    fi
+
+    echo "📌 Git hooks 설치 중..."
+
+    for hook in "$HOOKS_DIR"/*; do
+        if [ -f "$hook" ]; then
+            hook_name=$(basename "$hook")
+            cp "$hook" "$GIT_HOOKS_DIR/$hook_name"
+            chmod +x "$GIT_HOOKS_DIR/$hook_name"
+            echo "   ✓ $hook_name"
+        fi
+    done
+
+    echo "   완료!"
+    echo ""
+}
+
+# ===========================================
+# 2. .env 파일 생성
+# ===========================================
+setup_env_files() {
+    echo "📌 환경 설정 파일(.env) 확인 중..."
+
+    local env_created=false
+
+    # apps/server/.env
+    if [ ! -f "$ROOT_DIR/apps/server/.env" ]; then
+        if [ -f "$ROOT_DIR/apps/server/.env.example" ]; then
+            cp "$ROOT_DIR/apps/server/.env.example" "$ROOT_DIR/apps/server/.env"
+            echo "   ✓ apps/server/.env 생성됨"
+            env_created=true
+        fi
+    else
+        echo "   - apps/server/.env 이미 존재함"
+    fi
+
+    # apps/web/.env.local (있으면)
+    if [ ! -f "$ROOT_DIR/apps/web/.env.local" ]; then
+        if [ -f "$ROOT_DIR/apps/web/.env.local.example" ]; then
+            cp "$ROOT_DIR/apps/web/.env.local.example" "$ROOT_DIR/apps/web/.env.local"
+            echo "   ✓ apps/web/.env.local 생성됨"
+            env_created=true
+        fi
+    else
+        echo "   - apps/web/.env.local 이미 존재함"
+    fi
+
+    if [ "$env_created" = true ]; then
+        echo ""
+        echo "   💡 생성된 .env 파일을 확인하고 필요한 값을 설정하세요."
+    fi
+
+    echo "   완료!"
+    echo ""
+}
+
+# ===========================================
+# 실행
+# ===========================================
+setup_git_hooks
+setup_env_files
+
+echo "=========================================="
+echo "  ✅ 초기 설정 완료!"
+echo "=========================================="