[PDW-65] feat: 직원 등록 UI 완성

PLADI-ALM · Oct 27, 2023 · efc76f9 · efc76f9
1 parent 0a63d18
commit efc76f9
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 51 deletions.
diff --git a/src/components/capsule/RoleCapsule.js b/src/components/capsule/RoleCapsule.js
@@ -1,16 +1,18 @@
 import React from "react";
 import styled from "styled-components"
 
-const BasicCapsule = styled.p`
-    width: 50px;
-    border-radius: 15px;
-    border: 2px solid #15294B;
-    background: white;
-    text-align: center;
-    color: #15294B;
-    font-size: 18px;
-    padding: 7px 15px;
-    margin: auto;
+const BasicCapsule = styled.label`
+  display: block;
+  width: 45px;
+  height: 18px;
+  border-radius: 15px;
+  border: 2px solid #15294B;
+  background: white;
+  text-align: center;
+  color: #15294B;
+  font-size: 16px;
+  padding: 7px 15px;
+  margin: auto;
 `
 
 const AdminCapsule = styled(BasicCapsule)`
@@ -30,12 +32,38 @@ const AdminCapsuleBtnT = styled(AdminCapsule)`
     cursor: pointer;
 `
 
-const BasicCapsuleBtnF = styled(BasicCapsule)`
+export const BasicCapsuleBtnF = styled(BasicCapsule)`
     cursor: pointer;
+
+  &:checked {
+    background: #15294B;
+    color: white;
+  }
 `
 
-const AdminCapsuleBtnF = styled(AdminCapsule)`
+export const AdminCapsuleBtnF = styled(AdminCapsule)`
     cursor: pointer;
+
+  &:checked{
+    background: #8741CB;
+    color: white;
+  }
+`
+
+export const BasicRadioInput = styled.input.attrs({ type: 'radio' })`
+  display: none;
+
+  &:checked + ${BasicCapsuleBtnF}{
+    background: #15294B;
+    color: white;
+  }
+`
+
+export const AdminRadioInput = styled(BasicRadioInput)`
+  &:checked + ${AdminCapsuleBtnF}{
+    background: #8741CB;
+    color: white;
+  }
 `
 
 export function RoleCapsule(props) {
@@ -52,12 +80,12 @@ export function RoleCapsuleBtn(props) {
     return (
         <>
             {props.role === "일반" && props.type === true ?
-                <BasicCapsuleBtnT>{props.role}</BasicCapsuleBtnT> :
+                <BasicCapsuleBtnT htmlFor={props.htmlFor}>{props.role}</BasicCapsuleBtnT> :
                 props.role === "일반" && props.type === false ?
-                    <BasicCapsuleBtnF>{props.role}</BasicCapsuleBtnF> :
+                    <BasicCapsuleBtnF htmlFor={props.htmlFor}>{props.role}</BasicCapsuleBtnF> :
                     props.role === "관리자" && props.type === true ?
-                        <AdminCapsuleBtnT>{props.role}</AdminCapsuleBtnT> :
-                        <AdminCapsuleBtnF>{props.role}</AdminCapsuleBtnF>
+                        <AdminCapsuleBtnT htmlFor={props.htmlFor}>{props.role}</AdminCapsuleBtnT> :
+                        <AdminCapsuleBtnF htmlFor={props.htmlFor}>{props.role}</AdminCapsuleBtnF>
             }
         </>
     );

diff --git a/src/components/capsule/SelectToggle.js b/src/components/capsule/SelectToggle.js
@@ -4,14 +4,14 @@ import styled from "styled-components";
 import ArrowDown from "assets/images/arrowDown.svg"
 
 const Select = styled.select`
-    border-radius: 10px;
+    border-radius: 8px;
     border: 1px solid #717171;
     background: #F6F6F6;
     font-family: NanumSquare_ac;
     font-size: 18px;
     color: #757575;
     padding: 0 10px;
-    height: 35px;
+    height: 40px;
     outline: none;
     padding: 2px;
 `

diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 // Modal이 떴을 때의 배경
 export const ModalBackdrop = styled.div`
-    z-index: 2; //위치지정 요소
+    z-index: 3; //위치지정 요소
     position: fixed;
     display : flex;
     justify-content : center;
@@ -31,7 +31,7 @@ export const TitleContainer = styled.div`
     display : flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 20px;
+    margin-bottom: 35px;
 `
 
 export const ModalTitle = styled.h2`
@@ -60,7 +60,7 @@ export const AttrsContainer = styled.div`
 export const AttrContainer = styled.div`
     display : flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 35px;
 `
 
 export const AttrLabel = styled.div`
@@ -72,8 +72,8 @@ export const AttrLabel = styled.div`
 
 export const AttrInput = styled.input`
     border: 2px solid #E6E6E6;
-    border-radius: 10px;
-    height: 35px;
+    border-radius: 8px;
+    height: 40px;
     width: 280px;
     font-family: NanumSquare_ac;
     font-size: 18px;

diff --git a/src/pages/manager/userManage/UserModal.js b/src/pages/manager/userManage/UserModal.js
@@ -1,48 +1,68 @@
-import { SelectToggleInModal } from 'components/capsule/SelectToggle';
-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, BottomBtnContainer, ExitBtn, ModalBackdrop, ModalTitle, ModalView, TitleContainer } from 'components/modal/Modal';
-import { RoleCapsuleBtn } from 'components/capsule/RoleCapsule';
+import {SelectToggleInModal} from 'components/capsule/SelectToggle';
+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,
+    BottomBtnContainer,
+    ExitBtn,
+    ModalBackdrop,
+    ModalTitle,
+    ModalView,
+    TitleContainer
+} from 'components/modal/Modal';
+import {
+    AdminCapsuleBtnF,
+    AdminRadioInput,
+    BasicCapsuleBtnF,
+    BasicRadioInput
+} from 'components/capsule/RoleCapsule';
 import BigSquareButton from 'components/button/BigSquareButton';
 
 export function UserModal(props) {
-    const [positionOptionList, setPositionOptionList] = useState([]);
     const [departmentOptionList, setDepartmentOptionList] = useState([]);
-    let deparments, positions;
+    const [currentRole, setCurrentRole] = useState("일반");
+    let departments;
 
     function getDpNPsList() {
-        AdminUsersAxios.get("/ranks", {
+        AdminUsersAxios.get("/departments", {
             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>)))
+                departments = response.data.data.departmentList
+                setDepartmentOptionList(departments.map((department) => (<option>{department}</option>)))
             })
             .catch((error) => {
                 basicError(error)
             })
     }
+
     useEffect(() => {
         getDpNPsList()
     }, [])
 
+    const handleChange = (e) => {
+        console.log(`선택한 값 : ${e.target.value}`);
+
+        setCurrentRole(e.target.value);
+    };
+
 
     return (
         <ModalBackdrop onClick={props.handler}>
             <ModalView onClick={(e) => e.stopPropagation()}>
                 <TitleContainer>
                     <ModalTitle>신규 직원 등록</ModalTitle>
-                    <ExitBtn onClick={props.handler}>×</ExitBtn>
                 </TitleContainer>
                 <AttrsContainer>
                     <AttrContainer>
-                        <AttrLabel>이름</AttrLabel>
+                        <AttrLabel>성명</AttrLabel>
                         <AttrInput type='text'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
@@ -54,26 +74,32 @@ export function UserModal(props) {
                         <AttrInput type='text'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
-                        <AttrLabel>부서</AttrLabel>
-                        <SelectToggleInModal items={departmentOptionList} />
-                    </AttrContainer>
-                    <AttrContainer>
-                        <AttrLabel>직위</AttrLabel>
-                        <SelectToggleInModal items={positionOptionList} />
+                        <AttrLabel>연락처</AttrLabel>
+                        <AttrInput type='text'></AttrInput>
                     </AttrContainer>
                     <AttrContainer>
-                        <AttrLabel>직책</AttrLabel>
-                        <AttrInput type='text'></AttrInput>
+                        <AttrLabel>부서</AttrLabel>
+                        <SelectToggleInModal items={departmentOptionList}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>권한</AttrLabel>
-                        <RoleCapsuleBtn role="일반" type={true} />
-                        <RoleCapsuleBtn role="관리자" type={false} />
+                        <BasicRadioInput type="radio" id="basic"
+                                         name="role"
+                                         value="일반"
+                                         checked={currentRole === "일반"}
+                                         onChange={handleChange}/>
+                        <BasicCapsuleBtnF htmlFor="basic">일반</BasicCapsuleBtnF>
+                        <AdminRadioInput type="radio" id="admin"
+                                         name="role"
+                                         value="관리자"
+                                         checked={currentRole === "관리자"}
+                                         onChange={handleChange}/>
+                        <AdminCapsuleBtnF htmlFor="admin">관리자</AdminCapsuleBtnF>
                     </AttrContainer>
                 </AttrsContainer>
                 <BottomBtnContainer>
-                    <BigSquareButton name={"등록"} color={"purple"} />
-                    <BigSquareButton name={"취소"} color={"white"} />
+                    <BigSquareButton name={"등록"} color={"purple"}/>
+                    <BigSquareButton name={"취소"} color={"white"} click={props.handler}/>
                 </BottomBtnContainer>
             </ModalView>
         </ModalBackdrop>