zyflow 0.6.4

package/src/components/integrations/EnvironmentDialog.tsx

@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Plus, Trash2 } from 'lucide-react';
+import {
+  useCreateEnvironment,
+  useUpdateEnvironment,
+  type Environment,
+} from '@/hooks/useIntegrations';
+import { toast } from 'sonner';
+
+interface EnvironmentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  environment?: Environment | null;
+}
+
+export function EnvironmentDialog({
+  open,
+  onOpenChange,
+  projectId,
+  environment,
+}: EnvironmentDialogProps) {
+  const isEditing = !!environment;
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [serverUrl, setServerUrl] = useState('');
+  const [databaseUrl, setDatabaseUrl] = useState('');
+  const [variables, setVariables] = useState<Array<{ key: string; value: string }>>([]);
+
+  const createEnv = useCreateEnvironment();
+  const updateEnv = useUpdateEnvironment();
+
+  useEffect(() => {
+    if (environment) {
+      setName(environment.name);
+      setDescription(environment.description ?? '');
+      setServerUrl(environment.serverUrl ?? '');
+      setDatabaseUrl(''); // 암호화되어 있으므로 빈 값으로 시작
+      setVariables(
+        Object.entries(environment.variables).map(([key]) => ({
+          key,
+          value: '', // 마스킹된 값이므로 빈 값으로 시작
+        }))
+      );
+    } else {
+      setName('');
+      setDescription('');
+      setServerUrl('');
+      setDatabaseUrl('');
+      setVariables([{ key: '', value: '' }]);
+    }
+  }, [environment, open]);
+
+  const handleVariableChange = (index: number, field: 'key' | 'value', value: string) => {
+    setVariables((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], [field]: value };
+      return next;
+    });
+  };
+
+  const addVariable = () => {
+    setVariables((prev) => [...prev, { key: '', value: '' }]);
+  };
+
+  const removeVariable = (index: number) => {
+    setVariables((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const varsObj: Record<string, string> = {};
+      variables.forEach(({ key, value }) => {
+        if (key.trim() && value.trim()) {
+          varsObj[key.trim()] = value;
+        }
+      });
+
+      if (isEditing && environment) {
+        await updateEnv.mutateAsync({
+          projectId,
+          envId: environment.id,
+          name: name.trim() || undefined,
+          description: description.trim() || undefined,
+          serverUrl: serverUrl.trim() || undefined,
+          databaseUrl: databaseUrl.trim() || undefined,
+          variables: Object.keys(varsObj).length > 0 ? varsObj : undefined,
+        });
+        toast.success('환경이 수정되었습니다');
+      } else {
+        if (!name.trim()) {
+          toast.error('환경 이름을 입력하세요');
+          return;
+        }
+        await createEnv.mutateAsync({
+          projectId,
+          name: name.trim(),
+          description: description.trim() || undefined,
+          serverUrl: serverUrl.trim() || undefined,
+          databaseUrl: databaseUrl.trim() || undefined,
+          variables: varsObj,
+        });
+        toast.success('환경이 생성되었습니다');
+      }
+      onOpenChange(false);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : '저장 실패');
+    }
+  };
+
+  const isPending = createEnv.isPending || updateEnv.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{isEditing ? '환경 수정' : '환경 추가'}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? '환경 설정을 수정합니다. 빈 필드는 기존 값을 유지합니다.'
+              : '새로운 환경(local, staging, production 등)을 추가합니다.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">환경 이름 *</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="예: local, staging, production"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">설명</Label>
+            <Input
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="예: 로컬 개발 환경"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="serverUrl">서버 URL</Label>
+            <Input
+              id="serverUrl"
+              value={serverUrl}
+              onChange={(e) => setServerUrl(e.target.value)}
+              placeholder="https://api.example.com"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="databaseUrl">데이터베이스 URL</Label>
+            <Input
+              id="databaseUrl"
+              type="password"
+              value={databaseUrl}
+              onChange={(e) => setDatabaseUrl(e.target.value)}
+              placeholder="postgresql://..."
+            />
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label>환경 변수</Label>
+              <Button type="button" variant="outline" size="sm" onClick={addVariable}>
+                <Plus className="h-3 w-3 mr-1" />
+                Add
+              </Button>
+            </div>
+            {variables.map((variable, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Input
+                  placeholder="KEY"
+                  value={variable.key}
+                  onChange={(e) => handleVariableChange(index, 'key', e.target.value)}
+                  className="flex-1 font-mono text-sm"
+                />
+                <Input
+                  placeholder="value"
+                  type="password"
+                  value={variable.value}
+                  onChange={(e) => handleVariableChange(index, 'value', e.target.value)}
+                  className="flex-1"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removeVariable(index)}
+                  disabled={variables.length <= 1}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+            취소
+          </Button>
+          <Button onClick={handleSubmit} disabled={isPending || (!isEditing && !name.trim())}>
+            {isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            {isEditing ? '수정' : '추가'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/integrations/IntegrationBadges.tsx

@@ -0,0 +1,91 @@
+import {
+  Globe,
+  HardDrive,
+  Github,
+  Database,
+  Cloud,
+  AlertCircle,
+  Settings,
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import type { SettingsSource } from '@/types'
+
+// Source 배지 컴포넌트 - 설정 소스 표시 (local/global)
+export function SourceBadge({ source }: { source: SettingsSource }) {
+  if (source === 'local') {
+    return (
+      <Badge variant="outline" className="text-xs bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20">
+        <HardDrive className="h-3 w-3 mr-1" />
+        Local
+      </Badge>
+    )
+  }
+  return (
+    <Badge variant="outline" className="text-xs bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20">
+      <Globe className="h-3 w-3 mr-1" />
+      Global
+    </Badge>
+  )
+}
+
+// 서비스 아이콘 컴포넌트
+export function ServiceIcon({ type, className }: { type: string; className?: string }) {
+  const iconClass = className || 'h-4 w-4'
+
+  switch (type) {
+    case 'github':
+      return <Github className={iconClass} />
+    case 'supabase':
+      return <Database className={iconClass} />
+    case 'vercel':
+      return <Cloud className={iconClass} />
+    case 'sentry':
+      return <AlertCircle className={iconClass} />
+    default:
+      return <Settings className={iconClass} />
+  }
+}
+
+// 로컬 설정 상태 배지 (한국어)
+export function LocalSettingsStatusBadge({
+  hasLocal,
+  hasGlobal
+}: {
+  hasLocal: boolean
+  hasGlobal: boolean
+}) {
+  if (hasLocal) {
+    return (
+      <span className="text-xs bg-blue-500/10 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded inline-flex items-center gap-1">
+        <HardDrive className="h-3 w-3" />
+        로컬
+      </span>
+    )
+  }
+
+  if (hasGlobal) {
+    return (
+      <span className="text-xs bg-gray-500/10 text-gray-600 dark:text-gray-400 px-1.5 py-0.5 rounded inline-flex items-center gap-1">
+        <Globe className="h-3 w-3" />
+        전역
+      </span>
+    )
+  }
+
+  return null
+}
+
+// 연결 상태 배지
+export function ConnectionStatusBadge({ connected }: { connected: boolean }) {
+  return (
+    <Badge
+      variant={connected ? 'default' : 'secondary'}
+      className={connected
+        ? 'bg-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/20'
+        : ''
+      }
+    >
+      {connected ? 'Connected' : 'Not Connected'}
+    </Badge>
+  )
+}

package/src/components/integrations/IntegrationsSettings.tsx

@@ -0,0 +1,55 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ServiceAccountList } from './ServiceAccountList';
+import { Key, Link2 } from 'lucide-react';
+
+export function IntegrationsSettings() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">Integrations</h2>
+        <p className="text-muted-foreground">
+          외부 서비스 계정과 프로젝트 연동을 관리합니다.
+        </p>
+      </div>
+
+      <Tabs defaultValue="accounts" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="accounts" className="flex items-center gap-2">
+            <Key className="h-4 w-4" />
+            서비스 계정
+          </TabsTrigger>
+          <TabsTrigger value="mappings" className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" />
+            프로젝트 매핑
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="accounts" className="space-y-4">
+          <ServiceAccountList />
+        </TabsContent>
+
+        <TabsContent value="mappings" className="space-y-4">
+          <ProjectMappingList />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// 프로젝트 매핑 목록 컴포넌트
+function ProjectMappingList() {
+  // TODO: 프로젝트 목록과 각 프로젝트에 연결된 서비스 표시
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-medium">프로젝트 매핑</h3>
+        <p className="text-sm text-muted-foreground">
+          각 프로젝트에 연결된 서비스 계정을 확인하고 변경합니다.
+        </p>
+      </div>
+      <div className="text-center py-8 text-muted-foreground">
+        프로젝트를 선택하면 해당 프로젝트의 Integrations 탭에서 서비스를 연결할 수 있습니다.
+      </div>
+    </div>
+  );
+}