요구사항 모달제어.

• 요구사항 : 검색 결과 리스트 클릭 시 모달 제어.

필수 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다. 모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.

모달제어 : ImageInfo.js + cat데이터 들어오는 부분 수정.(setState)

• 이미지 결과(리스트)를 클릭 할 때 가지고 오는 데이터를 한 번 다시 콘솔로 찍어보자.

this.searchResult = new SearchResult({
    $target,
    initialData: this.data,
    onClick: image => {
      **console.log(image)**
      this.imageInfo.setState({
        visible: true,
        image
      });
    },
  });

• image라고 들고오는 데이터를 확인해보면 아래와 같이 나온다. id, name, url

{
	id: "dlq",
	name: "Scottish Fold / 스코티시 폴드",
	url: "<https://cdn2.thecatapi.com/images/dlq.png>"
}

• image라고 썼던 소스를 cat이라고 수정해주자. (차이는 없지만 cat이라는 데이터라는 뜻으로 소통해주자)

this.searchResult = new SearchResult({
  $target,
  initialData: this.data,
  **onClick: cat => {
    this.imageInfo.setState({
      visible: true,
      cat
    });
  },**
});

• App.js 에 있는 this.searchResult에 onShowDetail이라는 메소드를 추가할 수 있지만, 무거운 감이 있어, ImageInfo.js에 넣어줬다.
• App.js this.searchResult에서 onClick시 this.imageInfo.setState() 로 넣어준 곳을 showDetail을 거쳐서 setState()할 수 있도록 바꿔준다.

this.searchResult = new SearchResult({
  $target,
  initialData: this.data,
  onClick: cat => {
    //this.imageInfo.setState({ ... 로 데이터를 넣은 곳을 바꿔줌.
    **this.imageInfo.showDetail({
      visible: true,
      cat
    });**
  },
});

class ImageInfo {
  $imageInfo = null;
  data = null;

  constructor({ $target, data }) {
    const $imageInfo = document.createElement("div");
    $imageInfo.className = "ImageInfo";
    this.$imageInfo = $imageInfo;
    $target.appendChild($imageInfo);

    this.data = data;

    this.render();
  }

  setState(nextData) {
    this.data = nextData;
    this.render();
  }

  
  **showDetail(cat){
		this.setState(cat); 
		//app.js > searchResult onClick 이벤트 > showDetail로 들어온 데이터는 여기서 setState()시켜서 데이터를 받아준다.
  }**

  
  render() {
    if (this.data.visible) {
      const { name, url, temperament, origin } = **this.data.cat;  //이름도 cat으로 바꿈.**

      this.$imageInfo.innerHTML = `
        <div class="content-wrapper">
          <div class="title">
            <span>${name}</span>
            <div class="close">x</div>
          </div>
          <img src="${url}" alt="${name}"/>        
          <div class="description">
            <div>성격: ${temperament}</div>
            <div>태생: ${origin}</div>
          </div>
        </div>`;
      this.$imageInfo.style.display = "block";
    } else {
      this.$imageInfo.style.display = "none";
    }
  }
}

• 모달의 background도 수정

  .ImageInfo .content-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--background);
    color:var(--textColor);
    border: 1px solid #eee;
    border-radius: 5px;
  }
  

모달 상세 데이터 API 요청

• api.js : API 요청 /cats/:id 에 요청 fetch 작성. /api/cats/:id에 요청해야 받아옴.

fetchCatDetail: id => {
  return fetch(`${API_ENDPOINT}/api/cats/${id}`).then(res =>
    res.json()
  );
},

• showDetail에서 api.fetchCatDetail() 실행

  searchResult > onClick > showDetail 호출과 동시에 api 호출 이벤트 실행. > api.js > fetchCatDetail