먼저 Fieldset과 legend를 이용해 웹 접근성에 맞게 form 태그를 잘 작성한 것 같습니다.

Filter 페이지

1. 참조형 데이터 전달 막기

배열, 객체, 함수와 같은 참조형 데이터를 props로 전달한다면 전달할 때마다 리렌더링이 발생합니다. 이것을 막기 위해 상수화 시켜 전달했습니다.

// utils/constants.js
export const FILTER_GAP = [0, 20, 20, 40]
export const SORT_GAP = [0, 20, 20]
export const BUTTON_GAP = [0, 10]
export const FILTERINGS = [
  ['', '없음'],
  ['partial', '미리보기 가능'],
  ['full', '전체 공개'],
  ['ebooks', '전체 eBooks'],
  ['free-ebooks', '무료 eBooks'],
  ['paid-ebooks', '유료 eBooks']
]

( 수정 전 )
<Stack gaps={[0, 20, 20, 40]}>
        <Fieldset legend="필터링">
          <Select id="filter" value={state.filter} onChange={handleChange}>
            {[
              ['', '없음'],
              ['partial', '미리보기 가능'],
              ['full', '전체 공개'],
              ['ebooks', '전체 eBooks'],
              ['free-ebooks', '무료 eBooks'],
              ['paid-ebooks', '유료 eBooks']
            ].map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </Select>
        </Fieldset>
</Stack>

( 수정 후 )
<Stack gaps={FILTER_GAP}>
        <Fieldset legend="필터링">
          <Select id="filter" value={searchInfo.filter} onChange={handleChange}>
            {FILTERINGS.map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </Select>
        </Fieldset>
</Stack>