wdj0729/2020-dev-matching

:gem: [프론트엔드] 고양이 사진 검색 사이트

Hi 👋, I'm SoF

A Creative Frontend Developer from South Korea

Languages and Tools:

2020-dev-matching's Issues

#1 이미지 상세 보기 모달 관련

• 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다.

#3 코드 구조 관련

• API fetch 코드를 async , await 문을 이용하여 수정해주세요. 해당 코드들은 에러가 났을 경우를 대비해서 적절히 처리가 되어있어야 합니다.
• API 의 status code 에 따라 에러 메시지를 분리하여 작성해야 합니다. 아래는 예시입니다.

  const request = async (url: string) => {
    try {
      const result = await fetch(url);
      return result.json();
    } catch (e) {
      console.warn(e);
    }
  }

  const api = {
    fetchGif: keyword => {
      return request(`${API_ENDPOINT}/api/gif/search?q=${keyword}`);
    },
    fetchGifAll: () => {
      return request(`${API_ENDPOINT}/api/gif/all`);
    }
  };

#2 검색 페이지 관련

• 데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 유저에게 알리는 UI를 추가해야 합니다.
• 검색 결과가 없는 경우, 유저가 불편함을 느끼지 않도록 UI적인 적절한 처리가 필요합니다.
• SearchInput 옆에 버튼을 하나 배치하고, 이 버튼을 클릭할 시 /api/cats/random 을 호출하여 화면에 뿌리는 기능을 추가합니다. 버튼의 이름은 마음대로 정합니다.