Merge pull request #152 from PLADI-ALM/feat/PDW-19-equipment

[PDW-19/feat] 비품 내역 조회

src/App.js

@@ -27,6 +27,7 @@ import CarBookingManage from "./pages/admin/carBookings/CarBookingManage";
 import CarManageAdd from "./pages/admin/car/CarManageAdd";
 import CarManageDetail from "./pages/admin/car/CarManageDetail";
 import OfficeManageAdd from "./pages/admin/office/OfficeManageAdd";
+import EquipmentList from "./pages/basic/equipment/EquipmentList";
 
 function App() {
 
@@ -56,6 +57,7 @@ function App() {
                     <Route path='/my/bookings/resources/:bookingId' element={<ResourceBookingCheck />} />
                     <Route path="/my/bookings/cars" element={<BookedList title="차량 예약 내역" type={"cars"} />} />
                     <Route path='/my/bookings/cars/:bookingId' element={<CarBookingCheck />} />
+                    <Route path='/equipments' element={<EquipmentList />} />
                     <Route path='/admin/offices' element={<OfficeManage />} />
                     <Route path='/admin/offices/add' element={<OfficeManageAdd />} />
                     <Route path='/admin/offices/:officeId/edit' element={<OfficeManageAdd />} />

src/components/capsule/Capsule.js

@@ -19,6 +19,16 @@ const WhiteCapsule = styled(PurpleCapsule)`
     color: #A263DE;
 `
 
+const MiniPurpleCapsule = styled(PurpleCapsule)`
+  font-size: 15px;
+  padding: 5px 10px;
+`
+
+const MiniWhiteCapsule = styled(WhiteCapsule)`
+  font-size: 15px;
+  padding: 5px 10px;
+`
+
 function Capsule(props) {
     return (
         <>
@@ -29,4 +39,14 @@ function Capsule(props) {
     );
 }
 
-export default Capsule;
+export default Capsule;
+
+export function MiniCapsule(props) {
+    return (
+        <>
+            {props.color === "white" ?
+                <MiniWhiteCapsule>{props.text}</MiniWhiteCapsule> :
+                <MiniPurpleCapsule>{props.text}</MiniPurpleCapsule>}
+        </>
+    );
+}

src/components/card/Card.js

@@ -27,6 +27,7 @@ export const ResourceCardClick = styled(ResourceCard)`
 export const CardText = styled.text`
   color: #575757;
   font-size: 18px;
+  text-align: left;
 `
 
 export const ResourceTitle = styled.text`
@@ -112,4 +113,5 @@ export const RightDescriptionText = styled(CardText)`
 export const NoCard = styled.label`
   padding: 30px;
   display: block;
+  margin: auto;
 `

src/components/card/EquipmentInfo.js

@@ -0,0 +1,104 @@
+import React, {useState} from "react";
+import styled from "styled-components"
+import {MiniCapsule} from "components/capsule/Capsule";
+import {CardText} from "./Card";
+import {MoreBtn} from "../modal/MoreModal";
+import MyInfoIcon from "assets/images/sidebarIcon/MyInfoIcon.svg"
+import LocationIcon from "assets/images/Location.svg"
+import MoreIcon from "assets/images/triple_dot_icon_black.svg";
+import EmptyImg from "assets/images/EmptyImg.svg"
+
+// 카드 박스
+export const Card = styled.div`
+  height: 350px;
+  width: calc(33.33% - 15px);
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #E6E6E6;
+  box-sizing: border-box;
+  padding: 15px;
+  margin: 0 0 15px 0;
+`
+
+// 상단줄 컨테이너
+const TopContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+`
+
+const TopGatherContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+// 비품명 컨테이너
+const EquipmentNameContainer = styled.div`
+  display: inline-flex;
+  align-items: center;
+  color: #8741CB;
+  font-size: 20px;
+  margin-right: 10px;
+`
+
+// 정보 컨테이너
+const InfoContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+`
+
+// 이미지
+const ThisImg = styled.img`
+  width: 100%;
+  height: 50%;
+  object-fit: contain;
+`
+
+// 아이콘
+const IconImg = styled.img`
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+`
+
+function EquipmentInfo(props) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const openMoreModalHandler = () => {
+        setIsOpen(!isOpen)
+    }
+
+    return (
+        <Card>
+            <TopContainer>
+                <TopGatherContainer>
+                    <EquipmentNameContainer>{props.name}</EquipmentNameContainer>
+                    <CardText>{props.quantity}개</CardText>
+                </TopGatherContainer>
+                <TopGatherContainer>
+                    <MiniCapsule color="purple" text={props.category}/>
+                    <MoreBtn src={MoreIcon} onClick={openMoreModalHandler}/>
+                </TopGatherContainer>
+            </TopContainer>
+
+            <ThisImg src={props.imgUrl ? props.imgUrl : EmptyImg}/>
+            <InfoContainer>
+                <IconImg src={MyInfoIcon} />
+                <CardText>{props.keeper}({props.contact})</CardText>
+            </InfoContainer>
+            <InfoContainer>
+                <IconImg src={LocationIcon} />
+                <CardText>{props.location}</CardText>
+            </InfoContainer>
+
+            <InfoContainer>
+                <CardText>{props.description}</CardText>
+            </InfoContainer>
+        </Card>
+    );
+}
+
+export default EquipmentInfo;

src/components/card/OfficeInfo.js

@@ -1,18 +1,16 @@
 import React from "react";
 import styled from "styled-components"
-import DateIcon from '../../assets/images/selectOffice/date.png'
 import Capsule from "components/capsule/Capsule";
 import {
     Card,
-    CardText,
-    TitleContainer,
-    NameText,
-    DetailContainer,
     CardImage,
-    InfoContainer,
+    CardText,
     DescriptionContainer,
     DescriptionText,
-    OfficeCardClick
+    DetailContainer,
+    InfoContainer,
+    NameText,
+    TitleContainer
 } from "components/card/Card";
 
 // 수용인원 컨테이너

src/components/searchBar/SearchBar.js

@@ -42,11 +42,15 @@ export const SearchTextInput = styled.input.attrs({type: 'text'})`
   border: none;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   background: #FFF;
-  padding-left: 10px;
+  padding-left: 15px;
   margin: 0 10px;
   box-sizing: border-box;
 `
 
+export const SearchTextInputNoMargin = styled(SearchTextInput)`
+  margin-left: 0;
+`
+
 export const SearchDateContainer = styled.div`
   height: 40px;
   flex-shrink: 0;
@@ -57,24 +61,10 @@ export const SearchDateContainer = styled.div`
   align-items: center;
   margin-right: 10px;
 `
+
 export const SearchDateInput = styled.input.attrs({type: 'date'})`
   background: none;
   font-size: 18px;
   padding: 0 10px;
   border: none;
-`
-
-function SearchBar(props) {
-    return (
-        <SearchBarContainer>
-        {/*//     <TitleText>예약 가능한 회의실 검색</TitleText>*/}
-        {/*//     <DatePicker type="date" onChange={props.changeDate} value={props.value} />*/}
-        {/*//     <DropBox items={timeOptionList} change={props.changeStart} />*/}
-        {/*//     ~*/}
-        {/*//     <DropBox items={timeOptionList} change={props.changeEnd} />*/}
-        {/*//     <ImagePaddingButton image={SearchButtonImg} width={"30px"} height={"30px"} click={props.search} />*/}
-        </SearchBarContainer>
-    );
-}
-
-export default SearchBar;
+`

src/pages/admin/car/CarManageDetail.js

@@ -8,7 +8,7 @@ import {Bar} from 'pages/basic/myBookings/BookedList';
 import {RightContainer, TitleText, WhiteContainer} from 'components/rightContainer/RightContainer';
 import {DetailSubTitleText, NameSubTitleText} from 'components/officeBooking/SubTitleBar';
 import {getToken} from 'utils/IsLoginUtil';
-import MoreButtonIcon from "assets/images/button/triple_dot_icon.svg";
+import MoreButtonIcon from "assets/images/triple_dot_icon.svg";
 import ResourceDetailInfo from "components/card/ResourceDetailInfo";
 import ImageFullButton from "components/button/ImageFullButton";
 

src/pages/admin/office/OfficeManageDetail.js

@@ -13,7 +13,7 @@ import {
     DetailSubTitleText
 } from 'components/officeBooking/SubTitleBar';
 import {getToken} from 'utils/IsLoginUtil';
-import MoreButtonIcon from "../../../assets/images/button/triple_dot_icon.svg"
+import MoreButtonIcon from "../../../assets/images/triple_dot_icon.svg"
 import {MoreButton, OptionButton, OptionsView, InfoTable, InfoTableData} from '../resource/ResourceManageDetail';
 import OfficeInfo from 'components/card/OfficeInfo';
 import ImageFullButton from "../../../components/button/ImageFullButton";

src/pages/admin/resource/ResourceManageDetail.js

@@ -8,7 +8,7 @@ import {Bar} from 'pages/basic/myBookings/BookedList';
 import {RightContainer, TitleText, WhiteContainer} from 'components/rightContainer/RightContainer';
 import {DetailSubTitleText, NameSubTitleText} from 'components/officeBooking/SubTitleBar';
 import {getToken} from 'utils/IsLoginUtil';
-import MoreButtonIcon from "../../../assets/images/button/triple_dot_icon.svg"
+import MoreButtonIcon from "../../../assets/images/triple_dot_icon.svg"
 import ResourceDetailInfo from "../../../components/card/ResourceDetailInfo";
 import ImageFullButton from "../../../components/button/ImageFullButton";
 

src/pages/basic/booking/office/SelectOffice.js

@@ -3,20 +3,19 @@ import OfficeInfo from "components/card/OfficeInfo";
 import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
 import {OfficesAxios} from "api/AxiosApi";
 import {basicError} from 'utils/ErrorHandlerUtil';
-import SearchButtonImg from "../../../../assets/images/Search.svg";
-import {DropBox, TimeDropBox} from "../../../../components/capsule/DropBox";
-import {TimeList} from "../../../../constants/ToggleList";
-import {getToken} from "../../../../utils/IsLoginUtil";
-import {NoCard} from "../../../../components/card/Card";
-import ImagePaddingButton from "../../../../components/button/ImagePaddingButton";
+import SearchButtonImg from "assets/images/Search.svg";
+import {TimeDropBox} from "components/capsule/DropBox";
+import {getToken} from "utils/IsLoginUtil";
+import {NoCard} from "components/card/Card";
+import ImagePaddingButton from "components/button/ImagePaddingButton";
 import {
     SearchBarContainer,
     SearchDateContainer,
     SearchDateInput,
     SearchTextInput,
     SearchTitleContainer,
     SearchTitleText
-} from "../../../../components/searchBar/SearchBar";
+} from "components/searchBar/SearchBar";
 
 function SelectOffice(props) {
     const [offices, setOffices] = useState([]);