Skip to content

Commit

Permalink
Merge pull request #113 from PLADI-ALM/feat/PDW-45-add-user
Browse files Browse the repository at this point in the history 
[PDW-45/feat] 직원 등록
  • Loading branch information
@psyeon1120
psyeon1120 authored Oct 28, 2023
2 parents a8bf9f2 + 3665a94 commit bead715
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 62 deletions.
17 changes: 16 additions & 1 deletion src/components/button/BigSquareButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 (
Expand Down
60 changes: 44 additions & 16 deletions src/components/capsule/RoleCapsule.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import React from "react";
import styled from "styled-components"

const BasicCapsule = styled.p`
width: 50px;
border-radius: 15px;
border: 2px solid #15294B;
background: white;
text-align: center;
color: #15294B;
font-size: 18px;
padding: 7px 15px;
margin: auto;
const BasicCapsule = styled.label`
display: block;
width: 45px;
height: 18px;
border-radius: 15px;
border: 2px solid #15294B;
background: white;
text-align: center;
color: #15294B;
font-size: 16px;
padding: 7px 15px;
margin: auto;
`

const AdminCapsule = styled(BasicCapsule)`
Expand All @@ -30,12 +32,38 @@ const AdminCapsuleBtnT = styled(AdminCapsule)`
cursor: pointer;
`

const BasicCapsuleBtnF = styled(BasicCapsule)`
export const BasicCapsuleBtnF = styled(BasicCapsule)`
cursor: pointer;
&:checked {
background: #15294B;
color: white;
}
`

const AdminCapsuleBtnF = styled(AdminCapsule)`
export const AdminCapsuleBtnF = styled(AdminCapsule)`
cursor: pointer;
&:checked{
background: #8741CB;
color: white;
}
`

export const BasicRadioInput = styled.input.attrs({ type: 'radio' })`
display: none;
&:checked + ${BasicCapsuleBtnF}{
background: #15294B;
color: white;
}
`

export const AdminRadioInput = styled(BasicRadioInput)`
&:checked + ${AdminCapsuleBtnF}{
background: #8741CB;
color: white;
}
`

export function RoleCapsule(props) {
Expand All @@ -52,12 +80,12 @@ export function RoleCapsuleBtn(props) {
return (
<>
{props.role === "일반" && props.type === true ?
<BasicCapsuleBtnT>{props.role}</BasicCapsuleBtnT> :
<BasicCapsuleBtnT htmlFor={props.htmlFor}>{props.role}</BasicCapsuleBtnT> :
props.role === "일반" && props.type === false ?
<BasicCapsuleBtnF>{props.role}</BasicCapsuleBtnF> :
<BasicCapsuleBtnF htmlFor={props.htmlFor}>{props.role}</BasicCapsuleBtnF> :
props.role === "관리자" && props.type === true ?
<AdminCapsuleBtnT>{props.role}</AdminCapsuleBtnT> :
<AdminCapsuleBtnF>{props.role}</AdminCapsuleBtnF>
<AdminCapsuleBtnT htmlFor={props.htmlFor}>{props.role}</AdminCapsuleBtnT> :
<AdminCapsuleBtnF htmlFor={props.htmlFor}>{props.role}</AdminCapsuleBtnF>
}
</>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/capsule/SelectToggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import styled from "styled-components";
import ArrowDown from "assets/images/arrowDown.svg"

const Select = styled.select`
border-radius: 10px;
border-radius: 8px;
border: 1px solid #717171;
background: #F6F6F6;
font-family: NanumSquare_ac;
font-size: 18px;
color: #757575;
padding: 0 10px;
height: 35px;
height: 40px;
outline: none;
padding: 2px;
`
Expand All @@ -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>
);
Expand Down
12 changes: 6 additions & 6 deletions src/components/modal/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import styled from 'styled-components';

// Modal이 떴을 때의 배경
export const ModalBackdrop = styled.div`
z-index: 2; //위치지정 요소
z-index: 3; //위치지정 요소
position: fixed;
display : flex;
justify-content : center;
Expand Down Expand Up @@ -31,7 +31,7 @@ export const TitleContainer = styled.div`
display : flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-bottom: 35px;
`

export const ModalTitle = styled.h2`
Expand All @@ -53,14 +53,14 @@ export const ExitBtn = styled.button`
align-items : center;
`

export const AttrsContainer = styled.div`
export const AttrsForm = styled.form`
width: 100%;
`

export const AttrContainer = styled.div`
display : flex;
align-items: center;
margin-bottom: 20px;
margin-bottom: 35px;
`

export const AttrLabel = styled.div`
Expand All @@ -72,8 +72,8 @@ export const AttrLabel = styled.div`

export const AttrInput = styled.input`
border: 2px solid #E6E6E6;
border-radius: 10px;
height: 35px;
border-radius: 8px;
height: 40px;
width: 280px;
font-family: NanumSquare_ac;
font-size: 18px;
Expand Down
138 changes: 102 additions & 36 deletions src/pages/manager/userManage/UserModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,146 @@
import { SelectToggleInModal } from 'components/capsule/SelectToggle';
import React, { useState, useEffect } from 'react';
import { AdminUsersAxios } from 'api/AxiosApi';
import { getToken } from 'utils/IsLoginUtil';
import { basicError } from 'utils/ErrorHandlerUtil';
import { AttrContainer, AttrInput, AttrLabel, AttrsContainer, BottomBtnContainer, ExitBtn, ModalBackdrop, ModalTitle, ModalView, TitleContainer } from 'components/modal/Modal';
import { RoleCapsuleBtn } from 'components/capsule/RoleCapsule';
import BigSquareButton from 'components/button/BigSquareButton';
import {SelectToggleInModal} from 'components/capsule/SelectToggle';
import React, {useState, useEffect} from 'react';
import {AdminUsersAxios} from 'api/AxiosApi';
import {getToken} from 'utils/IsLoginUtil';
import {basicError} from 'utils/ErrorHandlerUtil';
import {
AttrContainer,
AttrInput,
AttrLabel,
AttrsForm,
BottomBtnContainer,
ModalBackdrop,
ModalTitle,
ModalView,
TitleContainer
} from 'components/modal/Modal';
import {
AdminCapsuleBtnF,
AdminRadioInput,
BasicCapsuleBtnF,
BasicRadioInput
} from 'components/capsule/RoleCapsule';
import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton';

export function UserModal(props) {
const [positionOptionList, setPositionOptionList] = useState([]);
const [departmentOptionList, setDepartmentOptionList] = useState([]);
let deparments, positions;
const [currentRole, setCurrentRole] = useState("일반");
const [currentDepartment, setCurrentDepartment] = useState("");
let departments;

function getDpNPsList() {
AdminUsersAxios.get("/ranks", {
AdminUsersAxios.get("/departments", {
headers: {
Authorization: getToken()
}
})
.then((response) => {
deparments = response.data.data.departmentList
positions = response.data.data.positionList
setPositionOptionList(positions.map((position) => (<option>{position}</option>)))
setDepartmentOptionList(deparments.map((deparment) => (<option>{deparment}</option>)))
departments = response.data.data.departmentList
setDepartmentOptionList(departments.map((department) => (<option value={department}>{department}</option>)))
})
.catch((error) => {
basicError(error)
})
}

useEffect(() => {
getDpNPsList()
}, [])

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>
<ExitBtn onClick={props.handler}>×</ExitBtn>
</TitleContainer>
<AttrsContainer>
<AttrsForm method="post" id="register-user-form" onSubmit={registerUser}>
<AttrContainer>
<AttrLabel>이름</AttrLabel>
<AttrInput type='text'></AttrInput>
<AttrLabel>성명</AttrLabel>
<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>
<SelectToggleInModal items={departmentOptionList} />
<AttrLabel>연락처</AttrLabel>
<AttrInput type='text' name='phone' onInput={autoHyphen} maxLength='13'></AttrInput>
</AttrContainer>
<AttrContainer>
<AttrLabel>직위</AttrLabel>
<SelectToggleInModal items={positionOptionList} />
</AttrContainer>
<AttrContainer>
<AttrLabel>직책</AttrLabel>
<AttrInput type='text'></AttrInput>
<AttrLabel>부서</AttrLabel>
<SelectToggleInModal name='department' items={departmentOptionList} value={currentDepartment} onChange={handleDepartmentChange}/>
</AttrContainer>
<AttrContainer>
<AttrLabel>권한</AttrLabel>
<RoleCapsuleBtn role="일반" type={true} />
<RoleCapsuleBtn role="관리자" type={false} />
<BasicRadioInput type="radio" id="basic"
name="role"
value="일반"
checked={currentRole === "일반"}
onChange={handleRoleChange}/>
<BasicCapsuleBtnF htmlFor="basic">일반</BasicCapsuleBtnF>
<AdminRadioInput type="radio" id="admin"
name="role"
value="관리자"
checked={currentRole === "관리자"}
onChange={handleRoleChange}/>
<AdminCapsuleBtnF htmlFor="admin">관리자</AdminCapsuleBtnF>
</AttrContainer>
</AttrsContainer>
<BottomBtnContainer>
<BigSquareButton name={"등록"} color={"purple"} />
<BigSquareButton name={"취소"} color={"white"} />
</BottomBtnContainer>
<BottomBtnContainer>
<InputPurpleButton value="등록"/>
<BigSquareButton name={"취소"} color={"white"} click={props.handler}/>
</BottomBtnContainer>
</AttrsForm>
</ModalView>
</ModalBackdrop>
);
Expand Down

0 comments on commit bead715

Please sign in to comment.