feat: Implement button iconization feature for screen designer
- Added a comprehensive plan for expanding button display modes in the screen designer, allowing for text, icon, and icon+text modes. - Introduced a new `ButtonIconRenderer` component to handle dynamic rendering of buttons based on selected display modes and actions. - Enhanced the `ButtonConfigPanel` to include UI for selecting display modes and managing icon settings, including size, color, and position. - Implemented functionality for custom icon addition via lucide search and SVG paste, ensuring flexibility for users. - Updated relevant components to utilize the new button rendering logic, improving the overall user experience and visual consistency. Made-with: Cursor
This commit is contained in:
syc0123
parent
a0cf9db6e8
commit
6ceed2acd0
|
|
@ -0,0 +1,340 @@
|
|||
# [계획서] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장
|
||||
|
||||
> 관련 문서: [맥락노트](./BIC[맥락]-버튼-아이콘화.md) | [체크리스트](./BIC[체크]-버튼-아이콘화.md)
|
||||
|
||||
## 개요
|
||||
|
||||
화면 디자이너에서 버튼을 텍스트 모드(현행), 아이콘 모드, 아이콘+텍스트 모드 중 선택할 수 있도록 확장한다.
|
||||
아이콘 모드 선택 시 버튼 액션에 맞는 아이콘 후보군이 제시되고, 관리자가 원하는 아이콘을 선택한다.
|
||||
아이콘 크기 비율(버튼 높이 대비 4단계 프리셋), 아이콘 색상, 텍스트 위치(4방향), 아이콘-텍스트 간격 설정을 제공한다.
|
||||
관리자가 lucide 검색 또는 외부 SVG 붙여넣기로 커스텀 아이콘을 추가/삭제할 수 있다.
|
||||
|
||||
---
|
||||
|
||||
## 현재 동작
|
||||
|
||||
- 버튼은 항상 **텍스트 모드**로만 표시됨
|
||||
- `ButtonConfigPanel.tsx`에서 "버튼 텍스트" 입력 → 실제 화면에서 해당 텍스트가 버튼에 표시
|
||||
- 아이콘 표시 기능 없음
|
||||
|
||||
### 현재 코드 위치
|
||||
|
||||
| 구분 | 파일 | 설명 |
|
||||
|------|------|------|
|
||||
| 설정 패널 | `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 버튼 텍스트, 액션 설정 (784~854행) |
|
||||
| 뷰어 렌더링 | `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | 실제 버튼 렌더링 (961~983행) |
|
||||
| 뷰어 렌더링 | `frontend/components/screen/InteractiveScreenViewer.tsx` | 실제 버튼 렌더링 (2041~2059행) |
|
||||
| 위젯 렌더링 | `frontend/components/screen/widgets/types/ButtonWidget.tsx` | 위젯 기반 버튼 렌더링 (67~86행) |
|
||||
| 최적화 컴포넌트 | `frontend/components/screen/OptimizedButtonComponent.tsx` | 최적화된 버튼 컴포넌트 (643~674행) |
|
||||
|
||||
---
|
||||
|
||||
## 변경 후 동작
|
||||
|
||||
### 1. 표시 모드 선택 (라디오 그룹)
|
||||
|
||||
ButtonConfigPanel에 "버튼 텍스트" 입력 위에 표시 모드 선택 UI 추가:
|
||||
|
||||
- **텍스트 모드** (기본값, 현행 유지): 버튼에 텍스트만 표시
|
||||
- **아이콘 모드**: 버튼에 아이콘만 표시
|
||||
- **아이콘+텍스트 모드**: 버튼에 아이콘과 텍스트를 함께 표시
|
||||
|
||||
```
|
||||
[ 텍스트 | 아이콘 | 아이콘+텍스트 ] ← 라디오 그룹 (토글 형태)
|
||||
```
|
||||
|
||||
### 2. 텍스트 모드 선택 시
|
||||
|
||||
- 현재와 동일하게 "버튼 텍스트" 입력 필드 표시
|
||||
- 변경 사항 없음
|
||||
|
||||
### 2-1. 아이콘+텍스트 모드 선택 시
|
||||
|
||||
- 아이콘 선택 UI (3장과 동일) + 버튼 텍스트 입력 필드 **둘 다 표시**
|
||||
- 렌더링: 텍스트 위치에 따라 아이콘과 텍스트 배치 방향이 달라짐
|
||||
- 텍스트 위치 4방향: 오른쪽(기본), 왼쪽, 위쪽, 아래쪽
|
||||
- 예시: `[ ✓ 저장 ]` (오른쪽), `[ 저장 ✓ ]` (왼쪽), 세로 배치 (위쪽/아래쪽)
|
||||
- 아이콘과 텍스트 사이 간격: 기본 6px, 관리자가 0~무제한 조절 가능 (슬라이더 0~32px + 직접 입력)
|
||||
|
||||
### 3. 아이콘 모드 선택 시
|
||||
|
||||
#### 3-1. 버튼 액션별 추천 아이콘 목록
|
||||
|
||||
버튼 액션(`action.type`)에 따라 해당 액션에 어울리는 아이콘 후보군을 그리드로 표시:
|
||||
|
||||
| 버튼 액션 | 값 | 추천 아이콘 (lucide-react) |
|
||||
|-----------|-----|---------------------------|
|
||||
| 저장 | `save` | Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck |
|
||||
| 삭제 | `delete` | Trash2, Trash, XCircle, X, Eraser, CircleX |
|
||||
| 편집 | `edit` | Pencil, PenLine, Edit, SquarePen, FilePen, PenTool |
|
||||
| 페이지 이동 | `navigate` | ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link |
|
||||
| 모달 열기 | `modal` | Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen |
|
||||
| 데이터 전달 | `transferData` | SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2 |
|
||||
| 엑셀 다운로드 | `excel_download` | Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput |
|
||||
| 엑셀 업로드 | `excel_upload` | Upload, FileUp, FileSpreadsheet, Sheet, ImportIcon, FileInput |
|
||||
| 즉시 저장 | `quickInsert` | Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus |
|
||||
| 제어 흐름 | `control` | Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Cog |
|
||||
| 바코드 스캔 | `barcode_scan` | ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus |
|
||||
| 운행알림 및 종료 | `operation_control` | Truck, Car, MapPin, Navigation2, Route, Bell |
|
||||
| 이벤트 발송 | `event` | Send, Bell, Radio, Megaphone, Podcast, BellRing |
|
||||
| 복사 | `copy` | Copy, ClipboardCopy, Files, CopyPlus, Duplicate, ClipboardList |
|
||||
|
||||
**적절한 아이콘이 없는 액션 (숨김 처리된 deprecated 액션들):**
|
||||
|
||||
| 버튼 액션 | 값 | 안내 문구 |
|
||||
|-----------|-----|----------|
|
||||
| 연관 데이터 버튼 모달 열기 | `openRelatedModal` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
|
||||
| (deprecated) 데이터 전달 + 모달 | `openModalWithData` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
|
||||
| 테이블 이력 보기 | `view_table_history` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
|
||||
| 코드 병합 | `code_merge` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
|
||||
| 공차등록 | `empty_vehicle` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
|
||||
|
||||
> 안내 문구: "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요."
|
||||
> 안내 문구 아래에 커스텀 아이콘 목록 + lucide 검색/SVG 붙여넣기 버튼이 표시됨
|
||||
|
||||
#### 3-2. 아이콘 선택 UI
|
||||
|
||||
- 액션별 추천 아이콘을 4~6열 그리드로 표시
|
||||
- 각 아이콘은 32x32 크기, 호버 시 하이라이트, 선택 시 ring 표시
|
||||
- 아이콘 아래에 이름 표시 (`text-[10px]`)
|
||||
- 관리자가 추가한 커스텀 아이콘이 있으면 "커스텀 아이콘" 구분선 아래 함께 표시
|
||||
|
||||
#### 3-3. 아이콘 크기 비율 설정
|
||||
|
||||
버튼 높이 대비 비율로 아이콘 크기를 설정 (정사각형 유지):
|
||||
|
||||
**프리셋 (ToggleGroup, 4단계):**
|
||||
|
||||
| 이름 | 버튼 높이 대비 | 설명 |
|
||||
|------|--------------|------|
|
||||
| 작게 | 40% | 컴팩트한 아이콘 |
|
||||
| 보통 | 55% | 기본값, 대부분의 버튼에 적합 |
|
||||
| 크게 | 70% | 존재감 있는 크기 |
|
||||
| 매우 크게 | 85% | 아이콘 강조, 버튼에 꽉 차는 느낌 |
|
||||
|
||||
- px 직접 입력은 제거 (비율 기반이므로 버튼 크기 변경 시 아이콘도 자동 비례)
|
||||
- 저장: `icon.size`에 프리셋 문자열(`"보통"`) 저장
|
||||
- 렌더링: `height: N%` + `aspect-ratio: 1/1`로 정사각형 유지
|
||||
|
||||
#### 3-4. 아이콘 색상 설정
|
||||
|
||||
아이콘 크기 아래에 아이콘 전용 색상 설정:
|
||||
|
||||
- **컬러 피커**: 기존 버튼 색상 설정과 동일한 UI 사용
|
||||
- **기본값**: 미설정 (= `textColor` 상속, 기존 동작과 동일)
|
||||
- **설정 시**: lucide 아이콘은 지정한 색상으로 덮어쓰기
|
||||
- **외부 SVG**: 고유 색상이 하드코딩된 SVG는 이 설정의 영향을 받지 않음 (원본 유지)
|
||||
- **초기화 버튼**: "텍스트 색상과 동일" 버튼으로 별도 색상 해제 가능
|
||||
|
||||
| 상황 | iconColor 설정 | 결과 |
|
||||
|------|---------------|------|
|
||||
| lucide 아이콘, iconColor 미설정 | 없음 | textColor 상속 (기존 동작) |
|
||||
| lucide 아이콘, iconColor 설정 | `#22c55e` | 초록색 아이콘 |
|
||||
| 외부 SVG (고유 색상), iconColor 설정 | `#22c55e` | SVG 원본 색상 유지 (무시) |
|
||||
| 외부 SVG (currentColor), iconColor 설정 | `#22c55e` | 초록색 아이콘 |
|
||||
|
||||
#### 3-5. 텍스트 위치 설정 (아이콘+텍스트 모드 전용)
|
||||
|
||||
아이콘 대비 텍스트의 배치 방향을 4방향으로 설정:
|
||||
|
||||
| 위치 | 값 | 레이아웃 | 설명 |
|
||||
|------|-----|---------|------|
|
||||
| 왼쪽 | `left` | `텍스트 ← 아이콘` | 텍스트가 아이콘 왼쪽 (가로) |
|
||||
| 오른쪽 | `right` | `아이콘 → 텍스트` | 기본값, 아이콘 뒤에 텍스트 (가로) |
|
||||
| 위쪽 | `top` | 텍스트 위, 아이콘 아래 | 세로 배치 |
|
||||
| 아래쪽 | `bottom` | 아이콘 위, 텍스트 아래 | 세로 배치 |
|
||||
|
||||
- 기본값: `"right"` (아이콘 오른쪽에 텍스트)
|
||||
- 저장: `componentConfig.iconTextPosition`
|
||||
- 아이콘 모드에서는 이 옵션이 숨겨짐 (텍스트가 없으므로 불필요)
|
||||
|
||||
#### 3-6. 아이콘-텍스트 간격 설정 (아이콘+텍스트 모드 전용)
|
||||
|
||||
아이콘+텍스트 모드에서 아이콘과 텍스트 사이 간격을 조절:
|
||||
|
||||
- **슬라이더**: 0~32px 범위 시각적 조절
|
||||
- **직접 입력**: px 수치 직접 입력 (최솟값 0, 최댓값 제한 없음)
|
||||
- **기본값**: 6px
|
||||
- 아이콘 모드에서는 이 옵션이 숨겨짐 (텍스트가 없으므로 불필요)
|
||||
|
||||
#### 3-7. 아이콘 모드 레이아웃 안내
|
||||
|
||||
아이콘만 표시하면 텍스트보다 좁은 공간으로 충분하므로 안내 문구 표시:
|
||||
|
||||
```
|
||||
ℹ 아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.
|
||||
```
|
||||
|
||||
- `bg-blue-50 dark:bg-blue-950/20` 배경의 안내 박스
|
||||
- 아이콘 모드(`"icon"`)에서만 표시, 아이콘+텍스트 모드에서는 숨김
|
||||
|
||||
#### 3-8. 디폴트 아이콘 자동 부여
|
||||
|
||||
아이콘/아이콘+텍스트 모드 전환 시 아이콘이 미선택 상태이면 **디폴트 아이콘을 자동으로 부여**한다.
|
||||
|
||||
| 상황 | 디폴트 아이콘 |
|
||||
|------|-------------|
|
||||
| 추천 아이콘이 있는 액션 (save, delete 등) | 해당 액션의 **첫 번째 추천 아이콘** (예: save → Check) |
|
||||
| 추천 아이콘이 없는 액션 (deprecated 등) | 범용 폴백 아이콘: `SquareMousePointer` |
|
||||
|
||||
**커스텀 아이콘 삭제 시:**
|
||||
- 현재 선택된 커스텀 아이콘을 삭제하면 **디폴트 아이콘으로 자동 복귀** (텍스트 모드로 빠지지 않음)
|
||||
- 아이콘 모드를 유지한 채 디폴트 아이콘이 캔버스에 즉시 반영됨
|
||||
|
||||
#### 3-9. 커스텀 아이콘 추가/삭제
|
||||
|
||||
**방법 1: lucide 아이콘 검색으로 추가**
|
||||
- "아이콘 추가" 버튼 클릭 시 lucide 아이콘 전체 검색 가능한 모달/팝오버 표시
|
||||
- 검색 입력 → 아이콘 이름으로 필터링 → 선택하면 커스텀 목록에 추가
|
||||
|
||||
**방법 2: 외부 SVG 붙여넣기로 추가**
|
||||
- "SVG 붙여넣기" 버튼 클릭 시 텍스트 입력 영역(textarea) 표시
|
||||
- 외부에서 복사한 SVG 코드를 붙여넣기 → 미리보기로 확인 → "추가" 버튼으로 등록
|
||||
- SVG 유효성 검사: `<svg` 태그가 포함된 올바른 SVG인지 확인, 아니면 에러 메시지
|
||||
- 추가 시 관리자가 아이콘 이름을 직접 입력 (목록에서 구분용)
|
||||
- 저장 형태: SVG 문자열을 `customSvgIcons` 배열에 `{ name, svg }` 객체로 저장
|
||||
|
||||
**공통 규칙:**
|
||||
- 추가된 커스텀 아이콘(lucide/SVG 모두)은 **모든 버튼 액션의 아이콘 후보에 공통으로 노출**
|
||||
- 커스텀 아이콘에 X 버튼으로 삭제 가능
|
||||
|
||||
---
|
||||
|
||||
## 데이터 구조
|
||||
|
||||
### componentConfig 확장
|
||||
|
||||
```typescript
|
||||
interface ButtonComponentConfig {
|
||||
text: string; // 기존: 버튼 텍스트
|
||||
displayMode: "text" | "icon" | "icon-text"; // 신규: 표시 모드 (기본값: "text")
|
||||
icon?: {
|
||||
name: string; // lucide 아이콘 이름 또는 커스텀 SVG 아이콘 이름
|
||||
type: "lucide" | "svg"; // 아이콘 출처 구분 (기본값: "lucide")
|
||||
size: "작게" | "보통" | "크게" | "매우 크게"; // 버튼 높이 대비 비율 프리셋 (기본값: "보통")
|
||||
color?: string; // 아이콘 색상 (미설정 시 textColor 상속)
|
||||
};
|
||||
iconGap?: number; // 아이콘-텍스트 간격 px (기본값: 6, 아이콘+텍스트 모드 전용)
|
||||
iconTextPosition?: "right" | "left" | "top" | "bottom"; // 텍스트 위치 (기본값: "right", 아이콘+텍스트 모드 전용)
|
||||
customIcons?: string[]; // 관리자가 추가한 lucide 커스텀 아이콘 이름 목록
|
||||
customSvgIcons?: Array<{ // 관리자가 붙여넣기한 외부 SVG 아이콘 목록
|
||||
name: string; // 관리자가 지정한 아이콘 이름
|
||||
svg: string; // SVG 문자열 원본
|
||||
}>;
|
||||
action: {
|
||||
type: string; // 기존: 버튼 액션 타입
|
||||
// ...기존 action 속성들 유지
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 저장 예시
|
||||
|
||||
```json
|
||||
{
|
||||
"text": "저장",
|
||||
"displayMode": "icon",
|
||||
"icon": {
|
||||
"name": "Check",
|
||||
"type": "lucide",
|
||||
"size": "보통",
|
||||
"color": "#22c55e"
|
||||
},
|
||||
"customIcons": ["Rocket", "Star"],
|
||||
"customSvgIcons": [
|
||||
{
|
||||
"name": "회사로고",
|
||||
"svg": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>...</svg>"
|
||||
}
|
||||
],
|
||||
"action": {
|
||||
"type": "save"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 시각적 동작 예시
|
||||
|
||||
### ButtonConfigPanel (디자이너 편집 모드)
|
||||
|
||||
```
|
||||
표시 모드: [ 텍스트 | (아이콘) | 아이콘+텍스트 ] ← 아이콘 선택됨
|
||||
|
||||
아이콘 선택:
|
||||
┌──────────────────────────────────┐
|
||||
│ 추천 아이콘 (저장) │
|
||||
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
||||
│ │ ✓ │ │ 💾 │ │ ✓○ │ │ ○✓ │ │
|
||||
│ │Check│ │Save│ │Chk○│ │○Chk│ │
|
||||
│ └────┘ └────┘ └────┘ └────┘ │
|
||||
│ ┌────┐ ┌────┐ │
|
||||
│ │📄✓│ │🛡✓│ │
|
||||
│ │FChk│ │ShCk│ │
|
||||
│ └────┘ └────┘ │
|
||||
│ │
|
||||
│ ── 커스텀 아이콘 ── │
|
||||
│ ┌────┐ ┌────┐ ┌────┐ │
|
||||
│ │ 🚀 │ │ ⭐ │ │[로고]│ │
|
||||
│ │Rckt │ │Star│ │회사 │ │
|
||||
│ │ ✕ │ │ ✕│ │ ✕ │ │
|
||||
│ └────┘ └────┘ └────┘ │
|
||||
│ [+ lucide 검색] [+ SVG 붙여넣기]│
|
||||
└──────────────────────────────────┘
|
||||
|
||||
아이콘 크기 비율: [ 작게 | (보통) | 크게 | 매우 크게 ]
|
||||
텍스트 위치: [ 왼쪽 | (오른쪽) | 위쪽 | 아래쪽 ] ← 아이콘+텍스트 모드에서만 표시
|
||||
아이콘-텍스트 간격: [━━━━━○━━] [6] px ← 아이콘+텍스트 모드에서만 표시
|
||||
아이콘 색상: [■ #22c55e] [텍스트 색상과 동일]
|
||||
|
||||
ℹ 아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.
|
||||
```
|
||||
|
||||
### 실제 화면 렌더링
|
||||
|
||||
| 모드 | 표시 |
|
||||
|------|------|
|
||||
| 텍스트 모드 | `[ 저장 ]` |
|
||||
| 아이콘 모드 (보통, 55%) | `[ ✓ ]` |
|
||||
| 아이콘 모드 (매우 크게, 85%) | `[ ✓ ]` |
|
||||
| 아이콘+텍스트 (텍스트 오른쪽) | `[ ✓ 저장 ]` (간격 6px) |
|
||||
| 아이콘+텍스트 (텍스트 왼쪽) | `[ 저장 ✓ ]` |
|
||||
| 아이콘+텍스트 (텍스트 아래쪽) | 아이콘 위, 텍스트 아래 (세로) |
|
||||
| 아이콘+텍스트 (색상 분리) | `[ 초록✓ 검정저장 ]` |
|
||||
|
||||
---
|
||||
|
||||
## 변경 대상
|
||||
|
||||
### 수정 파일
|
||||
|
||||
| 파일 | 변경 내용 |
|
||||
|------|----------|
|
||||
| `ButtonConfigPanel.tsx` | 표시 모드 3종 라디오, 아이콘 그리드, 크기, 색상, 간격 설정, 레이아웃 안내, 커스텀 아이콘 UI |
|
||||
| `InteractiveScreenViewerDynamic.tsx` | `displayMode` 3종 분기 → 아이콘/아이콘+텍스트/텍스트 렌더링 |
|
||||
| `InteractiveScreenViewer.tsx` | 동일 분기 추가 |
|
||||
| `ButtonWidget.tsx` | 동일 분기 추가 |
|
||||
| `OptimizedButtonComponent.tsx` | 동일 분기 추가 |
|
||||
| `ScreenDesigner.tsx` | 입력 필드 포커스 시 키보드 단축키 기본 동작 허용 (Ctrl+A/C/V/Z) |
|
||||
| `RealtimePreviewDynamic.tsx` | 버튼 컴포넌트 position wrapper에서 border 속성 분리 (이중 테두리 방지) |
|
||||
|
||||
### 신규 파일
|
||||
|
||||
| 파일 | 내용 |
|
||||
|------|------|
|
||||
| `frontend/lib/button-icon-map.ts` | 버튼 액션별 추천 아이콘 매핑 + 아이콘 동적 렌더링 유틸 |
|
||||
|
||||
---
|
||||
|
||||
## 설계 원칙
|
||||
|
||||
- 기본값은 `"text"` 모드 → 기존 모든 버튼은 변경 없이 동작
|
||||
- `displayMode`가 없거나 `"text"`이면 현행 텍스트 렌더링 유지
|
||||
- 아이콘/아이콘+텍스트 모드 전환 시 아이콘 미선택이면 **디폴트 아이콘 자동 부여** (빈 상태 방지)
|
||||
- 커스텀 아이콘 삭제 시 텍스트 모드로 빠지지 않고 **디폴트 아이콘으로 자동 복귀**
|
||||
- 아이콘 모드에서도 `text` 값은 유지 (접근성 aria-label로 활용)
|
||||
- 기본 아이콘은 lucide-react 사용 (프로젝트 일관성)
|
||||
- 외부 SVG 붙여넣기도 지원 → 관리자가 회사 로고 등 자체 아이콘을 등록 가능
|
||||
- lucide 커스텀 아이콘은 `componentConfig.customIcons`에, SVG 아이콘은 `componentConfig.customSvgIcons`에 저장
|
||||
- lucide 아이콘 렌더링: 아이콘 이름 → 컴포넌트 매핑, SVG 아이콘 렌더링: `dangerouslySetInnerHTML` + DOMPurify 정화
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
# [맥락노트] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장
|
||||
|
||||
> 관련 문서: [계획서](./BIC[계획]-버튼-아이콘화.md) | [체크리스트](./BIC[체크]-버튼-아이콘화.md)
|
||||
|
||||
---
|
||||
|
||||
## 왜 이 작업을 하는가
|
||||
|
||||
- 현재 모든 버튼은 텍스트로만 표시 → 버튼 영역이 넓어야 하고, 모바일/태블릿에서 공간 효율이 낮음
|
||||
- "저장", "삭제", "추가" 같은 자주 쓰는 버튼은 아이콘만으로 충분히 인식 가능
|
||||
- 관리자가 화면 레이아웃을 더 컴팩트하게 구성할 수 있도록 선택권 제공
|
||||
- 단, "출하 계획" 같이 아이콘화가 어려운 특수 버튼이 존재하므로 텍스트 모드도 반드시 유지
|
||||
|
||||
---
|
||||
|
||||
## 핵심 결정 사항과 근거
|
||||
|
||||
### 1. 표시 모드는 3종 라디오 그룹(토글 형태)으로 구현
|
||||
|
||||
- **결정**: `ToggleGroup` 형태의 세 개 옵션 (텍스트 / 아이콘 / 아이콘+텍스트)
|
||||
- **근거**: 세 모드는 상호 배타적. 아이콘+텍스트 병합 모드가 있어야 `[ + 추가 ]`, `[ 💾 저장 ]` 같은 실무 패턴을 지원. 아이콘만으로 의미 전달이 부족한 경우 텍스트를 병기하면 사용자 인식 속도가 빨라짐
|
||||
- **대안 검토**: Switch(토글) → 기각 ("무엇이 켜지는지" 직관적이지 않음, 3종 불가)
|
||||
|
||||
### 2. 기본값은 텍스트 모드
|
||||
|
||||
- **결정**: `displayMode` 기본값 = `"text"`
|
||||
- **근거**: 기존 모든 버튼은 텍스트로 동작 중. 아이콘 모드는 명시적으로 선택해야만 적용되어야 하위 호환성이 보장됨
|
||||
- **중요**: `displayMode`가 `undefined`이거나 `"text"`이면 현행 동작 그대로 유지
|
||||
|
||||
### 3. 아이콘은 버튼 액션(action.type)에 연동
|
||||
|
||||
- **결정**: 버튼 액션을 변경하면 해당 액션에 맞는 추천 아이콘 목록이 자동으로 갱신됨
|
||||
- **근거**: 관리자가 "저장" 아이콘을 고른 뒤 액션을 "삭제"로 바꾸면 혼란 발생. 액션별로 적절한 아이콘 후보를 보여주는 것이 자연스러움
|
||||
- **주의**: 액션 변경 시 이전에 선택한 아이콘이 새 액션의 추천 목록에 없으면 선택 초기화
|
||||
|
||||
### 4. 액션별 아이콘은 6개씩 제공, 적절한 아이콘이 없으면 안내 문구
|
||||
|
||||
- **결정**: 활성 액션 14개 각각에 6개의 lucide-react 아이콘 후보 제공
|
||||
- **근거**: 너무 적으면 선택지 부족, 너무 많으면 선택 피로. 6개가 2행 그리드로 깔끔하게 표시됨
|
||||
- **deprecated/숨김 액션**: UI에서 숨김 처리된 액션은 추천 아이콘 없이 안내 문구만 표시
|
||||
|
||||
### 5. 커스텀 아이콘 추가는 2가지 방법 제공
|
||||
|
||||
- **결정**: (1) lucide 아이콘 검색 + (2) 외부 SVG 붙여넣기 두 가지 경로 제공
|
||||
- **근거**: lucide 내장 아이콘만으로는 부족한 경우 존재 (회사 로고, 업종별 특수 아이콘 등). 외부에서 가져온 SVG를 직접 붙여넣기로 등록할 수 있어야 실무 유연성 확보
|
||||
- **lucide 추가**: "lucide 검색" 버튼 → 팝오버에서 검색 → 선택 → `customIcons` 배열에 이름 추가
|
||||
- **SVG 추가**: "SVG 붙여넣기" 버튼 → textarea에 SVG 코드 붙여넣기 → 미리보기 확인 → 이름 입력 → `customSvgIcons` 배열에 `{ name, svg }` 저장
|
||||
- **SVG 유효성**: `<svg` 태그 포함 여부로 기본 검증, XSS 방지를 위해 DOMPurify로 정화 후 저장
|
||||
- **범위**: 모든 커스텀 아이콘은 **해당 버튼 컴포넌트에 저장** (lucide: `customIcons`, SVG: `customSvgIcons`)
|
||||
- **노출**: 커스텀 아이콘(lucide/SVG 모두)은 어떤 버튼 액션에서도 추천 아이콘 아래에 함께 노출됨
|
||||
- **삭제**: 커스텀 아이콘 위에 X 버튼으로 개별 삭제 가능
|
||||
|
||||
### 5-1. 외부 SVG 붙여넣기의 보안 고려
|
||||
|
||||
- **결정**: SVG 문자열을 DOMPurify로 정화(sanitize)한 뒤 저장
|
||||
- **근거**: SVG에 `<script>`, `onload` 같은 악성 코드가 포함될 수 있으므로 XSS 방지 필수
|
||||
- **렌더링**: 정화된 SVG를 `dangerouslySetInnerHTML`로 렌더링 (정화 후이므로 안전)
|
||||
- **대안 검토**: SVG를 이미지 파일로 업로드 → 기각 (관리자 입장에서 복사-붙여넣기가 훨씬 간편)
|
||||
|
||||
### 6. 아이콘 색상은 별도 설정, 기본값은 textColor 상속
|
||||
|
||||
- **결정**: `icon.color` 옵션 추가. 미설정 시 `textColor`를 상속, 설정하면 아이콘만 해당 색상 적용
|
||||
- **근거**: 아이콘+텍스트 모드에서 `[ 초록✓ 검정저장 ]` 같이 아이콘과 텍스트 색을 분리하고 싶은 경우 존재. 삭제 버튼에 빨간 아이콘 + 흰 텍스트 같은 세밀한 디자인도 가능
|
||||
- **기본값**: 미설정 (= `textColor` 상속) → 설정하지 않으면 기존 동작과 100% 동일
|
||||
- **외부 SVG**: `fill`이 하드코딩된 SVG는 이 설정 무시 (SVG 원본 색상 유지가 의도). `currentColor`를 사용하는 SVG만 영향받음
|
||||
- **구현**: 아이콘을 `<span style={{ color: icon.color }}>`으로 감싸서 아이콘만 색상 분리
|
||||
- **초기화**: "텍스트 색상과 동일" 버튼으로 별도 색상 해제 → `icon.color` 삭제
|
||||
|
||||
### 7. 아이콘 크기는 버튼 높이 대비 비율(%) 프리셋 4단계
|
||||
|
||||
- **결정**: 작게(40%) / 보통(55%) / 크게(70%) / 매우 크게(85%) — 버튼 높이 대비 비율
|
||||
- **근거**: 절대 px 값은 버튼 크기가 바뀌면 비율이 깨짐. 비율 기반이면 버튼 크기를 조정해도 아이콘이 자동으로 비례하여 일관된 시각적 균형 유지
|
||||
- **기본값**: `"보통"` (55%) — 대부분의 버튼 크기에 적합
|
||||
- **px 직접 입력 제거**: 관리자에게 과도한 선택지를 주면 오히려 일관성이 깨짐. 4단계 프리셋만으로 충분
|
||||
- **구현**: CSS `height: N%` + `aspect-ratio: 1/1`로 정사각형 유지, lucide 아이콘은 래핑 span으로 크기 제어
|
||||
- **레거시 호환**: 기존 `"sm"`, `"md"` 등 레거시 값은 55%(보통)로 자동 폴백
|
||||
|
||||
### 8. 아이콘 동적 렌더링은 매핑 객체 방식
|
||||
|
||||
- **결정**: lucide-react 아이콘 이름(string) → 실제 컴포넌트 매핑 객체를 별도 파일로 관리
|
||||
- **근거**: `import * from 'lucide-react'`는 번들 크기에 영향. 사용하는 아이콘만 명시적으로 매핑
|
||||
- **파일**: `frontend/lib/button-icon-map.ts`
|
||||
- **구현**: `Record<string, React.ComponentType>` 형태의 매핑 + `renderIcon(name, size)` 유틸 함수
|
||||
|
||||
### 9. 아이콘 모드에서도 text 값은 유지
|
||||
|
||||
- **결정**: `displayMode === "icon"`이어도 `text` 필드는 삭제하지 않음
|
||||
- **근거**: 접근성(`aria-label`), 검색/필터링 등에 텍스트가 필요할 수 있음
|
||||
- **렌더링**: 아이콘 모드에서는 `text`를 `aria-label` 용도로만 보존
|
||||
- **아이콘+텍스트 모드**: `text`가 아이콘 오른쪽에 함께 렌더링됨
|
||||
|
||||
### 10. 아이콘-텍스트 간격 설정 추가
|
||||
|
||||
- **결정**: 아이콘+텍스트 모드에서 아이콘과 텍스트 사이 간격을 관리자가 조절 가능 (`iconGap`)
|
||||
- **근거**: 고정 `gap-1.5`(6px)로는 다양한 버튼 크기/디자인에 대응 불가. 간격이 좁으면 답답하고, 넓으면 분리되어 보이는 경우가 있어 관리자에게 조절 권한 제공
|
||||
- **기본값**: 6px (기존 `gap-1.5`와 동일)
|
||||
- **UI**: 슬라이더(0~32px) + 숫자 직접 입력(최댓값 제한 없음)
|
||||
- **저장**: `componentConfig.iconGap` (숫자)
|
||||
|
||||
### 11. 키보드 단축키 입력 필드 충돌 해결
|
||||
|
||||
- **결정**: `ScreenDesigner`의 글로벌 키보드 핸들러에서 입력 필드 포커스 시 앱 단축키를 무시하도록 수정
|
||||
- **근거**: SVG 붙여넣기 textarea에서 Ctrl+V/A/C/Z가 작동하지 않는 치명적 UX 문제 발견. 글로벌 `keydown` 핸들러가 `{ capture: true }`로 모든 키보드 이벤트를 가로채고 있었음
|
||||
- **수정**: `browserShortcuts` 일괄 차단과 앱 전용 단축키 처리 앞에 `e.target`/`document.activeElement` 기반 입력 필드 감지 가드 추가
|
||||
- **영향**: input, textarea, select, contentEditable 요소에서 텍스트 편집 단축키가 정상 동작
|
||||
|
||||
### 12. noIconAction에서 커스텀 아이콘 추가 허용
|
||||
|
||||
- **결정**: 추천 아이콘이 없는 deprecated 액션에서도 커스텀 아이콘(lucide 검색, SVG 붙여넣기) 추가 가능
|
||||
- **근거**: "적절한 아이콘이 없습니다" 문구만 표시하고 아이콘 추가를 완전 차단하면 관리자가 필요한 아이콘을 직접 등록할 방법이 없음. 추천은 없지만 직접 추가는 허용해야 유연성 확보
|
||||
- **안내 문구**: "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요."
|
||||
|
||||
### 13. 아이콘 모드 레이아웃 안내 문구
|
||||
|
||||
- **결정**: 아이콘 모드(`"icon"`) 선택 시 "버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다" 안내 표시
|
||||
- **근거**: 아이콘 자체는 항상 정사각형(24x24 viewBox)이지만, 디자이너에서 버튼 컨테이너는 가로로 넓은 직사각형이 기본. 아이콘만 넣으면 좌우 여백이 과다해 보이므로 버튼 영역을 줄이라는 안내가 필요. 자동 크기 조정은 기존 레이아웃을 깨뜨릴 위험이 있어 도입하지 않되, 관리자에게 팁을 제공하면 스스로 최적화할 수 있음
|
||||
- **표시 조건**: `displayMode === "icon"`일 때만 (아이콘+텍스트 모드는 가로 공간이 필요하므로 해당 안내 불필요)
|
||||
- **대안 검토**: 자동 정사각형 조정 → 기각 (관리자 수동 레이아웃 파괴 위험)
|
||||
|
||||
### 14. 디폴트 아이콘 자동 부여
|
||||
|
||||
- **결정**: 아이콘/아이콘+텍스트 모드 전환 시 아이콘이 미선택이면 디폴트 아이콘을 자동으로 부여. 커스텀 아이콘 삭제 시에도 텍스트 모드로 빠지지 않고 디폴트 아이콘으로 복귀
|
||||
- **근거**: 아이콘 모드로 전환했는데 아무것도 안 보이면 "기능이 작동하지 않는다"는 착각을 유발. 또한 커스텀 아이콘을 삭제했을 때 갑자기 텍스트로 빠지면 관리자가 의도치 않은 모드 변경을 경험하게 됨
|
||||
- **디폴트 선택 기준**: 해당 액션의 첫 번째 추천 아이콘 (예: save → Check). 추천 아이콘이 없는 액션은 범용 폴백 `SquareMousePointer` 사용
|
||||
- **구현**: `getDefaultIconForAction(actionType)` 유틸 함수로 중앙화 (`button-icon-map.tsx`)
|
||||
- **폴백 아이콘**: `SquareMousePointer` — 마우스 포인터 + 사각형 형태로 "버튼 클릭 동작"을 범용적으로 표현
|
||||
|
||||
### 15. 아이콘+텍스트 모드에서 텍스트 위치 4방향 지원
|
||||
|
||||
- **결정**: 아이콘 대비 텍스트 위치를 왼쪽/오른쪽/위쪽/아래쪽 4방향으로 설정 가능
|
||||
- **근거**: 기존에는 아이콘 오른쪽에 텍스트 고정이었으나, 세로 배치(위/아래)가 필요한 경우도 존재 (좁고 높은 버튼, 툴바 스타일). 4방향을 제공하면 관리자가 버튼 모양에 맞게 레이아웃 선택 가능
|
||||
- **기본값**: `"right"` (아이콘 오른쪽에 텍스트) — 가장 자연스러운 좌→우 읽기 방향
|
||||
- **구현**: `flexDirection` (row/column) + 요소 순서 (textFirst) 조합으로 4방향 구현
|
||||
- **저장**: `componentConfig.iconTextPosition`
|
||||
- **표시 조건**: 아이콘+텍스트 모드에서만 표시 (아이콘 모드, 텍스트 모드에서는 숨김)
|
||||
|
||||
### 16. 버튼 컴포넌트 테두리 이중 적용 문제 해결
|
||||
|
||||
- **결정**: `RealtimePreviewDynamic`의 position wrapper에서 버튼 컴포넌트의 border 속성을 분리(strip)
|
||||
- **근거**: StyleEditor에서 설정한 border가 (1) position wrapper와 (2) 내부 버튼 요소 두 곳에 모두 적용되어 이중 테두리 발생. border는 내부 버튼(`buttonElementStyle`)에서만 렌더링해야 함
|
||||
- **수정 파일**: `RealtimePreviewDynamic.tsx` — `isButtonComponent` 조건에 `v2-button-primary` 추가하여 border strip 대상에 포함
|
||||
- **수정 파일**: `ButtonPrimaryComponent.tsx` — 외부 wrapper(`componentStyle`)에서 border 속성 destructure로 제거, `border: "none"` shorthand 대신 개별 longhand 속성으로 변경 (borderStyle 미설정 시 기본 `"solid"` 적용)
|
||||
|
||||
### 17. 커스텀 아이콘 검색은 lucide 전체 목록 기반
|
||||
|
||||
- **결정**: lucide-react에서 export되는 전체 아이콘 이름 목록을 검색 가능
|
||||
- **근거**: 관리자가 "어떤 아이콘이 있는지" 모르므로 검색 기능이 필수
|
||||
- **구현**: lucide 아이콘 이름 배열을 상수로 관리하고, CommandInput으로 필터링
|
||||
- **주의**: 전체 아이콘 컴포넌트를 import하지 않고, 이름 배열만 관리 → 선택 시에만 해당 아이콘을 매핑에 추가
|
||||
|
||||
---
|
||||
|
||||
## 관련 파일 위치
|
||||
|
||||
| 구분 | 파일 경로 | 설명 |
|
||||
|------|----------|------|
|
||||
| 설정 패널 (수정) | `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 버튼 텍스트/액션 설정 (784~854행에 모드 선택 추가) |
|
||||
| 뷰어 렌더링 (수정) | `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | 버튼 렌더링 분기 (961~983행) |
|
||||
| 뷰어 렌더링 (수정) | `frontend/components/screen/InteractiveScreenViewer.tsx` | 버튼 렌더링 분기 (2041~2059행) |
|
||||
| 위젯 (수정) | `frontend/components/screen/widgets/types/ButtonWidget.tsx` | 위젯 기반 버튼 렌더링 (67~86행) |
|
||||
| 최적화 버튼 (수정) | `frontend/components/screen/OptimizedButtonComponent.tsx` | 최적화된 버튼 렌더링 (643~674행) |
|
||||
| 아이콘 매핑 (신규) | `frontend/lib/button-icon-map.ts` | 액션별 추천 아이콘 + 동적 렌더링 유틸 |
|
||||
| 타입 정의 (참고) | `frontend/types/screen.ts` | ComponentData, componentConfig 타입 |
|
||||
|
||||
---
|
||||
|
||||
## 기술 참고
|
||||
|
||||
### lucide-react 아이콘 동적 렌더링
|
||||
|
||||
```typescript
|
||||
// button-icon-map.ts
|
||||
import { Check, Save, Trash2, Pencil, ... } from "lucide-react";
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
Check, Save, Trash2, Pencil, ...
|
||||
};
|
||||
|
||||
export function renderButtonIcon(name: string, size: string | number) {
|
||||
const IconComponent = iconMap[name];
|
||||
if (!IconComponent) return null;
|
||||
return <IconComponent style={getIconSizeStyle(size)} />;
|
||||
}
|
||||
```
|
||||
|
||||
### 아이콘 크기 비율 매핑 (버튼 높이 대비 %)
|
||||
|
||||
```typescript
|
||||
const iconSizePresets: Record<string, number> = {
|
||||
"작게": 40,
|
||||
"보통": 55,
|
||||
"크게": 70,
|
||||
"매우 크게": 85,
|
||||
};
|
||||
|
||||
// 프리셋 문자열 → 비율(%) 반환. 레거시 값은 55(보통)로 폴백
|
||||
export function getIconPercent(size: string | number): number {
|
||||
if (typeof size === "number") return size;
|
||||
return iconSizePresets[size] ?? 55;
|
||||
}
|
||||
|
||||
// 버튼 높이 대비 비율 + 정사각형 유지
|
||||
export function getIconSizeStyle(size: string | number): React.CSSProperties {
|
||||
const pct = getIconPercent(size);
|
||||
return { height: `${pct}%`, width: "auto", aspectRatio: "1 / 1" };
|
||||
}
|
||||
```
|
||||
|
||||
### 외부 SVG 아이콘 렌더링
|
||||
|
||||
```typescript
|
||||
import DOMPurify from "dompurify";
|
||||
|
||||
export function renderSvgIcon(svgString: string, size: string | number) {
|
||||
const clean = DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } });
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center justify-center"
|
||||
style={getIconSizeStyle(size)}
|
||||
dangerouslySetInnerHTML={{ __html: clean }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 버튼 액션별 추천 아이콘 구조
|
||||
|
||||
```typescript
|
||||
const actionIconMap: Record<string, string[]> = {
|
||||
save: ["Check", "Save", "CheckCircle", "CircleCheck", "FileCheck", "ShieldCheck"],
|
||||
delete: ["Trash2", "Trash", "XCircle", "X", "Eraser", "CircleX"],
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### 현재 버튼 액션 목록 (활성)
|
||||
|
||||
| 값 | 표시명 | 아이콘화 가능 |
|
||||
|-----|--------|-------------|
|
||||
| `save` | 저장 | O |
|
||||
| `delete` | 삭제 | O |
|
||||
| `edit` | 편집 | O |
|
||||
| `navigate` | 페이지 이동 | O |
|
||||
| `modal` | 모달 열기 | O |
|
||||
| `transferData` | 데이터 전달 | O |
|
||||
| `excel_download` | 엑셀 다운로드 | O |
|
||||
| `excel_upload` | 엑셀 업로드 | O |
|
||||
| `quickInsert` | 즉시 저장 | O |
|
||||
| `control` | 제어 흐름 | O |
|
||||
| `barcode_scan` | 바코드 스캔 | O |
|
||||
| `operation_control` | 운행알림 및 종료 | O |
|
||||
| `event` | 이벤트 발송 | O |
|
||||
| `copy` | 복사 (품목코드 초기화) | O |
|
||||
|
||||
### 현재 버튼 액션 목록 (숨김/deprecated)
|
||||
|
||||
| 값 | 표시명 | 아이콘화 가능 |
|
||||
|-----|--------|-------------|
|
||||
| `openRelatedModal` | 연관 데이터 버튼 모달 열기 | X (적절한 아이콘 없음) |
|
||||
| `openModalWithData` | (deprecated) 데이터 전달 + 모달 | X |
|
||||
| `view_table_history` | 테이블 이력 보기 | X |
|
||||
| `code_merge` | 코드 병합 | X |
|
||||
| `empty_vehicle` | 공차등록 | X |
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
# [체크리스트] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장
|
||||
|
||||
> 관련 문서: [계획서](./BIC[계획]-버튼-아이콘화.md) | [맥락노트](./BIC[맥락]-버튼-아이콘화.md)
|
||||
|
||||
---
|
||||
|
||||
## 공정 상태
|
||||
|
||||
- 전체 진행률: **100%** (전 단계 구현 및 검증 완료)
|
||||
- 현재 단계: 완료
|
||||
|
||||
---
|
||||
|
||||
## 구현 체크리스트
|
||||
|
||||
### 1단계: 아이콘 매핑 파일 생성
|
||||
|
||||
- [x] `frontend/lib/button-icon-map.tsx` 생성
|
||||
- [x] 버튼 액션별 추천 아이콘 매핑 (`actionIconMap`) 정의 (14개 액션 x 6개 아이콘)
|
||||
- [x] 아이콘 크기 비율 매핑 (`iconSizePresets`) 정의 (작게/보통/크게/매우 크게, 버튼 높이 대비 %) + `getIconSizeStyle()` 유틸
|
||||
- [x] lucide 아이콘 동적 렌더링 포함 `getButtonDisplayContent()` 구현
|
||||
- [x] SVG 아이콘 렌더링 (DOMPurify 정화 via `isomorphic-dompurify`)
|
||||
- [x] 아이콘 이름 → 컴포넌트 매핑 객체 (`iconMap`) + `addToIconMap()` 동적 추가
|
||||
- [x] deprecated 액션용 안내 문구 상수 (`NO_ICON_MESSAGE`) 정의
|
||||
- [x] `isomorphic-dompurify` 기존 설치 확인 (추가 설치 불필요)
|
||||
- [x] `ButtonIconRenderer` 공용 컴포넌트 추가 (모든 렌더러에서 재사용)
|
||||
- [x] `getDefaultIconForAction()` 디폴트 아이콘 유틸 함수 추가 (액션별 첫 번째 추천 / 범용 폴백)
|
||||
- [x] `FALLBACK_ICON_NAME` 상수 + `SquareMousePointer` import/매핑 추가
|
||||
|
||||
### 2단계: ButtonConfigPanel 수정
|
||||
|
||||
- [x] 표시 모드 버튼 그룹 UI 추가 (텍스트 / 아이콘 / 아이콘+텍스트)
|
||||
- [x] `displayMode` 상태 관리 및 `onUpdateProperty` 연동
|
||||
- [x] 아이콘 모드 선택 시 조건부 UI 분기 (텍스트 입력 숨김 → 아이콘 선택 표시)
|
||||
- [x] 아이콘+텍스트 모드 선택 시 아이콘 선택 + 텍스트 입력 **동시** 표시
|
||||
- [x] 버튼 액션별 추천 아이콘 그리드 렌더링 (4열 그리드)
|
||||
- [x] 선택된 아이콘 하이라이트 (`ring-2 ring-primary/30 border-primary`)
|
||||
- [x] 아이콘 크기 비율 프리셋 버튼 그룹 (작게/보통/크게/매우 크게, 한글 라벨)
|
||||
- [x] px 직접 입력 필드 제거 (비율 프리셋만 제공)
|
||||
- [x] `icon.name`, `icon.size` 를 `onUpdateProperty`로 저장
|
||||
- [x] 아이콘 색상 컬러 피커 구현 (`ColorPickerWithTransparent` 재사용)
|
||||
- [x] "텍스트 색상과 동일" 초기화 버튼 구현
|
||||
- [x] 텍스트 위치 4방향 설정 추가 (`iconTextPosition`, 왼쪽/오른쪽/위쪽/아래쪽)
|
||||
- [x] 아이콘-텍스트 간격 설정 추가 (`iconGap`, 슬라이더 + 직접 입력, 아이콘+텍스트 모드 전용)
|
||||
- [x] 아이콘 모드 레이아웃 안내 문구 표시 (Info 아이콘 + bg-blue-50 박스)
|
||||
- [x] 액션 변경 시 선택 아이콘 자동 초기화 로직 (추천 목록에 없으면 해제)
|
||||
- [x] deprecated 액션에서 안내 문구 + 커스텀 아이콘 추가 버튼 표시
|
||||
- [x] 아이콘/아이콘+텍스트 모드 전환 시 아이콘 미선택이면 디폴트 아이콘 자동 부여
|
||||
- [x] 커스텀 아이콘 삭제 시 디폴트 아이콘으로 자동 복귀 (텍스트 모드 전환 방지)
|
||||
|
||||
### 3단계: 커스텀 아이콘 추가/삭제 (lucide 검색)
|
||||
|
||||
- [x] "lucide 검색" 버튼 UI
|
||||
- [x] lucide 아이콘 검색 팝오버 (Popover + Command + CommandInput)
|
||||
- [x] `import { icons } from "lucide-react"` 기반 전체 아이콘 검색/필터링
|
||||
- [x] 선택 시 `componentConfig.customIcons` 배열 추가 + `addToIconMap` 동적 등록
|
||||
- [x] lucide 커스텀 아이콘 그리드 렌더링 (추천 아이콘 아래, 구분선 포함)
|
||||
- [x] lucide 커스텀 아이콘 X 버튼으로 개별 삭제
|
||||
|
||||
### 3-1단계: 커스텀 아이콘 추가/삭제 (SVG 붙여넣기)
|
||||
|
||||
- [x] "SVG 붙여넣기" 버튼 UI (Popover)
|
||||
- [x] SVG 입력 textarea + DOMPurify 실시간 미리보기
|
||||
- [x] SVG 유효성 검사 (`<svg` 태그 포함 여부)
|
||||
- [x] 아이콘 이름 입력 필드 (관리자가 구분용 이름 지정)
|
||||
- [x] DOMPurify로 SVG 정화(sanitize) 후 저장
|
||||
- [x] `componentConfig.customSvgIcons` 배열에 `{ name, svg }` 추가
|
||||
- [x] SVG 커스텀 아이콘 그리드 렌더링 (lucide 커스텀 아이콘과 함께 표시)
|
||||
- [x] SVG 커스텀 아이콘 X 버튼으로 개별 삭제
|
||||
- [x] 커스텀 아이콘(lucide + SVG 모두)이 모든 버튼 액션에서 공통 노출
|
||||
|
||||
### 4단계: 버튼 렌더링 수정 (뷰어/위젯)
|
||||
|
||||
- [x] `InteractiveScreenViewerDynamic.tsx` - `ButtonIconRenderer` 적용
|
||||
- [x] `InteractiveScreenViewer.tsx` - `ButtonIconRenderer` 적용
|
||||
- [x] `ButtonWidget.tsx` - `ButtonIconRenderer` 적용 (디자인/실행 모드 모두)
|
||||
- [x] `OptimizedButtonComponent.tsx` - `ButtonIconRenderer` 적용 (실행 중 "처리 중..." 유지)
|
||||
- [x] `ButtonPrimaryComponent.tsx` - `ButtonIconRenderer` 적용 (v2-button-primary 캔버스 렌더링)
|
||||
- [x] lucide 아이콘 렌더링 (`icon.type === "lucide"`, `getLucideIcon` 조회)
|
||||
- [x] SVG 아이콘 렌더링 (`icon.type === "svg"`, DOMPurify 정화 후 innerHTML)
|
||||
- [x] 아이콘+텍스트 모드: `inline-flex items-center` + 동적 `gap` (iconGap px)
|
||||
- [x] `icon.color` 설정 시 아이콘만 별도 색상 적용 (inline style)
|
||||
- [x] `icon.color` 미설정 시 textColor 상속 (currentColor 기본)
|
||||
- [x] 아이콘 크기 비율 프리셋 `getIconSizeStyle()` 처리 (버튼 높이 대비 %)
|
||||
- [x] 텍스트 위치 4방향 렌더링 (`flexDirection` + 요소 순서 조합)
|
||||
|
||||
### 4-2단계: 버튼 테두리 이중 적용 수정
|
||||
|
||||
- [x] `RealtimePreviewDynamic.tsx` — position wrapper에서 버튼 컴포넌트 border strip 추가
|
||||
- [x] `ButtonPrimaryComponent.tsx` — 외부 wrapper에서 border 속성 destructure 제거
|
||||
- [x] `ButtonPrimaryComponent.tsx` — `border: "none"` shorthand 제거, 개별 longhand 속성으로 변경
|
||||
- [x] `isButtonComponent` 조건에 `"v2-button-primary"` 추가
|
||||
|
||||
### 4-1단계: 키보드 단축키 충돌 수정
|
||||
|
||||
- [x] `ScreenDesigner.tsx` 글로벌 keydown 핸들러에 입력 필드 감지 가드 추가
|
||||
- [x] `browserShortcuts` 배열에서 `Ctrl+V` 제거
|
||||
- [x] 입력 필드(input/textarea/select/contentEditable) 포커스 시 Ctrl+A/C/V/Z 기본 동작 허용
|
||||
- [x] SVG 붙여넣기 textarea에 `onPaste`/`onKeyDown` stopPropagation 핸들러 추가
|
||||
|
||||
### 5단계: 검증
|
||||
|
||||
- [x] 텍스트 모드: 기존 동작 변화 없음 확인 (하위 호환성)
|
||||
- [x] `displayMode` 없는 기존 버튼: 텍스트 모드로 정상 동작
|
||||
- [x] 아이콘 모드 선택 → 추천 아이콘 6개 그리드 표시
|
||||
- [x] 아이콘 선택 → 캔버스(오른쪽 프리뷰) 및 실제 화면에서 아이콘 렌더링 확인
|
||||
- [x] 아이콘 크기 비율 프리셋 변경 → 버튼 높이 대비 비율 반영 확인
|
||||
- [x] 텍스트 위치 4방향(왼/오른/위/아래) 변경 → 레이아웃 방향 반영 확인
|
||||
- [x] 버튼 테두리 설정 → 내부 버튼에만 적용, 외부 wrapper에 이중 적용 없음 확인
|
||||
- [x] 버튼 액션 변경 → 추천 아이콘 목록 갱신 확인
|
||||
- [x] lucide 커스텀 아이콘 추가 → 모든 액션에서 노출 확인
|
||||
- [x] SVG 커스텀 아이콘 붙여넣기 → 미리보기 → 추가 → 모든 액션에서 노출 확인
|
||||
- [x] SVG에 악성 코드 삽입 시도 → DOMPurify 정화 후 안전 렌더링 확인
|
||||
- [x] 커스텀 아이콘 삭제 → 목록에서 제거 확인
|
||||
- [x] deprecated 액션에서 안내 문구 + 커스텀 아이콘 추가 가능 확인
|
||||
- [x] 아이콘+텍스트 모드: 아이콘 + 텍스트 나란히 렌더링 확인
|
||||
- [x] 아이콘+텍스트 간격 조절: 슬라이더/직접 입력으로 간격 변경 → 실시간 반영 확인
|
||||
- [x] 아이콘 색상 미설정 → textColor와 동일한 색상 확인
|
||||
- [x] 아이콘 색상 설정 → 아이콘만 해당 색상, 텍스트는 textColor 유지 확인
|
||||
- [x] 외부 SVG (고유 색상) → icon.color 설정해도 SVG 원본 색상 유지 확인
|
||||
- [x] "텍스트 색상과 동일" 버튼 → icon.color 해제되고 textColor 상속 복원 확인
|
||||
- [x] 레이아웃 안내 문구: 아이콘 모드에서만 표시, 다른 모드에서 숨김 확인
|
||||
- [x] 입력 필드에서 Ctrl+A/C/V/Z 단축키 정상 동작 확인
|
||||
- [x] 아이콘 모드 전환 시 디폴트 아이콘 자동 선택 → 캔버스에 즉시 반영 확인
|
||||
- [x] 커스텀 아이콘 삭제 시 디폴트 아이콘으로 복귀 → 아이콘 모드 유지 확인
|
||||
- [x] deprecated 액션에서 디폴트 폴백 아이콘(SquareMousePointer) 표시 확인
|
||||
|
||||
### 6단계: 정리
|
||||
|
||||
- [x] TypeScript 컴파일 에러 없음 확인 (우리 파일 6개 모두 0 에러)
|
||||
- [x] 불필요한 import 없음 확인
|
||||
- [x] 이 체크리스트 완료 표시 업데이트
|
||||
|
||||
---
|
||||
|
||||
## 변경 이력
|
||||
|
||||
| 날짜 | 내용 |
|
||||
|------|------|
|
||||
| 2026-03-04 | 계획서, 맥락노트, 체크리스트 작성 완료 |
|
||||
| 2026-03-04 | 외부 SVG 붙여넣기 기능 추가 (3개 문서 모두 반영) |
|
||||
| 2026-03-04 | 아이콘+텍스트 모드, 레이아웃 안내 추가 |
|
||||
| 2026-03-04 | 설정 패널 내 미리보기 제거 (오른쪽 캔버스 프리뷰로 대체) |
|
||||
| 2026-03-04 | 아이콘 색상 설정 추가 (icon.color, 기본값 textColor 상속) |
|
||||
| 2026-03-04 | 3개 문서 교차 검토 — 개요 누락 보완, 시각 예시 문구 통일, 렌더 함수 px 대응, 용어 명확화 |
|
||||
| 2026-03-04 | 구현 완료 — 1~4단계 코드 작성, 6단계 린트/타입 검증 통과 |
|
||||
| 2026-03-04 | 아이콘-텍스트 간격 설정 추가 (iconGap, 슬라이더+직접 입력) |
|
||||
| 2026-03-04 | noIconAction에서 커스텀 아이콘 추가 허용 + 안내 문구 변경 |
|
||||
| 2026-03-04 | ScreenDesigner 키보드 단축키 수정 — 입력 필드에서 텍스트 편집 단축키 허용 |
|
||||
| 2026-03-04 | SVG 붙여넣기 textarea에 onPaste/onKeyDown 핸들러 추가 |
|
||||
| 2026-03-04 | SVG 커스텀 아이콘 이름 중복 방지 (자동 넘버링) |
|
||||
| 2026-03-04 | 디폴트 아이콘 자동 부여 — 모드 전환 시 자동 선택, 커스텀 삭제 시 디폴트 복귀 |
|
||||
| 2026-03-04 | `getDefaultIconForAction()` 유틸 + `SquareMousePointer` 폴백 아이콘 추가 |
|
||||
| 2026-03-04 | 3개 문서 변경사항 동기화 및 코드 정리 |
|
||||
| 2026-03-04 | 아이콘 크기: 절대 px → 버튼 높이 대비 비율(%) 4단계 프리셋으로 변경, px 직접 입력 제거 |
|
||||
| 2026-03-04 | 텍스트 위치 4방향 설정 추가 (왼쪽/오른쪽/위쪽/아래쪽) |
|
||||
| 2026-03-04 | 버튼 테두리 이중 적용 수정 — position wrapper에서 border strip, border shorthand 제거 |
|
||||
| 2026-03-04 | 프리셋 라벨 한글화 (작게/보통/크게/매우 크게), 라벨 "아이콘 크기 비율"로 변경 |
|
||||
|
|
@ -47,6 +47,7 @@ import { useFormValidation } from "@/hooks/useFormValidation";
|
|||
import { V2ColumnInfo as ColumnInfo } from "@/types";
|
||||
import { isFileComponent } from "@/lib/utils/componentTypeUtils";
|
||||
import { buildGridClasses } from "@/lib/constants/columnSpans";
|
||||
import { ButtonIconRenderer } from "@/lib/button-icon-map";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
|
||||
import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
|
||||
|
|
@ -2054,7 +2055,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
|
|||
borderColor: config?.borderColor,
|
||||
}}
|
||||
>
|
||||
{label || "버튼"}
|
||||
<ButtonIconRenderer componentConfig={(component as any).componentConfig} fallbackLabel={label || "버튼"} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import {
|
|||
getServerSnapshot as canvasSplitGetServerSnapshot,
|
||||
subscribeDom as canvasSplitSubscribeDom,
|
||||
} from "@/lib/registry/components/v2-split-line/canvasSplitStore";
|
||||
import { ButtonIconRenderer } from "@/lib/button-icon-map";
|
||||
|
||||
// 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
|
||||
import "@/lib/registry/components/ButtonRenderer";
|
||||
|
|
@ -978,7 +979,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{label || "버튼"}
|
||||
<ButtonIconRenderer componentConfig={(comp as any).componentConfig} fallbackLabel={label || "버튼"} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { cn } from "@/lib/utils";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { executeButtonWithFlow, handleFlowExecutionResult } from "@/lib/utils/nodeFlowButtonExecutor";
|
||||
import { useCurrentFlowStep } from "@/stores/flowStepStore";
|
||||
import { ButtonIconRenderer, getButtonDisplayContent } from "@/lib/button-icon-map";
|
||||
|
||||
interface OptimizedButtonProps {
|
||||
component: ComponentData;
|
||||
|
|
@ -645,17 +646,14 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
|
|||
<Button
|
||||
onClick={handleClick}
|
||||
disabled={isExecuting || disabled}
|
||||
// 색상이 설정되어 있으면 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",
|
||||
// 커스텀 색상이 없을 때만 기본 스타일 적용
|
||||
!hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
)}
|
||||
style={{
|
||||
// 커스텀 색상이 있을 때만 인라인 스타일 적용
|
||||
...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
|
||||
...(config?.textColor && { color: config.textColor }),
|
||||
...(config?.borderColor && { borderColor: config.borderColor }),
|
||||
|
|
@ -664,7 +662,14 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
|
|||
{/* 메인 버튼 내용 */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{getStatusIcon()}
|
||||
<span>{isExecuting ? "처리 중..." : buttonLabel}</span>
|
||||
<span>
|
||||
{isExecuting ? "처리 중..." : (
|
||||
<ButtonIconRenderer
|
||||
componentConfig={component.componentConfig}
|
||||
fallbackLabel={buttonLabel}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 개발 모드에서 성능 정보 표시 */}
|
||||
|
|
|
|||
|
|
@ -407,8 +407,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
|
|||
const isButtonComponent =
|
||||
(type === "widget" && widgetType === "button") ||
|
||||
(type === "component" &&
|
||||
(["button-primary", "button-secondary"].includes(componentType) ||
|
||||
["button-primary", "button-secondary"].includes(componentId)));
|
||||
(["button-primary", "button-secondary", "v2-button-primary"].includes(componentType) ||
|
||||
["button-primary", "button-secondary", "v2-button-primary"].includes(componentId)));
|
||||
|
||||
// 레거시 분할 패널용 refs
|
||||
const initialPanelRatioRef = React.useRef<number | null>(null);
|
||||
|
|
@ -548,13 +548,16 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
|
|||
const origWidth = size?.width || 100;
|
||||
const isSplitShrunk = splitAdjustedWidth !== null && splitAdjustedWidth < origWidth;
|
||||
|
||||
// v2 수평 라벨 컴포넌트: position wrapper에서 border 제거 (DynamicComponentRenderer가 내부에서 처리)
|
||||
// position wrapper에서 border 제거 (내부 컴포넌트가 자체적으로 border를 렌더링하는 경우)
|
||||
// - v2 수평 라벨 컴포넌트: DynamicComponentRenderer가 내부에서 처리
|
||||
// - 버튼 컴포넌트: buttonElementStyle에서 자체 border 적용
|
||||
const isV2HorizLabel = !!(
|
||||
componentStyle &&
|
||||
(componentStyle.labelDisplay === true || componentStyle.labelDisplay === "true") &&
|
||||
(componentStyle.labelPosition === "left" || componentStyle.labelPosition === "right")
|
||||
);
|
||||
const safeComponentStyle = isV2HorizLabel
|
||||
const needsStripBorder = isV2HorizLabel || isButtonComponent;
|
||||
const safeComponentStyle = needsStripBorder
|
||||
? (() => {
|
||||
const { borderWidth, borderColor, borderStyle, border, borderRadius, ...rest } = componentStyle as any;
|
||||
return rest;
|
||||
|
|
|
|||
|
|
@ -5474,7 +5474,6 @@ export default function ScreenDesigner({
|
|||
{ ctrl: true, key: "s" }, // 저장 (필요시 차단 해제)
|
||||
{ ctrl: true, key: "p" }, // 인쇄
|
||||
{ ctrl: true, key: "o" }, // 파일 열기
|
||||
{ ctrl: true, key: "v" }, // 붙여넣기 (브라우저 기본 동작 차단)
|
||||
|
||||
// 개발자 도구
|
||||
{ key: "F12" }, // 개발자 도구
|
||||
|
|
@ -5499,7 +5498,20 @@ export default function ScreenDesigner({
|
|||
return ctrlMatch && shiftMatch && keyMatch;
|
||||
});
|
||||
|
||||
// 입력 필드(input, textarea 등)에 포커스 시 편집 단축키는 기본 동작 허용
|
||||
const _target = e.target as HTMLElement;
|
||||
const _activeEl = document.activeElement as HTMLElement;
|
||||
const _isEditable = (el: HTMLElement | null) =>
|
||||
el instanceof HTMLInputElement ||
|
||||
el instanceof HTMLTextAreaElement ||
|
||||
el instanceof HTMLSelectElement ||
|
||||
el?.isContentEditable;
|
||||
const isEditableFieldFocused = _isEditable(_target) || _isEditable(_activeEl);
|
||||
|
||||
if (isBrowserShortcut) {
|
||||
if (isEditableFieldFocused) {
|
||||
return;
|
||||
}
|
||||
// console.log("🚫 브라우저 기본 단축키 차단:", e.key);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
@ -5508,6 +5520,11 @@ export default function ScreenDesigner({
|
|||
|
||||
// ✅ 애플리케이션 전용 단축키 처리
|
||||
|
||||
// 입력 필드 포커스 시 앱 단축키 무시 (텍스트 편집 우선)
|
||||
if (isEditableFieldFocused && (e.ctrlKey || e.metaKey)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 1. 그룹 관련 단축키
|
||||
if ((e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === "g" && !e.shiftKey) {
|
||||
// console.log("🔄 그룹 생성 단축키");
|
||||
|
|
@ -5584,7 +5601,6 @@ export default function ScreenDesigner({
|
|||
|
||||
// 5. 붙여넣기 (컴포넌트 붙여넣기)
|
||||
if ((e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === "v") {
|
||||
// console.log("🔄 컴포넌트 붙여넣기");
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
|
|||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Check, ChevronsUpDown, Search, Plus, X, ChevronUp, ChevronDown, Type, Database } from "lucide-react";
|
||||
import { Check, ChevronsUpDown, Search, Plus, X, ChevronUp, ChevronDown, Type, Database, Info, RotateCcw } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ComponentData } from "@/types/screen";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
|
|
@ -18,6 +18,18 @@ import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
|
|||
import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
|
||||
import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
|
||||
import { QuickInsertConfigSection } from "./QuickInsertConfigSection";
|
||||
import DOMPurify from "isomorphic-dompurify";
|
||||
import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
|
||||
import { icons as allLucideIcons } from "lucide-react";
|
||||
import {
|
||||
actionIconMap,
|
||||
noIconActions,
|
||||
NO_ICON_MESSAGE,
|
||||
iconSizePresets,
|
||||
getLucideIcon,
|
||||
addToIconMap,
|
||||
getDefaultIconForAction,
|
||||
} from "@/lib/button-icon-map";
|
||||
|
||||
// 🆕 제목 블록 타입
|
||||
interface TitleBlock {
|
||||
|
|
@ -70,6 +82,29 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
|
|||
groupByColumn: String(config.action?.groupByColumns?.[0] || ""),
|
||||
});
|
||||
|
||||
// 아이콘 설정 상태
|
||||
const [displayMode, setDisplayMode] = useState<"text" | "icon" | "icon-text">(
|
||||
config.displayMode || "text",
|
||||
);
|
||||
const [selectedIcon, setSelectedIcon] = useState<string>(config.icon?.name || "");
|
||||
const [selectedIconType, setSelectedIconType] = useState<"lucide" | "svg">(
|
||||
config.icon?.type || "lucide",
|
||||
);
|
||||
const [iconSize, setIconSize] = useState<string>(config.icon?.size || "보통");
|
||||
const [iconColor, setIconColor] = useState<string>(config.icon?.color || "");
|
||||
const [iconGap, setIconGap] = useState<number>(config.iconGap ?? 6);
|
||||
const [iconTextPosition, setIconTextPosition] = useState<"right" | "left" | "bottom" | "top">(
|
||||
config.iconTextPosition || "right",
|
||||
);
|
||||
|
||||
// 커스텀 아이콘 UI 상태
|
||||
const [lucideSearchOpen, setLucideSearchOpen] = useState(false);
|
||||
const [lucideSearchTerm, setLucideSearchTerm] = useState("");
|
||||
const [svgPasteOpen, setSvgPasteOpen] = useState(false);
|
||||
const [svgInput, setSvgInput] = useState("");
|
||||
const [svgName, setSvgName] = useState("");
|
||||
const [svgError, setSvgError] = useState("");
|
||||
|
||||
const [screens, setScreens] = useState<ScreenOption[]>([]);
|
||||
const [screensLoading, setScreensLoading] = useState(false);
|
||||
const [modalScreenOpen, setModalScreenOpen] = useState(false);
|
||||
|
|
@ -778,38 +813,144 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
// 아이콘 선택 핸들러
|
||||
const handleSelectIcon = (iconName: string, iconType: "lucide" | "svg" = "lucide") => {
|
||||
setSelectedIcon(iconName);
|
||||
setSelectedIconType(iconType);
|
||||
onUpdateProperty("componentConfig.icon", {
|
||||
name: iconName,
|
||||
type: iconType,
|
||||
size: iconSize,
|
||||
...(iconColor ? { color: iconColor } : {}),
|
||||
});
|
||||
};
|
||||
|
||||
// 선택 중인 아이콘이 삭제되었을 때 디폴트 아이콘으로 복귀
|
||||
const revertToDefaultIcon = () => {
|
||||
const def = getDefaultIconForAction(localInputs.actionType);
|
||||
setSelectedIcon(def.name);
|
||||
setSelectedIconType(def.type);
|
||||
handleSelectIcon(def.name, def.type);
|
||||
};
|
||||
|
||||
// 표시 모드 변경 핸들러 — icon/icon-text 전환 시 아이콘 미선택이면 디폴트 부여
|
||||
const handleDisplayModeChange = (mode: "text" | "icon" | "icon-text") => {
|
||||
setDisplayMode(mode);
|
||||
onUpdateProperty("componentConfig.displayMode", mode);
|
||||
|
||||
if ((mode === "icon" || mode === "icon-text") && !selectedIcon) {
|
||||
revertToDefaultIcon();
|
||||
}
|
||||
};
|
||||
|
||||
// 아이콘 크기 프리셋 변경 (아이콘 미선택 시 로컬만 업데이트)
|
||||
const handleIconSizePreset = (preset: string) => {
|
||||
setIconSize(preset);
|
||||
if (selectedIcon) {
|
||||
onUpdateProperty("componentConfig.icon.size", preset);
|
||||
}
|
||||
};
|
||||
|
||||
// 아이콘 색상 변경
|
||||
const handleIconColorChange = (color: string | undefined) => {
|
||||
const val = color || "";
|
||||
setIconColor(val);
|
||||
if (selectedIcon) {
|
||||
if (val) {
|
||||
onUpdateProperty("componentConfig.icon.color", val);
|
||||
} else {
|
||||
onUpdateProperty("componentConfig.icon.color", undefined);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 현재 액션의 추천 아이콘 목록
|
||||
const currentActionIcons = actionIconMap[localInputs.actionType] || [];
|
||||
const isNoIconAction = noIconActions.has(localInputs.actionType);
|
||||
const customIcons: string[] = config.customIcons || [];
|
||||
const customSvgIcons: Array<{ name: string; svg: string }> = config.customSvgIcons || [];
|
||||
const showIconSettings = displayMode === "icon" || displayMode === "icon-text";
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 표시 모드 선택 */}
|
||||
<div>
|
||||
<Label htmlFor="button-text">버튼 텍스트</Label>
|
||||
<Input
|
||||
id="button-text"
|
||||
value={localInputs.text}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
setLocalInputs((prev) => ({ ...prev, text: newValue }));
|
||||
onUpdateProperty("componentConfig.text", newValue);
|
||||
}}
|
||||
placeholder="버튼 텍스트를 입력하세요"
|
||||
/>
|
||||
<Label className="mb-1.5 block text-xs sm:text-sm">표시 모드</Label>
|
||||
<div className="flex rounded-md border">
|
||||
{(
|
||||
[
|
||||
{ value: "text", label: "텍스트" },
|
||||
{ value: "icon", label: "아이콘" },
|
||||
{ value: "icon-text", label: "아이콘+텍스트" },
|
||||
] as const
|
||||
).map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => handleDisplayModeChange(opt.value)}
|
||||
className={cn(
|
||||
"flex-1 px-2 py-1.5 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
|
||||
displayMode === opt.value
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 아이콘 모드 레이아웃 안내 */}
|
||||
{displayMode === "icon" && (
|
||||
<div className="flex items-start gap-2 rounded-md bg-blue-50 p-2.5 text-xs text-blue-700 dark:bg-blue-950/20 dark:text-blue-300">
|
||||
<Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
||||
<span>아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 버튼 텍스트 (텍스트 / 아이콘+텍스트 모드에서 표시) */}
|
||||
{(displayMode === "text" || displayMode === "icon-text") && (
|
||||
<div>
|
||||
<Label htmlFor="button-text">버튼 텍스트</Label>
|
||||
<Input
|
||||
id="button-text"
|
||||
value={localInputs.text}
|
||||
onChange={(e) => {
|
||||
const newValue = e.target.value;
|
||||
setLocalInputs((prev) => ({ ...prev, text: newValue }));
|
||||
onUpdateProperty("componentConfig.text", newValue);
|
||||
}}
|
||||
placeholder="버튼 텍스트를 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label htmlFor="button-action">버튼 액션</Label>
|
||||
<Label htmlFor="button-action" className="mb-1.5 block">버튼 액션</Label>
|
||||
<Select
|
||||
key={`action-${component.id}`}
|
||||
value={localInputs.actionType}
|
||||
onValueChange={(value) => {
|
||||
// 🔥 로컬 상태 먼저 업데이트
|
||||
setLocalInputs((prev) => ({ ...prev, actionType: value }));
|
||||
// 🔥 action.type 업데이트
|
||||
onUpdateProperty("componentConfig.action.type", value);
|
||||
|
||||
// 🔥 색상 업데이트는 충분히 지연 (React 리렌더링 완료 후)
|
||||
// 액션 변경 시: 선택된 아이콘이 새 액션의 추천 목록에 없으면 초기화
|
||||
const newActionIcons = actionIconMap[value] || [];
|
||||
if (
|
||||
selectedIcon &&
|
||||
selectedIconType === "lucide" &&
|
||||
!newActionIcons.includes(selectedIcon) &&
|
||||
!customIcons.includes(selectedIcon)
|
||||
) {
|
||||
setSelectedIcon("");
|
||||
onUpdateProperty("componentConfig.icon", undefined);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const newColor = value === "delete" ? "#ef4444" : "#212121";
|
||||
onUpdateProperty("style.labelColor", newColor);
|
||||
}, 100); // 0 → 100ms로 증가
|
||||
}, 100);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
|
|
@ -842,10 +983,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
|
|||
{/* 복사 */}
|
||||
<SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
|
||||
|
||||
{/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김
|
||||
{/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김 */}
|
||||
{/* 테스트용 임시 노출 */}
|
||||
<SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
|
||||
{/*
|
||||
<SelectItem value="openRelatedModal">연관 데이터 버튼 모달 열기</SelectItem>
|
||||
<SelectItem value="openModalWithData">(deprecated) 데이터 전달 + 모달 열기</SelectItem>
|
||||
<SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
|
||||
<SelectItem value="code_merge">코드 병합</SelectItem>
|
||||
<SelectItem value="empty_vehicle">공차등록</SelectItem>
|
||||
*/}
|
||||
|
|
@ -853,6 +996,584 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{/* ────────────────── 아이콘 설정 영역 ────────────────── */}
|
||||
{showIconSettings && (
|
||||
<div className="space-y-4">
|
||||
{/* 추천 아이콘 / 안내 문구 */}
|
||||
{isNoIconAction ? (
|
||||
<div>
|
||||
<div className="rounded-md border border-dashed p-3 text-center text-xs text-muted-foreground">
|
||||
{NO_ICON_MESSAGE}
|
||||
</div>
|
||||
|
||||
{/* 커스텀 아이콘이 있으면 표시 */}
|
||||
{(customIcons.length > 0 || customSvgIcons.length > 0) && (
|
||||
<>
|
||||
<div className="my-2 flex items-center gap-2">
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="text-[10px] text-muted-foreground">커스텀 아이콘</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
{customIcons.map((iconName) => {
|
||||
const Icon = getLucideIcon(iconName);
|
||||
if (!Icon) return null;
|
||||
return (
|
||||
<div key={`custom-${iconName}`} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectIcon(iconName, "lucide")}
|
||||
className={cn(
|
||||
"flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors hover:bg-muted",
|
||||
selectedIcon === iconName && selectedIconType === "lucide"
|
||||
? "border-primary ring-2 ring-primary/30 bg-primary/5"
|
||||
: "border-transparent",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-6 w-6" />
|
||||
<span className="truncate text-[10px] text-muted-foreground">{iconName}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = customIcons.filter((n) => n !== iconName);
|
||||
onUpdateProperty("componentConfig.customIcons", next);
|
||||
if (selectedIcon === iconName) revertToDefaultIcon();
|
||||
}}
|
||||
className="absolute -top-1 -right-1 rounded-full bg-destructive p-0.5 text-destructive-foreground hover:bg-destructive/80"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{customSvgIcons.map((svgIcon) => (
|
||||
<div key={`svg-${svgIcon.name}`} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectIcon(svgIcon.name, "svg")}
|
||||
className={cn(
|
||||
"flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors hover:bg-muted",
|
||||
selectedIcon === svgIcon.name && selectedIconType === "svg"
|
||||
? "border-primary ring-2 ring-primary/30 bg-primary/5"
|
||||
: "border-transparent",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgIcon.svg, { USE_PROFILES: { svg: true } }),
|
||||
}}
|
||||
/>
|
||||
<span className="truncate text-[10px] text-muted-foreground">{svgIcon.name}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = customSvgIcons.filter((s) => s.name !== svgIcon.name);
|
||||
onUpdateProperty("componentConfig.customSvgIcons", next);
|
||||
if (selectedIcon === svgIcon.name) revertToDefaultIcon();
|
||||
}}
|
||||
className="absolute -top-1 -right-1 rounded-full bg-destructive p-0.5 text-destructive-foreground hover:bg-destructive/80"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 커스텀 아이콘 추가 버튼 */}
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
lucide 검색
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput
|
||||
placeholder="아이콘 이름 검색..."
|
||||
value={lucideSearchTerm}
|
||||
onValueChange={setLucideSearchTerm}
|
||||
className="text-xs"
|
||||
/>
|
||||
<CommandList className="max-h-48">
|
||||
<CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{Object.keys(allLucideIcons)
|
||||
.filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
|
||||
.slice(0, 30)
|
||||
.map((iconName) => {
|
||||
const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
|
||||
return (
|
||||
<CommandItem
|
||||
key={iconName}
|
||||
value={iconName}
|
||||
onSelect={() => {
|
||||
const next = [...customIcons];
|
||||
if (!next.includes(iconName)) {
|
||||
next.push(iconName);
|
||||
onUpdateProperty("componentConfig.customIcons", next);
|
||||
if (Icon) addToIconMap(iconName, Icon);
|
||||
}
|
||||
setLucideSearchOpen(false);
|
||||
setLucideSearchTerm("");
|
||||
}}
|
||||
className="flex items-center gap-2 text-xs"
|
||||
>
|
||||
{Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
|
||||
{iconName}
|
||||
{customIcons.includes(iconName) && <Check className="ml-auto h-3 w-3 text-primary" />}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
SVG 붙여넣기
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-72 space-y-2 p-3" align="start">
|
||||
<Label className="text-xs">아이콘 이름</Label>
|
||||
<Input
|
||||
value={svgName}
|
||||
onChange={(e) => setSvgName(e.target.value)}
|
||||
placeholder="예: 회사로고"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
<Label className="text-xs">SVG 코드</Label>
|
||||
<textarea
|
||||
value={svgInput}
|
||||
onChange={(e) => {
|
||||
setSvgInput(e.target.value);
|
||||
setSvgError("");
|
||||
}}
|
||||
onPaste={(e) => {
|
||||
e.stopPropagation();
|
||||
const text = e.clipboardData.getData("text/plain");
|
||||
if (text) {
|
||||
e.preventDefault();
|
||||
setSvgInput(text);
|
||||
setSvgError("");
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
|
||||
className="h-20 w-full rounded-md border bg-background px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
{svgInput && (
|
||||
<div className="flex items-center justify-center rounded border bg-muted/50 p-2">
|
||||
<span
|
||||
className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } }),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{svgError && <p className="text-xs text-destructive">{svgError}</p>}
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 w-full text-xs"
|
||||
onClick={() => {
|
||||
if (!svgName.trim()) {
|
||||
setSvgError("아이콘 이름을 입력하세요.");
|
||||
return;
|
||||
}
|
||||
if (!svgInput.trim().includes("<svg")) {
|
||||
setSvgError("유효한 SVG 코드가 아닙니다.");
|
||||
return;
|
||||
}
|
||||
const sanitized = DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } });
|
||||
let finalName = svgName.trim();
|
||||
const existingNames = new Set(customSvgIcons.map((s) => s.name));
|
||||
if (existingNames.has(finalName)) {
|
||||
let counter = 2;
|
||||
while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
|
||||
finalName = `${svgName.trim()}(${counter})`;
|
||||
}
|
||||
const next = [...customSvgIcons, { name: finalName, svg: sanitized }];
|
||||
onUpdateProperty("componentConfig.customSvgIcons", next);
|
||||
setSvgInput("");
|
||||
setSvgName("");
|
||||
setSvgError("");
|
||||
setSvgPasteOpen(false);
|
||||
}}
|
||||
>
|
||||
추가
|
||||
</Button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Label className="mb-1.5 block text-xs sm:text-sm">아이콘 선택</Label>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
{currentActionIcons.map((iconName) => {
|
||||
const Icon = getLucideIcon(iconName);
|
||||
if (!Icon) return null;
|
||||
return (
|
||||
<button
|
||||
key={iconName}
|
||||
type="button"
|
||||
onClick={() => handleSelectIcon(iconName, "lucide")}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1 rounded-md border p-2 transition-colors hover:bg-muted",
|
||||
selectedIcon === iconName && selectedIconType === "lucide"
|
||||
? "border-primary ring-2 ring-primary/30 bg-primary/5"
|
||||
: "border-transparent",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-6 w-6" />
|
||||
<span className="truncate text-[10px] text-muted-foreground">{iconName}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 커스텀 아이콘 영역 */}
|
||||
{(customIcons.length > 0 || customSvgIcons.length > 0) && (
|
||||
<>
|
||||
<div className="my-2 flex items-center gap-2">
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="text-[10px] text-muted-foreground">커스텀 아이콘</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
{customIcons.map((iconName) => {
|
||||
const Icon = getLucideIcon(iconName);
|
||||
if (!Icon) return null;
|
||||
return (
|
||||
<div key={`custom-${iconName}`} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectIcon(iconName, "lucide")}
|
||||
className={cn(
|
||||
"flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors hover:bg-muted",
|
||||
selectedIcon === iconName && selectedIconType === "lucide"
|
||||
? "border-primary ring-2 ring-primary/30 bg-primary/5"
|
||||
: "border-transparent",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-6 w-6" />
|
||||
<span className="truncate text-[10px] text-muted-foreground">{iconName}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = customIcons.filter((n) => n !== iconName);
|
||||
onUpdateProperty("componentConfig.customIcons", next);
|
||||
if (selectedIcon === iconName) revertToDefaultIcon();
|
||||
}}
|
||||
className="absolute -top-1 -right-1 rounded-full bg-destructive p-0.5 text-destructive-foreground hover:bg-destructive/80"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{customSvgIcons.map((svgIcon) => (
|
||||
<div key={`svg-${svgIcon.name}`} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectIcon(svgIcon.name, "svg")}
|
||||
className={cn(
|
||||
"flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors hover:bg-muted",
|
||||
selectedIcon === svgIcon.name && selectedIconType === "svg"
|
||||
? "border-primary ring-2 ring-primary/30 bg-primary/5"
|
||||
: "border-transparent",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{ __html: svgIcon.svg }}
|
||||
/>
|
||||
<span className="truncate text-[10px] text-muted-foreground">{svgIcon.name}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = customSvgIcons.filter((s) => s.name !== svgIcon.name);
|
||||
onUpdateProperty("componentConfig.customSvgIcons", next);
|
||||
if (selectedIcon === svgIcon.name) revertToDefaultIcon();
|
||||
}}
|
||||
className="absolute -top-1 -right-1 rounded-full bg-destructive p-0.5 text-destructive-foreground hover:bg-destructive/80"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 커스텀 아이콘 추가 버튼 */}
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
lucide 검색
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput
|
||||
placeholder="아이콘 이름 검색..."
|
||||
value={lucideSearchTerm}
|
||||
onValueChange={setLucideSearchTerm}
|
||||
className="text-xs"
|
||||
/>
|
||||
<CommandList className="max-h-48">
|
||||
<CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{Object.keys(allLucideIcons)
|
||||
.filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
|
||||
.slice(0, 30)
|
||||
.map((iconName) => {
|
||||
const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
|
||||
return (
|
||||
<CommandItem
|
||||
key={iconName}
|
||||
value={iconName}
|
||||
onSelect={() => {
|
||||
const next = [...customIcons];
|
||||
if (!next.includes(iconName)) {
|
||||
next.push(iconName);
|
||||
onUpdateProperty("componentConfig.customIcons", next);
|
||||
// iconMap에 동적 추가 (렌더링용)
|
||||
if (Icon) addToIconMap(iconName, Icon);
|
||||
}
|
||||
setLucideSearchOpen(false);
|
||||
setLucideSearchTerm("");
|
||||
}}
|
||||
className="flex items-center gap-2 text-xs"
|
||||
>
|
||||
{Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
|
||||
{iconName}
|
||||
{customIcons.includes(iconName) && <Check className="ml-auto h-3 w-3 text-primary" />}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
SVG 붙여넣기
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-72 space-y-2 p-3" align="start">
|
||||
<Label className="text-xs">아이콘 이름</Label>
|
||||
<Input
|
||||
value={svgName}
|
||||
onChange={(e) => setSvgName(e.target.value)}
|
||||
placeholder="예: 회사로고"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
<Label className="text-xs">SVG 코드</Label>
|
||||
<textarea
|
||||
value={svgInput}
|
||||
onChange={(e) => {
|
||||
setSvgInput(e.target.value);
|
||||
setSvgError("");
|
||||
}}
|
||||
onPaste={(e) => {
|
||||
e.stopPropagation();
|
||||
const text = e.clipboardData.getData("text/plain");
|
||||
if (text) {
|
||||
e.preventDefault();
|
||||
setSvgInput(text);
|
||||
setSvgError("");
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
|
||||
className="h-20 w-full rounded-md border bg-background px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
{svgInput && (
|
||||
<div className="flex items-center justify-center rounded border bg-muted/50 p-2">
|
||||
<span
|
||||
className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } }),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{svgError && <p className="text-xs text-destructive">{svgError}</p>}
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 w-full text-xs"
|
||||
onClick={() => {
|
||||
if (!svgName.trim()) {
|
||||
setSvgError("아이콘 이름을 입력하세요.");
|
||||
return;
|
||||
}
|
||||
if (!svgInput.trim().includes("<svg")) {
|
||||
setSvgError("유효한 SVG 코드가 아닙니다.");
|
||||
return;
|
||||
}
|
||||
const sanitized = DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } });
|
||||
let finalName = svgName.trim();
|
||||
const existingNames = new Set(customSvgIcons.map((s) => s.name));
|
||||
if (existingNames.has(finalName)) {
|
||||
let counter = 2;
|
||||
while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
|
||||
finalName = `${svgName.trim()}(${counter})`;
|
||||
}
|
||||
const next = [...customSvgIcons, { name: finalName, svg: sanitized }];
|
||||
onUpdateProperty("componentConfig.customSvgIcons", next);
|
||||
setSvgInput("");
|
||||
setSvgName("");
|
||||
setSvgError("");
|
||||
setSvgPasteOpen(false);
|
||||
}}
|
||||
>
|
||||
추가
|
||||
</Button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 아이콘 크기 비율 */}
|
||||
<div>
|
||||
<Label className="mb-1.5 block text-xs sm:text-sm">아이콘 크기 비율</Label>
|
||||
<div className="flex rounded-md border">
|
||||
{Object.keys(iconSizePresets).map((preset) => (
|
||||
<button
|
||||
key={preset}
|
||||
type="button"
|
||||
onClick={() => handleIconSizePreset(preset)}
|
||||
className={cn(
|
||||
"flex-1 px-1 py-1 text-xs font-medium whitespace-nowrap transition-colors first:rounded-l-md last:rounded-r-md",
|
||||
iconSize === preset
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{preset}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 텍스트 위치 (icon-text 모드 전용) */}
|
||||
{displayMode === "icon-text" && (
|
||||
<div>
|
||||
<Label className="mb-1.5 block text-xs sm:text-sm">텍스트 위치</Label>
|
||||
<div className="flex rounded-md border">
|
||||
{(
|
||||
[
|
||||
{ value: "left", label: "왼쪽" },
|
||||
{ value: "right", label: "오른쪽" },
|
||||
{ value: "top", label: "위쪽" },
|
||||
{ value: "bottom", label: "아래쪽" },
|
||||
] as const
|
||||
).map((pos) => (
|
||||
<button
|
||||
key={pos.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIconTextPosition(pos.value);
|
||||
onUpdateProperty("componentConfig.iconTextPosition", pos.value);
|
||||
}}
|
||||
className={cn(
|
||||
"flex-1 px-2 py-1 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
|
||||
iconTextPosition === pos.value
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{pos.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 아이콘-텍스트 간격 (icon-text 모드 전용) */}
|
||||
{displayMode === "icon-text" && (
|
||||
<div>
|
||||
<Label className="mb-1.5 block text-xs sm:text-sm">아이콘-텍스트 간격</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={32}
|
||||
step={1}
|
||||
value={Math.min(iconGap, 32)}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
setIconGap(val);
|
||||
onUpdateProperty("componentConfig.iconGap", val);
|
||||
}}
|
||||
className="h-1.5 flex-1 cursor-pointer accent-primary"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={iconGap}
|
||||
onChange={(e) => {
|
||||
const val = Math.max(0, Number(e.target.value) || 0);
|
||||
setIconGap(val);
|
||||
onUpdateProperty("componentConfig.iconGap", val);
|
||||
}}
|
||||
className="h-7 w-14 text-center text-xs"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 아이콘 색상 */}
|
||||
<div>
|
||||
<Label className="mb-1.5 block text-xs sm:text-sm">아이콘 색상</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<ColorPickerWithTransparent
|
||||
value={iconColor || undefined}
|
||||
onChange={handleIconColorChange}
|
||||
placeholder="텍스트 색상 상속"
|
||||
className="flex-1"
|
||||
/>
|
||||
{iconColor && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 shrink-0 text-xs"
|
||||
onClick={() => handleIconColorChange(undefined)}
|
||||
>
|
||||
<RotateCcw className="mr-1 h-3 w-3" />
|
||||
텍스트 색상과 동일
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 모달 열기 액션 설정 */}
|
||||
{localInputs.actionType === "modal" && (
|
||||
<div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import React from "react";
|
||||
import { WebTypeComponentProps } from "@/lib/registry/types";
|
||||
import { ButtonIconRenderer } from "@/lib/button-icon-map";
|
||||
|
||||
export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
|
||||
config,
|
||||
|
|
@ -14,38 +15,34 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
|
|||
required,
|
||||
className,
|
||||
style,
|
||||
isDesignMode = false, // 디자인 모드 플래그
|
||||
isDesignMode = false,
|
||||
...restProps
|
||||
}) => {
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
// 디자인 모드에서는 아무것도 하지 않고 그냥 이벤트 전파
|
||||
if (isDesignMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 버튼 클릭 시 동작 (추후 버튼 액션 시스템과 연동)
|
||||
console.log("Button clicked:", config);
|
||||
|
||||
// onChange를 통해 클릭 이벤트 전달
|
||||
if (onChange) {
|
||||
onChange("clicked");
|
||||
}
|
||||
};
|
||||
|
||||
// 커스텀 색상 확인 (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로 렌더링하여 버튼 동작 완전 차단
|
||||
|
||||
const fallbackLabel = config?.label || config?.text || (value as string) || placeholder || "버튼";
|
||||
|
||||
if (isDesignMode) {
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
|
||||
onClick={handleClick}
|
||||
className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
|
||||
hasCustomColors ? '' : 'bg-blue-600 text-white'
|
||||
} ${className || ""}`}
|
||||
|
|
@ -55,11 +52,10 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
|
|||
color: textColor,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
cursor: "pointer", // 선택 가능하도록 포인터 표시
|
||||
cursor: "pointer",
|
||||
}}
|
||||
title={config?.tooltip || placeholder}
|
||||
>
|
||||
{config?.label || config?.text || value || placeholder || "버튼"}
|
||||
<ButtonIconRenderer componentConfig={config} fallbackLabel={fallbackLabel} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -79,9 +75,8 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
|
|||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
title={config?.tooltip || placeholder}
|
||||
>
|
||||
{config?.label || config?.text || value || placeholder || "버튼"}
|
||||
<ButtonIconRenderer componentConfig={config} fallbackLabel={fallbackLabel} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,213 @@
|
|||
import React from "react";
|
||||
import DOMPurify from "isomorphic-dompurify";
|
||||
import {
|
||||
Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck,
|
||||
Trash2, Trash, XCircle, X, Eraser, CircleX,
|
||||
Pencil, PenLine, Pen, SquarePen, FilePen, PenTool,
|
||||
ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link,
|
||||
Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen,
|
||||
SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2,
|
||||
Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput,
|
||||
FileUp, FileInput,
|
||||
Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus,
|
||||
Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Settings2,
|
||||
ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus,
|
||||
Truck, Car, MapPin, Navigation2, Route, Bell,
|
||||
Send, Radio, Megaphone, Podcast, BellRing,
|
||||
Copy, ClipboardCopy, Files, CopyPlus, ClipboardList, Clipboard,
|
||||
SquareMousePointer,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 아이콘 이름 → 컴포넌트 매핑 (추천 아이콘만 명시적 import)
|
||||
// ---------------------------------------------------------------------------
|
||||
export const iconMap: Record<string, LucideIcon> = {
|
||||
Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck,
|
||||
Trash2, Trash, XCircle, X, Eraser, CircleX,
|
||||
Pencil, PenLine, Pen, SquarePen, FilePen, PenTool,
|
||||
ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link,
|
||||
Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen,
|
||||
SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2,
|
||||
Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput,
|
||||
FileUp, FileInput,
|
||||
Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus,
|
||||
Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Settings2,
|
||||
ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus,
|
||||
Truck, Car, MapPin, Navigation2, Route, Bell,
|
||||
Send, Radio, Megaphone, Podcast, BellRing,
|
||||
Copy, ClipboardCopy, Files, CopyPlus, ClipboardList, Clipboard,
|
||||
SquareMousePointer,
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 버튼 액션 → 추천 아이콘 이름 매핑
|
||||
// ---------------------------------------------------------------------------
|
||||
export const actionIconMap: Record<string, string[]> = {
|
||||
save: ["Check", "Save", "CheckCircle", "CircleCheck", "FileCheck", "ShieldCheck"],
|
||||
delete: ["Trash2", "Trash", "XCircle", "X", "Eraser", "CircleX"],
|
||||
edit: ["Pencil", "PenLine", "Pen", "SquarePen", "FilePen", "PenTool"],
|
||||
navigate: ["ArrowRight", "ExternalLink", "MoveRight", "Navigation", "CornerUpRight", "Link"],
|
||||
modal: ["Maximize2", "PanelTop", "AppWindow", "LayoutGrid", "Layers", "FolderOpen"],
|
||||
transferData: ["SendHorizontal", "ArrowRightLeft", "Repeat", "PackageCheck", "Upload", "Share2"],
|
||||
excel_download: ["Download", "FileDown", "FileSpreadsheet", "Sheet", "Table", "FileOutput"],
|
||||
excel_upload: ["Upload", "FileUp", "FileSpreadsheet", "Sheet", "FileInput", "FileOutput"],
|
||||
quickInsert: ["Zap", "Plus", "PlusCircle", "SquarePlus", "FilePlus", "BadgePlus"],
|
||||
control: ["Settings", "SlidersHorizontal", "ToggleLeft", "Workflow", "GitBranch", "Settings2"],
|
||||
barcode_scan: ["ScanLine", "QrCode", "Camera", "Scan", "ScanBarcode", "Focus"],
|
||||
operation_control: ["Truck", "Car", "MapPin", "Navigation2", "Route", "Bell"],
|
||||
event: ["Send", "Bell", "Radio", "Megaphone", "Podcast", "BellRing"],
|
||||
copy: ["Copy", "ClipboardCopy", "Files", "CopyPlus", "ClipboardList", "Clipboard"],
|
||||
};
|
||||
|
||||
// 아이콘 추천이 불가능한 deprecated/숨김 액션
|
||||
export const noIconActions = new Set([
|
||||
"openRelatedModal",
|
||||
"openModalWithData",
|
||||
"view_table_history",
|
||||
"code_merge",
|
||||
"empty_vehicle",
|
||||
]);
|
||||
|
||||
export const NO_ICON_MESSAGE = "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요.";
|
||||
|
||||
// 범용 폴백 아이콘 (추천 아이콘이 없는 액션용)
|
||||
export const FALLBACK_ICON_NAME = "SquareMousePointer";
|
||||
|
||||
/** 액션 타입에 대한 디폴트 아이콘(첫 번째 추천)을 반환. 없으면 범용 폴백. */
|
||||
export function getDefaultIconForAction(actionType?: string): { name: string; type: "lucide" } {
|
||||
if (actionType && actionIconMap[actionType]?.length) {
|
||||
return { name: actionIconMap[actionType][0], type: "lucide" };
|
||||
}
|
||||
return { name: FALLBACK_ICON_NAME, type: "lucide" };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 아이콘 크기 (버튼 높이 대비 비율)
|
||||
// ---------------------------------------------------------------------------
|
||||
export const iconSizePresets: Record<string, number> = {
|
||||
"작게": 40,
|
||||
"보통": 55,
|
||||
"크게": 70,
|
||||
"매우 크게": 85,
|
||||
};
|
||||
|
||||
/** 프리셋 문자열 → 비율(%) 반환. 레거시 값은 55(보통)로 폴백 */
|
||||
export function getIconPercent(size: string | number): number {
|
||||
if (typeof size === "number") return size;
|
||||
return iconSizePresets[size] ?? 55;
|
||||
}
|
||||
|
||||
/** 아이콘 크기를 CSS로 변환 (버튼 높이 대비 비율, 정사각형 유지) */
|
||||
export function getIconSizeStyle(size: string | number): React.CSSProperties {
|
||||
const pct = getIconPercent(size);
|
||||
return { height: `${pct}%`, width: "auto", aspectRatio: "1 / 1" };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 아이콘 조회 / 동적 등록
|
||||
// ---------------------------------------------------------------------------
|
||||
export function getLucideIcon(name: string): LucideIcon | undefined {
|
||||
return iconMap[name];
|
||||
}
|
||||
|
||||
export function addToIconMap(name: string, component: LucideIcon): void {
|
||||
iconMap[name] = component;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SVG 정화
|
||||
// ---------------------------------------------------------------------------
|
||||
export function sanitizeSvg(svgString: string): string {
|
||||
return DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } });
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 버튼 아이콘 렌더러 컴포넌트 (모든 뷰어/위젯에서 공용)
|
||||
// ---------------------------------------------------------------------------
|
||||
export function ButtonIconRenderer({
|
||||
componentConfig,
|
||||
fallbackLabel,
|
||||
}: {
|
||||
componentConfig: any;
|
||||
fallbackLabel: string;
|
||||
}) {
|
||||
const cfg = componentConfig || {};
|
||||
const displayMode = cfg.displayMode || "text";
|
||||
|
||||
if (displayMode === "text" || !cfg.icon?.name) {
|
||||
return <>{cfg.text || fallbackLabel}</>;
|
||||
}
|
||||
|
||||
return <>{getButtonDisplayContent(cfg)}</>;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 버튼 표시 콘텐츠 계산 (모든 렌더러 공용)
|
||||
// ---------------------------------------------------------------------------
|
||||
export function getButtonDisplayContent(componentConfig: any): React.ReactNode {
|
||||
const displayMode = componentConfig?.displayMode || "text";
|
||||
const text = componentConfig?.text || componentConfig?.label || "버튼";
|
||||
const icon = componentConfig?.icon;
|
||||
|
||||
if (displayMode === "text" || !icon?.name) {
|
||||
return text;
|
||||
}
|
||||
|
||||
// 아이콘 노드 생성
|
||||
const sizeStyle = getIconSizeStyle(icon.size || "보통");
|
||||
const colorStyle: React.CSSProperties = icon.color ? { color: icon.color } : {};
|
||||
let iconNode: React.ReactNode = null;
|
||||
|
||||
if (icon.type === "svg") {
|
||||
const svgIcon = componentConfig?.customSvgIcons?.find(
|
||||
(s: { name: string; svg: string }) => s.name === icon.name,
|
||||
);
|
||||
if (svgIcon) {
|
||||
const clean = sanitizeSvg(svgIcon.svg);
|
||||
iconNode = (
|
||||
<span
|
||||
className="inline-flex items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
style={{ ...sizeStyle, ...colorStyle }}
|
||||
dangerouslySetInnerHTML={{ __html: clean }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const IconComponent = getLucideIcon(icon.name);
|
||||
if (IconComponent) {
|
||||
iconNode = (
|
||||
<span className="inline-flex items-center justify-center" style={sizeStyle}>
|
||||
<IconComponent className="h-full w-full" style={colorStyle} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (!iconNode) {
|
||||
return text;
|
||||
}
|
||||
|
||||
if (displayMode === "icon") {
|
||||
return iconNode;
|
||||
}
|
||||
|
||||
// icon-text 모드
|
||||
const gap = componentConfig?.iconGap ?? 6;
|
||||
const textPos = componentConfig?.iconTextPosition || "right";
|
||||
const isVertical = textPos === "top" || textPos === "bottom";
|
||||
const textFirst = textPos === "left" || textPos === "top";
|
||||
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center justify-center"
|
||||
style={{
|
||||
gap: `${gap}px`,
|
||||
flexDirection: isVertical ? "column" : "row",
|
||||
}}
|
||||
>
|
||||
{textFirst ? <span>{text}</span> : iconNode}
|
||||
{textFirst ? iconNode : <span>{text}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -22,6 +22,7 @@ import {
|
|||
import { toast } from "sonner";
|
||||
import { showErrorToast } from "@/lib/utils/toastUtils";
|
||||
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
||||
import { ButtonIconRenderer } from "@/lib/button-icon-map";
|
||||
import { useCurrentFlowStep } from "@/stores/flowStepStore";
|
||||
import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
|
||||
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
||||
|
|
@ -555,13 +556,23 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
}
|
||||
|
||||
// 스타일 계산
|
||||
// 🔧 사용자가 설정한 크기가 있으면 그대로 사용
|
||||
const componentStyle: React.CSSProperties = {
|
||||
// 외부 wrapper는 부모 컨테이너(RealtimePreviewDynamic)에 맞춰 100% 채움
|
||||
// border는 내부 버튼에서만 적용 (wrapper에 적용되면 이중 테두리 발생)
|
||||
const {
|
||||
border: _border, borderWidth: _bw, borderStyle: _bs, borderColor: _bc, borderRadius: _br,
|
||||
...restComponentStyle
|
||||
} = {
|
||||
...component.style,
|
||||
...style,
|
||||
} as React.CSSProperties & Record<string, any>;
|
||||
|
||||
const componentStyle: React.CSSProperties = {
|
||||
...restComponentStyle,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
};
|
||||
|
||||
// 디자인 모드 스타일 (border 속성 분리하여 충돌 방지)
|
||||
// 디자인 모드 스타일
|
||||
if (isDesignMode) {
|
||||
componentStyle.borderWidth = "1px";
|
||||
componentStyle.borderStyle = "dashed";
|
||||
|
|
@ -1376,26 +1387,25 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
componentConfig.disabled || isOperationButtonDisabled || isRowSelectionDisabled || statusLoading;
|
||||
|
||||
// 공통 버튼 스타일
|
||||
// 🔧 component.style에서 background/backgroundColor 충돌 방지 (width/height는 허용)
|
||||
// 크기는 부모 컨테이너(RealtimePreviewDynamic)에서 관리하므로 width/height 제외
|
||||
const userStyle = component.style
|
||||
? Object.fromEntries(
|
||||
Object.entries(component.style).filter(([key]) => !["background", "backgroundColor"].includes(key)),
|
||||
Object.entries(component.style).filter(([key]) => !["background", "backgroundColor", "width", "height"].includes(key)),
|
||||
)
|
||||
: {};
|
||||
|
||||
// 🔧 사용자가 설정한 크기 우선 사용, 없으면 100%
|
||||
const buttonWidth = component.size?.width ? `${component.size.width}px` : style?.width || "100%";
|
||||
const buttonHeight = component.size?.height ? `${component.size.height}px` : style?.height || "100%";
|
||||
// 버튼은 부모 컨테이너를 꽉 채움 (크기는 RealtimePreviewDynamic에서 관리)
|
||||
const buttonWidth = "100%";
|
||||
const buttonHeight = "100%";
|
||||
|
||||
const buttonElementStyle: React.CSSProperties = {
|
||||
width: buttonWidth,
|
||||
height: buttonHeight,
|
||||
minHeight: "32px", // 🔧 최소 높이를 32px로 줄임
|
||||
// 🔧 커스텀 테두리 스타일 (StyleEditor에서 설정한 값 우선)
|
||||
border: style?.border || (style?.borderWidth ? undefined : "none"),
|
||||
borderWidth: style?.borderWidth || undefined,
|
||||
borderStyle: (style?.borderStyle as React.CSSProperties["borderStyle"]) || undefined,
|
||||
borderColor: style?.borderColor || undefined,
|
||||
// 커스텀 테두리 스타일 (StyleEditor 설정 우선, shorthand 사용 안 함)
|
||||
borderWidth: style?.borderWidth || "0",
|
||||
borderStyle: (style?.borderStyle as React.CSSProperties["borderStyle"]) || (style?.borderWidth ? "solid" : "none"),
|
||||
borderColor: style?.borderColor || "transparent",
|
||||
borderRadius: style?.borderRadius || "0.5rem",
|
||||
backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
|
||||
color: finalDisabled ? "#9ca3af" : (style?.color || buttonTextColor), // 🔧 StyleEditor 텍스트 색상도 지원
|
||||
|
|
@ -1433,7 +1443,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
cancel: "취소",
|
||||
};
|
||||
|
||||
const buttonContent =
|
||||
const buttonTextContent =
|
||||
processedConfig.text ||
|
||||
component.webTypeConfig?.text ||
|
||||
component.componentConfig?.text ||
|
||||
|
|
@ -1447,16 +1457,17 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
<>
|
||||
<div style={componentStyle} className={className} {...safeDomProps}>
|
||||
{isDesignMode ? (
|
||||
// 디자인 모드: div로 렌더링하여 선택 가능하게 함
|
||||
<div
|
||||
className="transition-colors duration-150 hover:opacity-90"
|
||||
style={buttonElementStyle}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{buttonContent}
|
||||
<ButtonIconRenderer
|
||||
componentConfig={componentConfig}
|
||||
fallbackLabel={buttonTextContent as string}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
// 일반 모드: button으로 렌더링
|
||||
<button
|
||||
type={componentConfig.actionType || "button"}
|
||||
disabled={finalDisabled}
|
||||
|
|
@ -1467,7 +1478,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
|
|||
onDragEnd={onDragEnd}
|
||||
{...(actionType ? { "data-action-type": actionType } : {})}
|
||||
>
|
||||
{buttonContent}
|
||||
<ButtonIconRenderer
|
||||
componentConfig={componentConfig}
|
||||
fallbackLabel={buttonTextContent as string}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue