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 |
배경색 결정 우선순위 개선 |
배경색 결정 순서:
webTypeConfig.backgroundColorcomponentConfig.backgroundColorcomponent.style.backgroundColorcomponentConfig.style.backgroundColorcomponent.style.labelColor (레거시 호환)- 액션별 기본 배경색 (
#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)는 정상 반영됨.
원복 (필요 시)
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;
백업 테이블 정리
DROP TABLE screen_layouts_v2_backup_company7;