add build env and path ingress controls

src/pages/applications/AppManagementPage.tsx

@@ -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">