add organization management and refine source repository view

src/pages/applications/RepositoryManagementPage.tsx

@@ -0,0 +1,490 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link2, Plus } from 'lucide-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 type { ApiApp, ApiAppComponent } from '../../types/runtime';
+import { LoadingModal } from '../operations/operation-utils';
+import { createGiteaOrgRepo, linkComponentSource, listGiteaRepos, listSources } from './application-api';
+import { AppSelector, useApps } from './ApplicationControls';
+
+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 ?? import.meta.env.GITEA_APP_ORG ?? 'platform';
+
+type PlatformRepo = {
+  id: number;
+  owner: string;
+  name: string;
+  fullName: string;
+  description?: string;
+  private: boolean;
+  cloneUrl: string;
+  sshUrl: string;
+  defaultBranch: string;
+  language?: string;
+};
+
+type SourceComponent = ApiAppComponent & {
+  app?: ApiApp;
+};
+
+function useMinimumLoading(loading: boolean, minimumMs = 500) {
+  const [visible, setVisible] = useState(loading);
+
+  useEffect(() => {
+    if (loading) {
+      setVisible(true);
+      return;
+    }
+
+    const timer = window.setTimeout(() => setVisible(false), minimumMs);
+    return () => window.clearTimeout(timer);
+  }, [loading, minimumMs]);
+
+  return visible;
+}
+
+function toPlatformRepo(repo: GiteaRepo): PlatformRepo {
+  const fullName = (repo as GiteaRepo & { fullName?: string }).fullName ?? repo.full_name ?? repo.name;
+  const owner =
+    typeof repo.owner === 'string'
+      ? repo.owner
+      : repo.owner?.login ?? fullName.split('/')[0] ?? 'platform';
+
+  return {
+    id: repo.id ?? Number(`${owner.length}${repo.name.length}`),
+    owner,
+    name: repo.name,
+    fullName,
+    description: (repo as GiteaRepo & { description?: string }).description,
+    private: Boolean(repo.private),
+    cloneUrl: (repo as GiteaRepo & { cloneUrl?: string }).cloneUrl ?? repo.clone_url ?? `${giteaBaseUrl}/${fullName}.git`,
+    sshUrl: (repo as GiteaRepo & { sshUrl?: string }).sshUrl ?? repo.ssh_url ?? `${giteaSshBaseUrl.replace(/\/$/, '')}/${fullName}.git`,
+    defaultBranch: (repo as GiteaRepo & { defaultBranch?: string }).defaultBranch ?? 'main',
+    language: (repo as GiteaRepo & { language?: string }).language
+  };
+}
+
+function normalizeRepositoryName(repository: string) {
+  const trimmed = repository.trim().replace(/^\/+/, '').replace(/\.git$/, '');
+  return trimmed.includes('/') ? trimmed : `${giteaAppOrg}/${trimmed}`;
+}
+
+function repositoryKey(repository: string) {
+  return normalizeRepositoryName(repository).toLowerCase();
+}
+
+function isSourceLinkComponent(source: SourceComponent) {
+  return (source.imageSource ?? 'SOURCE') === 'SOURCE' && source.type !== 'DATABASE' && source.type !== 'MIGRATION';
+}
+
+function isLauncherRepo(repo: PlatformRepo) {
+  const name = repo.name.toLowerCase();
+  const fullName = repo.fullName.toLowerCase();
+  return name === 'studio-launcher' || name === 'studio-launcher-fe' || name === 'studio-launcher-be' || fullName.includes('/studio-launcher');
+}
+
+export function RepositoryManagementPage() {
+  const { toast } = useToast();
+  const { apps, selectedAppId, loading: appsLoading, selectApp } = useApps();
+  const [giteaRepos, setGiteaRepos] = useState<PlatformRepo[]>([]);
+  const [apiSources, setApiSources] = useState<SourceComponent[]>([]);
+  const [sourcesLoading, setSourcesLoading] = useState(true);
+  const [giteaStatus, setGiteaStatus] = useState<'loading' | 'ready' | 'error'>('loading');
+  const sourcesLoadingVisible = useMinimumLoading(giteaStatus === 'loading' || sourcesLoading);
+  const [isCreateRepoOpen, setIsCreateRepoOpen] = useState(false);
+  const [repoName, setRepoName] = useState('');
+  const [repoDescription, setRepoDescription] = useState('');
+  const [repoPrivate, setRepoPrivate] = useState(true);
+  const [createDevelopBranch, setCreateDevelopBranch] = useState(true);
+  const [createReleaseBranch, setCreateReleaseBranch] = useState(true);
+  const [repoCreateStatus, setRepoCreateStatus] = useState<'idle' | 'saving' | 'error'>('idle');
+  const [sourceModalOpen, setSourceModalOpen] = useState(false);
+  const [sourceTarget, setSourceTarget] = useState<SourceComponent | null>(null);
+  const [sourceRepo, setSourceRepo] = useState('');
+  const [sourceBranch, setSourceBranch] = useState('develop');
+  const [sourceBuildTarget, setSourceBuildTarget] = useState('');
+  const [sourceSaveStatus, setSourceSaveStatus] = useState<'idle' | 'saving' | 'error'>('idle');
+
+  const refreshRepos = () => {
+    setGiteaStatus('loading');
+    listGiteaRepos(giteaAppOrg, 100)
+      .then((repos) => {
+        setGiteaRepos(repos.map(toPlatformRepo));
+        setGiteaStatus('ready');
+      })
+      .catch(() => setGiteaStatus('error'));
+  };
+
+  useEffect(() => {
+    let mounted = true;
+
+    setSourcesLoading(true);
+    listSources()
+      .then((sources) => {
+        if (!mounted) return;
+        setApiSources(sources);
+        setSourcesLoading(false);
+      })
+      .catch(() => {
+        if (!mounted) return;
+        setApiSources([]);
+        setSourcesLoading(false);
+      });
+
+    listGiteaRepos(giteaAppOrg, 100)
+      .then((repos) => {
+        if (!mounted) return;
+        setGiteaRepos(repos.map(toPlatformRepo));
+        setGiteaStatus('ready');
+      })
+      .catch(() => {
+        if (!mounted) return;
+        setGiteaStatus('error');
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const createRepo = () => {
+    if (!repoName.trim()) return;
+
+    setRepoCreateStatus('saving');
+    createGiteaOrgRepo(giteaAppOrg, {
+      name: repoName.trim(),
+      description: repoDescription.trim() || undefined,
+      private: repoPrivate,
+      autoInit: true,
+      createDevelopBranch,
+      createReleaseBranch
+    })
+      .then(() => {
+        setRepoName('');
+        setRepoDescription('');
+        setRepoPrivate(true);
+        setCreateDevelopBranch(true);
+        setCreateReleaseBranch(true);
+        setRepoCreateStatus('idle');
+        setIsCreateRepoOpen(false);
+        refreshRepos();
+        toast({ type: 'success', message: '저장소가 생성되었습니다.' });
+      })
+      .catch(() => setRepoCreateStatus('error'));
+  };
+
+  const refreshSources = () => {
+    setSourcesLoading(true);
+    listSources()
+      .then((sources) => {
+        setApiSources(sources);
+        setSourcesLoading(false);
+      })
+      .catch(() => {
+        setApiSources([]);
+        setSourcesLoading(false);
+      });
+  };
+
+  const openSourceModal = (source: SourceComponent) => {
+    setSourceTarget(source);
+    setSourceRepo(source.repository ?? '');
+    setSourceBranch(source.branch ?? 'develop');
+    setSourceBuildTarget(source.buildTarget ?? '');
+    setSourceSaveStatus('idle');
+    setSourceModalOpen(true);
+  };
+
+  const closeSourceModal = () => {
+    setSourceModalOpen(false);
+    setSourceTarget(null);
+    setSourceRepo('');
+    setSourceBranch('develop');
+    setSourceBuildTarget('');
+    setSourceSaveStatus('idle');
+  };
+
+  const saveSourceLink = () => {
+    if (!sourceTarget || !sourceRepo.trim()) return;
+
+    setSourceSaveStatus('saving');
+    linkComponentSource(sourceTarget.id, {
+      repository: sourceRepo,
+      branch: sourceBranch || undefined,
+      buildTarget: sourceBuildTarget || undefined
+    })
+      .then(() => {
+        closeSourceModal();
+        refreshSources();
+        toast({ type: 'success', message: '소스 연결이 저장되었습니다.' });
+      })
+      .catch(() => {
+        setSourceSaveStatus('error');
+        toast({ type: 'error', message: '소스 연결 저장에 실패했습니다.' });
+      });
+  };
+
+  const filteredSources = apiSources.filter((source) => isSourceLinkComponent(source) && (!selectedAppId || source.appId === selectedAppId));
+  const selectedAppRepoKeys = useMemo(
+    () => new Set(filteredSources.map((source) => source.repository).filter((repository): repository is string => Boolean(repository)).map(repositoryKey)),
+    [filteredSources]
+  );
+  const visibleRepos = useMemo(
+    () => giteaRepos
+      .filter((repo) => !isLauncherRepo(repo))
+      .sort((a, b) => {
+        const aSelected = selectedAppRepoKeys.has(repositoryKey(a.fullName));
+        const bSelected = selectedAppRepoKeys.has(repositoryKey(b.fullName));
+        if (aSelected !== bSelected) return aSelected ? -1 : 1;
+        return a.fullName.localeCompare(b.fullName);
+      }),
+    [giteaRepos, selectedAppRepoKeys]
+  );
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="어플리케이션"
+        title="저장소 관리"
+        description="앱 구성요소에 연결할 저장소를 생성하고 연결 정보를 관리합니다."
+        actions={
+          <Button className="h-8 px-3 text-[13px]" onClick={() => setIsCreateRepoOpen(true)}>
+            <Plus className="size-4" />
+            저장소 생성
+          </Button>
+        }
+      />
+
+      <AppSelector apps={apps} value={selectedAppId} loading={appsLoading} onChange={selectApp} />
+
+      <Card className="mb-4 min-w-0 overflow-hidden">
+        <CardHeader
+          title="저장소"
+          description="앱과 런처 소스를 구성요소에 연결할 수 있도록 관리합니다."
+        />
+        <div className="max-h-[300px] overflow-x-auto overflow-y-auto">
+          <table className="w-full min-w-[900px] 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">Owner</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">Clone URL</th>
+                <th className="px-5 py-3 font-medium">상태</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {giteaStatus === 'error' ? (
+                <tr>
+                  <td className="px-5 py-6 text-center text-muted-foreground" colSpan={6}>백엔드 연결 후 저장소가 표시됩니다.</td>
+                </tr>
+              ) : giteaStatus !== 'loading' && visibleRepos.length === 0 ? (
+                <tr>
+                  <td className="px-5 py-6 text-center text-muted-foreground" colSpan={6}>등록된 저장소가 없습니다.</td>
+                </tr>
+              ) : (
+                visibleRepos.map((repo) => {
+                  const isSelectedAppRepo = selectedAppRepoKeys.has(repositoryKey(repo.fullName));
+                  return (
+                    <tr key={repo.id} className="hover:bg-muted/20">
+                      <td className="px-5 py-3">
+                        <div className="flex items-center gap-2">
+                          <span className="font-semibold">{repo.fullName}</span>
+                          {isSelectedAppRepo ? <Badge tone="green">선택 앱</Badge> : null}
+                        </div>
+                        {repo.description ? <p className="mt-1 text-xs text-muted-foreground">{repo.description}</p> : null}
+                      </td>
+                      <td className="px-5 py-3">{repo.owner}</td>
+                      <td className="px-5 py-3">{repo.defaultBranch}</td>
+                      <td className="px-5 py-3 text-muted-foreground">{repo.language || '-'}</td>
+                      <td className="px-5 py-3 font-mono text-xs text-muted-foreground">{repo.cloneUrl}</td>
+                      <td className="px-5 py-3">
+                        <Badge tone={repo.private ? 'amber' : 'blue'}>{repo.private ? 'Private' : 'Public'}</Badge>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      <Card className="min-w-0 overflow-hidden">
+        <CardHeader title="저장소 연결" description="앱 구성요소별 저장소와 빌드 대상을 확인합니다." />
+        <div className="max-h-[620px] overflow-x-auto overflow-y-auto">
+          <table className="w-full min-w-[920px] text-left text-sm">
+            <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
+              <tr>
+                <th className="px-5 py-3 font-medium">앱</th>
+                <th className="px-5 py-3 font-medium">구성요소</th>
+                <th className="w-72 px-5 py-3 font-medium">저장소</th>
+                <th className="px-5 py-3 font-medium">기본 브랜치</th>
+                <th className="px-5 py-3 font-medium">Commit</th>
+                <th className="px-5 py-3 font-medium">유형</th>
+                <th className="px-5 py-3 font-medium">빌드 대상</th>
+                <th className="w-24 px-5 py-3 font-medium">상태</th>
+                <th className="w-24 px-5 py-3 text-right font-medium">관리</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {!sourcesLoading && filteredSources.length === 0 ? (
+                <tr>
+                  <td colSpan={9} className="px-5 py-6 text-center text-muted-foreground">등록된 앱 구성요소가 없습니다.</td>
+                </tr>
+              ) : (
+                !sourcesLoading && filteredSources.map((source) => (
+                  <tr key={source.id} className="hover:bg-muted/20">
+                    <td className="px-5 py-3 font-semibold">{source.app?.name ?? '-'}</td>
+                    <td className="px-5 py-3">{source.name}</td>
+                    <td className="max-w-72 px-5 py-3 text-muted-foreground">
+                      <span className="block truncate whitespace-nowrap">{source.repository || '미연결'}</span>
+                    </td>
+                    <td className="px-5 py-3">{source.branch || '-'}</td>
+                    <td className="px-5 py-3 font-medium">-</td>
+                    <td className="px-5 py-3 text-muted-foreground">{source.type}</td>
+                    <td className="px-5 py-3 text-muted-foreground">{source.buildTarget || '-'}</td>
+                    <td className="whitespace-nowrap px-5 py-3"><Badge tone={source.repository ? 'green' : 'neutral'}>{source.repository ? '연결됨' : '미연결'}</Badge></td>
+                    <td className="px-5 py-3">
+                      <div className="flex justify-end">
+                        <Button variant="outline" className="size-8 px-0" title="소스 연결" aria-label="소스 연결" onClick={() => openSourceModal(source)}>
+                          <Link2 className="size-4" />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {isCreateRepoOpen ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
+          <div className="w-full max-w-lg rounded-lg border border-border bg-card shadow-xl">
+            <div className="border-b border-border px-5 py-3">
+              <h2 className="text-sm font-semibold">저장소 생성</h2>
+            </div>
+            <div className="space-y-4 px-5 py-5">
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">저장소명</span>
+                <input
+                  value={repoName}
+                  onChange={(event) => setRepoName(event.target.value)}
+                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
+                />
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">설명</span>
+                <textarea
+                  value={repoDescription}
+                  onChange={(event) => setRepoDescription(event.target.value)}
+                  className="mt-2 min-h-20 w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary"
+                />
+              </label>
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={repoPrivate}
+                  onChange={(event) => setRepoPrivate(event.target.checked)}
+                  className="size-4 accent-primary"
+                />
+                Private 저장소로 생성
+              </label>
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={createDevelopBranch}
+                  onChange={(event) => setCreateDevelopBranch(event.target.checked)}
+                  className="size-4 accent-primary"
+                />
+                develop 브랜치 자동 생성
+              </label>
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={createReleaseBranch}
+                  onChange={(event) => setCreateReleaseBranch(event.target.checked)}
+                  className="size-4 accent-primary"
+                />
+                release 브랜치 자동 생성
+              </label>
+              {repoCreateStatus === 'error' ? (
+                <p className="text-xs text-rose-300">저장소 생성에 실패했습니다. 권한과 중복 저장소명을 확인하세요.</p>
+              ) : null}
+            </div>
+            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+              <Button variant="ghost" onClick={() => setIsCreateRepoOpen(false)}>취소</Button>
+              <Button onClick={createRepo} disabled={!repoName.trim() || repoCreateStatus === 'saving'}>
+                {repoCreateStatus === 'saving' ? '생성 중' : '생성'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {sourceModalOpen && sourceTarget ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
+          <div className="w-full max-w-lg rounded-lg border border-border bg-card shadow-xl">
+            <div className="border-b border-border px-5 py-3">
+              <h2 className="text-sm font-semibold">소스 연결</h2>
+            </div>
+            <div className="space-y-4 px-5 py-5">
+              <div className="rounded-md border border-border bg-muted/20 p-3">
+                <p className="text-xs text-muted-foreground">구성요소</p>
+                <p className="mt-1 text-sm font-semibold">{sourceTarget.app?.name ?? '-'} / {sourceTarget.name}</p>
+              </div>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">저장소</span>
+                <select
+                  value={sourceRepo}
+                  onChange={(event) => setSourceRepo(event.target.value)}
+                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
+                >
+                  <option value="">저장소 선택</option>
+                  {visibleRepos.map((repo) => (
+                    <option key={repo.id} value={repo.fullName}>{repo.fullName}</option>
+                  ))}
+                </select>
+              </label>
+              <label className="block">
+                <span className="text-xs font-medium text-muted-foreground">기본 브랜치</span>
+                <select
+                  value={sourceBranch}
+                  onChange={(event) => setSourceBranch(event.target.value)}
+                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
+                >
+                  <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">빌드 대상</span>
+                <input
+                  value={sourceBuildTarget}
+                  onChange={(event) => setSourceBuildTarget(event.target.value)}
+                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
+                />
+              </label>
+              {sourceSaveStatus === 'error' ? <p className="text-xs text-rose-300">소스 연결 저장에 실패했습니다.</p> : null}
+            </div>
+            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+              <Button variant="ghost" onClick={closeSourceModal}>취소</Button>
+              <Button onClick={saveSourceLink} disabled={!sourceRepo.trim() || sourceSaveStatus === 'saving'}>
+                {sourceSaveStatus === 'saving' ? '저장 중' : '저장'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <LoadingModal open={sourcesLoadingVisible} />
+    </>
+  );
+}

src/pages/applications/application-api.ts

@@ -12,6 +12,34 @@ import type {
 } from '../../types/application';
 import type { ApiAppComponent } from '../../types/runtime';
 
+export type GiteaCommit = {
+  sha: string;
+  commit?: {
+    message?: string;
+    author?: {
+      name?: string;
+      date?: string;
+    };
+    committer?: {
+      name?: string;
+      date?: string;
+    };
+  };
+  author?: {
+    login?: string;
+    username?: string;
+    full_name?: string;
+    name?: string;
+  } | null;
+  committer?: {
+    login?: string;
+    username?: string;
+    full_name?: string;
+    name?: string;
+  } | null;
+  created?: string;
+};
+
 export function listApps() {
   return apiRequest<AppWithComponents[]>('/apps').then(filterAppsByCurrentAdmin);
 }
@@ -94,6 +122,29 @@ export function createGiteaOrgRepo(
   }).then((result) => result.repo);
 }
 
+export function listGiteaCommitsPage(
+  owner: string,
+  repo: string,
+  branch = 'develop',
+  options?: { page?: number; limit?: number; since?: string }
+) {
+  const params = new URLSearchParams({
+    sha: branch,
+    page: String(options?.page ?? 1),
+    limit: String(options?.limit ?? 5)
+  });
+  if (options?.since) params.set('since', options.since);
+  return apiRequest<{ commits: GiteaCommit[]; total: number | null; page: number; limit: number }>(
+    `/gitea/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/commits?${params.toString()}`
+  );
+}
+
+export function getGiteaCommitDiff(owner: string, repo: string, sha: string) {
+  return apiRequest<{ diff: string }>(
+    `/gitea/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/commits/${encodeURIComponent(sha)}/diff`
+  ).then((result) => result.diff);
+}
+
 export function listBuildJobs(appKey?: string) {
   const query = appKey ? `?appKey=${encodeURIComponent(appKey)}` : '';
   return apiRequest<BuildJob[]>(`/apps/builds${query}`);