feat: 모달 키고 끄는 기능 구현 (#41)

- 서치바 버튼 클릭 시 모달이 켜지고 꺼짐
- 아직 모달 영역 바깥을 클릭하면 꺼지는 기능은 구현 못 함

Dae-Hwa/airbnb/#40

FE/fe-airbnb/src/App.tsx

@@ -10,7 +10,6 @@ function App() {
     <ThemeProvider theme={theme}>
       <Header />
       <SearchBar />
-      <CalendarModal />
     </ThemeProvider>
   );
 }

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;

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;

FE/fe-airbnb/src/components/headcount/HeadCountModal.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+function HeadCountModal() {
+  return (
+    <HeadCountContainer>
+      인원 모달
+    </HeadCountContainer>
+  );
+}
+
+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;

FE/fe-airbnb/src/components/price/PriceModal.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+function PriceModal() {
+  return (
+    <PriceModalContainer>
+      요금 모달
+    </PriceModalContainer>
+  );
+}
+
+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;

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<string | null>(null);
+
+  const renderModal = (): ReactElement | void => {
+    switch (selectedBtn) {
+      case SearchBarBtnType.CHECK_IN_OUT:
+        return (
+          <CalendarModal />
+        );
+
+      case SearchBarBtnType.PRICE:
+        return (
+          <PriceModal />
+        );
+
+      case SearchBarBtnType.HEAD_COUNT:
+        return (
+          <HeadCountModal />
+        );
+    }
+  }
+
+  const handleClickSearchBarBtn = (btnType: string): void => {
+    if(selectedBtn === btnType) setSelectedBtn(null);
+    else setSelectedBtn(btnType);
+  }
+
   return (
     <Center>
       <SearchBarContainer>
         <Flex>
-          <SearchBarBtn>
+          <SearchBarBtn onClick={() => handleClickSearchBarBtn(SearchBarBtnType.CHECK_IN_OUT)}>
             <CheckInOut>
               <Flex direction="column">
                 <SearchBarSubTitle>체크인</SearchBarSubTitle>
@@ -22,14 +54,14 @@ function SearchBar() {
             </CheckInOut>
           </SearchBarBtn>
 
-          <SearchBarBtn>
+          <SearchBarBtn onClick={() => handleClickSearchBarBtn(SearchBarBtnType.PRICE)}>
             <Flex direction="column">
                 <SearchBarSubTitle>요금</SearchBarSubTitle>
                 <SelectedContent contentType="placeholder">금액대 설정</SelectedContent>
             </Flex>
           </SearchBarBtn>
 
-          <SearchBarBtn>
+          <SearchBarBtn onClick={() => handleClickSearchBarBtn(SearchBarBtnType.HEAD_COUNT)}>
             <Flex direction="column">
               <SearchBarSubTitle>인원</SearchBarSubTitle>
               <SelectedContent contentType="placeholder">게스트 추가</SelectedContent>
@@ -40,6 +72,8 @@ function SearchBar() {
             <SearchButton size="compact" />
           </SearchButtonContainer>
         </Flex>
+
+        {selectedBtn && renderModal()}
       </SearchBarContainer>
     </Center>
   );
@@ -70,9 +104,6 @@ const CustomSpacer = styled.div`
   width: 24px;
 `
 
-type SelectedContentProps = {
-  contentType: string
-}
 const SelectedContent = styled.div<SelectedContentProps>`
   font-size: ${({theme}) => theme.fontSizes.SM};
   color: ${({contentType, theme}) => contentType === 'placeholder' ? theme.colors.gray2 : theme.colors.black};

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 (
-    <SearchBarBtnContainer>
+    <SearchBarBtnContainer onClick={onClick}>
       {children}
     </SearchBarBtnContainer>
   )
@@ -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 {

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
+}