[ToyProject-Todomate] 투두메이트 클론 프로젝트 17

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

내가 하고 싶은 것은 MainNavBar 컴포넌트 안에 버튼을 클릭하면 DrawerMenu가 실행되는 것이다.

따라서 

 

Main > MainNavBar > DrawerMenu가 되어야 하기 때문에 태그의 위치를 그렇게 바꿔준다.

 

 

Main.js

 

 

import React from 'react';
import Box from '@mui/material/Box';

import MainNavBar from './MainNavBar';
import Content from './Content';

export default function Main() {
    return (
        <Box className='main-wrap' backgroundColor='#e4f2b4' sx={{ position: 'relative', width: '100vw', height: '100vh' }}>
        <MainNavBar />
        <Content />
        </Box>
    );
}

 

MainNavBar.js

 

여기서 <React.Fragment> 는 빈 <> 태그처럼 컴포넌트들을 감싸는 최상단 태그의 역할을 해준다.

 

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import DehazeIcon from '@material-ui/icons/Dehaze';
import DrawerMenu from './DrawerMenu';

export default function MainNavBar () {
  return (
    <React.Fragment>
    <Box>
      <AppBar position="static" color="mainnav" sx={{ boxShadow:"none", flexDirection:"row-reverse", height: '90px', borderTop: '1px solid #CCCDCD', boxSizing:'border-box' }}>
        <Toolbar>
        <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="back"
            sx={{ mr: 2 }}
          >
         <DehazeIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </Box>
    <DrawerMenu anchor={'right'} />
    </React.Fragment>
  );
}

 

 

그리고 DrawerMenu.js를 다시 만들어주는데, 나중에 내부의 List들을 SNB.js 라는 컴포넌트로 분리할 계획이라서 컴포넌트 이름만 살려두었다.

오른쪽에서 나오는 방식의 Drawer가 필요해서 오른쪽 버튼으로 작동하는 기능들을 빼고 예시에서 제공하는 코드는 전부 지워버렸다.

 

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import Button from "@mui/material/Button";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";


//하위
export default function DrawerMenu() {
  const [state, setState] = useState({ right: false });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  //list 표시
  const list = (anchor) => (
    <Box
      sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : 200 }} //가로 길이
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        <ListItem>
          <ListItemIcon></ListItemIcon>
          <ListItemText />
        </ListItem>
      </List>
      <Divider />
    </Box>
  );


  //버튼 표시 (상위)
  return (
    <div>
      {["right"].map((anchor) => (
        <React.Fragment key={anchor}>
          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
          <Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
          >
            {list(anchor)}
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}

 

 

나는 Drawer를 별도의 컴포넌트로 만들고 있는데, 여기는 이 전체가 버튼 + Drawer 표시가 한번에 있다. 

이걸 나누는게 너무 어려워서 엄청 오래 걸리고 있다.

 

우선 시간을 단축하기 위해 한 컴포넌트에 다 넣고, 클릭 버튼만 햄버거로 바꿔본다.

 

 

import React, { useState } from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import DehazeIcon from '@material-ui/icons/Dehaze';
import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";

export default function MainNavBar() {
  //하위
  const [state, setState] = useState({ right: false });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  //list 표시
  const SNB = (anchor) => (
    <Box
      sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : 228 }} //가로 길이
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <Box sx={{padding: "10px"}}>
        <h3>Me</h3>
        <p>todo mate</p>
        <button>가입하기</button>
      </Box>
      <List>
        <ListItem>
          <ListItemIcon></ListItemIcon>
          <ListItemText />
        </ListItem>
      </List>
      <Divider />
    </Box>
  );

  return (
    <>
      {["right"].map((anchor) => (
        <React.Fragment key={anchor}>
          <Box>
            <AppBar
              position="static"
              color="mainnav"
              sx={{
                boxShadow: "none",
                flexDirection: "row-reverse",
                height: "90px",
                borderTop: "1px solid #CCCDCD",
                boxSizing: "border-box",
              }}
            >
              <Toolbar>
                <IconButton
                  size="large"
                  edge="start"
                  color="inherit"
                  aria-label="back"
                  sx={{ mr: 2 }}
                  onClick={toggleDrawer(anchor, true)}
                >
                  <DehazeIcon />
                </IconButton>
              </Toolbar>
            </AppBar>
          </Box>
          <Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
          >
            {SNB(anchor)}
          </Drawer>
        </React.Fragment>
      ))}
    </>
  );
}

 

 

이렇게 해서 일주일동안 머리를 싸맸던 Drawer 메뉴가 어정쩡하게 끝났다 ㅠ 사실 Drawer만 넣고 나머지 중요한 부분은 오히려 SNB에 있는 List 컴포넌트가 더 많을 거 같다. 

아무튼 이렇게라도 마무리할 수 있어서 다행이다.....