liked라는 페이지 컴포넌트를 만든다

getLikeSongs라는 action을 만든다.

• 해당 코드

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

const getLikedSongs = async (): Promise<Song[]> => {
  const supabase = createServerComponentClient({
    cookies: cookies,
  });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  const { data, error } = await supabase
    .from('liked_songs')
    .select('*, songs(*)')
    .eq('user_id', session?.user?.id)
    .order('created_at', { ascending: false });

  if (error) {
    console.log(error);
    return [];
  }

  if (!data) {
    return [];
  }

  return data.map((item) => ({
    ...item.songs,
  }));
};

export default getLikedSongs;

흐름

• getLikeSongs라는 action을 page 컴포넌트에서 부른다.
• 그리고 불러온 좋아요 상태의 songs들을 LikeContent 컴포넌트로 전달해 나열해 주면끝!

LikedContent

• 해당 컴포넌트에서는 useUser 훅에서 가져온 user가 없다면, 메인페이지로 리다이렉트 시키는 로직 포함.
• 좋아요 누른 songs이 없다면 ‘No liked songs’ 을 노출 시켜 줌.