feat: warning too big

package.json

@@ -14,6 +14,7 @@
     "@react-three/drei": "^10.0.2",
     "@react-three/fiber": "^9.0.4",
     "@types/three": "^0.173.0",
+    "deventds2": "^0.1.10",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",

src/components/button/BottomButton.tsx

@@ -82,3 +82,36 @@ export function PrevButton(props: ButtonProps) {
     </button>
   );
 }
+
+export function Button(props: ButtonProps) {
+  return (
+    <button
+      css={css({
+        zIndex: 9999,
+        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",
+        display: props.isShow ? "" : "none",
+        gap: "0.5rem",
+        ":hover": {
+          backgroundColor: "#ebeef0c2",
+        },
+        ":disabled": {
+          backgroundColor: "#ebeef0c2",
+          cursor: "not-allowed",
+        },
+      })}
+      {...props}
+    >
+      {props.children}
+    </button>
+  );
+}

src/components/modal/Modal.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+
+import { css, keyframes } from "@emotion/react";
+
+type ModalType = {
+  children?: any;
+  onClose?: any;
+  isOpen?: boolean;
+  isScroll?: boolean;
+};
+
+const fadeInBackground = keyframes`
+0% {
+    backdrop-filter: brightness(100%)
+
+}
+  100% {
+    backdrop-filter: brightness(70%)
+  }
+`;
+
+const fadeOutBackground = keyframes`
+0% {
+    backdrop-filter: brightness(70%)
+
+}
+  100% {
+    backdrop-filter: brightness(100%)
+  }
+`;
+
+const fadeIn = keyframes`
+    0% {
+        transform: translateY(-10px);
+    opacity: 40%;
+
+    }
+    100% {
+        transform: translateY(0px);
+        opacity: 100%;
+
+    }
+`;
+
+const fadeOut = keyframes`
+    0% {
+        transform: translateY(0px);
+    opacity: 100%;
+
+    }
+    100% {
+        transform: translateY(-10px);
+        opacity: 0%;
+
+    }
+`;
+
+function Modal({ children, onClose, isOpen, isScroll = false }: ModalType) {
+  const [open, setOpen] = useState(false);
+  const [fadeOutAnimation, setFadeOutAnimation] = useState(
+    `${fadeIn} 0.3s forwards`
+  );
+  const [backgroundAnimation, setBackgroundAnimation] = useState(
+    `${fadeInBackground} 0.3s forwards`
+  );
+
+  const handleClose = (e: any) => {
+    if (e.target.id != "modal") {
+      return false;
+    }
+    setFadeOutAnimation(`${fadeOut} 0.3s forwards`);
+    setBackgroundAnimation(`${fadeOutBackground} 0.3s forwards`);
+
+    setTimeout(() => {
+      onClose();
+      setOpen(false);
+    }, 280);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setOpen(true);
+      setFadeOutAnimation(`${fadeIn} 0.3s forwards`);
+      setBackgroundAnimation(`${fadeInBackground} 0.3s forwards`);
+    } else {
+      setFadeOutAnimation(`${fadeOut} 0.3s forwards`);
+      setBackgroundAnimation(`${fadeOutBackground} 0.3s forwards`);
+
+      setTimeout(() => {
+        onClose();
+        setOpen(false);
+      }, 280);
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      onClick={handleClose}
+      id="modal"
+      css={css({
+        display: open ? "flex" : "none",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        position: "fixed",
+        top: "0",
+        left: "0",
+        backdropFilter: "brightness(70%)",
+        animation: backgroundAnimation,
+        scrollbarWidth: "none",
+        zIndex: 3000,
+        transition: "0.1s",
+      })}
+    >
+      <div
+        css={css({
+          width: "100%",
+          height: isScroll ? "70vh" : "auto",
+          "@media (min-width: 1000px)": {
+            width: "40vw",
+          },
+          "@media (min-width: 1400px)": {
+            width: "30vw",
+          },
+          margin: "2rem",
+          padding: "1.6rem 1.6rem",
+          backgroundColor: "#ffffff",
+          borderRadius: "0.6rem",
+          border: `0.1rem solid #dddddd`,
+          boxShadow: `rgba(147, 148, 158, 0.25) 0px 7px 40px`,
+          fontFamily: "'Noto Sans KR', sans-serif",
+          overflow: "scroll",
+          wordBreak: "break-all",
+          //translate: "translateY(-10px)",
+          animation: fadeOutAnimation,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export { Modal };

src/ui/App.tsx

@@ -6,11 +6,16 @@ import { Description } from "@/components/text/Description";
 import { Column } from "@/components/flex/Column";
 import { MapComponent } from "@/components/map/SelectMap";
 import { useState } from "react";
-import { NextButton, PrevButton } from "@/components/button/BottomButton";
+import {
+  Button,
+  NextButton,
+  PrevButton,
+} from "@/components/button/BottomButton";
 import { BuildingHeights } from "@/components/map/Processing";
 import { ChevronLeft, ChevronRight, Download } from "lucide-react";
 import { useAreaStore } from "@/state/areaStore";
 import { useActionStore } from "@/state/exportStore";
+import { Modal } from "@/components/modal/Modal";
 
 const IconSize = css({
   width: "14px",
@@ -22,9 +27,24 @@ function App() {
   const [areaData, setAreaData] = useState([]);
   const [steps, setSteps] = useState(["front", "processing"]);
   const [step, setStep] = useState(0);
+  const [isWarnModal, setIsWarnModal] = useState(false);
+
   const setCenter = useAreaStore((state) => state.setCenter);
   const setAction = useActionStore((state) => state.setAction);
 
+  const checkIsBig = () => {
+    const a = areaData[0].lat - areaData[1].lat;
+    const b = areaData[0].lng - areaData[1].lng;
+
+    console.log(a + b);
+
+    if (a + b > 0.1) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   const handleDone = (data) => {
     setAreaData(data);
     setCenter(data);
@@ -38,6 +58,10 @@ function App() {
   };
 
   const handleClickNextStep = () => {
+    if (step == 0 && checkIsBig()) {
+      setIsWarnModal(true);
+      return false;
+    }
     setStep(step + 1);
   };
 
@@ -71,7 +95,7 @@ function App() {
           <Column gap="0.5rem">
             <Title>Processing</Title>
             <Description>
-              Tools to create 3D maps based on maps and export them in 3D format
+              Click the button below to get the building information.
             </Description>
 
             <BuildingHeights area={areaData} />
@@ -95,6 +119,23 @@ function App() {
         Export GLB <Download css={IconSize} />
       </NextButton>
 
+      <Modal isOpen={isWarnModal} onClose={() => setIsWarnModal(false)}>
+        <Column gap="0.5rem">
+          <Title>The area is too big </Title>
+          <Description>Do you want to proceed?</Description>
+          <Button
+            isShow={step != 2}
+            disabled={isNextButtonDisabled}
+            onClick={() => {
+              setStep(step + 1);
+              setIsWarnModal(false);
+            }}
+          >
+            Next Step <ChevronRight css={IconSize} />
+          </Button>
+        </Column>
+      </Modal>
+
       <Space></Space>
     </div>
   );