Update BJIDForm

+import React from 'react';
+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;
+  }
+`;
+
+const BJIDForm = ({ onChange, onBJIDSubmit, profile }) => {
+  return (
+    <BJIDFormBlock>
+      <h4>백준 아이디</h4>
+      <input
+        name="userBJID"
+        onChange={onChange}
+        value={profile.userBJID}
+        placeholder="백준 아이디"
+      />
+      <button type="submit" onSubmit={onBJIDSubmit}>
+        등록
+      </button>
+    </BJIDFormBlock>
+  );
+};
+export default BJIDForm;

+import React from 'react';
+import styled from 'styled-components';
+import Button from '../common/Button';
+import palette from '../../lib/styles/palette';
+import BJIDForm from './BJIDForm';
+
+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 SettingForm = ({ onChange, onBJIDSubmit, profile }) => {
+  console.log(profile);
+  return (
+    <SettingFormBlock>
+      <SectionContainer>
+        <h3>{profile.username}</h3>
+        <p>입력</p>
+      </SectionContainer>
+
+      <SectionContainer>
+        <BJIDForm
+          profile={profile}
+          onChange={onChange}
+          onBJIDSubmit={onBJIDSubmit}
+        />
+      </SectionContainer>
+
+      <SectionContainer>
+        <h3>친구</h3>
+        <StyledInput name="BJID" placeholder="친구 아이디" />
+        <Button>추가</Button>
+      </SectionContainer>
+      <h3>친구 리스트</h3>
+    </SettingFormBlock>
+  );
+};
+
+export default SettingForm;

+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { changeField, setBJID } from '../../modules/profile';
+import SettingForm from '../../components/setting/SettingForm';
+const SettingContainer = ({ history }) => {
+  const dispatch = useDispatch();
+  const [error, setError] = useState(null);
+  const { user, profile } = useSelector(({ user, profile }) => ({
+    user: user.user,
+    profile: profile,
+  }));
+
+  const onChange = (e) => {
+    const { value, name } = e.target;
+    dispatch(
+      changeField({
+        key: name,
+        value: value,
+      }),
+    );
+  };
+
+  const onBJIDSubmit = (e) => {
+    e.preventDefault();
+    let username = profile.username;
+    let userBJID = profile.userBJID;
+    dispatch(setBJID({ username, userBJID }));
+  };
+
+  useEffect(() => {
+    //Do Init Form
+    console.log(profile);
+  }, [dispatch]);
+
+  return (
+    <SettingForm
+      type="setting"
+      onChange={onChange}
+      onBJIDSubmit={onBJIDSubmit}
+      profile={profile}
+    ></SettingForm>
+  );
+};
+
+export default withRouter(SettingContainer);

+import client from './client';
+
+export const setBJID = ({ username, BJID }) =>
+  client.post('api/profile/setprofile', { username, BJID });

@@ -5,19 +5,19 @@ import createRequestSaga, {
   createRequestActionTypes,
 } from '../lib/createRequestSaga';
 import * as authAPI from '../lib/api/auth';
-const CHAGE_FIELD = 'auth/CHANGE_FIELD';
+const CHANGE_FIELD = 'auth/CHANGE_FIELD';
 const INITIALIZE_FORM = 'auth/INITIALIZE_FORM';
 
-const REGISTER = 'auth/REGISTER';
-const REGISTER_SUCCESS = 'auth/REGISTER_SUCCESS';
-const REGISTER_FAILURE = 'auth/REGISTER_FAILURE';
+const [REGISTER, REGISTER_SUCCESS, REGISTER_FAILURE] = createRequestActionTypes(
+  'auth/REGISTER',
+);
 
-const LOGIN = 'auth/LOGIN';
-const LOGIN_SUCCESS = 'auth/LOGIN_SUCCESS';
-const LOGIN_FAILURE = 'auth/LOGIN_FAILURE';
+const [LOGIN, LOGIN_SUCCESS, LOGIN_FAILURE] = createRequestActionTypes(
+  'auth/REGISTER',
+);
 
 export const changeField = createAction(
-  CHAGE_FIELD,
+  CHANGE_FIELD,
   ({ form, key, value }) => ({
     form,
     key,
@@ -59,7 +59,7 @@ export function* authSaga() {
 
 const auth = handleActions(
   {
-    [CHAGE_FIELD]: (state, { payload: { form, key, value } }) =>
+    [CHANGE_FIELD]: (state, { payload: { form, key, value } }) =>
       produce(state, (draft) => {
         draft[form][key] = value;
       }),

@@ -3,15 +3,17 @@ import { all } from 'redux-saga/effects';
 import auth, { authSaga } from './auth';
 import loading from './loading';
 import user, { userSaga } from './user';
+import profile, { profileSaga } from './profile';
 
 const rootReducer = combineReducers({
   auth,
   loading,
   user,
+  profile,
 });
 
 export function* rootSaga() {
-  yield all([authSaga(), userSaga()]);
+  yield all([authSaga(), userSaga(), profileSaga()]);
 }
 
 export default rootReducer;

+import { createAction, handleActions } from 'redux-actions';
+import createRequestSaga, {
+  createRequestActionTypes,
+} from '../lib/createRequestSaga';
+import produce from 'immer';
+import * as profileAPI from '../lib/api/profile';
+import { takeLatest } from 'redux-saga/effects';
+
+const INITIALIZE = 'profile/INITIALIZE';
+const CHANGE_FIELD = 'profile/CHANGE_FIELD';
+
+const [SET_BJID, SET_BJID_SUCCESS, SET_BJID_FAILURE] = createRequestActionTypes(
+  'profile/SET_BJID',
+);
+
+export const setBJID = createAction(SET_BJID, ({ username, BJID }) => ({
+  username,
+  BJID,
+}));
+
+export const changeField = createAction(CHANGE_FIELD, ({ key, value }) => ({
+  key,
+  value,
+}));
+
+const initialState = {
+  username: '',
+  userBJID: '',
+  solvedBJ: '',
+  friendList: [],
+  BJIDError: '',
+};
+
+const setBJIDSaga = createRequestSaga(SET_BJID, profileAPI.setBJID);
+export function* profileSaga() {
+  yield takeLatest(SET_BJID, setBJIDSaga);
+}
+
+export default handleActions(
+  {
+    [INITIALIZE]: (state) => initialState,
+    [CHANGE_FIELD]: (state, { payload: { key, value } }) =>
+      produce(state, (draft) => {
+        draft[key] = value;
+      }),
+
+    [SET_BJID_SUCCESS]: (state, { payload: BJID }) => ({
+      ...state,
+      BJID,
+      BJIDError: null,
+    }),
+    [SET_BJID_FAILURE]: (state, { payload: error }) => ({
+      ...state,
+      BJIDError: error,
+    }),
+  },
+  initialState,
+);

 import React from 'react';
 import HeaderContainer from '../containers/common/HeaderContainer';
-import Button from '../components/common/Button';
+import SettingForm from '../components/setting/SettingForm';
+import SettingContainer from '../containers/setting/SettingContainer';
 
 const SettingPage = () => {
   return (
     <div>
       <HeaderContainer />
-      <Button>setting</Button>
+      <SettingContainer></SettingContainer>
     </div>
   );
 };