improve launcher management screens

2026-07-03 17:18:47 +09:00
parent c6e99b1efc
commit 461c81a142
4 changed files with 455 additions and 67 deletions
@@ -81,6 +81,7 @@ export function LauncherBuildPage() {
  const [commitSha, setCommitSha] = useState('');
  const [jobs, setJobs] = useState<LauncherBuildJob[]>([]);
  const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const loadingVisible = useMinimumLoading(loading);
@@ -90,7 +91,6 @@ export function LauncherBuildPage() {
  const backendSource = source?.backend;
  const clientSource = source?.client;
  const artifactName = `autonomy-studio-launcher-${version || activeVersion?.version || '0.0.0'}.deb`;
-  const clientArtifactPreview = 'package.json 버전과 실제 .deb 파일명 기준으로 빌드 후 자동 확정';
  const backendImageName = backendSource?.image || 'localhost:5000/studio-launcher-be';
  const backendImageTag = `${backendImageName.replace(/\/$/, '')}:${version || '0.1.0'}`;
  const backendDockerfile = backendSource?.dockerfile || 'Dockerfile';
@@ -158,6 +158,7 @@ export function LauncherBuildPage() {
  }, [jobs, selectedJob]);

  const createJob = () => {
+    setConfirmOpen(false);
    setLoading(true);
    createLauncherBuildJob({
      target,
@@ -188,7 +189,7 @@ export function LauncherBuildPage() {
        title="빌드 관리"
        description="런처 클라이언트 설치 파일과 백엔드 컨테이너 이미지를 구성요소별로 빌드합니다."
        actions={
-          <Button className="h-8 px-3 text-[13px]" onClick={createJob} disabled={isBackend && !version.trim()}>
+          <Button className="h-8 px-3 text-[13px]" onClick={() => setConfirmOpen(true)} disabled={isBackend && !version.trim()}>
            <Play className="size-4" />
            실행
          </Button>
@@ -231,14 +232,14 @@ export function LauncherBuildPage() {
              <span className="text-xs font-medium text-muted-foreground">Commit SHA</span>
              <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring" value={commitSha} onChange={(event) => setCommitSha(event.target.value)} placeholder="비워두면 브랜치 최신 커밋" />
            </label>
-            <div className="rounded-md border border-border bg-background p-3">
-              <p className="text-xs text-muted-foreground">{isBackend ? '이미지' : '산출물'}</p>
-              <p className="mt-2 break-all font-mono text-xs text-foreground">{isBackend ? backendImageTag : clientArtifactPreview}</p>
-              <p className="mt-2 text-xs text-muted-foreground">{isBackend ? 'Dockerfile' : 'R2 Object Key'}</p>
-              <p className="mt-1 break-all font-mono text-xs text-foreground">{isBackend ? backendDockerfile : clientArtifactPreview}</p>
-              <p className="mt-2 text-xs text-muted-foreground">{isBackend ? 'Repository' : '다운로드 URL'}</p>
-              <p className="mt-1 break-all font-mono text-xs text-foreground">{isBackend ? backendSource?.repository || '-' : clientArtifactPreview}</p>
-            </div>
+            {isBackend ? (
+              <div className="rounded-md border border-border bg-background p-3">
+                <p className="text-xs text-muted-foreground">이미지</p>
+                <p className="mt-2 break-all font-mono text-xs text-foreground">{backendImageTag}</p>
+                <p className="mt-2 text-xs text-muted-foreground">Repository</p>
+                <p className="mt-1 break-all font-mono text-xs text-foreground">{backendSource?.repository || '-'}</p>
+              </div>
+            ) : null}
          </div>
        </Card>

@@ -331,6 +332,55 @@ export function LauncherBuildPage() {
          {selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
        </pre>
      </Modal>
+      <Modal
+        open={confirmOpen}
+        title="빌드 실행 확인"
+        onClose={() => setConfirmOpen(false)}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setConfirmOpen(false)}>취소</Button>
+            <Button onClick={createJob} disabled={loading || (isBackend && !version.trim())}>
+              <Play className="size-4" />
+              실행
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-3 text-sm">
+          <div className="rounded-md border border-border bg-muted/20 px-4 py-3">
+            <p className="font-medium">{isBackend ? '런처 백엔드 이미지 빌드' : '런처 클라이언트 설치 파일 빌드'}를 실행합니다.</p>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">
+              실행 후 빌드 작업이 생성되고, 작업 목록에서 진행 상태와 로그를 확인할 수 있습니다.
+            </p>
+          </div>
+          <div className="grid gap-2 rounded-md border border-border bg-background p-4">
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-muted-foreground">대상</span>
+              <span className="font-medium">{isBackend ? '백엔드' : '클라이언트'}</span>
+            </div>
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-muted-foreground">저장소</span>
+              <span className="truncate font-medium">
+                {isBackend ? backendSource?.repository || '-' : clientSource?.repository || activeVersion?.repository || '-'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-muted-foreground">브랜치</span>
+              <span className="font-medium">{branch}</span>
+            </div>
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-muted-foreground">커밋</span>
+              <span className="font-mono text-xs font-medium">{commitSha.trim() || '브랜치 최신'}</span>
+            </div>
+            {isBackend ? (
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-muted-foreground">이미지</span>
+                <span className="truncate font-mono text-xs font-medium">{backendImageTag}</span>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </Modal>
      <LoadingModal open={loadingVisible} />
    </>
  );