feat: add icon

package-lock.json

@@ -12,6 +12,7 @@
         "@react-three/fiber": "^9.0.4",
         "@types/three": "^0.173.0",
         "leaflet": "^1.9.4",
+        "lucide-react": "^0.475.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-leaflet": "^5.0.0",
@@ -2979,6 +2980,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.475.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz",
+      "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "@react-three/fiber": "^9.0.4",
     "@types/three": "^0.173.0",
     "leaflet": "^1.9.4",
+    "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-leaflet": "^5.0.0",

src/components/button/BottomButton.tsx

@@ -28,7 +28,9 @@ export function NextButton(props: ButtonProps) {
         outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
         cursor: "pointer",
         transition: "0.2s",
-        display: props.isShow ? "" : "none",
+        display: props.isShow ? "flex" : "none",
+        alignItems: "center",
+        gap: "0.5rem",
         ":hover": {
           backgroundColor: "#ebeef0c2",
         },
@@ -63,8 +65,9 @@ export function PrevButton(props: ButtonProps) {
         outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
         cursor: "pointer",
         transition: "0.2s",
-        display: props.isShow ? "" : "none",
-
+        display: props.isShow ? "flex" : "none",
+        alignItems: "center",
+        gap: "0.5rem",
         ":hover": {
           backgroundColor: "#ebeef0c2",
         },

src/components/map/SelectMap.tsx

@@ -8,6 +8,12 @@ import {
 import L, { LatLng, LatLngBounds } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { css } from "@emotion/react";
+import { CircleMinus, MousePointerClick } from "lucide-react";
+
+const IconSize = css({
+  width: "14px",
+  height: "14px",
+});
 
 function RectangleSelector({
   isDrag = true,
@@ -95,7 +101,7 @@ export function MapComponent({
       >
         <button
           css={css({
-            display: isDrag ? "none" : "",
+            display: bounds == null || isDrag == true ? "none" : "flex",
             color: "#ffffff",
 
             backgroundColor: "#ef4444",
@@ -106,13 +112,15 @@ export function MapComponent({
             outline: "#ef4444c2 solid 0.1rem",
             cursor: "pointer",
             transition: "0.2s",
+            alignItems: "center",
+            gap: "0.5rem",
             ":hover": {
               backgroundColor: "#ef4444",
             },
           })}
           onClick={handleClickRemoveBox}
         >
-          Remove Box
+          <CircleMinus css={IconSize} /> Remove Box
         </button>
 
         <button
@@ -129,13 +137,16 @@ export function MapComponent({
               : "rgba(240, 240, 244, 0.51) solid 0.1rem",
             cursor: "pointer",
             transition: "0.2s",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
             ":hover": {
               backgroundColor: isDrag ? "#085fbd" : "#ebeef0c2",
             },
           })}
           onClick={handleClickSwitchDrag}
         >
-          {isDrag ? "Select Box" : "Back to Drag"}
+          {isDrag ? <SelectBox /> : "Back to Drag"}
         </button>
       </div>
 
@@ -160,3 +171,12 @@ export function MapComponent({
     </div>
   );
 }
+
+function SelectBox() {
+  return (
+    <>
+      <MousePointerClick css={IconSize} />
+      <span>Select Box</span>
+    </>
+  );
+}

src/ui/App.tsx

@@ -8,6 +8,12 @@ import { MapComponent } from "@/components/map/SelectMap";
 import { useState } from "react";
 import { NextButton, PrevButton } from "@/components/button/BottomButton";
 import { BuildingHeights } from "@/components/map/Processing";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const IconSize = css({
+  width: "14px",
+  height: "14px",
+});
 
 function App() {
   const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
@@ -64,7 +70,7 @@ function App() {
       </FullscreenModal>
 
       <PrevButton isShow={step != 0} onClick={handleClickPrevStep}>
-        Prev Step
+        <ChevronLeft css={IconSize} /> Prev Step
       </PrevButton>
 
       <NextButton
@@ -72,7 +78,7 @@ function App() {
         disabled={isNextButtonDisabled}
         onClick={handleClickNextStep}
       >
-        Next Step
+        Next Step <ChevronRight css={IconSize} />
       </NextButton>
 
       <Space />