split launcher source and build by component

src/pages/launcher/LauncherSourcePage.tsx

@@ -3,57 +3,129 @@ 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 { cn } from '../../lib/utils';
 import type { GiteaRepo } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
-import { getLauncherSource, listLauncherVersions, listPlatformRepos, updateLauncherSource, type LauncherVersion } from './launcher-api';
+import {
+  getLauncherSource,
+  listLauncherVersions,
+  listPlatformRepos,
+  listStudioRepos,
+  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';
 
+type SourceTarget = 'launcher-client' | 'launcher-backend';
+
+type SourceForm = {
+  repository: string;
+  branch: string;
+  commitSha: string;
+  image: string;
+  dockerfile: string;
+};
+
+const targetLabels: Record<SourceTarget, { title: string; description: string; defaultOrg: string }> = {
+  'launcher-client': {
+    title: '클라이언트',
+    description: '사용자 PC에 설치되는 Electron .deb 빌드 소스입니다.',
+    defaultOrg: 'platform'
+  },
+  'launcher-backend': {
+    title: '백엔드',
+    description: 'portal-api 런처 백엔드 컨테이너 이미지 빌드 소스입니다.',
+    defaultOrg: 'studio'
+  }
+};
+
 function repoFullName(repo: GiteaRepo) {
   return (repo as GiteaRepo & { fullName?: string }).fullName ?? repo.full_name ?? normalizeRepository(repo.name);
 }
 
-function normalizeRepository(repository?: string | null) {
+function normalizeRepository(repository?: string | null, fallbackOrg = giteaAppOrg) {
   if (!repository) return '';
   const value = repository.replace(/^\/+|\/+$/g, '');
-  return value.includes('/') ? value : `${giteaAppOrg}/${value}`;
+  return value.includes('/') ? value : `${fallbackOrg}/${value}`;
 }
 
-function httpCloneUrl(repository?: string | null) {
-  const normalizedRepository = normalizeRepository(repository);
+function httpCloneUrl(repository?: string | null, fallbackOrg?: string) {
+  const normalizedRepository = normalizeRepository(repository, fallbackOrg);
   return normalizedRepository ? `${giteaBaseUrl.replace(/\/$/, '')}/${normalizedRepository}.git` : '-';
 }
 
-function sshCloneUrl(repository?: string | null) {
-  const normalizedRepository = normalizeRepository(repository);
+function sshCloneUrl(repository?: string | null, fallbackOrg?: string) {
+  const normalizedRepository = normalizeRepository(repository, fallbackOrg);
   return normalizedRepository ? `${giteaSshBaseUrl.replace(/\/$/, '')}/${normalizedRepository}.git` : '-';
 }
 
+function emptyForm(): SourceForm {
+  return {
+    repository: '',
+    branch: 'release',
+    commitSha: '',
+    image: 'localhost:5000/studio-launcher-be',
+    dockerfile: 'Dockerfile'
+  };
+}
+
 export function LauncherSourcePage() {
   const { toast } = useToast();
+  const [activeTarget, setActiveTarget] = useState<SourceTarget>('launcher-client');
   const [versions, setVersions] = useState<LauncherVersion[]>([]);
   const [repos, setRepos] = useState<GiteaRepo[]>([]);
-  const [repository, setRepository] = useState('');
-  const [branch, setBranch] = useState('release');
-  const [commitSha, setCommitSha] = useState('');
+  const [forms, setForms] = useState<Record<SourceTarget, SourceForm>>({
+    'launcher-client': emptyForm(),
+    'launcher-backend': emptyForm()
+  });
   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 activeForm = forms[activeTarget];
+  const activeTargetMeta = targetLabels[activeTarget];
+
+  const updateForm = (patch: Partial<SourceForm>) => {
+    setForms((prev) => ({
+      ...prev,
+      [activeTarget]: {
+        ...prev[activeTarget],
+        ...patch
+      }
+    }));
+  };
 
   const refresh = () => {
     setLoading(true);
-    Promise.all([listLauncherVersions(), listPlatformRepos(), getLauncherSource()])
-      .then(([nextVersions, nextRepos, sourceResult]) => {
-        setVersions(nextVersions);
-        setRepos(nextRepos);
+    Promise.all([listLauncherVersions(), listPlatformRepos(), listStudioRepos(), getLauncherSource()])
+      .then(([nextVersions, platformRepos, studioRepos, sourceResult]) => {
+        const mergedRepos = [...platformRepos, ...studioRepos];
         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 ?? '');
+        const clientRepository = sourceResult.source.client?.repository ?? sourceResult.source.repository ?? nextVersion?.repository ?? (platformRepos[0] ? repoFullName(platformRepos[0]) : '');
+        const backendRepository = sourceResult.source.backend?.repository ?? (studioRepos[0] ? repoFullName(studioRepos[0]) : '');
+
+        setVersions(nextVersions);
+        setRepos(mergedRepos);
+        setForms({
+          'launcher-client': {
+            repository: clientRepository,
+            branch: sourceResult.source.client?.branch ?? sourceResult.source.branch ?? nextVersion?.branch ?? 'release',
+            commitSha: sourceResult.source.client?.commitSha ?? sourceResult.source.commitSha ?? nextVersion?.commitSha ?? '',
+            image: '',
+            dockerfile: ''
+          },
+          'launcher-backend': {
+            repository: backendRepository,
+            branch: sourceResult.source.backend?.branch ?? 'release',
+            commitSha: sourceResult.source.backend?.commitSha ?? '',
+            image: sourceResult.source.backend?.image ?? 'localhost:5000/studio-launcher-be',
+            dockerfile: sourceResult.source.backend?.dockerfile ?? 'Dockerfile'
+          }
+        });
       })
       .catch((error: Error) => {
         toast({ type: 'error', title: '소스 정보 조회 실패', message: error.message });
@@ -66,15 +138,18 @@ export function LauncherSourcePage() {
   }, []);
 
   const save = () => {
-    if (!repository.trim()) return;
+    if (!activeForm.repository.trim()) return;
     setSaving(true);
     updateLauncherSource({
-      repository: repository.trim(),
-      branch: branch.trim() || undefined,
-      commitSha: commitSha.trim() || undefined
+      target: activeTarget,
+      repository: activeForm.repository.trim(),
+      branch: activeForm.branch.trim() || undefined,
+      commitSha: activeForm.commitSha.trim() || undefined,
+      image: activeTarget === 'launcher-backend' ? activeForm.image.trim() || undefined : undefined,
+      dockerfile: activeTarget === 'launcher-backend' ? activeForm.dockerfile.trim() || undefined : undefined
     })
       .then(() => {
-        toast({ type: 'success', title: '소스 연결', message: '런처 소스 연결을 저장했습니다.' });
+        toast({ type: 'success', title: '소스 연결', message: `${activeTargetMeta.title} 소스 연결을 저장했습니다.` });
         refresh();
       })
       .catch((error: Error) => {
@@ -93,7 +168,7 @@ export function LauncherSourcePage() {
       <PageTitle
         eyebrow="런처 운영"
         title="소스 관리"
-        description="런처 클라이언트와 관련 소스 저장소를 연결합니다."
+        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'} />
@@ -102,27 +177,41 @@ export function LauncherSourcePage() {
         }
       />
 
+      <div className="mb-4 flex flex-wrap gap-2">
+        {(Object.keys(targetLabels) as SourceTarget[]).map((target) => (
+          <Button
+            key={target}
+            variant={activeTarget === target ? 'default' : 'outline'}
+            onClick={() => setActiveTarget(target)}
+          >
+            {targetLabels[target].title}
+          </Button>
+        ))}
+      </div>
+
       <div className="grid gap-4 xl:grid-cols-[minmax(0,620px)_minmax(0,1fr)]">
         <Card className="min-w-0 overflow-hidden">
-          <CardHeader title="소스 연결" description="런처 빌드에 사용할 저장소와 기준 브랜치를 선택합니다." />
+          <CardHeader title={`${activeTargetMeta.title} 소스 연결`} description={activeTargetMeta.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>
+              <input
+                className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+                value={activeForm.repository}
+                onChange={(event) => updateForm({ repository: event.target.value })}
+                list="launcher-source-repositories"
+                placeholder={`${activeTargetMeta.defaultOrg}/repository`}
+              />
+              <datalist id="launcher-source-repositories">
+                {repos.map((repo) => <option key={repoFullName(repo)} value={repoFullName(repo)} />)}
+              </datalist>
             </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)}
+                value={activeForm.branch}
+                onChange={(event) => updateForm({ branch: event.target.value })}
               >
                 <option value="develop">develop</option>
                 <option value="release">release</option>
@@ -133,13 +222,35 @@ export function LauncherSourcePage() {
               <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)}
+                value={activeForm.commitSha}
+                onChange={(event) => updateForm({ commitSha: event.target.value })}
                 placeholder="비워두면 브랜치 최신 커밋 기준"
               />
             </label>
+            {activeTarget === 'launcher-backend' ? (
+              <>
+                <label className="block md:col-span-2">
+                  <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 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+                    value={activeForm.image}
+                    onChange={(event) => updateForm({ image: event.target.value })}
+                    placeholder="localhost:5000/studio-launcher-be"
+                  />
+                </label>
+                <label className="block">
+                  <span className="text-xs font-medium text-muted-foreground">Dockerfile</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={activeForm.dockerfile}
+                    onChange={(event) => updateForm({ dockerfile: event.target.value })}
+                    placeholder="Dockerfile"
+                  />
+                </label>
+              </>
+            ) : null}
             <div className="flex justify-end md:col-span-3">
-              <Button onClick={save} disabled={!repository.trim() || saving}>
+              <Button onClick={save} disabled={!activeForm.repository.trim() || saving}>
                 <Link2 className="size-4" />
                 저장
               </Button>
@@ -148,17 +259,19 @@ export function LauncherSourcePage() {
         </Card>
 
         <Card className="min-w-0 overflow-hidden">
-          <CardHeader title="현재 연결" description="런처 빌드 기준입니다." />
+          <CardHeader title="현재 연결" description={`${activeTargetMeta.title} 빌드 기준입니다.`} />
           <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>
+              <span className="text-muted-foreground">기준</span>
+              <Badge tone={activeTarget === 'launcher-client' && activeVersion?.isActive ? 'green' : 'neutral'}>
+                {activeTarget === 'launcher-client' ? activeVersion?.version ?? '-' : activeForm.image || '-'}
+              </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 복사">
+                <p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">{httpCloneUrl(activeForm.repository, activeTargetMeta.defaultOrg)}</p>
+                <Button variant="ghost" className="size-8 px-0" onClick={() => copy(httpCloneUrl(activeForm.repository, activeTargetMeta.defaultOrg))} aria-label="HTTP clone URL 복사">
                   <Copy className="size-4" />
                 </Button>
               </div>
@@ -166,14 +279,14 @@ export function LauncherSourcePage() {
             <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 복사">
+                <p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">{sshCloneUrl(activeForm.repository, activeTargetMeta.defaultOrg)}</p>
+                <Button variant="ghost" className="size-8 px-0" onClick={() => copy(sshCloneUrl(activeForm.repository, activeTargetMeta.defaultOrg))} 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">
+            {activeForm.repository ? (
+              <a className="inline-flex items-center gap-1.5 text-xs text-primary" href={`${giteaBaseUrl.replace(/\/$/, '')}/${normalizeRepository(activeForm.repository, activeTargetMeta.defaultOrg)}`} target="_blank" rel="noreferrer">
                 저장소 열기
                 <ExternalLink className="size-3.5" />
               </a>