DevMatching

HTML & CSS

• 시멘틱 마크업으로 변경
• 반응형 column
  • 992px 이하: 3개
  • 768px 이하: 2개
  • 576px 이하: 1개
• 다크모드 지원
• 다크모드 토글버튼 좌측상단

이미지 모달

• 가로 768px 이하인경우 모달 가로길이 디바이스 가로길이만큼 늘리기
• 모달 닫기 (바깥클릭,esc,x버튼)
• 성격,태생정보 렌더링
• 모달 애니메이션 (fade in/out)

검색페이지

• 페이지 진입시 input에 오토포커스
• input 클릭시 기존 키워드 삭제
• 데이터 불러올때 loading ui
• 데이터 없을경우 ui
• 최근검색어 SearchInput 밑에 특정 키워드 누르면 그 키워드로 검색하도록, 최근 5개까지
• 새로고침해도 마지막 검색결과 화면이 유지
• Search옆에 버튼하나 배치 이 버튼 클릭시 랜덤api 사용하여 화면에 뿌리기
• lazy loading
• 검색결과 hover 시 고양이 이름 나오기

스크롤 페이징

• 인피니티 스크롤 만들기

랜덤 고양이 배너 섹션 추가

• 현재 검색결과 위에 배너 형태의 랜덤고양이 섹션
• 랜덤api 사용하여 별도 섹션에 노출
• 검색결과 많더라도 5개만 좌우 슬라이드 이동
• 좌우 버튼 클릭하면 5개씩 체인지

코드구조 관련

• ES6 module 형태로 코드 변경
• API Fetch => async /await & try/catch
• API status code에 따라 에러메시지 분리
• SearchResult 이벤트 위임
• 컴포넌트 내부 함수 Util 작게 나누기