From 084615608771333deee10c0a7b416d871e4c2c01 Mon Sep 17 00:00:00 2001
From: soonki-98 <alstnsrl98@gmail.com>
Date: Sun, 27 Nov 2022 17:11:27 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=ED=95=84=ED=84=B0=20=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=20=EC=83=9D=EC=84=B1=20#32?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/map/FilterMenu.tsx | 47 +++++++++++++++++++++++++
 src/components/pages/map/index.ts       |  1 +
 src/pages/map/index.tsx                 | 18 ++++++++--
 src/recoil/map/filterAtom.ts            | 12 +++++++
 src/recoil/map/index.ts                 |  1 +
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/components/pages/map/FilterMenu.tsx
 create mode 100644 src/recoil/map/filterAtom.ts
 create mode 100644 src/recoil/map/index.ts

diff --git a/src/components/pages/map/FilterMenu.tsx b/src/components/pages/map/FilterMenu.tsx
new file mode 100644
index 0000000..b80b042
--- /dev/null
+++ b/src/components/pages/map/FilterMenu.tsx
@@ -0,0 +1,47 @@
+import { filterAtom } from '@recoil/map';
+import { useEffect, useRef } from 'react';
+import { useRecoilState } from 'recoil';
+import styled, { css } from 'styled-components';
+
+function FilterMenu() {
+  const [filterState, setFilterState] = useRecoilState(filterAtom);
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  const closeFilter = (e: MouseEvent) => {
+    if (!filterRef.current) return;
+    if (filterState.isOpen && !filterRef.current.contains(e.target as HTMLElement)) {
+      setFilterState({ ...filterState, isOpen: false });
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', closeFilter);
+    return () => document.removeEventListener('click', closeFilter);
+  }, [filterState.isOpen]);
+  return <Wrapper {...filterState} ref={filterRef}></Wrapper>;
+}
+
+export default FilterMenu;
+
+const Wrapper = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 80vh;
+  background-color: #fff;
+  z-index: 500;
+  transition: 0.5s;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 16px 16px 0px 0px;
+  ${({ isOpen }) => {
+    if (isOpen) {
+      return css`
+        bottom: 0;
+      `;
+    } else {
+      return css`
+        bottom: -100%;
+      `;
+    }
+  }}
+`;
diff --git a/src/components/pages/map/index.ts b/src/components/pages/map/index.ts
index 714bb81..960036b 100644
--- a/src/components/pages/map/index.ts
+++ b/src/components/pages/map/index.ts
@@ -4,3 +4,4 @@ export { default as Category } from './Category';
 export { default as CurrentLocationButton } from './CurrentLocationButton';
 export { default as Header } from './Header';
 export { default as Marker } from './MapMarker';
+export { default as FilterMenu } from './FilterMenu';
diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx
index 0c6f1b3..f9b27db 100644
--- a/src/pages/map/index.tsx
+++ b/src/pages/map/index.tsx
@@ -1,13 +1,16 @@
 import dynamic from 'next/dynamic';
-import { CustomOverlayMap, Map, MapMarker } from 'react-kakao-maps-sdk';
+import { Map } from 'react-kakao-maps-sdk';
 import styled from 'styled-components';
 import { BottomMenu } from '@components/common';
 import { CommonWrapper } from '@components/common/commonStyle';
-import { Marker, CurrentLocationButton, Error, Header } from '@components/pages/map';
+import { Marker, CurrentLocationButton, Error, Header, FilterMenu } from '@components/pages/map';
 import { useMap } from '@hooks/pages/map';
+import { useRecoilValue } from 'recoil';
+import { filterAtom } from '@recoil/map';
 
 function MapPage() {
   const { barList, mapInfo, myLocation, handleBoundsChanged, handleClickCurrentLocation } = useMap();
+  const filterState = useRecoilValue(filterAtom);
 
   if (!mapInfo || !myLocation) {
     return <Error />;
@@ -22,7 +25,9 @@ function MapPage() {
           <Marker latitude={myLocation.coords.latitude} longitude={myLocation.coords.longitude} name="현위치" />
           <CurrentLocationButton onClick={handleClickCurrentLocation} />
           <BottomMenu />
+          <FilterMenu />
         </StyledMap>
+        {filterState.isOpen && <Shadow />}
       </CommonWrapper>
     );
   }
@@ -34,3 +39,12 @@ const StyledMap = styled(Map)`
   height: 100%;
   width: 100%;
 `;
+
+const Shadow = styled.div`
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 400;
+  background-color: #787878c3;
+`;
diff --git a/src/recoil/map/filterAtom.ts b/src/recoil/map/filterAtom.ts
new file mode 100644
index 0000000..68eac50
--- /dev/null
+++ b/src/recoil/map/filterAtom.ts
@@ -0,0 +1,12 @@
+import { atom } from 'recoil';
+
+const filterAtom = atom({
+  key: 'filterAtom',
+  default: {
+    isOpen: false,
+    moodTag: null,
+    drinkTag: null,
+  },
+});
+
+export default filterAtom;
diff --git a/src/recoil/map/index.ts b/src/recoil/map/index.ts
new file mode 100644
index 0000000..2b2a5d3
--- /dev/null
+++ b/src/recoil/map/index.ts
@@ -0,0 +1 @@
+export { default as filterAtom } from './filterAtom';