Merge pull request #59 from ghojeong/fe/41/new-search-bar

[FE] search bar toggle 기능 추가
codesquad-members-2021 · May 28, 2021 · 86ae4b5 · 86ae4b5
2 parents 457f728 + c98013c
commit 86ae4b5
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 105 deletions.
diff --git a/frontend/src/components/SearchBar/Calendar/Calendar.tsx b/frontend/src/components/SearchBar/Calendar/Calendar.tsx
@@ -1,23 +1,55 @@
-import CalendarModal from "components/SearchBar/Calendar/CalendarModal";
+import CalendarModal from "./CalendarModal";
 import styled from "styled-components";
 import * as S from "components/SearchBar/SearchBarStyles";
 import CancelButton from "components/common/CancelButton";
+
+import {
+  checkInClickState,
+  checkOutClickState,
+  searchBarClickState,
+} from "recoil/Atoms";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
 const Calendar = () => {
+  const setsSearchBarClick = useSetRecoilState(searchBarClickState);
+  const isCheckInClicked = useRecoilValue(checkInClickState);
+  const isCheckOutClicked = useRecoilValue(checkOutClickState);
+
   return (
     <>
-      <S.SearchBarBox _width="20%" className="check-in">
-        <S.SearchBarTitle>체크인</S.SearchBarTitle>
-        <S.SearchBarText>날짜 입력</S.SearchBarText>
-        <CancelButton />
-      </S.SearchBarBox>
-      <S.SearchBarBox _width="20%" className="check-out">
-        <S.SearchBarTitle>체크아웃</S.SearchBarTitle>
-        <S.SearchBarText>날짜 입력</S.SearchBarText>
-        <CancelButton />
-      </S.SearchBarBox>
-      <CalendarModal />
+      <CalendarLayout>
+        <S.SearchBarBox
+          _width="40%"
+          className="check-in"
+          _clicked={isCheckInClicked}
+          onClick={() => {
+            setsSearchBarClick("IN");
+          }}
+        >
+          <S.SearchBarTitle>체크인</S.SearchBarTitle>
+          <S.SearchBarText>날짜 입력</S.SearchBarText>
+          <CancelButton />
+        </S.SearchBarBox>
+        <S.SearchBarBox
+          _width="50%"
+          className="check-out"
+          _clicked={isCheckOutClicked}
+          onClick={() => {
+            setsSearchBarClick("OUT");
+          }}
+        >
+          <S.SearchBarTitle>체크아웃</S.SearchBarTitle>
+          <S.SearchBarText>날짜 입력</S.SearchBarText>
+          <CancelButton />
+        </S.SearchBarBox>
+      </CalendarLayout>
+      {(isCheckInClicked || isCheckOutClicked) && <CalendarModal />}
     </>
   );
 };
+const CalendarLayout = styled.div`
+  display: flex;
+  width: 60%;
+`;
 
 export default Calendar;
diff --git a/frontend/src/components/SearchBar/Guests/Guests.tsx b/frontend/src/components/SearchBar/Guests/Guests.tsx
@@ -1,5 +1,32 @@
+import { useState } from "react";
+import GuestsModal from "./GuestsModal";
+import * as S from "components/SearchBar/SearchBarStyles";
+import CancelButton from "components/common/CancelButton";
+import { guestsClickState, searchBarClickState } from "recoil/Atoms";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
 const Guests = () => {
-  return <div>??</div>;
+  const setsSearchBarClick = useSetRecoilState(searchBarClickState);
+  const isClicked = useRecoilValue(guestsClickState);
+  const handleClick = () => {
+    setsSearchBarClick("GUESTS");
+  };
+
+  return (
+    <>
+      <S.SearchBarBox
+        _width="30%"
+        className="check-in"
+        _clicked={isClicked}
+        onClick={handleClick}
+      >
+        <S.SearchBarTitle>인원</S.SearchBarTitle>
+        <S.SearchBarText _overFlow={true}>게스트 추가</S.SearchBarText>
+        <CancelButton _right="30%" />
+      </S.SearchBarBox>
+      {isClicked && <GuestsModal />}
+    </>
+  );
 };
 
 export default Guests;
diff --git a/frontend/src/components/SearchBar/Guests/GuestsModal.tsx b/frontend/src/components/SearchBar/Guests/GuestsModal.tsx
@@ -1,11 +1,28 @@
-import React from 'react'
-
+import { CalendarModalLayout } from "components/SearchBar/Calendar/CalendarStyles";
+import React from "react";
+import styled from "styled-components";
+import { guestsClickState, searchBarClickState } from "recoil/Atoms";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 function GuestsModal() {
-    return (
-        <div>
-
-        </div>
-    )
+  const isClicked = useRecoilValue(guestsClickState);
+  return isClicked ? <ModalLayout>디코~~~</ModalLayout> : <></>;
 }
 
-export default GuestsModal
+const ModalLayout = styled.div`
+  position: absolute; //relative는 SearchBarLayout 입니다
+  top: 100%;
+  width: 400px;
+  height: 355px;
+  right: 0;
+  z-index: 1;
+  overflow: hidden;
+  margin-top: 1.2rem;
+  background: #ffffff;
+  box-shadow: rgb(0 0 0 / 20%) 0px 6px 20px;
+  border-radius: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+export default GuestsModal;
diff --git a/frontend/src/components/SearchBar/RoomPrice/RoomPrice.tsx b/frontend/src/components/SearchBar/RoomPrice/RoomPrice.tsx
@@ -1,13 +1,28 @@
 import RoomPriceModal from "components/SearchBar/RoomPrice/RoomPriceModal";
 import * as S from "components/SearchBar/SearchBarStyles";
 import CancelButton from "components/common/CancelButton";
+import { useState } from "react";
+import { roomPriceClickState, searchBarClickState } from "recoil/Atoms";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 const RoomPrice = () => {
+  // const [isClicked, setClick] = useState(false);
+  const setsSearchBarClick = useSetRecoilState(searchBarClickState);
+  const isClicked = useRecoilValue(roomPriceClickState);
+  const handleClick = () => {
+    setsSearchBarClick("PRICE");
+  };
+
   return (
     <>
-      <S.SearchBarBox _width="20%" className="price">
+      <S.SearchBarBox
+        _width="30%"
+        className="price"
+        _clicked={isClicked}
+        onClick={handleClick}
+      >
         <S.SearchBarTitle>요금</S.SearchBarTitle>
         <S.SearchBarText>100,000~1,000,000</S.SearchBarText>
-        {/* <CancelButton /> */}
+        <CancelButton />
       </S.SearchBarBox>
       <RoomPriceModal />
     </>

diff --git a/frontend/src/components/SearchBar/RoomPrice/RoomPriceModal.tsx b/frontend/src/components/SearchBar/RoomPrice/RoomPriceModal.tsx
@@ -1,5 +1,25 @@
+import styled from "styled-components";
+import { roomPriceClickState, searchBarClickState } from "recoil/Atoms";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 const RoomPriceModal = () => {
-  return <div></div>;
+  const isClicked = useRecoilValue(roomPriceClickState);
+  return isClicked ? <ModalLayout>데이지~~</ModalLayout> : <></>;
 };
-
+const ModalLayout = styled.div`
+  position: absolute; //relative는 SearchBarLayout 입니다
+  top: 100%;
+  width: 493px;
+  height: 364px;
+  right: 0;
+  z-index: 1;
+  overflow: hidden;
+  margin-top: 1.2rem;
+  background: #ffffff;
+  box-shadow: rgb(0 0 0 / 20%) 0px 6px 20px;
+  border-radius: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
 export default RoomPriceModal;
diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx
@@ -1,35 +1,47 @@
 import styled from "styled-components";
-import { useState } from "react";
 import Calendar from "components/SearchBar/Calendar/Calendar";
 import Guests from "components/SearchBar/Guests/Guests";
 import RoomPrice from "components/SearchBar/RoomPrice/RoomPrice";
 import { ReactComponent as largeSearchBtn } from "image/largeSearchBtn.svg";
 import { ReactComponent as smallSearchBtn } from "image/smallSearchBtn.svg";
-const initialState = {
-  calendar: { month: 0, date: 0 },
-  price: { min: 0, max: 0 },
-  guests: { guest: 0, toddler: 0 },
-};
-
-enum FilterKind {
-  checkIn = "CHECK_IN",
-  checkOut = "CHECK_OUT",
-  price = "PRICE",
-  guest = "GUESTS",
-}
-const SEARCH_FILTER = ["CHECK_IN", "CHECK_OUT", "PRICE", "GUESTS"];
+import {
+  useRecoilState,
+  useRecoilValue,
+  useResetRecoilState,
+  useSetRecoilState,
+} from "recoil";
+import React, { useState, useEffect } from "react";
+import { searchBarClickState, checkInClickState } from "recoil/Atoms";
 
 const SearchBar = () => {
-  //취소 버튼 눌렀을 때 상태 리셋을 어떻게 할 것인가?
+  // const Reset = useResetRecoilState(searchBarClickState);
+  const setsSearchBarClick = useSetRecoilState(searchBarClickState);
+  const checkInTest = useRecoilValue(checkInClickState);
+
+  useEffect(() => {
+    console.log(checkInTest);
+    if (checkInTest) document.body.addEventListener("click", ClosePopup);
+    return function cleanup() {
+      document.body.removeEventListener("click", ClosePopup);
+    };
+  }, [checkInTest]);
+
+  const ClosePopup = (e: MouseEvent): void => {
+    console.log(33);
+    const target = e.target as HTMLElement;
+    if (!target.closest(".search-bar")) {
+      console.log("Sss");
 
-  //state따로 있는데 reducer함수 같이 써도 되나요..?
+      setsSearchBarClick("RESET"); //recoil reset 으로 바꿀 수 있을 듯
+    }
+  };
   return (
     <SearchBarLayout>
-      <SearchBarContainer>
+      <SearchBarContainer className="search-bar">
         <Calendar />
         <RoomPrice />
         <Guests />
-        <SearchBarButton>검색</SearchBarButton>
+        <SearchBarButton />
       </SearchBarContainer>
     </SearchBarLayout>
   );
@@ -40,6 +52,7 @@ const SearchBarButton = styled(smallSearchBtn)`
   position: absolute;
   right: 1.6rem;
   top: 1.7rem;
+  cursor: pointer;
 `;
 
 const SearchBarContainer = styled.div`
@@ -60,11 +73,16 @@ const SearchBarContainer = styled.div`
 
 const SearchBarLayout = styled.div`
   position: relative; //여기
-  width: 55%;
+  width: 65%;
   display: flex;
   margin: 0 auto;
   flex-direction: column;
   align-items: center;
 `;
 
 export default SearchBar;
+// const initialState = {
+//   calendar: { month: 0, date: 0 },
+//   price: { min: 0, max: 0 },
+//   guests: { guest: 0, toddler: 0 },
+// };
diff --git a/frontend/src/components/SearchBar/SearchBarStyles.tsx b/frontend/src/components/SearchBar/SearchBarStyles.tsx
@@ -1,25 +1,35 @@
 import styled from "styled-components";
 
-type TSearchBarBox = {
-  _width: string;
+type TSearchBar = {
+  _width?: string;
+  _overFlow?: boolean;
+  _clicked?: boolean;
 };
 
 const SearchBarTitle = styled.div`
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: 1.6rem;
-  padding: 0 10%;
 `;
 const SearchBarText = styled.div`
-  padding: 0 10%;
   font-size: 1.6rem;
+  text-overflow: ${(props: TSearchBar) => props._overFlow && "ellipsis"};
+  overflow: ${(props: TSearchBar) => props._overFlow && "hidden"};
+  white-space: ${(props: TSearchBar) => props._overFlow && "noWrap"};
 `;
 
 const SearchBarBox = styled.div`
   position: relative;
-  width: ${(props: TSearchBarBox) => props._width};
-  padding: 1.5rem 2rem;
+  width: ${(props: TSearchBar) => props._width};
+  padding: 1rem 2rem;
   border-radius: 60px;
+  box-shadow: ${(props: TSearchBar) =>
+    props._clicked
+      ? `0px 4px 10px rgba(51, 51, 51, 0.1),
+    0px 0px 4px rgba(51, 51, 51, 0.05)`
+      : ""};
+  cursor: pointer;
+
   :hover {
     background-color: #f5f5f7;
   }

diff --git a/frontend/src/components/common/CancelButton.tsx b/frontend/src/components/common/CancelButton.tsx
@@ -1,17 +1,21 @@
 import { ReactComponent as CancelBtn } from "image/cancelBtn.svg";
 import styled from "styled-components";
-const CancelButton = () => {
+
+const CancelButton = ({ ...props }) => {
   return (
-    <CancelButtonWrap>
+    <CancelButtonWrap _right={props._right}>
       <CancelBtn />
     </CancelButtonWrap>
   );
 };
 
+type TButton = {
+  _right?: number;
+};
 const CancelButtonWrap = styled.div`
   position: absolute;
-  top: 2.5rem;
-  right: 0;
+  top: 2rem;
+  right: ${(props: TButton) => (props._right ? props._right : "10%")};
 `;
 
 export default CancelButton;