[최종프로젝트] 리액트 쿼리로 회원 플레이 리스트 가져오기

문제

현재 플레이 리스트에 외래키로 있는 유저 아이디를 기준으로 플레이 리스트 아이디 배열에 뮤직 아이디가 들어있다

플레이 리스트 아이디 배열에 있는 뮤직 데이터만 가져와야 함

---

 

첫 번째 시도

수파베이스에 뮤직 아이디 배열을 외래키로 지정하려 했으나 타입이 맞지 않아 실패

 

 

두 번째 시도

플레이 리스트와 뮤직 데이터를 따로 불러와서 배열을 합친 다음에 유저 아이디 값이 맞는 것만 추출하려 했음

근데 생각해 보니 플레이 리스트 데이터를 가져올 때 로그인한 유저 아이디값 기준으로 가져오고

플레이 리스트에 뮤직아이디 배열을 맵을 이용 해서 추출

추출한 뮤직아이디를 기준으로 뮤직 데이터 가져와서 스테이트에 담으면 끝

"use client";
import { useStore } from "@/shared/store";
import { supabase } from "@/shared/supabase/supabase";
import { useEffect, useState } from "react";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";

const CurrentMusicPlayer = () => {
  const [currentMusic, setCurrentMusic] = useState<any>();
  const [currentTrackIndex, setCurrentTrackIndex] = useState<number>(0);
  const { userInfo } = useStore();
  const { uid } = userInfo;

  console.log("uid", uid);

  useEffect(() => {
    const getMusicData = async () => {
      const { data: currentMusic } = await supabase
        .from("playlistCurrent")
        .select("currentId,currentMusicIds,userInfo(userId)")
        .eq("userId", uid);

      const musicIds = currentMusic!.map((item) => {
        return item.currentMusicIds;
      });

      if (musicIds.length > 0) {
        const { data: musicInfo } = await supabase
          .from("musicInfo")
          .select("*")
          .in("musicId", musicIds)
          .order("musicTitle", { ascending: false });
        setCurrentMusic(musicInfo);
      }
    };

    getMusicData();
  }, [uid]);

  console.log("스테이트 데이터", currentMusic);
};

export default CurrentMusicPlayer;

 

---

너무 어렵게 생각했거나, 잠을 못 자서 정신이 온전치 못했던 거 같다 이게 왜 오래 걸렸지?

 

< 시도한 흔적이 남은 전체 코드 >

"use client";
import { useStore } from "@/shared/store";
import { supabase } from "@/shared/supabase/supabase";
import { useEffect, useState } from "react";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";

const CurrentMusicPlayer = () => {
  const [currentMusic, setCurrentMusic] = useState<any>();
  // const [currentMusic, setCurrentMusic] = useState<currentMusicDataType>();
  const [currentTrackIndex, setCurrentTrackIndex] = useState<number>(0);
  const { userInfo } = useStore();
  const { uid } = userInfo;

  console.log("uid", uid);

  useEffect(() => {
    const getMusicData = async () => {
      const { data: currentMusic } = await supabase
        .from("playlistCurrent")
        .select("currentId,currentMusicIds,userInfo(userId)")
        .eq("userId", uid);

      const musicIds = currentMusic!.map((item) => {
        return item.currentMusicIds;
      });

      if (musicIds.length > 0) {
        const { data: musicInfo } = await supabase
          .from("musicInfo")
          .select("*")
          .in("musicId", musicIds)
          .order("musicTitle", { ascending: false });
        setCurrentMusic(musicInfo);
      }
      // 내가 하려는건
      // 현재 플레이리스트 테이블에 뮤직아이디 배열이 있으묜
      // 그 배열에 있는 아이디값의 노래 정보가 필요함
      // 만약 1번 행에 뮤직 아이디 배열에 아이디값이 1개면
      // 뮤직 데이터가 1개 들어가야하고
      // 뮤직아이디가 3개면
      // 뮤직데이터 3개가 들어가야함

      // 이걸 하려면 유저아이디값이 필요함
      // 그 아이디 값에 따라 행 조건이 달라지니까

      // const musicIds = current.map((item) => item.currentMusicIds);
      // console.log("musicIds", musicIds);

      // const musicIds = current.map((item) => item.currentMusicIds); // 모든 currentMusicIds를 하나의 배열로 펼침
      // console.log("musicIds", musicIds);

      // const { data: music } = await supabase
      //   .from("musicInfo")
      //   .select("*")
      //   .in("musicId", musicIds);

      // console.log("music", music);

      // console.log(
      //   "current",
      //   current!.map((item) => item.currentMusicIds)
      // );

      // const { data: music } = await supabase
      //   .from("musicInfo")
      //   .select("*")
      //   .order("musicTitle", { ascending: false });

      // console.log("music", music);

      // if(current.currentMusicIds.length>0){

      // }

      // if (data) {
      //   const currentMusicData = data.map((item) => item.musicId);
      //   console.log("currentMusicData", currentMusicData);
      //   const { data} = await supabase
      //   .from("playlistCurrent")
      //   .select("currentId,currentMusicIds,userInfo(userId)");
      //   .in("currentMusicIds", currentMusicData);
      // }

      // const { data } = await supabase
      //   .from("playlistCurrent")
      //   .select("currentId,currentMusicIds,userInfo(userId)");
      // if (data!.currentMusicIds) {
      //   setCurrentMusic(data!.currentMusicIds);

      //   console.log("플레이리스트 데이터", data!.currentMusicIds);
      // }

      // if (currentMusic) {
      //   const { data } = await supabase
      //     .from("musicInfo")
      //     .select("*")
      //     .order("musicTitle", { ascending: false });
      //   console.log("음악 데이터", data);
      // }
      // setCurrentMusic(data);
    };

    getMusicData();
  }, [uid]);

  console.log("스테이트 데이터", currentMusic);

  // console.log("  currentMusic", currentMusic);
  // const onPreviousHandler = () => {
  //   setCurrentTrackIndex(
  //     (prev) =>
  //       (prev - 1 + currentMusic.currentMusicIds.length) %
  //       currentMusic.currentMusicIds.length
  //   );
  // };

  // const onNextTrackHandler = () => {
  //   setCurrentTrackIndex((prev) => (prev + 1) % currentMusic.length);
  // };

  // const onDeleteSelectionHandler = (item: any) => {};

  return <div>{/* )} */}</div>;
};

export default CurrentMusicPlayer;