[주영준] 기능구현 챌린지

[Ye0ngjun]

• 질환 명 검색시 API를 호출하여 드롭박스를 통해 추천 검색어를 보여주는 기능을 구현합니다.
  • 검색어가 없을 시 “검색어 없음” 표출
  • 최근에 검색어를 보여줍니다.
• 검색어를 검색 시 결과를 리스트로 보여줍니다.
  • 검색어가 없을 시 화면도 구현
  • 검색 결과 컴포넌트를 클릭 시 https://clinicaltrialskorea.com/studies/{검색어ID} 링크로 이동
• 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
  • [ ]README에 전략에 대한 설명 기술
• API를 호출할 때 마다 console.info("calling api") 출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정

계속되는 net::ERR_TOO_MANY_REDIRECTS, cors 에러로 api 호출을 못하였습니다.

[dmswn1004]

안녕하세요, 영준님

과제를 Next.js로 구현하셨더라고요! 저도 Next.js를 사용해 보려 했는데 아직 어려운 부분이 있어서 사용하지 못했는데, 정말 대단하시네요!!

구현하신 내용 잘 봤어요! 코드 중간중간 주석으로 간단한 설명을 작성해 주셔서 이해하는 데 큰 도움이 되었습니다.

다만, 코드에서 시맨틱 태그를 용도에 맞게 사용하면 더 좋을 것 같다는 생각이 들었어요. 시맨틱 태그를 사용하면 코드의 가독성과 접근성이 향상될 수 있습니다.

과제 진행하느라 고생 많으셨습니다!!👍

[dmswn1004]

이 부분에서 직접 px로 지정하는 것보다

className="w-4 h-4 mr-4 "

와 같이 Tailwind CSS의 유틸리티 클래스를 사용하는 것이 더 좋을 것 같습니다. 😀

https://tailwindcss.com/docs/width#fixed-widths

[dmswn1004]

아래 코드 부분에서는 div 태그 대신 p 태그를 사용하는 것이 더 좋을 것 같습니다. p 태그는 단락을 나타내는 시맨틱 태그로, 텍스트 블록을 의미 있게 구조화할 수 있고, 접근성 향상과 SEO 측면에서도 유리해서 추천드립니다!!

<�p className="m-6 font-semibold">
  현재 모집 중인 임상시험이 없습니다.
</p>
<p className="text-gray-400">원하시는 결과가 없나요?</p>
<p className="text-gray-400">
  아래 ‘임상시험 소식받기’를 통해 간단한 정보만 입력해주시면 해당 조건에 맞는
</p>
<p className="text-gray-400">
  새로운 임상시험이 등록 되었을 때 빠르게 알려드리겠습니다.
</p>