Appearance
기능 빌더 (요약)
기능 빌더는 관리자(/admin/feature-builder)에서 챗봇 기능 페이지(/feature/:id)의 레이아웃과 콘텐츠를 시각적으로 편집하는 도구입니다.
흐름
- 카테고리 — 기능 단위. 각 카테고리가
/feature/:id한 페이지에 대응합니다. - 캔버스 — 24열 그리드. 툴킷에서 위젯을 드래그해 배치하고, 크기 조절·삭제할 수 있습니다.
- 설정 패널 — 위젯 선택 시 오른쪽에 표시. 스타일 & 콘텐츠(라벨, 강조색, 배경 등)와 데이터 소스(REST/GraphQL URL, 헤더, 응답 매핑)를 설정합니다.
- 미리보기 — 캔버스에 실제 위젯이 렌더되며, 설정 변경 시 즉시 반영됩니다.
위젯 레지스트리
- 위치:
apps/web-ui/src/config/builderComponents.ts - 역할: 툴킷 목록, 최소 크기(minW/minH), 그리드 아이콘을 한 곳에서 정의
현재 등록 위젯
| 타입 | 섹션 | 최소 크기(W×H) | 설명 |
|---|---|---|---|
button | basic | 2×1 | 기능 버튼 |
menu | basic | 2×1 | 드롭다운 메뉴 |
dialog | basic | 2×1 | 다이얼로그 |
checkbox | basic | 2×1 | 체크박스 |
combobox | basic | 2×1 | 콤보박스 |
textField | basic | 2×1 | 텍스트 필드 |
textarea | basic | 2×2 | 텍스트 영역 |
image | basic | 2×2 | 이미지 |
icon | basic | 1×1 | 아이콘 |
radio | basic | 2×1 | 라디오 버튼 |
placeholder | — | 1×1 | 빈 슬롯 (툴킷 미노출) |
위젯 컴포넌트 (구현)
- 위치:
apps/web-ui/src/components/feature-widgets/ - 설정 패널:
apps/web-ui/src/components/builder-config/(위젯별BuilderConfig*.vue) - 매핑:
feature-widgets/index.ts의featureWidgetMap(type → Vue 컴포넌트) - 사용처: 빌더 캔버스,
FeaturePageContent.vue,ChatPage.vue
데이터·저장
- 스토어:
stores/featureBuilder.ts(Pinia) - 저장: 카테고리 목록, 카테고리별 그리드 레이아웃(lg/md/sm 등), 슬롯별 설정(slotProps), 홈 카드 설정 등
- 로컬 스토리지 키:
loafacto-feature-builder(추후 Supabase 백엔드 연동 예정)