diff --git a/src/App.js b/src/App.js
index 4c2717b..5ad8bf7 100644
--- a/src/App.js
+++ b/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() {
} />
} />
} />
+ } />
{/* 나중에 요런식으로 활용하기 */}
{/* } /> */}
diff --git a/src/assets/images/SearchInput.svg b/src/assets/images/SearchInput.svg
new file mode 100644
index 0000000..0c750a9
--- /dev/null
+++ b/src/assets/images/SearchInput.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/images/SearchPlus.svg b/src/assets/images/SearchPlus.svg
new file mode 100644
index 0000000..0764175
--- /dev/null
+++ b/src/assets/images/SearchPlus.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js
new file mode 100644
index 0000000..6fa37af
--- /dev/null
+++ b/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(
+
+
+
+
+
+
+
+ {props.buttonTitle}
+
+
+ );
+}
+
+export default ManageSearchBar;
\ No newline at end of file
diff --git a/src/pages/booking/bookedList/BookedList.js b/src/pages/booking/bookedList/BookedList.js
index 722b02e..6692321 100644
--- a/src/pages/booking/bookedList/BookedList.js
+++ b/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;
diff --git a/src/pages/booking/officeManage/OfficeManage.js b/src/pages/booking/officeManage/OfficeManage.js
new file mode 100644
index 0000000..8049e83
--- /dev/null
+++ b/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 (
+
+ {props.title}
+
+
+
+
+
+
+
+
+ | 회의실명 |
+ 위치 |
+ 수용인원 |
+ 설명 |
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default OfficeManage;
\ No newline at end of file
diff --git a/src/pages/booking/officeManage/OfficeManageTableCell.js b/src/pages/booking/officeManage/OfficeManageTableCell.js
new file mode 100644
index 0000000..c2330ee
--- /dev/null
+++ b/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 (
+
+ {props.name} |
+ {props.location} |
+ {props.capacity} |
+ {props.description} |
+
+ )
+}
+
+export default OfficeManageTableCell;
\ No newline at end of file
diff --git a/src/pages/booking/selectOffice/SelectOffice.js b/src/pages/booking/selectOffice/SelectOffice.js
index 0a2182e..0e256e9 100644
--- a/src/pages/booking/selectOffice/SelectOffice.js
+++ b/src/pages/booking/selectOffice/SelectOffice.js
@@ -48,7 +48,7 @@ function SelectOffice(props) {
- {offices.length == 0 ? : offices.map((office) => 예약 가능한 회의실이 없습니다. : offices.map((office) =>