claudeship 0.2.23 → 0.2.25

package/apps/web/package.json

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

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

@@ -7,7 +7,7 @@ import { ProjectList } from "@/components/project/ProjectList";
 import { CreateProjectModal } from "@/components/project/CreateProjectModal";
 import { useProjectStore } from "@/stores/useProjectStore";
 import { useTranslation } from "@/lib/i18n";
-import type { ProjectType } from "@claudeship/shared";
+import type { CreateProjectInput } from "@claudeship/shared";
 
 export default function Home() {
   const router = useRouter();
@@ -20,10 +20,7 @@ export default function Home() {
     fetchProjects();
   }, [fetchProjects]);
 
-  const handleCreateProject = async (data: {
-    name: string;
-    projectType: ProjectType;
-  }) => {
+  const handleCreateProject = async (data: CreateProjectInput) => {
     try {
       const project = await createProject(data);
       setIsModalOpen(false);

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

@@ -11,7 +11,11 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ProjectType, BackendFramework } from "@claudeship/shared";
+import {
+  AppType,
+  FrontendFramework,
+  BackendFramework,
+} from "@claudeship/shared";
 import { useTranslation } from "@/lib/i18n";
 
 interface CreateProjectModalProps {
@@ -19,12 +23,80 @@ interface CreateProjectModalProps {
   onOpenChange: (open: boolean) => void;
   onSubmit: (data: {
     name: string;
-    projectType: ProjectType;
-    backendFramework: BackendFramework;
+    appType: AppType;
+    frontendFramework?: FrontendFramework;
+    backendFramework?: BackendFramework;
   }) => void;
   isLoading?: boolean;
 }
 
+// App type configurations
+const APP_TYPE_CONFIG = {
+  [AppType.FULLSTACK_WEB]: {
+    icon: "🌐",
+    label: "풀스택 웹앱",
+    description: "프론트엔드 + 백엔드",
+    showFrontend: true,
+    showBackend: true,
+    webOnly: true,
+  },
+  [AppType.FRONTEND_ONLY]: {
+    icon: "⚡",
+    label: "프론트엔드",
+    description: "정적 사이트 / SPA",
+    showFrontend: true,
+    showBackend: false,
+    webOnly: true,
+  },
+  [AppType.API_ONLY]: {
+    icon: "🔌",
+    label: "API 서버",
+    description: "백엔드만",
+    showFrontend: false,
+    showBackend: true,
+    webOnly: false,
+  },
+  [AppType.MOBILE]: {
+    icon: "📱",
+    label: "모바일 앱",
+    description: "React Native / Flutter",
+    showFrontend: true,
+    showBackend: false,
+    webOnly: false,
+  },
+  [AppType.MOBILE_WITH_API]: {
+    icon: "📱🔌",
+    label: "모바일 + API",
+    description: "모바일 앱 + 백엔드",
+    showFrontend: true,
+    showBackend: true,
+    webOnly: false,
+  },
+};
+
+// Web frontend frameworks
+const WEB_FRONTENDS = [
+  { value: FrontendFramework.REACT_VITE, icon: "⚛️", label: "React + Vite" },
+  { value: FrontendFramework.NEXTJS, icon: "▲", label: "Next.js" },
+  { value: FrontendFramework.VUE, icon: "💚", label: "Vue 3" },
+  { value: FrontendFramework.SVELTE, icon: "🔶", label: "SvelteKit" },
+];
+
+// Mobile frontend frameworks
+const MOBILE_FRONTENDS = [
+  { value: FrontendFramework.EXPO, icon: "📱", label: "Expo" },
+  { value: FrontendFramework.REACT_NATIVE, icon: "⚛️", label: "React Native" },
+  { value: FrontendFramework.FLUTTER, icon: "🐦", label: "Flutter" },
+];
+
+// Backend frameworks
+const BACKENDS = [
+  { value: BackendFramework.EXPRESS, icon: "🟢", label: "Express" },
+  { value: BackendFramework.FASTAPI, icon: "🐍", label: "FastAPI" },
+  { value: BackendFramework.DJANGO, icon: "🎸", label: "Django" },
+  { value: BackendFramework.NESTJS, icon: "🔴", label: "NestJS" },
+];
+
 export function CreateProjectModal({
   open,
   onOpenChange,
@@ -33,32 +105,66 @@ export function CreateProjectModal({
 }: CreateProjectModalProps) {
   const { t } = useTranslation();
   const [name, setName] = useState("");
-  const [projectType, setProjectType] = useState<ProjectType>(ProjectType.WEB);
+  const [appType, setAppType] = useState<AppType>(AppType.FULLSTACK_WEB);
+  const [frontendFramework, setFrontendFramework] = useState<FrontendFramework>(
+    FrontendFramework.REACT_VITE
+  );
   const [backendFramework, setBackendFramework] = useState<BackendFramework>(
-    BackendFramework.NONE
+    BackendFramework.EXPRESS
   );
 
+  const config = APP_TYPE_CONFIG[appType];
+  const isMobileApp =
+    appType === AppType.MOBILE || appType === AppType.MOBILE_WITH_API;
+
+  const handleAppTypeChange = (newAppType: AppType) => {
+    setAppType(newAppType);
+    // Reset frameworks based on app type
+    const newConfig = APP_TYPE_CONFIG[newAppType];
+    const isMobile =
+      newAppType === AppType.MOBILE || newAppType === AppType.MOBILE_WITH_API;
+
+    if (newConfig.showFrontend) {
+      setFrontendFramework(
+        isMobile ? FrontendFramework.EXPO : FrontendFramework.REACT_VITE
+      );
+    }
+    if (newConfig.showBackend) {
+      setBackendFramework(BackendFramework.EXPRESS);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!name.trim()) return;
-    onSubmit({ name: name.trim(), projectType, backendFramework });
+
+    onSubmit({
+      name: name.trim(),
+      appType,
+      frontendFramework: config.showFrontend ? frontendFramework : undefined,
+      backendFramework: config.showBackend ? backendFramework : undefined,
+    });
+
+    // Reset form
     setName("");
-    setProjectType(ProjectType.WEB);
-    setBackendFramework(BackendFramework.NONE);
+    setAppType(AppType.FULLSTACK_WEB);
+    setFrontendFramework(FrontendFramework.REACT_VITE);
+    setBackendFramework(BackendFramework.EXPRESS);
   };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg">
+      <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
         <form onSubmit={handleSubmit}>
           <DialogHeader>
             <DialogTitle>{t("project.createTitle")}</DialogTitle>
             <DialogDescription>
-              {t("project.name")}
+              새 프로젝트의 이름과 타입을 선택하세요
             </DialogDescription>
           </DialogHeader>
 
           <div className="grid gap-4 py-4">
+            {/* Project Name */}
             <div className="grid gap-2">
               <label htmlFor="name" className="text-sm font-medium">
                 {t("project.name")}
@@ -72,83 +178,72 @@ export function CreateProjectModal({
               />
             </div>
 
+            {/* App Type Selection */}
             <div className="grid gap-2">
-              <label className="text-sm font-medium">{t("project.type")}</label>
+              <label className="text-sm font-medium">앱 타입</label>
               <div className="grid grid-cols-2 gap-2">
-                <Button
-                  type="button"
-                  variant={projectType === ProjectType.WEB ? "default" : "outline"}
-                  className="h-16 flex-col gap-1"
-                  onClick={() => setProjectType(ProjectType.WEB)}
-                >
-                  <span className="text-xl">🌐</span>
-                  <span className="text-xs">{t("project.typeWeb")}</span>
-                </Button>
-                <Button
-                  type="button"
-                  variant={projectType === ProjectType.NATIVE ? "default" : "outline"}
-                  className="h-16 flex-col gap-1"
-                  onClick={() => setProjectType(ProjectType.NATIVE)}
-                >
-                  <span className="text-xl">📱</span>
-                  <span className="text-xs">{t("project.typeNative")}</span>
-                </Button>
-              </div>
-            </div>
-
-            {projectType === ProjectType.WEB && (
-              <div className="grid gap-2">
-                <label className="text-sm font-medium">{t("project.backendStack")}</label>
-                <div className="grid grid-cols-3 gap-2">
+                {Object.entries(APP_TYPE_CONFIG).map(([type, cfg]) => (
                   <Button
+                    key={type}
                     type="button"
-                    variant={
-                      backendFramework === BackendFramework.NONE
-                        ? "default"
-                        : "outline"
-                    }
-                    className="h-20 flex-col gap-1"
-                    onClick={() => setBackendFramework(BackendFramework.NONE)}
+                    variant={appType === type ? "default" : "outline"}
+                    className="h-16 flex-col gap-0.5"
+                    onClick={() => handleAppTypeChange(type as AppType)}
                   >
-                    <span className="text-lg">⚡</span>
-                    <span className="text-xs text-center leading-tight">
-                      {t("project.backendNone")}
-                    </span>
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={
-                      backendFramework === BackendFramework.EXPRESS
-                        ? "default"
-                        : "outline"
-                    }
-                    className="h-20 flex-col gap-1"
-                    onClick={() => setBackendFramework(BackendFramework.EXPRESS)}
-                  >
-                    <span className="text-lg">🟢</span>
-                    <span className="text-xs text-center leading-tight">
-                      Express
-                      <br />
-                      (Node.js)
-                    </span>
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={
-                      backendFramework === BackendFramework.FASTAPI
-                        ? "default"
-                        : "outline"
-                    }
-                    className="h-20 flex-col gap-1"
-                    onClick={() => setBackendFramework(BackendFramework.FASTAPI)}
-                  >
-                    <span className="text-lg">🐍</span>
-                    <span className="text-xs text-center leading-tight">
-                      FastAPI
-                      <br />
-                      (Python)
+                    <span className="text-lg">{cfg.icon}</span>
+                    <span className="text-xs font-medium">{cfg.label}</span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {cfg.description}
                     </span>
                   </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Frontend Framework Selection */}
+            {config.showFrontend && (
+              <div className="grid gap-2">
+                <label className="text-sm font-medium">
+                  {isMobileApp ? "모바일 프레임워크" : "프론트엔드"}
+                </label>
+                <div className="grid grid-cols-4 gap-2">
+                  {(isMobileApp ? MOBILE_FRONTENDS : WEB_FRONTENDS).map((fw) => (
+                    <Button
+                      key={fw.value}
+                      type="button"
+                      variant={
+                        frontendFramework === fw.value ? "default" : "outline"
+                      }
+                      className="h-14 flex-col gap-0.5"
+                      onClick={() => setFrontendFramework(fw.value)}
+                    >
+                      <span className="text-base">{fw.icon}</span>
+                      <span className="text-[10px]">{fw.label}</span>
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Backend Framework Selection */}
+            {config.showBackend && (
+              <div className="grid gap-2">
+                <label className="text-sm font-medium">백엔드</label>
+                <div className="grid grid-cols-4 gap-2">
+                  {BACKENDS.map((fw) => (
+                    <Button
+                      key={fw.value}
+                      type="button"
+                      variant={
+                        backendFramework === fw.value ? "default" : "outline"
+                      }
+                      className="h-14 flex-col gap-0.5"
+                      onClick={() => setBackendFramework(fw.value)}
+                    >
+                      <span className="text-base">{fw.icon}</span>
+                      <span className="text-[10px]">{fw.label}</span>
+                    </Button>
+                  ))}
                 </div>
               </div>
             )}

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

@@ -1,11 +1,16 @@
 "use client";
 
 import Link from "next/link";
-import { Trash2, Globe, Smartphone, Server, Database } from "lucide-react";
+import { Trash2, Globe, Smartphone, Server, Database, Zap, Code } from "lucide-react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import type { ProjectListItem } from "@claudeship/shared";
-import { ProjectType, BackendFramework, DatabaseProvider } from "@claudeship/shared";
+import {
+  AppType,
+  BackendFramework,
+  FrontendFramework,
+  DatabaseProvider,
+} from "@claudeship/shared";
 import { useTranslation } from "@/lib/i18n";
 
 interface ProjectCardProps {
@@ -35,43 +40,111 @@ function formatRelativeTime(date: Date, locale: string): string {
   }
 }
 
-function getProjectIcon(projectType: ProjectType) {
-  switch (projectType) {
-    case ProjectType.WEB:
+function getAppTypeIcon(appType: AppType) {
+  switch (appType) {
+    case AppType.FULLSTACK_WEB:
       return <Globe className="h-5 w-5" />;
-    case ProjectType.NATIVE:
+    case AppType.FRONTEND_ONLY:
+      return <Zap className="h-5 w-5" />;
+    case AppType.API_ONLY:
+      return <Server className="h-5 w-5" />;
+    case AppType.MOBILE:
+      return <Smartphone className="h-5 w-5" />;
+    case AppType.MOBILE_WITH_API:
       return <Smartphone className="h-5 w-5" />;
     default:
-      return <Globe className="h-5 w-5" />;
+      return <Code className="h-5 w-5" />;
+  }
+}
+
+function getGradientClass(appType: AppType) {
+  switch (appType) {
+    case AppType.FULLSTACK_WEB:
+      return "from-blue-500/20 to-indigo-500/5";
+    case AppType.FRONTEND_ONLY:
+      return "from-yellow-500/20 to-orange-500/5";
+    case AppType.API_ONLY:
+      return "from-green-500/20 to-emerald-500/5";
+    case AppType.MOBILE:
+      return "from-purple-500/20 to-pink-500/5";
+    case AppType.MOBILE_WITH_API:
+      return "from-violet-500/20 to-purple-500/5";
+    default:
+      return "from-gray-500/20 to-slate-500/5";
   }
 }
 
-function getGradientClass(projectType: ProjectType, backendFramework: BackendFramework) {
-  if (backendFramework === BackendFramework.EXPRESS) {
-    return "from-green-500/20 to-emerald-500/5";
+function getAppTypeLabel(appType: AppType): string {
+  switch (appType) {
+    case AppType.FULLSTACK_WEB:
+      return "Fullstack";
+    case AppType.FRONTEND_ONLY:
+      return "Frontend";
+    case AppType.API_ONLY:
+      return "API";
+    case AppType.MOBILE:
+      return "Mobile";
+    case AppType.MOBILE_WITH_API:
+      return "Mobile+API";
+    default:
+      return "Unknown";
+  }
+}
+
+function getFrontendLabel(framework: FrontendFramework): string {
+  switch (framework) {
+    case FrontendFramework.REACT_VITE:
+      return "React";
+    case FrontendFramework.NEXTJS:
+      return "Next.js";
+    case FrontendFramework.VUE:
+      return "Vue";
+    case FrontendFramework.SVELTE:
+      return "Svelte";
+    case FrontendFramework.REACT_NATIVE:
+      return "RN";
+    case FrontendFramework.EXPO:
+      return "Expo";
+    case FrontendFramework.FLUTTER:
+      return "Flutter";
+    default:
+      return "";
   }
-  if (backendFramework === BackendFramework.FASTAPI) {
-    return "from-teal-500/20 to-cyan-500/5";
+}
+
+function getBackendLabel(framework: BackendFramework): string {
+  switch (framework) {
+    case BackendFramework.EXPRESS:
+      return "Express";
+    case BackendFramework.FASTAPI:
+      return "FastAPI";
+    case BackendFramework.DJANGO:
+      return "Django";
+    case BackendFramework.NESTJS:
+      return "NestJS";
+    default:
+      return "";
   }
-  return "from-blue-500/20 to-indigo-500/5";
 }
 
 export function ProjectCard({ project, onDelete }: ProjectCardProps) {
   const { locale } = useTranslation();
-  const gradientClass = getGradientClass(project.projectType, project.backendFramework);
+  const gradientClass = getGradientClass(project.appType);
 
   return (
     <Link href={`/project/${project.id}`}>
       <Card className="group relative cursor-pointer overflow-hidden border transition-all hover:border-primary/50 hover:shadow-lg">
         {/* Gradient background */}
-        <div className={`absolute inset-0 bg-gradient-to-br ${gradientClass} opacity-0 transition-opacity group-hover:opacity-100`} />
+        <div
+          className={`absolute inset-0 bg-gradient-to-br ${gradientClass} opacity-0 transition-opacity group-hover:opacity-100`}
+        />
 
         <div className="relative p-4">
           {/* Header */}
           <div className="flex items-start justify-between gap-2">
             <div className="flex items-center gap-3">
               <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                {getProjectIcon(project.projectType)}
+                {getAppTypeIcon(project.appType)}
               </div>
               <div className="min-w-0 flex-1">
                 <h3 className="truncate font-semibold">{project.name}</h3>
@@ -98,25 +171,43 @@ export function ProjectCard({ project, onDelete }: ProjectCardProps) {
 
           {/* Tags */}
           <div className="mt-4 flex flex-wrap gap-2">
-            {project.backendFramework !== BackendFramework.NONE && (
-              <span className="inline-flex items-center gap-1 rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium">
-                <Server className="h-3 w-3" />
-                {project.backendFramework === BackendFramework.EXPRESS ? "Express" : "FastAPI"}
-              </span>
-            )}
+            {/* App Type */}
+            <span className="rounded-full bg-secondary px-2.5 py-0.5 text-xs text-muted-foreground">
+              {getAppTypeLabel(project.appType)}
+            </span>
+
+            {/* Frontend Framework */}
+            {project.frontendFramework &&
+              project.frontendFramework !== FrontendFramework.NONE && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-blue-500/10 text-blue-600 px-2.5 py-0.5 text-xs font-medium">
+                  {getFrontendLabel(project.frontendFramework)}
+                </span>
+              )}
+
+            {/* Backend Framework */}
+            {project.backendFramework &&
+              project.backendFramework !== BackendFramework.NONE && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-600 px-2.5 py-0.5 text-xs font-medium">
+                  <Server className="h-3 w-3" />
+                  {getBackendLabel(project.backendFramework)}
+                </span>
+              )}
+
+            {/* Database Provider */}
             {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"
-              }`}>
+              <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"}
+                {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>
           </div>
         </div>
       </Card>

package/apps/web/src/stores/useProjectStore.ts

@@ -44,7 +44,8 @@ export const useProjectStore = create<ProjectState>((set, get) => ({
           {
             id: project.id,
             name: project.name,
-            projectType: project.projectType,
+            appType: project.appType,
+            frontendFramework: project.frontendFramework,
             backendFramework: project.backendFramework,
             updatedAt: project.updatedAt,
           },

package/package.json

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

package/packages/shared/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./types/project";
 export * from "./types/chat";
 export * from "./types/preview";
+export * from "./types/tech-stack";

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

@@ -1,3 +1,6 @@
+import { FrontendFramework, TechStackConfig, AppType } from "./tech-stack";
+
+// @deprecated Use AppType instead
 export enum ProjectType {
   WEB = "WEB",
   NATIVE = "NATIVE",
@@ -7,8 +10,13 @@ export enum BackendFramework {
   NONE = "NONE",
   EXPRESS = "EXPRESS",
   FASTAPI = "FASTAPI",
+  DJANGO = "DJANGO",
+  NESTJS = "NESTJS",
 }
 
+export { FrontendFramework, AppType } from "./tech-stack";
+export type { TechStackConfig } from "./tech-stack";
+
 export enum DatabaseProvider {
   POSTGRES_DOCKER = "POSTGRES_DOCKER",
   SQLITE = "SQLITE",
@@ -23,13 +31,18 @@ export const backendFrameworkLabels: Record<BackendFramework, string> = {
   [BackendFramework.NONE]: "프론트엔드 전용",
   [BackendFramework.EXPRESS]: "Express (Node.js)",
   [BackendFramework.FASTAPI]: "FastAPI (Python)",
+  [BackendFramework.DJANGO]: "Django (Python)",
+  [BackendFramework.NESTJS]: "NestJS (Node.js)",
 };
 
 export interface Project {
   id: string;
   name: string;
-  projectType: ProjectType;
+  appType: AppType;
+  projectType: ProjectType; // @deprecated
+  frontendFramework: FrontendFramework;
   backendFramework: BackendFramework;
+  techStackConfig?: TechStackConfig;
   path: string;
   description?: string;
   createdAt: Date;
@@ -38,7 +51,8 @@ export interface Project {
 
 export interface CreateProjectInput {
   name: string;
-  projectType: ProjectType;
+  appType: AppType;
+  frontendFramework?: FrontendFramework;
   backendFramework?: BackendFramework;
   description?: string;
 }
@@ -46,7 +60,8 @@ export interface CreateProjectInput {
 export interface ProjectListItem {
   id: string;
   name: string;
-  projectType: ProjectType;
+  appType: AppType;
+  frontendFramework: FrontendFramework;
   backendFramework: BackendFramework;
   databaseProvider?: DatabaseProvider | null;
   updatedAt: Date;