Merge pull request #13 from nightbug-xx/tom6ed-codex/친구정보-출력-문제-수정

Add friend dashboard page

src/App.tsx

@@ -18,6 +18,7 @@ import CharacterEditPage from './pages/CharacterEditPage'
 import GuidePage from './pages/Guide'
 import FriendListPage from './pages/FriendListPage'
 import FriendRequestsPage from './pages/FriendRequestsPage'
+import FriendCharacterDashboard from './pages/FriendCharacterDashboard'
 
 const darkTheme = createTheme({
   palette: {
@@ -49,6 +50,7 @@ function App() {
               <Route path="/homeworks/:id/edit" element={<HomeworkEditPage />} />
               <Route path="/guide" element={<GuidePage />} />
               <Route path="/friends" element={<FriendListPage />} />
+              <Route path="/friends/:friendId/characters" element={<FriendCharacterDashboard />} />
               <Route path="/friends/requests" element={<FriendRequestsPage />} />
             </Routes>
           </Layout>

src/pages/FriendCharacterDashboard.tsx

@@ -0,0 +1,102 @@
+import {
+    Box,
+    Typography,
+    Card,
+    CardContent,
+    Grid,
+    Stack,
+    Checkbox,
+    Button
+} from '@mui/material'
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import api from '../lib/api'
+
+interface Character {
+    character_id: number
+    character_name: string
+    server: string
+}
+
+interface Homework {
+    homework_id: number
+    title: string
+    reset_type: string
+    clear_count: number
+    complete_cnt: number
+}
+
+export default function FriendCharacterDashboard() {
+    const { friendId } = useParams()
+    const [characters, setCharacters] = useState<Character[]>([])
+    const [homeworks, setHomeworks] = useState<Record<number, Homework[]>>({})
+    const navigate = useNavigate()
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const res = await api.get(`/friends/${friendId}/characters`)
+                setCharacters(res.data)
+
+                const hwResults = await Promise.all(
+                    res.data.map((char: Character) =>
+                        api
+                            .get(`/friends/${friendId}/characters/${char.character_id}/homeworks`)
+                            .then(r => ({ id: char.character_id, data: r.data }))
+                    )
+                )
+                const map: Record<number, Homework[]> = {}
+                hwResults.forEach(item => {
+                    map[item.id] = item.data
+                })
+                setHomeworks(map)
+            } catch (err) {
+                console.error('친구 대시보드 데이터를 불러오는 데 실패했습니다.', err)
+            }
+        }
+        fetchData()
+    }, [friendId])
+
+    return (
+        <Box sx={{ p: 4 }}>
+            <Button variant="outlined" onClick={() => navigate(-1)} sx={{ mb: 2 }}>
+                뒤로가기
+            </Button>
+            <Typography variant="h5" gutterBottom>
+                친구 캐릭터 보기
+            </Typography>
+            <Grid container spacing={2}>
+                {characters.map(char => (
+                    <Grid item xs={12} sm={6} md={4} key={char.character_id} {...({} as any)}>
+                        <Card>
+                            <CardContent>
+                                <Typography variant="h6" gutterBottom>
+                                    {char.server} : {char.character_name}
+                                </Typography>
+                                <Stack spacing={1}>
+                                    {(homeworks[char.character_id] || []).map(hw => (
+                                        <Box key={hw.homework_id}>
+                                            <Typography variant="subtitle2" gutterBottom>
+                                                {hw.title} ({hw.clear_count}회)
+                                            </Typography>
+                                            <Stack direction="row" spacing={1}>
+                                                {Array.from({ length: hw.clear_count }).map((_, idx) => (
+                                                    <Checkbox
+                                                        key={idx}
+                                                        checked={idx < hw.complete_cnt}
+                                                        disabled
+                                                        size="small"
+                                                    />
+                                                ))}
+                                            </Stack>
+                                        </Box>
+                                    ))}
+                                </Stack>
+                            </CardContent>
+                        </Card>
+                    </Grid>
+                ))}
+            </Grid>
+        </Box>
+    )
+}