feat: add export modal

src/ui/App.tsx

@@ -17,6 +17,8 @@ import { useAreaStore } from "@/state/areaStore";
 import { useActionStore } from "@/state/exportStore";
 import { Modal } from "@/components/modal/Modal";
 import { TopNav } from "@/components/nav/TopNav";
+import { getCookie } from "@/utils/cookie";
+import { Row } from "@/components/flex/Row";
 
 const IconSize = css({
   width: "14px",
@@ -29,6 +31,8 @@ function App() {
   const [steps, setSteps] = useState(["front", "processing"]);
   const [step, setStep] = useState(0);
   const [isWarnModal, setIsWarnModal] = useState(false);
+  const [isExportModal, setIsExportModal] = useState(false);
+  const [isFleetLogin, setIsFleetLogin] = useState(false);
 
   const setCenter = useAreaStore((state) => state.setCenter);
   const setAction = useActionStore((state) => state.setAction);
@@ -46,6 +50,23 @@ function App() {
     }
   };
 
+  const exportFile = () => {
+    setAction(true);
+  };
+
+  const exportFleet = () => {
+    setAction(true);
+  };
+
+  const checkFleetLogin = () => {
+    try {
+      const isCookie = getCookie("token");
+      if (isCookie) {
+        setIsFleetLogin(true);
+      }
+    } catch (error) {}
+  };
+
   const handleDone = (data) => {
     setAreaData(data);
     setCenter(data);
@@ -71,9 +92,13 @@ function App() {
   };
 
   const handleClickExport = () => {
-    setAction(true);
+    setIsExportModal(true);
   };
 
+  useState(() => {
+    checkFleetLogin();
+  }, []);
+
   return (
     <div css={css({ height: "100%", width: "100%" })}>
       <TopNav step={step} />
@@ -139,6 +164,29 @@ function App() {
         </Column>
       </Modal>
 
+      <Modal isOpen={isExportModal} onClose={() => setIsExportModal(false)}>
+        <Column gap="0.5rem">
+          <Title>Export</Title>
+
+          <Row gap="0.5rem">
+            <Button isShow={true} onClick={exportFile}>
+              GLB Download <Download css={IconSize} />
+            </Button>
+
+            {isFleetLogin ? (
+              <Button isShow={true}>Fleet Interlock</Button>
+            ) : (
+              <Button
+                isShow={true}
+                onClick={() => window.open("https://fleet.im/auth")}
+              >
+                Fleet Login
+              </Button>
+            )}
+          </Row>
+        </Column>
+      </Modal>
+
       <Space></Space>
     </div>
   );

src/utils/cookie.ts

@@ -0,0 +1,31 @@
+export const getCookies = () => {
+  try {
+    const cookies = document.cookie.split(";").reduce((res, c) => {
+      const [key, val] = c.trim().split("=").map(decodeURIComponent);
+      try {
+        return Object.assign(res, { [key]: JSON.parse(val) });
+      } catch (e) {
+        return Object.assign(res, { [key]: val });
+      }
+    }, {});
+
+    return cookies;
+  } catch (error) {
+    return "";
+  }
+};
+
+export const getCookie = (key: string) => {
+  const cookieList = getCookies();
+  if (!cookieList.hasOwnProperty(key)) {
+    return "";
+  }
+  return cookieList[key];
+};
+
+export const setCookie = (key: string, value: string, expDays: number = 6) => {
+  const date = new Date();
+  date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
+  const expires = date.toUTCString();
+  document.cookie = `${key}=${value}; expires=${expires}; path=/`;
+};