Merge pull request #97 from PLADI-ALM/fix/PDW-61-resource-list

[PDW-61/fix] 자원 관리 목록 UI 변경
PLADI-ALM · Oct 22, 2023 · 5c38597 · 5c38597
2 parents 35e3428 + 79ff377
commit 5c38597
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 15 deletions.
diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js
@@ -29,6 +29,8 @@ const ManageSearchImage = styled.img`
 `
 
 const ManageSearchText = styled.input`
+    padding-left: 10px;
+    font-size: 18px;
     font-family: NanumSquare_ac;
     width: 100%;
     height: 100%;

diff --git a/src/components/toggle/Toggle.js b/src/components/toggle/Toggle.js
@@ -0,0 +1,46 @@
+import styled, {css} from "styled-components";
+import {useState} from "react";
+
+const ToggleBtn = styled.button`
+    width: 50px;
+    height: 30px;
+    border-radius: 30px;
+    border: none;
+    cursor: pointer;
+    background-color: ${(props) => (!props.toggle ? "#2A3042" : "#8741CB")};
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease-in-out;
+    margin: 0 auto;
+`;
+
+const Circle = styled.div`
+    background-color: white;
+    width: 20px;
+    height: 20px;
+    border-radius: 50px;
+    position: absolute;
+    left: 10%;
+    transition: all 0.3s ease-in-out;
+    ${(props) =>
+    props.toggle &&
+    css`
+      transform: translate(20px, 0);
+      transition: all 0.3s ease-in-out;
+    `}
+`;
+
+export function Toggle(props) {
+    const [toggle, setToggle] = useState(false);
+    const clickedToggle = () => {
+        setToggle((prev) => !prev);
+        props.click(!toggle);
+    };
+    return (
+        <ToggleBtn onClick={clickedToggle} toggle={toggle}>
+            <Circle toggle={toggle} />
+        </ToggleBtn>
+    );
+}
diff --git a/src/pages/booking/bookedList/BookedList.js b/src/pages/booking/bookedList/BookedList.js
@@ -23,6 +23,7 @@ export const Bar = styled.div`
     box-sizing: border-box;
     position: absolute;
     top: 0;
+    z-index: 1;
 `
 
 // 네이비 바 밑의 테이블의 컨테이너
@@ -42,7 +43,7 @@ export const BookedThead = styled.thead`
     top: 0;
     border-radius: 12px;
     height: 60px;
-    z-index: 1;
+    z-index: 2;
     color: white;
 `
 

diff --git a/src/pages/manager/resourceManage/ResourceManage.js b/src/pages/manager/resourceManage/ResourceManage.js
@@ -48,18 +48,29 @@ function ResourceManage(props) {
                     <BookedTable>
                         <BookedThead>
                             <tr>
-                                <th width="20%">자원명</th>
-                                <th width="20%">카테고리</th>
-                                <th width="60%">설명</th>
+                                <th width="20%">장비명</th>
+                                <th width="15%">보관장소</th>
+                                <th width="15%">책임자</th>
+                                <th width="40%">설명</th>
+                                <th width="8%"></th>
                             </tr>
                         </BookedThead>
                         <tbody>
                             { resources.length === 0 ?
                             <ResourceManageTableCell>
-                                <td colSpan={4}>자원 내역이 없습니다.</td>
+                                <td colSpan={5}>자원 내역이 없습니다.</td>
                             </ResourceManageTableCell>
                             : resources.map((resource) =>
-                                <ResourceManageTableCell key={resource.resourceId} id={resource.resourceId}  name={resource.name} category={resource.category} description={resource.description}/>
+                                <ResourceManageTableCell
+                                    key={resource.resourceId}
+                                    id={resource.resourceId}
+                                    name={resource.name}
+                                    location={resource.category}
+                                    user={resource.name}
+                                    userPhone={resource.category}
+                                    description={resource.description}
+                                    isEnable={true}
+                                />
                             )}
                         </tbody>
                     </BookedTable>

diff --git a/src/pages/manager/resourceManage/ResourceManageTableCell.js b/src/pages/manager/resourceManage/ResourceManageTableCell.js
@@ -1,19 +1,22 @@
 import React from 'react';
 import { BookedLineTr } from '../../booking/bookedList/BookedList';
-
-
-
+import {Toggle} from "../../../components/toggle/Toggle";
+import {Link} from "react-router-dom";
 
 function ResourceManageTableCell(props) {
-    const moveToDetail = () => {
-        window.location.href = `/manage/resources/${props.id}`
+
+    const changeToggle = (isEnable) => {
+        // todo: 활성/비활성 API 호출
+        console.log(isEnable)
     }
 
     return (
-        <BookedLineTr onClick={moveToDetail} >
-            <td width="20%">{props.name}</td>
-            <td width="20%">{props.category}</td>
-            <td width="60%">{props.description}</td>
+        <BookedLineTr >
+            <td width="20%"><Link to={`/manage/resources/${props.id}`}>{props.name}</Link></td>
+            <td width="15%">{props.location}</td>
+            <td width="15%">{props.user}({props.userPhone})</td>
+            <td width="40%">{props.description}</td>
+            <td width="8%"><Toggle click={changeToggle} isEnable={props.isEnable}/></td>
         </BookedLineTr>
     )
 }