에러

모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다. 더보기 }, fetchCatDetails: id => { return fetch(`${API_ENDPOINT}/api/cats/${id}`).then(res => res.json()) } fetch(url, [, options]) fetch 함수에 첫 번째 인수로 HTTP요청을 전송할 URL만 전달하면 GET 요청을 전송한다. 더보기 onClick: async image => { const catDetail = await api.fetchCatDetails(image.id) this.imageInfo.setState({ visible: true, image :catDetail.data }); } ..

디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다. @media(max-width:768px){ .ImageInfo .content-wrapper{ width: 100%; } } 필수 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다. document.addEventListener("click", e=>{ if(e.target == document.querySelector('.ImageInfo') || e.target == document.querySelector('.close')){ this.$imageInf..

HTML, CSS 관련 현재 HTML 코드가 전체적으로 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다. 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다. 992px 이하: 3개 768px 이하: 2개 576px 이하: 1개 다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다. CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다. 모든 글자 색상은 #FFFFFF , 배경 색상은 #000000 로 한정합니다. 기본적으로는 OS의 다크모드의 활성화 여부를 기반으로 동작하게 하되, 유저가 테마를 토글링 할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 만듭니다. 이미지 상세 보기 모달 관..

유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다. 992px 이하: 3개 768px 이하: 2개 576px 이하: 1개 @media(max-width:992px){ .SearchResult{ grid-template-columns: repeat(3, minmax(250px, 1fr)); } } @media(max-width:768px){ .SearchResult{ grid-template-columns: repeat(2, minmax(250px, 1fr)); } } @media(max-width:576px){ .SearchResult{ grid-template-columns: repeat(1, minmax(250px, 1fr)); } } g..