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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

어제는 MUI를 살짝 맛봤다! 오늘은 MUI를 이용해서 로그인 화면을 구현해보려고 한다.

로그인 컴포넌트등을 따로 제공하는것 같지만, 화면 만들기만 맛보기 위해 inputbox 두 개와 버튼으로 로그인 화면 비스무리하게 흉내내볼계획이다.

 

 

 

 

 

실제 todomate 화면은 이렇게 생겼다.

하단의 시작하기를 누르면 임의의 계정처럼 바로 투두메이트 서비스를 이용할 수 있고, 로그인을 누르면 가입하기를 눌러 진행한 정보로 로그인을 할 수 있는 화면이 뜬다.

우선 이 메인 화면을 만들어보려고 한다.

 

App.js 컴포넌트 안에 이미지를 중앙 배치하고, 하단에 h1태그와 h3 태그를 이용해 제목과 부제목을 작성한 다음

버튼 두 개를 붙여 시작하기(우리는 가입하기로 변경할 곳)와 로그인 버튼을 구현하려고 한다.

각각의 버튼에는 Link를 이용해 라우팅을 해줘야 하는데 요것도 시간이 허락한다면 해봐야겠다.

 

 

우선 이미지를 고화질로 따와서 public의 images 폴더에 넣어주고 import로 첨부를 하려고 했는데, 

 

 

 

이러한 에러가 떴다. src 외부에서는 파일을 가져올 수 없다는 것이다.

로컬 내에서 이미지를 적용하는 방법이 뭐가 있을까 찾아봤더니 

../../으로 폴더를 찾아가는게 아니라 그냥 public의 index가 HTML 파일을 렌더링 하는 것이므로 index.html 파일을 기준으로 경로를 찾으면 되는 것이었다.

그리고 h1와 h3로 하단에 텍스트를 넣어준다.

 

import '../stylesheets/App.css';


function App() {
  return (
    <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">

      </div>
    </div>
  );
}

export default App;

 

이렇게 하면 그럴싸한 화면이 나온다.

폰트도 좀 수정이 필요하지만 우선은 아래 버튼을 삽입하기 위해 MUI의 Button 컴포넌트 문서에 들어간다.

 

우선 button API를 Import 해준다. 둘 중의 하나만 import 하면 된다.

 

import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';

 

그리고 컴포넌트를 넣어준다. contained 버튼을 선택했다.

 

<Button variant="contained">Contained</Button>

 

그리고 색상을 사용하기 위해 createTheme 패키지와 Themeprovider 를 가지고 온다. 

그리고 theme 이라는 변수에 createTheme라는 객체를 만들어서 안에 색상을 선언해주고 props로 버튼에 얹어준다.

 

import '../stylesheets/App.css';
import { Button } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';

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


function App() {
  return (
    <ThemeProvider theme={theme}>

    <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" variant="contained" color="btn" >가입하기</Button>
        <Button className="signin_btn" color="btn" variant="contained" >로그인</Button>
      </div>

    </div>
    </ThemeProvider>

  );
}

export default App;

 

그리고 CSS를 이용해서 (나중에는 SCSS로 변경해볼까 하는데..) 위치값들을 조금씩 만져주면..

 

 

 

 

요런 디자인의 화면을 만날 수 있다..! 오늘은 너무 늦어서 여기까지ㅠㅠ

내일은 이 화면 가지고 pull request에 도전해볼 계획이다..!!!! 무섭다!!! 떨린다!!!