인프런 커뮤니티 질문&답변

혼자서 찾아보려고 했는데 도저히 모르겠네요 ㅜ

오류메세지는 나오는건 없고 제목과 같습니다. region을 선택하면 해당 cities가 나와야하는데 안나와요 ㅜ

import Header from "./components/Header.js";
import RegionList from "./components/RegionList.js";
import CityDetail from "./components/CityDetail.js";
import CityList from "./components/CityList.js";
import { request } from "./components/api.js";

export default function App($app){
  const getSortBy = () => {
    if (window.location.search){
      return window.location.search.split('sort=')[1].split('&')[0];
    }
    return 'total';
  };
  const getsearchWord = () => {
    if(window.location.search && window.location.search.includes('search=')){
      return window.location.search.split('search=')[1]
    }  //뒤에 있는 값을 반환
    return '';
  };

  this.state={
    startIdx : 0,
    sortBy : getSortBy(),
    region: '',
    searchWord: getsearchWord(),
    cities:'',
  };
  const header = new Header({
    $app, 
    initialState:{
      sortBy:this.state.sortBy, 
      searchWord:this.state.searchWord 
    },
    handleSortChange: async(sortBy) => {
      const pageUrl = `/${this.state.region}?sort=${sortBy}`;
      history.pushState(
        null, 
        null, 
        this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl
      );

      //변경된 정렬기준을 적용한 새로운 데이터를 불러옴 (매개변수로 전달받은 새로운 정렬기준인 sortBy 값을 넣어야함)
      const cities = await request(0, this.state.region, sortBy, this.state.searchWord);
 
      // 변경된 상태값을 업데이트
      this.setState({
        ...this.state,
        startIdx:0,
        sortBy: sortBy,
        cities: cities,
      });
    },

    handleSearch: async(searchWord) => {
      //웹사이트 주소를 알맞게 변경
      history.pushState(
        null,
        null,
        `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}`
      );
      const cities = await request(0, this.state.region, this.state.sortBy, searchWord);

      this.setState({
        ...this.state,
        startIdx:0,
        searchWord: searchWord,
        cities: cities
      })
    },
  });

  const regionList = new RegionList({
    $app, 
    initialState:this.state.region,
    handleRegion: async(region) => {
      history.pushState(null, null, `/${region}?sort=total`);
      const cities = await request(0, region, 'total');
      console.log("cities",cities)
      this.setState({
        ...this.state,
        startIdx: 0,
        region: region,
        sortBy: 'total',
        cities: cities,
        searchWord: '',
      });
    },
  });


  const cityList = new CityList({
    $app, 
    initialState:this.state.cities,
    // 아래는 더보기 버튼을 눌렀을 때 실행되는 것 
    handleLoadMore: async() => {
      const newStartIdx = this.state.startIdx + 40;
      const newCities = await request(newStartIdx, this.state.region, this.state.sortBy,  this.state.searchWord);
      this.setState({
        ...this.state,
        startIdx : newStartIdx,
        cities:{
          cities:[...this.state.cities.cities, ...newCities.cities],
          isEnd: newCities.isEnd,
        }
      })

    }
  });

  const cityDetail = new CityDetail();

  this.setState = (newState) => {
    this.state = newState;
    cityList.setState(this.state.cities);
    header.setState({sortBy:this.state.sortBy, searchWord:this.state.searchWord});
    regionList.setState(this.state.region);
  };

  const init = async() => {
    const cities = await request(this.state.startIdx, this.state.sortBy, this.state.region, this.state.searchWord);
    this.setState({
      ...this.state,
      cities: cities, //api 호출의 결과인 cities
    });
  };

  init();
}

 export default function RegionList({$app, initialState, handleRegion}){
  this.state = initialState;
  this.$target = document.createElement('div');
  this.$target.className = 'region-list';

  this.handleRegion = handleRegion;
  $app.appendChild(this.$target);

  this.template = () => {
    const regionList = [
      '🚀 All',
      '🌏 Asia',
      '🕌 Middle-East',
      '🇪🇺 Europe',
      '💃 Latin-America',
      '🐘 Africa',
      '🏈 North-America',
      '🏄 Oceania',
    ];
    let temp = ``;
    regionList.forEach((elm) => {
      let regionId = elm.split(' ')[1];
      temp += `<div id=${regionId}>${elm}</div>`;
    });
    return temp;
  };

  this.render = () => {
    this.$target.innerHTML = this.template();
    let $currentRegion;
    if(this.state){
      $currentRegion = document.getElementById(this.state);
      $currentRegion && ($currentRegion.className = 'clicked');
    } else {
      document.getElementById('All').className = 'clicked';
    }

    const $regionList = this.$target.querySelectorAll('div');
    $regionList.forEach((elm) => {
      elm.addEventListener('click', () => {
        this.handleRegion(elm.id);
      });
    });
  };

  this.setState = (newState) => {
    this.state = newState;
    this.render();
  };
  this.render();
}