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

[FE] chore: 초기세팅 컴포넌트 구조, 이미지 추가
codesquad-members-2021 · May 27, 2021 · 8435557 · 8435557
2 parents 677ac5d + 0caa3d8
commit 8435557
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 113 deletions.
diff --git a/frontend/src/components/SearchBar/Calendar/Calendar.tsx b/frontend/src/components/SearchBar/Calendar/Calendar.tsx
@@ -1,12 +1,23 @@
-import React from 'react'
-import CalendarModal from 'components/SearchBar/Calendar/CalendarModal';
-
-function Calendar() {
+import CalendarModal from "components/SearchBar/Calendar/CalendarModal";
+import styled from "styled-components";
+import * as S from "components/SearchBar/SearchBarStyles";
+import CancelButton from "components/common/CancelButton";
+const Calendar = () => {
   return (
     <>
-      <CalendarModal/>
+      <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 />
     </>
-  )
-}
+  );
+};
 
 export default Calendar;
diff --git a/frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx b/frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx
@@ -1,12 +1,13 @@
 import styled from "styled-components";
-import { RiArrowLeftSLine } from 'react-icons/ri';
-import { RiArrowRightSLine } from 'react-icons/ri';
+import { RiArrowLeftSLine } from "react-icons/ri";
+import { RiArrowRightSLine } from "react-icons/ri";
 
 const CalendarModalLayout = styled.div`
+  position: absolute; //relative는 SearchBarLayout 입니다
+  top: 100%;
   width: 100%;
   right: 0;
   left: 0;
-  top: 100%;
   z-index: 1;
   overflow: hidden;
   margin-top: 1.2rem;
@@ -49,38 +50,40 @@ const CalendarSelector = styled.div`
       }
     }
   }
-`
+`;
 
 const CalendarLayout = styled.div`
+  outline: red solid 1px;
   width: 90%;
   margin: 1rem;
   padding: 1.5rem;
   font-size: 1rem;
   font-weight: 600;
   display: flex;
 
-  .calendar {}
-`
+  .calendar {
+  }
+`;
 
 const LeftArrowBtn = styled.button`
   position: absolute;
-  left:0;
+  left: 0;
   top: 0;
   width: 2rem;
   height: 2rem;
   border: none;
   border-radius: 99px;
   background-color: #fff;
 
-  &:hover{
+  &:hover {
     background-color: rgb(247, 247, 247);
   }
 
   & > svg {
     height: 1.2rem;
     width: 1.2rem;
   }
-`
+`;
 
 const RightArrowBtn = styled.button`
   position: absolute;
@@ -92,15 +95,15 @@ const RightArrowBtn = styled.button`
   border-radius: 99px;
   background-color: #fff;
 
-  &:hover{
+  &:hover {
     background-color: rgb(247, 247, 247);
   }
 
   & > svg {
     height: 1.2rem;
     width: 1.2rem;
   }
-`
+`;
 
 const CurrentMonth = styled.div`
   display: flex;
@@ -109,20 +112,20 @@ const CurrentMonth = styled.div`
   text-align: center;
   flex-direction: column;
 
-    &:first-child {
-        position: relative;
-        display: flex;
-        border: 1px solid pink;
-        align-items: center;
-    }
+  &:first-child {
+    position: relative;
+    display: flex;
+    border: 1px solid pink;
+    align-items: center;
+  }
 
   .year_and_month {
     padding-top: 0.5rem;
     margin: 0 auto;
     width: auto;
     height: 2rem;
   }
-`
+`;
 
 const NextMonth = styled.div`
   display: flex;
@@ -132,23 +135,33 @@ const NextMonth = styled.div`
   flex-direction: column;
 
   &:last-child {
-        position: relative;
-        display: flex;
-        border: 1px solid pink;
-        align-items: center;
-    }
+    position: relative;
+    display: flex;
+    border: 1px solid pink;
+    align-items: center;
+  }
 
   .year_and_month {
     padding-top: 0.5rem;
     margin: 0 auto;
     width: auto;
     height: 2rem;
   }
-`
+`;
 const CalendarMatrix = styled.div`
   border: 1px solid blue;
   width: 100%;
-`
-
-export { CalendarModalLayout, CalendarSelector, CalendarLayout, LeftArrowBtn, RightArrowBtn, CurrentMonth, NextMonth, CalendarMatrix, RiArrowLeftSLine, RiArrowRightSLine };
+`;
 
+export {
+  CalendarModalLayout,
+  CalendarSelector,
+  CalendarLayout,
+  LeftArrowBtn,
+  RightArrowBtn,
+  CurrentMonth,
+  NextMonth,
+  CalendarMatrix,
+  RiArrowLeftSLine,
+  RiArrowRightSLine,
+};
diff --git a/frontend/src/components/SearchBar/Guests/Guests.tsx b/frontend/src/components/SearchBar/Guests/Guests.tsx
@@ -1,5 +1,5 @@
 const Guests = () => {
-  return <div></div>;
+  return <div>??</div>;
 };
 
 export default Guests;
diff --git a/frontend/src/components/SearchBar/RoomPrice/RoomPrice.tsx b/frontend/src/components/SearchBar/RoomPrice/RoomPrice.tsx
@@ -1,5 +1,17 @@
+import RoomPriceModal from "components/SearchBar/RoomPrice/RoomPriceModal";
+import * as S from "components/SearchBar/SearchBarStyles";
+import CancelButton from "components/common/CancelButton";
 const RoomPrice = () => {
-  return <div></div>;
+  return (
+    <>
+      <S.SearchBarBox _width="20%" className="price">
+        <S.SearchBarTitle>요금</S.SearchBarTitle>
+        <S.SearchBarText>100,000~1,000,000</S.SearchBarText>
+        {/* <CancelButton /> */}
+      </S.SearchBarBox>
+      <RoomPriceModal />
+    </>
+  );
 };
 
 export default RoomPrice;
diff --git a/frontend/src/components/SearchBar/RoomPrice/RoomPriceModal.tsx b/frontend/src/components/SearchBar/RoomPrice/RoomPriceModal.tsx
@@ -1,11 +1,5 @@
-import React from 'react'
+const RoomPriceModal = () => {
+  return <div></div>;
+};
 
-function RoomPriceModal() {
-    return (
-        <div>
-
-        </div>
-    )
-}
-
-export default RoomPriceModal
+export default RoomPriceModal;
diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx
@@ -3,17 +3,8 @@ 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 SearchFilter from "components/SearchBar/SearchFilter";
-
-type State = {
-  //질문 : 이렇게 통째로 type 정의해서 써도 괜찮나요? 분리해야 하나요?
-  month?: number;
-  date?: number;
-  min?: number;
-  max?: number;
-  guest?: number;
-  toddler?: number;
-};
+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 },
@@ -30,75 +21,29 @@ const SEARCH_FILTER = ["CHECK_IN", "CHECK_OUT", "PRICE", "GUESTS"];
 
 const SearchBar = () => {
   //취소 버튼 눌렀을 때 상태 리셋을 어떻게 할 것인가?
-  const [checkIn, setCheckIn] = useState<State>(initialState.calendar);
-  const [checkOut, setCheckOut] = useState<State>(initialState.calendar);
-  const [price, setPrice] = useState<State>(initialState.price);
-  const [guests, setGuests] = useState<State>(initialState.guests);
 
-  const getFilterState = (type: string) => {
-    switch (type) {
-      case FilterKind.checkIn:
-        return checkIn;
-      case FilterKind.checkOut:
-        return checkOut;
-      case FilterKind.price:
-        return price;
-      case FilterKind.guest:
-        return guests;
-      default:
-        throw new Error("Unhandled Filter Type");
-    }
-  };
   //state따로 있는데 reducer함수 같이 써도 되나요..?
   return (
     <SearchBarLayout>
       <SearchBarContainer>
-        <SearchBarDiv>
-          {SEARCH_FILTER.map((type, idx) => (
-            <SearchFilter
-              key={`filter-${idx}`}
-              filterType={type}
-              filterState={getFilterState(type)}
-            />
-          ))}
-        </SearchBarDiv>
+        <Calendar />
+        <RoomPrice />
+        <Guests />
         <SearchBarButton>검색</SearchBarButton>
       </SearchBarContainer>
-      <Calendar />
-      <RoomPrice />
-      <Guests />
     </SearchBarLayout>
   );
 };
 //검색 이라는 글씨를 넣었다 뺐다해야됨
 
-const SearchBarDiv = styled.div`
-  display: flex;
-  justify-content: space-between;
-
-  width: 100%;
-  position: relative;
-`;
-const SearchBarButton = styled.button`
+const SearchBarButton = styled(smallSearchBtn)`
   position: absolute;
-  right: 0;
-  top: 20%;
-  width: 10%;
-  padding: 8px 16px 8px 8px;
-  /* width: 90px; */
-  height: 42px;
-
-  background: #e84c60;
-  color: white;
-  font-weight: bold;
-  font-size: 1.2rem;
-  border: none;
-  border-radius: 30px;
-  margin: 0 1%;
+  right: 1.6rem;
+  top: 1.7rem;
 `;
 
 const SearchBarContainer = styled.div`
-  position: relative;
+  position: relative; //여기
   display: flex;
   width: 100%;
   height: 76px;
@@ -114,11 +59,12 @@ const SearchBarContainer = styled.div`
 `;
 
 const SearchBarLayout = styled.div`
-  width: 916px;
+  position: relative; //여기
+  width: 55%;
   display: flex;
   margin: 0 auto;
   flex-direction: column;
   align-items: center;
-`
+`;
 
 export default SearchBar;
diff --git a/frontend/src/components/SearchBar/SearchBarStyles.tsx b/frontend/src/components/SearchBar/SearchBarStyles.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+type TSearchBarBox = {
+  _width: string;
+};
+
+const SearchBarTitle = styled.div`
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  padding: 0 10%;
+`;
+const SearchBarText = styled.div`
+  padding: 0 10%;
+  font-size: 1.6rem;
+`;
+
+const SearchBarBox = styled.div`
+  position: relative;
+  width: ${(props: TSearchBarBox) => props._width};
+  padding: 1.5rem 2rem;
+  border-radius: 60px;
+  :hover {
+    background-color: #f5f5f7;
+  }
+`;
+
+export { SearchBarTitle, SearchBarText, SearchBarBox };
diff --git a/frontend/src/components/common/CancelButton.tsx b/frontend/src/components/common/CancelButton.tsx
@@ -1,5 +1,17 @@
+import { ReactComponent as CancelBtn } from "image/cancelBtn.svg";
+import styled from "styled-components";
 const CancelButton = () => {
-  return <div></div>;
+  return (
+    <CancelButtonWrap>
+      <CancelBtn />
+    </CancelButtonWrap>
+  );
 };
 
+const CancelButtonWrap = styled.div`
+  position: absolute;
+  top: 2.5rem;
+  right: 0;
+`;
+
 export default CancelButton;
diff --git a/frontend/src/image/cancelBtn.svg b/frontend/src/image/cancelBtn.svg