Update Slack Setting

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import styled from 'styled-components';
-import palette from '../../lib/styles/palette';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 

 import React from 'react';
-import styled from 'styled-components';
-import Button from '../common/Button';
 import palette from '../../lib/styles/palette';
 import BJIDForm from './BJIDForm';
+import SlackForm from './SlackForm';
 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 {
-    margin: 0;
-    color: ${palette.gray[8]};
-    margin-bottom: 1rem;
-  }
-  background: ${palette.gray[2]};
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-`;
-const StyledInput = styled.input`
-  font-size: 1rem;
-  border: none;
-  border-bottom: 1px solid ${palette.gray[5]};
-  padding-bottom: 0.5rem;
-  outline: none;
-  &:focus {
-    color: $oc-teal-7;
-    border-bottom: 1px solid ${palette.gray[7]};
-  }
-  & + & {
-    margin-top: 1rem;
-  }
-`;
-const SectionContainer = styled.div`
-  display: flex;
-`;
-
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
@@ -48,7 +18,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
+const SettingForm = ({
+  onChange,
+  onBJIDSubmit,
+  onSlackURLSubmit,
+  profile,
+  onSyncBJIDSubmit,
+}) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -68,6 +44,16 @@ const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
             />
           </Paper>
         </Grid>
+
+        <Grid container item xs={12}>
+          <Paper className={classes.paper} elevation={3}>
+            <SlackForm
+              profile={profile}
+              onChange={onChange}
+              onSlackURLSubmit={onSlackURLSubmit}
+            />
+          </Paper>
+        </Grid>
       </Grid>
     </div>
   );

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => {
+  const classes = useStyles();
+  return (
+    <div>
+      <form onSubmit={onSlackURLSubmit}>
+        <TextField
+          name="slackWebHookURL"
+          onChange={onChange}
+          value={profile.slackWebHookURL}
+          placeholder="슬랙 Webhook URL"
+          label="슬랙 Webhook URL"
+        />
+        <Button variant="outlined" type="submit">
+          등록
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default SlackForm;

-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import HomeForm from '../../components/home/HomeForm';
@@ -6,7 +6,6 @@ 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,
@@ -15,7 +14,6 @@ const HomeContainer = ({ history }) => {
     analyzeBJ(profile.solvedBJ);
   }, [profile.solvedBJ]);
   useEffect(() => {
-    setLogin(true);
     if (user) {
       let username = user.username;
       dispatch(getPROFILE({ username }));

-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import {
@@ -7,6 +7,7 @@ import {
   getPROFILE,
   syncBJID,
   initializeProfile,
+  setSLACK,
 } from '../../modules/profile';
 import SettingForm from '../../components/setting/SettingForm';
 
@@ -32,6 +33,12 @@ const SettingContainer = ({ history }) => {
     let username = profile.username;
     dispatch(syncBJID({ username }));
   };
+  const onSlackURLSubmit = (e) => {
+    e.preventDefault();
+    let username = profile.username;
+    let slackWebHookURL = profile.slackWebHookURL;
+    dispatch(setSLACK({ username, slackWebHookURL }));
+  };
 
   const onBJIDSubmit = (e) => {
     e.preventDefault();
@@ -60,6 +67,7 @@ const SettingContainer = ({ history }) => {
       onChange={onChange}
       onBJIDSubmit={onBJIDSubmit}
       onSyncBJIDSubmit={onSyncBJIDSubmit}
+      onSlackURLSubmit={onSlackURLSubmit}
       profile={profile}
     ></SettingForm>
   );

@@ -5,7 +5,8 @@ export const setBJID = ({ username, userBJID }) =>
     username: username,
     userBJID: userBJID,
   });
-
+export const setPROFILE = (postdata) =>
+  client.post('api/profile/setprofile', postdata);
 export const getPROFILE = ({ username }) =>
   client.post('api/profile/getprofile', { username });
 

@@ -12,6 +12,11 @@ const [SET_BJID, SET_BJID_SUCCESS, SET_BJID_FAILURE] = createRequestActionTypes(
   'profile/SET_BJID',
 );
 const [
+  SET_SLACK,
+  SET_SLACK_SUCCESS,
+  SET_SLACK_FAILURE,
+] = createRequestActionTypes('/profile/SET_SLACK');
+const [
   GET_PROFILE,
   GET_PROFILE_SUCCESS,
   GET_PROFILE_FAILURE,
@@ -26,6 +31,13 @@ export const initializeProfile = createAction(INITIALIZE);
 export const syncBJID = createAction(SYNC_BJID, ({ username }) => ({
   username,
 }));
+export const setSLACK = createAction(
+  SET_SLACK,
+  ({ username, slackWebHookURL }) => ({
+    username,
+    slackWebHookURL,
+  }),
+);
 export const setBJID = createAction(SET_BJID, ({ username, userBJID }) => ({
   username,
   userBJID,
@@ -45,14 +57,17 @@ const initialState = {
   solvedBJ: '',
   friendList: [],
   profileError: '',
+  slackWebHookURL: '',
 };
 const getPROFILESaga = createRequestSaga(GET_PROFILE, profileAPI.getPROFILE);
 const setBJIDSaga = createRequestSaga(SET_BJID, profileAPI.setBJID);
+const setSLACKSaga = createRequestSaga(SET_SLACK, profileAPI.setPROFILE);
 const syncBJIDSaga = createRequestSaga(SYNC_BJID, profileAPI.syncBJ);
 export function* profileSaga() {
   yield takeLatest(SET_BJID, setBJIDSaga);
   yield takeLatest(GET_PROFILE, getPROFILESaga);
   yield takeLatest(SYNC_BJID, syncBJIDSaga);
+  yield takeLatest(SET_SLACK, setSLACKSaga);
 }
 
 export default handleActions(
@@ -64,7 +79,9 @@ export default handleActions(
       }),
     [GET_PROFILE_SUCCESS]: (
       state,
-      { payload: { username, userBJID, solvedBJ, friendList } },
+      {
+        payload: { username, userBJID, solvedBJ, friendList, slackWebHookURL },
+      },
     ) => ({
       ...state,
       username: username,
@@ -72,6 +89,7 @@ export default handleActions(
       solvedBJ: solvedBJ,
       friendList: friendList,
       profileError: null,
+      slackWebHookURL: slackWebHookURL,
     }),
     [GET_PROFILE_FAILURE]: (state, { payload: error }) => ({
       ...state,
@@ -87,6 +105,15 @@ export default handleActions(
       ...state,
       profileError: error,
     }),
+    [SET_SLACK_SUCCESS]: (state, { payload: { slackWebHookURL } }) => ({
+      ...state,
+      slackWebHookURL: slackWebHookURL,
+      profileError: null,
+    }),
+    [SET_SLACK_FAILURE]: (state, { payload: error }) => ({
+      ...state,
+      profileError: error,
+    }),
     [SYNC_BJID_SUCCESS]: (state, { payload: { solvedBJ } }) => ({
       ...state,
       solvedBJ,

 import React from 'react';
 import HeaderContainer from '../containers/common/HeaderContainer';
-import SettingForm from '../components/setting/SettingForm';
 import SettingContainer from '../containers/setting/SettingContainer';
 
 const SettingPage = () => {