Skip to content

implementation_plan.md

Latest commit

 

History

History
68 lines (50 loc) · 4.09 KB

implementation_plan.md

File metadata and controls

68 lines (50 loc) · 4.09 KB

Lyria RealTime API 연동 기반 실시간 음악 앱 구현 계획

사용자가 제시한 프롬프트 및 디자인 요구사항(Glassmorphism, Dark Mode, Mobile-first)에 맞추어 Vite + React 기반의 음악 재생 및 커스텀 생성 앱 프론트엔드를 구축합니다.

User Review Required

Important

디자인 에셋 및 API 엔드포인트 확인

  1. 제공해주신 Stitch 링크는 비공개/권한 제어 페이지로 본문 추출이 제한됩니다. 따라서 전형적인 미래지향적 다크 모드 글래스모피즘(Deep Blue / Purple Accent) 색상표를 제가 자체적으로 구성하여 적용하겠습니다.
  2. Lyria RealTime API의 실제 엔드포인트나 인증 방식이 정해져 있다면 알려주세요. 우선은 WebSocket 기반의 통신을 상정하고 확장할 수 있는 목(Mock) 구조를 포함하여 lyriaApi.js 뼈대를 작성하겠습니다.

Proposed Architecture & Stack

  • Framework: React 18 (Vite)
  • Styling: Tailwind CSS (글래스모피즘 유틸리티 추가)
  • Icons: lucide-react
  • State Management: zustand (음악 재생 큐, 실시간 파라미터 제어 등 복잡한 상태 관리에 Context API보다 우수하고 가벼워 Zustand를 제안합니다.)
  • API: WebSocket / SSE 기반 커스텀 훅(useLyria.js) 및 서비스(services/lyriaApi.js)

📂 프로젝트 구조 제안

핵심 디렉토리 및 파일

[NEW] src/styles/

  • index.css: Tailwind CSS 지시어 및 글래스모피즘(Glassmorphism) 커스텀 유틸리티 클래스 (.glass-panel 등) 정의

[NEW] src/services/

  • lyriaApi.js: WebSocket을 통해 프롬프트(텍스트) 송신 및 오디오 세그먼트를 버퍼링하는 로직

[NEW] src/hooks/

  • useLyria.js: lyriaApi.js와 연결하여 React 컴포넌트 생명주기에 맞게 소켓 이벤트를 관리. Zustand 스토어 업데이트 및 무드/템포 슬라이더 상호작용 제어.

[NEW] src/store/

  • playerStore.js: 재생 큐, 현재 재생 정보(Metadata), 무드/템포 파라미터 등을 전역으로 관리하기 위한 Zustand 스토어

[NEW] src/components/

  • Layout.jsx: 모바일 우선주의 구조. 헤더, 메인 뷰포트, 하단 탭 바, 그라데이션 배경을 감싸는 루트 컨테이너.
  • Player.jsx: 상단에 위치할 실시간 플레이어 인터페이스 (앨범 아트워크, 트랙 정보, 재생/일시정지 버튼, 프로그레스 바)
  • Visualizer.jsx: 실시간 스트리밍 오디오 데이터를 시각화하는 캔버스 컴포넌트
  • ControlPanel.jsx: 사용자 텍스트 입력부(프롬프트) 및 슬라이더(무드/템포 다이얼) 컨트롤 포함

📝 단계별 구현(Execution) 계획

  1. Vite 환경 설정 및 패키지 설치
    • npx create-vite@latest ./ --template react 실행
    • tailwindcss, postcss, autoprefixer, lucide-react, zustand 패키지 설치
  2. Tailwind 설정 및 전역 스타일 (글래스모피즘) 구성
    • tailwind.config.js에 다크 모드 색상 팔레트 및 border-radius, box-shadow 커스텀 추가
  3. 상태 관리(Store) 및 API 서비스 골격 작성
    • playerStore.js 및 lyriaApi.js 설계
  4. UI 컴포넌트 개발
    • Layout, Player, ControlPanel, Visualizer 순서로 개발 및 조립. 모든 컴포넌트는 모바일 우선 반응형으로 설계.
  5. 통합 및 테스트
    • 커스텀 훅 useLyria.js를 통해 UI와 상태(Store) 연동 과정 검증

Open Questions

Warning

현재 디렉토리 c:\Works\Cera에 zip 파일 및 readme.md가 존재합니다. Vite 프로젝트 템플릿으로 이 폴더를 직접 초기화(현재 폴더 내 직접 설치)해도 괜찮은지 확인 부탁드립니다.

Verification Plan

  1. Automated Check: npm run dev 실행 후 렌더링 에러가 발생하지 않는지 확인
  2. Manual Check:
    • 모바일 & 데스크탑 비율에서 하단 탭과 상단 플레이어 레이아웃이 깨지지 않는지 브라우저에서 확인.
    • 슬라이더 및 프롬프트 입력 시 Zustand 내부 상태가 정상적으로 바뀌는지 확인.