Merge pull request #29 from PLADI-ALM/feat/PDW-39-manager-office

[PDW-39/Feat] 관리자 검색 바 Component 생성 및 페이지 UI 구현

src/App.js

@@ -8,6 +8,7 @@ import MainPage from 'pages/main/MainPage';
 import OfficeBooking from 'pages/booking/officeBooking/OfficeBooking';
 import SelectResource from 'pages/booking/selectResource/SelectResource';
 import ResourceBooking from 'pages/booking/resourceBooking/ResourceBooking';
+import OfficeManage from 'pages/booking/officeManage/OfficeManage';
 
 function App() {
 
@@ -30,6 +31,7 @@ function App() {
           <Route path='/bookings/resources/:bookingId' element={<ResourceBooking isCheck='true' />} />
           <Route path='/resourceBooking' element={<SelectResource title="자원 예약" />} />
           <Route path='/resourceBooking/:resourceId' element={<ResourceBooking />} />
+          <Route path='/manage/office' element={<OfficeManage title="회의실 관리"/>} />
           {/* 나중에 요런식으로 활용하기 */}
           {/* <Route path="/reportManage/:recipeReportIdx" element={<ReportManageDetail />} /> */}
         </Route>

src/components/searchBar/ManageSearchBar.js

@@ -0,0 +1,81 @@
+import React from "react";
+import styled from "styled-components";
+import SearchInputImage from "../../assets/images/SearchInput.svg"
+import SearchButtonImage from "../../assets/images/SearchPlus.svg"
+
+
+
+const Container = styled.div`
+    background: none;
+    width: 100%;
+    height: 50px;
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 20px;
+`
+
+const ManageSearchContainer = styled.div`
+    width: 85%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid #FFF;
+    background: #FFF;
+    margin-right: 20px;
+`
+const ManageSearchImage = styled.img`
+    width: 30px;
+    height: 30px;
+`
+
+const ManageSearchText = styled.input`
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+`
+
+const ManageSearchButton = styled.button`
+    width: 15%;
+    height: 100%;
+    border-radius: 8px;
+    background: #8741CB;
+    display: flex;
+    align-items: center;
+`
+
+const ManageSearchButtonImage = styled.img`
+    width: 20px;
+    height: 20px;
+    border-radius: 12px;
+    border: 1px dashed var(--gray-300, #D0D5DD);
+    margin: 0 15px 0 15px
+`
+
+const ManageSearchButtonLabel = styled.label`
+    color: white;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+`
+
+
+
+function ManageSearchBar(props) {
+    return(
+        <Container>
+            <ManageSearchContainer>
+                <ManageSearchImage src={SearchInputImage} />
+                <ManageSearchText placeholder="이름 검색" />
+            </ManageSearchContainer>
+            <ManageSearchButton>
+                <ManageSearchButtonImage src={SearchButtonImage} />
+                <ManageSearchButtonLabel>{props.buttonTitle}</ManageSearchButtonLabel>
+            </ManageSearchButton>
+        </Container>
+    );
+}
+
+export default ManageSearchBar;

src/pages/booking/bookedList/BookedList.js

@@ -13,7 +13,7 @@ const TitleContainer = styled.div`
 `
 
 // 표 있는 페이지의 네이비 바
-const Bar = styled.div`
+export const Bar = styled.div`
     border-radius: 12px;
     height: 60px;
     width: 100%;
@@ -24,18 +24,18 @@ const Bar = styled.div`
 `
 
 // 네이비 바 밑의 테이블의 컨테이너
-const TableContainer = styled.div`
+export const TableContainer = styled.div`
     overflow-y: scroll;
 `
 
-const BookedTable = styled.table`
+export const BookedTable = styled.table`
     border-collapse: collapse;
     height: fit-content;
     width: 100%;
     font-size: 18px;
 `
 
-const BookedThead = styled.thead`
+export const BookedThead = styled.thead`
     position: sticky;
     top: 0;
     border-radius: 12px;

src/pages/booking/officeManage/OfficeManage.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { RightContainer, TitleText, WhiteContainer } from "components/rightContainer/RightContainer";
+import { Bar, BookedTable, BookedThead, TableContainer } from "../bookedList/BookedList";
+import OfficeManageTableCell from "./OfficeManageTableCell";
+import ManageSearchBar from "components/searchBar/ManageSearchBar";
+
+
+function OfficeManage(props) {
+
+
+    return (
+       <RightContainer>
+            <TitleText>{props.title}</TitleText>
+            <ManageSearchBar buttonTitle="자원 추가"/>
+
+            <WhiteContainer>
+                <Bar />
+                <TableContainer>
+                    <BookedTable>
+                        <BookedThead>
+                            <tr>
+                                <th width="20%">회의실명</th>
+                                <th width="20%">위치</th>
+                                <th width="20%">수용인원</th>
+                                <th width="40%">설명</th>
+                            </tr>
+                        </BookedThead>
+                        <tbody>
+                            <OfficeManageTableCell  name={"회의실1"} location={"S1350"} capacity={"7"} description={"분명 추석 연휴가 긴 줄 알았는데 눈깜빡하니까 학교가겠"}/>
+                        </tbody>
+                    </BookedTable>
+                </TableContainer>
+            </WhiteContainer>
+       </RightContainer>
+    );
+}
+
+export default OfficeManage;

src/pages/booking/officeManage/OfficeManageTableCell.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { BookedLineTr } from '../bookedList/BookedList';
+
+
+
+
+function OfficeManageTableCell(props) {
+
+    return (
+        <BookedLineTr>
+            <td width="20%"><Link to={`/manage/office/${props.id}`}>{props.name}</Link></td>
+            <td width="20%">{props.location}</td>
+            <td width="20%">{props.capacity}</td>
+            <td width="40%">{props.description}</td>
+        </BookedLineTr>
+    )
+}
+
+export default OfficeManageTableCell;

src/pages/booking/selectOffice/SelectOffice.js

@@ -48,7 +48,7 @@ function SelectOffice(props) {
             <WhiteContainer>
                 <SearchBar changeDate={changeDate} changeStart={changeStart} changeEnd={changeEnd} search={searchOffice} />
                 <div className="cardList">
-                    {offices.length == 0 ? <label>예약 가능한 회의실이 없습니다.</label>  : offices.map((office) => <OfficeInfo key={office.name} 
+                    {offices.length == 0 ? <label>예약 가능한 회의실이 없습니다.</label>  : offices.map((office) => <OfficeInfo key={office.officeId} 
                                                          officeId={office.officeId}
                                                          name={office.name}
                                                          location={office.location}