최종 프로젝트 8일 차 @메인 페이지 정렬/필터, 모달 창 조정

오늘은 메인 페이지 정렬/필터(페이지네이션 전제)과 모달 창 조정을 하면서 시간을 보냈다. 

 

메인 페이지 정렬/필터

먼저 메인 페이지 정렬/필터에 대해서 이야기하자면, 페이지네이션과 정렬/필터 기능을 조합하기 위해서는 supabase에 데이터를 요청할 때 정렬/필터가 되어야 한다. 우리 프로젝트의 경우 최신순/인기순 정렬과 채널 별 필터 기능을 가지고 있는데, 이러한 정렬/필터 기능을 구현하기 위해서 supabase에 다음과 같은 요청을 보냈다. 

const response: PostgrestSingleResponse<partyInfoPlusMember[]> = await browserClient
        .from('party_info')
        .select(
          'party_id,party_name,party_detail,video_name,video_platform,video_image,limited_member,duration_time,situation,owner_id,video_id,media_type,watch_date,start_time,episode_number,team_user_profile(count)'
        )
        .range(0, 15)
        .order('watch_date', { ascending: false })
        // 아래쪽 order는 좀 더 연구가 필요함
        .order('team_user_profile')
        .textSearch('video_platform', bull);

range를 통해서 페이지네이션을 할 것이고, order를 통해서 정렬을, textSearch를 통해서 필터 기능을 구현했다. 

 

이 중 특필할 것은 외래키를 통해서 참조된 테이블의 정보를 끌어온 것이다. select 마지막에 있는 team_user_profile(count)가 바로 그것인데, 이 정보를 통해 인기순 정렬을 구현할 수 있다. 

 

다만 한 가지 문제는 이 정보의 타입이 아래와 같기 때문에 그저 watch_date를 정렬시켜주는 것보다 더 생각해야 할 것이 많다는 것이다. 

team_user_profile: { count: number }[]

내가 원하는 정렬 기준은 배열 안의 count 값인데, order 함수로 이 배열 안의 값을 끌어올릴 수 있을지 모르겠다. 

 

또 한 가지 더 생각해야 할 것은 textSearch를 통한 전체 필터링인데 

textSearch('video_platform', bull);

의 bull 값이 반드시 string이어야 하는데다가 특수문자 '[', '*' 같은 것들을 검색해주지 않아서 현재로써는 전체 필터링이 애매하다. 이 기능을 구현하기 위해서는 video_platform 열에 알맞은 값이 없을 때 적당한 더미데이터를 넣어주는 방향으로 가야할 것 같다. 

 

모달 창 조정

또 오늘은 모집하기와 동시에 참여하기가 가능하도록 어제 분리해둔 참가하기 모달 창을 다시금 조정하는 작업을 했다. 

 

고려해야 하는 것은 3가지로

1. 파티 모집한 사람이 반드시 파티에 속해있어야 하므로 참여하기 모달창을 쉽게 닫을 수 없도록 한다

2. 모집하기 작업이 끝난 후에 참가하기 모달 창을 띄워야 한다.

3. 모집한 파티의 party_id를 모달창에 넘겨주어야 한다. 

 

첫번째는 현재 사용하는 모달 창 라이브러리의 기능인 모달 창 오픈 상태를 핸들링 할 수 있는 open={boolean}라는 값으로 조정할 수 있었다. 

 

두번째는 사실 아직 제대로 구현을 못했는데 modal 창의 open 핸들링을 트리거 버튼의 함수에 끼워넣기 위해서 setOpen과 같은 함수를 props로 내려줘야 할 것 같다. 이는 trigger 핸들링이 필요하다. 

 

세번째는 supabase의 insert().select() 함수를 통해서 삽입한 값을 곧장 반환 받을 수 있는 함수를 통해 party_id를 가져올 수 있었다. 

 

이 기능을 완전히 구현하려면 trigger 핸들링에 대해 더 많이 알아봐야 할 것 같다.