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

refactor: 코드 정리 및 불필요한 주석 제거 

- EntityJoinController에서 중복 제거 설정 관련 주석 및 코드 삭제
- screenGroupController와 tableManagementController에서 AuthenticatedRequest 타입을 일반 Request로 변경
- 불필요한 로그 및 주석 제거로 코드 가독성 향상
- tableManagementController에서 에러 메시지 개선
This commit is contained in:
DDD1542 2026-01-15 17:36:38 +09:00
parent 9dc549be09
commit efa95af4b9
15 changed files with 1650 additions and 3070 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
backend-node/src/controllers/entityJoinController.ts
View File

@ -30,7 +30,6 @@ export class EntityJoinController {
autoFilter, // 🔒 멀티테넌시 자동 필터 autoFilter, // 🔒 멀티테넌시 자동 필터
dataFilter, // 🆕 데이터 필터 (JSON 문자열) dataFilter, // 🆕 데이터 필터 (JSON 문자열)
excludeFilter, // 🆕 제외 필터 (JSON 문자열) - 다른 테이블에 이미 존재하는 데이터 제외 excludeFilter, // 🆕 제외 필터 (JSON 문자열) - 다른 테이블에 이미 존재하는 데이터 제외
deduplication, // 🆕 중복 제거 설정 (JSON 문자열)
userLang, // userLang은 별도로 분리하여 search에 포함되지 않도록 함 userLang, // userLang은 별도로 분리하여 search에 포함되지 않도록 함
...otherParams ...otherParams
} = req.query; } = req.query;
@ -50,9 +49,6 @@ export class EntityJoinController {
// search가 문자열인 경우 JSON 파싱 // search가 문자열인 경우 JSON 파싱
searchConditions = searchConditions =
typeof search === "string" ? JSON.parse(search) : search; typeof search === "string" ? JSON.parse(search) : search;
// 🔍 디버그: 파싱된 검색 조건 로깅
logger.info(`🔍 파싱된 검색 조건:`, JSON.stringify(searchConditions, null, 2));
} catch (error) { } catch (error) {
logger.warn("검색 조건 파싱 오류:", error); logger.warn("검색 조건 파싱 오류:", error);
searchConditions = {}; searchConditions = {};
@ -155,24 +151,6 @@ export class EntityJoinController {
} }
} }
// 🆕 중복 제거 설정 처리
let parsedDeduplication: {
enabled: boolean;
groupByColumn: string;
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
sortColumn?: string;
} | undefined = undefined;
if (deduplication) {
try {
parsedDeduplication =
typeof deduplication === "string" ? JSON.parse(deduplication) : deduplication;
logger.info("중복 제거 설정 파싱 완료:", parsedDeduplication);
} catch (error) {
logger.warn("중복 제거 설정 파싱 오류:", error);
parsedDeduplication = undefined;
}
}
const result = await tableManagementService.getTableDataWithEntityJoins( const result = await tableManagementService.getTableDataWithEntityJoins(
tableName, tableName,
{ {
@ -190,26 +168,13 @@ export class EntityJoinController {
screenEntityConfigs: parsedScreenEntityConfigs, screenEntityConfigs: parsedScreenEntityConfigs,
dataFilter: parsedDataFilter, // 🆕 데이터 필터 전달 dataFilter: parsedDataFilter, // 🆕 데이터 필터 전달
excludeFilter: parsedExcludeFilter, // 🆕 제외 필터 전달 excludeFilter: parsedExcludeFilter, // 🆕 제외 필터 전달
deduplication: parsedDeduplication, // 🆕 중복 제거 설정 전달
} }
); );
// 🆕 중복 제거 처리 (결과 데이터에 적용)
let finalData = result;
if (parsedDeduplication?.enabled && parsedDeduplication.groupByColumn && Array.isArray(result.data)) {
logger.info(`🔄 중복 제거 시작: 기준 컬럼 = ${parsedDeduplication.groupByColumn}, 전략 = ${parsedDeduplication.keepStrategy}`);
const originalCount = result.data.length;
finalData = {
...result,
data: this.deduplicateData(result.data, parsedDeduplication),
};
logger.info(`✅ 중복 제거 완료: ${originalCount}개 → ${finalData.data.length}개`);
}
res.status(200).json({ res.status(200).json({
success: true, success: true,
message: "Entity 조인 데이터 조회 성공", message: "Entity 조인 데이터 조회 성공",
data: finalData, data: result,
}); });
} catch (error) { } catch (error) {
logger.error("Entity 조인 데이터 조회 실패", error); logger.error("Entity 조인 데이터 조회 실패", error);
@ -584,98 +549,6 @@ export class EntityJoinController {
}); });
} }
} }
/**
* 중복 데이터 제거 (메모리 내 처리)
*/
private deduplicateData(
data: any[],
config: {
groupByColumn: string;
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
sortColumn?: string;
}
): any[] {
if (!data || data.length === 0) return data;
// 그룹별로 데이터 분류
const groups: Record<string, any[]> = {};
for (const row of data) {
const groupKey = row[config.groupByColumn];
if (groupKey === undefined || groupKey === null) continue;
if (!groups[groupKey]) {
groups[groupKey] = [];
}
groups[groupKey].push(row);
}
// 각 그룹에서 하나의 행만 선택
const result: any[] = [];
for (const [groupKey, rows] of Object.entries(groups)) {
if (rows.length === 0) continue;
let selectedRow: any;
switch (config.keepStrategy) {
case "latest":
// 정렬 컬럼 기준 최신 (가장 큰 값)
if (config.sortColumn) {
rows.sort((a, b) => {
const aVal = a[config.sortColumn!];
const bVal = b[config.sortColumn!];
if (aVal === bVal) return 0;
if (aVal > bVal) return -1;
return 1;
});
}
selectedRow = rows[0];
break;
case "earliest":
// 정렬 컬럼 기준 최초 (가장 작은 값)
if (config.sortColumn) {
rows.sort((a, b) => {
const aVal = a[config.sortColumn!];
const bVal = b[config.sortColumn!];
if (aVal === bVal) return 0;
if (aVal < bVal) return -1;
return 1;
});
}
selectedRow = rows[0];
break;
case "base_price":
// base_price가 true인 행 선택
selectedRow = rows.find((r) => r.base_price === true || r.base_price === "true") || rows[0];
break;
case "current_date":
// 오늘 날짜 기준 유효 기간 내 행 선택
const today = new Date().toISOString().split("T")[0];
selectedRow = rows.find((r) => {
const startDate = r.start_date;
const endDate = r.end_date;
if (!startDate) return true;
if (startDate <= today && (!endDate || endDate >= today)) return true;
return false;
}) || rows[0];
break;
default:
selectedRow = rows[0];
}
if (selectedRow) {
result.push(selectedRow);
}
}
return result;
}
} }
export const entityJoinController = new EntityJoinController(); export const entityJoinController = new EntityJoinController();

136
backend-node/src/controllers/screenGroupController.ts
View File

@ -1,23 +1,18 @@
import { Request, Response } from "express"; import { Request, Response } from "express";
import { getPool } from "../database/db"; import { getPool } from "../database/db";
import { logger } from "../utils/logger"; import { logger } from "../utils/logger";
import { MultiLangService } from "../services/multilangService";
import { AuthenticatedRequest } from "../types/auth";
// pool 인스턴스 가져오기 // pool 인스턴스 가져오기
const pool = getPool(); const pool = getPool();
// 다국어 서비스 인스턴스
const multiLangService = new MultiLangService();
// ============================================================ // ============================================================
// 화면 그룹 (screen_groups) CRUD // 화면 그룹 (screen_groups) CRUD
// ============================================================ // ============================================================
// 화면 그룹 목록 조회 // 화면 그룹 목록 조회
export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => { export const getScreenGroups = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { page = 1, size = 20, searchTerm } = req.query; const { page = 1, size = 20, searchTerm } = req.query;
const offset = (parseInt(page as string) - 1) * parseInt(size as string); const offset = (parseInt(page as string) - 1) * parseInt(size as string);
@ -89,10 +84,10 @@ export const getScreenGroups = async (req: AuthenticatedRequest, res: Response)
}; };
// 화면 그룹 상세 조회 // 화면 그룹 상세 조회
export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => { export const getScreenGroup = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
let query = ` let query = `
SELECT sg.*, SELECT sg.*,
@ -135,10 +130,10 @@ export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) =
}; };
// 화면 그룹 생성 // 화면 그룹 생성
export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => { export const createScreenGroup = async (req: Request, res: Response) => {
try { try {
const userCompanyCode = req.user!.companyCode; const userCompanyCode = (req.user as any).companyCode;
const userId = req.user!.userId; const userId = (req.user as any).userId;
const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body; const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
if (!group_name || !group_code) { if (!group_name || !group_code) {
@ -196,47 +191,6 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
// 업데이트된 데이터 반환 // 업데이트된 데이터 반환
const updatedResult = await pool.query(`SELECT * FROM screen_groups WHERE id = $1`, [newGroupId]); const updatedResult = await pool.query(`SELECT * FROM screen_groups WHERE id = $1`, [newGroupId]);
// 다국어 카테고리 자동 생성 (그룹 경로 기반)
try {
// 그룹 경로 조회 (상위 그룹 → 현재 그룹)
const groupPathResult = await pool.query(
`WITH RECURSIVE group_path AS (
SELECT id, parent_group_id, group_name, group_level, 1 as depth
FROM screen_groups
WHERE id = $1
UNION ALL
SELECT g.id, g.parent_group_id, g.group_name, g.group_level, gp.depth + 1
FROM screen_groups g
INNER JOIN group_path gp ON g.id = gp.parent_group_id
WHERE g.parent_group_id IS NOT NULL
)
SELECT group_name FROM group_path
ORDER BY depth DESC`,
[newGroupId]
);
const groupPath = groupPathResult.rows.map((r: any) => r.group_name);
// 회사 이름 조회
let companyName = "공통";
if (finalCompanyCode !== "*") {
const companyResult = await pool.query(
`SELECT company_name FROM company_mng WHERE company_code = $1`,
[finalCompanyCode]
);
if (companyResult.rows.length > 0) {
companyName = companyResult.rows[0].company_name;
}
}
// 다국어 카테고리 생성
await multiLangService.ensureScreenGroupCategory(finalCompanyCode, companyName, groupPath);
logger.info("화면 그룹 다국어 카테고리 자동 생성 완료", { groupPath, companyCode: finalCompanyCode });
} catch (multilangError: any) {
// 다국어 카테고리 생성 실패해도 그룹 생성은 성공으로 처리
logger.warn("화면 그룹 다국어 카테고리 생성 실패 (무시하고 계속):", multilangError.message);
}
logger.info("화면 그룹 생성", { userCompanyCode, finalCompanyCode, groupId: newGroupId, groupName: group_name, parentGroupId: parent_group_id }); logger.info("화면 그룹 생성", { userCompanyCode, finalCompanyCode, groupId: newGroupId, groupName: group_name, parentGroupId: parent_group_id });
res.json({ success: true, data: updatedResult.rows[0], message: "화면 그룹이 생성되었습니다." }); res.json({ success: true, data: updatedResult.rows[0], message: "화면 그룹이 생성되었습니다." });
@ -250,10 +204,10 @@ export const createScreenGroup = async (req: AuthenticatedRequest, res: Response
}; };
// 화면 그룹 수정 // 화면 그룹 수정
export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => { export const updateScreenGroup = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const userCompanyCode = req.user!.companyCode; const userCompanyCode = (req.user as any).companyCode;
const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body; const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
// 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지 // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@ -339,10 +293,10 @@ export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response
}; };
// 화면 그룹 삭제 // 화면 그룹 삭제
export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => { export const deleteScreenGroup = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
let query = `DELETE FROM screen_groups WHERE id = $1`; let query = `DELETE FROM screen_groups WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -375,10 +329,10 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
// ============================================================ // ============================================================
// 그룹에 화면 추가 // 그룹에 화면 추가
export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => { export const addScreenToGroup = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const userId = req.user!.userId; const userId = (req.user as any).userId;
const { group_id, screen_id, screen_role, display_order, is_default } = req.body; const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
if (!group_id || !screen_id) { if (!group_id || !screen_id) {
@ -415,10 +369,10 @@ export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response)
}; };
// 그룹에서 화면 제거 // 그룹에서 화면 제거
export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => { export const removeScreenFromGroup = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
let query = `DELETE FROM screen_group_screens WHERE id = $1`; let query = `DELETE FROM screen_group_screens WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -446,10 +400,10 @@ export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Resp
}; };
// 그룹 내 화면 순서/역할 수정 // 그룹 내 화면 순서/역할 수정
export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => { export const updateScreenInGroup = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { screen_role, display_order, is_default } = req.body; const { screen_role, display_order, is_default } = req.body;
let query = ` let query = `
@ -485,9 +439,9 @@ export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Respon
// ============================================================ // ============================================================
// 화면 필드 조인 목록 조회 // 화면 필드 조인 목록 조회
export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => { export const getFieldJoins = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { screen_id } = req.query; const { screen_id } = req.query;
let query = ` let query = `
@ -526,10 +480,10 @@ export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) =>
}; };
// 화면 필드 조인 생성 // 화면 필드 조인 생성
export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => { export const createFieldJoin = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const userId = req.user!.userId; const userId = (req.user as any).userId;
const { const {
screen_id, layout_id, component_id, field_name, screen_id, layout_id, component_id, field_name,
save_table, save_column, join_table, join_column, display_column, save_table, save_column, join_table, join_column, display_column,
@ -567,10 +521,10 @@ export const createFieldJoin = async (req: AuthenticatedRequest, res: Response)
}; };
// 화면 필드 조인 수정 // 화면 필드 조인 수정
export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => { export const updateFieldJoin = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { const {
layout_id, component_id, field_name, layout_id, component_id, field_name,
save_table, save_column, join_table, join_column, display_column, save_table, save_column, join_table, join_column, display_column,
@ -612,10 +566,10 @@ export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response)
}; };
// 화면 필드 조인 삭제 // 화면 필드 조인 삭제
export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => { export const deleteFieldJoin = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
let query = `DELETE FROM screen_field_joins WHERE id = $1`; let query = `DELETE FROM screen_field_joins WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -646,9 +600,9 @@ export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response)
// ============================================================ // ============================================================
// 데이터 흐름 목록 조회 // 데이터 흐름 목록 조회
export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => { export const getDataFlows = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { group_id, source_screen_id } = req.query; const { group_id, source_screen_id } = req.query;
let query = ` let query = `
@ -696,10 +650,10 @@ export const getDataFlows = async (req: AuthenticatedRequest, res: Response) =>
}; };
// 데이터 흐름 생성 // 데이터 흐름 생성
export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => { export const createDataFlow = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const userId = req.user!.userId; const userId = (req.user as any).userId;
const { const {
group_id, source_screen_id, source_action, target_screen_id, target_action, group_id, source_screen_id, source_action, target_screen_id, target_action,
data_mapping, flow_type, flow_label, condition_expression, is_active data_mapping, flow_type, flow_label, condition_expression, is_active
@ -735,10 +689,10 @@ export const createDataFlow = async (req: AuthenticatedRequest, res: Response) =
}; };
// 데이터 흐름 수정 // 데이터 흐름 수정
export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => { export const updateDataFlow = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { const {
group_id, source_screen_id, source_action, target_screen_id, target_action, group_id, source_screen_id, source_action, target_screen_id, target_action,
data_mapping, flow_type, flow_label, condition_expression, is_active data_mapping, flow_type, flow_label, condition_expression, is_active
@ -778,10 +732,10 @@ export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) =
}; };
// 데이터 흐름 삭제 // 데이터 흐름 삭제
export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => { export const deleteDataFlow = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
let query = `DELETE FROM screen_data_flows WHERE id = $1`; let query = `DELETE FROM screen_data_flows WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];
@ -812,9 +766,9 @@ export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) =
// ============================================================ // ============================================================
// 화면-테이블 관계 목록 조회 // 화면-테이블 관계 목록 조회
export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => { export const getTableRelations = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { screen_id, group_id } = req.query; const { screen_id, group_id } = req.query;
let query = ` let query = `
@ -861,10 +815,10 @@ export const getTableRelations = async (req: AuthenticatedRequest, res: Response
}; };
// 화면-테이블 관계 생성 // 화면-테이블 관계 생성
export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => { export const createTableRelation = async (req: Request, res: Response) => {
try { try {
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const userId = req.user!.userId; const userId = (req.user as any).userId;
const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body; const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
if (!screen_id || !table_name) { if (!screen_id || !table_name) {
@ -894,10 +848,10 @@ export const createTableRelation = async (req: AuthenticatedRequest, res: Respon
}; };
// 화면-테이블 관계 수정 // 화면-테이블 관계 수정
export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => { export const updateTableRelation = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body; const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
let query = ` let query = `
@ -929,10 +883,10 @@ export const updateTableRelation = async (req: AuthenticatedRequest, res: Respon
}; };
// 화면-테이블 관계 삭제 // 화면-테이블 관계 삭제
export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => { export const deleteTableRelation = async (req: Request, res: Response) => {
try { try {
const { id } = req.params; const { id } = req.params;
const companyCode = req.user!.companyCode; const companyCode = (req.user as any).companyCode;
let query = `DELETE FROM screen_table_relations WHERE id = $1`; let query = `DELETE FROM screen_table_relations WHERE id = $1`;
const params: any[] = [id]; const params: any[] = [id];

353
backend-node/src/controllers/tableManagementController.ts
View File

@ -804,12 +804,6 @@ export async function getTableData(
} }
} }
// 🆕 최종 검색 조건 로그
logger.info(
`🔍 최종 검색 조건 (enhancedSearch):`,
JSON.stringify(enhancedSearch)
);
// 데이터 조회 // 데이터 조회
const result = await tableManagementService.getTableData(tableName, { const result = await tableManagementService.getTableData(tableName, {
page: parseInt(page), page: parseInt(page),
@ -893,10 +887,7 @@ export async function addTableData(
const companyCode = req.user?.companyCode; const companyCode = req.user?.companyCode;
if (companyCode && !data.company_code) { if (companyCode && !data.company_code) {
// 테이블에 company_code 컬럼이 있는지 확인 // 테이블에 company_code 컬럼이 있는지 확인
const hasCompanyCodeColumn = await tableManagementService.hasColumn( const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
tableName,
"company_code"
);
if (hasCompanyCodeColumn) { if (hasCompanyCodeColumn) {
data.company_code = companyCode; data.company_code = companyCode;
logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`); logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`);
@ -906,10 +897,7 @@ export async function addTableData(
// 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우) // 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우)
const userId = req.user?.userId; const userId = req.user?.userId;
if (userId && !data.writer) { if (userId && !data.writer) {
const hasWriterColumn = await tableManagementService.hasColumn( const hasWriterColumn = await tableManagementService.hasColumn(tableName, "writer");
tableName,
"writer"
);
if (hasWriterColumn) { if (hasWriterColumn) {
data.writer = userId; data.writer = userId;
logger.info(`writer 자동 추가 - ${userId}`); logger.info(`writer 자동 추가 - ${userId}`);
@ -917,25 +905,13 @@ export async function addTableData(
} }
// 데이터 추가 // 데이터 추가
const result = await tableManagementService.addTableData(tableName, data); await tableManagementService.addTableData(tableName, data);
logger.info(`테이블 데이터 추가 완료: ${tableName}`); logger.info(`테이블 데이터 추가 완료: ${tableName}`);
// 무시된 컬럼이 있으면 경고 정보 포함 const response: ApiResponse<null> = {
const response: ApiResponse<{
skippedColumns?: string[];
savedColumns?: string[];
}> = {
success: true, success: true,
message: message: "테이블 데이터를 성공적으로 추가했습니다.",
result.skippedColumns.length > 0
? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
: "테이블 데이터를 성공적으로 추가했습니다.",
data: {
skippedColumns:
result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
savedColumns: result.savedColumns,
},
}; };
res.status(201).json(response); res.status(201).json(response);
@ -1679,10 +1655,7 @@ export async function getCategoryColumnsByMenu(
const { menuObjid } = req.params; const { menuObjid } = req.params;
const companyCode = req.user?.companyCode; const companyCode = req.user?.companyCode;
logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { menuObjid, companyCode });
menuObjid,
companyCode,
});
if (!menuObjid) { if (!menuObjid) {
res.status(400).json({ res.status(400).json({
@ -1708,10 +1681,7 @@ export async function getCategoryColumnsByMenu(
if (mappingTableExists) { if (mappingTableExists) {
// 🆕 category_column_mapping을 사용한 계층 구조 기반 조회 // 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
logger.info( logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
"🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)",
{ menuObjid, companyCode }
);
// 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀) // 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
const ancestorMenuQuery = ` const ancestorMenuQuery = `
@ -1735,18 +1705,14 @@ export async function getCategoryColumnsByMenu(
FROM menu_hierarchy FROM menu_hierarchy
`; `;
const ancestorMenuResult = await pool.query(ancestorMenuQuery, [ const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
parseInt(menuObjid), const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
]);
const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [
parseInt(menuObjid),
];
const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || []; const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
logger.info("✅ 상위 메뉴 계층 조회 완료", { logger.info("✅ 상위 메뉴 계층 조회 완료", {
ancestorMenuObjids, ancestorMenuObjids,
ancestorMenuNames, ancestorMenuNames,
hierarchyDepth: ancestorMenuObjids.length, hierarchyDepth: ancestorMenuObjids.length
}); });
// 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거) // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
@ -1779,25 +1745,14 @@ export async function getCategoryColumnsByMenu(
ORDER BY ttc.table_name, ccm.logical_column_name ORDER BY ttc.table_name, ccm.logical_column_name
`; `;
columnsResult = await pool.query(columnsQuery, [ columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
companyCode, logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", {
ancestorMenuObjids,
]);
logger.info(
"✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
{
rowCount: columnsResult.rows.length, rowCount: columnsResult.rows.length,
columns: columnsResult.rows.map( columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
(r: any) => `${r.tableName}.${r.columnName}` });
),
}
);
} else { } else {
// 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회 // 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
menuObjid,
companyCode,
});
// 형제 메뉴 조회 // 형제 메뉴 조회
const { getSiblingMenuObjids } = await import("../services/menuService"); const { getSiblingMenuObjids } = await import("../services/menuService");
@ -1813,16 +1768,10 @@ export async function getCategoryColumnsByMenu(
AND sd.table_name IS NOT NULL AND sd.table_name IS NOT NULL
`; `;
const tablesResult = await pool.query(tablesQuery, [ const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
siblingObjids,
companyCode,
]);
const tableNames = tablesResult.rows.map((row: any) => row.table_name); const tableNames = tablesResult.rows.map((row: any) => row.table_name);
logger.info("✅ 형제 메뉴 테이블 조회 완료", { logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
tableNames,
count: tableNames.length,
});
if (tableNames.length === 0) { if (tableNames.length === 0) {
res.json({ res.json({
@ -1859,13 +1808,11 @@ export async function getCategoryColumnsByMenu(
`; `;
columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]); columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]);
logger.info("✅ 레거시 방식 조회 완료", { logger.info("✅ 레거시 방식 조회 완료", { rowCount: columnsResult.rows.length });
rowCount: columnsResult.rows.length,
});
} }
logger.info("✅ 카테고리 컬럼 조회 완료", { logger.info("✅ 카테고리 컬럼 조회 완료", {
columnCount: columnsResult.rows.length, columnCount: columnsResult.rows.length
}); });
res.json({ res.json({
@ -1966,25 +1913,19 @@ export async function multiTableSave(
if (isUpdate && pkValue) { if (isUpdate && pkValue) {
// UPDATE // UPDATE
const updateColumns = Object.keys(mainData) const updateColumns = Object.keys(mainData)
.filter((col) => col !== pkColumn) .filter(col => col !== pkColumn)
.map((col, idx) => `"${col}" = $${idx + 1}`) .map((col, idx) => `"${col}" = $${idx + 1}`)
.join(", "); .join(", ");
const updateValues = Object.keys(mainData) const updateValues = Object.keys(mainData)
.filter((col) => col !== pkColumn) .filter(col => col !== pkColumn)
.map((col) => mainData[col]); .map(col => mainData[col]);
// updated_at 컬럼 존재 여부 확인 // updated_at 컬럼 존재 여부 확인
const hasUpdatedAt = await client.query( const hasUpdatedAt = await client.query(`
`
SELECT 1 FROM information_schema.columns SELECT 1 FROM information_schema.columns
WHERE table_name = $1 AND column_name = 'updated_at' WHERE table_name = $1 AND column_name = 'updated_at'
`, `, [mainTableName]);
[mainTableName] const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
);
const updatedAtClause =
hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
? ", updated_at = NOW()"
: "";
const updateQuery = ` const updateQuery = `
UPDATE "${mainTableName}" UPDATE "${mainTableName}"
@ -1994,42 +1935,28 @@ export async function multiTableSave(
RETURNING * RETURNING *
`; `;
const updateParams = const updateParams = companyCode !== "*"
companyCode !== "*"
? [...updateValues, pkValue, companyCode] ? [...updateValues, pkValue, companyCode]
: [...updateValues, pkValue]; : [...updateValues, pkValue];
logger.info("메인 테이블 UPDATE:", { logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
query: updateQuery,
paramsCount: updateParams.length,
});
mainResult = await client.query(updateQuery, updateParams); mainResult = await client.query(updateQuery, updateParams);
} else { } else {
// INSERT // INSERT
const columns = Object.keys(mainData) const columns = Object.keys(mainData).map(col => `"${col}"`).join(", ");
.map((col) => `"${col}"`) const placeholders = Object.keys(mainData).map((_, idx) => `$${idx + 1}`).join(", ");
.join(", ");
const placeholders = Object.keys(mainData)
.map((_, idx) => `$${idx + 1}`)
.join(", ");
const values = Object.values(mainData); const values = Object.values(mainData);
// updated_at 컬럼 존재 여부 확인 // updated_at 컬럼 존재 여부 확인
const hasUpdatedAt = await client.query( const hasUpdatedAt = await client.query(`
`
SELECT 1 FROM information_schema.columns SELECT 1 FROM information_schema.columns
WHERE table_name = $1 AND column_name = 'updated_at' WHERE table_name = $1 AND column_name = 'updated_at'
`, `, [mainTableName]);
[mainTableName] const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
);
const updatedAtClause =
hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
? ", updated_at = NOW()"
: "";
const updateSetClause = Object.keys(mainData) const updateSetClause = Object.keys(mainData)
.filter((col) => col !== pkColumn) .filter(col => col !== pkColumn)
.map((col) => `"${col}" = EXCLUDED."${col}"`) .map(col => `"${col}" = EXCLUDED."${col}"`)
.join(", "); .join(", ");
const insertQuery = ` const insertQuery = `
@ -2040,10 +1967,7 @@ export async function multiTableSave(
RETURNING * RETURNING *
`; `;
logger.info("메인 테이블 INSERT/UPSERT:", { logger.info("메인 테이블 INSERT/UPSERT:", { query: insertQuery, paramsCount: values.length });
query: insertQuery,
paramsCount: values.length,
});
mainResult = await client.query(insertQuery, values); mainResult = await client.query(insertQuery, values);
} }
@ -2062,15 +1986,12 @@ export async function multiTableSave(
const { tableName, linkColumn, items, options } = subTableConfig; const { tableName, linkColumn, items, options } = subTableConfig;
// saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함 // saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
const hasSaveMainAsFirst = const hasSaveMainAsFirst = options?.saveMainAsFirst &&
options?.saveMainAsFirst &&
options?.mainFieldMappings && options?.mainFieldMappings &&
options.mainFieldMappings.length > 0; options.mainFieldMappings.length > 0;
if (!tableName || (!items?.length && !hasSaveMainAsFirst)) { if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
logger.info( logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`
);
continue; continue;
} }
@ -2083,20 +2004,15 @@ export async function multiTableSave(
// 기존 데이터 삭제 옵션 // 기존 데이터 삭제 옵션
if (options?.deleteExistingBefore && linkColumn?.subColumn) { if (options?.deleteExistingBefore && linkColumn?.subColumn) {
const deleteQuery = const deleteQuery = options?.deleteOnlySubItems && options?.mainMarkerColumn
options?.deleteOnlySubItems && options?.mainMarkerColumn
? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2` ? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
: `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`; : `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
const deleteParams = const deleteParams = options?.deleteOnlySubItems && options?.mainMarkerColumn
options?.deleteOnlySubItems && options?.mainMarkerColumn
? [savedPkValue, options.subMarkerValue ?? false] ? [savedPkValue, options.subMarkerValue ?? false]
: [savedPkValue]; : [savedPkValue];
logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { deleteQuery, deleteParams });
deleteQuery,
deleteParams,
});
await client.query(deleteQuery, deleteParams); await client.query(deleteQuery, deleteParams);
} }
@ -2109,12 +2025,7 @@ export async function multiTableSave(
linkColumn, linkColumn,
mainDataKeys: Object.keys(mainData), mainDataKeys: Object.keys(mainData),
}); });
if ( if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
options?.saveMainAsFirst &&
options?.mainFieldMappings &&
options.mainFieldMappings.length > 0 &&
linkColumn?.subColumn
) {
const mainSubItem: Record<string, any> = { const mainSubItem: Record<string, any> = {
[linkColumn.subColumn]: savedPkValue, [linkColumn.subColumn]: savedPkValue,
}; };
@ -2128,8 +2039,7 @@ export async function multiTableSave(
// 메인 마커 설정 // 메인 마커 설정
if (options.mainMarkerColumn) { if (options.mainMarkerColumn) {
mainSubItem[options.mainMarkerColumn] = mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
options.mainMarkerValue ?? true;
} }
// company_code 추가 // company_code 추가
@ -2158,23 +2068,13 @@ export async function multiTableSave(
if (existingResult.rows.length > 0) { if (existingResult.rows.length > 0) {
// UPDATE // UPDATE
const updateColumns = Object.keys(mainSubItem) const updateColumns = Object.keys(mainSubItem)
.filter( .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
(col) =>
col !== linkColumn.subColumn &&
col !== options.mainMarkerColumn &&
col !== "company_code"
)
.map((col, idx) => `"${col}" = $${idx + 1}`) .map((col, idx) => `"${col}" = $${idx + 1}`)
.join(", "); .join(", ");
const updateValues = Object.keys(mainSubItem) const updateValues = Object.keys(mainSubItem)
.filter( .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
(col) => .map(col => mainSubItem[col]);
col !== linkColumn.subColumn &&
col !== options.mainMarkerColumn &&
col !== "company_code"
)
.map((col) => mainSubItem[col]);
if (updateColumns) { if (updateColumns) {
const updateQuery = ` const updateQuery = `
@ -2194,26 +2094,14 @@ export async function multiTableSave(
} }
const updateResult = await client.query(updateQuery, updateParams); const updateResult = await client.query(updateQuery, updateParams);
subTableResults.push({ subTableResults.push({ tableName, type: "main", data: updateResult.rows[0] });
tableName,
type: "main",
data: updateResult.rows[0],
});
} else { } else {
subTableResults.push({ subTableResults.push({ tableName, type: "main", data: existingResult.rows[0] });
tableName,
type: "main",
data: existingResult.rows[0],
});
} }
} else { } else {
// INSERT // INSERT
const mainSubColumns = Object.keys(mainSubItem) const mainSubColumns = Object.keys(mainSubItem).map(col => `"${col}"`).join(", ");
.map((col) => `"${col}"`) const mainSubPlaceholders = Object.keys(mainSubItem).map((_, idx) => `$${idx + 1}`).join(", ");
.join(", ");
const mainSubPlaceholders = Object.keys(mainSubItem)
.map((_, idx) => `$${idx + 1}`)
.join(", ");
const mainSubValues = Object.values(mainSubItem); const mainSubValues = Object.values(mainSubItem);
const insertQuery = ` const insertQuery = `
@ -2223,11 +2111,7 @@ export async function multiTableSave(
`; `;
const insertResult = await client.query(insertQuery, mainSubValues); const insertResult = await client.query(insertQuery, mainSubValues);
subTableResults.push({ subTableResults.push({ tableName, type: "main", data: insertResult.rows[0] });
tableName,
type: "main",
data: insertResult.rows[0],
});
} }
} }
@ -2243,12 +2127,8 @@ export async function multiTableSave(
item.company_code = companyCode; item.company_code = companyCode;
} }
const subColumns = Object.keys(item) const subColumns = Object.keys(item).map(col => `"${col}"`).join(", ");
.map((col) => `"${col}"`) const subPlaceholders = Object.keys(item).map((_, idx) => `$${idx + 1}`).join(", ");
.join(", ");
const subPlaceholders = Object.keys(item)
.map((_, idx) => `$${idx + 1}`)
.join(", ");
const subValues = Object.values(item); const subValues = Object.values(item);
const subInsertQuery = ` const subInsertQuery = `
@ -2257,16 +2137,9 @@ export async function multiTableSave(
RETURNING * RETURNING *
`; `;
logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { subInsertQuery, subValuesCount: subValues.length });
subInsertQuery,
subValuesCount: subValues.length,
});
const subResult = await client.query(subInsertQuery, subValues); const subResult = await client.query(subInsertQuery, subValues);
subTableResults.push({ subTableResults.push({ tableName, type: "sub", data: subResult.rows[0] });
tableName,
type: "sub",
data: subResult.rows[0],
});
} }
logger.info(`서브 테이블 ${tableName} 저장 완료`); logger.info(`서브 테이블 ${tableName} 저장 완료`);
@ -2307,11 +2180,8 @@ export async function multiTableSave(
} }
/** /**
* 두 테이블 간의 엔티티 관계 자동 감지 * 두 테이블 간 엔티티 관계 조회
* GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy * column_labels의 entity/category 타입 설정을 기반으로 두 테이블 간의 관계를 조회
*
* column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
* 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
*/ */
export async function getTableEntityRelations( export async function getTableEntityRelations(
req: AuthenticatedRequest, req: AuthenticatedRequest,
@ -2320,54 +2190,93 @@ export async function getTableEntityRelations(
try { try {
const { leftTable, rightTable } = req.query; const { leftTable, rightTable } = req.query;
logger.info(
`=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`
);
if (!leftTable || !rightTable) { if (!leftTable || !rightTable) {
const response: ApiResponse<null> = { res.status(400).json({
success: false, success: false,
message: "leftTable과 rightTable 파라미터가 필요합니다.", message: "leftTable과 rightTable 파라미터가 필요합니다.",
error: { });
code: "MISSING_PARAMETERS",
details: "leftTable과 rightTable 쿼리 파라미터가 필요합니다.",
},
};
res.status(400).json(response);
return; return;
} }
const tableManagementService = new TableManagementService(); logger.info("=== 테이블 엔티티 관계 조회 ===", { leftTable, rightTable });
const relations = await tableManagementService.detectTableEntityRelations(
String(leftTable),
String(rightTable)
);
logger.info(`테이블 엔티티 관계 조회 완료: ${relations.length}개 발견`); // 두 테이블의 컬럼 라벨 정보 조회
const columnLabelsQuery = `
SELECT
table_name,
column_name,
column_label,
web_type,
detail_settings
FROM column_labels
WHERE table_name IN ($1, $2)
AND web_type IN ('entity', 'category')
`;
const response: ApiResponse<any> = { const result = await query(columnLabelsQuery, [leftTable, rightTable]);
// 관계 분석
const relations: Array<{
fromTable: string;
fromColumn: string;
toTable: string;
toColumn: string;
relationType: string;
}> = [];
for (const row of result) {
try {
const detailSettings = typeof row.detail_settings === "string"
? JSON.parse(row.detail_settings)
: row.detail_settings;
if (detailSettings && detailSettings.referenceTable) {
const refTable = detailSettings.referenceTable;
const refColumn = detailSettings.referenceColumn || "id";
// leftTable과 rightTable 간의 관계인지 확인
if (
(row.table_name === leftTable && refTable === rightTable) ||
(row.table_name === rightTable && refTable === leftTable)
) {
relations.push({
fromTable: row.table_name,
fromColumn: row.column_name,
toTable: refTable,
toColumn: refColumn,
relationType: row.web_type,
});
}
}
} catch (parseError) {
logger.warn("detail_settings 파싱 오류:", {
table: row.table_name,
column: row.column_name,
error: parseError
});
}
}
logger.info("테이블 엔티티 관계 조회 완료", {
leftTable,
rightTable,
relationsCount: relations.length
});
res.json({
success: true, success: true,
message: `${relations.length}개의 엔티티 관계를 발견했습니다.`,
data: { data: {
leftTable: String(leftTable), leftTable,
rightTable: String(rightTable), rightTable,
relations, relations,
}, },
}; });
} catch (error: any) {
res.status(200).json(response); logger.error("테이블 엔티티 관계 조회 실패:", error);
} catch (error) { res.status(500).json({
logger.error("테이블 엔티티 관계 조회 중 오류 발생:", error);
const response: ApiResponse<null> = {
success: false, success: false,
message: "테이블 엔티티 관계 조회 중 오류가 발생했습니다.", message: "테이블 엔티티 관계 조회에 실패했습니다.",
error: { error: error.message,
code: "ENTITY_RELATIONS_ERROR", });
details: error instanceof Error ? error.message : "Unknown error",
},
};
res.status(500).json(response);
} }
} }

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

@ -241,5 +241,3 @@ export default function ScreenManagementPage() {
</div> </div>
); );
} }

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

@ -23,7 +23,6 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신 import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리 import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
function ScreenViewPage() { function ScreenViewPage() {
const params = useParams(); const params = useParams();
@ -114,7 +113,7 @@ function ScreenViewPage() {
// 편집 모달 이벤트 리스너 등록 // 편집 모달 이벤트 리스너 등록
useEffect(() => { useEffect(() => {
const handleOpenEditModal = (event: CustomEvent) => { const handleOpenEditModal = (event: CustomEvent) => {
// console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail); console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
setEditModalConfig({ setEditModalConfig({
screenId: event.detail.screenId, screenId: event.detail.screenId,
@ -346,7 +345,6 @@ function ScreenViewPage() {
{/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */} {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
{layoutReady && layout && layout.components.length > 0 ? ( {layoutReady && layout && layout.components.length > 0 ? (
<ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
<div <div
className="bg-background relative" className="bg-background relative"
style={{ style={{
@ -772,7 +770,6 @@ function ScreenViewPage() {
); );
})()} })()}
</div> </div>
</ScreenMultiLangProvider>
) : ( ) : (
// 빈 화면일 때 // 빈 화면일 때
<div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}> <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>

231
frontend/app/globals.css
View File

@ -388,237 +388,6 @@ select {
border-spacing: 0 !important; border-spacing: 0 !important;
} }
/* ===== POP (Production Operation Panel) Styles ===== */
/* POP 전용 다크 테마 변수 */
.pop-dark {
/* 배경 색상 */
--pop-bg-deepest: 8 12 21;
--pop-bg-deep: 10 15 28;
--pop-bg-primary: 13 19 35;
--pop-bg-secondary: 18 26 47;
--pop-bg-tertiary: 25 35 60;
--pop-bg-elevated: 32 45 75;
/* 네온 강조색 */
--pop-neon-cyan: 0 212 255;
--pop-neon-cyan-bright: 0 240 255;
--pop-neon-cyan-dim: 0 150 190;
--pop-neon-pink: 255 0 102;
--pop-neon-purple: 138 43 226;
/* 상태 색상 */
--pop-success: 0 255 136;
--pop-success-dim: 0 180 100;
--pop-warning: 255 170 0;
--pop-warning-dim: 200 130 0;
--pop-danger: 255 51 51;
--pop-danger-dim: 200 40 40;
/* 텍스트 색상 */
--pop-text-primary: 255 255 255;
--pop-text-secondary: 180 195 220;
--pop-text-muted: 100 120 150;
/* 테두리 색상 */
--pop-border: 40 55 85;
--pop-border-light: 55 75 110;
}
/* POP 전용 라이트 테마 변수 */
.pop-light {
--pop-bg-deepest: 245 247 250;
--pop-bg-deep: 240 243 248;
--pop-bg-primary: 250 251 253;
--pop-bg-secondary: 255 255 255;
--pop-bg-tertiary: 245 247 250;
--pop-bg-elevated: 235 238 245;
--pop-neon-cyan: 0 122 204;
--pop-neon-cyan-bright: 0 140 230;
--pop-neon-cyan-dim: 0 100 170;
--pop-neon-pink: 220 38 127;
--pop-neon-purple: 118 38 200;
--pop-success: 22 163 74;
--pop-success-dim: 21 128 61;
--pop-warning: 245 158 11;
--pop-warning-dim: 217 119 6;
--pop-danger: 220 38 38;
--pop-danger-dim: 185 28 28;
--pop-text-primary: 15 23 42;
--pop-text-secondary: 71 85 105;
--pop-text-muted: 148 163 184;
--pop-border: 226 232 240;
--pop-border-light: 203 213 225;
}
/* POP 배경 그리드 패턴 */
.pop-bg-pattern::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.pop-light .pop-bg-pattern::before {
background:
repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
}
/* POP 글로우 효과 */
.pop-glow-cyan {
box-shadow:
0 0 20px rgba(0, 212, 255, 0.5),
0 0 40px rgba(0, 212, 255, 0.3);
}
.pop-glow-cyan-strong {
box-shadow:
0 0 10px rgba(0, 212, 255, 0.8),
0 0 30px rgba(0, 212, 255, 0.5),
0 0 50px rgba(0, 212, 255, 0.3);
}
.pop-glow-success {
box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}
.pop-glow-warning {
box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}
.pop-glow-danger {
box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
}
/* POP 펄스 글로우 애니메이션 */
@keyframes pop-pulse-glow {
0%,
100% {
box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}
50% {
box-shadow:
0 0 20px rgba(0, 212, 255, 0.8),
0 0 30px rgba(0, 212, 255, 0.4);
}
}
.pop-animate-pulse-glow {
animation: pop-pulse-glow 2s ease-in-out infinite;
}
/* POP 프로그레스 바 샤인 애니메이션 */
@keyframes pop-progress-shine {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.pop-progress-shine::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
animation: pop-progress-shine 1.5s ease-in-out infinite;
}
/* POP 스크롤바 스타일 */
.pop-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.pop-scrollbar::-webkit-scrollbar-track {
background: rgb(var(--pop-bg-secondary));
}
.pop-scrollbar::-webkit-scrollbar-thumb {
background: rgb(var(--pop-border-light));
border-radius: 9999px;
}
.pop-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgb(var(--pop-neon-cyan-dim));
}
/* POP 스크롤바 숨기기 */
.pop-hide-scrollbar::-webkit-scrollbar {
display: none;
}
.pop-hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ===== Marching Ants Animation (Excel Copy Border) ===== */
@keyframes marching-ants-h {
0% {
background-position: 0 0;
}
100% {
background-position: 16px 0;
}
}
@keyframes marching-ants-v {
0% {
background-position: 0 0;
}
100% {
background-position: 0 16px;
}
}
.animate-marching-ants-h {
background: repeating-linear-gradient(
90deg,
hsl(var(--primary)) 0,
hsl(var(--primary)) 4px,
transparent 4px,
transparent 8px
);
background-size: 16px 2px;
animation: marching-ants-h 0.4s linear infinite;
}
.animate-marching-ants-v {
background: repeating-linear-gradient(
180deg,
hsl(var(--primary)) 0,
hsl(var(--primary)) 4px,
transparent 4px,
transparent 8px
);
background-size: 2px 16px;
animation: marching-ants-v 0.4s linear infinite;
}
/* ===== 저장 테이블 막대기 애니메이션 ===== */ /* ===== 저장 테이블 막대기 애니메이션 ===== */
@keyframes saveBarDrop { @keyframes saveBarDrop {
0% { 0% {

448
frontend/components/screen/InteractiveScreenViewer.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState, useCallback, useEffect, useMemo } from "react"; import React, { useState, useCallback } from "react";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -48,7 +48,6 @@ import { isFileComponent } from "@/lib/utils/componentTypeUtils";
import { buildGridClasses } from "@/lib/constants/columnSpans"; import { buildGridClasses } from "@/lib/constants/columnSpans";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useScreenPreview } from "@/contexts/ScreenPreviewContext"; import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
import { useMultiLang } from "@/hooks/useMultiLang";
import { TableOptionsProvider } from "@/contexts/TableOptionsContext"; import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar"; import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
@ -110,7 +109,11 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
const isDisabled = disabled || !parentValue || loading; const isDisabled = disabled || !parentValue || loading;
return ( return (
<Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}> <Select
value={value || ""}
onValueChange={(newValue) => onChange?.(newValue)}
disabled={isDisabled}
>
<SelectTrigger className="h-full w-full"> <SelectTrigger className="h-full w-full">
{loading ? ( {loading ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -184,67 +187,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인 const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기 const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
const { userLang } = useMultiLang(); // 다국어 훅
const [localFormData, setLocalFormData] = useState<Record<string, any>>({}); const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({}); const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
// 다국어 번역 상태 (langKeyId가 있는 컴포넌트들의 번역 텍스트)
const [translations, setTranslations] = useState<Record<string, string>>({});
// 다국어 키 수집 및 번역 로드
useEffect(() => {
const loadTranslations = async () => {
// 모든 컴포넌트에서 langKey 수집
const langKeysToFetch: string[] = [];
const collectLangKeys = (comps: ComponentData[]) => {
comps.forEach((comp) => {
// 컴포넌트 라벨의 langKey
if ((comp as any).langKey) {
langKeysToFetch.push((comp as any).langKey);
}
// componentConfig 내의 langKey (버튼 텍스트 등)
if ((comp as any).componentConfig?.langKey) {
langKeysToFetch.push((comp as any).componentConfig.langKey);
}
// 자식 컴포넌트 재귀 처리
if ((comp as any).children) {
collectLangKeys((comp as any).children);
}
});
};
collectLangKeys(allComponents);
// langKey가 있으면 배치 조회
if (langKeysToFetch.length > 0 && userLang) {
try {
const { apiClient } = await import("@/lib/api/client");
const response = await apiClient.post(
"/multilang/batch",
{
langKeys: [...new Set(langKeysToFetch)], // 중복 제거
},
{
params: {
userLang,
companyCode: user?.companyCode || "*",
},
},
);
if (response.data?.success && response.data?.data) {
setTranslations(response.data.data);
}
} catch (error) {
console.error("다국어 번역 로드 실패:", error);
}
}
};
loadTranslations();
}, [allComponents, userLang, user?.companyCode]);
// 팝업 화면 상태 // 팝업 화면 상태
const [popupScreen, setPopupScreen] = useState<{ const [popupScreen, setPopupScreen] = useState<{
screenId: number; screenId: number;
@ -265,11 +210,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const finalFormData = { ...localFormData, ...externalFormData }; const finalFormData = { ...localFormData, ...externalFormData };
// 개선된 검증 시스템 (선택적 활성화) // 개선된 검증 시스템 (선택적 활성화)
const enhancedValidation = const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0
enableEnhancedValidation && screenInfo && tableColumns.length > 0
? useFormValidation( ? useFormValidation(
finalFormData, finalFormData,
allComponents.filter((c) => c.type === "widget") as WidgetComponent[], allComponents.filter(c => c.type === 'widget') as WidgetComponent[],
tableColumns, tableColumns,
{ {
id: screenInfo.id, id: screenInfo.id,
@ -277,7 +221,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
tableName: screenInfo.tableName, tableName: screenInfo.tableName,
screenResolution: { width: 800, height: 600 }, screenResolution: { width: 800, height: 600 },
gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 }, gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
description: "동적 화면", description: "동적 화면"
}, },
{ {
enableRealTimeValidation: true, enableRealTimeValidation: true,
@ -285,13 +229,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
enableAutoSave: false, enableAutoSave: false,
showToastMessages: true, showToastMessages: true,
...validationOptions, ...validationOptions,
}, }
) )
: null; : null;
// 자동값 생성 함수 // 자동값 생성 함수
const generateAutoValue = useCallback( const generateAutoValue = useCallback(async (autoValueType: string, ruleId?: string): Promise<string> => {
async (autoValueType: string, ruleId?: string): Promise<string> => {
const now = new Date(); const now = new Date();
switch (autoValueType) { switch (autoValueType) {
case "current_datetime": case "current_datetime":
@ -324,9 +267,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
default: default:
return ""; return "";
} }
}, }, [userName]); // userName 의존성 추가
[userName],
); // userName 의존성 추가
// 팝업 화면 레이아웃 로드 // 팝업 화면 레이아웃 로드
React.useEffect(() => { React.useEffect(() => {
@ -339,23 +280,23 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// 화면 레이아웃과 화면 정보를 병렬로 가져오기 // 화면 레이아웃과 화면 정보를 병렬로 가져오기
const [layout, screen] = await Promise.all([ const [layout, screen] = await Promise.all([
screenApi.getLayout(popupScreen.screenId), screenApi.getLayout(popupScreen.screenId),
screenApi.getScreen(popupScreen.screenId), screenApi.getScreen(popupScreen.screenId)
]); ]);
console.log("📊 팝업 화면 로드 완료:", { console.log("📊 팝업 화면 로드 완료:", {
componentsCount: layout.components?.length || 0, componentsCount: layout.components?.length || 0,
screenInfo: { screenInfo: {
screenId: screen.screenId, screenId: screen.screenId,
tableName: screen.tableName, tableName: screen.tableName
}, },
popupFormData: {}, popupFormData: {}
}); });
setPopupLayout(layout.components || []); setPopupLayout(layout.components || []);
setPopupScreenResolution(layout.screenResolution || null); setPopupScreenResolution(layout.screenResolution || null);
setPopupScreenInfo({ setPopupScreenInfo({
id: popupScreen.screenId, id: popupScreen.screenId,
tableName: screen.tableName, tableName: screen.tableName
}); });
// 팝업 formData 초기화 // 팝업 formData 초기화
@ -379,7 +320,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
external: externalFormData, external: externalFormData,
local: localFormData, local: localFormData,
merged: formData, merged: formData,
hasExternalCallback: !!onFormDataChange, hasExternalCallback: !!onFormDataChange
}); });
// 폼 데이터 업데이트 // 폼 데이터 업데이트
@ -412,7 +353,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// console.log("🔧 initAutoInputFields 실행 시작"); // console.log("🔧 initAutoInputFields 실행 시작");
for (const comp of allComponents) { for (const comp of allComponents) {
// 🆕 type: "component" 또는 type: "widget" 모두 처리 // 🆕 type: "component" 또는 type: "widget" 모두 처리
if (comp.type === "widget" || comp.type === "component") { if (comp.type === 'widget' || comp.type === 'component') {
const widget = comp as WidgetComponent; const widget = comp as WidgetComponent;
const fieldName = widget.columnName || widget.id; const fieldName = widget.columnName || widget.id;
@ -420,7 +361,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) { if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
const autoFillConfig = widget.autoFill || (comp as any).autoFill; const autoFillConfig = widget.autoFill || (comp as any).autoFill;
const currentValue = formData[fieldName]; const currentValue = formData[fieldName];
if (currentValue === undefined || currentValue === "") { if (currentValue === undefined || currentValue === '') {
const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig; const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
// 사용자 정보에서 필터 값 가져오기 // 사용자 정보에서 필터 값 가져오기
@ -428,7 +369,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
if (userValue && sourceTable && filterColumn && displayColumn) { if (userValue && sourceTable && filterColumn && displayColumn) {
try { try {
const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn); const result = await tableTypeApi.getTableRecord(
sourceTable,
filterColumn,
userValue,
displayColumn
);
updateFormData(fieldName, result.value); updateFormData(fieldName, result.value);
} catch (error) { } catch (error) {
@ -440,13 +386,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
} }
// 기존 widget 타입 전용 로직은 widget인 경우만 // 기존 widget 타입 전용 로직은 widget인 경우만
if (comp.type !== "widget") continue; if (comp.type !== 'widget') continue;
// 텍스트 타입 위젯의 자동입력 처리 (기존 로직) // 텍스트 타입 위젯의 자동입력 처리 (기존 로직)
if ( if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') &&
(widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") && widget.webTypeConfig) {
widget.webTypeConfig
) {
const config = widget.webTypeConfig as TextTypeConfig; const config = widget.webTypeConfig as TextTypeConfig;
const isAutoInput = config?.autoInput || false; const isAutoInput = config?.autoInput || false;
@ -455,21 +399,20 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const currentValue = formData[fieldName]; const currentValue = formData[fieldName];
console.log(`🔍 자동입력 필드 체크: ${fieldName}`, { console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
currentValue, currentValue,
isEmpty: currentValue === undefined || currentValue === "", isEmpty: currentValue === undefined || currentValue === '',
isAutoInput, isAutoInput,
autoValueType: config.autoValueType, autoValueType: config.autoValueType
}); });
if (currentValue === undefined || currentValue === "") { if (currentValue === undefined || currentValue === '') {
const autoValue = const autoValue = config.autoValueType === "custom"
config.autoValueType === "custom"
? config.customValue || "" ? config.customValue || ""
: generateAutoValue(config.autoValueType); : generateAutoValue(config.autoValueType);
console.log("🔄 자동입력 필드 초기화:", { console.log("🔄 자동입력 필드 초기화:", {
fieldName, fieldName,
autoValueType: config.autoValueType, autoValueType: config.autoValueType,
autoValue, autoValue
}); });
updateFormData(fieldName, autoValue); updateFormData(fieldName, autoValue);
@ -625,14 +568,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
); );
} }
const { widgetType, label: originalLabel, placeholder, required, readonly, columnName } = comp; const { widgetType, label, placeholder, required, readonly, columnName } = comp;
const fieldName = columnName || comp.id; const fieldName = columnName || comp.id;
const currentValue = formData[fieldName] || ""; const currentValue = formData[fieldName] || "";
// 다국어 라벨 적용 (langKey가 있으면 번역 텍스트 사용)
const compLangKey = (comp as any).langKey;
const label = compLangKey && translations[compLangKey] ? translations[compLangKey] : originalLabel;
// 스타일 적용 // 스타일 적용
const applyStyles = (element: React.ReactElement) => { const applyStyles = (element: React.ReactElement) => {
if (!comp.style) return element; if (!comp.style) return element;
@ -659,8 +598,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// 자동입력 관련 처리 // 자동입력 관련 처리
const isAutoInput = config?.autoInput || false; const isAutoInput = config?.autoInput || false;
const autoValue = const autoValue = isAutoInput && config?.autoValueType
isAutoInput && config?.autoValueType
? config.autoValueType === "custom" ? config.autoValueType === "custom"
? config.customValue || "" ? config.customValue || ""
: generateAutoValue(config.autoValueType) : generateAutoValue(config.autoValueType)
@ -1147,9 +1085,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const currentValue = getCurrentValue(); const currentValue = getCurrentValue();
// 화면 ID 추출 (URL에서) // 화면 ID 추출 (URL에서)
const screenId = const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/')
typeof window !== "undefined" && window.location.pathname.includes("/screens/") ? parseInt(window.location.pathname.split('/screens/')[1])
? parseInt(window.location.pathname.split("/screens/")[1])
: null; : null;
console.log("📁 InteractiveScreenViewer - File 위젯:", { console.log("📁 InteractiveScreenViewer - File 위젯:", {
@ -1214,7 +1151,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
if (uploadResult.success) { if (uploadResult.success) {
// console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data); // console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);
setLocalFormData((prev) => ({ ...prev, [fieldName]: uploadResult.data })); setLocalFormData(prev => ({ ...prev, [fieldName]: uploadResult.data }));
// 외부 폼 데이터 변경 콜백 호출 // 외부 폼 데이터 변경 콜백 호출
if (onFormDataChange) { if (onFormDataChange) {
@ -1237,7 +1174,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const clearFile = () => { const clearFile = () => {
const fieldName = widget.columnName || widget.id; const fieldName = widget.columnName || widget.id;
setLocalFormData((prev) => ({ ...prev, [fieldName]: null })); setLocalFormData(prev => ({ ...prev, [fieldName]: null }));
// 외부 폼 데이터 변경 콜백 호출 // 외부 폼 데이터 변경 콜백 호출
if (onFormDataChange) { if (onFormDataChange) {
@ -1260,28 +1197,36 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
return ( return (
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
<div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div> <div className="text-sm font-medium text-foreground">
업로드된 파일 ({fileData.length}개)
</div>
{fileData.map((fileInfo: any, index: number) => { {fileData.map((fileInfo: any, index: number) => {
const isImage = fileInfo.type?.startsWith("image/"); const isImage = fileInfo.type?.startsWith('image/');
return ( return (
<div key={index} className="bg-muted flex items-center gap-2 rounded border p-2"> <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
<div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded"> <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
{isImage ? ( {isImage ? (
<div className="text-success text-xs font-medium">IMG</div> <div className="text-success text-xs font-medium">IMG</div>
) : ( ) : (
<File className="text-muted-foreground h-8 w-8" /> <File className="h-8 w-8 text-muted-foreground" />
)} )}
</div> </div>
<div className="min-w-0 flex-1"> <div className="flex-1 min-w-0">
<p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p> <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
<p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p> <p className="text-xs text-muted-foreground">
<p className="text-muted-foreground text-xs">{fileInfo.type || "알 수 없는 형식"}</p> {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
<p className="text-muted-foreground/70 text-xs">
업로드: {new Date(fileInfo.uploadedAt).toLocaleString("ko-KR")}
</p> </p>
<p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
<p className="text-xs text-muted-foreground/70">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
</div> </div>
<Button type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0"> <Button
type="button"
variant="ghost"
size="sm"
onClick={clearFile}
className="h-8 w-8 p-0"
>
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
</div> </div>
@ -1305,45 +1250,45 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
required={required} required={required}
multiple={config?.multiple} multiple={config?.multiple}
accept={config?.accept} accept={config?.accept}
className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
style={{ zIndex: 1 }} style={{ zIndex: 1 }}
/> />
<div <div className={cn(
className={cn(
"flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors", "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
currentValue && currentValue.files && currentValue.files.length > 0 currentValue && currentValue.files && currentValue.files.length > 0
? "border-success/30 bg-success/10" ? 'border-success/30 bg-success/10'
: "border-input bg-muted hover:border-input/80 hover:bg-muted/80", : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
readonly && "cursor-not-allowed opacity-50", readonly && 'cursor-not-allowed opacity-50',
!readonly && "cursor-pointer", !readonly && 'cursor-pointer'
)} )}>
>
<div className="space-y-2"> <div className="space-y-2">
{currentValue && currentValue.files && currentValue.files.length > 0 ? ( {currentValue && currentValue.files && currentValue.files.length > 0 ? (
<> <>
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
<svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
</div> </div>
<p className="text-success text-sm font-medium"> <p className="text-sm font-medium text-success">
{currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`} {currentValue.totalCount === 1
? '파일 선택됨'
: `${currentValue.totalCount}개 파일 선택됨`}
</p> </p>
<p className="text-success/80 text-xs"> <p className="text-xs text-success/80">
총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB 총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
</p> </p>
<p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p> <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
</> </>
) : ( ) : (
<> <>
<Upload className="text-muted-foreground mx-auto h-8 w-8" /> <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
<p className="text-muted-foreground text-sm"> <p className="text-sm text-muted-foreground">
{config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"} {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
</p> </p>
{(config?.accept || config?.maxSize) && ( {(config?.accept || config?.maxSize) && (
<div className="text-muted-foreground space-y-1 text-xs"> <div className="text-xs text-muted-foreground space-y-1">
{config.accept && <div>허용 형식: {config.accept}</div>} {config.accept && <div>허용 형식: {config.accept}</div>}
{config.maxSize && <div>최대 크기: {config.maxSize}MB</div>} {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
{config.multiple && <div>다중 선택 가능</div>} {config.multiple && <div>다중 선택 가능</div>}
@ -1357,7 +1302,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
{/* 파일 미리보기 */} {/* 파일 미리보기 */}
{renderFilePreview()} {renderFilePreview()}
</div>, </div>
); );
} }
@ -1365,7 +1310,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const widget = comp as WidgetComponent; const widget = comp as WidgetComponent;
const config = widget.webTypeConfig as CodeTypeConfig | undefined; const config = widget.webTypeConfig as CodeTypeConfig | undefined;
console.log("🔍 [InteractiveScreenViewer] Code 위젯 렌더링:", { console.log(`🔍 [InteractiveScreenViewer] Code 위젯 렌더링:`, {
componentId: widget.id, componentId: widget.id,
columnName: widget.columnName, columnName: widget.columnName,
codeCategory: config?.codeCategory, codeCategory: config?.codeCategory,
@ -1399,7 +1344,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
onEvent={(event: string, data: any) => { onEvent={(event: string, data: any) => {
// console.log(`Code widget event: ${event}`, data); // console.log(`Code widget event: ${event}`, data);
}} }}
/>, />
); );
} catch (error) { } catch (error) {
// console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error); // console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error);
@ -1418,31 +1363,64 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
<SelectContent> <SelectContent>
<SelectItem value="loading">로딩 중...</SelectItem> <SelectItem value="loading">로딩 중...</SelectItem>
</SelectContent> </SelectContent>
</Select>, </Select>
); );
} }
} }
case "entity": { case "entity": {
// DynamicWebTypeRenderer로 위임하여 EntitySearchInputWrapper 사용
const widget = comp as WidgetComponent; const widget = comp as WidgetComponent;
return applyStyles( const config = widget.webTypeConfig as EntityTypeConfig | undefined;
<DynamicWebTypeRenderer
webType="entity" console.log("🏢 InteractiveScreenViewer - Entity 위젯:", {
config={widget.webTypeConfig} componentId: widget.id,
props={{ widgetType: widget.widgetType,
component: widget, config,
value: currentValue, appliedSettings: {
onChange: (value: any) => updateFormData(fieldName, value), entityName: config?.entityName,
onFormDataChange: updateFormData, displayField: config?.displayField,
formData: formData, valueField: config?.valueField,
readonly: readonly, multiple: config?.multiple,
required: required, defaultValue: config?.defaultValue,
placeholder: widget.placeholder || "엔티티를 선택하세요", },
isInteractive: true, });
className: "w-full h-full",
const finalPlaceholder = config?.placeholder || "엔티티를 선택하세요...";
const defaultOptions = [
{ label: "사용자", value: "user" },
{ label: "제품", value: "product" },
{ label: "주문", value: "order" },
{ label: "카테고리", value: "category" },
];
return (
<Select
value={currentValue || config?.defaultValue || ""}
onValueChange={(value) => updateFormData(fieldName, value)}
disabled={readonly}
required={required}
>
<SelectTrigger
className="w-full"
style={{ height: "100%" }}
style={{
...comp.style,
width: "100%",
height: "100%",
}} }}
/>, >
<SelectValue placeholder={finalPlaceholder} />
</SelectTrigger>
<SelectContent>
{defaultOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{config?.displayFormat
? config.displayFormat.replace("{label}", option.label).replace("{value}", option.value)
: option.label}
</SelectItem>
))}
</SelectContent>
</Select>,
); );
} }
@ -1527,22 +1505,22 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData); // console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);
// formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행) // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
const hasWidgets = allComponents.some((comp) => comp.type === "widget"); const hasWidgets = allComponents.some(comp => comp.type === 'widget');
if (!hasWidgets) { if (!hasWidgets) {
alert("저장할 입력 컴포넌트가 없습니다."); alert("저장할 입력 컴포넌트가 없습니다.");
return; return;
} }
// 필수 항목 검증 // 필수 항목 검증
const requiredFields = allComponents.filter((c) => c.required && (c.columnName || c.id)); const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
const missingFields = requiredFields.filter((field) => { const missingFields = requiredFields.filter(field => {
const fieldName = field.columnName || field.id; const fieldName = field.columnName || field.id;
const value = currentFormData[fieldName]; const value = currentFormData[fieldName];
return !value || value.toString().trim() === ""; return !value || value.toString().trim() === "";
}); });
if (missingFields.length > 0) { if (missingFields.length > 0) {
const fieldNames = missingFields.map((f) => f.label || f.columnName || f.id).join(", "); const fieldNames = missingFields.map(f => f.label || f.columnName || f.id).join(", ");
alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`); alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
return; return;
} }
@ -1557,9 +1535,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const mappedData: Record<string, any> = {}; const mappedData: Record<string, any> = {};
// 입력 가능한 컴포넌트에서 데이터 수집 // 입력 가능한 컴포넌트에서 데이터 수집
allComponents.forEach((comp) => { allComponents.forEach(comp => {
// 위젯 컴포넌트이고 입력 가능한 타입인 경우 // 위젯 컴포넌트이고 입력 가능한 타입인 경우
if (comp.type === "widget") { if (comp.type === 'widget') {
const widget = comp as WidgetComponent; const widget = comp as WidgetComponent;
const fieldName = widget.columnName || widget.id; const fieldName = widget.columnName || widget.id;
let value = currentFormData[fieldName]; let value = currentFormData[fieldName];
@ -1568,14 +1546,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
widgetType: widget.widgetType, widgetType: widget.widgetType,
formDataValue: value, formDataValue: value,
hasWebTypeConfig: !!widget.webTypeConfig, hasWebTypeConfig: !!widget.webTypeConfig,
config: widget.webTypeConfig, config: widget.webTypeConfig
}); });
// 자동입력 필드인 경우에만 값이 없을 때 생성 // 자동입력 필드인 경우에만 값이 없을 때 생성
if ( if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') &&
(widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") && widget.webTypeConfig) {
widget.webTypeConfig
) {
const config = widget.webTypeConfig as TextTypeConfig; const config = widget.webTypeConfig as TextTypeConfig;
const isAutoInput = config?.autoInput || false; const isAutoInput = config?.autoInput || false;
@ -1583,25 +1559,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
isAutoInput, isAutoInput,
autoValueType: config?.autoValueType, autoValueType: config?.autoValueType,
hasValue: !!value, hasValue: !!value,
value, value
}); });
if (isAutoInput && config?.autoValueType && (!value || value === "")) { if (isAutoInput && config?.autoValueType && (!value || value === '')) {
// 자동입력이고 값이 없을 때만 생성 // 자동입력이고 값이 없을 때만 생성
value = value = config.autoValueType === "custom"
config.autoValueType === "custom"
? config.customValue || "" ? config.customValue || ""
: generateAutoValue(config.autoValueType); : generateAutoValue(config.autoValueType);
console.log("💾 자동입력 값 저장 (값이 없어서 생성):", { console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
fieldName, fieldName,
autoValueType: config.autoValueType, autoValueType: config.autoValueType,
generatedValue: value, generatedValue: value
}); });
} else if (isAutoInput && value) { } else if (isAutoInput && value) {
console.log("💾 자동입력 필드지만 기존 값 유지:", { console.log("💾 자동입력 필드지만 기존 값 유지:", {
fieldName, fieldName,
existingValue: value, existingValue: value
}); });
} else if (!isAutoInput) { } else if (!isAutoInput) {
// console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`); // console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
@ -1626,17 +1601,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
매핑된데이터: mappedData, 매핑된데이터: mappedData,
화면정보: screenInfo, 화면정보: screenInfo,
전체컴포넌트수: allComponents.length, 전체컴포넌트수: allComponents.length,
위젯컴포넌트수: allComponents.filter((c) => c.type === "widget").length, 위젯컴포넌트수: allComponents.filter(c => c.type === 'widget').length,
}); });
// 각 컴포넌트의 상세 정보 로그 // 각 컴포넌트의 상세 정보 로그
// console.log("🔍 컴포넌트별 데이터 수집 상세:"); // console.log("🔍 컴포넌트별 데이터 수집 상세:");
allComponents.forEach((comp) => { allComponents.forEach(comp => {
if (comp.type === "widget") { if (comp.type === 'widget') {
const widget = comp as WidgetComponent; const widget = comp as WidgetComponent;
const fieldName = widget.columnName || widget.id; const fieldName = widget.columnName || widget.id;
const value = currentFormData[fieldName]; const value = currentFormData[fieldName];
const hasValue = value !== undefined && value !== null && value !== ""; const hasValue = value !== undefined && value !== null && value !== '';
// console.log(` - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`); // console.log(` - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
} }
}); });
@ -1647,8 +1622,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
} }
// 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용) // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
const tableName = const tableName = screenInfo.tableName ||
screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값 allComponents.find(c => c.columnName)?.tableName ||
"dynamic_form_data"; // 기본값
// 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음) // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
const writerValue = user.userId; const writerValue = user.userId;
@ -1689,7 +1665,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// 저장 후 데이터 초기화 (선택사항) // 저장 후 데이터 초기화 (선택사항)
if (onFormDataChange) { if (onFormDataChange) {
const resetData: Record<string, any> = {}; const resetData: Record<string, any> = {};
Object.keys(formData).forEach((key) => { Object.keys(formData).forEach(key => {
resetData[key] = ""; resetData[key] = "";
}); });
onFormDataChange(resetData); onFormDataChange(resetData);
@ -1703,6 +1679,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
} }
}; };
// 삭제 액션 // 삭제 액션
const handleDeleteAction = async () => { const handleDeleteAction = async () => {
const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?"; const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
@ -1720,8 +1697,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
} }
// 테이블명 결정 // 테이블명 결정
const tableName = const tableName = screenInfo?.tableName ||
screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table"; allComponents.find(c => c.columnName)?.tableName ||
"unknown_table";
if (!tableName || tableName === "unknown_table") { if (!tableName || tableName === "unknown_table") {
alert("테이블 정보가 없어 삭제할 수 없습니다."); alert("테이블 정보가 없어 삭제할 수 없습니다.");
@ -1731,8 +1709,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
try { try {
// console.log("🗑️ 삭제 실행:", { recordId, tableName, formData }); // console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });
// screenId 전달하여 제어관리 실행 가능하도록 함 const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);
const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName, screenInfo?.id);
if (result.success) { if (result.success) {
alert("삭제되었습니다."); alert("삭제되었습니다.");
@ -1741,7 +1718,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// 삭제 후 폼 초기화 // 삭제 후 폼 초기화
if (onFormDataChange) { if (onFormDataChange) {
const resetData: Record<string, any> = {}; const resetData: Record<string, any> = {};
Object.keys(formData).forEach((key) => { Object.keys(formData).forEach(key => {
resetData[key] = ""; resetData[key] = "";
}); });
onFormDataChange(resetData); onFormDataChange(resetData);
@ -1793,7 +1770,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const handleSearchAction = () => { const handleSearchAction = () => {
// console.log("🔍 검색 실행:", formData); // console.log("🔍 검색 실행:", formData);
// 검색 로직 // 검색 로직
const searchTerms = Object.values(formData).filter((v) => v && v.toString().trim()); const searchTerms = Object.values(formData).filter(v => v && v.toString().trim());
if (searchTerms.length === 0) { if (searchTerms.length === 0) {
alert("검색할 내용을 입력해주세요."); alert("검색할 내용을 입력해주세요.");
} else { } else {
@ -1806,7 +1783,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
if (confirm("모든 입력을 초기화하시겠습니까?")) { if (confirm("모든 입력을 초기화하시겠습니까?")) {
if (onFormDataChange) { if (onFormDataChange) {
const resetData: Record<string, any> = {}; const resetData: Record<string, any> = {};
Object.keys(formData).forEach((key) => { Object.keys(formData).forEach(key => {
resetData[key] = ""; resetData[key] = "";
}); });
onFormDataChange(resetData); onFormDataChange(resetData);
@ -1836,14 +1813,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도"); // console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");
// 모달의 닫기 버튼을 찾아서 클릭 // 모달의 닫기 버튼을 찾아서 클릭
const modalCloseButton = document.querySelector( const modalCloseButton = document.querySelector('[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close');
'[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close',
);
if (modalCloseButton) { if (modalCloseButton) {
(modalCloseButton as HTMLElement).click(); (modalCloseButton as HTMLElement).click();
} else { } else {
// ESC 키 이벤트 발생시키기 // ESC 키 이벤트 발생시키기
const escEvent = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, which: 27 }); const escEvent = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, which: 27 });
document.dispatchEvent(escEvent); document.dispatchEvent(escEvent);
} }
} else if (isInPopup) { } else if (isInPopup) {
@ -1887,7 +1862,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
console.log("🎯 화면으로 이동:", { console.log("🎯 화면으로 이동:", {
screenId: config.navigateScreenId, screenId: config.navigateScreenId,
target: config.navigateTarget || "_self", target: config.navigateTarget || "_self",
path: screenPath, path: screenPath
}); });
if (config.navigateTarget === "_blank") { if (config.navigateTarget === "_blank") {
@ -1899,7 +1874,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// URL로 이동 // URL로 이동
console.log("🔗 URL로 이동:", { console.log("🔗 URL로 이동:", {
url: config.navigateUrl, url: config.navigateUrl,
target: config.navigateTarget || "_self", target: config.navigateTarget || "_self"
}); });
if (config.navigateTarget === "_blank") { if (config.navigateTarget === "_blank") {
@ -1911,7 +1886,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", { console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
navigateType, navigateType,
hasUrl: !!config?.navigateUrl, hasUrl: !!config?.navigateUrl,
hasScreenId: !!config?.navigateScreenId, hasScreenId: !!config?.navigateScreenId
}); });
} }
}; };
@ -1934,13 +1909,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
} }
}; };
// 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
const buttonLangKey = (widget as any).componentConfig?.langKey;
const buttonText =
buttonLangKey && translations[buttonLangKey]
? translations[buttonLangKey]
: (widget as any).componentConfig?.text || label || "버튼";
// 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용 // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
const hasCustomColors = config?.backgroundColor || config?.textColor; const hasCustomColors = config?.backgroundColor || config?.textColor;
@ -1948,10 +1916,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
<button <button
onClick={handleButtonClick} onClick={handleButtonClick}
disabled={readonly} disabled={readonly}
className={`focus:ring-ring w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 ${ className={`w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
hasCustomColors hasCustomColors
? "" ? ''
: "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs" : 'bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50'
}`} }`}
style={{ style={{
height: "100%", height: "100%",
@ -1960,8 +1928,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
borderColor: config?.borderColor, borderColor: config?.borderColor,
}} }}
> >
{buttonText} {label || "버튼"}
</button>, </button>
); );
} }
@ -1989,25 +1957,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
componentId: fileComponent.id, componentId: fileComponent.id,
currentUploadedFiles: fileComponent.uploadedFiles?.length || 0, currentUploadedFiles: fileComponent.uploadedFiles?.length || 0,
hasOnFormDataChange: !!onFormDataChange, hasOnFormDataChange: !!onFormDataChange,
userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user", userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user"
}); });
const handleFileUpdate = useCallback( const handleFileUpdate = useCallback(async (updates: Partial<FileComponent>) => {
async (updates: Partial<FileComponent>) => {
// 실제 화면에서는 파일 업데이트를 처리 // 실제 화면에서는 파일 업데이트를 처리
console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", { console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
updates, updates,
hasUploadedFiles: !!updates.uploadedFiles, hasUploadedFiles: !!updates.uploadedFiles,
uploadedFilesCount: updates.uploadedFiles?.length || 0, uploadedFilesCount: updates.uploadedFiles?.length || 0,
hasOnFormDataChange: !!onFormDataChange, hasOnFormDataChange: !!onFormDataChange
}); });
if (updates.uploadedFiles && onFormDataChange) { if (updates.uploadedFiles && onFormDataChange) {
const fieldName = fileComponent.columnName || fileComponent.id; const fieldName = fileComponent.columnName || fileComponent.id;
// attach_file_info 테이블 구조에 맞는 데이터 생성 // attach_file_info 테이블 구조에 맞는 데이터 생성
const fileInfoForDB = updates.uploadedFiles.map((file) => ({ const fileInfoForDB = updates.uploadedFiles.map(file => ({
objid: file.objid.replace("temp_", ""), // temp_ 제거 objid: file.objid.replace('temp_', ''), // temp_ 제거
target_objid: "", target_objid: "",
saved_file_name: file.savedFileName, saved_file_name: file.savedFileName,
real_file_name: file.realFileName, real_file_name: file.realFileName,
@ -2020,7 +1987,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
regdate: file.regdate, regdate: file.regdate,
status: file.status, status: file.status,
parent_target_objid: "", parent_target_objid: "",
company_code: file.companyCode, company_code: file.companyCode
})); }));
// console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB); // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
@ -2029,12 +1996,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
const formDataValue = { const formDataValue = {
fileCount: updates.uploadedFiles.length, fileCount: updates.uploadedFiles.length,
docType: fileComponent.fileConfig.docType, docType: fileComponent.fileConfig.docType,
files: updates.uploadedFiles.map((file) => ({ files: updates.uploadedFiles.map(file => ({
objid: file.objid, objid: file.objid,
realFileName: file.realFileName, realFileName: file.realFileName,
fileSize: file.fileSize, fileSize: file.fileSize,
status: file.status, status: file.status
})), }))
}; };
// console.log("📝 FormData 저장값:", { fieldName, formDataValue }); // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
@ -2042,15 +2009,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
// TODO: 실제 API 연동 시 attach_file_info 테이블에 저장 // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
// await saveFilesToDatabase(fileInfoForDB); // await saveFilesToDatabase(fileInfoForDB);
} else { } else {
console.warn("⚠️ 파일 업데이트 실패:", { console.warn("⚠️ 파일 업데이트 실패:", {
hasUploadedFiles: !!updates.uploadedFiles, hasUploadedFiles: !!updates.uploadedFiles,
hasOnFormDataChange: !!onFormDataChange, hasOnFormDataChange: !!onFormDataChange
}); });
} }
}, }, [fileComponent, onFormDataChange]);
[fileComponent, onFormDataChange],
);
return ( return (
<div className="h-full w-full"> <div className="h-full w-full">
@ -2105,10 +2071,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
(component.label || component.style?.labelText) && (component.label || component.style?.labelText) &&
!templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함 !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
// 다국어 라벨 텍스트 결정 (langKey가 있으면 번역 텍스트 사용) const labelText = component.style?.labelText || component.label || "";
const langKey = (component as any).langKey;
const originalLabelText = component.style?.labelText || component.label || "";
const labelText = langKey && translations[langKey] ? translations[langKey] : originalLabelText;
// 라벨 표시 여부 로그 (디버깅용) // 라벨 표시 여부 로그 (디버깅용)
if (component.type === "widget") { if (component.type === "widget") {
@ -2117,8 +2080,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
hideLabel, hideLabel,
shouldShowLabel, shouldShowLabel,
labelText, labelText,
langKey,
hasTranslation: !!translations[langKey],
}); });
} }
@ -2133,6 +2094,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
marginBottom: component.style?.labelMarginBottom || "4px", marginBottom: component.style?.labelMarginBottom || "4px",
}; };
// 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김 // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
const componentForRendering = shouldShowLabel const componentForRendering = shouldShowLabel
? { ? {
@ -2153,27 +2115,23 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
<TableOptionsToolbar /> <TableOptionsToolbar />
{/* 메인 컨텐츠 */} {/* 메인 컨텐츠 */}
<div className="h-full flex-1" style={{ width: "100%" }}> <div className="h-full flex-1" style={{ width: '100%' }}>
{/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */} {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
{shouldShowLabel && ( {shouldShowLabel && (
<label className="mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{labelText} {labelText}
{(component.required || component.componentConfig?.required) && ( {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
<span className="text-destructive ml-1">*</span>
)}
</label> </label>
)} )}
{/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */} {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
<div className="h-full" style={{ width: "100%", height: "100%" }}> <div className="h-full" style={{ width: '100%', height: '100%' }}>{renderInteractiveWidget(componentForRendering)}</div>
{renderInteractiveWidget(componentForRendering)}
</div>
</div> </div>
</div> </div>
{/* 개선된 검증 패널 (선택적 표시) */} {/* 개선된 검증 패널 (선택적 표시) */}
{showValidationPanel && enhancedValidation && ( {showValidationPanel && enhancedValidation && (
<div className="absolute right-4 bottom-4 z-50"> <div className="absolute bottom-4 right-4 z-50">
<FormValidationIndicator <FormValidationIndicator
validationState={enhancedValidation.validationState} validationState={enhancedValidation.validationState}
saveState={enhancedValidation.saveState} saveState={enhancedValidation.saveState}
@ -2191,14 +2149,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
)} )}
{/* 모달 화면 */} {/* 모달 화면 */}
<Dialog <Dialog open={!!popupScreen} onOpenChange={() => {
open={!!popupScreen}
onOpenChange={() => {
setPopupScreen(null); setPopupScreen(null);
setPopupFormData({}); // 팝업 닫을 때 formData도 초기화 setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
}} }}>
> <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
<DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
<DialogHeader className="px-6 pt-4 pb-2"> <DialogHeader className="px-6 pt-4 pb-2">
<DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle> <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
</DialogHeader> </DialogHeader>
@ -2209,16 +2164,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
<div className="text-muted-foreground">화면을 불러오는 중...</div> <div className="text-muted-foreground">화면을 불러오는 중...</div>
</div> </div>
) : popupLayout.length > 0 ? ( ) : popupLayout.length > 0 ? (
<div <div className="relative bg-background border rounded" style={{
className="bg-background relative rounded border"
style={{
width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%", width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px", height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
minHeight: "400px", minHeight: "400px",
position: "relative", position: "relative",
overflow: "hidden", overflow: "hidden"
}} }}>
>
{/* 팝업에서도 실제 위치와 크기로 렌더링 */} {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
{popupLayout.map((popupComponent) => ( {popupLayout.map((popupComponent) => (
<div <div
@ -2244,12 +2196,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
fieldName, fieldName,
value, value,
valueType: typeof value, valueType: typeof value,
prevFormData: popupFormData, prevFormData: popupFormData
}); });
setPopupFormData((prev) => ({ setPopupFormData(prev => ({
...prev, ...prev,
[fieldName]: value, [fieldName]: value
})); }));
}} }}
/> />

1
frontend/components/screen/InteractiveScreenViewerDynamic.tsx
View File

@ -365,7 +365,6 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
isInteractive={true} isInteractive={true}
formData={formData} formData={formData}
originalData={originalData || undefined} originalData={originalData || undefined}
initialData={(originalData && Object.keys(originalData).length > 0) ? originalData : formData} // 🆕 originalData가 있으면 사용, 없으면 formData 사용 (생성 모드에서 부모 데이터 전달)
onFormDataChange={handleFormDataChange} onFormDataChange={handleFormDataChange}
screenId={screenInfo?.id} screenId={screenInfo?.id}
tableName={screenInfo?.tableName} tableName={screenInfo?.tableName}

71
frontend/components/screen/ScreenSettingModal.tsx
View File

@ -416,6 +416,10 @@ export function ScreenSettingModal({
<Database className="h-3 w-3" /> <Database className="h-3 w-3" />
개요 개요
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="table-setting" className="gap-1 text-xs px-2" disabled={!mainTable}>
<Settings2 className="h-3 w-3" />
테이블 설정
</TabsTrigger>
<TabsTrigger value="control-management" className="gap-1 text-xs px-2"> <TabsTrigger value="control-management" className="gap-1 text-xs px-2">
<Zap className="h-3 w-3" /> <Zap className="h-3 w-3" />
제어 관리 제어 관리
@ -466,7 +470,22 @@ export function ScreenSettingModal({
/> />
</TabsContent> </TabsContent>
{/* 탭 2: 제어 관리 */} {/* 탭 2: 테이블 설정 */}
<TabsContent value="table-setting" className="mt-0 min-h-0 flex-1 overflow-hidden p-0">
{mainTable && (
<TableSettingModal
isOpen={true}
onClose={() => {}} // 탭에서는 닫기 불필요
tableName={mainTable}
tableLabel={mainTableLabel}
screenId={currentScreenId}
onSaveSuccess={handleRefresh}
isEmbedded={true} // 임베드 모드
/>
)}
</TabsContent>
{/* 탭 3: 제어 관리 */}
<TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3"> <TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
<ControlManagementTab <ControlManagementTab
screenId={currentScreenId} screenId={currentScreenId}
@ -2198,17 +2217,6 @@ function OverviewTab({
<Database className="h-4 w-4 text-blue-500" /> <Database className="h-4 w-4 text-blue-500" />
메인 테이블 메인 테이블
</h3> </h3>
{mainTable && (
<Button
variant="outline"
size="sm"
className="h-7 gap-1 text-xs"
onClick={() => onOpenTableSetting?.(mainTable, mainTableLabel)}
>
<Settings2 className="h-3 w-3" />
테이블 설정
</Button>
)}
</div> </div>
{mainTable ? ( {mainTable ? (
<TableColumnAccordion <TableColumnAccordion
@ -3049,6 +3057,7 @@ interface ButtonControlInfo {
// 버튼 스타일 // 버튼 스타일
backgroundColor?: string; backgroundColor?: string;
textColor?: string; textColor?: string;
borderRadius?: string;
// 모달/네비게이션 관련 // 모달/네비게이션 관련
modalScreenId?: number; modalScreenId?: number;
navigateScreenId?: number; navigateScreenId?: number;
@ -3215,6 +3224,7 @@ function ControlManagementTab({
// 버튼 스타일 (webTypeConfig 우선) // 버튼 스타일 (webTypeConfig 우선)
backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor, backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor,
textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor, textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor,
borderRadius: webTypeConfig.borderRadius || config.borderRadius || style.borderRadius,
// 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용) // 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용)
modalScreenId: action.targetScreenId || action.modalScreenId, modalScreenId: action.targetScreenId || action.modalScreenId,
navigateScreenId: action.navigateScreenId || action.targetScreenId, navigateScreenId: action.navigateScreenId || action.targetScreenId,
@ -3527,6 +3537,11 @@ function ControlManagementTab({
comp.style.color = values.textColor; comp.style.color = values.textColor;
comp.style.labelColor = values.textColor; comp.style.labelColor = values.textColor;
} }
if (values.borderRadius !== undefined) {
comp.webTypeConfig.borderRadius = values.borderRadius;
comp.componentConfig.borderRadius = values.borderRadius;
comp.style.borderRadius = values.borderRadius;
}
// 액션 타입 업데이트 // 액션 타입 업데이트
if (values.actionType) { if (values.actionType) {
@ -3735,6 +3750,7 @@ function ControlManagementTab({
const currentLabel = editedValues[btn.id]?.label ?? btn.label; const currentLabel = editedValues[btn.id]?.label ?? btn.label;
const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6"; const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6";
const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff"; const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff";
const currentBorderRadius = editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px";
return ( return (
<div key={btn.id} className="py-3 px-1"> <div key={btn.id} className="py-3 px-1">
@ -3742,10 +3758,11 @@ function ControlManagementTab({
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
{/* 버튼 프리뷰 */} {/* 버튼 프리뷰 */}
<div <div
className="flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium min-w-[60px] shrink-0" className="flex items-center justify-center px-3 py-1.5 text-xs font-medium min-w-[60px] shrink-0"
style={{ style={{
backgroundColor: currentBgColor, backgroundColor: currentBgColor,
color: currentTextColor, color: currentTextColor,
borderRadius: currentBorderRadius,
}} }}
> >
{currentLabel || "버튼"} {currentLabel || "버튼"}
@ -3870,6 +3887,34 @@ function ControlManagementTab({
</div> </div>
</div> </div>
{/* 버튼 모서리 (borderRadius) */}
<div className="grid grid-cols-[80px_1fr] items-center gap-2">
<Label className="text-xs text-muted-foreground">모서리</Label>
<div className="flex items-center gap-2">
<Select
value={editedValues[btn.id]?.borderRadius ?? btn.borderRadius ?? "4px"}
onValueChange={(val) => setEditedValues(prev => ({
...prev,
[btn.id]: { ...prev[btn.id], borderRadius: val }
}))}
>
<SelectTrigger className="h-7 w-[100px] text-xs">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="0px" className="text-xs">없음 (0px)</SelectItem>
<SelectItem value="2px" className="text-xs">약간 (2px)</SelectItem>
<SelectItem value="4px" className="text-xs">기본 (4px)</SelectItem>
<SelectItem value="6px" className="text-xs">둥글게 (6px)</SelectItem>
<SelectItem value="8px" className="text-xs">더 둥글게 (8px)</SelectItem>
<SelectItem value="12px" className="text-xs">많이 (12px)</SelectItem>
<SelectItem value="9999px" className="text-xs">원형</SelectItem>
</SelectContent>
</Select>
<span className="text-[10px] text-muted-foreground">버튼 모서리 둥글기</span>
</div>
</div>
{/* 확인 메시지 설정 (save/delete 액션에서만 표시) */} {/* 확인 메시지 설정 (save/delete 액션에서만 표시) */}
{((editedValues[btn.id]?.actionType || btn.actionType) === "save" || {((editedValues[btn.id]?.actionType || btn.actionType) === "save" ||
(editedValues[btn.id]?.actionType || btn.actionType) === "delete") && ( (editedValues[btn.id]?.actionType || btn.actionType) === "delete") && (

240
frontend/components/screen/TableSettingModal.tsx
View File

@ -129,6 +129,7 @@ interface TableSettingModalProps {
columns?: ColumnInfo[]; columns?: ColumnInfo[];
filterColumns?: string[]; filterColumns?: string[];
onSaveSuccess?: () => void; onSaveSuccess?: () => void;
isEmbedded?: boolean; // 탭 안에 임베드 모드로 표시
} }
// 검색 가능한 Select 컴포넌트 // 검색 가능한 Select 컴포넌트
@ -256,6 +257,7 @@ export function TableSettingModal({
columns = [], columns = [],
filterColumns = [], filterColumns = [],
onSaveSuccess, onSaveSuccess,
isEmbedded = false,
}: TableSettingModalProps) { }: TableSettingModalProps) {
const [activeTab, setActiveTab] = useState("columns"); const [activeTab, setActiveTab] = useState("columns");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -304,9 +306,19 @@ export function TableSettingModal({
// 초기 편집 상태 설정 // 초기 편집 상태 설정
const initialEdits: Record<string, Partial<ColumnTypeInfo>> = {}; const initialEdits: Record<string, Partial<ColumnTypeInfo>> = {};
columnsData.forEach((col) => { columnsData.forEach((col) => {
// referenceTable이 설정되어 있으면 inputType은 entity여야 함
let effectiveInputType = col.inputType || "direct";
if (col.referenceTable && effectiveInputType !== "entity") {
effectiveInputType = "entity";
}
// codeCategory/codeValue가 설정되어 있으면 inputType은 code여야 함
if (col.codeCategory && effectiveInputType !== "code") {
effectiveInputType = "code";
}
initialEdits[col.columnName] = { initialEdits[col.columnName] = {
displayName: col.displayName, displayName: col.displayName,
inputType: col.inputType || "direct", inputType: effectiveInputType,
referenceTable: col.referenceTable, referenceTable: col.referenceTable,
referenceColumn: col.referenceColumn, referenceColumn: col.referenceColumn,
displayColumn: col.displayColumn, displayColumn: col.displayColumn,
@ -343,10 +355,10 @@ export function TableSettingModal({
try { try {
// 모든 화면 조회 // 모든 화면 조회
const screensResponse = await screenApi.getScreens({ size: 1000 }); const screensResponse = await screenApi.getScreens({ size: 1000 });
if (screensResponse.items) { if (screensResponse.data) {
const usingScreens: ScreenUsingTable[] = []; const usingScreens: ScreenUsingTable[] = [];
screensResponse.items.forEach((screen: any) => { screensResponse.data.forEach((screen: any) => {
// 메인 테이블로 사용하는 경우 // 메인 테이블로 사용하는 경우
if (screen.tableName === tableName) { if (screen.tableName === tableName) {
usingScreens.push({ usingScreens.push({
@ -418,6 +430,35 @@ export function TableSettingModal({
}, },
})); }));
// 입력 타입 변경 시 관련 필드 초기화
if (field === "inputType") {
// 엔티티가 아닌 다른 타입으로 변경하면 참조 설정 초기화
if (value !== "entity") {
setEditedColumns((prev) => ({
...prev,
[columnName]: {
...prev[columnName],
inputType: value,
referenceTable: "",
referenceColumn: "",
displayColumn: "",
},
}));
}
// 코드가 아닌 다른 타입으로 변경하면 코드 설정 초기화
if (value !== "code") {
setEditedColumns((prev) => ({
...prev,
[columnName]: {
...prev[columnName],
inputType: value,
codeCategory: "",
codeValue: "",
},
}));
}
}
// 참조 테이블 변경 시 참조 컬럼 초기화 // 참조 테이블 변경 시 참조 컬럼 초기화
if (field === "referenceTable") { if (field === "referenceTable") {
setEditedColumns((prev) => ({ setEditedColumns((prev) => ({
@ -453,7 +494,17 @@ export function TableSettingModal({
// detailSettings 처리 (Entity 타입인 경우) // detailSettings 처리 (Entity 타입인 경우)
let finalDetailSettings = mergedColumn.detailSettings || ""; let finalDetailSettings = mergedColumn.detailSettings || "";
if (mergedColumn.inputType === "entity" && mergedColumn.referenceTable) { // referenceTable이 설정되어 있으면 inputType을 entity로 자동 설정
let currentInputType = (mergedColumn.inputType || "") as string;
if (mergedColumn.referenceTable && currentInputType !== "entity") {
currentInputType = "entity";
}
// codeCategory가 설정되어 있으면 inputType을 code로 자동 설정
if (mergedColumn.codeCategory && currentInputType !== "code") {
currentInputType = "code";
}
if (currentInputType === "entity" && mergedColumn.referenceTable) {
// 기존 detailSettings를 파싱하거나 새로 생성 // 기존 detailSettings를 파싱하거나 새로 생성
let existingSettings: Record<string, unknown> = {}; let existingSettings: Record<string, unknown> = {};
if (typeof mergedColumn.detailSettings === "string" && mergedColumn.detailSettings.trim().startsWith("{")) { if (typeof mergedColumn.detailSettings === "string" && mergedColumn.detailSettings.trim().startsWith("{")) {
@ -479,7 +530,7 @@ export function TableSettingModal({
} }
// Code 타입인 경우 hierarchyRole을 detailSettings에 포함 // Code 타입인 경우 hierarchyRole을 detailSettings에 포함
if (mergedColumn.inputType === "code" && (mergedColumn as any).hierarchyRole) { if (currentInputType === "code" && (mergedColumn as any).hierarchyRole) {
let existingSettings: Record<string, unknown> = {}; let existingSettings: Record<string, unknown> = {};
if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) { if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
try { try {
@ -502,7 +553,7 @@ export function TableSettingModal({
const columnSetting: ColumnSettings = { const columnSetting: ColumnSettings = {
columnName: columnName, columnName: columnName,
columnLabel: mergedColumn.displayName || originalColumn.displayName || "", columnLabel: mergedColumn.displayName || originalColumn.displayName || "",
webType: mergedColumn.inputType || originalColumn.inputType || "text", inputType: currentInputType || "text", // referenceTable/codeCategory가 설정된 경우 자동 보정된 값 사용
detailSettings: finalDetailSettings, detailSettings: finalDetailSettings,
codeCategory: mergedColumn.codeCategory || originalColumn.codeCategory || "", codeCategory: mergedColumn.codeCategory || originalColumn.codeCategory || "",
codeValue: mergedColumn.codeValue || originalColumn.codeValue || "", codeValue: mergedColumn.codeValue || originalColumn.codeValue || "",
@ -593,6 +644,158 @@ export function TableSettingModal({
]; ];
}; };
// 임베드 모드
if (isEmbedded) {
return (
<>
<div className="flex h-full flex-col">
{/* 헤더 */}
<div className="flex flex-shrink-0 items-center justify-between border-b pb-2 px-3 pt-2">
<div className="flex items-center gap-2">
<Table2 className="h-4 w-4 text-green-500" />
<span className="text-sm font-medium">{tableLabel || tableName}</span>
{tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
<span className="text-xs text-muted-foreground">({tableName})</span>
)}
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => setShowTableManagementModal(true)}
className="h-7 gap-1 text-xs"
>
<Settings className="h-3 w-3" />
테이블 타입 관리
</Button>
<Button
variant="outline"
size="sm"
onClick={handleRefresh}
className="h-7 w-7 p-0"
disabled={loading}
>
<RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
</Button>
<Button
size="sm"
onClick={handleSaveAll}
className="h-7 gap-1 text-xs"
disabled={saving || loading}
>
{saving ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : (
<Save className="h-3 w-3" />
)}
저장
</Button>
</div>
</div>
<div className="flex min-h-0 flex-1 gap-3 p-3">
{/* 좌측: 탭 (40%) */}
<div className="flex w-[40%] min-h-0 flex-col">
<Tabs
value={activeTab}
onValueChange={setActiveTab}
className="flex min-h-0 flex-1 flex-col"
>
<TabsList className="h-8 flex-shrink-0">
<TabsTrigger value="columns" className="gap-1 text-xs">
<Columns3 className="h-3 w-3" />
컬럼 설정
</TabsTrigger>
<TabsTrigger value="screens" className="gap-1 text-xs">
<Monitor className="h-3 w-3" />
화면 연동
</TabsTrigger>
<TabsTrigger value="references" className="gap-1 text-xs">
<Eye className="h-3 w-3" />
참조 관계
</TabsTrigger>
</TabsList>
<TabsContent value="columns" className="mt-2 min-h-0 flex-1 overflow-hidden">
<ColumnListTab
columns={tableColumns.map((col) => ({
...col,
isPK: col.columnName === "id" || col.columnName.endsWith("_id"),
isFK: (col.inputType as string) === "entity",
}))}
editedColumns={editedColumns}
selectedColumn={selectedColumn}
onSelectColumn={setSelectedColumn}
loading={loading}
/>
</TabsContent>
<TabsContent value="screens" className="mt-2 min-h-0 flex-1 overflow-hidden">
<ScreensTab screensUsingTable={screensUsingTable} loading={loading} />
</TabsContent>
<TabsContent value="references" className="mt-2 min-h-0 flex-1 overflow-hidden">
<ReferenceTab
tableName={tableName}
tableLabel={tableLabel}
referencedBy={referencedBy}
joinColumnRefs={joinColumnRefs}
loading={loading}
/>
</TabsContent>
</Tabs>
</div>
{/* 우측: 상세 설정 (60%) */}
<div className="flex w-[60%] min-h-0 flex-col rounded-lg border bg-muted/30 p-3">
{selectedColumn && mergedColumns.find((c) => c.columnName === selectedColumn) ? (
<ColumnDetailPanel
columnInfo={mergedColumns.find((c) => c.columnName === selectedColumn)!}
editedColumn={editedColumns[selectedColumn] || {}}
tableOptions={tableOptions}
inputTypeOptions={inputTypeOptions}
getRefColumnOptions={getRefColumnOptions}
loadingRefColumns={loadingRefColumns}
onColumnChange={(field, value) => handleColumnChange(selectedColumn, field, value)}
/>
) : (
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
<div className="text-center">
<Columns3 className="mx-auto h-12 w-12 text-muted-foreground/30" />
<p className="mt-2">왼쪽에서 컬럼을 선택하면</p>
<p>상세 설정을 할 수 있습니다.</p>
</div>
</div>
)}
</div>
</div>
</div>
{/* 테이블 타입 관리 모달 */}
<Dialog open={showTableManagementModal} onOpenChange={setShowTableManagementModal}>
<DialogContent className="flex h-[90vh] max-h-[1000px] w-[95vw] max-w-[1400px] flex-col p-0">
<div className="flex items-center justify-between border-b p-4">
<h2 className="text-lg font-semibold">테이블 타입 관리</h2>
<Button
variant="ghost"
size="sm"
onClick={() => {
setShowTableManagementModal(false);
loadTableData();
}}
>
<X className="h-4 w-4" />
</Button>
</div>
<div className="flex-1 overflow-hidden">
<TableManagementPage />
</div>
</DialogContent>
</Dialog>
</>
);
}
// 기존 모달 모드
return ( return (
<> <>
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
@ -843,6 +1046,7 @@ function ColumnListTab({
<div className="space-y-1 px-3 pb-3"> <div className="space-y-1 px-3 pb-3">
{filteredColumns.map((col) => { {filteredColumns.map((col) => {
const edited = editedColumns[col.columnName] || {}; const edited = editedColumns[col.columnName] || {};
// editedColumns에서 inputType을 가져옴 (초기화 시 이미 보정됨)
const inputType = (edited.inputType || col.inputType || "text") as string; const inputType = (edited.inputType || col.inputType || "text") as string;
const isSelected = selectedColumn === col.columnName; const isSelected = selectedColumn === col.columnName;
@ -873,23 +1077,17 @@ function ColumnListTab({
PK PK
</Badge> </Badge>
)} )}
{col.isFK && ( {/* 엔티티 타입이거나 referenceTable이 설정되어 있으면 조인 배지 표시 (FK와 동일 의미) */}
<Badge variant="outline" className="bg-green-100 text-green-700 text-[10px] px-1.5"> {(inputType === "entity" || edited.referenceTable || col.referenceTable) && (
<Link2 className="mr-0.5 h-2.5 w-2.5" />
FK
</Badge>
)}
{(edited.referenceTable || col.referenceTable) && (
<Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5"> <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
<Link2 className="mr-0.5 h-2.5 w-2.5" />
조인 조인
</Badge> </Badge>
)} )}
</div> </div>
</div> </div>
<div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground"> <div className="mt-1 text-xs text-muted-foreground">
<span className="font-mono">{col.columnName}</span> <span className="font-mono">{col.columnName}</span>
<span>•</span>
<span>{col.dataType}</span>
</div> </div>
</div> </div>
); );
@ -925,10 +1123,11 @@ function ColumnDetailPanel({
onColumnChange, onColumnChange,
}: ColumnDetailPanelProps) { }: ColumnDetailPanelProps) {
const currentLabel = editedColumn.displayName ?? columnInfo.displayName ?? ""; const currentLabel = editedColumn.displayName ?? columnInfo.displayName ?? "";
const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
const currentRefTable = editedColumn.referenceTable ?? columnInfo.referenceTable ?? ""; const currentRefTable = editedColumn.referenceTable ?? columnInfo.referenceTable ?? "";
const currentRefColumn = editedColumn.referenceColumn ?? columnInfo.referenceColumn ?? ""; const currentRefColumn = editedColumn.referenceColumn ?? columnInfo.referenceColumn ?? "";
const currentDisplayColumn = editedColumn.displayColumn ?? columnInfo.displayColumn ?? ""; const currentDisplayColumn = editedColumn.displayColumn ?? columnInfo.displayColumn ?? "";
// editedColumn에서 inputType을 가져옴 (초기화 시 이미 보정됨)
const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
return ( return (
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
@ -948,9 +1147,10 @@ function ColumnDetailPanel({
Primary Key Primary Key
</Badge> </Badge>
)} )}
{columnInfo.isFK && ( {/* 엔티티 타입이거나 referenceTable이 있으면 조인 배지 표시 */}
<Badge variant="outline" className="bg-green-100 text-green-700 text-[10px]"> {(currentInputType === "entity" || currentRefTable) && (
Foreign Key <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px]">
조인
</Badge> </Badge>
)} )}
</div> </div>

7
frontend/lib/api/entityJoin.ts
View File

@ -77,12 +77,6 @@ export const entityJoinApi = {
filterColumn?: string; filterColumn?: string;
filterValue?: any; filterValue?: any;
}; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외) }; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
deduplication?: {
enabled: boolean;
groupByColumn: string;
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
sortColumn?: string;
}; // 🆕 중복 제거 설정
companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능) companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
} = {}, } = {},
): Promise<EntityJoinResponse> => { ): Promise<EntityJoinResponse> => {
@ -116,7 +110,6 @@ export const entityJoinApi = {
autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함) autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함)
dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터 dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터
excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터 excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터
deduplication: params.deduplication ? JSON.stringify(params.deduplication) : undefined, // 🆕 중복 제거 설정
}, },
}); });
return response.data.data; return response.data.data;

6
frontend/lib/api/tableManagement.ts
View File

@ -13,7 +13,7 @@ export interface ColumnTypeInfo {
dataType: string; dataType: string;
dbType: string; dbType: string;
webType: string; webType: string;
inputType?: "direct" | "auto"; inputType?: string; // text, number, entity, code, select, date, checkbox 등
detailSettings: string; detailSettings: string;
description?: string; description?: string;
isNullable: string; isNullable: string;
@ -39,11 +39,11 @@ export interface TableInfo {
columnCount: number; columnCount: number;
} }
// 컬럼 설정 타입 // 컬럼 설정 타입 (백엔드 API와 동일한 필드명 사용)
export interface ColumnSettings { export interface ColumnSettings {
columnName?: string; columnName?: string;
columnLabel: string; columnLabel: string;
webType: string; inputType: string; // 백엔드에서 inputType으로 받음
detailSettings: string; detailSettings: string;
codeCategory: string; codeCategory: string;
codeValue: string; codeValue: string;

111
frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
View File

@ -27,7 +27,6 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext"; import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
import { applyMappingRules } from "@/lib/utils/dataMapping"; import { applyMappingRules } from "@/lib/utils/dataMapping";
import { apiClient } from "@/lib/api/client"; import { apiClient } from "@/lib/api/client";
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
export interface ButtonPrimaryComponentProps extends ComponentRendererProps { export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
config?: ButtonPrimaryConfig; config?: ButtonPrimaryConfig;
@ -108,7 +107,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인 const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
const screenContext = useScreenContextOptional(); // 화면 컨텍스트 const screenContext = useScreenContextOptional(); // 화면 컨텍스트
const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트 const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
// 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동) // 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
const splitPanelPosition = screenContext?.splitPanelPosition; const splitPanelPosition = screenContext?.splitPanelPosition;
@ -301,20 +299,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
// 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨) // 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨)
const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({}); const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({});
// 🆕 splitPanelContext?.selectedLeftData를 로컬 상태로 추적 (리렌더링 보장)
const [trackedSelectedLeftData, setTrackedSelectedLeftData] = useState<Record<string, any> | null>(null);
// splitPanelContext?.selectedLeftData 변경 감지 및 로컬 상태 동기화
useEffect(() => {
const newData = splitPanelContext?.selectedLeftData ?? null;
setTrackedSelectedLeftData(newData);
// console.log("🔄 [ButtonPrimary] selectedLeftData 변경 감지:", {
// label: component.label,
// hasData: !!newData,
// dataKeys: newData ? Object.keys(newData) : [],
// });
}, [splitPanelContext?.selectedLeftData, component.label]);
// modalDataStore 상태 구독 (실시간 업데이트) // modalDataStore 상태 구독 (실시간 업데이트)
useEffect(() => { useEffect(() => {
const actionConfig = component.componentConfig?.action; const actionConfig = component.componentConfig?.action;
@ -373,8 +357,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
// 2. 분할 패널 좌측 선택 데이터 확인 // 2. 분할 패널 좌측 선택 데이터 확인
if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") { if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") {
// SplitPanelContext에서 확인 (trackedSelectedLeftData 사용으로 리렌더링 보장) // SplitPanelContext에서 확인
if (trackedSelectedLeftData && Object.keys(trackedSelectedLeftData).length > 0) { if (splitPanelContext?.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0) {
if (!hasSelection) { if (!hasSelection) {
hasSelection = true; hasSelection = true;
selectionCount = 1; selectionCount = 1;
@ -413,7 +397,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
selectionCount, selectionCount,
selectionSource, selectionSource,
hasSplitPanelContext: !!splitPanelContext, hasSplitPanelContext: !!splitPanelContext,
trackedSelectedLeftData: trackedSelectedLeftData, selectedLeftData: splitPanelContext?.selectedLeftData,
selectedRowsData: selectedRowsData?.length, selectedRowsData: selectedRowsData?.length,
selectedRows: selectedRows?.length, selectedRows: selectedRows?.length,
flowSelectedData: flowSelectedData?.length, flowSelectedData: flowSelectedData?.length,
@ -445,7 +429,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
component.label, component.label,
selectedRows, selectedRows,
selectedRowsData, selectedRowsData,
trackedSelectedLeftData, splitPanelContext?.selectedLeftData,
flowSelectedData, flowSelectedData,
splitPanelContext, splitPanelContext,
modalStoreData, modalStoreData,
@ -737,20 +721,22 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
return; return;
} }
try { if (!screenContext) {
let sourceData: any[] = []; toast.error("화면 컨텍스트를 찾을 수 없습니다.");
return;
}
// 1. ScreenContext에서 DataProvider를 통해 데이터 가져오기 시도 try {
if (screenContext) { // 1. 소스 컴포넌트에서 데이터 가져오기
let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId); let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId);
// 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색 // 🆕 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
// (조건부 컨테이너의 다른 섹션으로 전환했을 때 이전 컴포넌트 ID가 남아있는 경우 대응)
if (!sourceProvider) { if (!sourceProvider) {
console.log(`⚠️ [ButtonPrimary] 지정된 소스 컴포넌트를 찾을 수 없음: ${dataTransferConfig.sourceComponentId}`); console.log(`⚠️ [ButtonPrimary] 지정된 소스 컴포넌트를 찾을 수 없음: ${dataTransferConfig.sourceComponentId}`);
console.log(`🔍 [ButtonPrimary] 현재 화면에서 DataProvider 자동 탐색...`); console.log(`🔍 [ButtonPrimary] 현재 화면에서 DataProvider 자동 탐색...`);
const allProviders = screenContext.getAllDataProviders(); const allProviders = screenContext.getAllDataProviders();
console.log(`📋 [ButtonPrimary] 등록된 DataProvider 목록:`, Array.from(allProviders.keys()));
// 테이블 리스트 우선 탐색 // 테이블 리스트 우선 탐색
for (const [id, provider] of allProviders) { for (const [id, provider] of allProviders) {
@ -771,64 +757,24 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
); );
} }
} }
}
if (sourceProvider) { if (!sourceProvider) {
const rawSourceData = sourceProvider.getSelectedData(); toast.error("데이터를 제공할 수 있는 컴포넌트를 찾을 수 없습니다.");
sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
console.log("📦 [ButtonPrimary] ScreenContext에서 소스 데이터 획득:", {
rawSourceData,
sourceData,
count: sourceData.length
});
}
} else {
console.log("⚠️ [ButtonPrimary] ScreenContext가 없습니다. modalDataStore에서 데이터를 찾습니다.");
}
// 2. ScreenContext에서 데이터를 찾지 못한 경우, modalDataStore에서 fallback 조회
if (sourceData.length === 0) {
console.log("🔍 [ButtonPrimary] modalDataStore에서 데이터 탐색 시도...");
try {
const { useModalDataStore } = await import("@/stores/modalDataStore");
const dataRegistry = useModalDataStore.getState().dataRegistry;
console.log("📋 [ButtonPrimary] modalDataStore 전체 키:", Object.keys(dataRegistry));
// sourceTableName이 지정되어 있으면 해당 테이블에서 조회
const sourceTableName = dataTransferConfig.sourceTableName || tableName;
if (sourceTableName && dataRegistry[sourceTableName]) {
const modalData = dataRegistry[sourceTableName];
sourceData = modalData.map((item: any) => item.originalData || item);
console.log(`✅ [ButtonPrimary] modalDataStore에서 데이터 발견 (${sourceTableName}):`, sourceData.length, "건");
} else {
// 테이블명으로 못 찾으면 첫 번째 데이터 사용
const firstKey = Object.keys(dataRegistry)[0];
if (firstKey && dataRegistry[firstKey]?.length > 0) {
const modalData = dataRegistry[firstKey];
sourceData = modalData.map((item: any) => item.originalData || item);
console.log(`✅ [ButtonPrimary] modalDataStore 첫 번째 키에서 데이터 발견 (${firstKey}):`, sourceData.length, "건");
}
}
} catch (err) {
console.warn("⚠️ [ButtonPrimary] modalDataStore 접근 실패:", err);
}
}
// 3. 여전히 데이터가 없으면 에러
if (!sourceData || sourceData.length === 0) {
console.error("❌ [ButtonPrimary] 선택된 데이터를 찾을 수 없습니다.", {
hasScreenContext: !!screenContext,
sourceComponentId: dataTransferConfig.sourceComponentId,
sourceTableName: dataTransferConfig.sourceTableName || tableName,
});
toast.warning("선택된 데이터가 없습니다. 항목을 먼저 선택해주세요.");
return; return;
} }
}
console.log("📦 [ButtonPrimary] 최종 소스 데이터:", { sourceData, count: sourceData.length }); const rawSourceData = sourceProvider.getSelectedData();
// 🆕 배열이 아닌 경우 배열로 변환
const sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
console.log("📦 소스 데이터:", { rawSourceData, sourceData, isArray: Array.isArray(rawSourceData) });
if (!sourceData || sourceData.length === 0) {
toast.warning("선택된 데이터가 없습니다.");
return;
}
// 1.5. 추가 데이터 소스 처리 (예: 조건부 컨테이너의 카테고리 값) // 1.5. 추가 데이터 소스 처리 (예: 조건부 컨테이너의 카테고리 값)
let additionalData: Record<string, any> = {}; let additionalData: Record<string, any> = {};
@ -1360,10 +1306,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
...userStyle, ...userStyle,
}; };
// 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용 const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
const langKey = (component as any).componentConfig?.langKey;
const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
const buttonContent = getTranslatedText(langKey, originalButtonText);
return ( return (
<> <>

1027
frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
View File

File diff suppressed because it is too large Load Diff

403
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@ -6,7 +6,6 @@ import { WebType } from "@/types/common";
import { tableTypeApi } from "@/lib/api/screen"; import { tableTypeApi } from "@/lib/api/screen";
import { entityJoinApi } from "@/lib/api/entityJoin"; import { entityJoinApi } from "@/lib/api/entityJoin";
import { codeCache } from "@/lib/caching/codeCache"; import { codeCache } from "@/lib/caching/codeCache";
import { getCategoryLabelsByCodes } from "@/lib/api/tableCategoryValue";
import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization"; import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
import { getFullImageUrl } from "@/lib/api/client"; import { getFullImageUrl } from "@/lib/api/client";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -67,7 +66,6 @@ import { useAuth } from "@/hooks/useAuth";
import { useScreenContextOptional } from "@/contexts/ScreenContext"; import { useScreenContextOptional } from "@/contexts/ScreenContext";
import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext"; import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer"; import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
// ======================================== // ========================================
// 인터페이스 // 인터페이스
@ -244,11 +242,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
parentTabsComponentId, parentTabsComponentId,
companyCode, companyCode,
}) => { }) => {
// ========================================
// 다국어 번역 훅
// ========================================
const { getTranslatedText } = useScreenMultiLang();
// ======================================== // ========================================
// 설정 및 스타일 // 설정 및 스타일
// ======================================== // ========================================
@ -481,7 +474,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
} }
// 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용) // 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
// 🆕 다중 값 지원: 셀 값이 "A,B,C" 형태일 때, 필터에서 "A"를 선택하면 해당 행도 표시
if (Object.keys(headerFilters).length > 0) { if (Object.keys(headerFilters).length > 0) {
result = result.filter((row) => { result = result.filter((row) => {
return Object.entries(headerFilters).every(([columnName, values]) => { return Object.entries(headerFilters).every(([columnName, values]) => {
@ -491,16 +483,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()]; const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : ""; const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
// 정확히 일치하는 경우 return values.has(cellStr);
if (values.has(cellStr)) return true;
// 다중 값인 경우: 콤마로 분리해서 하나라도 포함되면 true
if (cellStr.includes(",")) {
const cellValues = cellStr.split(",").map(v => v.trim());
return cellValues.some(v => values.has(v));
}
return false;
}); });
}); });
} }
@ -871,55 +854,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
}; };
// 화면 컨텍스트에 데이터 제공자/수신자로 등록 // 화면 컨텍스트에 데이터 제공자/수신자로 등록
// 🔧 dataProvider와 dataReceiver를 의존성에 포함하지 않고,
// 대신 data와 selectedRows가 변경될 때마다 재등록하여 최신 클로저 참조
useEffect(() => { useEffect(() => {
if (screenContext && component.id) { if (screenContext && component.id) {
// 🔧 매번 새로운 dataProvider를 등록하여 최신 selectedRows 참조 screenContext.registerDataProvider(component.id, dataProvider);
const currentDataProvider: DataProvidable = { screenContext.registerDataReceiver(component.id, dataReceiver);
componentId: component.id,
componentType: "table-list",
getSelectedData: () => {
const selectedData = filteredData.filter((row) => {
const rowId = String(row.id || row[tableConfig.selectedTable + "_id"] || "");
return selectedRows.has(rowId);
});
console.log("📊 [TableList] getSelectedData 호출:", {
componentId: component.id,
selectedRowsSize: selectedRows.size,
filteredDataLength: filteredData.length,
resultLength: selectedData.length,
});
return selectedData;
},
getAllData: () => filteredData,
clearSelection: () => {
setSelectedRows(new Set());
setIsAllSelected(false);
},
};
const currentDataReceiver: DataReceivable = {
componentId: component.id,
componentType: "table",
receiveData: dataReceiver.receiveData,
getData: () => data,
};
screenContext.registerDataProvider(component.id, currentDataProvider);
screenContext.registerDataReceiver(component.id, currentDataReceiver);
console.log("✅ [TableList] ScreenContext에 등록:", {
componentId: component.id,
selectedRowsSize: selectedRows.size,
});
return () => { return () => {
screenContext.unregisterDataProvider(component.id); screenContext.unregisterDataProvider(component.id);
screenContext.unregisterDataReceiver(component.id); screenContext.unregisterDataReceiver(component.id);
}; };
} }
}, [screenContext, component.id, data, selectedRows, filteredData, tableConfig.selectedTable]); }, [screenContext, component.id, data, selectedRows]);
// 분할 패널 컨텍스트에 데이터 수신자로 등록 // 분할 패널 컨텍스트에 데이터 수신자로 등록
// useSplitPanelPosition 훅으로 위치 가져오기 (중첩된 화면에서도 작동) // useSplitPanelPosition 훅으로 위치 가져오기 (중첩된 화면에서도 작동)
@ -1086,16 +1031,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정 onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정
// 틀고정 컬럼 관련 // 틀고정 컬럼 관련
frozenColumnCount, // 현재 틀고정 컬럼 수 frozenColumnCount, // 현재 틀고정 컬럼 수
onFrozenColumnCountChange: (count: number, updatedColumns?: Array<{ columnName: string; visible: boolean }>) => { onFrozenColumnCountChange: (count: number) => {
setFrozenColumnCount(count); setFrozenColumnCount(count);
// 체크박스 컬럼은 항상 틀고정에 포함 // 체크박스 컬럼은 항상 틀고정에 포함
const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : []; const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
// 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정 // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
// updatedColumns가 전달되면 그것을 사용, 아니면 columnsToRegister 사용 const visibleCols = columnsToRegister
const colsToUse = updatedColumns || columnsToRegister;
const visibleCols = colsToUse
.filter((col) => col.visible !== false) .filter((col) => col.visible !== false)
.map((col) => col.columnName || (col as any).field); .map((col) => col.columnName || col.field);
const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)]; const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
setFrozenColumns(newFrozenColumns); setFrozenColumns(newFrozenColumns);
}, },
@ -2106,7 +2049,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
return row.id || row.uuid || `row-${index}`; return row.id || row.uuid || `row-${index}`;
}; };
const handleRowSelection = (rowKey: string, checked: boolean, rowData?: any) => { const handleRowSelection = (rowKey: string, checked: boolean) => {
const newSelectedRows = new Set(selectedRows); const newSelectedRows = new Set(selectedRows);
if (checked) { if (checked) {
newSelectedRows.add(rowKey); newSelectedRows.add(rowKey);
@ -2149,31 +2092,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
}); });
} }
// 🆕 분할 패널 컨텍스트에 선택된 데이터 저장/해제 (체크박스 선택 시에도 작동)
const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
if (checked && selectedRowsData.length > 0) {
// 선택된 경우: 첫 번째 선택된 데이터 저장 (또는 전달된 rowData)
const dataToStore = rowData || selectedRowsData[selectedRowsData.length - 1];
splitPanelContext.setSelectedLeftData(dataToStore);
console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 저장:", {
rowKey,
dataToStore,
});
} else if (!checked && selectedRowsData.length === 0) {
// 모든 선택이 해제된 경우: 데이터 초기화
splitPanelContext.setSelectedLeftData(null);
console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 초기화");
} else if (selectedRowsData.length > 0) {
// 일부 선택 해제된 경우: 남은 첫 번째 데이터로 업데이트
splitPanelContext.setSelectedLeftData(selectedRowsData[0]);
console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 업데이트:", {
remainingCount: selectedRowsData.length,
firstData: selectedRowsData[0],
});
}
}
const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index))); const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
setIsAllSelected(allRowsSelected && filteredData.length > 0); setIsAllSelected(allRowsSelected && filteredData.length > 0);
}; };
@ -2243,8 +2161,35 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
const rowKey = getRowKey(row, index); const rowKey = getRowKey(row, index);
const isCurrentlySelected = selectedRows.has(rowKey); const isCurrentlySelected = selectedRows.has(rowKey);
// handleRowSelection에서 분할 패널 데이터 처리도 함께 수행됨 handleRowSelection(rowKey, !isCurrentlySelected);
handleRowSelection(rowKey, !isCurrentlySelected, row);
// 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
// disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
// currentSplitPosition을 사용하여 정확한 위치 확인 (splitPanelPosition이 없을 수 있음)
const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
console.log("🔗 [TableList] 행 클릭 - 분할 패널 위치 확인:", {
splitPanelPosition,
currentSplitPosition,
effectiveSplitPosition,
hasSplitPanelContext: !!splitPanelContext,
disableAutoDataTransfer: splitPanelContext?.disableAutoDataTransfer,
});
if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
if (!isCurrentlySelected) {
// 선택된 경우: 데이터 저장
splitPanelContext.setSelectedLeftData(row);
console.log("🔗 [TableList] 분할 패널 좌측 데이터 저장:", {
row,
parentDataMapping: splitPanelContext.parentDataMapping,
});
} else {
// 선택 해제된 경우: 데이터 초기화
splitPanelContext.setSelectedLeftData(null);
console.log("🔗 [TableList] 분할 패널 좌측 데이터 초기화");
}
}
console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected }); console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
}; };
@ -2311,176 +2256,30 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
// 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후) // 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후)
const startEditingRef = useRef<() => void>(() => {}); const startEditingRef = useRef<() => void>(() => {});
// 🆕 카테고리 라벨 매핑 (API에서 가져온 것) // 🆕 각 컬럼의 고유값 목록 계산
const [categoryLabelCache, setCategoryLabelCache] = useState<Record<string, string>>({});
// 🆕 각 컬럼의 고유값 목록 계산 (라벨 포함)
const columnUniqueValues = useMemo(() => { const columnUniqueValues = useMemo(() => {
const result: Record<string, Array<{ value: string; label: string }>> = {}; const result: Record<string, string[]> = {};
if (data.length === 0) return result; if (data.length === 0) return result;
// 🆕 전체 데이터에서 개별 값 -> 라벨 매핑 테이블 구축 (다중 값 처리용)
const globalLabelMap: Record<string, Map<string, string>> = {};
(tableConfig.columns || []).forEach((column: { columnName: string }) => { (tableConfig.columns || []).forEach((column: { columnName: string }) => {
if (column.columnName === "__checkbox__") return; if (column.columnName === "__checkbox__") return;
const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName; const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
// 라벨 컬럼 후보들 (백엔드에서 _name, _label, _value_label 등으로 반환할 수 있음) const values = new Set<string>();
const labelColumnCandidates = [
`${column.columnName}_name`, // 예: division_name
`${column.columnName}_label`, // 예: division_label
`${column.columnName}_value_label`, // 예: division_value_label
];
const valuesMap = new Map<string, string>(); // value -> label
const singleValueLabelMap = new Map<string, string>(); // 개별 값 -> 라벨 (다중값 처리용)
// 1차: 모든 데이터에서 개별 값 -> 라벨 매핑 수집 (단일값 + 다중값 모두)
data.forEach((row) => { data.forEach((row) => {
const val = row[mappedColumnName]; const val = row[mappedColumnName];
if (val !== null && val !== undefined && val !== "") { if (val !== null && val !== undefined && val !== "") {
const valueStr = String(val); values.add(String(val));
// 라벨 컬럼에서 라벨 찾기
let labelStr = "";
for (const labelCol of labelColumnCandidates) {
if (row[labelCol] && row[labelCol] !== "") {
labelStr = String(row[labelCol]);
break;
}
}
// 단일 값인 경우
if (!valueStr.includes(",")) {
if (labelStr) {
singleValueLabelMap.set(valueStr, labelStr);
}
} else {
// 다중 값인 경우: 값과 라벨을 각각 분리해서 매핑
const individualValues = valueStr.split(",").map(v => v.trim());
const individualLabels = labelStr ? labelStr.split(",").map(l => l.trim()) : [];
// 값과 라벨 개수가 같으면 1:1 매핑
if (individualValues.length === individualLabels.length) {
individualValues.forEach((v, idx) => {
if (individualLabels[idx] && !singleValueLabelMap.has(v)) {
singleValueLabelMap.set(v, individualLabels[idx]);
}
});
}
}
} }
}); });
// 2차: 모든 값 처리 (다중 값 포함) - 필터 목록용 result[column.columnName] = Array.from(values).sort();
data.forEach((row) => {
const val = row[mappedColumnName];
if (val !== null && val !== undefined && val !== "") {
const valueStr = String(val);
// 콤마로 구분된 다중 값인지 확인
if (valueStr.includes(",")) {
// 다중 값: 각각 분리해서 개별 라벨 찾기
const individualValues = valueStr.split(",").map(v => v.trim());
// 🆕 singleValueLabelMap → categoryLabelCache 순으로 라벨 찾기
const individualLabels = individualValues.map(v =>
singleValueLabelMap.get(v) || categoryLabelCache[v] || v
);
valuesMap.set(valueStr, individualLabels.join(", "));
} else {
// 단일 값: 매핑에서 찾거나 캐시에서 찾거나 원본 사용
const label = singleValueLabelMap.get(valueStr) || categoryLabelCache[valueStr] || valueStr;
valuesMap.set(valueStr, label);
}
}
});
globalLabelMap[column.columnName] = singleValueLabelMap;
// value-label 쌍으로 저장하고 라벨 기준 정렬
result[column.columnName] = Array.from(valuesMap.entries())
.map(([value, label]) => ({ value, label }))
.sort((a, b) => a.label.localeCompare(b.label));
}); });
return result; return result;
}, [data, tableConfig.columns, joinColumnMapping, categoryLabelCache]); }, [data, tableConfig.columns, joinColumnMapping]);
// 🆕 라벨을 못 찾은 CATEGORY_ 코드들을 API로 조회
useEffect(() => {
const unlabeledCodes = new Set<string>();
// columnUniqueValues에서 라벨이 코드 그대로인 항목 찾기
Object.values(columnUniqueValues).forEach(items => {
items.forEach(item => {
// 라벨에 CATEGORY_가 포함되어 있으면 라벨을 못 찾은 것
if (item.label.includes("CATEGORY_")) {
// 콤마로 분리해서 개별 코드 추출
const codes = item.label.split(",").map(c => c.trim());
codes.forEach(code => {
if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
unlabeledCodes.add(code);
}
});
}
});
});
if (unlabeledCodes.size === 0) return;
// API로 라벨 조회
const fetchLabels = async () => {
try {
const response = await getCategoryLabelsByCodes(Array.from(unlabeledCodes));
if (response.success && response.data) {
setCategoryLabelCache(prev => ({ ...prev, ...response.data }));
}
} catch (error) {
console.error("카테고리 라벨 조회 실패:", error);
}
};
fetchLabels();
}, [columnUniqueValues, categoryLabelCache]);
// 🆕 데이터에서 CATEGORY_ 코드를 찾아 라벨 미리 로드 (테이블 셀 렌더링용)
useEffect(() => {
if (data.length === 0) return;
const categoryCodesToFetch = new Set<string>();
// 모든 데이터 행에서 CATEGORY_ 코드 수집
data.forEach((row) => {
Object.entries(row).forEach(([key, value]) => {
if (value && typeof value === "string") {
// 콤마로 구분된 다중 값도 처리
const codes = value.split(",").map((v) => v.trim());
codes.forEach((code) => {
if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
categoryCodesToFetch.add(code);
}
});
}
});
});
if (categoryCodesToFetch.size === 0) return;
// API로 라벨 조회
const fetchLabels = async () => {
try {
const response = await getCategoryLabelsByCodes(Array.from(categoryCodesToFetch));
if (response.success && response.data && Object.keys(response.data).length > 0) {
setCategoryLabelCache((prev) => ({ ...prev, ...response.data }));
}
} catch (error) {
console.error("CATEGORY_ 라벨 조회 실패:", error);
}
};
fetchLabels();
}, [data, categoryLabelCache]);
// 🆕 헤더 필터 토글 // 🆕 헤더 필터 토글
const toggleHeaderFilter = useCallback((columnName: string, value: string) => { const toggleHeaderFilter = useCallback((columnName: string, value: string) => {
@ -4125,7 +3924,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
if (enterRow) { if (enterRow) {
const rowKey = getRowKey(enterRow, rowIndex); const rowKey = getRowKey(enterRow, rowIndex);
const isCurrentlySelected = selectedRows.has(rowKey); const isCurrentlySelected = selectedRows.has(rowKey);
handleRowSelection(rowKey, !isCurrentlySelected, enterRow); handleRowSelection(rowKey, !isCurrentlySelected);
} }
break; break;
case " ": // Space case " ": // Space
@ -4135,7 +3934,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
if (spaceRow) { if (spaceRow) {
const currentRowKey = getRowKey(spaceRow, rowIndex); const currentRowKey = getRowKey(spaceRow, rowIndex);
const isChecked = selectedRows.has(currentRowKey); const isChecked = selectedRows.has(currentRowKey);
handleRowSelection(currentRowKey, !isChecked, spaceRow); handleRowSelection(currentRowKey, !isChecked);
} }
break; break;
case "F2": case "F2":
@ -4349,7 +4148,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
return ( return (
<Checkbox <Checkbox
checked={isChecked} checked={isChecked}
onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean, row)} onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
aria-label={`행 ${index + 1} 선택`} aria-label={`행 ${index + 1} 선택`}
/> />
); );
@ -4638,36 +4437,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
case "boolean": case "boolean":
return value ? "예" : "아니오"; return value ? "예" : "아니오";
default: default:
// 🆕 CATEGORY_ 코드 자동 변환 (inputType이 category가 아니어도) return String(value);
const strValue = String(value);
if (strValue.startsWith("CATEGORY_")) {
// rowData에서 _label 필드 찾기
if (rowData) {
const labelFieldCandidates = [
`${column.columnName}_label`,
`${column.columnName}_name`,
`${column.columnName}_value_label`,
];
for (const labelField of labelFieldCandidates) {
if (rowData[labelField] && rowData[labelField] !== "") {
return String(rowData[labelField]);
}
}
}
// categoryMappings에서 찾기
const mapping = categoryMappings[column.columnName];
if (mapping && mapping[strValue]) {
return mapping[strValue].label;
}
// categoryLabelCache에서 찾기 (필터용 캐시)
if (categoryLabelCache[strValue]) {
return categoryLabelCache[strValue];
}
}
return strValue;
} }
}, },
[columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings, categoryLabelCache], [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings],
); );
// ======================================== // ========================================
@ -4806,22 +4579,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
}); });
setColumnWidths(newWidths); setColumnWidths(newWidths);
// 틀고정 컬럼 업데이트 (보이는 컬럼 기준으로 처음 N개를 틀고정) // 틀고정 컬럼 업데이트
// 기존 frozen 개수를 유지하면서, 숨겨진 컬럼을 제외한 보이는 컬럼 중 처음 N개를 틀고정 const newFrozenColumns = config.columns.filter((col) => col.frozen).map((col) => col.columnName);
const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
const visibleCols = config.columns
.filter((col) => col.visible && col.columnName !== "__checkbox__")
.map((col) => col.columnName);
// 현재 설정된 frozen 컬럼 개수 (체크박스 제외)
const currentFrozenCount = config.columns.filter(
(col) => col.frozen && col.columnName !== "__checkbox__"
).length;
// 보이는 컬럼 중 처음 currentFrozenCount개를 틀고정으로 설정
const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, currentFrozenCount)];
setFrozenColumns(newFrozenColumns); setFrozenColumns(newFrozenColumns);
setFrozenColumnCount(currentFrozenCount);
// 그리드선 표시 업데이트 // 그리드선 표시 업데이트
setShowGridLines(config.showGridLines); setShowGridLines(config.showGridLines);
@ -5865,10 +5625,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
rowSpan={2} rowSpan={2}
className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm" className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
> >
{/* langKey가 있으면 다국어 번역 사용 */} {columnLabels[column.columnName] || column.columnName}
{(column as any).langKey
? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
: columnLabels[column.columnName] || column.columnName}
</th> </th>
); );
} }
@ -5887,18 +5644,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
{visibleColumns.map((column, columnIndex) => { {visibleColumns.map((column, columnIndex) => {
const columnWidth = columnWidths[column.columnName]; const columnWidth = columnWidths[column.columnName];
const isFrozen = frozenColumns.includes(column.columnName); const isFrozen = frozenColumns.includes(column.columnName);
const frozenIndex = frozenColumns.indexOf(column.columnName);
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산) // 틀고정된 컬럼의 left 위치 계산
// 숨겨진 컬럼은 제외하고 보이는 틀고정 컬럼만 포함
const visibleFrozenColumns = visibleColumns
.filter(col => frozenColumns.includes(col.columnName))
.map(col => col.columnName);
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
let leftPosition = 0; let leftPosition = 0;
if (isFrozen && frozenIndex > 0) { if (isFrozen && frozenIndex > 0) {
for (let i = 0; i < frozenIndex; i++) { for (let i = 0; i < frozenIndex; i++) {
const frozenCol = visibleFrozenColumns[i]; const frozenCol = frozenColumns[i];
// 체크박스 컬럼은 48px 고정 // 체크박스 컬럼은 48px 고정
const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150; const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
leftPosition += frozenColWidth; leftPosition += frozenColWidth;
@ -5964,12 +5716,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<Lock className="text-muted-foreground h-3 w-3" /> <Lock className="text-muted-foreground h-3 w-3" />
</span> </span>
)} )}
<span> <span>{columnLabels[column.columnName] || column.displayName}</span>
{/* langKey가 있으면 다국어 번역 사용 */}
{(column as any).langKey
? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
: columnLabels[column.columnName] || column.displayName}
</span>
{column.sortable !== false && sortColumn === column.columnName && ( {column.sortable !== false && sortColumn === column.columnName && (
<span>{sortDirection === "asc" ? "↑" : "↓"}</span> <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
)} )}
@ -6017,16 +5764,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
)} )}
</div> </div>
<div className="max-h-48 space-y-1 overflow-y-auto"> <div className="max-h-48 space-y-1 overflow-y-auto">
{columnUniqueValues[column.columnName]?.slice(0, 50).map((item) => { {columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => {
const isSelected = headerFilters[column.columnName]?.has(item.value); const isSelected = headerFilters[column.columnName]?.has(val);
return ( return (
<div <div
key={item.value} key={val}
className={cn( className={cn(
"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-xs", "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-xs",
isSelected && "bg-primary/10", isSelected && "bg-primary/10",
)} )}
onClick={() => toggleHeaderFilter(column.columnName, item.value)} onClick={() => toggleHeaderFilter(column.columnName, val)}
> >
<div <div
className={cn( className={cn(
@ -6036,7 +5783,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
> >
{isSelected && <Check className="text-primary-foreground h-3 w-3" />} {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
</div> </div>
<span className="truncate">{item.label || "(빈 값)"}</span> <span className="truncate">{val || "(빈 값)"}</span>
</div> </div>
); );
})} })}
@ -6209,17 +5956,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
const isNumeric = inputType === "number" || inputType === "decimal"; const isNumeric = inputType === "number" || inputType === "decimal";
const isFrozen = frozenColumns.includes(column.columnName); const isFrozen = frozenColumns.includes(column.columnName);
const frozenIndex = frozenColumns.indexOf(column.columnName);
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산) // 틀고정된 컬럼의 left 위치 계산
const visibleFrozenColumns = visibleColumns
.filter(col => frozenColumns.includes(col.columnName))
.map(col => col.columnName);
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
let leftPosition = 0; let leftPosition = 0;
if (isFrozen && frozenIndex > 0) { if (isFrozen && frozenIndex > 0) {
for (let i = 0; i < frozenIndex; i++) { for (let i = 0; i < frozenIndex; i++) {
const frozenCol = visibleFrozenColumns[i]; const frozenCol = frozenColumns[i];
// 체크박스 컬럼은 48px 고정 // 체크박스 컬럼은 48px 고정
const frozenColWidth = const frozenColWidth =
frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150; frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@ -6366,12 +6109,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
const isNumeric = inputType === "number" || inputType === "decimal"; const isNumeric = inputType === "number" || inputType === "decimal";
const isFrozen = frozenColumns.includes(column.columnName); const isFrozen = frozenColumns.includes(column.columnName);
const frozenIndex = frozenColumns.indexOf(column.columnName);
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
const visibleFrozenColumns = visibleColumns
.filter(col => frozenColumns.includes(col.columnName))
.map(col => col.columnName);
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
// 셀 포커스 상태 // 셀 포커스 상태
const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex; const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex;
@ -6385,10 +6123,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
// 🆕 검색 하이라이트 여부 // 🆕 검색 하이라이트 여부
const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`); const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`);
// 틀고정된 컬럼의 left 위치 계산
let leftPosition = 0; let leftPosition = 0;
if (isFrozen && frozenIndex > 0) { if (isFrozen && frozenIndex > 0) {
for (let i = 0; i < frozenIndex; i++) { for (let i = 0; i < frozenIndex; i++) {
const frozenCol = visibleFrozenColumns[i]; const frozenCol = frozenColumns[i];
// 체크박스 컬럼은 48px 고정 // 체크박스 컬럼은 48px 고정
const frozenColWidth = const frozenColWidth =
frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150; frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@ -6548,17 +6287,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
const summary = summaryData[column.columnName]; const summary = summaryData[column.columnName];
const columnWidth = columnWidths[column.columnName]; const columnWidth = columnWidths[column.columnName];
const isFrozen = frozenColumns.includes(column.columnName); const isFrozen = frozenColumns.includes(column.columnName);
const frozenIndex = frozenColumns.indexOf(column.columnName);
// 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산) // 틀고정된 컬럼의 left 위치 계산
const visibleFrozenColumns = visibleColumns
.filter(col => frozenColumns.includes(col.columnName))
.map(col => col.columnName);
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
let leftPosition = 0; let leftPosition = 0;
if (isFrozen && frozenIndex > 0) { if (isFrozen && frozenIndex > 0) {
for (let i = 0; i < frozenIndex; i++) { for (let i = 0; i < frozenIndex; i++) {
const frozenCol = visibleFrozenColumns[i]; const frozenCol = frozenColumns[i];
// 체크박스 컬럼은 48px 고정 // 체크박스 컬럼은 48px 고정
const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150; const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
leftPosition += frozenColWidth; leftPosition += frozenColWidth;