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 lhj 

; Please enter a commit message to explain why this merge is necessary,
; especially if it merges an updated upstream into a topic branch.
;
; Lines starting with ';' will be ignored, and an empty message aborts
; the commit.
This commit is contained in:
leeheejin 2025-10-28 09:49:19 +09:00
parent c52e77f37d 34353b712c
commit b09a7c8398
102 changed files with 14304 additions and 1139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
.cursorrules
View File

@ -855,3 +855,95 @@ opacity-50 cursor-not-allowed"
- 이모지 사용 금지 (명시적 요청 없이)
- 심플하고 깔끔한 디자인 유지
---
## 사용자 관리 필수 규칙
### 최고 관리자(SUPER_ADMIN) 가시성 제한
**핵심 원칙**: 회사 관리자(COMPANY_ADMIN)와 일반 사용자(USER)는 **절대로** 최고 관리자(company_code = "*")를 볼 수 없어야 합니다.
#### 백엔드 구현 필수사항
모든 사용자 관련 API에서 다음 필터링 로직을 **반드시** 적용해야 합니다:
```typescript
// 최고 관리자 필터링 (필수)
if (req.user && req.user.companyCode !== "*") {
// 최고 관리자가 아닌 경우, company_code가 "*"인 사용자는 제외
whereConditions.push(`company_code != '*'`);
logger.info("최고 관리자 필터링 적용", { userCompanyCode: req.user.companyCode });
}
```
**SQL 쿼리 예시:**
```sql
SELECT * FROM user_info
WHERE 1=1
AND company_code != '*' -- 최고 관리자 제외
AND company_code = $1 -- 회사별 필터링
```
#### 적용 대상 API (필수)
다음 사용자 관련 API에 최고 관리자 필터링을 **반드시** 적용해야 합니다:
1. **사용자 목록 조회** (`GET /api/admin/users`)
- 사용자 관리 페이지
- 권한 그룹 멤버 선택 (Dual List Box)
- 검색/필터 결과
2. **사용자 검색** (`GET /api/admin/users/search`)
- 자동완성/타입어헤드
- 드롭다운 선택
3. **부서별 사용자 조회** (`GET /api/admin/users/by-department`)
- 부서 필터링 시
4. **사용자 상세 조회** (`GET /api/admin/users/:userId`)
- 최고 관리자의 상세 정보는 최고 관리자만 볼 수 있음
#### 프론트엔드 추가 보호 (권장)
백엔드에서 이미 필터링되지만, 프론트엔드에서도 추가 체크를 권장합니다:
```typescript
// 컴포넌트에서 최고 관리자 제외
const visibleUsers = users.filter(user => {
// 최고 관리자만 최고 관리자를 볼 수 있음
if (user.companyCode === "*" && !isSuperAdmin) {
return false;
}
return true;
});
```
#### 예외 사항
- **최고 관리자(company_code = "*")** 는 모든 사용자(다른 최고 관리자 포함)를 볼 수 있습니다.
- 최고 관리자는 다른 회사의 데이터도 조회할 수 있습니다.
#### 체크리스트
새로운 사용자 관련 기능 개발 시 다음을 확인하세요:
- [ ] `req.user.companyCode !== "*"` 체크 추가
- [ ] `company_code != '*'` WHERE 조건 추가
- [ ] 로깅으로 필터링 적용 여부 확인
- [ ] 최고 관리자로 로그인하여 정상 작동 확인
- [ ] 회사 관리자로 로그인하여 최고 관리자가 안 보이는지 확인
#### 관련 파일
- `backend-node/src/controllers/adminController.ts` - `getUserList()` 함수 참고
- `backend-node/src/middleware/authMiddleware.ts` - 권한 체크
- `frontend/components/admin/UserManagement.tsx` - 사용자 목록 UI
- `frontend/components/admin/RoleDetailManagement.tsx` - 멤버 선택 UI
#### 보안 주의사항
- 클라이언트 측 필터링만으로는 부족합니다 (우회 가능).
- 반드시 백엔드 SQL 쿼리에서 필터링해야 합니다.
- API 응답에 최고 관리자 정보가 절대 포함되어서는 안 됩니다.
- 로그에 필터링 여부를 기록하여 감사 추적을 남기세요.

13
backend-node/nodemon.json
View File

@ -1,15 +1,6 @@
{
"watch": ["src"],
"ignore": [
"src/**/*.spec.ts",
"src/**/*.test.ts",
"data/**",
"uploads/**",
"logs/**",
"*.log"
],
"ext": "ts,json",
"exec": "ts-node src/app.ts",
"delay": 2000
"ignore": ["src/**/*.spec.ts"],
"exec": "node -r ts-node/register/transpile-only src/app.ts"
}

24
backend-node/src/app.ts
View File

@ -62,6 +62,8 @@ import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 야드 관리 3D
import flowRoutes from "./routes/flowRoutes"; // 플로우 관리
import flowExternalDbConnectionRoutes from "./routes/flowExternalDbConnectionRoutes"; // 플로우 전용 외부 DB 연결
import workHistoryRoutes from "./routes/workHistoryRoutes"; // 작업 이력 관리
import tableHistoryRoutes from "./routes/tableHistoryRoutes"; // 테이블 변경 이력 조회
import roleRoutes from "./routes/roleRoutes"; // 권한 그룹 관리
import { BatchSchedulerService } from "./services/batchSchedulerService";
// import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
// import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@ -218,6 +220,8 @@ app.use("/api/yard-layouts", yardLayoutRoutes); // 야드 관리 3D
app.use("/api/flow-external-db", flowExternalDbConnectionRoutes); // 플로우 전용 외부 DB 연결
app.use("/api/flow", flowRoutes); // 플로우 관리 (마지막에 등록하여 다른 라우트와 충돌 방지)
app.use("/api/work-history", workHistoryRoutes); // 작업 이력 관리
app.use("/api/table-history", tableHistoryRoutes); // 테이블 변경 이력 조회
app.use("/api/roles", roleRoutes); // 권한 그룹 관리
// app.use("/api/collections", collectionRoutes); // 임시 주석
// app.use("/api/batch", batchRoutes); // 임시 주석
// app.use('/api/users', userRoutes);
@ -245,12 +249,19 @@ app.listen(PORT, HOST, async () => {
logger.info(`🔗 Health check: http://${HOST}:${PORT}/health`);
logger.info(`🌐 External access: http://39.117.244.52:${PORT}/health`);
// 대시보드 마이그레이션 실행
// 데이터베이스 마이그레이션 실행
try {
const { runDashboardMigration } = await import("./database/runMigration");
const {
runDashboardMigration,
runTableHistoryActionMigration,
runDtgManagementLogMigration,
} = await import("./database/runMigration");
await runDashboardMigration();
await runTableHistoryActionMigration();
await runDtgManagementLogMigration();
} catch (error) {
logger.error(`❌ 대시보드 마이그레이션 실패:`, error);
logger.error(`❌ 마이그레이션 실패:`, error);
}
// 배치 스케줄러 초기화
@ -279,17 +290,18 @@ app.listen(PORT, HOST, async () => {
const { mailSentHistoryService } = await import(
"./services/mailSentHistoryService"
);
cron.schedule("0 2 * * *", async () => {
try {
logger.info("🗑️ 30일 지난 삭제된 메일 자동 삭제 시작...");
const deletedCount = await mailSentHistoryService.cleanupOldDeletedMails();
const deletedCount =
await mailSentHistoryService.cleanupOldDeletedMails();
logger.info(`✅ 30일 지난 메일 ${deletedCount}개 자동 삭제 완료`);
} catch (error) {
logger.error("❌ 메일 자동 삭제 실패:", error);
}
});
logger.info(`⏰ 메일 자동 삭제 스케줄러가 시작되었습니다. (매일 새벽 2시)`);
} catch (error) {
logger.error(`❌ 메일 자동 삭제 스케줄러 시작 실패:`, error);

119
backend-node/src/controllers/adminController.ts
View File

@ -17,19 +17,25 @@ export async function getAdminMenus(
res: Response
): Promise<void> {
try {
logger.info("=== 메뉴 목록 조회 시작 ===");
logger.info("=== 관리자 메뉴 목록 조회 시작 ===");
// 현재 로그인한 사용자의 회사 코드와 로케일 가져오기
// 현재 로그인한 사용자의 정보 가져오기
const userId = req.user?.userId;
const userCompanyCode = req.user?.companyCode || "ILSHIN";
const userType = req.user?.userType;
const userLang = (req.query.userLang as string) || "ko";
const menuType = req.query.menuType as string | undefined; // menuType 파라미터 추가
logger.info(`사용자 ID: ${userId}`);
logger.info(`사용자 회사 코드: ${userCompanyCode}`);
logger.info(`사용자 유형: ${userType}`);
logger.info(`사용자 로케일: ${userLang}`);
logger.info(`메뉴 타입: ${menuType || "전체"}`);
const paramMap = {
userId,
userCompanyCode,
userType,
userLang,
menuType, // menuType 추가
};
@ -37,7 +43,7 @@ export async function getAdminMenus(
const menuList = await AdminService.getAdminMenuList(paramMap);
logger.info(
`메뉴 조회 결과: ${menuList.length}개 (타입: ${menuType || "전체"})`
`관리자 메뉴 조회 결과: ${menuList.length}개 (타입: ${menuType || "전체"}, 회사: ${userCompanyCode})`
);
if (menuList.length > 0) {
logger.info("첫 번째 메뉴:", menuList[0]);
@ -76,21 +82,29 @@ export async function getUserMenus(
try {
logger.info("=== 사용자 메뉴 목록 조회 시작 ===");
// 현재 로그인한 사용자의 회사 코드와 로케일 가져오기
// 현재 로그인한 사용자의 정보 가져오기
const userId = req.user?.userId;
const userCompanyCode = req.user?.companyCode || "ILSHIN";
const userType = req.user?.userType;
const userLang = (req.query.userLang as string) || "ko";
logger.info(`사용자 ID: ${userId}`);
logger.info(`사용자 회사 코드: ${userCompanyCode}`);
logger.info(`사용자 유형: ${userType}`);
logger.info(`사용자 로케일: ${userLang}`);
const paramMap = {
userId,
userCompanyCode,
userType,
userLang,
};
const menuList = await AdminService.getUserMenuList(paramMap);
logger.info(`사용자 메뉴 조회 결과: ${menuList.length}개`);
logger.info(
`사용자 메뉴 조회 결과: ${menuList.length}개 (회사: ${userCompanyCode})`
);
if (menuList.length > 0) {
logger.info("첫 번째 메뉴:", menuList[0]);
}
@ -195,6 +209,8 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
search_email,
deptCode,
status,
companyCode, // 회사 코드 필터 추가
size, // countPerPage 대신 사용 가능
} = req.query;
// Raw Query를 사용한 사용자 목록 조회
@ -203,6 +219,23 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
let queryParams: any[] = [];
let paramIndex = 1;
// 회사 코드 필터 (권한 그룹 멤버 관리 시 사용)
if (companyCode && typeof companyCode === "string" && companyCode.trim()) {
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(companyCode.trim());
paramIndex++;
logger.info("회사 코드 필터 적용", { companyCode });
}
// 최고 관리자 필터링 (회사 관리자와 일반 사용자는 최고 관리자를 볼 수 없음)
if (req.user && req.user.companyCode !== "*") {
// 최고 관리자가 아닌 경우, company_code가 "*"인 사용자는 제외
whereConditions.push(`company_code != '*'`);
logger.info("최고 관리자 필터링 적용", {
userCompanyCode: req.user.companyCode,
});
}
// 검색 조건 처리
if (search && typeof search === "string" && search.trim()) {
// 통합 검색
@ -303,6 +336,16 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
}
}
// 현재 로그인한 사용자의 회사 코드 필터 (슈퍼관리자가 아닌 경우)
if (req.user && req.user.companyCode !== "*" && !companyCode) {
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(req.user.companyCode);
paramIndex++;
logger.info("사용자 회사 코드 필터 적용", {
companyCode: req.user.companyCode,
});
}
// 기존 필터들
if (deptCode) {
whereConditions.push(`dept_code = $${paramIndex}`);
@ -331,7 +374,8 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
const totalCount = parseInt(countResult[0]?.total || "0", 10);
// 사용자 목록 조회
const offset = (Number(page) - 1) * Number(countPerPage);
const limit = size ? Number(size) : Number(countPerPage);
const offset = (Number(page) - 1) * limit;
const usersQuery = `
SELECT
sabun,
@ -357,11 +401,7 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
`;
const users = await query<any>(usersQuery, [
...queryParams,
Number(countPerPage),
offset,
]);
const users = await query<any>(usersQuery, [...queryParams, limit, offset]);
// 응답 데이터 가공
const processedUsers = users.map((user) => ({
@ -393,8 +433,8 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
searchType,
pagination: {
page: Number(page),
limit: Number(countPerPage),
totalPages: Math.ceil(totalCount / Number(countPerPage)),
limit: limit,
totalPages: Math.ceil(totalCount / limit),
},
message: "사용자 목록 조회 성공",
};
@ -404,7 +444,8 @@ export const getUserList = async (req: AuthenticatedRequest, res: Response) => {
returnedCount: processedUsers.length,
searchType,
currentPage: Number(page),
countPerPage: Number(countPerPage),
limit: limit,
companyCode: companyCode || "all",
});
res.status(200).json(response);
@ -1379,7 +1420,7 @@ export const getDepartmentList = async (
// 회사 코드 필터
if (companyCode) {
whereConditions.push(`company_name = $${paramIndex}`);
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(companyCode);
paramIndex++;
}
@ -1420,6 +1461,7 @@ export const getDepartmentList = async (
data_type,
status,
sales_yn,
company_code,
company_name
FROM dept_info
${whereClause}
@ -1445,6 +1487,7 @@ export const getDepartmentList = async (
dataType: dept.data_type,
status: dept.status || "active",
salesYn: dept.sales_yn,
companyCode: dept.company_code,
companyName: dept.company_name,
children: [],
});
@ -1480,6 +1523,7 @@ export const getDepartmentList = async (
dataType: dept.data_type,
status: dept.status || "active",
salesYn: dept.sales_yn,
companyCode: dept.company_code,
companyName: dept.company_name,
})),
},
@ -1947,10 +1991,23 @@ export const changeUserStatus = async (
export const saveUser = async (req: AuthenticatedRequest, res: Response) => {
try {
const userData = req.body;
logger.info("사용자 저장 요청", { userData, user: req.user });
const isUpdate = req.method === "PUT"; // PUT 요청이면 수정
logger.info("사용자 저장 요청", {
userData,
user: req.user,
isUpdate,
method: req.method,
});
// 필수 필드 검증
const requiredFields = ["userId", "userName", "userPassword"];
let requiredFields = ["userId", "userName"];
// 신규 등록 시에만 비밀번호 필수
if (!isUpdate) {
requiredFields.push("userPassword");
}
for (const field of requiredFields) {
if (!userData[field] || userData[field].trim() === "") {
res.status(400).json({
@ -1965,10 +2022,15 @@ export const saveUser = async (req: AuthenticatedRequest, res: Response) => {
}
}
// 비밀번호 암호화
const encryptedPassword = await EncryptUtil.encrypt(userData.userPassword);
// 비밀번호 암호화 (비밀번호가 제공된 경우에만)
let encryptedPassword = null;
if (userData.userPassword) {
encryptedPassword = await EncryptUtil.encrypt(userData.userPassword);
}
// Raw Query를 사용한 사용자 저장 (upsert with ON CONFLICT)
const updatePasswordClause = encryptedPassword ? "user_password = $4," : "";
const [savedUser] = await query<any>(
`INSERT INTO user_info (
user_id, user_name, user_name_eng, user_password,
@ -1979,7 +2041,7 @@ export const saveUser = async (req: AuthenticatedRequest, res: Response) => {
ON CONFLICT (user_id) DO UPDATE SET
user_name = $2,
user_name_eng = $3,
user_password = $4,
${updatePasswordClause}
dept_code = $5,
dept_name = $6,
position_code = $7,
@ -1998,7 +2060,7 @@ export const saveUser = async (req: AuthenticatedRequest, res: Response) => {
userData.userId,
userData.userName,
userData.userNameEng || null,
encryptedPassword,
encryptedPassword || "", // 빈 문자열로 넣되, UPDATE에서는 조건부로 제외
userData.deptCode || null,
userData.deptName || null,
userData.positionCode || null,
@ -2017,23 +2079,26 @@ export const saveUser = async (req: AuthenticatedRequest, res: Response) => {
);
// 기존 사용자인지 새 사용자인지 확인 (regdate로 판단)
const isUpdate =
const isExistingUser =
savedUser.regdate &&
new Date(savedUser.regdate).getTime() < Date.now() - 1000;
logger.info(isUpdate ? "사용자 정보 수정 완료" : "새 사용자 등록 완료", {
userId: userData.userId,
});
logger.info(
isExistingUser ? "사용자 정보 수정 완료" : "새 사용자 등록 완료",
{
userId: userData.userId,
}
);
const response = {
success: true,
result: true,
message: isUpdate
message: isExistingUser
? "사용자 정보가 수정되었습니다."
: "사용자가 등록되었습니다.",
data: {
userId: userData.userId,
isUpdate,
isUpdate: isExistingUser,
},
};

167
backend-node/src/controllers/dataflowDiagramController.ts
View File

@ -1,4 +1,5 @@
import { Request, Response } from "express";
import { AuthenticatedRequest } from "../types/auth";
import {
getDataflowDiagrams as getDataflowDiagramsService,
getDataflowDiagramById as getDataflowDiagramByIdService,
@ -12,15 +13,33 @@ import { logger } from "../utils/logger";
/**
* 관계도 목록 조회 (페이지네이션)
*/
export const getDataflowDiagrams = async (req: Request, res: Response) => {
export const getDataflowDiagrams = async (
req: AuthenticatedRequest,
res: Response
) => {
try {
const page = parseInt(req.query.page as string) || 1;
const size = parseInt(req.query.size as string) || 20;
const searchTerm = req.query.searchTerm as string;
const companyCode =
(req.query.companyCode as string) ||
(req.headers["x-company-code"] as string) ||
"*";
const userCompanyCode = req.user?.companyCode;
// 슈퍼 관리자는 쿼리 파라미터로 회사 지정 가능, 일반/회사 관리자는 자신의 회사만
let companyCode: string;
if (userCompanyCode === "*") {
// 슈퍼 관리자: 쿼리 파라미터 사용 또는 전체
companyCode = (req.query.companyCode as string) || "*";
} else {
// 회사 관리자/일반 사용자: 강제로 자신의 회사 코드 적용
companyCode = userCompanyCode || "*";
}
logger.info("관계도 목록 조회", {
userId: req.user?.userId,
userCompanyCode,
filterCompanyCode: companyCode,
page,
size,
});
const result = await getDataflowDiagramsService(
companyCode,
@ -46,13 +65,21 @@ export const getDataflowDiagrams = async (req: Request, res: Response) => {
/**
* 특정 관계도 조회
*/
export const getDataflowDiagramById = async (req: Request, res: Response) => {
export const getDataflowDiagramById = async (
req: AuthenticatedRequest,
res: Response
) => {
try {
const diagramId = parseInt(req.params.diagramId);
const companyCode =
(req.query.companyCode as string) ||
(req.headers["x-company-code"] as string) ||
"*";
const userCompanyCode = req.user?.companyCode;
// 슈퍼 관리자는 쿼리 파라미터로 회사 지정 가능, 일반/회사 관리자는 자신의 회사만
let companyCode: string;
if (userCompanyCode === "*") {
companyCode = (req.query.companyCode as string) || "*";
} else {
companyCode = userCompanyCode || "*";
}
if (isNaN(diagramId)) {
return res.status(400).json({
@ -87,7 +114,10 @@ export const getDataflowDiagramById = async (req: Request, res: Response) => {
/**
* 새로운 관계도 생성
*/
export const createDataflowDiagram = async (req: Request, res: Response) => {
export const createDataflowDiagram = async (
req: AuthenticatedRequest,
res: Response
) => {
try {
const {
diagram_name,
@ -96,27 +126,31 @@ export const createDataflowDiagram = async (req: Request, res: Response) => {
category,
control,
plan,
company_code,
created_by,
updated_by,
} = req.body;
logger.info(`새 관계도 생성 요청:`, { diagram_name, company_code });
const userCompanyCode = req.user?.companyCode;
const userId = req.user?.userId || "SYSTEM";
// 회사 코드는 로그인한 사용자의 회사 코드 사용 (슈퍼 관리자는 요청 body에서 지정 가능)
let companyCode: string;
if (userCompanyCode === "*" && req.body.company_code) {
// 슈퍼 관리자가 특정 회사로 생성하는 경우
companyCode = req.body.company_code;
} else {
// 일반 사용자/회사 관리자는 자신의 회사로 생성
companyCode = userCompanyCode || "*";
}
logger.info(`새 관계도 생성 요청:`, {
diagram_name,
companyCode,
userId,
userCompanyCode,
});
logger.info(`node_positions:`, node_positions);
logger.info(`category:`, category);
logger.info(`control:`, control);
logger.info(`plan:`, plan);
logger.info(`전체 요청 Body:`, JSON.stringify(req.body, null, 2));
const companyCode =
company_code ||
(req.query.companyCode as string) ||
(req.headers["x-company-code"] as string) ||
"*";
const userId =
created_by ||
updated_by ||
(req.headers["x-user-id"] as string) ||
"SYSTEM";
if (!diagram_name || !relationships) {
return res.status(400).json({
@ -184,24 +218,31 @@ export const createDataflowDiagram = async (req: Request, res: Response) => {
/**
* 관계도 수정
*/
export const updateDataflowDiagram = async (req: Request, res: Response) => {
export const updateDataflowDiagram = async (
req: AuthenticatedRequest,
res: Response
) => {
try {
const diagramId = parseInt(req.params.diagramId);
const { updated_by } = req.body;
const companyCode =
(req.query.companyCode as string) ||
(req.headers["x-company-code"] as string) ||
"*";
const userId =
updated_by || (req.headers["x-user-id"] as string) || "SYSTEM";
const userCompanyCode = req.user?.companyCode;
const userId = req.user?.userId || "SYSTEM";
logger.info(`관계도 수정 요청 - ID: ${diagramId}, Company: ${companyCode}`);
// 슈퍼 관리자는 쿼리 파라미터로 회사 지정 가능, 일반/회사 관리자는 자신의 회사만
let companyCode: string;
if (userCompanyCode === "*") {
companyCode = (req.query.companyCode as string) || "*";
} else {
companyCode = userCompanyCode || "*";
}
logger.info(`관계도 수정 요청`, {
diagramId,
companyCode,
userId,
userCompanyCode,
});
logger.info(`요청 Body:`, JSON.stringify(req.body, null, 2));
logger.info(`node_positions:`, req.body.node_positions);
logger.info(`요청 Body 키들:`, Object.keys(req.body));
logger.info(`요청 Body 타입:`, typeof req.body);
logger.info(`node_positions 타입:`, typeof req.body.node_positions);
logger.info(`node_positions 값:`, req.body.node_positions);
if (isNaN(diagramId)) {
return res.status(400).json({
@ -265,13 +306,21 @@ export const updateDataflowDiagram = async (req: Request, res: Response) => {
/**
* 관계도 삭제
*/
export const deleteDataflowDiagram = async (req: Request, res: Response) => {
export const deleteDataflowDiagram = async (
req: AuthenticatedRequest,
res: Response
) => {
try {
const diagramId = parseInt(req.params.diagramId);
const companyCode =
(req.query.companyCode as string) ||
(req.headers["x-company-code"] as string) ||
"*";
const userCompanyCode = req.user?.companyCode;
// 슈퍼 관리자는 쿼리 파라미터로 회사 지정 가능, 일반/회사 관리자는 자신의 회사만
let companyCode: string;
if (userCompanyCode === "*") {
companyCode = (req.query.companyCode as string) || "*";
} else {
companyCode = userCompanyCode || "*";
}
if (isNaN(diagramId)) {
return res.status(400).json({
@ -306,21 +355,25 @@ export const deleteDataflowDiagram = async (req: Request, res: Response) => {
/**
* 관계도 복제
*/
export const copyDataflowDiagram = async (req: Request, res: Response) => {
export const copyDataflowDiagram = async (
req: AuthenticatedRequest,
res: Response
) => {
try {
const diagramId = parseInt(req.params.diagramId);
const {
new_name,
companyCode: bodyCompanyCode,
userId: bodyUserId,
} = req.body;
const companyCode =
bodyCompanyCode ||
(req.query.companyCode as string) ||
(req.headers["x-company-code"] as string) ||
"*";
const userId =
bodyUserId || (req.headers["x-user-id"] as string) || "SYSTEM";
const { new_name } = req.body;
const userCompanyCode = req.user?.companyCode;
const userId = req.user?.userId || "SYSTEM";
// 회사 코드는 로그인한 사용자의 회사 코드 사용
let companyCode: string;
if (userCompanyCode === "*" && req.body.companyCode) {
// 슈퍼 관리자가 특정 회사로 복제하는 경우
companyCode = req.body.companyCode;
} else {
// 일반 사용자/회사 관리자는 자신의 회사로 복제
companyCode = userCompanyCode || "*";
}
if (isNaN(diagramId)) {
return res.status(400).json({

23
backend-node/src/controllers/flowController.ts
View File

@ -1,3 +1,4 @@
// @ts-nocheck
/**
* 플로우 관리 컨트롤러
*/
@ -34,6 +35,7 @@ export class FlowController {
const { name, description, tableName, dbSourceType, dbConnectionId } =
req.body;
const userId = (req as any).user?.userId || "system";
const userCompanyCode = (req as any).user?.companyCode;
console.log("🔍 createFlowDefinition called with:", {
name,
@ -41,6 +43,7 @@ export class FlowController {
tableName,
dbSourceType,
dbConnectionId,
userCompanyCode,
});
if (!name) {
@ -66,7 +69,8 @@ export class FlowController {
const flowDef = await this.flowDefinitionService.create(
{ name, description, tableName, dbSourceType, dbConnectionId },
userId
userId,
userCompanyCode
);
res.json({
@ -88,12 +92,25 @@ export class FlowController {
getFlowDefinitions = async (req: Request, res: Response): Promise<void> => {
try {
const { tableName, isActive } = req.query;
const user = (req as any).user;
const userCompanyCode = user?.companyCode;
console.log("🎯 getFlowDefinitions called:", {
userId: user?.userId,
userCompanyCode: userCompanyCode,
userType: user?.userType,
tableName,
isActive,
});
const flows = await this.flowDefinitionService.findAll(
tableName as string | undefined,
isActive !== undefined ? isActive === "true" : undefined
isActive !== undefined ? isActive === "true" : undefined,
userCompanyCode
);
console.log(`✅ Returning ${flows.length} flows to user ${user?.userId}`);
res.json({
success: true,
data: flows,
@ -312,6 +329,7 @@ export class FlowController {
fieldMappings,
integrationType,
integrationConfig,
displayConfig,
} = req.body;
const step = await this.flowStepService.update(id, {
@ -329,6 +347,7 @@ export class FlowController {
fieldMappings,
integrationType,
integrationConfig,
displayConfig,
});
if (!step) {

864
backend-node/src/controllers/roleController.ts Normal file
View File

@ -0,0 +1,864 @@
import { Response } from "express";
import { AuthenticatedRequest } from "../types/auth";
import { ApiResponse } from "../types/common";
import { RoleService } from "../services/roleService";
import { logger } from "../utils/logger";
import {
isSuperAdmin,
isCompanyAdmin,
canAccessCompanyData,
} from "../utils/permissionUtils";
/**
* 권한 그룹 목록 조회
* - 회사 관리자: 자기 회사 권한 그룹만 조회
* - 최고 관리자: 모든 회사 권한 그룹 조회 (companyCode 미지정 시 전체 조회)
*/
export const getRoleGroups = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const search = req.query.search as string | undefined;
const companyCode = req.query.companyCode as string | undefined;
// 최고 관리자가 아닌 경우 자기 회사만 조회
let targetCompanyCode: string | undefined;
if (isSuperAdmin(req.user)) {
// 최고 관리자: companyCode 파라미터가 있으면 해당 회사만, 없으면 전체 조회
targetCompanyCode = companyCode;
logger.info("권한 그룹 목록 조회 (최고 관리자)", {
userId: req.user?.userId,
targetCompanyCode: targetCompanyCode || "전체",
search,
});
} else {
// 일반 관리자: 자기 회사만 조회
targetCompanyCode = req.user?.companyCode;
if (!targetCompanyCode) {
res.status(400).json({
success: false,
message: "회사 코드가 필요합니다",
});
return;
}
logger.info("권한 그룹 목록 조회 (회사 관리자)", {
userId: req.user?.userId,
companyCode: targetCompanyCode,
search,
});
}
const roleGroups = await RoleService.getRoleGroups(
targetCompanyCode,
search
);
const response: ApiResponse<any[]> = {
success: true,
message: "권한 그룹 목록 조회 성공",
data: roleGroups,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 목록 조회 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 목록 조회 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 상세 조회
*/
export const getRoleGroupById = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const objid = parseInt(req.params.id, 10);
if (isNaN(objid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
const roleGroup = await RoleService.getRoleGroupById(objid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크: 슈퍼관리자 또는 해당 회사 관리자만 조회 가능
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한이 없습니다",
});
return;
}
const response: ApiResponse<any> = {
success: true,
message: "권한 그룹 상세 조회 성공",
data: roleGroup,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 상세 조회 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 상세 조회 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 생성
* - 회사 관리자: 자기 회사에만 권한 그룹 생성 가능
* - 최고 관리자: 모든 회사에 권한 그룹 생성 가능
*/
export const createRoleGroup = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const { authName, authCode, companyCode } = req.body;
if (!authName || !authCode || !companyCode) {
res.status(400).json({
success: false,
message: "필수 정보가 누락되었습니다 (authName, authCode, companyCode)",
});
return;
}
// 권한 체크: 회사 관리자 이상만 생성 가능
if (!isSuperAdmin(req.user) && !isCompanyAdmin(req.user)) {
res.status(403).json({
success: false,
message: "권한 그룹 생성 권한이 없습니다",
});
return;
}
// 회사 관리자는 자기 회사에만 권한 그룹 생성 가능
if (!isSuperAdmin(req.user) && req.user?.companyCode !== companyCode) {
res.status(403).json({
success: false,
message: "다른 회사의 권한 그룹을 생성할 수 없습니다",
});
return;
}
const roleGroup = await RoleService.createRoleGroup({
authName,
authCode,
companyCode,
writer: req.user?.userId || "SYSTEM",
});
const response: ApiResponse<any> = {
success: true,
message: "권한 그룹 생성 성공",
data: roleGroup,
};
res.status(201).json(response);
} catch (error) {
logger.error("권한 그룹 생성 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 생성 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 수정
*/
export const updateRoleGroup = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const objid = parseInt(req.params.id, 10);
const { authName, authCode, status } = req.body;
if (isNaN(objid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
// 기존 권한 그룹 조회
const existingRoleGroup = await RoleService.getRoleGroupById(objid);
if (!existingRoleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, existingRoleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한 그룹 수정 권한이 없습니다",
});
return;
}
const roleGroup = await RoleService.updateRoleGroup(objid, {
authName,
authCode,
status,
});
const response: ApiResponse<any> = {
success: true,
message: "권한 그룹 수정 성공",
data: roleGroup,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 수정 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 수정 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 삭제
*/
export const deleteRoleGroup = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const objid = parseInt(req.params.id, 10);
if (isNaN(objid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
// 기존 권한 그룹 조회
const existingRoleGroup = await RoleService.getRoleGroupById(objid);
if (!existingRoleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, existingRoleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한 그룹 삭제 권한이 없습니다",
});
return;
}
await RoleService.deleteRoleGroup(objid);
const response: ApiResponse<null> = {
success: true,
message: "권한 그룹 삭제 성공",
data: null,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 삭제 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 삭제 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 멤버 목록 조회
*/
export const getRoleMembers = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const masterObjid = parseInt(req.params.id, 10);
if (isNaN(masterObjid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
// 기존 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(masterObjid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한 그룹 멤버 조회 권한이 없습니다",
});
return;
}
const members = await RoleService.getRoleMembers(masterObjid);
const response: ApiResponse<any[]> = {
success: true,
message: "권한 그룹 멤버 조회 성공",
data: members,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 멤버 조회 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 멤버 조회 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 멤버 추가
*/
export const addRoleMembers = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const masterObjid = parseInt(req.params.id, 10);
const { userIds } = req.body;
if (isNaN(masterObjid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
if (!Array.isArray(userIds) || userIds.length === 0) {
res.status(400).json({
success: false,
message: "추가할 사용자 ID 목록이 필요합니다",
});
return;
}
// 기존 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(masterObjid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한 그룹 멤버 추가 권한이 없습니다",
});
return;
}
await RoleService.addRoleMembers(
masterObjid,
userIds,
req.user?.userId || "SYSTEM"
);
const response: ApiResponse<null> = {
success: true,
message: "권한 그룹 멤버 추가 성공",
data: null,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 멤버 추가 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 멤버 추가 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 멤버 일괄 업데이트
*/
export const updateRoleMembers = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const masterObjid = parseInt(req.params.id, 10);
const { userIds } = req.body;
if (isNaN(masterObjid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
if (!Array.isArray(userIds)) {
res.status(400).json({
success: false,
message: "사용자 ID 배열이 필요합니다",
});
return;
}
// 기존 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(masterObjid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한 그룹 멤버 수정 권한이 없습니다",
});
return;
}
// 기존 멤버 조회
const existingMembers = await RoleService.getRoleMembers(masterObjid);
const existingUserIds = existingMembers.map((m: any) => m.userId);
// 추가할 멤버 (새로 추가된 것들)
const toAdd = userIds.filter((id: string) => !existingUserIds.includes(id));
// 제거할 멤버 (기존에 있었는데 없어진 것들)
const toRemove = existingUserIds.filter(
(id: string) => !userIds.includes(id)
);
// 추가
if (toAdd.length > 0) {
await RoleService.addRoleMembers(
masterObjid,
toAdd,
req.user?.userId || "SYSTEM"
);
}
// 제거
if (toRemove.length > 0) {
await RoleService.removeRoleMembers(
masterObjid,
toRemove,
req.user?.userId || "SYSTEM"
);
}
logger.info("권한 그룹 멤버 일괄 업데이트 성공", {
masterObjid,
added: toAdd.length,
removed: toRemove.length,
});
const response: ApiResponse<null> = {
success: true,
message: "권한 그룹 멤버가 업데이트되었습니다",
data: null,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 멤버 업데이트 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 멤버 업데이트 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 권한 그룹 멤버 제거
*/
export const removeRoleMembers = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const masterObjid = parseInt(req.params.id, 10);
const { userIds } = req.body;
if (isNaN(masterObjid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
if (!Array.isArray(userIds) || userIds.length === 0) {
res.status(400).json({
success: false,
message: "제거할 사용자 ID 목록이 필요합니다",
});
return;
}
// 기존 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(masterObjid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "권한 그룹 멤버 제거 권한이 없습니다",
});
return;
}
await RoleService.removeRoleMembers(
masterObjid,
userIds,
req.user?.userId || "SYSTEM"
);
const response: ApiResponse<null> = {
success: true,
message: "권한 그룹 멤버 제거 성공",
data: null,
};
res.status(200).json(response);
} catch (error) {
logger.error("권한 그룹 멤버 제거 실패", { error });
res.status(500).json({
success: false,
message: "권한 그룹 멤버 제거 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 메뉴 권한 목록 조회
*/
export const getMenuPermissions = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const authObjid = parseInt(req.params.id, 10);
if (isNaN(authObjid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
// 기존 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(authObjid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "메뉴 권한 조회 권한이 없습니다",
});
return;
}
const permissions = await RoleService.getMenuPermissions(authObjid);
const response: ApiResponse<any[]> = {
success: true,
message: "메뉴 권한 조회 성공",
data: permissions,
};
res.status(200).json(response);
} catch (error) {
logger.error("메뉴 권한 조회 실패", { error });
res.status(500).json({
success: false,
message: "메뉴 권한 조회 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 메뉴 권한 설정
*/
export const setMenuPermissions = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const authObjid = parseInt(req.params.id, 10);
const { permissions } = req.body;
if (isNaN(authObjid)) {
res.status(400).json({
success: false,
message: "유효하지 않은 권한 그룹 ID입니다",
});
return;
}
if (!Array.isArray(permissions)) {
res.status(400).json({
success: false,
message: "권한 목록이 필요합니다",
});
return;
}
// 기존 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(authObjid);
if (!roleGroup) {
res.status(404).json({
success: false,
message: "권한 그룹을 찾을 수 없습니다",
});
return;
}
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
res.status(403).json({
success: false,
message: "메뉴 권한 설정 권한이 없습니다",
});
return;
}
await RoleService.setMenuPermissions(
authObjid,
permissions,
req.user?.userId || "SYSTEM"
);
const response: ApiResponse<null> = {
success: true,
message: "메뉴 권한 설정 성공",
data: null,
};
res.status(200).json(response);
} catch (error) {
logger.error("메뉴 권한 설정 실패", { error });
res.status(500).json({
success: false,
message: "메뉴 권한 설정 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 사용자가 속한 권한 그룹 목록 조회
*/
export const getUserRoleGroups = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const userId = req.params.userId || req.user?.userId;
const companyCode = req.user?.companyCode;
if (!userId || !companyCode) {
res.status(400).json({
success: false,
message: "사용자 ID 또는 회사 코드가 필요합니다",
});
return;
}
const roleGroups = await RoleService.getUserRoleGroups(userId, companyCode);
const response: ApiResponse<any[]> = {
success: true,
message: "사용자 권한 그룹 조회 성공",
data: roleGroups,
};
res.status(200).json(response);
} catch (error) {
logger.error("사용자 권한 그룹 조회 실패", { error });
res.status(500).json({
success: false,
message: "사용자 권한 그룹 조회 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
export const getAllMenus = async (
req: AuthenticatedRequest,
res: Response
): Promise<void> => {
try {
const requestedCompanyCode = req.query.companyCode as string | undefined;
logger.info("🔍 [getAllMenus] API 호출", {
userId: req.user?.userId,
userType: req.user?.userType,
userCompanyCode: req.user?.companyCode,
requestedCompanyCode,
});
// 권한 체크
if (!isSuperAdmin(req.user) && !isCompanyAdmin(req.user)) {
logger.warn("❌ [getAllMenus] 권한 없음", {
userId: req.user?.userId,
userType: req.user?.userType,
});
res.status(403).json({
success: false,
message: "관리자 권한이 필요합니다",
});
return;
}
// 회사 코드 결정: 최고 관리자는 요청한 코드 사용, 회사 관리자는 자기 회사만
let companyCode: string | undefined;
if (isSuperAdmin(req.user)) {
// 최고 관리자: 요청한 회사 코드 사용 (없으면 전체)
companyCode = requestedCompanyCode;
logger.info("✅ [getAllMenus] 최고 관리자 - 요청된 회사 코드 사용", {
companyCode: companyCode || "전체",
});
} else {
// 회사 관리자: 자기 회사 코드만 사용
companyCode = req.user?.companyCode;
logger.info("✅ [getAllMenus] 회사 관리자 - 자기 회사 코드 적용", {
companyCode,
});
}
logger.info("✅ [getAllMenus] 관리자 권한 확인 완료", {
isSuperAdmin: isSuperAdmin(req.user),
isCompanyAdmin: isCompanyAdmin(req.user),
finalCompanyCode: companyCode || "전체",
});
const menus = await RoleService.getAllMenus(companyCode);
logger.info("✅ [getAllMenus] API 응답 준비", {
menuCount: menus.length,
companyCode: companyCode || "전체",
});
const response: ApiResponse<any[]> = {
success: true,
message: "메뉴 목록 조회 성공",
data: menus,
};
res.status(200).json(response);
} catch (error) {
logger.error("❌ [getAllMenus] 메뉴 목록 조회 실패", { error });
res.status(500).json({
success: false,
message: "메뉴 목록 조회 중 오류가 발생했습니다",
error: error instanceof Error ? error.message : "Unknown error",
});
}
};

406
backend-node/src/controllers/tableHistoryController.ts Normal file
View File

@ -0,0 +1,406 @@
/**
* 테이블 이력 조회 컨트롤러
* 테이블 타입 관리의 {테이블명}_log 테이블과 연동
*/
import { Request, Response } from "express";
import { query } from "../database/db";
import { logger } from "../utils/logger";
export class TableHistoryController {
/**
* 특정 레코드의 변경 이력 조회
*/
static async getRecordHistory(req: Request, res: Response): Promise<void> {
try {
const { tableName, recordId } = req.params;
const { limit = 50, offset = 0, operationType, changedBy, startDate, endDate } = req.query;
logger.info(`📜 테이블 이력 조회 요청:`, {
tableName,
recordId,
limit,
offset,
});
// 로그 테이블명 생성
const logTableName = `${tableName}_log`;
// 동적 WHERE 조건 생성
const whereConditions: string[] = [`original_id = $1`];
const queryParams: any[] = [recordId];
let paramIndex = 2;
// 작업 유형 필터
if (operationType) {
whereConditions.push(`operation_type = $${paramIndex}`);
queryParams.push(operationType);
paramIndex++;
}
// 변경자 필터
if (changedBy) {
whereConditions.push(`changed_by ILIKE $${paramIndex}`);
queryParams.push(`%${changedBy}%`);
paramIndex++;
}
// 날짜 범위 필터
if (startDate) {
whereConditions.push(`changed_at >= $${paramIndex}`);
queryParams.push(startDate);
paramIndex++;
}
if (endDate) {
whereConditions.push(`changed_at <= $${paramIndex}`);
queryParams.push(endDate);
paramIndex++;
}
// LIMIT과 OFFSET 파라미터 추가
queryParams.push(limit);
const limitParam = `$${paramIndex}`;
paramIndex++;
queryParams.push(offset);
const offsetParam = `$${paramIndex}`;
const whereClause = whereConditions.join(" AND ");
// 이력 조회 쿼리
const historyQuery = `
SELECT
log_id,
operation_type,
original_id,
changed_column,
old_value,
new_value,
changed_by,
changed_at,
ip_address,
user_agent,
full_row_before,
full_row_after
FROM ${logTableName}
WHERE ${whereClause}
ORDER BY changed_at DESC
LIMIT ${limitParam} OFFSET ${offsetParam}
`;
// 전체 카운트 쿼리
const countQuery = `
SELECT COUNT(*) as total
FROM ${logTableName}
WHERE ${whereClause}
`;
const [historyRecords, countResult] = await Promise.all([
query<any>(historyQuery, queryParams),
query<any>(countQuery, queryParams.slice(0, -2)), // LIMIT, OFFSET 제외
]);
const total = parseInt(countResult[0]?.total || "0", 10);
logger.info(`✅ 이력 조회 완료: ${historyRecords.length}건 / 전체 ${total}건`);
res.json({
success: true,
data: {
records: historyRecords,
pagination: {
total,
limit: parseInt(limit as string, 10),
offset: parseInt(offset as string, 10),
hasMore: parseInt(offset as string, 10) + historyRecords.length < total,
},
},
message: "이력 조회 성공",
});
} catch (error: any) {
logger.error(`❌ 테이블 이력 조회 실패:`, error);
// 테이블이 존재하지 않는 경우
if (error.code === "42P01") {
res.status(404).json({
success: false,
message: "이력 테이블이 존재하지 않습니다. 테이블 타입 관리에서 이력 관리를 활성화해주세요.",
errorCode: "TABLE_NOT_FOUND",
});
return;
}
res.status(500).json({
success: false,
message: "이력 조회 중 오류가 발생했습니다.",
error: error.message,
});
}
}
/**
* 전체 테이블 이력 조회 (레코드 ID 없이)
*/
static async getAllTableHistory(req: Request, res: Response): Promise<void> {
try {
const { tableName } = req.params;
const { limit = 50, offset = 0, operationType, changedBy, startDate, endDate } = req.query;
logger.info(`📜 전체 테이블 이력 조회 요청:`, {
tableName,
limit,
offset,
});
// 로그 테이블명 생성
const logTableName = `${tableName}_log`;
// 동적 WHERE 조건 생성
const whereConditions: string[] = [];
const queryParams: any[] = [];
let paramIndex = 1;
// 작업 유형 필터
if (operationType) {
whereConditions.push(`operation_type = $${paramIndex}`);
queryParams.push(operationType);
paramIndex++;
}
// 변경자 필터
if (changedBy) {
whereConditions.push(`changed_by ILIKE $${paramIndex}`);
queryParams.push(`%${changedBy}%`);
paramIndex++;
}
// 날짜 범위 필터
if (startDate) {
whereConditions.push(`changed_at >= $${paramIndex}`);
queryParams.push(startDate);
paramIndex++;
}
if (endDate) {
whereConditions.push(`changed_at <= $${paramIndex}`);
queryParams.push(endDate);
paramIndex++;
}
// LIMIT과 OFFSET 파라미터 추가
queryParams.push(limit);
const limitParam = `$${paramIndex}`;
paramIndex++;
queryParams.push(offset);
const offsetParam = `$${paramIndex}`;
const whereClause = whereConditions.length > 0 ? `WHERE ${whereConditions.join(" AND ")}` : "";
// 이력 조회 쿼리
const historyQuery = `
SELECT
log_id,
operation_type,
original_id,
changed_column,
old_value,
new_value,
changed_by,
changed_at,
ip_address,
user_agent,
full_row_before,
full_row_after
FROM ${logTableName}
${whereClause}
ORDER BY changed_at DESC
LIMIT ${limitParam} OFFSET ${offsetParam}
`;
// 전체 카운트 쿼리
const countQuery = `
SELECT COUNT(*) as total
FROM ${logTableName}
${whereClause}
`;
const [historyRecords, countResult] = await Promise.all([
query<any>(historyQuery, queryParams),
query<any>(countQuery, queryParams.slice(0, -2)), // LIMIT, OFFSET 제외
]);
const total = parseInt(countResult[0]?.total || "0", 10);
res.json({
success: true,
data: {
records: historyRecords,
pagination: {
total,
limit: Number(limit),
offset: Number(offset),
hasMore: Number(offset) + Number(limit) < total,
},
},
message: "전체 테이블 이력 조회 성공",
});
} catch (error: any) {
logger.error(`❌ 전체 테이블 이력 조회 실패:`, error);
if (error.code === "42P01") {
res.status(404).json({
success: false,
message: "이력 테이블이 존재하지 않습니다.",
errorCode: "TABLE_NOT_FOUND",
});
return;
}
res.status(500).json({
success: false,
message: "이력 조회 중 오류가 발생했습니다.",
error: error.message,
});
}
}
/**
* 테이블 전체 이력 요약 조회
*/
static async getTableHistorySummary(req: Request, res: Response): Promise<void> {
try {
const { tableName } = req.params;
const logTableName = `${tableName}_log`;
const summaryQuery = `
SELECT
operation_type,
COUNT(*) as count,
COUNT(DISTINCT original_id) as affected_records,
COUNT(DISTINCT changed_by) as unique_users,
MIN(changed_at) as first_change,
MAX(changed_at) as last_change
FROM ${logTableName}
GROUP BY operation_type
`;
const summary = await query<any>(summaryQuery);
res.json({
success: true,
data: summary,
message: "이력 요약 조회 성공",
});
} catch (error: any) {
logger.error(`❌ 테이블 이력 요약 조회 실패:`, error);
if (error.code === "42P01") {
res.status(404).json({
success: false,
message: "이력 테이블이 존재하지 않습니다.",
errorCode: "TABLE_NOT_FOUND",
});
return;
}
res.status(500).json({
success: false,
message: "이력 요약 조회 중 오류가 발생했습니다.",
error: error.message,
});
}
}
/**
* 특정 레코드의 변경 타임라인 조회 (그룹화)
*/
static async getRecordTimeline(req: Request, res: Response): Promise<void> {
try {
const { tableName, recordId } = req.params;
const logTableName = `${tableName}_log`;
// 변경 이벤트별로 그룹화 (동일 시간대 변경을 하나의 이벤트로)
const timelineQuery = `
WITH grouped_changes AS (
SELECT
changed_at,
changed_by,
operation_type,
ip_address,
json_agg(
json_build_object(
'column', changed_column,
'oldValue', old_value,
'newValue', new_value
) ORDER BY changed_column
) as changes,
full_row_before,
full_row_after
FROM ${logTableName}
WHERE original_id = $1
GROUP BY changed_at, changed_by, operation_type, ip_address, full_row_before, full_row_after
ORDER BY changed_at DESC
LIMIT 100
)
SELECT * FROM grouped_changes
`;
const timeline = await query<any>(timelineQuery, [recordId]);
res.json({
success: true,
data: timeline,
message: "타임라인 조회 성공",
});
} catch (error: any) {
logger.error(`❌ 레코드 타임라인 조회 실패:`, error);
res.status(500).json({
success: false,
message: "타임라인 조회 중 오류가 발생했습니다.",
error: error.message,
});
}
}
/**
* 이력 테이블 존재 여부 확인
*/
static async checkHistoryTableExists(req: Request, res: Response): Promise<void> {
try {
const { tableName } = req.params;
const logTableName = `${tableName}_log`;
const checkQuery = `
SELECT EXISTS (
SELECT FROM information_schema.tables
WHERE table_schema = 'public'
AND table_name = $1
) as exists
`;
const result = await query<any>(checkQuery, [logTableName]);
const exists = result[0]?.exists || false;
res.json({
success: true,
data: {
tableName,
logTableName,
exists,
historyEnabled: exists,
},
message: exists ? "이력 테이블이 존재합니다." : "이력 테이블이 존재하지 않습니다.",
});
} catch (error: any) {
logger.error(`❌ 이력 테이블 존재 여부 확인 실패:`, error);
res.status(500).json({
success: false,
message: "이력 테이블 확인 중 오류가 발생했습니다.",
error: error.message,
});
}
}
}

88
backend-node/src/database/runMigration.ts
View File

@ -1,4 +1,6 @@
import { PostgreSQLService } from './PostgreSQLService';
import { PostgreSQLService } from "./PostgreSQLService";
import fs from "fs";
import path from "path";
/**
* 데이터베이스 마이그레이션 실행
@ -6,21 +8,21 @@ import { PostgreSQLService } from './PostgreSQLService';
*/
export async function runDashboardMigration() {
try {
console.log('🔄 대시보드 마이그레이션 시작...');
console.log("🔄 대시보드 마이그레이션 시작...");
// custom_title 컬럼 추가
await PostgreSQLService.query(`
ALTER TABLE dashboard_elements
ADD COLUMN IF NOT EXISTS custom_title VARCHAR(255)
`);
console.log('✅ custom_title 컬럼 추가 완료');
console.log("✅ custom_title 컬럼 추가 완료");
// show_header 컬럼 추가
await PostgreSQLService.query(`
ALTER TABLE dashboard_elements
ADD COLUMN IF NOT EXISTS show_header BOOLEAN DEFAULT true
`);
console.log('✅ show_header 컬럼 추가 완료');
console.log("✅ show_header 컬럼 추가 완료");
// 기존 데이터 업데이트
await PostgreSQLService.query(`
@ -28,15 +30,83 @@ export async function runDashboardMigration() {
SET show_header = true
WHERE show_header IS NULL
`);
console.log('✅ 기존 데이터 업데이트 완료');
console.log("✅ 기존 데이터 업데이트 완료");
console.log('✅ 대시보드 마이그레이션 완료!');
console.log("✅ 대시보드 마이그레이션 완료!");
} catch (error) {
console.error('❌ 대시보드 마이그레이션 실패:', error);
console.error("❌ 대시보드 마이그레이션 실패:", error);
// 이미 컬럼이 있는 경우는 무시
if (error instanceof Error && error.message.includes('already exists')) {
console.log('ℹ️ 컬럼이 이미 존재합니다.');
if (error instanceof Error && error.message.includes("already exists")) {
console.log("ℹ️ 컬럼이 이미 존재합니다.");
}
}
}
/**
* 테이블 이력 보기 버튼 액션 마이그레이션
*/
export async function runTableHistoryActionMigration() {
try {
console.log("🔄 테이블 이력 보기 액션 마이그레이션 시작...");
// SQL 파일 읽기
const sqlFilePath = path.join(
__dirname,
"../../db/migrations/024_add_table_history_view_action.sql"
);
if (!fs.existsSync(sqlFilePath)) {
console.log("⚠️ 마이그레이션 파일이 없습니다:", sqlFilePath);
return;
}
const sqlContent = fs.readFileSync(sqlFilePath, "utf8");
// SQL 실행
await PostgreSQLService.query(sqlContent);
console.log("✅ 테이블 이력 보기 액션 마이그레이션 완료!");
} catch (error) {
console.error("❌ 테이블 이력 보기 액션 마이그레이션 실패:", error);
// 이미 액션이 있는 경우는 무시
if (
error instanceof Error &&
error.message.includes("duplicate key value")
) {
console.log("ℹ️ 액션이 이미 존재합니다.");
}
}
}
/**
* DTG Management 테이블 이력 시스템 마이그레이션
*/
export async function runDtgManagementLogMigration() {
try {
console.log("🔄 DTG Management 이력 테이블 마이그레이션 시작...");
// SQL 파일 읽기
const sqlFilePath = path.join(
__dirname,
"../../db/migrations/025_create_dtg_management_log.sql"
);
if (!fs.existsSync(sqlFilePath)) {
console.log("⚠️ 마이그레이션 파일이 없습니다:", sqlFilePath);
return;
}
const sqlContent = fs.readFileSync(sqlFilePath, "utf8");
// SQL 실행
await PostgreSQLService.query(sqlContent);
console.log("✅ DTG Management 이력 테이블 마이그레이션 완료!");
} catch (error) {
console.error("❌ DTG Management 이력 테이블 마이그레이션 실패:", error);
// 이미 테이블이 있는 경우는 무시
if (error instanceof Error && error.message.includes("already exists")) {
console.log("ℹ️ 이력 테이블이 이미 존재합니다.");
}
}
}

430
backend-node/src/middleware/permissionMiddleware.ts Normal file
View File

@ -0,0 +1,430 @@
/**
* 권한 체크 미들웨어
* 3단계 권한 체계 적용: SUPER_ADMIN / COMPANY_ADMIN / USER
*/
import { Request, Response, NextFunction } from "express";
import { PersonBean } from "../types/auth";
import {
isSuperAdmin,
isCompanyAdmin,
isAdmin,
canExecuteDDL,
canManageUsers,
canManageCompanySettings,
canManageCompanies,
canAccessCompanyData,
PermissionLevel,
createPermissionError,
} from "../utils/permissionUtils";
import { logger } from "../utils/logger";
/**
* 인증된 요청 타입
*/
export interface AuthenticatedRequest extends Request {
user?: PersonBean;
}
/**
* 슈퍼관리자 권한 필수 미들웨어
*/
export const requireSuperAdmin = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
logger.warn("슈퍼관리자 권한 필요 - 인증되지 않은 사용자", {
ip: req.ip,
url: req.originalUrl,
});
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
if (!isSuperAdmin(req.user)) {
logger.warn("슈퍼관리자 권한 부족", {
userId: req.user.userId,
companyCode: req.user.companyCode,
userType: req.user.userType,
ip: req.ip,
url: req.originalUrl,
});
res.status(403).json(createPermissionError(PermissionLevel.SUPER_ADMIN));
return;
}
logger.info("슈퍼관리자 권한 확인 완료", {
userId: req.user.userId,
url: req.originalUrl,
});
next();
} catch (error) {
logger.error("슈퍼관리자 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};
/**
* 관리자 권한 필수 미들웨어 (슈퍼관리자 + 회사관리자)
*/
export const requireAdmin = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
if (!isAdmin(req.user)) {
logger.warn("관리자 권한 부족", {
userId: req.user.userId,
userType: req.user.userType,
companyCode: req.user.companyCode,
ip: req.ip,
url: req.originalUrl,
});
res
.status(403)
.json(createPermissionError(PermissionLevel.COMPANY_ADMIN));
return;
}
logger.info("관리자 권한 확인 완료", {
userId: req.user.userId,
userType: req.user.userType,
url: req.originalUrl,
});
next();
} catch (error) {
logger.error("관리자 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};
/**
* 회사 데이터 접근 권한 체크 미들웨어
* req.params.companyCode 또는 req.query.companyCode 확인
*/
export const requireCompanyAccess = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
const targetCompanyCode =
(req.params.companyCode as string) ||
(req.query.companyCode as string) ||
(req.body.companyCode as string);
if (!targetCompanyCode) {
res.status(400).json({
success: false,
error: {
code: "COMPANY_CODE_REQUIRED",
details: "회사 코드가 필요합니다.",
},
});
return;
}
if (!canAccessCompanyData(req.user, targetCompanyCode)) {
logger.warn("회사 데이터 접근 권한 없음", {
userId: req.user.userId,
userCompanyCode: req.user.companyCode,
targetCompanyCode,
ip: req.ip,
url: req.originalUrl,
});
res.status(403).json({
success: false,
error: {
code: "COMPANY_ACCESS_DENIED",
details: "해당 회사의 데이터에 접근할 권한이 없습니다.",
},
});
return;
}
next();
} catch (error) {
logger.error("회사 데이터 접근 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};
/**
* 사용자 관리 권한 체크 미들웨어
*/
export const requireUserManagement = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
const targetCompanyCode =
(req.params.companyCode as string) ||
(req.query.companyCode as string) ||
(req.body.companyCode as string);
if (!canManageUsers(req.user, targetCompanyCode)) {
logger.warn("사용자 관리 권한 없음", {
userId: req.user.userId,
userCompanyCode: req.user.companyCode,
targetCompanyCode,
ip: req.ip,
url: req.originalUrl,
});
res.status(403).json({
success: false,
error: {
code: "USER_MANAGEMENT_DENIED",
details: "사용자 관리 권한이 없습니다.",
},
});
return;
}
next();
} catch (error) {
logger.error("사용자 관리 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};
/**
* 회사 설정 변경 권한 체크 미들웨어
*/
export const requireCompanySettingsManagement = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
const targetCompanyCode =
(req.params.companyCode as string) ||
(req.query.companyCode as string) ||
(req.body.companyCode as string);
if (!canManageCompanySettings(req.user, targetCompanyCode)) {
logger.warn("회사 설정 변경 권한 없음", {
userId: req.user.userId,
userCompanyCode: req.user.companyCode,
targetCompanyCode,
ip: req.ip,
url: req.originalUrl,
});
res.status(403).json({
success: false,
error: {
code: "COMPANY_SETTINGS_DENIED",
details: "회사 설정 변경 권한이 없습니다.",
},
});
return;
}
next();
} catch (error) {
logger.error("회사 설정 변경 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};
/**
* 회사 생성/삭제 권한 체크 미들웨어 (슈퍼관리자 전용)
*/
export const requireCompanyManagement = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
if (!canManageCompanies(req.user)) {
logger.warn("회사 관리 권한 없음", {
userId: req.user.userId,
userType: req.user.userType,
companyCode: req.user.companyCode,
ip: req.ip,
url: req.originalUrl,
});
res.status(403).json({
success: false,
error: {
code: "COMPANY_MANAGEMENT_DENIED",
details: "회사 생성/삭제는 최고 관리자만 가능합니다.",
},
});
return;
}
next();
} catch (error) {
logger.error("회사 관리 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};
/**
* DDL 실행 권한 체크 미들웨어 (슈퍼관리자 전용)
*/
export const requireDDLPermission = (
req: AuthenticatedRequest,
res: Response,
next: NextFunction
): void => {
try {
if (!req.user) {
res.status(401).json({
success: false,
error: {
code: "AUTHENTICATION_REQUIRED",
details: "인증이 필요합니다.",
},
});
return;
}
if (!canExecuteDDL(req.user)) {
logger.warn("DDL 실행 권한 없음", {
userId: req.user.userId,
userType: req.user.userType,
companyCode: req.user.companyCode,
ip: req.ip,
url: req.originalUrl,
});
res.status(403).json({
success: false,
error: {
code: "DDL_EXECUTION_DENIED",
details:
"DDL 실행은 최고 관리자만 가능합니다. 데이터베이스 스키마 변경은 company_code가 '*'이고 user_type이 'SUPER_ADMIN'인 사용자만 수행할 수 있습니다.",
},
});
return;
}
logger.info("DDL 실행 권한 확인 완료", {
userId: req.user.userId,
url: req.originalUrl,
});
next();
} catch (error) {
logger.error("DDL 실행 권한 확인 중 오류:", error);
res.status(500).json({
success: false,
error: {
code: "AUTHORIZATION_ERROR",
details: "권한 확인 중 오류가 발생했습니다.",
},
});
}
};

3
backend-node/src/routes/adminRoutes.ts
View File

@ -45,7 +45,8 @@ router.get("/users", getUserList);
router.get("/users/:userId", getUserInfo); // 사용자 상세 조회
router.get("/users/:userId/history", getUserHistory); // 사용자 변경이력 조회
router.patch("/users/:userId/status", changeUserStatus); // 사용자 상태 변경
router.post("/users", saveUser); // 사용자 등록/수정
router.post("/users", saveUser); // 사용자 등록/수정 (기존)
router.put("/users/:userId", saveUser); // 사용자 수정 (REST API)
router.put("/profile", updateProfile); // 프로필 수정
router.post("/users/check-duplicate", checkDuplicateUserId); // 사용자 ID 중복 체크
router.post("/users/reset-password", resetUserPassword); // 사용자 비밀번호 초기화

39
backend-node/src/routes/dataflow/node-flows.ts
View File

@ -6,27 +6,39 @@ import { Router, Request, Response } from "express";
import { query, queryOne } from "../../database/db";
import { logger } from "../../utils/logger";
import { NodeFlowExecutionService } from "../../services/nodeFlowExecutionService";
import { AuthenticatedRequest } from "../../types/auth";
const router = Router();
/**
* 플로우 목록 조회
*/
router.get("/", async (req: Request, res: Response) => {
router.get("/", async (req: AuthenticatedRequest, res: Response) => {
try {
const flows = await query(
`
const userCompanyCode = req.user?.companyCode;
let sqlQuery = `
SELECT
flow_id as "flowId",
flow_name as "flowName",
flow_description as "flowDescription",
company_code as "companyCode",
created_at as "createdAt",
updated_at as "updatedAt"
FROM node_flows
ORDER BY updated_at DESC
`,
[]
);
`;
const params: any[] = [];
// 슈퍼 관리자가 아니면 회사별 필터링
if (userCompanyCode && userCompanyCode !== "*") {
sqlQuery += ` WHERE company_code = $1`;
params.push(userCompanyCode);
}
sqlQuery += ` ORDER BY updated_at DESC`;
const flows = await query(sqlQuery, params);
return res.json({
success: true,
@ -86,9 +98,10 @@ router.get("/:flowId", async (req: Request, res: Response) => {
/**
* 플로우 저장 (신규)
*/
router.post("/", async (req: Request, res: Response) => {
router.post("/", async (req: AuthenticatedRequest, res: Response) => {
try {
const { flowName, flowDescription, flowData } = req.body;
const userCompanyCode = req.user?.companyCode || "*";
if (!flowName || !flowData) {
return res.status(400).json({
@ -99,14 +112,16 @@ router.post("/", async (req: Request, res: Response) => {
const result = await queryOne(
`
INSERT INTO node_flows (flow_name, flow_description, flow_data)
VALUES ($1, $2, $3)
INSERT INTO node_flows (flow_name, flow_description, flow_data, company_code)
VALUES ($1, $2, $3, $4)
RETURNING flow_id as "flowId"
`,
[flowName, flowDescription || "", flowData]
[flowName, flowDescription || "", flowData, userCompanyCode]
);
logger.info(`플로우 저장 성공: ${result.flowId}`);
logger.info(
`플로우 저장 성공: ${result.flowId} (회사: ${userCompanyCode})`
);
return res.json({
success: true,

44
backend-node/src/routes/externalDbConnectionRoutes.ts
View File

@ -9,6 +9,7 @@ import {
} from "../types/externalDbTypes";
import { authenticateToken } from "../middleware/authMiddleware";
import { AuthenticatedRequest } from "../types/auth";
import logger from "../utils/logger";
const router = Router();
@ -53,10 +54,22 @@ router.get(
authenticateToken,
async (req: AuthenticatedRequest, res: Response) => {
try {
const userCompanyCode = req.user?.companyCode;
// 슈퍼 관리자는 쿼리 파라미터로 회사 지정 가능, 일반/회사 관리자는 자신의 회사만
let companyCodeFilter: string | undefined;
if (userCompanyCode === "*") {
// 슈퍼 관리자: 쿼리 파라미터 사용 또는 전체
companyCodeFilter = req.query.company_code as string;
} else {
// 회사 관리자/일반 사용자: 강제로 자신의 회사 코드 적용
companyCodeFilter = userCompanyCode;
}
const filter: ExternalDbConnectionFilter = {
db_type: req.query.db_type as string,
is_active: req.query.is_active as string,
company_code: req.query.company_code as string,
company_code: companyCodeFilter,
search: req.query.search as string,
};
@ -67,6 +80,13 @@ router.get(
}
});
logger.info("외부 DB 연결 목록 조회", {
userId: req.user?.userId,
userCompanyCode,
filterCompanyCode: companyCodeFilter,
filter,
});
const result = await ExternalDbConnectionService.getConnections(filter);
if (result.success) {
@ -470,12 +490,32 @@ router.get(
authenticateToken,
async (req: AuthenticatedRequest, res: Response) => {
try {
// 로그인한 사용자의 회사 코드 가져오기
const userCompanyCode = req.user?.companyCode;
// 슈퍼 관리자는 쿼리 파라미터로 지정한 회사 또는 전체(*) 조회 가능
// 일반 사용자/회사 관리자는 자신의 회사만 조회 가능
let companyCodeFilter: string;
if (userCompanyCode === "*") {
// 슈퍼 관리자
companyCodeFilter = (req.query.company_code as string) || "*";
} else {
// 회사 관리자 또는 일반 사용자
companyCodeFilter = userCompanyCode || "*";
}
// 활성 상태의 외부 커넥션 조회
const filter: ExternalDbConnectionFilter = {
is_active: "Y",
company_code: (req.query.company_code as string) || "*",
company_code: companyCodeFilter,
};
logger.info("제어관리용 활성 커넥션 조회", {
userId: req.user?.userId,
userCompanyCode,
filterCompanyCode: companyCodeFilter,
});
const externalConnections =
await ExternalDbConnectionService.getConnections(filter);

7
backend-node/src/routes/flowRoutes.ts
View File

@ -9,6 +9,9 @@ import { authenticateToken } from "../middleware/authMiddleware";
const router = Router();
const flowController = new FlowController();
// 모든 플로우 라우트에 인증 미들웨어 적용
router.use(authenticateToken);
// ==================== 플로우 정의 ====================
router.post("/definitions", flowController.createFlowDefinition);
router.get("/definitions", flowController.getFlowDefinitions);
@ -33,8 +36,8 @@ router.get("/:flowId/step/:stepId/list", flowController.getStepDataList);
router.get("/:flowId/steps/counts", flowController.getAllStepCounts);
// ==================== 데이터 이동 ====================
router.post("/move", authenticateToken, flowController.moveData);
router.post("/move-batch", authenticateToken, flowController.moveBatchData);
router.post("/move", flowController.moveData);
router.post("/move-batch", flowController.moveBatchData);
// ==================== 오딧 로그 ====================
router.get("/audit/:flowId/:recordId", flowController.getAuditLogs);

79
backend-node/src/routes/roleRoutes.ts Normal file
View File

@ -0,0 +1,79 @@
import { Router } from "express";
import {
getRoleGroups,
getRoleGroupById,
createRoleGroup,
updateRoleGroup,
deleteRoleGroup,
getRoleMembers,
addRoleMembers,
updateRoleMembers,
removeRoleMembers,
getMenuPermissions,
setMenuPermissions,
getUserRoleGroups,
getAllMenus,
} from "../controllers/roleController";
import { authenticateToken } from "../middleware/authMiddleware";
import { requireAdmin } from "../middleware/permissionMiddleware";
const router = Router();
// 모든 role 라우트에 인증 미들웨어 적용
router.use(authenticateToken);
/**
* 권한 그룹 CRUD
*/
// 권한 그룹 목록 조회 (회사별)
router.get("/", requireAdmin, getRoleGroups);
// 권한 그룹 상세 조회
router.get("/:id", requireAdmin, getRoleGroupById);
// 권한 그룹 생성 (회사 관리자 이상)
router.post("/", requireAdmin, createRoleGroup);
// 권한 그룹 수정 (회사 관리자 이상)
router.put("/:id", requireAdmin, updateRoleGroup);
// 권한 그룹 삭제 (회사 관리자 이상)
router.delete("/:id", requireAdmin, deleteRoleGroup);
/**
* 권한 그룹 멤버 관리
*/
// 권한 그룹 멤버 목록 조회
router.get("/:id/members", requireAdmin, getRoleMembers);
// 권한 그룹 멤버 일괄 업데이트 (전체 교체)
router.put("/:id/members", requireAdmin, updateRoleMembers);
// 권한 그룹 멤버 추가 (여러 명)
router.post("/:id/members", requireAdmin, addRoleMembers);
// 권한 그룹 멤버 제거 (여러 명)
router.delete("/:id/members", requireAdmin, removeRoleMembers);
/**
* 메뉴 권한 관리
*/
// 전체 메뉴 목록 조회 (권한 설정용)
router.get("/menus/all", requireAdmin, getAllMenus);
// 메뉴 권한 목록 조회
router.get("/:id/menu-permissions", requireAdmin, getMenuPermissions);
// 메뉴 권한 설정
router.put("/:id/menu-permissions", requireAdmin, setMenuPermissions);
/**
* 사용자 권한 그룹 조회
*/
// 현재 사용자가 속한 권한 그룹 조회
router.get("/user/my-groups", getUserRoleGroups);
// 특정 사용자가 속한 권한 그룹 조회
router.get("/user/:userId/groups", requireAdmin, getUserRoleGroups);
export default router;

35
backend-node/src/routes/tableHistoryRoutes.ts Normal file
View File

@ -0,0 +1,35 @@
/**
* 테이블 이력 조회 라우트
*/
import { Router } from "express";
import { authenticateToken } from "../middleware/authMiddleware";
import { TableHistoryController } from "../controllers/tableHistoryController";
const router = Router();
// 모든 라우트에 인증 미들웨어 적용
router.use(authenticateToken);
// 이력 테이블 존재 여부 확인
router.get("/:tableName/check", TableHistoryController.checkHistoryTableExists);
// 테이블 전체 이력 요약
router.get(
"/:tableName/summary",
TableHistoryController.getTableHistorySummary
);
// 전체 테이블 이력 조회 (레코드 ID 없이)
router.get("/:tableName/all", TableHistoryController.getAllTableHistory);
// 특정 레코드의 타임라인
router.get(
"/:tableName/:recordId/timeline",
TableHistoryController.getRecordTimeline
);
// 특정 레코드의 변경 이력 (상세)
router.get("/:tableName/:recordId", TableHistoryController.getRecordHistory);
export default router;

554
backend-node/src/services/RoleService_backup.ts Normal file
View File

@ -0,0 +1,554 @@
import { query } from "../database/db";
import { logger } from "../utils/logger";
/**
* 권한 그룹 인터페이스
*/
export interface RoleGroup {
objid: number;
authName: string;
authCode: string;
companyCode: string;
status: string;
writer: string;
regdate: Date;
memberCount?: number;
menuCount?: number;
memberNames?: string;
}
/**
* 권한 그룹 멤버 인터페이스
*/
export interface RoleMember {
objid: number;
masterObjid: number;
userId: string;
userName?: string;
deptName?: string;
positionName?: string;
writer: string;
regdate: Date;
}
/**
* 메뉴 권한 인터페이스
*/
export interface MenuPermission {
objid: number;
menuObjid: number;
authObjid: number;
menuName?: string;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
writer: string;
regdate: Date;
}
/**
* 권한 그룹 서비스
*/
export class RoleService {
/**
* 회사별 권한 그룹 목록 조회
* @param companyCode - 회사 코드 (undefined 시 전체 조회)
* @param search - 검색어
*/
static async getRoleGroups(
companyCode?: string,
search?: string
): Promise<RoleGroup[]> {
try {
let sql = `
SELECT
objid,
auth_name AS "authName",
auth_code AS "authCode",
company_code AS "companyCode",
status,
writer,
regdate,
(SELECT COUNT(*) FROM authority_sub_user asu WHERE asu.master_objid = am.objid) AS "memberCount",
(SELECT COUNT(*) FROM rel_menu_auth rma WHERE rma.auth_objid = am.objid) AS "menuCount",
(SELECT STRING_AGG(ui.user_name, ', ' ORDER BY ui.user_name)
FROM authority_sub_user asu
JOIN user_info ui ON asu.user_id = ui.user_id
WHERE asu.master_objid = am.objid) AS "memberNames"
FROM authority_master am
WHERE 1=1
`;
const params: any[] = [];
let paramIndex = 1;
// 회사 코드 필터 (companyCode가 undefined면 전체 조회)
if (companyCode) {
sql += ` AND company_code = $${paramIndex}`;
params.push(companyCode);
paramIndex++;
}
// 검색어 필터
if (search && search.trim()) {
sql += ` AND (auth_name ILIKE $${paramIndex} OR auth_code ILIKE $${paramIndex})`;
params.push(`%${search.trim()}%`);
paramIndex++;
}
sql += ` ORDER BY regdate DESC`;
logger.info("권한 그룹 조회 SQL", { sql, params });
const result = await query<RoleGroup>(sql, params);
logger.info("권한 그룹 조회 결과", { count: result.length });
return result;
} catch (error) {
logger.error("권한 그룹 목록 조회 실패", { error, companyCode, search });
throw error;
}
}
/**
* 권한 그룹 상세 조회
*/
static async getRoleGroupById(objid: number): Promise<RoleGroup | null> {
try {
const sql = `
SELECT
objid,
auth_name AS "authName",
auth_code AS "authCode",
company_code AS "companyCode",
status,
writer,
regdate
FROM authority_master
WHERE objid = $1
`;
const result = await query<RoleGroup>(sql, [objid]);
return result.length > 0 ? result[0] : null;
} catch (error) {
logger.error("권한 그룹 상세 조회 실패", { error, objid });
throw error;
}
}
/**
* 권한 그룹 생성
*/
static async createRoleGroup(data: {
authName: string;
authCode: string;
companyCode: string;
writer: string;
}): Promise<RoleGroup> {
try {
const sql = `
INSERT INTO authority_master (objid, auth_name, auth_code, company_code, status, writer, regdate)
VALUES (nextval('seq_authority_master'), $1, $2, $3, 'active', $4, NOW())
RETURNING objid, auth_name AS "authName", auth_code AS "authCode",
company_code AS "companyCode", status, writer, regdate
`;
const result = await query<RoleGroup>(sql, [
data.authName,
data.authCode,
data.companyCode,
data.writer,
]);
logger.info("권한 그룹 생성 성공", {
objid: result[0].objid,
authName: data.authName,
});
return result[0];
} catch (error) {
logger.error("권한 그룹 생성 실패", { error, data });
throw error;
}
}
/**
* 권한 그룹 수정
*/
static async updateRoleGroup(
objid: number,
data: {
authName?: string;
authCode?: string;
status?: string;
}
): Promise<RoleGroup> {
try {
const updates: string[] = [];
const params: any[] = [];
let paramIndex = 1;
if (data.authName !== undefined) {
updates.push(`auth_name = $${paramIndex}`);
params.push(data.authName);
paramIndex++;
}
if (data.authCode !== undefined) {
updates.push(`auth_code = $${paramIndex}`);
params.push(data.authCode);
paramIndex++;
}
if (data.status !== undefined) {
updates.push(`status = $${paramIndex}`);
params.push(data.status);
paramIndex++;
}
if (updates.length === 0) {
throw new Error("수정할 데이터가 없습니다");
}
params.push(objid);
const sql = `
UPDATE authority_master
SET ${updates.join(", ")}
WHERE objid = $${paramIndex}
RETURNING objid, auth_name AS "authName", auth_code AS "authCode",
company_code AS "companyCode", status, writer, regdate
`;
const result = await query<RoleGroup>(sql, params);
if (result.length === 0) {
throw new Error("권한 그룹을 찾을 수 없습니다");
}
logger.info("권한 그룹 수정 성공", { objid, updates });
return result[0];
} catch (error) {
logger.error("권한 그룹 수정 실패", { error, objid, data });
throw error;
}
}
/**
* 권한 그룹 삭제
*/
static async deleteRoleGroup(objid: number): Promise<void> {
try {
// CASCADE로 연결된 데이터도 함께 삭제됨 (authority_sub_user, rel_menu_auth)
await query("DELETE FROM authority_master WHERE objid = $1", [objid]);
logger.info("권한 그룹 삭제 성공", { objid });
} catch (error) {
logger.error("권한 그룹 삭제 실패", { error, objid });
throw error;
}
}
/**
* 권한 그룹 멤버 목록 조회
*/
static async getRoleMembers(masterObjid: number): Promise<RoleMember[]> {
try {
const sql = `
SELECT
asu.objid,
asu.master_objid AS "masterObjid",
asu.user_id AS "userId",
ui.user_name AS "userName",
ui.dept_name AS "deptName",
ui.position_name AS "positionName",
asu.writer,
asu.regdate
FROM authority_sub_user asu
JOIN user_info ui ON asu.user_id = ui.user_id
WHERE asu.master_objid = $1
ORDER BY ui.user_name
`;
const result = await query<RoleMember>(sql, [masterObjid]);
return result;
} catch (error) {
logger.error("권한 그룹 멤버 조회 실패", { error, masterObjid });
throw error;
}
}
/**
* 권한 그룹 멤버 추가 (여러 명)
*/
static async addRoleMembers(
masterObjid: number,
userIds: string[],
writer: string
): Promise<void> {
try {
// 이미 존재하는 멤버 제외
const existingSql = `
SELECT user_id
FROM authority_sub_user
WHERE master_objid = $1 AND user_id = ANY($2)
`;
const existing = await query<{ user_id: string }>(existingSql, [
masterObjid,
userIds,
]);
const existingIds = new Set(
existing.map((row: { user_id: string }) => row.user_id)
);
const newUserIds = userIds.filter((userId) => !existingIds.has(userId));
if (newUserIds.length === 0) {
logger.info("추가할 신규 멤버가 없습니다", { masterObjid, userIds });
return;
}
// 배치 삽입
const values = newUserIds
.map(
(_, index) =>
`(nextval('seq_authority_sub_user'), $1, $${index + 2}, $${newUserIds.length + 2}, NOW())`
)
.join(", ");
const sql = `
INSERT INTO authority_sub_user (objid, master_objid, user_id, writer, regdate)
VALUES ${values}
`;
await query(sql, [masterObjid, ...newUserIds, writer]);
// 히스토리 기록
for (const userId of newUserIds) {
await this.insertAuthorityHistory(masterObjid, userId, "ADD", writer);
}
logger.info("권한 그룹 멤버 추가 성공", {
masterObjid,
count: newUserIds.length,
});
} catch (error) {
logger.error("권한 그룹 멤버 추가 실패", { error, masterObjid, userIds });
throw error;
}
}
/**
* 권한 그룹 멤버 제거 (여러 명)
*/
static async removeRoleMembers(
masterObjid: number,
userIds: string[],
writer: string
): Promise<void> {
try {
await query(
"DELETE FROM authority_sub_user WHERE master_objid = $1 AND user_id = ANY($2)",
[masterObjid, userIds]
);
// 히스토리 기록
for (const userId of userIds) {
await this.insertAuthorityHistory(
masterObjid,
userId,
"REMOVE",
writer
);
}
logger.info("권한 그룹 멤버 제거 성공", {
masterObjid,
count: userIds.length,
});
} catch (error) {
logger.error("권한 그룹 멤버 제거 실패", { error, masterObjid, userIds });
throw error;
}
}
/**
* 권한 히스토리 기록
*/
private static async insertAuthorityHistory(
masterObjid: number,
userId: string,
historyType: "ADD" | "REMOVE",
writer: string
): Promise<void> {
try {
const sql = `
INSERT INTO authority_master_history
(objid, parent_objid, parent_name, parent_code, user_id, active, history_type, writer, reg_date)
SELECT
nextval('seq_authority_master'),
$1,
am.auth_name,
am.auth_code,
$2,
am.status,
$3,
$4,
NOW()
FROM authority_master am
WHERE am.objid = $1
`;
await query(sql, [masterObjid, userId, historyType, writer]);
} catch (error) {
logger.error("권한 히스토리 기록 실패", {
error,
masterObjid,
userId,
historyType,
});
// 히스토리 기록 실패는 메인 작업을 중단하지 않음
}
}
/**
* 메뉴 권한 목록 조회
*/
static async getMenuPermissions(
authObjid: number
): Promise<MenuPermission[]> {
try {
const sql = `
SELECT
rma.objid,
rma.menu_objid AS "menuObjid",
rma.auth_objid AS "authObjid",
mi.menu_name_kor AS "menuName",
mi.menu_code AS "menuCode",
mi.menu_url AS "menuUrl",
rma.create_yn AS "createYn",
rma.read_yn AS "readYn",
rma.update_yn AS "updateYn",
rma.delete_yn AS "deleteYn",
rma.execute_yn AS "executeYn",
rma.export_yn AS "exportYn",
rma.writer,
rma.regdate
FROM rel_menu_auth rma
LEFT JOIN menu_info mi ON rma.menu_objid = mi.objid
WHERE rma.auth_objid = $1
ORDER BY mi.menu_name_kor
`;
const result = await query<MenuPermission>(sql, [authObjid]);
return result;
} catch (error) {
logger.error("메뉴 권한 조회 실패", { error, authObjid });
throw error;
}
}
/**
* 메뉴 권한 설정 (여러 메뉴)
*/
static async setMenuPermissions(
authObjid: number,
permissions: Array<{
menuObjid: number;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
}>,
writer: string
): Promise<void> {
try {
// 기존 권한 삭제
await query("DELETE FROM rel_menu_auth WHERE auth_objid = $1", [
authObjid,
]);
// 새로운 권한 삽입
if (permissions.length > 0) {
const values = permissions
.map(
(_, index) =>
`(nextval('seq_rel_menu_auth'), $${index * 5 + 2}, $1, $${index * 5 + 3}, $${index * 5 + 4}, $${index * 5 + 5}, $${index * 5 + 6}, $${permissions.length * 5 + 2}, NOW())`
)
.join(", ");
const params = permissions.flatMap((p) => [
p.menuObjid,
p.createYn,
p.readYn,
p.updateYn,
p.deleteYn,
]);
const sql = `
INSERT INTO rel_menu_auth (objid, menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn, writer, regdate)
VALUES ${values}
`;
await query(sql, [authObjid, ...params, writer]);
}
logger.info("메뉴 권한 설정 성공", {
authObjid,
count: permissions.length,
});
} catch (error) {
logger.error("메뉴 권한 설정 실패", { error, authObjid, permissions });
throw error;
}
}
/**
* 사용자가 속한 권한 그룹 목록 조회
*/
static async getUserRoleGroups(
userId: string,
companyCode: string
): Promise<RoleGroup[]> {
try {
const sql = `
SELECT
am.objid,
am.auth_name AS "authName",
am.auth_code AS "authCode",
am.company_code AS "companyCode",
am.status,
am.writer,
am.regdate
FROM authority_master am
JOIN authority_sub_user asu ON am.objid = asu.master_objid
WHERE asu.user_id = $1
AND am.company_code = $2
AND am.status = 'active'
ORDER BY am.auth_name
`;
const result = await query<RoleGroup>(sql, [userId, companyCode]);
return result;
} catch (error) {
logger.error("사용자 권한 그룹 조회 실패", {
error,
userId,
companyCode,
});
throw error;
}
}
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
static async getAllMenus(companyCode?: string): Promise<any[]> {
try {
logger.info("🔍 전체 메뉴 목록 조회 시작", { companyCode });
let whereConditions: string[] = ["status = 'active'"];
const params: any[] = [];
let paramIndex = 1;
// 회사 코드 필터 (선택적)

66
backend-node/src/services/RoleService_getAllMenus_fixed.ts Normal file
View File

@ -0,0 +1,66 @@
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
static async getAllMenus(companyCode?: string): Promise<any[]> {
try {
logger.info("🔍 전체 메뉴 목록 조회 시작", { companyCode });
let whereConditions: string[] = ["status = 'active'"];
const params: any[] = [];
let paramIndex = 1;
// 회사 코드 필터 (선택적)
// 공통 메뉴(*)와 특정 회사 메뉴를 모두 조회
if (companyCode) {
whereConditions.push(`(company_code = \$${paramIndex} OR company_code = '*')`);
params.push(companyCode);
paramIndex++;
logger.info("📋 회사 코드 필터 적용", { companyCode });
} else {
logger.info("📋 회사 코드 필터 없음 (전체 조회)");
}
const whereClause = whereConditions.join(" AND ");
const sql = `
SELECT
objid,
menu_name_kor AS "menuName",
menu_name_eng AS "menuNameEng",
menu_code AS "menuCode",
menu_url AS "menuUrl",
menu_type AS "menuType",
parent_obj_id AS "parentObjid",
seq AS "sortOrder",
company_code AS "companyCode"
FROM menu_info
WHERE ${whereClause}
ORDER BY seq, menu_name_kor
`;
logger.info("🔍 SQL 쿼리 실행", {
whereClause,
params,
sql: sql.substring(0, 200) + "...",
});
const result = await query<any>(sql, params);
logger.info("✅ 메뉴 목록 조회 성공", {
count: result.length,
companyCode,
menus: result.map((m) => ({
objid: m.objid,
name: m.menuName,
code: m.menuCode,
companyCode: m.companyCode,
})),
});
return result;
} catch (error) {
logger.error("❌ 메뉴 목록 조회 실패", { error, companyCode });
throw error;
}
}
}

231
backend-node/src/services/adminService.ts
View File

@ -3,18 +3,128 @@ import { query, queryOne } from "../database/db";
export class AdminService {
/**
* 관리자 메뉴 목록 조회
* 관리자 메뉴 목록 조회 (회사별 필터링 적용)
*/
static async getAdminMenuList(paramMap: any): Promise<any[]> {
try {
logger.info("AdminService.getAdminMenuList 시작 - 파라미터:", paramMap);
const { userLang = "ko", menuType } = paramMap;
const {
userId,
userCompanyCode,
userType,
userLang = "ko",
menuType,
} = paramMap;
// menuType에 따른 WHERE 조건 생성
const menuTypeCondition =
menuType !== undefined ? `MENU_TYPE = ${parseInt(menuType)}` : "1 = 1";
// 1. 권한 그룹 기반 필터링 (좌측 사이드바인 경우만)
let authFilter = "";
let queryParams: any[] = [userLang];
let paramIndex = 2;
if (menuType !== undefined && userType !== "SUPER_ADMIN") {
// 좌측 사이드바 + SUPER_ADMIN이 아닌 경우
const userRoleGroups = await query<any>(
`
SELECT DISTINCT am.objid AS role_objid, am.auth_name
FROM authority_master am
JOIN authority_sub_user asu ON am.objid = asu.master_objid
WHERE asu.user_id = $1
AND am.status = 'active'
`,
[userId]
);
logger.info(
`✅ 사용자 ${userId}가 속한 권한 그룹: ${userRoleGroups.length}개`,
{
roleGroups: userRoleGroups.map((rg: any) => rg.auth_name),
}
);
if (userType === "COMPANY_ADMIN") {
// 회사 관리자: 자기 회사 메뉴는 모두, 공통 메뉴는 권한 있는 것만
if (userRoleGroups.length > 0) {
const roleObjids = userRoleGroups.map((rg: any) => rg.role_objid);
// 루트 메뉴: 회사 코드만 체크 (권한 체크 X)
// 하위 메뉴: 회사 메뉴는 모두, 공통 메뉴는 권한 체크
authFilter = `AND MENU.COMPANY_CODE IN ($${paramIndex}, '*')`;
queryParams.push(userCompanyCode);
queryParams.push(roleObjids);
paramIndex += 2;
logger.info(
`✅ 회사 관리자: 회사 ${userCompanyCode} 메뉴 전체 + 권한 있는 공통 메뉴`
);
} else {
// 권한 그룹이 없는 회사 관리자: 자기 회사 메뉴만
authFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`;
queryParams.push(userCompanyCode);
paramIndex++;
logger.info(
`✅ 회사 관리자 (권한 그룹 없음): 회사 ${userCompanyCode} 메뉴만`
);
}
} else {
// 일반 사용자: 권한 그룹 필수
if (userRoleGroups.length > 0) {
const roleObjids = userRoleGroups.map((rg: any) => rg.role_objid);
authFilter = `
AND EXISTS (
SELECT 1
FROM rel_menu_auth rma
WHERE rma.menu_objid = MENU.OBJID
AND rma.auth_objid = ANY($${paramIndex})
AND rma.read_yn = 'Y'
)
`;
queryParams.push(roleObjids);
paramIndex++;
logger.info(
`✅ 일반 사용자: 권한 있는 메뉴만 (${roleObjids.length}개 그룹)`
);
} else {
// 권한 그룹이 없는 일반 사용자: 메뉴 없음
logger.warn(
`⚠️ 사용자 ${userId}는 권한 그룹이 없어 메뉴가 표시되지 않습니다.`
);
return [];
}
}
} else if (menuType !== undefined && userType === "SUPER_ADMIN") {
// 좌측 사이드바 + SUPER_ADMIN: 권한 그룹 체크 없이 모든 공통 메뉴 표시
logger.info(`✅ 최고 관리자는 권한 그룹 체크 없이 모든 공통 메뉴 표시`);
}
// 2. 회사별 필터링 조건 생성
let companyFilter = "";
// SUPER_ADMIN과 COMPANY_ADMIN 구분
if (userType === "SUPER_ADMIN" && userCompanyCode === "*") {
// SUPER_ADMIN
if (menuType === undefined) {
// 메뉴 관리 화면: 모든 메뉴
logger.info("✅ 메뉴 관리 화면 (SUPER_ADMIN): 모든 메뉴 표시");
companyFilter = "";
} else {
// 좌측 사이드바: 공통 메뉴만 (company_code = '*')
logger.info("✅ 좌측 사이드바 (SUPER_ADMIN): 공통 메뉴만 표시");
companyFilter = `AND MENU.COMPANY_CODE = '*'`;
}
} else if (menuType === undefined) {
// 메뉴 관리 화면: 자기 회사 + 공통 메뉴
logger.info(
`✅ 메뉴 관리 화면: 회사 ${userCompanyCode} + 공통 메뉴 표시`
);
companyFilter = `AND (MENU.COMPANY_CODE = $${paramIndex} OR MENU.COMPANY_CODE = '*')`;
queryParams.push(userCompanyCode);
paramIndex++;
}
// menuType이 정의된 경우 (좌측 사이드바)는 authFilter에서 이미 회사 필터링 포함
// 기존 Java의 selectAdminMenuList 쿼리를 Raw Query로 포팅
// WITH RECURSIVE 쿼리 구현
const menuList = await query<any>(
@ -96,6 +206,9 @@ export class AdminService {
)
FROM MENU_INFO MENU
WHERE ${menuTypeCondition}
AND STATUS = 'active'
${companyFilter}
${authFilter}
AND NOT EXISTS (
SELECT 1 FROM MENU_INFO parent_menu
WHERE parent_menu.OBJID = MENU.PARENT_OBJ_ID
@ -160,6 +273,20 @@ export class AdminService {
FROM MENU_INFO MENU_SUB
JOIN V_MENU ON MENU_SUB.PARENT_OBJ_ID = V_MENU.OBJID
WHERE MENU_SUB.OBJID != ANY(V_MENU.PATH)
AND MENU_SUB.STATUS = 'active'
AND (
MENU_SUB.COMPANY_CODE = $2
OR (
MENU_SUB.COMPANY_CODE = '*'
AND EXISTS (
SELECT 1
FROM rel_menu_auth rma
WHERE rma.menu_objid = MENU_SUB.OBJID
AND rma.auth_objid = ANY($3)
AND rma.read_yn = 'Y'
)
)
)
)
SELECT
LEVEL AS LEV,
@ -190,14 +317,18 @@ export class AdminService {
WHERE 1 = 1
ORDER BY PATH, SEQ
`,
[userLang]
queryParams
);
logger.info(
`메뉴 목록 조회 결과: ${menuList.length}개 (menuType: ${menuType || "전체"})`
`관리자 메뉴 목록 조회 결과: ${menuList.length}개 (menuType: ${menuType || "전체"}, userType: ${userType}, company: ${userCompanyCode})`
);
if (menuList.length > 0) {
logger.info("첫 번째 메뉴:", menuList[0]);
logger.info("첫 번째 메뉴:", {
objid: menuList[0].objid,
name: menuList[0].menu_name_kor,
companyCode: menuList[0].company_code,
});
}
return menuList;
@ -208,15 +339,81 @@ export class AdminService {
}
/**
* 사용자 메뉴 목록 조회
* 사용자 메뉴 목록 조회 (권한 그룹 기반 필터링)
*/
static async getUserMenuList(paramMap: any): Promise<any[]> {
try {
logger.info("AdminService.getUserMenuList 시작 - 파라미터:", paramMap);
const { userLang = "ko" } = paramMap;
const { userId, userCompanyCode, userType, userLang = "ko" } = paramMap;
// 기존 Java의 selectUserMenuList 쿼리를 Raw Query로 포팅
// 1. 사용자가 속한 권한 그룹 조회
const userRoleGroups = await query<any>(
`
SELECT DISTINCT am.objid AS role_objid, am.auth_name
FROM authority_master am
JOIN authority_sub_user asu ON am.objid = asu.master_objid
WHERE asu.user_id = $1
AND am.status = 'active'
`,
[userId]
);
logger.info(
`✅ 사용자 ${userId}가 속한 권한 그룹: ${userRoleGroups.length}개`,
{
roleGroups: userRoleGroups.map((rg: any) => rg.auth_name),
}
);
// 2. 권한 그룹 기반 메뉴 필터 조건 생성
let authFilter = "";
let queryParams: any[] = [userLang];
let paramIndex = 2;
if (userRoleGroups.length > 0) {
// 권한 그룹이 있는 경우: read_yn = 'Y'인 메뉴만 필터링
const roleObjids = userRoleGroups.map((rg: any) => rg.role_objid);
authFilter = `
AND EXISTS (
SELECT 1
FROM rel_menu_auth rma
WHERE rma.menu_objid = MENU.OBJID
AND rma.auth_objid = ANY($${paramIndex})
AND rma.read_yn = 'Y'
)
`;
queryParams.push(roleObjids);
paramIndex++;
logger.info(
`✅ 권한 그룹 기반 메뉴 필터링 적용: ${roleObjids.length}개 그룹`
);
} else {
// 권한 그룹이 없는 경우: 메뉴 없음
logger.warn(
`⚠️ 사용자 ${userId}는 권한 그룹이 없어 메뉴가 표시되지 않습니다.`
);
return [];
}
// 3. 회사별 필터링 조건 생성
let companyFilter = "";
if (userType === "SUPER_ADMIN" && userCompanyCode === "*") {
// SUPER_ADMIN: 공통 메뉴만 (company_code = '*')
logger.info("✅ 좌측 사이드바 (SUPER_ADMIN): 공통 메뉴만 표시");
companyFilter = `AND MENU.COMPANY_CODE = '*'`;
} else {
// COMPANY_ADMIN/USER: 자기 회사 메뉴만
logger.info(
`✅ 좌측 사이드바 (COMPANY_ADMIN): 회사 ${userCompanyCode} 메뉴만 표시`
);
companyFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`;
queryParams.push(userCompanyCode);
paramIndex++;
}
// 기존 Java의 selectUserMenuList 쿼리를 Raw Query로 포팅 + 회사별 필터링
const menuList = await query<any>(
`
WITH RECURSIVE v_menu(
@ -257,6 +454,9 @@ export class AdminService {
FROM MENU_INFO MENU
WHERE PARENT_OBJ_ID = 0
AND MENU_TYPE = 1
AND STATUS = 'active'
${companyFilter}
${authFilter}
UNION ALL
@ -279,7 +479,8 @@ export class AdminService {
MENU_SUB.OBJID = ANY(PATH)
FROM MENU_INFO MENU_SUB
JOIN V_MENU ON MENU_SUB.PARENT_OBJ_ID = V_MENU.OBJID
WHERE 1 = 1
WHERE MENU_SUB.STATUS = 'active'
${authFilter.replace(/MENU\.OBJID/g, "MENU_SUB.OBJID")}
)
SELECT
LEVEL AS LEV,
@ -320,12 +521,18 @@ export class AdminService {
WHERE 1 = 1
ORDER BY PATH, SEQ
`,
[userLang]
queryParams
);
logger.info(`사용자 메뉴 목록 조회 결과: ${menuList.length}개`);
logger.info(
`사용자 메뉴 목록 조회 결과: ${menuList.length}개 (userType: ${userType}, company: ${userCompanyCode})`
);
if (menuList.length > 0) {
logger.info("첫 번째 메뉴:", menuList[0]);
logger.info("첫 번째 메뉴:", {
objid: menuList[0].objid,
name: menuList[0].menu_name_kor,
companyCode: menuList[0].company_code,
});
}
return menuList;

13
backend-node/src/services/authService.ts
View File

@ -185,6 +185,9 @@ export class AuthService {
//});
// PersonBean 형태로 변환 (null 값을 undefined로 변환)
const companyCode = userInfo.company_code || "ILSHIN";
const userType = userInfo.user_type || "USER";
const personBean: PersonBean = {
userId: userInfo.user_id,
userName: userInfo.user_name || "",
@ -197,15 +200,21 @@ export class AuthService {
email: userInfo.email || undefined,
tel: userInfo.tel || undefined,
cellPhone: userInfo.cell_phone || undefined,
userType: userInfo.user_type || undefined,
userType: userType,
userTypeName: userInfo.user_type_name || undefined,
partnerObjid: userInfo.partner_objid || undefined,
authName: authNames || undefined,
companyCode: userInfo.company_code || "ILSHIN",
companyCode: companyCode,
photo: userInfo.photo
? `data:image/jpeg;base64,${Buffer.from(userInfo.photo).toString("base64")}`
: undefined,
locale: userInfo.locale || "KR",
// 권한 레벨 정보 추가 (3단계 체계)
isSuperAdmin: companyCode === "*" && userType === "SUPER_ADMIN",
isCompanyAdmin: userType === "COMPANY_ADMIN" && companyCode !== "*",
isAdmin:
(companyCode === "*" && userType === "SUPER_ADMIN") ||
userType === "COMPANY_ADMIN",
};
//console.log("📦 AuthService - 최종 PersonBean:", {

1
backend-node/src/services/flowConnectionService.ts
View File

@ -1,3 +1,4 @@
// @ts-nocheck
/**
* 플로우 연결 서비스
*/

36
backend-node/src/services/flowDefinitionService.ts
View File

@ -1,3 +1,4 @@
// @ts-nocheck
/**
* 플로우 정의 서비스
*/
@ -15,20 +16,24 @@ export class FlowDefinitionService {
*/
async create(
request: CreateFlowDefinitionRequest,
userId: string
userId: string,
userCompanyCode?: string
): Promise<FlowDefinition> {
const companyCode = request.companyCode || userCompanyCode || "*";
console.log("🔥 flowDefinitionService.create called with:", {
name: request.name,
description: request.description,
tableName: request.tableName,
dbSourceType: request.dbSourceType,
dbConnectionId: request.dbConnectionId,
companyCode,
userId,
});
const query = `
INSERT INTO flow_definition (name, description, table_name, db_source_type, db_connection_id, created_by)
VALUES ($1, $2, $3, $4, $5, $6)
INSERT INTO flow_definition (name, description, table_name, db_source_type, db_connection_id, company_code, created_by)
VALUES ($1, $2, $3, $4, $5, $6, $7)
RETURNING *
`;
@ -38,6 +43,7 @@ export class FlowDefinitionService {
request.tableName || null,
request.dbSourceType || "internal",
request.dbConnectionId || null,
companyCode,
userId,
];
@ -53,12 +59,29 @@ export class FlowDefinitionService {
*/
async findAll(
tableName?: string,
isActive?: boolean
isActive?: boolean,
companyCode?: string
): Promise<FlowDefinition[]> {
console.log("🔍 flowDefinitionService.findAll called with:", {
tableName,
isActive,
companyCode,
});
let query = "SELECT * FROM flow_definition WHERE 1=1";
const params: any[] = [];
let paramIndex = 1;
// 회사 코드 필터링
if (companyCode && companyCode !== "*") {
query += ` AND company_code = $${paramIndex}`;
params.push(companyCode);
paramIndex++;
console.log(`✅ Company filter applied: company_code = ${companyCode}`);
} else {
console.log(`⚠️ No company filter (companyCode: ${companyCode})`);
}
if (tableName) {
query += ` AND table_name = $${paramIndex}`;
params.push(tableName);
@ -73,7 +96,11 @@ export class FlowDefinitionService {
query += " ORDER BY created_at DESC";
console.log("📋 Final query:", query);
console.log("📋 Query params:", params);
const result = await db.query(query, params);
console.log(`📊 Found ${result.length} flow definitions`);
return result.map(this.mapToFlowDefinition);
}
@ -179,6 +206,7 @@ export class FlowDefinitionService {
tableName: row.table_name,
dbSourceType: row.db_source_type || "internal",
dbConnectionId: row.db_connection_id,
companyCode: row.company_code || "*",
isActive: row.is_active,
createdBy: row.created_by,
createdAt: row.created_at,

1
backend-node/src/services/flowExecutionService.ts
View File

@ -1,3 +1,4 @@
// @ts-nocheck
/**
* 플로우 실행 서비스
* 단계별 데이터 카운트 및 리스트 조회

28
backend-node/src/services/flowStepService.ts
View File

@ -1,3 +1,4 @@
// @ts-nocheck
/**
* 플로우 단계 서비스
*/
@ -26,9 +27,9 @@ export class FlowStepService {
flow_definition_id, step_name, step_order, table_name, condition_json,
color, position_x, position_y, move_type, status_column, status_value,
target_table, field_mappings, required_fields,
integration_type, integration_config
integration_type, integration_config, display_config
)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)
RETURNING *
`;
@ -51,6 +52,7 @@ export class FlowStepService {
request.integrationConfig
? JSON.stringify(request.integrationConfig)
: null,
request.displayConfig ? JSON.stringify(request.displayConfig) : null,
]);
return this.mapToFlowStep(result[0]);
@ -209,6 +211,15 @@ export class FlowStepService {
paramIndex++;
}
// 표시 설정 (displayConfig)
if (request.displayConfig !== undefined) {
fields.push(`display_config = $${paramIndex}`);
params.push(
request.displayConfig ? JSON.stringify(request.displayConfig) : null
);
paramIndex++;
}
if (fields.length === 0) {
return this.findById(id);
}
@ -262,6 +273,17 @@ export class FlowStepService {
* DB 행을 FlowStep 객체로 변환
*/
private mapToFlowStep(row: any): FlowStep {
// JSONB 필드는 pg 라이브러리가 자동으로 파싱해줌
const displayConfig = row.display_config;
// 디버깅 로그 (개발 환경에서만)
if (displayConfig && process.env.NODE_ENV === "development") {
console.log(`🔍 [FlowStep ${row.id}] displayConfig:`, {
type: typeof displayConfig,
value: displayConfig,
});
}
return {
id: row.id,
flowDefinitionId: row.flow_definition_id,
@ -282,6 +304,8 @@ export class FlowStepService {
// 외부 연동 필드
integrationType: row.integration_type || "internal",
integrationConfig: row.integration_config || undefined,
// 표시 설정
displayConfig: displayConfig || undefined,
createdAt: row.created_at,
updatedAt: row.updated_at,
};

610
backend-node/src/services/roleService.ts Normal file
View File

@ -0,0 +1,610 @@
import { query } from "../database/db";
import { logger } from "../utils/logger";
/**
* 권한 그룹 인터페이스
*/
export interface RoleGroup {
objid: number;
authName: string;
authCode: string;
companyCode: string;
status: string;
writer: string;
regdate: Date;
memberCount?: number;
menuCount?: number;
memberNames?: string;
}
/**
* 권한 그룹 멤버 인터페이스
*/
export interface RoleMember {
objid: number;
masterObjid: number;
userId: string;
userName?: string;
deptName?: string;
positionName?: string;
writer: string;
regdate: Date;
}
/**
* 메뉴 권한 인터페이스
*/
export interface MenuPermission {
objid: number;
menuObjid: number;
authObjid: number;
menuName?: string;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
writer: string;
regdate: Date;
}
/**
* 권한 그룹 서비스
*/
export class RoleService {
/**
* 회사별 권한 그룹 목록 조회
* @param companyCode - 회사 코드 (undefined 시 전체 조회)
* @param search - 검색어
*/
static async getRoleGroups(
companyCode?: string,
search?: string
): Promise<RoleGroup[]> {
try {
let sql = `
SELECT
objid,
auth_name AS "authName",
auth_code AS "authCode",
company_code AS "companyCode",
status,
writer,
regdate,
(SELECT COUNT(*) FROM authority_sub_user asu WHERE asu.master_objid = am.objid) AS "memberCount",
(SELECT COUNT(*) FROM rel_menu_auth rma WHERE rma.auth_objid = am.objid) AS "menuCount",
(SELECT STRING_AGG(ui.user_name, ', ' ORDER BY ui.user_name)
FROM authority_sub_user asu
JOIN user_info ui ON asu.user_id = ui.user_id
WHERE asu.master_objid = am.objid) AS "memberNames"
FROM authority_master am
WHERE 1=1
`;
const params: any[] = [];
let paramIndex = 1;
// 회사 코드 필터 (companyCode가 undefined면 전체 조회)
if (companyCode) {
sql += ` AND company_code = $${paramIndex}`;
params.push(companyCode);
paramIndex++;
}
// 검색어 필터
if (search && search.trim()) {
sql += ` AND (auth_name ILIKE $${paramIndex} OR auth_code ILIKE $${paramIndex})`;
params.push(`%${search.trim()}%`);
paramIndex++;
}
sql += ` ORDER BY regdate DESC`;
logger.info("권한 그룹 조회 SQL", { sql, params });
const result = await query<RoleGroup>(sql, params);
logger.info("권한 그룹 조회 결과", { count: result.length });
return result;
} catch (error) {
logger.error("권한 그룹 목록 조회 실패", { error, companyCode, search });
throw error;
}
}
/**
* 권한 그룹 상세 조회
*/
static async getRoleGroupById(objid: number): Promise<RoleGroup | null> {
try {
const sql = `
SELECT
objid,
auth_name AS "authName",
auth_code AS "authCode",
company_code AS "companyCode",
status,
writer,
regdate
FROM authority_master
WHERE objid = $1
`;
const result = await query<RoleGroup>(sql, [objid]);
return result.length > 0 ? result[0] : null;
} catch (error) {
logger.error("권한 그룹 상세 조회 실패", { error, objid });
throw error;
}
}
/**
* 권한 그룹 생성
*/
static async createRoleGroup(data: {
authName: string;
authCode: string;
companyCode: string;
writer: string;
}): Promise<RoleGroup> {
try {
const sql = `
INSERT INTO authority_master (objid, auth_name, auth_code, company_code, status, writer, regdate)
VALUES (nextval('seq_authority_master'), $1, $2, $3, 'active', $4, NOW())
RETURNING objid, auth_name AS "authName", auth_code AS "authCode",
company_code AS "companyCode", status, writer, regdate
`;
const result = await query<RoleGroup>(sql, [
data.authName,
data.authCode,
data.companyCode,
data.writer,
]);
logger.info("권한 그룹 생성 성공", {
objid: result[0].objid,
authName: data.authName,
});
return result[0];
} catch (error) {
logger.error("권한 그룹 생성 실패", { error, data });
throw error;
}
}
/**
* 권한 그룹 수정
*/
static async updateRoleGroup(
objid: number,
data: {
authName?: string;
authCode?: string;
status?: string;
}
): Promise<RoleGroup> {
try {
const updates: string[] = [];
const params: any[] = [];
let paramIndex = 1;
if (data.authName !== undefined) {
updates.push(`auth_name = $${paramIndex}`);
params.push(data.authName);
paramIndex++;
}
if (data.authCode !== undefined) {
updates.push(`auth_code = $${paramIndex}`);
params.push(data.authCode);
paramIndex++;
}
if (data.status !== undefined) {
updates.push(`status = $${paramIndex}`);
params.push(data.status);
paramIndex++;
}
if (updates.length === 0) {
throw new Error("수정할 데이터가 없습니다");
}
params.push(objid);
const sql = `
UPDATE authority_master
SET ${updates.join(", ")}
WHERE objid = $${paramIndex}
RETURNING objid, auth_name AS "authName", auth_code AS "authCode",
company_code AS "companyCode", status, writer, regdate
`;
const result = await query<RoleGroup>(sql, params);
if (result.length === 0) {
throw new Error("권한 그룹을 찾을 수 없습니다");
}
logger.info("권한 그룹 수정 성공", { objid, updates });
return result[0];
} catch (error) {
logger.error("권한 그룹 수정 실패", { error, objid, data });
throw error;
}
}
/**
* 권한 그룹 삭제
*/
static async deleteRoleGroup(objid: number): Promise<void> {
try {
// CASCADE로 연결된 데이터도 함께 삭제됨 (authority_sub_user, rel_menu_auth)
await query("DELETE FROM authority_master WHERE objid = $1", [objid]);
logger.info("권한 그룹 삭제 성공", { objid });
} catch (error) {
logger.error("권한 그룹 삭제 실패", { error, objid });
throw error;
}
}
/**
* 권한 그룹 멤버 목록 조회
*/
static async getRoleMembers(masterObjid: number): Promise<RoleMember[]> {
try {
const sql = `
SELECT
asu.objid,
asu.master_objid AS "masterObjid",
asu.user_id AS "userId",
ui.user_name AS "userName",
ui.dept_name AS "deptName",
ui.position_name AS "positionName",
asu.writer,
asu.regdate
FROM authority_sub_user asu
JOIN user_info ui ON asu.user_id = ui.user_id
WHERE asu.master_objid = $1
ORDER BY ui.user_name
`;
const result = await query<RoleMember>(sql, [masterObjid]);
return result;
} catch (error) {
logger.error("권한 그룹 멤버 조회 실패", { error, masterObjid });
throw error;
}
}
/**
* 권한 그룹 멤버 추가 (여러 명)
*/
static async addRoleMembers(
masterObjid: number,
userIds: string[],
writer: string
): Promise<void> {
try {
// 이미 존재하는 멤버 제외
const existingSql = `
SELECT user_id
FROM authority_sub_user
WHERE master_objid = $1 AND user_id = ANY($2)
`;
const existing = await query<{ user_id: string }>(existingSql, [
masterObjid,
userIds,
]);
const existingIds = new Set(
existing.map((row: { user_id: string }) => row.user_id)
);
const newUserIds = userIds.filter((userId) => !existingIds.has(userId));
if (newUserIds.length === 0) {
logger.info("추가할 신규 멤버가 없습니다", { masterObjid, userIds });
return;
}
// 배치 삽입
const values = newUserIds
.map(
(_, index) =>
`(nextval('seq_authority_sub_user'), $1, $${index + 2}, $${newUserIds.length + 2}, NOW())`
)
.join(", ");
const sql = `
INSERT INTO authority_sub_user (objid, master_objid, user_id, writer, regdate)
VALUES ${values}
`;
await query(sql, [masterObjid, ...newUserIds, writer]);
// 히스토리 기록
for (const userId of newUserIds) {
await this.insertAuthorityHistory(masterObjid, userId, "ADD", writer);
}
logger.info("권한 그룹 멤버 추가 성공", {
masterObjid,
count: newUserIds.length,
});
} catch (error) {
logger.error("권한 그룹 멤버 추가 실패", { error, masterObjid, userIds });
throw error;
}
}
/**
* 권한 그룹 멤버 제거 (여러 명)
*/
static async removeRoleMembers(
masterObjid: number,
userIds: string[],
writer: string
): Promise<void> {
try {
await query(
"DELETE FROM authority_sub_user WHERE master_objid = $1 AND user_id = ANY($2)",
[masterObjid, userIds]
);
// 히스토리 기록
for (const userId of userIds) {
await this.insertAuthorityHistory(
masterObjid,
userId,
"REMOVE",
writer
);
}
logger.info("권한 그룹 멤버 제거 성공", {
masterObjid,
count: userIds.length,
});
} catch (error) {
logger.error("권한 그룹 멤버 제거 실패", { error, masterObjid, userIds });
throw error;
}
}
/**
* 권한 히스토리 기록
*/
private static async insertAuthorityHistory(
masterObjid: number,
userId: string,
historyType: "ADD" | "REMOVE",
writer: string
): Promise<void> {
try {
const sql = `
INSERT INTO authority_master_history
(objid, parent_objid, parent_name, parent_code, user_id, active, history_type, writer, reg_date)
SELECT
nextval('seq_authority_master'),
$1,
am.auth_name,
am.auth_code,
$2,
am.status,
$3,
$4,
NOW()
FROM authority_master am
WHERE am.objid = $1
`;
await query(sql, [masterObjid, userId, historyType, writer]);
} catch (error) {
logger.error("권한 히스토리 기록 실패", {
error,
masterObjid,
userId,
historyType,
});
// 히스토리 기록 실패는 메인 작업을 중단하지 않음
}
}
/**
* 메뉴 권한 목록 조회
*/
static async getMenuPermissions(
authObjid: number
): Promise<MenuPermission[]> {
try {
const sql = `
SELECT
rma.objid,
rma.menu_objid AS "menuObjid",
rma.auth_objid AS "authObjid",
mi.menu_name_kor AS "menuName",
mi.menu_code AS "menuCode",
mi.menu_url AS "menuUrl",
rma.create_yn AS "createYn",
rma.read_yn AS "readYn",
rma.update_yn AS "updateYn",
rma.delete_yn AS "deleteYn",
rma.execute_yn AS "executeYn",
rma.export_yn AS "exportYn",
rma.writer,
rma.regdate
FROM rel_menu_auth rma
LEFT JOIN menu_info mi ON rma.menu_objid = mi.objid
WHERE rma.auth_objid = $1
ORDER BY mi.menu_name_kor
`;
const result = await query<MenuPermission>(sql, [authObjid]);
return result;
} catch (error) {
logger.error("메뉴 권한 조회 실패", { error, authObjid });
throw error;
}
}
/**
* 메뉴 권한 설정 (여러 메뉴)
*/
static async setMenuPermissions(
authObjid: number,
permissions: Array<{
menuObjid: number;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
}>,
writer: string
): Promise<void> {
try {
// 기존 권한 삭제
await query("DELETE FROM rel_menu_auth WHERE auth_objid = $1", [
authObjid,
]);
// 새로운 권한 삽입
if (permissions.length > 0) {
const values = permissions
.map(
(_, index) =>
`(nextval('seq_rel_menu_auth'), $${index * 5 + 2}, $1, $${index * 5 + 3}, $${index * 5 + 4}, $${index * 5 + 5}, $${index * 5 + 6}, $${permissions.length * 5 + 2}, NOW())`
)
.join(", ");
const params = permissions.flatMap((p) => [
p.menuObjid,
p.createYn,
p.readYn,
p.updateYn,
p.deleteYn,
]);
const sql = `
INSERT INTO rel_menu_auth (objid, menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn, writer, regdate)
VALUES ${values}
`;
await query(sql, [authObjid, ...params, writer]);
}
logger.info("메뉴 권한 설정 성공", {
authObjid,
count: permissions.length,
});
} catch (error) {
logger.error("메뉴 권한 설정 실패", { error, authObjid, permissions });
throw error;
}
}
/**
* 사용자가 속한 권한 그룹 목록 조회
*/
static async getUserRoleGroups(
userId: string,
companyCode: string
): Promise<RoleGroup[]> {
try {
const sql = `
SELECT
am.objid,
am.auth_name AS "authName",
am.auth_code AS "authCode",
am.company_code AS "companyCode",
am.status,
am.writer,
am.regdate
FROM authority_master am
JOIN authority_sub_user asu ON am.objid = asu.master_objid
WHERE asu.user_id = $1
AND am.company_code = $2
AND am.status = 'active'
ORDER BY am.auth_name
`;
const result = await query<RoleGroup>(sql, [userId, companyCode]);
return result;
} catch (error) {
logger.error("사용자 권한 그룹 조회 실패", {
error,
userId,
companyCode,
});
throw error;
}
}
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
static async getAllMenus(companyCode?: string): Promise<any[]> {
try {
logger.info("🔍 전체 메뉴 목록 조회 시작", { companyCode });
let whereConditions: string[] = ["status = 'active'"];
const params: any[] = [];
let paramIndex = 1;
// 회사 코드 필터 (선택적)
// 공통 메뉴(*)와 특정 회사 메뉴를 모두 조회
// 회사 코드 필터 (선택적)
if (companyCode) {
// 특정 회사 메뉴만 조회 (공통 메뉴 제외)
whereConditions.push(`company_code = $${paramIndex}`);
params.push(companyCode);
paramIndex++;
logger.info("📋 회사 코드 필터 적용 (공통 메뉴 제외)", { companyCode });
} else {
logger.info("📋 회사 코드 필터 없음 (전체 조회)");
}
const whereClause = whereConditions.join(" AND ");
const sql = `
SELECT
objid,
menu_name_kor AS "menuName",
menu_name_eng AS "menuNameEng",
menu_code AS "menuCode",
menu_url AS "menuUrl",
menu_type AS "menuType",
parent_obj_id AS "parentObjid",
seq AS "sortOrder",
company_code AS "companyCode"
FROM menu_info
WHERE ${whereClause}
ORDER BY seq, menu_name_kor
`;
logger.info("🔍 SQL 쿼리 실행", {
whereClause,
params,
sql: sql.substring(0, 200) + "...",
});
const result = await query<any>(sql, params);
logger.info("✅ 메뉴 목록 조회 성공", {
count: result.length,
companyCode,
menus: result.map((m) => ({
objid: m.objid,
name: m.menuName,
code: m.menuCode,
companyCode: m.companyCode,
})),
});
return result;
} catch (error) {
logger.error("❌ 메뉴 목록 조회 실패", { error, companyCode });
throw error;
}
}
}

17
backend-node/src/types/auth.ts
View File

@ -7,6 +7,15 @@ export interface LoginRequest {
password: string;
}
// 사용자 권한 레벨 (3단계 체계)
export enum UserRole {
SUPER_ADMIN = "SUPER_ADMIN", // 최고 관리자 (전체 시스템)
COMPANY_ADMIN = "COMPANY_ADMIN", // 회사 관리자 (자기 회사만)
USER = "USER", // 일반 사용자
GUEST = "GUEST", // 게스트
PARTNER = "PARTNER", // 협력업체
}
// 기존 ApiLoginController.UserInfo 클래스 포팅
export interface UserInfo {
userId: string;
@ -18,7 +27,9 @@ export interface UserInfo {
email?: string;
photo?: string;
locale?: string;
isAdmin?: boolean;
isAdmin?: boolean; // 하위 호환성 유지
isSuperAdmin?: boolean; // 슈퍼관리자 여부 (company_code === '*' && userType === 'SUPER_ADMIN')
isCompanyAdmin?: boolean; // 회사 관리자 여부 (userType === 'COMPANY_ADMIN')
}
// 기존 ApiLoginController.ApiResponse 클래스 포팅
@ -52,6 +63,10 @@ export interface PersonBean {
companyCode?: string;
photo?: string;
locale?: string;
// 권한 레벨 정보 (3단계 체계)
isSuperAdmin?: boolean; // 최고 관리자 (company_code === '*' && userType === 'SUPER_ADMIN')
isCompanyAdmin?: boolean; // 회사 관리자 (userType === 'COMPANY_ADMIN')
isAdmin?: boolean; // 관리자 (슈퍼관리자 + 회사관리자)
}
// 로그인 결과 타입 (기존 LoginService.loginPwdCheck 반환값)

16
backend-node/src/types/flow.ts
View File

@ -10,6 +10,7 @@ export interface FlowDefinition {
tableName: string;
dbSourceType?: "internal" | "external"; // 데이터베이스 소스 타입
dbConnectionId?: number; // 외부 DB 연결 ID (external인 경우)
companyCode: string; // 회사 코드 (* = 공통)
isActive: boolean;
createdBy?: string;
createdAt: Date;
@ -23,6 +24,7 @@ export interface CreateFlowDefinitionRequest {
tableName: string;
dbSourceType?: "internal" | "external"; // 데이터베이스 소스 타입
dbConnectionId?: number; // 외부 DB 연결 ID
companyCode?: string; // 회사 코드 (미제공 시 사용자의 company_code 사용)
}
// 플로우 정의 수정 요청
@ -66,6 +68,14 @@ export interface FlowConditionGroup {
conditions: FlowCondition[];
}
// 플로우 단계 표시 설정
export interface FlowStepDisplayConfig {
visibleColumns?: string[]; // 표시할 컬럼 목록
columnOrder?: string[]; // 컬럼 순서 (선택사항)
columnLabels?: Record<string, string>; // 컬럼별 커스텀 라벨 (선택사항)
columnWidths?: Record<string, number>; // 컬럼별 너비 설정 (px, 선택사항)
}
// 플로우 단계
export interface FlowStep {
id: number;
@ -87,6 +97,8 @@ export interface FlowStep {
// 외부 연동 필드
integrationType?: FlowIntegrationType; // 연동 타입 (기본값: internal)
integrationConfig?: FlowIntegrationConfig; // 연동 설정 (JSONB)
// 🆕 표시 설정 (플로우 위젯에서 사용)
displayConfig?: FlowStepDisplayConfig; // 단계별 컬럼 표시 설정
createdAt: Date;
updatedAt: Date;
}
@ -111,6 +123,8 @@ export interface CreateFlowStepRequest {
// 외부 연동 필드
integrationType?: FlowIntegrationType;
integrationConfig?: FlowIntegrationConfig;
// 🆕 표시 설정
displayConfig?: FlowStepDisplayConfig;
}
// 플로우 단계 수정 요청
@ -132,6 +146,8 @@ export interface UpdateFlowStepRequest {
// 외부 연동 필드
integrationType?: FlowIntegrationType;
integrationConfig?: FlowIntegrationConfig;
// 🆕 표시 설정
displayConfig?: FlowStepDisplayConfig;
}
// 플로우 단계 연결

18
backend-node/src/types/oracledb.d.ts vendored
View File

@ -1,18 +0,0 @@
declare module 'oracledb' {
export interface Connection {
execute(sql: string, bindParams?: any, options?: any): Promise<any>;
close(): Promise<void>;
}
export interface ConnectionConfig {
user: string;
password: string;
connectString: string;
}
export function getConnection(config: ConnectionConfig): Promise<Connection>;
export function createPool(config: any): Promise<any>;
export function getPool(): any;
export function close(): Promise<void>;
}

230
backend-node/src/utils/permissionUtils.ts Normal file
View File

@ -0,0 +1,230 @@
/**
* 권한 체크 유틸리티
* 3단계 권한 체계: SUPER_ADMIN / COMPANY_ADMIN / USER
*/
import { PersonBean } from "../types/auth";
/**
* 권한 레벨 Enum
*/
export enum PermissionLevel {
SUPER_ADMIN = "SUPER_ADMIN", // 최고 관리자 (전체 시스템)
COMPANY_ADMIN = "COMPANY_ADMIN", // 회사 관리자 (자기 회사만)
USER = "USER", // 일반 사용자
}
/**
* 사용자가 슈퍼관리자인지 확인
* @param user 사용자 정보
* @returns 슈퍼관리자 여부
*/
export function isSuperAdmin(user?: PersonBean | null): boolean {
if (!user) return false;
return user.companyCode === "*" && user.userType === "SUPER_ADMIN";
}
/**
* 사용자가 회사 관리자인지 확인 (슈퍼관리자 제외)
* @param user 사용자 정보
* @returns 회사 관리자 여부
*/
export function isCompanyAdmin(user?: PersonBean | null): boolean {
if (!user) return false;
return user.userType === "COMPANY_ADMIN" && user.companyCode !== "*";
}
/**
* 사용자가 관리자인지 확인 (슈퍼관리자 + 회사관리자)
* @param user 사용자 정보
* @returns 관리자 여부
*/
export function isAdmin(user?: PersonBean | null): boolean {
return isSuperAdmin(user) || isCompanyAdmin(user);
}
/**
* 사용자가 일반 사용자인지 확인
* @param user 사용자 정보
* @returns 일반 사용자 여부
*/
export function isRegularUser(user?: PersonBean | null): boolean {
if (!user) return false;
return (
user.userType === "USER" ||
user.userType === "GUEST" ||
user.userType === "PARTNER"
);
}
/**
* 사용자의 권한 레벨 반환
* @param user 사용자 정보
* @returns 권한 레벨
*/
export function getUserPermissionLevel(
user?: PersonBean | null
): PermissionLevel | null {
if (!user) return null;
if (isSuperAdmin(user)) {
return PermissionLevel.SUPER_ADMIN;
}
if (isCompanyAdmin(user)) {
return PermissionLevel.COMPANY_ADMIN;
}
return PermissionLevel.USER;
}
/**
* DDL 실행 권한 확인 (슈퍼관리자만)
* @param user 사용자 정보
* @returns DDL 실행 가능 여부
*/
export function canExecuteDDL(user?: PersonBean | null): boolean {
return isSuperAdmin(user);
}
/**
* 회사 데이터 접근 권한 확인
* @param user 사용자 정보
* @param targetCompanyCode 접근하려는 회사 코드
* @returns 접근 가능 여부
*/
export function canAccessCompanyData(
user?: PersonBean | null,
targetCompanyCode?: string
): boolean {
if (!user) return false;
// 슈퍼관리자는 모든 회사 데이터 접근 가능
if (isSuperAdmin(user)) {
return true;
}
// 자기 회사 데이터만 접근 가능
return user.companyCode === targetCompanyCode;
}
/**
* 사용자 관리 권한 확인 (관리자만)
* @param user 사용자 정보
* @param targetCompanyCode 관리하려는 회사 코드
* @returns 사용자 관리 가능 여부
*/
export function canManageUsers(
user?: PersonBean | null,
targetCompanyCode?: string
): boolean {
if (!user) return false;
// 슈퍼관리자는 모든 회사 사용자 관리 가능
if (isSuperAdmin(user)) {
return true;
}
// 회사 관리자는 자기 회사 사용자만 관리 가능
if (isCompanyAdmin(user)) {
return user.companyCode === targetCompanyCode;
}
return false;
}
/**
* 회사 설정 변경 권한 확인 (관리자만)
* @param user 사용자 정보
* @param targetCompanyCode 설정 변경하려는 회사 코드
* @returns 설정 변경 가능 여부
*/
export function canManageCompanySettings(
user?: PersonBean | null,
targetCompanyCode?: string
): boolean {
return canManageUsers(user, targetCompanyCode);
}
/**
* 회사 생성/삭제 권한 확인 (슈퍼관리자만)
* @param user 사용자 정보
* @returns 회사 생성/삭제 가능 여부
*/
export function canManageCompanies(user?: PersonBean | null): boolean {
return isSuperAdmin(user);
}
/**
* 시스템 설정 변경 권한 확인 (슈퍼관리자만)
* @param user 사용자 정보
* @returns 시스템 설정 변경 가능 여부
*/
export function canManageSystemSettings(user?: PersonBean | null): boolean {
return isSuperAdmin(user);
}
/**
* 권한 에러 메시지 생성
* @param requiredLevel 필요한 권한 레벨
* @returns 에러 메시지
*/
export function getPermissionErrorMessage(
requiredLevel: PermissionLevel
): string {
const messages: Record<PermissionLevel, string> = {
[PermissionLevel.SUPER_ADMIN]:
"최고 관리자 권한이 필요합니다. 전체 시스템을 관리할 수 있는 권한이 없습니다.",
[PermissionLevel.COMPANY_ADMIN]:
"관리자 권한이 필요합니다. 회사 관리자 이상의 권한이 필요합니다.",
[PermissionLevel.USER]: "인증된 사용자 권한이 필요합니다.",
};
return messages[requiredLevel] || "권한이 부족합니다.";
}
/**
* 권한 부족 에러 객체 생성
* @param requiredLevel 필요한 권한 레벨
* @returns 에러 응답 객체
*/
export function createPermissionError(requiredLevel: PermissionLevel) {
return {
success: false,
error: {
code: "INSUFFICIENT_PERMISSION",
details: getPermissionErrorMessage(requiredLevel),
},
};
}
/**
* 사용자 권한 정보 요약
* @param user 사용자 정보
* @returns 권한 정보 객체
*/
export function getUserPermissionSummary(user?: PersonBean | null) {
if (!user) {
return {
level: null,
isSuperAdmin: false,
isCompanyAdmin: false,
isAdmin: false,
canExecuteDDL: false,
canManageUsers: false,
canManageCompanies: false,
canManageSystemSettings: false,
};
}
return {
level: getUserPermissionLevel(user),
isSuperAdmin: isSuperAdmin(user),
isCompanyAdmin: isCompanyAdmin(user),
isAdmin: isAdmin(user),
canExecuteDDL: canExecuteDDL(user),
canManageUsers: isAdmin(user),
canManageCompanies: canManageCompanies(user),
canManageSystemSettings: canManageSystemSettings(user),
};
}

43
backend-node/tsconfig.json
View File

@ -1,38 +1,29 @@
{
"compilerOptions": {
"target": "ES2022",
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2022"],
"lib": ["ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"strict": false,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@/config/*": ["src/config/*"],
"@/controllers/*": ["src/controllers/*"],
"@/services/*": ["src/services/*"],
"@/models/*": ["src/models/*"],
"@/middleware/*": ["src/middleware/*"],
"@/utils/*": ["src/utils/*"],
"@/types/*": ["src/types/*"],
"@/validators/*": ["src/validators/*"]
}
"allowSyntheticDefaultImports": true,
"noImplicitReturns": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noEmitOnError": false,
"noImplicitAny": false
},
"include": ["src/**/*", "src/types/**/*.d.ts"],
"exclude": ["node_modules", "dist", "**/*.test.ts"]
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"],
"ts-node": {
"transpileOnly": true,
"compilerOptions": {
"module": "commonjs"
}
}
}

104
db/migrations/RUN_027_MIGRATION.md Normal file
View File

@ -0,0 +1,104 @@
# 027 마이그레이션 실행 가이드
## 개요
`dept_info` 테이블에 `company_code` 컬럼을 추가하는 마이그레이션입니다.
## 실행 방법
### 방법 1: Docker Compose를 통한 실행 (권장)
```bash
# 1. 현재 사용 중인 Docker Compose 파일 확인
cd /Users/kimjuseok/ERP-node
# 2. DB 컨테이너 이름 확인
docker ps | grep postgres
# 3. 마이그레이션 실행
docker exec -i <DB_CONTAINER_NAME> psql -U postgres -d ilshin < db/migrations/027_add_company_code_to_dept_info.sql
# 예시 (컨테이너 이름이 'erp-node-db-1'인 경우):
docker exec -i erp-node-db-1 psql -U postgres -d ilshin < db/migrations/027_add_company_code_to_dept_info.sql
```
### 방법 2: pgAdmin 또는 DBeaver를 통한 실행
1. pgAdmin 또는 DBeaver 실행
2. PostgreSQL 서버 연결:
- Host: `39.117.244.52`
- Port: `11132`
- Database: `plm`
- Username: `postgres`
- Password: `ph0909!!`
3. `db/migrations/027_add_company_code_to_dept_info.sql` 파일 내용을 복사
4. SQL 쿼리 창에 붙여넣기
5. 실행 (F5 또는 Execute 버튼)
### 방법 3: psql CLI를 통한 직접 연결
```bash
# 1. psql 설치 확인
psql --version
# 2. 직접 연결하여 마이그레이션 실행
psql -h 39.117.244.52 -p 11132 -U postgres -d plm -f db/migrations/027_add_company_code_to_dept_info.sql
```
## 마이그레이션 검증
마이그레이션이 성공적으로 실행되었는지 확인:
```sql
-- 1. company_code 컬럼 추가 확인
SELECT column_name, data_type, is_nullable, column_default
FROM information_schema.columns
WHERE table_name = 'dept_info' AND column_name = 'company_code';
-- 2. 인덱스 생성 확인
SELECT indexname, indexdef
FROM pg_indexes
WHERE tablename = 'dept_info' AND indexname = 'idx_dept_info_company_code';
-- 3. 데이터 마이그레이션 확인 (company_code가 모두 채워졌는지)
SELECT company_code, COUNT(*) as dept_count
FROM dept_info
GROUP BY company_code
ORDER BY company_code;
-- 4. NULL 값이 있는지 확인 (없어야 정상)
SELECT COUNT(*) as null_count
FROM dept_info
WHERE company_code IS NULL;
```
## 롤백 방법 (문제 발생 시)
```sql
-- 1. 인덱스 제거
DROP INDEX IF EXISTS idx_dept_info_company_code;
-- 2. company_code 컬럼 제거
ALTER TABLE dept_info DROP COLUMN IF EXISTS company_code;
```
## 주의사항
1. **백업 필수**: 마이그레이션 실행 전 반드시 데이터베이스 백업
2. **운영 환경**: 운영 환경에서는 점검 시간에 실행 권장
3. **트랜잭션**: 마이그레이션은 하나의 트랜잭션으로 실행됨 (실패 시 자동 롤백)
4. **성능**: `dept_info` 테이블 크기에 따라 실행 시간이 다를 수 있음
## 마이그레이션 내용 요약
1. `company_code` 컬럼 추가 (VARCHAR(20))
2. `company_code` 인덱스 생성
3. 기존 데이터 마이그레이션 (`hq_name` → `company_code`)
4. `company_code`를 NOT NULL로 변경
5. 기본값 'ILSHIN' 설정
## 관련 파일
- 마이그레이션 파일: `db/migrations/027_add_company_code_to_dept_info.sql`
- 백엔드 API 수정: `backend-node/src/controllers/adminController.ts`
- 프론트엔드 API: `frontend/lib/api/user.ts`

814
docs/권한_그룹_관리_상세_가이드.md Normal file
View File

@ -0,0 +1,814 @@
# 권한 그룹 관리 시스템 상세 가이드
> 작성일: 2025-01-27
> 파일 위치: `backend-node/src/services/roleService.ts`, `backend-node/src/controllers/roleController.ts`
---
## 📋 목차
1. [권한 그룹 관리 구조](#권한-그룹-관리-구조)
2. [최고 관리자 권한](#최고-관리자-권한)
3. [회사 관리자 권한](#회사-관리자-권한)
4. [메뉴 권한 설정](#메뉴-권한-설정)
5. [멤버 관리](#멤버-관리)
6. [권한 체크 로직](#권한-체크-로직)
---
## 권한 그룹 관리 구조
### 데이터베이스 구조
```sql
-- 권한 그룹 마스터 테이블
authority_master (
objid SERIAL PRIMARY KEY, -- 권한 그룹 ID
auth_name VARCHAR(200), -- 권한 그룹명
auth_code VARCHAR(100), -- 권한 그룹 코드
company_code VARCHAR(50), -- 회사 코드 ⭐
status VARCHAR(20), -- 상태 (active/inactive)
writer VARCHAR(50), -- 작성자
regdate TIMESTAMP -- 등록일
)
-- 권한 그룹 멤버 테이블
authority_sub_user (
objid SERIAL PRIMARY KEY, -- 멤버 ID
master_objid INTEGER, -- 권한 그룹 ID (FK)
user_id VARCHAR(50), -- 사용자 ID
writer VARCHAR(50), -- 작성자
regdate TIMESTAMP -- 등록일
)
-- 메뉴 권한 테이블
rel_menu_auth (
objid SERIAL PRIMARY KEY, -- 권한 ID
menu_objid INTEGER, -- 메뉴 ID (FK)
auth_objid INTEGER, -- 권한 그룹 ID (FK)
create_yn VARCHAR(1), -- 생성 권한 (Y/N)
read_yn VARCHAR(1), -- 조회 권한 (Y/N)
update_yn VARCHAR(1), -- 수정 권한 (Y/N)
delete_yn VARCHAR(1), -- 삭제 권한 (Y/N)
execute_yn VARCHAR(1), -- 실행 권한 (Y/N) ⭐
export_yn VARCHAR(1), -- 내보내기 권한 (Y/N) ⭐
writer VARCHAR(50), -- 작성자
regdate TIMESTAMP -- 등록일
)
-- 메뉴 정보 테이블
menu_info (
objid SERIAL PRIMARY KEY, -- 메뉴 ID
menu_name_kor VARCHAR(200), -- 메뉴명 (한글)
menu_name_eng VARCHAR(200), -- 메뉴명 (영문)
menu_code VARCHAR(100), -- 메뉴 코드
menu_url VARCHAR(500), -- 메뉴 URL
menu_type INTEGER, -- 메뉴 타입
parent_obj_id INTEGER, -- 부모 메뉴 ID
seq INTEGER, -- 정렬 순서
company_code VARCHAR(50), -- 회사 코드 ⭐
status VARCHAR(20) -- 상태 (active/inactive)
)
```
### 권한 계층 구조
```
최고 관리자 (SUPER_ADMIN, company_code = "*")
├─ 모든 회사의 권한 그룹 조회/생성/수정/삭제
├─ 모든 회사의 메뉴에 대해 권한 부여 가능
└─ 다른 회사 사용자를 권한 그룹에 추가 가능
회사 관리자 (COMPANY_ADMIN, company_code = "20", "30", etc.)
├─ 자기 회사의 권한 그룹만 조회/생성/수정/삭제
├─ 자기 회사의 메뉴에 대해서만 권한 부여 가능
└─ 자기 회사 사용자만 권한 그룹에 추가 가능
일반 사용자 (USER)
└─ 권한 그룹 관리 불가 (읽기 전용)
```
---
## 최고 관리자 권한
### 1. 권한 그룹 목록 조회
**API**: `GET /api/roles`
**로직**:
```typescript
export const getRoleGroups = async (req, res) => {
const companyCode = req.query.companyCode as string | undefined;
if (isSuperAdmin(req.user)) {
// 최고 관리자: companyCode 파라미터가 있으면 해당 회사만, 없으면 전체 조회
targetCompanyCode = companyCode; // undefined면 전체 조회
} else {
// 회사 관리자: 자기 회사만 조회
targetCompanyCode = req.user?.companyCode;
}
const roleGroups = await RoleService.getRoleGroups(targetCompanyCode, search);
};
```
**데이터베이스 쿼리**:
```typescript
// RoleService.getRoleGroups()
let sql = `SELECT * FROM authority_master WHERE 1=1`;
if (companyCode) {
sql += ` AND company_code = $1`; // 특정 회사만
} else {
// 조건 없음 -> 전체 조회
}
```
**결과**:
- ✅ `companyCode` 파라미터 없음 → **모든 회사의 권한 그룹 조회**
- ✅ `companyCode = "20"` → **회사 "20"의 권한 그룹만 조회**
- ✅ `companyCode = "*"` → **공통 권한 그룹만 조회** (있다면)
### 2. 권한 그룹 생성
**API**: `POST /api/roles`
**로직**:
```typescript
export const createRoleGroup = async (req, res) => {
const { authName, authCode, companyCode } = req.body;
// 최고 관리자가 아닌 경우, 자기 회사에만 생성 가능
if (!isSuperAdmin(req.user) && companyCode !== req.user?.companyCode) {
return res.status(403).json({
message: "자신의 회사에만 권한 그룹을 생성할 수 있습니다",
});
}
await RoleService.createRoleGroup({
authName,
authCode,
companyCode,
writer,
});
};
```
**결과**:
- ✅ 최고 관리자는 **어떤 회사에도** 권한 그룹 생성 가능
- ✅ `companyCode = "*"` 로 공통 권한 그룹도 생성 가능
- ❌ 회사 관리자는 자기 회사에만 생성 가능
### 3. 메뉴 목록 조회 (권한 부여용)
**API**: `GET /api/roles/menus/all?companyCode=20`
**로직**:
```typescript
export const getAllMenus = async (req, res) => {
const requestedCompanyCode = req.query.companyCode as string | undefined;
let companyCode: string | undefined;
if (isSuperAdmin(req.user)) {
// 최고 관리자: 요청한 회사 코드 사용 (없으면 전체)
companyCode = requestedCompanyCode;
} else {
// 회사 관리자: 자기 회사 코드만 사용
companyCode = req.user?.companyCode;
}
const menus = await RoleService.getAllMenus(companyCode);
};
```
**데이터베이스 쿼리**:
```typescript
// RoleService.getAllMenus()
let whereConditions = ["status = 'active'"];
if (companyCode) {
// 특정 회사 메뉴만 조회 (공통 메뉴 제외)
whereConditions.push(`company_code = $1`);
} else {
// 조건 없음 -> 전체 메뉴 조회
}
const sql = `
SELECT * FROM menu_info
WHERE ${whereConditions.join(" AND ")}
ORDER BY seq, menu_name_kor
`;
```
**결과**:
- ✅ `companyCode` 없음 → **모든 회사의 모든 메뉴 조회**
- ✅ `companyCode = "20"` → **회사 "20"의 메뉴만 조회**
- ✅ `companyCode = "*"` → **공통 메뉴만 조회**
**⚠️ 프론트엔드 구현 주의사항:**
프론트엔드에서 권한 그룹 상세 화면 (메뉴 권한 설정)에서는 **최고 관리자가 모든 메뉴를 볼 수 있도록** `companyCode` 파라미터를 전달하지 않아야 합니다:
```typescript
// MenuPermissionsTable.tsx
const { user: currentUser } = useAuth();
const isSuperAdmin =
currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 최고 관리자: companyCode 없이 모든 메뉴 조회
// 회사 관리자: 자기 회사 메뉴만 조회
const targetCompanyCode = isSuperAdmin ? undefined : roleGroup.companyCode;
const response = await roleAPI.getAllMenus(targetCompanyCode);
```
**이렇게 하지 않으면:**
- 최고 관리자가 회사 "20"의 권한 그룹에 들어가도
- `roleGroup.companyCode` (= "20")를 API로 전달하면
- 회사 "20"의 메뉴만 보이게 됨 ❌
**올바른 동작:**
- 최고 관리자가 회사 "20"의 권한 그룹에 들어가면
- `undefined`를 API로 전달하여
- **모든 회사의 모든 메뉴**를 볼 수 있어야 함 ✅
### 4. 메뉴 권한 설정
**API**: `POST /api/roles/:id/menu-permissions`
**Request Body**:
```json
{
"permissions": [
{
"menuObjid": 101,
"createYn": "Y",
"readYn": "Y",
"updateYn": "Y",
"deleteYn": "Y",
"executeYn": "Y",
"exportYn": "Y"
},
{
"menuObjid": 102,
"createYn": "N",
"readYn": "Y",
"updateYn": "N",
"deleteYn": "N",
"executeYn": "N",
"exportYn": "N"
}
]
}
```
**로직**:
```typescript
export const setMenuPermissions = async (req, res) => {
const authObjid = parseInt(req.params.id, 10);
const { permissions } = req.body;
// 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(authObjid);
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
return res.status(403).json({ message: "메뉴 권한 설정 권한이 없습니다" });
}
await RoleService.setMenuPermissions(authObjid, permissions, writer);
};
```
**데이터베이스 쿼리**:
```typescript
// RoleService.setMenuPermissions()
// 1. 기존 권한 삭제
await query("DELETE FROM rel_menu_auth WHERE auth_objid = $1", [authObjid]);
// 2. 새로운 권한 삽입
const sql = `
INSERT INTO rel_menu_auth
(objid, menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn, execute_yn, export_yn, writer, regdate)
VALUES
${values} -- (nextval('seq'), $1, $2, $3, $4, $5, $6, $7, $8, $9, NOW()), ...
`;
```
**결과**:
- ✅ 최고 관리자는 **어떤 권한 그룹에도** 메뉴 권한 설정 가능
- ✅ **모든 회사의 메뉴**에 대해 권한 부여 가능
- ✅ CRUD + Execute + Export 총 6가지 권한 설정
### 5. 멤버 관리
**API**: `PUT /api/roles/:id/members`
**Request Body**:
```json
{
"userIds": ["user001", "user002", "user003"]
}
```
**로직**:
```typescript
export const updateRoleMembers = async (req, res) => {
const masterObjid = parseInt(req.params.id, 10);
const { userIds } = req.body;
// 권한 그룹 조회
const roleGroup = await RoleService.getRoleGroupById(masterObjid);
// 권한 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
return res
.status(403)
.json({ message: "권한 그룹 멤버 수정 권한이 없습니다" });
}
// 기존 멤버 조회
const existingMembers = await RoleService.getRoleMembers(masterObjid);
const existingUserIds = existingMembers.map((m) => m.userId);
// 추가할 멤버 (새로 추가된 것들)
const toAdd = userIds.filter((id) => !existingUserIds.includes(id));
// 제거할 멤버 (기존에 있었는데 없어진 것들)
const toRemove = existingUserIds.filter((id) => !userIds.includes(id));
// 추가
if (toAdd.length > 0) {
await RoleService.addRoleMembers(masterObjid, toAdd, writer);
}
// 제거
if (toRemove.length > 0) {
await RoleService.removeRoleMembers(masterObjid, toRemove, writer);
}
};
```
**결과**:
- ✅ 최고 관리자는 **어떤 회사 사용자도** 권한 그룹에 추가 가능
- ✅ 다른 회사 권한 그룹에도 멤버 추가 가능
- ⚠️ 단, 사용자 목록 API에서 최고 관리자는 필터링되므로 추가 불가
---
## 회사 관리자 권한
### 1. 권한 그룹 목록 조회
**로직**:
```typescript
if (!isSuperAdmin(req.user)) {
// 회사 관리자: 자기 회사만 조회
targetCompanyCode = req.user?.companyCode; // 강제로 자기 회사
}
```
**결과**:
- ✅ 자기 회사 (`company_code = "20"`) 권한 그룹만 조회
- ❌ 다른 회사 권한 그룹은 **절대 볼 수 없음**
### 2. 권한 그룹 생성
**로직**:
```typescript
if (!isSuperAdmin(req.user) && companyCode !== req.user?.companyCode) {
return res.status(403).json({
message: "자신의 회사에만 권한 그룹을 생성할 수 있습니다",
});
}
```
**결과**:
- ✅ 자기 회사에만 권한 그룹 생성 가능
- ❌ 다른 회사나 공통(`*`)에는 생성 불가
### 3. 메뉴 목록 조회
**로직**:
```typescript
if (!isSuperAdmin(req.user)) {
// 회사 관리자: 자기 회사 코드만 사용
companyCode = req.user?.companyCode; // 강제로 자기 회사
}
```
**데이터베이스 쿼리**:
```sql
SELECT * FROM menu_info
WHERE status = 'active'
AND company_code = '20' -- 자기 회사만
ORDER BY seq, menu_name_kor
```
**결과**:
- ✅ 자기 회사 메뉴만 조회
- ❌ 공통 메뉴(`company_code = "*"`)는 **조회되지 않음**
- ❌ 다른 회사 메뉴는 **절대 볼 수 없음**
### 4. 메뉴 권한 설정
**로직**:
```typescript
// 권한 그룹의 회사 코드 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
return res.status(403).json({ message: "메뉴 권한 설정 권한이 없습니다" });
}
```
**`canAccessCompanyData` 함수**:
```typescript
export function canAccessCompanyData(
user: UserInfo | undefined,
targetCompanyCode: string
): boolean {
if (!user) return false;
if (isSuperAdmin(user)) return true; // 슈퍼관리자는 모든 회사 접근 가능
return user.companyCode === targetCompanyCode; // 자기 회사만 접근 가능
}
```
**결과**:
- ✅ 자기 회사 권한 그룹에만 메뉴 권한 설정 가능
- ✅ 자기 회사 메뉴에 대해서만 권한 부여 가능
- ❌ 다른 회사 권한 그룹이나 메뉴는 접근 불가
### 5. 멤버 관리
**로직**:
```typescript
// 권한 그룹의 회사 코드 체크
if (
!isSuperAdmin(req.user) &&
!canAccessCompanyData(req.user, roleGroup.companyCode)
) {
return res
.status(403)
.json({ message: "권한 그룹 멤버 수정 권한이 없습니다" });
}
```
**사용자 목록 조회 (Dual List Box)**:
```typescript
// adminController.getUserList()
if (req.user && req.user.companyCode !== "*") {
whereConditions.push(`company_code != '*'`); // 최고 관리자 필터링
whereConditions.push(`company_code = $1`); // 자기 회사만
}
```
**결과**:
- ✅ 자기 회사 권한 그룹에만 멤버 추가/제거 가능
- ✅ 자기 회사 사용자만 멤버로 추가 가능
- ❌ 최고 관리자는 목록에서 **절대 보이지 않음**
- ❌ 다른 회사 사용자는 **절대 볼 수 없음**
---
## 메뉴 권한 설정
### 권한 종류 (6가지)
| 권한 | 컬럼명 | 설명 | 예시 |
| ------------ | ------------ | ------------------------- | ------------------------ |
| **생성** | `create_yn` | 데이터 생성 가능 여부 | 사용자 추가, 주문 생성 |
| **조회** | `read_yn` | 데이터 조회 가능 여부 | 목록 보기, 상세 보기 |
| **수정** | `update_yn` | 데이터 수정 가능 여부 | 정보 변경, 상태 변경 |
| **삭제** | `delete_yn` | 데이터 삭제 가능 여부 | 항목 삭제, 데이터 제거 |
| **실행** | `execute_yn` | 특수 기능 실행 가능 여부 | 플로우 실행, 배치 실행 |
| **내보내기** | `export_yn` | 데이터 내보내기 가능 여부 | Excel 다운로드, PDF 출력 |
### 권한 설정 예시
#### 1. 읽기 전용 권한
```json
{
"createYn": "N",
"readYn": "Y",
"updateYn": "N",
"deleteYn": "N",
"executeYn": "N",
"exportYn": "N"
}
```
→ 조회만 가능, 수정/삭제 불가
#### 2. 전체 권한
```json
{
"createYn": "Y",
"readYn": "Y",
"updateYn": "Y",
"deleteYn": "Y",
"executeYn": "Y",
"exportYn": "Y"
}
```
→ 모든 작업 가능
#### 3. 운영자 권한
```json
{
"createYn": "Y",
"readYn": "Y",
"updateYn": "Y",
"deleteYn": "N",
"executeYn": "Y",
"exportYn": "Y"
}
```
→ 삭제 제외 모든 작업 가능
### 메뉴 권한 설정 프로세스
```mermaid
graph TD
A[권한 그룹 선택] --> B[메뉴 목록 조회]
B --> C{최고 관리자?}
C -->|Yes| D[모든 회사 메뉴 조회]
C -->|No| E[자기 회사 메뉴만 조회]
D --> F[메뉴별 권한 설정]
E --> F
F --> G[기존 권한 삭제]
G --> H[새 권한 일괄 삽입]
H --> I[완료]
```
---
## 멤버 관리
### Dual List Box 구조
```
┌─────────────────────┐ ┌─────────────────────┐
│ 사용 가능한 사용자 │ → │ 권한 그룹 멤버 │
│ │ ← │ │
│ [ ] user001 │ │ [x] user005 │
│ [ ] user002 │ │ [x] user006 │
│ [ ] user003 │ │ [x] user007 │
│ [ ] user004 │ │ │
└─────────────────────┘ └─────────────────────┘
```
### 멤버 추가/제거 로직
```typescript
// 프론트엔드에서 전송
PUT /api/roles/123/members
{
"userIds": ["user005", "user006", "user008"] // 최종 멤버 목록
}
// 백엔드 처리
const existingUserIds = ["user005", "user006", "user007"]; // 기존 멤버
const newUserIds = ["user005", "user006", "user008"]; // 요청된 멤버
const toAdd = ["user008"]; // 새로 추가 (기존에 없던 것)
const toRemove = ["user007"]; // 제거 (기존에 있었는데 없어진 것)
// 추가
INSERT INTO authority_sub_user (master_objid, user_id, writer, regdate)
VALUES (123, 'user008', 'admin', NOW())
// 제거
DELETE FROM authority_sub_user
WHERE master_objid = 123 AND user_id = 'user007'
```
### 사용자 목록 필터링
**API**: `GET /api/admin/users?companyCode=20&size=1000`
**로직**:
```typescript
// 회사 코드 필터
if (companyCode && companyCode.trim()) {
whereConditions.push(`company_code = $1`);
queryParams.push(companyCode.trim());
}
// 최고 관리자 필터링 (중요!)
if (req.user && req.user.companyCode !== "*") {
whereConditions.push(`company_code != '*'`); // 최고 관리자 숨김
}
// 검색 조건
if (search && search.trim()) {
whereConditions.push(`(
user_id ILIKE $2 OR
user_name ILIKE $2 OR
dept_name ILIKE $2
)`);
queryParams.push(`%${search.trim()}%`);
}
```
**결과**:
- ✅ 최고 관리자: 요청한 회사의 사용자 목록
- ✅ 회사 관리자: 자기 회사 사용자 목록
- ✅ 최고 관리자(`company_code = "*"`)는 **절대 목록에 표시되지 않음**
---
## 권한 체크 로직
### 1. `isSuperAdmin()`
**파일**: `backend-node/src/utils/permissionUtils.ts`
```typescript
export function isSuperAdmin(user: UserInfo | undefined): boolean {
if (!user) return false;
return user.companyCode === "*";
}
```
**사용**:
- 권한 그룹 목록 전체 조회 여부
- 다른 회사 데이터 접근 여부
- 모든 메뉴 조회 여부
### 2. `isCompanyAdmin()`
```typescript
export function isCompanyAdmin(user: UserInfo | undefined): boolean {
if (!user) return false;
return user.userType === "COMPANY_ADMIN";
}
```
**사용**:
- 권한 그룹 관리 접근 여부
- 메뉴 권한 설정 접근 여부
### 3. `canAccessCompanyData()`
```typescript
export function canAccessCompanyData(
user: UserInfo | undefined,
targetCompanyCode: string
): boolean {
if (!user) return false;
if (isSuperAdmin(user)) return true; // 슈퍼관리자는 모든 회사 접근 가능
return user.companyCode === targetCompanyCode; // 자기 회사만 접근 가능
}
```
**사용**:
- 권한 그룹 상세 조회 접근 여부
- 권한 그룹 수정/삭제 접근 여부
- 멤버 관리 접근 여부
- 메뉴 권한 설정 접근 여부
### 권한 체크 플로우
```mermaid
graph TD
A[API 요청] --> B{로그인 확인}
B -->|No| C[401 Unauthorized]
B -->|Yes| D{최고 관리자?}
D -->|Yes| E[모든 데이터 접근 허용]
D -->|No| F{회사 관리자?}
F -->|No| G[403 Forbidden]
F -->|Yes| H{자기 회사 데이터?}
H -->|No| I[403 Forbidden]
H -->|Yes| J[접근 허용]
```
---
## 💡 핵심 정리
### ✅ 최고 관리자가 할 수 있는 것
1. **권한 그룹 관리**
- ✅ 모든 회사의 권한 그룹 조회
- ✅ 어떤 회사에도 권한 그룹 생성 가능
- ✅ 다른 회사 권한 그룹 수정/삭제 가능
2. **메뉴 권한 설정**
- ✅ 모든 회사의 메뉴 조회 가능
- ✅ 어떤 권한 그룹에도 메뉴 권한 부여 가능
- ✅ 모든 메뉴에 대해 CRUD + Execute + Export 권한 설정
3. **멤버 관리**
- ✅ 어떤 회사 권한 그룹에도 멤버 추가 가능
- ✅ 다른 회사 사용자도 멤버로 추가 가능
- ⚠️ 단, 최고 관리자는 사용자 목록에서 필터링되므로 추가 불가
### ✅ 회사 관리자가 할 수 있는 것
1. **권한 그룹 관리**
- ✅ 자기 회사 권한 그룹만 조회
- ✅ 자기 회사에만 권한 그룹 생성 가능
- ✅ 자기 회사 권한 그룹만 수정/삭제 가능
2. **메뉴 권한 설정**
- ✅ 자기 회사 메뉴만 조회 가능
- ✅ 자기 회사 권한 그룹에만 메뉴 권한 부여 가능
- ✅ 자기 회사 메뉴에 대해서만 CRUD + Execute + Export 권한 설정
3. **멤버 관리**
- ✅ 자기 회사 권한 그룹에만 멤버 추가 가능
- ✅ 자기 회사 사용자만 멤버로 추가 가능
- ✅ 최고 관리자는 목록에서 절대 보이지 않음
### ❌ 제한 사항
1. **회사 관리자는 절대 할 수 없는 것**
- ❌ 다른 회사 권한 그룹 조회/수정/삭제
- ❌ 공통 메뉴(`company_code = "*"`) 조회
- ❌ 최고 관리자를 멤버로 추가
- ❌ 다른 회사 사용자를 멤버로 추가
2. **최고 관리자도 할 수 없는 것**
- ❌ 다른 최고 관리자를 권한 그룹 멤버로 추가 (사용자 목록 필터링으로 인해)
---
## 📊 권한 매트릭스
| 작업 | 최고 관리자 | 회사 관리자 | 일반 사용자 |
| ------------------ | ------------------- | ------------------------ | ----------- |
| **권한 그룹 조회** | ✅ 모든 회사 | ✅ 자기 회사만 | ❌ |
| **권한 그룹 생성** | ✅ 모든 회사 | ✅ 자기 회사만 | ❌ |
| **권한 그룹 수정** | ✅ 모든 회사 | ✅ 자기 회사만 | ❌ |
| **권한 그룹 삭제** | ✅ 모든 회사 | ✅ 자기 회사만 | ❌ |
| **메뉴 목록 조회** | ✅ 모든 회사 메뉴 | ✅ 자기 회사 메뉴만 | ❌ |
| **메뉴 권한 설정** | ✅ 모든 권한 그룹 | ✅ 자기 회사 권한 그룹만 | ❌ |
| **멤버 추가** | ✅ 모든 회사 사용자 | ✅ 자기 회사 사용자만 | ❌ |
| **멤버 제거** | ✅ 모든 회사 멤버 | ✅ 자기 회사 멤버만 | ❌ |
---
## 📝 작성자
- 작성: AI Assistant (Claude Sonnet 4.5)
- 검토 필요: 백엔드 개발자, 시스템 아키텍트
- 관련 파일:
- `backend-node/src/services/roleService.ts`
- `backend-node/src/controllers/roleController.ts`
- `backend-node/src/utils/permissionUtils.ts`
- `frontend/components/admin/RoleDetailManagement.tsx`

367
docs/권한_그룹_메뉴_필터링_가이드.md Normal file
View File

@ -0,0 +1,367 @@
# 권한 그룹 기반 메뉴 필터링 가이드
> 작성일: 2025-01-27
> 파일 위치: `backend-node/src/services/adminService.ts`
---
## 📋 목차
1. [개요](#개요)
2. [메뉴 필터링 로직](#메뉴-필터링-로직)
3. [데이터베이스 구조](#데이터베이스-구조)
4. [구현 상세](#구현-상세)
5. [테스트 시나리오](#테스트-시나리오)
---
## 개요
### ✅ 구현 완료 (2025-01-27)
사용자가 좌측 사이드바에서 볼 수 있는 메뉴는 **권한 그룹 기반**으로 필터링됩니다:
1. 사용자가 속한 권한 그룹 조회 (`authority_sub_user`)
2. 해당 권한 그룹의 메뉴 권한 확인 (`rel_menu_auth`)
3. **`read_yn = 'Y'`인 메뉴만 사이드바에 표시**
---
## 메뉴 필터링 로직
### 흐름도
```mermaid
graph TD
A[사용자 로그인] --> B{권한 그룹 조회}
B -->|권한 그룹 있음| C[rel_menu_auth 조회]
B -->|권한 그룹 없음| D[메뉴 없음]
C --> E{read_yn = 'Y'?}
E -->|Yes| F[메뉴 표시]
E -->|No| G[메뉴 숨김]
```
### 주요 단계
1. **권한 그룹 조회**
```sql
SELECT DISTINCT am.objid AS role_objid, am.auth_name
FROM authority_master am
JOIN authority_sub_user asu ON am.objid = asu.master_objid
WHERE asu.user_id = $1
AND am.status = 'active'
```
2. **메뉴 권한 필터링**
```sql
AND EXISTS (
SELECT 1
FROM rel_menu_auth rma
WHERE rma.menu_objid = MENU.OBJID
AND rma.auth_objid = ANY($2) -- 사용자의 권한 그룹 배열
AND rma.read_yn = 'Y' -- 읽기 권한이 있어야 함
)
```
3. **회사별 필터링** (기존 로직 유지)
- 최고 관리자: 공통 메뉴 (`company_code = '*'`)
- 회사 관리자/일반 사용자: 자기 회사 메뉴만
---
## 데이터베이스 구조
### 관련 테이블
```sql
-- 1. 권한 그룹 마스터
authority_master (
objid SERIAL PRIMARY KEY,
auth_name VARCHAR(200),
auth_code VARCHAR(100),
company_code VARCHAR(50),
status VARCHAR(20)
)
-- 2. 권한 그룹 멤버
authority_sub_user (
objid SERIAL PRIMARY KEY,
master_objid INTEGER, -- FK to authority_master
user_id VARCHAR(50) -- 사용자 ID
)
-- 3. 메뉴 권한
rel_menu_auth (
objid SERIAL PRIMARY KEY,
menu_objid INTEGER, -- FK to menu_info
auth_objid INTEGER, -- FK to authority_master
create_yn VARCHAR(1), -- 생성 권한
read_yn VARCHAR(1), -- 조회 권한 ⭐ 사이드바 표시 기준
update_yn VARCHAR(1), -- 수정 권한
delete_yn VARCHAR(1), -- 삭제 권한
execute_yn VARCHAR(1), -- 실행 권한
export_yn VARCHAR(1) -- 내보내기 권한
)
-- 4. 메뉴 정보
menu_info (
objid SERIAL PRIMARY KEY,
menu_name_kor VARCHAR(200),
menu_url VARCHAR(500),
parent_obj_id INTEGER,
company_code VARCHAR(50),
menu_type INTEGER, -- 0: 관리자, 1: 사용자
status VARCHAR(20)
)
```
### 관계도
```
user_info
└─ authority_sub_user (user_id)
└─ authority_master (master_objid)
└─ rel_menu_auth (auth_objid)
└─ menu_info (menu_objid)
```
---
## 구현 상세
### AdminService.getUserMenuList()
**파일**: `backend-node/src/services/adminService.ts`
**로직**:
```typescript
static async getUserMenuList(paramMap: any): Promise<any[]> {
const { userId, userCompanyCode, userType, userLang = "ko" } = paramMap;
// 1. 사용자가 속한 권한 그룹 조회
const userRoleGroups = await query<any>(
`
SELECT DISTINCT am.objid AS role_objid, am.auth_name
FROM authority_master am
JOIN authority_sub_user asu ON am.objid = asu.master_objid
WHERE asu.user_id = $1
AND am.status = 'active'
`,
[userId]
);
logger.info(`✅ 사용자 ${userId}가 속한 권한 그룹: ${userRoleGroups.length}개`);
// 2. 권한 그룹 기반 메뉴 필터 조건 생성
let authFilter = "";
let queryParams: any[] = [userLang];
let paramIndex = 2;
if (userRoleGroups.length > 0) {
// 권한 그룹이 있는 경우: read_yn = 'Y'인 메뉴만 필터링
const roleObjids = userRoleGroups.map((rg: any) => rg.role_objid);
authFilter = `
AND EXISTS (
SELECT 1
FROM rel_menu_auth rma
WHERE rma.menu_objid = MENU.OBJID
AND rma.auth_objid = ANY($${paramIndex})
AND rma.read_yn = 'Y'
)
`;
queryParams.push(roleObjids);
paramIndex++;
} else {
// 권한 그룹이 없는 경우: 메뉴 없음
logger.warn(`⚠️ 사용자 ${userId}는 권한 그룹이 없어 메뉴가 표시되지 않습니다.`);
return [];
}
// 3. 회사별 필터링 조건
let companyFilter = "";
if (userType === "SUPER_ADMIN" && userCompanyCode === "*") {
companyFilter = `AND MENU.COMPANY_CODE = '*'`;
} else {
companyFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`;
queryParams.push(userCompanyCode);
paramIndex++;
}
// 4. 메뉴 조회 쿼리 (WITH RECURSIVE)
const menuList = await query<any>(
`
WITH RECURSIVE v_menu(...) AS (
SELECT ...
FROM MENU_INFO MENU
WHERE PARENT_OBJ_ID = 0
AND MENU_TYPE = 1
AND STATUS = 'active'
${companyFilter}
${authFilter} -- ⭐ 권한 그룹 필터 적용
UNION ALL
SELECT ...
FROM MENU_INFO MENU_SUB
JOIN V_MENU ON MENU_SUB.PARENT_OBJ_ID = V_MENU.OBJID
WHERE MENU_SUB.STATUS = 'active'
${authFilter.replace(/MENU\\.OBJID/g, 'MENU_SUB.OBJID')} -- ⭐ 자식 메뉴에도 적용
)
SELECT ...
FROM v_menu A
...
ORDER BY PATH, SEQ
`,
queryParams
);
return menuList;
}
```
---
## 테스트 시나리오
### 시나리오 1: 최고 관리자가 권한 부여
**단계**:
1. 최고 관리자가 "테스트회사 2번"의 권한 그룹에 접속
2. "대시보드" 메뉴에 대해 `read_yn = 'Y'` 설정
3. 권한 저장
**결과**:
- ✅ 해당 권한 그룹에 속한 사용자들에게 "대시보드" 메뉴가 사이드바에 표시됨
- ✅ `read_yn = 'N'`인 다른 메뉴는 표시되지 않음
**로그 확인**:
```
✅ 사용자 user001가 속한 권한 그룹: 1개
- 권한 그룹: ["테스트회사2 관리자"]
✅ 권한 그룹 기반 메뉴 필터링 적용: 1개 그룹
✅ 좌측 사이드바 (COMPANY_ADMIN): 회사 20 메뉴만 표시
사용자 메뉴 목록 조회 결과: 5개
```
### 시나리오 2: 권한 그룹이 없는 사용자
**단계**:
1. 새로운 사용자 생성 (`user002`)
2. 권한 그룹에 추가하지 않음
3. 로그인
**결과**:
- ✅ 사이드바에 메뉴가 하나도 표시되지 않음
**로그 확인**:
```
✅ 사용자 user002가 속한 권한 그룹: 0개
⚠️ 사용자 user002는 권한 그룹이 없어 메뉴가 표시되지 않습니다.
사용자 메뉴 목록 조회 결과: 0개
```
### 시나리오 3: 여러 권한 그룹에 속한 사용자
**단계**:
1. 사용자 `user003`을 두 개의 권한 그룹에 추가
- 그룹 A: "대시보드" 메뉴 (`read_yn = 'Y'`)
- 그룹 B: "사용자 관리" 메뉴 (`read_yn = 'Y'`)
2. 로그인
**결과**:
- ✅ "대시보드"와 "사용자 관리" 메뉴가 모두 표시됨
- ✅ 두 그룹의 권한이 **OR 조건**으로 합쳐짐
**SQL 로직**:
```sql
AND EXISTS (
SELECT 1
FROM rel_menu_auth rma
WHERE rma.menu_objid = MENU.OBJID
AND rma.auth_objid = ANY(ARRAY[그룹A_ID, 그룹B_ID]) -- OR 조건
AND rma.read_yn = 'Y'
)
```
### 시나리오 4: 회사 관리자 vs 일반 사용자
**공통점**:
- 둘 다 자기 회사 메뉴만 조회
- 권한 그룹 기반 필터링 적용
**차이점**:
- **회사 관리자 (COMPANY_ADMIN)**: 권한 그룹 관리 가능
- **일반 사용자 (USER)**: 권한 그룹 관리 불가 (읽기 전용)
---
## 주의사항
### 1. 메뉴 계층 구조
- 부모 메뉴에 `read_yn = 'Y'`가 있어야 자식 메뉴도 표시됨
- 자식 메뉴만 권한이 있어도 부모가 없으면 접근 불가
**예시**:
```
📁 시스템 관리 (read_yn = 'N') ← 권한 없음
└─ 📄 사용자 관리 (read_yn = 'Y') ← 권한 있지만 부모가 없어서 접근 불가
```
**해결**:
- 부모 메뉴에도 `read_yn = 'Y'` 설정 필요
### 2. 권한 그룹 상태
- `authority_master.status = 'active'`인 그룹만 적용
- 비활성화된 그룹은 멤버가 있어도 권한 없음
### 3. 최고 관리자 예외
- 최고 관리자는 **공통 메뉴만** 조회
- 다른 회사 메뉴는 보이지 않음
- 최고 관리자도 권한 그룹에 속해야 메뉴가 보임 (일관성 유지)
### 4. 성능 고려사항
- `ANY($1)`: PostgreSQL 배열 연산자 사용으로 성능 최적화
- `EXISTS` 서브쿼리: 메뉴마다 권한 확인
- 인덱스 권장:
```sql
CREATE INDEX idx_rel_menu_auth_menu ON rel_menu_auth(menu_objid);
CREATE INDEX idx_rel_menu_auth_auth ON rel_menu_auth(auth_objid);
CREATE INDEX idx_authority_sub_user_user ON authority_sub_user(user_id);
```
---
## 관련 파일
- `backend-node/src/services/adminService.ts` - `getUserMenuList()` 메서드
- `backend-node/src/services/roleService.ts` - 권한 그룹 관리
- `backend-node/src/controllers/adminController.ts` - API 엔드포인트
- `frontend/contexts/MenuContext.tsx` - 프론트엔드 메뉴 Context
- `frontend/lib/api/menu.ts` - 메뉴 API 클라이언트
---
## 📝 작성자
- 작성: AI Assistant (Claude Sonnet 4.5)
- 검토 필요: 백엔드 개발자, 시스템 아키텍트

317
docs/권한_그룹_시스템_설계.md Normal file
View File

@ -0,0 +1,317 @@
# 권한 그룹 시스템 설계 (RBAC)
## 개요
회사 내에서 **역할 기반 접근 제어(RBAC - Role-Based Access Control)**를 통해 세밀한 권한 관리를 제공합니다.
## 기존 시스템 분석
### 현재 테이블 구조
#### 1. `authority_master` - 권한 그룹 마스터
```sql
CREATE TABLE authority_master (
objid NUMERIC PRIMARY KEY,
auth_name VARCHAR, -- 권한 그룹 이름 (예: "영업팀 권한", "개발팀 권한")
auth_code VARCHAR, -- 권한 코드 (예: "SALES_TEAM", "DEV_TEAM")
writer VARCHAR,
regdate TIMESTAMP,
status VARCHAR
);
```
#### 2. `authority_sub_user` - 권한 그룹 멤버
```sql
CREATE TABLE authority_sub_user (
objid NUMERIC PRIMARY KEY,
master_objid NUMERIC, -- authority_master.objid 참조
user_id VARCHAR, -- user_info.user_id 참조
writer VARCHAR,
regdate TIMESTAMP
);
```
#### 3. `rel_menu_auth` - 메뉴 권한 매핑
```sql
CREATE TABLE rel_menu_auth (
objid NUMERIC,
menu_objid NUMERIC, -- menu_info.objid 참조
auth_objid NUMERIC, -- authority_master.objid 참조
writer VARCHAR,
regdate TIMESTAMP,
create_yn VARCHAR, -- 생성 권한 (Y/N)
read_yn VARCHAR, -- 조회 권한 (Y/N)
update_yn VARCHAR, -- 수정 권한 (Y/N)
delete_yn VARCHAR -- 삭제 권한 (Y/N)
);
```
## 개선 사항
### 1. 회사별 권한 그룹 지원
**현재 문제점:**
- `authority_master` 테이블에 `company_code` 컬럼이 없음
- 모든 회사가 권한 그룹을 공유하게 됨
**해결 방안:**
```sql
-- 마이그레이션 028
ALTER TABLE authority_master ADD COLUMN company_code VARCHAR(20);
CREATE INDEX idx_authority_master_company ON authority_master(company_code);
-- 기존 데이터 마이그레이션 (기본값 설정)
UPDATE authority_master SET company_code = 'ILSHIN' WHERE company_code IS NULL;
```
### 2. 권한 레벨과 권한 그룹의 차이
| 구분 | 권한 레벨 (userType) | 권한 그룹 (authority_master) |
| ---------- | -------------------------------- | ------------------------------ |
| **목적** | 시스템 레벨 권한 | 메뉴별 세부 권한 |
| **범위** | 전역 (시스템 전체) | 회사별 (회사 내부) |
| **관리자** | 최고 관리자 (SUPER_ADMIN) | 회사 관리자 (COMPANY_ADMIN) |
| **예시** | SUPER_ADMIN, COMPANY_ADMIN, USER | "영업팀", "개발팀", "관리자팀" |
### 3. 2단계 권한 체계
```
┌─────────────────────────────────────────────────────────────┐
│ 1단계: 권한 레벨 (userType) │
│ - SUPER_ADMIN: 모든 회사 관리, DDL 실행 │
│ - COMPANY_ADMIN: 자기 회사 관리, 권한 그룹 생성 │
│ - USER: 자기 회사 데이터 조회/수정 │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 2단계: 권한 그룹 (authority_master) │
│ - 회사 내부에서 메뉴별 세부 권한 설정 │
│ - 생성(C), 조회(R), 수정(U), 삭제(D) 권한 제어 │
└─────────────────────────────────────────────────────────────┘
```
## 사용 시나리오
### 시나리오 1: 영업팀 권한 그룹
**요구사항:**
- 영업팀은 고객 관리, 계약 관리 메뉴만 접근 가능
- 고객 정보는 조회/수정 가능하지만 삭제 불가
- 계약은 생성/조회/수정 가능
**구현:**
```sql
-- 1. 권한 그룹 생성
INSERT INTO authority_master (objid, auth_name, auth_code, company_code, status)
VALUES (nextval('seq_authority'), '영업팀 권한', 'SALES_TEAM', 'COMPANY_1', 'active');
-- 2. 사용자 추가
INSERT INTO authority_sub_user (objid, master_objid, user_id)
VALUES
(nextval('seq_auth_sub'), 1, 'user1'),
(nextval('seq_auth_sub'), 1, 'user2');
-- 3. 메뉴 권한 설정
-- 고객 관리 메뉴
INSERT INTO rel_menu_auth (menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn)
VALUES (100, 1, 'N', 'Y', 'Y', 'N');
-- 계약 관리 메뉴
INSERT INTO rel_menu_auth (menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn)
VALUES (101, 1, 'Y', 'Y', 'Y', 'N');
```
### 시나리오 2: 개발팀 권한 그룹
**요구사항:**
- 개발팀은 모든 기술 메뉴 접근 가능
- 프로젝트, 코드 관리 메뉴는 모든 권한 보유
- 시스템 설정은 조회만 가능
**구현:**
```sql
-- 1. 권한 그룹 생성
INSERT INTO authority_master (objid, auth_name, auth_code, company_code, status)
VALUES (nextval('seq_authority'), '개발팀 권한', 'DEV_TEAM', 'COMPANY_1', 'active');
-- 2. 메뉴 권한 설정
INSERT INTO rel_menu_auth (menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn)
VALUES
(200, 2, 'Y', 'Y', 'Y', 'Y'), -- 프로젝트 관리 (모든 권한)
(201, 2, 'Y', 'Y', 'Y', 'Y'), -- 코드 관리 (모든 권한)
(202, 2, 'N', 'Y', 'N', 'N'); -- 시스템 설정 (조회만)
```
## 구현 단계
### Phase 1: 데이터베이스 마이그레이션
- [ ] `authority_master`에 `company_code` 추가
- [ ] 기존 데이터 마이그레이션
- [ ] 인덱스 생성
### Phase 2: 백엔드 API
- [ ] 권한 그룹 CRUD API
- `GET /api/admin/roles` - 회사별 권한 그룹 목록
- `POST /api/admin/roles` - 권한 그룹 생성
- `PUT /api/admin/roles/:id` - 권한 그룹 수정
- `DELETE /api/admin/roles/:id` - 권한 그룹 삭제
- [ ] 권한 그룹 멤버 관리 API
- `GET /api/admin/roles/:id/members` - 멤버 목록
- `POST /api/admin/roles/:id/members` - 멤버 추가
- `DELETE /api/admin/roles/:id/members/:userId` - 멤버 제거
- [ ] 메뉴 권한 매핑 API
- `GET /api/admin/roles/:id/menu-permissions` - 메뉴 권한 목록
- `PUT /api/admin/roles/:id/menu-permissions` - 메뉴 권한 설정
### Phase 3: 프론트엔드 UI
- [ ] 권한 그룹 관리 페이지 (`/admin/roles`)
- 권한 그룹 목록 (회사별 필터링)
- 권한 그룹 생성/수정/삭제
- [ ] 권한 그룹 상세 페이지 (`/admin/roles/:id`)
- 멤버 관리 (사용자 추가/제거)
- 메뉴 권한 설정 (CRUD 권한 토글)
- [ ] 사용자 관리 페이지 연동
- 사용자별 권한 그룹 할당
### Phase 4: 권한 체크 로직
- [ ] 미들웨어 개선
- 권한 레벨 체크 (기존)
- 권한 그룹 체크 (신규)
- 메뉴별 CRUD 권한 체크 (신규)
- [ ] 프론트엔드 가드
- 메뉴 표시/숨김
- 버튼 활성화/비활성화
## 권한 체크 플로우
```
사용자 요청
↓
1. 인증 체크 (로그인 여부)
↓
2. 권한 레벨 체크 (userType)
- SUPER_ADMIN: 모든 접근 허용
- COMPANY_ADMIN: 자기 회사만
- USER: 권한 그룹 체크로 이동
↓
3. 권한 그룹 체크 (authority_sub_user)
- 사용자가 속한 권한 그룹 조회
↓
4. 메뉴 권한 체크 (rel_menu_auth)
- 요청한 메뉴에 대한 권한 확인
- CRUD 권한 체크
↓
5. 접근 허용/거부
```
## 예상 UI 구조
### 권한 그룹 관리 페이지
```
┌─────────────────────────────────────────────────────────┐
│ 권한 그룹 관리 │
├─────────────────────────────────────────────────────────┤
│ [회사 선택: COMPANY_1 ▼] [검색: ____] [+ 그룹 생성] │
├─────────────────────────────────────────────────────────┤
│ ┌───────────────┬──────────┬──────────┬────────┐ │
│ │ 권한 그룹명 │ 코드 │ 멤버 수 │ 액션 │ │
│ ├───────────────┼──────────┼──────────┼────────┤ │
│ │ 영업팀 권한 │ SALES │ 5명 │ [수정] │ │
│ │ 개발팀 권한 │ DEV │ 8명 │ [수정] │ │
│ │ 관리자팀 │ ADMIN │ 2명 │ [수정] │ │
│ └───────────────┴──────────┴──────────┴────────┘ │
└─────────────────────────────────────────────────────────┘
```
### 권한 그룹 상세 페이지
```
┌─────────────────────────────────────────────────────────┐
│ 영업팀 권한 (SALES_TEAM) │
├─────────────────────────────────────────────────────────┤
│ 【 멤버 관리 】 │
│ [+ 멤버 추가] │
│ ┌──────────┬──────────┬────────┐ │
│ │ 사용자 ID │ 이름 │ 액션 │ │
│ ├──────────┼──────────┼────────┤ │
│ │ user1 │ 김철수 │ [제거] │ │
│ │ user2 │ 이영희 │ [제거] │ │
│ └──────────┴──────────┴────────┘ │
├─────────────────────────────────────────────────────────┤
│ 【 메뉴 권한 설정 】 │
│ ┌─────────────┬────┬────┬────┬────┐ │
│ │ 메뉴 │ 생성│ 조회│ 수정│ 삭제│ │
│ ├─────────────┼────┼────┼────┼────┤ │
│ │ 고객 관리 │ □ │ ☑ │ ☑ │ □ │ │
│ │ 계약 관리 │ ☑ │ ☑ │ ☑ │ □ │ │
│ │ 매출 분석 │ □ │ ☑ │ □ │ □ │ │
│ └─────────────┴────┴────┴────┴────┘ │
│ [저장] [취소] │
└─────────────────────────────────────────────────────────┘
```
## 마이그레이션 계획
### 028_add_company_code_to_authority_master.sql
```sql
-- 권한 그룹 테이블에 회사 코드 추가
ALTER TABLE authority_master ADD COLUMN IF NOT EXISTS company_code VARCHAR(20);
-- 인덱스 생성
CREATE INDEX IF NOT EXISTS idx_authority_master_company ON authority_master(company_code);
-- 기존 데이터 마이그레이션
UPDATE authority_master
SET company_code = 'ILSHIN'
WHERE company_code IS NULL;
-- NOT NULL 제약 조건 추가
ALTER TABLE authority_master ALTER COLUMN company_code SET NOT NULL;
ALTER TABLE authority_master ALTER COLUMN company_code SET DEFAULT 'ILSHIN';
-- 주석 추가
COMMENT ON COLUMN authority_master.company_code IS '회사 코드 (회사별 권한 그룹 격리)';
```
## 참고 사항
### 권한 우선순위
1. **SUPER_ADMIN**: 모든 권한 (권한 그룹 체크 생략)
2. **COMPANY_ADMIN**: 회사 내 모든 권한 (권한 그룹 체크 생략)
3. **USER**: 권한 그룹에 따른 메뉴별 권한
### 권한 그룹 vs 권한 레벨
- **권한 레벨**: 사용자 등록 시 최초 1회 설정 (최고 관리자가 변경)
- **권한 그룹**: 회사 관리자가 자유롭게 생성/관리, 사용자는 여러 그룹에 속할 수 있음
### 보안 고려사항
- 회사 관리자는 자기 회사의 권한 그룹만 관리 가능
- 최고 관리자는 모든 회사의 권한 그룹 관리 가능
- 권한 그룹 삭제 시 연결된 사용자/메뉴 권한도 함께 삭제 (CASCADE)
## 다음 단계
1. **마이그레이션 028 실행** → `company_code` 추가
2. **백엔드 API 개발** → 권한 그룹 CRUD
3. **프론트엔드 UI 개발** → 권한 그룹 관리 페이지
4. **권한 체크 로직 통합** → 미들웨어 개선
이 설계를 구현하시겠습니까?

307
docs/권한_시스템_마이그레이션_완료.md Normal file
View File

@ -0,0 +1,307 @@
# 권한 시스템 마이그레이션 완료 보고서
## 실행 완료 ✅
날짜: 2025-10-27
대상 데이터베이스: `plm` (39.117.244.52:11132)
---
## 실행된 마이그레이션
### 1. **028_add_company_code_to_authority_master.sql** ✅
**목적**: 권한 그룹 시스템 개선 (회사별 격리)
**주요 변경사항**:
- `authority_master.company_code` 컬럼 추가 (회사별 권한 그룹 격리)
- 외래 키 제약 조건 추가 (`authority_sub_user` ↔ `authority_master`, `user_info`)
- 권한 요약 뷰 생성 (`v_authority_group_summary`)
- 유틸리티 함수 생성 (`get_user_authority_groups`)
### 2. **031_add_menu_auth_columns.sql** ✅
**목적**: 메뉴 기반 권한 시스템 개선 (동적 화면 대응)
**주요 변경사항**:
- `menu_info.screen_code`, `menu_info.menu_code` 컬럼 추가
- `rel_menu_auth.execute_yn`, `rel_menu_auth.export_yn` 컬럼 추가
- 화면 생성 시 자동 메뉴 추가 트리거 (`auto_create_menu_for_screen`)
- 화면 삭제 시 자동 메뉴 비활성화 트리거 (`auto_deactivate_menu_for_screen`)
- 권한 체크 함수 (`check_menu_crud_permission`)
- 사용자 메뉴 조회 함수 (`get_user_menus_with_permissions`)
- 권한 요약 뷰 (`v_menu_permission_summary`)
---
## 현재 데이터베이스 구조
### 1. 권한 그룹 시스템
#### `authority_master` (권한 그룹)
```
objid | NUMERIC | 권한 그룹 ID (PK)
auth_name | VARCHAR(50) | 권한 그룹 이름
auth_code | VARCHAR(50) | 권한 그룹 코드
company_code | VARCHAR(20) | 회사 코드 ⭐ (회사별 격리)
status | VARCHAR(20) | 활성/비활성
```
#### `authority_sub_user` (권한 그룹 멤버)
```
master_objid | NUMERIC | 권한 그룹 ID (FK)
user_id | VARCHAR(50) | 사용자 ID (FK)
```
#### 현재 권한 그룹 현황
- COMPANY_1: 2개 그룹
- COMPANY_2: 2개 그룹
- COMPANY_3: 7개 그룹
- COMPANY_4: 2개 그룹
- ILSHIN: 3개 그룹
### 2. 메뉴 권한 시스템
#### `menu_info` (메뉴 정보)
```
objid | NUMERIC | 메뉴 ID (PK)
menu_name_kor | VARCHAR(64) | 메뉴 이름 (한글)
menu_name_eng | VARCHAR(64) | 메뉴 이름 (영어)
menu_code | VARCHAR(50) | 메뉴 코드 ⭐ (신규)
menu_url | VARCHAR(256) | 메뉴 URL
menu_type | NUMERIC | 메뉴 타입 (0=일반, 1=시스템, 2=동적생성 ⭐)
screen_code | VARCHAR(50) | 화면 코드 ⭐ (동적 메뉴 연동)
company_code | VARCHAR(50) | 회사 코드
parent_obj_id | NUMERIC | 부모 메뉴 ID
seq | NUMERIC | 정렬 순서
status | VARCHAR(32) | 상태
```
#### `rel_menu_auth` (메뉴별 권한)
```
menu_objid | NUMERIC | 메뉴 ID (FK)
auth_objid | NUMERIC | 권한 그룹 ID (FK)
create_yn | VARCHAR(50) | 생성 권한
read_yn | VARCHAR(50) | 읽기 권한
update_yn | VARCHAR(50) | 수정 권한
delete_yn | VARCHAR(50) | 삭제 권한
execute_yn | CHAR(1) | 실행 권한 ⭐ (신규)
export_yn | CHAR(1) | 내보내기 권한 ⭐ (신규)
```
---
## 자동화 기능
### 1. 화면 생성 시 자동 메뉴 추가 🤖
```sql
-- 사용자가 화면 생성
INSERT INTO screen_definitions (screen_name, screen_code, company_code, ...)
VALUES ('계약 관리', 'SCR_CONTRACT', 'ILSHIN', ...);
-- ↓ 트리거 자동 실행 ↓
-- menu_info에 자동 추가됨!
-- menu_type = 2 (동적 생성)
-- screen_code = 'SCR_CONTRACT'
-- menu_url = '/screen/SCR_CONTRACT'
```
### 2. 화면 삭제 시 자동 메뉴 비활성화 🤖
```sql
-- 화면 삭제
UPDATE screen_definitions
SET is_active = 'D'
WHERE screen_code = 'SCR_CONTRACT';
-- ↓ 트리거 자동 실행 ↓
-- 메뉴 비활성화됨!
UPDATE menu_info
SET status = 'inactive'
WHERE screen_code = 'SCR_CONTRACT';
```
---
## 사용 가이드
### 1. 권한 그룹 생성
```sql
-- 예: ILSHIN 회사의 "개발팀" 권한 그룹 생성
INSERT INTO authority_master (objid, auth_name, auth_code, company_code, status, writer, regdate)
VALUES (nextval('seq_authority_master'), '개발팀', 'DEV_TEAM', 'ILSHIN', 'active', 'admin', NOW());
```
### 2. 권한 그룹에 멤버 추가
```sql
-- 예: '개발팀'에 사용자 'dev1' 추가
INSERT INTO authority_sub_user (master_objid, user_id)
VALUES (
(SELECT objid FROM authority_master WHERE auth_code = 'DEV_TEAM' AND company_code = 'ILSHIN'),
'dev1'
);
```
### 3. 메뉴 권한 설정
```sql
-- 예: '개발팀'에게 특정 메뉴의 CRUD 권한 부여
INSERT INTO rel_menu_auth (menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn, execute_yn, export_yn, writer)
VALUES (
1005, -- 메뉴 ID
(SELECT objid FROM authority_master WHERE auth_code = 'DEV_TEAM' AND company_code = 'ILSHIN'),
'Y', 'Y', 'Y', 'Y', 'Y', 'N', -- CRUD + Execute 권한
'admin'
);
```
### 4. 사용자 권한 확인
```sql
-- 예: 'dev1' 사용자가 메뉴 1005를 수정할 수 있는지 확인
SELECT check_menu_crud_permission('dev1', 1005, 'update');
-- 결과: TRUE 또는 FALSE
-- 예: 'dev1' 사용자가 접근 가능한 모든 메뉴 조회
SELECT * FROM get_user_menus_with_permissions('dev1', 'ILSHIN');
```
---
## 다음 단계
### 1. 백엔드 API 구현
**필요한 API**:
- `GET /api/roles/:id/menu-permissions` - 권한 그룹의 메뉴 권한 조회
- `POST /api/roles/:id/menu-permissions` - 메뉴 권한 설정
- `GET /api/users/menus` - 현재 사용자가 접근 가능한 메뉴 목록
- `POST /api/menu-permissions/check` - 특정 메뉴에 대한 권한 확인
**구현 파일**:
- `backend-node/src/services/RoleService.ts`
- `backend-node/src/controllers/roleController.ts`
- `backend-node/src/middleware/permissionMiddleware.ts`
### 2. 프론트엔드 UI 개발
**필요한 페이지/컴포넌트**:
1. **권한 그룹 상세 페이지** (`/admin/roles/[id]`)
- 기본 정보 (이름, 코드, 회사)
- 멤버 관리 (Dual List Box) ✅ 이미 구현됨
- **메뉴 권한 설정** (체크박스 그리드) ⬅️ 신규 개발 필요
2. **메뉴 권한 설정 그리드**
```
┌─────────────────┬────────┬────────┬────────┬────────┬────────┬────────┐
│ 메뉴 │ 생성 │ 읽기 │ 수정 │ 삭제 │ 실행 │ 내보내기│
├─────────────────┼────────┼────────┼────────┼────────┼────────┼────────┤
│ 대시보드 │ ☐ │ ☑ │ ☐ │ ☐ │ ☐ │ ☐ │
│ 계약 관리 │ ☑ │ ☑ │ ☑ │ ☐ │ ☐ │ ☑ │
│ 사용자 관리 │ ☐ │ ☑ │ ☐ │ ☐ │ ☐ │ ☐ │
└─────────────────┴────────┴────────┴────────┴────────┴────────┴────────┘
```
3. **네비게이션 메뉴** (사용자별 권한 필터링)
- `get_user_menus_with_permissions` 함수 활용
- 읽기 권한이 있는 메뉴만 표시
4. **버튼/액션 권한 제어**
- 생성 버튼: `can_create`
- 수정 버튼: `can_update`
- 삭제 버튼: `can_delete`
- 실행 버튼: `can_execute` (플로우, DDL)
- 내보내기 버튼: `can_export`
**구현 파일**:
- `frontend/components/admin/RoleDetailManagement.tsx` (메뉴 권한 탭 추가)
- `frontend/components/admin/MenuPermissionGrid.tsx` (신규)
- `frontend/lib/api/role.ts` (메뉴 권한 API 추가)
- `frontend/hooks/useMenuPermission.ts` (신규)
### 3. 테스트 시나리오
**시나리오 1: 영업팀 권한 설정**
1. 영업팀 권한 그룹 생성
2. 멤버 추가 (3명)
3. 메뉴 권한 설정:
- 대시보드: 읽기만
- 계약 관리: CRUD + 내보내기
- 플로우 관리: 읽기 + 실행
4. 영업팀 사용자로 로그인하여 검증
**시나리오 2: 동적 화면 생성 및 권한 설정**
1. "배송 현황" 화면 생성
2. 자동으로 메뉴 추가 확인
3. 영업팀에게 읽기 권한 부여
4. 영업팀 사용자 로그인하여 메뉴 표시 확인
---
## 주의사항
### 1. 기존 데이터 호환성
- 기존 `menu_info` 테이블 구조는 그대로 유지
- 새로운 컬럼만 추가되어 기존 데이터에 영향 없음
### 2. 권한 타입 매핑
- `menu_type`이 `numeric`에서 `VARCHAR`로 변경되지 않음 (기존 구조 유지)
- `menu_type = 2`가 동적 생성 메뉴를 의미
### 3. 데이터 마이그레이션 불필요
- 기존 권한 데이터는 그대로 유지
- 새로운 권한 그룹은 수동으로 설정 필요
---
## 검증 체크리스트
- [x] `authority_master.company_code` 컬럼 존재 확인
- [x] `menu_info.screen_code`, `menu_info.menu_code` 컬럼 존재 확인
- [x] `rel_menu_auth.execute_yn`, `rel_menu_auth.export_yn` 컬럼 존재 확인
- [x] 트리거 함수 생성 확인 (`auto_create_menu_for_screen`, `auto_deactivate_menu_for_screen`)
- [x] 권한 체크 함수 생성 확인 (`check_menu_crud_permission`)
- [x] 사용자 메뉴 조회 함수 생성 확인 (`get_user_menus_with_permissions`)
- [x] 권한 요약 뷰 생성 확인 (`v_menu_permission_summary`)
- [ ] 백엔드 API 구현
- [ ] 프론트엔드 UI 구현
- [ ] 테스트 시나리오 실행
---
## 관련 문서
- `docs/메뉴_기반_권한_시스템_가이드.md` - 사용자 가이드
- `docs/권한_체계_가이드.md` - 3단계 권한 체계 개요
- `db/migrations/028_add_company_code_to_authority_master.sql` - 권한 그룹 마이그레이션
- `db/migrations/031_add_menu_auth_columns.sql` - 메뉴 권한 마이그레이션
---
## 문의사항
기술적 문의사항이나 추가 기능 요청은 개발팀에 문의하세요.

589
docs/권한_체계_가이드.md Normal file
View File

@ -0,0 +1,589 @@
# 3단계 권한 체계 가이드
## 📋 목차
1. [권한 체계 개요](#권한-체계-개요)
2. [권한 레벨 상세](#권한-레벨-상세)
3. [데이터베이스 설정](#데이터베이스-설정)
4. [백엔드 구현](#백엔드-구현)
5. [프론트엔드 구현](#프론트엔드-구현)
6. [실무 예제](#실무-예제)
7. [FAQ](#faq)
---
## 권한 체계 개요
### 3단계 권한 구조
```
┌────────────────────┬──────────────┬─────────────────┬────────────────────────┐
│ 권한 레벨 │ company_code │ user_type │ 접근 범위 │
├────────────────────┼──────────────┼─────────────────┼────────────────────────┤
│ 최고 관리자 │ * │ SUPER_ADMIN │ ✅ 전체 회사 데이터 │
│ (Super Admin) │ │ │ ✅ DDL 실행 권한 │
│ │ │ │ ✅ 회사 생성/삭제 │
│ │ │ │ ✅ 시스템 설정 │
├────────────────────┼──────────────┼─────────────────┼────────────────────────┤
│ 회사 관리자 │ 20 │ COMPANY_ADMIN │ ✅ 자기 회사 데이터 │
│ (Company Admin) │ │ │ ✅ 회사 사용자 관리 │
│ │ │ │ ✅ 회사 설정 변경 │
│ │ │ │ ❌ DDL 실행 불가 │
│ │ │ │ ❌ 타회사 접근 불가 │
├────────────────────┼──────────────┼─────────────────┼────────────────────────┤
│ 일반 사용자 │ 20 │ USER │ ✅ 자기 회사 데이터 │
│ (User) │ │ │ ❌ 사용자 관리 불가 │
│ │ │ │ ❌ 설정 변경 불가 │
└────────────────────┴──────────────┴─────────────────┴────────────────────────┘
```
### 핵심 원칙
1. **company_code = "\*"** → 전체 시스템 접근 (슈퍼관리자 전용)
2. **company_code = "특정코드"** → 해당 회사만 접근
3. **user_type** → 회사 내 권한 레벨 결정
---
## 권한 레벨 상세
### 1️⃣ 슈퍼관리자 (SUPER_ADMIN)
**조건:**
- `company_code = '*'`
- `user_type = 'SUPER_ADMIN'`
**권한:**
- ✅ 모든 회사 데이터 조회/수정
- ✅ DDL 실행 (CREATE TABLE, ALTER TABLE 등)
- ✅ 회사 생성/삭제
- ✅ 시스템 설정 변경
- ✅ 모든 사용자 관리
- ✅ 코드 관리, 템플릿 관리 등 전역 설정
**사용 사례:**
- 시스템 전체 관리자
- 데이터베이스 스키마 변경
- 새로운 회사 추가
- 전사 공통 설정 관리
**계정 예시:**
```sql
INSERT INTO user_info (user_id, user_name, company_code, user_type)
VALUES ('super_admin', '시스템 관리자', '*', 'SUPER_ADMIN');
```
---
### 2️⃣ 회사 관리자 (COMPANY_ADMIN)
**조건:**
- `company_code = '특정 회사 코드'` (예: '20')
- `user_type = 'COMPANY_ADMIN'`
**권한:**
- ✅ 자기 회사 데이터 조회/수정
- ✅ 자기 회사 사용자 관리 (추가/수정/삭제)
- ✅ 자기 회사 설정 변경
- ✅ 자기 회사 대시보드/화면 관리
- ❌ DDL 실행 불가
- ❌ 타 회사 데이터 접근 불가
- ❌ 시스템 전역 설정 변경 불가
**사용 사례:**
- 각 회사의 IT 관리자
- 회사 내 사용자 계정 관리
- 회사별 커스터마이징 설정
**계정 예시:**
```sql
INSERT INTO user_info (user_id, user_name, company_code, user_type)
VALUES ('company_admin_20', '회사20 관리자', '20', 'COMPANY_ADMIN');
```
---
### 3️⃣ 일반 사용자 (USER)
**조건:**
- `company_code = '특정 회사 코드'` (예: '20')
- `user_type = 'USER'`
**권한:**
- ✅ 자기 회사 데이터 조회/수정
- ✅ 자신이 만든 화면/대시보드 관리
- ❌ 사용자 관리 불가
- ❌ 회사 설정 변경 불가
- ❌ 타 회사 데이터 접근 불가
**사용 사례:**
- 일반 업무 사용자
- 데이터 입력/조회
- 개인 대시보드 생성
**계정 예시:**
```sql
INSERT INTO user_info (user_id, user_name, company_code, user_type)
VALUES ('user_kim', '김철수', '20', 'USER');
```
---
## 데이터베이스 설정
### 마이그레이션 실행
```bash
# 권한 체계 마이그레이션 실행
psql -U postgres -d your_database -f db/migrations/026_add_user_type_hierarchy.sql
```
### 주요 변경사항
1. **코드 테이블 업데이트:**
- `ADMIN` → `COMPANY_ADMIN` 으로 변경
- `SUPER_ADMIN` 신규 추가
2. **PostgreSQL 함수 추가:**
- `is_super_admin(user_id)` - 슈퍼관리자 확인
- `is_company_admin(user_id, company_code)` - 회사 관리자 확인
- `can_access_company_data(user_id, company_code)` - 데이터 접근 권한
3. **권한 뷰 생성:**
- `v_user_permissions` - 사용자별 권한 요약
---
## 백엔드 구현
### 1. 권한 체크 유틸리티 사용
```typescript
import {
isSuperAdmin,
isCompanyAdmin,
isAdmin,
canExecuteDDL,
canAccessCompanyData,
canManageUsers,
} from "../utils/permissionUtils";
// 슈퍼관리자 확인
if (isSuperAdmin(req.user)) {
// 전체 데이터 조회
}
// 회사 데이터 접근 권한 확인
if (canAccessCompanyData(req.user, targetCompanyCode)) {
// 해당 회사 데이터 조회
}
// 사용자 관리 권한 확인
if (canManageUsers(req.user, targetCompanyCode)) {
// 사용자 추가/수정/삭제
}
```
### 2. 미들웨어 사용
```typescript
import {
requireSuperAdmin,
requireAdmin,
requireCompanyAccess,
requireUserManagement,
requireDDLPermission,
} from "../middleware/permissionMiddleware";
// 슈퍼관리자 전용 엔드포인트
router.post(
"/api/admin/ddl/execute",
authenticate,
requireDDLPermission,
ddlController.execute
);
// 관리자 전용 엔드포인트 (슈퍼관리자 + 회사관리자)
router.get(
"/api/admin/users",
authenticate,
requireAdmin,
userController.getUserList
);
// 회사 데이터 접근 체크
router.get(
"/api/data/:companyCode/orders",
authenticate,
requireCompanyAccess,
orderController.getOrders
);
// 사용자 관리 권한 체크
router.post(
"/api/admin/users/:companyCode",
authenticate,
requireUserManagement,
userController.createUser
);
```
### 3. 서비스 레이어 구현
```typescript
// ❌ 잘못된 방법 - 하드코딩된 회사 코드
async getOrders(companyCode: string) {
return query("SELECT * FROM orders WHERE company_code = $1", [companyCode]);
}
// ✅ 올바른 방법 - 권한 체크 포함
async getOrders(user: PersonBean, companyCode: string) {
// 권한 확인
if (!canAccessCompanyData(user, companyCode)) {
throw new Error("해당 회사 데이터에 접근할 권한이 없습니다.");
}
// 슈퍼관리자는 모든 데이터 조회 가능
if (isSuperAdmin(user)) {
if (companyCode === "*") {
return query("SELECT * FROM orders"); // 전체 조회
}
}
// 일반 사용자/회사 관리자는 자기 회사만
return query("SELECT * FROM orders WHERE company_code = $1", [companyCode]);
}
```
---
## 프론트엔드 구현
### 1. 사용자 타입 정의
```typescript
// frontend/types/user.ts
export interface UserInfo {
userId: string;
userName: string;
companyCode: string;
userType: string; // 'SUPER_ADMIN' | 'COMPANY_ADMIN' | 'USER'
isSuperAdmin?: boolean;
isCompanyAdmin?: boolean;
isAdmin?: boolean;
}
```
### 2. 권한 기반 UI 렌더링
```tsx
import { useAuth } from "@/hooks/useAuth";
function AdminPanel() {
const { user } = useAuth();
return (
<div>
{/* 슈퍼관리자만 표시 */}
{user?.isSuperAdmin && (
<Button onClick={handleDDLExecution}>DDL 실행</Button>
)}
{/* 관리자만 표시 (슈퍼관리자 + 회사관리자) */}
{user?.isAdmin && (
<Button onClick={handleUserManagement}>사용자 관리</Button>
)}
{/* 모든 사용자 표시 */}
<Button onClick={handleDataView}>데이터 조회</Button>
</div>
);
}
```
### 3. 권한 체크 Hook
```typescript
// frontend/hooks/usePermissions.ts
export function usePermissions() {
const { user } = useAuth();
return {
isSuperAdmin: user?.isSuperAdmin ?? false,
isCompanyAdmin: user?.isCompanyAdmin ?? false,
isAdmin: user?.isAdmin ?? false,
canExecuteDDL: user?.isSuperAdmin ?? false,
canManageUsers: user?.isAdmin ?? false,
canAccessCompany: (companyCode: string) => {
if (user?.isSuperAdmin) return true;
return user?.companyCode === companyCode;
},
};
}
// 사용 예시
function DataTable({ companyCode }: { companyCode: string }) {
const { canAccessCompany } = usePermissions();
if (!canAccessCompany(companyCode)) {
return <div>접근 권한이 없습니다.</div>;
}
return <Table data={data} />;
}
```
---
## 실무 예제
### 예제 1: 주문 데이터 조회
**시나리오:**
- 슈퍼관리자: 모든 회사의 주문 조회
- 회사20 관리자: 회사20의 주문만 조회
- 회사20 사용자: 회사20의 주문만 조회
**백엔드 구현:**
```typescript
// orders.service.ts
export class OrderService {
async getOrders(user: PersonBean, companyCode?: string) {
let sql = "SELECT * FROM orders WHERE 1=1";
const params: any[] = [];
// 슈퍼관리자가 아닌 경우 회사 필터 적용
if (!isSuperAdmin(user)) {
sql += " AND company_code = $1";
params.push(user.companyCode);
} else if (companyCode && companyCode !== "*") {
// 슈퍼관리자가 특정 회사를 지정한 경우
sql += " AND company_code = $1";
params.push(companyCode);
}
return query(sql, params);
}
}
```
**프론트엔드 구현:**
```tsx
function OrderList() {
const { user } = useAuth();
const [selectedCompany, setSelectedCompany] = useState(user?.companyCode);
// 슈퍼관리자는 회사 선택 가능
const showCompanySelector = user?.isSuperAdmin;
return (
<div>
{showCompanySelector && (
<Select value={selectedCompany} onChange={setSelectedCompany}>
<option value="*">전체 회사</option>
<option value="20">회사 20</option>
<option value="30">회사 30</option>
</Select>
)}
<OrderTable companyCode={selectedCompany} />
</div>
);
}
```
---
### 예제 2: 사용자 관리
**시나리오:**
- 슈퍼관리자: 모든 회사의 사용자 관리
- 회사20 관리자: 회사20 사용자만 관리
- 회사20 사용자: 사용자 관리 불가
**백엔드 구현:**
```typescript
// users.controller.ts
router.post("/api/admin/users", authenticate, async (req, res) => {
const { companyCode, userId, userName } = req.body;
// 권한 확인
if (!canManageUsers(req.user, companyCode)) {
return res.status(403).json({
success: false,
error: "사용자 관리 권한이 없습니다.",
});
}
// 슈퍼관리자가 아닌 경우, 자기 회사만 가능
if (!isSuperAdmin(req.user) && companyCode !== req.user.companyCode) {
return res.status(403).json({
success: false,
error: "다른 회사의 사용자를 생성할 수 없습니다.",
});
}
// 사용자 생성
await UserService.createUser({ companyCode, userId, userName });
res.json({ success: true });
});
```
---
### 예제 3: DDL 실행 (테이블 생성)
**시나리오:**
- 슈퍼관리자만 DDL 실행 가능
- 다른 모든 사용자는 차단
**백엔드 구현:**
```typescript
// ddl.controller.ts
router.post(
"/api/admin/ddl/execute",
authenticate,
requireDDLPermission, // 슈퍼관리자 체크 미들웨어
async (req, res) => {
const { sql } = req.body;
// 추가 보안 검증
if (!canExecuteDDL(req.user)) {
return res.status(403).json({
success: false,
error: "DDL 실행 권한이 없습니다.",
});
}
// DDL 실행
await query(sql);
// 감사 로그 기록
await AuditService.logDDL({
userId: req.user.userId,
sql,
timestamp: new Date(),
});
res.json({ success: true });
}
);
```
**프론트엔드 구현:**
```tsx
function DDLExecutor() {
const { user } = useAuth();
// 슈퍼관리자가 아니면 컴포넌트 자체를 숨김
if (!user?.isSuperAdmin) {
return null;
}
return (
<div>
<h2>DDL 실행 (슈퍼관리자 전용)</h2>
<textarea placeholder="SQL 입력" />
<Button onClick={handleExecute}>실행</Button>
</div>
);
}
```
---
## FAQ
### Q1: 기존 ADMIN 계정은 어떻게 되나요?
**A:** 마이그레이션 스크립트가 자동으로 처리합니다:
- `company_code = '*'`인 ADMIN → `SUPER_ADMIN`으로 변경
- `company_code = '특정코드'`인 ADMIN → `COMPANY_ADMIN`으로 변경
### Q2: 슈퍼관리자 계정은 몇 개가 적절한가요?
**A:** 보안상 최소 1개, 최대 2-3개를 권장합니다. 모든 DDL 실행이 감사 로그에 기록되므로 책임 추적이 가능합니다.
### Q3: 회사 관리자가 다른 회사 데이터를 조회하려면?
**A:** 불가능합니다. 회사 간 데이터 격리가 필수입니다. 필요시 슈퍼관리자에게 요청하거나, API 통합 기능을 사용해야 합니다.
### Q4: USER가 COMPANY_ADMIN으로 승격하려면?
**A:**
1. 슈퍼관리자 또는 해당 회사의 관리자가 처리
2. `UPDATE user_info SET user_type = 'COMPANY_ADMIN' WHERE user_id = 'xxx'`
3. 사용자 재로그인 필요
### Q5: 회사 코드 '\*'의 의미는?
**A:** 와일드카드로, "모든 회사"를 의미합니다. 슈퍼관리자 전용 코드이며, 일반 회사 코드로는 사용할 수 없습니다.
### Q6: 권한 체크는 어디서 해야 하나요?
**A:**
- **백엔드 (필수)**: 미들웨어 + 서비스 레이어 모두
- **프론트엔드 (선택)**: UI 렌더링 최적화용 (보안 목적 아님)
### Q7: 테이블에 회사 필터링을 추가하려면?
**A:**
1. 테이블에 `company_code` 컬럼 추가
2. `backend-node/src/services/dataService.ts`의 `COMPANY_FILTERED_TABLES` 배열에 테이블명 추가
3. 자동으로 회사 필터링 적용됨
---
## 체크리스트
### 새로운 엔드포인트 추가 시
- [ ] 적절한 권한 미들웨어 적용 (`requireSuperAdmin`, `requireAdmin` 등)
- [ ] 서비스 레이어에서 `canAccessCompanyData()` 체크
- [ ] 감사 로그 기록 (중요 작업의 경우)
- [ ] 프론트엔드 UI에 권한 기반 렌더링 적용
- [ ] 에러 메시지에 필요한 권한 레벨 명시
### 새로운 테이블 생성 시
- [ ] `company_code` 컬럼 추가 (회사별 데이터인 경우)
- [ ] `COMPANY_FILTERED_TABLES` 배열에 등록
- [ ] 인덱스 생성: `CREATE INDEX ON table_name(company_code)`
- [ ] Row Level Security 정책 고려 (선택사항)
---
## 참고 파일
- 마이그레이션: `/db/migrations/026_add_user_type_hierarchy.sql`
- 권한 유틸: `/backend-node/src/utils/permissionUtils.ts`
- 미들웨어: `/backend-node/src/middleware/permissionMiddleware.ts`
- 타입 정의: `/backend-node/src/types/auth.ts`
- 인증 서비스: `/backend-node/src/services/authService.ts`

416
docs/리소스_기반_권한_시스템_가이드.md Normal file
View File

@ -0,0 +1,416 @@
# 리소스 기반 권한 시스템 가이드
## 개요
동적으로 화면과 테이블을 생성하는 Low-Code 플랫폼에 맞춘 **리소스 기반 권한 시스템**입니다.
전통적인 "메뉴" 개념 대신, **"리소스 타입"**(화면, 테이블, 플로우 등)에 대한 **세밀한 CRUD 권한**을 관리합니다.
## 왜 메뉴 기반이 아닌가?
### 문제점
- 현재 시스템은 **동적으로 화면(`screen_definitions`)을 생성**
- 사용자가 **DDL을 실행하여 테이블을 동적으로 생성**
- **메뉴는 고정되어 있지 않음** (사용자가 생성한 화면 = 새로운 "메뉴")
### 해결책
- **리소스 타입** (SCREEN, TABLE, FLOW, DASHBOARD 등) 기반 권한
- **특정 리소스 ID** 또는 **전체 타입**에 대한 권한 부여
- **6가지 세밀한 권한**: Create, Read, Update, Delete, Execute, Export
---
## 시스템 구조
### 1. 리소스 타입 (`resource_types`)
| type_code | type_name | description |
| --------- | --------- | ------------------------------ |
| SCREEN | 화면 | 동적으로 생성된 화면 |
| TABLE | 테이블 | 동적으로 생성된 데이터 테이블 |
| FLOW | 플로우 | 데이터 플로우 |
| DASHBOARD | 대시보드 | 대시보드 |
| REPORT | 리포트 | 리포트 |
| API | API | 외부 API 호출 |
| FILE | 파일 | 파일 업로드/다운로드 |
| SYSTEM | 시스템 | 시스템 설정 (SUPER_ADMIN 전용) |
### 2. 권한 그룹 (`authority_master`)
기존 테이블 활용 (회사별 격리 지원):
- `objid`: 권한 그룹 ID
- `auth_name`: 권한 그룹 이름 (예: "영업팀", "개발팀")
- `auth_code`: 권한 그룹 코드
- `company_code`: 회사 코드
- `status`: 활성/비활성
### 3. 리소스별 권한 (`resource_permissions`)
| 컬럼 | 타입 | 설명 |
| ------------- | ------------ | --------------------------------- |
| role_group_id | INTEGER | 권한 그룹 ID (FK) |
| resource_type | VARCHAR(50) | 리소스 타입 (SCREEN, TABLE 등) |
| resource_id | VARCHAR(255) | 특정 리소스 ID (**NULL = 전체**) |
| can_create | BOOLEAN | 생성 권한 |
| can_read | BOOLEAN | 읽기 권한 |
| can_update | BOOLEAN | 수정 권한 |
| can_delete | BOOLEAN | 삭제 권한 |
| can_execute | BOOLEAN | 실행 권한 (플로우 실행, DDL 실행) |
| can_export | BOOLEAN | 내보내기 권한 |
**핵심**: `resource_id`가 **NULL**이면 해당 타입 **전체**에 대한 권한
### 4. 사용자별 직접 권한 (`user_resource_permissions`)
권한 그룹 외에 **개별 사용자에게 직접 권한** 부여 가능 (보조적 사용)
---
## 권한 체크 로직
### 우선순위
1. **SUPER_ADMIN** (`company_code = '*'`, `user_type = 'SUPER_ADMIN'`)
- 모든 권한 (무조건 TRUE)
2. **COMPANY_ADMIN** (`user_type = 'COMPANY_ADMIN'`)
- 자기 회사 모든 리소스 권한 (단, `SYSTEM` 타입 제외)
3. **권한 그룹 기반 권한** (`authority_sub_user` → `resource_permissions`)
- 사용자가 속한 권한 그룹의 권한
4. **개별 권한** (`user_resource_permissions`)
- 사용자에게 직접 부여된 권한
**최종 판정**: `권한 그룹 권한 OR 개별 권한` (하나라도 TRUE이면 허용)
---
## 사용 예시
### 예시 1: 영업팀에게 모든 화면 읽기 권한 부여
```sql
-- 1. 영업팀 권한 그룹 ID 조회
SELECT objid FROM authority_master
WHERE auth_code = 'SALES_TEAM' AND company_code = 'ILSHIN';
-- 결과: objid = 1001
-- 2. 화면(SCREEN) 전체에 대한 읽기 권한 부여
INSERT INTO resource_permissions (role_group_id, resource_type, resource_id, can_read, created_by)
VALUES (1001, 'SCREEN', NULL, TRUE, 'admin');
-- ^^^^ ^^^^ NULL = 모든 화면
```
### 예시 2: 특정 화면에만 수정 권한 부여
```sql
-- 특정 화면 ID: 'SCR_SALES_REPORT' (screen_definitions.screen_code)
INSERT INTO resource_permissions (role_group_id, resource_type, resource_id, can_read, can_update, created_by)
VALUES (1001, 'SCREEN', 'SCR_SALES_REPORT', TRUE, TRUE, 'admin');
-- ^^^^^^^^^^^^^^^^^ 특정 화면만
```
### 예시 3: 테이블 CRUD 권한 부여 (삭제 제외)
```sql
-- 모든 테이블에 대해 CRU (Create, Read, Update) 권한 부여
INSERT INTO resource_permissions (
role_group_id, resource_type, resource_id,
can_create, can_read, can_update, can_delete,
created_by
)
VALUES (1001, 'TABLE', NULL, TRUE, TRUE, TRUE, FALSE, 'admin');
```
### 예시 4: 플로우 실행 권한 부여
```sql
-- 특정 플로우만 실행 가능
INSERT INTO resource_permissions (
role_group_id, resource_type, resource_id,
can_read, can_execute,
created_by
)
VALUES (1001, 'FLOW', '29', TRUE, TRUE, 'admin');
-- ^^ flow_definition.id
```
### 예시 5: 개별 사용자에게 직접 권한 부여
```sql
-- 'john.doe' 사용자에게 시스템 설정 읽기 권한
INSERT INTO user_resource_permissions (
user_id, resource_type, resource_id, can_read, created_by
)
VALUES ('john.doe', 'SYSTEM', NULL, TRUE, 'admin');
```
---
## 백엔드 API 사용법
### 1. 권한 체크 함수
```sql
-- 사용자 'john.doe'가 화면 'SCR_SALES_REPORT'를 읽을 수 있는지 확인
SELECT check_user_resource_permission('john.doe', 'SCREEN', 'SCR_SALES_REPORT', 'read');
-- 결과: TRUE 또는 FALSE
-- 테이블 'contract_mgmt'를 삭제할 수 있는지 확인
SELECT check_user_resource_permission('john.doe', 'TABLE', 'contract_mgmt', 'delete');
```
### 2. 접근 가능한 리소스 목록 조회
```sql
-- 사용자 'john.doe'가 읽을 수 있는 모든 화면 목록
SELECT * FROM get_user_accessible_resources('john.doe', 'SCREEN', 'read');
-- 결과 예시:
-- resource_id | can_create | can_read | can_update | can_delete | can_execute | can_export
-- ------------+------------+----------+------------+------------+-------------+-----------
-- * | FALSE | TRUE | FALSE | FALSE | FALSE | FALSE
-- SCR_SALES | FALSE | TRUE | TRUE | FALSE | FALSE | TRUE
```
---
## 프론트엔드 통합
### React Hook 예시
```typescript
// hooks/usePermission.ts
import { useState, useEffect } from "react";
import { checkResourcePermission } from "@/lib/api/permission";
export function usePermission(
resourceType: string,
resourceId: string | null,
permissionType: "create" | "read" | "update" | "delete" | "execute" | "export"
) {
const [hasPermission, setHasPermission] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const checkPermission = async () => {
setIsLoading(true);
try {
const response = await checkResourcePermission({
resourceType,
resourceId,
permissionType,
});
setHasPermission(response.success && response.data?.hasPermission);
} catch (error) {
console.error("권한 확인 오류:", error);
setHasPermission(false);
} finally {
setIsLoading(false);
}
};
checkPermission();
}, [resourceType, resourceId, permissionType]);
return { hasPermission, isLoading };
}
```
### 컴포넌트에서 사용
```tsx
// components/ScreenDetail.tsx
import { usePermission } from "@/hooks/usePermission";
import { Button } from "@/components/ui/button";
export function ScreenDetail({ screenCode }: { screenCode: string }) {
const { hasPermission: canUpdate } = usePermission(
"SCREEN",
screenCode,
"update"
);
const { hasPermission: canDelete } = usePermission(
"SCREEN",
screenCode,
"delete"
);
return (
<div>
<h1>{screenCode}</h1>
{canUpdate && <Button>수정</Button>}
{canDelete && <Button variant="destructive">삭제</Button>}
</div>
);
}
```
---
## 실전 시나리오
### 시나리오 1: 영업팀 권한 설정
**요구사항**:
- 모든 화면 조회 가능
- 계약 테이블(`contract_mgmt`) CRUD 전체
- 영업 플로우만 실행 가능
- 데이터 내보내기 가능
```sql
-- 영업팀 ID: 1001
INSERT INTO resource_permissions (role_group_id, resource_type, resource_id, can_create, can_read, can_update, can_delete, can_execute, can_export, created_by)
VALUES
-- 모든 화면 읽기
(1001, 'SCREEN', NULL, FALSE, TRUE, FALSE, FALSE, FALSE, FALSE, 'admin'),
-- 계약 테이블 CRUD
(1001, 'TABLE', 'contract_mgmt', TRUE, TRUE, TRUE, TRUE, FALSE, TRUE, 'admin'),
-- 영업 플로우 실행
(1001, 'FLOW', 'sales_flow', FALSE, TRUE, FALSE, FALSE, TRUE, FALSE, 'admin');
```
### 시나리오 2: 읽기 전용 사용자
**요구사항**:
- 모든 리소스 읽기만 가능
- 수정/삭제/생성 불가
```sql
-- 읽기 전용 권한 그룹 생성
INSERT INTO authority_master (objid, auth_name, auth_code, company_code, status, writer, regdate)
VALUES (nextval('seq_authority_master'), '읽기 전용', 'READ_ONLY', 'ILSHIN', 'active', 'admin', NOW());
-- 권한 부여
INSERT INTO resource_permissions (role_group_id, resource_type, resource_id, can_read, created_by)
SELECT
(SELECT objid FROM authority_master WHERE auth_code = 'READ_ONLY' AND company_code = 'ILSHIN'),
type_code,
NULL,
TRUE,
'admin'
FROM resource_types
WHERE type_code != 'SYSTEM'; -- 시스템 제외
```
### 시나리오 3: 개발팀 (DDL 실행 권한)
**요구사항**:
- 테이블 생성/삭제 가능 (DDL 실행)
- 모든 화면 CRUD
- 플로우 생성/실행
```sql
-- 개발팀 ID: 1002
INSERT INTO resource_permissions (role_group_id, resource_type, resource_id, can_create, can_read, can_update, can_delete, can_execute, created_by)
VALUES
-- 화면 CRUD
(1002, 'SCREEN', NULL, TRUE, TRUE, TRUE, TRUE, FALSE, 'admin'),
-- 테이블 CRUD + 실행(DDL)
(1002, 'TABLE', NULL, TRUE, TRUE, TRUE, TRUE, TRUE, 'admin'),
-- 플로우 CRUD + 실행
(1002, 'FLOW', NULL, TRUE, TRUE, TRUE, TRUE, TRUE, 'admin');
```
---
## 마이그레이션 실행
```bash
# Docker Compose 환경
docker exec -i <DB_CONTAINER_NAME> psql -U postgres -d ilshin < db/migrations/028_add_company_code_to_authority_master.sql
docker exec -i <DB_CONTAINER_NAME> psql -U postgres -d ilshin < db/migrations/029_create_resource_based_permission_system.sql
# 검증
docker exec -it <DB_CONTAINER_NAME> psql -U postgres -d ilshin -c "SELECT * FROM resource_types;"
docker exec -it <DB_CONTAINER_NAME> psql -U postgres -d ilshin -c "SELECT * FROM v_role_permissions_summary;"
```
---
## 추가 기능 확장 아이디어
### 1. 시간 기반 권한
```sql
ALTER TABLE resource_permissions ADD COLUMN valid_from TIMESTAMP;
ALTER TABLE resource_permissions ADD COLUMN valid_until TIMESTAMP;
```
### 2. 조건부 권한 (Row-Level Security)
```sql
-- 예: 자신이 생성한 데이터만 수정 가능
ALTER TABLE resource_permissions ADD COLUMN row_condition TEXT;
-- 'created_by = :user_id'
```
### 3. 권한 요청/승인 워크플로우
```sql
CREATE TABLE permission_requests (
request_id SERIAL PRIMARY KEY,
user_id VARCHAR(50),
resource_type VARCHAR(50),
resource_id VARCHAR(255),
permission_type VARCHAR(20),
reason TEXT,
status VARCHAR(20), -- 'pending', 'approved', 'rejected'
approved_by VARCHAR(50),
approved_date TIMESTAMP
);
```
---
## FAQ
### Q1: 메뉴 기반 권한과 무엇이 다른가요?
**A**: 메뉴는 고정된 화면을 가정하지만, 이 시스템은 사용자가 **동적으로 생성한 화면/테이블**에도 권한을 부여할 수 있습니다. 예를 들어, 사용자 A가 "계약 관리" 화면을 생성하면, 권한 그룹 B에게 그 화면의 읽기 권한을 즉시 부여할 수 있습니다.
### Q2: `resource_id`가 NULL인 경우와 특정 ID인 경우의 차이는?
**A**:
- `resource_id = NULL`: **해당 타입의 모든 리소스**에 대한 권한
- `resource_id = 'SCR_001'`: **특정 리소스만** 권한
예: `(SCREEN, NULL, read)` = 모든 화면 읽기
예: `(SCREEN, 'SCR_001', read)` = SCR_001 화면만 읽기
### Q3: 권한 그룹과 개별 권한의 우선순위는?
**A**: **OR 연산**입니다. 권한 그룹에서 허용되거나, 개별 권한에서 허용되면 최종적으로 허용됩니다.
### Q4: COMPANY_ADMIN은 왜 SYSTEM 타입 권한이 없나요?
**A**: SYSTEM 타입은 **시스템 전체 설정**(예: 회사 생성/삭제, 전체 사용자 관리)이므로 SUPER_ADMIN만 접근 가능합니다.
### Q5: 동적으로 생성된 화면의 `resource_id`는 무엇인가요?
**A**: `screen_definitions.screen_code`를 사용합니다. 예: `'SCR_CONTRACT_MGMT'`
### Q6: 플로우의 `resource_id`는?
**A**: `flow_definition.id` (숫자)를 문자열로 변환하여 사용합니다. 예: `'29'`
---
## 관련 파일
- **마이그레이션**: `db/migrations/028_add_company_code_to_authority_master.sql`
- **마이그레이션**: `db/migrations/029_create_resource_based_permission_system.sql`
- **백엔드 서비스**: `backend-node/src/services/RoleService.ts`
- **프론트엔드 API**: `frontend/lib/api/role.ts`
- **권한 체계 가이드**: `docs/권한_체계_가이드.md`

795
docs/멀티테넌시_구현_현황_분석_보고서.md Normal file
View File

@ -0,0 +1,795 @@
# 멀티 테넌시(Multi-Tenancy) 구현 현황 분석 보고서
> 작성일: 2025-01-27
> 시스템: ERP-node (Node.js + Next.js)
---
## 📋 목차
1. [개요](#개요)
2. [멀티 테넌시 구조](#멀티-테넌시-구조)
3. [구현 현황 상세 분석](#구현-현황-상세-분석)
4. [문제점 및 개선 필요 사항](#문제점-및-개선-필요-사항)
5. [권장 사항](#권장-사항)
---
## 개요
### 시스템 구조
- **멀티 테넌시 방식**: Shared Database, Shared Schema
- **구분 필드**: `company_code` (VARCHAR)
- **최고 관리자 코드**: `*` (와일드카드)
- **일반 회사 코드**: `"20"`, `"30"` 등 숫자 문자열
### 사용자 권한 계층
```
최고 관리자 (SUPER_ADMIN)
└─ company_code = "*"
└─ 모든 회사 데이터 접근 가능
회사 관리자 (COMPANY_ADMIN)
└─ company_code = "20", "30", etc.
└─ 자신의 회사 데이터만 접근
일반 사용자 (USER)
└─ company_code = "20", "30", etc.
└─ 자신의 회사 데이터만 접근
```
---
## 멀티 테넌시 구조
### 1. 인증 & 세션 관리
#### ✅ 구현 완료
```typescript
// backend-node/src/middleware/authMiddleware.ts
export interface UserInfo {
userId: string;
userName: string;
companyCode: string; // ⭐ 핵심 필드
userType: UserRole;
isSuperAdmin: boolean;
isCompanyAdmin: boolean;
isAdmin: boolean;
}
// JWT 토큰에 companyCode 포함
// 모든 인증된 요청에서 req.user.companyCode 사용 가능
```
**상태**: ✅ **완벽히 구현됨**
---
## 구현 현황 상세 분석
### 2. 핵심 데이터 서비스
#### 2.1 DataService (동적 테이블 조회)
**파일**: `backend-node/src/services/dataService.ts`
**✅ 구현 완료**
```typescript
// 회사별 필터링이 필요한 테이블 목록 (화이트리스트)
const COMPANY_FILTERED_TABLES = [
"company_mng",
"user_info",
"dept_info",
"approval",
"board",
"product_mng",
"part_mng",
"material_mng",
"order_mng_master",
"inventory_mng",
"contract_mgmt",
"project_mgmt",
];
// 자동 필터링 로직
if (COMPANY_FILTERED_TABLES.includes(tableName) && userCompany) {
if (userCompany !== "*") {
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(userCompany);
}
}
```
**상태**: ✅ **완벽히 구현됨**
**커버리지**: 주요 비즈니스 테이블 12개
---
### 3. 화면 관리 시스템
#### 3.1 Screen Definitions
**파일**: `backend-node/src/services/screenManagementService.ts`
**✅ 구현 완료**
```typescript
// 화면 목록 조회 시 company_code 자동 필터링
async getScreensByCompany(
companyCode: string,
page: number,
size: number
) {
const whereConditions = ["is_active != 'D'"];
if (companyCode !== "*") {
whereConditions.push(`company_code = $${params.length + 1}`);
params.push(companyCode);
}
// 페이징 쿼리
const screens = await query(`
SELECT * FROM screen_definitions
WHERE ${whereSQL}
ORDER BY created_date DESC
`, params);
}
```
**상태**: ✅ **완벽히 구현됨**
**동작**:
- 최고 관리자: 모든 회사 화면 조회
- 회사 관리자: 자기 회사 화면만 조회
---
### 4. 플로우 관리 시스템
#### 4.1 Flow Definitions
**파일**: `backend-node/src/services/flowDefinitionService.ts`
**✅ 구현 완료 (최근 업데이트)**
```typescript
async findAll(
tableName?: string,
isActive?: boolean,
companyCode?: string
) {
let query = "SELECT * FROM flow_definition WHERE 1=1";
// 회사 코드 필터링
if (companyCode && companyCode !== "*") {
query += ` AND company_code = $${paramIndex}`;
params.push(companyCode);
}
return result.map(this.mapToFlowDefinition);
}
```
**상태**: ✅ **완벽히 구현됨** (2025-01-27 업데이트)
#### 4.2 Node Flows (노드 기반 플로우)
**파일**: `backend-node/src/routes/dataflow/node-flows.ts`
**✅ 구현 완료 (최근 업데이트)**
```typescript
router.get("/", async (req: AuthenticatedRequest, res: Response) => {
const userCompanyCode = req.user?.companyCode;
let sqlQuery = `SELECT * FROM node_flows`;
const params: any[] = [];
// 슈퍼 관리자가 아니면 회사별 필터링
if (userCompanyCode && userCompanyCode !== "*") {
sqlQuery += ` WHERE company_code = $1`;
params.push(userCompanyCode);
}
const flows = await query(sqlQuery, params);
});
```
**상태**: ✅ **완벽히 구현됨** (2025-01-27 업데이트)
#### 4.3 Dataflow Diagrams (데이터플로우 관계도)
**파일**: `backend-node/src/controllers/dataflowDiagramController.ts`
**✅ 구현 완료 (최근 업데이트)**
```typescript
export const getDataflowDiagrams = async (req, res) => {
const userCompanyCode = req.user?.companyCode;
// 슈퍼 관리자는 쿼리 파라미터로 회사 지정 가능
let companyCode: string;
if (userCompanyCode === "*") {
companyCode = (req.query.companyCode as string) || "*";
} else {
// 회사 관리자/일반 사용자: 자신의 회사만
companyCode = userCompanyCode || "*";
}
const result = await getDataflowDiagramsService(
companyCode,
page,
size,
searchTerm
);
};
```
**상태**: ✅ **완벽히 구현됨** (2025-01-27 업데이트)
---
### 5. 외부 연결 관리
#### 5.1 External DB Connections
**파일**: `backend-node/src/routes/externalDbConnectionRoutes.ts`
**✅ 구현 완료 (최근 업데이트)**
```typescript
router.get("/", authenticateToken, async (req, res) => {
const userCompanyCode = req.user?.companyCode;
let companyCodeFilter: string | undefined;
if (userCompanyCode === "*") {
// 슈퍼 관리자: 쿼리 파라미터 사용 또는 전체
companyCodeFilter = req.query.company_code as string;
} else {
// 회사 관리자/일반 사용자: 자신의 회사만
companyCodeFilter = userCompanyCode;
}
const filter = { company_code: companyCodeFilter };
const result = await ExternalDbConnectionService.getConnections(filter);
});
router.get("/control/active", authenticateToken, async (req, res) => {
// 제어관리용 활성 커넥션도 동일한 필터링 적용
const filter = {
is_active: "Y",
company_code: companyCodeFilter,
};
});
```
**상태**: ✅ **완벽히 구현됨** (2025-01-27 업데이트)
#### 5.2 External REST API Connections
**파일**: `backend-node/src/services/externalRestApiConnectionService.ts`
**✅ 구현 완료**
```typescript
static async getConnections(
filter: ExternalRestApiConnectionFilter = {}
) {
let query = `SELECT * FROM external_rest_api_connections WHERE 1=1`;
const params: any[] = [];
// 회사 코드 필터
if (filter.company_code) {
query += ` AND company_code = $${paramIndex}`;
params.push(filter.company_code);
}
return result;
}
```
**상태**: ✅ **완벽히 구현됨**
---
### 6. 레이아웃 & 컴포넌트 관리
#### 6.1 Layout Standards
**파일**: `backend-node/src/services/layoutService.ts`
**✅ 구현 완료 (공개/비공개 구분)**
```typescript
async getLayouts(params) {
const { companyCode, includePublic = true } = params;
const whereConditions = ["is_active = $1"];
// company_code OR is_public 조건
if (includePublic) {
whereConditions.push(
`(company_code = $${paramIndex} OR is_public = $${paramIndex + 1})`
);
values.push(companyCode, "Y");
} else {
whereConditions.push(`company_code = $${paramIndex++}`);
values.push(companyCode);
}
}
```
**상태**: ✅ **완벽히 구현됨**
**특징**:
- 공개 레이아웃(`is_public = 'Y'`)는 모든 회사에서 사용 가능
- 비공개 레이아웃은 해당 회사만 사용
#### 6.2 Component Standards
**파일**: `backend-node/src/services/componentStandardService.ts`
**✅ 구현 완료 (공개/비공개 구분)**
```typescript
async getComponents(params) {
// 회사별 필터 (공개 컴포넌트 + 해당 회사 컴포넌트)
if (company_code) {
whereConditions.push(
`(is_public = 'Y' OR company_code = $${paramIndex++})`
);
values.push(company_code);
}
}
```
**상태**: ✅ **완벽히 구현됨**
---
### 7. 사용자 & 권한 관리
#### 7.1 User List (사용자 목록)
**파일**: `backend-node/src/controllers/adminController.ts`
**✅ 구현 완료 (최고 관리자 필터링 포함)**
```typescript
export const getUserList = async (req, res) => {
const whereConditions: string[] = [];
// 회사 코드 필터
if (companyCode && companyCode.trim()) {
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(companyCode.trim());
}
// 최고 관리자 필터링 (중요!)
if (req.user && req.user.companyCode !== "*") {
// 회사 관리자/일반 사용자는 최고 관리자를 볼 수 없음
whereConditions.push(`company_code != '*'`);
logger.info("최고 관리자 필터링 적용");
}
const users = await query(sql, queryParams);
};
```
**상태**: ✅ **완벽히 구현됨** (2025-01-27 업데이트)
**특징**:
- 회사별 사용자 필터링
- **최고 관리자 숨김 처리** (보안 강화)
#### 7.2 Department List (부서 목록)
**파일**: `backend-node/src/controllers/adminController.ts`
**✅ 구현 완료**
```typescript
export const getDepartmentList = async (req, res) => {
let whereConditions: string[] = [];
// 슈퍼 관리자가 아니면 회사 필터링
if (req.user && req.user.companyCode !== "*") {
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(req.user.companyCode);
}
const depts = await query(sql, queryParams);
};
```
**상태**: ✅ **완벽히 구현됨**
#### 7.3 Role & Menu Permissions (권한 그룹 & 메뉴 권한)
**파일**: `backend-node/src/services/RoleService.ts`
**✅ 구현 완료**
```typescript
static async getAllMenus(companyCode?: string): Promise<any[]> {
let whereClause = "WHERE is_active = 'Y'";
const params: any[] = [];
if (companyCode && companyCode !== "*") {
whereClause += ` AND company_code = $1`;
params.push(companyCode);
}
const menus = await query(`
SELECT * FROM menu_info ${whereClause}
`, params);
}
```
**상태**: ✅ **완벽히 구현됨** (2025-01-27 업데이트)
**특징**:
- 최고 관리자: 모든 메뉴 조회
- 회사 관리자: 자기 회사 메뉴만 조회 (공통 메뉴 제외)
- **프론트엔드 권한 그룹 상세 화면**: 최고 관리자는 `companyCode` 없이 API 호출하여 모든 메뉴 조회
---
### 8. 메뉴 관리
**파일**: `backend-node/src/services/adminService.ts`
**✅ 구현 완료**
```typescript
static async getAdminMenuList(paramMap) {
const { userType, userCompanyCode, menuType } = paramMap;
// SUPER_ADMIN과 COMPANY_ADMIN 구분
if (userType === "SUPER_ADMIN" && userCompanyCode === "*") {
if (menuType === undefined) {
// 메뉴 관리 화면: 모든 메뉴
companyFilter = "";
} else {
// 좌측 사이드바: 공통 메뉴만 (company_code = '*')
companyFilter = `AND MENU.COMPANY_CODE = '*'`;
}
} else {
// COMPANY_ADMIN: 자기 회사만
companyFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`;
queryParams.push(userCompanyCode);
}
const menuList = await query(sql, queryParams);
}
```
**상태**: ✅ **완벽히 구현됨**
**특징**:
- 최고 관리자는 사이드바에서 공통 메뉴만 표시
- 회사 관리자는 자기 회사 메뉴만 표시
---
## 문제점 및 개선 필요 사항
### ⚠️ 1. 테이블 필터링 누락 가능성
#### 문제점
`COMPANY_FILTERED_TABLES` 리스트에 포함되지 않은 테이블은 자동 필터링이 적용되지 않음.
**현재 포함된 테이블 (12개)**:
```typescript
const COMPANY_FILTERED_TABLES = [
"company_mng",
"user_info",
"dept_info",
"approval",
"board",
"product_mng",
"part_mng",
"material_mng",
"order_mng_master",
"inventory_mng",
"contract_mgmt",
"project_mgmt",
];
```
**누락 가능성이 있는 테이블**:
- ❓ `screen_definitions` (화면 정의) - **별도 서비스에서 필터링 처리됨** ✅
- ❓ `screen_layouts` (화면 레이아웃)
- ❓ `flow_definition` (플로우 정의) - **별도 서비스에서 필터링 처리됨** ✅
- ❓ `node_flows` (노드 플로우) - **별도 라우트에서 필터링 처리됨** ✅
- ❓ `dataflow_diagrams` (데이터플로우 관계도) - **별도 컨트롤러에서 필터링 처리됨** ✅
- ❓ `external_db_connections` (외부 DB 연결) - **별도 서비스에서 필터링 처리됨** ✅
- ❓ `external_rest_api_connections` (외부 REST API 연결) - **별도 서비스에서 필터링 처리됨** ✅
- ❓ `dynamic_form_data` (동적 폼 데이터)
- ❓ `work_history` (작업 이력)
- ❓ `delivery_status` (배송 현황)
#### 해결 방안
1. **단기**: 위 테이블들을 `COMPANY_FILTERED_TABLES`에 추가
2. **장기**: 테이블별 `company_code` 컬럼 존재 여부를 자동 감지하는 메커니즘 구현
---
### ⚠️ 2. 프론트엔드 직접 fetch 사용
#### 문제점
일부 프론트엔드 컴포넌트에서 API 클라이언트 대신 직접 `fetch`를 사용하는 경우가 있음.
**예시** (수정됨):
```typescript
// ❌ 이전 코드
const response = await fetch("/api/flow/definitions/29/steps");
// ✅ 수정된 코드
const response = await getFlowSteps(flowId);
```
**상태**:
- ✅ `flow.ts` - 완전히 수정됨 (2025-01-27)
- ⚠️ 다른 API 클라이언트도 검토 필요
---
### ⚠️ 3. 권한 그룹 멤버 관리 (Dual List Box)
#### 현재 구현 상태
- ✅ 백엔드: `getUserList` API에서 최고 관리자 필터링 적용됨
- ⚠️ 프론트엔드: `RoleDetailManagement.tsx`에서 추가 검증 권장
#### 개선 사항
프론트엔드에서도 이중 체크:
```typescript
const visibleUsers = users.filter((user) => {
// 최고 관리자만 최고 관리자를 볼 수 있음
if (user.companyCode === "*" && !isSuperAdmin) {
return false;
}
return true;
});
```
---
### ⚠️ 4. 동적 테이블 생성 시 company_code 자동 추가
#### 문제점
사용자가 화면 관리에서 새 테이블을 생성할 때, `company_code` 컬럼이 자동으로 추가되지 않을 수 있음.
#### 해결 방안
테이블 생성 시 자동으로 `company_code` 컬럼 추가:
```sql
CREATE TABLE new_table (
id SERIAL PRIMARY KEY,
company_code VARCHAR(50) NOT NULL,
-- 사용자 정의 컬럼들
created_date TIMESTAMP DEFAULT NOW()
);
CREATE INDEX idx_new_table_company_code ON new_table(company_code);
```
**현재 상태**: ⚠️ **확인 필요**
---
## 권장 사항
### ✅ 1. 즉시 적용 (High Priority)
#### 1.1 COMPANY_FILTERED_TABLES 확장
```typescript
const COMPANY_FILTERED_TABLES = [
// 기존
"company_mng",
"user_info",
"dept_info",
"approval",
"board",
"product_mng",
"part_mng",
"material_mng",
"order_mng_master",
"inventory_mng",
"contract_mgmt",
"project_mgmt",
// 추가 권장
"screen_layouts", // 화면 레이아웃
"dynamic_form_data", // 동적 폼 데이터
"work_history", // 작업 이력
"delivery_status", // 배송 현황
// 주의: 아래 테이블들은 별도 서비스에서 이미 필터링됨
// "screen_definitions", // ScreenManagementService
// "flow_definition", // FlowDefinitionService
// "node_flows", // node-flows routes
// "dataflow_diagrams", // DataflowDiagramController
// "external_db_connections", // ExternalDbConnectionService
// "external_rest_api_connections", // ExternalRestApiConnectionService
];
```
#### 1.2 프론트엔드 API 클라이언트 일관성 확인
```bash
# 직접 fetch 사용하는 파일 검색
grep -r "fetch(\"/api" frontend/
```
#### 1.3 최고 관리자 필터링 추가 API 확인
다음 API들도 최고 관리자 필터링 적용 확인:
- `GET /api/admin/users/search`
- `GET /api/admin/users/by-department`
- `GET /api/admin/users/:userId`
---
### 📋 2. 단기 개선 (Medium Priority)
#### 2.1 company_code 컬럼 자동 감지
```typescript
// 테이블 메타데이터 조회로 자동 감지
async function hasCompanyCodeColumn(tableName: string): Promise<boolean> {
const result = await query(
`
SELECT column_name
FROM information_schema.columns
WHERE table_name = $1
AND column_name = 'company_code'
`,
[tableName]
);
return result.length > 0;
}
// DataService에서 활용
if ((await hasCompanyCodeColumn(tableName)) && userCompany !== "*") {
whereConditions.push(`company_code = $${paramIndex}`);
queryParams.push(userCompany);
}
```
#### 2.2 동적 테이블 생성 시 company_code 자동 추가
```typescript
async function createTable(tableName: string, columns: Column[]) {
const columnDefs = columns.map((col) => `${col.name} ${col.type}`).join(", ");
await query(`
CREATE TABLE ${tableName} (
id SERIAL PRIMARY KEY,
company_code VARCHAR(50) NOT NULL DEFAULT '*',
${columnDefs},
created_date TIMESTAMP DEFAULT NOW(),
created_by VARCHAR(50)
);
CREATE INDEX idx_${tableName}_company_code ON ${tableName}(company_code);
`);
}
```
---
### 🔮 3. 장기 개선 (Low Priority)
#### 3.1 Row-Level Security (RLS) 도입
PostgreSQL의 RLS 기능을 활용하여 데이터베이스 레벨에서 자동 필터링:
```sql
-- 예시: user_info 테이블에 RLS 적용
ALTER TABLE user_info ENABLE ROW LEVEL SECURITY;
CREATE POLICY user_info_company_policy ON user_info
USING (company_code = current_setting('app.current_company_code'));
```
**장점**:
- 애플리케이션 코드에서 필터링 누락 방지
- 데이터베이스 레벨 보안 강화
**단점**:
- 기존 코드 대대적 수정 필요
- 최고 관리자 처리 복잡해짐
#### 3.2 GraphQL 도입 검토
회사별 데이터 필터링을 GraphQL Resolver에서 중앙화:
```typescript
// GraphQL Context에 companyCode 자동 포함
context: ({ req }) => ({
companyCode: req.user.companyCode,
}),
// Resolver에서 자동 필터링
Query: {
users: (_, __, { companyCode }) => {
return prisma.user.findMany({
where: companyCode !== "*" ? { company_code: companyCode } : {},
});
},
}
```
---
## 📊 종합 평가
### 현재 구현 수준: **85% (양호)**
| 영역 | 구현 상태 | 비고 |
| ----------------- | --------- | ---------------------------------------------------------- |
| 인증 & 세션 | ✅ 100% | JWT + companyCode 포함 |
| 사용자 관리 | ✅ 100% | 최고 관리자 필터링 포함 |
| 화면 관리 | ✅ 100% | screen_definitions 필터링 완료 |
| 플로우 관리 | ✅ 100% | flow_definition, node_flows, dataflow_diagrams 모두 필터링 |
| 외부 연결 | ✅ 100% | DB/REST API 연결 모두 필터링 |
| 데이터 서비스 | ✅ 90% | 주요 테이블 12개 필터링, 일부 테이블 누락 가능 |
| 레이아웃/컴포넌트 | ✅ 100% | 공개/비공개 구분 완료 |
| 메뉴 관리 | ✅ 100% | 최고 관리자/회사 관리자 구분 완료 |
| 프론트엔드 일관성 | ⚠️ 70% | 일부 직접 fetch 사용 (flow.ts 수정 완료) |
---
## ✅ 결론
### 현재 상태
시스템은 **멀티 테넌시가 견고하게 구현**되어 있으며, 대부분의 핵심 기능에서 회사별 데이터 격리가 적용되고 있습니다.
### 주요 강점
1. ✅ **인증 시스템**: JWT 토큰에 companyCode 포함, 모든 요청에서 사용 가능
2. ✅ **플로우 관리**: 최근 업데이트로 완벽히 필터링 적용
3. ✅ **외부 연결**: DB/REST API 연결 모두 회사별 격리
4. ✅ **사용자 관리**: 최고 관리자 숨김 처리로 보안 강화
5. ✅ **메뉴 관리**: 최고 관리자/회사 관리자 권한 구분 명확
### 개선 권장 사항
1. ⚠️ `COMPANY_FILTERED_TABLES`에 누락된 테이블 추가
2. ⚠️ 프론트엔드 API 클라이언트 일관성 확보 (진행 중)
3. ⚠️ 동적 테이블 생성 시 company_code 자동 추가 확인
4. ✅ 기존 구현 유지 및 신규 기능에 동일 패턴 적용
### 최종 평가
**현재 시스템은 멀티 테넌시 환경에서 안전하게 운영 가능한 수준이며, 소규모 개선 사항만 적용하면 완벽한 데이터 격리를 달성할 수 있습니다.**
---
## 📝 작성자
- 작성: AI Assistant (Claude Sonnet 4.5)
- 검토 필요: 백엔드 개발자, 시스템 아키텍트
- 다음 리뷰 일정: 신규 기능 추가 시 또는 월 1회

359
docs/메뉴_기반_권한_시스템_가이드.md Normal file
View File

@ -0,0 +1,359 @@
# 메뉴 기반 권한 시스템 가이드 (동적 화면 대응)
## 개요
**기존 메뉴 기반 권한 시스템을 유지**하면서 **동적으로 생성되는 화면에도 대응**하는 개선된 시스템입니다.
### 핵심 아이디어 💡
```
사용자가 화면 생성
↓
자동으로 메뉴 추가 (menu_info)
↓
권한 관리자가 메뉴 권한 설정 (rel_menu_auth)
↓
사용자는 "메뉴"로만 권한 확인 (직관적!)
```
---
## 시스템 구조
### 1. `menu_info` (메뉴 정보)
| 컬럼 | 타입 | 설명 |
| ---------------- | ------------ | ------------------------------------------------------------------ |
| objid | INTEGER | 메뉴 ID (PK) |
| menu_name | VARCHAR(100) | 메뉴 이름 |
| menu_code | VARCHAR(50) | 메뉴 코드 |
| menu_url | VARCHAR(255) | 메뉴 URL |
| **menu_type** | VARCHAR(20) | **'static'**(고정 메뉴) 또는 **'dynamic'**(화면 생성 시 자동 추가) |
| **screen_code** | VARCHAR(50) | 동적 메뉴인 경우 `screen_definitions.screen_code` |
| **company_code** | VARCHAR(20) | 회사 코드 (회사별 메뉴 격리) |
| parent_objid | INTEGER | 부모 메뉴 ID (계층 구조) |
| is_active | BOOLEAN | 활성/비활성 |
### 2. `rel_menu_auth` (메뉴별 권한)
| 컬럼 | 타입 | 설명 |
| -------------- | ------- | ----------------------------------------- |
| menu_objid | INTEGER | 메뉴 ID (FK) |
| auth_objid | INTEGER | 권한 그룹 ID (FK) |
| **create_yn** | CHAR(1) | 생성 권한 ('Y'/'N') |
| **read_yn** | CHAR(1) | 읽기 권한 ('Y'/'N') |
| **update_yn** | CHAR(1) | 수정 권한 ('Y'/'N') |
| **delete_yn** | CHAR(1) | 삭제 권한 ('Y'/'N') |
| **execute_yn** | CHAR(1) | 실행 권한 ('Y'/'N') - 플로우 실행, DDL 등 |
| **export_yn** | CHAR(1) | 내보내기 권한 ('Y'/'N') |
---
## 자동화 기능 🤖
### 1. 화면 생성 시 자동 메뉴 추가
```sql
-- 사용자가 화면 생성
INSERT INTO screen_definitions (screen_name, screen_code, company_code, ...)
VALUES ('계약 관리', 'SCR_CONTRACT', 'ILSHIN', ...);
-- ↓ 트리거가 자동 실행 ↓
-- menu_info에 자동 추가됨!
-- menu_name = '계약 관리'
-- menu_code = 'SCR_CONTRACT'
-- menu_url = '/screen/SCR_CONTRACT'
-- menu_type = 'dynamic'
-- company_code = 'ILSHIN'
```
### 2. 화면 삭제 시 자동 메뉴 비활성화
```sql
-- 화면 삭제
UPDATE screen_definitions
SET is_active = 'D'
WHERE screen_code = 'SCR_CONTRACT';
-- ↓ 트리거가 자동 실행 ↓
-- 해당 메뉴도 비활성화됨!
UPDATE menu_info
SET is_active = FALSE
WHERE screen_code = 'SCR_CONTRACT';
```
---
## 사용 예시
### 예시 1: 영업팀에게 계약 관리 화면 읽기 권한 부여
```sql
-- 1. 계약 관리 메뉴 ID 조회 (화면 생성 시 자동으로 추가됨)
SELECT objid FROM menu_info
WHERE menu_code = 'SCR_CONTRACT';
-- 결과: objid = 1005
-- 2. 영업팀 권한 그룹 ID 조회
SELECT objid FROM authority_master
WHERE auth_code = 'SALES_TEAM' AND company_code = 'ILSHIN';
-- 결과: objid = 1001
-- 3. 읽기 권한 부여
INSERT INTO rel_menu_auth (menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn, writer)
VALUES (1005, 1001, 'N', 'Y', 'N', 'N', 'admin');
```
### 예시 2: 개발팀에게 플로우 관리 전체 권한 부여
```sql
-- 플로우 관리 메뉴에 CRUD + 실행 권한
INSERT INTO rel_menu_auth (menu_objid, auth_objid, create_yn, read_yn, update_yn, delete_yn, execute_yn, writer)
VALUES (
(SELECT objid FROM menu_info WHERE menu_code = 'MENU_FLOW_MGMT'),
(SELECT objid FROM authority_master WHERE auth_code = 'DEV_TEAM'),
'Y', 'Y', 'Y', 'Y', 'Y', 'admin'
);
```
### 예시 3: 권한 확인
```sql
-- 'john.doe' 사용자가 계약 관리 메뉴를 읽을 수 있는지 확인
SELECT check_user_menu_permission('john.doe', 1005, 'read');
-- 결과: TRUE 또는 FALSE
-- 'john.doe' 사용자가 접근 가능한 모든 메뉴 조회
SELECT * FROM get_user_accessible_menus('john.doe', 'ILSHIN');
```
---
## 프론트엔드 통합
### React Hook
```typescript
// hooks/useMenuPermission.ts
import { useState, useEffect } from "react";
import { checkMenuPermission } from "@/lib/api/menu";
export function useMenuPermission(
menuObjid: number,
permissionType: "create" | "read" | "update" | "delete" | "execute" | "export"
) {
const [hasPermission, setHasPermission] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const checkPermission = async () => {
try {
const response = await checkMenuPermission(menuObjid, permissionType);
setHasPermission(response.success && response.data?.hasPermission);
} catch (error) {
console.error("권한 확인 오류:", error);
setHasPermission(false);
} finally {
setIsLoading(false);
}
};
checkPermission();
}, [menuObjid, permissionType]);
return { hasPermission, isLoading };
}
```
### 사용자 메뉴 렌더링
```tsx
// components/Navigation.tsx
import { useEffect, useState } from "react";
import { getUserAccessibleMenus } from "@/lib/api/menu";
import { useAuth } from "@/hooks/useAuth";
export function Navigation() {
const { user } = useAuth();
const [menus, setMenus] = useState([]);
useEffect(() => {
const loadMenus = async () => {
if (!user) return;
const response = await getUserAccessibleMenus(
user.userId,
user.companyCode
);
if (response.success) {
setMenus(response.data);
}
};
loadMenus();
}, [user]);
return (
<nav>
{menus.map((menu) => (
<NavItem key={menu.menuObjid} menu={menu} />
))}
</nav>
);
}
```
### 버튼 권한 제어
```tsx
// components/ContractDetail.tsx
import { useMenuPermission } from "@/hooks/useMenuPermission";
export function ContractDetail({ menuObjid }: { menuObjid: number }) {
const { hasPermission: canUpdate } = useMenuPermission(menuObjid, "update");
const { hasPermission: canDelete } = useMenuPermission(menuObjid, "delete");
return (
<div>
<h1>계약 상세</h1>
{canUpdate && <Button>수정</Button>}
{canDelete && <Button variant="destructive">삭제</Button>}
</div>
);
}
```
---
## 권한 관리 UI 설계
### 권한 그룹 상세 페이지에서 메뉴 권한 설정
```tsx
// 체크박스 그리드 형태
┌─────────────────┬────────┬────────┬────────┬────────┬────────┬────────┐
│ 메뉴 │ 생성 │ 읽기 │ 수정 │ 삭제 │ 실행 │ 내보내기│
├─────────────────┼────────┼────────┼────────┼────────┼────────┼────────┤
│ 대시보드 │ ☐ │ ☑ │ ☐ │ ☐ │ ☐ │ ☐ │
│ 계약 관리 │ ☑ │ ☑ │ ☑ │ ☐ │ ☐ │ ☑ │
│ 사용자 관리 │ ☐ │ ☑ │ ☐ │ ☐ │ ☐ │ ☐ │
│ 플로우 관리 │ ☐ │ ☑ │ ☐ │ ☐ │ ☑ │ ☐ │
└─────────────────┴────────┴────────┴────────┴────────┴────────┴────────┘
```
---
## 실전 시나리오
### 시나리오: 사용자가 "배송 현황" 화면 생성 → 권한 설정
```sql
-- 1단계: 사용자가 화면 생성
INSERT INTO screen_definitions (screen_name, screen_code, company_code, created_by)
VALUES ('배송 현황', 'SCR_DELIVERY', 'ILSHIN', 'admin');
-- 2단계: 트리거가 자동으로 메뉴 추가 (자동!)
-- menu_info에 'SCR_DELIVERY' 메뉴가 자동 생성됨
-- 3단계: 권한 관리자가 영업팀에게 읽기 권한 부여
INSERT INTO rel_menu_auth (
menu_objid,
auth_objid,
read_yn,
export_yn,
writer
)
VALUES (
(SELECT objid FROM menu_info WHERE menu_code = 'SCR_DELIVERY'),
(SELECT objid FROM authority_master WHERE auth_code = 'SALES_TEAM'),
'Y',
'Y',
'admin'
);
-- 4단계: 영업팀 사용자가 로그인하면 "배송 현황" 메뉴가 보임!
SELECT * FROM get_user_accessible_menus('sales_user', 'ILSHIN');
```
---
## 장점
### ✅ 사용자 친화적
- **"메뉴" 개념으로 권한 관리** (직관적)
- 기존 시스템과 동일한 UI/UX
### ✅ 자동화
- 화면 생성 시 **자동으로 메뉴 추가**
- 화면 삭제 시 **자동으로 메뉴 비활성화**
### ✅ 세밀한 권한
- 메뉴별 **6가지 권한** (Create, Read, Update, Delete, Execute, Export)
- 권한 그룹 단위 관리
### ✅ 회사별 격리
- `menu_info.company_code`로 회사별 메뉴 분리
- 슈퍼관리자는 모든 회사 메뉴 관리
---
## 마이그레이션 실행
```bash
# 1. 권한 그룹 시스템 개선
docker exec -i <DB_CONTAINER_NAME> psql -U postgres -d ilshin < db/migrations/028_add_company_code_to_authority_master.sql
# 2. 메뉴 기반 권한 시스템 개선
docker exec -i <DB_CONTAINER_NAME> psql -U postgres -d ilshin < db/migrations/030_improve_menu_auth_system.sql
# 검증
docker exec -it <DB_CONTAINER_NAME> psql -U postgres -d ilshin -c "SELECT * FROM menu_info WHERE menu_type = 'dynamic';"
docker exec -it <DB_CONTAINER_NAME> psql -U postgres -d ilshin -c "SELECT * FROM v_menu_auth_summary;"
```
---
## FAQ
### Q1: 동적 메뉴와 정적 메뉴의 차이는?
**A**:
- **정적 메뉴** (`menu_type='static'`): 수동으로 추가한 고정 메뉴 (예: 대시보드, 사용자 관리)
- **동적 메뉴** (`menu_type='dynamic'`): 화면 생성 시 자동 추가된 메뉴
### Q2: 화면을 삭제하면 메뉴도 삭제되나요?
**A**: 메뉴는 **삭제되지 않고 비활성화**(`is_active=FALSE`)됩니다. 나중에 복구 가능합니다.
### Q3: 같은 화면에 대해 회사마다 다른 권한을 설정할 수 있나요?
**A**: 네! `menu_info.company_code`와 `authority_master.company_code`로 회사별 격리됩니다.
### Q4: 기존 메뉴 시스템과 호환되나요?
**A**: 완전히 호환됩니다. 기존 `menu_info`와 `rel_menu_auth`를 그대로 사용하며, 새로운 컬럼만 추가됩니다.
---
## 다음 단계
1. ✅ 마이그레이션 실행 (028, 030)
2. 🔄 백엔드 API 구현 (권한 체크 미들웨어)
3. 🔄 프론트엔드 UI 개발 (메뉴 권한 설정 그리드)
4. 🔄 테스트 (영업팀 시나리오)
---
## 관련 파일
- **마이그레이션**: `db/migrations/028_add_company_code_to_authority_master.sql`
- **마이그레이션**: `db/migrations/030_improve_menu_auth_system.sql`
- **백엔드 서비스**: `backend-node/src/services/RoleService.ts`
- **프론트엔드 API**: `frontend/lib/api/role.ts`

351
docs/메뉴_회사별_필터링_개선_완료.md Normal file
View File

@ -0,0 +1,351 @@
# 메뉴 회사별 필터링 개선 완료
## 📋 개요
**문제점**: SUPER_ADMIN이 좌측 사이드바에서 모든 회사의 메뉴를 보게 되어 혼란스러움
**해결책**:
- **좌측 사이드바**: 모든 사용자(SUPER_ADMIN 포함)가 **공통 메뉴만** 표시
- **메뉴 관리 화면**: SUPER_ADMIN만 **전체 메뉴** 관리 가능
## 🎯 개선 내용
### 핵심 차이점
| 화면 유형 | SUPER_ADMIN | COMPANY_ADMIN | 일반 사용자 |
| ------------------ | -------------- | ----------------- | -------------- |
| **좌측 사이드바** | 공통 메뉴만 ✅ | 공통 메뉴만 ✅ | 공통 메뉴만 ✅ |
| **메뉴 관리 화면** | 전체 메뉴 ✅ | 자기 회사 메뉴 ✅ | 접근 불가 ❌ |
### 1. 좌측 사이드바 (`menuType=0` 또는 `menuType=1`)
**모든 사용자**: 공통 메뉴만 표시 (`company_code IS NULL`)
```sql
-- 모든 사용자 공통
WHERE STATUS = 'active'
AND MENU.COMPANY_CODE IS NULL -- 공통 메뉴만
```
**이유**:
- SUPER_ADMIN도 일반 업무 시에는 공통 메뉴만 사용
- 다른 회사 메뉴가 섞여 보이면 혼란스러움
- 메뉴 관리는 별도 화면에서 수행
### 2. 메뉴 관리 화면 (`menuType=undefined`)
#### SUPER_ADMIN
- **모든 회사의 메뉴** 표시 및 관리 가능
```sql
WHERE STATUS = 'active' -- 필터 없음
```
#### COMPANY_ADMIN
- **자기 회사 메뉴 + 공통 메뉴** 표시 및 관리
```sql
WHERE STATUS = 'active'
AND (MENU.COMPANY_CODE = '사용자회사코드' OR MENU.COMPANY_CODE IS NULL)
```
## 🔧 수정된 코드
### `adminService.ts` - getAdminMenuList()
```typescript
// 좌측 사이드바 관리자 메뉴는 모든 사용자가 공통 메뉴만 표시
// SUPER_ADMIN도 좌측 사이드바에서는 공통 메뉴만 보임
// 메뉴 관리 화면(menuType 없음)에서만 전체 메뉴 조회
if (menuType === undefined) {
// 메뉴 관리 화면: SUPER_ADMIN은 전체, 나머지는 자기 회사만
if (userType === "SUPER_ADMIN" && userCompanyCode === "*") {
logger.info("✅ 메뉴 관리 화면 (SUPER_ADMIN): 모든 메뉴 표시");
companyFilter = "";
} else {
logger.info(
`✅ 메뉴 관리 화면: 회사 ${userCompanyCode} 메뉴 + 공통 메뉴 표시`
);
companyFilter = `AND (MENU.COMPANY_CODE = $${paramIndex} OR MENU.COMPANY_CODE IS NULL)`;
queryParams.push(userCompanyCode);
paramIndex++;
}
} else {
// 좌측 사이드바: 모든 사용자가 공통 메뉴만
logger.info("✅ 좌측 사이드바 (관리자): 공통 메뉴만 표시");
companyFilter = `AND MENU.COMPANY_CODE IS NULL`;
}
```
### `adminService.ts` - getUserMenuList()
```typescript
// 좌측 사이드바 메뉴는 모든 사용자가 공통 메뉴만 표시
// (SUPER_ADMIN도 좌측 사이드바에서는 공통 메뉴만 보임)
// 메뉴 관리 화면에서는 별도로 전체 메뉴 조회
// 모든 사용자: 공통 메뉴만 (company_code IS NULL)
companyFilter = `AND MENU.COMPANY_CODE IS NULL`;
logger.info("✅ 좌측 사이드바: 공통 메뉴만 표시");
```
## 🧪 테스트 시나리오
### 시나리오 1: SUPER_ADMIN 로그인
#### 좌측 사이드바
```bash
# ✅ 공통 메뉴만 표시
- 공통 대시보드
- 공통 설정
- 공통 보고서
# ❌ 표시되지 않음
- ILSHIN 전용 메뉴
- VEXPLOR 전용 메뉴
```
#### 메뉴 관리 화면 (`/admin/menus`)
```bash
# ✅ 모든 회사 메뉴 표시
- ILSHIN 전용 메뉴 (company_code='ILSHIN')
- VEXPLOR 전용 메뉴 (company_code='VEXPLOR')
- 공통 메뉴 (company_code IS NULL)
```
### 시나리오 2: COMPANY_ADMIN (ILSHIN) 로그인
#### 좌측 사이드바
```bash
# ✅ 공통 메뉴만 표시
- 공통 대시보드
- 공통 설정
- 공통 보고서
# ❌ 표시되지 않음
- ILSHIN 전용 메뉴
```
#### 메뉴 관리 화면 (`/admin/menus`)
```bash
# ✅ ILSHIN 메뉴 + 공통 메뉴 표시
- ILSHIN 전용 메뉴 (company_code='ILSHIN')
- 공통 메뉴 (company_code IS NULL)
# ❌ 표시되지 않음
- VEXPLOR 전용 메뉴
```
### 시나리오 3: 일반 사용자 로그인
#### 좌측 사이드바
```bash
# ✅ 공통 메뉴만 표시
- 공통 대시보드
- 공통 설정
- 공통 보고서
```
#### 메뉴 관리 화면
```bash
# ❌ 접근 불가 (권한 없음)
```
## 📝 로그 확인
### 좌측 사이드바 접근 시
```log
# 관리자 메뉴 (menuType=0)
✅ 좌측 사이드바 (관리자): 공통 메뉴만 표시
# 사용자 메뉴 (menuType=1)
✅ 좌측 사이드바: 공통 메뉴만 표시
```
### 메뉴 관리 화면 접근 시
```log
# SUPER_ADMIN
✅ 메뉴 관리 화면 (SUPER_ADMIN): 모든 메뉴 표시
# COMPANY_ADMIN
✅ 메뉴 관리 화면: 회사 ILSHIN 메뉴 + 공통 메뉴 표시
```
## 📊 API 응답 예시
### 좌측 사이드바 (모든 사용자 동일)
```javascript
// GET /api/admin/menus?menuType=1
{
"success": true,
"data": [
{
"objid": "1",
"menu_name_kor": "공통 대시보드",
"company_code": null // ✅ 공통 메뉴만
},
{
"objid": "2",
"menu_name_kor": "공통 설정",
"company_code": null // ✅ 공통 메뉴만
}
]
}
```
### 메뉴 관리 화면 (SUPER_ADMIN)
```javascript
// GET /api/admin/menus (menuType 없음)
{
"success": true,
"data": [
{ "menu_name_kor": "ILSHIN 메뉴", "company_code": "ILSHIN" }, // ✅ 전체
{ "menu_name_kor": "VEXPLOR 메뉴", "company_code": "VEXPLOR" }, // ✅ 전체
{ "menu_name_kor": "공통 메뉴", "company_code": null } // ✅ 전체
]
}
```
### 메뉴 관리 화면 (COMPANY_ADMIN, ILSHIN)
```javascript
// GET /api/admin/menus (menuType 없음)
{
"success": true,
"data": [
{ "menu_name_kor": "ILSHIN 메뉴", "company_code": "ILSHIN" }, // ✅ 자기 회사
{ "menu_name_kor": "공통 메뉴", "company_code": null } // ✅ 공통
// ❌ VEXPLOR 메뉴 없음
]
}
```
## 🎨 사용자 경험 개선
### Before (문제점)
```
SUPER_ADMIN 로그인
└─ 좌측 사이드바
├─ ILSHIN 대시보드 ← 혼란스러움
├─ ILSHIN 보고서 ← 혼란스러움
├─ VEXPLOR 대시보드 ← 혼란스러움
├─ VEXPLOR 보고서 ← 혼란스러움
└─ 공통 설정
```
### After (개선)
```
SUPER_ADMIN 로그인
└─ 좌측 사이드바
├─ 공통 대시보드 ← 깔끔함
├─ 공통 설정 ← 깔끔함
└─ 공통 보고서 ← 깔끔함
└─ 메뉴 관리 화면 (/admin/menus)
├─ ILSHIN 대시보드 ← 관리 목적
├─ ILSHIN 보고서 ← 관리 목적
├─ VEXPLOR 대시보드 ← 관리 목적
├─ VEXPLOR 보고서 ← 관리 목적
└─ 공통 설정
```
## ✅ 완료 체크리스트
- [x] getAdminMenuList() 수정 (menuType 조건 분기)
- [x] getUserMenuList() 수정 (공통 메뉴만 필터링)
- [x] 로그 메시지 개선
- [x] 린트 에러 해결
- [x] 문서 작성
- [ ] 실제 테스트
- [ ] SUPER_ADMIN - 좌측 사이드바
- [ ] SUPER_ADMIN - 메뉴 관리 화면
- [ ] COMPANY_ADMIN - 좌측 사이드바
- [ ] COMPANY_ADMIN - 메뉴 관리 화면
## 🚨 주의사항
### 공통 메뉴 (`company_code IS NULL`)
- 모든 회사에서 공통으로 사용하는 메뉴
- 예: 대시보드, 설정, 공지사항 등
- **반드시 `company_code`를 `NULL`로 설정**해야 좌측 사이드바에 표시됨
### 회사 전용 메뉴
- 특정 회사에서만 사용하는 메뉴
- `company_code`에 회사 코드 지정 (예: `ILSHIN`, `VEXPLOR`)
- 좌측 사이드바에는 표시되지 않음
- 메뉴 관리 화면에서만 표시됨
## 🔮 향후 개선 사항
### 1. 회사 전환 기능
SUPER_ADMIN이 특정 회사 컨텍스트로 전환하여 해당 회사 메뉴를 볼 수 있는 기능:
```tsx
// 헤더에 회사 선택 드롭다운
<Select value={currentCompany} onChange={switchCompany}>
<option value="*">전체 (관리자 모드)</option>
<option value="ILSHIN">ILSHIN</option>
<option value="VEXPLOR">VEXPLOR</option>
</Select>
```
### 2. 메뉴 타입 추가
- 공통 메뉴 (company_code IS NULL)
- 회사 전용 메뉴 (company_code 지정)
- **부서 전용 메뉴** (향후 추가)
### 3. 동적 메뉴 표시
사용자 권한에 따라 메뉴 항목의 표시 여부 결정:
```sql
-- 권한 기반 메뉴 필터링 (향후 개선)
SELECT * FROM get_user_menus_with_permissions('user_id', 'company_code');
```
## 🎉 결론
### 개선 효과
1. **사용자 경험 개선**
- SUPER_ADMIN도 좌측 사이드바에서 깔끔한 UI 제공
- 다른 회사 메뉴가 섞이지 않아 혼란 방지
2. **권한 분리**
- 일반 업무: 공통 메뉴만 사용
- 관리 업무: 메뉴 관리 화면에서 전체 메뉴 관리
3. **확장성**
- 향후 회사별 메뉴 추가 시에도 좌측 사이드바는 깔끔하게 유지
- 메뉴 관리 화면에서만 복잡한 메뉴 구조 관리
---
**문서 작성일**: 2025-01-XX
**작성자**: AI Assistant
**버전**: 2.0 (개선판)

311
docs/메뉴_회사별_필터링_구현_완료.md Normal file
View File

@ -0,0 +1,311 @@
# 메뉴 회사별 필터링 구현 완료
## 📋 개요
로그인한 사용자의 **회사 코드**에 따라 좌측 사이드바 메뉴가 필터링되어 표시되도록 구현했습니다.
## 🎯 구현 내용
### 1. 백엔드 수정
#### `adminController.ts` 수정
- **getAdminMenus()**: 관리자 메뉴 조회 시 사용자 정보 전달
- **getUserMenus()**: 사용자 메뉴 조회 시 사용자 정보 전달
```typescript
// 추가된 파라미터
const userId = req.user?.userId;
const userCompanyCode = req.user?.companyCode || "ILSHIN";
const userType = req.user?.userType;
```
#### `adminService.ts` 수정
- **getAdminMenuList()**: 회사별 필터링 로직 추가
- **getUserMenuList()**: 회사별 필터링 로직 추가
### 2. 회사별 필터링 규칙
#### SUPER_ADMIN (`userType='SUPER_ADMIN'`, `companyCode='*'`)
- **모든 회사의 메뉴** 표시
- 제한 없음
```sql
-- 필터 없음
WHERE STATUS = 'active'
```
#### COMPANY_ADMIN (`userType='COMPANY_ADMIN'`)
- **자기 회사 메뉴 + 공통 메뉴** 표시
- `company_code = 사용자회사코드` OR `company_code IS NULL`
```sql
-- 회사 필터 적용
WHERE STATUS = 'active'
AND (MENU.COMPANY_CODE = '사용자회사코드' OR MENU.COMPANY_CODE IS NULL)
```
#### 일반 사용자 (`userType='USER'`)
- **자기 회사 메뉴 + 공통 메뉴** 표시
- COMPANY_ADMIN과 동일한 필터링
```sql
-- 회사 필터 적용
WHERE STATUS = 'active'
AND (MENU.COMPANY_CODE = '사용자회사코드' OR MENU.COMPANY_CODE IS NULL)
```
## 📊 데이터베이스 구조
### menu_info 테이블
```sql
CREATE TABLE menu_info (
objid NUMERIC PRIMARY KEY,
menu_name_kor VARCHAR(100),
menu_url VARCHAR(200),
menu_type NUMERIC, -- 0: 관리자 메뉴, 1: 사용자 메뉴
company_code VARCHAR(50), -- 회사 코드 (NULL: 공통 메뉴)
parent_obj_id NUMERIC,
seq NUMERIC,
status VARCHAR(20), -- 'active', 'inactive'
...
);
```
### 데이터베이스 함수 활용
마이그레이션 `031_add_menu_auth_columns.sql`에서 생성한 함수들:
- `get_user_menus_with_permissions()`: 사용자별 메뉴 권한 조회
- `check_menu_crud_permission()`: 메뉴별 CRUD 권한 확인
## 🧪 테스트 시나리오
### 테스트 1: SUPER_ADMIN 로그인
**기대 결과**: 모든 회사의 메뉴가 표시됨
```bash
# 로그인 사용자: admin (SUPER_ADMIN, company_code='*')
# 예상 메뉴:
# - ILSHIN 회사 메뉴
# - VEXPLOR 회사 메뉴
# - 공통 메뉴 (company_code IS NULL)
```
### 테스트 2: COMPANY_ADMIN 로그인 (ILSHIN)
**기대 결과**: ILSHIN 회사 메뉴 + 공통 메뉴만 표시
```bash
# 로그인 사용자: ilshin_admin (COMPANY_ADMIN, company_code='ILSHIN')
# 예상 메뉴:
# - ILSHIN 회사 메뉴
# - 공통 메뉴 (company_code IS NULL)
# ❌ VEXPLOR 회사 메뉴 (표시 안 됨)
```
### 테스트 3: COMPANY_ADMIN 로그인 (VEXPLOR)
**기대 결과**: VEXPLOR 회사 메뉴 + 공통 메뉴만 표시
```bash
# 로그인 사용자: vexplor_admin (COMPANY_ADMIN, company_code='VEXPLOR')
# 예상 메뉴:
# - VEXPLOR 회사 메뉴
# - 공통 메뉴 (company_code IS NULL)
# ❌ ILSHIN 회사 메뉴 (표시 안 됨)
```
### 테스트 4: 일반 사용자 로그인
**기대 결과**: 자기 회사 메뉴 + 공통 메뉴만 표시
```bash
# 로그인 사용자: user1 (USER, company_code='ILSHIN')
# 예상 메뉴:
# - ILSHIN 회사 메뉴 (권한이 있는 메뉴만)
# - 공통 메뉴 (company_code IS NULL)
```
## 📝 로그 확인
백엔드 로그에서 다음과 같은 메시지를 확인할 수 있습니다:
```log
# SUPER_ADMIN
✅ SUPER_ADMIN 모드: 모든 메뉴 표시
# COMPANY_ADMIN
✅ COMPANY_ADMIN 모드: 회사 ILSHIN 메뉴 + 공통 메뉴 표시
# 일반 사용자
✅ 일반 사용자 모드: 회사 ILSHIN 메뉴 + 공통 메뉴 표시
```
## 🔧 수정된 파일
### 백엔드
1. `/backend-node/src/controllers/adminController.ts`
- `getAdminMenus()`: 회사별 필터링 파라미터 전달
- `getUserMenus()`: 회사별 필터링 파라미터 전달
2. `/backend-node/src/services/adminService.ts`
- `getAdminMenuList()`: 회사별 필터링 쿼리 적용
- `getUserMenuList()`: 회사별 필터링 쿼리 적용
### 프론트엔드
- 변경 없음 (기존 API 호출 방식 유지)
## 🎨 UI 동작
### 좌측 사이드바 메뉴
```tsx
// frontend/components/layout/AppLayout.tsx
// useMenu 훅에서 자동으로 회사별 필터링된 메뉴 가져옴
const { userMenus, adminMenus, loading, refreshMenus } = useMenu();
// 사용자 모드
const currentMenus = isAdminMode ? adminMenus : userMenus;
```
## ✅ 검증 방법
### 1. 백엔드 로그 확인
```bash
# Docker 로그 확인
docker-compose -f docker/dev/docker-compose.yml logs -f app
# 또는 터미널에서 백엔드 직접 실행
cd backend-node
npm run dev
```
### 2. 브라우저 개발자 도구
```javascript
// 네트워크 탭에서 API 응답 확인
GET /api/admin/menus?menuType=1
// 응답 예시 (COMPANY_ADMIN, ILSHIN)
{
"success": true,
"message": "사용자 메뉴 목록 조회 성공",
"data": [
{
"objid": "1",
"menu_name_kor": "대시보드",
"company_code": "ILSHIN" // ✅ ILSHIN 메뉴
},
{
"objid": "2",
"menu_name_kor": "공통 설정",
"company_code": null // ✅ 공통 메뉴
}
// ❌ VEXPLOR 메뉴는 없음
]
}
```
### 3. 데이터베이스 직접 확인
```sql
-- 메뉴 데이터 확인
SELECT
objid,
menu_name_kor,
company_code,
status
FROM menu_info
WHERE menu_type = 1
AND status = 'active'
ORDER BY seq;
-- 회사별 메뉴 카운트
SELECT
COALESCE(company_code, '공통') AS company,
COUNT(*) AS menu_count
FROM menu_info
WHERE status = 'active'
GROUP BY company_code
ORDER BY company;
```
## 🚨 주의사항
### 1. 공통 메뉴 (`company_code IS NULL`)
- 모든 회사에서 공통으로 사용하는 메뉴
- 회사 코드가 NULL인 메뉴는 모든 사용자에게 표시됨
### 2. 비활성 메뉴 (`status='inactive'`)
- 회사 코드와 관계없이 표시되지 않음
- 필터링 전에 `status='active'` 조건으로 먼저 걸러짐
### 3. 권한 체크
- 현재는 메뉴 목록 표시만 필터링
- 실제 메뉴 접근 권한은 `rel_menu_auth` 테이블 기반으로 별도 체크 필요
- 향후 `get_user_menus_with_permissions()` 함수 활용 가능
## 🔮 향후 개선 사항
### 1. 권한 기반 메뉴 필터링
현재는 회사 코드만 체크하지만, 향후 사용자 권한 그룹 기반 필터링 추가:
```sql
-- 031_add_menu_auth_columns.sql의 함수 활용
SELECT * FROM get_user_menus_with_permissions('user_id', 'company_code');
```
### 2. 캐싱 전략
- 메뉴 데이터는 자주 변경되지 않으므로 Redis 캐싱 고려
- 회사별로 캐시 키 분리: `menus:company:{companyCode}`
### 3. 다국어 메뉴명
- 현재는 `menu_name_kor` 기본 사용
- `MULTI_LANG_TEXT` 테이블 기반 다국어 지원 이미 구현됨
## 📚 참고 자료
- 데이터베이스 마이그레이션: `/db/migrations/031_add_menu_auth_columns.sql`
- 권한 서비스: `/backend-node/src/services/roleService.ts`
- 메뉴 관리 컴포넌트: `/frontend/components/admin/MenuManagement.tsx`
## ✨ 완료 체크리스트
- [x] 백엔드 컨트롤러 수정 (`adminController.ts`)
- [x] 백엔드 서비스 수정 (`adminService.ts`)
- [x] 회사별 필터링 로직 구현
- [x] SUPER_ADMIN 예외 처리
- [x] 공통 메뉴 필터링 (company_code IS NULL)
- [x] 비활성 메뉴 제외 (status='active')
- [x] 로그 메시지 추가
- [x] 린트 에러 해결
- [ ] 실제 테스트 (각 사용자 유형별)
- [ ] 권한 기반 메뉴 필터링 (향후 개선)
## 🎉 결론
로그인한 사용자의 **회사 코드**에 따라 좌측 사이드바 메뉴가 자동으로 필터링되어 표시됩니다.
- **SUPER_ADMIN**: 모든 메뉴
- **COMPANY_ADMIN**: 자기 회사 + 공통 메뉴
- **일반 사용자**: 자기 회사 + 공통 메뉴
이제 다른 회사의 사용자가 로그인하면 자기 회사에 해당하는 메뉴만 보게 됩니다! 🚀

36
frontend/app/(main)/admin/flow-management/page.tsx
View File

@ -30,8 +30,10 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { formatErrorMessage } from "@/lib/utils/errorUtils";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
export default function FlowManagementPage() {
const router = useRouter();
@ -74,7 +76,7 @@ export default function FlowManagementPage() {
} else {
toast({
title: "조회 실패",
description: response.error || "플로우 목록을 불러올 수 없습니다.",
description: formatErrorMessage(response.error, "플로우 목록을 불러올 수 없습니다."),
variant: "destructive",
});
}
@ -116,28 +118,14 @@ export default function FlowManagementPage() {
useEffect(() => {
const loadConnections = async () => {
try {
const token = localStorage.getItem("authToken");
if (!token) {
console.warn("No auth token found");
return;
}
const response = await ExternalDbConnectionAPI.getActiveControlConnections();
const response = await fetch("/api/external-db-connections/control/active", {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response && response.ok) {
const data = await response.json();
if (data.success && data.data) {
// 메인 데이터베이스(현재 시스템) 제외 - connection_name에 "메인" 또는 "현재 시스템"이 포함된 것 필터링
const filtered = data.data.filter(
(conn: { connection_name: string }) =>
!conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
);
setExternalConnections(filtered);
}
if (response.success && response.data) {
// 메인 데이터베이스(현재 시스템) 제외 - connection_name에 "메인" 또는 "현재 시스템"이 포함된 것 필터링
const filtered = response.data.filter(
(conn) => !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
);
setExternalConnections(filtered);
}
} catch (error) {
console.error("Failed to load external connections:", error);
@ -228,7 +216,7 @@ export default function FlowManagementPage() {
} else {
toast({
title: "생성 실패",
description: response.error || response.message,
description: formatErrorMessage(response.error || response.message, "플로우 생성 중 오류가 발생했습니다."),
variant: "destructive",
});
}
@ -258,7 +246,7 @@ export default function FlowManagementPage() {
} else {
toast({
title: "삭제 실패",
description: response.error,
description: formatErrorMessage(response.error, "플로우 삭제 중 오류가 발생했습니다."),
variant: "destructive",
});
}

30
frontend/app/(main)/admin/roles/[id]/page.tsx Normal file
View File

@ -0,0 +1,30 @@
"use client";
import { use } from "react";
import { RoleDetailManagement } from "@/components/admin/RoleDetailManagement";
import { ScrollToTop } from "@/components/common/ScrollToTop";
/**
* 권한 그룹 상세 페이지
* URL: /admin/roles/[id]
*
* 기능:
* - 권한 그룹 멤버 관리 (Dual List Box)
* - 메뉴 권한 설정 (CRUD 체크박스)
*/
export default function RoleDetailPage({ params }: { params: Promise<{ id: string }> }) {
// Next.js 15: params는 Promise이므로 React.use()로 unwrap
const { id } = use(params);
return (
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 메인 컨텐츠 */}
<RoleDetailManagement roleId={id} />
</div>
{/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
<ScrollToTop />
</div>
);
}

39
frontend/app/(main)/admin/roles/page.tsx Normal file
View File

@ -0,0 +1,39 @@
"use client";
import { RoleManagement } from "@/components/admin/RoleManagement";
import { ScrollToTop } from "@/components/common/ScrollToTop";
/**
* 권한 그룹 관리 페이지
* URL: /admin/roles
*
* shadcn/ui 스타일 가이드 적용
*
* 기능:
* - 회사별 권한 그룹 목록 조회
* - 권한 그룹 생성/수정/삭제
* - 멤버 관리 (Dual List Box)
* - 메뉴 권한 설정 (CRUD 권한)
*/
export default function RolesPage() {
return (
<div className="flex min-h-screen flex-col bg-background">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">권한 그룹 관리</h1>
<p className="text-sm text-muted-foreground">
회사 내 권한 그룹을 생성하고 멤버를 관리합니다 (회사 관리자 이상)
</p>
</div>
{/* 메인 컨텐츠 */}
<RoleManagement />
</div>
{/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
<ScrollToTop />
</div>
);
}

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

@ -60,7 +60,7 @@ export default function TableManagementPage() {
// 페이지네이션 상태
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(50);
const [pageSize, setPageSize] = useState(9999); // 전체 컬럼 표시
const [totalColumns, setTotalColumns] = useState(0);
// 테이블 라벨 상태

31
frontend/app/(main)/admin/userAuth/page.tsx Normal file
View File

@ -0,0 +1,31 @@
"use client";
import { UserAuthManagement } from "@/components/admin/UserAuthManagement";
import { ScrollToTop } from "@/components/common/ScrollToTop";
/**
* 사용자 권한 관리 페이지
* URL: /admin/userAuth
*
* 최고 관리자만 접근 가능
* 사용자별 권한 레벨(SUPER_ADMIN, COMPANY_ADMIN, USER 등) 관리
*/
export default function UserAuthPage() {
return (
<div className="bg-background flex min-h-screen flex-col">
<div className="space-y-6 p-6">
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<h1 className="text-3xl font-bold tracking-tight">사용자 권한 관리</h1>
<p className="text-muted-foreground text-sm">사용자별 권한 레벨을 관리합니다. (최고 관리자 전용)</p>
</div>
{/* 메인 컨텐츠 */}
<UserAuthManagement />
</div>
{/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
<ScrollToTop />
</div>
);
}

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

@ -105,7 +105,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
}
return (
<div className="h-screen bg-gray-50">
<div className="h-screen">
{/* 대시보드 헤더 - 보기 모드에서는 숨김 */}
{/* <div className="border-b border-gray-200 bg-white px-6 py-4">
<div className="flex items-center justify-between">

369
frontend/components/admin/MenuPermissionsTable.tsx Normal file
View File

@ -0,0 +1,369 @@
"use client";
import React, { useState, useCallback, useEffect } from "react";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Search, ChevronRight, ChevronDown } from "lucide-react";
import { RoleGroup, roleAPI } from "@/lib/api/role";
import { useAuth } from "@/hooks/useAuth";
interface MenuPermission {
menuObjid: number;
menuName: string;
menuPath?: string;
parentObjid?: number;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
children?: MenuPermission[];
}
interface MenuPermissionsTableProps {
permissions: any[];
onPermissionsChange: (permissions: any[]) => void;
roleGroup: RoleGroup;
}
/**
* 메뉴 권한 설정 테이블
*
* 기능:
* - 메뉴 트리 구조 표시
* - CRUD 권한 체크박스
* - 전체 선택/해제
* - 검색 기능
*/
export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGroup }: MenuPermissionsTableProps) {
const { user: currentUser } = useAuth();
const [searchText, setSearchText] = useState("");
const [expandedMenus, setExpandedMenus] = useState<Set<number>>(new Set());
const [allMenus, setAllMenus] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(true);
// 최고 관리자 여부 확인
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 전체 메뉴 목록 로드
useEffect(() => {
// currentUser가 로드될 때까지 대기
if (!currentUser) {
console.log("⏳ [MenuPermissionsTable] currentUser 로드 대기 중...");
return;
}
const loadAllMenus = async () => {
// 최고 관리자: companyCode 없이 모든 메뉴 조회
// 회사 관리자: 자기 회사 메뉴만 조회
const targetCompanyCode = isSuperAdmin ? undefined : roleGroup.companyCode;
console.log("🔍 [MenuPermissionsTable] 전체 메뉴 로드 시작", {
currentUser: {
userId: currentUser.userId,
companyCode: currentUser.companyCode,
userType: currentUser.userType,
},
isSuperAdmin,
roleGroupCompanyCode: roleGroup.companyCode,
targetCompanyCode: targetCompanyCode || "전체",
});
try {
setIsLoading(true);
const response = await roleAPI.getAllMenus(targetCompanyCode);
console.log("✅ [MenuPermissionsTable] 전체 메뉴 로드 응답", {
success: response.success,
count: response.data?.length,
data: response.data,
});
if (response.success && response.data) {
setAllMenus(response.data);
console.log("✅ [MenuPermissionsTable] 메뉴 상태 업데이트 완료", {
count: response.data.length,
});
}
} catch (error) {
console.error("❌ [MenuPermissionsTable] 메뉴 로드 실패", error);
} finally {
setIsLoading(false);
}
};
loadAllMenus();
}, [currentUser, isSuperAdmin, roleGroup.companyCode]);
// 메뉴 권한 상태 (로컬 상태 관리)
const [menuPermissions, setMenuPermissions] = useState<Map<number, MenuPermission>>(new Map());
const [isInitialized, setIsInitialized] = useState(false);
// allMenus가 로드되면 초기 권한 상태 설정 (한 번만)
useEffect(() => {
if (allMenus.length > 0 && !isInitialized) {
const permissionsMap = new Map<number, MenuPermission>();
allMenus.forEach((menu) => {
// 기존 권한이 있으면 사용, 없으면 기본값
const existingPermission = permissions.find((p) => p.menuObjid === menu.objid);
permissionsMap.set(menu.objid, {
menuObjid: menu.objid,
menuName: menu.menuName,
menuPath: menu.menuUrl,
parentObjid: menu.parentObjid,
createYn: existingPermission?.createYn || "N",
readYn: existingPermission?.readYn || "N",
updateYn: existingPermission?.updateYn || "N",
deleteYn: existingPermission?.deleteYn || "N",
});
});
setMenuPermissions(permissionsMap);
setIsInitialized(true);
console.log("✅ [MenuPermissionsTable] 권한 상태 초기화", {
count: permissionsMap.size,
});
}
}, [allMenus, permissions, isInitialized]);
// menuPermissions가 변경되면 부모에 전달 (초기화 이후에만)
useEffect(() => {
if (isInitialized && menuPermissions.size > 0) {
const updatedPermissions = Array.from(menuPermissions.values());
onPermissionsChange(updatedPermissions);
}
}, [menuPermissions, isInitialized, onPermissionsChange]);
// 메뉴 트리 구조 생성 (menuPermissions에서)
const menuTree: MenuPermission[] = Array.from(menuPermissions.values());
// 메뉴 펼치기/접기 토글
const toggleExpand = useCallback((menuObjid: number) => {
setExpandedMenus((prev) => {
const newSet = new Set(prev);
if (newSet.has(menuObjid)) {
newSet.delete(menuObjid);
} else {
newSet.add(menuObjid);
}
return newSet;
});
}, []);
// 권한 변경 핸들러
const handlePermissionChange = useCallback(
(menuObjid: number, permission: "createYn" | "readYn" | "updateYn" | "deleteYn", checked: boolean) => {
setMenuPermissions((prev) => {
const newMap = new Map(prev);
const menuPerm = newMap.get(menuObjid);
if (menuPerm) {
newMap.set(menuObjid, {
...menuPerm,
[permission]: checked ? "Y" : "N",
});
}
return newMap;
});
console.log("✅ 권한 변경:", { menuObjid, permission, checked });
},
[],
);
// 전체 선택/해제
const handleSelectAll = useCallback(
(permission: "createYn" | "readYn" | "updateYn" | "deleteYn", checked: boolean) => {
setMenuPermissions((prev) => {
const newMap = new Map(prev);
newMap.forEach((menuPerm, menuObjid) => {
newMap.set(menuObjid, {
...menuPerm,
[permission]: checked ? "Y" : "N",
});
});
return newMap;
});
console.log("✅ 전체 선택:", { permission, checked });
},
[],
);
// 메뉴 행 렌더링
const renderMenuRow = (menu: MenuPermission, level: number = 0) => {
const hasChildren = menu.children && menu.children.length > 0;
const isExpanded = expandedMenus.has(menu.menuObjid);
const paddingLeft = level * 24;
return (
<React.Fragment key={menu.menuObjid}>
<TableRow className="hover:bg-muted/50 border-b transition-colors">
{/* 메뉴명 */}
<TableCell className="h-12" style={{ paddingLeft: `${paddingLeft + 16}px` }}>
<div className="flex items-center gap-2">
{hasChildren && (
<button onClick={() => toggleExpand(menu.menuObjid)} className="transition-transform">
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
</button>
)}
<span className={`text-sm ${hasChildren ? "font-semibold" : ""}`}>{menu.menuName}</span>
</div>
</TableCell>
{/* 생성(Create) */}
<TableCell className="h-12 text-center">
<div className="flex justify-center">
<Checkbox
checked={menu.createYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "createYn", checked as boolean)}
/>
</div>
</TableCell>
{/* 조회(Read) */}
<TableCell className="h-12 text-center">
<div className="flex justify-center">
<Checkbox
checked={menu.readYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "readYn", checked as boolean)}
/>
</div>
</TableCell>
{/* 수정(Update) */}
<TableCell className="h-12 text-center">
<div className="flex justify-center">
<Checkbox
checked={menu.updateYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "updateYn", checked as boolean)}
/>
</div>
</TableCell>
{/* 삭제(Delete) */}
<TableCell className="h-12 text-center">
<div className="flex justify-center">
<Checkbox
checked={menu.deleteYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "deleteYn", checked as boolean)}
/>
</div>
</TableCell>
</TableRow>
{/* 자식 메뉴 렌더링 */}
{hasChildren && isExpanded && menu.children!.map((child) => renderMenuRow(child, level + 1))}
</React.Fragment>
);
};
return (
<div className="space-y-4">
{/* 검색 */}
<div className="flex items-center gap-4">
<div className="relative flex-1 sm:max-w-[400px]">
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="메뉴 검색..."
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
className="h-10 pl-10 text-sm"
/>
</div>
</div>
{/* 데스크톱 테이블 */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
<TableHead className="h-12 w-[40%] text-sm font-semibold">메뉴</TableHead>
<TableHead className="h-12 w-[15%] text-center text-sm font-semibold">
<div className="flex flex-col items-center gap-1">
<span>생성 (C)</span>
<Checkbox
onCheckedChange={(checked) => handleSelectAll("createYn", checked as boolean)}
className="mt-1"
/>
</div>
</TableHead>
<TableHead className="h-12 w-[15%] text-center text-sm font-semibold">
<div className="flex flex-col items-center gap-1">
<span>조회 (R)</span>
<Checkbox
onCheckedChange={(checked) => handleSelectAll("readYn", checked as boolean)}
className="mt-1"
/>
</div>
</TableHead>
<TableHead className="h-12 w-[15%] text-center text-sm font-semibold">
<div className="flex flex-col items-center gap-1">
<span>수정 (U)</span>
<Checkbox
onCheckedChange={(checked) => handleSelectAll("updateYn", checked as boolean)}
className="mt-1"
/>
</div>
</TableHead>
<TableHead className="h-12 w-[15%] text-center text-sm font-semibold">
<div className="flex flex-col items-center gap-1">
<span>삭제 (D)</span>
<Checkbox
onCheckedChange={(checked) => handleSelectAll("deleteYn", checked as boolean)}
className="mt-1"
/>
</div>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>{menuTree.map((menu) => renderMenuRow(menu))}</TableBody>
</Table>
</div>
{/* 모바일 카드 뷰 */}
<div className="grid gap-4 lg:hidden">
{menuTree.map((menu) => (
<div key={menu.menuObjid} className="bg-card rounded-lg border p-4 shadow-sm">
<h3 className="mb-3 text-base font-semibold">{menu.menuName}</h3>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">생성 (C)</span>
<Checkbox
checked={menu.createYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "createYn", checked as boolean)}
/>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">조회 (R)</span>
<Checkbox
checked={menu.readYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "readYn", checked as boolean)}
/>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">수정 (U)</span>
<Checkbox
checked={menu.updateYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "updateYn", checked as boolean)}
/>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">삭제 (D)</span>
<Checkbox
checked={menu.deleteYn === "Y"}
onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "deleteYn", checked as boolean)}
/>
</div>
</div>
</div>
))}
</div>
</div>
);
}

150
frontend/components/admin/RoleDeleteModal.tsx Normal file
View File

@ -0,0 +1,150 @@
"use client";
import React, { useState, useCallback } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { roleAPI, RoleGroup } from "@/lib/api/role";
import { AlertTriangle } from "lucide-react";
interface RoleDeleteModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess?: () => void;
role: RoleGroup | null;
}
/**
* 권한 그룹 삭제 확인 모달
*
* 기능:
* - 권한 그룹 삭제 확인
* - CASCADE 삭제 경고 (멤버, 메뉴 권한)
*
* shadcn/ui 표준 확인 모달 디자인
*/
export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDeleteModalProps) {
const [isLoading, setIsLoading] = useState(false);
const [showAlert, setShowAlert] = useState(false);
const [alertMessage, setAlertMessage] = useState("");
const [alertType, setAlertType] = useState<"success" | "error">("error");
// 알림 표시
const displayAlert = useCallback((message: string, type: "success" | "error") => {
setAlertMessage(message);
setAlertType(type);
setShowAlert(true);
setTimeout(() => setShowAlert(false), 3000);
}, []);
// 삭제 핸들러
const handleDelete = useCallback(async () => {
if (!role) return;
setIsLoading(true);
try {
const response = await roleAPI.delete(role.objid);
if (response.success) {
displayAlert("권한 그룹이 삭제되었습니다.", "success");
setTimeout(() => {
onClose();
onSuccess?.();
}, 1500);
} else {
displayAlert(response.message || "삭제에 실패했습니다.", "error");
}
} catch (error) {
console.error("권한 그룹 삭제 오류:", error);
displayAlert("권한 그룹 삭제 중 오류가 발생했습니다.", "error");
} finally {
setIsLoading(false);
}
}, [role, onClose, onSuccess, displayAlert]);
if (!role) return null;
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">권한 그룹 삭제</DialogTitle>
</DialogHeader>
<div className="space-y-4">
{/* 경고 메시지 */}
<div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
<div className="flex items-start gap-3">
<AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
<div className="space-y-2">
<p className="text-sm font-semibold text-orange-900">정말로 삭제하시겠습니까?</p>
<p className="text-xs text-orange-800">
이 작업은 되돌릴 수 없습니다. 권한 그룹을 삭제하면 다음 데이터도 함께 삭제됩니다:
</p>
<ul className="list-inside list-disc space-y-1 text-xs text-orange-800">
<li>연결된 모든 멤버 ({role.memberCount || 0}명)</li>
<li>설정된 모든 메뉴 권한 ({role.menuCount || 0}개)</li>
</ul>
</div>
</div>
</div>
{/* 삭제할 권한 그룹 정보 */}
<div className="bg-muted/50 rounded-lg border p-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">권한 그룹명</span>
<span className="font-medium">{role.authName}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">권한 코드</span>
<span className="font-mono font-medium">{role.authCode}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">회사</span>
<span className="font-medium">{role.companyCode}</span>
</div>
{role.memberNames && (
<div className="border-t pt-2">
<span className="text-muted-foreground text-xs">멤버:</span>
<p className="mt-1 text-xs">{role.memberNames}</p>
</div>
)}
</div>
</div>
{/* 알림 메시지 */}
{showAlert && (
<div
className={`rounded-lg border p-3 text-sm ${
alertType === "success"
? "border-green-300 bg-green-50 text-green-800"
: "border-destructive/50 bg-destructive/10 text-destructive"
}`}
>
{alertMessage}
</div>
)}
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={onClose}
disabled={isLoading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
취소
</Button>
<Button
variant="destructive"
onClick={handleDelete}
disabled={isLoading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{isLoading ? "삭제중..." : "삭제"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

337
frontend/components/admin/RoleDetailManagement.tsx Normal file
View File

@ -0,0 +1,337 @@
"use client";
import React, { useState, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Users, Menu as MenuIcon, Save } from "lucide-react";
import { roleAPI, RoleGroup } from "@/lib/api/role";
import { useAuth } from "@/hooks/useAuth";
import { useRouter } from "next/navigation";
import { AlertCircle } from "lucide-react";
import { DualListBox } from "@/components/common/DualListBox";
import { MenuPermissionsTable } from "./MenuPermissionsTable";
interface RoleDetailManagementProps {
roleId: string;
}
/**
* 권한 그룹 상세 관리 컴포넌트
*
* 기능:
* - 권한 그룹 정보 표시
* - 멤버 관리 (Dual List Box)
* - 메뉴 권한 설정 (CRUD 체크박스)
*/
export function RoleDetailManagement({ roleId }: RoleDetailManagementProps) {
const { user: currentUser } = useAuth();
const router = useRouter();
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 상태 관리
const [roleGroup, setRoleGroup] = useState<RoleGroup | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// 탭 상태
const [activeTab, setActiveTab] = useState<"members" | "permissions">("members");
// 멤버 관리 상태
const [availableUsers, setAvailableUsers] = useState<Array<{ id: string; name: string; dept?: string }>>([]);
const [selectedUsers, setSelectedUsers] = useState<Array<{ id: string; name: string; dept?: string }>>([]);
const [isSavingMembers, setIsSavingMembers] = useState(false);
// 메뉴 권한 상태
const [menuPermissions, setMenuPermissions] = useState<any[]>([]);
const [isSavingPermissions, setIsSavingPermissions] = useState(false);
// 데이터 로드
const loadRoleGroup = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
const response = await roleAPI.getById(parseInt(roleId, 10));
if (response.success && response.data) {
setRoleGroup(response.data);
} else {
setError(response.message || "권한 그룹 정보를 불러오는데 실패했습니다.");
}
} catch (err) {
console.error("권한 그룹 정보 로드 오류:", err);
setError("권한 그룹 정보를 불러오는 중 오류가 발생했습니다.");
} finally {
setIsLoading(false);
}
}, [roleId]);
// 멤버 목록 로드
const loadMembers = useCallback(async () => {
if (!roleGroup) return;
try {
// 1. 권한 그룹 멤버 조회
const membersResponse = await roleAPI.getMembers(roleGroup.objid);
if (membersResponse.success && membersResponse.data) {
setSelectedUsers(
membersResponse.data.map((member: any) => ({
id: member.userId,
label: member.userName || member.userId,
description: member.deptName,
})),
);
}
// 2. 전체 사용자 목록 조회 (같은 회사)
const userAPI = await import("@/lib/api/user");
console.log("🔍 사용자 목록 조회 요청:", {
companyCode: roleGroup.companyCode,
size: 1000,
});
const usersResponse = await userAPI.userAPI.getList({
companyCode: roleGroup.companyCode,
size: 1000, // 대량 조회
});
console.log("✅ 사용자 목록 응답:", {
success: usersResponse.success,
count: usersResponse.data?.length,
total: usersResponse.total,
});
if (usersResponse.success && usersResponse.data) {
setAvailableUsers(
usersResponse.data.map((user: any) => ({
id: user.userId,
label: user.userName || user.userId,
description: user.deptName,
})),
);
console.log("📋 설정된 전체 사용자 수:", usersResponse.data.length);
}
} catch (err) {
console.error("멤버 목록 로드 오류:", err);
}
}, [roleGroup]);
// 메뉴 권한 로드
const loadMenuPermissions = useCallback(async () => {
if (!roleGroup) return;
console.log("🔍 [loadMenuPermissions] 메뉴 권한 로드 시작", {
roleGroupId: roleGroup.objid,
roleGroupName: roleGroup.authName,
companyCode: roleGroup.companyCode,
});
try {
const response = await roleAPI.getMenuPermissions(roleGroup.objid);
console.log("✅ [loadMenuPermissions] API 응답", {
success: response.success,
dataCount: response.data?.length,
data: response.data,
});
if (response.success && response.data) {
setMenuPermissions(response.data);
console.log("✅ [loadMenuPermissions] 상태 업데이트 완료", {
count: response.data.length,
});
} else {
console.warn("⚠️ [loadMenuPermissions] 응답 실패", {
message: response.message,
});
}
} catch (err) {
console.error("❌ [loadMenuPermissions] 메뉴 권한 로드 오류:", err);
}
}, [roleGroup]);
useEffect(() => {
loadRoleGroup();
}, [loadRoleGroup]);
useEffect(() => {
if (roleGroup && activeTab === "members") {
loadMembers();
} else if (roleGroup && activeTab === "permissions") {
loadMenuPermissions();
}
}, [roleGroup, activeTab, loadMembers, loadMenuPermissions]);
// 멤버 저장 핸들러
const handleSaveMembers = useCallback(async () => {
if (!roleGroup) return;
setIsSavingMembers(true);
try {
// 현재 선택된 사용자 ID 목록
const selectedUserIds = selectedUsers.map((user) => user.id);
// 멤버 업데이트 API 호출
const response = await roleAPI.updateMembers(roleGroup.objid, selectedUserIds);
if (response.success) {
alert("멤버가 성공적으로 저장되었습니다.");
loadMembers(); // 새로고침
} else {
alert(response.message || "멤버 저장에 실패했습니다.");
}
} catch (err) {
console.error("멤버 저장 오류:", err);
alert("멤버 저장 중 오류가 발생했습니다.");
} finally {
setIsSavingMembers(false);
}
}, [roleGroup, selectedUsers, loadMembers]);
// 메뉴 권한 저장 핸들러
const handleSavePermissions = useCallback(async () => {
if (!roleGroup) return;
setIsSavingPermissions(true);
try {
const response = await roleAPI.setMenuPermissions(roleGroup.objid, menuPermissions);
if (response.success) {
alert("메뉴 권한이 성공적으로 저장되었습니다.");
loadMenuPermissions(); // 새로고침
} else {
alert(response.message || "메뉴 권한 저장에 실패했습니다.");
}
} catch (err) {
console.error("메뉴 권한 저장 오류:", err);
alert("메뉴 권한 저장 중 오류가 발생했습니다.");
} finally {
setIsSavingPermissions(false);
}
}, [roleGroup, menuPermissions, loadMenuPermissions]);
if (isLoading) {
return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-12 shadow-sm">
<div className="flex flex-col items-center gap-4">
<div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
<p className="text-muted-foreground text-sm">권한 그룹 정보를 불러오는 중...</p>
</div>
</div>
);
}
if (error || !roleGroup) {
return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-6 shadow-sm">
<AlertCircle className="text-destructive mb-4 h-12 w-12" />
<h3 className="mb-2 text-lg font-semibold">오류 발생</h3>
<p className="text-muted-foreground mb-4 text-center text-sm">{error || "권한 그룹을 찾을 수 없습니다."}</p>
<Button variant="outline" onClick={() => router.push("/admin/roles")}>
목록으로 돌아가기
</Button>
</div>
);
}
return (
<>
{/* 페이지 헤더 */}
<div className="space-y-2 border-b pb-4">
<div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={() => router.push("/admin/roles")} className="h-10 w-10">
<ArrowLeft className="h-5 w-5" />
</Button>
<div className="flex-1">
<h1 className="text-3xl font-bold tracking-tight">{roleGroup.authName}</h1>
<p className="text-muted-foreground text-sm">
{roleGroup.authCode} • {roleGroup.companyCode}
</p>
</div>
<span
className={`rounded-full px-3 py-1 text-sm font-medium ${
roleGroup.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
}`}
>
{roleGroup.status === "active" ? "활성" : "비활성"}
</span>
</div>
</div>
{/* 탭 네비게이션 */}
<div className="flex gap-4 border-b">
<button
onClick={() => setActiveTab("members")}
className={`flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors ${
activeTab === "members"
? "border-primary text-primary"
: "text-muted-foreground hover:text-foreground border-transparent"
}`}
>
<Users className="h-4 w-4" />
멤버 관리 ({selectedUsers.length})
</button>
<button
onClick={() => setActiveTab("permissions")}
className={`flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors ${
activeTab === "permissions"
? "border-primary text-primary"
: "text-muted-foreground hover:text-foreground border-transparent"
}`}
>
<MenuIcon className="h-4 w-4" />
메뉴 권한 ({menuPermissions.length})
</button>
</div>
{/* 탭 컨텐츠 */}
<div className="space-y-6">
{activeTab === "members" && (
<>
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold">멤버 관리</h2>
<p className="text-muted-foreground text-sm">이 권한 그룹에 속한 사용자를 관리합니다</p>
</div>
<Button onClick={handleSaveMembers} disabled={isSavingMembers} className="gap-2">
<Save className="h-4 w-4" />
{isSavingMembers ? "저장 중..." : "멤버 저장"}
</Button>
</div>
<DualListBox
availableItems={availableUsers}
selectedItems={selectedUsers}
onSelectionChange={setSelectedUsers}
availableLabel="전체 사용자"
selectedLabel="그룹 멤버"
enableSearch
/>
</>
)}
{activeTab === "permissions" && (
<>
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold">메뉴 권한 설정</h2>
<p className="text-muted-foreground text-sm">이 권한 그룹에서 접근 가능한 메뉴와 권한을 설정합니다</p>
</div>
<Button onClick={handleSavePermissions} disabled={isSavingPermissions} className="gap-2">
<Save className="h-4 w-4" />
{isSavingPermissions ? "저장 중..." : "권한 저장"}
</Button>
</div>
<MenuPermissionsTable
permissions={menuPermissions}
onPermissionsChange={setMenuPermissions}
roleGroup={roleGroup}
/>
</>
)}
</div>
</>
);
}

375
frontend/components/admin/RoleFormModal.tsx Normal file
View File

@ -0,0 +1,375 @@
"use client";
import React, { useState, useCallback, useEffect, useMemo } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { roleAPI, RoleGroup } from "@/lib/api/role";
import { useAuth } from "@/hooks/useAuth";
import { AlertCircle, Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { companyAPI } from "@/lib/api/company";
interface RoleFormModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess?: () => void;
editingRole?: RoleGroup | null;
}
/**
* 권한 그룹 생성/수정 모달
*
* 기능:
* - 권한 그룹 생성 (authName, authCode, companyCode)
* - 권한 그룹 수정 (authName, authCode, status)
* - 유효성 검사
*
* shadcn/ui 표준 모달 디자인 적용
*/
export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleFormModalProps) {
const { user: currentUser } = useAuth();
const isEditMode = !!editingRole;
// 최고 관리자 여부
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 폼 데이터
const [formData, setFormData] = useState({
authName: "",
authCode: "",
companyCode: currentUser?.companyCode || "",
status: "active",
});
// 상태 관리
const [isLoading, setIsLoading] = useState(false);
const [showAlert, setShowAlert] = useState(false);
const [alertMessage, setAlertMessage] = useState("");
const [alertType, setAlertType] = useState<"success" | "error" | "info">("info");
// 회사 목록 (최고 관리자용)
const [companies, setCompanies] = useState<Array<{ company_code: string; company_name: string }>>([]);
const [isLoadingCompanies, setIsLoadingCompanies] = useState(false);
const [companyComboOpen, setCompanyComboOpen] = useState(false);
// 폼 유효성 검사
const isFormValid = useMemo(() => {
return formData.authName.trim() !== "" && formData.authCode.trim() !== "" && formData.companyCode.trim() !== "";
}, [formData]);
// 알림 표시
const displayAlert = useCallback((message: string, type: "success" | "error" | "info") => {
setAlertMessage(message);
setAlertType(type);
setShowAlert(true);
setTimeout(() => setShowAlert(false), 3000);
}, []);
// 회사 목록 로드 (최고 관리자만)
const loadCompanies = useCallback(async () => {
if (!isSuperAdmin) return;
setIsLoadingCompanies(true);
try {
// companyAPI.getList()는 Promise<Company[]>를 반환하므로 직접 사용
const companies = await companyAPI.getList();
console.log("📋 회사 목록 로드 성공:", companies);
setCompanies(companies);
} catch (error) {
console.error("❌ 회사 목록 로드 오류:", error);
displayAlert("회사 목록을 불러오는데 실패했습니다.", "error");
} finally {
setIsLoadingCompanies(false);
}
}, [isSuperAdmin, displayAlert]);
// 초기화
useEffect(() => {
if (isOpen) {
// 최고 관리자이고 생성 모드일 때만 회사 목록 로드
if (isSuperAdmin && !isEditMode) {
loadCompanies();
}
if (isEditMode && editingRole) {
// 수정 모드: 기존 데이터 로드
setFormData({
authName: editingRole.authName || "",
authCode: editingRole.authCode || "",
companyCode: editingRole.companyCode || "",
status: editingRole.status || "active",
});
} else {
// 생성 모드: 초기화
setFormData({
authName: "",
authCode: "",
companyCode: currentUser?.companyCode || "",
status: "active",
});
}
setShowAlert(false);
}
}, [isOpen, isEditMode, editingRole, currentUser?.companyCode, isSuperAdmin, loadCompanies]);
// 입력 핸들러
const handleInputChange = useCallback((field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
}, []);
// 제출 핸들러
const handleSubmit = useCallback(async () => {
if (!isFormValid) {
displayAlert("모든 필수 항목을 입력해주세요.", "error");
return;
}
setIsLoading(true);
try {
let response;
if (isEditMode && editingRole) {
// 수정
response = await roleAPI.update(editingRole.objid, {
authName: formData.authName,
authCode: formData.authCode,
status: formData.status,
});
} else {
// 생성
response = await roleAPI.create({
authName: formData.authName,
authCode: formData.authCode,
companyCode: formData.companyCode,
});
}
if (response.success) {
displayAlert(isEditMode ? "권한 그룹이 수정되었습니다." : "권한 그룹이 생성되었습니다.", "success");
setTimeout(() => {
onClose();
onSuccess?.();
}, 1500);
} else {
displayAlert(response.message || "작업에 실패했습니다.", "error");
}
} catch (error) {
console.error("권한 그룹 저장 오류:", error);
displayAlert("권한 그룹 저장 중 오류가 발생했습니다.", "error");
} finally {
setIsLoading(false);
}
}, [isFormValid, isEditMode, editingRole, formData, onClose, onSuccess, displayAlert]);
// Enter 키 핸들러
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === "Enter" && isFormValid && !isLoading) {
handleSubmit();
}
},
[isFormValid, isLoading, handleSubmit],
);
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">{isEditMode ? "권한 그룹 수정" : "권한 그룹 생성"}</DialogTitle>
</DialogHeader>
<div className="space-y-3 sm:space-y-4">
{/* 권한 그룹명 */}
<div>
<Label htmlFor="authName" className="text-xs sm:text-sm">
권한 그룹명 <span className="text-red-500">*</span>
</Label>
<Input
id="authName"
value={formData.authName}
onChange={(e) => handleInputChange("authName", e.target.value)}
onKeyDown={handleKeyDown}
placeholder="예: 영업팀 권한"
className="h-8 text-xs sm:h-10 sm:text-sm"
disabled={isLoading}
/>
</div>
{/* 권한 코드 */}
<div>
<Label htmlFor="authCode" className="text-xs sm:text-sm">
권한 코드 <span className="text-red-500">*</span>
</Label>
<Input
id="authCode"
value={formData.authCode}
onChange={(e) => handleInputChange("authCode", e.target.value)}
onKeyDown={handleKeyDown}
placeholder="예: SALES_TEAM (영문/숫자/언더스코어만)"
className="h-8 text-xs sm:h-10 sm:text-sm"
disabled={isLoading}
/>
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
시스템 내부에서 사용되는 고유 코드입니다. 영문 대문자, 숫자, 언더스코어만 사용하세요.
</p>
</div>
{/* 회사 (수정 모드에서는 비활성화) */}
{isEditMode ? (
<div>
<Label htmlFor="companyCode" className="text-xs sm:text-sm">
회사
</Label>
<Input
id="companyCode"
value={formData.companyCode}
disabled
className="bg-muted h-8 cursor-not-allowed text-xs sm:h-10 sm:text-sm"
/>
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">회사 코드는 수정할 수 없습니다.</p>
</div>
) : (
<div>
<Label htmlFor="companyCode" className="text-xs sm:text-sm">
회사 <span className="text-red-500">*</span>
</Label>
{isSuperAdmin ? (
<>
<Popover open={companyComboOpen} onOpenChange={setCompanyComboOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={companyComboOpen}
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
disabled={isLoading || isLoadingCompanies}
>
{formData.companyCode
? companies.find((company) => company.company_code === formData.companyCode)?.company_name ||
formData.companyCode
: "회사 선택..."}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
className="p-0"
style={{ width: "var(--radix-popover-trigger-width)" }}
align="start"
>
<Command>
<CommandInput placeholder="회사 검색..." className="text-xs sm:text-sm" />
<CommandList>
<CommandEmpty className="text-xs sm:text-sm">
{isLoadingCompanies ? "로딩 중..." : "회사를 찾을 수 없습니다."}
</CommandEmpty>
<CommandGroup>
{companies.map((company) => (
<CommandItem
key={company.company_code}
value={`${company.company_code} ${company.company_name}`}
onSelect={() => {
handleInputChange("companyCode", company.company_code);
setCompanyComboOpen(false);
}}
className="text-xs sm:text-sm"
>
<Check
className={cn(
"mr-2 h-4 w-4",
formData.companyCode === company.company_code ? "opacity-100" : "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{company.company_name}</span>
<span className="text-muted-foreground text-[10px]">{company.company_code}</span>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
모든 회사에 권한 그룹을 생성할 수 있습니다.
</p>
</>
) : (
<>
<Input
id="companyCode"
value={formData.companyCode}
disabled
className="bg-muted h-8 cursor-not-allowed text-xs sm:h-10 sm:text-sm"
/>
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
자신의 회사에만 권한 그룹을 생성할 수 있습니다.
</p>
</>
)}
</div>
)}
{/* 상태 (수정 모드에서만 표시) */}
{isEditMode && (
<div>
<Label htmlFor="status" className="text-xs sm:text-sm">
상태
</Label>
<Select value={formData.status} onValueChange={(value) => handleInputChange("status", value)}>
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="active">활성</SelectItem>
<SelectItem value="inactive">비활성</SelectItem>
</SelectContent>
</Select>
</div>
)}
{/* 알림 메시지 */}
{showAlert && (
<div
className={`rounded-lg border p-3 text-sm ${
alertType === "success"
? "border-green-300 bg-green-50 text-green-800"
: alertType === "error"
? "border-destructive/50 bg-destructive/10 text-destructive"
: "border-blue-300 bg-blue-50 text-blue-800"
}`}
>
<div className="flex items-start gap-2">
{alertType === "error" && <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />}
<span className="text-xs sm:text-sm">{alertMessage}</span>
</div>
</div>
)}
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={onClose}
disabled={isLoading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
취소
</Button>
<Button
onClick={handleSubmit}
disabled={isLoading || !isFormValid}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{isLoading ? "처리중..." : isEditMode ? "수정" : "생성"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

335
frontend/components/admin/RoleManagement.tsx Normal file
View File

@ -0,0 +1,335 @@
"use client";
import React, { useState, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Plus, Edit, Trash2, Users, Menu, Filter, X } from "lucide-react";
import { roleAPI, RoleGroup } from "@/lib/api/role";
import { useAuth } from "@/hooks/useAuth";
import { AlertCircle } from "lucide-react";
import { RoleFormModal } from "./RoleFormModal";
import { RoleDeleteModal } from "./RoleDeleteModal";
import { useRouter } from "next/navigation";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { companyAPI } from "@/lib/api/company";
/**
* 권한 그룹 관리 메인 컴포넌트
*
* 기능:
* - 권한 그룹 목록 조회 (회사별)
* - 권한 그룹 생성/수정/삭제
* - 상세 페이지로 이동 (멤버 관리 + 메뉴 권한 설정)
*/
export function RoleManagement() {
const { user: currentUser } = useAuth();
const router = useRouter();
// 회사 관리자 또는 최고 관리자 여부
const isAdmin =
(currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN") ||
currentUser?.userType === "COMPANY_ADMIN";
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 상태 관리
const [roleGroups, setRoleGroups] = useState<RoleGroup[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// 회사 필터 (최고 관리자 전용)
const [companies, setCompanies] = useState<Array<{ company_code: string; company_name: string }>>([]);
const [selectedCompany, setSelectedCompany] = useState<string>("all");
// 모달 상태
const [formModal, setFormModal] = useState({
isOpen: false,
editingRole: null as RoleGroup | null,
});
const [deleteModal, setDeleteModal] = useState({
isOpen: false,
role: null as RoleGroup | null,
});
// 회사 목록 로드 (최고 관리자만)
const loadCompanies = useCallback(async () => {
if (!isSuperAdmin) return;
try {
const companies = await companyAPI.getList();
setCompanies(companies);
} catch (error) {
console.error("회사 목록 로드 오류:", error);
}
}, [isSuperAdmin]);
// 데이터 로드
const loadRoleGroups = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
// 최고 관리자: selectedCompany에 따라 필터링 (all이면 전체 조회)
// 회사 관리자: 자기 회사만 조회
const companyFilter =
isSuperAdmin && selectedCompany !== "all"
? selectedCompany
: isSuperAdmin
? undefined
: currentUser?.companyCode;
console.log("권한 그룹 목록 조회:", { isSuperAdmin, selectedCompany, companyFilter });
const response = await roleAPI.getList({
companyCode: companyFilter,
});
if (response.success && response.data) {
setRoleGroups(response.data);
console.log("권한 그룹 조회 성공:", response.data.length, "개");
} else {
setError(response.message || "권한 그룹 목록을 불러오는데 실패했습니다.");
}
} catch (err) {
console.error("권한 그룹 목록 로드 오류:", err);
setError("권한 그룹 목록을 불러오는 중 오류가 발생했습니다.");
} finally {
setIsLoading(false);
}
}, [isSuperAdmin, selectedCompany, currentUser?.companyCode]);
useEffect(() => {
if (isAdmin) {
if (isSuperAdmin) {
loadCompanies(); // 최고 관리자는 회사 목록 먼저 로드
}
loadRoleGroups();
} else {
setIsLoading(false);
}
}, [isAdmin, isSuperAdmin, loadRoleGroups, loadCompanies]);
// 권한 그룹 생성 핸들러
const handleCreateRole = useCallback(() => {
setFormModal({ isOpen: true, editingRole: null });
}, []);
// 권한 그룹 수정 핸들러
const handleEditRole = useCallback((role: RoleGroup) => {
setFormModal({ isOpen: true, editingRole: role });
}, []);
// 권한 그룹 삭제 핸들러
const handleDeleteRole = useCallback((role: RoleGroup) => {
setDeleteModal({ isOpen: true, role });
}, []);
// 폼 모달 닫기
const handleFormModalClose = useCallback(() => {
setFormModal({ isOpen: false, editingRole: null });
}, []);
// 삭제 모달 닫기
const handleDeleteModalClose = useCallback(() => {
setDeleteModal({ isOpen: false, role: null });
}, []);
// 모달 성공 후 새로고침
const handleModalSuccess = useCallback(() => {
loadRoleGroups();
}, [loadRoleGroups]);
// 상세 페이지로 이동
const handleViewDetail = useCallback(
(role: RoleGroup) => {
router.push(`/admin/roles/${role.objid}`);
},
[router],
);
// 관리자가 아니면 접근 제한
if (!isAdmin) {
return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-6 shadow-sm">
<AlertCircle className="text-destructive mb-4 h-12 w-12" />
<h3 className="mb-2 text-lg font-semibold">접근 권한 없음</h3>
<p className="text-muted-foreground mb-4 text-center text-sm">
권한 그룹 관리는 회사 관리자 이상만 접근할 수 있습니다.
</p>
<Button variant="outline" onClick={() => window.history.back()}>
뒤로 가기
</Button>
</div>
);
}
return (
<>
{/* 에러 메시지 */}
{error && (
<div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
<div className="flex items-center justify-between">
<p className="text-destructive text-sm font-semibold">오류가 발생했습니다</p>
<button
onClick={() => setError(null)}
className="text-destructive hover:text-destructive/80 transition-colors"
aria-label="에러 메시지 닫기"
>
✕
</button>
</div>
<p className="text-destructive/80 mt-1.5 text-sm">{error}</p>
</div>
)}
{/* 액션 버튼 영역 */}
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div className="flex items-center gap-4">
<h2 className="text-xl font-semibold">권한 그룹 목록 ({roleGroups.length})</h2>
{/* 최고 관리자 전용: 회사 필터 */}
{isSuperAdmin && (
<div className="flex items-center gap-2">
<Filter className="text-muted-foreground h-4 w-4" />
<Select value={selectedCompany} onValueChange={(value) => setSelectedCompany(value)}>
<SelectTrigger className="h-10 w-[200px]">
<SelectValue placeholder="회사 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">전체 회사</SelectItem>
{companies.map((company) => (
<SelectItem key={company.company_code} value={company.company_code}>
{company.company_name}
</SelectItem>
))}
</SelectContent>
</Select>
{selectedCompany !== "all" && (
<Button variant="ghost" size="sm" onClick={() => setSelectedCompany("all")} className="h-8 w-8 p-0">
<X className="h-4 w-4" />
</Button>
)}
</div>
)}
</div>
<Button onClick={handleCreateRole} className="gap-2">
<Plus className="h-4 w-4" />
권한 그룹 생성
</Button>
</div>
{/* 권한 그룹 목록 */}
{isLoading ? (
<div className="bg-card rounded-lg border p-12 shadow-sm">
<div className="flex flex-col items-center justify-center gap-4">
<div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
<p className="text-muted-foreground text-sm">권한 그룹 목록을 불러오는 중...</p>
</div>
</div>
) : roleGroups.length === 0 ? (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<div className="flex flex-col items-center gap-2 text-center">
<p className="text-muted-foreground text-sm">등록된 권한 그룹이 없습니다.</p>
<p className="text-muted-foreground text-xs">권한 그룹을 생성하여 멤버를 관리해보세요.</p>
</div>
</div>
) : (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{roleGroups.map((role) => (
<div key={role.objid} className="bg-card rounded-lg border shadow-sm transition-colors">
{/* 헤더 (클릭 시 상세 페이지) */}
<div
className="hover:bg-muted/50 cursor-pointer p-4 transition-colors"
onClick={() => handleViewDetail(role)}
>
<div className="mb-4 flex items-start justify-between">
<div className="flex-1">
<h3 className="text-base font-semibold">{role.authName}</h3>
<p className="text-muted-foreground mt-1 font-mono text-sm">{role.authCode}</p>
</div>
<span
className={`rounded-full px-2 py-1 text-xs font-medium ${
role.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
}`}
>
{role.status === "active" ? "활성" : "비활성"}
</span>
</div>
{/* 정보 */}
<div className="space-y-2 border-t pt-4">
{/* 최고 관리자는 회사명 표시 */}
{isSuperAdmin && (
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">회사</span>
<span className="font-medium">
{companies.find((c) => c.company_code === role.companyCode)?.company_name || role.companyCode}
</span>
</div>
)}
<div className="flex justify-between text-sm">
<span className="text-muted-foreground flex items-center gap-1">
<Users className="h-3 w-3" />
멤버 수
</span>
<span className="font-medium">{role.memberCount || 0}명</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground flex items-center gap-1">
<Menu className="h-3 w-3" />
메뉴 권한
</span>
<span className="font-medium">{role.menuCount || 0}개</span>
</div>
</div>
</div>
{/* 액션 버튼 */}
<div className="flex gap-2 border-t p-3">
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
handleEditRole(role);
}}
className="flex-1 gap-1 text-xs"
>
<Edit className="h-3 w-3" />
수정
</Button>
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
handleDeleteRole(role);
}}
className="text-destructive hover:bg-destructive hover:text-destructive-foreground gap-1 text-xs"
>
<Trash2 className="h-3 w-3" />
삭제
</Button>
</div>
</div>
))}
</div>
)}
{/* 모달들 */}
<RoleFormModal
isOpen={formModal.isOpen}
onClose={handleFormModalClose}
onSuccess={handleModalSuccess}
editingRole={formModal.editingRole}
/>
<RoleDeleteModal
isOpen={deleteModal.isOpen}
onClose={handleDeleteModalClose}
onSuccess={handleModalSuccess}
role={deleteModal.role}
/>
</>
);
}

211
frontend/components/admin/UserAuthEditModal.tsx Normal file
View File

@ -0,0 +1,211 @@
"use client";
import React, { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { userAPI } from "@/lib/api/user";
import { Shield, ShieldCheck, User, Users, Building2, AlertTriangle } from "lucide-react";
interface UserAuthEditModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess?: () => void;
user: any | null;
}
/**
* 사용자 권한 변경 모달
*
* 권한 레벨만 변경 가능 (최고 관리자 전용)
*/
export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuthEditModalProps) {
const [selectedUserType, setSelectedUserType] = useState<string>("");
const [isLoading, setIsLoading] = useState(false);
const [showConfirmation, setShowConfirmation] = useState(false);
// 모달 열릴 때 현재 권한 설정
useEffect(() => {
if (isOpen && user) {
setSelectedUserType(user.userType || "USER");
setShowConfirmation(false);
}
}, [isOpen, user]);
// 권한 정보
const userTypeOptions = [
{
value: "SUPER_ADMIN",
label: "최고 관리자",
description: "모든 회사 관리, DDL 실행, 회사 생성/삭제 가능",
icon: <ShieldCheck className="h-4 w-4" />,
color: "text-purple-600",
},
{
value: "COMPANY_ADMIN",
label: "회사 관리자",
description: "자기 회사 데이터 및 사용자 관리 가능",
icon: <Building2 className="h-4 w-4" />,
color: "text-blue-600",
},
{
value: "USER",
label: "일반 사용자",
description: "자기 회사 데이터 조회/수정만 가능",
icon: <User className="h-4 w-4" />,
color: "text-gray-600",
},
{
value: "GUEST",
label: "게스트",
description: "제한된 조회 권한",
icon: <Users className="h-4 w-4" />,
color: "text-green-600",
},
{
value: "PARTNER",
label: "협력업체",
description: "협력업체 전용 권한",
icon: <Shield className="h-4 w-4" />,
color: "text-orange-600",
},
];
const selectedOption = userTypeOptions.find((opt) => opt.value === selectedUserType);
// 권한 변경 여부 확인
const isUserTypeChanged = user && selectedUserType !== user.userType;
// 권한 변경 처리
const handleSave = async () => {
if (!user || !isUserTypeChanged) {
onClose();
return;
}
// SUPER_ADMIN 변경 시 확인
if (selectedUserType === "SUPER_ADMIN" && !showConfirmation) {
setShowConfirmation(true);
return;
}
setIsLoading(true);
try {
const response = await userAPI.update({
userId: user.userId,
userName: user.userName,
companyCode: user.companyCode,
deptCode: user.deptCode,
userType: selectedUserType,
});
if (response.success) {
onSuccess?.();
} else {
alert(response.message || "권한 변경에 실패했습니다.");
}
} catch (error) {
console.error("권한 변경 오류:", error);
alert("권한 변경 중 오류가 발생했습니다.");
} finally {
setIsLoading(false);
}
};
if (!user) return null;
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">사용자 권한 변경</DialogTitle>
</DialogHeader>
<div className="space-y-4">
{/* 사용자 정보 */}
<div className="bg-muted/50 rounded-lg border p-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">사용자 ID</span>
<span className="font-mono font-medium">{user.userId}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">사용자명</span>
<span className="font-medium">{user.userName}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">회사</span>
<span className="font-medium">{user.companyName || user.companyCode}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">현재 권한</span>
<span className="font-medium">
{userTypeOptions.find((opt) => opt.value === user.userType)?.label || user.userType}
</span>
</div>
</div>
</div>
{/* 권한 선택 */}
<div className="space-y-2">
<Label htmlFor="userType" className="text-sm font-medium">
새로운 권한 <span className="text-red-500">*</span>
</Label>
<Select value={selectedUserType} onValueChange={setSelectedUserType}>
<SelectTrigger className="h-10">
<SelectValue placeholder="권한 선택" />
</SelectTrigger>
<SelectContent>
{userTypeOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
<div className="flex items-center gap-2">
<span className={option.color}>{option.icon}</span>
<span>{option.label}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
{selectedOption && <p className="text-muted-foreground text-xs">{selectedOption.description}</p>}
</div>
{/* SUPER_ADMIN 경고 */}
{showConfirmation && selectedUserType === "SUPER_ADMIN" && (
<div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
<div className="flex items-start gap-3">
<AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
<div className="space-y-2">
<p className="text-sm font-semibold text-orange-900">최고 관리자 권한 부여 경고</p>
<p className="text-xs text-orange-800">
최고 관리자 권한은 모든 회사 데이터에 접근하고, DDL을 실행하며, 회사를 생성/삭제할 수 있는 최상위
권한입니다. 신중하게 부여해주세요.
</p>
</div>
</div>
</div>
)}
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={onClose}
disabled={isLoading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
취소
</Button>
<Button
onClick={handleSave}
disabled={isLoading || !isUserTypeChanged}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{isLoading ? "처리중..." : showConfirmation ? "확인 및 저장" : "저장"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

157
frontend/components/admin/UserAuthManagement.tsx Normal file
View File

@ -0,0 +1,157 @@
"use client";
import React, { useState, useCallback, useEffect } from "react";
import { UserAuthTable } from "./UserAuthTable";
import { UserAuthEditModal } from "./UserAuthEditModal";
import { userAPI } from "@/lib/api/user";
import { useAuth } from "@/hooks/useAuth";
import { AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
/**
* 사용자 권한 관리 메인 컴포넌트
*
* 기능:
* - 사용자 목록 조회 (권한 정보 포함)
* - 권한 변경 모달
* - 최고 관리자 권한 체크
*/
export function UserAuthManagement() {
const { user: currentUser } = useAuth();
// 최고 관리자 여부
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 상태 관리
const [users, setUsers] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [paginationInfo, setPaginationInfo] = useState({
currentPage: 1,
pageSize: 20,
totalItems: 0,
totalPages: 0,
});
// 권한 변경 모달
const [authEditModal, setAuthEditModal] = useState({
isOpen: false,
user: null as any | null,
});
// 데이터 로드
const loadUsers = useCallback(
async (page: number = 1) => {
setIsLoading(true);
setError(null);
try {
const response = await userAPI.getList({
page,
size: paginationInfo.pageSize,
});
if (response.success && response.data) {
setUsers(response.data);
setPaginationInfo({
currentPage: response.currentPage || page,
pageSize: response.pageSize || paginationInfo.pageSize,
totalItems: response.total || 0,
totalPages: Math.ceil((response.total || 0) / (response.pageSize || paginationInfo.pageSize)),
});
} else {
setError(response.message || "사용자 목록을 불러오는데 실패했습니다.");
}
} catch (err) {
console.error("사용자 목록 로드 오류:", err);
setError("사용자 목록을 불러오는 중 오류가 발생했습니다.");
} finally {
setIsLoading(false);
}
},
[paginationInfo.pageSize],
);
useEffect(() => {
loadUsers(1);
}, []);
// 권한 변경 핸들러
const handleEditAuth = (user: any) => {
setAuthEditModal({
isOpen: true,
user,
});
};
// 권한 변경 모달 닫기
const handleAuthEditClose = () => {
setAuthEditModal({
isOpen: false,
user: null,
});
};
// 권한 변경 성공
const handleAuthEditSuccess = () => {
loadUsers(paginationInfo.currentPage);
handleAuthEditClose();
};
// 페이지 변경
const handlePageChange = (page: number) => {
loadUsers(page);
};
// 최고 관리자가 아닌 경우
if (!isSuperAdmin) {
return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-6 shadow-sm">
<AlertCircle className="text-destructive mb-4 h-12 w-12" />
<h3 className="mb-2 text-lg font-semibold">접근 권한 없음</h3>
<p className="text-muted-foreground mb-4 text-center text-sm">권한 관리는 최고 관리자만 접근할 수 있습니다.</p>
<Button variant="outline" onClick={() => window.history.back()}>
뒤로 가기
</Button>
</div>
);
}
return (
<div className="space-y-6">
{/* 에러 메시지 */}
{error && (
<div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
<div className="flex items-center justify-between">
<p className="text-destructive text-sm font-semibold">오류가 발생했습니다</p>
<button
onClick={() => setError(null)}
className="text-destructive hover:text-destructive/80 transition-colors"
aria-label="에러 메시지 닫기"
>
✕
</button>
</div>
<p className="text-destructive/80 mt-1.5 text-sm">{error}</p>
</div>
)}
{/* 사용자 권한 테이블 */}
<UserAuthTable
users={users}
isLoading={isLoading}
paginationInfo={paginationInfo}
onEditAuth={handleEditAuth}
onPageChange={handlePageChange}
/>
{/* 권한 변경 모달 */}
<UserAuthEditModal
isOpen={authEditModal.isOpen}
onClose={handleAuthEditClose}
onSuccess={handleAuthEditSuccess}
user={authEditModal.user}
/>
</div>
);
}

254
frontend/components/admin/UserAuthTable.tsx Normal file
View File

@ -0,0 +1,254 @@
"use client";
import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Shield, ShieldCheck, User as UserIcon, Users, Building2 } from "lucide-react";
interface UserAuthTableProps {
users: any[];
isLoading: boolean;
paginationInfo: {
currentPage: number;
pageSize: number;
totalItems: number;
totalPages: number;
};
onEditAuth: (user: any) => void;
onPageChange: (page: number) => void;
}
/**
* 사용자 권한 테이블 컴포넌트
*
* 사용자 목록과 권한 정보를 표시하고 권한 변경 기능 제공
*/
export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, onPageChange }: UserAuthTableProps) {
// 권한 레벨 표시
const getUserTypeInfo = (userType: string) => {
switch (userType) {
case "SUPER_ADMIN":
return {
label: "최고 관리자",
icon: <ShieldCheck className="h-3 w-3" />,
className: "bg-purple-100 text-purple-800 border-purple-300",
};
case "COMPANY_ADMIN":
return {
label: "회사 관리자",
icon: <Building2 className="h-3 w-3" />,
className: "bg-blue-100 text-blue-800 border-blue-300",
};
case "USER":
return {
label: "일반 사용자",
icon: <UserIcon className="h-3 w-3" />,
className: "bg-gray-100 text-gray-800 border-gray-300",
};
case "GUEST":
return {
label: "게스트",
icon: <Users className="h-3 w-3" />,
className: "bg-green-100 text-green-800 border-green-300",
};
case "PARTNER":
return {
label: "협력업체",
icon: <Shield className="h-3 w-3" />,
className: "bg-orange-100 text-orange-800 border-orange-300",
};
default:
return {
label: userType || "미지정",
icon: <UserIcon className="h-3 w-3" />,
className: "bg-gray-100 text-gray-800 border-gray-300",
};
}
};
// 행 번호 계산
const getRowNumber = (index: number) => {
return (paginationInfo.currentPage - 1) * paginationInfo.pageSize + index + 1;
};
// 로딩 스켈레톤
if (isLoading) {
return (
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 border-b">
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
<TableHead className="h-12 text-sm font-semibold">회사</TableHead>
<TableHead className="h-12 text-sm font-semibold">부서</TableHead>
<TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
<TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 10 }).map((_, index) => (
<TableRow key={index} className="border-b">
<TableCell className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell>
<TableCell className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell>
<TableCell className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell>
<TableCell className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell>
<TableCell className="h-16">
<div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell>
<TableCell className="h-16">
<div className="bg-muted mx-auto h-6 w-24 animate-pulse rounded-full"></div>
</TableCell>
<TableCell className="h-16">
<div className="bg-muted mx-auto h-8 w-20 animate-pulse rounded"></div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
// 빈 상태
if (users.length === 0) {
return (
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
</div>
);
}
// 실제 데이터 렌더링
return (
<div className="space-y-4">
{/* 데스크톱 테이블 */}
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
<TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
<TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
<TableHead className="h-12 text-sm font-semibold">회사</TableHead>
<TableHead className="h-12 text-sm font-semibold">부서</TableHead>
<TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
<TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{users.map((user, index) => {
const typeInfo = getUserTypeInfo(user.userType);
return (
<TableRow key={user.userId} className="hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16 text-center text-sm">{getRowNumber(index)}</TableCell>
<TableCell className="h-16 font-mono text-sm">{user.userId}</TableCell>
<TableCell className="h-16 text-sm">{user.userName}</TableCell>
<TableCell className="h-16 text-sm">{user.companyName || user.companyCode}</TableCell>
<TableCell className="h-16 text-sm">{user.deptName || "-"}</TableCell>
<TableCell className="h-16 text-center">
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
{typeInfo.icon}
{typeInfo.label}
</Badge>
</TableCell>
<TableCell className="h-16 text-center">
<Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
<Shield className="h-3 w-3" />
권한 변경
</Button>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
{/* 모바일 카드 뷰 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{users.map((user, index) => {
const typeInfo = getUserTypeInfo(user.userType);
return (
<div
key={user.userId}
className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
>
{/* 헤더 */}
<div className="mb-4 flex items-start justify-between">
<div className="flex-1">
<h3 className="text-base font-semibold">{user.userName}</h3>
<p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
</div>
<Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
{typeInfo.icon}
{typeInfo.label}
</Badge>
</div>
{/* 정보 */}
<div className="space-y-2 border-t pt-4">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">회사</span>
<span className="font-medium">{user.companyName || user.companyCode}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">부서</span>
<span className="font-medium">{user.deptName || "-"}</span>
</div>
</div>
{/* 액션 */}
<div className="mt-4 border-t pt-4">
<Button
variant="outline"
size="sm"
onClick={() => onEditAuth(user)}
className="h-9 w-full gap-2 text-sm"
>
<Shield className="h-4 w-4" />
권한 변경
</Button>
</div>
</div>
);
})}
</div>
{/* 페이지네이션 */}
{paginationInfo.totalPages > 1 && (
<div className="flex items-center justify-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => onPageChange(paginationInfo.currentPage - 1)}
disabled={paginationInfo.currentPage === 1}
>
이전
</Button>
<span className="text-muted-foreground text-sm">
{paginationInfo.currentPage} / {paginationInfo.totalPages}
</span>
<Button
variant="outline"
size="sm"
onClick={() => onPageChange(paginationInfo.currentPage + 1)}
disabled={paginationInfo.currentPage === paginationInfo.totalPages}
>
다음
</Button>
</div>
)}
</div>
);
}

295
frontend/components/admin/UserFormModal.tsx
View File

@ -8,6 +8,7 @@ import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Eye, EyeOff } from "lucide-react";
import { userAPI } from "@/lib/api/user";
import { useAuth } from "@/hooks/useAuth";
// 알림 모달 컴포넌트
interface AlertModalProps {
@ -37,7 +38,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
<DialogTitle className={getTypeColor()}>{title}</DialogTitle>
</DialogHeader>
<div className="py-4">
<p className="text-sm text-muted-foreground">{message}</p>
<p className="text-muted-foreground text-sm">{message}</p>
</div>
<div className="flex justify-end">
<Button onClick={onClose} className="w-20">
@ -53,6 +54,7 @@ interface UserFormModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess?: () => void;
editingUser?: any | null;
}
interface CompanyOption {
@ -83,7 +85,15 @@ interface DepartmentOption {
[key: string]: any; // 기타 필드들
}
export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps) {
export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserFormModalProps) {
// 현재 로그인한 사용자 정보
const { user: currentUser } = useAuth();
// 최고 관리자 여부 (company_code === '*' && userType === 'SUPER_ADMIN')
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
// 수정 모드 여부
const isEditMode = !!editingUser;
const [isLoading, setIsLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [companies, setCompanies] = useState<CompanyOption[]>([]);
@ -121,6 +131,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
positionName: "",
companyCode: "",
deptCode: "",
userType: "USER", // 기본값: 일반 사용자
sabun: null, // 항상 null로 설정
});
@ -132,20 +143,26 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
// 필수 필드 검증 (실시간)
const isFormValid = useMemo(() => {
const requiredFields = [
formData.userId.trim(),
formData.userPassword.trim(),
formData.userName.trim(),
formData.companyCode,
formData.deptCode,
];
// 수정 모드에서는 비밀번호 선택 사항 (변경할 경우만 입력)
const requiredFields = isEditMode
? [formData.userId.trim(), formData.userName.trim(), formData.companyCode, formData.deptCode]
: [
formData.userId.trim(),
formData.userPassword.trim(),
formData.userName.trim(),
formData.companyCode,
formData.deptCode,
];
// 모든 필수 필드가 입력되고 ID 중복체크가 완료되었는지 확인
// 모든 필수 필드가 입력되었는지 확인
const allFieldsFilled = requiredFields.every((field) => field);
const duplicateCheckValid = isUserIdChecked && lastCheckedUserId === formData.userId;
// 수정 모드: ID 중복체크 불필요 (이미 존재하는 사용자)
// 등록 모드: ID 중복체크 필수
const duplicateCheckValid = isEditMode || (isUserIdChecked && lastCheckedUserId === formData.userId);
return allFieldsFilled && duplicateCheckValid;
}, [formData, isUserIdChecked, lastCheckedUserId]);
}, [formData, isUserIdChecked, lastCheckedUserId, isEditMode]);
// 회사 목록 로드
const loadCompanies = useCallback(async () => {
@ -172,13 +189,52 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
[showAlert],
);
// 모달이 열릴 때 회사 목록 및 부서 목록 로드
// 모달이 열릴 때 회사 목록 및 부서 목록 로드, 수정 모드면 데이터 로드
useEffect(() => {
if (isOpen) {
loadCompanies();
loadDepartments(); // 전체 부서 목록 로드
// 수정 모드: 기존 사용자 정보 로드
if (isEditMode && editingUser) {
setFormData({
userId: editingUser.userId || "",
userPassword: "", // 수정 시 비밀번호는 비워둠 (변경 원할 경우만 입력)
userName: editingUser.userName || "",
email: editingUser.email || "",
tel: editingUser.tel || "",
cellPhone: editingUser.cellPhone || "",
positionName: editingUser.positionName || "",
companyCode: editingUser.companyCode || "",
deptCode: editingUser.deptCode || "",
userType: editingUser.userType || "USER",
sabun: editingUser.sabun || null,
});
// 수정 모드에서는 ID 중복체크 불필요
setIsUserIdChecked(true);
setLastCheckedUserId(editingUser.userId);
} else {
// 등록 모드: 폼 초기화
setFormData({
userId: "",
userPassword: "",
userName: "",
email: "",
tel: "",
cellPhone: "",
positionName: "",
companyCode: "",
deptCode: "",
userType: "USER",
sabun: null,
});
setIsUserIdChecked(false);
setLastCheckedUserId("");
setDuplicateCheckMessage("");
setDuplicateCheckType("");
}
}
}, [isOpen, loadCompanies, loadDepartments]);
}, [isOpen, isEditMode, editingUser, loadCompanies, loadDepartments]);
// 회사 선택 시 부서 목록 업데이트
useEffect(() => {
@ -304,29 +360,51 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
positionName: formData.positionName || null,
companyCode: formData.companyCode,
deptCode: formData.deptCode || null,
userType: formData.userType, // 권한 타입 추가
sabun: null, // 항상 null (테이블 1번 컬럼)
status: "active", // 기본값 (테이블 18번 컬럼)
};
const response = await userAPI.create(userDataToSend);
let response;
if (isEditMode) {
// 수정 모드: 비밀번호 필드 제외 (비밀번호 초기화 기능 별도 제공)
const updateData = { ...userDataToSend };
delete updateData.userPassword;
response = await userAPI.update(updateData);
} else {
// 등록 모드
response = await userAPI.create(userDataToSend);
}
if (response.success) {
showAlert("등록 완료", "사용자가 성공적으로 등록되었습니다.", "success");
showAlert(
isEditMode ? "수정 완료" : "등록 완료",
isEditMode ? "사용자 정보가 성공적으로 수정되었습니다." : "사용자가 성공적으로 등록되었습니다.",
"success",
);
// 성공 시 모달을 바로 닫지 않고 사용자가 확인 후 닫도록 수정
setTimeout(() => {
onClose();
onSuccess?.();
}, 1500); // 1.5초 후 자동으로 모달 닫기
} else {
showAlert("등록 실패", response.message || "사용자 등록에 실패했습니다.", "error");
showAlert(
isEditMode ? "수정 실패" : "등록 실패",
response.message || (isEditMode ? "사용자 정보 수정에 실패했습니다." : "사용자 등록에 실패했습니다."),
"error",
);
}
} catch (error) {
console.error("사용자 등록 오류:", error);
showAlert("오류 발생", "사용자 등록 중 오류가 발생했습니다.", "error");
console.error(isEditMode ? "사용자 수정 오류:" : "사용자 등록 오류:", error);
showAlert(
"오류 발생",
isEditMode ? "사용자 정보 수정 중 오류가 발생했습니다." : "사용자 등록 중 오류가 발생했습니다.",
"error",
);
} finally {
setIsLoading(false);
}
}, [formData, validateForm, onSuccess, onClose, showAlert]);
}, [formData, validateForm, onSuccess, onClose, showAlert, isEditMode]);
// 모달 닫기
const handleClose = useCallback(() => {
@ -366,7 +444,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
<Dialog open={isOpen} onOpenChange={handleClose}>
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
<DialogHeader>
<DialogTitle>사용자 등록</DialogTitle>
<DialogTitle>{isEditMode ? "사용자 정보 수정" : "사용자 등록"}</DialogTitle>
</DialogHeader>
<div className="space-y-6 py-4">
@ -376,32 +454,38 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
<Label htmlFor="userId" className="text-sm font-medium">
사용자 ID <span className="text-red-500">*</span>
</Label>
<div className="flex gap-2">
<Input
id="userId"
placeholder="사용자 ID 입력"
value={formData.userId}
onChange={(e) => handleInputChange("userId", e.target.value)}
onKeyDown={handleKeyDown}
className="flex-1"
/>
<Button
type="button"
variant={isUserIdChecked && lastCheckedUserId === formData.userId ? "default" : "outline"}
onClick={checkUserIdDuplicate}
disabled={!formData.userId.trim() || isLoading}
className="whitespace-nowrap"
>
{isUserIdChecked && lastCheckedUserId === formData.userId ? "확인완료" : "중복확인"}
</Button>
</div>
{/* 중복확인 결과 메시지 */}
{duplicateCheckMessage && (
<div
className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-green-600" : "text-destructive"}`}
>
{duplicateCheckMessage}
</div>
{isEditMode ? (
<Input id="userId" value={formData.userId} disabled className="bg-muted cursor-not-allowed" />
) : (
<>
<div className="flex gap-2">
<Input
id="userId"
placeholder="사용자 ID 입력"
value={formData.userId}
onChange={(e) => handleInputChange("userId", e.target.value)}
onKeyDown={handleKeyDown}
className="flex-1"
/>
<Button
type="button"
variant={isUserIdChecked && lastCheckedUserId === formData.userId ? "default" : "outline"}
onClick={checkUserIdDuplicate}
disabled={!formData.userId.trim() || isLoading}
className="whitespace-nowrap"
>
{isUserIdChecked && lastCheckedUserId === formData.userId ? "확인완료" : "중복확인"}
</Button>
</div>
{/* 중복확인 결과 메시지 */}
{duplicateCheckMessage && (
<div
className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-green-600" : "text-destructive"}`}
>
{duplicateCheckMessage}
</div>
)}
</>
)}
</div>
@ -419,53 +503,82 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
</div>
</div>
{/* 비밀번호 */}
<div className="space-y-2">
<Label htmlFor="userPassword" className="text-sm font-medium">
비밀번호 <span className="text-red-500">*</span>
</Label>
<div className="relative">
<Input
id="userPassword"
type={showPassword ? "text" : "password"}
placeholder="비밀번호 입력"
value={formData.userPassword}
onChange={(e) => handleInputChange("userPassword", e.target.value)}
onKeyDown={handleKeyDown}
className="pr-10"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setShowPassword(!showPassword)}
className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
{/* 비밀번호 - 등록 모드에만 표시 */}
{!isEditMode && (
<div className="space-y-2">
<Label htmlFor="userPassword" className="text-sm font-medium">
비밀번호 <span className="text-red-500">*</span>
</Label>
<div className="relative">
<Input
id="userPassword"
type={showPassword ? "text" : "password"}
placeholder="비밀번호 입력"
value={formData.userPassword}
onChange={(e) => handleInputChange("userPassword", e.target.value)}
onKeyDown={handleKeyDown}
className="pr-10"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setShowPassword(!showPassword)}
className="absolute top-0 right-0 h-full px-3 hover:bg-transparent"
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
</div>
<p className="text-muted-foreground text-xs">
비밀번호 변경은 별도의 비밀번호 초기화 기능을 이용하세요.
</p>
</div>
)}
{/* 회사 선택 */}
<div className="space-y-2">
<Label htmlFor="companyCode" className="text-sm font-medium">
회사 <span className="text-red-500">*</span>
</Label>
{isSuperAdmin ? (
<>
<Select
value={formData.companyCode}
onValueChange={(value) => handleInputChange("companyCode", value)}
>
<SelectTrigger>
<SelectValue placeholder="회사 선택" />
</SelectTrigger>
<SelectContent>
{companies.map((company) => (
<SelectItem key={company.company_code} value={company.company_code}>
{company.company_name}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-muted-foreground text-xs">
권한 관리는 별도의 권한 관리 페이지에서 설정할 수 있습니다.
</p>
</>
) : (
<>
<Input
id="companyCode"
value={
companies.find((c) => c.company_code === formData.companyCode)?.company_name ||
formData.companyCode
}
disabled
className="bg-muted cursor-not-allowed"
/>
<p className="text-muted-foreground text-xs">회사는 최고 관리자만 변경할 수 있습니다.</p>
</>
)}
</div>
{/* 회사 정보 */}
{/* 부서 정보 */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="companyCode" className="text-sm font-medium">
회사 <span className="text-red-500">*</span>
</Label>
<Select value={formData.companyCode} onValueChange={(value) => handleInputChange("companyCode", value)}>
<SelectTrigger>
<SelectValue placeholder="회사 선택" />
</SelectTrigger>
<SelectContent>
{companies.map((company) => (
<SelectItem key={company.company_code} value={company.company_code}>
{company.company_name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="deptCode" className="text-sm font-medium">
부서 <span className="text-red-500">*</span>
@ -568,7 +681,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
취소
</Button>
<Button type="button" onClick={handleSubmit} disabled={isLoading || !isFormValid} className="min-w-[80px]">
{isLoading ? "처리중..." : "등록"}
{isLoading ? "처리중..." : isEditMode ? "수정" : "등록"}
</Button>
</div>
</DialogContent>

47
frontend/components/admin/UserManagement.tsx
View File

@ -45,20 +45,37 @@ export function UserManagement() {
userName: null as string | null,
});
// 사용자 등록 모달 상태
const [isUserFormModalOpen, setIsUserFormModalOpen] = useState(false);
// 사용자 등록/수정 모달 상태
const [userFormModal, setUserFormModal] = useState({
isOpen: false,
editingUser: null as any | null,
});
// 사용자 등록 핸들러
const handleCreateUser = () => {
setIsUserFormModalOpen(true);
setUserFormModal({
isOpen: true,
editingUser: null,
});
};
// 사용자 등록 모달 닫기
// 사용자 수정 핸들러
const handleEditUser = (user: any) => {
setUserFormModal({
isOpen: true,
editingUser: user,
});
};
// 사용자 등록/수정 모달 닫기
const handleUserFormClose = () => {
setIsUserFormModalOpen(false);
setUserFormModal({
isOpen: false,
editingUser: null,
});
};
// 사용자 등록 성공 핸들러
// 사용자 등록/수정 성공 핸들러
const handleUserFormSuccess = () => {
refreshData(); // 목록 새로고침
handleUserFormClose();
@ -101,18 +118,18 @@ export function UserManagement() {
{/* 에러 메시지 */}
{error && (
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
<div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
<div className="flex items-center justify-between">
<p className="text-sm font-semibold text-destructive">오류가 발생했습니다</p>
<p className="text-destructive text-sm font-semibold">오류가 발생했습니다</p>
<button
onClick={clearError}
className="text-destructive transition-colors hover:text-destructive/80"
className="text-destructive hover:text-destructive/80 transition-colors"
aria-label="에러 메시지 닫기"
>
✕
</button>
</div>
<p className="mt-1.5 text-sm text-destructive/80">{error}</p>
<p className="text-destructive/80 mt-1.5 text-sm">{error}</p>
</div>
)}
@ -123,6 +140,7 @@ export function UserManagement() {
paginationInfo={paginationInfo}
onStatusToggle={handleStatusToggle}
onPasswordReset={handlePasswordReset}
onEdit={handleEditUser}
/>
{/* 페이지네이션 */}
@ -137,8 +155,13 @@ export function UserManagement() {
/>
)}
{/* 사용자 등록 모달 */}
<UserFormModal isOpen={isUserFormModalOpen} onClose={handleUserFormClose} onSuccess={handleUserFormSuccess} />
{/* 사용자 등록/수정 모달 */}
<UserFormModal
isOpen={userFormModal.isOpen}
onClose={handleUserFormClose}
onSuccess={handleUserFormSuccess}
editingUser={userFormModal.editingUser}
/>
{/* 비밀번호 초기화 모달 */}
<UserPasswordResetModal

74
frontend/components/admin/UserTable.tsx
View File

@ -1,4 +1,4 @@
import { Key, History } from "lucide-react";
import { Key, History, Edit } from "lucide-react";
import { useState } from "react";
import { User } from "@/types/user";
import { USER_TABLE_COLUMNS } from "@/constants/user";
@ -15,12 +15,20 @@ interface UserTableProps {
paginationInfo: PaginationInfo;
onStatusToggle: (user: User, newStatus: string) => void;
onPasswordReset: (userId: string, userName: string) => void;
onEdit: (user: User) => void;
}
/**
* 사용자 목록 테이블 컴포넌트
*/
export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, onPasswordReset }: UserTableProps) {
export function UserTable({
users,
isLoading,
paginationInfo,
onStatusToggle,
onPasswordReset,
onEdit,
}: UserTableProps) {
// 확인 모달 상태 관리
const [confirmDialog, setConfirmDialog] = useState<{
isOpen: boolean;
@ -100,10 +108,10 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
return (
<>
{/* 데스크톱 테이블 스켈레톤 */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50">
<TableRow className="bg-muted/50 border-b">
{USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label}
@ -117,13 +125,13 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
<TableRow key={index} className="border-b">
{USER_TABLE_COLUMNS.map((column) => (
<TableCell key={column.key} className="h-16">
<div className="h-4 animate-pulse rounded bg-muted"></div>
<div className="bg-muted h-4 animate-pulse rounded"></div>
</TableCell>
))}
<TableCell className="h-16">
<div className="flex gap-2">
{Array.from({ length: 2 }).map((_, i) => (
<div key={i} className="h-8 w-8 animate-pulse rounded bg-muted"></div>
<div key={i} className="bg-muted h-8 w-8 animate-pulse rounded"></div>
))}
</div>
</TableCell>
@ -136,25 +144,25 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
{/* 모바일/태블릿 카드 스켈레톤 */}
<div className="grid gap-4 sm:grid-cols-2 lg:hidden">
{Array.from({ length: 6 }).map((_, index) => (
<div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
<div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
<div className="mb-4 flex items-start justify-between">
<div className="flex-1 space-y-2">
<div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
<div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
<div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
<div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
</div>
<div className="h-6 w-11 animate-pulse rounded-full bg-muted"></div>
<div className="bg-muted h-6 w-11 animate-pulse rounded-full"></div>
</div>
<div className="space-y-2 border-t pt-4">
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex justify-between">
<div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
<div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
<div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
<div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
</div>
))}
</div>
<div className="mt-4 flex gap-2 border-t pt-4">
<div className="h-9 flex-1 animate-pulse rounded bg-muted"></div>
<div className="h-9 flex-1 animate-pulse rounded bg-muted"></div>
<div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
<div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
</div>
</div>
))}
@ -166,9 +174,9 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
// 데이터가 없을 때
if (users.length === 0) {
return (
<div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
<div className="flex flex-col items-center gap-2 text-center">
<p className="text-sm text-muted-foreground">등록된 사용자가 없습니다.</p>
<p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
</div>
</div>
);
@ -178,10 +186,10 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
return (
<>
{/* 데스크톱 테이블 뷰 (lg 이상) */}
<div className="hidden rounded-lg border bg-card shadow-sm lg:block">
<div className="bg-card hidden rounded-lg border shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="border-b bg-muted/50 hover:bg-muted/50">
<TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
{USER_TABLE_COLUMNS.map((column) => (
<TableHead key={column.key} style={{ width: column.width }} className="h-12 text-sm font-semibold">
{column.label}
@ -192,10 +200,7 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
</TableHeader>
<TableBody>
{users.map((user, index) => (
<TableRow
key={`${user.userId}-${index}`}
className="border-b transition-colors hover:bg-muted/50"
>
<TableRow key={`${user.userId}-${index}`} className="hover:bg-muted/50 border-b transition-colors">
<TableCell className="h-16 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
<TableCell className="h-16 font-mono text-sm">{user.sabun || "-"}</TableCell>
<TableCell className="h-16 text-sm font-medium">{user.companyCode || "-"}</TableCell>
@ -219,6 +224,15 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
</TableCell>
<TableCell className="h-16">
<div className="flex gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => onEdit(user)}
className="h-8 w-8"
title="사용자 정보 수정"
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
@ -250,13 +264,13 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
{users.map((user, index) => (
<div
key={`${user.userId}-${index}`}
className="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
>
{/* 헤더: 이름과 상태 */}
<div className="mb-4 flex items-start justify-between">
<div className="flex-1">
<h3 className="text-base font-semibold">{user.userName}</h3>
<p className="mt-1 font-mono text-sm text-muted-foreground">{user.userId}</p>
<p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
</div>
<Switch
checked={user.status === "active"}
@ -311,23 +325,27 @@ export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, on
{/* 액션 버튼 */}
<div className="mt-4 flex gap-2 border-t pt-4">
<Button variant="outline" size="sm" onClick={() => onEdit(user)} className="h-9 flex-1 gap-2 text-sm">
<Edit className="h-4 w-4" />
수정
</Button>
<Button
variant="outline"
size="sm"
onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
className="h-9 flex-1 gap-2 text-sm"
className="h-9 w-9 p-0"
title="비밀번호 초기화"
>
<Key className="h-4 w-4" />
비밀번호 초기화
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleOpenHistoryModal(user)}
className="h-9 flex-1 gap-2 text-sm"
className="h-9 w-9 p-0"
title="변경이력"
>
<History className="h-4 w-4" />
변경이력
</Button>
</div>
</div>

72
frontend/components/admin/dashboard/charts/ChartRenderer.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { DashboardElement, QueryResult, ChartData } from "../types";
import { Chart } from "./Chart";
import { transformQueryResultToChartData } from "../utils/chartDataTransform";
@ -21,11 +21,39 @@ interface ChartRendererProps {
* - QueryResult를 ChartData로 변환
* - D3 Chart 컴포넌트에 전달
*/
export function ChartRenderer({ element, data, width = 250, height = 200 }: ChartRendererProps) {
export function ChartRenderer({ element, data, width, height = 200 }: ChartRendererProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState(width || 250);
const [chartData, setChartData] = useState<ChartData | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// 컨테이너 너비 측정 (width가 undefined일 때)
useEffect(() => {
if (width !== undefined) {
setContainerWidth(width);
return;
}
const updateWidth = () => {
if (containerRef.current) {
const measuredWidth = containerRef.current.offsetWidth;
console.log("📏 컨테이너 너비 측정:", measuredWidth);
setContainerWidth(measuredWidth || 500); // 기본값 500
}
};
// 약간의 지연을 두고 측정 (DOM 렌더링 완료 후)
const timer = setTimeout(updateWidth, 100);
updateWidth();
window.addEventListener("resize", updateWidth);
return () => {
clearTimeout(timer);
window.removeEventListener("resize", updateWidth);
};
}, [width]);
// 데이터 페칭
useEffect(() => {
const fetchData = async () => {
@ -212,15 +240,39 @@ export function ChartRenderer({ element, data, width = 250, height = 200 }: Char
}
// D3 차트 렌더링
const actualWidth = width !== undefined ? width : containerWidth;
// 원형 차트는 더 큰 크기가 필요 (최소 400px)
const isCircularChart = element.subtype === "pie" || element.subtype === "donut";
const minWidth = isCircularChart ? 400 : 200;
const finalWidth = Math.max(actualWidth - 20, minWidth);
// 원형 차트는 범례 공간을 위해 더 많은 여백 필요
const finalHeight = Math.max(height - (isCircularChart ? 60 : 20), 300);
console.log("🎨 ChartRenderer:", {
elementSubtype: element.subtype,
propWidth: width,
containerWidth,
actualWidth,
finalWidth,
finalHeight,
hasChartData: !!chartData,
chartDataLabels: chartData?.labels,
chartDataDatasets: chartData?.datasets?.length,
isCircularChart,
});
return (
<div className="flex h-full w-full items-center justify-center bg-white p-2">
<Chart
chartType={element.subtype}
data={chartData}
config={element.chartConfig}
width={width - 20}
height={height - 20}
/>
<div ref={containerRef} className="flex h-full w-full items-center justify-center bg-white p-2">
<div className="flex items-center justify-center">
<Chart
chartType={element.subtype}
data={chartData}
config={element.chartConfig}
width={finalWidth}
height={finalHeight}
/>
</div>
</div>
);
}

43
frontend/components/admin/dashboard/charts/PieChart.tsx
View File

@ -24,12 +24,17 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
const svg = d3.select(svgRef.current);
svg.selectAll("*").remove();
const margin = { top: 40, right: 150, bottom: 40, left: 120 };
// 범례를 위한 여백 확보 (아래 80px)
const legendHeight = config.showLegend !== false ? 80 : 0;
const margin = { top: 20, right: 20, bottom: 20 + legendHeight, left: 20 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;
const chartHeight = height - margin.top - margin.bottom - legendHeight;
const radius = Math.min(chartWidth, chartHeight) / 2;
const g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`);
// 차트를 위쪽에 배치 (범례 공간 확보)
const centerX = width / 2;
const centerY = margin.top + radius + 20;
const g = svg.append("g").attr("transform", `translate(${centerX},${centerY})`);
// 색상 팔레트
const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899"];
@ -136,33 +141,35 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
.text(config.title);
}
// 범례 (차트 오른쪽, 세로 배치)
// 범례 (차트 아래, 가로 배치, 중앙 정렬)
if (config.showLegend !== false) {
const legendX = width / 2 + radius + 30; // 차트 오른쪽
const legendY = (height - pieData.length * 25) / 2; // 세로 중앙 정렬
const legend = svg
.append("g")
.attr("class", "legend")
.attr("transform", `translate(${legendX}, ${legendY})`);
const itemSpacing = 100; // 각 범례 항목 사이 간격 (줄임)
const totalWidth = pieData.length * itemSpacing;
const legendStartX = (width - totalWidth) / 2; // 시작 위치
const legendY = centerY + radius + 40; // 차트 아래 40px
const legend = svg.append("g").attr("class", "legend");
pieData.forEach((d, i) => {
const legendItem = legend
.append("g")
.attr("transform", `translate(0, ${i * 25})`);
.attr("transform", `translate(${legendStartX + i * itemSpacing + itemSpacing / 2}, ${legendY})`);
legendItem
.append("rect")
.attr("width", 15)
.attr("height", 15)
.attr("x", -6) // 사각형을 중앙 기준으로
.attr("y", -6)
.attr("width", 12)
.attr("height", 12)
.attr("fill", colors[i % colors.length])
.attr("rx", 3);
.attr("rx", 2);
legendItem
.append("text")
.attr("x", 20)
.attr("y", 12)
.style("font-size", "11px")
.attr("x", 0)
.attr("y", 18)
.attr("text-anchor", "middle") // 텍스트 중앙 정렬
.style("font-size", "10px")
.style("fill", "#333")
.text(`${d.label} (${d.value})`);
});

28
frontend/components/admin/dashboard/widgets/ClockWidget.tsx
View File

@ -111,19 +111,21 @@ export function ClockWidget({ element, onConfigUpdate }: ClockWidgetProps) {
{/* 시계 콘텐츠 */}
{renderClockContent()}
{/* 설정 버튼 - 우측 상단 */}
<div className="absolute top-2 right-2">
<Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 bg-white/80 hover:bg-white">
<Settings className="h-4 w-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[500px] p-0" align="end">
<ClockSettings config={config} onSave={handleSaveSettings} onClose={() => setSettingsOpen(false)} />
</PopoverContent>
</Popover>
</div>
{/* 설정 버튼 - 우측 상단 (디자이너 모드에서만 표시) */}
{onConfigUpdate && (
<div className="absolute top-2 right-2">
<Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 bg-white/80 hover:bg-white">
<Settings className="h-4 w-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[500px] p-0" align="end">
<ClockSettings config={config} onSave={handleSaveSettings} onClose={() => setSettingsOpen(false)} />
</PopoverContent>
</Popover>
</div>
)}
</div>
);
}

4
frontend/components/admin/dashboard/widgets/ListWidget.tsx
View File

@ -216,7 +216,7 @@ export function ListWidget({ element }: ListWidgetProps) {
const paginatedRows = config.enablePagination ? data.rows.slice(startIdx, endIdx) : data.rows;
return (
<div className="flex h-full w-full flex-col p-4">
<div className="flex h-full w-full flex-col gap-3 p-4">
{/* 테이블 뷰 */}
{config.viewMode === "table" && (
<div className={`flex-1 overflow-auto rounded-lg border ${config.compactMode ? "text-xs" : "text-sm"}`}>
@ -306,7 +306,7 @@ export function ListWidget({ element }: ListWidgetProps) {
{/* 페이지네이션 */}
{config.enablePagination && totalPages > 1 && (
<div className="mt-4 flex items-center justify-between text-sm">
<div className="flex shrink-0 items-center justify-between border-t pt-3 text-sm">
<div className="text-gray-600">
{startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
</div>

210
frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { Canvas, useThree } from "@react-three/fiber";
import { OrbitControls, Grid, Box } from "@react-three/drei";
import { OrbitControls, Grid, Box, Text } from "@react-three/drei";
import { Suspense, useRef, useState, useEffect } from "react";
import * as THREE from "three";
@ -68,16 +68,19 @@ function MaterialBox({
}) {
const meshRef = useRef<THREE.Mesh>(null);
const [isDragging, setIsDragging] = useState(false);
const [isValidPosition, setIsValidPosition] = useState(true); // 배치 가능 여부 (시각 피드백용)
const dragStartPos = useRef<{ x: number; y: number; z: number }>({ x: 0, y: 0, z: 0 });
const mouseStartPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const { camera, gl } = useThree();
// 특정 좌표에 요소를 배치할 수 있는지 확인하고, 필요하면 Y 위치를 조정
const checkCollisionAndAdjustY = (x: number, y: number, z: number): { hasCollision: boolean; adjustedY: number } => {
const palletHeight = 0.3; // 팔레트 높이
const palletGap = 0.05; // 팔레트와 박스 사이 간격
const mySize = placement.size_x || gridSize; // 내 크기 (5)
const myHalfSize = mySize / 2; // 2.5
const mySizeY = placement.size_y || gridSize; // 내 높이 (5)
const mySizeY = placement.size_y || gridSize; // 박스 높이 (5)
const myTotalHeight = mySizeY + palletHeight + palletGap; // 팔레트 포함한 전체 높이
let maxYBelow = gridSize / 2; // 기본 바닥 높이 (2.5)
@ -89,24 +92,33 @@ function MaterialBox({
const pSize = p.size_x || gridSize; // 상대방 크기 (5)
const pHalfSize = pSize / 2; // 2.5
const pSizeY = p.size_y || gridSize; // 상대방 높이 (5)
const pSizeY = p.size_y || gridSize; // 상대방 박스 높이 (5)
const pTotalHeight = pSizeY + palletHeight + palletGap; // 상대방 팔레트 포함 전체 높이
// XZ 평면에서 겹치는지 확인
const isXZOverlapping =
Math.abs(x - p.position_x) < myHalfSize + pHalfSize && // X축 겹침
Math.abs(z - p.position_z) < myHalfSize + pHalfSize; // Z축 겹침
// 1단계: 넓은 범위로 겹침 감지 (살짝만 가까이 가도 감지)
const detectionMargin = 0.5; // 감지 범위 확장 (0.5 유닛)
const isNearby =
Math.abs(x - p.position_x) < myHalfSize + pHalfSize + detectionMargin && // X축 근접
Math.abs(z - p.position_z) < myHalfSize + pHalfSize + detectionMargin; // Z축 근접
if (isXZOverlapping) {
// 같은 XZ 위치에 요소가 있음
// 그 요소의 윗면 높이 계산 (중심 + 높이/2)
const topOfOtherElement = p.position_y + pSizeY / 2;
// 내가 올라갈 Y 위치는 윗면 + 내 높이/2
const myYOnTop = topOfOtherElement + mySizeY / 2;
if (isNearby) {
// 2단계: 실제로 겹치는지 정확히 판단 (바닥에 둘지, 위에 둘지 결정)
const isActuallyOverlapping =
Math.abs(x - p.position_x) < myHalfSize + pHalfSize && // X축 실제 겹침
Math.abs(z - p.position_z) < myHalfSize + pHalfSize; // Z축 실제 겹침
// 가장 높은 위치 기록
if (myYOnTop > maxYBelow) {
maxYBelow = myYOnTop;
if (isActuallyOverlapping) {
// 실제로 겹침: 위에 배치
// 상대방 전체 높이 (박스 + 팔레트)의 윗면 계산
const topOfOtherElement = p.position_y + pTotalHeight / 2;
// 내 전체 높이의 절반을 더해서 내가 올라갈 Y 위치 계산
const myYOnTop = topOfOtherElement + myTotalHeight / 2;
if (myYOnTop > maxYBelow) {
maxYBelow = myYOnTop;
}
}
// 근처에만 있고 실제로 안 겹침: 바닥에 배치 (maxYBelow 유지)
}
}
@ -182,12 +194,9 @@ function MaterialBox({
const snappedX = snapToGrid(finalX, gridSize);
const snappedZ = snapToGrid(finalZ, gridSize);
// 충돌 체크 및 Y 위치 조정 (시각 피드백용)
// 충돌 체크 및 Y 위치 조정
const { adjustedY } = checkCollisionAndAdjustY(snappedX, dragStartPos.current.y, snappedZ);
// 시각 피드백: 항상 유효한 위치 (위로 올라가기 때문)
setIsValidPosition(true);
// 즉시 mesh 위치 업데이트 (조정된 Y 위치로)
meshRef.current.position.set(finalX, adjustedY, finalZ);
@ -285,11 +294,19 @@ function MaterialBox({
// 요소가 설정되었는지 확인
const isConfigured = !!(placement.material_name && placement.quantity && placement.unit);
const boxHeight = placement.size_y || gridSize;
const boxWidth = placement.size_x || gridSize;
const boxDepth = placement.size_z || gridSize;
const palletHeight = 0.3; // 팔레트 높이
const palletGap = 0.05; // 팔레트와 박스 사이 간격 (매우 작게)
// 팔레트 위치 계산: 박스 하단부터 시작
const palletYOffset = -(boxHeight / 2) - palletHeight / 2 - palletGap;
return (
<Box
<group
ref={meshRef}
position={[placement.position_x, placement.position_y, placement.position_z]}
args={[placement.size_x, placement.size_y, placement.size_z]}
onClick={(e) => {
e.stopPropagation();
e.nativeEvent?.stopPropagation();
@ -298,7 +315,6 @@ function MaterialBox({
}}
onPointerDown={handlePointerDown}
onPointerOver={() => {
// 뷰어 모드(onDrag 없음)에서는 기본 커서, 편집 모드에서는 grab 커서
if (onDrag) {
gl.domElement.style.cursor = isSelected ? "grab" : "pointer";
} else {
@ -311,15 +327,142 @@ function MaterialBox({
}
}}
>
<meshStandardMaterial
color={isDragging ? (isValidPosition ? "#22c55e" : "#ef4444") : placement.color}
opacity={isConfigured ? (isSelected ? 1 : 0.8) : 0.5}
transparent
emissive={isDragging ? (isValidPosition ? "#22c55e" : "#ef4444") : isSelected ? "#ffffff" : "#000000"}
emissiveIntensity={isDragging ? 0.5 : isSelected ? 0.2 : 0}
wireframe={!isConfigured}
/>
</Box>
{/* 팔레트 그룹 - 박스 하단에 붙어있도록 */}
<group position={[0, palletYOffset, 0]}>
{/* 상단 가로 판자들 (5개) */}
{[-boxDepth * 0.4, -boxDepth * 0.2, 0, boxDepth * 0.2, boxDepth * 0.4].map((zOffset, idx) => (
<Box
key={`top-${idx}`}
args={[boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15]}
position={[0, palletHeight * 0.35, zOffset]}
>
<meshStandardMaterial color="#8B4513" roughness={0.95} metalness={0.0} />
<lineSegments>
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15)]} />
<lineBasicMaterial color="#000000" opacity={0.3} transparent />
</lineSegments>
</Box>
))}
{/* 중간 세로 받침대 (3개) */}
{[-boxWidth * 0.35, 0, boxWidth * 0.35].map((xOffset, idx) => (
<Box
key={`middle-${idx}`}
args={[boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2]}
position={[xOffset, 0, 0]}
>
<meshStandardMaterial color="#654321" roughness={0.98} metalness={0.0} />
<lineSegments>
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2)]} />
<lineBasicMaterial color="#000000" opacity={0.4} transparent />
</lineSegments>
</Box>
))}
{/* 하단 가로 판자들 (3개) */}
{[-boxDepth * 0.3, 0, boxDepth * 0.3].map((zOffset, idx) => (
<Box
key={`bottom-${idx}`}
args={[boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18]}
position={[0, -palletHeight * 0.35, zOffset]}
>
<meshStandardMaterial color="#6B4423" roughness={0.97} metalness={0.0} />
<lineSegments>
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18)]} />
<lineBasicMaterial color="#000000" opacity={0.3} transparent />
</lineSegments>
</Box>
))}
</group>
{/* 메인 박스 */}
<Box args={[boxWidth, boxHeight, boxDepth]} position={[0, 0, 0]}>
{/* 메인 재질 - 골판지 느낌 */}
<meshStandardMaterial
color={placement.color}
opacity={isConfigured ? (isSelected ? 1 : 0.8) : 0.5}
transparent
emissive={isSelected ? "#ffffff" : "#000000"}
emissiveIntensity={isSelected ? 0.2 : 0}
wireframe={!isConfigured}
roughness={0.95}
metalness={0.05}
/>
{/* 외곽선 - 더 진하게 */}
<lineSegments>
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)]} />
<lineBasicMaterial color="#1a1a1a" opacity={0.8} transparent />
</lineSegments>
</Box>
{/* 포장 테이프 (가로) - 윗면 */}
{isConfigured && (
<>
{/* 테이프 세로 */}
<Box args={[boxWidth * 0.12, 0.02, boxDepth * 0.95]} position={[0, boxHeight / 2 + 0.01, 0]}>
<meshStandardMaterial color="#d4a574" opacity={0.7} transparent roughness={0.3} metalness={0.3} />
</Box>
</>
)}
{/* 자재명 라벨 스티커 (앞면) - 흰색 배경 */}
{isConfigured && placement.material_name && (
<group position={[0, boxHeight * 0.1, boxDepth / 2 + 0.02]}>
{/* 라벨 배경 (흰색 스티커) */}
<Box args={[boxWidth * 0.7, boxHeight * 0.25, 0.01]}>
<meshStandardMaterial color="#ffffff" roughness={0.4} metalness={0.1} />
<lineSegments>
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.7, boxHeight * 0.25, 0.01)]} />
<lineBasicMaterial color="#cccccc" opacity={0.8} transparent />
</lineSegments>
</Box>
{/* 라벨 텍스트 */}
<Text
position={[0, 0, 0.02]}
fontSize={0.3}
color="#000000"
anchorX="center"
anchorY="middle"
fontWeight="bold"
>
{placement.material_name}
</Text>
</group>
)}
{/* 수량 라벨 (윗면) - 큰 글씨 */}
{isConfigured && placement.quantity && (
<Text
position={[0, boxHeight / 2 + 0.03, 0]}
rotation={[-Math.PI / 2, 0, 0]}
fontSize={0.6}
color="#000000"
anchorX="center"
anchorY="middle"
outlineWidth={0.1}
outlineColor="#ffffff"
fontWeight="bold"
>
{placement.quantity} {placement.unit || ""}
</Text>
)}
{/* 디테일 표시 */}
{isConfigured && (
<>
{/* 화살표 표시 (이 쪽이 위) */}
<group position={[0, boxHeight * 0.35, boxDepth / 2 + 0.01]}>
<Text fontSize={0.6} color="#000000" anchorX="center" anchorY="middle">
▲
</Text>
<Text position={[0, -0.4, 0]} fontSize={0.3} color="#666666" anchorX="center" anchorY="middle">
UP
</Text>
</group>
</>
)}
</group>
);
}
@ -393,7 +536,6 @@ function Scene({
maxDistance={200}
maxPolarAngle={Math.PI / 2}
enabled={!isDraggingAny}
reverseOrbit={true} // 드래그 방향 반전 (자연스러운 이동)
screenSpacePanning={true} // 화면 공간 패닝
panSpeed={0.8} // 패닝 속도 (기본값 1.0, 낮을수록 느림)
rotateSpeed={0.5} // 회전 속도

12
frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
View File

@ -65,7 +65,17 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
setIsLoading(true);
const response = await yardLayoutApi.getPlacementsByLayoutId(layout.id);
if (response.success) {
const loadedData = response.data as YardPlacement[];
const loadedData = (response.data as YardPlacement[]).map((p) => ({
...p,
// 문자열로 저장된 숫자 필드를 숫자로 변환
position_x: Number(p.position_x),
position_y: Number(p.position_y),
position_z: Number(p.position_z),
size_x: Number(p.size_x),
size_y: Number(p.size_y),
size_z: Number(p.size_z),
quantity: p.quantity !== null && p.quantity !== undefined ? Number(p.quantity) : null,
}));
setPlacements(loadedData);
setOriginalPlacements(JSON.parse(JSON.stringify(loadedData))); // 깊은 복사
}

379
frontend/components/common/DualListBox.tsx Normal file
View File

@ -0,0 +1,379 @@
"use client";
import React, { useState, useMemo, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { ChevronRight, ChevronLeft, ChevronsRight, ChevronsLeft, Search } from "lucide-react";
import { cn } from "@/lib/utils";
/**
* DualListBox 아이템 인터페이스
*/
export interface DualListBoxItem {
id: string;
label: string;
description?: string;
disabled?: boolean;
[key: string]: any;
}
/**
* DualListBox 컴포넌트 Props
*/
interface DualListBoxProps {
// 데이터
availableItems: DualListBoxItem[];
selectedItems: DualListBoxItem[];
// 이벤트
onSelectionChange: (selectedItems: DualListBoxItem[]) => void;
// 라벨
availableLabel?: string;
selectedLabel?: string;
// 검색 활성화
enableSearch?: boolean;
// 높이 설정
height?: string;
// 비활성화
disabled?: boolean;
// 커스텀 렌더링
renderItem?: (item: DualListBoxItem) => React.ReactNode;
// 스타일
className?: string;
}
/**
* Dual List Box 컴포넌트 (좌우 이동 방식)
*
* 사용 예시:
* ```tsx
* <DualListBox
* availableItems={allUsers}
* selectedItems={groupMembers}
* onSelectionChange={setGroupMembers}
* availableLabel="전체 사용자"
* selectedLabel="그룹 멤버"
* enableSearch
* />
* ```
*/
export function DualListBox({
availableItems = [],
selectedItems = [],
onSelectionChange,
availableLabel = "사용 가능한 항목",
selectedLabel = "선택된 항목",
enableSearch = true,
height = "400px",
disabled = false,
renderItem,
className,
}: DualListBoxProps) {
// 선택된 아이템 ID 목록 (안전하게 처리)
const selectedItemIds = useMemo(() => new Set((selectedItems || []).map((item) => item.id)), [selectedItems]);
// 사용 가능한 아이템 (선택되지 않은 것들만)
const available = useMemo(
() => (availableItems || []).filter((item) => !selectedItemIds.has(item.id)),
[availableItems, selectedItemIds],
);
// 좌측 체크된 아이템
const [leftChecked, setLeftChecked] = useState<Set<string>>(new Set());
// 우측 체크된 아이템
const [rightChecked, setRightChecked] = useState<Set<string>>(new Set());
// 좌측 검색어
const [leftSearch, setLeftSearch] = useState("");
// 우측 검색어
const [rightSearch, setRightSearch] = useState("");
// 검색 필터링
const filterItems = useCallback((items: DualListBoxItem[], searchTerm: string) => {
if (!searchTerm.trim()) return items;
const term = searchTerm.toLowerCase();
return items.filter(
(item) => item.label.toLowerCase().includes(term) || item.description?.toLowerCase().includes(term),
);
}, []);
const filteredAvailable = useMemo(() => filterItems(available, leftSearch), [available, leftSearch, filterItems]);
const filteredSelected = useMemo(
() => filterItems(selectedItems, rightSearch),
[selectedItems, rightSearch, filterItems],
);
// 좌측 체크박스 토글
const handleLeftCheck = useCallback((itemId: string, checked: boolean) => {
setLeftChecked((prev) => {
const newSet = new Set(prev);
if (checked) {
newSet.add(itemId);
} else {
newSet.delete(itemId);
}
return newSet;
});
}, []);
// 우측 체크박스 토글
const handleRightCheck = useCallback((itemId: string, checked: boolean) => {
setRightChecked((prev) => {
const newSet = new Set(prev);
if (checked) {
newSet.add(itemId);
} else {
newSet.delete(itemId);
}
return newSet;
});
}, []);
// 좌측 전체 선택/해제
const handleLeftSelectAll = useCallback(() => {
if (leftChecked.size === filteredAvailable.length) {
setLeftChecked(new Set());
} else {
setLeftChecked(new Set(filteredAvailable.map((item) => item.id)));
}
}, [leftChecked.size, filteredAvailable]);
// 우측 전체 선택/해제
const handleRightSelectAll = useCallback(() => {
if (rightChecked.size === filteredSelected.length) {
setRightChecked(new Set());
} else {
setRightChecked(new Set(filteredSelected.map((item) => item.id)));
}
}, [rightChecked.size, filteredSelected]);
// 선택된 항목 오른쪽으로 이동
const moveToRight = useCallback(() => {
const itemsToMove = available.filter((item) => leftChecked.has(item.id));
onSelectionChange([...selectedItems, ...itemsToMove]);
setLeftChecked(new Set());
}, [available, leftChecked, selectedItems, onSelectionChange]);
// 선택된 항목 왼쪽으로 이동
const moveToLeft = useCallback(() => {
const newSelected = selectedItems.filter((item) => !rightChecked.has(item.id));
onSelectionChange(newSelected);
setRightChecked(new Set());
}, [selectedItems, rightChecked, onSelectionChange]);
// 모든 항목 오른쪽으로 이동
const moveAllToRight = useCallback(() => {
onSelectionChange([...selectedItems, ...available]);
setLeftChecked(new Set());
}, [available, selectedItems, onSelectionChange]);
// 모든 항목 왼쪽으로 이동
const moveAllToLeft = useCallback(() => {
onSelectionChange([]);
setRightChecked(new Set());
}, [onSelectionChange]);
// 기본 아이템 렌더링
const defaultRenderItem = useCallback((item: DualListBoxItem) => {
return (
<div className="flex flex-col">
<span className="text-sm font-medium">{item.label}</span>
{item.description && <span className="text-muted-foreground text-xs">{item.description}</span>}
</div>
);
}, []);
const itemRenderer = renderItem || defaultRenderItem;
return (
<div className={cn("flex gap-4", className)}>
{/* 좌측 리스트 (사용 가능한 항목) */}
<div className="flex flex-1 flex-col gap-2">
<Label className="text-sm font-semibold">{availableLabel}</Label>
{/* 검색 */}
{enableSearch && (
<div className="relative">
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="검색..."
value={leftSearch}
onChange={(e) => setLeftSearch(e.target.value)}
className="h-9 pl-9 text-sm"
disabled={disabled}
/>
</div>
)}
{/* 전체 선택 */}
<div className="flex items-center gap-2">
<Checkbox
id="left-select-all"
checked={filteredAvailable.length > 0 && leftChecked.size === filteredAvailable.length}
onCheckedChange={handleLeftSelectAll}
disabled={disabled || filteredAvailable.length === 0}
/>
<Label htmlFor="left-select-all" className="text-muted-foreground cursor-pointer text-xs">
전체 선택 ({filteredAvailable.length}개)
</Label>
</div>
{/* 아이템 리스트 */}
<div className="bg-background overflow-y-auto rounded-lg border" style={{ height }}>
{filteredAvailable.length === 0 ? (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">
{leftSearch ? "검색 결과가 없습니다" : "사용 가능한 항목이 없습니다"}
</p>
</div>
) : (
<div className="space-y-1 p-2">
{filteredAvailable.map((item) => (
<div
key={item.id}
className={cn(
"hover:bg-muted/50 flex cursor-pointer items-start gap-2 rounded-md p-2 transition-colors",
leftChecked.has(item.id) && "bg-muted",
item.disabled && "cursor-not-allowed opacity-50",
)}
onClick={() => !item.disabled && !disabled && handleLeftCheck(item.id, !leftChecked.has(item.id))}
>
<Checkbox
checked={leftChecked.has(item.id)}
onCheckedChange={(checked) => handleLeftCheck(item.id, checked as boolean)}
disabled={disabled || item.disabled}
className="mt-0.5"
/>
{itemRenderer(item)}
</div>
))}
</div>
)}
</div>
</div>
{/* 중앙 버튼 (이동) */}
<div
className="flex flex-col items-center justify-center gap-2"
style={{ marginTop: enableSearch ? "80px" : "48px" }}
>
<Button
variant="outline"
size="icon"
onClick={moveAllToRight}
disabled={disabled || available.length === 0}
title="모두 오른쪽으로 이동"
className="h-9 w-9"
>
<ChevronsRight className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="icon"
onClick={moveToRight}
disabled={disabled || leftChecked.size === 0}
title="선택된 항목 오른쪽으로 이동"
className="h-9 w-9"
>
<ChevronRight className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="icon"
onClick={moveToLeft}
disabled={disabled || rightChecked.size === 0}
title="선택된 항목 왼쪽으로 이동"
className="h-9 w-9"
>
<ChevronLeft className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="icon"
onClick={moveAllToLeft}
disabled={disabled || selectedItems.length === 0}
title="모두 왼쪽으로 이동"
className="h-9 w-9"
>
<ChevronsLeft className="h-4 w-4" />
</Button>
</div>
{/* 우측 리스트 (선택된 항목) */}
<div className="flex flex-1 flex-col gap-2">
<Label className="text-sm font-semibold">{selectedLabel}</Label>
{/* 검색 */}
{enableSearch && (
<div className="relative">
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder="검색..."
value={rightSearch}
onChange={(e) => setRightSearch(e.target.value)}
className="h-9 pl-9 text-sm"
disabled={disabled}
/>
</div>
)}
{/* 전체 선택 */}
<div className="flex items-center gap-2">
<Checkbox
id="right-select-all"
checked={filteredSelected.length > 0 && rightChecked.size === filteredSelected.length}
onCheckedChange={handleRightSelectAll}
disabled={disabled || filteredSelected.length === 0}
/>
<Label htmlFor="right-select-all" className="text-muted-foreground cursor-pointer text-xs">
전체 선택 ({filteredSelected.length}개)
</Label>
</div>
{/* 아이템 리스트 */}
<div className="bg-background overflow-y-auto rounded-lg border" style={{ height }}>
{filteredSelected.length === 0 ? (
<div className="flex h-full items-center justify-center">
<p className="text-muted-foreground text-sm">
{rightSearch ? "검색 결과가 없습니다" : "선택된 항목이 없습니다"}
</p>
</div>
) : (
<div className="space-y-1 p-2">
{filteredSelected.map((item) => (
<div
key={item.id}
className={cn(
"hover:bg-muted/50 flex cursor-pointer items-start gap-2 rounded-md p-2 transition-colors",
rightChecked.has(item.id) && "bg-muted",
item.disabled && "cursor-not-allowed opacity-50",
)}
onClick={() => !item.disabled && !disabled && handleRightCheck(item.id, !rightChecked.has(item.id))}
>
<Checkbox
checked={rightChecked.has(item.id)}
onCheckedChange={(checked) => handleRightCheck(item.id, checked as boolean)}
disabled={disabled || item.disabled}
className="mt-0.5"
/>
{itemRenderer(item)}
</div>
))}
</div>
)}
</div>
</div>
</div>
);
}

397
frontend/components/common/TableHistoryModal.tsx Normal file
View File

@ -0,0 +1,397 @@
"use client";
/**
* 테이블 이력 뷰어 모달
* 테이블 타입 관리의 {테이블명}_log 테이블 데이터를 표시
*/
import React, { useEffect, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Clock, User, FileEdit, Trash2, Plus, AlertCircle, Loader2, Search, X } from "lucide-react";
import {
getRecordHistory,
getRecordTimeline,
TableHistoryRecord,
TableHistoryTimelineEvent,
} from "@/lib/api/tableHistory";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
interface TableHistoryModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
tableName: string;
recordId?: string | number | null; // 선택사항: null이면 전체 테이블 이력
recordLabel?: string;
displayColumn?: string; // 전체 이력에서 레코드 구분용 컬럼 (예: device_code, name)
}
export function TableHistoryModal({
open,
onOpenChange,
tableName,
recordId,
recordLabel,
displayColumn,
}: TableHistoryModalProps) {
const [loading, setLoading] = useState(false);
const [timeline, setTimeline] = useState<TableHistoryTimelineEvent[]>([]);
const [detailRecords, setDetailRecords] = useState<TableHistoryRecord[]>([]);
const [allRecords, setAllRecords] = useState<TableHistoryRecord[]>([]); // 검색용 원본 데이터
// recordId가 없으면 (전체 테이블 모드) detail 탭부터 시작
const [activeTab, setActiveTab] = useState<"timeline" | "detail">(recordId ? "timeline" : "detail");
const [error, setError] = useState<string | null>(null);
const [searchTerm, setSearchTerm] = useState<string>(""); // 검색어
useEffect(() => {
if (open) {
loadHistory();
// recordId 변경 시 탭도 초기화
setActiveTab(recordId ? "timeline" : "detail");
}
}, [open, tableName, recordId]);
const loadHistory = async () => {
setLoading(true);
setError(null);
try {
if (recordId) {
// 단일 레코드 이력 로드
const [timelineRes, detailRes] = await Promise.all([
getRecordTimeline(tableName, recordId),
getRecordHistory(tableName, recordId, { limit: 100 }),
]);
if (timelineRes.success && timelineRes.data) {
setTimeline(timelineRes.data);
} else {
setError(timelineRes.error || "타임라인 로드 실패");
}
if (detailRes.success && detailRes.data) {
setDetailRecords(detailRes.data.records);
setAllRecords(detailRes.data.records);
}
} else {
// 전체 테이블 이력 로드 (recordId 없이)
const detailRes = await getRecordHistory(tableName, null, { limit: 200 });
if (detailRes.success && detailRes.data) {
const records = detailRes.data.records;
setAllRecords(records); // 원본 데이터 저장
setDetailRecords(records); // 초기 표시 데이터
// 타임라인은 전체 테이블에서는 사용하지 않음
setTimeline([]);
} else {
setError(detailRes.error || "이력 로드 실패");
}
}
} catch (err: any) {
setError(err.message || "이력 로드 중 오류 발생");
} finally {
setLoading(false);
}
};
const getOperationIcon = (type: string) => {
switch (type) {
case "INSERT":
return <Plus className="h-4 w-4 text-green-600" />;
case "UPDATE":
return <FileEdit className="h-4 w-4 text-blue-600" />;
case "DELETE":
return <Trash2 className="h-4 w-4 text-red-600" />;
default:
return <Clock className="h-4 w-4 text-gray-600" />;
}
};
const getOperationBadge = (type: string) => {
switch (type) {
case "INSERT":
return <Badge className="bg-green-100 text-xs text-green-800">추가</Badge>;
case "UPDATE":
return <Badge className="bg-blue-100 text-xs text-blue-800">수정</Badge>;
case "DELETE":
return <Badge className="bg-red-100 text-xs text-red-800">삭제</Badge>;
default:
return (
<Badge variant="secondary" className="text-xs">
{type}
</Badge>
);
}
};
const formatDate = (dateString: string) => {
try {
return format(new Date(dateString), "yyyy년 MM월 dd일 HH:mm:ss", { locale: ko });
} catch {
return dateString;
}
};
// 검색 필터링 (전체 테이블 모드에서만)
const handleSearch = (term: string) => {
setSearchTerm(term);
if (!term.trim()) {
// 검색어가 없으면 전체 표시
setDetailRecords(allRecords);
return;
}
const lowerTerm = term.toLowerCase();
const filtered = allRecords.filter((record) => {
// 레코드 ID로 검색
if (record.original_id?.toString().toLowerCase().includes(lowerTerm)) {
return true;
}
// displayColumn 값으로 검색 (full_row_after에서 추출)
if (displayColumn && record.full_row_after) {
const displayValue = record.full_row_after[displayColumn];
if (displayValue && displayValue.toString().toLowerCase().includes(lowerTerm)) {
return true;
}
}
// 변경자로 검색
if (record.changed_by?.toLowerCase().includes(lowerTerm)) {
return true;
}
// 컬럼명으로 검색
if (record.changed_column?.toLowerCase().includes(lowerTerm)) {
return true;
}
return false;
});
setDetailRecords(filtered);
};
// displayColumn 값 추출 헬퍼 함수
const getDisplayValue = (record: TableHistoryRecord): string | null => {
if (!displayColumn) return null;
// full_row_after에서 먼저 시도
if (record.full_row_after && record.full_row_after[displayColumn]) {
return record.full_row_after[displayColumn];
}
// full_row_before에서 시도 (DELETE의 경우)
if (record.full_row_before && record.full_row_before[displayColumn]) {
return record.full_row_before[displayColumn];
}
return null;
};
// 단일 레코드 모드에서 displayColumn 값 가져오기
const recordDisplayValue =
recordId && displayColumn && detailRecords.length > 0 ? getDisplayValue(detailRecords[0]) : null;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-h-[90vh] max-w-[95vw] sm:max-w-[900px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
<Clock className="h-5 w-5" />
변경 이력{" "}
{!recordId && (
<Badge variant="secondary" className="text-xs">
전체
</Badge>
)}
</DialogTitle>
<DialogDescription className="text-xs sm:text-sm">
{recordId
? `${recordDisplayValue || recordLabel || "-"} - ${tableName} 테이블`
: `${tableName} 테이블 전체 이력`}
</DialogDescription>
</DialogHeader>
{loading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="text-primary h-8 w-8 animate-spin" />
<span className="text-muted-foreground ml-2 text-sm">로딩 중...</span>
</div>
) : error ? (
<div className="flex flex-col items-center justify-center py-12">
<AlertCircle className="text-destructive mb-4 h-12 w-12" />
<p className="text-destructive text-sm">{error}</p>
<Button variant="outline" onClick={loadHistory} className="mt-4 h-8 text-xs sm:h-10 sm:text-sm">
다시 시도
</Button>
</div>
) : (
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as any)} className="w-full">
{recordId && (
<TabsList className="w-full">
<TabsTrigger value="timeline" className="flex-1 text-xs sm:text-sm">
타임라인 ({timeline.length})
</TabsTrigger>
<TabsTrigger value="detail" className="flex-1 text-xs sm:text-sm">
상세 내역 ({detailRecords.length})
</TabsTrigger>
</TabsList>
)}
{!recordId && (
<>
<TabsList className="w-full">
<TabsTrigger value="detail" className="flex-1 text-xs sm:text-sm">
전체 변경 이력 ({detailRecords.length})
</TabsTrigger>
</TabsList>
{/* 검색창 (전체 테이블 모드) */}
<div className="relative mt-4">
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder={`레코드 ID${displayColumn ? `, ${displayColumn}` : ""}, 변경자, 컬럼명으로 검색...`}
value={searchTerm}
onChange={(e) => handleSearch(e.target.value)}
className="h-9 pr-10 pl-10 text-xs sm:h-10 sm:text-sm"
/>
{searchTerm && (
<button
onClick={() => handleSearch("")}
className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
>
<X className="h-4 w-4" />
</button>
)}
</div>
{searchTerm && (
<p className="text-muted-foreground mt-2 text-xs">
검색 결과: {detailRecords.length}개 / 전체 {allRecords.length}개
</p>
)}
</>
)}
{/* 타임라인 뷰 */}
<TabsContent value="timeline">
<ScrollArea className="h-[500px] w-full rounded-md border p-4">
{timeline.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<Clock className="text-muted-foreground mb-2 h-12 w-12" />
<p className="text-muted-foreground text-sm">변경 이력이 없습니다</p>
</div>
) : (
<div className="space-y-6">
{timeline.map((event, index) => (
<div key={index} className="relative border-l-2 border-gray-200 pb-6 pl-8 last:border-l-0">
<div className="absolute top-0 -left-3 rounded-full border-2 border-gray-200 bg-white p-1">
{getOperationIcon(event.operation_type)}
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
{getOperationBadge(event.operation_type)}
<span className="text-muted-foreground text-xs">{formatDate(event.changed_at)}</span>
</div>
<div className="flex items-center gap-2 text-sm">
<User className="text-muted-foreground h-3 w-3" />
<span className="font-medium">{event.changed_by}</span>
{event.ip_address && (
<span className="text-muted-foreground text-xs">({event.ip_address})</span>
)}
</div>
{event.changes && event.changes.length > 0 && (
<div className="mt-3 space-y-2">
<p className="text-muted-foreground text-xs font-medium">변경된 항목:</p>
<div className="space-y-1">
{event.changes.map((change, idx) => (
<div key={idx} className="rounded bg-gray-50 p-2 text-xs">
<span className="font-mono font-medium">{change.column}</span>
<div className="mt-1 flex items-center gap-2">
<span className="text-red-600 line-through">{change.oldValue || "(없음)"}</span>
<span>→</span>
<span className="font-medium text-green-600">{change.newValue || "(없음)"}</span>
</div>
</div>
))}
</div>
</div>
)}
</div>
</div>
))}
</div>
)}
</ScrollArea>
</TabsContent>
{/* 상세 내역 뷰 */}
<TabsContent value="detail">
<ScrollArea className="h-[500px] w-full rounded-md border">
{detailRecords.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<FileEdit className="text-muted-foreground mb-2 h-12 w-12" />
<p className="text-muted-foreground text-sm">변경 내역이 없습니다</p>
</div>
) : (
<table className="w-full text-xs">
<thead className="sticky top-0 border-b bg-gray-50">
<tr>
{!recordId && <th className="p-2 text-left font-medium">레코드</th>}
<th className="p-2 text-left font-medium">작업</th>
<th className="p-2 text-left font-medium">컬럼</th>
<th className="p-2 text-left font-medium">이전 값</th>
<th className="p-2 text-left font-medium">새 값</th>
<th className="p-2 text-left font-medium">변경자</th>
<th className="p-2 text-left font-medium">일시</th>
</tr>
</thead>
<tbody>
{detailRecords.map((record) => {
const displayValue = getDisplayValue(record);
return (
<tr key={record.log_id} className="border-b hover:bg-gray-50">
{!recordId && (
<td className="p-2">
{displayValue ? (
<span className="font-medium text-gray-900">{displayValue}</span>
) : (
<span className="text-muted-foreground text-xs">-</span>
)}
</td>
)}
<td className="p-2">{getOperationBadge(record.operation_type)}</td>
<td className="p-2 font-mono">{record.changed_column}</td>
<td className="max-w-[200px] truncate p-2 text-red-600">{record.old_value || "-"}</td>
<td className="max-w-[200px] truncate p-2 text-green-600">{record.new_value || "-"}</td>
<td className="p-2">{record.changed_by}</td>
<td className="text-muted-foreground p-2">{formatDate(record.changed_at)}</td>
</tr>
);
})}
</tbody>
</table>
)}
</ScrollArea>
</TabsContent>
</Tabs>
)}
<div className="flex justify-end gap-2 pt-4">
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-8 text-xs sm:h-10 sm:text-sm">
닫기
</Button>
</div>
</DialogContent>
</Dialog>
);
}

169
frontend/components/dashboard/DashboardViewer.tsx
View File

@ -189,18 +189,6 @@ export function DashboardViewer({
}: DashboardViewerProps) {
const [elementData, setElementData] = useState<Record<string, QueryResult>>({});
const [loadingElements, setLoadingElements] = useState<Set<string>>(new Set());
const [isMobile, setIsMobile] = useState(false);
// 화면 크기 감지
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 1024); // 1024px (lg) 미만은 모바일/태블릿
};
checkMobile();
window.addEventListener("resize", checkMobile);
return () => window.removeEventListener("resize", checkMobile);
}, []);
// 캔버스 설정 계산
const canvasConfig = useMemo(() => {
@ -302,10 +290,8 @@ export function DashboardViewer({
return () => clearInterval(interval);
}, [refreshInterval, loadAllData]);
// 모바일에서 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래)
// 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래) - 태블릿 이하에서 세로 정렬 시 사용
const sortedElements = useMemo(() => {
if (!isMobile) return elements;
return [...elements].sort((a, b) => {
// Y 좌표 차이가 50px 이상이면 Y 우선 (같은 행으로 간주 안함)
const yDiff = a.position.y - b.position.y;
@ -315,7 +301,7 @@ export function DashboardViewer({
// 같은 행이면 X 좌표로 정렬
return a.position.x - b.position.x;
});
}, [elements, isMobile]);
}, [elements]);
// 요소가 없는 경우
if (elements.length === 0) {
@ -332,10 +318,18 @@ export function DashboardViewer({
return (
<DashboardProvider>
{isMobile ? (
// 모바일/태블릿: 세로 스택 레이아웃
<div className="min-h-screen bg-gray-100 p-4" style={{ backgroundColor }}>
<div className="mx-auto max-w-3xl space-y-4">
{/* 데스크톱: 디자이너에서 설정한 위치 그대로 렌더링 (화면에 맞춰 비율 유지) */}
<div className="hidden min-h-screen bg-gray-100 py-8 lg:block" style={{ backgroundColor }}>
<div className="mx-auto px-4" style={{ maxWidth: `${canvasConfig.width}px` }}>
<div
className="relative rounded-lg"
style={{
width: "100%",
minHeight: `${canvasConfig.height}px`,
height: `${canvasHeight}px`,
backgroundColor: backgroundColor,
}}
>
{sortedElements.map((element) => (
<ViewerElement
key={element.id}
@ -343,38 +337,29 @@ export function DashboardViewer({
data={elementData[element.id]}
isLoading={loadingElements.has(element.id)}
onRefresh={() => loadElementData(element)}
isMobile={true}
isMobile={false}
canvasWidth={canvasConfig.width}
/>
))}
</div>
</div>
) : (
// 데스크톱: 기존 고정 캔버스 레이아웃
<div className="min-h-screen bg-gray-100 py-8">
<div className="mx-auto" style={{ width: `${canvasConfig.width}px` }}>
<div
className="relative rounded-lg"
style={{
width: `${canvasConfig.width}px`,
minHeight: `${canvasConfig.height}px`,
height: `${canvasHeight}px`,
backgroundColor: backgroundColor,
}}
>
{sortedElements.map((element) => (
<ViewerElement
key={element.id}
element={element}
data={elementData[element.id]}
isLoading={loadingElements.has(element.id)}
onRefresh={() => loadElementData(element)}
isMobile={false}
/>
))}
</div>
</div>
</div>
{/* 태블릿 이하: 반응형 세로 정렬 */}
<div className="block min-h-screen bg-gray-100 p-4 lg:hidden" style={{ backgroundColor }}>
<div className="mx-auto max-w-3xl space-y-4">
{sortedElements.map((element) => (
<ViewerElement
key={element.id}
element={element}
data={elementData[element.id]}
isLoading={loadingElements.has(element.id)}
onRefresh={() => loadElementData(element)}
isMobile={true}
/>
))}
</div>
)}
</div>
</DashboardProvider>
);
}
@ -385,22 +370,28 @@ interface ViewerElementProps {
isLoading: boolean;
onRefresh: () => void;
isMobile: boolean;
canvasWidth?: number;
}
/**
* 개별 뷰어 요소 컴포넌트
* - 데스크톱(lg 이상): absolute positioning으로 디자이너에서 설정한 위치 그대로 렌더링 (너비는 화면 비율에 따라 조정)
* - 태블릿 이하: 세로 스택 카드 레이아웃
*/
function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: ViewerElementProps) {
const [isHovered, setIsHovered] = useState(false);
function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWidth = 1920 }: ViewerElementProps) {
const [isMounted, setIsMounted] = useState(false);
// 마운트 확인 (Leaflet 지도 초기화 문제 해결)
useEffect(() => {
setIsMounted(true);
}, []);
if (isMobile) {
// 모바일/태블릿: 세로 스택 카드 스타일
// 태블릿 이하: 세로 스택 카드 스타일
return (
<div
className="relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
style={{ minHeight: "300px" }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{element.showHeader !== false && (
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
@ -408,19 +399,31 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: Viewer
<button
onClick={onRefresh}
disabled={isLoading}
className="text-gray-400 hover:text-gray-600 disabled:opacity-50"
className="text-gray-400 transition-colors hover:text-gray-600 disabled:opacity-50"
title="새로고침"
>
{isLoading ? (
<div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
) : (
"🔄"
)}
<svg
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button>
</div>
)}
<div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
{element.type === "chart" ? (
{!isMounted ? (
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
</div>
) : element.type === "chart" ? (
<ChartRenderer element={element} data={data} width={undefined} height={250} />
) : (
renderWidget(element)
@ -438,18 +441,19 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: Viewer
);
}
// 데스크톱: 기존 absolute positioning
// 데스크톱: 디자이너에서 설정한 위치 그대로 absolute positioning
// 단, 너비는 화면 크기에 따라 비율로 조정
const widthPercentage = (element.size.width / canvasWidth) * 100;
return (
<div
className="absolute overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
style={{
left: element.position.x,
left: `${(element.position.x / canvasWidth) * 100}%`,
top: element.position.y,
width: element.size.width,
width: `${widthPercentage}%`,
height: element.size.height,
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{element.showHeader !== false && (
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
@ -457,22 +461,37 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: Viewer
<button
onClick={onRefresh}
disabled={isLoading}
className={`text-gray-400 transition-opacity hover:text-gray-600 disabled:opacity-50 ${
isHovered ? "opacity-100" : "opacity-0"
}`}
className="text-gray-400 transition-colors hover:text-gray-600 disabled:opacity-50"
title="새로고침"
>
{isLoading ? (
<div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
) : (
"🔄"
)}
<svg
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</button>
</div>
)}
<div className={element.showHeader !== false ? "h-[calc(100%-57px)]" : "h-full"}>
{element.type === "chart" ? (
<ChartRenderer element={element} data={data} width={element.size.width} height={element.size.height - 57} />
<div className={element.showHeader !== false ? "h-[calc(100%-50px)] w-full" : "h-full w-full"}>
{!isMounted ? (
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
</div>
) : element.type === "chart" ? (
<ChartRenderer
element={element}
data={data}
width={undefined}
height={element.showHeader !== false ? element.size.height - 50 : element.size.height}
/>
) : (
renderWidget(element)
)}

69
frontend/components/dashboard/widgets/CustomMetricWidget.tsx
View File

@ -374,45 +374,46 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
}
return (
<div className="flex h-full w-full flex-col overflow-hidden bg-white p-4">
{/* 스크롤 가능한 콘텐츠 영역 */}
<div className="flex-1 overflow-y-auto">
<div className="grid w-full gap-4" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))" }}>
{/* 그룹별 카드 (활성화 시) */}
{isGroupByMode &&
groupedCards.map((card, index) => {
// 색상 순환 (6가지 색상)
const colorKeys = Object.keys(colorMap) as Array<keyof typeof colorMap>;
const colorKey = colorKeys[index % colorKeys.length];
const colors = colorMap[colorKey];
return (
<div
key={`group-${index}`}
className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}
>
<div className="text-sm text-gray-600">{card.label}</div>
<div className={`mt-2 text-3xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
</div>
);
})}
{/* 일반 지표 카드 (항상 표시) */}
{metrics.map((metric) => {
const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-2">
{/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */}
<div className="grid h-full w-full gap-2" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))" }}>
{/* 그룹별 카드 (활성화 시) */}
{isGroupByMode &&
groupedCards.map((card, index) => {
// 색상 순환 (6가지 색상)
const colorKeys = Object.keys(colorMap) as Array<keyof typeof colorMap>;
const colorKey = colorKeys[index % colorKeys.length];
const colors = colorMap[colorKey];
return (
<div key={metric.id} className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}>
<div className="text-sm text-gray-600">{metric.label}</div>
<div className={`mt-2 text-3xl font-bold ${colors.text}`}>
{formattedValue}
<span className="ml-1 text-lg">{metric.unit}</span>
</div>
<div
key={`group-${index}`}
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
>
<div className="text-[10px] text-gray-600">{card.label}</div>
<div className={`mt-0.5 text-xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
</div>
);
})}
</div>
{/* 일반 지표 카드 (항상 표시) */}
{metrics.map((metric) => {
const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
return (
<div
key={metric.id}
className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
>
<div className="text-[10px] text-gray-600">{metric.label}</div>
<div className={`mt-0.5 text-xl font-bold ${colors.text}`}>
{formattedValue}
<span className="ml-0.5 text-sm">{metric.unit}</span>
</div>
</div>
);
})}
</div>
</div>
);

211
frontend/components/flow/FlowStepPanel.tsx
View File

@ -18,6 +18,7 @@ import { FlowStep } from "@/types/flow";
import { FlowConditionBuilder } from "./FlowConditionBuilder";
import { tableManagementApi, getTableColumns } from "@/lib/api/tableManagement";
import { cn } from "@/lib/utils";
import { formatErrorMessage } from "@/lib/utils/errorUtils";
import { flowExternalDbApi } from "@/lib/api/flowExternalDb";
import {
FlowExternalDbConnection,
@ -27,6 +28,7 @@ import {
} from "@/types/flowExternalDb";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
interface FlowStepPanelProps {
step: FlowStep;
@ -70,6 +72,8 @@ export function FlowStepPanel({
// 외부 연동 필드
integrationType: step.integrationType || "internal",
integrationConfig: step.integrationConfig,
// 🆕 표시 설정
displayConfig: step.displayConfig || { visibleColumns: [] },
});
const [tableList, setTableList] = useState<any[]>([]);
@ -90,6 +94,10 @@ export function FlowStepPanel({
const [externalConnections, setExternalConnections] = useState<FlowExternalDbConnection[]>([]);
const [loadingConnections, setLoadingConnections] = useState(false);
// 🆕 표시 설정용 컬럼 목록
const [availableColumns, setAvailableColumns] = useState<string[]>([]);
const [loadingAvailableColumns, setLoadingAvailableColumns] = useState(false);
// 테이블 목록 조회
useEffect(() => {
const loadTables = async () => {
@ -122,41 +130,90 @@ export function FlowStepPanel({
return;
}
const response = await fetch("/api/external-db-connections/control/active", {
credentials: "include",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
}).catch((err) => {
console.warn("외부 DB 연결 목록 fetch 실패:", err);
return null;
});
const response = await ExternalDbConnectionAPI.getActiveControlConnections();
if (response && response.ok) {
const result = await response.json();
if (result.success && result.data) {
// 메인 DB 제외하고 외부 DB만 필터링
const externalOnly = result.data.filter((conn: any) => conn.id !== 0);
setExternalConnections(externalOnly);
} else {
setExternalConnections([]);
}
} else {
// 401 오류 시 빈 배열로 처리 (리다이렉트 방지)
console.warn("외부 DB 연결 목록 조회 실패:", response?.status || "네트워크 오류");
setExternalConnections([]);
if (response.success && response.data) {
const filtered = response.data.filter(
(conn) => !conn.connection_name.includes("메인") && !conn.connection_name.includes("현재 시스템"),
);
setExternalConnections(filtered);
}
} catch (error: any) {
} catch (error) {
console.error("Failed to load external connections:", error);
setExternalConnections([]);
} finally {
setLoadingConnections(false);
}
};
loadConnections();
}, []);
// 🆕 테이블이 선택되면 해당 테이블의 컬럼 목록 조회 (표시 설정용)
useEffect(() => {
const loadAvailableColumns = async () => {
const tableName = formData.tableName || flowTableName;
if (!tableName) {
setAvailableColumns([]);
return;
}
try {
setLoadingAvailableColumns(true);
const response = await getTableColumns(tableName);
console.log("🎨 [FlowStepPanel] 컬럼 목록 API 응답:", {
tableName,
success: response.success,
dataType: typeof response.data,
dataKeys: response.data ? Object.keys(response.data) : [],
isArray: Array.isArray(response.data),
message: response.message,
fullResponse: response,
});
if (response.success && response.data) {
// response.data가 객체일 경우 columns 배열 찾기
let columnsArray: any[] = [];
if (Array.isArray(response.data)) {
columnsArray = response.data;
} else if (response.data.columns && Array.isArray(response.data.columns)) {
columnsArray = response.data.columns;
} else if (response.data.data && Array.isArray(response.data.data)) {
columnsArray = response.data.data;
} else {
console.warn("⚠️ 예상치 못한 data 구조:", response.data);
}
const columnNames = columnsArray.map((col: any) => col.columnName || col.column_name);
setAvailableColumns(columnNames);
console.log("✅ [FlowStepPanel] 컬럼 목록 로드 성공:", {
tableName,
columns: columnNames,
});
} else {
console.warn("⚠️ [FlowStepPanel] 컬럼 목록 조회 실패:", {
tableName,
message: response.message,
success: response.success,
hasData: !!response.data,
});
setAvailableColumns([]);
}
} catch (error) {
console.error("❌ [FlowStepPanel] 컬럼 목록 로드 에러:", {
tableName,
error,
});
setAvailableColumns([]);
} finally {
setLoadingAvailableColumns(false);
}
};
loadAvailableColumns();
}, [formData.tableName, flowTableName]);
// 외부 DB 선택 시 해당 DB의 테이블 목록 조회 (JWT 토큰 사용)
useEffect(() => {
const loadExternalTables = async () => {
@ -250,6 +307,8 @@ export function FlowStepPanel({
// 외부 연동 필드
integrationType: step.integrationType || "internal",
integrationConfig: step.integrationConfig,
// 표시 설정 (displayConfig 반드시 초기화)
displayConfig: step.displayConfig || { visibleColumns: [] },
};
console.log("✅ Setting formData:", newFormData);
@ -388,14 +447,14 @@ export function FlowStepPanel({
} else {
toast({
title: "저장 실패",
description: response.error,
description: formatErrorMessage(response.error, "단계 저장 중 오류가 발생했습니다."),
variant: "destructive",
});
}
} catch (error: any) {
toast({
title: "오류 발생",
description: error.message,
description: error.message || "단계 저장 중 오류가 발생했습니다.",
variant: "destructive",
});
}
@ -419,14 +478,14 @@ export function FlowStepPanel({
} else {
toast({
title: "삭제 실패",
description: response.error,
description: formatErrorMessage(response.error, "단계 삭제 중 오류가 발생했습니다."),
variant: "destructive",
});
}
} catch (error: any) {
toast({
title: "오류 발생",
description: error.message,
description: error.message || "단계 삭제 중 오류가 발생했습니다.",
variant: "destructive",
});
}
@ -988,6 +1047,98 @@ export function FlowStepPanel({
</CardContent>
</Card>
{/* 🆕 표시 설정 */}
<Card>
<CardHeader>
<CardTitle>표시 설정</CardTitle>
<CardDescription>플로우 위젯에서 이 단계의 데이터를 표시할 때 보여줄 컬럼을 선택합니다</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{loadingAvailableColumns ? (
<div className="text-muted-foreground flex items-center justify-center py-8 text-sm">
컬럼 목록을 불러오는 중...
</div>
) : availableColumns.length === 0 ? (
<div className="rounded-md bg-yellow-50 p-4 text-center">
<p className="text-sm text-yellow-900">
⚠️ 테이블의 컬럼 목록을 불러올 수 없습니다.
<br />
플로우 테이블:{" "}
<span className="font-mono font-semibold">{formData.tableName || flowTableName || "없음"}</span>
<br />
<span className="text-xs">
테이블이 존재하지 않거나, 컬럼이 없거나, 접근 권한이 없을 수 있습니다.
</span>
</p>
</div>
) : (
<>
<div>
<Label>표시할 컬럼 선택</Label>
<p className="text-muted-foreground mb-2 text-xs">선택하지 않으면 모든 컬럼이 표시됩니다</p>
<div className="max-h-64 space-y-2 overflow-y-auto rounded-md border p-3">
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="select-all-columns"
checked={formData.displayConfig.visibleColumns?.length === availableColumns.length}
onChange={(e) => {
setFormData({
...formData,
displayConfig: {
...formData.displayConfig,
visibleColumns: e.target.checked ? [...availableColumns] : [],
},
});
}}
className="h-4 w-4"
/>
<label htmlFor="select-all-columns" className="text-sm font-medium">
전체 선택/해제
</label>
</div>
<div className="border-t pt-2" />
{availableColumns.map((colName) => (
<div key={colName} className="flex items-center space-x-2">
<input
type="checkbox"
id={`col-${colName}`}
checked={formData.displayConfig.visibleColumns?.includes(colName) || false}
onChange={(e) => {
const currentColumns = formData.displayConfig.visibleColumns || [];
const newColumns = e.target.checked
? [...currentColumns, colName]
: currentColumns.filter((c) => c !== colName);
setFormData({
...formData,
displayConfig: {
...formData.displayConfig,
visibleColumns: newColumns,
},
});
}}
className="h-4 w-4"
/>
<label htmlFor={`col-${colName}`} className="cursor-pointer font-mono text-sm">
{colName}
</label>
</div>
))}
</div>
</div>
<div className="rounded-md bg-blue-50 p-3">
<p className="text-sm text-blue-900">
💡 선택된 컬럼: {formData.displayConfig.visibleColumns?.length || 0}개
{formData.displayConfig.visibleColumns?.length === 0 && " (모든 컬럼이 표시됩니다)"}
</p>
</div>
</>
)}
</CardContent>
</Card>
{/* 액션 버튼 */}
<div className="flex gap-2">
<Button className="flex-1" onClick={handleSave}>

10
frontend/components/layout/AdminButton.tsx
View File

@ -15,8 +15,14 @@ export function AdminButton({ user }: AdminButtonProps) {
console.log("user?.isAdmin:", user?.isAdmin);
console.log("user?.userId:", user?.userId);
// 관리자 권한 확인 로직 개선
const isAdmin = user?.isAdmin || user?.userType === "ADMIN" || user?.userId === "plm_admin";
// 관리자 권한 확인 로직 (3단계 권한 체계)
const isAdmin =
user?.isAdmin ||
user?.userType === "SUPER_ADMIN" ||
user?.userType === "COMPANY_ADMIN" ||
user?.userType === "ADMIN" ||
user?.userType === "admin" ||
user?.userId === "plm_admin";
console.log("최종 관리자 권한 확인:", isAdmin);

6
frontend/components/layout/AppLayout.tsx
View File

@ -413,10 +413,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
isMobile
? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-14 left-0 z-40"
: "relative top-0 z-auto translate-x-0"
} flex h-[calc(100vh-3.5rem)] w-72 max-w-72 min-w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
} flex h-[calc(100vh-3.5rem)] w-[240px] max-w-[240px] min-w-[240px] flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
>
{/* 사이드바 상단 - Admin/User 모드 전환 버튼 (관리자만) */}
{(user as ExtendedUserInfo)?.userType?.toLowerCase().includes("admin") && (
{((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
(user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
(user as ExtendedUserInfo)?.userType === "admin") && (
<div className="border-b border-slate-200 p-3">
<Button
onClick={handleModeSwitch}

5
frontend/components/screen/RealtimePreviewDynamic.tsx
View File

@ -136,11 +136,6 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
// 컴포넌트의 실제 size.height도 업데이트 (중복 업데이트 방지)
if (onConfigChange && finalHeight !== lastUpdatedHeight.current && finalHeight !== component.size?.height) {
lastUpdatedHeight.current = finalHeight;
console.log("🔄 플로우 위젯 높이 업데이트 이벤트 발송:", {
componentId: component.id,
oldHeight: component.size?.height,
newHeight: finalHeight,
});
// size는 별도 속성이므로 직접 업데이트
const event = new CustomEvent("updateComponentSize", {
detail: {

201
frontend/components/screen/ScreenDesigner.tsx
View File

@ -93,7 +93,7 @@ const panelConfigs: PanelConfig[] = [
id: "components",
title: "컴포넌트",
defaultPosition: "left",
defaultWidth: 400,
defaultWidth: 240,
defaultHeight: 700,
shortcutKey: "c",
},
@ -102,7 +102,7 @@ const panelConfigs: PanelConfig[] = [
id: "properties",
title: "편집",
defaultPosition: "left",
defaultWidth: 400,
defaultWidth: 240,
defaultHeight: 700,
shortcutKey: "p",
},
@ -258,16 +258,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
window.dispatchEvent(syncEvent);
});
console.log("✅ DB 파일 컴포넌트 데이터 복원 완료:", {
totalComponents: components.length,
restoredFileComponents: restoredCount,
totalFiles: fileResponse.totalFiles,
globalFileState: Object.keys(globalFileState).map((id) => ({
id,
fileCount: globalFileState[id]?.length || 0,
})),
});
if (restoredCount > 0) {
toast.success(
`${restoredCount}개 파일 컴포넌트 데이터가 DB에서 복원되었습니다. (총 ${fileResponse.totalFiles}개 파일)`,
@ -322,15 +312,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
snapToGrid: layout.gridSettings.snapToGrid || false,
});
console.log("🧮 격자 정보 재계산:", {
resolution: `${width}x${height}`,
columns: layout.gridSettings.columns,
gap: layout.gridSettings.gap,
padding: layout.gridSettings.padding,
columnWidth: newGridInfo.columnWidth.toFixed(2),
snapToGrid: layout.gridSettings.snapToGrid,
});
return newGridInfo;
}, [layout.gridSettings, screenResolution]);
@ -425,13 +406,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
// 컴포넌트 속성 업데이트
const updateComponentProperty = useCallback(
(componentId: string, path: string, value: any) => {
console.log("⚙️ 컴포넌트 속성 업데이트:", {
componentId,
path,
value,
timestamp: new Date().toISOString(),
});
// 🔥 함수형 업데이트로 변경하여 최신 layout 사용
setLayout((prevLayout) => {
const targetComponent = prevLayout.components.find((comp) => comp.id === componentId);
@ -494,26 +468,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
// 중첩 경로를 고려한 안전한 복사
const newComp = { ...comp };
console.log("🔍 업데이트 전 상태:", {
path,
value,
"기존 componentConfig": newComp.componentConfig,
"기존 action": (newComp as any).componentConfig?.action,
});
// 경로를 따라 내려가면서 각 레벨을 새 객체로 복사
let current: any = newComp;
for (let i = 0; i < pathParts.length - 1; i++) {
const key = pathParts[i];
console.log(`🔍 경로 탐색 [${i}]: key="${key}", current[key]=`, current[key]);
// 다음 레벨이 없거나 객체가 아니면 새 객체 생성
if (!current[key] || typeof current[key] !== "object" || Array.isArray(current[key])) {
console.log(`🆕 새 객체 생성: ${key}`);
current[key] = {};
} else {
// 기존 객체를 복사하여 불변성 유지
console.log(`📋 기존 객체 복사: ${key}`, { ...current[key] });
current[key] = { ...current[key] };
}
current = current[key];
@ -521,58 +485,12 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
// 최종 값 설정
const finalKey = pathParts[pathParts.length - 1];
console.log(`✍️ 최종 값 설정: ${finalKey} = ${value}`);
current[finalKey] = value;
console.log("✅ 컴포넌트 업데이트 완료:", {
componentId,
path,
newValue: current[pathParts[pathParts.length - 1]],
fullComponent: newComp,
webTypeConfig: newComp.type === "widget" ? (newComp as any).webTypeConfig : null,
});
// webTypeConfig 업데이트의 경우 추가 검증
if (path === "webTypeConfig") {
console.log("🎛️ webTypeConfig 특별 처리:", {
componentId,
oldConfig: comp.type === "widget" ? (comp as any).webTypeConfig : null,
newConfig: current[pathParts[pathParts.length - 1]],
configType: typeof current[pathParts[pathParts.length - 1]],
configStringified: JSON.stringify(current[pathParts[pathParts.length - 1]]),
oldConfigStringified: JSON.stringify(comp.type === "widget" ? (comp as any).webTypeConfig : null),
isConfigChanged:
JSON.stringify(comp.type === "widget" ? (comp as any).webTypeConfig : null) !==
JSON.stringify(current[pathParts[pathParts.length - 1]]),
timestamp: new Date().toISOString(),
});
}
// gridColumns 변경 시 크기 자동 업데이트
console.log("🔍 gridColumns 변경 감지:", {
path,
value,
componentType: newComp.type,
hasGridInfo: !!gridInfo,
hasGridSettings: !!layout.gridSettings,
currentGridColumns: (newComp as any).gridColumns,
});
if (path === "gridColumns" && gridInfo) {
const updatedSize = updateSizeFromGridColumns(newComp, gridInfo, layout.gridSettings as GridUtilSettings);
newComp.size = updatedSize;
console.log("📏 gridColumns 변경으로 크기 업데이트:", {
gridColumns: value,
oldSize: comp.size,
newSize: updatedSize,
});
} else if (path === "gridColumns") {
console.log("❌ gridColumns 변경 실패:", {
hasGridInfo: !!gridInfo,
hasGridSettings: !!layout.gridSettings,
gridInfo,
gridSettings: layout.gridSettings,
});
}
// 크기 변경 시 격자 스냅 적용 (그룹 컴포넌트 제외)
@ -604,11 +522,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
);
if (newComp.gridColumns !== adjustedColumns) {
newComp.gridColumns = adjustedColumns;
console.log("📏 크기 변경으로 gridColumns 자동 조정:", {
oldColumns: comp.gridColumns,
newColumns: adjustedColumns,
newSize: snappedSize,
});
}
}
@ -631,15 +544,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
...newComp.size,
width: newWidth,
};
console.log("📐 gridColumns 변경으로 크기 자동 조정:", {
componentId,
gridColumns: newComp.gridColumns,
oldWidth: comp.size.width,
newWidth: newWidth,
columnWidth: currentGridInfo.columnWidth,
gap: layout.gridSettings.gap,
});
}
// 위치 변경 시 격자 스냅 적용 (그룹 내부 컴포넌트 포함)
@ -687,26 +591,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
width: snappedWidth,
height: snappedHeight,
};
console.log("🎯 그룹 내부 컴포넌트 격자 스냅 (패딩 고려):", {
componentId,
parentId: newComp.parentId,
originalPosition: comp.position,
originalSize: comp.size,
calculation: {
effectiveX,
effectiveY,
columnIndex,
rowIndex,
columnWidth,
fullColumnWidth,
widthInColumns,
gap: gap || 16,
padding,
},
snappedPosition: newComp.position,
snappedSize: newComp.size,
});
} else if (newComp.type !== "group") {
// 그룹이 아닌 일반 컴포넌트만 격자 스냅 적용
const snappedPosition = snapToGrid(
@ -715,18 +599,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
layout.gridSettings as GridUtilSettings,
);
newComp.position = snappedPosition;
console.log("🧲 일반 컴포넌트 격자 스냅:", {
componentId,
originalPosition: comp.position,
snappedPosition,
});
} else {
console.log("🔓 그룹 컴포넌트는 격자 스냅 제외:", {
componentId,
type: newComp.type,
position: newComp.position,
});
}
}
@ -736,13 +608,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
// 🔥 새로운 layout 생성
const newLayout = { ...prevLayout, components: updatedComponents };
console.log("🔄 setLayout 실행:", {
componentId,
path,
value,
업데이트된컴포넌트: updatedComponents.find((c) => c.id === componentId),
});
saveToHistory(newLayout);
// selectedComponent가 업데이트된 컴포넌트와 같다면 selectedComponent도 업데이트
@ -752,20 +617,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
if (updatedSelectedComponent) {
// 🔧 완전히 새로운 객체를 만들어서 React가 변경을 감지하도록 함
const newSelectedComponent = JSON.parse(JSON.stringify(updatedSelectedComponent));
console.log("🔄 selectedComponent 동기화:", {
componentId,
path,
oldAction: (prevSelected as any).componentConfig?.action,
newAction: (newSelectedComponent as any).componentConfig?.action,
oldColumnsCount: prevSelected.type === "datatable" ? (prevSelected as any).columns?.length : "N/A",
newColumnsCount:
newSelectedComponent.type === "datatable" ? (newSelectedComponent as any).columns?.length : "N/A",
oldFiltersCount: prevSelected.type === "datatable" ? (prevSelected as any).filters?.length : "N/A",
newFiltersCount:
newSelectedComponent.type === "datatable" ? (newSelectedComponent as any).filters?.length : "N/A",
timestamp: new Date().toISOString(),
});
return newSelectedComponent;
}
}
@ -989,16 +840,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
let layoutToUse = response;
if (needsMigration(response)) {
console.log("🔄 픽셀 기반 레이아웃 감지 - 그리드 시스템으로 마이그레이션 시작...");
const canvasWidth = response.screenResolution?.width || 1920;
layoutToUse = safeMigrateLayout(response, canvasWidth);
console.log("✅ 마이그레이션 완료:", {
originalComponents: response.components.length,
migratedComponents: layoutToUse.components.length,
sampleComponent: layoutToUse.components[0],
});
}
// 기본 격자 설정 보장 (격자 표시와 스냅 기본 활성화)
@ -2224,16 +2067,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
...component.defaultSize,
width: Math.max(calculatedWidth, minWidth),
};
console.log(`📐 ${component.name} 초기 크기 자동 조정:`, {
componentId: component.id,
gridColumns,
defaultWidth: component.defaultSize.width,
calculatedWidth,
finalWidth: componentSize.width,
gridInfo,
gridSettings: layout.gridSettings,
});
}
console.log("🎨 최종 컴포넌트 크기:", {
@ -2858,18 +2691,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
return;
}
console.log("🔍 컴포넌트 클릭 시 최신 버전 확인:", {
componentId: component.id,
파라미터로받은버전: {
actionType: (component as any).componentConfig?.action?.type,
fullAction: (component as any).componentConfig?.action,
},
layout에서찾은최신버전: {
actionType: (latestComponent as any).componentConfig?.action?.type,
fullAction: (latestComponent as any).componentConfig?.action,
},
});
const isShiftPressed = event?.shiftKey || false;
const isCtrlPressed = event?.ctrlKey || event?.metaKey || false;
const isGroupContainer = latestComponent.type === "group";
@ -4218,30 +4039,17 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
const handleComponentSizeUpdate = (event: CustomEvent) => {
const { componentId, height } = event.detail;
console.log("📥 ScreenDesigner에서 높이 업데이트 이벤트 수신:", {
componentId,
height,
});
// 해당 컴포넌트 찾기
const targetComponent = layout.components.find((c) => c.id === componentId);
if (!targetComponent) {
console.log("⚠️ 컴포넌트를 찾을 수 없음:", componentId);
return;
}
// 이미 같은 높이면 업데이트 안함
if (targetComponent.size?.height === height) {
console.log("ℹ️ 이미 같은 높이:", height);
return;
}
console.log("✅ 컴포넌트 높이 업데이트 중:", {
componentId,
oldHeight: targetComponent.size?.height,
newHeight: height,
});
// 컴포넌트 높이 업데이트
const updatedComponents = layout.components.map((comp) => {
if (comp.id === componentId) {
@ -4269,7 +4077,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
const updatedComponent = updatedComponents.find((c) => c.id === componentId);
if (updatedComponent) {
setSelectedComponent(updatedComponent);
console.log("✅ 선택된 컴포넌트도 업데이트됨");
}
}
};
@ -4312,7 +4119,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
{/* 열린 패널들 (좌측에서 우측으로 누적) */}
{panelStates.components?.isOpen && (
<div className="border-border bg-card flex h-full w-[400px] flex-col border-r shadow-sm">
<div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm">
<div className="border-border flex items-center justify-between border-b px-6 py-4">
<h3 className="text-foreground text-lg font-semibold">컴포넌트</h3>
<button
@ -4343,7 +4150,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
)}
{panelStates.properties?.isOpen && (
<div className="border-border bg-card flex h-full w-[400px] flex-col border-r shadow-sm">
<div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm">
<div className="border-border flex items-center justify-between border-b px-6 py-4">
<h3 className="text-foreground text-lg font-semibold">속성</h3>
<button

273
frontend/components/screen/config-panels/ButtonConfigPanel.tsx
View File

@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Button } from "@/components/ui/button";
import { Check, ChevronsUpDown, Search } from "lucide-react";
import { cn } from "@/lib/utils";
@ -19,6 +20,7 @@ interface ButtonConfigPanelProps {
component: ComponentData;
onUpdateProperty: (path: string, value: any) => void;
allComponents?: ComponentData[]; // 🆕 플로우 위젯 감지용
currentTableName?: string; // 현재 화면의 테이블명 (자동 감지용)
}
interface ScreenOption {
@ -27,16 +29,12 @@ interface ScreenOption {
description?: string;
}
export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
component,
export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
component,
onUpdateProperty,
allComponents = [], // 🆕 기본값 빈 배열
currentTableName, // 현재 화면의 테이블명
}) => {
console.log("🎨 ButtonConfigPanel 렌더링:", {
componentId: component.id,
"component.componentConfig?.action?.type": component.componentConfig?.action?.type,
});
// 🔧 component에서 직접 읽기 (useMemo 제거)
const config = component.componentConfig || {};
const currentAction = component.componentConfig?.action || {};
@ -57,6 +55,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
const [modalSearchTerm, setModalSearchTerm] = useState("");
const [navSearchTerm, setNavSearchTerm] = useState("");
// 테이블 컬럼 목록 상태
const [tableColumns, setTableColumns] = useState<string[]>([]);
const [columnsLoading, setColumnsLoading] = useState(false);
const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
const [displayColumnSearch, setDisplayColumnSearch] = useState("");
// 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
useEffect(() => {
const latestConfig = component.componentConfig || {};
@ -103,6 +107,85 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
fetchScreens();
}, []);
// 테이블 컬럼 목록 가져오기 (테이블 이력 보기 액션일 때)
useEffect(() => {
const fetchTableColumns = async () => {
// 테이블 이력 보기 액션이 아니면 스킵
if (config.action?.type !== "view_table_history") {
return;
}
// 1. 수동 입력된 테이블명 우선
// 2. 없으면 현재 화면의 테이블명 사용
const tableName = config.action?.historyTableName || currentTableName;
// 테이블명이 없으면 스킵
if (!tableName) {
return;
}
try {
setColumnsLoading(true);
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`, {
params: {
page: 1,
size: 9999, // 전체 컬럼 가져오기
},
});
// API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
const columnData = response.data.data?.columns;
if (!columnData || !Array.isArray(columnData)) {
console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
setTableColumns([]);
return;
}
if (response.data.success) {
// ID 컬럼과 날짜 관련 컬럼 제외
const filteredColumns = columnData
.filter((col: any) => {
const colName = col.columnName.toLowerCase();
const dataType = col.dataType?.toLowerCase() || "";
// ID 컬럼 제외 (id, _id로 끝나는 컬럼)
if (colName === "id" || colName.endsWith("_id")) {
return false;
}
// 날짜/시간 타입 제외 (데이터 타입 기준)
if (dataType.includes("date") || dataType.includes("time") || dataType.includes("timestamp")) {
return false;
}
// 날짜/시간 관련 컬럼명 제외 (컬럼명에 date, time, at 포함)
if (
colName.includes("date") ||
colName.includes("time") ||
colName.endsWith("_at") ||
colName.startsWith("created") ||
colName.startsWith("updated")
) {
return false;
}
return true;
})
.map((col: any) => col.columnName);
setTableColumns(filteredColumns);
}
} catch (error) {
console.error("❌ 테이블 컬럼 로딩 실패:", error);
} finally {
setColumnsLoading(false);
}
};
fetchTableColumns();
}, [config.action?.type, config.action?.historyTableName, currentTableName]);
// 검색 필터링 함수
const filterScreens = (searchTerm: string) => {
if (!searchTerm.trim()) return screens;
@ -137,68 +220,20 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/>
</div>
<div>
<Label htmlFor="button-variant">버튼 스타일</Label>
<Select
value={component.componentConfig?.variant || "default"}
onValueChange={(value) => {
onUpdateProperty("componentConfig.variant", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="버튼 스타일 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="primary">기본 (Primary)</SelectItem>
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
<SelectItem value="danger">위험 (Danger)</SelectItem>
<SelectItem value="success">성공 (Success)</SelectItem>
<SelectItem value="outline">외곽선 (Outline)</SelectItem>
<SelectItem value="ghost">고스트 (Ghost)</SelectItem>
<SelectItem value="link">링크 (Link)</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="button-size">버튼 글씨 크기</Label>
<Select
value={component.componentConfig?.size || "md"}
onValueChange={(value) => {
onUpdateProperty("componentConfig.size", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="버튼 글씨 크기 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="sm">작음 (Small)</SelectItem>
<SelectItem value="md">기본 (Default)</SelectItem>
<SelectItem value="lg">큼 (Large)</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="button-action">버튼 액션</Label>
<Select
key={`action-${component.id}-${component.componentConfig?.action?.type || "save"}`}
value={component.componentConfig?.action?.type || "save"}
onValueChange={(value) => {
console.log("🎯 버튼 액션 드롭다운 변경:", {
oldValue: component.componentConfig?.action?.type,
newValue: value,
});
// 🔥 action.type 업데이트
onUpdateProperty("componentConfig.action.type", value);
// 🔥 색상 업데이트는 충분히 지연 (React 리렌더링 완료 후)
setTimeout(() => {
const newColor = value === "delete" ? "#ef4444" : "#212121";
console.log("🎨 라벨 색상 업데이트:", { value, newColor });
onUpdateProperty("style.labelColor", newColor);
}, 100); // 0 → 100ms로 증가
// 🔥 action.type 업데이트
onUpdateProperty("componentConfig.action.type", value);
// 🔥 색상 업데이트는 충분히 지연 (React 리렌더링 완료 후)
setTimeout(() => {
const newColor = value === "delete" ? "#ef4444" : "#212121";
onUpdateProperty("style.labelColor", newColor);
}, 100); // 0 → 100ms로 증가
}}
>
<SelectTrigger>
@ -211,6 +246,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
<SelectItem value="navigate">페이지 이동</SelectItem>
<SelectItem value="modal">모달 열기</SelectItem>
<SelectItem value="control">제어 흐름</SelectItem>
<SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
</SelectContent>
</Select>
</div>
@ -476,6 +512,101 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div>
)}
{/* 테이블 이력 보기 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "view_table_history" && (
<div className="mt-4 space-y-4">
<h4 className="text-sm font-medium">📜 테이블 이력 보기 설정</h4>
<div>
<Label>
전체 이력 표시 컬럼 (필수) <span className="text-red-600">*</span>
</Label>
{!config.action?.historyTableName && !currentTableName ? (
<div className="mt-2 rounded-md border border-yellow-300 bg-yellow-50 p-3">
<p className="text-xs text-yellow-800">
⚠️ 먼저 <strong>테이블명</strong>을 입력하거나, 현재 화면에 테이블을 연결해주세요.
</p>
</div>
) : (
<>
{!config.action?.historyTableName && currentTableName && (
<div className="mt-2 rounded-md border border-green-300 bg-green-50 p-2">
<p className="text-xs text-green-800">
✓ 현재 화면의 테이블 <strong>{currentTableName}</strong>을(를) 자동으로 사용합니다.
</p>
</div>
)}
<Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={displayColumnOpen}
className="mt-2 h-10 w-full justify-between text-sm"
disabled={columnsLoading || tableColumns.length === 0}
>
{columnsLoading
? "로딩 중..."
: config.action?.historyDisplayColumn
? config.action.historyDisplayColumn
: tableColumns.length === 0
? "사용 가능한 컬럼이 없습니다"
: "컬럼을 선택하세요"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
<Command>
<CommandInput placeholder="컬럼 검색..." className="text-sm" />
<CommandList>
<CommandEmpty className="text-sm">컬럼을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{tableColumns.map((column) => (
<CommandItem
key={column}
value={column}
onSelect={(currentValue) => {
onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
setDisplayColumnOpen(false);
}}
className="text-sm"
>
<Check
className={cn(
"mr-2 h-4 w-4",
config.action?.historyDisplayColumn === column ? "opacity-100" : "opacity-0",
)}
/>
{column}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<p className="mt-2 text-xs text-gray-700">
<strong>전체 테이블 이력</strong>에서 레코드를 구분하기 위한 컬럼입니다.
<br />
예: <code className="rounded bg-white px-1">device_code</code>를 설정하면 이력에 &quot;DTG-001&quot;로
표시됩니다.
<br />이 컬럼으로 검색도 가능합니다.
</p>
{tableColumns.length === 0 && !columnsLoading && (
<p className="mt-2 text-xs text-red-600">
⚠️ ID 및 날짜 타입 컬럼을 제외한 사용 가능한 컬럼이 없습니다.
</p>
)}
</>
)}
</div>
</div>
)}
{/* 페이지 이동 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "navigate" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
@ -568,25 +699,19 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div>
)}
{/* 🔥 NEW: 제어관리 기능 섹션 */}
{/* 제어 기능 섹션 */}
<div className="mt-8 border-t border-gray-200 pt-6">
<div className="mb-4">
<h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
<p className="text-muted-foreground mt-1 text-sm">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
</div>
<ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
</div>
{/* 🆕 플로우 단계별 표시 제어 섹션 */}
<div className="mt-8 border-t border-gray-200 pt-6">
<FlowVisibilityConfigPanel
component={component}
allComponents={allComponents}
onUpdateProperty={onUpdateProperty}
<FlowVisibilityConfigPanel
component={component}
allComponents={allComponents}
onUpdateProperty={onUpdateProperty}
/>
</div>
</div>
);
};

44
frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx
View File

@ -1,7 +1,6 @@
"use client";
import React, { useState, useEffect, useMemo } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
@ -233,18 +232,16 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
};
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<div className="space-y-4">
<div className="space-y-1">
<h4 className="flex items-center gap-2 text-sm font-medium">
<Workflow className="h-4 w-4" />
플로우 단계별 표시 설정
</CardTitle>
<CardDescription className="text-xs">
플로우의 특정 단계에서만 이 버튼을 표시하거나 숨길 수 있습니다
</CardDescription>
</CardHeader>
</h4>
<p className="text-muted-foreground text-xs">플로우의 특정 단계에서만 이 버튼을 표시하거나 숨길 수 있습니다</p>
</div>
<CardContent className="space-y-4">
<div className="space-y-4">
{/* 활성화 체크박스 */}
<div className="flex items-center gap-2">
<Checkbox
@ -305,13 +302,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
<div className="flex items-center space-x-2">
<RadioGroupItem value="whitelist" id="mode-whitelist" />
<Label htmlFor="mode-whitelist" className="text-sm font-normal">
화이트리스트 (선택한 단계에서만 표시)
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="blacklist" id="mode-blacklist" />
<Label htmlFor="mode-blacklist" className="text-sm font-normal">
블랙리스트 (선택한 단계에서 숨김)
선택한 단계에서만 표시
</Label>
</div>
<div className="flex items-center space-x-2">
@ -327,9 +318,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
{mode !== "all" && (
<div className="space-y-3">
<div className="flex items-center justify-between">
<Label className="text-sm font-medium">
{mode === "whitelist" ? "표시할 단계" : "숨길 단계"}
</Label>
<Label className="text-sm font-medium">표시할 단계</Label>
<div className="flex gap-1">
<Button variant="ghost" size="sm" onClick={selectAll} className="h-7 px-2 text-xs">
모두 선택
@ -346,8 +335,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
{/* 스텝 체크박스 목록 */}
<div className="bg-muted/30 space-y-2 rounded-lg border p-3">
{flowSteps.map((step) => {
const isChecked =
mode === "whitelist" ? visibleSteps.includes(step.id) : hiddenSteps.includes(step.id);
const isChecked = visibleSteps.includes(step.id);
return (
<div key={step.id} className="flex items-center gap-2">
@ -361,11 +349,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
Step {step.stepOrder}
</Badge>
<span>{step.stepName}</span>
{isChecked && (
<CheckCircle
className={`ml-auto h-4 w-4 ${mode === "whitelist" ? "text-green-500" : "text-red-500"}`}
/>
)}
{isChecked && <CheckCircle className="ml-auto h-4 w-4 text-green-500" />}
</Label>
</div>
);
@ -401,7 +385,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
{/* 🆕 그룹 설정 (auto-compact 모드일 때만 표시) */}
{layoutBehavior === "auto-compact" && (
<div className="space-y-4 rounded-lg border border-blue-200 bg-blue-50 p-4">
<div className="space-y-4">
<div className="flex items-center gap-2">
<Badge variant="secondary" className="text-xs">
그룹 설정
@ -569,7 +553,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
)}
</>
)}
</CardContent>
</Card>
</div>
</div>
);
};

99
frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
View File

@ -1,14 +1,11 @@
"use client";
import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Settings, Clock, Zap, Info, Workflow } from "lucide-react";
import { Settings, Clock, Info, Workflow } from "lucide-react";
import { ComponentData } from "@/types/screen";
import { getNodeFlows, NodeFlow } from "@/lib/api/nodeFlows";
@ -75,25 +72,14 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
}
};
/**
* 🔥 제어 타입 변경 핸들러
*/
const handleControlTypeChange = (controlType: string) => {
// 기존 설정 초기화
onUpdateProperty("webTypeConfig.dataflowConfig", {
controlMode: controlType,
flowConfig: controlType === "flow" ? undefined : null,
});
};
return (
<div className="space-y-6">
{/* 🔥 제어관리 활성화 스위치 */}
<div className="bg-accent flex items-center justify-between rounded-lg border p-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Settings className="text-primary h-4 w-4" />
<div>
<Label className="text-sm font-medium">🎮 고급 제어 기능</Label>
<Label className="text-sm font-medium">제어 기능</Label>
<p className="text-muted-foreground mt-1 text-xs">버튼 클릭 시 추가 작업을 자동으로 실행합니다</p>
</div>
</div>
@ -105,59 +91,38 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
{/* 🔥 제어관리가 활성화된 경우에만 설정 표시 */}
{config.enableDataflowControl && (
<Card>
<CardHeader>
<CardTitle>버튼 제어 설정</CardTitle>
</CardHeader>
<CardContent>
<Tabs value={dataflowConfig.controlMode || "none"} onValueChange={handleControlTypeChange}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="none">제어 없음</TabsTrigger>
<TabsTrigger value="flow">노드 플로우</TabsTrigger>
</TabsList>
<div className="space-y-4">
<FlowSelector
flows={flows}
selectedFlowId={dataflowConfig.flowConfig?.flowId}
onSelect={handleFlowSelect}
loading={loading}
/>
<TabsContent value="none" className="mt-4">
<div className="py-8 text-center text-gray-500">
<Zap className="mx-auto mb-2 h-8 w-8 opacity-50" />
<p>추가 제어 없이 기본 버튼 액션만 실행됩니다.</p>
</div>
</TabsContent>
{dataflowConfig.flowConfig && (
<div className="space-y-4">
<Separator />
<ExecutionTimingSelector
value={dataflowConfig.flowConfig.executionTiming}
onChange={(timing) =>
onUpdateProperty("webTypeConfig.dataflowConfig.flowConfig.executionTiming", timing)
}
/>
<TabsContent value="flow" className="mt-4">
<FlowSelector
flows={flows}
selectedFlowId={dataflowConfig.flowConfig?.flowId}
onSelect={handleFlowSelect}
loading={loading}
/>
{dataflowConfig.flowConfig && (
<div className="mt-4 space-y-4">
<Separator />
<ExecutionTimingSelector
value={dataflowConfig.flowConfig.executionTiming}
onChange={(timing) =>
onUpdateProperty("webTypeConfig.dataflowConfig.flowConfig.executionTiming", timing)
}
/>
<div className="rounded bg-green-50 p-3">
<div className="flex items-start space-x-2">
<Info className="mt-0.5 h-4 w-4 text-green-600" />
<div className="text-xs text-green-800">
<p className="font-medium">노드 플로우 실행 정보:</p>
<p className="mt-1">선택한 플로우의 모든 노드가 순차적/병렬로 실행됩니다.</p>
<p className="mt-1">• 독립 트랜잭션: 각 액션은 독립적으로 커밋/롤백</p>
<p>• 연쇄 중단: 부모 노드 실패 시 자식 노드 스킵</p>
</div>
</div>
</div>
<div className="rounded bg-green-50 p-3">
<div className="flex items-start space-x-2">
<Info className="mt-0.5 h-4 w-4 text-green-600" />
<div className="text-xs text-green-800">
<p className="font-medium">노드 플로우 실행 정보:</p>
<p className="mt-1">선택한 플로우의 모든 노드가 순차적/병렬로 실행됩니다.</p>
<p className="mt-1">• 독립 트랜잭션: 각 액션은 독립적으로 커밋/롤백</p>
<p>• 연쇄 중단: 부모 노드 실패 시 자식 노드 스킵</p>
</div>
)}
</TabsContent>
</Tabs>
</CardContent>
</Card>
</div>
</div>
</div>
)}
</div>
)}
</div>
);

23
frontend/components/screen/panels/DetailSettingsPanel.tsx
View File

@ -50,13 +50,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
// 데이터베이스에서 입력 가능한 웹타입들을 동적으로 가져오기
const { webTypes } = useWebTypes({ active: "Y" });
// console.log(`🔍 DetailSettingsPanel props:`, {
// selectedComponent: selectedComponent?.id,
// componentType: selectedComponent?.type,
// currentTableName,
// currentTable: currentTable?.tableName,
// selectedComponentTableName: selectedComponent?.tableName,
// });
console.log(`🔍 DetailSettingsPanel props:`, {
selectedComponent: selectedComponent?.id,
componentType: selectedComponent?.type,
currentTableName,
currentTable: currentTable?.tableName,
selectedComponentTableName: selectedComponent?.tableName,
});
// console.log(`🔍 DetailSettingsPanel webTypes 로드됨:`, webTypes?.length, "개");
// console.log(`🔍 webTypes:`, webTypes);
// console.log(`🔍 DetailSettingsPanel selectedComponent:`, selectedComponent);
@ -823,7 +823,14 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
case "button-primary":
case "button-secondary":
// 🔧 component.id만 key로 사용 (unmount 방지)
return <NewButtonConfigPanel key={selectedComponent.id} component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
return (
<NewButtonConfigPanel
key={selectedComponent.id}
component={selectedComponent}
onUpdateProperty={handleUpdateProperty}
currentTableName={currentTableName}
/>
);
case "card":
return <CardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

40
frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
View File

@ -108,16 +108,13 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
{currentResolution && onResolutionChange && (
<div className="space-y-2">
<div className="flex items-center gap-1.5">
<Monitor className="h-3 w-3 text-primary" />
<Monitor className="text-primary h-3 w-3" />
<h4 className="text-xs font-semibold">해상도 설정</h4>
</div>
<ResolutionPanel
currentResolution={currentResolution}
onResolutionChange={onResolutionChange}
/>
<ResolutionPanel currentResolution={currentResolution} onResolutionChange={onResolutionChange} />
</div>
)}
{/* 안내 메시지 */}
<Separator className="my-4" />
<div className="flex flex-col items-center justify-center py-8 text-center">
@ -156,7 +153,15 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
case "button-primary":
case "button-secondary":
// 🔧 component.id만 key로 사용 (unmount 방지)
return <ButtonConfigPanel key={selectedComponent.id} component={selectedComponent} onUpdateProperty={handleUpdateProperty} allComponents={allComponents} />;
return (
<ButtonConfigPanel
key={selectedComponent.id}
component={selectedComponent}
onUpdateProperty={handleUpdateProperty}
allComponents={allComponents}
currentTableName={currentTableName}
/>
);
case "card":
return <CardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
@ -198,12 +203,12 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
return (
<div className="space-y-1.5">
{/* 컴포넌트 정보 - 간소화 */}
<div className="flex items-center justify-between rounded bg-muted px-2 py-1">
<div className="bg-muted flex items-center justify-between rounded px-2 py-1">
<div className="flex items-center gap-1">
<Info className="h-2.5 w-2.5 text-muted-foreground" />
<span className="text-[10px] font-medium text-foreground">{selectedComponent.type}</span>
<Info className="text-muted-foreground h-2.5 w-2.5" />
<span className="text-foreground text-[10px] font-medium">{selectedComponent.type}</span>
</div>
<span className="text-[9px] text-muted-foreground">{selectedComponent.id.slice(0, 8)}</span>
<span className="text-muted-foreground text-[9px]">{selectedComponent.id.slice(0, 8)}</span>
</div>
{/* 라벨 + 최소 높이 (같은 행) */}
@ -609,7 +614,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
{/* 헤더 - 간소화 */}
<div className="border-b border-gray-200 px-3 py-2">
{selectedComponent.type === "widget" && (
<div className="text-[10px] text-gray-600 truncate">
<div className="truncate text-[10px] text-gray-600">
{(selectedComponent as WidgetComponent).label || selectedComponent.id}
</div>
)}
@ -623,13 +628,10 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
<>
<div className="space-y-2">
<div className="flex items-center gap-1.5">
<Monitor className="h-3 w-3 text-primary" />
<Monitor className="text-primary h-3 w-3" />
<h4 className="text-xs font-semibold">해상도 설정</h4>
</div>
<ResolutionPanel
currentResolution={currentResolution}
onResolutionChange={onResolutionChange}
/>
<ResolutionPanel currentResolution={currentResolution} onResolutionChange={onResolutionChange} />
</div>
<Separator className="my-2" />
</>
@ -637,7 +639,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
{/* 기본 설정 */}
{renderBasicTab()}
{/* 상세 설정 */}
<Separator className="my-2" />
{renderDetailTab()}
@ -648,7 +650,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
<Separator className="my-2" />
<div className="space-y-2">
<div className="flex items-center gap-1.5">
<Palette className="h-3 w-3 text-primary" />
<Palette className="text-primary h-3 w-3" />
<h4 className="text-xs font-semibold">컴포넌트 스타일</h4>
</div>
<StyleEditor

46
frontend/components/screen/widgets/FlowWidget.tsx
View File

@ -69,6 +69,26 @@ export function FlowWidget({
const [stepDataLoading, setStepDataLoading] = useState(false);
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
/**
* 🆕 컬럼 표시 결정 함수
* 1순위: 플로우 스텝 기본 설정 (displayConfig)
* 2순위: 모든 컬럼 표시
*/
const getVisibleColumns = (stepId: number, allColumns: string[], stepsArray?: FlowStep[]): string[] => {
// stepsArray가 제공되지 않으면 state의 steps 사용
const effectiveSteps = stepsArray || steps;
// 1순위: 플로우 스텝 기본 설정
const currentStep = effectiveSteps.find((s) => s.id === stepId);
if (currentStep?.displayConfig?.visibleColumns && currentStep.displayConfig.visibleColumns.length > 0) {
return currentStep.displayConfig.visibleColumns;
}
// 2순위: 모든 컬럼 표시
return allColumns;
};
// 🆕 스텝 데이터 페이지네이션 상태
const [stepDataPage, setStepDataPage] = useState(1);
const [stepDataPageSize, setStepDataPageSize] = useState(10);
@ -128,9 +148,11 @@ export function FlowWidget({
const rows = response.data?.records || [];
setStepData(rows);
// 컬럼 추출
// 🆕 컬럼 추출 및 우선순위 적용
if (rows.length > 0) {
setStepDataColumns(Object.keys(rows[0]));
const allColumns = Object.keys(rows[0]);
const visibleColumns = getVisibleColumns(selectedStepId, allColumns);
setStepDataColumns(visibleColumns);
} else {
setStepDataColumns([]);
}
@ -201,11 +223,6 @@ export function FlowWidget({
const firstStep = sortedSteps[0];
setSelectedStepId(firstStep.id);
setSelectedStep(flowComponentId, firstStep.id);
console.log("✅ [FlowWidget] 첫 번째 단계 자동 선택:", {
flowComponentId,
stepId: firstStep.id,
stepName: firstStep.stepName,
});
// 첫 번째 스텝의 데이터 로드
try {
@ -214,7 +231,10 @@ export function FlowWidget({
const rows = response.data?.records || [];
setStepData(rows);
if (rows.length > 0) {
setStepDataColumns(Object.keys(rows[0]));
const allColumns = Object.keys(rows[0]);
// sortedSteps를 직접 전달하여 타이밍 이슈 해결
const visibleColumns = getVisibleColumns(firstStep.id, allColumns, sortedSteps);
setStepDataColumns(visibleColumns);
}
}
} catch (err) {
@ -244,7 +264,6 @@ export function FlowWidget({
// 🆕 언마운트 시 전역 상태 초기화
useEffect(() => {
return () => {
console.log("🧹 [FlowWidget] 언마운트 - 전역 상태 초기화:", flowComponentId);
resetFlow(flowComponentId);
};
}, [flowComponentId, resetFlow]);
@ -266,7 +285,6 @@ export function FlowWidget({
setStepDataPage(1); // 🆕 페이지 리셋
onSelectedDataChange?.([], null);
console.log("🔄 [FlowWidget] 단계 선택 해제:", { flowComponentId, stepId });
return;
}
@ -278,8 +296,6 @@ export function FlowWidget({
setStepDataPage(1); // 🆕 페이지 리셋
onSelectedDataChange?.([], stepId);
console.log("✅ [FlowWidget] 단계 선택:", { flowComponentId, stepId, stepName });
try {
const response = await getStepDataList(flowId!, stepId, 1, 100);
@ -290,9 +306,11 @@ export function FlowWidget({
const rows = response.data?.records || [];
setStepData(rows);
// 컬럼 추출
// 🆕 컬럼 추출 및 우선순위 적용
if (rows.length > 0) {
setStepDataColumns(Object.keys(rows[0]));
const allColumns = Object.keys(rows[0]);
const visibleColumns = getVisibleColumns(stepId, allColumns);
setStepDataColumns(visibleColumns);
} else {
setStepDataColumns([]);
}

17
frontend/lib/api/externalDbConnection.ts
View File

@ -313,6 +313,23 @@ export class ExternalDbConnectionAPI {
}
}
/**
* 활성 제어 커넥션 목록 조회 (플로우 관리용)
*/
static async getActiveControlConnections(): Promise<ApiResponse<ExternalDbConnection[]>> {
try {
const response = await apiClient.get<ApiResponse<ExternalDbConnection[]>>(`${this.BASE_PATH}/control/active`);
return response.data;
} catch (error) {
console.error("활성 제어 커넥션 조회 오류:", error);
return {
success: false,
message: error instanceof Error ? error.message : "활성 제어 커넥션 조회에 실패했습니다.",
data: [],
};
}
}
/**
* REST API 연결 목록 조회 (외부 커넥션에서)
*/

56
frontend/lib/api/flow.ts
View File

@ -53,6 +53,18 @@ function getAuthToken(): string | null {
return localStorage.getItem("authToken") || sessionStorage.getItem("authToken");
}
// 인증 헤더 생성 헬퍼
function getAuthHeaders(): HeadersInit {
const token = getAuthToken();
const headers: HeadersInit = {
"Content-Type": "application/json",
};
if (token) {
headers["Authorization"] = `Bearer ${token}`;
}
return headers;
}
// ============================================
// 플로우 정의 API
// ============================================
@ -72,6 +84,7 @@ export async function getFlowDefinitions(params?: {
const url = `${API_BASE}/flow/definitions${queryParams.toString() ? `?${queryParams.toString()}` : ""}`;
const response = await fetch(url, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -90,6 +103,7 @@ export async function getFlowDefinitions(params?: {
export async function getFlowDefinition(id: number): Promise<ApiResponse<FlowDefinition>> {
try {
const response = await fetch(`${API_BASE}/flow/definitions/${id}`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -114,9 +128,7 @@ export async function createFlowDefinition(data: CreateFlowDefinitionRequest): P
try {
const response = await fetch(`${API_BASE}/flow/definitions`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -140,9 +152,7 @@ export async function updateFlowDefinition(
try {
const response = await fetch(`${API_BASE}/flow/definitions/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -163,6 +173,7 @@ export async function deleteFlowDefinition(id: number): Promise<ApiResponse<{ su
try {
const response = await fetch(`${API_BASE}/flow/definitions/${id}`, {
method: "DELETE",
headers: getAuthHeaders(),
credentials: "include",
});
@ -185,6 +196,7 @@ export async function deleteFlowDefinition(id: number): Promise<ApiResponse<{ su
export async function getFlowSteps(flowId: number): Promise<ApiResponse<FlowStep[]>> {
try {
const response = await fetch(`${API_BASE}/flow/definitions/${flowId}/steps`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -204,9 +216,7 @@ export async function createFlowStep(flowId: number, data: CreateFlowStepRequest
try {
const response = await fetch(`${API_BASE}/flow/definitions/${flowId}/steps`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -227,9 +237,7 @@ export async function updateFlowStep(stepId: number, data: UpdateFlowStepRequest
try {
const response = await fetch(`${API_BASE}/flow/steps/${stepId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -250,6 +258,7 @@ export async function deleteFlowStep(stepId: number): Promise<ApiResponse<{ succ
try {
const response = await fetch(`${API_BASE}/flow/steps/${stepId}`, {
method: "DELETE",
headers: getAuthHeaders(),
credentials: "include",
});
@ -272,6 +281,7 @@ export async function deleteFlowStep(stepId: number): Promise<ApiResponse<{ succ
export async function getFlowConnections(flowId: number): Promise<ApiResponse<FlowStepConnection[]>> {
try {
const response = await fetch(`${API_BASE}/flow/connections/${flowId}`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -293,9 +303,7 @@ export async function createFlowConnection(
try {
const response = await fetch(`${API_BASE}/flow/connections`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -316,6 +324,7 @@ export async function deleteFlowConnection(connectionId: number): Promise<ApiRes
try {
const response = await fetch(`${API_BASE}/flow/connections/${connectionId}`, {
method: "DELETE",
headers: getAuthHeaders(),
credentials: "include",
});
@ -338,6 +347,7 @@ export async function deleteFlowConnection(connectionId: number): Promise<ApiRes
export async function getStepDataCount(flowId: number, stepId: number): Promise<ApiResponse<FlowStepDataCount>> {
try {
const response = await fetch(`${API_BASE}/flow/${flowId}/step/${stepId}/count`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -361,6 +371,7 @@ export async function getStepDataList(
): Promise<ApiResponse<FlowStepDataList>> {
try {
const response = await fetch(`${API_BASE}/flow/${flowId}/step/${stepId}/list?page=${page}&pageSize=${pageSize}`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -379,6 +390,7 @@ export async function getStepDataList(
export async function getAllStepCounts(flowId: number): Promise<ApiResponse<FlowStepDataCount[]>> {
try {
const response = await fetch(`${API_BASE}/flow/${flowId}/steps/counts`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -396,13 +408,9 @@ export async function getAllStepCounts(flowId: number): Promise<ApiResponse<Flow
*/
export async function moveData(data: MoveDataRequest): Promise<ApiResponse<{ success: boolean }>> {
try {
const token = getAuthToken();
const response = await fetch(`${API_BASE}/flow/move`, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(token && { Authorization: `Bearer ${token}` }),
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -438,13 +446,9 @@ export async function moveBatchData(
data: MoveBatchDataRequest,
): Promise<ApiResponse<{ success: boolean; results: any[] }>> {
try {
const token = getAuthToken();
const response = await fetch(`${API_BASE}/flow/move-batch`, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(token && { Authorization: `Bearer ${token}` }),
},
headers: getAuthHeaders(),
credentials: "include",
body: JSON.stringify(data),
});
@ -468,6 +472,7 @@ export async function moveBatchData(
export async function getAuditLogs(flowId: number, recordId: string): Promise<ApiResponse<FlowAuditLog[]>> {
try {
const response = await fetch(`${API_BASE}/flow/audit/${flowId}/${recordId}`, {
headers: getAuthHeaders(),
credentials: "include",
});
@ -486,6 +491,7 @@ export async function getAuditLogs(flowId: number, recordId: string): Promise<Ap
export async function getFlowAuditLogs(flowId: number, limit: number = 100): Promise<ApiResponse<FlowAuditLog[]>> {
try {
const response = await fetch(`${API_BASE}/flow/audit/${flowId}?limit=${limit}`, {
headers: getAuthHeaders(),
credentials: "include",
});

289
frontend/lib/api/role.ts Normal file
View File

@ -0,0 +1,289 @@
import { apiClient } from "./client";
import { ApiResponse } from "@/types/api";
/**
* 권한 그룹 인터페이스
*/
export interface RoleGroup {
objid: number;
authName: string;
authCode: string;
companyCode: string;
status: string;
writer: string;
regdate: string;
memberCount?: number;
menuCount?: number;
memberNames?: string;
}
/**
* 권한 그룹 멤버 인터페이스
*/
export interface RoleMember {
objid: number;
masterObjid: number;
userId: string;
userName: string;
deptName?: string;
positionName?: string;
writer: string;
regdate: string;
}
/**
* 메뉴 권한 인터페이스
*/
export interface MenuPermission {
objid: number;
menuObjid: number;
authObjid: number;
menuName?: string;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
writer: string;
regdate: string;
}
/**
* 권한 그룹 API
*/
export const roleAPI = {
/**
* 권한 그룹 목록 조회
*/
async getList(params?: { companyCode?: string; search?: string }): Promise<ApiResponse<RoleGroup[]>> {
try {
const response = await apiClient.get("/roles", { params });
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "권한 그룹 목록 조회 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 상세 조회
*/
async getById(id: number): Promise<ApiResponse<RoleGroup>> {
try {
const response = await apiClient.get(`/roles/${id}`);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "권한 그룹 상세 조회 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 생성
*/
async create(data: { authName: string; authCode: string; companyCode: string }): Promise<ApiResponse<RoleGroup>> {
try {
const response = await apiClient.post("/roles", data);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "권한 그룹 생성 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 수정
*/
async update(
id: number,
data: {
authName?: string;
authCode?: string;
status?: string;
},
): Promise<ApiResponse<RoleGroup>> {
try {
const response = await apiClient.put(`/roles/${id}`, data);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "권한 그룹 수정 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 삭제
*/
async delete(id: number): Promise<ApiResponse<null>> {
try {
const response = await apiClient.delete(`/roles/${id}`);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "권한 그룹 삭제 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 멤버 목록 조회
*/
async getMembers(roleId: number): Promise<ApiResponse<RoleMember[]>> {
try {
const response = await apiClient.get(`/roles/${roleId}/members`);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "멤버 목록 조회 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 멤버 추가 (여러 명)
*/
async addMembers(roleId: number, userIds: string[]): Promise<ApiResponse<null>> {
try {
const response = await apiClient.post(`/roles/${roleId}/members`, { userIds });
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "멤버 추가 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 멤버 제거 (여러 명)
*/
async removeMembers(roleId: number, userIds: string[]): Promise<ApiResponse<null>> {
try {
const response = await apiClient.delete(`/roles/${roleId}/members`, { data: { userIds } });
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "멤버 제거 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 권한 그룹 멤버 일괄 업데이트 (기존 멤버 전체 교체)
*/
async updateMembers(roleId: number, userIds: string[]): Promise<ApiResponse<null>> {
try {
const response = await apiClient.put(`/roles/${roleId}/members`, { userIds });
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "멤버 업데이트 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 전체 메뉴 목록 조회 (권한 설정용)
*/
async getAllMenus(companyCode?: string): Promise<ApiResponse<any[]>> {
try {
console.log("🔍 [roleAPI.getAllMenus] API 호출", { companyCode });
const url = companyCode ? `/roles/menus/all?companyCode=${companyCode}` : "/roles/menus/all";
const response = await apiClient.get(url);
console.log("✅ [roleAPI.getAllMenus] API 응답", {
success: response.data.success,
count: response.data.data?.length,
});
return response.data;
} catch (error: any) {
console.error("❌ [roleAPI.getAllMenus] API 에러", error);
return {
success: false,
message: error.response?.data?.message || "전체 메뉴 목록 조회 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 메뉴 권한 목록 조회
*/
async getMenuPermissions(roleId: number): Promise<ApiResponse<MenuPermission[]>> {
try {
const response = await apiClient.get(`/roles/${roleId}/menu-permissions`);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "메뉴 권한 조회 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 메뉴 권한 설정
*/
async setMenuPermissions(
roleId: number,
permissions: Array<{
menuObjid: number;
createYn: string;
readYn: string;
updateYn: string;
deleteYn: string;
}>,
): Promise<ApiResponse<null>> {
try {
const response = await apiClient.put(`/roles/${roleId}/menu-permissions`, { permissions });
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "메뉴 권한 설정 실패",
error: error.response?.data?.error || error.message,
};
}
},
/**
* 사용자가 속한 권한 그룹 목록 조회
*/
async getUserRoleGroups(userId?: string): Promise<ApiResponse<RoleGroup[]>> {
try {
const url = userId ? `/roles/user/${userId}/groups` : "/roles/user/my-groups";
const response = await apiClient.get(url);
return response.data;
} catch (error: any) {
return {
success: false,
message: error.response?.data?.message || "사용자 권한 그룹 조회 실패",
error: error.response?.data?.error || error.message,
};
}
},
};

177
frontend/lib/api/tableHistory.ts Normal file
View File

@ -0,0 +1,177 @@
/**
* 테이블 이력 조회 API 클라이언트
*/
import { apiClient } from "./client";
export interface TableHistoryRecord {
log_id: number;
operation_type: "INSERT" | "UPDATE" | "DELETE";
original_id: string;
changed_column: string;
old_value: string | null;
new_value: string | null;
changed_by: string;
changed_at: string;
ip_address: string | null;
user_agent: string | null;
full_row_before: Record<string, any> | null;
full_row_after: Record<string, any> | null;
}
export interface TableHistoryResponse {
success: boolean;
data?: {
records: TableHistoryRecord[];
pagination: {
total: number;
limit: number;
offset: number;
hasMore: boolean;
};
};
message?: string;
error?: string;
errorCode?: string;
}
export interface TableHistoryTimelineEvent {
changed_at: string;
changed_by: string;
operation_type: "INSERT" | "UPDATE" | "DELETE";
ip_address: string | null;
changes: Array<{
column: string;
oldValue: string | null;
newValue: string | null;
}>;
full_row_before: Record<string, any> | null;
full_row_after: Record<string, any> | null;
}
export interface TableHistoryTimelineResponse {
success: boolean;
data?: TableHistoryTimelineEvent[];
message?: string;
error?: string;
}
export interface TableHistorySummary {
operation_type: string;
count: number;
affected_records: number;
unique_users: number;
first_change: string;
last_change: string;
}
export interface TableHistorySummaryResponse {
success: boolean;
data?: TableHistorySummary[];
message?: string;
error?: string;
}
export interface TableHistoryCheckResponse {
success: boolean;
data?: {
tableName: string;
logTableName: string;
exists: boolean;
historyEnabled: boolean;
};
message?: string;
error?: string;
}
/**
* 레코드 변경 이력 조회 (recordId가 null이면 전체 테이블 이력)
*/
export async function getRecordHistory(
tableName: string,
recordId: string | number | null,
params?: {
limit?: number;
offset?: number;
operationType?: "INSERT" | "UPDATE" | "DELETE";
changedBy?: string;
startDate?: string;
endDate?: string;
},
): Promise<TableHistoryResponse> {
try {
const queryParams = new URLSearchParams();
if (params?.limit) queryParams.append("limit", params.limit.toString());
if (params?.offset) queryParams.append("offset", params.offset.toString());
if (params?.operationType) queryParams.append("operationType", params.operationType);
if (params?.changedBy) queryParams.append("changedBy", params.changedBy);
if (params?.startDate) queryParams.append("startDate", params.startDate);
if (params?.endDate) queryParams.append("endDate", params.endDate);
// recordId가 null이면 전체 테이블 이력 조회
const url = recordId
? `/table-history/${tableName}/${recordId}?${queryParams.toString()}`
: `/table-history/${tableName}/all?${queryParams.toString()}`;
const response = await apiClient.get(url);
return response.data;
} catch (error: any) {
console.error("❌ 레코드 이력 조회 실패:", error);
return {
success: false,
error: error.response?.data?.message || error.message || "이력 조회 중 오류가 발생했습니다.",
errorCode: error.response?.data?.errorCode,
};
}
}
/**
* 특정 레코드의 타임라인 조회 (그룹화된 이벤트)
*/
export async function getRecordTimeline(
tableName: string,
recordId: string | number,
): Promise<TableHistoryTimelineResponse> {
try {
const response = await apiClient.get(`/table-history/${tableName}/${recordId}/timeline`);
return response.data;
} catch (error: any) {
console.error("❌ 타임라인 조회 실패:", error);
return {
success: false,
error: error.response?.data?.message || error.message || "타임라인 조회 중 오류가 발생했습니다.",
};
}
}
/**
* 테이블 전체 이력 요약
*/
export async function getTableHistorySummary(tableName: string): Promise<TableHistorySummaryResponse> {
try {
const response = await apiClient.get(`/table-history/${tableName}/summary`);
return response.data;
} catch (error: any) {
console.error("❌ 이력 요약 조회 실패:", error);
return {
success: false,
error: error.response?.data?.message || error.message || "이력 요약 조회 중 오류가 발생했습니다.",
};
}
}
/**
* 이력 테이블 존재 여부 확인
*/
export async function checkHistoryTableExists(tableName: string): Promise<TableHistoryCheckResponse> {
try {
const response = await apiClient.get(`/table-history/${tableName}/check`);
return response.data;
} catch (error: any) {
console.error("❌ 이력 테이블 확인 실패:", error);
return {
success: false,
error: error.response?.data?.message || error.message || "이력 테이블 확인 중 오류가 발생했습니다.",
};
}
}

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

@ -85,9 +85,9 @@ class TableManagementApi {
/**
* 특정 테이블의 컬럼 목록 조회
*/
async getColumnList(tableName: string): Promise<ColumnListResponse> {
async getColumnList(tableName: string, size: number = 1000): Promise<ColumnListResponse> {
try {
const response = await apiClient.get(`${this.basePath}/tables/${tableName}/columns`);
const response = await apiClient.get(`${this.basePath}/tables/${tableName}/columns?size=${size}`);
return response.data;
} catch (error: any) {
console.error(`❌ 테이블 '${tableName}' 컬럼 목록 조회 실패:`, error);

18
frontend/lib/api/user.ts
View File

@ -83,6 +83,23 @@ export async function createUser(userData: any) {
// 사용자 수정 기능 제거됨
/**
* 사용자 정보 수정
*/
export async function updateUser(userData: {
userId: string;
userName?: string;
companyCode?: string;
deptCode?: string;
userType?: string;
status?: string;
[key: string]: any;
}) {
const response = await apiClient.put(`/admin/users/${userData.userId}`, userData);
return response.data;
}
/**
* 사용자 상태 변경 (부분 수정)
*/
@ -171,6 +188,7 @@ export const userAPI = {
getList: getUserList,
getInfo: getUserInfo,
create: createUser,
update: updateUser,
updateStatus: updateUserStatus,
getHistory: getUserHistory,
resetPassword: resetUserPassword,

13
frontend/lib/registry/AutoRegisteringComponentRenderer.ts
View File

@ -333,7 +333,6 @@ export class AutoRegisteringComponentRenderer {
}
if (this.registeredComponents.has(definition.id)) {
console.warn(`⚠️ ${definition.id} 컴포넌트가 이미 등록되어 있습니다.`);
return;
}
@ -341,18 +340,6 @@ export class AutoRegisteringComponentRenderer {
// 레지스트리에 등록
ComponentRegistry.registerComponent(definition);
this.registeredComponents.add(definition.id);
console.log(`✅ 컴포넌트 자동 등록 완료: ${definition.id} (${definition.name})`);
// 개발 모드에서 추가 정보 출력
if (process.env.NODE_ENV === "development") {
console.log(`📦 ${definition.id}:`, {
name: definition.name,
category: definition.category,
webType: definition.webType,
tags: definition.tags?.join(", ") || "none",
});
}
} catch (error) {
console.error(`❌ ${definition.id} 컴포넌트 등록 실패:`, error);
}

17
frontend/lib/registry/ComponentRegistry.ts
View File

@ -52,8 +52,6 @@ export class ComponentRegistry {
timestamp: new Date(),
});
console.log(`✅ 컴포넌트 등록: ${definition.id} (${definition.name})`);
// 개발자 도구 등록 (개발 모드에서만)
if (process.env.NODE_ENV === "development") {
this.registerGlobalDevTools();
@ -399,9 +397,6 @@ Hot Reload 제어 (비동기):
`);
},
};
console.log("🛠️ 컴포넌트 레지스트리 개발자 도구가 등록되었습니다.");
console.log(" 사용법: __COMPONENT_REGISTRY__.help()");
}
}
@ -409,17 +404,7 @@ Hot Reload 제어 (비동기):
* 디버그 정보 출력
*/
static debug(): void {
const stats = this.getStats();
console.group("🎨 컴포넌트 레지스트리 디버그 정보");
console.log("📊 총 컴포넌트 수:", stats.total);
console.log("📂 카테고리별 분포:", stats.byCategory);
console.log("🏷️ 웹타입별 분포:", stats.byWebType);
console.log("👨‍💻 작성자별 분포:", stats.byAuthor);
console.log(
"🆕 최근 추가:",
stats.recentlyAdded.map((c) => `${c.id} (${c.name})`),
);
console.groupEnd();
// 디버그 로그 제거 (필요시 브라우저 콘솔에서 ComponentRegistry.getStats() 사용)
}
/**

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

@ -38,7 +38,7 @@ export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
// 테이블 선택된 행 정보 (다중 선택 액션용)
selectedRows?: any[];
selectedRowsData?: any[];
// 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
flowSelectedData?: any[];
flowSelectedStepId?: number | null;
@ -187,12 +187,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
const buttonDarkColor = getDarkColor(buttonColor);
console.log("🎨 동적 색상 연동:", {
labelColor: component.style?.labelColor,
buttonColor,
buttonDarkColor,
});
// 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환
const processedConfig = { ...componentConfig };
if (componentConfig.action && typeof componentConfig.action === "string") {
@ -213,7 +207,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
};
}
// 스타일 계산
// height: 100%로 부모(RealtimePreviewDynamic의 내부 div)의 높이를 따라감
const componentStyle: React.CSSProperties = {
@ -223,7 +216,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
...style,
};
// 디자인 모드 스타일 (border 속성 분리하여 충돌 방지)
if (isDesignMode) {
componentStyle.borderWidth = "1px";
@ -279,7 +271,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
return;
}
// 기본 에러 메시지 결정
const defaultErrorMessage =
const defaultErrorMessage =
actionConfig.type === "save"
? "저장 중 오류가 발생했습니다."
: actionConfig.type === "delete"
@ -287,16 +279,15 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
: actionConfig.type === "submit"
? "제출 중 오류가 발생했습니다."
: "처리 중 오류가 발생했습니다.";
// 커스텀 메시지 사용 조건:
// 1. 커스텀 메시지가 있고
// 2. (액션 타입이 save이거나 OR 메시지에 "저장"이 포함되지 않은 경우)
const useCustomMessage =
actionConfig.errorMessage &&
(actionConfig.type === "save" || !actionConfig.errorMessage.includes("저장"));
const useCustomMessage =
actionConfig.errorMessage && (actionConfig.type === "save" || !actionConfig.errorMessage.includes("저장"));
const errorMessage = useCustomMessage ? actionConfig.errorMessage : defaultErrorMessage;
toast.error(errorMessage);
return;
}
@ -305,7 +296,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
// edit, modal, navigate 액션은 조용히 처리 (UI 전환만 하므로 토스트 불필요)
if (actionConfig.type !== "edit" && actionConfig.type !== "modal" && actionConfig.type !== "navigate") {
// 기본 성공 메시지 결정
const defaultSuccessMessage =
const defaultSuccessMessage =
actionConfig.type === "save"
? "저장되었습니다."
: actionConfig.type === "delete"
@ -313,14 +304,14 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
: actionConfig.type === "submit"
? "제출되었습니다."
: "완료되었습니다.";
// 커스텀 메시지 사용 조건:
// 1. 커스텀 메시지가 있고
// 2. (액션 타입이 save이거나 OR 메시지에 "저장"이 포함되지 않은 경우)
const useCustomMessage =
const useCustomMessage =
actionConfig.successMessage &&
(actionConfig.type === "save" || !actionConfig.successMessage.includes("저장"));
const successMessage = useCustomMessage ? actionConfig.successMessage : defaultSuccessMessage;
toast.success(successMessage);
@ -539,7 +530,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
alignItems: "center",
justifyContent: "center",
// 🔧 크기에 따른 패딩 조정
padding: componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem",
padding:
componentConfig.size === "sm" ? "0 0.75rem" : componentConfig.size === "lg" ? "0 1.25rem" : "0 1rem",
margin: "0",
lineHeight: "1.25",
boxShadow: componentConfig.disabled ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : `0 1px 3px 0 ${buttonColor}40`,

6
frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx
View File

@ -21,8 +21,8 @@ export class FlowWidgetRenderer extends AutoRegisteringComponentRenderer {
render(): React.ReactElement {
return (
<FlowWidget
component={this.props.component as any}
<FlowWidget
component={this.props.component as any}
onSelectedDataChange={this.props.onFlowSelectedDataChange}
flowRefreshKey={this.props.flowRefreshKey}
onFlowRefresh={this.props.onFlowRefresh}
@ -38,5 +38,3 @@ FlowWidgetRenderer.registerSelf();
if (process.env.NODE_ENV === "development") {
FlowWidgetRenderer.enableHotReload();
}
console.log("✅ FlowWidget 컴포넌트 등록 완료");

6
frontend/lib/registry/components/index.ts
View File

@ -8,8 +8,6 @@ import { initializeHotReload } from "../utils/hotReload";
* 모든 컴포넌트를 자동으로 로드하고 등록합니다
*/
console.log("🚀 컴포넌트 시스템 초기화 시작...");
// 컴포넌트 자동 디스커버리 및 로드
// 현재는 수동 import 방식 사용 (향후 자동 디스커버리로 확장 예정)
@ -46,16 +44,12 @@ import "./flow-widget/FlowWidgetRenderer";
* 컴포넌트 초기화 함수
*/
export async function initializeComponents() {
console.log("🔄 컴포넌트 초기화 중...");
try {
// 1. 자동 등록된 컴포넌트 확인
const registeredComponents = ComponentRegistry.getAllComponents();
console.log(`✅ 등록된 컴포넌트: ${registeredComponents.length}개`);
// 2. 카테고리별 통계
const stats = ComponentRegistry.getStats();
console.log("📊 카테고리별 분포:", stats.byCategory);
// 3. 개발 모드에서 디버그 정보 출력
if (process.env.NODE_ENV === "development") {

16
frontend/lib/registry/components/table-list/TableListRenderer.tsx
View File

@ -13,35 +13,31 @@ export class TableListRenderer extends AutoRegisteringComponentRenderer {
static componentDefinition = TableListDefinition;
render(): React.ReactElement {
return <TableListComponent
{...this.props}
renderer={this}
onConfigChange={this.handleConfigChange}
/>;
return <TableListComponent {...this.props} renderer={this} onConfigChange={this.handleConfigChange} />;
}
// 설정 변경 핸들러
protected handleConfigChange = (config: any) => {
console.log("📥 TableListRenderer에서 설정 변경 받음:", config);
// 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
if (this.props.onConfigChange) {
this.props.onConfigChange(config);
} else {
console.log("⚠️ 상위 컴포넌트에서 onConfigChange가 전달되지 않음");
}
this.updateComponent({ config });
};
/**
* 컴포넌트별 특화 메서드들
*/
// text 타입 특화 속성 처리
protected getTableListProps() {
const baseProps = this.getWebTypeProps();
// text 타입에 특화된 추가 속성들
return {
...baseProps,
@ -72,9 +68,7 @@ TableListRenderer.registerSelf();
if (typeof window !== "undefined") {
setTimeout(() => {
try {
console.log("🔄 TableList 강제 등록 시도...");
TableListRenderer.registerSelf();
console.log("✅ TableList 강제 등록 완료");
} catch (error) {
console.error("❌ TableList 강제 등록 실패:", error);
}

5
frontend/lib/registry/utils/createComponentDefinition.ts
View File

@ -96,10 +96,7 @@ export function createComponentDefinition(options: CreateComponentDefinitionOpti
throw new Error(`컴포넌트 정의 검증 실패: ${validationResult.errors.join(", ")}`);
}
// 경고사항 출력 (개발 모드에서만)
if (process.env.NODE_ENV === "development" && validationResult.warnings.length > 0) {
console.warn(`⚠️ 컴포넌트 정의 경고 (${id}):`, validationResult.warnings);
}
// 경고사항 출력 (개발 모드에서만) - 로그 제거
return definition;
}

19
frontend/lib/registry/utils/hotReload.ts
View File

@ -15,9 +15,8 @@ let hotReloadListeners: Array<() => void> = [];
*/
export function initializeHotReload(): void {
// 핫 리로드 시스템 임시 비활성화 (디버깅 목적)
console.log("🔥 컴포넌트 Hot Reload 시스템 비활성화됨 (디버깅 모드)");
return;
if (process.env.NODE_ENV !== "development" || typeof window === "undefined") {
return;
}
@ -64,10 +63,18 @@ function setupDevServerEventListener(): void {
const message = args.join(" ");
// 핫 리로드를 트리거할 특정 메시지만 감지 (디버깅 로그는 제외)
if ((message.includes("compiled") || message.includes("Fast Refresh")) &&
!message.includes("🔍") && !message.includes("🎯") && !message.includes("📤") &&
!message.includes("📥") && !message.includes("⚠️") && !message.includes("🔄") &&
!message.includes("✅") && !message.includes("🔧") && !message.includes("📋")) {
if (
(message.includes("compiled") || message.includes("Fast Refresh")) &&
!message.includes("🔍") &&
!message.includes("🎯") &&
!message.includes("📤") &&
!message.includes("📥") &&
!message.includes("⚠️") &&
!message.includes("🔄") &&
!message.includes("✅") &&
!message.includes("🔧") &&
!message.includes("📋")
) {
if (!reloadPending) {
reloadPending = true;
setTimeout(() => {

3
frontend/lib/registry/utils/performanceOptimizer.ts
View File

@ -67,8 +67,6 @@ export class PerformanceOptimizer {
static initialize(options: Partial<OptimizationOptions> = {}): void {
this.options = { ...DEFAULT_OPTIMIZATION_OPTIONS, ...options };
console.log("⚡ 성능 최적화 시스템 초기화:", this.options);
// 메모리 사용량 모니터링 (개발 모드에서만)
if (process.env.NODE_ENV === "development") {
this.startMemoryMonitoring();
@ -463,5 +461,4 @@ export class PerformanceOptimizer {
// 자동 초기화
if (typeof window !== "undefined") {
PerformanceOptimizer.initialize();
console.log("⚡ 성능 최적화 시스템이 초기화되었습니다.");
}

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

@ -1,5 +1,6 @@
"use client";
import React from "react";
import { toast } from "sonner";
import { screenApi } from "@/lib/api/screen";
import { DynamicFormApi } from "@/lib/api/dynamicForm";
@ -15,7 +16,8 @@ export type ButtonActionType =
| "edit" // 편집
| "navigate" // 페이지 이동
| "modal" // 모달 열기
| "control"; // 제어 흐름
| "control" // 제어 흐름
| "view_table_history"; // 테이블 이력 보기
/**
* 버튼 액션 설정
@ -46,6 +48,13 @@ export interface ButtonActionConfig {
enableDataflowControl?: boolean;
dataflowConfig?: any; // ButtonDataflowConfig 타입 (순환 참조 방지를 위해 any 사용)
dataflowTiming?: "before" | "after" | "replace"; // 제어 실행 타이밍
// 테이블 이력 보기 관련
historyTableName?: string; // 이력을 조회할 테이블명 (자동 감지 또는 수동 지정)
historyRecordIdField?: string; // PK 필드명 (기본: "id")
historyRecordIdSource?: "selected_row" | "form_field" | "context"; // 레코드 ID 가져올 소스
historyRecordLabelField?: string; // 레코드 라벨로 표시할 필드 (선택사항)
historyDisplayColumn?: string; // 전체 이력에서 레코드 구분용 컬럼 (예: device_code, name)
}
/**
@ -64,7 +73,7 @@ export interface ButtonActionContext {
// 테이블 선택된 행 정보 (다중 선택 액션용)
selectedRows?: any[];
selectedRowsData?: any[];
// 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
flowSelectedData?: any[];
flowSelectedStepId?: number | null;
@ -105,6 +114,9 @@ export class ButtonActionExecutor {
case "control":
return this.handleControl(config, context);
case "view_table_history":
return this.handleViewTableHistory(config, context);
default:
console.warn(`지원되지 않는 액션 타입: ${config.type}`);
return false;
@ -932,7 +944,7 @@ export class ButtonActionExecutor {
console.log("🔄 플로우 새로고침 호출");
context.onFlowRefresh();
}
// 테이블 새로고침 (일반 테이블용)
if (context.onRefresh) {
console.log("🔄 테이블 새로고침 호출");
@ -1473,6 +1485,113 @@ export class ButtonActionExecutor {
}
}
/**
* 테이블 이력 보기 액션 처리
*/
private static async handleViewTableHistory(
config: ButtonActionConfig,
context: ButtonActionContext,
): Promise<boolean> {
console.log("📜 테이블 이력 보기 액션 실행:", { config, context });
// 테이블명 결정 (설정 > 컨텍스트 > 폼 데이터)
const tableName = config.historyTableName || context.tableName;
if (!tableName) {
toast.error("테이블명이 지정되지 않았습니다.");
return false;
}
// 레코드 ID 가져오기 (선택사항 - 없으면 전체 테이블 이력)
const recordIdField = config.historyRecordIdField || "id";
const recordIdSource = config.historyRecordIdSource || "selected_row";
let recordId: any = null;
let recordLabel: string | undefined;
switch (recordIdSource) {
case "selected_row":
// 선택된 행에서 가져오기 (선택사항)
if (context.selectedRowsData && context.selectedRowsData.length > 0) {
const selectedRow = context.selectedRowsData[0];
recordId = selectedRow[recordIdField];
// 라벨 필드가 지정되어 있으면 사용
if (config.historyRecordLabelField) {
recordLabel = selectedRow[config.historyRecordLabelField];
}
} else if (context.flowSelectedData && context.flowSelectedData.length > 0) {
// 플로우 선택 데이터 폴백
const selectedRow = context.flowSelectedData[0];
recordId = selectedRow[recordIdField];
if (config.historyRecordLabelField) {
recordLabel = selectedRow[config.historyRecordLabelField];
}
}
break;
case "form_field":
// 폼 필드에서 가져오기
recordId = context.formData?.[recordIdField];
if (config.historyRecordLabelField) {
recordLabel = context.formData?.[config.historyRecordLabelField];
}
break;
case "context":
// 원본 데이터에서 가져오기
recordId = context.originalData?.[recordIdField];
if (config.historyRecordLabelField) {
recordLabel = context.originalData?.[config.historyRecordLabelField];
}
break;
}
// recordId가 없어도 괜찮음 - 전체 테이블 이력 보기
console.log("📋 이력 조회 대상:", {
tableName,
recordId: recordId || "전체",
recordLabel,
mode: recordId ? "단일 레코드" : "전체 테이블",
});
// 이력 모달 열기 (동적 import)
try {
const { TableHistoryModal } = await import("@/components/common/TableHistoryModal");
const { createRoot } = await import("react-dom/client");
// 모달 컨테이너 생성
const modalContainer = document.createElement("div");
document.body.appendChild(modalContainer);
const root = createRoot(modalContainer);
const closeModal = () => {
root.unmount();
document.body.removeChild(modalContainer);
};
root.render(
React.createElement(TableHistoryModal, {
open: true,
onOpenChange: (open: boolean) => {
if (!open) closeModal();
},
tableName,
recordId,
recordLabel,
displayColumn: config.historyDisplayColumn,
}),
);
return true;
} catch (error) {
console.error("❌ 이력 모달 열기 실패:", error);
toast.error("이력 조회 중 오류가 발생했습니다.");
return false;
}
}
/**
* 폼 데이터 유효성 검사
*/
@ -1539,4 +1658,9 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
control: {
type: "control",
},
view_table_history: {
type: "view_table_history",
historyRecordIdField: "id",
historyRecordIdSource: "selected_row",
},
};

40
frontend/lib/utils/errorUtils.ts Normal file
View File

@ -0,0 +1,40 @@
/**
* 에러 메시지를 안전하게 문자열로 변환하는 유틸리티
*/
/**
* API 에러 객체를 안전한 문자열로 변환
* @param error - API 응답 에러 (string | object | undefined)
* @param defaultMessage - 기본 에러 메시지
* @returns 표시 가능한 에러 메시지 문자열
*/
export function formatErrorMessage(error: any, defaultMessage: string = "오류가 발생했습니다."): string {
// undefined/null 체크
if (!error) {
return defaultMessage;
}
// 이미 문자열인 경우
if (typeof error === "string") {
return error;
}
// 객체인 경우
if (typeof error === "object") {
// { code, details } 형태
if (error.details) {
return typeof error.details === "string" ? error.details : defaultMessage;
}
// { message } 형태
if (error.message) {
return typeof error.message === "string" ? error.message : defaultMessage;
}
// 기타 객체는 기본 메시지 반환
return defaultMessage;
}
// 그 외의 경우
return defaultMessage;
}

25
frontend/lib/utils/getComponentConfigPanel.tsx
View File

@ -48,7 +48,6 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
}
try {
console.log(`🔧 ConfigPanel 로드 중: ${componentId}`);
const module = await importFn();
// 모듈에서 ConfigPanel 컴포넌트 추출
@ -65,7 +64,6 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
// 캐시에 저장
configPanelCache.set(componentId, ConfigPanelComponent);
console.log(`✅ ConfigPanel 로드 완료: ${componentId}`);
return ConfigPanelComponent;
} catch (error) {
@ -119,8 +117,6 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
tableColumns,
tables,
}) => {
console.log(`🔥 DynamicComponentConfigPanel 렌더링 시작: ${componentId}`);
// 모든 useState를 최상단에 선언 (Hooks 규칙)
const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
const [loading, setLoading] = React.useState(true);
@ -133,12 +129,10 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
async function loadConfigPanel() {
try {
console.log(`🔧 DynamicComponentConfigPanel: ${componentId} 로드 시작`);
setLoading(true);
setError(null);
const component = await getComponentConfigPanel(componentId);
console.log(`🔧 DynamicComponentConfigPanel: ${componentId} 로드 결과:`, component);
if (mounted) {
setConfigPanelComponent(() => component);
@ -217,38 +211,20 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
);
}
console.log(`🔧 DynamicComponentConfigPanel 렌더링:`, {
componentId,
ConfigPanelComponent: ConfigPanelComponent?.name,
config,
configType: typeof config,
configKeys: typeof config === "object" ? Object.keys(config || {}) : "not object",
screenTableName,
tableColumns: Array.isArray(tableColumns) ? tableColumns.length : tableColumns,
tables: Array.isArray(tables) ? tables.length : tables,
tablesType: typeof tables,
tablesDetail: tables, // 전체 테이블 목록 확인
});
// 테이블 변경 핸들러 - 선택된 테이블의 컬럼을 동적으로 로드
const handleTableChange = async (tableName: string) => {
console.log("🔄 테이블 변경:", tableName);
try {
// 먼저 tables에서 찾아보기 (이미 컬럼이 있는 경우)
const existingTable = tables?.find((t) => t.tableName === tableName);
if (existingTable && existingTable.columns && existingTable.columns.length > 0) {
console.log("✅ 캐시된 테이블 컬럼 사용:", existingTable.columns.length, "개");
setSelectedTableColumns(existingTable.columns);
return;
}
// 컬럼이 없으면 tableTypeApi로 조회 (ScreenDesigner와 동일한 방식)
console.log("🔍 테이블 컬럼 API 조회:", tableName);
const { tableTypeApi } = await import("@/lib/api/screen");
const columnsResponse = await tableTypeApi.getColumns(tableName);
console.log("🔍 컬럼 응답 데이터:", columnsResponse);
const columns = (columnsResponse || []).map((col: any) => ({
tableName: col.tableName || tableName,
columnName: col.columnName || col.column_name,
@ -265,7 +241,6 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
codeValue: col.codeValue || col.code_value,
}));
console.log("✅ 테이블 컬럼 로드 성공:", columns.length, "개");
setSelectedTableColumns(columns);
} catch (error) {
console.error("❌ 테이블 변경 오류:", error);

11
frontend/lib/utils/widthToColumnSpan.ts
View File

@ -165,11 +165,6 @@ export function migrateComponentsToColumnSpan(
* @returns 새로운 그리드 시스템으로 변환된 레이아웃
*/
export function migrateLayoutToGridSystem(layout: LayoutData, canvasWidth: number = 1920): LayoutData {
console.log("🔄 레이아웃 마이그레이션 시작:", {
screenId: layout.screenId,
componentCount: layout.components.length,
});
// 1단계: width를 gridColumnSpan으로 변환
let migratedComponents = migrateComponentsToColumnSpan(layout.components, canvasWidth);
@ -179,11 +174,6 @@ export function migrateLayoutToGridSystem(layout: LayoutData, canvasWidth: numbe
// 3단계: 같은 행 내에서 X 좌표로 gridColumnStart 계산
migratedComponents = calculateColumnStarts(migratedComponents);
console.log("✅ 마이그레이션 완료:", {
componentCount: migratedComponents.length,
sampleComponent: migratedComponents[0],
});
return {
...layout,
components: migratedComponents,
@ -233,7 +223,6 @@ export function needsMigration(layout: LayoutData): boolean {
export function safeMigrateLayout(layout: LayoutData, canvasWidth: number = 1920): LayoutData {
try {
if (!needsMigration(layout)) {
console.log("⏭️ 마이그레이션 불필요 - 이미 최신 형식");
return layout;
}

5
frontend/next.config.mjs
View File

@ -44,9 +44,8 @@ const nextConfig = {
// 환경 변수 (런타임에 읽기)
env: {
// 환경변수가 있으면 사용, 없으면 개발환경에서는 프록시 사용
NEXT_PUBLIC_API_URL:
process.env.NEXT_PUBLIC_API_URL || (process.env.NODE_ENV === "production" ? "http://localhost:8080/api" : "/api"),
// 항상 명시적으로 백엔드 포트(8080)를 지정
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080/api",
},
};

14
frontend/types/flow.ts
View File

@ -61,6 +61,16 @@ export interface UpdateFlowDefinitionRequest {
isActive?: boolean;
}
// ============================================
// 플로우 단계 표시 설정
// ============================================
export interface FlowStepDisplayConfig {
visibleColumns?: string[]; // 표시할 컬럼 목록
columnOrder?: string[]; // 컬럼 순서 (선택사항)
columnLabels?: Record<string, string>; // 컬럼별 커스텀 라벨 (선택사항)
columnWidths?: Record<string, number>; // 컬럼별 너비 설정 (px, 선택사항)
}
// ============================================
// 플로우 단계
// ============================================
@ -74,6 +84,8 @@ export interface FlowStep {
color: string;
positionX: number;
positionY: number;
// 🆕 표시 설정 (플로우 위젯에서 사용)
displayConfig?: FlowStepDisplayConfig; // 단계별 컬럼 표시 설정
createdAt: string;
updatedAt: string;
createdBy: string;
@ -88,6 +100,7 @@ export interface CreateFlowStepRequest {
color?: string;
positionX?: number;
positionY?: number;
displayConfig?: FlowStepDisplayConfig; // 🆕 표시 설정
}
export interface UpdateFlowStepRequest {
@ -98,6 +111,7 @@ export interface UpdateFlowStepRequest {
color?: string;
positionX?: number;
positionY?: number;
displayConfig?: FlowStepDisplayConfig; // 🆕 표시 설정
}
// ============================================

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