342 lines
14 KiB
TypeScript
342 lines
14 KiB
TypeScript
import { ChevronLeft, ChevronRight, 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
|
|
};
|
|
|
|
const settingsPageSize = 10;
|
|
|
|
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 [page, setPage] = useState(1);
|
|
const loadingVisible = useMinimumLoading(loading);
|
|
|
|
const totalPages = Math.max(1, Math.ceil(settings.length / settingsPageSize));
|
|
const pagedSettings = settings.slice((page - 1) * settingsPageSize, page * settingsPageSize);
|
|
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();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setPage((currentPage) => Math.min(currentPage, totalPages));
|
|
}, [totalPages]);
|
|
|
|
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}
|
|
{pagedSettings.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>
|
|
<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 ? '불러오는 중' : `총 ${settings.length}건 · ${page} / ${totalPages}`}
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
className="h-8 px-3 text-[13px]"
|
|
disabled={page <= 1}
|
|
onClick={() => setPage((currentPage) => Math.max(1, currentPage - 1))}
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
이전
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="h-8 px-3 text-[13px]"
|
|
disabled={page >= totalPages}
|
|
onClick={() => setPage((currentPage) => Math.min(totalPages, currentPage + 1))}
|
|
>
|
|
다음
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</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} />
|
|
</>
|
|
);
|
|
}
|