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

Improve friend list layout

src/pages/FriendListPage.tsx

@@ -1,3 +1,12 @@
+import {
+    Box,
+    Card,
+    CardContent,
+    Container,
+    Grid,
+    Typography,
+    Button,
+} from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import api from '../lib/api'
@@ -26,26 +35,51 @@ export default function FriendListPage() {
     }, [])
 
     return (
-        <div>
+        <Container sx={{ mt: 4 }}>
-            <h2>친구 목록</h2>
+            <Typography variant="h5" gutterBottom>
-            <button onClick={() => setShowDialog(true)}>+ 친구 추가</button>
+                친구 목록
-
+            </Typography>
-            {friends.length === 0 ? (
+            <Grid container spacing={2}>
-                <p>친구가 없습니다.</p>
+                {friends.map(friend => (
-            ) : (
+                    <Grid item xs={12} sm={6} md={4} key={friend.id} {...({} as any)}>
-                <ul>
+                        <Card>
-                    {friends.map(friend => (
+                            <CardContent>
-                        <li key={friend.id}>
+                                <Typography variant="h6">{friend.email}</Typography>
-                            {friend.email}
+                                <Box sx={{ mt: 1 }}>
-                            <button onClick={() => navigate(`/friends/${friend.id}/characters`)}>
+                                    <Button
-                                캐릭터 보기
+                                        variant="outlined"
-                            </button>
+                                        onClick={() =>
-                        </li>
+                                            navigate(`/friends/${friend.id}/characters`)
-                    ))}
+                                        }
-                </ul>
+                                    >
-            )}
+                                        캐릭터 보기
+                                    </Button>
+                                </Box>
+                            </CardContent>
+                        </Card>
+                    </Grid>
+                ))}
+                <Grid item xs={12} sm={6} md={4} {...({} as any)}>
+                    <Card
+                        onClick={() => setShowDialog(true)}
+                        sx={{
+                            height: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            cursor: 'pointer',
+                        }}
+                    >
+                        <CardContent>
+                            <Typography variant="h6" align="center">
+                                + 친구 추가
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+            </Grid>
 
             {showDialog && <FriendSearchDialog onClose={() => setShowDialog(false)} />}
-        </div>
+        </Container>
     )
 }