Update Material Design

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.10.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+import palette from '../../lib/styles/palette';
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    background: palette.gray[2],
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+  },
+}));
+const HomeForm = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default HomeForm;

 import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import styled from 'styled-components';
-import Button from '../common/Button';
 import palette from '../../lib/styles/palette';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
 const BJIDFormBlock = styled.div`
   width: 100%;
-  border-top: 1px solid ${palette.gray[2]};
   padding-top: 2rem;
   h4 {
     color: ${palette.gray[8]};
@@ -13,21 +14,35 @@ const BJIDFormBlock = styled.div`
   }
 `;
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
 const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
+  const classes = useStyles();
   return (
-    <BJIDFormBlock>
-      <h4>백준 아이디</h4>
+    <div>
       <form onSubmit={onBJIDSubmit}>
-        <input
+        <TextField
           name="userBJID"
           onChange={onChange}
           value={profile.userBJID}
           placeholder="백준 아이디"
+          id="standard-basic"
+          label="백준 아이디"
         />
-        <button type="submit">등록</button>
+        <Button variant="outlined" type="submit">
+          등록
+        </Button>
       </form>
-      <button onClick={onSyncBJIDSubmit}>동기화</button>
-    </BJIDFormBlock>
+      <Button variant="outlined" onClick={onSyncBJIDSubmit}>
+        동기화
+      </Button>
+    </div>
   );
 };
 export default BJIDForm;

@@ -3,6 +3,9 @@ import styled from 'styled-components';
 import Button from '../common/Button';
 import palette from '../../lib/styles/palette';
 import BJIDForm from './BJIDForm';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
 
 const SettingFormBlock = styled.div`
   h3 {
@@ -33,30 +36,40 @@ const SectionContainer = styled.div`
   display: flex;
 `;
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+    background: palette.gray[2],
+  },
+  paper: {
+    margin: 'auto',
+    textAlign: 'center',
+    padding: 30,
+  },
+}));
+
 const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
+  const classes = useStyles();
   return (
-    <SettingFormBlock>
-      <SectionContainer>
-        <h3>{profile.username}</h3>
-        <p>입력</p>
-      </SectionContainer>
-
-      <SectionContainer>
-        <BJIDForm
-          profile={profile}
-          onChange={onChange}
-          onBJIDSubmit={onBJIDSubmit}
-          onSyncBJIDSubmit={onSyncBJIDSubmit}
-        />
-      </SectionContainer>
-
-      <SectionContainer>
-        <h3>친구</h3>
-        <StyledInput name="BJID" placeholder="친구 아이디" />
-        <Button>추가</Button>
-      </SectionContainer>
-      <h3>친구 리스트</h3>
-    </SettingFormBlock>
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>
+            <h3>{profile.username}</h3>
+          </Paper>
+        </Grid>
+        <Grid container item xs={12}>
+          <Paper className={classes.paper} elevation={3}>
+            <BJIDForm
+              profile={profile}
+              onChange={onChange}
+              onBJIDSubmit={onBJIDSubmit}
+              onSyncBJIDSubmit={onSyncBJIDSubmit}
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+    </div>
   );
 };
 

+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import HomeForm from '../../components/home/HomeForm';
+const HomeContainer = ({ histroy }) => {
+  const dispatch = useDispatch();
+  const [isLogin, setLogin] = useState(false);
+  const { user, profile } = useSelector(({ user, profile }) => ({
+    user: user.user,
+    profile: profile,
+  }));
+
+  useEffect(() => {
+    if (user) {
+      setLogin(true);
+    }
+  });
+  return <HomeForm />;
+};
+export default withRouter(HomeContainer);

@@ -9,7 +9,7 @@ import {
   initializeProfile,
 } from '../../modules/profile';
 import SettingForm from '../../components/setting/SettingForm';
-import { sync } from '../../../node_modules/fast-glob/index';
+
 const SettingContainer = ({ history }) => {
   const dispatch = useDispatch();
   const { user, profile } = useSelector(({ user, profile }) => ({
@@ -42,12 +42,17 @@ const SettingContainer = ({ history }) => {
   };
 
   useEffect(() => {
-    let username = user.username;
-    dispatch(getPROFILE({ username }));
-    return () => {
-      dispatch(initializeProfile());
-    };
-  }, [dispatch, user]);
+    if (!user) {
+      alert('로그인이 필요합니다  ');
+      history.push('/');
+    } else {
+      let username = user.username;
+      dispatch(getPROFILE({ username }));
+      return () => {
+        dispatch(initializeProfile());
+      };
+    }
+  }, [dispatch, user, history]);
 
   return (
     <SettingForm

+/*
+1. 날짜 순 정렬
+2. 현재 날짜와의 차이
+3. 최근 일주일간 푼 문제 수
+4. 추천 문제
+*/
+exports.analyzeBJ = function (solvedBJ) {
+  console.log(solvedBJ);
+};

 import React from 'react';
 import HeaderContainer from '../containers/common/HeaderContainer';
-import Button from '../components/common/Button';
+import HomeContainer from '../containers/home/HomeContainer';
 
 const HomePage = () => {
   return (
     <div>
       <HeaderContainer />
-      <Button>home</Button>
+      <HomeContainer />
     </div>
   );
 };