<aside> 💡 로그인을 해야만 보여지는 우측 사이드바에 노래목록을 렌더링 할 것이다.

</aside>

• 사이드바에 가져올 노래 목록은 UserId로 조회해와야한다.
• supabase에 userId를 넘겨야하기 때문에 session을 이용해야한다.
• getSongsByUserId action이 핵심 로직.

import { Song } from '@/types';
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';

const getSongsByUserId = async (): Promise<Song[]> => {
  const supabase = createServerComponentClient({
    cookies: cookies,
  });
	// userId를 조회하기 위해 session을 가져온다.
  const { data: sessionData, error: sessionError } =
    await supabase.auth.getSession();

  if (sessionError) {
    console.log(sessionError.message);

    return [];
  }

  const { data, error } = await supabase
    .from('songs')
    .select('*')
     // sessionId를 같이 넘긴다.
    .eq('user_id', sessionData.session?.user.id)
    .order('created_at', { ascending: false });

  if (error) {
    console.log(error.message);
  }

  return (data as any) || [];
};

export default getSongsByUserId;

<aside> 💡 즉 로그인을 안해서 session이 없다면 빈 배열을 return 한다.

</aside>

최상단 Layout.tsx(서버컴포넌트)에서 getSongsByUserId action으로 노래 목록을 가져온다.

• backend ≤=> client API 호출을 따로 하지 않는다.
• Layout.tsx ⇒ SideBar.tsx ⇒ Library ⇒ MediaItem 으로 song데이터를 넘겨 화면에 그려준다.

• 로그인을 안했을때는 좌측에 노래 목록 보여지지 않음

• 로그인을 해야만 좌측에 노래 목록 보여짐