Analog Clock Learning App

Analog Clock Learning App은 아이들이 아날로그 시계의 원리를 직접 조작하며 익히는 React 애플리케이션입니다.

현재 앱은 단일 시계 화면에서 출발해, 여러 학습 기능을 무한 캔버스 위의 독립 모듈로 배치할 수 있는 구조로 확장되었습니다. 각 모듈은 캔버스 위에 표시되는 본문과, 선택되었을 때 오른쪽에 표시되는 확장 패널을 분리해서 제공합니다.

핵심 기능

• 시침, 분침, 초침을 클릭하거나 드래그해서 시간을 조작합니다.
• 한 바늘을 움직이면 실제 시간 흐름에 맞춰 다른 바늘도 함께 움직입니다.
• Reset, Run, Now, Read 명령으로 기본 연습 흐름을 제공합니다.
• Read는 현재 시간을 영어 문장으로 만들고 Web Speech API로 읽어줍니다.
• Advance 설정에서 숫자 라벨과 시계 크기를 조절합니다.
• 무한 캔버스 위에 시계 모듈을 여러 개 추가하고 이동할 수 있습니다.
• 선택된 모듈의 상세 정보와 조작 패널은 캔버스 오른쪽 확장 영역에 표시됩니다.

현재 모듈 구성

영역	역할
title	캔버스 카드와 확장 패널에 표시되는 모듈 이름
description	모듈이 제공하는 학습 목적 설명
Module	캔버스 위에 배치되는 실제 학습 도구
Extension	모듈 선택 시 오른쪽 패널에 표시되는 상세 정보와 조작 UI

관련 코드

• 앱 조립: src/App.tsx
• 캔버스 호스트: src/components/InfiniteCanvas.tsx
• 시계 모듈 정의: src/components/ClockModule.tsx
• 모듈 계약: src/modules/types.ts
• 모듈 레지스트리: src/modules/registry.ts