Merge commit '93ed9711' into develop

@@ -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';
-const BJIDFormBlock = styled.div`
-  width: 100%;
-  border-top: 1px solid ${palette.gray[2]};
-  padding-top: 2rem;
-  h4 {
-    color: ${palette.gray[8]};
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-  }
-`;
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+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="백준 아이디"
+          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';
+import { getPROFILE } from '../../modules/profile';
+import { analyzeBJ } from '../../lib/util/analyzeBJ';
+const HomeContainer = ({ history }) => {
+  const dispatch = useDispatch();
+  const [isLogin, setLogin] = useState(false);
+  const { user, profile } = useSelector(({ user, profile }) => ({
+    user: user.user,
+    profile: profile,
+  }));
+  useEffect(() => {
+    analyzeBJ(profile.solvedBJ);
+  }, [profile.solvedBJ]);
+  useEffect(() => {
+    setLogin(true);
+    if (user) {
+      let username = user.username;
+      dispatch(getPROFILE({ username }));
+    }
+  }, [dispatch, user]);
+  return <HomeForm />;
+};
+export default withRouter(HomeContainer);

@@ -6,12 +6,12 @@ import {
   setBJID,
   getPROFILE,
   syncBJID,
+  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 [error, setError] = useState(null);
   const { user, profile } = useSelector(({ user, profile }) => ({
     user: user.user,
     profile: profile,
@@ -42,11 +42,17 @@ const SettingContainer = ({ history }) => {
   };
 
   useEffect(() => {
-    console.log('1');
-    let username = JSON.parse(user).username;
-    dispatch(getPROFILE({ username }));
-    //Do Init Form
-  }, [dispatch]);
+    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(typeof solvedBJ);
+  if (solvedBJ) {
+    solvedBJ.sort(function (a, b) {
+      return a.solvedDate > b.solvedDate
+        ? -1
+        : a.solvedDate < b.solvedDate
+        ? 1
+        : 0;
+    });
+    console.log(solvedBJ);
+  }
+};

+const webhookUri =
+  'https://hooks.slack.com/services/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';
+
+const slack = new Slack();
+slack.setWebhook(webhookUri);
+const send = async (message) => {
+  slack.webhook(
+    {
+      channel: '#general', // 전송될 슬랙 채널
+      username: 'webhookbot', //슬랙에 표시될 이름
+      text: message,
+    },
+    function (err, response) {
+      console.log(response);
+    },
+  );
+};
+
+send('안녕');

@@ -22,7 +22,7 @@ const [
   SYNC_BJID_SUCCESS,
   SYNC_BJID_FAILURE,
 ] = createRequestActionTypes('profile/SYNC_BJID');
-
+export const initializeProfile = createAction(INITIALIZE);
 export const syncBJID = createAction(SYNC_BJID, ({ username }) => ({
   username,
 }));

 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>
   );
 };

@@ -22,6 +22,7 @@
     "mongoose": "^5.9.17",
     "morgan": "^1.10.0",
     "path": "^0.12.7",
+    "slack-node": "^0.1.8",
     "voca": "^1.4.0"
   },
   "devDependencies": {