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;