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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

이제 두 개 뿌심...

 

오늘의 todo

 

☑ 가입하기 컴포넌트

☑ 기본 NavBar 컴포넌트

□ 메인 NavBar 컴포넌트

□ 메인 Feed 컴포넌트

 

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

 

 

3. 메인 NavBar 컴포넌트

 

메인은 기본보다 조금 더 복잡한데 햄버거 버튼을 클릭하면 Drawer 컴포넌트가 나타나야 한다.

그리고 메인페이지에서는 메인 NavBar가 나타나고 나머지 페이지에서는 아까 만든 BasicNavBar 가 나타나야 한다.

 

- Route 마다 NavBar 적용하기

 

삼항연산자를 쓸까 했는데, 그냥 Route 별로 적용해도 되겠다 싶었음 (개별 컴포넌트에 따로 넣어도 되고..)

화면 상 Main 페이지를 별도로 만들어야 하는데 (세션이 없는 상태에서의 첫 화면이 아닌 캘린더와 피드가 있는 화면)

아직 Main을 짜지 못했기 때문에 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";
import MainNavBar from "./MainNavBar";


const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
  typography: {
    Link: {
      color: '#222',
    },
    bolder: {
      fontWeight: 600,
    },
    button: {

    },
  },
  palette: {
    btn: {
      main: "#f2f2f2",
      contrastText: "#111",
    },
    nav: {
      main: "#fefefe",
      contrastText: "#111",
    },
  },
});

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

  return (
    <ThemeProvider theme={theme}>
      <Switch>
        <Route exact path="/">
        <MainNavBar/>
          <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">
        <BasicNavBar/>
          <Join />
        </Route>
        <Route exact path="/signin">
        <BasicNavBar/>
          <Signin />
        </Route>
        </Switch>
    </ThemeProvider>
  );
}

export default App;

 

 

점점 컴포넌트가 길어지고 있는 느낌이지만...

 

 

MainNavBar에서는 아이콘이 2개 필요한데, 우측에 보관함 아이콘과 햄버거 아이콘이다.

(햄버거는 ≡ 와 같은 아이콘을 말한다.)

햄버거 아이콘은 기본 AppBar 컴포넌트에 MenuIcon 이라는 패키지로 표시할 수 있지만 내 리액트와는 버전이 맞지 않아 v4의 Dehaze라는 패키지를 사용한다. (리액트 라우터를 사용하기 위해서 버전을 다운그레이드 함)

 

그리고 우리는 보관함은 만들지 않기로 했으니 아이콘은 햄버거 하나만 필요하다.

 

 

MainNavBar.js 에 BasicNavBar.js 에서 코드를 복사 붙여넣기 해주고,

 

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

 

 

위의 패키지를 import 해준다.

그리고 Main에서는 쓰지 않는 <NavigationBeforeIcon /> 와 <Typography /> 컴포넌트는 빼준다.

 

그럼 아래와 같이 심플한 MainNavBar 코드가 완성된다.

 

 

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';

export default function MainNavBar () {
  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 }}
          >
         <DehazeIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

 

 

햄버거 아이콘은 우측으로 가야하기 때문에 코드 수정이 필요하다.

flex 순서를 바꿔야 하기 때문에 flexDirection : row-reverse를 줘야 하는데 개발자도구로 보니 AppBar 컴포넌트에 flex-direction을 주면 되어서 AppBar 컴포넌트의 sx에 flexDirection: row-reverse를 준다.

그리고 배경색상값과 height 값을 원본과 유사하게 조절해준다.

 

 

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';

export default function MainNavBar () {
  return (
    <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>
  );
}

 

 

이렇게 입력해주면

 

 

 

이렇게 예쁜❣ NavBar를 만날 수 있다.

 

나머지는 내일 😓😓😓😓