어드민 페이지를 빠르게 구현하려고 한 파일에 코드를 다 넣다보니 가독성이 너무 떨어져서 코드 리팩토링을 했다

Route Handler 사용

Supabase에 GET, PATCH를 요청하는 API는 라우터 핸들러를 사용하기로 했다

GET

export async function GET(req: NextRequest) {
  try {
    const { data, error } = await supabase
      .from('admin_test')
      .select('*')

    if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

    return NextResponse.json(data, { status: 200 })
  } catch (error) {
    return NextResponse.json({ error: '서버 에러 발생' }, { status: 500 })
  }
}

PATCH

export async function PATCH(req: NextRequest) {
  try {
    const { id, is_confirm }: { id: number, is_confirm: boolean } = await req.json()
    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) {
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

    return NextResponse.json(data, { status: 200 })
  } catch (error) {
    return NextResponse.json({ error: '서버 에러 발생' }, { status: 500 })
  }
}

데이터 리스트, 카테고리 컴포넌트 분리

사진처럼 3개의 컴포넌트로 분리시켰다

const Page = () => {
  const { licenses, filterData, setFilterData, handleConfirm, filteredLicenses, formatDate} = useLicenses()

  return (
    <div className='max-w-[1300px] mx-auto flex flex-col'>
      <h1 className='mx-[120px] mt-[50px] text-3xl'>진위확인 신청 목록</h1>
      <ConfirmState setFilterData={setFilterData} filterData={filterData}/>
      <div className='border border-solid w-[1200px] mx-auto p-3 rounded-tr-xl rounded-br-xl rounded-bl-xl mb-[50px]'>
        <table className='w-full border-collapse'>
          <Category />
          <LicenseLists filteredLicenses={filteredLicenses} formatDate={formatDate} handleConfirm={handleConfirm}/>
        </table>
      </div>
    </div>
  )
}

export default Page

커스텀 훅

useState, useEffect, 함수들도 코드가 길어져서 그냥 커스텀 훅을 만들어 관리하면 페이지의 코드가 더 간결하게 보일것 같아서 사용하였다

const useLicenses = () => {
  const [licenses, setLicenses] = useState<CheckLicense[]>([])
  const [filterData, setFilterData] = useState('pending')
  
  useEffect(() => {
  	// supabase에 데이터 요청하는 api
  },[])
  
  const handlerConfirm = async = (id:string, is_confirm:boolean) => {
  	// supabase 승인 상태 및 승인 일자 업데이트 api
  }
  
  const filterdLicenses = licenses.filter((license) => {
  	// 승인된 데이터를 필터링 하는 함수
  })
  
   const formatDate = (date : Date | string | null) => {
    if(date instanceof Date) { 
      return date.toLocaleString()
    }
    return date
  }
  return { licenses, filterData, setFilterData, handleConfirm, filteredLicenses, formatDate}
}
export default useLicenses

상태관리 라이브러리 vs Props

리팩토링을 하면서 zustand로 상태관리를 하는것이 나을지 props를 내려주는것이 나을지 고민을 했다.
나는 props를 내려주기로 결정했다.

• licenses는 어드민 페이지에서만 사용한다
• filterData도 마찬가지로 어드민 페이지에서만 사용한다
• props drilling이 발생한다면 zustand를 선택했지만, 한번만 props를 내려주기 때문에 더 효율적이라고 생각했다