1. Supabase 노래 추가하기

[+] 버튼을 클릭했을때 버튼을 플레이리스트를 내 목록에 추가합니다.

1_1.검색하기

노래제목 또는 가수명으로 검색시 필터링 기능

  //검색어 따른 필터링리스트(제목,가수이름)
  const filterPlaylist = spotifyList.filter(
    (list: SpotifyListProps) =>
      list.track.name.toLowerCase().includes(search.toLowerCase()) ||
      list.track.artists[0].name.toLowerCase().includes(search.toLowerCase())
  );

1_2.추가 useMutation 사용하기

• supabase에 어떤걸 추가할건지에대한 함수 만들기

const addTrackPlayList = async (track: SpotifyTrack) => {
  const { data, error } = await browserClient.from("playlist").insert({
    track_id: track.id,
    track_name: track.name,
    artist_name: track.artists[0].name,
    user_id: user?.user?.id,
    album_image: track.album.images[0]?.url
  });
  if (error) {
    console.error("추가중 오류 발생:", error);
  }
  return data;
};

• useMutation 사용하여 추가함수(addTrackPlayList) 불러오기
• 성공시 알림창, 쿼리를 무효화함으로써 최신 상태로 유지되도록 업뎃

const PlaylistAll = ({ spotifyList, playlist, setIsShowModal, myPlayListData }: PlaylistAllProps) => {
  const [search, setSearch] = useState<string>("");
  const queryClient = useQueryClient();

  //2.뮤테이션 만들고
  const addPlayListMutation = useMutation({
    mutationFn: addTrackPlayList,
    onSuccess: () => {
      alert("플레이리스트에 추가되었습니다");
      const filtersQueryKey: InvalidateQueryFilters = { queryKey: ["myPlayList"] };
      queryClient.invalidateQueries(filtersQueryKey);
    },
    onError: (error: Error) => {
      console.log("error.message", error.message);
    }
  });

queryClient.invalidateQueries(쿼리키);
: 업데이트 후 사용하여 UI를 최신 상태로 유지용으로 많이 쓰임

• 플레이리스트 추가 뮤테이션 실행
• 중복음악일 경우 알림창 및 실행안되게 추가

const handleAddPlayList = async (track: SpotifyTrack) => {
    if (!myPlayListData.some((list) => list.track_id === track.id)) {
      addPlayListMutation.mutate(track);
    } else {
      alert("이미 플레이리스트에 존재하는 트랙입니다.");
    }
  };

2. Supabase 노래 삭제하기

특정 노래를 삭제합니다.

2_1. 삭제 useMutation 사용하기

• 삭제할 아이디를 인자로 받아 supabase에서 로그인한 유저저의 노래들 중 삭제할 아이디와 같은것을 고르기

const deleteTrackPlayList = async (id: number) => {
  //로그인한 유저의 아이디
  const { data: loginUserId } = await browserClient.auth.getUser();
  const userId = loginUserId?.user?.id;

  //로그인한 유저의 플레이리스트에서 선택한 플리만 삭제
  const { error } = await browserClient.from("playlist").delete().eq("id", id).eq("user_id", userId);
  if (error) console.error("삭제중 오류 발생:", error);
};

• useMutation 사용하여 삭제함수(deleteTrackPlayList) 불러오기
• 성공시 확인창 > 수락시 invalidateQueries로 최신 상태로 유지되도록 업뎃

  const deletePlayListmutation = useMutation({
    mutationFn: deleteTrackPlayList,
    onSuccess: () => {
      if (window.confirm("내 플레이리스트에서 삭제하시겠습니까?")) {
        queryClient.invalidateQueries({ queryKey: ["myPlayList"] });
      }
    },
    onError: (error: Error) => {
      console.log("error.message", error.message);
    }
  });

• 삭제 뮤테이션 이벤트 함수 (삭제버튼 클릭시)

const handleDeletePlayList = async (id: number) => {
    deletePlayListmutation.mutate(id);
  };

3. Supabase 메인노래 지정하기

• 서버상태 업데이트 함수
• 로그인유저의 playlist데이터의 is_main 전부 false로 업데이트
• 메인지정할 아이디를 인자로 받아 supabase에서 로그인한 유저 노래 플레이리스트 중 전달받은 노래아이디값의 is_main 상태만 true로 변경

const upDateMainTrack = async (id: number): Promise<number> => {
  //로그인 유저아이디
  const { data: loginUserId } = await browserClient.auth.getUser();
  const userId = loginUserId?.user?.id;

  //로그인유저의 playlist데이터의 is_main 전부 false로 업데이트
  const { error: resetError } = await browserClient.from("playlist").update({ is_main: false }).eq("user_id", userId);

//재설정 오류처리
  if (resetError) {
    console.error("메인지정중 리셋과정에서 오류 발생:", resetError);
  }

//지정된 노래의 is_main값을 true로 업데이트
  const { data, error: updateError } = await browserClient
    .from("playlist")
    .update({ is_main: true })
    .eq("id", id)
    .eq("user_id", userId);

//재설정 오류처리
  if (updateError) {
    console.error("메인지정중 오류 발생:", updateError);
  }
  return id;
};