[PDW-45] feat: 신규 직원 등록 모달 UI

src/components/capsule/SelectToggle.js

@@ -1,24 +1,43 @@
 import React from "react";
 import "react-datepicker/dist/react-datepicker.css";
 import styled from "styled-components";
+import ArrowDown from "assets/images/arrowDown.svg"
 
-export const Select = styled.select`
+const Select = styled.select`
     border-radius: 10px;
     border: 1px solid #717171;
     background: #F6F6F6;
     font-family: NanumSquare_ac;
     font-size: 18px;
     color: #757575;
-    padding: 5px;
+    padding: 0 10px;
     height: 35px;
+    outline: none;
 `
 
-function SelectToggle(props) {
+const ModalSelect = styled(Select)`
+    width: 280px;
+    border: 2px solid #E6E6E6;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: url('${props => props.imgUrl}') no-repeat right center;
+    background-position: right 10px center;
+    padding: 0 44px 0 10px;
+`
+
+export function SelectToggleInModal(props) {
     return (
-        <Select onChange={props.change}>
+        <ModalSelect imgUrl={ArrowDown} onChange={props.change}>
             {props.items}
-        </Select>
+        </ModalSelect>
     );
 }
 
-export default SelectToggle;
+export function SelectToggle(props) {
+    return (
+        <Select onChange={props.change}>
+            {props.items}
+        </Select>
+    );
+}

src/components/modal/Modal.js

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+
+// Modal이 떴을 때의 배경
+export const ModalBackdrop = styled.div`
+    z-index: 1; //위치지정 요소
+    position: fixed;
+    display : flex;
+    justify-content : center;
+    align-items : center;
+    background-color: rgba(0,0,0,0.4);
+    top : 0;
+    left : 0;
+    right : 0;
+    bottom : 0;
+`
+
+// Modal창
+export const ModalView = styled.div`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 10px;
+    width: 500px;
+    background-color: #ffffff;
+    padding: 30px 50px;
+    box-sizing: border-box;
+`
+
+export const TitleContainer = styled.div`
+    width: 100%;
+    display : flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+`
+
+export const ModalTitle = styled.h2`
+    color: #8741CB;
+    margin: 0;
+`
+
+export const ExitBtn = styled.button`
+    background: none;
+    width: 40px;
+    height: 40px;
+    font-family: NanumSquare_ac;
+    font-size: 40px;
+    border: none;
+    color: #4C4C4C;
+    cursor: pointer;
+    display : flex;
+    justify-content : center;
+    align-items : center;
+`
+
+export const AttrsContainer = styled.div`
+    width: 100%;
+`
+
+export const AttrContainer = styled.div`
+    display : flex;
+    align-items: center;
+    margin-bottom: 20px;
+`
+
+export const AttrLabel = styled.div`
+    width: 120px;
+    font-size: 20px;
+    text-align: left;
+    line-height: 40px;
+`
+
+export const AttrInput = styled.input`
+    border: 2px solid #E6E6E6;
+    border-radius: 10px;
+    height: 35px;
+    width: 280px;
+    font-family: NanumSquare_ac;
+    font-size: 18px;
+    color: #757575;
+    padding: 0 10px;
+    outline: none;
+    box-sizing: border-box;
+`

src/components/searchBar/ManageSearchBar.js

@@ -29,6 +29,7 @@ const ManageSearchImage = styled.img`
 `
 
 const ManageSearchText = styled.input`
+    font-family: NanumSquare_ac;
     width: 100%;
     height: 100%;
     background: none;
@@ -78,7 +79,7 @@ function ManageSearchBar(props) {
                 <ManageSearchImage src={SearchInputImage} />
                 <ManageSearchText onKeyUp={handleOnKeyPress} placeholder="이름 검색" />
             </ManageSearchContainer>
-            <ManageAddButton>
+            <ManageAddButton onClick={props.btnClick}>
                 <ManageAddButtonImage src={SearchButtonImage} />
                 <ManageAddButtonLabel>{props.buttonTitle}</ManageAddButtonLabel>
             </ManageAddButton>

src/components/searchBar/SearchBar.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import TimeCapsule from "components/capsule/SelectToggle";
+import { SelectToggle } from "components/capsule/SelectToggle";
 import SearchButtonImg from '../../assets/images/button/searchButton.png'
 import ImageButton from "components/button/ImageButton";
 import { TimeList } from "constants/ToggleList";
@@ -38,9 +38,9 @@ function SearchBar(props) {
         <Container>
             <TitleText>예약 가능한 회의실 검색</TitleText>
             <DatePicker type="date" onChange={props.changeDate} value={props.value} />
-            <TimeCapsule items={timeOptionList} change={props.changeStart} />
+            <SelectToggle items={timeOptionList} change={props.changeStart} />
             ~
-            <TimeCapsule items={timeOptionList} change={props.changeEnd} />
+            <SelectToggle items={timeOptionList} change={props.changeEnd} />
             <ImageButton image={SearchButtonImg} width={"30px"} height={"30px"} click={props.search} />
         </Container>
     );

src/pages/booking/bookedList/BookedList.js

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import BookedLine from './BookedLine';
 import { RightContainer, WhiteContainer, TitleText } from "components/rightContainer/RightContainer";
 import { BookingsAxios } from 'api/AxiosApi';
-import SelectToggle from 'components/capsule/SelectToggle';
+import { SelectToggle } from 'components/capsule/SelectToggle';
 import { BookingCategoryList } from 'constants/ToggleList';
 import { BookingCategoryPathList, getBookingCategoryPath } from 'constants/Path';
 import { getToken } from 'utils/IsLoginUtil';

src/pages/manager/userManage/UserManage.js

@@ -7,11 +7,13 @@ import ManageSearchBar from "components/searchBar/ManageSearchBar";
 import { AdminUsersAxios } from "api/AxiosApi";
 import { basicError } from "utils/ErrorHandlerUtil";
 import { getToken } from "utils/IsLoginUtil";
-
+import { UserModal } from "./UserModal";
 
 function UserManage(props) {
+    const [isOpen, setIsOpen] = useState(false)
     const [users, setUserList] = useState([])
 
+    // 유저 목록 조회
     const getUserList = (word) => {
         AdminUsersAxios.get(`?name=${word}`, {
             headers: {
@@ -32,10 +34,19 @@ function UserManage(props) {
         getUserList(e.target.value)
     }
 
+    // 모달 핸들러
+    const openModalHandler = () => {
+        setIsOpen(!isOpen)
+    }
+
     return (
         <RightContainer>
+            {isOpen ?
+                <UserModal id={props.id} handler={openModalHandler} />
+                : null
+            }
             <TitleText>{props.title}</TitleText>
-            <ManageSearchBar onEnter={searchUsers} buttonTitle="신규 직원 등록" />
+            <ManageSearchBar btnClick={openModalHandler} onEnter={searchUsers} buttonTitle="신규 직원 등록" />
 
             <WhiteContainer>
                 <Bar />
@@ -59,7 +70,7 @@ function UserManage(props) {
                                 </UserManageLine>
                                 : users.map((user, index) =>
                                     <UserManageLine key={index}
-                                        id={user.id}
+                                        id={user.userId}
                                         name={user.name}
                                         position={user.position}
                                         email={user.email}

src/pages/manager/userManage/UserManageLine.js

@@ -1,23 +1,42 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
 import { BookedLineTr } from 'pages/booking/bookedList/BookedList';
 import RoleCapsule from 'components/capsule/RoleCapsule';
+import MoreIcon from 'assets/images/moreIcon.svg'
+import styled from 'styled-components';
+import { UserModal } from './UserModal';
 
-function UserManageTableCell(props) {
+
+const MoreBtn = styled.img`
+    cursor: pointer;
+    display: flex;
+    margin: auto;
+`
+
+function UserManageLine(props) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const openModalHandler = () => {
+        setIsOpen(!isOpen)
+    }
 
     return (
-        <BookedLineTr>
-            <td width="5%">{props.name}</td>
-            <td width="5%">{props.position}</td>
-            <td width="15%">{props.email}</td>
-            <td width="10%">{props.department}</td>
-            <td width="10%">{props.officeJob}</td>
-            <td width="5%">
-                <RoleCapsule role={props.role} />
-            </td>
-            <td width="5%"></td>
-        </BookedLineTr>
+        <>
+            <BookedLineTr>
+                <td width="5%">{props.name}</td>
+                <td width="5%">{props.position}</td>
+                <td width="15%">{props.email}</td>
+                <td width="10%">{props.department}</td>
+                <td width="10%">{props.officeJob}</td>
+                <td width="5%"><RoleCapsule role={props.role} /></td>
+                <td width="5%"><MoreBtn src={MoreIcon} onClick={openModalHandler} /></td>
+
+            </BookedLineTr>
+            {isOpen ?
+                <UserModal id={props.id} handler={openModalHandler} />
+                : null
+            }
+        </>
     )
 }
 
-export default UserManageTableCell;
+export default UserManageLine;

src/pages/manager/userManage/UserModal.js

@@ -0,0 +1,75 @@
+import { SelectToggleInModal } from 'components/capsule/SelectToggle';
+import styled from 'styled-components';
+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, ExitBtn, ModalBackdrop, ModalTitle, ModalView, TitleContainer } from 'components/modal/Modal';
+
+export function UserModal(props) {
+    const [positionOptionList, setPositionOptionList] = useState([]);
+    const [departmentOptionList, setDepartmentOptionList] = useState([]);
+    let deparments, positions;
+
+    function getDpNPsList() {
+        AdminUsersAxios.get("/ranks", {
+            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>)))
+            })
+            .catch((error) => {
+                basicError(error)
+            })
+    }
+    useEffect(() => {
+        getDpNPsList()
+    }, [])
+
+
+    return (
+        <ModalBackdrop onClick={props.handler}>
+            <ModalView onClick={(e) => e.stopPropagation()}>
+                <TitleContainer>
+                    <ModalTitle>신규 직원 등록</ModalTitle>
+                    <ExitBtn onClick={props.handler}>×</ExitBtn>
+                </TitleContainer>
+                <AttrsContainer>
+                    <AttrContainer>
+                        <AttrLabel>이름</AttrLabel>
+                        <AttrInput type='text'></AttrInput>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>이메일</AttrLabel>
+                        <AttrInput type='text'></AttrInput>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>비밀번호</AttrLabel>
+                        <AttrInput type='text'></AttrInput>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>부서</AttrLabel>
+                        <SelectToggleInModal items={departmentOptionList} />
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>직위</AttrLabel>
+                        <SelectToggleInModal items={positionOptionList} />
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>직책</AttrLabel>
+                        <AttrInput type='text'></AttrInput>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>권한</AttrLabel>
+                        <AttrInput type='text'></AttrInput>
+                    </AttrContainer>
+                </AttrsContainer>
+            </ModalView>
+        </ModalBackdrop>
+    );
+}