화면관리 삭제기능구현
This commit is contained in:
parent
87ce1b74d4
commit
1eeda775ef
|
|
@ -1478,22 +1478,23 @@ model material_release {
|
|||
}
|
||||
|
||||
model menu_info {
|
||||
objid Decimal @id @default(0) @db.Decimal
|
||||
menu_type Decimal? @db.Decimal
|
||||
parent_obj_id Decimal? @db.Decimal
|
||||
menu_name_kor String? @db.VarChar(64)
|
||||
menu_name_eng String? @db.VarChar(64)
|
||||
seq Decimal? @db.Decimal
|
||||
menu_url String? @db.VarChar(256)
|
||||
menu_desc String? @db.VarChar(1024)
|
||||
writer String? @db.VarChar(32)
|
||||
regdate DateTime? @db.Timestamp(6)
|
||||
status String? @db.VarChar(32)
|
||||
system_name String? @db.VarChar(32)
|
||||
company_code String? @default("*") @db.VarChar(50)
|
||||
lang_key String? @db.VarChar(100)
|
||||
lang_key_desc String? @db.VarChar(100)
|
||||
company company_mng? @relation(fields: [company_code], references: [company_code])
|
||||
objid Decimal @id @default(0) @db.Decimal
|
||||
menu_type Decimal? @db.Decimal
|
||||
parent_obj_id Decimal? @db.Decimal
|
||||
menu_name_kor String? @db.VarChar(64)
|
||||
menu_name_eng String? @db.VarChar(64)
|
||||
seq Decimal? @db.Decimal
|
||||
menu_url String? @db.VarChar(256)
|
||||
menu_desc String? @db.VarChar(1024)
|
||||
writer String? @db.VarChar(32)
|
||||
regdate DateTime? @db.Timestamp(6)
|
||||
status String? @db.VarChar(32)
|
||||
system_name String? @db.VarChar(32)
|
||||
company_code String? @default("*") @db.VarChar(50)
|
||||
lang_key String? @db.VarChar(100)
|
||||
lang_key_desc String? @db.VarChar(100)
|
||||
company company_mng? @relation(fields: [company_code], references: [company_code])
|
||||
screen_assignments screen_menu_assignments[]
|
||||
|
||||
@@index([parent_obj_id])
|
||||
@@index([company_code])
|
||||
|
|
@ -4989,20 +4990,25 @@ model zz_230410_user_info {
|
|||
model screen_definitions {
|
||||
screen_id Int @id @default(autoincrement())
|
||||
screen_name String @db.VarChar(100)
|
||||
screen_code String @unique @db.VarChar(50)
|
||||
screen_code String @db.VarChar(50)
|
||||
table_name String @db.VarChar(100)
|
||||
company_code String @db.VarChar(50)
|
||||
description String?
|
||||
is_active String @default("Y") @db.Char(1)
|
||||
is_active String @default("Y") @db.Char(1) // Y=활성, N=비활성, D=삭제됨(휴지통)
|
||||
layout_metadata Json?
|
||||
created_date DateTime @default(now()) @db.Timestamp(6)
|
||||
created_by String? @db.VarChar(50)
|
||||
updated_date DateTime @default(now()) @db.Timestamp(6)
|
||||
updated_by String? @db.VarChar(50)
|
||||
deleted_date DateTime? @db.Timestamp(6) // 삭제 일시 (휴지통 이동 시점)
|
||||
deleted_by String? @db.VarChar(50) // 삭제한 사용자
|
||||
delete_reason String? // 삭제 사유 (선택사항)
|
||||
layouts screen_layouts[]
|
||||
menu_assignments screen_menu_assignments[]
|
||||
|
||||
@@index([company_code])
|
||||
@@index([is_active, company_code])
|
||||
@@index([deleted_date], map: "idx_screen_definitions_deleted")
|
||||
}
|
||||
|
||||
model screen_layouts {
|
||||
|
|
@ -5066,6 +5072,7 @@ model screen_menu_assignments {
|
|||
created_date DateTime @default(now()) @db.Timestamp(6)
|
||||
created_by String? @db.VarChar(50)
|
||||
screen screen_definitions @relation(fields: [screen_id], references: [screen_id], onDelete: Cascade)
|
||||
menu_info menu_info @relation(fields: [menu_objid], references: [objid])
|
||||
|
||||
@@unique([screen_id, menu_objid, company_code])
|
||||
@@index([company_code])
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import cors from "cors";
|
|||
import helmet from "helmet";
|
||||
import compression from "compression";
|
||||
import rateLimit from "express-rate-limit";
|
||||
import path from "path";
|
||||
import config from "./config/environment";
|
||||
import { logger } from "./utils/logger";
|
||||
import { errorHandler } from "./middleware/errorHandler";
|
||||
|
|
@ -29,6 +30,23 @@ app.use(compression());
|
|||
app.use(express.json({ limit: "10mb" }));
|
||||
app.use(express.urlencoded({ extended: true, limit: "10mb" }));
|
||||
|
||||
// 정적 파일 서빙 (업로드된 파일들)
|
||||
app.use(
|
||||
"/uploads",
|
||||
express.static(path.join(process.cwd(), "uploads"), {
|
||||
setHeaders: (res, path) => {
|
||||
// 파일 서빙 시 CORS 헤더 설정
|
||||
res.setHeader("Access-Control-Allow-Origin", "*");
|
||||
res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
|
||||
res.setHeader(
|
||||
"Access-Control-Allow-Headers",
|
||||
"Content-Type, Authorization"
|
||||
);
|
||||
res.setHeader("Cache-Control", "public, max-age=3600");
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// CORS 설정 - environment.ts에서 이미 올바른 형태로 처리됨
|
||||
app.use(
|
||||
cors({
|
||||
|
|
|
|||
|
|
@ -495,6 +495,125 @@ export const getFileList = async (
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 파일 미리보기 (이미지 등)
|
||||
*/
|
||||
export const previewFile = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { objid } = req.params;
|
||||
const { serverFilename } = req.query;
|
||||
|
||||
console.log("👁️ 파일 미리보기 요청:", { objid, serverFilename });
|
||||
|
||||
const fileRecord = await prisma.attach_file_info.findUnique({
|
||||
where: {
|
||||
objid: parseInt(objid),
|
||||
},
|
||||
});
|
||||
|
||||
if (!fileRecord || fileRecord.status !== "ACTIVE") {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: "파일을 찾을 수 없습니다.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 파일 경로에서 회사코드와 날짜 폴더 추출
|
||||
const filePathParts = fileRecord.file_path!.split("/");
|
||||
const companyCode = filePathParts[2] || "DEFAULT";
|
||||
const fileName = fileRecord.saved_file_name!;
|
||||
|
||||
// 파일 경로에 날짜 구조가 있는지 확인 (YYYY/MM/DD)
|
||||
let dateFolder = "";
|
||||
if (filePathParts.length >= 6) {
|
||||
dateFolder = `${filePathParts[3]}/${filePathParts[4]}/${filePathParts[5]}`;
|
||||
}
|
||||
|
||||
const companyUploadDir = getCompanyUploadDir(
|
||||
companyCode,
|
||||
dateFolder || undefined
|
||||
);
|
||||
const filePath = path.join(companyUploadDir, fileName);
|
||||
|
||||
console.log("👁️ 파일 미리보기 경로 확인:", {
|
||||
stored_file_path: fileRecord.file_path,
|
||||
company_code: companyCode,
|
||||
company_upload_dir: companyUploadDir,
|
||||
final_file_path: filePath,
|
||||
});
|
||||
|
||||
if (!fs.existsSync(filePath)) {
|
||||
console.error("❌ 파일 없음:", filePath);
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: `실제 파일을 찾을 수 없습니다: ${filePath}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// MIME 타입 설정
|
||||
const ext = path.extname(fileName).toLowerCase();
|
||||
let mimeType = "application/octet-stream";
|
||||
|
||||
switch (ext) {
|
||||
case ".jpg":
|
||||
case ".jpeg":
|
||||
mimeType = "image/jpeg";
|
||||
break;
|
||||
case ".png":
|
||||
mimeType = "image/png";
|
||||
break;
|
||||
case ".gif":
|
||||
mimeType = "image/gif";
|
||||
break;
|
||||
case ".webp":
|
||||
mimeType = "image/webp";
|
||||
break;
|
||||
case ".pdf":
|
||||
mimeType = "application/pdf";
|
||||
break;
|
||||
default:
|
||||
mimeType = "application/octet-stream";
|
||||
}
|
||||
|
||||
// CORS 헤더 설정 (더 포괄적으로)
|
||||
res.setHeader("Access-Control-Allow-Origin", "*");
|
||||
res.setHeader(
|
||||
"Access-Control-Allow-Methods",
|
||||
"GET, POST, PUT, DELETE, OPTIONS"
|
||||
);
|
||||
res.setHeader(
|
||||
"Access-Control-Allow-Headers",
|
||||
"Content-Type, Authorization, X-Requested-With, Accept, Origin"
|
||||
);
|
||||
res.setHeader("Access-Control-Allow-Credentials", "true");
|
||||
|
||||
// 캐시 헤더 설정
|
||||
res.setHeader("Cache-Control", "public, max-age=3600");
|
||||
res.setHeader("Content-Type", mimeType);
|
||||
|
||||
// 파일 스트림으로 전송
|
||||
const fileStream = fs.createReadStream(filePath);
|
||||
fileStream.pipe(res);
|
||||
|
||||
console.log("✅ 파일 미리보기 완료:", {
|
||||
objid,
|
||||
fileName: fileRecord.real_file_name,
|
||||
mimeType,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("파일 미리보기 오류:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "파일 미리보기 중 오류가 발생했습니다.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 파일 다운로드
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -90,24 +90,180 @@ export const updateScreen = async (
|
|||
}
|
||||
};
|
||||
|
||||
// 화면 삭제
|
||||
export const deleteScreen = async (
|
||||
// 화면 의존성 체크
|
||||
export const checkScreenDependencies = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { companyCode } = req.user as any;
|
||||
await screenManagementService.deleteScreen(parseInt(id), companyCode);
|
||||
res.json({ success: true, message: "화면이 삭제되었습니다." });
|
||||
|
||||
const result = await screenManagementService.checkScreenDependencies(
|
||||
parseInt(id),
|
||||
companyCode
|
||||
);
|
||||
res.json({ success: true, ...result });
|
||||
} catch (error) {
|
||||
console.error("화면 의존성 체크 실패:", error);
|
||||
res
|
||||
.status(500)
|
||||
.json({ success: false, message: "의존성 체크에 실패했습니다." });
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 삭제 (휴지통으로 이동)
|
||||
export const deleteScreen = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { companyCode, userId } = req.user as any;
|
||||
const { deleteReason, force } = req.body;
|
||||
|
||||
await screenManagementService.deleteScreen(
|
||||
parseInt(id),
|
||||
companyCode,
|
||||
userId,
|
||||
deleteReason,
|
||||
force || false
|
||||
);
|
||||
res.json({ success: true, message: "화면이 휴지통으로 이동되었습니다." });
|
||||
} catch (error: any) {
|
||||
console.error("화면 삭제 실패:", error);
|
||||
|
||||
// 의존성 오류인 경우 특별 처리
|
||||
if (error.code === "SCREEN_HAS_DEPENDENCIES") {
|
||||
res.status(409).json({
|
||||
success: false,
|
||||
message: error.message,
|
||||
code: error.code,
|
||||
dependencies: error.dependencies,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
res
|
||||
.status(500)
|
||||
.json({ success: false, message: "화면 삭제에 실패했습니다." });
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 복원 (휴지통에서 복원)
|
||||
export const restoreScreen = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { companyCode, userId } = req.user as any;
|
||||
|
||||
await screenManagementService.restoreScreen(
|
||||
parseInt(id),
|
||||
companyCode,
|
||||
userId
|
||||
);
|
||||
res.json({ success: true, message: "화면이 복원되었습니다." });
|
||||
} catch (error) {
|
||||
console.error("화면 복원 실패:", error);
|
||||
res
|
||||
.status(500)
|
||||
.json({ success: false, message: "화면 복원에 실패했습니다." });
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 영구 삭제
|
||||
export const permanentDeleteScreen = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { companyCode } = req.user as any;
|
||||
|
||||
await screenManagementService.permanentDeleteScreen(
|
||||
parseInt(id),
|
||||
companyCode
|
||||
);
|
||||
res.json({ success: true, message: "화면이 영구적으로 삭제되었습니다." });
|
||||
} catch (error) {
|
||||
console.error("화면 영구 삭제 실패:", error);
|
||||
res
|
||||
.status(500)
|
||||
.json({ success: false, message: "화면 영구 삭제에 실패했습니다." });
|
||||
}
|
||||
};
|
||||
|
||||
// 휴지통 화면 목록 조회
|
||||
export const getDeletedScreens = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const { companyCode } = req.user as any;
|
||||
const page = parseInt(req.query.page as string) || 1;
|
||||
const size = parseInt(req.query.size as string) || 20;
|
||||
|
||||
const result = await screenManagementService.getDeletedScreens(
|
||||
companyCode,
|
||||
page,
|
||||
size
|
||||
);
|
||||
res.json({ success: true, ...result });
|
||||
} catch (error) {
|
||||
console.error("휴지통 화면 목록 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "휴지통 화면 목록 조회에 실패했습니다.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 휴지통 화면 일괄 영구 삭제
|
||||
export const bulkPermanentDeleteScreens = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const { companyCode } = req.user as any;
|
||||
const { screenIds } = req.body;
|
||||
|
||||
if (!Array.isArray(screenIds) || screenIds.length === 0) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "삭제할 화면 ID 목록이 필요합니다.",
|
||||
});
|
||||
}
|
||||
|
||||
const result = await screenManagementService.bulkPermanentDeleteScreens(
|
||||
screenIds,
|
||||
companyCode
|
||||
);
|
||||
|
||||
let message = `${result.deletedCount}개 화면이 영구 삭제되었습니다.`;
|
||||
if (result.skippedCount > 0) {
|
||||
message += ` (${result.skippedCount}개 화면은 삭제되지 않았습니다.)`;
|
||||
}
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
message,
|
||||
result: {
|
||||
deletedCount: result.deletedCount,
|
||||
skippedCount: result.skippedCount,
|
||||
errors: result.errors,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("휴지통 화면 일괄 삭제 실패:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "일괄 삭제에 실패했습니다.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 복사
|
||||
export const copyScreen = async (
|
||||
req: AuthenticatedRequest,
|
||||
|
|
@ -349,3 +505,26 @@ export const unassignScreenFromMenu = async (
|
|||
.json({ success: false, message: "화면-메뉴 할당 해제에 실패했습니다." });
|
||||
}
|
||||
};
|
||||
|
||||
// 휴지통 화면들의 메뉴 할당 정리 (관리자용)
|
||||
export const cleanupDeletedScreenMenuAssignments = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
try {
|
||||
const result =
|
||||
await screenManagementService.cleanupDeletedScreenMenuAssignments();
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
message: result.message,
|
||||
updatedCount: result.updatedCount,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("메뉴 할당 정리 실패:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "메뉴 할당 정리에 실패했습니다.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
deleteFile,
|
||||
getFileList,
|
||||
downloadFile,
|
||||
previewFile,
|
||||
getLinkedFiles,
|
||||
uploadMiddleware,
|
||||
} from "../controllers/fileController";
|
||||
|
|
@ -43,6 +44,13 @@ router.get("/linked/:tableName/:recordId", getLinkedFiles);
|
|||
*/
|
||||
router.delete("/:objid", deleteFile);
|
||||
|
||||
/**
|
||||
* @route GET /api/files/preview/:objid
|
||||
* @desc 파일 미리보기 (이미지 등)
|
||||
* @access Private
|
||||
*/
|
||||
router.get("/preview/:objid", previewFile);
|
||||
|
||||
/**
|
||||
* @route GET /api/files/download/:objid
|
||||
* @desc 파일 다운로드
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ import {
|
|||
createScreen,
|
||||
updateScreen,
|
||||
deleteScreen,
|
||||
checkScreenDependencies,
|
||||
restoreScreen,
|
||||
permanentDeleteScreen,
|
||||
getDeletedScreens,
|
||||
bulkPermanentDeleteScreens,
|
||||
copyScreen,
|
||||
getTables,
|
||||
getTableInfo,
|
||||
|
|
@ -16,6 +21,7 @@ import {
|
|||
assignScreenToMenu,
|
||||
getScreensByMenu,
|
||||
unassignScreenFromMenu,
|
||||
cleanupDeletedScreenMenuAssignments,
|
||||
} from "../controllers/screenManagementController";
|
||||
|
||||
const router = express.Router();
|
||||
|
|
@ -28,9 +34,16 @@ router.get("/screens", getScreens);
|
|||
router.get("/screens/:id", getScreen);
|
||||
router.post("/screens", createScreen);
|
||||
router.put("/screens/:id", updateScreen);
|
||||
router.delete("/screens/:id", deleteScreen);
|
||||
router.get("/screens/:id/dependencies", checkScreenDependencies); // 의존성 체크
|
||||
router.delete("/screens/:id", deleteScreen); // 휴지통으로 이동
|
||||
router.post("/screens/:id/copy", copyScreen);
|
||||
|
||||
// 휴지통 관리
|
||||
router.get("/screens/trash/list", getDeletedScreens); // 휴지통 화면 목록
|
||||
router.post("/screens/:id/restore", restoreScreen); // 휴지통에서 복원
|
||||
router.delete("/screens/:id/permanent", permanentDeleteScreen); // 영구 삭제
|
||||
router.delete("/screens/trash/bulk", bulkPermanentDeleteScreens); // 일괄 영구 삭제
|
||||
|
||||
// 화면 코드 자동 생성
|
||||
router.get("/generate-screen-code/:companyCode", generateScreenCode);
|
||||
|
||||
|
|
@ -48,4 +61,10 @@ router.post("/screens/:screenId/assign-menu", assignScreenToMenu);
|
|||
router.get("/menus/:menuObjid/screens", getScreensByMenu);
|
||||
router.delete("/screens/:screenId/menus/:menuObjid", unassignScreenFromMenu);
|
||||
|
||||
// 관리자용 정리 기능
|
||||
router.post(
|
||||
"/admin/cleanup-deleted-screen-menu-assignments",
|
||||
cleanupDeletedScreenMenuAssignments
|
||||
);
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -50,8 +50,11 @@ export class ScreenManagementService {
|
|||
console.log(`사용자 회사 코드:`, userCompanyCode);
|
||||
|
||||
// 화면 코드 중복 확인
|
||||
const existingScreen = await prisma.screen_definitions.findUnique({
|
||||
where: { screen_code: screenData.screenCode },
|
||||
const existingScreen = await prisma.screen_definitions.findFirst({
|
||||
where: {
|
||||
screen_code: screenData.screenCode,
|
||||
is_active: { not: "D" }, // 삭제되지 않은 화면만 중복 검사
|
||||
},
|
||||
});
|
||||
|
||||
console.log(
|
||||
|
|
@ -79,15 +82,18 @@ export class ScreenManagementService {
|
|||
}
|
||||
|
||||
/**
|
||||
* 회사별 화면 목록 조회 (페이징 지원)
|
||||
* 회사별 화면 목록 조회 (페이징 지원) - 활성 화면만
|
||||
*/
|
||||
async getScreensByCompany(
|
||||
companyCode: string,
|
||||
page: number = 1,
|
||||
size: number = 20
|
||||
): Promise<PaginatedResponse<ScreenDefinition>> {
|
||||
const whereClause =
|
||||
companyCode === "*" ? {} : { company_code: companyCode };
|
||||
const whereClause: any = { is_active: { not: "D" } }; // 삭제된 화면 제외
|
||||
|
||||
if (companyCode !== "*") {
|
||||
whereClause.company_code = companyCode;
|
||||
}
|
||||
|
||||
const [screens, total] = await Promise.all([
|
||||
prisma.screen_definitions.findMany({
|
||||
|
|
@ -111,11 +117,14 @@ export class ScreenManagementService {
|
|||
}
|
||||
|
||||
/**
|
||||
* 화면 목록 조회 (간단 버전)
|
||||
* 화면 목록 조회 (간단 버전) - 활성 화면만
|
||||
*/
|
||||
async getScreens(companyCode: string): Promise<ScreenDefinition[]> {
|
||||
const whereClause =
|
||||
companyCode === "*" ? {} : { company_code: companyCode };
|
||||
const whereClause: any = { is_active: { not: "D" } }; // 삭제된 화면 제외
|
||||
|
||||
if (companyCode !== "*") {
|
||||
whereClause.company_code = companyCode;
|
||||
}
|
||||
|
||||
const screens = await prisma.screen_definitions.findMany({
|
||||
where: whereClause,
|
||||
|
|
@ -126,31 +135,37 @@ export class ScreenManagementService {
|
|||
}
|
||||
|
||||
/**
|
||||
* 화면 정의 조회
|
||||
* 화면 정의 조회 (활성 화면만)
|
||||
*/
|
||||
async getScreenById(screenId: number): Promise<ScreenDefinition | null> {
|
||||
const screen = await prisma.screen_definitions.findUnique({
|
||||
where: { screen_id: screenId },
|
||||
const screen = await prisma.screen_definitions.findFirst({
|
||||
where: {
|
||||
screen_id: screenId,
|
||||
is_active: { not: "D" }, // 삭제된 화면 제외
|
||||
},
|
||||
});
|
||||
|
||||
return screen ? this.mapToScreenDefinition(screen) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 정의 조회 (회사 코드 검증 포함)
|
||||
* 화면 정의 조회 (회사 코드 검증 포함, 활성 화면만)
|
||||
*/
|
||||
async getScreen(
|
||||
screenId: number,
|
||||
companyCode: string
|
||||
): Promise<ScreenDefinition | null> {
|
||||
const whereClause: any = { screen_id: screenId };
|
||||
const whereClause: any = {
|
||||
screen_id: screenId,
|
||||
is_active: { not: "D" }, // 삭제된 화면 제외
|
||||
};
|
||||
|
||||
// 회사 코드가 '*'가 아닌 경우 회사별 필터링
|
||||
if (companyCode !== "*") {
|
||||
whereClause.company_code = companyCode;
|
||||
}
|
||||
|
||||
const screen = await prisma.screen_definitions.findUnique({
|
||||
const screen = await prisma.screen_definitions.findFirst({
|
||||
where: whereClause,
|
||||
});
|
||||
|
||||
|
|
@ -196,9 +211,237 @@ export class ScreenManagementService {
|
|||
}
|
||||
|
||||
/**
|
||||
* 화면 정의 삭제
|
||||
* 화면 의존성 체크 - 다른 화면에서 이 화면을 참조하는지 확인
|
||||
*/
|
||||
async deleteScreen(screenId: number, userCompanyCode: string): Promise<void> {
|
||||
async checkScreenDependencies(
|
||||
screenId: number,
|
||||
userCompanyCode: string
|
||||
): Promise<{
|
||||
hasDependencies: boolean;
|
||||
dependencies: Array<{
|
||||
screenId: number;
|
||||
screenName: string;
|
||||
screenCode: string;
|
||||
componentId: string;
|
||||
componentType: string;
|
||||
referenceType: string; // 'popup', 'navigate', 'targetScreen' 등
|
||||
}>;
|
||||
}> {
|
||||
// 권한 확인
|
||||
const targetScreen = await prisma.screen_definitions.findUnique({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
|
||||
if (!targetScreen) {
|
||||
throw new Error("화면을 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
if (
|
||||
userCompanyCode !== "*" &&
|
||||
targetScreen.company_code !== "*" &&
|
||||
targetScreen.company_code !== userCompanyCode
|
||||
) {
|
||||
throw new Error("이 화면에 접근할 권한이 없습니다.");
|
||||
}
|
||||
|
||||
// 같은 회사의 모든 활성 화면에서 이 화면을 참조하는지 확인
|
||||
const whereClause = {
|
||||
is_active: { not: "D" },
|
||||
...(userCompanyCode !== "*" && {
|
||||
company_code: { in: [userCompanyCode, "*"] },
|
||||
}),
|
||||
};
|
||||
|
||||
const allScreens = await prisma.screen_definitions.findMany({
|
||||
where: whereClause,
|
||||
include: {
|
||||
layouts: true,
|
||||
},
|
||||
});
|
||||
|
||||
const dependencies: Array<{
|
||||
screenId: number;
|
||||
screenName: string;
|
||||
screenCode: string;
|
||||
componentId: string;
|
||||
componentType: string;
|
||||
referenceType: string;
|
||||
}> = [];
|
||||
|
||||
// 각 화면의 레이아웃에서 버튼 컴포넌트들을 검사
|
||||
for (const screen of allScreens) {
|
||||
if (screen.screen_id === screenId) continue; // 자기 자신은 제외
|
||||
|
||||
try {
|
||||
// screen_layouts 테이블에서 버튼 컴포넌트 확인
|
||||
const buttonLayouts = screen.layouts.filter(
|
||||
(layout) => layout.component_type === "widget"
|
||||
);
|
||||
|
||||
for (const layout of buttonLayouts) {
|
||||
const properties = layout.properties as any;
|
||||
|
||||
// 버튼 컴포넌트인지 확인
|
||||
if (properties?.widgetType === "button") {
|
||||
const config = properties.webTypeConfig;
|
||||
if (!config) continue;
|
||||
|
||||
// popup 액션에서 popupScreenId 확인
|
||||
if (
|
||||
config.actionType === "popup" &&
|
||||
config.popupScreenId === screenId
|
||||
) {
|
||||
dependencies.push({
|
||||
screenId: screen.screen_id,
|
||||
screenName: screen.screen_name,
|
||||
screenCode: screen.screen_code,
|
||||
componentId: layout.component_id,
|
||||
componentType: "button",
|
||||
referenceType: "popup",
|
||||
});
|
||||
}
|
||||
|
||||
// navigate 액션에서 navigateScreenId 확인
|
||||
if (
|
||||
config.actionType === "navigate" &&
|
||||
config.navigateScreenId === screenId
|
||||
) {
|
||||
dependencies.push({
|
||||
screenId: screen.screen_id,
|
||||
screenName: screen.screen_name,
|
||||
screenCode: screen.screen_code,
|
||||
componentId: layout.component_id,
|
||||
componentType: "button",
|
||||
referenceType: "navigate",
|
||||
});
|
||||
}
|
||||
|
||||
// navigateUrl에서 화면 ID 패턴 확인 (예: /screens/123)
|
||||
if (
|
||||
config.navigateUrl &&
|
||||
config.navigateUrl.includes(`/screens/${screenId}`)
|
||||
) {
|
||||
dependencies.push({
|
||||
screenId: screen.screen_id,
|
||||
screenName: screen.screen_name,
|
||||
screenCode: screen.screen_code,
|
||||
componentId: layout.component_id,
|
||||
componentType: "button",
|
||||
referenceType: "url",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 기존 layout_metadata도 확인 (하위 호환성)
|
||||
const layoutMetadata = screen.layout_metadata as any;
|
||||
if (layoutMetadata?.components) {
|
||||
const components = layoutMetadata.components;
|
||||
|
||||
for (const component of components) {
|
||||
// 버튼 컴포넌트인지 확인
|
||||
if (
|
||||
component.type === "widget" &&
|
||||
component.widgetType === "button"
|
||||
) {
|
||||
const config = component.webTypeConfig;
|
||||
if (!config) continue;
|
||||
|
||||
// popup 액션에서 targetScreenId 확인
|
||||
if (
|
||||
config.actionType === "popup" &&
|
||||
config.targetScreenId === screenId
|
||||
) {
|
||||
dependencies.push({
|
||||
screenId: screen.screen_id,
|
||||
screenName: screen.screen_name,
|
||||
screenCode: screen.screen_code,
|
||||
componentId: component.id,
|
||||
componentType: "button",
|
||||
referenceType: "popup",
|
||||
});
|
||||
}
|
||||
|
||||
// navigate 액션에서 targetScreenId 확인
|
||||
if (
|
||||
config.actionType === "navigate" &&
|
||||
config.targetScreenId === screenId
|
||||
) {
|
||||
dependencies.push({
|
||||
screenId: screen.screen_id,
|
||||
screenName: screen.screen_name,
|
||||
screenCode: screen.screen_code,
|
||||
componentId: component.id,
|
||||
componentType: "button",
|
||||
referenceType: "navigate",
|
||||
});
|
||||
}
|
||||
|
||||
// navigateUrl에서 화면 ID 패턴 확인 (예: /screens/123)
|
||||
if (
|
||||
config.navigateUrl &&
|
||||
config.navigateUrl.includes(`/screens/${screenId}`)
|
||||
) {
|
||||
dependencies.push({
|
||||
screenId: screen.screen_id,
|
||||
screenName: screen.screen_name,
|
||||
screenCode: screen.screen_code,
|
||||
componentId: component.id,
|
||||
componentType: "button",
|
||||
referenceType: "url",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`화면 ${screen.screen_id}의 레이아웃 분석 중 오류:`,
|
||||
error
|
||||
);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// 메뉴 할당 확인
|
||||
const menuAssignments = await prisma.screen_menu_assignments.findMany({
|
||||
where: {
|
||||
screen_id: screenId,
|
||||
is_active: "Y",
|
||||
},
|
||||
include: {
|
||||
menu_info: true, // 메뉴 정보도 함께 조회
|
||||
},
|
||||
});
|
||||
|
||||
// 메뉴에 할당된 경우 의존성에 추가
|
||||
for (const assignment of menuAssignments) {
|
||||
dependencies.push({
|
||||
screenId: 0, // 메뉴는 화면이 아니므로 0으로 설정
|
||||
screenName: assignment.menu_info?.menu_name_kor || "알 수 없는 메뉴",
|
||||
screenCode: `MENU_${assignment.menu_objid}`,
|
||||
componentId: `menu_${assignment.assignment_id}`,
|
||||
componentType: "menu",
|
||||
referenceType: "menu_assignment",
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
hasDependencies: dependencies.length > 0,
|
||||
dependencies,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 정의 삭제 (휴지통으로 이동 - 소프트 삭제)
|
||||
*/
|
||||
async deleteScreen(
|
||||
screenId: number,
|
||||
userCompanyCode: string,
|
||||
deletedBy: string,
|
||||
deleteReason?: string,
|
||||
force: boolean = false
|
||||
): Promise<void> {
|
||||
// 권한 확인
|
||||
const existingScreen = await prisma.screen_definitions.findUnique({
|
||||
where: { screen_id: screenId },
|
||||
|
|
@ -215,11 +458,315 @@ export class ScreenManagementService {
|
|||
throw new Error("이 화면을 삭제할 권한이 없습니다.");
|
||||
}
|
||||
|
||||
// 이미 삭제된 화면인지 확인
|
||||
if (existingScreen.is_active === "D") {
|
||||
throw new Error("이미 삭제된 화면입니다.");
|
||||
}
|
||||
|
||||
// 강제 삭제가 아닌 경우 의존성 체크
|
||||
if (!force) {
|
||||
const dependencyCheck = await this.checkScreenDependencies(
|
||||
screenId,
|
||||
userCompanyCode
|
||||
);
|
||||
if (dependencyCheck.hasDependencies) {
|
||||
const error = new Error("다른 화면에서 사용 중인 화면입니다.") as any;
|
||||
error.code = "SCREEN_HAS_DEPENDENCIES";
|
||||
error.dependencies = dependencyCheck.dependencies;
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 트랜잭션으로 화면 삭제와 메뉴 할당 정리를 함께 처리
|
||||
await prisma.$transaction(async (tx) => {
|
||||
// 소프트 삭제 (휴지통으로 이동)
|
||||
await tx.screen_definitions.update({
|
||||
where: { screen_id: screenId },
|
||||
data: {
|
||||
is_active: "D",
|
||||
deleted_date: new Date(),
|
||||
deleted_by: deletedBy,
|
||||
delete_reason: deleteReason,
|
||||
updated_date: new Date(),
|
||||
updated_by: deletedBy,
|
||||
},
|
||||
});
|
||||
|
||||
// 메뉴 할당도 비활성화
|
||||
await tx.screen_menu_assignments.updateMany({
|
||||
where: {
|
||||
screen_id: screenId,
|
||||
is_active: "Y",
|
||||
},
|
||||
data: {
|
||||
is_active: "N",
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 복원 (휴지통에서 복원)
|
||||
*/
|
||||
async restoreScreen(
|
||||
screenId: number,
|
||||
userCompanyCode: string,
|
||||
restoredBy: string
|
||||
): Promise<void> {
|
||||
// 권한 확인
|
||||
const existingScreen = await prisma.screen_definitions.findUnique({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
|
||||
if (!existingScreen) {
|
||||
throw new Error("화면을 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
if (
|
||||
userCompanyCode !== "*" &&
|
||||
existingScreen.company_code !== userCompanyCode
|
||||
) {
|
||||
throw new Error("이 화면을 복원할 권한이 없습니다.");
|
||||
}
|
||||
|
||||
// 삭제된 화면이 아닌 경우
|
||||
if (existingScreen.is_active !== "D") {
|
||||
throw new Error("삭제된 화면이 아닙니다.");
|
||||
}
|
||||
|
||||
// 화면 코드 중복 확인 (복원 시 같은 코드가 이미 존재하는지)
|
||||
const duplicateScreen = await prisma.screen_definitions.findFirst({
|
||||
where: {
|
||||
screen_code: existingScreen.screen_code,
|
||||
is_active: { not: "D" },
|
||||
screen_id: { not: screenId },
|
||||
},
|
||||
});
|
||||
|
||||
if (duplicateScreen) {
|
||||
throw new Error(
|
||||
"같은 화면 코드를 가진 활성 화면이 이미 존재합니다. 복원하려면 기존 화면의 코드를 변경하거나 삭제해주세요."
|
||||
);
|
||||
}
|
||||
|
||||
// 트랜잭션으로 화면 복원과 메뉴 할당 복원을 함께 처리
|
||||
await prisma.$transaction(async (tx) => {
|
||||
// 화면 복원
|
||||
await tx.screen_definitions.update({
|
||||
where: { screen_id: screenId },
|
||||
data: {
|
||||
is_active: "Y",
|
||||
deleted_date: null,
|
||||
deleted_by: null,
|
||||
delete_reason: null,
|
||||
updated_date: new Date(),
|
||||
updated_by: restoredBy,
|
||||
},
|
||||
});
|
||||
|
||||
// 메뉴 할당도 다시 활성화
|
||||
await tx.screen_menu_assignments.updateMany({
|
||||
where: {
|
||||
screen_id: screenId,
|
||||
is_active: "N",
|
||||
},
|
||||
data: {
|
||||
is_active: "Y",
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 휴지통 화면들의 메뉴 할당 정리 (관리자용)
|
||||
*/
|
||||
async cleanupDeletedScreenMenuAssignments(): Promise<{
|
||||
updatedCount: number;
|
||||
message: string;
|
||||
}> {
|
||||
const result = await prisma.$executeRaw`
|
||||
UPDATE screen_menu_assignments
|
||||
SET is_active = 'N'
|
||||
WHERE screen_id IN (
|
||||
SELECT screen_id
|
||||
FROM screen_definitions
|
||||
WHERE is_active = 'D'
|
||||
) AND is_active = 'Y'
|
||||
`;
|
||||
|
||||
return {
|
||||
updatedCount: Number(result),
|
||||
message: `${result}개의 메뉴 할당이 정리되었습니다.`,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 영구 삭제 (휴지통에서 완전 삭제)
|
||||
*/
|
||||
async permanentDeleteScreen(
|
||||
screenId: number,
|
||||
userCompanyCode: string
|
||||
): Promise<void> {
|
||||
// 권한 확인
|
||||
const existingScreen = await prisma.screen_definitions.findUnique({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
|
||||
if (!existingScreen) {
|
||||
throw new Error("화면을 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
if (
|
||||
userCompanyCode !== "*" &&
|
||||
existingScreen.company_code !== userCompanyCode
|
||||
) {
|
||||
throw new Error("이 화면을 영구 삭제할 권한이 없습니다.");
|
||||
}
|
||||
|
||||
// 삭제된 화면이 아닌 경우 영구 삭제 불가
|
||||
if (existingScreen.is_active !== "D") {
|
||||
throw new Error("휴지통에 있는 화면만 영구 삭제할 수 있습니다.");
|
||||
}
|
||||
|
||||
// 물리적 삭제 (CASCADE로 관련 레이아웃과 메뉴 할당도 함께 삭제됨)
|
||||
await prisma.screen_definitions.delete({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 휴지통 화면 목록 조회
|
||||
*/
|
||||
async getDeletedScreens(
|
||||
companyCode: string,
|
||||
page: number = 1,
|
||||
size: number = 20
|
||||
): Promise<
|
||||
PaginatedResponse<
|
||||
ScreenDefinition & {
|
||||
deletedDate?: Date;
|
||||
deletedBy?: string;
|
||||
deleteReason?: string;
|
||||
}
|
||||
>
|
||||
> {
|
||||
const whereClause: any = { is_active: "D" };
|
||||
|
||||
if (companyCode !== "*") {
|
||||
whereClause.company_code = companyCode;
|
||||
}
|
||||
|
||||
const [screens, total] = await Promise.all([
|
||||
prisma.screen_definitions.findMany({
|
||||
where: whereClause,
|
||||
skip: (page - 1) * size,
|
||||
take: size,
|
||||
orderBy: { deleted_date: "desc" },
|
||||
}),
|
||||
prisma.screen_definitions.count({ where: whereClause }),
|
||||
]);
|
||||
|
||||
return {
|
||||
data: screens.map((screen) => ({
|
||||
...this.mapToScreenDefinition(screen),
|
||||
deletedDate: screen.deleted_date || undefined,
|
||||
deletedBy: screen.deleted_by || undefined,
|
||||
deleteReason: screen.delete_reason || undefined,
|
||||
})),
|
||||
pagination: {
|
||||
page,
|
||||
size,
|
||||
total,
|
||||
totalPages: Math.ceil(total / size),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 휴지통 화면 일괄 영구 삭제
|
||||
*/
|
||||
async bulkPermanentDeleteScreens(
|
||||
screenIds: number[],
|
||||
userCompanyCode: string
|
||||
): Promise<{
|
||||
deletedCount: number;
|
||||
skippedCount: number;
|
||||
errors: Array<{ screenId: number; error: string }>;
|
||||
}> {
|
||||
if (screenIds.length === 0) {
|
||||
throw new Error("삭제할 화면을 선택해주세요.");
|
||||
}
|
||||
|
||||
// 권한 확인 - 해당 회사의 휴지통 화면들만 조회
|
||||
const whereClause: any = {
|
||||
screen_id: { in: screenIds },
|
||||
is_active: "D", // 휴지통에 있는 화면만
|
||||
};
|
||||
|
||||
if (userCompanyCode !== "*") {
|
||||
whereClause.company_code = userCompanyCode;
|
||||
}
|
||||
|
||||
const screensToDelete = await prisma.screen_definitions.findMany({
|
||||
where: whereClause,
|
||||
});
|
||||
|
||||
let deletedCount = 0;
|
||||
let skippedCount = 0;
|
||||
const errors: Array<{ screenId: number; error: string }> = [];
|
||||
|
||||
// 각 화면을 개별적으로 삭제 처리
|
||||
for (const screenId of screenIds) {
|
||||
try {
|
||||
const screenToDelete = screensToDelete.find(
|
||||
(s) => s.screen_id === screenId
|
||||
);
|
||||
|
||||
if (!screenToDelete) {
|
||||
skippedCount++;
|
||||
errors.push({
|
||||
screenId,
|
||||
error: "화면을 찾을 수 없거나 삭제 권한이 없습니다.",
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// 관련 레이아웃 데이터도 함께 삭제
|
||||
await prisma.$transaction(async (tx) => {
|
||||
// screen_layouts 삭제
|
||||
await tx.screen_layouts.deleteMany({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
|
||||
// screen_menu_assignments 삭제
|
||||
await tx.screen_menu_assignments.deleteMany({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
|
||||
// screen_definitions 삭제
|
||||
await tx.screen_definitions.delete({
|
||||
where: { screen_id: screenId },
|
||||
});
|
||||
});
|
||||
|
||||
deletedCount++;
|
||||
} catch (error) {
|
||||
skippedCount++;
|
||||
errors.push({
|
||||
screenId,
|
||||
error: error instanceof Error ? error.message : "알 수 없는 오류",
|
||||
});
|
||||
console.error(`화면 ${screenId} 영구 삭제 실패:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
deletedCount,
|
||||
skippedCount,
|
||||
errors,
|
||||
};
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 테이블 관리
|
||||
// ========================================
|
||||
|
|
|
|||
|
|
@ -1,5 +1,32 @@
|
|||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Environment Setup
|
||||
|
||||
### 환경변수 설정
|
||||
|
||||
개발 환경에서 파일 미리보기가 정상 작동하도록 하려면 다음 환경변수를 설정하세요:
|
||||
|
||||
1. `.env.local` 파일을 생성하고 다음 내용을 추가:
|
||||
|
||||
```bash
|
||||
# 개발 환경 (Next.js rewrites 사용)
|
||||
NEXT_PUBLIC_API_URL=/api
|
||||
|
||||
# 운영 환경에서는 실제 백엔드 URL 사용
|
||||
# NEXT_PUBLIC_API_URL=http://39.117.244.52:8080/api
|
||||
```
|
||||
|
||||
2. 백엔드 서버가 포트 3000에서 실행되고 있는지 확인
|
||||
3. Next.js 개발 서버는 포트 9771에서 실행
|
||||
|
||||
### 파일 미리보기 문제 해결
|
||||
|
||||
파일 미리보기에서 CORS 오류가 발생하는 경우:
|
||||
|
||||
1. 백엔드 서버가 정상 실행 중인지 확인
|
||||
2. Next.js rewrites 설정이 올바른지 확인 (`next.config.mjs`)
|
||||
3. 환경변수 `NEXT_PUBLIC_API_URL`이 올바르게 설정되었는지 확인
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ import { tableTypeApi } from "@/lib/api/screen";
|
|||
import { getCurrentUser, UserInfo } from "@/lib/api/client";
|
||||
import { DataTableComponent, DataTableColumn, DataTableFilter, AttachedFileInfo } from "@/types/screen";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { downloadFile, getLinkedFiles } from "@/lib/api/file";
|
||||
import { downloadFile, getLinkedFiles, getFilePreviewUrl, getDirectFileUrl } from "@/lib/api/file";
|
||||
import { toast } from "sonner";
|
||||
import { FileUpload } from "@/components/screen/widgets/FileUpload";
|
||||
|
||||
|
|
@ -111,6 +111,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
const [showPreviewModal, setShowPreviewModal] = useState(false);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [rotation, setRotation] = useState(0);
|
||||
const [imageLoadError, setImageLoadError] = useState(false);
|
||||
const [alternativeImageUrl, setAlternativeImageUrl] = useState<string | null>(null);
|
||||
|
||||
// 파일 관리 상태
|
||||
const [fileStatusMap, setFileStatusMap] = useState<Record<string, { hasFiles: boolean; fileCount: number }>>({}); // 행별 파일 상태
|
||||
|
|
@ -224,6 +226,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
setShowPreviewModal(true);
|
||||
setZoom(1);
|
||||
setRotation(0);
|
||||
setImageLoadError(false);
|
||||
setAlternativeImageUrl(null);
|
||||
}, []);
|
||||
|
||||
const closePreviewModal = useCallback(() => {
|
||||
|
|
@ -231,6 +235,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
setPreviewImage(null);
|
||||
setZoom(1);
|
||||
setRotation(0);
|
||||
setImageLoadError(false);
|
||||
setAlternativeImageUrl(null);
|
||||
}, []);
|
||||
|
||||
const handleZoom = useCallback((direction: "in" | "out") => {
|
||||
|
|
@ -254,6 +260,25 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
}, []);
|
||||
|
||||
// 이미지 로딩 실패 시 대체 URL 시도
|
||||
const handleImageError = useCallback(() => {
|
||||
if (!imageLoadError && previewImage) {
|
||||
console.error("이미지 로딩 실패:", previewImage);
|
||||
setImageLoadError(true);
|
||||
|
||||
// 대체 URL 생성 (직접 파일 경로 사용)
|
||||
if (previewImage.path) {
|
||||
const altUrl = getDirectFileUrl(previewImage.path);
|
||||
console.log("대체 URL 시도:", altUrl);
|
||||
setAlternativeImageUrl(altUrl);
|
||||
} else {
|
||||
toast.error("이미지를 불러올 수 없습니다.");
|
||||
}
|
||||
} else {
|
||||
toast.error("이미지를 불러올 수 없습니다.");
|
||||
}
|
||||
}, [imageLoadError, previewImage]);
|
||||
const [showFileModal, setShowFileModal] = useState(false);
|
||||
const [currentFileData, setCurrentFileData] = useState<FileColumnData | null>(null);
|
||||
const [currentFileColumn, setCurrentFileColumn] = useState<DataTableColumn | null>(null);
|
||||
|
|
@ -2248,16 +2273,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
<div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-gray-50 p-4">
|
||||
{previewImage && (
|
||||
<img
|
||||
src={`${process.env.NEXT_PUBLIC_API_URL}/files/preview/${previewImage.id}?serverFilename=${previewImage.savedFileName}`}
|
||||
src={alternativeImageUrl || getFilePreviewUrl(previewImage.id)}
|
||||
alt={previewImage.name}
|
||||
className="max-h-full max-w-full object-contain transition-transform duration-200"
|
||||
style={{
|
||||
transform: `scale(${zoom}) rotate(${rotation}deg)`,
|
||||
}}
|
||||
onError={() => {
|
||||
console.error("이미지 로딩 실패:", previewImage);
|
||||
toast.error("이미지를 불러올 수 없습니다.");
|
||||
}}
|
||||
onError={handleImageError}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {
|
|||
WebType,
|
||||
WidgetComponent,
|
||||
FileComponent,
|
||||
AreaComponent,
|
||||
AreaLayoutType,
|
||||
DateTypeConfig,
|
||||
NumberTypeConfig,
|
||||
SelectTypeConfig,
|
||||
|
|
@ -50,6 +52,15 @@ import {
|
|||
Edit,
|
||||
Trash2,
|
||||
Upload,
|
||||
Square,
|
||||
CreditCard,
|
||||
Layout,
|
||||
Grid3x3,
|
||||
Columns,
|
||||
Rows,
|
||||
SidebarOpen,
|
||||
Folder,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
|
||||
interface RealtimePreviewProps {
|
||||
|
|
@ -62,6 +73,159 @@ interface RealtimePreviewProps {
|
|||
children?: React.ReactNode; // 그룹 내 자식 컴포넌트들
|
||||
}
|
||||
|
||||
// 영역 레이아웃에 따른 아이콘 반환
|
||||
const getAreaIcon = (layoutType: AreaLayoutType) => {
|
||||
switch (layoutType) {
|
||||
case "box":
|
||||
return <Square className="h-6 w-6 text-blue-600" />;
|
||||
case "card":
|
||||
return <CreditCard className="h-6 w-6 text-blue-600" />;
|
||||
case "panel":
|
||||
return <Layout className="h-6 w-6 text-blue-600" />;
|
||||
case "section":
|
||||
return <Layout className="h-6 w-6 text-blue-600" />;
|
||||
case "grid":
|
||||
return <Grid3x3 className="h-6 w-6 text-blue-600" />;
|
||||
case "flex-row":
|
||||
return <Columns className="h-6 w-6 text-blue-600" />;
|
||||
case "flex-column":
|
||||
return <Rows className="h-6 w-6 text-blue-600" />;
|
||||
case "sidebar":
|
||||
return <SidebarOpen className="h-6 w-6 text-blue-600" />;
|
||||
case "header-content":
|
||||
return <Layout className="h-6 w-6 text-blue-600" />;
|
||||
case "tabs":
|
||||
return <Folder className="h-6 w-6 text-blue-600" />;
|
||||
case "accordion":
|
||||
return <ChevronUp className="h-6 w-6 text-blue-600" />;
|
||||
default:
|
||||
return <Square className="h-6 w-6 text-blue-600" />;
|
||||
}
|
||||
};
|
||||
|
||||
// 영역 컴포넌트 렌더링
|
||||
const renderArea = (component: AreaComponent, children?: React.ReactNode) => {
|
||||
const { layoutType, title, description, layoutConfig, areaStyle } = component;
|
||||
|
||||
// 기본 스타일
|
||||
const baseStyle: React.CSSProperties = {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
backgroundColor: areaStyle?.backgroundColor || "#ffffff",
|
||||
border: areaStyle?.borderWidth
|
||||
? `${areaStyle.borderWidth}px ${areaStyle.borderStyle || "solid"} ${areaStyle.borderColor || "#e5e7eb"}`
|
||||
: "1px solid #e5e7eb",
|
||||
borderRadius: `${areaStyle?.borderRadius || 8}px`,
|
||||
padding: `${areaStyle?.padding || 16}px`,
|
||||
margin: `${areaStyle?.margin || 0}px`,
|
||||
...(areaStyle?.shadow &&
|
||||
areaStyle.shadow !== "none" && {
|
||||
boxShadow:
|
||||
{
|
||||
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
|
||||
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
|
||||
}[areaStyle.shadow] || "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
}),
|
||||
};
|
||||
|
||||
// 레이아웃별 컨테이너 스타일
|
||||
const getLayoutStyle = (): React.CSSProperties => {
|
||||
switch (layoutType) {
|
||||
case "grid":
|
||||
return {
|
||||
display: "grid",
|
||||
gridTemplateColumns: `repeat(${layoutConfig?.gridColumns || 3}, 1fr)`,
|
||||
gridTemplateRows: layoutConfig?.gridRows ? `repeat(${layoutConfig.gridRows}, 1fr)` : "auto",
|
||||
gap: `${layoutConfig?.gridGap || 16}px`,
|
||||
};
|
||||
|
||||
case "flex-row":
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: layoutConfig?.justifyContent || "flex-start",
|
||||
alignItems: layoutConfig?.alignItems || "stretch",
|
||||
gap: `${layoutConfig?.gap || 16}px`,
|
||||
flexWrap: layoutConfig?.flexWrap || "nowrap",
|
||||
};
|
||||
|
||||
case "flex-column":
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: layoutConfig?.justifyContent || "flex-start",
|
||||
alignItems: layoutConfig?.alignItems || "stretch",
|
||||
gap: `${layoutConfig?.gap || 16}px`,
|
||||
};
|
||||
|
||||
case "sidebar":
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: layoutConfig?.sidebarPosition === "right" ? "row-reverse" : "row",
|
||||
};
|
||||
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
// 헤더 렌더링 (panel, section 타입용)
|
||||
const renderHeader = () => {
|
||||
if (!title || (layoutType !== "panel" && layoutType !== "section")) return null;
|
||||
|
||||
const headerStyle: React.CSSProperties = {
|
||||
backgroundColor: areaStyle?.headerBackgroundColor || "#f3f4f6",
|
||||
color: areaStyle?.headerTextColor || "#374151",
|
||||
height: `${areaStyle?.headerHeight || 48}px`,
|
||||
padding: `${areaStyle?.headerPadding || 16}px`,
|
||||
borderBottom: layoutType === "panel" ? "1px solid #e5e7eb" : "none",
|
||||
borderTopLeftRadius: `${areaStyle?.borderRadius || 8}px`,
|
||||
borderTopRightRadius: `${areaStyle?.borderRadius || 8}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
fontWeight: "600",
|
||||
fontSize: "14px",
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={headerStyle}>
|
||||
{title}
|
||||
{description && <span style={{ marginLeft: "8px", fontSize: "12px", opacity: 0.7 }}>{description}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 컨텐츠 영역 스타일
|
||||
const contentStyle: React.CSSProperties = {
|
||||
...getLayoutStyle(),
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
};
|
||||
|
||||
// 자식 컴포넌트가 없을 때 표시할 플레이스홀더
|
||||
const renderPlaceholder = () => (
|
||||
<div className="pointer-events-none flex h-full flex-col items-center justify-center p-4">
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
{getAreaIcon(layoutType)}
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-medium text-gray-700">{title || `${layoutType} 영역`}</div>
|
||||
<div className="text-xs text-gray-500">{description || "컴포넌트를 이 영역에 드래그하세요"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
{renderHeader()}
|
||||
<div style={contentStyle}>{children && React.Children.count(children) > 0 ? children : renderPlaceholder()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 웹 타입에 따른 위젯 렌더링
|
||||
const renderWidget = (component: ComponentData) => {
|
||||
// 위젯 컴포넌트가 아닌 경우 빈 div 반환
|
||||
|
|
@ -1193,6 +1357,17 @@ export const RealtimePreview: React.FC<RealtimePreviewProps> = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{type === "area" && (
|
||||
<div
|
||||
className="relative h-full w-full"
|
||||
data-area-container="true"
|
||||
data-component-id={component.id}
|
||||
data-layout-type={(component as AreaComponent).layoutType}
|
||||
>
|
||||
{renderArea(component as AreaComponent, children)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{false &&
|
||||
(() => {
|
||||
const dataTableComponent = component as any; // DataTableComponent 타입
|
||||
|
|
|
|||
|
|
@ -1042,6 +1042,57 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
...templateComp.style,
|
||||
},
|
||||
} as ComponentData;
|
||||
} else if (templateComp.type === "area") {
|
||||
// 영역 컴포넌트 생성
|
||||
const gridColumns = 6; // 기본값: 6컬럼 (50% 너비)
|
||||
|
||||
const calculatedSize =
|
||||
currentGridInfo && layout.gridSettings?.snapToGrid
|
||||
? (() => {
|
||||
const newWidth = calculateWidthFromColumns(
|
||||
gridColumns,
|
||||
currentGridInfo,
|
||||
layout.gridSettings as GridUtilSettings,
|
||||
);
|
||||
return {
|
||||
width: newWidth,
|
||||
height: templateComp.size.height,
|
||||
};
|
||||
})()
|
||||
: templateComp.size;
|
||||
|
||||
return {
|
||||
id: componentId,
|
||||
type: "area",
|
||||
label: templateComp.label,
|
||||
position: finalPosition,
|
||||
size: calculatedSize,
|
||||
gridColumns,
|
||||
layoutType: (templateComp as any).layoutType || "box",
|
||||
title: (templateComp as any).title || templateComp.label,
|
||||
description: (templateComp as any).description,
|
||||
layoutConfig: (templateComp as any).layoutConfig || {},
|
||||
areaStyle: {
|
||||
backgroundColor: "#ffffff",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: "#e5e7eb",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
margin: 0,
|
||||
shadow: "sm",
|
||||
...(templateComp as any).areaStyle,
|
||||
},
|
||||
children: [],
|
||||
style: {
|
||||
labelDisplay: true,
|
||||
labelFontSize: "14px",
|
||||
labelColor: "#374151",
|
||||
labelFontWeight: "600",
|
||||
labelMarginBottom: "8px",
|
||||
...templateComp.style,
|
||||
},
|
||||
} as ComponentData;
|
||||
} else {
|
||||
// 위젯 컴포넌트
|
||||
const widgetType = templateComp.widgetType || "text";
|
||||
|
|
@ -2715,8 +2766,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
onDragStart={(e) => startComponentDrag(component, e)}
|
||||
onDragEnd={endDrag}
|
||||
>
|
||||
{/* 컨테이너 및 그룹의 자식 컴포넌트들 렌더링 */}
|
||||
{(component.type === "group" || component.type === "container") &&
|
||||
{/* 컨테이너, 그룹, 영역의 자식 컴포넌트들 렌더링 */}
|
||||
{(component.type === "group" || component.type === "container" || component.type === "area") &&
|
||||
layout.components
|
||||
.filter((child) => child.parentId === component.id)
|
||||
.map((child) => {
|
||||
|
|
|
|||
|
|
@ -6,13 +6,27 @@ import { Input } from "@/components/ui/input";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette } from "lucide-react";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette, RotateCcw, Trash } from "lucide-react";
|
||||
import { ScreenDefinition } from "@/types/screen";
|
||||
import { screenApi } from "@/lib/api/screen";
|
||||
import CreateScreenModal from "./CreateScreenModal";
|
||||
|
|
@ -24,8 +38,16 @@ interface ScreenListProps {
|
|||
onDesignScreen: (screen: ScreenDefinition) => void;
|
||||
}
|
||||
|
||||
type DeletedScreenDefinition = ScreenDefinition & {
|
||||
deletedDate?: Date;
|
||||
deletedBy?: string;
|
||||
deleteReason?: string;
|
||||
};
|
||||
|
||||
export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScreen }: ScreenListProps) {
|
||||
const [activeTab, setActiveTab] = useState("active");
|
||||
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
|
||||
const [deletedScreens, setDeletedScreens] = useState<DeletedScreenDefinition[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
|
@ -34,20 +56,56 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
const [isCopyOpen, setIsCopyOpen] = useState(false);
|
||||
const [screenToCopy, setScreenToCopy] = useState<ScreenDefinition | null>(null);
|
||||
|
||||
// 삭제 관련 상태
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [screenToDelete, setScreenToDelete] = useState<ScreenDefinition | null>(null);
|
||||
const [deleteReason, setDeleteReason] = useState("");
|
||||
const [dependencies, setDependencies] = useState<
|
||||
Array<{
|
||||
screenId: number;
|
||||
screenName: string;
|
||||
screenCode: string;
|
||||
componentId: string;
|
||||
componentType: string;
|
||||
referenceType: string;
|
||||
}>
|
||||
>([]);
|
||||
const [showDependencyWarning, setShowDependencyWarning] = useState(false);
|
||||
const [checkingDependencies, setCheckingDependencies] = useState(false);
|
||||
|
||||
// 영구 삭제 관련 상태
|
||||
const [permanentDeleteDialogOpen, setPermanentDeleteDialogOpen] = useState(false);
|
||||
const [screenToPermanentDelete, setScreenToPermanentDelete] = useState<DeletedScreenDefinition | null>(null);
|
||||
|
||||
// 일괄삭제 관련 상태
|
||||
const [selectedScreenIds, setSelectedScreenIds] = useState<number[]>([]);
|
||||
const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
|
||||
const [bulkDeleting, setBulkDeleting] = useState(false);
|
||||
|
||||
// 화면 목록 로드 (실제 API)
|
||||
useEffect(() => {
|
||||
let abort = false;
|
||||
const load = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const resp = await screenApi.getScreens({ page: currentPage, size: 20, searchTerm });
|
||||
if (abort) return;
|
||||
// 응답 표준: { success, data, total }
|
||||
setScreens(resp.data || []);
|
||||
setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
|
||||
if (activeTab === "active") {
|
||||
const resp = await screenApi.getScreens({ page: currentPage, size: 20, searchTerm });
|
||||
if (abort) return;
|
||||
setScreens(resp.data || []);
|
||||
setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
|
||||
} else if (activeTab === "trash") {
|
||||
const resp = await screenApi.getDeletedScreens({ page: currentPage, size: 20 });
|
||||
if (abort) return;
|
||||
setDeletedScreens(resp.data || []);
|
||||
setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("화면 목록 조회 실패", e);
|
||||
setScreens([]);
|
||||
if (activeTab === "active") {
|
||||
setScreens([]);
|
||||
} else {
|
||||
setDeletedScreens([]);
|
||||
}
|
||||
setTotalPages(1);
|
||||
} finally {
|
||||
if (!abort) setLoading(false);
|
||||
|
|
@ -57,7 +115,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
return () => {
|
||||
abort = true;
|
||||
};
|
||||
}, [currentPage, searchTerm]);
|
||||
}, [currentPage, searchTerm, activeTab]);
|
||||
|
||||
const filteredScreens = screens; // 서버 필터 기준 사용
|
||||
|
||||
|
|
@ -84,10 +142,151 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
console.log("편집:", screen);
|
||||
};
|
||||
|
||||
const handleDelete = (screen: ScreenDefinition) => {
|
||||
if (confirm(`"${screen.screenName}" 화면을 삭제하시겠습니까?`)) {
|
||||
// 삭제 API 호출
|
||||
console.log("삭제:", screen);
|
||||
const handleDelete = async (screen: ScreenDefinition) => {
|
||||
setScreenToDelete(screen);
|
||||
setCheckingDependencies(true);
|
||||
|
||||
try {
|
||||
// 의존성 체크
|
||||
const dependencyResult = await screenApi.checkScreenDependencies(screen.screenId);
|
||||
|
||||
if (dependencyResult.hasDependencies) {
|
||||
setDependencies(dependencyResult.dependencies);
|
||||
setShowDependencyWarning(true);
|
||||
} else {
|
||||
setDeleteDialogOpen(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("의존성 체크 실패:", error);
|
||||
// 의존성 체크 실패 시에도 삭제 다이얼로그는 열어줌
|
||||
setDeleteDialogOpen(true);
|
||||
} finally {
|
||||
setCheckingDependencies(false);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = async (force: boolean = false) => {
|
||||
if (!screenToDelete) return;
|
||||
|
||||
try {
|
||||
await screenApi.deleteScreen(screenToDelete.screenId, deleteReason, force);
|
||||
setScreens((prev) => prev.filter((s) => s.screenId !== screenToDelete.screenId));
|
||||
setDeleteDialogOpen(false);
|
||||
setShowDependencyWarning(false);
|
||||
setScreenToDelete(null);
|
||||
setDeleteReason("");
|
||||
setDependencies([]);
|
||||
} catch (error: any) {
|
||||
console.error("화면 삭제 실패:", error);
|
||||
|
||||
// 의존성 오류인 경우 경고창 표시
|
||||
if (error.response?.status === 409 && error.response?.data?.code === "SCREEN_HAS_DEPENDENCIES") {
|
||||
setDependencies(error.response.data.dependencies || []);
|
||||
setShowDependencyWarning(true);
|
||||
setDeleteDialogOpen(false);
|
||||
} else {
|
||||
alert("화면 삭제에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
setDeleteDialogOpen(false);
|
||||
setShowDependencyWarning(false);
|
||||
setScreenToDelete(null);
|
||||
setDeleteReason("");
|
||||
setDependencies([]);
|
||||
};
|
||||
|
||||
const handleRestore = async (screen: DeletedScreenDefinition) => {
|
||||
if (!confirm(`"${screen.screenName}" 화면을 복원하시겠습니까?`)) return;
|
||||
|
||||
try {
|
||||
await screenApi.restoreScreen(screen.screenId);
|
||||
setDeletedScreens((prev) => prev.filter((s) => s.screenId !== screen.screenId));
|
||||
// 활성 탭으로 이동하여 복원된 화면 확인
|
||||
setActiveTab("active");
|
||||
reloadScreens();
|
||||
} catch (error) {
|
||||
console.error("화면 복원 실패:", error);
|
||||
alert("화면 복원에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePermanentDelete = (screen: DeletedScreenDefinition) => {
|
||||
setScreenToPermanentDelete(screen);
|
||||
setPermanentDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const confirmPermanentDelete = async () => {
|
||||
if (!screenToPermanentDelete) return;
|
||||
|
||||
try {
|
||||
await screenApi.permanentDeleteScreen(screenToPermanentDelete.screenId);
|
||||
setDeletedScreens((prev) => prev.filter((s) => s.screenId !== screenToPermanentDelete.screenId));
|
||||
setPermanentDeleteDialogOpen(false);
|
||||
setScreenToPermanentDelete(null);
|
||||
} catch (error) {
|
||||
console.error("화면 영구 삭제 실패:", error);
|
||||
alert("화면 영구 삭제에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 체크박스 선택 처리
|
||||
const handleScreenCheck = (screenId: number, checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedScreenIds((prev) => [...prev, screenId]);
|
||||
} else {
|
||||
setSelectedScreenIds((prev) => prev.filter((id) => id !== screenId));
|
||||
}
|
||||
};
|
||||
|
||||
// 전체 선택/해제
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedScreenIds(deletedScreens.map((screen) => screen.screenId));
|
||||
} else {
|
||||
setSelectedScreenIds([]);
|
||||
}
|
||||
};
|
||||
|
||||
// 일괄삭제 실행
|
||||
const handleBulkDelete = () => {
|
||||
if (selectedScreenIds.length === 0) {
|
||||
alert("삭제할 화면을 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
setBulkDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const confirmBulkDelete = async () => {
|
||||
if (selectedScreenIds.length === 0) return;
|
||||
|
||||
try {
|
||||
setBulkDeleting(true);
|
||||
const result = await screenApi.bulkPermanentDeleteScreens(selectedScreenIds);
|
||||
|
||||
// 삭제된 화면들을 목록에서 제거
|
||||
setDeletedScreens((prev) => prev.filter((screen) => !selectedScreenIds.includes(screen.screenId)));
|
||||
|
||||
setSelectedScreenIds([]);
|
||||
setBulkDeleteDialogOpen(false);
|
||||
|
||||
// 결과 메시지 표시
|
||||
let message = `${result.deletedCount}개 화면이 영구 삭제되었습니다.`;
|
||||
if (result.skippedCount > 0) {
|
||||
message += `\n${result.skippedCount}개 화면은 삭제되지 않았습니다.`;
|
||||
}
|
||||
if (result.errors.length > 0) {
|
||||
message += `\n오류 발생: ${result.errors.map((e) => `화면 ${e.screenId}: ${e.error}`).join(", ")}`;
|
||||
}
|
||||
|
||||
alert(message);
|
||||
} catch (error) {
|
||||
console.error("일괄 삭제 실패:", error);
|
||||
alert("일괄 삭제에 실패했습니다.");
|
||||
} finally {
|
||||
setBulkDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -126,107 +325,232 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-80 pl-10"
|
||||
disabled={activeTab === "trash"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsCreateOpen(true)}>
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => setIsCreateOpen(true)}
|
||||
disabled={activeTab === "trash"}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />새 화면 생성
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 화면 목록 테이블 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>화면 목록 ({screens.length})</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>화면명</TableHead>
|
||||
<TableHead>화면 코드</TableHead>
|
||||
<TableHead>테이블명</TableHead>
|
||||
<TableHead>상태</TableHead>
|
||||
<TableHead>생성일</TableHead>
|
||||
<TableHead>작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{screens.map((screen) => (
|
||||
<TableRow
|
||||
key={screen.screenId}
|
||||
className={`cursor-pointer hover:bg-gray-50 ${
|
||||
selectedScreen?.screenId === screen.screenId ? "border-blue-200 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => handleScreenSelect(screen)}
|
||||
>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{screen.screenName}</div>
|
||||
{screen.description && <div className="mt-1 text-sm text-gray-500">{screen.description}</div>}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{screen.screenCode}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-sm text-gray-600">{screen.tableName}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={screen.isActive === "Y" ? "default" : "secondary"}
|
||||
className={screen.isActive === "Y" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
|
||||
>
|
||||
{screen.isActive === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-gray-600">{screen.createdDate.toLocaleDateString()}</div>
|
||||
<div className="text-xs text-gray-400">{screen.createdBy}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<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={() => onDesignScreen(screen)}>
|
||||
<Palette className="mr-2 h-4 w-4" />
|
||||
화면 설계
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleView(screen)}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
미리보기
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEdit(screen)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
편집
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(screen)}>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(screen)} className="text-red-600">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{/* 탭 구조 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="active">활성 화면</TabsTrigger>
|
||||
<TabsTrigger value="trash">휴지통</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{filteredScreens.length === 0 && <div className="py-8 text-center text-gray-500">검색 결과가 없습니다.</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* 활성 화면 탭 */}
|
||||
<TabsContent value="active">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>화면 목록 ({screens.length})</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>화면명</TableHead>
|
||||
<TableHead>화면 코드</TableHead>
|
||||
<TableHead>테이블명</TableHead>
|
||||
<TableHead>상태</TableHead>
|
||||
<TableHead>생성일</TableHead>
|
||||
<TableHead>작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{screens.map((screen) => (
|
||||
<TableRow
|
||||
key={screen.screenId}
|
||||
className={`cursor-pointer hover:bg-gray-50 ${
|
||||
selectedScreen?.screenId === screen.screenId ? "border-blue-200 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => handleScreenSelect(screen)}
|
||||
>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{screen.screenName}</div>
|
||||
{screen.description && <div className="mt-1 text-sm text-gray-500">{screen.description}</div>}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{screen.screenCode}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-sm text-gray-600">{screen.tableName}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={screen.isActive === "Y" ? "default" : "secondary"}
|
||||
className={
|
||||
screen.isActive === "Y" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
||||
}
|
||||
>
|
||||
{screen.isActive === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-gray-600">{screen.createdDate.toLocaleDateString()}</div>
|
||||
<div className="text-xs text-gray-400">{screen.createdBy}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<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={() => onDesignScreen(screen)}>
|
||||
<Palette className="mr-2 h-4 w-4" />
|
||||
화면 설계
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleView(screen)}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
미리보기
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEdit(screen)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
편집
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(screen)}>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
복사
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(screen)}
|
||||
className="text-red-600"
|
||||
disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
{checkingDependencies && screenToDelete?.screenId === screen.screenId
|
||||
? "확인 중..."
|
||||
: "삭제"}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{filteredScreens.length === 0 && (
|
||||
<div className="py-8 text-center text-gray-500">검색 결과가 없습니다.</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 휴지통 탭 */}
|
||||
<TabsContent value="trash">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>휴지통 ({deletedScreens.length})</span>
|
||||
{selectedScreenIds.length > 0 && (
|
||||
<Button variant="destructive" size="sm" onClick={handleBulkDelete} disabled={bulkDeleting}>
|
||||
{bulkDeleting ? "삭제 중..." : `선택된 ${selectedScreenIds.length}개 영구삭제`}
|
||||
</Button>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead>화면명</TableHead>
|
||||
<TableHead>화면 코드</TableHead>
|
||||
<TableHead>테이블명</TableHead>
|
||||
<TableHead>삭제일</TableHead>
|
||||
<TableHead>삭제자</TableHead>
|
||||
<TableHead>삭제 사유</TableHead>
|
||||
<TableHead>작업</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{deletedScreens.map((screen) => (
|
||||
<TableRow key={screen.screenId} className="hover:bg-gray-50">
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedScreenIds.includes(screen.screenId)}
|
||||
onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{screen.screenName}</div>
|
||||
{screen.description && <div className="mt-1 text-sm text-gray-500">{screen.description}</div>}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{screen.screenCode}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-sm text-gray-600">{screen.tableName}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-gray-600">{screen.deletedDate?.toLocaleDateString()}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-gray-600">{screen.deletedBy}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="max-w-32 truncate text-sm text-gray-600" title={screen.deleteReason}>
|
||||
{screen.deleteReason || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRestore(screen)}
|
||||
className="text-green-600 hover:text-green-700"
|
||||
>
|
||||
<RotateCcw className="mr-1 h-3 w-3" />
|
||||
복원
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePermanentDelete(screen)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash className="mr-1 h-3 w-3" />
|
||||
영구삭제
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{deletedScreens.length === 0 && (
|
||||
<div className="py-8 text-center text-gray-500">휴지통이 비어있습니다.</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{totalPages > 1 && (
|
||||
|
|
@ -269,6 +593,160 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
sourceScreen={screenToCopy}
|
||||
onCopySuccess={handleCopySuccess}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>화면 삭제 확인</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
"{screenToDelete?.screenName}" 화면을 휴지통으로 이동하시겠습니까?
|
||||
<br />
|
||||
휴지통에서 언제든지 복원할 수 있습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="deleteReason">삭제 사유 (선택사항)</Label>
|
||||
<Textarea
|
||||
id="deleteReason"
|
||||
placeholder="삭제 사유를 입력하세요..."
|
||||
value={deleteReason}
|
||||
onChange={(e) => setDeleteReason(e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={handleCancelDelete}>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => confirmDelete(false)} className="bg-red-600 hover:bg-red-700">
|
||||
휴지통으로 이동
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 의존성 경고 다이얼로그 */}
|
||||
<AlertDialog open={showDependencyWarning} onOpenChange={setShowDependencyWarning}>
|
||||
<AlertDialogContent className="max-w-2xl">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-orange-600">⚠️ 화면 삭제 경고</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
"{screenToDelete?.screenName}" 화면이 다른 화면에서 사용 중입니다.
|
||||
<br />이 화면을 삭제하면 아래 화면들의 버튼 기능이 작동하지 않을 수 있습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
|
||||
<div className="max-h-60 overflow-y-auto">
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-medium text-gray-900">사용 중인 화면 목록:</h4>
|
||||
{dependencies.map((dep, index) => (
|
||||
<div key={index} className="rounded-lg border border-orange-200 bg-orange-50 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{dep.screenName}</div>
|
||||
<div className="text-sm text-gray-600">화면 코드: {dep.screenCode}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-medium text-orange-600">
|
||||
{dep.referenceType === "popup" && "팝업 버튼"}
|
||||
{dep.referenceType === "navigate" && "이동 버튼"}
|
||||
{dep.referenceType === "url" && "URL 링크"}
|
||||
{dep.referenceType === "menu_assignment" && "메뉴 할당"}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{dep.referenceType === "menu_assignment" ? "메뉴" : "컴포넌트"}: {dep.componentId}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="forceDeleteReason">삭제 사유 (필수)</Label>
|
||||
<Textarea
|
||||
id="forceDeleteReason"
|
||||
placeholder="강제 삭제 사유를 입력하세요..."
|
||||
value={deleteReason}
|
||||
onChange={(e) => setDeleteReason(e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={handleCancelDelete}>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => confirmDelete(true)}
|
||||
className="bg-orange-600 hover:bg-orange-700"
|
||||
disabled={!deleteReason.trim()}
|
||||
>
|
||||
강제 삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 영구 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={permanentDeleteDialogOpen} onOpenChange={setPermanentDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>영구 삭제 확인</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-red-600">
|
||||
⚠️ "{screenToPermanentDelete?.screenName}" 화면을 영구적으로 삭제하시겠습니까?
|
||||
<br />
|
||||
<strong>이 작업은 되돌릴 수 없습니다!</strong>
|
||||
<br />
|
||||
모든 레이아웃 정보와 관련 데이터가 완전히 삭제됩니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
onClick={() => {
|
||||
setPermanentDeleteDialogOpen(false);
|
||||
setScreenToPermanentDelete(null);
|
||||
}}
|
||||
>
|
||||
취소
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmPermanentDelete} className="bg-red-600 hover:bg-red-700">
|
||||
영구 삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 일괄삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>일괄 영구 삭제 확인</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-red-600">
|
||||
⚠️ 선택된 {selectedScreenIds.length}개 화면을 영구적으로 삭제하시겠습니까?
|
||||
<br />
|
||||
<strong>이 작업은 되돌릴 수 없습니다!</strong>
|
||||
<br />
|
||||
모든 레이아웃 정보와 관련 데이터가 완전히 삭제됩니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
onClick={() => {
|
||||
setBulkDeleteDialogOpen(false);
|
||||
}}
|
||||
disabled={bulkDeleting}
|
||||
>
|
||||
취소
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmBulkDelete}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
disabled={bulkDeleting}
|
||||
>
|
||||
{bulkDeleting ? "삭제 중..." : `${selectedScreenIds.length}개 영구 삭제`}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1520,11 +1520,13 @@ export const DataTableConfigPanel: React.FC<DataTableConfigPanelProps> = ({
|
|||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium">테이블 컬럼 설정</h3>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium">테이블 컬럼 설정</h3>
|
||||
<Badge variant="secondary">{component.columns.length}개</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* 파일 컬럼 추가 버튼 */}
|
||||
<Button size="sm" variant="outline" onClick={addVirtualFileColumn} className="h-8 text-xs">
|
||||
<Plus className="h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,16 @@ import { Separator } from "@/components/ui/separator";
|
|||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Settings, Move, Type, Trash2, Copy, Group, Ungroup } from "lucide-react";
|
||||
import { ComponentData, WebType, WidgetComponent, GroupComponent, DataTableComponent, TableInfo } from "@/types/screen";
|
||||
import {
|
||||
ComponentData,
|
||||
WebType,
|
||||
WidgetComponent,
|
||||
GroupComponent,
|
||||
DataTableComponent,
|
||||
AreaComponent,
|
||||
AreaLayoutType,
|
||||
TableInfo,
|
||||
} from "@/types/screen";
|
||||
import DataTableConfigPanel from "./DataTableConfigPanel";
|
||||
|
||||
interface PropertiesPanelProps {
|
||||
|
|
@ -64,7 +73,13 @@ export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
|
|||
// 입력 필드들의 로컬 상태 (실시간 타이핑 반영용)
|
||||
const [localInputs, setLocalInputs] = useState({
|
||||
placeholder: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).placeholder : "") || "",
|
||||
title: (selectedComponent?.type === "group" ? (selectedComponent as GroupComponent).title : "") || "",
|
||||
title:
|
||||
(selectedComponent?.type === "group"
|
||||
? (selectedComponent as GroupComponent).title
|
||||
: selectedComponent?.type === "area"
|
||||
? (selectedComponent as AreaComponent).title
|
||||
: "") || "",
|
||||
description: (selectedComponent?.type === "area" ? (selectedComponent as AreaComponent).description : "") || "",
|
||||
positionX: selectedComponent?.position.x?.toString() || "0",
|
||||
positionY: selectedComponent?.position.y?.toString() || "0",
|
||||
positionZ: selectedComponent?.position.z?.toString() || "1",
|
||||
|
|
@ -90,13 +105,15 @@ export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
|
|||
if (selectedComponent) {
|
||||
const widget = selectedComponent.type === "widget" ? (selectedComponent as WidgetComponent) : null;
|
||||
const group = selectedComponent.type === "group" ? (selectedComponent as GroupComponent) : null;
|
||||
const area = selectedComponent.type === "area" ? (selectedComponent as AreaComponent) : null;
|
||||
|
||||
console.log("🔄 PropertiesPanel: 컴포넌트 변경 감지", {
|
||||
componentId: selectedComponent.id,
|
||||
componentType: selectedComponent.type,
|
||||
currentValues: {
|
||||
placeholder: widget?.placeholder,
|
||||
title: group?.title,
|
||||
title: group?.title || area?.title,
|
||||
description: area?.description,
|
||||
positionX: selectedComponent.position.x,
|
||||
labelText: selectedComponent.style?.labelText || selectedComponent.label,
|
||||
},
|
||||
|
|
@ -104,7 +121,8 @@ export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
|
|||
|
||||
setLocalInputs({
|
||||
placeholder: widget?.placeholder || "",
|
||||
title: group?.title || "",
|
||||
title: group?.title || area?.title || "",
|
||||
description: area?.description || "",
|
||||
positionX: selectedComponent.position.x?.toString() || "0",
|
||||
positionY: selectedComponent.position.y?.toString() || "0",
|
||||
positionZ: selectedComponent.position.z?.toString() || "1",
|
||||
|
|
@ -644,6 +662,190 @@ export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedComponent.type === "area" && (
|
||||
<>
|
||||
<Separator />
|
||||
|
||||
{/* 영역 설정 */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Settings className="h-4 w-4 text-gray-600" />
|
||||
<h4 className="font-medium text-gray-900">영역 설정</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="areaTitle" className="text-sm font-medium">
|
||||
영역 제목
|
||||
</Label>
|
||||
<Input
|
||||
id="areaTitle"
|
||||
value={localInputs.title}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
setLocalInputs((prev) => ({ ...prev, title: newValue }));
|
||||
onUpdateProperty("title", newValue);
|
||||
}}
|
||||
placeholder="영역 제목"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="areaDescription" className="text-sm font-medium">
|
||||
영역 설명
|
||||
</Label>
|
||||
<Input
|
||||
id="areaDescription"
|
||||
value={localInputs.description}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
setLocalInputs((prev) => ({ ...prev, description: newValue }));
|
||||
onUpdateProperty("description", newValue);
|
||||
}}
|
||||
placeholder="영역 설명 (선택사항)"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="layoutType" className="text-sm font-medium">
|
||||
레이아웃 타입
|
||||
</Label>
|
||||
<Select
|
||||
value={(selectedComponent as AreaComponent).layoutType}
|
||||
onValueChange={(value: AreaLayoutType) => onUpdateProperty("layoutType", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="box">기본 박스</SelectItem>
|
||||
<SelectItem value="card">카드</SelectItem>
|
||||
<SelectItem value="panel">패널 (헤더 포함)</SelectItem>
|
||||
<SelectItem value="section">섹션</SelectItem>
|
||||
<SelectItem value="grid">그리드</SelectItem>
|
||||
<SelectItem value="flex-row">가로 플렉스</SelectItem>
|
||||
<SelectItem value="flex-column">세로 플렉스</SelectItem>
|
||||
<SelectItem value="sidebar">사이드바</SelectItem>
|
||||
<SelectItem value="header-content">헤더-컨텐츠</SelectItem>
|
||||
<SelectItem value="tabs">탭</SelectItem>
|
||||
<SelectItem value="accordion">아코디언</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 레이아웃별 상세 설정 */}
|
||||
{(selectedComponent as AreaComponent).layoutType === "grid" && (
|
||||
<div className="space-y-2 rounded-md border p-3">
|
||||
<h5 className="text-sm font-medium">그리드 설정</h5>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-xs">컬럼 수</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="12"
|
||||
value={(selectedComponent as AreaComponent).layoutConfig?.gridColumns || 3}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
onUpdateProperty("layoutConfig.gridColumns", value);
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">간격 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
value={(selectedComponent as AreaComponent).layoutConfig?.gridGap || 16}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
onUpdateProperty("layoutConfig.gridGap", value);
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{((selectedComponent as AreaComponent).layoutType === "flex-row" ||
|
||||
(selectedComponent as AreaComponent).layoutType === "flex-column") && (
|
||||
<div className="space-y-2 rounded-md border p-3">
|
||||
<h5 className="text-sm font-medium">플렉스 설정</h5>
|
||||
<div>
|
||||
<Label className="text-xs">정렬 방식</Label>
|
||||
<Select
|
||||
value={(selectedComponent as AreaComponent).layoutConfig?.justifyContent || "flex-start"}
|
||||
onValueChange={(value) => onUpdateProperty("layoutConfig.justifyContent", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="flex-start">시작</SelectItem>
|
||||
<SelectItem value="flex-end">끝</SelectItem>
|
||||
<SelectItem value="center">가운데</SelectItem>
|
||||
<SelectItem value="space-between">양끝 정렬</SelectItem>
|
||||
<SelectItem value="space-around">균등 분배</SelectItem>
|
||||
<SelectItem value="space-evenly">균등 간격</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">간격 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
value={(selectedComponent as AreaComponent).layoutConfig?.gap || 16}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
onUpdateProperty("layoutConfig.gap", value);
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(selectedComponent as AreaComponent).layoutType === "sidebar" && (
|
||||
<div className="space-y-2 rounded-md border p-3">
|
||||
<h5 className="text-sm font-medium">사이드바 설정</h5>
|
||||
<div>
|
||||
<Label className="text-xs">사이드바 위치</Label>
|
||||
<Select
|
||||
value={(selectedComponent as AreaComponent).layoutConfig?.sidebarPosition || "left"}
|
||||
onValueChange={(value) => onUpdateProperty("layoutConfig.sidebarPosition", value)}
|
||||
>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="left">왼쪽</SelectItem>
|
||||
<SelectItem value="right">오른쪽</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">사이드바 너비 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="100"
|
||||
value={(selectedComponent as AreaComponent).layoutConfig?.sidebarWidth || 200}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
onUpdateProperty("layoutConfig.sidebarWidth", value);
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -23,6 +23,14 @@ import {
|
|||
MousePointer,
|
||||
Settings,
|
||||
Upload,
|
||||
Square,
|
||||
CreditCard,
|
||||
Layout,
|
||||
Columns,
|
||||
Rows,
|
||||
SidebarOpen,
|
||||
Folder,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
|
||||
// 템플릿 컴포넌트 타입 정의
|
||||
|
|
@ -30,11 +38,11 @@ export interface TemplateComponent {
|
|||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
category: "table" | "button" | "form" | "layout" | "chart" | "status" | "file";
|
||||
category: "table" | "button" | "form" | "layout" | "chart" | "status" | "file" | "area";
|
||||
icon: React.ReactNode;
|
||||
defaultSize: { width: number; height: number };
|
||||
components: Array<{
|
||||
type: "widget" | "container" | "datatable" | "file";
|
||||
type: "widget" | "container" | "datatable" | "file" | "area";
|
||||
widgetType?: string;
|
||||
label: string;
|
||||
placeholder?: string;
|
||||
|
|
@ -43,6 +51,13 @@ export interface TemplateComponent {
|
|||
style?: any;
|
||||
required?: boolean;
|
||||
readonly?: boolean;
|
||||
parentId?: string;
|
||||
title?: string;
|
||||
// 영역 컴포넌트 전용 속성
|
||||
layoutType?: string;
|
||||
description?: string;
|
||||
layoutConfig?: any;
|
||||
areaStyle?: any;
|
||||
}>;
|
||||
}
|
||||
|
||||
|
|
@ -123,6 +138,303 @@ const templateComponents: TemplateComponent[] = [
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
// === 영역 템플릿들 ===
|
||||
|
||||
// 기본 박스 영역
|
||||
{
|
||||
id: "area-box",
|
||||
name: "기본 박스 영역",
|
||||
description: "컴포넌트들을 그룹화할 수 있는 기본 박스 형태의 영역",
|
||||
category: "area",
|
||||
icon: <Square className="h-4 w-4" />,
|
||||
defaultSize: { width: 400, height: 300 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "박스 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 400, height: 300 },
|
||||
layoutType: "box",
|
||||
title: "박스 영역",
|
||||
description: "컴포넌트들을 그룹화할 수 있는 기본 박스",
|
||||
layoutConfig: {},
|
||||
areaStyle: {
|
||||
backgroundColor: "#f9fafb",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: "#d1d5db",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
margin: 0,
|
||||
shadow: "none",
|
||||
},
|
||||
style: {
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "#f9fafb",
|
||||
padding: "16px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 카드 영역
|
||||
{
|
||||
id: "area-card",
|
||||
name: "카드 영역",
|
||||
description: "그림자와 둥근 모서리가 있는 카드 형태의 영역",
|
||||
category: "area",
|
||||
icon: <CreditCard className="h-4 w-4" />,
|
||||
defaultSize: { width: 400, height: 300 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "카드 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 400, height: 300 },
|
||||
layoutType: "card",
|
||||
title: "카드 영역",
|
||||
description: "그림자와 둥근 모서리가 있는 카드 형태",
|
||||
layoutConfig: {},
|
||||
areaStyle: {
|
||||
backgroundColor: "#ffffff",
|
||||
borderWidth: 0,
|
||||
borderStyle: "none",
|
||||
borderColor: "#e5e7eb",
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
margin: 0,
|
||||
shadow: "md",
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
padding: "20px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 패널 영역 (헤더 포함)
|
||||
{
|
||||
id: "area-panel",
|
||||
name: "패널 영역",
|
||||
description: "제목 헤더가 포함된 패널 형태의 영역",
|
||||
category: "area",
|
||||
icon: <Layout className="h-4 w-4" />,
|
||||
defaultSize: { width: 500, height: 400 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "패널 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 500, height: 400 },
|
||||
layoutType: "panel",
|
||||
title: "패널 제목",
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
headerBackgroundColor: "#f3f4f6",
|
||||
headerHeight: 48,
|
||||
headerPadding: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 그리드 영역
|
||||
{
|
||||
id: "area-grid",
|
||||
name: "그리드 영역",
|
||||
description: "내부 컴포넌트들을 격자 형태로 배치하는 영역",
|
||||
category: "area",
|
||||
icon: <Grid3x3 className="h-4 w-4" />,
|
||||
defaultSize: { width: 600, height: 400 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "그리드 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 600, height: 400 },
|
||||
layoutType: "grid",
|
||||
title: "그리드 영역",
|
||||
description: "격자 형태로 컴포넌트 배치",
|
||||
layoutConfig: {
|
||||
gridColumns: 3,
|
||||
gridRows: 2,
|
||||
gridGap: 16,
|
||||
},
|
||||
areaStyle: {
|
||||
backgroundColor: "#ffffff",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: "#d1d5db",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
margin: 0,
|
||||
shadow: "none",
|
||||
showGridLines: true,
|
||||
gridLineColor: "#e5e7eb",
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: "8px",
|
||||
padding: "16px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 가로 플렉스 영역
|
||||
{
|
||||
id: "area-flex-row",
|
||||
name: "가로 배치 영역",
|
||||
description: "내부 컴포넌트들을 가로로 나란히 배치하는 영역",
|
||||
category: "area",
|
||||
icon: <Columns className="h-4 w-4" />,
|
||||
defaultSize: { width: 600, height: 200 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "가로 배치 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 600, height: 200 },
|
||||
layoutType: "flex-row",
|
||||
layoutConfig: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: 16,
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#f8fafc",
|
||||
border: "1px solid #cbd5e1",
|
||||
borderRadius: "8px",
|
||||
padding: "16px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 세로 플렉스 영역
|
||||
{
|
||||
id: "area-flex-column",
|
||||
name: "세로 배치 영역",
|
||||
description: "내부 컴포넌트들을 세로로 순차 배치하는 영역",
|
||||
category: "area",
|
||||
icon: <Rows className="h-4 w-4" />,
|
||||
defaultSize: { width: 300, height: 500 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "세로 배치 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 300, height: 500 },
|
||||
layoutType: "flex-column",
|
||||
layoutConfig: {
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch",
|
||||
gap: 12,
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#f1f5f9",
|
||||
border: "1px solid #94a3b8",
|
||||
borderRadius: "8px",
|
||||
padding: "16px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 사이드바 영역
|
||||
{
|
||||
id: "area-sidebar",
|
||||
name: "사이드바 영역",
|
||||
description: "사이드바와 메인 컨텐츠 영역으로 구분된 레이아웃",
|
||||
category: "area",
|
||||
icon: <SidebarOpen className="h-4 w-4" />,
|
||||
defaultSize: { width: 700, height: 400 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "사이드바 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 700, height: 400 },
|
||||
layoutType: "sidebar",
|
||||
layoutConfig: {
|
||||
sidebarPosition: "left",
|
||||
sidebarWidth: 200,
|
||||
collapsible: true,
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
border: "1px solid #e2e8f0",
|
||||
borderRadius: "8px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 탭 영역
|
||||
{
|
||||
id: "area-tabs",
|
||||
name: "탭 영역",
|
||||
description: "탭으로 구분된 여러 컨텐츠 영역을 제공하는 레이아웃",
|
||||
category: "area",
|
||||
icon: <Folder className="h-4 w-4" />,
|
||||
defaultSize: { width: 600, height: 400 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "탭 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 600, height: 400 },
|
||||
layoutType: "tabs",
|
||||
layoutConfig: {
|
||||
tabPosition: "top",
|
||||
defaultActiveTab: "tab1",
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: "8px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 아코디언 영역
|
||||
{
|
||||
id: "area-accordion",
|
||||
name: "아코디언 영역",
|
||||
description: "접고 펼칠 수 있는 섹션들로 구성된 영역",
|
||||
category: "area",
|
||||
icon: <ChevronDown className="h-4 w-4" />,
|
||||
defaultSize: { width: 500, height: 600 },
|
||||
components: [
|
||||
{
|
||||
type: "area",
|
||||
label: "아코디언 영역",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 500, height: 600 },
|
||||
layoutType: "accordion",
|
||||
layoutConfig: {
|
||||
allowMultiple: false,
|
||||
defaultExpanded: ["section1"],
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface TemplatesPanelProps {
|
||||
|
|
@ -135,6 +447,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
|
|||
|
||||
const categories = [
|
||||
{ id: "all", name: "전체", icon: <Grid3x3 className="h-4 w-4" /> },
|
||||
{ id: "area", name: "영역", icon: <Layout className="h-4 w-4" /> },
|
||||
{ id: "table", name: "테이블", icon: <Table className="h-4 w-4" /> },
|
||||
{ id: "button", name: "버튼", icon: <MousePointer className="h-4 w-4" /> },
|
||||
{ id: "file", name: "파일", icon: <Upload className="h-4 w-4" /> },
|
||||
|
|
|
|||
|
|
@ -170,3 +170,27 @@ export const getLinkedFiles = async (
|
|||
throw new Error("연결된 파일 조회에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 파일 미리보기 URL 생성
|
||||
*/
|
||||
export const getFilePreviewUrl = (fileId: string): string => {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "/api";
|
||||
return `${baseUrl}/files/preview/${fileId}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 파일 다운로드 URL 생성
|
||||
*/
|
||||
export const getFileDownloadUrl = (fileId: string): string => {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "/api";
|
||||
return `${baseUrl}/files/download/${fileId}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 직접 파일 경로 URL 생성 (정적 파일 서빙)
|
||||
*/
|
||||
export const getDirectFileUrl = (filePath: string): string => {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL?.replace("/api", "") || "";
|
||||
return `${baseUrl}${filePath}`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -64,9 +64,78 @@ export const screenApi = {
|
|||
return response.data.data;
|
||||
},
|
||||
|
||||
// 화면 삭제
|
||||
deleteScreen: async (screenId: number): Promise<void> => {
|
||||
await apiClient.delete(`/screen-management/screens/${screenId}`);
|
||||
// 화면 의존성 체크
|
||||
checkScreenDependencies: async (
|
||||
screenId: number,
|
||||
): Promise<{
|
||||
hasDependencies: boolean;
|
||||
dependencies: Array<{
|
||||
screenId: number;
|
||||
screenName: string;
|
||||
screenCode: string;
|
||||
componentId: string;
|
||||
componentType: string;
|
||||
referenceType: string;
|
||||
}>;
|
||||
}> => {
|
||||
const response = await apiClient.get(`/screen-management/screens/${screenId}/dependencies`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// 화면 삭제 (휴지통으로 이동)
|
||||
deleteScreen: async (screenId: number, deleteReason?: string, force?: boolean): Promise<void> => {
|
||||
await apiClient.delete(`/screen-management/screens/${screenId}`, {
|
||||
data: { deleteReason, force },
|
||||
});
|
||||
},
|
||||
|
||||
// 휴지통 화면 목록 조회
|
||||
getDeletedScreens: async (params: {
|
||||
page?: number;
|
||||
size?: number;
|
||||
}): Promise<
|
||||
PaginatedResponse<ScreenDefinition & { deletedDate?: Date; deletedBy?: string; deleteReason?: string }>
|
||||
> => {
|
||||
const response = await apiClient.get("/screen-management/screens/trash/list", { params });
|
||||
const raw = response.data || {};
|
||||
const items: any[] = (raw.data ?? raw.items ?? []) as any[];
|
||||
const mapped = items.map((it) => ({
|
||||
...it,
|
||||
createdDate: it.createdDate ? new Date(it.createdDate) : undefined,
|
||||
updatedDate: it.updatedDate ? new Date(it.updatedDate) : undefined,
|
||||
deletedDate: it.deletedDate ? new Date(it.deletedDate) : undefined,
|
||||
}));
|
||||
|
||||
const page = raw.page ?? params.page ?? 1;
|
||||
const size = raw.size ?? params.size ?? mapped.length;
|
||||
const total = raw.total ?? mapped.length;
|
||||
const totalPages = raw.totalPages ?? Math.max(1, Math.ceil(total / (size || 1)));
|
||||
|
||||
return { data: mapped, total, page, size, totalPages };
|
||||
},
|
||||
|
||||
// 휴지통 화면 일괄 영구 삭제
|
||||
bulkPermanentDeleteScreens: async (
|
||||
screenIds: number[],
|
||||
): Promise<{
|
||||
deletedCount: number;
|
||||
skippedCount: number;
|
||||
errors: Array<{ screenId: number; error: string }>;
|
||||
}> => {
|
||||
const response = await apiClient.delete("/screen-management/screens/trash/bulk", {
|
||||
data: { screenIds },
|
||||
});
|
||||
return response.data.result;
|
||||
},
|
||||
|
||||
// 화면 복원 (휴지통에서 복원)
|
||||
restoreScreen: async (screenId: number): Promise<void> => {
|
||||
await apiClient.post(`/screen-management/screens/${screenId}/restore`);
|
||||
},
|
||||
|
||||
// 화면 영구 삭제
|
||||
permanentDeleteScreen: async (screenId: number): Promise<void> => {
|
||||
await apiClient.delete(`/screen-management/screens/${screenId}/permanent`);
|
||||
},
|
||||
|
||||
// 화면 레이아웃 저장
|
||||
|
|
|
|||
|
|
@ -19,10 +19,13 @@ const nextConfig = {
|
|||
},
|
||||
|
||||
async rewrites() {
|
||||
// 개발 환경과 운영 환경에 따른 백엔드 URL 설정
|
||||
const backendUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "http://backend:8080";
|
||||
|
||||
return [
|
||||
{
|
||||
source: "/api/:path*",
|
||||
destination: "http://backend:8080/api/:path*",
|
||||
destination: `${backendUrl}/api/:path*`,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
|
@ -43,7 +46,8 @@ const nextConfig = {
|
|||
|
||||
// 환경 변수 (런타임에 읽기)
|
||||
env: {
|
||||
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || "http://39.117.244.52:8080/api",
|
||||
// 개발 환경에서는 Next.js rewrites를 통해 /api로 프록시
|
||||
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || "/api",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// 화면관리 시스템 타입 정의
|
||||
|
||||
// 기본 컴포넌트 타입
|
||||
export type ComponentType = "container" | "row" | "column" | "widget" | "group" | "datatable" | "file";
|
||||
export type ComponentType = "container" | "row" | "column" | "widget" | "group" | "datatable" | "file" | "area";
|
||||
|
||||
// 웹 타입 정의
|
||||
export type WebType =
|
||||
|
|
@ -208,6 +208,80 @@ export interface ColumnComponent extends BaseComponent {
|
|||
children?: string[]; // 자식 컴포넌트 ID 목록
|
||||
}
|
||||
|
||||
// 영역 레이아웃 타입
|
||||
export type AreaLayoutType =
|
||||
| "box" // 기본 박스
|
||||
| "card" // 카드 형태 (그림자 + 둥근 모서리)
|
||||
| "panel" // 패널 형태 (헤더 포함)
|
||||
| "section" // 섹션 형태 (제목 + 구분선)
|
||||
| "grid" // 그리드 레이아웃
|
||||
| "flex-row" // 가로 플렉스
|
||||
| "flex-column" // 세로 플렉스
|
||||
| "sidebar" // 사이드바 레이아웃
|
||||
| "header-content" // 헤더-컨텐츠 레이아웃
|
||||
| "tabs" // 탭 레이아웃
|
||||
| "accordion"; // 아코디언 레이아웃
|
||||
|
||||
// 영역 컴포넌트
|
||||
export interface AreaComponent extends BaseComponent {
|
||||
type: "area";
|
||||
layoutType: AreaLayoutType;
|
||||
title?: string;
|
||||
description?: string;
|
||||
|
||||
// 레이아웃별 설정
|
||||
layoutConfig?: {
|
||||
// 그리드 레이아웃 설정
|
||||
gridColumns?: number;
|
||||
gridRows?: number;
|
||||
gridGap?: number;
|
||||
|
||||
// 플렉스 레이아웃 설정
|
||||
flexDirection?: "row" | "column";
|
||||
flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
|
||||
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
|
||||
alignItems?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
|
||||
gap?: number;
|
||||
|
||||
// 탭 레이아웃 설정
|
||||
tabPosition?: "top" | "bottom" | "left" | "right";
|
||||
defaultActiveTab?: string;
|
||||
|
||||
// 사이드바 레이아웃 설정
|
||||
sidebarPosition?: "left" | "right";
|
||||
sidebarWidth?: number;
|
||||
collapsible?: boolean;
|
||||
|
||||
// 아코디언 설정
|
||||
allowMultiple?: boolean;
|
||||
defaultExpanded?: string[];
|
||||
};
|
||||
|
||||
// 스타일 설정
|
||||
areaStyle?: {
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
borderWidth?: number;
|
||||
borderStyle?: "solid" | "dashed" | "dotted" | "none";
|
||||
borderRadius?: number;
|
||||
padding?: number;
|
||||
margin?: number;
|
||||
shadow?: "none" | "sm" | "md" | "lg" | "xl";
|
||||
|
||||
// 헤더 스타일 (panel, section 타입용)
|
||||
headerBackgroundColor?: string;
|
||||
headerTextColor?: string;
|
||||
headerHeight?: number;
|
||||
headerPadding?: number;
|
||||
|
||||
// 그리드 라인 표시 (grid 타입용)
|
||||
showGridLines?: boolean;
|
||||
gridLineColor?: string;
|
||||
};
|
||||
|
||||
children?: string[]; // 자식 컴포넌트 ID 목록
|
||||
}
|
||||
|
||||
// 파일 첨부 컴포넌트
|
||||
export interface FileComponent extends BaseComponent {
|
||||
type: "file";
|
||||
|
|
@ -411,6 +485,7 @@ export type ComponentData =
|
|||
| GroupComponent
|
||||
| RowComponent
|
||||
| ColumnComponent
|
||||
| AreaComponent
|
||||
| WidgetComponent
|
||||
| DataTableComponent
|
||||
| FileComponent;
|
||||
|
|
|
|||
Loading…
Reference in New Issue