시계 모듈

시계 모듈은 현재 레지스트리에 등록된 기본 모듈입니다. src/components/ClockModule.tsx에서 clockModuleDefinition으로 export됩니다.

구성

구성 요소	구현
`Provider`	`ClockModuleProvider`
`Module`	`ClockModuleCanvas`
`Extension`	`ClockModuleExtension`
`AdvancedExtension`	`ClockModuleAdvancedExtension`
`SizeExtension`	`ClockModuleSizeExtension`
`createInstance`	`createClockModuleInstance`
`container.chromeVisibility`	`transient`
`container.dragSurface.shape`	`circle`
`container.dragSurface.ignoreSelector`	`.clock-hand`
`container.size`	`fit-content`
`container.removeButton.position`	`center`
`container.resize.mode`	`locked-aspect-ratio`

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

ClockModuleCanvas는 캔버스에 시계 자체만 표시합니다.

AnalogClock을 렌더링합니다.
학습 안내나 조작 버튼은 포함하지 않습니다.
컨테이너는 fit-content로 설정되어 시계 콘텐츠 크기에 맞습니다.
moduleDragHandleProps는 실제 시계판인 .clock-face에만 부착합니다. 시계 바깥의 투명 영역은 모듈 이동을 시작하지 않습니다.
dragSurface.ignoreSelector로 .clock-hand를 제외해 바늘 드래그는 시간 조정으로 유지합니다.
시계 오른쪽 엣지, 아래 엣지, 오른쪽 아래 코너를 드래그하면 크기를 조절합니다.
크기 조절 시 가로와 세로는 항상 같은 비율로 커집니다.
직접 드래그 리사이즈는 최소 크기만 유지하고 별도 최대 크기 상한은 두지 않습니다.
.clock-stage와 모듈 컨테이너는 그림자가 잘리지 않도록 overflow를 열어둡니다.

시계 모듈은 container.chromeVisibility: "transient"를 사용합니다.

시계판을 더블클릭하면 컨테이너 박스와 상단 이동 바가 표시됩니다.
마우스가 모듈 밖으로 벗어나면 컨테이너 박스와 상단 이동 바가 다시 숨겨집니다.
컨테이너 박스가 보이는 동안 상단 이동 바를 드래그하면 모듈을 이동할 수 있습니다.
Option 키를 누르면 모든 모듈 중앙에 Remove 버튼이 표시됩니다.
Remove 버튼을 클릭하면 해당 시계 모듈 인스턴스가 캔버스에서 제거됩니다.
공통 Module 패널은 런타임이 자동으로 추가하며, Advance 안에서 모듈 위치, 가로/세로 크기, 확대/축소, 회전을 직접 입력할 수 있습니다.

ClockModuleExtension은 선택된 시계 모듈의 오른쪽 패널에 표시됩니다.

LearningPanel: 선택한 바늘, 현재 시간, 영어 읽기 문장을 표시합니다.
ControlPanel: Reset, Run, Now, Read, 빠른 시계 크기 조절을 제공합니다.
ClockModuleAdvancedExtension: 공통 Advance의 Custom 그룹에서 1-12 또는 0-60 라벨 표시를 전환합니다.
ClockModuleSizeExtension: 공통 Advance의 Shared > 크기 그룹에서 가로/세로 크기를 입력합니다. 시계는 고정 비율 모듈이므로 가로 또는 세로 중 하나를 바꾸면 다른 값도 같은 크기로 맞춰집니다.

시계 계산은 UI와 분리되어 있습니다.

파일	역할
`src/features/clock/timeMath.ts`	시간, 각도, 디지털 표시 변환
`src/features/clock/dragMath.ts`	포인터 좌표를 각도로 변환하고 회전 방향을 계산
`src/features/clock/useClockController.ts`	실행 상태와 사용자 명령을 시간 모델에 반영

이 분리 덕분에 시계 모듈의 UI 배치가 바뀌어도 계산 테스트는 독립적으로 유지됩니다.