Stateairline client

Main.js

export default function Main() {
  const [condition, setCondition] = useState({
    departure: 'ICN'
  })
  const [flightList, setFlightList] = useState(json)

  const search = ({ departure, destination }) => {
    if (condition.departure !== departure || condition.destination !== destination) {
      console.log('condition 상태를 변경시킵니다')
      setCondition({ departure, destination })
      // TODO:
    }
  }
  const [isloading, setisloading] = useState(false)
  useEffect(()=> {
    setisloading(true)
    getFlight(condition)
    .then(res => {
      setFlightList(res)
      setisloading(false)
    })
  }, [condition]
  )
  <main>
        <h1>
          여행가고 싶을 땐, States Airline
        </h1>
        <Search onSearch={search}/>
        <div className="table">
          <div className="row-header">
            <div className="col">출발</div>
            <div className="col">도착</div>
            <div className="col">출발 시각</div>
            <div className="col">도착 시각</div>
            <div className="col"></div>
          </div>
          {isloading ? <LoadingIndicator /> : <FlightList list={flightList}/>}
        </div>

Search.js

const handleKeyPress = (departure, destination, e) => {
    if (e.type === 'keypress' && e.code === 'Enter') {
      handleSearchClick(departure, destination)
    }
  }
  
const handleSearchClick = (departure, destination) => {
    console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다')
    onSearch({departure, destination})
    // TODO:
  }

  return <fieldset>
    <legend>공항 코드를 입력하고, 검색하세요</legend>
    <span>출발지</span>
    <input id="input-departure" type="text" disabled value="ICN"></input>
    <span>도착지</span>
    <input id="input-destination" type="text" value={textDestination} onChange={handleChange} placeholder="CJU, BKK, PUS 중 하나를 입력하세요" onKeyPress={(e) => handleKeyPress("ICN", textDestination, e)} />
    <button id="search-btn" onClick={() => handleSearchClick("ICN", textDestination)}>검색</button>
  </fieldset>
}

FlightDataApi.js

export function getFlight(filterBy = {}) {
  // HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
  // TODO: 아래 구현을 REST API 호출로 대체하세요.
  let endpoint = 'http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN'
  if (filterBy.destination) {
    endpoint = `${endpoint}&destination=${filterBy.destination}`
  }
  return fetch(endpoint)
  .then(res => res.json())