[#54] MainMenu 컴포넌트 분리

UOSTime · May 1, 2021 · 8237e8b · 8237e8b
1 parent e811e1e
commit 8237e8b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/src/views/chat/MainMenu.jsx b/src/views/chat/MainMenu.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Menu, MenuItem } from '@material-ui/core';
+
+export default function MainMenu({anchorEl, open, onClose, options}) {
+    return (
+        <Menu
+            id="long-menu"
+            anchorEl={anchorEl}
+            getContentAnchorEl={null}
+            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+            transformOrigin={{ vertical: "top", horizontal: "right" }}
+            keepMounted
+            open={open}
+            onClose={onClose}
+            PaperProps={{
+            style: {
+                maxHeight: 48 * 4.5,
+                width: '20ch',
+            },
+            }}
+        >
+            {options.map((option) => (
+            <MenuItem key={option} selected={option === 'Pyxis'}>
+                {option}
+            </MenuItem>
+            ))}
+        </Menu>
+    )
+}
diff --git a/src/views/chat/RoomInfoDialog.jsx → src/views/chat/RoomInfoMenu.jsx b/src/views/chat/RoomInfoDialog.jsx → src/views/chat/RoomInfoMenu.jsx
diff --git a/src/views/chat/chatroom.jsx b/src/views/chat/chatroom.jsx
@@ -14,7 +14,8 @@ import { uosYellow } from '@utils/styles/Colors';
 import UserInfoDialog from '../../components/UserInfoDialog';
 import userIcon from '@img/fontawesome/chat-user.svg';
 import usersIcon from '@img/fontawesome/chat-users.svg';
-import RoomInfoMenu from './RoomInfoDialog';
+import RoomInfoMenu from './RoomInfoMenu';
+import MainMenu from './MainMenu';
 
 export default function Chatroom({id}) {
     const [chatRoom, setChatRoom] = useState({});
@@ -304,28 +305,7 @@ export default function Chatroom({id}) {
                 >
                     <MoreVertIcon />
                 </IconButton>
-                <Menu
-                    id="long-menu"
-                    anchorEl={menuAnchorEl}
-                    getContentAnchorEl={null}
-                    anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-                    transformOrigin={{ vertical: "top", horizontal: "right" }}
-                    keepMounted
-                    open={openMenu}
-                    onClose={onCloseMenu}
-                    PaperProps={{
-                    style: {
-                        maxHeight: 48 * 4.5,
-                        width: '20ch',
-                    },
-                    }}
-                >
-                    {menuOption.map((option) => (
-                    <MenuItem key={option} selected={option === 'Pyxis'}>
-                        {option}
-                    </MenuItem>
-                    ))}
-                </Menu>
+                <MainMenu open={openMenu} onClose={onCloseMenu} anchorEl={menuAnchorEl} options={menuOption} />
             </Container>
             <Container className={classes.msgContainer} onScroll={onScroll} ref={msgContainerRef}>
                 <ol className={classes.msgOl}>{ messageList.length > 0 ? messageList : <Typography>{emptyMsg}</Typography> }</ol>