refactor: 요금 필터 range slider 수정

#45
codesquad-member-2020 · Jun 4, 2020 · 1f74dab · 1f74dab
1 parent cb957fc
commit 1f74dab
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 68 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -7,7 +7,7 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap"
       rel="stylesheet"
     />
-    <title>Document</title>
+    <title>Airbnb</title>
   </head>
 
   <body>

diff --git a/client/src/components/SearchForm/AirbnbSlider.jsx b/client/src/components/SearchForm/AirbnbSlider.jsx
diff --git a/client/src/components/SearchForm/FormPrice.jsx b/client/src/components/SearchForm/FormPrice.jsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { reset, save } from '../../modules/price';
-// import Slider from '@material-ui/core/Slider';
-// import { withStyles } from '@material-ui/core/styles';
-import AirbnbThumbComponent, { AirbnbSlider } from './AirbnbSlider';
 import styled from 'styled-components';
 
+import Slider from '@material-ui/core/Slider';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+
 const SliderWrap = styled.div`
   padding: 50px 30% 20px;
 `;
@@ -73,18 +74,27 @@ const FormPrice = () => {
     );
   };
 
+  const theme = createMuiTheme({
+    palette: {
+      primary: {
+        main: '#000',
+      },
+    },
+  });
+
   return (
     <>
       <SliderWrap>
-        <AirbnbSlider
+      <ThemeProvider theme={theme}>
+        <Slider
           value={priceRange}
-          onChange={handleChange}
           min={0}
           max={500}
+          onChange={handleChange}
           valueLabelDisplay="on"
-          aria-labelledby="range-slider"
-          // ThumbComponent={AirbnbThumbComponent}
+          valueLabelFormat={value => `$${value}`}
         />
+      </ThemeProvider>
       </SliderWrap>
       <ResetBtn onClick={onReset}>초기화</ResetBtn>
       <SaveBtn onClick={onSave}>저장</SaveBtn>

diff --git a/client/src/components/SearchForm/SearchButtons.jsx b/client/src/components/SearchForm/SearchButtons.jsx
@@ -45,8 +45,10 @@ const SearchButton = ({ formType, onOpenForm, title, text, viewContents }) => {
 const SearchButtons = ({ onOpenForm, viewContents }) => {
   const { checkInDate, checkOutDate } = useSelector(state => state.date);
   const { totalGuest, infants } = useSelector(state => state.guest);
+  const { priceMin, priceMax } = useSelector(state => state.price);
   const dateCompleted = `${checkInDate} ~ ${checkOutDate}`;
   const infantsMessage = infants ? `, 유아 ${infants}명` : '';
+  const priceCompleted = `$${priceMin} ~ $${priceMax}`;
   return (
     <SearchButtonDiv>
       <SearchButton
@@ -63,7 +65,12 @@ const SearchButtons = ({ onOpenForm, viewContents }) => {
         text={totalGuest ? `게스트 ${totalGuest}명${infantsMessage} ` : '인원'}
         onOpenForm={onOpenForm}
       />
-      <SearchButton viewContents={viewContents} formType={SEARCH_FORM.TYPE.PRICE} title="요금" text="요금" onOpenForm={onOpenForm} />
+      <SearchButton
+        viewContents={viewContents}
+        formType={SEARCH_FORM.TYPE.PRICE}
+        title="요금"
+        text={priceMax ? (priceMin ? priceCompleted : `최대 $${priceMax}`) : '요금'}
+        onOpenForm={onOpenForm} />    
     </SearchButtonDiv>
   );
 };

diff --git a/client/src/components/SearchHeaders/index.jsx b/client/src/components/SearchHeaders/index.jsx
@@ -68,8 +68,10 @@ const HeadersUtils = styled.div`
 const SearchHeaders = ({ onOpenForm }) => {
   const { checkInDate, checkOutDate } = useSelector(state => state.date);
   const { totalGuest, infants } = useSelector(state => state.guest);
+  const { priceMin, priceMax } = useSelector(state => state.price);
   const dateCompleted = `${checkInDate} ~ ${checkOutDate}`;
   const infantsMessage = infants ? `, 유아 ${infants}명` : '';
+  const priceCompleted = `$${priceMin} ~ $${priceMax}`;
   const onClickDate = () => onOpenForm('date');
   const onClickGuest = () => onOpenForm('guest');
   const onClickPrice = () => onOpenForm('price');
@@ -79,7 +81,7 @@ const SearchHeaders = ({ onOpenForm }) => {
       <HeadersFilterBtn>
         <span onClick={onClickDate}>{checkInDate ? (checkOutDate ? dateCompleted : checkInDate) : '날짜'}</span>
         <span onClick={onClickGuest}>{totalGuest ? `게스트 ${totalGuest}명${infantsMessage} ` : '인원'}</span>
-        <span onClick={onClickPrice}>요금</span>
+        <span onClick={onClickPrice}>{priceMax ? (priceMin ? priceCompleted : `최대 $${priceMax}`) : '요금'}</span>
       </HeadersFilterBtn>
       <HeadersUtils>
         <a href="#">도움말</a>

diff --git a/client/src/containers/SearchListContainer.jsx b/client/src/containers/SearchListContainer.jsx
@@ -4,9 +4,7 @@ import useAsync from '../utils/useAsync';
 import { URL } from '../constants/url';
 import SearchTitle from '../components/SearchList/SearchTitle';
 import SearchList from '../components/SearchList';
-import { useDispatch, useSelector } from "react-redux"
-// import { getPriceDistribution } from '../modules/price';
-
+import { useSelector } from "react-redux"
 
 const SearchListWrapDiv = styled.div``;
 const SearchListInnerDiv = styled.div`
@@ -47,9 +45,6 @@ const SearchListContainer = () => {
 
   const { totalCount, priceDistribution, accommodations } = data.data;
 
-  // const dispatch = useDispatch();
-  // dispatch(getPriceDistribution(priceDistribution));
-
   return (
     <SearchListWrapDiv>
       <SearchListInnerDiv>