feat: 지역설정 바텀시트 퍼블리싱

apps/jurumarble/src/app/map/components/MapContainer.tsx

@@ -5,7 +5,10 @@ import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import useDrinksMapService from "../services/useDrinksMapService";
 import { Map, MapMarker } from "react-kakao-maps-sdk";
+import { useToggle } from "@react-hookz/web";
+import RegionBottomSheet from "./RegionBottomsheet";
 const MapContainer = () => {
+  const [on, toggle] = useToggle();
   const mapRef = useRef<kakao.maps.Map>(null);
   const [mapXY, setMapXY] = useState({
     startX: 0,
@@ -45,7 +48,7 @@ const MapContainer = () => {
             <br /> 우리술을 찾아드려요
           </h1>
 
-          <Button variant="primary" height="40px" width="82px">
+          <Button variant="primary" height="40px" width="82px" onClick={toggle}>
             직접 설정
           </Button>
         </SettingWrapper>
@@ -98,6 +101,7 @@ const MapContainer = () => {
           ))}
         </Map>
       </MapBox>
+      <RegionBottomSheet onToggleDrinkSearchModal={toggle} on={on} />
     </Container>
   );
 };

apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx

@@ -0,0 +1,154 @@
+import { Button, Portal } from "components/index";
+import { REGION_LIST } from "lib/constants";
+import { transitions } from "lib/styles";
+import Image from "next/image";
+import React from "react";
+import { SvgIcPrev, SvgIcX } from "src/assets/icons/components";
+import styled, { css } from "styled-components";
+
+interface Props {
+  on: boolean;
+  onToggleDrinkSearchModal: () => void;
+}
+
+const RegionBottomSheet = ({ on, onToggleDrinkSearchModal }: Props) => {
+  if (!on) return null;
+
+  return (
+    <Portal selector="#portal">
+      <BottomSheet>
+        <Inner>
+          <Title>지역 설정</Title>
+          <Exit>
+            <SvgIcX />
+          </Exit>
+
+          <SelectBox>
+            지역을 선택해주세요{" "}
+            <SvgIcPrev
+              style={{
+                transform: "rotate(-90deg)",
+              }}
+            />{" "}
+          </SelectBox>
+          <List>
+            {REGION_LIST.map(({ label, value }) => (
+              <RegionItem>{label}</RegionItem>
+            ))}
+            {REGION_LIST.map(({ label, value }) => (
+              <RegionItem>{label}</RegionItem>
+            ))}
+          </List>
+          <ButtonWrapper>
+            <Button variant="primary" width="100%" height="56px">
+              확인
+            </Button>
+          </ButtonWrapper>
+        </Inner>
+        <Background onClick={onToggleDrinkSearchModal} />
+      </BottomSheet>
+    </Portal>
+  );
+};
+
+const BottomSheet = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+`;
+
+const Inner = styled.div`
+  position: absolute;
+  z-index: 9999;
+  background-color: white;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin: auto;
+  width: 100%;
+  max-width: 720px;
+  height: 90%;
+  animation: ${transitions.popInFromBottom} 0.4s ease-in-out;
+  border-radius: 16px 16px 0px 0px;
+  padding: 26px 20px 20px 20px;
+`;
+
+const Background = styled.div`
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0.4;
+`;
+
+const Title = styled.div`
+  display: flex;
+  ${({ theme }) => css`
+    ${theme.typography.headline03}
+  `}
+  justify-content: center;
+  padding-bottom: 36px;
+`;
+
+const Exit = styled.div`
+  position: absolute;
+  top: 26px;
+  right: 20px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+const SelectBox = styled.div`
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.black_05};
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 16px;
+  color: ${({ theme }) => theme.colors.black_03};
+  ${({ theme }) => theme.typography.button01}
+  gap: 4px;
+  margin-bottom: 8px;
+`;
+
+const List = styled.div`
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.line_01};
+  overflow-y: scroll;
+  height: calc(90% - 134px);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const RegionItem = styled.div`
+  padding: 16px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.black_02};
+  ${({ theme }) => theme.typography.button02}
+  border-bottom: 1px solid ${({ theme }) => theme.colors.line_01};
+  :active {
+    background-color: ${({ theme }) => theme.colors.bg_01};
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 20px;
+`;
+
+export default RegionBottomSheet;