add build env and path ingress controls

2026-07-02 15:43:29 +09:00
parent 25dd90076f
commit 2b7f504007
4 changed files with 225 additions and 6 deletions
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Database, Pencil, Play, Plus, RotateCcw, Square, Trash2 } from 'lucide-react';
+import { Database, Pencil, Play, Plus, RotateCcw, Settings2, Square, Trash2 } from 'lucide-react';
 import { Badge, Button, Card, CardHeader } from '../../components/ui';
 import { useToast } from '../../components/toast';
 import { PageTitle } from '../../layout/AppLayout';
@@ -7,7 +7,7 @@ import { apiBaseUrl, apiFetch, authHeaders } from '../../lib/api';
 import { filterAppsByCurrentAdmin, grantAppPermissionToCurrentAdmin } from '../../lib/admin-app-permissions';
 import { cn } from '../../lib/utils';
 import { getStoredSelectedAppId, setStoredSelectedAppId } from '../../lib/selected-app';
-import type { ApiApp, ApiAppComponent, RuntimePersistentVolumeClaim, RuntimeResource } from '../../types/runtime';
+import type { ApiApp, ApiAppComponent, BuildEnvVariable, RuntimePersistentVolumeClaim, RuntimeResource } from '../../types/runtime';
 import { LoadingModal } from '../operations/operation-utils';

 type ComponentPortForm = {
@@ -17,6 +17,13 @@ type ComponentPortForm = {
  protocol: string;
 };

+type BuildEnvVariableForm = {
+  id?: string;
+  key: string;
+  value: string;
+  isSecret: boolean;
+};
+
 const emptyComponentPort = (): ComponentPortForm => ({
  name: '',
  port: '',
@@ -24,6 +31,12 @@ const emptyComponentPort = (): ComponentPortForm => ({
  protocol: 'TCP'
 });

+const emptyBuildEnvVariable = (): BuildEnvVariableForm => ({
+  key: '',
+  value: '',
+  isSecret: false
+});
+
 function useMinimumLoading(loading: boolean, minimumMs = 500) {
  const [visible, setVisible] = useState(loading);

@@ -148,6 +161,42 @@ function deleteWorkloadPersistentVolumeClaim(namespace: string, kind: string, na
  });
 }

+function loadComponentBuildEnv(componentId: string) {
+  return apiFetch(`${apiBaseUrl}/apps/components/${encodeURIComponent(componentId)}/build-env`, {
+    headers: authHeaders()
+  }).then(async (response) => {
+    if (!response.ok) {
+      const body = await response.json().catch(() => null);
+      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
+      throw new Error(message || '빌드 환경변수 조회 요청이 실패했습니다.');
+    }
+    return response.json() as Promise<{ variables: BuildEnvVariable[] }>;
+  });
+}
+
+function saveComponentBuildEnv(componentId: string, variables: BuildEnvVariableForm[]) {
+  return apiFetch(`${apiBaseUrl}/apps/components/${encodeURIComponent(componentId)}/build-env`, {
+    method: 'PUT',
+    headers: authHeaders({ 'Content-Type': 'application/json' }),
+    body: JSON.stringify({
+      variables: variables
+        .map((variable) => ({
+          key: variable.key.trim(),
+          value: variable.value,
+          isSecret: variable.isSecret
+        }))
+        .filter((variable) => variable.key)
+    })
+  }).then(async (response) => {
+    if (!response.ok) {
+      const body = await response.json().catch(() => null);
+      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
+      throw new Error(message || '빌드 환경변수 저장 요청이 실패했습니다.');
+    }
+    return response.json() as Promise<{ variables: BuildEnvVariable[] }>;
+  });
+}
+
 function isRunningResource(resource: RuntimeResource) {
  if (!['Pod', 'Deployment', 'StatefulSet', 'DaemonSet'].includes(resource.kind)) return false;
  return ['Running', 'Pending', 'ContainerCreating'].includes(resource.status) || !resource.ready.endsWith('/0');
@@ -251,6 +300,9 @@ export function AppManagementPage() {
  const [componentPorts, setComponentPorts] = useState<ComponentPortForm[]>([emptyComponentPort()]);
  const [componentSaveStatus, setComponentSaveStatus] = useState<'idle' | 'saving' | 'error'>('idle');
  const [editingComponent, setEditingComponent] = useState<ApiAppComponent | null>(null);
+  const [buildEnvComponent, setBuildEnvComponent] = useState<ApiAppComponent | null>(null);
+  const [buildEnvVariables, setBuildEnvVariables] = useState<BuildEnvVariableForm[]>([emptyBuildEnvVariable()]);
+  const [buildEnvStatus, setBuildEnvStatus] = useState<'idle' | 'loading' | 'saving' | 'error'>('idle');
  const [deletingApp, setDeletingApp] = useState<ApiApp | null>(null);
  const [deletingComponent, setDeletingComponent] = useState<ApiAppComponent | null>(null);
  const [runtimeResources, setRuntimeResources] = useState<RuntimeResource[]>([]);
@@ -676,6 +728,62 @@ export function AppManagementPage() {
      });
  };

+  const openBuildEnvModal = (component: ApiAppComponent) => {
+    setBuildEnvComponent(component);
+    setBuildEnvStatus('loading');
+    const fallbackVariables = component.buildVariables?.length
+      ? component.buildVariables.map((variable) => ({
+          id: variable.id,
+          key: variable.key,
+          value: variable.value,
+          isSecret: variable.isSecret
+        }))
+      : [emptyBuildEnvVariable()];
+    setBuildEnvVariables(fallbackVariables);
+    loadComponentBuildEnv(component.id)
+      .then(({ variables }) => {
+        setBuildEnvVariables(variables.length
+          ? variables.map((variable) => ({
+              id: variable.id,
+              key: variable.key,
+              value: variable.value,
+              isSecret: variable.isSecret
+            }))
+          : [emptyBuildEnvVariable()]);
+        setBuildEnvStatus('idle');
+      })
+      .catch((error: Error) => {
+        setBuildEnvStatus('error');
+        toast({ type: 'error', title: '빌드 환경변수 조회 실패', message: error.message });
+      });
+  };
+
+  const closeBuildEnvModal = () => {
+    setBuildEnvComponent(null);
+    setBuildEnvVariables([emptyBuildEnvVariable()]);
+    setBuildEnvStatus('idle');
+  };
+
+  const saveBuildEnv = () => {
+    if (!buildEnvComponent) return;
+    setBuildEnvStatus('saving');
+    saveComponentBuildEnv(buildEnvComponent.id, buildEnvVariables)
+      .then(({ variables }) => {
+        setApiApps((current) => current.map((app) => ({
+          ...app,
+          components: app.components?.map((component) => component.id === buildEnvComponent.id
+            ? { ...component, buildVariables: variables }
+            : component)
+        })));
+        toast({ type: 'success', title: '빌드 환경변수 저장', message: '구성요소 빌드 환경변수를 저장했습니다.' });
+        closeBuildEnvModal();
+      })
+      .catch((error: Error) => {
+        setBuildEnvStatus('error');
+        toast({ type: 'error', title: '빌드 환경변수 저장 실패', message: error.message });
+      });
+  };
+
  const deleteComponent = () => {
    if (!deletingComponent) return;

@@ -873,10 +981,13 @@ export function AppManagementPage() {
                          </td>
                          <td className="px-5 py-3 text-muted-foreground">{component.repository || (component.imageSource === 'EXTERNAL' ? '외부 이미지' : '미연결')}</td>
                          <td className="px-5 py-3">
-                            <div className="grid grid-cols-[2rem_2rem] justify-end gap-2">
+                            <div className="grid grid-cols-[2rem_2rem_2rem] justify-end gap-2">
                              <Button variant="outline" className="size-8 px-0" title="수정" aria-label="수정" onClick={() => openEditComponent(component)}>
                                <Pencil className="size-4" />
                              </Button>
+                              <Button variant="outline" className="size-8 px-0" title="빌드 환경변수" aria-label="빌드 환경변수" onClick={() => openBuildEnvModal(component)}>
+                                <Settings2 className="size-4" />
+                              </Button>
                              {!running ? (
                                <Button
                                  variant="outline"
@@ -1310,6 +1421,88 @@ export function AppManagementPage() {
        </div>
      ) : null}

+      {buildEnvComponent ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
+          <div className="flex max-h-[86vh] w-full max-w-3xl flex-col rounded-lg border border-border bg-card shadow-xl">
+            <div className="flex items-center gap-2 border-b border-border px-5 py-3">
+              <Settings2 className="size-4 text-primary" />
+              <div>
+                <h2 className="text-sm font-semibold">빌드 환경변수</h2>
+                <p className="mt-1 text-xs text-muted-foreground">{buildEnvComponent.name}</p>
+              </div>
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
+              {buildEnvStatus === 'loading' ? (
+                <div className="rounded-md border border-border bg-background/60 px-4 py-6 text-center text-sm text-muted-foreground">
+                  환경변수를 불러오는 중입니다.
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  <div className="grid gap-2 text-xs font-medium text-muted-foreground sm:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_5.5rem_2.5rem]">
+                    <span>키</span>
+                    <span>값</span>
+                    <span>비밀값</span>
+                    <span />
+                  </div>
+                  {buildEnvVariables.map((variable, index) => (
+                    <div key={variable.id ?? index} className="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_5.5rem_2.5rem]">
+                      <input
+                        value={variable.key}
+                        onChange={(event) => setBuildEnvVariables((prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, key: event.target.value } : item))}
+                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary"
+                        placeholder="VITE_API_BASE_URL"
+                      />
+                      <input
+                        value={variable.value}
+                        onChange={(event) => setBuildEnvVariables((prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))}
+                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary"
+                        placeholder="https://workspace-api.autonomystudio.net/api"
+                      />
+                      <label className="flex h-9 items-center gap-2 rounded-md border border-border bg-background px-3 text-xs text-muted-foreground">
+                        <input
+                          type="checkbox"
+                          className="size-4 accent-primary"
+                          checked={variable.isSecret}
+                          onChange={(event) => setBuildEnvVariables((prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, isSecret: event.target.checked } : item))}
+                        />
+                        사용
+                      </label>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="size-9 justify-self-end px-0 text-rose-300"
+                        disabled={buildEnvVariables.length === 1}
+                        onClick={() => setBuildEnvVariables((prev) => prev.filter((_, itemIndex) => itemIndex !== index))}
+                        title="환경변수 삭제"
+                        aria-label="환경변수 삭제"
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  ))}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="h-8 px-3 text-xs"
+                    onClick={() => setBuildEnvVariables((prev) => [...prev, emptyBuildEnvVariable()])}
+                  >
+                    <Plus className="size-3.5" />
+                    추가
+                  </Button>
+                </div>
+              )}
+              {buildEnvStatus === 'error' ? <p className="mt-4 text-xs text-rose-300">빌드 환경변수 처리에 실패했습니다.</p> : null}
+            </div>
+            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+              <Button variant="ghost" onClick={closeBuildEnvModal}>취소</Button>
+              <Button onClick={saveBuildEnv} disabled={buildEnvStatus === 'loading' || buildEnvStatus === 'saving'}>
+                {buildEnvStatus === 'saving' ? '저장 중' : '저장'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
      {deletingComponent ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="w-full max-w-md rounded-lg border border-border bg-card shadow-xl">
@@ -92,6 +92,7 @@ export function RuntimeConfigPage() {
  const [ingressHost, setIngressHost] = useState('');
  const [ingressPath, setIngressPath] = useState('/');
  const [ingressPort, setIngressPort] = useState('');
+  const [ingressStripPrefix, setIngressStripPrefix] = useState(false);

  const selectedApp = apps.find((app) => app.id === appId);
  const selectedProfile = profiles.find((profile) => profile.id === profileId);
@@ -237,11 +238,13 @@ export function RuntimeConfigPage() {
      host: ingressHost.trim(),
      path: ingressPath.trim() || '/',
      servicePort: Number(ingressPort),
+      stripPrefix: ingressStripPrefix,
      tlsEnabled: false
    })
      .then(() => {
        setIngressHost('');
        setIngressPath('/');
+        setIngressStripPrefix(false);
        refreshProfiles(appId, selectedProfile.id);
      })
      .catch((createError: Error) => setError(createError.message));
@@ -529,19 +532,20 @@ export function RuntimeConfigPage() {
              <span className="text-xs text-muted-foreground">총 {ingressRules.length}개</span>
            </div>
            <div className="max-h-[320px] overflow-x-auto overflow-y-auto">
-              <table className="w-full min-w-[820px] text-left text-sm">
+              <table className="w-full min-w-[940px] text-left text-sm">
                <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
                  <tr>
                    <th className="px-5 py-3 font-medium">구성요소</th>
                    <th className="px-5 py-3 font-medium">도메인</th>
                    <th className="px-5 py-3 font-medium">Path</th>
                    <th className="px-5 py-3 font-medium">포트</th>
+                    <th className="px-5 py-3 font-medium">Prefix</th>
                    <th className="w-16 px-5 py-3 text-right font-medium">관리</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {ingressRules.length === 0 ? (
-                    <tr><td colSpan={5} className="px-5 py-14 text-center text-muted-foreground">등록된 접속 설정이 없습니다.</td></tr>
+                    <tr><td colSpan={6} className="px-5 py-14 text-center text-muted-foreground">등록된 접속 설정이 없습니다.</td></tr>
                  ) : null}
                  {ingressRules.map((rule) => (
                    <tr key={rule.id} className="hover:bg-muted/20">
@@ -554,6 +558,7 @@ export function RuntimeConfigPage() {
                      <td className="px-5 py-3 text-foreground">{rule.host}</td>
                      <td className="px-5 py-3 text-muted-foreground">{rule.path}</td>
                      <td className="px-5 py-3 text-muted-foreground">{rule.servicePort}</td>
+                      <td className="px-5 py-3 text-muted-foreground">{rule.stripPrefix ? '제거' : '유지'}</td>
                      <td className="px-5 py-3 text-right">
                        <Button variant="ghost" className="h-8 w-8 p-0 text-rose-300 hover:text-rose-200" title="삭제" aria-label={`${rule.host} 삭제`} onClick={() => removeIngressRule(rule.id)}>
                          <Trash2 className="size-4" />
@@ -600,6 +605,15 @@ export function RuntimeConfigPage() {
                  <input type="number" min="1" className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={ingressPort} onChange={(event) => setIngressPort(event.target.value)} placeholder="80" />
                </label>
              </div>
+              <label className="flex items-center gap-2 rounded-md border border-border bg-muted/10 px-3 py-2 text-xs font-medium text-muted-foreground">
+                <input
+                  type="checkbox"
+                  className="size-4 accent-primary"
+                  checked={ingressStripPrefix}
+                  onChange={(event) => setIngressStripPrefix(event.target.checked)}
+                />
+                Path prefix 제거
+              </label>
              <Button className="h-9 w-full text-[13px]" onClick={addIngressRule} disabled={!selectedProfile || !ingressComponentId || !ingressHost.trim() || !ingressPort.trim()}>
                <Plus className="size-4" />
                추가
@@ -30,7 +30,7 @@ export function createRuntimeVariable(

 export function createRuntimeIngressRule(
  profileId: string,
-  input: { componentId: string; host: string; path?: string; servicePort: number; tlsEnabled?: boolean; tlsSecretName?: string }
+  input: { componentId: string; host: string; path?: string; servicePort: number; stripPrefix?: boolean; tlsEnabled?: boolean; tlsSecretName?: string }
 ) {
  return apiRequest(`/apps/runtime-profiles/${profileId}/ingress-rules`, {
    method: 'POST',