diff --git a/src/App.tsx b/src/App.tsx index 149cf46..5d0f508 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,8 +6,10 @@ import Layout from './components/Layout' import Home from './pages/Home' import LoginPage from './pages/Login' import RegisterCharacter from './pages/RegisterCharacter' +import RegisterHomework from './pages/RegisterHomework' import CharacterList from './pages/CharacterList' -import CharacterHomeworks from './pages/CharacterHomeworks' +import HomeworkList from './pages/HomeworkList' +import CharacterHomeworkSelect from './pages/CharacterHomeworkSelect' // 정확한 경로로 수정 import Signup from './pages/Signup' const darkTheme = createTheme({ @@ -29,7 +31,9 @@ function App() { } /> } /> } /> - } /> + } /> + } /> + } /> } /> diff --git a/src/pages/CharacterHomeworkSelect.tsx b/src/pages/CharacterHomeworkSelect.tsx new file mode 100644 index 0000000..1569a54 --- /dev/null +++ b/src/pages/CharacterHomeworkSelect.tsx @@ -0,0 +1,53 @@ +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([]) + 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 ( + + + 내 숙제 관리 + + + {characters.map((char) => ( + + handleClick(char.id)} sx={{ cursor: 'pointer' }}> + + {char.name} + {/* 숙제 목록이 생기면 여기에 출력 */} + + + + ))} + + + ) +} diff --git a/src/pages/CharacterList.tsx b/src/pages/CharacterList.tsx index 98506fd..98e95b0 100644 --- a/src/pages/CharacterList.tsx +++ b/src/pages/CharacterList.tsx @@ -1,45 +1,64 @@ -import { Box, Card, CardContent, Typography, Grid, Button } from '@mui/material' -import { Link } from 'react-router-dom' +import { Box, Card, CardContent, Typography, Container, Grid } from '@mui/material' +import { useEffect, useState } from 'react' +import { useNavigate, Link } from 'react-router-dom' +import api from '../lib/api' -const dummyCharacters = [ - { id: 1, name: '한울이', level: 45, job: '궁수', server: '라사', power: 21000 }, - { id: 2, name: '별이', level: 32, job: '사제', server: '라사', power: 18000 }, -] +interface Character { + id: number + name: string + server?: string + job?: string + combat_power?: number +} export default function CharacterList() { - return ( - - - 캐릭터 목록 - - - {dummyCharacters.map((char) => ( - - - - {char.name} - 레벨: {char.level} - 직업: {char.job} - 서버: {char.server} - 전투력: {char.power} - - - - ))} - - - - - + 캐릭터 추가 - - - - - - - ) + const [characters, setCharacters] = useState([]) + + useEffect(() => { + const fetchCharacters = async () => { + try { + const response = await api.get('/characters') + setCharacters(response.data) + } catch (err) { + console.error('캐릭터 목록을 불러오는 중 오류 발생:', err) + } + } + + fetchCharacters() + }, []) + + return ( + + + 캐릭터 목록 + + + {characters.map((char) => ( + + + + {char.name} + 서버: {char.server || '-'} + 직업: {char.job || '-'} + 전투력: {char.combat_power?.toLocaleString() || '-'} + + + + ))} + + + + + + 캐릭터 추가 + + + + + + + ) } diff --git a/src/pages/HomeworkList.tsx b/src/pages/HomeworkList.tsx new file mode 100644 index 0000000..e39feab --- /dev/null +++ b/src/pages/HomeworkList.tsx @@ -0,0 +1,62 @@ +import { Box, Card, CardContent, Typography, Grid, Button } from '@mui/material' +import { Link } from 'react-router-dom' +import { useEffect, useState } from 'react' +import api from '../lib/api' + +interface HomeworkType { + id: number + title: string + description: string + reset_type: string + clear_count: number +} + +export default function HomeworkList() { + const [homeworks, setHomeworks] = useState([]) + + useEffect(() => { + const fetchHomeworks = async () => { + try { + const res = await api.get('/homeworks') + setHomeworks(res.data) + } catch (err) { + console.error('숙제 목록을 불러오는 데 실패했습니다.', err) + } + } + fetchHomeworks() + }, []) + + return ( + + + 숙제 목록 + + + {homeworks.map((hw) => ( + + + + {hw.title} + 주기: {hw.reset_type} + 횟수: {hw.clear_count} + + + + ))} + + + + + + 숙제 추가 + + + + + + + ) +} diff --git a/src/pages/RegisterCharacter.tsx b/src/pages/RegisterCharacter.tsx index cf936e6..a4d4093 100644 --- a/src/pages/RegisterCharacter.tsx +++ b/src/pages/RegisterCharacter.tsx @@ -1,13 +1,34 @@ import { Box, Button, Container, Paper, TextField, Typography } from '@mui/material' import { useState } from 'react' +import api from '../lib/api' +import { useNavigate } from 'react-router-dom' export default function RegisterCharacter() { const [name, setName] = useState('') const [server, setServer] = useState('') + const [job, setJob] = useState('') + const [power, setPower] = useState('') + const navigate = useNavigate() - const handleSubmit = () => { - console.log('캐릭터 등록:', { name, server }) - // 추후 API 연동 예정 + const handleSubmit = async () => { + if (!name) { + alert('캐릭터명을 입력해주세요.') + return + } + + try { + await api.post('/characters', { + name, + server: server || undefined, + job: job || undefined, + combat_power: power ? parseInt(power, 10) : undefined, + }) + alert('캐릭터가 성공적으로 등록되었습니다.') + navigate('/characters') + } catch (err: any) { + console.error(err) + alert('캐릭터 등록 중 오류가 발생했습니다.') + } } return ( @@ -18,10 +39,11 @@ export default function RegisterCharacter() { setName(e.target.value)} fullWidth + required /> setServer(e.target.value)} fullWidth /> + setJob(e.target.value)} + fullWidth + /> + setPower(e.target.value)} + fullWidth + /> diff --git a/src/pages/RegisterHomework.tsx b/src/pages/RegisterHomework.tsx new file mode 100644 index 0000000..be2e481 --- /dev/null +++ b/src/pages/RegisterHomework.tsx @@ -0,0 +1,85 @@ +import { Box, TextField, Button, Typography, MenuItem, Container } from '@mui/material' +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import axios from 'axios' +import api from '../lib/api' + +export default function RegisterHomework() { + const [title, setTitle] = useState('') + const [description, setDescription] = useState('') + const [resetType, setResetType] = useState('') + const [clearCount, setClearCount] = useState(0) + const [error, setError] = useState('') + const navigate = useNavigate() + + const handleSubmit = async () => { + setError('') + try { + await axios({ + method: 'post', + url: 'http://api.biryu2000.kr:8000/homeworks', + headers: { + Authorization: `Bearer ${localStorage.getItem('access_token')}`, + 'Content-Type': 'application/json', + }, + data: { + title, + description, + reset_type: resetType, + clear_count: clearCount, + }, + }) + navigate('/homeworks') + } catch (err: any) { + setError('숙제 등록에 실패했습니다.') + console.error(err) + } + } + + return ( + + + 숙제 등록 + + setTitle(e.target.value)} + /> + setDescription(e.target.value)} + /> + setResetType(e.target.value)} + > + 매일 + 매주 + 매달 + + setClearCount(parseInt(e.target.value) || 0)} + /> + {error && {error}} + + + ) +}