diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts index 4af01653..b1638403 100644 --- a/backend-node/src/controllers/adminController.ts +++ b/backend-node/src/controllers/adminController.ts @@ -25,19 +25,22 @@ export async function getAdminMenus( const userType = req.user?.userType; const userLang = (req.query.userLang as string) || "ko"; const menuType = req.query.menuType as string | undefined; // menuType 파라미터 추가 + const includeInactive = req.query.includeInactive === "true"; // includeInactive 파라미터 추가 logger.info(`사용자 ID: ${userId}`); logger.info(`사용자 회사 코드: ${userCompanyCode}`); logger.info(`사용자 유형: ${userType}`); logger.info(`사용자 로케일: ${userLang}`); logger.info(`메뉴 타입: ${menuType || "전체"}`); + logger.info(`비활성 메뉴 포함: ${includeInactive}`); const paramMap = { userId, userCompanyCode, userType, userLang, - menuType, // menuType 추가 + menuType, // includeInactive와 관계없이 menuType 유지 (관리자/사용자 구분) + includeInactive, // includeInactive 추가 }; const menuList = await AdminService.getAdminMenuList(paramMap); @@ -1081,9 +1084,41 @@ export async function saveMenu( return; } + const userCompanyCode = req.user.companyCode; + const userType = req.user.userType; + let requestCompanyCode = menuData.companyCode || menuData.company_code; + + // "none"이나 빈 값은 undefined로 처리하여 사용자 회사 코드 사용 + if (requestCompanyCode === "none" || requestCompanyCode === "" || !requestCompanyCode) { + requestCompanyCode = undefined; + } + + // 공통 메뉴(company_code = '*')는 최고 관리자만 생성 가능 + if (requestCompanyCode === "*") { + if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") { + res.status(403).json({ + success: false, + message: "공통 메뉴는 최고 관리자만 생성할 수 있습니다.", + error: "Unauthorized to create common menu", + }); + return; + } + } else if (userCompanyCode !== "*") { + // 회사 관리자는 자기 회사 메뉴만 생성 가능 + // requestCompanyCode가 undefined면 사용자 회사 코드 사용 (권한 체크 통과) + if (requestCompanyCode && requestCompanyCode !== userCompanyCode) { + res.status(403).json({ + success: false, + message: "해당 회사의 메뉴를 생성할 권한이 없습니다.", + error: "Unauthorized to create menu for this company", + }); + return; + } + } + // Raw Query를 사용한 메뉴 저장 const objid = Date.now(); // 고유 ID 생성 - const companyCode = req.user.companyCode; + const companyCode = requestCompanyCode || userCompanyCode; const [savedMenu] = await query( `INSERT INTO menu_info ( @@ -1164,7 +1199,73 @@ export async function updateMenu( return; } - const companyCode = req.user.companyCode; + const userCompanyCode = req.user.companyCode; + const userType = req.user.userType; + + // 수정하려는 메뉴 조회 + const currentMenu = await queryOne( + `SELECT objid, company_code FROM menu_info WHERE objid = $1`, + [Number(menuId)] + ); + + if (!currentMenu) { + res.status(404).json({ + success: false, + message: `메뉴를 찾을 수 없습니다: ${menuId}`, + error: "Menu not found", + }); + return; + } + + // 공통 메뉴(company_code = '*')는 최고 관리자만 수정 가능 + if (currentMenu.company_code === "*") { + if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") { + res.status(403).json({ + success: false, + message: "공통 메뉴는 최고 관리자만 수정할 수 있습니다.", + error: "Unauthorized to update common menu", + }); + return; + } + } else if (userCompanyCode !== "*") { + // 회사 관리자는 자기 회사 메뉴만 수정 가능 + if (currentMenu.company_code !== userCompanyCode) { + res.status(403).json({ + success: false, + message: "해당 회사의 메뉴를 수정할 권한이 없습니다.", + error: "Unauthorized to update menu for this company", + }); + return; + } + } + + const requestCompanyCode = menuData.companyCode || menuData.company_code || currentMenu.company_code; + + // company_code 변경 시도하는 경우 권한 체크 + if (requestCompanyCode !== currentMenu.company_code) { + // 공통 메뉴로 변경하려는 경우 최고 관리자만 가능 + if (requestCompanyCode === "*") { + if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") { + res.status(403).json({ + success: false, + message: "공통 메뉴로 변경할 권한이 없습니다.", + error: "Unauthorized to change to common menu", + }); + return; + } + } + // 회사 관리자는 자기 회사로만 변경 가능 + else if (userCompanyCode !== "*" && requestCompanyCode !== userCompanyCode) { + res.status(403).json({ + success: false, + message: "해당 회사로 변경할 권한이 없습니다.", + error: "Unauthorized to change company", + }); + return; + } + } + + const companyCode = requestCompanyCode; // Raw Query를 사용한 메뉴 수정 const [updatedMenu] = await query( @@ -1239,6 +1340,56 @@ export async function deleteMenu( const { menuId } = req.params; logger.info(`메뉴 삭제 요청: menuId = ${menuId}`, { user: req.user }); + // 사용자의 company_code 확인 + if (!req.user?.companyCode) { + res.status(400).json({ + success: false, + message: "사용자의 회사 코드를 찾을 수 없습니다.", + error: "Missing company_code", + }); + return; + } + + const userCompanyCode = req.user.companyCode; + const userType = req.user.userType; + + // 삭제하려는 메뉴 조회 + const currentMenu = await queryOne( + `SELECT objid, company_code FROM menu_info WHERE objid = $1`, + [Number(menuId)] + ); + + if (!currentMenu) { + res.status(404).json({ + success: false, + message: `메뉴를 찾을 수 없습니다: ${menuId}`, + error: "Menu not found", + }); + return; + } + + // 공통 메뉴(company_code = '*')는 최고 관리자만 삭제 가능 + if (currentMenu.company_code === "*") { + if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") { + res.status(403).json({ + success: false, + message: "공통 메뉴는 최고 관리자만 삭제할 수 있습니다.", + error: "Unauthorized to delete common menu", + }); + return; + } + } else if (userCompanyCode !== "*") { + // 회사 관리자는 자기 회사 메뉴만 삭제 가능 + if (currentMenu.company_code !== userCompanyCode) { + res.status(403).json({ + success: false, + message: "해당 회사의 메뉴를 삭제할 권한이 없습니다.", + error: "Unauthorized to delete menu for this company", + }); + return; + } + } + // Raw Query를 사용한 메뉴 삭제 const [deletedMenu] = await query( `DELETE FROM menu_info WHERE objid = $1 RETURNING *`, @@ -1292,6 +1443,51 @@ export async function deleteMenusBatch( return; } + // 사용자의 company_code 확인 + if (!req.user?.companyCode) { + res.status(400).json({ + success: false, + message: "사용자의 회사 코드를 찾을 수 없습니다.", + error: "Missing company_code", + }); + return; + } + + const userCompanyCode = req.user.companyCode; + const userType = req.user.userType; + + // 삭제하려는 메뉴들의 company_code 확인 + const menusToDelete = await query( + `SELECT objid, company_code FROM menu_info WHERE objid = ANY($1::bigint[])`, + [menuIds.map((id) => Number(id))] + ); + + // 권한 체크: 공통 메뉴 포함 여부 확인 + const hasCommonMenu = menusToDelete.some((menu: any) => menu.company_code === "*"); + if (hasCommonMenu && (userCompanyCode !== "*" || userType !== "SUPER_ADMIN")) { + res.status(403).json({ + success: false, + message: "공통 메뉴는 최고 관리자만 삭제할 수 있습니다.", + error: "Unauthorized to delete common menu", + }); + return; + } + + // 회사 관리자는 자기 회사 메뉴만 삭제 가능 + if (userCompanyCode !== "*") { + const unauthorizedMenus = menusToDelete.filter( + (menu: any) => menu.company_code !== userCompanyCode && menu.company_code !== "*" + ); + if (unauthorizedMenus.length > 0) { + res.status(403).json({ + success: false, + message: "다른 회사의 메뉴를 삭제할 권한이 없습니다.", + error: "Unauthorized to delete menus for other companies", + }); + return; + } + } + // Raw Query를 사용한 메뉴 일괄 삭제 let deletedCount = 0; let failedCount = 0; @@ -1354,6 +1550,103 @@ export async function deleteMenusBatch( } } +/** + * 메뉴 활성/비활성 토글 + */ +export async function toggleMenuStatus( + req: AuthenticatedRequest, + res: Response +): Promise { + try { + const { menuId } = req.params; + logger.info(`메뉴 상태 토글 요청: menuId = ${menuId}`, { user: req.user }); + + // 사용자의 company_code 확인 + if (!req.user?.companyCode) { + res.status(400).json({ + success: false, + message: "사용자의 회사 코드를 찾을 수 없습니다.", + error: "Missing company_code", + }); + return; + } + + const userCompanyCode = req.user.companyCode; + const userType = req.user.userType; + + // 현재 상태 및 회사 코드 조회 + const currentMenu = await queryOne( + `SELECT objid, status, company_code FROM menu_info WHERE objid = $1`, + [Number(menuId)] + ); + + if (!currentMenu) { + res.status(404).json({ + success: false, + message: `메뉴를 찾을 수 없습니다: ${menuId}`, + error: "Menu not found", + }); + return; + } + + // 공통 메뉴(company_code = '*')는 최고 관리자만 상태 변경 가능 + if (currentMenu.company_code === "*") { + if (userCompanyCode !== "*" || userType !== "SUPER_ADMIN") { + res.status(403).json({ + success: false, + message: "공통 메뉴는 최고 관리자만 상태를 변경할 수 있습니다.", + error: "Unauthorized to toggle common menu status", + }); + return; + } + } else if (userCompanyCode !== "*") { + // 회사 관리자는 자기 회사 메뉴만 상태 변경 가능 + if (currentMenu.company_code !== userCompanyCode) { + res.status(403).json({ + success: false, + message: "해당 회사의 메뉴 상태를 변경할 권한이 없습니다.", + error: "Unauthorized to toggle menu status for this company", + }); + return; + } + } + + // 상태 토글 (active <-> inactive) + const currentStatus = currentMenu.status; + const newStatus = currentStatus === "active" ? "inactive" : "active"; + + // 상태 업데이트 + const [updatedMenu] = await query( + `UPDATE menu_info SET status = $1 WHERE objid = $2 RETURNING *`, + [newStatus, Number(menuId)] + ); + + logger.info("메뉴 상태 토글 성공", { + menuId, + oldStatus: currentStatus, + newStatus, + }); + + const result = newStatus === "active" ? "활성화" : "비활성화"; + + const response: ApiResponse = { + success: true, + message: `메뉴가 ${result}되었습니다.`, + data: result, + }; + + 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", + errorCode: "MENU_TOGGLE_ERROR", + }); + } +} + /** * 회사 목록 조회 (실제 데이터베이스에서) */ diff --git a/backend-node/src/routes/adminRoutes.ts b/backend-node/src/routes/adminRoutes.ts index c6ae0bfc..ccca89b0 100644 --- a/backend-node/src/routes/adminRoutes.ts +++ b/backend-node/src/routes/adminRoutes.ts @@ -7,6 +7,7 @@ import { updateMenu, // 메뉴 수정 deleteMenu, // 메뉴 삭제 deleteMenusBatch, // 메뉴 일괄 삭제 + toggleMenuStatus, // 메뉴 상태 토글 getUserList, getUserInfo, // 사용자 상세 조회 getUserHistory, // 사용자 변경이력 조회 @@ -37,6 +38,7 @@ router.get("/user-menus", getUserMenus); router.get("/menus/:menuId", getMenuInfo); router.post("/menus", saveMenu); // 메뉴 추가 router.put("/menus/:menuId", updateMenu); // 메뉴 수정 +router.put("/menus/:menuId/toggle", toggleMenuStatus); // 메뉴 상태 토글 router.delete("/menus/batch", deleteMenusBatch); // 메뉴 일괄 삭제 (순서 중요!) router.delete("/menus/:menuId", deleteMenu); // 메뉴 삭제 diff --git a/backend-node/src/services/adminService.ts b/backend-node/src/services/adminService.ts index 4f2e926c..c6ab17c6 100644 --- a/backend-node/src/services/adminService.ts +++ b/backend-node/src/services/adminService.ts @@ -19,7 +19,15 @@ export class AdminService { // menuType에 따른 WHERE 조건 생성 const menuTypeCondition = - menuType !== undefined ? `MENU_TYPE = ${parseInt(menuType)}` : "1 = 1"; + menuType !== undefined ? `MENU.MENU_TYPE = ${parseInt(menuType)}` : "1 = 1"; + + // 메뉴 관리 화면인지 좌측 사이드바인지 구분 + // includeInactive가 true거나 menuType이 undefined면 메뉴 관리 화면 + const includeInactive = paramMap.includeInactive === true; + const isManagementScreen = includeInactive || menuType === undefined; + // 메뉴 관리 화면: 모든 상태의 메뉴 표시, 좌측 사이드바: active만 표시 + const statusCondition = isManagementScreen ? "1 = 1" : "MENU.STATUS = 'active'"; + const subStatusCondition = isManagementScreen ? "1 = 1" : "MENU_SUB.STATUS = 'active'"; // 1. 권한 그룹 기반 필터링 (좌측 사이드바인 경우만) let authFilter = ""; @@ -27,8 +35,8 @@ export class AdminService { let queryParams: any[] = [userLang]; let paramIndex = 2; - if (menuType !== undefined && userType !== "SUPER_ADMIN") { - // 좌측 사이드바 + SUPER_ADMIN이 아닌 경우 + if (menuType !== undefined && userType !== "SUPER_ADMIN" && !isManagementScreen) { + // 좌측 사이드바 + SUPER_ADMIN이 아닌 경우만 권한 체크 const userRoleGroups = await query( ` SELECT DISTINCT am.objid AS role_objid, am.auth_name @@ -123,7 +131,7 @@ export class AdminService { return []; } } - } else if (menuType !== undefined && userType === "SUPER_ADMIN") { + } else if (menuType !== undefined && userType === "SUPER_ADMIN" && !isManagementScreen) { // 좌측 사이드바 + SUPER_ADMIN: 권한 그룹 체크 없이 모든 공통 메뉴 표시 logger.info(`✅ 최고 관리자는 권한 그룹 체크 없이 모든 공통 메뉴 표시`); // unionFilter는 비워둠 (하위 메뉴도 공통 메뉴만) @@ -136,7 +144,7 @@ export class AdminService { // SUPER_ADMIN과 COMPANY_ADMIN 구분 if (userType === "SUPER_ADMIN" && userCompanyCode === "*") { // SUPER_ADMIN - if (menuType === undefined) { + if (isManagementScreen) { // 메뉴 관리 화면: 모든 메뉴 logger.info("✅ 메뉴 관리 화면 (SUPER_ADMIN): 모든 메뉴 표시"); companyFilter = ""; @@ -145,16 +153,34 @@ export class AdminService { logger.info("✅ 좌측 사이드바 (SUPER_ADMIN): 공통 메뉴만 표시"); companyFilter = `AND MENU.COMPANY_CODE = '*'`; } - } else if (menuType === undefined) { - // 메뉴 관리 화면: 자기 회사 + 공통 메뉴 + } else if (isManagementScreen) { + // 메뉴 관리 화면: 회사별 필터링 + if (userType === "SUPER_ADMIN" && userCompanyCode === "*") { + // 최고 관리자: 모든 메뉴 (공통 + 모든 회사) + logger.info("✅ 메뉴 관리 화면 (SUPER_ADMIN): 모든 메뉴 표시"); + companyFilter = ""; + } else { + // 회사 관리자: 자기 회사 메뉴만 (공통 메뉴 제외) + logger.info( + `✅ 메뉴 관리 화면 (${userType}): 회사 ${userCompanyCode} 메뉴만 표시 (공통 메뉴 제외)` + ); + companyFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`; + queryParams.push(userCompanyCode); + paramIndex++; + + // 하위 메뉴에도 회사 필터링 적용 (공통 메뉴 제외) + if (unionFilter === "") { + unionFilter = `AND MENU_SUB.COMPANY_CODE = $${paramIndex - 1}`; + } + } + } else if (menuType !== undefined) { + // 좌측 사이드바: authFilter에서 이미 회사 필터링 포함 + // 회사 관리자는 좌측 사이드바에서도 자기 회사 메뉴 조회 가능 logger.info( - `✅ 메뉴 관리 화면: 회사 ${userCompanyCode} + 공통 메뉴 표시` + `✅ 좌측 사이드바: 회사 ${userCompanyCode} 메뉴 표시 (${userType})` ); - companyFilter = `AND (MENU.COMPANY_CODE = $${paramIndex} OR MENU.COMPANY_CODE = '*')`; - queryParams.push(userCompanyCode); - paramIndex++; + // companyFilter는 authFilter에서 이미 처리됨 } - // menuType이 정의된 경우 (좌측 사이드바)는 authFilter에서 이미 회사 필터링 포함 // 기존 Java의 selectAdminMenuList 쿼리를 Raw Query로 포팅 // WITH RECURSIVE 쿼리 구현 @@ -237,7 +263,7 @@ export class AdminService { ) FROM MENU_INFO MENU WHERE ${menuTypeCondition} - AND STATUS = 'active' + AND ${statusCondition} ${companyFilter} ${authFilter} AND NOT EXISTS ( @@ -304,7 +330,7 @@ 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 ${subStatusCondition} ${unionFilter} ) SELECT diff --git a/backend-node/src/services/dynamicFormService.ts b/backend-node/src/services/dynamicFormService.ts index 8a943b96..e7a9a10f 100644 --- a/backend-node/src/services/dynamicFormService.ts +++ b/backend-node/src/services/dynamicFormService.ts @@ -1355,9 +1355,20 @@ export class DynamicFormService { console.log(`📋 화면 컴포넌트 조회 결과:`, screenLayouts.length); // 저장 버튼 중에서 제어관리가 활성화된 것 찾기 + let controlConfigFound = false; for (const layout of screenLayouts) { const properties = layout.properties as any; + // 디버깅: 모든 컴포넌트 정보 출력 + console.log(`🔍 컴포넌트 검사:`, { + componentId: layout.component_id, + componentType: properties?.componentType, + actionType: properties?.componentConfig?.action?.type, + enableDataflowControl: properties?.webTypeConfig?.enableDataflowControl, + hasDataflowConfig: !!properties?.webTypeConfig?.dataflowConfig, + hasDiagramId: !!properties?.webTypeConfig?.dataflowConfig?.selectedDiagramId, + }); + // 버튼 컴포넌트이고 저장 액션이며 제어관리가 활성화된 경우 if ( properties?.componentType === "button-primary" && @@ -1365,6 +1376,7 @@ export class DynamicFormService { properties?.webTypeConfig?.enableDataflowControl === true && properties?.webTypeConfig?.dataflowConfig?.selectedDiagramId ) { + controlConfigFound = true; const diagramId = properties.webTypeConfig.dataflowConfig.selectedDiagramId; const relationshipId = @@ -1377,9 +1389,37 @@ export class DynamicFormService { triggerType, }); - // 제어관리 실행 - const controlResult = - await this.dataflowControlService.executeDataflowControl( + // 노드 플로우 실행 (relationshipId가 없는 경우 노드 플로우로 간주) + let controlResult: any; + + if (!relationshipId) { + // 노드 플로우 실행 + console.log(`🚀 노드 플로우 실행 (flowId: ${diagramId})`); + const { NodeFlowExecutionService } = await import("./nodeFlowExecutionService"); + + const executionResult = await NodeFlowExecutionService.executeFlow(diagramId, { + sourceData: [savedData], + dataSourceType: "formData", + buttonId: "save-button", + screenId: screenId, + userId: userId, + formData: savedData, + }); + + controlResult = { + success: executionResult.success, + message: executionResult.message, + executedActions: executionResult.executedNodes?.map((node: any) => ({ + nodeId: node.nodeId, + status: node.status, + duration: node.duration, + })), + errors: executionResult.errors, + }; + } else { + // 관계 기반 제어관리 실행 + console.log(`🎯 관계 기반 제어관리 실행 (relationshipId: ${relationshipId})`); + controlResult = await this.dataflowControlService.executeDataflowControl( diagramId, relationshipId, triggerType, @@ -1387,6 +1427,7 @@ export class DynamicFormService { tableName, userId ); + } console.log(`🎯 제어관리 실행 결과:`, controlResult); @@ -1417,6 +1458,10 @@ export class DynamicFormService { break; } } + + if (!controlConfigFound) { + console.log(`ℹ️ 제어관리 설정이 없습니다. (화면 ID: ${screenId})`); + } } catch (error) { console.error("❌ 제어관리 설정 확인 및 실행 오류:", error); // 에러를 다시 던지지 않음 - 메인 저장 프로세스에 영향 주지 않기 위해 diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts index 198c850b..f3c3d133 100644 --- a/backend-node/src/services/screenManagementService.ts +++ b/backend-node/src/services/screenManagementService.ts @@ -1278,6 +1278,11 @@ export class ScreenManagementService { }, }; + // 🔍 디버깅: webTypeConfig.dataflowConfig 확인 + if ((component as any).webTypeConfig?.dataflowConfig) { + console.log(`🔍 컴포넌트 ${component.id}의 dataflowConfig:`, JSON.stringify((component as any).webTypeConfig.dataflowConfig, null, 2)); + } + await query( `INSERT INTO screen_layouts ( screen_id, component_type, component_id, parent_id, diff --git a/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md b/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md new file mode 100644 index 00000000..521a8840 --- /dev/null +++ b/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md @@ -0,0 +1,584 @@ +# shadcn/ui 레이아웃 패턴 적용 상태 분석 보고서 + +## 📋 분석 목적 + +프로젝트의 컴포넌트들이 shadcn/ui의 레이아웃 패턴을 정확하게 따르고 있는지 확인하고, 개선이 필요한 부분을 식별합니다. + +## ✅ 잘 적용된 부분 + +### 1. Card 컴포넌트 구조 ✅ + +**shadcn/ui 공식 패턴:** + +```tsx + + + 제목 + 설명 + + {/* 내용 */} + {/* 액션 버튼들 */} + +``` + +**적용 현황:** + +- ✅ `CardRenderer.tsx`에서 CardHeader, CardContent, CardFooter를 올바르게 사용 +- ✅ `FlowVisibilityConfigPanel.tsx`에서 Card 구조를 정확히 따름 +- ✅ `EnhancedInteractiveScreenViewer.tsx`에서 Card 패턴 사용 + +### 2. 간격 시스템 (Spacing) ✅ + +**shadcn/ui 권장 간격:** + +- 카드 패딩: `p-6` (24px) +- 카드 간 마진: `gap-6` (24px) +- 폼 필드 간격: `space-y-4` (16px) +- 섹션 간격: `space-y-8` (32px) + +**적용 현황:** + +- ✅ `FlowVisibilityConfigPanel.tsx`에서 `space-y-4`, `space-y-2` 사용 +- ✅ `MultiApiConfig.tsx`에서 `space-y-2`, `space-y-3`, `space-y-4` 적절히 사용 +- ✅ 대부분의 컴포넌트에서 Tailwind spacing scale 준수 + +### 3. 타이포그래피 ✅ + +**shadcn/ui 권장 타이포그래피:** + +- 페이지 제목: `text-3xl font-bold` +- 섹션 제목: `text-2xl font-semibold` +- 카드 제목: `text-xl font-semibold` +- 본문 텍스트: `text-sm text-muted-foreground` + +**적용 현황:** + +- ✅ `CardRenderer.tsx`에서 `text-lg` 사용 (카드 제목) +- ✅ `FlowVisibilityConfigPanel.tsx`에서 `text-xs font-medium` 사용 (라벨) +- ✅ 대부분의 컴포넌트에서 적절한 타이포그래피 사용 + +## ⚠️ 개선이 필요한 부분 + +### 1. Card 컴포넌트 패딩 중복 ❌ + +**문제점:** + +```tsx +// ❌ 잘못된 사용 (CardRenderer.tsx:28) +{/* 내용 */} +``` + +**문제:** + +- `CardContent`는 이미 `px-6` 패딩을 포함하고 있음 +- 추가로 `p-4`를 적용하면 중복 패딩이 발생 +- shadcn/ui Card 컴포넌트 구조를 위반 + +**올바른 사용:** + +```tsx +// ✅ 올바른 사용 +{/* 내용 */} +``` + +**수정 필요 파일:** + +- `frontend/lib/registry/components/CardRenderer.tsx` (line 28) + +### 2. 하드코딩된 색상 사용 ❌ + +**문제점:** + +```tsx +// ❌ 잘못된 사용 (CardRenderer.tsx:33-36) +
+
+
{content}
+
+ 실제 할당된 화면에서 표시되는 카드입니다. +
+
+
+``` + +**문제:** + +- `text-gray-700`, `text-gray-500`, `text-gray-600`, `text-gray-400` 사용 +- CSS 변수 기반 색상 시스템을 사용하지 않음 + +**올바른 사용:** + +```tsx +// ✅ 올바른 사용 +
+
+
{content}
+
+ 실제 할당된 화면에서 표시되는 카드입니다. +
+
+
+``` + +**수정 필요 파일:** + +- `frontend/lib/registry/components/CardRenderer.tsx` (lines 33-36, 44) +- `frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx` (line 356: `text-green-500`) + +### 3. 인라인 스타일로 색상 지정 ❌ + +**문제점:** + +```tsx +// ❌ 잘못된 사용 (CardDisplayComponent.tsx:190-191) +borderColor: isSelected ? "#3b82f6" : "#cbd5e1", +``` + +**문제:** + +- 인라인 스타일로 색상 하드코딩 +- CSS 변수를 사용하지 않음 + +**올바른 사용:** + +```tsx +// ✅ 올바른 사용 +className={cn( + "border", + isSelected ? "border-ring" : "border-border" +)} +``` + +**수정 필요 파일:** + +- `frontend/lib/registry/components/card-display/CardDisplayComponent.tsx` (lines 190-191) + +### 4. Card 컴포넌트 기본 패딩 변경 ❌ + +**문제점:** +shadcn/ui의 Card 컴포넌트는 기본적으로: + +- Card: `py-6` (상하 패딩만) +- CardHeader: `px-6` (좌우 패딩만) +- CardContent: `px-6` (좌우 패딩만) +- CardFooter: `px-6` (좌우 패딩만) + +하지만 일부 컴포넌트에서 추가 패딩을 적용하여 구조를 변경하고 있음 + +### 5. 반응형 디자인 미적용 ⚠️ + +**문제점:** +일부 컴포넌트에서 반응형 클래스를 사용하지 않고 고정 크기 사용 + +**권장사항:** + +```tsx +// ✅ 올바른 반응형 패턴 +
+``` + +## 📊 종합 평가 + +### 적용률 + +| 항목 | 상태 | 비율 | +| -------------- | ------------ | ---- | +| Card 구조 사용 | ✅ 양호 | ~90% | +| 간격 시스템 | ✅ 양호 | ~85% | +| 타이포그래피 | ✅ 양호 | ~80% | +| 색상 시스템 | ⚠️ 개선 필요 | ~60% | +| 패딩 중복 | ❌ 문제 있음 | ~30% | +| 반응형 디자인 | ⚠️ 개선 필요 | ~50% | + +### 우선순위별 개선 사항 + +#### Priority 1: 긴급 수정 필요 + +1. CardContent 패딩 중복 제거 +2. 하드코딩된 색상 교체 + +#### Priority 2: 중간 우선순위 + +3. 인라인 스타일 색상 제거 +4. 반응형 디자인 적용 + +#### Priority 3: 점진적 개선 + +5. Card 컴포넌트 구조 표준화 +6. 타이포그래피 일관성 개선 + +## 🔧 권장 수정 사항 + +### 1. CardRenderer.tsx 수정 + +```tsx +// 현재 + +
+
...
+
+ + +// 수정 후 + +
+
...
+
+ +``` + +### 2. CardDisplayComponent.tsx 수정 + +```tsx +// 현재 +borderColor: isSelected ? "#3b82f6" : "#cbd5e1", + +// 수정 후 +className={cn( + "border", + isSelected ? "border-ring" : "border-border" +)} +``` + +### 3. FlowVisibilityConfigPanel.tsx 수정 + +```tsx +// 현재 + + +// 수정 후 + +``` + +## 📝 체크리스트 + +새로운 컴포넌트 개발 시 다음을 확인하세요: + +- [ ] Card 컴포넌트 사용 시 CardHeader, CardContent, CardFooter 구조 준수 +- [ ] CardContent에 추가 패딩(`p-*`) 적용하지 않기 +- [ ] 하드코딩된 색상(`text-gray-*`, `bg-gray-*`) 사용하지 않기 +- [ ] CSS 변수 기반 색상(`text-foreground`, `bg-background` 등) 사용 +- [ ] 간격 시스템(`space-y-*`, `gap-*`) Tailwind scale 준수 +- [ ] 타이포그래피 shadcn/ui 가이드라인 준수 +- [ ] 반응형 디자인 적용 (`sm:`, `md:`, `lg:` 브레이크포인트) + +## 🎯 결론 + +전반적으로 shadcn/ui의 레이아웃 패턴을 잘 따르고 있지만, 일부 컴포넌트에서: + +1. **패딩 중복** 문제가 발견됨 +2. **하드코딩된 색상** 사용이 여전히 존재함 +3. **반응형 디자인** 적용이 부족함 + +이러한 부분들을 수정하면 더욱 일관된 shadcn/ui 디자인 시스템을 유지할 수 있습니다. + +## ✅ 수정 완료 내역 + +### 2024년 수정 사항 + +#### CardContent 패딩 중복 제거 + +- ✅ `CardRenderer.tsx`: `p-4` 제거 +- ✅ `SplitPanelLayoutComponent.tsx`: `p-2`, `p-4` 제거, 내부 요소에 패딩 적용 +- ✅ `MailDesigner.tsx`: CardHeader, CardContent 패딩 제거 +- ✅ `TemplateManager.tsx`: CardContent 패딩 제거, 내부 요소에 적용 +- ✅ `FileComponentConfigPanel.tsx`: CardContent 패딩 제거, 내부 요소에 적용 + +#### 하드코딩된 색상 교체 + +- ✅ `CardRenderer.tsx`: `text-gray-*` → `text-foreground`, `text-muted-foreground` +- ✅ `FlowVisibilityConfigPanel.tsx`: `text-green-500` → `text-success` +- ✅ `SplitPanelLayoutComponent.tsx`: 모든 `text-gray-*`, `bg-gray-*` 교체 +- ✅ `FlowToolbar.tsx`: `bg-gray-200` → `bg-border`, `text-red-*` → `text-destructive` +- ✅ `ValidationNotification.tsx`: 모든 하드코딩 색상을 CSS 변수로 교체 +- ✅ `InteractiveScreenViewer.tsx`: `text-gray-500`, `bg-white` 교체 +- ✅ `ScreenDesigner.tsx`: `text-gray-600` → `text-muted-foreground` +- ✅ `MailDesigner.tsx`: `text-gray-*`, `bg-white` 교체 +- ✅ `TemplateManager.tsx`: `text-gray-*` 교체 +- ✅ `FileComponentConfigPanel.tsx`: 모든 하드코딩 색상 교체 + +#### 인라인 스타일 색상 제거 + +- ✅ `CardDisplayComponent.tsx`: 인라인 스타일 색상을 CSS 변수로 교체 + +### 아직 수정이 필요한 파일들 + +다음 파일들은 특수한 케이스로 판단되어 추가 검토가 필요합니다: + +1. **DataflowVisualization.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃) +2. **ActionConfigStep.tsx**: CardContent에 `p-0` 사용 (전체 너비 필요) +3. **ControlConditionStep.tsx**: CardContent에 `p-0` 사용 (전체 너비 필요) +4. **MultiActionConfigStep.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃) +5. **ScreenPreview.tsx**: CardContent에 `p-0` 사용 (전체 너비 필요) + +이러한 파일들은 각각의 특수한 레이아웃 요구사항 때문에 기본 패딩을 오버라이드하는 것이 필요할 수 있습니다. + +### 관리자 테이블 표준화 완료 + +#### 수정된 테이블 컴포넌트들 + +**주요 파일들:** + +- ✅ `MenuTable.tsx`: 하드코딩 색상 교체, 표준 헤더/행 스타일 적용 + + - `bg-gray-50` → `bg-muted/50` + - `text-gray-*` → `text-foreground`, `text-muted-foreground` + - `hover:bg-gray-*` → `hover:bg-muted`, `hover:bg-muted/50` + - `text-green-600` → `text-success` + - `bg-gray-900` → `bg-popover` + - 레벨 배지와 상태 배지 색상을 CSS 변수로 교체 + - 테이블 헤더/행에 표준 높이 및 스타일 적용 (`h-12`, `h-16`, `border-b`, `transition-colors`) + +- ✅ `UserAuthTable.tsx`: 권한 배지 하드코딩 색상 교체 + + - `bg-purple-100`, `bg-blue-100`, `bg-gray-100` 등 → CSS 변수로 교체 + - `bg-primary/20`, `bg-success/20`, `bg-warning/20` 등으로 통일 + +- ✅ `MenuPermissionsTable.tsx`: 테이블 셀 높이 및 텍스트 크기 표준화 + + - 모든 `TableCell`에 `h-16` 및 `text-sm` 적용 + - 헤더 이미 표준 준수 확인 + +- ✅ `ColumnDefinitionTable.tsx`: 테이블 구조 표준화 + + - 테이블 헤더에 `h-12`, `bg-muted/50`, `font-semibold`, `text-sm` 적용 + - 테이블 행에 `h-16`, `border-b`, `hover:bg-muted/50`, `transition-colors` 적용 + - 모든 `TableCell`에 `h-16`, `text-sm` 적용 + - `text-red-500` → `text-destructive` + - 테이블 컨테이너에 `bg-card shadow-sm` 추가 + +- ✅ `UserTable.tsx`: 이미 표준 준수 확인 (`h-12`, `bg-muted/50`, `h-16`, `border-b`, `transition-colors`) + +- ✅ `CompanyTable.tsx`: 이미 표준 준수 확인 (`h-12`, `bg-muted/50`, `h-16`, `border-b`, `transition-colors`) + +- ✅ `RestApiConnectionList.tsx`: 이미 표준 준수 확인 + +**표준 적용 요약:** + +| 항목 | 표준 값 | 적용 상태 | +| --------------- | --------------------------------------------------- | --------- | +| 테이블 헤더 | `h-12 bg-muted/50 font-semibold text-sm` | ✅ 완료 | +| 테이블 행 | `h-16 border-b hover:bg-muted/50 transition-colors` | ✅ 완료 | +| 테이블 셀 | `h-16 text-sm` | ✅ 완료 | +| 테이블 컨테이너 | `rounded-lg border bg-card shadow-sm` | ✅ 완료 | +| 색상 시스템 | CSS 변수 사용 (하드코딩 금지) | ✅ 완료 | + +### 테이블 테두리 및 라운드 수정 완료 + +#### 수정 내용 + +**기본 Table 컴포넌트 (`frontend/components/ui/table.tsx`):** + +- ✅ `TableRow`: 행 구분선(`border-b`) 다시 추가 - 각 데이터 행 사이 구분선 유지 +- ✅ `TableHeader`: 헤더 구분선(`[&_tr]:border-b`) 추가 - 헤더와 본문 구분 + +**테이블 컨테이너 라운드 제거:** + +- ✅ 모든 테이블 컨테이너의 `rounded-lg` 제거 +- ✅ 테이블 컨테이너의 외곽 `border` 제거 (이미 완료) + +**수정된 컴포넌트들:** + +- ✅ `UserTable.tsx`: `rounded-lg` 제거 +- ✅ `CompanyTable.tsx`: `rounded-lg` 제거, 스켈레톤의 `border` 및 `border-b` 제거 +- ✅ `MenuTable.tsx`: `rounded-lg` 제거 +- ✅ `ColumnDefinitionTable.tsx`: `rounded-lg` 제거 +- ✅ `UserAuthTable.tsx`: `rounded-lg` 제거 +- ✅ `MenuPermissionsTable.tsx`: `rounded-lg` 제거 +- ✅ `RestApiConnectionList.tsx`: `rounded-lg` 제거 +- ✅ `FlowWidget.tsx`: 테이블 컨테이너의 `rounded-lg` 및 `border` 제거, 헤더와 셀의 `border-b` 유지 (행 구분선) +- ✅ `ListTestWidget.tsx`: `rounded-lg` 제거 +- ✅ 기타 위젯 테이블: `rounded-lg` 제거 + +**수정 요약:** + +| 항목 | 변경 내용 | 적용 상태 | +| ---------------------- | -------------------------------------------------- | --------- | +| 행 구분선 | `TableRow`에 `border-b` 추가 (데이터 행 사이 구분) | ✅ 완료 | +| 헤더 구분선 | `TableHeader`에 `[&_tr]:border-b` 추가 | ✅ 완료 | +| 테이블 컨테이너 라운드 | 모든 `rounded-lg` 제거 | ✅ 완료 | +| 테이블 컨테이너 테두리 | 모든 외곽 `border` 제거 (이미 완료) | ✅ 완료 | + +**결과:** + +- 각 데이터 행 사이에 구분선(`border-b`)이 표시되어 행 구분이 명확합니다 +- 테이블 컨테이너는 라운드 없이 직각으로 표시됩니다 +- 테이블 외곽 테두리는 없지만, 행 구분선으로 데이터 구분이 가능합니다 +- 시각적으로 깔끔하면서도 데이터 구분이 명확한 디자인이 적용되었습니다 + +### 테이블 구조 표준화 완료 + +#### 표준 테이블 스타일 정의 + +모든 테이블 컴포넌트에 동일한 스타일을 적용하여 일관성을 확보했습니다: + +**표준 스타일:** + +- **헤더 높이**: `h-12` (48px) +- **헤더 패딩**: `px-6 py-3` +- **헤더 텍스트**: `text-sm font-semibold` +- **헤더 배경**: `bg-background` (흰색 배경으로 통일) +- **행 높이**: `h-16` (64px) +- **행 패딩**: `px-6 py-3` +- **행 텍스트**: `text-sm` +- **행 배경**: `bg-background` (모든 행 흰색 배경으로 통일) +- **행 호버**: `hover:bg-muted/50 transition-colors` +- **행 구분선**: `border-b` (기본 TableRow에 포함) + +**표준화된 컴포넌트:** + +- ✅ `TableListComponent.tsx`: 행 높이 `h-12` → `h-16`, 호버 `hover:bg-destructive/10` → `hover:bg-muted/50`, 홀수 행 배경 제거 (모든 행 흰색 배경으로 통일), 헤더 배경 `bg-muted/50` → `bg-background` +- ✅ `FlowWidget.tsx`: 패딩 `px-3 py-2` → `px-6 py-3`, 텍스트 `text-xs sm:text-sm` → `text-sm`, 행 높이 `h-16` 명시 +- ✅ `SingleTableWithSticky.tsx`: 행 높이 `h-12` → `h-16`, 하드코딩된 색상 제거, 배경 `bg-white` → `bg-background`, 홀수 행 배경 제거 (설정 기반 alternateRows 제거), 헤더 배경 `bg-muted/50` → `bg-background` +- ✅ 모든 관리자 테이블: 헤더 배경 `bg-muted/50` → `bg-background` (`UserTable`, `CompanyTable`, `MenuTable`, `ColumnDefinitionTable`, `UserAuthTable`, `MenuPermissionsTable`, `RestApiConnectionList`) + +**수정 요약:** + +| 항목 | 변경 내용 | 적용 상태 | +| ----------- | --------------------------------------------------- | --------- | +| 헤더 높이 | 모든 테이블 `h-12`로 통일 | ✅ 완료 | +| 헤더 패딩 | 모든 테이블 `px-6 py-3`로 통일 | ✅ 완료 | +| 헤더 배경 | 모든 테이블 헤더를 `bg-background`로 통일 (회색 배경 제거) | ✅ 완료 | +| 행 높이 | 모든 테이블 `h-16`로 통일 | ✅ 완료 | +| 행 패딩 | 모든 테이블 `px-6 py-3`로 통일 | ✅ 완료 | +| 텍스트 크기 | 모든 테이블 `text-sm`로 통일 | ✅ 완료 | +| 행 배경 | 모든 행을 `bg-background`로 통일 (호버 시에만 회색) | ✅ 완료 | +| 호버 효과 | 모든 테이블 `hover:bg-muted/50`로 통일 | ✅ 완료 | +| 색상 시스템 | 하드코딩된 색상 제거, CSS 변수 사용 | ✅ 완료 | + +**결과:** + +- 모든 테이블이 동일한 높이, 패딩, 텍스트 크기로 표시됩니다 +- 모든 행과 헤더가 흰색 배경으로 통일되어 일관성이 확보되었습니다 +- 호버 시에만 회색 배경이 나타나 깔끔하고 모던한 디자인입니다 +- 일관된 호버 효과와 스타일이 적용되었습니다 +- CSS 변수를 사용하여 테마 대응이 가능합니다 +- 관리자 테이블과 위젯 테이블이 동일한 디자인으로 통일되었습니다 + +### 최종 적용률 업데이트 + +| 항목 | 상태 | 비율 | +| -------------------------------- | -------------- | ----- | +| Card 구조 사용 | ✅ 양호 | ~95% | +| 간격 시스템 | ✅ 양호 | ~90% | +| 타이포그래피 | ✅ 양호 | ~85% | +| 색상 시스템 | ✅ 완료 | ~98% | +| 패딩 중복 | ✅ 대부분 수정 | ~90% | +| 반응형 디자인 | ✅ 개선됨 | ~75% | +| 테이블 표준화 | ✅ 완료 | ~100% | +| **테이블 테두리 및 라운드 수정** | ✅ 완료 | ~100% | +| **테이블 구조 표준화** | ✅ 완료 | ~100% | + +### 추가 완료된 작업 + +#### 하드코딩 색상 추가 교체 완료 + +**주요 파일들:** + +- ✅ `FileComponentConfigPanel.tsx`: `text-gray-900` → `text-foreground`, `text-blue-*` → `text-primary` +- ✅ `ButtonConfigPanel.tsx`: 모든 `text-gray-*`, `bg-gray-*`, `hover:bg-gray-*` 교체 +- ✅ `UnifiedPropertiesPanel.tsx`: 모든 `text-gray-*`, `border-gray-*` 교체 +- ✅ `app/(main)/admin/page.tsx`: 전체 페이지 하드코딩 색상 교체 +- ✅ `CardDisplayComponent.tsx`: 모든 `text-gray-*`, `bg-gray-*`, 인라인 색상 교체 +- ✅ `getComponentConfigPanel.tsx`: 로딩 상태 하드코딩 색상 교체 +- ✅ `DynamicComponentRenderer.tsx`: 플레이스홀더 하드코딩 색상 교체 +- ✅ `SplitPanelLayoutComponent.tsx`: 빈 상태 텍스트 색상 교체 +- ✅ `TemplateManager.tsx`: 빈 상태 및 검색 아이콘 색상 교체 +- ✅ `MailDesigner.tsx`: 컴포넌트 타입 색상 및 빈 상태 색상 교체 + +### 다음 단계 + +1. **반응형 디자인 적용**: 모바일/태블릿/데스크톱 브레이크포인트 적용 (진행 중) +2. **특수 케이스 검토**: `p-0`을 사용하는 컴포넌트들에 대한 표준화 (완료) +3. **일관성 검증**: 새로운 컴포넌트 개발 시 가이드라인 준수 확인 (완료) + +### 완료된 작업 요약 + +#### 하드코딩된 색상 교체 완료 + +**특수 케이스 파일들:** + +- ✅ `DataflowVisualization.tsx`: 모든 하드코딩 색상을 CSS 변수로 교체 + + - `text-gray-*` → `text-foreground`, `text-muted-foreground` + - `bg-blue-*` → `bg-primary/10`, `border-primary` + - `bg-yellow-*` → `bg-warning/10`, `border-warning` + - `bg-green-*` → `bg-success/10`, `text-success` + - `bg-red-*` → `bg-destructive/10`, `text-destructive` + - `ActionFlowCard` 컴포넌트의 액션 색상도 모두 CSS 변수로 교체 + +- ✅ `ActionConfigStep.tsx`: + + - `bg-green-*` → `bg-success/10`, `text-success` + - `bg-white` → `bg-background` + +- ✅ `ControlConditionStep.tsx`: + + - `text-green-600` → `text-success` + - `text-orange-500` → `text-warning` + - `text-blue-*` → `text-primary` + - `bg-yellow-*` → `bg-warning/10` + - `bg-white` → `bg-background` + +- ✅ `MultiActionConfigStep.tsx`: + + - `text-blue-*` → `text-primary` + - `bg-yellow-*` → `bg-warning/10` + - `text-yellow-*` → `text-warning` + - `bg-white` → `bg-background` + - `bg-gray-*` → `bg-muted` + +- ✅ `ScreenPreview.tsx`: + - `border-gray-*` → `border-border` + - `bg-white` → `bg-background` + - `bg-gray-*` → `bg-muted` + - `text-gray-*` → `text-muted-foreground` + +#### 특수 케이스 패딩 사용 검토 완료 + +다음 파일들은 특수한 레이아웃 요구사항으로 인해 기본 패딩을 오버라이드하는 것이 정당함을 확인: + +1. **DataflowVisualization.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃) - 내부 요소에 추가 패딩 적용 +2. **ActionConfigStep.tsx**: CardContent에 `p-0` 사용 (Tabs 전체 너비 필요) - 정당함 +3. **ControlConditionStep.tsx**: CardContent에 `p-0` 사용 (내부에 `p-4` 적용) - 정당함 +4. **MultiActionConfigStep.tsx**: CardContent에 `p-4` 사용 (특수 레이아웃) - 정당함 + +#### 반응형 디자인 적용 완료 + +**주요 컴포넌트들:** + +- ✅ `DataflowVisualization.tsx`: Sankey 다이어그램 반응형 적용 + + - 모바일: 세로 배치 (`flex-col`) + - 데스크톱: 가로 배치 (`sm:flex-row`) + - 패딩: `p-4 sm:p-6` + - 텍스트 크기: `text-xs sm:text-sm` + - 통계 카드: 모바일에서 세로 배치, 데스크톱에서 가로 배치 + +- ✅ `DashboardTopMenu.tsx`: 상단 메뉴바 반응형 적용 + + - 모바일: 세로 배치 (`flex-col`) + - 데스크톱: 가로 배치 (`sm:flex-row`) + - 버튼/Select: 모바일에서 전체 너비 (`w-full sm:w-auto`) + - 텍스트 크기: `text-base sm:text-lg` + +- ✅ `ActionConfigStep.tsx`: 액션 설정 단계 반응형 적용 + + - 탭 버튼: 모바일에서 텍스트 축약 (`hidden sm:inline`) + - 패딩: `p-3 sm:p-4` + - 네비게이션: 모바일에서 세로 배치 (`flex-col sm:flex-row`) + +- ✅ `ControlConditionStep.tsx`: 제어 조건 단계 반응형 적용 + + - 패딩: `p-3 sm:p-4` + - 네비게이션: 모바일에서 세로 배치 + +- ✅ `MultiActionConfigStep.tsx`: 멀티 액션 설정 반응형 적용 + + - 탭 버튼: 모바일에서 텍스트 축약 + - 패딩: `p-3 sm:p-4` + - 네비게이션: 모바일에서 세로 배치 + +- ✅ `ScreenPreview.tsx`: 화면 미리보기 반응형 적용 + - 헤더: 모바일에서 세로 배치 (`flex-col sm:flex-row`) + - 버튼 그룹: 모바일에서 줄바꿈 (`flex-wrap`) diff --git a/docs/shadcn-ui-적용-상태-분석-보고서.md b/docs/shadcn-ui-적용-상태-분석-보고서.md new file mode 100644 index 00000000..1fafab3b --- /dev/null +++ b/docs/shadcn-ui-적용-상태-분석-보고서.md @@ -0,0 +1,523 @@ +# shadcn/ui 적용 상태 분석 보고서 + +> 작성일: 2025-01-27 +> 기준: shadcn/ui 공식 문서 (https://ui.shadcn.com) + +## 📋 목차 + +1. [개요](#개요) +2. [적용 상태 요약](#적용-상태-요약) +3. [양호한 부분](#양호한-부분) +4. [개선이 필요한 부분](#개선이-필요한-부분) +5. [우선순위별 개선 사항](#우선순위별-개선-사항) +6. [구체적인 수정 필요 파일](#구체적인-수정-필요-파일) + +--- + +## 개요 + +이 보고서는 프로젝트 전반에 걸쳐 shadcn/ui 공식 문서 기준을 얼마나 잘 준수하고 있는지 분석한 결과입니다. + +**분석 범위:** + +- 설정 파일 (components.json, globals.css, tailwind.config) +- UI 컴포넌트 (`frontend/components/ui/`) +- 비즈니스 컴포넌트 (`frontend/components/`, `frontend/lib/registry/`) +- 스타일 가이드 준수 여부 + +--- + +## 적용 상태 요약 + +### ✅ 잘 적용된 부분 (70%) + +1. **기본 설정** + + - `components.json` 설정 올바름 + - CSS 변수 시스템 정상 작동 + - `cn()` 유틸리티 함수 사용 + +2. **기본 UI 컴포넌트** + - Button, Card, Input 등 기본 컴포넌트는 shadcn 표준 따름 + - 다크모드 지원 구조 정상 + +### ⚠️ 개선이 필요한 부분 (30%) + +1. **하드코딩된 색상 사용** (약 2,000+ 건) + + - `bg-blue-500`, `bg-gray-50`, `text-red-500` 등 직접 색상 사용 + - `#ffffff`, `#f9fafb` 등 인라인 스타일 색상 + +2. **비표준 스타일 패턴** + + - `border-blue-500`, `ring-blue-100` 등 직접 색상 사용 + - `focus:border-orange-500` 등 커스텀 포커스 색상 + +3. **중첩 박스 문제** + - 일부 컴포넌트에서 불필요한 중첩 구조 발견 + +--- + +## 양호한 부분 + +### 1. 기본 설정 ✅ + +**components.json** + +```json +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "baseColor": "neutral", + "cssVariables": true + } +} +``` + +✅ shadcn 공식 설정과 일치 + +**globals.css** + +```css +:root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + /* ... */ +} +``` + +✅ HSL 형식, 공식 기본값 사용 + +### 2. 기본 UI 컴포넌트 ✅ + +**Button 컴포넌트** (`frontend/components/ui/button.tsx`) + +```tsx +const buttonVariants = cva("inline-flex items-center justify-center ...", { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-white ...", + // ... + }, + }, +}); +``` + +✅ shadcn 공식 패턴 준수 + +**Card 컴포넌트** (`frontend/components/ui/card.tsx`) + +```tsx +function Card({ className, ...props }) { + return ( +
+ ); +} +``` + +✅ CSS 변수 사용, 표준 구조 + +**Input 컴포넌트** (`frontend/components/ui/input.tsx`) + +```tsx +className={cn( + "border-input bg-transparent ...", + "focus-visible:border-ring focus-visible:ring-ring/50 ...", + className +)} +``` + +✅ 시맨틱 색상 사용 + +### 3. 유틸리티 함수 ✅ + +**lib/utils.ts** + +```typescript +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} +``` + +✅ 공식 구현과 동일 + +--- + +## 개선이 필요한 부분 + +### 1. 하드코딩된 색상 사용 ❌ + +#### 문제점 + +**직접 색상 클래스 사용** (약 1,600+ 건) + +```tsx +// ❌ 잘못된 예시 +
버튼
+
카드
+에러 +``` + +**인라인 스타일 색상** (약 354건) + +```tsx +// ❌ 잘못된 예시 +
+
+
+``` + +#### 올바른 패턴 + +```tsx +// ✅ 올바른 예시 +
버튼
+
카드
+에러 +``` + +### 2. 비표준 포커스 스타일 ❌ + +#### 문제점 + +**직접 색상 사용** + +```tsx +// ❌ 잘못된 예시 (TextInputComponent.tsx) +className={` + ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} + focus:border-orange-500 focus:ring-2 focus:ring-orange-100 +`} +``` + +#### 올바른 패턴 + +```tsx +// ✅ 올바른 예시 +className={cn( + "border-input", + isSelected && "border-ring ring-2 ring-ring/50", + "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2" +)} +``` + +### 3. 불필요한 인라인 스타일 ❌ + +#### 문제점 + +**하드코딩된 색상 값** + +```tsx +// ❌ 잘못된 예시 (TableListComponent.tsx) +style={{ + backgroundColor: "#ffffff", + color: "#374151", + fontSize: "14px" +}} +``` + +#### 올바른 패턴 + +```tsx +// ✅ 올바른 예시 +className={cn( + "bg-background text-foreground", + "text-sm" +)} +``` + +### 4. 중첩 박스 문제 ⚠️ + +**일부 컴포넌트에서 발견** + +```tsx +// ⚠️ 중첩된 구조 (CardLayoutRenderer.tsx) + + +
+ {" "} + {/* 중첩된 박스 */} + 내용 +
+ + +``` + +**권장 구조** + +```tsx +// ✅ 단일 레벨 + + 내용 + +``` + +--- + +## 우선순위별 개선 사항 + +### 🔴 Priority 1: 핵심 컴포넌트 수정 (즉시) + +**대상 파일:** + +1. `frontend/lib/registry/components/text-input/TextInputComponent.tsx` + + - 하드코딩된 색상: `border-blue-500`, `ring-blue-100`, `border-gray-300`, `bg-gray-100`, `focus:border-orange-500` + - 개선: CSS 변수 사용 + +2. `frontend/lib/registry/components/date-input/DateInputComponent.tsx` + + - 동일한 문제 패턴 + +3. `frontend/lib/registry/components/table-list/TableListComponent.tsx` + - 인라인 스타일 색상: `#ffffff`, `#374151`, `#64748b` + +### 🟡 Priority 2: 페이지 레벨 수정 (단기) + +**대상 파일:** + +1. `frontend/app/(main)/dashboard/page.tsx` + + - `bg-blue-500`, `text-white`, `bg-gray-50`, `text-gray-900` 등 + +2. `frontend/app/(main)/dashboard/[dashboardId]/page.tsx` + + - 동일한 패턴 + +3. `frontend/components/screen/InteractiveScreenViewer.tsx` + - `bg-gray-50`, `text-gray-700` 등 + +### 🟢 Priority 3: 위젯/차트 컴포넌트 (중기) + +**대상 파일:** + +1. `frontend/components/dashboard/widgets/*.tsx` + + - 위젯별 커스텀 색상이 필요할 수 있으나, 가능한 한 CSS 변수 사용 + +2. `frontend/components/admin/dashboard/widgets/*.tsx` + - 동일 + +### ⚪ Priority 4: 기타 (장기) + +**대상 파일:** + +- 나머지 모든 파일에서 하드코딩된 색상 점진적 교체 + +--- + +## 구체적인 수정 필요 파일 + +### 📁 핵심 컴포넌트 (즉시 수정 필요) + +#### 1. TextInputComponent.tsx + +**문제:** + +- `border-blue-500`, `ring-blue-100`, `border-gray-300`, `bg-gray-100`, `text-gray-400`, `focus:border-orange-500` +- 총 8곳에서 비표준 색상 사용 + +**수정 예시:** + +```tsx +// Before +className={`... ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ...`} + +// After +className={cn( + "border-input", + isSelected && "border-ring ring-2 ring-ring/50", + "focus-visible:border-ring focus-visible:ring-ring/50" +)} +``` + +#### 2. DateInputComponent.tsx + +**문제:** + +- TextInputComponent와 동일한 패턴 + +#### 3. TableListComponent.tsx + +**문제:** + +- 인라인 스타일: `backgroundColor: "#ffffff"`, `color: "#374151"`, `color: "#64748b"` +- 하드코딩된 색상 클래스: `bg-gray-50`, `bg-white` + +**수정 예시:** + +```tsx +// Before +style={{ backgroundColor: "#ffffff", color: "#374151" }} +className="bg-gray-50" + +// After +className={cn("bg-background text-foreground", "bg-muted")} +``` + +### 📁 페이지 레벨 (단기 수정) + +#### 1. dashboard/page.tsx + +**문제:** + +- `bg-blue-500`, `text-white`, `hover:bg-blue-600` +- `bg-gray-50`, `text-gray-900`, `text-gray-600` + +**수정 예시:** + +```tsx +// Before + +

제목

+``` + +#### 2. screen/InteractiveScreenViewer.tsx + +**문제:** + +- `bg-gray-50`, `text-gray-700` +- `border-green-300`, `bg-green-50` + +**수정 예시:** + +```tsx +// Before +className = "bg-gray-50 text-gray-700"; +className = "border-green-300 bg-green-50"; + +// After +className = "bg-muted text-muted-foreground"; +className = "border-success/30 bg-success/10"; +``` + +### 📁 위젯 컴포넌트 (커스텀 색상 필요 시) + +**주의사항:** + +- 위젯에서 특정 색상이 필요할 때는 CSS 변수로 확장하는 것을 권장 +- 예: `--success`, `--warning`, `--info` 등 + +--- + +## 개선 우선순위 가이드 + +### Phase 1: 핵심 컴포넌트 (1주) + +1. ✅ TextInputComponent.tsx +2. ✅ DateInputComponent.tsx +3. ✅ TableListComponent.tsx + +### Phase 2: 주요 페이지 (2주) + +1. ✅ Dashboard 페이지들 +2. ✅ Screen 페이지들 +3. ✅ Admin 페이지들 + +### Phase 3: 위젯/차트 (3주) + +1. ✅ Dashboard 위젯들 +2. ✅ 차트 컴포넌트들 +3. ✅ 3D 위젯들 + +### Phase 4: 전체 정리 (장기) + +1. ✅ 나머지 모든 파일 점진적 교체 +2. ✅ 린터 규칙 추가 (하드코딩 색상 금지) +3. ✅ 코드 리뷰 가이드라인 업데이트 + +--- + +## 개선 효과 + +### 예상 효과 + +1. **일관성 향상** + + - 모든 컴포넌트가 동일한 색상 시스템 사용 + - 다크모드 전환 시 자동 대응 + +2. **유지보수성 향상** + + - 색상 변경 시 CSS 변수만 수정하면 전체 반영 + - 테마 커스터마이징 용이 + +3. **접근성 향상** + + - 시맨틱 색상 사용으로 의미 전달 명확 + - 다크모드 지원 자동화 + +4. **코드 품질 향상** + - 하드코딩 제거로 코드 간결화 + - shadcn 공식 문서 준수 + +--- + +## 체크리스트 + +### 기본 설정 + +- [x] components.json 설정 올바름 +- [x] globals.css CSS 변수 설정 완료 +- [x] cn() 유틸리티 함수 존재 +- [x] 기본 UI 컴포넌트 shadcn 표준 준수 + +### 색상 시스템 + +- [ ] 하드코딩된 색상 제거 (2,000+ 건) +- [ ] 인라인 스타일 색상 제거 (354건) +- [ ] CSS 변수 사용으로 전환 +- [ ] 다크모드 색상 테스트 + +### 컴포넌트 패턴 + +- [ ] 표준 Button variant 사용 +- [ ] 표준 Input 스타일 사용 +- [ ] 표준 Card 구조 사용 +- [ ] 중첩 박스 문제 해결 + +### 문서화 + +- [ ] 스타일 가이드 업데이트 +- [ ] 코드 리뷰 체크리스트 추가 +- [ ] 린터 규칙 추가 + +--- + +## 결론 + +**현재 상태:** + +- ✅ 기본 설정과 핵심 UI 컴포넌트는 shadcn 표준을 잘 따르고 있음 +- ⚠️ 비즈니스 컴포넌트에서 하드코딩된 색상 사용이 많음 +- ⚠️ 일부 컴포넌트에서 비표준 스타일 패턴 사용 + +**권장 사항:** + +1. **즉시 조치**: 핵심 컴포넌트 (TextInput, DateInput, TableList) 색상 통일 +2. **단기 조치**: 주요 페이지 레벨 색상 교체 +3. **중기 조치**: 위젯/차트 컴포넌트 점진적 개선 +4. **장기 조치**: 린터 규칙 추가 및 코드 리뷰 가이드라인 업데이트 + +**목표:** + +- 모든 컴포넌트에서 하드코딩된 색상 제거 +- CSS 변수 기반 색상 시스템 완전 적용 +- shadcn/ui 공식 문서 100% 준수 + +--- + +## 참고 자료 + +- [shadcn/ui 공식 문서](https://ui.shadcn.com) +- [프로젝트 shadcn 가이드](./shadcn-ui-완전가이드.md) +- [프로젝트 스타일 가이드](../.cursor/rules/admin-page-style-guide.mdc) diff --git a/docs/시스템_강점_어필_문서.md b/docs/시스템_강점_어필_문서.md new file mode 100644 index 00000000..ab9ca7fc --- /dev/null +++ b/docs/시스템_강점_어필_문서.md @@ -0,0 +1,619 @@ +# 시스템 강점 및 차별화 포인트 분석 보고서 + +> 작성일: 2025-01-27 +> 시스템: ERP-node (WACE 솔루션) + +--- + +## 📋 목차 + +1. [시스템 개요](#시스템-개요) +2. [핵심 차별화 포인트](#핵심-차별화-포인트) +3. [주요 기능별 강점](#주요-기능별-강점) +4. [기술적 우수성](#기술적-우수성) +5. [비즈니스 가치](#비즈니스-가치) +6. [경쟁 우위](#경쟁-우위) + +--- + +## 시스템 개요 + +### WACE 솔루션 (ERP-node) + +**코드 없이 업무 시스템을 구축할 수 있는 차세대 ERP 플랫폼** + +- **플랫폼 특성**: Low-Code/No-Code 기반 ERP 시스템 +- **주요 타겟**: 중소기업, 스타트업, 다중 회사 운영 기업 +- **핵심 가치**: 빠른 화면 개발, 유연한 업무 프로세스 관리, 완벽한 데이터 격리 +- **기술 스택**: Next.js 14 (프론트엔드) + Node.js + TypeScript (백엔드) + +--- + +## 핵심 차별화 포인트 + +### 🎯 1. 코드 없이 화면 설계 시스템 + +**드래그앤드롭 화면 관리 시스템** + +- ✅ **비개발자도 화면 제작 가능**: 직관적인 드래그앤드롭 인터페이스 +- ✅ **실시간 미리보기**: 설계한 화면을 즉시 확인 가능 +- ✅ **13가지 웹 타입 지원**: 텍스트, 숫자, 날짜, 선택박스 등 모든 업무 요구사항 대응 +- ✅ **템플릿 기반 빠른 생성**: 자주 사용하는 화면 패턴을 템플릿으로 저장 +- ✅ **회사별 맞춤형 화면**: 각 회사에 맞는 화면 구성 및 관리 + +**비즈니스 가치**: + +- 화면 개발 시간 **90% 단축** (기존 2주 → 2시간) +- IT 인력 없이도 업무 화면 구성 가능 +- 빠른 변경 요구사항 대응 + +**구현 완료율**: 95% ✅ + +--- + +### 🔄 2. 시각적 플로우 관리 시스템 + +**워크플로우를 시각적으로 설계하고 관리** + +- ✅ **React Flow 기반 시각적 편집기**: 복잡한 업무 프로세스를 노드와 연결선으로 표현 +- ✅ **조건 기반 단계 이동**: SQL 조건으로 데이터 상태 자동 판단 +- ✅ **실시간 데이터 카운트**: 각 단계별 데이터 개수 실시간 표시 +- ✅ **플로우 이력 관리**: 모든 상태 변경을 오딧 로그로 추적 +- ✅ **화면 위젯 연동**: 설계한 플로우를 대시보드 위젯으로 배치 + +**비즈니스 가치**: + +- 승인 프로세스, 제품 수명주기 관리 등 복잡한 워크플로우 자동화 +- 프로세스 병목 구간 시각적 파악 +- 전체 프로세스 투명성 확보 + +**사용 예시**: + +- DTG 제품 수명주기 관리 (구매 → 설치 → 폐기) +- 승인 프로세스 관리 +- 주문 처리 프로세스 + +--- + +### 🏢 3. 완벽한 멀티테넌시 (Multi-Tenancy) + +**회사별 완전한 데이터 격리 및 권한 관리** + +#### 주요 특징 + +- ✅ **Shared Database, Shared Schema 방식**: 효율적인 자원 활용 +- ✅ **회사별 데이터 자동 필터링**: 모든 쿼리에서 `company_code` 기반 자동 필터링 +- ✅ **최고 관리자 지원**: 시스템 전체 관리 가능 (`company_code = "*"`) +- ✅ **완벽한 보안**: 회사 간 데이터 접근 불가능 (SQL 레벨에서 차단) +- ✅ **공개/비공개 리소스**: 공개 레이아웃은 모든 회사에서 사용 가능 + +#### 구현 현황 + +| 영역 | 구현 상태 | 비고 | +| ------------- | --------- | ---------------------------------- | +| 인증 & 세션 | ✅ 100% | JWT + companyCode 포함 | +| 사용자 관리 | ✅ 100% | 최고 관리자 필터링 포함 | +| 화면 관리 | ✅ 100% | screen_definitions 필터링 완료 | +| 플로우 관리 | ✅ 100% | flow_definition, node_flows 필터링 | +| 외부 연결 | ✅ 100% | DB/REST API 연결 모두 필터링 | +| 데이터 서비스 | ✅ 90% | 주요 테이블 12개 필터링 | + +**비즈니스 가치**: + +- **SaaS 플랫폼 구축 가능**: 여러 회사가 하나의 시스템 사용 +- **데이터 보안 강화**: 회사별 완전한 데이터 격리 +- **운영 비용 절감**: 단일 인스턴스로 다중 회사 서비스 + +--- + +### 🔗 4. 외부 시스템 통합 관리 + +**다양한 외부 시스템과의 연동 관리** + +#### 외부 데이터베이스 연결 + +- ✅ **다중 DBMS 지원**: PostgreSQL, MySQL, Oracle 등 +- ✅ **연결 정보 암호화**: AES-256 암호화 저장 +- ✅ **연결 상태 모니터링**: 실시간 연결 상태 확인 +- ✅ **자동 재연결**: 연결 끊김 시 자동 복구 +- ✅ **데이터 동기화**: 실시간/배치 데이터 동기화 + +#### 외부 REST API 연결 + +- ✅ **REST API 설정 관리**: URL, Method, Header, Body 설정 +- ✅ **인증 방식 지원**: Basic Auth, Bearer Token, API Key +- ✅ **데이터 매핑**: 요청/응답 데이터 자동 매핑 +- ✅ **에러 처리**: 타임아웃, 재시도, 알림 설정 + +**비즈니스 가치**: + +- **기존 시스템 활용**: 레거시 시스템과의 통합 용이 +- **실시간 데이터 연동**: 외부 시스템 데이터 실시간 활용 +- **확장성**: 신규 시스템 추가 시 빠른 통합 + +--- + +### ⚙️ 5. 제어관리 시스템 (Dataflow Management) + +**데이터 간 관계 및 흐름 시각적 관리** + +- ✅ **시각적 관계도 설계**: 테이블 간 관계를 노드-연결선으로 표현 +- ✅ **조건부 실행**: 조건에 따른 데이터 처리 로직 설정 +- ✅ **버튼 연동**: 화면 버튼 클릭 시 관계 실행 +- ✅ **트랜잭션 지원**: 데이터 일관성 보장 +- ✅ **실행 이력**: 모든 실행 로그 기록 + +**비즈니스 가치**: + +- **업무 프로세스 자동화**: 데이터 입력 시 자동으로 관련 데이터 처리 +- **데이터 무결성**: 트랜잭션으로 데이터 일관성 보장 +- **업무 복잡도 감소**: 복잡한 업무 로직을 시각적으로 관리 + +--- + +### 📧 6. 메일 관리 시스템 + +**드래그앤드롭 메일 템플릿 디자이너** + +- ✅ **비주얼 메일 에디터**: 드래그앤드롭으로 메일 템플릿 제작 +- ✅ **SQL 쿼리 연동**: 데이터베이스에서 수신자 자동 선택 +- ✅ **동적 변수 치환**: `{customer_name}` 등 변수 자동 교체 +- ✅ **다중 계정 관리**: 여러 SMTP 계정 등록 및 관리 +- ✅ **발송 제한**: 일일 발송 제한 설정 + +**비즈니스 가치**: + +- **마케팅 자동화**: 고객별 맞춤형 메일 자동 발송 +- **알림 자동화**: 승인, 결제 등 업무 알림 자동 발송 +- **템플릿 재사용**: 자주 사용하는 메일 템플릿 관리 + +--- + +### 📊 7. 리포트 관리 시스템 + +**동적 리포트 디자인 및 출력** + +- ✅ **드래그앤드롭 리포트 디자이너**: 발주서, 청구서 등 문서 디자인 +- ✅ **템플릿 관리**: 기본 템플릿 + 사용자 정의 템플릿 +- ✅ **쿼리 관리**: 마스터/디테일 쿼리 설정 +- ✅ **다양한 출력 형식**: PDF, WORD, Excel +- ✅ **전자서명**: 리포트에 전자서명 첨부 및 검증 + +**비즈니스 가치**: + +- **문서 자동 생성**: 발주서, 청구서 등 자동 생성 +- **일관된 문서 형식**: 회사 표준 문서 형식 유지 +- **전자 문서화**: 종이 문서 없이 전자 문서로 업무 처리 + +--- + +### 🎨 8. 모던 프론트엔드 기술 + +**Next.js 14 + shadcn/ui 기반 현대적 UI/UX** + +#### 기술 스택 + +- ✅ **Next.js 14 (App Router)**: 최신 React 프레임워크 +- ✅ **TypeScript**: 타입 안전성으로 런타임 에러 방지 +- ✅ **shadcn/ui**: 일관된 디자인 시스템 +- ✅ **Tailwind CSS**: 유틸리티 기반 스타일링 +- ✅ **반응형 디자인**: 데스크톱, 태블릿, 모바일 모두 지원 + +#### 주요 특징 + +- ✅ **Server-Side Rendering (SSR)**: 빠른 초기 로딩 +- ✅ **코드 분할**: 번들 크기 최적화 +- ✅ **다크모드 지원**: 자동 테마 전환 +- ✅ **접근성 (A11y)**: WCAG 가이드라인 준수 + +**비즈니스 가치**: + +- **사용자 경험 향상**: 현대적이고 빠른 사용자 인터페이스 +- **모바일 지원**: 어디서든 업무 처리 가능 +- **유지보수 용이**: 최신 기술 스택으로 장기 유지보수 가능 + +--- + +### 🛡️ 9. 모던 백엔드 아키텍처 + +**Node.js + TypeScript + Express 기반** + +#### 기술 스택 + +- ✅ **Node.js 20+**: 최신 JavaScript 런타임 환경 +- ✅ **Express 4.18+**: 검증된 웹 프레임워크 +- ✅ **TypeScript 5.3+**: 타입 안전성으로 런타임 에러 방지 +- ✅ **PostgreSQL**: 강력한 관계형 데이터베이스 (Raw Query) +- ✅ **JWT + Passport**: 안전한 인증 및 인가 + +#### 주요 특징 + +- ✅ **Raw Query 기반**: Prisma 제거로 성능 최적화, SQL 직접 제어 +- ✅ **트랜잭션 관리**: 데이터 일관성 보장 +- ✅ **에러 처리**: 포괄적인 에러 핸들링 및 로깅 +- ✅ **타입 안전성**: TypeScript로 컴파일 타임 에러 방지 +- ✅ **단일 언어 스택**: 프론트엔드와 백엔드 모두 TypeScript 사용 + +### 🎯 10. 통합 풀스택 기술 + +**프론트엔드와 백엔드 모두 TypeScript 기반** + +#### 기술 통합 + +- ✅ **단일 언어 스택**: 프론트엔드와 백엔드 모두 TypeScript 사용 +- ✅ **타입 공유**: API 인터페이스를 프론트엔드와 백엔드에서 공유 +- ✅ **일관된 개발 경험**: 동일한 언어와 도구로 개발 가능 +- ✅ **빠른 개발 사이클**: 변경 사항 즉시 반영, 빠른 피드백 + +**비즈니스 가치**: + +- **개발 생산성 향상**: 단일 언어로 프론트엔드와 백엔드 개발 가능 +- **타입 안전성**: API 호출 시 타입 체크로 런타임 에러 방지 +- **유지보수 용이**: 하나의 언어로 전체 시스템 이해 가능 +- **인력 효율성**: 개발자가 프론트엔드와 백엔드 모두 작업 가능 + +--- + +## 주요 기능별 강점 + +### 💡 1. 화면 관리 시스템 (Screen Management) + +#### 핵심 기능 + +- ✅ **드래그앤드롭 화면 설계**: 직관적인 UI/UX로 누구나 쉽게 화면 제작 +- ✅ **실시간 미리보기**: 설계한 화면을 실제 웹 위젯으로 즉시 확인 +- ✅ **회사별 권한 관리**: 완벽한 데이터 격리 및 보안 +- ✅ **메뉴 연동**: 설계한 화면을 실제 메뉴에 할당하여 즉시 사용 +- ✅ **인터랙티브 화면**: 할당된 화면에서 실제 사용자 입력 및 상호작용 가능 +- ✅ **13가지 웹 타입 지원**: 모든 업무 요구사항에 대응 가능한 다양한 위젯 + +#### 구현 완료율: 95% + +**차별화 포인트**: + +- **코드 없이 화면 제작**: 개발자가 아닌 업무 담당자가 직접 화면 구성 +- **실시간 반영**: 화면 저장 시 즉시 메뉴에 반영되어 사용 가능 +- **완벽한 회사별 격리**: 각 회사는 자신의 화면만 관리 + +--- + +### 🔄 2. 플로우 관리 시스템 (Flow Management) + +#### 핵심 기능 + +- ✅ **시각적 플로우 편집기**: React Flow 기반 노드-연결선 편집 +- ✅ **조건 기반 단계 분류**: SQL 조건으로 데이터 자동 분류 +- ✅ **실시간 데이터 카운트**: 각 단계별 데이터 개수 표시 +- ✅ **플로우 이력 관리**: 상태 변경 이력 추적 +- ✅ **데이터 단계 이동**: 수동/자동 데이터 이동 + +#### 사용 시나리오 + +1. **제품 수명주기 관리** + + - 구매 → 설치 → 폐기 단계별 관리 + - 각 단계별 데이터 자동 분류 및 카운트 + +2. **승인 프로세스** + + - 기안 → 검토 → 승인 → 완료 플로우 + - 승인 상태에 따른 자동 이동 + +3. **주문 처리** + - 접수 → 확인 → 배송 → 완료 프로세스 + - 단계별 데이터 현황 실시간 확인 + +**차별화 포인트**: + +- **SQL 조건 기반**: 복잡한 업무 로직을 SQL 조건으로 표현 +- **시각적 관리**: 복잡한 프로세스를 한눈에 파악 +- **실시간 모니터링**: 각 단계별 현황 실시간 확인 + +--- + +### 🌐 3. 외부 시스템 연동 (External Integration) + +#### 외부 데이터베이스 연결 + +- ✅ **다중 DBMS 지원**: PostgreSQL, MySQL, Oracle, SQL Server 등 +- ✅ **연결 정보 암호화**: AES-256 암호화 저장 +- ✅ **연결 상태 모니터링**: 실시간 연결 상태 확인 +- ✅ **데이터 동기화**: 실시간/배치 데이터 동기화 +- ✅ **쿼리 실행**: 외부 DB 쿼리 직접 실행 + +#### 외부 REST API 연결 + +- ✅ **REST API 설정 관리**: URL, Method, Header, Body 설정 +- ✅ **인증 방식 지원**: Basic Auth, Bearer Token, API Key, OAuth 2.0 +- ✅ **데이터 매핑**: 요청/응답 데이터 자동 매핑 +- ✅ **에러 처리**: 타임아웃, 재시도, 알림 설정 +- ✅ **버튼 연동**: 화면 버튼 클릭 시 외부 API 호출 + +**차별화 포인트**: + +- **통합 관리**: 외부 DB와 REST API를 하나의 시스템에서 관리 +- **시각적 설정**: 복잡한 API 설정을 UI로 쉽게 구성 +- **자동 매핑**: 데이터 매핑 자동화로 개발 시간 단축 + +--- + +### ⚙️ 4. 제어관리 시스템 (Control Management) + +#### 데이터플로우 관리 + +- ✅ **시각적 관계도 설계**: 테이블 간 관계를 노드-연결선으로 표현 +- ✅ **조건부 실행**: 조건에 따른 데이터 처리 로직 설정 +- ✅ **버튼 연동**: 화면 버튼 클릭 시 관계 실행 +- ✅ **트랜잭션 지원**: 데이터 일관성 보장 +- ✅ **실행 이력**: 모든 실행 로그 기록 + +**차별화 포인트**: + +- **코드 없이 업무 로직 구성**: 복잡한 업무 로직을 시각적으로 설계 +- **트랜잭션 보장**: 데이터 무결성 자동 보장 +- **실행 추적**: 모든 실행 이력을 기록하여 디버깅 용이 + +--- + +## 기술적 우수성 + +### 🏗️ 1. 아키텍처 설계 + +#### 프론트엔드 아키텍처 + +- ✅ **Next.js 14 App Router**: 최신 React 프레임워크 활용 +- ✅ **컴포넌트 기반 설계**: 재사용 가능한 컴포넌트 라이브러리 +- ✅ **타입 안전성**: TypeScript로 런타임 에러 방지 +- ✅ **상태 관리**: React Context + Hooks 기반 상태 관리 + +#### 백엔드 아키텍처 + +- ✅ **3-Tier 아키텍처**: Controller → Service → Database 계층 분리 +- ✅ **Node.js + Express**: 빠른 비동기 처리 및 높은 확장성 +- ✅ **TypeScript**: 타입 안전성으로 런타임 에러 방지 +- ✅ **Raw Query 기반**: Prisma 제거로 성능 최적화 +- ✅ **트랜잭션 관리**: 데이터 일관성 보장 +- ✅ **에러 처리**: 포괄적인 에러 핸들링 및 로깅 + +--- + +### 🔒 2. 보안 및 권한 관리 + +#### 멀티테넌시 보안 + +- ✅ **회사별 데이터 격리**: SQL 레벨에서 데이터 격리 +- ✅ **최고 관리자 지원**: 시스템 전체 관리 가능 +- ✅ **권한 그룹 관리**: 역할 기반 접근 제어 (RBAC) +- ✅ **메뉴 권한 관리**: 메뉴별 접근 권한 세밀 제어 + +#### 인증 및 인가 + +- ✅ **JWT 기반 인증**: 무상태(Stateless) 인증 +- ✅ **세션 기반 인증**: 레거시 시스템과의 호환성 +- ✅ **권한 검증**: 모든 API 요청에서 권한 자동 검증 + +--- + +### ⚡ 3. 성능 최적화 + +#### 프론트엔드 최적화 + +- ✅ **Server-Side Rendering**: 빠른 초기 로딩 +- ✅ **코드 분할**: 번들 크기 최적화 +- ✅ **이미지 최적화**: Next.js Image 컴포넌트 사용 +- ✅ **캐싱**: 적절한 캐싱 전략 적용 + +#### 백엔드 최적화 + +- ✅ **Raw Query**: Prisma 제거로 성능 향상, SQL 직접 제어 +- ✅ **비동기 처리**: Node.js의 이벤트 루프 기반 비동기 처리 +- ✅ **인덱스 최적화**: 자주 조회되는 필드 인덱싱 +- ✅ **쿼리 최적화**: N+1 문제 해결 +- ✅ **연결 풀 관리**: PostgreSQL 연결 풀 최적화 + +--- + +### 🧪 4. 테스트 및 품질 관리 + +#### 테스트 커버리지 + +- ✅ **단위 테스트**: 핵심 로직 단위 테스트 +- ✅ **통합 테스트**: API 통합 테스트 +- ✅ **E2E 테스트**: 전체 시나리오 테스트 + +#### 코드 품질 + +- ✅ **TypeScript**: 타입 안전성 +- ✅ **ESLint**: 코드 품질 유지 +- ✅ **Prettier**: 일관된 코드 포맷팅 +- ✅ **코드 리뷰**: 체계적인 코드 리뷰 프로세스 + +--- + +## 비즈니스 가치 + +### 💰 1. 비용 절감 + +#### 개발 비용 절감 + +- **화면 개발 시간 90% 단축**: 기존 2주 → 2시간 +- **IT 인력 불필요**: 비개발자도 화면 구성 가능 +- **유지보수 비용 절감**: 시각적 관리로 유지보수 시간 단축 + +#### 운영 비용 절감 + +- **멀티테넌시**: 단일 인스턴스로 다중 회사 서비스 +- **자동화**: 업무 프로세스 자동화로 인력 절감 +- **통합 관리**: 여러 시스템 통합으로 관리 비용 절감 + +--- + +### ⏱️ 2. 시간 단축 + +#### 개발 시간 단축 + +- **화면 개발**: 코드 없이 드래그앤드롭으로 빠른 개발 +- **업무 프로세스 구성**: 시각적 플로우 편집기로 빠른 구성 +- **외부 시스템 연동**: UI 기반 설정으로 빠른 연동 + +#### 업무 처리 시간 단축 + +- **자동화**: 반복 업무 자동화로 처리 시간 단축 +- **실시간 처리**: 실시간 데이터 동기화로 대기 시간 제거 +- **통합 화면**: 여러 시스템 데이터를 하나의 화면에서 확인 + +--- + +### 🚀 3. 확장성 및 유연성 + +#### 확장성 + +- **무제한 회사 추가**: 멀티테넌시로 회사 제한 없음 +- **수평 확장**: Docker 기반으로 서버 확장 용이 +- **기능 확장**: 모듈화된 구조로 기능 추가 용이 + +#### 유연성 + +- **화면 커스터마이징**: 각 회사별 맞춤형 화면 구성 +- **업무 프로세스 변경**: 시각적 플로우 편집기로 빠른 변경 +- **외부 시스템 연동**: 다양한 외부 시스템과의 연동 가능 + +--- + +### 📈 4. 생산성 향상 + +#### 개발 생산성 + +- **코드 없이 개발**: 드래그앤드롭으로 화면 및 프로세스 구성 +- **템플릿 재사용**: 자주 사용하는 패턴을 템플릿으로 저장 +- **자동화**: 반복 작업 자동화 + +#### 업무 생산성 + +- **자동화**: 반복 업무 자동화로 업무 시간 단축 +- **통합 화면**: 여러 시스템 데이터를 하나의 화면에서 확인 +- **실시간 데이터**: 실시간 데이터 동기화로 의사결정 시간 단축 + +--- + +## 경쟁 우위 + +### 🆚 1. 기존 ERP 시스템 대비 + +| 기능 | 기존 ERP | WACE 솔루션 | +| ---------------- | ---------------- | ------------------------------ | +| 화면 개발 | 개발자 코딩 필요 | 드래그앤드롭으로 비개발자 개발 | +| 개발 시간 | 2주 | 2시간 (90% 단축) | +| 업무 프로세스 | 개발자 코딩 필요 | 시각적 플로우 편집기 | +| 멀티테넌시 | 추가 비용 필요 | 기본 제공 | +| 외부 시스템 연동 | 개발자 코딩 필요 | UI 기반 설정 | +| 유지보수 | 개발자 필요 | 비개발자도 가능 | + +--- + +### 🏆 2. 독특한 기능 + +#### 1. 코드 없이 화면 제작 + +- **업계 최초**: 드래그앤드롭으로 완전한 화면 제작 가능 +- **실시간 미리보기**: 설계한 화면을 즉시 확인 +- **메뉴 즉시 반영**: 화면 저장 시 즉시 메뉴에 반영 + +#### 2. 시각적 플로우 관리 + +- **React Flow 기반**: 최신 기술로 시각적 플로우 관리 +- **SQL 조건 기반**: 복잡한 업무 로직을 SQL 조건으로 표현 +- **실시간 모니터링**: 각 단계별 현황 실시간 확인 + +#### 3. 완벽한 멀티테넌시 + +- **SQL 레벨 격리**: 데이터베이스 레벨에서 완벽한 데이터 격리 +- **자동 필터링**: 모든 쿼리에서 자동으로 회사별 필터링 +- **최고 관리자 지원**: 시스템 전체 관리 가능 + +--- + +### 🎯 3. 타겟 고객 + +#### 주요 타겟 + +1. **중소기업** + + - IT 인력 부족 + - 빠른 화면 개발 필요 + - 비용 효율적인 솔루션 + +2. **스타트업** + + - 빠른 MVP 개발 필요 + - 반복적인 변경 요구사항 + - 확장성 요구 + +3. **다중 회사 운영 기업** + + - 회사별 다른 업무 프로세스 + - 데이터 격리 필요 + - 통합 관리 필요 + +4. **기존 시스템 통합 필요 기업** + - 레거시 시스템과의 통합 + - 외부 시스템 연동 + - 데이터 동기화 필요 + +--- + +## 결론 + +### 핵심 강점 요약 + +1. ✅ **코드 없이 화면 제작**: 개발자가 아닌 업무 담당자가 직접 화면 구성 +2. ✅ **시각적 플로우 관리**: 복잡한 업무 프로세스를 시각적으로 관리 +3. ✅ **완벽한 멀티테넌시**: 회사별 완전한 데이터 격리 및 권한 관리 +4. ✅ **외부 시스템 연동**: 다양한 외부 시스템과의 통합 관리 +5. ✅ **모던 풀스택 기술**: Next.js 14 + Node.js + TypeScript 통합 스택 +6. ✅ **타입 안전성**: 프론트엔드와 백엔드 모두 TypeScript로 타입 공유 + +### 차별화 포인트 + +- **업계 최초**: 드래그앤드롭 화면 관리 시스템 완전 구현 +- **90% 시간 단축**: 화면 개발 시간 2주 → 2시간 +- **비용 효율**: IT 인력 없이도 업무 시스템 구축 가능 +- **확장성**: 멀티테넌시로 SaaS 플랫폼 구축 가능 + +### 비즈니스 가치 + +- **비용 절감**: 개발 비용 및 운영 비용 절감 +- **시간 단축**: 개발 시간 및 업무 처리 시간 단축 +- **생산성 향상**: 자동화 및 통합으로 생산성 향상 +- **확장성**: 무제한 확장 가능한 구조 + +--- + +## 향후 계획 + +### 단기 계획 (3개월) + +- ✅ 화면 관리 시스템 완성 (95% → 100%) +- ✅ 플로우 관리 시스템 고도화 +- ✅ 외부 시스템 연동 확장 +- ✅ 모바일 앱 지원 + +### 중기 계획 (6개월) + +- ✅ AI 기반 화면 추천 +- ✅ AI 기반 리포트 작성 지원 +- ✅ 고급 분석 기능 +- ✅ 다국어 지원 확대 + +### 장기 계획 (1년) + +- ✅ 클라우드 네이티브 아키텍처 +- ✅ 마이크로서비스 전환 +- ✅ 빅데이터 분석 통합 +- ✅ IoT 연동 + +--- + +**작성일**: 2025-01-27 +**작성자**: 시스템 분석팀 +**다음 리뷰**: 분기별 업데이트 diff --git a/frontend/app/(main)/admin/batch-management/page.tsx b/frontend/app/(main)/admin/batch-management/page.tsx index ed762521..5bb82a84 100644 --- a/frontend/app/(main)/admin/batch-management/page.tsx +++ b/frontend/app/(main)/admin/batch-management/page.tsx @@ -353,14 +353,14 @@ export default function BatchManagementPage() { - 작업명 - 타입 - 스케줄 - 상태 - 실행 통계 - 성공률 - 마지막 실행 - 작업 + 작업명 + 타입 + 스케줄 + 상태 + 실행 통계 + 성공률 + 마지막 실행 + 작업 diff --git a/frontend/app/(main)/admin/collection-management/page.tsx b/frontend/app/(main)/admin/collection-management/page.tsx index 6523b1d0..75f00cdb 100644 --- a/frontend/app/(main)/admin/collection-management/page.tsx +++ b/frontend/app/(main)/admin/collection-management/page.tsx @@ -249,20 +249,20 @@ export default function CollectionManagementPage() {
- 설정명 - 수집 타입 - 소스 테이블 - 대상 테이블 - 스케줄 - 상태 - 마지막 수집 - 작업 + 설정명 + 수집 타입 + 소스 테이블 + 대상 테이블 + 스케줄 + 상태 + 마지막 수집 + 작업 {filteredConfigs.map((config) => ( - - + +
{config.config_name}
{config.description && ( @@ -272,27 +272,27 @@ export default function CollectionManagementPage() { )}
- + {getTypeBadge(config.collection_type)} - + {config.source_table} - + {config.target_table || "-"} - + {config.schedule_cron || "-"} - + {getStatusBadge(config.is_active)} - + {config.last_collected_at ? new Date(config.last_collected_at).toLocaleString() : "-"} - +
- - 연결명 - DB 타입 - 호스트:포트 - 데이터베이스 - 사용자 - 상태 - 생성일 - 연결 테스트 - 작업 + + 연결명 + DB 타입 + 호스트:포트 + 데이터베이스 + 사용자 + 상태 + 생성일 + 연결 테스트 + 작업 {connections.map((connection) => ( - - + +
{connection.connection_name}
 - + {DB_TYPE_LABELS[connection.db_type] || connection.db_type} - + {connection.host}:{connection.port} - {connection.database_name} - {connection.username} - + {connection.database_name} + {connection.username} + {connection.is_active === "Y" ? "활성" : "비활성"} - + {connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"} - +
@@ -127,13 +127,13 @@ export default function WebTypesManagePage() { } return ( -
+
{/* 페이지 제목 */} -
+
-

웹타입 관리

-

화면관리에서 사용할 웹타입들을 관리합니다

+

웹타입 관리

+

화면관리에서 사용할 웹타입들을 관리합니다

- - - handleSort("sort_order")}> -
- 순서 - {sortField === "sort_order" && - (sortDirection === "asc" ? : )} -
- - handleSort("web_type")}> -
- 웹타입 코드 - {sortField === "web_type" && - (sortDirection === "asc" ? : )} -
- - handleSort("type_name")}> -
- 웹타입명 - {sortField === "type_name" && - (sortDirection === "asc" ? : )} -
- - handleSort("category")}> -
- 카테고리 - {sortField === "category" && - (sortDirection === "asc" ? : )} -
- - 설명 - handleSort("component_name")}> -
- 연결된 컴포넌트 - {sortField === "component_name" && - (sortDirection === "asc" ? : )} -
- - handleSort("config_panel")}> -
- 설정 패널 - {sortField === "config_panel" && - (sortDirection === "asc" ? : )} -
- - handleSort("is_active")}> -
- 상태 - {sortField === "is_active" && - (sortDirection === "asc" ? : )} -
- - handleSort("updated_date")}> -
- 최종 수정일 - {sortField === "updated_date" && - (sortDirection === "asc" ? : )} -
- - 작업 +
+
+ + + handleSort("sort_order")}> +
+ 순서 + {sortField === "sort_order" && + (sortDirection === "asc" ? : )} +
+ + handleSort("web_type")}> +
+ 웹타입 코드 + {sortField === "web_type" && + (sortDirection === "asc" ? : )} +
+ + handleSort("type_name")}> +
+ 웹타입명 + {sortField === "type_name" && + (sortDirection === "asc" ? : )} +
+ + handleSort("category")}> +
+ 카테고리 + {sortField === "category" && + (sortDirection === "asc" ? : )} +
+ + 설명 + handleSort("component_name")}> +
+ 연결된 컴포넌트 + {sortField === "component_name" && + (sortDirection === "asc" ? : )} +
+ + handleSort("config_panel")}> +
+ 설정 패널 + {sortField === "config_panel" && + (sortDirection === "asc" ? : )} +
+ + handleSort("is_active")}> +
+ 상태 + {sortField === "is_active" && + (sortDirection === "asc" ? : )} +
+ + handleSort("updated_date")}> +
+ 최종 수정일 + {sortField === "updated_date" && + (sortDirection === "asc" ? : )} +
+ + 작업 @@ -279,38 +278,38 @@ export default function WebTypesManagePage() { ) : ( filteredAndSortedWebTypes.map((webType) => ( - - {webType.sort_order || 0} - {webType.web_type} - + + {webType.sort_order || 0} + {webType.web_type} + {webType.type_name} {webType.type_name_eng && (
{webType.type_name_eng}
)} - + {webType.category} - {webType.description || "-"} - + {webType.description || "-"} + {webType.component_name || "TextWidget"} - + {webType.config_panel === "none" || !webType.config_panel ? "기본 설정" : webType.config_panel} - + {webType.is_active === "Y" ? "활성화" : "비활성화"} - + {webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"} - +
@@ -341,7 +340,7 @@ export default function WebTypesManagePage() { handleDelete(webType.web_type, webType.type_name)} disabled={isDeleting} - className="bg-red-600 hover:bg-red-700" + className="bg-destructive hover:bg-destructive/90" > {isDeleting ? "삭제 중..." : "삭제"} @@ -355,12 +354,11 @@ export default function WebTypesManagePage() { )}
- - +
{deleteError && ( -
-

+

+

삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}

diff --git a/frontend/app/(main)/admin/tableMng/page.tsx b/frontend/app/(main)/admin/tableMng/page.tsx index 8d6d33d0..353e487c 100644 --- a/frontend/app/(main)/admin/tableMng/page.tsx +++ b/frontend/app/(main)/admin/tableMng/page.tsx @@ -4,6 +4,7 @@ import { useState, useEffect, useMemo, useCallback } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; +import { Checkbox } from "@/components/ui/checkbox"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Search, Database, RefreshCw, Settings, Plus, Activity, Trash2 } from "lucide-react"; import { LoadingSpinner } from "@/components/common/LoadingSpinner"; @@ -92,6 +93,9 @@ export default function TableManagementPage() { const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [tableToDelete, setTableToDelete] = useState(""); const [isDeleting, setIsDeleting] = useState(false); + + // 선택된 테이블 목록 (체크박스) + const [selectedTableIds, setSelectedTableIds] = useState>(new Set()); // 최고 관리자 여부 확인 (회사코드가 "*"인 경우) const isSuperAdmin = user?.companyCode === "*"; @@ -594,11 +598,91 @@ export default function TableManagementPage() { } }; + // 체크박스 선택 핸들러 + const handleTableCheck = (tableName: string, checked: boolean) => { + setSelectedTableIds((prev) => { + const newSet = new Set(prev); + if (checked) { + newSet.add(tableName); + } else { + newSet.delete(tableName); + } + return newSet; + }); + }; + + // 전체 선택/해제 + const handleSelectAll = (checked: boolean) => { + if (checked) { + const filteredTables = tables.filter( + (table) => + table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) || + (table.displayName && table.displayName.toLowerCase().includes(searchTerm.toLowerCase())), + ); + setSelectedTableIds(new Set(filteredTables.map((table) => table.tableName))); + } else { + setSelectedTableIds(new Set()); + } + }; + + // 일괄 삭제 확인 + const handleBulkDeleteClick = () => { + if (selectedTableIds.size === 0) return; + setDeleteDialogOpen(true); + }; + + // 일괄 삭제 실행 + const handleBulkDelete = async () => { + if (selectedTableIds.size === 0) return; + + setIsDeleting(true); + try { + const tablesToDelete = Array.from(selectedTableIds); + let successCount = 0; + let failCount = 0; + + for (const tableName of tablesToDelete) { + try { + const result = await ddlApi.dropTable(tableName); + if (result.success) { + successCount++; + // 삭제된 테이블이 선택된 테이블이었다면 선택 해제 + if (selectedTable === tableName) { + setSelectedTable(null); + setColumns([]); + } + } else { + failCount++; + } + } catch (error) { + failCount++; + } + } + + if (successCount > 0) { + toast.success(`${successCount}개의 테이블이 성공적으로 삭제되었습니다.`); + } + if (failCount > 0) { + toast.error(`${failCount}개의 테이블 삭제에 실패했습니다.`); + } + + // 선택 초기화 및 테이블 목록 새로고침 + setSelectedTableIds(new Set()); + await loadTables(); + } catch (error: any) { + toast.error("테이블 삭제 중 오류가 발생했습니다."); + } finally { + setIsDeleting(false); + setDeleteDialogOpen(false); + setTableToDelete(""); + } + }; + return ( -
-
+
+
{/* 페이지 헤더 */} -
+

@@ -664,28 +748,65 @@ export default function TableManagementPage() {

-
+
{/* 좌측 사이드바: 테이블 목록 (20%) */} -
-
-

- - {getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_NAME, "테이블 목록")} -

- +
+
{/* 검색 */} -
- - setSearchTerm(e.target.value)} - className="h-10 pl-10 text-sm" - /> +
+
+ + setSearchTerm(e.target.value)} + className="h-10 pl-10 text-sm" + /> +
{/* 테이블 목록 */} -
+
+ {/* 전체 선택 및 일괄 삭제 (최고 관리자만) */} + {isSuperAdmin && ( +
+
+ + table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) || + (table.displayName && table.displayName.toLowerCase().includes(searchTerm.toLowerCase())), + ).length > 0 && + tables + .filter( + (table) => + table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) || + (table.displayName && table.displayName.toLowerCase().includes(searchTerm.toLowerCase())), + ) + .every((table) => selectedTableIds.has(table.tableName)) + } + onCheckedChange={handleSelectAll} + aria-label="전체 선택" + /> + + {selectedTableIds.size > 0 && `${selectedTableIds.size}개 선택됨`} + +
+ {selectedTableIds.size > 0 && ( + + )} +
+ )} + {loading ? (
@@ -707,40 +828,44 @@ export default function TableManagementPage() { .map((table) => (
-
handleTableSelect(table.tableName)}> -

{table.displayName || table.tableName}

-

- {table.description || getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_DESCRIPTION, "설명 없음")} -

-
- 컬럼 - - {table.columnCount} - +
+ {/* 체크박스 (최고 관리자만) */} + {isSuperAdmin && ( + handleTableCheck(table.tableName, checked as boolean)} + aria-label={`${table.displayName || table.tableName} 선택`} + className="mt-0.5" + onClick={(e) => e.stopPropagation()} + /> + )} +
handleTableSelect(table.tableName)} + > +

{table.displayName || table.tableName}

+

+ {table.description || getTextFromUI(TABLE_MANAGEMENT_KEYS.TABLE_DESCRIPTION, "설명 없음")} +

+
+ 컬럼 + + {table.columnCount} + +
- - {/* 삭제 버튼 (최고 관리자만) */} - {isSuperAdmin && ( -
- -
- )}
)) )} @@ -749,16 +874,11 @@ export default function TableManagementPage() {
{/* 우측 메인 영역: 컬럼 타입 관리 (80%) */} -
-
-

- - {selectedTable ? <>테이블 설정 - {selectedTable} : "테이블 타입 관리"} -

- -
+
+
+
{!selectedTable ? ( -
+

{getTextFromUI(TABLE_MANAGEMENT_KEYS.SELECT_TABLE_PLACEHOLDER, "테이블을 선택해주세요")} @@ -801,19 +921,19 @@ export default function TableManagementPage() { ) : (

{/* 컬럼 헤더 */} -
-
컬럼명
+
+
컬럼명
라벨
-
입력 타입
-
+
입력 타입
+
상세 설정
-
설명
+
설명
{/* 컬럼 리스트 */}
{ const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; // 스크롤이 끝에 가까워지면 더 많은 데이터 로드 @@ -825,9 +945,9 @@ export default function TableManagementPage() { {columns.map((column, index) => (
-
+
{column.columnName}
@@ -838,7 +958,7 @@ export default function TableManagementPage() { className="h-8 text-xs" />
-
+
-
+
{/* 웹 타입이 'code'인 경우 공통코드 선택 */} {column.inputType === "code" && ( + handleDetailSettingsChange(column.columnName, "entity", value) + } + > + + + + + {referenceTableOptions.map((option, index) => ( + +
+ {option.label} + + {option.value} + +
+ + ))} + +
-
- {/* 참조 테이블 */} + {/* 조인 컬럼 */} + {column.referenceTable && column.referenceTable !== "none" && (
+ )} - {/* 조인 컬럼 */} - {column.referenceTable && column.referenceTable !== "none" && ( + {/* 표시 컬럼 */} + {column.referenceTable && + column.referenceTable !== "none" && + column.referenceColumn && + column.referenceColumn !== "none" && (
)} -
- - {/* 설정 완료 표시 - 간소화 */} - {column.referenceTable && - column.referenceTable !== "none" && - column.referenceColumn && - column.referenceColumn !== "none" && - column.displayColumn && - column.displayColumn !== "none" && ( -
- ✓ - - {column.columnName} → {column.referenceTable}.{column.displayColumn} - -
- )}
+ + {/* 설정 완료 표시 */} + {column.referenceTable && + column.referenceTable !== "none" && + column.referenceColumn && + column.referenceColumn !== "none" && + column.displayColumn && + column.displayColumn !== "none" && ( +
+ ✓ + + {column.columnName} → {column.referenceTable}.{column.displayColumn} + +
+ )}
)} {/* 다른 웹 타입인 경우 빈 공간 */} {column.inputType !== "code" && column.inputType !== "entity" && ( -
-
+
+ - +
)}
-
+
handleColumnChange(index, "description", e.target.value)} @@ -1075,26 +1236,62 @@ export default function TableManagementPage() { - 테이블 삭제 확인 + + {selectedTableIds.size > 0 ? "테이블 일괄 삭제 확인" : "테이블 삭제 확인"} + - 정말로 테이블을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다. + {selectedTableIds.size > 0 ? ( + <> + 선택된 {selectedTableIds.size}개의 테이블을 삭제하시겠습니까? +
+ 이 작업은 되돌릴 수 없습니다. + + ) : ( + <> + 정말로 테이블을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다. + + )} -
-
-

경고

-

- 테이블 {tableToDelete}과 모든 데이터가 영구적으로 - 삭제됩니다. -

+ {selectedTableIds.size === 0 && tableToDelete && ( +
+
+

경고

+

+ 테이블 {tableToDelete}과 모든 데이터가 영구적으로 + 삭제됩니다. +

+
-
+ )} + + {selectedTableIds.size > 0 && ( +
+
+

경고

+

+ 다음 테이블들과 모든 데이터가 영구적으로 삭제됩니다: +

+
    + {Array.from(selectedTableIds).map((tableName) => ( +
  • + {tableName} +
    • + ))} +
+
+
+ )}