feat/multilang #357
|
|
@ -0,0 +1,559 @@
|
|||
# 다국어 지원 컴포넌트 개발 가이드
|
||||
|
||||
새로운 화면 컴포넌트를 개발할 때 반드시 다국어 시스템을 고려해야 합니다.
|
||||
이 가이드는 컴포넌트가 다국어 자동 생성 및 매핑 시스템과 호환되도록 하는 방법을 설명합니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 타입 정의 시 다국어 필드 추가
|
||||
|
||||
### 기본 원칙
|
||||
|
||||
텍스트가 표시되는 **모든 속성**에 `langKeyId`와 `langKey` 필드를 함께 정의해야 합니다.
|
||||
|
||||
### 단일 텍스트 속성
|
||||
|
||||
```typescript
|
||||
interface MyComponentConfig {
|
||||
// 기본 텍스트
|
||||
title?: string;
|
||||
// 다국어 키 (필수 추가)
|
||||
titleLangKeyId?: number;
|
||||
titleLangKey?: string;
|
||||
|
||||
// 라벨
|
||||
label?: string;
|
||||
labelLangKeyId?: number;
|
||||
labelLangKey?: string;
|
||||
|
||||
// 플레이스홀더
|
||||
placeholder?: string;
|
||||
placeholderLangKeyId?: number;
|
||||
placeholderLangKey?: string;
|
||||
}
|
||||
```
|
||||
|
||||
### 배열/목록 속성 (컬럼, 탭 등)
|
||||
|
||||
```typescript
|
||||
interface ColumnConfig {
|
||||
name: string;
|
||||
label: string;
|
||||
// 다국어 키 (필수 추가)
|
||||
langKeyId?: number;
|
||||
langKey?: string;
|
||||
// 기타 속성
|
||||
width?: number;
|
||||
align?: "left" | "center" | "right";
|
||||
}
|
||||
|
||||
interface TabConfig {
|
||||
id: string;
|
||||
label: string;
|
||||
// 다국어 키 (필수 추가)
|
||||
langKeyId?: number;
|
||||
langKey?: string;
|
||||
// 탭 제목도 별도로
|
||||
title?: string;
|
||||
titleLangKeyId?: number;
|
||||
titleLangKey?: string;
|
||||
}
|
||||
|
||||
interface MyComponentConfig {
|
||||
columns?: ColumnConfig[];
|
||||
tabs?: TabConfig[];
|
||||
}
|
||||
```
|
||||
|
||||
### 버튼 컴포넌트
|
||||
|
||||
```typescript
|
||||
interface ButtonComponentConfig {
|
||||
text?: string;
|
||||
// 다국어 키 (필수 추가)
|
||||
langKeyId?: number;
|
||||
langKey?: string;
|
||||
}
|
||||
```
|
||||
|
||||
### 실제 예시: 분할 패널
|
||||
|
||||
```typescript
|
||||
interface SplitPanelLayoutConfig {
|
||||
leftPanel?: {
|
||||
title?: string;
|
||||
langKeyId?: number; // 좌측 패널 제목 다국어
|
||||
langKey?: string;
|
||||
columns?: Array<{
|
||||
name: string;
|
||||
label: string;
|
||||
langKeyId?: number; // 각 컬럼 다국어
|
||||
langKey?: string;
|
||||
}>;
|
||||
};
|
||||
rightPanel?: {
|
||||
title?: string;
|
||||
langKeyId?: number; // 우측 패널 제목 다국어
|
||||
langKey?: string;
|
||||
columns?: Array<{
|
||||
name: string;
|
||||
label: string;
|
||||
langKeyId?: number;
|
||||
langKey?: string;
|
||||
}>;
|
||||
additionalTabs?: Array<{
|
||||
label: string;
|
||||
langKeyId?: number; // 탭 라벨 다국어
|
||||
langKey?: string;
|
||||
title?: string;
|
||||
titleLangKeyId?: number; // 탭 제목 다국어
|
||||
titleLangKey?: string;
|
||||
columns?: Array<{
|
||||
name: string;
|
||||
label: string;
|
||||
langKeyId?: number;
|
||||
langKey?: string;
|
||||
}>;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 라벨 추출 로직 등록
|
||||
|
||||
### 파일 위치
|
||||
|
||||
`frontend/lib/utils/multilangLabelExtractor.ts`
|
||||
|
||||
### `extractMultilangLabels` 함수에 추가
|
||||
|
||||
새 컴포넌트의 라벨을 추출하는 로직을 추가해야 합니다.
|
||||
|
||||
```typescript
|
||||
// 새 컴포넌트 타입 체크
|
||||
if (comp.componentType === "my-new-component") {
|
||||
const config = comp.componentConfig as MyComponentConfig;
|
||||
|
||||
// 1. 제목 추출
|
||||
if (config?.title) {
|
||||
addLabel({
|
||||
id: `${comp.id}_title`,
|
||||
componentId: `${comp.id}_title`,
|
||||
label: config.title,
|
||||
type: "title",
|
||||
parentType: "my-new-component",
|
||||
parentLabel: config.title,
|
||||
langKeyId: config.titleLangKeyId,
|
||||
langKey: config.titleLangKey,
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 컬럼 추출
|
||||
if (config?.columns && Array.isArray(config.columns)) {
|
||||
config.columns.forEach((col, index) => {
|
||||
const colLabel = col.label || col.name;
|
||||
addLabel({
|
||||
id: `${comp.id}_col_${index}`,
|
||||
componentId: `${comp.id}_col_${index}`,
|
||||
label: colLabel,
|
||||
type: "column",
|
||||
parentType: "my-new-component",
|
||||
parentLabel: config.title || "새 컴포넌트",
|
||||
langKeyId: col.langKeyId,
|
||||
langKey: col.langKey,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 버튼 텍스트 추출 (버튼 컴포넌트인 경우)
|
||||
if (config?.text) {
|
||||
addLabel({
|
||||
id: `${comp.id}_button`,
|
||||
componentId: `${comp.id}_button`,
|
||||
label: config.text,
|
||||
type: "button",
|
||||
parentType: "my-new-component",
|
||||
parentLabel: config.text,
|
||||
langKeyId: config.langKeyId,
|
||||
langKey: config.langKey,
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 추출해야 할 라벨 타입
|
||||
|
||||
| 타입 | 설명 | 예시 |
|
||||
| ------------- | ------------------ | ------------------------ |
|
||||
| `title` | 컴포넌트/패널 제목 | 분할패널 제목, 카드 제목 |
|
||||
| `label` | 입력 필드 라벨 | 텍스트 입력 라벨 |
|
||||
| `button` | 버튼 텍스트 | 저장, 취소, 삭제 |
|
||||
| `column` | 테이블 컬럼 헤더 | 품목명, 수량, 금액 |
|
||||
| `tab` | 탭 라벨 | 기본정보, 상세정보 |
|
||||
| `filter` | 검색 필터 라벨 | 검색어, 기간 |
|
||||
| `placeholder` | 플레이스홀더 | "검색어를 입력하세요" |
|
||||
| `action` | 액션 버튼/링크 | 수정, 삭제, 상세보기 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 매핑 적용 로직 등록
|
||||
|
||||
### 파일 위치
|
||||
|
||||
`frontend/lib/utils/multilangLabelExtractor.ts`
|
||||
|
||||
### `applyMultilangMappings` 함수에 추가
|
||||
|
||||
다국어 키가 선택되면 컴포넌트에 `langKeyId`와 `langKey`를 저장하는 로직을 추가합니다.
|
||||
|
||||
```typescript
|
||||
// 새 컴포넌트 매핑 적용
|
||||
if (comp.componentType === "my-new-component") {
|
||||
const config = comp.componentConfig as MyComponentConfig;
|
||||
|
||||
// 1. 제목 매핑
|
||||
const titleMapping = mappingMap.get(`${comp.id}_title`);
|
||||
if (titleMapping) {
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
titleLangKeyId: titleMapping.keyId,
|
||||
titleLangKey: titleMapping.langKey,
|
||||
};
|
||||
}
|
||||
|
||||
// 2. 컬럼 매핑
|
||||
if (config?.columns && Array.isArray(config.columns)) {
|
||||
const updatedColumns = config.columns.map((col, index) => {
|
||||
const colMapping = mappingMap.get(`${comp.id}_col_${index}`);
|
||||
if (colMapping) {
|
||||
return {
|
||||
...col,
|
||||
langKeyId: colMapping.keyId,
|
||||
langKey: colMapping.langKey,
|
||||
};
|
||||
}
|
||||
return col;
|
||||
});
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
columns: updatedColumns,
|
||||
};
|
||||
}
|
||||
|
||||
// 3. 버튼 매핑 (버튼 컴포넌트인 경우)
|
||||
const buttonMapping = mappingMap.get(`${comp.id}_button`);
|
||||
if (buttonMapping) {
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
langKeyId: buttonMapping.keyId,
|
||||
langKey: buttonMapping.langKey,
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 주의사항
|
||||
|
||||
- **객체 참조 유지**: 매핑 시 기존 `updated.componentConfig`를 기반으로 업데이트해야 합니다.
|
||||
- **중첩 구조**: 중첩된 객체(예: `leftPanel.columns`)는 상위 객체부터 순서대로 업데이트합니다.
|
||||
|
||||
```typescript
|
||||
// 잘못된 방법 - 이전 업데이트 덮어쓰기
|
||||
updated.componentConfig = { ...config, langKeyId: mapping.keyId }; // ❌
|
||||
updated.componentConfig = { ...config, columns: updatedColumns }; // langKeyId 사라짐!
|
||||
|
||||
// 올바른 방법 - 이전 업데이트 유지
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
langKeyId: mapping.keyId,
|
||||
}; // ✅
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
columns: updatedColumns,
|
||||
}; // ✅
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 번역 표시 로직 구현
|
||||
|
||||
### 파일 위치
|
||||
|
||||
새 컴포넌트 파일 (예: `frontend/lib/registry/components/my-component/MyComponent.tsx`)
|
||||
|
||||
### Context 사용
|
||||
|
||||
```typescript
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
const MyComponent = ({ component }: Props) => {
|
||||
const { getTranslatedText } = useScreenMultiLang();
|
||||
const config = component.componentConfig;
|
||||
|
||||
// 제목 번역
|
||||
const displayTitle = config?.titleLangKey
|
||||
? getTranslatedText(config.titleLangKey, config.title || "")
|
||||
: config?.title || "";
|
||||
|
||||
// 컬럼 헤더 번역
|
||||
const translatedColumns = config?.columns?.map((col) => ({
|
||||
...col,
|
||||
displayLabel: col.langKey
|
||||
? getTranslatedText(col.langKey, col.label)
|
||||
: col.label,
|
||||
}));
|
||||
|
||||
// 버튼 텍스트 번역
|
||||
const buttonText = config?.langKey
|
||||
? getTranslatedText(config.langKey, config.text || "")
|
||||
: config?.text || "";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>{displayTitle}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{translatedColumns?.map((col, idx) => (
|
||||
<th key={idx}>{col.displayLabel}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<button>{buttonText}</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### getTranslatedText 함수
|
||||
|
||||
```typescript
|
||||
// 첫 번째 인자: langKey (다국어 키)
|
||||
// 두 번째 인자: fallback (키가 없거나 번역이 없을 때 기본값)
|
||||
const text = getTranslatedText(
|
||||
"screen.company_1.Sales.OrderList.품목명",
|
||||
"품목명"
|
||||
);
|
||||
```
|
||||
|
||||
### 주의사항
|
||||
|
||||
- `langKey`가 없으면 원본 텍스트를 표시합니다.
|
||||
- `useScreenMultiLang`은 반드시 `ScreenMultiLangProvider` 내부에서 사용해야 합니다.
|
||||
- 화면 페이지(`/screens/[screenId]/page.tsx`)에서 이미 Provider로 감싸져 있습니다.
|
||||
|
||||
---
|
||||
|
||||
## 5. ScreenMultiLangContext에 키 수집 로직 추가
|
||||
|
||||
### 파일 위치
|
||||
|
||||
`frontend/contexts/ScreenMultiLangContext.tsx`
|
||||
|
||||
### `collectLangKeys` 함수에 추가
|
||||
|
||||
번역을 미리 로드하기 위해 컴포넌트에서 사용하는 모든 `langKey`를 수집해야 합니다.
|
||||
|
||||
```typescript
|
||||
const collectLangKeys = (comps: ComponentData[]): Set<string> => {
|
||||
const keys = new Set<string>();
|
||||
|
||||
const processComponent = (comp: ComponentData) => {
|
||||
const config = comp.componentConfig;
|
||||
|
||||
// 새 컴포넌트의 langKey 수집
|
||||
if (comp.componentType === "my-new-component") {
|
||||
// 제목
|
||||
if (config?.titleLangKey) {
|
||||
keys.add(config.titleLangKey);
|
||||
}
|
||||
|
||||
// 컬럼
|
||||
if (config?.columns && Array.isArray(config.columns)) {
|
||||
config.columns.forEach((col: any) => {
|
||||
if (col.langKey) {
|
||||
keys.add(col.langKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 버튼
|
||||
if (config?.langKey) {
|
||||
keys.add(config.langKey);
|
||||
}
|
||||
}
|
||||
|
||||
// 자식 컴포넌트 재귀 처리
|
||||
if (comp.children && Array.isArray(comp.children)) {
|
||||
comp.children.forEach(processComponent);
|
||||
}
|
||||
};
|
||||
|
||||
comps.forEach(processComponent);
|
||||
return keys;
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. MultilangSettingsModal에 표시 로직 추가
|
||||
|
||||
### 파일 위치
|
||||
|
||||
`frontend/components/screen/modals/MultilangSettingsModal.tsx`
|
||||
|
||||
### `extractLabelsFromComponents` 함수에 추가
|
||||
|
||||
다국어 설정 모달에서 새 컴포넌트의 라벨이 표시되도록 합니다.
|
||||
|
||||
```typescript
|
||||
// 새 컴포넌트 라벨 추출
|
||||
if (comp.componentType === "my-new-component") {
|
||||
const config = comp.componentConfig as MyComponentConfig;
|
||||
|
||||
// 제목
|
||||
if (config?.title) {
|
||||
addLabel({
|
||||
id: `${comp.id}_title`,
|
||||
componentId: `${comp.id}_title`,
|
||||
label: config.title,
|
||||
type: "title",
|
||||
parentType: "my-new-component",
|
||||
parentLabel: config.title,
|
||||
langKeyId: config.titleLangKeyId,
|
||||
langKey: config.titleLangKey,
|
||||
});
|
||||
}
|
||||
|
||||
// 컬럼
|
||||
if (config?.columns) {
|
||||
config.columns.forEach((col, index) => {
|
||||
// columnLabelMap에서 라벨 가져오기 (테이블 컬럼인 경우)
|
||||
const tableName = config.tableName;
|
||||
const displayLabel =
|
||||
tableName && columnLabelMap[tableName]?.[col.name]
|
||||
? columnLabelMap[tableName][col.name]
|
||||
: col.label || col.name;
|
||||
|
||||
addLabel({
|
||||
id: `${comp.id}_col_${index}`,
|
||||
componentId: `${comp.id}_col_${index}`,
|
||||
label: displayLabel,
|
||||
type: "column",
|
||||
parentType: "my-new-component",
|
||||
parentLabel: config.title || "새 컴포넌트",
|
||||
langKeyId: col.langKeyId,
|
||||
langKey: col.langKey,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 테이블명 추출 (테이블 사용 컴포넌트인 경우)
|
||||
|
||||
### 파일 위치
|
||||
|
||||
`frontend/lib/utils/multilangLabelExtractor.ts`
|
||||
|
||||
### `extractTableNames` 함수에 추가
|
||||
|
||||
컴포넌트가 테이블을 사용하는 경우, 테이블명을 추출해야 컬럼 라벨을 가져올 수 있습니다.
|
||||
|
||||
```typescript
|
||||
const extractTableNames = (comps: ComponentData[]): Set<string> => {
|
||||
const tableNames = new Set<string>();
|
||||
|
||||
const processComponent = (comp: ComponentData) => {
|
||||
const config = comp.componentConfig;
|
||||
|
||||
// 새 컴포넌트의 테이블명 추출
|
||||
if (comp.componentType === "my-new-component") {
|
||||
if (config?.tableName) {
|
||||
tableNames.add(config.tableName);
|
||||
}
|
||||
if (config?.selectedTable) {
|
||||
tableNames.add(config.selectedTable);
|
||||
}
|
||||
}
|
||||
|
||||
// 자식 컴포넌트 재귀 처리
|
||||
if (comp.children && Array.isArray(comp.children)) {
|
||||
comp.children.forEach(processComponent);
|
||||
}
|
||||
};
|
||||
|
||||
comps.forEach(processComponent);
|
||||
return tableNames;
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 체크리스트
|
||||
|
||||
새 컴포넌트 개발 시 다음 항목을 확인하세요:
|
||||
|
||||
### 타입 정의
|
||||
|
||||
- [ ] 모든 텍스트 속성에 `langKeyId`, `langKey` 필드 추가
|
||||
- [ ] 배열 속성(columns, tabs 등)의 각 항목에도 다국어 필드 추가
|
||||
|
||||
### 라벨 추출 (multilangLabelExtractor.ts)
|
||||
|
||||
- [ ] `extractMultilangLabels` 함수에 라벨 추출 로직 추가
|
||||
- [ ] `extractTableNames` 함수에 테이블명 추출 로직 추가 (해당되는 경우)
|
||||
|
||||
### 매핑 적용 (multilangLabelExtractor.ts)
|
||||
|
||||
- [ ] `applyMultilangMappings` 함수에 매핑 적용 로직 추가
|
||||
|
||||
### 번역 표시 (컴포넌트 파일)
|
||||
|
||||
- [ ] `useScreenMultiLang` 훅 사용
|
||||
- [ ] `getTranslatedText`로 텍스트 번역 적용
|
||||
|
||||
### 키 수집 (ScreenMultiLangContext.tsx)
|
||||
|
||||
- [ ] `collectLangKeys` 함수에 langKey 수집 로직 추가
|
||||
|
||||
### 설정 모달 (MultilangSettingsModal.tsx)
|
||||
|
||||
- [ ] `extractLabelsFromComponents`에 라벨 표시 로직 추가
|
||||
|
||||
---
|
||||
|
||||
## 9. 관련 파일 목록
|
||||
|
||||
| 파일 | 역할 |
|
||||
| -------------------------------------------------------------- | ----------------------- |
|
||||
| `frontend/lib/utils/multilangLabelExtractor.ts` | 라벨 추출 및 매핑 적용 |
|
||||
| `frontend/contexts/ScreenMultiLangContext.tsx` | 번역 Context 및 키 수집 |
|
||||
| `frontend/components/screen/modals/MultilangSettingsModal.tsx` | 다국어 설정 UI |
|
||||
| `frontend/components/screen/ScreenDesigner.tsx` | 다국어 생성 버튼 처리 |
|
||||
| `backend-node/src/services/multilangService.ts` | 다국어 키 생성 서비스 |
|
||||
|
||||
---
|
||||
|
||||
## 10. 주의사항
|
||||
|
||||
1. **componentId 형식 일관성**: 라벨 추출과 매핑 적용에서 동일한 ID 형식 사용
|
||||
|
||||
- 제목: `${comp.id}_title`
|
||||
- 컬럼: `${comp.id}_col_${index}`
|
||||
- 버튼: `${comp.id}_button`
|
||||
|
||||
2. **중첩 구조 주의**: 분할패널처럼 중첩된 구조는 경로를 명확히 지정
|
||||
|
||||
- `${comp.id}_left_title`, `${comp.id}_right_col_${index}`
|
||||
|
||||
3. **기존 값 보존**: 매핑 적용 시 `updated.componentConfig`를 기반으로 업데이트
|
||||
|
||||
4. **라벨 타입 구분**: 입력 폼의 `label`과 다른 컴포넌트의 `label`을 구분하여 처리
|
||||
|
||||
5. **테스트**: 다국어 생성 → 다국어 설정 → 언어 변경 순서로 테스트
|
||||
|
|
@ -1044,6 +1044,7 @@
|
|||
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.3",
|
||||
|
|
@ -2371,6 +2372,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.1.tgz",
|
||||
"integrity": "sha512-/KCsg3xSlR+nCK8/8ZYSknYxvXHwubJrU82F3Lm1Fp6789VQ0/3RJKfsmRXjqfaTA++23CvC3hqmqe/2GEt6Kw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cluster-key-slot": "1.1.2",
|
||||
"generic-pool": "3.9.0",
|
||||
|
|
@ -3474,6 +3476,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
|
||||
"integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
|
|
@ -3710,6 +3713,7 @@
|
|||
"integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "6.21.0",
|
||||
"@typescript-eslint/types": "6.21.0",
|
||||
|
|
@ -3927,6 +3931,7 @@
|
|||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -4453,6 +4458,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.3",
|
||||
"caniuse-lite": "^1.0.30001741",
|
||||
|
|
@ -5663,6 +5669,7 @@
|
|||
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.6.1",
|
||||
|
|
@ -7425,6 +7432,7 @@
|
|||
"integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jest/core": "^29.7.0",
|
||||
"@jest/types": "^29.6.3",
|
||||
|
|
@ -8394,7 +8402,6 @@
|
|||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
|
|
@ -9283,6 +9290,7 @@
|
|||
"resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
|
||||
"integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"pg-connection-string": "^2.9.1",
|
||||
"pg-pool": "^3.10.1",
|
||||
|
|
@ -10133,7 +10141,6 @@
|
|||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
|
|
@ -10942,6 +10949,7 @@
|
|||
"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@cspotcode/source-map-support": "^0.8.0",
|
||||
"@tsconfig/node10": "^1.0.7",
|
||||
|
|
@ -11047,6 +11055,7 @@
|
|||
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ import codeMergeRoutes from "./routes/codeMergeRoutes"; // 코드 병합
|
|||
import numberingRuleRoutes from "./routes/numberingRuleRoutes"; // 채번 규칙 관리
|
||||
import entitySearchRoutes from "./routes/entitySearchRoutes"; // 엔티티 검색
|
||||
import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면 임베딩 및 데이터 전달
|
||||
import screenGroupRoutes from "./routes/screenGroupRoutes"; // 화면 그룹 관리
|
||||
import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
|
||||
import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
|
||||
import taxInvoiceRoutes from "./routes/taxInvoiceRoutes"; // 세금계산서 관리
|
||||
|
|
@ -197,6 +198,7 @@ app.use("/api/multilang", multilangRoutes);
|
|||
app.use("/api/table-management", tableManagementRoutes);
|
||||
app.use("/api/table-management", entityJoinRoutes); // 🎯 Entity 조인 기능
|
||||
app.use("/api/screen-management", screenManagementRoutes);
|
||||
app.use("/api/screen-groups", screenGroupRoutes); // 화면 그룹 관리
|
||||
app.use("/api/common-codes", commonCodeRoutes);
|
||||
app.use("/api/dynamic-form", dynamicFormRoutes);
|
||||
app.use("/api/files", fileRoutes);
|
||||
|
|
|
|||
|
|
@ -553,10 +553,24 @@ export const setUserLocale = async (
|
|||
|
||||
const { locale } = req.body;
|
||||
|
||||
if (!locale || !["ko", "en", "ja", "zh"].includes(locale)) {
|
||||
if (!locale) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "유효하지 않은 로케일입니다. (ko, en, ja, zh 중 선택)",
|
||||
message: "로케일이 필요합니다.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// language_master 테이블에서 유효한 언어 코드인지 확인
|
||||
const validLang = await queryOne<{ lang_code: string }>(
|
||||
"SELECT lang_code FROM language_master WHERE lang_code = $1 AND is_active = 'Y'",
|
||||
[locale]
|
||||
);
|
||||
|
||||
if (!validLang) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: `유효하지 않은 로케일입니다: ${locale}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
|
@ -1165,6 +1179,33 @@ export async function saveMenu(
|
|||
|
||||
logger.info("메뉴 저장 성공", { savedMenu });
|
||||
|
||||
// 다국어 메뉴 카테고리 자동 생성
|
||||
try {
|
||||
const { MultiLangService } = await import("../services/multilangService");
|
||||
const multilangService = new MultiLangService();
|
||||
|
||||
// 회사명 조회
|
||||
const companyInfo = await queryOne<{ company_name: string }>(
|
||||
`SELECT company_name FROM company_mng WHERE company_code = $1`,
|
||||
[companyCode]
|
||||
);
|
||||
const companyName = companyCode === "*" ? "공통" : (companyInfo?.company_name || companyCode);
|
||||
|
||||
// 메뉴 경로 조회 및 카테고리 생성
|
||||
const menuPath = await multilangService.getMenuPath(savedMenu.objid.toString());
|
||||
await multilangService.ensureMenuCategory(companyCode, companyName, menuPath);
|
||||
|
||||
logger.info("메뉴 다국어 카테고리 생성 완료", {
|
||||
menuObjId: savedMenu.objid.toString(),
|
||||
menuPath,
|
||||
});
|
||||
} catch (categoryError) {
|
||||
logger.warn("메뉴 다국어 카테고리 생성 실패 (메뉴 저장은 성공)", {
|
||||
menuObjId: savedMenu.objid.toString(),
|
||||
error: categoryError,
|
||||
});
|
||||
}
|
||||
|
||||
const response: ApiResponse<any> = {
|
||||
success: true,
|
||||
message: "메뉴가 성공적으로 저장되었습니다.",
|
||||
|
|
@ -2649,6 +2690,24 @@ export const createCompany = async (
|
|||
});
|
||||
}
|
||||
|
||||
// 다국어 카테고리 자동 생성
|
||||
try {
|
||||
const { MultiLangService } = await import("../services/multilangService");
|
||||
const multilangService = new MultiLangService();
|
||||
await multilangService.ensureCompanyCategory(
|
||||
createdCompany.company_code,
|
||||
createdCompany.company_name
|
||||
);
|
||||
logger.info("회사 다국어 카테고리 생성 완료", {
|
||||
companyCode: createdCompany.company_code,
|
||||
});
|
||||
} catch (categoryError) {
|
||||
logger.warn("회사 다국어 카테고리 생성 실패 (회사 등록은 성공)", {
|
||||
companyCode: createdCompany.company_code,
|
||||
error: categoryError,
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("회사 등록 성공", {
|
||||
companyCode: createdCompany.company_code,
|
||||
companyName: createdCompany.company_name,
|
||||
|
|
@ -3058,6 +3117,23 @@ export const updateProfile = async (
|
|||
}
|
||||
|
||||
if (locale !== undefined) {
|
||||
// language_master 테이블에서 유효한 언어 코드인지 확인
|
||||
const validLang = await queryOne<{ lang_code: string }>(
|
||||
"SELECT lang_code FROM language_master WHERE lang_code = $1 AND is_active = 'Y'",
|
||||
[locale]
|
||||
);
|
||||
|
||||
if (!validLang) {
|
||||
res.status(400).json({
|
||||
result: false,
|
||||
error: {
|
||||
code: "INVALID_LOCALE",
|
||||
details: `유효하지 않은 로케일입니다: ${locale}`,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
updateFields.push(`locale = $${paramIndex}`);
|
||||
updateValues.push(locale);
|
||||
paramIndex++;
|
||||
|
|
|
|||
|
|
@ -70,11 +70,23 @@ export class EntityJoinController {
|
|||
const userField = parsedAutoFilter.userField || "companyCode";
|
||||
const userValue = ((req as any).user as any)[userField];
|
||||
|
||||
if (userValue) {
|
||||
searchConditions[filterColumn] = userValue;
|
||||
// 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 허용)
|
||||
let finalCompanyCode = userValue;
|
||||
if (parsedAutoFilter.companyCodeOverride && userValue === "*") {
|
||||
// 최고 관리자만 다른 회사 코드로 오버라이드 가능
|
||||
finalCompanyCode = parsedAutoFilter.companyCodeOverride;
|
||||
logger.info("🔓 최고 관리자 회사 코드 오버라이드:", {
|
||||
originalCompanyCode: userValue,
|
||||
overrideCompanyCode: parsedAutoFilter.companyCodeOverride,
|
||||
tableName,
|
||||
});
|
||||
}
|
||||
|
||||
if (finalCompanyCode) {
|
||||
searchConditions[filterColumn] = finalCompanyCode;
|
||||
logger.info("🔒 Entity 조인에 멀티테넌시 필터 적용:", {
|
||||
filterColumn,
|
||||
userValue,
|
||||
finalCompanyCode,
|
||||
tableName,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@ import {
|
|||
SaveLangTextsRequest,
|
||||
GetUserTextParams,
|
||||
BatchTranslationRequest,
|
||||
GenerateKeyRequest,
|
||||
CreateOverrideKeyRequest,
|
||||
ApiResponse,
|
||||
LangCategory,
|
||||
} from "../types/multilang";
|
||||
|
||||
/**
|
||||
|
|
@ -187,7 +190,7 @@ export const getLangKeys = async (
|
|||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { companyCode, menuCode, keyType, searchText } = req.query;
|
||||
const { companyCode, menuCode, keyType, searchText, categoryId } = req.query;
|
||||
logger.info("다국어 키 목록 조회 요청", {
|
||||
query: req.query,
|
||||
user: req.user,
|
||||
|
|
@ -199,6 +202,7 @@ export const getLangKeys = async (
|
|||
menuCode: menuCode as string,
|
||||
keyType: keyType as string,
|
||||
searchText: searchText as string,
|
||||
categoryId: categoryId ? parseInt(categoryId as string, 10) : undefined,
|
||||
});
|
||||
|
||||
const response: ApiResponse<any[]> = {
|
||||
|
|
@ -630,6 +634,391 @@ export const deleteLanguage = async (
|
|||
}
|
||||
};
|
||||
|
||||
// =====================================================
|
||||
// 카테고리 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* GET /api/multilang/categories
|
||||
* 카테고리 목록 조회 API (트리 구조)
|
||||
*/
|
||||
export const getCategories = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
logger.info("카테고리 목록 조회 요청", { user: req.user });
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const categories = await multiLangService.getCategories();
|
||||
|
||||
const response: ApiResponse<LangCategory[]> = {
|
||||
success: true,
|
||||
message: "카테고리 목록 조회 성공",
|
||||
data: categories,
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("카테고리 목록 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "카테고리 목록 조회 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "CATEGORY_LIST_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* GET /api/multilang/categories/:categoryId
|
||||
* 카테고리 상세 조회 API
|
||||
*/
|
||||
export const getCategoryById = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { categoryId } = req.params;
|
||||
logger.info("카테고리 상세 조회 요청", { categoryId, user: req.user });
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const category = await multiLangService.getCategoryById(parseInt(categoryId));
|
||||
|
||||
if (!category) {
|
||||
res.status(404).json({
|
||||
success: false,
|
||||
message: "카테고리를 찾을 수 없습니다.",
|
||||
error: {
|
||||
code: "CATEGORY_NOT_FOUND",
|
||||
details: `Category ID ${categoryId} not found`,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const response: ApiResponse<LangCategory> = {
|
||||
success: true,
|
||||
message: "카테고리 상세 조회 성공",
|
||||
data: category,
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("카테고리 상세 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "카테고리 상세 조회 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "CATEGORY_DETAIL_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* GET /api/multilang/categories/:categoryId/path
|
||||
* 카테고리 경로 조회 API (부모 포함)
|
||||
*/
|
||||
export const getCategoryPath = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { categoryId } = req.params;
|
||||
logger.info("카테고리 경로 조회 요청", { categoryId, user: req.user });
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const path = await multiLangService.getCategoryPath(parseInt(categoryId));
|
||||
|
||||
const response: ApiResponse<LangCategory[]> = {
|
||||
success: true,
|
||||
message: "카테고리 경로 조회 성공",
|
||||
data: path,
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("카테고리 경로 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "카테고리 경로 조회 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "CATEGORY_PATH_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// =====================================================
|
||||
// 자동 생성 및 오버라이드 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* POST /api/multilang/keys/generate
|
||||
* 키 자동 생성 API
|
||||
*/
|
||||
export const generateKey = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const generateData: GenerateKeyRequest = req.body;
|
||||
logger.info("키 자동 생성 요청", { generateData, user: req.user });
|
||||
|
||||
// 필수 입력값 검증
|
||||
if (!generateData.companyCode || !generateData.categoryId || !generateData.keyMeaning) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "회사 코드, 카테고리 ID, 키 의미는 필수입니다.",
|
||||
error: {
|
||||
code: "MISSING_REQUIRED_FIELDS",
|
||||
details: "companyCode, categoryId, and keyMeaning are required",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 권한 검사: 공통 키(*)는 최고 관리자만 생성 가능
|
||||
if (generateData.companyCode === "*" && req.user?.companyCode !== "*") {
|
||||
res.status(403).json({
|
||||
success: false,
|
||||
message: "공통 키는 최고 관리자만 생성할 수 있습니다.",
|
||||
error: {
|
||||
code: "PERMISSION_DENIED",
|
||||
details: "Only super admin can create common keys",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 회사 관리자는 자기 회사 키만 생성 가능
|
||||
if (generateData.companyCode !== "*" &&
|
||||
req.user?.companyCode !== "*" &&
|
||||
generateData.companyCode !== req.user?.companyCode) {
|
||||
res.status(403).json({
|
||||
success: false,
|
||||
message: "다른 회사의 키를 생성할 권한이 없습니다.",
|
||||
error: {
|
||||
code: "PERMISSION_DENIED",
|
||||
details: "Cannot create keys for other companies",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const keyId = await multiLangService.generateKey({
|
||||
...generateData,
|
||||
createdBy: req.user?.userId || "system",
|
||||
});
|
||||
|
||||
const response: ApiResponse<number> = {
|
||||
success: true,
|
||||
message: "키가 성공적으로 생성되었습니다.",
|
||||
data: keyId,
|
||||
};
|
||||
|
||||
res.status(201).json(response);
|
||||
} catch (error) {
|
||||
logger.error("키 자동 생성 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "키 자동 생성 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "KEY_GENERATE_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* POST /api/multilang/keys/preview
|
||||
* 키 미리보기 API
|
||||
*/
|
||||
export const previewKey = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { categoryId, keyMeaning, companyCode } = req.body;
|
||||
logger.info("키 미리보기 요청", { categoryId, keyMeaning, companyCode, user: req.user });
|
||||
|
||||
if (!categoryId || !keyMeaning || !companyCode) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "카테고리 ID, 키 의미, 회사 코드는 필수입니다.",
|
||||
error: {
|
||||
code: "MISSING_REQUIRED_FIELDS",
|
||||
details: "categoryId, keyMeaning, and companyCode are required",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const preview = await multiLangService.previewGeneratedKey(
|
||||
parseInt(categoryId),
|
||||
keyMeaning,
|
||||
companyCode
|
||||
);
|
||||
|
||||
const response: ApiResponse<{
|
||||
langKey: string;
|
||||
exists: boolean;
|
||||
isOverride: boolean;
|
||||
baseKeyId?: number;
|
||||
}> = {
|
||||
success: true,
|
||||
message: "키 미리보기 성공",
|
||||
data: preview,
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("키 미리보기 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "키 미리보기 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "KEY_PREVIEW_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* POST /api/multilang/keys/override
|
||||
* 오버라이드 키 생성 API
|
||||
*/
|
||||
export const createOverrideKey = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const overrideData: CreateOverrideKeyRequest = req.body;
|
||||
logger.info("오버라이드 키 생성 요청", { overrideData, user: req.user });
|
||||
|
||||
// 필수 입력값 검증
|
||||
if (!overrideData.companyCode || !overrideData.baseKeyId) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "회사 코드와 원본 키 ID는 필수입니다.",
|
||||
error: {
|
||||
code: "MISSING_REQUIRED_FIELDS",
|
||||
details: "companyCode and baseKeyId are required",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 최고 관리자(*)는 오버라이드 키를 만들 수 없음 (이미 공통 키)
|
||||
if (overrideData.companyCode === "*") {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "공통 키에 대한 오버라이드는 생성할 수 없습니다.",
|
||||
error: {
|
||||
code: "INVALID_OVERRIDE",
|
||||
details: "Cannot create override for common keys",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 회사 관리자는 자기 회사 오버라이드만 생성 가능
|
||||
if (req.user?.companyCode !== "*" &&
|
||||
overrideData.companyCode !== req.user?.companyCode) {
|
||||
res.status(403).json({
|
||||
success: false,
|
||||
message: "다른 회사의 오버라이드 키를 생성할 권한이 없습니다.",
|
||||
error: {
|
||||
code: "PERMISSION_DENIED",
|
||||
details: "Cannot create override keys for other companies",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const keyId = await multiLangService.createOverrideKey({
|
||||
...overrideData,
|
||||
createdBy: req.user?.userId || "system",
|
||||
});
|
||||
|
||||
const response: ApiResponse<number> = {
|
||||
success: true,
|
||||
message: "오버라이드 키가 성공적으로 생성되었습니다.",
|
||||
data: keyId,
|
||||
};
|
||||
|
||||
res.status(201).json(response);
|
||||
} catch (error) {
|
||||
logger.error("오버라이드 키 생성 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "오버라이드 키 생성 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "OVERRIDE_KEY_CREATE_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* GET /api/multilang/keys/overrides/:companyCode
|
||||
* 회사별 오버라이드 키 목록 조회 API
|
||||
*/
|
||||
export const getOverrideKeys = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { companyCode } = req.params;
|
||||
logger.info("오버라이드 키 목록 조회 요청", { companyCode, user: req.user });
|
||||
|
||||
// 권한 검사: 최고 관리자 또는 해당 회사 관리자만 조회 가능
|
||||
if (req.user?.companyCode !== "*" && companyCode !== req.user?.companyCode) {
|
||||
res.status(403).json({
|
||||
success: false,
|
||||
message: "다른 회사의 오버라이드 키를 조회할 권한이 없습니다.",
|
||||
error: {
|
||||
code: "PERMISSION_DENIED",
|
||||
details: "Cannot view override keys for other companies",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const keys = await multiLangService.getOverrideKeys(companyCode);
|
||||
|
||||
const response: ApiResponse<any[]> = {
|
||||
success: true,
|
||||
message: "오버라이드 키 목록 조회 성공",
|
||||
data: keys,
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("오버라이드 키 목록 조회 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "오버라이드 키 목록 조회 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "OVERRIDE_KEYS_LIST_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* POST /api/multilang/batch
|
||||
* 다국어 텍스트 배치 조회 API
|
||||
|
|
@ -710,3 +1099,86 @@ export const getBatchTranslations = async (
|
|||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* POST /api/multilang/screen-labels
|
||||
* 화면 라벨 다국어 키 자동 생성 API
|
||||
*/
|
||||
export const generateScreenLabelKeys = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const { screenId, menuObjId, labels } = req.body;
|
||||
|
||||
logger.info("화면 라벨 다국어 키 생성 요청", {
|
||||
screenId,
|
||||
menuObjId,
|
||||
labelCount: labels?.length,
|
||||
user: req.user,
|
||||
});
|
||||
|
||||
// 필수 파라미터 검증
|
||||
if (!screenId) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "screenId는 필수입니다.",
|
||||
error: { code: "MISSING_SCREEN_ID" },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!labels || !Array.isArray(labels) || labels.length === 0) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "labels 배열이 필요합니다.",
|
||||
error: { code: "MISSING_LABELS" },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 화면의 회사 정보 조회 (사용자 회사가 아닌 화면 소속 회사 기준)
|
||||
const { queryOne } = await import("../database/db");
|
||||
const screenInfo = await queryOne<{ company_code: string }>(
|
||||
`SELECT company_code FROM screen_definitions WHERE screen_id = $1`,
|
||||
[screenId]
|
||||
);
|
||||
const companyCode = screenInfo?.company_code || req.user?.companyCode || "*";
|
||||
|
||||
// 회사명 조회
|
||||
const companyInfo = await queryOne<{ company_name: string }>(
|
||||
`SELECT company_name FROM company_mng WHERE company_code = $1`,
|
||||
[companyCode]
|
||||
);
|
||||
const companyName = companyCode === "*" ? "공통" : (companyInfo?.company_name || companyCode);
|
||||
|
||||
logger.info("화면 소속 회사 정보", { screenId, companyCode, companyName });
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const results = await multiLangService.generateScreenLabelKeys({
|
||||
screenId: Number(screenId),
|
||||
companyCode,
|
||||
companyName,
|
||||
menuObjId,
|
||||
labels,
|
||||
});
|
||||
|
||||
const response: ApiResponse<typeof results> = {
|
||||
success: true,
|
||||
message: `${results.length}개의 다국어 키가 생성되었습니다.`,
|
||||
data: results,
|
||||
};
|
||||
|
||||
res.status(200).json(response);
|
||||
} catch (error) {
|
||||
logger.error("화면 라벨 다국어 키 생성 실패:", error);
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: "화면 라벨 다국어 키 생성 중 오류가 발생했습니다.",
|
||||
error: {
|
||||
code: "SCREEN_LABEL_KEY_GENERATION_ERROR",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -775,18 +775,25 @@ export async function getTableData(
|
|||
const userField = autoFilter?.userField || "companyCode";
|
||||
const userValue = (req.user as any)[userField];
|
||||
|
||||
// 🆕 최고 관리자(company_code = '*')는 모든 회사 데이터 조회 가능
|
||||
if (userValue && userValue !== "*") {
|
||||
enhancedSearch[filterColumn] = userValue;
|
||||
// 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 허용)
|
||||
let finalCompanyCode = userValue;
|
||||
if (autoFilter?.companyCodeOverride && userValue === "*") {
|
||||
// 최고 관리자만 다른 회사 코드로 오버라이드 가능
|
||||
finalCompanyCode = autoFilter.companyCodeOverride;
|
||||
logger.info("🔓 최고 관리자 회사 코드 오버라이드:", {
|
||||
originalCompanyCode: userValue,
|
||||
overrideCompanyCode: autoFilter.companyCodeOverride,
|
||||
tableName,
|
||||
});
|
||||
}
|
||||
|
||||
if (finalCompanyCode) {
|
||||
enhancedSearch[filterColumn] = finalCompanyCode;
|
||||
|
||||
logger.info("🔍 현재 사용자 필터 적용:", {
|
||||
filterColumn,
|
||||
userField,
|
||||
userValue,
|
||||
tableName,
|
||||
});
|
||||
} else if (userValue === "*") {
|
||||
logger.info("🔓 최고 관리자 - 회사 필터 미적용 (모든 회사 데이터 조회)", {
|
||||
userValue: finalCompanyCode,
|
||||
tableName,
|
||||
});
|
||||
} else {
|
||||
|
|
@ -798,7 +805,10 @@ export async function getTableData(
|
|||
}
|
||||
|
||||
// 🆕 최종 검색 조건 로그
|
||||
logger.info(`🔍 최종 검색 조건 (enhancedSearch):`, JSON.stringify(enhancedSearch));
|
||||
logger.info(
|
||||
`🔍 최종 검색 조건 (enhancedSearch):`,
|
||||
JSON.stringify(enhancedSearch)
|
||||
);
|
||||
|
||||
// 데이터 조회
|
||||
const result = await tableManagementService.getTableData(tableName, {
|
||||
|
|
@ -883,7 +893,10 @@ export async function addTableData(
|
|||
const companyCode = req.user?.companyCode;
|
||||
if (companyCode && !data.company_code) {
|
||||
// 테이블에 company_code 컬럼이 있는지 확인
|
||||
const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
|
||||
const hasCompanyCodeColumn = await tableManagementService.hasColumn(
|
||||
tableName,
|
||||
"company_code"
|
||||
);
|
||||
if (hasCompanyCodeColumn) {
|
||||
data.company_code = companyCode;
|
||||
logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`);
|
||||
|
|
@ -893,7 +906,10 @@ export async function addTableData(
|
|||
// 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우)
|
||||
const userId = req.user?.userId;
|
||||
if (userId && !data.writer) {
|
||||
const hasWriterColumn = await tableManagementService.hasColumn(tableName, "writer");
|
||||
const hasWriterColumn = await tableManagementService.hasColumn(
|
||||
tableName,
|
||||
"writer"
|
||||
);
|
||||
if (hasWriterColumn) {
|
||||
data.writer = userId;
|
||||
logger.info(`writer 자동 추가 - ${userId}`);
|
||||
|
|
@ -911,11 +927,13 @@ export async function addTableData(
|
|||
savedColumns?: string[];
|
||||
}> = {
|
||||
success: true,
|
||||
message: result.skippedColumns.length > 0
|
||||
? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
|
||||
: "테이블 데이터를 성공적으로 추가했습니다.",
|
||||
message:
|
||||
result.skippedColumns.length > 0
|
||||
? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
|
||||
: "테이블 데이터를 성공적으로 추가했습니다.",
|
||||
data: {
|
||||
skippedColumns: result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
|
||||
skippedColumns:
|
||||
result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
|
||||
savedColumns: result.savedColumns,
|
||||
},
|
||||
};
|
||||
|
|
@ -1645,10 +1663,10 @@ export async function toggleLogTable(
|
|||
|
||||
/**
|
||||
* 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
|
||||
*
|
||||
*
|
||||
* @route GET /api/table-management/menu/:menuObjid/category-columns
|
||||
* @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
|
||||
*
|
||||
*
|
||||
* 예시:
|
||||
* - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
|
||||
* - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
|
||||
|
|
@ -1661,7 +1679,10 @@ export async function getCategoryColumnsByMenu(
|
|||
const { menuObjid } = req.params;
|
||||
const companyCode = req.user?.companyCode;
|
||||
|
||||
logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { menuObjid, companyCode });
|
||||
logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", {
|
||||
menuObjid,
|
||||
companyCode,
|
||||
});
|
||||
|
||||
if (!menuObjid) {
|
||||
res.status(400).json({
|
||||
|
|
@ -1687,8 +1708,11 @@ export async function getCategoryColumnsByMenu(
|
|||
|
||||
if (mappingTableExists) {
|
||||
// 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
|
||||
logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
|
||||
|
||||
logger.info(
|
||||
"🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)",
|
||||
{ menuObjid, companyCode }
|
||||
);
|
||||
|
||||
// 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
|
||||
const ancestorMenuQuery = `
|
||||
WITH RECURSIVE menu_hierarchy AS (
|
||||
|
|
@ -1710,17 +1734,21 @@ export async function getCategoryColumnsByMenu(
|
|||
ARRAY_AGG(menu_name_kor) as menu_names
|
||||
FROM menu_hierarchy
|
||||
`;
|
||||
|
||||
const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
|
||||
const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
|
||||
|
||||
const ancestorMenuResult = await pool.query(ancestorMenuQuery, [
|
||||
parseInt(menuObjid),
|
||||
]);
|
||||
const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [
|
||||
parseInt(menuObjid),
|
||||
];
|
||||
const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
|
||||
|
||||
logger.info("✅ 상위 메뉴 계층 조회 완료", {
|
||||
ancestorMenuObjids,
|
||||
|
||||
logger.info("✅ 상위 메뉴 계층 조회 완료", {
|
||||
ancestorMenuObjids,
|
||||
ancestorMenuNames,
|
||||
hierarchyDepth: ancestorMenuObjids.length
|
||||
hierarchyDepth: ancestorMenuObjids.length,
|
||||
});
|
||||
|
||||
|
||||
// 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
|
||||
const columnsQuery = `
|
||||
SELECT DISTINCT
|
||||
|
|
@ -1750,20 +1778,31 @@ export async function getCategoryColumnsByMenu(
|
|||
AND ttc.input_type = 'category'
|
||||
ORDER BY ttc.table_name, ccm.logical_column_name
|
||||
`;
|
||||
|
||||
columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
|
||||
logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", {
|
||||
rowCount: columnsResult.rows.length,
|
||||
columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
|
||||
});
|
||||
|
||||
columnsResult = await pool.query(columnsQuery, [
|
||||
companyCode,
|
||||
ancestorMenuObjids,
|
||||
]);
|
||||
logger.info(
|
||||
"✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
|
||||
{
|
||||
rowCount: columnsResult.rows.length,
|
||||
columns: columnsResult.rows.map(
|
||||
(r: any) => `${r.tableName}.${r.columnName}`
|
||||
),
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
|
||||
logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
|
||||
|
||||
logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", {
|
||||
menuObjid,
|
||||
companyCode,
|
||||
});
|
||||
|
||||
// 형제 메뉴 조회
|
||||
const { getSiblingMenuObjids } = await import("../services/menuService");
|
||||
const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
|
||||
|
||||
|
||||
// 형제 메뉴들이 사용하는 테이블 조회
|
||||
const tablesQuery = `
|
||||
SELECT DISTINCT sd.table_name
|
||||
|
|
@ -1773,11 +1812,17 @@ export async function getCategoryColumnsByMenu(
|
|||
AND sma.company_code = $2
|
||||
AND sd.table_name IS NOT NULL
|
||||
`;
|
||||
|
||||
const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
|
||||
|
||||
const tablesResult = await pool.query(tablesQuery, [
|
||||
siblingObjids,
|
||||
companyCode,
|
||||
]);
|
||||
const tableNames = tablesResult.rows.map((row: any) => row.table_name);
|
||||
|
||||
logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
|
||||
|
||||
logger.info("✅ 형제 메뉴 테이블 조회 완료", {
|
||||
tableNames,
|
||||
count: tableNames.length,
|
||||
});
|
||||
|
||||
if (tableNames.length === 0) {
|
||||
res.json({
|
||||
|
|
@ -1787,7 +1832,7 @@ export async function getCategoryColumnsByMenu(
|
|||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const columnsQuery = `
|
||||
SELECT
|
||||
ttc.table_name AS "tableName",
|
||||
|
|
@ -1812,13 +1857,15 @@ export async function getCategoryColumnsByMenu(
|
|||
AND ttc.input_type = 'category'
|
||||
ORDER BY ttc.table_name, ttc.column_name
|
||||
`;
|
||||
|
||||
|
||||
columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]);
|
||||
logger.info("✅ 레거시 방식 조회 완료", { rowCount: columnsResult.rows.length });
|
||||
logger.info("✅ 레거시 방식 조회 완료", {
|
||||
rowCount: columnsResult.rows.length,
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("✅ 카테고리 컬럼 조회 완료", {
|
||||
columnCount: columnsResult.rows.length
|
||||
|
||||
logger.info("✅ 카테고리 컬럼 조회 완료", {
|
||||
columnCount: columnsResult.rows.length,
|
||||
});
|
||||
|
||||
res.json({
|
||||
|
|
@ -1843,9 +1890,9 @@ export async function getCategoryColumnsByMenu(
|
|||
|
||||
/**
|
||||
* 범용 다중 테이블 저장 API
|
||||
*
|
||||
*
|
||||
* 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다.
|
||||
*
|
||||
*
|
||||
* 요청 본문:
|
||||
* {
|
||||
* mainTable: { tableName: string, primaryKeyColumn: string },
|
||||
|
|
@ -1915,23 +1962,29 @@ export async function multiTableSave(
|
|||
}
|
||||
|
||||
let mainResult: any;
|
||||
|
||||
|
||||
if (isUpdate && pkValue) {
|
||||
// UPDATE
|
||||
const updateColumns = Object.keys(mainData)
|
||||
.filter(col => col !== pkColumn)
|
||||
.filter((col) => col !== pkColumn)
|
||||
.map((col, idx) => `"${col}" = $${idx + 1}`)
|
||||
.join(", ");
|
||||
const updateValues = Object.keys(mainData)
|
||||
.filter(col => col !== pkColumn)
|
||||
.map(col => mainData[col]);
|
||||
|
||||
.filter((col) => col !== pkColumn)
|
||||
.map((col) => mainData[col]);
|
||||
|
||||
// updated_at 컬럼 존재 여부 확인
|
||||
const hasUpdatedAt = await client.query(`
|
||||
const hasUpdatedAt = await client.query(
|
||||
`
|
||||
SELECT 1 FROM information_schema.columns
|
||||
WHERE table_name = $1 AND column_name = 'updated_at'
|
||||
`, [mainTableName]);
|
||||
const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
|
||||
`,
|
||||
[mainTableName]
|
||||
);
|
||||
const updatedAtClause =
|
||||
hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
|
||||
? ", updated_at = NOW()"
|
||||
: "";
|
||||
|
||||
const updateQuery = `
|
||||
UPDATE "${mainTableName}"
|
||||
|
|
@ -1940,29 +1993,43 @@ export async function multiTableSave(
|
|||
${companyCode !== "*" ? `AND company_code = $${updateValues.length + 2}` : ""}
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
const updateParams = companyCode !== "*"
|
||||
? [...updateValues, pkValue, companyCode]
|
||||
: [...updateValues, pkValue];
|
||||
|
||||
logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
|
||||
|
||||
const updateParams =
|
||||
companyCode !== "*"
|
||||
? [...updateValues, pkValue, companyCode]
|
||||
: [...updateValues, pkValue];
|
||||
|
||||
logger.info("메인 테이블 UPDATE:", {
|
||||
query: updateQuery,
|
||||
paramsCount: updateParams.length,
|
||||
});
|
||||
mainResult = await client.query(updateQuery, updateParams);
|
||||
} else {
|
||||
// INSERT
|
||||
const columns = Object.keys(mainData).map(col => `"${col}"`).join(", ");
|
||||
const placeholders = Object.keys(mainData).map((_, idx) => `$${idx + 1}`).join(", ");
|
||||
const columns = Object.keys(mainData)
|
||||
.map((col) => `"${col}"`)
|
||||
.join(", ");
|
||||
const placeholders = Object.keys(mainData)
|
||||
.map((_, idx) => `$${idx + 1}`)
|
||||
.join(", ");
|
||||
const values = Object.values(mainData);
|
||||
|
||||
// updated_at 컬럼 존재 여부 확인
|
||||
const hasUpdatedAt = await client.query(`
|
||||
const hasUpdatedAt = await client.query(
|
||||
`
|
||||
SELECT 1 FROM information_schema.columns
|
||||
WHERE table_name = $1 AND column_name = 'updated_at'
|
||||
`, [mainTableName]);
|
||||
const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
|
||||
`,
|
||||
[mainTableName]
|
||||
);
|
||||
const updatedAtClause =
|
||||
hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
|
||||
? ", updated_at = NOW()"
|
||||
: "";
|
||||
|
||||
const updateSetClause = Object.keys(mainData)
|
||||
.filter(col => col !== pkColumn)
|
||||
.map(col => `"${col}" = EXCLUDED."${col}"`)
|
||||
.filter((col) => col !== pkColumn)
|
||||
.map((col) => `"${col}" = EXCLUDED."${col}"`)
|
||||
.join(", ");
|
||||
|
||||
const insertQuery = `
|
||||
|
|
@ -1973,7 +2040,10 @@ export async function multiTableSave(
|
|||
RETURNING *
|
||||
`;
|
||||
|
||||
logger.info("메인 테이블 INSERT/UPSERT:", { query: insertQuery, paramsCount: values.length });
|
||||
logger.info("메인 테이블 INSERT/UPSERT:", {
|
||||
query: insertQuery,
|
||||
paramsCount: values.length,
|
||||
});
|
||||
mainResult = await client.query(insertQuery, values);
|
||||
}
|
||||
|
||||
|
|
@ -1992,12 +2062,15 @@ export async function multiTableSave(
|
|||
const { tableName, linkColumn, items, options } = subTableConfig;
|
||||
|
||||
// saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
|
||||
const hasSaveMainAsFirst = options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0;
|
||||
|
||||
const hasSaveMainAsFirst =
|
||||
options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0;
|
||||
|
||||
if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
|
||||
logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
|
||||
logger.info(
|
||||
`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
|
@ -2010,15 +2083,20 @@ export async function multiTableSave(
|
|||
|
||||
// 기존 데이터 삭제 옵션
|
||||
if (options?.deleteExistingBefore && linkColumn?.subColumn) {
|
||||
const deleteQuery = options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
|
||||
: `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
|
||||
|
||||
const deleteParams = options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? [savedPkValue, options.subMarkerValue ?? false]
|
||||
: [savedPkValue];
|
||||
const deleteQuery =
|
||||
options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
|
||||
: `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { deleteQuery, deleteParams });
|
||||
const deleteParams =
|
||||
options?.deleteOnlySubItems && options?.mainMarkerColumn
|
||||
? [savedPkValue, options.subMarkerValue ?? false]
|
||||
: [savedPkValue];
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, {
|
||||
deleteQuery,
|
||||
deleteParams,
|
||||
});
|
||||
await client.query(deleteQuery, deleteParams);
|
||||
}
|
||||
|
||||
|
|
@ -2031,7 +2109,12 @@ export async function multiTableSave(
|
|||
linkColumn,
|
||||
mainDataKeys: Object.keys(mainData),
|
||||
});
|
||||
if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
|
||||
if (
|
||||
options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0 &&
|
||||
linkColumn?.subColumn
|
||||
) {
|
||||
const mainSubItem: Record<string, any> = {
|
||||
[linkColumn.subColumn]: savedPkValue,
|
||||
};
|
||||
|
|
@ -2045,7 +2128,8 @@ export async function multiTableSave(
|
|||
|
||||
// 메인 마커 설정
|
||||
if (options.mainMarkerColumn) {
|
||||
mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
|
||||
mainSubItem[options.mainMarkerColumn] =
|
||||
options.mainMarkerValue ?? true;
|
||||
}
|
||||
|
||||
// company_code 추가
|
||||
|
|
@ -2068,20 +2152,30 @@ export async function multiTableSave(
|
|||
if (companyCode !== "*") {
|
||||
checkParams.push(companyCode);
|
||||
}
|
||||
|
||||
|
||||
const existingResult = await client.query(checkQuery, checkParams);
|
||||
|
||||
|
||||
if (existingResult.rows.length > 0) {
|
||||
// UPDATE
|
||||
const updateColumns = Object.keys(mainSubItem)
|
||||
.filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
|
||||
.filter(
|
||||
(col) =>
|
||||
col !== linkColumn.subColumn &&
|
||||
col !== options.mainMarkerColumn &&
|
||||
col !== "company_code"
|
||||
)
|
||||
.map((col, idx) => `"${col}" = $${idx + 1}`)
|
||||
.join(", ");
|
||||
|
||||
|
||||
const updateValues = Object.keys(mainSubItem)
|
||||
.filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
|
||||
.map(col => mainSubItem[col]);
|
||||
|
||||
.filter(
|
||||
(col) =>
|
||||
col !== linkColumn.subColumn &&
|
||||
col !== options.mainMarkerColumn &&
|
||||
col !== "company_code"
|
||||
)
|
||||
.map((col) => mainSubItem[col]);
|
||||
|
||||
if (updateColumns) {
|
||||
const updateQuery = `
|
||||
UPDATE "${tableName}"
|
||||
|
|
@ -2100,14 +2194,26 @@ export async function multiTableSave(
|
|||
}
|
||||
|
||||
const updateResult = await client.query(updateQuery, updateParams);
|
||||
subTableResults.push({ tableName, type: "main", data: updateResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "main",
|
||||
data: updateResult.rows[0],
|
||||
});
|
||||
} else {
|
||||
subTableResults.push({ tableName, type: "main", data: existingResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "main",
|
||||
data: existingResult.rows[0],
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// INSERT
|
||||
const mainSubColumns = Object.keys(mainSubItem).map(col => `"${col}"`).join(", ");
|
||||
const mainSubPlaceholders = Object.keys(mainSubItem).map((_, idx) => `$${idx + 1}`).join(", ");
|
||||
const mainSubColumns = Object.keys(mainSubItem)
|
||||
.map((col) => `"${col}"`)
|
||||
.join(", ");
|
||||
const mainSubPlaceholders = Object.keys(mainSubItem)
|
||||
.map((_, idx) => `$${idx + 1}`)
|
||||
.join(", ");
|
||||
const mainSubValues = Object.values(mainSubItem);
|
||||
|
||||
const insertQuery = `
|
||||
|
|
@ -2117,7 +2223,11 @@ export async function multiTableSave(
|
|||
`;
|
||||
|
||||
const insertResult = await client.query(insertQuery, mainSubValues);
|
||||
subTableResults.push({ tableName, type: "main", data: insertResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "main",
|
||||
data: insertResult.rows[0],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2133,8 +2243,12 @@ export async function multiTableSave(
|
|||
item.company_code = companyCode;
|
||||
}
|
||||
|
||||
const subColumns = Object.keys(item).map(col => `"${col}"`).join(", ");
|
||||
const subPlaceholders = Object.keys(item).map((_, idx) => `$${idx + 1}`).join(", ");
|
||||
const subColumns = Object.keys(item)
|
||||
.map((col) => `"${col}"`)
|
||||
.join(", ");
|
||||
const subPlaceholders = Object.keys(item)
|
||||
.map((_, idx) => `$${idx + 1}`)
|
||||
.join(", ");
|
||||
const subValues = Object.values(item);
|
||||
|
||||
const subInsertQuery = `
|
||||
|
|
@ -2143,9 +2257,16 @@ export async function multiTableSave(
|
|||
RETURNING *
|
||||
`;
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { subInsertQuery, subValuesCount: subValues.length });
|
||||
logger.info(`서브 테이블 ${tableName} 아이템 저장:`, {
|
||||
subInsertQuery,
|
||||
subValuesCount: subValues.length,
|
||||
});
|
||||
const subResult = await client.query(subInsertQuery, subValues);
|
||||
subTableResults.push({ tableName, type: "sub", data: subResult.rows[0] });
|
||||
subTableResults.push({
|
||||
tableName,
|
||||
type: "sub",
|
||||
data: subResult.rows[0],
|
||||
});
|
||||
}
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 저장 완료`);
|
||||
|
|
@ -2188,7 +2309,7 @@ export async function multiTableSave(
|
|||
/**
|
||||
* 두 테이블 간의 엔티티 관계 자동 감지
|
||||
* GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy
|
||||
*
|
||||
*
|
||||
* column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
|
||||
* 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
|
||||
*/
|
||||
|
|
@ -2199,7 +2320,9 @@ export async function getTableEntityRelations(
|
|||
try {
|
||||
const { leftTable, rightTable } = req.query;
|
||||
|
||||
logger.info(`=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`);
|
||||
logger.info(
|
||||
`=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`
|
||||
);
|
||||
|
||||
if (!leftTable || !rightTable) {
|
||||
const response: ApiResponse<null> = {
|
||||
|
|
@ -2248,4 +2371,3 @@ export async function getTableEntityRelations(
|
|||
res.status(500).json(response);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -52,3 +52,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,3 +68,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,20 @@ import {
|
|||
getUserText,
|
||||
getLangText,
|
||||
getBatchTranslations,
|
||||
|
||||
// 카테고리 관리 API
|
||||
getCategories,
|
||||
getCategoryById,
|
||||
getCategoryPath,
|
||||
|
||||
// 자동 생성 및 오버라이드 API
|
||||
generateKey,
|
||||
previewKey,
|
||||
createOverrideKey,
|
||||
getOverrideKeys,
|
||||
|
||||
// 화면 라벨 다국어 API
|
||||
generateScreenLabelKeys,
|
||||
} from "../controllers/multilangController";
|
||||
|
||||
const router = express.Router();
|
||||
|
|
@ -51,4 +65,18 @@ router.post("/keys/:keyId/texts", saveLangTexts); // 다국어 텍스트 저장/
|
|||
router.get("/user-text/:companyCode/:menuCode/:langKey", getUserText); // 사용자별 다국어 텍스트 조회
|
||||
router.get("/text/:companyCode/:langKey/:langCode", getLangText); // 특정 키의 다국어 텍스트 조회
|
||||
|
||||
// 카테고리 관리 API
|
||||
router.get("/categories", getCategories); // 카테고리 트리 조회
|
||||
router.get("/categories/:categoryId", getCategoryById); // 카테고리 상세 조회
|
||||
router.get("/categories/:categoryId/path", getCategoryPath); // 카테고리 경로 조회
|
||||
|
||||
// 자동 생성 및 오버라이드 API
|
||||
router.post("/keys/generate", generateKey); // 키 자동 생성
|
||||
router.post("/keys/preview", previewKey); // 키 미리보기
|
||||
router.post("/keys/override", createOverrideKey); // 오버라이드 키 생성
|
||||
router.get("/keys/overrides/:companyCode", getOverrideKeys); // 오버라이드 키 목록 조회
|
||||
|
||||
// 화면 라벨 다국어 자동 생성 API
|
||||
router.post("/screen-labels", generateScreenLabelKeys); // 화면 라벨 다국어 키 자동 생성
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
import { Router } from "express";
|
||||
import { authenticateToken } from "../middleware/authMiddleware";
|
||||
import {
|
||||
// 화면 그룹
|
||||
getScreenGroups,
|
||||
getScreenGroup,
|
||||
createScreenGroup,
|
||||
updateScreenGroup,
|
||||
deleteScreenGroup,
|
||||
// 화면-그룹 연결
|
||||
addScreenToGroup,
|
||||
removeScreenFromGroup,
|
||||
updateScreenInGroup,
|
||||
// 필드 조인
|
||||
getFieldJoins,
|
||||
createFieldJoin,
|
||||
updateFieldJoin,
|
||||
deleteFieldJoin,
|
||||
// 데이터 흐름
|
||||
getDataFlows,
|
||||
createDataFlow,
|
||||
updateDataFlow,
|
||||
deleteDataFlow,
|
||||
// 화면-테이블 관계
|
||||
getTableRelations,
|
||||
createTableRelation,
|
||||
updateTableRelation,
|
||||
deleteTableRelation,
|
||||
// 화면 레이아웃 요약
|
||||
getScreenLayoutSummary,
|
||||
getMultipleScreenLayoutSummary,
|
||||
// 화면 서브 테이블 관계
|
||||
getScreenSubTables,
|
||||
} from "../controllers/screenGroupController";
|
||||
|
||||
const router = Router();
|
||||
|
||||
// 모든 라우트에 인증 미들웨어 적용
|
||||
router.use(authenticateToken);
|
||||
|
||||
// ============================================================
|
||||
// 화면 그룹 (screen_groups)
|
||||
// ============================================================
|
||||
router.get("/groups", getScreenGroups);
|
||||
router.get("/groups/:id", getScreenGroup);
|
||||
router.post("/groups", createScreenGroup);
|
||||
router.put("/groups/:id", updateScreenGroup);
|
||||
router.delete("/groups/:id", deleteScreenGroup);
|
||||
|
||||
// ============================================================
|
||||
// 화면-그룹 연결 (screen_group_screens)
|
||||
// ============================================================
|
||||
router.post("/group-screens", addScreenToGroup);
|
||||
router.put("/group-screens/:id", updateScreenInGroup);
|
||||
router.delete("/group-screens/:id", removeScreenFromGroup);
|
||||
|
||||
// ============================================================
|
||||
// 필드 조인 설정 (screen_field_joins)
|
||||
// ============================================================
|
||||
router.get("/field-joins", getFieldJoins);
|
||||
router.post("/field-joins", createFieldJoin);
|
||||
router.put("/field-joins/:id", updateFieldJoin);
|
||||
router.delete("/field-joins/:id", deleteFieldJoin);
|
||||
|
||||
// ============================================================
|
||||
// 데이터 흐름 (screen_data_flows)
|
||||
// ============================================================
|
||||
router.get("/data-flows", getDataFlows);
|
||||
router.post("/data-flows", createDataFlow);
|
||||
router.put("/data-flows/:id", updateDataFlow);
|
||||
router.delete("/data-flows/:id", deleteDataFlow);
|
||||
|
||||
// ============================================================
|
||||
// 화면-테이블 관계 (screen_table_relations)
|
||||
// ============================================================
|
||||
router.get("/table-relations", getTableRelations);
|
||||
router.post("/table-relations", createTableRelation);
|
||||
router.put("/table-relations/:id", updateTableRelation);
|
||||
router.delete("/table-relations/:id", deleteTableRelation);
|
||||
|
||||
// ============================================================
|
||||
// 화면 레이아웃 요약 (미리보기용)
|
||||
// ============================================================
|
||||
router.get("/layout-summary/:screenId", getScreenLayoutSummary);
|
||||
router.post("/layout-summary/batch", getMultipleScreenLayoutSummary);
|
||||
|
||||
// ============================================================
|
||||
// 화면 서브 테이블 관계 (조인/참조 테이블)
|
||||
// ============================================================
|
||||
router.post("/sub-tables/batch", getScreenSubTables);
|
||||
|
||||
export default router;
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -17,12 +17,30 @@ export interface LangKey {
|
|||
langKey: string;
|
||||
description?: string;
|
||||
isActive: string;
|
||||
categoryId?: number;
|
||||
keyMeaning?: string;
|
||||
usageNote?: string;
|
||||
baseKeyId?: number;
|
||||
createdDate?: Date;
|
||||
createdBy?: string;
|
||||
updatedDate?: Date;
|
||||
updatedBy?: string;
|
||||
}
|
||||
|
||||
// 카테고리 인터페이스
|
||||
export interface LangCategory {
|
||||
categoryId: number;
|
||||
categoryCode: string;
|
||||
categoryName: string;
|
||||
parentId?: number | null;
|
||||
level: number;
|
||||
keyPrefix: string;
|
||||
description?: string;
|
||||
sortOrder: number;
|
||||
isActive: string;
|
||||
children?: LangCategory[];
|
||||
}
|
||||
|
||||
export interface LangText {
|
||||
textId?: number;
|
||||
keyId: number;
|
||||
|
|
@ -63,10 +81,38 @@ export interface CreateLangKeyRequest {
|
|||
langKey: string;
|
||||
description?: string;
|
||||
isActive?: string;
|
||||
categoryId?: number;
|
||||
keyMeaning?: string;
|
||||
usageNote?: string;
|
||||
baseKeyId?: number;
|
||||
createdBy?: string;
|
||||
updatedBy?: string;
|
||||
}
|
||||
|
||||
// 자동 키 생성 요청
|
||||
export interface GenerateKeyRequest {
|
||||
companyCode: string;
|
||||
categoryId: number;
|
||||
keyMeaning: string;
|
||||
usageNote?: string;
|
||||
texts: Array<{
|
||||
langCode: string;
|
||||
langText: string;
|
||||
}>;
|
||||
createdBy?: string;
|
||||
}
|
||||
|
||||
// 오버라이드 키 생성 요청
|
||||
export interface CreateOverrideKeyRequest {
|
||||
companyCode: string;
|
||||
baseKeyId: number;
|
||||
texts: Array<{
|
||||
langCode: string;
|
||||
langText: string;
|
||||
}>;
|
||||
createdBy?: string;
|
||||
}
|
||||
|
||||
export interface UpdateLangKeyRequest {
|
||||
companyCode?: string;
|
||||
menuName?: string;
|
||||
|
|
@ -90,6 +136,8 @@ export interface GetLangKeysParams {
|
|||
menuCode?: string;
|
||||
keyType?: string;
|
||||
searchText?: string;
|
||||
categoryId?: number;
|
||||
includeOverrides?: boolean;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -588,3 +588,4 @@ const result = await executeNodeFlow(flowId, {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,597 @@
|
|||
# 다국어 관리 시스템 개선 계획서
|
||||
|
||||
## 1. 개요
|
||||
|
||||
### 1.1 현재 시스템 분석
|
||||
|
||||
현재 ERP 시스템의 다국어 관리 시스템은 기본적인 기능은 갖추고 있으나 다음과 같은 한계점이 있습니다.
|
||||
|
||||
| 항목 | 현재 상태 | 문제점 |
|
||||
|------|----------|--------|
|
||||
| 회사별 다국어 | `company_code` 컬럼 존재하나 `*`(공통)만 사용 | 회사별 커스텀 번역 불가 |
|
||||
| 언어 키 입력 | 수동 입력 (`button.add` 등) | 명명 규칙 불일치, 오타, 중복 위험 |
|
||||
| 카테고리 분류 | 없음 (`menu_name` 텍스트만 존재) | 체계적 분류/검색 불가 |
|
||||
| 권한 관리 | 없음 | 모든 사용자가 모든 키 수정 가능 |
|
||||
| 조회 우선순위 | 없음 | 회사별 오버라이드 불가 |
|
||||
|
||||
### 1.2 개선 목표
|
||||
|
||||
1. **회사별 다국어 오버라이드 시스템**: 공통 키를 기본으로 사용하되, 회사별 커스텀 번역 지원
|
||||
2. **권한 기반 접근 제어**: 공통 키는 최고 관리자만, 회사 키는 해당 회사만 수정
|
||||
3. **카테고리 기반 분류**: 2단계 계층 구조로 체계적 분류
|
||||
4. **자동 키 생성**: 카테고리 선택 + 의미 입력으로 규칙화된 키 자동 생성
|
||||
5. **실시간 중복 체크**: 키 생성 시 중복 여부 즉시 확인
|
||||
|
||||
---
|
||||
|
||||
## 2. 데이터베이스 스키마 설계
|
||||
|
||||
### 2.1 신규 테이블: multi_lang_category (카테고리 마스터)
|
||||
|
||||
```sql
|
||||
CREATE TABLE multi_lang_category (
|
||||
category_id SERIAL PRIMARY KEY,
|
||||
category_code VARCHAR(50) NOT NULL, -- BUTTON, FORM, MESSAGE 등
|
||||
category_name VARCHAR(100) NOT NULL, -- 버튼, 폼, 메시지 등
|
||||
parent_id INT4 REFERENCES multi_lang_category(category_id),
|
||||
level INT4 DEFAULT 1, -- 1=대분류, 2=세부분류
|
||||
key_prefix VARCHAR(50) NOT NULL, -- 키 생성용 prefix
|
||||
description TEXT,
|
||||
sort_order INT4 DEFAULT 0,
|
||||
is_active CHAR(1) DEFAULT 'Y',
|
||||
created_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_by VARCHAR(50),
|
||||
UNIQUE(category_code, COALESCE(parent_id, 0))
|
||||
);
|
||||
|
||||
-- 인덱스
|
||||
CREATE INDEX idx_lang_category_parent ON multi_lang_category(parent_id);
|
||||
CREATE INDEX idx_lang_category_level ON multi_lang_category(level);
|
||||
```
|
||||
|
||||
### 2.2 기존 테이블 수정: multi_lang_key_master
|
||||
|
||||
```sql
|
||||
-- 카테고리 연결 컬럼 추가
|
||||
ALTER TABLE multi_lang_key_master
|
||||
ADD COLUMN category_id INT4 REFERENCES multi_lang_category(category_id);
|
||||
|
||||
-- 키 의미 컬럼 추가 (자동 생성 시 사용자 입력값)
|
||||
ALTER TABLE multi_lang_key_master
|
||||
ADD COLUMN key_meaning VARCHAR(100);
|
||||
|
||||
-- 원본 키 참조 (오버라이드 시 원본 추적)
|
||||
ALTER TABLE multi_lang_key_master
|
||||
ADD COLUMN base_key_id INT4 REFERENCES multi_lang_key_master(key_id);
|
||||
|
||||
-- menu_name을 usage_note로 변경 (사용 위치 메모)
|
||||
ALTER TABLE multi_lang_key_master
|
||||
RENAME COLUMN menu_name TO usage_note;
|
||||
|
||||
-- 인덱스 추가
|
||||
CREATE INDEX idx_lang_key_category ON multi_lang_key_master(category_id);
|
||||
CREATE INDEX idx_lang_key_company_category ON multi_lang_key_master(company_code, category_id);
|
||||
CREATE INDEX idx_lang_key_base ON multi_lang_key_master(base_key_id);
|
||||
```
|
||||
|
||||
### 2.3 테이블 관계도
|
||||
|
||||
```
|
||||
multi_lang_category (1) ◀────────┐
|
||||
├── category_id (PK) │
|
||||
├── category_code │
|
||||
├── parent_id (자기참조) │
|
||||
└── key_prefix │
|
||||
│
|
||||
multi_lang_key_master (N) ────────┘
|
||||
├── key_id (PK)
|
||||
├── company_code ('*' = 공통)
|
||||
├── category_id (FK)
|
||||
├── lang_key (자동 생성)
|
||||
├── key_meaning (사용자 입력)
|
||||
├── base_key_id (오버라이드 시 원본)
|
||||
└── usage_note (사용 위치 메모)
|
||||
│
|
||||
▼
|
||||
multi_lang_text (N)
|
||||
├── text_id (PK)
|
||||
├── key_id (FK)
|
||||
├── lang_code (FK → language_master)
|
||||
└── lang_text
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 카테고리 체계
|
||||
|
||||
### 3.1 대분류 (Level 1)
|
||||
|
||||
| category_code | category_name | key_prefix | 설명 |
|
||||
|---------------|---------------|------------|------|
|
||||
| COMMON | 공통 | common | 범용 텍스트 |
|
||||
| BUTTON | 버튼 | button | 버튼 텍스트 |
|
||||
| FORM | 폼 | form | 폼 라벨, 플레이스홀더 |
|
||||
| TABLE | 테이블 | table | 테이블 헤더, 빈 상태 |
|
||||
| MESSAGE | 메시지 | message | 알림, 경고, 성공 메시지 |
|
||||
| MENU | 메뉴 | menu | 메뉴명, 네비게이션 |
|
||||
| MODAL | 모달 | modal | 모달/다이얼로그 |
|
||||
| VALIDATION | 검증 | validation | 유효성 검사 메시지 |
|
||||
| STATUS | 상태 | status | 상태 표시 텍스트 |
|
||||
| TOOLTIP | 툴팁 | tooltip | 툴팁, 도움말 |
|
||||
|
||||
### 3.2 세부분류 (Level 2)
|
||||
|
||||
#### BUTTON 하위
|
||||
| category_code | category_name | key_prefix |
|
||||
|---------------|---------------|------------|
|
||||
| ACTION | 액션 | action |
|
||||
| NAVIGATION | 네비게이션 | nav |
|
||||
| TOGGLE | 토글 | toggle |
|
||||
|
||||
#### FORM 하위
|
||||
| category_code | category_name | key_prefix |
|
||||
|---------------|---------------|------------|
|
||||
| LABEL | 라벨 | label |
|
||||
| PLACEHOLDER | 플레이스홀더 | placeholder |
|
||||
| HELPER | 도움말 | helper |
|
||||
|
||||
#### MESSAGE 하위
|
||||
| category_code | category_name | key_prefix |
|
||||
|---------------|---------------|------------|
|
||||
| SUCCESS | 성공 | success |
|
||||
| ERROR | 에러 | error |
|
||||
| WARNING | 경고 | warning |
|
||||
| INFO | 안내 | info |
|
||||
| CONFIRM | 확인 | confirm |
|
||||
|
||||
#### TABLE 하위
|
||||
| category_code | category_name | key_prefix |
|
||||
|---------------|---------------|------------|
|
||||
| HEADER | 헤더 | header |
|
||||
| EMPTY | 빈 상태 | empty |
|
||||
| PAGINATION | 페이지네이션 | pagination |
|
||||
|
||||
#### MENU 하위
|
||||
| category_code | category_name | key_prefix |
|
||||
|---------------|---------------|------------|
|
||||
| ADMIN | 관리자 | admin |
|
||||
| USER | 사용자 | user |
|
||||
|
||||
#### MODAL 하위
|
||||
| category_code | category_name | key_prefix |
|
||||
|---------------|---------------|------------|
|
||||
| TITLE | 제목 | title |
|
||||
| DESCRIPTION | 설명 | description |
|
||||
|
||||
### 3.3 키 자동 생성 규칙
|
||||
|
||||
**형식**: `{대분류_prefix}.{세부분류_prefix}.{key_meaning}`
|
||||
|
||||
**예시**:
|
||||
| 대분류 | 세부분류 | 의미 입력 | 생성 키 |
|
||||
|--------|----------|----------|---------|
|
||||
| BUTTON | ACTION | save | `button.action.save` |
|
||||
| BUTTON | ACTION | delete_selected | `button.action.delete_selected` |
|
||||
| FORM | LABEL | user_name | `form.label.user_name` |
|
||||
| FORM | PLACEHOLDER | search | `form.placeholder.search` |
|
||||
| MESSAGE | SUCCESS | save_complete | `message.success.save_complete` |
|
||||
| MESSAGE | ERROR | network_fail | `message.error.network_fail` |
|
||||
| TABLE | HEADER | created_date | `table.header.created_date` |
|
||||
| MENU | ADMIN | user_management | `menu.admin.user_management` |
|
||||
|
||||
---
|
||||
|
||||
## 4. 회사별 다국어 시스템
|
||||
|
||||
### 4.1 조회 우선순위
|
||||
|
||||
다국어 텍스트 조회 시 다음 우선순위를 적용합니다:
|
||||
|
||||
1. **회사 전용 키** (`company_code = 'COMPANY_A'`)
|
||||
2. **공통 키** (`company_code = '*'`)
|
||||
|
||||
```sql
|
||||
-- 조회 쿼리 예시
|
||||
WITH ranked_keys AS (
|
||||
SELECT
|
||||
km.lang_key,
|
||||
mt.lang_text,
|
||||
km.company_code,
|
||||
ROW_NUMBER() OVER (
|
||||
PARTITION BY km.lang_key
|
||||
ORDER BY CASE WHEN km.company_code = $1 THEN 1 ELSE 2 END
|
||||
) as priority
|
||||
FROM multi_lang_key_master km
|
||||
JOIN multi_lang_text mt ON km.key_id = mt.key_id
|
||||
WHERE km.lang_key = ANY($2)
|
||||
AND mt.lang_code = $3
|
||||
AND km.is_active = 'Y'
|
||||
AND km.company_code IN ($1, '*')
|
||||
)
|
||||
SELECT lang_key, lang_text
|
||||
FROM ranked_keys
|
||||
WHERE priority = 1;
|
||||
```
|
||||
|
||||
### 4.2 오버라이드 프로세스
|
||||
|
||||
1. 회사 관리자가 공통 키에서 "이 회사 전용으로 복사" 클릭
|
||||
2. 시스템이 `base_key_id`에 원본 키를 참조하는 새 키 생성
|
||||
3. 기존 번역 텍스트 복사
|
||||
4. 회사 관리자가 번역 수정
|
||||
5. 이후 해당 회사 사용자는 회사 전용 번역 사용
|
||||
|
||||
### 4.3 권한 매트릭스
|
||||
|
||||
| 작업 | 최고 관리자 (`*`) | 회사 관리자 | 일반 사용자 |
|
||||
|------|------------------|-------------|-------------|
|
||||
| 공통 키 조회 | O | O | O |
|
||||
| 공통 키 생성 | O | X | X |
|
||||
| 공통 키 수정 | O | X | X |
|
||||
| 공통 키 삭제 | O | X | X |
|
||||
| 회사 키 조회 | O | 자사만 | 자사만 |
|
||||
| 회사 키 생성 (오버라이드) | O | O | X |
|
||||
| 회사 키 수정 | O | 자사만 | X |
|
||||
| 회사 키 삭제 | O | 자사만 | X |
|
||||
| 카테고리 관리 | O | X | X |
|
||||
|
||||
---
|
||||
|
||||
## 5. API 설계
|
||||
|
||||
### 5.1 카테고리 API
|
||||
|
||||
| 엔드포인트 | 메서드 | 설명 | 권한 |
|
||||
|-----------|--------|------|------|
|
||||
| `/multilang/categories` | GET | 카테고리 목록 조회 | 인증 필요 |
|
||||
| `/multilang/categories/tree` | GET | 계층 구조로 조회 | 인증 필요 |
|
||||
| `/multilang/categories` | POST | 카테고리 생성 | 최고 관리자 |
|
||||
| `/multilang/categories/:id` | PUT | 카테고리 수정 | 최고 관리자 |
|
||||
| `/multilang/categories/:id` | DELETE | 카테고리 삭제 | 최고 관리자 |
|
||||
|
||||
### 5.2 다국어 키 API (개선)
|
||||
|
||||
| 엔드포인트 | 메서드 | 설명 | 권한 |
|
||||
|-----------|--------|------|------|
|
||||
| `/multilang/keys` | GET | 키 목록 조회 (카테고리/회사 필터) | 인증 필요 |
|
||||
| `/multilang/keys` | POST | 키 생성 | 공통: 최고관리자, 회사: 회사관리자 |
|
||||
| `/multilang/keys/:keyId` | PUT | 키 수정 | 공통: 최고관리자, 회사: 해당회사 |
|
||||
| `/multilang/keys/:keyId` | DELETE | 키 삭제 | 공통: 최고관리자, 회사: 해당회사 |
|
||||
| `/multilang/keys/:keyId/override` | POST | 공통 키를 회사 전용으로 복사 | 회사 관리자 |
|
||||
| `/multilang/keys/check` | GET | 키 중복 체크 | 인증 필요 |
|
||||
| `/multilang/keys/generate-preview` | POST | 키 자동 생성 미리보기 | 인증 필요 |
|
||||
|
||||
### 5.3 API 요청/응답 예시
|
||||
|
||||
#### 키 생성 요청
|
||||
```json
|
||||
POST /multilang/keys
|
||||
{
|
||||
"categoryId": 11, // 세부분류 ID (BUTTON > ACTION)
|
||||
"keyMeaning": "save_changes",
|
||||
"description": "변경사항 저장 버튼",
|
||||
"usageNote": "사용자 관리, 설정 화면",
|
||||
"texts": [
|
||||
{ "langCode": "KR", "langText": "저장하기" },
|
||||
{ "langCode": "US", "langText": "Save Changes" },
|
||||
{ "langCode": "JP", "langText": "保存する" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 키 생성 응답
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "다국어 키가 생성되었습니다.",
|
||||
"data": {
|
||||
"keyId": 175,
|
||||
"langKey": "button.action.save_changes",
|
||||
"companyCode": "*",
|
||||
"categoryId": 11
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 오버라이드 요청
|
||||
```json
|
||||
POST /multilang/keys/123/override
|
||||
{
|
||||
"texts": [
|
||||
{ "langCode": "KR", "langText": "등록하기" },
|
||||
{ "langCode": "US", "langText": "Register" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 프론트엔드 UI 설계
|
||||
|
||||
### 6.1 다국어 관리 페이지 리뉴얼
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────┐
|
||||
│ 다국어 관리 │
|
||||
│ 다국어 키와 번역 텍스트를 관리합니다 │
|
||||
├─────────────────────────────────────────────────────────────────────────┤
|
||||
│ [언어 관리] [다국어 키 관리] [카테고리 관리] │
|
||||
├─────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌────────────────────┐ ┌───────────────────────────────────────────────┤
|
||||
│ │ 카테고리 필터 │ │ │
|
||||
│ │ │ │ 검색: [________________] 회사: [전체 ▼] │
|
||||
│ │ ▼ 버튼 (45) │ │ [초기화] [+ 키 등록] │
|
||||
│ │ ├ 액션 (30) │ │───────────────────────────────────────────────│
|
||||
│ │ ├ 네비게이션 (10)│ │ ☐ │ 키 │ 카테고리 │ 회사 │ 상태 │
|
||||
│ │ └ 토글 (5) │ │───────────────────────────────────────────────│
|
||||
│ │ ▼ 폼 (60) │ │ ☐ │ button.action.save │ 버튼>액션 │ 공통 │ 활성 │
|
||||
│ │ ├ 라벨 (35) │ │ ☐ │ button.action.save │ 버튼>액션 │ A사 │ 활성 │
|
||||
│ │ ├ 플레이스홀더(15)│ │ ☐ │ button.action.delete │ 버튼>액션 │ 공통 │ 활성 │
|
||||
│ │ └ 도움말 (10) │ │ ☐ │ form.label.user_name │ 폼>라벨 │ 공통 │ 활성 │
|
||||
│ │ ▶ 메시지 (40) │ │───────────────────────────────────────────────│
|
||||
│ │ ▶ 테이블 (20) │ │ 페이지: [1] [2] [3] ... [10] │
|
||||
│ │ ▶ 메뉴 (9) │ │ │
|
||||
│ └────────────────────┘ └───────────────────────────────────────────────┤
|
||||
└─────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6.2 키 등록 모달
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 다국어 키 등록 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ① 카테고리 선택 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┤
|
||||
│ │ 대분류 * │ 세부 분류 * │
|
||||
│ │ ┌─────────────────────────┐ │ ┌─────────────────────────┐ │
|
||||
│ │ │ 공통 │ │ │ (대분류 먼저 선택) │ │
|
||||
│ │ │ ● 버튼 │ │ │ ● 액션 │ │
|
||||
│ │ │ 폼 │ │ │ 네비게이션 │ │
|
||||
│ │ │ 테이블 │ │ │ 토글 │ │
|
||||
│ │ │ 메시지 │ │ │ │ │
|
||||
│ │ └─────────────────────────┘ │ └─────────────────────────┘ │
|
||||
│ └───────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ② 키 정보 입력 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┤
|
||||
│ │ 키 의미 (영문) * │
|
||||
│ │ [ save_changes ] │
|
||||
│ │ 영문 소문자, 밑줄(_) 사용. 예: save, add_new, delete_all │
|
||||
│ │ │
|
||||
│ │ ───────────────────────────────────────────────────────── │
|
||||
│ │ 자동 생성 키: │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ button.action.save_changes │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │ ✓ 사용 가능한 키입니다 │
|
||||
│ └───────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ③ 설명 및 번역 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┤
|
||||
│ │ 설명 (선택) │
|
||||
│ │ [ 변경사항을 저장하는 버튼 ] │
|
||||
│ │ │
|
||||
│ │ 사용 위치 메모 (선택) │
|
||||
│ │ [ 사용자 관리, 설정 화면 ] │
|
||||
│ │ │
|
||||
│ │ ───────────────────────────────────────────────────────── │
|
||||
│ │ 번역 텍스트 │
|
||||
│ │ │
|
||||
│ │ 한국어 (KR) * [ 저장하기 ] │
|
||||
│ │ English (US) [ Save Changes ] │
|
||||
│ │ 日本語 (JP) [ 保存する ] │
|
||||
│ └───────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ [취소] [등록] │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6.3 공통 키 편집 모달 (회사 관리자용)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 다국어 키 상세 │
|
||||
│ button.action.save (공통) │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 카테고리: 버튼 > 액션 │
|
||||
│ 설명: 저장 버튼 │
|
||||
│ │
|
||||
│ ───────────────────────────────────────────────────────────── │
|
||||
│ 번역 텍스트 (읽기 전용) │
|
||||
│ │
|
||||
│ 한국어 (KR) 저장 │
|
||||
│ English (US) Save │
|
||||
│ 日本語 (JP) 保存 │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ 공통 키는 수정할 수 없습니다. │
|
||||
│ 이 회사만의 번역이 필요하시면 아래 버튼을 클릭하세요. │
|
||||
│ │
|
||||
│ [이 회사 전용으로 복사] │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ [닫기] │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6.4 회사 전용 키 생성 모달 (오버라이드)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 회사 전용 키 생성 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 원본 키: button.action.save (공통) │
|
||||
│ │
|
||||
│ 원본 번역: │
|
||||
│ ┌─────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 한국어: 저장 │ │
|
||||
│ │ English: Save │ │
|
||||
│ │ 日本語: 保存 │ │
|
||||
│ └─────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ───────────────────────────────────────────────────────────── │
|
||||
│ │
|
||||
│ 이 회사 전용 번역 텍스트: │
|
||||
│ │
|
||||
│ 한국어 (KR) * [ 등록하기 ] │
|
||||
│ English (US) [ Register ] │
|
||||
│ 日本語 (JP) [ 登録 ] │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ 회사 전용 키를 생성하면 공통 키 대신 사용됩니다. │
|
||||
│ 원본 키가 변경되어도 회사 전용 키는 영향받지 않습니다. │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ [취소] [생성] │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 구현 계획
|
||||
|
||||
### 7.1 Phase 1: 데이터베이스 마이그레이션
|
||||
|
||||
**예상 소요 시간: 2시간**
|
||||
|
||||
1. 카테고리 테이블 생성
|
||||
2. 기본 카테고리 데이터 삽입 (대분류 10개, 세부분류 약 20개)
|
||||
3. multi_lang_key_master 스키마 변경
|
||||
4. 기존 174개 키 카테고리 자동 분류 (패턴 매칭)
|
||||
|
||||
**마이그레이션 파일**: `db/migrations/075_multilang_category_system.sql`
|
||||
|
||||
### 7.2 Phase 2: 백엔드 API 개발
|
||||
|
||||
**예상 소요 시간: 4시간**
|
||||
|
||||
1. 카테고리 CRUD API
|
||||
2. 키 조회 로직 수정 (우선순위 적용)
|
||||
3. 권한 검사 미들웨어
|
||||
4. 오버라이드 API
|
||||
5. 키 중복 체크 API
|
||||
6. 키 자동 생성 미리보기 API
|
||||
|
||||
**관련 파일**:
|
||||
- `backend-node/src/controllers/multilangController.ts`
|
||||
- `backend-node/src/services/multilangService.ts`
|
||||
- `backend-node/src/routes/multilangRoutes.ts`
|
||||
|
||||
### 7.3 Phase 3: 프론트엔드 UI 개발
|
||||
|
||||
**예상 소요 시간: 6시간**
|
||||
|
||||
1. 카테고리 트리 컴포넌트
|
||||
2. 키 등록 모달 리뉴얼 (단계별 입력)
|
||||
3. 키 편집 모달 (권한별 UI 분기)
|
||||
4. 오버라이드 모달
|
||||
5. 카테고리 관리 탭 추가
|
||||
|
||||
**관련 파일**:
|
||||
- `frontend/app/(main)/admin/systemMng/i18nList/page.tsx`
|
||||
- `frontend/components/multilang/LangKeyModal.tsx` (리뉴얼)
|
||||
- `frontend/components/multilang/CategoryTree.tsx` (신규)
|
||||
- `frontend/components/multilang/OverrideModal.tsx` (신규)
|
||||
|
||||
### 7.4 Phase 4: 테스트 및 마이그레이션
|
||||
|
||||
**예상 소요 시간: 2시간**
|
||||
|
||||
1. API 테스트
|
||||
2. UI 테스트
|
||||
3. 기존 데이터 마이그레이션 검증
|
||||
4. 권한 테스트 (최고 관리자, 회사 관리자)
|
||||
|
||||
---
|
||||
|
||||
## 8. 상세 구현 일정
|
||||
|
||||
| 단계 | 작업 | 예상 시간 | 의존성 |
|
||||
|------|------|----------|--------|
|
||||
| 1.1 | 마이그레이션 SQL 작성 | 30분 | - |
|
||||
| 1.2 | 카테고리 기본 데이터 삽입 | 30분 | 1.1 |
|
||||
| 1.3 | 기존 키 카테고리 자동 분류 | 30분 | 1.2 |
|
||||
| 1.4 | 스키마 변경 검증 | 30분 | 1.3 |
|
||||
| 2.1 | 카테고리 API 개발 | 1시간 | 1.4 |
|
||||
| 2.2 | 키 조회 로직 수정 (우선순위) | 1시간 | 2.1 |
|
||||
| 2.3 | 권한 검사 로직 추가 | 30분 | 2.2 |
|
||||
| 2.4 | 오버라이드 API 개발 | 1시간 | 2.3 |
|
||||
| 2.5 | 키 생성 API 개선 (자동 생성) | 30분 | 2.4 |
|
||||
| 3.1 | 카테고리 트리 컴포넌트 | 1시간 | 2.5 |
|
||||
| 3.2 | 키 등록 모달 리뉴얼 | 2시간 | 3.1 |
|
||||
| 3.3 | 키 편집/상세 모달 | 1시간 | 3.2 |
|
||||
| 3.4 | 오버라이드 모달 | 1시간 | 3.3 |
|
||||
| 3.5 | 카테고리 관리 탭 | 1시간 | 3.4 |
|
||||
| 4.1 | 통합 테스트 | 1시간 | 3.5 |
|
||||
| 4.2 | 버그 수정 및 마무리 | 1시간 | 4.1 |
|
||||
|
||||
**총 예상 시간: 약 14시간**
|
||||
|
||||
---
|
||||
|
||||
## 9. 기대 효과
|
||||
|
||||
### 9.1 개선 전후 비교
|
||||
|
||||
| 항목 | 현재 | 개선 후 |
|
||||
|------|------|---------|
|
||||
| 키 명명 규칙 | 불규칙 (수동 입력) | 규칙화 (자동 생성) |
|
||||
| 카테고리 분류 | 없음 | 2단계 계층 구조 |
|
||||
| 회사별 다국어 | 미활용 | 오버라이드 지원 |
|
||||
| 조회 우선순위 | 없음 | 회사 전용 > 공통 |
|
||||
| 권한 관리 | 없음 | 역할별 접근 제어 |
|
||||
| 중복 체크 | 저장 시에만 | 실시간 검증 |
|
||||
| 검색/필터 | 키 이름만 | 카테고리 + 회사 + 키 |
|
||||
|
||||
### 9.2 사용자 경험 개선
|
||||
|
||||
1. **일관된 키 명명**: 자동 생성으로 규칙 준수
|
||||
2. **빠른 검색**: 카테고리 기반 필터링
|
||||
3. **회사별 커스터마이징**: 브랜드에 맞는 번역 사용
|
||||
4. **안전한 수정**: 권한 기반 보호
|
||||
|
||||
### 9.3 유지보수 개선
|
||||
|
||||
1. **체계적 분류**: 어떤 텍스트가 어디에 사용되는지 명확
|
||||
2. **변경 영향 파악**: 오버라이드 추적으로 영향 범위 확인
|
||||
3. **권한 분리**: 공통 키 보호, 회사별 자율성 보장
|
||||
|
||||
---
|
||||
|
||||
## 10. 참고 자료
|
||||
|
||||
### 10.1 관련 파일
|
||||
|
||||
| 파일 | 설명 |
|
||||
|------|------|
|
||||
| `frontend/hooks/useMultiLang.ts` | 다국어 훅 |
|
||||
| `frontend/lib/utils/multilang.ts` | 다국어 유틸리티 |
|
||||
| `frontend/app/(main)/admin/systemMng/i18nList/page.tsx` | 다국어 관리 페이지 |
|
||||
| `backend-node/src/controllers/multilangController.ts` | API 컨트롤러 |
|
||||
| `backend-node/src/services/multilangService.ts` | 비즈니스 로직 |
|
||||
| `docs/다국어_시스템_가이드.md` | 기존 시스템 가이드 |
|
||||
|
||||
### 10.2 데이터베이스 테이블
|
||||
|
||||
| 테이블 | 설명 |
|
||||
|--------|------|
|
||||
| `language_master` | 언어 마스터 (KR, US, JP) |
|
||||
| `multi_lang_key_master` | 다국어 키 마스터 |
|
||||
| `multi_lang_text` | 다국어 번역 텍스트 |
|
||||
| `multi_lang_category` | 다국어 카테고리 (신규) |
|
||||
|
||||
---
|
||||
|
||||
## 11. 변경 이력
|
||||
|
||||
| 버전 | 날짜 | 작성자 | 변경 내용 |
|
||||
|------|------|--------|----------|
|
||||
| 1.0 | 2026-01-13 | AI | 최초 작성 |
|
||||
|
||||
|
||||
|
|
@ -361,3 +361,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -347,3 +347,4 @@ const getComponentValue = (componentId: string) => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,68 +1,109 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList } from "lucide-react";
|
||||
import ScreenList from "@/components/screen/ScreenList";
|
||||
import ScreenDesigner from "@/components/screen/ScreenDesigner";
|
||||
import TemplateManager from "@/components/screen/TemplateManager";
|
||||
import { ScreenGroupTreeView } from "@/components/screen/ScreenGroupTreeView";
|
||||
import { ScreenRelationFlow } from "@/components/screen/ScreenRelationFlow";
|
||||
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
||||
import { ScreenDefinition } from "@/types/screen";
|
||||
import { screenApi } from "@/lib/api/screen";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import CreateScreenModal from "@/components/screen/CreateScreenModal";
|
||||
|
||||
// 단계별 진행을 위한 타입 정의
|
||||
type Step = "list" | "design" | "template";
|
||||
type ViewMode = "tree" | "table";
|
||||
|
||||
export default function ScreenManagementPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const [currentStep, setCurrentStep] = useState<Step>("list");
|
||||
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
|
||||
const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string; company_code?: string } | null>(null);
|
||||
const [focusedScreenIdInGroup, setFocusedScreenIdInGroup] = useState<number | null>(null);
|
||||
const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("tree");
|
||||
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
|
||||
// 화면 목록 로드
|
||||
const loadScreens = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const result = await screenApi.getScreens({ page: 1, size: 1000, searchTerm: "" });
|
||||
// screenApi.getScreens는 { data: ScreenDefinition[], total, page, size, totalPages } 형태 반환
|
||||
if (result.data && result.data.length > 0) {
|
||||
setScreens(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("화면 목록 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadScreens();
|
||||
}, [loadScreens]);
|
||||
|
||||
// URL 쿼리 파라미터로 화면 디자이너 자동 열기
|
||||
useEffect(() => {
|
||||
const openDesignerId = searchParams.get("openDesigner");
|
||||
if (openDesignerId && screens.length > 0) {
|
||||
const screenId = parseInt(openDesignerId, 10);
|
||||
const targetScreen = screens.find((s) => s.screenId === screenId);
|
||||
if (targetScreen) {
|
||||
setSelectedScreen(targetScreen);
|
||||
setCurrentStep("design");
|
||||
setStepHistory(["list", "design"]);
|
||||
}
|
||||
}
|
||||
}, [searchParams, screens]);
|
||||
|
||||
// 화면 설계 모드일 때는 전체 화면 사용
|
||||
const isDesignMode = currentStep === "design";
|
||||
|
||||
// 단계별 제목과 설명
|
||||
const stepConfig = {
|
||||
list: {
|
||||
title: "화면 목록 관리",
|
||||
description: "생성된 화면들을 확인하고 관리하세요",
|
||||
},
|
||||
design: {
|
||||
title: "화면 설계",
|
||||
description: "드래그앤드롭으로 화면을 설계하세요",
|
||||
},
|
||||
template: {
|
||||
title: "템플릿 관리",
|
||||
description: "화면 템플릿을 관리하고 재사용하세요",
|
||||
},
|
||||
};
|
||||
|
||||
// 다음 단계로 이동
|
||||
const goToNextStep = (nextStep: Step) => {
|
||||
setStepHistory((prev) => [...prev, nextStep]);
|
||||
setCurrentStep(nextStep);
|
||||
};
|
||||
|
||||
// 이전 단계로 이동
|
||||
const goToPreviousStep = () => {
|
||||
if (stepHistory.length > 1) {
|
||||
const newHistory = stepHistory.slice(0, -1);
|
||||
const previousStep = newHistory[newHistory.length - 1];
|
||||
setStepHistory(newHistory);
|
||||
setCurrentStep(previousStep);
|
||||
}
|
||||
};
|
||||
|
||||
// 특정 단계로 이동
|
||||
const goToStep = (step: Step) => {
|
||||
setCurrentStep(step);
|
||||
// 해당 단계까지의 히스토리만 유지
|
||||
const stepIndex = stepHistory.findIndex((s) => s === step);
|
||||
if (stepIndex !== -1) {
|
||||
setStepHistory(stepHistory.slice(0, stepIndex + 1));
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용 (고정 높이)
|
||||
// 화면 선택 핸들러 (개별 화면 선택 시 그룹 선택 해제)
|
||||
const handleScreenSelect = (screen: ScreenDefinition) => {
|
||||
setSelectedScreen(screen);
|
||||
setSelectedGroup(null); // 그룹 선택 해제
|
||||
};
|
||||
|
||||
// 화면 디자인 핸들러
|
||||
const handleDesignScreen = (screen: ScreenDefinition) => {
|
||||
setSelectedScreen(screen);
|
||||
goToNextStep("design");
|
||||
};
|
||||
|
||||
// 검색어로 필터링된 화면
|
||||
const filteredScreens = screens.filter((screen) =>
|
||||
screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
// 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용
|
||||
if (isDesignMode) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-background">
|
||||
|
|
@ -72,59 +113,120 @@ export default function ScreenManagementPage() {
|
|||
}
|
||||
|
||||
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>
|
||||
|
||||
{/* 단계별 내용 */}
|
||||
<div className="flex-1">
|
||||
{/* 화면 목록 단계 */}
|
||||
{currentStep === "list" && (
|
||||
<ScreenList
|
||||
onScreenSelect={setSelectedScreen}
|
||||
selectedScreen={selectedScreen}
|
||||
onDesignScreen={(screen) => {
|
||||
setSelectedScreen(screen);
|
||||
goToNextStep("design");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 템플릿 관리 단계 */}
|
||||
{currentStep === "template" && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between rounded-lg border bg-card p-4 shadow-sm">
|
||||
<h2 className="text-xl font-semibold">{stepConfig.template.title}</h2>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={goToPreviousStep}
|
||||
className="h-10 gap-2 text-sm font-medium"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
이전 단계
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => goToStep("list")}
|
||||
className="h-10 gap-2 text-sm font-medium"
|
||||
>
|
||||
목록으로 돌아가기
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<TemplateManager selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex h-screen flex-col bg-background overflow-hidden">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="flex-shrink-0 border-b bg-background px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">화면 관리</h1>
|
||||
<p className="text-sm text-muted-foreground">화면을 그룹별로 관리하고 데이터 관계를 확인합니다</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 뷰 모드 전환 */}
|
||||
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
|
||||
<TabsList className="h-9">
|
||||
<TabsTrigger value="tree" className="gap-1.5 px-3">
|
||||
<LayoutGrid className="h-4 w-4" />
|
||||
트리
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="table" className="gap-1.5 px-3">
|
||||
<LayoutList className="h-4 w-4" />
|
||||
테이블
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Button variant="outline" size="icon" onClick={loadScreens}>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={() => setIsCreateOpen(true)} className="gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
새 화면
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 메인 콘텐츠 */}
|
||||
{viewMode === "tree" ? (
|
||||
<div className="flex-1 overflow-hidden flex">
|
||||
{/* 왼쪽: 트리 구조 */}
|
||||
<div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r bg-background">
|
||||
{/* 검색 */}
|
||||
<div className="flex-shrink-0 p-3 border-b">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="화면 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 트리 뷰 */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<ScreenGroupTreeView
|
||||
screens={filteredScreens}
|
||||
selectedScreen={selectedScreen}
|
||||
onScreenSelect={handleScreenSelect}
|
||||
onScreenDesign={handleDesignScreen}
|
||||
onGroupSelect={(group) => {
|
||||
setSelectedGroup(group);
|
||||
setSelectedScreen(null); // 화면 선택 해제
|
||||
setFocusedScreenIdInGroup(null); // 포커스 초기화
|
||||
}}
|
||||
onScreenSelectInGroup={(group, screenId) => {
|
||||
// 그룹 내 화면 클릭 시
|
||||
const isNewGroup = selectedGroup?.id !== group.id;
|
||||
|
||||
if (isNewGroup) {
|
||||
// 새 그룹 진입: 포커싱 없이 시작 (첫 진입 시 망가지는 문제 방지)
|
||||
setSelectedGroup(group);
|
||||
setFocusedScreenIdInGroup(null);
|
||||
} else {
|
||||
// 같은 그룹 내에서 다른 화면 클릭: 포커싱 유지
|
||||
setFocusedScreenIdInGroup(screenId);
|
||||
}
|
||||
setSelectedScreen(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 관계 시각화 (React Flow) */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<ScreenRelationFlow
|
||||
screen={selectedScreen}
|
||||
selectedGroup={selectedGroup}
|
||||
initialFocusedScreenId={focusedScreenIdInGroup}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// 테이블 뷰 (기존 ScreenList 사용)
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<ScreenList
|
||||
onScreenSelect={handleScreenSelect}
|
||||
selectedScreen={selectedScreen}
|
||||
onDesignScreen={handleDesignScreen}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 화면 생성 모달 */}
|
||||
<CreateScreenModal
|
||||
isOpen={isCreateOpen}
|
||||
onClose={() => setIsCreateOpen(false)}
|
||||
onSuccess={() => {
|
||||
setIsCreateOpen(false);
|
||||
loadScreens();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Scroll to Top 버튼 */}
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,19 @@ import { Input } from "@/components/ui/input";
|
|||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
import { DataTable } from "@/components/common/DataTable";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import LangKeyModal from "@/components/admin/LangKeyModal";
|
||||
import LanguageModal from "@/components/admin/LanguageModal";
|
||||
import { CategoryTree } from "@/components/admin/multilang/CategoryTree";
|
||||
import { KeyGenerateModal } from "@/components/admin/multilang/KeyGenerateModal";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { LangCategory } from "@/lib/api/multilang";
|
||||
|
||||
interface Language {
|
||||
langCode: string;
|
||||
|
|
@ -29,6 +35,7 @@ interface LangKey {
|
|||
langKey: string;
|
||||
description: string;
|
||||
isActive: string;
|
||||
categoryId?: number;
|
||||
}
|
||||
|
||||
interface LangText {
|
||||
|
|
@ -59,6 +66,10 @@ export default function I18nPage() {
|
|||
const [selectedLanguages, setSelectedLanguages] = useState<Set<string>>(new Set());
|
||||
const [activeTab, setActiveTab] = useState<"keys" | "languages">("keys");
|
||||
|
||||
// 카테고리 관련 상태
|
||||
const [selectedCategory, setSelectedCategory] = useState<LangCategory | null>(null);
|
||||
const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
|
||||
|
||||
const [companies, setCompanies] = useState<Array<{ code: string; name: string }>>([]);
|
||||
|
||||
// 회사 목록 조회
|
||||
|
|
@ -92,9 +103,14 @@ export default function I18nPage() {
|
|||
};
|
||||
|
||||
// 다국어 키 목록 조회
|
||||
const fetchLangKeys = async () => {
|
||||
const fetchLangKeys = async (categoryId?: number | null) => {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/keys");
|
||||
const params = new URLSearchParams();
|
||||
if (categoryId) {
|
||||
params.append("categoryId", categoryId.toString());
|
||||
}
|
||||
const url = `/multilang/keys${params.toString() ? `?${params.toString()}` : ""}`;
|
||||
const response = await apiClient.get(url);
|
||||
const data = response.data;
|
||||
if (data.success) {
|
||||
setLangKeys(data.data);
|
||||
|
|
@ -471,6 +487,13 @@ export default function I18nPage() {
|
|||
initializeData();
|
||||
}, []);
|
||||
|
||||
// 카테고리 변경 시 키 목록 다시 조회
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
fetchLangKeys(selectedCategory?.categoryId);
|
||||
}
|
||||
}, [selectedCategory?.categoryId]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
id: "select",
|
||||
|
|
@ -678,27 +701,70 @@ export default function I18nPage() {
|
|||
|
||||
{/* 다국어 키 관리 탭 */}
|
||||
{activeTab === "keys" && (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-10">
|
||||
{/* 좌측: 언어 키 목록 (7/10) */}
|
||||
<Card className="lg:col-span-7">
|
||||
<CardHeader>
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-12">
|
||||
{/* 좌측: 카테고리 트리 (2/12) */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>언어 키 목록</CardTitle>
|
||||
<CardTitle className="text-sm">카테고리</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-2">
|
||||
<ScrollArea className="h-[500px]">
|
||||
<CategoryTree
|
||||
selectedCategoryId={selectedCategory?.categoryId || null}
|
||||
onSelectCategory={(cat) => setSelectedCategory(cat)}
|
||||
onDoubleClickCategory={(cat) => {
|
||||
setSelectedCategory(cat);
|
||||
setIsGenerateModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 중앙: 언어 키 목록 (6/12) */}
|
||||
<Card className="lg:col-span-6">
|
||||
<CardHeader className="py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm">
|
||||
언어 키 목록
|
||||
{selectedCategory && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{selectedCategory.categoryName}
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="destructive" onClick={handleDeleteSelectedKeys} disabled={selectedKeys.size === 0}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={handleDeleteSelectedKeys}
|
||||
disabled={selectedKeys.size === 0}
|
||||
>
|
||||
선택 삭제 ({selectedKeys.size})
|
||||
</Button>
|
||||
<Button onClick={handleAddKey}>새 키 추가</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleAddKey}>
|
||||
수동 추가
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setIsGenerateModalOpen(true)}
|
||||
disabled={!selectedCategory}
|
||||
>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
자동 생성
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="pt-0">
|
||||
{/* 검색 필터 영역 */}
|
||||
<div className="mb-2 grid grid-cols-1 gap-2 md:grid-cols-3">
|
||||
<div>
|
||||
<Label htmlFor="company">회사</Label>
|
||||
<Label htmlFor="company" className="text-xs">회사</Label>
|
||||
<Select value={selectedCompany} onValueChange={setSelectedCompany}>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="전체 회사" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -713,22 +779,22 @@ export default function I18nPage() {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="search">검색</Label>
|
||||
<Label htmlFor="search" className="text-xs">검색</Label>
|
||||
<Input
|
||||
placeholder="키명, 설명, 메뉴, 회사로 검색..."
|
||||
placeholder="키명, 설명으로 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<div className="text-sm text-muted-foreground">검색 결과: {getFilteredLangKeys().length}건</div>
|
||||
<div className="text-xs text-muted-foreground">결과: {getFilteredLangKeys().length}건</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 영역 */}
|
||||
<div>
|
||||
<div className="mb-2 text-sm text-muted-foreground">전체: {getFilteredLangKeys().length}건</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={getFilteredLangKeys()}
|
||||
|
|
@ -739,8 +805,8 @@ export default function I18nPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 우측: 선택된 키의 다국어 관리 (3/10) */}
|
||||
<Card className="lg:col-span-3">
|
||||
{/* 우측: 선택된 키의 다국어 관리 (4/12) */}
|
||||
<Card className="lg:col-span-4">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{selectedKey ? (
|
||||
|
|
@ -817,6 +883,18 @@ export default function I18nPage() {
|
|||
onSave={handleSaveLanguage}
|
||||
languageData={editingLanguage}
|
||||
/>
|
||||
|
||||
{/* 키 자동 생성 모달 */}
|
||||
<KeyGenerateModal
|
||||
isOpen={isGenerateModalOpen}
|
||||
onClose={() => setIsGenerateModalOpen(false)}
|
||||
selectedCategory={selectedCategory}
|
||||
companyCode={user?.companyCode || ""}
|
||||
isSuperAdmin={user?.companyCode === "*"}
|
||||
onSuccess={() => {
|
||||
fetchLangKeys(selectedCategory?.categoryId);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
|
|||
import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
|
||||
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
|
||||
import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
|
||||
import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
|
||||
|
||||
function ScreenViewPage() {
|
||||
const params = useParams();
|
||||
|
|
@ -32,9 +33,18 @@ function ScreenViewPage() {
|
|||
|
||||
// URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
|
||||
const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
|
||||
|
||||
// URL 쿼리에서 프리뷰용 company_code 가져오기
|
||||
const previewCompanyCode = searchParams.get("company_code");
|
||||
|
||||
// 프리뷰 모드 감지 (iframe에서 로드될 때)
|
||||
const isPreviewMode = searchParams.get("preview") === "true";
|
||||
|
||||
// 🆕 현재 로그인한 사용자 정보
|
||||
const { user, userName, companyCode } = useAuth();
|
||||
const { user, userName, companyCode: authCompanyCode } = useAuth();
|
||||
|
||||
// 프리뷰 모드에서는 URL 파라미터의 company_code 우선 사용
|
||||
const companyCode = previewCompanyCode || authCompanyCode;
|
||||
|
||||
// 🆕 모바일 환경 감지
|
||||
const { isMobile } = useResponsive();
|
||||
|
|
@ -233,27 +243,40 @@ function ScreenViewPage() {
|
|||
const designWidth = layout?.screenResolution?.width || 1200;
|
||||
const designHeight = layout?.screenResolution?.height || 800;
|
||||
|
||||
// 컨테이너의 실제 크기
|
||||
const containerWidth = containerRef.current.offsetWidth;
|
||||
const containerHeight = containerRef.current.offsetHeight;
|
||||
// 컨테이너의 실제 크기 (프리뷰 모드에서는 window 크기 사용)
|
||||
let containerWidth: number;
|
||||
let containerHeight: number;
|
||||
|
||||
if (isPreviewMode) {
|
||||
// iframe에서는 window 크기를 직접 사용
|
||||
containerWidth = window.innerWidth;
|
||||
containerHeight = window.innerHeight;
|
||||
} else {
|
||||
containerWidth = containerRef.current.offsetWidth;
|
||||
containerHeight = containerRef.current.offsetHeight;
|
||||
}
|
||||
|
||||
// 여백 설정: 좌우 16px씩 (총 32px), 상단 패딩 32px (pt-8)
|
||||
const MARGIN_X = 32;
|
||||
const availableWidth = containerWidth - MARGIN_X;
|
||||
|
||||
// 가로 기준 스케일 계산 (좌우 여백 16px씩 고정)
|
||||
const newScale = availableWidth / designWidth;
|
||||
let newScale: number;
|
||||
|
||||
if (isPreviewMode) {
|
||||
// 프리뷰 모드: 가로/세로 모두 fit하도록 (여백 없이)
|
||||
const scaleX = containerWidth / designWidth;
|
||||
const scaleY = containerHeight / designHeight;
|
||||
newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
|
||||
} else {
|
||||
// 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
|
||||
const MARGIN_X = 32;
|
||||
const availableWidth = containerWidth - MARGIN_X;
|
||||
newScale = availableWidth / designWidth;
|
||||
}
|
||||
|
||||
// console.log("📐 스케일 계산:", {
|
||||
// containerWidth,
|
||||
// containerHeight,
|
||||
// MARGIN_X,
|
||||
// availableWidth,
|
||||
// designWidth,
|
||||
// designHeight,
|
||||
// finalScale: newScale,
|
||||
// "스케일된 화면 크기": `${designWidth * newScale}px × ${designHeight * newScale}px`,
|
||||
// "실제 좌우 여백": `${(containerWidth - designWidth * newScale) / 2}px씩`,
|
||||
// isPreviewMode,
|
||||
// });
|
||||
|
||||
setScale(newScale);
|
||||
|
|
@ -272,7 +295,7 @@ function ScreenViewPage() {
|
|||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [layout, isMobile]);
|
||||
}, [layout, isMobile, isPreviewMode]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
@ -310,7 +333,7 @@ function ScreenViewPage() {
|
|||
<ScreenPreviewProvider isPreviewMode={false}>
|
||||
<ActiveTabProvider>
|
||||
<TableOptionsProvider>
|
||||
<div ref={containerRef} className="bg-background h-full w-full overflow-auto p-3">
|
||||
<div ref={containerRef} className={`bg-background h-full w-full ${isPreviewMode ? "overflow-hidden p-0" : "overflow-auto p-3"}`}>
|
||||
{/* 레이아웃 준비 중 로딩 표시 */}
|
||||
{!layoutReady && (
|
||||
<div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
|
||||
|
|
@ -323,9 +346,10 @@ function ScreenViewPage() {
|
|||
|
||||
{/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
|
||||
{layoutReady && layout && layout.components.length > 0 ? (
|
||||
<div
|
||||
className="bg-background relative"
|
||||
style={{
|
||||
<ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
|
||||
<div
|
||||
className="bg-background relative"
|
||||
style={{
|
||||
width: `${screenWidth}px`,
|
||||
height: `${screenHeight}px`,
|
||||
minWidth: `${screenWidth}px`,
|
||||
|
|
@ -747,7 +771,8 @@ function ScreenViewPage() {
|
|||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</ScreenMultiLangProvider>
|
||||
) : (
|
||||
// 빈 화면일 때
|
||||
<div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
|
||||
|
|
|
|||
|
|
@ -463,7 +463,8 @@ select {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
|
|
@ -471,18 +472,24 @@ select {
|
|||
}
|
||||
|
||||
.pop-light .pop-bg-pattern::before {
|
||||
background: repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* POP 글로우 효과 */
|
||||
.pop-glow-cyan {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 212, 255, 0.5),
|
||||
0 0 40px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-cyan-strong {
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5), 0 0 50px rgba(0, 212, 255, 0.3);
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 212, 255, 0.8),
|
||||
0 0 30px rgba(0, 212, 255, 0.5),
|
||||
0 0 50px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-success {
|
||||
|
|
@ -504,7 +511,9 @@ select {
|
|||
box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.4);
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 212, 255, 0.8),
|
||||
0 0 30px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -610,4 +619,18 @@ select {
|
|||
animation: marching-ants-v 0.4s linear infinite;
|
||||
}
|
||||
|
||||
/* ===== 저장 테이블 막대기 애니메이션 ===== */
|
||||
@keyframes saveBarDrop {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: top;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== End of Global Styles ===== */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,200 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { ChevronRight, ChevronDown, Folder, FolderOpen, Tag } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { LangCategory, getCategories } from "@/lib/api/multilang";
|
||||
|
||||
interface CategoryTreeProps {
|
||||
selectedCategoryId: number | null;
|
||||
onSelectCategory: (category: LangCategory | null) => void;
|
||||
onDoubleClickCategory?: (category: LangCategory) => void;
|
||||
}
|
||||
|
||||
interface CategoryNodeProps {
|
||||
category: LangCategory;
|
||||
level: number;
|
||||
selectedCategoryId: number | null;
|
||||
onSelectCategory: (category: LangCategory) => void;
|
||||
onDoubleClickCategory?: (category: LangCategory) => void;
|
||||
}
|
||||
|
||||
function CategoryNode({
|
||||
category,
|
||||
level,
|
||||
selectedCategoryId,
|
||||
onSelectCategory,
|
||||
onDoubleClickCategory,
|
||||
}: CategoryNodeProps) {
|
||||
// 기본값: 접힌 상태로 시작
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const hasChildren = category.children && category.children.length > 0;
|
||||
const isSelected = selectedCategoryId === category.categoryId;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors",
|
||||
isSelected
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
style={{ paddingLeft: `${level * 16 + 8}px` }}
|
||||
onClick={() => onSelectCategory(category)}
|
||||
onDoubleClick={() => onDoubleClickCategory?.(category)}
|
||||
>
|
||||
{/* 확장/축소 아이콘 */}
|
||||
{hasChildren ? (
|
||||
<button
|
||||
className="shrink-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsExpanded(!isExpanded);
|
||||
}}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span className="w-4" />
|
||||
)}
|
||||
|
||||
{/* 폴더/태그 아이콘 */}
|
||||
{hasChildren || level === 0 ? (
|
||||
isExpanded ? (
|
||||
<FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
) : (
|
||||
<Folder className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
)
|
||||
) : (
|
||||
<Tag className="h-4 w-4 shrink-0 text-blue-500" />
|
||||
)}
|
||||
|
||||
{/* 카테고리 이름 */}
|
||||
<span className="truncate">{category.categoryName}</span>
|
||||
|
||||
{/* prefix 표시 */}
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs",
|
||||
isSelected ? "text-primary-foreground/70" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{category.keyPrefix}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 자식 카테고리 */}
|
||||
{hasChildren && isExpanded && (
|
||||
<div>
|
||||
{category.children!.map((child) => (
|
||||
<CategoryNode
|
||||
key={child.categoryId}
|
||||
category={child}
|
||||
level={level + 1}
|
||||
selectedCategoryId={selectedCategoryId}
|
||||
onSelectCategory={onSelectCategory}
|
||||
onDoubleClickCategory={onDoubleClickCategory}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CategoryTree({
|
||||
selectedCategoryId,
|
||||
onSelectCategory,
|
||||
onDoubleClickCategory,
|
||||
}: CategoryTreeProps) {
|
||||
const [categories, setCategories] = useState<LangCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadCategories();
|
||||
}, []);
|
||||
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getCategories();
|
||||
if (response.success && response.data) {
|
||||
setCategories(response.data);
|
||||
} else {
|
||||
setError(response.error?.details || "카테고리 로드 실패");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("카테고리 로드 중 오류 발생");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<div className="animate-pulse text-sm text-muted-foreground">
|
||||
카테고리 로딩 중...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<div className="text-sm text-destructive">{error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (categories.length === 0) {
|
||||
return (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
카테고리가 없습니다
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
{/* 전체 선택 옵션 */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
|
||||
selectedCategoryId === null
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
onClick={() => onSelectCategory(null)}
|
||||
>
|
||||
<Folder className="h-4 w-4 shrink-0" />
|
||||
<span>전체</span>
|
||||
</div>
|
||||
|
||||
{/* 카테고리 트리 */}
|
||||
{categories.map((category) => (
|
||||
<CategoryNode
|
||||
key={category.categoryId}
|
||||
category={category}
|
||||
level={0}
|
||||
selectedCategoryId={selectedCategoryId}
|
||||
onSelectCategory={onSelectCategory}
|
||||
onDoubleClickCategory={onDoubleClickCategory}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CategoryTree;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Loader2, AlertCircle, CheckCircle2, Info, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
LangCategory,
|
||||
Language,
|
||||
generateKey,
|
||||
previewKey,
|
||||
createOverrideKey,
|
||||
getLanguages,
|
||||
getCategoryPath,
|
||||
KeyPreview,
|
||||
} from "@/lib/api/multilang";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
|
||||
interface Company {
|
||||
companyCode: string;
|
||||
companyName: string;
|
||||
}
|
||||
|
||||
interface KeyGenerateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
selectedCategory: LangCategory | null;
|
||||
companyCode: string;
|
||||
isSuperAdmin: boolean;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export function KeyGenerateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
selectedCategory,
|
||||
companyCode,
|
||||
isSuperAdmin,
|
||||
onSuccess,
|
||||
}: KeyGenerateModalProps) {
|
||||
// 상태
|
||||
const [keyMeaning, setKeyMeaning] = useState("");
|
||||
const [usageNote, setUsageNote] = useState("");
|
||||
const [targetCompanyCode, setTargetCompanyCode] = useState(companyCode);
|
||||
const [languages, setLanguages] = useState<Language[]>([]);
|
||||
const [texts, setTexts] = useState<Record<string, string>>({});
|
||||
const [categoryPath, setCategoryPath] = useState<LangCategory[]>([]);
|
||||
const [preview, setPreview] = useState<KeyPreview | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [previewLoading, setPreviewLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [companies, setCompanies] = useState<Company[]>([]);
|
||||
const [companySearchOpen, setCompanySearchOpen] = useState(false);
|
||||
|
||||
// 초기화
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setKeyMeaning("");
|
||||
setUsageNote("");
|
||||
setTargetCompanyCode(isSuperAdmin ? "*" : companyCode);
|
||||
setTexts({});
|
||||
setPreview(null);
|
||||
setError(null);
|
||||
loadLanguages();
|
||||
if (isSuperAdmin) {
|
||||
loadCompanies();
|
||||
}
|
||||
if (selectedCategory) {
|
||||
loadCategoryPath(selectedCategory.categoryId);
|
||||
} else {
|
||||
setCategoryPath([]);
|
||||
}
|
||||
}
|
||||
}, [isOpen, selectedCategory, companyCode, isSuperAdmin]);
|
||||
|
||||
// 회사 목록 로드 (최고관리자 전용)
|
||||
const loadCompanies = async () => {
|
||||
try {
|
||||
const response = await apiClient.get("/admin/companies");
|
||||
if (response.data.success && response.data.data) {
|
||||
// snake_case를 camelCase로 변환하고 공통(*)은 제외
|
||||
const companyList = response.data.data
|
||||
.filter((c: any) => c.company_code !== "*")
|
||||
.map((c: any) => ({
|
||||
companyCode: c.company_code,
|
||||
companyName: c.company_name,
|
||||
}));
|
||||
setCompanies(companyList);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("회사 목록 로드 실패:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// 언어 목록 로드
|
||||
const loadLanguages = async () => {
|
||||
const response = await getLanguages();
|
||||
if (response.success && response.data) {
|
||||
const activeLanguages = response.data.filter((l) => l.isActive === "Y");
|
||||
setLanguages(activeLanguages);
|
||||
// 초기 텍스트 상태 설정
|
||||
const initialTexts: Record<string, string> = {};
|
||||
activeLanguages.forEach((lang) => {
|
||||
initialTexts[lang.langCode] = "";
|
||||
});
|
||||
setTexts(initialTexts);
|
||||
}
|
||||
};
|
||||
|
||||
// 카테고리 경로 로드
|
||||
const loadCategoryPath = async (categoryId: number) => {
|
||||
const response = await getCategoryPath(categoryId);
|
||||
if (response.success && response.data) {
|
||||
setCategoryPath(response.data);
|
||||
}
|
||||
};
|
||||
|
||||
// 키 미리보기 (디바운스)
|
||||
const loadPreview = useCallback(async () => {
|
||||
if (!selectedCategory || !keyMeaning.trim()) {
|
||||
setPreview(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setPreviewLoading(true);
|
||||
try {
|
||||
const response = await previewKey(
|
||||
selectedCategory.categoryId,
|
||||
keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"),
|
||||
targetCompanyCode
|
||||
);
|
||||
if (response.success && response.data) {
|
||||
setPreview(response.data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("키 미리보기 실패:", err);
|
||||
} finally {
|
||||
setPreviewLoading(false);
|
||||
}
|
||||
}, [selectedCategory, keyMeaning, targetCompanyCode]);
|
||||
|
||||
// keyMeaning 변경 시 디바운스로 미리보기 로드
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(loadPreview, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [loadPreview]);
|
||||
|
||||
// 텍스트 변경 핸들러
|
||||
const handleTextChange = (langCode: string, value: string) => {
|
||||
setTexts((prev) => ({ ...prev, [langCode]: value }));
|
||||
};
|
||||
|
||||
// 저장 핸들러
|
||||
const handleSave = async () => {
|
||||
if (!selectedCategory) {
|
||||
setError("카테고리를 선택해주세요");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!keyMeaning.trim()) {
|
||||
setError("키 의미를 입력해주세요");
|
||||
return;
|
||||
}
|
||||
|
||||
// 최소 하나의 텍스트 입력 검증
|
||||
const hasText = Object.values(texts).some((t) => t.trim());
|
||||
if (!hasText) {
|
||||
setError("최소 하나의 언어에 대한 텍스트를 입력해주세요");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// 오버라이드 모드인지 확인
|
||||
if (preview?.isOverride && preview.baseKeyId) {
|
||||
// 오버라이드 키 생성
|
||||
const response = await createOverrideKey({
|
||||
companyCode: targetCompanyCode,
|
||||
baseKeyId: preview.baseKeyId,
|
||||
texts: Object.entries(texts)
|
||||
.filter(([_, text]) => text.trim())
|
||||
.map(([langCode, langText]) => ({ langCode, langText })),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
onSuccess();
|
||||
onClose();
|
||||
} else {
|
||||
setError(response.error?.details || "오버라이드 키 생성 실패");
|
||||
}
|
||||
} else {
|
||||
// 새 키 생성
|
||||
const response = await generateKey({
|
||||
companyCode: targetCompanyCode,
|
||||
categoryId: selectedCategory.categoryId,
|
||||
keyMeaning: keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"),
|
||||
usageNote: usageNote.trim() || undefined,
|
||||
texts: Object.entries(texts)
|
||||
.filter(([_, text]) => text.trim())
|
||||
.map(([langCode, langText]) => ({ langCode, langText })),
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
onSuccess();
|
||||
onClose();
|
||||
} else {
|
||||
setError(response.error?.details || "키 생성 실패");
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || "키 생성 중 오류 발생");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 생성될 키 미리보기
|
||||
const generatedKeyPreview = categoryPath.length > 0 && keyMeaning.trim()
|
||||
? [...categoryPath.map((c) => c.keyPrefix), keyMeaning.trim().toLowerCase().replace(/\s+/g, "_")].join(".")
|
||||
: "";
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{preview?.isOverride ? "오버라이드 키 생성" : "다국어 키 생성"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
{preview?.isOverride
|
||||
? "공통 키에 대한 회사별 오버라이드를 생성합니다"
|
||||
: "새로운 다국어 키를 자동으로 생성합니다"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
{/* 카테고리 경로 표시 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">카테고리</Label>
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{categoryPath.length > 0 ? (
|
||||
categoryPath.map((cat, idx) => (
|
||||
<span key={cat.categoryId} className="flex items-center">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{cat.categoryName}
|
||||
</Badge>
|
||||
{idx < categoryPath.length - 1 && (
|
||||
<span className="mx-1 text-muted-foreground">/</span>
|
||||
)}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
카테고리를 선택해주세요
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 키 의미 입력 */}
|
||||
<div>
|
||||
<Label htmlFor="keyMeaning" className="text-xs sm:text-sm">
|
||||
키 의미 *
|
||||
</Label>
|
||||
<Input
|
||||
id="keyMeaning"
|
||||
value={keyMeaning}
|
||||
onChange={(e) => setKeyMeaning(e.target.value)}
|
||||
placeholder="예: add_new_item, search_button, save_success"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
||||
영문 소문자와 밑줄(_)을 사용하세요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 생성될 키 미리보기 */}
|
||||
{generatedKeyPreview && (
|
||||
<div className={cn(
|
||||
"rounded-md border p-3",
|
||||
preview?.exists
|
||||
? "border-destructive bg-destructive/10"
|
||||
: preview?.isOverride
|
||||
? "border-blue-500 bg-blue-500/10"
|
||||
: "border-green-500 bg-green-500/10"
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
{previewLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : preview?.exists ? (
|
||||
<AlertCircle className="h-4 w-4 text-destructive" />
|
||||
) : preview?.isOverride ? (
|
||||
<Info className="h-4 w-4 text-blue-500" />
|
||||
) : (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
)}
|
||||
<code className="text-xs font-mono sm:text-sm">
|
||||
{generatedKeyPreview}
|
||||
</code>
|
||||
</div>
|
||||
{preview?.exists && (
|
||||
<p className="mt-1 text-xs text-destructive">
|
||||
이미 존재하는 키입니다
|
||||
</p>
|
||||
)}
|
||||
{preview?.isOverride && !preview?.exists && (
|
||||
<p className="mt-1 text-xs text-blue-600">
|
||||
공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 대상 회사 선택 (최고 관리자만) */}
|
||||
{isSuperAdmin && (
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">대상</Label>
|
||||
<div className="mt-1">
|
||||
<Popover open={companySearchOpen} onOpenChange={setCompanySearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={companySearchOpen}
|
||||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{targetCompanyCode === "*"
|
||||
? "공통 (*) - 모든 회사 적용"
|
||||
: companies.find((c) => c.companyCode === targetCompanyCode)
|
||||
? `${companies.find((c) => c.companyCode === targetCompanyCode)?.companyName} (${targetCompanyCode})`
|
||||
: "대상 선택"}
|
||||
<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="py-2 text-center text-xs sm:text-sm">
|
||||
검색 결과가 없습니다
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
value="공통"
|
||||
onSelect={() => {
|
||||
setTargetCompanyCode("*");
|
||||
setCompanySearchOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
targetCompanyCode === "*" ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
공통 (*) - 모든 회사 적용
|
||||
</CommandItem>
|
||||
{companies.map((company) => (
|
||||
<CommandItem
|
||||
key={company.companyCode}
|
||||
value={`${company.companyName} ${company.companyCode}`}
|
||||
onSelect={() => {
|
||||
setTargetCompanyCode(company.companyCode);
|
||||
setCompanySearchOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
targetCompanyCode === company.companyCode ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{company.companyName} ({company.companyCode})
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 사용 메모 */}
|
||||
<div>
|
||||
<Label htmlFor="usageNote" className="text-xs sm:text-sm">
|
||||
사용 메모 (선택)
|
||||
</Label>
|
||||
<Textarea
|
||||
id="usageNote"
|
||||
value={usageNote}
|
||||
onChange={(e) => setUsageNote(e.target.value)}
|
||||
placeholder="이 키가 어디서 사용되는지 메모"
|
||||
className="h-16 resize-none text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 번역 텍스트 입력 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">번역 텍스트 *</Label>
|
||||
<div className="mt-2 space-y-2">
|
||||
{languages.map((lang) => (
|
||||
<div key={lang.langCode} className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="w-12 justify-center text-xs">
|
||||
{lang.langCode}
|
||||
</Badge>
|
||||
<Input
|
||||
value={texts[lang.langCode] || ""}
|
||||
onChange={(e) => handleTextChange(lang.langCode, e.target.value)}
|
||||
placeholder={`${lang.langName} 텍스트`}
|
||||
className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 에러 메시지 */}
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="text-xs sm:text-sm">
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={loading || !selectedCategory || !keyMeaning.trim() || preview?.exists}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
생성 중...
|
||||
</>
|
||||
) : preview?.isOverride ? (
|
||||
"오버라이드 생성"
|
||||
) : (
|
||||
"키 생성"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default KeyGenerateModal;
|
||||
|
||||
|
||||
|
|
@ -65,6 +65,10 @@ const nodeTypes = {
|
|||
*/
|
||||
interface FlowEditorInnerProps {
|
||||
initialFlowId?: number | null;
|
||||
/** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
|
||||
onSaveComplete?: (flowId: number, flowName: string) => void;
|
||||
/** 임베디드 모드 여부 */
|
||||
embedded?: boolean;
|
||||
}
|
||||
|
||||
// 플로우 에디터 툴바 버튼 설정
|
||||
|
|
@ -87,7 +91,7 @@ const flowToolbarButtons: ToolbarButton[] = [
|
|||
},
|
||||
];
|
||||
|
||||
function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
|
||||
function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorInnerProps) {
|
||||
const reactFlowWrapper = useRef<HTMLDivElement>(null);
|
||||
const { screenToFlowPosition, setCenter } = useReactFlow();
|
||||
|
||||
|
|
@ -385,7 +389,7 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
|
|||
|
||||
{/* 상단 툴바 */}
|
||||
<Panel position="top-center" className="pointer-events-auto">
|
||||
<FlowToolbar validations={validations} />
|
||||
<FlowToolbar validations={validations} onSaveComplete={onSaveComplete} />
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
|
@ -416,13 +420,21 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
|
|||
*/
|
||||
interface FlowEditorProps {
|
||||
initialFlowId?: number | null;
|
||||
/** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
|
||||
onSaveComplete?: (flowId: number, flowName: string) => void;
|
||||
/** 임베디드 모드 여부 (헤더 표시 여부 등) */
|
||||
embedded?: boolean;
|
||||
}
|
||||
|
||||
export function FlowEditor({ initialFlowId }: FlowEditorProps = {}) {
|
||||
export function FlowEditor({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorProps = {}) {
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<ReactFlowProvider>
|
||||
<FlowEditorInner initialFlowId={initialFlowId} />
|
||||
<FlowEditorInner
|
||||
initialFlowId={initialFlowId}
|
||||
onSaveComplete={onSaveComplete}
|
||||
embedded={embedded}
|
||||
/>
|
||||
</ReactFlowProvider>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,9 +17,11 @@ import { useToast } from "@/hooks/use-toast";
|
|||
|
||||
interface FlowToolbarProps {
|
||||
validations?: FlowValidation[];
|
||||
/** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
|
||||
onSaveComplete?: (flowId: number, flowName: string) => void;
|
||||
}
|
||||
|
||||
export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
|
||||
export function FlowToolbar({ validations = [], onSaveComplete }: FlowToolbarProps) {
|
||||
const { toast } = useToast();
|
||||
const { zoomIn, zoomOut, fitView } = useReactFlow();
|
||||
const {
|
||||
|
|
@ -59,13 +61,27 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
|
|||
const result = await saveFlow();
|
||||
if (result.success) {
|
||||
toast({
|
||||
title: "✅ 플로우 저장 완료",
|
||||
title: "저장 완료",
|
||||
description: `${result.message}\nFlow ID: ${result.flowId}`,
|
||||
variant: "default",
|
||||
});
|
||||
|
||||
// 임베디드 모드에서 저장 완료 콜백 호출
|
||||
if (onSaveComplete && result.flowId) {
|
||||
onSaveComplete(result.flowId, flowName);
|
||||
}
|
||||
|
||||
// 부모 창이 있으면 postMessage로 알림 (새 창에서 열린 경우)
|
||||
if (window.opener && result.flowId) {
|
||||
window.opener.postMessage({
|
||||
type: "FLOW_SAVED",
|
||||
flowId: result.flowId,
|
||||
flowName: flowName,
|
||||
}, "*");
|
||||
}
|
||||
} else {
|
||||
toast({
|
||||
title: "❌ 저장 실패",
|
||||
title: "저장 실패",
|
||||
description: result.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -302,6 +302,9 @@ function AppLayoutInner({ children }: AppLayoutProps) {
|
|||
// 현재 경로에 따라 어드민 모드인지 판단 (쿼리 파라미터도 고려)
|
||||
const isAdminMode = pathname.startsWith("/admin") || searchParams.get("mode") === "admin";
|
||||
|
||||
// 프리뷰 모드: 사이드바/헤더 없이 화면만 표시 (iframe 임베드용)
|
||||
const isPreviewMode = searchParams.get("preview") === "true";
|
||||
|
||||
// 현재 모드에 따라 표시할 메뉴 결정
|
||||
// 관리자 모드에서는 관리자 메뉴만, 사용자 모드에서는 사용자 메뉴만 표시
|
||||
const currentMenus = isAdminMode ? adminMenus : userMenus;
|
||||
|
|
@ -458,6 +461,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
|
|||
);
|
||||
}
|
||||
|
||||
// 프리뷰 모드: 사이드바/헤더 없이 화면만 표시
|
||||
if (isPreviewMode) {
|
||||
return (
|
||||
<div className="h-screen w-full overflow-auto bg-white p-4">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// UI 변환된 메뉴 데이터
|
||||
const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
|
|
@ -15,6 +16,14 @@ import { Camera, X, Car, Wrench, Clock, Plus, Trash2 } from "lucide-react";
|
|||
import { ProfileFormData } from "@/types/profile";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { VehicleRegisterData } from "@/lib/api/driver";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
|
||||
// 언어 정보 타입
|
||||
interface LanguageInfo {
|
||||
langCode: string;
|
||||
langName: string;
|
||||
langNative: string;
|
||||
}
|
||||
|
||||
// 운전자 정보 타입
|
||||
export interface DriverInfo {
|
||||
|
|
@ -148,6 +157,46 @@ export function ProfileModal({
|
|||
onSave,
|
||||
onAlertClose,
|
||||
}: ProfileModalProps) {
|
||||
// 언어 목록 상태
|
||||
const [languages, setLanguages] = useState<LanguageInfo[]>([]);
|
||||
|
||||
// 언어 목록 로드
|
||||
useEffect(() => {
|
||||
const loadLanguages = async () => {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/languages");
|
||||
if (response.data?.success && response.data?.data) {
|
||||
// is_active가 'Y'인 언어만 필터링하고 정렬
|
||||
const activeLanguages = response.data.data
|
||||
.filter((lang: any) => lang.isActive === "Y" || lang.is_active === "Y")
|
||||
.map((lang: any) => ({
|
||||
langCode: lang.langCode || lang.lang_code,
|
||||
langName: lang.langName || lang.lang_name,
|
||||
langNative: lang.langNative || lang.lang_native,
|
||||
}))
|
||||
.sort((a: LanguageInfo, b: LanguageInfo) => {
|
||||
// KR을 먼저 표시
|
||||
if (a.langCode === "KR") return -1;
|
||||
if (b.langCode === "KR") return 1;
|
||||
return a.langCode.localeCompare(b.langCode);
|
||||
});
|
||||
setLanguages(activeLanguages);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("언어 목록 로드 실패:", error);
|
||||
// 기본값 설정
|
||||
setLanguages([
|
||||
{ langCode: "KR", langName: "Korean", langNative: "한국어" },
|
||||
{ langCode: "US", langName: "English", langNative: "English" },
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
loadLanguages();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// 차량 상태 한글 변환
|
||||
const getStatusLabel = (status: string | null) => {
|
||||
switch (status) {
|
||||
|
|
@ -293,10 +342,15 @@ export function ProfileModal({
|
|||
<SelectValue placeholder="선택해주세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="KR">한국어 (KR)</SelectItem>
|
||||
<SelectItem value="US">English (US)</SelectItem>
|
||||
<SelectItem value="JP">日本語 (JP)</SelectItem>
|
||||
<SelectItem value="CN">中文 (CN)</SelectItem>
|
||||
{languages.length > 0 ? (
|
||||
languages.map((lang) => (
|
||||
<SelectItem key={lang.langCode} value={lang.langCode}>
|
||||
{lang.langNative} ({lang.langCode})
|
||||
</SelectItem>
|
||||
))
|
||||
) : (
|
||||
<SelectItem value="KR">한국어 (KR)</SelectItem>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
Layout,
|
||||
Monitor,
|
||||
Square,
|
||||
Languages,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
|
|
@ -34,6 +35,8 @@ interface DesignerToolbarProps {
|
|||
isSaving?: boolean;
|
||||
showZoneBorders?: boolean;
|
||||
onToggleZoneBorders?: () => void;
|
||||
onGenerateMultilang?: () => void;
|
||||
isGeneratingMultilang?: boolean;
|
||||
}
|
||||
|
||||
export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
|
||||
|
|
@ -50,6 +53,8 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
|
|||
isSaving = false,
|
||||
showZoneBorders = true,
|
||||
onToggleZoneBorders,
|
||||
onGenerateMultilang,
|
||||
isGeneratingMultilang = false,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 py-3 shadow-sm">
|
||||
|
|
@ -226,6 +231,20 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
|
|||
|
||||
<div className="h-6 w-px bg-gray-300" />
|
||||
|
||||
{onGenerateMultilang && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onGenerateMultilang}
|
||||
disabled={isGeneratingMultilang}
|
||||
className="flex items-center space-x-1"
|
||||
title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
|
||||
>
|
||||
<Languages className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{isGeneratingMultilang ? "생성 중..." : "다국어"}</span>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
|
||||
<Save className="h-4 w-4" />
|
||||
<span>{isSaving ? "저장 중..." : "저장"}</span>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -835,12 +835,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
}
|
||||
};
|
||||
|
||||
// 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
|
||||
const hasCustomColors = config?.backgroundColor || config?.textColor || comp.style?.backgroundColor || comp.style?.color;
|
||||
|
||||
return (
|
||||
<Button
|
||||
<button
|
||||
onClick={handleClick}
|
||||
variant={(config?.variant as any) || "default"}
|
||||
size={(config?.size as any) || "default"}
|
||||
disabled={config?.disabled}
|
||||
className={`w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
|
||||
hasCustomColors
|
||||
? ''
|
||||
: 'bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50'
|
||||
}`}
|
||||
style={{
|
||||
// 컴포넌트 스타일 적용
|
||||
...comp.style,
|
||||
|
|
@ -853,7 +859,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
}}
|
||||
>
|
||||
{label || "버튼"}
|
||||
</Button>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -637,24 +637,28 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
|
|||
}
|
||||
}
|
||||
|
||||
// 색상이 설정되어 있으면 variant 스타일을 무시하고 직접 스타일 적용
|
||||
const hasCustomColors = config?.backgroundColor || config?.textColor;
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
disabled={isExecuting || disabled}
|
||||
variant={config?.variant || "default"}
|
||||
// 색상이 설정되어 있으면 variant를 적용하지 않아서 Tailwind 색상 클래스가 덮어씌우지 않도록 함
|
||||
variant={hasCustomColors ? undefined : (config?.variant || "default")}
|
||||
className={cn(
|
||||
"transition-all duration-200",
|
||||
isExecuting && "cursor-wait opacity-75",
|
||||
backgroundJobs.size > 0 && "border-primary/20 bg-accent",
|
||||
config?.backgroundColor && { backgroundColor: config.backgroundColor },
|
||||
config?.textColor && { color: config.textColor },
|
||||
config?.borderColor && { borderColor: config.borderColor },
|
||||
// 커스텀 색상이 없을 때만 기본 스타일 적용
|
||||
!hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: config?.backgroundColor,
|
||||
color: config?.textColor,
|
||||
borderColor: config?.borderColor,
|
||||
// 커스텀 색상이 있을 때만 인라인 스타일 적용
|
||||
...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
|
||||
...(config?.textColor && { color: config.textColor }),
|
||||
...(config?.borderColor && { borderColor: config.borderColor }),
|
||||
}}
|
||||
>
|
||||
{/* 메인 버튼 내용 */}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
File,
|
||||
} from "lucide-react";
|
||||
import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
// 컴포넌트 렌더러들 자동 등록
|
||||
import "@/lib/registry/components";
|
||||
|
|
@ -129,6 +130,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
|
|||
onFormDataChange,
|
||||
onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
|
||||
}) => {
|
||||
// 🆕 화면 다국어 컨텍스트
|
||||
const { getTranslatedText } = useScreenMultiLang();
|
||||
|
||||
const [actualHeight, setActualHeight] = React.useState<number | null>(null);
|
||||
const contentRef = React.useRef<HTMLDivElement>(null);
|
||||
const lastUpdatedHeight = React.useRef<number | null>(null);
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ import StyleEditor from "./StyleEditor";
|
|||
import { RealtimePreview } from "./RealtimePreviewDynamic";
|
||||
import FloatingPanel from "./FloatingPanel";
|
||||
import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
|
||||
import { MultilangSettingsModal } from "./modals/MultilangSettingsModal";
|
||||
import DesignerToolbar from "./DesignerToolbar";
|
||||
import TablesPanel from "./panels/TablesPanel";
|
||||
import { TemplatesPanel, TemplateComponent } from "./panels/TemplatesPanel";
|
||||
|
|
@ -144,6 +145,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
},
|
||||
});
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isGeneratingMultilang, setIsGeneratingMultilang] = useState(false);
|
||||
const [showMultilangSettingsModal, setShowMultilangSettingsModal] = useState(false);
|
||||
|
||||
// 🆕 화면에 할당된 메뉴 OBJID
|
||||
const [menuObjid, setMenuObjid] = useState<number | undefined>(undefined);
|
||||
|
|
@ -1447,6 +1450,101 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
}
|
||||
}, [selectedScreen, layout, screenResolution]);
|
||||
|
||||
// 다국어 자동 생성 핸들러
|
||||
const handleGenerateMultilang = useCallback(async () => {
|
||||
if (!selectedScreen?.screenId) {
|
||||
toast.error("화면 정보가 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsGeneratingMultilang(true);
|
||||
|
||||
try {
|
||||
// 공통 유틸 사용하여 라벨 추출
|
||||
const { extractMultilangLabels, extractTableNames, applyMultilangMappings } = await import(
|
||||
"@/lib/utils/multilangLabelExtractor"
|
||||
);
|
||||
const { apiClient } = await import("@/lib/api/client");
|
||||
|
||||
// 테이블별 컬럼 라벨 로드
|
||||
const tableNames = extractTableNames(layout.components);
|
||||
const columnLabelMap: Record<string, Record<string, string>> = {};
|
||||
|
||||
for (const tableName of tableNames) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
if (response.data?.success && response.data?.data) {
|
||||
const columns = response.data.data.columns || response.data.data;
|
||||
if (Array.isArray(columns)) {
|
||||
columnLabelMap[tableName] = {};
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name || col.name;
|
||||
const colLabel = col.displayName || col.columnLabel || col.column_label || colName;
|
||||
if (colName) {
|
||||
columnLabelMap[tableName][colName] = colLabel;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`컬럼 라벨 조회 실패 (${tableName}):`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 라벨 추출 (다국어 설정과 동일한 로직)
|
||||
const extractedLabels = extractMultilangLabels(layout.components, columnLabelMap);
|
||||
const labels = extractedLabels.map((l) => ({
|
||||
componentId: l.componentId,
|
||||
label: l.label,
|
||||
type: l.type,
|
||||
}));
|
||||
|
||||
if (labels.length === 0) {
|
||||
toast.info("다국어로 변환할 라벨이 없습니다.");
|
||||
setIsGeneratingMultilang(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// API 호출
|
||||
const { generateScreenLabelKeys } = await import("@/lib/api/multilang");
|
||||
const response = await generateScreenLabelKeys({
|
||||
screenId: selectedScreen.screenId,
|
||||
menuObjId: menuObjid?.toString(),
|
||||
labels,
|
||||
});
|
||||
|
||||
if (response.success && response.data) {
|
||||
// 자동 매핑 적용
|
||||
const updatedComponents = applyMultilangMappings(layout.components, response.data);
|
||||
|
||||
// 레이아웃 업데이트
|
||||
const updatedLayout = {
|
||||
...layout,
|
||||
components: updatedComponents,
|
||||
screenResolution: screenResolution,
|
||||
};
|
||||
|
||||
setLayout(updatedLayout);
|
||||
|
||||
// 자동 저장 (매핑 정보가 손실되지 않도록)
|
||||
try {
|
||||
await screenApi.saveLayout(selectedScreen.screenId, updatedLayout);
|
||||
toast.success(`${response.data.length}개의 다국어 키가 생성되고 자동 저장되었습니다.`);
|
||||
} catch (saveError) {
|
||||
console.error("다국어 매핑 저장 실패:", saveError);
|
||||
toast.warning(`${response.data.length}개의 다국어 키가 생성되었습니다. 저장 버튼을 눌러 매핑을 저장하세요.`);
|
||||
}
|
||||
} else {
|
||||
toast.error(response.error?.details || "다국어 키 생성에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("다국어 생성 실패:", error);
|
||||
toast.error("다국어 키 생성 중 오류가 발생했습니다.");
|
||||
} finally {
|
||||
setIsGeneratingMultilang(false);
|
||||
}
|
||||
}, [selectedScreen, layout, screenResolution, menuObjid]);
|
||||
|
||||
// 템플릿 드래그 처리
|
||||
const handleTemplateDrop = useCallback(
|
||||
(e: React.DragEvent, template: TemplateComponent) => {
|
||||
|
|
@ -4217,6 +4315,9 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
onBack={onBackToList}
|
||||
onSave={handleSave}
|
||||
isSaving={isSaving}
|
||||
onGenerateMultilang={handleGenerateMultilang}
|
||||
isGeneratingMultilang={isGeneratingMultilang}
|
||||
onOpenMultilangSettings={() => setShowMultilangSettingsModal(true)}
|
||||
/>
|
||||
{/* 메인 컨테이너 (좌측 툴바 + 패널들 + 캔버스) */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
|
|
@ -4999,6 +5100,42 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
screenId={selectedScreen.screenId}
|
||||
/>
|
||||
)}
|
||||
{/* 다국어 설정 모달 */}
|
||||
<MultilangSettingsModal
|
||||
isOpen={showMultilangSettingsModal}
|
||||
onClose={() => setShowMultilangSettingsModal(false)}
|
||||
components={layout.components}
|
||||
onSave={async (updates) => {
|
||||
if (updates.length === 0) {
|
||||
toast.info("저장할 변경사항이 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 공통 유틸 사용하여 매핑 적용
|
||||
const { applyMultilangMappings } = await import("@/lib/utils/multilangLabelExtractor");
|
||||
|
||||
// 매핑 형식 변환
|
||||
const mappings = updates.map((u) => ({
|
||||
componentId: u.componentId,
|
||||
keyId: u.langKeyId,
|
||||
langKey: u.langKey,
|
||||
}));
|
||||
|
||||
// 레이아웃 업데이트
|
||||
const updatedComponents = applyMultilangMappings(layout.components, mappings);
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
components: updatedComponents,
|
||||
}));
|
||||
|
||||
toast.success(`${updates.length}개 항목의 다국어 설정이 저장되었습니다.`);
|
||||
} catch (error) {
|
||||
console.error("다국어 설정 저장 실패:", error);
|
||||
toast.error("다국어 설정 저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableOptionsProvider>
|
||||
</ScreenPreviewProvider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,467 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { ScreenGroup, createScreenGroup, updateScreenGroup } from "@/lib/api/screenGroup";
|
||||
import { toast } from "sonner";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Check, ChevronsUpDown, Folder } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ScreenGroupModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
group?: ScreenGroup | null; // 수정 모드일 때 기존 그룹 데이터
|
||||
}
|
||||
|
||||
export function ScreenGroupModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSuccess,
|
||||
group,
|
||||
}: ScreenGroupModalProps) {
|
||||
const [currentCompanyCode, setCurrentCompanyCode] = useState<string>("");
|
||||
const [isSuperAdmin, setIsSuperAdmin] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
group_name: "",
|
||||
group_code: "",
|
||||
description: "",
|
||||
display_order: 0,
|
||||
target_company_code: "",
|
||||
parent_group_id: null as number | null,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [companies, setCompanies] = useState<{ code: string; name: string }[]>([]);
|
||||
const [availableParentGroups, setAvailableParentGroups] = useState<ScreenGroup[]>([]);
|
||||
const [isParentGroupSelectOpen, setIsParentGroupSelectOpen] = useState(false);
|
||||
|
||||
// 그룹 경로 가져오기 (계층 구조 표시용)
|
||||
const getGroupPath = (groupId: number): string => {
|
||||
const grp = availableParentGroups.find((g) => g.id === groupId);
|
||||
if (!grp) return "";
|
||||
|
||||
const path: string[] = [grp.group_name];
|
||||
let currentGroup = grp;
|
||||
|
||||
while ((currentGroup as any).parent_group_id) {
|
||||
const parent = availableParentGroups.find((g) => g.id === (currentGroup as any).parent_group_id);
|
||||
if (parent) {
|
||||
path.unshift(parent.group_name);
|
||||
currentGroup = parent;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return path.join(" > ");
|
||||
};
|
||||
|
||||
// 그룹을 계층 구조로 정렬
|
||||
const getSortedGroups = (): typeof availableParentGroups => {
|
||||
const result: typeof availableParentGroups = [];
|
||||
|
||||
const addChildren = (parentId: number | null, level: number) => {
|
||||
const children = availableParentGroups
|
||||
.filter((g) => (g as any).parent_group_id === parentId)
|
||||
.sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
|
||||
|
||||
for (const child of children) {
|
||||
result.push({ ...child, group_level: level } as any);
|
||||
addChildren(child.id, level + 1);
|
||||
}
|
||||
};
|
||||
|
||||
addChildren(null, 1);
|
||||
return result;
|
||||
};
|
||||
|
||||
// 현재 사용자 정보 로드
|
||||
useEffect(() => {
|
||||
const loadUserInfo = async () => {
|
||||
try {
|
||||
const response = await apiClient.get("/auth/me");
|
||||
const result = response.data;
|
||||
if (result.success && result.data) {
|
||||
const companyCode = result.data.companyCode || result.data.company_code || "";
|
||||
setCurrentCompanyCode(companyCode);
|
||||
setIsSuperAdmin(companyCode === "*");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("사용자 정보 로드 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
loadUserInfo();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// 회사 목록 로드 (최고 관리자만)
|
||||
useEffect(() => {
|
||||
if (isSuperAdmin && isOpen) {
|
||||
const loadCompanies = async () => {
|
||||
try {
|
||||
const response = await apiClient.get("/admin/companies");
|
||||
const result = response.data;
|
||||
if (result.success && result.data) {
|
||||
const companyList = result.data.map((c: any) => ({
|
||||
code: c.company_code,
|
||||
name: c.company_name,
|
||||
}));
|
||||
setCompanies(companyList);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("회사 목록 로드 실패:", error);
|
||||
}
|
||||
};
|
||||
loadCompanies();
|
||||
}
|
||||
}, [isSuperAdmin, isOpen]);
|
||||
|
||||
// 부모 그룹 목록 로드 (현재 회사의 대분류/중분류 그룹만)
|
||||
useEffect(() => {
|
||||
if (isOpen && currentCompanyCode) {
|
||||
const loadParentGroups = async () => {
|
||||
try {
|
||||
const response = await apiClient.get(`/screen-groups/groups?size=1000`);
|
||||
const result = response.data;
|
||||
if (result.success && result.data) {
|
||||
// 모든 그룹을 상위 그룹으로 선택 가능 (무한 중첩 지원)
|
||||
setAvailableParentGroups(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("부모 그룹 목록 로드 실패:", error);
|
||||
}
|
||||
};
|
||||
loadParentGroups();
|
||||
}
|
||||
}, [isOpen, currentCompanyCode]);
|
||||
|
||||
// 그룹 데이터가 변경되면 폼 초기화
|
||||
useEffect(() => {
|
||||
if (currentCompanyCode) {
|
||||
if (group) {
|
||||
setFormData({
|
||||
group_name: group.group_name || "",
|
||||
group_code: group.group_code || "",
|
||||
description: group.description || "",
|
||||
display_order: group.display_order || 0,
|
||||
target_company_code: group.company_code || currentCompanyCode,
|
||||
parent_group_id: (group as any).parent_group_id || null,
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
group_name: "",
|
||||
group_code: "",
|
||||
description: "",
|
||||
display_order: 0,
|
||||
target_company_code: currentCompanyCode,
|
||||
parent_group_id: null,
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [group, isOpen, currentCompanyCode]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 필수 필드 검증
|
||||
if (!formData.group_name.trim()) {
|
||||
toast.error("그룹명을 입력하세요");
|
||||
return;
|
||||
}
|
||||
if (!formData.group_code.trim()) {
|
||||
toast.error("그룹 코드를 입력하세요");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
let response;
|
||||
if (group) {
|
||||
// 수정 모드
|
||||
response = await updateScreenGroup(group.id, formData);
|
||||
} else {
|
||||
// 추가 모드
|
||||
response = await createScreenGroup({
|
||||
...formData,
|
||||
is_active: "Y",
|
||||
});
|
||||
}
|
||||
|
||||
if (response.success) {
|
||||
toast.success(group ? "그룹이 수정되었습니다" : "그룹이 추가되었습니다");
|
||||
onSuccess();
|
||||
onClose();
|
||||
} else {
|
||||
toast.error(response.message || "작업에 실패했습니다");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("그룹 저장 실패:", error);
|
||||
toast.error("그룹 저장에 실패했습니다");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{group ? "그룹 수정" : "그룹 추가"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
화면 그룹 정보를 입력하세요
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{/* 회사 선택 (최고 관리자만) */}
|
||||
{isSuperAdmin && (
|
||||
<div>
|
||||
<Label htmlFor="target_company_code" className="text-xs sm:text-sm">
|
||||
회사 선택 *
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.target_company_code}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, target_company_code: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="회사를 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{companies.map((company) => (
|
||||
<SelectItem key={company.code} value={company.code}>
|
||||
{company.name} ({company.code})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
선택한 회사에 그룹이 생성됩니다
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 부모 그룹 선택 (하위 그룹 만들기) - 트리 구조 + 검색 */}
|
||||
<div>
|
||||
<Label htmlFor="parent_group_id" className="text-xs sm:text-sm">
|
||||
상위 그룹 (선택사항)
|
||||
</Label>
|
||||
<Popover open={isParentGroupSelectOpen} onOpenChange={setIsParentGroupSelectOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={isParentGroupSelectOpen}
|
||||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{formData.parent_group_id === null
|
||||
? "대분류로 생성"
|
||||
: getGroupPath(formData.parent_group_id) || "그룹 선택"}
|
||||
<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 py-2 text-center">
|
||||
그룹을 찾을 수 없습니다
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{/* 대분류로 생성 옵션 */}
|
||||
<CommandItem
|
||||
value="none"
|
||||
onSelect={() => {
|
||||
setFormData({ ...formData, parent_group_id: null });
|
||||
setIsParentGroupSelectOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
formData.parent_group_id === null ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<Folder className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
대분류로 생성
|
||||
</CommandItem>
|
||||
{/* 계층 구조로 그룹 표시 */}
|
||||
{getSortedGroups().map((parentGroup) => (
|
||||
<CommandItem
|
||||
key={parentGroup.id}
|
||||
value={`${parentGroup.group_name} ${getGroupPath(parentGroup.id)}`}
|
||||
onSelect={() => {
|
||||
setFormData({ ...formData, parent_group_id: parentGroup.id });
|
||||
setIsParentGroupSelectOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
formData.parent_group_id === parentGroup.id ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{/* 들여쓰기로 계층 표시 */}
|
||||
<span
|
||||
style={{ marginLeft: `${(((parentGroup as any).group_level || 1) - 1) * 16}px` }}
|
||||
className="flex items-center"
|
||||
>
|
||||
<Folder className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
{parentGroup.group_name}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
부모 그룹을 선택하면 하위 그룹으로 생성됩니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 그룹명 */}
|
||||
<div>
|
||||
<Label htmlFor="group_name" className="text-xs sm:text-sm">
|
||||
그룹명 *
|
||||
</Label>
|
||||
<Input
|
||||
id="group_name"
|
||||
value={formData.group_name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, group_name: e.target.value })
|
||||
}
|
||||
placeholder="그룹명을 입력하세요"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 그룹 코드 */}
|
||||
<div>
|
||||
<Label htmlFor="group_code" className="text-xs sm:text-sm">
|
||||
그룹 코드 *
|
||||
</Label>
|
||||
<Input
|
||||
id="group_code"
|
||||
value={formData.group_code}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, group_code: e.target.value })
|
||||
}
|
||||
placeholder="영문 대문자와 언더스코어로 입력"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
disabled={!!group} // 수정 모드일 때는 코드 변경 불가
|
||||
/>
|
||||
{group && (
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
그룹 코드는 수정할 수 없습니다
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 설명 */}
|
||||
<div>
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">
|
||||
설명
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, description: e.target.value })
|
||||
}
|
||||
placeholder="그룹에 대한 설명을 입력하세요"
|
||||
className="min-h-[60px] text-xs sm:min-h-[80px] sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 정렬 순서 */}
|
||||
<div>
|
||||
<Label htmlFor="display_order" className="text-xs sm:text-sm">
|
||||
정렬 순서
|
||||
</Label>
|
||||
<Input
|
||||
id="display_order"
|
||||
type="number"
|
||||
value={formData.display_order}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
display_order: parseInt(e.target.value) || 0,
|
||||
})
|
||||
}
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
숫자가 작을수록 상단에 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{loading ? "저장 중..." : "저장"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,973 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Monitor,
|
||||
FolderOpen,
|
||||
Folder,
|
||||
Plus,
|
||||
MoreVertical,
|
||||
Edit,
|
||||
Trash2,
|
||||
FolderInput,
|
||||
} from "lucide-react";
|
||||
import { ScreenDefinition } from "@/types/screen";
|
||||
import {
|
||||
ScreenGroup,
|
||||
getScreenGroups,
|
||||
deleteScreenGroup,
|
||||
addScreenToGroup,
|
||||
removeScreenFromGroup,
|
||||
} from "@/lib/api/screenGroup";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSeparator,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import { ScreenGroupModal } from "./ScreenGroupModal";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface ScreenGroupTreeViewProps {
|
||||
screens: ScreenDefinition[];
|
||||
selectedScreen: ScreenDefinition | null;
|
||||
onScreenSelect: (screen: ScreenDefinition) => void;
|
||||
onScreenDesign: (screen: ScreenDefinition) => void;
|
||||
onGroupSelect?: (group: { id: number; name: string; company_code?: string } | null) => void;
|
||||
onScreenSelectInGroup?: (group: { id: number; name: string; company_code?: string }, screenId: number) => void;
|
||||
companyCode?: string;
|
||||
}
|
||||
|
||||
interface TreeNode {
|
||||
type: "group" | "screen";
|
||||
id: string;
|
||||
name: string;
|
||||
data?: ScreenDefinition | ScreenGroup;
|
||||
children?: TreeNode[];
|
||||
expanded?: boolean;
|
||||
}
|
||||
|
||||
export function ScreenGroupTreeView({
|
||||
screens,
|
||||
selectedScreen,
|
||||
onScreenSelect,
|
||||
onScreenDesign,
|
||||
onGroupSelect,
|
||||
onScreenSelectInGroup,
|
||||
companyCode,
|
||||
}: ScreenGroupTreeViewProps) {
|
||||
const [groups, setGroups] = useState<ScreenGroup[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
|
||||
const [groupScreensMap, setGroupScreensMap] = useState<Map<number, number[]>>(new Map());
|
||||
|
||||
// 그룹 모달 상태
|
||||
const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
|
||||
const [editingGroup, setEditingGroup] = useState<ScreenGroup | null>(null);
|
||||
|
||||
// 삭제 확인 다이얼로그 상태
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
const [deletingGroup, setDeletingGroup] = useState<ScreenGroup | null>(null);
|
||||
|
||||
// 화면 이동 메뉴 상태
|
||||
const [movingScreen, setMovingScreen] = useState<ScreenDefinition | null>(null);
|
||||
const [isMoveMenuOpen, setIsMoveMenuOpen] = useState(false);
|
||||
const [selectedGroupForMove, setSelectedGroupForMove] = useState<number | null>(null);
|
||||
const [screenRole, setScreenRole] = useState<string>("");
|
||||
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
|
||||
const [displayOrder, setDisplayOrder] = useState<number>(1);
|
||||
|
||||
// 그룹 목록 및 그룹별 화면 로드
|
||||
useEffect(() => {
|
||||
loadGroupsData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [companyCode]);
|
||||
|
||||
// 그룹에 속한 화면 ID들을 가져오기
|
||||
const getGroupedScreenIds = (): Set<number> => {
|
||||
const ids = new Set<number>();
|
||||
groupScreensMap.forEach((screenIds) => {
|
||||
screenIds.forEach((id) => ids.add(id));
|
||||
});
|
||||
return ids;
|
||||
};
|
||||
|
||||
// 미분류 화면들 (어떤 그룹에도 속하지 않은 화면)
|
||||
const getUngroupedScreens = (): ScreenDefinition[] => {
|
||||
const groupedIds = getGroupedScreenIds();
|
||||
return screens.filter((screen) => !groupedIds.has(screen.screenId));
|
||||
};
|
||||
|
||||
// 그룹에 속한 화면들 (display_order 오름차순 정렬)
|
||||
const getScreensInGroup = (groupId: number): ScreenDefinition[] => {
|
||||
const group = groups.find((g) => g.id === groupId);
|
||||
if (!group?.screens) {
|
||||
const screenIds = groupScreensMap.get(groupId) || [];
|
||||
return screens.filter((screen) => screenIds.includes(screen.screenId));
|
||||
}
|
||||
|
||||
// 그룹의 screens 배열에서 display_order 정보를 가져와서 정렬
|
||||
const sortedScreenIds = [...group.screens]
|
||||
.sort((a, b) => (a.display_order || 999) - (b.display_order || 999))
|
||||
.map((s) => s.screen_id);
|
||||
|
||||
return sortedScreenIds
|
||||
.map((id) => screens.find((screen) => screen.screenId === id))
|
||||
.filter((screen): screen is ScreenDefinition => screen !== undefined);
|
||||
};
|
||||
|
||||
const toggleGroup = (groupId: string) => {
|
||||
const newExpanded = new Set(expandedGroups);
|
||||
if (newExpanded.has(groupId)) {
|
||||
newExpanded.delete(groupId);
|
||||
// 그룹 접으면 선택 해제
|
||||
if (onGroupSelect) {
|
||||
onGroupSelect(null);
|
||||
}
|
||||
} else {
|
||||
newExpanded.add(groupId);
|
||||
// 그룹 펼치면 해당 그룹 선택
|
||||
if (onGroupSelect && groupId !== "ungrouped") {
|
||||
const group = groups.find((g) => String(g.id) === groupId);
|
||||
if (group) {
|
||||
onGroupSelect({ id: group.id, name: group.group_name, company_code: group.company_code });
|
||||
}
|
||||
}
|
||||
}
|
||||
setExpandedGroups(newExpanded);
|
||||
};
|
||||
|
||||
const handleScreenClick = (screen: ScreenDefinition) => {
|
||||
onScreenSelect(screen);
|
||||
};
|
||||
|
||||
// 그룹 내 화면 클릭 핸들러 (그룹 전체 표시 + 해당 화면 포커스)
|
||||
const handleScreenClickInGroup = (screen: ScreenDefinition, group: ScreenGroup) => {
|
||||
if (onScreenSelectInGroup) {
|
||||
onScreenSelectInGroup(
|
||||
{ id: group.id, name: group.group_name, company_code: group.company_code },
|
||||
screen.screenId
|
||||
);
|
||||
} else {
|
||||
// fallback: 기존 동작
|
||||
onScreenSelect(screen);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScreenDoubleClick = (screen: ScreenDefinition) => {
|
||||
onScreenDesign(screen);
|
||||
};
|
||||
|
||||
// 그룹 추가 버튼 클릭
|
||||
const handleAddGroup = () => {
|
||||
setEditingGroup(null);
|
||||
setIsGroupModalOpen(true);
|
||||
};
|
||||
|
||||
// 그룹 수정 버튼 클릭
|
||||
const handleEditGroup = (group: ScreenGroup, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setEditingGroup(group);
|
||||
setIsGroupModalOpen(true);
|
||||
};
|
||||
|
||||
// 그룹 삭제 버튼 클릭
|
||||
const handleDeleteGroup = (group: ScreenGroup, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setDeletingGroup(group);
|
||||
setIsDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// 그룹 삭제 확인
|
||||
const confirmDeleteGroup = async () => {
|
||||
if (!deletingGroup) return;
|
||||
|
||||
try {
|
||||
const response = await deleteScreenGroup(deletingGroup.id);
|
||||
if (response.success) {
|
||||
toast.success("그룹이 삭제되었습니다");
|
||||
loadGroupsData();
|
||||
} else {
|
||||
toast.error(response.message || "그룹 삭제에 실패했습니다");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("그룹 삭제 실패:", error);
|
||||
toast.error("그룹 삭제에 실패했습니다");
|
||||
} finally {
|
||||
setIsDeleteDialogOpen(false);
|
||||
setDeletingGroup(null);
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 이동 메뉴 열기
|
||||
const handleMoveScreen = (screen: ScreenDefinition, e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setMovingScreen(screen);
|
||||
|
||||
// 현재 화면이 속한 그룹 정보 찾기
|
||||
let currentGroupId: number | null = null;
|
||||
let currentScreenRole: string = "";
|
||||
let currentDisplayOrder: number = 1;
|
||||
|
||||
// 현재 화면이 속한 그룹 찾기
|
||||
for (const group of groups) {
|
||||
if (group.screens && Array.isArray(group.screens)) {
|
||||
const screenInfo = group.screens.find((s: any) => Number(s.screen_id) === Number(screen.screenId));
|
||||
if (screenInfo) {
|
||||
currentGroupId = group.id;
|
||||
currentScreenRole = screenInfo.screen_role || "";
|
||||
currentDisplayOrder = screenInfo.display_order || 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedGroupForMove(currentGroupId);
|
||||
setScreenRole(currentScreenRole);
|
||||
setDisplayOrder(currentDisplayOrder);
|
||||
setIsMoveMenuOpen(true);
|
||||
};
|
||||
|
||||
// 화면을 특정 그룹으로 이동
|
||||
const moveScreenToGroup = async (targetGroupId: number | null) => {
|
||||
if (!movingScreen) return;
|
||||
|
||||
try {
|
||||
// 현재 그룹에서 제거
|
||||
const currentGroupId = Array.from(groupScreensMap.entries()).find(([_, screenIds]) =>
|
||||
screenIds.includes(movingScreen.screenId)
|
||||
)?.[0];
|
||||
|
||||
if (currentGroupId) {
|
||||
// screen_group_screens에서 해당 연결 찾아서 삭제
|
||||
const currentGroup = groups.find((g) => g.id === currentGroupId);
|
||||
if (currentGroup && currentGroup.screens) {
|
||||
const screenGroupScreen = currentGroup.screens.find(
|
||||
(s: any) => s.screen_id === movingScreen.screenId
|
||||
);
|
||||
if (screenGroupScreen) {
|
||||
await removeScreenFromGroup(screenGroupScreen.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 새 그룹에 추가 (미분류가 아닌 경우)
|
||||
if (targetGroupId !== null) {
|
||||
await addScreenToGroup({
|
||||
group_id: targetGroupId,
|
||||
screen_id: movingScreen.screenId,
|
||||
screen_role: screenRole,
|
||||
display_order: displayOrder,
|
||||
is_default: "N",
|
||||
});
|
||||
}
|
||||
|
||||
toast.success("화면이 이동되었습니다");
|
||||
loadGroupsData();
|
||||
} catch (error) {
|
||||
console.error("화면 이동 실패:", error);
|
||||
toast.error("화면 이동에 실패했습니다");
|
||||
} finally {
|
||||
setIsMoveMenuOpen(false);
|
||||
setMovingScreen(null);
|
||||
setSelectedGroupForMove(null);
|
||||
setScreenRole("");
|
||||
setDisplayOrder(1);
|
||||
}
|
||||
};
|
||||
|
||||
// 그룹 경로 가져오기 (계층 구조 표시용)
|
||||
const getGroupPath = (groupId: number): string => {
|
||||
const group = groups.find((g) => g.id === groupId);
|
||||
if (!group) return "";
|
||||
|
||||
const path: string[] = [group.group_name];
|
||||
let currentGroup = group;
|
||||
|
||||
while (currentGroup.parent_group_id) {
|
||||
const parent = groups.find((g) => g.id === currentGroup.parent_group_id);
|
||||
if (parent) {
|
||||
path.unshift(parent.group_name);
|
||||
currentGroup = parent;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return path.join(" > ");
|
||||
};
|
||||
|
||||
// 그룹 레벨 가져오기 (들여쓰기용)
|
||||
const getGroupLevel = (groupId: number): number => {
|
||||
const group = groups.find((g) => g.id === groupId);
|
||||
return group?.group_level || 1;
|
||||
};
|
||||
|
||||
// 그룹을 계층 구조로 정렬
|
||||
const getSortedGroups = (): typeof groups => {
|
||||
const result: typeof groups = [];
|
||||
|
||||
const addChildren = (parentId: number | null, level: number) => {
|
||||
const children = groups
|
||||
.filter((g) => g.parent_group_id === parentId)
|
||||
.sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
|
||||
|
||||
for (const child of children) {
|
||||
result.push({ ...child, group_level: level });
|
||||
addChildren(child.id, level + 1);
|
||||
}
|
||||
};
|
||||
|
||||
addChildren(null, 1);
|
||||
return result;
|
||||
};
|
||||
|
||||
// 그룹 데이터 새로고침
|
||||
const loadGroupsData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getScreenGroups({ size: 1000 }); // 모든 그룹 가져오기
|
||||
if (response.success && response.data) {
|
||||
setGroups(response.data);
|
||||
|
||||
// 각 그룹별 화면 목록 매핑
|
||||
const screenMap = new Map<number, number[]>();
|
||||
for (const group of response.data) {
|
||||
if (group.screens && Array.isArray(group.screens)) {
|
||||
screenMap.set(
|
||||
group.id,
|
||||
group.screens.map((s: any) => s.screen_id)
|
||||
);
|
||||
}
|
||||
}
|
||||
setGroupScreensMap(screenMap);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("그룹 목록 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ungroupedScreens = getUngroupedScreens();
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col overflow-hidden">
|
||||
{/* 그룹 추가 버튼 */}
|
||||
<div className="flex-shrink-0 border-b p-2">
|
||||
<Button
|
||||
onClick={handleAddGroup}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full gap-2"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
그룹 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 트리 목록 */}
|
||||
<div className="flex-1 overflow-auto p-2">
|
||||
{/* 그룹화된 화면들 (대분류만 먼저 렌더링) */}
|
||||
{groups
|
||||
.filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null)
|
||||
.map((group) => {
|
||||
const groupId = String(group.id);
|
||||
const isExpanded = expandedGroups.has(groupId);
|
||||
const groupScreens = getScreensInGroup(group.id);
|
||||
|
||||
// 하위 그룹들 찾기
|
||||
const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id);
|
||||
|
||||
return (
|
||||
<div key={groupId} className="mb-1">
|
||||
{/* 그룹 헤더 */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-sm font-medium group/item"
|
||||
)}
|
||||
onClick={() => toggleGroup(groupId)}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
{isExpanded ? (
|
||||
<FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
) : (
|
||||
<Folder className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
)}
|
||||
<span className="truncate flex-1">{group.group_name}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{groupScreens.length}
|
||||
</Badge>
|
||||
{/* 그룹 메뉴 버튼 */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 opacity-0 group-hover/item:opacity-100"
|
||||
>
|
||||
<MoreVertical className="h-3 w-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={(e) => handleEditGroup(group, e as any)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => handleDeleteGroup(group, e as any)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* 그룹 내 하위 그룹들 */}
|
||||
{isExpanded && childGroups.length > 0 && (
|
||||
<div className="ml-6 mt-1 space-y-0.5">
|
||||
{childGroups.map((childGroup) => {
|
||||
const childGroupId = String(childGroup.id);
|
||||
const isChildExpanded = expandedGroups.has(childGroupId);
|
||||
const childScreens = getScreensInGroup(childGroup.id);
|
||||
|
||||
// 손자 그룹들 (3단계)
|
||||
const grandChildGroups = groups.filter((g) => (g as any).parent_group_id === childGroup.id);
|
||||
|
||||
return (
|
||||
<div key={childGroupId}>
|
||||
{/* 중분류 헤더 */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-xs font-medium group/item"
|
||||
)}
|
||||
onClick={() => toggleGroup(childGroupId)}
|
||||
>
|
||||
{isChildExpanded ? (
|
||||
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
{isChildExpanded ? (
|
||||
<FolderOpen className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
) : (
|
||||
<Folder className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
)}
|
||||
<span className="truncate flex-1">{childGroup.group_name}</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{childScreens.length}
|
||||
</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 opacity-0 group-hover/item:opacity-100"
|
||||
>
|
||||
<MoreVertical className="h-3 w-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={(e) => handleEditGroup(childGroup, e as any)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => handleDeleteGroup(childGroup, e as any)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* 중분류 내 손자 그룹들 (소분류) */}
|
||||
{isChildExpanded && grandChildGroups.length > 0 && (
|
||||
<div className="ml-6 mt-1 space-y-0.5">
|
||||
{grandChildGroups.map((grandChild) => {
|
||||
const grandChildId = String(grandChild.id);
|
||||
const isGrandExpanded = expandedGroups.has(grandChildId);
|
||||
const grandScreens = getScreensInGroup(grandChild.id);
|
||||
|
||||
return (
|
||||
<div key={grandChildId}>
|
||||
{/* 소분류 헤더 */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-xs group/item"
|
||||
)}
|
||||
onClick={() => toggleGroup(grandChildId)}
|
||||
>
|
||||
{isGrandExpanded ? (
|
||||
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
{isGrandExpanded ? (
|
||||
<FolderOpen className="h-3 w-3 shrink-0 text-green-500" />
|
||||
) : (
|
||||
<Folder className="h-3 w-3 shrink-0 text-green-500" />
|
||||
)}
|
||||
<span className="truncate flex-1">{grandChild.group_name}</span>
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{grandScreens.length}
|
||||
</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 opacity-0 group-hover/item:opacity-100"
|
||||
>
|
||||
<MoreVertical className="h-3 w-3" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={(e) => handleEditGroup(grandChild, e as any)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
수정
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => handleDeleteGroup(grandChild, e as any)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
삭제
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* 소분류 내 화면들 */}
|
||||
{isGrandExpanded && (
|
||||
<div className="ml-6 mt-1 space-y-0.5">
|
||||
{grandScreens.length === 0 ? (
|
||||
<div className="pl-6 py-2 text-xs text-muted-foreground">
|
||||
화면이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
grandScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors",
|
||||
"text-xs hover:bg-accent",
|
||||
selectedScreen?.screenId === screen.screenId && "bg-accent"
|
||||
)}
|
||||
onClick={() => handleScreenClickInGroup(screen, grandChild)}
|
||||
onDoubleClick={() => handleScreenDoubleClick(screen)}
|
||||
onContextMenu={(e) => handleMoveScreen(screen, e)}
|
||||
>
|
||||
<Monitor className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
<span className="truncate flex-1">{screen.screenName}</span>
|
||||
<span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
|
||||
{screen.screenCode}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 중분류 내 화면들 */}
|
||||
{isChildExpanded && (
|
||||
<div className="ml-6 mt-1 space-y-0.5">
|
||||
{childScreens.length === 0 && grandChildGroups.length === 0 ? (
|
||||
<div className="pl-6 py-2 text-xs text-muted-foreground">
|
||||
화면이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
childScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors",
|
||||
"text-xs hover:bg-accent",
|
||||
selectedScreen?.screenId === screen.screenId && "bg-accent"
|
||||
)}
|
||||
onClick={() => handleScreenClickInGroup(screen, childGroup)}
|
||||
onDoubleClick={() => handleScreenDoubleClick(screen)}
|
||||
onContextMenu={(e) => handleMoveScreen(screen, e)}
|
||||
>
|
||||
<Monitor className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
<span className="truncate flex-1">{screen.screenName}</span>
|
||||
<span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
|
||||
{screen.screenCode}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 그룹 내 화면들 (대분류 직속) */}
|
||||
{isExpanded && (
|
||||
<div className="ml-4 mt-1 space-y-0.5">
|
||||
{groupScreens.length === 0 && childGroups.length === 0 ? (
|
||||
<div className="pl-6 py-2 text-xs text-muted-foreground">
|
||||
화면이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
groupScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors",
|
||||
"text-sm hover:bg-accent group/screen",
|
||||
selectedScreen?.screenId === screen.screenId && "bg-accent"
|
||||
)}
|
||||
onClick={() => handleScreenClickInGroup(screen, group)}
|
||||
onDoubleClick={() => handleScreenDoubleClick(screen)}
|
||||
onContextMenu={(e) => handleMoveScreen(screen, e)}
|
||||
>
|
||||
<Monitor className="h-4 w-4 shrink-0 text-blue-500" />
|
||||
<span className="truncate flex-1">{screen.screenName}</span>
|
||||
<span className="text-xs text-muted-foreground truncate max-w-[100px]">
|
||||
{screen.screenCode}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 미분류 화면들 */}
|
||||
{ungroupedScreens.length > 0 && (
|
||||
<div className="mb-1">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
|
||||
"text-sm font-medium text-muted-foreground"
|
||||
)}
|
||||
onClick={() => toggleGroup("ungrouped")}
|
||||
>
|
||||
{expandedGroups.has("ungrouped") ? (
|
||||
<ChevronDown className="h-4 w-4 shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
<Folder className="h-4 w-4 shrink-0" />
|
||||
<span className="truncate flex-1">미분류</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{ungroupedScreens.length}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{expandedGroups.has("ungrouped") && (
|
||||
<div className="ml-4 mt-1 space-y-0.5">
|
||||
{ungroupedScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors",
|
||||
"text-sm hover:bg-accent",
|
||||
selectedScreen?.screenId === screen.screenId && "bg-accent"
|
||||
)}
|
||||
onClick={() => handleScreenClick(screen)}
|
||||
onDoubleClick={() => handleScreenDoubleClick(screen)}
|
||||
onContextMenu={(e) => handleMoveScreen(screen, e)}
|
||||
>
|
||||
<Monitor className="h-4 w-4 shrink-0 text-blue-500" />
|
||||
<span className="truncate flex-1">{screen.screenName}</span>
|
||||
<span className="text-xs text-muted-foreground truncate max-w-[100px]">
|
||||
{screen.screenCode}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groups.length === 0 && ungroupedScreens.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<Monitor className="h-12 w-12 text-muted-foreground/50 mb-2" />
|
||||
<p className="text-sm text-muted-foreground">등록된 화면이 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 그룹 추가/수정 모달 */}
|
||||
<ScreenGroupModal
|
||||
isOpen={isGroupModalOpen}
|
||||
onClose={() => {
|
||||
setIsGroupModalOpen(false);
|
||||
setEditingGroup(null);
|
||||
}}
|
||||
onSuccess={loadGroupsData}
|
||||
group={editingGroup}
|
||||
/>
|
||||
|
||||
{/* 그룹 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-base sm:text-lg">그룹 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-xs sm:text-sm">
|
||||
"{deletingGroup?.group_name}" 그룹을 삭제하시겠습니까?
|
||||
<br />
|
||||
그룹에 속한 화면들은 미분류로 이동됩니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter className="gap-2 sm:gap-0">
|
||||
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
||||
취소
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteGroup}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm bg-destructive hover:bg-destructive/90"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 화면 이동 메뉴 (다이얼로그) */}
|
||||
<Dialog open={isMoveMenuOpen} onOpenChange={setIsMoveMenuOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">화면 그룹 설정</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
"{movingScreen?.screenName}"의 그룹과 역할을 설정하세요
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{/* 그룹 선택 (트리 구조 + 검색) */}
|
||||
<div>
|
||||
<Label htmlFor="target-group" className="text-xs sm:text-sm">
|
||||
그룹 선택 *
|
||||
</Label>
|
||||
<Popover open={isGroupSelectOpen} onOpenChange={setIsGroupSelectOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={isGroupSelectOpen}
|
||||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{selectedGroupForMove === null
|
||||
? "미분류"
|
||||
: getGroupPath(selectedGroupForMove) || "그룹 선택"}
|
||||
<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 py-2 text-center">
|
||||
그룹을 찾을 수 없습니다
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{/* 미분류 옵션 */}
|
||||
<CommandItem
|
||||
value="none"
|
||||
onSelect={() => {
|
||||
setSelectedGroupForMove(null);
|
||||
setIsGroupSelectOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedGroupForMove === null ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<Folder className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
미분류
|
||||
</CommandItem>
|
||||
{/* 계층 구조로 그룹 표시 */}
|
||||
{getSortedGroups().map((group) => (
|
||||
<CommandItem
|
||||
key={group.id}
|
||||
value={`${group.group_name} ${getGroupPath(group.id)}`}
|
||||
onSelect={() => {
|
||||
setSelectedGroupForMove(group.id);
|
||||
setIsGroupSelectOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedGroupForMove === group.id ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{/* 들여쓰기로 계층 표시 */}
|
||||
<span
|
||||
style={{ marginLeft: `${((group.group_level || 1) - 1) * 16}px` }}
|
||||
className="flex items-center"
|
||||
>
|
||||
<Folder className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
{group.group_name}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
계층 구조로 표시됩니다. 검색으로 빠르게 찾을 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 화면 역할 입력 (그룹이 선택된 경우만) */}
|
||||
{selectedGroupForMove !== null && (
|
||||
<>
|
||||
<div>
|
||||
<Label htmlFor="screen-role" className="text-xs sm:text-sm">
|
||||
화면 역할 (선택사항)
|
||||
</Label>
|
||||
<Input
|
||||
id="screen-role"
|
||||
value={screenRole}
|
||||
onChange={(e) => setScreenRole(e.target.value)}
|
||||
placeholder="예: 목록, 등록, 조회, 팝업..."
|
||||
className="h-8 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="display-order" className="text-xs sm:text-sm">
|
||||
표시 순서 *
|
||||
</Label>
|
||||
<Input
|
||||
id="display-order"
|
||||
type="number"
|
||||
value={displayOrder}
|
||||
onChange={(e) => setDisplayOrder(parseInt(e.target.value) || 1)}
|
||||
min={1}
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
화면 흐름 순서 (1: 메인 그리드 → 2: 등록 폼 → 3: 팝업)
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsMoveMenuOpen(false);
|
||||
setMovingScreen(null);
|
||||
setSelectedGroupForMove(null);
|
||||
setScreenRole("");
|
||||
setDisplayOrder(1);
|
||||
}}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => moveScreenToGroup(selectedGroupForMove)}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
이동
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -42,6 +42,8 @@ import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette, RotateC
|
|||
import { ScreenDefinition } from "@/types/screen";
|
||||
import { screenApi } from "@/lib/api/screen";
|
||||
import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
|
||||
import { getScreenGroups, ScreenGroup } from "@/lib/api/screenGroup";
|
||||
import { Layers } from "lucide-react";
|
||||
import CreateScreenModal from "./CreateScreenModal";
|
||||
import CopyScreenModal from "./CopyScreenModal";
|
||||
import dynamic from "next/dynamic";
|
||||
|
|
@ -93,6 +95,11 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
const [isCopyOpen, setIsCopyOpen] = useState(false);
|
||||
const [screenToCopy, setScreenToCopy] = useState<ScreenDefinition | null>(null);
|
||||
|
||||
// 그룹 필터 관련 상태
|
||||
const [selectedGroupId, setSelectedGroupId] = useState<string>("all");
|
||||
const [groups, setGroups] = useState<ScreenGroup[]>([]);
|
||||
const [loadingGroups, setLoadingGroups] = useState(false);
|
||||
|
||||
// 검색어 디바운스를 위한 타이머 ref
|
||||
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
|
|
@ -183,6 +190,25 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
}
|
||||
};
|
||||
|
||||
// 화면 그룹 목록 로드
|
||||
useEffect(() => {
|
||||
loadGroups();
|
||||
}, []);
|
||||
|
||||
const loadGroups = async () => {
|
||||
try {
|
||||
setLoadingGroups(true);
|
||||
const response = await getScreenGroups();
|
||||
if (response.success && response.data) {
|
||||
setGroups(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("그룹 목록 조회 실패:", error);
|
||||
} finally {
|
||||
setLoadingGroups(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 검색어 디바운스 처리 (150ms 지연 - 빠른 응답)
|
||||
useEffect(() => {
|
||||
// 이전 타이머 취소
|
||||
|
|
@ -224,6 +250,11 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
params.companyCode = selectedCompanyCode;
|
||||
}
|
||||
|
||||
// 그룹 필터
|
||||
if (selectedGroupId !== "all") {
|
||||
params.groupId = selectedGroupId;
|
||||
}
|
||||
|
||||
console.log("🔍 화면 목록 API 호출:", params); // 디버깅용
|
||||
const resp = await screenApi.getScreens(params);
|
||||
console.log("✅ 화면 목록 응답:", resp); // 디버깅용
|
||||
|
|
@ -256,7 +287,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
return () => {
|
||||
abort = true;
|
||||
};
|
||||
}, [currentPage, debouncedSearchTerm, activeTab, selectedCompanyCode, isSuperAdmin]);
|
||||
}, [currentPage, debouncedSearchTerm, activeTab, selectedCompanyCode, selectedGroupId, isSuperAdmin]);
|
||||
|
||||
const filteredScreens = screens; // 서버 필터 기준 사용
|
||||
|
||||
|
|
@ -671,6 +702,25 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* 그룹 필터 */}
|
||||
<div className="w-full sm:w-[180px]">
|
||||
<Select value={selectedGroupId} onValueChange={setSelectedGroupId} disabled={activeTab === "trash"}>
|
||||
<SelectTrigger className="h-10 text-sm">
|
||||
<Layers className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<SelectValue placeholder="전체 그룹" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 그룹</SelectItem>
|
||||
<SelectItem value="ungrouped">미분류</SelectItem>
|
||||
{groups.map((group) => (
|
||||
<SelectItem key={group.id} value={String(group.id)}>
|
||||
{group.groupName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 검색 입력 */}
|
||||
<div className="w-full sm:w-[400px]">
|
||||
<div className="relative">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,869 @@
|
|||
"use client";
|
||||
|
||||
import React, { useMemo, useState, useEffect } from "react";
|
||||
import { Handle, Position } from "@xyflow/react";
|
||||
import {
|
||||
Monitor,
|
||||
Database,
|
||||
FormInput,
|
||||
Table2,
|
||||
LayoutDashboard,
|
||||
MousePointer2,
|
||||
Key,
|
||||
Link2,
|
||||
Columns3,
|
||||
} from "lucide-react";
|
||||
import { ScreenLayoutSummary } from "@/lib/api/screenGroup";
|
||||
|
||||
// ========== 타입 정의 ==========
|
||||
|
||||
// 화면 노드 데이터 인터페이스
|
||||
export interface ScreenNodeData {
|
||||
label: string;
|
||||
subLabel?: string;
|
||||
type: "screen" | "table" | "action";
|
||||
tableName?: string;
|
||||
isMain?: boolean;
|
||||
// 레이아웃 요약 정보 (미리보기용)
|
||||
layoutSummary?: ScreenLayoutSummary;
|
||||
// 그룹 내 포커스 관련 속성
|
||||
isInGroup?: boolean; // 그룹 모드인지
|
||||
isFocused?: boolean; // 포커스된 화면인지
|
||||
isFaded?: boolean; // 흑백 처리할지
|
||||
screenRole?: string; // 화면 역할 (메인그리드, 등록폼 등)
|
||||
}
|
||||
|
||||
// 필드 매핑 정보 (조인 관계 표시용)
|
||||
export interface FieldMappingDisplay {
|
||||
sourceField: string; // 메인 테이블 컬럼 (예: manager_id)
|
||||
targetField: string; // 서브 테이블 컬럼 (예: user_id)
|
||||
sourceDisplayName?: string; // 메인 테이블 한글 컬럼명 (예: 담당자)
|
||||
targetDisplayName?: string; // 서브 테이블 한글 컬럼명 (예: 사용자ID)
|
||||
sourceTable?: string; // 소스 테이블명 (필드 매핑에서 테이블 구분용)
|
||||
}
|
||||
|
||||
// 참조 관계 정보 (다른 테이블에서 이 테이블을 참조하는 경우)
|
||||
export interface ReferenceInfo {
|
||||
fromTable: string; // 참조하는 테이블명 (영문)
|
||||
fromTableLabel?: string; // 참조하는 테이블 한글명
|
||||
fromColumn: string; // 참조하는 컬럼명 (영문)
|
||||
fromColumnLabel?: string; // 참조하는 컬럼 한글명
|
||||
toColumn: string; // 참조되는 컬럼명 (이 테이블의 컬럼)
|
||||
toColumnLabel?: string; // 참조되는 컬럼 한글명
|
||||
relationType: 'lookup' | 'join' | 'filter'; // 참조 유형
|
||||
}
|
||||
|
||||
// 테이블 노드 데이터 인터페이스
|
||||
export interface TableNodeData {
|
||||
label: string;
|
||||
subLabel?: string;
|
||||
isMain?: boolean;
|
||||
isFocused?: boolean; // 포커스된 테이블인지
|
||||
isFaded?: boolean; // 흑백 처리할지
|
||||
columns?: Array<{
|
||||
name: string; // 표시용 이름 (한글명)
|
||||
originalName?: string; // 원본 컬럼명 (영문, 필터링용)
|
||||
type: string;
|
||||
isPrimaryKey?: boolean;
|
||||
isForeignKey?: boolean;
|
||||
}>;
|
||||
// 포커스 시 강조할 컬럼 정보
|
||||
highlightedColumns?: string[]; // 화면에서 사용하는 컬럼 (영문명)
|
||||
joinColumns?: string[]; // 조인에 사용되는 컬럼
|
||||
joinColumnRefs?: Array<{ // 조인 컬럼의 참조 정보
|
||||
column: string; // FK 컬럼명 (예: 'customer_id')
|
||||
refTable: string; // 참조 테이블 (예: 'customer_mng')
|
||||
refTableLabel?: string; // 참조 테이블 한글명 (예: '거래처 관리')
|
||||
refColumn: string; // 참조 컬럼 (예: 'customer_code')
|
||||
}>;
|
||||
filterColumns?: string[]; // 필터링에 사용되는 FK 컬럼 (마스터-디테일 관계)
|
||||
// 필드 매핑 정보 (조인 관계 표시용)
|
||||
fieldMappings?: FieldMappingDisplay[]; // 서브 테이블일 때 조인 관계 표시
|
||||
// 참조 관계 정보 (다른 테이블에서 이 테이블을 참조하는 경우)
|
||||
referencedBy?: ReferenceInfo[]; // 이 테이블을 참조하는 관계들
|
||||
// 저장 관계 정보
|
||||
saveInfos?: Array<{
|
||||
saveType: string; // 'save' | 'edit' | 'delete' | 'transferData'
|
||||
componentType: string; // 버튼 컴포넌트 타입
|
||||
isMainTable: boolean; // 메인 테이블 저장인지
|
||||
sourceScreenId?: number; // 어떤 화면에서 저장하는지
|
||||
}>;
|
||||
}
|
||||
|
||||
// ========== 유틸리티 함수 ==========
|
||||
|
||||
// 화면 타입별 아이콘
|
||||
const getScreenTypeIcon = (screenType?: string) => {
|
||||
switch (screenType) {
|
||||
case "grid":
|
||||
return <Table2 className="h-4 w-4" />;
|
||||
case "dashboard":
|
||||
return <LayoutDashboard className="h-4 w-4" />;
|
||||
case "action":
|
||||
return <MousePointer2 className="h-4 w-4" />;
|
||||
default:
|
||||
return <FormInput className="h-4 w-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 타입별 색상 (헤더)
|
||||
const getScreenTypeColor = (screenType?: string, isMain?: boolean) => {
|
||||
if (!isMain) return "bg-slate-400";
|
||||
switch (screenType) {
|
||||
case "grid":
|
||||
return "bg-violet-500";
|
||||
case "dashboard":
|
||||
return "bg-amber-500";
|
||||
case "action":
|
||||
return "bg-rose-500";
|
||||
default:
|
||||
return "bg-blue-500";
|
||||
}
|
||||
};
|
||||
|
||||
// 화면 역할(screenRole)에 따른 색상
|
||||
const getScreenRoleColor = (screenRole?: string) => {
|
||||
if (!screenRole) return "bg-slate-400";
|
||||
|
||||
// 역할명에 포함된 키워드로 색상 결정
|
||||
const role = screenRole.toLowerCase();
|
||||
|
||||
if (role.includes("그리드") || role.includes("grid") || role.includes("메인") || role.includes("main") || role.includes("list")) {
|
||||
return "bg-violet-500"; // 보라색 - 메인 그리드
|
||||
}
|
||||
if (role.includes("등록") || role.includes("폼") || role.includes("form") || role.includes("register") || role.includes("input")) {
|
||||
return "bg-blue-500"; // 파란색 - 등록 폼
|
||||
}
|
||||
if (role.includes("액션") || role.includes("action") || role.includes("이벤트") || role.includes("event") || role.includes("클릭")) {
|
||||
return "bg-rose-500"; // 빨간색 - 액션/이벤트
|
||||
}
|
||||
if (role.includes("상세") || role.includes("detail") || role.includes("popup") || role.includes("팝업")) {
|
||||
return "bg-amber-500"; // 주황색 - 상세/팝업
|
||||
}
|
||||
|
||||
return "bg-slate-400"; // 기본 회색
|
||||
};
|
||||
|
||||
// 화면 타입별 라벨
|
||||
const getScreenTypeLabel = (screenType?: string) => {
|
||||
switch (screenType) {
|
||||
case "grid":
|
||||
return "그리드";
|
||||
case "dashboard":
|
||||
return "대시보드";
|
||||
case "action":
|
||||
return "액션";
|
||||
default:
|
||||
return "폼";
|
||||
}
|
||||
};
|
||||
|
||||
// ========== 화면 노드 (상단) - 미리보기 표시 ==========
|
||||
export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
|
||||
const { label, subLabel, isMain, tableName, layoutSummary, isInGroup, isFocused, isFaded, screenRole } = data;
|
||||
const screenType = layoutSummary?.screenType || "form";
|
||||
|
||||
// 그룹 모드에서는 screenRole 기반 색상, 그렇지 않으면 screenType 기반 색상
|
||||
// isFocused일 때 색상 활성화, isFaded일 때 회색
|
||||
let headerColor: string;
|
||||
if (isInGroup) {
|
||||
if (isFaded) {
|
||||
headerColor = "bg-gray-300"; // 흑백 처리 - 더 확실한 회색
|
||||
} else {
|
||||
// 포커스되었거나 아직 아무것도 선택 안됐을 때: 역할별 색상
|
||||
headerColor = getScreenRoleColor(screenRole);
|
||||
}
|
||||
} else {
|
||||
headerColor = getScreenTypeColor(screenType, isMain);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex h-[320px] w-[260px] flex-col overflow-hidden rounded-lg border bg-card shadow-md transition-all cursor-pointer ${
|
||||
isFocused
|
||||
? "border-2 border-primary ring-4 ring-primary/50 shadow-xl scale-105"
|
||||
: isFaded
|
||||
? "border-gray-200 opacity-50"
|
||||
: "border-border hover:shadow-lg hover:ring-2 hover:ring-primary/20"
|
||||
}`}
|
||||
style={{
|
||||
filter: isFaded ? "grayscale(100%)" : "none",
|
||||
transition: "all 0.3s ease",
|
||||
transform: isFocused ? "scale(1.02)" : "scale(1)",
|
||||
}}
|
||||
>
|
||||
{/* Handles */}
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
id="left"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
id="right"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
id="bottom"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
|
||||
{/* 헤더 (컬러) */}
|
||||
<div className={`flex items-center gap-2 px-3 py-2 text-white ${headerColor} transition-colors duration-300`}>
|
||||
<Monitor className="h-4 w-4" />
|
||||
<span className="flex-1 truncate text-xs font-semibold">{label}</span>
|
||||
{(isMain || isFocused) && <span className="flex h-2 w-2 rounded-full bg-white/80 animate-pulse" />}
|
||||
</div>
|
||||
|
||||
{/* 화면 미리보기 영역 (컴팩트) */}
|
||||
<div className="h-[140px] overflow-hidden bg-slate-50 p-2">
|
||||
{layoutSummary ? (
|
||||
<ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center text-muted-foreground">
|
||||
{getScreenTypeIcon(screenType)}
|
||||
<span className="mt-1 text-[10px]">화면: {label}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 필드 매핑 영역 */}
|
||||
<div className="flex-1 overflow-hidden border-t border-slate-200 bg-white px-2 py-1.5">
|
||||
<div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-slate-500">
|
||||
<Columns3 className="h-3 w-3" />
|
||||
<span>필드 매핑</span>
|
||||
<span className="ml-auto text-[8px] text-slate-400">
|
||||
{layoutSummary?.layoutItems?.filter(i => i.label && !i.componentKind?.includes('button')).length || 0}개
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 overflow-y-auto" style={{ maxHeight: '80px' }}>
|
||||
{layoutSummary?.layoutItems
|
||||
?.filter(item => item.label && !item.componentKind?.includes('button'))
|
||||
?.slice(0, 6)
|
||||
?.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-1 rounded bg-slate-50 px-1.5 py-0.5">
|
||||
<div className={`h-1.5 w-1.5 rounded-full ${
|
||||
item.componentKind === 'table-list' ? 'bg-violet-400' :
|
||||
item.componentKind?.includes('select') ? 'bg-amber-400' :
|
||||
'bg-slate-400'
|
||||
}`} />
|
||||
<span className="flex-1 truncate text-[9px] text-slate-600">{item.label}</span>
|
||||
<span className="text-[8px] text-slate-400">{item.componentKind?.split('-')[0] || 'field'}</span>
|
||||
</div>
|
||||
)) || (
|
||||
<div className="text-center text-[9px] text-slate-400 py-2">필드 정보 없음</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 푸터 (테이블 정보) */}
|
||||
<div className="flex items-center justify-between border-t border-border bg-muted/30 px-3 py-1.5">
|
||||
<div className="flex items-center gap-1 text-[10px] text-muted-foreground">
|
||||
<Database className="h-3 w-3" />
|
||||
<span className="max-w-[120px] truncate font-mono">{tableName || "No Table"}</span>
|
||||
</div>
|
||||
<span className="rounded bg-muted px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground">
|
||||
{getScreenTypeLabel(screenType)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ========== 컴포넌트 종류별 미니어처 색상 ==========
|
||||
// componentKind는 더 정확한 컴포넌트 타입 (table-list, button-primary 등)
|
||||
const getComponentColor = (componentKind: string) => {
|
||||
// 테이블/그리드 관련
|
||||
if (componentKind === "table-list" || componentKind === "data-grid") {
|
||||
return "bg-violet-200 border-violet-400";
|
||||
}
|
||||
// 검색 필터
|
||||
if (componentKind === "table-search-widget" || componentKind === "search-filter") {
|
||||
return "bg-pink-200 border-pink-400";
|
||||
}
|
||||
// 버튼 관련
|
||||
if (componentKind?.includes("button")) {
|
||||
return "bg-blue-300 border-blue-500";
|
||||
}
|
||||
// 입력 필드
|
||||
if (componentKind?.includes("input") || componentKind?.includes("text")) {
|
||||
return "bg-slate-200 border-slate-400";
|
||||
}
|
||||
// 셀렉트/드롭다운
|
||||
if (componentKind?.includes("select") || componentKind?.includes("dropdown")) {
|
||||
return "bg-amber-200 border-amber-400";
|
||||
}
|
||||
// 차트
|
||||
if (componentKind?.includes("chart")) {
|
||||
return "bg-emerald-200 border-emerald-400";
|
||||
}
|
||||
// 커스텀 위젯
|
||||
if (componentKind === "custom") {
|
||||
return "bg-pink-200 border-pink-400";
|
||||
}
|
||||
return "bg-slate-100 border-slate-300";
|
||||
};
|
||||
|
||||
// ========== 화면 미리보기 컴포넌트 - 화면 타입별 간단한 일러스트 ==========
|
||||
const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType: string }> = ({
|
||||
layoutSummary,
|
||||
screenType,
|
||||
}) => {
|
||||
const { totalComponents, widgetCounts } = layoutSummary;
|
||||
|
||||
// 그리드 화면 일러스트
|
||||
if (screenType === "grid") {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
||||
{/* 상단 툴바 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-16 rounded bg-pink-400/80 shadow-sm" />
|
||||
<div className="flex-1" />
|
||||
<div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
|
||||
<div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
|
||||
<div className="h-4 w-8 rounded bg-rose-500 shadow-sm" />
|
||||
</div>
|
||||
{/* 테이블 헤더 */}
|
||||
<div className="flex gap-1 rounded-t-md bg-violet-500 px-2 py-2 shadow-sm">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-2.5 flex-1 rounded bg-white/40" />
|
||||
))}
|
||||
</div>
|
||||
{/* 테이블 행들 */}
|
||||
<div className="flex flex-1 flex-col gap-1 overflow-hidden">
|
||||
{[...Array(7)].map((_, i) => (
|
||||
<div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-slate-100" : "bg-white"}`}>
|
||||
{[...Array(5)].map((_, j) => (
|
||||
<div key={j} className="h-2 flex-1 rounded bg-slate-300/70" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 페이지네이션 */}
|
||||
<div className="flex items-center justify-center gap-2 pt-1">
|
||||
<div className="h-2.5 w-4 rounded bg-slate-300" />
|
||||
<div className="h-2.5 w-4 rounded bg-blue-500" />
|
||||
<div className="h-2.5 w-4 rounded bg-slate-300" />
|
||||
<div className="h-2.5 w-4 rounded bg-slate-300" />
|
||||
</div>
|
||||
{/* 컴포넌트 수 */}
|
||||
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
||||
{totalComponents}개
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 폼 화면 일러스트
|
||||
if (screenType === "form") {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
||||
{/* 폼 필드들 */}
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<div className="h-2.5 w-14 rounded bg-slate-400" />
|
||||
<div className="h-5 flex-1 rounded-md border border-slate-300 bg-white shadow-sm" />
|
||||
</div>
|
||||
))}
|
||||
{/* 버튼 영역 */}
|
||||
<div className="mt-auto flex justify-end gap-2 border-t border-slate-100 pt-3">
|
||||
<div className="h-5 w-14 rounded-md bg-slate-300 shadow-sm" />
|
||||
<div className="h-5 w-14 rounded-md bg-blue-500 shadow-sm" />
|
||||
</div>
|
||||
{/* 컴포넌트 수 */}
|
||||
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
||||
{totalComponents}개
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 대시보드 화면 일러스트
|
||||
if (screenType === "dashboard") {
|
||||
return (
|
||||
<div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
||||
{/* 카드/차트들 */}
|
||||
<div className="rounded-lg bg-emerald-100 p-2 shadow-sm">
|
||||
<div className="mb-2 h-2.5 w-10 rounded bg-emerald-400" />
|
||||
<div className="h-10 rounded-md bg-emerald-300/80" />
|
||||
</div>
|
||||
<div className="rounded-lg bg-amber-100 p-2 shadow-sm">
|
||||
<div className="mb-2 h-2.5 w-10 rounded bg-amber-400" />
|
||||
<div className="h-10 rounded-md bg-amber-300/80" />
|
||||
</div>
|
||||
<div className="col-span-2 rounded-lg bg-blue-100 p-2 shadow-sm">
|
||||
<div className="mb-2 h-2.5 w-12 rounded bg-blue-400" />
|
||||
<div className="flex h-14 items-end gap-1">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 rounded-t bg-blue-400/80"
|
||||
style={{ height: `${25 + Math.random() * 75}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* 컴포넌트 수 */}
|
||||
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
||||
{totalComponents}개
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 액션 화면 일러스트 (버튼 중심)
|
||||
if (screenType === "action") {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
|
||||
<div className="rounded-full bg-slate-100 p-4 text-slate-400">
|
||||
<MousePointer2 className="h-10 w-10" />
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="h-7 w-16 rounded-md bg-blue-500 shadow-sm" />
|
||||
<div className="h-7 w-16 rounded-md bg-slate-300 shadow-sm" />
|
||||
</div>
|
||||
<div className="text-xs font-medium text-slate-400">액션 화면</div>
|
||||
{/* 컴포넌트 수 */}
|
||||
<div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
|
||||
{totalComponents}개
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 기본 (알 수 없는 타입)
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white text-slate-400">
|
||||
<div className="rounded-full bg-slate-100 p-4">
|
||||
{getScreenTypeIcon(screenType)}
|
||||
</div>
|
||||
<span className="text-sm font-medium">{totalComponents}개 컴포넌트</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ========== 테이블 노드 (하단) - 컬럼 목록 표시 (컴팩트) ==========
|
||||
export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
|
||||
const { label, subLabel, isMain, isFocused, isFaded, columns, highlightedColumns, joinColumns, joinColumnRefs, filterColumns, fieldMappings, referencedBy, saveInfos } = data;
|
||||
|
||||
// 강조할 컬럼 세트 (영문 컬럼명 기준)
|
||||
const highlightSet = new Set(highlightedColumns || []);
|
||||
const filterSet = new Set(filterColumns || []); // 필터링에 사용되는 FK 컬럼
|
||||
const joinSet = new Set(joinColumns || []);
|
||||
|
||||
// 조인 컬럼 참조 정보 맵 생성 (column → { refTable, refTableLabel, refColumn })
|
||||
const joinRefMap = new Map<string, { refTable: string; refTableLabel: string; refColumn: string }>();
|
||||
if (joinColumnRefs) {
|
||||
joinColumnRefs.forEach((ref) => {
|
||||
joinRefMap.set(ref.column, {
|
||||
refTable: ref.refTable,
|
||||
refTableLabel: ref.refTableLabel || ref.refTable, // 한글명 (없으면 영문명)
|
||||
refColumn: ref.refColumn
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 필드 매핑 맵 생성 (targetField → { sourceField, sourceDisplayName })
|
||||
// 서브 테이블에서 targetField가 어떤 메인 테이블 컬럼(sourceField)과 연결되는지
|
||||
const fieldMappingMap = new Map<string, { sourceField: string; sourceDisplayName: string }>();
|
||||
if (fieldMappings) {
|
||||
fieldMappings.forEach(mapping => {
|
||||
fieldMappingMap.set(mapping.targetField, {
|
||||
sourceField: mapping.sourceField,
|
||||
// 한글명이 있으면 한글명, 없으면 영문명 사용
|
||||
sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 필터 소스 컬럼 세트 (메인 테이블에서 필터에 사용되는 컬럼)
|
||||
const filterSourceSet = new Set(
|
||||
referencedBy?.filter(r => r.relationType === 'filter').map(r => r.fromColumn) || []
|
||||
);
|
||||
|
||||
// 포커스 모드: 사용 컬럼만 필터링하여 표시
|
||||
// originalName (영문) 또는 name으로 매칭 시도
|
||||
// 필터 컬럼(filterSet) 및 필터 소스 컬럼(filterSourceSet)도 포함하여 보라색으로 표시
|
||||
const potentialFilteredColumns = columns?.filter(col => {
|
||||
const colOriginal = col.originalName || col.name;
|
||||
return highlightSet.has(colOriginal) || joinSet.has(colOriginal) || filterSet.has(colOriginal) || filterSourceSet.has(colOriginal);
|
||||
}) || [];
|
||||
|
||||
// 정렬: 조인 컬럼 → 필터 컬럼/필터 소스 컬럼 → 사용 컬럼 순서
|
||||
const sortedFilteredColumns = [...potentialFilteredColumns].sort((a, b) => {
|
||||
const aOriginal = a.originalName || a.name;
|
||||
const bOriginal = b.originalName || b.name;
|
||||
|
||||
const aIsJoin = joinSet.has(aOriginal);
|
||||
const bIsJoin = joinSet.has(bOriginal);
|
||||
const aIsFilter = filterSet.has(aOriginal) || filterSourceSet.has(aOriginal);
|
||||
const bIsFilter = filterSet.has(bOriginal) || filterSourceSet.has(bOriginal);
|
||||
|
||||
// 조인 컬럼 우선
|
||||
if (aIsJoin && !bIsJoin) return -1;
|
||||
if (!aIsJoin && bIsJoin) return 1;
|
||||
// 필터 컬럼/필터 소스 다음
|
||||
if (aIsFilter && !bIsFilter) return -1;
|
||||
if (!aIsFilter && bIsFilter) return 1;
|
||||
// 나머지는 원래 순서 유지
|
||||
return 0;
|
||||
});
|
||||
|
||||
const hasActiveColumns = sortedFilteredColumns.length > 0;
|
||||
|
||||
// 필터 관계가 있는 테이블인지 확인 (마스터-디테일 필터링)
|
||||
// - hasFilterRelation: 디테일 테이블 (WHERE 조건 대상) - filterColumns에 FK 컬럼이 있음
|
||||
// - isFilterSource: 마스터 테이블 (필터 소스, WHERE 조건 제공) - 포커스된 화면의 메인 테이블이고 filterSourceSet에 컬럼이 있음
|
||||
// 디테일 테이블: filterColumns(filterSet)에 FK 컬럼이 있고, 포커스된 화면의 메인이 아님
|
||||
const hasFilterRelation = filterSet.size > 0 && !isFocused;
|
||||
// 마스터 테이블: 포커스된 화면의 메인 테이블(isFocused)이고 filterSourceSet에 컬럼이 있음
|
||||
const isFilterSource = isFocused && filterSourceSet.size > 0;
|
||||
|
||||
// 표시할 컬럼:
|
||||
// - 포커스 시 (활성 컬럼 있음): 정렬된 컬럼만 표시
|
||||
// - 비포커스 시: 최대 8개만 표시
|
||||
const MAX_DEFAULT_COLUMNS = 8;
|
||||
const allColumns = columns || [];
|
||||
const displayColumns = hasActiveColumns
|
||||
? sortedFilteredColumns
|
||||
: allColumns.slice(0, MAX_DEFAULT_COLUMNS);
|
||||
const remainingCount = hasActiveColumns
|
||||
? 0
|
||||
: Math.max(0, allColumns.length - MAX_DEFAULT_COLUMNS);
|
||||
const totalCount = allColumns.length;
|
||||
|
||||
// 컬럼 수 기반 높이 계산 (DOM 측정 없이)
|
||||
// - 각 컬럼 행 높이: 약 22px (py-0.5 + text + gap-px)
|
||||
// - 컨테이너 패딩: p-1.5 = 12px (상하 합계)
|
||||
// - 뱃지 높이: 약 26px (py-1 + text + gap)
|
||||
const COLUMN_ROW_HEIGHT = 22;
|
||||
const CONTAINER_PADDING = 12;
|
||||
const BADGE_HEIGHT = 26;
|
||||
const MAX_HEIGHT = 200; // 뱃지 포함 가능하도록 증가
|
||||
|
||||
// 뱃지가 표시될지 미리 계산 (필터/참조만, 저장은 헤더에 표시)
|
||||
const hasFilterOrLookupBadge = referencedBy && referencedBy.some(r => r.relationType === 'filter' || r.relationType === 'lookup');
|
||||
const hasBadge = hasFilterOrLookupBadge;
|
||||
|
||||
const calculatedHeight = useMemo(() => {
|
||||
const badgeHeight = hasBadge ? BADGE_HEIGHT : 0;
|
||||
const rawHeight = CONTAINER_PADDING + badgeHeight + (displayColumns.length * COLUMN_ROW_HEIGHT);
|
||||
return Math.min(rawHeight, MAX_HEIGHT);
|
||||
}, [displayColumns.length, hasBadge]);
|
||||
|
||||
// Debounce된 높이: 중간 값(늘어났다가 줄어드는 현상)을 무시하고 최종 값만 사용
|
||||
// 듀얼 그리드에서 filterColumns와 joinColumns가 2단계로 업데이트되는 문제 해결
|
||||
const [debouncedHeight, setDebouncedHeight] = useState(calculatedHeight);
|
||||
|
||||
useEffect(() => {
|
||||
// 50ms 내에 다시 변경되면 이전 값 무시
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedHeight(calculatedHeight);
|
||||
}, 50);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [calculatedHeight]);
|
||||
|
||||
// 저장 대상 여부
|
||||
const hasSaveTarget = saveInfos && saveInfos.length > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex w-[260px] flex-col overflow-visible rounded-xl border shadow-md ${
|
||||
// 필터 관련 테이블 (마스터 또는 디테일): 보라색
|
||||
(hasFilterRelation || isFilterSource)
|
||||
? "border-2 border-violet-500 ring-4 ring-violet-500/30 shadow-xl bg-violet-50"
|
||||
// 순수 포커스 (필터 관계 없음): 초록색
|
||||
: isFocused
|
||||
? "border-2 border-emerald-500 ring-4 ring-emerald-500/30 shadow-xl bg-card"
|
||||
// 흐리게 처리
|
||||
: isFaded
|
||||
? "border-gray-200 opacity-60 bg-card"
|
||||
// 기본
|
||||
: "border-border hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20 bg-card"
|
||||
}`}
|
||||
style={{
|
||||
filter: isFaded ? "grayscale(80%)" : "none",
|
||||
// 색상/테두리/그림자만 transition (높이 제외)
|
||||
transition: "background-color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease, filter 0.3s ease, opacity 0.3s ease",
|
||||
}}
|
||||
title={hasSaveTarget ? "저장 대상 테이블" : undefined}
|
||||
>
|
||||
{/* 저장 대상: 테이블 바깥 왼쪽에 띄워진 막대기 (나타나기/사라지기 애니메이션) */}
|
||||
<div
|
||||
className="absolute -left-1.5 top-1 bottom-1 w-0.5 z-20 rounded-full transition-all duration-500 ease-out"
|
||||
title={hasSaveTarget ? "저장 대상 테이블" : undefined}
|
||||
style={{
|
||||
background: 'linear-gradient(to bottom, transparent 0%, #f472b6 15%, #f472b6 85%, transparent 100%)',
|
||||
opacity: hasSaveTarget ? 1 : 0,
|
||||
transform: hasSaveTarget ? 'scaleY(1)' : 'scaleY(0)',
|
||||
transformOrigin: 'top',
|
||||
pointerEvents: hasSaveTarget ? 'auto' : 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Handles */}
|
||||
{/* top target: 화면 → 메인테이블 연결용 */}
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Top}
|
||||
id="top"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
{/* top source: 메인테이블 → 메인테이블 연결용 (위쪽으로 나가는 선) */}
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Top}
|
||||
id="top_source"
|
||||
style={{ top: -4 }}
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
id="left"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
id="right"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
id="bottom"
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
{/* bottom target: 메인테이블 ← 메인테이블 연결용 (아래에서 들어오는 선) */}
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Bottom}
|
||||
id="bottom_target"
|
||||
style={{ bottom: -4 }}
|
||||
className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
|
||||
{/* 헤더 (필터 관계: 보라색, 필터 소스: 보라색, 메인: 초록색, 기본: 슬레이트) */}
|
||||
<div className={`flex items-center gap-2 px-3 py-1.5 text-white rounded-t-xl transition-colors duration-700 ease-in-out ${
|
||||
isFaded ? "bg-gray-400" : (hasFilterRelation || isFilterSource) ? "bg-violet-600" : isMain ? "bg-emerald-600" : "bg-slate-500"
|
||||
}`}>
|
||||
<Database className="h-3.5 w-3.5 shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="truncate text-[11px] font-semibold">{label}</div>
|
||||
{/* 필터 관계에 따른 문구 변경 */}
|
||||
<div className="truncate text-[9px] opacity-80">
|
||||
{isFilterSource
|
||||
? "마스터 테이블 (필터 소스)"
|
||||
: hasFilterRelation
|
||||
? "디테일 테이블 (WHERE 조건)"
|
||||
: subLabel}
|
||||
</div>
|
||||
</div>
|
||||
{hasActiveColumns && (
|
||||
<span className="rounded-full bg-white/20 px-1.5 py-0.5 text-[8px] shrink-0">
|
||||
{displayColumns.length}개 활성
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 컬럼 목록 - 컴팩트하게 (부드러운 높이 전환 + 스크롤) */}
|
||||
{/* 뱃지도 이 영역 안에 포함되어 높이 계산에 반영됨 */}
|
||||
<div
|
||||
className="p-1.5 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"
|
||||
style={{
|
||||
height: `${debouncedHeight}px`,
|
||||
maxHeight: `${MAX_HEIGHT}px`,
|
||||
// Debounce로 중간 값이 무시되므로 항상 부드러운 transition 적용 가능
|
||||
transition: 'height 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}}
|
||||
>
|
||||
{/* 필터링/참조 관계 뱃지 (컬럼 목록 영역 안에 포함, 저장은 헤더에 표시) */}
|
||||
{hasBadge && (() => {
|
||||
const filterRefs = referencedBy?.filter(r => r.relationType === 'filter') || [];
|
||||
const lookupRefs = referencedBy?.filter(r => r.relationType === 'lookup') || [];
|
||||
|
||||
if (filterRefs.length === 0 && lookupRefs.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-slate-300 bg-slate-50 text-[9px]">
|
||||
{/* 필터 뱃지 */}
|
||||
{filterRefs.length > 0 && (
|
||||
<span
|
||||
className="flex items-center gap-1 rounded-full bg-violet-600 px-2 py-px text-white font-semibold shadow-sm"
|
||||
title={`마스터-디테일 필터링\n${filterRefs.map(r => `${r.fromTable}.${r.fromColumn || 'id'} → ${r.toColumn}`).join('\n')}`}
|
||||
>
|
||||
<Link2 className="h-3 w-3" />
|
||||
<span>필터</span>
|
||||
</span>
|
||||
)}
|
||||
{filterRefs.length > 0 && (
|
||||
<span className="text-violet-700 font-medium truncate">
|
||||
{filterRefs.map(r => `${r.fromTableLabel || r.fromTable}.${r.fromColumnLabel || r.fromColumn || 'id'}`).join(', ')}
|
||||
</span>
|
||||
)}
|
||||
{/* 참조 뱃지 */}
|
||||
{lookupRefs.length > 0 && (
|
||||
<span
|
||||
className="flex items-center gap-1 rounded-full bg-amber-500 px-2 py-px text-white font-semibold shadow-sm"
|
||||
title={`코드 참조 (lookup)\n${lookupRefs.map(r => `${r.fromTable} → ${r.toColumn}`).join('\n')}`}
|
||||
>
|
||||
{lookupRefs.length}곳 참조
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{displayColumns.length > 0 ? (
|
||||
<div className="flex flex-col gap-px transition-all duration-700 ease-in-out">
|
||||
{displayColumns.map((col, idx) => {
|
||||
const colOriginal = col.originalName || col.name;
|
||||
const isJoinColumn = joinSet.has(colOriginal);
|
||||
const isFilterColumn = filterSet.has(colOriginal); // 서브 테이블의 필터링 FK 컬럼
|
||||
const isHighlighted = highlightSet.has(colOriginal);
|
||||
|
||||
// 필터링 참조 정보 (어떤 테이블의 어떤 컬럼에서 필터링되는지) - 서브 테이블용
|
||||
const filterRefInfo = referencedBy?.find(
|
||||
r => r.relationType === 'filter' && r.toColumn === colOriginal
|
||||
);
|
||||
|
||||
// 메인 테이블에서 필터 소스로 사용되는 컬럼인지 (fromColumn과 일치)
|
||||
const isFilterSourceColumn = filterSourceSet.has(colOriginal);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={col.name}
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-0.5 transition-all duration-300 ${
|
||||
isJoinColumn
|
||||
? "bg-orange-100 border border-orange-300 shadow-sm"
|
||||
: isFilterColumn || isFilterSourceColumn
|
||||
? "bg-violet-100 border border-violet-300 shadow-sm" // 필터 컬럼/필터 소스: 보라색
|
||||
: isHighlighted
|
||||
? "bg-blue-100 border border-blue-300 shadow-sm"
|
||||
: hasActiveColumns
|
||||
? "bg-slate-100"
|
||||
: "bg-slate-50 hover:bg-slate-100"
|
||||
}`}
|
||||
style={{
|
||||
animation: hasActiveColumns ? `fadeIn 0.5s ease-out ${idx * 80}ms forwards` : undefined,
|
||||
opacity: hasActiveColumns ? 0 : 1,
|
||||
}}
|
||||
>
|
||||
{/* PK/FK/조인/필터 아이콘 */}
|
||||
{isJoinColumn && <Link2 className="h-2.5 w-2.5 text-orange-500" />}
|
||||
{(isFilterColumn || isFilterSourceColumn) && !isJoinColumn && <Link2 className="h-2.5 w-2.5 text-violet-500" />}
|
||||
{!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isPrimaryKey && <Key className="h-2.5 w-2.5 text-amber-500" />}
|
||||
{!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-blue-500" />}
|
||||
{!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && !col.isPrimaryKey && !col.isForeignKey && <div className="w-2.5" />}
|
||||
|
||||
{/* 컬럼명 */}
|
||||
<span className={`flex-1 truncate font-mono text-[9px] font-medium ${
|
||||
isJoinColumn ? "text-orange-700"
|
||||
: (isFilterColumn || isFilterSourceColumn) ? "text-violet-700"
|
||||
: isHighlighted ? "text-blue-700"
|
||||
: "text-slate-700"
|
||||
}`}>
|
||||
{col.name}
|
||||
</span>
|
||||
|
||||
{/* 역할 태그 + 참조 관계 표시 */}
|
||||
{isJoinColumn && (
|
||||
<>
|
||||
{/* 조인 참조 테이블 표시 (joinColumnRefs에서) */}
|
||||
{joinRefMap.has(colOriginal) && (
|
||||
<span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
|
||||
← {joinRefMap.get(colOriginal)?.refTableLabel}
|
||||
</span>
|
||||
)}
|
||||
{/* 필드 매핑 참조 표시 (fieldMappingMap에서, joinRefMap에 없는 경우) */}
|
||||
{!joinRefMap.has(colOriginal) && fieldMappingMap.has(colOriginal) && (
|
||||
<span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
|
||||
← {fieldMappingMap.get(colOriginal)?.sourceDisplayName}
|
||||
</span>
|
||||
)}
|
||||
<span className="rounded bg-orange-200 px-1 text-[7px] text-orange-700">조인</span>
|
||||
</>
|
||||
)}
|
||||
{isFilterColumn && !isJoinColumn && (
|
||||
<span className="rounded bg-violet-200 px-1 text-[7px] text-violet-700">필터</span>
|
||||
)}
|
||||
{/* 메인 테이블에서 필터 소스로 사용되는 컬럼: "필터" + "사용" 둘 다 표시 */}
|
||||
{isFilterSourceColumn && !isJoinColumn && !isFilterColumn && (
|
||||
<>
|
||||
<span className="rounded bg-violet-200 px-1 text-[7px] text-violet-700">필터</span>
|
||||
{isHighlighted && (
|
||||
<span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isHighlighted && !isJoinColumn && !isFilterColumn && !isFilterSourceColumn && (
|
||||
<span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
|
||||
)}
|
||||
|
||||
{/* 타입 */}
|
||||
<span className="text-[8px] text-slate-400">{col.type}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* 더 많은 컬럼이 있을 경우 표시 */}
|
||||
{remainingCount > 0 && (
|
||||
<div className="text-center text-[8px] text-slate-400 py-0.5">
|
||||
+ {remainingCount}개 더
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-2 text-muted-foreground">
|
||||
<Database className="h-4 w-4 text-slate-300" />
|
||||
<span className="mt-0.5 text-[8px] text-slate-400">컬럼 정보 없음</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 푸터 (컴팩트) */}
|
||||
<div className="flex items-center justify-between border-t border-border bg-muted/30 px-2 py-1">
|
||||
<span className="text-[9px] text-muted-foreground">PostgreSQL</span>
|
||||
{columns && (
|
||||
<span className="text-[9px] text-muted-foreground">
|
||||
{hasActiveColumns ? `${displayColumns.length}/${totalCount}` : totalCount}개 컬럼
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* CSS 애니메이션 정의 */}
|
||||
<style jsx>{`
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ========== 기존 호환성 유지용 ==========
|
||||
export const LegacyScreenNode = ScreenNode;
|
||||
export const AggregateNode: React.FC<{ data: any }> = ({ data }) => {
|
||||
return (
|
||||
<div className="rounded-lg border-2 border-purple-300 bg-white p-3 shadow-lg">
|
||||
<Handle type="target" position={Position.Left} id="left" className="!h-3 !w-3 !bg-purple-500" />
|
||||
<Handle type="source" position={Position.Right} id="right" className="!h-3 !w-3 !bg-purple-500" />
|
||||
<div className="flex items-center gap-2 text-purple-600">
|
||||
<Table2 className="h-4 w-4" />
|
||||
<span className="text-sm font-semibold">{data.label || "Aggregate"}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,296 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { ScreenDefinition } from "@/types/screen";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Database,
|
||||
Monitor,
|
||||
ArrowRight,
|
||||
Link2,
|
||||
Table,
|
||||
Columns,
|
||||
ExternalLink,
|
||||
Layers,
|
||||
GitBranch
|
||||
} from "lucide-react";
|
||||
import { getFieldJoins, getDataFlows, getTableRelations, FieldJoin, DataFlow, TableRelation } from "@/lib/api/screenGroup";
|
||||
import { screenApi } from "@/lib/api/screen";
|
||||
|
||||
interface ScreenRelationViewProps {
|
||||
screen: ScreenDefinition | null;
|
||||
}
|
||||
|
||||
export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fieldJoins, setFieldJoins] = useState<FieldJoin[]>([]);
|
||||
const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
|
||||
const [tableRelations, setTableRelations] = useState<TableRelation[]>([]);
|
||||
const [layoutInfo, setLayoutInfo] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadRelations = async () => {
|
||||
if (!screen) {
|
||||
setFieldJoins([]);
|
||||
setDataFlows([]);
|
||||
setTableRelations([]);
|
||||
setLayoutInfo(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 병렬로 데이터 로드
|
||||
const [joinsRes, flowsRes, relationsRes, layoutRes] = await Promise.all([
|
||||
getFieldJoins(screen.screenId),
|
||||
getDataFlows(screen.screenId),
|
||||
getTableRelations(screen.screenId),
|
||||
screenApi.getLayout(screen.screenId).catch(() => null),
|
||||
]);
|
||||
|
||||
if (joinsRes.success && joinsRes.data) {
|
||||
setFieldJoins(joinsRes.data);
|
||||
}
|
||||
if (flowsRes.success && flowsRes.data) {
|
||||
setDataFlows(flowsRes.data);
|
||||
}
|
||||
if (relationsRes.success && relationsRes.data) {
|
||||
setTableRelations(relationsRes.data);
|
||||
}
|
||||
if (layoutRes) {
|
||||
setLayoutInfo(layoutRes);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("관계 정보 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadRelations();
|
||||
}, [screen?.screenId]);
|
||||
|
||||
if (!screen) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center py-12">
|
||||
<Layers className="h-16 w-16 text-muted-foreground/30 mb-4" />
|
||||
<h3 className="text-lg font-medium text-muted-foreground mb-2">화면을 선택하세요</h3>
|
||||
<p className="text-sm text-muted-foreground/70">
|
||||
왼쪽 트리에서 화면을 선택하면 데이터 관계가 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 컴포넌트에서 사용하는 테이블 분석
|
||||
const getUsedTables = () => {
|
||||
const tables = new Set<string>();
|
||||
if (screen.tableName) {
|
||||
tables.add(screen.tableName);
|
||||
}
|
||||
if (layoutInfo?.components) {
|
||||
layoutInfo.components.forEach((comp: any) => {
|
||||
if (comp.properties?.tableName) {
|
||||
tables.add(comp.properties.tableName);
|
||||
}
|
||||
if (comp.properties?.dataSource?.tableName) {
|
||||
tables.add(comp.properties.dataSource.tableName);
|
||||
}
|
||||
});
|
||||
}
|
||||
return Array.from(tables);
|
||||
};
|
||||
|
||||
const usedTables = getUsedTables();
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-4 overflow-auto h-full">
|
||||
{/* 화면 기본 정보 */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-blue-500/10">
|
||||
<Monitor className="h-6 w-6 text-blue-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-lg truncate">{screen.screenName}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Badge variant="outline">{screen.screenCode}</Badge>
|
||||
<Badge variant="secondary">{screen.screenType}</Badge>
|
||||
</div>
|
||||
{screen.description && (
|
||||
<p className="text-sm text-muted-foreground mt-2 line-clamp-2">
|
||||
{screen.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 연결된 테이블 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<Database className="h-4 w-4 text-green-500" />
|
||||
연결된 테이블
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 pt-0">
|
||||
{usedTables.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{usedTables.map((tableName, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 p-2 rounded-md bg-muted/50"
|
||||
>
|
||||
<Table className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-mono">{tableName}</span>
|
||||
{tableName === screen.tableName && (
|
||||
<Badge variant="default" className="text-xs ml-auto">
|
||||
메인
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">연결된 테이블이 없습니다</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 필드 조인 관계 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4 text-purple-500" />
|
||||
필드 조인 관계
|
||||
{fieldJoins.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-auto">{fieldJoins.length}</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 pt-0">
|
||||
{fieldJoins.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{fieldJoins.map((join) => (
|
||||
<div
|
||||
key={join.id}
|
||||
className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-mono text-xs">{join.sourceTable}</span>
|
||||
<span className="text-muted-foreground">.</span>
|
||||
<span className="font-mono text-xs text-blue-600">{join.sourceColumn}</span>
|
||||
</div>
|
||||
<ArrowRight className="h-3 w-3 text-muted-foreground" />
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-mono text-xs">{join.targetTable}</span>
|
||||
<span className="text-muted-foreground">.</span>
|
||||
<span className="font-mono text-xs text-green-600">{join.targetColumn}</span>
|
||||
</div>
|
||||
<Badge variant="outline" className="ml-auto text-xs">
|
||||
{join.joinType}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">설정된 조인이 없습니다</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 데이터 흐름 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<GitBranch className="h-4 w-4 text-orange-500" />
|
||||
데이터 흐름
|
||||
{dataFlows.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-auto">{dataFlows.length}</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 pt-0">
|
||||
{dataFlows.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{dataFlows.map((flow) => (
|
||||
<div
|
||||
key={flow.id}
|
||||
className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
|
||||
>
|
||||
<Monitor className="h-4 w-4 text-blue-500" />
|
||||
<span className="truncate">{flow.flowName || "이름 없음"}</span>
|
||||
<ArrowRight className="h-3 w-3 text-muted-foreground" />
|
||||
<Monitor className="h-4 w-4 text-green-500" />
|
||||
<span className="text-muted-foreground truncate">
|
||||
화면 #{flow.targetScreenId}
|
||||
</span>
|
||||
<Badge variant="outline" className="ml-auto text-xs">
|
||||
{flow.flowType}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">설정된 데이터 흐름이 없습니다</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 테이블 관계 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<Columns className="h-4 w-4 text-cyan-500" />
|
||||
테이블 관계
|
||||
{tableRelations.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-auto">{tableRelations.length}</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 pt-0">
|
||||
{tableRelations.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{tableRelations.map((relation) => (
|
||||
<div
|
||||
key={relation.id}
|
||||
className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
|
||||
>
|
||||
<Table className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-mono text-xs">{relation.parentTable}</span>
|
||||
<ArrowRight className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="font-mono text-xs">{relation.childTable}</span>
|
||||
<Badge variant="outline" className="ml-auto text-xs">
|
||||
{relation.relationType}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">설정된 테이블 관계가 없습니다</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 빠른 작업 */}
|
||||
<div className="pt-2 border-t">
|
||||
<p className="text-xs text-muted-foreground mb-2">
|
||||
더블클릭하면 화면 디자이너로 이동합니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,464 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { toast } from "sonner";
|
||||
import { Plus, ArrowRight, Trash2, Pencil, GitBranch, RefreshCw } from "lucide-react";
|
||||
import {
|
||||
getDataFlows,
|
||||
createDataFlow,
|
||||
updateDataFlow,
|
||||
deleteDataFlow,
|
||||
DataFlow,
|
||||
} from "@/lib/api/screenGroup";
|
||||
|
||||
interface DataFlowPanelProps {
|
||||
groupId?: number;
|
||||
screenId?: number;
|
||||
screens?: Array<{ screen_id: number; screen_name: string }>;
|
||||
}
|
||||
|
||||
export default function DataFlowPanel({ groupId, screenId, screens = [] }: DataFlowPanelProps) {
|
||||
// 상태 관리
|
||||
const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedFlow, setSelectedFlow] = useState<DataFlow | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
source_screen_id: 0,
|
||||
source_action: "",
|
||||
target_screen_id: 0,
|
||||
target_action: "",
|
||||
data_mapping: "",
|
||||
flow_type: "unidirectional",
|
||||
flow_label: "",
|
||||
condition_expression: "",
|
||||
is_active: "Y",
|
||||
});
|
||||
|
||||
// 데이터 로드
|
||||
const loadDataFlows = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getDataFlows(groupId);
|
||||
if (response.success && response.data) {
|
||||
setDataFlows(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("데이터 흐름 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [groupId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadDataFlows();
|
||||
}, [loadDataFlows]);
|
||||
|
||||
// 모달 열기
|
||||
const openModal = (flow?: DataFlow) => {
|
||||
if (flow) {
|
||||
setSelectedFlow(flow);
|
||||
setFormData({
|
||||
source_screen_id: flow.source_screen_id,
|
||||
source_action: flow.source_action || "",
|
||||
target_screen_id: flow.target_screen_id,
|
||||
target_action: flow.target_action || "",
|
||||
data_mapping: flow.data_mapping ? JSON.stringify(flow.data_mapping, null, 2) : "",
|
||||
flow_type: flow.flow_type,
|
||||
flow_label: flow.flow_label || "",
|
||||
condition_expression: flow.condition_expression || "",
|
||||
is_active: flow.is_active,
|
||||
});
|
||||
} else {
|
||||
setSelectedFlow(null);
|
||||
setFormData({
|
||||
source_screen_id: screenId || 0,
|
||||
source_action: "",
|
||||
target_screen_id: 0,
|
||||
target_action: "",
|
||||
data_mapping: "",
|
||||
flow_type: "unidirectional",
|
||||
flow_label: "",
|
||||
condition_expression: "",
|
||||
is_active: "Y",
|
||||
});
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = async () => {
|
||||
if (!formData.source_screen_id || !formData.target_screen_id) {
|
||||
toast.error("소스 화면과 타겟 화면을 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let dataMappingJson = null;
|
||||
if (formData.data_mapping) {
|
||||
try {
|
||||
dataMappingJson = JSON.parse(formData.data_mapping);
|
||||
} catch {
|
||||
toast.error("데이터 매핑 JSON 형식이 올바르지 않습니다.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const payload = {
|
||||
group_id: groupId,
|
||||
source_screen_id: formData.source_screen_id,
|
||||
source_action: formData.source_action || null,
|
||||
target_screen_id: formData.target_screen_id,
|
||||
target_action: formData.target_action || null,
|
||||
data_mapping: dataMappingJson,
|
||||
flow_type: formData.flow_type,
|
||||
flow_label: formData.flow_label || null,
|
||||
condition_expression: formData.condition_expression || null,
|
||||
is_active: formData.is_active,
|
||||
};
|
||||
|
||||
let response;
|
||||
if (selectedFlow) {
|
||||
response = await updateDataFlow(selectedFlow.id, payload);
|
||||
} else {
|
||||
response = await createDataFlow(payload);
|
||||
}
|
||||
|
||||
if (response.success) {
|
||||
toast.success(selectedFlow ? "데이터 흐름이 수정되었습니다." : "데이터 흐름이 추가되었습니다.");
|
||||
setIsModalOpen(false);
|
||||
loadDataFlows();
|
||||
} else {
|
||||
toast.error(response.message || "저장에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("이 데이터 흐름을 삭제하시겠습니까?")) return;
|
||||
|
||||
try {
|
||||
const response = await deleteDataFlow(id);
|
||||
if (response.success) {
|
||||
toast.success("데이터 흐름이 삭제되었습니다.");
|
||||
loadDataFlows();
|
||||
} else {
|
||||
toast.error(response.message || "삭제에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("삭제 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 액션 옵션
|
||||
const sourceActions = [
|
||||
{ value: "click", label: "클릭" },
|
||||
{ value: "submit", label: "제출" },
|
||||
{ value: "select", label: "선택" },
|
||||
{ value: "change", label: "변경" },
|
||||
{ value: "doubleClick", label: "더블클릭" },
|
||||
];
|
||||
|
||||
const targetActions = [
|
||||
{ value: "open", label: "열기" },
|
||||
{ value: "load", label: "로드" },
|
||||
{ value: "refresh", label: "새로고침" },
|
||||
{ value: "save", label: "저장" },
|
||||
{ value: "filter", label: "필터" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="h-4 w-4 text-primary" />
|
||||
<h3 className="text-sm font-semibold">데이터 흐름</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={loadDataFlows} className="h-8 w-8 p-0">
|
||||
<RefreshCw className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => openModal()} className="h-8 gap-1 text-xs">
|
||||
<Plus className="h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 설명 */}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
화면 간 데이터 전달 흐름을 정의합니다. (예: 목록 화면에서 행 클릭 시 상세 화면 열기)
|
||||
</p>
|
||||
|
||||
{/* 흐름 목록 */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : dataFlows.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-8">
|
||||
<GitBranch className="h-8 w-8 text-muted-foreground/50" />
|
||||
<p className="mt-2 text-xs text-muted-foreground">정의된 데이터 흐름이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{dataFlows.map((flow) => (
|
||||
<div
|
||||
key={flow.id}
|
||||
className="flex items-center justify-between rounded-lg border bg-card p-3 text-xs"
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
{/* 소스 화면 */}
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium truncate max-w-[100px]">
|
||||
{flow.source_screen_name || `화면 ${flow.source_screen_id}`}
|
||||
</span>
|
||||
{flow.source_action && (
|
||||
<span className="text-muted-foreground">{flow.source_action}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 화살표 */}
|
||||
<div className="flex items-center gap-1 text-primary">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
{flow.flow_type === "bidirectional" && (
|
||||
<ArrowRight className="h-4 w-4 rotate-180" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 타겟 화면 */}
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium truncate max-w-[100px]">
|
||||
{flow.target_screen_name || `화면 ${flow.target_screen_id}`}
|
||||
</span>
|
||||
{flow.target_action && (
|
||||
<span className="text-muted-foreground">{flow.target_action}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 라벨 */}
|
||||
{flow.flow_label && (
|
||||
<span className="rounded bg-muted px-2 py-0.5 text-muted-foreground">
|
||||
{flow.flow_label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex items-center gap-1 ml-2">
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openModal(flow)}>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-destructive hover:text-destructive"
|
||||
onClick={() => handleDelete(flow.id)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 추가/수정 모달 */}
|
||||
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{selectedFlow ? "데이터 흐름 수정" : "데이터 흐름 추가"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
화면 간 데이터 전달 흐름을 설정합니다
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 소스 화면 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">소스 화면 *</Label>
|
||||
<Select
|
||||
value={formData.source_screen_id.toString()}
|
||||
onValueChange={(value) => setFormData({ ...formData, source_screen_id: parseInt(value) })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="화면 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{screens.map((screen) => (
|
||||
<SelectItem key={screen.screen_id} value={screen.screen_id.toString()}>
|
||||
{screen.screen_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">소스 액션</Label>
|
||||
<Select
|
||||
value={formData.source_action}
|
||||
onValueChange={(value) => setFormData({ ...formData, source_action: value })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="액션 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceActions.map((action) => (
|
||||
<SelectItem key={action.value} value={action.value}>
|
||||
{action.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 타겟 화면 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">타겟 화면 *</Label>
|
||||
<Select
|
||||
value={formData.target_screen_id.toString()}
|
||||
onValueChange={(value) => setFormData({ ...formData, target_screen_id: parseInt(value) })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="화면 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{screens.map((screen) => (
|
||||
<SelectItem key={screen.screen_id} value={screen.screen_id.toString()}>
|
||||
{screen.screen_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">타겟 액션</Label>
|
||||
<Select
|
||||
value={formData.target_action}
|
||||
onValueChange={(value) => setFormData({ ...formData, target_action: value })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue placeholder="액션 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{targetActions.map((action) => (
|
||||
<SelectItem key={action.value} value={action.value}>
|
||||
{action.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 흐름 설정 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">흐름 타입</Label>
|
||||
<Select
|
||||
value={formData.flow_type}
|
||||
onValueChange={(value) => setFormData({ ...formData, flow_type: value })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="unidirectional">단방향</SelectItem>
|
||||
<SelectItem value="bidirectional">양방향</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">흐름 라벨</Label>
|
||||
<Input
|
||||
value={formData.flow_label}
|
||||
onChange={(e) => setFormData({ ...formData, flow_label: e.target.value })}
|
||||
placeholder="예: 상세 보기"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 데이터 매핑 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">데이터 매핑 (JSON)</Label>
|
||||
<Textarea
|
||||
value={formData.data_mapping}
|
||||
onChange={(e) => setFormData({ ...formData, data_mapping: e.target.value })}
|
||||
placeholder='{"source_field": "target_field"}'
|
||||
className="min-h-[80px] font-mono text-xs sm:text-sm"
|
||||
/>
|
||||
<p className="mt-1 text-[10px] text-muted-foreground">
|
||||
소스 화면의 필드를 타겟 화면의 필드로 매핑합니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 조건식 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">실행 조건 (선택)</Label>
|
||||
<Input
|
||||
value={formData.condition_expression}
|
||||
onChange={(e) => setFormData({ ...formData, condition_expression: e.target.value })}
|
||||
placeholder="예: data.status === 'active'"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{selectedFlow ? "수정" : "추가"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,416 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { toast } from "sonner";
|
||||
import { Plus, Pencil, Trash2, Link2, Database } from "lucide-react";
|
||||
import {
|
||||
getFieldJoins,
|
||||
createFieldJoin,
|
||||
updateFieldJoin,
|
||||
deleteFieldJoin,
|
||||
FieldJoin,
|
||||
} from "@/lib/api/screenGroup";
|
||||
|
||||
interface FieldJoinPanelProps {
|
||||
screenId: number;
|
||||
componentId?: string;
|
||||
layoutId?: number;
|
||||
}
|
||||
|
||||
export default function FieldJoinPanel({ screenId, componentId, layoutId }: FieldJoinPanelProps) {
|
||||
// 상태 관리
|
||||
const [fieldJoins, setFieldJoins] = useState<FieldJoin[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedJoin, setSelectedJoin] = useState<FieldJoin | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
field_name: "",
|
||||
save_table: "",
|
||||
save_column: "",
|
||||
join_table: "",
|
||||
join_column: "",
|
||||
display_column: "",
|
||||
join_type: "LEFT",
|
||||
filter_condition: "",
|
||||
sort_column: "",
|
||||
sort_direction: "ASC",
|
||||
is_active: "Y",
|
||||
});
|
||||
|
||||
// 데이터 로드
|
||||
const loadFieldJoins = useCallback(async () => {
|
||||
if (!screenId) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getFieldJoins(screenId);
|
||||
if (response.success && response.data) {
|
||||
// 현재 컴포넌트에 해당하는 조인만 필터링
|
||||
const filtered = componentId
|
||||
? response.data.filter(join => join.component_id === componentId)
|
||||
: response.data;
|
||||
setFieldJoins(filtered);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("필드 조인 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [screenId, componentId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadFieldJoins();
|
||||
}, [loadFieldJoins]);
|
||||
|
||||
// 모달 열기
|
||||
const openModal = (join?: FieldJoin) => {
|
||||
if (join) {
|
||||
setSelectedJoin(join);
|
||||
setFormData({
|
||||
field_name: join.field_name || "",
|
||||
save_table: join.save_table,
|
||||
save_column: join.save_column,
|
||||
join_table: join.join_table,
|
||||
join_column: join.join_column,
|
||||
display_column: join.display_column,
|
||||
join_type: join.join_type,
|
||||
filter_condition: join.filter_condition || "",
|
||||
sort_column: join.sort_column || "",
|
||||
sort_direction: join.sort_direction || "ASC",
|
||||
is_active: join.is_active,
|
||||
});
|
||||
} else {
|
||||
setSelectedJoin(null);
|
||||
setFormData({
|
||||
field_name: "",
|
||||
save_table: "",
|
||||
save_column: "",
|
||||
join_table: "",
|
||||
join_column: "",
|
||||
display_column: "",
|
||||
join_type: "LEFT",
|
||||
filter_condition: "",
|
||||
sort_column: "",
|
||||
sort_direction: "ASC",
|
||||
is_active: "Y",
|
||||
});
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = async () => {
|
||||
if (!formData.save_table || !formData.save_column || !formData.join_table || !formData.join_column || !formData.display_column) {
|
||||
toast.error("필수 필드를 모두 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
screen_id: screenId,
|
||||
layout_id: layoutId,
|
||||
component_id: componentId,
|
||||
...formData,
|
||||
};
|
||||
|
||||
let response;
|
||||
if (selectedJoin) {
|
||||
response = await updateFieldJoin(selectedJoin.id, payload);
|
||||
} else {
|
||||
response = await createFieldJoin(payload);
|
||||
}
|
||||
|
||||
if (response.success) {
|
||||
toast.success(selectedJoin ? "조인 설정이 수정되었습니다." : "조인 설정이 추가되었습니다.");
|
||||
setIsModalOpen(false);
|
||||
loadFieldJoins();
|
||||
} else {
|
||||
toast.error(response.message || "저장에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("이 조인 설정을 삭제하시겠습니까?")) return;
|
||||
|
||||
try {
|
||||
const response = await deleteFieldJoin(id);
|
||||
if (response.success) {
|
||||
toast.success("조인 설정이 삭제되었습니다.");
|
||||
loadFieldJoins();
|
||||
} else {
|
||||
toast.error(response.message || "삭제에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("삭제 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4 text-primary" />
|
||||
<h3 className="text-sm font-semibold">필드 조인 설정</h3>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => openModal()} className="h-8 gap-1 text-xs">
|
||||
<Plus className="h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 설명 */}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
이 필드가 다른 테이블의 값을 참조하여 표시할 때 조인 설정을 추가하세요.
|
||||
</p>
|
||||
|
||||
{/* 조인 목록 */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : fieldJoins.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-8">
|
||||
<Database className="h-8 w-8 text-muted-foreground/50" />
|
||||
<p className="mt-2 text-xs text-muted-foreground">설정된 조인이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="h-8 text-xs">저장 테이블.컬럼</TableHead>
|
||||
<TableHead className="h-8 text-xs">조인 테이블.컬럼</TableHead>
|
||||
<TableHead className="h-8 text-xs">표시 컬럼</TableHead>
|
||||
<TableHead className="h-8 w-[60px] text-xs">관리</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{fieldJoins.map((join) => (
|
||||
<TableRow key={join.id} className="text-xs">
|
||||
<TableCell className="py-2">
|
||||
<span className="font-mono">{join.save_table}.{join.save_column}</span>
|
||||
</TableCell>
|
||||
<TableCell className="py-2">
|
||||
<span className="font-mono">{join.join_table}.{join.join_column}</span>
|
||||
</TableCell>
|
||||
<TableCell className="py-2">
|
||||
<span className="font-mono">{join.display_column}</span>
|
||||
</TableCell>
|
||||
<TableCell className="py-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openModal(join)}>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-destructive hover:text-destructive"
|
||||
onClick={() => handleDelete(join.id)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 추가/수정 모달 */}
|
||||
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{selectedJoin ? "조인 설정 수정" : "조인 설정 추가"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
필드가 참조할 테이블과 컬럼을 설정합니다
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 필드명 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">필드명</Label>
|
||||
<Input
|
||||
value={formData.field_name}
|
||||
onChange={(e) => setFormData({ ...formData, field_name: e.target.value })}
|
||||
placeholder="화면에 표시될 필드명"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 저장 테이블/컬럼 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">저장 테이블 *</Label>
|
||||
<Input
|
||||
value={formData.save_table}
|
||||
onChange={(e) => setFormData({ ...formData, save_table: e.target.value })}
|
||||
placeholder="예: work_orders"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">저장 컬럼 *</Label>
|
||||
<Input
|
||||
value={formData.save_column}
|
||||
onChange={(e) => setFormData({ ...formData, save_column: e.target.value })}
|
||||
placeholder="예: item_code"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 조인 테이블/컬럼 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">조인 테이블 *</Label>
|
||||
<Input
|
||||
value={formData.join_table}
|
||||
onChange={(e) => setFormData({ ...formData, join_table: e.target.value })}
|
||||
placeholder="예: item_mng"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">조인 컬럼 *</Label>
|
||||
<Input
|
||||
value={formData.join_column}
|
||||
onChange={(e) => setFormData({ ...formData, join_column: e.target.value })}
|
||||
placeholder="예: id"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 표시 컬럼 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">표시 컬럼 *</Label>
|
||||
<Input
|
||||
value={formData.display_column}
|
||||
onChange={(e) => setFormData({ ...formData, display_column: e.target.value })}
|
||||
placeholder="예: item_name (화면에 표시될 컬럼)"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 조인 타입/정렬 */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">조인 타입</Label>
|
||||
<Select
|
||||
value={formData.join_type}
|
||||
onValueChange={(value) => setFormData({ ...formData, join_type: value })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="LEFT">LEFT JOIN</SelectItem>
|
||||
<SelectItem value="INNER">INNER JOIN</SelectItem>
|
||||
<SelectItem value="RIGHT">RIGHT JOIN</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">정렬 컬럼</Label>
|
||||
<Input
|
||||
value={formData.sort_column}
|
||||
onChange={(e) => setFormData({ ...formData, sort_column: e.target.value })}
|
||||
placeholder="예: name"
|
||||
className="h-8 font-mono text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">정렬 방향</Label>
|
||||
<Select
|
||||
value={formData.sort_direction}
|
||||
onValueChange={(value) => setFormData({ ...formData, sort_direction: value })}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ASC">오름차순</SelectItem>
|
||||
<SelectItem value="DESC">내림차순</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 필터 조건 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">필터 조건 (선택)</Label>
|
||||
<Textarea
|
||||
value={formData.filter_condition}
|
||||
onChange={(e) => setFormData({ ...formData, filter_condition: e.target.value })}
|
||||
placeholder="예: is_active = 'Y'"
|
||||
className="min-h-[60px] font-mono text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{selectedJoin ? "수정" : "추가"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Database, ArrowLeft, Save, Monitor, Smartphone } from "lucide-react";
|
||||
import { Database, ArrowLeft, Save, Monitor, Smartphone, Languages, Settings2 } from "lucide-react";
|
||||
import { ScreenResolution } from "@/types/screen";
|
||||
|
||||
interface SlimToolbarProps {
|
||||
|
|
@ -13,6 +13,9 @@ interface SlimToolbarProps {
|
|||
onSave: () => void;
|
||||
isSaving?: boolean;
|
||||
onPreview?: () => void;
|
||||
onGenerateMultilang?: () => void;
|
||||
isGeneratingMultilang?: boolean;
|
||||
onOpenMultilangSettings?: () => void;
|
||||
}
|
||||
|
||||
export const SlimToolbar: React.FC<SlimToolbarProps> = ({
|
||||
|
|
@ -23,6 +26,9 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
|
|||
onSave,
|
||||
isSaving = false,
|
||||
onPreview,
|
||||
onGenerateMultilang,
|
||||
isGeneratingMultilang = false,
|
||||
onOpenMultilangSettings,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
|
||||
|
|
@ -70,6 +76,29 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
|
|||
<span>반응형 미리보기</span>
|
||||
</Button>
|
||||
)}
|
||||
{onGenerateMultilang && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onGenerateMultilang}
|
||||
disabled={isGeneratingMultilang}
|
||||
className="flex items-center space-x-2"
|
||||
title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
|
||||
>
|
||||
<Languages className="h-4 w-4" />
|
||||
<span>{isGeneratingMultilang ? "생성 중..." : "다국어 생성"}</span>
|
||||
</Button>
|
||||
)}
|
||||
{onOpenMultilangSettings && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onOpenMultilangSettings}
|
||||
className="flex items-center space-x-2"
|
||||
title="다국어 키 연결 및 설정을 관리합니다"
|
||||
>
|
||||
<Settings2 className="h-4 w-4" />
|
||||
<span>다국어 설정</span>
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
|
||||
<Save className="h-4 w-4" />
|
||||
<span>{isSaving ? "저장 중..." : "저장"}</span>
|
||||
|
|
|
|||
|
|
@ -32,14 +32,27 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
// 커스텀 색상 확인 (config 또는 style에서)
|
||||
const hasCustomBg = config?.backgroundColor || style?.backgroundColor;
|
||||
const hasCustomColor = config?.textColor || style?.color;
|
||||
const hasCustomColors = hasCustomBg || hasCustomColor;
|
||||
|
||||
// 실제 적용할 배경색과 글자색
|
||||
const bgColor = config?.backgroundColor || style?.backgroundColor;
|
||||
const textColor = config?.textColor || style?.color;
|
||||
|
||||
// 디자인 모드에서는 div로 렌더링하여 버튼 동작 완전 차단
|
||||
if (isDesignMode) {
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
|
||||
className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white ${className || ""} `}
|
||||
className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
|
||||
hasCustomColors ? '' : 'bg-blue-600 text-white'
|
||||
} ${className || ""}`}
|
||||
style={{
|
||||
...style,
|
||||
backgroundColor: bgColor,
|
||||
color: textColor,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
cursor: "pointer", // 선택 가능하도록 포인터 표시
|
||||
|
|
@ -56,9 +69,13 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
|
|||
type="button"
|
||||
onClick={handleClick}
|
||||
disabled={disabled || readonly}
|
||||
className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${className || ""} `}
|
||||
className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${
|
||||
hasCustomColors ? '' : 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
} ${className || ""}`}
|
||||
style={{
|
||||
...style,
|
||||
backgroundColor: bgColor,
|
||||
color: textColor,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -141,3 +141,4 @@ export const useActiveTabOptional = () => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, useMemo, ReactNode } from "react";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { useMultiLang } from "@/hooks/useMultiLang";
|
||||
import { ComponentData } from "@/types/screen";
|
||||
|
||||
interface ScreenMultiLangContextValue {
|
||||
translations: Record<string, string>;
|
||||
loading: boolean;
|
||||
getTranslatedText: (langKey: string | undefined, fallback: string) => string;
|
||||
}
|
||||
|
||||
const ScreenMultiLangContext = createContext<ScreenMultiLangContextValue | null>(null);
|
||||
|
||||
interface ScreenMultiLangProviderProps {
|
||||
children: ReactNode;
|
||||
components: ComponentData[];
|
||||
companyCode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 컴포넌트들의 다국어 번역을 제공하는 Provider
|
||||
* 모든 langKey를 수집하여 한 번에 배치 조회하고, 하위 컴포넌트에서 번역 텍스트를 사용할 수 있게 함
|
||||
*/
|
||||
export const ScreenMultiLangProvider: React.FC<ScreenMultiLangProviderProps> = ({
|
||||
children,
|
||||
components,
|
||||
companyCode = "*",
|
||||
}) => {
|
||||
const { userLang } = useMultiLang();
|
||||
const [translations, setTranslations] = useState<Record<string, string>>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 모든 컴포넌트에서 langKey 수집
|
||||
const langKeys = useMemo(() => {
|
||||
const keys: string[] = [];
|
||||
|
||||
const collectLangKeys = (comps: ComponentData[]) => {
|
||||
comps.forEach((comp) => {
|
||||
// 컴포넌트 라벨의 langKey
|
||||
if ((comp as any).langKey) {
|
||||
keys.push((comp as any).langKey);
|
||||
}
|
||||
// componentConfig 내의 langKey (버튼 텍스트 등)
|
||||
if ((comp as any).componentConfig?.langKey) {
|
||||
keys.push((comp as any).componentConfig.langKey);
|
||||
}
|
||||
// properties 내의 langKey (레거시)
|
||||
if ((comp as any).properties?.langKey) {
|
||||
keys.push((comp as any).properties.langKey);
|
||||
}
|
||||
// 테이블 리스트 컬럼의 langKey 수집
|
||||
if ((comp as any).componentConfig?.columns) {
|
||||
(comp as any).componentConfig.columns.forEach((col: any) => {
|
||||
if (col.langKey) {
|
||||
keys.push(col.langKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 분할패널 좌측/우측 제목 langKey 수집
|
||||
const config = (comp as any).componentConfig;
|
||||
if (config?.leftPanel?.langKey) {
|
||||
keys.push(config.leftPanel.langKey);
|
||||
}
|
||||
if (config?.rightPanel?.langKey) {
|
||||
keys.push(config.rightPanel.langKey);
|
||||
}
|
||||
// 분할패널 좌측/우측 컬럼 langKey 수집
|
||||
if (config?.leftPanel?.columns) {
|
||||
config.leftPanel.columns.forEach((col: any) => {
|
||||
if (col.langKey) {
|
||||
keys.push(col.langKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (config?.rightPanel?.columns) {
|
||||
config.rightPanel.columns.forEach((col: any) => {
|
||||
if (col.langKey) {
|
||||
keys.push(col.langKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 추가 탭 langKey 수집
|
||||
if (config?.additionalTabs) {
|
||||
config.additionalTabs.forEach((tab: any) => {
|
||||
if (tab.langKey) {
|
||||
keys.push(tab.langKey);
|
||||
}
|
||||
if (tab.titleLangKey) {
|
||||
keys.push(tab.titleLangKey);
|
||||
}
|
||||
if (tab.columns) {
|
||||
tab.columns.forEach((col: any) => {
|
||||
if (col.langKey) {
|
||||
keys.push(col.langKey);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 자식 컴포넌트 재귀 처리
|
||||
if ((comp as any).children) {
|
||||
collectLangKeys((comp as any).children);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
collectLangKeys(components);
|
||||
return [...new Set(keys)]; // 중복 제거
|
||||
}, [components]);
|
||||
|
||||
// langKey가 있으면 배치 조회
|
||||
useEffect(() => {
|
||||
const loadTranslations = async () => {
|
||||
if (langKeys.length === 0 || !userLang) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log("🌐 [ScreenMultiLang] 다국어 배치 로드:", { langKeys: langKeys.length, userLang, companyCode });
|
||||
|
||||
const response = await apiClient.post(
|
||||
"/multilang/batch",
|
||||
{ langKeys },
|
||||
{
|
||||
params: {
|
||||
userLang,
|
||||
companyCode,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data?.success && response.data?.data) {
|
||||
console.log("✅ [ScreenMultiLang] 다국어 로드 완료:", Object.keys(response.data.data).length, "개");
|
||||
setTranslations(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ [ScreenMultiLang] 다국어 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadTranslations();
|
||||
}, [langKeys, userLang, companyCode]);
|
||||
|
||||
// 번역 텍스트 가져오기 헬퍼
|
||||
const getTranslatedText = (langKey: string | undefined, fallback: string): string => {
|
||||
if (!langKey) return fallback;
|
||||
return translations[langKey] || fallback;
|
||||
};
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
translations,
|
||||
loading,
|
||||
getTranslatedText,
|
||||
}),
|
||||
[translations, loading]
|
||||
);
|
||||
|
||||
return <ScreenMultiLangContext.Provider value={value}>{children}</ScreenMultiLangContext.Provider>;
|
||||
};
|
||||
|
||||
/**
|
||||
* 화면 다국어 컨텍스트 사용 훅
|
||||
*/
|
||||
export const useScreenMultiLang = (): ScreenMultiLangContextValue => {
|
||||
const context = useContext(ScreenMultiLangContext);
|
||||
if (!context) {
|
||||
// 컨텍스트가 없으면 기본값 반환 (fallback)
|
||||
return {
|
||||
translations: {},
|
||||
loading: false,
|
||||
getTranslatedText: (_, fallback) => fallback,
|
||||
};
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
|
|
@ -198,3 +198,4 @@ export function applyAutoFillToFormData(
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -83,15 +83,26 @@ export const entityJoinApi = {
|
|||
keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
|
||||
sortColumn?: string;
|
||||
}; // 🆕 중복 제거 설정
|
||||
companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
|
||||
} = {},
|
||||
): Promise<EntityJoinResponse> => {
|
||||
// 🔒 멀티테넌시: company_code 자동 필터링 활성화
|
||||
const autoFilter = {
|
||||
const autoFilter: {
|
||||
enabled: boolean;
|
||||
filterColumn: string;
|
||||
userField: string;
|
||||
companyCodeOverride?: string;
|
||||
} = {
|
||||
enabled: true,
|
||||
filterColumn: "company_code",
|
||||
userField: "companyCode",
|
||||
};
|
||||
|
||||
// 🆕 프리뷰 모드에서 회사 코드 오버라이드 (최고 관리자만 백엔드에서 허용)
|
||||
if (params.companyCodeOverride) {
|
||||
autoFilter.companyCodeOverride = params.companyCodeOverride;
|
||||
}
|
||||
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/data-with-joins`, {
|
||||
params: {
|
||||
page: params.page,
|
||||
|
|
@ -102,7 +113,7 @@ export const entityJoinApi = {
|
|||
search: params.search ? JSON.stringify(params.search) : undefined,
|
||||
additionalJoinColumns: params.additionalJoinColumns ? JSON.stringify(params.additionalJoinColumns) : undefined,
|
||||
screenEntityConfigs: params.screenEntityConfigs ? JSON.stringify(params.screenEntityConfigs) : undefined, // 🎯 화면별 엔티티 설정
|
||||
autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링
|
||||
autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함)
|
||||
dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터
|
||||
excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터
|
||||
deduplication: params.deduplication ? JSON.stringify(params.deduplication) : undefined, // 🆕 중복 제거 설정
|
||||
|
|
|
|||
|
|
@ -0,0 +1,402 @@
|
|||
/**
|
||||
* 다국어 관리 API 클라이언트
|
||||
* 카테고리, 키 자동 생성, 오버라이드 등 확장 기능 포함
|
||||
*/
|
||||
|
||||
import { apiClient } from "./client";
|
||||
|
||||
// =====================================================
|
||||
// 타입 정의
|
||||
// =====================================================
|
||||
|
||||
export interface Language {
|
||||
langCode: string;
|
||||
langName: string;
|
||||
langNative: string;
|
||||
isActive: string;
|
||||
sortOrder?: number;
|
||||
}
|
||||
|
||||
export interface LangCategory {
|
||||
categoryId: number;
|
||||
categoryCode: string;
|
||||
categoryName: string;
|
||||
parentId?: number | null;
|
||||
level: number;
|
||||
keyPrefix: string;
|
||||
description?: string;
|
||||
sortOrder: number;
|
||||
isActive: string;
|
||||
children?: LangCategory[];
|
||||
}
|
||||
|
||||
export interface LangKey {
|
||||
keyId?: number;
|
||||
companyCode: string;
|
||||
menuName?: string;
|
||||
langKey: string;
|
||||
description?: string;
|
||||
isActive: string;
|
||||
categoryId?: number;
|
||||
keyMeaning?: string;
|
||||
usageNote?: string;
|
||||
baseKeyId?: number;
|
||||
createdDate?: Date;
|
||||
}
|
||||
|
||||
export interface LangText {
|
||||
textId?: number;
|
||||
keyId: number;
|
||||
langCode: string;
|
||||
langText: string;
|
||||
isActive: string;
|
||||
}
|
||||
|
||||
export interface GenerateKeyRequest {
|
||||
companyCode: string;
|
||||
categoryId: number;
|
||||
keyMeaning: string;
|
||||
usageNote?: string;
|
||||
texts: Array<{
|
||||
langCode: string;
|
||||
langText: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface CreateOverrideKeyRequest {
|
||||
companyCode: string;
|
||||
baseKeyId: number;
|
||||
texts: Array<{
|
||||
langCode: string;
|
||||
langText: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface KeyPreview {
|
||||
langKey: string;
|
||||
exists: boolean;
|
||||
isOverride: boolean;
|
||||
baseKeyId?: number;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
message?: string;
|
||||
data?: T;
|
||||
error?: {
|
||||
code: string;
|
||||
details?: any;
|
||||
};
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 카테고리 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* 카테고리 트리 조회
|
||||
*/
|
||||
export async function getCategories(): Promise<ApiResponse<LangCategory[]>> {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/categories");
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "CATEGORY_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 카테고리 상세 조회
|
||||
*/
|
||||
export async function getCategoryById(categoryId: number): Promise<ApiResponse<LangCategory>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/categories/${categoryId}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "CATEGORY_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 카테고리 경로 조회 (부모 포함)
|
||||
*/
|
||||
export async function getCategoryPath(categoryId: number): Promise<ApiResponse<LangCategory[]>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/categories/${categoryId}/path`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "CATEGORY_PATH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 언어 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* 언어 목록 조회
|
||||
*/
|
||||
export async function getLanguages(): Promise<ApiResponse<Language[]>> {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/languages");
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "LANGUAGE_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 키 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* 다국어 키 목록 조회
|
||||
*/
|
||||
export async function getLangKeys(params?: {
|
||||
companyCode?: string;
|
||||
menuCode?: string;
|
||||
categoryId?: number;
|
||||
searchText?: string;
|
||||
}): Promise<ApiResponse<LangKey[]>> {
|
||||
try {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params?.companyCode) queryParams.append("companyCode", params.companyCode);
|
||||
if (params?.menuCode) queryParams.append("menuCode", params.menuCode);
|
||||
if (params?.categoryId) queryParams.append("categoryId", params.categoryId.toString());
|
||||
if (params?.searchText) queryParams.append("searchText", params.searchText);
|
||||
|
||||
const url = `/multilang/keys${queryParams.toString() ? `?${queryParams.toString()}` : ""}`;
|
||||
const response = await apiClient.get(url);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEYS_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키의 텍스트 조회
|
||||
*/
|
||||
export async function getLangTexts(keyId: number): Promise<ApiResponse<LangText[]>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/keys/${keyId}/texts`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "TEXTS_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 자동 생성
|
||||
*/
|
||||
export async function generateKey(data: GenerateKeyRequest): Promise<ApiResponse<number>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/keys/generate", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_GENERATE_ERROR",
|
||||
details: error.response?.data?.error?.details || error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 미리보기
|
||||
*/
|
||||
export async function previewKey(
|
||||
categoryId: number,
|
||||
keyMeaning: string,
|
||||
companyCode: string
|
||||
): Promise<ApiResponse<KeyPreview>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/keys/preview", {
|
||||
categoryId,
|
||||
keyMeaning,
|
||||
companyCode,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_PREVIEW_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 오버라이드 키 생성
|
||||
*/
|
||||
export async function createOverrideKey(
|
||||
data: CreateOverrideKeyRequest
|
||||
): Promise<ApiResponse<number>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/keys/override", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "OVERRIDE_CREATE_ERROR",
|
||||
details: error.response?.data?.error?.details || error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 회사별 오버라이드 키 목록 조회
|
||||
*/
|
||||
export async function getOverrideKeys(companyCode: string): Promise<ApiResponse<LangKey[]>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/keys/overrides/${companyCode}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "OVERRIDE_KEYS_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 텍스트 저장
|
||||
*/
|
||||
export async function saveLangTexts(
|
||||
keyId: number,
|
||||
texts: Array<{ langCode: string; langText: string }>
|
||||
): Promise<ApiResponse<string>> {
|
||||
try {
|
||||
const response = await apiClient.post(`/multilang/keys/${keyId}/texts`, { texts });
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "TEXTS_SAVE_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 삭제
|
||||
*/
|
||||
export async function deleteLangKey(keyId: number): Promise<ApiResponse<string>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/multilang/keys/${keyId}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_DELETE_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 상태 토글
|
||||
*/
|
||||
export async function toggleLangKey(keyId: number): Promise<ApiResponse<string>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/multilang/keys/${keyId}/toggle`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_TOGGLE_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 화면 라벨 다국어 자동 생성 API
|
||||
// =====================================================
|
||||
|
||||
export interface ScreenLabelKeyResult {
|
||||
componentId: string;
|
||||
keyId: number;
|
||||
langKey: string;
|
||||
}
|
||||
|
||||
export interface GenerateScreenLabelKeysRequest {
|
||||
screenId: number;
|
||||
menuObjId?: string;
|
||||
labels: Array<{
|
||||
componentId: string;
|
||||
label: string;
|
||||
type?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 라벨 다국어 키 자동 생성
|
||||
*/
|
||||
export async function generateScreenLabelKeys(
|
||||
params: GenerateScreenLabelKeysRequest
|
||||
): Promise<ApiResponse<ScreenLabelKeyResult[]>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/screen-labels", params);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "SCREEN_LABEL_KEY_GENERATION_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
/**
|
||||
* 화면 그룹 관리 API 클라이언트
|
||||
* - 화면 그룹 (screen_groups)
|
||||
* - 화면-그룹 연결 (screen_group_screens)
|
||||
* - 필드 조인 (screen_field_joins)
|
||||
* - 데이터 흐름 (screen_data_flows)
|
||||
* - 화면-테이블 관계 (screen_table_relations)
|
||||
*/
|
||||
|
||||
import { apiClient } from "./client";
|
||||
|
||||
// ============================================================
|
||||
// 타입 정의
|
||||
// ============================================================
|
||||
|
||||
export interface ScreenGroup {
|
||||
id: number;
|
||||
group_name: string;
|
||||
group_code: string;
|
||||
main_table_name?: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
display_order: number;
|
||||
is_active: string;
|
||||
company_code: string;
|
||||
created_date?: string;
|
||||
updated_date?: string;
|
||||
writer?: string;
|
||||
screen_count?: number;
|
||||
screens?: ScreenGroupScreen[];
|
||||
parent_group_id?: number | null; // 상위 그룹 ID
|
||||
group_level?: number; // 그룹 레벨 (0: 대분류, 1: 중분류, 2: 소분류 ...)
|
||||
hierarchy_path?: string; // 계층 경로
|
||||
}
|
||||
|
||||
export interface ScreenGroupScreen {
|
||||
id: number;
|
||||
group_id: number;
|
||||
screen_id: number;
|
||||
screen_name?: string;
|
||||
screen_role: string;
|
||||
display_order: number;
|
||||
is_default: string;
|
||||
company_code: string;
|
||||
}
|
||||
|
||||
export interface FieldJoin {
|
||||
id: number;
|
||||
screen_id: number;
|
||||
layout_id?: number;
|
||||
component_id?: string;
|
||||
field_name?: string;
|
||||
save_table: string;
|
||||
save_column: string;
|
||||
join_table: string;
|
||||
join_column: string;
|
||||
display_column: string;
|
||||
join_type: string;
|
||||
filter_condition?: string;
|
||||
sort_column?: string;
|
||||
sort_direction?: string;
|
||||
is_active: string;
|
||||
save_table_label?: string;
|
||||
join_table_label?: string;
|
||||
}
|
||||
|
||||
export interface DataFlow {
|
||||
id: number;
|
||||
group_id?: number;
|
||||
source_screen_id: number;
|
||||
source_action?: string;
|
||||
target_screen_id: number;
|
||||
target_action?: string;
|
||||
data_mapping?: Record<string, any>;
|
||||
flow_type: string;
|
||||
flow_label?: string;
|
||||
condition_expression?: string;
|
||||
is_active: string;
|
||||
source_screen_name?: string;
|
||||
target_screen_name?: string;
|
||||
group_name?: string;
|
||||
}
|
||||
|
||||
export interface TableRelation {
|
||||
id: number;
|
||||
group_id?: number;
|
||||
screen_id: number;
|
||||
table_name: string;
|
||||
relation_type: string;
|
||||
crud_operations: string;
|
||||
description?: string;
|
||||
is_active: string;
|
||||
screen_name?: string;
|
||||
group_name?: string;
|
||||
table_label?: string;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
data?: T;
|
||||
message?: string;
|
||||
error?: string;
|
||||
total?: number;
|
||||
page?: number;
|
||||
size?: number;
|
||||
totalPages?: number;
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 화면 그룹 (screen_groups) API
|
||||
// ============================================================
|
||||
|
||||
export async function getScreenGroups(params?: {
|
||||
page?: number;
|
||||
size?: number;
|
||||
searchTerm?: string;
|
||||
}): Promise<ApiResponse<ScreenGroup[]>> {
|
||||
try {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params?.page) queryParams.append("page", params.page.toString());
|
||||
if (params?.size) queryParams.append("size", params.size.toString());
|
||||
if (params?.searchTerm) queryParams.append("searchTerm", params.searchTerm);
|
||||
|
||||
const response = await apiClient.get(`/screen-groups/groups?${queryParams.toString()}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getScreenGroup(id: number): Promise<ApiResponse<ScreenGroup>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/screen-groups/groups/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createScreenGroup(data: Partial<ScreenGroup>): Promise<ApiResponse<ScreenGroup>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/groups", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateScreenGroup(id: number, data: Partial<ScreenGroup>): Promise<ApiResponse<ScreenGroup>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/screen-groups/groups/${id}`, data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteScreenGroup(id: number): Promise<ApiResponse<void>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/screen-groups/groups/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 화면-그룹 연결 (screen_group_screens) API
|
||||
// ============================================================
|
||||
|
||||
export async function addScreenToGroup(data: {
|
||||
group_id: number;
|
||||
screen_id: number;
|
||||
screen_role?: string;
|
||||
display_order?: number;
|
||||
is_default?: string;
|
||||
}): Promise<ApiResponse<ScreenGroupScreen>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/group-screens", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateScreenInGroup(id: number, data: {
|
||||
screen_role?: string;
|
||||
display_order?: number;
|
||||
is_default?: string;
|
||||
}): Promise<ApiResponse<ScreenGroupScreen>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/screen-groups/group-screens/${id}`, data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function removeScreenFromGroup(id: number): Promise<ApiResponse<void>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/screen-groups/group-screens/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 필드 조인 (screen_field_joins) API
|
||||
// ============================================================
|
||||
|
||||
export async function getFieldJoins(screenId?: number): Promise<ApiResponse<FieldJoin[]>> {
|
||||
try {
|
||||
const queryParams = screenId ? `?screen_id=${screenId}` : "";
|
||||
const response = await apiClient.get(`/screen-groups/field-joins${queryParams}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createFieldJoin(data: Partial<FieldJoin>): Promise<ApiResponse<FieldJoin>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/field-joins", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateFieldJoin(id: number, data: Partial<FieldJoin>): Promise<ApiResponse<FieldJoin>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/screen-groups/field-joins/${id}`, data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteFieldJoin(id: number): Promise<ApiResponse<void>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/screen-groups/field-joins/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 데이터 흐름 (screen_data_flows) API
|
||||
// ============================================================
|
||||
|
||||
export async function getDataFlows(params?: { groupId?: number; sourceScreenId?: number }): Promise<ApiResponse<DataFlow[]>> {
|
||||
try {
|
||||
const queryParts: string[] = [];
|
||||
if (params?.groupId) {
|
||||
queryParts.push(`group_id=${params.groupId}`);
|
||||
}
|
||||
if (params?.sourceScreenId) {
|
||||
queryParts.push(`source_screen_id=${params.sourceScreenId}`);
|
||||
}
|
||||
const queryString = queryParts.length > 0 ? `?${queryParts.join("&")}` : "";
|
||||
const response = await apiClient.get(`/screen-groups/data-flows${queryString}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createDataFlow(data: Partial<DataFlow>): Promise<ApiResponse<DataFlow>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/data-flows", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateDataFlow(id: number, data: Partial<DataFlow>): Promise<ApiResponse<DataFlow>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/screen-groups/data-flows/${id}`, data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteDataFlow(id: number): Promise<ApiResponse<void>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/screen-groups/data-flows/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 화면-테이블 관계 (screen_table_relations) API
|
||||
// ============================================================
|
||||
|
||||
export async function getTableRelations(params?: {
|
||||
screen_id?: number;
|
||||
group_id?: number;
|
||||
}): Promise<ApiResponse<TableRelation[]>> {
|
||||
try {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params?.screen_id) queryParams.append("screen_id", params.screen_id.toString());
|
||||
if (params?.group_id) queryParams.append("group_id", params.group_id.toString());
|
||||
|
||||
const response = await apiClient.get(`/screen-groups/table-relations?${queryParams.toString()}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function createTableRelation(data: Partial<TableRelation>): Promise<ApiResponse<TableRelation>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/table-relations", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateTableRelation(id: number, data: Partial<TableRelation>): Promise<ApiResponse<TableRelation>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/screen-groups/table-relations/${id}`, data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteTableRelation(id: number): Promise<ApiResponse<void>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/screen-groups/table-relations/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 화면 레이아웃 요약 (미리보기용) API
|
||||
// ============================================================
|
||||
|
||||
// 레이아웃 아이템 (미니어처 렌더링용)
|
||||
export interface LayoutItem {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
componentKind: string; // 정확한 컴포넌트 종류 (table-list, button-primary 등)
|
||||
widgetType: string; // 일반적인 위젯 타입 (button, text 등)
|
||||
label?: string;
|
||||
bindField?: string; // 바인딩된 필드명 (컬럼명)
|
||||
usedColumns?: string[]; // 이 컴포넌트에서 사용하는 컬럼 목록
|
||||
joinColumns?: string[]; // 이 컴포넌트에서 조인 컬럼 목록 (isEntityJoin=true)
|
||||
}
|
||||
|
||||
export interface ScreenLayoutSummary {
|
||||
screenId: number;
|
||||
screenType: 'form' | 'grid' | 'dashboard' | 'action';
|
||||
widgetCounts: Record<string, number>;
|
||||
totalComponents: number;
|
||||
// 미니어처 렌더링용 레이아웃 데이터
|
||||
layoutItems: LayoutItem[];
|
||||
canvasWidth: number;
|
||||
canvasHeight: number;
|
||||
}
|
||||
|
||||
// 단일 화면 레이아웃 요약 조회
|
||||
export async function getScreenLayoutSummary(screenId: number): Promise<ApiResponse<ScreenLayoutSummary>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/screen-groups/layout-summary/${screenId}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
// 여러 화면 레이아웃 요약 일괄 조회
|
||||
export async function getMultipleScreenLayoutSummary(
|
||||
screenIds: number[]
|
||||
): Promise<ApiResponse<Record<number, ScreenLayoutSummary>>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/layout-summary/batch", { screenIds });
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
// 필드 매핑 정보 타입
|
||||
export interface FieldMappingInfo {
|
||||
sourceTable?: string; // 연관 테이블명 (parentDataMapping에서 사용)
|
||||
sourceField: string;
|
||||
targetField: string;
|
||||
sourceDisplayName?: string; // 메인 테이블 한글 컬럼명
|
||||
targetDisplayName?: string; // 서브 테이블 한글 컬럼명
|
||||
}
|
||||
|
||||
// 서브 테이블 정보 타입
|
||||
export interface SubTableInfo {
|
||||
tableName: string;
|
||||
tableLabel?: string; // 테이블 한글명
|
||||
componentType: string;
|
||||
relationType: 'lookup' | 'source' | 'join' | 'reference' | 'parentMapping' | 'rightPanelRelation';
|
||||
fieldMappings?: FieldMappingInfo[];
|
||||
filterColumns?: string[]; // 필터링에 사용되는 컬럼 목록
|
||||
// rightPanelRelation에서 추가 정보 (관계 유형 추론용)
|
||||
originalRelationType?: 'join' | 'detail'; // 원본 relation.type
|
||||
foreignKey?: string; // 디테일 테이블의 FK 컬럼
|
||||
leftColumn?: string; // 마스터 테이블의 선택 기준 컬럼
|
||||
// rightPanel.columns에서 외부 테이블 참조 정보
|
||||
joinedTables?: string[]; // 참조하는 외부 테이블들 (예: ['customer_mng'])
|
||||
joinColumns?: string[]; // 외부 테이블과 조인하는 FK 컬럼들 (예: ['customer_id'])
|
||||
joinColumnRefs?: Array<{ // FK 컬럼 참조 정보 (어떤 테이블.컬럼에서 오는지)
|
||||
column: string; // FK 컬럼명 (예: 'customer_id')
|
||||
columnLabel: string; // FK 컬럼 한글명 (예: '거래처 ID')
|
||||
refTable: string; // 참조 테이블 (예: 'customer_mng')
|
||||
refTableLabel: string; // 참조 테이블 한글명 (예: '거래처 관리')
|
||||
refColumn: string; // 참조 컬럼 (예: 'customer_code')
|
||||
}>;
|
||||
}
|
||||
|
||||
// 시각적 관계 유형 (시각화에서 사용)
|
||||
export type VisualRelationType = 'filter' | 'hierarchy' | 'lookup' | 'mapping' | 'join';
|
||||
|
||||
// 관계 유형 추론 함수
|
||||
export function inferVisualRelationType(subTable: SubTableInfo): VisualRelationType {
|
||||
// 1. split-panel-layout의 rightPanel.relation
|
||||
if (subTable.relationType === 'rightPanelRelation') {
|
||||
// 원본 relation.type 기반 구분
|
||||
if (subTable.originalRelationType === 'detail') {
|
||||
return 'hierarchy'; // 부모-자식 계층 구조 (같은 테이블 자기 참조)
|
||||
}
|
||||
return 'filter'; // 마스터-디테일 필터링
|
||||
}
|
||||
|
||||
// 2. selected-items-detail-input의 parentDataMapping
|
||||
// parentDataMapping은 FK 관계를 정의하므로 조인으로 분류
|
||||
if (subTable.relationType === 'parentMapping') {
|
||||
return 'join'; // FK 조인 (sourceTable.sourceField → targetTable.targetField)
|
||||
}
|
||||
|
||||
// 3. column_labels.reference_table
|
||||
if (subTable.relationType === 'reference') {
|
||||
return 'join'; // 실제 엔티티 조인 (LEFT JOIN 등)
|
||||
}
|
||||
|
||||
// 4. autocomplete, entity-search
|
||||
if (subTable.relationType === 'lookup') {
|
||||
return 'lookup'; // 코드→명칭 변환
|
||||
}
|
||||
|
||||
// 5. 기타 (source, join 등)
|
||||
return 'join';
|
||||
}
|
||||
|
||||
// 저장 테이블 정보 타입
|
||||
export interface SaveTableInfo {
|
||||
tableName: string;
|
||||
saveType: 'save' | 'edit' | 'delete' | 'transferData';
|
||||
componentType: string;
|
||||
isMainTable: boolean;
|
||||
mappingRules?: Array<{
|
||||
sourceField: string;
|
||||
targetField: string;
|
||||
transform?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface ScreenSubTablesData {
|
||||
screenId: number;
|
||||
screenName: string;
|
||||
mainTable: string;
|
||||
subTables: SubTableInfo[];
|
||||
saveTables?: SaveTableInfo[]; // 저장 대상 테이블 목록
|
||||
}
|
||||
|
||||
// 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계)
|
||||
export async function getScreenSubTables(
|
||||
screenIds: number[]
|
||||
): Promise<ApiResponse<Record<number, ScreenSubTablesData>>> {
|
||||
try {
|
||||
const response = await apiClient.post("/screen-groups/sub-tables/batch", { screenIds });
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +27,7 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
|||
import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
|
||||
import { applyMappingRules } from "@/lib/utils/dataMapping";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
|
||||
config?: ButtonPrimaryConfig;
|
||||
|
|
@ -107,6 +108,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
|
||||
const screenContext = useScreenContextOptional(); // 화면 컨텍스트
|
||||
const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
|
||||
const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
|
||||
// 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
|
||||
const splitPanelPosition = screenContext?.splitPanelPosition;
|
||||
|
||||
|
|
@ -509,15 +511,50 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
...component.componentConfig, // 🔥 화면 디자이너에서 저장된 action 등 포함
|
||||
} as ButtonPrimaryConfig;
|
||||
|
||||
// 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
|
||||
const getLabelColor = () => {
|
||||
if (isDeleteAction()) {
|
||||
return component.style?.labelColor || "#ef4444"; // 빨간색 기본값 (Tailwind red-500)
|
||||
// 🎨 동적 색상 설정 (webTypeConfig 우선, 레거시 style.labelColor 지원)
|
||||
const getButtonBackgroundColor = () => {
|
||||
// 1순위: webTypeConfig.backgroundColor (화면설정 모달에서 저장)
|
||||
if (component.webTypeConfig?.backgroundColor) {
|
||||
return component.webTypeConfig.backgroundColor;
|
||||
}
|
||||
return component.style?.labelColor || "#212121"; // 검은색 기본값 (shadcn/ui primary)
|
||||
// 2순위: componentConfig.backgroundColor
|
||||
if (componentConfig.backgroundColor) {
|
||||
return componentConfig.backgroundColor;
|
||||
}
|
||||
// 3순위: style.backgroundColor
|
||||
if (component.style?.backgroundColor) {
|
||||
return component.style.backgroundColor;
|
||||
}
|
||||
// 4순위: style.labelColor (레거시)
|
||||
if (component.style?.labelColor) {
|
||||
return component.style.labelColor;
|
||||
}
|
||||
// 기본값: 삭제 버튼이면 빨강, 아니면 파랑
|
||||
if (isDeleteAction()) {
|
||||
return "#ef4444"; // 빨간색 (Tailwind red-500)
|
||||
}
|
||||
return "#3b82f6"; // 파란색 (Tailwind blue-500)
|
||||
};
|
||||
|
||||
const buttonColor = getLabelColor();
|
||||
const getButtonTextColor = () => {
|
||||
// 1순위: webTypeConfig.textColor (화면설정 모달에서 저장)
|
||||
if (component.webTypeConfig?.textColor) {
|
||||
return component.webTypeConfig.textColor;
|
||||
}
|
||||
// 2순위: componentConfig.textColor
|
||||
if (componentConfig.textColor) {
|
||||
return componentConfig.textColor;
|
||||
}
|
||||
// 3순위: style.color
|
||||
if (component.style?.color) {
|
||||
return component.style.color;
|
||||
}
|
||||
// 기본값: 흰색
|
||||
return "#ffffff";
|
||||
};
|
||||
|
||||
const buttonColor = getButtonBackgroundColor();
|
||||
const buttonTextColor = getButtonTextColor();
|
||||
|
||||
// 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환
|
||||
const processedConfig = { ...componentConfig };
|
||||
|
|
@ -1129,7 +1166,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
} : undefined,
|
||||
} as ButtonActionContext;
|
||||
|
||||
// 확인이 필요한 액션인지 확인
|
||||
// 확인이 필요한 액션인지 확인 (save/delete만 확인 다이얼로그 표시)
|
||||
if (confirmationRequiredActions.includes(processedConfig.action.type)) {
|
||||
// 확인 다이얼로그 표시
|
||||
setPendingAction({
|
||||
|
|
@ -1265,8 +1302,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
minHeight: "40px",
|
||||
border: "none",
|
||||
borderRadius: "0.5rem",
|
||||
backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor, // 🔧 background → backgroundColor로 변경
|
||||
color: finalDisabled ? "#9ca3af" : "white",
|
||||
backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
|
||||
color: finalDisabled ? "#9ca3af" : buttonTextColor, // 🔧 webTypeConfig.textColor 지원
|
||||
// 🔧 크기 설정 적용 (sm/md/lg)
|
||||
fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
|
||||
fontWeight: "600",
|
||||
|
|
@ -1285,7 +1322,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
...userStyle,
|
||||
};
|
||||
|
||||
const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
|
||||
// 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용
|
||||
const langKey = (component as any).componentConfig?.langKey;
|
||||
const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
|
||||
const buttonContent = getTranslatedText(langKey, originalButtonText);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -5,21 +5,8 @@ import { Plus, X, Save, FolderOpen, RefreshCw, Eye, AlertCircle } from "lucide-r
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
|
@ -100,9 +87,9 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
|
|||
const handleBlur = (field: keyof typeof localValues) => {
|
||||
const numValue = parseInt(localValues[field]) || 0;
|
||||
const clampedValue = Math.max(0, Math.min(numValue, field === "levels" ? maxLevels : maxRows));
|
||||
|
||||
|
||||
setLocalValues((prev) => ({ ...prev, [field]: clampedValue.toString() }));
|
||||
|
||||
|
||||
const updateField = field === "startRow" ? "startRow" : field === "endRow" ? "endRow" : "levels";
|
||||
onUpdate(condition.id, { [updateField]: clampedValue });
|
||||
};
|
||||
|
|
@ -113,10 +100,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
|
|||
<div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
|
||||
<span className="font-medium">조건 {index + 1}</span>
|
||||
{!readonly && (
|
||||
<button
|
||||
onClick={() => onRemove(condition.id)}
|
||||
className="rounded p-1 transition-colors hover:bg-blue-700"
|
||||
>
|
||||
<button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -198,20 +182,18 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
tableName,
|
||||
}) => {
|
||||
// 조건 목록
|
||||
const [conditions, setConditions] = useState<RackLineCondition[]>(
|
||||
config.initialConditions || []
|
||||
);
|
||||
|
||||
const [conditions, setConditions] = useState<RackLineCondition[]>(config.initialConditions || []);
|
||||
|
||||
// 템플릿 관련 상태
|
||||
const [templates, setTemplates] = useState<RackStructureTemplate[]>([]);
|
||||
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
|
||||
const [templateName, setTemplateName] = useState("");
|
||||
const [isSaveMode, setIsSaveMode] = useState(false);
|
||||
|
||||
|
||||
// 미리보기 데이터
|
||||
const [previewData, setPreviewData] = useState<GeneratedLocation[]>([]);
|
||||
const [isPreviewGenerated, setIsPreviewGenerated] = useState(false);
|
||||
|
||||
|
||||
// 기존 데이터 중복 체크 관련 상태
|
||||
const [existingLocations, setExistingLocations] = useState<ExistingLocation[]>([]);
|
||||
const [isCheckingDuplicates, setIsCheckingDuplicates] = useState(false);
|
||||
|
|
@ -270,19 +252,22 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
}, [formData, fieldMapping]);
|
||||
|
||||
// 카테고리 코드를 라벨로 변환하는 헬퍼 함수
|
||||
const getCategoryLabel = useCallback((value: string | undefined): string | undefined => {
|
||||
if (!value) return undefined;
|
||||
if (isCategoryCode(value)) {
|
||||
return categoryLabels[value] || value;
|
||||
}
|
||||
return value;
|
||||
}, [categoryLabels]);
|
||||
const getCategoryLabel = useCallback(
|
||||
(value: string | undefined): string | undefined => {
|
||||
if (!value) return undefined;
|
||||
if (isCategoryCode(value)) {
|
||||
return categoryLabels[value] || value;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
[categoryLabels],
|
||||
);
|
||||
|
||||
// 필드 매핑을 통해 formData에서 컨텍스트 추출
|
||||
const context: RackStructureContext = useMemo(() => {
|
||||
// propContext가 있으면 우선 사용
|
||||
if (propContext) return propContext;
|
||||
|
||||
|
||||
// formData와 fieldMapping을 사용하여 컨텍스트 생성
|
||||
if (!formData) return {};
|
||||
|
||||
|
|
@ -292,22 +277,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
const rawStatus = fieldMapping.statusField ? formData[fieldMapping.statusField] : undefined;
|
||||
|
||||
const ctx = {
|
||||
warehouseCode: fieldMapping.warehouseCodeField
|
||||
? formData[fieldMapping.warehouseCodeField]
|
||||
: undefined,
|
||||
warehouseName: fieldMapping.warehouseNameField
|
||||
? formData[fieldMapping.warehouseNameField]
|
||||
: undefined,
|
||||
// 카테고리 값은 라벨로 변환 (화면 표시용)
|
||||
warehouseCode: fieldMapping.warehouseCodeField ? formData[fieldMapping.warehouseCodeField] : undefined,
|
||||
warehouseName: fieldMapping.warehouseNameField ? formData[fieldMapping.warehouseNameField] : undefined,
|
||||
// 카테고리 값은 라벨로 변환
|
||||
floor: getCategoryLabel(rawFloor?.toString()),
|
||||
zone: getCategoryLabel(rawZone),
|
||||
locationType: getCategoryLabel(rawLocationType),
|
||||
status: getCategoryLabel(rawStatus),
|
||||
// 카테고리 코드 원본값 (DB 쿼리/저장용)
|
||||
floorCode: rawFloor?.toString(),
|
||||
zoneCode: rawZone?.toString(),
|
||||
locationTypeCode: rawLocationType?.toString(),
|
||||
statusCode: rawStatus?.toString(),
|
||||
};
|
||||
|
||||
console.log("🏗️ [RackStructure] context 생성:", {
|
||||
|
|
@ -337,26 +313,24 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
// 조건 추가
|
||||
const addCondition = useCallback(() => {
|
||||
if (conditions.length >= maxConditions) return;
|
||||
|
||||
|
||||
// 마지막 조건의 다음 열부터 시작
|
||||
const lastCondition = conditions[conditions.length - 1];
|
||||
const startRow = lastCondition ? lastCondition.endRow + 1 : 1;
|
||||
|
||||
|
||||
const newCondition: RackLineCondition = {
|
||||
id: generateId(),
|
||||
startRow,
|
||||
endRow: startRow + 2,
|
||||
levels: 3,
|
||||
};
|
||||
|
||||
|
||||
setConditions((prev) => [...prev, newCondition]);
|
||||
}, [conditions, maxConditions]);
|
||||
|
||||
// 조건 업데이트
|
||||
const updateCondition = useCallback((id: string, updates: Partial<RackLineCondition>) => {
|
||||
setConditions((prev) =>
|
||||
prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond))
|
||||
);
|
||||
setConditions((prev) => prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond)));
|
||||
}, []);
|
||||
|
||||
// 조건 삭제
|
||||
|
|
@ -367,26 +341,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
// 열 범위 중복 검사
|
||||
const rowOverlapErrors = useMemo(() => {
|
||||
const errors: { conditionIndex: number; overlappingWith: number; overlappingRows: number[] }[] = [];
|
||||
|
||||
|
||||
for (let i = 0; i < conditions.length; i++) {
|
||||
const cond1 = conditions[i];
|
||||
if (cond1.startRow <= 0 || cond1.endRow < cond1.startRow) continue;
|
||||
|
||||
|
||||
for (let j = i + 1; j < conditions.length; j++) {
|
||||
const cond2 = conditions[j];
|
||||
if (cond2.startRow <= 0 || cond2.endRow < cond2.startRow) continue;
|
||||
|
||||
|
||||
// 범위 겹침 확인
|
||||
const overlapStart = Math.max(cond1.startRow, cond2.startRow);
|
||||
const overlapEnd = Math.min(cond1.endRow, cond2.endRow);
|
||||
|
||||
|
||||
if (overlapStart <= overlapEnd) {
|
||||
// 겹치는 열 목록
|
||||
const overlappingRows: number[] = [];
|
||||
for (let r = overlapStart; r <= overlapEnd; r++) {
|
||||
overlappingRows.push(r);
|
||||
}
|
||||
|
||||
|
||||
errors.push({
|
||||
conditionIndex: i,
|
||||
overlappingWith: j,
|
||||
|
|
@ -395,7 +369,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return errors;
|
||||
}, [conditions]);
|
||||
|
||||
|
|
@ -404,12 +378,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 기존 데이터 조회를 위한 값 추출 (useMemo 객체 참조 문제 방지)
|
||||
const warehouseCodeForQuery = context.warehouseCode;
|
||||
// DB 쿼리 시에는 카테고리 코드 사용 (코드로 통일)
|
||||
const floorForQuery = (context as any).floorCode || context.floor;
|
||||
const zoneForQuery = (context as any).zoneCode || context.zone;
|
||||
// 화면 표시용 라벨
|
||||
const floorLabel = context.floor;
|
||||
const zoneLabel = context.zone;
|
||||
const floorForQuery = context.floor; // 라벨 값 (예: "1층")
|
||||
const zoneForQuery = context.zone; // 라벨 값 (예: "A구역")
|
||||
|
||||
// 기존 데이터 조회 (창고/층/구역이 변경될 때마다)
|
||||
useEffect(() => {
|
||||
|
|
@ -443,19 +413,19 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 직접 apiClient 사용하여 정확한 형식으로 요청
|
||||
// 백엔드는 search를 객체로 받아서 각 필드를 WHERE 조건으로 처리
|
||||
const response = await apiClient.post(`/table-management/tables/warehouse_location/data`, {
|
||||
// autoFilter: true로 회사별 데이터 필터링 적용
|
||||
const response = await apiClient.post("/table-management/tables/warehouse_location/data", {
|
||||
page: 1,
|
||||
size: 1000, // 충분히 큰 값
|
||||
search: searchParams, // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
|
||||
search: searchParams, // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
|
||||
autoFilter: true, // 회사별 데이터 필터링 (멀티테넌시)
|
||||
});
|
||||
|
||||
console.log("🔍 기존 위치 데이터 응답:", response.data);
|
||||
|
||||
// API 응답 구조: { success: true, data: { data: [...], total, ... } }
|
||||
const responseData = response.data?.data || response.data;
|
||||
const dataArray = Array.isArray(responseData)
|
||||
? responseData
|
||||
: (responseData?.data || []);
|
||||
const dataArray = Array.isArray(responseData) ? responseData : responseData?.data || [];
|
||||
|
||||
if (dataArray.length > 0) {
|
||||
const existing = dataArray.map((item: any) => ({
|
||||
|
|
@ -504,9 +474,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
// 기존 데이터와 중복 체크
|
||||
const errors: { row: number; existingLevels: number[] }[] = [];
|
||||
plannedRows.forEach((levels, row) => {
|
||||
const existingForRow = existingLocations.filter(
|
||||
(loc) => parseInt(loc.row_num) === row
|
||||
);
|
||||
const existingForRow = existingLocations.filter((loc) => parseInt(loc.row_num) === row);
|
||||
if (existingForRow.length > 0) {
|
||||
const existingLevels = existingForRow.map((loc) => parseInt(loc.level_num));
|
||||
const duplicateLevels = levels.filter((l) => existingLevels.includes(l));
|
||||
|
|
@ -553,14 +521,14 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 코드 생성 (예: WH001-1층D구역-01-1)
|
||||
const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
|
||||
|
||||
|
||||
// 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
|
||||
const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
|
||||
const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;
|
||||
|
||||
return { code, name };
|
||||
},
|
||||
[context]
|
||||
[context],
|
||||
);
|
||||
|
||||
// 미리보기 생성
|
||||
|
|
@ -581,20 +549,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 열 범위 중복 검증
|
||||
if (hasRowOverlap) {
|
||||
const overlapInfo = rowOverlapErrors.map((err) => {
|
||||
const rows = err.overlappingRows.join(", ");
|
||||
return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
|
||||
}).join("\n");
|
||||
const overlapInfo = rowOverlapErrors
|
||||
.map((err) => {
|
||||
const rows = err.overlappingRows.join(", ");
|
||||
return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
|
||||
})
|
||||
.join("\n");
|
||||
alert(`열 범위가 중복됩니다:\n${overlapInfo}\n\n중복된 열을 수정해주세요.`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 기존 데이터와 중복 검증 - duplicateErrors 직접 체크
|
||||
if (duplicateErrors.length > 0) {
|
||||
const duplicateInfo = duplicateErrors.map((err) => {
|
||||
return `${err.row}열 ${err.existingLevels.join(", ")}단`;
|
||||
}).join(", ");
|
||||
alert(`이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`);
|
||||
const duplicateInfo = duplicateErrors
|
||||
.map((err) => {
|
||||
return `${err.row}열 ${err.existingLevels.join(", ")}단`;
|
||||
})
|
||||
.join(", ");
|
||||
alert(
|
||||
`이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -606,20 +580,18 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
for (let level = 1; level <= cond.levels; level++) {
|
||||
const { code, name } = generateLocationCode(row, level);
|
||||
// 테이블 컬럼명과 동일하게 생성
|
||||
// DB 저장 시에는 카테고리 코드 사용 (코드로 통일)
|
||||
const ctxAny = context as any;
|
||||
locations.push({
|
||||
row_num: String(row),
|
||||
level_num: String(level),
|
||||
location_code: code,
|
||||
location_name: name,
|
||||
location_type: ctxAny?.locationTypeCode || context?.locationType || "선반",
|
||||
status: ctxAny?.statusCode || context?.status || "사용",
|
||||
// 추가 필드 (테이블 컬럼명과 동일) - 카테고리 코드 사용
|
||||
location_type: context?.locationType || "선반",
|
||||
status: context?.status || "사용",
|
||||
// 추가 필드 (테이블 컬럼명과 동일)
|
||||
warehouse_code: context?.warehouseCode,
|
||||
warehouse_name: context?.warehouseName,
|
||||
floor: ctxAny?.floorCode || context?.floor,
|
||||
zone: ctxAny?.zoneCode || context?.zone,
|
||||
floor: context?.floor,
|
||||
zone: context?.zone,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -634,7 +606,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
setPreviewData(locations);
|
||||
setIsPreviewGenerated(true);
|
||||
|
||||
|
||||
console.log("🏗️ [RackStructure] 생성된 위치 데이터:", {
|
||||
locationsCount: locations.length,
|
||||
firstLocation: locations[0],
|
||||
|
|
@ -645,9 +617,19 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
zone: context?.zone,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
onChange?.(locations);
|
||||
}, [conditions, context, generateLocationCode, onChange, missingFields, hasRowOverlap, duplicateErrors, existingLocations, rowOverlapErrors]);
|
||||
}, [
|
||||
conditions,
|
||||
context,
|
||||
generateLocationCode,
|
||||
onChange,
|
||||
missingFields,
|
||||
hasRowOverlap,
|
||||
duplicateErrors,
|
||||
existingLocations,
|
||||
rowOverlapErrors,
|
||||
]);
|
||||
|
||||
// 템플릿 저장
|
||||
const saveTemplate = useCallback(() => {
|
||||
|
|
@ -682,8 +664,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />
|
||||
렉 라인 구조 설정
|
||||
<div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
|
||||
</CardTitle>
|
||||
{!readonly && (
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -724,9 +705,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<AlertDescription>
|
||||
다음 필드를 먼저 입력해주세요: <strong>{missingFields.join(", ")}</strong>
|
||||
<br />
|
||||
<span className="text-xs">
|
||||
(설정 패널에서 필드 매핑을 확인하세요)
|
||||
</span>
|
||||
<span className="text-xs">(설정 패널에서 필드 매핑을 확인하세요)</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
@ -740,13 +719,12 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<ul className="mt-1 list-inside list-disc text-xs">
|
||||
{rowOverlapErrors.map((err, idx) => (
|
||||
<li key={idx}>
|
||||
조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열 중복
|
||||
조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열
|
||||
중복
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span className="mt-1 block text-xs">
|
||||
중복된 열 범위를 수정해주세요.
|
||||
</span>
|
||||
<span className="mt-1 block text-xs">중복된 열 범위를 수정해주세요.</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
@ -764,9 +742,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span className="mt-1 block text-xs">
|
||||
해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.
|
||||
</span>
|
||||
<span className="mt-1 block text-xs">해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
@ -775,9 +751,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
{isCheckingDuplicates && (
|
||||
<Alert className="mb-4">
|
||||
<AlertCircle className="h-4 w-4 animate-spin" />
|
||||
<AlertDescription>
|
||||
기존 위치 데이터를 확인하는 중...
|
||||
</AlertDescription>
|
||||
<AlertDescription>기존 위치 데이터를 확인하는 중...</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
|
|
@ -801,14 +775,10 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</span>
|
||||
)}
|
||||
{context.floor && (
|
||||
<span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">
|
||||
층: {context.floor}
|
||||
</span>
|
||||
<span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
|
||||
)}
|
||||
{context.zone && (
|
||||
<span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">
|
||||
구역: {context.zone}
|
||||
</span>
|
||||
<span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
|
||||
)}
|
||||
{context.locationType && (
|
||||
<span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
|
||||
|
|
@ -816,9 +786,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</span>
|
||||
)}
|
||||
{context.status && (
|
||||
<span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">
|
||||
상태: {context.status}
|
||||
</span>
|
||||
<span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -854,8 +822,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
|
||||
{!readonly && (
|
||||
<Button onClick={addCondition} className="gap-1">
|
||||
<Plus className="h-4 w-4" />
|
||||
첫 번째 조건 추가
|
||||
<Plus className="h-4 w-4" />첫 번째 조건 추가
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -941,14 +908,11 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<TableCell className="text-center">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono">{loc.location_code}</TableCell>
|
||||
<TableCell>{loc.location_name}</TableCell>
|
||||
{/* 미리보기에서는 카테고리 코드를 라벨로 변환하여 표시 */}
|
||||
<TableCell className="text-center">{getCategoryLabel(loc.floor) || context?.floor || "1"}</TableCell>
|
||||
<TableCell className="text-center">{getCategoryLabel(loc.zone) || context?.zone || "A"}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{loc.row_num.padStart(2, "0")}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{loc.floor || context?.floor || "1"}</TableCell>
|
||||
<TableCell className="text-center">{loc.zone || context?.zone || "A"}</TableCell>
|
||||
<TableCell className="text-center">{loc.row_num.padStart(2, "0")}</TableCell>
|
||||
<TableCell className="text-center">{loc.level_num}</TableCell>
|
||||
<TableCell className="text-center">{getCategoryLabel(loc.location_type) || loc.location_type}</TableCell>
|
||||
<TableCell className="text-center">{loc.location_type}</TableCell>
|
||||
<TableCell className="text-center">-</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
|
@ -970,9 +934,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isSaveMode ? "템플릿 저장" : "템플릿 관리"}
|
||||
</DialogTitle>
|
||||
<DialogTitle>{isSaveMode ? "템플릿 저장" : "템플릿 관리"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{isSaveMode ? (
|
||||
|
|
@ -998,11 +960,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<div className="space-y-4">
|
||||
{/* 저장 버튼 */}
|
||||
{conditions.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full gap-2"
|
||||
onClick={() => setIsSaveMode(true)}
|
||||
>
|
||||
<Button variant="outline" className="w-full gap-2" onClick={() => setIsSaveMode(true)}>
|
||||
<Save className="h-4 w-4" />
|
||||
현재 조건을 템플릿으로 저장
|
||||
</Button>
|
||||
|
|
@ -1020,23 +978,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
>
|
||||
<div>
|
||||
<div className="font-medium">{template.name}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{template.conditions.length}개 조건
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => loadTemplate(template)}
|
||||
>
|
||||
<Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
|
||||
불러오기
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => deleteTemplate(template.id)}
|
||||
>
|
||||
<Button variant="ghost" size="sm" onClick={() => deleteTemplate(template.id)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -1045,9 +993,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</ScrollArea>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-8 text-center text-gray-500">
|
||||
저장된 템플릿이 없습니다
|
||||
</div>
|
||||
<div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -1065,5 +1011,3 @@ export const RackStructureWrapper: React.FC<RackStructureComponentProps> = (prop
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,9 +11,13 @@ export interface AdditionalTabConfig {
|
|||
// 탭 고유 정보
|
||||
tabId: string;
|
||||
label: string;
|
||||
langKeyId?: number; // 탭 라벨 다국어 키 ID
|
||||
langKey?: string; // 탭 라벨 다국어 키
|
||||
|
||||
// === 우측 패널과 동일한 설정 ===
|
||||
title: string;
|
||||
titleLangKeyId?: number; // 탭 제목 다국어 키 ID
|
||||
titleLangKey?: string; // 탭 제목 다국어 키
|
||||
panelHeaderHeight?: number;
|
||||
tableName?: string;
|
||||
dataSource?: string;
|
||||
|
|
@ -107,6 +111,8 @@ export interface SplitPanelLayoutConfig {
|
|||
// 좌측 패널 설정
|
||||
leftPanel: {
|
||||
title: string;
|
||||
langKeyId?: number; // 다국어 키 ID
|
||||
langKey?: string; // 다국어 키
|
||||
panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
|
||||
tableName?: string; // 데이터베이스 테이블명
|
||||
dataSource?: string; // API 엔드포인트
|
||||
|
|
@ -170,6 +176,8 @@ export interface SplitPanelLayoutConfig {
|
|||
// 우측 패널 설정
|
||||
rightPanel: {
|
||||
title: string;
|
||||
langKeyId?: number; // 다국어 키 ID
|
||||
langKey?: string; // 다국어 키
|
||||
panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
|
||||
tableName?: string;
|
||||
dataSource?: string;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox";
|
|||
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ColumnConfig } from "./types";
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
interface SingleTableWithStickyProps {
|
||||
visibleColumns?: ColumnConfig[];
|
||||
|
|
@ -74,281 +75,298 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
|||
currentSearchIndex = 0,
|
||||
searchTerm = "",
|
||||
}) => {
|
||||
const { getTranslatedText } = useScreenMultiLang();
|
||||
const checkboxConfig = tableConfig?.checkbox || {};
|
||||
const actualColumns = visibleColumns || columns || [];
|
||||
const sortHandler = onSort || handleSort || (() => {});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex flex-col bg-background shadow-sm"
|
||||
className="bg-background relative flex flex-col shadow-sm"
|
||||
style={{
|
||||
width: "100%",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<div className="relative overflow-x-auto">
|
||||
<Table
|
||||
className="w-full"
|
||||
style={{
|
||||
width: "100%",
|
||||
tableLayout: "auto", // 테이블 크기 자동 조정
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<TableHeader
|
||||
className={cn(
|
||||
"border-b bg-background",
|
||||
tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm"
|
||||
)}
|
||||
<Table
|
||||
className="w-full"
|
||||
style={{
|
||||
width: "100%",
|
||||
tableLayout: "auto", // 테이블 크기 자동 조정
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<TableRow className="border-b">
|
||||
{actualColumns.map((column, colIndex) => {
|
||||
// 왼쪽 고정 컬럼들의 누적 너비 계산
|
||||
const leftFixedWidth = actualColumns
|
||||
.slice(0, colIndex)
|
||||
.filter((col) => col.fixed === "left")
|
||||
.reduce((sum, col) => sum + getColumnWidth(col), 0);
|
||||
<TableHeader
|
||||
className={cn("bg-background border-b", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
|
||||
>
|
||||
<TableRow className="border-b">
|
||||
{actualColumns.map((column, colIndex) => {
|
||||
// 왼쪽 고정 컬럼들의 누적 너비 계산
|
||||
const leftFixedWidth = actualColumns
|
||||
.slice(0, colIndex)
|
||||
.filter((col) => col.fixed === "left")
|
||||
.reduce((sum, col) => sum + getColumnWidth(col), 0);
|
||||
|
||||
// 오른쪽 고정 컬럼들의 누적 너비 계산
|
||||
const rightFixedColumns = actualColumns.filter((col) => col.fixed === "right");
|
||||
const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
|
||||
const rightFixedWidth =
|
||||
rightFixedIndex >= 0
|
||||
? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
|
||||
: 0;
|
||||
// 오른쪽 고정 컬럼들의 누적 너비 계산
|
||||
const rightFixedColumns = actualColumns.filter((col) => col.fixed === "right");
|
||||
const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
|
||||
const rightFixedWidth =
|
||||
rightFixedIndex >= 0
|
||||
? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<TableHead
|
||||
key={column.columnName}
|
||||
className={cn(
|
||||
column.columnName === "__checkbox__"
|
||||
? "h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3 bg-background"
|
||||
: "h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle font-semibold whitespace-nowrap text-xs text-foreground transition-all duration-200 select-none hover:text-foreground sm:h-12 sm:px-6 sm:py-3 sm:text-sm bg-background",
|
||||
`text-${column.align}`,
|
||||
column.sortable && "hover:bg-primary/10",
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" &&
|
||||
"sticky z-40 border-r border-border bg-background shadow-sm",
|
||||
column.fixed === "right" &&
|
||||
"sticky z-40 border-l border-border bg-background shadow-sm",
|
||||
// 숨김 컬럼 스타일 (디자인 모드에서만)
|
||||
isDesignMode && column.hidden && "bg-muted/50 opacity-40",
|
||||
)}
|
||||
style={{
|
||||
width: getColumnWidth(column),
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
// sticky 위치 설정
|
||||
...(column.fixed === "left" && { left: leftFixedWidth }),
|
||||
...(column.fixed === "right" && { right: rightFixedWidth }),
|
||||
}}
|
||||
onClick={() => column.sortable && sortHandler(column.columnName)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{column.columnName === "__checkbox__" ? (
|
||||
checkboxConfig.selectAll && (
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onCheckedChange={handleSelectAll}
|
||||
aria-label="전체 선택"
|
||||
style={{ zIndex: 1 }}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<span className="flex-1 truncate">
|
||||
{columnLabels[column.columnName] || column.displayName || column.columnName}
|
||||
</span>
|
||||
{column.sortable && sortColumn === column.columnName && (
|
||||
<span className="ml-1 flex h-4 w-4 items-center justify-center rounded-md bg-background/50 shadow-sm sm:ml-2 sm:h-5 sm:w-5">
|
||||
{sortDirection === "asc" ? (
|
||||
<ArrowUp className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
|
||||
) : (
|
||||
<ArrowDown className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
return (
|
||||
<TableHead
|
||||
key={column.columnName}
|
||||
className={cn(
|
||||
column.columnName === "__checkbox__"
|
||||
? "bg-background h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3"
|
||||
: "text-foreground hover:text-foreground bg-background h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle text-xs font-semibold whitespace-nowrap transition-all duration-200 select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm",
|
||||
`text-${column.align}`,
|
||||
column.sortable && "hover:bg-primary/10",
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" && "border-border bg-background sticky z-40 border-r shadow-sm",
|
||||
column.fixed === "right" && "border-border bg-background sticky z-40 border-l shadow-sm",
|
||||
// 숨김 컬럼 스타일 (디자인 모드에서만)
|
||||
isDesignMode && column.hidden && "bg-muted/50 opacity-40",
|
||||
)}
|
||||
</div>
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={visibleColumns.length} className="py-12 text-center">
|
||||
<div className="flex flex-col items-center justify-center space-y-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
|
||||
<svg className="h-6 w-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-muted-foreground">데이터가 없습니다</span>
|
||||
<span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
|
||||
조건을 변경하여 다시 검색해보세요
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
style={{
|
||||
width: getColumnWidth(column),
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
// sticky 위치 설정
|
||||
...(column.fixed === "left" && { left: leftFixedWidth }),
|
||||
...(column.fixed === "right" && { right: rightFixedWidth }),
|
||||
}}
|
||||
onClick={() => column.sortable && sortHandler(column.columnName)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{column.columnName === "__checkbox__" ? (
|
||||
checkboxConfig.selectAll && (
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onCheckedChange={handleSelectAll}
|
||||
aria-label="전체 선택"
|
||||
style={{ zIndex: 1 }}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<span className="flex-1 truncate">
|
||||
{/* langKey가 있으면 다국어 번역 사용, 없으면 기존 라벨 */}
|
||||
{(column as any).langKey
|
||||
? getTranslatedText(
|
||||
(column as any).langKey,
|
||||
columnLabels[column.columnName] || column.displayName || column.columnName,
|
||||
)
|
||||
: columnLabels[column.columnName] || column.displayName || column.columnName}
|
||||
</span>
|
||||
{column.sortable && sortColumn === column.columnName && (
|
||||
<span className="bg-background/50 ml-1 flex h-4 w-4 items-center justify-center rounded-md shadow-sm sm:ml-2 sm:h-5 sm:w-5">
|
||||
{sortDirection === "asc" ? (
|
||||
<ArrowUp className="text-primary h-2.5 w-2.5 sm:h-3.5 sm:w-3.5" />
|
||||
) : (
|
||||
<ArrowDown className="text-primary h-2.5 w-2.5 sm:h-3.5 sm:w-3.5" />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
) : (
|
||||
data.map((row, index) => (
|
||||
<TableRow
|
||||
key={`row-${index}`}
|
||||
className={cn(
|
||||
"h-14 cursor-pointer border-b transition-colors bg-background sm:h-16",
|
||||
tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
|
||||
)}
|
||||
onClick={() => handleRowClick(row)}
|
||||
>
|
||||
{visibleColumns.map((column, colIndex) => {
|
||||
// 왼쪽 고정 컬럼들의 누적 너비 계산
|
||||
const leftFixedWidth = visibleColumns
|
||||
.slice(0, colIndex)
|
||||
.filter((col) => col.fixed === "left")
|
||||
.reduce((sum, col) => sum + getColumnWidth(col), 0);
|
||||
</TableHeader>
|
||||
|
||||
// 오른쪽 고정 컬럼들의 누적 너비 계산
|
||||
const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
|
||||
const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
|
||||
const rightFixedWidth =
|
||||
rightFixedIndex >= 0
|
||||
? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
|
||||
: 0;
|
||||
<TableBody>
|
||||
{data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={visibleColumns.length} className="py-12 text-center">
|
||||
<div className="flex flex-col items-center justify-center space-y-3">
|
||||
<div className="bg-muted flex h-12 w-12 items-center justify-center rounded-full">
|
||||
<svg
|
||||
className="text-muted-foreground h-6 w-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-sm font-medium">데이터가 없습니다</span>
|
||||
<span className="bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs">
|
||||
조건을 변경하여 다시 검색해보세요
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
data.map((row, index) => (
|
||||
<TableRow
|
||||
key={`row-${index}`}
|
||||
className={cn(
|
||||
"bg-background h-14 cursor-pointer border-b transition-colors sm:h-16",
|
||||
tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
|
||||
)}
|
||||
onClick={() => handleRowClick(row)}
|
||||
>
|
||||
{visibleColumns.map((column, colIndex) => {
|
||||
// 왼쪽 고정 컬럼들의 누적 너비 계산
|
||||
const leftFixedWidth = visibleColumns
|
||||
.slice(0, colIndex)
|
||||
.filter((col) => col.fixed === "left")
|
||||
.reduce((sum, col) => sum + getColumnWidth(col), 0);
|
||||
|
||||
// 현재 셀이 편집 중인지 확인
|
||||
const isEditing = editingCell?.rowIndex === index && editingCell?.colIndex === colIndex;
|
||||
// 오른쪽 고정 컬럼들의 누적 너비 계산
|
||||
const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
|
||||
const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
|
||||
const rightFixedWidth =
|
||||
rightFixedIndex >= 0
|
||||
? rightFixedColumns
|
||||
.slice(rightFixedIndex + 1)
|
||||
.reduce((sum, col) => sum + getColumnWidth(col), 0)
|
||||
: 0;
|
||||
|
||||
// 검색 하이라이트 확인 - 실제 셀 값에 검색어가 포함되어 있는지도 확인
|
||||
const cellKey = `${index}-${colIndex}`;
|
||||
const cellValue = String(row[column.columnName] ?? "").toLowerCase();
|
||||
const hasSearchTerm = searchTerm ? cellValue.includes(searchTerm.toLowerCase()) : false;
|
||||
|
||||
// 인덱스 기반 하이라이트 + 실제 값 검증
|
||||
const isHighlighted = column.columnName !== "__checkbox__" &&
|
||||
hasSearchTerm &&
|
||||
(searchHighlights?.has(cellKey) ?? false);
|
||||
|
||||
// 현재 검색 결과인지 확인 (currentSearchIndex가 -1이면 현재 페이지에 없음)
|
||||
const highlightArray = searchHighlights ? Array.from(searchHighlights) : [];
|
||||
const isCurrentSearchResult = isHighlighted &&
|
||||
currentSearchIndex >= 0 &&
|
||||
currentSearchIndex < highlightArray.length &&
|
||||
highlightArray[currentSearchIndex] === cellKey;
|
||||
// 현재 셀이 편집 중인지 확인
|
||||
const isEditing = editingCell?.rowIndex === index && editingCell?.colIndex === colIndex;
|
||||
|
||||
// 셀 값에서 검색어 하이라이트 렌더링
|
||||
const renderCellContent = () => {
|
||||
const cellValue = formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
|
||||
|
||||
if (!isHighlighted || !searchTerm || column.columnName === "__checkbox__") {
|
||||
return cellValue;
|
||||
}
|
||||
// 검색 하이라이트 확인 - 실제 셀 값에 검색어가 포함되어 있는지도 확인
|
||||
const cellKey = `${index}-${colIndex}`;
|
||||
const cellValue = String(row[column.columnName] ?? "").toLowerCase();
|
||||
const hasSearchTerm = searchTerm ? cellValue.includes(searchTerm.toLowerCase()) : false;
|
||||
|
||||
// 검색어 하이라이트 처리
|
||||
const lowerValue = String(cellValue).toLowerCase();
|
||||
const lowerTerm = searchTerm.toLowerCase();
|
||||
const startIndex = lowerValue.indexOf(lowerTerm);
|
||||
|
||||
if (startIndex === -1) return cellValue;
|
||||
// 인덱스 기반 하이라이트 + 실제 값 검증
|
||||
const isHighlighted =
|
||||
column.columnName !== "__checkbox__" &&
|
||||
hasSearchTerm &&
|
||||
(searchHighlights?.has(cellKey) ?? false);
|
||||
|
||||
const before = String(cellValue).slice(0, startIndex);
|
||||
const match = String(cellValue).slice(startIndex, startIndex + searchTerm.length);
|
||||
const after = String(cellValue).slice(startIndex + searchTerm.length);
|
||||
// 현재 검색 결과인지 확인 (currentSearchIndex가 -1이면 현재 페이지에 없음)
|
||||
const highlightArray = searchHighlights ? Array.from(searchHighlights) : [];
|
||||
const isCurrentSearchResult =
|
||||
isHighlighted &&
|
||||
currentSearchIndex >= 0 &&
|
||||
currentSearchIndex < highlightArray.length &&
|
||||
highlightArray[currentSearchIndex] === cellKey;
|
||||
|
||||
// 셀 값에서 검색어 하이라이트 렌더링
|
||||
const renderCellContent = () => {
|
||||
const cellValue =
|
||||
formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
|
||||
|
||||
if (!isHighlighted || !searchTerm || column.columnName === "__checkbox__") {
|
||||
return cellValue;
|
||||
}
|
||||
|
||||
// 검색어 하이라이트 처리
|
||||
const lowerValue = String(cellValue).toLowerCase();
|
||||
const lowerTerm = searchTerm.toLowerCase();
|
||||
const startIndex = lowerValue.indexOf(lowerTerm);
|
||||
|
||||
if (startIndex === -1) return cellValue;
|
||||
|
||||
const before = String(cellValue).slice(0, startIndex);
|
||||
const match = String(cellValue).slice(startIndex, startIndex + searchTerm.length);
|
||||
const after = String(cellValue).slice(startIndex + searchTerm.length);
|
||||
|
||||
return (
|
||||
<>
|
||||
{before}
|
||||
<mark
|
||||
className={cn(
|
||||
"rounded px-0.5",
|
||||
isCurrentSearchResult
|
||||
? "bg-orange-400 font-semibold text-white"
|
||||
: "bg-yellow-200 text-yellow-900",
|
||||
)}
|
||||
>
|
||||
{match}
|
||||
</mark>
|
||||
{after}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{before}
|
||||
<mark className={cn(
|
||||
"rounded px-0.5",
|
||||
isCurrentSearchResult
|
||||
? "bg-orange-400 text-white font-semibold"
|
||||
: "bg-yellow-200 text-yellow-900"
|
||||
)}>
|
||||
{match}
|
||||
</mark>
|
||||
{after}
|
||||
</>
|
||||
<TableCell
|
||||
key={`cell-${column.columnName}`}
|
||||
id={isCurrentSearchResult ? "current-search-result" : undefined}
|
||||
className={cn(
|
||||
"text-foreground h-14 px-3 py-2 align-middle text-xs whitespace-nowrap transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
|
||||
`text-${column.align}`,
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" &&
|
||||
"border-border bg-background/90 sticky z-10 border-r backdrop-blur-sm",
|
||||
column.fixed === "right" &&
|
||||
"border-border bg-background/90 sticky z-10 border-l backdrop-blur-sm",
|
||||
// 편집 가능 셀 스타일
|
||||
onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
|
||||
)}
|
||||
style={{
|
||||
width: getColumnWidth(column),
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
// sticky 위치 설정
|
||||
...(column.fixed === "left" && { left: leftFixedWidth }),
|
||||
...(column.fixed === "right" && { right: rightFixedWidth }),
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
if (onCellDoubleClick && column.columnName !== "__checkbox__") {
|
||||
e.stopPropagation();
|
||||
onCellDoubleClick(index, colIndex, column.columnName, row[column.columnName]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{column.columnName === "__checkbox__" ? (
|
||||
renderCheckboxCell(row, index)
|
||||
) : isEditing ? (
|
||||
// 인라인 편집 입력 필드
|
||||
<input
|
||||
ref={editInputRef}
|
||||
type="text"
|
||||
value={editingValue ?? ""}
|
||||
onChange={(e) => onEditingValueChange?.(e.target.value)}
|
||||
onKeyDown={onEditKeyDown}
|
||||
onBlur={() => {
|
||||
// blur 시 저장 (Enter와 동일)
|
||||
if (onEditKeyDown) {
|
||||
const fakeEvent = {
|
||||
key: "Enter",
|
||||
preventDefault: () => {},
|
||||
} as React.KeyboardEvent<HTMLInputElement>;
|
||||
onEditKeyDown(fakeEvent);
|
||||
}
|
||||
}}
|
||||
className="border-primary bg-background focus:ring-primary h-8 w-full rounded border px-2 text-xs focus:ring-2 focus:outline-none sm:text-sm"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
renderCellContent()
|
||||
)}
|
||||
</TableCell>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableCell
|
||||
key={`cell-${column.columnName}`}
|
||||
id={isCurrentSearchResult ? "current-search-result" : undefined}
|
||||
className={cn(
|
||||
"h-14 px-3 py-2 align-middle text-xs whitespace-nowrap text-foreground transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
|
||||
`text-${column.align}`,
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" &&
|
||||
"sticky z-10 border-r border-border bg-background/90 backdrop-blur-sm",
|
||||
column.fixed === "right" &&
|
||||
"sticky z-10 border-l border-border bg-background/90 backdrop-blur-sm",
|
||||
// 편집 가능 셀 스타일
|
||||
onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
|
||||
)}
|
||||
style={{
|
||||
width: getColumnWidth(column),
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
// sticky 위치 설정
|
||||
...(column.fixed === "left" && { left: leftFixedWidth }),
|
||||
...(column.fixed === "right" && { right: rightFixedWidth }),
|
||||
}}
|
||||
onDoubleClick={(e) => {
|
||||
if (onCellDoubleClick && column.columnName !== "__checkbox__") {
|
||||
e.stopPropagation();
|
||||
onCellDoubleClick(index, colIndex, column.columnName, row[column.columnName]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{column.columnName === "__checkbox__" ? (
|
||||
renderCheckboxCell(row, index)
|
||||
) : isEditing ? (
|
||||
// 인라인 편집 입력 필드
|
||||
<input
|
||||
ref={editInputRef}
|
||||
type="text"
|
||||
value={editingValue ?? ""}
|
||||
onChange={(e) => onEditingValueChange?.(e.target.value)}
|
||||
onKeyDown={onEditKeyDown}
|
||||
onBlur={() => {
|
||||
// blur 시 저장 (Enter와 동일)
|
||||
if (onEditKeyDown) {
|
||||
const fakeEvent = { key: "Enter", preventDefault: () => {} } as React.KeyboardEvent<HTMLInputElement>;
|
||||
onEditKeyDown(fakeEvent);
|
||||
}
|
||||
}}
|
||||
className="h-8 w-full rounded border border-primary bg-background px-2 text-xs focus:outline-none focus:ring-2 focus:ring-primary sm:text-sm"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
renderCellContent()
|
||||
)}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
})}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ import { useAuth } from "@/hooks/useAuth";
|
|||
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
||||
import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
|
||||
import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
|
||||
import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
|
||||
|
||||
// ========================================
|
||||
// 인터페이스
|
||||
|
|
@ -212,6 +213,8 @@ export interface TableListComponentProps {
|
|||
// 탭 관련 정보 (탭 내부의 테이블에서 사용)
|
||||
parentTabId?: string; // 부모 탭 ID
|
||||
parentTabsComponentId?: string; // 부모 탭 컴포넌트 ID
|
||||
// 🆕 프리뷰용 회사 코드 (DynamicComponentRenderer에서 전달, 최고 관리자만 오버라이드 가능)
|
||||
companyCode?: string;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
|
|
@ -239,7 +242,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
screenId,
|
||||
parentTabId,
|
||||
parentTabsComponentId,
|
||||
companyCode,
|
||||
}) => {
|
||||
// ========================================
|
||||
// 다국어 번역 훅
|
||||
// ========================================
|
||||
const { getTranslatedText } = useScreenMultiLang();
|
||||
|
||||
// ========================================
|
||||
// 설정 및 스타일
|
||||
// ========================================
|
||||
|
|
@ -1793,6 +1802,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
screenEntityConfigs: Object.keys(screenEntityConfigs).length > 0 ? screenEntityConfigs : undefined, // 🎯 화면별 엔티티 설정 전달
|
||||
dataFilter: tableConfig.dataFilter, // 🆕 데이터 필터 전달
|
||||
excludeFilter: excludeFilterParam, // 🆕 제외 필터 전달
|
||||
companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만)
|
||||
});
|
||||
|
||||
// 실제 데이터의 item_number만 추출하여 중복 확인
|
||||
|
|
@ -1863,6 +1873,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
// 🆕 RelatedDataButtons 필터 추가
|
||||
relatedButtonFilter,
|
||||
isRelatedButtonTarget,
|
||||
// 🆕 프리뷰용 회사 코드 오버라이드
|
||||
companyCode,
|
||||
]);
|
||||
|
||||
const fetchTableDataDebounced = useCallback(
|
||||
|
|
@ -5815,7 +5827,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
rowSpan={2}
|
||||
className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
|
||||
>
|
||||
{columnLabels[column.columnName] || column.columnName}
|
||||
{/* langKey가 있으면 다국어 번역 사용 */}
|
||||
{(column as any).langKey
|
||||
? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
|
||||
: columnLabels[column.columnName] || column.columnName}
|
||||
</th>
|
||||
);
|
||||
}
|
||||
|
|
@ -5911,7 +5926,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
<Lock className="text-muted-foreground h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
<span>{columnLabels[column.columnName] || column.displayName}</span>
|
||||
<span>
|
||||
{/* langKey가 있으면 다국어 번역 사용 */}
|
||||
{(column as any).langKey
|
||||
? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
|
||||
: columnLabels[column.columnName] || column.displayName}
|
||||
</span>
|
||||
{column.sortable !== false && sortColumn === column.columnName && (
|
||||
<span>{sortDirection === "asc" ? "↑" : "↓"}</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,604 @@
|
|||
/**
|
||||
* 다국어 라벨 추출 유틸리티
|
||||
* 화면 디자이너의 컴포넌트에서 다국어 처리가 필요한 라벨을 추출합니다.
|
||||
*/
|
||||
|
||||
import { ComponentData } from "@/types/screen";
|
||||
|
||||
// 추출된 라벨 타입
|
||||
export interface ExtractedLabel {
|
||||
id: string;
|
||||
componentId: string;
|
||||
label: string;
|
||||
type: "label" | "title" | "button" | "placeholder" | "column" | "filter" | "field" | "tab" | "action";
|
||||
parentType?: string;
|
||||
parentLabel?: string;
|
||||
langKeyId?: number;
|
||||
langKey?: string;
|
||||
}
|
||||
|
||||
// 입력 폼 컴포넌트인지 확인
|
||||
const INPUT_COMPONENT_TYPES = new Set([
|
||||
"text-field",
|
||||
"number-field",
|
||||
"date-field",
|
||||
"datetime-field",
|
||||
"select-field",
|
||||
"checkbox-field",
|
||||
"radio-field",
|
||||
"textarea-field",
|
||||
"file-field",
|
||||
"email-field",
|
||||
"tel-field",
|
||||
"password-field",
|
||||
"entity-field",
|
||||
"code-field",
|
||||
"category-field",
|
||||
"input-field",
|
||||
"widget",
|
||||
]);
|
||||
|
||||
const isInputComponent = (comp: any): boolean => {
|
||||
const compType = comp.componentType || comp.type;
|
||||
if (INPUT_COMPONENT_TYPES.has(compType)) return true;
|
||||
if (compType === "widget" && comp.widgetType) return true;
|
||||
if (comp.inputType || comp.webType) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
// 컬럼 라벨 맵 타입
|
||||
export type ColumnLabelMap = Record<string, Record<string, string>>;
|
||||
|
||||
/**
|
||||
* 컴포넌트에서 다국어 라벨 추출
|
||||
* @param components 컴포넌트 배열
|
||||
* @param columnLabelMap 테이블별 컬럼 라벨 맵 (선택사항)
|
||||
* @returns 추출된 라벨 배열
|
||||
*/
|
||||
export function extractMultilangLabels(
|
||||
components: ComponentData[],
|
||||
columnLabelMap: ColumnLabelMap = {}
|
||||
): ExtractedLabel[] {
|
||||
const labels: ExtractedLabel[] = [];
|
||||
const addedLabels = new Set<string>();
|
||||
|
||||
const addLabel = (
|
||||
componentId: string,
|
||||
label: string,
|
||||
type: ExtractedLabel["type"],
|
||||
parentType?: string,
|
||||
parentLabel?: string,
|
||||
langKeyId?: number,
|
||||
langKey?: string
|
||||
) => {
|
||||
const key = `${componentId}_${type}_${label}`;
|
||||
if (label && label.trim() && !addedLabels.has(key)) {
|
||||
addedLabels.add(key);
|
||||
labels.push({
|
||||
id: key,
|
||||
componentId,
|
||||
label: label.trim(),
|
||||
type,
|
||||
parentType,
|
||||
parentLabel,
|
||||
langKeyId,
|
||||
langKey,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const extractFromComponent = (comp: ComponentData, parentType?: string, parentLabel?: string) => {
|
||||
const anyComp = comp as any;
|
||||
const config = anyComp.componentConfig;
|
||||
const compType = anyComp.componentType || anyComp.type;
|
||||
const compLabel = anyComp.label || anyComp.title || compType;
|
||||
|
||||
// 1. 기본 라벨 - 입력 폼 컴포넌트인 경우에만 추출
|
||||
if (isInputComponent(anyComp)) {
|
||||
if (anyComp.label && typeof anyComp.label === "string") {
|
||||
addLabel(comp.id, anyComp.label, "label", parentType, parentLabel, anyComp.langKeyId, anyComp.langKey);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 제목
|
||||
if (anyComp.title && typeof anyComp.title === "string") {
|
||||
addLabel(comp.id, anyComp.title, "title", parentType, parentLabel);
|
||||
}
|
||||
|
||||
// 3. 버튼 텍스트 (componentId에 _button 접미사 추가하여 라벨과 구분)
|
||||
if (config?.text && typeof config.text === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_button`,
|
||||
config.text,
|
||||
"button",
|
||||
parentType,
|
||||
parentLabel,
|
||||
config.langKeyId,
|
||||
config.langKey
|
||||
);
|
||||
}
|
||||
|
||||
// 4. placeholder
|
||||
if (anyComp.placeholder && typeof anyComp.placeholder === "string") {
|
||||
addLabel(comp.id, anyComp.placeholder, "placeholder", parentType, parentLabel);
|
||||
}
|
||||
|
||||
// 5. 테이블 컬럼 - columnLabelMap에서 한글 라벨 조회
|
||||
const tableName = config?.selectedTable || config?.tableName || config?.table || anyComp.tableName;
|
||||
if (config?.columns && Array.isArray(config.columns)) {
|
||||
config.columns.forEach((col: any, index: number) => {
|
||||
const colName = col.columnName || col.field || col.name;
|
||||
// columnLabelMap에서 한글 라벨 조회, 없으면 displayName 사용
|
||||
const colLabel = columnLabelMap[tableName]?.[colName] || col.displayName || col.label || colName;
|
||||
|
||||
if (colLabel && typeof colLabel === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_col_${index}`,
|
||||
colLabel,
|
||||
"column",
|
||||
compType,
|
||||
compLabel,
|
||||
col.langKeyId,
|
||||
col.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 6. 분할 패널 제목 및 컬럼 - columnLabelMap에서 한글 라벨 조회
|
||||
// 6-1. 좌측 패널 제목
|
||||
if (config?.leftPanel?.title && typeof config.leftPanel.title === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_left_title`,
|
||||
config.leftPanel.title,
|
||||
"title",
|
||||
compType,
|
||||
`${compLabel} (좌측)`,
|
||||
config.leftPanel.langKeyId,
|
||||
config.leftPanel.langKey
|
||||
);
|
||||
}
|
||||
// 6-2. 우측 패널 제목
|
||||
if (config?.rightPanel?.title && typeof config.rightPanel.title === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_right_title`,
|
||||
config.rightPanel.title,
|
||||
"title",
|
||||
compType,
|
||||
`${compLabel} (우측)`,
|
||||
config.rightPanel.langKeyId,
|
||||
config.rightPanel.langKey
|
||||
);
|
||||
}
|
||||
// 6-3. 좌측 패널 컬럼
|
||||
const leftTableName = config?.leftPanel?.selectedTable || config?.leftPanel?.tableName || tableName;
|
||||
if (config?.leftPanel?.columns && Array.isArray(config.leftPanel.columns)) {
|
||||
config.leftPanel.columns.forEach((col: any, index: number) => {
|
||||
const colName = col.columnName || col.field || col.name;
|
||||
const colLabel = columnLabelMap[leftTableName]?.[colName] || col.displayName || col.label || colName;
|
||||
if (colLabel && typeof colLabel === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_left_col_${index}`,
|
||||
colLabel,
|
||||
"column",
|
||||
compType,
|
||||
`${compLabel} (좌측)`,
|
||||
col.langKeyId,
|
||||
col.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
const rightTableName = config?.rightPanel?.selectedTable || config?.rightPanel?.tableName || tableName;
|
||||
if (config?.rightPanel?.columns && Array.isArray(config.rightPanel.columns)) {
|
||||
config.rightPanel.columns.forEach((col: any, index: number) => {
|
||||
const colName = col.columnName || col.field || col.name;
|
||||
const colLabel = columnLabelMap[rightTableName]?.[colName] || col.displayName || col.label || colName;
|
||||
if (colLabel && typeof colLabel === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_right_col_${index}`,
|
||||
colLabel,
|
||||
"column",
|
||||
compType,
|
||||
`${compLabel} (우측)`,
|
||||
col.langKeyId,
|
||||
col.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 6-5. 추가 탭 (additionalTabs) 제목 및 컬럼 - rightPanel.additionalTabs 확인
|
||||
const additionalTabs = config?.rightPanel?.additionalTabs || config?.additionalTabs;
|
||||
if (additionalTabs && Array.isArray(additionalTabs)) {
|
||||
additionalTabs.forEach((tab: any, tabIndex: number) => {
|
||||
// 탭 라벨
|
||||
if (tab.label && typeof tab.label === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_addtab_${tabIndex}_label`,
|
||||
tab.label,
|
||||
"tab",
|
||||
compType,
|
||||
compLabel,
|
||||
tab.langKeyId,
|
||||
tab.langKey
|
||||
);
|
||||
}
|
||||
// 탭 제목
|
||||
if (tab.title && typeof tab.title === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_addtab_${tabIndex}_title`,
|
||||
tab.title,
|
||||
"title",
|
||||
compType,
|
||||
`${compLabel} (탭: ${tab.label || tabIndex})`,
|
||||
tab.titleLangKeyId,
|
||||
tab.titleLangKey
|
||||
);
|
||||
}
|
||||
// 탭 컬럼
|
||||
const tabTableName = tab.tableName || tab.selectedTable || rightTableName;
|
||||
if (tab.columns && Array.isArray(tab.columns)) {
|
||||
tab.columns.forEach((col: any, colIndex: number) => {
|
||||
const colName = col.columnName || col.field || col.name;
|
||||
const colLabel = columnLabelMap[tabTableName]?.[colName] || col.displayName || col.label || colName;
|
||||
if (colLabel && typeof colLabel === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_addtab_${tabIndex}_col_${colIndex}`,
|
||||
colLabel,
|
||||
"column",
|
||||
compType,
|
||||
`${compLabel} (탭: ${tab.label || tabIndex})`,
|
||||
col.langKeyId,
|
||||
col.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 7. 검색 필터
|
||||
if (config?.filter?.filters && Array.isArray(config.filter.filters)) {
|
||||
config.filter.filters.forEach((filter: any, index: number) => {
|
||||
if (filter.label && typeof filter.label === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_filter_${index}`,
|
||||
filter.label,
|
||||
"filter",
|
||||
compType,
|
||||
compLabel,
|
||||
filter.langKeyId,
|
||||
filter.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 8. 폼 필드
|
||||
if (config?.fields && Array.isArray(config.fields)) {
|
||||
config.fields.forEach((field: any, index: number) => {
|
||||
if (field.label && typeof field.label === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_field_${index}`,
|
||||
field.label,
|
||||
"field",
|
||||
compType,
|
||||
compLabel,
|
||||
field.langKeyId,
|
||||
field.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 9. 탭
|
||||
if (config?.tabs && Array.isArray(config.tabs)) {
|
||||
config.tabs.forEach((tab: any, index: number) => {
|
||||
if (tab.label && typeof tab.label === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_tab_${index}`,
|
||||
tab.label,
|
||||
"tab",
|
||||
compType,
|
||||
compLabel,
|
||||
tab.langKeyId,
|
||||
tab.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 10. 액션 버튼
|
||||
if (config?.actions?.actions && Array.isArray(config.actions.actions)) {
|
||||
config.actions.actions.forEach((action: any, index: number) => {
|
||||
if (action.label && typeof action.label === "string") {
|
||||
addLabel(
|
||||
`${comp.id}_action_${index}`,
|
||||
action.label,
|
||||
"action",
|
||||
compType,
|
||||
compLabel,
|
||||
action.langKeyId,
|
||||
action.langKey
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 자식 컴포넌트 재귀 탐색
|
||||
if (anyComp.children && Array.isArray(anyComp.children)) {
|
||||
anyComp.children.forEach((child: ComponentData) => {
|
||||
extractFromComponent(child, compType, compLabel);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
components.forEach((comp) => extractFromComponent(comp));
|
||||
return labels;
|
||||
}
|
||||
|
||||
/**
|
||||
* 컴포넌트에서 테이블명 추출
|
||||
* @param components 컴포넌트 배열
|
||||
* @returns 테이블명 Set
|
||||
*/
|
||||
export function extractTableNames(components: ComponentData[]): Set<string> {
|
||||
const tableNames = new Set<string>();
|
||||
|
||||
const extractTableName = (comp: any) => {
|
||||
const config = comp.componentConfig;
|
||||
|
||||
// 1. 컴포넌트 직접 tableName
|
||||
if (comp.tableName) tableNames.add(comp.tableName);
|
||||
|
||||
// 2. componentConfig 직접 tableName
|
||||
if (config?.tableName) tableNames.add(config.tableName);
|
||||
|
||||
// 3. 테이블 리스트 컴포넌트 - selectedTable (주요!)
|
||||
if (config?.selectedTable) tableNames.add(config.selectedTable);
|
||||
|
||||
// 4. 테이블 리스트 컴포넌트 - table 속성
|
||||
if (config?.table) tableNames.add(config.table);
|
||||
|
||||
// 5. 분할 패널의 leftPanel/rightPanel
|
||||
if (config?.leftPanel?.tableName) tableNames.add(config.leftPanel.tableName);
|
||||
if (config?.rightPanel?.tableName) tableNames.add(config.rightPanel.tableName);
|
||||
if (config?.leftPanel?.table) tableNames.add(config.leftPanel.table);
|
||||
if (config?.rightPanel?.table) tableNames.add(config.rightPanel.table);
|
||||
if (config?.leftPanel?.selectedTable) tableNames.add(config.leftPanel.selectedTable);
|
||||
if (config?.rightPanel?.selectedTable) tableNames.add(config.rightPanel.selectedTable);
|
||||
|
||||
// 6. 검색 필터의 tableName
|
||||
if (config?.filter?.tableName) tableNames.add(config.filter.tableName);
|
||||
|
||||
// 7. properties 안의 tableName
|
||||
if (comp.properties?.tableName) tableNames.add(comp.properties.tableName);
|
||||
if (comp.properties?.selectedTable) tableNames.add(comp.properties.selectedTable);
|
||||
|
||||
// 자식 컴포넌트 탐색
|
||||
if (comp.children && Array.isArray(comp.children)) {
|
||||
comp.children.forEach(extractTableName);
|
||||
}
|
||||
};
|
||||
|
||||
components.forEach(extractTableName);
|
||||
return tableNames;
|
||||
}
|
||||
|
||||
/**
|
||||
* 다국어 키 매핑 결과를 컴포넌트에 적용
|
||||
* @param components 원본 컴포넌트 배열
|
||||
* @param mappings 다국어 키 매핑 결과 [{componentId, keyId, langKey}]
|
||||
* @returns 업데이트된 컴포넌트 배열
|
||||
*/
|
||||
export function applyMultilangMappings(
|
||||
components: ComponentData[],
|
||||
mappings: Array<{ componentId: string; keyId: number; langKey: string }>
|
||||
): ComponentData[] {
|
||||
// 매핑을 빠르게 찾기 위한 맵 생성
|
||||
const mappingMap = new Map(mappings.map((m) => [m.componentId, m]));
|
||||
|
||||
const updateComponent = (comp: ComponentData): ComponentData => {
|
||||
const anyComp = comp as any;
|
||||
const config = anyComp.componentConfig;
|
||||
let updated = { ...comp } as any;
|
||||
|
||||
// 기본 컴포넌트 라벨 매핑 확인
|
||||
const labelMapping = mappingMap.get(comp.id);
|
||||
if (labelMapping) {
|
||||
updated.langKeyId = labelMapping.keyId;
|
||||
updated.langKey = labelMapping.langKey;
|
||||
}
|
||||
|
||||
// 버튼 텍스트 매핑 (componentId_button 형식으로 조회)
|
||||
const buttonMapping = mappingMap.get(`${comp.id}_button`);
|
||||
if (buttonMapping && config?.text) {
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
langKeyId: buttonMapping.keyId,
|
||||
langKey: buttonMapping.langKey,
|
||||
};
|
||||
}
|
||||
|
||||
// 컬럼 매핑
|
||||
if (config?.columns && Array.isArray(config.columns)) {
|
||||
const updatedColumns = config.columns.map((col: any, index: number) => {
|
||||
const colMapping = mappingMap.get(`${comp.id}_col_${index}`);
|
||||
if (colMapping) {
|
||||
return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
updated.componentConfig = { ...config, columns: updatedColumns };
|
||||
}
|
||||
|
||||
// 분할 패널 좌측 제목 매핑
|
||||
const leftTitleMapping = mappingMap.get(`${comp.id}_left_title`);
|
||||
if (leftTitleMapping && config?.leftPanel?.title) {
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
leftPanel: {
|
||||
...updated.componentConfig?.leftPanel,
|
||||
langKeyId: leftTitleMapping.keyId,
|
||||
langKey: leftTitleMapping.langKey,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// 분할 패널 우측 제목 매핑
|
||||
const rightTitleMapping = mappingMap.get(`${comp.id}_right_title`);
|
||||
if (rightTitleMapping && config?.rightPanel?.title) {
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
rightPanel: {
|
||||
...updated.componentConfig?.rightPanel,
|
||||
langKeyId: rightTitleMapping.keyId,
|
||||
langKey: rightTitleMapping.langKey,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// 분할 패널 좌측 컬럼 매핑 (이미 업데이트된 leftPanel 사용)
|
||||
const currentLeftPanel = updated.componentConfig?.leftPanel || config?.leftPanel;
|
||||
if (currentLeftPanel?.columns && Array.isArray(currentLeftPanel.columns)) {
|
||||
const updatedLeftColumns = currentLeftPanel.columns.map((col: any, index: number) => {
|
||||
const colMapping = mappingMap.get(`${comp.id}_left_col_${index}`);
|
||||
if (colMapping) {
|
||||
return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
leftPanel: { ...currentLeftPanel, columns: updatedLeftColumns },
|
||||
};
|
||||
}
|
||||
|
||||
// 분할 패널 우측 컬럼 매핑 (이미 업데이트된 rightPanel 사용)
|
||||
const currentRightPanel = updated.componentConfig?.rightPanel || config?.rightPanel;
|
||||
if (currentRightPanel?.columns && Array.isArray(currentRightPanel.columns)) {
|
||||
const updatedRightColumns = currentRightPanel.columns.map((col: any, index: number) => {
|
||||
const colMapping = mappingMap.get(`${comp.id}_right_col_${index}`);
|
||||
if (colMapping) {
|
||||
return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
rightPanel: { ...currentRightPanel, columns: updatedRightColumns },
|
||||
};
|
||||
}
|
||||
|
||||
// 필터 매핑
|
||||
if (config?.filter?.filters && Array.isArray(config.filter.filters)) {
|
||||
const updatedFilters = config.filter.filters.map((filter: any, index: number) => {
|
||||
const filterMapping = mappingMap.get(`${comp.id}_filter_${index}`);
|
||||
if (filterMapping) {
|
||||
return { ...filter, langKeyId: filterMapping.keyId, langKey: filterMapping.langKey };
|
||||
}
|
||||
return filter;
|
||||
});
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
filter: { ...config.filter, filters: updatedFilters },
|
||||
};
|
||||
}
|
||||
|
||||
// 폼 필드 매핑
|
||||
if (config?.fields && Array.isArray(config.fields)) {
|
||||
const updatedFields = config.fields.map((field: any, index: number) => {
|
||||
const fieldMapping = mappingMap.get(`${comp.id}_field_${index}`);
|
||||
if (fieldMapping) {
|
||||
return { ...field, langKeyId: fieldMapping.keyId, langKey: fieldMapping.langKey };
|
||||
}
|
||||
return field;
|
||||
});
|
||||
updated.componentConfig = { ...updated.componentConfig, fields: updatedFields };
|
||||
}
|
||||
|
||||
// 탭 매핑
|
||||
if (config?.tabs && Array.isArray(config.tabs)) {
|
||||
const updatedTabs = config.tabs.map((tab: any, index: number) => {
|
||||
const tabMapping = mappingMap.get(`${comp.id}_tab_${index}`);
|
||||
if (tabMapping) {
|
||||
return { ...tab, langKeyId: tabMapping.keyId, langKey: tabMapping.langKey };
|
||||
}
|
||||
return tab;
|
||||
});
|
||||
updated.componentConfig = { ...updated.componentConfig, tabs: updatedTabs };
|
||||
}
|
||||
|
||||
// 추가 탭 (additionalTabs) 매핑 - rightPanel.additionalTabs 또는 additionalTabs 확인
|
||||
const currentRightPanelForAddTabs = updated.componentConfig?.rightPanel || config?.rightPanel;
|
||||
const configAdditionalTabs = currentRightPanelForAddTabs?.additionalTabs || config?.additionalTabs;
|
||||
if (configAdditionalTabs && Array.isArray(configAdditionalTabs)) {
|
||||
const updatedAdditionalTabs = configAdditionalTabs.map((tab: any, tabIndex: number) => {
|
||||
let updatedTab = { ...tab };
|
||||
|
||||
// 탭 라벨 매핑
|
||||
const labelMapping = mappingMap.get(`${comp.id}_addtab_${tabIndex}_label`);
|
||||
if (labelMapping) {
|
||||
updatedTab.langKeyId = labelMapping.keyId;
|
||||
updatedTab.langKey = labelMapping.langKey;
|
||||
}
|
||||
|
||||
// 탭 제목 매핑
|
||||
const titleMapping = mappingMap.get(`${comp.id}_addtab_${tabIndex}_title`);
|
||||
if (titleMapping) {
|
||||
updatedTab.titleLangKeyId = titleMapping.keyId;
|
||||
updatedTab.titleLangKey = titleMapping.langKey;
|
||||
}
|
||||
|
||||
// 탭 컬럼 매핑
|
||||
if (tab.columns && Array.isArray(tab.columns)) {
|
||||
updatedTab.columns = tab.columns.map((col: any, colIndex: number) => {
|
||||
const colMapping = mappingMap.get(`${comp.id}_addtab_${tabIndex}_col_${colIndex}`);
|
||||
if (colMapping) {
|
||||
return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
}
|
||||
|
||||
return updatedTab;
|
||||
});
|
||||
|
||||
// rightPanel.additionalTabs에 저장하거나 additionalTabs에 저장
|
||||
if (currentRightPanelForAddTabs?.additionalTabs) {
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
rightPanel: { ...currentRightPanelForAddTabs, additionalTabs: updatedAdditionalTabs },
|
||||
};
|
||||
} else {
|
||||
updated.componentConfig = { ...updated.componentConfig, additionalTabs: updatedAdditionalTabs };
|
||||
}
|
||||
}
|
||||
|
||||
// 액션 버튼 매핑
|
||||
if (config?.actions?.actions && Array.isArray(config.actions.actions)) {
|
||||
const updatedActions = config.actions.actions.map((action: any, index: number) => {
|
||||
const actionMapping = mappingMap.get(`${comp.id}_action_${index}`);
|
||||
if (actionMapping) {
|
||||
return { ...action, langKeyId: actionMapping.keyId, langKey: actionMapping.langKey };
|
||||
}
|
||||
return action;
|
||||
});
|
||||
updated.componentConfig = {
|
||||
...updated.componentConfig,
|
||||
actions: { ...config.actions, actions: updatedActions },
|
||||
};
|
||||
}
|
||||
|
||||
// 자식 컴포넌트 재귀 처리
|
||||
if (anyComp.children && Array.isArray(anyComp.children)) {
|
||||
updated.children = anyComp.children.map((child: ComponentData) => updateComponent(child));
|
||||
}
|
||||
|
||||
return updated;
|
||||
};
|
||||
|
||||
return components.map(updateComponent);
|
||||
}
|
||||
|
||||
|
|
@ -82,6 +82,7 @@
|
|||
"react-resizable-panels": "^3.0.6",
|
||||
"react-webcam": "^7.2.0",
|
||||
"react-window": "^2.1.0",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"reactflow": "^11.11.4",
|
||||
"recharts": "^3.2.1",
|
||||
"sheetjs-style": "^0.15.8",
|
||||
|
|
@ -257,6 +258,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
|
|
@ -298,6 +300,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
|
|
@ -331,6 +334,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
|
||||
"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@dnd-kit/accessibility": "^3.1.1",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
|
|
@ -2633,6 +2637,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.0.tgz",
|
||||
"integrity": "sha512-k4iu1R6e5D54918V4sqmISUkI5OgTw3v7/sDRKEC632Wd5g2WBtUS5gyG63X0GJO/HZUj1tsjSXfyzwrUHZl1g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.8",
|
||||
"@types/react-reconciler": "^0.32.0",
|
||||
|
|
@ -3286,6 +3291,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.6.tgz",
|
||||
"integrity": "sha512-gB1sljYjcobZKxjPbKSa31FUTyr+ROaBdoH+wSSs9Dk+yDCmMs+TkTV3PybRRVLC7ax7q0erJ9LvRWnMktnRAw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.90.6"
|
||||
},
|
||||
|
|
@ -3353,6 +3359,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.27.1.tgz",
|
||||
"integrity": "sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
|
|
@ -3666,6 +3673,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.27.1.tgz",
|
||||
"integrity": "sha512-ijKo3+kIjALthYsnBmkRXAuw2Tswd9gd7BUR5OMfIcjGp8v576vKxOxrRfuYiUM78GPt//P0sVc1WV82H5N0PQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"prosemirror-changeset": "^2.3.0",
|
||||
"prosemirror-collab": "^1.3.1",
|
||||
|
|
@ -6166,6 +6174,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
|
|
@ -6176,6 +6185,7 @@
|
|||
"integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
|
|
@ -6209,6 +6219,7 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz",
|
||||
"integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@dimforge/rapier3d-compat": "~0.12.0",
|
||||
"@tweenjs/tween.js": "~23.1.3",
|
||||
|
|
@ -6291,6 +6302,7 @@
|
|||
"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.46.2",
|
||||
"@typescript-eslint/types": "8.46.2",
|
||||
|
|
@ -6923,6 +6935,7 @@
|
|||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -8073,7 +8086,8 @@
|
|||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/d3": {
|
||||
"version": "7.9.0",
|
||||
|
|
@ -8395,6 +8409,7 @@
|
|||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
|
||||
"license": "ISC",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
|
|
@ -9154,6 +9169,7 @@
|
|||
"integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
|
|
@ -9242,6 +9258,7 @@
|
|||
"integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"eslint-config-prettier": "bin/cli.js"
|
||||
},
|
||||
|
|
@ -9343,6 +9360,7 @@
|
|||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@rtsao/scc": "^1.1.0",
|
||||
"array-includes": "^3.1.9",
|
||||
|
|
@ -10493,6 +10511,7 @@
|
|||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
|
|
@ -11274,7 +11293,8 @@
|
|||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
|
||||
"license": "BSD-2-Clause"
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/levn": {
|
||||
"version": "0.4.1",
|
||||
|
|
@ -12573,6 +12593,7 @@
|
|||
"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
|
|
@ -12868,6 +12889,7 @@
|
|||
"resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
|
||||
"integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"orderedmap": "^2.0.0"
|
||||
}
|
||||
|
|
@ -12897,6 +12919,7 @@
|
|||
"resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
|
||||
"integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"prosemirror-model": "^1.0.0",
|
||||
"prosemirror-transform": "^1.0.0",
|
||||
|
|
@ -12945,6 +12968,7 @@
|
|||
"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.4.tgz",
|
||||
"integrity": "sha512-WkKgnyjNncri03Gjaz3IFWvCAE94XoiEgvtr0/r2Xw7R8/IjK3sKLSiDoCHWcsXSAinVaKlGRZDvMCsF1kbzjA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"prosemirror-model": "^1.20.0",
|
||||
"prosemirror-state": "^1.0.0",
|
||||
|
|
@ -13071,6 +13095,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
|
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -13140,6 +13165,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.26.0"
|
||||
},
|
||||
|
|
@ -13158,6 +13184,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
|
||||
"integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
|
|
@ -13335,6 +13362,20 @@
|
|||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-zoom-pan-pinch": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.7.0.tgz",
|
||||
"integrity": "sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/reactflow": {
|
||||
"version": "11.11.4",
|
||||
"resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
|
||||
|
|
@ -13470,6 +13511,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
|
|
@ -13492,7 +13534,8 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/recharts/node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
|
|
@ -14516,7 +14559,8 @@
|
|||
"version": "0.180.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
|
||||
"integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/three-mesh-bvh": {
|
||||
"version": "0.8.3",
|
||||
|
|
@ -14604,6 +14648,7 @@
|
|||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
@ -14952,6 +14997,7 @@
|
|||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@
|
|||
"react-resizable-panels": "^3.0.6",
|
||||
"react-webcam": "^7.2.0",
|
||||
"react-window": "^2.1.0",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"reactflow": "^11.11.4",
|
||||
"recharts": "^3.2.1",
|
||||
"sheetjs-style": "^0.15.8",
|
||||
|
|
|
|||
|
|
@ -1690,3 +1690,4 @@ const 출고등록_설정: ScreenSplitPanel = {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -537,3 +537,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -524,3 +524,4 @@ function ScreenViewPage() {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue