생각보다 복잡합니다…..ㅠㅠ (복습)

핵심

• 어느 플레이 리스트를 선택하느냐에 따라 해당 플레이리스트만 재생하도록 만들어준다.
  • 예) 좋아요 페이지에서 플레이를 누르면 좋아요 목록만 노래재생
  • 메인페이지에서 플레이를 누르면 모든 노래 재생 등등

핵심 Hook

• useGetSongById(songId: song 아이디)
  • 기본적으로 songId를 넘겨 받는다.
  • useSessionContext를 사용하여 supabaseClient를 가져온다.
  • 인자로 넘겨받은 songId로 supabase에서 해당 노래를 가져온다.
  • 추가로 노래를 가져오는 중엔 isLoading true 아닐때 isLoading false도 가져온다.

import { Song } from '@/types';
import { useSessionContext } from '@supabase/auth-helpers-react';
import { useEffect, useMemo, useState } from 'react';
import { toast } from 'react-hot-toast';

const useGetSongById = (id?: string) => {
  const [isLoading, setIsLoading] = useState(false);
  const [song, setSong] = useState<Song | undefined>(undefined);

  const { supabaseClient } = useSessionContext();

  useEffect(() => {
    if (!id) {
      return;
    }

    setIsLoading(true);

    // 특정 아이디에 해당하는 노래를 가져온다.
    const fetchSong = async () => {
      const { data, error } = await supabaseClient
        .from('songs')
        .select('*')
        .eq('id', id)
        .single();

      if (error) {
        setIsLoading(false);
        return toast.error(error.message);
      }

      setSong(data as Song);
      setIsLoading(false);
    };

    fetchSong();
  }, [id, supabaseClient]);

  return useMemo(() => ({ isLoading, song }), [isLoading, song]);
};

export default useGetSongById;

• useLoadSongUrl(song : 특정 노래) : string

  • 기본적으로 song 특정 노래를 인자로 넘겨 받는다.
  • supabaseClient.storage에서 해당 노래의 url을 가져온다.

  import { Song } from '@/types';
  import { useSupabaseClient } from '@supabase/auth-helpers-react';
  
  const useLoadSongUrl = (song: Song) => {
    // useSessionContext에서 supabaseClient를 꺼낼 필요는 없다 why? 인증이 필요하지 않은 작업이기 때문.
    const supabaseClient = useSupabaseClient();
  
    if (!song) {
      return '';
    }
  
    const { data: songData } = supabaseClient.storage
      .from('songs')
      .getPublicUrl(song.song_path);
  
    return songData.publicUrl;
  };
  
  export default useLoadSongUrl;
  

• useOnPlay(songs : 노래 배열들)

  • 기본적으로 노래정보의 배열들을 인자로 받아온다.
  • 현재 유저가 로그인 되어있지 않으면 authModal을 띄운다.
  • ⭐️⭐️ onPlay라는 함수를 외부로 return 하는데 ⭐️⭐️
    • id를 인자로 넘겨받아 전역에 현재 플레이이되고 있는 노래의 id를 저장한다.
    • useOnPlay훅에서 넘겨받은 songs들(현재 재생목록, 메인페이지 재생목록인지, 좋아요 페이지 재생목록인지등등)의 id들만 배열로 전역에 저장한다.

• usePlayer

  • zustand로 관리하는 전역 상태 바로 하단 코드 참고

usePlayerStore 만들기

• 플레이 리스트를 전역에서 컨트롤 하기 위함…

import { create } from 'zustand';

interface PlayerStore {
  ids: string[];
  activeId?: string;
  setId: (id: string) => void;
  setIds: (ids: string[]) => void;
  reset: () => void;
}

const usePlayer = create<PlayerStore>((set) => ({
  // 실제 플레이할 리스트
  ids: [],
  // 현재 선택된 노래
  activeId: undefined,
  setId: (id: string) => set({ activeId: id }),
  setIds: (ids: string[]) => set({ ids: ids }),
  reset: () => ({ ids: [], activeId: undefined }),
}));

export default usePlayer;

• 관리하는 props
  • ids : 재생목록 된 노래의 id들
  • activeId : 선택된 노래