Skip to content

Home

Jump to bottom
Hwanhee "Asher" Kim edited this page Nov 26, 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
    ├── 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 의 재생 상태를 조정할 수 있는 View 입니다.
  3. LyricsView.swift : 현재 재생 중인 Track 의 Lyrics 를 보여주는 View 입니다.
  • State/xxx: 재생 상태와 인증 상태 (token) 를 관리하는 ObservableObject 입니다.
  • Util/SpotifyAPI, Util/Spotify/xxx: Spotify API를 사용해 필요한 정보를 가져옵니다.
  • Util/xxx: 앱의 동작을 위해 구현한 기능들입니다.
  1. Chat.swift : Chatting 정보를 표현하는 Structure 입니다.

서버

로그인 / 계정 관리

실시간 댓글

  • WebSocket 및 Broadcasting을 사용해 실시간 댓글을 구현합니다.
  • 로그인 단계에서 얻은 Session ID로 유저를 구분합니다.
  • Diagram은 상세 페이지에서 확인할 수 있습니다.

가사

  • Spotify의 비공식 API (구현) 를 사용합니다.
  • 각 클라이언트에서 호출하기에는 사용법이 다소 복잡하므로, 서버에서 호출합니다 (추후 캐싱 적용).
Clone this wiki locally