88 lines
5.9 KiB
YAML
88 lines
5.9 KiB
YAML
feature: 레이아웃 편집기 데이터 정의 빌트인 — 전 컴포넌트 데이터 표면 보강
|
||
|
||
description: |
|
||
부록8 — propControl(스칼라 prop)은 1-a~1-c 로 전수 부여됐으나
|
||
컴포넌트의 "데이터"(옵션/항목/차트 데이터셋/중첩 컬럼/제공자 목록 등 구조적 데이터)를
|
||
편집기에서 정의할 표면이 빈약했다. 8-a 전수 감사 분류표(계획서 (C)~(E))대로 미커버
|
||
데이터 표면을 기존 array 에디터 재사용 + 최소 확장으로 메운다(누락 0 게이트).
|
||
|
||
8-b 착수 대상(8-a (E)):
|
||
1. TabNavigationScroll.tabs — nodeEditor:array(tabs) 부착(TabNavigation 동형, 정적 8/0).
|
||
2. DonutChart.data — nodeEditor:array(data) name/value(number)/color(color), 정적 편집.
|
||
3. DynamicFieldList.columns — nodeEditor:array(columns) key/type(select)/label/placeholder.
|
||
4. SocialLoginButtons.providers — nodeEditor:array(providers) 원시 string[] enum select.
|
||
5. BarChart.labels+datasets — nodeEditor:array-group(다중 배열). datasets[].data 는
|
||
number-list 위젯(콤마 구분 number[]).
|
||
6. CardGrid.cardColumns — nodeEditor:array-cell-tree(컬럼 층 추가/삭제/정렬+id +
|
||
셀 트리 층 cellChildren 을 ChildrenListControl 재사용). "셀 트리 전체" 결정 2026-06-08.
|
||
|
||
검토군 판정(8-a (E) #6): ChipCheckbox.value 는 propControl ccValue(propValue→value)로 이미
|
||
커버 → 데이터 편집 비대상. MultilingualTagInput/Toggle/Checkbox.value 는 런타임 scalar →
|
||
데이터 편집 비대상. ImageGallery/FilterGroup 은 dataProps 바인딩전용 디그레이드 유지.
|
||
|
||
신규 에디터 종류 최소화(부록4-ter): array-group 은 ArrayItemsEditor 를 그룹마다 재사용하는
|
||
얇은 래퍼(새 편집 의미 0), array-cell-tree 는 컬럼 array + ChildrenListControl 재사용(새 편집
|
||
의미 0). number/color/number-list 는 ArrayItemsEditor 필드 위젯 확장.
|
||
|
||
공존 모델(계획서 (G), 90aec9470): 데이터 prop 은 정적 편집(nodeEditor)과 바인딩(dataProps)을
|
||
공존. 정적값이면 nodeEditor 로 편집, `{{...}}` 바인딩이면 nodeEditor 디그레이드 + dataProps
|
||
데이터연결로 — 한 컴포넌트가 양쪽 표면 보유.
|
||
|
||
# axes — 8-b 데이터 표면 종류 × 검증 측면. 컴포넌트는 surface 가 대표(surface↔component 1:1)이고,
|
||
# 위젯/연산은 surface 별로 의미가 갈리므로 surface × aspect 2축으로 cross product 를 최소화한다.
|
||
axes:
|
||
data_surface: [single_object_array, multi_array, cell_tree, primitive_enum_array, flat_typed_array]
|
||
aspect: [capability_attach, field_widget, structure_op, binding_guard]
|
||
|
||
exclusions:
|
||
# field_widget aspect 는 위젯을 보유한 surface 에서만(차트/타입 위젯이 의미 있는 surface).
|
||
- { aspect: field_widget, data_surface: cell_tree, reason: "셀 트리는 위젯 아닌 ChildrenListControl 위임 — structure_op 로 검증" }
|
||
- { aspect: field_widget, data_surface: primitive_enum_array, reason: "원시 enum 은 select 단일 — capability_attach 로 충분" }
|
||
# binding_guard(디그레이드)는 대표 2종(단일 객체 배열=ArrayItemsEditor, 셀 트리=ArrayCellTreeEditor)만.
|
||
- { aspect: binding_guard, data_surface: multi_array, reason: "array-group 은 그룹별 ArrayItemsEditor 가드 동일 — 대표 single 로 커버" }
|
||
- { aspect: binding_guard, data_surface: primitive_enum_array, reason: "ArrayItemsEditor 동일 가드 — 대표 single 로 커버" }
|
||
- { aspect: binding_guard, data_surface: flat_typed_array, reason: "동일" }
|
||
|
||
effects:
|
||
# capability/등록
|
||
- data_builtin_capability_attached_to_8a_targets_both_templates
|
||
- array_group_editor_registered_via_registercoreeditors_kind_agnostic
|
||
- array_cell_tree_editor_registered_via_registercoreeditors_kind_agnostic
|
||
- property_modal_dispatches_data_builtin_node_editor_in_props_tab_by_kind
|
||
# 신규 필드 위젯
|
||
- array_editor_number_widget_writes_numeric_value
|
||
- array_editor_color_widget_writes_hex_string
|
||
- array_editor_number_list_widget_parses_comma_separated_into_number_array
|
||
- array_editor_newitem_shape_matches_component_read_shape
|
||
# array-group(다중 배열)
|
||
- array_group_renders_multiple_array_editors_per_group
|
||
- array_group_patch_one_group_preserves_other_group_value
|
||
- array_group_misconfigured_when_no_groups
|
||
# array-cell-tree(중첩 셀 트리)
|
||
- cell_tree_column_add_remove_move_with_id_edit
|
||
- cell_tree_expand_edits_cellchildren_via_children_control
|
||
- cell_tree_binding_expression_degrades_to_bound_notice
|
||
- cell_tree_missing_array_prop_shows_misconfigured_notice
|
||
# 검토군 판정(데이터 편집 비대상 — 회귀 가드)
|
||
- review_group_chipcheckbox_value_covered_by_propcontrol_not_dataprop
|
||
# 공존 모델(정적+바인딩)
|
||
- data_prop_static_nodeeditor_coexists_with_binding_dataprops
|
||
# 라이브(E2E)
|
||
- live_donut_data_item_edit_save_persists_to_user_page
|
||
- live_barchart_dataset_edit_save_persists_to_user_page
|
||
|
||
test_files:
|
||
- resources/js/core/template-engine/layout-editor/__tests__/components/ArrayItemsEditor.test.tsx
|
||
- resources/js/core/template-engine/layout-editor/__tests__/components/ArrayGroupAndCellTreeEditor.test.tsx
|
||
- resources/js/core/template-engine/layout-editor/__tests__/spec/editorRegistries.test.ts
|
||
- resources/js/core/template-engine/layout-editor/__tests__/spec/dataBuiltinCapabilityShape.test.ts
|
||
- tests/Playwright/specs/layout-editor/data-builtins.spec.ts
|
||
|
||
validation:
|
||
note: |
|
||
Vitest 단위가 axes cross product 회귀(number/color/number-list 위젯, array-group 다중 배열
|
||
그룹 격리, array-cell-tree 컬럼 CRUD+id+셀 트리 위임, 바인딩 디그레이드/미선언, newItem
|
||
shape↔컴포넌트 read shape 정합, 검토군 비대상 판정)와 capability 부착 정합을 잠근다.
|
||
Playwright E2E(data-builtins.spec.ts)는 DonutChart.data / BarChart.datasets 편집→저장 200→
|
||
실사용자 화면 렌더를 라이브로 확인한다(§공통 5단계 — 항목 patch 만으로 통과 금지).
|