From 91f5a32dbe4f5e83bff0b5e87db738de5455ef4a Mon Sep 17 00:00:00 2001
From: nightbug-xx <nightbug@naver.com>
Date: Mon, 9 Jun 2025 18:51:14 +0900
Subject: [PATCH] Add friend menu with submenus

---
 src/App.tsx                  |  4 ++++
 src/components/Layout.tsx    | 11 +++++++++++
 src/pages/FriendList.tsx     | 12 ++++++++++++
 src/pages/FriendRequests.tsx | 12 ++++++++++++
 4 files changed, 39 insertions(+)
 create mode 100644 src/pages/FriendList.tsx
 create mode 100644 src/pages/FriendRequests.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8228a3b..6a90d01 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f49a838..a9e89a1 100644
--- a/src/components/Layout.tsx
+++ b/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>
diff --git a/src/pages/FriendList.tsx b/src/pages/FriendList.tsx
new file mode 100644
index 0000000..c3c9bab
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/src/pages/FriendRequests.tsx b/src/pages/FriendRequests.tsx
new file mode 100644
index 0000000..53de455
--- /dev/null
+++ b/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>
+    )
+}