[FEAT] 분석 마디 선택 화면 UI 및 제어 로직 개발

[andada-creator]

📌 요약

기능의 목적을 한 줄로 작성해주세요.

API 연동 전, 화면 설계서 기반의 UI 마크업과 클라이언트 사이드 마디 선택 제어 및 예외 처리 로직을 선구현합니다.

🛠️ 작업할 내용

헤더 및 컨트롤러 UI 구현

• 뒤로가기 버튼 구현

• 재생 / 정지 버튼 및 처음으로 버튼 구현

악보 및 핸들러 UI 구현

• OSMD 기반 악보 렌더링 화면 및 선택 구간 하이라이트 UI 구현

• 분석 시작 마디 / 종료 마디 선택 핸들러 구현

사용자 인터랙션 및 예외 로직 처리

• 32마디 초과 선택 시: [분석 구간은 1~32마디 사이로 선택해 주세요] 경고 노출 및 분석하기 버튼 비활성화

• 구간 미선택(시간값 0) 상태로 분석 클릭 시: “분석할 구간을 먼저 선택해주세요” 토스트 노출

버튼 클릭 시 화면 이동(라우팅)

• 뒤로가기 클릭 시 이전 페이지 이동

• 분석하기 성공 시 결과 페이지 이동 (마디 데이터 가상 연동)

📎 참고 사항

디자인 시안, API 명세, 참고 링크 등을 첨부해주세요.

VexFlow 기반의 OSMD를 활용하여 MusicXML 악보 데이터를 화면에 렌더링하고 제어합니다.
https://vexflow.com/
https://github.com/opensheetmusicdisplay/opensheetmusicdisplay
https://help.flat.io/ko/general/developers-api-embed/