Skip to content

Home

Jump to bottom
namyun1012 edited this page Nov 23, 2024 · 18 revisions

MusicWith

소개

MusicWith는 음악을 들으며 감상을 나누는 플랫폼입니다. '지금 나와 함께 이 음악을 듣는 사람이 있으면 좋겠다'는 생각으로 시작한 프로젝트입니다.

사용 기술

앱

  • 언어: Swift
  • UI: SwiftUI

서버

  • 언어: Rust
  • Web Framework: Rocket

설계

앱

.
├── Control
│   ├── ChatView.swift
│   ├── ControlCoreView.swift
│   └── LyricsView.swift
├── ControlView.swift
├── CustomViews
│   └── CustomTabView.swift
├── Main
│   ├── PlayListView.swift
│   ├── PlayListsView.swift
│   ├── RecommendView.swift
│   └── SearchView.swift
├── MainView.swift
├── MusicWithApp.swift
├── State
│   ├── ControlState.swift
│   ├── PlayState.swift
│   └── SpotifyAuthState.swift
└── Util
    ├── Chat.swift
    ├── PlayList.swift
    ├── RecentSearch.swift
    ├── SheetHeight.swift
    ├── Song.swift
    ├── Spotify
    │   ├── SpotifyArtist.swift
    │   ├── SpotifyPlayList.swift
    │   ├── SpotifySearch.swift
    │   ├── SpotifyTrack.swift
    │   └── SpotifyUser.swift
    └── SpotifyAPI.swift

  • MainView, Main/xxx: 메인 화면 및 그 아래의 네비게이션 구조에 대한 View 입니다.

  • PlaylistView : 아래의 내비게이션을 통해서 해당되는 Playlist 내의 Track 을 보여주는 View 입니다.

  • PlaylistsView : 현재 user 의 Spotify 계정에 존재하는 Playlist 들을 보여주는 View 입니다.

  • RecommendView : Spotify 에서 추천하고 있는 Playlist 들을 보여주는 View 입니다.

  • SearchView : 입력한 검색어를 Spotify 에 전달 후 해당하는 Track 들을 보여주는 View 입니다.

  • ControlView, Control/xxx: 음악을 재생할 때 표시되는 Bottom Sheet Modal 및 그 아래의 네비게이션 구조에 대한 View 입니다.

  • State/xxx: 재생 상태와 인증 상태 (token) 를 관리하는 ObservableObject 입니다.

  • Util/SpotifyAPI, Util/Spotify/xxx: Spotify API를 사용해 필요한 정보를 가져옵니다.

서버

sequenceDiagram
    participant App as 앱
    participant Server as 서버
    participant Spotify as Spotify

    App->>Server: 1. 로그인 요청<br/>(http://localhost:8000/login)
    Server->>Spotify: 2. 리다이렉트 [인증 요청]<br/>(https://accounts.spotify.com/authorize)
    Spotify->>App: 3. 권한 요청 화면 표시
    App->>Spotify: 4. 권한 승인
    Spotify->>Server: 5. code 전달<br/>(http://localhost:8000/callback)
    Server->>Spotify: 6. POST [토큰 요청]<br/>(https://accounts.spotify.com/api/token)
    Spotify->>Server: 7. 응답 [access_token, refresh_token]
    Server->>App: 8. 리다이렉트 [access_token, refresh_token]<br/>(com.kimhappy.musicwith://callback)
Loading
  • /login: 앱에서 로그인을 위해 접근하는 엔드포인트 입니다.
  • /callback: Spotify에서 access_token과 refresh_token을 제공하는 엔드포인트 입니다.
Clone this wiki locally