Compare commits
16 Commits
f183b4a727
...
d819a7c77e
| Author | SHA1 | Date |
|---|---|---|
leeheejin
|
d819a7c77e | |
 hyeonsu
|
26d27ac881 | |
dohyeons
|
c5499d2e18 | |
|
dohyeons
|
a8c1b4b5e5 | |
|
dohyeons
|
8e0ef82de7 | |
|
dohyeons
|
3bda194bf2 | |
|
dohyeons
|
a7123216f2 | |
|
dohyeons
|
9168844fab | |
|
dohyeons
|
02f67c2372 | |
|
dohyeons
|
9349867476 | |
|
dohyeons
|
8f676c0a6d | |
|
dohyeons
|
9e1a7c53e1 | |
|
dohyeons
|
337cc448d0 | |
|
dohyeons
|
ed9da3962a | |
|
dohyeons
|
3afcd3d9fb | |
|
dohyeons
|
18e2280623 |
|
|
@ -1,23 +1,25 @@
|
|||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { PostgreSQLService } from '../database/PostgreSQLService';
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { PostgreSQLService } from "../database/PostgreSQLService";
|
||||
import {
|
||||
Dashboard,
|
||||
DashboardElement,
|
||||
CreateDashboardRequest,
|
||||
UpdateDashboardRequest,
|
||||
DashboardListQuery
|
||||
} from '../types/dashboard';
|
||||
DashboardListQuery,
|
||||
} from "../types/dashboard";
|
||||
|
||||
/**
|
||||
* 대시보드 서비스 - Raw Query 방식
|
||||
* PostgreSQL 직접 연결을 통한 CRUD 작업
|
||||
*/
|
||||
export class DashboardService {
|
||||
|
||||
/**
|
||||
* 대시보드 생성
|
||||
*/
|
||||
static async createDashboard(data: CreateDashboardRequest, userId: string): Promise<Dashboard> {
|
||||
static async createDashboard(
|
||||
data: CreateDashboardRequest,
|
||||
userId: string
|
||||
): Promise<Dashboard> {
|
||||
const dashboardId = uuidv4();
|
||||
const now = new Date();
|
||||
|
||||
|
|
@ -25,12 +27,14 @@ export class DashboardService {
|
|||
// 트랜잭션으로 대시보드와 요소들을 함께 생성
|
||||
const result = await PostgreSQLService.transaction(async (client) => {
|
||||
// 1. 대시보드 메인 정보 저장
|
||||
await client.query(`
|
||||
await client.query(
|
||||
`
|
||||
INSERT INTO dashboards (
|
||||
id, title, description, is_public, created_by,
|
||||
created_at, updated_at, tags, category, view_count
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
|
||||
`, [
|
||||
created_at, updated_at, tags, category, view_count, settings
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
|
||||
`,
|
||||
[
|
||||
dashboardId,
|
||||
data.title,
|
||||
data.description || null,
|
||||
|
|
@ -40,8 +44,10 @@ export class DashboardService {
|
|||
now,
|
||||
JSON.stringify(data.tags || []),
|
||||
data.category || null,
|
||||
0
|
||||
]);
|
||||
0,
|
||||
JSON.stringify(data.settings || {}),
|
||||
]
|
||||
);
|
||||
|
||||
// 2. 대시보드 요소들 저장
|
||||
if (data.elements && data.elements.length > 0) {
|
||||
|
|
@ -49,14 +55,16 @@ export class DashboardService {
|
|||
const element = data.elements[i];
|
||||
const elementId = uuidv4(); // 항상 새로운 UUID 생성
|
||||
|
||||
await client.query(`
|
||||
await client.query(
|
||||
`
|
||||
INSERT INTO dashboard_elements (
|
||||
id, dashboard_id, element_type, element_subtype,
|
||||
position_x, position_y, width, height,
|
||||
title, custom_title, show_header, content, data_source_config, chart_config,
|
||||
title, content, data_source_config, chart_config,
|
||||
display_order, created_at, updated_at
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)
|
||||
`, [
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
|
||||
`,
|
||||
[
|
||||
elementId,
|
||||
dashboardId,
|
||||
element.type,
|
||||
|
|
@ -66,15 +74,14 @@ export class DashboardService {
|
|||
element.size.width,
|
||||
element.size.height,
|
||||
element.title,
|
||||
element.customTitle || null,
|
||||
element.showHeader !== false,
|
||||
element.content || null,
|
||||
JSON.stringify(element.dataSource || {}),
|
||||
JSON.stringify(element.chartConfig || {}),
|
||||
i,
|
||||
now,
|
||||
now
|
||||
]);
|
||||
now,
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,7 +92,7 @@ export class DashboardService {
|
|||
try {
|
||||
const dashboard = await this.getDashboardById(dashboardId, userId);
|
||||
if (!dashboard) {
|
||||
console.error('대시보드 생성은 성공했으나 조회에 실패:', dashboardId);
|
||||
console.error("대시보드 생성은 성공했으나 조회에 실패:", dashboardId);
|
||||
// 생성은 성공했으므로 기본 정보만이라도 반환
|
||||
return {
|
||||
id: dashboardId,
|
||||
|
|
@ -99,13 +106,13 @@ export class DashboardService {
|
|||
tags: data.tags || [],
|
||||
category: data.category,
|
||||
viewCount: 0,
|
||||
elements: data.elements || []
|
||||
elements: data.elements || [],
|
||||
};
|
||||
}
|
||||
|
||||
return dashboard;
|
||||
} catch (fetchError) {
|
||||
console.error('생성된 대시보드 조회 중 오류:', fetchError);
|
||||
console.error("생성된 대시보드 조회 중 오류:", fetchError);
|
||||
// 생성은 성공했으므로 기본 정보 반환
|
||||
return {
|
||||
id: dashboardId,
|
||||
|
|
@ -119,12 +126,11 @@ export class DashboardService {
|
|||
tags: data.tags || [],
|
||||
category: data.category,
|
||||
viewCount: 0,
|
||||
elements: data.elements || []
|
||||
elements: data.elements || [],
|
||||
};
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Dashboard creation error:', error);
|
||||
console.error("Dashboard creation error:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
|
@ -139,29 +145,33 @@ export class DashboardService {
|
|||
search,
|
||||
category,
|
||||
isPublic,
|
||||
createdBy
|
||||
createdBy,
|
||||
} = query;
|
||||
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
try {
|
||||
// 기본 WHERE 조건
|
||||
let whereConditions = ['d.deleted_at IS NULL'];
|
||||
let whereConditions = ["d.deleted_at IS NULL"];
|
||||
let params: any[] = [];
|
||||
let paramIndex = 1;
|
||||
|
||||
// 권한 필터링
|
||||
if (userId) {
|
||||
whereConditions.push(`(d.created_by = $${paramIndex} OR d.is_public = true)`);
|
||||
whereConditions.push(
|
||||
`(d.created_by = $${paramIndex} OR d.is_public = true)`
|
||||
);
|
||||
params.push(userId);
|
||||
paramIndex++;
|
||||
} else {
|
||||
whereConditions.push('d.is_public = true');
|
||||
whereConditions.push("d.is_public = true");
|
||||
}
|
||||
|
||||
// 검색 조건
|
||||
if (search) {
|
||||
whereConditions.push(`(d.title ILIKE $${paramIndex} OR d.description ILIKE $${paramIndex + 1})`);
|
||||
whereConditions.push(
|
||||
`(d.title ILIKE $${paramIndex} OR d.description ILIKE $${paramIndex + 1})`
|
||||
);
|
||||
params.push(`%${search}%`, `%${search}%`);
|
||||
paramIndex += 2;
|
||||
}
|
||||
|
|
@ -174,7 +184,7 @@ export class DashboardService {
|
|||
}
|
||||
|
||||
// 공개/비공개 필터
|
||||
if (typeof isPublic === 'boolean') {
|
||||
if (typeof isPublic === "boolean") {
|
||||
whereConditions.push(`d.is_public = $${paramIndex}`);
|
||||
params.push(isPublic);
|
||||
paramIndex++;
|
||||
|
|
@ -187,7 +197,7 @@ export class DashboardService {
|
|||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause = whereConditions.join(' AND ');
|
||||
const whereClause = whereConditions.join(" AND ");
|
||||
|
||||
// 대시보드 목록 조회 (users 테이블 조인 제거)
|
||||
const dashboardQuery = `
|
||||
|
|
@ -214,10 +224,11 @@ export class DashboardService {
|
|||
LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
|
||||
`;
|
||||
|
||||
const dashboardResult = await PostgreSQLService.query(
|
||||
dashboardQuery,
|
||||
[...params, limit, offset]
|
||||
);
|
||||
const dashboardResult = await PostgreSQLService.query(dashboardQuery, [
|
||||
...params,
|
||||
limit,
|
||||
offset,
|
||||
]);
|
||||
|
||||
// 전체 개수 조회
|
||||
const countQuery = `
|
||||
|
|
@ -227,7 +238,7 @@ export class DashboardService {
|
|||
`;
|
||||
|
||||
const countResult = await PostgreSQLService.query(countQuery, params);
|
||||
const total = parseInt(countResult.rows[0]?.total || '0');
|
||||
const total = parseInt(countResult.rows[0]?.total || "0");
|
||||
|
||||
return {
|
||||
dashboards: dashboardResult.rows.map((row: any) => ({
|
||||
|
|
@ -239,20 +250,20 @@ export class DashboardService {
|
|||
createdBy: row.created_by,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at,
|
||||
tags: JSON.parse(row.tags || '[]'),
|
||||
tags: JSON.parse(row.tags || "[]"),
|
||||
category: row.category,
|
||||
viewCount: parseInt(row.view_count || '0'),
|
||||
elementsCount: parseInt(row.elements_count || '0')
|
||||
viewCount: parseInt(row.view_count || "0"),
|
||||
elementsCount: parseInt(row.elements_count || "0"),
|
||||
})),
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit)
|
||||
}
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Dashboard list error:', error);
|
||||
console.error("Dashboard list error:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
|
@ -260,7 +271,10 @@ export class DashboardService {
|
|||
/**
|
||||
* 대시보드 상세 조회
|
||||
*/
|
||||
static async getDashboardById(dashboardId: string, userId?: string): Promise<Dashboard | null> {
|
||||
static async getDashboardById(
|
||||
dashboardId: string,
|
||||
userId?: string
|
||||
): Promise<Dashboard | null> {
|
||||
try {
|
||||
// 1. 대시보드 기본 정보 조회 (권한 체크 포함)
|
||||
let dashboardQuery: string;
|
||||
|
|
@ -284,7 +298,10 @@ export class DashboardService {
|
|||
dashboardParams = [dashboardId];
|
||||
}
|
||||
|
||||
const dashboardResult = await PostgreSQLService.query(dashboardQuery, dashboardParams);
|
||||
const dashboardResult = await PostgreSQLService.query(
|
||||
dashboardQuery,
|
||||
dashboardParams
|
||||
);
|
||||
|
||||
if (dashboardResult.rows.length === 0) {
|
||||
return null;
|
||||
|
|
@ -299,36 +316,30 @@ export class DashboardService {
|
|||
ORDER BY display_order ASC
|
||||
`;
|
||||
|
||||
const elementsResult = await PostgreSQLService.query(elementsQuery, [dashboardId]);
|
||||
const elementsResult = await PostgreSQLService.query(elementsQuery, [
|
||||
dashboardId,
|
||||
]);
|
||||
|
||||
// 3. 요소 데이터 변환
|
||||
console.log('📊 대시보드 요소 개수:', elementsResult.rows.length);
|
||||
|
||||
const elements: DashboardElement[] = elementsResult.rows.map((row: any, index: number) => {
|
||||
const element = {
|
||||
const elements: DashboardElement[] = elementsResult.rows.map(
|
||||
(row: any) => ({
|
||||
id: row.id,
|
||||
type: row.element_type,
|
||||
subtype: row.element_subtype,
|
||||
position: {
|
||||
x: row.position_x,
|
||||
y: row.position_y
|
||||
y: row.position_y,
|
||||
},
|
||||
size: {
|
||||
width: row.width,
|
||||
height: row.height
|
||||
height: row.height,
|
||||
},
|
||||
title: row.title,
|
||||
customTitle: row.custom_title,
|
||||
showHeader: row.show_header !== false,
|
||||
content: row.content,
|
||||
dataSource: JSON.parse(row.data_source_config || '{}'),
|
||||
chartConfig: JSON.parse(row.chart_config || '{}')
|
||||
};
|
||||
|
||||
console.log(`📊 위젯 #${index + 1}: type="${element.type}", subtype="${element.subtype}", title="${element.title}"`);
|
||||
|
||||
return element;
|
||||
});
|
||||
dataSource: JSON.parse(row.data_source_config || "{}"),
|
||||
chartConfig: JSON.parse(row.chart_config || "{}"),
|
||||
})
|
||||
);
|
||||
|
||||
return {
|
||||
id: dashboard.id,
|
||||
|
|
@ -339,13 +350,14 @@ export class DashboardService {
|
|||
createdBy: dashboard.created_by,
|
||||
createdAt: dashboard.created_at,
|
||||
updatedAt: dashboard.updated_at,
|
||||
tags: JSON.parse(dashboard.tags || '[]'),
|
||||
tags: JSON.parse(dashboard.tags || "[]"),
|
||||
category: dashboard.category,
|
||||
viewCount: parseInt(dashboard.view_count || '0'),
|
||||
elements
|
||||
viewCount: parseInt(dashboard.view_count || "0"),
|
||||
settings: dashboard.settings || undefined,
|
||||
elements,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Dashboard get error:', error);
|
||||
console.error("Dashboard get error:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
|
@ -361,13 +373,16 @@ export class DashboardService {
|
|||
try {
|
||||
const result = await PostgreSQLService.transaction(async (client) => {
|
||||
// 권한 체크
|
||||
const authCheckResult = await client.query(`
|
||||
const authCheckResult = await client.query(
|
||||
`
|
||||
SELECT id FROM dashboards
|
||||
WHERE id = $1 AND created_by = $2 AND deleted_at IS NULL
|
||||
`, [dashboardId, userId]);
|
||||
`,
|
||||
[dashboardId, userId]
|
||||
);
|
||||
|
||||
if (authCheckResult.rows.length === 0) {
|
||||
throw new Error('대시보드를 찾을 수 없거나 수정 권한이 없습니다.');
|
||||
throw new Error("대시보드를 찾을 수 없거나 수정 권한이 없습니다.");
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
|
|
@ -402,6 +417,11 @@ export class DashboardService {
|
|||
updateParams.push(data.category);
|
||||
paramIndex++;
|
||||
}
|
||||
if (data.settings !== undefined) {
|
||||
updateFields.push(`settings = $${paramIndex}`);
|
||||
updateParams.push(JSON.stringify(data.settings));
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
updateFields.push(`updated_at = $${paramIndex}`);
|
||||
updateParams.push(now);
|
||||
|
|
@ -409,10 +429,11 @@ export class DashboardService {
|
|||
|
||||
updateParams.push(dashboardId);
|
||||
|
||||
if (updateFields.length > 1) { // updated_at 외에 다른 필드가 있는 경우
|
||||
if (updateFields.length > 1) {
|
||||
// updated_at 외에 다른 필드가 있는 경우
|
||||
const updateQuery = `
|
||||
UPDATE dashboards
|
||||
SET ${updateFields.join(', ')}
|
||||
SET ${updateFields.join(", ")}
|
||||
WHERE id = $${paramIndex}
|
||||
`;
|
||||
|
||||
|
|
@ -422,23 +443,28 @@ export class DashboardService {
|
|||
// 2. 요소 업데이트 (있는 경우)
|
||||
if (data.elements) {
|
||||
// 기존 요소들 삭제
|
||||
await client.query(`
|
||||
await client.query(
|
||||
`
|
||||
DELETE FROM dashboard_elements WHERE dashboard_id = $1
|
||||
`, [dashboardId]);
|
||||
`,
|
||||
[dashboardId]
|
||||
);
|
||||
|
||||
// 새 요소들 추가
|
||||
for (let i = 0; i < data.elements.length; i++) {
|
||||
const element = data.elements[i];
|
||||
const elementId = uuidv4();
|
||||
|
||||
await client.query(`
|
||||
await client.query(
|
||||
`
|
||||
INSERT INTO dashboard_elements (
|
||||
id, dashboard_id, element_type, element_subtype,
|
||||
position_x, position_y, width, height,
|
||||
title, custom_title, show_header, content, data_source_config, chart_config,
|
||||
title, content, data_source_config, chart_config,
|
||||
display_order, created_at, updated_at
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)
|
||||
`, [
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
|
||||
`,
|
||||
[
|
||||
elementId,
|
||||
dashboardId,
|
||||
element.type,
|
||||
|
|
@ -448,15 +474,14 @@ export class DashboardService {
|
|||
element.size.width,
|
||||
element.size.height,
|
||||
element.title,
|
||||
element.customTitle || null,
|
||||
element.showHeader !== false,
|
||||
element.content || null,
|
||||
JSON.stringify(element.dataSource || {}),
|
||||
JSON.stringify(element.chartConfig || {}),
|
||||
i,
|
||||
now,
|
||||
now
|
||||
]);
|
||||
now,
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -465,9 +490,8 @@ export class DashboardService {
|
|||
|
||||
// 업데이트된 대시보드 반환
|
||||
return await this.getDashboardById(dashboardId, userId);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Dashboard update error:', error);
|
||||
console.error("Dashboard update error:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
|
@ -475,19 +499,25 @@ export class DashboardService {
|
|||
/**
|
||||
* 대시보드 삭제 (소프트 삭제)
|
||||
*/
|
||||
static async deleteDashboard(dashboardId: string, userId: string): Promise<boolean> {
|
||||
static async deleteDashboard(
|
||||
dashboardId: string,
|
||||
userId: string
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
const now = new Date();
|
||||
|
||||
const result = await PostgreSQLService.query(`
|
||||
const result = await PostgreSQLService.query(
|
||||
`
|
||||
UPDATE dashboards
|
||||
SET deleted_at = $1, updated_at = $2
|
||||
WHERE id = $3 AND created_by = $4 AND deleted_at IS NULL
|
||||
`, [now, now, dashboardId, userId]);
|
||||
`,
|
||||
[now, now, dashboardId, userId]
|
||||
);
|
||||
|
||||
return (result.rowCount || 0) > 0;
|
||||
} catch (error) {
|
||||
console.error('Dashboard delete error:', error);
|
||||
console.error("Dashboard delete error:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
|
@ -497,13 +527,16 @@ export class DashboardService {
|
|||
*/
|
||||
static async incrementViewCount(dashboardId: string): Promise<void> {
|
||||
try {
|
||||
await PostgreSQLService.query(`
|
||||
await PostgreSQLService.query(
|
||||
`
|
||||
UPDATE dashboards
|
||||
SET view_count = view_count + 1
|
||||
WHERE id = $1 AND deleted_at IS NULL
|
||||
`, [dashboardId]);
|
||||
`,
|
||||
[dashboardId]
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('View count increment error:', error);
|
||||
console.error("View count increment error:", error);
|
||||
// 조회수 증가 실패는 치명적이지 않으므로 에러를 던지지 않음
|
||||
}
|
||||
}
|
||||
|
|
@ -514,10 +547,11 @@ export class DashboardService {
|
|||
static async checkUserPermission(
|
||||
dashboardId: string,
|
||||
userId: string,
|
||||
requiredPermission: 'view' | 'edit' | 'admin' = 'view'
|
||||
requiredPermission: "view" | "edit" | "admin" = "view"
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
const result = await PostgreSQLService.query(`
|
||||
const result = await PostgreSQLService.query(
|
||||
`
|
||||
SELECT
|
||||
CASE
|
||||
WHEN d.created_by = $2 THEN 'admin'
|
||||
|
|
@ -526,7 +560,9 @@ export class DashboardService {
|
|||
END as permission
|
||||
FROM dashboards d
|
||||
WHERE d.id = $1 AND d.deleted_at IS NULL
|
||||
`, [dashboardId, userId]);
|
||||
`,
|
||||
[dashboardId, userId]
|
||||
);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return false;
|
||||
|
|
@ -535,13 +571,14 @@ export class DashboardService {
|
|||
const userPermission = result.rows[0].permission;
|
||||
|
||||
// 권한 레벨 체크
|
||||
const permissionLevels = { 'view': 1, 'edit': 2, 'admin': 3 };
|
||||
const userLevel = permissionLevels[userPermission as keyof typeof permissionLevels] || 0;
|
||||
const permissionLevels = { view: 1, edit: 2, admin: 3 };
|
||||
const userLevel =
|
||||
permissionLevels[userPermission as keyof typeof permissionLevels] || 0;
|
||||
const requiredLevel = permissionLevels[requiredPermission];
|
||||
|
||||
return userLevel >= requiredLevel;
|
||||
} catch (error) {
|
||||
console.error('Permission check error:', error);
|
||||
console.error("Permission check error:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,14 +53,21 @@ export class BookingService {
|
|||
}
|
||||
|
||||
private ensureDataDirectory(): void {
|
||||
try {
|
||||
if (!fs.existsSync(BOOKING_DIR)) {
|
||||
fs.mkdirSync(BOOKING_DIR, { recursive: true });
|
||||
fs.mkdirSync(BOOKING_DIR, { recursive: true, mode: 0o755 });
|
||||
logger.info(`📁 예약 데이터 디렉토리 생성: ${BOOKING_DIR}`);
|
||||
}
|
||||
if (!fs.existsSync(BOOKING_FILE)) {
|
||||
fs.writeFileSync(BOOKING_FILE, JSON.stringify([], null, 2));
|
||||
fs.writeFileSync(BOOKING_FILE, JSON.stringify([], null, 2), {
|
||||
mode: 0o644,
|
||||
});
|
||||
logger.info(`📄 예약 파일 생성: ${BOOKING_FILE}`);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(`❌ 예약 디렉토리 생성 실패: ${BOOKING_DIR}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
private generateMockData(): void {
|
||||
|
|
@ -111,13 +118,16 @@ export class BookingService {
|
|||
priority?: string;
|
||||
}): Promise<{ bookings: BookingRequest[]; newCount: number }> {
|
||||
try {
|
||||
const bookings = DATA_SOURCE === "database"
|
||||
const bookings =
|
||||
DATA_SOURCE === "database"
|
||||
? await this.loadBookingsFromDB(filter)
|
||||
: this.loadBookingsFromFile(filter);
|
||||
|
||||
bookings.sort((a, b) => {
|
||||
if (a.priority !== b.priority) return a.priority === "urgent" ? -1 : 1;
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
return (
|
||||
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
||||
);
|
||||
});
|
||||
|
||||
const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
|
||||
|
|
@ -145,7 +155,10 @@ export class BookingService {
|
|||
}
|
||||
}
|
||||
|
||||
public async rejectBooking(id: string, reason?: string): Promise<BookingRequest> {
|
||||
public async rejectBooking(
|
||||
id: string,
|
||||
reason?: string
|
||||
): Promise<BookingRequest> {
|
||||
try {
|
||||
if (DATA_SOURCE === "database") {
|
||||
return await this.rejectBookingDB(id, reason);
|
||||
|
|
@ -194,9 +207,15 @@ export class BookingService {
|
|||
scheduledTime: new Date(row.scheduledTime).toISOString(),
|
||||
createdAt: new Date(row.createdAt).toISOString(),
|
||||
updatedAt: new Date(row.updatedAt).toISOString(),
|
||||
acceptedAt: row.acceptedAt ? new Date(row.acceptedAt).toISOString() : undefined,
|
||||
rejectedAt: row.rejectedAt ? new Date(row.rejectedAt).toISOString() : undefined,
|
||||
completedAt: row.completedAt ? new Date(row.completedAt).toISOString() : undefined,
|
||||
acceptedAt: row.acceptedAt
|
||||
? new Date(row.acceptedAt).toISOString()
|
||||
: undefined,
|
||||
rejectedAt: row.rejectedAt
|
||||
? new Date(row.rejectedAt).toISOString()
|
||||
: undefined,
|
||||
completedAt: row.completedAt
|
||||
? new Date(row.completedAt).toISOString()
|
||||
: undefined,
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +249,10 @@ export class BookingService {
|
|||
};
|
||||
}
|
||||
|
||||
private async rejectBookingDB(id: string, reason?: string): Promise<BookingRequest> {
|
||||
private async rejectBookingDB(
|
||||
id: string,
|
||||
reason?: string
|
||||
): Promise<BookingRequest> {
|
||||
const rows = await query(
|
||||
`UPDATE booking_requests
|
||||
SET status = 'rejected', rejected_at = NOW(), updated_at = NOW(), rejection_reason = $2
|
||||
|
|
|
|||
|
|
@ -33,11 +33,7 @@ class MailAccountFileService {
|
|||
try {
|
||||
await fs.access(this.accountsDir);
|
||||
} catch {
|
||||
try {
|
||||
await fs.mkdir(this.accountsDir, { recursive: true });
|
||||
} catch (error) {
|
||||
console.error("메일 계정 디렉토리 생성 실패:", error);
|
||||
}
|
||||
await fs.mkdir(this.accountsDir, { recursive: true, mode: 0o755 });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,11 +59,7 @@ export class MailReceiveBasicService {
|
|||
try {
|
||||
await fs.access(this.attachmentsDir);
|
||||
} catch {
|
||||
try {
|
||||
await fs.mkdir(this.attachmentsDir, { recursive: true });
|
||||
} catch (error) {
|
||||
console.error("메일 첨부파일 디렉토리 생성 실패:", error);
|
||||
}
|
||||
await fs.mkdir(this.attachmentsDir, { recursive: true, mode: 0o755 });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,15 +20,13 @@ const SENT_MAIL_DIR =
|
|||
|
||||
class MailSentHistoryService {
|
||||
constructor() {
|
||||
// 디렉토리 생성 (없으면) - try-catch로 권한 에러 방지
|
||||
try {
|
||||
if (!fs.existsSync(SENT_MAIL_DIR)) {
|
||||
fs.mkdirSync(SENT_MAIL_DIR, { recursive: true });
|
||||
fs.mkdirSync(SENT_MAIL_DIR, { recursive: true, mode: 0o755 });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("메일 발송 이력 디렉토리 생성 실패:", error);
|
||||
// 디렉토리가 이미 존재하거나 권한이 없어도 서비스는 계속 실행
|
||||
// 실제 파일 쓰기 시점에 에러 처리
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,13 +43,15 @@ class MailSentHistoryService {
|
|||
};
|
||||
|
||||
try {
|
||||
// 디렉토리가 없으면 다시 시도
|
||||
if (!fs.existsSync(SENT_MAIL_DIR)) {
|
||||
fs.mkdirSync(SENT_MAIL_DIR, { recursive: true });
|
||||
fs.mkdirSync(SENT_MAIL_DIR, { recursive: true, mode: 0o755 });
|
||||
}
|
||||
|
||||
const filePath = path.join(SENT_MAIL_DIR, `${history.id}.json`);
|
||||
fs.writeFileSync(filePath, JSON.stringify(history, null, 2), "utf-8");
|
||||
fs.writeFileSync(filePath, JSON.stringify(history, null, 2), {
|
||||
encoding: "utf-8",
|
||||
mode: 0o644,
|
||||
});
|
||||
|
||||
console.log("발송 이력 저장:", history.id);
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -54,17 +54,13 @@ class MailTemplateFileService {
|
|||
}
|
||||
|
||||
/**
|
||||
* 템플릿 디렉토리 생성 (없으면) - try-catch로 권한 에러 방지
|
||||
* 템플릿 디렉토리 생성
|
||||
*/
|
||||
private async ensureDirectoryExists() {
|
||||
try {
|
||||
await fs.access(this.templatesDir);
|
||||
} catch {
|
||||
try {
|
||||
await fs.mkdir(this.templatesDir, { recursive: true });
|
||||
} catch (error) {
|
||||
console.error("메일 템플릿 디렉토리 생성 실패:", error);
|
||||
}
|
||||
await fs.mkdir(this.templatesDir, { recursive: true, mode: 0o755 });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,14 +61,21 @@ export class TodoService {
|
|||
* 데이터 디렉토리 생성 (파일 모드)
|
||||
*/
|
||||
private ensureDataDirectory(): void {
|
||||
try {
|
||||
if (!fs.existsSync(TODO_DIR)) {
|
||||
fs.mkdirSync(TODO_DIR, { recursive: true });
|
||||
fs.mkdirSync(TODO_DIR, { recursive: true, mode: 0o755 });
|
||||
logger.info(`📁 To-Do 데이터 디렉토리 생성: ${TODO_DIR}`);
|
||||
}
|
||||
if (!fs.existsSync(TODO_FILE)) {
|
||||
fs.writeFileSync(TODO_FILE, JSON.stringify([], null, 2));
|
||||
fs.writeFileSync(TODO_FILE, JSON.stringify([], null, 2), {
|
||||
mode: 0o644,
|
||||
});
|
||||
logger.info(`📄 To-Do 파일 생성: ${TODO_FILE}`);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(`❌ To-Do 디렉토리 생성 실패: ${TODO_DIR}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -80,7 +87,8 @@ export class TodoService {
|
|||
assignedTo?: string;
|
||||
}): Promise<TodoListResponse> {
|
||||
try {
|
||||
const todos = DATA_SOURCE === "database"
|
||||
const todos =
|
||||
DATA_SOURCE === "database"
|
||||
? await this.loadTodosFromDB(filter)
|
||||
: this.loadTodosFromFile(filter);
|
||||
|
||||
|
|
@ -88,7 +96,8 @@ export class TodoService {
|
|||
todos.sort((a, b) => {
|
||||
if (a.isUrgent !== b.isUrgent) return a.isUrgent ? -1 : 1;
|
||||
const priorityOrder = { urgent: 0, high: 1, normal: 2, low: 3 };
|
||||
if (a.priority !== b.priority) return priorityOrder[a.priority] - priorityOrder[b.priority];
|
||||
if (a.priority !== b.priority)
|
||||
return priorityOrder[a.priority] - priorityOrder[b.priority];
|
||||
return a.order - b.order;
|
||||
});
|
||||
|
||||
|
|
@ -124,7 +133,8 @@ export class TodoService {
|
|||
await this.createTodoDB(newTodo);
|
||||
} else {
|
||||
const todos = this.loadTodosFromFile();
|
||||
newTodo.order = todos.length > 0 ? Math.max(...todos.map((t) => t.order)) + 1 : 0;
|
||||
newTodo.order =
|
||||
todos.length > 0 ? Math.max(...todos.map((t) => t.order)) + 1 : 0;
|
||||
todos.push(newTodo);
|
||||
this.saveTodosToFile(todos);
|
||||
}
|
||||
|
|
@ -140,7 +150,10 @@ export class TodoService {
|
|||
/**
|
||||
* To-Do 항목 수정
|
||||
*/
|
||||
public async updateTodo(id: string, updates: Partial<TodoItem>): Promise<TodoItem> {
|
||||
public async updateTodo(
|
||||
id: string,
|
||||
updates: Partial<TodoItem>
|
||||
): Promise<TodoItem> {
|
||||
try {
|
||||
if (DATA_SOURCE === "database") {
|
||||
return await this.updateTodoDB(id, updates);
|
||||
|
|
@ -231,7 +244,9 @@ export class TodoService {
|
|||
dueDate: row.dueDate ? new Date(row.dueDate).toISOString() : undefined,
|
||||
createdAt: new Date(row.createdAt).toISOString(),
|
||||
updatedAt: new Date(row.updatedAt).toISOString(),
|
||||
completedAt: row.completedAt ? new Date(row.completedAt).toISOString() : undefined,
|
||||
completedAt: row.completedAt
|
||||
? new Date(row.completedAt).toISOString()
|
||||
: undefined,
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +278,10 @@ export class TodoService {
|
|||
);
|
||||
}
|
||||
|
||||
private async updateTodoDB(id: string, updates: Partial<TodoItem>): Promise<TodoItem> {
|
||||
private async updateTodoDB(
|
||||
id: string,
|
||||
updates: Partial<TodoItem>
|
||||
): Promise<TodoItem> {
|
||||
const setClauses: string[] = ["updated_at = NOW()"];
|
||||
const params: any[] = [];
|
||||
let paramIndex = 1;
|
||||
|
|
@ -327,12 +345,17 @@ export class TodoService {
|
|||
dueDate: row.dueDate ? new Date(row.dueDate).toISOString() : undefined,
|
||||
createdAt: new Date(row.createdAt).toISOString(),
|
||||
updatedAt: new Date(row.updatedAt).toISOString(),
|
||||
completedAt: row.completedAt ? new Date(row.completedAt).toISOString() : undefined,
|
||||
completedAt: row.completedAt
|
||||
? new Date(row.completedAt).toISOString()
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
private async deleteTodoDB(id: string): Promise<void> {
|
||||
const rows = await query("DELETE FROM todo_items WHERE id = $1 RETURNING id", [id]);
|
||||
const rows = await query(
|
||||
"DELETE FROM todo_items WHERE id = $1 RETURNING id",
|
||||
[id]
|
||||
);
|
||||
if (rows.length === 0) {
|
||||
throw new Error(`To-Do 항목을 찾을 수 없습니다: ${id}`);
|
||||
}
|
||||
|
|
@ -443,7 +466,10 @@ export class TodoService {
|
|||
inProgress: todos.filter((t) => t.status === "in_progress").length,
|
||||
completed: todos.filter((t) => t.status === "completed").length,
|
||||
urgent: todos.filter((t) => t.isUrgent).length,
|
||||
overdue: todos.filter((t) => t.dueDate && new Date(t.dueDate) < now && t.status !== "completed").length,
|
||||
overdue: todos.filter(
|
||||
(t) =>
|
||||
t.dueDate && new Date(t.dueDate) < now && t.status !== "completed"
|
||||
).length,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
export interface DashboardElement {
|
||||
id: string;
|
||||
type: 'chart' | 'widget';
|
||||
subtype: 'bar' | 'pie' | 'line' | 'exchange' | 'weather';
|
||||
type: "chart" | "widget";
|
||||
subtype: "bar" | "pie" | "line" | "exchange" | "weather";
|
||||
position: {
|
||||
x: number;
|
||||
y: number;
|
||||
|
|
@ -19,7 +19,7 @@ export interface DashboardElement {
|
|||
showHeader?: boolean; // 헤더 표시 여부 (기본값: true)
|
||||
content?: string;
|
||||
dataSource?: {
|
||||
type: 'api' | 'database' | 'static';
|
||||
type: "api" | "database" | "static";
|
||||
endpoint?: string;
|
||||
query?: string;
|
||||
refreshInterval?: number;
|
||||
|
|
@ -30,7 +30,7 @@ export interface DashboardElement {
|
|||
xAxis?: string;
|
||||
yAxis?: string;
|
||||
groupBy?: string;
|
||||
aggregation?: 'sum' | 'avg' | 'count' | 'max' | 'min';
|
||||
aggregation?: "sum" | "avg" | "count" | "max" | "min";
|
||||
colors?: string[];
|
||||
title?: string;
|
||||
showLegend?: boolean;
|
||||
|
|
@ -50,6 +50,10 @@ export interface Dashboard {
|
|||
tags?: string[];
|
||||
category?: string;
|
||||
viewCount: number;
|
||||
settings?: {
|
||||
resolution?: string;
|
||||
backgroundColor?: string;
|
||||
};
|
||||
elements: DashboardElement[];
|
||||
}
|
||||
|
||||
|
|
@ -60,6 +64,10 @@ export interface CreateDashboardRequest {
|
|||
elements: DashboardElement[];
|
||||
tags?: string[];
|
||||
category?: string;
|
||||
settings?: {
|
||||
resolution?: string;
|
||||
backgroundColor?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface UpdateDashboardRequest {
|
||||
|
|
@ -69,6 +77,10 @@ export interface UpdateDashboardRequest {
|
|||
elements?: DashboardElement[];
|
||||
tags?: string[];
|
||||
category?: string;
|
||||
settings?: {
|
||||
resolution?: string;
|
||||
backgroundColor?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DashboardListQuery {
|
||||
|
|
@ -85,7 +97,7 @@ export interface DashboardShare {
|
|||
dashboardId: string;
|
||||
sharedWithUser?: string;
|
||||
sharedWithRole?: string;
|
||||
permissionLevel: 'view' | 'edit' | 'admin';
|
||||
permissionLevel: "view" | "edit" | "admin";
|
||||
createdBy: string;
|
||||
createdAt: string;
|
||||
expiresAt?: string;
|
||||
|
|
|
|||
|
|
@ -34,14 +34,11 @@ COPY --from=build /app/dist ./dist
|
|||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Create logs, uploads, and data directories and set permissions (use existing node user with UID 1000)
|
||||
RUN mkdir -p logs \
|
||||
uploads/mail-attachments \
|
||||
uploads/mail-templates \
|
||||
uploads/mail-accounts \
|
||||
data/mail-sent && \
|
||||
chown -R node:node logs uploads data && \
|
||||
chmod -R 755 logs uploads data
|
||||
# 루트 디렉토리만 생성하고 node 유저에게 쓰기 권한 부여
|
||||
# 하위 디렉토리는 애플리케이션이 런타임에 자동 생성
|
||||
RUN mkdir -p logs uploads data && \
|
||||
chown -R node:node /app && \
|
||||
chmod -R 755 /app
|
||||
|
||||
EXPOSE 3001
|
||||
USER node
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ services:
|
|||
LOG_LEVEL: info
|
||||
ENCRYPTION_KEY: ilshin-plm-mail-encryption-key-32characters-2024-secure
|
||||
volumes:
|
||||
- /home/vexplor/backend_data/uploads:/app/uploads
|
||||
- /home/vexplor/backend_data/data:/app/data
|
||||
- backend_uploads:/app/uploads
|
||||
- backend_data:/app/data
|
||||
labels:
|
||||
- traefik.enable=true
|
||||
- traefik.http.routers.backend.rule=Host(`api.vexplor.com`)
|
||||
|
|
@ -46,7 +46,7 @@ services:
|
|||
PORT: "3000"
|
||||
HOSTNAME: 0.0.0.0
|
||||
volumes:
|
||||
- /home/vexplor/frontend_data:/app/data
|
||||
- frontend_data:/app/data
|
||||
labels:
|
||||
- traefik.enable=true
|
||||
- traefik.http.routers.frontend.rule=Host(`v1.vexplor.com`)
|
||||
|
|
@ -55,6 +55,14 @@ services:
|
|||
- traefik.http.routers.frontend.tls.certresolver=le
|
||||
- traefik.http.services.frontend.loadbalancer.server.port=3000
|
||||
|
||||
volumes:
|
||||
backend_uploads:
|
||||
driver: local
|
||||
backend_data:
|
||||
driver: local
|
||||
frontend_data:
|
||||
driver: local
|
||||
|
||||
networks:
|
||||
default:
|
||||
name: toktork_server_default
|
||||
|
|
|
|||
|
|
@ -37,8 +37,11 @@ COPY --from=build /app/dist ./dist
|
|||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Create logs and uploads directories and set permissions
|
||||
RUN mkdir -p logs uploads && chown -R appuser:appgroup logs uploads && chmod -R 755 logs uploads
|
||||
# 루트 디렉토리만 생성하고 appuser에게 쓰기 권한 부여
|
||||
# 하위 디렉토리는 애플리케이션이 런타임에 자동 생성
|
||||
RUN mkdir -p logs uploads data && \
|
||||
chown -R appuser:appgroup /app && \
|
||||
chmod -R 755 /app
|
||||
|
||||
EXPOSE 8080
|
||||
USER appuser
|
||||
|
|
|
|||
|
|
@ -156,8 +156,6 @@ export default function DashboardListPage() {
|
|||
<TableRow>
|
||||
<TableHead>제목</TableHead>
|
||||
<TableHead>설명</TableHead>
|
||||
<TableHead>요소 수</TableHead>
|
||||
<TableHead>상태</TableHead>
|
||||
<TableHead>생성일</TableHead>
|
||||
<TableHead>수정일</TableHead>
|
||||
<TableHead className="w-[80px]">작업</TableHead>
|
||||
|
|
@ -166,29 +164,10 @@ export default function DashboardListPage() {
|
|||
<TableBody>
|
||||
{dashboards.map((dashboard) => (
|
||||
<TableRow key={dashboard.id} className="cursor-pointer hover:bg-gray-50">
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
{dashboard.title}
|
||||
{dashboard.isPublic && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
공개
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{dashboard.title}</TableCell>
|
||||
<TableCell className="max-w-md truncate text-sm text-gray-500">
|
||||
{dashboard.description || "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">{dashboard.elementsCount || 0}개</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{dashboard.isPublic ? (
|
||||
<Badge className="bg-green-100 text-green-800">공개</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">비공개</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-gray-500">{formatDate(dashboard.createdAt)}</TableCell>
|
||||
<TableCell className="text-sm text-gray-500">{formatDate(dashboard.updatedAt)}</TableCell>
|
||||
<TableCell>
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ interface CanvasElementProps {
|
|||
element: DashboardElement;
|
||||
isSelected: boolean;
|
||||
cellSize: number;
|
||||
canvasWidth?: number;
|
||||
onUpdate: (id: string, updates: Partial<DashboardElement>) => void;
|
||||
onRemove: (id: string) => void;
|
||||
onSelect: (id: string | null) => void;
|
||||
|
|
@ -126,6 +127,7 @@ export function CanvasElement({
|
|||
element,
|
||||
isSelected,
|
||||
cellSize,
|
||||
canvasWidth = 1560,
|
||||
onUpdate,
|
||||
onRemove,
|
||||
onSelect,
|
||||
|
|
@ -164,7 +166,11 @@ export function CanvasElement({
|
|||
return;
|
||||
}
|
||||
|
||||
// 선택되지 않은 경우에만 선택 처리
|
||||
if (!isSelected) {
|
||||
onSelect(element.id);
|
||||
}
|
||||
|
||||
setIsDragging(true);
|
||||
setDragStart({
|
||||
x: e.clientX,
|
||||
|
|
@ -174,7 +180,7 @@ export function CanvasElement({
|
|||
});
|
||||
e.preventDefault();
|
||||
},
|
||||
[element.id, element.position.x, element.position.y, onSelect],
|
||||
[element.id, element.position.x, element.position.y, onSelect, isSelected],
|
||||
);
|
||||
|
||||
// 리사이즈 핸들 마우스다운
|
||||
|
|
@ -207,7 +213,7 @@ export function CanvasElement({
|
|||
const rawY = Math.max(0, dragStart.elementY + deltaY);
|
||||
|
||||
// X 좌표가 캔버스 너비를 벗어나지 않도록 제한
|
||||
const maxX = GRID_CONFIG.CANVAS_WIDTH - element.size.width;
|
||||
const maxX = canvasWidth - element.size.width;
|
||||
rawX = Math.min(rawX, maxX);
|
||||
|
||||
setTempPosition({ x: rawX, y: rawY });
|
||||
|
|
@ -223,8 +229,8 @@ export function CanvasElement({
|
|||
// 최소 크기 설정: 달력은 2x3, 나머지는 2x2
|
||||
const minWidthCells = 2;
|
||||
const minHeightCells = element.type === "widget" && element.subtype === "calendar" ? 3 : 2;
|
||||
const minWidth = GRID_CONFIG.CELL_SIZE * minWidthCells;
|
||||
const minHeight = GRID_CONFIG.CELL_SIZE * minHeightCells;
|
||||
const minWidth = cellSize * minWidthCells;
|
||||
const minHeight = cellSize * minHeightCells;
|
||||
|
||||
switch (resizeStart.handle) {
|
||||
case "se": // 오른쪽 아래
|
||||
|
|
@ -250,7 +256,7 @@ export function CanvasElement({
|
|||
}
|
||||
|
||||
// 가로 너비가 캔버스를 벗어나지 않도록 제한
|
||||
const maxWidth = GRID_CONFIG.CANVAS_WIDTH - newX;
|
||||
const maxWidth = canvasWidth - newX;
|
||||
newWidth = Math.min(newWidth, maxWidth);
|
||||
|
||||
// 임시 크기/위치 저장 (스냅 안 됨)
|
||||
|
|
@ -258,7 +264,7 @@ export function CanvasElement({
|
|||
setTempSize({ width: newWidth, height: newHeight });
|
||||
}
|
||||
},
|
||||
[isDragging, isResizing, dragStart, resizeStart, element.size.width, element.type, element.subtype],
|
||||
[isDragging, isResizing, dragStart, resizeStart, element.size.width, element.type, element.subtype, canvasWidth],
|
||||
);
|
||||
|
||||
// 마우스 업 처리 (그리드 스냅 적용)
|
||||
|
|
@ -269,7 +275,7 @@ export function CanvasElement({
|
|||
const snappedY = snapToGrid(tempPosition.y, cellSize);
|
||||
|
||||
// X 좌표가 캔버스 너비를 벗어나지 않도록 최종 제한
|
||||
const maxX = GRID_CONFIG.CANVAS_WIDTH - element.size.width;
|
||||
const maxX = canvasWidth - element.size.width;
|
||||
snappedX = Math.min(snappedX, maxX);
|
||||
|
||||
onUpdate(element.id, {
|
||||
|
|
@ -287,7 +293,7 @@ export function CanvasElement({
|
|||
const snappedHeight = snapSizeToGrid(tempSize.height, 2, cellSize);
|
||||
|
||||
// 가로 너비가 캔버스를 벗어나지 않도록 최종 제한
|
||||
const maxWidth = GRID_CONFIG.CANVAS_WIDTH - snappedX;
|
||||
const maxWidth = canvasWidth - snappedX;
|
||||
snappedWidth = Math.min(snappedWidth, maxWidth);
|
||||
|
||||
onUpdate(element.id, {
|
||||
|
|
@ -301,7 +307,7 @@ export function CanvasElement({
|
|||
|
||||
setIsDragging(false);
|
||||
setIsResizing(false);
|
||||
}, [isDragging, isResizing, tempPosition, tempSize, element.id, element.size.width, onUpdate, cellSize]);
|
||||
}, [isDragging, isResizing, tempPosition, tempSize, element.id, element.size.width, onUpdate, cellSize, canvasWidth]);
|
||||
|
||||
// 전역 마우스 이벤트 등록
|
||||
React.useEffect(() => {
|
||||
|
|
@ -545,12 +551,7 @@ export function CanvasElement({
|
|||
) : element.type === "widget" && element.subtype === "status-summary" ? (
|
||||
// 커스텀 상태 카드 - 범용 위젯
|
||||
<div className="widget-interactive-area h-full w-full">
|
||||
<StatusSummaryWidget
|
||||
element={element}
|
||||
title="상태 요약"
|
||||
icon="📊"
|
||||
bgGradient="from-slate-50 to-blue-50"
|
||||
/>
|
||||
<StatusSummaryWidget element={element} title="상태 요약" icon="📊" bgGradient="from-slate-50 to-blue-50" />
|
||||
</div>
|
||||
) : /* element.type === "widget" && element.subtype === "list-summary" ? (
|
||||
// 커스텀 목록 카드 - 범용 위젯 (다른 분 작업 중 - 임시 주석)
|
||||
|
|
@ -576,10 +577,10 @@ export function CanvasElement({
|
|||
icon="📊"
|
||||
bgGradient="from-slate-50 to-blue-50"
|
||||
statusConfig={{
|
||||
"배송중": { label: "배송중", color: "blue" },
|
||||
"완료": { label: "완료", color: "green" },
|
||||
"지연": { label: "지연", color: "red" },
|
||||
"픽업 대기": { label: "픽업 대기", color: "yellow" }
|
||||
배송중: { label: "배송중", color: "blue" },
|
||||
완료: { label: "완료", color: "green" },
|
||||
지연: { label: "지연", color: "red" },
|
||||
"픽업 대기": { label: "픽업 대기", color: "yellow" },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import React, { forwardRef, useState, useCallback, useEffect } from "react";
|
||||
import React, { forwardRef, useState, useCallback, useMemo } from "react";
|
||||
import { DashboardElement, ElementType, ElementSubtype, DragData } from "./types";
|
||||
import { CanvasElement } from "./CanvasElement";
|
||||
import { GRID_CONFIG, snapToGrid } from "./gridUtils";
|
||||
import { GRID_CONFIG, snapToGrid, calculateGridConfig } from "./gridUtils";
|
||||
|
||||
interface DashboardCanvasProps {
|
||||
elements: DashboardElement[];
|
||||
|
|
@ -14,6 +14,8 @@ interface DashboardCanvasProps {
|
|||
onSelectElement: (id: string | null) => void;
|
||||
onConfigureElement?: (element: DashboardElement) => void;
|
||||
backgroundColor?: string;
|
||||
canvasWidth?: number;
|
||||
canvasHeight?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -34,11 +36,17 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
|
|||
onSelectElement,
|
||||
onConfigureElement,
|
||||
backgroundColor = "#f9fafb",
|
||||
canvasWidth = 1560,
|
||||
canvasHeight = 768,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
|
||||
// 현재 캔버스 크기에 맞는 그리드 설정 계산
|
||||
const gridConfig = useMemo(() => calculateGridConfig(canvasWidth), [canvasWidth]);
|
||||
const cellSize = gridConfig.CELL_SIZE;
|
||||
|
||||
// 드래그 오버 처리
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -71,20 +79,20 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
|
|||
const rawX = e.clientX - rect.left + (ref.current?.scrollLeft || 0);
|
||||
const rawY = e.clientY - rect.top + (ref.current?.scrollTop || 0);
|
||||
|
||||
// 그리드에 스냅 (고정 셀 크기 사용)
|
||||
let snappedX = snapToGrid(rawX, GRID_CONFIG.CELL_SIZE);
|
||||
const snappedY = snapToGrid(rawY, GRID_CONFIG.CELL_SIZE);
|
||||
// 그리드에 스냅 (동적 셀 크기 사용)
|
||||
let snappedX = snapToGrid(rawX, cellSize);
|
||||
const snappedY = snapToGrid(rawY, cellSize);
|
||||
|
||||
// X 좌표가 캔버스 너비를 벗어나지 않도록 제한
|
||||
const maxX = GRID_CONFIG.CANVAS_WIDTH - GRID_CONFIG.CELL_SIZE * 2; // 최소 2칸 너비 보장
|
||||
const maxX = canvasWidth - cellSize * 2; // 최소 2칸 너비 보장
|
||||
snappedX = Math.max(0, Math.min(snappedX, maxX));
|
||||
|
||||
onCreateElement(dragData.type, dragData.subtype, snappedX, snappedY);
|
||||
} catch (error) {
|
||||
// console.error('드롭 데이터 파싱 오류:', error);
|
||||
} catch {
|
||||
// 드롭 데이터 파싱 오류 무시
|
||||
}
|
||||
},
|
||||
[ref, onCreateElement],
|
||||
[ref, onCreateElement, canvasWidth, cellSize],
|
||||
);
|
||||
|
||||
// 캔버스 클릭 시 선택 해제
|
||||
|
|
@ -97,28 +105,25 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
|
|||
[onSelectElement],
|
||||
);
|
||||
|
||||
// 고정 그리드 크기
|
||||
const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;
|
||||
// 동적 그리드 크기 계산
|
||||
const cellWithGap = cellSize + GRID_CONFIG.GAP;
|
||||
const gridSize = `${cellWithGap}px ${cellWithGap}px`;
|
||||
|
||||
// 캔버스 높이를 요소들의 최대 y + height 기준으로 계산 (최소 화면 높이 보장)
|
||||
const minCanvasHeight = Math.max(
|
||||
typeof window !== "undefined" ? window.innerHeight : 800,
|
||||
...elements.map((el) => el.position.y + el.size.height + 100), // 하단 여백 100px
|
||||
);
|
||||
// 12개 컬럼 구분선 위치 계산
|
||||
const columnLines = Array.from({ length: GRID_CONFIG.COLUMNS + 1 }, (_, i) => i * cellWithGap);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`relative rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
|
||||
className={`relative w-full rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
|
||||
style={{
|
||||
backgroundColor,
|
||||
width: `${GRID_CONFIG.CANVAS_WIDTH}px`,
|
||||
minHeight: `${minCanvasHeight}px`,
|
||||
// 12 컬럼 그리드 배경
|
||||
height: `${canvasHeight}px`,
|
||||
minHeight: `${canvasHeight}px`,
|
||||
// 세밀한 그리드 배경
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59, 130, 246, 0.15) 1px, transparent 1px)
|
||||
linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: gridSize,
|
||||
backgroundPosition: "0 0",
|
||||
|
|
@ -129,13 +134,33 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
|
|||
onDrop={handleDrop}
|
||||
onClick={handleCanvasClick}
|
||||
>
|
||||
{/* 12개 컬럼 메인 구분선 */}
|
||||
{columnLines.map((x, i) => (
|
||||
<div
|
||||
key={`col-${i}`}
|
||||
className="pointer-events-none absolute top-0 h-full"
|
||||
style={{
|
||||
left: `${x}px`,
|
||||
width: "2px",
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{/* 배치된 요소들 렌더링 */}
|
||||
{elements.length === 0 && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center text-gray-400">
|
||||
<div className="text-center">
|
||||
<div className="text-sm">상단 메뉴에서 차트나 위젯을 선택하세요</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{elements.map((element) => (
|
||||
<CanvasElement
|
||||
key={element.id}
|
||||
element={element}
|
||||
isSelected={selectedElement === element.id}
|
||||
cellSize={GRID_CONFIG.CELL_SIZE}
|
||||
cellSize={cellSize}
|
||||
canvasWidth={canvasWidth}
|
||||
onUpdate={onUpdateElement}
|
||||
onRemove={onRemoveElement}
|
||||
onSelect={onSelectElement}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
import React, { useState, useRef, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { DashboardCanvas } from "./DashboardCanvas";
|
||||
import { DashboardSidebar } from "./DashboardSidebar";
|
||||
import { DashboardToolbar } from "./DashboardToolbar";
|
||||
import { DashboardTopMenu } from "./DashboardTopMenu";
|
||||
import { ElementConfigModal } from "./ElementConfigModal";
|
||||
import { ListWidgetConfigModal } from "./widgets/ListWidgetConfigModal";
|
||||
import { DashboardElement, ElementType, ElementSubtype } from "./types";
|
||||
import { GRID_CONFIG } from "./gridUtils";
|
||||
import { GRID_CONFIG, snapToGrid, snapSizeToGrid, calculateCellSize } from "./gridUtils";
|
||||
import { Resolution, RESOLUTIONS, detectScreenResolution } from "./ResolutionSelector";
|
||||
|
||||
interface DashboardDesignerProps {
|
||||
dashboardId?: string;
|
||||
|
|
@ -33,6 +33,82 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>("#f9fafb");
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 화면 해상도 자동 감지
|
||||
const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
|
||||
const [resolution, setResolution] = useState<Resolution>(screenResolution);
|
||||
|
||||
// resolution 변경 감지 및 요소 자동 조정
|
||||
const handleResolutionChange = useCallback(
|
||||
(newResolution: Resolution) => {
|
||||
console.log("🎯 해상도 변경 요청:", newResolution);
|
||||
setResolution((prev) => {
|
||||
console.log("🎯 이전 해상도:", prev);
|
||||
|
||||
// 이전 해상도와 새 해상도의 캔버스 너비 비율 계산
|
||||
const oldConfig = RESOLUTIONS[prev];
|
||||
const newConfig = RESOLUTIONS[newResolution];
|
||||
const widthRatio = newConfig.width / oldConfig.width;
|
||||
|
||||
console.log("📐 너비 비율:", widthRatio, `(${oldConfig.width}px → ${newConfig.width}px)`);
|
||||
|
||||
// 요소들의 위치와 크기를 비율에 맞춰 조정
|
||||
if (widthRatio !== 1 && elements.length > 0) {
|
||||
// 새 해상도의 셀 크기 계산
|
||||
const newCellSize = calculateCellSize(newConfig.width);
|
||||
|
||||
const adjustedElements = elements.map((el) => {
|
||||
// 비율에 맞춰 조정 (X와 너비만)
|
||||
const scaledX = el.position.x * widthRatio;
|
||||
const scaledWidth = el.size.width * widthRatio;
|
||||
|
||||
// 그리드에 스냅 (X, Y, 너비, 높이 모두)
|
||||
const snappedX = snapToGrid(scaledX, newCellSize);
|
||||
const snappedY = snapToGrid(el.position.y, newCellSize);
|
||||
const snappedWidth = snapSizeToGrid(scaledWidth, 2, newCellSize);
|
||||
const snappedHeight = snapSizeToGrid(el.size.height, 2, newCellSize);
|
||||
|
||||
return {
|
||||
...el,
|
||||
position: {
|
||||
x: snappedX,
|
||||
y: snappedY,
|
||||
},
|
||||
size: {
|
||||
width: snappedWidth,
|
||||
height: snappedHeight,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
console.log("✨ 요소 위치/크기 자동 조정 (그리드 스냅 적용):", adjustedElements.length, "개");
|
||||
setElements(adjustedElements);
|
||||
}
|
||||
|
||||
return newResolution;
|
||||
});
|
||||
},
|
||||
[elements],
|
||||
);
|
||||
|
||||
// 현재 해상도 설정 (안전하게 기본값 제공)
|
||||
const canvasConfig = RESOLUTIONS[resolution] || RESOLUTIONS.fhd;
|
||||
|
||||
// 캔버스 높이 동적 계산 (요소들의 최하단 위치 기준)
|
||||
const calculateCanvasHeight = useCallback(() => {
|
||||
if (elements.length === 0) {
|
||||
return canvasConfig.height; // 기본 높이
|
||||
}
|
||||
|
||||
// 모든 요소의 최하단 y 좌표 계산
|
||||
const maxBottomY = Math.max(...elements.map((el) => el.position.y + el.size.height));
|
||||
|
||||
// 최소 높이는 기본 높이, 요소가 아래로 내려가면 자동으로 늘어남
|
||||
// 패딩 추가 (100px 여유)
|
||||
return Math.max(canvasConfig.height, maxBottomY + 100);
|
||||
}, [elements, canvasConfig.height]);
|
||||
|
||||
const dynamicCanvasHeight = calculateCanvasHeight();
|
||||
|
||||
// 대시보드 ID가 props로 전달되면 로드
|
||||
React.useEffect(() => {
|
||||
if (initialDashboardId) {
|
||||
|
|
@ -55,6 +131,25 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
setDashboardId(dashboard.id);
|
||||
setDashboardTitle(dashboard.title);
|
||||
|
||||
// 저장된 설정 복원
|
||||
console.log("🔍 로드된 대시보드:", dashboard);
|
||||
console.log("📦 저장된 settings:", (dashboard as any).settings);
|
||||
console.log("🎯 settings 타입:", typeof (dashboard as any).settings);
|
||||
console.log("🔍 resolution 값:", (dashboard as any).settings?.resolution);
|
||||
|
||||
if ((dashboard as any).settings?.resolution) {
|
||||
const savedResolution = (dashboard as any).settings.resolution as Resolution;
|
||||
console.log("✅ 저장된 해상도 복원:", savedResolution);
|
||||
setResolution(savedResolution);
|
||||
} else {
|
||||
console.log("⚠️ 저장된 해상도 없음");
|
||||
}
|
||||
|
||||
if ((dashboard as any).settings?.backgroundColor) {
|
||||
console.log("✅ 저장된 배경색 복원:", (dashboard as any).settings.backgroundColor);
|
||||
setCanvasBackgroundColor((dashboard as any).settings.backgroundColor);
|
||||
}
|
||||
|
||||
// 요소들 설정
|
||||
if (dashboard.elements && dashboard.elements.length > 0) {
|
||||
setElements(dashboard.elements);
|
||||
|
|
@ -81,9 +176,15 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
}
|
||||
};
|
||||
|
||||
// 새로운 요소 생성 (고정 그리드 기반 기본 크기)
|
||||
// 새로운 요소 생성 (동적 그리드 기반 기본 크기)
|
||||
const createElement = useCallback(
|
||||
(type: ElementType, subtype: ElementSubtype, x: number, y: number) => {
|
||||
// 좌표 유효성 검사
|
||||
if (isNaN(x) || isNaN(y)) {
|
||||
console.error("Invalid coordinates:", { x, y });
|
||||
return;
|
||||
}
|
||||
|
||||
// 기본 크기 설정
|
||||
let defaultCells = { width: 2, height: 2 }; // 기본 위젯 크기
|
||||
|
||||
|
|
@ -93,11 +194,26 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
defaultCells = { width: 2, height: 3 }; // 달력 최소 크기
|
||||
}
|
||||
|
||||
const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;
|
||||
// 현재 해상도에 맞는 셀 크기 계산
|
||||
const cellSize = Math.floor((canvasConfig.width + GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS) - GRID_CONFIG.GAP;
|
||||
const cellWithGap = cellSize + GRID_CONFIG.GAP;
|
||||
|
||||
const defaultWidth = defaultCells.width * cellWithGap - GRID_CONFIG.GAP;
|
||||
const defaultHeight = defaultCells.height * cellWithGap - GRID_CONFIG.GAP;
|
||||
|
||||
// 크기 유효성 검사
|
||||
if (isNaN(defaultWidth) || isNaN(defaultHeight) || defaultWidth <= 0 || defaultHeight <= 0) {
|
||||
console.error("Invalid size calculated:", {
|
||||
canvasConfig,
|
||||
cellSize,
|
||||
cellWithGap,
|
||||
defaultCells,
|
||||
defaultWidth,
|
||||
defaultHeight,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newElement: DashboardElement = {
|
||||
id: `element-${elementCounter + 1}`,
|
||||
type,
|
||||
|
|
@ -112,7 +228,25 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
setElementCounter((prev) => prev + 1);
|
||||
setSelectedElement(newElement.id);
|
||||
},
|
||||
[elementCounter],
|
||||
[elementCounter, canvasConfig.width],
|
||||
);
|
||||
|
||||
// 메뉴에서 요소 추가 시 (캔버스 중앙에 배치)
|
||||
const addElementFromMenu = useCallback(
|
||||
(type: ElementType, subtype: ElementSubtype) => {
|
||||
// 캔버스 중앙 좌표 계산
|
||||
const centerX = Math.floor(canvasConfig.width / 2);
|
||||
const centerY = Math.floor(canvasConfig.height / 2);
|
||||
|
||||
// 좌표 유효성 확인
|
||||
if (isNaN(centerX) || isNaN(centerY)) {
|
||||
console.error("Invalid canvas config:", canvasConfig);
|
||||
return;
|
||||
}
|
||||
|
||||
createElement(type, subtype, centerX, centerY);
|
||||
},
|
||||
[canvasConfig.width, canvasConfig.height, createElement],
|
||||
);
|
||||
|
||||
// 요소 업데이트
|
||||
|
|
@ -200,9 +334,24 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
|
||||
if (dashboardId) {
|
||||
// 기존 대시보드 업데이트
|
||||
savedDashboard = await dashboardApi.updateDashboard(dashboardId, {
|
||||
console.log("💾 저장 시작 - 현재 resolution 상태:", resolution);
|
||||
console.log("💾 저장 시작 - 현재 배경색 상태:", canvasBackgroundColor);
|
||||
|
||||
const updateData = {
|
||||
elements: elementsData,
|
||||
});
|
||||
settings: {
|
||||
resolution,
|
||||
backgroundColor: canvasBackgroundColor,
|
||||
},
|
||||
};
|
||||
|
||||
console.log("💾 저장할 데이터:", updateData);
|
||||
console.log("💾 저장할 settings:", updateData.settings);
|
||||
|
||||
savedDashboard = await dashboardApi.updateDashboard(dashboardId, updateData);
|
||||
|
||||
console.log("✅ 저장된 대시보드:", savedDashboard);
|
||||
console.log("✅ 저장된 settings:", (savedDashboard as any).settings);
|
||||
|
||||
alert(`대시보드 "${savedDashboard.title}"이 업데이트되었습니다!`);
|
||||
|
||||
|
|
@ -220,6 +369,10 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
description: description || undefined,
|
||||
isPublic: false,
|
||||
elements: elementsData,
|
||||
settings: {
|
||||
resolution,
|
||||
backgroundColor: canvasBackgroundColor,
|
||||
},
|
||||
};
|
||||
|
||||
savedDashboard = await dashboardApi.createDashboard(dashboardData);
|
||||
|
|
@ -234,7 +387,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
|
||||
alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}\n\n관리자에게 문의하세요.`);
|
||||
}
|
||||
}, [elements, dashboardId, router]);
|
||||
}, [elements, dashboardId, router, resolution, canvasBackgroundColor]);
|
||||
|
||||
// 로딩 중이면 로딩 화면 표시
|
||||
if (isLoading) {
|
||||
|
|
@ -250,25 +403,30 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full bg-gray-50">
|
||||
{/* 캔버스 영역 */}
|
||||
<div className="relative flex-1 overflow-auto border-r-2 border-gray-300 bg-gray-100">
|
||||
{/* 편집 중인 대시보드 표시 */}
|
||||
{dashboardTitle && (
|
||||
<div className="bg-accent0 absolute top-6 left-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
|
||||
📝 편집 중: {dashboardTitle}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DashboardToolbar
|
||||
onClearCanvas={clearCanvas}
|
||||
<div className="flex h-full flex-col bg-gray-50">
|
||||
{/* 상단 메뉴바 */}
|
||||
<DashboardTopMenu
|
||||
onSaveLayout={saveLayout}
|
||||
canvasBackgroundColor={canvasBackgroundColor}
|
||||
onCanvasBackgroundColorChange={setCanvasBackgroundColor}
|
||||
onClearCanvas={clearCanvas}
|
||||
onViewDashboard={dashboardId ? () => router.push(`/dashboard/${dashboardId}`) : undefined}
|
||||
dashboardTitle={dashboardTitle}
|
||||
onAddElement={addElementFromMenu}
|
||||
resolution={resolution}
|
||||
onResolutionChange={handleResolutionChange}
|
||||
currentScreenResolution={screenResolution}
|
||||
backgroundColor={canvasBackgroundColor}
|
||||
onBackgroundColorChange={setCanvasBackgroundColor}
|
||||
/>
|
||||
|
||||
{/* 캔버스 중앙 정렬 컨테이너 */}
|
||||
<div className="flex justify-center p-4">
|
||||
{/* 캔버스 영역 - 해상도에 따른 크기, 중앙 정렬 */}
|
||||
<div className="flex flex-1 items-start justify-center overflow-auto bg-gray-100 p-8">
|
||||
<div
|
||||
className="relative shadow-2xl"
|
||||
style={{
|
||||
width: `${canvasConfig.width}px`,
|
||||
minHeight: `${canvasConfig.height}px`,
|
||||
}}
|
||||
>
|
||||
<DashboardCanvas
|
||||
ref={canvasRef}
|
||||
elements={elements}
|
||||
|
|
@ -279,13 +437,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
|
|||
onSelectElement={setSelectedElement}
|
||||
onConfigureElement={openConfigModal}
|
||||
backgroundColor={canvasBackgroundColor}
|
||||
canvasWidth={canvasConfig.width}
|
||||
canvasHeight={dynamicCanvasHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 사이드바 */}
|
||||
<DashboardSidebar />
|
||||
|
||||
{/* 요소 설정 모달 */}
|
||||
{configModalElement && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,230 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Save, Trash2, Eye, Palette } from "lucide-react";
|
||||
import { ElementType, ElementSubtype } from "./types";
|
||||
import { ResolutionSelector, Resolution } from "./ResolutionSelector";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
|
||||
interface DashboardTopMenuProps {
|
||||
onSaveLayout: () => void;
|
||||
onClearCanvas: () => void;
|
||||
onViewDashboard?: () => void;
|
||||
dashboardTitle?: string;
|
||||
onAddElement?: (type: ElementType, subtype: ElementSubtype) => void;
|
||||
resolution?: Resolution;
|
||||
onResolutionChange?: (resolution: Resolution) => void;
|
||||
currentScreenResolution?: Resolution;
|
||||
backgroundColor?: string;
|
||||
onBackgroundColorChange?: (color: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 대시보드 편집 화면 상단 메뉴바
|
||||
* - 차트/위젯 선택 (셀렉트박스)
|
||||
* - 저장/초기화/보기 버튼
|
||||
*/
|
||||
export function DashboardTopMenu({
|
||||
onSaveLayout,
|
||||
onClearCanvas,
|
||||
onViewDashboard,
|
||||
dashboardTitle,
|
||||
onAddElement,
|
||||
resolution = "fhd",
|
||||
onResolutionChange,
|
||||
currentScreenResolution,
|
||||
backgroundColor = "#f9fafb",
|
||||
onBackgroundColorChange,
|
||||
}: DashboardTopMenuProps) {
|
||||
const [chartValue, setChartValue] = React.useState<string>("");
|
||||
const [widgetValue, setWidgetValue] = React.useState<string>("");
|
||||
|
||||
// 차트 선택 시 캔버스 중앙에 추가
|
||||
const handleChartSelect = (value: string) => {
|
||||
if (onAddElement) {
|
||||
onAddElement("chart", value as ElementSubtype);
|
||||
// 선택 후 즉시 리셋하여 같은 항목을 연속으로 선택 가능하게
|
||||
setTimeout(() => setChartValue(""), 0);
|
||||
}
|
||||
};
|
||||
|
||||
// 위젯 선택 시 캔버스 중앙에 추가
|
||||
const handleWidgetSelect = (value: string) => {
|
||||
if (onAddElement) {
|
||||
onAddElement("widget", value as ElementSubtype);
|
||||
// 선택 후 즉시 리셋하여 같은 항목을 연속으로 선택 가능하게
|
||||
setTimeout(() => setWidgetValue(""), 0);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-16 items-center justify-between border-b bg-white px-6 shadow-sm">
|
||||
{/* 좌측: 대시보드 제목 */}
|
||||
<div className="flex items-center gap-4">
|
||||
{dashboardTitle && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg font-semibold text-gray-900">{dashboardTitle}</span>
|
||||
<span className="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">편집 중</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 중앙: 해상도 선택 & 요소 추가 */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 해상도 선택 */}
|
||||
{onResolutionChange && (
|
||||
<ResolutionSelector
|
||||
value={resolution}
|
||||
onChange={onResolutionChange}
|
||||
currentScreenResolution={currentScreenResolution}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="h-6 w-px bg-gray-300" />
|
||||
|
||||
{/* 배경색 선택 */}
|
||||
{onBackgroundColorChange && (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<Palette className="h-4 w-4" />
|
||||
<div className="h-4 w-4 rounded border border-gray-300" style={{ backgroundColor }} />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="z-[99999] w-64">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium">캔버스 배경색</label>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="color"
|
||||
value={backgroundColor}
|
||||
onChange={(e) => onBackgroundColorChange(e.target.value)}
|
||||
className="h-10 w-20 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={backgroundColor}
|
||||
onChange={(e) => onBackgroundColorChange(e.target.value)}
|
||||
placeholder="#f9fafb"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2">
|
||||
{[
|
||||
"#ffffff",
|
||||
"#f9fafb",
|
||||
"#f3f4f6",
|
||||
"#e5e7eb",
|
||||
"#1f2937",
|
||||
"#111827",
|
||||
"#fef3c7",
|
||||
"#fde68a",
|
||||
"#dbeafe",
|
||||
"#bfdbfe",
|
||||
"#fecaca",
|
||||
"#fca5a5",
|
||||
].map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
className="h-8 w-8 rounded border-2 transition-transform hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderColor: backgroundColor === color ? "#3b82f6" : "#d1d5db",
|
||||
}}
|
||||
onClick={() => onBackgroundColorChange(color)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
<div className="h-6 w-px bg-gray-300" />
|
||||
{/* 차트 선택 */}
|
||||
<Select value={chartValue} onValueChange={handleChartSelect}>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="차트 추가" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[99999]">
|
||||
<SelectGroup>
|
||||
<SelectLabel>차트</SelectLabel>
|
||||
<SelectItem value="bar">바 차트</SelectItem>
|
||||
<SelectItem value="horizontal-bar">수평 바 차트</SelectItem>
|
||||
<SelectItem value="stacked-bar">누적 바 차트</SelectItem>
|
||||
<SelectItem value="line">꺾은선 차트</SelectItem>
|
||||
<SelectItem value="area">영역 차트</SelectItem>
|
||||
<SelectItem value="pie">원형 차트</SelectItem>
|
||||
<SelectItem value="donut">도넛 차트</SelectItem>
|
||||
<SelectItem value="combo">콤보 차트</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 위젯 선택 */}
|
||||
<Select value={widgetValue} onValueChange={handleWidgetSelect}>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="위젯 추가" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[99999]">
|
||||
<SelectGroup>
|
||||
<SelectLabel>데이터 위젯</SelectLabel>
|
||||
<SelectItem value="list">리스트 위젯</SelectItem>
|
||||
<SelectItem value="map">지도</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>일반 위젯</SelectLabel>
|
||||
<SelectItem value="weather">날씨</SelectItem>
|
||||
<SelectItem value="exchange">환율</SelectItem>
|
||||
<SelectItem value="calculator">계산기</SelectItem>
|
||||
<SelectItem value="calendar">달력</SelectItem>
|
||||
<SelectItem value="clock">시계</SelectItem>
|
||||
<SelectItem value="todo">할 일</SelectItem>
|
||||
<SelectItem value="booking-alert">예약 알림</SelectItem>
|
||||
<SelectItem value="maintenance">정비 일정</SelectItem>
|
||||
<SelectItem value="document">문서</SelectItem>
|
||||
<SelectItem value="risk-alert">리스크 알림</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>차량 관리</SelectLabel>
|
||||
<SelectItem value="vehicle-status">차량 상태</SelectItem>
|
||||
<SelectItem value="vehicle-list">차량 목록</SelectItem>
|
||||
<SelectItem value="vehicle-map">차량 위치</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 우측: 액션 버튼 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{onViewDashboard && (
|
||||
<Button variant="outline" size="sm" onClick={onViewDashboard} className="gap-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
미리보기
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm" onClick={onClearCanvas} className="gap-2 text-red-600 hover:text-red-700">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
초기화
|
||||
</Button>
|
||||
<Button size="sm" onClick={onSaveLayout} className="gap-2">
|
||||
<Save className="h-4 w-4" />
|
||||
저장
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Monitor } from "lucide-react";
|
||||
|
||||
export type Resolution = "hd" | "fhd" | "qhd" | "uhd";
|
||||
|
||||
export interface ResolutionConfig {
|
||||
width: number;
|
||||
height: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const RESOLUTIONS: Record<Resolution, ResolutionConfig> = {
|
||||
hd: {
|
||||
width: 1280 - 360,
|
||||
height: 720 - 312,
|
||||
label: "HD (1280x720)",
|
||||
},
|
||||
fhd: {
|
||||
width: 1920 - 360,
|
||||
height: 1080 - 312,
|
||||
label: "Full HD (1920x1080)",
|
||||
},
|
||||
qhd: {
|
||||
width: 2560 - 360,
|
||||
height: 1440 - 312,
|
||||
label: "QHD (2560x1440)",
|
||||
},
|
||||
uhd: {
|
||||
width: 3840 - 360,
|
||||
height: 2160 - 312,
|
||||
label: "4K UHD (3840x2160)",
|
||||
},
|
||||
};
|
||||
|
||||
interface ResolutionSelectorProps {
|
||||
value: Resolution;
|
||||
onChange: (resolution: Resolution) => void;
|
||||
currentScreenResolution?: Resolution;
|
||||
}
|
||||
|
||||
/**
|
||||
* 현재 화면 해상도 감지
|
||||
*/
|
||||
export function detectScreenResolution(): Resolution {
|
||||
if (typeof window === "undefined") return "fhd";
|
||||
|
||||
const width = window.screen.width;
|
||||
const height = window.screen.height;
|
||||
|
||||
// 화면 해상도에 따라 적절한 캔버스 해상도 반환
|
||||
if (width >= 3840 || height >= 2160) return "uhd";
|
||||
if (width >= 2560 || height >= 1440) return "qhd";
|
||||
if (width >= 1920 || height >= 1080) return "fhd";
|
||||
return "hd";
|
||||
}
|
||||
|
||||
/**
|
||||
* 해상도 선택 컴포넌트
|
||||
* - HD, Full HD, QHD, 4K UHD 지원
|
||||
* - 12칸 그리드 유지, 셀 크기만 변경
|
||||
* - 현재 화면 해상도 감지 및 경고 표시
|
||||
*/
|
||||
export function ResolutionSelector({ value, onChange, currentScreenResolution }: ResolutionSelectorProps) {
|
||||
const currentConfig = RESOLUTIONS[value];
|
||||
const screenConfig = currentScreenResolution ? RESOLUTIONS[currentScreenResolution] : null;
|
||||
|
||||
// 현재 선택된 해상도가 화면보다 큰지 확인
|
||||
const isTooLarge =
|
||||
screenConfig &&
|
||||
(currentConfig.width > screenConfig.width + 360 || currentConfig.height > screenConfig.height + 312);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Monitor className="h-4 w-4 text-gray-500" />
|
||||
<Select value={value} onValueChange={(v) => onChange(v as Resolution)}>
|
||||
<SelectTrigger className={`w-[180px] ${isTooLarge ? "border-orange-500" : ""}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="z-[99999]">
|
||||
<SelectGroup>
|
||||
<SelectLabel>캔버스 해상도</SelectLabel>
|
||||
<SelectItem value="hd">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>HD</span>
|
||||
<span className="text-xs text-gray-500">1280x720</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="fhd">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Full HD</span>
|
||||
<span className="text-xs text-gray-500">1920x1080</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="qhd">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>QHD</span>
|
||||
<span className="text-xs text-gray-500">2560x1440</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="uhd">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>4K UHD</span>
|
||||
<span className="text-xs text-gray-500">3840x2160</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{isTooLarge && <span className="text-xs text-orange-600">⚠️ 현재 화면보다 큽니다</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,18 +5,36 @@
|
|||
* - 스냅 기능
|
||||
*/
|
||||
|
||||
// 그리드 설정 (고정 크기)
|
||||
// 기본 그리드 설정 (FHD 기준)
|
||||
export const GRID_CONFIG = {
|
||||
COLUMNS: 12,
|
||||
CELL_SIZE: 132, // 고정 셀 크기
|
||||
GAP: 8, // 셀 간격
|
||||
COLUMNS: 12, // 모든 해상도에서 12칸 고정
|
||||
GAP: 8, // 셀 간격 고정
|
||||
SNAP_THRESHOLD: 15, // 스냅 임계값 (px)
|
||||
ELEMENT_PADDING: 4, // 요소 주위 여백 (px)
|
||||
CANVAS_WIDTH: 1682, // 고정 캔버스 너비 (실제 측정값)
|
||||
// 계산식: (132 + 8) × 12 - 8 = 1672px (그리드)
|
||||
// 추가 여백 10px 포함 = 1682px
|
||||
// CELL_SIZE와 CANVAS_WIDTH는 해상도에 따라 동적 계산
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* 캔버스 너비에 맞춰 셀 크기 계산
|
||||
* 공식: (CELL_SIZE + GAP) * 12 - GAP = canvasWidth
|
||||
* CELL_SIZE = (canvasWidth + GAP) / 12 - GAP
|
||||
*/
|
||||
export function calculateCellSize(canvasWidth: number): number {
|
||||
return Math.floor((canvasWidth + GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS) - GRID_CONFIG.GAP;
|
||||
}
|
||||
|
||||
/**
|
||||
* 해상도별 그리드 설정 계산
|
||||
*/
|
||||
export function calculateGridConfig(canvasWidth: number) {
|
||||
const cellSize = calculateCellSize(canvasWidth);
|
||||
return {
|
||||
...GRID_CONFIG,
|
||||
CELL_SIZE: cellSize,
|
||||
CANVAS_WIDTH: canvasWidth,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 실제 그리드 셀 크기 계산 (gap 포함)
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -78,6 +78,10 @@ export interface Dashboard {
|
|||
elementsCount?: number;
|
||||
creatorName?: string;
|
||||
elements?: DashboardElement[];
|
||||
settings?: {
|
||||
resolution?: string;
|
||||
backgroundColor?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface CreateDashboardRequest {
|
||||
|
|
@ -87,6 +91,10 @@ export interface CreateDashboardRequest {
|
|||
elements: DashboardElement[];
|
||||
tags?: string[];
|
||||
category?: string;
|
||||
settings?: {
|
||||
resolution?: string;
|
||||
backgroundColor?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DashboardListQuery {
|
||||
|
|
|
|||
|
|
@ -20,17 +20,10 @@ echo ""
|
|||
echo "[1/6] Git 최신 코드 가져오기..."
|
||||
git pull origin main
|
||||
|
||||
# 호스트 디렉토리 준비
|
||||
# Docker 볼륨 사용으로 호스트 디렉토리 준비 불필요
|
||||
echo ""
|
||||
echo "[2/6] 호스트 디렉토리 준비..."
|
||||
mkdir -p /home/vexplor/backend_data/data/mail-sent
|
||||
mkdir -p /home/vexplor/backend_data/uploads/mail-attachments
|
||||
mkdir -p /home/vexplor/backend_data/uploads/mail-templates
|
||||
mkdir -p /home/vexplor/backend_data/uploads/mail-accounts
|
||||
mkdir -p /home/vexplor/frontend_data
|
||||
chmod -R 755 /home/vexplor/backend_data
|
||||
chmod -R 755 /home/vexplor/frontend_data
|
||||
echo "디렉토리 생성 완료 (mail-sent, mail-attachments, mail-templates, mail-accounts, frontend)"
|
||||
echo "[2/6] Docker 볼륨 확인..."
|
||||
echo "Docker named volumes 사용 (권한 문제 없음)"
|
||||
|
||||
# 기존 컨테이너 중지 및 제거
|
||||
echo ""
|
||||
|
|
|
|||
Loading…
Reference in New Issue