Home

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
    ├── RecentSearch.swift
    ├── SheetHeight.swift
    ├── Spotify
    │   ├── SpotifyArtist.swift
    │   ├── SpotifyPlayList.swift
    |   ├── SpotifyRecommend.swift
    │   ├── SpotifySearch.swift
    │   ├── SpotifyTrack.swift
    │   └── SpotifyUser.swift
    └── SpotifyAPI.swift

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

1. PlaylistView : 아래의 내비게이션을 통해서 해당되는 Playlist 내의 Track 을 보여주는 View 입니다.
2. PlaylistsView : 현재 user 의 Spotify 계정에 존재하는 Playlist 들을 보여주는 View 입니다.
3. RecommendView : Spotify 에서 추천하고 있는 Playlist 들을 보여주는 View 입니다.
4. SearchView : 입력한 검색어를 Spotify 에 전달 후 해당하는 Track 들을 보여주는 View 입니다.

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

1. ChatView.swift : 현재 재생 중인 Track 에 대한 Server Chatting 들을 입력 및 확인할 수 있는 View 입니다.
2. ControlCoreView.swift : 현재 재생 중인 Track 의 Track Name, Track Artist, Track image 를 보여주고, Track 의 Play State 를 조정할 수 있는 View 입니다. Play State 의 조정에는 "이전 곡, 정지, 재생, 다음 곡, Progress Bar 이동" 이 포함됩니다.
3. LyricsView.swift : 현재 재생 중인 Track 의 Lyrics 를 보여주는 View 입니다.

• State/xxx: 재생 상태와 인증 상태 (token) 를 관리하는 ObservableObject 입니다.
• Util/SpotifyAPI, Util/Spotify/xxx: Spotify API를 사용해 필요한 정보를 가져옵니다.

서버

login용 일회용 code 획득

sequenceDiagram
    participant User as 사용자
    participant App as 앱
    participant Server as 서버
    participant Spotify as Spotify

    App->>Server: 1. GET: 로그인 요청<br/>(http://localhost:8000/login)
    Server->>Spotify: 2. 리다이렉트 [인증 요청]<br/>(https://accounts.spotify.com/authorize)
    Spotify->>User: 3. 권한 요청 화면 표시
    User->>Spotify: 4. 권한 승인
    Spotify->>Server: 5. GET: 일회용 code 전달<br/>(http://localhost:8000/callback)
    Server->>App: 6. 리다이렉트 [일회용 code 전달]<br/>(com.kimhappy.musicwith://callback)

Loading

Spotify Access Token 획득

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

    App->>Server: 1. POST: 일회용 code로 Session ID, Access Token 요청
    Server->>Spotify: 2. POST [토큰 요청]<br/>(https://accounts.spotify.com/api/token)
    Spotify->>Server: 3. 응답 [Access Token, Refresh Token]
    note over Server: 4. Session ID 발급 (24시간 후 만료)<br/> 및 Refresh Token 저장
    Server->>App: 5. 응답 [Access Token, Session ID 전달]

Loading

Spotify Access Token 리프레쉬

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

    App->>Server: 1. POST: Session ID로 Access Token 요청
    note over Server: 2. Session ID 검증 
    Server->>Spotify: 3. POST [토큰 요청]<br/>(https://accounts.spotify.com/api/token)
    Spotify->>Server: 4. 응답 [Access Token, Refresh Token (선택적)]
    note over Server: 5. Session ID 연장<br/> 및 Refresh Token 저장 (선택적)
    Server->>App: 6. 응답 [Access Token 전달]

Loading

WebSocket 실시간 댓글

sequenceDiagram
    participant User1 as 유저1
    participant Server as 서버
    participant User2 as 유저2

    note over User1: Session ID로 댓글 창에 접속<br/>(ws://127.0.0.1:8000/chat/<track_id>)
    User1<<->>Server: 현재 접속중인 유저 목록 및 댓글 목록 요청, 응답
    note over User2: Session ID로 댓글 창에 접속<br/>(ws://127.0.0.1:8000/chat/<track_id>)
    User2<<->>Server: 현재 접속중인 유저 목록 및 댓글 목록 요청, 응답
    User1->>Server: 댓글 또는 대댓글 추가
    note over Server: Chat ID 발급
    Server->>User1: 댓글 Broadcast
    Server->>User2: 댓글 Broadcast

Loading

가사