1059 lines
30 KiB
JavaScript
1059 lines
30 KiB
JavaScript
const fs = require("fs");
|
|
const path = require("path");
|
|
const yaml = require("js-yaml");
|
|
|
|
const repoRoot = path.resolve(__dirname, "../..");
|
|
const specDir = path.join(repoRoot, "spec", "nexacro");
|
|
const templateDir = path.join(repoRoot, "templates", "nexacro");
|
|
const outputDir = path.join(repoRoot, "client", "nexacro-src");
|
|
const previewDir = path.join(repoRoot, "client", "nexacro-deploy");
|
|
|
|
function readYaml(filePath) {
|
|
return yaml.load(fs.readFileSync(filePath, "utf8"));
|
|
}
|
|
|
|
function loadSpecs(baseDir = specDir) {
|
|
const appSpec = readYaml(path.join(baseDir, "app.yaml"));
|
|
const formFiles = fs
|
|
.readdirSync(baseDir)
|
|
.filter((file) => file.endsWith(".yaml") && file !== "app.yaml")
|
|
.sort();
|
|
|
|
const forms = formFiles.map((file) => readYaml(path.join(baseDir, file)));
|
|
return { appSpec, forms };
|
|
}
|
|
|
|
function readTemplate(relativePath) {
|
|
return fs.readFileSync(path.join(templateDir, relativePath), "utf8");
|
|
}
|
|
|
|
function ensureDir(dirPath) {
|
|
fs.mkdirSync(dirPath, { recursive: true });
|
|
}
|
|
|
|
function renderTemplate(template, values) {
|
|
return Object.entries(values).reduce((content, [key, value]) => {
|
|
return content.replaceAll(`{{${key}}}`, value);
|
|
}, template);
|
|
}
|
|
|
|
function escapeXml(value = "") {
|
|
return String(value)
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """);
|
|
}
|
|
|
|
function toXfdlDataset(dataset) {
|
|
const columns = (dataset.columns || [])
|
|
.map((column) => ` <Column id="${column.id}" type="${column.type || "STRING"}" size="256"/>`)
|
|
.join("\n");
|
|
|
|
return [
|
|
` <Dataset id="${dataset.id}">`,
|
|
" <ColumnInfo>",
|
|
columns,
|
|
" </ColumnInfo>",
|
|
" </Dataset>"
|
|
].join("\n");
|
|
}
|
|
|
|
function componentTag(component) {
|
|
const attrs = [
|
|
`id="${component.id}"`,
|
|
`left="${component.left ?? 0}"`,
|
|
`top="${component.top ?? 0}"`,
|
|
`width="${component.width ?? 120}"`,
|
|
`height="${component.height ?? 32}"`
|
|
];
|
|
|
|
if (component.text) {
|
|
attrs.push(`text="${escapeXml(component.text)}"`);
|
|
}
|
|
if (component.prompt) {
|
|
attrs.push(`displaynulltext="${escapeXml(component.prompt)}"`);
|
|
}
|
|
if (component.bind) {
|
|
const [, columnId] = component.bind.split(".");
|
|
attrs.push(`value="bind:${columnId}"`);
|
|
}
|
|
if (component.type === "Edit" && component.id.toLowerCase().includes("password")) {
|
|
attrs.push('password="true"');
|
|
}
|
|
if (component.type === "Combo") {
|
|
attrs.push('codecolumn="code"');
|
|
attrs.push('datacolumn="label"');
|
|
}
|
|
|
|
return ` <${component.type} ${attrs.join(" ")}/>`;
|
|
}
|
|
|
|
function gridFormats(grid) {
|
|
const columns = grid.columns || [];
|
|
const width = Math.max(120, Math.floor((grid.width || 800) / Math.max(columns.length, 1)));
|
|
const columnXml = columns.map(() => `<Column size="${width}"/>`).join("");
|
|
const headerCells = columns
|
|
.map((column, index) => `<Cell col="${index}" text="${escapeXml(column.text || column.id)}"/>`)
|
|
.join("");
|
|
const bodyCells = columns
|
|
.map((column, index) => `<Cell col="${index}" text="bind:${column.id}"/>`)
|
|
.join("");
|
|
|
|
return `<Formats><Format id="default"><Columns>${columnXml}</Columns><Rows><Row size="32" band="head"/><Row size="28"/></Rows><Band id="head">${headerCells}</Band><Band id="body">${bodyCells}</Band></Format></Formats>`;
|
|
}
|
|
|
|
function gridTag(grid) {
|
|
return [
|
|
` <Static id="sta_${grid.id}" left="${grid.left}" top="${grid.top - 28}" width="${grid.width}" height="24" text="${escapeXml(grid.title)}"/>`,
|
|
` <Grid id="${grid.id}" left="${grid.left}" top="${grid.top}" width="${grid.width}" height="${grid.height}" binddataset="${grid.dataset}">`,
|
|
` ${gridFormats(grid)}`,
|
|
" </Grid>"
|
|
].join("\n");
|
|
}
|
|
|
|
function buildFormScript(form) {
|
|
const transactions = (form.transactions || [])
|
|
.map(
|
|
(transaction) =>
|
|
`this.${transaction.id} = function()\n{\n this.gfnShowMessage("${escapeXml(transaction.id)} -> ${escapeXml(transaction.endpoint)}");\n};`
|
|
)
|
|
.join("\n\n");
|
|
const actions = (form.actions || [])
|
|
.map(
|
|
(action) =>
|
|
`this.${action.id} = function()\n{\n this.gfnShowMessage("${escapeXml(action.label)}");\n};`
|
|
)
|
|
.join("\n\n");
|
|
|
|
return [
|
|
"this.form_onload = function()",
|
|
"{",
|
|
` this.gfnShowMessage("${escapeXml(form.title)} loaded");`,
|
|
"};",
|
|
"",
|
|
transactions,
|
|
"",
|
|
actions
|
|
]
|
|
.join("\n")
|
|
.trim();
|
|
}
|
|
|
|
function renderXfdl(form, appSpec) {
|
|
const datasets = (form.datasets || []).map(toXfdlDataset).join("\n");
|
|
const components = (form.components || []).map(componentTag).join("\n");
|
|
const grids = (form.grids || []).map(gridTag).join("\n");
|
|
const layout = form.layout || appSpec.layout;
|
|
|
|
return [
|
|
'<?xml version="1.0" encoding="UTF-8"?>',
|
|
'<FDL version="2.0">',
|
|
` <Form id="${form.formId}" titletext="${escapeXml(form.title)}" width="${layout.width}" height="${layout.height}" onload="this.form_onload();">`,
|
|
" <Objects>",
|
|
datasets || " <Dataset id=\"dsEmpty\"><ColumnInfo><Column id=\"dummy\" type=\"STRING\" size=\"1\"/></ColumnInfo></Dataset>",
|
|
" </Objects>",
|
|
" <Layouts>",
|
|
` <Layout id="default" width="${layout.width}" height="${layout.height}"/>`,
|
|
" </Layouts>",
|
|
" <Script><![CDATA[",
|
|
readTemplate(path.join("common", "common.xjs.tpl")),
|
|
"",
|
|
buildFormScript(form),
|
|
" ]]></Script>",
|
|
components,
|
|
grids,
|
|
" </Form>",
|
|
"</FDL>",
|
|
""
|
|
].join("\n");
|
|
}
|
|
|
|
function generateProjectFiles(appSpec, forms, baseOutputDir = outputDir) {
|
|
ensureDir(baseOutputDir);
|
|
ensureDir(path.join(baseOutputDir, "forms"));
|
|
ensureDir(path.join(baseOutputDir, "frame"));
|
|
ensureDir(path.join(baseOutputDir, "lib"));
|
|
|
|
const formEntries = forms
|
|
.map((form) => ` <Form id="${form.formId}" url="./forms/${form.formId}.xfdl" title="${escapeXml(form.title)}"/>`)
|
|
.join("\n");
|
|
|
|
fs.writeFileSync(
|
|
path.join(baseOutputDir, `${appSpec.projectName}.xprj`),
|
|
renderTemplate(readTemplate("project.xml.tpl"), {
|
|
projectName: appSpec.projectName,
|
|
formEntries
|
|
})
|
|
);
|
|
fs.writeFileSync(
|
|
path.join(baseOutputDir, "application.xadl"),
|
|
renderTemplate(readTemplate("application.xadl.tpl"), {
|
|
applicationId: appSpec.applicationId,
|
|
appTitle: appSpec.appTitle,
|
|
width: String(appSpec.layout.width),
|
|
height: String(appSpec.layout.height)
|
|
})
|
|
);
|
|
fs.writeFileSync(
|
|
path.join(baseOutputDir, "environment.xml"),
|
|
renderTemplate(readTemplate("environment.xml.tpl"), {
|
|
themeId: appSpec.themeId,
|
|
width: String(appSpec.layout.width),
|
|
height: String(appSpec.layout.height),
|
|
apiServiceId: appSpec.service.apiServiceId,
|
|
apiUrl: appSpec.service.apiUrl,
|
|
fileServiceId: appSpec.service.fileServiceId,
|
|
fileUrl: appSpec.service.fileUrl
|
|
})
|
|
);
|
|
fs.writeFileSync(path.join(baseOutputDir, "typedefinition.xml"), readTemplate("typedefinition.xml.tpl"));
|
|
fs.writeFileSync(
|
|
path.join(baseOutputDir, "appvariables.xml"),
|
|
renderTemplate(readTemplate("appvariables.xml.tpl"), {
|
|
apiBase: appSpec.apiBase,
|
|
appTitle: appSpec.appTitle
|
|
})
|
|
);
|
|
fs.writeFileSync(path.join(baseOutputDir, "lib", "common.xjs"), readTemplate(path.join("common", "common.xjs.tpl")));
|
|
fs.writeFileSync(
|
|
path.join(baseOutputDir, "frame", "MainFrame.xfdl"),
|
|
[
|
|
'<?xml version="1.0" encoding="UTF-8"?>',
|
|
'<FDL version="2.0">',
|
|
` <Form id="MainFrame" titletext="${escapeXml(appSpec.appTitle)}" width="${appSpec.layout.width}" height="${appSpec.layout.height}">`,
|
|
" <Static id=\"staTitle\" left=\"24\" top=\"18\" width=\"500\" height=\"36\" text=\"Hanwha Nexacro Demo\"/>",
|
|
" <Static id=\"staGuide\" left=\"24\" top=\"60\" width=\"900\" height=\"24\" text=\"이 MainFrame은 AI generator가 만든 Nexacro skeleton입니다.\"/>",
|
|
" </Form>",
|
|
"</FDL>",
|
|
""
|
|
].join("\n")
|
|
);
|
|
|
|
forms.forEach((form) => {
|
|
fs.writeFileSync(path.join(baseOutputDir, "forms", `${form.formId}.xfdl`), renderXfdl(form, appSpec));
|
|
});
|
|
}
|
|
|
|
function previewHtml(appSpec) {
|
|
return `<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>${escapeXml(appSpec.previewTitle)}</title>
|
|
<link rel="stylesheet" href="/assets/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script src="/assets/app.js" defer></script>
|
|
</body>
|
|
</html>
|
|
`;
|
|
}
|
|
|
|
function previewScript(forms) {
|
|
const manifest = JSON.stringify(
|
|
forms.map((form) => ({
|
|
formId: form.formId,
|
|
title: form.title,
|
|
route: form.route,
|
|
authority: form.authority,
|
|
messages: form.messages || []
|
|
})),
|
|
null,
|
|
2
|
|
);
|
|
|
|
return `window.HANWHA_FORMS = ${manifest};
|
|
`;
|
|
}
|
|
|
|
function previewCss() {
|
|
return `:root {
|
|
--bg: #f6f8fb;
|
|
--surface: #ffffff;
|
|
--surface-alt: #eef4ff;
|
|
--line: #d8dfeb;
|
|
--text: #10203a;
|
|
--muted: #5c6d86;
|
|
--accent: #f57c23;
|
|
--accent-soft: #ffe6d1;
|
|
--blue: #1f5fbf;
|
|
--danger: #c53b3b;
|
|
--success: #237c52;
|
|
--shadow: 0 16px 40px rgba(16, 32, 58, 0.08);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: "Pretendard", "Noto Sans KR", sans-serif;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(245, 124, 35, 0.15), transparent 18rem),
|
|
linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
|
|
color: var(--text);
|
|
}
|
|
|
|
a { color: var(--blue); text-decoration: none; }
|
|
button, input, select { font: inherit; }
|
|
button {
|
|
cursor: pointer;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
button.secondary {
|
|
background: #fff;
|
|
color: var(--text);
|
|
border: 1px solid var(--line);
|
|
}
|
|
button.ghost {
|
|
background: var(--surface-alt);
|
|
color: var(--blue);
|
|
}
|
|
input, select {
|
|
width: 100%;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
background: #fff;
|
|
}
|
|
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
padding: 28px 22px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-right: 1px solid rgba(216, 223, 235, 0.7);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.brand {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.brand h1 {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.brand p {
|
|
margin: 10px 0 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 14px 16px;
|
|
border-radius: 14px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
text-align: left;
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--surface-alt);
|
|
border-color: #c9dafd;
|
|
}
|
|
|
|
.main {
|
|
padding: 28px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.topbar h2 {
|
|
margin: 0;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.status-card,
|
|
.panel,
|
|
.hero-card {
|
|
background: var(--surface);
|
|
border: 1px solid rgba(216, 223, 235, 0.7);
|
|
border-radius: 24px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.hero-card {
|
|
padding: 26px;
|
|
margin-bottom: 24px;
|
|
background:
|
|
linear-gradient(135deg, rgba(245, 124, 35, 0.08), rgba(31, 95, 191, 0.08)),
|
|
var(--surface);
|
|
}
|
|
|
|
.hero-card p {
|
|
margin: 8px 0 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.grid-2,
|
|
.grid-3,
|
|
.grid-4 {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
|
|
.status-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.status-card .label {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.status-card .value {
|
|
font-size: 30px;
|
|
margin-top: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.panel {
|
|
padding: 22px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.panel h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.stack {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 140px 1fr;
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.row label {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.row.actions {
|
|
grid-template-columns: 1fr;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.notice {
|
|
border-radius: 16px;
|
|
padding: 14px 16px;
|
|
background: var(--accent-soft);
|
|
color: #7a4313;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
text-align: left;
|
|
padding: 12px 10px;
|
|
border-bottom: 1px solid #ecf0f6;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th {
|
|
color: var(--muted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pill.ACCEPTED, .pill.SUCCESS { background: rgba(35, 124, 82, 0.12); color: var(--success); }
|
|
.pill.REJECTED, .pill.ERROR, .pill.FAILED { background: rgba(197, 59, 59, 0.12); color: var(--danger); }
|
|
.pill.REQUESTED, .pill.PROCESSING, .pill.INFO { background: rgba(31, 95, 191, 0.12); color: var(--blue); }
|
|
|
|
.login-box {
|
|
max-width: 420px;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.shell { grid-template-columns: 1fr; }
|
|
.sidebar { border-right: 0; border-bottom: 1px solid rgba(216, 223, 235, 0.7); }
|
|
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
|
|
}
|
|
`;
|
|
}
|
|
|
|
function previewAppJs(appSpec) {
|
|
return `const state = {
|
|
currentRoute: "login",
|
|
session: null,
|
|
master: null,
|
|
uploads: null,
|
|
runs: null,
|
|
reports: null,
|
|
selectedBatchId: null
|
|
};
|
|
|
|
const formMap = new Map(window.HANWHA_FORMS.map((form) => [form.route, form]));
|
|
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(path, {
|
|
credentials: "same-origin",
|
|
headers: {
|
|
...(options.body instanceof FormData ? {} : { "Content-Type": "application/json" }),
|
|
...(options.headers || {})
|
|
},
|
|
...options
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const payload = await response.json().catch(() => ({ message: response.statusText }));
|
|
throw new Error(payload.message || "요청 처리에 실패했습니다.");
|
|
}
|
|
|
|
const contentType = response.headers.get("content-type") || "";
|
|
if (contentType.includes("application/json")) {
|
|
return response.json();
|
|
}
|
|
return response.blob();
|
|
}
|
|
|
|
function formatValue(value) {
|
|
if (value === null || value === undefined || value === "") {
|
|
return "-";
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function table(columns, rows, options = {}) {
|
|
const body = rows.length
|
|
? rows
|
|
.map(
|
|
(row) => \`<tr>\${columns
|
|
.map((column) => {
|
|
const value = options.render ? options.render(column, row[column.id], row) : row[column.id];
|
|
return \`<td>\${formatValue(value)}</td>\`;
|
|
})
|
|
.join("")}</tr>\`
|
|
)
|
|
.join("")
|
|
: \`<tr><td colspan="\${columns.length}">데이터가 없습니다.</td></tr>\`;
|
|
|
|
return \`<div class="table-wrap"><table><thead><tr>\${columns
|
|
.map((column) => \`<th>\${column.text}</th>\`)
|
|
.join("")}</tr></thead><tbody>\${body}</tbody></table></div>\`;
|
|
}
|
|
|
|
function pill(value) {
|
|
return \`<span class="pill \${value}">\${value}</span>\`;
|
|
}
|
|
|
|
function renderNav() {
|
|
return window.HANWHA_FORMS.map((form) => {
|
|
const active = state.currentRoute === form.route ? "active" : "";
|
|
const locked = form.authority !== "PUBLIC" && !state.session;
|
|
return \`<button class="nav-item \${active}" data-route="\${form.route}" \${locked ? "disabled" : ""}><strong>\${form.title}</strong><div class="muted">\${form.authority}</div></button>\`;
|
|
}).join("");
|
|
}
|
|
|
|
function heroContent() {
|
|
const form = formMap.get(state.currentRoute);
|
|
const note = form?.messages?.[0]?.text || "Spec driven preview";
|
|
return \`<div class="hero-card"><h2>\${form.title}</h2><p>\${note}</p></div>\`;
|
|
}
|
|
|
|
function renderLogin() {
|
|
return \`
|
|
\${heroContent()}
|
|
<div class="panel login-box">
|
|
<h3>세션 로그인</h3>
|
|
<div class="notice">기본 계정: admin/operator/viewer / demo1234</div>
|
|
<div class="row"><label>사용자 ID</label><input id="login-username" value="admin" /></div>
|
|
<div class="row"><label>비밀번호</label><input id="login-password" type="password" value="demo1234" /></div>
|
|
<div class="row actions">
|
|
<button data-action="login">로그인</button>
|
|
</div>
|
|
</div>
|
|
\`;
|
|
}
|
|
|
|
function renderMaster() {
|
|
const datasets = state.master?.datasets || {};
|
|
const entities = datasets.entities || [];
|
|
const accounts = datasets.accounts || [];
|
|
const fxRates = datasets.fxRates || [];
|
|
const ownerships = datasets.ownerships || [];
|
|
|
|
return \`
|
|
\${heroContent()}
|
|
<div class="grid-4">
|
|
<div class="status-card"><div class="label">법인 수</div><div class="value">\${entities.length}</div></div>
|
|
<div class="status-card"><div class="label">계정 수</div><div class="value">\${accounts.length}</div></div>
|
|
<div class="status-card"><div class="label">환율 수</div><div class="value">\${fxRates.length}</div></div>
|
|
<div class="status-card"><div class="label">지분율 수</div><div class="value">\${ownerships.length}</div></div>
|
|
</div>
|
|
<div class="grid-2" style="margin-top: 18px;">
|
|
<div class="panel">
|
|
<h3>법인정보</h3>
|
|
\${table([{ id: "entityCode", text: "법인코드" }, { id: "entityName", text: "법인명" }, { id: "baseCurrency", text: "통화" }], entities)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>계정코드</h3>
|
|
\${table([{ id: "accountCode", text: "계정" }, { id: "accountName", text: "계정명" }, { id: "accountCategory", text: "분류" }, { id: "internalTradeYn", text: "내부거래" }], accounts)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>환율</h3>
|
|
\${table([{ id: "fiscalPeriod", text: "회계기간" }, { id: "currencyCode", text: "통화" }, { id: "rateToKrw", text: "환산율" }], fxRates)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>지분율</h3>
|
|
\${table([{ id: "parentEntityCode", text: "모법인" }, { id: "childEntityCode", text: "자법인" }, { id: "ownershipRatio", text: "지분율" }], ownerships)}
|
|
</div>
|
|
</div>
|
|
\`;
|
|
}
|
|
|
|
function renderUploads() {
|
|
const datasets = state.uploads?.datasets || {};
|
|
const batches = datasets.uploadBatches || [];
|
|
const issues = datasets.validationIssues || [];
|
|
|
|
return \`
|
|
\${heroContent()}
|
|
<div class="panel">
|
|
<h3>업로드</h3>
|
|
<div class="row"><label>템플릿</label>
|
|
<select id="upload-template">
|
|
<option value="trial-balance">trial-balance</option>
|
|
<option value="forecast">forecast</option>
|
|
</select>
|
|
</div>
|
|
<div class="row"><label>회계기간</label><input id="upload-period" value="2026-03" /></div>
|
|
<div class="row"><label>파일 선택</label><input id="upload-file" type="file" /></div>
|
|
<div class="row actions">
|
|
<button data-action="upload">파일 업로드</button>
|
|
<button class="secondary" data-action="reload-uploads">내역 새로고침</button>
|
|
<a class="ghost" href="/sample-data/trial-balance-invalid.xlsx" download>오류 샘플</a>
|
|
<a class="ghost" href="/sample-data/trial-balance-valid.xlsx" download>정상 TB</a>
|
|
<a class="ghost" href="/sample-data/forecast-valid.xlsx" download>정상 Forecast</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>업로드 이력</h3>
|
|
\${table(
|
|
[
|
|
{ id: "id", text: "배치ID" },
|
|
{ id: "templateCode", text: "템플릿" },
|
|
{ id: "fiscalPeriod", text: "회계기간" },
|
|
{ id: "statusCode", text: "상태" },
|
|
{ id: "originalFilename", text: "파일명" },
|
|
{ id: "rowCount", text: "건수" },
|
|
{ id: "errorCount", text: "오류" },
|
|
{ id: "uploadedAt", text: "업로드시각" }
|
|
],
|
|
batches,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "statusCode") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>오류내역</h3>
|
|
\${table(
|
|
[
|
|
{ id: "batchId", text: "배치ID" },
|
|
{ id: "rowNumber", text: "행" },
|
|
{ id: "issueCode", text: "오류코드" },
|
|
{ id: "issueMessage", text: "오류메시지" },
|
|
{ id: "severityCode", text: "등급" }
|
|
],
|
|
issues,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "severityCode") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
\`;
|
|
}
|
|
|
|
function renderConsolidation() {
|
|
const runs = state.runs?.datasets?.runs || [];
|
|
return \`
|
|
\${heroContent()}
|
|
<div class="panel">
|
|
<h3>집계 실행</h3>
|
|
<div class="row"><label>회계기간</label><input id="run-period" value="2026-03" /></div>
|
|
<div class="row actions">
|
|
<button data-action="request-run">집계 실행</button>
|
|
<button class="secondary" data-action="reload-runs">상태 새로고침</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>집계 이력</h3>
|
|
\${table(
|
|
[
|
|
{ id: "id", text: "실행ID" },
|
|
{ id: "fiscalPeriod", text: "회계기간" },
|
|
{ id: "statusCode", text: "상태" },
|
|
{ id: "requestedBy", text: "요청자" },
|
|
{ id: "requestedAt", text: "요청시각" },
|
|
{ id: "finishedAt", text: "완료시각" },
|
|
{ id: "summaryMessage", text: "요약" }
|
|
],
|
|
runs,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "statusCode") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
\`;
|
|
}
|
|
|
|
function renderReports() {
|
|
const datasets = state.reports?.datasets || {};
|
|
const artifacts = datasets.artifacts || [];
|
|
const logs = datasets.jobLogs || [];
|
|
|
|
return \`
|
|
\${heroContent()}
|
|
<div class="grid-3">
|
|
<div class="status-card"><div class="label">산출물 수</div><div class="value">\${artifacts.length}</div></div>
|
|
<div class="status-card"><div class="label">최근 로그 수</div><div class="value">\${logs.length}</div></div>
|
|
<div class="status-card"><div class="label">세션 사용자</div><div class="value">\${state.session?.fullName || "-"}</div></div>
|
|
</div>
|
|
<div class="panel" style="margin-top: 18px;">
|
|
<h3>리포트 산출물</h3>
|
|
\${table(
|
|
[
|
|
{ id: "id", text: "산출물ID" },
|
|
{ id: "runId", text: "실행ID" },
|
|
{ id: "artifactType", text: "형식" },
|
|
{ id: "downloadName", text: "파일명" },
|
|
{ id: "createdAt", text: "생성시각" }
|
|
],
|
|
artifacts,
|
|
{
|
|
render(column, value, row) {
|
|
if (column.id === "downloadName") {
|
|
return \`<a href="/api/reports/\${row.id}/download">\${value}</a>\`;
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
<div class="panel">
|
|
<h3>최근 배치 로그</h3>
|
|
\${table(
|
|
[
|
|
{ id: "id", text: "로그ID" },
|
|
{ id: "jobType", text: "작업유형" },
|
|
{ id: "referenceId", text: "참조ID" },
|
|
{ id: "logLevel", text: "레벨" },
|
|
{ id: "logMessage", text: "메시지" },
|
|
{ id: "createdAt", text: "생성시각" }
|
|
],
|
|
logs,
|
|
{
|
|
render(column, value) {
|
|
if (column.id === "logLevel") {
|
|
return pill(value);
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
)}
|
|
</div>
|
|
\`;
|
|
}
|
|
|
|
function shellContent(content) {
|
|
return \`
|
|
<div class="shell">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<h1>${escapeXml(appSpec.appTitle)}</h1>
|
|
<p>Spec driven preview generated from Nexacro DSL</p>
|
|
</div>
|
|
<div class="nav-list">\${renderNav()}</div>
|
|
<div class="panel" style="margin-top: 18px;">
|
|
<h3 style="margin-top:0;">세션</h3>
|
|
<div class="muted">\${state.session ? \`\${state.session.fullName} / \${state.session.roleCode}\` : "로그인 필요"}</div>
|
|
<div class="row actions" style="margin-top: 12px;">
|
|
<button class="secondary" data-action="logout" \${state.session ? "" : "disabled"}>로그아웃</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<div class="topbar">
|
|
<div></div>
|
|
<div class="footer-links">
|
|
<a href="/sample-data/trial-balance-invalid.xlsx" download>오류 샘플</a>
|
|
<a href="/sample-data/trial-balance-valid.xlsx" download>정상 TB</a>
|
|
<a href="/sample-data/forecast-valid.xlsx" download>정상 Forecast</a>
|
|
</div>
|
|
</div>
|
|
\${content}
|
|
</main>
|
|
</div>
|
|
\`;
|
|
}
|
|
|
|
function render() {
|
|
let content = "";
|
|
switch (state.currentRoute) {
|
|
case "login":
|
|
content = renderLogin();
|
|
break;
|
|
case "master":
|
|
content = renderMaster();
|
|
break;
|
|
case "uploads":
|
|
content = renderUploads();
|
|
break;
|
|
case "consolidation":
|
|
content = renderConsolidation();
|
|
break;
|
|
case "reports":
|
|
content = renderReports();
|
|
break;
|
|
default:
|
|
content = "<div class='panel'>정의되지 않은 화면입니다.</div>";
|
|
}
|
|
|
|
document.getElementById("app").innerHTML = shellContent(content);
|
|
bindEvents();
|
|
}
|
|
|
|
async function loadSession() {
|
|
try {
|
|
state.session = await api("/api/auth/me");
|
|
} catch (error) {
|
|
state.session = null;
|
|
}
|
|
}
|
|
|
|
async function loadMaster() {
|
|
if (!state.session) return;
|
|
state.master = await api("/api/tx/master/reference");
|
|
}
|
|
|
|
async function loadUploads() {
|
|
if (!state.session) return;
|
|
state.uploads = await api("/api/tx/uploads/overview");
|
|
}
|
|
|
|
async function loadRuns() {
|
|
if (!state.session) return;
|
|
state.runs = await api("/api/tx/consolidations/overview");
|
|
}
|
|
|
|
async function loadReports() {
|
|
if (!state.session) return;
|
|
state.reports = await api("/api/tx/reports/overview");
|
|
}
|
|
|
|
async function refreshAll() {
|
|
await loadSession();
|
|
if (state.session) {
|
|
await Promise.all([loadMaster(), loadUploads(), loadRuns(), loadReports()]);
|
|
} else {
|
|
state.master = null;
|
|
state.uploads = null;
|
|
state.runs = null;
|
|
state.reports = null;
|
|
}
|
|
render();
|
|
}
|
|
|
|
function bindEvents() {
|
|
document.querySelectorAll("[data-route]").forEach((element) => {
|
|
element.addEventListener("click", async () => {
|
|
state.currentRoute = element.dataset.route;
|
|
if (state.currentRoute === "master") await loadMaster();
|
|
if (state.currentRoute === "uploads") await loadUploads();
|
|
if (state.currentRoute === "consolidation") await loadRuns();
|
|
if (state.currentRoute === "reports") await loadReports();
|
|
render();
|
|
});
|
|
});
|
|
|
|
const loginButton = document.querySelector("[data-action='login']");
|
|
if (loginButton) {
|
|
loginButton.addEventListener("click", async () => {
|
|
const username = document.getElementById("login-username").value;
|
|
const password = document.getElementById("login-password").value;
|
|
await api("/api/auth/login", {
|
|
method: "POST",
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
state.currentRoute = "master";
|
|
await refreshAll();
|
|
});
|
|
}
|
|
|
|
const logoutButton = document.querySelector("[data-action='logout']");
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener("click", async () => {
|
|
await api("/api/auth/logout", { method: "POST" });
|
|
state.currentRoute = "login";
|
|
await refreshAll();
|
|
});
|
|
}
|
|
|
|
const uploadButton = document.querySelector("[data-action='upload']");
|
|
if (uploadButton) {
|
|
uploadButton.addEventListener("click", async () => {
|
|
const templateCode = document.getElementById("upload-template").value;
|
|
const fiscalPeriod = document.getElementById("upload-period").value;
|
|
const file = document.getElementById("upload-file").files[0];
|
|
if (!file) {
|
|
alert("업로드할 파일을 선택하세요.");
|
|
return;
|
|
}
|
|
const formData = new FormData();
|
|
formData.append("templateCode", templateCode);
|
|
formData.append("fiscalPeriod", fiscalPeriod);
|
|
formData.append("file", file);
|
|
await api("/api/uploads", { method: "POST", body: formData });
|
|
await loadUploads();
|
|
render();
|
|
});
|
|
}
|
|
|
|
const reloadUploadsButton = document.querySelector("[data-action='reload-uploads']");
|
|
if (reloadUploadsButton) {
|
|
reloadUploadsButton.addEventListener("click", async () => {
|
|
await loadUploads();
|
|
render();
|
|
});
|
|
}
|
|
|
|
const runButton = document.querySelector("[data-action='request-run']");
|
|
if (runButton) {
|
|
runButton.addEventListener("click", async () => {
|
|
const fiscalPeriod = document.getElementById("run-period").value;
|
|
await api("/api/consolidations/runs", {
|
|
method: "POST",
|
|
body: JSON.stringify({ fiscalPeriod, reportCurrency: "KRW" })
|
|
});
|
|
await loadRuns();
|
|
render();
|
|
});
|
|
}
|
|
|
|
const reloadRunsButton = document.querySelector("[data-action='reload-runs']");
|
|
if (reloadRunsButton) {
|
|
reloadRunsButton.addEventListener("click", async () => {
|
|
await loadRuns();
|
|
await loadReports();
|
|
render();
|
|
});
|
|
}
|
|
}
|
|
|
|
refreshAll().catch((error) => {
|
|
console.error(error);
|
|
document.getElementById("app").innerHTML = \`<div class="panel"><h3>초기화 실패</h3><p>\${error.message}</p></div>\`;
|
|
});
|
|
`;
|
|
}
|
|
|
|
function generatePreview(appSpec, forms, basePreviewDir = previewDir) {
|
|
ensureDir(path.join(basePreviewDir, "assets"));
|
|
ensureDir(path.join(basePreviewDir, "sample-data"));
|
|
fs.writeFileSync(path.join(basePreviewDir, "index.html"), previewHtml(appSpec));
|
|
fs.writeFileSync(path.join(basePreviewDir, "assets", "forms.js"), previewScript(forms));
|
|
fs.writeFileSync(path.join(basePreviewDir, "assets", "styles.css"), previewCss());
|
|
const appJs = `${fs.readFileSync(path.join(basePreviewDir, "assets", "forms.js"), "utf8")}\n${previewAppJs(appSpec)}`;
|
|
fs.writeFileSync(path.join(basePreviewDir, "assets", "app.js"), appJs);
|
|
}
|
|
|
|
function generate() {
|
|
const { appSpec, forms } = loadSpecs();
|
|
generateProjectFiles(appSpec, forms);
|
|
generatePreview(appSpec, forms);
|
|
}
|
|
|
|
if (require.main === module) {
|
|
generate();
|
|
}
|
|
|
|
module.exports = {
|
|
loadSpecs,
|
|
generateProjectFiles,
|
|
generatePreview,
|
|
generate,
|
|
renderXfdl
|
|
};
|
|
|