카테고리 없음

챔피언 목록 페이지

myinfo7091 2024. 12. 18. 15:22
import ChampionCards from "@/components/ChampionCards";
import { Champion } from "@/types/Champion";
import { fetchChampionList, fetchVersion } from "@/utils/serverApi";

export default async function ChampionsPage() {
  const version = await fetchVersion();
  const championList: Champion[] = await fetchChampionList();

  return (
    <>
      <div>
        <h2>챔피언 목록</h2>
      </div>

      <div>
        {championList.map((champion) => (
          <ChampionCards
            key={champion.id}
            champion={champion}
            version={version}
          />
        ))}
      </div>
    </>
  );
}
import React from "react";
import { Champion } from "@/types/Champion";
import Image from "next/image";

interface ChampionCardProps {
  champion: Champion;
  version: string;
}

const ChampionCards = ({ champion, version }: ChampionCardProps) => {
  return (
    <div
      style={{
        border: "1px solid #ccc",
        borderRadius: "8px",
        padding: "16px",
        textAlign: "center",
        width: "150px",
      }}
    >
      <Image
        src={`https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${champion.id}.png`}
        alt={champion.name}
        width={100}
        height={100}
      />
      <h3>{champion.name}</h3>
      <p>{champion.title}</p>
    </div>
  );
};

export default ChampionCards;