목차

🖊️ 사용법

< FE >

1. api 함수 제작 부분

export async function get페이지(orderBy, ..., ...) // 정렬 설정 넣어줌
	await 함수(`기본 주소?orderBy=${orderBy}&search=${search}...)
}

//

2. 컴포넌트 불러오는 곳에서 --
const searchParams = useSearchParams();
const orderBy = searchParams.get("orderBy") || "낮은 가격순";

const { data } = useQuery({
	queryKey: ["이름 알아서", orderBy],
	queryFn: () => api함수명(orderBy)

<Sort />

< BE >

// repository에서 DB 자료 불러올 때
async function getAll(query = {}) {
	const cards = await prisma.photoCard.findMany({ orderBy: getSort("card, orderBy") })

청사진 그리기

<aside>

1. 정렬 기준
   1. 낮은 가격순
   2. 높은 가격순
   3. 최신순
2. ui
   1. 클릭하면 선택 상자가 열리면서 동시에 화살표 방향이 180도 바뀌어야 함
   2. 목록 부분에 z-index 줘야 하고, cursor-pointer 잊으면 안 됨
   3. 영역 바깥을 누르면 닫히게
3. 기타 기능
   1. “가격”의 이름 종류가 두 가지라서 조건문 처리해야 함 </aside>