kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 

- Phase 1: 리포트 관리 페이지(Admin) 고도화 - CRUD, 목록/그리드 뷰
- Phase 2: 내부 리포트 목록 컨텍스트 뷰어
- Phase 3: 화면관리 컴포넌트화 (드래그&드롭)

리팩토링:
- ReportDesignerContext 분리: 2049줄 → 484줄 (contexts/report-designer/ 하위 훅 추출)
- MM_TO_PX 상수 중복 제거: useClipboardActions/useUIState → lib/report/constants 통일
- generateComponentId 헬퍼 중앙화: lib/report/constants로 단일 소스 관리
- ConditionalRule 타입 중복 제거: conditionalUtils → types/report 단일 정의
- 렌더러/속성/모달 컴포넌트 분리: designer/renderers, properties, modals 디렉토리

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
shin 2026-03-10 18:30:18 +09:00
parent 1ee946d712
commit 82f788bbb5
1106 changed files with 530287 additions and 78057 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
backend-node/package-lock.json generated
View File

@ -1046,6 +1046,7 @@
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
@ -2373,6 +2374,7 @@
"resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.1.tgz",
"integrity": "sha512-/KCsg3xSlR+nCK8/8ZYSknYxvXHwubJrU82F3Lm1Fp6789VQ0/3RJKfsmRXjqfaTA++23CvC3hqmqe/2GEt6Kw==",
"license": "MIT",
"peer": true,
"dependencies": {
"cluster-key-slot": "1.1.2",
"generic-pool": "3.9.0",
@ -3485,6 +3487,7 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
"integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~6.21.0"
}
@ -3721,6 +3724,7 @@
"integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
"dev": true,
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "6.21.0",
"@typescript-eslint/types": "6.21.0",
@ -3938,6 +3942,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@ -4463,6 +4468,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.3",
"caniuse-lite": "^1.0.30001741",
@ -5673,6 +5679,7 @@
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
@ -5951,6 +5958,7 @@
"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
"license": "MIT",
"peer": true,
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
@ -7486,6 +7494,7 @@
"integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@jest/core": "^29.7.0",
"@jest/types": "^29.6.3",
@ -8455,7 +8464,6 @@
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"license": "MIT",
"peer": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
@ -9343,6 +9351,7 @@
"resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
"integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
"license": "MIT",
"peer": true,
"dependencies": {
"pg-connection-string": "^2.9.1",
"pg-pool": "^3.10.1",
@ -10198,7 +10207,6 @@
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
}
@ -11006,6 +11014,7 @@
"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@cspotcode/source-map-support": "^0.8.0",
"@tsconfig/node10": "^1.0.7",
@ -11111,6 +11120,7 @@
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"

2135
backend-node/scripts/create-report-templates.js Normal file
View File

File diff suppressed because it is too large Load Diff

342
backend-node/scripts/create-sample-reports.js Normal file
View File

@ -0,0 +1,342 @@
/**
* 기본 템플릿으로 예시 리포트 16건 생성 스크립트
* 실행: cd backend-node && node scripts/create-sample-reports.js
*
* - 한글 카테고리 사용
* - 작성자/작성일 다양하게 구성
* - 8가지 기본 템플릿을 활용하여 각 2건씩 총 16건
*/
const http = require("http");
function apiRequest(method, path, token, body = null) {
return new Promise((resolve, reject) => {
const bodyStr = body ? JSON.stringify(body) : null;
const headers = {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
};
if (bodyStr) headers["Content-Length"] = Buffer.byteLength(bodyStr);
const req = http.request(
{ hostname: "localhost", port: 8080, path, method, headers },
(res) => {
let data = "";
res.on("data", (chunk) => (data += chunk));
res.on("end", () => {
try { resolve(JSON.parse(data)); } catch { resolve({ raw: data }); }
});
}
);
req.on("error", reject);
if (bodyStr) req.write(bodyStr);
req.end();
});
}
async function getToken() {
const body = JSON.stringify({ userId: "wace", password: "qlalfqjsgh11" });
return new Promise((resolve, reject) => {
const req = http.request(
{
hostname: "localhost", port: 8080, path: "/api/auth/login", method: "POST",
headers: { "Content-Type": "application/json", "Content-Length": Buffer.byteLength(body) },
},
(res) => {
let data = "";
res.on("data", (c) => (data += c));
res.on("end", () => {
try { resolve(JSON.parse(data).data?.token); } catch (e) { reject(e); }
});
}
);
req.on("error", reject);
req.write(body);
req.end();
});
}
// ─── 작성자 풀 (user_id) ───────────────────────────────────────────────────────
const AUTHORS = ["wace", "drkim", "admin"];
// ─── 작성일 풀 (다양한 날짜) ────────────────────────────────────────────────────
const DATES = [
"2025-11-15", "2025-12-03", "2025-12-22",
"2026-01-08", "2026-01-19", "2026-01-28",
"2026-02-05", "2026-02-14", "2026-02-21",
"2026-02-28", "2026-03-01", "2026-03-03",
"2026-03-05", "2026-03-07", "2026-03-08", "2026-03-10",
];
// ─── 16건 예시 리포트 정의 ──────────────────────────────────────────────────────
const SAMPLE_REPORTS = [
// 견적서 x2
{
reportNameKor: "표준 견적서",
reportNameEng: "Standard Quotation",
reportType: "견적서",
description: "수신자/공급자 정보, 품목 테이블, 공급가액/세액/합계 자동 계산 포함",
templateType: "QUOTATION",
author: AUTHORS[0], date: DATES[15],
},
{
reportNameKor: "해외 견적서 (영문)",
reportNameEng: "Export Quotation",
reportType: "견적서",
description: "해외 거래처용 영문 견적서 양식 (FOB/CIF 조건 포함)",
templateType: "EXPORT_QUOTATION",
author: AUTHORS[1], date: DATES[10],
},
// 발주서 x2
{
reportNameKor: "자재 발주서",
reportNameEng: "Material Purchase Order",
reportType: "발주서",
description: "발주처/자사 정보, 품목 테이블, 발주조건 포함 (4단계 결재)",
templateType: "PURCHASE_ORDER",
author: AUTHORS[0], date: DATES[14],
},
{
reportNameKor: "외주 가공 발주서",
reportNameEng: "Outsourcing Purchase Order",
reportType: "발주서",
description: "외주 협력업체 가공 의뢰용 발주서 양식",
templateType: "PURCHASE_ORDER",
author: AUTHORS[2], date: DATES[7],
},
// 수주 확인서 x2
{
reportNameKor: "수주 확인서",
reportNameEng: "Sales Order Confirmation",
reportType: "수주확인서",
description: "발주처/자사 정보, 품목 테이블, 수주 합계금액, 납품조건 포함",
templateType: "SALES_ORDER",
author: AUTHORS[1], date: DATES[13],
},
{
reportNameKor: "긴급 수주 확인서",
reportNameEng: "Urgent Sales Order Confirmation",
reportType: "수주확인서",
description: "긴급 납기 대응용 수주 확인서 (단납기 조건 포함)",
templateType: "SALES_ORDER",
author: AUTHORS[0], date: DATES[5],
},
// 거래명세서 x2
{
reportNameKor: "거래 명세서",
reportNameEng: "Transaction Statement",
reportType: "거래명세서",
description: "공급자/공급받는자 정보, 품목 테이블, 합계금액, 인수 서명란 포함",
templateType: "DELIVERY_NOTE",
author: AUTHORS[0], date: DATES[12],
},
{
reportNameKor: "월별 거래 명세서",
reportNameEng: "Monthly Transaction Statement",
reportType: "거래명세서",
description: "월간 거래 내역 합산 명세서 양식",
templateType: "DELIVERY_NOTE",
author: AUTHORS[2], date: DATES[3],
},
// 작업지시서 x2
{
reportNameKor: "생산 작업지시서",
reportNameEng: "Production Work Order",
reportType: "작업지시서",
description: "작업지시/제품 정보, 자재 소요 내역, 작업 공정, 바코드/QR 포함",
templateType: "WORK_ORDER",
author: AUTHORS[1], date: DATES[11],
},
{
reportNameKor: "조립 작업지시서",
reportNameEng: "Assembly Work Order",
reportType: "작업지시서",
description: "조립 라인 전용 작업지시서 (공정순서/부품목록 포함)",
templateType: "WORK_ORDER",
author: AUTHORS[0], date: DATES[6],
},
// 검사 성적서 x2
{
reportNameKor: "품질 검사 성적서",
reportNameEng: "Quality Inspection Report",
reportType: "검사성적서",
description: "검사/제품 정보, 검사항목 테이블, 종합 판정(합격/불합격), 서명란 포함",
templateType: "INSPECTION_REPORT",
author: AUTHORS[0], date: DATES[9],
},
{
reportNameKor: "수입검사 성적서",
reportNameEng: "Incoming Inspection Report",
reportType: "검사성적서",
description: "수입 자재/부품 품질 검사 성적서 양식",
templateType: "INSPECTION_REPORT",
author: AUTHORS[2], date: DATES[1],
},
// 세금계산서 x2
{
reportNameKor: "전자 세금계산서",
reportNameEng: "Electronic Tax Invoice",
reportType: "세금계산서",
description: "승인번호/작성일자, 공급자/공급받는자 그리드, 품목 테이블, 결제방법 포함",
templateType: "TAX_INVOICE",
author: AUTHORS[1], date: DATES[8],
},
{
reportNameKor: "수정 세금계산서",
reportNameEng: "Amended Tax Invoice",
reportType: "세금계산서",
description: "기존 발행 세금계산서의 수정 발행용 양식",
templateType: "TAX_INVOICE",
author: AUTHORS[0], date: DATES[2],
},
// 생산계획 현황표 x2
{
reportNameKor: "월간 생산계획 현황표",
reportNameEng: "Monthly Production Plan Status",
reportType: "생산현황",
description: "계획/생산수량 요약 카드, 생산계획 테이블, 상태 범례, 비고 포함",
templateType: "PRODUCTION_PLAN",
author: AUTHORS[0], date: DATES[4],
},
{
reportNameKor: "주간 생산실적 현황표",
reportNameEng: "Weekly Production Performance",
reportType: "생산현황",
description: "주간 단위 생산실적 집계 및 달성률 현황표",
templateType: "PRODUCTION_PLAN",
author: AUTHORS[2], date: DATES[0],
},
];
// ─── 메인 실행 ─────────────────────────────────────────────────────────────────
async function main() {
console.log("로그인 중...");
let token;
try {
token = await getToken();
console.log("로그인 성공\n");
} catch (e) {
console.error("로그인 실패:", e.message);
process.exit(1);
}
// 1. 기존 리포트 모두 삭제
console.log("기존 리포트 삭제 중...");
let allReports = [];
let page = 1;
while (true) {
const resp = await apiRequest("GET", `/api/admin/reports?page=${page}&limit=50`, token);
const items = resp.data?.items || [];
if (items.length === 0) break;
allReports = allReports.concat(items);
if (allReports.length >= (resp.data?.total || 0)) break;
page++;
}
console.log(` ${allReports.length}건 발견`);
for (const rpt of allReports) {
await apiRequest("DELETE", `/api/admin/reports/${rpt.report_id}`, token);
console.log(` 삭제: ${rpt.report_name_kor}`);
}
// 2. 템플릿 매핑
console.log("\n템플릿 조회 중...");
const tplResp = await apiRequest("GET", "/api/admin/reports/templates", token);
const allTpls = [...(tplResp.data?.system || []), ...(tplResp.data?.custom || [])];
const tplMap = {};
for (const t of allTpls) {
if (!tplMap[t.template_type]) tplMap[t.template_type] = t;
}
console.log(` ${allTpls.length}건 발견\n`);
// 3. 16건 리포트 생성
console.log("예시 리포트 16건 생성 시작...");
const createdIds = [];
for (let i = 0; i < SAMPLE_REPORTS.length; i++) {
const s = SAMPLE_REPORTS[i];
const tpl = tplMap[s.templateType];
const reportData = {
reportNameKor: s.reportNameKor,
reportNameEng: s.reportNameEng,
reportType: s.reportType,
description: s.description,
templateId: tpl?.template_id || null,
};
const result = await apiRequest("POST", "/api/admin/reports", token, reportData);
if (!result.success) {
console.error(` [${i + 1}] 실패: ${s.reportNameKor} - ${result.message}`);
continue;
}
const reportId = result.data?.reportId;
createdIds.push({ reportId, author: s.author, date: s.date, name: s.reportNameKor });
// 레이아웃 저장
if (tpl) {
const raw = typeof tpl.layout_config === "string"
? JSON.parse(tpl.layout_config) : tpl.layout_config || {};
const components = raw.components || [];
const ps = raw.pageSettings || {};
await apiRequest("PUT", `/api/admin/reports/${reportId}/layout`, token, {
layoutConfig: {
pages: [{
page_id: `pg_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
page_name: "페이지 1", page_order: 0,
width: ps.width || 210, height: ps.height || 297,
orientation: ps.orientation || "portrait",
margins: ps.margins || { top: 10, bottom: 10, left: 10, right: 10 },
background_color: "#ffffff",
components,
}],
},
queries: [], menuObjids: [],
});
}
console.log(` [${i + 1}] ${s.reportNameKor} (${s.reportType}) - ${s.author} / ${s.date}`);
}
// 4. DB 직접 업데이트 (작성자 / 작성일 변경)
console.log("\n작성자/작성일 DB 업데이트 중...");
for (const item of createdIds) {
await apiRequest("PUT", `/api/admin/reports/${item.reportId}`, token, {
// 이 API는 updateReport 이므로 직접 필드 업데이트 가능한지 확인 필요
// 그렇지 않으면 별도 SQL 필요
});
}
// updateReport API로 created_by/created_at 을 변경할 수 없으므로
// 직접 DB 업데이트 스크립트를 별도 실행
console.log("\nDB 업데이트 SQL 생성...");
const sqlStatements = createdIds.map((item) => {
return `UPDATE report_master SET created_by = '${item.author}', created_at = '${item.date} 09:00:00+09' WHERE report_id = '${item.reportId}';`;
});
// DB 직접 접근으로 업데이트
try {
const { Pool } = require("pg");
require("dotenv").config({ path: require("path").join(__dirname, "..", ".env") });
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
});
for (const item of createdIds) {
await pool.query(
`UPDATE report_master SET created_by = $1, created_at = $2 WHERE report_id = $3`,
[item.author, `${item.date} 09:00:00+09`, item.reportId]
);
}
await pool.end();
console.log(` ${createdIds.length}건 업데이트 완료`);
} catch (e) {
console.warn(" DB 직접 연결 실패, SQL을 수동으로 실행하세요:");
sqlStatements.forEach((sql) => console.log(" " + sql));
}
console.log(`\n완료! ${createdIds.length}건 생성`);
}
main();

211
backend-node/src/controllers/reportController.ts
View File

@ -1,7 +1,3 @@
/**
* 리포트 관리 컨트롤러
*/
import { Request, Response, NextFunction } from "express";
import reportService from "../services/reportService";
import {
@ -9,6 +5,7 @@ import {
UpdateReportRequest,
SaveLayoutRequest,
CreateTemplateRequest,
GetReportsParams,
} from "../types/report";
import path from "path";
import fs from "fs";
@ -36,16 +33,15 @@ import { WatermarkConfig } from "../types/report";
import bwipjs from "bwip-js";
export class ReportController {
/**
* 리포트 목록 조회
* GET /api/admin/reports
*/
async getReports(req: Request, res: Response, next: NextFunction) {
try {
const {
page = "1",
limit = "20",
searchText = "",
searchField,
startDate,
endDate,
reportType = "",
useYn = "Y",
sortBy = "created_at",
@ -56,6 +52,9 @@ export class ReportController {
page: parseInt(page as string, 10),
limit: parseInt(limit as string, 10),
searchText: searchText as string,
searchField: searchField as GetReportsParams["searchField"],
startDate: startDate as string | undefined,
endDate: endDate as string | undefined,
reportType: reportType as string,
useYn: useYn as string,
sortBy: sortBy as string,
@ -71,10 +70,6 @@ export class ReportController {
}
}
/**
* 리포트 상세 조회
* GET /api/admin/reports/:reportId
*/
async getReportById(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
@ -97,16 +92,29 @@ export class ReportController {
}
}
/**
* 리포트 생성
* POST /api/admin/reports
*/
async getReportsByMenuObjid(req: Request, res: Response, next: NextFunction) {
try {
const { menuObjid } = req.params;
const menuObjidNum = parseInt(menuObjid, 10);
if (isNaN(menuObjidNum)) {
return res.status(400).json({ success: false, message: "menuObjid는 숫자여야 합니다." });
}
const result = await reportService.getReportsByMenuObjid(menuObjidNum);
return res.json({ success: true, data: result });
} catch (error) {
return next(error);
}
}
async createReport(req: Request, res: Response, next: NextFunction) {
try {
const data: CreateReportRequest = req.body;
const userId = (req as any).user?.userId || "SYSTEM";
const companyCode = (req as any).user?.companyCode || "*";
// 필수 필드 검증
if (!data.reportNameKor || !data.reportType) {
return res.status(400).json({
success: false,
@ -114,6 +122,8 @@ export class ReportController {
});
}
data.companyCode = companyCode;
const reportId = await reportService.createReport(data, userId);
return res.status(201).json({
@ -128,10 +138,6 @@ export class ReportController {
}
}
/**
* 리포트 수정
* PUT /api/admin/reports/:reportId
*/
async updateReport(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
@ -156,10 +162,6 @@ export class ReportController {
}
}
/**
* 리포트 삭제
* DELETE /api/admin/reports/:reportId
*/
async deleteReport(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
@ -182,16 +184,13 @@ export class ReportController {
}
}
/**
* 리포트 복사
* POST /api/admin/reports/:reportId/copy
*/
async copyReport(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
const userId = (req as any).user?.userId || "SYSTEM";
const { newName } = req.body;
const newReportId = await reportService.copyReport(reportId, userId);
const newReportId = await reportService.copyReport(reportId, userId, newName);
if (!newReportId) {
return res.status(404).json({
@ -212,10 +211,6 @@ export class ReportController {
}
}
/**
* 레이아웃 조회
* GET /api/admin/reports/:reportId/layout
*/
async getLayout(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
@ -229,29 +224,26 @@ export class ReportController {
});
}
// components 컬럼에서 JSON 파싱
const parsedComponents = layout.components
? JSON.parse(layout.components)
: null;
// Service에서 이미 JSON.parse 처리된 상태이므로 추가 파싱 불필요
const storedData = layout.components;
let layoutData;
// 새 구조 (layoutConfig.pages)인지 확인
if (
parsedComponents &&
parsedComponents.pages &&
Array.isArray(parsedComponents.pages)
storedData &&
typeof storedData === "object" &&
!Array.isArray(storedData) &&
Array.isArray((storedData as any).pages)
) {
// pages 배열을 직접 포함하여 반환
layoutData = {
...layout,
pages: parsedComponents.pages,
components: [], // 호환성을 위해 빈 배열
pages: (storedData as any).pages,
watermark: (storedData as any).watermark,
components: storedData,
};
} else {
// 기존 구조: components 배열
layoutData = {
...layout,
components: parsedComponents || [],
components: storedData || [],
};
}
@ -264,17 +256,12 @@ export class ReportController {
}
}
/**
* 레이아웃 저장
* PUT /api/admin/reports/:reportId/layout
*/
async saveLayout(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
const data: SaveLayoutRequest = req.body;
const userId = (req as any).user?.userId || "SYSTEM";
// 필수 필드 검증 (페이지 기반 구조)
if (
!data.layoutConfig ||
!data.layoutConfig.pages ||
@ -297,10 +284,6 @@ export class ReportController {
}
}
/**
* 템플릿 목록 조회
* GET /api/admin/reports/templates
*/
async getTemplates(req: Request, res: Response, next: NextFunction) {
try {
const templates = await reportService.getTemplates();
@ -314,16 +297,24 @@ export class ReportController {
}
}
/**
* 템플릿 생성
* POST /api/admin/reports/templates
*/
async getCategories(req: Request, res: Response, next: NextFunction) {
try {
const categories = await reportService.getCategories();
return res.json({
success: true,
data: categories,
});
} catch (error) {
return next(error);
}
}
async createTemplate(req: Request, res: Response, next: NextFunction) {
try {
const data: CreateTemplateRequest = req.body;
const userId = (req as any).user?.userId || "SYSTEM";
// 필수 필드 검증
if (!data.templateNameKor || !data.templateType) {
return res.status(400).json({
success: false,
@ -345,17 +336,12 @@ export class ReportController {
}
}
/**
* 현재 리포트를 템플릿으로 저장
* POST /api/admin/reports/:reportId/save-as-template
*/
async saveAsTemplate(req: Request, res: Response, next: NextFunction) {
try {
const { reportId } = req.params;
const { templateNameKor, templateNameEng, description } = req.body;
const userId = (req as any).user?.userId || "SYSTEM";
// 필수 필드 검증
if (!templateNameKor) {
return res.status(400).json({
success: false,
@ -383,10 +369,6 @@ export class ReportController {
}
}
/**
* 레이아웃 데이터로 직접 템플릿 생성 (리포트 저장 불필요)
* POST /api/admin/reports/templates/create-from-layout
*/
async createTemplateFromLayout(
req: Request,
res: Response,
@ -403,7 +385,6 @@ export class ReportController {
} = req.body;
const userId = (req as any).user?.userId || "SYSTEM";
// 필수 필드 검증
if (!templateNameKor) {
return res.status(400).json({
success: false,
@ -440,10 +421,6 @@ export class ReportController {
}
}
/**
* 템플릿 삭제
* DELETE /api/admin/reports/templates/:templateId
*/
async deleteTemplate(req: Request, res: Response, next: NextFunction) {
try {
const { templateId } = req.params;
@ -466,10 +443,6 @@ export class ReportController {
}
}
/**
* 쿼리 실행
* POST /api/admin/reports/:reportId/queries/:queryId/execute
*/
async executeQuery(req: Request, res: Response, next: NextFunction) {
try {
const { reportId, queryId } = req.params;
@ -495,10 +468,6 @@ export class ReportController {
}
}
/**
* 외부 DB 연결 목록 조회 (활성화된 것만)
* GET /api/admin/reports/external-connections
*/
async getExternalConnections(
req: Request,
res: Response,
@ -520,10 +489,6 @@ export class ReportController {
}
}
/**
* 이미지 파일 업로드
* POST /api/admin/reports/upload-image
*/
async uploadImage(req: Request, res: Response, next: NextFunction) {
try {
if (!req.file) {
@ -536,7 +501,6 @@ export class ReportController {
const companyCode = req.body.companyCode || "SYSTEM";
const file = req.file;
// 파일 저장 경로 생성
const uploadDir = path.join(
process.cwd(),
"uploads",
@ -544,21 +508,17 @@ export class ReportController {
"reports"
);
// 디렉토리가 없으면 생성
if (!fs.existsSync(uploadDir)) {
fs.mkdirSync(uploadDir, { recursive: true });
}
// 고유한 파일명 생성 (타임스탬프 + 원본 파일명)
const timestamp = Date.now();
const safeFileName = file.originalname.replace(/[^a-zA-Z0-9._-]/g, "_");
const fileName = `${timestamp}_${safeFileName}`;
const filePath = path.join(uploadDir, fileName);
// 파일 저장
fs.writeFileSync(filePath, file.buffer);
// 웹에서 접근 가능한 URL 반환
const fileUrl = `/uploads/company_${companyCode}/reports/${fileName}`;
return res.json({
@ -576,10 +536,6 @@ export class ReportController {
}
}
/**
* 컴포넌트 데이터를 WORD(DOCX)로 변환
* POST /api/admin/reports/export-word
*/
async exportToWord(req: Request, res: Response, next: NextFunction) {
try {
const { layoutConfig, queryResults, fileName = "리포트" } = req.body;
@ -591,22 +547,15 @@ export class ReportController {
});
}
// mm를 twip으로 변환
const mmToTwip = (mm: number) => convertMillimetersToTwip(mm);
// 프론트엔드와 동일한 MM_TO_PX 상수 (캔버스에서 mm를 px로 변환할 때 사용하는 값)
const MM_TO_PX = 4;
// 1mm = 56.692913386 twip (docx 라이브러리 기준)
// px를 twip으로 변환: px -> mm -> twip
const MM_TO_PX = 4; // 프론트엔드와 동일, 1mm = 56.692913386 twip (docx)
const pxToTwip = (px: number) => Math.round((px / MM_TO_PX) * 56.692913386);
// 쿼리 결과 맵
const queryResultsMap: Record<
string,
{ fields: string[]; rows: Record<string, unknown>[] }
> = queryResults || {};
// 컴포넌트 값 가져오기
const getComponentValue = (component: any): string => {
if (component.queryId && component.fieldName) {
const queryResult = queryResultsMap[component.queryId];
@ -621,11 +570,9 @@ export class ReportController {
return component.defaultValue || "";
};
// px → half-point 변환 (1px = 0.75pt, Word는 half-pt 단위 사용)
// px * 0.75 * 2 = px * 1.5
// px → half-point (1px = 0.75pt, px * 1.5)
const pxToHalfPt = (px: number) => Math.round(px * 1.5);
// 셀 내용 생성 헬퍼 함수 (가로 배치용)
const createCellContent = (
component: any,
displayValue: string,
@ -3171,6 +3118,56 @@ export class ReportController {
});
}
}
// ─── 비주얼 쿼리 빌더 API ─────────────────────────────────────────────────────
async getSchemaTables(req: Request, res: Response, next: NextFunction) {
try {
const tables = await reportService.getSchemaTables();
return res.json({ success: true, data: tables });
} catch (error: any) {
console.error("스키마 테이블 조회 오류:", error);
return res.status(500).json({
success: false,
message: error.message || "테이블 목록 조회에 실패했습니다.",
});
}
}
async getSchemaTableColumns(req: Request, res: Response, next: NextFunction) {
try {
const { tableName } = req.params;
if (!tableName) {
return res.status(400).json({ success: false, message: "테이블명이 필요합니다." });
}
const columns = await reportService.getSchemaTableColumns(tableName);
return res.json({ success: true, data: columns });
} catch (error: any) {
console.error("테이블 컬럼 조회 오류:", error);
return res.status(500).json({
success: false,
message: error.message || "컬럼 목록 조회에 실패했습니다.",
});
}
}
async previewVisualQuery(req: Request, res: Response, next: NextFunction) {
try {
const { visualQuery } = req.body;
if (!visualQuery || !visualQuery.tableName) {
return res.status(400).json({ success: false, message: "visualQuery 정보가 필요합니다." });
}
const result = await reportService.executeVisualQuery(visualQuery);
const generatedSql = reportService.buildVisualQuerySql(visualQuery);
return res.json({ success: true, data: { ...result, sql: generatedSql } });
} catch (error: any) {
console.error("비주얼 쿼리 미리보기 오류:", error);
return res.status(500).json({
success: false,
message: error.message || "쿼리 실행에 실패했습니다.",
});
}
}
}
export default new ReportController();

21
backend-node/src/routes/reportRoutes.ts
View File

@ -43,6 +43,11 @@ router.get("/templates", (req, res, next) =>
router.post("/templates", (req, res, next) =>
reportController.createTemplate(req, res, next)
);
// 카테고리(report_type) 목록 조회
router.get("/categories", (req, res, next) =>
reportController.getCategories(req, res, next)
);
// 레이아웃 데이터로 직접 템플릿 생성 (리포트 저장 불필요)
router.post("/templates/create-from-layout", (req, res, next) =>
reportController.createTemplateFromLayout(req, res, next)
@ -61,6 +66,17 @@ router.post("/export-word", (req, res, next) =>
reportController.exportToWord(req, res, next)
);
// 비주얼 쿼리 빌더 — 스키마 조회 (/:reportId 패턴보다 반드시 먼저 등록)
router.get("/schema/tables", (req, res, next) =>
reportController.getSchemaTables(req, res, next)
);
router.get("/schema/tables/:tableName/columns", (req, res, next) =>
reportController.getSchemaTableColumns(req, res, next)
);
router.post("/schema/preview", (req, res, next) =>
reportController.previewVisualQuery(req, res, next)
);
// 리포트 목록
router.get("/", (req, res, next) =>
reportController.getReports(req, res, next)
@ -71,6 +87,11 @@ router.post("/", (req, res, next) =>
reportController.createReport(req, res, next)
);
// 메뉴별 리포트 목록 (/:reportId 보다 반드시 먼저 등록)
router.get("/by-menu/:menuObjid", (req, res, next) =>
reportController.getReportsByMenuObjid(req, res, next)
);
// 리포트 복사 (구체적인 경로를 먼저 배치)
router.post("/:reportId/copy", (req, res, next) =>
reportController.copyReport(req, res, next)

457
backend-node/src/services/reportService.ts
View File

@ -1,7 +1,3 @@
/**
* 리포트 관리 서비스
*/
import { v4 as uuidv4 } from "uuid";
import { query, queryOne, transaction } from "../database/db";
import {
@ -17,16 +13,28 @@ import {
SaveLayoutRequest,
GetTemplatesResponse,
CreateTemplateRequest,
VisualQuery,
} from "../types/report";
import { DatabaseConnectorFactory } from "../database/DatabaseConnectorFactory";
import { ExternalDbConnectionService } from "./externalDbConnectionService";
const REPORT_TYPE_LABELS: Record<string, string> = {
ORDER: "발주서",
INVOICE: "청구서",
STATEMENT: "거래명세서",
RECEIPT: "영수증",
BASIC: "기본",
};
function findTypeCodesByLabel(searchText: string): string[] {
const lower = searchText.toLowerCase();
return Object.entries(REPORT_TYPE_LABELS)
.filter(([code, label]) => label.includes(searchText) || code.toLowerCase().includes(lower))
.map(([code]) => code);
}
export class ReportService {
/**
* SQL 쿼리 검증 (SELECT만 허용)
*/
private validateQuerySafety(sql: string): void {
// 위험한 SQL 명령어 목록
const dangerousKeywords = [
"DELETE",
"DROP",
@ -44,12 +52,9 @@ export class ReportService {
"CALL",
];
// SQL을 대문자로 변환하여 검사
const upperSql = sql.toUpperCase().trim();
// 위험한 키워드 검사
for (const keyword of dangerousKeywords) {
// 단어 경계를 고려하여 검사 (예: DELETE, DELETE FROM 등)
const regex = new RegExp(`\\b${keyword}\\b`, "i");
if (regex.test(upperSql)) {
throw new Error(
@ -58,14 +63,12 @@ export class ReportService {
}
}
// SELECT 쿼리인지 확인
if (!upperSql.startsWith("SELECT") && !upperSql.startsWith("WITH")) {
throw new Error(
"SELECT 쿼리만 허용됩니다. 데이터 조회 용도로만 사용할 수 있습니다."
);
}
// 세미콜론으로 구분된 여러 쿼리 방지
const semicolonCount = (sql.match(/;/g) || []).length;
if (
semicolonCount > 1 ||
@ -77,14 +80,14 @@ export class ReportService {
}
}
/**
* 리포트 목록 조회
*/
async getReports(params: GetReportsParams): Promise<GetReportsResponse> {
const {
page = 1,
limit = 20,
searchText = "",
searchField,
startDate,
endDate,
reportType = "",
useYn = "Y",
sortBy = "created_at",
@ -93,59 +96,98 @@ export class ReportService {
const offset = (page - 1) * limit;
// WHERE 조건 동적 생성
const conditions: string[] = [];
const values: any[] = [];
let paramIndex = 1;
if (useYn) {
conditions.push(`use_yn = $${paramIndex++}`);
conditions.push(`rm.use_yn = $${paramIndex++}`);
values.push(useYn);
}
if (searchText) {
conditions.push(
`(report_name_kor LIKE $${paramIndex} OR report_name_eng LIKE $${paramIndex})`
);
values.push(`%${searchText}%`);
paramIndex++;
const isDateRangeSearch =
(searchField === "created_at" || searchField === "updated_at") && startDate && endDate;
if (isDateRangeSearch) {
if (searchField === "created_at") {
conditions.push(`rm.created_at >= $${paramIndex}::date`);
values.push(startDate);
paramIndex++;
conditions.push(`rm.created_at < ($${paramIndex}::date + INTERVAL '1 day')`);
values.push(endDate);
paramIndex++;
} else {
conditions.push(`COALESCE(rm.updated_at, rm.created_at) >= $${paramIndex}::date`);
values.push(startDate);
paramIndex++;
conditions.push(`COALESCE(rm.updated_at, rm.created_at) < ($${paramIndex}::date + INTERVAL '1 day')`);
values.push(endDate);
paramIndex++;
}
} else if (searchText) {
if (searchField === "created_by") {
conditions.push(`rm.created_by LIKE $${paramIndex}`);
values.push(`%${searchText}%`);
paramIndex++;
} else if (searchField === "report_type") {
const matchedCodes = findTypeCodesByLabel(searchText);
if (matchedCodes.length > 0) {
const placeholders = matchedCodes.map(() => `$${paramIndex++}`).join(", ");
conditions.push(`rm.report_type IN (${placeholders})`);
values.push(...matchedCodes);
} else {
conditions.push(`rm.report_type LIKE $${paramIndex}`);
values.push(`%${searchText}%`);
paramIndex++;
}
} else if (searchField === "updated_at") {
conditions.push(`CAST(rm.updated_at AS TEXT) LIKE $${paramIndex}`);
values.push(`%${searchText}%`);
paramIndex++;
} else {
conditions.push(
`(rm.report_name_kor LIKE $${paramIndex} OR rm.report_name_eng LIKE $${paramIndex})`
);
values.push(`%${searchText}%`);
paramIndex++;
}
}
if (reportType) {
conditions.push(`report_type = $${paramIndex++}`);
conditions.push(`rm.report_type = $${paramIndex++}`);
values.push(reportType);
}
const whereClause =
conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
// 전체 개수 조회
const countQuery = `
SELECT COUNT(*) as total
FROM report_master
FROM report_master rm
${whereClause}
`;
const countResult = await queryOne<{ total: string }>(countQuery, values);
const total = parseInt(countResult?.total || "0", 10);
// 목록 조회
const listQuery = `
SELECT
report_id,
report_name_kor,
report_name_eng,
template_id,
report_type,
company_code,
description,
use_yn,
created_at,
created_by,
updated_at,
updated_by
FROM report_master
rm.report_id,
rm.report_name_kor,
rm.report_name_eng,
rm.template_id,
rt.template_name_kor AS template_name,
rm.report_type,
rm.company_code,
rm.description,
rm.use_yn,
rm.created_at,
rm.created_by,
rm.updated_at,
rm.updated_by
FROM report_master rm
LEFT JOIN report_template rt ON rm.template_id = rt.template_id
${whereClause}
ORDER BY ${sortBy} ${sortOrder}
ORDER BY rm.${sortBy} ${sortOrder}
LIMIT $${paramIndex++} OFFSET $${paramIndex}
`;
@ -155,19 +197,57 @@ export class ReportService {
offset,
]);
const typeSummaryRows = await query<{ report_type: string; count: string }>(
`SELECT report_type, COUNT(*) as count
FROM report_master
WHERE use_yn = 'Y' AND report_type IS NOT NULL AND report_type != ''
GROUP BY report_type
ORDER BY count DESC`,
[]
);
const typeSummary = typeSummaryRows.map((r) => ({
type: r.report_type,
count: parseInt(r.count, 10),
}));
const allTypes = typeSummary.map((t) => t.type).sort();
const recentActivityRows = await query<{ date_label: string; date_raw: string; count: string }>(
`SELECT TO_CHAR(COALESCE(updated_at, created_at), 'MM/DD') AS date_label,
MAX(COALESCE(updated_at, created_at)) AS date_raw,
COUNT(*) AS count
FROM report_master
WHERE use_yn = 'Y'
AND COALESCE(updated_at, created_at) >= NOW() - INTERVAL '30 days'
GROUP BY date_label
ORDER BY count DESC, date_raw DESC
LIMIT 3`,
[]
);
const recentActivity = recentActivityRows
.map((r) => ({ date: r.date_label, count: parseInt(r.count, 10) }))
.sort((a, b) => a.count - b.count);
const recentCountResult = await queryOne<{ count: string }>(
`SELECT COUNT(*) AS count FROM report_master
WHERE use_yn = 'Y'
AND COALESCE(updated_at, created_at) >= NOW() - INTERVAL '30 days'`,
[]
);
const recentTotal = parseInt(recentCountResult?.count || "0", 10);
return {
items,
total,
page,
limit,
typeSummary,
allTypes,
recentActivity,
recentTotal,
};
}
/**
* 리포트 상세 조회
*/
async getReportById(reportId: string): Promise<ReportDetail | null> {
// 리포트 마스터 조회
const reportQuery = `
SELECT
report_id,
@ -191,7 +271,6 @@ export class ReportService {
return null;
}
// 레이아웃 조회
const layoutQuery = `
SELECT
layout_id,
@ -211,9 +290,24 @@ export class ReportService {
FROM report_layout
WHERE report_id = $1
`;
const layout = await queryOne<ReportLayout>(layoutQuery, [reportId]);
const layoutRaw = await queryOne<any>(layoutQuery, [reportId]);
let layout: ReportLayout | null = null;
if (layoutRaw) {
let parsedComponents = layoutRaw.components;
if (typeof parsedComponents === "string") {
try {
parsedComponents = JSON.parse(parsedComponents);
} catch {
parsedComponents = null;
}
}
layout = {
...layoutRaw,
components: parsedComponents,
};
}
// 쿼리 조회
const queriesQuery = `
SELECT
query_id,
@ -234,7 +328,6 @@ export class ReportService {
`;
const queries = await query<ReportQuery>(queriesQuery, [reportId]);
// 메뉴 매핑 조회
const menuMappingQuery = `
SELECT menu_objid
FROM report_menu_mapping
@ -254,9 +347,6 @@ export class ReportService {
};
}
/**
* 리포트 생성
*/
async createReport(
data: CreateReportRequest,
userId: string
@ -264,7 +354,6 @@ export class ReportService {
const reportId = `RPT_${uuidv4().replace(/-/g, "").substring(0, 20)}`;
return transaction(async (client) => {
// 리포트 마스터 생성
const insertReportQuery = `
INSERT INTO report_master (
report_id,
@ -290,7 +379,6 @@ export class ReportService {
userId,
]);
// 템플릿이 있으면 해당 템플릿의 레이아웃 복사
if (data.templateId) {
const templateQuery = `
SELECT layout_config FROM report_template WHERE template_id = $1
@ -337,9 +425,6 @@ export class ReportService {
});
}
/**
* 리포트 수정
*/
async updateReport(
reportId: string,
data: UpdateReportRequest,
@ -390,26 +475,20 @@ export class ReportService {
WHERE report_id = $${paramIndex}
`;
const result = await query(updateQuery, values);
await query(updateQuery, values);
return true;
}
/**
* 리포트 삭제
*/
async deleteReport(reportId: string): Promise<boolean> {
return transaction(async (client) => {
// 쿼리 삭제 (CASCADE로 자동 삭제되지만 명시적으로)
await client.query(`DELETE FROM report_query WHERE report_id = $1`, [
reportId,
]);
// 레이아웃 삭제
await client.query(`DELETE FROM report_layout WHERE report_id = $1`, [
reportId,
]);
// 리포트 마스터 삭제
const result = await client.query(
`DELETE FROM report_master WHERE report_id = $1`,
[reportId]
@ -419,12 +498,8 @@ export class ReportService {
});
}
/**
* 리포트 복사
*/
async copyReport(reportId: string, userId: string): Promise<string | null> {
async copyReport(reportId: string, userId: string, newName?: string): Promise<string | null> {
return transaction(async (client) => {
// 원본 리포트 조회
const originalQuery = `
SELECT * FROM report_master WHERE report_id = $1
`;
@ -437,7 +512,6 @@ export class ReportService {
const original = originalResult.rows[0];
const newReportId = `RPT_${uuidv4().replace(/-/g, "").substring(0, 20)}`;
// 리포트 마스터 복사
const copyReportQuery = `
INSERT INTO report_master (
report_id,
@ -454,7 +528,7 @@ export class ReportService {
await client.query(copyReportQuery, [
newReportId,
`${original.report_name_kor} (복사)`,
newName || `${original.report_name_kor} (복사)`,
original.report_name_eng ? `${original.report_name_eng} (Copy)` : null,
original.template_id,
original.report_type,
@ -464,7 +538,6 @@ export class ReportService {
userId,
]);
// 레이아웃 복사
const layoutQuery = `
SELECT * FROM report_layout WHERE report_id = $1
`;
@ -490,7 +563,6 @@ export class ReportService {
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
`;
// components가 이미 문자열이면 그대로, 객체면 JSON.stringify
const componentsData =
typeof originalLayout.components === "string"
? originalLayout.components
@ -511,7 +583,6 @@ export class ReportService {
]);
}
// 쿼리 복사
const queriesQuery = `
SELECT * FROM report_query WHERE report_id = $1 ORDER BY display_order
`;
@ -552,9 +623,6 @@ export class ReportService {
});
}
/**
* 레이아웃 조회
*/
async getLayout(reportId: string): Promise<ReportLayout | null> {
const layoutQuery = `
SELECT
@ -576,19 +644,30 @@ export class ReportService {
WHERE report_id = $1
`;
return queryOne<ReportLayout>(layoutQuery, [reportId]);
const layoutRaw = await queryOne<any>(layoutQuery, [reportId]);
if (!layoutRaw) return null;
let parsedComponents = layoutRaw.components;
if (typeof parsedComponents === "string") {
try {
parsedComponents = JSON.parse(parsedComponents);
} catch {
parsedComponents = null;
}
}
return {
...layoutRaw,
components: parsedComponents,
};
}
/**
* 레이아웃 저장 (쿼리 포함) - 페이지 기반 구조
*/
async saveLayout(
reportId: string,
data: SaveLayoutRequest,
userId: string
): Promise<boolean> {
return transaction(async (client) => {
// 첫 번째 페이지 정보를 기본 레이아웃으로 사용
const firstPage = data.layoutConfig.pages[0];
const canvasWidth = firstPage?.width || 210;
const canvasHeight = firstPage?.height || 297;
@ -601,14 +680,12 @@ export class ReportService {
right: 20,
};
// 1. 레이아웃 저장
const existingQuery = `
SELECT layout_id FROM report_layout WHERE report_id = $1
`;
const existing = await client.query(existingQuery, [reportId]);
if (existing.rows.length > 0) {
// 업데이트 - components 컬럼에 전체 layoutConfig 저장
const updateQuery = `
UPDATE report_layout
SET
@ -633,12 +710,11 @@ export class ReportService {
margins.bottom,
margins.left,
margins.right,
JSON.stringify(data.layoutConfig), // 전체 layoutConfig 저장
JSON.stringify(data.layoutConfig),
userId,
reportId,
]);
} else {
// 생성
const layoutId = `LAY_${uuidv4().replace(/-/g, "").substring(0, 20)}`;
const insertQuery = `
INSERT INTO report_layout (
@ -666,19 +742,16 @@ export class ReportService {
margins.bottom,
margins.left,
margins.right,
JSON.stringify(data.layoutConfig), // 전체 layoutConfig 저장
JSON.stringify(data.layoutConfig),
userId,
]);
}
// 2. 쿼리 저장 (있는 경우)
if (data.queries && data.queries.length > 0) {
// 기존 쿼리 모두 삭제
await client.query(`DELETE FROM report_query WHERE report_id = $1`, [
reportId,
]);
// 새 쿼리 삽입
const insertQuerySql = `
INSERT INTO report_query (
query_id,
@ -702,24 +775,20 @@ export class ReportService {
q.type,
q.sqlQuery,
JSON.stringify(q.parameters),
(q as any).externalConnectionId || null, // 외부 DB 연결 ID
(q as any).externalConnectionId || null,
i,
userId,
]);
}
}
// 3. 메뉴 매핑 저장 (있는 경우)
if (data.menuObjids !== undefined) {
// 기존 메뉴 매핑 모두 삭제
await client.query(
`DELETE FROM report_menu_mapping WHERE report_id = $1`,
[reportId]
);
// 새 메뉴 매핑 삽입
if (data.menuObjids.length > 0) {
// 리포트의 company_code 조회
const reportResult = await client.query(
`SELECT company_code FROM report_master WHERE report_id = $1`,
[reportId]
@ -746,13 +815,15 @@ export class ReportService {
}
}
await client.query(
`UPDATE report_master SET updated_at = CURRENT_TIMESTAMP, updated_by = $1 WHERE report_id = $2`,
[userId, reportId]
);
return true;
});
}
/**
* 쿼리 실행 (내부 DB 또는 외부 DB)
*/
async executeQuery(
reportId: string,
queryId: string,
@ -764,10 +835,8 @@ export class ReportService {
let queryParameters: string[] = [];
let connectionId: number | null = externalConnectionId ?? null;
// 테스트 모드 (sqlQuery 직접 전달)
if (sqlQuery) {
sql_query = sqlQuery;
// 파라미터 순서 추출 (등장 순서대로)
const matches = sqlQuery.match(/\$\d+/g);
if (matches) {
const seen = new Set<string>();
@ -781,7 +850,6 @@ export class ReportService {
queryParameters = result;
}
} else {
// DB에서 쿼리 조회
const queryResult = await queryOne<ReportQuery>(
`SELECT * FROM report_query WHERE query_id = $1 AND report_id = $2`,
[queryId, reportId]
@ -798,21 +866,37 @@ export class ReportService {
connectionId = queryResult.external_connection_id;
}
// SQL 쿼리 안전성 검증 (SELECT만 허용)
this.validateQuerySafety(sql_query);
// 파라미터 배열 생성 ($1, $2 순서대로)
const paramArray: any[] = [];
for (const param of queryParameters) {
paramArray.push(parameters[param] || null);
}
const allParamsNull = paramArray.length > 0 && paramArray.every((p) => p === null);
if (allParamsNull) {
let previewSql = sql_query;
for (const param of queryParameters) {
const escapedParam = param.replace("$", "\\$");
const conditionPattern = new RegExp(
`\\S+\\s*(?:=|!=|<>|>=|<=|>|<|LIKE|ILIKE|IN\\s*\\()\\s*${escapedParam}\\)?`,
"gi"
);
previewSql = previewSql.replace(conditionPattern, "TRUE");
}
if (!/\bLIMIT\b/i.test(previewSql)) {
previewSql = previewSql.replace(/;?\s*$/, " LIMIT 100");
}
sql_query = previewSql;
paramArray.length = 0;
}
try {
let result: any[];
// 외부 DB 연결이 있으면 외부 DB에서 실행
if (connectionId) {
// 외부 DB 연결 정보 조회
const connectionResult =
await ExternalDbConnectionService.getConnectionById(connectionId);
@ -822,7 +906,6 @@ export class ReportService {
const connection = connectionResult.data;
// DatabaseConnectorFactory를 사용하여 외부 DB 쿼리 실행
const config = {
host: connection.host,
port: connection.port,
@ -848,11 +931,9 @@ export class ReportService {
await connector.disconnect();
}
} else {
// 내부 DB에서 실행
result = await query(sql_query, paramArray);
}
// 필드명 추출
const fields = result.length > 0 ? Object.keys(result[0]) : [];
return {
@ -864,12 +945,37 @@ export class ReportService {
}
}
/**
* 템플릿 목록 조회
*/
async getReportsByMenuObjid(menuObjid: number): Promise<{ items: ReportMaster[]; total: number }> {
const listQuery = `
SELECT
rm.report_id,
rm.report_name_kor,
rm.report_name_eng,
rm.template_id,
rt.template_name_kor AS template_name,
rm.report_type,
rm.company_code,
rm.description,
rm.use_yn,
rm.created_at,
rm.created_by,
rm.updated_at,
rm.updated_by
FROM report_master rm
JOIN report_menu_mapping rmm ON rm.report_id = rmm.report_id
LEFT JOIN report_template rt ON rm.template_id = rt.template_id
WHERE rmm.menu_objid = $1
AND rm.use_yn = 'Y'
ORDER BY rm.report_name_kor ASC
`;
const items = await query<ReportMaster>(listQuery, [menuObjid]);
return { items: items || [], total: (items || []).length };
}
async getTemplates(): Promise<GetTemplatesResponse> {
const templateQuery = `
SELECT
SELECT
template_id,
template_name_kor,
template_name_eng,
@ -898,9 +1004,6 @@ export class ReportService {
return { system, custom };
}
/**
* 템플릿 생성 (사용자 정의)
*/
async createTemplate(
data: CreateTemplateRequest,
userId: string
@ -936,22 +1039,16 @@ export class ReportService {
return templateId;
}
/**
* 템플릿 삭제 (사용자 정의만 가능)
*/
async deleteTemplate(templateId: string): Promise<boolean> {
const deleteQuery = `
DELETE FROM report_template
WHERE template_id = $1 AND is_system = 'N'
`;
const result = await query(deleteQuery, [templateId]);
await query(deleteQuery, [templateId]);
return true;
}
/**
* 현재 리포트를 템플릿으로 저장
*/
async saveAsTemplate(
reportId: string,
templateNameKor: string,
@ -960,7 +1057,6 @@ export class ReportService {
userId: string
): Promise<string> {
return transaction(async (client) => {
// 리포트 정보 조회
const reportQuery = `
SELECT report_type FROM report_master WHERE report_id = $1
`;
@ -972,7 +1068,6 @@ export class ReportService {
const reportType = reportResult.rows[0].report_type;
// 레이아웃 조회
const layoutQuery = `
SELECT
canvas_width,
@ -994,7 +1089,6 @@ export class ReportService {
const layout = layoutResult.rows[0];
// 쿼리 조회
const queriesQuery = `
SELECT
query_name,
@ -1009,7 +1103,6 @@ export class ReportService {
`;
const queriesResult = await client.query(queriesQuery, [reportId]);
// 레이아웃 설정 JSON 생성
const layoutConfig = {
width: layout.canvas_width,
height: layout.canvas_height,
@ -1020,10 +1113,9 @@ export class ReportService {
left: layout.margin_left,
right: layout.margin_right,
},
components: JSON.parse(layout.components || "[]"),
components: typeof layout.components === "string" ? JSON.parse(layout.components || "[]") : (layout.components || []),
};
// 기본 쿼리 JSON 생성
const defaultQueries = queriesResult.rows.map((q) => ({
name: q.query_name,
type: q.query_type,
@ -1033,7 +1125,6 @@ export class ReportService {
displayOrder: q.display_order,
}));
// 템플릿 생성
const templateId = `TPL_${uuidv4().replace(/-/g, "").substring(0, 20)}`;
const insertQuery = `
@ -1067,7 +1158,6 @@ export class ReportService {
});
}
// 레이아웃 데이터로 직접 템플릿 생성 (리포트 저장 불필요)
async createTemplateFromLayout(
templateNameKor: string,
templateNameEng: string | null | undefined,
@ -1127,6 +1217,111 @@ export class ReportService {
return templateId;
}
// ─── 비주얼 쿼리 빌더 ─────────────────────────────────────────────────────────
/** information_schema에서 사용자 테이블 목록 조회 */
async getSchemaTables(): Promise<Array<{ table_name: string; table_type: string }>> {
const sql = `
SELECT table_name, table_type
FROM information_schema.tables
WHERE table_schema = 'public'
AND table_type IN ('BASE TABLE', 'VIEW')
ORDER BY table_name
`;
return query<{ table_name: string; table_type: string }>(sql, []);
}
/** 특정 테이블의 컬럼 정보 조회 */
async getSchemaTableColumns(
tableName: string
): Promise<Array<{ column_name: string; data_type: string; is_nullable: string }>> {
this.validateTableName(tableName);
const sql = `
SELECT column_name, data_type, is_nullable
FROM information_schema.columns
WHERE table_schema = 'public'
AND table_name = $1
ORDER BY ordinal_position
`;
return query<{ column_name: string; data_type: string; is_nullable: string }>(sql, [tableName]);
}
/** VisualQuery → SELECT SQL 문자열 빌드 (순수 함수) */
buildVisualQuerySql(vq: VisualQuery): string {
this.validateTableName(vq.tableName);
const selectParts: string[] = [];
for (const col of vq.columns) {
this.validateIdentifier(col);
selectParts.push(`"${col}"`);
}
for (const fc of vq.formulaColumns) {
this.validateFormulaExpression(fc.expression);
this.validateIdentifier(fc.alias);
selectParts.push(`(${fc.expression}) AS "${fc.alias}"`);
}
if (selectParts.length === 0) {
throw new Error("최소 1개 이상의 컬럼을 선택해야 합니다.");
}
const limit = Math.min(Math.max(vq.limit ?? 100, 1), 10000);
return `SELECT ${selectParts.join(", ")} FROM "${vq.tableName}" LIMIT ${limit}`;
}
/** VisualQuery SQL 생성 + 실행 → { fields, rows } */
async executeVisualQuery(vq: VisualQuery): Promise<{ fields: string[]; rows: any[] }> {
const sql = this.buildVisualQuerySql(vq);
this.validateQuerySafety(sql);
const result = await query(sql, []);
const fields = result.length > 0 ? Object.keys(result[0]) : [];
return { fields, rows: result };
}
// ─── 비주얼 쿼리 검증 헬퍼 ─────────────────────────────────────────────────────
/** 테이블/컬럼명 화이트리스트 검증 — 영문+숫자+밑줄만 허용 */
private validateTableName(name: string): void {
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
throw new Error(`유효하지 않은 테이블명입니다: ${name}`);
}
}
private validateIdentifier(name: string): void {
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
throw new Error(`유효하지 않은 식별자입니다: ${name}`);
}
}
/** 수식 표현식 안전성 검증 — 세미콜론, 주석, 서브쿼리 금지 */
private validateFormulaExpression(expr: string): void {
const forbidden = [";", "--", "/*", "*/", "SELECT", "INSERT", "UPDATE", "DELETE", "DROP", "TRUNCATE"];
const upper = expr.toUpperCase();
for (const keyword of forbidden) {
if (upper.includes(keyword)) {
throw new Error(`수식에 사용할 수 없는 키워드가 포함되어 있습니다: ${keyword}`);
}
}
}
// ─── 카테고리(report_type) 관리 ─────────────────────────────────────────────────
/** DB에 저장된 모든 카테고리(report_type) 목록 조회 (중복 제거, 정렬) */
async getCategories(): Promise<string[]> {
const sql = `
SELECT DISTINCT report_type
FROM report_master
WHERE report_type IS NOT NULL
AND report_type != ''
ORDER BY report_type ASC
`;
const rows = await query<{ report_type: string }>(sql, []);
return rows.map((r) => r.report_type);
}
}
export default new ReportService();

170
backend-node/src/types/report.ts
View File

@ -1,8 +1,3 @@
/**
* 리포트 관리 시스템 타입 정의
*/
// 리포트 템플릿
export interface ReportTemplate {
template_id: string;
template_name_kor: string;
@ -21,12 +16,12 @@ export interface ReportTemplate {
updated_by: string | null;
}
// 리포트 마스터
export interface ReportMaster {
report_id: string;
report_name_kor: string;
report_name_eng: string | null;
template_id: string | null;
template_name: string | null;
report_type: string;
company_code: string | null;
description: string | null;
@ -37,7 +32,6 @@ export interface ReportMaster {
updated_by: string | null;
}
// 리포트 레이아웃
export interface ReportLayout {
layout_id: string;
report_id: string;
@ -55,7 +49,6 @@ export interface ReportLayout {
updated_by: string | null;
}
// 리포트 쿼리
export interface ReportQuery {
query_id: string;
report_id: string;
@ -63,7 +56,7 @@ export interface ReportQuery {
query_type: "MASTER" | "DETAIL";
sql_query: string;
parameters: string[] | null;
external_connection_id: number | null; // 외부 DB 연결 ID (NULL이면 내부 DB)
external_connection_id: number | null;
display_order: number;
created_at: Date;
created_by: string | null;
@ -71,34 +64,37 @@ export interface ReportQuery {
updated_by: string | null;
}
// 리포트 상세 (마스터 + 레이아웃 + 쿼리 + 연결된 메뉴)
export interface ReportDetail {
report: ReportMaster;
layout: ReportLayout | null;
queries: ReportQuery[];
menuObjids?: number[]; // 연결된 메뉴 ID 목록
menuObjids?: number[];
}
// 리포트 목록 조회 파라미터
export interface GetReportsParams {
page?: number;
limit?: number;
searchText?: string;
searchField?: "report_name" | "created_by" | "report_type" | "updated_at" | "created_at";
startDate?: string;
endDate?: string;
reportType?: string;
useYn?: string;
sortBy?: string;
sortOrder?: "ASC" | "DESC";
}
// 리포트 목록 응답
export interface GetReportsResponse {
items: ReportMaster[];
total: number;
page: number;
limit: number;
typeSummary: Array<{ type: string; count: number }>;
allTypes: string[];
recentActivity: Array<{ date: string; count: number }>;
recentTotal: number;
}
// 리포트 생성 요청
export interface CreateReportRequest {
reportNameKor: string;
reportNameEng?: string;
@ -108,7 +104,6 @@ export interface CreateReportRequest {
companyCode?: string;
}
// 리포트 수정 요청
export interface UpdateReportRequest {
reportNameKor?: string;
reportNameEng?: string;
@ -117,23 +112,18 @@ export interface UpdateReportRequest {
useYn?: string;
}
// 워터마크 설정
export interface WatermarkConfig {
enabled: boolean;
type: "text" | "image";
// 텍스트 워터마크
text?: string;
fontSize?: number;
fontColor?: string;
// 이미지 워터마크
imageUrl?: string;
// 공통 설정
opacity: number; // 0~1
opacity: number;
style: "diagonal" | "center" | "tile";
rotation?: number; // 대각선일 때 각도 (기본 -45)
rotation?: number;
}
// 페이지 설정
export interface PageConfig {
page_id: string;
page_name: string;
@ -150,13 +140,11 @@ export interface PageConfig {
components: any[];
}
// 레이아웃 설정
export interface ReportLayoutConfig {
pages: PageConfig[];
watermark?: WatermarkConfig; // 전체 페이지 공유 워터마크
watermark?: WatermarkConfig;
}
// 레이아웃 저장 요청
export interface SaveLayoutRequest {
layoutConfig: ReportLayoutConfig;
queries?: Array<{
@ -167,10 +155,9 @@ export interface SaveLayoutRequest {
parameters: string[];
externalConnectionId?: number;
}>;
menuObjids?: number[]; // 연결할 메뉴 ID 목록
menuObjids?: number[];
}
// 리포트-메뉴 매핑
export interface ReportMenuMapping {
mapping_id: number;
report_id: string;
@ -180,13 +167,11 @@ export interface ReportMenuMapping {
created_by: string | null;
}
// 템플릿 목록 응답
export interface GetTemplatesResponse {
system: ReportTemplate[];
custom: ReportTemplate[];
}
// 템플릿 생성 요청
export interface CreateTemplateRequest {
templateNameKor: string;
templateNameEng?: string;
@ -196,7 +181,6 @@ export interface CreateTemplateRequest {
defaultQueries?: any;
}
// 컴포넌트 설정 (프론트엔드와 동기화)
export interface ComponentConfig {
id: string;
type: string;
@ -224,21 +208,16 @@ export interface ComponentConfig {
conditional?: string;
locked?: boolean;
groupId?: string;
// 이미지 전용
imageUrl?: string;
objectFit?: "contain" | "cover" | "fill" | "none";
// 구분선 전용
orientation?: "horizontal" | "vertical";
lineStyle?: "solid" | "dashed" | "dotted" | "double";
lineWidth?: number;
lineColor?: string;
// 서명/도장 전용
showLabel?: boolean;
labelText?: string;
labelPosition?: "top" | "left" | "bottom" | "right";
showUnderline?: boolean;
personName?: string;
// 테이블 전용
tableColumns?: Array<{
field: string;
header: string;
@ -249,9 +228,7 @@ export interface ComponentConfig {
headerTextColor?: string;
showBorder?: boolean;
rowHeight?: number;
// 페이지 번호 전용
pageNumberFormat?: "number" | "numberTotal" | "koreanNumber";
// 카드 컴포넌트 전용
cardTitle?: string;
cardItems?: Array<{
label: string;
@ -267,7 +244,6 @@ export interface ComponentConfig {
titleColor?: string;
labelColor?: string;
valueColor?: string;
// 계산 컴포넌트 전용
calcItems?: Array<{
label: string;
value: number | string;
@ -280,7 +256,6 @@ export interface ComponentConfig {
showCalcBorder?: boolean;
numberFormat?: "none" | "comma" | "currency";
currencySuffix?: string;
// 바코드 컴포넌트 전용
barcodeType?: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "QR";
barcodeValue?: string;
barcodeFieldName?: string;
@ -289,19 +264,118 @@ export interface ComponentConfig {
barcodeBackground?: string;
barcodeMargin?: number;
qrErrorCorrectionLevel?: "L" | "M" | "Q" | "H";
// QR코드 다중 필드 (JSON 형식)
qrDataFields?: Array<{
fieldName: string;
label: string;
}>;
qrUseMultiField?: boolean;
qrIncludeAllRows?: boolean;
// 체크박스 컴포넌트 전용
checkboxChecked?: boolean; // 체크 상태 (고정값)
checkboxFieldName?: string; // 쿼리 필드 바인딩 (truthy/falsy 값)
checkboxLabel?: string; // 체크박스 옆 레이블 텍스트
checkboxSize?: number; // 체크박스 크기 (px)
checkboxColor?: string; // 체크 색상
checkboxBorderColor?: string; // 테두리 색상
checkboxLabelPosition?: "left" | "right"; // 레이블 위치
checkboxChecked?: boolean;
checkboxFieldName?: string;
checkboxLabel?: string;
checkboxSize?: number;
checkboxColor?: string;
checkboxBorderColor?: string;
checkboxLabelPosition?: "left" | "right";
visualQuery?: VisualQuery;
// 카드 레이아웃 설정 (card 컴포넌트 전용 - v3)
cardLayoutConfig?: CardLayoutConfig;
}
export interface VisualQueryFormulaColumn {
alias: string;
header: string;
expression: string;
}
export interface VisualQuery {
tableName: string;
limit?: number;
columns: string[];
formulaColumns: VisualQueryFormulaColumn[];
}
// ─────────────────────────────────────────────────────────────────────────────
// 카드 레이아웃 v3 타입 정의
// ─────────────────────────────────────────────────────────────────────────────
export type CardElementType = "header" | "dataCell" | "divider" | "badge";
export type CellDirection = "vertical" | "horizontal";
export interface CardElementBase {
id: string;
type: CardElementType;
colspan?: number;
rowspan?: number;
}
export interface CardHeaderElement extends CardElementBase {
type: "header";
icon?: string;
iconColor?: string;
title: string;
titleColor?: string;
titleFontSize?: number;
}
export interface CardDataCellElement extends CardElementBase {
type: "dataCell";
direction: CellDirection;
label: string;
columnName?: string;
inputType?: "text" | "date" | "number" | "select" | "readonly";
required?: boolean;
placeholder?: string;
selectOptions?: string[];
labelWidth?: number;
labelFontSize?: number;
labelColor?: string;
valueFontSize?: number;
valueColor?: string;
}
export interface CardDividerElement extends CardElementBase {
type: "divider";
style?: "solid" | "dashed" | "dotted";
color?: string;
thickness?: number;
}
export interface CardBadgeElement extends CardElementBase {
type: "badge";
label?: string;
columnName?: string;
colorMap?: Record<string, string>;
}
export type CardElement =
| CardHeaderElement
| CardDataCellElement
| CardDividerElement
| CardBadgeElement;
export interface CardLayoutRow {
id: string;
gridColumns: number;
elements: CardElement[];
height?: string;
}
export interface CardLayoutConfig {
tableName?: string;
primaryKey?: string;
rows: CardLayoutRow[];
padding?: string;
gap?: string;
borderStyle?: string;
borderColor?: string;
backgroundColor?: string;
headerTitleFontSize?: number;
headerTitleColor?: string;
labelFontSize?: number;
labelColor?: string;
valueFontSize?: number;
valueColor?: string;
dividerThickness?: number;
dividerColor?: string;
}

181
design-system.md Normal file
View File

@ -0,0 +1,181 @@
# WACE PLM — Modal Design System
> 이 파일은 Claude Code(`CLAUDE.md`)와 Cursor(`.cursor/rules/modal-design.mdc`)에서 자동 참조됩니다.
> **모달 패턴만** 정의합니다. Designer 페이지 레이아웃은 변경하지 않습니다.
---
## 1. 모달 Shell 구조
```tsx
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-[{SIZE}] h-[80vh] overflow-hidden flex flex-col p-0 [&>button]:hidden">
<DialogTitle className="sr-only">{title}</DialogTitle>
<DialogDescription className="sr-only">{description}</DialogDescription>
{/* Header */}
<div className="px-6 py-4 border-b border-border flex items-center justify-between">
<div className="flex items-center gap-2">
<{Icon} className="w-4 h-4 text-blue-600" />
<h2 className="text-base font-semibold text-foreground">{title}</h2>
</div>
<Button variant="ghost" size="icon" onClick={() => onOpenChange(false)} className="w-8 h-8">
<X className="w-4 h-4" />
</Button>
</div>
{/* Tab (선택) */}
{/* → Section 2 참조 */}
{/* Content */}
<div className="flex-1 overflow-y-auto px-6 py-4">
{/* 콘텐츠 */}
</div>
{/* Footer */}
<div className="px-6 py-4 border-t border-border flex items-center justify-end gap-2">
<Button variant="outline" onClick={() => onOpenChange(false)}>취소</Button>
<Button className="bg-blue-600 hover:bg-blue-700">저장</Button>
</div>
</DialogContent>
</Dialog>
```
### 사이즈 변형
| 용도 | className |
|------|-----------|
| 기본 (512px) | `max-w-lg` |
| 중간 (672px) | `max-w-2xl` |
| 넓음 (800px) | `max-w-[800px]` |
| 최대 (1024px) | `max-w-5xl` |
---
## 2. 탭 패턴 (모달 내부)
```tsx
<div className="mx-6 mt-3">
<div className="h-9 bg-muted/30 rounded-lg p-0.5 inline-flex">
{tabs.map(tab => (
<button
key={tab.value}
onClick={() => setActiveTab(tab.value)}
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-1.5 ${
activeTab === tab.value
? "bg-blue-50 text-blue-700 shadow-sm"
: "bg-transparent text-foreground hover:text-foreground/80"
}`}
>
<tab.Icon className="w-3.5 h-3.5" />
{tab.label}
</button>
))}
</div>
</div>
```
- shadcn `<Tabs>` 컴포넌트 **사용 금지** — 위 커스텀 버튼 패턴 사용
- 활성 탭: `bg-blue-50 text-blue-700 shadow-sm`
- 비활성 탭: `bg-transparent text-foreground`
---
## 3. 섹션 패턴
### 정보 섹션 (강조, Teal)
```tsx
<div className="bg-teal-50 border border-teal-200 rounded-xl p-4">
{/* 데이터 소스, 정보 입력 등 주요 섹션 */}
</div>
```
### 일반 섹션 (흰색)
```tsx
<div className="bg-white border border-border rounded-xl p-4 space-y-4">
{/* 설정, 목록 등 */}
</div>
```
---
## 4. 폼 필드 패턴
```tsx
{/* Label + Input */}
<div className="space-y-2">
<Label className="text-xs font-medium text-foreground">라벨</Label>
<Input className="h-9 text-sm" placeholder="..." />
</div>
{/* Label + Select */}
<div className="space-y-2">
<Label className="text-xs font-medium text-foreground">라벨</Label>
<Select>
<SelectTrigger className="h-9 text-sm">
<SelectValue placeholder="선택하세요" />
</SelectTrigger>
<SelectContent>...</SelectContent>
</Select>
</div>
{/* 읽기 전용 Input */}
<div className="space-y-2">
<Label className="text-xs font-medium text-muted-foreground">라벨 (자동 감지)</Label>
<Input className="h-9 text-sm bg-muted" readOnly />
</div>
```
- 필드 간격: `space-y-3`
- Label: `text-xs font-medium`
- Input/Select 높이: `h-9`
---
## 5. 버튼 규칙 (모달 내)
| 위치 | variant | 용도 |
|------|---------|------|
| Footer 취소 | `outline` | 닫기, 취소 |
| Footer 저장 | `className="bg-blue-600 hover:bg-blue-700"` | 저장, 확인 |
| Footer 삭제 | `variant="destructive"` | 삭제 확인 |
| 콘텐츠 내 추가 | `variant="outline" size="sm" className="w-full gap-2"` | 행/항목 추가 |
| 콘텐츠 내 아이콘 | `variant="ghost" size="sm"` | 인라인 액션 |
| 삭제 아이콘 | `variant="ghost" size="sm" className="text-destructive hover:text-destructive hover:bg-destructive/10"` | 인라인 삭제 |
---
## 6. 오버레이 & 애니메이션
- 오버레이: `rgba(0, 0, 0, 0.6)` — globals.css에 이미 전역 설정됨
- 모달 열기: `fade-in 200ms + zoom-in-95` (shadcn 기본)
- 모달 닫기: `fade-out 150ms + zoom-out-95` (shadcn 기본)
- 탭 전환: 애니메이션 없음 (즉시)
---
## 7. 아이콘 규칙 (모달 내)
| 위치 | 크기 | 색상 |
|------|------|------|
| 헤더 타이틀 아이콘 | `w-4 h-4` (16px) | `text-blue-600` |
| 탭 내부 아이콘 | `w-3.5 h-3.5` (14px) | 탭 상태에 따라 자동 |
| 닫기 버튼 X | `w-4 h-4` (16px) | 기본 foreground |
| 콘텐츠 내 액션 아이콘 | `w-3 h-3` (12px) | `text-muted-foreground` |
| 행 추가 버튼 아이콘 | `w-3.5 h-3.5` (14px) | 기본 |
---
## 8. 접근성 필수 사항
```tsx
{/* DialogContent 내부 반드시 포함 */}
<DialogTitle className="sr-only">{모달 목적 설명}</DialogTitle>
<DialogDescription className="sr-only">{상세 설명}</DialogDescription>
```
- Escape 키로 닫기: shadcn Dialog 기본 제공
- 포커스 트랩: shadcn Dialog 기본 제공
- 닫기 버튼에 `aria-label` 불필요 (shadcn 처리)

591
docs/dohyeons/report-grid-system-implementation-plan.md
View File

@ -1,591 +0,0 @@
# 리포트 디자이너 그리드 시스템 구현 계획
## 개요
현재 자유 배치 방식의 리포트 디자이너를 **그리드 기반 스냅 시스템**으로 전환합니다.
안드로이드 홈 화면의 위젯 배치 방식과 유사하게, 모든 컴포넌트는 그리드에 맞춰서만 배치 및 크기 조절이 가능합니다.
## 목표
1. **정렬된 레이아웃**: 그리드 기반으로 요소들이 자동 정렬
2. **Word/PDF 변환 개선**: 그리드 정보를 활용하여 정확한 문서 변환
3. **직관적인 UI**: 그리드 시각화를 통한 명확한 배치 가이드
4. **사용자 제어**: 그리드 크기, 가시성 등 사용자 설정 가능
## 핵심 개념
### 그리드 시스템
```typescript
interface GridConfig {
// 그리드 설정
cellWidth: number; // 그리드 셀 너비 (px)
cellHeight: number; // 그리드 셀 높이 (px)
rows: number; // 세로 그리드 수 (계산값: pageHeight / cellHeight)
columns: number; // 가로 그리드 수 (계산값: pageWidth / cellWidth)
// 표시 설정
visible: boolean; // 그리드 표시 여부
snapToGrid: boolean; // 그리드 스냅 활성화 여부
// 시각적 설정
gridColor: string; // 그리드 선 색상
gridOpacity: number; // 그리드 투명도 (0-1)
}
```
### 컴포넌트 위치/크기 (그리드 기반)
```typescript
interface ComponentPosition {
// 그리드 좌표 (셀 단위)
gridX: number; // 시작 열 (0부터 시작)
gridY: number; // 시작 행 (0부터 시작)
gridWidth: number; // 차지하는 열 수
gridHeight: number; // 차지하는 행 수
// 실제 픽셀 좌표 (계산값)
x: number; // gridX * cellWidth
y: number; // gridY * cellHeight
width: number; // gridWidth * cellWidth
height: number; // gridHeight * cellHeight
}
```
## 구현 단계
### Phase 1: 그리드 시스템 기반 구조
#### 1.1 타입 정의
- **파일**: `frontend/types/report.ts`
- **내용**:
- `GridConfig` 인터페이스 추가
- `ComponentConfig`에 `gridX`, `gridY`, `gridWidth`, `gridHeight` 추가
- `ReportPage`에 `gridConfig` 추가
#### 1.2 Context 확장
- **파일**: `frontend/contexts/ReportDesignerContext.tsx`
- **내용**:
- `gridConfig` 상태 추가
- `updateGridConfig()` 함수 추가
- `snapToGrid()` 유틸리티 함수 추가
- 컴포넌트 추가/이동/리사이즈 시 그리드 스냅 적용
#### 1.3 그리드 계산 유틸리티
- **파일**: `frontend/lib/utils/gridUtils.ts` (신규)
- **내용**:
```typescript
// 픽셀 좌표 → 그리드 좌표 변환
export function pixelToGrid(pixel: number, cellSize: number): number;
// 그리드 좌표 → 픽셀 좌표 변환
export function gridToPixel(grid: number, cellSize: number): number;
// 컴포넌트 위치/크기를 그리드에 스냅
export function snapComponentToGrid(
component: ComponentConfig,
gridConfig: GridConfig
): ComponentConfig;
// 그리드 충돌 감지
export function detectGridCollision(
component: ComponentConfig,
otherComponents: ComponentConfig[]
): boolean;
```
### Phase 2: 그리드 시각화
#### 2.1 그리드 레이어 컴포넌트
- **파일**: `frontend/components/report/designer/GridLayer.tsx` (신규)
- **내용**:
- Canvas 위에 그리드 선 렌더링
- SVG 또는 Canvas API 사용
- 그리드 크기/색상/투명도 적용
- 줌/스크롤 시에도 정확한 위치 유지
```tsx
interface GridLayerProps {
gridConfig: GridConfig;
pageWidth: number;
pageHeight: number;
}
export function GridLayer({
gridConfig,
pageWidth,
pageHeight,
}: GridLayerProps) {
if (!gridConfig.visible) return null;
// SVG로 그리드 선 렌더링
return (
<svg className="absolute inset-0 pointer-events-none">
{/* 세로 선 */}
{Array.from({ length: gridConfig.columns + 1 }).map((_, i) => (
<line
key={`v-${i}`}
x1={i * gridConfig.cellWidth}
y1={0}
x2={i * gridConfig.cellWidth}
y2={pageHeight}
stroke={gridConfig.gridColor}
strokeOpacity={gridConfig.opacity}
/>
))}
{/* 가로 선 */}
{Array.from({ length: gridConfig.rows + 1 }).map((_, i) => (
<line
key={`h-${i}`}
x1={0}
y1={i * gridConfig.cellHeight}
x2={pageWidth}
y2={i * gridConfig.cellHeight}
stroke={gridConfig.gridColor}
strokeOpacity={gridConfig.opacity}
/>
))}
</svg>
);
}
```
#### 2.2 Canvas 통합
- **파일**: `frontend/components/report/designer/ReportDesignerCanvas.tsx`
- **내용**:
- `<GridLayer />` 추가
- 컴포넌트 렌더링 시 그리드 기반 위치 사용
### Phase 3: 드래그 앤 드롭 스냅
#### 3.1 드래그 시 그리드 스냅
- **파일**: `frontend/components/report/designer/ReportDesignerCanvas.tsx`
- **내용**:
- `useDrop` 훅 수정
- 드롭 위치를 그리드에 스냅
- 실시간 스냅 가이드 표시
```typescript
const [, drop] = useDrop({
accept: ["TEXT", "LABEL", "TABLE", "SIGNATURE", "STAMP"],
drop: (item: any, monitor) => {
const offset = monitor.getClientOffset();
if (!offset) return;
// 캔버스 상대 좌표 계산
const canvasRect = canvasRef.current?.getBoundingClientRect();
if (!canvasRect) return;
let x = offset.x - canvasRect.left;
let y = offset.y - canvasRect.top;
// 그리드 스냅 적용
if (gridConfig.snapToGrid) {
const gridX = Math.round(x / gridConfig.cellWidth);
const gridY = Math.round(y / gridConfig.cellHeight);
x = gridX * gridConfig.cellWidth;
y = gridY * gridConfig.cellHeight;
}
// 컴포넌트 추가
addComponent({ type: item.type, x, y });
},
});
```
#### 3.2 리사이즈 시 그리드 스냅
- **파일**: `frontend/components/report/designer/ComponentWrapper.tsx`
- **내용**:
- `react-resizable` 또는 `react-rnd`의 `snap` 설정 활용
- 리사이즈 핸들 드래그 시 그리드 단위로만 크기 조절
```typescript
<Rnd
position={{ x: component.x, y: component.y }}
size={{ width: component.width, height: component.height }}
onDragStop={(e, d) => {
let newX = d.x;
let newY = d.y;
if (gridConfig.snapToGrid) {
const gridX = Math.round(newX / gridConfig.cellWidth);
const gridY = Math.round(newY / gridConfig.cellHeight);
newX = gridX * gridConfig.cellWidth;
newY = gridY * gridConfig.cellHeight;
}
updateComponent(component.id, { x: newX, y: newY });
}}
onResizeStop={(e, direction, ref, delta, position) => {
let newWidth = parseInt(ref.style.width);
let newHeight = parseInt(ref.style.height);
if (gridConfig.snapToGrid) {
const gridWidth = Math.round(newWidth / gridConfig.cellWidth);
const gridHeight = Math.round(newHeight / gridConfig.cellHeight);
newWidth = gridWidth * gridConfig.cellWidth;
newHeight = gridHeight * gridConfig.cellHeight;
}
updateComponent(component.id, {
width: newWidth,
height: newHeight,
...position,
});
}}
grid={
gridConfig.snapToGrid
? [gridConfig.cellWidth, gridConfig.cellHeight]
: undefined
}
/>
```
### Phase 4: 그리드 설정 UI
#### 4.1 그리드 설정 패널
- **파일**: `frontend/components/report/designer/GridSettingsPanel.tsx` (신규)
- **내용**:
- 그리드 크기 조절 (cellWidth, cellHeight)
- 그리드 표시/숨김 토글
- 스냅 활성화/비활성화 토글
- 그리드 색상/투명도 조절
```tsx
export function GridSettingsPanel() {
const { gridConfig, updateGridConfig } = useReportDesigner();
return (
<Card>
<CardHeader>
<CardTitle className="text-sm">그리드 설정</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{/* 그리드 표시 */}
<div className="flex items-center justify-between">
<Label>그리드 표시</Label>
<Switch
checked={gridConfig.visible}
onCheckedChange={(visible) => updateGridConfig({ visible })}
/>
</div>
{/* 스냅 활성화 */}
<div className="flex items-center justify-between">
<Label>그리드 스냅</Label>
<Switch
checked={gridConfig.snapToGrid}
onCheckedChange={(snapToGrid) => updateGridConfig({ snapToGrid })}
/>
</div>
{/* 셀 크기 */}
<div className="space-y-2">
<Label>셀 너비 (px)</Label>
<Input
type="number"
value={gridConfig.cellWidth}
onChange={(e) =>
updateGridConfig({ cellWidth: parseInt(e.target.value) })
}
min={10}
max={100}
/>
</div>
<div className="space-y-2">
<Label>셀 높이 (px)</Label>
<Input
type="number"
value={gridConfig.cellHeight}
onChange={(e) =>
updateGridConfig({ cellHeight: parseInt(e.target.value) })
}
min={10}
max={100}
/>
</div>
{/* 프리셋 */}
<div className="space-y-2">
<Label>프리셋</Label>
<Select
onValueChange={(value) => {
const presets: Record<
string,
{ cellWidth: number; cellHeight: number }
> = {
fine: { cellWidth: 10, cellHeight: 10 },
medium: { cellWidth: 20, cellHeight: 20 },
coarse: { cellWidth: 50, cellHeight: 50 },
};
updateGridConfig(presets[value]);
}}
>
<SelectTrigger>
<SelectValue placeholder="그리드 크기 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="fine">세밀 (10x10)</SelectItem>
<SelectItem value="medium">중간 (20x20)</SelectItem>
<SelectItem value="coarse">넓음 (50x50)</SelectItem>
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
);
}
```
#### 4.2 툴바에 그리드 토글 추가
- **파일**: `frontend/components/report/designer/ReportDesignerToolbar.tsx`
- **내용**:
- 그리드 표시/숨김 버튼
- 그리드 설정 모달 열기 버튼
- 키보드 단축키 (`G` 키로 그리드 토글)
### Phase 5: Word 변환 개선
#### 5.1 그리드 기반 레이아웃 변환
- **파일**: `frontend/components/report/designer/ReportPreviewModal.tsx`
- **내용**:
- 그리드 정보를 활용하여 더 정확한 테이블 레이아웃 생성
- 그리드 행/열을 Word 테이블의 행/열로 매핑
```typescript
const handleDownloadWord = async () => {
// 그리드 기반으로 컴포넌트 배치 맵 생성
const gridMap: (ComponentConfig | null)[][] = Array(gridConfig.rows)
.fill(null)
.map(() => Array(gridConfig.columns).fill(null));
// 각 컴포넌트를 그리드 맵에 배치
for (const component of components) {
const gridX = Math.round(component.x / gridConfig.cellWidth);
const gridY = Math.round(component.y / gridConfig.cellHeight);
const gridWidth = Math.round(component.width / gridConfig.cellWidth);
const gridHeight = Math.round(component.height / gridConfig.cellHeight);
// 컴포넌트가 차지하는 모든 셀에 참조 저장
for (let y = gridY; y < gridY + gridHeight; y++) {
for (let x = gridX; x < gridX + gridWidth; x++) {
if (y < gridConfig.rows && x < gridConfig.columns) {
gridMap[y][x] = component;
}
}
}
}
// 그리드 맵을 Word 테이블로 변환
const tableRows: TableRow[] = [];
for (let y = 0; y < gridConfig.rows; y++) {
const cells: TableCell[] = [];
let x = 0;
while (x < gridConfig.columns) {
const component = gridMap[y][x];
if (!component) {
// 빈 셀
cells.push(new TableCell({ children: [new Paragraph("")] }));
x++;
} else {
// 컴포넌트 셀
const gridWidth = Math.round(component.width / gridConfig.cellWidth);
const gridHeight = Math.round(component.height / gridConfig.cellHeight);
const cell = createTableCell(component, gridWidth, gridHeight);
if (cell) cells.push(cell);
x += gridWidth;
}
}
if (cells.length > 0) {
tableRows.push(new TableRow({ children: cells }));
}
}
// ... Word 문서 생성
};
```
### Phase 6: 데이터 마이그레이션
#### 6.1 기존 레이아웃 자동 변환
- **파일**: `frontend/lib/utils/layoutMigration.ts` (신규)
- **내용**:
- 기존 절대 위치 데이터를 그리드 기반으로 변환
- 가장 가까운 그리드 셀에 스냅
- 마이그레이션 로그 생성
```typescript
export function migrateLayoutToGrid(
layout: ReportLayoutConfig,
gridConfig: GridConfig
): ReportLayoutConfig {
return {
...layout,
pages: layout.pages.map((page) => ({
...page,
gridConfig,
components: page.components.map((component) => {
// 픽셀 좌표를 그리드 좌표로 변환
const gridX = Math.round(component.x / gridConfig.cellWidth);
const gridY = Math.round(component.y / gridConfig.cellHeight);
const gridWidth = Math.max(
1,
Math.round(component.width / gridConfig.cellWidth)
);
const gridHeight = Math.max(
1,
Math.round(component.height / gridConfig.cellHeight)
);
return {
...component,
gridX,
gridY,
gridWidth,
gridHeight,
x: gridX * gridConfig.cellWidth,
y: gridY * gridConfig.cellHeight,
width: gridWidth * gridConfig.cellWidth,
height: gridHeight * gridConfig.cellHeight,
};
}),
})),
};
}
```
#### 6.2 마이그레이션 UI
- **파일**: `frontend/components/report/designer/MigrationModal.tsx` (신규)
- **내용**:
- 기존 리포트 로드 시 마이그레이션 필요 여부 체크
- 마이그레이션 전/후 미리보기
- 사용자 확인 후 적용
## 데이터베이스 스키마 변경
### report_layout_pages 테이블
```sql
ALTER TABLE report_layout_pages
ADD COLUMN grid_cell_width INTEGER DEFAULT 20,
ADD COLUMN grid_cell_height INTEGER DEFAULT 20,
ADD COLUMN grid_visible BOOLEAN DEFAULT true,
ADD COLUMN grid_snap_enabled BOOLEAN DEFAULT true,
ADD COLUMN grid_color VARCHAR(7) DEFAULT '#e5e7eb',
ADD COLUMN grid_opacity DECIMAL(3,2) DEFAULT 0.5;
```
### report_layout_components 테이블
```sql
ALTER TABLE report_layout_components
ADD COLUMN grid_x INTEGER,
ADD COLUMN grid_y INTEGER,
ADD COLUMN grid_width INTEGER,
ADD COLUMN grid_height INTEGER;
-- 기존 데이터 마이그레이션
UPDATE report_layout_components
SET
grid_x = ROUND(position_x / 20.0),
grid_y = ROUND(position_y / 20.0),
grid_width = GREATEST(1, ROUND(width / 20.0)),
grid_height = GREATEST(1, ROUND(height / 20.0))
WHERE grid_x IS NULL;
```
## 테스트 계획
### 단위 테스트
- `gridUtils.ts`의 모든 함수 테스트
- 그리드 좌표 ↔ 픽셀 좌표 변환 정확성
- 충돌 감지 로직
### 통합 테스트
- 드래그 앤 드롭 시 그리드 스냅 동작
- 리사이즈 시 그리드 스냅 동작
- 그리드 크기 변경 시 컴포넌트 재배치
### E2E 테스트
- 새 리포트 생성 및 그리드 설정
- 기존 리포트 마이그레이션
- Word 다운로드 시 레이아웃 정확성
## 예상 개발 일정
- **Phase 1**: 그리드 시스템 기반 구조 (2일)
- **Phase 2**: 그리드 시각화 (1일)
- **Phase 3**: 드래그 앤 드롭 스냅 (2일)
- **Phase 4**: 그리드 설정 UI (1일)
- **Phase 5**: Word 변환 개선 (2일)
- **Phase 6**: 데이터 마이그레이션 (1일)
- **테스트 및 디버깅**: (2일)
**총 예상 기간**: 11일
## 기술적 고려사항
### 성능 최적화
- 그리드 렌더링: SVG 대신 Canvas API 고려 (많은 셀의 경우)
- 메모이제이션: 그리드 계산 결과 캐싱
- 가상화: 큰 페이지에서 보이는 영역만 렌더링
### 사용자 경험
- 실시간 스냅 가이드: 드래그 중 스냅될 위치 미리 표시
- 키보드 단축키: 방향키로 그리드 단위 이동, Shift+방향키로 픽셀 단위 미세 조정
- 언두/리두: 그리드 스냅 적용 전/후 상태 저장
### 하위 호환성
- 기존 리포트는 자동 마이그레이션 제공
- 마이그레이션 옵션: 자동 / 수동 선택 가능
- 레거시 모드: 그리드 없이 자유 배치 가능 (옵션)
## 추가 기능 (향후 확장)
### 스마트 가이드
- 다른 컴포넌트와 정렬 시 가이드 라인 표시
- 균등 간격 가이드
### 그리드 템플릿
- 자주 사용하는 그리드 레이아웃 템플릿 제공
- 문서 종류별 프리셋 (계약서, 보고서, 송장 등)
### 그리드 병합
- 여러 그리드 셀을 하나로 병합
- 복잡한 레이아웃 지원
## 참고 자료
- Android Home Screen Widget System
- Microsoft Word Table Layout
- CSS Grid Layout
- Figma Auto Layout

1033
docs/dohyeons/리포트_관리_시스템_구현_완료_기능.md
View File

File diff suppressed because it is too large Load Diff

358
docs/dohyeons/리포트_관리_시스템_구현_진행상황.md
View File

@ -1,358 +0,0 @@
# 리포트 관리 시스템 구현 진행 상황
## 프로젝트 개요
동적 리포트 디자이너 시스템 구현
- 사용자가 드래그 앤 드롭으로 리포트 레이아웃 설계
- SQL 쿼리 연동으로 실시간 데이터 표시
- 미리보기 및 인쇄 기능
---
## 완료된 작업 ✅
### 1. 데이터베이스 설계 및 구축
- [x] `report_template` 테이블 생성 (18개 초기 템플릿)
- [x] `report_master` 테이블 생성 (리포트 메타 정보)
- [x] `report_layout` 테이블 생성 (레이아웃 JSON)
- [x] `report_query` 테이블 생성 (쿼리 정의)
**파일**: `db/report_schema.sql`, `db/report_query_schema.sql`
### 2. 백엔드 API 구현
- [x] 리포트 CRUD API (생성, 조회, 수정, 삭제)
- [x] 템플릿 조회 API
- [x] 레이아웃 저장/조회 API
- [x] 쿼리 실행 API (파라미터 지원)
- [x] 리포트 복사 API
- [x] Raw SQL 기반 구현 (Prisma 대신 pg 사용)
**파일**:
- `backend-node/src/types/report.ts`
- `backend-node/src/services/reportService.ts`
- `backend-node/src/controllers/reportController.ts`
- `backend-node/src/routes/reportRoutes.ts`
### 3. 프론트엔드 - 리포트 목록 페이지
- [x] 리포트 리스트 조회 및 표시
- [x] 검색 기능
- [x] 페이지네이션
- [x] 새 리포트 생성 (디자이너로 이동)
- [x] 수정/복사/삭제 액션 버튼
**파일**:
- `frontend/app/(main)/admin/report/page.tsx`
- `frontend/components/report/ReportListTable.tsx`
- `frontend/hooks/useReportList.ts`
### 4. 프론트엔드 - 리포트 디자이너 기본 구조
- [x] Context 기반 상태 관리 (`ReportDesignerContext`)
- [x] 툴바 (저장, 미리보기, 초기화, 뒤로가기)
- [x] 3단 레이아웃 (좌측 팔레트 / 중앙 캔버스 / 우측 속성)
- [x] "new" 리포트 처리 (저장 시 생성)
**파일**:
- `frontend/contexts/ReportDesignerContext.tsx`
- `frontend/app/(main)/admin/report/designer/[reportId]/page.tsx`
- `frontend/components/report/designer/ReportDesignerToolbar.tsx`
### 5. 컴포넌트 팔레트 및 캔버스
- [x] 드래그 가능한 컴포넌트 목록 (텍스트, 레이블, 테이블)
- [x] 드래그 앤 드롭으로 캔버스에 컴포넌트 배치
- [x] 컴포넌트 이동 (드래그)
- [x] 컴포넌트 크기 조절 (리사이즈 핸들)
- [x] 컴포넌트 선택 및 삭제
**파일**:
- `frontend/components/report/designer/ComponentPalette.tsx`
- `frontend/components/report/designer/ReportDesignerCanvas.tsx`
- `frontend/components/report/designer/CanvasComponent.tsx`
### 6. 쿼리 관리 시스템
- [x] 쿼리 추가/수정/삭제 (마스터/디테일)
- [x] SQL 파라미터 자동 감지 ($1, $2 등)
- [x] 파라미터 타입 선택 (text, number, date)
- [x] 파라미터 입력값 검증
- [x] 쿼리 실행 및 결과 표시
- [x] "new" 리포트에서도 쿼리 실행 가능
- [x] 실행 결과를 Context에 저장
**파일**:
- `frontend/components/report/designer/QueryManager.tsx`
- `frontend/contexts/ReportDesignerContext.tsx` (QueryResult 관리)
### 7. 데이터 바인딩 시스템
- [x] 속성 패널에서 컴포넌트-쿼리 연결
- [x] 텍스트/레이블: 쿼리 + 필드 선택
- [x] 테이블: 쿼리 선택 (모든 필드 자동 표시)
- [x] 캔버스에서 실제 데이터 표시 (바인딩된 필드의 값)
- [x] 실행 결과가 없으면 `{필드명}` 표시
**파일**:
- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
- `frontend/components/report/designer/CanvasComponent.tsx`
### 8. 미리보기 및 내보내기
- [x] 미리보기 모달
- [x] 실제 쿼리 데이터로 렌더링
- [x] 편집용 UI 제거 (순수 데이터만 표시)
- [x] 브라우저 인쇄 기능
- [x] PDF 다운로드 (브라우저 네이티브 인쇄 기능)
- [x] WORD 다운로드 (docx 라이브러리)
- [x] 파일명 자동 생성 (리포트명\_날짜)
**파일**:
- `frontend/components/report/designer/ReportPreviewModal.tsx`
**사용 라이브러리**:
- `docx`: WORD 문서 생성 (PDF는 브라우저 기본 기능 사용)
### 9. 템플릿 시스템
- [x] 시스템 템플릿 적용 (발주서, 청구서, 기본)
- [x] 템플릿별 기본 컴포넌트 자동 배치
- [x] 템플릿별 기본 쿼리 자동 생성
- [x] 사용자 정의 템플릿 저장 기능
- [x] 사용자 정의 템플릿 목록 조회
- [x] 사용자 정의 템플릿 삭제
- [x] 사용자 정의 템플릿 적용 (백엔드 연동)
**파일**:
- `frontend/contexts/ReportDesignerContext.tsx` (템플릿 적용 로직)
- `frontend/components/report/designer/TemplatePalette.tsx`
- `frontend/components/report/designer/SaveAsTemplateModal.tsx`
- `backend-node/src/services/reportService.ts` (createTemplateFromLayout)
### 10. 외부 DB 연동
- [x] 쿼리별 외부 DB 연결 선택
- [x] 외부 DB 연결 목록 조회 API
- [x] 쿼리 실행 시 외부 DB 지원
- [x] 내부/외부 DB 선택 UI
**파일**:
- `frontend/components/report/designer/QueryManager.tsx`
- `backend-node/src/services/reportService.ts` (executeQuery with external DB)
### 11. 컴포넌트 스타일링
- [x] 폰트 크기 설정
- [x] 폰트 색상 설정 (컬러피커)
- [x] 폰트 굵기 (보통/굵게)
- [x] 텍스트 정렬 (좌/중/우)
- [x] 배경색 설정 (투명 옵션 포함)
- [x] 테두리 설정 (두께, 색상)
- [x] 캔버스 및 미리보기에 스타일 반영
**파일**:
- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
- `frontend/components/report/designer/CanvasComponent.tsx`
### 12. 레이아웃 도구 (완료!)
- [x] **Grid Snap**: 10px 단위 그리드에 자동 정렬
- [x] **정렬 가이드라인**: 드래그 시 빨간색 가이드라인 표시
- [x] **복사/붙여넣기**: Ctrl+C/V로 컴포넌트 복사 (20px 오프셋)
- [x] **Undo/Redo**: 히스토리 관리 (Ctrl+Z / Ctrl+Shift+Z)
- [x] **컴포넌트 정렬**: 좌/우/상/하/가로중앙/세로중앙 정렬
- [x] **컴포넌트 배치**: 가로/세로 균등 배치 (3개 이상)
- [x] **크기 조정**: 같은 너비/높이/크기로 조정 (2개 이상)
- [x] **화살표 키 이동**: 1px 이동, Shift+화살표 10px 이동
- [x] **레이어 관리**: 맨 앞/뒤, 한 단계 앞/뒤 (Z-Index 조정)
- [x] **컴포넌트 잠금**: 편집/이동/삭제 방지, 🔒 표시
- [x] **눈금자 표시**: 가로/세로 mm 단위 눈금자
- [x] **컴포넌트 그룹화**: 여러 컴포넌트를 그룹으로 묶어 함께 이동, 👥 표시
**파일**:
- `frontend/contexts/ReportDesignerContext.tsx` (레이아웃 도구 로직)
- `frontend/components/report/designer/ReportDesignerToolbar.tsx` (버튼 UI)
- `frontend/components/report/designer/ReportDesignerCanvas.tsx` (Grid, 가이드라인)
- `frontend/components/report/designer/CanvasComponent.tsx` (잠금, 그룹)
- `frontend/components/report/designer/Ruler.tsx` (눈금자 컴포넌트)
---
## 진행 중인 작업 🚧
없음 (모든 레이아웃 도구 구현 완료!)
---
## 남은 작업 (우선순위순) 📋
### Phase 1: 추가 컴포넌트 ✅ 완료!
1. **이미지 컴포넌트** ✅
- [x] 파일 업로드 (multer, 10MB 제한)
- [x] 회사별 디렉토리 분리 저장
- [x] 맞춤 방식 (contain/cover/fill/none)
- [x] CORS 설정으로 이미지 로딩
- [x] 캔버스 및 미리보기 렌더링
- 로고, 서명, 도장 등에 활용
2. **구분선 컴포넌트 (Divider)** ✅
- [x] 가로/세로 방향 선택
- [x] 선 두께 (lineWidth) 독립 속성
- [x] 선 색상 (lineColor) 독립 속성
- [x] 선 스타일 (solid/dashed/dotted/double)
- [x] 캔버스 및 미리보기 렌더링
**파일**:
- `backend-node/src/controllers/reportController.ts` (uploadImage)
- `backend-node/src/routes/reportRoutes.ts` (multer 설정)
- `frontend/types/report.ts` (이미지/구분선 속성)
- `frontend/components/report/designer/ComponentPalette.tsx`
- `frontend/components/report/designer/CanvasComponent.tsx`
- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
- `frontend/components/report/designer/ReportPreviewModal.tsx`
- `frontend/lib/api/client.ts` (getFullImageUrl)
3. **차트 컴포넌트** (선택사항) ⬅️ 다음 권장 작업
- 막대 차트
- 선 차트
- 원형 차트
- 쿼리 데이터 연동
### Phase 2: 고급 기능
4. **조건부 서식**
- 특정 조건에 따른 스타일 변경
- 값 범위에 따른 색상 표시
- 수식 기반 표시/숨김
5. **쿼리 관리 개선**
- 쿼리 미리보기 개선 (테이블 형태)
- 쿼리 저장/불러오기
- 쿼리 템플릿
### Phase 3: 성능 및 보안
6. **성능 최적화**
- 쿼리 결과 캐싱
- 대용량 데이터 페이징
- 렌더링 최적화
- 이미지 레이지 로딩
7. **권한 관리**
- 리포트별 접근 권한
- 수정 권한 분리
- 템플릿 공유
- 사용자별 리포트 목록 필터링
---
## 기술 스택
### 백엔드
- Node.js + TypeScript
- Express.js
- PostgreSQL (raw SQL)
- pg (node-postgres)
### 프론트엔드
- Next.js 14 (App Router)
- React 18
- TypeScript
- Tailwind CSS
- Shadcn UI
- react-dnd (드래그 앤 드롭)
---
## 주요 아키텍처 결정
### 1. Context API 사용
- 리포트 디자이너의 복잡한 상태를 Context로 중앙 관리
- 컴포넌트 간 prop drilling 방지
### 2. Raw SQL 사용
- Prisma 대신 직접 SQL 작성
- 복잡한 쿼리와 트랜잭션 처리에 유리
- 데이터베이스 제어 수준 향상
### 3. JSON 기반 레이아웃 저장
- 레이아웃을 JSONB로 DB에 저장
- 버전 관리 용이
- 유연한 스키마
### 4. 쿼리 실행 결과 메모리 관리
- Context에 쿼리 결과 저장
- 컴포넌트에서 실시간 참조
- 불필요한 API 호출 방지
---
## 참고 문서
- [리포트*관리*시스템\_설계.md](./리포트_관리_시스템_설계.md) - 초기 설계 문서
- [레포트드자이너.html](../레포트드자이너.html) - 참조 프로토타입
---
## 다음 작업: 리포트 복사/삭제 테스트 및 검증
### 테스트 항목
1. **복사 기능 테스트**
- 리포트 복사 버튼 클릭
- 복사된 리포트명 확인 (원본명 + "\_copy")
- 복사된 리포트의 레이아웃 확인
- 복사된 리포트의 쿼리 확인
- 목록 자동 새로고침 확인
2. **삭제 기능 테스트**
- 삭제 버튼 클릭 시 확인 다이얼로그 표시
- 취소 버튼 동작 확인
- 삭제 실행 후 목록에서 제거 확인
- Toast 메시지 표시 확인
3. **에러 처리 테스트**
- 존재하지 않는 리포트 삭제 시도
- 네트워크 오류 시 Toast 메시지
- 로딩 중 버튼 비활성화 확인
### 추가 개선 사항
- [ ] 컴포넌트 복사 기능 (Ctrl+C/Ctrl+V)
- [ ] 다중 선택 및 정렬 기능
- [ ] 실행 취소/다시 실행 (Undo/Redo)
- [ ] 사용자 정의 템플릿 저장
---
**최종 업데이트**: 2025-10-01
**작성자**: AI Assistant
**상태**: 이미지 & 구분선 컴포넌트 완료 (기본 컴포넌트 완료, 약 99% 완료)

679
docs/dohyeons/리포트_관리_시스템_설계.md
View File

@ -1,679 +0,0 @@
# 리포트 관리 시스템 설계
## 1. 프로젝트 개요
### 1.1 목적
ERP 시스템에서 다양한 업무 문서(발주서, 청구서, 거래명세서 등)를 동적으로 디자인하고 관리할 수 있는 리포트 관리 시스템을 구축합니다.
### 1.2 주요 기능
- 리포트 목록 조회 및 관리
- 드래그 앤 드롭 기반 리포트 디자이너
- 템플릿 관리 (기본 템플릿 + 사용자 정의 템플릿)
- 쿼리 관리 (마스터/디테일)
- 외부 DB 연동
- 인쇄 및 내보내기 (PDF, WORD)
- 미리보기 기능
## 2. 화면 구성
### 2.1 리포트 목록 화면 (`/admin/report`)
```
┌──────────────────────────────────────────────────────────────────┐
│ 리포트 관리 [+ 새 리포트] │
├──────────────────────────────────────────────────────────────────┤
│ 검색: [____________________] [검색] [초기화] │
├──────────────────────────────────────────────────────────────────┤
│ No │ 리포트명 │ 작성자 │ 수정일 │ 액션 │
├────┼──────────────┼────────┼───────────┼────────────────────────┤
│ 1 │ 발주서 양식 │ 홍길동 │ 2025-10-01 │ 수정 │ 복사 │ 삭제 │
│ 2 │ 청구서 기본 │ 김철수 │ 2025-09-28 │ 수정 │ 복사 │ 삭제 │
│ 3 │ 거래명세서 │ 이영희 │ 2025-09-25 │ 수정 │ 복사 │ 삭제 │
└──────────────────────────────────────────────────────────────────┘
```
**기능**
- 리포트 목록 조회 (페이징, 정렬, 검색)
- 새 리포트 생성
- 기존 리포트 수정
- 리포트 복사
- 리포트 삭제
- 리포트 미리보기
### 2.2 리포트 디자이너 화면
```
┌──────────────────────────────────────────────────────────────────┐
│ 리포트 디자이너 [저장] [미리보기] [초기화] [목록으로] │
├──────┬────────────────────────────────────────────────┬──────────┤
│ │ │ │
│ 템플릿│ 작업 영역 (캔버스) │ 속성 패널 │
│ │ │ │
│ 컴포넌트│ [드래그 앤 드롭] │ 쿼리 관리 │
│ │ │ │
│ │ │ DB 연동 │
└──────┴────────────────────────────────────────────────┴──────────┘
```
### 2.3 미리보기 모달
```
┌──────────────────────────────────────────────────────────────────┐
│ 미리보기 [닫기] │
├──────────────────────────────────────────────────────────────────┤
│ │
│ [리포트 내용 미리보기] │
│ │
├──────────────────────────────────────────────────────────────────┤
│ [인쇄] [PDF] [WORD] │
└──────────────────────────────────────────────────────────────────┘
```
## 3. 데이터베이스 설계
### 3.1 테이블 구조
#### REPORT_TEMPLATE (리포트 템플릿)
```sql
CREATE TABLE report_template (
template_id VARCHAR(50) PRIMARY KEY, -- 템플릿 ID
template_name_kor VARCHAR(100) NOT NULL, -- 템플릿명 (한국어)
template_name_eng VARCHAR(100), -- 템플릿명 (영어)
template_type VARCHAR(30) NOT NULL, -- 템플릿 타입 (ORDER, INVOICE, STATEMENT, etc)
is_system CHAR(1) DEFAULT 'N', -- 시스템 기본 템플릿 여부 (Y/N)
thumbnail_url VARCHAR(500), -- 썸네일 이미지 경로
description TEXT, -- 템플릿 설명
layout_config TEXT, -- 레이아웃 설정 (JSON)
default_queries TEXT, -- 기본 쿼리 (JSON)
use_yn CHAR(1) DEFAULT 'Y', -- 사용 여부
sort_order INTEGER DEFAULT 0, -- 정렬 순서
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
created_by VARCHAR(50),
updated_at TIMESTAMP,
updated_by VARCHAR(50)
);
```
#### REPORT_MASTER (리포트 마스터)
```sql
CREATE TABLE report_master (
report_id VARCHAR(50) PRIMARY KEY, -- 리포트 ID
report_name_kor VARCHAR(100) NOT NULL, -- 리포트명 (한국어)
report_name_eng VARCHAR(100), -- 리포트명 (영어)
template_id VARCHAR(50), -- 템플릿 ID (FK)
report_type VARCHAR(30) NOT NULL, -- 리포트 타입
company_code VARCHAR(20), -- 회사 코드
description TEXT, -- 설명
use_yn CHAR(1) DEFAULT 'Y', -- 사용 여부
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
created_by VARCHAR(50),
updated_at TIMESTAMP,
updated_by VARCHAR(50),
FOREIGN KEY (template_id) REFERENCES report_template(template_id)
);
```
#### REPORT_LAYOUT (리포트 레이아웃)
```sql
CREATE TABLE report_layout (
layout_id VARCHAR(50) PRIMARY KEY, -- 레이아웃 ID
report_id VARCHAR(50) NOT NULL, -- 리포트 ID (FK)
canvas_width INTEGER DEFAULT 210, -- 캔버스 너비 (mm)
canvas_height INTEGER DEFAULT 297, -- 캔버스 높이 (mm)
page_orientation VARCHAR(10) DEFAULT 'portrait', -- 페이지 방향 (portrait/landscape)
margin_top INTEGER DEFAULT 20, -- 상단 여백 (mm)
margin_bottom INTEGER DEFAULT 20, -- 하단 여백 (mm)
margin_left INTEGER DEFAULT 20, -- 좌측 여백 (mm)
margin_right INTEGER DEFAULT 20, -- 우측 여백 (mm)
components TEXT, -- 컴포넌트 배치 정보 (JSON)
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
created_by VARCHAR(50),
updated_at TIMESTAMP,
updated_by VARCHAR(50),
FOREIGN KEY (report_id) REFERENCES report_master(report_id)
);
```
## 4. 컴포넌트 목록
### 4.1 기본 컴포넌트
#### 텍스트 관련
- **Text Field**: 단일 라인 텍스트 입력/표시
- **Text Area**: 여러 줄 텍스트 입력/표시
- **Label**: 고정 라벨 텍스트
- **Rich Text**: 서식이 있는 텍스트 (굵게, 기울임, 색상)
#### 숫자/날짜 관련
- **Number**: 숫자 표시 (통화 형식 지원)
- **Date**: 날짜 표시 (형식 지정 가능)
- **Date Time**: 날짜 + 시간 표시
- **Calculate Field**: 계산 필드 (합계, 평균 등)
#### 테이블/그리드
- **Data Table**: 데이터 테이블 (디테일 쿼리 바인딩)
- **Summary Table**: 요약 테이블
- **Group Table**: 그룹핑 테이블
#### 이미지/그래픽
- **Image**: 이미지 표시 (로고, 서명 등)
- **Line**: 구분선
- **Rectangle**: 사각형 (테두리)
#### 특수 컴포넌트
- **Page Number**: 페이지 번호
- **Current Date**: 현재 날짜/시간
- **Company Info**: 회사 정보 (자동)
- **Signature**: 서명란
- **Stamp**: 도장란
### 4.2 컴포넌트 속성
각 컴포넌트는 다음 공통 속성을 가집니다:
```typescript
interface ComponentBase {
id: string; // 컴포넌트 ID
type: string; // 컴포넌트 타입
x: number; // X 좌표
y: number; // Y 좌표
width: number; // 너비
height: number; // 높이
zIndex: number; // Z-인덱스
// 스타일
fontSize?: number; // 글자 크기
fontFamily?: string; // 폰트
fontWeight?: string; // 글자 굵기
fontColor?: string; // 글자 색상
backgroundColor?: string; // 배경색
borderWidth?: number; // 테두리 두께
borderColor?: string; // 테두리 색상
borderRadius?: number; // 모서리 둥글기
textAlign?: string; // 텍스트 정렬
padding?: number; // 내부 여백
// 데이터 바인딩
queryId?: string; // 연결된 쿼리 ID
fieldName?: string; // 필드명
defaultValue?: string; // 기본값
format?: string; // 표시 형식
// 기타
visible?: boolean; // 표시 여부
printable?: boolean; // 인쇄 여부
conditional?: string; // 조건부 표시 (수식)
}
```
## 5. 템플릿 목록
### 5.1 기본 템플릿 (시스템)
#### 구매/발주 관련
- **발주서 (Purchase Order)**: 거래처에 발주하는 문서
- **구매요청서 (Purchase Request)**: 내부 구매 요청 문서
- **발주 확인서 (PO Confirmation)**: 발주 확인 문서
#### 판매/청구 관련
- **청구서 (Invoice)**: 고객에게 청구하는 문서
- **견적서 (Quotation)**: 견적 제공 문서
- **거래명세서 (Transaction Statement)**: 거래 내역 명세
- **세금계산서 (Tax Invoice)**: 세금 계산서
- **영수증 (Receipt)**: 영수 증빙 문서
#### 재고/입출고 관련
- **입고증 (Goods Receipt)**: 입고 증빙 문서
- **출고증 (Delivery Note)**: 출고 증빙 문서
- **재고 현황표 (Inventory Report)**: 재고 현황
- **이동 전표 (Transfer Note)**: 재고 이동 문서
#### 생산 관련
- **작업지시서 (Work Order)**: 생산 작업 지시
- **생산 일보 (Production Daily Report)**: 생산 일일 보고
- **품질 검사표 (Quality Inspection)**: 품질 검사 기록
- **불량 보고서 (Defect Report)**: 불량 보고
#### 회계/경영 관련
- **손익 계산서 (Income Statement)**: 손익 현황
- **대차대조표 (Balance Sheet)**: 재무 상태
- **현금 흐름표 (Cash Flow Statement)**: 현금 흐름
- **급여 명세서 (Payroll Slip)**: 급여 내역
#### 일반 문서
- **기본 양식 (Basic Template)**: 빈 캔버스
- **일반 보고서 (General Report)**: 일반 보고 양식
- **목록 양식 (List Template)**: 목록형 양식
### 5.2 사용자 정의 템플릿
- 사용자가 직접 생성한 템플릿
- 기본 템플릿을 복사하여 수정 가능
- 회사별로 관리 가능
## 6. API 설계
### 6.1 리포트 목록 API
#### GET `/api/admin/reports`
리포트 목록 조회
```typescript
// Request
interface GetReportsRequest {
page?: number;
limit?: number;
searchText?: string;
reportType?: string;
useYn?: string;
sortBy?: string;
sortOrder?: "ASC" | "DESC";
}
// Response
interface GetReportsResponse {
items: ReportMaster[];
total: number;
page: number;
limit: number;
}
```
#### GET `/api/admin/reports/:reportId`
리포트 상세 조회
```typescript
// Response
interface ReportDetail {
report: ReportMaster;
layout: ReportLayout;
queries: ReportQuery[];
components: Component[];
}
```
#### POST `/api/admin/reports`
리포트 생성
```typescript
// Request
interface CreateReportRequest {
reportNameKor: string;
reportNameEng?: string;
templateId?: string;
reportType: string;
description?: string;
}
// Response
interface CreateReportResponse {
reportId: string;
message: string;
}
```
#### PUT `/api/admin/reports/:reportId`
리포트 수정
```typescript
// Request
interface UpdateReportRequest {
reportNameKor?: string;
reportNameEng?: string;
reportType?: string;
description?: string;
useYn?: string;
}
```
#### DELETE `/api/admin/reports/:reportId`
리포트 삭제
#### POST `/api/admin/reports/:reportId/copy`
리포트 복사
### 6.2 템플릿 API
#### GET `/api/admin/reports/templates`
템플릿 목록 조회
```typescript
// Response
interface GetTemplatesResponse {
system: ReportTemplate[]; // 시스템 템플릿
custom: ReportTemplate[]; // 사용자 정의 템플릿
}
```
#### POST `/api/admin/reports/templates`
템플릿 생성 (사용자 정의)
```typescript
// Request
interface CreateTemplateRequest {
templateNameKor: string;
templateNameEng?: string;
templateType: string;
description?: string;
layoutConfig: any;
defaultQueries?: any;
}
```
#### PUT `/api/admin/reports/templates/:templateId`
템플릿 수정
#### DELETE `/api/admin/reports/templates/:templateId`
템플릿 삭제
### 6.3 레이아웃 API
#### GET `/api/admin/reports/:reportId/layout`
레이아웃 조회
#### PUT `/api/admin/reports/:reportId/layout`
레이아웃 저장
```typescript
// Request
interface SaveLayoutRequest {
canvasWidth: number;
canvasHeight: number;
pageOrientation: string;
margins: {
top: number;
bottom: number;
left: number;
right: number;
};
components: Component[];
}
```
### 6.4 인쇄/내보내기 API
#### POST `/api/admin/reports/:reportId/preview`
미리보기 생성
```typescript
// Request
interface PreviewRequest {
parameters?: { [key: string]: any };
format?: "HTML" | "PDF";
}
// Response
interface PreviewResponse {
html?: string; // HTML 미리보기
pdfUrl?: string; // PDF URL
}
```
#### POST `/api/admin/reports/:reportId/print`
인쇄 (PDF 생성)
```typescript
// Request
interface PrintRequest {
parameters?: { [key: string]: any };
format: "PDF" | "WORD" | "EXCEL";
}
// Response
interface PrintResponse {
fileUrl: string;
fileName: string;
fileSize: number;
}
```
## 7. 프론트엔드 구조
### 7.1 페이지 구조
```
/admin/report
├── ReportListPage.tsx # 리포트 목록 페이지
├── ReportDesignerPage.tsx # 리포트 디자이너 페이지
└── components/
├── ReportList.tsx # 리포트 목록 테이블
├── ReportSearchForm.tsx # 검색 폼
├── TemplateSelector.tsx # 템플릿 선택기
├── ComponentPalette.tsx # 컴포넌트 팔레트
├── Canvas.tsx # 캔버스 영역
├── ComponentRenderer.tsx # 컴포넌트 렌더러
├── PropertyPanel.tsx # 속성 패널
├── QueryManager.tsx # 쿼리 관리
├── QueryCard.tsx # 쿼리 카드
├── ConnectionManager.tsx # 외부 DB 연결 관리
├── PreviewModal.tsx # 미리보기 모달
└── PrintOptionsModal.tsx # 인쇄 옵션 모달
```
### 7.2 상태 관리
```typescript
interface ReportDesignerState {
// 리포트 기본 정보
report: ReportMaster | null;
// 레이아웃
layout: ReportLayout | null;
components: Component[];
selectedComponentId: string | null;
// 쿼리
queries: ReportQuery[];
queryResults: { [queryId: string]: any[] };
// 외부 연결
connections: ReportExternalConnection[];
// UI 상태
isDragging: boolean;
isResizing: boolean;
showPreview: boolean;
showPrintOptions: boolean;
// 히스토리 (Undo/Redo)
history: {
past: Component[][];
present: Component[];
future: Component[][];
};
}
```
## 8. 구현 우선순위
### Phase 1: 기본 기능 (2주)
- [ ] 데이터베이스 테이블 생성
- [ ] 리포트 목록 화면
- [ ] 리포트 CRUD API
- [ ] 템플릿 목록 조회
- [ ] 기본 템플릿 데이터 생성
### Phase 2: 디자이너 기본 (2주)
- [ ] 캔버스 구현
- [ ] 컴포넌트 드래그 앤 드롭
- [ ] 컴포넌트 선택/이동/크기 조절
- [ ] 속성 패널 (기본)
- [ ] 저장/불러오기
### Phase 3: 쿼리 관리 (1주)
- [ ] 쿼리 추가/수정/삭제
- [ ] 파라미터 감지 및 입력
- [ ] 쿼리 실행 (내부 DB)
- [ ] 쿼리 결과를 컴포넌트에 바인딩
### Phase 4: 쿼리 관리 고급 (1주)
- [ ] 쿼리 필드 매핑
- [ ] 컴포넌트와 데이터 바인딩
- [ ] 파라미터 전달 및 처리
### Phase 5: 미리보기/인쇄 (1주)
- [ ] HTML 미리보기
- [ ] PDF 생성
- [ ] WORD 생성
- [ ] 브라우저 인쇄
### Phase 6: 고급 기능 (2주)
- [ ] 템플릿 생성 기능
- [ ] 컴포넌트 추가 (이미지, 서명, 도장)
- [ ] 계산 필드
- [ ] 조건부 표시
- [ ] Undo/Redo
- [ ] 다국어 지원
## 9. 기술 스택
### Backend
- **Node.js + TypeScript**: 백엔드 서버
- **PostgreSQL**: 데이터베이스
- **Prisma**: ORM
- **Puppeteer**: PDF 생성
- **docx**: WORD 생성
### Frontend
- **Next.js + React**: 프론트엔드 프레임워크
- **TypeScript**: 타입 안정성
- **TailwindCSS**: 스타일링
- **react-dnd**: 드래그 앤 드롭
- **react-grid-layout**: 레이아웃 관리
- **react-to-print**: 인쇄 기능
- **react-pdf**: PDF 미리보기
## 10. 보안 고려사항
### 10.1 쿼리 실행 보안
- SELECT 쿼리만 허용 (INSERT, UPDATE, DELETE 금지)
- 쿼리 결과 크기 제한 (최대 1000 rows)
- 실행 시간 제한 (30초)
- SQL 인젝션 방지 (파라미터 바인딩 강제)
- 위험한 함수 차단 (DROP, TRUNCATE 등)
### 10.2 파일 보안
- 생성된 PDF/WORD 파일은 임시 디렉토리에 저장
- 파일은 24시간 후 자동 삭제
- 파일 다운로드 시 토큰 검증
### 10.3 접근 권한
- 리포트 생성/수정/삭제 권한 체크
- 관리자만 템플릿 생성 가능
- 사용자별 리포트 접근 제어
## 11. 성능 최적화
### 11.1 PDF 생성 최적화
- 백그라운드 작업으로 처리
- 생성된 PDF는 CDN에 캐싱
### 11.2 프론트엔드 최적화
- 컴포넌트 가상화 (많은 컴포넌트 처리)
- 디바운싱/쓰로틀링 (드래그 앤 드롭)
- 이미지 레이지 로딩
### 11.3 데이터베이스 최적화
- 레이아웃 데이터는 JSON 형태로 저장
- 리포트 목록 조회 시 인덱스 활용
- 자주 사용하는 템플릿 캐싱
## 12. 테스트 계획
### 12.1 단위 테스트
- API 엔드포인트 테스트
- 쿼리 파싱 테스트
- PDF 생성 테스트
### 12.2 통합 테스트
- 리포트 생성 → 쿼리 실행 → PDF 생성 전체 플로우
- 템플릿 적용 → 데이터 바인딩 테스트
### 12.3 UI 테스트
- 드래그 앤 드롭 동작 테스트
- 컴포넌트 속성 변경 테스트
## 13. 향후 확장 계획
### 13.1 고급 기능
- 차트/그래프 컴포넌트
- 조건부 서식 (색상 변경 등)
- 그룹핑 및 집계 함수
- 마스터-디테일 관계 자동 설정
### 13.2 협업 기능
- 리포트 공유
- 버전 관리
- 댓글 기능
### 13.3 자동화
- 스케줄링 (정기적 리포트 생성)
- 이메일 자동 발송
- 알림 설정
## 14. 참고 자료
### 14.1 유사 솔루션
- Crystal Reports
- JasperReports
- BIRT (Business Intelligence and Reporting Tools)
- FastReport
### 14.2 라이브러리
- [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout)
- [react-dnd](https://react-dnd.github.io/react-dnd/)
- [puppeteer](https://pptr.dev/)
- [docx](https://docx.js.org/)

371
docs/dohyeons/리포트_문서번호_채번_시스템_설계.md
View File

@ -1,371 +0,0 @@
# 리포트 문서 번호 자동 채번 시스템 설계
## 1. 개요
리포트 관리 시스템에 체계적인 문서 번호 자동 채번 시스템을 추가하여, 기업 환경에서 문서를 추적하고 관리할 수 있도록 합니다.
## 2. 문서 번호 형식
### 2.1 기본 형식
```
{PREFIX}-{YEAR}-{SEQUENCE}
예: RPT-2024-0001, INV-2024-0123
```
### 2.2 확장 형식 (선택 사항)
```
{PREFIX}-{DEPT_CODE}-{YEAR}-{SEQUENCE}
예: RPT-SALES-2024-0001, INV-FIN-2024-0123
```
### 2.3 구성 요소
- **PREFIX**: 문서 유형 접두사 (예: RPT, INV, PO, QT)
- **DEPT_CODE**: 부서 코드 (선택 사항)
- **YEAR**: 연도 (4자리)
- **SEQUENCE**: 순차 번호 (0001부터 시작, 자릿수 설정 가능)
## 3. 데이터베이스 스키마
### 3.1 문서 번호 규칙 테이블
```sql
-- 문서 번호 규칙 정의
CREATE TABLE report_number_rules (
rule_id SERIAL PRIMARY KEY,
rule_name VARCHAR(100) NOT NULL, -- 규칙 이름
prefix VARCHAR(20) NOT NULL, -- 접두사 (RPT, INV 등)
use_dept_code BOOLEAN DEFAULT FALSE, -- 부서 코드 사용 여부
use_year BOOLEAN DEFAULT TRUE, -- 연도 사용 여부
sequence_length INTEGER DEFAULT 4, -- 순차 번호 자릿수
reset_period VARCHAR(20) DEFAULT 'YEARLY', -- 초기화 주기 (YEARLY, MONTHLY, NEVER)
separator VARCHAR(5) DEFAULT '-', -- 구분자
description TEXT, -- 설명
is_active BOOLEAN DEFAULT TRUE, -- 활성화 여부
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
created_by VARCHAR(50),
updated_by VARCHAR(50)
);
-- 기본 데이터 삽입
INSERT INTO report_number_rules (rule_name, prefix, description)
VALUES ('리포트 문서 번호', 'RPT', '일반 리포트 문서 번호 규칙');
```
### 3.2 문서 번호 시퀀스 테이블
```sql
-- 문서 번호 시퀀스 관리 (연도/부서별 현재 번호)
CREATE TABLE report_number_sequences (
sequence_id SERIAL PRIMARY KEY,
rule_id INTEGER NOT NULL REFERENCES report_number_rules(rule_id),
dept_code VARCHAR(20), -- 부서 코드 (NULL 가능)
year INTEGER NOT NULL, -- 연도
current_number INTEGER DEFAULT 0, -- 현재 번호
last_generated_at TIMESTAMP, -- 마지막 생성 시각
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE (rule_id, dept_code, year) -- 규칙+부서+연도 조합 유니크
);
```
### 3.3 리포트 테이블 수정
```sql
-- 기존 report_layout 테이블에 컬럼 추가
ALTER TABLE report_layout
ADD COLUMN document_number VARCHAR(100), -- 생성된 문서 번호
ADD COLUMN number_rule_id INTEGER REFERENCES report_number_rules(rule_id), -- 사용된 규칙
ADD COLUMN number_generated_at TIMESTAMP; -- 번호 생성 시각
-- 문서 번호 인덱스 (검색 성능)
CREATE INDEX idx_report_layout_document_number ON report_layout(document_number);
```
### 3.4 문서 번호 이력 테이블 (감사용)
```sql
-- 문서 번호 생성 이력
CREATE TABLE report_number_history (
history_id SERIAL PRIMARY KEY,
report_id INTEGER REFERENCES report_layout(id),
document_number VARCHAR(100) NOT NULL,
rule_id INTEGER REFERENCES report_number_rules(rule_id),
generated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
generated_by VARCHAR(50),
is_voided BOOLEAN DEFAULT FALSE, -- 번호 무효화 여부
void_reason TEXT, -- 무효화 사유
voided_at TIMESTAMP,
voided_by VARCHAR(50)
);
-- 문서 번호로 검색 인덱스
CREATE INDEX idx_report_number_history_doc_number ON report_number_history(document_number);
```
## 4. 백엔드 구현
### 4.1 서비스 레이어 (`reportNumberService.ts`)
```typescript
export class ReportNumberService {
// 문서 번호 생성
static async generateNumber(
ruleId: number,
deptCode?: string
): Promise<string>;
// 문서 번호 형식 검증
static async validateNumber(documentNumber: string): Promise<boolean>;
// 문서 번호 중복 체크
static async isDuplicate(documentNumber: string): Promise<boolean>;
// 문서 번호 무효화
static async voidNumber(
documentNumber: string,
reason: string,
userId: string
): Promise<void>;
// 특정 규칙의 다음 번호 미리보기
static async previewNextNumber(
ruleId: number,
deptCode?: string
): Promise<string>;
}
```
### 4.2 컨트롤러 (`reportNumberController.ts`)
```typescript
// GET /api/report/number-rules - 규칙 목록
// GET /api/report/number-rules/:id - 규칙 상세
// POST /api/report/number-rules - 규칙 생성
// PUT /api/report/number-rules/:id - 규칙 수정
// DELETE /api/report/number-rules/:id - 규칙 삭제
// POST /api/report/:reportId/generate-number - 문서 번호 생성
// POST /api/report/number/preview - 다음 번호 미리보기
// POST /api/report/number/void - 문서 번호 무효화
// GET /api/report/number/history/:documentNumber - 문서 번호 이력
```
### 4.3 핵심 로직 (번호 생성)
```typescript
async generateNumber(ruleId: number, deptCode?: string): Promise<string> {
// 1. 트랜잭션 시작
const client = await pool.connect();
try {
await client.query('BEGIN');
// 2. 규칙 조회
const rule = await this.getRule(ruleId);
// 3. 현재 연도/월
const now = new Date();
const year = now.getFullYear();
// 4. 시퀀스 조회 또는 생성 (FOR UPDATE로 락)
let sequence = await this.getSequence(ruleId, deptCode, year, true);
if (!sequence) {
sequence = await this.createSequence(ruleId, deptCode, year);
}
// 5. 다음 번호 계산
const nextNumber = sequence.current_number + 1;
// 6. 문서 번호 생성
const documentNumber = this.formatNumber(rule, deptCode, year, nextNumber);
// 7. 시퀀스 업데이트
await this.updateSequence(sequence.sequence_id, nextNumber);
// 8. 커밋
await client.query('COMMIT');
return documentNumber;
} catch (error) {
await client.query('ROLLBACK');
throw error;
} finally {
client.release();
}
}
// 번호 포맷팅
private formatNumber(
rule: NumberRule,
deptCode: string | undefined,
year: number,
sequence: number
): string {
const parts = [rule.prefix];
if (rule.use_dept_code && deptCode) {
parts.push(deptCode);
}
if (rule.use_year) {
parts.push(year.toString());
}
// 0 패딩
const paddedSequence = sequence.toString().padStart(rule.sequence_length, '0');
parts.push(paddedSequence);
return parts.join(rule.separator);
}
```
## 5. 프론트엔드 구현
### 5.1 문서 번호 규칙 관리 화면
**경로**: `/admin/report/number-rules`
**기능**:
- 규칙 목록 조회
- 규칙 생성/수정/삭제
- 규칙 미리보기 (다음 번호 확인)
- 규칙 활성화/비활성화
### 5.2 리포트 목록 화면 수정
**변경 사항**:
- 문서 번호 컬럼 추가
- 문서 번호로 검색 기능
### 5.3 리포트 저장 시 번호 생성
**위치**: `ReportDesignerContext.tsx` - `saveLayout` 함수
```typescript
const saveLayout = async () => {
// 1. 새 리포트인 경우 문서 번호 자동 생성
if (reportId === "new" && !documentNumber) {
const response = await fetch(`/api/report/generate-number`, {
method: "POST",
body: JSON.stringify({ ruleId: 1 }), // 기본 규칙
});
const { documentNumber: newNumber } = await response.json();
setDocumentNumber(newNumber);
}
// 2. 리포트 저장 (문서 번호 포함)
await saveReport({ ...reportData, documentNumber });
};
```
### 5.4 문서 번호 표시 UI
**위치**: 디자이너 헤더
```tsx
<div className="document-number">
<Label>문서 번호</Label>
<Badge variant="outline">{documentNumber || "저장 시 자동 생성"}</Badge>
</div>
```
## 6. 동시성 제어
### 6.1 문제점
여러 사용자가 동시에 문서 번호를 생성할 때 중복 발생 가능성
### 6.2 해결 방법
**PostgreSQL의 `FOR UPDATE` 사용**
```sql
-- 시퀀스 조회 시 행 락 걸기
SELECT * FROM report_number_sequences
WHERE rule_id = $1 AND year = $2
FOR UPDATE;
```
**트랜잭션 격리 수준**
```typescript
await client.query("SET TRANSACTION ISOLATION LEVEL SERIALIZABLE");
```
## 7. 테스트 시나리오
### 7.1 기본 기능 테스트
- [ ] 규칙 생성 → 문서 번호 생성 → 포맷 확인
- [ ] 연속 생성 시 순차 번호 증가 확인
- [ ] 연도 변경 시 시퀀스 초기화 확인
### 7.2 동시성 테스트
- [ ] 10명이 동시에 문서 번호 생성 → 중복 없음 확인
- [ ] 동일 규칙으로 100개 생성 → 순차 번호 연속성 확인
### 7.3 에러 처리
- [ ] 존재하지 않는 규칙 ID → 에러 메시지
- [ ] 비활성화된 규칙 사용 → 경고 메시지
- [ ] 시퀀스 최대값 초과 → 관리자 알림
## 8. 구현 순서
### Phase 1: 데이터베이스 (1단계)
1. 테이블 생성 SQL 작성
2. 마이그레이션 실행
3. 기본 데이터 삽입
### Phase 2: 백엔드 (2단계)
1. `reportNumberService.ts` 구현
2. `reportNumberController.ts` 구현
3. 라우트 추가
4. 단위 테스트
### Phase 3: 프론트엔드 (3단계)
1. 문서 번호 규칙 관리 화면
2. 리포트 목록 화면 수정
3. 디자이너 문서 번호 표시
4. 저장 시 자동 생성 연동
### Phase 4: 테스트 및 최적화 (4단계)
1. 통합 테스트
2. 동시성 테스트
3. 성능 최적화
4. 사용자 가이드 작성
## 9. 향후 확장
### 9.1 고급 기능
- 문서 번호 예약 기능
- 번호 건너뛰기 허용 설정
- 커스텀 포맷 지원 (정규식 기반)
- 연/월/일 단위 초기화 선택
### 9.2 통합
- 승인 완료 시점에 최종 번호 확정
- 외부 시스템과 번호 동기화
- 바코드/QR 코드 자동 생성
## 10. 보안 고려사항
- 문서 번호 생성 권한 제한
- 번호 무효화 감사 로그
- 시퀀스 직접 수정 방지
- API 호출 횟수 제한 (Rate Limiting)

388
docs/dohyeons/리포트_페이지_관리_시스템_설계.md
View File

@ -1,388 +0,0 @@
# 리포트 페이지 관리 시스템 설계
## 1. 개요
리포트 디자이너에 다중 페이지 관리 기능을 추가하여 여러 페이지에 걸친 복잡한 문서를 작성할 수 있도록 합니다.
## 2. 주요 기능
### 2.1 페이지 관리
- 페이지 추가/삭제
- 페이지 복사
- 페이지 순서 변경 (드래그 앤 드롭)
- 페이지 이름 지정
### 2.2 페이지 네비게이션
- 좌측 페이지 썸네일 패널
- 페이지 간 전환 (클릭)
- 이전/다음 페이지 이동
- 페이지 번호 표시
### 2.3 페이지별 설정
- 페이지 크기 (A4, A3, Letter, 사용자 정의)
- 페이지 방향 (세로/가로)
- 여백 설정
- 배경색
### 2.4 컴포넌트 관리
- 컴포넌트는 특정 페이지에 속함
- 페이지 간 컴포넌트 복사/이동
- 현재 페이지의 컴포넌트만 표시
## 3. 데이터베이스 스키마
### 3.1 기존 구조 활용 (변경 없음)
**report_layout 테이블의 layout_config (JSONB) 활용**
기존:
```json
{
"width": 210,
"height": 297,
"orientation": "portrait",
"components": [...]
}
```
변경 후:
```json
{
"pages": [
{
"page_id": "page-uuid-1",
"page_name": "표지",
"page_order": 0,
"width": 210,
"height": 297,
"orientation": "portrait",
"margins": {
"top": 20,
"bottom": 20,
"left": 20,
"right": 20
},
"background_color": "#ffffff",
"components": [
{
"id": "comp-1",
"type": "text",
"x": 100,
"y": 50,
...
}
]
},
{
"page_id": "page-uuid-2",
"page_name": "본문",
"page_order": 1,
"width": 210,
"height": 297,
"orientation": "portrait",
"margins": { "top": 20, "bottom": 20, "left": 20, "right": 20 },
"background_color": "#ffffff",
"components": [...]
}
]
}
```
### 3.2 마이그레이션 전략
기존 단일 페이지 리포트 자동 변환:
```typescript
// 기존 구조 감지 시
if (layoutConfig.components && !layoutConfig.pages) {
// 자동으로 pages 구조로 변환
layoutConfig = {
pages: [
{
page_id: uuidv4(),
page_name: "페이지 1",
page_order: 0,
width: layoutConfig.width || 210,
height: layoutConfig.height || 297,
orientation: layoutConfig.orientation || "portrait",
margins: { top: 20, bottom: 20, left: 20, right: 20 },
background_color: "#ffffff",
components: layoutConfig.components,
},
],
};
}
```
## 4. 프론트엔드 구조
### 4.1 타입 정의 (types/report.ts)
```typescript
export interface ReportPage {
page_id: string;
report_id: string;
page_order: number;
page_name: string;
// 페이지 설정
width: number;
height: number;
orientation: 'portrait' | 'landscape';
// 여백
margin_top: number;
margin_bottom: number;
margin_left: number;
margin_right: number;
// 배경
background_color: string;
created_at?: string;
updated_at?: string;
}
export interface ComponentConfig {
id: string;
// page_id 불필요 (페이지의 components 배열에 포함됨)
type: 'text' | 'label' | 'image' | 'table' | ...;
x: number;
y: number;
width: number;
height: number;
// ... 기타 속성
}
export interface ReportLayoutConfig {
pages: ReportPage[];
}
```
### 4.2 Context 구조 변경
```typescript
interface ReportDesignerContextType {
// 페이지 관리
pages: ReportPage[];
currentPageId: string | null;
currentPage: ReportPage | null;
addPage: () => void;
deletePage: (pageId: string) => void;
duplicatePage: (pageId: string) => void;
reorderPages: (sourceIndex: number, targetIndex: number) => void;
selectPage: (pageId: string) => void;
updatePage: (pageId: string, updates: Partial<ReportPage>) => void;
// 컴포넌트 (현재 페이지만)
currentPageComponents: ComponentConfig[];
// ... 기존 기능들
}
```
### 4.3 UI 구조
```
┌─────────────────────────────────────────────────────────────┐
│ ReportDesignerToolbar (저장, 미리보기, 페이지 추가 등) │
├──────────┬────────────────────────────────────┬─────────────┤
│ │ │ │
│ PageList │ ReportDesignerCanvas │ Right │
│ (좌측) │ (현재 페이지만 표시) │ Panel │
│ │ │ (속성) │
│ - Page 1 │ ┌──────────────────────────┐ │ │
│ - Page 2 │ │ │ │ │
│ * Page 3 │ │ [컴포넌트들] │ │ │
│ (현재) │ │ │ │ │
│ │ └──────────────────────────┘ │ │
│ [+ 추가] │ │ │
│ │ 이전 | 다음 (페이지 네비게이션) │ │
└──────────┴────────────────────────────────────┴─────────────┘
```
## 5. 컴포넌트 구조
### 5.1 새 컴포넌트
#### PageListPanel.tsx
```typescript
- 좌측 페이지 목록 패널
- 페이지 썸네일 표시
- 드래그 앤 드롭으로 순서 변경
- 페이지 추가/삭제/복사 버튼
- 현재 페이지 하이라이트
```
#### PageNavigator.tsx
```typescript
- 캔버스 하단의 페이지 네비게이션
- 이전/다음 버튼
- 현재 페이지 번호 표시
- 페이지 점프 (1/5 형식)
```
#### PageSettingsPanel.tsx
```typescript
- 우측 패널 내 페이지 설정 섹션
- 페이지 크기, 방향
- 여백 설정
- 배경색
```
### 5.2 수정할 컴포넌트
#### ReportDesignerContext.tsx
- pages 상태 추가
- currentPageId 상태 추가
- 페이지 관리 함수들 추가
- components를 currentPageComponents로 필터링
#### ReportDesignerCanvas.tsx
- currentPageComponents만 렌더링
- 캔버스 크기를 currentPage 기준으로 설정
- 컴포넌트 추가 시 page_id 포함
#### ReportDesignerToolbar.tsx
- "페이지 추가" 버튼 추가
- 저장 시 pages도 함께 저장
#### ReportPreviewModal.tsx
- 모든 페이지 순서대로 미리보기
- 페이지 구분선 표시
- PDF 저장 시 모든 페이지 포함
## 6. API 엔드포인트
### 6.1 페이지 관리
```typescript
// 페이지 목록 조회
GET /api/report/:reportId/pages
Response: { pages: ReportPage[] }
// 페이지 생성
POST /api/report/:reportId/pages
Body: { page_name, width, height, orientation, margins }
Response: { page: ReportPage }
// 페이지 수정
PUT /api/report/pages/:pageId
Body: Partial<ReportPage>
Response: { page: ReportPage }
// 페이지 삭제
DELETE /api/report/pages/:pageId
Response: { success: boolean }
// 페이지 순서 변경
PUT /api/report/:reportId/pages/reorder
Body: { pageOrders: Array<{ page_id, page_order }> }
Response: { success: boolean }
// 페이지 복사
POST /api/report/pages/:pageId/duplicate
Response: { page: ReportPage }
```
### 6.2 레이아웃 (기존 수정)
```typescript
// 레이아웃 저장 (페이지별)
PUT /api/report/:reportId/layout
Body: {
pages: ReportPage[],
components: ComponentConfig[] // page_id 포함
}
```
## 7. 구현 단계
### Phase 1: DB 및 백엔드 (0.5일)
1. ✅ DB 스키마 생성
2. ✅ API 엔드포인트 구현
3. ✅ 기존 리포트 마이그레이션 (단일 페이지 생성)
### Phase 2: 타입 및 Context (0.5일)
1. ✅ 타입 정의 업데이트
2. ✅ Context에 페이지 상태/함수 추가
3. ✅ API 연동
### Phase 3: UI 컴포넌트 (1일)
1. ✅ PageListPanel 구현
2. ✅ PageNavigator 구현
3. ✅ PageSettingsPanel 구현
### Phase 4: 통합 및 수정 (1일)
1. ✅ Canvas에서 현재 페이지만 표시
2. ✅ 컴포넌트 추가/수정 시 page_id 처리
3. ✅ 미리보기에서 모든 페이지 표시
4. ✅ PDF/WORD 저장에서 모든 페이지 처리
### Phase 5: 테스트 및 최적화 (0.5일)
1. ✅ 페이지 전환 성능 확인
2. ✅ 썸네일 렌더링 최적화
3. ✅ 버그 수정
**총 예상 기간: 3-4일**
## 8. 주의사항
### 8.1 성능 최적화
- 페이지 썸네일은 저해상도로 렌더링
- 현재 페이지 컴포넌트만 DOM에 유지
- 페이지 전환 시 애니메이션 최소화
### 8.2 호환성
- 기존 리포트는 자동으로 단일 페이지로 마이그레이션
- 템플릿도 페이지 구조 포함
### 8.3 사용자 경험
- 페이지 삭제 시 확인 다이얼로그
- 컴포넌트가 있는 페이지 삭제 시 경고
- 페이지 순서 변경 시 즉시 반영
## 9. 추후 확장 기능
### 9.1 페이지 템플릿
- 자주 사용하는 페이지 레이아웃 저장
- 페이지 추가 시 템플릿 선택
### 9.2 마스터 페이지
- 모든 페이지에 공통으로 적용되는 헤더/푸터
- 페이지 번호 자동 삽입
### 9.3 페이지 연결
- 테이블 데이터가 여러 페이지에 자동 분할
- 페이지 오버플로우 처리
## 10. 참고 자료
- 오즈리포트 메뉴얼
- Crystal Reports 페이지 관리
- Adobe InDesign 페이지 시스템

185
frontend/MODAL_REPEATER_TABLE_DEBUG.md
View File

@ -1,185 +0,0 @@
# Modal Repeater Table 디버깅 가이드
## 📊 콘솔 로그 확인 순서
새로고침 후 수주 등록 모달을 열고, 아래 순서대로 콘솔 로그를 확인하세요:
### 1️⃣ 컴포넌트 마운트 (초기 로드)
```
🎬 ModalRepeaterTableComponent 마운트: {
config: {...},
propColumns: [...],
columns: [...],
columnsLength: N, // ⚠️ 0이면 문제!
value: [],
valueLength: 0,
sourceTable: "item_info",
sourceColumns: [...],
uniqueField: "item_number"
}
```
**✅ 정상:**
- `columnsLength: 8` (품번, 품명, 규격, 재질, 수량, 단가, 금액, 납기일)
- `columns` 배열에 각 컬럼의 `field`, `label`, `type` 정보가 있어야 함
**❌ 문제:**
- `columnsLength: 0` → **이것이 문제의 원인!**
- 빈 배열이면 테이블에 컬럼이 표시되지 않음
---
### 2️⃣ 항목 검색 모달 열림
```
🚪 모달 열림 - uniqueField: "item_number", multiSelect: true
```
---
### 3️⃣ 품목 체크 (선택)
```
🖱️ 행 클릭: {
item: { item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... },
uniqueField: "item_number",
itemValue: "SLI-2025-0003",
currentSelected: 0,
selectedValues: []
}
✅ 매칭 발견: { selectedValue: "SLI-2025-0003", itemValue: "SLI-2025-0003", uniqueField: "item_number" }
```
---
### 4️⃣ 추가 버튼 클릭
```
✅ ItemSelectionModal 추가 버튼 클릭: {
selectedCount: 1,
selectedItems: [{ item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... }],
uniqueField: "item_number"
}
```
---
### 5️⃣ 데이터 추가 처리
```
➕ handleAddItems 호출: {
selectedItems: [{ item_number: "SLI-2025-0003", ... }],
currentValue: [],
columns: [...], // ⚠️ 여기도 확인!
calculationRules: [...]
}
📝 기본값 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, ... }]
🔢 계산 필드 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
✅ 최종 데이터 (onChange 호출): [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
```
---
### 6️⃣ Renderer 업데이트
```
🔄 ModalRepeaterTableRenderer onChange 호출: {
previousValue: [],
newValue: [{ item_number: "SLI-2025-0003", ... }]
}
```
---
### 7️⃣ value 변경 감지
```
📦 ModalRepeaterTableComponent value 변경: {
valueLength: 1,
value: [{ item_number: "SLI-2025-0003", ... }],
columns: [...] // ⚠️ 여기도 확인!
}
```
---
### 8️⃣ 테이블 리렌더링
```
📊 RepeaterTable 데이터 업데이트: {
rowCount: 1,
data: [{ item_number: "SLI-2025-0003", ... }],
columns: ["item_number", "item_name", "specification", "material", "quantity", "selling_price", "amount", "delivery_date"]
}
```
---
## 🔍 문제 진단
### Case 1: columns가 비어있음 (columnsLength: 0)
**원인:**
- 화면관리 시스템에서 modal-repeater-table 컴포넌트의 `columns` 설정을 하지 않음
- DB에 컬럼 설정이 저장되지 않음
**해결:**
1. 화면 관리 페이지로 이동
2. 해당 화면 편집
3. modal-repeater-table 컴포넌트 선택
4. 우측 설정 패널에서 "컬럼 설정" 탭 열기
5. 다음 컬럼들을 추가:
- 품번 (item_number, text, 편집불가)
- 품명 (item_name, text, 편집불가)
- 규격 (specification, text, 편집불가)
- 재질 (material, text, 편집불가)
- 수량 (quantity, number, 편집가능, 기본값: 1)
- 단가 (selling_price, number, 편집가능)
- 금액 (amount, number, 편집불가, 계산필드)
- 납기일 (delivery_date, date, 편집가능)
6. 저장
---
### Case 2: 로그가 8번까지 나오는데 화면에 안 보임
**원인:**
- React 리렌더링 문제
- 화면관리 시스템의 상태 동기화 문제
**해결:**
1. 브라우저 개발자 도구 → Elements 탭
2. `#component-comp_5jdmuzai .border.rounded-md table tbody` 찾기
3. 실제 DOM에 `<tr>` 요소가 추가되었는지 확인
4. 추가되었다면 CSS 문제 (display: none 등)
5. 추가 안 되었다면 컴포넌트 렌더링 문제
---
### Case 3: 로그가 5번까지만 나오고 멈춤
**원인:**
- `onChange` 콜백이 제대로 전달되지 않음
- Renderer의 `updateComponent`가 작동하지 않음
**해결:**
- 이미 수정한 `ModalRepeaterTableRenderer.tsx` 코드 확인
- `handleChange` 함수가 호출되는지 확인
---
## 📝 다음 단계
위 로그를 **모두** 복사해서 공유해주세요. 특히:
1. **🎬 마운트 로그의 `columnsLength` 값**
2. **로그가 어디까지 출력되는지**
3. **Elements 탭에서 `tbody` 내부 HTML 구조**
이 정보로 정확한 문제를 진단할 수 있습니다!

24
frontend/app/(admin)/admin/vehicle-reports/page.tsx
View File

@ -2,29 +2,23 @@
import dynamic from "next/dynamic";
const VehicleReport = dynamic(
() => import("@/components/vehicle/VehicleReport"),
{
ssr: false,
loading: () => (
<div className="flex h-64 items-center justify-center">
<div className="text-muted-foreground">로딩 중...</div>
</div>
),
}
);
const VehicleReport = dynamic(() => import("@/components/vehicle/VehicleReport"), {
ssr: false,
loading: () => (
<div className="flex h-64 items-center justify-center">
<div className="text-muted-foreground">로딩 중...</div>
</div>
),
});
export default function VehicleReportsPage() {
return (
<div className="container mx-auto py-6">
<div className="mb-6">
<h1 className="text-2xl font-bold">운행 리포트</h1>
<p className="text-muted-foreground">
차량 운행 통계 및 분석 리포트를 확인합니다.
</p>
<p className="text-muted-foreground">차량 운행 통계 및 분석 리포트를 확인합니다.</p>
</div>
<VehicleReport />
</div>
);
}

23
frontend/app/(admin)/admin/vehicle-trips/page.tsx
View File

@ -2,26 +2,21 @@
import dynamic from "next/dynamic";
const VehicleTripHistory = dynamic(
() => import("@/components/vehicle/VehicleTripHistory"),
{
ssr: false,
loading: () => (
<div className="flex h-64 items-center justify-center">
<div className="text-muted-foreground">로딩 중...</div>
</div>
),
}
);
const VehicleTripHistory = dynamic(() => import("@/components/vehicle/VehicleTripHistory"), {
ssr: false,
loading: () => (
<div className="flex h-64 items-center justify-center">
<div className="text-muted-foreground">로딩 중...</div>
</div>
),
});
export default function VehicleTripsPage() {
return (
<div className="container mx-auto py-6">
<div className="mb-6">
<h1 className="text-2xl font-bold">운행 이력 관리</h1>
<p className="text-muted-foreground">
차량 운행 이력을 조회하고 관리합니다.
</p>
<p className="text-muted-foreground">차량 운행 이력을 조회하고 관리합니다.</p>
</div>
<VehicleTripHistory />
</div>

1
frontend/app/(main)/admin/[...slug]/page.tsx
View File

@ -23,4 +23,3 @@ export default function DynamicAdminPage() {
</div>
);
}

185
frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
View File

@ -12,22 +12,16 @@ import { ArrowLeft, Save, RefreshCw, ArrowRight, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { useRouter } from "next/navigation";
import {
BatchAPI,
BatchMapping,
ConnectionInfo,
ColumnInfo,
BatchMappingRequest,
} from "@/lib/api/batch";
import { BatchAPI, BatchMapping, ConnectionInfo, ColumnInfo, BatchMappingRequest } from "@/lib/api/batch";
export default function BatchCreatePage() {
const router = useRouter();
// 기본 정보
const [batchName, setBatchName] = useState("");
const [cronSchedule, setCronSchedule] = useState("0 12 * * *");
const [description, setDescription] = useState("");
// 커넥션 및 데이터
const [connections, setConnections] = useState<ConnectionInfo[]>([]);
const [fromConnection, setFromConnection] = useState<ConnectionInfo | null>(null);
@ -38,11 +32,11 @@ export default function BatchCreatePage() {
const [toTable, setToTable] = useState("");
const [fromColumns, setFromColumns] = useState<ColumnInfo[]>([]);
const [toColumns, setToColumns] = useState<ColumnInfo[]>([]);
// 매핑 상태
const [selectedFromColumn, setSelectedFromColumn] = useState<ColumnInfo | null>(null);
const [mappings, setMappings] = useState<BatchMapping[]>([]);
// 로딩 상태
const [loading, setLoading] = useState(false);
const [loadingConnections, setLoadingConnections] = useState(false);
@ -68,23 +62,23 @@ export default function BatchCreatePage() {
// FROM 커넥션 변경
const handleFromConnectionChange = async (connectionId: string) => {
if (connectionId === 'unknown') return;
const connection = connections.find(conn => {
if (conn.type === 'internal') {
return connectionId === 'internal';
if (connectionId === "unknown") return;
const connection = connections.find((conn) => {
if (conn.type === "internal") {
return connectionId === "internal";
}
return conn.id ? conn.id.toString() === connectionId : false;
});
if (!connection) return;
setFromConnection(connection);
setFromTable("");
setFromTables([]);
setFromColumns([]);
setSelectedFromColumn(null);
try {
const tables = await BatchAPI.getTablesFromConnection(connection);
setFromTables(Array.isArray(tables) ? tables : []);
@ -96,22 +90,22 @@ export default function BatchCreatePage() {
// TO 커넥션 변경
const handleToConnectionChange = async (connectionId: string) => {
if (connectionId === 'unknown') return;
const connection = connections.find(conn => {
if (conn.type === 'internal') {
return connectionId === 'internal';
if (connectionId === "unknown") return;
const connection = connections.find((conn) => {
if (conn.type === "internal") {
return connectionId === "internal";
}
return conn.id ? conn.id.toString() === connectionId : false;
});
if (!connection) return;
setToConnection(connection);
setToTable("");
setToTables([]);
setToColumns([]);
try {
const tables = await BatchAPI.getTablesFromConnection(connection);
setToTables(Array.isArray(tables) ? tables : []);
@ -126,9 +120,9 @@ export default function BatchCreatePage() {
setFromTable(tableName);
setFromColumns([]);
setSelectedFromColumn(null);
if (!fromConnection || !tableName) return;
try {
const columns = await BatchAPI.getTableColumns(fromConnection, tableName);
setFromColumns(Array.isArray(columns) ? columns : []);
@ -142,9 +136,9 @@ export default function BatchCreatePage() {
const handleToTableChange = async (tableName: string) => {
setToTable(tableName);
setToColumns([]);
if (!toConnection || !tableName) return;
try {
const columns = await BatchAPI.getTableColumns(toConnection, tableName);
setToColumns(Array.isArray(columns) ? columns : []);
@ -168,9 +162,9 @@ export default function BatchCreatePage() {
}
// n:1 매핑 검사
const toKey = `${toConnection.type}:${toConnection.id || 'internal'}:${toTable}:${toColumn.column_name}`;
const existingMapping = mappings.find(mapping => {
const existingToKey = `${mapping.to_connection_type}:${mapping.to_connection_id || 'internal'}:${mapping.to_table_name}:${mapping.to_column_name}`;
const toKey = `${toConnection.type}:${toConnection.id || "internal"}:${toTable}:${toColumn.column_name}`;
const existingMapping = mappings.find((mapping) => {
const existingToKey = `${mapping.to_connection_type}:${mapping.to_connection_id || "internal"}:${mapping.to_table_name}:${mapping.to_column_name}`;
return existingToKey === toKey;
});
@ -184,12 +178,12 @@ export default function BatchCreatePage() {
from_connection_id: fromConnection.id || null,
from_table_name: fromTable,
from_column_name: selectedFromColumn.column_name,
from_column_type: selectedFromColumn.data_type || '',
from_column_type: selectedFromColumn.data_type || "",
to_connection_type: toConnection.type,
to_connection_id: toConnection.id || null,
to_table_name: toTable,
to_column_name: toColumn.column_name,
to_column_type: toColumn.data_type || '',
to_column_type: toColumn.data_type || "",
mapping_order: mappings.length + 1,
};
@ -203,7 +197,7 @@ export default function BatchCreatePage() {
const newMappings = mappings.filter((_, i) => i !== index);
const reorderedMappings = newMappings.map((mapping, i) => ({
...mapping,
mapping_order: i + 1
mapping_order: i + 1,
}));
setMappings(reorderedMappings);
toast.success("매핑이 삭제되었습니다.");
@ -233,12 +227,12 @@ export default function BatchCreatePage() {
description: description || undefined,
cronSchedule: cronSchedule,
mappings: mappings,
isActive: true
isActive: true,
};
await BatchAPI.createBatchConfig(request);
toast.success("배치 설정이 성공적으로 저장되었습니다!");
// 목록 페이지로 이동
router.push("/admin/batchmng");
} catch (error) {
@ -250,7 +244,7 @@ export default function BatchCreatePage() {
};
return (
<div className="container mx-auto p-6 space-y-6">
<div className="container mx-auto space-y-6 p-6">
{/* 헤더 */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
@ -275,7 +269,7 @@ export default function BatchCreatePage() {
<CardTitle>기본 정보</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="batchName">배치명 *</Label>
<Input
@ -309,7 +303,7 @@ export default function BatchCreatePage() {
</Card>
{/* 매핑 설정 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{/* FROM 섹션 */}
<Card className="border-green-200">
<CardHeader className="bg-green-50">
@ -322,7 +316,7 @@ export default function BatchCreatePage() {
<div className="space-y-2">
<Label>커넥션 선택</Label>
<Select
value={fromConnection?.type === 'internal' ? 'internal' : fromConnection?.id?.toString() || ""}
value={fromConnection?.type === "internal" ? "internal" : fromConnection?.id?.toString() || ""}
onValueChange={handleFromConnectionChange}
disabled={loadingConnections}
>
@ -330,25 +324,22 @@ export default function BatchCreatePage() {
<SelectValue placeholder={loadingConnections ? "로딩 중..." : "커넥션을 선택하세요"} />
</SelectTrigger>
<SelectContent>
{Array.isArray(connections) && connections.map((conn) => (
<SelectItem
key={conn.type === 'internal' ? 'internal' : conn.id?.toString() || conn.name}
value={conn.type === 'internal' ? 'internal' : conn.id?.toString() || 'unknown'}
>
{conn.name} ({conn.type})
</SelectItem>
))}
{Array.isArray(connections) &&
connections.map((conn) => (
<SelectItem
key={conn.type === "internal" ? "internal" : conn.id?.toString() || conn.name}
value={conn.type === "internal" ? "internal" : conn.id?.toString() || "unknown"}
>
{conn.name} ({conn.type})
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>테이블 선택</Label>
<Select
value={fromTable}
onValueChange={handleFromTableChange}
disabled={!fromConnection}
>
<Select value={fromTable} onValueChange={handleFromTableChange} disabled={!fromConnection}>
<SelectTrigger>
<SelectValue placeholder="테이블을 선택하세요" />
</SelectTrigger>
@ -365,16 +356,16 @@ export default function BatchCreatePage() {
{/* FROM 컬럼 목록 */}
{fromTable && (
<div className="space-y-2">
<Label className="text-blue-600 font-semibold">{fromTable} 테이블</Label>
<div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
<Label className="font-semibold text-blue-600">{fromTable} 테이블</Label>
<div className="max-h-80 space-y-2 overflow-y-auto rounded-lg border p-4">
{fromColumns.map((column) => (
<div
key={column.column_name}
onClick={() => handleFromColumnClick(column)}
className={`p-3 border rounded cursor-pointer transition-colors ${
className={`cursor-pointer rounded border p-3 transition-colors ${
selectedFromColumn?.column_name === column.column_name
? 'bg-green-100 border-green-300'
: 'hover:bg-gray-50 border-gray-200'
? "border-green-300 bg-green-100"
: "border-gray-200 hover:bg-gray-50"
}`}
>
<div className="font-medium">{column.column_name}</div>
@ -382,9 +373,7 @@ export default function BatchCreatePage() {
</div>
))}
{fromColumns.length === 0 && fromTable && (
<div className="text-center text-gray-500 py-4">
컬럼을 불러오는 중...
</div>
<div className="py-4 text-center text-gray-500">컬럼을 불러오는 중...</div>
)}
</div>
</div>
@ -396,15 +385,13 @@ export default function BatchCreatePage() {
<Card className="border-red-200">
<CardHeader className="bg-red-50">
<CardTitle className="text-red-700">TO (대상 데이터베이스)</CardTitle>
<p className="text-sm text-red-600">
FROM에서 컬럼을 선택한 후, 여기서 대상 컬럼을 클릭하면 매핑됩니다
</p>
<p className="text-sm text-red-600">FROM에서 컬럼을 선택한 후, 여기서 대상 컬럼을 클릭하면 매핑됩니다</p>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label>커넥션 선택</Label>
<Select
value={toConnection?.type === 'internal' ? 'internal' : toConnection?.id?.toString() || ""}
value={toConnection?.type === "internal" ? "internal" : toConnection?.id?.toString() || ""}
onValueChange={handleToConnectionChange}
disabled={loadingConnections}
>
@ -412,25 +399,22 @@ export default function BatchCreatePage() {
<SelectValue placeholder={loadingConnections ? "로딩 중..." : "커넥션을 선택하세요"} />
</SelectTrigger>
<SelectContent>
{Array.isArray(connections) && connections.map((conn) => (
<SelectItem
key={conn.type === 'internal' ? 'internal' : conn.id?.toString() || conn.name}
value={conn.type === 'internal' ? 'internal' : conn.id?.toString() || 'unknown'}
>
{conn.name} ({conn.type})
</SelectItem>
))}
{Array.isArray(connections) &&
connections.map((conn) => (
<SelectItem
key={conn.type === "internal" ? "internal" : conn.id?.toString() || conn.name}
value={conn.type === "internal" ? "internal" : conn.id?.toString() || "unknown"}
>
{conn.name} ({conn.type})
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>테이블 선택</Label>
<Select
value={toTable}
onValueChange={handleToTableChange}
disabled={!toConnection}
>
<Select value={toTable} onValueChange={handleToTableChange} disabled={!toConnection}>
<SelectTrigger>
<SelectValue placeholder="테이블을 선택하세요" />
</SelectTrigger>
@ -447,16 +431,16 @@ export default function BatchCreatePage() {
{/* TO 컬럼 목록 */}
{toTable && (
<div className="space-y-2">
<Label className="text-blue-600 font-semibold">{toTable} 테이블</Label>
<div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
<Label className="font-semibold text-blue-600">{toTable} 테이블</Label>
<div className="max-h-80 space-y-2 overflow-y-auto rounded-lg border p-4">
{toColumns.map((column) => (
<div
key={column.column_name}
onClick={() => handleToColumnClick(column)}
className={`p-3 border rounded cursor-pointer transition-colors ${
selectedFromColumn
? 'hover:bg-red-50 border-gray-200'
: 'bg-gray-100 border-gray-300 cursor-not-allowed'
className={`cursor-pointer rounded border p-3 transition-colors ${
selectedFromColumn
? "border-gray-200 hover:bg-red-50"
: "cursor-not-allowed border-gray-300 bg-gray-100"
}`}
>
<div className="font-medium">{column.column_name}</div>
@ -464,9 +448,7 @@ export default function BatchCreatePage() {
</div>
))}
{toColumns.length === 0 && toTable && (
<div className="text-center text-gray-500 py-4">
컬럼을 불러오는 중...
</div>
<div className="py-4 text-center text-gray-500">컬럼을 불러오는 중...</div>
)}
</div>
</div>
@ -484,24 +466,20 @@ export default function BatchCreatePage() {
<CardContent>
<div className="space-y-3">
{mappings.map((mapping, index) => (
<div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-yellow-50">
<div key={index} className="flex items-center justify-between rounded-lg border bg-yellow-50 p-4">
<div className="flex items-center space-x-4">
<div className="text-sm">
<div className="font-medium">
{mapping.from_table_name}.{mapping.from_column_name}
</div>
<div className="text-gray-500">
{mapping.from_column_type}
</div>
<div className="text-gray-500">{mapping.from_column_type}</div>
</div>
<ArrowRight className="h-4 w-4 text-gray-400" />
<div className="text-sm">
<div className="font-medium">
{mapping.to_table_name}.{mapping.to_column_name}
</div>
<div className="text-gray-500">
{mapping.to_column_type}
</div>
<div className="text-gray-500">{mapping.to_column_type}</div>
</div>
</div>
<Button
@ -521,10 +499,7 @@ export default function BatchCreatePage() {
{/* 저장 버튼 */}
<div className="flex justify-end space-x-4">
<Button
variant="outline"
onClick={() => router.push("/admin/batchmng")}
>
<Button variant="outline" onClick={() => router.push("/admin/batchmng")}>
취소
</Button>
<Button
@ -532,14 +507,10 @@ export default function BatchCreatePage() {
disabled={loading || mappings.length === 0}
className="flex items-center space-x-2"
>
{loading ? (
<RefreshCw className="h-4 w-4 animate-spin" />
) : (
<Save className="h-4 w-4" />
)}
{loading ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
<span>{loading ? "저장 중..." : "배치 매핑 저장"}</span>
</Button>
</div>
</div>
);
}
}

331
frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
View File

@ -7,23 +7,12 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { RefreshCw, Save, ArrowLeft, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";
import {
BatchAPI,
BatchConfig,
BatchMapping,
ConnectionInfo,
} from "@/lib/api/batch";
import { BatchAPI, BatchConfig, BatchMapping, ConnectionInfo } from "@/lib/api/batch";
import { BatchManagementAPI } from "@/lib/api/batchManagement";
interface BatchColumnInfo {
@ -33,16 +22,16 @@ interface BatchColumnInfo {
}
// 배치 타입 감지 함수
const detectBatchType = (mapping: BatchMapping): 'db-to-db' | 'restapi-to-db' | 'db-to-restapi' => {
const detectBatchType = (mapping: BatchMapping): "db-to-db" | "restapi-to-db" | "db-to-restapi" => {
const fromType = mapping.from_connection_type;
const toType = mapping.to_connection_type;
if (fromType === 'restapi' && (toType === 'internal' || toType === 'external')) {
return 'restapi-to-db';
} else if ((fromType === 'internal' || fromType === 'external') && toType === 'restapi') {
return 'db-to-restapi';
if (fromType === "restapi" && (toType === "internal" || toType === "external")) {
return "restapi-to-db";
} else if ((fromType === "internal" || fromType === "external") && toType === "restapi") {
return "db-to-restapi";
} else {
return 'db-to-db';
return "db-to-db";
}
};
@ -68,7 +57,7 @@ export default function BatchEditPage() {
const [connections, setConnections] = useState<ConnectionInfo[]>([]);
const [fromConnection, setFromConnection] = useState<ConnectionInfo | null>(null);
const [toConnection, setToConnection] = useState<ConnectionInfo | null>(null);
// 테이블 및 컬럼 정보
const [fromTables, setFromTables] = useState<string[]>([]);
const [toTables, setToTables] = useState<string[]>([]);
@ -76,12 +65,12 @@ export default function BatchEditPage() {
const [toTable, setToTable] = useState("");
const [fromColumns, setFromColumns] = useState<BatchColumnInfo[]>([]);
const [toColumns, setToColumns] = useState<BatchColumnInfo[]>([]);
// 매핑 정보
const [mappings, setMappings] = useState<BatchMapping[]>([]);
// 배치 타입 감지
const [batchType, setBatchType] = useState<'db-to-db' | 'restapi-to-db' | 'db-to-restapi' | null>(null);
const [batchType, setBatchType] = useState<"db-to-db" | "restapi-to-db" | "db-to-restapi" | null>(null);
// REST API 미리보기 상태
const [apiPreviewData, setApiPreviewData] = useState<any[]>([]);
@ -131,35 +120,37 @@ export default function BatchEditPage() {
if (batchConfig && connections.length > 0 && batchConfig.batch_mappings && batchConfig.batch_mappings.length > 0) {
const firstMapping = batchConfig.batch_mappings[0];
console.log("🔗 연결 정보 설정 시작:", firstMapping);
// FROM 연결 정보 설정
if (firstMapping.from_connection_type === 'internal') {
setFromConnection({ type: 'internal', name: '내부 DB' });
if (firstMapping.from_connection_type === "internal") {
setFromConnection({ type: "internal", name: "내부 DB" });
// 내부 DB 테이블 목록 로드
BatchAPI.getTablesFromConnection({ type: 'internal', name: '내부 DB' }).then(tables => {
BatchAPI.getTablesFromConnection({ type: "internal", name: "내부 DB" }).then((tables) => {
console.log("📋 FROM 테이블 목록:", tables);
setFromTables(tables);
// 컬럼 정보도 로드
if (firstMapping.from_table_name) {
BatchAPI.getTableColumns({ type: 'internal', name: '내부 DB' }, firstMapping.from_table_name).then(columns => {
console.log("📊 FROM 컬럼 목록:", columns);
setFromColumns(columns);
});
BatchAPI.getTableColumns({ type: "internal", name: "내부 DB" }, firstMapping.from_table_name).then(
(columns) => {
console.log("📊 FROM 컬럼 목록:", columns);
setFromColumns(columns);
},
);
}
});
} else if (firstMapping.from_connection_id) {
const fromConn = connections.find(c => c.id === firstMapping.from_connection_id);
const fromConn = connections.find((c) => c.id === firstMapping.from_connection_id);
if (fromConn) {
setFromConnection(fromConn);
// 외부 DB 테이블 목록 로드
BatchAPI.getTablesFromConnection(fromConn).then(tables => {
BatchAPI.getTablesFromConnection(fromConn).then((tables) => {
console.log("📋 FROM 테이블 목록:", tables);
setFromTables(tables);
// 컬럼 정보도 로드
if (firstMapping.from_table_name) {
BatchAPI.getTableColumns(fromConn, firstMapping.from_table_name).then(columns => {
BatchAPI.getTableColumns(fromConn, firstMapping.from_table_name).then((columns) => {
console.log("📊 FROM 컬럼 목록:", columns);
setFromColumns(columns);
});
@ -167,35 +158,37 @@ export default function BatchEditPage() {
});
}
}
// TO 연결 정보 설정
if (firstMapping.to_connection_type === 'internal') {
setToConnection({ type: 'internal', name: '내부 DB' });
if (firstMapping.to_connection_type === "internal") {
setToConnection({ type: "internal", name: "내부 DB" });
// 내부 DB 테이블 목록 로드
BatchAPI.getTablesFromConnection({ type: 'internal', name: '내부 DB' }).then(tables => {
BatchAPI.getTablesFromConnection({ type: "internal", name: "내부 DB" }).then((tables) => {
console.log("📋 TO 테이블 목록:", tables);
setToTables(tables);
// 컬럼 정보도 로드
if (firstMapping.to_table_name) {
BatchAPI.getTableColumns({ type: 'internal', name: '내부 DB' }, firstMapping.to_table_name).then(columns => {
console.log("📊 TO 컬럼 목록:", columns);
setToColumns(columns);
});
BatchAPI.getTableColumns({ type: "internal", name: "내부 DB" }, firstMapping.to_table_name).then(
(columns) => {
console.log("📊 TO 컬럼 목록:", columns);
setToColumns(columns);
},
);
}
});
} else if (firstMapping.to_connection_id) {
const toConn = connections.find(c => c.id === firstMapping.to_connection_id);
const toConn = connections.find((c) => c.id === firstMapping.to_connection_id);
if (toConn) {
setToConnection(toConn);
// 외부 DB 테이블 목록 로드
BatchAPI.getTablesFromConnection(toConn).then(tables => {
BatchAPI.getTablesFromConnection(toConn).then((tables) => {
console.log("📋 TO 테이블 목록:", tables);
setToTables(tables);
// 컬럼 정보도 로드
if (firstMapping.to_table_name) {
BatchAPI.getTableColumns(toConn, firstMapping.to_table_name).then(columns => {
BatchAPI.getTableColumns(toConn, firstMapping.to_table_name).then((columns) => {
console.log("📊 TO 컬럼 목록:", columns);
setToColumns(columns);
});
@ -211,10 +204,10 @@ export default function BatchEditPage() {
try {
setLoading(true);
console.log("🔍 배치 설정 조회 시작:", batchId);
const config = await BatchAPI.getBatchConfig(batchId);
console.log("📋 조회된 배치 설정:", config);
setBatchConfig(config);
setBatchName(config.batch_name);
setCronSchedule(config.cron_schedule);
@ -224,14 +217,14 @@ export default function BatchEditPage() {
setConflictKey((config as any).conflict_key || "");
setAuthServiceName((config as any).auth_service_name || "");
setDataArrayPath((config as any).data_array_path || "");
// 인증 토큰 모드 설정
if ((config as any).auth_service_name) {
setAuthTokenMode("db");
} else {
setAuthTokenMode("direct");
}
if (config.batch_mappings && config.batch_mappings.length > 0) {
// API 키 설정 (첫 번째 매핑에서)
const firstMappingForApiKey = config.batch_mappings[0];
@ -244,66 +237,65 @@ export default function BatchEditPage() {
console.log(`📊 매핑 #${idx + 1}:`, {
from: `${mapping.from_column_name} (${mapping.from_column_type})`,
to: `${mapping.to_column_name} (${mapping.to_column_type})`,
type: mapping.mapping_type
type: mapping.mapping_type,
});
});
setMappings(config.batch_mappings);
// 첫 번째 매핑에서 연결 및 테이블 정보 추출
const firstMapping = config.batch_mappings[0];
setFromTable(firstMapping.from_table_name);
setToTable(firstMapping.to_table_name);
// 배치 타입 감지
const detectedBatchType = detectBatchType(firstMapping);
setBatchType(detectedBatchType);
console.log("🎯 감지된 배치 타입:", detectedBatchType);
// FROM 연결 정보 설정
if (firstMapping.from_connection_type === 'internal') {
setFromConnection({ type: 'internal', name: '내부 DB' });
if (firstMapping.from_connection_type === "internal") {
setFromConnection({ type: "internal", name: "내부 DB" });
} else if (firstMapping.from_connection_id) {
// 외부 연결은 connections 로드 후 설정
setTimeout(() => {
const fromConn = connections.find(c => c.id === firstMapping.from_connection_id);
const fromConn = connections.find((c) => c.id === firstMapping.from_connection_id);
if (fromConn) {
setFromConnection(fromConn);
}
}, 100);
}
// TO 연결 정보 설정
if (firstMapping.to_connection_type === 'internal') {
setToConnection({ type: 'internal', name: '내부 DB' });
if (firstMapping.to_connection_type === "internal") {
setToConnection({ type: "internal", name: "내부 DB" });
} else if (firstMapping.to_connection_id) {
// 외부 연결은 connections 로드 후 설정
setTimeout(() => {
const toConn = connections.find(c => c.id === firstMapping.to_connection_id);
const toConn = connections.find((c) => c.id === firstMapping.to_connection_id);
if (toConn) {
setToConnection(toConn);
}
}, 100);
}
console.log("🔗 테이블 정보 설정:", {
fromTable: firstMapping.from_table_name,
toTable: firstMapping.to_table_name,
fromConnectionType: firstMapping.from_connection_type,
toConnectionType: firstMapping.to_connection_type
toConnectionType: firstMapping.to_connection_type,
});
// 기존 매핑을 mappingList로 변환
const convertedMappingList: MappingItem[] = config.batch_mappings.map((mapping, index) => ({
id: `mapping-${index}-${Date.now()}`,
dbColumn: mapping.to_column_name || "",
sourceType: (mapping as any).mapping_type === "fixed" ? "fixed" as const : "api" as const,
sourceType: (mapping as any).mapping_type === "fixed" ? ("fixed" as const) : ("api" as const),
apiField: (mapping as any).mapping_type === "fixed" ? "" : mapping.from_column_name || "",
fixedValue: (mapping as any).mapping_type === "fixed" ? mapping.from_column_name || "" : "",
}));
setMappingList(convertedMappingList);
console.log("🔄 변환된 mappingList:", convertedMappingList);
}
} catch (error) {
console.error("❌ 배치 설정 조회 오류:", error);
toast.error("배치 설정을 불러오는데 실패했습니다.");
@ -325,12 +317,13 @@ export default function BatchEditPage() {
// FROM 연결 변경 시
const handleFromConnectionChange = async (connectionId: string) => {
const connection = connections.find(c => c.id?.toString() === connectionId) ||
(connectionId === 'internal' ? { type: 'internal' as const, name: '내부 DB' } : null);
const connection =
connections.find((c) => c.id?.toString() === connectionId) ||
(connectionId === "internal" ? { type: "internal" as const, name: "내부 DB" } : null);
if (connection) {
setFromConnection(connection);
try {
const tables = await BatchAPI.getTablesFromConnection(connection);
setFromTables(tables);
@ -345,12 +338,13 @@ export default function BatchEditPage() {
// TO 연결 변경 시
const handleToConnectionChange = async (connectionId: string) => {
const connection = connections.find(c => c.id?.toString() === connectionId) ||
(connectionId === 'internal' ? { type: 'internal' as const, name: '내부 DB' } : null);
const connection =
connections.find((c) => c.id?.toString() === connectionId) ||
(connectionId === "internal" ? { type: "internal" as const, name: "내부 DB" } : null);
if (connection) {
setToConnection(connection);
try {
const tables = await BatchAPI.getTablesFromConnection(connection);
setToTables(tables);
@ -366,7 +360,7 @@ export default function BatchEditPage() {
// FROM 테이블 변경 시
const handleFromTableChange = async (tableName: string) => {
setFromTable(tableName);
if (fromConnection && tableName) {
try {
const columns = await BatchAPI.getTableColumns(fromConnection, tableName);
@ -381,7 +375,7 @@ export default function BatchEditPage() {
// TO 테이블 변경 시
const handleToTableChange = async (tableName: string) => {
setToTable(tableName);
if (toConnection && tableName) {
try {
const columns = await BatchAPI.getTableColumns(toConnection, tableName);
@ -396,20 +390,20 @@ export default function BatchEditPage() {
// 매핑 추가
const addMapping = () => {
const newMapping: BatchMapping = {
from_connection_type: fromConnection?.type === 'internal' ? 'internal' : 'external',
from_connection_id: fromConnection?.type === 'internal' ? undefined : fromConnection?.id,
from_connection_type: fromConnection?.type === "internal" ? "internal" : "external",
from_connection_id: fromConnection?.type === "internal" ? undefined : fromConnection?.id,
from_table_name: fromTable,
from_column_name: '',
from_column_type: '',
to_connection_type: toConnection?.type === 'internal' ? 'internal' : 'external',
to_connection_id: toConnection?.type === 'internal' ? undefined : toConnection?.id,
from_column_name: "",
from_column_type: "",
to_connection_type: toConnection?.type === "internal" ? "internal" : "external",
to_connection_id: toConnection?.type === "internal" ? undefined : toConnection?.id,
to_table_name: toTable,
to_column_name: '',
to_column_type: '',
mapping_type: 'direct',
mapping_order: mappings.length + 1
to_column_name: "",
to_column_type: "",
mapping_type: "direct",
mapping_order: mappings.length + 1,
};
setMappings([...mappings, newMapping]);
};
@ -485,8 +479,7 @@ export default function BatchEditPage() {
}
try {
const method =
(first.from_api_method as "GET" | "POST" | "PUT" | "DELETE") || "GET";
const method = (first.from_api_method as "GET" | "POST" | "PUT" | "DELETE") || "GET";
const paramInfo =
apiParamType !== "none" && apiParamName && apiParamValue
@ -507,15 +500,13 @@ export default function BatchEditPage() {
paramInfo,
first.from_api_body || undefined,
authTokenMode === "db" ? authServiceName : undefined, // DB 선택 모드일 때 서비스명 전달
dataArrayPath || undefined
dataArrayPath || undefined,
);
setApiPreviewData(result.samples || []);
setFromApiFields(result.fields || []);
toast.success(
`API 데이터 미리보기 완료! ${result.fields.length}개 필드, ${result.samples.length}개 레코드`
);
toast.success(`API 데이터 미리보기 완료! ${result.fields.length}개 필드, ${result.samples.length}개 레코드`);
} catch (error: any) {
console.error("REST API 미리보기 오류:", error);
toast.error(error?.message || "API 데이터 미리보기에 실패했습니다.");
@ -530,7 +521,7 @@ export default function BatchEditPage() {
// 매핑 업데이트
const updateMapping = (index: number, field: keyof BatchMapping, value: any) => {
setMappings(prevMappings => {
setMappings((prevMappings) => {
const updatedMappings = [...prevMappings];
updatedMappings[index] = { ...updatedMappings[index], [field]: value };
return updatedMappings;
@ -541,7 +532,7 @@ export default function BatchEditPage() {
const saveBatchConfig = async () => {
// restapi-to-db인 경우 mappingList 사용, 아닌 경우 mappings 사용
const effectiveMappings = batchType === "restapi-to-db" ? mappingList : mappings;
if (!batchName || !cronSchedule || effectiveMappings.length === 0) {
toast.error("필수 항목을 모두 입력해주세요.");
return;
@ -549,10 +540,10 @@ export default function BatchEditPage() {
try {
setLoading(true);
// restapi-to-db인 경우 mappingList를 mappings 형식으로 변환
let finalMappings: BatchMapping[] = mappings;
if (batchType === "restapi-to-db" && batchConfig?.batch_mappings?.[0]) {
const first = batchConfig.batch_mappings[0] as any;
finalMappings = mappingList
@ -578,7 +569,7 @@ export default function BatchEditPage() {
mapping_order: index + 1,
})) as BatchMapping[];
}
await BatchAPI.updateBatchConfig(batchId, {
batchName,
description,
@ -588,12 +579,11 @@ export default function BatchEditPage() {
saveMode,
conflictKey: saveMode === "UPSERT" ? conflictKey : null, // INSERT면 null로 명시적 삭제
authServiceName: authTokenMode === "db" ? authServiceName : null, // 직접입력이면 null로 명시적 삭제
dataArrayPath: dataArrayPath || null
dataArrayPath: dataArrayPath || null,
});
toast.success("배치 설정이 성공적으로 수정되었습니다.");
router.push("/admin/batchmng");
} catch (error) {
console.error("배치 설정 수정 실패:", error);
toast.error("배치 설정 수정에 실패했습니다.");
@ -605,8 +595,8 @@ export default function BatchEditPage() {
if (loading && !batchConfig) {
return (
<div className="container mx-auto p-6">
<div className="flex items-center justify-center h-64">
<RefreshCw className="w-8 h-8 animate-spin" />
<div className="flex h-64 items-center justify-center">
<RefreshCw className="h-8 w-8 animate-spin" />
<span className="ml-2">배치 설정을 불러오는 중...</span>
</div>
</div>
@ -617,11 +607,7 @@ export default function BatchEditPage() {
<div className="container mx-auto space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="flex items-center gap-4 border-b pb-4">
<Button
variant="outline"
onClick={() => router.push("/admin/batchmng")}
className="gap-2"
>
<Button variant="outline" onClick={() => router.push("/admin/batchmng")} className="gap-2">
<ArrowLeft className="h-4 w-4" />
목록으로
</Button>
@ -699,11 +685,7 @@ export default function BatchEditPage() {
<div>
<Label>연결</Label>
<Select
value={
fromConnection?.type === "internal"
? "internal"
: fromConnection?.id?.toString() || ""
}
value={fromConnection?.type === "internal" ? "internal" : fromConnection?.id?.toString() || ""}
onValueChange={handleFromConnectionChange}
>
<SelectTrigger>
@ -882,8 +864,8 @@ export default function BatchEditPage() {
</div>
{/* Request Body (POST/PUT/DELETE용) */}
{(mappings[0]?.from_api_method === "POST" ||
mappings[0]?.from_api_method === "PUT" ||
{(mappings[0]?.from_api_method === "POST" ||
mappings[0]?.from_api_method === "PUT" ||
mappings[0]?.from_api_method === "DELETE") && (
<div>
<Label>Request Body (JSON)</Label>
@ -954,9 +936,7 @@ export default function BatchEditPage() {
</div>
<div>
<Label>
{apiParamSource === "static" ? "파라미터 값" : "파라미터 템플릿"} *
</Label>
<Label>{apiParamSource === "static" ? "파라미터 값" : "파라미터 템플릿"} *</Label>
<Input
value={apiParamValue}
onChange={(e) => setApiParamValue(e.target.value)}
@ -1020,11 +1000,7 @@ export default function BatchEditPage() {
<div>
<Label>연결</Label>
<Select
value={
toConnection?.type === "internal"
? "internal"
: toConnection?.id?.toString() || ""
}
value={toConnection?.type === "internal" ? "internal" : toConnection?.id?.toString() || ""}
onValueChange={handleToConnectionChange}
>
<SelectTrigger>
@ -1045,11 +1021,7 @@ export default function BatchEditPage() {
<div>
<Label>테이블</Label>
<Select
value={toTable}
onValueChange={handleToTableChange}
disabled={!toConnection}
>
<Select value={toTable} onValueChange={handleToTableChange} disabled={!toConnection}>
<SelectTrigger>
<SelectValue placeholder="대상 테이블을 선택하세요" />
</SelectTrigger>
@ -1070,11 +1042,7 @@ export default function BatchEditPage() {
<div>
<Label>데이터베이스 연결 *</Label>
<Select
value={
toConnection?.type === "internal"
? "internal"
: toConnection?.id?.toString() || ""
}
value={toConnection?.type === "internal" ? "internal" : toConnection?.id?.toString() || ""}
onValueChange={handleToConnectionChange}
>
<SelectTrigger>
@ -1095,11 +1063,7 @@ export default function BatchEditPage() {
<div>
<Label>대상 테이블 *</Label>
<Select
value={toTable}
onValueChange={handleToTableChange}
disabled={!toConnection}
>
<Select value={toTable} onValueChange={handleToTableChange} disabled={!toConnection}>
<SelectTrigger>
<SelectValue placeholder={toConnection ? "테이블을 선택하세요" : "먼저 연결을 선택하세요"} />
</SelectTrigger>
@ -1151,9 +1115,7 @@ export default function BatchEditPage() {
</SelectTrigger>
<SelectContent>
<SelectItem value="INSERT">INSERT (항상 새로 추가)</SelectItem>
<SelectItem value="UPSERT">
UPSERT (있으면 업데이트, 없으면 추가)
</SelectItem>
<SelectItem value="UPSERT">UPSERT (있으면 업데이트, 없으면 추가)</SelectItem>
</SelectContent>
</Select>
<p className="text-muted-foreground mt-1.5 text-xs">
@ -1184,9 +1146,7 @@ export default function BatchEditPage() {
))}
</SelectContent>
</Select>
<p className="text-muted-foreground mt-1.5 text-xs">
UPSERT 시 중복 여부를 판단할 컬럼을 선택하세요.
</p>
<p className="text-muted-foreground mt-1.5 text-xs">UPSERT 시 중복 여부를 판단할 컬럼을 선택하세요.</p>
</div>
</CardContent>
</Card>
@ -1195,11 +1155,7 @@ export default function BatchEditPage() {
{/* API 데이터 미리보기 버튼 */}
{batchType === "restapi-to-db" && (
<div className="flex justify-center">
<Button
variant="outline"
onClick={previewRestApiData}
disabled={mappings.length === 0}
>
<Button variant="outline" onClick={previewRestApiData} disabled={mappings.length === 0}>
<RefreshCw className="mr-2 h-4 w-4" />
API 데이터 미리보기
</Button>
@ -1230,9 +1186,7 @@ export default function BatchEditPage() {
<div className="space-y-2">
{apiPreviewData.slice(0, 3).map((item, index) => (
<div key={index} className="bg-background rounded border p-2">
<pre className="whitespace-pre-wrap font-mono text-xs">
{JSON.stringify(item, null, 2)}
</pre>
<pre className="font-mono text-xs whitespace-pre-wrap">{JSON.stringify(item, null, 2)}</pre>
</div>
))}
</div>
@ -1405,24 +1359,15 @@ export default function BatchEditPage() {
) : (
<div className="bg-muted/30 h-[360px] space-y-3 overflow-y-auto rounded-lg border p-3">
{mappings.map((mapping, index) => (
<div
key={index}
className="bg-background flex items-center gap-2 rounded-lg border p-3"
>
<div key={index} className="bg-background flex items-center gap-2 rounded-lg border p-3">
<div className="flex-1">
<Select
value={mapping.from_column_name || ""}
onValueChange={(value) => {
updateMapping(index, "from_column_name", value);
const selectedColumn = fromColumns.find(
(col) => col.column_name === value
);
const selectedColumn = fromColumns.find((col) => col.column_name === value);
if (selectedColumn) {
updateMapping(
index,
"from_column_type",
selectedColumn.data_type
);
updateMapping(index, "from_column_type", selectedColumn.data_type);
}
}}
>
@ -1431,10 +1376,7 @@ export default function BatchEditPage() {
</SelectTrigger>
<SelectContent>
{fromColumns.map((column) => (
<SelectItem
key={column.column_name}
value={column.column_name}
>
<SelectItem key={column.column_name} value={column.column_name}>
{column.column_name}
</SelectItem>
))}
@ -1447,15 +1389,9 @@ export default function BatchEditPage() {
value={mapping.to_column_name || ""}
onValueChange={(value) => {
updateMapping(index, "to_column_name", value);
const selectedColumn = toColumns.find(
(col) => col.column_name === value
);
const selectedColumn = toColumns.find((col) => col.column_name === value);
if (selectedColumn) {
updateMapping(
index,
"to_column_type",
selectedColumn.data_type
);
updateMapping(index, "to_column_type", selectedColumn.data_type);
}
}}
>
@ -1464,22 +1400,14 @@ export default function BatchEditPage() {
</SelectTrigger>
<SelectContent>
{toColumns.map((column) => (
<SelectItem
key={column.column_name}
value={column.column_name}
>
<SelectItem key={column.column_name} value={column.column_name}>
{column.column_name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => removeMapping(index)}
>
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => removeMapping(index)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
@ -1499,24 +1427,13 @@ export default function BatchEditPage() {
) : (
<div className="bg-muted/30 h-[360px] space-y-3 overflow-y-auto rounded-lg border p-3">
{mappings.map((mapping, index) => (
<div
key={index}
className="bg-background flex items-center gap-2 rounded-lg border p-3"
>
<div key={index} className="bg-background flex items-center gap-2 rounded-lg border p-3">
<div className="flex-1">
<Input
value={mapping.from_column_name || ""}
readOnly
className="h-9 text-xs"
/>
<Input value={mapping.from_column_name || ""} readOnly className="h-9 text-xs" />
</div>
<span className="text-muted-foreground text-xs">-&gt;</span>
<div className="flex-1">
<Input
value={mapping.to_column_name || ""}
readOnly
className="h-9 text-xs"
/>
<Input value={mapping.to_column_name || ""} readOnly className="h-9 text-xs" />
</div>
</div>
))}
@ -1538,11 +1455,7 @@ export default function BatchEditPage() {
onClick={saveBatchConfig}
disabled={loading || (batchType === "restapi-to-db" ? mappingList.length === 0 : mappings.length === 0)}
>
{loading ? (
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
) : (
<Save className="mr-2 h-4 w-4" />
)}
{loading ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
{loading ? "저장 중..." : "배치 설정 저장"}
</Button>
</div>

126
frontend/app/(main)/admin/automaticMng/batchmngList/page.tsx
View File

@ -3,26 +3,17 @@
import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Plus,
Search,
RefreshCw,
Database
} from "lucide-react";
import { Plus, Search, RefreshCw, Database } from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { useRouter } from "next/navigation";
import {
BatchAPI,
BatchConfig,
BatchMapping,
} from "@/lib/api/batch";
import { BatchAPI, BatchConfig, BatchMapping } from "@/lib/api/batch";
import BatchCard from "@/components/admin/BatchCard";
import { ScrollToTop } from "@/components/common/ScrollToTop";
export default function BatchManagementPage() {
const router = useRouter();
// 상태 관리
const [batchConfigs, setBatchConfigs] = useState<BatchConfig[]>([]);
const [loading, setLoading] = useState(false);
@ -46,7 +37,7 @@ export default function BatchManagementPage() {
limit: 10,
search: searchTerm || undefined,
});
if (response.success && response.data) {
setBatchConfigs(response.data);
if (response.pagination) {
@ -70,7 +61,9 @@ export default function BatchManagementPage() {
try {
const response = await BatchAPI.executeBatchConfig(batchId);
if (response.success) {
toast.success(`배치가 성공적으로 실행되었습니다! (처리: ${response.data?.totalRecords}개, 성공: ${response.data?.successRecords}개)`);
toast.success(
`배치가 성공적으로 실행되었습니다! (처리: ${response.data?.totalRecords}개, 성공: ${response.data?.successRecords}개)`,
);
} else {
toast.error("배치 실행에 실패했습니다.");
}
@ -87,15 +80,15 @@ export default function BatchManagementPage() {
// 배치 활성화/비활성화 토글
const toggleBatchStatus = async (batchId: number, currentStatus: string) => {
console.log("🔄 배치 상태 변경 시작:", { batchId, currentStatus });
try {
const newStatus = currentStatus === 'Y' ? 'N' : 'Y';
const newStatus = currentStatus === "Y" ? "N" : "Y";
console.log("📝 새로운 상태:", newStatus);
const result = await BatchAPI.updateBatchConfig(batchId, { isActive: newStatus });
console.log("✅ API 호출 성공:", result);
toast.success(`배치가 ${newStatus === 'Y' ? '활성화' : '비활성화'}되었습니다.`);
toast.success(`배치가 ${newStatus === "Y" ? "활성화" : "비활성화"}되었습니다.`);
loadBatchConfigs(); // 목록 새로고침
} catch (error) {
console.error("❌ 배치 상태 변경 실패:", error);
@ -132,14 +125,12 @@ export default function BatchManagementPage() {
}
const tableGroups = new Map<string, number>();
mappings.forEach(mapping => {
mappings.forEach((mapping) => {
const key = `${mapping.from_table_name} → ${mapping.to_table_name}`;
tableGroups.set(key, (tableGroups.get(key) || 0) + 1);
});
const summaries = Array.from(tableGroups.entries()).map(([key, count]) =>
`${key} (${count}개 컬럼)`
);
const summaries = Array.from(tableGroups.entries()).map(([key, count]) => `${key} (${count}개 컬럼)`);
return summaries.join(", ");
};
@ -150,35 +141,35 @@ export default function BatchManagementPage() {
};
// 배치 타입 선택 핸들러
const handleBatchTypeSelect = (type: 'db-to-db' | 'restapi-to-db') => {
const handleBatchTypeSelect = (type: "db-to-db" | "restapi-to-db") => {
console.log("배치 타입 선택:", type);
setIsBatchTypeModalOpen(false);
if (type === 'db-to-db') {
if (type === "db-to-db") {
// 기존 DB → DB 배치 생성 페이지로 이동
console.log("DB → DB 페이지로 이동:", '/admin/batchmng/create');
router.push('/admin/batchmng/create');
} else if (type === 'restapi-to-db') {
console.log("DB → DB 페이지로 이동:", "/admin/batchmng/create");
router.push("/admin/batchmng/create");
} else if (type === "restapi-to-db") {
// 새로운 REST API 배치 페이지로 이동
console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
console.log("REST API → DB 페이지로 이동:", "/admin/batch-management-new");
try {
router.push('/admin/batch-management-new');
router.push("/admin/batch-management-new");
console.log("라우터 push 실행 완료");
} catch (error) {
console.error("라우터 push 오류:", error);
// 대안: window.location 사용
window.location.href = '/admin/batch-management-new';
window.location.href = "/admin/batch-management-new";
}
}
};
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">배치 관리</h1>
<p className="text-sm text-muted-foreground">데이터베이스 간 배치 작업을 관리합니다.</p>
<p className="text-muted-foreground text-sm">데이터베이스 간 배치 작업을 관리합니다.</p>
</div>
{/* 검색 및 액션 영역 */}
@ -187,7 +178,7 @@ export default function BatchManagementPage() {
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div className="w-full sm:w-[400px]">
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="배치명 또는 설명으로 검색..."
value={searchTerm}
@ -203,24 +194,17 @@ export default function BatchManagementPage() {
disabled={loading}
className="h-10 gap-2 text-sm font-medium"
>
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
새로고침
</Button>
</div>
{/* 액션 버튼 영역 */}
<div className="flex items-center gap-4">
<div className="text-sm text-muted-foreground">
총{" "}
<span className="font-semibold text-foreground">
{batchConfigs.length.toLocaleString()}
</span>{" "}
건
<div className="text-muted-foreground text-sm">
총 <span className="text-foreground font-semibold">{batchConfigs.length.toLocaleString()}</span> 건
</div>
<Button
onClick={handleCreateBatch}
className="h-10 gap-2 text-sm font-medium"
>
<Button onClick={handleCreateBatch} className="h-10 gap-2 text-sm font-medium">
<Plus className="h-4 w-4" />
배치 추가
</Button>
@ -229,22 +213,18 @@ export default function BatchManagementPage() {
{/* 배치 목록 */}
{batchConfigs.length === 0 ? (
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<div className="flex flex-col items-center gap-4 text-center">
<Database className="h-12 w-12 text-muted-foreground" />
<Database className="text-muted-foreground h-12 w-12" />
<div className="space-y-2">
<h3 className="text-lg font-semibold">배치가 없습니다</h3>
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
{searchTerm ? "검색 결과가 없습니다." : "새로운 배치를 추가해보세요."}
</p>
</div>
{!searchTerm && (
<Button
onClick={handleCreateBatch}
className="h-10 gap-2 text-sm font-medium"
>
<Plus className="h-4 w-4" />
첫 번째 배치 추가
<Button onClick={handleCreateBatch} className="h-10 gap-2 text-sm font-medium">
<Plus className="h-4 w-4" />첫 번째 배치 추가
</Button>
)}
</div>
@ -273,13 +253,13 @@ export default function BatchManagementPage() {
<div className="flex items-center justify-center gap-2">
<Button
variant="outline"
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
disabled={currentPage === 1}
className="h-10 text-sm font-medium"
>
이전
</Button>
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
const pageNum = i + 1;
@ -295,10 +275,10 @@ export default function BatchManagementPage() {
);
})}
</div>
<Button
variant="outline"
onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
disabled={currentPage === totalPages}
className="h-10 text-sm font-medium"
>
@ -309,41 +289,41 @@ export default function BatchManagementPage() {
{/* 배치 타입 선택 모달 */}
{isBatchTypeModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
<div className="w-full max-w-2xl rounded-lg border bg-card p-6 shadow-lg">
<div className="bg-background/80 fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
<div className="bg-card w-full max-w-2xl rounded-lg border p-6 shadow-lg">
<div className="space-y-6">
<h2 className="text-xl font-semibold text-center">배치 타입 선택</h2>
<h2 className="text-center text-xl font-semibold">배치 타입 선택</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* DB → DB */}
<button
className="flex flex-col items-center gap-4 rounded-lg border bg-card p-6 shadow-sm transition-all hover:border-primary hover:bg-accent"
onClick={() => handleBatchTypeSelect('db-to-db')}
className="bg-card hover:border-primary hover:bg-accent flex flex-col items-center gap-4 rounded-lg border p-6 shadow-sm transition-all"
onClick={() => handleBatchTypeSelect("db-to-db")}
>
<div className="flex items-center gap-2">
<Database className="h-8 w-8 text-primary" />
<Database className="text-primary h-8 w-8" />
<span className="text-muted-foreground">→</span>
<Database className="h-8 w-8 text-primary" />
<Database className="text-primary h-8 w-8" />
</div>
<div className="space-y-1 text-center">
<div className="text-lg font-medium">DB → DB</div>
<div className="text-sm text-muted-foreground">데이터베이스 간 데이터 동기화</div>
<div className="text-muted-foreground text-sm">데이터베이스 간 데이터 동기화</div>
</div>
</button>
{/* REST API → DB */}
<button
className="flex flex-col items-center gap-4 rounded-lg border bg-card p-6 shadow-sm transition-all hover:border-primary hover:bg-accent"
onClick={() => handleBatchTypeSelect('restapi-to-db')}
className="bg-card hover:border-primary hover:bg-accent flex flex-col items-center gap-4 rounded-lg border p-6 shadow-sm transition-all"
onClick={() => handleBatchTypeSelect("restapi-to-db")}
>
<div className="flex items-center gap-2">
<span className="text-2xl">🌐</span>
<span className="text-muted-foreground">→</span>
<Database className="h-8 w-8 text-primary" />
<Database className="text-primary h-8 w-8" />
</div>
<div className="space-y-1 text-center">
<div className="text-lg font-medium">REST API → DB</div>
<div className="text-sm text-muted-foreground">REST API에서 데이터베이스로 데이터 수집</div>
<div className="text-muted-foreground text-sm">REST API에서 데이터베이스로 데이터 수집</div>
</div>
</button>
</div>
@ -367,4 +347,4 @@ export default function BatchManagementPage() {
<ScrollToTop />
</div>
);
}
}

105
frontend/app/(main)/admin/automaticMng/exCallConfList/page.tsx
View File

@ -172,12 +172,12 @@ export default function ExternalCallConfigsPage() {
};
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">외부 호출 관리</h1>
<p className="text-sm text-muted-foreground">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
<p className="text-muted-foreground text-sm">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
</div>
{/* 검색 및 필터 영역 */}
@ -187,7 +187,7 @@ export default function ExternalCallConfigsPage() {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<div className="w-full sm:w-[320px]">
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="설정 이름 또는 설명으로 검색..."
value={searchQuery}
@ -203,8 +203,7 @@ export default function ExternalCallConfigsPage() {
</Button>
</div>
<Button onClick={handleAddConfig} className="h-10 gap-2 text-sm font-medium">
<Plus className="h-4 w-4" />
새 외부 호출 추가
<Plus className="h-4 w-4" />새 외부 호출 추가
</Button>
</div>
@ -278,25 +277,25 @@ export default function ExternalCallConfigsPage() {
</div>
{/* 설정 목록 */}
<div className="rounded-lg border bg-card shadow-sm">
<div className="bg-card rounded-lg border shadow-sm">
{loading ? (
// 로딩 상태
<div className="flex h-64 items-center justify-center">
<div className="text-sm text-muted-foreground">로딩 중...</div>
<div className="text-muted-foreground text-sm">로딩 중...</div>
</div>
) : configs.length === 0 ? (
// 빈 상태
<div className="flex h-64 flex-col items-center justify-center">
<div className="flex flex-col items-center gap-2 text-center">
<p className="text-sm text-muted-foreground">등록된 외부 호출 설정이 없습니다.</p>
<p className="text-xs text-muted-foreground">새 외부 호출을 추가해보세요.</p>
<p className="text-muted-foreground text-sm">등록된 외부 호출 설정이 없습니다.</p>
<p className="text-muted-foreground text-xs">새 외부 호출을 추가해보세요.</p>
</div>
</div>
) : (
// 설정 테이블 목록
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
<TableHead className="h-12 text-sm font-semibold">설정명</TableHead>
<TableHead className="h-12 text-sm font-semibold">호출 타입</TableHead>
<TableHead className="h-12 text-sm font-semibold">API 타입</TableHead>
@ -308,7 +307,7 @@ export default function ExternalCallConfigsPage() {
</TableHeader>
<TableBody>
{configs.map((config) => (
<TableRow key={config.id} className="border-b transition-colors hover:bg-muted/50">
<TableRow key={config.id} className="hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16 text-sm font-medium">{config.config_name}</TableCell>
<TableCell className="h-16 text-sm">
<Badge variant="outline">{getCallTypeLabel(config.call_type)}</Badge>
@ -323,7 +322,7 @@ export default function ExternalCallConfigsPage() {
<TableCell className="h-16 text-sm">
<div className="max-w-xs">
{config.description ? (
<span className="block truncate text-muted-foreground" title={config.description}>
<span className="text-muted-foreground block truncate" title={config.description}>
{config.description}
</span>
) : (
@ -336,25 +335,25 @@ export default function ExternalCallConfigsPage() {
{config.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</TableCell>
<TableCell className="h-16 text-sm text-muted-foreground">
<TableCell className="text-muted-foreground h-16 text-sm">
{config.created_date ? new Date(config.created_date).toLocaleDateString() : "-"}
</TableCell>
<TableCell className="h-16 text-sm">
<div className="flex justify-center gap-1">
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => handleTestConfig(config)}
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => handleTestConfig(config)}
title="테스트"
>
<TestTube className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => handleEditConfig(config)}
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => handleEditConfig(config)}
title="편집"
>
<Edit className="h-4 w-4" />
@ -362,7 +361,7 @@ export default function ExternalCallConfigsPage() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-destructive hover:text-destructive"
className="text-destructive hover:text-destructive h-8 w-8"
onClick={() => handleDeleteConfig(config)}
title="삭제"
>
@ -377,37 +376,35 @@ export default function ExternalCallConfigsPage() {
)}
</div>
{/* 외부 호출 설정 모달 */}
<ExternalCallConfigModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onSave={handleModalSave}
editingConfig={editingConfig}
/>
{/* 외부 호출 설정 모달 */}
<ExternalCallConfigModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onSave={handleModalSave}
editingConfig={editingConfig}
/>
{/* 삭제 확인 다이얼로그 */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
<AlertDialogHeader>
<AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
<AlertDialogDescription className="text-xs sm:text-sm">
"{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
<br />이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:gap-0">
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
취소
</AlertDialogCancel>
<AlertDialogAction
onClick={confirmDeleteConfig}
className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
>
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* 삭제 확인 다이얼로그 */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
<AlertDialogHeader>
<AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
<AlertDialogDescription className="text-xs sm:text-sm">
"{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
<br />이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:gap-0">
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</AlertDialogCancel>
<AlertDialogAction
onClick={confirmDeleteConfig}
className="bg-destructive hover:bg-destructive/90 h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
);

212
frontend/app/(main)/admin/automaticMng/exconList/page.tsx
View File

@ -227,12 +227,12 @@ export default function ExternalConnectionsPage() {
};
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">외부 커넥션 관리</h1>
<p className="text-sm text-muted-foreground">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
<p className="text-muted-foreground text-sm">외부 데이터베이스 및 REST API 연결 정보를 관리합니다</p>
</div>
{/* 탭 */}
@ -255,7 +255,7 @@ export default function ExternalConnectionsPage() {
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
{/* 검색 */}
<div className="relative w-full sm:w-[300px]">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="연결명 또는 설명으로 검색..."
value={searchTerm}
@ -295,122 +295,119 @@ export default function ExternalConnectionsPage() {
{/* 추가 버튼 */}
<Button onClick={handleAddConnection} className="h-10 gap-2 text-sm font-medium">
<Plus className="h-4 w-4" />
새 연결 추가
<Plus className="h-4 w-4" />새 연결 추가
</Button>
</div>
{/* 연결 목록 */}
{loading ? (
<div className="flex h-64 items-center justify-center bg-card">
<div className="text-sm text-muted-foreground">로딩 중...</div>
<div className="bg-card flex h-64 items-center justify-center">
<div className="text-muted-foreground text-sm">로딩 중...</div>
</div>
) : connections.length === 0 ? (
<div className="flex h-64 flex-col items-center justify-center bg-card">
<div className="bg-card flex h-64 flex-col items-center justify-center">
<div className="flex flex-col items-center gap-2 text-center">
<p className="text-sm text-muted-foreground">등록된 연결이 없습니다</p>
<p className="text-muted-foreground text-sm">등록된 연결이 없습니다</p>
</div>
</div>
) : (
<div className="bg-card">
<Table>
<TableHeader>
<TableRow className="bg-background">
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">회사</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">DB 타입</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">호스트:포트</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">데이터베이스</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">사용자</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결 테스트</TableHead>
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
<TableHeader>
<TableRow className="bg-background">
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">회사</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">DB 타입</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">호스트:포트</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">데이터베이스</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">사용자</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결 테스트</TableHead>
<TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{connections.map((connection) => (
<TableRow key={connection.id} className="bg-background hover:bg-muted/50 transition-colors">
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="font-medium">{connection.connection_name}</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{(connection as any).company_name || connection.company_code}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="outline">{DB_TYPE_LABELS[connection.db_type] || connection.db_type}</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
{connection.host}:{connection.port}
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.database_name}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.username}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
{connection.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleTestConnection(connection)}
disabled={testingConnections.has(connection.id!)}
className="h-9 text-sm"
>
{testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
</Button>
{testResults.has(connection.id!) && (
<Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
{testResults.get(connection.id!) ? "성공" : "실패"}
</Badge>
)}
</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-right">
<div className="flex justify-end gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => {
console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
setSelectedConnection(connection);
setSqlModalOpen(true);
}}
className="h-8 w-8"
title="SQL 쿼리 실행"
>
<Terminal className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleEditConnection(connection)}
className="h-8 w-8"
>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteConnection(connection)}
className="text-destructive hover:bg-destructive/10 h-8 w-8"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{connections.map((connection) => (
<TableRow key={connection.id} className="bg-background transition-colors hover:bg-muted/50">
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="font-medium">{connection.connection_name}</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{(connection as any).company_name || connection.company_code}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="outline">
{DB_TYPE_LABELS[connection.db_type] || connection.db_type}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
{connection.host}:{connection.port}
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.database_name}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.username}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
{connection.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleTestConnection(connection)}
disabled={testingConnections.has(connection.id!)}
className="h-9 text-sm"
>
{testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
</Button>
{testResults.has(connection.id!) && (
<Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
{testResults.get(connection.id!) ? "성공" : "실패"}
</Badge>
)}
</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-right">
<div className="flex justify-end gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => {
console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
setSelectedConnection(connection);
setSqlModalOpen(true);
}}
className="h-8 w-8"
title="SQL 쿼리 실행"
>
<Terminal className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleEditConnection(connection)}
className="h-8 w-8"
>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteConnection(connection)}
className="h-8 w-8 text-destructive hover:bg-destructive/10"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
))}
</TableBody>
</Table>
</div>
)}
{/* 연결 설정 모달 */}
@ -431,8 +428,7 @@ export default function ExternalConnectionsPage() {
<AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
<AlertDialogDescription className="text-xs sm:text-sm">
"{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
<br />
이 작업은 되돌릴 수 없습니다.
<br />이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:gap-0">
@ -444,7 +440,7 @@ export default function ExternalConnectionsPage() {
</AlertDialogCancel>
<AlertDialogAction
onClick={confirmDeleteConnection}
className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
className="bg-destructive hover:bg-destructive/90 h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
삭제
</AlertDialogAction>

120
frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
View File

@ -65,7 +65,7 @@ export default function FlowManagementPage() {
const [restApiConnections, setRestApiConnections] = useState<ExternalRestApiConnection[]>([]);
const [restApiEndpoint, setRestApiEndpoint] = useState("");
const [restApiJsonPath, setRestApiJsonPath] = useState("response");
// 다중 REST API 선택 상태
interface RestApiConfig {
connectionId: number;
@ -190,7 +190,7 @@ export default function FlowManagementPage() {
// 외부 DB인 경우
if (selectedDbSource.startsWith("external_db_")) {
const connectionId = selectedDbSource.replace("external_db_", "");
const loadExternalTables = async () => {
try {
setLoadingExternalTables(true);
@ -232,11 +232,11 @@ export default function FlowManagementPage() {
// 다중 외부 DB 추가
const addExternalDbConfig = async (connectionId: number) => {
const connection = externalConnections.find(c => c.id === connectionId);
const connection = externalConnections.find((c) => c.id === connectionId);
if (!connection) return;
// 이미 추가된 경우 스킵
if (selectedExternalDbs.some(db => db.connectionId === connectionId)) {
if (selectedExternalDbs.some((db) => db.connectionId === connectionId)) {
toast({
title: "이미 추가됨",
description: "해당 외부 DB가 이미 추가되어 있습니다.",
@ -244,7 +244,7 @@ export default function FlowManagementPage() {
});
return;
}
// 해당 DB의 테이블 목록 로드
try {
const data = await ExternalDbConnectionAPI.getTables(connectionId);
@ -255,12 +255,12 @@ export default function FlowManagementPage() {
typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
)
.filter(Boolean);
setMultiDbTableLists(prev => ({ ...prev, [connectionId]: tableNames }));
setMultiDbTableLists((prev) => ({ ...prev, [connectionId]: tableNames }));
}
} catch (error) {
console.error("외부 DB 테이블 목록 조회 오류:", error);
}
const newConfig: ExternalDbConfig = {
connectionId,
connectionName: connection.connection_name,
@ -268,29 +268,29 @@ export default function FlowManagementPage() {
tableName: "",
alias: `db${selectedExternalDbs.length + 1}_`, // 자동 별칭 생성
};
setSelectedExternalDbs([...selectedExternalDbs, newConfig]);
};
// 다중 외부 DB 삭제
const removeExternalDbConfig = (connectionId: number) => {
setSelectedExternalDbs(selectedExternalDbs.filter(db => db.connectionId !== connectionId));
setSelectedExternalDbs(selectedExternalDbs.filter((db) => db.connectionId !== connectionId));
};
// 다중 외부 DB 설정 업데이트
const updateExternalDbConfig = (connectionId: number, field: keyof ExternalDbConfig, value: string) => {
setSelectedExternalDbs(selectedExternalDbs.map(db =>
db.connectionId === connectionId ? { ...db, [field]: value } : db
));
setSelectedExternalDbs(
selectedExternalDbs.map((db) => (db.connectionId === connectionId ? { ...db, [field]: value } : db)),
);
};
// 다중 REST API 추가
const addRestApiConfig = (connectionId: number) => {
const connection = restApiConnections.find(c => c.id === connectionId);
const connection = restApiConnections.find((c) => c.id === connectionId);
if (!connection) return;
// 이미 추가된 경우 스킵
if (selectedRestApis.some(api => api.connectionId === connectionId)) {
if (selectedRestApis.some((api) => api.connectionId === connectionId)) {
toast({
title: "이미 추가됨",
description: "해당 REST API가 이미 추가되어 있습니다.",
@ -298,7 +298,7 @@ export default function FlowManagementPage() {
});
return;
}
// 연결 테이블의 기본값 사용
const newConfig: RestApiConfig = {
connectionId,
@ -307,20 +307,20 @@ export default function FlowManagementPage() {
jsonPath: "response", // 기본값
alias: `api${selectedRestApis.length + 1}_`, // 자동 별칭 생성
};
setSelectedRestApis([...selectedRestApis, newConfig]);
};
// 다중 REST API 삭제
const removeRestApiConfig = (connectionId: number) => {
setSelectedRestApis(selectedRestApis.filter(api => api.connectionId !== connectionId));
setSelectedRestApis(selectedRestApis.filter((api) => api.connectionId !== connectionId));
};
// 다중 REST API 설정 업데이트
const updateRestApiConfig = (connectionId: number, field: keyof RestApiConfig, value: string) => {
setSelectedRestApis(selectedRestApis.map(api =>
api.connectionId === connectionId ? { ...api, [field]: value } : api
));
setSelectedRestApis(
selectedRestApis.map((api) => (api.connectionId === connectionId ? { ...api, [field]: value } : api)),
);
};
// 플로우 생성
@ -330,12 +330,17 @@ export default function FlowManagementPage() {
// REST API 또는 다중 선택인 경우 테이블 이름 검증 스킵
const isRestApi = selectedDbSource.startsWith("restapi_") || isMultiRestApi;
const isMultiMode = isMultiRestApi || isMultiExternalDb;
if (!formData.name || (!isRestApi && !isMultiMode && !formData.tableName)) {
console.log("❌ Validation failed:", { name: formData.name, tableName: formData.tableName, isRestApi, isMultiMode });
console.log("❌ Validation failed:", {
name: formData.name,
tableName: formData.tableName,
isRestApi,
isMultiMode,
});
toast({
title: "입력 오류",
description: (isRestApi || isMultiMode) ? "플로우 이름은 필수입니다." : "플로우 이름과 테이블 이름은 필수입니다.",
description: isRestApi || isMultiMode ? "플로우 이름은 필수입니다." : "플로우 이름과 테이블 이름은 필수입니다.",
variant: "destructive",
});
return;
@ -351,9 +356,9 @@ export default function FlowManagementPage() {
});
return;
}
// 각 API의 엔드포인트 검증
const missingEndpoint = selectedRestApis.find(api => !api.endpoint);
const missingEndpoint = selectedRestApis.find((api) => !api.endpoint);
if (missingEndpoint) {
toast({
title: "입력 오류",
@ -372,9 +377,9 @@ export default function FlowManagementPage() {
});
return;
}
// 각 DB의 테이블 선택 검증
const missingTable = selectedExternalDbs.find(db => !db.tableName);
const missingTable = selectedExternalDbs.find((db) => !db.tableName);
if (missingTable) {
toast({
title: "입력 오류",
@ -428,14 +433,14 @@ export default function FlowManagementPage() {
requestData.restApiEndpoint = selectedRestApis[0]?.endpoint;
requestData.restApiJsonPath = selectedRestApis[0]?.jsonPath || "response";
// 가상 테이블명: 모든 연결 ID를 조합
requestData.tableName = `_multi_restapi_${selectedRestApis.map(a => a.connectionId).join("_")}`;
requestData.tableName = `_multi_restapi_${selectedRestApis.map((a) => a.connectionId).join("_")}`;
} else if (dbSourceType === "multi_external_db") {
// 다중 외부 DB인 경우
requestData.externalDbConnections = selectedExternalDbs;
// 첫 번째 DB의 ID를 기본으로 사용
requestData.dbConnectionId = selectedExternalDbs[0]?.connectionId;
// 가상 테이블명: 모든 연결 ID와 테이블명 조합
requestData.tableName = `_multi_external_db_${selectedExternalDbs.map(db => `${db.connectionId}_${db.tableName}`).join("_")}`;
requestData.tableName = `_multi_external_db_${selectedExternalDbs.map((db) => `${db.connectionId}_${db.tableName}`).join("_")}`;
} else if (dbSourceType === "restapi") {
// 단일 REST API인 경우
requestData.restApiConnectionId = restApiConnectionId;
@ -697,7 +702,7 @@ export default function FlowManagementPage() {
<SelectContent>
{/* 내부 DB */}
<SelectItem value="internal">내부 데이터베이스</SelectItem>
{/* 외부 DB 연결 */}
{externalConnections.length > 0 && (
<>
@ -711,7 +716,7 @@ export default function FlowManagementPage() {
))}
</>
)}
{/* REST API 연결 */}
{restApiConnections.length > 0 && (
<>
@ -733,14 +738,10 @@ export default function FlowManagementPage() {
-- 다중 연결 (데이터 병합) --
</SelectItem>
{externalConnections.length > 0 && (
<SelectItem value="multi_external_db">
다중 외부 DB (데이터 병합)
</SelectItem>
<SelectItem value="multi_external_db">다중 외부 DB (데이터 병합)</SelectItem>
)}
{restApiConnections.length > 0 && (
<SelectItem value="multi_restapi">
다중 REST API (데이터 병합)
</SelectItem>
<SelectItem value="multi_restapi">다중 REST API (데이터 병합)</SelectItem>
)}
</>
)}
@ -769,7 +770,7 @@ export default function FlowManagementPage() {
</SelectTrigger>
<SelectContent>
{restApiConnections
.filter(conn => !selectedRestApis.some(api => api.connectionId === conn.id))
.filter((conn) => !selectedRestApis.some((api) => api.connectionId === conn.id))
.map((conn) => (
<SelectItem key={conn.id} value={String(conn.id)}>
{conn.connection_name}
@ -778,22 +779,21 @@ export default function FlowManagementPage() {
</SelectContent>
</Select>
</div>
{selectedRestApis.length === 0 ? (
<div className="rounded-md border border-dashed p-4 text-center">
<p className="text-muted-foreground text-xs sm:text-sm">
위에서 REST API를 추가해주세요
</p>
<p className="text-muted-foreground text-xs sm:text-sm">위에서 REST API를 추가해주세요</p>
</div>
) : (
<div className="space-y-2">
{selectedRestApis.map((api) => (
<div key={api.connectionId} className="flex items-center justify-between rounded-md border bg-muted/30 px-3 py-2">
<div
key={api.connectionId}
className="bg-muted/30 flex items-center justify-between rounded-md border px-3 py-2"
>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">{api.connectionName}</span>
<span className="text-muted-foreground text-xs">
({api.endpoint || "기본 엔드포인트"})
</span>
<span className="text-muted-foreground text-xs">({api.endpoint || "기본 엔드포인트"})</span>
</div>
<Button
variant="ghost"
@ -831,7 +831,7 @@ export default function FlowManagementPage() {
</SelectTrigger>
<SelectContent>
{externalConnections
.filter(conn => !selectedExternalDbs.some(db => db.connectionId === conn.id))
.filter((conn) => !selectedExternalDbs.some((db) => db.connectionId === conn.id))
.map((conn) => (
<SelectItem key={conn.id} value={String(conn.id)}>
{conn.connection_name} ({conn.db_type?.toUpperCase()})
@ -840,17 +840,15 @@ export default function FlowManagementPage() {
</SelectContent>
</Select>
</div>
{selectedExternalDbs.length === 0 ? (
<div className="rounded-md border border-dashed p-4 text-center">
<p className="text-muted-foreground text-xs sm:text-sm">
위에서 외부 DB를 추가해주세요
</p>
<p className="text-muted-foreground text-xs sm:text-sm">위에서 외부 DB를 추가해주세요</p>
</div>
) : (
<div className="space-y-3">
{selectedExternalDbs.map((db) => (
<div key={db.connectionId} className="rounded-md border p-3 space-y-2">
<div key={db.connectionId} className="space-y-2 rounded-md border p-3">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">
{db.connectionName} ({db.dbType?.toUpperCase()})
@ -965,7 +963,11 @@ export default function FlowManagementPage() {
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
<PopoverContent
className="p-0"
style={{ width: "var(--radix-popover-trigger-width)" }}
align="start"
>
<Command>
<CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
<CommandList>

75
frontend/app/(main)/admin/automaticMng/mail/accounts/page.tsx
View File

@ -28,7 +28,7 @@ export default function MailAccountsPage() {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedAccount, setSelectedAccount] = useState<MailAccount | null>(null);
const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
const [modalMode, setModalMode] = useState<"create" | "edit">("create");
const loadAccounts = async () => {
setLoading(true);
@ -55,13 +55,13 @@ export default function MailAccountsPage() {
}, []);
const handleOpenCreateModal = () => {
setModalMode('create');
setModalMode("create");
setSelectedAccount(null);
setIsModalOpen(true);
};
const handleOpenEditModal = (account: MailAccount) => {
setModalMode('edit');
setModalMode("edit");
setSelectedAccount(account);
setIsModalOpen(true);
};
@ -73,9 +73,9 @@ export default function MailAccountsPage() {
const handleSaveAccount = async (data: CreateMailAccountDto | UpdateMailAccountDto) => {
try {
if (modalMode === 'create') {
if (modalMode === "create") {
await createMailAccount(data as CreateMailAccountDto);
} else if (modalMode === 'edit' && selectedAccount) {
} else if (modalMode === "edit" && selectedAccount) {
await updateMailAccount(selectedAccount.id, data as UpdateMailAccountDto);
}
await loadAccounts();
@ -91,21 +91,21 @@ export default function MailAccountsPage() {
try {
await deleteMailAccount(selectedAccount.id);
await loadAccounts();
alert('계정이 삭제되었습니다.');
alert("계정이 삭제되었습니다.");
} catch (error) {
// console.error('계정 삭제 실패:', error);
alert('계정 삭제에 실패했습니다.');
alert("계정 삭제에 실패했습니다.");
}
};
const handleToggleStatus = async (account: MailAccount) => {
try {
const newStatus = account.status === 'active' ? 'inactive' : 'active';
const newStatus = account.status === "active" ? "inactive" : "active";
await updateMailAccount(account.id, { status: newStatus });
await loadAccounts();
} catch (error) {
// console.error('상태 변경 실패:', error);
alert('상태 변경에 실패했습니다.');
alert("상태 변경에 실패했습니다.");
}
};
@ -113,61 +113,52 @@ export default function MailAccountsPage() {
try {
setLoading(true);
const result = await testMailAccountConnection(account.id);
if (result.success) {
alert(`✅ SMTP 연결 성공!\n\n${result.message || '정상적으로 연결되었습니다.'}`);
alert(`✅ SMTP 연결 성공!\n\n${result.message || "정상적으로 연결되었습니다."}`);
} else {
alert(`❌ SMTP 연결 실패\n\n${result.message || '연결에 실패했습니다.'}`);
alert(`❌ SMTP 연결 실패\n\n${result.message || "연결에 실패했습니다."}`);
}
} catch (error: any) {
// console.error('연결 테스트 실패:', error);
alert(`❌ SMTP 연결 테스트 실패\n\n${error.message || '알 수 없는 오류가 발생했습니다.'}`);
alert(`❌ SMTP 연결 테스트 실패\n\n${error.message || "알 수 없는 오류가 발생했습니다."}`);
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen bg-background">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="bg-background min-h-screen">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="bg-card rounded-lg border p-6 space-y-4">
<div className="bg-card space-y-4 rounded-lg border p-6">
{/* 브레드크럼브 */}
<nav className="flex items-center gap-2 text-sm">
<Link
<Link
href="/admin/mail/dashboard"
className="text-muted-foreground hover:text-foreground transition-colors"
>
메일 관리
</Link>
<ChevronRight className="w-4 h-4 text-muted-foreground" />
<ChevronRight className="text-muted-foreground h-4 w-4" />
<span className="text-foreground font-medium">계정 관리</span>
</nav>
<Separator />
{/* 제목 + 액션 버튼들 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-foreground">메일 계정 관리</h1>
<p className="mt-2 text-muted-foreground">SMTP 메일 계정을 관리하고 발송 통계를 확인합니다</p>
<h1 className="text-foreground text-3xl font-bold">메일 계정 관리</h1>
<p className="text-muted-foreground mt-2">SMTP 메일 계정을 관리하고 발송 통계를 확인합니다</p>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={loadAccounts}
disabled={loading}
>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
<Button variant="outline" size="sm" onClick={loadAccounts} disabled={loading}>
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
새로고침
</Button>
<Button
variant="default"
onClick={handleOpenCreateModal}
>
<Plus className="w-4 h-4 mr-2" />
새 계정 추가
<Button variant="default" onClick={handleOpenCreateModal}>
<Plus className="mr-2 h-4 w-4" />새 계정 추가
</Button>
</div>
</div>
@ -176,8 +167,8 @@ export default function MailAccountsPage() {
{/* 메인 컨텐츠 */}
{loading ? (
<Card>
<CardContent className="flex justify-center items-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="text-primary h-8 w-8 animate-spin" />
</CardContent>
</Card>
) : (
@ -197,16 +188,14 @@ export default function MailAccountsPage() {
{/* 안내 정보 */}
<Card className="bg-muted/50">
<CardHeader>
<CardTitle className="text-lg flex items-center">
<Mail className="w-5 h-5 mr-2 text-foreground" />
<CardTitle className="flex items-center text-lg">
<Mail className="text-foreground mr-2 h-5 w-5" />
메일 계정 관리
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-foreground mb-4">
💡 SMTP 계정을 등록하여 시스템에서 메일을 발송할 수 있어요!
</p>
<ul className="space-y-2 text-sm text-muted-foreground">
<p className="text-foreground mb-4">💡 SMTP 계정을 등록하여 시스템에서 메일을 발송할 수 있어요!</p>
<ul className="text-muted-foreground space-y-2 text-sm">
<li className="flex items-start">
<span className="text-foreground mr-2">✓</span>
<span>Gmail, Naver, 자체 SMTP 서버 지원</span>

103
frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
View File

@ -6,34 +6,12 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Upload,
Send,
FileText,
Users,
AlertCircle,
CheckCircle2,
Loader2,
Download,
X,
} from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Upload, Send, FileText, Users, AlertCircle, CheckCircle2, Loader2, Download, X } from "lucide-react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useToast } from "@/hooks/use-toast";
import {
MailAccount,
MailTemplate,
getMailAccounts,
getMailTemplates,
sendBulkMail,
} from "@/lib/api/mail";
import { MailAccount, MailTemplate, getMailAccounts, getMailTemplates, sendBulkMail } from "@/lib/api/mail";
interface RecipientData {
email: string;
@ -65,7 +43,7 @@ export default function BulkSendPage() {
const loadAccounts = async () => {
try {
const data = await getMailAccounts();
setAccounts(data.filter((acc) => acc.status === 'active'));
setAccounts(data.filter((acc) => acc.status === "active"));
} catch (error: unknown) {
const err = error as Error;
toast({
@ -109,14 +87,14 @@ export default function BulkSendPage() {
try {
const text = await file.text();
const lines = text.split("\n").filter((line) => line.trim());
if (lines.length < 2) {
throw new Error("CSV 파일에 데이터가 없습니다.");
}
// 첫 줄은 헤더
const headers = lines[0].split(",").map((h) => h.trim());
if (!headers.includes("email")) {
throw new Error("CSV 파일에 'email' 컬럼이 필요합니다.");
}
@ -254,16 +232,16 @@ example2@example.com,김철수,XYZ회사`;
};
return (
<div className="min-h-screen bg-background">
<div className="bg-background min-h-screen">
<div className="mx-auto w-full space-y-6 px-6 py-8">
{/* 헤더 */}
<div className="flex items-center justify-between rounded-lg border bg-card p-8">
<div className="bg-card flex items-center justify-between rounded-lg border p-8">
<div className="flex items-center gap-4">
<div className="rounded-lg bg-primary/10 p-4">
<Users className="h-8 w-8 text-primary" />
<div className="bg-primary/10 rounded-lg p-4">
<Users className="text-primary h-8 w-8" />
</div>
<div>
<h1 className="mb-1 text-3xl font-bold text-foreground">대량 메일 발송</h1>
<h1 className="text-foreground mb-1 text-3xl font-bold">대량 메일 발송</h1>
<p className="text-muted-foreground">CSV 파일로 여러 수신자에게 메일을 발송하세요</p>
</div>
</div>
@ -301,7 +279,10 @@ example2@example.com,김철수,XYZ회사`;
<div>
<Label htmlFor="mode">발송 방식</Label>
<Select value={useTemplate ? "template" : "custom"} onValueChange={(v) => setUseTemplate(v === "template")}>
<Select
value={useTemplate ? "template" : "custom"}
onValueChange={(v) => setUseTemplate(v === "template")}
>
<SelectTrigger id="mode">
<SelectValue />
</SelectTrigger>
@ -366,31 +347,20 @@ example2@example.com,김철수,XYZ회사`;
<div>
<Label htmlFor="csv">CSV 파일</Label>
<div className="mt-2 flex gap-2">
<Input
id="csv"
type="file"
accept=".csv"
onChange={handleFileUpload}
disabled={loading}
/>
<Button
variant="outline"
size="icon"
onClick={downloadSampleCsv}
title="샘플 다운로드"
>
<Input id="csv" type="file" accept=".csv" onChange={handleFileUpload} disabled={loading} />
<Button variant="outline" size="icon" onClick={downloadSampleCsv} title="샘플 다운로드">
<Download className="h-4 w-4" />
</Button>
</div>
<p className="mt-2 text-xs text-muted-foreground">
<p className="text-muted-foreground mt-2 text-xs">
첫 번째 줄은 헤더(email, name, company 등)여야 합니다.
</p>
</div>
{csvFile && (
<div className="flex items-center justify-between rounded-md border bg-muted p-3">
<div className="bg-muted flex items-center justify-between rounded-md border p-3">
<div className="flex items-center gap-2">
<FileText className="h-4 w-4 text-muted-foreground" />
<FileText className="text-muted-foreground h-4 w-4" />
<span className="text-sm">{csvFile.name}</span>
</div>
<Button
@ -407,12 +377,12 @@ example2@example.com,김철수,XYZ회사`;
)}
{recipients.length > 0 && (
<div className="rounded-md border bg-muted p-4">
<div className="bg-muted rounded-md border p-4">
<div className="flex items-center gap-2 text-sm">
<CheckCircle2 className="h-4 w-4 text-green-600" />
<span className="font-medium">{recipients.length}명의 수신자</span>
</div>
<p className="mt-1 text-xs text-muted-foreground">
<p className="text-muted-foreground mt-1 text-xs">
변수: {Object.keys(recipients[0]?.variables || {}).join(", ")}
</p>
</div>
@ -437,9 +407,9 @@ example2@example.com,김철수,XYZ회사`;
{sendProgress.sent} / {sendProgress.total}
</span>
</div>
<div className="h-2 overflow-hidden rounded-full bg-muted">
<div className="bg-muted h-2 overflow-hidden rounded-full">
<div
className="h-full bg-primary transition-all duration-300"
className="bg-primary h-full transition-all duration-300"
style={{
width: `${(sendProgress.sent / sendProgress.total) * 100}%`,
}}
@ -448,12 +418,7 @@ example2@example.com,김철수,XYZ회사`;
</div>
)}
<Button
onClick={handleSend}
disabled={sending || recipients.length === 0}
className="w-full"
size="lg"
>
<Button onClick={handleSend} disabled={sending || recipients.length === 0} className="w-full" size="lg">
{sending ? (
<>
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
@ -467,10 +432,10 @@ example2@example.com,김철수,XYZ회사`;
)}
</Button>
<div className="rounded-md border bg-muted p-4">
<div className="bg-muted rounded-md border p-4">
<div className="flex items-start gap-2">
<AlertCircle className="mt-0.5 h-4 w-4 text-muted-foreground" />
<div className="text-xs text-muted-foreground">
<AlertCircle className="text-muted-foreground mt-0.5 h-4 w-4" />
<div className="text-muted-foreground text-xs">
<p className="font-medium">주의사항</p>
<ul className="mt-1 list-inside list-disc space-y-1">
<li>발송 속도는 계정 설정에 따라 제한됩니다</li>
@ -492,12 +457,9 @@ example2@example.com,김철수,XYZ회사`;
<CardContent>
<div className="max-h-96 space-y-2 overflow-y-auto">
{recipients.slice(0, 10).map((recipient, index) => (
<div
key={index}
className="rounded-md border bg-muted p-3 text-sm"
>
<div key={index} className="bg-muted rounded-md border p-3 text-sm">
<div className="font-medium">{recipient.email}</div>
<div className="mt-1 text-xs text-muted-foreground">
<div className="text-muted-foreground mt-1 text-xs">
{Object.entries(recipient.variables).map(([key, value]) => (
<span key={key} className="mr-2">
{key}: {value}
@ -507,9 +469,7 @@ example2@example.com,김철수,XYZ회사`;
</div>
))}
{recipients.length > 10 && (
<p className="text-center text-xs text-muted-foreground">
외 {recipients.length - 10}명
</p>
<p className="text-muted-foreground text-center text-xs">외 {recipients.length - 10}명</p>
)}
</div>
</CardContent>
@ -521,4 +481,3 @@ example2@example.com,김철수,XYZ회사`;
</div>
);
}

133
frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
View File

@ -4,18 +4,18 @@ import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
Mail,
Send,
Inbox,
FileText,
RefreshCw,
import {
Mail,
Send,
Inbox,
FileText,
RefreshCw,
TrendingUp,
Users,
Calendar,
ArrowRight,
Trash2,
Edit
Edit,
} from "lucide-react";
import { getMailAccounts, getMailTemplates, getMailStatistics, getTodayReceivedCount } from "@/lib/api/mail";
import MailNotifications from "@/components/mail/MailNotifications";
@ -45,17 +45,17 @@ export default function MailDashboardPage() {
try {
const accounts = await getMailAccounts();
const templates = await getMailTemplates();
// 메일 통계 조회 (실패 시 기본값 사용)
let mailStats = {
todayCount: 0,
thisMonthCount: 0,
successRate: 0,
};
try {
const stats = await getMailStatistics();
if (stats && typeof stats === 'object') {
if (stats && typeof stats === "object") {
mailStats = {
todayCount: stats.todayCount || 0,
thisMonthCount: stats.thisMonthCount || 0,
@ -194,56 +194,47 @@ export default function MailDashboardPage() {
];
return (
<div className="min-h-screen bg-background">
<div className="w-full px-3 py-3 space-y-3">
<div className="bg-background min-h-screen">
<div className="w-full space-y-3 px-3 py-3">
{/* 페이지 제목 */}
<div className="flex items-center justify-between bg-card rounded-lg border p-8">
<div className="bg-card flex items-center justify-between rounded-lg border p-8">
<div className="flex items-center gap-4">
<div className="p-4 bg-primary/10 rounded-lg">
<Mail className="w-8 h-8 text-primary" />
<div className="bg-primary/10 rounded-lg p-4">
<Mail className="text-primary h-8 w-8" />
</div>
<div>
<h1 className="text-3xl font-bold text-foreground mb-1">메일 관리 대시보드</h1>
<h1 className="text-foreground mb-1 text-3xl font-bold">메일 관리 대시보드</h1>
<p className="text-muted-foreground">메일 시스템의 전체 현황을 한눈에 확인하세요</p>
</div>
</div>
<div className="flex gap-3">
<MailNotifications />
<Button
variant="outline"
size="lg"
onClick={loadStats}
disabled={loading}
>
<RefreshCw className={`w-5 h-5 mr-2 ${loading ? 'animate-spin' : ''}`} />
<Button variant="outline" size="lg" onClick={loadStats} disabled={loading}>
<RefreshCw className={`mr-2 h-5 w-5 ${loading ? "animate-spin" : ""}`} />
새로고침
</Button>
</div>
</div>
{/* 통계 카드 */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
{statCards.map((stat, index) => (
<Link key={index} href={stat.href}>
<Card className="hover:shadow-md transition-all hover:scale-105 cursor-pointer">
<Card className="cursor-pointer transition-all hover:scale-105 hover:shadow-md">
<CardContent className="p-6">
<div className="flex items-start justify-between mb-4">
<div className="mb-4 flex items-start justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-muted-foreground mb-3">
{stat.title}
</p>
<p className="text-4xl font-bold text-foreground">
{stat.value}
</p>
<p className="text-muted-foreground mb-3 text-sm font-medium">{stat.title}</p>
<p className="text-foreground text-4xl font-bold">{stat.value}</p>
</div>
<div className="p-4 bg-muted rounded-lg">
<stat.icon className="w-7 h-7 text-muted-foreground" />
<div className="bg-muted rounded-lg p-4">
<stat.icon className="text-muted-foreground h-7 w-7" />
</div>
</div>
{/* 진행 바 */}
<div className="h-2 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-primary transition-all duration-1000"
<div className="bg-muted h-2 overflow-hidden rounded-full">
<div
className="bg-primary h-full transition-all duration-1000"
style={{ width: `${Math.min((stat.value / 10) * 100, 100)}%` }}
></div>
</div>
@ -254,25 +245,25 @@ export default function MailDashboardPage() {
</div>
{/* 이번 달 통계 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
<Card>
<CardHeader className="border-b">
<CardTitle className="text-lg flex items-center">
<div className="p-2 bg-muted rounded-lg mr-3">
<Calendar className="w-5 h-5 text-foreground" />
<CardTitle className="flex items-center text-lg">
<div className="bg-muted mr-3 rounded-lg p-2">
<Calendar className="text-foreground h-5 w-5" />
</div>
<span>이번 달 발송 통계</span>
</CardTitle>
</CardHeader>
<CardContent className="p-6">
<div className="space-y-4">
<div className="flex items-center justify-between p-4 bg-muted rounded-lg">
<span className="text-sm font-medium text-muted-foreground">총 발송 건수</span>
<span className="text-2xl font-bold text-foreground">{stats.sentThisMonth} 건</span>
<div className="bg-muted flex items-center justify-between rounded-lg p-4">
<span className="text-muted-foreground text-sm font-medium">총 발송 건수</span>
<span className="text-foreground text-2xl font-bold">{stats.sentThisMonth} 건</span>
</div>
<div className="flex items-center justify-between p-4 bg-muted rounded-lg">
<span className="text-sm font-medium text-muted-foreground">성공률</span>
<span className="text-2xl font-bold text-foreground">{stats.successRate}%</span>
<div className="bg-muted flex items-center justify-between rounded-lg p-4">
<span className="text-muted-foreground text-sm font-medium">성공률</span>
<span className="text-foreground text-2xl font-bold">{stats.successRate}%</span>
</div>
{/* 전월 대비 통계는 현재 불필요하여 주석처리
<div className="flex items-center justify-between pt-3 border-t">
@ -289,35 +280,35 @@ export default function MailDashboardPage() {
<Card>
<CardHeader className="border-b">
<CardTitle className="text-lg flex items-center">
<div className="p-2 bg-muted rounded-lg mr-3">
<Mail className="w-5 h-5 text-foreground" />
<CardTitle className="flex items-center text-lg">
<div className="bg-muted mr-3 rounded-lg p-2">
<Mail className="text-foreground h-5 w-5" />
</div>
<span>시스템 상태</span>
</CardTitle>
</CardHeader>
<CardContent className="p-6">
<div className="space-y-4">
<div className="flex items-center justify-between p-4 bg-muted rounded-lg">
<div className="bg-muted flex items-center justify-between rounded-lg p-4">
<div className="flex items-center gap-3">
<div className="w-3 h-3 bg-primary rounded-full animate-pulse"></div>
<span className="text-sm font-medium text-muted-foreground">메일 서버</span>
<div className="bg-primary h-3 w-3 animate-pulse rounded-full"></div>
<span className="text-muted-foreground text-sm font-medium">메일 서버</span>
</div>
<span className="text-sm font-bold text-foreground">정상 작동</span>
<span className="text-foreground text-sm font-bold">정상 작동</span>
</div>
<div className="flex items-center justify-between p-4 bg-muted rounded-lg">
<div className="bg-muted flex items-center justify-between rounded-lg p-4">
<div className="flex items-center gap-3">
<div className="w-3 h-3 bg-primary rounded-full"></div>
<span className="text-sm font-medium text-muted-foreground">활성 계정</span>
<div className="bg-primary h-3 w-3 rounded-full"></div>
<span className="text-muted-foreground text-sm font-medium">활성 계정</span>
</div>
<span className="text-lg font-bold text-foreground">{stats.totalAccounts} 개</span>
<span className="text-foreground text-lg font-bold">{stats.totalAccounts} 개</span>
</div>
<div className="flex items-center justify-between p-4 bg-muted rounded-lg">
<div className="bg-muted flex items-center justify-between rounded-lg p-4">
<div className="flex items-center gap-3">
<div className="w-3 h-3 bg-primary rounded-full"></div>
<span className="text-sm font-medium text-muted-foreground">사용 가능 템플릿</span>
<div className="bg-primary h-3 w-3 rounded-full"></div>
<span className="text-muted-foreground text-sm font-medium">사용 가능 템플릿</span>
</div>
<span className="text-lg font-bold text-foreground">{stats.totalTemplates} 개</span>
<span className="text-foreground text-lg font-bold">{stats.totalTemplates} 개</span>
</div>
</div>
</CardContent>
@ -330,21 +321,21 @@ export default function MailDashboardPage() {
<CardTitle className="text-lg">빠른 액세스</CardTitle>
</CardHeader>
<CardContent className="p-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{quickLinks.map((link, index) => (
<a
<a
key={index}
href={link.href}
className="group flex items-center gap-4 p-5 rounded-lg border hover:border-primary/50 hover:shadow-md transition-all bg-card hover:bg-muted/50"
className="group hover:border-primary/50 bg-card hover:bg-muted/50 flex items-center gap-4 rounded-lg border p-5 transition-all hover:shadow-md"
>
<div className="p-3 bg-muted rounded-lg group-hover:scale-105 transition-transform">
<link.icon className="w-6 h-6 text-muted-foreground" />
<div className="bg-muted rounded-lg p-3 transition-transform group-hover:scale-105">
<link.icon className="text-muted-foreground h-6 w-6" />
</div>
<div className="flex-1 min-w-0">
<p className="font-semibold text-foreground text-base mb-1">{link.title}</p>
<p className="text-sm text-muted-foreground truncate">{link.description}</p>
<div className="min-w-0 flex-1">
<p className="text-foreground mb-1 text-base font-semibold">{link.title}</p>
<p className="text-muted-foreground truncate text-sm">{link.description}</p>
</div>
<ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-foreground group-hover:translate-x-1 transition-all" />
<ArrowRight className="text-muted-foreground group-hover:text-foreground h-5 w-5 transition-all group-hover:translate-x-1" />
</a>
))}
</div>

44
frontend/app/(main)/admin/automaticMng/mail/drafts/page.tsx
View File

@ -110,48 +110,39 @@ export default function DraftsPage() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
<div className="flex min-h-[400px] items-center justify-center">
<Loader2 className="text-primary h-8 w-8 animate-spin" />
</div>
);
}
return (
<div className="p-3 space-y-3">
<div className="space-y-3 p-3">
<div>
<h1 className="text-3xl font-bold text-foreground">임시보관함</h1>
<p className="mt-2 text-muted-foreground">작성 중인 메일이 자동으로 저장됩니다</p>
<h1 className="text-foreground text-3xl font-bold">임시보관함</h1>
<p className="text-muted-foreground mt-2">작성 중인 메일이 자동으로 저장됩니다</p>
</div>
{drafts.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<Mail className="w-12 h-12 text-muted-foreground mb-4" />
<Mail className="text-muted-foreground mb-4 h-12 w-12" />
<p className="text-muted-foreground">임시 저장된 메일이 없습니다</p>
</CardContent>
</Card>
) : (
<div className="grid gap-3">
{drafts.map((draft) => (
<Card key={draft.id} className="hover:shadow-md transition-shadow">
<Card key={draft.id} className="transition-shadow hover:shadow-md">
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<CardTitle className="text-lg truncate">
{draft.subject || "(제목 없음)"}
</CardTitle>
<CardDescription className="mt-1">
받는 사람: {draft.to.join(", ") || "(없음)"}
</CardDescription>
<div className="min-w-0 flex-1">
<CardTitle className="truncate text-lg">{draft.subject || "(제목 없음)"}</CardTitle>
<CardDescription className="mt-1">받는 사람: {draft.to.join(", ") || "(없음)"}</CardDescription>
</div>
<div className="flex items-center gap-2 ml-4">
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(draft)}
className="h-8"
>
<Edit className="w-4 h-4 mr-1" />
<div className="ml-4 flex items-center gap-2">
<Button variant="outline" size="sm" onClick={() => handleEdit(draft)} className="h-8">
<Edit className="mr-1 h-4 w-4" />
편집
</Button>
<Button
@ -162,10 +153,10 @@ export default function DraftsPage() {
className="h-8"
>
{deleting === draft.id ? (
<Loader2 className="w-4 h-4 animate-spin" />
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<Trash2 className="w-4 h-4 mr-1" />
<Trash2 className="mr-1 h-4 w-4" />
삭제
</>
)}
@ -174,7 +165,7 @@ export default function DraftsPage() {
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="flex items-center justify-between text-sm text-muted-foreground">
<div className="text-muted-foreground flex items-center justify-between text-sm">
<span>계정: {draft.accountName || draft.accountEmail}</span>
<span>
{draft.updatedAt
@ -184,7 +175,7 @@ export default function DraftsPage() {
</div>
{draft.htmlContent && (
<div
className="mt-2 text-sm text-muted-foreground line-clamp-2"
className="text-muted-foreground mt-2 line-clamp-2 text-sm"
dangerouslySetInnerHTML={{
__html: draft.htmlContent.replace(/<[^>]*>/g, "").substring(0, 100),
}}
@ -198,4 +189,3 @@ export default function DraftsPage() {
</div>
);
}

428
frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
View File

@ -89,9 +89,9 @@ export default function MailReceivePage() {
// URL 파라미터에서 mailId 읽기 및 자동 선택
useEffect(() => {
const mailId = searchParams.get('mailId');
const accountId = searchParams.get('accountId');
const mailId = searchParams.get("mailId");
const accountId = searchParams.get("accountId");
if (mailId && accountId) {
// console.log('📧 URL에서 메일 ID 감지:', mailId, accountId);
setSelectedAccountId(accountId);
@ -103,7 +103,7 @@ export default function MailReceivePage() {
// 메일 목록 로드 후 URL에서 지정된 메일 자동 선택
useEffect(() => {
if (selectedMailId && mails.length > 0 && !selectedMailDetail) {
const mail = mails.find(m => m.id === selectedMailId);
const mail = mails.find((m) => m.id === selectedMailId);
if (mail) {
// console.log('🎯 URL에서 지정된 메일 자동 선택:', selectedMailId);
handleMailClick(mail);
@ -144,27 +144,23 @@ export default function MailReceivePage() {
setTestResult(null);
try {
const data = await getReceivedMails(selectedAccountId, 200); // 더 많이 가져오기
// 현재 로컬에서 읽음 처리한 메일들의 상태를 유지
const processedMails = data.map(mail => ({
const processedMails = data.map((mail) => ({
...mail,
isRead: mail.isRead
isRead: mail.isRead,
}));
setAllMails(processedMails); // 전체 메일 저장
// 페이지네이션 적용
applyPagination(processedMails);
// 알림 갱신 이벤트 발생 (새 메일이 있을 수 있음)
window.dispatchEvent(new CustomEvent('mail-received'));
window.dispatchEvent(new CustomEvent("mail-received"));
} catch (error) {
// console.error("메일 로드 실패:", error);
alert(
error instanceof Error
? error.message
: "메일을 불러오는데 실패했습니다."
);
alert(error instanceof Error ? error.message : "메일을 불러오는데 실패했습니다.");
setMails([]);
setAllMails([]);
} finally {
@ -199,10 +195,7 @@ export default function MailReceivePage() {
} catch (error) {
setTestResult({
success: false,
message:
error instanceof Error
? error.message
: "IMAP 연결 테스트 실패",
message: error instanceof Error ? error.message : "IMAP 연결 테스트 실패",
});
} finally {
setTesting(false);
@ -231,32 +224,28 @@ export default function MailReceivePage() {
const handleMailClick = async (mail: ReceivedMail) => {
setSelectedMailId(mail.id);
setLoadingDetail(true);
// 즉시 로컬 상태 업데이트 (UI 반응성 향상)
// console.log('📧 메일 클릭:', mail.id, '현재 읽음 상태:', mail.isRead);
setMails((prevMails) =>
prevMails.map((m) =>
m.id === mail.id ? { ...m, isRead: true } : m
)
);
setMails((prevMails) => prevMails.map((m) => (m.id === mail.id ? { ...m, isRead: true } : m)));
// 메일 상세 정보 로드
try {
// mail.id에서 accountId와 seqno 추출: "account-{timestamp}-{seqno}" 형식
const mailIdParts = mail.id.split('-');
const mailIdParts = mail.id.split("-");
const accountId = `${mailIdParts[0]}-${mailIdParts[1]}`; // "account-1759310844272"
const seqno = parseInt(mailIdParts[2], 10); // 13
// console.log('🔍 추출된 accountId:', accountId, 'seqno:', seqno, '원본 mailId:', mail.id);
const detail = await getMailDetail(accountId, seqno);
setSelectedMailDetail(detail);
// 읽음 처리
if (!mail.isRead) {
await markMailAsRead(accountId, seqno);
// console.log('✅ 읽음 처리 완료 - seqno:', seqno);
// 서버 상태 동기화 (백그라운드) - IMAP 서버 반영 대기
setTimeout(() => {
if (selectedAccountId) {
@ -273,45 +262,51 @@ export default function MailReceivePage() {
};
const handleDeleteMail = async () => {
if (!selectedMailId || !confirm("이 메일을 IMAP 서버에서 삭제하시겠습니까?\n(Gmail/Naver 휴지통으로 이동됩니다)\n\n⚠️ IMAP 연결에 시간이 걸릴 수 있습니다.")) return;
if (
!selectedMailId ||
!confirm(
"이 메일을 IMAP 서버에서 삭제하시겠습니까?\n(Gmail/Naver 휴지통으로 이동됩니다)\n\n⚠️ IMAP 연결에 시간이 걸릴 수 있습니다.",
)
)
return;
try {
setDeleting(true);
// mail.id에서 accountId와 seqno 추출: "account-{timestamp}-{seqno}" 형식
const mailIdParts = selectedMailId.split('-');
const mailIdParts = selectedMailId.split("-");
const accountId = `${mailIdParts[0]}-${mailIdParts[1]}`; // "account-1759310844272"
const seqno = parseInt(mailIdParts[2], 10); // 10
// console.log(`🗑️ 메일 삭제 시도: accountId=${accountId}, seqno=${seqno}`);
// IMAP 서버에서 메일 삭제 (타임아웃 40초)
const response = await apiClient.delete(`/mail/receive/${accountId}/${seqno}`, {
timeout: 40000, // 40초 타임아웃
});
if (response.data.success) {
// 메일 목록에서 제거
setMails(mails.filter((m) => m.id !== selectedMailId));
// 상세 패널 닫기
setSelectedMailId("");
setSelectedMailDetail(null);
alert("메일이 삭제되었습니다.");
// console.log("✅ 메일 삭제 완료");
}
} catch (error: any) {
// console.error("메일 삭제 실패:", error);
let errorMessage = "메일 삭제에 실패했습니다.";
if (error.code === 'ECONNABORTED' || error.message?.includes('timeout')) {
if (error.code === "ECONNABORTED" || error.message?.includes("timeout")) {
errorMessage = "IMAP 서버 연결 시간 초과\n네트워크 상태를 확인하거나 나중에 다시 시도해주세요.";
} else if (error.response?.data?.message) {
errorMessage = error.response.data.message;
}
alert(errorMessage);
} finally {
setDeleting(false);
@ -329,7 +324,7 @@ export default function MailReceivePage() {
(mail) =>
mail.subject.toLowerCase().includes(searchLower) ||
mail.from.toLowerCase().includes(searchLower) ||
mail.preview.toLowerCase().includes(searchLower)
mail.preview.toLowerCase().includes(searchLower),
);
}
@ -357,57 +352,44 @@ export default function MailReceivePage() {
}, [mails, searchTerm, filterStatus, sortBy]);
return (
<div className="min-h-screen bg-background">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="bg-background min-h-screen">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="bg-card rounded-lg border p-6 space-y-4">
<div className="bg-card space-y-4 rounded-lg border p-6">
{/* 브레드크럼브 */}
<nav className="flex items-center gap-2 text-sm">
<Link
<Link
href="/admin/mail/dashboard"
className="text-muted-foreground hover:text-foreground transition-colors"
>
메일 관리
</Link>
<ChevronRight className="w-4 h-4 text-muted-foreground" />
<ChevronRight className="text-muted-foreground h-4 w-4" />
<span className="text-foreground font-medium">메일 수신함</span>
</nav>
<Separator />
{/* 제목 + 액션 버튼들 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-foreground">메일 수신함</h1>
<p className="mt-2 text-muted-foreground">
IMAP으로 받은 메일을 확인합니다
</p>
<h1 className="text-foreground text-3xl font-bold">메일 수신함</h1>
<p className="text-muted-foreground mt-2">IMAP으로 받은 메일을 확인합니다</p>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={loadMails}
disabled={loading || !selectedAccountId}
>
<RefreshCw
className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`}
/>
새로고침
</Button>
<Button
variant="outline"
size="sm"
onClick={handleTestConnection}
disabled={testing || !selectedAccountId}
>
{testing ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
) : (
<CheckCircle className="w-4 h-4 mr-2" />
)}
연결 테스트
</Button>
<Button variant="outline" size="sm" onClick={loadMails} disabled={loading || !selectedAccountId}>
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
새로고침
</Button>
<Button
variant="outline"
size="sm"
onClick={handleTestConnection}
disabled={testing || !selectedAccountId}
>
{testing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <CheckCircle className="mr-2 h-4 w-4" />}
연결 테스트
</Button>
</div>
</div>
</div>
@ -416,13 +398,11 @@ export default function MailReceivePage() {
<Card className="">
<CardContent className="p-4">
<div className="flex items-center gap-4">
<label className="text-sm font-medium text-foreground whitespace-nowrap">
메일 계정:
</label>
<label className="text-foreground text-sm font-medium whitespace-nowrap">메일 계정:</label>
<select
value={selectedAccountId}
onChange={(e) => setSelectedAccountId(e.target.value)}
className="flex-1 px-4 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
className="flex-1 rounded-lg border px-4 py-2 focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
>
<option value="">계정 선택</option>
{accounts.map((account) => (
@ -436,17 +416,13 @@ export default function MailReceivePage() {
{/* 연결 테스트 결과 */}
{testResult && (
<div
className={`mt-4 p-3 rounded-lg flex items-center gap-2 ${
className={`mt-4 flex items-center gap-2 rounded-lg p-3 ${
testResult.success
? "bg-green-50 text-green-800 border border-green-200"
: "bg-red-50 text-red-800 border border-red-200"
? "border border-green-200 bg-green-50 text-green-800"
: "border border-red-200 bg-red-50 text-red-800"
}`}
>
{testResult.success ? (
<CheckCircle className="w-5 h-5" />
) : (
<AlertCircle className="w-5 h-5" />
)}
{testResult.success ? <CheckCircle className="h-5 w-5" /> : <AlertCircle className="h-5 w-5" />}
<span>{testResult.message}</span>
</div>
)}
@ -457,26 +433,26 @@ export default function MailReceivePage() {
{selectedAccountId && (
<Card className="">
<CardContent className="p-4">
<div className="flex flex-col md:flex-row gap-3">
<div className="flex flex-col gap-3 md:flex-row">
{/* 검색 */}
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<div className="relative flex-1">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="제목, 발신자, 내용으로 검색..."
className="w-full pl-10 pr-4 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
className="w-full rounded-lg border py-2 pr-4 pl-10 focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
/>
</div>
{/* 필터 */}
<div className="flex items-center gap-2">
<Filter className="w-4 h-4 text-muted-foreground" />
<Filter className="text-muted-foreground h-4 w-4" />
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="px-3 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
className="rounded-lg border px-3 py-2 focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
>
<option value="all">전체</option>
<option value="unread">읽지 않음</option>
@ -488,14 +464,14 @@ export default function MailReceivePage() {
{/* 정렬 */}
<div className="flex items-center gap-2">
{sortBy.includes("desc") ? (
<SortDesc className="w-4 h-4 text-muted-foreground" />
<SortDesc className="text-muted-foreground h-4 w-4" />
) : (
<SortAsc className="w-4 h-4 text-muted-foreground" />
<SortAsc className="text-muted-foreground h-4 w-4" />
)}
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="px-3 py-2 border border rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
className="rounded-lg border px-3 py-2 focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
>
<option value="date-desc">날짜 ↓ (최신순)</option>
<option value="date-asc">날짜 ↑ (오래된순)</option>
@ -507,7 +483,7 @@ export default function MailReceivePage() {
{/* 검색 결과 카운트 */}
{(searchTerm || filterStatus !== "all") && (
<div className="mt-3 text-sm text-muted-foreground">
<div className="text-muted-foreground mt-3 text-sm">
{filteredAndSortedMails.length}개의 메일이 검색되었습니다
{searchTerm && (
<span className="ml-2">
@ -521,37 +497,33 @@ export default function MailReceivePage() {
)}
{/* 네이버 메일 스타일 3-column 레이아웃 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{/* 왼쪽: 메일 목록 */}
<div className="lg:col-span-1">
{loading ? (
<Card className="">
<CardContent className="flex justify-center items-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-orange-500" />
<span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-8 w-8 animate-spin text-orange-500" />
<span className="text-muted-foreground ml-3">메일을 불러오는 중...</span>
</CardContent>
</Card>
) : filteredAndSortedMails.length === 0 ? (
<Card className="text-center py-16 bg-card ">
<Card className="bg-card py-16 text-center">
<CardContent className="pt-6">
<Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
<Mail className="mx-auto mb-4 h-16 w-16 text-gray-300" />
<p className="text-muted-foreground mb-4">
{!selectedAccountId
? "메일 계정을 선택하세요"
: searchTerm || filterStatus !== "all"
? "검색 결과가 없습니다"
: "받은 메일이 없습니다"}
? "검색 결과가 없습니다"
: "받은 메일이 없습니다"}
</p>
{selectedAccountId && (
<Button
onClick={handleTestConnection}
variant="outline"
disabled={testing}
>
<Button onClick={handleTestConnection} variant="outline" disabled={testing}>
{testing ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<CheckCircle className="w-4 h-4 mr-2" />
<CheckCircle className="mr-2 h-4 w-4" />
)}
IMAP 연결 테스트
</Button>
@ -560,61 +532,51 @@ export default function MailReceivePage() {
</Card>
) : (
<Card className="">
<CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
<CardHeader className="border-b bg-gradient-to-r from-slate-50 to-gray-50">
<CardTitle className="flex items-center gap-2">
<Inbox className="w-5 h-5 text-orange-500" />
<Inbox className="h-5 w-5 text-orange-500" />
받은 메일함 ({filteredAndSortedMails.length}/{mails.length}개)
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<div className="divide-y max-h-[calc(100vh-300px)] overflow-y-auto">
<div className="max-h-[calc(100vh-300px)] divide-y overflow-y-auto">
{filteredAndSortedMails.map((mail) => (
<div
key={mail.id}
onClick={() => handleMailClick(mail)}
className={`p-4 hover:bg-background transition-colors cursor-pointer ${
className={`hover:bg-background cursor-pointer p-4 transition-colors ${
!mail.isRead ? "bg-blue-50/30" : ""
} ${selectedMailId === mail.id ? "bg-accent border-l-4 border-l-primary" : ""}`}
} ${selectedMailId === mail.id ? "bg-accent border-l-primary border-l-4" : ""}`}
>
<div className="flex items-start gap-4">
{/* 읽음 표시 */}
<div className="flex-shrink-0 w-2 h-2 mt-2">
{!mail.isRead && (
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
)}
<div className="mt-2 h-2 w-2 flex-shrink-0">
{!mail.isRead && <div className="h-2 w-2 rounded-full bg-blue-500"></div>}
</div>
{/* 메일 내용 */}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1">
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center justify-between">
<span
className={`text-sm ${
mail.isRead
? "text-muted-foreground"
: "text-foreground font-semibold"
mail.isRead ? "text-muted-foreground" : "text-foreground font-semibold"
}`}
>
{mail.from}
</span>
<div className="flex items-center gap-2">
{mail.hasAttachments && (
<Paperclip className="w-4 h-4 text-gray-400" />
)}
<span className="text-xs text-muted-foreground">
{formatDate(mail.date)}
</span>
{mail.hasAttachments && <Paperclip className="h-4 w-4 text-gray-400" />}
<span className="text-muted-foreground text-xs">{formatDate(mail.date)}</span>
</div>
</div>
<h3
className={`text-sm mb-1 truncate ${
className={`mb-1 truncate text-sm ${
mail.isRead ? "text-foreground" : "text-foreground font-medium"
}`}
>
{mail.subject}
</h3>
<p className="text-xs text-muted-foreground line-clamp-2">
{mail.preview}
</p>
<p className="text-muted-foreground line-clamp-2 text-xs">{mail.preview}</p>
</div>
</div>
</div>
@ -624,13 +586,8 @@ export default function MailReceivePage() {
{/* 페이지네이션 */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-2 p-4 border-t">
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
>
<div className="flex items-center justify-center gap-2 border-t p-4">
<Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>
처음
</Button>
<Button
@ -641,7 +598,7 @@ export default function MailReceivePage() {
>
이전
</Button>
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
let pageNum;
@ -654,14 +611,14 @@ export default function MailReceivePage() {
} else {
pageNum = currentPage - 2 + i;
}
return (
<Button
key={pageNum}
variant={currentPage === pageNum ? "default" : "outline"}
size="sm"
onClick={() => setCurrentPage(pageNum)}
className="w-8 h-8 p-0"
className="h-8 w-8 p-0"
>
{pageNum}
</Button>
@ -709,7 +666,7 @@ export default function MailReceivePage() {
✕
</Button>
</div>
<div className="text-sm text-muted-foreground space-y-1 mt-2">
<div className="text-muted-foreground mt-2 space-y-1 text-sm">
<div className="flex items-center gap-2">
<span className="font-medium">보낸 사람:</span>
<span>{selectedMailDetail.from}</span>
@ -723,9 +680,9 @@ export default function MailReceivePage() {
<span>{new Date(selectedMailDetail.date).toLocaleString("ko-KR")}</span>
</div>
</div>
{/* 답장/전달/삭제 버튼 */}
<div className="flex gap-2 mt-4">
<div className="mt-4 flex gap-2">
<Button
variant="outline"
size="sm"
@ -733,38 +690,39 @@ export default function MailReceivePage() {
// HTML 태그 제거 함수 (강력한 버전)
const stripHtml = (html: string) => {
if (!html) return "";
// 1. DOMPurify로 먼저 정제
const cleanHtml = DOMPurify.sanitize(html, {
const cleanHtml = DOMPurify.sanitize(html, {
ALLOWED_TAGS: [], // 모든 태그 제거
KEEP_CONTENT: true // 내용만 유지
KEEP_CONTENT: true, // 내용만 유지
});
// 2. DOM으로 텍스트만 추출
const tmp = document.createElement("DIV");
tmp.innerHTML = cleanHtml;
let text = tmp.textContent || tmp.innerText || "";
// 3. CSS 스타일 제거 (p{...} 같은 패턴)
text = text.replace(/[a-z-]+\{[^}]*\}/gi, '');
text = text.replace(/[a-z-]+\{[^}]*\}/gi, "");
// 4. 연속된 공백 정리
text = text.replace(/\s+/g, ' ').trim();
text = text.replace(/\s+/g, " ").trim();
return text;
};
// console.log('📧 답장 데이터:', {
// htmlBody: selectedMailDetail.htmlBody,
// textBody: selectedMailDetail.textBody,
// });
// textBody 우선 사용 (순수 텍스트), 없으면 htmlBody에서 추출
const bodyText = selectedMailDetail.textBody
|| (selectedMailDetail.htmlBody ? stripHtml(selectedMailDetail.htmlBody) : "");
const bodyText =
selectedMailDetail.textBody ||
(selectedMailDetail.htmlBody ? stripHtml(selectedMailDetail.htmlBody) : "");
// console.log('📧 변환된 본문:', bodyText);
const replyData = {
originalFrom: selectedMailDetail.from,
originalSubject: selectedMailDetail.subject,
@ -772,11 +730,11 @@ export default function MailReceivePage() {
originalBody: bodyText,
};
router.push(
`/admin/mail/send?action=reply&data=${encodeURIComponent(JSON.stringify(replyData))}`
`/admin/mail/send?action=reply&data=${encodeURIComponent(JSON.stringify(replyData))}`,
);
}}
>
<Reply className="w-4 h-4 mr-1" />
<Reply className="mr-1 h-4 w-4" />
답장
</Button>
<Button
@ -786,38 +744,39 @@ export default function MailReceivePage() {
// HTML 태그 제거 함수 (강력한 버전)
const stripHtml = (html: string) => {
if (!html) return "";
// 1. DOMPurify로 먼저 정제
const cleanHtml = DOMPurify.sanitize(html, {
const cleanHtml = DOMPurify.sanitize(html, {
ALLOWED_TAGS: [], // 모든 태그 제거
KEEP_CONTENT: true // 내용만 유지
KEEP_CONTENT: true, // 내용만 유지
});
// 2. DOM으로 텍스트만 추출
const tmp = document.createElement("DIV");
tmp.innerHTML = cleanHtml;
let text = tmp.textContent || tmp.innerText || "";
// 3. CSS 스타일 제거 (p{...} 같은 패턴)
text = text.replace(/[a-z-]+\{[^}]*\}/gi, '');
text = text.replace(/[a-z-]+\{[^}]*\}/gi, "");
// 4. 연속된 공백 정리
text = text.replace(/\s+/g, ' ').trim();
text = text.replace(/\s+/g, " ").trim();
return text;
};
// console.log('📧 전달 데이터:', {
// htmlBody: selectedMailDetail.htmlBody,
// textBody: selectedMailDetail.textBody,
// });
// textBody 우선 사용 (순수 텍스트), 없으면 htmlBody에서 추출
const bodyText = selectedMailDetail.textBody
|| (selectedMailDetail.htmlBody ? stripHtml(selectedMailDetail.htmlBody) : "");
const bodyText =
selectedMailDetail.textBody ||
(selectedMailDetail.htmlBody ? stripHtml(selectedMailDetail.htmlBody) : "");
// console.log('📧 변환된 본문:', bodyText);
const forwardData = {
originalFrom: selectedMailDetail.from,
originalSubject: selectedMailDetail.subject,
@ -825,37 +784,32 @@ export default function MailReceivePage() {
originalBody: bodyText,
};
router.push(
`/admin/mail/send?action=forward&data=${encodeURIComponent(JSON.stringify(forwardData))}`
`/admin/mail/send?action=forward&data=${encodeURIComponent(JSON.stringify(forwardData))}`,
);
}}
>
<Forward className="w-4 h-4 mr-1" />
<Forward className="mr-1 h-4 w-4" />
전달
</Button>
<Button
variant="destructive"
size="sm"
onClick={handleDeleteMail}
disabled={deleting}
>
<Button variant="destructive" size="sm" onClick={handleDeleteMail} disabled={deleting}>
{deleting ? (
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4 mr-1" />
<Trash2 className="mr-1 h-4 w-4" />
)}
삭제
</Button>
</div>
</CardHeader>
<CardContent className="p-6 max-h-[calc(100vh-300px)] overflow-y-auto">
<CardContent className="max-h-[calc(100vh-300px)] overflow-y-auto p-6">
{/* 첨부파일 */}
{selectedMailDetail.attachments && selectedMailDetail.attachments.length > 0 && (
<div className="mb-4 p-3 bg-muted rounded-lg">
<p className="text-sm font-medium mb-2">첨부파일 ({selectedMailDetail.attachments.length}개)</p>
<div className="bg-muted mb-4 rounded-lg p-3">
<p className="mb-2 text-sm font-medium">첨부파일 ({selectedMailDetail.attachments.length}개)</p>
<div className="space-y-1">
{selectedMailDetail.attachments.map((att, index) => (
<div key={index} className="flex items-center gap-2 text-sm">
<Paperclip className="w-4 h-4" />
<Paperclip className="h-4 w-4" />
<span>{att.filename}</span>
<span className="text-muted-foreground">({(att.size / 1024).toFixed(1)} KB)</span>
</div>
@ -873,26 +827,22 @@ export default function MailReceivePage() {
}}
/>
) : (
<div className="whitespace-pre-wrap text-sm">
{selectedMailDetail.textBody}
</div>
<div className="text-sm whitespace-pre-wrap">{selectedMailDetail.textBody}</div>
)}
</CardContent>
</Card>
) : loadingDetail ? (
<Card className="sticky top-6">
<CardContent className="flex justify-center items-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-orange-500" />
<span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-8 w-8 animate-spin text-orange-500" />
<span className="text-muted-foreground ml-3">메일을 불러오는 중...</span>
</CardContent>
</Card>
) : (
<Card className="sticky top-6">
<CardContent className="flex flex-col justify-center items-center py-16 text-center">
<Mail className="w-16 h-16 mb-4 text-gray-300" />
<p className="text-muted-foreground">
메일을 선택하면 내용이 표시됩니다
</p>
<CardContent className="flex flex-col items-center justify-center py-16 text-center">
<Mail className="mb-4 h-16 w-16 text-gray-300" />
<p className="text-muted-foreground">메일을 선택하면 내용이 표시됩니다</p>
</CardContent>
</Card>
)}
@ -900,94 +850,92 @@ export default function MailReceivePage() {
</div>
{/* 안내 정보 */}
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 ">
<Card className="border-green-200 bg-gradient-to-r from-green-50 to-emerald-50">
<CardHeader>
<CardTitle className="text-lg flex items-center">
<CheckCircle className="w-5 h-5 mr-2 text-green-600" />
<CardTitle className="flex items-center text-lg">
<CheckCircle className="mr-2 h-5 w-5 text-green-600" />
메일 수신 기능 완성! 🎉
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-foreground mb-4">
✅ 구현 완료된 모든 기능:
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<p className="text-foreground mb-4">✅ 구현 완료된 모든 기능:</p>
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
<div>
<p className="font-medium text-gray-800 mb-2">📬 기본 기능</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<p className="mb-2 font-medium text-gray-800">📬 기본 기능</p>
<ul className="text-muted-foreground space-y-1 text-sm">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>IMAP 프로토콜 메일 수신</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>메일 목록 표시</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>읽음/안읽음 상태</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>첨부파일 유무 표시</span>
</li>
</ul>
</div>
<div>
<p className="font-medium text-gray-800 mb-2">📄 상세보기</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<p className="mb-2 font-medium text-gray-800">📄 상세보기</p>
<ul className="text-muted-foreground space-y-1 text-sm">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>HTML 본문 렌더링</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>텍스트 본문 보기</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>자동 읽음 처리</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>첨부파일 다운로드</span>
</li>
</ul>
</div>
<div>
<p className="font-medium text-gray-800 mb-2">🔍 고급 기능</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<p className="mb-2 font-medium text-gray-800">🔍 고급 기능</p>
<ul className="text-muted-foreground space-y-1 text-sm">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>통합 검색 (제목/발신자/내용)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>필터링 (읽음/첨부파일)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>정렬 (날짜/발신자)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>자동 새로고침 (30초)</span>
</li>
</ul>
</div>
<div>
<p className="font-medium text-gray-800 mb-2">🔒 보안</p>
<ul className="space-y-1 text-sm text-muted-foreground">
<p className="mb-2 font-medium text-gray-800">🔒 보안</p>
<ul className="text-muted-foreground space-y-1 text-sm">
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>XSS 방지 (DOMPurify)</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>비밀번호 암호화</span>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">✓</span>
<span className="mr-2 text-green-500">✓</span>
<span>안전한 파일명 생성</span>
</li>
</ul>

1508
frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
View File

File diff suppressed because it is too large Load Diff

245
frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
View File

@ -6,13 +6,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
Send,
Search,
@ -154,12 +148,12 @@ export default function SentMailPage() {
// console.log("📤 발신메일 로드 시작:", filters);
const response = await getSentMailList(filters);
// console.log("📤 발신메일 응답:", response);
let mailList = response.items || [];
// draft 제외 (발송된 메일만 표시)
mailList = mailList.filter((mail) => mail.status !== "draft");
// console.log("📤 발신메일 개수 (draft 제외):", mailList.length);
// 검색어 필터링 (클라이언트 사이드)
@ -169,7 +163,7 @@ export default function SentMailPage() {
(mail) =>
mail.subject?.toLowerCase().includes(term) ||
mail.to?.some((email) => email.toLowerCase().includes(term)) ||
mail.accountEmail?.toLowerCase().includes(term)
mail.accountEmail?.toLowerCase().includes(term),
);
}
@ -249,9 +243,7 @@ export default function SentMailPage() {
originalBody: selectedMailDetail.htmlContent || "",
};
router.push(
`/admin/mail/send?action=reply&data=${encodeURIComponent(JSON.stringify(replyData))}`
);
router.push(`/admin/mail/send?action=reply&data=${encodeURIComponent(JSON.stringify(replyData))}`);
};
const handleForward = () => {
@ -264,9 +256,7 @@ export default function SentMailPage() {
originalBody: selectedMailDetail.htmlContent || "",
};
router.push(
`/admin/mail/send?action=forward&data=${encodeURIComponent(JSON.stringify(forwardData))}`
);
router.push(`/admin/mail/send?action=forward&data=${encodeURIComponent(JSON.stringify(forwardData))}`);
};
const formatDate = (dateString: string) => {
@ -293,28 +283,25 @@ export default function SentMailPage() {
if (loading && mails.length === 0) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="flex min-h-screen items-center justify-center">
<div className="flex flex-col items-center gap-4">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
<p className="text-sm text-muted-foreground">메일을 불러오는 중...</p>
<Loader2 className="text-primary h-8 w-8 animate-spin" />
<p className="text-muted-foreground text-sm">메일을 불러오는 중...</p>
</div>
</div>
);
}
return (
<div className="p-6 space-y-6 bg-background min-h-screen">
<div className="bg-background min-h-screen space-y-6 p-6">
{/* 헤더 */}
<div className="bg-card rounded-lg border p-6 space-y-4">
<div className="bg-card space-y-4 rounded-lg border p-6">
{/* 브레드크럼브 */}
<nav className="flex items-center gap-2 text-sm">
<Link
href="/admin/mail/dashboard"
className="text-muted-foreground hover:text-foreground transition-colors"
>
<Link href="/admin/mail/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
메일 관리
</Link>
<ChevronRight className="w-4 h-4 text-muted-foreground" />
<ChevronRight className="text-muted-foreground h-4 w-4" />
<span className="text-foreground font-medium">보낸메일함</span>
</nav>
@ -323,21 +310,19 @@ export default function SentMailPage() {
{/* 제목 및 빠른 액션 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-foreground flex items-center gap-2">
<Send className="w-8 h-8" />
<h1 className="text-foreground flex items-center gap-2 text-3xl font-bold">
<Send className="h-8 w-8" />
보낸메일함
</h1>
<p className="mt-2 text-muted-foreground">
총 {filteredCount}개의 발송 메일
</p>
<p className="text-muted-foreground mt-2">총 {filteredCount}개의 발송 메일</p>
</div>
<div className="flex gap-2">
<Button onClick={loadMails} variant="outline" size="sm" disabled={loading}>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
새로고침
</Button>
<Button onClick={() => router.push("/admin/automaticMng/mail/send")} size="sm">
<Mail className="w-4 h-4 mr-2" />
<Mail className="mr-2 h-4 w-4" />
메일 작성
</Button>
</div>
@ -345,18 +330,16 @@ export default function SentMailPage() {
</div>
{/* 통계 카드 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
<Card>
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">전체 발송</p>
<p className="text-2xl font-bold text-foreground mt-1">
{stats.totalSent}
</p>
<p className="text-muted-foreground text-sm font-medium">전체 발송</p>
<p className="text-foreground mt-1 text-2xl font-bold">{stats.totalSent}</p>
</div>
<div className="p-3 bg-primary/10 rounded-lg">
<Send className="w-6 h-6 text-primary" />
<div className="bg-primary/10 rounded-lg p-3">
<Send className="text-primary h-6 w-6" />
</div>
</div>
</CardContent>
@ -366,13 +349,11 @@ export default function SentMailPage() {
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">발송 성공</p>
<p className="text-2xl font-bold text-foreground mt-1">
{stats.successCount}
</p>
<p className="text-muted-foreground text-sm font-medium">발송 성공</p>
<p className="text-foreground mt-1 text-2xl font-bold">{stats.successCount}</p>
</div>
<div className="p-3 bg-green-500/10 rounded-lg">
<CheckCircle2 className="w-6 h-6 text-green-600" />
<div className="rounded-lg bg-green-500/10 p-3">
<CheckCircle2 className="h-6 w-6 text-green-600" />
</div>
</div>
</CardContent>
@ -382,13 +363,11 @@ export default function SentMailPage() {
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">발송 실패</p>
<p className="text-2xl font-bold text-foreground mt-1">
{stats.failedCount}
</p>
<p className="text-muted-foreground text-sm font-medium">발송 실패</p>
<p className="text-foreground mt-1 text-2xl font-bold">{stats.failedCount}</p>
</div>
<div className="p-3 bg-red-500/10 rounded-lg">
<XCircle className="w-6 h-6 text-red-600" />
<div className="rounded-lg bg-red-500/10 p-3">
<XCircle className="h-6 w-6 text-red-600" />
</div>
</div>
</CardContent>
@ -398,13 +377,11 @@ export default function SentMailPage() {
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">오늘 발송</p>
<p className="text-2xl font-bold text-foreground mt-1">
{stats.todayCount}
</p>
<p className="text-muted-foreground text-sm font-medium">오늘 발송</p>
<p className="text-foreground mt-1 text-2xl font-bold">{stats.todayCount}</p>
</div>
<div className="p-3 bg-blue-500/10 rounded-lg">
<Calendar className="w-6 h-6 text-blue-600" />
<div className="rounded-lg bg-blue-500/10 p-3">
<Calendar className="h-6 w-6 text-blue-600" />
</div>
</div>
</CardContent>
@ -414,11 +391,11 @@ export default function SentMailPage() {
{/* 검색 및 필터 */}
<Card>
<CardContent className="pt-6">
<div className="flex flex-col sm:flex-row gap-4">
<div className="flex flex-col gap-4 sm:flex-row">
{/* 검색 */}
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
<Input
placeholder="제목, 받는사람, 계정으로 검색..."
value={searchTerm}
@ -441,10 +418,7 @@ export default function SentMailPage() {
</Select>
{/* 계정 필터 */}
<Select
value={filterAccountId}
onValueChange={(value) => setFilterAccountId(value)}
>
<Select value={filterAccountId} onValueChange={(value) => setFilterAccountId(value)}>
<SelectTrigger className="w-full sm:w-[200px]">
<SelectValue placeholder="발송 계정" />
</SelectTrigger>
@ -462,70 +436,58 @@ export default function SentMailPage() {
</Card>
{/* 메일 목록 + 상세보기 */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* 왼쪽: 메일 목록 */}
<div className="lg:col-span-1">
<Card className="flex flex-col h-[calc(100vh-500px)] min-h-[400px]">
<Card className="flex h-[calc(100vh-500px)] min-h-[400px] flex-col">
<CardHeader className="flex-shrink-0">
<CardTitle className="text-base">메일 목록</CardTitle>
<CardDescription>{filteredCount}개의 메일</CardDescription>
</CardHeader>
<CardContent className="flex-1 p-0 overflow-hidden">
<CardContent className="flex-1 overflow-hidden p-0">
<div className="h-full overflow-y-auto">
{mails.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
<Mail className="w-12 h-12 text-muted-foreground mb-4" />
<p className="text-sm text-muted-foreground">
발송된 메일이 없습니다
</p>
<div className="flex flex-col items-center justify-center px-4 py-12 text-center">
<Mail className="text-muted-foreground mb-4 h-12 w-12" />
<p className="text-muted-foreground text-sm">발송된 메일이 없습니다</p>
</div>
) : (
mails.map((mail) => (
<div
key={mail.id}
onClick={() => handleMailClick(mail)}
className={`
p-4 border-b cursor-pointer transition-colors
hover:bg-accent
${selectedMailId === mail.id ? "bg-accent" : ""}
`}
className={`hover:bg-accent cursor-pointer border-b p-4 transition-colors ${selectedMailId === mail.id ? "bg-accent" : ""} `}
>
<div className="flex items-start justify-between gap-2 mb-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<User className="w-4 h-4 text-muted-foreground flex-shrink-0" />
<span className="text-sm font-medium truncate">
{mail.to?.[0] || "받는사람 없음"}
</span>
<div className="mb-2 flex items-start justify-between gap-2">
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<User className="text-muted-foreground h-4 w-4 flex-shrink-0" />
<span className="truncate text-sm font-medium">{mail.to?.[0] || "받는사람 없음"}</span>
</div>
<p className="text-sm font-semibold truncate">
{mail.subject || "(제목 없음)"}
</p>
<p className="truncate text-sm font-semibold">{mail.subject || "(제목 없음)"}</p>
</div>
<div className="flex flex-col items-end gap-1 flex-shrink-0">
<span className="text-xs text-muted-foreground">
{formatDate(mail.sentAt)}
</span>
<div className="flex flex-shrink-0 flex-col items-end gap-1">
<span className="text-muted-foreground text-xs">{formatDate(mail.sentAt)}</span>
{mail.status === "success" ? (
<Badge variant="default" className="text-xs">
<CheckCircle2 className="w-3 h-3 mr-1" />
<CheckCircle2 className="mr-1 h-3 w-3" />
성공
</Badge>
) : mail.status === "failed" ? (
<Badge variant="destructive" className="text-xs">
<XCircle className="w-3 h-3 mr-1" />
<XCircle className="mr-1 h-3 w-3" />
실패
</Badge>
) : null}
</div>
</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Mail className="w-3 h-3" />
<div className="text-muted-foreground flex items-center gap-2 text-xs">
<Mail className="h-3 w-3" />
<span className="truncate">{mail.accountEmail}</span>
{mail.attachments && mail.attachments.length > 0 && (
<>
<Paperclip className="w-3 h-3 ml-2" />
<Paperclip className="ml-2 h-3 w-3" />
<span>{mail.attachments.length}</span>
</>
)}
@ -538,13 +500,8 @@ export default function SentMailPage() {
{/* 페이지네이션 */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-2 p-4 border-t">
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
>
<div className="flex items-center justify-center gap-2 border-t p-4">
<Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>
처음
</Button>
<Button
@ -555,7 +512,7 @@ export default function SentMailPage() {
>
이전
</Button>
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
let pageNum;
@ -568,14 +525,14 @@ export default function SentMailPage() {
} else {
pageNum = currentPage - 2 + i;
}
return (
<Button
key={pageNum}
variant={currentPage === pageNum ? "default" : "outline"}
size="sm"
onClick={() => setCurrentPage(pageNum)}
className="w-8 h-8 p-0"
className="h-8 w-8 p-0"
>
{pageNum}
</Button>
@ -607,39 +564,33 @@ export default function SentMailPage() {
{/* 오른쪽: 메일 상세보기 */}
<div className="lg:col-span-2">
{selectedMailDetail ? (
<Card className="flex flex-col h-[calc(100vh-500px)] min-h-[400px]">
<Card className="flex h-[calc(100vh-500px)] min-h-[400px] flex-col">
<CardHeader className="flex-shrink-0">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<CardTitle className="text-xl mb-2">
{selectedMailDetail.subject || "(제목 없음)"}
</CardTitle>
<div className="min-w-0 flex-1">
<CardTitle className="mb-2 text-xl">{selectedMailDetail.subject || "(제목 없음)"}</CardTitle>
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm">
<User className="w-4 h-4 text-muted-foreground" />
<User className="text-muted-foreground h-4 w-4" />
<span className="font-medium">보낸사람:</span>
<span className="text-muted-foreground">
{selectedMailDetail.accountName} ({selectedMailDetail.accountEmail})
</span>
</div>
<div className="flex items-center gap-2 text-sm">
<Mail className="w-4 h-4 text-muted-foreground" />
<Mail className="text-muted-foreground h-4 w-4" />
<span className="font-medium">받는사람:</span>
<span className="text-muted-foreground">
{selectedMailDetail.to?.join(", ") || "-"}
</span>
<span className="text-muted-foreground">{selectedMailDetail.to?.join(", ") || "-"}</span>
</div>
{selectedMailDetail.cc && selectedMailDetail.cc.length > 0 && (
<div className="flex items-center gap-2 text-sm">
<Mail className="w-4 h-4 text-muted-foreground" />
<Mail className="text-muted-foreground h-4 w-4" />
<span className="font-medium">참조:</span>
<span className="text-muted-foreground">
{selectedMailDetail.cc.join(", ")}
</span>
<span className="text-muted-foreground">{selectedMailDetail.cc.join(", ")}</span>
</div>
)}
<div className="flex items-center gap-2 text-sm">
<Clock className="w-4 h-4 text-muted-foreground" />
<Clock className="text-muted-foreground h-4 w-4" />
<span className="font-medium">발송일시:</span>
<span className="text-muted-foreground">
{new Date(selectedMailDetail.sentAt).toLocaleString("ko-KR")}
@ -650,26 +601,17 @@ export default function SentMailPage() {
</div>
{/* 답장/전달/삭제 버튼 */}
<div className="flex gap-2 mt-4">
<div className="mt-4 flex gap-2">
<Button variant="outline" size="sm" onClick={handleReply}>
<Reply className="w-4 h-4 mr-1" />
<Reply className="mr-1 h-4 w-4" />
답장
</Button>
<Button variant="outline" size="sm" onClick={handleForward}>
<Forward className="w-4 h-4 mr-1" />
<Forward className="mr-1 h-4 w-4" />
전달
</Button>
<Button
variant="destructive"
size="sm"
onClick={handleDeleteMail}
disabled={deleting}
>
{deleting ? (
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
) : (
<Trash2 className="w-4 h-4 mr-1" />
)}
<Button variant="destructive" size="sm" onClick={handleDeleteMail} disabled={deleting}>
{deleting ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Trash2 className="mr-1 h-4 w-4" />}
삭제
</Button>
</div>
@ -680,22 +622,17 @@ export default function SentMailPage() {
<CardContent className="flex-1 overflow-y-auto pt-6">
{/* 첨부파일 */}
{selectedMailDetail.attachments && selectedMailDetail.attachments.length > 0 && (
<div className="mb-6 p-4 bg-muted rounded-lg">
<div className="flex items-center gap-2 mb-3">
<Paperclip className="w-4 h-4 text-muted-foreground" />
<span className="text-sm font-medium">
첨부파일 ({selectedMailDetail.attachments.length})
</span>
<div className="bg-muted mb-6 rounded-lg p-4">
<div className="mb-3 flex items-center gap-2">
<Paperclip className="text-muted-foreground h-4 w-4" />
<span className="text-sm font-medium">첨부파일 ({selectedMailDetail.attachments.length})</span>
</div>
<div className="space-y-2">
{selectedMailDetail.attachments.map((file: any, index: number) => (
<div
key={index}
className="flex items-center gap-2 text-sm bg-background p-2 rounded"
>
<Paperclip className="w-4 h-4 text-muted-foreground" />
<div key={index} className="bg-background flex items-center gap-2 rounded p-2 text-sm">
<Paperclip className="text-muted-foreground h-4 w-4" />
<span className="flex-1 truncate">{file.filename || file.name}</span>
<span className="text-xs text-muted-foreground">
<span className="text-muted-foreground text-xs">
{file.size ? `${(file.size / 1024).toFixed(1)}KB` : ""}
</span>
</div>
@ -713,19 +650,15 @@ export default function SentMailPage() {
}}
/>
) : (
<div className="whitespace-pre-wrap text-sm">
{selectedMailDetail.htmlContent || "(내용 없음)"}
</div>
<div className="text-sm whitespace-pre-wrap">{selectedMailDetail.htmlContent || "(내용 없음)"}</div>
)}
</CardContent>
</Card>
) : (
<Card className="h-[calc(100vh-500px)] min-h-[400px]">
<CardContent className="flex flex-col items-center justify-center h-full">
<Eye className="w-16 h-16 text-muted-foreground mb-4" />
<p className="text-muted-foreground">
메일을 선택하면 내용이 표시됩니다
</p>
<CardContent className="flex h-full flex-col items-center justify-center">
<Eye className="text-muted-foreground mb-4 h-16 w-16" />
<p className="text-muted-foreground">메일을 선택하면 내용이 표시됩니다</p>
</CardContent>
</Card>
)}

104
frontend/app/(main)/admin/automaticMng/mail/templates/page.tsx
View File

@ -25,15 +25,15 @@ export default function MailTemplatesPage() {
const router = useRouter();
const [templates, setTemplates] = useState<MailTemplate[]>([]);
const [loading, setLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [categoryFilter, setCategoryFilter] = useState<string>('all');
const [searchTerm, setSearchTerm] = useState("");
const [categoryFilter, setCategoryFilter] = useState<string>("all");
// 모달 상태
const [isEditorOpen, setIsEditorOpen] = useState(false);
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedTemplate, setSelectedTemplate] = useState<MailTemplate | null>(null);
const [editorMode, setEditorMode] = useState<'create' | 'edit'>('create');
const [editorMode, setEditorMode] = useState<"create" | "edit">("create");
// 템플릿 목록 불러오기
const loadTemplates = async () => {
@ -43,7 +43,7 @@ export default function MailTemplatesPage() {
setTemplates(data);
} catch (error) {
// console.error('템플릿 로드 실패:', error);
alert('템플릿 목록을 불러오는데 실패했습니다.');
alert("템플릿 목록을 불러오는데 실패했습니다.");
} finally {
setLoading(false);
}
@ -58,8 +58,7 @@ export default function MailTemplatesPage() {
const matchesSearch =
template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
template.subject.toLowerCase().includes(searchTerm.toLowerCase());
const matchesCategory =
categoryFilter === 'all' || template.category === categoryFilter;
const matchesCategory = categoryFilter === "all" || template.category === categoryFilter;
return matchesSearch && matchesCategory;
});
@ -67,13 +66,13 @@ export default function MailTemplatesPage() {
const categories = Array.from(new Set(templates.map((t) => t.category).filter(Boolean)));
const handleOpenCreateModal = () => {
setEditorMode('create');
setEditorMode("create");
setSelectedTemplate(null);
setIsEditorOpen(true);
};
const handleOpenEditModal = (template: MailTemplate) => {
setEditorMode('edit');
setEditorMode("edit");
setSelectedTemplate(template);
setIsEditorOpen(true);
};
@ -90,9 +89,9 @@ export default function MailTemplatesPage() {
const handleSaveTemplate = async (data: CreateMailTemplateDto | UpdateMailTemplateDto) => {
try {
if (editorMode === 'create') {
if (editorMode === "create") {
await createMailTemplate(data as CreateMailTemplateDto);
} else if (editorMode === 'edit' && selectedTemplate) {
} else if (editorMode === "edit" && selectedTemplate) {
await updateMailTemplate(selectedTemplate.id, data as UpdateMailTemplateDto);
}
await loadTemplates();
@ -108,10 +107,10 @@ export default function MailTemplatesPage() {
try {
await deleteMailTemplate(selectedTemplate.id);
await loadTemplates();
alert('템플릿이 삭제되었습니다.');
alert("템플릿이 삭제되었습니다.");
} catch (error) {
// console.error('템플릿 삭제 실패:', error);
alert('템플릿 삭제에 실패했습니다.');
alert("템플릿 삭제에 실패했습니다.");
}
};
@ -124,54 +123,45 @@ export default function MailTemplatesPage() {
category: template.category,
});
await loadTemplates();
alert('템플릿이 복사되었습니다.');
alert("템플릿이 복사되었습니다.");
} catch (error) {
// console.error('템플릿 복사 실패:', error);
alert('템플릿 복사에 실패했습니다.');
alert("템플릿 복사에 실패했습니다.");
}
};
return (
<div className="min-h-screen bg-background">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="bg-background min-h-screen">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="bg-card rounded-lg border p-6 space-y-4">
<div className="bg-card space-y-4 rounded-lg border p-6">
{/* 브레드크럼브 */}
<nav className="flex items-center gap-2 text-sm">
<Link
<Link
href="/admin/mail/dashboard"
className="text-muted-foreground hover:text-foreground transition-colors"
>
메일 관리
</Link>
<ChevronRight className="w-4 h-4 text-muted-foreground" />
<ChevronRight className="text-muted-foreground h-4 w-4" />
<span className="text-foreground font-medium">템플릿 관리</span>
</nav>
<Separator />
{/* 제목 + 액션 버튼들 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-foreground">메일 템플릿 관리</h1>
<p className="mt-2 text-muted-foreground">드래그 앤 드롭으로 메일 템플릿을 만들고 관리합니다</p>
<h1 className="text-foreground text-3xl font-bold">메일 템플릿 관리</h1>
<p className="text-muted-foreground mt-2">드래그 앤 드롭으로 메일 템플릿을 만들고 관리합니다</p>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={loadTemplates}
disabled={loading}
>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
<Button variant="outline" size="sm" onClick={loadTemplates} disabled={loading}>
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
새로고침
</Button>
<Button
variant="default"
onClick={handleOpenCreateModal}
>
<Plus className="w-4 h-4 mr-2" />
새 템플릿 만들기
<Button variant="default" onClick={handleOpenCreateModal}>
<Plus className="mr-2 h-4 w-4" />새 템플릿 만들기
</Button>
</div>
</div>
@ -181,20 +171,20 @@ export default function MailTemplatesPage() {
<Card>
<CardContent className="p-4">
<div className="flex gap-4">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<div className="relative flex-1">
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="템플릿 이름, 제목으로 검색..."
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-background"
className="focus:ring-primary focus:border-primary bg-background w-full rounded-lg border py-2 pr-4 pl-10 focus:ring-2"
/>
</div>
<select
value={categoryFilter}
onChange={(e) => setCategoryFilter(e.target.value)}
className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-background"
className="focus:ring-primary focus:border-primary bg-background rounded-lg border px-4 py-2 focus:ring-2"
>
<option value="all">전체 카테고리</option>
{categories.map((cat) => (
@ -210,32 +200,26 @@ export default function MailTemplatesPage() {
{/* 메인 컨텐츠 */}
{loading ? (
<Card>
<CardContent className="flex justify-center items-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
<CardContent className="flex items-center justify-center py-16">
<Loader2 className="text-primary h-8 w-8 animate-spin" />
</CardContent>
</Card>
) : filteredTemplates.length === 0 ? (
<Card className="text-center py-16">
<Card className="py-16 text-center">
<CardContent className="pt-6">
<FileText className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
<FileText className="text-muted-foreground mx-auto mb-4 h-16 w-16" />
<p className="text-muted-foreground mb-4">
{templates.length === 0
? '아직 생성된 템플릿이 없습니다'
: '검색 결과가 없습니다'}
{templates.length === 0 ? "아직 생성된 템플릿이 없습니다" : "검색 결과가 없습니다"}
</p>
{templates.length === 0 && (
<Button
variant="default"
onClick={handleOpenCreateModal}
>
<Plus className="w-4 h-4 mr-2" />
첫 템플릿 만들기
<Button variant="default" onClick={handleOpenCreateModal}>
<Plus className="mr-2 h-4 w-4" />첫 템플릿 만들기
</Button>
)}
</CardContent>
</Card>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{filteredTemplates.map((template) => (
<MailTemplateCard
key={template.id}
@ -252,16 +236,14 @@ export default function MailTemplatesPage() {
{/* 안내 정보 */}
<Card className="bg-muted/50">
<CardHeader>
<CardTitle className="text-lg flex items-center">
<FileText className="w-5 h-5 mr-2 text-foreground" />
<CardTitle className="flex items-center text-lg">
<FileText className="text-foreground mr-2 h-5 w-5" />
템플릿 디자이너
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-foreground mb-4">
💡 드래그 앤 드롭으로 손쉽게 메일 템플릿을 만들 수 있어요!
</p>
<ul className="space-y-2 text-sm text-muted-foreground">
<p className="text-foreground mb-4">💡 드래그 앤 드롭으로 손쉽게 메일 템플릿을 만들 수 있어요!</p>
<ul className="text-muted-foreground space-y-2 text-sm">
<li className="flex items-start">
<span className="text-foreground mr-2">✓</span>
<span>텍스트, 버튼, 이미지, 여백 컴포넌트 지원</span>

53
frontend/app/(main)/admin/automaticMng/mail/trash/page.tsx
View File

@ -63,7 +63,12 @@ export default function TrashPage() {
};
const handleEmptyTrash = async () => {
if (!confirm(`휴지통의 모든 메일(${trashedMails.length}개)을 영구적으로 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.`)) return;
if (
!confirm(
`휴지통의 모든 메일(${trashedMails.length}개)을 영구적으로 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.`,
)
)
return;
try {
setLoading(true);
@ -80,22 +85,22 @@ export default function TrashPage() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loader2 className="w-8 h-8 animate-spin text-primary" />
<div className="flex min-h-[400px] items-center justify-center">
<Loader2 className="text-primary h-8 w-8 animate-spin" />
</div>
);
}
return (
<div className="p-3 space-y-3">
<div className="space-y-3 p-3">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-foreground">휴지통</h1>
<p className="mt-2 text-muted-foreground">삭제된 메일은 30일 후 자동으로 영구 삭제됩니다</p>
<h1 className="text-foreground text-3xl font-bold">휴지통</h1>
<p className="text-muted-foreground mt-2">삭제된 메일은 30일 후 자동으로 영구 삭제됩니다</p>
</div>
{trashedMails.length > 0 && (
<Button variant="destructive" onClick={handleEmptyTrash} className="h-10">
<Trash2 className="w-4 h-4 mr-2" />
<Trash2 className="mr-2 h-4 w-4" />
휴지통 비우기
</Button>
)}
@ -104,7 +109,7 @@ export default function TrashPage() {
{trashedMails.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<Mail className="w-12 h-12 text-muted-foreground mb-4" />
<Mail className="text-muted-foreground mb-4 h-12 w-12" />
<p className="text-muted-foreground">휴지통이 비어 있습니다</p>
</CardContent>
</Card>
@ -117,18 +122,14 @@ export default function TrashPage() {
: 30;
return (
<Card key={mail.id} className="hover:shadow-md transition-shadow">
<Card key={mail.id} className="transition-shadow hover:shadow-md">
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<CardTitle className="text-lg truncate">
{mail.subject || "(제목 없음)"}
</CardTitle>
<CardDescription className="mt-1">
받는 사람: {mail.to.join(", ") || "(없음)"}
</CardDescription>
<div className="min-w-0 flex-1">
<CardTitle className="truncate text-lg">{mail.subject || "(제목 없음)"}</CardTitle>
<CardDescription className="mt-1">받는 사람: {mail.to.join(", ") || "(없음)"}</CardDescription>
</div>
<div className="flex items-center gap-2 ml-4">
<div className="ml-4 flex items-center gap-2">
<Button
variant="outline"
size="sm"
@ -137,10 +138,10 @@ export default function TrashPage() {
className="h-8"
>
{restoring === mail.id ? (
<Loader2 className="w-4 h-4 animate-spin" />
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<RotateCcw className="w-4 h-4 mr-1" />
<RotateCcw className="mr-1 h-4 w-4" />
복구
</>
)}
@ -153,10 +154,10 @@ export default function TrashPage() {
className="h-8"
>
{deleting === mail.id ? (
<Loader2 className="w-4 h-4 animate-spin" />
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<Trash2 className="w-4 h-4 mr-1" />
<Trash2 className="mr-1 h-4 w-4" />
영구 삭제
</>
)}
@ -166,16 +167,14 @@ export default function TrashPage() {
</CardHeader>
<CardContent className="pt-0">
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">
계정: {mail.accountName || mail.accountEmail}
</span>
<span className="text-muted-foreground">계정: {mail.accountName || mail.accountEmail}</span>
<span className="text-muted-foreground">
{format(new Date(mail.sentAt), "yyyy-MM-dd HH:mm", { locale: ko })}
</span>
</div>
{daysLeft <= 7 && (
<div className="flex items-center gap-2 mt-2 text-xs text-amber-600">
<AlertCircle className="w-3 h-3" />
<div className="mt-2 flex items-center gap-2 text-xs text-amber-600">
<AlertCircle className="h-3 w-3" />
<span>{daysLeft}일 후 자동 삭제됩니다</span>
</div>
)}
@ -188,5 +187,3 @@ export default function TrashPage() {
</div>
);
}

188
frontend/app/(main)/admin/batch-management/page.tsx
View File

@ -6,39 +6,26 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Plus,
Search,
MoreHorizontal,
Edit,
Trash2,
Play,
import {
Plus,
Search,
MoreHorizontal,
Edit,
Trash2,
Play,
RefreshCw,
BarChart3,
ArrowRight,
Database,
Globe
Globe,
} from "lucide-react";
import { toast } from "sonner";
import { BatchAPI, BatchJob } from "@/lib/api/batch";
@ -53,7 +40,7 @@ export default function BatchManagementPage() {
const [statusFilter, setStatusFilter] = useState("all");
const [typeFilter, setTypeFilter] = useState("all");
const [jobTypes, setJobTypes] = useState<Array<{ value: string; label: string }>>([]);
// 모달 상태
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedJob, setSelectedJob] = useState<BatchJob | null>(null);
@ -95,20 +82,21 @@ export default function BatchManagementPage() {
// 검색어 필터
if (searchTerm) {
filtered = filtered.filter(job =>
job.job_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
job.description?.toLowerCase().includes(searchTerm.toLowerCase())
filtered = filtered.filter(
(job) =>
job.job_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
job.description?.toLowerCase().includes(searchTerm.toLowerCase()),
);
}
// 상태 필터
if (statusFilter !== "all") {
filtered = filtered.filter(job => job.is_active === statusFilter);
filtered = filtered.filter((job) => job.is_active === statusFilter);
}
// 타입 필터
if (typeFilter !== "all") {
filtered = filtered.filter(job => job.job_type === typeFilter);
filtered = filtered.filter((job) => job.job_type === typeFilter);
}
setFilteredJobs(filtered);
@ -118,19 +106,19 @@ export default function BatchManagementPage() {
setIsBatchTypeModalOpen(true);
};
const handleBatchTypeSelect = (type: 'db-to-db' | 'restapi-to-db') => {
const handleBatchTypeSelect = (type: "db-to-db" | "restapi-to-db") => {
console.log("배치 타입 선택:", type);
setIsBatchTypeModalOpen(false);
if (type === 'db-to-db') {
if (type === "db-to-db") {
// 기존 배치 생성 모달 열기
console.log("DB → DB 배치 모달 열기");
setSelectedJob(null);
setIsModalOpen(true);
} else if (type === 'restapi-to-db') {
} else if (type === "restapi-to-db") {
// 새로운 REST API 배치 페이지로 이동
console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
router.push('/admin/batch-management-new');
console.log("REST API → DB 페이지로 이동:", "/admin/batch-management-new");
router.push("/admin/batch-management-new");
}
};
@ -177,14 +165,14 @@ export default function BatchManagementPage() {
};
const getTypeBadge = (type: string) => {
const option = jobTypes.find(opt => opt.value === type);
const option = jobTypes.find((opt) => opt.value === type);
const colors = {
collection: "bg-blue-100 text-blue-800",
sync: "bg-purple-100 text-purple-800",
cleanup: "bg-orange-100 text-orange-800",
custom: "bg-gray-100 text-gray-800",
};
const icons = {
collection: "📥",
sync: "🔄",
@ -211,24 +199,21 @@ export default function BatchManagementPage() {
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">배치 관리</h1>
<p className="text-muted-foreground">
스케줄된 배치 작업을 관리하고 실행 상태를 모니터링합니다.
</p>
<p className="text-muted-foreground">스케줄된 배치 작업을 관리하고 실행 상태를 모니터링합니다.</p>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => window.open('/admin/monitoring', '_blank')}>
<BarChart3 className="h-4 w-4 mr-2" />
<Button variant="outline" onClick={() => window.open("/admin/monitoring", "_blank")}>
<BarChart3 className="mr-2 h-4 w-4" />
모니터링
</Button>
<Button onClick={handleCreate}>
<Plus className="h-4 w-4 mr-2" />
새 배치 작업
<Plus className="mr-2 h-4 w-4" />새 배치 작업
</Button>
</div>
</div>
{/* 통계 카드 */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">총 작업</CardTitle>
@ -236,9 +221,7 @@ export default function BatchManagementPage() {
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{jobs.length}</div>
<p className="text-xs text-muted-foreground">
활성: {jobs.filter(j => j.is_active === 'Y').length}개
</p>
<p className="text-muted-foreground text-xs">활성: {jobs.filter((j) => j.is_active === "Y").length}개</p>
</CardContent>
</Card>
@ -248,10 +231,8 @@ export default function BatchManagementPage() {
<div className="text-2xl">▶️</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{jobs.reduce((sum, job) => sum + job.execution_count, 0)}
</div>
<p className="text-xs text-muted-foreground">누적 실행 횟수</p>
<div className="text-2xl font-bold">{jobs.reduce((sum, job) => sum + job.execution_count, 0)}</div>
<p className="text-muted-foreground text-xs">누적 실행 횟수</p>
</CardContent>
</Card>
@ -264,7 +245,7 @@ export default function BatchManagementPage() {
<div className="text-2xl font-bold text-green-600">
{jobs.reduce((sum, job) => sum + job.success_count, 0)}
</div>
<p className="text-xs text-muted-foreground">총 성공 횟수</p>
<p className="text-muted-foreground text-xs">총 성공 횟수</p>
</CardContent>
</Card>
@ -277,7 +258,7 @@ export default function BatchManagementPage() {
<div className="text-2xl font-bold text-red-600">
{jobs.reduce((sum, job) => sum + job.failure_count, 0)}
</div>
<p className="text-xs text-muted-foreground">총 실패 횟수</p>
<p className="text-muted-foreground text-xs">총 실패 횟수</p>
</CardContent>
</Card>
</div>
@ -288,10 +269,10 @@ export default function BatchManagementPage() {
<CardTitle>필터 및 검색</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col md:flex-row gap-4">
<div className="flex flex-col gap-4 md:flex-row">
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-3 left-3 h-4 w-4" />
<Input
placeholder="작업명, 설명으로 검색..."
value={searchTerm}
@ -300,7 +281,7 @@ export default function BatchManagementPage() {
/>
</div>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-32">
<SelectValue placeholder="상태" />
@ -327,7 +308,7 @@ export default function BatchManagementPage() {
</Select>
<Button variant="outline" onClick={loadJobs} disabled={isLoading}>
<RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
새로고침
</Button>
</div>
@ -341,12 +322,12 @@ export default function BatchManagementPage() {
</CardHeader>
<CardContent>
{isLoading ? (
<div className="text-center py-8">
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
<div className="py-8 text-center">
<RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin" />
<p>배치 작업을 불러오는 중...</p>
</div>
) : filteredJobs.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<div className="text-muted-foreground py-8 text-center">
{jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
</div>
) : (
@ -369,22 +350,12 @@ export default function BatchManagementPage() {
<TableCell>
<div>
<div className="font-medium">{job.job_name}</div>
{job.description && (
<div className="text-sm text-muted-foreground">
{job.description}
</div>
)}
{job.description && <div className="text-muted-foreground text-sm">{job.description}</div>}
</div>
</TableCell>
<TableCell>
{getTypeBadge(job.job_type)}
</TableCell>
<TableCell className="font-mono text-sm">
{job.schedule_cron || "-"}
</TableCell>
<TableCell>
{getStatusBadge(job.is_active)}
</TableCell>
<TableCell>{getTypeBadge(job.job_type)}</TableCell>
<TableCell className="font-mono text-sm">{job.schedule_cron || "-"}</TableCell>
<TableCell>{getStatusBadge(job.is_active)}</TableCell>
<TableCell>
<div className="text-sm">
<div>총 {job.execution_count}회</div>
@ -395,18 +366,21 @@ export default function BatchManagementPage() {
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<div className={`text-sm font-medium ${
getSuccessRate(job) >= 90 ? 'text-green-600' :
getSuccessRate(job) >= 70 ? 'text-yellow-600' : 'text-red-600'
}`}>
<div
className={`text-sm font-medium ${
getSuccessRate(job) >= 90
? "text-green-600"
: getSuccessRate(job) >= 70
? "text-yellow-600"
: "text-red-600"
}`}
>
{getSuccessRate(job)}%
</div>
</div>
</TableCell>
<TableCell>
{job.last_executed_at
? new Date(job.last_executed_at).toLocaleString()
: "-"}
{job.last_executed_at ? new Date(job.last_executed_at).toLocaleString() : "-"}
</TableCell>
<TableCell>
<DropdownMenu>
@ -417,18 +391,15 @@ export default function BatchManagementPage() {
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEdit(job)}>
<Edit className="h-4 w-4 mr-2" />
<Edit className="mr-2 h-4 w-4" />
수정
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExecute(job)}
disabled={job.is_active !== "Y"}
>
<Play className="h-4 w-4 mr-2" />
<DropdownMenuItem onClick={() => handleExecute(job)} disabled={job.is_active !== "Y"}>
<Play className="mr-2 h-4 w-4" />
실행
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(job)}>
<Trash2 className="h-4 w-4 mr-2" />
<Trash2 className="mr-2 h-4 w-4" />
삭제
</DropdownMenuItem>
</DropdownMenuContent>
@ -444,51 +415,48 @@ export default function BatchManagementPage() {
{/* 배치 타입 선택 모달 */}
{isBatchTypeModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<Card className="w-full max-w-2xl mx-4">
<div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
<Card className="mx-4 w-full max-w-2xl">
<CardHeader>
<CardTitle className="text-center">배치 타입 선택</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* DB → DB */}
<div
className="p-6 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-blue-50"
onClick={() => handleBatchTypeSelect('db-to-db')}
className="cursor-pointer rounded-lg border p-6 transition-all hover:border-blue-500 hover:bg-blue-50"
onClick={() => handleBatchTypeSelect("db-to-db")}
>
<div className="flex items-center justify-center mb-4">
<Database className="w-8 h-8 text-blue-600 mr-2" />
<ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
<Database className="w-8 h-8 text-blue-600" />
<div className="mb-4 flex items-center justify-center">
<Database className="mr-2 h-8 w-8 text-blue-600" />
<ArrowRight className="mr-2 h-6 w-6 text-gray-400" />
<Database className="h-8 w-8 text-blue-600" />
</div>
<div className="text-center">
<div className="font-medium text-lg mb-2">DB → DB</div>
<div className="mb-2 text-lg font-medium">DB → DB</div>
<div className="text-sm text-gray-500">데이터베이스 간 데이터 동기화</div>
</div>
</div>
{/* REST API → DB */}
<div
className="p-6 border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50"
onClick={() => handleBatchTypeSelect('restapi-to-db')}
className="cursor-pointer rounded-lg border p-6 transition-all hover:border-green-500 hover:bg-green-50"
onClick={() => handleBatchTypeSelect("restapi-to-db")}
>
<div className="flex items-center justify-center mb-4">
<Globe className="w-8 h-8 text-green-600 mr-2" />
<ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
<Database className="w-8 h-8 text-green-600" />
<div className="mb-4 flex items-center justify-center">
<Globe className="mr-2 h-8 w-8 text-green-600" />
<ArrowRight className="mr-2 h-6 w-6 text-gray-400" />
<Database className="h-8 w-8 text-green-600" />
</div>
<div className="text-center">
<div className="font-medium text-lg mb-2">REST API → DB</div>
<div className="mb-2 text-lg font-medium">REST API → DB</div>
<div className="text-sm text-gray-500">REST API에서 데이터베이스로 데이터 수집</div>
</div>
</div>
</div>
<div className="flex justify-center pt-4">
<Button
variant="outline"
onClick={() => setIsBatchTypeModalOpen(false)}
>
<Button variant="outline" onClick={() => setIsBatchTypeModalOpen(false)}>
취소
</Button>
</div>

12
frontend/app/(main)/admin/cascading-management/page.tsx
View File

@ -22,7 +22,12 @@ export default function CascadingManagementPage() {
// URL 쿼리 파라미터에서 탭 설정
useEffect(() => {
const tab = searchParams.get("tab");
if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value", "hierarchy-column"].includes(tab)) {
if (
tab &&
["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value", "hierarchy-column"].includes(
tab,
)
) {
setActiveTab(tab);
}
}, [searchParams]);
@ -36,12 +41,12 @@ export default function CascadingManagementPage() {
};
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">연쇄 드롭다운 통합 관리</h1>
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
연쇄 드롭다운, 자동 입력, 다단계 계층, 조건부 필터 등을 관리합니다.
</p>
</div>
@ -112,4 +117,3 @@ export default function CascadingManagementPage() {
</div>
);
}

190
frontend/app/(main)/admin/cascading-management/tabs/CategoryValueCascadingTab.tsx
View File

@ -14,35 +14,11 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, Pencil, Trash2, Search, Save, RefreshCw, Check, ChevronsUpDown, X } from "lucide-react";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import {
categoryValueCascadingApi,
@ -113,7 +89,7 @@ export default function CategoryValueCascadingTab() {
const [childValues, setChildValues] = useState<CategoryValue[]>([]);
const [mappings, setMappings] = useState<Record<string, Set<string>>>({});
const [savingMappings, setSavingMappings] = useState(false);
// 직접 입력 매핑 상태 (각 부모값에 대한 하위 옵션 목록)
const [childOptionsMap, setChildOptionsMap] = useState<Record<string, { code: string; label: string }[]>>({});
const [newOptionInputs, setNewOptionInputs] = useState<Record<string, string>>({});
@ -170,12 +146,12 @@ export default function CategoryValueCascadingTab() {
// API 응답 형식: { columns: [...], total, page, ... }
const columns = response.data.columns || response.data;
const columnsArray = Array.isArray(columns) ? columns : [];
// category 타입 컬럼만 필터링
const categoryColumns = columnsArray.filter(
(col: any) => col.input_type === "category" || col.inputType === "category"
(col: any) => col.input_type === "category" || col.inputType === "category",
);
// 인터페이스에 맞게 변환
const mappedColumns: ColumnInfo[] = categoryColumns.map((col: any) => ({
columnName: col.columnName || col.column_name,
@ -183,7 +159,7 @@ export default function CategoryValueCascadingTab() {
dataType: col.dataType || col.data_type,
inputType: col.inputType || col.input_type,
}));
if (target === "parent") setParentColumns(mappedColumns);
else setChildColumns(mappedColumns);
}
@ -281,7 +257,7 @@ export default function CategoryValueCascadingTab() {
if (parentResponse.success && parentResponse.data) {
setParentValues(parentResponse.data);
// 부모 값별 입력창 초기화
const inputs: Record<string, string> = {};
for (const pv of parentResponse.data) {
@ -293,14 +269,14 @@ export default function CategoryValueCascadingTab() {
// 기존 매핑을 직접 입력 형태로 변환
if (groupDetailResponse.success && groupDetailResponse.data?.mappings) {
const optionsMap: Record<string, { code: string; label: string }[]> = {};
for (const mapping of groupDetailResponse.data.mappings) {
const parentCode = mapping.parent_value_code;
if (!optionsMap[parentCode]) {
optionsMap[parentCode] = [];
}
// 중복 체크
if (!optionsMap[parentCode].some(opt => opt.code === mapping.child_value_code)) {
if (!optionsMap[parentCode].some((opt) => opt.code === mapping.child_value_code)) {
optionsMap[parentCode].push({
code: mapping.child_value_code,
label: mapping.child_value_label || mapping.child_value_code,
@ -449,10 +425,7 @@ export default function CategoryValueCascadingTab() {
}
}
const response = await categoryValueCascadingApi.saveMappings(
selectedGroup.group_id,
mappingInputs
);
const response = await categoryValueCascadingApi.saveMappings(selectedGroup.group_id, mappingInputs);
if (response.success) {
setIsMappingModalOpen(false);
@ -486,21 +459,21 @@ export default function CategoryValueCascadingTab() {
{/* 설명 */}
<div className="space-y-2">
<h2 className="text-xl font-semibold">카테고리 값 연쇄관계</h2>
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
카테고리 값들 간의 부모-자식 연쇄관계를 정의합니다. 예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
</p>
</div>
{/* 에러 메시지 */}
{error && (
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
<div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
<div className="flex items-center justify-between">
<p className="text-sm font-semibold text-destructive">오류</p>
<p className="text-destructive text-sm font-semibold">오류</p>
<button onClick={() => setError(null)} className="text-destructive hover:text-destructive/80">
x
</button>
</div>
<p className="mt-1 text-sm text-destructive/80">{error}</p>
<p className="text-destructive/80 mt-1 text-sm">{error}</p>
</div>
)}
@ -508,7 +481,7 @@ export default function CategoryValueCascadingTab() {
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div className="relative w-full sm:w-[300px]">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="관계코드, 관계명, 테이블명 검색..."
value={searchText}
@ -519,8 +492,8 @@ export default function CategoryValueCascadingTab() {
</div>
<div className="flex items-center gap-4">
<div className="text-sm text-muted-foreground">
총 <span className="font-semibold text-foreground">{filteredGroups.length}</span> 건
<div className="text-muted-foreground text-sm">
총 <span className="text-foreground font-semibold">{filteredGroups.length}</span> 건
</div>
<Button onClick={() => loadGroups()} variant="outline" className="h-10 gap-2 text-sm font-medium">
<RefreshCw className="h-4 w-4" />
@ -534,16 +507,16 @@ export default function CategoryValueCascadingTab() {
</div>
{/* 테이블 */}
<div className="rounded-lg border bg-card shadow-sm">
<div className="bg-card rounded-lg border shadow-sm">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
<TableHead className="h-12 text-sm font-semibold">관계코드</TableHead>
<TableHead className="h-12 text-sm font-semibold">관계명</TableHead>
<TableHead className="h-12 text-sm font-semibold">부모 (테이블.컬럼)</TableHead>
<TableHead className="h-12 text-sm font-semibold">자식 (테이블.컬럼)</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용</TableHead>
<TableHead className="h-12 text-sm font-semibold text-center">관리</TableHead>
<TableHead className="h-12 text-center text-sm font-semibold">관리</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -551,35 +524,35 @@ export default function CategoryValueCascadingTab() {
Array.from({ length: 5 }).map((_, idx) => (
<TableRow key={idx} className="border-b">
<TableCell className="h-16">
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
<div className="bg-muted h-4 w-24 animate-pulse rounded" />
</TableCell>
<TableCell className="h-16">
<div className="h-4 w-32 animate-pulse rounded bg-muted" />
<div className="bg-muted h-4 w-32 animate-pulse rounded" />
</TableCell>
<TableCell className="h-16">
<div className="h-4 w-40 animate-pulse rounded bg-muted" />
<div className="bg-muted h-4 w-40 animate-pulse rounded" />
</TableCell>
<TableCell className="h-16">
<div className="h-4 w-40 animate-pulse rounded bg-muted" />
<div className="bg-muted h-4 w-40 animate-pulse rounded" />
</TableCell>
<TableCell className="h-16">
<div className="h-6 w-11 animate-pulse rounded-full bg-muted" />
<div className="bg-muted h-6 w-11 animate-pulse rounded-full" />
</TableCell>
<TableCell className="h-16">
<div className="h-8 w-24 animate-pulse rounded bg-muted" />
<div className="bg-muted h-8 w-24 animate-pulse rounded" />
</TableCell>
</TableRow>
))
) : filteredGroups.length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="h-32 text-center text-sm text-muted-foreground">
<TableCell colSpan={6} className="text-muted-foreground h-32 text-center text-sm">
등록된 카테고리 값 연쇄관계가 없습니다.
</TableCell>
</TableRow>
) : (
filteredGroups.map((group) => (
<TableRow key={group.group_id} className="border-b transition-colors hover:bg-muted/50">
<TableCell className="h-16 text-sm font-mono">{group.relation_code}</TableCell>
<TableRow key={group.group_id} className="hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16 font-mono text-sm">{group.relation_code}</TableCell>
<TableCell className="h-16 text-sm font-medium">{group.relation_name}</TableCell>
<TableCell className="h-16 text-sm">
<span className="text-muted-foreground">{group.parent_table_name}.</span>
@ -606,19 +579,14 @@ export default function CategoryValueCascadingTab() {
>
값 매핑
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => openEditModal(group)}
className="h-8 w-8"
>
<Button variant="ghost" size="icon" onClick={() => openEditModal(group)} className="h-8 w-8">
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(group)}
className="h-8 w-8 text-destructive hover:text-destructive"
className="text-destructive hover:text-destructive h-8 w-8"
>
<Trash2 className="h-4 w-4" />
</Button>
@ -688,7 +656,7 @@ export default function CategoryValueCascadingTab() {
<Command>
<CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
<CommandList>
<CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
<CommandEmpty className="text-muted-foreground py-2 text-center text-xs">
{tables.length === 0 ? "테이블을 불러오는 중..." : "테이블을 찾을 수 없습니다."}
</CommandEmpty>
<CommandGroup>
@ -697,7 +665,12 @@ export default function CategoryValueCascadingTab() {
key={table.tableName}
value={`${table.displayName || ""} ${table.tableName}`}
onSelect={() => {
setFormData({ ...formData, parentTableName: table.tableName, parentColumnName: "", childTableName: table.tableName });
setFormData({
...formData,
parentTableName: table.tableName,
parentColumnName: "",
childTableName: table.tableName,
});
loadColumns(table.tableName, "parent");
setParentTableOpen(false);
}}
@ -706,13 +679,13 @@ export default function CategoryValueCascadingTab() {
<Check
className={cn(
"mr-2 h-4 w-4",
formData.parentTableName === table.tableName ? "opacity-100" : "opacity-0"
formData.parentTableName === table.tableName ? "opacity-100" : "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{table.displayName || table.tableName}</span>
{table.displayName && table.displayName !== table.tableName && (
<span className="text-[10px] text-muted-foreground">{table.tableName}</span>
<span className="text-muted-foreground text-[10px]">{table.tableName}</span>
)}
</div>
</CommandItem>
@ -735,7 +708,7 @@ export default function CategoryValueCascadingTab() {
</SelectTrigger>
<SelectContent>
{parentColumns.length === 0 ? (
<div className="px-2 py-1 text-xs text-muted-foreground">
<div className="text-muted-foreground px-2 py-1 text-xs">
{formData.parentTableName ? "카테고리 컬럼이 없습니다" : "테이블을 먼저 선택하세요"}
</div>
) : (
@ -754,7 +727,7 @@ export default function CategoryValueCascadingTab() {
{/* 자식 옵션 라벨 설정 */}
<div className="space-y-2 rounded-md border p-3">
<h4 className="text-sm font-medium">하위 옵션 설정</h4>
<p className="text-xs text-muted-foreground">
<p className="text-muted-foreground text-xs">
부모 카테고리 값별로 표시할 하위 옵션들의 그룹명을 입력합니다.
<br />
실제 하위 옵션은 등록 후 "값 매핑" 버튼에서 직접 입력합니다.
@ -763,7 +736,13 @@ export default function CategoryValueCascadingTab() {
<Label className="text-xs">하위 옵션 라벨 *</Label>
<Input
value={formData.childColumnName}
onChange={(e) => setFormData({ ...formData, childColumnName: e.target.value, childTableName: formData.parentTableName })}
onChange={(e) =>
setFormData({
...formData,
childColumnName: e.target.value,
childTableName: formData.parentTableName,
})
}
placeholder="예: 적용대상"
className="h-8 text-xs sm:h-10 sm:text-sm"
/>
@ -800,7 +779,13 @@ export default function CategoryValueCascadingTab() {
<Button
onClick={handleCreate}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
disabled={!formData.relationCode || !formData.relationName || !formData.parentTableName || !formData.parentColumnName || !formData.childColumnName}
disabled={
!formData.relationCode ||
!formData.relationName ||
!formData.parentTableName ||
!formData.parentColumnName ||
!formData.childColumnName
}
>
등록
</Button>
@ -813,9 +798,7 @@ export default function CategoryValueCascadingTab() {
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">카테고리 값 연쇄관계 수정</DialogTitle>
<DialogDescription className="text-xs sm:text-sm">
연쇄관계 설정을 수정합니다.
</DialogDescription>
<DialogDescription className="text-xs sm:text-sm">연쇄관계 설정을 수정합니다.</DialogDescription>
</DialogHeader>
<div className="space-y-4">
@ -823,11 +806,7 @@ export default function CategoryValueCascadingTab() {
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label className="text-xs sm:text-sm">관계코드</Label>
<Input
value={formData.relationCode}
disabled
className="h-8 text-xs sm:h-10 sm:text-sm bg-muted"
/>
<Input value={formData.relationCode} disabled className="bg-muted h-8 text-xs sm:h-10 sm:text-sm" />
</div>
<div className="space-y-2">
<Label className="text-xs sm:text-sm">관계명 *</Label>
@ -849,8 +828,8 @@ export default function CategoryValueCascadingTab() {
</div>
{/* 부모/자식 설정 - 수정 불가 표시 */}
<div className="space-y-2 rounded-md border p-3 bg-muted/30">
<h4 className="text-sm font-medium text-muted-foreground">부모/자식 설정 (수정 불가)</h4>
<div className="bg-muted/30 space-y-2 rounded-md border p-3">
<h4 className="text-muted-foreground text-sm font-medium">부모/자식 설정 (수정 불가)</h4>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-muted-foreground">부모: </span>
@ -890,10 +869,7 @@ export default function CategoryValueCascadingTab() {
>
취소
</Button>
<Button
onClick={handleUpdate}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
<Button onClick={handleUpdate} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
저장
</Button>
</DialogFooter>
@ -902,11 +878,9 @@ export default function CategoryValueCascadingTab() {
{/* 값 매핑 모달 */}
<Dialog open={isMappingModalOpen} onOpenChange={setIsMappingModalOpen}>
<DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[90vh] overflow-hidden flex flex-col">
<DialogContent className="flex max-h-[90vh] max-w-[95vw] flex-col overflow-hidden sm:max-w-[800px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">
하위 옵션 설정 - {selectedGroup?.relation_name}
</DialogTitle>
<DialogTitle className="text-base sm:text-lg">하위 옵션 설정 - {selectedGroup?.relation_name}</DialogTitle>
<DialogDescription className="text-xs sm:text-sm">
각 부모 카테고리 값에 대해 하위 옵션을 직접 입력합니다.
</DialogDescription>
@ -914,7 +888,7 @@ export default function CategoryValueCascadingTab() {
<div className="flex-1 overflow-auto">
{parentValues.length === 0 ? (
<div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
<div className="text-muted-foreground flex h-32 items-center justify-center text-sm">
부모 카테고리 값이 등록되지 않았습니다.
<br />
먼저 카테고리 관리에서 "{selectedGroup?.parent_column_name}" 컬럼의 값을 등록하세요.
@ -925,18 +899,16 @@ export default function CategoryValueCascadingTab() {
<div key={parent.value} className="space-y-3 rounded-md border p-4">
<div className="flex items-center justify-between">
<h4 className="text-sm font-semibold">{parent.label}</h4>
<span className="text-xs text-muted-foreground">
<span className="text-muted-foreground text-xs">
{(childOptionsMap[parent.value] || []).length}개 옵션
</span>
</div>
{/* 하위 옵션 입력 */}
<div className="flex gap-2">
<Input
value={newOptionInputs[parent.value] || ""}
onChange={(e) =>
setNewOptionInputs((prev) => ({ ...prev, [parent.value]: e.target.value }))
}
onChange={(e) => setNewOptionInputs((prev) => ({ ...prev, [parent.value]: e.target.value }))}
onKeyDown={(e) => {
// 한글 IME 조합 중에는 무시 (마지막 글자 중복 방지)
if (e.nativeEvent.isComposing) return;
@ -948,34 +920,27 @@ export default function CategoryValueCascadingTab() {
placeholder="하위 옵션 입력 후 Enter 또는 추가 버튼"
className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
/>
<Button
size="sm"
onClick={() => addChildOption(parent.value)}
className="h-8 sm:h-10"
>
<Button size="sm" onClick={() => addChildOption(parent.value)} className="h-8 sm:h-10">
<Plus className="h-4 w-4" />
</Button>
</div>
{/* 등록된 하위 옵션 목록 */}
<div className="flex flex-wrap gap-2">
{(childOptionsMap[parent.value] || []).map((option) => (
<div
key={option.code}
className="flex items-center gap-1 rounded-md bg-muted px-2 py-1"
>
<div key={option.code} className="bg-muted flex items-center gap-1 rounded-md px-2 py-1">
<span className="text-xs">{option.label}</span>
<button
type="button"
onClick={() => removeChildOption(parent.value, option.code)}
className="rounded-full hover:bg-muted-foreground/20 p-0.5"
className="hover:bg-muted-foreground/20 rounded-full p-0.5"
>
<X className="h-3 w-3 text-muted-foreground" />
<X className="text-muted-foreground h-3 w-3" />
</button>
</div>
))}
{(childOptionsMap[parent.value] || []).length === 0 && (
<span className="text-xs text-muted-foreground">등록된 하위 옵션이 없습니다</span>
<span className="text-muted-foreground text-xs">등록된 하위 옵션이 없습니다</span>
)}
</div>
</div>
@ -984,7 +949,7 @@ export default function CategoryValueCascadingTab() {
)}
</div>
<DialogFooter className="gap-2 sm:gap-0 border-t pt-4">
<DialogFooter className="gap-2 border-t pt-4 sm:gap-0">
<Button
variant="outline"
onClick={() => setIsMappingModalOpen(false)}
@ -1006,4 +971,3 @@ export default function CategoryValueCascadingTab() {
</div>
);
}

45
frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
View File

@ -6,13 +6,7 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
@ -34,21 +28,9 @@ import {
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Filter, Plus, RefreshCw, Search, Pencil, Trash2 } from "lucide-react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import {
cascadingConditionApi,
CascadingCondition,
CONDITION_OPERATORS,
} from "@/lib/api/cascadingCondition";
import { cascadingConditionApi, CascadingCondition, CONDITION_OPERATORS } from "@/lib/api/cascadingCondition";
import { cascadingRelationApi } from "@/lib/api/cascadingRelation";
export default function ConditionTab() {
@ -115,7 +97,7 @@ export default function ConditionTab() {
(c) =>
c.conditionName?.toLowerCase().includes(searchText.toLowerCase()) ||
c.relationCode?.toLowerCase().includes(searchText.toLowerCase()) ||
c.conditionField?.toLowerCase().includes(searchText.toLowerCase())
c.conditionField?.toLowerCase().includes(searchText.toLowerCase()),
);
// 모달 열기 (생성)
@ -171,7 +153,7 @@ export default function ConditionTab() {
toast.error(response.error || "삭제에 실패했습니다.");
}
} catch (error) {
showErrorToast("조건 삭제에 실패했습니다", error, { guidance: "잠시 후 다시 시도해 주세요." });
toast.error("삭제 중 오류가 발생했습니다.");
} finally {
setIsDeleteDialogOpen(false);
setDeletingConditionId(null);
@ -207,7 +189,7 @@ export default function ConditionTab() {
toast.error(response.error || "저장에 실패했습니다.");
}
} catch (error) {
showErrorToast("조건 저장에 실패했습니다", error, { guidance: "입력 데이터를 확인하고 다시 시도해 주세요." });
toast.error("저장 중 오류가 발생했습니다.");
}
};
@ -223,7 +205,7 @@ export default function ConditionTab() {
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="relative flex-1">
<Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="조건명, 관계 코드, 조건 필드로 검색..."
value={searchText}
@ -253,8 +235,7 @@ export default function ConditionTab() {
</CardDescription>
</div>
<Button onClick={handleOpenCreate}>
<Plus className="mr-2 h-4 w-4" />
새 규칙 추가
<Plus className="mr-2 h-4 w-4" />새 규칙 추가
</Button>
</div>
</CardHeader>
@ -324,11 +305,7 @@ export default function ConditionTab() {
<Button variant="ghost" size="icon" onClick={() => handleOpenEdit(condition)}>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteConfirm(condition.conditionId!)}
>
<Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(condition.conditionId!)}>
<Trash2 className="h-4 w-4 text-red-500" />
</Button>
</TableCell>
@ -345,9 +322,7 @@ export default function ConditionTab() {
<DialogContent className="max-w-lg">
<DialogHeader>
<DialogTitle>{editingCondition ? "조건부 규칙 수정" : "조건부 규칙 생성"}</DialogTitle>
<DialogDescription>
특정 필드 값에 따라 드롭다운 옵션을 필터링하는 규칙을 설정합니다.
</DialogDescription>
<DialogDescription>특정 필드 값에 따라 드롭다운 옵션을 필터링하는 규칙을 설정합니다.</DialogDescription>
</DialogHeader>
<div className="space-y-4">

95
frontend/app/(main)/admin/cascading-management/tabs/HierarchyColumnTab.tsx
View File

@ -5,13 +5,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
Dialog,
DialogContent,
@ -20,22 +14,12 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Plus, Pencil, Trash2, Database, RefreshCw, Layers } from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import {
hierarchyColumnApi,
HierarchyColumnGroup,
CreateHierarchyGroupRequest,
} from "@/lib/api/hierarchyColumn";
import { hierarchyColumnApi, HierarchyColumnGroup, CreateHierarchyGroupRequest } from "@/lib/api/hierarchyColumn";
import { commonCodeApi } from "@/lib/api/commonCode";
import apiClient from "@/lib/api/client";
@ -130,7 +114,7 @@ export default function HierarchyColumnTab() {
response.data.map((cat: any) => ({
categoryCode: cat.categoryCode || cat.category_code,
categoryName: cat.categoryName || cat.category_name,
}))
})),
);
}
} catch (error) {
@ -328,9 +312,7 @@ export default function HierarchyColumnTab() {
const handleMappingChange = (depth: number, field: string, value: any) => {
setFormData((prev) => ({
...prev,
mappings: prev.mappings.map((m) =>
m.depth === depth ? { ...m, [field]: value } : m
),
mappings: prev.mappings.map((m) => (m.depth === depth ? { ...m, [field]: value } : m)),
}));
};
@ -340,7 +322,7 @@ export default function HierarchyColumnTab() {
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold">계층구조 컬럼 그룹</h2>
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
공통코드 계층구조를 테이블 컬럼에 매핑하여 대분류/중분류/소분류를 각각 별도 컬럼에 저장합니다.
</p>
</div>
@ -350,8 +332,7 @@ export default function HierarchyColumnTab() {
새로고침
</Button>
<Button size="sm" onClick={openCreateModal}>
<Plus className="mr-2 h-4 w-4" />
새 그룹 추가
<Plus className="mr-2 h-4 w-4" />새 그룹 추가
</Button>
</div>
</div>
@ -360,23 +341,22 @@ export default function HierarchyColumnTab() {
{loading ? (
<div className="flex items-center justify-center py-12">
<LoadingSpinner />
<span className="ml-2 text-muted-foreground">로딩 중...</span>
<span className="text-muted-foreground ml-2">로딩 중...</span>
</div>
) : groups.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<Layers className="h-12 w-12 text-muted-foreground" />
<p className="mt-4 text-muted-foreground">계층구조 컬럼 그룹이 없습니다.</p>
<Layers className="text-muted-foreground h-12 w-12" />
<p className="text-muted-foreground mt-4">계층구조 컬럼 그룹이 없습니다.</p>
<Button className="mt-4" onClick={openCreateModal}>
<Plus className="mr-2 h-4 w-4" />
첫 번째 그룹 만들기
<Plus className="mr-2 h-4 w-4" />첫 번째 그룹 만들기
</Button>
</CardContent>
</Card>
) : (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{groups.map((group) => (
<Card key={group.group_id} className="hover:shadow-md transition-shadow">
<Card key={group.group_id} className="transition-shadow hover:shadow-md">
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div>
@ -387,7 +367,12 @@ export default function HierarchyColumnTab() {
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEditModal(group)}>
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => openDeleteDialog(group)}>
<Button
variant="ghost"
size="icon"
className="text-destructive h-8 w-8"
onClick={() => openDeleteDialog(group)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
@ -395,7 +380,7 @@ export default function HierarchyColumnTab() {
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center gap-2 text-sm">
<Database className="h-4 w-4 text-muted-foreground" />
<Database className="text-muted-foreground h-4 w-4" />
<span className="font-medium">{group.table_name}</span>
</div>
<div className="flex items-center gap-2">
@ -409,7 +394,7 @@ export default function HierarchyColumnTab() {
<Badge variant="outline" className="w-14 justify-center">
{mapping.level_label}
</Badge>
<span className="font-mono text-muted-foreground">{mapping.column_name}</span>
<span className="text-muted-foreground font-mono">{mapping.column_name}</span>
</div>
))}
</div>
@ -425,9 +410,7 @@ export default function HierarchyColumnTab() {
<DialogContent className="max-w-[600px]">
<DialogHeader>
<DialogTitle>{isEditing ? "계층구조 그룹 수정" : "계층구조 그룹 생성"}</DialogTitle>
<DialogDescription>
공통코드 계층구조를 테이블 컬럼에 매핑합니다.
</DialogDescription>
<DialogDescription>공통코드 계층구조를 테이블 컬럼에 매핑합니다.</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
@ -474,7 +457,9 @@ export default function HierarchyColumnTab() {
</SelectTrigger>
<SelectContent>
{loadingCategories ? (
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
<SelectItem value="_loading" disabled>
로딩 중...
</SelectItem>
) : (
categories.map((cat) => (
<SelectItem key={cat.categoryCode} value={cat.categoryCode}>
@ -497,7 +482,9 @@ export default function HierarchyColumnTab() {
</SelectTrigger>
<SelectContent>
{loadingTables ? (
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
<SelectItem value="_loading" disabled>
로딩 중...
</SelectItem>
) : (
tables.map((table) => (
<SelectItem key={table.tableName} value={table.tableName}>
@ -530,18 +517,14 @@ export default function HierarchyColumnTab() {
{/* 컬럼 매핑 */}
<div className="space-y-3 border-t pt-4">
<Label className="text-base font-medium">컬럼 매핑</Label>
<p className="text-xs text-muted-foreground">
각 계층 레벨에 저장할 컬럼을 선택합니다.
</p>
<p className="text-muted-foreground text-xs">각 계층 레벨에 저장할 컬럼을 선택합니다.</p>
{formData.mappings
.filter((m) => m.depth <= formData.maxDepth)
.map((mapping) => (
<div key={mapping.depth} className="grid grid-cols-4 gap-2 items-center">
<div key={mapping.depth} className="grid grid-cols-4 items-center gap-2">
<div className="flex items-center gap-2">
<Badge variant={mapping.depth === 1 ? "default" : "outline"}>
{mapping.depth}단계
</Badge>
<Badge variant={mapping.depth === 1 ? "default" : "outline"}>{mapping.depth}단계</Badge>
<Input
value={mapping.levelLabel}
onChange={(e) => handleMappingChange(mapping.depth, "levelLabel", e.target.value)}
@ -551,7 +534,9 @@ export default function HierarchyColumnTab() {
</div>
<Select
value={mapping.columnName || "_none"}
onValueChange={(value) => handleMappingChange(mapping.depth, "columnName", value === "_none" ? "" : value)}
onValueChange={(value) =>
handleMappingChange(mapping.depth, "columnName", value === "_none" ? "" : value)
}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="컬럼 선택" />
@ -559,7 +544,9 @@ export default function HierarchyColumnTab() {
<SelectContent>
<SelectItem value="_none">컬럼 선택</SelectItem>
{loadingColumns ? (
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
<SelectItem value="_loading" disabled>
로딩 중...
</SelectItem>
) : (
columns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
@ -582,7 +569,7 @@ export default function HierarchyColumnTab() {
onChange={(e) => handleMappingChange(mapping.depth, "isRequired", e.target.checked)}
className="h-4 w-4"
/>
<span className="text-xs text-muted-foreground">필수</span>
<span className="text-muted-foreground text-xs">필수</span>
</div>
</div>
))}
@ -593,9 +580,7 @@ export default function HierarchyColumnTab() {
<Button variant="outline" onClick={() => setModalOpen(false)}>
취소
</Button>
<Button onClick={handleSave}>
{isEditing ? "수정" : "생성"}
</Button>
<Button onClick={handleSave}>{isEditing ? "수정" : "생성"}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
@ -607,8 +592,7 @@ export default function HierarchyColumnTab() {
<DialogTitle>계층구조 그룹 삭제</DialogTitle>
<DialogDescription>
"{selectedGroup?.group_name}" 그룹을 삭제하시겠습니까?
<br />
이 작업은 되돌릴 수 없습니다.
<br />이 작업은 되돌릴 수 없습니다.
</DialogDescription>
</DialogHeader>
<DialogFooter>
@ -624,4 +608,3 @@ export default function HierarchyColumnTab() {
</div>
);
}

358
frontend/app/(main)/admin/layouts/page.tsx
View File

@ -221,9 +221,9 @@ export default function LayoutManagementPage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
<div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
<div>
<h1 className="text-3xl font-bold text-gray-900">레이아웃 관리</h1>
<p className="mt-2 text-gray-600">화면 레이아웃을 생성하고 관리합니다</p>
@ -233,186 +233,186 @@ export default function LayoutManagementPage() {
</Button>
</div>
{/* 검색 및 필터 */}
<Card className="mb-6 shadow-sm">
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
<Input
placeholder="레이아웃 이름 또는 설명으로 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyPress={handleKeyPress}
className="pl-10"
/>
</div>
</div>
<Button onClick={handleSearch}>검색</Button>
</div>
</CardContent>
</Card>
{/* 카테고리 탭 */}
<Tabs value={selectedCategory} onValueChange={setSelectedCategory} className="mb-6">
<TabsList className="grid w-full grid-cols-8">
<TabsTrigger value="all" className="flex items-center gap-2">
전체 ({total})
</TabsTrigger>
{Object.entries(LAYOUT_CATEGORIES).map(([key, value]) => {
const Icon = CATEGORY_ICONS[value as keyof typeof CATEGORY_ICONS];
const count = categoryCounts[value] || 0;
return (
<TabsTrigger key={key} value={value} className="flex items-center gap-2">
<Icon className="h-4 w-4" />
{CATEGORY_NAMES[value as keyof typeof CATEGORY_NAMES]} ({count})
</TabsTrigger>
);
})}
</TabsList>
<div className="mt-6">
{loading ? (
<div className="py-8 text-center">로딩 중...</div>
) : layouts.length === 0 ? (
<div className="py-8 text-center text-gray-500">레이아웃이 없습니다.</div>
) : (
<>
{/* 레이아웃 그리드 */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{layouts.map((layout) => {
const CategoryIcon = CATEGORY_ICONS[layout.category as keyof typeof CATEGORY_ICONS];
return (
<Card key={layout.layoutCode} className="shadow-sm transition-shadow hover:shadow-lg">
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div className="flex items-center gap-2">
<CategoryIcon className="h-5 w-5 text-gray-600" />
<Badge variant="secondary">
{CATEGORY_NAMES[layout.category as keyof typeof CATEGORY_NAMES]}
</Badge>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<Eye className="mr-2 h-4 w-4" />
미리보기
</DropdownMenuItem>
<DropdownMenuItem>
<Edit className="mr-2 h-4 w-4" />
편집
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDuplicate(layout)}>
<Copy className="mr-2 h-4 w-4" />
복제
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(layout)} className="text-red-600">
<Trash2 className="mr-2 h-4 w-4" />
삭제
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<CardTitle className="text-lg">{layout.layoutName}</CardTitle>
{layout.description && (
<p className="line-clamp-2 text-sm text-gray-600">{layout.description}</p>
)}
</CardHeader>
<CardContent>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-500">타입:</span>
<Badge variant="outline">{layout.layoutType}</Badge>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-gray-500">존 개수:</span>
<span>{layout.zonesConfig.length}개</span>
</div>
{layout.isPublic === "Y" && (
<Badge variant="default" className="w-full justify-center">
공개 레이아웃
</Badge>
)}
</div>
</CardContent>
</Card>
);
})}
</div>
{/* 페이지네이션 */}
{totalPages > 1 && (
<div className="mt-8 flex justify-center">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
이전
</Button>
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
<Button
key={page}
variant={currentPage === page ? "default" : "outline"}
size="sm"
onClick={() => handlePageChange(page)}
>
{page}
</Button>
))}
<Button
variant="outline"
size="sm"
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
다음
</Button>
</div>
{/* 검색 및 필터 */}
<Card className="mb-6 shadow-sm">
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
<Input
placeholder="레이아웃 이름 또는 설명으로 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyPress={handleKeyPress}
className="pl-10"
/>
</div>
)}
</>
)}
</div>
</Tabs>
</div>
<Button onClick={handleSearch}>검색</Button>
</div>
</CardContent>
</Card>
{/* 삭제 확인 다이얼로그 */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>레이아웃 삭제</AlertDialogTitle>
<AlertDialogDescription>
정말로 "{layoutToDelete?.layoutName}" 레이아웃을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* 카테고리 탭 */}
<Tabs value={selectedCategory} onValueChange={setSelectedCategory} className="mb-6">
<TabsList className="grid w-full grid-cols-8">
<TabsTrigger value="all" className="flex items-center gap-2">
전체 ({total})
</TabsTrigger>
{Object.entries(LAYOUT_CATEGORIES).map(([key, value]) => {
const Icon = CATEGORY_ICONS[value as keyof typeof CATEGORY_ICONS];
const count = categoryCounts[value] || 0;
return (
<TabsTrigger key={key} value={value} className="flex items-center gap-2">
<Icon className="h-4 w-4" />
{CATEGORY_NAMES[value as keyof typeof CATEGORY_NAMES]} ({count})
</TabsTrigger>
);
})}
</TabsList>
{/* 새 레이아웃 생성 모달 */}
<LayoutFormModal
open={createModalOpen}
onOpenChange={setCreateModalOpen}
onSuccess={() => {
loadLayouts();
loadCategoryCounts();
}}
/>
<div className="mt-6">
{loading ? (
<div className="py-8 text-center">로딩 중...</div>
) : layouts.length === 0 ? (
<div className="py-8 text-center text-gray-500">레이아웃이 없습니다.</div>
) : (
<>
{/* 레이아웃 그리드 */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{layouts.map((layout) => {
const CategoryIcon = CATEGORY_ICONS[layout.category as keyof typeof CATEGORY_ICONS];
return (
<Card key={layout.layoutCode} className="shadow-sm transition-shadow hover:shadow-lg">
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div className="flex items-center gap-2">
<CategoryIcon className="h-5 w-5 text-gray-600" />
<Badge variant="secondary">
{CATEGORY_NAMES[layout.category as keyof typeof CATEGORY_NAMES]}
</Badge>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<Eye className="mr-2 h-4 w-4" />
미리보기
</DropdownMenuItem>
<DropdownMenuItem>
<Edit className="mr-2 h-4 w-4" />
편집
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDuplicate(layout)}>
<Copy className="mr-2 h-4 w-4" />
복제
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(layout)} className="text-red-600">
<Trash2 className="mr-2 h-4 w-4" />
삭제
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<CardTitle className="text-lg">{layout.layoutName}</CardTitle>
{layout.description && (
<p className="line-clamp-2 text-sm text-gray-600">{layout.description}</p>
)}
</CardHeader>
<CardContent>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-500">타입:</span>
<Badge variant="outline">{layout.layoutType}</Badge>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-gray-500">존 개수:</span>
<span>{layout.zonesConfig.length}개</span>
</div>
{layout.isPublic === "Y" && (
<Badge variant="default" className="w-full justify-center">
공개 레이아웃
</Badge>
)}
</div>
</CardContent>
</Card>
);
})}
</div>
{/* 페이지네이션 */}
{totalPages > 1 && (
<div className="mt-8 flex justify-center">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
이전
</Button>
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
<Button
key={page}
variant={currentPage === page ? "default" : "outline"}
size="sm"
onClick={() => handlePageChange(page)}
>
{page}
</Button>
))}
<Button
variant="outline"
size="sm"
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
다음
</Button>
</div>
</div>
)}
</>
)}
</div>
</Tabs>
{/* 삭제 확인 다이얼로그 */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>레이아웃 삭제</AlertDialogTitle>
<AlertDialogDescription>
정말로 "{layoutToDelete?.layoutName}" 레이아웃을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* 새 레이아웃 생성 모달 */}
<LayoutFormModal
open={createModalOpen}
onOpenChange={setCreateModalOpen}
onSuccess={() => {
loadLayouts();
loadCategoryCounts();
}}
/>
</div>
</div>
);

232
frontend/app/(main)/admin/menu/page.tsx
View File

@ -43,7 +43,7 @@ export default function MenuPage() {
const [selectedMenuId, setSelectedMenuId] = useState<string>("");
const [selectedMenuName, setSelectedMenuName] = useState<string>("");
const [selectedMenus, setSelectedMenus] = useState<Set<string>>(new Set());
// 메뉴 관리 화면용 로컬 상태 (모든 상태의 메뉴 표시)
const [localAdminMenus, setLocalAdminMenus] = useState<MenuItem[]>([]);
const [localUserMenus, setLocalUserMenus] = useState<MenuItem[]>([]);
@ -326,7 +326,7 @@ export default function MenuPage() {
useEffect(() => {
const timer = setTimeout(() => {
if (userLang && !uiTextsLoading) {
// console.log("🔄 컴포넌트 마운트 후 다국어 텍스트 강제 로드");
// console.log("🔄 컴포넌트 마운트 후 다국어 텍스트 강제 로드");
loadUITexts();
}
}, 300); // 300ms 후 실행
@ -338,7 +338,7 @@ export default function MenuPage() {
useEffect(() => {
const fallbackTimer = setTimeout(() => {
if (!uiTextsLoading && Object.keys(uiTexts).length === 0) {
// console.log("🔄 안전장치: 컴포넌트 마운트 후 강제 다국어 텍스트 로드");
// console.log("🔄 안전장치: 컴포넌트 마운트 후 강제 다국어 텍스트 로드");
// 사용자 언어가 설정되지 않았을 때만 기본 텍스트 설정
if (!userLang) {
initializeDefaultTexts();
@ -393,7 +393,7 @@ export default function MenuPage() {
if (showLoading) {
setLoading(true);
}
if (type === "admin") {
const adminResponse = await menuApi.getAdminMenusForManagement();
if (adminResponse.success && adminResponse.data) {
@ -420,7 +420,7 @@ export default function MenuPage() {
if (showLoading) {
setLoading(true);
}
// 선택된 메뉴 타입에 해당하는 메뉴만 로드
if (selectedMenuType === "admin") {
const adminResponse = await menuApi.getAdminMenusForManagement();
@ -433,12 +433,12 @@ export default function MenuPage() {
setLocalUserMenus(userResponse.data);
}
}
// 전역 메뉴 상태도 업데이트 (좌측 사이드바용)
await refreshMenus();
// console.log("📋 메뉴 목록 조회 성공");
// console.log("📋 메뉴 목록 조회 성공");
} catch (error) {
// console.error("❌ 메뉴 목록 조회 실패:", error);
// console.error("❌ 메뉴 목록 조회 실패:", error);
toast.error(getUITextSync("message.error.load.menu.list"));
} finally {
if (showLoading) {
@ -454,16 +454,16 @@ export default function MenuPage() {
const response = await apiClient.get("/admin/companies");
if (response.data.success) {
// console.log("🏢 회사 목록 응답:", response.data);
// console.log("🏢 회사 목록 응답:", response.data);
const companyList = response.data.data.map((company: any) => ({
code: company.company_code || company.companyCode,
name: company.company_name || company.companyName,
}));
// console.log("🏢 변환된 회사 목록:", companyList);
// console.log("🏢 변환된 회사 목록:", companyList);
setCompanies(companyList);
}
} catch (error) {
// console.error("❌ 회사 목록 조회 실패:", error);
// console.error("❌ 회사 목록 조회 실패:", error);
}
};
@ -473,7 +473,7 @@ export default function MenuPage() {
// userLang이 설정되지 않았으면 기본값 설정
if (!userLang) {
// console.log("🌐 사용자 언어가 설정되지 않음, 기본값 설정");
// console.log("🌐 사용자 언어가 설정되지 않음, 기본값 설정");
const defaultTexts: Record<string, string> = {};
MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
defaultTexts[key] = getDefaultText(key); // 기본 한국어 텍스트 사용
@ -484,7 +484,7 @@ export default function MenuPage() {
// 사용자 언어가 설정된 경우, 기존 uiTexts가 비어있으면 기본 텍스트로 초기화
if (Object.keys(uiTexts).length === 0) {
// console.log("🌐 기존 uiTexts가 비어있음, 기본 텍스트로 초기화");
// console.log("🌐 기존 uiTexts가 비어있음, 기본 텍스트로 초기화");
const defaultTexts: Record<string, string> = {};
MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
defaultTexts[key] = getDefaultText(key);
@ -519,7 +519,7 @@ export default function MenuPage() {
if (response.data.success) {
const translations = response.data.data;
// console.log("🌐 배치 다국어 텍스트 응답:", translations);
// console.log("🌐 배치 다국어 텍스트 응답:", translations);
// 번역 결과를 상태에 저장 (기존 uiTexts와 병합)
const mergedTranslations = { ...uiTexts, ...translations };
@ -533,14 +533,14 @@ export default function MenuPage() {
// 번역 캐시에 저장 (다른 컴포넌트에서도 사용할 수 있도록)
setTranslationCache(userLang, mergedTranslations);
} else {
// console.error("❌ 다국어 텍스트 배치 조회 실패:", response.data.message);
// console.error("❌ 다국어 텍스트 배치 조회 실패:", response.data.message);
// API 실패 시에도 기존 uiTexts는 유지
// console.log("🔄 API 실패로 인해 기존 uiTexts 유지");
// console.log("🔄 API 실패로 인해 기존 uiTexts 유지");
}
} catch (error) {
// console.error("❌ UI 다국어 텍스트 로드 실패:", error);
// console.error("❌ UI 다국어 텍스트 로드 실패:", error);
// API 실패 시에도 기존 uiTexts는 유지
// console.log("🔄 API 실패로 인해 기존 uiTexts 유지");
// console.log("🔄 API 실패로 인해 기존 uiTexts 유지");
} finally {
setUiTextsLoading(false);
}
@ -574,9 +574,9 @@ export default function MenuPage() {
// console.log("🧪 다국어 API 테스트 시작");
try {
const text = getUITextSync("menu.management.admin");
// console.log("🧪 다국어 API 테스트 결과:", text);
// console.log("🧪 다국어 API 테스트 결과:", text);
} catch (error) {
// console.error("❌ 다국어 API 테스트 실패:", error);
// console.error("❌ 다국어 API 테스트 실패:", error);
}
};
@ -635,7 +635,7 @@ export default function MenuPage() {
const menuToEdit = currentMenus.find((menu) => (menu.objid || menu.OBJID) === menuId);
if (menuToEdit) {
// console.log("수정할 메뉴 정보:", menuToEdit);
// console.log("수정할 메뉴 정보:", menuToEdit);
setFormData({
menuId: menuId,
@ -692,7 +692,7 @@ export default function MenuPage() {
setDeleting(true);
try {
const menuIds = Array.from(selectedMenus);
// console.log("삭제할 메뉴 IDs:", menuIds);
// console.log("삭제할 메뉴 IDs:", menuIds);
toast.info(getUITextSync("message.menu.delete.processing"));
@ -712,11 +712,11 @@ export default function MenuPage() {
setSelectedMenus(new Set());
// 메뉴 목록 즉시 새로고침 (로딩 상태 없이)
// console.log("메뉴 목록 새로고침 시작");
// console.log("메뉴 목록 새로고침 시작");
await loadMenus(false);
// 전역 메뉴 상태도 업데이트
await refreshMenus();
// console.log("메뉴 목록 새로고침 완료");
// console.log("메뉴 목록 새로고침 완료");
// 삭제 결과 메시지
if (failedCount === 0) {
@ -730,11 +730,11 @@ export default function MenuPage() {
);
}
} else {
// console.error("삭제 실패:", response);
// console.error("삭제 실패:", response);
toast.error(response.message || "메뉴 삭제에 실패했습니다.");
}
} catch (error) {
// console.error("메뉴 삭제 중 오류:", error);
// console.error("메뉴 삭제 중 오류:", error);
toast.error(getUITextSync("message.menu.delete.failed"));
} finally {
setDeleting(false);
@ -782,7 +782,7 @@ export default function MenuPage() {
toast.error(response.message);
}
} catch (error) {
// console.error("메뉴 상태 토글 오류:", error);
// console.error("메뉴 상태 토글 오류:", error);
toast.error(getUITextSync("message.menu.status.toggle.failed"));
}
};
@ -824,7 +824,7 @@ export default function MenuPage() {
setSelectedMenuType(type);
setSelectedMenus(new Set()); // 선택된 메뉴 초기화
setExpandedMenus(new Set()); // 메뉴 타입 변경 시 확장 상태 초기화
// 선택한 메뉴 타입에 해당하는 메뉴만 로드
if (type === "admin" && localAdminMenus.length === 0) {
loadMenusForType("admin", false);
@ -876,12 +876,12 @@ export default function MenuPage() {
}
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">메뉴 관리</h1>
<p className="text-sm text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
<p className="text-muted-foreground text-sm">시스템 메뉴를 관리하고 화면을 할당합니다</p>
</div>
{/* 메인 컨텐츠 */}
@ -895,7 +895,7 @@ export default function MenuPage() {
{/* 메뉴 타입 선택 카드들 */}
<div className="space-y-3">
<div
className={`cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md ${
className={`bg-card cursor-pointer rounded-lg border p-4 shadow-sm transition-all hover:shadow-md ${
selectedMenuType === "admin" ? "border-primary bg-accent" : "hover:border-border"
}`}
onClick={() => handleMenuTypeChange("admin")}
@ -903,7 +903,7 @@ export default function MenuPage() {
<div className="flex items-center justify-between">
<div className="flex-1">
<h4 className="text-sm font-semibold">{getUITextSync("menu.management.admin")}</h4>
<p className="mt-1 text-xs text-muted-foreground">
<p className="text-muted-foreground mt-1 text-xs">
{getUITextSync("menu.management.admin.description")}
</p>
</div>
@ -914,7 +914,7 @@ export default function MenuPage() {
</div>
<div
className={`cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md ${
className={`bg-card cursor-pointer rounded-lg border p-4 shadow-sm transition-all hover:shadow-md ${
selectedMenuType === "user" ? "border-primary bg-accent" : "hover:border-border"
}`}
onClick={() => handleMenuTypeChange("user")}
@ -922,7 +922,7 @@ export default function MenuPage() {
<div className="flex items-center justify-between">
<div className="flex-1">
<h4 className="text-sm font-semibold">{getUITextSync("menu.management.user")}</h4>
<p className="mt-1 text-xs text-muted-foreground">
<p className="text-muted-foreground mt-1 text-xs">
{getUITextSync("menu.management.user.description")}
</p>
</div>
@ -950,88 +950,88 @@ export default function MenuPage() {
{/* 회사 선택 */}
<div className="w-full sm:w-[160px]">
<div className="company-dropdown relative">
<button
type="button"
onClick={() => setIsCompanyDropdownOpen(!isCompanyDropdownOpen)}
className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
>
<span className={selectedCompany === "all" ? "text-muted-foreground" : ""}>
{selectedCompany === "all"
? getUITextSync("filter.company.all")
: selectedCompany === "*"
? getUITextSync("filter.company.common")
: companies.find((c) => c.code === selectedCompany)?.name ||
getUITextSync("filter.company.all")}
</span>
<svg
className={`h-4 w-4 transition-transform ${isCompanyDropdownOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
<button
type="button"
onClick={() => setIsCompanyDropdownOpen(!isCompanyDropdownOpen)}
className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
>
<span className={selectedCompany === "all" ? "text-muted-foreground" : ""}>
{selectedCompany === "all"
? getUITextSync("filter.company.all")
: selectedCompany === "*"
? getUITextSync("filter.company.common")
: companies.find((c) => c.code === selectedCompany)?.name ||
getUITextSync("filter.company.all")}
</span>
<svg
className={`h-4 w-4 transition-transform ${isCompanyDropdownOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{isCompanyDropdownOpen && (
<div className="bg-popover text-popover-foreground absolute top-full left-0 z-[100] mt-1 w-full min-w-[200px] rounded-md border shadow-lg">
<div className="border-b p-2">
<Input
placeholder={getUITextSync("filter.company.search")}
value={companySearchText}
onChange={(e) => setCompanySearchText(e.target.value)}
className="h-8 text-sm"
onClick={(e) => e.stopPropagation()}
/>
</div>
<div className="max-h-48 overflow-y-auto">
<div
className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
onClick={() => {
setSelectedCompany("all");
setIsCompanyDropdownOpen(false);
setCompanySearchText("");
}}
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{isCompanyDropdownOpen && (
<div className="absolute top-full left-0 z-[100] mt-1 w-full min-w-[200px] rounded-md border bg-popover text-popover-foreground shadow-lg">
<div className="border-b p-2">
<Input
placeholder={getUITextSync("filter.company.search")}
value={companySearchText}
onChange={(e) => setCompanySearchText(e.target.value)}
className="h-8 text-sm"
onClick={(e) => e.stopPropagation()}
/>
</div>
<div className="max-h-48 overflow-y-auto">
<div
className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
onClick={() => {
setSelectedCompany("all");
setIsCompanyDropdownOpen(false);
setCompanySearchText("");
}}
>
{getUITextSync("filter.company.all")}
</div>
<div
className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
onClick={() => {
setSelectedCompany("*");
setIsCompanyDropdownOpen(false);
setCompanySearchText("");
}}
>
{getUITextSync("filter.company.common")}
</div>
{companies
.filter((company) => company.code && company.code.trim() !== "")
.filter(
(company) =>
company.name.toLowerCase().includes(companySearchText.toLowerCase()) ||
company.code.toLowerCase().includes(companySearchText.toLowerCase()),
)
.map((company, index) => (
<div
key={company.code || `company-${index}`}
className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
onClick={() => {
setSelectedCompany(company.code);
setIsCompanyDropdownOpen(false);
setCompanySearchText("");
}}
>
{company.code === "*" ? getUITextSync("filter.company.common") : company.name}
</div>
))}
</div>
{getUITextSync("filter.company.all")}
</div>
)}
<div
className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
onClick={() => {
setSelectedCompany("*");
setIsCompanyDropdownOpen(false);
setCompanySearchText("");
}}
>
{getUITextSync("filter.company.common")}
</div>
{companies
.filter((company) => company.code && company.code.trim() !== "")
.filter(
(company) =>
company.name.toLowerCase().includes(companySearchText.toLowerCase()) ||
company.code.toLowerCase().includes(companySearchText.toLowerCase()),
)
.map((company, index) => (
<div
key={company.code || `company-${index}`}
className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
onClick={() => {
setSelectedCompany(company.code);
setIsCompanyDropdownOpen(false);
setCompanySearchText("");
}}
>
{company.code === "*" ? getUITextSync("filter.company.common") : company.name}
</div>
))}
</div>
</div>
</div>
)}
</div>
</div>
{/* 검색 입력 */}
<div className="w-full sm:w-[240px]">
@ -1058,7 +1058,11 @@ export default function MenuPage() {
</Button>
{/* 최상위 메뉴 추가 */}
<Button variant="outline" onClick={() => handleAddTopLevelMenu()} className="h-10 gap-2 text-sm font-medium">
<Button
variant="outline"
onClick={() => handleAddTopLevelMenu()}
className="h-10 gap-2 text-sm font-medium"
>
{getUITextSync("button.add.top.level")}
</Button>

88
frontend/app/(main)/admin/monitoring/page.tsx
View File

@ -4,14 +4,7 @@ import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Progress } from "@/components/ui/progress";
import { RefreshCw, Play, Pause, AlertCircle, CheckCircle, Clock } from "lucide-react";
import { toast } from "sonner";
@ -24,12 +17,12 @@ export default function MonitoringPage() {
useEffect(() => {
loadMonitoringData();
let interval: NodeJS.Timeout;
if (autoRefresh) {
interval = setInterval(loadMonitoringData, 30000); // 30초마다 자동 새로고침
}
return () => {
if (interval) clearInterval(interval);
};
@ -58,13 +51,13 @@ export default function MonitoringPage() {
const getStatusIcon = (status: string) => {
switch (status) {
case 'completed':
case "completed":
return <CheckCircle className="h-4 w-4 text-green-500" />;
case 'failed':
case "failed":
return <AlertCircle className="h-4 w-4 text-red-500" />;
case 'running':
case "running":
return <Play className="h-4 w-4 text-blue-500" />;
case 'pending':
case "pending":
return <Clock className="h-4 w-4 text-yellow-500" />;
default:
return <Clock className="h-4 w-4 text-gray-500" />;
@ -110,9 +103,9 @@ export default function MonitoringPage() {
if (!monitoring) {
return (
<div className="flex items-center justify-center h-64">
<div className="flex h-64 items-center justify-center">
<div className="text-center">
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
<RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin" />
<p>모니터링 데이터를 불러오는 중...</p>
</div>
</div>
@ -121,13 +114,11 @@ export default function MonitoringPage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 헤더 */}
<div>
<h1 className="text-2xl font-bold">모니터링</h1>
<p className="text-muted-foreground">
배치 작업 실행 상태를 실시간으로 모니터링합니다.
</p>
<p className="text-muted-foreground">배치 작업 실행 상태를 실시간으로 모니터링합니다.</p>
</div>
{/* 모니터링 대시보드 */}
@ -142,23 +133,18 @@ export default function MonitoringPage() {
onClick={toggleAutoRefresh}
className={autoRefresh ? "bg-accent text-primary" : ""}
>
{autoRefresh ? <Pause className="h-4 w-4 mr-1" /> : <Play className="h-4 w-4 mr-1" />}
{autoRefresh ? <Pause className="mr-1 h-4 w-4" /> : <Play className="mr-1 h-4 w-4" />}
자동 새로고침
</Button>
<Button
variant="outline"
size="sm"
onClick={handleRefresh}
disabled={isLoading}
>
<RefreshCw className={`h-4 w-4 mr-1 ${isLoading ? 'animate-spin' : ''}`} />
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={isLoading}>
<RefreshCw className={`mr-1 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
새로고침
</Button>
</div>
</div>
{/* 통계 카드 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">총 작업 수</CardTitle>
@ -166,9 +152,7 @@ export default function MonitoringPage() {
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{monitoring.total_jobs}</div>
<p className="text-xs text-muted-foreground">
활성: {monitoring.active_jobs}개
</p>
<p className="text-muted-foreground text-xs">활성: {monitoring.active_jobs}개</p>
</CardContent>
</Card>
@ -178,10 +162,8 @@ export default function MonitoringPage() {
<div className="text-2xl">🔄</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-primary">{monitoring.running_jobs}</div>
<p className="text-xs text-muted-foreground">
현재 실행 중인 작업
</p>
<div className="text-primary text-2xl font-bold">{monitoring.running_jobs}</div>
<p className="text-muted-foreground text-xs">현재 실행 중인 작업</p>
</CardContent>
</Card>
@ -192,9 +174,7 @@ export default function MonitoringPage() {
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-green-600">{monitoring.successful_jobs_today}</div>
<p className="text-xs text-muted-foreground">
성공률: {getSuccessRate()}%
</p>
<p className="text-muted-foreground text-xs">성공률: {getSuccessRate()}%</p>
</CardContent>
</Card>
@ -204,10 +184,8 @@ export default function MonitoringPage() {
<div className="text-2xl">❌</div>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-destructive">{monitoring.failed_jobs_today}</div>
<p className="text-xs text-muted-foreground">
주의가 필요한 작업
</p>
<div className="text-destructive text-2xl font-bold">{monitoring.failed_jobs_today}</div>
<p className="text-muted-foreground text-xs">주의가 필요한 작업</p>
</CardContent>
</Card>
</div>
@ -224,9 +202,7 @@ export default function MonitoringPage() {
<span>실패: {monitoring.failed_jobs_today}건</span>
</div>
<Progress value={getSuccessRate()} className="h-2" />
<div className="text-center text-sm text-muted-foreground">
{getSuccessRate()}% 성공률
</div>
<div className="text-muted-foreground text-center text-sm">{getSuccessRate()}% 성공률</div>
</div>
</CardContent>
</Card>
@ -238,9 +214,7 @@ export default function MonitoringPage() {
</CardHeader>
<CardContent>
{monitoring.recent_executions.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
최근 실행 이력이 없습니다.
</div>
<div className="text-muted-foreground py-8 text-center">최근 실행 이력이 없습니다.</div>
) : (
<Table>
<TableHeader>
@ -264,25 +238,17 @@ export default function MonitoringPage() {
</TableCell>
<TableCell className="font-mono">#{execution.job_id}</TableCell>
<TableCell>
{execution.started_at
? new Date(execution.started_at).toLocaleString()
: "-"}
{execution.started_at ? new Date(execution.started_at).toLocaleString() : "-"}
</TableCell>
<TableCell>
{execution.completed_at
? new Date(execution.completed_at).toLocaleString()
: "-"}
{execution.completed_at ? new Date(execution.completed_at).toLocaleString() : "-"}
</TableCell>
<TableCell>
{execution.execution_time_ms
? formatDuration(execution.execution_time_ms)
: "-"}
{execution.execution_time_ms ? formatDuration(execution.execution_time_ms) : "-"}
</TableCell>
<TableCell className="max-w-xs">
{execution.error_message ? (
<span className="text-destructive text-sm truncate block">
{execution.error_message}
</span>
<span className="text-destructive block truncate text-sm">{execution.error_message}</span>
) : (
"-"
)}

1
frontend/app/(main)/admin/page.tsx
View File

@ -9,7 +9,6 @@ export default function AdminPage() {
return (
<div className="bg-background min-h-screen">
<div className="w-full max-w-none space-y-16 px-4 pt-12 pb-16">
{/* 주요 관리 기능 */}
<div className="mx-auto max-w-7xl space-y-10">
<div className="mb-8 text-center">

20
frontend/app/(main)/admin/screenMng/dashboardList/[id]/page.tsx
View File

@ -8,18 +8,18 @@ import { DashboardTopMenu } from "@/components/admin/dashboard/DashboardTopMenu"
import { WidgetConfigSidebar } from "@/components/admin/dashboard/WidgetConfigSidebar";
import { DashboardSaveModal } from "@/components/admin/dashboard/DashboardSaveModal";
import { DashboardElement, ElementType, ElementSubtype } from "@/components/admin/dashboard/types";
import { GRID_CONFIG, snapToGrid, snapSizeToGrid, calculateCellSize, calculateBoxSize } from "@/components/admin/dashboard/gridUtils";
import {
GRID_CONFIG,
snapToGrid,
snapSizeToGrid,
calculateCellSize,
calculateBoxSize,
} from "@/components/admin/dashboard/gridUtils";
import { Resolution, RESOLUTIONS, detectScreenResolution } from "@/components/admin/dashboard/ResolutionSelector";
import { DashboardProvider } from "@/contexts/DashboardContext";
import { useMenu } from "@/contexts/MenuContext";
import { useKeyboardShortcuts } from "@/components/admin/dashboard/hooks/useKeyboardShortcuts";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
AlertDialog,
AlertDialogAction,
@ -659,9 +659,7 @@ export default function DashboardDesignerPage({ params }: { params: Promise<{ id
<CheckCircle2 className="text-success h-6 w-6" />
</div>
<DialogTitle className="text-center">저장 완료</DialogTitle>
<DialogDescription className="text-center">
대시보드가 성공적으로 저장되었습니다.
</DialogDescription>
<DialogDescription className="text-center">대시보드가 성공적으로 저장되었습니다.</DialogDescription>
</DialogHeader>
<div className="flex justify-center pt-4">
<Button

22
frontend/app/(main)/admin/screenMng/dashboardList/page.tsx
View File

@ -27,7 +27,7 @@ import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw
export default function DashboardListPage() {
const router = useRouter();
const { toast } = useToast();
// 상태 관리
const [dashboards, setDashboards] = useState<Dashboard[]>([]);
const [loading, setLoading] = useState(true); // CSR이므로 초기 로딩 true
@ -187,9 +187,11 @@ export default function DashboardListPage() {
총 <span className="text-foreground font-semibold">{totalCount.toLocaleString()}</span> 건
</div>
</div>
<Button onClick={() => router.push("/admin/screenMng/dashboardList/new")} className="h-10 gap-2 text-sm font-medium">
<Plus className="h-4 w-4" />
새 대시보드 생성
<Button
onClick={() => router.push("/admin/screenMng/dashboardList/new")}
className="h-10 gap-2 text-sm font-medium"
>
<Plus className="h-4 w-4" />새 대시보드 생성
</Button>
</div>
@ -299,12 +301,12 @@ export default function DashboardListPage() {
{dashboards.map((dashboard) => (
<TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16 text-sm font-medium">
<button
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
>
{dashboard.title}
</button>
<button
onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
>
{dashboard.title}
</button>
</TableCell>
<TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
{dashboard.description || "-"}

127
frontend/app/(main)/admin/screenMng/popScreenMngList/page.tsx
View File

@ -4,17 +4,7 @@ import { useState, useEffect, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Plus,
RefreshCw,
Search,
Smartphone,
Eye,
Settings,
LayoutGrid,
GitBranch,
Upload,
} from "lucide-react";
import { Plus, RefreshCw, Search, Smartphone, Eye, Settings, LayoutGrid, GitBranch } from "lucide-react";
import { PopDesigner } from "@/components/pop/designer";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { ScreenDefinition } from "@/types/screen";
@ -28,7 +18,6 @@ import {
PopScreenPreview,
PopScreenFlowView,
PopScreenSettingModal,
PopDeployModal,
} from "@/components/pop/management";
import { PopScreenGroup } from "@/lib/api/popScreenGroup";
@ -64,10 +53,6 @@ export default function PopScreenManagementPage() {
// UI 상태
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
const [isDeployModalOpen, setIsDeployModalOpen] = useState(false);
const [deployGroupScreens, setDeployGroupScreens] = useState<ScreenDefinition[]>([]);
const [deployGroupName, setDeployGroupName] = useState("");
const [deployGroupInfo, setDeployGroupInfo] = useState<any>(undefined);
const [devicePreview, setDevicePreview] = useState<DevicePreview>("tablet");
const [rightPanelView, setRightPanelView] = useState<RightPanelView>("preview");
@ -199,7 +184,7 @@ export default function PopScreenManagementPage() {
if (isDesignMode && selectedScreen) {
return (
<div className="fixed inset-0 z-50 bg-background">
<div className="bg-background fixed inset-0 z-50">
<PopDesigner
selectedScreen={selectedScreen}
onBackToList={() => goToStep("list")}
@ -208,13 +193,6 @@ export default function PopScreenManagementPage() {
...selectedScreen,
...updatedFields,
});
setScreens((prev) =>
prev.map((s) =>
s.screenId === selectedScreen.screenId
? { ...s, ...updatedFields }
: s
)
);
}}
/>
</div>
@ -226,9 +204,9 @@ export default function PopScreenManagementPage() {
// ============================================================
return (
<div className="flex h-screen flex-col bg-background overflow-hidden">
<div className="bg-background flex h-screen flex-col overflow-hidden">
{/* 페이지 헤더 */}
<div className="shrink-0 border-b bg-background px-6 py-4">
<div className="bg-background shrink-0 border-b px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div>
@ -238,7 +216,7 @@ export default function PopScreenManagementPage() {
모바일/태블릿
</Badge>
</div>
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
POP 화면을 카테고리별로 관리하고 모바일/태블릿에 최적화된 화면을 설계합니다
</p>
</div>
@ -248,24 +226,8 @@ export default function PopScreenManagementPage() {
<Button variant="outline" size="icon" onClick={loadScreens}>
<RefreshCw className="h-4 w-4" />
</Button>
{selectedScreen && (
<Button
variant="outline"
onClick={() => {
setDeployGroupScreens([]);
setDeployGroupName("");
setDeployGroupInfo(undefined);
setIsDeployModalOpen(true);
}}
className="gap-2"
>
<Upload className="h-4 w-4" />
복사
</Button>
)}
<Button onClick={() => setIsCreateOpen(true)} className="gap-2">
<Plus className="h-4 w-4" />
새 POP 화면
<Plus className="h-4 w-4" />새 POP 화면
</Button>
</div>
</div>
@ -274,38 +236,37 @@ export default function PopScreenManagementPage() {
{/* 메인 콘텐츠 */}
{popScreenCount === 0 ? (
// POP 화면이 없을 때 빈 상태 표시
<div className="flex-1 flex flex-col items-center justify-center text-center p-8">
<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
<Smartphone className="h-8 w-8 text-muted-foreground" />
<div className="flex flex-1 flex-col items-center justify-center p-8 text-center">
<div className="bg-muted mb-4 flex h-16 w-16 items-center justify-center rounded-full">
<Smartphone className="text-muted-foreground h-8 w-8" />
</div>
<h3 className="text-lg font-semibold mb-2">POP 화면이 없습니다</h3>
<p className="text-sm text-muted-foreground mb-6 max-w-md">
<h3 className="mb-2 text-lg font-semibold">POP 화면이 없습니다</h3>
<p className="text-muted-foreground mb-6 max-w-md text-sm">
아직 생성된 POP 화면이 없습니다.
<br />
"새 POP 화면" 버튼을 클릭하여 모바일/태블릿용 화면을 만들어보세요.
</p>
<Button onClick={() => setIsCreateOpen(true)} className="gap-2">
<Plus className="h-4 w-4" />
새 POP 화면 만들기
<Plus className="h-4 w-4" />새 POP 화면 만들기
</Button>
</div>
) : (
<div className="flex-1 overflow-hidden flex">
<div className="flex flex-1 overflow-hidden">
{/* 왼쪽: 카테고리 트리 + 화면 목록 */}
<div className="w-[320px] min-w-[280px] max-w-[400px] flex flex-col border-r bg-background overflow-hidden">
<div className="bg-background flex w-[320px] max-w-[400px] min-w-[280px] flex-col border-r">
{/* 검색 */}
<div className="shrink-0 p-3 border-b">
<div className="shrink-0 border-b p-3">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="POP 화면 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-9 h-9"
className="h-9 pl-9"
/>
</div>
<div className="flex items-center justify-between mt-2">
<span className="text-xs text-muted-foreground">POP 화면</span>
<div className="mt-2 flex items-center justify-between">
<span className="text-muted-foreground text-xs">POP 화면</span>
<Badge variant="outline" className="text-xs">
{popScreenCount}개
</Badge>
@ -318,40 +279,22 @@ export default function PopScreenManagementPage() {
selectedScreen={selectedScreen}
onScreenSelect={handleScreenSelect}
onScreenDesign={handleDesignScreen}
onScreenSettings={(screen) => {
setSelectedScreen(screen);
setIsSettingModalOpen(true);
}}
onScreenCopy={(screen) => {
setSelectedScreen(screen);
setDeployGroupScreens([]);
setDeployGroupName("");
setDeployGroupInfo(undefined);
setIsDeployModalOpen(true);
}}
onGroupCopy={(groupScreensList, groupName, gInfo) => {
setSelectedScreen(null);
setDeployGroupScreens(groupScreensList);
setDeployGroupName(groupName);
setDeployGroupInfo(gInfo);
setIsDeployModalOpen(true);
}}
onGroupSelect={handleGroupSelect}
searchTerm={searchTerm}
/>
</div>
{/* 오른쪽: 미리보기 / 화면 흐름 */}
<div className="flex-1 flex flex-col overflow-hidden">
<div className="flex flex-1 flex-col overflow-hidden">
{/* 오른쪽 패널 헤더 */}
<div className="shrink-0 px-4 py-2 border-b bg-background flex items-center justify-between">
<div className="bg-background flex shrink-0 items-center justify-between border-b px-4 py-2">
<Tabs value={rightPanelView} onValueChange={(v) => setRightPanelView(v as RightPanelView)}>
<TabsList className="h-8">
<TabsTrigger value="preview" className="h-7 px-3 text-xs gap-1.5">
<TabsTrigger value="preview" className="h-7 gap-1.5 px-3 text-xs">
<LayoutGrid className="h-3.5 w-3.5" />
미리보기
</TabsTrigger>
<TabsTrigger value="flow" className="h-7 px-3 text-xs gap-1.5">
<TabsTrigger value="flow" className="h-7 gap-1.5 px-3 text-xs">
<GitBranch className="h-3.5 w-3.5" />
화면 흐름
</TabsTrigger>
@ -366,16 +309,10 @@ export default function PopScreenManagementPage() {
className="h-7 px-2 text-xs"
onClick={() => handlePreviewScreen(selectedScreen)}
>
<Eye className="h-3.5 w-3.5 mr-1" />
새 탭
<Eye className="mr-1 h-3.5 w-3.5" />새 탭
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-xs"
onClick={handleOpenSettings}
>
<Settings className="h-3.5 w-3.5 mr-1" />
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleOpenSettings}>
<Settings className="mr-1 h-3.5 w-3.5" />
설정
</Button>
<Button
@ -429,18 +366,6 @@ export default function PopScreenManagementPage() {
}}
/>
{/* POP 화면 배포 모달 */}
<PopDeployModal
open={isDeployModalOpen}
onOpenChange={setIsDeployModalOpen}
screen={selectedScreen}
groupScreens={deployGroupScreens.length > 0 ? deployGroupScreens : undefined}
groupName={deployGroupName || undefined}
groupInfo={deployGroupInfo}
allScreens={screens}
onDeployed={loadScreens}
/>
{/* Scroll to Top 버튼 */}
<ScrollToTop />
</div>

81
frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useState, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
@ -9,11 +9,57 @@ import { PageListPanel } from "@/components/report/designer/PageListPanel";
import { ReportDesignerLeftPanel } from "@/components/report/designer/ReportDesignerLeftPanel";
import { ReportDesignerCanvas } from "@/components/report/designer/ReportDesignerCanvas";
import { ReportDesignerRightPanel } from "@/components/report/designer/ReportDesignerRightPanel";
import { ReportDesignerProvider } from "@/contexts/ReportDesignerContext";
import { ReportDesignerProvider, useReportDesigner } from "@/contexts/ReportDesignerContext";
import { ComponentSettingsModal } from "@/components/report/designer/modals/ComponentSettingsModal";
import { reportApi } from "@/lib/api/reportApi";
import { useToast } from "@/hooks/use-toast";
import { Loader2 } from "lucide-react";
const BREAKPOINT_COLLAPSE_LEFT = 1200;
const BREAKPOINT_COLLAPSE_ALL = 900;
function DesignerLayout() {
const {
setIsPageListCollapsed,
setIsLeftPanelCollapsed,
setIsRightPanelCollapsed,
} = useReportDesigner();
const handleResize = useCallback(() => {
const w = window.innerWidth;
if (w < BREAKPOINT_COLLAPSE_ALL) {
setIsPageListCollapsed(true);
setIsLeftPanelCollapsed(true);
setIsRightPanelCollapsed(true);
} else if (w < BREAKPOINT_COLLAPSE_LEFT) {
setIsPageListCollapsed(true);
setIsLeftPanelCollapsed(false);
setIsRightPanelCollapsed(false);
}
}, [setIsPageListCollapsed, setIsLeftPanelCollapsed, setIsRightPanelCollapsed]);
useEffect(() => {
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, [handleResize]);
return (
<div className="flex h-screen min-w-[768px] flex-col overflow-hidden bg-gray-50">
<ReportDesignerToolbar />
<div className="flex min-h-0 flex-1 overflow-hidden">
<PageListPanel />
<ReportDesignerLeftPanel />
<ReportDesignerCanvas />
<ReportDesignerRightPanel />
</div>
<ComponentSettingsModal />
</div>
);
}
export default function ReportDesignerPage() {
const params = useParams();
const router = useRouter();
@ -23,7 +69,6 @@ export default function ReportDesignerPage() {
useEffect(() => {
const loadReport = async () => {
// 'new'는 새 리포트 생성 모드
if (reportId === "new") {
setIsLoading(false);
return;
@ -65,28 +110,12 @@ export default function ReportDesignerPage() {
}
return (
<DndProvider backend={HTML5Backend}>
<ReportDesignerProvider reportId={reportId}>
<div className="flex h-screen flex-col overflow-hidden bg-gray-50">
{/* 상단 툴바 */}
<ReportDesignerToolbar />
{/* 메인 영역 */}
<div className="flex flex-1 overflow-hidden">
{/* 페이지 목록 패널 */}
<PageListPanel />
{/* 좌측 패널 (템플릿, 컴포넌트) */}
<ReportDesignerLeftPanel />
{/* 중앙 캔버스 */}
<ReportDesignerCanvas />
{/* 우측 패널 (속성) */}
<ReportDesignerRightPanel />
</div>
</div>
</ReportDesignerProvider>
</DndProvider>
<div id="report-designer-dnd-root">
<DndProvider backend={HTML5Backend}>
<ReportDesignerProvider reportId={reportId}>
<DesignerLayout />
</ReportDesignerProvider>
</DndProvider>
</div>
);
}

620
frontend/app/(main)/admin/screenMng/reportList/page.tsx
View File

@ -1,104 +1,576 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useState, useMemo, useRef, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Calendar } from "@/components/ui/calendar";
import { ReportListTable } from "@/components/report/ReportListTable";
import { Plus, Search, RotateCcw } from "lucide-react";
import { ReportCreateModal } from "@/components/report/ReportCreateModal";
import { ReportCopyModal } from "@/components/report/ReportCopyModal";
import { ReportListPreviewModal } from "@/components/report/ReportListPreviewModal";
import {
Plus,
Search,
LayoutGrid,
List,
FileText,
Users,
SlidersHorizontal,
Check,
Tag,
CalendarDays,
User,
X,
} from "lucide-react";
import { useReportList } from "@/hooks/useReportList";
import { useCountUp } from "@/hooks/useCountUp";
import { ReportMaster } from "@/types/report";
import { PieChart, Pie, Cell, Tooltip, BarChart, Bar, XAxis, ResponsiveContainer } from "recharts";
import { REPORT_TYPE_COLORS, getTypeColorIndex, getTypeLabel, getTypeIcon } from "@/lib/reportTypeColors";
import { format, subDays, subMonths, startOfDay } from "date-fns";
import { ko } from "date-fns/locale";
const SEARCH_FIELD_OPTIONS = [
{ value: "report_type" as const, label: "카테고리", icon: Tag },
{ value: "report_name" as const, label: "리포트명", icon: FileText },
{ value: "updated_at" as const, label: "기간 검색", icon: CalendarDays },
{ value: "created_by" as const, label: "작성자", icon: User },
];
export default function ReportManagementPage() {
const router = useRouter();
const [searchText, setSearchText] = useState("");
const [viewMode, setViewMode] = useState<"grid" | "list">("list");
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [copyTarget, setCopyTarget] = useState<ReportMaster | null>(null);
const [viewTarget, setViewTarget] = useState<ReportMaster | null>(null);
const [filterOpen, setFilterOpen] = useState(false);
const [datePopoverOpen, setDatePopoverOpen] = useState(false);
const [tempStartDate, setTempStartDate] = useState<Date | undefined>(undefined);
const [tempEndDate, setTempEndDate] = useState<Date | undefined>(undefined);
const filterRef = useRef<HTMLDivElement>(null);
const { reports, total, page, limit, isLoading, refetch, setPage, handleSearch } = useReportList();
const {
reports,
total,
typeSummary,
recentActivity,
recentTotal,
page,
limit,
isLoading,
searchField,
startDate,
endDate,
refetch,
setPage,
setLimit,
handleSearch,
handleSearchFieldChange,
handleDateRangeChange,
} = useReportList();
const handleSearchClick = () => {
handleSearch(searchText);
};
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (filterRef.current && !filterRef.current.contains(e.target as Node)) {
setFilterOpen(false);
setDatePopoverOpen(false);
}
};
if (filterOpen) document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [filterOpen]);
const handleReset = () => {
setSearchText("");
handleSearch("");
const isDateFilterActive = searchField === "updated_at" && startDate && endDate;
const handleDatePreset = useCallback((days: number) => {
const end = new Date();
const start = days === 0 ? startOfDay(end) : subDays(end, days);
setTempStartDate(start);
setTempEndDate(end);
}, []);
const handleMonthPreset = useCallback((months: number) => {
const end = new Date();
const start = subMonths(end, months);
setTempStartDate(start);
setTempEndDate(end);
}, []);
const handleApplyDateFilter = useCallback(() => {
if (!tempStartDate || !tempEndDate) return;
handleSearchFieldChange("updated_at");
handleDateRangeChange(format(tempStartDate, "yyyy-MM-dd"), format(tempEndDate, "yyyy-MM-dd"));
setDatePopoverOpen(false);
setFilterOpen(false);
}, [tempStartDate, tempEndDate, handleSearchFieldChange, handleDateRangeChange]);
const handleClearDateFilter = useCallback(() => {
setTempStartDate(undefined);
setTempEndDate(undefined);
handleSearchFieldChange("report_name");
handleDateRangeChange("", "");
}, [handleSearchFieldChange, handleDateRangeChange]);
const typeData = useMemo(() => typeSummary.map(({ type, count }) => ({ type, value: count })), [typeSummary]);
const authorStats = useMemo(() => {
const map = new Map<string, number>();
reports.forEach((r) => {
const author = r.created_by || "미지정";
map.set(author, (map.get(author) || 0) + 1);
});
return Array.from(map.entries())
.map(([name, count]) => ({ name, count }))
.sort((a, b) => b.count - a.count)
.slice(0, 5);
}, [reports]);
const authorCount = useMemo(() => new Set(reports.map((r) => r.created_by).filter(Boolean)).size, [reports]);
const ANIM_DURATION = 1800;
const animatedTotal = useCountUp(total, { duration: ANIM_DURATION });
const animatedAuthorCount = useCountUp(authorCount, { duration: ANIM_DURATION });
const animatedRecentTotal = useCountUp(recentTotal, { duration: ANIM_DURATION });
const handleSearchClick = () => handleSearch(searchText);
const handleViewModeChange = (mode: "grid" | "list") => {
setViewMode(mode);
setLimit(mode === "grid" ? 9 : 8);
setPage(1);
};
const handleCreateNew = () => {
// 새 리포트는 'new'라는 특수 ID로 디자이너 진입
router.push("/admin/screenMng/reportList/designer/new");
setIsCreateOpen(true);
};
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
<div>
<h1 className="text-3xl font-bold text-gray-900">리포트 관리</h1>
<p className="mt-2 text-gray-600">리포트를 생성하고 관리합니다</p>
</div>
<Button onClick={handleCreateNew} className="gap-2">
<Plus className="h-4 w-4" />새 리포트
</Button>
</div>
const currentFieldLabel = SEARCH_FIELD_OPTIONS.find((o) => o.value === searchField)?.label ?? "리포트명";
{/* 검색 영역 */}
<Card className="shadow-sm">
<CardHeader className="bg-gray-50/50">
<CardTitle className="flex items-center gap-2">
<Search className="h-5 w-5" />
검색
</CardTitle>
</CardHeader>
<CardContent className="pt-6">
<div className="flex gap-2">
return (
<div className="report-page-content min-h-screen bg-gray-50">
<div className="sticky top-0 z-10 border-b bg-white">
<div className="mx-24 py-4">
<div className="mb-3 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">리포트 관리</h1>
<p className="mt-0.5 text-sm text-gray-500">리포트를 생성하고 관리합니다</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="relative w-full sm:w-[540px]">
<Search className="absolute top-1/2 left-3.5 h-5 w-5 -translate-y-1/2 text-gray-400" />
<Input
placeholder="리포트명으로 검색..."
placeholder={`${currentFieldLabel}(으)로 검색...`}
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearchClick();
}
}}
className="flex-1"
onKeyDown={(e) => e.key === "Enter" && handleSearchClick()}
className="h-11 pl-11 text-base"
/>
<Button onClick={handleSearchClick} className="gap-2">
<Search className="h-4 w-4" />
검색
</div>
<Button
onClick={handleSearchClick}
size="icon"
variant="outline"
className="h-11 w-11 shrink-0"
title="검색"
>
<Search className="h-5 w-5" />
</Button>
<div ref={filterRef} className="relative">
<Button
onClick={() => setFilterOpen(!filterOpen)}
size="icon"
variant="outline"
className={`h-11 w-11 shrink-0 ${filterOpen || isDateFilterActive ? "border-blue-400 bg-blue-50 text-blue-600" : ""}`}
title="검색 필터"
>
<SlidersHorizontal className="h-5 w-5" />
</Button>
<Button onClick={handleReset} variant="outline" className="gap-2">
<RotateCcw className="h-4 w-4" />
초기화
{filterOpen && !datePopoverOpen && (
<div className="absolute top-full right-0 z-50 mt-1.5 w-52 rounded-lg border border-gray-200 bg-white py-1.5 shadow-lg">
<div className="px-3.5 py-2 text-sm font-semibold text-gray-400">검색 기준</div>
{SEARCH_FIELD_OPTIONS.map((opt) => {
const Icon = opt.icon;
const isDateOption = opt.value === "updated_at";
return (
<button
key={opt.value}
onClick={() => {
if (isDateOption) {
setDatePopoverOpen(true);
} else {
handleSearchFieldChange(opt.value);
handleDateRangeChange("", "");
setFilterOpen(false);
}
}}
className={`flex w-full items-center gap-2.5 px-3.5 py-2.5 text-base transition-colors hover:bg-gray-50 ${
searchField === opt.value || (isDateOption && searchField === "updated_at")
? "font-medium text-blue-600"
: "text-gray-700"
}`}
>
<Icon className="h-4 w-4 shrink-0" />
<span className="flex-1 text-left">{opt.label}</span>
{isDateOption && <span className="text-xs text-gray-400">&#9656;</span>}
{!isDateOption && searchField === opt.value && (
<Check className="h-4.5 w-4.5 shrink-0 text-blue-600" />
)}
</button>
);
})}
</div>
)}
{filterOpen && datePopoverOpen && (
<div
className="absolute top-full right-0 z-50 mt-1.5 rounded-lg border border-gray-200 bg-white shadow-lg"
onMouseDown={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between border-b px-4 py-3">
<button
onClick={() => setDatePopoverOpen(false)}
className="text-sm text-gray-500 hover:text-gray-700"
>
&larr; 뒤로
</button>
<span className="text-sm font-semibold text-gray-700">기간 검색</span>
<div className="w-10" />
</div>
<div className="space-y-3 p-4">
<div className="flex gap-1.5">
{[
{ label: "오늘", action: () => handleDatePreset(0) },
{ label: "1주일", action: () => handleDatePreset(7) },
{ label: "1개월", action: () => handleMonthPreset(1) },
{ label: "3개월", action: () => handleMonthPreset(3) },
].map((preset) => (
<button
key={preset.label}
onClick={preset.action}
className="flex-1 rounded-md border border-gray-200 px-2 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600"
>
{preset.label}
</button>
))}
</div>
<div className="flex gap-4">
<div className="flex-1">
<label className="mb-1.5 block text-xs font-medium text-gray-500">시작일</label>
<div className="flex h-9 w-full items-center rounded-md border border-gray-200 px-3 text-sm font-medium text-gray-700">
<CalendarDays className="mr-2 h-3.5 w-3.5 text-gray-400" />
{tempStartDate ? (
format(tempStartDate, "yyyy-MM-dd")
) : (
<span className="text-gray-400">선택</span>
)}
</div>
<Calendar
mode="single"
selected={tempStartDate}
onSelect={setTempStartDate}
locale={ko}
className="mt-1.5 rounded-md border border-gray-100"
/>
</div>
<div className="flex items-center pt-6">
<span className="text-sm text-gray-400">~</span>
</div>
<div className="flex-1">
<label className="mb-1.5 block text-xs font-medium text-gray-500">종료일</label>
<div className="flex h-9 w-full items-center rounded-md border border-gray-200 px-3 text-sm font-medium text-gray-700">
<CalendarDays className="mr-2 h-3.5 w-3.5 text-gray-400" />
{tempEndDate ? (
format(tempEndDate, "yyyy-MM-dd")
) : (
<span className="text-gray-400">선택</span>
)}
</div>
<Calendar
mode="single"
selected={tempEndDate}
onSelect={setTempEndDate}
locale={ko}
className="mt-1.5 rounded-md border border-gray-100"
/>
</div>
</div>
<Button
onClick={handleApplyDateFilter}
disabled={!tempStartDate || !tempEndDate}
className="h-9 w-full bg-blue-600 text-sm text-white hover:bg-blue-700"
>
적용
</Button>
</div>
</div>
)}
</div>
{isDateFilterActive && (
<div className="flex items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5">
<CalendarDays className="h-4 w-4 text-blue-600" />
<span className="text-sm font-medium text-blue-700">
{startDate} ~ {endDate}
</span>
<button
onClick={handleClearDateFilter}
className="ml-1 rounded p-0.5 text-blue-400 transition-colors hover:bg-blue-100 hover:text-blue-600"
>
<X className="h-3.5 w-3.5" />
</button>
</div>
)}
<div className="flex items-center overflow-hidden rounded-lg border border-gray-200">
<Button
variant="ghost"
size="icon"
onClick={() => handleViewModeChange("list")}
className={`h-11 w-11 rounded-none ${viewMode === "list" ? "bg-gray-100" : ""}`}
title="리스트 보기"
>
<List className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleViewModeChange("grid")}
className={`h-11 w-11 rounded-none border-l ${viewMode === "grid" ? "bg-gray-100" : ""}`}
title="그리드 보기"
>
<LayoutGrid className="h-5 w-5" />
</Button>
</div>
</CardContent>
</Card>
{/* 리포트 목록 */}
<Card className="shadow-sm">
<CardHeader className="bg-gray-50/50">
<CardTitle className="flex items-center justify-between">
<span className="flex items-center gap-2">
📋 리포트 목록
<span className="text-muted-foreground text-sm font-normal">(총 {total}건)</span>
</span>
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<ReportListTable
reports={reports}
total={total}
page={page}
limit={limit}
isLoading={isLoading}
onPageChange={setPage}
onRefresh={refetch}
/>
</CardContent>
</Card>
<Button
onClick={handleCreateNew}
className="ml-auto h-11 gap-2 bg-blue-600 text-base text-white hover:bg-blue-700"
>
<Plus className="h-5 w-5" />새 리포트
</Button>
</div>
</div>
</div>
<div className="space-y-7 py-7">
<div className="mx-24 grid auto-rows-fr grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div className="flex items-center justify-center gap-6 overflow-hidden rounded-xl border border-gray-100 bg-white px-8 py-9 transition-all hover:border-gray-200 hover:shadow-sm">
<div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-2xl bg-blue-50">
<FileText className="h-9 w-9 text-blue-600" />
</div>
<div>
<span className="text-lg font-bold whitespace-nowrap text-gray-500">전체 리포트</span>
<p className="mt-1 text-5xl font-bold tracking-tight whitespace-nowrap text-gray-900 tabular-nums">
{animatedTotal.toLocaleString()}
<span className="ml-1.5 text-xl font-bold text-gray-400">건</span>
</p>
</div>
</div>
<div className="flex items-center justify-center gap-[50px] overflow-hidden rounded-xl border border-gray-100 bg-white px-8 py-9 transition-all hover:border-gray-200 hover:shadow-sm">
<div className="flex items-center gap-6">
<div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-2xl bg-purple-50">
<Users className="h-9 w-9 text-purple-600" />
</div>
<div>
<span className="text-lg font-bold whitespace-nowrap text-gray-500">작성자</span>
<p className="mt-1 text-5xl font-bold tracking-tight whitespace-nowrap text-gray-900 tabular-nums">
{animatedAuthorCount.toLocaleString()}
<span className="ml-1.5 text-xl font-bold text-gray-400">명</span>
</p>
</div>
</div>
{authorStats.length > 0 && (
<div className="h-[72px] w-[90px] shrink-0">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={authorStats} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
<Bar
dataKey="count"
fill="#a78bfa"
radius={[3, 3, 0, 0]}
maxBarSize={12}
isAnimationActive={true}
animationBegin={0}
animationDuration={ANIM_DURATION}
animationEasing="ease-out"
/>
<Tooltip
formatter={(value: number) => [`${value}건`, "리포트"]}
labelFormatter={(label: string) => label}
contentStyle={{ fontSize: "12px", borderRadius: "6px", boxShadow: "0 2px 8px rgba(0,0,0,0.12)" }}
cursor={false}
allowEscapeViewBox={{ x: true, y: true }}
offset={10}
/>
</BarChart>
</ResponsiveContainer>
</div>
)}
</div>
<div className="flex flex-col items-center rounded-xl border border-gray-100 bg-white px-6 py-7 transition-all hover:border-gray-200 hover:shadow-sm">
<span className="text-lg font-bold whitespace-nowrap text-gray-500">
최근 30일 활동{" "}
<span className="text-base font-semibold text-gray-400 tabular-nums">
({animatedRecentTotal.toLocaleString()}건)
</span>
</span>
<div className="mt-2 flex w-full flex-1 items-center justify-center">
<div className="h-[120px] w-[70%]" style={{ overflow: "visible" }}>
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={recentActivity}
barCategoryGap="12%"
margin={{ top: 18, right: 2, bottom: 0, left: 2 }}
>
<XAxis
dataKey="date"
tick={{ fontSize: 13, fill: "#374151", fontWeight: 700 }}
axisLine={false}
tickLine={false}
/>
<Bar
dataKey="count"
fill="#60a5fa"
radius={[4, 4, 0, 0]}
maxBarSize={35}
isAnimationActive={true}
animationBegin={0}
animationDuration={ANIM_DURATION}
animationEasing="ease-out"
/>
<Tooltip
formatter={(value: number) => [`${value}건`, "수정"]}
contentStyle={{ fontSize: "13px", borderRadius: "8px", boxShadow: "0 2px 8px rgba(0,0,0,0.12)" }}
cursor={false}
allowEscapeViewBox={{ x: true, y: true }}
offset={15}
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
<div className="flex flex-col items-center rounded-xl border border-gray-100 bg-white px-6 py-7 transition-all hover:border-gray-200 hover:shadow-sm">
<span className="text-lg font-bold whitespace-nowrap text-gray-500">카테고리별 분포</span>
<div className="flex flex-1 items-center justify-center">
{typeData.length === 0 ? (
<p className="text-lg font-bold text-gray-400">데이터 없음</p>
) : (
<div className="flex flex-col items-center gap-3">
<div className="shrink-0" style={{ overflow: "visible", position: "relative" }}>
<PieChart width={100} height={100} style={{ overflow: "visible" }}>
<Pie
data={typeData}
cx="50%"
cy="50%"
innerRadius={20}
outerRadius={40}
dataKey="value"
nameKey="type"
startAngle={90}
endAngle={-270}
strokeWidth={2}
stroke="#fff"
isAnimationActive={true}
animationBegin={0}
animationDuration={ANIM_DURATION}
animationEasing="ease-out"
>
{typeData.map((entry) => (
<Cell
key={entry.type}
fill={REPORT_TYPE_COLORS[getTypeColorIndex(entry.type) % REPORT_TYPE_COLORS.length]}
/>
))}
</Pie>
<Tooltip
formatter={(value: number, name: string) => [`${value}건`, getTypeLabel(name)]}
contentStyle={{
fontSize: "14px",
borderRadius: "8px",
boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
}}
wrapperStyle={{ zIndex: 20, pointerEvents: "none" }}
allowEscapeViewBox={{ x: true, y: true }}
offset={8}
/>
</PieChart>
</div>
<div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
{typeData.slice(0, 4).map((entry) => {
const TypeIcon = getTypeIcon(entry.type);
return (
<div key={entry.type} className="flex items-center gap-1.5">
<div
className="flex h-4 w-4 shrink-0 items-center justify-center rounded"
style={{
backgroundColor:
REPORT_TYPE_COLORS[getTypeColorIndex(entry.type) % REPORT_TYPE_COLORS.length],
}}
>
<TypeIcon className="h-2.5 w-2.5 text-white" strokeWidth={2.5} />
</div>
<span className="text-sm font-medium whitespace-nowrap text-gray-600">
{getTypeLabel(entry.type)}
</span>
<span className="text-sm font-bold whitespace-nowrap text-gray-900">{entry.value}</span>
</div>
);
})}
{typeData.length > 4 && <span className="text-sm text-gray-400">외 {typeData.length - 4}개</span>}
</div>
</div>
)}
</div>
</div>
</div>
<div className="mx-24 overflow-hidden rounded-xl border border-gray-200 bg-white">
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50/50 px-5 py-4.5">
<span className="flex items-center gap-2.5 text-lg font-semibold text-gray-900">
리포트 목록
<span className="text-base font-normal text-gray-400">(총 {total}건)</span>
</span>
</div>
<ReportListTable
reports={reports}
total={total}
page={page}
limit={limit}
isLoading={isLoading}
viewMode={viewMode}
onPageChange={setPage}
onRefresh={refetch}
onViewClick={setViewTarget}
onCopyClick={setCopyTarget}
/>
</div>
</div>
<ReportCreateModal isOpen={isCreateOpen} onClose={() => setIsCreateOpen(false)} onSuccess={refetch} />
<ReportListPreviewModal report={viewTarget} onClose={() => setViewTarget(null)} />
{copyTarget && (
<ReportCopyModal
report={copyTarget}
onClose={() => setCopyTarget(null)}
onSuccess={() => {
setCopyTarget(null);
refetch();
}}
/>
)}
</div>
);
}

57
frontend/app/(main)/admin/screenMng/reportList/samples/components/DocumentLayout.tsx Normal file
View File

@ -0,0 +1,57 @@
"use client";
import { ReactNode } from "react";
import Link from "next/link";
import { ArrowLeft, Printer, Download } from "lucide-react";
interface DocumentLayoutProps {
children: ReactNode;
title: string;
docNumber?: string;
}
export default function DocumentLayout({ children, title, docNumber }: DocumentLayoutProps) {
return (
<div className="min-h-screen bg-[#F8F9FC]">
{/* Navigation Bar */}
<div className="bg-[#1E3A5F] border-b-4 border-[#0F172A] px-6 py-3 print:hidden">
<div className="max-w-[842px] mx-auto flex items-center justify-between">
<div className="flex items-center gap-4">
<Link
href="/admin/screenMng/reportList/samples"
className="flex items-center gap-2 text-white hover:text-[#EFF6FF] transition-colors border-2 border-white px-3 py-1"
>
<ArrowLeft className="w-4 h-4" />
<span className="text-sm">돌아가기</span>
</Link>
<div className="h-6 w-px bg-[#64748B]" />
<h1 className="text-lg text-white">{title}</h1>
{docNumber && (
<span className="text-xs text-[#94A3B8] border border-[#475569] px-2 py-0.5">{docNumber}</span>
)}
</div>
<div className="flex items-center gap-3">
<button
onClick={() => window.print()}
className="flex items-center gap-2 px-4 py-2 bg-white text-[#1E3A5F] border-2 border-white hover:bg-[#EFF6FF] transition-colors text-sm"
>
<Printer className="w-4 h-4" />
인쇄
</button>
<button className="flex items-center gap-2 px-4 py-2 border-2 border-white text-white hover:bg-[#2563EB] hover:border-[#2563EB] transition-colors text-sm">
<Download className="w-4 h-4" />
다운로드
</button>
</div>
</div>
</div>
{/* Document Container */}
<div className="py-8 px-4">
<div className="max-w-[842px] mx-auto bg-white border-4 border-[#1E3A5F] print:border-2">
{children}
</div>
</div>
</div>
);
}

31
frontend/app/(main)/admin/screenMng/reportList/samples/components/StatusBadge.tsx Normal file
View File

@ -0,0 +1,31 @@
type StatusType = "합격" | "불합격" | "보류" | "발주완료" | "검토중" | "취소" | "완료" | "승인대기";
interface StatusBadgeProps {
status: StatusType;
size?: "sm" | "md" | "lg";
}
const COLOR_MAP: Record<StatusType, string> = {
합격: "bg-white text-[#16A34A] border-[#16A34A]",
완료: "bg-white text-[#16A34A] border-[#16A34A]",
발주완료: "bg-white text-[#16A34A] border-[#16A34A]",
불합격: "bg-[#DC2626] text-white border-[#DC2626]",
취소: "bg-[#DC2626] text-white border-[#DC2626]",
보류: "bg-[#D97706] text-white border-[#D97706]",
검토중: "bg-[#D97706] text-white border-[#D97706]",
승인대기: "bg-[#2563EB] text-white border-[#2563EB]",
};
const SIZE_MAP = {
sm: "px-2 py-0.5 text-xs",
md: "px-3 py-1 text-sm",
lg: "px-8 py-3 text-2xl",
};
export default function StatusBadge({ status, size = "md" }: StatusBadgeProps) {
return (
<span className={`inline-flex items-center justify-center border-2 ${COLOR_MAP[status]} ${SIZE_MAP[size]}`}>
{status}
</span>
);
}

207
frontend/app/(main)/admin/screenMng/reportList/samples/inspection/page.tsx Normal file
View File

@ -0,0 +1,207 @@
"use client";
import DocumentLayout from "../components/DocumentLayout";
import StatusBadge from "../components/StatusBadge";
const INSPECTION_ITEMS = [
{
no: 1,
item: "외관상태",
subItem: "ee",
method: "육안 및 뒤틀림이 없을 것",
standard: "A",
measured: ["A", "A", "A", "A", "A", "A", "A", "A"],
result: "합격" as const,
},
{
no: 2,
item: "표면 및 표시",
subItem: "ff",
method: "100표에서 1시간 방치",
standard: "O",
measured: ["O", "O", "O", "O", "O", "O", "O", "O"],
result: "합격" as const,
},
{
no: 3,
item: "치수 yy",
subItem: "yy",
method: "길이",
standard: "453.9±0.9",
measured: ["453.6", "453.6", "454.4", "453.5", "453.1", "454.1", "454.3", "454.7"],
result: "합격" as const,
},
{
no: 4,
item: "치수 hhh",
subItem: "hhh",
method: "폭",
standard: "177.3±0.5",
measured: ["177.4", "177.1", "177.5", "177.6", "177.3", "176.9", "177.7", "176.8"],
result: "합격" as const,
},
{
no: 5,
item: "외관상태",
subItem: "",
method: "ff",
standard: "A",
measured: ["A", "A", "A", "A", "A", "A", "A", "A"],
result: "합격" as const,
},
];
// ── 정보 카드 (CardRenderer 구조를 참고한 정적 구현) ────────────────────────
function InfoCard({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div className="border-2 border-[#1E3A5F]">
<div className="bg-[#EFF6FF] border-b-2 border-[#1E3A5F] px-4 py-2">
<h3 className="text-sm text-[#0F172A]">▣ {title}</h3>
</div>
<div className="p-4 space-y-2 text-xs">{children}</div>
</div>
);
}
function InfoRow({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
return (
<div className="grid grid-cols-[100px,1fr] border-b border-[#E2E8F0] pb-1">
<span className="text-[#64748B]">{label}</span>
<span className={highlight ? "text-[#2563EB]" : "text-[#0F172A]"}>{value}</span>
</div>
);
}
// ── 결재란 ────────────────────────────────────────────────────────────────────
function ApprovalSection({ columns }: { columns: string[] }) {
return (
<div className="flex justify-end mb-6">
<div className="border-2 border-[#1E3A5F]">
<div className="grid text-center text-xs" style={{ gridTemplateColumns: `repeat(${columns.length}, 96px)` }}>
{columns.map((col, i) => (
<div key={i} className={`p-3 ${i < columns.length - 1 ? "border-r-2 border-[#1E3A5F]" : ""}`}>
<div className="text-[#64748B] mb-6 pb-2 border-b border-[#E2E8F0]">{col}</div>
<div className="h-12" />
</div>
))}
</div>
</div>
</div>
);
}
export default function InspectionReportPage() {
return (
<DocumentLayout title="검사 보고서" docNumber="IR-2026-00123">
<div className="p-10">
{/* ── 헤더 ── */}
<div className="border-4 border-[#1E3A5F] mb-6">
<div className="bg-[#1E3A5F] text-white px-6 py-4 text-center">
<h1 className="text-3xl tracking-widest">검 사 보 고 서</h1>
<p className="text-xs mt-1 tracking-wider">INSPECTION REPORT</p>
</div>
<div className="bg-white px-6 py-3 flex justify-between items-center border-t-2 border-[#1E3A5F]">
<div className="text-sm text-[#64748B]">문서번호: IR-2026-00123</div>
<StatusBadge status="합격" size="lg" />
</div>
</div>
{/* ── 기본 정보 (2열 카드) ── */}
<div className="grid grid-cols-2 gap-4 mb-6">
<InfoCard title="검사 대상">
<InfoRow label="발행번호" value="HC2014 - 005" />
<InfoRow label="협력업체" value="매직볼드" />
<InfoRow label="규격명" value="SATA-234" highlight />
<InfoRow label="수주계측기" value="버니어캘리퍼스 (Serial No.) #05233911" />
<InfoRow label="검사전환일" value="저울 (Serial No.) #258-98-22" />
</InfoCard>
<InfoCard title="검사 정보">
<InfoRow label="생산일자" value="2014-03-10" highlight />
<InfoRow label="검사수량" value="565" />
<InfoRow label="검사레벨" value="일반검사1" />
<InfoRow label="AQL" value="1.5" />
<InfoRow label="검사일자" value="2014-03-10" highlight />
<InfoRow label="시료수량" value="8" />
<InfoRow label="검사자" value="김수로" />
</InfoCard>
</div>
{/* ── 검사 항목 테이블 ── */}
<div className="mb-6">
<div className="bg-[#EFF6FF] border-2 border-[#1E3A5F] border-b-0 px-4 py-2">
<h3 className="text-sm text-[#0F172A]">▣ 검사/시험 측정값</h3>
</div>
<div className="border-2 border-[#1E3A5F]">
<table className="w-full text-xs">
<thead>
<tr className="bg-[#1E3A5F] text-white">
<th className="px-3 py-2 text-center border-r-2 border-white" rowSpan={2}>검사항목</th>
<th className="px-3 py-2 text-center border-r-2 border-white" rowSpan={2}>
시험 및 검사대응<br />(검사기준)
</th>
<th className="px-3 py-2 text-center border-r-2 border-white" colSpan={8}>
검사/시험 측정값
</th>
<th className="px-3 py-2 text-center border-r-2 border-white" rowSpan={2}>X̄</th>
<th className="px-3 py-2 text-center" rowSpan={2}>합격 판정</th>
</tr>
<tr className="bg-[#1E3A5F] text-white border-t-2 border-white">
{["X1", "X2", "X3", "X4", "X5", "X6", "X7", "X8"].map((x) => (
<th key={x} className="px-2 py-2 text-center border-r-2 border-white">{x}</th>
))}
</tr>
</thead>
<tbody>
{INSPECTION_ITEMS.map((item, idx) => (
<tr key={item.no} className={`border-t border-[#E2E8F0] ${idx % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
<td className="px-3 py-2 border-r border-[#E2E8F0]">
<div>{item.item}</div>
{item.subItem && <div className="text-[#64748B]">{item.subItem}</div>}
</td>
<td className="px-3 py-2 border-r border-[#E2E8F0]">
<div>{item.method}</div>
{(item.method === "길이" || item.method === "폭") && (
<div className="text-[#64748B] mt-1">{item.standard}</div>
)}
</td>
{item.measured.map((val, i) => (
<td key={i} className="px-2 py-2 text-center border-r border-[#E2E8F0]">{val}</td>
))}
<td className="px-3 py-2 text-center border-r border-[#E2E8F0]">8</td>
<td className="px-3 py-2 text-center">
<StatusBadge status={item.result} size="sm" />
</td>
</tr>
))}
</tbody>
</table>
</div>
{/* 범례 */}
<div className="mt-3 flex items-center gap-6 text-xs text-[#64748B]">
<div className="flex items-center gap-2">
<span className="px-2 py-1 border-2 border-[#D97706] bg-yellow-100 text-[#0F172A]">비 고</span>
<span>[범례] A : Accept, R : Reject, H : Hold</span>
</div>
<div className="flex items-center gap-2">
<span>중량판정</span>
<span className="px-2 py-1 bg-[#1E3A5F] text-white border-2 border-[#1E3A5F]">■ 합 격</span>
</div>
</div>
</div>
{/* ── 결재란 ── */}
<ApprovalSection columns={["작성", "검토", "승인"]} />
{/* ── 푸터 ── */}
<div className="text-xs text-[#64748B] flex justify-between items-center pt-4 border-t-2 border-[#1E3A5F]">
<div>양식번호 : QF-805-2 (Rev.0)</div>
<div>A4(210mm×297mm)</div>
</div>
</div>
</DocumentLayout>
);
}

102
frontend/app/(main)/admin/screenMng/reportList/samples/page.tsx Normal file
View File

@ -0,0 +1,102 @@
"use client";
import Link from "next/link";
import { ArrowLeft, ClipboardCheck, FileText, ShoppingCart } from "lucide-react";
const SAMPLES = [
{
title: "검사 보고서",
titleEng: "Inspection Report",
description: "품질 검사 결과를 기록하고 관리하는 문서입니다. 검사 항목, 측정값, 합격/불합격 판정을 포함합니다.",
path: "/admin/screenMng/reportList/samples/inspection",
icon: ClipboardCheck,
docNo: "IR-2026-XXXX",
},
{
title: "견적서",
titleEng: "Quotation",
description: "고객에게 제공하는 견적 문서입니다. 품목별 단가, 수량, 공급가액, 세액을 포함합니다.",
path: "/admin/screenMng/reportList/samples/quotation",
icon: FileText,
docNo: "QT-2026-XXXX",
},
{
title: "발주서",
titleEng: "Purchase Order",
description: "공급업체에 발주하는 공식 문서입니다. 발주처 정보, 발주 내역, 납기일 등을 포함합니다.",
path: "/admin/screenMng/reportList/samples/purchase-order",
icon: ShoppingCart,
docNo: "PO-2026-XXXX",
},
];
export default function SamplesPage() {
return (
<div className="min-h-screen bg-[#F8F9FC]">
{/* Header */}
<div className="bg-[#1E3A5F] border-b-4 border-[#0F172A] px-6 py-3">
<div className="max-w-5xl mx-auto flex items-center gap-4">
<Link
href="/admin/screenMng/reportList"
className="flex items-center gap-2 text-white hover:text-[#EFF6FF] transition-colors border-2 border-white px-3 py-1 text-sm"
>
<ArrowLeft className="w-4 h-4" />
리포트 목록
</Link>
<div className="h-6 w-px bg-[#64748B]" />
<h1 className="text-white text-lg">리포트 디자인 샘플</h1>
</div>
</div>
<div className="py-10 px-6">
<div className="max-w-5xl mx-auto">
{/* Title Section */}
<div className="bg-white border-4 border-[#1E3A5F] p-8 mb-8 text-center">
<h2 className="text-3xl text-[#0F172A] border-b-4 border-[#2563EB] pb-4 mb-4">
WACE PLM — 문서 양식 샘플
</h2>
<p className="text-[#64748B] text-sm">
리포트 디자이너에서 활용 가능한 표준 문서 양식 샘플입니다.
<br />
카드(정보패널), 테이블, 결재란 등 기본 컴포넌트로 구성되었습니다.
</p>
</div>
{/* Sample Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{SAMPLES.map((sample) => (
<Link
key={sample.path}
href={sample.path}
className="bg-white border-2 border-[#1E3A5F] hover:bg-[#EFF6FF] transition-colors group block"
>
<div className="border-b-2 border-[#1E3A5F] bg-[#EFF6FF] p-5 text-center group-hover:bg-[#DBEAFE] transition-colors">
<sample.icon className="w-10 h-10 mx-auto text-[#2563EB] mb-2" />
<p className="text-xs text-[#64748B]">{sample.docNo}</p>
</div>
<div className="p-6">
<h3 className="text-xl text-[#0F172A] text-center border-b border-[#E2E8F0] pb-2 mb-3">
{sample.title}
</h3>
<p className="text-xs text-[#64748B] text-center mb-1">{sample.titleEng}</p>
<p className="text-[#64748B] text-sm leading-relaxed text-center mt-3">
{sample.description}
</p>
<div className="mt-6 text-center">
<span className="inline-block border-2 border-[#2563EB] px-4 py-2 text-sm text-[#2563EB] hover:bg-[#2563EB] hover:text-white transition-colors">
샘플 보기 →
</span>
</div>
</div>
</Link>
))}
</div>
<div className="mt-12 text-center bg-white border-2 border-[#1E3A5F] p-4">
<p className="text-[#64748B] text-xs">A4 인쇄 최적화 · WACE PLM 리포트 디자이너 v2.0</p>
</div>
</div>
</div>
</div>
);
}

218
frontend/app/(main)/admin/screenMng/reportList/samples/purchase-order/page.tsx Normal file
View File

@ -0,0 +1,218 @@
"use client";
import DocumentLayout from "../components/DocumentLayout";
import StatusBadge from "../components/StatusBadge";
const ITEMS = [
{ no: 1, code: "P-001", name: "원자재 A", spec: "KS-100", unit: "KG", qty: 500, price: 5000 },
{ no: 2, code: "P-002", name: "부품 B", spec: "ISO-200", unit: "EA", qty: 1000, price: 3000 },
{ no: 3, code: "P-003", name: "자재 C", spec: "JIS-300", unit: "M", qty: 200, price: 8000 },
];
const EMPTY_ROWS = 10;
// ── 발주처 정보 테이블 행 ─────────────────────────────────────────────────────
function InfoRow({
label,
children,
highlight,
colSpan,
}: {
label: string;
children?: React.ReactNode;
highlight?: boolean;
colSpan?: number;
}) {
const labelBg = highlight ? "bg-yellow-100" : "bg-[#EFF6FF]";
return (
<>
<td className={`py-2 px-3 ${labelBg} border-r-2 border-[#1E3A5F] text-[#0F172A] w-28`}>{label}</td>
<td className={`py-2 px-3 text-[#64748B]`} colSpan={colSpan ?? 1}>
{children}
</td>
</>
);
}
export default function PurchaseOrderPage() {
const totalAmount = ITEMS.reduce((sum, item) => sum + item.qty * item.price, 0);
const tax = Math.round(totalAmount * 0.1);
const grandTotal = totalAmount + tax;
return (
<DocumentLayout title="발주서" docNumber="PO-2026-00789">
<div className="p-10">
{/* ── 헤더 ── */}
<div className="border-4 border-[#1E3A5F] mb-6">
<div className="flex items-center justify-between bg-[#1E3A5F] text-white px-6 py-4">
<div>
<h1 className="text-3xl tracking-[0.5em]">발 주 서</h1>
<p className="text-xs mt-1 tracking-wider">PURCHASE ORDER</p>
</div>
<div className="flex items-center gap-4">
<StatusBadge status="발주완료" size="md" />
{/* 결재란 인라인 */}
<div className="border-2 border-white">
<div className="grid grid-cols-4 text-xs">
{["담당", "부서장", "임원", "사장"].map((col, i) => (
<div key={i} className={`px-3 py-2 text-center ${i < 3 ? "border-r-2 border-white" : ""}`}>
{col}
</div>
))}
</div>
</div>
</div>
</div>
</div>
{/* ── 문서 번호 ── */}
<div className="mb-6 text-right">
<div className="inline-block border-2 border-[#1E3A5F] px-6 py-2 bg-[#F8F9FC]">
<div className="text-sm text-[#64748B]">발주번호: PO-2026-00789</div>
</div>
</div>
{/* ── 발주처 정보 카드 ── */}
<div className="mb-6 border-2 border-[#1E3A5F]">
<div className="bg-[#EFF6FF] border-b-2 border-[#1E3A5F] px-4 py-2 text-sm text-[#0F172A]">
▣ 발주처 정보
</div>
<div className="p-4 bg-white">
<table className="w-full text-xs border-collapse">
<tbody>
<tr className="border-b border-[#E2E8F0]">
<InfoRow label="수 신 처" />
<td className="py-2 px-3 border-r border-[#E2E8F0] w-1/3" />
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] w-20 text-[#0F172A]">TEL</td>
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] w-20 text-[#0F172A]">담당</td>
<td className="py-2 px-3" />
</tr>
<tr className="border-b border-[#E2E8F0]">
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F]" />
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">FAX</td>
<td className="py-2 px-3" colSpan={3} />
</tr>
<tr className="border-b border-[#E2E8F0]">
<InfoRow label="발 신 처" />
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">TEL</td>
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">담당</td>
<td className="py-2 px-3" />
</tr>
<tr className="border-b-2 border-[#1E3A5F]">
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F]" />
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">FAX</td>
<td className="py-2 px-3" colSpan={3} />
</tr>
<tr className="border-b border-[#E2E8F0]">
<InfoRow label="납품일정" highlight />
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A]">TEL</td>
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A]">현장담당</td>
<td className="py-2 px-3" />
</tr>
<tr className="border-b border-[#E2E8F0]">
<td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F]" />
<td className="py-2 px-3 border-r border-[#E2E8F0]" />
<td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A]">FAX</td>
<td className="py-2 px-3" colSpan={3} />
</tr>
<tr className="border-b-2 border-[#1E3A5F]">
<InfoRow label="납 기 일" highlight />
<td className="py-2 px-3 text-[#64748B]" colSpan={3}>20___년 ___월 ___일</td>
<td className="py-2 px-3 bg-yellow-100 border-r-2 border-[#1E3A5F] text-[#0F172A] w-20">인도조건</td>
<td className="py-2 px-3" />
</tr>
<tr className="border-b border-[#E2E8F0]">
<InfoRow label="대금결제조건" highlight colSpan={5} />
</tr>
<tr>
<InfoRow label="검 수 방 법" highlight colSpan={5} />
</tr>
</tbody>
</table>
</div>
</div>
{/* ── 발주 내역 테이블 ── */}
<div className="mb-6">
<div className="bg-[#EFF6FF] border-2 border-[#1E3A5F] border-b-0 px-4 py-2 text-sm text-[#0F172A]">
▣ 발주 내역
</div>
<div className="border-2 border-[#1E3A5F]">
<table className="w-full text-xs">
<thead>
<tr className="bg-[#1E3A5F] text-white">
{["NO", "품 명", "규격", "단위", "수량", "단가", "금액", "비고"].map((h, i) => (
<th key={i} className={`px-3 py-3 text-center ${i < 7 ? "border-r-2 border-white" : ""} ${i === 0 ? "w-12" : ""} ${i === 3 || i === 4 ? "w-16" : ""} ${i === 7 ? "w-20" : ""}`}>
{h}
</th>
))}
</tr>
</thead>
<tbody>
{ITEMS.map((item, idx) => (
<tr key={item.no} className={`border-b border-[#E2E8F0] ${idx % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
<td className="px-3 py-3 text-center border-r border-[#E2E8F0]">{item.no}</td>
<td className="px-3 py-3 border-r border-[#E2E8F0]">{item.name}</td>
<td className="px-3 py-3 text-center border-r border-[#E2E8F0]">{item.spec}</td>
<td className="px-3 py-3 text-center border-r border-[#E2E8F0]">{item.unit}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{item.qty.toLocaleString()}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{item.price.toLocaleString()}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{(item.qty * item.price).toLocaleString()}</td>
<td className="px-3 py-3 text-center" />
</tr>
))}
{Array.from({ length: EMPTY_ROWS }).map((_, idx) => (
<tr key={`e${idx}`} className={`border-b border-[#E2E8F0] ${(ITEMS.length + idx) % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
<td className="px-3 py-3 text-center border-r border-[#E2E8F0] text-[#CBD5E1]">{ITEMS.length + idx + 1}</td>
<td className="px-3 py-3 border-r border-[#E2E8F0] h-8" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3" />
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* ── 금액 요약 ── */}
<div className="border-2 border-[#1E3A5F] mb-6">
<table className="w-full text-sm">
<tbody>
<tr>
<td className="px-4 py-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-center w-32 text-[#0F172A]">공급가액</td>
<td className="px-4 py-3 text-right border-r-2 border-[#1E3A5F] text-[#0F172A]">₩ {totalAmount.toLocaleString()}</td>
<td className="px-4 py-3 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-center w-32 text-[#0F172A]">부가세액</td>
<td className="px-4 py-3 text-right border-r-2 border-[#1E3A5F] text-[#0F172A]">₩ {tax.toLocaleString()}</td>
<td className="px-4 py-3 bg-[#1E3A5F] text-white text-center w-32">합계금액</td>
<td className="px-4 py-3 text-right bg-[#1E3A5F] text-white">₩ {grandTotal.toLocaleString()}</td>
</tr>
</tbody>
</table>
</div>
{/* ── 안내문 ── */}
<div className="border-2 border-[#1E3A5F] p-4 text-center mb-6 bg-[#F8F9FC]">
<p className="text-sm text-[#0F172A]">상기 자재를 발주하오니 납기를 준수하여 인도 바랍니다.</p>
</div>
{/* ── 푸터 ── */}
<div className="text-xs text-[#64748B] border-t-2 border-[#1E3A5F] pt-3 flex justify-between">
<div>양식번호: PO-001 (Rev.2)</div>
<div>문의: TEL 000-0000-0000 / FAX 000-0000-0000</div>
</div>
</div>
</DocumentLayout>
);
}

204
frontend/app/(main)/admin/screenMng/reportList/samples/quotation/page.tsx Normal file
View File

@ -0,0 +1,204 @@
"use client";
import DocumentLayout from "../components/DocumentLayout";
const ITEMS = [
{ no: 1, name: "프리미엄 제품 A", spec: "Model-X1000", qty: 50, unit: "EA", price: 150000 },
{ no: 2, name: "스탠다드 제품 B", spec: "Model-S500", qty: 100, unit: "EA", price: 80000 },
{ no: 3, name: "베이직 제품 C", spec: "Model-B200", qty: 200, unit: "EA", price: 45000 },
];
const EMPTY_ROWS = 5;
function ApprovalSection({ columns }: { columns: string[] }) {
return (
<div className="flex justify-end mb-6">
<div className="border-2 border-[#1E3A5F]">
<div className="grid text-center text-xs" style={{ gridTemplateColumns: `repeat(${columns.length}, 80px)` }}>
{columns.map((col, i) => (
<div key={i} className={`p-3 ${i < columns.length - 1 ? "border-r-2 border-[#1E3A5F]" : ""}`}>
<div className="text-[#64748B] mb-6 pb-2 border-b border-[#E2E8F0]">{col}</div>
<div className="h-12" />
</div>
))}
</div>
</div>
</div>
);
}
export default function QuotationPage() {
const supplyAmount = ITEMS.reduce((sum, item) => sum + item.qty * item.price, 0);
const tax = Math.round(supplyAmount * 0.1);
const total = supplyAmount + tax;
return (
<DocumentLayout title="견적서" docNumber="QT-2026-01234">
<div className="p-10">
{/* ── 헤더 ── */}
<div className="border-4 border-[#1E3A5F] mb-6">
<div className="bg-[#1E3A5F] text-white px-6 py-4 text-center">
<h1 className="text-4xl tracking-[0.5em]">견 적 서</h1>
<p className="text-xs mt-2 tracking-wider">QUOTATION</p>
</div>
</div>
{/* ── 문서 번호 ── */}
<div className="mb-6 text-right">
<div className="inline-block border-2 border-[#1E3A5F] px-6 py-2 bg-[#F8F9FC]">
<div className="text-sm text-[#64748B]">문서번호: QT-2026-01234</div>
</div>
</div>
{/* ── 날짜 / 수신 ── */}
<div className="mb-6 text-right">
<div className="inline-block text-sm">
<div className="flex items-center gap-3 mb-2">
<span className="border-b-2 border-[#2563EB] px-8 pb-1">2026</span>
<span className="text-[#64748B]">년</span>
<span className="border-b-2 border-[#2563EB] px-6 pb-1">03</span>
<span className="text-[#64748B]">월</span>
<span className="border-b-2 border-[#2563EB] px-6 pb-1">09</span>
<span className="text-[#64748B]">일</span>
</div>
<div className="border-b-2 border-[#1E3A5F] pb-2 text-lg">
<span className="mr-8 text-[#0F172A]">(주) ○○○○</span>
<span className="text-[#0F172A]">귀하</span>
</div>
</div>
</div>
{/* ── 견적명 / 공급자 (2열 카드) ── */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="border-2 border-[#1E3A5F]">
<div className="bg-[#1E3A5F] text-white px-4 py-2 text-sm text-center border-b-2 border-[#1E3A5F]">
견 적 명
</div>
<div className="p-4 bg-white h-16" />
</div>
<div className="border-2 border-[#1E3A5F]">
<div className="bg-[#1E3A5F] text-white px-4 py-2 text-sm text-center border-b-2 border-[#1E3A5F]">
공 급 자
</div>
<div className="p-3 bg-white text-xs space-y-1">
<div className="grid grid-cols-2 gap-2 border-b border-[#E2E8F0] pb-1">
<span className="text-[#64748B]">등록번호</span>
<span className="text-[#64748B]">상호(법인명) / 성명</span>
</div>
<div className="grid grid-cols-2 gap-2 border-b border-[#E2E8F0] pb-1">
<span className="text-[#64748B]">업태 / 업종</span>
<span className="text-[#64748B]">주소</span>
</div>
<div className="border-b border-[#E2E8F0] pb-1 text-[#64748B]">
전화번호 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 팩스
</div>
</div>
</div>
</div>
{/* ── 합계금액 ── */}
<div className="border-2 border-[#1E3A5F] mb-6">
<div className="bg-[#1E3A5F] text-white px-4 py-2 text-sm text-center">합 계 금 액</div>
<div className="p-4 bg-white text-center text-2xl border-t-2 border-[#1E3A5F] text-[#2563EB]">
₩ {total.toLocaleString()} 원정
</div>
</div>
{/* ── 품목 테이블 ── */}
<div className="mb-6 border-2 border-[#1E3A5F]">
<table className="w-full text-xs">
<thead>
<tr className="bg-[#1E3A5F] text-white">
{["품번", "품명", "규격", "수량", "단가", "공급가액", "세액", "비고"].map((h, i) => (
<th key={i} className={`px-3 py-3 text-center ${i < 7 ? "border-r-2 border-white" : ""}`}>{h}</th>
))}
</tr>
</thead>
<tbody>
{ITEMS.map((item, idx) => {
const amount = item.qty * item.price;
const itemTax = Math.round(amount * 0.1);
return (
<tr key={item.no} className={`border-t-2 border-[#E2E8F0] ${idx % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
<td className="px-2 py-3 text-center border-r border-[#E2E8F0]">{item.no}</td>
<td className="px-3 py-3 border-r border-[#E2E8F0]">{item.name}</td>
<td className="px-3 py-3 border-r border-[#E2E8F0]">{item.spec}</td>
<td className="px-2 py-3 text-right border-r border-[#E2E8F0]">{item.qty.toLocaleString()}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{item.price.toLocaleString()}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{amount.toLocaleString()}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0]">{itemTax.toLocaleString()}</td>
<td className="px-3 py-3 text-center" />
</tr>
);
})}
{Array.from({ length: EMPTY_ROWS }).map((_, idx) => (
<tr key={`e${idx}`} className={`border-t border-[#E2E8F0] ${(ITEMS.length + idx) % 2 === 1 ? "bg-[#F8F9FC]" : "bg-white"}`}>
<td className="px-2 py-3 text-center border-r border-[#E2E8F0] text-[#CBD5E1]">{ITEMS.length + idx + 1}</td>
<td className="px-3 py-3 border-r border-[#E2E8F0] h-10" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-2 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3" />
</tr>
))}
{/* 합계 행 */}
<tr className="border-t-2 border-[#1E3A5F] bg-[#EFF6FF]">
<td colSpan={3} className="px-4 py-3 text-center border-r-2 border-[#1E3A5F] text-[#0F172A]">합 계</td>
<td className="px-2 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 border-r border-[#E2E8F0]" />
<td className="px-3 py-3 text-right border-r border-[#E2E8F0] text-[#2563EB]">{supplyAmount.toLocaleString()}</td>
<td className="px-3 py-3 text-right border-r border-[#E2E8F0] text-[#2563EB]">{tax.toLocaleString()}</td>
<td className="px-3 py-3" />
</tr>
</tbody>
</table>
</div>
{/* ── 금액 요약 (우측 정렬) ── */}
<div className="flex justify-end mb-6">
<div className="border-2 border-[#1E3A5F] min-w-[300px]">
<table className="w-full text-sm">
<tbody>
<tr className="border-b-2 border-[#E2E8F0]">
<td className="px-4 py-2 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">공급가액</td>
<td className="px-4 py-2 text-right text-[#0F172A]">₩ {supplyAmount.toLocaleString()}</td>
</tr>
<tr className="border-b-2 border-[#1E3A5F]">
<td className="px-4 py-2 bg-[#EFF6FF] border-r-2 border-[#1E3A5F] text-[#0F172A]">부가세 (10%)</td>
<td className="px-4 py-2 text-right text-[#0F172A]">₩ {tax.toLocaleString()}</td>
</tr>
<tr className="bg-[#1E3A5F] text-white">
<td className="px-4 py-2 border-r-2 border-white">합계금액</td>
<td className="px-4 py-2 text-right">₩ {total.toLocaleString()}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* ── 안내문 ── */}
<div className="border-2 border-[#1E3A5F] p-4 mb-6 bg-[#F8F9FC]">
<p className="text-sm text-[#0F172A] mb-1">위와 같이 견적합니다.</p>
<p className="text-sm text-[#0F172A] mb-1">상기 견적서의 품목과 금액을 확인해 주시기 바랍니다.</p>
<p className="text-sm text-[#0F172A]">감사합니다.</p>
</div>
{/* ── 결재란 ── */}
<ApprovalSection columns={["담당", "검토", "승인", "대표"]} />
{/* ── 푸터 ── */}
<div className="text-xs text-[#64748B] border-t-2 border-[#1E3A5F] pt-3">
<div className="flex justify-between mb-1">
<div>본 견적서의 유효기간은 견적일로부터 7일입니다.</div>
</div>
<div className="flex justify-between">
<div>결제계좌: (예금주: )</div>
<div>문의: TEL 000-0000-0000 / FAX 000-0000-0000</div>
</div>
</div>
</div>
</DocumentLayout>
);
}

55
frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
View File

@ -115,20 +115,22 @@ export default function ScreenManagementPage() {
// 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시
// 단일 키워드면 해당 키워드로 화면 필터링
const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean);
const filteredScreens = searchKeywords.length > 1
? screens // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨)
: screens.filter((screen) =>
screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
);
const filteredScreens =
searchKeywords.length > 1
? screens // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨)
: screens.filter(
(screen) =>
screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase()),
);
// 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용
if (isDesignMode) {
return (
<div className="fixed inset-0 z-50 bg-background">
<ScreenDesigner
selectedScreen={selectedScreen}
onBackToList={() => goToStep("list")}
<div className="bg-background fixed inset-0 z-50">
<ScreenDesigner
selectedScreen={selectedScreen}
onBackToList={() => goToStep("list")}
onScreenUpdate={(updatedFields) => {
if (selectedScreen) {
const updated = { ...selectedScreen, ...updatedFields };
@ -150,28 +152,24 @@ export default function ScreenManagementPage() {
// V2 컴포넌트 테스트 모드
if (currentStep === "v2-test") {
return (
<div className="fixed inset-0 z-50 bg-background">
<div className="bg-background fixed inset-0 z-50">
<V2ComponentsDemo onBack={() => goToStep("list")} />
</div>
);
}
return (
<div className="flex h-screen flex-col bg-background overflow-hidden">
<div className="bg-background flex h-screen flex-col overflow-hidden">
{/* 페이지 헤더 */}
<div className="flex-shrink-0 border-b bg-background px-6 py-4">
<div className="bg-background flex-shrink-0 border-b px-6 py-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold tracking-tight">화면 관리</h1>
<p className="text-sm text-muted-foreground">화면을 그룹별로 관리하고 데이터 관계를 확인합니다</p>
<p className="text-muted-foreground text-sm">화면을 그룹별로 관리하고 데이터 관계를 확인합니다</p>
</div>
<div className="flex items-center gap-2">
{/* V2 컴포넌트 테스트 버튼 */}
<Button
variant="outline"
onClick={() => goToNextStep("v2-test")}
className="gap-2"
>
<Button variant="outline" onClick={() => goToNextStep("v2-test")} className="gap-2">
<TestTube2 className="h-4 w-4" />
V2 테스트
</Button>
@ -192,8 +190,7 @@ export default function ScreenManagementPage() {
<RefreshCw className="h-4 w-4" />
</Button>
<Button onClick={() => setIsCreateOpen(true)} className="gap-2">
<Plus className="h-4 w-4" />
새 화면
<Plus className="h-4 w-4" />새 화면
</Button>
</div>
</div>
@ -201,18 +198,18 @@ export default function ScreenManagementPage() {
{/* 메인 콘텐츠 */}
{viewMode === "tree" ? (
<div className="flex-1 overflow-hidden flex">
<div className="flex flex-1 overflow-hidden">
{/* 왼쪽: 트리 구조 */}
<div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r bg-background">
<div className="bg-background flex w-[350px] max-w-[450px] min-w-[280px] flex-col border-r">
{/* 검색 */}
<div className="flex-shrink-0 p-3 border-b">
<div className="flex-shrink-0 border-b p-3">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="화면 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-9 h-9"
className="h-9 pl-9"
/>
</div>
</div>
@ -232,7 +229,7 @@ export default function ScreenManagementPage() {
onScreenSelectInGroup={(group, screenId) => {
// 그룹 내 화면 클릭 시
const isNewGroup = selectedGroup?.id !== group.id;
if (isNewGroup) {
// 새 그룹 진입: 포커싱 없이 시작 (첫 진입 시 망가지는 문제 방지)
setSelectedGroup(group);
@ -249,8 +246,8 @@ export default function ScreenManagementPage() {
{/* 오른쪽: 관계 시각화 (React Flow) */}
<div className="flex-1 overflow-hidden">
<ScreenRelationFlow
screen={selectedScreen}
<ScreenRelationFlow
screen={selectedScreen}
selectedGroup={selectedGroup}
initialFocusedScreenId={focusedScreenIdInGroup}
/>

588
frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
View File

@ -205,305 +205,305 @@ export default function EditWebTypePage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
{/* 헤더 */}
<div className="mb-6 flex items-center gap-4">
<Link href={`/admin/standards/${webType}`}>
<Button variant="ghost" size="sm">
<ArrowLeft className="mr-2 h-4 w-4" />
상세보기로
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold tracking-tight">웹타입 편집</h1>
<Badge variant="outline" className="font-mono">
{webType}
</Badge>
</div>
<p className="text-muted-foreground">{originalData.type_name} 웹타입의 정보를 수정합니다.</p>
</div>
</div>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* 기본 정보 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>기본 정보</CardTitle>
<CardDescription>웹타입의 기본적인 정보를 수정해주세요.</CardDescription>
</CardHeader>
<CardContent className="space-y-8">
{/* 웹타입 코드 (읽기 전용) */}
<div className="space-y-2">
<Label htmlFor="web_type">웹타입 코드</Label>
<Input id="web_type" value={webType} disabled className="bg-muted font-mono" />
<p className="text-muted-foreground text-xs">웹타입 코드는 수정할 수 없습니다.</p>
</div>
{/* 웹타입명 */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="type_name">
웹타입명 <span className="text-red-500">*</span>
</Label>
<Input
id="type_name"
value={formData.type_name || ""}
onChange={(e) => handleInputChange("type_name", e.target.value)}
placeholder="예: 텍스트 입력"
/>
</div>
<div className="space-y-2">
<Label htmlFor="type_name_eng">영문명</Label>
<Input
id="type_name_eng"
value={formData.type_name_eng || ""}
onChange={(e) => handleInputChange("type_name_eng", e.target.value)}
placeholder="예: Text Input"
/>
</div>
</div>
{/* 카테고리 */}
<div className="space-y-2">
<Label htmlFor="category">
카테고리 <span className="text-red-500">*</span>
</Label>
<Select value={formData.category || ""} onValueChange={(value) => handleInputChange("category", value)}>
<SelectTrigger>
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
{DEFAULT_CATEGORIES.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 연결된 컴포넌트 */}
<div className="space-y-2">
<Label htmlFor="component_name">
연결된 컴포넌트 <span className="text-red-500">*</span>
</Label>
<Select
value={formData.component_name || "TextWidget"}
onValueChange={(value) => handleInputChange("component_name", value)}
>
<SelectTrigger>
<SelectValue placeholder="컴포넌트 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_COMPONENTS.map((component) => (
<SelectItem key={component.value} value={component.value}>
<div className="flex flex-col">
<span className="font-medium">{component.label}</span>
<span className="text-muted-foreground text-xs">{component.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.component_name && (
<div className="text-muted-foreground text-xs">
현재 선택:{" "}
<Badge variant="outline" className="font-mono">
{formData.component_name}
</Badge>
</div>
)}
</div>
{/* 설정 패널 */}
<div className="space-y-2">
<Label htmlFor="config_panel">설정 패널</Label>
<Select
value={formData.config_panel || "none"}
onValueChange={(value) => handleInputChange("config_panel", value === "none" ? null : value)}
>
<SelectTrigger>
<SelectValue placeholder="설정 패널 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_CONFIG_PANELS.map((panel) => (
<SelectItem key={panel.value} value={panel.value}>
<div className="flex flex-col">
<span className="font-medium">{panel.label}</span>
<span className="text-muted-foreground text-xs">{panel.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.config_panel && (
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
<div className="flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-green-500"></div>
<span className="text-sm font-medium text-green-700">
현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
</span>
</div>
{getConfigPanelInfo(formData.config_panel)?.description && (
<p className="mt-1 ml-4 text-xs text-green-600">
{getConfigPanelInfo(formData.config_panel)?.description}
</p>
)}
</div>
)}
</div>
{/* 설명 */}
<div className="space-y-2">
<Label htmlFor="description">설명</Label>
<Textarea
id="description"
value={formData.description || ""}
onChange={(e) => handleInputChange("description", e.target.value)}
placeholder="웹타입에 대한 설명을 입력해주세요..."
rows={3}
/>
</div>
{/* 정렬 순서 */}
<div className="space-y-2">
<Label htmlFor="sort_order">정렬 순서</Label>
<Input
id="sort_order"
type="number"
value={formData.sort_order || 0}
onChange={(e) => handleInputChange("sort_order", parseInt(e.target.value) || 0)}
placeholder="0"
min="0"
/>
<p className="text-muted-foreground text-xs">낮은 숫자일수록 먼저 표시됩니다.</p>
</div>
</CardContent>
</Card>
{/* 상태 설정 */}
<Card>
<CardHeader>
<CardTitle>상태 설정</CardTitle>
<CardDescription>웹타입의 활성화 상태를 설정합니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label htmlFor="is_active">활성화 상태</Label>
<p className="text-muted-foreground text-xs">비활성화 시 화면관리에서 사용할 수 없습니다.</p>
</div>
<Switch
id="is_active"
checked={formData.is_active === "Y"}
onCheckedChange={(checked) => handleInputChange("is_active", checked ? "Y" : "N")}
/>
</div>
<div className="mt-4">
<Badge variant={formData.is_active === "Y" ? "default" : "secondary"}>
{formData.is_active === "Y" ? "활성화" : "비활성화"}
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 헤더 */}
<div className="mb-6 flex items-center gap-4">
<Link href={`/admin/standards/${webType}`}>
<Button variant="ghost" size="sm">
<ArrowLeft className="mr-2 h-4 w-4" />
상세보기로
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold tracking-tight">웹타입 편집</h1>
<Badge variant="outline" className="font-mono">
{webType}
</Badge>
</div>
</CardContent>
</Card>
{/* JSON 설정 */}
<Card className="lg:col-span-3">
<CardHeader>
<CardTitle>고급 설정 (JSON)</CardTitle>
<CardDescription>웹타입의 세부 설정을 JSON 형식으로 수정할 수 있습니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 설정 */}
<div className="space-y-2">
<Label htmlFor="default_config">기본 설정</Label>
<Textarea
id="default_config"
value={jsonStrings.default_config}
onChange={(e) => handleJsonChange("default_config", e.target.value)}
placeholder='{"placeholder": "입력하세요..."}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
</div>
{/* 유효성 검사 규칙 */}
<div className="space-y-2">
<Label htmlFor="validation_rules">유효성 검사 규칙</Label>
<Textarea
id="validation_rules"
value={jsonStrings.validation_rules}
onChange={(e) => handleJsonChange("validation_rules", e.target.value)}
placeholder='{"required": true, "minLength": 1}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
</div>
{/* 기본 스타일 */}
<div className="space-y-2">
<Label htmlFor="default_style">기본 스타일</Label>
<Textarea
id="default_style"
value={jsonStrings.default_style}
onChange={(e) => handleJsonChange("default_style", e.target.value)}
placeholder='{"width": "100%", "height": "40px"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
</div>
{/* 입력 속성 */}
<div className="space-y-2">
<Label htmlFor="input_properties">HTML 입력 속성</Label>
<Textarea
id="input_properties"
value={jsonStrings.input_properties}
onChange={(e) => handleJsonChange("input_properties", e.target.value)}
placeholder='{"type": "text", "autoComplete": "off"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
</div>
</div>
</CardContent>
</Card>
</div>
{/* 액션 버튼 */}
<div className="mt-6 flex items-center justify-between">
<Link href={`/admin/standards/${webType}`}>
<Button variant="outline">
<Eye className="mr-2 h-4 w-4" />
상세보기
</Button>
</Link>
<div className="flex gap-4">
<Button variant="outline" onClick={handleReset}>
<RotateCcw className="mr-2 h-4 w-4" />
되돌리기
</Button>
<Button onClick={handleSave} disabled={isUpdating}>
<Save className="mr-2 h-4 w-4" />
{isUpdating ? "저장 중..." : "저장"}
</Button>
<p className="text-muted-foreground">{originalData.type_name} 웹타입의 정보를 수정합니다.</p>
</div>
</div>
</div>
{/* 에러 메시지 */}
{updateError && (
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
<p className="text-red-600">
수정 중 오류가 발생했습니다: {updateError instanceof Error ? updateError.message : "알 수 없는 오류"}
</p>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* 기본 정보 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>기본 정보</CardTitle>
<CardDescription>웹타입의 기본적인 정보를 수정해주세요.</CardDescription>
</CardHeader>
<CardContent className="space-y-8">
{/* 웹타입 코드 (읽기 전용) */}
<div className="space-y-2">
<Label htmlFor="web_type">웹타입 코드</Label>
<Input id="web_type" value={webType} disabled className="bg-muted font-mono" />
<p className="text-muted-foreground text-xs">웹타입 코드는 수정할 수 없습니다.</p>
</div>
{/* 웹타입명 */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="type_name">
웹타입명 <span className="text-red-500">*</span>
</Label>
<Input
id="type_name"
value={formData.type_name || ""}
onChange={(e) => handleInputChange("type_name", e.target.value)}
placeholder="예: 텍스트 입력"
/>
</div>
<div className="space-y-2">
<Label htmlFor="type_name_eng">영문명</Label>
<Input
id="type_name_eng"
value={formData.type_name_eng || ""}
onChange={(e) => handleInputChange("type_name_eng", e.target.value)}
placeholder="예: Text Input"
/>
</div>
</div>
{/* 카테고리 */}
<div className="space-y-2">
<Label htmlFor="category">
카테고리 <span className="text-red-500">*</span>
</Label>
<Select value={formData.category || ""} onValueChange={(value) => handleInputChange("category", value)}>
<SelectTrigger>
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
{DEFAULT_CATEGORIES.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 연결된 컴포넌트 */}
<div className="space-y-2">
<Label htmlFor="component_name">
연결된 컴포넌트 <span className="text-red-500">*</span>
</Label>
<Select
value={formData.component_name || "TextWidget"}
onValueChange={(value) => handleInputChange("component_name", value)}
>
<SelectTrigger>
<SelectValue placeholder="컴포넌트 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_COMPONENTS.map((component) => (
<SelectItem key={component.value} value={component.value}>
<div className="flex flex-col">
<span className="font-medium">{component.label}</span>
<span className="text-muted-foreground text-xs">{component.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.component_name && (
<div className="text-muted-foreground text-xs">
현재 선택:{" "}
<Badge variant="outline" className="font-mono">
{formData.component_name}
</Badge>
</div>
)}
</div>
{/* 설정 패널 */}
<div className="space-y-2">
<Label htmlFor="config_panel">설정 패널</Label>
<Select
value={formData.config_panel || "none"}
onValueChange={(value) => handleInputChange("config_panel", value === "none" ? null : value)}
>
<SelectTrigger>
<SelectValue placeholder="설정 패널 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_CONFIG_PANELS.map((panel) => (
<SelectItem key={panel.value} value={panel.value}>
<div className="flex flex-col">
<span className="font-medium">{panel.label}</span>
<span className="text-muted-foreground text-xs">{panel.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.config_panel && (
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
<div className="flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-green-500"></div>
<span className="text-sm font-medium text-green-700">
현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
</span>
</div>
{getConfigPanelInfo(formData.config_panel)?.description && (
<p className="mt-1 ml-4 text-xs text-green-600">
{getConfigPanelInfo(formData.config_panel)?.description}
</p>
)}
</div>
)}
</div>
{/* 설명 */}
<div className="space-y-2">
<Label htmlFor="description">설명</Label>
<Textarea
id="description"
value={formData.description || ""}
onChange={(e) => handleInputChange("description", e.target.value)}
placeholder="웹타입에 대한 설명을 입력해주세요..."
rows={3}
/>
</div>
{/* 정렬 순서 */}
<div className="space-y-2">
<Label htmlFor="sort_order">정렬 순서</Label>
<Input
id="sort_order"
type="number"
value={formData.sort_order || 0}
onChange={(e) => handleInputChange("sort_order", parseInt(e.target.value) || 0)}
placeholder="0"
min="0"
/>
<p className="text-muted-foreground text-xs">낮은 숫자일수록 먼저 표시됩니다.</p>
</div>
</CardContent>
</Card>
{/* 상태 설정 */}
<Card>
<CardHeader>
<CardTitle>상태 설정</CardTitle>
<CardDescription>웹타입의 활성화 상태를 설정합니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label htmlFor="is_active">활성화 상태</Label>
<p className="text-muted-foreground text-xs">비활성화 시 화면관리에서 사용할 수 없습니다.</p>
</div>
<Switch
id="is_active"
checked={formData.is_active === "Y"}
onCheckedChange={(checked) => handleInputChange("is_active", checked ? "Y" : "N")}
/>
</div>
<div className="mt-4">
<Badge variant={formData.is_active === "Y" ? "default" : "secondary"}>
{formData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</div>
</CardContent>
</Card>
{/* JSON 설정 */}
<Card className="lg:col-span-3">
<CardHeader>
<CardTitle>고급 설정 (JSON)</CardTitle>
<CardDescription>웹타입의 세부 설정을 JSON 형식으로 수정할 수 있습니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 설정 */}
<div className="space-y-2">
<Label htmlFor="default_config">기본 설정</Label>
<Textarea
id="default_config"
value={jsonStrings.default_config}
onChange={(e) => handleJsonChange("default_config", e.target.value)}
placeholder='{"placeholder": "입력하세요..."}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
</div>
{/* 유효성 검사 규칙 */}
<div className="space-y-2">
<Label htmlFor="validation_rules">유효성 검사 규칙</Label>
<Textarea
id="validation_rules"
value={jsonStrings.validation_rules}
onChange={(e) => handleJsonChange("validation_rules", e.target.value)}
placeholder='{"required": true, "minLength": 1}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
</div>
{/* 기본 스타일 */}
<div className="space-y-2">
<Label htmlFor="default_style">기본 스타일</Label>
<Textarea
id="default_style"
value={jsonStrings.default_style}
onChange={(e) => handleJsonChange("default_style", e.target.value)}
placeholder='{"width": "100%", "height": "40px"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
</div>
{/* 입력 속성 */}
<div className="space-y-2">
<Label htmlFor="input_properties">HTML 입력 속성</Label>
<Textarea
id="input_properties"
value={jsonStrings.input_properties}
onChange={(e) => handleJsonChange("input_properties", e.target.value)}
placeholder='{"type": "text", "autoComplete": "off"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
</div>
</div>
</CardContent>
</Card>
</div>
)}
{/* 액션 버튼 */}
<div className="mt-6 flex items-center justify-between">
<Link href={`/admin/standards/${webType}`}>
<Button variant="outline">
<Eye className="mr-2 h-4 w-4" />
상세보기
</Button>
</Link>
<div className="flex gap-4">
<Button variant="outline" onClick={handleReset}>
<RotateCcw className="mr-2 h-4 w-4" />
되돌리기
</Button>
<Button onClick={handleSave} disabled={isUpdating}>
<Save className="mr-2 h-4 w-4" />
{isUpdating ? "저장 중..." : "저장"}
</Button>
</div>
</div>
{/* 에러 메시지 */}
{updateError && (
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
<p className="text-red-600">
수정 중 오류가 발생했습니다: {updateError instanceof Error ? updateError.message : "알 수 없는 오류"}
</p>
</div>
)}
</div>
</div>
);

380
frontend/app/(main)/admin/standards/[webType]/page.tsx
View File

@ -81,206 +81,206 @@ export default function WebTypeDetailPage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
{/* 헤더 */}
<div className="mb-6 flex items-center justify-between">
<div className="flex items-center gap-4">
<Link href="/admin/standards">
<Button variant="ghost" size="sm">
<ArrowLeft className="mr-2 h-4 w-4" />
목록으로
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold tracking-tight">{webTypeData.type_name}</h1>
<Badge variant={webTypeData.is_active === "Y" ? "default" : "secondary"}>
{webTypeData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</div>
<div className="mt-1 flex items-center gap-4">
<p className="text-muted-foreground font-mono">{webTypeData.web_type}</p>
{webTypeData.type_name_eng && <p className="text-muted-foreground">{webTypeData.type_name_eng}</p>}
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 헤더 */}
<div className="mb-6 flex items-center justify-between">
<div className="flex items-center gap-4">
<Link href="/admin/standards">
<Button variant="ghost" size="sm">
<ArrowLeft className="mr-2 h-4 w-4" />
목록으로
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold tracking-tight">{webTypeData.type_name}</h1>
<Badge variant={webTypeData.is_active === "Y" ? "default" : "secondary"}>
{webTypeData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</div>
<div className="mt-1 flex items-center gap-4">
<p className="text-muted-foreground font-mono">{webTypeData.web_type}</p>
{webTypeData.type_name_eng && <p className="text-muted-foreground">{webTypeData.type_name_eng}</p>}
</div>
</div>
</div>
</div>
<div className="flex gap-2">
<Link href={`/admin/standards/${webType}/edit`}>
<Button>
<Edit className="mr-2 h-4 w-4" />
편집
</Button>
</Link>
</div>
</div>
<Tabs defaultValue="overview" className="space-y-8">
<TabsList>
<TabsTrigger value="overview" className="flex items-center gap-2">
<Eye className="h-4 w-4" />
개요
</TabsTrigger>
<TabsTrigger value="config" className="flex items-center gap-2">
<Settings className="h-4 w-4" />
설정
</TabsTrigger>
<TabsTrigger value="json" className="flex items-center gap-2">
<Code className="h-4 w-4" />
JSON 데이터
</TabsTrigger>
</TabsList>
{/* 개요 탭 */}
<TabsContent value="overview" className="space-y-8">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 정보 */}
<Card>
<CardHeader>
<CardTitle>기본 정보</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<dt className="text-muted-foreground text-sm font-medium">웹타입 코드</dt>
<dd className="font-mono text-lg">{webTypeData.web_type}</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">웹타입명</dt>
<dd className="text-lg">{webTypeData.type_name}</dd>
</div>
{webTypeData.type_name_eng && (
<div>
<dt className="text-muted-foreground text-sm font-medium">영문명</dt>
<dd className="text-lg">{webTypeData.type_name_eng}</dd>
</div>
)}
<div>
<dt className="text-muted-foreground text-sm font-medium">카테고리</dt>
<dd>
<Badge variant="secondary">{webTypeData.category}</Badge>
</dd>
</div>
{webTypeData.description && (
<div>
<dt className="text-muted-foreground text-sm font-medium">설명</dt>
<dd className="text-muted-foreground text-sm">{webTypeData.description}</dd>
</div>
)}
</CardContent>
</Card>
{/* 메타데이터 */}
<Card>
<CardHeader>
<CardTitle>메타데이터</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<dt className="text-muted-foreground text-sm font-medium">정렬 순서</dt>
<dd className="text-lg">{webTypeData.sort_order || 0}</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">상태</dt>
<dd>
<Badge variant={webTypeData.is_active === "Y" ? "default" : "secondary"}>
{webTypeData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">생성일</dt>
<dd className="text-sm">
{webTypeData.created_date ? new Date(webTypeData.created_date).toLocaleString("ko-KR") : "-"}
</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">생성자</dt>
<dd className="text-sm">{webTypeData.created_by || "-"}</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">최종 수정일</dt>
<dd className="text-sm">
{webTypeData.updated_date ? new Date(webTypeData.updated_date).toLocaleString("ko-KR") : "-"}
</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">수정자</dt>
<dd className="text-sm">{webTypeData.updated_by || "-"}</dd>
</div>
</CardContent>
</Card>
<div className="flex gap-2">
<Link href={`/admin/standards/${webType}/edit`}>
<Button>
<Edit className="mr-2 h-4 w-4" />
편집
</Button>
</Link>
</div>
</TabsContent>
</div>
{/* 설정 탭 */}
<TabsContent value="config" className="space-y-8">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 설정 */}
<Tabs defaultValue="overview" className="space-y-8">
<TabsList>
<TabsTrigger value="overview" className="flex items-center gap-2">
<Eye className="h-4 w-4" />
개요
</TabsTrigger>
<TabsTrigger value="config" className="flex items-center gap-2">
<Settings className="h-4 w-4" />
설정
</TabsTrigger>
<TabsTrigger value="json" className="flex items-center gap-2">
<Code className="h-4 w-4" />
JSON 데이터
</TabsTrigger>
</TabsList>
{/* 개요 탭 */}
<TabsContent value="overview" className="space-y-8">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 정보 */}
<Card>
<CardHeader>
<CardTitle>기본 정보</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<dt className="text-muted-foreground text-sm font-medium">웹타입 코드</dt>
<dd className="font-mono text-lg">{webTypeData.web_type}</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">웹타입명</dt>
<dd className="text-lg">{webTypeData.type_name}</dd>
</div>
{webTypeData.type_name_eng && (
<div>
<dt className="text-muted-foreground text-sm font-medium">영문명</dt>
<dd className="text-lg">{webTypeData.type_name_eng}</dd>
</div>
)}
<div>
<dt className="text-muted-foreground text-sm font-medium">카테고리</dt>
<dd>
<Badge variant="secondary">{webTypeData.category}</Badge>
</dd>
</div>
{webTypeData.description && (
<div>
<dt className="text-muted-foreground text-sm font-medium">설명</dt>
<dd className="text-muted-foreground text-sm">{webTypeData.description}</dd>
</div>
)}
</CardContent>
</Card>
{/* 메타데이터 */}
<Card>
<CardHeader>
<CardTitle>메타데이터</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<dt className="text-muted-foreground text-sm font-medium">정렬 순서</dt>
<dd className="text-lg">{webTypeData.sort_order || 0}</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">상태</dt>
<dd>
<Badge variant={webTypeData.is_active === "Y" ? "default" : "secondary"}>
{webTypeData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">생성일</dt>
<dd className="text-sm">
{webTypeData.created_date ? new Date(webTypeData.created_date).toLocaleString("ko-KR") : "-"}
</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">생성자</dt>
<dd className="text-sm">{webTypeData.created_by || "-"}</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">최종 수정일</dt>
<dd className="text-sm">
{webTypeData.updated_date ? new Date(webTypeData.updated_date).toLocaleString("ko-KR") : "-"}
</dd>
</div>
<div>
<dt className="text-muted-foreground text-sm font-medium">수정자</dt>
<dd className="text-sm">{webTypeData.updated_by || "-"}</dd>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
{/* 설정 탭 */}
<TabsContent value="config" className="space-y-8">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 설정 */}
<Card>
<CardHeader>
<CardTitle>기본 설정</CardTitle>
<CardDescription>웹타입의 기본 동작 설정입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.default_config)}
</pre>
</CardContent>
</Card>
{/* 유효성 검사 규칙 */}
<Card>
<CardHeader>
<CardTitle>유효성 검사 규칙</CardTitle>
<CardDescription>입력값 검증을 위한 규칙입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.validation_rules)}
</pre>
</CardContent>
</Card>
{/* 기본 스타일 */}
<Card>
<CardHeader>
<CardTitle>기본 스타일</CardTitle>
<CardDescription>웹타입의 기본 스타일 설정입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.default_style)}
</pre>
</CardContent>
</Card>
{/* HTML 입력 속성 */}
<Card>
<CardHeader>
<CardTitle>HTML 입력 속성</CardTitle>
<CardDescription>HTML 요소에 적용될 기본 속성입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.input_properties)}
</pre>
</CardContent>
</Card>
</div>
</TabsContent>
{/* JSON 데이터 탭 */}
<TabsContent value="json" className="space-y-8">
<Card>
<CardHeader>
<CardTitle>기본 설정</CardTitle>
<CardDescription>웹타입의 기본 동작 설정입니다.</CardDescription>
<CardTitle>전체 JSON 데이터</CardTitle>
<CardDescription>웹타입의 모든 데이터를 JSON 형식으로 확인할 수 있습니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.default_config)}
</pre>
<pre className="bg-muted max-h-96 overflow-auto rounded-md p-4 text-xs">{formatJson(webTypeData)}</pre>
</CardContent>
</Card>
{/* 유효성 검사 규칙 */}
<Card>
<CardHeader>
<CardTitle>유효성 검사 규칙</CardTitle>
<CardDescription>입력값 검증을 위한 규칙입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.validation_rules)}
</pre>
</CardContent>
</Card>
{/* 기본 스타일 */}
<Card>
<CardHeader>
<CardTitle>기본 스타일</CardTitle>
<CardDescription>웹타입의 기본 스타일 설정입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.default_style)}
</pre>
</CardContent>
</Card>
{/* HTML 입력 속성 */}
<Card>
<CardHeader>
<CardTitle>HTML 입력 속성</CardTitle>
<CardDescription>HTML 요소에 적용될 기본 속성입니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted overflow-auto rounded-md p-4 text-xs">
{formatJson(webTypeData.input_properties)}
</pre>
</CardContent>
</Card>
</div>
</TabsContent>
{/* JSON 데이터 탭 */}
<TabsContent value="json" className="space-y-8">
<Card>
<CardHeader>
<CardTitle>전체 JSON 데이터</CardTitle>
<CardDescription>웹타입의 모든 데이터를 JSON 형식으로 확인할 수 있습니다.</CardDescription>
</CardHeader>
<CardContent>
<pre className="bg-muted max-h-96 overflow-auto rounded-md p-4 text-xs">{formatJson(webTypeData)}</pre>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</TabsContent>
</Tabs>
</div>
</div>
);

552
frontend/app/(main)/admin/standards/new/page.tsx
View File

@ -160,300 +160,300 @@ export default function NewWebTypePage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
{/* 헤더 */}
<div className="mb-6 flex items-center gap-4">
<Link href="/admin/standards">
<Button variant="ghost" size="sm">
<ArrowLeft className="mr-2 h-4 w-4" />
목록으로
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold tracking-tight">새 웹타입 추가</h1>
<p className="text-muted-foreground">새로운 웹타입을 생성하여 화면관리에서 사용할 수 있습니다.</p>
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 헤더 */}
<div className="mb-6 flex items-center gap-4">
<Link href="/admin/standards">
<Button variant="ghost" size="sm">
<ArrowLeft className="mr-2 h-4 w-4" />
목록으로
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold tracking-tight">새 웹타입 추가</h1>
<p className="text-muted-foreground">새로운 웹타입을 생성하여 화면관리에서 사용할 수 있습니다.</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* 기본 정보 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>기본 정보</CardTitle>
<CardDescription>웹타입의 기본적인 정보를 입력해주세요.</CardDescription>
</CardHeader>
<CardContent className="space-y-8">
{/* 웹타입 코드 */}
<div className="space-y-2">
<Label htmlFor="web_type">
웹타입 코드 <span className="text-red-500">*</span>
</Label>
<Input
id="web_type"
value={formData.web_type}
onChange={(e) => handleInputChange("web_type", e.target.value)}
placeholder="예: text, number, email..."
className="font-mono"
/>
<p className="text-muted-foreground text-xs">영문 소문자, 숫자, 언더스코어(_)만 사용 가능합니다.</p>
</div>
{/* 웹타입명 */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* 기본 정보 */}
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>기본 정보</CardTitle>
<CardDescription>웹타입의 기본적인 정보를 입력해주세요.</CardDescription>
</CardHeader>
<CardContent className="space-y-8">
{/* 웹타입 코드 */}
<div className="space-y-2">
<Label htmlFor="type_name">
웹타입명 <span className="text-red-500">*</span>
<Label htmlFor="web_type">
웹타입 코드 <span className="text-red-500">*</span>
</Label>
<Input
id="type_name"
value={formData.type_name}
onChange={(e) => handleInputChange("type_name", e.target.value)}
placeholder="예: 텍스트 입력"
id="web_type"
value={formData.web_type}
onChange={(e) => handleInputChange("web_type", e.target.value)}
placeholder="예: text, number, email..."
className="font-mono"
/>
<p className="text-muted-foreground text-xs">영문 소문자, 숫자, 언더스코어(_)만 사용 가능합니다.</p>
</div>
<div className="space-y-2">
<Label htmlFor="type_name_eng">영문명</Label>
<Input
id="type_name_eng"
value={formData.type_name_eng}
onChange={(e) => handleInputChange("type_name_eng", e.target.value)}
placeholder="예: Text Input"
/>
</div>
</div>
{/* 카테고리 */}
<div className="space-y-2">
<Label htmlFor="category">
카테고리 <span className="text-red-500">*</span>
</Label>
<Select value={formData.category} onValueChange={(value) => handleInputChange("category", value)}>
<SelectTrigger>
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
{DEFAULT_CATEGORIES.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 연결된 컴포넌트 */}
<div className="space-y-2">
<Label htmlFor="component_name">
연결된 컴포넌트 <span className="text-red-500">*</span>
</Label>
<Select
value={formData.component_name || "TextWidget"}
onValueChange={(value) => handleInputChange("component_name", value)}
>
<SelectTrigger>
<SelectValue placeholder="컴포넌트 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_COMPONENTS.map((component) => (
<SelectItem key={component.value} value={component.value}>
<div className="flex flex-col">
<span className="font-medium">{component.label}</span>
<span className="text-muted-foreground text-xs">{component.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.component_name && (
<div className="text-muted-foreground text-xs">
현재 선택:{" "}
<Badge variant="outline" className="font-mono">
{formData.component_name}
</Badge>
{/* 웹타입명 */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="type_name">
웹타입명 <span className="text-red-500">*</span>
</Label>
<Input
id="type_name"
value={formData.type_name}
onChange={(e) => handleInputChange("type_name", e.target.value)}
placeholder="예: 텍스트 입력"
/>
</div>
)}
</div>
<div className="space-y-2">
<Label htmlFor="type_name_eng">영문명</Label>
<Input
id="type_name_eng"
value={formData.type_name_eng}
onChange={(e) => handleInputChange("type_name_eng", e.target.value)}
placeholder="예: Text Input"
/>
</div>
</div>
{/* 설정 패널 */}
<div className="space-y-2">
<Label htmlFor="config_panel">설정 패널</Label>
<Select
value={formData.config_panel || "none"}
onValueChange={(value) => handleInputChange("config_panel", value === "none" ? null : value)}
>
<SelectTrigger>
<SelectValue placeholder="설정 패널 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_CONFIG_PANELS.map((panel) => (
<SelectItem key={panel.value} value={panel.value}>
<div className="flex flex-col">
<span className="font-medium">{panel.label}</span>
<span className="text-muted-foreground text-xs">{panel.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.config_panel && (
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
<div className="flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-green-500"></div>
<span className="text-sm font-medium text-green-700">
현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
</span>
{/* 카테고리 */}
<div className="space-y-2">
<Label htmlFor="category">
카테고리 <span className="text-red-500">*</span>
</Label>
<Select value={formData.category} onValueChange={(value) => handleInputChange("category", value)}>
<SelectTrigger>
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
{DEFAULT_CATEGORIES.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 연결된 컴포넌트 */}
<div className="space-y-2">
<Label htmlFor="component_name">
연결된 컴포넌트 <span className="text-red-500">*</span>
</Label>
<Select
value={formData.component_name || "TextWidget"}
onValueChange={(value) => handleInputChange("component_name", value)}
>
<SelectTrigger>
<SelectValue placeholder="컴포넌트 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_COMPONENTS.map((component) => (
<SelectItem key={component.value} value={component.value}>
<div className="flex flex-col">
<span className="font-medium">{component.label}</span>
<span className="text-muted-foreground text-xs">{component.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.component_name && (
<div className="text-muted-foreground text-xs">
현재 선택:{" "}
<Badge variant="outline" className="font-mono">
{formData.component_name}
</Badge>
</div>
{getConfigPanelInfo(formData.config_panel)?.description && (
<p className="mt-1 ml-4 text-xs text-green-600">
{getConfigPanelInfo(formData.config_panel)?.description}
</p>
)}
)}
</div>
{/* 설정 패널 */}
<div className="space-y-2">
<Label htmlFor="config_panel">설정 패널</Label>
<Select
value={formData.config_panel || "none"}
onValueChange={(value) => handleInputChange("config_panel", value === "none" ? null : value)}
>
<SelectTrigger>
<SelectValue placeholder="설정 패널 선택" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_CONFIG_PANELS.map((panel) => (
<SelectItem key={panel.value} value={panel.value}>
<div className="flex flex-col">
<span className="font-medium">{panel.label}</span>
<span className="text-muted-foreground text-xs">{panel.description}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{formData.config_panel && (
<div className="rounded-lg border border-green-200 bg-green-50 p-3">
<div className="flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-green-500"></div>
<span className="text-sm font-medium text-green-700">
현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
</span>
</div>
{getConfigPanelInfo(formData.config_panel)?.description && (
<p className="mt-1 ml-4 text-xs text-green-600">
{getConfigPanelInfo(formData.config_panel)?.description}
</p>
)}
</div>
)}
</div>
{/* 설명 */}
<div className="space-y-2">
<Label htmlFor="description">설명</Label>
<Textarea
id="description"
value={formData.description}
onChange={(e) => handleInputChange("description", e.target.value)}
placeholder="웹타입에 대한 설명을 입력해주세요..."
rows={3}
/>
</div>
{/* 정렬 순서 */}
<div className="space-y-2">
<Label htmlFor="sort_order">정렬 순서</Label>
<Input
id="sort_order"
type="number"
value={formData.sort_order}
onChange={(e) => handleInputChange("sort_order", parseInt(e.target.value) || 0)}
placeholder="0"
min="0"
/>
<p className="text-muted-foreground text-xs">낮은 숫자일수록 먼저 표시됩니다.</p>
</div>
</CardContent>
</Card>
{/* 상태 설정 */}
<Card>
<CardHeader>
<CardTitle>상태 설정</CardTitle>
<CardDescription>웹타입의 활성화 상태를 설정합니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label htmlFor="is_active">활성화 상태</Label>
<p className="text-muted-foreground text-xs">비활성화 시 화면관리에서 사용할 수 없습니다.</p>
</div>
)}
</div>
{/* 설명 */}
<div className="space-y-2">
<Label htmlFor="description">설명</Label>
<Textarea
id="description"
value={formData.description}
onChange={(e) => handleInputChange("description", e.target.value)}
placeholder="웹타입에 대한 설명을 입력해주세요..."
rows={3}
/>
</div>
{/* 정렬 순서 */}
<div className="space-y-2">
<Label htmlFor="sort_order">정렬 순서</Label>
<Input
id="sort_order"
type="number"
value={formData.sort_order}
onChange={(e) => handleInputChange("sort_order", parseInt(e.target.value) || 0)}
placeholder="0"
min="0"
/>
<p className="text-muted-foreground text-xs">낮은 숫자일수록 먼저 표시됩니다.</p>
</div>
</CardContent>
</Card>
{/* 상태 설정 */}
<Card>
<CardHeader>
<CardTitle>상태 설정</CardTitle>
<CardDescription>웹타입의 활성화 상태를 설정합니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label htmlFor="is_active">활성화 상태</Label>
<p className="text-muted-foreground text-xs">비활성화 시 화면관리에서 사용할 수 없습니다.</p>
</div>
<Switch
id="is_active"
checked={formData.is_active === "Y"}
onCheckedChange={(checked) => handleInputChange("is_active", checked ? "Y" : "N")}
/>
</div>
<div className="mt-4">
<Badge variant={formData.is_active === "Y" ? "default" : "secondary"}>
{formData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</div>
</CardContent>
</Card>
{/* JSON 설정 */}
<Card className="lg:col-span-3">
<CardHeader>
<CardTitle>고급 설정 (JSON)</CardTitle>
<CardDescription>웹타입의 세부 설정을 JSON 형식으로 입력할 수 있습니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 설정 */}
<div className="space-y-2">
<Label htmlFor="default_config">기본 설정</Label>
<Textarea
id="default_config"
value={jsonStrings.default_config}
onChange={(e) => handleJsonChange("default_config", e.target.value)}
placeholder='{"placeholder": "입력하세요..."}'
rows={4}
className="font-mono text-xs"
<Switch
id="is_active"
checked={formData.is_active === "Y"}
onCheckedChange={(checked) => handleInputChange("is_active", checked ? "Y" : "N")}
/>
{jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
</div>
{/* 유효성 검사 규칙 */}
<div className="space-y-2">
<Label htmlFor="validation_rules">유효성 검사 규칙</Label>
<Textarea
id="validation_rules"
value={jsonStrings.validation_rules}
onChange={(e) => handleJsonChange("validation_rules", e.target.value)}
placeholder='{"required": true, "minLength": 1}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
<div className="mt-4">
<Badge variant={formData.is_active === "Y" ? "default" : "secondary"}>
{formData.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</div>
</CardContent>
</Card>
{/* 기본 스타일 */}
<div className="space-y-2">
<Label htmlFor="default_style">기본 스타일</Label>
<Textarea
id="default_style"
value={jsonStrings.default_style}
onChange={(e) => handleJsonChange("default_style", e.target.value)}
placeholder='{"width": "100%", "height": "40px"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
{/* JSON 설정 */}
<Card className="lg:col-span-3">
<CardHeader>
<CardTitle>고급 설정 (JSON)</CardTitle>
<CardDescription>웹타입의 세부 설정을 JSON 형식으로 입력할 수 있습니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* 기본 설정 */}
<div className="space-y-2">
<Label htmlFor="default_config">기본 설정</Label>
<Textarea
id="default_config"
value={jsonStrings.default_config}
onChange={(e) => handleJsonChange("default_config", e.target.value)}
placeholder='{"placeholder": "입력하세요..."}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
</div>
{/* 유효성 검사 규칙 */}
<div className="space-y-2">
<Label htmlFor="validation_rules">유효성 검사 규칙</Label>
<Textarea
id="validation_rules"
value={jsonStrings.validation_rules}
onChange={(e) => handleJsonChange("validation_rules", e.target.value)}
placeholder='{"required": true, "minLength": 1}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
</div>
{/* 기본 스타일 */}
<div className="space-y-2">
<Label htmlFor="default_style">기본 스타일</Label>
<Textarea
id="default_style"
value={jsonStrings.default_style}
onChange={(e) => handleJsonChange("default_style", e.target.value)}
placeholder='{"width": "100%", "height": "40px"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
</div>
{/* 입력 속성 */}
<div className="space-y-2">
<Label htmlFor="input_properties">HTML 입력 속성</Label>
<Textarea
id="input_properties"
value={jsonStrings.input_properties}
onChange={(e) => handleJsonChange("input_properties", e.target.value)}
placeholder='{"type": "text", "autoComplete": "off"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
</div>
</div>
{/* 입력 속성 */}
<div className="space-y-2">
<Label htmlFor="input_properties">HTML 입력 속성</Label>
<Textarea
id="input_properties"
value={jsonStrings.input_properties}
onChange={(e) => handleJsonChange("input_properties", e.target.value)}
placeholder='{"type": "text", "autoComplete": "off"}'
rows={4}
className="font-mono text-xs"
/>
{jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
</div>
</div>
</CardContent>
</Card>
</div>
{/* 액션 버튼 */}
<div className="mt-6 flex justify-end gap-4">
<Button variant="outline" onClick={handleReset}>
<RotateCcw className="mr-2 h-4 w-4" />
초기화
</Button>
<Button onClick={handleSave} disabled={isCreating}>
<Save className="mr-2 h-4 w-4" />
{isCreating ? "생성 중..." : "저장"}
</Button>
</div>
{/* 에러 메시지 */}
{createError && (
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
<p className="text-red-600">
생성 중 오류가 발생했습니다: {createError instanceof Error ? createError.message : "알 수 없는 오류"}
</p>
</CardContent>
</Card>
</div>
)}
{/* 액션 버튼 */}
<div className="mt-6 flex justify-end gap-4">
<Button variant="outline" onClick={handleReset}>
<RotateCcw className="mr-2 h-4 w-4" />
초기화
</Button>
<Button onClick={handleSave} disabled={isCreating}>
<Save className="mr-2 h-4 w-4" />
{isCreating ? "생성 중..." : "저장"}
</Button>
</div>
{/* 에러 메시지 */}
{createError && (
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
<p className="text-red-600">
생성 중 오류가 발생했습니다: {createError instanceof Error ? createError.message : "알 수 없는 오류"}
</p>
</div>
)}
</div>
</div>
);

146
frontend/app/(main)/admin/standards/page.tsx
View File

@ -118,7 +118,7 @@ export default function WebTypesManagePage() {
return (
<div className="flex h-96 items-center justify-center">
<div className="text-center">
<div className="mb-2 text-lg text-destructive">웹타입 목록을 불러오는데 실패했습니다.</div>
<div className="text-destructive mb-2 text-lg">웹타입 목록을 불러오는데 실패했습니다.</div>
<Button onClick={() => refetch()} variant="outline">
다시 시도
</Button>
@ -128,13 +128,13 @@ export default function WebTypesManagePage() {
}
return (
<div className="min-h-screen bg-background">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="bg-background min-h-screen">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="flex items-center justify-between bg-background rounded-lg shadow-sm border p-6">
<div className="bg-background flex items-center justify-between rounded-lg border p-6 shadow-sm">
<div>
<h1 className="text-3xl font-bold text-foreground">웹타입 관리</h1>
<p className="mt-2 text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
<h1 className="text-foreground text-3xl font-bold">웹타입 관리</h1>
<p className="text-muted-foreground mt-2">화면관리에서 사용할 웹타입들을 관리합니다</p>
</div>
<Link href="/admin/standards/new">
<Button className="shadow-sm">
@ -147,15 +147,15 @@ export default function WebTypesManagePage() {
<Card className="shadow-sm">
<CardHeader className="bg-muted/50">
<CardTitle className="flex items-center gap-2 text-lg">
<Filter className="h-5 w-5 text-muted-foreground" />
<Filter className="text-muted-foreground h-5 w-5" />
필터 및 검색
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
{/* 검색 */}
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
<Input
placeholder="웹타입명, 설명 검색..."
value={searchTerm}
@ -169,15 +169,15 @@ export default function WebTypesManagePage() {
<SelectTrigger>
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 카테고리</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
<SelectContent>
<SelectItem value="all">전체 카테고리</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
{/* 활성화 상태 필터 */}
<Select value={activeFilter} onValueChange={setActiveFilter}>
@ -196,13 +196,15 @@ export default function WebTypesManagePage() {
<RotateCcw className="mr-2 h-4 w-4" />
초기화
</Button>
</div>
</CardContent>
</Card>
</div>
</CardContent>
</Card>
{/* 결과 통계 */}
<div className="bg-background rounded-lg border px-4 py-3">
<p className="text-foreground text-sm font-medium">총 {filteredAndSortedWebTypes.length}개의 웹타입이 있습니다.</p>
<p className="text-foreground text-sm font-medium">
총 {filteredAndSortedWebTypes.length}개의 웹타입이 있습니다.
</p>
</div>
{/* 웹타입 목록 테이블 */}
@ -210,28 +212,40 @@ export default function WebTypesManagePage() {
<Table>
<TableHeader>
<TableRow className="bg-background">
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("sort_order")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("sort_order")}
>
<div className="flex items-center gap-2">
순서
{sortField === "sort_order" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("web_type")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("web_type")}
>
<div className="flex items-center gap-2">
웹타입 코드
{sortField === "web_type" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("type_name")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("type_name")}
>
<div className="flex items-center gap-2">
웹타입명
{sortField === "type_name" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("category")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("category")}
>
<div className="flex items-center gap-2">
카테고리
{sortField === "category" &&
@ -239,35 +253,47 @@ export default function WebTypesManagePage() {
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("component_name")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("component_name")}
>
<div className="flex items-center gap-2">
연결된 컴포넌트
{sortField === "component_name" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("config_panel")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("config_panel")}
>
<div className="flex items-center gap-2">
설정 패널
{sortField === "config_panel" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("is_active")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("is_active")}
>
<div className="flex items-center gap-2">
상태
{sortField === "is_active" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("updated_date")}>
<TableHead
className="hover:bg-muted/50 h-12 cursor-pointer px-6 py-3 text-sm font-semibold"
onClick={() => handleSort("updated_date")}
>
<div className="flex items-center gap-2">
최종 수정일
{sortField === "updated_date" &&
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
</div>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold text-center">작업</TableHead>
<TableHead className="h-12 px-6 py-3 text-center text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -279,10 +305,10 @@ export default function WebTypesManagePage() {
</TableRow>
) : (
filteredAndSortedWebTypes.map((webType) => (
<TableRow key={webType.web_type} className="bg-background transition-colors hover:bg-muted/50">
<TableRow key={webType.web_type} className="bg-background hover:bg-muted/50 transition-colors">
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.sort_order || 0}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.web_type}</TableCell>
<TableCell className="h-16 px-6 py-3 font-medium text-sm">
<TableCell className="h-16 px-6 py-3 text-sm font-medium">
{webType.type_name}
{webType.type_name_eng && (
<div className="text-muted-foreground text-xs">{webType.type_name_eng}</div>
@ -291,7 +317,9 @@ export default function WebTypesManagePage() {
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="secondary">{webType.category}</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 max-w-xs truncate text-sm">{webType.description || "-"}</TableCell>
<TableCell className="h-16 max-w-xs truncate px-6 py-3 text-sm">
{webType.description || "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="outline" className="font-mono text-xs">
{webType.component_name || "TextWidget"}
@ -307,27 +335,27 @@ export default function WebTypesManagePage() {
{webType.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-muted-foreground text-sm">
<TableCell className="text-muted-foreground h-16 px-6 py-3 text-sm">
{webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center gap-2">
<Link href={`/admin/standards/${webType.web_type}`}>
<Button variant="ghost" size="sm">
<Eye className="h-4 w-4" />
</Button>
</Link>
<Link href={`/admin/standards/${webType.web_type}/edit`}>
<Button variant="ghost" size="sm">
<Edit className="h-4 w-4" />
</Button>
</Link>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="ghost" size="sm">
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</AlertDialogTrigger>
<div className="flex items-center gap-2">
<Link href={`/admin/standards/${webType.web_type}`}>
<Button variant="ghost" size="sm">
<Eye className="h-4 w-4" />
</Button>
</Link>
<Link href={`/admin/standards/${webType.web_type}/edit`}>
<Button variant="ghost" size="sm">
<Edit className="h-4 w-4" />
</Button>
</Link>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="ghost" size="sm">
<Trash2 className="text-destructive h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
@ -357,13 +385,13 @@ export default function WebTypesManagePage() {
</Table>
</div>
{deleteError && (
<div className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 p-4">
<p className="text-destructive">
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
</p>
</div>
)}
{deleteError && (
<div className="border-destructive/30 bg-destructive/10 mt-4 rounded-md border p-4">
<p className="text-destructive">
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
</p>
</div>
)}
</div>
</div>
);

347
frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
View File

@ -5,37 +5,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Plus,
Search,
MoreHorizontal,
Edit,
Trash2,
Play,
History,
RefreshCw
} from "lucide-react";
import { Plus, Search, MoreHorizontal, Edit, Trash2, Play, History, RefreshCw } from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { CollectionAPI, DataCollectionConfig } from "@/lib/api/collection";
@ -48,7 +26,7 @@ export default function CollectionManagementPage() {
const [searchTerm, setSearchTerm] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [typeFilter, setTypeFilter] = useState("all");
// 모달 상태
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedConfig, setSelectedConfig] = useState<DataCollectionConfig | null>(null);
@ -81,21 +59,22 @@ export default function CollectionManagementPage() {
// 검색어 필터
if (searchTerm) {
filtered = filtered.filter(config =>
config.config_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
config.source_table.toLowerCase().includes(searchTerm.toLowerCase()) ||
config.description?.toLowerCase().includes(searchTerm.toLowerCase())
filtered = filtered.filter(
(config) =>
config.config_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
config.source_table.toLowerCase().includes(searchTerm.toLowerCase()) ||
config.description?.toLowerCase().includes(searchTerm.toLowerCase()),
);
}
// 상태 필터
if (statusFilter !== "all") {
filtered = filtered.filter(config => config.is_active === statusFilter);
filtered = filtered.filter((config) => config.is_active === statusFilter);
}
// 타입 필터
if (typeFilter !== "all") {
filtered = filtered.filter(config => config.collection_type === typeFilter);
filtered = filtered.filter((config) => config.collection_type === typeFilter);
}
setFilteredConfigs(filtered);
@ -149,7 +128,7 @@ export default function CollectionManagementPage() {
};
const getTypeBadge = (type: string) => {
const option = collectionTypeOptions.find(opt => opt.value === type);
const option = collectionTypeOptions.find((opt) => opt.value === type);
const colors = {
full: "bg-blue-100 text-blue-800",
incremental: "bg-purple-100 text-purple-800",
@ -164,176 +143,156 @@ export default function CollectionManagementPage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 헤더 */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">수집 관리</h1>
<p className="text-muted-foreground">
외부 데이터베이스에서 데이터를 수집하는 설정을 관리합니다.
</p>
</div>
<Button onClick={handleCreate}>
<Plus className="h-4 w-4 mr-2" />
새 수집 설정
</Button>
</div>
{/* 필터 및 검색 */}
<Card>
<CardHeader>
<CardTitle>필터 및 검색</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col md:flex-row gap-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
<Input
placeholder="설정명, 테이블명, 설명으로 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
</div>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-32">
<SelectValue placeholder="상태" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성</SelectItem>
<SelectItem value="N">비활성</SelectItem>
</SelectContent>
</Select>
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="w-40">
<SelectValue placeholder="수집 타입" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 타입</SelectItem>
{collectionTypeOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button variant="outline" onClick={loadConfigs} disabled={isLoading}>
<RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
새로고침
</Button>
<p className="text-muted-foreground">외부 데이터베이스에서 데이터를 수집하는 설정을 관리합니다.</p>
</div>
</CardContent>
</Card>
<Button onClick={handleCreate}>
<Plus className="mr-2 h-4 w-4" />새 수집 설정
</Button>
</div>
{/* 수집 설정 목록 */}
<Card>
<CardHeader>
<CardTitle>수집 설정 목록 ({filteredConfigs.length}개)</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="text-center py-8">
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
<p>수집 설정을 불러오는 중...</p>
{/* 필터 및 검색 */}
<Card>
<CardHeader>
<CardTitle>필터 및 검색</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4 md:flex-row">
<div className="flex-1">
<div className="relative">
<Search className="text-muted-foreground absolute top-3 left-3 h-4 w-4" />
<Input
placeholder="설정명, 테이블명, 설명으로 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
</div>
</div>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-32">
<SelectValue placeholder="상태" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성</SelectItem>
<SelectItem value="N">비활성</SelectItem>
</SelectContent>
</Select>
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="w-40">
<SelectValue placeholder="수집 타입" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 타입</SelectItem>
{collectionTypeOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button variant="outline" onClick={loadConfigs} disabled={isLoading}>
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
새로고침
</Button>
</div>
) : filteredConfigs.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
{configs.length === 0 ? "수집 설정이 없습니다." : "검색 결과가 없습니다."}
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설정명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">수집 타입</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">소스 테이블</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">대상 테이블</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">스케줄</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">마지막 수집</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredConfigs.map((config) => (
<TableRow key={config.id} className="bg-background transition-colors hover:bg-muted/50">
<TableCell className="h-16 px-6 py-3 text-sm">
<div>
<div className="font-medium">{config.config_name}</div>
{config.description && (
<div className="text-sm text-muted-foreground">
{config.description}
</div>
)}
</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{getTypeBadge(config.collection_type)}
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
{config.source_table}
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
{config.target_table || "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">
{config.schedule_cron || "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{getStatusBadge(config.is_active)}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{config.last_collected_at
? new Date(config.last_collected_at).toLocaleString()
: "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEdit(config)}>
<Edit className="h-4 w-4 mr-2" />
수정
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExecute(config)}
disabled={config.is_active !== "Y"}
>
<Play className="h-4 w-4 mr-2" />
실행
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(config)}>
<Trash2 className="h-4 w-4 mr-2" />
삭제
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</CardContent>
</Card>
{/* 수집 설정 목록 */}
<Card>
<CardHeader>
<CardTitle>수집 설정 목록 ({filteredConfigs.length}개)</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="py-8 text-center">
<RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin" />
<p>수집 설정을 불러오는 중...</p>
</div>
) : filteredConfigs.length === 0 ? (
<div className="text-muted-foreground py-8 text-center">
{configs.length === 0 ? "수집 설정이 없습니다." : "검색 결과가 없습니다."}
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설정명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">수집 타입</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">소스 테이블</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">대상 테이블</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">스케줄</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">마지막 수집</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
</TableRow>
))}
</TableBody>
</Table>
)}
</CardContent>
</Card>
</TableHeader>
<TableBody>
{filteredConfigs.map((config) => (
<TableRow key={config.id} className="bg-background hover:bg-muted/50 transition-colors">
<TableCell className="h-16 px-6 py-3 text-sm">
<div>
<div className="font-medium">{config.config_name}</div>
{config.description && (
<div className="text-muted-foreground text-sm">{config.description}</div>
)}
</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">{getTypeBadge(config.collection_type)}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.source_table}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.target_table || "-"}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.schedule_cron || "-"}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">{getStatusBadge(config.is_active)}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
{config.last_collected_at ? new Date(config.last_collected_at).toLocaleString() : "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEdit(config)}>
<Edit className="mr-2 h-4 w-4" />
수정
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleExecute(config)} disabled={config.is_active !== "Y"}>
<Play className="mr-2 h-4 w-4" />
실행
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(config)}>
<Trash2 className="mr-2 h-4 w-4" />
삭제
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</CardContent>
</Card>
{/* 수집 설정 모달 */}
<CollectionConfigModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onSave={handleModalSave}
config={selectedConfig}
/>
{/* 수집 설정 모달 */}
<CollectionConfigModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onSave={handleModalSave}
config={selectedConfig}
/>
</div>
</div>
);

6
frontend/app/(main)/admin/systemMng/commonCodeList/page.tsx
View File

@ -9,12 +9,12 @@ export default function CommonCodeManagementPage() {
const { selectedCategoryCode, selectCategory } = useSelectedCategory();
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">공통코드 관리</h1>
<p className="text-sm text-muted-foreground">시스템에서 사용하는 공통코드를 관리합니다</p>
<p className="text-muted-foreground text-sm">시스템에서 사용하는 공통코드를 관리합니다</p>
</div>
{/* 메인 콘텐츠 - 좌우 레이아웃 */}
@ -33,7 +33,7 @@ export default function CommonCodeManagementPage() {
<h2 className="text-lg font-semibold">
코드 상세 정보
{selectedCategoryCode && (
<span className="ml-2 text-sm font-normal text-muted-foreground">({selectedCategoryCode})</span>
<span className="text-muted-foreground ml-2 text-sm font-normal">({selectedCategoryCode})</span>
)}
</h2>
<CodeDetailPanel categoryCode={selectedCategoryCode} />

27
frontend/app/(main)/admin/systemMng/i18nList/page.tsx
View File

@ -684,7 +684,9 @@ export default function I18nPage() {
</CardHeader>
<CardContent>
<div className="mb-4 flex items-center justify-between">
<div className="text-sm text-muted-foreground">총 {languages.length}개의 언어가 등록되어 있습니다.</div>
<div className="text-muted-foreground text-sm">
총 {languages.length}개의 언어가 등록되어 있습니다.
</div>
<div className="flex space-x-2">
{selectedLanguages.size > 0 && (
<Button variant="destructive" onClick={handleDeleteLanguages}>
@ -736,10 +738,10 @@ export default function I18nPage() {
)}
</CardTitle>
<div className="flex space-x-2">
<Button
<Button
size="sm"
variant="destructive"
onClick={handleDeleteSelectedKeys}
variant="destructive"
onClick={handleDeleteSelectedKeys}
disabled={selectedKeys.size === 0}
>
선택 삭제 ({selectedKeys.size})
@ -747,11 +749,7 @@ export default function I18nPage() {
<Button size="sm" variant="outline" onClick={handleAddKey}>
수동 추가
</Button>
<Button
size="sm"
onClick={() => setIsGenerateModalOpen(true)}
disabled={!selectedCategory}
>
<Button size="sm" onClick={() => setIsGenerateModalOpen(true)} disabled={!selectedCategory}>
<Plus className="mr-1 h-4 w-4" />
자동 생성
</Button>
@ -762,7 +760,9 @@ export default function I18nPage() {
{/* 검색 필터 영역 */}
<div className="mb-2 grid grid-cols-1 gap-2 md:grid-cols-3">
<div>
<Label htmlFor="company" className="text-xs">회사</Label>
<Label htmlFor="company" className="text-xs">
회사
</Label>
<Select value={selectedCompany} onValueChange={setSelectedCompany}>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="전체 회사" />
@ -779,7 +779,9 @@ export default function I18nPage() {
</div>
<div>
<Label htmlFor="search" className="text-xs">검색</Label>
<Label htmlFor="search" className="text-xs">
검색
</Label>
<Input
placeholder="키명, 설명으로 검색..."
value={searchText}
@ -789,7 +791,7 @@ export default function I18nPage() {
</div>
<div className="flex items-end">
<div className="text-xs text-muted-foreground">결과: {getFilteredLangKeys().length}건</div>
<div className="text-muted-foreground text-xs">결과: {getFilteredLangKeys().length}건</div>
</div>
</div>
@ -900,4 +902,3 @@ export default function I18nPage() {
</div>
);
}

963
frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
View File

File diff suppressed because it is too large Load Diff

455
frontend/app/(main)/admin/templates/page.tsx
View File

@ -146,9 +146,9 @@ export default function TemplatesManagePage() {
return (
<div className="min-h-screen bg-gray-50">
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="w-full max-w-none space-y-8 px-4 py-8">
{/* 페이지 제목 */}
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
<div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
<div>
<h1 className="text-3xl font-bold text-gray-900">템플릿 관리</h1>
<p className="mt-2 text-gray-600">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
@ -162,235 +162,242 @@ export default function TemplatesManagePage() {
</div>
</div>
{/* 필터 및 검색 */}
<Card className="shadow-sm">
<CardHeader className="bg-gray-50/50">
<CardTitle className="flex items-center">
<Filter className="mr-2 h-5 w-5 text-gray-600" />
필터 및 검색
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
{/* 검색 */}
<div className="space-y-2">
<label className="text-sm font-medium">검색</label>
<div className="relative">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
<Input
placeholder="템플릿명, 설명 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
{/* 필터 및 검색 */}
<Card className="shadow-sm">
<CardHeader className="bg-gray-50/50">
<CardTitle className="flex items-center">
<Filter className="mr-2 h-5 w-5 text-gray-600" />
필터 및 검색
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
{/* 검색 */}
<div className="space-y-2">
<label className="text-sm font-medium">검색</label>
<div className="relative">
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
<Input
placeholder="템플릿명, 설명 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
</div>
</div>
{/* 카테고리 필터 */}
<div className="space-y-2">
<label className="text-sm font-medium">카테고리</label>
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 활성화 상태 필터 */}
<div className="space-y-2">
<label className="text-sm font-medium">활성화 상태</label>
<Select value={activeFilter} onValueChange={setActiveFilter}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성화</SelectItem>
<SelectItem value="N">비활성화</SelectItem>
</SelectContent>
</Select>
</div>
{/* 새로고침 버튼 */}
<div className="flex items-end">
<Button onClick={() => refetch()} variant="outline" className="w-full">
<RefreshCw className="mr-2 h-4 w-4" />
새로고침
</Button>
</div>
</div>
</CardContent>
</Card>
{/* 카테고리 필터 */}
<div className="space-y-2">
<label className="text-sm font-medium">카테고리</label>
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 활성화 상태 필터 */}
<div className="space-y-2">
<label className="text-sm font-medium">활성화 상태</label>
<Select value={activeFilter} onValueChange={setActiveFilter}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체</SelectItem>
<SelectItem value="Y">활성화</SelectItem>
<SelectItem value="N">비활성화</SelectItem>
</SelectContent>
</Select>
</div>
{/* 새로고침 버튼 */}
<div className="flex items-end">
<Button onClick={() => refetch()} variant="outline" className="w-full">
<RefreshCw className="mr-2 h-4 w-4" />
새로고침
</Button>
</div>
</div>
</CardContent>
</Card>
{/* 템플릿 목록 테이블 */}
<Card className="shadow-sm">
<CardHeader className="bg-gray-50/50">
<CardTitle>템플릿 목록 ({filteredAndSortedTemplates.length}개)</CardTitle>
</CardHeader>
<CardContent>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="h-12 px-6 py-3 w-[60px]">
<Button
variant="ghost"
size="sm"
onClick={() => handleSort("sort_order")}
className="h-8 p-0 font-medium"
>
순서
<ArrowUpDown className="ml-1 h-3 w-3" />
</Button>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">
<Button
variant="ghost"
size="sm"
onClick={() => handleSort("template_code")}
className="h-8 p-0 font-medium"
>
템플릿 코드
<ArrowUpDown className="ml-1 h-3 w-3" />
</Button>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">
<Button
variant="ghost"
size="sm"
onClick={() => handleSort("template_name")}
className="h-8 p-0 font-medium"
>
템플릿명
<ArrowUpDown className="ml-1 h-3 w-3" />
</Button>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">카테고리</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">아이콘</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">기본 크기</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">공개 여부</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">활성화</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">수정일</TableHead>
<TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
{/* 템플릿 목록 테이블 */}
<Card className="shadow-sm">
<CardHeader className="bg-gray-50/50">
<CardTitle>템플릿 목록 ({filteredAndSortedTemplates.length}개)</CardTitle>
</CardHeader>
<CardContent>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableCell colSpan={11} className="py-8 text-center">
<LoadingSpinner />
<span className="ml-2">템플릿 목록을 불러오는 중...</span>
</TableCell>
<TableHead className="h-12 w-[60px] px-6 py-3">
<Button
variant="ghost"
size="sm"
onClick={() => handleSort("sort_order")}
className="h-8 p-0 font-medium"
>
순서
<ArrowUpDown className="ml-1 h-3 w-3" />
</Button>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">
<Button
variant="ghost"
size="sm"
onClick={() => handleSort("template_code")}
className="h-8 p-0 font-medium"
>
템플릿 코드
<ArrowUpDown className="ml-1 h-3 w-3" />
</Button>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">
<Button
variant="ghost"
size="sm"
onClick={() => handleSort("template_name")}
className="h-8 p-0 font-medium"
>
템플릿명
<ArrowUpDown className="ml-1 h-3 w-3" />
</Button>
</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">카테고리</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">아이콘</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">기본 크기</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">공개 여부</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">활성화</TableHead>
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">수정일</TableHead>
<TableHead className="h-12 w-[200px] px-6 py-3 text-sm font-semibold">작업</TableHead>
</TableRow>
) : filteredAndSortedTemplates.length === 0 ? (
<TableRow>
<TableCell colSpan={11} className="py-8 text-center text-gray-500">
검색 조건에 맞는 템플릿이 없습니다.
</TableCell>
</TableRow>
) : (
filteredAndSortedTemplates.map((template) => (
<TableRow key={template.template_code} className="bg-background transition-colors hover:bg-muted/50">
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{template.sort_order || 0}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{template.template_code}</TableCell>
<TableCell className="h-16 px-6 py-3 font-medium text-sm">
{template.template_name}
{template.template_name_eng && (
<div className="text-muted-foreground text-xs">{template.template_name_eng}</div>
)}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="secondary">{template.category}</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 max-w-xs truncate text-sm">{template.description || "-"}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center justify-center">{renderIcon(template.icon_name)}</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-xs">
{template.default_size ? `${template.default_size.width}×${template.default_size.height}` : "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant={template.is_public === "Y" ? "default" : "secondary"}>
{template.is_public === "Y" ? "공개" : "비공개"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant={template.is_active === "Y" ? "default" : "secondary"}>
{template.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-muted-foreground text-sm">
{template.updated_date ? new Date(template.updated_date).toLocaleDateString("ko-KR") : "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex space-x-1">
<Button asChild size="sm" variant="ghost">
<Link href={`/admin/templates/${template.template_code}`}>
<Eye className="h-4 w-4" />
</Link>
</Button>
<Button asChild size="sm" variant="ghost">
<Link href={`/admin/templates/${template.template_code}/edit`}>
<Edit2 className="h-4 w-4" />
</Link>
</Button>
<Button
size="sm"
variant="ghost"
onClick={() => handleExport(template.template_code, template.template_name)}
>
<Download className="h-4 w-4" />
</Button>
<Button asChild size="sm" variant="ghost">
<Link href={`/admin/templates/${template.template_code}/duplicate`}>
<Copy className="h-4 w-4" />
</Link>
</Button>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700">
<Trash2 className="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>템플릿 삭제</AlertDialogTitle>
<AlertDialogDescription>
템플릿 &apos;{template.template_name}&apos;을 정말 삭제하시겠습니까?
<br />이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction
onClick={() => handleDelete(template.template_code, template.template_name)}
className="bg-red-600 hover:bg-red-700"
disabled={isDeleting}
>
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={11} className="py-8 text-center">
<LoadingSpinner />
<span className="ml-2">템플릿 목록을 불러오는 중...</span>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
) : filteredAndSortedTemplates.length === 0 ? (
<TableRow>
<TableCell colSpan={11} className="py-8 text-center text-gray-500">
검색 조건에 맞는 템플릿이 없습니다.
</TableCell>
</TableRow>
) : (
filteredAndSortedTemplates.map((template) => (
<TableRow
key={template.template_code}
className="bg-background hover:bg-muted/50 transition-colors"
>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{template.sort_order || 0}</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-sm">{template.template_code}</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm font-medium">
{template.template_name}
{template.template_name_eng && (
<div className="text-muted-foreground text-xs">{template.template_name_eng}</div>
)}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant="secondary">{template.category}</Badge>
</TableCell>
<TableCell className="h-16 max-w-xs truncate px-6 py-3 text-sm">
{template.description || "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex items-center justify-center">{renderIcon(template.icon_name)}</div>
</TableCell>
<TableCell className="h-16 px-6 py-3 font-mono text-xs">
{template.default_size
? `${template.default_size.width}×${template.default_size.height}`
: "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant={template.is_public === "Y" ? "default" : "secondary"}>
{template.is_public === "Y" ? "공개" : "비공개"}
</Badge>
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<Badge variant={template.is_active === "Y" ? "default" : "secondary"}>
{template.is_active === "Y" ? "활성화" : "비활성화"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground h-16 px-6 py-3 text-sm">
{template.updated_date ? new Date(template.updated_date).toLocaleDateString("ko-KR") : "-"}
</TableCell>
<TableCell className="h-16 px-6 py-3 text-sm">
<div className="flex space-x-1">
<Button asChild size="sm" variant="ghost">
<Link href={`/admin/templates/${template.template_code}`}>
<Eye className="h-4 w-4" />
</Link>
</Button>
<Button asChild size="sm" variant="ghost">
<Link href={`/admin/templates/${template.template_code}/edit`}>
<Edit2 className="h-4 w-4" />
</Link>
</Button>
<Button
size="sm"
variant="ghost"
onClick={() => handleExport(template.template_code, template.template_name)}
>
<Download className="h-4 w-4" />
</Button>
<Button asChild size="sm" variant="ghost">
<Link href={`/admin/templates/${template.template_code}/duplicate`}>
<Copy className="h-4 w-4" />
</Link>
</Button>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700">
<Trash2 className="h-4 w-4" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>템플릿 삭제</AlertDialogTitle>
<AlertDialogDescription>
템플릿 &apos;{template.template_name}&apos;을 정말 삭제하시겠습니까?
<br />이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction
onClick={() => handleDelete(template.template_code, template.template_name)}
className="bg-red-600 hover:bg-red-700"
disabled={isDeleting}
>
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
</div>
</div>
);

4
frontend/app/(main)/admin/userMng/companyList/page.tsx
View File

@ -52,12 +52,12 @@ export default function CompanyPage() {
} = useCompanyManagement();
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">회사 관리</h1>
<p className="text-sm text-muted-foreground">시스템에서 사용하는 회사 정보를 관리합니다</p>
<p className="text-muted-foreground text-sm">시스템에서 사용하는 회사 정보를 관리합니다</p>
</div>
{/* 디스크 사용량 요약 */}

7
frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
View File

@ -248,7 +248,12 @@ export default function RoleDetailPage({ params }: { params: Promise<{ id: strin
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={() => router.push("/admin/userMng/rolesList")} className="h-10 w-10">
<Button
variant="ghost"
size="icon"
onClick={() => router.push("/admin/userMng/rolesList")}
className="h-10 w-10"
>
<ArrowLeft className="h-5 w-5" />
</Button>
<div className="flex-1">

13
frontend/app/(main)/admin/userMng/rolesList/page.tsx
View File

@ -155,11 +155,13 @@ export default function RolesPage() {
// 관리자가 아니면 접근 제한
if (!isAdmin) {
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">권한 그룹 관리</h1>
<p className="text-sm text-muted-foreground">회사 내 권한 그룹을 생성하고 멤버를 관리합니다 (회사 관리자 이상)</p>
<p className="text-muted-foreground text-sm">
회사 내 권한 그룹을 생성하고 멤버를 관리합니다 (회사 관리자 이상)
</p>
</div>
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-6 shadow-sm">
@ -180,12 +182,14 @@ export default function RolesPage() {
}
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">권한 그룹 관리</h1>
<p className="text-sm text-muted-foreground">회사 내 권한 그룹을 생성하고 멤버를 관리합니다 (회사 관리자 이상)</p>
<p className="text-muted-foreground text-sm">
회사 내 권한 그룹을 생성하고 멤버를 관리합니다 (회사 관리자 이상)
</p>
</div>
{/* 에러 메시지 */}
@ -361,4 +365,3 @@ export default function RolesPage() {
</div>
);
}

4
frontend/app/(main)/admin/userMng/userMngList/page.tsx
View File

@ -109,12 +109,12 @@ export default function UserMngPage() {
};
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">사용자 관리</h1>
<p className="text-sm text-muted-foreground">시스템 사용자 계정 및 권한을 관리합니다</p>
<p className="text-muted-foreground text-sm">시스템 사용자 계정 및 권한을 관리합니다</p>
</div>
{/* 툴바 - 검색, 필터, 등록 버튼 */}

19
frontend/app/(main)/dashboard/[dashboardId]/page.tsx
View File

@ -78,11 +78,11 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
// 로딩 상태
if (isLoading) {
return (
<div className="flex h-screen items-center justify-center bg-background">
<div className="bg-background flex h-screen items-center justify-center">
<div className="text-center">
<div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-ring border-t-transparent" />
<div className="text-lg font-medium text-foreground">대시보드 로딩 중...</div>
<div className="mt-1 text-sm text-muted-foreground">잠시만 기다려주세요</div>
<div className="border-ring mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" />
<div className="text-foreground text-lg font-medium">대시보드 로딩 중...</div>
<div className="text-muted-foreground mt-1 text-sm">잠시만 기다려주세요</div>
</div>
</div>
);
@ -91,12 +91,15 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
// 에러 상태
if (error || !dashboard) {
return (
<div className="flex h-screen items-center justify-center bg-background">
<div className="bg-background flex h-screen items-center justify-center">
<div className="text-center">
<div className="mb-4 text-6xl">😞</div>
<div className="mb-2 text-xl font-medium text-foreground">{error || "대시보드를 찾을 수 없습니다"}</div>
<div className="mb-4 text-sm text-muted-foreground">대시보드 ID: {resolvedParams.dashboardId}</div>
<button onClick={loadDashboard} className="rounded-lg bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90">
<div className="text-foreground mb-2 text-xl font-medium">{error || "대시보드를 찾을 수 없습니다"}</div>
<div className="text-muted-foreground mb-4 text-sm">대시보드 ID: {resolvedParams.dashboardId}</div>
<button
onClick={loadDashboard}
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-4 py-2"
>
다시 시도
</button>
</div>

58
frontend/app/(main)/dashboard/page.tsx
View File

@ -119,19 +119,19 @@ export default function DashboardListPage() {
);
return (
<div className="min-h-screen bg-background">
<div className="bg-background min-h-screen">
{/* 헤더 */}
<div className="border-b border-border bg-card">
<div className="border-border bg-card border-b">
<div className="mx-auto max-w-7xl px-6 py-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-foreground">📊 대시보드</h1>
<p className="mt-1 text-muted-foreground">데이터를 시각화하고 인사이트를 얻어보세요</p>
<h1 className="text-foreground text-3xl font-bold">📊 대시보드</h1>
<p className="text-muted-foreground mt-1">데이터를 시각화하고 인사이트를 얻어보세요</p>
</div>
<Link
href="/admin/screenMng/dashboardList"
className="rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground hover:bg-primary/90"
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-6 py-3 font-medium"
>
➕ 새 대시보드 만들기
</Link>
@ -145,9 +145,9 @@ export default function DashboardListPage() {
placeholder="대시보드 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full rounded-lg border border-input bg-background py-2 pr-4 pl-10 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
className="border-input bg-background text-foreground focus-visible:ring-ring w-full rounded-lg border py-2 pr-4 pl-10 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
/>
<div className="absolute top-2.5 left-3 text-muted-foreground">🔍</div>
<div className="text-muted-foreground absolute top-2.5 left-3">🔍</div>
</div>
</div>
</div>
@ -159,15 +159,15 @@ export default function DashboardListPage() {
// 로딩 상태
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="rounded-lg border border-border bg-card p-6 shadow-sm">
<div key={i} className="border-border bg-card rounded-lg border p-6 shadow-sm">
<div className="animate-pulse">
<div className="mb-3 h-4 w-3/4 rounded bg-muted"></div>
<div className="mb-2 h-3 w-full rounded bg-muted"></div>
<div className="mb-4 h-3 w-2/3 rounded bg-muted"></div>
<div className="mb-4 h-32 rounded bg-muted"></div>
<div className="bg-muted mb-3 h-4 w-3/4 rounded"></div>
<div className="bg-muted mb-2 h-3 w-full rounded"></div>
<div className="bg-muted mb-4 h-3 w-2/3 rounded"></div>
<div className="bg-muted mb-4 h-32 rounded"></div>
<div className="flex justify-between">
<div className="h-3 w-1/4 rounded bg-muted"></div>
<div className="h-3 w-1/4 rounded bg-muted"></div>
<div className="bg-muted h-3 w-1/4 rounded"></div>
<div className="bg-muted h-3 w-1/4 rounded"></div>
</div>
</div>
</div>
@ -177,16 +177,16 @@ export default function DashboardListPage() {
// 빈 상태
<div className="py-12 text-center">
<div className="mb-4 text-6xl">📊</div>
<h3 className="mb-2 text-xl font-medium text-foreground">
<h3 className="text-foreground mb-2 text-xl font-medium">
{searchTerm ? "검색 결과가 없습니다" : "아직 대시보드가 없습니다"}
</h3>
<p className="mb-6 text-muted-foreground">
<p className="text-muted-foreground mb-6">
{searchTerm ? "다른 검색어로 시도해보세요" : "첫 번째 대시보드를 만들어보세요"}
</p>
{!searchTerm && (
<Link
href="/admin/screenMng/dashboardList"
className="inline-flex items-center rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground hover:bg-primary/90"
className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center rounded-lg px-6 py-3 font-medium"
>
➕ 대시보드 만들기
</Link>
@ -214,30 +214,32 @@ interface DashboardCardProps {
*/
function DashboardCard({ dashboard }: DashboardCardProps) {
return (
<div className="rounded-lg border border-border bg-card shadow-sm transition-shadow hover:shadow-md">
<div className="border-border bg-card rounded-lg border shadow-sm transition-shadow hover:shadow-md">
{/* 썸네일 영역 */}
<div className="flex h-48 items-center justify-center rounded-t-lg bg-gradient-to-br from-primary/10 to-primary/20">
<div className="from-primary/10 to-primary/20 flex h-48 items-center justify-center rounded-t-lg bg-gradient-to-br">
<div className="text-center">
<div className="mb-2 text-4xl">📊</div>
<div className="text-sm text-muted-foreground">{dashboard.elementsCount}개 요소</div>
<div className="text-muted-foreground text-sm">{dashboard.elementsCount}개 요소</div>
</div>
</div>
{/* 카드 내용 */}
<div className="p-6">
<div className="mb-3 flex items-start justify-between">
<h3 className="line-clamp-1 text-lg font-semibold text-foreground">{dashboard.title}</h3>
<h3 className="text-foreground line-clamp-1 text-lg font-semibold">{dashboard.title}</h3>
{dashboard.isPublic ? (
<span className="rounded-full bg-success/10 px-2 py-1 text-xs text-success">공개</span>
<span className="bg-success/10 text-success rounded-full px-2 py-1 text-xs">공개</span>
) : (
<span className="rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground">비공개</span>
<span className="bg-muted text-muted-foreground rounded-full px-2 py-1 text-xs">비공개</span>
)}
</div>
{dashboard.description && <p className="mb-4 line-clamp-2 text-sm text-muted-foreground">{dashboard.description}</p>}
{dashboard.description && (
<p className="text-muted-foreground mb-4 line-clamp-2 text-sm">{dashboard.description}</p>
)}
{/* 메타 정보 */}
<div className="mb-4 text-xs text-muted-foreground">
<div className="text-muted-foreground mb-4 text-xs">
<div>생성: {new Date(dashboard.createdAt).toLocaleDateString()}</div>
<div>수정: {new Date(dashboard.updatedAt).toLocaleDateString()}</div>
</div>
@ -246,13 +248,13 @@ function DashboardCard({ dashboard }: DashboardCardProps) {
<div className="flex gap-2">
<Link
href={`/dashboard/${dashboard.id}`}
className="flex-1 rounded-lg bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground hover:bg-primary/90"
className="bg-primary text-primary-foreground hover:bg-primary/90 flex-1 rounded-lg px-4 py-2 text-center text-sm font-medium"
>
보기
</Link>
<Link
href={`/admin/screenMng/dashboardList?load=${dashboard.id}`}
className="rounded-lg border border-input bg-background px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
className="border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground rounded-lg border px-4 py-2 text-sm"
>
편집
</Link>
@ -261,7 +263,7 @@ function DashboardCard({ dashboard }: DashboardCardProps) {
// 복사 기능 구현
console.log("Dashboard copy:", dashboard.id);
}}
className="rounded-lg border border-input bg-background px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
className="border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground rounded-lg border px-4 py-2 text-sm"
title="복사"
>
📋

10
frontend/app/(main)/multilang/page.tsx
View File

@ -219,7 +219,7 @@ export default function MultiLangPage() {
const filteredLangKeys = getFilteredLangKeys();
return (
<div className="w-full max-w-none px-4 py-8 space-y-8">
<div className="w-full max-w-none space-y-8 px-4 py-8">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold">다국어 관리</h1>
<Button>새 키 추가</Button>
@ -318,8 +318,8 @@ export default function MultiLangPage() {
<div>
<Label htmlFor="menu">메뉴</Label>
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
<Select
value={selectedMenu || "__all__"}
<Select
value={selectedMenu || "__all__"}
onValueChange={(value) => setSelectedMenu(value === "__all__" ? "" : value)}
>
<SelectTrigger>
@ -339,8 +339,8 @@ export default function MultiLangPage() {
<div>
<Label htmlFor="keyType">키 타입</Label>
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
<Select
value={selectedKeyType || "__all__"}
<Select
value={selectedKeyType || "__all__"}
onValueChange={(value) => setSelectedKeyType(value === "__all__" ? "" : value)}
>
<SelectTrigger>

8
frontend/app/(main)/page.tsx
View File

@ -2,15 +2,15 @@ export default function MainHomePage() {
return (
<div className="space-y-6 p-4">
{/* 대시보드 컨텐츠 */}
<div className="rounded-lg border bg-background p-6 shadow-sm">
<div className="bg-background rounded-lg border p-6 shadow-sm">
<h3 className="mb-4 text-lg font-semibold">WACE 솔루션에 오신 것을 환영합니다!</h3>
<p className="mb-6 text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
<p className="text-muted-foreground mb-6">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
<div className="flex gap-2">
<span className="inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success ring-1 ring-success/10 ring-inset">
<span className="bg-success/10 text-success ring-success/10 inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset">
Next.js
</span>
<span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary ring-1 ring-primary/10 ring-inset">
<span className="bg-primary/10 text-primary ring-primary/10 inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset">
Shadcn/ui
</span>
</div>

115
frontend/app/(main)/screens/[screenId]/page.tsx
View File

@ -32,7 +32,13 @@ import { useScheduleGenerator, ScheduleConfirmDialog } from "@/lib/v2-core/servi
function ScreenViewPage() {
// 스케줄 자동 생성 서비스 활성화
const { showConfirmDialog, previewResult, handleConfirm, closeDialog, isLoading: scheduleLoading } = useScheduleGenerator();
const {
showConfirmDialog,
previewResult,
handleConfirm,
closeDialog,
isLoading: scheduleLoading,
} = useScheduleGenerator();
const params = useParams();
const searchParams = useSearchParams();
const router = useRouter();
@ -290,19 +296,25 @@ function ScreenViewPage() {
isVisible: false,
isLocked: false,
// Zone 기반 조건 (Zone에서 트리거 정보를 가져옴)
condition: zone ? {
targetComponentId: zone.trigger_component_id || "",
operator: (zone.trigger_operator as "eq" | "neq" | "in") || "eq",
value: conditionValue,
} : condConfig.targetComponentId ? {
targetComponentId: condConfig.targetComponentId,
operator: condConfig.operator || "eq",
value: condConfig.value,
} : undefined,
condition: zone
? {
targetComponentId: zone.trigger_component_id || "",
operator: (zone.trigger_operator as "eq" | "neq" | "in") || "eq",
value: conditionValue,
}
: condConfig.targetComponentId
? {
targetComponentId: condConfig.targetComponentId,
operator: condConfig.operator || "eq",
value: condConfig.value,
}
: undefined,
// Zone 기반: displayRegion은 Zone에서 가져옴
zoneId: zoneId || undefined,
conditionValue: conditionValue || undefined,
displayRegion: zone ? { x: zone.x, y: zone.y, width: zone.width, height: zone.height } : condConfig.displayRegion || undefined,
displayRegion: zone
? { x: zone.x, y: zone.y, width: zone.width, height: zone.height }
: condConfig.displayRegion || undefined,
components: layerComponents,
};
@ -312,20 +324,33 @@ function ScreenViewPage() {
}
}
console.log("🔄 조건부 레이어 로드 완료:", layerDefinitions.length, "개", layerDefinitions.map(l => ({
id: l.id, name: l.name, zoneId: l.zoneId, conditionValue: l.conditionValue,
componentCount: l.components.length,
condition: l.condition ? {
targetComponentId: l.condition.targetComponentId,
operator: l.condition.operator,
value: l.condition.value,
} : "없음",
})));
console.log("🗺️ Zone 정보:", loadedZones.map(z => ({
zone_id: z.zone_id,
trigger_component_id: z.trigger_component_id,
trigger_operator: z.trigger_operator,
})));
console.log(
"🔄 조건부 레이어 로드 완료:",
layerDefinitions.length,
"개",
layerDefinitions.map((l) => ({
id: l.id,
name: l.name,
zoneId: l.zoneId,
conditionValue: l.conditionValue,
componentCount: l.components.length,
condition: l.condition
? {
targetComponentId: l.condition.targetComponentId,
operator: l.condition.operator,
value: l.condition.value,
}
: "없음",
})),
);
console.log(
"🗺️ Zone 정보:",
loadedZones.map((z) => ({
zone_id: z.zone_id,
trigger_component_id: z.trigger_component_id,
trigger_operator: z.trigger_operator,
})),
);
setConditionalLayers(layerDefinitions);
} catch (error) {
console.error("레이어/Zone 로드 실패:", error);
@ -371,10 +396,13 @@ function ScreenViewPage() {
break;
case "in":
if (Array.isArray(value)) {
isMatch = value.some(v => String(v) === String(targetValue ?? ""));
isMatch = value.some((v) => String(v) === String(targetValue ?? ""));
} else if (typeof value === "string" && value.includes(",")) {
// 쉼표로 구분된 문자열도 지원
isMatch = value.split(",").map(v => v.trim()).includes(String(targetValue ?? ""));
isMatch = value
.split(",")
.map((v) => v.trim())
.includes(String(targetValue ?? ""));
}
break;
}
@ -457,10 +485,8 @@ function ScreenViewPage() {
// 테이블 위젯이 없는 경우에만 자동 로드 (테이블이 있으면 행 선택으로 데이터 로드)
const hasTableWidget = layout.components.some(
(comp: any) =>
comp.componentType === "table-list" ||
comp.componentType === "v2-table-list" ||
comp.widgetType === "table"
(comp: any) =>
comp.componentType === "table-list" || comp.componentType === "v2-table-list" || comp.widgetType === "table",
);
if (hasTableWidget) {
@ -470,13 +496,14 @@ function ScreenViewPage() {
// 인풋 컴포넌트들 중 메인 테이블의 컬럼을 사용하는 것들 찾기
const inputComponents = layout.components.filter((comp: any) => {
const compType = comp.componentType || comp.widgetType;
const isInputType = compType?.includes("input") ||
compType?.includes("select") ||
compType?.includes("textarea") ||
compType?.includes("v2-input") ||
compType?.includes("v2-select") ||
compType?.includes("v2-media") ||
compType?.includes("file-upload"); // 🆕 레거시 파일 업로드 포함
const isInputType =
compType?.includes("input") ||
compType?.includes("select") ||
compType?.includes("textarea") ||
compType?.includes("v2-input") ||
compType?.includes("v2-select") ||
compType?.includes("v2-media") ||
compType?.includes("file-upload"); // 🆕 레거시 파일 업로드 포함
const hasColumnName = !!(comp as any).columnName;
return isInputType && hasColumnName;
});
@ -488,18 +515,18 @@ function ScreenViewPage() {
// 메인 테이블에서 현재 회사의 데이터 조회
try {
const { tableTypeApi } = await import("@/lib/api/screen");
// company_code로 필터링하여 단일 레코드 조회
const result = await tableTypeApi.getTableRecord(
mainTableName,
"company_code",
companyCode,
"*" // 모든 컬럼
"*", // 모든 컬럼
);
if (result && result.record) {
console.log("📦 메인 테이블 데이터 자동 로드:", mainTableName, result.record);
// 각 인풋 컴포넌트에 해당하는 데이터 채우기
const newFormData: Record<string, any> = {};
inputComponents.forEach((comp: any) => {
@ -878,7 +905,7 @@ function ScreenViewPage() {
if (component.position.y >= zoneBottom) {
// Zone에 매칭되는 활성 레이어가 있는지 확인
const hasActiveLayer = conditionalLayers.some(
l => l.zoneId === zone.zone_id && activeLayerIds.includes(l.id)
(l) => l.zoneId === zone.zone_id && activeLayerIds.includes(l.id),
);
if (!hasActiveLayer) {
// Zone에 활성 레이어 없음: Zone 높이만큼 위로 당김 (빈 공간 제거)
@ -1214,8 +1241,8 @@ function ScreenViewPage() {
if (!isActive || !layer.components || layer.components.length === 0) return null;
// Zone 기반: zoneId로 Zone 찾아서 위치/크기 결정
const zone = layer.zoneId ? zones.find(z => z.zone_id === layer.zoneId) : null;
const region = zone
const zone = layer.zoneId ? zones.find((z) => z.zone_id === layer.zoneId) : null;
const region = zone
? { x: zone.x, y: zone.y, width: zone.width, height: zone.height }
: layer.displayRegion;

20
frontend/app/(main)/test-flow/page.tsx
View File

@ -38,30 +38,30 @@ export default function TestFlowPage() {
};
return (
<div className="min-h-screen bg-muted p-8">
<div className="bg-muted min-h-screen p-8">
<div className="mx-auto max-w-7xl space-y-8">
{/* 헤더 */}
<div>
<h1 className="text-3xl font-bold text-foreground">플로우 위젯 테스트</h1>
<p className="mt-2 text-muted-foreground">두 가지 플로우를 테스트할 수 있습니다</p>
<h1 className="text-foreground text-3xl font-bold">플로우 위젯 테스트</h1>
<p className="text-muted-foreground mt-2">두 가지 플로우를 테스트할 수 있습니다</p>
</div>
{/* 문서 승인 플로우 */}
<div className="rounded-lg bg-background p-6 shadow-lg">
<h2 className="mb-4 text-xl font-semibold text-foreground">문서 승인 플로우 (4단계)</h2>
<div className="bg-background rounded-lg p-6 shadow-lg">
<h2 className="text-foreground mb-4 text-xl font-semibold">문서 승인 플로우 (4단계)</h2>
<FlowWidget component={documentFlow} />
</div>
{/* 작업 요청 워크플로우 */}
<div className="rounded-lg bg-background p-6 shadow-lg">
<h2 className="mb-4 text-xl font-semibold text-foreground">작업 요청 워크플로우 (6단계)</h2>
<div className="bg-background rounded-lg p-6 shadow-lg">
<h2 className="text-foreground mb-4 text-xl font-semibold">작업 요청 워크플로우 (6단계)</h2>
<FlowWidget component={workRequestFlow} />
</div>
{/* 사용 안내 */}
<div className="mt-8 rounded-lg border border-primary/20 bg-primary/5 p-6">
<h3 className="mb-2 text-lg font-semibold text-primary">사용 방법</h3>
<ul className="list-inside list-disc space-y-1 text-primary/80">
<div className="border-primary/20 bg-primary/5 mt-8 rounded-lg border p-6">
<h3 className="text-primary mb-2 text-lg font-semibold">사용 방법</h3>
<ul className="text-primary/80 list-inside list-disc space-y-1">
<li>각 플로우 단계를 클릭하면 해당 단계의 데이터 목록이 표시됩니다</li>
<li>데이터 행을 체크하고 "다음 단계로 이동" 버튼을 클릭하면 데이터가 이동됩니다</li>
<li>이동 후 자동으로 데이터 목록이 새로고침됩니다</li>

75
frontend/app/(pop)/pop/screens/[screenId]/page.tsx
View File

@ -8,7 +8,6 @@ import { screenApi } from "@/lib/api/screen";
import { ScreenDefinition } from "@/types/screen";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
import { useAuth } from "@/hooks/useAuth";
import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
@ -28,10 +27,7 @@ import {
// POP 컴포넌트 자동 등록 (레지스트리 초기화 - PopRenderer보다 먼저 import)
import "@/lib/registry/pop-components";
import PopViewerWithModals from "@/components/pop/viewer/PopViewerWithModals";
import {
useResponsiveModeWithOverride,
type DeviceType,
} from "@/hooks/useDeviceOrientation";
import { useResponsiveModeWithOverride, type DeviceType } from "@/hooks/useDeviceOrientation";
// 디바이스별 크기 (너비만, 높이는 콘텐츠 기반)
const DEVICE_SIZES: Record<DeviceType, Record<"landscape" | "portrait", { width: number; label: string }>> = {
@ -69,7 +65,7 @@ function PopScreenViewPage() {
// 프리뷰 모드에서는 수동 전환 가능
const { mode, setDevice, setOrientation, isAutoDetect } = useResponsiveModeWithOverride(
isPreviewMode ? "tablet" : undefined,
isPreviewMode ? true : undefined
isPreviewMode ? true : undefined,
);
// 현재 모드 정보
@ -85,19 +81,17 @@ function PopScreenViewPage() {
// 뷰포트 너비 (클라이언트 사이드에서만 계산, 최대 1366px)
const [viewportWidth, setViewportWidth] = useState(1024); // 기본값: 태블릿 가로
// 모드 결정:
// 모드 결정:
// - 프리뷰 모드: 수동 선택한 device/orientation 사용
// - 일반 모드: 화면 너비 기준으로 자동 결정 (GRID_BREAKPOINTS와 일치)
const currentModeKey = isPreviewMode
? getModeKey(deviceType, isLandscape)
: detectGridMode(viewportWidth);
const currentModeKey = isPreviewMode ? getModeKey(deviceType, isLandscape) : detectGridMode(viewportWidth);
useEffect(() => {
const updateViewportWidth = () => {
setViewportWidth(Math.min(window.innerWidth, 1366));
};
updateViewportWidth();
window.addEventListener("resize", updateViewportWidth);
return () => window.removeEventListener("resize", updateViewportWidth);
@ -136,7 +130,7 @@ function PopScreenViewPage() {
} catch (error) {
console.error("[POP] 화면 로드 실패:", error);
setError("화면을 불러오는데 실패했습니다.");
showErrorToast("POP 화면을 불러오는 데 실패했습니다", error, { guidance: "화면 설정을 확인하거나 잠시 후 다시 시도해 주세요." });
toast.error("화면을 불러오는데 실패했습니다.");
} finally {
setLoading(false);
}
@ -186,7 +180,7 @@ function PopScreenViewPage() {
if (error || !screen) {
return (
<div className="flex h-screen w-full items-center justify-center bg-gray-100">
<div className="text-center max-w-md p-6">
<div className="max-w-md p-6 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
<span className="text-2xl">!</span>
</div>
@ -205,24 +199,22 @@ function PopScreenViewPage() {
<ScreenPreviewProvider isPreviewMode={isPreviewMode}>
<ActiveTabProvider>
<TableOptionsProvider>
<div className="h-screen bg-gray-100 flex flex-col">
<div className="flex h-screen flex-col bg-gray-100">
{/* 상단 툴바 (프리뷰 모드에서만) */}
{isPreviewMode && (
<div className="sticky top-0 z-50 bg-white border-b shadow-sm">
<div className="sticky top-0 z-50 border-b bg-white shadow-sm">
<div className="flex items-center justify-between px-4 py-2">
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={() => window.close()}>
<ArrowLeft className="h-4 w-4 mr-1" />
<ArrowLeft className="mr-1 h-4 w-4" />
닫기
</Button>
<span className="text-sm font-medium">{screen.screenName}</span>
<span className="text-xs text-gray-400">
({currentModeKey.replace("_", " ")})
</span>
<span className="text-xs text-gray-400">({currentModeKey.replace("_", " ")})</span>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
<div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
<Button
variant={deviceType === "mobile" ? "default" : "ghost"}
size="sm"
@ -243,7 +235,7 @@ function PopScreenViewPage() {
</Button>
</div>
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
<div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
<Button
variant={isLandscape ? "default" : "ghost"}
size="sm"
@ -286,28 +278,29 @@ function PopScreenViewPage() {
)}
{/* POP 화면 컨텐츠 */}
<div className={`flex-1 flex flex-col overflow-auto ${isPreviewMode ? "py-4 items-center" : "bg-white"}`}>
<div className={`flex flex-1 flex-col overflow-auto ${isPreviewMode ? "items-center py-4" : ""}`}>
{/* 현재 모드 표시 (일반 모드) */}
{!isPreviewMode && (
<div className="absolute top-2 right-2 z-10 bg-black/50 text-white text-xs px-2 py-1 rounded">
<div className="absolute top-2 right-2 z-10 rounded bg-black/50 px-2 py-1 text-xs text-white">
{currentModeKey.replace("_", " ")}
</div>
)}
<div
className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full min-h-full"}`}
style={isPreviewMode ? {
width: currentDevice.width,
maxHeight: "80vh",
flexShrink: 0,
} : undefined}
className={`bg-white transition-all duration-300 ${isPreviewMode ? "overflow-auto rounded-3xl border-8 border-gray-800 shadow-2xl" : "min-h-full w-full"}`}
style={
isPreviewMode
? {
width: currentDevice.width,
maxHeight: "80vh",
flexShrink: 0,
}
: undefined
}
>
{/* v5 그리드 렌더러 */}
{hasComponents ? (
<div
className="mx-auto min-h-full"
style={{ maxWidth: 1366 }}
>
<div className="mx-auto min-h-full" style={{ maxWidth: 1366 }}>
{(() => {
// Gap 프리셋 계산
const currentGapPreset = layout.settings.gapPreset || "medium";
@ -315,7 +308,7 @@ function PopScreenViewPage() {
const breakpoint = GRID_BREAKPOINTS[currentModeKey];
const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
return (
<PopViewerWithModals
layout={layout}
@ -332,14 +325,12 @@ function PopScreenViewPage() {
</div>
) : (
// 빈 화면
<div className="flex flex-col items-center justify-center min-h-[400px] p-8 text-center">
<div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
<div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
<Smartphone className="h-8 w-8 text-gray-400" />
</div>
<h3 className="text-lg font-semibold text-gray-800 mb-2">
화면이 비어있습니다
</h3>
<p className="text-sm text-gray-500 max-w-xs">
<h3 className="mb-2 text-lg font-semibold text-gray-800">화면이 비어있습니다</h3>
<p className="max-w-xs text-sm text-gray-500">
POP 화면 디자이너에서 컴포넌트를 추가하여 화면을 구성하세요.
</p>
</div>

1
frontend/app/(pop)/pop/work/page.tsx
View File

@ -5,4 +5,3 @@ import { PopApp } from "@/components/pop";
export default function PopWorkPage() {
return <PopApp />;
}

1
frontend/app/(pop)/work/page.tsx
View File

@ -5,4 +5,3 @@ import { PopApp } from "@/components/pop";
export default function PopWorkPage() {
return <PopApp />;
}

24
frontend/app/globals.css
View File

@ -424,4 +424,28 @@ select {
}
}
/* ===== 리포트 관리 페이지 반응형 축소 ===== */
.report-page-content {
zoom: 1;
transition: zoom 0.15s ease;
}
@media (max-width: 1399px) {
.report-page-content {
zoom: 0.9;
}
}
@media (max-width: 1099px) {
.report-page-content {
zoom: 0.75;
}
}
@media (max-width: 799px) {
.report-page-content {
zoom: 0.6;
}
}
/* ===== End of Global Styles ===== */

19
frontend/app/test-autocomplete-mapping/page.tsx
View File

@ -13,13 +13,11 @@ export default function TestAutocompleteMapping() {
const [phone, setPhone] = useState("");
return (
<div className="container mx-auto py-8 space-y-6">
<div className="container mx-auto space-y-6 py-8">
<Card>
<CardHeader>
<CardTitle>AutocompleteSearchInput 필드 자동 매핑 테스트</CardTitle>
<CardDescription>
거래처를 선택하면 아래 입력 필드들이 자동으로 채워집니다
</CardDescription>
<CardDescription>거래처를 선택하면 아래 입력 필드들이 자동으로 채워집니다</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
{/* 검색 컴포넌트 */}
@ -61,9 +59,7 @@ export default function TestAutocompleteMapping() {
{/* 구분선 */}
<div className="border-t pt-6">
<h3 className="text-sm font-semibold mb-4">
자동으로 채워지는 필드들
</h3>
<h3 className="mb-4 text-sm font-semibold">자동으로 채워지는 필드들</h3>
<div className="space-y-4">
{/* 거래처명 */}
<div className="space-y-2">
@ -102,8 +98,8 @@ export default function TestAutocompleteMapping() {
{/* 상태 표시 */}
<div className="border-t pt-6">
<h3 className="text-sm font-semibold mb-2">현재 상태</h3>
<div className="p-4 bg-muted rounded-lg">
<h3 className="mb-2 text-sm font-semibold">현재 상태</h3>
<div className="bg-muted rounded-lg p-4">
<pre className="text-xs">
{JSON.stringify(
{
@ -113,7 +109,7 @@ export default function TestAutocompleteMapping() {
phone,
},
null,
2
2,
)}
</pre>
</div>
@ -127,7 +123,7 @@ export default function TestAutocompleteMapping() {
<CardTitle className="text-base">사용 방법</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm">
<ol className="list-decimal list-inside space-y-2">
<ol className="list-inside list-decimal space-y-2">
<li>위의 검색 필드에 거래처명이나 코드를 입력하세요</li>
<li>드롭다운에서 원하는 거래처를 선택하세요</li>
<li>아래 입력 필드들이 자동으로 채워지는 것을 확인하세요</li>
@ -138,4 +134,3 @@ export default function TestAutocompleteMapping() {
</div>
);
}

93
frontend/components/GlobalFileViewer.tsx
View File

@ -56,22 +56,22 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
// 파일 아이콘 가져오기
const getFileIcon = (fileName: string, size: number = 16) => {
const extension = fileName.split('.').pop()?.toLowerCase() || '';
const extension = fileName.split(".").pop()?.toLowerCase() || "";
const iconProps = { size, className: "text-muted-foreground" };
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(extension)) {
if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(extension)) {
return <Image {...iconProps} className="text-primary" />;
}
if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'].includes(extension)) {
if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(extension)) {
return <Video {...iconProps} className="text-purple-600" />;
}
if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
if (["mp3", "wav", "flac", "aac", "ogg"].includes(extension)) {
return <Music {...iconProps} className="text-green-600" />;
}
if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
if (["zip", "rar", "7z", "tar", "gz"].includes(extension)) {
return <Archive {...iconProps} className="text-yellow-600" />;
}
if (['txt', 'md', 'doc', 'docx', 'pdf', 'rtf'].includes(extension)) {
if (["txt", "md", "doc", "docx", "pdf", "rtf"].includes(extension)) {
return <FileText {...iconProps} className="text-destructive" />;
}
return <File {...iconProps} />;
@ -81,13 +81,13 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
const refreshFiles = () => {
const files = GlobalFileManager.getAllAccessibleFiles();
const info = GlobalFileManager.getRegistryInfo();
setAllFiles(files);
setRegistryInfo(info);
// 탭에 따른 필터링
filterFilesByTab(files, selectedTab, searchQuery);
console.log("🔄 전역 파일 목록 새로고침:", files.length + "개");
};
@ -97,28 +97,27 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
// 탭별 필터링
if (tab === "images") {
filtered = files.filter(file => {
const ext = file.realFileName?.split('.').pop()?.toLowerCase() || '';
return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext);
filtered = files.filter((file) => {
const ext = file.realFileName?.split(".").pop()?.toLowerCase() || "";
return ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext);
});
} else if (tab === "documents") {
filtered = files.filter(file => {
const ext = file.realFileName?.split('.').pop()?.toLowerCase() || '';
return ['txt', 'md', 'doc', 'docx', 'pdf', 'rtf', 'hwp', 'hwpx'].includes(ext);
filtered = files.filter((file) => {
const ext = file.realFileName?.split(".").pop()?.toLowerCase() || "";
return ["txt", "md", "doc", "docx", "pdf", "rtf", "hwp", "hwpx"].includes(ext);
});
} else if (tab === "recent") {
filtered = files
.sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime())
.slice(0, 20);
filtered = files.sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime()).slice(0, 20);
}
// 검색 필터링
if (query.trim()) {
const lowerQuery = query.toLowerCase();
filtered = filtered.filter(file =>
file.realFileName?.toLowerCase().includes(lowerQuery) ||
file.savedFileName?.toLowerCase().includes(lowerQuery) ||
file.uploadPage?.toLowerCase().includes(lowerQuery)
filtered = filtered.filter(
(file) =>
file.realFileName?.toLowerCase().includes(lowerQuery) ||
file.savedFileName?.toLowerCase().includes(lowerQuery) ||
file.uploadPage?.toLowerCase().includes(lowerQuery),
);
}
@ -165,24 +164,19 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
<div className={`w-full ${className}`}>
<Card>
<CardHeader>
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<CardTitle className="flex items-center gap-2">
<File className="w-5 h-5" />
<File className="h-5 w-5" />
전역 파일 저장소
</CardTitle>
{showControls && (
<div className="flex items-center gap-2">
<Badge variant="secondary" className="flex items-center gap-1">
<Info className="w-3 h-3" />
<Info className="h-3 w-3" />
{registryInfo.accessibleFiles}개 파일
</Badge>
<Button
variant="outline"
size="sm"
onClick={refreshFiles}
className="flex items-center gap-1"
>
<RefreshCw className="w-3 h-3" />
<Button variant="outline" size="sm" onClick={refreshFiles} className="flex items-center gap-1">
<RefreshCw className="h-3 w-3" />
새로고침
</Button>
</div>
@ -192,7 +186,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
{showControls && (
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
<Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
<Input
placeholder="파일명으로 검색..."
value={searchQuery}
@ -214,37 +208,32 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
</TabsList>
<TabsContent value={selectedTab} className="mt-4">
<div
className="space-y-2 overflow-y-auto"
style={{ maxHeight }}
>
<div className="space-y-2 overflow-y-auto" style={{ maxHeight }}>
{filteredFiles.length === 0 ? (
<div className="text-center py-8 text-gray-500">
<div className="py-8 text-center text-gray-500">
{searchQuery ? "검색 결과가 없습니다." : "저장된 파일이 없습니다."}
</div>
) : (
filteredFiles.map((file) => (
<Card key={file.objid} className="p-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className="flex min-w-0 flex-1 items-center gap-3">
{getFileIcon(file.realFileName || file.savedFileName || "", 20)}
<div className="flex-1 min-w-0">
<div className="font-medium truncate">
{file.realFileName || file.savedFileName}
</div>
<div className="text-sm text-gray-500 flex items-center gap-2">
<div className="min-w-0 flex-1">
<div className="truncate font-medium">{file.realFileName || file.savedFileName}</div>
<div className="flex items-center gap-2 text-sm text-gray-500">
<span>{formatFileSize(file.fileSize)}</span>
<div className="flex items-center gap-1">
<Clock className="w-3 h-3" />
<Clock className="h-3 w-3" />
{new Date(file.uploadTime).toLocaleDateString()}
</div>
<div className="flex items-center gap-1">
<MapPin className="w-3 h-3" />
{file.uploadPage.split('/').pop() || 'Unknown'}
<MapPin className="h-3 w-3" />
{file.uploadPage.split("/").pop() || "Unknown"}
</div>
{file.screenId && (
<div className="flex items-center gap-1">
<Monitor className="w-3 h-3" />
<Monitor className="h-3 w-3" />
Screen {file.screenId}
</div>
)}
@ -259,7 +248,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
onClick={() => handleView(file)}
className="flex items-center gap-1"
>
<Eye className="w-3 h-3" />
<Eye className="h-3 w-3" />
</Button>
<Button
variant="ghost"
@ -267,15 +256,15 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
onClick={() => handleDownload(file)}
className="flex items-center gap-1"
>
<Download className="w-3 h-3" />
<Download className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleRemove(file)}
className="flex items-center gap-1 text-destructive hover:text-red-700"
className="text-destructive flex items-center gap-1 hover:text-red-700"
>
<Trash2 className="w-3 h-3" />
<Trash2 className="h-3 w-3" />
</Button>
</div>
</div>

140
frontend/components/admin/AdvancedBatchModal.tsx
View File

@ -1,22 +1,10 @@
import React, { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
@ -199,46 +187,50 @@ export default function AdvancedBatchModal({
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[90vh] overflow-hidden">
<DialogContent className="max-h-[90vh] max-w-[95vw] overflow-hidden sm:max-w-[800px]">
<DialogHeader>
<DialogTitle>고급 배치 생성</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-6 py-2">
{/* 1. 기본 정보 섹션 */}
<div className="space-y-4 border rounded-md p-4 bg-slate-50">
<div className="space-y-4 rounded-md border bg-slate-50 p-4">
<h3 className="text-sm font-semibold text-slate-900">기본 정보</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<Label className="text-xs">배치 타입 *</Label>
<div className="mt-1 p-2 bg-white border rounded text-sm font-medium text-slate-600">
<div className="mt-1 rounded border bg-white p-2 text-sm font-medium text-slate-600">
{formData.job_type === "rest_to_db" ? "🌐 REST API → 💾 DB" : "💾 DB → 🌐 REST API"}
</div>
<p className="text-[10px] text-slate-400 mt-1">
{formData.job_type === "rest_to_db"
<p className="mt-1 text-[10px] text-slate-400">
{formData.job_type === "rest_to_db"
? "REST API에서 데이터를 가져와 데이터베이스에 저장합니다."
: "데이터베이스의 데이터를 REST API로 전송합니다."}
</p>
</div>
<div>
<Label htmlFor="schedule_cron" className="text-xs">실행 스케줄 *</Label>
<div className="flex gap-2 mt-1">
<Input
<Label htmlFor="schedule_cron" className="text-xs">
실행 스케줄 *
</Label>
<div className="mt-1 flex gap-2">
<Input
id="schedule_cron"
value={formData.schedule_cron || ""}
onChange={(e) => setFormData(prev => ({ ...prev, schedule_cron: e.target.value }))}
onChange={(e) => setFormData((prev) => ({ ...prev, schedule_cron: e.target.value }))}
placeholder="예: 0 12 * * *"
className="text-sm"
/>
<Select onValueChange={(val) => setFormData(prev => ({ ...prev, schedule_cron: val }))}>
<Select onValueChange={(val) => setFormData((prev) => ({ ...prev, schedule_cron: val }))}>
<SelectTrigger className="w-[100px]">
<SelectValue placeholder="프리셋" />
</SelectTrigger>
<SelectContent>
{schedulePresets.map(p => (
<SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
{schedulePresets.map((p) => (
<SelectItem key={p.value} value={p.value}>
{p.label}
</SelectItem>
))}
</SelectContent>
</Select>
@ -246,22 +238,26 @@ export default function AdvancedBatchModal({
</div>
<div className="sm:col-span-2">
<Label htmlFor="job_name" className="text-xs">배치명 *</Label>
<Input
<Label htmlFor="job_name" className="text-xs">
배치명 *
</Label>
<Input
id="job_name"
value={formData.job_name || ""}
onChange={(e) => setFormData(prev => ({ ...prev, job_name: e.target.value }))}
onChange={(e) => setFormData((prev) => ({ ...prev, job_name: e.target.value }))}
placeholder="배치명을 입력하세요"
className="mt-1"
/>
</div>
<div className="sm:col-span-2">
<Label htmlFor="description" className="text-xs">설명</Label>
<Textarea
<Label htmlFor="description" className="text-xs">
설명
</Label>
<Textarea
id="description"
value={formData.description || ""}
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
placeholder="배치에 대한 설명을 입력하세요"
className="mt-1 min-h-[60px]"
/>
@ -270,7 +266,7 @@ export default function AdvancedBatchModal({
</div>
{/* 2. REST API 설정 섹션 (Source) */}
<div className="space-y-4 border rounded-md p-4 bg-white">
<div className="space-y-4 rounded-md border bg-white p-4">
<div className="flex items-center gap-2">
<span className="text-lg">🌐</span>
<h3 className="text-sm font-semibold text-slate-900">
@ -278,46 +274,54 @@ export default function AdvancedBatchModal({
</h3>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="sm:col-span-2">
<Label htmlFor="api_url" className="text-xs">API 서버 URL *</Label>
<Input
<Label htmlFor="api_url" className="text-xs">
API 서버 URL *
</Label>
<Input
id="api_url"
value={configData.apiUrl || ""}
onChange={(e) => setConfigData(prev => ({ ...prev, apiUrl: e.target.value }))}
onChange={(e) => setConfigData((prev) => ({ ...prev, apiUrl: e.target.value }))}
placeholder="https://api.example.com"
className="mt-1"
/>
</div>
<div className="sm:col-span-2">
<Label htmlFor="api_key" className="text-xs">API 키 (선택)</Label>
<Input
<Label htmlFor="api_key" className="text-xs">
API 키 (선택)
</Label>
<Input
id="api_key"
type="password"
value={configData.apiKey || ""}
onChange={(e) => setConfigData(prev => ({ ...prev, apiKey: e.target.value }))}
onChange={(e) => setConfigData((prev) => ({ ...prev, apiKey: e.target.value }))}
placeholder="인증에 필요한 API Key가 있다면 입력하세요"
className="mt-1"
/>
</div>
<div>
<Label htmlFor="endpoint" className="text-xs">엔드포인트 *</Label>
<Input
<Label htmlFor="endpoint" className="text-xs">
엔드포인트 *
</Label>
<Input
id="endpoint"
value={configData.endpoint || ""}
onChange={(e) => setConfigData(prev => ({ ...prev, endpoint: e.target.value }))}
onChange={(e) => setConfigData((prev) => ({ ...prev, endpoint: e.target.value }))}
placeholder="/api/token"
className="mt-1"
/>
</div>
<div>
<Label htmlFor="http_method" className="text-xs">HTTP 메서드</Label>
<Select
value={configData.httpMethod || "GET"}
onValueChange={(val) => setConfigData(prev => ({ ...prev, httpMethod: val }))}
<Label htmlFor="http_method" className="text-xs">
HTTP 메서드
</Label>
<Select
value={configData.httpMethod || "GET"}
onValueChange={(val) => setConfigData((prev) => ({ ...prev, httpMethod: val }))}
>
<SelectTrigger className="mt-1">
<SelectValue />
@ -333,16 +337,18 @@ export default function AdvancedBatchModal({
{/* POST/PUT 일 때 Body 입력창 노출 */}
{(configData.httpMethod === "POST" || configData.httpMethod === "PUT") && (
<div className="sm:col-span-2 animate-in fade-in slide-in-from-top-2 duration-200">
<Label htmlFor="api_body" className="text-xs">Request Body (JSON)</Label>
<Textarea
<div className="animate-in fade-in slide-in-from-top-2 duration-200 sm:col-span-2">
<Label htmlFor="api_body" className="text-xs">
Request Body (JSON)
</Label>
<Textarea
id="api_body"
value={configData.apiBody || ""}
onChange={(e) => setConfigData(prev => ({ ...prev, apiBody: e.target.value }))}
onChange={(e) => setConfigData((prev) => ({ ...prev, apiBody: e.target.value }))}
placeholder='{"username": "myuser", "password": "mypassword"}'
className="mt-1 font-mono text-xs min-h-[100px]"
className="mt-1 min-h-[100px] font-mono text-xs"
/>
<p className="text-[10px] text-slate-500 mt-1">
<p className="mt-1 text-[10px] text-slate-500">
* 토큰 발급 요청 시 인증 정보를 JSON 형식으로 입력하세요.
</p>
</div>
@ -351,7 +357,7 @@ export default function AdvancedBatchModal({
</div>
{/* 3. 데이터베이스 설정 섹션 (Target) */}
<div className="space-y-4 border rounded-md p-4 bg-white">
<div className="space-y-4 rounded-md border bg-white p-4">
<div className="flex items-center gap-2">
<span className="text-lg">💾</span>
<h3 className="text-sm font-semibold text-slate-900">
@ -359,14 +365,14 @@ export default function AdvancedBatchModal({
</h3>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<Label className="text-xs">데이터베이스 커넥션 선택</Label>
<Select
<Select
value={configData.targetConnectionId?.toString() || ""}
onValueChange={(val) => {
const connId = parseInt(val);
setConfigData(prev => ({ ...prev, targetConnectionId: connId }));
setConfigData((prev) => ({ ...prev, targetConnectionId: connId }));
loadTables(connId); // 테이블 목록 로드
}}
>
@ -374,7 +380,7 @@ export default function AdvancedBatchModal({
<SelectValue placeholder="커넥션을 선택하세요" />
</SelectTrigger>
<SelectContent>
{connections.map(conn => (
{connections.map((conn) => (
<SelectItem key={conn.id} value={conn.id.toString()}>
{conn.connection_name || conn.name} ({conn.db_type})
</SelectItem>
@ -385,9 +391,9 @@ export default function AdvancedBatchModal({
<div>
<Label className="text-xs">테이블 선택</Label>
<Select
<Select
value={configData.targetTable || ""}
onValueChange={(val) => setConfigData(prev => ({ ...prev, targetTable: val }))}
onValueChange={(val) => setConfigData((prev) => ({ ...prev, targetTable: val }))}
disabled={!configData.targetConnectionId}
>
<SelectTrigger className="mt-1">
@ -395,11 +401,13 @@ export default function AdvancedBatchModal({
</SelectTrigger>
<SelectContent>
{targetTables.length > 0 ? (
targetTables.map(table => (
<SelectItem key={table} value={table}>{table}</SelectItem>
targetTables.map((table) => (
<SelectItem key={table} value={table}>
{table}
</SelectItem>
))
) : (
<div className="p-2 text-xs text-center text-slate-400">테이블 없음</div>
<div className="p-2 text-center text-xs text-slate-400">테이블 없음</div>
)}
</SelectContent>
</Select>
@ -420,5 +428,3 @@ export default function AdvancedBatchModal({
</Dialog>
);
}

28
frontend/components/admin/AuthenticationConfig.tsx
View File

@ -214,9 +214,7 @@ export function AuthenticationConfig({
id="db-value-column"
type="text"
value={authConfig.dbValueColumn || ""}
onChange={(e) =>
updateAuthConfig("dbValueColumn", e.target.value)
}
onChange={(e) => updateAuthConfig("dbValueColumn", e.target.value)}
placeholder="예: access_token"
/>
</div>
@ -227,9 +225,7 @@ export function AuthenticationConfig({
id="db-where-column"
type="text"
value={authConfig.dbWhereColumn || ""}
onChange={(e) =>
updateAuthConfig("dbWhereColumn", e.target.value)
}
onChange={(e) => updateAuthConfig("dbWhereColumn", e.target.value)}
placeholder="예: service_name"
/>
</div>
@ -240,9 +236,7 @@ export function AuthenticationConfig({
id="db-where-value"
type="text"
value={authConfig.dbWhereValue || ""}
onChange={(e) =>
updateAuthConfig("dbWhereValue", e.target.value)
}
onChange={(e) => updateAuthConfig("dbWhereValue", e.target.value)}
placeholder="예: kakao"
/>
</div>
@ -253,31 +247,23 @@ export function AuthenticationConfig({
id="db-header-name"
type="text"
value={authConfig.dbHeaderName || ""}
onChange={(e) =>
updateAuthConfig("dbHeaderName", e.target.value)
}
onChange={(e) => updateAuthConfig("dbHeaderName", e.target.value)}
placeholder="기본값: Authorization"
/>
</div>
<div className="space-y-2">
<Label htmlFor="db-header-template">
헤더 템플릿 (선택, &#123;&#123;value&#125;&#125; 치환)
</Label>
<Label htmlFor="db-header-template">헤더 템플릿 (선택, &#123;&#123;value&#125;&#125; 치환)</Label>
<Input
id="db-header-template"
type="text"
value={authConfig.dbHeaderTemplate || ""}
onChange={(e) =>
updateAuthConfig("dbHeaderTemplate", e.target.value)
}
onChange={(e) => updateAuthConfig("dbHeaderTemplate", e.target.value)}
placeholder='기본값: "Bearer {{value}}"'
/>
</div>
<p className="text-xs text-gray-500">
company_code는 현재 로그인한 사용자의 회사 코드로 자동 필터링됩니다.
</p>
<p className="text-xs text-gray-500">company_code는 현재 로그인한 사용자의 회사 코드로 자동 필터링됩니다.</p>
</div>
)}

87
frontend/components/admin/BatchCard.tsx
View File

@ -4,18 +4,7 @@ import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Play,
Pause,
Edit,
Trash2,
RefreshCw,
Clock,
Database,
Calendar,
Activity,
Settings
} from "lucide-react";
import { Play, Pause, Edit, Trash2, RefreshCw, Clock, Database, Calendar, Activity, Settings } from "lucide-react";
import { BatchConfig } from "@/lib/api/batch";
interface BatchCardProps {
@ -35,28 +24,26 @@ export default function BatchCard({
onToggleStatus,
onEdit,
onDelete,
getMappingSummary
getMappingSummary,
}: BatchCardProps) {
// 상태에 따른 스타일 결정
const isExecuting = executingBatch === batch.id;
const isActive = batch.is_active === 'Y';
const isActive = batch.is_active === "Y";
return (
<Card className="rounded-lg border bg-card shadow-sm transition-colors hover:bg-muted/50">
<Card className="bg-card hover:bg-muted/50 rounded-lg border shadow-sm transition-colors">
<CardContent className="p-4">
{/* 헤더 */}
<div className="mb-4 flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<Settings className="h-4 w-4 text-muted-foreground flex-shrink-0" />
<h3 className="text-base font-semibold truncate">{batch.batch_name}</h3>
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<Settings className="text-muted-foreground h-4 w-4 flex-shrink-0" />
<h3 className="truncate text-base font-semibold">{batch.batch_name}</h3>
</div>
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
{batch.description || '설명 없음'}
</p>
<p className="text-muted-foreground mt-1 line-clamp-2 text-sm">{batch.description || "설명 없음"}</p>
</div>
<Badge variant={isActive ? 'default' : 'secondary'} className="ml-2 flex-shrink-0">
{isExecuting ? '실행 중' : isActive ? '활성' : '비활성'}
<Badge variant={isActive ? "default" : "secondary"} className="ml-2 flex-shrink-0">
{isExecuting ? "실행 중" : isActive ? "활성" : "비활성"}
</Badge>
</div>
@ -64,34 +51,30 @@ export default function BatchCard({
<div className="space-y-2 border-t pt-4">
{/* 스케줄 정보 */}
<div className="flex justify-between text-sm">
<span className="flex items-center gap-2 text-muted-foreground">
<span className="text-muted-foreground flex items-center gap-2">
<Clock className="h-4 w-4" />
스케줄
</span>
<span className="font-medium truncate ml-2">{batch.cron_schedule}</span>
<span className="ml-2 truncate font-medium">{batch.cron_schedule}</span>
</div>
{/* 생성일 정보 */}
<div className="flex justify-between text-sm">
<span className="flex items-center gap-2 text-muted-foreground">
<span className="text-muted-foreground flex items-center gap-2">
<Calendar className="h-4 w-4" />
생성일
</span>
<span className="font-medium">
{new Date(batch.created_date).toLocaleDateString('ko-KR')}
</span>
<span className="font-medium">{new Date(batch.created_date).toLocaleDateString("ko-KR")}</span>
</div>
{/* 매핑 정보 */}
{batch.batch_mappings && batch.batch_mappings.length > 0 && (
<div className="flex justify-between text-sm">
<span className="flex items-center gap-2 text-muted-foreground">
<span className="text-muted-foreground flex items-center gap-2">
<Database className="h-4 w-4" />
매핑
</span>
<span className="font-medium">
{batch.batch_mappings.length}개
</span>
<span className="font-medium">{batch.batch_mappings.length}개</span>
</div>
)}
</div>
@ -99,15 +82,12 @@ export default function BatchCard({
{/* 실행 중 프로그레스 */}
{isExecuting && (
<div className="mt-4 space-y-2 border-t pt-4">
<div className="flex items-center gap-2 text-sm text-primary">
<div className="text-primary flex items-center gap-2 text-sm">
<Activity className="h-4 w-4 animate-pulse" />
<span>실행 중...</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
<div
className="h-full animate-pulse rounded-full bg-primary"
style={{ width: '45%' }}
/>
<div className="bg-secondary h-2 w-full overflow-hidden rounded-full">
<div className="bg-primary h-full animate-pulse rounded-full" style={{ width: "45%" }} />
</div>
</div>
)}
@ -122,14 +102,10 @@ export default function BatchCard({
disabled={isExecuting}
className="h-9 flex-1 gap-2 text-sm"
>
{isExecuting ? (
<RefreshCw className="h-4 w-4 animate-spin" />
) : (
<Play className="h-4 w-4" />
)}
{isExecuting ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
실행
</Button>
{/* 활성화/비활성화 버튼 */}
<Button
variant="outline"
@ -137,25 +113,16 @@ export default function BatchCard({
onClick={() => onToggleStatus(batch.id, batch.is_active)}
className="h-9 flex-1 gap-2 text-sm"
>
{isActive ? (
<Pause className="h-4 w-4" />
) : (
<Play className="h-4 w-4" />
)}
{isActive ? '비활성' : '활성'}
{isActive ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
{isActive ? "비활성" : "활성"}
</Button>
{/* 수정 버튼 */}
<Button
variant="outline"
size="sm"
onClick={() => onEdit(batch.id)}
className="h-9 flex-1 gap-2 text-sm"
>
<Button variant="outline" size="sm" onClick={() => onEdit(batch.id)} className="h-9 flex-1 gap-2 text-sm">
<Edit className="h-4 w-4" />
수정
</Button>
{/* 삭제 버튼 */}
<Button
variant="destructive"

140
frontend/components/admin/BatchJobModal.tsx
View File

@ -1,24 +1,12 @@
"use client";
import React, { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
@ -32,12 +20,7 @@ interface BatchJobModalProps {
job?: BatchJob | null;
}
export default function BatchJobModal({
isOpen,
onClose,
onSave,
job,
}: BatchJobModalProps) {
export default function BatchJobModal({ isOpen, onClose, onSave, job }: BatchJobModalProps) {
const [formData, setFormData] = useState<Partial<BatchJob>>({
job_name: "",
description: "",
@ -59,7 +42,7 @@ export default function BatchJobModal({
loadJobTypes();
loadSchedulePresets();
loadCollectionConfigs();
if (job) {
setFormData({
...job,
@ -114,7 +97,7 @@ export default function BatchJobModal({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.job_name || !formData.job_type) {
toast.error("필수 필드를 모두 입력해주세요.");
return;
@ -133,23 +116,21 @@ export default function BatchJobModal({
onClose();
} catch (error) {
console.error("배치 작업 저장 오류:", error);
toast.error(
error instanceof Error ? error.message : "배치 작업 저장에 실패했습니다."
);
toast.error(error instanceof Error ? error.message : "배치 작업 저장에 실패했습니다.");
} finally {
setIsLoading(false);
}
};
const handleSchedulePresetSelect = (preset: string) => {
setFormData(prev => ({
setFormData((prev) => ({
...prev,
schedule_cron: preset,
}));
};
const handleJobTypeChange = (jobType: string) => {
setFormData(prev => ({
setFormData((prev) => ({
...prev,
job_type: jobType as any,
config_json: {},
@ -157,7 +138,7 @@ export default function BatchJobModal({
};
const handleCollectionConfigChange = (configId: string) => {
setFormData(prev => ({
setFormData((prev) => ({
...prev,
config_json: {
...prev.config_json,
@ -172,25 +153,23 @@ export default function BatchJobModal({
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">
{job ? "배치 작업 수정" : "새 배치 작업"}
</DialogTitle>
<DialogTitle className="text-base sm:text-lg">{job ? "배치 작업 수정" : "새 배치 작업"}</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
{/* 기본 정보 */}
<div className="space-y-3 sm:space-y-4">
<h3 className="text-sm font-semibold sm:text-base">기본 정보</h3>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
<div>
<Label htmlFor="job_name" className="text-xs sm:text-sm">작업명 *</Label>
<Label htmlFor="job_name" className="text-xs sm:text-sm">
작업명 *
</Label>
<Input
id="job_name"
value={formData.job_name || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, job_name: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, job_name: e.target.value }))}
placeholder="배치 작업명을 입력하세요"
className="h-8 text-xs sm:h-10 sm:text-sm"
required
@ -198,11 +177,10 @@ export default function BatchJobModal({
</div>
<div>
<Label htmlFor="job_type" className="text-xs sm:text-sm">작업 타입 *</Label>
<Select
value={formData.job_type || "collection"}
onValueChange={handleJobTypeChange}
>
<Label htmlFor="job_type" className="text-xs sm:text-sm">
작업 타입 *
</Label>
<Select value={formData.job_type || "collection"} onValueChange={handleJobTypeChange}>
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
<SelectValue />
</SelectTrigger>
@ -218,13 +196,13 @@ export default function BatchJobModal({
</div>
<div>
<Label htmlFor="description" className="text-xs sm:text-sm">설명</Label>
<Label htmlFor="description" className="text-xs sm:text-sm">
설명
</Label>
<Textarea
id="description"
value={formData.description || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, description: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
placeholder="배치 작업에 대한 설명을 입력하세요"
className="min-h-[60px] text-xs sm:min-h-[80px] sm:text-sm"
rows={3}
@ -233,12 +211,14 @@ export default function BatchJobModal({
</div>
{/* 작업 설정 */}
{formData.job_type === 'collection' && (
{formData.job_type === "collection" && (
<div className="space-y-3 sm:space-y-4">
<h3 className="text-sm font-semibold sm:text-base">수집 설정</h3>
<div>
<Label htmlFor="collection_config" className="text-xs sm:text-sm">수집 설정</Label>
<Label htmlFor="collection_config" className="text-xs sm:text-sm">
수집 설정
</Label>
<Select
value={formData.config_json?.collectionConfigId?.toString() || ""}
onValueChange={handleCollectionConfigChange}
@ -261,16 +241,16 @@ export default function BatchJobModal({
{/* 스케줄 설정 */}
<div className="space-y-3 sm:space-y-4">
<h3 className="text-sm font-semibold sm:text-base">스케줄 설정</h3>
<div>
<Label htmlFor="schedule_cron" className="text-xs sm:text-sm">Cron 표현식</Label>
<Label htmlFor="schedule_cron" className="text-xs sm:text-sm">
Cron 표현식
</Label>
<div className="flex gap-2">
<Input
id="schedule_cron"
value={formData.schedule_cron || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, schedule_cron: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, schedule_cron: e.target.value }))}
placeholder="예: 0 0 * * * (매일 자정)"
className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
/>
@ -294,32 +274,26 @@ export default function BatchJobModal({
{job?.id && (
<div className="space-y-3 sm:space-y-4">
<h3 className="text-sm font-semibold sm:text-base">실행 통계</h3>
<div className="grid grid-cols-3 gap-2 sm:gap-4">
<div className="rounded-lg border bg-card p-3 sm:p-4">
<div className="text-xl font-bold text-primary sm:text-2xl">
{formData.execution_count || 0}
</div>
<div className="text-xs text-muted-foreground sm:text-sm">총 실행</div>
<div className="bg-card rounded-lg border p-3 sm:p-4">
<div className="text-primary text-xl font-bold sm:text-2xl">{formData.execution_count || 0}</div>
<div className="text-muted-foreground text-xs sm:text-sm">총 실행</div>
</div>
<div className="rounded-lg border bg-card p-3 sm:p-4">
<div className="text-xl font-bold text-primary sm:text-2xl">
{formData.success_count || 0}
</div>
<div className="text-xs text-muted-foreground sm:text-sm">성공</div>
<div className="bg-card rounded-lg border p-3 sm:p-4">
<div className="text-primary text-xl font-bold sm:text-2xl">{formData.success_count || 0}</div>
<div className="text-muted-foreground text-xs sm:text-sm">성공</div>
</div>
<div className="rounded-lg border bg-card p-3 sm:p-4">
<div className="text-xl font-bold text-destructive sm:text-2xl">
{formData.failure_count || 0}
</div>
<div className="text-xs text-muted-foreground sm:text-sm">실패</div>
<div className="bg-card rounded-lg border p-3 sm:p-4">
<div className="text-destructive text-xl font-bold sm:text-2xl">{formData.failure_count || 0}</div>
<div className="text-muted-foreground text-xs sm:text-sm">실패</div>
</div>
</div>
{formData.last_executed_at && (
<p className="text-xs text-muted-foreground sm:text-sm">
<p className="text-muted-foreground text-xs sm:text-sm">
마지막 실행: {new Date(formData.last_executed_at).toLocaleString()}
</p>
)}
@ -332,32 +306,28 @@ export default function BatchJobModal({
<Switch
id="is_active"
checked={formData.is_active === "Y"}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, is_active: checked ? "Y" : "N" }))
}
onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, is_active: checked ? "Y" : "N" }))}
/>
<Label htmlFor="is_active" className="text-xs sm:text-sm">활성화</Label>
<Label htmlFor="is_active" className="text-xs sm:text-sm">
활성화
</Label>
</div>
<Badge variant={formData.is_active === "Y" ? "default" : "secondary"}>
{formData.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
type="button"
variant="outline"
<Button
type="button"
variant="outline"
onClick={onClose}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
취소
</Button>
<Button
type="submit"
disabled={isLoading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
<Button type="submit" disabled={isLoading} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
{isLoading ? "저장 중..." : "저장"}
</Button>
</DialogFooter>

10
frontend/components/admin/CategoryItem.tsx
View File

@ -40,10 +40,8 @@ export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete
return (
<div
className={cn(
"cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all",
isSelected
? "shadow-md"
: "hover:shadow-md",
"bg-card cursor-pointer rounded-lg border p-4 shadow-sm transition-all",
isSelected ? "shadow-md" : "hover:shadow-md",
)}
onClick={onSelect}
>
@ -70,8 +68,8 @@ export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete
{category.is_active === "Y" ? "활성" : "비활성"}
</Badge>
</div>
<p className="mt-1 text-xs text-muted-foreground">{category.category_code}</p>
{category.description && <p className="mt-1 text-xs text-muted-foreground">{category.description}</p>}
<p className="text-muted-foreground mt-1 text-xs">{category.category_code}</p>
{category.description && <p className="text-muted-foreground mt-1 text-xs">{category.description}</p>}
</div>
{/* 액션 버튼 */}

51
frontend/components/admin/CodeCategoryFormModal.tsx
View File

@ -174,17 +174,25 @@ export function CodeCategoryFormModal({
{/* 카테고리 코드 */}
{!isEditing && (
<div className="space-y-2">
<Label htmlFor="categoryCode" className="text-xs sm:text-sm">카테고리 코드 *</Label>
<Label htmlFor="categoryCode" className="text-xs sm:text-sm">
카테고리 코드 *
</Label>
<Input
id="categoryCode"
{...createForm.register("categoryCode")}
disabled={isLoading}
placeholder="카테고리 코드를 입력하세요"
className={createForm.formState.errors.categoryCode ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
className={
createForm.formState.errors.categoryCode
? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
: "h-8 text-xs sm:h-10 sm:text-sm"
}
onBlur={() => handleFieldBlur("categoryCode")}
/>
{createForm.formState.errors.categoryCode && (
<p className="text-[10px] sm:text-xs text-destructive">{createForm.formState.errors.categoryCode.message}</p>
<p className="text-destructive text-[10px] sm:text-xs">
{createForm.formState.errors.categoryCode.message}
</p>
)}
{!createForm.formState.errors.categoryCode && (
<ValidationMessage
@ -199,9 +207,16 @@ export function CodeCategoryFormModal({
{/* 카테고리 코드 표시 (수정 시) */}
{isEditing && editingCategory && (
<div className="space-y-2">
<Label htmlFor="categoryCodeDisplay" className="text-xs sm:text-sm">카테고리 코드</Label>
<Input id="categoryCodeDisplay" value={editingCategory.category_code} disabled className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
<p className="text-[10px] sm:text-xs text-muted-foreground">카테고리 코드는 수정할 수 없습니다.</p>
<Label htmlFor="categoryCodeDisplay" className="text-xs sm:text-sm">
카테고리 코드
</Label>
<Input
id="categoryCodeDisplay"
value={editingCategory.category_code}
disabled
className="bg-muted h-8 cursor-not-allowed text-xs sm:h-10 sm:text-sm"
/>
<p className="text-muted-foreground text-[10px] sm:text-xs">카테고리 코드는 수정할 수 없습니다.</p>
</div>
)}
@ -226,10 +241,10 @@ export function CodeCategoryFormModal({
/>
{isEditing
? updateForm.formState.errors.categoryName && (
<p className="text-sm text-destructive">{updateForm.formState.errors.categoryName.message}</p>
<p className="text-destructive text-sm">{updateForm.formState.errors.categoryName.message}</p>
)
: createForm.formState.errors.categoryName && (
<p className="text-sm text-destructive">{createForm.formState.errors.categoryName.message}</p>
<p className="text-destructive text-sm">{createForm.formState.errors.categoryName.message}</p>
)}
{!(isEditing ? updateForm.formState.errors.categoryName : createForm.formState.errors.categoryName) && (
<ValidationMessage
@ -261,10 +276,10 @@ export function CodeCategoryFormModal({
/>
{isEditing
? updateForm.formState.errors.categoryNameEng && (
<p className="text-sm text-destructive">{updateForm.formState.errors.categoryNameEng.message}</p>
<p className="text-destructive text-sm">{updateForm.formState.errors.categoryNameEng.message}</p>
)
: createForm.formState.errors.categoryNameEng && (
<p className="text-sm text-destructive">{createForm.formState.errors.categoryNameEng.message}</p>
<p className="text-destructive text-sm">{createForm.formState.errors.categoryNameEng.message}</p>
)}
{!(isEditing
? updateForm.formState.errors.categoryNameEng
@ -299,10 +314,10 @@ export function CodeCategoryFormModal({
/>
{isEditing
? updateForm.formState.errors.description && (
<p className="text-sm text-destructive">{updateForm.formState.errors.description.message}</p>
<p className="text-destructive text-sm">{updateForm.formState.errors.description.message}</p>
)
: createForm.formState.errors.description && (
<p className="text-sm text-destructive">{createForm.formState.errors.description.message}</p>
<p className="text-destructive text-sm">{createForm.formState.errors.description.message}</p>
)}
</div>
@ -329,10 +344,10 @@ export function CodeCategoryFormModal({
/>
{isEditing
? updateForm.formState.errors.sortOrder && (
<p className="text-sm text-destructive">{updateForm.formState.errors.sortOrder.message}</p>
<p className="text-destructive text-sm">{updateForm.formState.errors.sortOrder.message}</p>
)
: createForm.formState.errors.sortOrder && (
<p className="text-sm text-destructive">{createForm.formState.errors.sortOrder.message}</p>
<p className="text-destructive text-sm">{createForm.formState.errors.sortOrder.message}</p>
)}
</div>
@ -351,10 +366,10 @@ export function CodeCategoryFormModal({
{/* 버튼 */}
<div className="flex gap-2 pt-4 sm:justify-end sm:gap-0">
<Button
type="button"
variant="outline"
onClick={onClose}
<Button
type="button"
variant="outline"
onClick={onClose}
disabled={isLoading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>

12
frontend/components/admin/CodeCategoryPanel.tsx
View File

@ -98,7 +98,7 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
{/* 검색 + 버튼 */}
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="카테고리 검색..."
value={searchTerm}
@ -119,9 +119,9 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
id="activeOnly"
checked={showActiveOnly}
onChange={(e) => setShowActiveOnly(e.target.checked)}
className="h-4 w-4 rounded border-input"
className="border-input h-4 w-4 rounded"
/>
<label htmlFor="activeOnly" className="text-sm text-muted-foreground">
<label htmlFor="activeOnly" className="text-muted-foreground text-sm">
활성만 표시
</label>
</div>
@ -135,7 +135,7 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
</div>
) : categories.length === 0 ? (
<div className="flex h-32 items-center justify-center">
<p className="text-sm text-muted-foreground">
<p className="text-muted-foreground text-sm">
{searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
</p>
</div>
@ -156,13 +156,13 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
{isFetchingNextPage && (
<div className="flex items-center justify-center py-4">
<LoadingSpinner size="sm" />
<span className="ml-2 text-sm text-muted-foreground">추가 로딩 중...</span>
<span className="text-muted-foreground ml-2 text-sm">추가 로딩 중...</span>
</div>
)}
{/* 더 이상 데이터가 없을 때 */}
{!hasNextPage && categories.length > 0 && (
<div className="py-4 text-center text-sm text-muted-foreground">모든 카테고리를 불러왔습니다.</div>
<div className="text-muted-foreground py-4 text-center text-sm">모든 카테고리를 불러왔습니다.</div>
)}
</>
)}

76
frontend/components/admin/CollectionConfigModal.tsx
View File

@ -1,24 +1,12 @@
"use client";
import React, { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { toast } from "sonner";
import { CollectionAPI, DataCollectionConfig } from "@/lib/api/collection";
@ -31,12 +19,7 @@ interface CollectionConfigModalProps {
config?: DataCollectionConfig | null;
}
export default function CollectionConfigModal({
isOpen,
onClose,
onSave,
config,
}: CollectionConfigModalProps) {
export default function CollectionConfigModal({ isOpen, onClose, onSave, config }: CollectionConfigModalProps) {
const [formData, setFormData] = useState<Partial<DataCollectionConfig>>({
config_name: "",
description: "",
@ -107,7 +90,7 @@ export default function CollectionConfigModal({
const handleConnectionChange = (connectionId: string) => {
const id = parseInt(connectionId);
setFormData(prev => ({
setFormData((prev) => ({
...prev,
source_connection_id: id,
source_table: "",
@ -121,7 +104,7 @@ export default function CollectionConfigModal({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.config_name || !formData.source_connection_id || !formData.source_table) {
toast.error("필수 필드를 모두 입력해주세요.");
return;
@ -140,16 +123,14 @@ export default function CollectionConfigModal({
onClose();
} catch (error) {
console.error("수집 설정 저장 오류:", error);
toast.error(
error instanceof Error ? error.message : "수집 설정 저장에 실패했습니다."
);
toast.error(error instanceof Error ? error.message : "수집 설정 저장에 실패했습니다.");
} finally {
setIsLoading(false);
}
};
const handleSchedulePresetSelect = (preset: string) => {
setFormData(prev => ({
setFormData((prev) => ({
...prev,
schedule_cron: preset,
}));
@ -167,25 +148,21 @@ export default function CollectionConfigModal({
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>
{config ? "수집 설정 수정" : "새 수집 설정"}
</DialogTitle>
<DialogTitle>{config ? "수집 설정 수정" : "새 수집 설정"}</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-6">
{/* 기본 정보 */}
<div className="space-y-4">
<h3 className="text-lg font-medium">기본 정보</h3>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="config_name">설정명 *</Label>
<Input
id="config_name"
value={formData.config_name || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, config_name: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, config_name: e.target.value }))}
placeholder="수집 설정명을 입력하세요"
required
/>
@ -195,9 +172,7 @@ export default function CollectionConfigModal({
<Label htmlFor="collection_type">수집 타입 *</Label>
<Select
value={formData.collection_type || "full"}
onValueChange={(value) =>
setFormData(prev => ({ ...prev, collection_type: value as any }))
}
onValueChange={(value) => setFormData((prev) => ({ ...prev, collection_type: value as any }))}
>
<SelectTrigger>
<SelectValue />
@ -218,9 +193,7 @@ export default function CollectionConfigModal({
<Textarea
id="description"
value={formData.description || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, description: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
placeholder="수집 설정에 대한 설명을 입력하세요"
rows={3}
/>
@ -230,14 +203,11 @@ export default function CollectionConfigModal({
{/* 소스 설정 */}
<div className="space-y-4">
<h3 className="text-lg font-medium">소스 설정</h3>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="source_connection">소스 연결 *</Label>
<Select
value={formData.source_connection_id?.toString() || ""}
onValueChange={handleConnectionChange}
>
<Select value={formData.source_connection_id?.toString() || ""} onValueChange={handleConnectionChange}>
<SelectTrigger>
<SelectValue placeholder="연결을 선택하세요" />
</SelectTrigger>
@ -255,9 +225,7 @@ export default function CollectionConfigModal({
<Label htmlFor="source_table">소스 테이블 *</Label>
<Select
value={formData.source_table || ""}
onValueChange={(value) =>
setFormData(prev => ({ ...prev, source_table: value }))
}
onValueChange={(value) => setFormData((prev) => ({ ...prev, source_table: value }))}
disabled={!formData.source_connection_id}
>
<SelectTrigger>
@ -279,9 +247,7 @@ export default function CollectionConfigModal({
<Input
id="target_table"
value={formData.target_table || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, target_table: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, target_table: e.target.value }))}
placeholder="대상 테이블명 (선택사항)"
/>
</div>
@ -290,16 +256,14 @@ export default function CollectionConfigModal({
{/* 스케줄 설정 */}
<div className="space-y-4">
<h3 className="text-lg font-medium">스케줄 설정</h3>
<div className="space-y-2">
<Label htmlFor="schedule_cron">Cron 표현식</Label>
<div className="flex gap-2">
<Input
id="schedule_cron"
value={formData.schedule_cron || ""}
onChange={(e) =>
setFormData(prev => ({ ...prev, schedule_cron: e.target.value }))
}
onChange={(e) => setFormData((prev) => ({ ...prev, schedule_cron: e.target.value }))}
placeholder="예: 0 0 * * * (매일 자정)"
className="flex-1"
/>
@ -324,9 +288,7 @@ export default function CollectionConfigModal({
<Switch
id="is_active"
checked={formData.is_active === "Y"}
onCheckedChange={(checked) =>
setFormData(prev => ({ ...prev, is_active: checked ? "Y" : "N" }))
}
onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, is_active: checked ? "Y" : "N" }))}
/>
<Label htmlFor="is_active">활성화</Label>
</div>

9
frontend/components/admin/ColumnDefinitionTable.tsx
View File

@ -163,7 +163,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
)}
{/* 컬럼 정의 테이블 */}
<div className="overflow-hidden bg-card shadow-sm">
<div className="bg-card overflow-hidden shadow-sm">
<Table>
<TableHeader>
<TableRow>
@ -188,7 +188,10 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
const hasRowError = rowErrors.length > 0;
return (
<TableRow key={index} className={`transition-colors hover:bg-muted/50 ${hasRowError ? "bg-destructive/10" : ""}`}>
<TableRow
key={index}
className={`hover:bg-muted/50 transition-colors ${hasRowError ? "bg-destructive/10" : ""}`}
>
<TableCell className="h-16">
<div className="space-y-1">
<Input
@ -199,7 +202,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
className={`text-sm ${hasRowError ? "border-destructive" : ""}`}
/>
{rowErrors.length > 0 && (
<div className="space-y-1 text-xs text-destructive">
<div className="text-destructive space-y-1 text-xs">
{rowErrors.map((error, i) => (
<div key={i}>{error}</div>
))}

12
frontend/components/admin/CompanyFormModal.tsx
View File

@ -112,8 +112,8 @@ export function CompanyFormModal({
return (
<Dialog open={modalState.isOpen} onOpenChange={handleCancel}>
<DialogContent
className="sm:max-w-[425px]"
<DialogContent
className="sm:max-w-[425px]"
onKeyDown={handleKeyDown}
defaultWidth={500}
defaultHeight={600}
@ -160,9 +160,9 @@ export function CompanyFormModal({
className={businessNumberError ? "border-destructive" : ""}
/>
{businessNumberError ? (
<p className="text-xs text-destructive">{businessNumberError}</p>
<p className="text-destructive text-xs">{businessNumberError}</p>
) : (
<p className="text-xs text-muted-foreground">10자리 숫자 (자동 하이픈 추가)</p>
<p className="text-muted-foreground text-xs">10자리 숫자 (자동 하이픈 추가)</p>
)}
</div>
@ -231,8 +231,8 @@ export function CompanyFormModal({
{/* 에러 메시지 */}
{error && (
<div className="rounded-md bg-destructive/10 p-3">
<p className="text-sm text-destructive">{error}</p>
<div className="bg-destructive/10 rounded-md p-3">
<p className="text-destructive text-sm">{error}</p>
</div>
)}

62
frontend/components/admin/CompanySwitcher.tsx
View File

@ -21,7 +21,7 @@ interface CompanySwitcherProps {
/**
* WACE 관리자 전용: 회사 선택 및 전환 컴포넌트
*
*
* - WACE 관리자(company_code = "*", userType = "SUPER_ADMIN")만 표시
* - 회사 선택 시 해당 회사로 전환하여 시스템 사용
* - JWT 토큰 재발급으로 company_code 변경
@ -39,13 +39,13 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
// 현재 선택된 회사명 표시
const currentCompanyName = React.useMemo(() => {
if (!user?.companyCode) return "로딩 중...";
if (user.companyCode === "*") {
return "WACE (최고 관리자)";
}
// companies 배열에서 현재 회사 찾기
const currentCompany = companies.find(c => c.company_code === user.companyCode);
const currentCompany = companies.find((c) => c.company_code === user.companyCode);
return currentCompany?.company_name || user.companyCode;
}, [user?.companyCode, companies]);
@ -61,9 +61,10 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
if (searchText.trim() === "") {
setFilteredCompanies(companies);
} else {
const filtered = companies.filter(company =>
company.company_name.toLowerCase().includes(searchText.toLowerCase()) ||
company.company_code.toLowerCase().includes(searchText.toLowerCase())
const filtered = companies.filter(
(company) =>
company.company_name.toLowerCase().includes(searchText.toLowerCase()) ||
company.company_code.toLowerCase().includes(searchText.toLowerCase()),
);
setFilteredCompanies(filtered);
}
@ -73,14 +74,14 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
try {
setLoading(true);
const response = await apiClient.get("/admin/companies/db");
if (response.data.success) {
// 활성 상태의 회사만 필터링 + company_code="*" 제외 (WACE는 별도 추가)
const activeCompanies = response.data.data
.filter((c: Company) => c.company_code !== "*") // DB의 "*" 제외
.filter((c: Company) => c.status === "active" || !c.status)
.sort((a: Company, b: Company) => a.company_name.localeCompare(b.company_name));
// WACE 복귀 옵션 추가
const companiesWithWace: Company[] = [
{
@ -90,7 +91,7 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
},
...activeCompanies,
];
setCompanies(companiesWithWace);
setFilteredCompanies(companiesWithWace);
}
@ -104,17 +105,17 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
const handleCompanySwitch = async (companyCode: string) => {
try {
setLoading(true);
const result = await switchCompany(companyCode);
if (!result.success) {
alert(result.message || "회사 전환에 실패했습니다.");
setLoading(false);
return;
}
logger.info("회사 전환 성공", { companyCode });
// 즉시 페이지 새로고침 (토큰이 이미 저장됨)
window.location.reload();
} catch (error: any) {
@ -132,13 +133,13 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
return (
<div className="space-y-4">
{/* 현재 회사 정보 */}
<div className="rounded-lg border bg-gradient-to-r from-primary/10 to-primary/5 p-4">
<div className="from-primary/10 to-primary/5 rounded-lg border bg-gradient-to-r p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/20">
<Building2 className="h-5 w-5 text-primary" />
<div className="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-lg">
<Building2 className="text-primary h-5 w-5" />
</div>
<div>
<p className="text-xs text-muted-foreground">현재 관리 회사</p>
<p className="text-muted-foreground text-xs">현재 관리 회사</p>
<p className="text-sm font-semibold">{currentCompanyName}</p>
</div>
</div>
@ -146,7 +147,7 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
{/* 회사 검색 */}
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="회사명 또는 코드 검색..."
value={searchText}
@ -158,33 +159,23 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
{/* 회사 목록 */}
<div className="max-h-[400px] space-y-2 overflow-y-auto rounded-lg border p-2">
{loading ? (
<div className="p-4 text-center text-sm text-muted-foreground">
로딩 중...
</div>
<div className="text-muted-foreground p-4 text-center text-sm">로딩 중...</div>
) : filteredCompanies.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">
검색 결과가 없습니다.
</div>
<div className="text-muted-foreground p-4 text-center text-sm">검색 결과가 없습니다.</div>
) : (
filteredCompanies.map((company) => (
<div
key={company.company_code}
className={`flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent ${
company.company_code === user?.companyCode
? "bg-accent/50 font-semibold"
: ""
className={`hover:bg-accent flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm transition-colors ${
company.company_code === user?.companyCode ? "bg-accent/50 font-semibold" : ""
}`}
onClick={() => handleCompanySwitch(company.company_code)}
>
<div className="flex flex-col">
<span className="font-medium">{company.company_name}</span>
<span className="text-xs text-muted-foreground">
{company.company_code}
</span>
<span className="text-muted-foreground text-xs">{company.company_code}</span>
</div>
{company.company_code === user?.companyCode && (
<span className="text-xs text-primary">현재</span>
)}
{company.company_code === user?.companyCode && <span className="text-primary text-xs">현재</span>}
</div>
))
)}
@ -192,4 +183,3 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
</div>
);
}

4
frontend/components/admin/CompanyToolbar.tsx
View File

@ -19,8 +19,8 @@ export function CompanyToolbar({ totalCount, onCreateClick }: CompanyToolbarProp
return (
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
{/* 왼쪽: 카운트 정보 */}
<div className="text-sm text-muted-foreground">
총 <span className="font-semibold text-foreground">{totalCount.toLocaleString()}</span> 건
<div className="text-muted-foreground text-sm">
총 <span className="text-foreground font-semibold">{totalCount.toLocaleString()}</span> 건
</div>
{/* 오른쪽: 등록 버튼 */}

37
frontend/components/admin/CreateTableModal.tsx
View File

@ -33,15 +33,15 @@ import {
RESERVED_WORDS,
} from "../../types/ddl";
export function CreateTableModal({
isOpen,
onClose,
onSuccess,
export function CreateTableModal({
isOpen,
onClose,
onSuccess,
mode = "create",
sourceTableName
sourceTableName,
}: CreateTableModalProps) {
const isDuplicateMode = mode === "duplicate" && sourceTableName;
const [tableName, setTableName] = useState("");
const [description, setDescription] = useState("");
const [columns, setColumns] = useState<CreateColumnDefinition[]>([
@ -107,20 +107,20 @@ export function CreateTableModal({
try {
// 1. 테이블 컬럼 정보 조회
const columnsResponse = await tableManagementApi.getColumnList(tableName);
console.log("🔍 컬럼 조회 응답:", columnsResponse);
if (columnsResponse.success && columnsResponse.data) {
// API는 { columns, total, page, size } 형태로 반환
const columnsList = columnsResponse.data.columns;
console.log("🔍 컬럼 리스트:", columnsList);
if (columnsList && columnsList.length > 0) {
// 첫 번째 컬럼에서 테이블 설명 가져오기 (모든 컬럼이 같은 테이블 설명을 가짐)
const firstColumn = columnsList[0];
setDescription(firstColumn.description || "");
// 2. 컬럼 정보 변환
const loadedColumns: CreateColumnDefinition[] = columnsList.map((col, idx) => ({
name: col.columnName,
@ -130,13 +130,13 @@ export function CreateTableModal({
order: idx + 1,
description: col.description,
}));
setColumns(loadedColumns);
// 3. 테이블명은 비워둠 (사용자가 입력해야 함)
setTableName("");
setTableNameError("");
toast.success(`${tableName} 테이블 정보를 불러왔습니다.`);
} else {
console.error("❌ 컬럼 배열이 비어있거나 유효하지 않음:", columnsList);
@ -329,10 +329,9 @@ export function CreateTableModal({
{isDuplicateMode ? "테이블 복제" : "새 테이블 생성"}
</DialogTitle>
<DialogDescription>
{isDuplicateMode
{isDuplicateMode
? `${sourceTableName} 테이블을 복제하여 새 테이블을 생성합니다. 테이블명을 입력하고 필요시 컬럼을 수정하세요.`
: "최고 관리자만 새로운 테이블을 생성할 수 있습니다. 테이블명과 컬럼 정의를 입력하고 검증 후 생성하세요."
}
: "최고 관리자만 새로운 테이블을 생성할 수 있습니다. 테이블명과 컬럼 정의를 입력하고 검증 후 생성하세요."}
</DialogDescription>
</DialogHeader>
@ -478,8 +477,10 @@ export function CreateTableModal({
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
생성 중...
</>
) : isDuplicateMode ? (
"복제 생성"
) : (
isDuplicateMode ? "복제 생성" : "테이블 생성"
"테이블 생성"
)}
</Button>
</DialogFooter>

20
frontend/components/admin/DDLLogViewer.tsx
View File

@ -6,13 +6,7 @@
"use client";
import { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
@ -278,14 +272,14 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
{log.success ? (
<CheckCircle2 className="h-4 w-4 text-green-600" />
) : (
<XCircle className="h-4 w-4 text-destructive" />
<XCircle className="text-destructive h-4 w-4" />
)}
<span className={log.success ? "text-green-600" : "text-destructive"}>
{log.success ? "성공" : "실패"}
</span>
</div>
{log.error_message && (
<div className="mt-1 max-w-xs truncate text-xs text-destructive">{log.error_message}</div>
<div className="text-destructive mt-1 max-w-xs truncate text-xs">{log.error_message}</div>
)}
</TableCell>
@ -332,7 +326,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
<CardTitle className="text-sm font-medium">실패</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-destructive">{statistics.failedExecutions}</div>
<div className="text-destructive text-2xl font-bold">{statistics.failedExecutions}</div>
</CardContent>
</Card>
@ -381,13 +375,13 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
{statistics.recentFailures.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="text-base text-destructive">최근 실패 로그</CardTitle>
<CardTitle className="text-destructive text-base">최근 실패 로그</CardTitle>
<CardDescription>최근 발생한 DDL 실행 실패 내역입니다.</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
{statistics.recentFailures.map((failure, index) => (
<div key={index} className="rounded-lg border border-destructive/20 bg-destructive/10 p-3">
<div key={index} className="border-destructive/20 bg-destructive/10 rounded-lg border p-3">
<div className="mb-1 flex items-center justify-between">
<div className="flex items-center gap-2">
<Badge variant={getDDLTypeBadgeVariant(failure.ddl_type)}>{failure.ddl_type}</Badge>
@ -397,7 +391,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
{format(new Date(failure.executed_at), "MM-dd HH:mm", { locale: ko })}
</span>
</div>
<div className="text-sm text-destructive">{failure.error_message}</div>
<div className="text-destructive text-sm">{failure.error_message}</div>
</div>
))}
</div>

42
frontend/components/admin/DiskUsageSummary.tsx
View File

@ -15,24 +15,24 @@ interface DiskUsageSummaryProps {
export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUsageSummaryProps) {
if (!diskUsageInfo) {
return (
<div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="bg-card rounded-lg border p-6 shadow-sm">
<div className="mb-4 flex items-center justify-between">
<div>
<h3 className="text-sm font-semibold">디스크 사용량</h3>
<p className="text-xs text-muted-foreground">전체 회사 파일 저장 현황</p>
<p className="text-muted-foreground text-xs">전체 회사 파일 저장 현황</p>
</div>
<Button
variant="outline"
size="icon"
onClick={onRefresh}
disabled={isLoading}
<Button
variant="outline"
size="icon"
onClick={onRefresh}
disabled={isLoading}
className="h-8 w-8"
aria-label="새로고침"
>
<RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
</Button>
</div>
<div className="flex items-center justify-center py-6 text-muted-foreground">
<div className="text-muted-foreground flex items-center justify-center py-6">
<div className="text-center">
<HardDrive className="mx-auto mb-2 h-8 w-8" />
<p className="text-sm">디스크 사용량 정보를 불러오는 중...</p>
@ -46,11 +46,11 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
const lastCheckedDate = new Date(lastChecked);
return (
<div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="bg-card rounded-lg border p-6 shadow-sm">
<div className="mb-4 flex items-center justify-between">
<div>
<h3 className="text-sm font-semibold">디스크 사용량 현황</h3>
<p className="text-xs text-muted-foreground">전체 회사 파일 저장 통계</p>
<p className="text-muted-foreground text-xs">전체 회사 파일 저장 통계</p>
</div>
<Button
variant="outline"
@ -67,36 +67,36 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
{/* 총 회사 수 */}
<div className="flex items-center space-x-2">
<Building2 className="h-4 w-4 text-primary" />
<Building2 className="text-primary h-4 w-4" />
<div>
<p className="text-xs text-muted-foreground">총 회사</p>
<p className="text-muted-foreground text-xs">총 회사</p>
<p className="text-lg font-semibold">{summary.totalCompanies}개</p>
</div>
</div>
{/* 총 파일 수 */}
<div className="flex items-center space-x-2">
<FileText className="h-4 w-4 text-primary" />
<FileText className="text-primary h-4 w-4" />
<div>
<p className="text-xs text-muted-foreground">총 파일</p>
<p className="text-muted-foreground text-xs">총 파일</p>
<p className="text-lg font-semibold">{summary.totalFiles.toLocaleString()}개</p>
</div>
</div>
{/* 총 용량 */}
<div className="flex items-center space-x-2">
<HardDrive className="h-4 w-4 text-primary" />
<HardDrive className="text-primary h-4 w-4" />
<div>
<p className="text-xs text-muted-foreground">총 용량</p>
<p className="text-muted-foreground text-xs">총 용량</p>
<p className="text-lg font-semibold">{summary.totalSizeMB.toFixed(1)} MB</p>
</div>
</div>
{/* 마지막 업데이트 */}
<div className="flex items-center space-x-2">
<Clock className="h-4 w-4 text-muted-foreground" />
<Clock className="text-muted-foreground h-4 w-4" />
<div>
<p className="text-xs text-muted-foreground">마지막 확인</p>
<p className="text-muted-foreground text-xs">마지막 확인</p>
<p className="text-xs font-medium">
{lastCheckedDate.toLocaleString("ko-KR", {
month: "short",
@ -112,7 +112,7 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
{/* 용량 기준 상태 표시 */}
<div className="mt-4 border-t pt-4">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">저장소 상태</span>
<span className="text-muted-foreground text-xs">저장소 상태</span>
<Badge
variant={summary.totalSizeMB > 1000 ? "destructive" : summary.totalSizeMB > 500 ? "secondary" : "default"}
>
@ -121,7 +121,7 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
</div>
{/* 간단한 진행 바 */}
<div className="mt-2 h-2 w-full rounded-full bg-muted">
<div className="bg-muted mt-2 h-2 w-full rounded-full">
<div
className={`h-2 rounded-full transition-all duration-300 ${
summary.totalSizeMB > 1000 ? "bg-destructive" : summary.totalSizeMB > 500 ? "bg-primary/60" : "bg-primary"
@ -131,7 +131,7 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
}}
/>
</div>
<div className="mt-1 flex justify-between text-xs text-muted-foreground">
<div className="text-muted-foreground mt-1 flex justify-between text-xs">
<span>0 MB</span>
<span>2,000 MB (권장 최대)</span>
</div>

36
frontend/components/admin/ExternalCallConfigModal.tsx
View File

@ -373,7 +373,7 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
{/* Discord 설정 */}
{formData.api_type === "discord" && (
<div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
<div className="bg-muted/20 space-y-3 rounded-lg border p-3 sm:p-4">
<h4 className="text-xs font-semibold sm:text-sm">Discord 설정</h4>
<div>
<Label htmlFor="discord_webhook" className="text-xs sm:text-sm">
@ -416,7 +416,7 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
{/* Slack 설정 */}
{formData.api_type === "slack" && (
<div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
<div className="bg-muted/20 space-y-3 rounded-lg border p-3 sm:p-4">
<h4 className="text-xs font-semibold sm:text-sm">Slack 설정</h4>
<div>
<Label htmlFor="slack_webhook" className="text-xs sm:text-sm">
@ -459,7 +459,7 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
{/* 카카오톡 설정 */}
{formData.api_type === "kakao-talk" && (
<div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
<div className="bg-muted/20 space-y-3 rounded-lg border p-3 sm:p-4">
<h4 className="text-xs font-semibold sm:text-sm">카카오톡 설정</h4>
<div>
<Label htmlFor="kakao_token" className="text-xs sm:text-sm">
@ -491,7 +491,7 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
{/* 일반 API 설정 */}
{formData.api_type === "generic" && (
<div className="space-y-3 rounded-lg border bg-muted/20 p-3 sm:p-4">
<div className="bg-muted/20 space-y-3 rounded-lg border p-3 sm:p-4">
<h4 className="text-xs font-semibold sm:text-sm">일반 API 설정</h4>
<div>
<Label htmlFor="generic_url" className="text-xs sm:text-sm">
@ -518,10 +518,18 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="GET" className="text-xs sm:text-sm">GET</SelectItem>
<SelectItem value="POST" className="text-xs sm:text-sm">POST</SelectItem>
<SelectItem value="PUT" className="text-xs sm:text-sm">PUT</SelectItem>
<SelectItem value="DELETE" className="text-xs sm:text-sm">DELETE</SelectItem>
<SelectItem value="GET" className="text-xs sm:text-sm">
GET
</SelectItem>
<SelectItem value="POST" className="text-xs sm:text-sm">
POST
</SelectItem>
<SelectItem value="PUT" className="text-xs sm:text-sm">
PUT
</SelectItem>
<SelectItem value="DELETE" className="text-xs sm:text-sm">
DELETE
</SelectItem>
</SelectContent>
</Select>
</div>
@ -559,23 +567,23 @@ export function ExternalCallConfigModal({ isOpen, onClose, onSave, editingConfig
{/* 다른 호출 타입들 (이메일, FTP, 큐) */}
{formData.call_type !== "rest-api" && (
<div className="rounded-lg border bg-muted/20 p-3 text-center text-xs text-muted-foreground sm:p-4 sm:text-sm">
<div className="bg-muted/20 text-muted-foreground rounded-lg border p-3 text-center text-xs sm:p-4 sm:text-sm">
{formData.call_type} 타입의 설정은 아직 구현되지 않았습니다.
</div>
)}
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={onClose}
<Button
variant="outline"
onClick={onClose}
disabled={loading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
취소
</Button>
<Button
onClick={handleSave}
<Button
onClick={handleSave}
disabled={loading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>

8
frontend/components/admin/LangKeyModal.tsx
View File

@ -1,13 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

9
frontend/components/admin/LanguageModal.tsx
View File

@ -1,13 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
@ -145,4 +139,3 @@ export default function LanguageModal({ isOpen, onClose, onSave, languageData }:
</Dialog>
);
}

21
frontend/components/admin/LayoutFormModal.tsx
View File

@ -6,14 +6,7 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
Dialog,
DialogContent,
DialogHeader,
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
@ -311,7 +304,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
>
<CardContent className="p-4">
<div className="flex items-center gap-3">
<IconComponent className="h-5 w-5 text-muted-foreground" />
<IconComponent className="text-muted-foreground h-5 w-5" />
<div>
<div className="font-medium">{category.name}</div>
<div className="text-xs text-gray-500">{category.description}</div>
@ -363,7 +356,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
<div className="font-medium">{template.name}</div>
<Badge variant="secondary">{template.zones}개 영역</Badge>
</div>
<div className="text-sm text-muted-foreground">{template.description}</div>
<div className="text-muted-foreground text-sm">{template.description}</div>
<div className="text-xs text-gray-500">예: {template.example}</div>
<div className="rounded bg-gray-100 p-2 text-center font-mono text-xs">{template.icon}</div>
</div>
@ -428,7 +421,11 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
<div className="space-y-4">
{generationResult ? (
<Alert
className={generationResult.success ? "border-green-200 bg-green-50" : "border-destructive/20 bg-destructive/10"}
className={
generationResult.success
? "border-green-200 bg-green-50"
: "border-destructive/20 bg-destructive/10"
}
>
<Info className="h-4 w-4" />
<AlertDescription className={generationResult.success ? "text-green-800" : "text-red-800"}>
@ -480,7 +477,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
<div>
<strong>생성될 파일:</strong>
</div>
<ul className="ml-4 space-y-1 text-xs text-muted-foreground">
<ul className="text-muted-foreground ml-4 space-y-1 text-xs">
<li>• {formData.name.toLowerCase()}/index.ts</li>
<li>
• {formData.name.toLowerCase()}/{formData.name}Layout.tsx

89
frontend/components/admin/MenuCopyDialog.tsx
View File

@ -16,13 +16,7 @@ import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { menuApi, MenuCopyResult } from "@/lib/api/menu";
import { apiClient } from "@/lib/api/client";
@ -39,13 +33,7 @@ interface Company {
company_name: string;
}
export function MenuCopyDialog({
menuObjid,
menuName,
open,
onOpenChange,
onCopyComplete,
}: MenuCopyDialogProps) {
export function MenuCopyDialog({ menuObjid, menuName, open, onOpenChange, onCopyComplete }: MenuCopyDialogProps) {
const [targetCompanyCode, setTargetCompanyCode] = useState("");
const [companies, setCompanies] = useState<Company[]>([]);
const [copying, setCopying] = useState(false);
@ -88,9 +76,7 @@ export function MenuCopyDialog({
const response = await apiClient.get("/admin/companies/db");
if (response.data.success && response.data.data) {
// 최고 관리자(*) 회사 제외
const filteredCompanies = response.data.data.filter(
(company: Company) => company.company_code !== "*"
);
const filteredCompanies = response.data.data.filter((company: Company) => company.company_code !== "*");
setCompanies(filteredCompanies);
}
} catch (error) {
@ -134,12 +120,7 @@ export function MenuCopyDialog({
copyCascadingRelation,
};
const response = await menuApi.copyMenu(
menuObjid,
targetCompanyCode,
screenNameConfig,
additionalCopyOptions
);
const response = await menuApi.copyMenu(menuObjid, targetCompanyCode, screenNameConfig, additionalCopyOptions);
if (response.success && response.data) {
setResult(response.data);
@ -177,9 +158,7 @@ export function MenuCopyDialog({
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">
메뉴 복사
</DialogTitle>
<DialogTitle className="text-base sm:text-lg">메뉴 복사</DialogTitle>
<DialogDescription className="text-xs sm:text-sm">
"{menuName}" 메뉴와 관련된 모든 리소스를 다른 회사로 복사합니다.
</DialogDescription>
@ -197,22 +176,17 @@ export function MenuCopyDialog({
onValueChange={setTargetCompanyCode}
disabled={copying || loadingCompanies}
>
<SelectTrigger
id="company"
className="h-8 text-xs sm:h-10 sm:text-sm"
>
<SelectTrigger id="company" className="h-8 text-xs sm:h-10 sm:text-sm">
<SelectValue placeholder="회사 선택" />
</SelectTrigger>
<SelectContent>
{loadingCompanies ? (
<div className="flex items-center justify-center p-2 text-xs text-muted-foreground">
<div className="text-muted-foreground flex items-center justify-center p-2 text-xs">
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
로딩 중...
</div>
) : companies.length === 0 ? (
<div className="p-2 text-xs text-muted-foreground text-center">
사용 가능한 회사가 없습니다
</div>
<div className="text-muted-foreground p-2 text-center text-xs">사용 가능한 회사가 없습니다</div>
) : (
companies.map((company) => (
<SelectItem
@ -239,16 +213,13 @@ export function MenuCopyDialog({
onCheckedChange={(checked) => setUseBulkRename(checked as boolean)}
disabled={copying}
/>
<Label
htmlFor="useBulkRename"
className="text-xs sm:text-sm font-medium cursor-pointer"
>
<Label htmlFor="useBulkRename" className="cursor-pointer text-xs font-medium sm:text-sm">
화면명 일괄 변경 사용
</Label>
</div>
{useBulkRename && (
<div className="space-y-3 pl-6 border-l-2">
<div className="space-y-3 border-l-2 pl-6">
<div>
<Label htmlFor="removeText" className="text-xs sm:text-sm">
제거할 텍스트
@ -291,7 +262,7 @@ export function MenuCopyDialog({
{!result && (
<div className="space-y-3">
<p className="text-xs font-medium">추가 복사 옵션 (선택사항):</p>
<div className="space-y-2 pl-2 border-l-2">
<div className="space-y-2 border-l-2 pl-2">
<div className="flex items-center gap-2">
<Checkbox
id="copyCodeCategory"
@ -299,10 +270,7 @@ export function MenuCopyDialog({
onCheckedChange={(checked) => setCopyCodeCategory(checked as boolean)}
disabled={copying}
/>
<Label
htmlFor="copyCodeCategory"
className="text-xs cursor-pointer"
>
<Label htmlFor="copyCodeCategory" className="cursor-pointer text-xs">
코드 카테고리 + 코드 복사
</Label>
</div>
@ -313,10 +281,7 @@ export function MenuCopyDialog({
onCheckedChange={(checked) => setCopyNumberingRules(checked as boolean)}
disabled={copying}
/>
<Label
htmlFor="copyNumberingRules"
className="text-xs cursor-pointer"
>
<Label htmlFor="copyNumberingRules" className="cursor-pointer text-xs">
채번 규칙 복사
</Label>
</div>
@ -327,10 +292,7 @@ export function MenuCopyDialog({
onCheckedChange={(checked) => setCopyCategoryMapping(checked as boolean)}
disabled={copying}
/>
<Label
htmlFor="copyCategoryMapping"
className="text-xs cursor-pointer"
>
<Label htmlFor="copyCategoryMapping" className="cursor-pointer text-xs">
카테고리 매핑 + 값 복사
</Label>
</div>
@ -341,10 +303,7 @@ export function MenuCopyDialog({
onCheckedChange={(checked) => setCopyTableTypeColumns(checked as boolean)}
disabled={copying}
/>
<Label
htmlFor="copyTableTypeColumns"
className="text-xs cursor-pointer"
>
<Label htmlFor="copyTableTypeColumns" className="cursor-pointer text-xs">
테이블 타입관리 입력타입 설정 복사
</Label>
</div>
@ -355,10 +314,7 @@ export function MenuCopyDialog({
onCheckedChange={(checked) => setCopyCascadingRelation(checked as boolean)}
disabled={copying}
/>
<Label
htmlFor="copyCascadingRelation"
className="text-xs cursor-pointer"
>
<Label htmlFor="copyCascadingRelation" className="cursor-pointer text-xs">
연쇄관계 설정 복사
</Label>
</div>
@ -369,22 +325,20 @@ export function MenuCopyDialog({
{/* 복사 항목 안내 */}
{!result && (
<div className="rounded-md border p-3 text-xs">
<p className="font-medium mb-2">기본 복사 항목:</p>
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
<p className="mb-2 font-medium">기본 복사 항목:</p>
<ul className="text-muted-foreground list-inside list-disc space-y-1">
<li>메뉴 구조 (하위 메뉴 포함)</li>
<li>화면 + 레이아웃 (모달, 조건부 컨테이너)</li>
<li>플로우 제어 (스텝, 연결)</li>
</ul>
<p className="mt-2 text-muted-foreground">
* 코드, 채번규칙, 카테고리는 위 옵션 선택 시 복사됩니다.
</p>
<p className="text-muted-foreground mt-2">* 코드, 채번규칙, 카테고리는 위 옵션 선택 시 복사됩니다.</p>
</div>
)}
{/* 복사 결과 */}
{result && (
<div className="rounded-md border border-success bg-success/10 p-3 text-xs space-y-2">
<p className="font-medium text-success">✅ 복사 완료!</p>
<div className="border-success bg-success/10 space-y-2 rounded-md border p-3 text-xs">
<p className="text-success font-medium">✅ 복사 완료!</p>
<div className="grid grid-cols-2 gap-2">
<div>
<span className="text-muted-foreground">메뉴:</span>{" "}
@ -469,4 +423,3 @@ export function MenuCopyDialog({
</Dialog>
);
}

15
frontend/components/admin/MenuFormModal.tsx
View File

@ -8,12 +8,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle
} from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { toast } from "sonner";
@ -618,18 +613,18 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
// menuId는 response에서 반환되거나 기존 menuId 사용
const targetMenuId = menuId || response.data?.objid;
const menuObjid = parseInt(targetMenuId?.toString() || "0");
if (menuObjid > 0) {
console.log("📋 화면-메뉴 관계 테이블 업데이트 시작:", {
screenId: selectedScreen.screenId,
menuObjid,
});
// 1. 기존 할당된 화면들 먼저 조회
try {
const existingScreens = await menuScreenApi.getScreensByMenu(menuObjid);
console.log("📋 기존 할당된 화면:", existingScreens.length, "개");
// 2. 기존 화면들 모두 제거
for (const existingScreen of existingScreens) {
try {
@ -642,7 +637,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
} catch (getError) {
console.warn("⚠️ 기존 화면 조회 실패 (계속 진행):", getError);
}
// 3. 새 화면 할당
await menuScreenApi.assignScreenToMenu(selectedScreen.screenId, menuObjid);
console.log("✅ 새 화면 할당 완료");

Some files were not shown because too many files have changed in this diff Show More