172 lines
6.0 KiB
Markdown
172 lines
6.0 KiB
Markdown
# BTN - 버튼 UI 스타일 기준정보
|
|
|
|
## 1. 스타일 기준
|
|
|
|
### 공통 스타일
|
|
|
|
| 항목 | 값 |
|
|
|---|---|
|
|
| 높이 | 40px |
|
|
| 표시모드 | 아이콘 + 텍스트 (icon-text) |
|
|
| 아이콘 | 액션별 첫 번째 기본 아이콘 (자동 선택) |
|
|
| 아이콘 크기 비율 | 보통 |
|
|
| 아이콘-텍스트 간격 | 6px |
|
|
| 텍스트 위치 | 오른쪽 (아이콘 왼쪽, 텍스트 오른쪽) |
|
|
| 테두리 모서리 | 8px |
|
|
| 테두리 색상/두께 | 없음 (투명, borderWidth: 0) |
|
|
| 텍스트 색상 | #FFFFFF (흰색) |
|
|
| 텍스트 크기 | 12px |
|
|
| 텍스트 굵기 | normal (보통) |
|
|
| 텍스트 정렬 | 왼쪽 |
|
|
|
|
### 배경색 (액션별)
|
|
|
|
| 액션 타입 | 배경색 | 비고 |
|
|
|---|---|---|
|
|
| `delete` | `#F04544` | 빨간색 |
|
|
| `excel_download`, `excel_upload`, `multi_table_excel_upload` | `#212121` | 검정색 |
|
|
| 그 외 모든 액션 | `#3B83F6` | 파란색 (기본값) |
|
|
|
|
배경색은 디자이너에서 액션을 변경하면 자동으로 바뀐다.
|
|
|
|
### 너비 (텍스트 글자수별)
|
|
|
|
| 글자수 | 너비 |
|
|
|---|---|
|
|
| 6글자 이하 | 140px |
|
|
| 7글자 이상 | 160px |
|
|
|
|
### 액션별 기본 아이콘
|
|
|
|
디자이너에서 표시모드를 "아이콘" 또는 "아이콘+텍스트"로 변경하면 액션에 맞는 첫 번째 아이콘이 자동 선택된다.
|
|
|
|
소스: `frontend/lib/button-icon-map.tsx` > `actionIconMap`
|
|
|
|
| action.type | 기본 아이콘 |
|
|
|---|---|
|
|
| `save` | Check |
|
|
| `delete` | Trash2 |
|
|
| `edit` | Pencil |
|
|
| `navigate` | ArrowRight |
|
|
| `modal` | Maximize2 |
|
|
| `transferData` | SendHorizontal |
|
|
| `excel_download` | Download |
|
|
| `excel_upload` | Upload |
|
|
| `quickInsert` | Zap |
|
|
| `control` | Settings |
|
|
| `barcode_scan` | ScanLine |
|
|
| `operation_control` | Truck |
|
|
| `event` | Send |
|
|
| `copy` | Copy |
|
|
| (그 외/없음) | SquareMousePointer |
|
|
|
|
---
|
|
|
|
## 2. 코드 반영 현황
|
|
|
|
### 컴포넌트 기본값 (신규 버튼 생성 시 적용)
|
|
|
|
| 파일 | 내용 |
|
|
|---|---|
|
|
| `frontend/lib/registry/components/v2-button-primary/index.ts` | defaultConfig, defaultSize (140x40) |
|
|
| `frontend/lib/registry/components/v2-button-primary/config.ts` | ButtonPrimaryDefaultConfig |
|
|
|
|
### 액션 변경 시 배경색 자동 변경
|
|
|
|
| 파일 | 내용 |
|
|
|---|---|
|
|
| `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 액션 변경 시 배경색/텍스트색 자동 설정 |
|
|
|
|
### 렌더링 배경색 우선순위
|
|
|
|
| 파일 | 내용 |
|
|
|---|---|
|
|
| `frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx` | 배경색 결정 우선순위 개선 |
|
|
|
|
배경색 결정 순서:
|
|
1. `webTypeConfig.backgroundColor`
|
|
2. `componentConfig.backgroundColor`
|
|
3. `component.style.backgroundColor`
|
|
4. `componentConfig.style.backgroundColor`
|
|
5. `component.style.labelColor` (레거시 호환)
|
|
6. 액션별 기본 배경색 (`#F04544` / `#212121` / `#3B83F6`)
|
|
|
|
### 미반영 (추후 작업)
|
|
|
|
- split-panel 내부 버튼의 코드 기본값 (split-panel 컴포넌트가 자체 생성하는 버튼)
|
|
|
|
---
|
|
|
|
## 3. DB 데이터 매핑 (layout_data JSON)
|
|
|
|
버튼은 `layout_data.components[]` 배열 안에 `url`이 `v2-button-primary`인 컴포넌트로 저장된다.
|
|
|
|
| 항목 | JSON 위치 | 값 |
|
|
|---|---|---|
|
|
| 높이 | `size.height` | `40` |
|
|
| 너비 | `size.width` | `140` 또는 `160` |
|
|
| 표시모드 | `overrides.displayMode` | `"icon-text"` |
|
|
| 아이콘 이름 | `overrides.icon.name` | 액션별 영문 이름 |
|
|
| 아이콘 타입 | `overrides.icon.type` | `"lucide"` |
|
|
| 아이콘 크기 | `overrides.icon.size` | `"보통"` |
|
|
| 텍스트 위치 | `overrides.iconTextPosition` | `"right"` |
|
|
| 아이콘-텍스트 간격 | `overrides.iconGap` | `6` |
|
|
| 테두리 모서리 | `overrides.style.borderRadius` | `"8px"` |
|
|
| 텍스트 색상 | `overrides.style.labelColor` | `"#FFFFFF"` |
|
|
| 텍스트 크기 | `overrides.style.fontSize` | `"12px"` |
|
|
| 텍스트 굵기 | `overrides.style.fontWeight` | `"normal"` |
|
|
| 텍스트 정렬 | `overrides.style.labelTextAlign` | `"left"` |
|
|
| 배경색 | `overrides.style.backgroundColor` | 액션별 색상 |
|
|
|
|
버튼이 위치하는 구조별 경로:
|
|
- 일반 버튼: `layout_data.components[]`
|
|
- 탭 위젯 내부: `layout_data.components[].overrides.tabs[].components[]`
|
|
- split-panel 내부: `layout_data.components[].overrides.rightPanel.components[]`
|
|
|
|
---
|
|
|
|
## 4. 탑씰(COMPANY_7) 일괄 변경 작업 기록
|
|
|
|
### 대상
|
|
- **회사**: 탑씰 (company_code = 'COMPANY_7')
|
|
- **테이블**: screen_layouts_v2 (배포서버)
|
|
- **스크립트**: `backend-node/scripts/btn-bulk-update-company7.ts`
|
|
- **백업 테이블**: `screen_layouts_v2_backup_company7`
|
|
|
|
### 작업 이력
|
|
|
|
| 날짜 | 작업 내용 | 비고 |
|
|
|---|---|---|
|
|
| 2026-03-13 | 백업 테이블 생성 | |
|
|
| 2026-03-13 | 전체 버튼 공통 스타일 일괄 적용 | 높이, 아이콘, 텍스트 스타일, 배경색, 모서리 |
|
|
| 2026-03-13 | 탭 위젯 내부 버튼 스타일 보정 | componentConfig + root style 양쪽 적용 |
|
|
| 2026-03-13 | fontWeight "400" → "normal" 보정 | |
|
|
| 2026-03-13 | overrides.style.width 제거 | size.width와 충돌 방지 |
|
|
| 2026-03-13 | save 액션 55개에 "저장" 텍스트 명시 | |
|
|
| 2026-03-13 | "엑셀다운로드" → "Excel" 텍스트 통일 | |
|
|
| 2026-03-13 | Excel 버튼 배경색 #212121 통일 | |
|
|
| 2026-03-13 | 전체 버튼 너비 140px 통일 | |
|
|
| 2026-03-13 | 7글자 이상 버튼 너비 160px 재조정 | |
|
|
| 2026-03-13 | split-panel 내부 버튼 스타일 적용 | BOM관리 등 7개 버튼 |
|
|
|
|
### 스킵 항목
|
|
- `transferData` 액션의 텍스트 없는 버튼 1개 (screen=5976)
|
|
|
|
### 알려진 이슈
|
|
- **반응형 너비 불일치**: 디자이너에서 설정한 `size.width`가 실제 화면(`ResponsiveGridRenderer`)에서 반영되지 않을 수 있음. 버튼 wrapper에 `width` 속성이 누락되어 flex shrink-to-fit 동작으로 너비가 줄어드는 현상. 세로(height)는 정상 반영됨.
|
|
|
|
### 원복 (필요 시)
|
|
|
|
```sql
|
|
UPDATE screen_layouts_v2 AS target
|
|
SET layout_data = backup.layout_data
|
|
FROM screen_layouts_v2_backup_company7 AS backup
|
|
WHERE target.layout_id = backup.layout_id;
|
|
```
|
|
|
|
### 백업 테이블 정리
|
|
|
|
```sql
|
|
DROP TABLE screen_layouts_v2_backup_company7;
|
|
```
|