From 79ff3775af4a4884ca879ea7177b9cdc0dde206a Mon Sep 17 00:00:00 2001
From: psyeon1120 <psycsh@naver.com>
Date: Sat, 21 Oct 2023 17:51:48 +0900
Subject: [PATCH] =?UTF-8?q?[PDW-61]=20fix:=20=EC=9E=90=EC=9B=90=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EB=AA=A9=EB=A1=9D=20UI=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/searchBar/ManageSearchBar.js   |  2 +
 src/components/toggle/Toggle.js               | 46 +++++++++++++++++++
 src/pages/booking/bookedList/BookedList.js    |  3 +-
 .../manager/resourceManage/ResourceManage.js  | 21 +++++++--
 .../resourceManage/ResourceManageTableCell.js | 21 +++++----
 5 files changed, 78 insertions(+), 15 deletions(-)
 create mode 100644 src/components/toggle/Toggle.js

diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js
index 7f9d72b..e2e3707 100644
--- 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
new file mode 100644
index 0000000..3d6bdd9
--- /dev/null
+++ 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>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/booking/bookedList/BookedList.js b/src/pages/booking/bookedList/BookedList.js
index 2f60557..bfd7c11 100644
--- 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
index 04682c1..e4404db 100644
--- 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
index d06ddc2..677ab57 100644
--- 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>
     )
 }