/* Project Settings tab — general, source/target, schedule, notifications, danger zone */ const ProjectSettings = ({ project, section: sectionProp, onSectionChange, onDelete, onDuplicate, onRename, onDdlChange, onTestConnection, onCredentialsChange, onSimulateFail, notifEnabled = true }) => { /* Section can be controlled (from top-bar badge deep-link) or internal. */ const [localSection, setLocalSection] = React.useState('general'); const section = sectionProp ?? localSection; const setSection = onSectionChange ?? setLocalSection; const sections = [ { k: 'general', l: 'General', d: '프로젝트 이름·환경·생성일' }, { k: 'source', l: 'AS-IS', d: 'AS-IS DDL · 추출 데이터 · 도구 내장 DB' }, { k: 'target', l: 'TO-BE', d: '대상 DB · 인코딩 · 자격증명' }, { k: 'schedule', l: 'Schedule', d: '야간 리허설 · 컷오버 · 외부 트리거' }, { k: 'notify', l: 'Notifications', d: '인앱 알림 이벤트 구독' }, { k: 'danger', l: 'Danger zone', d: '프로젝트 삭제 등 위험 동작', danger: true }, ]; return (
{section === 'general' && } {section === 'source' && } {section === 'target' && } {section === 'schedule' && } {section === 'notify' && } {section === 'danger' && }
); }; /* reuse SS primitives */ const PSHead = SSHead; const PSCard = SSCard; const PSRow = SSRow; const PSInput = SSInput; const PSToggle = SSToggle; const PSGeneral = ({ project, onRename }) => { const [name, setName] = React.useState(project.name); const [env, setEnv] = React.useState(project.env || 'stg'); return ( <> onRename?.(name)}>저장}/>
{['dev','stg','prod'].map(e => ( ))}
); }; /* AS-IS 측은 더 이상 JDBC 직접 접속이 아니라 다음 흐름: 운영팀 야간 추출 → CSV 도착 → 도구 내장 DuckDB staging 에 raw 적재 → ASIS DDL 과 컬럼·길이 비교 → 매핑 단계에서 변환. 따라서 PSSource 는 3 카드 구조: ASIS DDL · CSV 파일 · Staging (DuckDB). host/port/user/password 같은 외부 DB 입력은 노출하지 않는다. */ const PSSource = ({ project, onDdlChange }) => { return ( <> onDdlChange?.('asis', v)} /> ); }; /* ─── Source files (CSV) ──────────────────────────────────────── 야간 추출 파일의 메타데이터 (filename, encoding, delimiter, recordLength, parseStatus, recordCount). 운영팀이 SFTP/배치로 떨어뜨려 놓는 파일을 도구가 받아 파싱하는 시나리오. */ const CsvSourceCard = ({ csv }) => { if (!csv) { return (
AS-IS 추출 데이터 (CSV)
추출 파일이 아직 등록되지 않았습니다. 운영팀의 야간 추출 파일 경로를 등록하면 도착 후 자동으로 파싱됩니다.
); } const ps = csv.parseStatus; const tone = ps === 'ok' ? 'ok' : ps === 'failed' ? 'err' : ps === 'pending' ? 'warn' : 'queued'; const label = ps === 'ok' ? '파싱 완료' : ps === 'failed' ? '파싱 실패' : ps === 'pending' ? '파싱 대기' : '미도착'; return (
AS-IS 추출 데이터 (CSV) {label}
운영팀 야간 추출 파일. 도구가 받아 AS-IS DB 에 원본 그대로 적재합니다.
파일 재업로드 재파싱
{csv.delimiter === 'FB' && ( )} {ps === 'ok' && csv.recordCount != null && ( {csv.recordCount.toLocaleString()} 행 )}
{ps === 'failed' && csv.parseError && (
파싱 오류 · {csv.parseError}
)}
); }; /* ─── AS-IS DB (도구 내장) ────────────────────────────────────── 추출된 CSV 를 raw 그대로 적재하는 도구 내장 DB (구현체: DuckDB). 사용자 입장에서는 AS-IS DB 와 동일하게 다뤄지며, host/port 같은 외부 인프라 설정은 노출되지 않는다. */ const StagingCard = ({ staging, csv }) => { if (!staging) { return (
📦 AS-IS DB (도구 내장)
AS-IS DB 가 아직 초기화되지 않았습니다. 추출 데이터(CSV) 도착 후 자동으로 적재됩니다.
); } const sm = staging.schemaMatch; const smTone = sm === 'ok' ? 'ok' : sm === 'mismatch' ? 'err' : 'warn'; const smLabel = sm === 'ok' ? '스키마 일치' : sm === 'mismatch' ? '스키마 불일치' : '스키마 검증 대기'; const loadedTone = staging.loaded ? 'ok' : 'queued'; const loadedLabel = staging.loaded ? '적재 완료' : '미적재'; const dr = staging.dbReady; const drTone = dr === 'ok' ? 'ok' : dr === 'failed' ? 'err' : 'queued'; const drLabel = dr === 'ok' ? '접근 가능' : dr === 'failed' ? '접근 실패' : '접근 검증 대기'; const canLoad = csv?.parseStatus === 'ok'; return (
📦 AS-IS DB (도구 내장) {loadedLabel} {drLabel} {smLabel}
추출된 CSV 를 원본 그대로 적재하는 임베디드 DB — 호스트·자격증명 설정 없이 도구가 알아서 처리합니다.
CSV 재적재 접근 가능 재검증 스키마 보기
{formatBytes(staging.storeSizeBytes)} {staging.tables ?? 0} 개
{dr === 'failed' && (
DB 파일 접근 실패 · {staging.dbReadyDetail || '손상·잠금·권한 확인 필요'}
)} {sm === 'mismatch' && staging.schemaMismatchDetail && (
스키마 불일치 · {staging.schemaMismatchDetail}
)}
); }; /* Helper — bytes → human-readable. null/undefined 면 '—' 반환. */ const formatBytes = (n) => { if (n == null) return '—'; if (n < 1024) return n + ' B'; if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB'; if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + ' MB'; return (n / (1024 * 1024 * 1024)).toFixed(2) + ' GB'; }; const PSTarget = ({ project, onDdlChange, onTestConnection, onCredentialsChange, onSimulateFail }) => { const conn = project.connections?.tobe; const testing = conn?.status === 'testing'; return ( <> : null} onClick={() => onTestConnection?.('tobe')}> {testing ? '연결 테스트 중…' : '연결 테스트'} }/> onTestConnection?.('tobe')} onSimulateFail={() => onSimulateFail?.('tobe')}/> onCredentialsChange?.('tobe', c)}/> onDdlChange?.('tobe', v)} /> ); }; /* Status card rendered below the connection config + Test button. Shows the latest outcome (connected / failed / stale / untested / testing) with relevant metadata and a retry action when the last attempt failed. */ const ConnectionStatusCard = ({ connection, onRetry, onSimulateFail }) => { if (!connection) return null; const s = connection.status; const tone = s === 'ok' ? 'green' : s === 'failed' ? 'red' : s === 'testing' || s === 'stale' ? 'amber' : 'gray'; const bg = tone === 'green' ? 'var(--green-50)' : tone === 'red' ? 'var(--red-50)' : tone === 'amber' ? 'var(--amber-50)' : 'var(--panel-2)'; const bd = tone === 'green' ? 'var(--green)' : tone === 'red' ? 'var(--red)' : tone === 'amber' ? 'var(--amber)' : 'var(--border)'; const fg = tone === 'green' ? 'var(--green)' : tone === 'red' ? 'var(--red)' : tone === 'amber' ? 'var(--amber)' : 'var(--text-3)'; const label = s === 'ok' ? 'Connected' : s === 'failed' ? 'Connection failed' : s === 'testing' ? 'Testing…' : s === 'stale' ? 'Stale' : 'Not tested'; return (
{s === 'testing' ? : } {label}
{s === 'ok' && ( <>latency {connection.latencyMs}ms · detected {connection.detectedTables ?? '—'} tables · last tested {connection.lastTestedAt} )} {s === 'failed' && <>{connection.error} · {connection.lastTestedAt}} {s === 'stale' && <>last tested {connection.lastTestedAt} — 연결이 최근에 검증되지 않았습니다} {s === 'untested' && <>아직 연결을 테스트하지 않았습니다. [Test connection] 으로 검증하세요.} {s === 'testing' && <>연결을 확인하는 중입니다…}
{s === 'failed' && ( Retry )} {(s === 'ok' || s === 'stale' || s === 'untested') && onSimulateFail && ( )}
); }; /* Credentials card — separated from connection config so auth method / password rotation has its own lifecycle. Editing here updates the project state; for the prototype the password is never actually stored. */ const CredsCard = ({ connection, onChange }) => { const creds = connection?.credentials; const [showPw, setShowPw] = React.useState(false); const [editingPw, setEditingPw] = React.useState(false); const [newPw, setNewPw] = React.useState(''); if (!creds) return null; const today = () => new Date().toISOString().slice(0, 10); const commitPw = () => { if (newPw) onChange?.({ ...creds, passwordSet: true, lastRotated: today() }); setEditingPw(false); setNewPw(''); }; return (
Credentials
로그인 정보와 인증 방식. 자격증명은 이 프로젝트에만 적용됩니다.
onChange?.({ ...creds, lastRotated: today(), passwordSet: true })}> Rotate password
onChange?.({ ...creds, username: v })} mono/> {creds.authMethod === 'password' && ( {editingPw ? (
setNewPw(e.target.value)} onBlur={commitPw} onKeyDown={(e) => { if (e.key === 'Enter') commitPw(); if (e.key === 'Escape') { setEditingPw(false); setNewPw(''); } }} placeholder="new password" style={{ flex: 1, height: 24, padding: '0 8px', border: '1px solid var(--navy)', borderRadius: 3, background: 'var(--panel)', fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--text)', }}/>
) : (
{creds.passwordSet ? (showPw ? '(mock) ops-pw-23f!' : '••••••••••') : not set}
)} )} {creds.authMethod === 'kerberos' && ( )} {creds.authMethod === 'ssh_key' && ( )} {creds.authMethod === 'cert' && ( )}
); }; /* Reusable DDL upload card — used by Source and Target sections. */ const DdlCard = ({ title, desc, side, current, onChange }) => { const fileInputRef = React.useRef(); const [confirmDelete, setConfirmDelete] = React.useState(false); const handlePick = (ev) => { const file = ev.target.files?.[0]; if (!file) return; /* Prototype: fake the parse result based on file size. Real impl would parse DDL and return tables/columns counts. */ const bytes = file.size; const fakeTables = Math.max(1, Math.floor(bytes / 1800)); const fakeCols = Math.max(1, Math.floor(bytes / 180)); const now = new Date(); const fmt = now.toISOString().slice(0, 16).replace('T', ' '); onChange?.({ filename: file.name, uploadedAt: fmt, tables: fakeTables, columns: fakeCols, }); ev.target.value = ''; // allow re-pick of same file }; return (
{title} {current ? imported : not imported}
{desc}
{current ? ( <>
Filename
{current.filename}
Imported at
{current.uploadedAt}
Detected
{current.tables} tables · {current.columns} columns
fileInputRef.current?.click()}>Re-upload Preview schema
setConfirmDelete(true)}>Delete DDL
) : (
No {side === 'asis' ? 'AS-IS' : 'TO-BE'} DDL imported yet
Accepts .sql · .ddl · .yaml files
} onClick={() => fileInputRef.current?.click()}> Choose DDL file
)}
{confirmDelete && ( setConfirmDelete(false)} onConfirm={() => { onChange?.(null); setConfirmDelete(false); }} /> )}
); }; const DdlDeleteConfirm = ({ title, filename, side, onCancel, onConfirm }) => (
e.stopPropagation()} style={{ width: 460, background: 'var(--panel)', border: '1px solid var(--border)', borderRadius: 6, boxShadow: '0 20px 60px rgba(20,30,50,.25)', overflow: 'hidden', }}>
Delete {title}?
{side === 'asis' ? 'AS-IS 스키마를 지우면 이 프로젝트의 매핑 정의와 컬럼 연결이 끊어집니다.' : 'TO-BE 스키마를 지우면 DDL 산출물 생성과 검증 리포트가 중단됩니다.'}
{filename || '(unnamed)'}
DDL 파일을 다시 업로드하면 복원할 수 있지만, 그 사이에 편집한 매핑 규칙은 덮어씌워질 수 있습니다.
Cancel
); const PSSchedule = ({ project }) => { const cut = project?.cutover || { dday: 'TBD', freezeHours: 24, rollbackSla: 15 }; const pid = project?.id || 'p1'; const [rehearsalOn, setRehearsalOn] = React.useState(true); const [startTime, setStartTime] = React.useState('22:00 KST'); const [maxDuration, setMaxDuration] = React.useState('240'); const [extTriggerOpen, setExtTriggerOpen] = React.useState(false); return ( <> Save changes}/> {/* Nightly rehearsal — internal scheduler */} {rehearsalOn ? '2026-04-25 ' + startTime : '— (disabled)'} {/* Cutover window */} {/* External trigger — optional / advanced */}
setExtTriggerOpen(o => !o)} style={{ padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', borderBottom: extTriggerOpen ? '1px solid var(--border)' : 'none', background: extTriggerOpen ? 'var(--panel-2)' : 'var(--panel)', }}> {extTriggerOpen ? '▾' : '▸'}
External trigger (선택)
Control-M · Jenkins · Airflow 등 기존 사내 스케줄러에서 이 프로젝트를 트리거하는 방법
optional
{extTriggerOpen && (
{/* Hard prerequisite — explain where to enable + what happens if not */}
⚠ 사전 조건 — Solution Settings 에서 활성화 필요
External trigger 는 솔루션 전역 기능이라 Solution Settings › External integrations 에서 먼저 토글을 켜야 동작합니다. 켜지 않으면 CLI / API endpoint 가 응답하지 않습니다.
그리고 위 Nightly rehearsal 과 동시 사용 금지 — 둘 다 켜면 같은 시각에 중복 실행될 수 있습니다. 외부 스케줄러로 옮기면 Nightly rehearsal 은 끄세요.
아래 명령을 외부 스케줄러(Control-M · Airflow · Jenkins · cron)에 등록하면 됩니다.
# 야간 rehearsal (dry-run · TEST 타겟)
migrate run --project {pid} --mode rehearsal --dry-run
# 컷오버 (운영 타겟 · 승인된 스냅샷 필요)
migrate run --project {pid} --mode cutover
# 롤백
migrate rollback --project {pid} --to pre-cutover
CLI 경로 · API endpoint · API token 은 Solution Settings › External integrations 에서 관리합니다.
)}
); }; const PSNotify = ({ notifEnabled = true }) => { const events = window.NOTIFICATION_EVENTS || []; /* All events on by default. Real tool persists per-user prefs server-side. */ const [subs, setSubs] = React.useState(() => { const o = {}; events.forEach(e => { o[e.k] = true; }); return o; }); const toggle = (k) => notifEnabled && setSubs(s => ({ ...s, [k]: !s[k] })); return ( <> Save changes}/> {/* Master toggle off — 안내 배너 (정책 우선) */} {!notifEnabled ? (
🔕 알림이 솔루션 전역에서 비활성화 상태입니다
현재 Solution Settings › Notifications 의 마스터 스위치가 off 입니다. 본 화면의 이벤트 구독은 일시적으로 잠겨 있으며, Solution Settings 에서 알림을 다시 켜야 적용됩니다.
) : (
📬 In-app notification inbox
외부 Slack / Email / Webhook 은 폐쇄망에서는 쓸 수 없으므로, 모든 알림은 상단의 🔔 Bell 아이콘을 통해 수신됩니다.
)}
{events.map((e, i) => (
{e.l}
{e.desc}
toggle(e.k)} label=""/>
))}
{['mine-only', 'all-project'].map(k => { const active = k === 'all-project'; return ( ); })}
); }; const PSDanger = ({ project, onDelete, onDuplicate }) => { const [confirmText, setConfirmText] = React.useState(''); const [showConfirm, setShowConfirm] = React.useState(false); const canDelete = confirmText === project.name; return ( <>
Duplicate project
Copy mapping rules, copybooks, and connection profile to a new project. Artifacts and logs are not copied.
onDuplicate?.()}>Duplicate…
Delete project
Permanently removes mapping rules, execution logs, and generated artifacts. This cannot be undone.
setShowConfirm(true)} style={{ borderColor: 'var(--red)', color: 'var(--red)' }}>Delete project…
{showConfirm && (
setShowConfirm(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(20,30,50,.35)', display: 'grid', placeItems: 'center', zIndex: 2000, }}>
e.stopPropagation()} style={{ width: 460, background: 'var(--panel)', border: '1px solid var(--border)', borderRadius: 6, boxShadow: '0 20px 60px rgba(20,30,50,.25)', overflow: 'hidden', }}>
Delete “{project.name}”
This will permanently delete:
  • {project.tables} table mapping{project.tables === 1 ? '' : 's'}
  • all run logs, artifacts, and diff reports
  • scheduled runs and webhook configuration
Type {project.name} to confirm.
setConfirmText(e.target.value)} placeholder={project.name} style={{ width: '100%', height: 28, padding: '0 10px', border: `1px solid ${canDelete ? 'var(--red)' : 'var(--border)'}`, borderRadius: 3, fontFamily: 'var(--mono)', fontSize: 12, }}/>
setShowConfirm(false)}>Cancel
)} ); }; window.ProjectSettings = ProjectSettings;