);
}
```
## ⚙️ 백엔드 구현
### 1. 화면 관리 서비스
```typescript
// screenManagementService.ts
export class ScreenManagementService {
// 화면 정의 생성 (회사별)
async createScreen(
screenData: CreateScreenRequest,
userCompanyCode: string
): Promise {
// 권한 검증: 사용자 회사 코드 확인
if (userCompanyCode !== "*" && userCompanyCode !== screenData.companyCode) {
throw new Error("해당 회사의 화면을 생성할 권한이 없습니다.");
}
const screen = await prisma.screen_definitions.create({
data: {
screen_name: screenData.screenName,
screen_code: screenData.screenCode,
table_name: screenData.tableName,
company_code: screenData.companyCode,
description: screenData.description,
created_by: screenData.createdBy,
},
});
return this.mapToScreenDefinition(screen);
}
// 회사별 화면 목록 조회
async getScreensByCompany(
companyCode: string,
page: number = 1,
size: number = 20
): Promise<{ screens: ScreenDefinition[]; total: number }> {
const whereClause = companyCode === "*" ? {} : { company_code: companyCode };
const [screens, total] = await Promise.all([
prisma.screen_definitions.findMany({
where: whereClause,
skip: (page - 1) * size,
take: size,
orderBy: { created_date: "desc" },
}),
prisma.screen_definitions.count({ where: whereClause }),
]);
return {
screens: screens.map(this.mapToScreenDefinition),
total,
};
// 레이아웃 저장
async saveLayout(screenId: number, layoutData: LayoutData): Promise {
// 기존 레이아웃 삭제
await prisma.screen_layouts.deleteMany({
where: { screen_id: screenId },
});
// 새 레이아웃 저장
const layoutPromises = layoutData.components.map((component) =>
prisma.screen_layouts.create({
data: {
screen_id: screenId,
component_type: component.type,
component_id: component.id,
parent_id: component.parentId,
position_x: component.position.x,
position_y: component.position.y,
width: component.width,
height: component.height,
properties: component.properties,
display_order: component.displayOrder,
},
})
);
await Promise.all(layoutPromises);
}
// 화면 미리보기 생성
async generatePreview(screenId: number): Promise {
const screen = await prisma.screen_definitions.findUnique({
where: { screen_id: screenId },
include: {
layouts: {
include: { widgets: true },
orderBy: { display_order: "asc" },
},
},
});
if (!screen) {
throw new Error("Screen not found");
}
return this.buildPreviewData(screen);
}
private buildPreviewData(screen: any): PreviewData {
// 레이아웃을 트리 구조로 변환
const componentTree = this.buildComponentTree(screen.layouts);
// 위젯 데이터 바인딩
const boundWidgets = this.bindWidgetData(componentTree, screen.table_name);
return {
screenId: screen.screen_id,
screenName: screen.screen_name,
tableName: screen.table_name,
components: boundWidgets,
metadata: this.getTableMetadata(screen.table_name),
};
}
}
```
### 2. 테이블 타입 연계 서비스
```typescript
// tableTypeIntegrationService.ts
export class TableTypeIntegrationService {
// 컬럼 정보 조회 (웹 타입 포함) - 현재 테이블 구조 기반
async getColumnInfo(tableName: string): Promise {
const columns = await prisma.$queryRaw`
SELECT
c.column_name,
COALESCE(cl.column_label, c.column_name) as column_label,
c.data_type,
COALESCE(cl.web_type, 'text') as web_type,
c.is_nullable,
c.column_default,
c.character_maximum_length,
c.numeric_precision,
c.numeric_scale,
cl.detail_settings, -- 🎯 column_labels.detail_settings
cl.code_category, -- 🎯 column_labels.code_category
cl.reference_table, -- 🎯 column_labels.reference_table
cl.reference_column, -- 🎯 column_labels.reference_column
cl.is_visible, -- 🎯 column_labels.is_visible
cl.display_order, -- 🎯 column_labels.display_order
cl.description -- 🎯 column_labels.description
FROM information_schema.columns c
LEFT JOIN column_labels cl ON c.table_name = cl.table_name
AND c.column_name = cl.column_name
WHERE c.table_name = ${tableName}
ORDER BY COALESCE(cl.display_order, c.ordinal_position)
`;
return columns as ColumnInfo[];
}
// 웹 타입 설정 - 현재 테이블 구조 기반
async setColumnWebType(
tableName: string,
columnName: string,
webType: string,
additionalSettings?: any
): Promise {
await prisma.column_labels.upsert({
where: {
table_name_column_name: {
table_name: tableName,
column_name: columnName,
},
},
update: {
web_type: webType,
column_label: additionalSettings?.columnLabel,
detail_settings: additionalSettings?.detailSettings
? JSON.stringify(additionalSettings.detailSettings)
: null,
code_category: additionalSettings?.codeCategory,
reference_table: additionalSettings?.referenceTable,
reference_column: additionalSettings?.referenceColumn,
is_visible: additionalSettings?.isVisible ?? true,
display_order: additionalSettings?.displayOrder ?? 0,
description: additionalSettings?.description,
updated_date: new Date(),
},
create: {
table_name: tableName,
column_name: columnName,
column_label: additionalSettings?.columnLabel,
web_type: webType,
detail_settings: additionalSettings?.detailSettings
? JSON.stringify(additionalSettings.detailSettings)
: null,
code_category: additionalSettings?.codeCategory,
reference_table: additionalSettings?.referenceTable,
reference_column: additionalSettings?.referenceColumn,
is_visible: additionalSettings?.isVisible ?? true,
display_order: additionalSettings?.displayOrder ?? 0,
description: additionalSettings?.description,
created_date: new Date(),
},
});
}
// 웹 타입 조회 - 현재 테이블 구조 기반
async getColumnWebType(
tableName: string,
columnName: string
): Promise {
const columnLabel = await prisma.column_labels.findUnique({
where: {
table_name_column_name: {
table_name: tableName,
column_name: columnName,
},
},
});
if (!columnLabel) {
return {
tableName,
columnName,
webType: "text", // 기본값
columnLabel: columnName,
detailSettings: {},
codeCategory: null,
referenceTable: null,
referenceColumn: null,
isVisible: true,
displayOrder: 0,
description: null,
};
}
return {
tableName,
columnName,
webType: columnLabel.web_type || "text",
columnLabel: columnLabel.column_label,
detailSettings: columnLabel.detail_settings
? JSON.parse(columnLabel.detail_settings)
: {},
codeCategory: columnLabel.code_category,
referenceTable: columnLabel.reference_table,
referenceColumn: columnLabel.reference_column,
isVisible: columnLabel.is_visible ?? true,
displayOrder: columnLabel.display_order ?? 0,
description: columnLabel.description,
};
}
// 웹 타입별 위젯 생성 - 현재 테이블 구조 기반
generateWidgetFromColumn(column: ColumnInfo): WidgetData {
const baseWidget = {
id: generateId(),
tableName: column.table_name, // 🎯 column_labels.table_name
columnName: column.column_name, // 🎯 column_labels.column_name
label: column.column_label || column.column_name, // 🎯 column_labels.column_label
required: column.is_nullable === "N",
readonly: false,
};
// detail_settings JSON 파싱
const detailSettings = column.detail_settings
? JSON.parse(column.detail_settings)
: {};
switch (column.web_type) {
case "text":
return {
...baseWidget,
type: "text",
maxLength:
detailSettings.maxLength || column.character_maximum_length,
placeholder: `Enter ${column.column_label || column.column_name}`,
pattern: detailSettings.pattern,
};
case "number":
return {
...baseWidget,
type: "number",
min: detailSettings.min,
max:
detailSettings.max ||
(column.numeric_precision
? Math.pow(10, column.numeric_precision) - 1
: undefined),
step:
detailSettings.step ||
(column.numeric_scale > 0
? Math.pow(10, -column.numeric_scale)
: 1),
};
case "date":
return {
...baseWidget,
type: "date",
format: detailSettings.format || "YYYY-MM-DD",
minDate: detailSettings.minDate,
maxDate: detailSettings.maxDate,
};
case "code":
return {
...baseWidget,
type: "select",
options: [], // 코드 카테고리에서 로드
codeCategory: column.code_category, // 🎯 column_labels.code_category
multiple: detailSettings.multiple || false,
searchable: detailSettings.searchable || false,
};
case "entity":
return {
...baseWidget,
type: "entity-select",
referenceTable: column.reference_table, // 🎯 column_labels.reference_table
referenceColumn: column.reference_column, // 🎯 column_labels.reference_column
searchable: detailSettings.searchable || true,
multiple: detailSettings.multiple || false,
};
case "textarea":
return {
...baseWidget,
type: "textarea",
rows: detailSettings.rows || 3,
maxLength:
detailSettings.maxLength || column.character_maximum_length,
};
case "select":
return {
...baseWidget,
type: "select",
options: detailSettings.options || [],
multiple: detailSettings.multiple || false,
searchable: detailSettings.searchable || false,
};
case "checkbox":
return {
...baseWidget,
type: "checkbox",
defaultChecked: detailSettings.defaultChecked || false,
label: detailSettings.label || column.column_label,
};
case "radio":
return {
...baseWidget,
type: "radio",
options: detailSettings.options || [],
inline: detailSettings.inline || false,
};
case "file":
return {
...baseWidget,
type: "file",
accept: detailSettings.accept || "*/*",
maxSize: detailSettings.maxSize || 10485760, // 10MB
multiple: detailSettings.multiple || false,
};
default:
return {
...baseWidget,
type: "text",
};
}
}
// 코드 카테고리 옵션 로드
async loadCodeOptions(codeCategory: string): Promise {
const codes = await prisma.code_info.findMany({
where: { code_category: codeCategory, is_active: "Y" },
select: { code_value: true, code_name: true },
orderBy: { sort_order: "asc" },
});
return codes.map((code) => ({
value: code.code_value,
label: code.code_name,
}));
}
// 참조 테이블 옵션 로드
async loadReferenceOptions(
referenceTable: string
): Promise {
const records = await prisma.$queryRaw`
SELECT DISTINCT ${referenceTable}.id, ${referenceTable}.name
FROM ${referenceTable}
ORDER BY ${referenceTable}.name
`;
return records.map((record: any) => ({
value: record.id,
label: record.name,
}));
}
}
```
## 🎬 사용 시나리오
### 1. 회사별 화면 관리
#### 일반 사용자 (회사 코드: 'COMP001')
1. **로그인**: 자신의 회사 코드로 시스템 로그인
2. **화면 목록 조회**: 자신이 속한 회사의 화면만 표시
3. **화면 생성**: 회사 코드가 자동으로 설정되어 생성
4. **메뉴 할당**: 자신의 회사 메뉴에만 화면 할당 가능
#### 관리자 (회사 코드: '\*')
1. **로그인**: 관리자 권한으로 시스템 로그인
2. **전체 화면 조회**: 모든 회사의 화면을 조회/수정 가능
3. **회사별 화면 관리**: 각 회사별로 화면 생성/수정/삭제
4. **크로스 회사 메뉴 할당**: 모든 회사의 메뉴에 화면 할당 가능
### 2. 웹 타입 설정 (테이블 타입관리)
1. **테이블 선택**: 테이블 타입관리에서 웹 타입을 설정할 테이블 선택
2. **컬럼 관리**: 해당 테이블의 컬럼 목록에서 웹 타입을 설정할 컬럼 선택
3. **웹 타입 선택**: 컬럼의 용도에 맞는 웹 타입 선택 (text, number, date, code, entity 등)
4. **추가 설정**: 웹 타입별 필요한 추가 설정 구성
- **code 타입**: 공통코드 카테고리 선택
- **entity 타입**: 참조 테이블 및 컬럼 지정
- **validation**: 유효성 검증 규칙 설정
- **display**: 표시 속성 설정
5. **저장**: 웹 타입 설정을 데이터베이스에 저장
6. **연계 확인**: 화면관리 시스템에서 자동 위젯 생성 확인
### 3. 새로운 화면 설계
1. **테이블 선택**: 테이블 타입관리에서 설계할 테이블 선택
2. **웹 타입 확인**: 각 컬럼의 웹 타입 설정 상태 확인
3. **화면 생성**: 화면명과 코드를 입력하여 새 화면 생성 (회사 코드 자동 설정)
4. **자동 위젯 생성**: 컬럼의 웹 타입에 따라 자동으로 위젯 생성
5. **컴포넌트 배치**: 드래그앤드롭으로 컴포넌트를 캔버스에 배치
6. **컨테이너 그룹화**: 관련 컴포넌트들을 그룹으로 묶어 깔끔하게 정렬
7. **속성 설정**: 각 컴포넌트의 속성을 Properties 패널에서 설정
8. **실시간 미리보기**: 설계한 화면을 실제 화면과 동일하게 확인
9. **저장**: 완성된 화면 레이아웃을 데이터베이스에 저장
### 4. 기존 화면 수정
1. **화면 선택**: 수정할 화면을 목록에서 선택 (권한 확인)
2. **레이아웃 로드**: 기존 레이아웃을 캔버스에 로드
3. **컴포넌트 수정**: 컴포넌트 추가/삭제/이동/수정
4. **그룹 구조 조정**: 컴포넌트 그룹화/그룹 해제/그룹 속성 변경
5. **속성 변경**: 컴포넌트 속성 변경
6. **변경사항 확인**: 실시간 미리보기로 변경사항 확인
7. **저장**: 수정된 레이아웃 저장
### 5. 템플릿 활용
1. **템플릿 선택**: 적합한 템플릿을 목록에서 선택 (회사별 템플릿)
2. **템플릿 적용**: 선택한 템플릿을 현재 화면에 적용
3. **커스터마이징**: 템플릿을 기반으로 필요한 부분 수정
4. **저장**: 커스터마이징된 화면 저장
### 6. 메뉴 할당 및 관리
1. **메뉴 선택**: 화면을 할당할 메뉴 선택 (회사별 메뉴만 표시)
2. **화면 할당**: 선택한 화면을 메뉴에 할당
3. **할당 순서 조정**: 메뉴 내 화면 표시 순서 조정
4. **할당 해제**: 메뉴에서 화면 할당 해제
5. **권한 확인**: 메뉴 할당 시 회사 코드 일치 여부 확인
### 7. 화면 배포
1. **화면 활성화**: 설계 완료된 화면을 활성 상태로 변경
2. **권한 설정**: 화면 접근 권한 설정 (회사별 권한)
3. **메뉴 연결**: 메뉴 시스템에 화면 연결 (회사별 메뉴)
4. **테스트**: 실제 환경에서 화면 동작 테스트
5. **배포**: 운영 환경에 화면 배포
## 📅 개발 계획
### Phase 1: 기본 구조 및 데이터베이스 (2주)
- [ ] 데이터베이스 스키마 설계 및 생성
- [ ] 기본 API 구조 설계
- [ ] 화면 정의 및 레이아웃 테이블 생성
- [ ] 기본 CRUD API 구현
### Phase 2: 드래그앤드롭 핵심 기능 (3주)
- [ ] 드래그앤드롭 라이브러리 선택 및 구현
- [ ] 그리드 시스템 구현
- [ ] 컴포넌트 배치 및 이동 로직 구현
- [ ] 컴포넌트 크기 조정 기능 구현
### Phase 3: 컴포넌트 라이브러리 (2주)
- [ ] 기본 입력 컴포넌트 구현
- [ ] 선택 컴포넌트 구현
- [ ] 표시 컴포넌트 구현
- [ ] 레이아웃 컴포넌트 구현
### Phase 4: 테이블 타입 연계 (2주)
- [ ] 테이블 타입관리와 연계 API 구현
- [ ] 웹 타입 설정 및 관리 기능 구현
- [ ] 웹 타입별 추가 설정 관리 기능 구현
- [ ] 자동 위젯 생성 로직 구현
- [ ] 데이터 바인딩 시스템 구현
- [ ] 유효성 검증 규칙 자동 적용
### Phase 5: 미리보기 및 템플릿 (2주)
- [ ] 실시간 미리보기 시스템 구현
- [ ] 기본 템플릿 구현
- [ ] 템플릿 저장 및 적용 기능 구현
- [ ] 템플릿 공유 시스템 구현
### Phase 6: 통합 및 테스트 (1주)
- [ ] 전체 시스템 통합 테스트
- [ ] 성능 최적화
- [ ] 사용자 테스트 및 피드백 반영
- [ ] 문서화 및 사용자 가이드 작성
## 🎯 결론
화면관리 시스템은 **회사별 권한 관리**와 **테이블 타입관리 연계**를 통해 사용자가 직관적으로 웹 화면을 설계할 수 있는 강력한 도구입니다.
### 🏢 **회사별 화면 관리의 핵심 가치**
- **권한 격리**: 사용자는 자신이 속한 회사의 화면만 제작/수정 가능
- **관리자 통제**: 회사 코드 '\*'인 관리자는 모든 회사의 화면을 제어
- **메뉴 연동**: 각 회사의 메뉴에만 화면 할당하여 완벽한 데이터 분리
### 🎨 **향상된 사용자 경험**
- **드래그앤드롭 인터페이스**: 직관적인 화면 설계
- **컨테이너 그룹화**: 컴포넌트를 깔끔하게 정렬하는 그룹 기능
- **실시간 미리보기**: 설계한 화면을 실제 화면과 동일하게 확인
- **자동 위젯 생성**: 컬럼의 웹 타입에 따른 스마트한 위젯 생성
### 🚀 **기술적 혜택**
- **기존 테이블 구조 100% 호환**: 별도 스키마 변경 없이 바로 개발 가능
- **권한 기반 보안**: 회사 간 데이터 완전 격리
- **확장 가능한 아키텍처**: 새로운 웹 타입과 컴포넌트 쉽게 추가
이 시스템을 통해 ERP 시스템의 화면 개발 생산성을 크게 향상시키고, **회사별 맞춤형 화면 구성**과 **사용자 요구사항에 따른 빠른 화면 구성**이 가능해질 것입니다.