기능 빌더 (요약)

기능 빌더는 관리자(/admin/feature-builder)에서 기능 페이지(/feature/:id)의 레이아웃과 콘텐츠를 시각적으로 편집하는 도구입니다. 챗봇·커뮤니티·태스크·저장소·문서 등 빌더에 등록된 카테고리가 실제 라우트로 노출됩니다.

흐름

카테고리 — 기능 단위. 각 카테고리가 /feature/:id 한 페이지에 대응합니다.
캔버스 — 24열 그리드. 툴킷에서 위젯을 드래그해 배치하고, 크기 조절·삭제할 수 있습니다.
설정 패널 — 위젯 선택 시 오른쪽에 표시. 스타일 & 콘텐츠(라벨, 강조색, 배경 등)와 데이터 소스(REST/GraphQL URL, 헤더, 응답 매핑)를 설정합니다.
미리보기 — 캔버스에 실제 위젯이 렌더되며, 설정 변경 시 즉시 반영됩니다.

타입	섹션	최소 크기(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	빈 슬롯 (툴킷 미노출)

아래 위젯은 Vue 컴포넌트로 구현되어 있으며 feature-widgets/ 폴더에 존재하지만, builderComponents.ts 레지스트리에 아직 등록되지 않아 드래그·드롭 툴킷에는 표시되지 않습니다.

타입	컴포넌트	설명
`textLabel`	`TextLabelWidget.vue`	텍스트 라벨
`iconSlot`	`IconSlotWidget.vue`	아이콘 슬롯
`milestone`	`MilestoneWidget.vue`	마일스톤 진행 표시
`dataTableConnector`	`DataTableConnectorWidget.vue`	데이터 테이블 커넥터
`miniChart`	`MiniChartWidget.vue`	미니 차트

위치: 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), 홈 카드 설정, 이벤트 규칙 등
저장 방식: 백엔드 API(VITE_API_URL)를 통해 서버에 저장 — lib/siteSettings.ts의 saveSiteSettingJson() 경유
스토리지 버전: v2 포맷 (버전 불일치 시 기본값으로 초기화)
기본 카테고리: chatbot, community, tasks, github, docs