포스트잇 모듈

포스트잇 모듈은 캔버스에 짧은 메모를 붙이는 모듈입니다. src/components/PostItModule.tsx에서 postItModuleDefinition으로 export됩니다.

구성

구성 요소	구현
Provider	PostItModuleProvider
Module	PostItModuleCanvas
Extension	PostItModuleExtension
SizeExtension	PostItModuleSizeExtension
createInstance	createPostItModuleInstance
container.chromeVisibility	transient
container.dragSurface.shape	rect
container.size	fit-content
container.removeButton.position	top-right
container.resize.mode	freeform

인스턴스 상태

포스트잇의 사용자 상태는 CanvasModuleInstance.state에 저장되고 App의 undo/redo 히스토리에 포함됩니다. PostItModuleProvider는 이 상태를 읽고 updateModuleState로 갱신합니다.

• 메모 본문
• 포스트잇 색상 톤
• 포스트잇 가로 크기
• 포스트잇 세로 크기

캔버스 본문

PostItModuleCanvas는 실제 포스트잇 형태의 메모지를 렌더링합니다.

• 상단 strip에 moduleDragHandleProps를 부착합니다.
• 본문 textarea는 메모 편집 전용입니다.
• 텍스트 편집과 모듈 이동이 충돌하지 않도록 textarea에는 드래그 핸들 props를 부착하지 않습니다.
• 오른쪽 엣지를 드래그하면 가로 크기를 조절합니다.
• 아래 엣지를 드래그하면 세로 크기를 조절합니다.
• 오른쪽 아래 코너를 드래그하면 가로/세로 크기를 함께 조절합니다.
• 포스트잇 크기가 바뀌어도 메모 텍스트 크기는 고정됩니다.
• 컨테이너는 fit-content로 설정되어 포스트잇 크기에 맞습니다.

확장 패널

PostItModuleExtension은 선택된 포스트잇 모듈의 오른쪽 패널에 표시됩니다.

• 메모 본문을 사이드바에서도 편집할 수 있습니다.
• Lemon, Mint, Rose 색상 톤을 선택할 수 있습니다.
• 공통 Module 패널은 런타임이 자동으로 추가하며, Advance 안에서 모듈 위치, 가로/세로 크기, 확대/축소, 회전을 직접 입력할 수 있습니다.
• PostItModuleSizeExtension: 공통 Advance의 Shared > 크기 그룹에서 가로와 세로 크기를 독립적으로 입력합니다.

공통 기능 사용

포스트잇 모듈은 모듈 런타임의 공통 기능을 직접 재구현하지 않습니다.

공통 기능	포스트잇 적용
드래그 앤 드롭	상단 strip에 moduleDragHandleProps 부착
확대	사이드바 공통 Advance 패널의 확대/축소 입력 사용
삭제	Option 키를 누르면 오른쪽 위에 Remove 버튼 표시
컨테이너 크롬	포스트잇을 더블클릭하면 박스와 상단 이동 바 표시
사이드바	메모 편집과 색상 선택은 Extension에서 제공