refactor: update color schemes and improve component styling
- Changed color schemes for various screen types and roles to align with the new design guidelines, enhancing visual consistency across the application. - Updated background colors for components based on their types, such as changing 'bg-slate-400' to 'bg-muted-foreground' and adjusting other color mappings for better clarity. - Improved the styling of the ScreenNode and V2PropertiesPanel components to ensure a more cohesive user experience. - Enhanced the DynamicComponentRenderer to support dynamic loading of column metadata with cache invalidation for better performance. These changes aim to refine the UI and improve the overall aesthetic of the application, ensuring a more modern and user-friendly interface.
This commit is contained in:
DDD1542
@@ -0,0 +1,165 @@
|
||||
# Screen 149 필드 타입 검증 가이드
|
||||
|
||||
## 배경
|
||||
- **화면 149**: 품목정보 (item_info 테이블) 폼
|
||||
- **division 컬럼**: DB에서 `input_type = 'text'`로 변경했으나 화면에는 여전히 SELECT 드롭다운으로 표시
|
||||
- **unit 컬럼**: `input_type = 'category'` → SELECT 드롭다운으로 표시되어야 함
|
||||
|
||||
## DB 현황 (vexplor-dev 조회 결과)
|
||||
|
||||
| column_name | company_code | input_type |
|
||||
|-------------|--------------|------------|
|
||||
| division | * | category |
|
||||
| division | COMPANY_7 | **text** |
|
||||
| division | COMPANY_8, 9, 10, 18, 19, 20, 21 | category |
|
||||
| unit | * | text |
|
||||
| unit | COMPANY_18, 19, 20, 21, 7, 8, 9 | **category** |
|
||||
|
||||
**주의:** `wace` 사용자는 `company_code = '*'` (최고 관리자)입니다.
|
||||
- division: company * → **category** (text 아님)
|
||||
- unit: company * → **text** (category 아님)
|
||||
|
||||
**회사별로 다릅니다.** 예: COMPANY_7의 division은 text, unit은 category.
|
||||
|
||||
---
|
||||
|
||||
## 수동 검증 절차
|
||||
|
||||
### 1. 로그인
|
||||
- URL: `http://localhost:9771/login`
|
||||
- User ID: `wace`
|
||||
- Password: `wace0909!!`
|
||||
- 회사: "탑씰" (해당 회사 코드 확인 필요)
|
||||
|
||||
### 2. 화면 149 접속
|
||||
- URL: `http://localhost:9771/screens/149`
|
||||
- 페이지 로드 대기
|
||||
|
||||
### 3. 필드 확인
|
||||
|
||||
#### 구분 (division)
|
||||
- **예상 (DB 기준):**
|
||||
- company *: SELECT (category)
|
||||
- COMPANY_7: TEXT INPUT (text)
|
||||
- **실제:** TEXT INPUT 또는 SELECT 중 어느 쪽인지 확인
|
||||
|
||||
#### 단위 (unit)
|
||||
- **예상 (DB 기준):**
|
||||
- company *: TEXT INPUT (text)
|
||||
- COMPANY_18~21, 7~9: SELECT (category)
|
||||
- **실제:** TEXT INPUT 또는 SELECT 중 어느 쪽인지 확인
|
||||
|
||||
### 4. 스크린샷
|
||||
- 구분, 단위 필드가 함께 보이도록 캡처
|
||||
|
||||
---
|
||||
|
||||
## 코드 흐름 (input_type → 렌더링)
|
||||
|
||||
### 1. 컬럼 메타 로드
|
||||
```
|
||||
DynamicComponentRenderer
|
||||
→ loadColumnMeta(screenTableName)
|
||||
→ GET /api/table-management/tables/item_info/columns?size=1000
|
||||
→ columnMetaCache[tableName][columnName] = { inputType, ... }
|
||||
```
|
||||
|
||||
### 2. 렌더 타입 결정 (357~369행)
|
||||
```javascript
|
||||
const dbInputType = columnMetaCache[screenTableName]?.[baseCol]?.inputType;
|
||||
const ft = dbInputType || componentConfig?.fieldType;
|
||||
|
||||
if (["text", "number", ...].includes(ft)) return "v2-input"; // 텍스트 입력
|
||||
if (["select", "category", "entity"].includes(ft)) return "v2-select"; // 드롭다운
|
||||
```
|
||||
|
||||
### 3. mergeColumnMeta (81~130행)
|
||||
- DB `input_type`이 화면 저장값보다 우선
|
||||
- `needsSync`이면 DB 값으로 덮어씀
|
||||
|
||||
---
|
||||
|
||||
## 캐시 관련
|
||||
|
||||
### 1. 프론트엔드 (DynamicComponentRenderer)
|
||||
- `columnMetaCache`: TTL 5초
|
||||
- `table-columns-refresh` 이벤트 시 즉시 무효화 및 재로드
|
||||
|
||||
### 2. 백엔드 (tableManagementService)
|
||||
- 컬럼 목록: 5분 TTL
|
||||
- `updateColumnInputType` 호출 시 해당 테이블 캐시 삭제
|
||||
|
||||
### 3. 캐시 무효화가 필요한 경우
|
||||
- 데이터 타입 관리에서 변경 후 화면이 갱신되지 않을 때
|
||||
- **대응:** 페이지 새로고침 또는 `?_t=timestamp`로 API 재요청
|
||||
|
||||
---
|
||||
|
||||
## 가능한 원인
|
||||
|
||||
### 1. 회사 코드 불일치
|
||||
- 로그인한 사용자 회사와 DB의 `company_code`가 다를 수 있음
|
||||
- `wace`는 `company_code = '*'` → division은 category, unit은 text
|
||||
|
||||
### 2. 화면 레이아웃에 저장된 값
|
||||
- `componentConfig.fieldType`이 있으면 DB보다 우선될 수 있음
|
||||
- 코드상으로는 `dbInputType`이 우선이므로, DB가 제대로 로드되면 덮어씀
|
||||
|
||||
### 3. 캐시
|
||||
- 백엔드 5분, 프론트 5초
|
||||
- 데이터 타입 변경 후 곧바로 화면을 열면 이전 캐시가 사용될 수 있음
|
||||
|
||||
### 4. API 응답 구조
|
||||
- `columnMetaCache`에 넣을 때 `col.column_name || col.columnName` 사용
|
||||
- `mergeColumnMeta`는 `meta.input_type || meta.inputType` 사용
|
||||
- 백엔드는 `inputType`(camelCase) 반환 → `columnMetaCache`에 `inputType` 유지
|
||||
|
||||
---
|
||||
|
||||
## 디버깅용 Console 스크립트
|
||||
|
||||
화면 149 로드 후 브라우저 Console에서 실행:
|
||||
|
||||
```javascript
|
||||
// 1. columnMetaCache 조회 (DynamicComponentRenderer 내부)
|
||||
// React DevTools로 DynamicComponentRenderer 선택 후
|
||||
// 또는 전역에 노출해 둔 경우:
|
||||
const meta = window.__COLUMN_META_CACHE__?.item_info;
|
||||
if (meta) {
|
||||
console.log("division:", meta.division?.inputType || meta.division?.input_type);
|
||||
console.log("unit:", meta.unit?.inputType || meta.unit?.input_type);
|
||||
}
|
||||
|
||||
// 2. API 직접 호출
|
||||
fetch("/api/table-management/tables/item_info/columns?size=1000", {
|
||||
credentials: "include"
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
const cols = d.data?.columns || d.columns || [];
|
||||
const div = cols.find(c => (c.columnName || c.column_name) === "division");
|
||||
const unit = cols.find(c => (c.columnName || c.column_name) === "unit");
|
||||
console.log("API division:", div?.inputType || div?.input_type);
|
||||
console.log("API unit:", unit?.inputType || unit?.input_type);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 권장 사항
|
||||
|
||||
1. **회사 코드 확인**
|
||||
- 로그인한 사용자의 `company_code` 확인
|
||||
- `division`/`unit`을 text/category로 바꾼 회사가 맞는지 확인
|
||||
|
||||
2. **캐시 우회**
|
||||
- 데이터 타입 변경 후 페이지 새로고침
|
||||
- 또는 5초 이상 대기 후 다시 접속
|
||||
|
||||
3. **데이터 타입 관리에서 변경 시**
|
||||
- 저장 후 `table-columns-refresh` 이벤트 발생 여부 확인
|
||||
- 화면 디자이너의 V2FieldConfigPanel에서 변경 시에는 이벤트가 발생함
|
||||
|
||||
4. **테이블 관리 UI에서 변경 시**
|
||||
- `table-columns-refresh` 이벤트가 발생하는지 확인
|
||||
- 없으면 해당 화면에서 수동으로 `window.dispatchEvent(new CustomEvent("table-columns-refresh"))` 호출 후 재검증
|
||||
Reference in New Issue
Block a user