Split Screen

드래그 앤 드롭 분할, center 탭 정렬, 타이틀/안내/More UI 커스터마이징을 한 Split Screen에서 구성합니다.

기본 SplitScreen

FlexLayoutSplitScreen은 중앙 컴포넌트를 기준으로 before/center/after 영역을 store에 관리합니다. DragBox가 이 화면 위에 drop되면 위치에 따라 row 또는 column 분할이 생성되고, 같은 center에 들어온 화면은 탭처럼 관리됩니다.

tsx

navigationTitle과 타이틀 렌더링

navigationTitle은 화면의 라벨 데이터이고, navigationTitleComponent는 Split Screen이 각 라벨을 실제 타이틀 UI로 렌더링할 때 사용하는 공통 래퍼입니다. DragBox는 navigationTitle 문자열만 전달하며 navigationTitleComponent를 들고 이동하지 않습니다.

도착한 Split Screen의 디자인을 사용합니다.

화면을 다른 Split Screen으로 이동하면 타이틀 라벨 데이터는 유지되지만, 렌더링 디자인은 도착한 Split Screen의 navigationTitleComponent를 따릅니다.

tsx

분할 안내와 More UI 커스터마이징

titleWrapperComponent

navigationTitleComponent와 titleCloseButtonComponent를 함께 감싸는 공통 래퍼입니다. 생략하면 별도 DOM wrapper를 만들지 않습니다.

titleCloseButtonComponent

center 탭의 닫기 UI를 교체합니다. undefined면 기본 X 버튼을 사용하고 null이면 닫기 버튼을 숨깁니다.

dropGuideComponent

분할 가능한 영역에 드래그했을 때 표시되는 기본 안내 UI를 교체합니다. 생략하면 기본 안내 문구를 사용합니다.

titleMoreButtonComponent

타이틀 오른쪽의 ... 트리거만 교체합니다. undefined면 기본 버튼을 사용하고 null이면 More를 숨깁니다.

renderTitleMoreMenuItems

기본 More 메뉴를 유지하면서 사용자 메뉴 항목을 아래에 추가합니다.

renderTitleMoreMenu

기본 메뉴 내용을 전부 교체합니다. Portal, 위치 계산, 바깥 클릭, Escape 닫기는 라이브러리가 계속 처리합니다.

tsx

기본 More 메뉴와 확장 context

기본 More 메뉴는 현재 탭 닫기, 다른 탭 모두 닫기, 오른쪽 탭 모두 닫기, 현재 분할의 탭 모두 닫기, openUrl이 있을 때 새 창에서 열기를 제공합니다.

identity

rootName, layoutName, containerName, screenKey

active tab

activeItem, activeIndex

tabs

items

actions

closeMenu(), closeCurrentTab(), closeOtherTabs(), closeTabsToRight(), closeAllTabs(), openInNewWindow()

availability

canCloseOtherTabs, canCloseTabsToRight, canOpenInNewWindow

메뉴는 document.body에 React Portal로 렌더링됩니다. trigger와 menu의 실제 크기를 기준으로 viewport 안에 배치하고 scroll/resize 시 위치를 다시 계산하므로 Split Screen 내부 overflow에 잘리지 않습니다.

center 탭 타이틀 순서 변경

같은 Split Screen의 center 탭 타이틀을 드래그해 순서를 바꿀 수 있습니다. 대상 타이틀의 왼쪽 절반에 놓으면 앞, 오른쪽 절반에 놓으면 뒤로 이동하며 활성 탭은 screenKey 기준으로 유지됩니다.

타이틀 reorder와 화면 분할은 drop 영역이 분리됩니다.

타이틀 영역에서는 탭 정렬만 처리하므로 분할 안내가 표시되지 않습니다. 타이틀을 실제 Split Screen 영역으로 끌고 나가면 기존 화면 분할 drag 동작을 그대로 사용할 수 있습니다.

Escape로 drag 취소

DragBox를 드래그하는 중 Escape를 누르면 현재 drag clone과 pending drag state를 정리하고 isDragging false / isDrop false 상태를 전파합니다. 분할 안내 UI는 즉시 사라지고 이후 mouse/touch 종료에서도 drop이 실행되지 않습니다.

Next.js에서 URL로 화면 드롭

v1.0.0 Next.js entry

FlexLayoutSplitScreen 자체는 그대로 분할 화면을 관리합니다. Next.js에서 URL만으로 page.tsx를 서버 렌더링해 드롭하려면 @byeolnaerim/flex-layout/next의 DragBox와 생성된 FlexLayoutNextSplitScreen을 사용하세요.

tsx

상태 생명주기 옵션

preserveStateOnUnmount

true면 FlexLayoutSplitScreen이 언마운트되어도 현재 JavaScript runtime의 in-memory split store를 유지합니다. 브라우저 새로고침 persistence와는 별개이며 기본값은 false입니다.

screenKey

split screen 내 화면을 식별하는 key입니다. 생략하면 내부에서 생성됩니다.

Deprecated lifecycle props

isResetOnChildrenChange는 더 이상 런타임 동작에 사용되지 않으며 제거 예정입니다. isRemoveStoreOnUnmount도 preserveStateOnUnmount로 대체되었고 호환용 deprecated alias만 남아 있습니다.

새로고침과 브라우저 URL 복원

Next.js URL pane persistence

브라우저 새로고침까지 분할 상태를 복원하려면 생성된 FlexLayoutNextSplitScreen에 persistence를 지정합니다. ReactElement를 저장하지 않고, 다시 생성할 수 있는 Next URL pane의 metadata만 storage에 저장합니다.

tsx