승인 상태 및 승인 일자 업데이트

사용자가 승인을 신청하면 처음 상태 값을 false, 승인 일자를 null로 지정해놨다
이후에 관리자가 승인을 하면 상태 값이 true 변경되고 데이터 테이블 컬럼에 승인 일자를 추가하도록 로직을 짰다

코드

  const handleConfirm = async(id : string, is_confirm : boolean) => {
    const confirmDate = new Date().toISOString().split('T')[0]
    const {data, error} = await supabase
      .from('admin_test')
      .update({
        is_confirm : !is_confirm,
        confirm_date : !is_confirm ? confirmDate : null
      })
      .eq('id', id)
    if ( error) {
      console.error('에러 발생', error)
    } else {
      setLicenses(licenses.map(license => 
        license.id === id ? {...license, is_confirm : !is_confirm, confirm_date : !is_confirm ? confirmDate : null} : license
      ))
    }
  }

관리자가 승인을 취소하는 경우도 있을수 있기 때문에 !is_confirm 을 넣어주고
!is_confirm 이 true 일 경우 오늘 날짜(승인한 날짜)를 넣어주고 false 일 경우 null 을 넣어준다.

이렇게 관리자가 언제든 승인을 하고 취소할 수 있도록 만들었다

상태 별 필터링

로직을 구현하고 승인된 데이터와 승인되지 않은 데이터가 한 곳에 모여있어 불편하게 보여서
pending 상태와 confirmed 상태인 데이터들을 나눠서 보여주기로 했다

코드

  const filteredLicenses = licenses.filter((license)=> {
    if(filterData === 'pending') return !license.is_confirm
    if(filterData === 'confirmed') return license.is_confirm
    return true
  })

useState로 filterData의 초기값을 pending 으로 설정했다

• filterData가 pending 일 경우 is_confirm 이 false 인 데이터들만 반환
• filterData가 confirmed 일 경우 is_confirm 이 true 인 데이터들만 반환
• 위 조건에 모두 해당하지 않으면 모든 데이터 반환

    <div className='max-w-[1300px]'>
      <h1 className='mx-[120px] mt-[50px] text-3xl'>진위확인 신청 목록</h1>
      <div className='flex justify-first mt-[30px]'>
        <button 
          className={`border-x border-t border-solid py-2 px-4 rounded ${filterData === 'pending'? 'bg-[#0090F9] text-white' : 'bg-white'}`}
          onClick={()=> setFilterData('pending')}
        >
          승인 대기중
        </button>
        <button 
          className={`border-x border-t py-2 px-4 border border-solid rounded ${filterData === 'confirmed'? 'bg-[#0090F9] text-white' : 'bg-white'}`}
          onClick={()=> setFilterData('confirmed')}
        >
          승인 완료
        </button>
      </div>

• 승인 대기중 버튼을 누르면 filterData 를 pending 으로 설정
• 승인 완료 버튼을 누르면 filterData confirmed 설정