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

Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/v2-unified-renewal

This commit is contained in:
kjs 2026-01-16 11:10:41 +09:00
parent 6c920b21a4 ac0f461832
commit ee1ea4190d
36 changed files with 5114 additions and 3337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
PLAN.MD
View File

@ -1,4 +1,65 @@
# 프로젝트: 외부 REST API 커넥션 관리 확장 (POST/Body 지원) # 프로젝트: 화면 관리 기능 개선 (복제/삭제/그룹 관리)
## 개요
화면 관리 시스템의 복제 및 삭제 기능을 전면 개선하여, 단일 화면 복제, 그룹(폴더) 전체 복제, 정렬 순서 유지, 일괄 이름 변경 등 다양한 고급 기능을 지원합니다.
## 핵심 기능
### 1. 단일 화면 복제
- [x] 우클릭 컨텍스트 메뉴에서 "복제" 선택
- [x] 화면명, 화면 코드 자동 생성 (중복 시 `_COPY` 접미사 추가)
- [x] 연결된 모달 화면 함께 복제
- [x] 대상 그룹 선택 가능
- [x] 복제 후 목록 자동 새로고침
### 2. 그룹(폴더) 전체 복제
- [x] 대분류 폴더 복제 시 모든 하위 폴더 + 화면 재귀적 복제
- [x] 정렬 순서(display_order) 유지
- 그룹 생성 시 원본 display_order 전달
- 화면 추가 시 원본 display_order 유지
- 하위 그룹들 display_order 순으로 정렬 후 복제
- [x] 대분류(최상위 그룹) 복제 시 경고 문구 표시
- [x] 정렬 순서 입력 필드 추가 (사용자가 직접 수정 가능)
- [x] 원본 그룹 정보 표시 개선
- 직접 포함 화면 수
- 하위 그룹 수
- 복제될 총 화면 수 (하위 그룹 포함)
### 3. 고급 옵션: 이름 일괄 변경
- [x] 삭제할 텍스트 지정 (모든 폴더/화면 이름에서 제거)
- [x] 추가할 접미사 지정 (기본값: " (복제)")
- [x] 미리보기 기능
### 4. 삭제 기능
- [x] 단일 화면 삭제 (휴지통으로 이동)
- [x] 그룹 삭제 시 옵션 선택
- "화면도 함께 삭제" 체크박스
- 체크 시: 그룹 + 포함된 화면 모두 삭제
- 미체크 시: 화면은 "미분류"로 이동
### 5. 회사 코드 지원 (최고 관리자)
- [x] 대상 회사 선택 가능
- [x] 복제된 그룹/화면에 선택한 회사 코드 적용
## 관련 파일
- `frontend/components/screen/CopyScreenModal.tsx` - 복제 모달 (화면/그룹 통합)
- `frontend/components/screen/ScreenGroupTreeView.tsx` - 트리 뷰 + 컨텍스트 메뉴
- `frontend/lib/api/screen.ts` - 화면 API (복제, 삭제)
- `frontend/lib/api/screenGroup.ts` - 그룹 API
## 진행 상태
- [완료] 단일 화면 복제 + 새로고침
- [완료] 그룹 전체 복제 (재귀적)
- [완료] 정렬 순서(display_order) 유지
- [완료] 대분류 경고 문구
- [완료] 정렬 순서 입력 필드
- [완료] 고급 옵션: 이름 일괄 변경
- [완료] 단일 화면 삭제
- [완료] 그룹 삭제 (화면 함께 삭제 옵션)
---
# 이전 프로젝트: 외부 REST API 커넥션 관리 확장 (POST/Body 지원)
## 개요 ## 개요
현재 GET 방식 위주로 구현된 외부 REST API 커넥션 관리 기능을 확장하여, POST, PUT, DELETE 등 다양한 HTTP 메서드와 JSON Request Body를 설정하고 테스트할 수 있도록 개선합니다. 이를 통해 토큰 발급 API나 데이터 전송 API 등 다양한 외부 시스템과의 연동을 지원합니다. 현재 GET 방식 위주로 구현된 외부 REST API 커넥션 관리 기능을 확장하여, POST, PUT, DELETE 등 다양한 HTTP 메서드와 JSON Request Body를 설정하고 테스트할 수 있도록 개선합니다. 이를 통해 토큰 발급 API나 데이터 전송 API 등 다양한 외부 시스템과의 연동을 지원합니다.

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);
@ -593,98 +558,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];

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

@ -809,12 +809,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),
@ -898,10 +892,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}`);
@ -911,10 +902,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}`);
@ -922,25 +910,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);
@ -1668,10 +1644,10 @@ export async function toggleLogTable(
/** /**
* 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속) * 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
* *
* @route GET /api/table-management/menu/:menuObjid/category-columns * @route GET /api/table-management/menu/:menuObjid/category-columns
* @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회 * @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
* *
* 예시: * 예시:
* - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정 * - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
* - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속) * - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
@ -1684,10 +1660,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({
@ -1713,11 +1686,8 @@ 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 = `
WITH RECURSIVE menu_hierarchy AS ( WITH RECURSIVE menu_hierarchy AS (
@ -1739,21 +1709,17 @@ export async function getCategoryColumnsByMenu(
ARRAY_AGG(menu_name_kor) as menu_names ARRAY_AGG(menu_name_kor) as menu_names
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
}); });
// 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거) // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
const columnsQuery = ` const columnsQuery = `
SELECT DISTINCT SELECT DISTINCT
@ -1783,31 +1749,20 @@ export async function getCategoryColumnsByMenu(
AND ttc.input_type = 'category' AND ttc.input_type = 'category'
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, rowCount: columnsResult.rows.length,
]); columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
logger.info( });
"✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
{
rowCount: columnsResult.rows.length,
columns: columnsResult.rows.map(
(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");
const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid)); const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
// 형제 메뉴들이 사용하는 테이블 조회 // 형제 메뉴들이 사용하는 테이블 조회
const tablesQuery = ` const tablesQuery = `
SELECT DISTINCT sd.table_name SELECT DISTINCT sd.table_name
@ -1817,17 +1772,11 @@ export async function getCategoryColumnsByMenu(
AND sma.company_code = $2 AND sma.company_code = $2
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({
@ -1837,7 +1786,7 @@ export async function getCategoryColumnsByMenu(
}); });
return; return;
} }
const columnsQuery = ` const columnsQuery = `
SELECT SELECT
ttc.table_name AS "tableName", ttc.table_name AS "tableName",
@ -1862,15 +1811,13 @@ export async function getCategoryColumnsByMenu(
AND ttc.input_type = 'category' AND ttc.input_type = 'category'
ORDER BY ttc.table_name, ttc.column_name ORDER BY ttc.table_name, ttc.column_name
`; `;
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({
@ -1895,9 +1842,9 @@ export async function getCategoryColumnsByMenu(
/** /**
* 범용 다중 테이블 저장 API * 범용 다중 테이블 저장 API
* *
* 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다. * 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다.
* *
* 요청 본문: * 요청 본문:
* { * {
* mainTable: { tableName: string, primaryKeyColumn: string }, * mainTable: { tableName: string, primaryKeyColumn: string },
@ -1967,29 +1914,23 @@ export async function multiTableSave(
} }
let mainResult: any; let mainResult: any;
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}"
@ -1998,43 +1939,29 @@ export async function multiTableSave(
${companyCode !== "*" ? `AND company_code = $${updateValues.length + 2}` : ""} ${companyCode !== "*" ? `AND company_code = $${updateValues.length + 2}` : ""}
RETURNING * RETURNING *
`; `;
const updateParams = const updateParams = companyCode !== "*"
companyCode !== "*" ? [...updateValues, pkValue, companyCode]
? [...updateValues, pkValue, companyCode] : [...updateValues, pkValue];
: [...updateValues, pkValue];
logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
logger.info("메인 테이블 UPDATE:", {
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 = `
@ -2045,10 +1972,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);
} }
@ -2067,15 +1991,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;
} }
@ -2088,20 +2009,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 = options?.deleteOnlySubItems && options?.mainMarkerColumn
? [savedPkValue, options.subMarkerValue ?? false]
: [savedPkValue];
const deleteParams = logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { deleteQuery, deleteParams });
options?.deleteOnlySubItems && options?.mainMarkerColumn
? [savedPkValue, options.subMarkerValue ?? false]
: [savedPkValue];
logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, {
deleteQuery,
deleteParams,
});
await client.query(deleteQuery, deleteParams); await client.query(deleteQuery, deleteParams);
} }
@ -2114,12 +2030,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,
}; };
@ -2133,8 +2044,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 추가
@ -2157,30 +2067,20 @@ export async function multiTableSave(
if (companyCode !== "*") { if (companyCode !== "*") {
checkParams.push(companyCode); checkParams.push(companyCode);
} }
const existingResult = await client.query(checkQuery, checkParams); const existingResult = await client.query(checkQuery, checkParams);
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 = `
UPDATE "${tableName}" UPDATE "${tableName}"
@ -2199,26 +2099,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 = `
@ -2228,11 +2116,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],
});
} }
} }
@ -2248,12 +2132,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 = `
@ -2262,16 +2142,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} 저장 완료`);
@ -2312,11 +2185,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,
@ -2325,55 +2195,94 @@ 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);
} }
} }

5
backend-node/src/services/dataService.ts
View File

@ -254,7 +254,10 @@ class DataService {
key !== "limit" && key !== "limit" &&
key !== "offset" && key !== "offset" &&
key !== "orderBy" && key !== "orderBy" &&
key !== "userLang" key !== "userLang" &&
key !== "page" &&
key !== "pageSize" &&
key !== "size"
) { ) {
// 컬럼명 검증 (SQL 인젝션 방지) // 컬럼명 검증 (SQL 인젝션 방지)
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) { if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {

4
backend-node/src/services/screenManagementService.ts
View File

@ -2603,10 +2603,10 @@ export class ScreenManagementService {
// 없으면 원본과 같은 회사에 복사 // 없으면 원본과 같은 회사에 복사
const targetCompanyCode = copyData.targetCompanyCode || sourceScreen.company_code; const targetCompanyCode = copyData.targetCompanyCode || sourceScreen.company_code;
// 3. 화면 코드 중복 체크 (대상 회사 기준) // 3. 화면 코드 중복 체크 (대상 회사 기준, 삭제되지 않은 화면만)
const existingScreens = await client.query<any>( const existingScreens = await client.query<any>(
`SELECT screen_id FROM screen_definitions `SELECT screen_id FROM screen_definitions
WHERE screen_code = $1 AND company_code = $2 WHERE screen_code = $1 AND company_code = $2 AND deleted_date IS NULL
LIMIT 1`, LIMIT 1`,
[copyData.screenCode, targetCompanyCode] [copyData.screenCode, targetCompanyCode]
); );

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

@ -54,6 +54,19 @@ export default function ScreenManagementPage() {
loadScreens(); loadScreens();
}, [loadScreens]); }, [loadScreens]);
// 화면 목록 새로고침 이벤트 리스너
useEffect(() => {
const handleScreenListRefresh = () => {
console.log("🔄 화면 목록 새로고침 이벤트 수신");
loadScreens();
};
window.addEventListener("screen-list-refresh", handleScreenListRefresh);
return () => {
window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
};
}, [loadScreens]);
// URL 쿼리 파라미터로 화면 디자이너 자동 열기 // URL 쿼리 파라미터로 화면 디자이너 자동 열기
useEffect(() => { useEffect(() => {
const openDesignerId = searchParams.get("openDesigner"); const openDesignerId = searchParams.get("openDesigner");
@ -247,5 +260,3 @@ export default function ScreenManagementPage() {
</div> </div>
); );
} }

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

@ -34,7 +34,7 @@ function ScreenViewPage() {
// URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프) // URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined; const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
// URL 쿼리에서 프리뷰용 company_code 가져오기 // URL 쿼리에서 프리뷰용 company_code 가져오기
const previewCompanyCode = searchParams.get("company_code"); const previewCompanyCode = searchParams.get("company_code");
@ -115,7 +115,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,
@ -327,8 +327,8 @@ function ScreenViewPage() {
newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율 newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
} else { } else {
// 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정) // 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
const MARGIN_X = 32; const MARGIN_X = 32;
const availableWidth = containerWidth - MARGIN_X; const availableWidth = containerWidth - MARGIN_X;
newScale = availableWidth / designWidth; newScale = availableWidth / designWidth;
} }
@ -408,10 +408,9 @@ 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={{
width: `${screenWidth}px`, width: `${screenWidth}px`,
height: `${screenHeight}px`, height: `${screenHeight}px`,
minWidth: `${screenWidth}px`, minWidth: `${screenWidth}px`,
@ -854,8 +853,7 @@ 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% {

1256
frontend/components/screen/CopyScreenModal.tsx
View File

File diff suppressed because it is too large Load Diff

36
frontend/components/screen/EditModal.tsx
View File

@ -309,17 +309,10 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
// 🆕 그룹 데이터 조회 함수 // 🆕 그룹 데이터 조회 함수
const loadGroupData = async () => { const loadGroupData = async () => {
if (!modalState.tableName || !modalState.groupByColumns || modalState.groupByColumns.length === 0) { if (!modalState.tableName || !modalState.groupByColumns || modalState.groupByColumns.length === 0) {
// console.warn("테이블명 또는 그룹핑 컬럼이 없습니다.");
return; return;
} }
try { try {
// console.log("🔍 그룹 데이터 조회 시작:", {
// tableName: modalState.tableName,
// groupByColumns: modalState.groupByColumns,
// editData: modalState.editData,
// });
// 그룹핑 컬럼 값 추출 (예: order_no = "ORD-20251124-001") // 그룹핑 컬럼 값 추출 (예: order_no = "ORD-20251124-001")
const groupValues: Record<string, any> = {}; const groupValues: Record<string, any> = {};
modalState.groupByColumns.forEach((column) => { modalState.groupByColumns.forEach((column) => {
@ -329,15 +322,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
}); });
if (Object.keys(groupValues).length === 0) { if (Object.keys(groupValues).length === 0) {
// console.warn("그룹핑 컬럼 값이 없습니다:", modalState.groupByColumns);
return; return;
} }
// console.log("🔍 그룹 조회 요청:", {
// tableName: modalState.tableName,
// groupValues,
// });
// 같은 그룹의 모든 레코드 조회 (entityJoinApi 사용) // 같은 그룹의 모든 레코드 조회 (entityJoinApi 사용)
const { entityJoinApi } = await import("@/lib/api/entityJoin"); const { entityJoinApi } = await import("@/lib/api/entityJoin");
const response = await entityJoinApi.getTableDataWithJoins(modalState.tableName, { const response = await entityJoinApi.getTableDataWithJoins(modalState.tableName, {
@ -347,23 +334,19 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
enableEntityJoin: true, enableEntityJoin: true,
}); });
// console.log("🔍 그룹 조회 응답:", response);
// entityJoinApi는 배열 또는 { data: [] } 형식으로 반환 // entityJoinApi는 배열 또는 { data: [] } 형식으로 반환
const dataArray = Array.isArray(response) ? response : response?.data || []; const dataArray = Array.isArray(response) ? response : response?.data || [];
if (dataArray.length > 0) { if (dataArray.length > 0) {
// console.log("✅ 그룹 데이터 조회 성공:", dataArray.length, "건");
setGroupData(dataArray); setGroupData(dataArray);
setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy
toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`); toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`);
} else { } else {
console.warn("그룹 데이터가 없습니다:", response);
setGroupData([modalState.editData]); // 기본값: 선택된 행만 setGroupData([modalState.editData]); // 기본값: 선택된 행만
setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]); setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
} }
} catch (error: any) { } catch (error: any) {
console.error("❌ 그룹 데이터 조회 오류:", error); console.error("그룹 데이터 조회 오류:", error);
toast.error("관련 데이터를 불러오는 중 오류가 발생했습니다."); toast.error("관련 데이터를 불러오는 중 오류가 발생했습니다.");
setGroupData([modalState.editData]); // 기본값: 선택된 행만 setGroupData([modalState.editData]); // 기본값: 선택된 행만
setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]); setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
@ -1043,17 +1026,18 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
const groupedDataProp = groupData.length > 0 ? groupData : undefined; const groupedDataProp = groupData.length > 0 ? groupData : undefined;
// 🆕 UniversalFormModal이 있는지 확인 (자체 저장 로직 사용) // 🆕 UniversalFormModal이 있는지 확인 (자체 저장 로직 사용)
// 최상위 컴포넌트 또는 조건부 컨테이너 내부 화면에 universal-form-modal이 있는지 확인 // 최상위 컴포넌트에 universal-form-modal이 있는지 확인
// ⚠️ 수정: conditional-container는 제외 (groupData가 있으면 EditModal.handleSave 사용)
const hasUniversalFormModal = screenData.components.some( const hasUniversalFormModal = screenData.components.some(
(c) => { (c) => {
// 최상위에 universal-form-modal이 있는 경우 // 최상위에 universal-form-modal이 있는 경우만 자체 저장 로직 사용
if (c.componentType === "universal-form-modal") return true; if (c.componentType === "universal-form-modal") return true;
// 조건부 컨테이너 내부에 universal-form-modal이 있는 경우
// (조건부 컨테이너가 있으면 내부 화면에서 universal-form-modal을 사용하는 것으로 가정)
if (c.componentType === "conditional-container") return true;
return false; return false;
} }
); );
// 🆕 그룹 데이터가 있으면 EditModal.handleSave 사용 (일괄 저장)
const shouldUseEditModalSave = groupData.length > 0 || !hasUniversalFormModal;
// 🔑 첨부파일 컴포넌트가 행(레코드) 단위로 파일을 저장할 수 있도록 tableName 추가 // 🔑 첨부파일 컴포넌트가 행(레코드) 단위로 파일을 저장할 수 있도록 tableName 추가
const enrichedFormData = { const enrichedFormData = {
@ -1095,9 +1079,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
id: modalState.screenId!, id: modalState.screenId!,
tableName: screenData.screenInfo?.tableName, tableName: screenData.screenInfo?.tableName,
}} }}
// 🆕 UniversalFormModal이 있으면 onSave 전달 안 함 (자체 저장 로직 사용) // 🆕 그룹 데이터가 있거나 UniversalFormModal이 없으면 EditModal.handleSave 사용
// ModalRepeaterTable만 있으면 기존대로 onSave 전달 (호환성 유지) // groupData가 있으면 일괄 저장을 위해 반드시 EditModal.handleSave 사용
onSave={hasUniversalFormModal ? undefined : handleSave} onSave={shouldUseEditModalSave ? handleSave : undefined}
isInModal={true} isInModal={true}
// 🆕 그룹 데이터를 ModalRepeaterTable에 전달 // 🆕 그룹 데이터를 ModalRepeaterTable에 전달
groupedData={groupedDataProp} groupedData={groupedDataProp}

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

File diff suppressed because it is too large Load Diff

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

@ -374,7 +374,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}

14
frontend/components/screen/ScreenGroupModal.tsx
View File

@ -315,7 +315,11 @@ export function ScreenGroupModal({
<CommandItem <CommandItem
value="none" value="none"
onSelect={() => { onSelect={() => {
setFormData({ ...formData, parent_group_id: null }); setFormData({
...formData,
parent_group_id: null,
// 대분류 선택 시 현재 회사 코드 유지
});
setIsParentGroupSelectOpen(false); setIsParentGroupSelectOpen(false);
}} }}
className="text-xs sm:text-sm" className="text-xs sm:text-sm"
@ -335,7 +339,13 @@ export function ScreenGroupModal({
key={parentGroup.id} key={parentGroup.id}
value={`${parentGroup.group_name} ${getGroupPath(parentGroup.id)}`} value={`${parentGroup.group_name} ${getGroupPath(parentGroup.id)}`}
onSelect={() => { onSelect={() => {
setFormData({ ...formData, parent_group_id: parentGroup.id }); // 상위 그룹의 company_code로 자동 설정
const parentCompanyCode = parentGroup.company_code || formData.target_company_code;
setFormData({
...formData,
parent_group_id: parentGroup.id,
target_company_code: parentCompanyCode,
});
setIsParentGroupSelectOpen(false); setIsParentGroupSelectOpen(false);
}} }}
className="text-xs sm:text-sm" className="text-xs sm:text-sm"

579
frontend/components/screen/ScreenGroupTreeView.tsx
View File

@ -13,6 +13,9 @@ import {
Edit, Edit,
Trash2, Trash2,
FolderInput, FolderInput,
Copy,
FolderTree,
Loader2,
} from "lucide-react"; } from "lucide-react";
import { ScreenDefinition } from "@/types/screen"; import { ScreenDefinition } from "@/types/screen";
import { import {
@ -73,7 +76,9 @@ import {
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
import { ScreenGroupModal } from "./ScreenGroupModal"; import { ScreenGroupModal } from "./ScreenGroupModal";
import CopyScreenModal from "./CopyScreenModal";
import { toast } from "sonner"; import { toast } from "sonner";
import { screenApi } from "@/lib/api/screen";
interface ScreenGroupTreeViewProps { interface ScreenGroupTreeViewProps {
screens: ScreenDefinition[]; screens: ScreenDefinition[];
@ -115,15 +120,41 @@ export function ScreenGroupTreeView({
// 삭제 확인 다이얼로그 상태 // 삭제 확인 다이얼로그 상태
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [deletingGroup, setDeletingGroup] = useState<ScreenGroup | null>(null); const [deletingGroup, setDeletingGroup] = useState<ScreenGroup | null>(null);
const [deleteScreensWithGroup, setDeleteScreensWithGroup] = useState(false); // 화면도 함께 삭제 체크박스
const [isDeleting, setIsDeleting] = useState(false); // 삭제 진행 중 상태
const [deleteProgress, setDeleteProgress] = useState({ current: 0, total: 0, message: "" }); // 삭제 진행 상태
// 화면 이동 메뉴 상태 // 단일 화면 삭제 상태
const [movingScreen, setMovingScreen] = useState<ScreenDefinition | null>(null); const [isScreenDeleteDialogOpen, setIsScreenDeleteDialogOpen] = useState(false);
const [isMoveMenuOpen, setIsMoveMenuOpen] = useState(false); const [deletingScreen, setDeletingScreen] = useState<ScreenDefinition | null>(null);
const [isScreenDeleting, setIsScreenDeleting] = useState(false); // 화면 삭제 진행 중
// 화면 수정 모달 상태 (이름 변경 + 그룹 이동 통합)
const [editingScreen, setEditingScreen] = useState<ScreenDefinition | null>(null);
const [isEditScreenModalOpen, setIsEditScreenModalOpen] = useState(false);
const [editScreenName, setEditScreenName] = useState<string>("");
const [selectedGroupForMove, setSelectedGroupForMove] = useState<number | null>(null); const [selectedGroupForMove, setSelectedGroupForMove] = useState<number | null>(null);
const [screenRole, setScreenRole] = useState<string>(""); const [screenRole, setScreenRole] = useState<string>("");
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false); const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
const [displayOrder, setDisplayOrder] = useState<number>(1); const [displayOrder, setDisplayOrder] = useState<number>(1);
// 화면 복제 모달 상태 (CopyScreenModal 사용)
const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);
const [copyingScreen, setCopyingScreen] = useState<ScreenDefinition | null>(null);
const [copyTargetGroupId, setCopyTargetGroupId] = useState<number | null>(null);
const [copyMode, setCopyMode] = useState<"screen" | "group">("screen");
// 그룹 복제 모달 상태 (CopyScreenModal 그룹 모드 사용)
const [copyingGroup, setCopyingGroup] = useState<ScreenGroup | null>(null);
// 컨텍스트 메뉴 상태 (화면용)
const [contextMenuScreen, setContextMenuScreen] = useState<ScreenDefinition | null>(null);
const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
// 그룹 컨텍스트 메뉴 상태
const [contextMenuGroup, setContextMenuGroup] = useState<ScreenGroup | null>(null);
const [contextMenuGroupPosition, setContextMenuGroupPosition] = useState<{ x: number; y: number } | null>(null);
// 그룹 목록 및 그룹별 화면 로드 // 그룹 목록 및 그룹별 화면 로드
useEffect(() => { useEffect(() => {
loadGroupsData(); loadGroupsData();
@ -219,21 +250,110 @@ export function ScreenGroupTreeView({
}; };
// 그룹 삭제 버튼 클릭 // 그룹 삭제 버튼 클릭
const handleDeleteGroup = (group: ScreenGroup, e: React.MouseEvent) => { const handleDeleteGroup = (group: ScreenGroup, e?: React.MouseEvent) => {
e.stopPropagation(); e?.stopPropagation();
setDeletingGroup(group); setDeletingGroup(group);
setDeleteScreensWithGroup(false); // 기본값: 화면 삭제 안함
setIsDeleteDialogOpen(true); setIsDeleteDialogOpen(true);
}; };
// 그룹과 모든 하위 그룹의 화면을 재귀적으로 수집
const getAllScreensInGroupRecursively = (groupId: number): ScreenDefinition[] => {
const result: ScreenDefinition[] = [];
// 현재 그룹의 화면들
const currentGroupScreens = getScreensInGroup(groupId);
result.push(...currentGroupScreens);
// 하위 그룹들 찾기
const childGroups = groups.filter((g) => (g as any).parent_group_id === groupId);
for (const childGroup of childGroups) {
const childScreens = getAllScreensInGroupRecursively(childGroup.id);
result.push(...childScreens);
}
return result;
};
// 모든 하위 그룹 ID를 재귀적으로 수집 (삭제 순서: 자식 → 부모)
const getAllChildGroupIds = (groupId: number): number[] => {
const result: number[] = [];
const childGroups = groups.filter((g) => (g as any).parent_group_id === groupId);
for (const childGroup of childGroups) {
// 자식의 자식들을 먼저 수집 (깊은 곳부터)
const grandChildIds = getAllChildGroupIds(childGroup.id);
result.push(...grandChildIds);
result.push(childGroup.id);
}
return result;
};
// 그룹 삭제 확인 // 그룹 삭제 확인
const confirmDeleteGroup = async () => { const confirmDeleteGroup = async () => {
if (!deletingGroup) return; if (!deletingGroup) return;
// 삭제 전 통계 수집 (화면 수는 삭제 전에 계산)
const totalScreensToDelete = getAllScreensInGroupRecursively(deletingGroup.id).length;
const childGroupIds = getAllChildGroupIds(deletingGroup.id);
// 총 작업 수 계산 (화면 + 하위 그룹 + 현재 그룹)
const totalSteps = totalScreensToDelete + childGroupIds.length + 1;
let currentStep = 0;
try { try {
setIsDeleting(true);
setDeleteProgress({ current: 0, total: totalSteps, message: "삭제 준비 중..." });
// 화면도 함께 삭제하는 경우
if (deleteScreensWithGroup) {
// 현재 그룹 + 모든 하위 그룹의 화면을 재귀적으로 수집
const allScreens = getAllScreensInGroupRecursively(deletingGroup.id);
if (allScreens.length > 0) {
const { screenApi } = await import("@/lib/api/screen");
// 화면을 하나씩 삭제하면서 진행률 업데이트
for (let i = 0; i < allScreens.length; i++) {
const screen = allScreens[i];
currentStep++;
setDeleteProgress({
current: currentStep,
total: totalSteps,
message: `화면 삭제 중: ${screen.screenName}`
});
await screenApi.deleteScreen(screen.screenId, "그룹 삭제와 함께 삭제");
}
console.log(`✅ 그룹 및 하위 그룹 내 화면 ${allScreens.length}개 삭제 완료`);
}
}
// 하위 그룹들을 먼저 삭제 (자식 → 부모 순서)
for (let i = 0; i < childGroupIds.length; i++) {
const childId = childGroupIds[i];
const childGroup = groups.find(g => g.id === childId);
currentStep++;
setDeleteProgress({
current: currentStep,
total: totalSteps,
message: `하위 그룹 삭제 중: ${childGroup?.group_name || childId}`
});
await deleteScreenGroup(childId);
console.log(`✅ 하위 그룹 ${childId} 삭제 완료`);
}
// 최종적으로 대상 그룹 삭제
currentStep++;
setDeleteProgress({ current: currentStep, total: totalSteps, message: "그룹 삭제 완료 중..." });
const response = await deleteScreenGroup(deletingGroup.id); const response = await deleteScreenGroup(deletingGroup.id);
if (response.success) { if (response.success) {
toast.success("그룹이 삭제되었습니다"); toast.success(
loadGroupsData(); deleteScreensWithGroup
? `그룹과 화면 ${totalScreensToDelete}개가 삭제되었습니다`
: "그룹이 삭제되었습니다"
);
await loadGroupsData();
window.dispatchEvent(new CustomEvent("screen-list-refresh"));
} else { } else {
toast.error(response.message || "그룹 삭제에 실패했습니다"); toast.error(response.message || "그룹 삭제에 실패했습니다");
} }
@ -241,16 +361,45 @@ export function ScreenGroupTreeView({
console.error("그룹 삭제 실패:", error); console.error("그룹 삭제 실패:", error);
toast.error("그룹 삭제에 실패했습니다"); toast.error("그룹 삭제에 실패했습니다");
} finally { } finally {
setIsDeleting(false);
setDeleteProgress({ current: 0, total: 0, message: "" });
setIsDeleteDialogOpen(false); setIsDeleteDialogOpen(false);
setDeletingGroup(null); setDeletingGroup(null);
setDeleteScreensWithGroup(false);
} }
}; };
// 화면 이동 메뉴 열기 // 단일 화면 삭제 버튼 클릭
const handleMoveScreen = (screen: ScreenDefinition, e: React.MouseEvent) => { const handleDeleteScreen = (screen: ScreenDefinition) => {
e.preventDefault(); setDeletingScreen(screen);
e.stopPropagation(); setIsScreenDeleteDialogOpen(true);
setMovingScreen(screen); };
// 단일 화면 삭제 확인
const confirmDeleteScreen = async () => {
if (!deletingScreen) return;
try {
setIsScreenDeleting(true);
const { screenApi } = await import("@/lib/api/screen");
await screenApi.deleteScreen(deletingScreen.screenId, "사용자 요청으로 삭제");
toast.success(`"${deletingScreen.screenName}" 화면이 삭제되었습니다`);
await loadGroupsData();
window.dispatchEvent(new CustomEvent("screen-list-refresh"));
} catch (error) {
console.error("화면 삭제 실패:", error);
toast.error("화면 삭제에 실패했습니다");
} finally {
setIsScreenDeleting(false);
setIsScreenDeleteDialogOpen(false);
setDeletingScreen(null);
}
};
// 화면 수정 모달 열기 (이름 변경 + 그룹 이동)
const handleOpenEditScreenModal = (screen: ScreenDefinition) => {
setEditingScreen(screen);
setEditScreenName(screen.screenName);
// 현재 화면이 속한 그룹 정보 찾기 // 현재 화면이 속한 그룹 정보 찾기
let currentGroupId: number | null = null; let currentGroupId: number | null = null;
@ -273,17 +422,92 @@ export function ScreenGroupTreeView({
setSelectedGroupForMove(currentGroupId); setSelectedGroupForMove(currentGroupId);
setScreenRole(currentScreenRole); setScreenRole(currentScreenRole);
setDisplayOrder(currentDisplayOrder); setDisplayOrder(currentDisplayOrder);
setIsMoveMenuOpen(true); setIsEditScreenModalOpen(true);
}; };
// 화면을 특정 그룹으로 이동 // 화면 복제 모달 열기 (CopyScreenModal 사용)
const moveScreenToGroup = async (targetGroupId: number | null) => { const handleOpenCopyModal = (screen: ScreenDefinition) => {
if (!movingScreen) return; // 현재 화면이 속한 그룹 찾기 (기본값으로 설정)
let currentGroupId: number | null = null;
for (const group of groups) {
if (group.screens && Array.isArray(group.screens)) {
const found = group.screens.find((s: any) => Number(s.screen_id) === Number(screen.screenId));
if (found) {
currentGroupId = group.id;
break;
}
}
}
setCopyingScreen(screen);
setCopyTargetGroupId(currentGroupId);
setCopyMode("screen");
setIsCopyModalOpen(true);
setContextMenuPosition(null); // 컨텍스트 메뉴 닫기
};
// 그룹 복제 모달 열기 (CopyScreenModal 그룹 모드 사용)
const handleOpenGroupCopyModal = (group: ScreenGroup) => {
setCopyingGroup(group);
setCopyMode("group");
setIsCopyModalOpen(true);
closeGroupContextMenu(); // 그룹 컨텍스트 메뉴 닫기
};
// 복제 성공 콜백
const handleCopySuccess = async () => {
console.log("🔄 복제 성공 - 새로고침 시작");
// 그룹 목록 새로고침
await loadGroupsData();
console.log("✅ 그룹 목록 새로고침 완료");
// 화면 목록 새로고침
window.dispatchEvent(new CustomEvent("screen-list-refresh"));
console.log("✅ 화면 목록 새로고침 이벤트 발송 완료");
};
// 컨텍스트 메뉴 열기
const handleContextMenu = (e: React.MouseEvent, screen: ScreenDefinition) => {
e.preventDefault();
e.stopPropagation();
setContextMenuScreen(screen);
setContextMenuPosition({ x: e.clientX, y: e.clientY });
};
// 컨텍스트 메뉴 닫기
const closeContextMenu = () => {
setContextMenuPosition(null);
setContextMenuScreen(null);
};
// 그룹 컨텍스트 메뉴 열기
const handleGroupContextMenu = (e: React.MouseEvent, group: ScreenGroup) => {
e.preventDefault();
e.stopPropagation();
setContextMenuGroup(group);
setContextMenuGroupPosition({ x: e.clientX, y: e.clientY });
};
// 그룹 컨텍스트 메뉴 닫기
const closeGroupContextMenu = () => {
setContextMenuGroupPosition(null);
setContextMenuGroup(null);
};
// 화면 수정 저장 (이름 변경 + 그룹 이동)
const saveScreenEdit = async () => {
if (!editingScreen) return;
try { try {
// 현재 그룹에서 제거 // 1. 화면 이름이 변경되었으면 업데이트
if (editScreenName.trim() && editScreenName !== editingScreen.screenName) {
await screenApi.updateScreen(editingScreen.screenId, {
screenName: editScreenName.trim(),
});
}
// 2. 현재 그룹에서 제거
const currentGroupId = Array.from(groupScreensMap.entries()).find(([_, screenIds]) => const currentGroupId = Array.from(groupScreensMap.entries()).find(([_, screenIds]) =>
screenIds.includes(movingScreen.screenId) screenIds.includes(editingScreen.screenId)
)?.[0]; )?.[0];
if (currentGroupId) { if (currentGroupId) {
@ -291,7 +515,7 @@ export function ScreenGroupTreeView({
const currentGroup = groups.find((g) => g.id === currentGroupId); const currentGroup = groups.find((g) => g.id === currentGroupId);
if (currentGroup && currentGroup.screens) { if (currentGroup && currentGroup.screens) {
const screenGroupScreen = currentGroup.screens.find( const screenGroupScreen = currentGroup.screens.find(
(s: any) => s.screen_id === movingScreen.screenId (s: any) => s.screen_id === editingScreen.screenId
); );
if (screenGroupScreen) { if (screenGroupScreen) {
await removeScreenFromGroup(screenGroupScreen.id); await removeScreenFromGroup(screenGroupScreen.id);
@ -299,25 +523,27 @@ export function ScreenGroupTreeView({
} }
} }
// 새 그룹에 추가 (미분류가 아닌 경우) // 3. 새 그룹에 추가 (미분류가 아닌 경우)
if (targetGroupId !== null) { if (selectedGroupForMove !== null) {
await addScreenToGroup({ await addScreenToGroup({
group_id: targetGroupId, group_id: selectedGroupForMove,
screen_id: movingScreen.screenId, screen_id: editingScreen.screenId,
screen_role: screenRole, screen_role: screenRole,
display_order: displayOrder, display_order: displayOrder,
is_default: "N", is_default: "N",
}); });
} }
toast.success("화면이 이동되었습니다"); toast.success("화면이 수정되었습니다");
loadGroupsData(); loadGroupsData();
window.dispatchEvent(new CustomEvent("screen-list-refresh"));
} catch (error) { } catch (error) {
console.error("화면 이동 실패:", error); console.error("화면 수정 실패:", error);
toast.error("화면 이동에 실패했습니다"); toast.error("화면 수정에 실패했습니다");
} finally { } finally {
setIsMoveMenuOpen(false); setIsEditScreenModalOpen(false);
setMovingScreen(null); setEditingScreen(null);
setEditScreenName("");
setSelectedGroupForMove(null); setSelectedGroupForMove(null);
setScreenRole(""); setScreenRole("");
setDisplayOrder(1); setDisplayOrder(1);
@ -444,6 +670,7 @@ export function ScreenGroupTreeView({
"text-sm font-medium group/item" "text-sm font-medium group/item"
)} )}
onClick={() => toggleGroup(groupId)} onClick={() => toggleGroup(groupId)}
onContextMenu={(e) => handleGroupContextMenu(e, group)}
> >
{isExpanded ? ( {isExpanded ? (
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" /> <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
@ -507,6 +734,7 @@ export function ScreenGroupTreeView({
"text-xs font-medium group/item" "text-xs font-medium group/item"
)} )}
onClick={() => toggleGroup(childGroupId)} onClick={() => toggleGroup(childGroupId)}
onContextMenu={(e) => handleGroupContextMenu(e, childGroup)}
> >
{isChildExpanded ? ( {isChildExpanded ? (
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" /> <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
@ -566,6 +794,7 @@ export function ScreenGroupTreeView({
"text-xs group/item" "text-xs group/item"
)} )}
onClick={() => toggleGroup(grandChildId)} onClick={() => toggleGroup(grandChildId)}
onContextMenu={(e) => handleGroupContextMenu(e, grandChild)}
> >
{isGrandExpanded ? ( {isGrandExpanded ? (
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" /> <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
@ -626,7 +855,7 @@ export function ScreenGroupTreeView({
)} )}
onClick={() => handleScreenClickInGroup(screen, grandChild)} onClick={() => handleScreenClickInGroup(screen, grandChild)}
onDoubleClick={() => handleScreenDoubleClick(screen)} onDoubleClick={() => handleScreenDoubleClick(screen)}
onContextMenu={(e) => handleMoveScreen(screen, e)} onContextMenu={(e) => handleContextMenu(e, screen)}
> >
<Monitor className="h-3 w-3 shrink-0 text-blue-500" /> <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
<span className="truncate flex-1">{screen.screenName}</span> <span className="truncate flex-1">{screen.screenName}</span>
@ -662,7 +891,7 @@ export function ScreenGroupTreeView({
)} )}
onClick={() => handleScreenClickInGroup(screen, childGroup)} onClick={() => handleScreenClickInGroup(screen, childGroup)}
onDoubleClick={() => handleScreenDoubleClick(screen)} onDoubleClick={() => handleScreenDoubleClick(screen)}
onContextMenu={(e) => handleMoveScreen(screen, e)} onContextMenu={(e) => handleContextMenu(e, screen)}
> >
<Monitor className="h-3 w-3 shrink-0 text-blue-500" /> <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
<span className="truncate flex-1">{screen.screenName}</span> <span className="truncate flex-1">{screen.screenName}</span>
@ -698,7 +927,7 @@ export function ScreenGroupTreeView({
)} )}
onClick={() => handleScreenClickInGroup(screen, group)} onClick={() => handleScreenClickInGroup(screen, group)}
onDoubleClick={() => handleScreenDoubleClick(screen)} onDoubleClick={() => handleScreenDoubleClick(screen)}
onContextMenu={(e) => handleMoveScreen(screen, e)} onContextMenu={(e) => handleContextMenu(e, screen)}
> >
<Monitor className="h-4 w-4 shrink-0 text-blue-500" /> <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
<span className="truncate flex-1">{screen.screenName}</span> <span className="truncate flex-1">{screen.screenName}</span>
@ -748,7 +977,7 @@ export function ScreenGroupTreeView({
)} )}
onClick={() => handleScreenClick(screen)} onClick={() => handleScreenClick(screen)}
onDoubleClick={() => handleScreenDoubleClick(screen)} onDoubleClick={() => handleScreenDoubleClick(screen)}
onContextMenu={(e) => handleMoveScreen(screen, e)} onContextMenu={(e) => handleContextMenu(e, screen)}
> >
<Monitor className="h-4 w-4 shrink-0 text-blue-500" /> <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
<span className="truncate flex-1">{screen.screenName}</span> <span className="truncate flex-1">{screen.screenName}</span>
@ -781,6 +1010,23 @@ export function ScreenGroupTreeView({
group={editingGroup} group={editingGroup}
/> />
{/* 화면/그룹 복제 모달 (CopyScreenModal 사용) */}
<CopyScreenModal
isOpen={isCopyModalOpen}
onClose={() => {
setIsCopyModalOpen(false);
setCopyingScreen(null);
setCopyingGroup(null);
}}
sourceScreen={copyMode === "screen" ? copyingScreen : null}
onCopySuccess={handleCopySuccess}
mode={copyMode}
sourceGroup={copyMode === "group" ? copyingGroup : null}
groups={groups}
targetGroupId={copyTargetGroupId}
allScreens={screens}
/>
{/* 그룹 삭제 확인 다이얼로그 */} {/* 그룹 삭제 확인 다이얼로그 */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]"> <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
@ -789,34 +1035,167 @@ export function ScreenGroupTreeView({
<AlertDialogDescription className="text-xs sm:text-sm"> <AlertDialogDescription className="text-xs sm:text-sm">
"{deletingGroup?.group_name}" 그룹을 삭제하시겠습니까? "{deletingGroup?.group_name}" 그룹을 삭제하시겠습니까?
<br /> <br />
그룹에 속한 화면들은 미분류로 이동됩니다. {deleteScreensWithGroup
? <span className="text-destructive font-medium">그룹에 속한 화면들도 함께 삭제됩니다.</span>
: "그룹에 속한 화면들은 미분류로 이동됩니다."
}
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
{/* 그룹 정보 표시 */}
{deletingGroup && (
<div className="rounded-md border bg-muted/50 p-3 text-xs space-y-1">
<div className="flex justify-between">
<span className="text-muted-foreground">하위 그룹 수:</span>
<span className="font-medium">{getAllChildGroupIds(deletingGroup.id).length}개</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">총 화면 수 (하위 포함):</span>
<span className="font-medium">{getAllScreensInGroupRecursively(deletingGroup.id).length}개</span>
</div>
</div>
)}
{/* 화면도 함께 삭제 체크박스 */}
{deletingGroup && getAllScreensInGroupRecursively(deletingGroup.id).length > 0 && (
<div className="flex items-center space-x-2 py-2">
<input
type="checkbox"
id="deleteScreensWithGroup"
checked={deleteScreensWithGroup}
onChange={(e) => setDeleteScreensWithGroup(e.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-destructive focus:ring-destructive"
/>
<label
htmlFor="deleteScreensWithGroup"
className="text-sm text-muted-foreground cursor-pointer"
>
화면도 함께 삭제 ({getAllScreensInGroupRecursively(deletingGroup.id).length}개)
</label>
</div>
)}
{/* 로딩 오버레이 */}
{isDeleting && (
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
<Loader2 className="h-10 w-10 animate-spin text-destructive" />
<p className="mt-4 text-sm font-medium">{deleteProgress.message}</p>
{deleteProgress.total > 0 && (
<>
<div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-secondary">
<div
className="h-full bg-destructive transition-all duration-300"
style={{ width: `${Math.round((deleteProgress.current / deleteProgress.total) * 100)}%` }}
/>
</div>
<p className="mt-2 text-xs text-muted-foreground">
{deleteProgress.current} / {deleteProgress.total}
</p>
</>
)}
</div>
)}
<AlertDialogFooter className="gap-2 sm:gap-0"> <AlertDialogFooter className="gap-2 sm:gap-0">
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"> <AlertDialogCancel
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
disabled={isDeleting}
>
취소 취소
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
onClick={confirmDeleteGroup} onClick={(e) => {
e.preventDefault(); // 자동 닫힘 방지
confirmDeleteGroup();
}}
disabled={isDeleting}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm bg-destructive hover:bg-destructive/90" className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm bg-destructive hover:bg-destructive/90"
> >
삭제 {isDeleting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
삭제 중...
</>
) : (
"삭제"
)}
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
{/* 화면 이동 메뉴 (다이얼로그) */} {/* 단일 화면 삭제 확인 다이얼로그 */}
<Dialog open={isMoveMenuOpen} onOpenChange={setIsMoveMenuOpen}> <AlertDialog open={isScreenDeleteDialogOpen} onOpenChange={setIsScreenDeleteDialogOpen}>
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
{/* 로딩 오버레이 */}
{isScreenDeleting && (
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
<Loader2 className="h-8 w-8 animate-spin text-destructive" />
<p className="mt-3 text-sm font-medium">화면 삭제 중...</p>
</div>
)}
<AlertDialogHeader>
<AlertDialogTitle className="text-base sm:text-lg">화면 삭제</AlertDialogTitle>
<AlertDialogDescription className="text-xs sm:text-sm">
"{deletingScreen?.screenName}" 화면을 삭제하시겠습니까?
<br />
삭제된 화면은 휴지통으로 이동됩니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:gap-0">
<AlertDialogCancel
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
disabled={isScreenDeleting}
>
취소
</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault(); // 자동 닫힘 방지
confirmDeleteScreen();
}}
disabled={isScreenDeleting}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm bg-destructive hover:bg-destructive/90"
>
{isScreenDeleting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
삭제 중...
</>
) : (
"삭제"
)}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* 화면 수정 모달 (이름 변경 + 그룹 이동) */}
<Dialog open={isEditScreenModalOpen} onOpenChange={setIsEditScreenModalOpen}>
<DialogContent className="max-w-[95vw] sm:max-w-[400px]"> <DialogContent className="max-w-[95vw] sm:max-w-[400px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-base sm:text-lg">화면 그룹 설정</DialogTitle> <DialogTitle className="text-base sm:text-lg">화면 수정</DialogTitle>
<DialogDescription className="text-xs sm:text-sm"> <DialogDescription className="text-xs sm:text-sm">
"{movingScreen?.screenName}"의 그룹과 역할을 설정하세요 화면 정보를 수정하세요
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-3 sm:space-y-4"> <div className="space-y-3 sm:space-y-4">
{/* 화면 이름 */}
<div>
<Label htmlFor="edit-screen-name" className="text-xs sm:text-sm">
화면 이름 *
</Label>
<Input
id="edit-screen-name"
value={editScreenName}
onChange={(e) => setEditScreenName(e.target.value)}
placeholder="화면 이름을 입력하세요"
className="h-8 text-xs sm:h-10 sm:text-sm"
/>
</div>
{/* 그룹 선택 (트리 구조 + 검색) */} {/* 그룹 선택 (트리 구조 + 검색) */}
<div> <div>
<Label htmlFor="target-group" className="text-xs sm:text-sm"> <Label htmlFor="target-group" className="text-xs sm:text-sm">
@ -949,8 +1328,9 @@ export function ScreenGroupTreeView({
<Button <Button
variant="outline" variant="outline"
onClick={() => { onClick={() => {
setIsMoveMenuOpen(false); setIsEditScreenModalOpen(false);
setMovingScreen(null); setEditingScreen(null);
setEditScreenName("");
setSelectedGroupForMove(null); setSelectedGroupForMove(null);
setScreenRole(""); setScreenRole("");
setDisplayOrder(1); setDisplayOrder(1);
@ -960,14 +1340,125 @@ export function ScreenGroupTreeView({
취소 취소
</Button> </Button>
<Button <Button
onClick={() => moveScreenToGroup(selectedGroupForMove)} onClick={saveScreenEdit}
disabled={!editScreenName.trim()}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm" className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
> >
이동 저장
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* 커스텀 컨텍스트 메뉴 */}
{contextMenuPosition && contextMenuScreen && (
<>
{/* 백드롭 - 클릭 시 메뉴 닫기 */}
<div
className="fixed inset-0 z-40"
onClick={closeContextMenu}
onContextMenu={(e) => {
e.preventDefault();
closeContextMenu();
}}
/>
{/* 컨텍스트 메뉴 */}
<div
className="fixed z-50 min-w-[150px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
style={{
left: contextMenuPosition.x,
top: contextMenuPosition.y,
}}
>
<div
className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
onClick={() => {
handleOpenCopyModal(contextMenuScreen);
}}
>
<Copy className="mr-2 h-4 w-4" />
복제
</div>
<div className="my-1 h-px bg-border" />
<div
className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
onClick={() => {
handleOpenEditScreenModal(contextMenuScreen);
closeContextMenu();
}}
>
<Edit className="mr-2 h-4 w-4" />
수정
</div>
<div className="my-1 h-px bg-border" />
<div
className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent"
onClick={() => {
handleDeleteScreen(contextMenuScreen);
closeContextMenu();
}}
>
<Trash2 className="mr-2 h-4 w-4" />
삭제
</div>
</div>
</>
)}
{/* 그룹 컨텍스트 메뉴 */}
{contextMenuGroupPosition && contextMenuGroup && (
<>
{/* 백드롭 - 클릭 시 메뉴 닫기 */}
<div
className="fixed inset-0 z-40"
onClick={closeGroupContextMenu}
onContextMenu={(e) => {
e.preventDefault();
closeGroupContextMenu();
}}
/>
{/* 컨텍스트 메뉴 */}
<div
className="fixed z-50 min-w-[150px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
style={{
left: contextMenuGroupPosition.x,
top: contextMenuGroupPosition.y,
}}
>
<div
className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
onClick={() => handleOpenGroupCopyModal(contextMenuGroup)}
>
<Copy className="mr-2 h-4 w-4" />
그룹 복제
</div>
<div className="my-1 h-px bg-border" />
<div
className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
onClick={() => {
setEditingGroup(contextMenuGroup);
setIsGroupModalOpen(true);
closeGroupContextMenu();
}}
>
<Edit className="mr-2 h-4 w-4" />
수정
</div>
<div className="my-1 h-px bg-border" />
<div
className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent"
onClick={() => {
handleDeleteGroup(contextMenuGroup);
closeGroupContextMenu();
}}
>
<Trash2 className="mr-2 h-4 w-4" />
그룹 삭제
</div>
</div>
</>
)}
</div> </div>
); );
} }

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) => ({
@ -452,8 +493,18 @@ export function TableSettingModal({
// detailSettings 처리 (Entity 타입인 경우) // detailSettings 처리 (Entity 타입인 경우)
let finalDetailSettings = mergedColumn.detailSettings || ""; let finalDetailSettings = mergedColumn.detailSettings || "";
// 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 (mergedColumn.inputType === "entity" && mergedColumn.referenceTable) { 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>

302
frontend/components/webtypes/RepeaterInput.tsx
View File

@ -16,7 +16,9 @@ import {
RepeaterItemData, RepeaterItemData,
RepeaterFieldDefinition, RepeaterFieldDefinition,
CalculationFormula, CalculationFormula,
SubDataState,
} from "@/types/repeater"; } from "@/types/repeater";
import { SubDataLookupPanel } from "@/lib/registry/components/repeater-field-group/SubDataLookupPanel";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useBreakpoint } from "@/hooks/useBreakpoint"; import { useBreakpoint } from "@/hooks/useBreakpoint";
import { usePreviewBreakpoint } from "@/components/screen/ResponsivePreviewModal"; import { usePreviewBreakpoint } from "@/components/screen/ResponsivePreviewModal";
@ -68,8 +70,12 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
layout = "grid", // 기본값을 grid로 설정 layout = "grid", // 기본값을 grid로 설정
showDivider = true, showDivider = true,
emptyMessage = "항목이 없습니다. '항목 추가' 버튼을 클릭하세요.", emptyMessage = "항목이 없습니다. '항목 추가' 버튼을 클릭하세요.",
subDataLookup,
} = config; } = config;
// 하위 데이터 조회 상태 관리 (각 항목별)
const [subDataStates, setSubDataStates] = useState<Map<number, SubDataState>>(new Map());
// 반응형: 작은 화면(모바일/태블릿)에서는 카드 레이아웃 강제 // 반응형: 작은 화면(모바일/태블릿)에서는 카드 레이아웃 강제
const effectiveLayout = breakpoint === "mobile" || breakpoint === "tablet" ? "card" : layout; const effectiveLayout = breakpoint === "mobile" || breakpoint === "tablet" ? "card" : layout;
@ -272,6 +278,111 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
// 드래그 앤 드롭 (순서 변경) // 드래그 앤 드롭 (순서 변경)
const [draggedIndex, setDraggedIndex] = useState<number | null>(null); const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
// 하위 데이터 선택 핸들러
const handleSubDataSelection = (itemIndex: number, selectedItem: any | null, maxValue: number | null) => {
console.log("[RepeaterInput] 하위 데이터 선택:", { itemIndex, selectedItem, maxValue });
// 상태 업데이트
setSubDataStates((prev) => {
const newMap = new Map(prev);
const currentState = newMap.get(itemIndex) || {
itemIndex,
data: [],
selectedItem: null,
isLoading: false,
error: null,
isExpanded: false,
};
newMap.set(itemIndex, {
...currentState,
selectedItem,
});
return newMap;
});
// 선택된 항목 정보를 item에 저장
if (selectedItem && subDataLookup) {
const newItems = [...items];
newItems[itemIndex] = {
...newItems[itemIndex],
_subDataSelection: selectedItem,
_subDataMaxValue: maxValue,
};
// 선택된 하위 데이터의 필드 값을 상위 item에 복사 (설정된 경우)
// 예: warehouse_code, location_code 등
if (subDataLookup.lookup.displayColumns) {
subDataLookup.lookup.displayColumns.forEach((col) => {
if (selectedItem[col] !== undefined) {
// 필드가 정의되어 있으면 복사
const fieldDef = fields.find((f) => f.name === col);
if (fieldDef || col.includes("_code") || col.includes("_id")) {
newItems[itemIndex][col] = selectedItem[col];
}
}
});
}
setItems(newItems);
// onChange 호출
const dataWithMeta = config.targetTable
? newItems.map((item) => ({ ...item, _targetTable: config.targetTable }))
: newItems;
onChange?.(dataWithMeta);
}
};
// 조건부 입력 활성화 여부 확인
const isConditionalInputEnabled = (itemIndex: number, fieldName: string): boolean => {
if (!subDataLookup?.enabled) return true;
if (subDataLookup.conditionalInput?.targetField !== fieldName) return true;
const subState = subDataStates.get(itemIndex);
if (!subState?.selectedItem) return false;
const { requiredFields, requiredMode = "all" } = subDataLookup.selection;
if (!requiredFields || requiredFields.length === 0) return true;
if (requiredMode === "any") {
return requiredFields.some((field) => {
const value = subState.selectedItem[field];
return value !== undefined && value !== null && value !== "";
});
} else {
return requiredFields.every((field) => {
const value = subState.selectedItem[field];
return value !== undefined && value !== null && value !== "";
});
}
};
// 최대값 가져오기
const getMaxValueForField = (itemIndex: number, fieldName: string): number | null => {
if (!subDataLookup?.enabled) return null;
if (subDataLookup.conditionalInput?.targetField !== fieldName) return null;
if (!subDataLookup.conditionalInput?.maxValueField) return null;
const subState = subDataStates.get(itemIndex);
if (!subState?.selectedItem) return null;
const maxVal = subState.selectedItem[subDataLookup.conditionalInput.maxValueField];
return typeof maxVal === "number" ? maxVal : parseFloat(maxVal) || null;
};
// 경고 임계값 체크
const checkWarningThreshold = (itemIndex: number, fieldName: string, value: number): boolean => {
if (!subDataLookup?.enabled) return false;
if (subDataLookup.conditionalInput?.targetField !== fieldName) return false;
const maxValue = getMaxValueForField(itemIndex, fieldName);
if (maxValue === null || maxValue === 0) return false;
const threshold = subDataLookup.conditionalInput?.warningThreshold ?? 90;
const percentage = (value / maxValue) * 100;
return percentage >= threshold;
};
const handleDragStart = (index: number) => { const handleDragStart = (index: number) => {
if (!allowReorder || readonly || disabled) return; if (!allowReorder || readonly || disabled) return;
setDraggedIndex(index); setDraggedIndex(index);
@ -389,14 +500,26 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
const renderField = (field: RepeaterFieldDefinition, itemIndex: number, value: any) => { const renderField = (field: RepeaterFieldDefinition, itemIndex: number, value: any) => {
const isReadonly = disabled || readonly || field.readonly; const isReadonly = disabled || readonly || field.readonly;
// 조건부 입력 비활성화 체크
const isConditionalDisabled =
subDataLookup?.enabled &&
subDataLookup.conditionalInput?.targetField === field.name &&
!isConditionalInputEnabled(itemIndex, field.name);
// 최대값 및 경고 체크
const maxValue = getMaxValueForField(itemIndex, field.name);
const numValue = parseFloat(value) || 0;
const showWarning = checkWarningThreshold(itemIndex, field.name, numValue);
const exceedsMax = maxValue !== null && numValue > maxValue;
// 🆕 placeholder 기본값: 필드에 설정된 값 > 필드 라벨 기반 자동 생성 // 🆕 placeholder 기본값: 필드에 설정된 값 > 필드 라벨 기반 자동 생성
// "id(를) 입력하세요" 같은 잘못된 기본값 방지 // "id(를) 입력하세요" 같은 잘못된 기본값 방지
const defaultPlaceholder = field.placeholder || `${field.label || field.name}`; const defaultPlaceholder = field.placeholder || `${field.label || field.name}`;
const commonProps = { const commonProps = {
value: value || "", value: value || "",
disabled: isReadonly, disabled: isReadonly || isConditionalDisabled,
placeholder: defaultPlaceholder, placeholder: isConditionalDisabled ? "재고 선택 필요" : defaultPlaceholder,
required: field.required, required: field.required,
}; };
@ -569,23 +692,37 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
type="number" type="number"
onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)} onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
min={field.validation?.min} min={field.validation?.min}
max={field.validation?.max} max={maxValue !== null ? maxValue : field.validation?.max}
className="pr-1" className={cn("pr-1", exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
/> />
{value && <div className="text-muted-foreground mt-0.5 text-[10px]">{formattedDisplay}</div>} {value && <div className="text-muted-foreground mt-0.5 text-[10px]">{formattedDisplay}</div>}
{exceedsMax && (
<div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
)}
{showWarning && !exceedsMax && (
<div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
)}
</div> </div>
); );
} }
return ( return (
<Input <div className="relative min-w-[80px]">
{...commonProps} <Input
type="number" {...commonProps}
onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)} type="number"
min={field.validation?.min} onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
max={field.validation?.max} min={field.validation?.min}
className="min-w-[80px]" max={maxValue !== null ? maxValue : field.validation?.max}
/> className={cn(exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
/>
{exceedsMax && (
<div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
)}
{showWarning && !exceedsMax && (
<div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
)}
</div>
); );
case "email": case "email":
@ -754,6 +891,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
// 그리드/테이블 형식 렌더링 // 그리드/테이블 형식 렌더링
const renderGridLayout = () => { const renderGridLayout = () => {
// 하위 데이터 조회 설정이 있으면 연결 컬럼 찾기
const linkColumn = subDataLookup?.lookup?.linkColumn;
return ( return (
<div className="bg-card"> <div className="bg-card">
<Table> <Table>
@ -775,55 +915,83 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{items.map((item, itemIndex) => ( {items.map((item, itemIndex) => {
<TableRow // 하위 데이터 조회용 연결 값
key={itemIndex} const linkValue = linkColumn ? item[linkColumn] : null;
className={cn(
"bg-background hover:bg-muted/50 transition-colors",
draggedIndex === itemIndex && "opacity-50",
)}
draggable={allowReorder && !readonly && !disabled}
onDragStart={() => handleDragStart(itemIndex)}
onDragOver={(e) => handleDragOver(e, itemIndex)}
onDrop={(e) => handleDrop(e, itemIndex)}
onDragEnd={handleDragEnd}
>
{/* 인덱스 번호 */}
{showIndex && (
<TableCell className="h-12 px-2.5 py-2 text-center text-sm font-medium">{itemIndex + 1}</TableCell>
)}
{/* 드래그 핸들 */} return (
{allowReorder && !readonly && !disabled && ( <React.Fragment key={itemIndex}>
<TableCell className="h-12 px-2.5 py-2 text-center"> <TableRow
<GripVertical className="text-muted-foreground h-4 w-4 cursor-move" /> className={cn(
</TableCell> "bg-background hover:bg-muted/50 transition-colors",
)} draggedIndex === itemIndex && "opacity-50",
)}
draggable={allowReorder && !readonly && !disabled}
onDragStart={() => handleDragStart(itemIndex)}
onDragOver={(e) => handleDragOver(e, itemIndex)}
onDrop={(e) => handleDrop(e, itemIndex)}
onDragEnd={handleDragEnd}
>
{/* 인덱스 번호 */}
{showIndex && (
<TableCell className="h-12 px-2.5 py-2 text-center text-sm font-medium">{itemIndex + 1}</TableCell>
)}
{/* 필드들 */} {/* 드래그 핸들 */}
{fields.map((field) => ( {allowReorder && !readonly && !disabled && (
<TableCell key={field.name} className="h-12 px-2.5 py-2"> <TableCell className="h-12 px-2.5 py-2 text-center">
{renderField(field, itemIndex, item[field.name])} <GripVertical className="text-muted-foreground h-4 w-4 cursor-move" />
</TableCell> </TableCell>
))} )}
{/* 삭제 버튼 */} {/* 필드들 */}
<TableCell className="h-12 px-2.5 py-2 text-center"> {fields.map((field) => (
{!readonly && !disabled && ( <TableCell key={field.name} className="h-12 px-2.5 py-2">
<Button {renderField(field, itemIndex, item[field.name])}
type="button" </TableCell>
variant="ghost" ))}
size="icon"
onClick={() => handleRemoveItem(itemIndex)} {/* 삭제 버튼 */}
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8" <TableCell className="h-12 px-2.5 py-2 text-center">
title="항목 제거" {!readonly && !disabled && (
> <Button
<X className="h-4 w-4" /> type="button"
</Button> variant="ghost"
size="icon"
onClick={() => handleRemoveItem(itemIndex)}
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
title="항목 제거"
>
<X className="h-4 w-4" />
</Button>
)}
</TableCell>
</TableRow>
{/* 하위 데이터 조회 패널 (인라인) */}
{subDataLookup?.enabled && linkValue && (
<TableRow className="bg-gray-50/50">
<TableCell
colSpan={
fields.length + (showIndex ? 1 : 0) + (allowReorder && !readonly && !disabled ? 1 : 0) + 1
}
className="px-2.5 py-2"
>
<SubDataLookupPanel
config={subDataLookup}
linkValue={linkValue}
itemIndex={itemIndex}
onSelectionChange={(selectedItem, maxValue) =>
handleSubDataSelection(itemIndex, selectedItem, maxValue)
}
disabled={readonly || disabled}
/>
</TableCell>
</TableRow>
)} )}
</TableCell> </React.Fragment>
</TableRow> );
))} })}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
@ -832,10 +1000,15 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
// 카드 형식 렌더링 (기존 방식) // 카드 형식 렌더링 (기존 방식)
const renderCardLayout = () => { const renderCardLayout = () => {
// 하위 데이터 조회 설정이 있으면 연결 컬럼 찾기
const linkColumn = subDataLookup?.lookup?.linkColumn;
return ( return (
<> <>
{items.map((item, itemIndex) => { {items.map((item, itemIndex) => {
const isCollapsed = collapsible && collapsedItems.has(itemIndex); const isCollapsed = collapsible && collapsedItems.has(itemIndex);
// 하위 데이터 조회용 연결 값
const linkValue = linkColumn ? item[linkColumn] : null;
return ( return (
<Card <Card
@ -907,6 +1080,21 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
</div> </div>
))} ))}
</div> </div>
{/* 하위 데이터 조회 패널 (인라인) */}
{subDataLookup?.enabled && linkValue && (
<div className="mt-3 border-t pt-3">
<SubDataLookupPanel
config={subDataLookup}
linkValue={linkValue}
itemIndex={itemIndex}
onSelectionChange={(selectedItem, maxValue) =>
handleSubDataSelection(itemIndex, selectedItem, maxValue)
}
disabled={readonly || disabled}
/>
</div>
)}
</CardContent> </CardContent>
)} )}

660
frontend/components/webtypes/config/RepeaterConfigPanel.tsx
View File

@ -9,14 +9,17 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Plus, X, GripVertical, Check, ChevronsUpDown, Calculator } from "lucide-react"; import { Switch } from "@/components/ui/switch";
import { Plus, X, GripVertical, Check, ChevronsUpDown, Calculator, Database, ArrowUp, ArrowDown } from "lucide-react";
import { import {
RepeaterFieldGroupConfig, RepeaterFieldGroupConfig,
RepeaterFieldDefinition, RepeaterFieldDefinition,
RepeaterFieldType, RepeaterFieldType,
CalculationOperator, CalculationOperator,
CalculationFormula, CalculationFormula,
SubDataLookupConfig,
} from "@/types/repeater"; } from "@/types/repeater";
import { apiClient } from "@/lib/api/client";
import { ColumnInfo } from "@/types/screen"; import { ColumnInfo } from "@/types/screen";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -93,6 +96,56 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
handleFieldsChange(localFields.filter((_, i) => i !== index)); handleFieldsChange(localFields.filter((_, i) => i !== index));
}; };
// 필드 순서 변경 (위로)
const moveFieldUp = (index: number) => {
if (index <= 0) return;
const newFields = [...localFields];
[newFields[index - 1], newFields[index]] = [newFields[index], newFields[index - 1]];
handleFieldsChange(newFields);
};
// 필드 순서 변경 (아래로)
const moveFieldDown = (index: number) => {
if (index >= localFields.length - 1) return;
const newFields = [...localFields];
[newFields[index], newFields[index + 1]] = [newFields[index + 1], newFields[index]];
handleFieldsChange(newFields);
};
// 드래그 앤 드롭 상태
const [draggedFieldIndex, setDraggedFieldIndex] = useState<number | null>(null);
// 필드 드래그 시작
const handleFieldDragStart = (index: number) => {
setDraggedFieldIndex(index);
};
// 필드 드래그 오버
const handleFieldDragOver = (e: React.DragEvent, index: number) => {
e.preventDefault();
};
// 필드 드롭
const handleFieldDrop = (e: React.DragEvent, targetIndex: number) => {
e.preventDefault();
if (draggedFieldIndex === null || draggedFieldIndex === targetIndex) {
setDraggedFieldIndex(null);
return;
}
const newFields = [...localFields];
const draggedField = newFields[draggedFieldIndex];
newFields.splice(draggedFieldIndex, 1);
newFields.splice(targetIndex, 0, draggedField);
handleFieldsChange(newFields);
setDraggedFieldIndex(null);
};
// 필드 드래그 종료
const handleFieldDragEnd = () => {
setDraggedFieldIndex(null);
};
// 필드 수정 (입력 중 - 로컬 상태만) // 필드 수정 (입력 중 - 로컬 상태만)
const updateFieldLocal = (index: number, field: "label" | "placeholder", value: string) => { const updateFieldLocal = (index: number, field: "label" | "placeholder", value: string) => {
setLocalInputs((prev) => ({ setLocalInputs((prev) => ({
@ -129,6 +182,46 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
const [tableSelectOpen, setTableSelectOpen] = useState(false); const [tableSelectOpen, setTableSelectOpen] = useState(false);
const [tableSearchValue, setTableSearchValue] = useState(""); const [tableSearchValue, setTableSearchValue] = useState("");
// 하위 데이터 조회 설정 상태
const [subDataTableSelectOpen, setSubDataTableSelectOpen] = useState(false);
const [subDataTableSearchValue, setSubDataTableSearchValue] = useState("");
const [subDataTableColumns, setSubDataTableColumns] = useState<ColumnInfo[]>([]);
const [subDataLinkColumnOpen, setSubDataLinkColumnOpen] = useState(false);
const [subDataLinkColumnSearch, setSubDataLinkColumnSearch] = useState("");
// 하위 데이터 조회 테이블 컬럼 로드
const loadSubDataTableColumns = async (tableName: string) => {
if (!tableName) {
setSubDataTableColumns([]);
return;
}
try {
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
let columns: ColumnInfo[] = [];
if (response.data?.success && response.data?.data) {
if (Array.isArray(response.data.data.columns)) {
columns = response.data.data.columns;
} else if (Array.isArray(response.data.data)) {
columns = response.data.data;
}
} else if (Array.isArray(response.data)) {
columns = response.data;
}
setSubDataTableColumns(columns);
console.log("[RepeaterConfigPanel] 하위 데이터 테이블 컬럼 로드:", { tableName, count: columns.length });
} catch (error) {
console.error("[RepeaterConfigPanel] 하위 데이터 테이블 컬럼 로드 실패:", error);
setSubDataTableColumns([]);
}
};
// 하위 데이터 테이블이 설정되어 있으면 컬럼 로드
useEffect(() => {
if (config.subDataLookup?.lookup?.tableName) {
loadSubDataTableColumns(config.subDataLookup.lookup.tableName);
}
}, [config.subDataLookup?.lookup?.tableName]);
// 필터링된 테이블 목록 // 필터링된 테이블 목록
const filteredTables = useMemo(() => { const filteredTables = useMemo(() => {
if (!tableSearchValue) return allTables; if (!tableSearchValue) return allTables;
@ -146,6 +239,86 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
return table ? table.displayName || table.tableName : config.targetTable; return table ? table.displayName || table.tableName : config.targetTable;
}, [config.targetTable, allTables]); }, [config.targetTable, allTables]);
// 하위 데이터 조회 테이블 표시명
const selectedSubDataTableLabel = useMemo(() => {
const tableName = config.subDataLookup?.lookup?.tableName;
if (!tableName) return "테이블을 선택하세요";
const table = allTables.find((t) => t.tableName === tableName);
return table ? `${table.displayName || table.tableName} (${tableName})` : tableName;
}, [config.subDataLookup?.lookup?.tableName, allTables]);
// 필터링된 하위 데이터 테이블 컬럼
const filteredSubDataColumns = useMemo(() => {
if (!subDataLinkColumnSearch) return subDataTableColumns;
const searchLower = subDataLinkColumnSearch.toLowerCase();
return subDataTableColumns.filter(
(col) =>
col.columnName.toLowerCase().includes(searchLower) ||
(col.columnLabel && col.columnLabel.toLowerCase().includes(searchLower)),
);
}, [subDataTableColumns, subDataLinkColumnSearch]);
// 하위 데이터 조회 설정 변경 핸들러
const handleSubDataLookupChange = (path: string, value: any) => {
const currentConfig = config.subDataLookup || {
enabled: false,
lookup: { tableName: "", linkColumn: "", displayColumns: [] },
selection: { mode: "single", requiredFields: [], requiredMode: "all" },
conditionalInput: { targetField: "" },
ui: { expandMode: "inline", maxHeight: "150px", showSummary: true },
};
// 경로를 따라 중첩 객체 업데이트
const pathParts = path.split(".");
let target: any = { ...currentConfig };
const newConfig = target;
for (let i = 0; i < pathParts.length - 1; i++) {
const part = pathParts[i];
target[part] = { ...target[part] };
target = target[part];
}
target[pathParts[pathParts.length - 1]] = value;
onChange({
...config,
subDataLookup: newConfig as SubDataLookupConfig,
});
};
// 표시 컬럼 토글 핸들러
const handleDisplayColumnToggle = (columnName: string, checked: boolean) => {
const currentColumns = config.subDataLookup?.lookup?.displayColumns || [];
let newColumns: string[];
if (checked) {
newColumns = [...currentColumns, columnName];
} else {
newColumns = currentColumns.filter((c) => c !== columnName);
}
handleSubDataLookupChange("lookup.displayColumns", newColumns);
};
// 필수 선택 필드 토글 핸들러
const handleRequiredFieldToggle = (fieldName: string, checked: boolean) => {
const currentFields = config.subDataLookup?.selection?.requiredFields || [];
let newFields: string[];
if (checked) {
newFields = [...currentFields, fieldName];
} else {
newFields = currentFields.filter((f) => f !== fieldName);
}
handleSubDataLookupChange("selection.requiredFields", newFields);
};
// 컬럼 라벨 업데이트 핸들러
const handleColumnLabelChange = (columnName: string, label: string) => {
const currentLabels = config.subDataLookup?.lookup?.columnLabels || {};
handleSubDataLookupChange("lookup.columnLabels", {
...currentLabels,
[columnName]: label,
});
};
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* 대상 테이블 선택 */} {/* 대상 테이블 선택 */}
@ -250,24 +423,485 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
</p> </p>
</div> </div>
{/* 하위 데이터 조회 설정 */}
<div className="space-y-3 rounded-lg border-2 border-purple-200 bg-purple-50/30 p-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-purple-600" />
<Label className="text-sm font-semibold text-purple-800">하위 데이터 조회</Label>
</div>
<Switch
checked={config.subDataLookup?.enabled ?? false}
onCheckedChange={(checked) => handleSubDataLookupChange("enabled", checked)}
/>
</div>
<p className="text-xs text-purple-600">
품목 선택 시 재고/단가 등 관련 데이터를 조회하고 선택할 수 있습니다.
</p>
{config.subDataLookup?.enabled && (
<div className="space-y-4 pt-2">
{/* 조회 테이블 선택 */}
<div className="space-y-2">
<Label className="text-xs font-medium text-purple-700">조회 테이블</Label>
<Popover open={subDataTableSelectOpen} onOpenChange={setSubDataTableSelectOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={subDataTableSelectOpen}
className="h-9 w-full justify-between text-xs"
>
{selectedSubDataTableLabel}
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<Command>
<CommandInput
placeholder="테이블 검색..."
value={subDataTableSearchValue}
onValueChange={setSubDataTableSearchValue}
className="h-8 text-xs"
/>
<CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup className="max-h-48 overflow-auto">
{allTables
.filter((table) => {
if (!subDataTableSearchValue) return true;
const searchLower = subDataTableSearchValue.toLowerCase();
return (
table.tableName.toLowerCase().includes(searchLower) ||
(table.displayName && table.displayName.toLowerCase().includes(searchLower))
);
})
.map((table) => (
<CommandItem
key={table.tableName}
value={table.tableName}
onSelect={(currentValue) => {
handleSubDataLookupChange("lookup.tableName", currentValue);
loadSubDataTableColumns(currentValue);
setSubDataTableSelectOpen(false);
setSubDataTableSearchValue("");
}}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
config.subDataLookup?.lookup?.tableName === table.tableName
? "opacity-100"
: "opacity-0",
)}
/>
<div>
<div className="font-medium">{table.displayName || table.tableName}</div>
<div className="text-gray-500">{table.tableName}</div>
</div>
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
<p className="text-[10px] text-purple-500">예: inventory (재고), price_list (단가표)</p>
</div>
{/* 연결 컬럼 선택 */}
{config.subDataLookup?.lookup?.tableName && (
<div className="space-y-2">
<Label className="text-xs font-medium text-purple-700">연결 컬럼</Label>
<Popover open={subDataLinkColumnOpen} onOpenChange={setSubDataLinkColumnOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={subDataLinkColumnOpen}
className="h-9 w-full justify-between text-xs"
>
{config.subDataLookup?.lookup?.linkColumn
? (() => {
const col = subDataTableColumns.find(
(c) => c.columnName === config.subDataLookup?.lookup?.linkColumn,
);
return col
? `${col.columnLabel || col.columnName} (${col.columnName})`
: config.subDataLookup?.lookup?.linkColumn;
})()
: "연결 컬럼 선택"}
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<Command>
<CommandInput
placeholder="컬럼 검색..."
value={subDataLinkColumnSearch}
onValueChange={setSubDataLinkColumnSearch}
className="h-8 text-xs"
/>
<CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup className="max-h-48 overflow-auto">
{filteredSubDataColumns.map((col) => (
<CommandItem
key={col.columnName}
value={col.columnName}
onSelect={(currentValue) => {
handleSubDataLookupChange("lookup.linkColumn", currentValue);
setSubDataLinkColumnOpen(false);
setSubDataLinkColumnSearch("");
}}
className="text-xs"
>
<Check
className={cn(
"mr-2 h-3 w-3",
config.subDataLookup?.lookup?.linkColumn === col.columnName
? "opacity-100"
: "opacity-0",
)}
/>
<div>
<div className="font-medium">{col.columnLabel || col.columnName}</div>
<div className="text-gray-500">{col.columnName}</div>
</div>
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
<p className="text-[10px] text-purple-500">상위 데이터와 연결할 컬럼 (예: item_code)</p>
</div>
)}
{/* 표시 컬럼 선택 */}
{config.subDataLookup?.lookup?.tableName && subDataTableColumns.length > 0 && (
<div className="space-y-2">
<Label className="text-xs font-medium text-purple-700">표시 컬럼</Label>
<div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-white p-2">
{subDataTableColumns.map((col) => {
const isSelected = config.subDataLookup?.lookup?.displayColumns?.includes(col.columnName);
return (
<div key={col.columnName} className="flex items-center gap-2">
<Checkbox
id={`display-col-${col.columnName}`}
checked={isSelected}
onCheckedChange={(checked) => handleDisplayColumnToggle(col.columnName, checked as boolean)}
/>
<Label
htmlFor={`display-col-${col.columnName}`}
className="flex-1 cursor-pointer text-xs font-normal"
>
{col.columnLabel || col.columnName}
<span className="ml-1 text-gray-400">({col.columnName})</span>
</Label>
</div>
);
})}
</div>
<p className="text-[10px] text-purple-500">조회 결과에 표시할 컬럼들 (예: 창고, 위치, 수량)</p>
</div>
)}
{/* 선택 설정 */}
{(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
<div className="space-y-3 border-t border-purple-200 pt-3">
<Label className="text-xs font-medium text-purple-700">선택 설정</Label>
{/* 선택 모드 */}
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">선택 모드</Label>
<Select
value={config.subDataLookup?.selection?.mode || "single"}
onValueChange={(v) => handleSubDataLookupChange("selection.mode", v)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="single" className="text-xs">
단일 선택
</SelectItem>
<SelectItem value="multiple" className="text-xs">
다중 선택
</SelectItem>
</SelectContent>
</Select>
</div>
{/* 필수 선택 필드 */}
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">필수 선택 필드</Label>
<div className="flex flex-wrap gap-2">
{config.subDataLookup?.lookup?.displayColumns?.map((colName) => {
const col = subDataTableColumns.find((c) => c.columnName === colName);
const isRequired = config.subDataLookup?.selection?.requiredFields?.includes(colName);
return (
<div key={colName} className="flex items-center gap-1">
<Checkbox
id={`required-field-${colName}`}
checked={isRequired}
onCheckedChange={(checked) => handleRequiredFieldToggle(colName, checked as boolean)}
/>
<Label htmlFor={`required-field-${colName}`} className="cursor-pointer text-xs font-normal">
{col?.columnLabel || colName}
</Label>
</div>
);
})}
</div>
<p className="text-[10px] text-purple-500">이 필드들이 선택되어야 입력이 활성화됩니다</p>
</div>
{/* 필수 조건 */}
{(config.subDataLookup?.selection?.requiredFields?.length || 0) > 1 && (
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">필수 조건</Label>
<Select
value={config.subDataLookup?.selection?.requiredMode || "all"}
onValueChange={(v) => handleSubDataLookupChange("selection.requiredMode", v)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all" className="text-xs">
모두 선택해야 함
</SelectItem>
<SelectItem value="any" className="text-xs">
하나만 선택해도 됨
</SelectItem>
</SelectContent>
</Select>
</div>
)}
</div>
)}
{/* 조건부 입력 설정 */}
{(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
<div className="space-y-3 border-t border-purple-200 pt-3">
<Label className="text-xs font-medium text-purple-700">조건부 입력 설정</Label>
{/* 활성화 대상 필드 */}
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">활성화 대상 필드</Label>
<Select
value={config.subDataLookup?.conditionalInput?.targetField || "__none__"}
onValueChange={(v) =>
handleSubDataLookupChange("conditionalInput.targetField", v === "__none__" ? "" : v)
}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="필드 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__" className="text-xs">
선택 안함
</SelectItem>
{localFields.length === 0 ? (
<SelectItem value="__empty__" disabled className="text-xs text-gray-400">
필드 정의에서 먼저 필드를 추가하세요
</SelectItem>
) : (
localFields.map((f) => (
<SelectItem key={f.name} value={f.name} className="text-xs">
{f.label || f.name} ({f.name})
</SelectItem>
))
)}
</SelectContent>
</Select>
<p className="text-[10px] text-purple-500">
하위 데이터 선택 후 입력이 활성화될 필드 (예: 출고수량)
{localFields.length === 0 && (
<span className="ml-1 text-amber-600">* 필드 정의 필요</span>
)}
</p>
</div>
{/* 최대값 참조 필드 */}
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">최대값 참조 필드 (선택)</Label>
<Select
value={config.subDataLookup?.conditionalInput?.maxValueField || "__none__"}
onValueChange={(v) =>
handleSubDataLookupChange("conditionalInput.maxValueField", v === "__none__" ? undefined : v)
}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="필드 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__" className="text-xs">
사용 안함
</SelectItem>
{subDataTableColumns.map((col) => (
<SelectItem key={col.columnName} value={col.columnName} className="text-xs">
{col.columnLabel || col.columnName} ({col.columnName})
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-[10px] text-purple-500">입력 최대값을 제한할 하위 데이터 필드 (예: 재고수량)</p>
</div>
{/* 경고 임계값 */}
{config.subDataLookup?.conditionalInput?.maxValueField && (
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">경고 임계값 (%)</Label>
<Input
type="number"
min={0}
max={100}
value={config.subDataLookup?.conditionalInput?.warningThreshold ?? 90}
onChange={(e) =>
handleSubDataLookupChange("conditionalInput.warningThreshold", parseInt(e.target.value) || 90)
}
className="h-8 text-xs"
/>
<p className="text-[10px] text-purple-500">이 비율 이상 입력 시 경고 표시 (예: 90%)</p>
</div>
)}
</div>
)}
{/* UI 설정 */}
{(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
<div className="space-y-3 border-t border-purple-200 pt-3">
<Label className="text-xs font-medium text-purple-700">UI 설정</Label>
{/* 확장 방식 */}
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">확장 방식</Label>
<Select
value={config.subDataLookup?.ui?.expandMode || "inline"}
onValueChange={(v) => handleSubDataLookupChange("ui.expandMode", v)}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="inline" className="text-xs">
인라인 (행 아래 확장)
</SelectItem>
<SelectItem value="modal" className="text-xs">
모달 (팝업)
</SelectItem>
</SelectContent>
</Select>
</div>
{/* 최대 높이 */}
{config.subDataLookup?.ui?.expandMode === "inline" && (
<div className="space-y-2">
<Label className="text-[10px] text-purple-600">최대 높이</Label>
<Input
value={config.subDataLookup?.ui?.maxHeight || "150px"}
onChange={(e) => handleSubDataLookupChange("ui.maxHeight", e.target.value)}
placeholder="150px"
className="h-8 text-xs"
/>
</div>
)}
{/* 요약 정보 표시 */}
<div className="flex items-center space-x-2">
<Checkbox
id="sub-data-show-summary"
checked={config.subDataLookup?.ui?.showSummary ?? true}
onCheckedChange={(checked) => handleSubDataLookupChange("ui.showSummary", checked)}
/>
<Label htmlFor="sub-data-show-summary" className="cursor-pointer text-xs font-normal">
요약 정보 표시
</Label>
</div>
</div>
)}
{/* 설정 요약 */}
{config.subDataLookup?.lookup?.tableName && (
<div className="rounded bg-purple-100 p-2 text-xs">
<p className="font-medium text-purple-800">설정 요약</p>
<ul className="mt-1 space-y-0.5 text-purple-700">
<li>조회 테이블: {config.subDataLookup?.lookup?.tableName || "-"}</li>
<li>연결 컬럼: {config.subDataLookup?.lookup?.linkColumn || "-"}</li>
<li>표시 컬럼: {config.subDataLookup?.lookup?.displayColumns?.join(", ") || "-"}</li>
<li>필수 선택: {config.subDataLookup?.selection?.requiredFields?.join(", ") || "-"}</li>
<li>활성화 필드: {config.subDataLookup?.conditionalInput?.targetField || "-"}</li>
</ul>
</div>
)}
</div>
)}
</div>
{/* 필드 정의 */} {/* 필드 정의 */}
<div className="space-y-3"> <div className="space-y-3">
<Label className="text-sm font-semibold">필드 정의</Label> <div className="flex items-center justify-between">
<Label className="text-sm font-semibold">필드 정의</Label>
<span className="text-xs text-gray-500">드래그하거나 화살표로 순서 변경</span>
</div>
{localFields.map((field, index) => ( {localFields.map((field, index) => (
<Card key={`${field.name}-${index}`} className="border-2"> <Card
key={`${field.name}-${index}`}
className={cn(
"border-2 transition-all",
draggedFieldIndex === index && "opacity-50 border-blue-400",
draggedFieldIndex !== null && draggedFieldIndex !== index && "border-dashed",
)}
draggable
onDragStart={() => handleFieldDragStart(index)}
onDragOver={(e) => handleFieldDragOver(e, index)}
onDrop={(e) => handleFieldDrop(e, index)}
onDragEnd={handleFieldDragEnd}
>
<CardContent className="space-y-3 pt-4"> <CardContent className="space-y-3 pt-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span> <div className="flex items-center gap-2">
<Button {/* 드래그 핸들 */}
type="button" <GripVertical className="h-4 w-4 cursor-move text-gray-400 hover:text-gray-600" />
variant="ghost" <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
size="icon" </div>
onClick={() => removeField(index)} <div className="flex items-center gap-1">
className="h-6 w-6 text-red-500 hover:bg-red-50" {/* 순서 변경 버튼 */}
> <Button
<X className="h-3 w-3" /> type="button"
</Button> variant="ghost"
size="icon"
onClick={() => moveFieldUp(index)}
disabled={index === 0}
className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
title="위로 이동"
>
<ArrowUp className="h-3 w-3" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => moveFieldDown(index)}
disabled={index === localFields.length - 1}
className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
title="아래로 이동"
>
<ArrowDown className="h-3 w-3" />
</Button>
{/* 삭제 버튼 */}
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => removeField(index)}
className="h-6 w-6 text-red-500 hover:bg-red-50"
title="삭제"
>
<X className="h-3 w-3" />
</Button>
</div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">

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;

12
frontend/lib/api/screen.ts
View File

@ -105,6 +105,18 @@ export const screenApi = {
return response.data; return response.data;
}, },
// 화면 수정 (이름, 설명 등)
updateScreen: async (
screenId: number,
data: {
screenName?: string;
description?: string;
tableName?: string;
}
): Promise<void> => {
await apiClient.put(`/screen-management/screens/${screenId}`, data);
},
// 화면 삭제 (휴지통으로 이동) // 화면 삭제 (휴지통으로 이동)
deleteScreen: async (screenId: number, deleteReason?: string, force?: boolean): Promise<void> => { deleteScreen: async (screenId: number, deleteReason?: string, force?: boolean): Promise<void> => {
await apiClient.delete(`/screen-management/screens/${screenId}`, { await apiClient.delete(`/screen-management/screens/${screenId}`, {

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;

27
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;
@ -422,7 +406,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
component.label, component.label,
selectedRows, selectedRows,
selectedRowsData, selectedRowsData,
trackedSelectedLeftData, splitPanelContext?.selectedLeftData,
flowSelectedData, flowSelectedData,
splitPanelContext, splitPanelContext,
modalStoreData, modalStoreData,
@ -1300,10 +1284,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 (
<> <>

16
frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
View File

@ -180,8 +180,11 @@ export function ModalRepeaterTableComponent({
filterCondition: propFilterCondition, filterCondition: propFilterCondition,
companyCode: propCompanyCode, companyCode: propCompanyCode,
// 🆕 그룹 데이터 (EditModal에서 전달, 같은 그룹의 여러 품목)
groupedData,
...props ...props
}: ModalRepeaterTableComponentProps) { }: ModalRepeaterTableComponentProps & { groupedData?: Record<string, any>[] }) {
// ✅ config 또는 component.config 또는 개별 prop 우선순위로 병합 // ✅ config 또는 component.config 또는 개별 prop 우선순위로 병합
const componentConfig = { const componentConfig = {
...config, ...config,
@ -208,9 +211,16 @@ export function ModalRepeaterTableComponent({
// 모달 필터 설정 // 모달 필터 설정
const modalFilters = componentConfig?.modalFilters || []; const modalFilters = componentConfig?.modalFilters || [];
// ✅ value는 formData[columnName] 우선, 없으면 prop 사용 // ✅ value는 groupedData 우선, 없으면 formData[columnName], 없으면 prop 사용
const columnName = component?.columnName; const columnName = component?.columnName;
const externalValue = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
// 🆕 groupedData가 전달되면 (EditModal에서 그룹 조회 결과) 우선 사용
const externalValue = (() => {
if (groupedData && groupedData.length > 0) {
return groupedData;
}
return (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
})();
// 빈 객체 판단 함수 (수정 모달의 실제 데이터는 유지) // 빈 객체 판단 함수 (수정 모달의 실제 데이터는 유지)
const isEmptyRow = (item: any): boolean => { const isEmptyRow = (item: any): boolean => {

52
frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
View File

@ -303,6 +303,17 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
externalDataLength: externalData?.length, externalDataLength: externalData?.length,
initialFieldsLength: initialFields?.length, initialFieldsLength: initialFields?.length,
}); });
// 🆕 데이터 샘플 확인
if (externalData && externalData.length > 0) {
console.log("🔶 첫 번째 데이터 샘플:", externalData[0]);
console.log("🔶 전체 데이터 개수:", externalData.length);
}
// 🆕 필드 설정 확인
if (initialFields && initialFields.length > 0) {
console.log("🔶 필드 설정:", initialFields);
}
// ==================== 상태 ==================== // ==================== 상태 ====================
const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields); const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
@ -312,6 +323,9 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
sortConfig: null, sortConfig: null,
filterConfig: {}, filterConfig: {},
}); });
// 🆕 초기 로드 시 자동 확장 (첫 레벨만)
const [isInitialExpanded, setIsInitialExpanded] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태 const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태
const [showFieldChooser, setShowFieldChooser] = useState(false); const [showFieldChooser, setShowFieldChooser] = useState(false);
@ -494,13 +508,44 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
return null; return null;
} }
return processPivotData( const result = processPivotData(
filteredData, filteredData,
visibleFields, visibleFields,
pivotState.expandedRowPaths, pivotState.expandedRowPaths,
pivotState.expandedColumnPaths pivotState.expandedColumnPaths
); );
// 🆕 피벗 결과 확인
console.log("🔶 피벗 처리 결과:", {
hasResult: !!result,
flatRowsCount: result?.flatRows?.length,
flatColumnsCount: result?.flatColumns?.length,
dataMatrixSize: result?.dataMatrix?.size,
expandedRowPaths: pivotState.expandedRowPaths.length,
expandedColumnPaths: pivotState.expandedColumnPaths.length,
});
return result;
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]); }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
// 🆕 초기 로드 시 첫 레벨 자동 확장
useEffect(() => {
if (!isInitialExpanded && pivotResult && pivotResult.flatRows.length > 0) {
// 첫 레벨 행들의 경로 수집 (level 0인 행들)
const firstLevelPaths = pivotResult.flatRows
.filter(row => row.level === 0 && row.hasChildren)
.map(row => row.path);
if (firstLevelPaths.length > 0) {
console.log("🔶 초기 자동 확장:", firstLevelPaths);
setPivotState(prev => ({
...prev,
expandedRowPaths: firstLevelPaths,
}));
setIsInitialExpanded(true);
}
}
}, [pivotResult, isInitialExpanded]);
// 조건부 서식용 전체 값 수집 // 조건부 서식용 전체 값 수집
const allCellValues = useMemo(() => { const allCellValues = useMemo(() => {
@ -665,6 +710,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
// 행 확장/축소 // 행 확장/축소
const handleToggleRowExpand = useCallback( const handleToggleRowExpand = useCallback(
(path: string[]) => { (path: string[]) => {
console.log("🔶 행 확장/축소 클릭:", path);
setPivotState((prev) => { setPivotState((prev) => {
const pathKey = pathToKey(path); const pathKey = pathToKey(path);
const existingIndex = prev.expandedRowPaths.findIndex( const existingIndex = prev.expandedRowPaths.findIndex(
@ -673,13 +720,16 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
let newPaths: string[][]; let newPaths: string[][];
if (existingIndex >= 0) { if (existingIndex >= 0) {
console.log("🔶 행 축소:", path);
newPaths = prev.expandedRowPaths.filter( newPaths = prev.expandedRowPaths.filter(
(_, i) => i !== existingIndex (_, i) => i !== existingIndex
); );
} else { } else {
console.log("🔶 행 확장:", path);
newPaths = [...prev.expandedRowPaths, path]; newPaths = [...prev.expandedRowPaths, path];
} }
console.log("🔶 새로운 확장 경로:", newPaths);
onExpandChange?.(newPaths); onExpandChange?.(newPaths);
return { return {

70
frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx
View File

@ -1,12 +1,13 @@
"use client"; "use client";
import React from "react"; import React, { useEffect, useState } from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer"; import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { createComponentDefinition } from "../../utils/createComponentDefinition"; import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component"; import { ComponentCategory } from "@/types/component";
import { PivotGridComponent } from "./PivotGridComponent"; import { PivotGridComponent } from "./PivotGridComponent";
import { PivotGridConfigPanel } from "./PivotGridConfigPanel"; import { PivotGridConfigPanel } from "./PivotGridConfigPanel";
import { PivotFieldConfig } from "./types"; import { PivotFieldConfig } from "./types";
import { dataApi } from "@/lib/api/data";
// ==================== 샘플 데이터 (미리보기용) ==================== // ==================== 샘플 데이터 (미리보기용) ====================
@ -95,6 +96,48 @@ const PivotGridWrapper: React.FC<any> = (props) => {
const configFields = componentConfig.fields || props.fields; const configFields = componentConfig.fields || props.fields;
const configData = props.data; const configData = props.data;
// 🆕 테이블에서 데이터 자동 로딩
const [loadedData, setLoadedData] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const loadTableData = async () => {
const tableName = componentConfig.dataSource?.tableName;
// 데이터가 이미 있거나, 테이블명이 없으면 로딩하지 않음
if (configData || !tableName || props.isDesignMode) {
return;
}
setIsLoading(true);
try {
console.log("🔷 [PivotGrid] 테이블 데이터 로딩 시작:", tableName);
const response = await dataApi.getTableData(tableName, {
page: 1,
size: 10000, // 피벗 분석용 대량 데이터 (pageSize → size)
});
console.log("🔷 [PivotGrid] API 응답:", response);
// dataApi.getTableData는 { data, total, page, size, totalPages } 구조
if (response.data && Array.isArray(response.data)) {
setLoadedData(response.data);
console.log("✅ [PivotGrid] 데이터 로딩 완료:", response.data.length, "건");
} else {
console.error("❌ [PivotGrid] 데이터 로딩 실패: 응답에 data 배열이 없음");
setLoadedData([]);
}
} catch (error) {
console.error("❌ [PivotGrid] 데이터 로딩 에러:", error);
} finally {
setIsLoading(false);
}
};
loadTableData();
}, [componentConfig.dataSource?.tableName, configData, props.isDesignMode]);
// 디버깅 로그 // 디버깅 로그
console.log("🔷 PivotGridWrapper props:", { console.log("🔷 PivotGridWrapper props:", {
isDesignMode: props.isDesignMode, isDesignMode: props.isDesignMode,
@ -103,23 +146,28 @@ const PivotGridWrapper: React.FC<any> = (props) => {
hasConfig: !!props.config, hasConfig: !!props.config,
hasData: !!configData, hasData: !!configData,
dataLength: configData?.length, dataLength: configData?.length,
hasLoadedData: loadedData.length > 0,
loadedDataLength: loadedData.length,
hasFields: !!configFields, hasFields: !!configFields,
fieldsLength: configFields?.length, fieldsLength: configFields?.length,
isLoading,
}); });
// 디자인 모드 판단: // 디자인 모드 판단:
// 1. isDesignMode === true // 1. isDesignMode === true
// 2. isInteractive === false (편집 모드) // 2. isInteractive === false (편집 모드)
// 3. 데이터가 없는 경우
const isDesignMode = props.isDesignMode === true || props.isInteractive === false; const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
// 🆕 실제 데이터 우선순위: props.data > loadedData > 샘플 데이터
const actualData = configData || loadedData;
const hasValidData = actualData && Array.isArray(actualData) && actualData.length > 0;
const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0; const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
// 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용 // 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
const usePreviewData = isDesignMode || !hasValidData; const usePreviewData = isDesignMode || (!hasValidData && !isLoading);
// 최종 데이터/필드 결정 // 최종 데이터/필드 결정
const finalData = usePreviewData ? SAMPLE_DATA : configData; const finalData = usePreviewData ? SAMPLE_DATA : actualData;
const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS; const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
const finalTitle = usePreviewData const finalTitle = usePreviewData
? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)" ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
@ -140,6 +188,18 @@ const PivotGridWrapper: React.FC<any> = (props) => {
showColumnTotals: true, showColumnTotals: true,
}; };
// 🆕 로딩 중 표시
if (isLoading) {
return (
<div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
<div className="text-center space-y-2">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
<p className="text-sm text-muted-foreground">데이터 로딩 중...</p>
</div>
</div>
);
}
return ( return (
<PivotGridComponent <PivotGridComponent
title={finalTitle} title={finalTitle}

2
frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
View File

@ -401,7 +401,7 @@ export const FieldChooser: React.FC<FieldChooserProps> = ({
</div> </div>
{/* 필드 목록 */} {/* 필드 목록 */}
<ScrollArea className="flex-1 -mx-6 px-6"> <ScrollArea className="flex-1 -mx-6 px-6 max-h-[40vh] overflow-y-auto">
<div className="space-y-2 py-2"> <div className="space-y-2 py-2">
{filteredFields.length === 0 ? ( {filteredFields.length === 0 ? (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-muted-foreground">

422
frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx Normal file
View File

@ -0,0 +1,422 @@
"use client";
import React, { useMemo, useState } from "react";
import { ChevronDown, ChevronUp, Loader2, AlertCircle, Check, Package, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import { SubDataLookupConfig } from "@/types/repeater";
import { useSubDataLookup } from "./useSubDataLookup";
export interface SubDataLookupPanelProps {
config: SubDataLookupConfig;
linkValue: string | number | null; // 상위 항목의 연결 값 (예: item_code)
itemIndex: number; // 상위 항목 인덱스
onSelectionChange: (selectedItem: any | null, maxValue: number | null) => void;
disabled?: boolean;
className?: string;
}
/**
* 하위 데이터 조회 패널
* 품목 선택 시 재고/단가 등 관련 데이터를 표시하고 선택할 수 있는 패널
*/
export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
config,
linkValue,
itemIndex,
onSelectionChange,
disabled = false,
className,
}) => {
const {
data,
isLoading,
error,
selectedItem,
setSelectedItem,
isInputEnabled,
maxValue,
isExpanded,
setIsExpanded,
refetch,
getSelectionSummary,
} = useSubDataLookup({
config,
linkValue,
itemIndex,
enabled: !disabled,
});
// 선택 핸들러
const handleSelect = (item: any) => {
if (disabled) return;
// 이미 선택된 항목이면 선택 해제
const newSelectedItem = selectedItem?.id === item.id ? null : item;
setSelectedItem(newSelectedItem);
// 최대값 계산
let newMaxValue: number | null = null;
if (newSelectedItem && config.conditionalInput.maxValueField) {
const val = newSelectedItem[config.conditionalInput.maxValueField];
newMaxValue = typeof val === "number" ? val : parseFloat(val) || null;
}
onSelectionChange(newSelectedItem, newMaxValue);
};
// 컬럼 라벨 가져오기
const getColumnLabel = (columnName: string): string => {
return config.lookup.columnLabels?.[columnName] || columnName;
};
// 표시할 컬럼 목록
const displayColumns = config.lookup.displayColumns || [];
// 요약 정보 표시용 선택 상태
const summaryText = useMemo(() => {
if (!selectedItem) return null;
return getSelectionSummary();
}, [selectedItem, getSelectionSummary]);
// linkValue가 없으면 렌더링하지 않음
if (!linkValue) {
return null;
}
// 인라인 모드 렌더링
if (config.ui?.expandMode === "inline" || !config.ui?.expandMode) {
return (
<div className={cn("w-full", className)}>
{/* 토글 버튼 및 요약 */}
<div className="flex items-center gap-2">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => {
const willExpand = !isExpanded;
setIsExpanded(willExpand);
if (willExpand) {
refetch(); // 펼칠 때 데이터 재조회
}
}}
disabled={disabled || isLoading}
className="h-7 gap-1 px-2 text-xs"
>
{isLoading ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : isExpanded ? (
<ChevronUp className="h-3 w-3" />
) : (
<ChevronDown className="h-3 w-3" />
)}
<Package className="h-3 w-3" />
<span>재고 조회</span>
{data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
</Button>
{/* 선택 요약 표시 */}
{selectedItem && summaryText && (
<div className="flex items-center gap-1 text-xs">
<Check className="h-3 w-3 text-green-600" />
<span className="text-green-700">{summaryText}</span>
</div>
)}
</div>
{/* 확장된 패널 */}
{isExpanded && (
<div
className="mt-2 rounded-md border bg-gray-50"
style={{ maxHeight: config.ui?.maxHeight || "150px", overflowY: "auto" }}
>
{/* 에러 상태 */}
{error && (
<div className="flex items-center gap-2 p-3 text-xs text-red-600">
<AlertCircle className="h-4 w-4" />
<span>{error}</span>
<Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
재시도
</Button>
</div>
)}
{/* 로딩 상태 */}
{isLoading && (
<div className="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
<Loader2 className="h-4 w-4 animate-spin" />
<span>조회 중...</span>
</div>
)}
{/* 데이터 없음 */}
{!isLoading && !error && data.length === 0 && (
<div className="p-4 text-center text-xs text-gray-500">
{config.ui?.emptyMessage || "재고 데이터가 없습니다"}
</div>
)}
{/* 데이터 테이블 */}
{!isLoading && !error && data.length > 0 && (
<table className="w-full text-xs">
<thead className="sticky top-0 bg-gray-100">
<tr>
<th className="w-8 p-2 text-center">선택</th>
{displayColumns.map((col) => (
<th key={col} className="p-2 text-left font-medium">
{getColumnLabel(col)}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item, idx) => {
const isSelected = selectedItem?.id === item.id;
return (
<tr
key={item.id || idx}
onClick={() => handleSelect(item)}
className={cn(
"cursor-pointer border-t transition-colors",
isSelected ? "bg-blue-50" : "hover:bg-gray-100",
disabled && "cursor-not-allowed opacity-50",
)}
>
<td className="p-2 text-center">
<div
className={cn(
"mx-auto flex h-4 w-4 items-center justify-center rounded-full border",
isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
)}
>
{isSelected && <Check className="h-3 w-3 text-white" />}
</div>
</td>
{displayColumns.map((col) => (
<td key={col} className="p-2">
{item[col] ?? "-"}
</td>
))}
</tr>
);
})}
</tbody>
</table>
)}
</div>
)}
{/* 필수 선택 안내 */}
{!isInputEnabled && selectedItem && config.selection.requiredFields.length > 0 && (
<p className="mt-1 text-[10px] text-amber-600">
{config.selection.requiredFields.map((f) => getColumnLabel(f)).join(", ")}을(를) 선택해주세요
</p>
)}
</div>
);
}
// 모달 모드 렌더링
if (config.ui?.expandMode === "modal") {
return (
<div className={cn("w-full", className)}>
{/* 재고 조회 버튼 및 요약 */}
<div className="flex items-center gap-2">
<Button
type="button"
variant="outline"
size="sm"
onClick={() => {
setIsExpanded(true);
refetch(); // 모달 열 때 데이터 재조회
}}
disabled={disabled || isLoading}
className="h-7 gap-1 px-2 text-xs"
>
{isLoading ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : (
<Search className="h-3 w-3" />
)}
<Package className="h-3 w-3" />
<span>재고 조회</span>
{data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
</Button>
{/* 선택 요약 표시 */}
{selectedItem && summaryText && (
<div className="flex items-center gap-1 text-xs">
<Check className="h-3 w-3 text-green-600" />
<span className="text-green-700">{summaryText}</span>
</div>
)}
</div>
{/* 필수 선택 안내 */}
{!isInputEnabled && selectedItem && config.selection.requiredFields.length > 0 && (
<p className="mt-1 text-[10px] text-amber-600">
{config.selection.requiredFields.map((f) => getColumnLabel(f)).join(", ")}을(를) 선택해주세요
</p>
)}
{/* 모달 */}
<Dialog open={isExpanded} onOpenChange={setIsExpanded}>
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">재고 현황</DialogTitle>
<DialogDescription className="text-xs sm:text-sm">
출고할 재고를 선택하세요. 창고/위치별 재고 수량을 확인할 수 있습니다.
</DialogDescription>
</DialogHeader>
<div
className="rounded-md border"
style={{ maxHeight: config.ui?.maxHeight || "300px", overflowY: "auto" }}
>
{/* 에러 상태 */}
{error && (
<div className="flex items-center gap-2 p-3 text-xs text-red-600">
<AlertCircle className="h-4 w-4" />
<span>{error}</span>
<Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
재시도
</Button>
</div>
)}
{/* 로딩 상태 */}
{isLoading && (
<div className="flex items-center justify-center gap-2 p-8 text-sm text-gray-500">
<Loader2 className="h-5 w-5 animate-spin" />
<span>재고 조회 중...</span>
</div>
)}
{/* 데이터 없음 */}
{!isLoading && !error && data.length === 0 && (
<div className="p-8 text-center text-sm text-gray-500">
{config.ui?.emptyMessage || "해당 품목의 재고가 없습니다"}
</div>
)}
{/* 데이터 테이블 */}
{!isLoading && !error && data.length > 0 && (
<table className="w-full text-sm">
<thead className="sticky top-0 bg-gray-100">
<tr>
<th className="w-12 p-3 text-center">선택</th>
{displayColumns.map((col) => (
<th key={col} className="p-3 text-left font-medium">
{getColumnLabel(col)}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item, idx) => {
const isSelected = selectedItem?.id === item.id;
return (
<tr
key={item.id || idx}
onClick={() => handleSelect(item)}
className={cn(
"cursor-pointer border-t transition-colors",
isSelected ? "bg-blue-50" : "hover:bg-gray-50",
disabled && "cursor-not-allowed opacity-50",
)}
>
<td className="p-3 text-center">
<div
className={cn(
"mx-auto flex h-5 w-5 items-center justify-center rounded-full border-2",
isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
)}
>
{isSelected && <Check className="h-3 w-3 text-white" />}
</div>
</td>
{displayColumns.map((col) => (
<td key={col} className="p-3">
{item[col] ?? "-"}
</td>
))}
</tr>
);
})}
</tbody>
</table>
)}
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={() => setIsExpanded(false)}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
닫기
</Button>
<Button
onClick={() => setIsExpanded(false)}
disabled={!selectedItem}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
선택 완료
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}
// 기본값: inline 모드로 폴백 (설정이 없거나 알 수 없는 모드인 경우)
return (
<div className={cn("w-full", className)}>
<div className="flex items-center gap-2">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => {
const willExpand = !isExpanded;
setIsExpanded(willExpand);
if (willExpand) {
refetch(); // 펼칠 때 데이터 재조회
}
}}
disabled={disabled || isLoading}
className="h-7 gap-1 px-2 text-xs"
>
{isLoading ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : isExpanded ? (
<ChevronUp className="h-3 w-3" />
) : (
<ChevronDown className="h-3 w-3" />
)}
<Package className="h-3 w-3" />
<span>재고 조회</span>
{data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
</Button>
{selectedItem && summaryText && (
<div className="flex items-center gap-1 text-xs">
<Check className="h-3 w-3 text-green-600" />
<span className="text-green-700">{summaryText}</span>
</div>
)}
</div>
</div>
);
};
SubDataLookupPanel.displayName = "SubDataLookupPanel";

227
frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts Normal file
View File

@ -0,0 +1,227 @@
"use client";
import { useState, useEffect, useCallback, useRef } from "react";
import { apiClient } from "@/lib/api/client";
import { SubDataLookupConfig, SubDataState } from "@/types/repeater";
const LOG_PREFIX = {
INFO: "[SubDataLookup]",
DEBUG: "[SubDataLookup]",
WARN: "[SubDataLookup]",
ERROR: "[SubDataLookup]",
};
export interface UseSubDataLookupProps {
config: SubDataLookupConfig;
linkValue: string | number | null; // 상위 항목의 연결 값 (예: item_code)
itemIndex: number; // 상위 항목 인덱스
enabled?: boolean; // 기능 활성화 여부
}
export interface UseSubDataLookupReturn {
data: any[]; // 조회된 하위 데이터
isLoading: boolean; // 로딩 상태
error: string | null; // 에러 메시지
selectedItem: any | null; // 선택된 하위 항목
setSelectedItem: (item: any | null) => void; // 선택 항목 설정
isInputEnabled: boolean; // 조건부 입력 활성화 여부
maxValue: number | null; // 최대 입력 가능 값
isExpanded: boolean; // 확장 상태
setIsExpanded: (expanded: boolean) => void; // 확장 상태 설정
refetch: () => void; // 데이터 재조회
getSelectionSummary: () => string; // 선택 요약 텍스트
}
/**
* 하위 데이터 조회 훅
* 품목 선택 시 재고/단가 등 관련 데이터를 조회하고 관리
*/
export function useSubDataLookup(props: UseSubDataLookupProps): UseSubDataLookupReturn {
const { config, linkValue, itemIndex, enabled = true } = props;
// 상태
const [data, setData] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [selectedItem, setSelectedItem] = useState<any | null>(null);
const [isExpanded, setIsExpanded] = useState(false);
// 이전 linkValue 추적 (중복 호출 방지)
const prevLinkValueRef = useRef<string | number | null>(null);
// 데이터 조회 함수
const fetchData = useCallback(async () => {
// 비활성화 또는 linkValue 없으면 스킵
if (!enabled || !config?.enabled || !linkValue) {
console.log(`${LOG_PREFIX.DEBUG} 조회 스킵:`, {
enabled,
configEnabled: config?.enabled,
linkValue,
itemIndex,
});
setData([]);
setSelectedItem(null);
return;
}
const { tableName, linkColumn, additionalFilters } = config.lookup;
if (!tableName || !linkColumn) {
console.warn(`${LOG_PREFIX.WARN} 필수 설정 누락:`, { tableName, linkColumn });
return;
}
console.log(`${LOG_PREFIX.INFO} 하위 데이터 조회 시작:`, {
tableName,
linkColumn,
linkValue,
itemIndex,
});
setIsLoading(true);
setError(null);
try {
// 검색 조건 구성 - 정확한 값 매칭을 위해 equals 연산자 사용
const searchCondition: Record<string, any> = {
[linkColumn]: { value: linkValue, operator: "equals" },
...additionalFilters,
};
console.log(`${LOG_PREFIX.DEBUG} API 요청 조건:`, {
tableName,
linkColumn,
linkValue,
searchCondition,
});
const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
page: 1,
size: 100,
search: searchCondition,
autoFilter: { enabled: true },
});
if (response.data?.success) {
const items = response.data?.data?.data || response.data?.data || [];
console.log(`${LOG_PREFIX.DEBUG} API 응답:`, {
dataCount: items.length,
firstItem: items[0],
tableName,
});
setData(items);
} else {
console.warn(`${LOG_PREFIX.WARN} API 응답 실패:`, response.data);
setData([]);
setError("데이터 조회에 실패했습니다");
}
} catch (err: any) {
console.error(`${LOG_PREFIX.ERROR} 하위 데이터 조회 실패:`, {
error: err.message,
config,
linkValue,
});
setError(err.message || "데이터 조회 중 오류가 발생했습니다");
setData([]);
} finally {
setIsLoading(false);
}
}, [enabled, config, linkValue, itemIndex]);
// linkValue 변경 시 데이터 조회
useEffect(() => {
// 같은 값이면 스킵
if (prevLinkValueRef.current === linkValue) {
return;
}
prevLinkValueRef.current = linkValue;
// linkValue가 없으면 초기화
if (!linkValue) {
setData([]);
setSelectedItem(null);
setIsExpanded(false);
return;
}
fetchData();
}, [linkValue, fetchData]);
// 조건부 입력 활성화 여부 계산
const isInputEnabled = useCallback((): boolean => {
if (!config?.enabled || !selectedItem) {
return false;
}
const { requiredFields, requiredMode = "all" } = config.selection;
if (!requiredFields || requiredFields.length === 0) {
// 필수 필드가 없으면 선택만 하면 활성화
return true;
}
// 선택된 항목에서 필수 필드 값 확인
if (requiredMode === "any") {
// 하나라도 있으면 OK
return requiredFields.some((field) => {
const value = selectedItem[field];
return value !== undefined && value !== null && value !== "";
});
} else {
// 모두 있어야 OK
return requiredFields.every((field) => {
const value = selectedItem[field];
return value !== undefined && value !== null && value !== "";
});
}
}, [config, selectedItem]);
// 최대값 계산
const getMaxValue = useCallback((): number | null => {
if (!config?.enabled || !selectedItem) {
return null;
}
const { maxValueField } = config.conditionalInput;
if (!maxValueField) {
return null;
}
const maxValue = selectedItem[maxValueField];
return typeof maxValue === "number" ? maxValue : parseFloat(maxValue) || null;
}, [config, selectedItem]);
// 선택 요약 텍스트 생성
const getSelectionSummary = useCallback((): string => {
if (!selectedItem) {
return "선택 안됨";
}
const { displayColumns, columnLabels } = config.lookup;
const parts: string[] = [];
displayColumns.forEach((col) => {
const value = selectedItem[col];
if (value !== undefined && value !== null && value !== "") {
const label = columnLabels?.[col] || col;
parts.push(`${label}: ${value}`);
}
});
return parts.length > 0 ? parts.join(", ") : "선택됨";
}, [selectedItem, config?.lookup]);
return {
data,
isLoading,
error,
selectedItem,
setSelectedItem,
isInputEnabled: isInputEnabled(),
maxValue: getMaxValue(),
isExpanded,
setIsExpanded,
refetch: fetchData,
getSelectionSummary,
};
}

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

File diff suppressed because it is too large Load Diff

361
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();
// ======================================== // ========================================
// 설정 및 스타일 // 설정 및 스타일
// ======================================== // ========================================
@ -486,7 +479,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]) => {
@ -496,16 +488,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;
}); });
}); });
} }
@ -1053,16 +1036,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);
}, },
@ -2073,7 +2054,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);
@ -2110,31 +2091,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);
}; };
@ -2199,8 +2155,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 });
}; };
@ -2267,176 +2250,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) => {
@ -4081,7 +3918,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
@ -4091,7 +3928,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":
@ -4305,7 +4142,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} 선택`}
/> />
); );
@ -4594,36 +4431,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],
); );
// ======================================== // ========================================
@ -4762,22 +4573,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);
@ -5878,10 +5676,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>
); );
} }
@ -5900,18 +5695,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;
@ -5977,12 +5767,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>
)} )}
@ -6030,16 +5815,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(
@ -6049,7 +5834,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>
); );
})} })}
@ -6222,17 +6007,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 위치 계산 (보이는 컬럼 기준으로 계산)
const visibleFrozenColumns = visibleColumns
.filter(col => frozenColumns.includes(col.columnName))
.map(col => col.columnName);
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
// 틀고정된 컬럼의 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;
@ -6379,12 +6160,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;
@ -6398,10 +6174,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;
@ -6561,17 +6338,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 위치 계산 (보이는 컬럼 기준으로 계산)
const visibleFrozenColumns = visibleColumns
.filter(col => frozenColumns.includes(col.columnName))
.map(col => col.columnName);
const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
// 틀고정된 컬럼의 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 = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150; const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
leftPosition += frozenColWidth; leftPosition += frozenColWidth;

26
frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
View File

@ -427,10 +427,17 @@ export function UniversalFormModalComponent({
} }
// 🆕 테이블 섹션 데이터 병합 (품목 리스트 등) // 🆕 테이블 섹션 데이터 병합 (품목 리스트 등)
// 참고: initializeForm에서 DB 로드 시 __tableSection_ (더블),
// handleTableDataChange에서 수정 시 _tableSection_ (싱글) 사용
for (const [key, value] of Object.entries(formData)) { for (const [key, value] of Object.entries(formData)) {
if (key.startsWith("_tableSection_") && Array.isArray(value)) { // 싱글/더블 언더스코어 모두 처리
event.detail.formData[key] = value; if ((key.startsWith("_tableSection_") || key.startsWith("__tableSection_")) && Array.isArray(value)) {
console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key}, ${value.length}개 항목`); // 저장 시에는 _tableSection_ 키로 통일 (buttonActions.ts에서 이 키를 기대)
const normalizedKey = key.startsWith("__tableSection_")
? key.replace("__tableSection_", "_tableSection_")
: key;
event.detail.formData[normalizedKey] = value;
console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key} → ${normalizedKey}, ${value.length}개 항목`);
} }
} }
@ -920,6 +927,19 @@ export function UniversalFormModalComponent({
const tableSectionKey = `__tableSection_${section.id}`; const tableSectionKey = `__tableSection_${section.id}`;
newFormData[tableSectionKey] = items; newFormData[tableSectionKey] = items;
console.log(`[initializeForm] 테이블 섹션 ${section.id}: formData[${tableSectionKey}]에 저장됨`); console.log(`[initializeForm] 테이블 섹션 ${section.id}: formData[${tableSectionKey}]에 저장됨`);
// 🆕 원본 그룹 데이터 저장 (삭제 추적용)
// groupedDataInitializedRef가 false일 때만 설정 (true면 _groupedData useEffect에서 이미 처리됨)
// DB에서 로드한 데이터를 originalGroupedData에 저장해야 삭제 시 비교 가능
if (!groupedDataInitializedRef.current) {
setOriginalGroupedData((prev) => {
const newOriginal = [...prev, ...JSON.parse(JSON.stringify(items))];
console.log(`[initializeForm] 테이블 섹션 ${section.id}: originalGroupedData에 ${items.length}건 추가 (총 ${newOriginal.length}건)`);
return newOriginal;
});
} else {
console.log(`[initializeForm] 테이블 섹션 ${section.id}: _groupedData로 이미 초기화됨, originalGroupedData 설정 스킵`);
}
} }
} catch (error) { } catch (error) {
console.error(`[initializeForm] 테이블 섹션 ${section.id}: 디테일 데이터 로드 실패`, error); console.error(`[initializeForm] 테이블 섹션 ${section.id}: 디테일 데이터 로드 실패`, error);

41
frontend/lib/utils/buttonActions.ts
View File

@ -713,6 +713,47 @@ export class ButtonActionExecutor {
if (repeaterJsonKeys.length > 0) { if (repeaterJsonKeys.length > 0) {
console.log("🔄 [handleSave] RepeaterFieldGroup JSON 문자열 감지:", repeaterJsonKeys); console.log("🔄 [handleSave] RepeaterFieldGroup JSON 문자열 감지:", repeaterJsonKeys);
// 🎯 채번 규칙 할당 처리 (RepeaterFieldGroup 저장 전에 실행)
console.log("🔍 [handleSave-RepeaterFieldGroup] 채번 규칙 할당 체크 시작");
const fieldsWithNumberingRepeater: Record<string, string> = {};
// formData에서 채번 규칙이 설정된 필드 찾기
for (const [key, value] of Object.entries(context.formData)) {
if (key.endsWith("_numberingRuleId") && value) {
const fieldName = key.replace("_numberingRuleId", "");
fieldsWithNumberingRepeater[fieldName] = value as string;
console.log(`🎯 [handleSave-RepeaterFieldGroup] 채번 필드 발견: ${fieldName} → 규칙 ${value}`);
}
}
console.log("📋 [handleSave-RepeaterFieldGroup] 채번 규칙이 설정된 필드:", fieldsWithNumberingRepeater);
// 채번 규칙이 있는 필드에 대해 allocateCode 호출
if (Object.keys(fieldsWithNumberingRepeater).length > 0) {
console.log("🎯 [handleSave-RepeaterFieldGroup] 채번 규칙 할당 시작 (allocateCode 호출)");
const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
for (const [fieldName, ruleId] of Object.entries(fieldsWithNumberingRepeater)) {
try {
console.log(`🔄 [handleSave-RepeaterFieldGroup] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
const allocateResult = await allocateNumberingCode(ruleId);
if (allocateResult.success && allocateResult.data?.generatedCode) {
const newCode = allocateResult.data.generatedCode;
console.log(`✅ [handleSave-RepeaterFieldGroup] ${fieldName} 새 코드 할당: ${context.formData[fieldName]} → ${newCode}`);
context.formData[fieldName] = newCode;
} else {
console.warn(`⚠️ [handleSave-RepeaterFieldGroup] ${fieldName} 코드 할당 실패:`, allocateResult.error);
}
} catch (allocateError) {
console.error(`❌ [handleSave-RepeaterFieldGroup] ${fieldName} 코드 할당 오류:`, allocateError);
}
}
}
console.log("✅ [handleSave-RepeaterFieldGroup] 채번 규칙 할당 완료");
// 🆕 상단 폼 데이터(마스터 정보) 추출 // 🆕 상단 폼 데이터(마스터 정보) 추출
// RepeaterFieldGroup JSON과 컴포넌트 키를 제외한 나머지가 마스터 정보 // RepeaterFieldGroup JSON과 컴포넌트 키를 제외한 나머지가 마스터 정보
const masterFields: Record<string, any> = {}; const masterFields: Record<string, any> = {};

29
frontend/package-lock.json generated
View File

@ -17,6 +17,7 @@
"@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-context-menu": "^2.2.16",
"@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.7", "@radix-ui/react-label": "^2.1.7",
@ -1715,6 +1716,34 @@
} }
} }
}, },
"node_modules/@radix-ui/react-context-menu": {
"version": "2.2.16",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
"integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-menu": "2.1.16",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-callback-ref": "1.1.1",
"@radix-ui/react-use-controllable-state": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dialog": { "node_modules/@radix-ui/react-dialog": {
"version": "1.1.15", "version": "1.1.15",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",

1
frontend/package.json
View File

@ -25,6 +25,7 @@
"@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-context-menu": "^2.2.16",
"@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.7", "@radix-ui/react-label": "^2.1.7",

69
frontend/types/repeater.ts
View File

@ -95,6 +95,7 @@ export interface RepeaterFieldGroupConfig {
layout?: "grid" | "card"; // 레이아웃 타입: grid(테이블 행) 또는 card(카드 형식) layout?: "grid" | "card"; // 레이아웃 타입: grid(테이블 행) 또는 card(카드 형식)
showDivider?: boolean; // 항목 사이 구분선 표시 (카드 모드일 때만) showDivider?: boolean; // 항목 사이 구분선 표시 (카드 모드일 때만)
emptyMessage?: string; // 항목이 없을 때 메시지 emptyMessage?: string; // 항목이 없을 때 메시지
subDataLookup?: SubDataLookupConfig; // 하위 데이터 조회 설정 (재고, 단가 등)
} }
/** /**
@ -106,3 +107,71 @@ export type RepeaterItemData = Record<string, any>;
* 반복 그룹 전체 데이터 (배열) * 반복 그룹 전체 데이터 (배열)
*/ */
export type RepeaterData = RepeaterItemData[]; export type RepeaterData = RepeaterItemData[];
// ============================================================
// 하위 데이터 조회 설정 (Sub Data Lookup)
// 품목 선택 시 재고/단가 등 관련 데이터를 조회하고 선택하는 기능
// ============================================================
/**
* 하위 데이터 조회 테이블 설정
*/
export interface SubDataLookupSettings {
tableName: string; // 조회할 테이블 (예: inventory, price_list)
linkColumn: string; // 상위 데이터와 연결할 컬럼 (예: item_code)
displayColumns: string[]; // 표시할 컬럼들 (예: ["warehouse_code", "location_code", "quantity"])
columnLabels?: Record<string, string>; // 컬럼 라벨 (예: { warehouse_code: "창고" })
additionalFilters?: Record<string, any>; // 추가 필터 조건
}
/**
* 하위 데이터 선택 설정
*/
export interface SubDataSelectionSettings {
mode: "single" | "multiple"; // 단일/다중 선택
requiredFields: string[]; // 필수 선택 필드 (예: ["warehouse_code"])
requiredMode?: "any" | "all"; // 필수 조건: "any" = 하나만, "all" = 모두 (기본: "all")
}
/**
* 조건부 입력 활성화 설정
*/
export interface ConditionalInputSettings {
targetField: string; // 활성화할 입력 필드 (예: "outbound_qty")
maxValueField?: string; // 최대값 참조 필드 (예: "quantity" - 재고 수량)
warningThreshold?: number; // 경고 임계값 (퍼센트, 예: 90)
errorMessage?: string; // 에러 메시지
}
/**
* 하위 데이터 UI 설정
*/
export interface SubDataUISettings {
expandMode: "inline" | "modal"; // 확장 방식 (인라인 또는 모달)
maxHeight?: string; // 최대 높이 (예: "150px")
showSummary?: boolean; // 요약 정보 표시
emptyMessage?: string; // 데이터 없을 때 메시지
}
/**
* 하위 데이터 조회 전체 설정
*/
export interface SubDataLookupConfig {
enabled: boolean; // 기능 활성화 여부
lookup: SubDataLookupSettings; // 조회 설정
selection: SubDataSelectionSettings; // 선택 설정
conditionalInput: ConditionalInputSettings; // 조건부 입력 설정
ui?: SubDataUISettings; // UI 설정
}
/**
* 하위 데이터 상태 (런타임)
*/
export interface SubDataState {
itemIndex: number; // 상위 항목 인덱스
data: any[]; // 조회된 하위 데이터
selectedItem: any | null; // 선택된 하위 항목
isLoading: boolean; // 로딩 상태
error: string | null; // 에러 메시지
isExpanded: boolean; // 확장 상태
}