// API 응답에서 pokemon 리스트를 가져오고 리스트 내부의 pokemon 요소를 이용하여 detail 정보를 담은 리스트를 생성합니다.

  // 노션 참조

  /**

   * javascript array의 map을 사용하여 pokemon들의 데이터를

   * 포켓몬 데이터 포멧(정규화 작업)을 위해서는

   * @formatPokemonData 함수를 사용하세요.

   * ../utils/pokemon-helper.js 에서 확인하세요.

   */

일단 파싱해서 json에 담고 setPokemonList(json.results)에 담았는데요

저 주석 부분을 어떻게 해야할 지 감이 안와서 시도조차도 못하고 있습니다..

조금 힌트나 방법을 얻을 수 있을까요?

작성한 코드 및 에러 메세지

import { useEffect, useState } from "react";
import PokemonCard from "./PokemonCard";
import { formatPokemonData } from "../utils/pokemon-helper";
import Loader from "./Loader";


// type을 props로 전달 받도록 합니다
const PokemonsContainer = () => {
  // 포켓몬 리스트 상태관리
  const [pokemonList, setPokemonList] = useState([]);
  // loading 상태 관리
  const [loading, setLoading] = useState(false);


  const fetchPokemons = async () => {
    /*  선택된 포켓몬 타입으로 해당 타입을 가진 포켓몬 데이터를 불러오는 API */
    // example types dragon, normal , fighting, flying
    const API_END_POINT = `https://pokeapi.co/api/v2/type/${type}`;


    // API 응답에서 pokemon 리스트를 가져오고 리스트 내부의 pokemon 요소를 이용하여 detail 정보를 담은 리스트를 생성합니다.
    // 노션 참조


    /**
     * javascript array의 map을 사용하여 pokemon들의 데이터를
     * 포켓몬 데이터 포멧(정규화 작업)을 위해서는
     * @formatPokemonData 함수를 사용하세요.
     * ../utils/pokemon-helper.js 에서 확인하세요.
     */
    try {
      const response = await fetch(API_END_POINT);
      const json = await response.json();
      setPokemonList(json.results);
    } catch (error) {
      console.error("error", error);
    } finally {
      // 일단 로딩 안보이게
      setLoading(false);
    }
  };


  useEffect(() => {
    fetchPokemons();
  }, []);


  return (
    <div className="pokemons-container">
      <Loader />


      {pokemonList.map((pokemon) => (
        <PokemonCard key={pokemon.id} pokemon={pokemon} />
      ))}
    </div>
  );
};


export default PokemonsContainer;