From 29721bfb279bceaf0f27cceecd3f72d1c820dd8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Autumn=20=28=EC=A1=B0=ED=99=8D=EB=B9=84=29?= <60209518+dyongdi@users.noreply.github.com> Date: Fri, 28 May 2021 00:10:38 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=ED=82=A4=EA=B3=A0?= =?UTF-8?q?=20=EB=81=84=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=20(#41)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 서치바 버튼 클릭 시 모달이 켜지고 꺼짐 - 아직 모달 영역 바깥을 클릭하면 꺼지는 기능은 구현 못 함 Dae-Hwa/airbnb/#40 --- FE/fe-airbnb/src/App.tsx | 1 - .../src/components/calendar/Calendar.jsx | 10 ----- .../src/components/calendar/CalendarModal.jsx | 2 +- .../components/headcount/HeadCountModal.tsx | 22 +++++++++ .../src/components/price/PriceModal.tsx | 22 +++++++++ .../src/components/searchBar/SearchBar.tsx | 45 ++++++++++++++++--- .../src/components/searchBar/SearchBarBtn.tsx | 8 ++-- .../components/searchBar/searchBarTypes.ts | 9 ++++ 8 files changed, 96 insertions(+), 23 deletions(-) create mode 100644 FE/fe-airbnb/src/components/headcount/HeadCountModal.tsx create mode 100644 FE/fe-airbnb/src/components/price/PriceModal.tsx create mode 100644 FE/fe-airbnb/src/components/searchBar/searchBarTypes.ts diff --git a/FE/fe-airbnb/src/App.tsx b/FE/fe-airbnb/src/App.tsx index 39a8182ff..922e7fceb 100644 --- a/FE/fe-airbnb/src/App.tsx +++ b/FE/fe-airbnb/src/App.tsx @@ -10,7 +10,6 @@ function App() {
- ); } diff --git a/FE/fe-airbnb/src/components/calendar/Calendar.jsx b/FE/fe-airbnb/src/components/calendar/Calendar.jsx index f0357f2dd..1a685aed7 100644 --- a/FE/fe-airbnb/src/components/calendar/Calendar.jsx +++ b/FE/fe-airbnb/src/components/calendar/Calendar.jsx @@ -58,14 +58,4 @@ const Day = styled.td` font-size: ${({ theme }) => theme.fontSizes.XS}; `; -// const SelectedDay = styled.div` -// width: 48px; -// height: 48px; -// background-color: ${({ theme }) => theme.colors.gray4}; -// border-radius: ${({ theme }) => theme.borders.M}; -// display: flex; -// align-items: center; -// justify-content: center; -// `; - export default Calendar; diff --git a/FE/fe-airbnb/src/components/calendar/CalendarModal.jsx b/FE/fe-airbnb/src/components/calendar/CalendarModal.jsx index c9e0a3a36..9abe9251b 100644 --- a/FE/fe-airbnb/src/components/calendar/CalendarModal.jsx +++ b/FE/fe-airbnb/src/components/calendar/CalendarModal.jsx @@ -101,7 +101,7 @@ const Controller = styled.div` const ViewArea = styled.div` width: 100%; - /* overflow: hidden; */ + overflow: hidden; `; export default CalendarModal; diff --git a/FE/fe-airbnb/src/components/headcount/HeadCountModal.tsx b/FE/fe-airbnb/src/components/headcount/HeadCountModal.tsx new file mode 100644 index 000000000..4bb50b7ae --- /dev/null +++ b/FE/fe-airbnb/src/components/headcount/HeadCountModal.tsx @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +function HeadCountModal() { + return ( + + 인원 모달 + + ); +} + +const HeadCountContainer = styled.div` + width: 400px; + height: fit-content; + border-radius: ${({ theme }) => theme.borders.L}; + box-shadow: ${({ theme }) => theme.boxShadow.up2}; + padding: 64px; + margin-top: 16px; + position: absolute; + right: 0; +` + +export default HeadCountModal; diff --git a/FE/fe-airbnb/src/components/price/PriceModal.tsx b/FE/fe-airbnb/src/components/price/PriceModal.tsx new file mode 100644 index 000000000..dbe6bcc48 --- /dev/null +++ b/FE/fe-airbnb/src/components/price/PriceModal.tsx @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +function PriceModal() { + return ( + + 요금 모달 + + ); +} + +const PriceModalContainer = styled.div` + width: 493px; + height: fit-content; + border-radius: ${({ theme }) => theme.borders.L}; + box-shadow: ${({ theme }) => theme.boxShadow.up2}; + padding: 52px 64px; + margin-top: 16px; + position: absolute; + left: 305px; +` + +export default PriceModal; diff --git a/FE/fe-airbnb/src/components/searchBar/SearchBar.tsx b/FE/fe-airbnb/src/components/searchBar/SearchBar.tsx index fb3178b91..5cfb9bb7b 100644 --- a/FE/fe-airbnb/src/components/searchBar/SearchBar.tsx +++ b/FE/fe-airbnb/src/components/searchBar/SearchBar.tsx @@ -1,14 +1,46 @@ -import { Center, Container, Flex, Spacer } from '@chakra-ui/layout'; +import { ReactElement, useState } from 'react'; import styled from 'styled-components'; +import { Center, Flex } from '@chakra-ui/layout'; + +import CalendarModal from '@components/calendar/CalendarModal'; +import HeadCountModal from '@components/headcount/HeadCountModal'; +import PriceModal from '@components/price/PriceModal'; import SearchButton from '../SearchButton'; import SearchBarBtn from './SearchBarBtn'; +import { SearchBarBtnType, SelectedContentProps } from './searchBarTypes'; function SearchBar() { + const [selectedBtn, setSelectedBtn] = useState(null); + + const renderModal = (): ReactElement | void => { + switch (selectedBtn) { + case SearchBarBtnType.CHECK_IN_OUT: + return ( + + ); + + case SearchBarBtnType.PRICE: + return ( + + ); + + case SearchBarBtnType.HEAD_COUNT: + return ( + + ); + } + } + + const handleClickSearchBarBtn = (btnType: string): void => { + if(selectedBtn === btnType) setSelectedBtn(null); + else setSelectedBtn(btnType); + } + return (
- + handleClickSearchBarBtn(SearchBarBtnType.CHECK_IN_OUT)}> 체크인 @@ -22,14 +54,14 @@ function SearchBar() { - + handleClickSearchBarBtn(SearchBarBtnType.PRICE)}> 요금 금액대 설정 - + handleClickSearchBarBtn(SearchBarBtnType.HEAD_COUNT)}> 인원 게스트 추가 @@ -40,6 +72,8 @@ function SearchBar() { + + {selectedBtn && renderModal()}
); @@ -70,9 +104,6 @@ const CustomSpacer = styled.div` width: 24px; ` -type SelectedContentProps = { - contentType: string -} const SelectedContent = styled.div` font-size: ${({theme}) => theme.fontSizes.SM}; color: ${({contentType, theme}) => contentType === 'placeholder' ? theme.colors.gray2 : theme.colors.black}; diff --git a/FE/fe-airbnb/src/components/searchBar/SearchBarBtn.tsx b/FE/fe-airbnb/src/components/searchBar/SearchBarBtn.tsx index e0536e92d..6076bddd0 100644 --- a/FE/fe-airbnb/src/components/searchBar/SearchBarBtn.tsx +++ b/FE/fe-airbnb/src/components/searchBar/SearchBarBtn.tsx @@ -3,11 +3,12 @@ import { ReactElement } from 'react' type SearchBarBtnProps = { children: ReactElement[] | any; + onClick: () => void; } -function SearchBarBtn({children}: SearchBarBtnProps): ReactElement { +function SearchBarBtn({children, onClick}: SearchBarBtnProps): ReactElement { return ( - + {children} ) @@ -16,9 +17,8 @@ function SearchBarBtn({children}: SearchBarBtnProps): ReactElement { const SearchBarBtnContainer = styled.div` display: flex; align-items: center; - padding: 14px 24px; + padding: 15px 24px; width: 100%; - height: 76px; border-radius: ${({theme}) => theme.borders.XL}; &:hover { diff --git a/FE/fe-airbnb/src/components/searchBar/searchBarTypes.ts b/FE/fe-airbnb/src/components/searchBar/searchBarTypes.ts new file mode 100644 index 000000000..151f3d517 --- /dev/null +++ b/FE/fe-airbnb/src/components/searchBar/searchBarTypes.ts @@ -0,0 +1,9 @@ +export enum SearchBarBtnType { + CHECK_IN_OUT = 'check-in-out', + PRICE = 'price', + HEAD_COUNT = 'head-count', +} + +export type SelectedContentProps = { + contentType: string +} \ No newline at end of file