diff --git a/src/assets/images/arrowDown.svg b/src/assets/images/arrowDown.svg
new file mode 100644
index 0000000..b2d146a
--- /dev/null
+++ b/src/assets/images/arrowDown.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/images/moreIcon.png b/src/assets/images/moreIcon.png
deleted file mode 100644
index ccf90ca..0000000
Binary files a/src/assets/images/moreIcon.png and /dev/null differ
diff --git a/src/assets/images/moreIcon.svg b/src/assets/images/moreIcon.svg
new file mode 100644
index 0000000..abb42b7
--- /dev/null
+++ b/src/assets/images/moreIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/capsule/SelectToggle.js b/src/components/capsule/SelectToggle.js
index 2217e8d..cfd4b0b 100644
--- a/src/components/capsule/SelectToggle.js
+++ b/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 (
-
+
);
}
-export default SelectToggle;
\ No newline at end of file
+export function SelectToggle(props) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
new file mode 100644
index 0000000..d199f30
--- /dev/null
+++ b/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;
+`
\ No newline at end of file
diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js
index 7d3deb7..452b067 100644
--- a/src/components/searchBar/ManageSearchBar.js
+++ b/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) {
-
+
{props.buttonTitle}
diff --git a/src/components/searchBar/SearchBar.js b/src/components/searchBar/SearchBar.js
index eac6aca..da4314f 100644
--- a/src/components/searchBar/SearchBar.js
+++ b/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) {
예약 가능한 회의실 검색
-
+
~
-
+
);
diff --git a/src/pages/booking/bookedList/BookedList.js b/src/pages/booking/bookedList/BookedList.js
index bf1540e..2f60557 100644
--- a/src/pages/booking/bookedList/BookedList.js
+++ b/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';
diff --git a/src/pages/manager/userManage/UserManage.js b/src/pages/manager/userManage/UserManage.js
index 6586857..46c394e 100644
--- a/src/pages/manager/userManage/UserManage.js
+++ b/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 (
+ {isOpen ?
+
+ : null
+ }
{props.title}
-
+
@@ -59,7 +70,7 @@ function UserManage(props) {
: users.map((user, index) =>
{
+ setIsOpen(!isOpen)
+ }
return (
-
- | {props.name} |
- {props.position} |
- {props.email} |
- {props.department} |
- {props.officeJob} |
-
-
- |
- |
-
+ <>
+
+ {props.name} |
+ {props.position} |
+ {props.email} |
+ {props.department} |
+ {props.officeJob} |
+ |
+ |
+
+
+ {isOpen ?
+
+ : null
+ }
+
)
}
-export default UserManageTableCell;
\ No newline at end of file
+export default UserManageLine;
\ No newline at end of file
diff --git a/src/pages/manager/userManage/UserModal.js b/src/pages/manager/userManage/UserModal.js
new file mode 100644
index 0000000..1f5ce87
--- /dev/null
+++ b/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) => ()))
+ setDepartmentOptionList(deparments.map((deparment) => ()))
+ })
+ .catch((error) => {
+ basicError(error)
+ })
+ }
+ useEffect(() => {
+ getDpNPsList()
+ }, [])
+
+
+ return (
+
+ e.stopPropagation()}>
+
+ 신규 직원 등록
+ ×
+
+
+
+ 이름
+
+
+
+ 이메일
+
+
+
+ 비밀번호
+
+
+
+ 부서
+
+
+
+ 직위
+
+
+
+ 직책
+
+
+
+ 권한
+
+
+
+
+
+ );
+}
\ No newline at end of file