54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Box, Card, CardContent, Typography, Grid } from '@mui/material'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useEffect, useState } from 'react'
|
|
import api from '../lib/api'
|
|
|
|
interface Character {
|
|
id: number
|
|
name: string
|
|
server: string
|
|
job?: string
|
|
combat_power?: number
|
|
}
|
|
|
|
export default function CharacterHoCharacterHomeworkSelectmeworkSelect() {
|
|
const [characters, setCharacters] = useState<Character[]>([])
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(() => {
|
|
const fetchCharacters = async () => {
|
|
try {
|
|
const res = await api.get('/characters')
|
|
setCharacters(res.data)
|
|
} catch (err) {
|
|
console.error('캐릭터 목록을 불러오는 데 실패했습니다.', err)
|
|
}
|
|
}
|
|
fetchCharacters()
|
|
}, [])
|
|
|
|
const handleClick = (id: number) => {
|
|
navigate(`/characters/${id}/homeworks`)
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ p: 4 }}>
|
|
<Typography variant="h5" gutterBottom>
|
|
내 숙제 관리
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
{characters.map((char) => (
|
|
<Grid item key={char.id} xs={12} sm={6} md={4}>
|
|
<Card onClick={() => handleClick(char.id)} sx={{ cursor: 'pointer' }}>
|
|
<CardContent>
|
|
<Typography variant="h6">{char.name}</Typography>
|
|
{/* 숙제 목록이 생기면 여기에 출력 */}
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
)
|
|
}
|