[Feat] 필터 메뉴 생성 #32

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%;
+      `;
+    }
+  }}
+`;

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';

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;
+`;

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;

src/recoil/map/index.ts

@@ -0,0 +1 @@
+export { default as filterAtom } from './filterAtom';