Merge pull request #118 from LikeLionHGU/#109/Detail-yeji

fix: 디자인 디테일 수정

src/atom.js

@@ -20,5 +20,6 @@ export const selectedDateState = atom({
 });
 export const selectedPriceState = atom({
   key: "selectedPrice",
-  default: { min: 0, max: 100000 },
+  default: {},
+  // default: { min: 0, max: 100000 },
 });

src/components/Common/MapCon.jsx

@@ -100,7 +100,7 @@ export default function MapCon() {
 const OverlayWrapper = styled.div`
   background-color: #4aabf9;
   width: 191px;
-  height: 34px;
+  height: 20px;
   border-radius: 10px;
   padding: 11px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

src/components/MainPage/SelectedContentBox.jsx

@@ -1,13 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { useRecoilState } from "recoil";
 import { selectedRegionState } from "../../atom";
 import { selectedSportTypeState } from "../../atom";
 import { selectedDisabilityTypeState } from "../../atom";
 import { selectedDateState } from "../../atom";
 import { selectedPriceState } from "../../atom";
+import { useLocation } from "react-router-dom";
 
 const SelectedContentBox = ({ handleClearSelection, regionOptions = [] }) => {
+  const location = useLocation();
+  const currentPath = location.pathname;
   const [selectedRegion, setsSlectedRegion] =
     useRecoilState(selectedRegionState);
   const [selectedSportType, setSelectedSportType] = useRecoilState(
@@ -35,6 +38,10 @@ const SelectedContentBox = ({ handleClearSelection, regionOptions = [] }) => {
     return mainRegion ? mainRegion.name : null;
   };
 
+  useEffect(() => {
+    if (currentPath === "/") setSelectedPrice({});
+  }, []);
+
   return (
     <>
       {selectedRegion.map((item, index) => {
@@ -88,11 +95,13 @@ const SelectedContentBox = ({ handleClearSelection, regionOptions = [] }) => {
           </ClearButton>
         </SelectedContent>
       ))}
-      <SelectedPriceContent>
-        <Hashtag>#</Hashtag>
-        {selectedPrice.min.toLocaleString()}원 ~{" "}
-        {selectedPrice.max.toLocaleString()}원
-      </SelectedPriceContent>
+      {selectedPrice.min !== undefined && selectedPrice.max !== undefined && (
+        <SelectedPriceContent>
+          <Hashtag>#</Hashtag>
+          {selectedPrice.min.toLocaleString()}원 ~{" "}
+          {selectedPrice.max.toLocaleString()}원
+        </SelectedPriceContent>
+      )}
     </>
   );
 };