diff --git a/src/components/basis/group/BaisGroupForm.js b/src/components/basis/group/BaisGroupForm.js
index 1dd73a7..d6a2594 100644
--- a/src/components/basis/group/BaisGroupForm.js
+++ b/src/components/basis/group/BaisGroupForm.js
@@ -1,87 +1,113 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import * as yup from 'yup';
+import { useForm } from 'react-hook-form';
+import classnames from 'classnames';
 import {
   Row,
   Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
   Card,
-  CardHeader,
   CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
   Button,
   Input,
-  CustomInput,
   FormGroup,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Label
+  Label,
+  FormFeedback,
+  Form
 } from 'reactstrap';
-import { Link, useHistory } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 export const BasisGroupForm = props => {
+  useEffect(() => {
+    if (props.groupData?.groupId) {
+      setValue('groupNm', props.groupData?.groupNm);
+    }
+  }, [props.groupData]);
+
+  const Schema = yup.object().shape({
+    groupNm: yup
+      .string()
+      .required('그룹명을 입력해 주세요')
+      .matches(
+        /^[ㄱ-힣A-Za-z0-9]{2,12}$/,
+        '2 자 이상, 12 자 이하 영문자/숫자만 입력 가능합니다.'
+      )
+  });
+
+  const { register, getValues, setValue, errors, handleSubmit } = useForm({
+    defaultValues: {
+      groupNm: ''
+    },
+    resolver: yupResolver(Schema)
+  });
+
+  const onSumbit = async data => {
+    props.handlerSave(data);
+  };
+
   return (
-    <Row>
-      <Col>
-        <Card>
-          <CardBody className='pal-card-body'>
-            <div className='search-cont search-info'>
-              <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-                <div>
-                  <h4>{props.title} 상세정보</h4>
-                </div>
-                <div className='final'>
-                  {props.groupData.type === 'update' ? (
-                    <span>최종 수정일자 : {props.groupData.updateDt}</span>
-                  ) : null}
+    <Form onSubmit={handleSubmit(onSumbit)}>
+      <Row>
+        <Col>
+          <Card>
+            <CardBody className='pal-card-body'>
+              <div className='search-cont search-info'>
+                <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                  <div>
+                    <h4>{props.title} 상세정보</h4>
+                  </div>
+                  <div className='final'>
+                    {props.groupData.type === 'update' ? (
+                      <span>최종 수정일자 : {props.groupData.updateDt}</span>
+                    ) : null}
+                  </div>
                 </div>
-              </div>
 
-              <dl>
-                <dt>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' md='4' sm='12'>
-                        <FormGroup>
-                          <Label for='groupcode'>
-                            <span className='necessary'>*</span>그룹 코드
-                          </Label>
-                          <Input
-                            type='text'
-                            id='groupId'
-                            name='groupId'
-                            bsSize='sm'
-                            readOnly={true}
-                            value={props.groupData.groupId || ''}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>
-                        <FormGroup>
-                          <Label for='groupname'>
-                            <span className='necessary'>*</span>그룹명
-                          </Label>
-                          <Input
-                            type='text'
-                            id='groupNm'
-                            name='groupNm'
-                            bsSize='sm'
-                            onChange={props.handlerInput}
-                            value={props.groupData.groupNm || ''}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
+                <dl>
+                  <dt>
+                    <div className='search-info-box'>
+                      <Row>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='groupId'>
+                              <span className='necessary'>*</span>그룹 코드
+                            </Label>
+                            <Input
+                              type='text'
+                              id='groupId'
+                              name='groupId'
+                              bsSize='sm'
+                              readOnly={true}
+                              value={props.groupData.groupId || ''}
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='groupNm'>
+                              <span className='necessary'>*</span>그룹명
+                            </Label>
+                            <Input
+                              type='text'
+                              id='groupNm'
+                              name='groupNm'
+                              bsSize='sm'
+                              innerRef={register}
+                              // value={props.groupData.groupNm || ''}
+                              placeholder=''
+                              className={classnames({
+                                'is-invalid': errors.groupNm
+                              })}
+                            />
+                            {errors && errors.groupNm && (
+                              <FormFeedback>
+                                {errors.groupNm.message}
+                              </FormFeedback>
+                            )}
+                          </FormGroup>
+                        </Col>
 
-                      {/* <Col className='list-input' md='4' sm='12'>
+                        {/* <Col className='list-input' md='4' sm='12'>
                         <FormGroup>
                           <Label for='groupauthority'>그룹 구분 코드</Label>
                           <Input
@@ -95,39 +121,41 @@ export const BasisGroupForm = props => {
                           </Input>
                         </FormGroup>
                       </Col> */}
-                    </Row>
-                  </div>
-                </dt>
-              </dl>
+                      </Row>
+                    </div>
+                  </dt>
+                </dl>
 
-              <div className='d-flex align-items-center'>
-                <Button.Ripple
-                  className='mr-1'
-                  color='primary'
-                  size='sm'
-                  onClick={props.handlerSave}
-                >
-                  저장
-                </Button.Ripple>
-                {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
-                  목록
-                </Button.Ripple> */}
-                {props.groupData.type != 'create' ? (
+                <div className='d-flex align-items-center'>
                   <Button.Ripple
-                    color='danger'
+                    className='mr-1'
+                    color='primary'
                     size='sm'
-                    onClick={() => props.handlerWidthrow()}
+                    // onClick={props.handlerSave}
+                    type='submit'
                   >
-                    삭제
+                    저장
                   </Button.Ripple>
-                ) : (
-                  <></>
-                )}
+                  {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
+                  목록
+                </Button.Ripple> */}
+                  {props.groupData.type != 'create' ? (
+                    <Button.Ripple
+                      color='danger'
+                      size='sm'
+                      onClick={() => props.handlerWidthrow()}
+                    >
+                      삭제
+                    </Button.Ripple>
+                  ) : (
+                    <></>
+                  )}
+                </div>
               </div>
-            </div>
-          </CardBody>
-        </Card>
-      </Col>
-    </Row>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </Form>
   );
 };
diff --git a/src/containers/basis/group/BasisGroupDetailContainer.js b/src/containers/basis/group/BasisGroupDetailContainer.js
index 6fa4f1f..8239212 100644
--- a/src/containers/basis/group/BasisGroupDetailContainer.js
+++ b/src/containers/basis/group/BasisGroupDetailContainer.js
@@ -61,12 +61,32 @@ export const BasisGroupDetailContainer = () => {
     dispatch(Actions.GROUP_DETAIL.request(id));
   };
 
-  const handlerCreate = () => {
-    dispatch(Actions.GROUP_CREATE.request(groupData));
+  const handlerCreate = data => {
+    const saveData = {
+      createDt: '',
+      cstmrSno: groupData.cstmrSno,
+      groupId: groupData.groupId,
+      groupNm: data.groupNm,
+      groupTypeCd: groupData.groupTypeCd,
+      type: groupData.type,
+      updateDt: ''
+    };
+    // dispatch(Actions.GROUP_CREATE.request(groupData));
+    dispatch(Actions.GROUP_CREATE.request(saveData));
   };
 
-  const handlerUpdate = () => {
-    dispatch(Actions.GROUP_UPDATE.request(groupData));
+  const handlerUpdate = data => {
+    const saveData = {
+      createDt: groupData.createDt,
+      cstmrSno: groupData.cstmrSno,
+      groupId: groupData.groupId,
+      groupNm: data.groupNm,
+      groupTypeCd: groupData.groupTypeCd,
+      type: groupData.type,
+      updateDt: groupData.updateDt
+    };
+    // dispatch(Actions.GROUP_UPDATE.request(groupData));
+    dispatch(Actions.GROUP_UPDATE.request(saveData));
   };
   const handlerDelete = () => {
     dispatch(Actions.GROUP_DELETE.request(groupData.groupId));
@@ -81,29 +101,33 @@ export const BasisGroupDetailContainer = () => {
     return;
   };
 
-  const handlerInput = e => {
-    const { name, value } = e.target;
-    if (name == 'groupNm') {
-      const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/;
-      if (regex.test(value)) {
-        setGroupData({
-          ...groupData,
-          [name]: value
-        });
-      }
-    }
+  const handlerSave = data => {
+    groupData.type === 'create' ? handlerCreate(data) : handlerUpdate(data);
   };
 
+  // const handlerInput = e => {
+  //   const { name, innerRef } = e.target;
+  //   if (name == 'groupNm') {
+  //     // const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/;
+  //     // if (regex.test(innerRef)) {
+  //     console.log(innerRef);
+  //     setGroupData({
+  //       ...groupData,
+  //       [name]: innerRef
+  //     });
+  //     // }
+  //   }
+  // };
+
   return (
     <CustomDetailLayout title={titleName}>
       <BasisGroupForm
         groupDetail={groupDetail}
         groupData={groupData}
-        handlerSave={
-          groupData.type === 'create' ? handlerCreate : handlerUpdate
-        }
+        setGroupData={setGroupData}
+        handlerSave={handlerSave}
         handlerDelete={handlerDelete}
-        handlerInput={handlerInput}
+        // handlerInput={handlerInput}
         handlerWidthrow={handlerWidthrow}
       />