diff --git a/src/App.js b/src/App.js index 963c57c..099b8fa 100644 --- a/src/App.js +++ b/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() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/assets/images/AddImage.svg b/src/assets/images/AddImage.svg deleted file mode 100644 index 2e0553f..0000000 --- a/src/assets/images/AddImage.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/Location.svg b/src/assets/images/Location.svg new file mode 100644 index 0000000..b3528f6 --- /dev/null +++ b/src/assets/images/Location.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/button/searchButton.png b/src/assets/images/button/searchButton.png deleted file mode 100644 index e04840a..0000000 Binary files a/src/assets/images/button/searchButton.png and /dev/null differ diff --git a/src/assets/images/example.png b/src/assets/images/example.png deleted file mode 100644 index 4a51916..0000000 Binary files a/src/assets/images/example.png and /dev/null differ diff --git a/src/assets/images/login/done.png b/src/assets/images/login/done.png deleted file mode 100644 index de030c9..0000000 Binary files a/src/assets/images/login/done.png and /dev/null differ diff --git a/src/assets/images/login/hide.png b/src/assets/images/login/hide.png deleted file mode 100644 index 8e6eee8..0000000 Binary files a/src/assets/images/login/hide.png and /dev/null differ diff --git a/src/assets/images/login/notDone.png b/src/assets/images/login/notDone.png deleted file mode 100644 index 13631f9..0000000 Binary files a/src/assets/images/login/notDone.png and /dev/null differ diff --git a/src/assets/images/login/view.png b/src/assets/images/login/view.png deleted file mode 100644 index cd85171..0000000 Binary files a/src/assets/images/login/view.png and /dev/null differ diff --git a/src/assets/images/selectOffice/date.png b/src/assets/images/selectOffice/date.png deleted file mode 100644 index febddb7..0000000 Binary files a/src/assets/images/selectOffice/date.png and /dev/null differ diff --git a/src/assets/images/selectOffice/date@2x.png b/src/assets/images/selectOffice/date@2x.png deleted file mode 100644 index 2d00e16..0000000 Binary files a/src/assets/images/selectOffice/date@2x.png and /dev/null differ diff --git a/src/assets/images/selectOffice/date@3x.png b/src/assets/images/selectOffice/date@3x.png deleted file mode 100644 index e880f64..0000000 Binary files a/src/assets/images/selectOffice/date@3x.png and /dev/null differ diff --git a/src/assets/images/selectOffice/search.png b/src/assets/images/selectOffice/search.png deleted file mode 100644 index dca4af8..0000000 Binary files a/src/assets/images/selectOffice/search.png and /dev/null differ diff --git a/src/assets/images/selectOffice/search@2x.png b/src/assets/images/selectOffice/search@2x.png deleted file mode 100644 index c54b04f..0000000 Binary files a/src/assets/images/selectOffice/search@2x.png and /dev/null differ diff --git a/src/assets/images/selectOffice/search@3x.png b/src/assets/images/selectOffice/search@3x.png deleted file mode 100644 index 0fc152d..0000000 Binary files a/src/assets/images/selectOffice/search@3x.png and /dev/null differ diff --git a/src/assets/images/selectOffice/toggle.png b/src/assets/images/selectOffice/toggle.png deleted file mode 100644 index acbd889..0000000 Binary files a/src/assets/images/selectOffice/toggle.png and /dev/null differ diff --git a/src/assets/images/selectOffice/toggle@2x.png b/src/assets/images/selectOffice/toggle@2x.png deleted file mode 100644 index 0cca365..0000000 Binary files a/src/assets/images/selectOffice/toggle@2x.png and /dev/null differ diff --git a/src/assets/images/selectOffice/toggle@3x.png b/src/assets/images/selectOffice/toggle@3x.png deleted file mode 100644 index 6c32fd4..0000000 Binary files a/src/assets/images/selectOffice/toggle@3x.png and /dev/null differ diff --git a/src/assets/images/setting.png b/src/assets/images/setting.png deleted file mode 100644 index b22fa6c..0000000 Binary files a/src/assets/images/setting.png and /dev/null differ diff --git a/src/assets/images/button/triple_dot_icon.svg b/src/assets/images/triple_dot_icon.svg similarity index 100% rename from src/assets/images/button/triple_dot_icon.svg rename to src/assets/images/triple_dot_icon.svg diff --git a/src/assets/images/triple_dot_icon_black.svg b/src/assets/images/triple_dot_icon_black.svg new file mode 100644 index 0000000..05ecd79 --- /dev/null +++ b/src/assets/images/triple_dot_icon_black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/capsule/Capsule.js b/src/components/capsule/Capsule.js index f9abb62..3847ac9 100644 --- a/src/components/capsule/Capsule.js +++ b/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; \ No newline at end of file +export default Capsule; + +export function MiniCapsule(props) { + return ( + <> + {props.color === "white" ? + {props.text} : + {props.text}} + + ); +} \ No newline at end of file diff --git a/src/components/card/Card.js b/src/components/card/Card.js index fdd3483..28e3eb4 100644 --- a/src/components/card/Card.js +++ b/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; ` \ No newline at end of file diff --git a/src/components/card/EquipmentInfo.js b/src/components/card/EquipmentInfo.js new file mode 100644 index 0000000..64a5635 --- /dev/null +++ b/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 ( + + + + {props.name} + {props.quantity}개 + + + + + + + + + + + {props.keeper}({props.contact}) + + + + {props.location} + + + + {props.description} + + + ); +} + +export default EquipmentInfo; \ No newline at end of file diff --git a/src/components/card/OfficeInfo.js b/src/components/card/OfficeInfo.js index f2ca572..88cc124 100644 --- a/src/components/card/OfficeInfo.js +++ b/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"; // 수용인원 컨테이너 diff --git a/src/components/searchBar/SearchBar.js b/src/components/searchBar/SearchBar.js index b55b852..5fa7b83 100644 --- a/src/components/searchBar/SearchBar.js +++ b/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 ( - - {/*// 예약 가능한 회의실 검색*/} - {/*// */} - {/*// */} - {/*// ~*/} - {/*// */} - {/*// */} - - ); -} - -export default SearchBar; \ No newline at end of file +` \ No newline at end of file diff --git a/src/pages/admin/car/CarManageDetail.js b/src/pages/admin/car/CarManageDetail.js index 7159f60..e4ebaad 100644 --- a/src/pages/admin/car/CarManageDetail.js +++ b/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"; diff --git a/src/pages/admin/office/OfficeManageDetail.js b/src/pages/admin/office/OfficeManageDetail.js index b270c4d..1c05bd1 100644 --- a/src/pages/admin/office/OfficeManageDetail.js +++ b/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"; diff --git a/src/pages/admin/resource/ResourceManageDetail.js b/src/pages/admin/resource/ResourceManageDetail.js index 1420e9d..deb604f 100644 --- a/src/pages/admin/resource/ResourceManageDetail.js +++ b/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"; diff --git a/src/pages/basic/booking/office/SelectOffice.js b/src/pages/basic/booking/office/SelectOffice.js index a2e92a8..026850d 100644 --- a/src/pages/basic/booking/office/SelectOffice.js +++ b/src/pages/basic/booking/office/SelectOffice.js @@ -3,12 +3,11 @@ 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, @@ -16,7 +15,7 @@ import { SearchTextInput, SearchTitleContainer, SearchTitleText -} from "../../../../components/searchBar/SearchBar"; +} from "components/searchBar/SearchBar"; function SelectOffice(props) { const [offices, setOffices] = useState([]); diff --git a/src/pages/basic/equipment/EquipmentList.js b/src/pages/basic/equipment/EquipmentList.js new file mode 100644 index 0000000..7753c0a --- /dev/null +++ b/src/pages/basic/equipment/EquipmentList.js @@ -0,0 +1,90 @@ +import React, {useEffect, useRef, useState} from "react"; +import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer"; +import {EquipmentsAxios} from "api/AxiosApi"; +import {basicError} from 'utils/ErrorHandlerUtil'; +import {getToken} from "utils/IsLoginUtil"; +import {NoCard} from "components/card/Card"; +import {SearchBarContainer, SearchTextInputNoMargin} from "components/searchBar/SearchBar"; +import EquipmentInfo from "../../../components/card/EquipmentInfo"; +import styled from "styled-components"; +import SearchButtonImage from "../../../assets/images/SearchPlus.svg"; +import {ManageAddButton, ManageAddButtonImage} from "../../../components/searchBar/ManageSearchBar"; + +const CardList = styled.div` + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +` + +const Container = styled(WhiteContainer)` + padding: 15px; + box-sizing: border-box; +` + +function EquipmentList(props) { + const searchWord = useRef(""); + const [equipments, setEquipments] = useState([]); + + const changeSearchWord = (e) => { + searchWord.current = e.target.value; + searchEquipment() + }; + + const enterSearchWord = (e) => { + if (e.key === 'Enter') { + searchEquipment() + } + }; + + const searchEquipment = () => { + EquipmentsAxios.get(`?cond=${searchWord.current}`, { + headers: { + Authorization: getToken() + } + }) + .then((Response) => { + setEquipments(Response.data.data.content) + }) + .catch((error) => { + basicError(error) + }) + } + + useEffect(() => { + searchEquipment(); + }, []); + + + return ( + + 비품 내역 + + + + + 신규 비품 추가 + + + + + {equipments.length === 0 ? 비품 내역이 없습니다. : equipments.map((equipment) => + )} + + + + ); +} + +export default EquipmentList;