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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

 

그럼 계속 진행해보기!

 

오늘의 todo

 

☑ 가입하기 컴포넌트

□ 기본 NavBar 컴포넌트

□ 메인 NavBar 컴포넌트

□ 메인 Feed 컴포넌트

 

➕ 가능하면 깃헙 호스팅으로 배포까지

 

 

2. 기본 NavBar 컴포넌트

 

NavBar를 만들기 위해 새로운 MUI 컴포넌트를 찾아본다!

기본 NavBar는 각 페이지의 제목이 표시되고, 뒤로가기가 있으면 되기 때문에 특별한 기능은 필요없지만

메인 NavBar의 경우 오른쪽에 팝업되는 메뉴가 등장해야 한다.

 

MUI에서 Bottom Navigation이랑 App Bar가 제일 비슷한거 같은데

기본 NavBar 컴포넌트에는 App Bar 만, 메인 NavBar에는 App Bar와 Drawer을 결합하면 될 것 같다.

 

 

App Bar 디자인 중에는 Basic을 골랐는데 아래와 같이 생겼다.

 

이 컴포넌트는 엄청나게 ㅋㅋ 많은 패키지를 import 해야하는데 코드는 아래와 같다.

 

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

 

이 코드를 사용하기 위해 BasicNavBar.js 라는 컴포넌트를 하나 만들어 위의 코드를 그대로 복사 붙여넣기 해준다.

ButtonAppBar라고 지정된 함수명을 BasicNavBar로 바꿔주고 페이지 상단에 들어갈거기 때문에 BasicNavBar를 App.js의 상단에 넣어준다.

 

import React from "react";
import "../stylesheets/App.css";
import { Button  } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Switch, Route, useHistory } from "react-router-dom";

import Signin from "./Signin";
import Join from "./Join";
import BasicNavBar from "./BasicNavBar";

const theme = createTheme({
  status: {
    danger: "#e53e3e",
  },
  palette: {
    primary: {
      main: "#0971f1",
      darker: "#053e85",
    },
    neutral: {
      main: "#64748B",
      contrastText: "#fff",
    },
    btn: {
      main: "#f2f2f2",
      contrastText: "#111",
    },
  },
});

function App() {
  let history = useHistory();

  return (
    <ThemeProvider theme={theme}>
      <BasicNavBar/>
      <Switch>
        <Route exact path="/">
          <div className="App">
            <div className="header">
              <img className="main_img" src="images/todomate.jpg" />
              <h1>todo mate</h1>
              <h3>할 일을 작성, 계획, 관리하세요.</h3>
            </div>
            <div className="start_btn">
              <Button 
                className="join_btn" 
                color="btn"
                variant="contained" 
                onClick={() => {
                  history.push("/join");
                }}
              >
                가입하기
              </Button>
              <Button
                className="signin_btn"
                color="btn"
                variant="contained"
                onClick={() => {
                  history.push("/signin");
                }}
              >
                로그인
              </Button>
            </div>
          </div>
        </Route>

        <Route exact path="/join">
          <Join />
        </Route>
        <Route exact path="/signin">
          <Signin />
        </Route>
        </Switch>

    </ThemeProvider>
  );
}

export default App;

 

이렇게 하면 import 는 되었는데, BasicNavBar와 관련된 에러 메시지가 뜬다.

에러 메시지는 ./src/components/BasicNavBar.js  Module not found: Can't resolve '@mui/icons-material/Menu' in ...

이거는 @mui/icons-material/Menu 와 같은 아이콘 패키지들이 npm 을 통해 설치되지 않아서 그럴 수 있다.

 

npm i @material-ui/core
npm i @material-ui/icons

위와 같은 명령어들을 통해 패키지를 설치해준다.

 

그리고 설치했으나 여전히 똑같은 상황인 경우, 해당 아이콘이 지금 MUI의 버전과 맞지 않아서 그럴 수 있다.

(MUI의 버전은 v4이나 아이콘은 v5인 경우)

그럼 그 아이콘을 이전 버전에서 찾아서 대체해야 한다!

나의 경우 MenuIcon 컴포넌트를 삭제하니 정상적으로 작동했다.

그래서 MenuIcon 대신 아래의 DehazeIcon으로 변경했다.

import DehazeIcon from '@material-ui/icons/Dehaze';

 

※ MUI v4 버전 Meterial-ui icons

Material Icons - Material-UI

 

 

그러면 이렇게 예쁜 Navbar 완성💙

 

 

예쁘구만!

 

 

필요한 것들을 남기고 좌측에 < 와 같은 뒤로가기 아이콘을 넣는 등 색상과 모양 커스텀을 진행한다.

 

 

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';

export default function BasicNavBar () {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" color="nav" sx={{ boxShadow:"none" }}>
        <Toolbar>
        <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="back"
            sx={{ mr: 2 }}
          >
         <NavigateBeforeIcon />
          </IconButton>
          <Typography className="navbar_title" variant="h6" component="div" color="inherit" fontSize={16} fontWeight={600} sx={{ margin: "auto", transform: "translateX(-50%)" }}>
            제목
          </Typography>

        </Toolbar>
      </AppBar>
    </Box>
  );
}

 

BasicNavBar 컴포넌트의 CSS는 props에 넣어서 만들어봤다. color는 App.js 의 ThemeProvider에 palette에 nav 라는 색상값을 줬고(사실 흰색이면서), sx 라는 props에서 대부분의 CSS를 손볼 수 있었다.

기존 AppBar 컴포넌트에 있던 배경색 값과 그림자, 폰트 사이즈 등을 수정하고 margin auto를 이용해 글자가 가운데로 오도록 한 뒤 약간 치우친 것은 transform으로 수정하는 고전적인 CSS 수정 방법을 사용했다.

 

 

결과물은 아래와 같다.