77 lines
5.1 KiB
YAML
77 lines
5.1 KiB
YAML
feature: 레이아웃 편집기 목록 빌트인 — children 노드 에디터(STRUCT-TREE)
|
|
|
|
description: |
|
|
목록/컨테이너 컴포넌트(Ul/Ol/Nav/Form/Li)의 **자식 노드 트리**(node.children)를 속성 모달
|
|
본체에서 구조 편집한다. capability 의 일반 슬롯 `nodeEditor:{kind:"children",params:{childComponent}}`
|
|
(부록4-ter)로 선언하고, 코어 빌트인 ChildrenListControl 을 registerCoreEditors 가
|
|
registerNodeEditor('children', ...) 로 일반 레지스트리에 등록한다(특권 분기 0 — 코어는 kind 만
|
|
알고 컴포넌트명을 가정하지 않음).
|
|
|
|
핵심 동작:
|
|
- 항목 추가: params.childComponent(Ul/Ol=Li, Nav=A, Form=Input, Li=Span)의 defaultNode
|
|
(spec.componentPalette.entries) 또는 manifest props.default 폴백으로 새 자식 노드를
|
|
children 끝에 append → onPatchNode({...node, children}) (노드 전체 교체 = PATCH_LAYOUT 생존).
|
|
- 항목 삭제/정렬: children 배열에서 제거/스왑(경계 가드: 첫 위로/마지막 아래로 비활성).
|
|
- 항목 텍스트 다국어: 평문 항목 blur(변경) → createCustomKey → 항목 text 를 `$t:custom.*` 로
|
|
치환(인라인 편집과 동일 모델). 기존 커스텀 키 → updateCustomKeyValue(현재 로케일 값만, key 유지).
|
|
텍스트 없는 구조 자식(다른 컴포넌트)은 컴포넌트명 라벨만 + 정렬/삭제.
|
|
- 캔버스 드래그앤드롭(자식 노드 직접 드래그)은 동일 children 배열을 패치하므로 양립(SSoT 1벌).
|
|
|
|
axes:
|
|
component: [Ul, Ol, Nav, Form, Li]
|
|
operation: [add, remove, move_up, move_down, edit_text]
|
|
item_text_kind: [plain_new, existing_custom_key, structural_no_text]
|
|
template: [sirsoft-basic, sirsoft-admin_basic]
|
|
|
|
exclusions:
|
|
- { component: Ol, template: sirsoft-basic, reason: "sirsoft-basic 에 Ol 컴포넌트 미등록(부재)" }
|
|
- { operation: edit_text, item_text_kind: structural_no_text, reason: "구조 자식은 text 미보유 — 정렬/삭제만, 텍스트 편집 비대상" }
|
|
- { operation: add, item_text_kind: existing_custom_key, reason: "추가는 평문 기본값 — 기존 키 아님" }
|
|
- { operation: add, item_text_kind: structural_no_text, reason: "추가는 childComponent defaultNode(text 기본값) — 구조 자식 아님" }
|
|
- { operation: remove, item_text_kind: existing_custom_key, reason: "삭제는 텍스트 종류 무관(배열 제거)" }
|
|
- { operation: remove, item_text_kind: structural_no_text, reason: "동일" }
|
|
- { operation: move_up, item_text_kind: existing_custom_key, reason: "정렬은 텍스트 종류 무관(배열 스왑)" }
|
|
- { operation: move_up, item_text_kind: structural_no_text, reason: "동일" }
|
|
- { operation: move_down, item_text_kind: existing_custom_key, reason: "동일" }
|
|
- { operation: move_down, item_text_kind: structural_no_text, reason: "동일" }
|
|
|
|
effects:
|
|
# capability/등록
|
|
- children_capability_declared_on_ul_ol_nav_form_li_both_templates
|
|
- children_editor_registered_via_registercoreeditors_kind_agnostic
|
|
- property_modal_dispatches_children_node_editor_in_props_tab_by_kind_not_name
|
|
# 구조 편집(추가/삭제/정렬)
|
|
- add_item_appends_childcomponent_defaultnode_to_children
|
|
- add_item_patches_whole_node_so_props_survive_patch_layout
|
|
- remove_item_drops_only_that_child_from_children
|
|
- move_up_down_swaps_adjacent_children_with_boundary_guard
|
|
- canvas_drag_drop_and_list_editor_share_same_children_array
|
|
# 항목 다국어
|
|
- plain_item_blur_creates_custom_key_and_replaces_text_with_dollar_t_custom
|
|
- existing_custom_key_blur_updates_current_locale_value_keeps_key
|
|
- structural_child_without_text_shows_component_name_label_only
|
|
- unchanged_blur_is_noop_no_crud_call
|
|
# misconfigure 안전
|
|
- missing_child_component_capability_shows_misconfigured_notice
|
|
# 겹친 부모 선택(타입 칩 ↑ + 키보드)
|
|
- overlapping_child_selected_type_chip_escalates_to_parent
|
|
- keyboard_arrowup_escape_escalates_selection_to_parent
|
|
- root_node_type_chip_degrades_to_non_clickable_label
|
|
# 라이브(E2E)
|
|
- live_add_li_edit_text_reorder_save_persists_to_user_page
|
|
|
|
test_files:
|
|
- resources/js/core/template-engine/layout-editor/__tests__/components/ChildrenListControl.test.tsx
|
|
- resources/js/core/template-engine/layout-editor/__tests__/spec/editorRegistries.test.ts
|
|
- resources/js/core/template-engine/layout-editor/__tests__/spec/basicPropControlCoverage.test.ts
|
|
- resources/js/core/template-engine/layout-editor/__tests__/spec/adminPropControlCoverage.test.ts
|
|
- resources/js/core/template-engine/layout-editor/__tests__/components/ElementOverlay.test.tsx
|
|
- tests/Playwright/specs/layout-editor/children-list-editor.spec.ts
|
|
|
|
validation:
|
|
note: |
|
|
Vitest 단위가 axes cross product 회귀(추가/삭제/정렬/평문→커스텀키/기존키/구조자식/misconfigure)와
|
|
capability 부착·등록을 잠근다. Playwright E2E 가 라이브 편집기에서 Ul 선택 → Li 추가 → 항목 텍스트
|
|
편집 → 정렬 → 저장 → 게스트 사용자 페이지 반영(항목 순서/텍스트)을 브라우저로 검증한다.
|
|
e2e_spec: tests/Playwright/specs/layout-editor/children-list-editor.spec.ts
|