claudeship 0.2.20 → 0.2.21

package/apps/web/package.json

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

package/apps/web/src/app/settings/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { Header } from "@/components/layout/Header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { FolderOpen, Check, AlertCircle, Loader2 } from "lucide-react";
+import { FolderOpen, Check, AlertCircle, Loader2, Database, RefreshCw } from "lucide-react";
 import { api } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n";
 
@@ -12,6 +12,15 @@ interface Settings {
   projectsBasePath: string;
 }
 
+interface InfraStatus {
+  docker: {
+    available: boolean;
+    version?: string;
+    error?: string;
+  };
+  defaultProvider: "postgres_docker" | "sqlite";
+}
+
 export default function SettingsPage() {
   const { t } = useTranslation();
   const [settings, setSettings] = useState<Settings | null>(null);
@@ -21,8 +30,14 @@ export default function SettingsPage() {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
+  // Database infrastructure state
+  const [infraStatus, setInfraStatus] = useState<InfraStatus | null>(null);
+  const [isLoadingInfra, setIsLoadingInfra] = useState(true);
+  const [isRefreshingInfra, setIsRefreshingInfra] = useState(false);
+
   useEffect(() => {
     loadSettings();
+    loadInfraStatus();
   }, []);
 
   const loadSettings = async () => {
@@ -30,13 +45,36 @@ export default function SettingsPage() {
       const data = await api.get<Settings>("/settings");
       setSettings(data);
       setProjectsPath(data.projectsBasePath);
-    } catch (err) {
+    } catch {
       setError("Failed to load settings");
     } finally {
       setIsLoading(false);
     }
   };
 
+  const loadInfraStatus = async () => {
+    try {
+      const data = await api.get<InfraStatus>("/database/status");
+      setInfraStatus(data);
+    } catch {
+      // Silently fail - infrastructure status is optional
+    } finally {
+      setIsLoadingInfra(false);
+    }
+  };
+
+  const refreshInfraStatus = async () => {
+    setIsRefreshingInfra(true);
+    try {
+      const data = await api.post<InfraStatus>("/database/refresh");
+      setInfraStatus(data);
+    } catch {
+      // Silently fail
+    } finally {
+      setIsRefreshingInfra(false);
+    }
+  };
+
   const handleSave = async () => {
     setIsSaving(true);
     setError(null);
@@ -129,6 +167,104 @@ export default function SettingsPage() {
               </div>
             )}
           </section>
+
+          {/* Database Infrastructure */}
+          <section className="rounded-lg border bg-card p-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                  <Database className="h-5 w-5 text-primary" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold">데이터베이스 인프라</h2>
+                  <p className="text-sm text-muted-foreground">
+                    프로젝트별 데이터베이스 자동 관리
+                  </p>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={refreshInfraStatus}
+                disabled={isRefreshingInfra}
+              >
+                <RefreshCw className={`h-4 w-4 ${isRefreshingInfra ? "animate-spin" : ""}`} />
+              </Button>
+            </div>
+
+            {isLoadingInfra ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : infraStatus ? (
+              <div className="space-y-4">
+                {/* Docker Status */}
+                <div className="flex items-center justify-between rounded-lg bg-muted/50 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className={`h-3 w-3 rounded-full ${
+                      infraStatus.docker.available ? "bg-green-500" : "bg-yellow-500"
+                    }`} />
+                    <div>
+                      <p className="font-medium">Docker</p>
+                      <p className="text-sm text-muted-foreground">
+                        {infraStatus.docker.available
+                          ? `v${infraStatus.docker.version}`
+                          : "설치되지 않음 또는 실행 중이 아님"}
+                      </p>
+                    </div>
+                  </div>
+                  <span className={`text-sm font-medium ${
+                    infraStatus.docker.available ? "text-green-600" : "text-yellow-600"
+                  }`}>
+                    {infraStatus.docker.available ? "실행 중" : "비활성"}
+                  </span>
+                </div>
+
+                {/* Default Provider */}
+                <div className="rounded-lg bg-muted/50 p-4">
+                  <p className="text-sm text-muted-foreground mb-2">기본 데이터베이스</p>
+                  <div className="flex items-center gap-2">
+                    {infraStatus.defaultProvider === "postgres_docker" ? (
+                      <>
+                        <div className="flex h-8 w-8 items-center justify-center rounded bg-blue-500/10">
+                          <span className="text-xs font-bold text-blue-600">PG</span>
+                        </div>
+                        <div>
+                          <p className="font-medium">PostgreSQL (Docker)</p>
+                          <p className="text-xs text-muted-foreground">
+                            프로젝트별 독립 컨테이너
+                          </p>
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <div className="flex h-8 w-8 items-center justify-center rounded bg-amber-500/10">
+                          <span className="text-xs font-bold text-amber-600">SL</span>
+                        </div>
+                        <div>
+                          <p className="font-medium">SQLite</p>
+                          <p className="text-xs text-muted-foreground">
+                            경량 파일 기반 DB (폴백)
+                          </p>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* Info */}
+                <p className="text-xs text-muted-foreground">
+                  {infraStatus.docker.available
+                    ? "Docker가 감지되어 새 프로젝트에 PostgreSQL이 자동으로 생성됩니다."
+                    : "Docker가 없어 SQLite로 폴백됩니다. Docker를 설치하면 PostgreSQL을 사용할 수 있습니다."}
+                </p>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground py-4">
+                인프라 상태를 불러올 수 없습니다.
+              </p>
+            )}
+          </section>
         </div>
       </main>
     </div>

package/apps/web/src/components/project/ProjectCard.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { Trash2, Globe, Smartphone, Server } from "lucide-react";
+import { Trash2, Globe, Smartphone, Server, Database } from "lucide-react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import type { ProjectListItem } from "@claudeship/shared";
-import { ProjectType, BackendFramework, backendFrameworkLabels } from "@claudeship/shared";
+import { ProjectType, BackendFramework, DatabaseProvider } from "@claudeship/shared";
 import { useTranslation } from "@/lib/i18n";
 
 interface ProjectCardProps {
@@ -104,6 +104,16 @@ export function ProjectCard({ project, onDelete }: ProjectCardProps) {
                 {project.backendFramework === BackendFramework.EXPRESS ? "Express" : "FastAPI"}
               </span>
             )}
+            {project.databaseProvider && (
+              <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                project.databaseProvider === DatabaseProvider.POSTGRES_DOCKER
+                  ? "bg-blue-500/10 text-blue-600"
+                  : "bg-amber-500/10 text-amber-600"
+              }`}>
+                <Database className="h-3 w-3" />
+                {project.databaseProvider === DatabaseProvider.POSTGRES_DOCKER ? "PostgreSQL" : "SQLite"}
+              </span>
+            )}
             <span className="rounded-full bg-secondary px-2.5 py-0.5 text-xs text-muted-foreground">
               {project.projectType === ProjectType.WEB ? "Web" : "Native"}
             </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeship",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "description": "AI-Powered App Builder using Claude Code CLI",
   "bin": {
     "claudeship": "./bin/claudeship.js"

package/packages/shared/src/types/project.ts

@@ -9,6 +9,11 @@ export enum BackendFramework {
   FASTAPI = "FASTAPI",
 }
 
+export enum DatabaseProvider {
+  POSTGRES_DOCKER = "POSTGRES_DOCKER",
+  SQLITE = "SQLITE",
+}
+
 export const projectTypeLabels: Record<ProjectType, string> = {
   [ProjectType.WEB]: "웹앱",
   [ProjectType.NATIVE]: "네이티브 앱",
@@ -43,5 +48,6 @@ export interface ProjectListItem {
   name: string;
   projectType: ProjectType;
   backendFramework: BackendFramework;
+  databaseProvider?: DatabaseProvider | null;
   updatedAt: Date;
 }