From 9b8b3ff401641e0b6b8c2f3d938043d72467ff34 Mon Sep 17 00:00:00 2001
From: Huh Hyeongjun <hhj@devent.kr>
Date: Mon, 24 Feb 2025 14:58:25 +0900
Subject: [PATCH] feat: add next step button

---
 src/components/button/BottomButton.tsx | 41 ++++++++++++++++++++++++++
 src/components/map/Processing.tsx      |  3 ++
 src/components/map/SelectMap.tsx       | 20 ++++++++++---
 src/ui/App.tsx                         | 20 ++++++++++++-
 4 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 src/components/button/BottomButton.tsx
 create mode 100644 src/components/map/Processing.tsx

diff --git a/src/components/button/BottomButton.tsx b/src/components/button/BottomButton.tsx
new file mode 100644
index 0000000..cebf0ea
--- /dev/null
+++ b/src/components/button/BottomButton.tsx
@@ -0,0 +1,41 @@
+import { css } from "@emotion/react";
+import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+
+type ButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export function BottomButton(props: ButtonProps) {
+  return (
+    <button
+      css={css({
+        position: "absolute",
+        zIndex: 9999,
+        right: "2rem",
+        bottom: "2rem",
+        color: "#000000",
+        backgroundColor: "#ffffff96",
+        backdropFilter: "blur(8px)",
+        border: "none",
+        padding: "0.75rem 1.25rem",
+        borderRadius: "8px",
+        fontWeight: "300",
+        fontSize: "14px",
+        outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
+        cursor: "pointer",
+        transition: "0.2s",
+        ":hover": {
+          backgroundColor: "#ebeef0c2",
+        },
+        ":disabled": {
+          backgroundColor: "#ebeef0c2",
+          cursor: "not-allowed",
+        },
+      })}
+      {...props}
+    >
+      {props.children}
+    </button>
+  );
+}
diff --git a/src/components/map/Processing.tsx b/src/components/map/Processing.tsx
new file mode 100644
index 0000000..afbbae0
--- /dev/null
+++ b/src/components/map/Processing.tsx
@@ -0,0 +1,3 @@
+export function ProcessingMap() {
+  return <p>processing</p>;
+}
diff --git a/src/components/map/SelectMap.tsx b/src/components/map/SelectMap.tsx
index e622dad..c7b882f 100644
--- a/src/components/map/SelectMap.tsx
+++ b/src/components/map/SelectMap.tsx
@@ -9,7 +9,13 @@ import L, { LatLng, LatLngBounds } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { css } from "@emotion/react";
 
-function RectangleSelector({ isDrag = true }: { isDrag: boolean }) {
+function RectangleSelector({
+  isDrag = true,
+  onChange,
+}: {
+  isDrag: boolean;
+  onChange: (LatLngBounds: LatLngBounds) => void;
+}) {
   const [bounds, setBounds] = useState<LatLngBounds | null>(null);
   const [firstPoint, setFirstPoint] = useState<LatLng | null>(null);
 
@@ -35,7 +41,7 @@ function RectangleSelector({ isDrag = true }: { isDrag: boolean }) {
     mouseup(e) {
       if (firstPoint) {
         setBounds(new L.LatLngBounds(firstPoint, e.latlng));
-        console.log(firstPoint, e.latlng);
+        onChange(new L.LatLngBounds(firstPoint, e.latlng));
         setFirstPoint(null);
       }
     },
@@ -45,11 +51,17 @@ function RectangleSelector({ isDrag = true }: { isDrag: boolean }) {
   ) : null;
 }
 
-export function MapComponent() {
+export function MapComponent({ onDone }: { onDone: (e) => void }) {
   const [isDrag, setIsDrag] = useState(true);
+
   const handleClickSwitchDrag = () => {
     setIsDrag(!isDrag);
   };
+
+  const handleChangeDone = (e) => {
+    onDone([e._northEast, e._southWest]);
+  };
+
   return (
     <div
       css={css({
@@ -89,7 +101,7 @@ export function MapComponent() {
           attribution='&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        <RectangleSelector isDrag={isDrag} />
+        <RectangleSelector isDrag={isDrag} onChange={handleChangeDone} />
       </MapContainer>
     </div>
   );
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 335f04b..4244bd1 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -5,8 +5,18 @@ import { Title } from "@/components/text/Title";
 import { Description } from "@/components/text/Description";
 import { Column } from "@/components/flex/Column";
 import { MapComponent } from "@/components/map/SelectMap";
+import { useState } from "react";
+import { BottomButton } from "@/components/button/BottomButton";
 
 function App() {
+  const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
+  const handleDone = (e) => {
+    console.log(e);
+    setIsNextButtonDisabled(false);
+  };
+
+  const handleClickNextStep = () => {};
+
   return (
     <div css={css({ height: "100%", width: "100%" })}>
       <FullscreenModal isOpen={true}>
@@ -17,9 +27,17 @@ function App() {
               Tools to create 3D maps based on maps and export them in 3D format
             </Description>
           </Column>
-          <MapComponent></MapComponent>
+          <MapComponent onDone={handleDone}></MapComponent>
         </Column>
       </FullscreenModal>
+
+      <BottomButton
+        disabled={isNextButtonDisabled}
+        onClick={handleClickNextStep}
+      >
+        Next Step
+      </BottomButton>
+
       <Space />
     </div>
   );