02_기본설계

1. 프로젝트 구조 설계 (업데이트)

플레이어 컴포넌트를 기본 플레이어와 미니 플레이어로 분리하고, WaveformVisualizer를 기본 플레이어에 포함하여 설계합니다.

my-music-app/
├── public/
├── src/
│   ├── assets/               # 이미지, 아이콘 등 정적 파일
│   ├── components/           # UI 컴포넌트들
│   │   ├── Player/           # 플레이어 관련 컴포넌트들
│   │   │   ├── FullPlayer.js         # 전체 플레이어 (WaveformVisualizer 포함)
│   │   │   ├── MiniPlayer.js         # 미니 플레이어 (간단한 재생 정보 표시)
│   │   │   └── WaveformVisualizer.js # 오디오 파형 시각화 (FullPlayer에 포함)
│   │   ├── Playlist/         # 재생목록 관련 컴포넌트
│   │   ├── Album/            # 앨범 관련 컴포넌트
│   │   ├── Settings/         # 설정 관련 컴포넌트
│   │   ├── Account/          # 계정 관리 및 연동 컴포넌트
│   │   ├── FileUpload/       # 파일 추가 및 다운로드 모달 컴포넌트
│   │   └── FormatOptions/    # 다운로드 포맷 선택 옵션
│   ├── pages/                # 주요 페이지 구성
│   │   ├── Home.js           # 메인 페이지
│   │   ├── PlaylistPage.js   # 재생목록 페이지
│   │   ├── AlbumPage.js      # 앨범 페이지
│   │   ├── SettingsPage.js   # 설정 페이지
│   │   └── AccountPage.js    # 계정 페이지
│   ├── services/             # API 및 데이터베이스 연동 서비스
│   │   ├── api.js            # 외부 API 연동 모듈 (Spotify, YouTube 등)
│   │   ├── database.js       # 클라우드 기반 데이터베이스 관리
│   │   ├── downloader.js     # 서버리스 yt-dlp 다운로드 및 포맷 변환 관리
│   │   └── auth.js           # 계정 인증 및 관리 기능
│   ├── App.js                # 전체 앱 구성 및 라우팅
│   ├── index.js              # 엔트리 포인트
│   └── utils/                # 공통 함수, 유틸리티 모듈
│       └── helpers.js
└── package.json

2. 기능별 컴포넌트와 역할

Player 컴포넌트 구성

FullPlayer (전체 플레이어)
- 설명: 전체 플레이어는 재생, 일시정지, 다음/이전 트랙, 볼륨 조절 등의 기본 컨트롤을 제공하며, WaveformVisualizer를 통해 오디오 파형을 실시간으로 시각화합니다.
- 구성 요소:
  - 컨트롤 버튼: 재생, 일시정지, 이전 트랙, 다음 트랙
  - WaveformVisualizer: 오디오의 실시간 파형을 시각화하는 컴포넌트
  - 트랙 정보: 현재 재생 중인 트랙의 제목과 아티스트 정보 표시
- 사용 방법: 기본 플레이어로 사용되며, 페이지 하단에 고정 배치되어 사용자가 현재 재생 중인 음악의 정보를 상세히 볼 수 있습니다.
MiniPlayer (미니 플레이어)
- 설명: 미니 플레이어는 상단에 작은 사이즈로 현재 재생 중인 트랙의 정보를 표시합니다. 사용자는 페이지를 탐색하는 동안에도 현재 재생 중인 음악을 확인할 수 있습니다.
- 구성 요소:
  - 트랙 정보: 현재 재생 중인 트랙 제목과 아티스트 정보
  - 작은 아이콘 컨트롤: 재생 및 일시정지 버튼
- 사용 방법: 페이지 상단에 고정되어, 사용자가 어디서든 현재 재생 중인 트랙을 확인하고 간단히 컨트롤할 수 있습니다.
WaveformVisualizer
- 설명: 오디오 파형을 시각화하는 컴포넌트로, FullPlayer 컴포넌트에 포함됩니다.
- 구성 요소:
  - 오디오 파형을 그리는 캔버스 또는 SVG 요소
- 사용 방법: 현재 재생 중인 오디오의 파형을 실시간으로 렌더링하여, 시각적인 재생 피드백을 제공합니다.

통합 재생목록 및 다운로드 관리 컴포넌트

Playlist 컴포넌트:
- 설명: 유튜브와 스포티파이 재생목록을 통합하여 표시하며, 다운로드 가능한 포맷 옵션을 제공합니다.
- 구성 요소:
  - 재생 목록 표시, 각 트랙의 다운로드 버튼, 포맷 옵션 선택 (FormatOptions 컴포넌트와 연결)
- 사용 방법: 통합 재생목록을 제공하며, 사용자가 유튜브 또는 스포티파이에서 불러온 재생 목록을 확인하고, 다운로드 포맷을 선택할 수 있습니다.
FormatOptions:
- 설명: 다운로드 포맷을 선택할 수 있는 옵션을 제공하는 컴포넌트.
- 구성 요소: mp3, m4a, wav, ogg, flac 등의 다양한 포맷 옵션
- 사용 방법: 사용자가 재생 목록에서 원하는 포맷을 선택할 수 있도록 하여, 선택된 포맷 정보를 downloader.js로 전송합니다.

3. 데이터 관리 및 서버리스 다운로드 서비스

서버리스 환경에서 유튜브 재생목록을 다운로드하고, 다양한 포맷으로 변환하는 downloader.js와 데이터베이스 및 클라우드 스토리지를 통한 데이터 관리를 구현합니다.

서버리스 YouTube 다운로드 및 포맷 변환
- 역할: yt-dlp와 FFmpeg를 사용하여 유튜브 음원을 다양한 포맷으로 다운로드하고, 클라우드 스토리지에 업로드합니다.
- 구현 흐름:
  1. 사용자가 재생목록 페이지에서 유튜브 URL과 포맷을 선택하여 다운로드 요청.
  2. 서버리스 함수가 yt-dlp로 음원을 다운로드한 후 FFmpeg로 지정된 포맷으로 변환.
  3. 변환된 파일을 클라우드 스토리지에 업로드하고 URL을 생성.
  4. 생성된 URL을 클라우드 데이터베이스에 저장하여 클라이언트에서 접근할 수 있도록 합니다.
자동 로그인 및 재생목록 통합 관리
- 역할: 유튜브와 스포티파이에 OAuth로 로그인하여 재생목록을 불러오고 통합 관리합니다.
- 구현 흐름:
  - 계정 연동 후 통합 재생목록을 클라우드 데이터베이스에 저장하여 관리합니다.