From 700e9d3b25588370efe6556347eb768a4a34a275 Mon Sep 17 00:00:00 2001
From: Huh Hyeongjun <hhj@devent.kr>
Date: Tue, 25 Feb 2025 21:45:44 +0900
Subject: [PATCH] feat: add export modal

---
 src/ui/App.tsx      | 50 ++++++++++++++++++++++++++++++++++++++++++++-
 src/utils/cookie.ts | 31 ++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/cookie.ts

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index c300aab..9d6f083 100644
--- a/src/ui/App.tsx
+++ b/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>
   );
diff --git a/src/utils/cookie.ts b/src/utils/cookie.ts
new file mode 100644
index 0000000..a0cd257
--- /dev/null
+++ b/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=/`;
+};