init studio admin frontend

2026-07-01 17:34:15 +09:00
commit c50bd2b941
64 changed files with 22452 additions and 0 deletions
@@ -0,0 +1,352 @@
+import { ChevronDown, Link2, MoreHorizontal, RotateCcw, Unlink } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
+import { useToast } from '../../components/toast';
+import { PageTitle } from '../../layout/AppLayout';
+import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
+import {
+  createLauncherAppLink,
+  deleteLauncherAppLink,
+  listLauncherAppLinks,
+  moveLauncherAppLink,
+  syncLauncherAppsToAdminApps,
+  updateLauncherAppLink,
+  type LauncherAppLink,
+  type LauncherUnlinkedApp
+} from './launcher-api';
+
+type DisplayForm = {
+  displayName: string;
+  description: string;
+  subtitle: string;
+  detailUrl: string;
+  videoPath: string;
+  iconKey: string;
+  launchUrl: string;
+  devAppPath: string;
+  execPath: string;
+  displayOrder: string;
+  isEnabled: boolean;
+};
+
+function releaseLabel(link: LauncherAppLink) {
+  return link.release?.version ?? '-';
+}
+
+function launchUrl(link: LauncherAppLink) {
+  return link.launchUrl || link.execPath || link.devAppPath || link.artifact || '-';
+}
+
+function toDisplayForm(link: LauncherAppLink): DisplayForm {
+  return {
+    displayName: link.displayName || link.app.name || '',
+    description: link.description || link.app.description || '',
+    subtitle: link.subtitle || '',
+    detailUrl: link.detailUrl || '',
+    videoPath: link.videoPath || '',
+    iconKey: link.iconKey || link.app.key.toLowerCase(),
+    launchUrl: link.launchUrl || '',
+    devAppPath: link.devAppPath || '',
+    execPath: link.execPath || '',
+    displayOrder: String(link.displayOrder || ''),
+    isEnabled: link.isEnabled
+  };
+}
+
+export function LauncherAppsPage() {
+  const { toast } = useToast();
+  const [linkedApps, setLinkedApps] = useState<LauncherAppLink[]>([]);
+  const [unlinkedApps, setUnlinkedApps] = useState<LauncherUnlinkedApp[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [workingId, setWorkingId] = useState('');
+  const [syncing, setSyncing] = useState(false);
+  const [editingLink, setEditingLink] = useState<LauncherAppLink | null>(null);
+  const [displayForm, setDisplayForm] = useState<DisplayForm | null>(null);
+  const loadingVisible = useMinimumLoading(loading);
+
+  const refresh = () => {
+    setLoading(true);
+    listLauncherAppLinks()
+      .then(({ linked, unlinked }) => {
+        setLinkedApps(linked);
+        setUnlinkedApps(unlinked);
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '앱 연결 조회 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const connect = (app: LauncherUnlinkedApp) => {
+    setWorkingId(app.id);
+    createLauncherAppLink({ appId: app.id, releaseId: app.releases?.[0]?.id })
+      .then(() => {
+        toast({ type: 'success', message: '런처에 앱을 연결했습니다.' });
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '앱 연결 실패', message: error.message });
+      })
+      .finally(() => setWorkingId(''));
+  };
+
+  const move = (link: LauncherAppLink, direction: 'up' | 'down') => {
+    setWorkingId(`${link.id}-${direction}`);
+    moveLauncherAppLink(link.id, direction)
+      .then(({ linked, unlinked }) => {
+        setLinkedApps(linked);
+        setUnlinkedApps(unlinked);
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '순서 변경 실패', message: error.message });
+      })
+      .finally(() => setWorkingId(''));
+  };
+
+  const unlink = (link: LauncherAppLink) => {
+    setWorkingId(link.id);
+    deleteLauncherAppLink(link.id)
+      .then(() => {
+        toast({ type: 'success', message: '런처 앱 연결을 해제했습니다.' });
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '연결 해제 실패', message: error.message });
+      })
+      .finally(() => setWorkingId(''));
+  };
+
+  const syncAdminApps = () => {
+    setSyncing(true);
+    syncLauncherAppsToAdminApps()
+      .then(({ syncedApps, syncedReleases }) => {
+        toast({ type: 'success', message: `앱 ${syncedApps}개, 릴리즈 ${syncedReleases}개를 동기화했습니다.` });
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '앱 관리 동기화 실패', message: error.message });
+      })
+      .finally(() => setSyncing(false));
+  };
+
+  const openSettings = (link: LauncherAppLink) => {
+    setEditingLink(link);
+    setDisplayForm(toDisplayForm(link));
+  };
+
+  const closeSettings = () => {
+    setEditingLink(null);
+    setDisplayForm(null);
+  };
+
+  const saveSettings = () => {
+    if (!editingLink || !displayForm) return;
+    setWorkingId(`${editingLink.id}-settings`);
+    updateLauncherAppLink(editingLink.id, {
+      displayName: displayForm.displayName,
+      description: displayForm.description,
+      subtitle: displayForm.subtitle,
+      detailUrl: displayForm.detailUrl,
+      videoPath: displayForm.videoPath,
+      iconKey: displayForm.iconKey,
+      launchUrl: displayForm.launchUrl,
+      devAppPath: displayForm.devAppPath,
+      execPath: displayForm.execPath,
+      displayOrder: Number(displayForm.displayOrder) || undefined,
+      isEnabled: displayForm.isEnabled
+    })
+      .then(({ link }) => {
+        setLinkedApps((prev) => prev.map((item) => (item.id === link.id ? link : item)).sort((a, b) => a.displayOrder - b.displayOrder));
+        toast({ type: 'success', message: '런처 표시 설정을 저장했습니다.' });
+        closeSettings();
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '설정 저장 실패', message: error.message });
+      })
+      .finally(() => setWorkingId(''));
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="런처 운영"
+        title="앱 연결"
+        description="등록된 앱 중 런처에 노출할 앱과 표시 순서를 관리합니다."
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={syncAdminApps} disabled={syncing || loading}>
+              <Link2 className={syncing ? 'size-4 animate-spin' : 'size-4'} />
+              앱 관리 동기화
+            </Button>
+            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
+              <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
+              새로고침
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="space-y-4">
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="연결된 앱" description="런처 홈에 표시할 앱과 노출 순서를 관리합니다." />
+          <div className="max-h-[560px] overflow-x-auto overflow-y-auto">
+            <table className="w-full min-w-[760px] 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="w-28 px-5 py-3 font-medium">노출순서</th>
+                  <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">실행 경로</th>
+                  <th className="px-5 py-3 text-right font-medium">관리</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {!loading && linkedApps.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="px-5 py-12 text-center text-sm text-muted-foreground">
+                      연결된 앱이 없습니다.
+                    </td>
+                  </tr>
+                ) : null}
+                {linkedApps.map((link, index) => (
+                  <tr key={link.id} className="hover:bg-muted/20">
+                    <td className="px-5 py-3">{link.displayOrder || index + 1}</td>
+                    <td className="px-5 py-3">
+                      <p className="inline-flex items-center gap-2">
+                        <span className={link.isEnabled ? 'size-2 rounded-full bg-emerald-400' : 'size-2 rounded-full bg-muted-foreground'} />
+                        {link.displayName || link.app.name}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        {[link.app.key, link.subtitle].filter(Boolean).join(' · ')}
+                      </p>
+                    </td>
+                    <td className="px-5 py-3">
+                      <Badge tone={link.release ? 'green' : 'neutral'}>{releaseLabel(link)}</Badge>
+                    </td>
+                    <td className="px-5 py-3 text-muted-foreground">{launchUrl(link)}</td>
+                    <td className="px-5 py-3">
+                      <div className="flex justify-end gap-2">
+                        <Button variant="outline" className="size-8 px-0" aria-label={`${link.app.name} 위로 이동`} onClick={() => move(link, 'up')} disabled={index === 0 || workingId === `${link.id}-up`}>
+                          <ChevronDown className="size-4 rotate-180" />
+                        </Button>
+                        <Button variant="outline" className="size-8 px-0" aria-label={`${link.app.name} 아래로 이동`} onClick={() => move(link, 'down')} disabled={index === linkedApps.length - 1 || workingId === `${link.id}-down`}>
+                          <ChevronDown className="size-4" />
+                        </Button>
+                        <Button variant="outline" className="size-8 px-0" aria-label={`${link.app.name} 표시 설정`} onClick={() => openSettings(link)} disabled={workingId === `${link.id}-settings`}>
+                          <MoreHorizontal className="size-4" />
+                        </Button>
+                        <Button variant="outline" className="size-8 border-rose-500/40 px-0 text-rose-300 hover:bg-rose-500/10" aria-label={`${link.app.name} 연결 해제`} onClick={() => unlink(link)} disabled={workingId === link.id}>
+                          <Unlink className="size-4" />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="미연결 앱" description="아직 런처에 연결하지 않은 앱입니다." />
+          <div className="max-h-[420px] divide-y divide-border overflow-y-auto">
+            {!loading && unlinkedApps.length === 0 ? (
+              <div className="flex min-h-32 items-center justify-center text-sm text-muted-foreground">미연결 앱이 없습니다.</div>
+            ) : null}
+            {unlinkedApps.map((app) => (
+              <div key={app.id} className="flex items-center justify-between gap-4 px-5 py-3">
+                <div className="min-w-0">
+                  <p className="truncate text-sm">{app.name}</p>
+                  <p className="mt-1 truncate text-xs text-muted-foreground">
+                    {app.key} · {app.releases?.[0]?.version ?? '릴리즈 없음'}
+                  </p>
+                </div>
+                <Button className="h-8 px-3 text-[13px]" onClick={() => connect(app)} disabled={workingId === app.id}>
+                  <Link2 className="size-4" />
+                  연결
+                </Button>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+
+      <Modal
+        open={Boolean(editingLink && displayForm)}
+        title="런처 표시 설정"
+        onClose={closeSettings}
+        className="!max-w-3xl"
+        footer={
+          <>
+            <Button variant="outline" onClick={closeSettings}>취소</Button>
+            <Button onClick={saveSettings} disabled={!displayForm?.displayName.trim() || workingId.endsWith('-settings')}>
+              저장
+            </Button>
+          </>
+        }
+      >
+        {displayForm ? (
+          <form className="grid gap-4" onSubmit={(event) => { event.preventDefault(); saveSettings(); }}>
+            <div className="grid gap-4 md:grid-cols-[1fr_120px_120px]">
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">표시명</span>
+                <input 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={displayForm.displayName} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, displayName: event.target.value } : prev)} />
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">노출순서</span>
+                <input type="number" 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={displayForm.displayOrder} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, displayOrder: event.target.value } : prev)} />
+              </label>
+              <label className="mt-6 inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm text-foreground">
+                <input type="checkbox" checked={displayForm.isEnabled} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, isEnabled: event.target.checked } : prev)} />
+                활성
+              </label>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">보조 문구</span>
+                <input 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={displayForm.subtitle} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, subtitle: event.target.value } : prev)} />
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">아이콘 키</span>
+                <input 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={displayForm.iconKey} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, iconKey: event.target.value } : prev)} />
+              </label>
+            </div>
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">설명</span>
+              <textarea className="mt-2 min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={displayForm.description} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, description: event.target.value } : prev)} />
+            </label>
+            <div className="grid gap-4 md:grid-cols-2">
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">실행 URL</span>
+                <input 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={displayForm.launchUrl} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, launchUrl: event.target.value } : prev)} />
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">상세 URL</span>
+                <input 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={displayForm.detailUrl} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, detailUrl: event.target.value } : prev)} />
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">개발 앱 경로</span>
+                <input 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={displayForm.devAppPath} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, devAppPath: event.target.value } : prev)} />
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">실행 파일 경로</span>
+                <input 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={displayForm.execPath} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, execPath: event.target.value } : prev)} />
+              </label>
+            </div>
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">소개 영상 경로</span>
+              <input 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={displayForm.videoPath} onChange={(event) => setDisplayForm((prev) => prev ? { ...prev, videoPath: event.target.value } : prev)} />
+            </label>
+          </form>
+        ) : null}
+      </Modal>
+
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}
@@ -0,0 +1,275 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
+import { useToast } from '../../components/toast';
+import { PageTitle } from '../../layout/AppLayout';
+import { formatDateTime } from '../../lib/date-format';
+import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
+import {
+  createLauncherBuildJob,
+  listLauncherBuildJobs,
+  listLauncherVersions,
+  type LauncherBuildJob,
+  type LauncherVersion
+} from './launcher-api';
+
+const r2PublicBaseUrl = import.meta.env.VITE_R2_PUBLIC_BASE_URL ?? '';
+const r2ArtifactPrefix = import.meta.env.VITE_R2_ARTIFACT_PREFIX ?? 'studio-artifacts';
+
+function formatDate(value: string) {
+  return formatDateTime(value);
+}
+
+function statusText(status: LauncherBuildJob['status']) {
+  if (status === 'SUCCEEDED') return '성공';
+  if (status === 'RUNNING') return '실행 중';
+  if (status === 'PENDING') return '대기';
+  if (status === 'FAILED') return '실패';
+  if (status === 'CANCELED') return '취소';
+  return status;
+}
+
+function statusTone(status: LauncherBuildJob['status']): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
+  if (status === 'SUCCEEDED') return 'green';
+  if (status === 'RUNNING') return 'blue';
+  if (status === 'PENDING') return 'amber';
+  if (status === 'FAILED') return 'red';
+  return 'neutral';
+}
+
+function jobTime(job: LauncherBuildJob) {
+  const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
+  return Number.isNaN(value) ? 0 : value;
+}
+
+const launcherBuildJobPageSize = 3;
+
+function sanitizeObjectKeyPart(value: string) {
+  return value
+    .trim()
+    .replace(/^\/+|\/+$/g, '')
+    .replace(/[^a-zA-Z0-9._@+=-]+/g, '-')
+    || 'unknown';
+}
+
+function encodeObjectKey(key: string) {
+  return key.split('/').map(encodeURIComponent).join('/');
+}
+
+function launcherArtifactKey(version: string, branch: string, commitSha: string, artifactName: string) {
+  const revision = commitSha.trim().slice(0, 7) || 'latest';
+  return [
+    r2ArtifactPrefix,
+    'launcher',
+    version || '0.0.0',
+    branch || 'release',
+    revision,
+    artifactName,
+  ].map(sanitizeObjectKeyPart).join('/');
+}
+
+export function LauncherBuildPage() {
+  const { toast } = useToast();
+  const [versions, setVersions] = useState<LauncherVersion[]>([]);
+  const [version, setVersion] = useState('');
+  const [branch, setBranch] = useState('release');
+  const [commitSha, setCommitSha] = useState('');
+  const [jobs, setJobs] = useState<LauncherBuildJob[]>([]);
+  const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const loadingVisible = useMinimumLoading(loading);
+
+  const activeVersion = useMemo(() => versions.find((item) => item.isActive) ?? versions[0], [versions]);
+  const artifactName = `autonomy-studio-launcher-${version || activeVersion?.version || '0.0.0'}.deb`;
+  const uploadPath = launcherArtifactKey(version || activeVersion?.version || '0.0.0', branch, commitSha, artifactName);
+  const downloadUrl = r2PublicBaseUrl ? `${r2PublicBaseUrl.replace(/\/$/, '')}/${encodeObjectKey(uploadPath)}` : '백엔드 R2 설정 기준으로 생성됩니다.';
+  const sortedJobs = useMemo(() => [...jobs].sort((a, b) => jobTime(b) - jobTime(a)), [jobs]);
+  const totalPages = Math.max(1, Math.ceil(sortedJobs.length / launcherBuildJobPageSize));
+  const currentPage = Math.min(page, totalPages);
+  const pageStart = (currentPage - 1) * launcherBuildJobPageSize;
+  const pagedJobs = sortedJobs.slice(pageStart, pageStart + launcherBuildJobPageSize);
+
+  const refresh = () => {
+    setLoading(true);
+    Promise.all([listLauncherVersions(), listLauncherBuildJobs()])
+      .then(([nextVersions, nextJobs]) => {
+        setVersions(nextVersions);
+        setJobs(nextJobs);
+        const nextVersion = nextVersions.find((item) => item.isActive) ?? nextVersions[0];
+        setVersion(nextVersion?.version ?? '');
+        setBranch(nextVersion?.branch ?? 'release');
+        setCommitSha(nextVersion?.commitSha ?? '');
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '런처 버전 조회 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const createJob = () => {
+    setLoading(true);
+    createLauncherBuildJob({
+      target: 'launcher-client',
+      repository: activeVersion?.repository ?? undefined,
+      branch,
+      commitSha: commitSha.trim() || undefined,
+      version: version.trim(),
+      uploadPath,
+      artifact: artifactName,
+      downloadUrl: r2PublicBaseUrl ? downloadUrl : undefined
+    })
+      .then(({ job }) => {
+        setJobs((prev) => [job, ...prev]);
+        setPage(1);
+        setSelectedJob(job);
+        toast({ type: 'success', title: '빌드 작업', message: '런처 빌드 작업이 생성되었습니다.' });
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '빌드 작업 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="런처 운영"
+        title="빌드 관리"
+        description="런처 설치 파일을 만들고 내부 파일 서버 업로드 위치를 관리합니다."
+        actions={
+          <Button className="h-8 px-3 text-[13px]" onClick={createJob} disabled={!version.trim()}>
+            <Play className="size-4" />
+            실행
+          </Button>
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="빌드 요청" description="브랜치와 커밋 기준으로 런처 설치 파일을 생성합니다." />
+          <div className="space-y-4 p-5">
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">버전</span>
+              <input 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={version} onChange={(event) => setVersion(event.target.value)} />
+            </label>
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">브랜치</span>
+              <select 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={branch} onChange={(event) => setBranch(event.target.value)}>
+                <option value="develop">develop</option>
+                <option value="release">release</option>
+                <option value="main">main</option>
+              </select>
+            </label>
+            <label className="block">
+              <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">예상 산출물</p>
+              <p className="mt-2 break-all font-mono text-xs text-foreground">{artifactName}</p>
+              <p className="mt-2 text-xs text-muted-foreground">R2 Object Key</p>
+              <p className="mt-1 break-all font-mono text-xs text-foreground">{uploadPath}</p>
+              <p className="mt-2 text-xs text-muted-foreground">다운로드 URL</p>
+              <p className="mt-1 break-all font-mono text-xs text-foreground">{downloadUrl}</p>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="빌드 작업 목록" description="생성된 런처 빌드 작업과 업로드 계획입니다." />
+          <div className="flex justify-end px-4 pt-4">
+            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
+              <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
+              새로고침
+            </Button>
+          </div>
+          <div className="space-y-3 p-4">
+            {jobs.length === 0 ? (
+              <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
+                빌드 작업이 없습니다.
+              </div>
+            ) : null}
+            {pagedJobs.map((job, index) => (
+              <div key={job.id} className="rounded-md border border-border bg-background/70 p-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-xs font-medium text-muted-foreground">No. {sortedJobs.length - (pageStart + index)}</span>
+                      <Badge tone={statusTone(job.status)}>{statusText(job.status)}</Badge>
+                      <span className="font-medium">{job.target}</span>
+                    </div>
+                    <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                      <span>브랜치 <b className="text-foreground">{job.branch}</b></span>
+                      <span>커밋 <b className="font-mono text-foreground">{job.commitSha || '-'}</b></span>
+                      <span>생성 <b className="text-foreground">{formatDate(job.createdAt)}</b></span>
+                    </div>
+                  </div>
+                  <Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}>
+                    <MoreHorizontal className="size-4" />
+                  </Button>
+                </div>
+                <div className="mt-3 grid gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
+                  <div className="min-w-0">
+                    <p className="text-muted-foreground">산출물</p>
+                    <p className="mt-1 truncate font-mono font-medium">{job.artifact}</p>
+                  </div>
+                  <div className="min-w-0">
+                    <p className="text-muted-foreground">다운로드 URL</p>
+                    <p className="mt-1 truncate font-mono font-medium">{job.downloadUrl || '-'}</p>
+                  </div>
+                  <div className="min-w-0 md:col-span-2">
+                    <p className="text-muted-foreground">R2 Object Key</p>
+                    <p className="mt-1 truncate font-mono font-medium">{job.uploadPath}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
+            <span className="text-xs text-muted-foreground">
+              {loading ? '불러오는 중' : `총 ${sortedJobs.length}건 · ${currentPage} / ${totalPages}`}
+            </span>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                className="h-8 px-3 text-[13px]"
+                disabled={currentPage <= 1}
+                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+              >
+                <ChevronLeft className="size-4" />
+                이전
+              </Button>
+              <Button
+                variant="outline"
+                className="h-8 px-3 text-[13px]"
+                disabled={currentPage >= totalPages}
+                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+              >
+                다음
+                <ChevronRight className="size-4" />
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Modal
+        open={Boolean(selectedJob)}
+        title="런처 빌드 로그"
+        onClose={() => setSelectedJob(null)}
+        className="log-modal-shell"
+        footer={<Button variant="outline" onClick={() => setSelectedJob(null)}>닫기</Button>}
+      >
+        <pre className="whitespace-pre-wrap bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
+          {selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
+        </pre>
+      </Modal>
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}
@@ -0,0 +1,307 @@
+import { MoreHorizontal, Plus, SlidersHorizontal, Trash2 } from 'lucide-react';
+import { useEffect, useMemo, useState, type FormEvent } from 'react';
+import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
+import { useToast } from '../../components/toast';
+import { authApiEndpoints } from '../../data/mock';
+import { PageTitle } from '../../layout/AppLayout';
+import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
+import {
+  createLauncherCommonSetting,
+  deleteLauncherCommonSetting,
+  listLauncherCommonSettings,
+  updateLauncherCommonSetting,
+  type LauncherCommonSetting
+} from './launcher-api';
+
+type FormState = {
+  key: string;
+  name: string;
+  type: string;
+  value: string;
+  description: string;
+  isActive: boolean;
+  isSecret: boolean;
+};
+
+const emptyForm: FormState = {
+  key: '',
+  name: '',
+  type: 'endpoint',
+  value: '',
+  description: '',
+  isActive: true,
+  isSecret: false
+};
+
+function maskValue(setting: LauncherCommonSetting) {
+  if (!setting.isSecret) return setting.value;
+  if (!setting.value) return '-';
+  return '******';
+}
+
+function toForm(setting?: LauncherCommonSetting): FormState {
+  if (!setting) return emptyForm;
+  return {
+    key: setting.key,
+    name: setting.name,
+    type: setting.type,
+    value: setting.value,
+    description: setting.description ?? '',
+    isActive: setting.isActive,
+    isSecret: setting.isSecret
+  };
+}
+
+export function LauncherCommonSettingsPage() {
+  const { toast } = useToast();
+  const [apiOpen, setApiOpen] = useState(false);
+  const [settings, setSettings] = useState<LauncherCommonSetting[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState<LauncherCommonSetting | null>(null);
+  const [form, setForm] = useState<FormState>(emptyForm);
+  const [saving, setSaving] = useState(false);
+  const loadingVisible = useMinimumLoading(loading);
+
+  const summary = useMemo(() => ({
+    total: settings.length,
+    endpoint: settings.filter((item) => item.type === 'endpoint').length,
+    database: settings.filter((item) => item.type === 'database').length,
+    active: settings.filter((item) => item.isActive).length
+  }), [settings]);
+
+  const refresh = () => {
+    setLoading(true);
+    listLauncherCommonSettings()
+      .then(setSettings)
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '공통 설정 조회 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setModalOpen(true);
+  };
+
+  const openEdit = (setting: LauncherCommonSetting) => {
+    setEditing(setting);
+    setForm(toForm(setting));
+    setModalOpen(true);
+  };
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setSaving(true);
+    const payload = {
+      key: form.key.trim(),
+      name: form.name.trim(),
+      type: form.type.trim(),
+      value: form.value.trim(),
+      description: form.description.trim(),
+      isActive: form.isActive,
+      isSecret: form.isSecret
+    };
+    const request = editing
+      ? updateLauncherCommonSetting(editing.id, payload)
+      : createLauncherCommonSetting(payload);
+
+    request
+      .then(() => {
+        toast({ type: 'success', message: editing ? '설정을 수정했습니다.' : '설정을 추가했습니다.' });
+        setModalOpen(false);
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: editing ? '설정 수정 실패' : '설정 추가 실패', message: error.message });
+      })
+      .finally(() => setSaving(false));
+  };
+
+  const remove = () => {
+    if (!editing) return;
+    setSaving(true);
+    deleteLauncherCommonSetting(editing.id)
+      .then(() => {
+        toast({ type: 'success', message: '설정을 삭제했습니다.' });
+        setModalOpen(false);
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '설정 삭제 실패', message: error.message });
+      })
+      .finally(() => setSaving(false));
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="런처 운영"
+        title="공통 설정"
+        description="런처에서 공통으로 사용하는 연결값과 기본 설정을 관리합니다."
+        actions={
+          <>
+            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={() => setApiOpen(true)}>
+              <SlidersHorizontal className="size-4" />
+              공통 인증 API 보기
+            </Button>
+            <Button className="h-8 px-3 text-[13px]" onClick={openCreate}>
+              <Plus className="size-4" />
+              설정 추가
+            </Button>
+          </>
+        }
+      />
+
+      <div className="grid gap-4 md:grid-cols-4">
+        {[
+          ['설정 항목', `${summary.total}개`],
+          ['Endpoint', `${summary.endpoint}개`],
+          ['Database', `${summary.database}개`],
+          ['활성 상태', `${summary.active}개`]
+        ].map(([label, value]) => (
+          <Card className="p-5" key={label}>
+            <p className="text-sm text-muted-foreground">{label}</p>
+            <p className="mt-3 text-2xl font-semibold">{value}</p>
+          </Card>
+        ))}
+      </div>
+
+      <Card className="mt-4 min-w-0 overflow-hidden">
+        <CardHeader title="런처 연결 설정" description="여러 기능에서 함께 쓰는 주소, 인증, 저장소 관련 값을 정리합니다." />
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[1120px] text-left text-sm">
+            <thead className="border-b border-border text-xs text-muted-foreground">
+              <tr>
+                <th className="w-[280px] px-5 py-3 font-medium">설정</th>
+                <th className="px-5 py-3 font-medium">Key</th>
+                <th className="px-5 py-3 font-medium">Type</th>
+                <th className="px-5 py-3 font-medium">Value</th>
+                <th className="px-5 py-3 text-right font-medium">관리</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {!loading && settings.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-5 py-12 text-center text-sm text-muted-foreground">등록된 설정이 없습니다.</td>
+                </tr>
+              ) : null}
+              {settings.map((setting) => (
+                <tr className="hover:bg-muted/20" key={setting.id}>
+                  <td className="px-5 py-3">
+                    <p className="inline-flex items-center gap-2 font-medium">
+                      <span className={setting.isActive ? 'size-2 rounded-full bg-emerald-400' : 'size-2 rounded-full bg-muted-foreground'} />
+                      {setting.name}
+                    </p>
+                    {setting.description ? <p className="mt-1 truncate text-xs text-muted-foreground">{setting.description}</p> : null}
+                  </td>
+                  <td className="px-5 py-3 font-medium">{setting.key}</td>
+                  <td className="px-5 py-3">{setting.type}</td>
+                  <td className="px-5 py-3 text-muted-foreground">{maskValue(setting)}</td>
+                  <td className="px-5 py-3 text-right">
+                    <Button variant="ghost" className="size-8 px-0" aria-label={`${setting.name} 관리`} onClick={() => openEdit(setting)}>
+                      <MoreHorizontal className="size-4" />
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      <Modal
+        open={modalOpen}
+        title={editing ? '설정 수정' : '설정 추가'}
+        onClose={() => setModalOpen(false)}
+        className="!max-w-2xl"
+        footer={
+          <>
+            {editing ? (
+              <Button variant="outline" className="border-rose-500/40 text-rose-300 hover:bg-rose-500/10" onClick={remove} disabled={saving}>
+                <Trash2 className="size-4" />
+                삭제
+              </Button>
+            ) : null}
+            <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+            <Button onClick={submit as unknown as () => void} disabled={saving || !form.key.trim() || !form.name.trim() || !form.type.trim()}>
+              {saving ? '저장 중' : '저장'}
+            </Button>
+          </>
+        }
+      >
+        <form className="grid gap-4" onSubmit={submit}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">설정명</span>
+              <input 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={form.name} onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))} />
+            </label>
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">Type</span>
+              <input 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={form.type} onChange={(event) => setForm((prev) => ({ ...prev, type: event.target.value }))} />
+            </label>
+          </div>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">Key</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 focus:ring-2 focus:ring-ring" value={form.key} onChange={(event) => setForm((prev) => ({ ...prev, key: event.target.value }))} />
+          </label>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">Value</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 focus:ring-2 focus:ring-ring" value={form.value} onChange={(event) => setForm((prev) => ({ ...prev, value: event.target.value }))} />
+          </label>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">설명</span>
+            <textarea className="mt-2 min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.description} onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))} />
+          </label>
+          <div className="flex flex-wrap gap-4">
+            <label className="inline-flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={form.isActive} onChange={(event) => setForm((prev) => ({ ...prev, isActive: event.target.checked }))} />
+              활성
+            </label>
+            <label className="inline-flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={form.isSecret} onChange={(event) => setForm((prev) => ({ ...prev, isSecret: event.target.checked }))} />
+              민감값
+            </label>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal open={apiOpen} title="공통 인증 API" onClose={() => setApiOpen(false)} className="!max-w-[1280px]" footer={<Button variant="ghost" onClick={() => setApiOpen(false)}>닫기</Button>}>
+        <div className="max-h-[70vh] overflow-x-auto overflow-y-auto">
+          <table className="w-full min-w-[980px] 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">Method</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">권한</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {authApiEndpoints.map((endpoint) => (
+                <tr className="hover:bg-muted/20" key={`${endpoint.method}-${endpoint.path}`}>
+                  <td className="px-5 py-3">{endpoint.group}</td>
+                  <td className="px-5 py-3 font-semibold">{endpoint.method}</td>
+                  <td className="px-5 py-3 font-medium">{endpoint.path}</td>
+                  <td className="px-5 py-3 text-muted-foreground">{endpoint.purpose}</td>
+                  <td className="px-5 py-3">
+                    <Badge tone={endpoint.auth === '없음' ? 'neutral' : endpoint.auth === 'ADMIN' ? 'amber' : 'blue'}>{endpoint.auth}</Badge>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Modal>
+
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}
@@ -0,0 +1,188 @@
+import { Copy, ExternalLink, Link2, RotateCcw } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { Badge, Button, Card, CardHeader } from '../../components/ui';
+import { useToast } from '../../components/toast';
+import { PageTitle } from '../../layout/AppLayout';
+import type { GiteaRepo } from '../../types/application';
+import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
+import { getLauncherSource, listLauncherVersions, listPlatformRepos, updateLauncherSource, type LauncherVersion } from './launcher-api';
+
+const giteaBaseUrl = import.meta.env.VITE_GITEA_BASE_URL ?? 'http://localhost:3000';
+const giteaSshBaseUrl = import.meta.env.VITE_GITEA_SSH_BASE_URL ?? 'ssh://git@localhost:2222';
+const giteaAppOrg = import.meta.env.VITE_GITEA_APP_ORG ?? 'platform';
+
+function repoFullName(repo: GiteaRepo) {
+  return (repo as GiteaRepo & { fullName?: string }).fullName ?? repo.full_name ?? normalizeRepository(repo.name);
+}
+
+function normalizeRepository(repository?: string | null) {
+  if (!repository) return '';
+  const value = repository.replace(/^\/+|\/+$/g, '');
+  return value.includes('/') ? value : `${giteaAppOrg}/${value}`;
+}
+
+function httpCloneUrl(repository?: string | null) {
+  const normalizedRepository = normalizeRepository(repository);
+  return normalizedRepository ? `${giteaBaseUrl.replace(/\/$/, '')}/${normalizedRepository}.git` : '-';
+}
+
+function sshCloneUrl(repository?: string | null) {
+  const normalizedRepository = normalizeRepository(repository);
+  return normalizedRepository ? `${giteaSshBaseUrl.replace(/\/$/, '')}/${normalizedRepository}.git` : '-';
+}
+
+export function LauncherSourcePage() {
+  const { toast } = useToast();
+  const [versions, setVersions] = useState<LauncherVersion[]>([]);
+  const [repos, setRepos] = useState<GiteaRepo[]>([]);
+  const [repository, setRepository] = useState('');
+  const [branch, setBranch] = useState('release');
+  const [commitSha, setCommitSha] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const loadingVisible = useMinimumLoading(loading);
+
+  const activeVersion = useMemo(() => versions.find((version) => version.isActive) ?? versions[0], [versions]);
+
+  const refresh = () => {
+    setLoading(true);
+    Promise.all([listLauncherVersions(), listPlatformRepos(), getLauncherSource()])
+      .then(([nextVersions, nextRepos, sourceResult]) => {
+        setVersions(nextVersions);
+        setRepos(nextRepos);
+        const nextVersion = nextVersions.find((version) => version.isActive) ?? nextVersions[0];
+        setRepository(sourceResult.source.repository ?? nextVersion?.repository ?? (nextRepos[0] ? repoFullName(nextRepos[0]) : ''));
+        setBranch(sourceResult.source.branch ?? nextVersion?.branch ?? 'release');
+        setCommitSha(sourceResult.source.commitSha ?? nextVersion?.commitSha ?? '');
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '소스 정보 조회 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const save = () => {
+    if (!repository.trim()) return;
+    setSaving(true);
+    updateLauncherSource({
+      repository: repository.trim(),
+      branch: branch.trim() || undefined,
+      commitSha: commitSha.trim() || undefined
+    })
+      .then(() => {
+        toast({ type: 'success', title: '소스 연결', message: '런처 소스 연결을 저장했습니다.' });
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '소스 연결 실패', message: error.message });
+      })
+      .finally(() => setSaving(false));
+  };
+
+  const copy = (value: string) => {
+    navigator.clipboard?.writeText(value);
+    toast({ type: 'success', message: '복사되었습니다.' });
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="런처 운영"
+        title="소스 관리"
+        description="런처 클라이언트와 관련 소스 저장소를 연결합니다."
+        actions={
+          <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
+            <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
+            새로고침
+          </Button>
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,620px)_minmax(0,1fr)]">
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="소스 연결" description="런처 빌드에 사용할 저장소와 기준 브랜치를 선택합니다." />
+          <div className="grid gap-4 p-5 md:grid-cols-3">
+            <label className="block md:col-span-2">
+              <span className="text-xs font-medium text-muted-foreground">저장소</span>
+              <select
+                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={repository}
+                onChange={(event) => setRepository(event.target.value)}
+              >
+                {repos.length === 0 ? <option value="">등록된 저장소 없음</option> : null}
+                {repos.map((repo) => <option key={repoFullName(repo)} value={repoFullName(repo)}>{repoFullName(repo)}</option>)}
+              </select>
+            </label>
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">브랜치</span>
+              <select
+                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={branch}
+                onChange={(event) => setBranch(event.target.value)}
+              >
+                <option value="develop">develop</option>
+                <option value="release">release</option>
+                <option value="main">main</option>
+              </select>
+            </label>
+            <label className="block md:col-span-3">
+              <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="flex justify-end md:col-span-3">
+              <Button onClick={save} disabled={!repository.trim() || saving}>
+                <Link2 className="size-4" />
+                저장
+              </Button>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="현재 연결" description="런처 빌드 기준입니다." />
+          <div className="space-y-4 p-5 text-sm">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-muted-foreground">버전</span>
+              <Badge tone={activeVersion?.isActive ? 'green' : 'neutral'}>{activeVersion?.version ?? '-'}</Badge>
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">HTTP Clone URL</p>
+              <div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
+                <p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">{httpCloneUrl(repository)}</p>
+                <Button variant="ghost" className="size-8 px-0" onClick={() => copy(httpCloneUrl(repository))} aria-label="HTTP clone URL 복사">
+                  <Copy className="size-4" />
+                </Button>
+              </div>
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">SSH Clone URL</p>
+              <div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
+                <p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">{sshCloneUrl(repository)}</p>
+                <Button variant="ghost" className="size-8 px-0" onClick={() => copy(sshCloneUrl(repository))} aria-label="SSH clone URL 복사">
+                  <Copy className="size-4" />
+                </Button>
+              </div>
+            </div>
+            {repository ? (
+              <a className="inline-flex items-center gap-1.5 text-xs text-primary" href={`${giteaBaseUrl.replace(/\/$/, '')}/${normalizeRepository(repository)}`} target="_blank" rel="noreferrer">
+                저장소 열기
+                <ExternalLink className="size-3.5" />
+              </a>
+            ) : null}
+          </div>
+        </Card>
+      </div>
+
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}
@@ -0,0 +1,234 @@
+import { Plus, RotateCcw } from 'lucide-react';
+import { useEffect, useMemo, useState, type FormEvent } from 'react';
+import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
+import { useToast } from '../../components/toast';
+import { PageTitle } from '../../layout/AppLayout';
+import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
+import {
+  createLauncherVersion,
+  listLauncherBuildJobs,
+  listLauncherVersions,
+  type LauncherBuildJob,
+  type LauncherVersion
+} from './launcher-api';
+
+function artifactName(version: string) {
+  return `autonomy-studio-launcher-${version || '0.0.0'}.deb`;
+}
+
+export function LauncherVersionsPage() {
+  const { toast } = useToast();
+  const [versions, setVersions] = useState<LauncherVersion[]>([]);
+  const [buildJobs, setBuildJobs] = useState<LauncherBuildJob[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [releaseOpen, setReleaseOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [releaseForm, setReleaseForm] = useState({
+    buildJobId: '',
+    version: '',
+    minimumVersion: '',
+    downloadUrl: '',
+    releaseNotes: ''
+  });
+  const loadingVisible = useMinimumLoading(loading);
+  const launcher = useMemo(() => versions.find((item) => item.isActive) ?? versions[0], [versions]);
+  const successfulBuildJobs = useMemo(() => buildJobs.filter((job) => job.status === 'SUCCEEDED'), [buildJobs]);
+  const selectedBuildJob = useMemo(
+    () => successfulBuildJobs.find((job) => job.id === releaseForm.buildJobId),
+    [releaseForm.buildJobId, successfulBuildJobs]
+  );
+  const currentArtifact = selectedBuildJob?.artifact || artifactName(releaseForm.version);
+
+  const refresh = () => {
+    setLoading(true);
+    Promise.all([listLauncherVersions(), listLauncherBuildJobs()])
+      .then(([nextVersions, nextBuildJobs]) => {
+        setVersions(nextVersions);
+        setBuildJobs(nextBuildJobs);
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '런처 버전 조회 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const openRelease = () => {
+    const nextVersion = '';
+    const latestBuild = successfulBuildJobs[0];
+    setReleaseForm({
+      buildJobId: latestBuild?.id ?? '',
+      version: nextVersion,
+      minimumVersion: launcher?.minimumVersion ?? '',
+      downloadUrl: latestBuild?.downloadUrl ?? '',
+      releaseNotes: ''
+    });
+    setReleaseOpen(true);
+  };
+
+  const selectBuildJob = (buildJobId: string) => {
+    const buildJob = successfulBuildJobs.find((job) => job.id === buildJobId);
+    setReleaseForm((prev) => ({
+      ...prev,
+      buildJobId,
+      version: buildJob?.version ?? prev.version,
+      downloadUrl: buildJob?.downloadUrl ?? prev.downloadUrl
+    }));
+  };
+
+  const saveRelease = (event: FormEvent) => {
+    event.preventDefault();
+    if (!releaseForm.version.trim() || !releaseForm.downloadUrl.trim()) return;
+    setSaving(true);
+    createLauncherVersion({
+      version: releaseForm.version.trim(),
+      minimumVersion: releaseForm.minimumVersion.trim() || undefined,
+      artifact: currentArtifact,
+      downloadUrl: releaseForm.downloadUrl.trim(),
+      releaseNotes: releaseForm.releaseNotes.trim() || undefined,
+      repository: selectedBuildJob?.repository ?? launcher?.repository ?? undefined,
+      branch: selectedBuildJob?.branch ?? launcher?.branch ?? 'release',
+      commitSha: selectedBuildJob?.commitSha ?? launcher?.commitSha ?? undefined
+    })
+      .then(() => {
+        toast({ type: 'success', message: '릴리즈를 등록했습니다.' });
+        setReleaseOpen(false);
+        refresh();
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '릴리즈 등록 실패', message: error.message });
+      })
+      .finally(() => setSaving(false));
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="런처 운영"
+        title="버전 관리"
+        description="스튜디오 메인 런처의 버전과 배포 파일 정보를 관리합니다."
+        actions={
+          <>
+            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
+              <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
+              새로고침
+            </Button>
+            <Button className="h-8 px-3 text-[13px]" onClick={openRelease}>
+              <Plus className="size-4" />
+              릴리즈 등록
+            </Button>
+          </>
+        }
+      />
+
+      {!loading && !launcher ? <Card className="px-5 py-12 text-center text-sm text-muted-foreground">등록된 런처 버전이 없습니다.</Card> : null}
+
+      {launcher ? (
+        <div className="grid gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(360px,0.65fr)]">
+          <Card>
+            <CardHeader title="메인 런처 배포 상태" description="현재 배포 기준으로 사용하는 런처 정보입니다." />
+            <div className="space-y-4 p-5">
+              <div className="flex flex-col gap-4 rounded-md border border-border bg-muted/20 p-4 md:flex-row md:items-center md:justify-between">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <p className="text-base font-semibold">Autonomy Studio Launcher</p>
+                    <Badge tone={launcher.isActive ? 'green' : 'neutral'}>{launcher.isActive ? '활성' : '비활성'}</Badge>
+                  </div>
+                  <p className="mt-2 text-sm text-muted-foreground">최신 {launcher.version} · 최소 지원 {launcher.minimumVersion || '-'}</p>
+                </div>
+              </div>
+              <div className="grid gap-3">
+                <div className="rounded-md border border-border bg-background p-4">
+                  <p className="text-xs text-muted-foreground">배포 파일</p>
+                  <p className="mt-2 break-all font-mono text-sm font-medium">{launcher.artifact}</p>
+                </div>
+                <div className="rounded-md border border-border bg-background p-4">
+                  <p className="text-xs text-muted-foreground">다운로드 URL</p>
+                  <p className="mt-2 break-all font-mono text-xs text-muted-foreground">{launcher.downloadUrl || '-'}</p>
+                </div>
+              </div>
+              <div className="rounded-md border border-border bg-background p-4">
+                <p className="text-xs text-muted-foreground">소스 기준</p>
+                <div className="mt-3 grid gap-3 text-sm md:grid-cols-3">
+                  <div>
+                    <p className="text-xs text-muted-foreground">Repository</p>
+                    <p className="mt-1 truncate font-medium">{launcher.repository || '-'}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-muted-foreground">Branch</p>
+                    <p className="mt-1 truncate font-medium">{launcher.branch || '-'}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-muted-foreground">Commit SHA</p>
+                    <p className="mt-1 truncate font-mono text-xs text-muted-foreground">{launcher.commitSha || '-'}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+          <Card>
+            <CardHeader title="릴리즈 노트" description="최근 런처 배포 메모입니다." />
+            <div className="p-5 text-sm leading-6 text-muted-foreground">{launcher.releaseNotes || '-'}</div>
+          </Card>
+        </div>
+      ) : null}
+
+      <Modal
+        open={releaseOpen}
+        title="릴리즈 등록"
+        onClose={() => setReleaseOpen(false)}
+        className="!max-w-3xl"
+        footer={<><Button variant="outline" onClick={() => setReleaseOpen(false)}>취소</Button><Button onClick={saveRelease as unknown as () => void} disabled={saving || !releaseForm.version.trim() || !releaseForm.downloadUrl.trim()}>{saving ? '등록 중' : '등록'}</Button></>}
+      >
+        <form className="space-y-5" onSubmit={saveRelease}>
+          <div className="rounded-md border border-border bg-background px-4 py-3">
+            <p className="text-sm font-medium">배포 파일 기준 등록</p>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">빌드가 끝난 `.deb` 파일의 버전과 다운로드 URL을 런처 배포 기준으로 저장합니다.</p>
+          </div>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">빌드 결과</span>
+            <select
+              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={releaseForm.buildJobId}
+              onChange={(event) => selectBuildJob(event.target.value)}
+            >
+              <option value="">직접 입력</option>
+              {successfulBuildJobs.map((job) => (
+                <option key={job.id} value={job.id}>
+                  {job.version} · {job.artifact}
+                </option>
+              ))}
+            </select>
+          </label>
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">버전</span>
+              <input 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={releaseForm.version} onChange={(event) => setReleaseForm((prev) => ({ ...prev, version: event.target.value }))} placeholder="예: 1.0.2" />
+            </label>
+            <label className="block">
+              <span className="text-xs font-medium text-muted-foreground">최소 지원 버전</span>
+              <input 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={releaseForm.minimumVersion} onChange={(event) => setReleaseForm((prev) => ({ ...prev, minimumVersion: event.target.value }))} placeholder="예: 1.0.0" />
+            </label>
+          </div>
+          <div className="rounded-md border border-border bg-background px-4 py-3">
+            <p className="text-xs text-muted-foreground">배포 파일</p>
+            <p className="mt-2 break-all font-mono text-xs">{currentArtifact}</p>
+          </div>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">다운로드 URL</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 focus:ring-2 focus:ring-ring" value={releaseForm.downloadUrl} onChange={(event) => setReleaseForm((prev) => ({ ...prev, downloadUrl: event.target.value }))} placeholder="https://.../autonomy-studio-launcher-1.0.2.deb" />
+          </label>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">릴리즈 노트</span>
+            <textarea className="mt-2 min-h-28 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={releaseForm.releaseNotes} onChange={(event) => setReleaseForm((prev) => ({ ...prev, releaseNotes: event.target.value }))} />
+          </label>
+        </form>
+      </Modal>
+
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}
@@ -0,0 +1,252 @@
+import { apiRequest } from '../../lib/api';
+import type { AppRelease, AppWithComponents } from '../../types/application';
+import type { GiteaRepo } from '../../types/application';
+
+export type LauncherVersion = {
+  id: string;
+  version: string;
+  minimumVersion?: string | null;
+  artifact: string;
+  downloadUrl: string;
+  releaseNotes?: string | null;
+  repository?: string | null;
+  branch?: string | null;
+  commitSha?: string | null;
+  isActive: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type LauncherBuildJob = {
+  id: string;
+  target: string;
+  repository?: string | null;
+  branch: string;
+  commitSha?: string | null;
+  version: string;
+  uploadPath: string;
+  downloadUrl: string;
+  artifact: string;
+  status: 'PENDING' | 'RUNNING' | 'SUCCEEDED' | 'FAILED' | 'CANCELED';
+  logs?: string | null;
+  startedAt?: string | null;
+  finishedAt?: string | null;
+  createdAt: string;
+  updatedAt?: string;
+};
+
+export type LauncherSource = {
+  repository?: string | null;
+  branch?: string | null;
+  commitSha?: string | null;
+};
+
+export type LauncherAppLink = {
+  id: string;
+  appId: string;
+  releaseId?: string | null;
+  displayOrder: number;
+  isEnabled: boolean;
+  displayName?: string | null;
+  description?: string | null;
+  subtitle?: string | null;
+  detailUrl?: string | null;
+  videoPath?: string | null;
+  iconKey?: string | null;
+  launchUrl?: string | null;
+  devAppPath?: string | null;
+  execPath?: string | null;
+  artifact?: string | null;
+  createdAt: string;
+  updatedAt?: string;
+  app: AppWithComponents;
+  release?: AppRelease | null;
+};
+
+export type LauncherCommonSetting = {
+  id: string;
+  key: string;
+  name: string;
+  type: string;
+  value: string;
+  description?: string | null;
+  isActive: boolean;
+  isSecret: boolean;
+  createdAt: string;
+  updatedAt?: string;
+};
+
+export type LauncherUnlinkedApp = AppWithComponents & {
+  releases?: AppRelease[];
+};
+
+export function listLauncherVersions() {
+  return apiRequest<LauncherVersion[]>('/launcher/versions');
+}
+
+export function createLauncherVersion(input: {
+  version: string;
+  minimumVersion?: string;
+  artifact: string;
+  downloadUrl: string;
+  releaseNotes?: string;
+  repository?: string;
+  branch?: string;
+  commitSha?: string;
+}) {
+  return apiRequest<{ version: LauncherVersion }>('/launcher/versions', {
+    method: 'POST',
+    body: JSON.stringify(input)
+  });
+}
+
+export function linkLauncherVersionSource(
+  versionId: string,
+  input: { repository: string; branch?: string; commitSha?: string }
+) {
+  return apiRequest<{ version: LauncherVersion }>(`/launcher/versions/${versionId}/source`, {
+    method: 'PATCH',
+    body: JSON.stringify(input)
+  });
+}
+
+export function getLauncherSource() {
+  return apiRequest<{ source: LauncherSource }>('/launcher/source');
+}
+
+export function updateLauncherSource(input: { repository: string; branch?: string; commitSha?: string }) {
+  return apiRequest<{ source: LauncherSource }>('/launcher/source', {
+    method: 'PATCH',
+    body: JSON.stringify(input)
+  });
+}
+
+export function listPlatformRepos(limit = 50) {
+  return apiRequest<{ owner: string | null; repos: GiteaRepo[] }>(`/gitea/repos?owner=platform&limit=${limit}`)
+    .then((result) => result.repos);
+}
+
+export function listLauncherBuildJobs() {
+  return apiRequest<LauncherBuildJob[]>('/launcher/builds');
+}
+
+export function createLauncherBuildJob(input: {
+  target?: string;
+  repository?: string;
+  branch?: string;
+  commitSha?: string;
+  version: string;
+  artifact: string;
+  uploadPath?: string;
+  downloadUrl?: string;
+}) {
+  return apiRequest<{ job: LauncherBuildJob }>('/launcher/builds', {
+    method: 'POST',
+    body: JSON.stringify(input)
+  });
+}
+
+export function listLauncherAppLinks() {
+  return apiRequest<{ linked: LauncherAppLink[]; unlinked: LauncherUnlinkedApp[] }>('/launcher/app-links');
+}
+
+export function syncLauncherAppsToAdminApps() {
+  return apiRequest<{ syncedApps: number; syncedReleases: number }>('/launcher/app-links/sync-admin-apps', {
+    method: 'POST'
+  });
+}
+
+export function createLauncherAppLink(input: {
+  appId: string;
+  releaseId?: string;
+  displayOrder?: number;
+  displayName?: string;
+  description?: string;
+  subtitle?: string;
+  detailUrl?: string;
+  videoPath?: string;
+  iconKey?: string;
+  launchUrl?: string;
+  devAppPath?: string;
+  execPath?: string;
+  artifact?: string;
+}) {
+  return apiRequest<{ link: LauncherAppLink }>('/launcher/app-links', {
+    method: 'POST',
+    body: JSON.stringify(input)
+  });
+}
+
+export function updateLauncherAppLink(
+  id: string,
+  input: Partial<{
+    displayOrder: number;
+    isEnabled: boolean;
+    displayName: string;
+    description: string;
+    subtitle: string;
+    detailUrl: string;
+    videoPath: string;
+    iconKey: string;
+    launchUrl: string;
+    devAppPath: string;
+    execPath: string;
+  }>
+) {
+  return apiRequest<{ link: LauncherAppLink }>(`/launcher/app-links/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(input)
+  });
+}
+
+export function moveLauncherAppLink(id: string, direction: 'up' | 'down') {
+  return apiRequest<{ linked: LauncherAppLink[]; unlinked: LauncherUnlinkedApp[] }>(`/launcher/app-links/${id}/move`, {
+    method: 'PATCH',
+    body: JSON.stringify({ direction })
+  });
+}
+
+export function deleteLauncherAppLink(id: string) {
+  return apiRequest<{ deleted: boolean }>(`/launcher/app-links/${id}`, { method: 'DELETE' });
+}
+
+export function listLauncherCommonSettings() {
+  return apiRequest<LauncherCommonSetting[]>('/launcher/common-settings');
+}
+
+export function createLauncherCommonSetting(input: {
+  key: string;
+  name: string;
+  type: string;
+  value: string;
+  description?: string;
+  isActive?: boolean;
+  isSecret?: boolean;
+}) {
+  return apiRequest<{ setting: LauncherCommonSetting }>('/launcher/common-settings', {
+    method: 'POST',
+    body: JSON.stringify(input)
+  });
+}
+
+export function updateLauncherCommonSetting(
+  id: string,
+  input: Partial<{
+    key: string;
+    name: string;
+    type: string;
+    value: string;
+    description: string;
+    isActive: boolean;
+    isSecret: boolean;
+  }>
+) {
+  return apiRequest<{ setting: LauncherCommonSetting }>(`/launcher/common-settings/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(input)
+  });
+}
+
+export function deleteLauncherCommonSetting(id: string) {
+  return apiRequest<{ deleted: boolean }>(`/launcher/common-settings/${id}`, { method: 'DELETE' });
+}