Refactor/simplify fetch

.github/workflows/deploy-functions.yml

@@ -0,0 +1,39 @@
+name: Deploy Firebase Functions
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/functions/**"
+      - "packages/schemas/**"
+      - ".github/workflows/deploy-functions.yml"
+
+jobs:
+  deploy_functions:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build Functions
+        working-directory: apps/functions
+        run: npm run build
+
+      - name: Deploy to Firebase
+        uses: firebase/firebase-tools-action@v0.2
+        with:
+          args: deploy --only functions
+        env:
+          FIREBASE_CONFIG: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_KEY }}
+          PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}

.gitignore

@@ -5,4 +5,6 @@
 firebase-debug.log
 firestore-debug.log
 
-dist
+dist
+
+dev-data

apps/frontend/android/app/src/main/java/com/anonymous/lymoapp/MediaModule.kt

@@ -69,7 +69,7 @@ class MediaModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaM
             putString("album", metadata.getString(MediaMetadata.METADATA_KEY_ALBUM))
             putDouble("duration", metadata.getLong(MediaMetadata.METADATA_KEY_DURATION).toDouble())
             putBoolean("isPlaying", state.state == PlaybackState.STATE_PLAYING)
-            putString("coverUrl", albumArtBase64)
+            putString("albumArt", albumArtBase64)
         }
     }
 

apps/frontend/apis/getNewTracks.ts

@@ -1,4 +1,4 @@
-import type { TrackDoc } from "@lymo/schemas/doc";
+import type { Track } from "@lymo/schemas/doc";
 import {
   collection,
   getDocs,
@@ -11,9 +11,9 @@ import {
 import db from "@/core/firestore";
 
 export default async function getNewTracks() {
-  const tracksCollection = collection(db, "tracks");
-  const q = query(tracksCollection, orderBy("createdAt", "desc"), limit(10));
-  const trackDocs = (await getDocs(q)) as FirebaseFirestoreTypes.QuerySnapshot<TrackDoc>;
+  const trackCollectionRef = collection(db, "tracks");
+  const q = query(trackCollectionRef, orderBy("createdAt", "desc"), limit(10));
+  const trackDocs = (await getDocs(q)) as FirebaseFirestoreTypes.QuerySnapshot<Track>;
 
   const result = trackDocs.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
   return result;

apps/frontend/apis/getPopularTracks.ts

@@ -1,4 +1,4 @@
-import type { TrackDoc } from "@lymo/schemas/doc";
+import type { Track } from "@lymo/schemas/doc";
 import {
   collection,
   getDocs,
@@ -11,14 +11,14 @@ import {
 import db from "@/core/firestore";
 
 export default async function getPopularTracks() {
-  const tracksCollection = collection(db, "tracks");
+  const trackCollectionRef = collection(db, "tracks");
   const q = query(
-    tracksCollection,
-    orderBy("play", "desc"),
+    trackCollectionRef,
+    orderBy("stats.viewCount", "desc"),
     orderBy("createdAt", "asc"),
     limit(20)
   );
-  const trackDocs = (await getDocs(q)) as FirebaseFirestoreTypes.QuerySnapshot<TrackDoc>;
+  const trackDocs = (await getDocs(q)) as FirebaseFirestoreTypes.QuerySnapshot<Track>;
 
   const result = trackDocs.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
   return result;

apps/frontend/apis/getStoryByTrackId.ts

@@ -0,0 +1,32 @@
+import type { Story } from "@lymo/schemas/doc";
+import { Language } from "@lymo/schemas/shared";
+import {
+  collection,
+  getDocs,
+  limit,
+  query,
+  where,
+  type FirebaseFirestoreTypes,
+} from "@react-native-firebase/firestore";
+
+import db from "@/core/firestore";
+
+interface GetStoryByTrackIdParams {
+  trackId: string;
+  language: Language;
+}
+
+export default async function getStoryByTrackId({ trackId, language }: GetStoryByTrackIdParams) {
+  const storyCollectionRef = collection(db, "stories");
+  const q = query(
+    storyCollectionRef,
+    where("language", "==", language),
+    where("trackId", "==", trackId),
+    limit(1)
+  );
+
+  const storyDoc = (await getDocs(q)).docs[0] as
+    | FirebaseFirestoreTypes.QueryDocumentSnapshot<Story>
+    | undefined;
+  return storyDoc?.data() ?? null;
+}

apps/frontend/apis/getTrackById.ts

@@ -0,0 +1,13 @@
+import type { Track } from "@lymo/schemas/doc";
+import { collection, doc, type FirebaseFirestoreTypes } from "@react-native-firebase/firestore";
+
+import db from "@/core/firestore";
+
+export default async function getTrackById(trackId: string) {
+  const trackCollectionRef = collection(db, "tracks");
+  const trackDocRef = doc(
+    trackCollectionRef,
+    trackId
+  ) as FirebaseFirestoreTypes.DocumentReference<Track>;
+  return (await trackDocRef.get()).data() ?? null;
+}

apps/frontend/apis/retrieveTrack.ts

@@ -0,0 +1,9 @@
+import type { RetrieveTrackInput, RetrieveTrackOutput } from "@lymo/schemas/functions";
+import { httpsCallable } from "@react-native-firebase/functions";
+
+import functions from "@/core/functions";
+
+export const retrieveTrack = httpsCallable<RetrieveTrackInput, RetrieveTrackOutput>(
+  functions,
+  "retrieveTrack"
+);

apps/frontend/app/_layout.tsx

@@ -13,6 +13,9 @@ import { SettingProvider } from "@/contexts/useSettingStore";
 import { SyncProvider } from "@/contexts/useSyncStore";
 import { TrackSourceProvider } from "@/contexts/useTrackSourceStore";
 
+import "@/core/firestore";
+import "@/core/functions";
+
 const queryClient = new QueryClient();
 
 export default function RootLayout() {

apps/frontend/app/player/index.tsx

@@ -1,12 +1,11 @@
 import { useQueryErrorResetBoundary } from "@tanstack/react-query";
 import { Redirect } from "expo-router";
-import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { View } from "react-native";
 
 import ErrorIndicator from "@/components/player/ErrorIndicator";
-import LoadingIndicator from "@/components/player/LoadingIndicator";
-import { DeviceTrackPlayer, ManualTrackPlayer } from "@/components/player/Player";
+import FromDevice from "@/components/player/Player/FromDevice";
+import FromManual from "@/components/player/Player/FromManual";
 import { useTrackSourceStore } from "@/contexts/useTrackSourceStore";
 
 export default function Player() {
@@ -19,10 +18,16 @@ export default function Player() {
   return (
     <View style={{ flex: 1 }}>
       <ErrorBoundary FallbackComponent={ErrorIndicator} onReset={reset}>
-        <Suspense fallback={<LoadingIndicator {...trackSource?.track} />}>
-          {trackSource.from === "manual" && <ManualTrackPlayer trackId={trackSource.track.id} />}
-          {trackSource.from === "device" && <DeviceTrackPlayer {...trackSource.track} />}
-        </Suspense>
+        {trackSource.from === "manual" && (
+          <FromManual trackId={trackSource.track.id} track={trackSource.track} />
+        )}
+        {trackSource.from === "device" && (
+          <FromDevice
+            title={trackSource.track.title}
+            artist={trackSource.track.artist}
+            durationInSeconds={trackSource.track.duration}
+          />
+        )}
       </ErrorBoundary>
     </View>
   );

apps/frontend/components/home/DeviceMediaDetection/DeviceMediaDetection.tsx

@@ -46,7 +46,7 @@ export default function DeviceMediaDetection() {
     <View style={styles.wrapper}>
       <View style={[styles.coverWrapper]}>
         {/* 커버 이미지 */}
-        <Image source={{ uri: deviceMedia.coverUrl }} style={styles.cover} />
+        <Image source={{ uri: deviceMedia.albumArt }} style={styles.cover} />
 
         {/* 그라데이션 오버레이 */}
         <LinearGradient style={styles.coverGradient} colors={["transparent", colors.black]} />

apps/frontend/components/home/NewTracksSection/NewTracksSection.tsx

@@ -1,4 +1,5 @@
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { Track } from "@lymo/schemas/doc";
 import { Link } from "expo-router";
 import { View, Text, FlatList } from "react-native";
 
@@ -15,10 +16,10 @@ export default function NewTracksSection() {
   const { setTrackSource } = useTrackSourceStore();
   const { setIsSynced } = useSyncStore();
 
-  const handlePlayTrack = (track: { id: string; title: string; coverUrl: string }) => {
+  const handlePlayTrack = (trackId: string, track: Track) => {
     setTrackSource({
       from: "manual",
-      track: track,
+      track: { ...track, id: trackId },
     });
     setIsSynced(false);
   };
@@ -41,10 +42,8 @@ export default function NewTracksSection() {
           <Link href={`/player`} key={track.id} asChild>
             <CompactTrack
               title={track.title}
-              coverUrl={track.coverUrl}
-              onPress={() =>
-                handlePlayTrack({ id: track.id, title: track.title, coverUrl: track.coverUrl })
-              }
+              albumArt={track.albumArt}
+              onPress={() => handlePlayTrack(track.id, track)}
             />
           </Link>
         )}