From 0caa3d80ac6cde578b12447ada72d5ddf8ab0069 Mon Sep 17 00:00:00 2001 From: Dami Kim Date: Thu, 27 May 2021 15:22:31 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20=EC=B4=88=EA=B8=B0=EC=84=B8=ED=8C=85?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=A1=B0,?= =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SearchBar/Calendar/Calendar.tsx | 25 ++++-- .../SearchBar/Calendar/CalendarStyles.tsx | 67 +++++++++------- .../components/SearchBar/Guests/Guests.tsx | 2 +- .../SearchBar/RoomPrice/RoomPrice.tsx | 14 +++- .../SearchBar/RoomPrice/RoomPriceModal.tsx | 14 +--- .../src/components/SearchBar/SearchBar.tsx | 78 +++---------------- .../components/SearchBar/SearchBarStyles.tsx | 28 +++++++ .../src/components/common/CancelButton.tsx | 14 +++- frontend/src/image/cancelBtn.svg | 5 ++ frontend/src/image/largeSearchBtn.svg | 6 ++ frontend/src/image/minuse.svg | 4 + frontend/src/image/pluse.svg | 5 ++ frontend/src/image/sliderBtn.svg | 5 ++ frontend/src/image/smallSearchBtn.svg | 5 ++ 14 files changed, 159 insertions(+), 113 deletions(-) create mode 100644 frontend/src/components/SearchBar/SearchBarStyles.tsx create mode 100644 frontend/src/image/cancelBtn.svg create mode 100644 frontend/src/image/largeSearchBtn.svg create mode 100644 frontend/src/image/minuse.svg create mode 100644 frontend/src/image/pluse.svg create mode 100644 frontend/src/image/sliderBtn.svg create mode 100644 frontend/src/image/smallSearchBtn.svg diff --git a/frontend/src/components/SearchBar/Calendar/Calendar.tsx b/frontend/src/components/SearchBar/Calendar/Calendar.tsx index e0faeb5ae..3551b7563 100644 --- 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 ( <> - + + 체크인 + 날짜 입력 + + + + 체크아웃 + 날짜 입력 + + + - ) -} + ); +}; export default Calendar; diff --git a/frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx b/frontend/src/components/SearchBar/Calendar/CalendarStyles.tsx index 4459faf5c..99dd064f1 100644 --- 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,9 +50,10 @@ const CalendarSelector = styled.div` } } } -` +`; const CalendarLayout = styled.div` + outline: red solid 1px; width: 90%; margin: 1rem; padding: 1.5rem; @@ -59,12 +61,13 @@ const CalendarLayout = styled.div` font-weight: 600; display: flex; - .calendar {} -` + .calendar { + } +`; const LeftArrowBtn = styled.button` position: absolute; - left:0; + left: 0; top: 0; width: 2rem; height: 2rem; @@ -72,7 +75,7 @@ const LeftArrowBtn = styled.button` border-radius: 99px; background-color: #fff; - &:hover{ + &:hover { background-color: rgb(247, 247, 247); } @@ -80,7 +83,7 @@ const LeftArrowBtn = styled.button` height: 1.2rem; width: 1.2rem; } -` +`; const RightArrowBtn = styled.button` position: absolute; @@ -92,7 +95,7 @@ const RightArrowBtn = styled.button` border-radius: 99px; background-color: #fff; - &:hover{ + &:hover { background-color: rgb(247, 247, 247); } @@ -100,7 +103,7 @@ const RightArrowBtn = styled.button` height: 1.2rem; width: 1.2rem; } -` +`; const CurrentMonth = styled.div` display: flex; @@ -109,12 +112,12 @@ 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; @@ -122,7 +125,7 @@ const CurrentMonth = styled.div` width: auto; height: 2rem; } -` +`; const NextMonth = styled.div` display: flex; @@ -132,11 +135,11 @@ 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; @@ -144,11 +147,21 @@ const NextMonth = styled.div` 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 index 74bc69374..1c35f0b44 100644 --- a/frontend/src/components/SearchBar/Guests/Guests.tsx +++ b/frontend/src/components/SearchBar/Guests/Guests.tsx @@ -1,5 +1,5 @@ const Guests = () => { - return
; + return
??
; }; export default Guests; diff --git a/frontend/src/components/SearchBar/RoomPrice/RoomPrice.tsx b/frontend/src/components/SearchBar/RoomPrice/RoomPrice.tsx index ae0ad2177..22184bad0 100644 --- 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
; + return ( + <> + + 요금 + 100,000~1,000,000 + {/* */} + + + + ); }; export default RoomPrice; diff --git a/frontend/src/components/SearchBar/RoomPrice/RoomPriceModal.tsx b/frontend/src/components/SearchBar/RoomPrice/RoomPriceModal.tsx index 6c2114a68..3329c0d66 100644 --- 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
; +}; -function RoomPriceModal() { - return ( -
- -
- ) -} - -export default RoomPriceModal +export default RoomPriceModal; diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx index 3709a25ca..de5330cf2 100644 --- 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(initialState.calendar); - const [checkOut, setCheckOut] = useState(initialState.calendar); - const [price, setPrice] = useState(initialState.price); - const [guests, setGuests] = useState(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 ( - - {SEARCH_FILTER.map((type, idx) => ( - - ))} - + + + 검색 - - - ); }; //검색 이라는 글씨를 넣었다 뺐다해야됨 -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 new file mode 100644 index 000000000..712219473 --- /dev/null +++ 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 index bd9ef6bd1..301c15c93 100644 --- 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
; + return ( + + + + ); }; +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 new file mode 100644 index 000000000..144e4de76 --- /dev/null +++ b/frontend/src/image/cancelBtn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/image/largeSearchBtn.svg b/frontend/src/image/largeSearchBtn.svg new file mode 100644 index 000000000..86a4da47a --- /dev/null +++ b/frontend/src/image/largeSearchBtn.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/image/minuse.svg b/frontend/src/image/minuse.svg new file mode 100644 index 000000000..8f8ea5c5c --- /dev/null +++ b/frontend/src/image/minuse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/image/pluse.svg b/frontend/src/image/pluse.svg new file mode 100644 index 000000000..42c01dff3 --- /dev/null +++ b/frontend/src/image/pluse.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/image/sliderBtn.svg b/frontend/src/image/sliderBtn.svg new file mode 100644 index 000000000..686de3cbe --- /dev/null +++ b/frontend/src/image/sliderBtn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/image/smallSearchBtn.svg b/frontend/src/image/smallSearchBtn.svg new file mode 100644 index 000000000..500176325 --- /dev/null +++ b/frontend/src/image/smallSearchBtn.svg @@ -0,0 +1,5 @@ + + + + +