From d621f2d21c8da7716e5f3822089ef511b206e997 Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Sat, 28 Oct 2023 21:57:26 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[PDW-60]=20feat:=20=EC=A7=81=EC=9B=90=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20UI=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/{Modal.js => BigModal.js} | 0 src/components/modal/MoreModal.js | 37 ++++++++++++++++ .../resourceManage/ResourceManageAdd.js | 2 +- .../manager/userManage/UserManageLine.js | 44 ++++++++----------- src/pages/manager/userManage/UserModal.js | 2 +- src/pages/manager/userManage/UserMoreModal.js | 24 ++++++++++ 6 files changed, 81 insertions(+), 28 deletions(-) rename src/components/modal/{Modal.js => BigModal.js} (100%) create mode 100644 src/components/modal/MoreModal.js create mode 100644 src/pages/manager/userManage/UserMoreModal.js diff --git a/src/components/modal/Modal.js b/src/components/modal/BigModal.js similarity index 100% rename from src/components/modal/Modal.js rename to src/components/modal/BigModal.js diff --git a/src/components/modal/MoreModal.js b/src/components/modal/MoreModal.js new file mode 100644 index 0000000..e6fba2e --- /dev/null +++ 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; +` \ No newline at end of file diff --git a/src/pages/manager/resourceManage/ResourceManageAdd.js b/src/pages/manager/resourceManage/ResourceManageAdd.js index f89322b..d859e46 100644 --- 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/UserManageLine.js b/src/pages/manager/userManage/UserManageLine.js index 02b720e..348759f 100644 --- a/src/pages/manager/userManage/UserManageLine.js +++ b/src/pages/manager/userManage/UserManageLine.js @@ -1,17 +1,11 @@ -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) @@ -20,21 +14,19 @@ function UserManageLine(props) { } return ( - <> - - {props.name} - {props.email} - {props.phone} - {props.department} - - - - - {isOpen ? - - : null - } - + + {props.name} + {props.email} + {props.phone} + {props.department} + + + {isOpen ? + + : null + } + + ) } diff --git a/src/pages/manager/userManage/UserModal.js b/src/pages/manager/userManage/UserModal.js index 592672a..8a3f74a 100644 --- a/src/pages/manager/userManage/UserModal.js +++ b/src/pages/manager/userManage/UserModal.js @@ -13,7 +13,7 @@ import { ModalTitle, ModalView, TitleContainer -} from 'components/modal/Modal'; +} from 'components/modal/BigModal'; import { AdminCapsuleBtnF, AdminRadioInput, diff --git a/src/pages/manager/userManage/UserMoreModal.js b/src/pages/manager/userManage/UserMoreModal.js new file mode 100644 index 0000000..cb8bdd1 --- /dev/null +++ b/src/pages/manager/userManage/UserMoreModal.js @@ -0,0 +1,24 @@ +import React from 'react'; +import {MenuText, MoreModalView, NormalDiv, RedDiv} from "../../../components/modal/MoreModal"; + +export function UserMoreModal(props) { + + const editUser = () => { + + }; + + const deleteUser = (e) => { + + }; + + return ( + e.stopPropagation()}> + + 정보 수정 + + + 탈퇴 처리 + + + ); +} \ No newline at end of file From 3319274f170320f66626d8370515f32e80d64696 Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Wed, 1 Nov 2023 03:10:36 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[PDW-60]=20feat:=20=EC=A7=81=EC=9B=90=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20API=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/BigModal.js | 114 +++++++++--------- src/pages/manager/userManage/UserManage.js | 2 +- .../manager/userManage/UserManageLine.js | 6 +- src/pages/manager/userManage/UserModal.js | 86 +++++++++++-- src/pages/manager/userManage/UserMoreModal.js | 32 +++-- 5 files changed, 156 insertions(+), 84 deletions(-) diff --git a/src/components/modal/BigModal.js b/src/components/modal/BigModal.js index c7c61d6..06c3c75 100644 --- a/src/components/modal/BigModal.js +++ b/src/components/modal/BigModal.js @@ -2,90 +2,90 @@ 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; + 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; + 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; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 35px; ` export const ModalTitle = styled.h2` - color: #8741CB; - margin: 0; + 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; + 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%; + width: 100%; ` export const AttrContainer = styled.div` - display : flex; - align-items: center; - margin-bottom: 35px; + display: flex; + align-items: center; + margin-bottom: 35px; ` export const AttrLabel = styled.div` - width: 120px; - font-size: 20px; - text-align: left; - line-height: 40px; + 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; + 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; + width: 100%; + display: flex; + justify-content: space-around; ` \ No newline at end of file diff --git a/src/pages/manager/userManage/UserManage.js b/src/pages/manager/userManage/UserManage.js index efa7927..253af20 100644 --- a/src/pages/manager/userManage/UserManage.js +++ b/src/pages/manager/userManage/UserManage.js @@ -42,7 +42,7 @@ function UserManage(props) { return ( {isOpen ? - + : null } 직원 관리 diff --git a/src/pages/manager/userManage/UserManageLine.js b/src/pages/manager/userManage/UserManageLine.js index 348759f..b2d52ec 100644 --- a/src/pages/manager/userManage/UserManageLine.js +++ b/src/pages/manager/userManage/UserManageLine.js @@ -9,7 +9,7 @@ import {MoreBtn} from "../../../components/modal/MoreModal"; function UserManageLine(props) { const [isOpen, setIsOpen] = useState(false) - const openModalHandler = () => { + const openMoreModalHandler = () => { setIsOpen(!isOpen) } @@ -20,9 +20,9 @@ function UserManageLine(props) { {props.phone} {props.department} - + {isOpen ? - + : null } diff --git a/src/pages/manager/userManage/UserModal.js b/src/pages/manager/userManage/UserModal.js index 8a3f74a..7cfedb7 100644 --- a/src/pages/manager/userManage/UserModal.js +++ b/src/pages/manager/userManage/UserModal.js @@ -1,5 +1,5 @@ import {SelectToggleInModal} from 'components/capsule/SelectToggle'; -import React, {useState, useEffect} from 'react'; +import React, {useState, useEffect, useRef} from 'react'; import {AdminUsersAxios} from 'api/AxiosApi'; import {getToken} from 'utils/IsLoginUtil'; import {basicError} from 'utils/ErrorHandlerUtil'; @@ -25,9 +25,29 @@ import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareBut export function UserModal(props) { const [departmentOptionList, setDepartmentOptionList] = useState([]); const [currentRole, setCurrentRole] = useState("일반"); - const [currentDepartment, setCurrentDepartment] = useState(""); + const currentDepartment = useRef(""); + const [userInfo, setUserInfo] = useState(null); let departments; + function getUserInfo() { + if (props.id !== null) { + AdminUsersAxios.get(`/${props.id}`, { + headers: { + Authorization: getToken() + } + }) + .then((response) => { + setUserInfo(response.data.data) + currentDepartment.current = response.data.data.department + setCurrentRole(response.data.data.role) + getDpNPsList(); + }) + .catch((error) => { + basicError(error) + }) + } else getDpNPsList(); + } + function getDpNPsList() { AdminUsersAxios.get("/departments", { headers: { @@ -36,7 +56,9 @@ export function UserModal(props) { }) .then((response) => { departments = response.data.data.departmentList - setDepartmentOptionList(departments.map((department) => ())) + setDepartmentOptionList(departments.map((department) => ())) }) .catch((error) => { basicError(error) @@ -44,7 +66,7 @@ export function UserModal(props) { } useEffect(() => { - getDpNPsList() + getUserInfo() }, []) const handleRoleChange = (e) => { @@ -52,7 +74,7 @@ export function UserModal(props) { }; const handleDepartmentChange = (e) => { - setCurrentDepartment(e.target.value); + currentDepartment.current = e.target.value }; // 전화번호 자동 하이픈 @@ -93,33 +115,71 @@ export function UserModal(props) { }) }; + const editUser = (e) => { + e.preventDefault() + const inputName = e.target.name.value + const inputPhone = e.target.phone.value + const inputDepartment = e.target.department.value + const inputRole = e.target.role.value + // todo: 입력값 정규식 확인 + + AdminUsersAxios.patch(`/${props.id}`, { + name: inputName, + phone: inputPhone, + department: inputDepartment, + role: inputRole + }, { + headers: { + Authorization: getToken() + } + }) + .then((response) => { + alert("수정되었습니다.") + window.location.reload(); + }) + .catch((error) => { + basicError(error) + }) + }; + return ( e.stopPropagation()}> - 신규 직원 등록 + {props.title} - + 성명 - + 이메일 - + 비밀번호 - + 연락처 - + 부서 - + 권한 @@ -137,7 +197,7 @@ export function UserModal(props) { 관리자 - + diff --git a/src/pages/manager/userManage/UserMoreModal.js b/src/pages/manager/userManage/UserMoreModal.js index cb8bdd1..17a9bf3 100644 --- a/src/pages/manager/userManage/UserMoreModal.js +++ b/src/pages/manager/userManage/UserMoreModal.js @@ -1,10 +1,16 @@ -import React from 'react'; +import React, {useState} from 'react'; import {MenuText, MoreModalView, NormalDiv, RedDiv} from "../../../components/modal/MoreModal"; +import {UserModal} from "./UserModal"; export function UserMoreModal(props) { + const [isOpen, setIsOpen] = useState(false) - const editUser = () => { + const openModalHandler = () => { + setIsOpen(!isOpen) + } + const editUser = () => { + openModalHandler(); }; const deleteUser = (e) => { @@ -12,13 +18,19 @@ export function UserMoreModal(props) { }; return ( - e.stopPropagation()}> - - 정보 수정 - - - 탈퇴 처리 - - + <> + e.stopPropagation()}> + + 정보 수정 + + + 탈퇴 처리 + + + {isOpen ? + + : null + } + ); } \ No newline at end of file