Add friend menu with submenus

src/App.tsx

@@ -16,6 +16,8 @@ import Dashboard from './pages/Dashboard'
 import MePage from './pages/MePage'
 import CharacterEditPage from './pages/CharacterEditPage'
 import GuidePage from './pages/Guide'
+import FriendList from './pages/FriendList'
+import FriendRequests from './pages/FriendRequests'
 
 const darkTheme = createTheme({
   palette: {
@@ -44,6 +46,8 @@ function App() {
               <Route path="/me" element={<MePage />} />
               <Route path="/characters/:id/edit" element={<CharacterEditPage />} />
               <Route path="/homeworks/:id/edit" element={<HomeworkEditPage />} />
+              <Route path="/friends" element={<FriendList />} />
+              <Route path="/friends/requests" element={<FriendRequests />} />
               <Route path="/guide" element={<GuidePage />} />
             </Routes>
           </Layout>

src/components/Layout.tsx

@@ -19,6 +19,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
     const [anchorElCharacter, setAnchorElCharacter] = useState<null | HTMLElement>(null)
     const [anchorElHomework, setAnchorElHomework] = useState<null | HTMLElement>(null)
+    const [anchorElFriend, setAnchorElFriend] = useState<null | HTMLElement>(null)
     const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
 
     const handleMenuOpen = (
@@ -71,6 +72,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                 <MenuItem component={Link} to="/homeworks" onClick={handleMenuClose(setAnchorElHomework)}>숙제 목록</MenuItem>
             </Menu>
 
+            <Button color="inherit" onClick={handleMenuOpen(setAnchorElFriend)}>친구</Button>
+            <Menu
+                anchorEl={anchorElFriend}
+                open={Boolean(anchorElFriend)}
+                onClose={handleMenuClose(setAnchorElFriend)}
+            >
+                <MenuItem component={Link} to="/friends" onClick={handleMenuClose(setAnchorElFriend)}>친구목록</MenuItem>
+                <MenuItem component={Link} to="/friends/requests" onClick={handleMenuClose(setAnchorElFriend)}>요청관리</MenuItem>
+            </Menu>
+
             <IconButton color="inherit" onClick={handleUserMenuOpen} size="large">
                 <AccountCircle />
             </IconButton>

src/pages/FriendList.tsx

@@ -0,0 +1,12 @@
+import { Box, Typography } from '@mui/material'
+
+export default function FriendList() {
+    return (
+        <Box sx={{ p: 4 }}>
+            <Typography variant="h5" gutterBottom>
+                친구 목록
+            </Typography>
+            <Typography>준비 중...</Typography>
+        </Box>
+    )
+}

src/pages/FriendRequests.tsx

@@ -0,0 +1,12 @@
+import { Box, Typography } from '@mui/material'
+
+export default function FriendRequests() {
+    return (
+        <Box sx={{ p: 4 }}>
+            <Typography variant="h5" gutterBottom>
+                요청 관리
+            </Typography>
+            <Typography>준비 중...</Typography>
+        </Box>
+    )
+}