• 검색 페이지로 이동한후 input에 노래 제목을 검색시 쿼리로 supabase에서 노래 목록을 땡겨온다.
• getSongByTitle action이 핵심 로직
  • title을 넘겨받아 supbase에서 title에 해당되는 노래 목록을 가지고 온다.

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

const getSongsByTitle = async (title: string): Promise<Song[]> => {
  const supabase = createServerComponentClient({
    cookies: cookies,
  });
	
	// 타이틀이 따로 없다면 걍 전체 노래 가져온다
  if (!title) {
    const allSongs = await getSongs();
    return allSongs;
  }

  const { data, error } = await supabase
    .from('songs')
    .select('*')
    .ilike('title', `%${title}%`)
    .order('created_at', { ascending: false });

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

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

export default getSongsByTitle;

검색 페이지

• SearchInput이 존재하는데 하는 역할

  • SearchInput은 input을 칠때마다 queryString을 만들어서 router에 push를 한다.
    • const query = { title: debouncedValue };
    • 쿼리는 title값에 담긴다.
  • /search 뒤에 쿼리 스트링이 붙게된다.
  • page에서 searchParams을 통해 쿼리의 title을 getSongsByTitle에 넘긴다.

  async function SearchPage({ searchParams }: SearchProps) {
    // SearchInput에서 넘긴 query를 action에 넘긴다.
    const songs = await getSongsByTitle(searchParams.title);
  
    return (
      <div className='bg-neutral-900 roundded-lg w-full h-full overflow-hidden overflow-y-auto'>
        <Header className='from-bg-neutral-900'>
          <div className='mb-2 flex flex-col gap-y-6'>
            <h1 className='text-white text-3xl font-semibold'>Search</h1>
            <SearchInput />
          </div>
        </Header>
        <SearchContent songs={songs} />
        {/* TODO : Add Like Button Here */}
      </div>
    );
  }
  

  • 추가로 debounce를 통해 0.5초 있다가 값이 실제 담기도록 한다.

• page.tsx ⇒ SearchContent.tsx

Songs는 어디서 console이 찍힐까

• search ⇒ page.tsx는 서버컴포넌트이기 때문에 songs가 터미널에 출력이 된다\

  

• search ⇒ page.tsx ⇒ SearchContent.tsx 는 클라이언트 컴포넌트이기 때문에, 실제 브라우저에서 콘솔이 찍힌다.

  

<aside> 💡 서버 컴포넌트와 클라이언트 컴포넌트 어디서 어떤걸 찍을지 확인을 해본다!

</aside>