그룹명 생성/수정 시 validation 추가

src/components/basis/group/BaisGroupForm.js

@@ -1,33 +1,51 @@
-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 (
+    <Form onSubmit={handleSubmit(onSumbit)}>
       <Row>
         <Col>
           <Card>
@@ -50,7 +68,7 @@ export const BasisGroupForm = props => {
                       <Row>
                         <Col className='list-input' md='4' sm='12'>
                           <FormGroup>
-                          <Label for='groupcode'>
+                            <Label for='groupId'>
                               <span className='necessary'>*</span>그룹 코드
                             </Label>
                             <Input
@@ -66,7 +84,7 @@ export const BasisGroupForm = props => {
                         </Col>
                         <Col className='list-input' md='4' sm='12'>
                           <FormGroup>
-                          <Label for='groupname'>
+                            <Label for='groupNm'>
                               <span className='necessary'>*</span>그룹명
                             </Label>
                             <Input
@@ -74,10 +92,18 @@ export const BasisGroupForm = props => {
                               id='groupNm'
                               name='groupNm'
                               bsSize='sm'
-                            onChange={props.handlerInput}
-                            value={props.groupData.groupNm || ''}
+                              innerRef={register}
+                              // value={props.groupData.groupNm || ''}
                               placeholder=''
+                              className={classnames({
+                                'is-invalid': errors.groupNm
+                              })}
                             />
+                            {errors && errors.groupNm && (
+                              <FormFeedback>
+                                {errors.groupNm.message}
+                              </FormFeedback>
+                            )}
                           </FormGroup>
                         </Col>
 
@@ -105,7 +131,8 @@ export const BasisGroupForm = props => {
                     className='mr-1'
                     color='primary'
                     size='sm'
-                  onClick={props.handlerSave}
+                    // onClick={props.handlerSave}
+                    type='submit'
                   >
                     저장
                   </Button.Ripple>
@@ -129,5 +156,6 @@ export const BasisGroupForm = props => {
           </Card>
         </Col>
       </Row>
+    </Form>
   );
 };

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}
       />