Merge pull request #137 from PLADI-ALM/feat/PDW-90-my-info

[PDW-90/feat] 내 정보 수정
PLADI-ALM · Nov 19, 2023 · 4564597 · 4564597
2 parents 0125a08 + 016e835
commit 4564597
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 18 deletions.
diff --git a/src/components/capsule/DropBox.js b/src/components/capsule/DropBox.js
@@ -18,6 +18,9 @@ const Select = styled.select`
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  &:disabled {
+    background: #FAFAFA;
+  }
 `
 
 const ManagerSelect = styled(Select)`

diff --git a/src/components/modal/BigModal.js b/src/components/modal/BigModal.js
@@ -82,6 +82,9 @@ export const AttrInput = styled.input`
   padding: 0 10px;
   outline: none;
   box-sizing: border-box;
+  &:disabled {
+    color: #9E9E9E;
+  }
 `
 
 // 하단 버튼 컨테이너

diff --git a/src/pages/admin/user/UserModal.js → src/components/modal/UserModal.js b/src/pages/admin/user/UserModal.js → src/components/modal/UserModal.js
@@ -1,6 +1,6 @@
 import {SelectToggleInModal} from 'components/capsule/DropBox';
 import React, {useState, useEffect, useRef} from 'react';
-import {AdminUsersAxios} from 'api/AxiosApi';
+import {AdminUsersAxios, UsersAxios} from 'api/AxiosApi';
 import {getToken} from 'utils/IsLoginUtil';
 import {basicError} from 'utils/ErrorHandlerUtil';
 import {
@@ -21,7 +21,7 @@ import {
     BasicRadioInput
 } from 'components/capsule/RoleCapsule';
 import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton';
-import {AffiliationList} from "../../../constants/ToggleList";
+import {AffiliationList} from "../../constants/ToggleList";
 
 export function UserModal(props) {
     const [affiliationOptionList, setAffiliationOptionList] = useState([]);
@@ -32,7 +32,8 @@ export function UserModal(props) {
     const [userInfo, setUserInfo] = useState(null);
     let departments;
 
-    function getUserInfo() {
+    // 관리자 직원 정보 조회
+    function getUserInfoByAdmin() {
         if (props.id !== undefined) {
             AdminUsersAxios.get(`/${props.id}`, {
                 headers: {
@@ -56,6 +57,7 @@ export function UserModal(props) {
         }
     }
 
+    // 부서 목록 조회
     function getDepartmentsList() {
         AdminUsersAxios.get("/departments", {
             headers: {
@@ -81,8 +83,30 @@ export function UserModal(props) {
                 value={affiliation}>{affiliation}</option>)))
     }
 
+    // 내 정보 조회
+    function getMyInfo() {
+        UsersAxios.get("", {
+            headers: {
+                Authorization: getToken()
+            }
+        })
+            .then((response) => {
+                setUserInfo(response.data.data)
+                currentDepartment.current = response.data.data.department
+                currentAffiliation.current = response.data.data.affiliation
+                setDepartmentOptionList(<option value={currentDepartment.current}
+                                                selected>{currentDepartment.current}</option>)
+                setAffiliationOptionList(<option value={currentAffiliation.current}
+                                                 selected>{currentAffiliation.current}</option>)
+            })
+            .catch((error) => {
+                basicError(error)
+            })
+    }
+
     useEffect(() => {
-        getUserInfo()
+        if (props.my) getMyInfo()
+        else getUserInfoByAdmin()
     }, [])
 
     const handleRoleChange = (e) => {
@@ -106,6 +130,7 @@ export function UserModal(props) {
             .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
     }
 
+    // 관리자 직원 등록
     const registerUser = (e) => {
         e.preventDefault()
         const inputName = e.target.name.value
@@ -125,7 +150,7 @@ export function UserModal(props) {
             phone: inputPhone,
             affiliation: inputAffiliation,
             department: inputDepartment,
-            asserts: inputAsset,
+            assets: inputAsset,
             role: inputRole
         }, {
             headers: {
@@ -141,6 +166,7 @@ export function UserModal(props) {
             })
     };
 
+    // 관리자 직원 수정
     const editUser = (e) => {
         e.preventDefault()
         const inputName = e.target.name.value
@@ -156,7 +182,7 @@ export function UserModal(props) {
             phone: inputPhone,
             affiliation: inputAffiliation,
             department: inputDepartment,
-            asserts: inputAsset,
+            assets: inputAsset,
             role: inputRole
         }, {
             headers: {
@@ -172,14 +198,42 @@ export function UserModal(props) {
             })
     };
 
+    // 내 정보 수정
+    const editMyInfo = (e) => {
+        e.preventDefault()
+        const inputName = e.target.name.value
+        const inputPhone = e.target.phone.value
+        const inputAsset = e.target.asset.value
+        // todo: 입력값 정규식 확인
+
+        UsersAxios.patch("", {
+            name: inputName,
+            phone: inputPhone,
+            assets: inputAsset,
+        }, {
+            headers: {
+                Authorization: getToken()
+            }
+        })
+            .then((response) => {
+                alert("수정되었습니다.")
+                props.handler();
+            })
+            .catch((error) => {
+                basicError(error)
+            })
+    };
+
 
     return (
         <ModalBackdrop onClick={props.handler}>
             <ModalView onClick={(e) => e.stopPropagation()}>
                 <TitleContainer>
                     <ModalTitle>{props.title}</ModalTitle>
                 </TitleContainer>
-                <AttrsForm method="post" id="register-user-form" onSubmit={userInfo !== null ? editUser : registerUser}>
+                <AttrsForm method="post" id="register-user-form"
+                           onSubmit={props.my ? editMyInfo :
+                               userInfo !== null ? editUser : registerUser}>
                     <AttrContainer>
                         <AttrLabel>성명</AttrLabel>
                         <AttrInput type='text' name='name'
@@ -189,13 +243,13 @@ export function UserModal(props) {
                         <AttrLabel>이메일</AttrLabel>
                         <AttrInput type='text' name='email'
                                    value={userInfo !== null ? userInfo.email : null}
-                                   disabled={userInfo !== null ? 'disabled' : null}/>
+                                   disabled={userInfo !== null}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>비밀번호</AttrLabel>
                         <AttrInput type='text' name='password'
                                    value={userInfo !== null ? '⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕⁕' : null}
-                                   disabled={userInfo !== null ? 'disabled' : null}/>
+                                   disabled={userInfo !== null}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>연락처</AttrLabel>
@@ -206,21 +260,22 @@ export function UserModal(props) {
                         <AttrLabel>소속</AttrLabel>
                         <SelectToggleInModal name='affiliation' items={affiliationOptionList}
                                              value={currentAffiliation.current}
-                                             onChange={handleAffiliationChange}/>
+                                             onChange={handleAffiliationChange}
+                                             disabled={props.my}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>부서</AttrLabel>
                         <SelectToggleInModal name='department' items={departmentOptionList}
                                              value={currentDepartment.current}
-                                             onChange={handleDepartmentChange}/>
+                                             onChange={handleDepartmentChange}
+                                             disabled={props.my}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>부여자산</AttrLabel>
                         <AttrInput type='text' name='asset'
-                                   defaultValue={userInfo !== null ? userInfo.asset : null}/>
+                                   defaultValue={userInfo !== null ? userInfo.assets : null}/>
                     </AttrContainer>
-                    {/*<AttrContainer style={userInfo !== null ? {display: 'none'} : null}>*/}
-                    <AttrContainer>
+                    <AttrContainer style={props.my ? {display: 'none'} : null}>
                         <AttrLabel>권한</AttrLabel>
                         <BasicRadioInput type="radio" id="basic"
                                          name="role"

diff --git a/src/components/officeBooking/BookingTimeBar.js b/src/components/officeBooking/BookingTimeBar.js
@@ -8,7 +8,7 @@ import {OfficesAxios} from "../../api/AxiosApi";
 import {getToken} from "../../utils/IsLoginUtil";
 import {basicError} from "../../utils/ErrorHandlerUtil";
 import {useParams} from "react-router-dom";
-import {UserModal} from "../../pages/admin/user/UserModal";
+import {UserModal} from "../modal/UserModal";
 import moment from "moment/moment";
 
 let bookingState = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,];

diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
@@ -12,6 +12,7 @@ import { removeAllCookies } from 'utils/CookiesUtil';
 import { getToken, isManager, navigateToLogin } from 'utils/IsLoginUtil';
 import { UsersAxios } from 'api/AxiosApi';
 import { basicError } from 'utils/ErrorHandlerUtil';
+import {UserModal} from "../modal/UserModal";
 
 const Container = styled.div`
     width: 250px;
@@ -103,6 +104,11 @@ function Sidebar() {
     navigateToLogin()
 
     const [userName, setUserName] = useState("")
+    const [isOpen, setIsOpen] = useState(false)
+
+    const openModalHandler = () => {
+        setIsOpen(!isOpen)
+    }
 
     // 이름
     const getUserInfo = () => {
@@ -159,10 +165,14 @@ function Sidebar() {
 
             <div>
                 {/* 사원 정보 */}
-                <MyInfo><Icon src={MyInfoIcon} />{userName}<ManageBtn>관리</ManageBtn></MyInfo>
+                <MyInfo><Icon src={MyInfoIcon} />{userName}<ManageBtn onClick={openModalHandler}>관리</ManageBtn></MyInfo>
                 {/* 로그아웃 */}
                 <Logout onClick={logout}><Icon src={LogoutIcon} />로그아웃</Logout>
             </div>
+            {isOpen ?
+                <UserModal handler={openModalHandler} my={true} title={"내 정보 수정"}/>
+                : null
+            }
         </Container>
     )
 }

diff --git a/src/pages/admin/user/UserManage.js b/src/pages/admin/user/UserManage.js
@@ -6,7 +6,7 @@ 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";
+import {UserModal} from "../../../components/modal/UserModal";
 import {AffiliationList} from "../../../constants/ToggleList";
 import styled from "styled-components";
 

diff --git a/src/pages/admin/user/UserMoreModal.js b/src/pages/admin/user/UserMoreModal.js
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {MenuText, MoreModalView, NormalDiv, RedDiv} from "../../../components/modal/MoreModal";
-import {UserModal} from "./UserModal";
+import {UserModal} from "../../../components/modal/UserModal";
 import {AdminUsersAxios} from "../../../api/AxiosApi";
 import {getToken} from "../../../utils/IsLoginUtil";
 import {basicError} from "../../../utils/ErrorHandlerUtil";