first

src/pages/Main.tsx

@@ -0,0 +1,29 @@
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import useModal from "../store/useModal";
+import { useEffect } from "react";
+import ZoomHint from "../components/modals/ZoomHint";
+
+const Main = () => {
+  const { setModal } = useModal();
+  useEffect(() => {
+    setModal(<ZoomHint />);
+
+    return () => {};
+  }, []);
+  return (
+    <div>
+      <TransformWrapper
+        alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
+        zoomAnimation={{ size: 0 }}
+      >
+        <TransformComponent wrapperClass="h-[calc(100vh-60px)]">
+          <div>
+            <img src="images/Map.jpg" alt="Map" />
+          </div>
+        </TransformComponent>
+      </TransformWrapper>
+    </div>
+  );
+};
+
+export default Main;