Merge pull request #114 from PLADI-ALM/feat/PDW-60-edit-user

[PDW-60/feat] 직원 정보 수정
PLADI-ALM · Oct 31, 2023 · eec0725 · eec0725
2 parents bead715 + 3319274
commit eec0725
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 134 deletions.
diff --git a/src/components/modal/BigModal.js b/src/components/modal/BigModal.js
@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+
+// Modal이 떴을 때의 배경
+export const ModalBackdrop = styled.div`
+  z-index: 3; //위치지정 요소
+  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: 35px;
+`
+
+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 AttrsForm = styled.form`
+  width: 100%;
+`
+
+export const AttrContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 35px;
+`
+
+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: 8px;
+  height: 40px;
+  width: 280px;
+  font-family: NanumSquare_ac;
+  font-size: 18px;
+  color: #757575;
+  padding: 0 10px;
+  outline: none;
+  box-sizing: border-box;
+`
+
+// 하단 버튼 컨테이너
+export const BottomBtnContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+`
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
diff --git a/src/components/modal/MoreModal.js b/src/components/modal/MoreModal.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const MoreBtn = styled.img`
+  cursor: pointer;
+  display: flex;
+  margin: auto;
+`
+export const MoreModalView = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  right: 30px;
+  border-radius: 10px;
+  width: 90px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  border: 1px solid #EFF0F6;
+  box-shadow: 0 9px 26px 0 #170F490D;
+`
+
+export const NormalDiv = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  color: #545F71;
+  
+`
+
+export const RedDiv = styled(NormalDiv)`
+  color: #A65959;
+`
+
+export const MenuText = styled.span`
+  font-size: 15px;
+  cursor: pointer;
+`
diff --git a/src/pages/manager/resourceManage/ResourceManageAdd.js b/src/pages/manager/resourceManage/ResourceManageAdd.js
@@ -11,7 +11,7 @@ import {AdminBookingResourceAxios, ImageUrlAxios, ResourcesAxios, UsersAxios} fr
 
 import AddImageImage from "../../../assets/images/AddImage.svg"
 import SearchButtonImage from "../../../assets/images/SearchPlus.svg"
-import {ExitBtn} from "../../../components/modal/Modal";
+import {ExitBtn} from "../../../components/modal/BigModal";
 import axios from "axios";
 import {useParams} from "react-router-dom";
 

diff --git a/src/pages/manager/userManage/UserManage.js b/src/pages/manager/userManage/UserManage.js
@@ -42,7 +42,7 @@ function UserManage(props) {
     return (
         <RightContainer>
             {isOpen ?
-                <UserModal id={props.id} handler={openModalHandler} />
+                <UserModal id={props.id} handler={openModalHandler} title={"신규 직원 등록"}/>
                 : null
             }
             <TitleText>직원 관리</TitleText>

diff --git a/src/pages/manager/userManage/UserManageLine.js b/src/pages/manager/userManage/UserManageLine.js
@@ -1,40 +1,32 @@
-import React, { useState } from 'react';
-import { BookedLineTr } from 'pages/booking/bookedList/BookedList';
-import { RoleCapsule } from 'components/capsule/RoleCapsule';
+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';
+import {UserMoreModal} from "./UserMoreModal";
+import {MoreBtn} from "../../../components/modal/MoreModal";
 
 
-const MoreBtn = styled.img`
-    cursor: pointer;
-    display: flex;
-    margin: auto;
-`
-
 function UserManageLine(props) {
     const [isOpen, setIsOpen] = useState(false)
 
-    const openModalHandler = () => {
+    const openMoreModalHandler = () => {
         setIsOpen(!isOpen)
     }
 
     return (
-        <>
-            <BookedLineTr>
-                <td width="10%">{props.name}</td>
-                <td width="15%">{props.email}</td>
-                <td width="15%">{props.phone}</td>
-                <td width="10%">{props.department}</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
-            }
-        </>
+        <BookedLineTr>
+            <td width="10%">{props.name}</td>
+            <td width="15%">{props.email}</td>
+            <td width="15%">{props.phone}</td>
+            <td width="10%">{props.department}</td>
+            <td width="5%"><RoleCapsule role={props.role}/></td>
+            <td width="5%"><MoreBtn src={MoreIcon} onClick={openMoreModalHandler}/>
+                {isOpen ?
+                    <UserMoreModal id={props.id} handler={openMoreModalHandler}/>
+                    : null
+                }
+            </td>
+        </BookedLineTr>
     )
 }