[PDW-45] feat: 직원 등록 API 연결

PLADI-ALM · Oct 28, 2023 · 3665a94 · 3665a94
1 parent efc76f9
commit 3665a94
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 23 deletions.
diff --git a/src/components/button/BigSquareButton.js b/src/components/button/BigSquareButton.js
@@ -8,7 +8,7 @@ const Button = styled.button`
     border: none;
     border-radius: 8px;
     background: #8741CB;
-    box-shadow: 0px 4px 4px 0px #00000040;
+    box-shadow: 0 4px 4px 0 #00000040;
     cursor: pointer;
     color: white;
     font-size: 17px;
@@ -21,6 +21,21 @@ const WhiteButton = styled(Button)`
     border: 1px solid #8741CB;
 `
 
+export const InputPurpleButton = styled.input.attrs({type: 'submit'})`
+  width: 130px;
+  height: 100%;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  background: #8741CB;
+  box-shadow: 0 4px 4px 0 #00000040;
+  cursor: pointer;
+  color: white;
+  font-size: 17px;
+  font-family: NanumSquare_ac;
+    
+`
+
 function BigSquareButton(props) {
 
     return (

diff --git a/src/components/capsule/SelectToggle.js b/src/components/capsule/SelectToggle.js
@@ -29,7 +29,7 @@ const ModalSelect = styled(Select)`
 
 export function SelectToggleInModal(props) {
     return (
-        <ModalSelect imgUrl={ArrowDown} onChange={props.change}>
+        <ModalSelect imgUrl={ArrowDown} onChange={props.change} name={props.name}>
             {props.items}
         </ModalSelect>
     );

diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
@@ -53,7 +53,7 @@ export const ExitBtn = styled.button`
     align-items : center;
 `
 
-export const AttrsContainer = styled.div`
+export const AttrsForm = styled.form`
     width: 100%;
 `
 

diff --git a/src/pages/manager/userManage/UserModal.js b/src/pages/manager/userManage/UserModal.js
@@ -7,9 +7,8 @@ import {
     AttrContainer,
     AttrInput,
     AttrLabel,
-    AttrsContainer,
+    AttrsForm,
     BottomBtnContainer,
-    ExitBtn,
     ModalBackdrop,
     ModalTitle,
     ModalView,
@@ -21,11 +20,12 @@ import {
     BasicCapsuleBtnF,
     BasicRadioInput
 } from 'components/capsule/RoleCapsule';
-import BigSquareButton from 'components/button/BigSquareButton';
+import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton';
 
 export function UserModal(props) {
     const [departmentOptionList, setDepartmentOptionList] = useState([]);
     const [currentRole, setCurrentRole] = useState("일반");
+    const [currentDepartment, setCurrentDepartment] = useState("");
     let departments;
 
     function getDpNPsList() {
@@ -36,7 +36,7 @@ export function UserModal(props) {
         })
             .then((response) => {
                 departments = response.data.data.departmentList
-                setDepartmentOptionList(departments.map((department) => (<option>{department}</option>)))
+                setDepartmentOptionList(departments.map((department) => (<option value={department}>{department}</option>)))
             })
             .catch((error) => {
                 basicError(error)
@@ -47,60 +47,100 @@ export function UserModal(props) {
         getDpNPsList()
     }, [])
 
-    const handleChange = (e) => {
-        console.log(`선택한 값 : ${e.target.value}`);
-
+    const handleRoleChange = (e) => {
         setCurrentRole(e.target.value);
     };
 
+    const handleDepartmentChange = (e) => {
+        setCurrentDepartment(e.target.value);
+    };
+
+    // 전화번호 자동 하이픈
+    const autoHyphen = (e) => {
+        e.target.value = e.target.value
+            .replace(/[^0-9]/g, '')
+            .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+    }
+
+    const registerUser = (e) => {
+        e.preventDefault()
+        const inputName = e.target.name.value
+        const inputEmail = e.target.email.value
+        const inputPassword = e.target.password.value
+        const inputPhone = e.target.phone.value
+        const inputDepartment = e.target.department.value
+        const inputRole = e.target.role.value
+        // todo: 입력값 정규식 확인
+
+        AdminUsersAxios.post("", {
+            name: inputName,
+            email: inputEmail,
+            password: inputPassword,
+            phone: inputPhone,
+            department: inputDepartment,
+            role: inputRole
+        }, {
+            headers: {
+                Authorization: getToken()
+            }
+        })
+            .then((response) => {
+                alert("등록되었습니다.")
+                window.location.reload();
+            })
+            .catch((error) => {
+                basicError(error)
+            })
+    };
+
 
     return (
         <ModalBackdrop onClick={props.handler}>
             <ModalView onClick={(e) => e.stopPropagation()}>
                 <TitleContainer>
                     <ModalTitle>신규 직원 등록</ModalTitle>
                 </TitleContainer>
-                <AttrsContainer>
+                <AttrsForm method="post" id="register-user-form" onSubmit={registerUser}>
                     <AttrContainer>
                         <AttrLabel>성명</AttrLabel>
-                        <AttrInput type='text'></AttrInput>
+                        <AttrInput type='text' name='name'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>이메일</AttrLabel>
-                        <AttrInput type='text'></AttrInput>
+                        <AttrInput type='text' name='email'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>비밀번호</AttrLabel>
-                        <AttrInput type='text'></AttrInput>
+                        <AttrInput type='text' name='password'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>연락처</AttrLabel>
-                        <AttrInput type='text'></AttrInput>
+                        <AttrInput type='text' name='phone' onInput={autoHyphen} maxLength='13'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>부서</AttrLabel>
-                        <SelectToggleInModal items={departmentOptionList}/>
+                        <SelectToggleInModal name='department' items={departmentOptionList} value={currentDepartment} onChange={handleDepartmentChange}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>권한</AttrLabel>
                         <BasicRadioInput type="radio" id="basic"
                                          name="role"
                                          value="일반"
                                          checked={currentRole === "일반"}
-                                         onChange={handleChange}/>
+                                         onChange={handleRoleChange}/>
                         <BasicCapsuleBtnF htmlFor="basic">일반</BasicCapsuleBtnF>
                         <AdminRadioInput type="radio" id="admin"
                                          name="role"
                                          value="관리자"
                                          checked={currentRole === "관리자"}
-                                         onChange={handleChange}/>
+                                         onChange={handleRoleChange}/>
                         <AdminCapsuleBtnF htmlFor="admin">관리자</AdminCapsuleBtnF>
                     </AttrContainer>
-                </AttrsContainer>
-                <BottomBtnContainer>
-                    <BigSquareButton name={"등록"} color={"purple"}/>
-                    <BigSquareButton name={"취소"} color={"white"} click={props.handler}/>
-                </BottomBtnContainer>
+                    <BottomBtnContainer>
+                        <InputPurpleButton value="등록"/>
+                        <BigSquareButton name={"취소"} color={"white"} click={props.handler}/>
+                    </BottomBtnContainer>
+                </AttrsForm>
             </ModalView>
         </ModalBackdrop>
     );