Feat[#150] : 자동/수동/수동수정/식단수정 페이지 - 학교명 검색 api 바인딩 + 캘린더 유틸 함수 오류 수정

[grapefruit13]

유형

• 기능 구현
• UI 구현
• 리팩토링
• 버그 해결
• 문서 업데이트
• 기타( )

작업 내용

1. 자동식단, 수동식단, 수동식단 수정, 식단 수정 페이지에 학교명 검색 api 바인딩
2. api response 데이터 calendar data 타입으로 변환하는 유틸함수 버그 수정

설명 (선택)

1. 대분류에서 '학교명' 선택 시, 검색할 학교명을 입력할 수 있는 input창과 검색 버튼이 보입니다.
2. keyword 두 글자 이상 입력 시 검색 버튼이 활성화됩니다.

• 검색 결과가 있을 경우 dropdown에 학교명 옵션 목록이 보입니다.
• 검색 결과가 없을 경우 warning toast를 보여줍니다.

스크린샷

리뷰 요구사항

검색 버튼

• 원래 피그마 디자인에는 검색 버튼이 없고, 입력값에 따라 자동완성 형태로 검색 결과를 보여주는 방식이었는데요
• 자동완성 방식으로 구현하려면 다음과 같은 부분들을 고려해야 했습니다:
  1. input의 상태를 실시간으로 감지(watch)
  2. 입력값이 바뀔 때마다 API 요청(debounce/throttle로 api 요청에 딜레이를 줄 수 있지만, 관련 디테일한 논의가 부족한 상황)
  3. 응답으로 받은 string[] 데이터를 Option[] 형태로 변환하여 select box에서 사용할 수 있도록 가공
  4. 네트워크 지연에 따른 UI 상태 처리
• 위와 같은 사항들을 당장 모두 정리하고 구현하기엔 고려할 점이 많다고 판단하여, 우선 검색 버튼을 통해 명시적으로 요청을 보내는 방식으로 간단히 구현하였습니다~
• 지금 방식보다 더 나은 방법을 논의해서 추후에 ui랑 로직 같이 개선하면 좋을 것 같은데, 어떻게 생각하십니까!

기타

• meal header 사용하는 부분들 다 해체해서, 페이지 간의 코드 중복이 좀 있습니다. 컴포넌트 분리 말고 더 괜찮은 방법을 생각 중인데, 아이디어 있으면 제안주시면 감사하겠습니다~

[plla2]

키워드 params로 보내주는 로직이 다 똑같이 적용되어 있어서 중복된 코드들이 엄청나군여

isSchoolNameSuccess와 schoolNameData 두개 디펜던시어레이에 따라 리렌더링되는 useEffect를 커스텀훅으로 만들고, handleSearchClick은 유틸함수로 빼기만해도 중복되는 코드들이 많이 줄어들거같아요! 주말에 고생하셔씁니다