Update Heatmap calendar

+import React, { use } from 'react';
+import CalendarHeatmap from 'react-calendar-heatmap';
+import 'react-calendar-heatmap/dist/styles.css';
+/*
+TODO: 날짜 범위 지정, 날짜별 검색 추가
+*/
+/*
+solvedBJbyDATE:
+solvedBJbyDATE:{
+    20190304 : [Object]
+    ...
+}
+*/
+const HeatMap = (HMArr) => {
+  return (
+    <div>
+      <CalendarHeatmap
+        onClick={() => {
+          console.log(HMArr);
+        }}
+        startDate={new Date('2020-01-01')}
+        endDate={new Date('2020-12-01')}
+        values={HMArr.HMArr}
+        classForValue={(value) => {
+          if (!value) {
+            return 'color-empty';
+          }
+          return `color-github-${value.count}`;
+        }}
+        tooltipDataAttrs={(value) => {
+          return {
+            'data-tooltip': `${value.date} has count: ${value.count}`,
+          };
+        }}
+        showWeekdayLabels={true}
+      />
+    </div>
+  );
+};
+
+export default HeatMap;

@@ -3,7 +3,7 @@ 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';
-import AuthForm from '../auth/AuthForm';
+import HeatMap from './HeatMap';
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
   },
 }));
-const HomeForm = ({ PSdata, goalNum }) => {
+const HomeForm = ({ PSdata, HMArr, goalNum }) => {
   const classes = useStyles();
   return PSdata ? (
     <div className={classes.root}>
@@ -48,7 +48,11 @@ const HomeForm = ({ PSdata, goalNum }) => {
             <h3>마지막으로 푼 문제</h3>
           </Paper>
         </Grid>
-
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>
+            <HeatMap HMArr={HMArr} />
+          </Paper>
+        </Grid>
         <Grid item xs={4}>
           <Paper className={classes.paper}>
             <h1>{PSdata.weekNum}</h1>

-import React, { useEffect } from 'react';
+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, initializeProfile } from '../../modules/profile';
 const HomeContainer = ({ history }) => {
   const dispatch = useDispatch();
+  const [HMArr, setHMArr] = useState([]);
   const { user, profile } = useSelector(({ user, profile }) => ({
     user: user.user,
     profile: profile,
   }));
 
+  const makeHeatmapValues = (PSdata) => {
+    let obj_keys = Object.keys(PSdata);
+    let result = [];
+    for (let i = 0; i < obj_keys.length; i++) {
+      result.push({
+        date:
+          //2019-10-15
+          obj_keys[i].slice(0, 4) +
+          '-' +
+          obj_keys[i].slice(4, 6) +
+          '-' +
+          obj_keys[i].slice(6, 8),
+        count: PSdata[obj_keys[i]].length,
+      });
+    }
+    return result;
+  };
+
   useEffect(() => {
     if (!user) {
       alert('로그인이 필요합니다  ');
@@ -23,7 +42,9 @@ const HomeContainer = ({ history }) => {
     }
   }, [dispatch, user, history]);
   useEffect(() => {
-    console.log(profile);
+    if (profile.solvedBJ_date) {
+      setHMArr(makeHeatmapValues(profile.solvedBJ_date.solvedBJbyDATE));
+    }
   }, [profile]);
   useEffect(() => {
     if (user) {
@@ -31,6 +52,12 @@ const HomeContainer = ({ history }) => {
       dispatch(getPROFILE({ username }));
     }
   }, [dispatch, user]);
-  return <HomeForm PSdata={profile.solvedBJ_date} goalNum={profile.goalNum} />;
+  return (
+    <HomeForm
+      PSdata={profile.solvedBJ_date}
+      HMArr={HMArr}
+      goalNum={profile.goalNum}
+    />
+  );
 };
 export default withRouter(HomeContainer);