[Next js] spotify api 데이터 supabase 업로드 에러

🔥 이슈
api 노래목록별로 추가버튼 생성 후 클릭시 supabase에 데이터가 올라가야하는데 에러

supabase - playlist 테이블구성
id / user_id(로그인유저 아이디) / is_main(메인노래) / created(시점) / track_name(노래이름) / artist_name(가수이름) / track_id / album_image(앨범이미지링크)

"use client";
import browserClient from "@/utils/supabase/client";

const PlaylistAll = ({ playlist, setIsShowModal }: PlaylistAllProps) => {

  const [search, setSearch] = useState<string>("");

  const handleAddPlayList = async (track: SpotifyTrack) => {
    try {
      const { data, error } = await browserClient.from("playlist").insert({
        track_id: track.id,
        track_name: track.name,
        artist_name: track.artists[0].name,
        album_image: track.album.images[0]?.url
      });
      if (error) console.error("추가중 오류 발생:", error);
      else console.log("트랙 추가", data);
    } catch (error) {
      console.error("그 외 에러:", error);
    }
  };

  return (
					... 
           <button className="btn" onClick={() => handleAddPlayList(list.track)}>
              +
           </button>
  );
};
export default PlaylistAll;

🔎 원인
테이블의 각 행별로 설정상 null은 허용하지않는다 해두었다.
playlist에 값을 insert 해주면서 user_id 의 값을 넘겨주지않아, user_id 값이 null로 넘어가면서 생긴문제

"use client";
import browserClient from "@/utils/supabase/client";

const PlaylistAll = ({ playlist, setIsShowModal }: PlaylistAllProps) => {

  const [search, setSearch] = useState<string>("");

  const handleAddPlayList = async (track: SpotifyTrack) => {
    try {
      // 현재 로그인된 사용자 user_id
      const { data: user } = await browserClient.auth.getUser();
      if (!user) {
        console.error("로그인한 유저가 없습니다.");
        return;
      }

      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);
      else console.log("트랙 추가", data);
    } catch (error) {
      console.error("그 외 에러:", error);
    }
  };

  return (
					... 
           <button className="btn" onClick={() => handleAddPlayList(list.track)}>
              +
           </button>
  );
};
export default PlaylistAll;

✅ 해결

• browserClient.auth.getUser() : 로그인한 유저의 정보를 가져온다.
  • 만약 로그인한 유저의 정보가 없다면 유효성 처리
• playlist에 값을 insert하면서 user_id 도 같이 넘겨준다.
  • user_id: user.user.id,
    • 처음에 user_id:use.id 라고 적었다가 에러가 떠서 다시 데이터값을 확인했을때
      user > user{id : ..,name:…} 으로 되어있는걸 확인하여 재수정하였다.