diff --git a/.env.development b/.env.development
index 2f67a8f6..468efc67 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,11 @@
 NEXT_PUBLIC_TEST="테스트변수입니다. development"
 
-NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
+NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
+# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
+# NEXT_PUBLIC_API_SERVER_PATH="http://172.30.1.60:8080"
 
 DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true"
 
-SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
\ No newline at end of file
+SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
+
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 8970b77b..91d91ce1 100644
--- a/.env.production
+++ b/.env.production
@@ -4,4 +4,6 @@ NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
 
 DATABASE_URL=""
 
-SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
\ No newline at end of file
+SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
+
+NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
\ No newline at end of file
diff --git a/Nextjs 14 컴포넌트에 대해서....pdf b/docs/Nextjs 14 컴포넌트에 대해서....pdf
similarity index 100%
rename from Nextjs 14 컴포넌트에 대해서....pdf
rename to docs/Nextjs 14 컴포넌트에 대해서....pdf
diff --git a/Qcast coding convention.pdf b/docs/Qcast coding convention.pdf
similarity index 100%
rename from Qcast coding convention.pdf
rename to docs/Qcast coding convention.pdf
diff --git a/Qcast development guilde.pdf b/docs/Qcast development guilde.pdf
similarity index 100%
rename from Qcast development guilde.pdf
rename to docs/Qcast development guilde.pdf
diff --git a/docs/dictionary.txt b/docs/dictionary.txt
new file mode 100644
index 00000000..cef0921e
--- /dev/null
+++ b/docs/dictionary.txt
@@ -0,0 +1,26 @@
+지붕재: roofMaterial
+할당: allocation
+외벽선: WallLine
+지붕선: roofLine
+지붕면: roofSurface
+회로번호: circuitNumber
+흐름방향: flowDirection
+가대: trestle
+집계표: summaryTable
+복도치수(입력치수): inputSize
+실제치수: actualSize
+테두리만: borderOnly
+라인해치: lineHatching
+문자글꼴: textFont 
+흐름방향글꼴 : flowDirectionFont
+회로번호글꼴: circuitNumberFont
+치수글꼴: sizeFont
+출폭: offset
+폭: width
+경사(구배): pitch
+이구배: doublePitch
+소매: sleeve
+개구: openSpace
+도머: dormer
+그림자: shadow
+
diff --git a/docs/git commit message Convention.pdf b/docs/git commit message Convention.pdf
new file mode 100644
index 00000000..1df33833
Binary files /dev/null and b/docs/git commit message Convention.pdf differ
diff --git a/docs/메세지 처리 가이드.pdf b/docs/메세지 처리 가이드.pdf
new file mode 100644
index 00000000..b6f316e1
Binary files /dev/null and b/docs/메세지 처리 가이드.pdf differ
diff --git a/next.config.mjs b/next.config.mjs
index 80649ef9..d4759fb3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
+  swcMinify: true,
   webpack: (config) => {
+    config.resolve.fallback = { fs: false }
     config.externals.push({
       'utf-8-validate': 'commonjs utf-8-validate',
       bufferutil: 'commonjs bufferutil',
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 9610f12a..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,7058 +0,0 @@
-{
-  "name": "q.cast.prototype-nontype",
-  "version": "0.1.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "q.cast.prototype-nontype",
-      "version": "0.1.0",
-      "dependencies": {
-        "@nextui-org/react": "^2.4.2",
-        "@prisma/client": "^5.17.0",
-        "axios": "^1.7.3",
-        "fabric": "^5.3.0",
-        "framer-motion": "^11.2.13",
-        "mathjs": "^13.0.2",
-        "mongodb": "^6.8.0",
-        "next": "14.2.3",
-        "react": "^18",
-        "react-dom": "^18",
-        "react-toastify": "^10.0.5",
-        "recoil": "^0.7.7",
-        "uuid": "^9.0.1"
-      },
-      "devDependencies": {
-        "postcss": "^8",
-        "prettier": "^3.3.3",
-        "prisma": "^5.17.0",
-        "sass": "^1.77.8",
-        "tailwindcss": "^3.4.1"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
-      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
-      "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@formatjs/ecma402-abstract": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
-      "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/intl-localematcher": "0.5.4",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/fast-memoize": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
-      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.7.8",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
-      "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/icu-skeleton-parser": "1.8.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
-      "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
-      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@internationalized/date": {
-      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
-      "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@internationalized/message": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.4.tgz",
-      "integrity": "sha512-Dygi9hH1s7V9nha07pggCkvmRfDd3q2lWnMGvrJyrOwYMe1yj4D2T9BoH9I6MGR7xz0biQrtLPsqUkqXzIrBOw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0",
-        "intl-messageformat": "^10.1.0"
-      }
-    },
-    "node_modules/@internationalized/number": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.3.tgz",
-      "integrity": "sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@internationalized/string": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.3.tgz",
-      "integrity": "sha512-9kpfLoA8HegiWTeCbR2livhdVeKobCnVv8tlJ6M2jF+4tcMqDo94ezwlnrUANBWPgd8U7OXIHCk2Ov2qhk4KXw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@mapbox/node-pre-gyp": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
-      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "make-dir": "^3.1.0",
-        "node-fetch": "^2.6.7",
-        "nopt": "^5.0.0",
-        "npmlog": "^5.0.1",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.5",
-        "tar": "^6.1.11"
-      },
-      "bin": {
-        "node-pre-gyp": "bin/node-pre-gyp"
-      }
-    },
-    "node_modules/@mongodb-js/saslprep": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.8.tgz",
-      "integrity": "sha512-qKwC/M/nNNaKUBMQ0nuzm47b7ZYWQHN3pcXq4IIcoSBc2hOIrflAxJduIvvqmhoz3gR2TacTAs8vlsCVPkiEdQ==",
-      "license": "MIT",
-      "dependencies": {
-        "sparse-bitfield": "^3.0.3"
-      }
-    },
-    "node_modules/@next/env": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
-      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
-      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
-      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
-      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
-      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
-      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nextui-org/accordion": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmjs.org/@nextui-org/accordion/-/accordion-2.0.38.tgz",
-      "integrity": "sha512-kFCZU1VaKkUI295Fg3NxuQR2+kZ5vTH4ftIs0oByrOs0+l14dVQGFOd9ZV402fHNykZJt7Sk6oWjTp4Qwl83JA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/divider": "2.0.31",
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-accordion": "2.0.7",
-        "@react-aria/button": "3.9.5",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/tree": "3.8.1",
-        "@react-types/accordion": "3.0.0-alpha.21",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/aria-utils": {
-      "version": "2.0.24",
-      "resolved": "https://registry.npmjs.org/@nextui-org/aria-utils/-/aria-utils-2.0.24.tgz",
-      "integrity": "sha512-YD+YvT01zFqN1Ey137OeFl9SEhAYf2BoZz+ykWiIJlMjl/LY1d5WE0nkzsjMHh6MV3HgS6CExxlf7TuApN6Piw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-rsc-utils": "2.0.13",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system": "2.2.5",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/collections": "3.10.7",
-        "@react-stately/overlays": "3.6.7",
-        "@react-types/overlays": "3.8.7",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/autocomplete": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nextui-org/autocomplete/-/autocomplete-2.1.5.tgz",
-      "integrity": "sha512-VcSe3B/CmIvfZnAJHHYKp3r83QrqI0T8v9jjrpQ0PN8qKOc7LmQUsvnAkBRuHCLlaC1xPwZtyJp0TJyRF8tM3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/button": "2.0.37",
-        "@nextui-org/input": "2.2.4",
-        "@nextui-org/listbox": "2.1.25",
-        "@nextui-org/popover": "2.1.27",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/scroll-shadow": "2.1.19",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/spinner": "2.0.33",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/combobox": "3.9.1",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/combobox": "3.8.4",
-        "@react-types/combobox": "3.11.1",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/avatar": {
-      "version": "2.0.32",
-      "resolved": "https://registry.npmjs.org/@nextui-org/avatar/-/avatar-2.0.32.tgz",
-      "integrity": "sha512-2dCpIKuGvbOVLJ6m2AkNhPqqamIin3FDqDLop2ILNhyAxgxPYitqE3JqsUA/hlZCzu79sZudruuubzHWzHqf0Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-image": "2.0.6",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/badge": {
-      "version": "2.0.31",
-      "resolved": "https://registry.npmjs.org/@nextui-org/badge/-/badge-2.0.31.tgz",
-      "integrity": "sha512-ayOw9j6Fa/RxZjk+2AhhBzXFm2Xv2RNYMrXAqGaJ+cbhofsqu8QnP0/4W+CiVXx8C0jpPmNAgSklRXgbKHs10Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/breadcrumbs": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/@nextui-org/breadcrumbs/-/breadcrumbs-2.0.12.tgz",
-      "integrity": "sha512-PCZI7xqu1UrjJcCkd6HwGJ+h2L5k6LMBQRVbD8/7jMKkJxpoQXC7h5uCtEeLG2CafVih4cUCBTuzUnsubtKLnQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/breadcrumbs": "3.5.13",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/breadcrumbs": "3.7.5",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/button": {
-      "version": "2.0.37",
-      "resolved": "https://registry.npmjs.org/@nextui-org/button/-/button-2.0.37.tgz",
-      "integrity": "sha512-dBtdO30qfu+K4YYLNmmpUy16Q82H1ucY8A4NjP4iEAJ1sPunoAYvba7h9xabrpUKW9IOyItOThSesxsfpaXYug==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/ripple": "2.0.32",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/spinner": "2.0.33",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@react-aria/button": "3.9.5",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/button": "3.9.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/calendar": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@nextui-org/calendar/-/calendar-2.0.11.tgz",
-      "integrity": "sha512-pgCEekJHSr5QKxpJaABIFS2ItqgK8qZ7pKrCOJjmRHBh4Y9WGfndrIW6z3IkHZiO01CKJbpjb9ytTjufsU6kIA==",
-      "license": "MIT",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@nextui-org/button": "2.0.37",
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@react-aria/calendar": "3.5.8",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/calendar": "3.5.1",
-        "@react-stately/utils": "3.10.1",
-        "@react-types/button": "3.9.4",
-        "@react-types/calendar": "3.4.6",
-        "@react-types/shared": "3.23.1",
-        "@types/lodash.debounce": "^4.0.7",
-        "lodash.debounce": "^4.0.8",
-        "scroll-into-view-if-needed": "3.0.10"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.1.0",
-        "@nextui-org/theme": ">=2.2.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/card": {
-      "version": "2.0.33",
-      "resolved": "https://registry.npmjs.org/@nextui-org/card/-/card-2.0.33.tgz",
-      "integrity": "sha512-iO/ThbUz75YlcFrWO9EssMhOxbc9LN0SSk181+2QnPDbKls9wbkUEfGjq/d9k3h6jb9FaR5N5XwVpT4aUt2Usw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/ripple": "2.0.32",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@react-aria/button": "3.9.5",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/checkbox": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@nextui-org/checkbox/-/checkbox-2.1.4.tgz",
-      "integrity": "sha512-74AD4imL064mvs4trQKQj/efwIZYaBt0TmXO6jV+6xGE6S9YjCAy+OBotrgRBG9fURQVQU1qJGnwwsOIdxCXkA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-callback-ref": "2.0.6",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/checkbox": "3.14.3",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/checkbox": "3.6.5",
-        "@react-stately/toggle": "3.7.4",
-        "@react-types/checkbox": "3.8.1",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/chip": {
-      "version": "2.0.32",
-      "resolved": "https://registry.npmjs.org/@nextui-org/chip/-/chip-2.0.32.tgz",
-      "integrity": "sha512-fGqXamG7xs+DvKPra+rJEkIAjaQwPi8FSvsJ4P4LWzQ3U+HjymEI07BW8xQmaLceHInbTLTfdbTjAYdGNzAdOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/checkbox": "3.8.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/code": {
-      "version": "2.0.32",
-      "resolved": "https://registry.npmjs.org/@nextui-org/code/-/code-2.0.32.tgz",
-      "integrity": "sha512-YBLCWDgR+ebWIr+noN02/ls+PsQV9leLskgPLFUfpRzHoXdGeUUhE8IjTv14KFP3XlW3Cf9ALFy3IgPuIZ+yuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system-rsc": "2.1.5"
-      },
-      "peerDependencies": {
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/date-input": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@nextui-org/date-input/-/date-input-2.1.3.tgz",
-      "integrity": "sha512-Y6d+AVPnM7uYy7boSHrk+cW/pft1fKbpXh/ed5omTgFx6rKRZ/agQmP5erMcmNzpv3Bis4wCc89WNnBtCjEZMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/datepicker": "3.10.1",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/datepicker": "3.9.4",
-        "@react-types/datepicker": "3.7.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.1.0",
-        "@nextui-org/theme": ">=2.2.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/date-picker": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/date-picker/-/date-picker-2.1.6.tgz",
-      "integrity": "sha512-PycYKAm1tmew64aQWQtZfTbV73S4GPGYJnK6hr9W0iXUCOQQH5UbzLwdWGXnVXvtrJzczFQllaXaQccwWCeTzg==",
-      "license": "MIT",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/button": "2.0.37",
-        "@nextui-org/calendar": "2.0.11",
-        "@nextui-org/date-input": "2.1.3",
-        "@nextui-org/popover": "2.1.27",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/datepicker": "3.10.1",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/datepicker": "3.9.4",
-        "@react-stately/overlays": "3.6.7",
-        "@react-stately/utils": "3.10.1",
-        "@react-types/datepicker": "3.7.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.1.0",
-        "@nextui-org/theme": ">=2.2.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/divider": {
-      "version": "2.0.31",
-      "resolved": "https://registry.npmjs.org/@nextui-org/divider/-/divider-2.0.31.tgz",
-      "integrity": "sha512-z9GhrpmhXhJGuW0GSO1OP01mwDTSItuIRIz0VGpKOPVTqOzOMHkXN978wgNXqJ+knWZcaiF7WHvd83O05jmbkg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-rsc-utils": "2.0.13",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system-rsc": "2.1.5",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/dropdown": {
-      "version": "2.1.29",
-      "resolved": "https://registry.npmjs.org/@nextui-org/dropdown/-/dropdown-2.1.29.tgz",
-      "integrity": "sha512-ujHJVHzOcfwqNqlkt14t8YV3AAn03sME7gBxujQcwtDFGYMJeP9pvTU24L/FjBEb3Fd1XdhjwowU/sTuVTK4Yg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/menu": "2.0.28",
-        "@nextui-org/popover": "2.1.27",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/menu": "3.14.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/menu": "3.7.1",
-        "@react-types/menu": "3.9.9"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/framer-utils": {
-      "version": "2.0.24",
-      "resolved": "https://registry.npmjs.org/@nextui-org/framer-utils/-/framer-utils-2.0.24.tgz",
-      "integrity": "sha512-Fc5ugVaLsXhd3bgJg+hvw20uaaz9gAxYY2ouS/3leN7QBSRAwpy3Dl+tX8BbLeyx3ZosVrHIJ3w4bhDMzFVk9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system": "2.2.5",
-        "@nextui-org/use-measure": "2.0.2"
-      },
-      "peerDependencies": {
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/image": {
-      "version": "2.0.31",
-      "resolved": "https://registry.npmjs.org/@nextui-org/image/-/image-2.0.31.tgz",
-      "integrity": "sha512-HxWaGUBtNaT9pLGvDo5Q2ruGxdhXYrdNcLvRhtoohiZeIKo1Y8jTbBUCVGxdxklTZAF3H7klrTcsdSwHTGfk0g==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-image": "2.0.6"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/input": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@nextui-org/input/-/input-2.2.4.tgz",
-      "integrity": "sha512-CVeTwwUJn9pEJC+kq3Jg0nAFeYVGBbIU7U2YFSG8XJK2X75odj8RSQdVd3Dt2U/b5Mtwt5sBh9gMzCedtjffWg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/textfield": "3.14.5",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/utils": "3.10.1",
-        "@react-types/shared": "3.23.1",
-        "@react-types/textfield": "3.9.3",
-        "react-textarea-autosize": "^8.5.3"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/kbd": {
-      "version": "2.0.33",
-      "resolved": "https://registry.npmjs.org/@nextui-org/kbd/-/kbd-2.0.33.tgz",
-      "integrity": "sha512-1Q7vKKJjfn5RPMsySQEljo2clf03Ta4V4ZA4O92ktJ8YzbdNnDfUiWtfFxF64R183ZVfe869RBSpuOdzZLNuKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system-rsc": "2.1.5",
-        "@react-aria/utils": "3.24.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/link": {
-      "version": "2.0.34",
-      "resolved": "https://registry.npmjs.org/@nextui-org/link/-/link-2.0.34.tgz",
-      "integrity": "sha512-497AvjzckEB/TE1eJEziS2QkxwCY81RPsWoApNSeHGdYrMO1tfgUFKATgadfBQjoba6FdCcLc2QaUapOetqFaA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-link": "2.0.19",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/link": "3.7.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/link": "3.5.5"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/listbox": {
-      "version": "2.1.25",
-      "resolved": "https://registry.npmjs.org/@nextui-org/listbox/-/listbox-2.1.25.tgz",
-      "integrity": "sha512-WJqxhzPxADLIsenREaaoQ44bs3gQx5yqOvK86Jkiv/m9nXr0YuxZOJEsVa5GenkmyJBrEd6LkBV5cZ1TGNzbJw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/divider": "2.0.31",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-is-mobile": "2.0.9",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/listbox": "3.12.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/list": "3.10.5",
-        "@react-types/menu": "3.9.9",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/menu": {
-      "version": "2.0.28",
-      "resolved": "https://registry.npmjs.org/@nextui-org/menu/-/menu-2.0.28.tgz",
-      "integrity": "sha512-/bcIeBCGpauDkdz6VZvl1YXP5xpSSSYVTvhsChkcvzWzDXLG004uVAsw4kjP2i9OGxoehrjkl9wkIzCFCEdsHw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/divider": "2.0.31",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-menu": "2.0.6",
-        "@nextui-org/use-is-mobile": "2.0.9",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/menu": "3.14.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/menu": "3.7.1",
-        "@react-stately/tree": "3.8.1",
-        "@react-types/menu": "3.9.9",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/modal": {
-      "version": "2.0.39",
-      "resolved": "https://registry.npmjs.org/@nextui-org/modal/-/modal-2.0.39.tgz",
-      "integrity": "sha512-b0G5IRNrfQumx8mQQO92rn2iC2ueUuk4XKvxYYmYNpx3/qpdEP9tckozw+s0QFyZocRPY+yYa0pBtMBGC2lWGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@nextui-org/use-aria-modal-overlay": "2.0.11",
-        "@nextui-org/use-disclosure": "2.0.10",
-        "@react-aria/dialog": "3.5.14",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/overlays": "3.22.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/overlays": "3.6.7",
-        "@react-types/overlays": "3.8.7"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/navbar": {
-      "version": "2.0.36",
-      "resolved": "https://registry.npmjs.org/@nextui-org/navbar/-/navbar-2.0.36.tgz",
-      "integrity": "sha512-uobdPsh4TSPm2Us74/Vey43z0/oRqWb6x4+eHIJf9VhYP9pY733N2n17v2mvU7SvcNhkold/PWfXPYiA8kMlug==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-toggle-button": "2.0.10",
-        "@nextui-org/use-scroll-position": "2.0.8",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/overlays": "3.22.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/toggle": "3.7.4",
-        "@react-stately/utils": "3.10.1",
-        "react-remove-scroll": "^2.5.6"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/pagination": {
-      "version": "2.0.35",
-      "resolved": "https://registry.npmjs.org/@nextui-org/pagination/-/pagination-2.0.35.tgz",
-      "integrity": "sha512-07KJgZcJBt2e9RY6TsiQm5qrjDLH+gT3yB7yQ4jPdCK9fkTB0r2kvTOYdPUvrtVJYRq2bwFCWOz+9mokdNfcwg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-pagination": "2.0.9",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "scroll-into-view-if-needed": "3.0.10"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/popover": {
-      "version": "2.1.27",
-      "resolved": "https://registry.npmjs.org/@nextui-org/popover/-/popover-2.1.27.tgz",
-      "integrity": "sha512-UV42nqvUR9IOy7Hgc5S2Xo+2YWzBAHCcU+C/9O9SchXL0DyU/ol+IPqxuBxdJDi5fiFYr9mTBoPZgAEGDoJjDg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/button": "2.0.37",
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/dialog": "3.5.14",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/overlays": "3.22.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/overlays": "3.6.7",
-        "@react-types/button": "3.9.4",
-        "@react-types/overlays": "3.8.7",
-        "react-remove-scroll": "^2.5.6"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/progress": {
-      "version": "2.0.33",
-      "resolved": "https://registry.npmjs.org/@nextui-org/progress/-/progress-2.0.33.tgz",
-      "integrity": "sha512-rP54lZbH7BSzX9sFj7k3ylrUpk10XDWngc1dB1M+GlPsI2XRnzI3s+GE9kuZG2+N6eL/KLVG1YOg8u9eAYnwpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-is-mounted": "2.0.6",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/progress": "3.4.13",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/progress": "3.5.4"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/radio": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@nextui-org/radio/-/radio-2.1.4.tgz",
-      "integrity": "sha512-Y18TXvGVz/G1E3jjYmutSSx1EdQRs5iMCVZNS/Bz4avE9QMSrHl6fOhZIndrm8LwCTqn7lbKRQngZLN4tvPinQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/radio": "3.10.4",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/radio": "3.10.4",
-        "@react-types/radio": "3.8.1",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/react": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/react/-/react-2.4.6.tgz",
-      "integrity": "sha512-8o/k5A5g0xXj6hmV2AulkAswQnZGt2WI64Coq+toWBTumQLcW6iAqPJBDztCDiz+6yiU6Nvk/1ZuZJeRs3XMRw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/accordion": "2.0.38",
-        "@nextui-org/autocomplete": "2.1.5",
-        "@nextui-org/avatar": "2.0.32",
-        "@nextui-org/badge": "2.0.31",
-        "@nextui-org/breadcrumbs": "2.0.12",
-        "@nextui-org/button": "2.0.37",
-        "@nextui-org/calendar": "2.0.11",
-        "@nextui-org/card": "2.0.33",
-        "@nextui-org/checkbox": "2.1.4",
-        "@nextui-org/chip": "2.0.32",
-        "@nextui-org/code": "2.0.32",
-        "@nextui-org/date-input": "2.1.3",
-        "@nextui-org/date-picker": "2.1.6",
-        "@nextui-org/divider": "2.0.31",
-        "@nextui-org/dropdown": "2.1.29",
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/image": "2.0.31",
-        "@nextui-org/input": "2.2.4",
-        "@nextui-org/kbd": "2.0.33",
-        "@nextui-org/link": "2.0.34",
-        "@nextui-org/listbox": "2.1.25",
-        "@nextui-org/menu": "2.0.28",
-        "@nextui-org/modal": "2.0.39",
-        "@nextui-org/navbar": "2.0.36",
-        "@nextui-org/pagination": "2.0.35",
-        "@nextui-org/popover": "2.1.27",
-        "@nextui-org/progress": "2.0.33",
-        "@nextui-org/radio": "2.1.4",
-        "@nextui-org/ripple": "2.0.32",
-        "@nextui-org/scroll-shadow": "2.1.19",
-        "@nextui-org/select": "2.2.5",
-        "@nextui-org/skeleton": "2.0.31",
-        "@nextui-org/slider": "2.2.15",
-        "@nextui-org/snippet": "2.0.41",
-        "@nextui-org/spacer": "2.0.32",
-        "@nextui-org/spinner": "2.0.33",
-        "@nextui-org/switch": "2.0.33",
-        "@nextui-org/system": "2.2.5",
-        "@nextui-org/table": "2.0.39",
-        "@nextui-org/tabs": "2.0.35",
-        "@nextui-org/theme": "2.2.9",
-        "@nextui-org/tooltip": "2.0.39",
-        "@nextui-org/user": "2.0.33",
-        "@react-aria/visually-hidden": "3.8.12"
-      },
-      "peerDependencies": {
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/react-rsc-utils": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/@nextui-org/react-rsc-utils/-/react-rsc-utils-2.0.13.tgz",
-      "integrity": "sha512-QewsXtoQlMsR9stThdazKEImg9oyZkPLs7wsymhrzh6/HdQCl9bTdb6tJcROg4vg5LRYKGG11USSQO2nKlfCcQ==",
-      "license": "MIT"
-    },
-    "node_modules/@nextui-org/react-utils": {
-      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/@nextui-org/react-utils/-/react-utils-2.0.16.tgz",
-      "integrity": "sha512-QdDoqzhx+4t9cDTVmtw5iOrfyLvpqyKsq8PARHUniCiQQDQd1ao7FCpzHgvU9poYcEdRk+Lsna66zbeMkFBB6w==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-rsc-utils": "2.0.13",
-        "@nextui-org/shared-utils": "2.0.7"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/ripple": {
-      "version": "2.0.32",
-      "resolved": "https://registry.npmjs.org/@nextui-org/ripple/-/ripple-2.0.32.tgz",
-      "integrity": "sha512-xOqoHWzpvv5KRh7P8pXt3aZEmI1tyhiTNhrwjJaRME0d5xSA0gNzYhrjP5g0+Dxy4nKRDIZ1znJcd87KI07JFA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/scroll-shadow": {
-      "version": "2.1.19",
-      "resolved": "https://registry.npmjs.org/@nextui-org/scroll-shadow/-/scroll-shadow-2.1.19.tgz",
-      "integrity": "sha512-od5AnhX6iO0sHoTAVReWv1O1dbNCEeOBOFdnyzFins6ZC5EnAl/oBPR/KLd8glHtgM3Jt8dvIVlBXPEPZKZwaw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-data-scroll-overflow": "2.1.6"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/select": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@nextui-org/select/-/select-2.2.5.tgz",
-      "integrity": "sha512-Il1eigjSXOBgJ745nhn6TDPD1jj1avrnvk9WV/DCjOsFRwfstRnDzsS1aNpZKHqJgHhFRQZ1ivz8hA4x3Zgasg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/listbox": "2.1.25",
-        "@nextui-org/popover": "2.1.27",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/scroll-shadow": "2.1.19",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/spinner": "2.0.33",
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@nextui-org/use-aria-multiselect": "2.2.3",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/form": "3.0.5",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/shared-icons": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@nextui-org/shared-icons/-/shared-icons-2.0.9.tgz",
-      "integrity": "sha512-WG3yinVY7Tk9VqJgcdF4V8Ok9+fcm5ey7S1els7kujrfqLYxtqoKywgiY/7QHwZlfQkzpykAfy+NAlHkTP5hMg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/shared-utils": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@nextui-org/shared-utils/-/shared-utils-2.0.7.tgz",
-      "integrity": "sha512-FxY3N0i1Al7Oz3yOQN0dSpG8UUrLIP3iYh3ubD7BhdQoZLl5xbG6++q1gqOzZXV+ZWeUFMY/or0ofzWxGHiOow==",
-      "license": "MIT"
-    },
-    "node_modules/@nextui-org/skeleton": {
-      "version": "2.0.31",
-      "resolved": "https://registry.npmjs.org/@nextui-org/skeleton/-/skeleton-2.0.31.tgz",
-      "integrity": "sha512-pT0l2skPP6Nq9edLJNQxUJI/WLKu4Lx5Vvs7nlE/9NpkxyQ805l4LiYsMD30dkjjxe+WpXtIjjAXY0BQqdid0Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/slider": {
-      "version": "2.2.15",
-      "resolved": "https://registry.npmjs.org/@nextui-org/slider/-/slider-2.2.15.tgz",
-      "integrity": "sha512-ImsxvxAJ2wxRL45y4IbVWThZI/vw2Gq/6qUVZFAwyF54dlro08eJZJIOOG7bKfA5Ob63JLfroUijrlZ9kGP5cA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/tooltip": "2.0.39",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/slider": "3.7.8",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/slider": "3.5.4"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/snippet": {
-      "version": "2.0.41",
-      "resolved": "https://registry.npmjs.org/@nextui-org/snippet/-/snippet-2.0.41.tgz",
-      "integrity": "sha512-ZZopaecAZbKJIdabwGVF3ahL2MM7L0zZII61SO3LDPAwqXOuta9ixMYk1XVCI0V2PVqTkabQgdpt1ZLgmFH+Kw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/button": "2.0.37",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/tooltip": "2.0.39",
-        "@nextui-org/use-clipboard": "2.0.6",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/utils": "3.24.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/spacer": {
-      "version": "2.0.32",
-      "resolved": "https://registry.npmjs.org/@nextui-org/spacer/-/spacer-2.0.32.tgz",
-      "integrity": "sha512-NxqEYTig4OfkLDPlO2/jASB4gV8L9DLpsNZSqzaacIJZwk4BCTsNoBi3CuNt5ZsMoGYujtFP6QU0zH9fZbuzwA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system-rsc": "2.1.5"
-      },
-      "peerDependencies": {
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/spinner": {
-      "version": "2.0.33",
-      "resolved": "https://registry.npmjs.org/@nextui-org/spinner/-/spinner-2.0.33.tgz",
-      "integrity": "sha512-c1wW4YEbzdn0t1MJAXhJ2W0PuNxrxtZg2DVqJeqh3180y4iQPYDzEy7oFoU0FpK53LcBPxjfsKHNL6v1pn+60A==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/system-rsc": "2.1.5"
-      },
-      "peerDependencies": {
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/switch": {
-      "version": "2.0.33",
-      "resolved": "https://registry.npmjs.org/@nextui-org/switch/-/switch-2.0.33.tgz",
-      "integrity": "sha512-T7w+8+ex7Pey9HVGXkNft4D11mO5J9iPfmemfLbSOYqbSydcOuINuGRQ1QWy7X+lLYhhZBHb9Ykcf4QtR4dqTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/switch": "3.6.4",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/toggle": "3.7.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/system": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@nextui-org/system/-/system-2.2.5.tgz",
-      "integrity": "sha512-nrX6768aiyWtpxX3OTFBIVWR+v9nlMsC3KaBinNfek97sNm7gAfTHi7q5kylE3L5yIMpNG+DclAKpuxgDQEmvw==",
-      "license": "MIT",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/system-rsc": "2.1.5",
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/overlays": "3.22.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/utils": "3.10.1"
-      },
-      "peerDependencies": {
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/system-rsc": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nextui-org/system-rsc/-/system-rsc-2.1.5.tgz",
-      "integrity": "sha512-tkJLAyJu34Rr5KUMMqoB7cZjOVXB+7a/7N4ushZfuiLdoYijgmcXFMzLxjm+tbt9zA5AV+ivsfbHvscg77dJ6w==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-types/shared": "3.23.1",
-        "clsx": "^1.2.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/table": {
-      "version": "2.0.39",
-      "resolved": "https://registry.npmjs.org/@nextui-org/table/-/table-2.0.39.tgz",
-      "integrity": "sha512-VYvmrQ6GliwmzukKLZ7Nxp3sFXdskWZp8/BjwROLFE9Zco22CC0++7VPG3ebOYAIhi4e1Je+QUTx4/eh2wZZgg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/checkbox": "2.1.4",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-icons": "2.0.9",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/spacer": "2.0.32",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/table": "3.14.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-aria/visually-hidden": "3.8.12",
-        "@react-stately/table": "3.11.8",
-        "@react-stately/virtualizer": "3.7.1",
-        "@react-types/grid": "3.2.6",
-        "@react-types/table": "3.9.5"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/tabs": {
-      "version": "2.0.35",
-      "resolved": "https://registry.npmjs.org/@nextui-org/tabs/-/tabs-2.0.35.tgz",
-      "integrity": "sha512-K6uDZbJwn1qLRw8XeBS2TwGQl9zKXg3Q1ShLzVG2IjTGHGNAn9lwkUzn0FNUNaU1GK2o8wOyKhX7K02J3Ev5fw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-is-mounted": "2.0.6",
-        "@nextui-org/use-update-effect": "2.0.6",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/tabs": "3.9.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/tabs": "3.6.6",
-        "@react-types/shared": "3.23.1",
-        "@react-types/tabs": "3.3.7",
-        "scroll-into-view-if-needed": "3.0.10"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/theme": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@nextui-org/theme/-/theme-2.2.9.tgz",
-      "integrity": "sha512-TN2I9sMriLaj00pXsIMlg19+UHeOdjzS2JV0u4gjL14mSbQl5BYNxgbvU3gbMqkZZQ6OpwT4RnT8RS+ks6TXCw==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^1.2.1",
-        "color": "^4.2.3",
-        "color2k": "^2.0.2",
-        "deepmerge": "4.3.1",
-        "flat": "^5.0.2",
-        "lodash.foreach": "^4.5.0",
-        "lodash.get": "^4.4.2",
-        "lodash.kebabcase": "^4.1.1",
-        "lodash.mapkeys": "^4.6.0",
-        "lodash.omit": "^4.5.0",
-        "tailwind-merge": "^1.14.0",
-        "tailwind-variants": "^0.1.20"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.4.0"
-      }
-    },
-    "node_modules/@nextui-org/tooltip": {
-      "version": "2.0.39",
-      "resolved": "https://registry.npmjs.org/@nextui-org/tooltip/-/tooltip-2.0.39.tgz",
-      "integrity": "sha512-DWP3XAmVb/SlcdI4SQodtT8ZyMzYMuvRbq4+JQwm+qq1+FGs55z15+8h9DRFQEseEEaDs0hCs6+kgbieZlUitw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/aria-utils": "2.0.24",
-        "@nextui-org/framer-utils": "2.0.24",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@nextui-org/use-safe-layout-effect": "2.0.6",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/overlays": "3.22.1",
-        "@react-aria/tooltip": "3.7.4",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/tooltip": "3.4.9",
-        "@react-types/overlays": "3.8.7",
-        "@react-types/tooltip": "3.4.9"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "framer-motion": ">=10.17.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-accordion": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-accordion/-/use-aria-accordion-2.0.7.tgz",
-      "integrity": "sha512-VzGlxmsu2tWG2Pht1e0PBz40jz95v0OEKYVXq91WpDMwj8Bl1CYvxrw2Qz41/5Xi0X843Mmo4sPwrc/hk0+RHA==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/button": "3.9.5",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/selection": "3.18.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/tree": "3.8.1",
-        "@react-types/accordion": "3.0.0-alpha.21",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-button": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-button/-/use-aria-button-2.0.10.tgz",
-      "integrity": "sha512-tUpp4QMr1zugKPevyToeRHIufTuc/g+67/r/oQLRTG0mMo3yGVmggykQuYn22fqqZPpW6nHcB9VYc+XtZZ27TQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/button": "3.9.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-link": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-link/-/use-aria-link-2.0.19.tgz",
-      "integrity": "sha512-ef61cJLlwcR4zBWiaeHZy4K18juFjUup2SslfLIAiZz3kVosBCGKmkJkw1SASYY8+D/oUc2B6BFIk25YEsRKRw==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/utils": "3.24.1",
-        "@react-types/link": "3.5.5",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-menu": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-menu/-/use-aria-menu-2.0.6.tgz",
-      "integrity": "sha512-fGDF25E99THbgeDV2r2w4BHw5ZbGW3Lu6Y+vbLUcLBBh6x8/W8cqrpYFrzSUzn1RCun1t17yOAHZEV2rbvtMzA==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/menu": "3.14.1",
-        "@react-aria/selection": "3.18.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/collections": "3.10.7",
-        "@react-stately/tree": "3.8.1",
-        "@react-types/menu": "3.9.9",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-modal-overlay": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-modal-overlay/-/use-aria-modal-overlay-2.0.11.tgz",
-      "integrity": "sha512-crMOCHyGIiBJiihxqidJCNR3AHH62uewfImDLEwyE/SlIkhAqW5jteUhkq0QfCSH4U/ydWisQ14niWDEgtzxXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/overlays": "3.22.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/overlays": "3.6.7",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-multiselect": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-multiselect/-/use-aria-multiselect-2.2.3.tgz",
-      "integrity": "sha512-VeRoyyUUVgJ7DrdfzU6onjohHxJfG7bmwpIfQyurMzvTZcmcVUGTnddAnRPVEoOro68tTAj4IuPs/4xkf1aXxg==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/i18n": "3.11.1",
-        "@react-aria/interactions": "3.21.3",
-        "@react-aria/label": "3.7.8",
-        "@react-aria/listbox": "3.12.1",
-        "@react-aria/menu": "3.14.1",
-        "@react-aria/selection": "3.18.1",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/form": "3.0.3",
-        "@react-stately/list": "3.10.5",
-        "@react-stately/menu": "3.7.1",
-        "@react-types/button": "3.9.4",
-        "@react-types/overlays": "3.8.7",
-        "@react-types/select": "3.9.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-aria-toggle-button": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-aria-toggle-button/-/use-aria-toggle-button-2.0.10.tgz",
-      "integrity": "sha512-U5jOmEO+nMIgYvBF0+gJtdq8C6dynGMjzAboPG4FhuHOzDoNiC12G5FIbGnRe8K1hMsKVuaI72p9986NhfqNgw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/use-aria-button": "2.0.10",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/toggle": "3.7.4",
-        "@react-types/button": "3.9.4",
-        "@react-types/shared": "3.23.1"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-callback-ref": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-callback-ref/-/use-callback-ref-2.0.6.tgz",
-      "integrity": "sha512-2WcwWuK1L/wIpTbibnLrysmmkzWomvkVIcgWayB6n/w+bpPrPCG7Zyg2WHzmMmDhe6imV//KKBgNKRi8Xhu/VA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/use-safe-layout-effect": "2.0.6"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-clipboard": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-clipboard/-/use-clipboard-2.0.6.tgz",
-      "integrity": "sha512-UQbCoAX1vqEKYeMF8Xp2RdTqbDD8Or16+7W4f8OQc5+uaJeKaAL6LPITi5M5ipgruTvzM845XooHdiAStH322Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-data-scroll-overflow": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-data-scroll-overflow/-/use-data-scroll-overflow-2.1.6.tgz",
-      "integrity": "sha512-z9XzBF64qjTSp6jTttMDEPku7Xpgci/tYTokEQHWgydRg3FZEaBqRgOOMeiXAV1Py/kQB062MjPSneUtwYlozA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/shared-utils": "2.0.7"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-disclosure": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-disclosure/-/use-disclosure-2.0.10.tgz",
-      "integrity": "sha512-s2I58d7x2f1JRriZnNm9ZoxrGmxF+DnC9BXM1sD99Wq1VNMd0dhitmx0mUWfUB7l5HLyZgKOeiSLG+ugy1F1Yw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/use-callback-ref": "2.0.6",
-        "@react-aria/utils": "3.24.1",
-        "@react-stately/utils": "3.10.1"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-image": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-image/-/use-image-2.0.6.tgz",
-      "integrity": "sha512-VelN9y3vzwIpPfubFMh00YRQ0f4+I5FElcAvAqoo0Kfb0K7sGrTo1lZNApHm6yBN2gJMMeccG9u7bZB+wcDGZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/use-safe-layout-effect": "2.0.6"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-is-mobile": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-is-mobile/-/use-is-mobile-2.0.9.tgz",
-      "integrity": "sha512-u5pRmPV0wacdpOcAkQnWwE30yNBl2uk1WvbWkrSELxIVRN22+fTIYn8ynnHK0JbJFTA6/5zh7uIfETQu3L6KjA==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-aria/ssr": "3.9.4"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-is-mounted": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-is-mounted/-/use-is-mounted-2.0.6.tgz",
-      "integrity": "sha512-/lcMdYnwBZ1EuKMLRIhHeAZG8stXWNTz7wBweAlLId23VC4VHgCp/s9K9Vbj1A5/r8FiFQeoTmXQuMAMUoPRtg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-measure": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-measure/-/use-measure-2.0.2.tgz",
-      "integrity": "sha512-H/RSPPA9B5sZ10wiXR3jLlYFEuiVnc0O/sgLLQfrb5M0hvHoaqMThnsZpm//5iyS7tD7kxPeYNLa1EhzlQKxDA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-pagination": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-pagination/-/use-pagination-2.0.9.tgz",
-      "integrity": "sha512-p5Gssyb71/SjRezq2o1aRsYTmC9idziW3pLCJFpVwLGfgWNARf9C6NS1oQsqKgjF5lvzoa88soZRDhKKvRAt/g==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/i18n": "3.11.1"
-      },
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-safe-layout-effect": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-safe-layout-effect/-/use-safe-layout-effect-2.0.6.tgz",
-      "integrity": "sha512-xzEJXf/g9GaSqjLpQ4+Z2/pw1GPq2Fc5cWRGqEXbGauEMXuH8UboRls1BmIV1RuOpqI6FgxkEmxL1EuVIRVmvQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-scroll-position": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-scroll-position/-/use-scroll-position-2.0.8.tgz",
-      "integrity": "sha512-sUuoLEPWxCNlgzayy3VZSneVA1rKSdh4kBuBbYJTp/g2yyrpZYnyYzWpeNJ4dhDQr1cpTDODehJekWPBhNN+uw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/use-update-effect": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@nextui-org/use-update-effect/-/use-update-effect-2.0.6.tgz",
-      "integrity": "sha512-n5Qiv3ferKn+cSxU3Vv+96LdG8I/00mzc7Veoan+P9GL0aCTrsPB6RslTsiblaiAXQcqTiFXd8xwsK309DXOXA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18"
-      }
-    },
-    "node_modules/@nextui-org/user": {
-      "version": "2.0.33",
-      "resolved": "https://registry.npmjs.org/@nextui-org/user/-/user-2.0.33.tgz",
-      "integrity": "sha512-v6gGTlsaqM7Ndwtx9N/AAQFRICcIE5DuFxRZRqPfLa+jbZhJuWG2OSIATPeUOxgr8pKWpeV78nETdFKEKcsUPA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nextui-org/avatar": "2.0.32",
-        "@nextui-org/react-utils": "2.0.16",
-        "@nextui-org/shared-utils": "2.0.7",
-        "@react-aria/focus": "3.17.1",
-        "@react-aria/utils": "3.24.1"
-      },
-      "peerDependencies": {
-        "@nextui-org/system": ">=2.0.0",
-        "@nextui-org/theme": ">=2.1.0",
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@prisma/client": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.17.0.tgz",
-      "integrity": "sha512-N2tnyKayT0Zf7mHjwEyE8iG7FwTmXDHFZ1GnNhQp0pJUObsuel4ZZ1XwfuAYkq5mRIiC/Kot0kt0tGCfLJ70Jw==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=16.13"
-      },
-      "peerDependencies": {
-        "prisma": "*"
-      },
-      "peerDependenciesMeta": {
-        "prisma": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@prisma/debug": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.17.0.tgz",
-      "integrity": "sha512-l7+AteR3P8FXiYyo496zkuoiJ5r9jLQEdUuxIxNCN1ud8rdbH3GTxm+f+dCyaSv9l9WY+29L9czaVRXz9mULfg==",
-      "devOptional": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/@prisma/engines": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.17.0.tgz",
-      "integrity": "sha512-+r+Nf+JP210Jur+/X8SIPLtz+uW9YA4QO5IXA+KcSOBe/shT47bCcRMTYCbOESw3FFYFTwe7vU6KTWHKPiwvtg==",
-      "devOptional": true,
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@prisma/debug": "5.17.0",
-        "@prisma/engines-version": "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053",
-        "@prisma/fetch-engine": "5.17.0",
-        "@prisma/get-platform": "5.17.0"
-      }
-    },
-    "node_modules/@prisma/engines-version": {
-      "version": "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053",
-      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053.tgz",
-      "integrity": "sha512-tUuxZZysZDcrk5oaNOdrBnnkoTtmNQPkzINFDjz7eG6vcs9AVDmA/F6K5Plsb2aQc/l5M2EnFqn3htng9FA4hg==",
-      "devOptional": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/@prisma/fetch-engine": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.17.0.tgz",
-      "integrity": "sha512-ESxiOaHuC488ilLPnrv/tM2KrPhQB5TRris/IeIV4ZvUuKeaicCl4Xj/JCQeG9IlxqOgf1cCg5h5vAzlewN91Q==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@prisma/debug": "5.17.0",
-        "@prisma/engines-version": "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053",
-        "@prisma/get-platform": "5.17.0"
-      }
-    },
-    "node_modules/@prisma/get-platform": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.17.0.tgz",
-      "integrity": "sha512-UlDgbRozCP1rfJ5Tlkf3Cnftb6srGrEQ4Nm3og+1Se2gWmCZ0hmPIi+tQikGDUVLlvOWx3Gyi9LzgRP+HTXV9w==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@prisma/debug": "5.17.0"
-      }
-    },
-    "node_modules/@react-aria/breadcrumbs": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz",
-      "integrity": "sha512-G1Gqf/P6kVdfs94ovwP18fTWuIxadIQgHsXS08JEVcFVYMjb9YjqnEBaohUxD1tq2WldMbYw53ahQblT4NTG+g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/link": "^3.7.1",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/breadcrumbs": "^3.7.5",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/button": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/button/-/button-3.9.5.tgz",
-      "integrity": "sha512-dgcYR6j8WDOMLKuVrtxzx4jIC05cVKDzc+HnPO8lNkBAOfjcuN5tkGRtIjLtqjMvpZHhQT5aDbgFpIaZzxgFIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/toggle": "^3.7.4",
-        "@react-types/button": "^3.9.4",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/calendar": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@react-aria/calendar/-/calendar-3.5.8.tgz",
-      "integrity": "sha512-Whlp4CeAA5/ZkzrAHUv73kgIRYjw088eYGSc+cvSOCxfrc/2XkBm9rNrnSBv0DvhJ8AG0Fjz3vYakTmF3BgZBw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/live-announcer": "^3.3.4",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/calendar": "^3.5.1",
-        "@react-types/button": "^3.9.4",
-        "@react-types/calendar": "^3.4.6",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/checkbox": {
-      "version": "3.14.3",
-      "resolved": "https://registry.npmjs.org/@react-aria/checkbox/-/checkbox-3.14.3.tgz",
-      "integrity": "sha512-EtBJL6iu0gvrw3A4R7UeVLR6diaVk/mh4kFBc7c8hQjpEJweRr4hmJT3hrNg3MBcTWLxFiMEXPGgWEwXDBygtA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/form": "^3.0.5",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/toggle": "^3.10.4",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/checkbox": "^3.6.5",
-        "@react-stately/form": "^3.0.3",
-        "@react-stately/toggle": "^3.7.4",
-        "@react-types/checkbox": "^3.8.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/combobox": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/combobox/-/combobox-3.9.1.tgz",
-      "integrity": "sha512-SpK92dCmT8qn8aEcUAihRQrBb5LZUhwIbDExFII8PvUvEFy/PoQHXIo3j1V29WkutDBDpMvBv/6XRCHGXPqrhQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/listbox": "^3.12.1",
-        "@react-aria/live-announcer": "^3.3.4",
-        "@react-aria/menu": "^3.14.1",
-        "@react-aria/overlays": "^3.22.1",
-        "@react-aria/selection": "^3.18.1",
-        "@react-aria/textfield": "^3.14.5",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/combobox": "^3.8.4",
-        "@react-stately/form": "^3.0.3",
-        "@react-types/button": "^3.9.4",
-        "@react-types/combobox": "^3.11.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/datepicker": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/datepicker/-/datepicker-3.10.1.tgz",
-      "integrity": "sha512-4HZL593nrNMa1GjBmWEN/OTvNS6d3/16G1YJWlqiUlv11ADulSbqBIjMmkgwrJVFcjrgqtXFy+yyrTA/oq94Zw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@internationalized/number": "^3.5.3",
-        "@internationalized/string": "^3.2.3",
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/form": "^3.0.5",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/spinbutton": "^3.6.5",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/datepicker": "^3.9.4",
-        "@react-stately/form": "^3.0.3",
-        "@react-types/button": "^3.9.4",
-        "@react-types/calendar": "^3.4.6",
-        "@react-types/datepicker": "^3.7.4",
-        "@react-types/dialog": "^3.5.10",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/dialog": {
-      "version": "3.5.14",
-      "resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.14.tgz",
-      "integrity": "sha512-oqDCjQ8hxe3GStf48XWBf2CliEnxlR9GgSYPHJPUc69WBj68D9rVcCW3kogJnLAnwIyf3FnzbX4wSjvUa88sAQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/overlays": "^3.22.1",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/dialog": "^3.5.10",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/focus": {
-      "version": "3.17.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.17.1.tgz",
-      "integrity": "sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/focus/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@react-aria/form": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/form/-/form-3.0.5.tgz",
-      "integrity": "sha512-n290jRwrrRXO3fS82MyWR+OKN7yznVesy5Q10IclSTVYHHI3VI53xtAPr/WzNjJR1um8aLhOcDNFKwnNIUUCsQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/form": "^3.0.3",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/grid/-/grid-3.10.1.tgz",
-      "integrity": "sha512-7dSgiYVQapBtPV4SIit+9fJ1qoEjtp+PXffJkWAPtGbg/jJ4b0jcVzykH7ARD4w/6jAJN/oVSfrKZqFPoLAd9w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.18.1",
-        "@react-aria/i18n": "^3.12.1",
-        "@react-aria/interactions": "^3.22.1",
-        "@react-aria/live-announcer": "^3.3.4",
-        "@react-aria/selection": "^3.19.1",
-        "@react-aria/utils": "^3.25.1",
-        "@react-stately/collections": "^3.10.9",
-        "@react-stately/grid": "^3.9.1",
-        "@react-stately/selection": "^3.16.1",
-        "@react-types/checkbox": "^3.8.3",
-        "@react-types/grid": "^3.2.8",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-aria/focus": {
-      "version": "3.18.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.1.tgz",
-      "integrity": "sha512-N0Cy61WCIv+57mbqC7hiZAsB+3rF5n4JKabxUmg/2RTJL6lq7hJ5N4gx75ymKxkN8GnVDwt4pKZah48Wopa5jw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.22.1",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-aria/i18n": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.12.1.tgz",
-      "integrity": "sha512-0q3gyogF9Ekah+9LOo6tcfshxsk2Ope+KdbtFHJVhznedMxn6RpHGcVur5ImbQ1dYafA5CmjBUGJW70b56+BGA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.5",
-        "@internationalized/message": "^3.1.4",
-        "@internationalized/number": "^3.5.3",
-        "@internationalized/string": "^3.2.3",
-        "@react-aria/ssr": "^3.9.5",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-aria/interactions": {
-      "version": "3.22.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.1.tgz",
-      "integrity": "sha512-5TLzQaDAQQ5C70yG8GInbO4wIylKY67RfTIIwQPGR/4n5OIjbUD8BOj3NuSsuZ/frUPaBXo1VEBBmSO23fxkjw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-aria/selection": {
-      "version": "3.19.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.19.1.tgz",
-      "integrity": "sha512-mbExvq2Omi60sTWFGjwcNz1ja2P8VDsxWAqSypHRTyqXhtgqbv8V/v8Gp+7BmVPH1YHcbhztl6rvUZTDOSszzw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.18.1",
-        "@react-aria/i18n": "^3.12.1",
-        "@react-aria/interactions": "^3.22.1",
-        "@react-aria/utils": "^3.25.1",
-        "@react-stately/selection": "^3.16.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-aria/ssr": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
-      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-aria/utils": {
-      "version": "3.25.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
-      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-stately/collections": {
-      "version": "3.10.9",
-      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
-      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-stately/utils": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
-      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-types/checkbox": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.3.tgz",
-      "integrity": "sha512-f4c1mnLEt0iS1NMkyZXgT3q3AgcxzDk7w6MSONOKydcnh0xG5L2oefY14DhVDLkAuQS7jThlUFwiAs+MxiO3MA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-types/grid": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.8.tgz",
-      "integrity": "sha512-6PJrpukwMqlv3IhJSDkJuVbhHM8Oe6hd2supWqd9adMXrlSP7QHt9a8SgFcFblCCTx8JzUaA0PvY5sTudcEtOQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/grid/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@react-aria/i18n": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.11.1.tgz",
-      "integrity": "sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@internationalized/message": "^3.1.4",
-        "@internationalized/number": "^3.5.3",
-        "@internationalized/string": "^3.2.3",
-        "@react-aria/ssr": "^3.9.4",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/interactions": {
-      "version": "3.21.3",
-      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.3.tgz",
-      "integrity": "sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.4",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/label": {
-      "version": "3.7.8",
-      "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.7.8.tgz",
-      "integrity": "sha512-MzgTm5+suPA3KX7Ug6ZBK2NX9cin/RFLsv1BdafJ6CZpmUSpWnGE/yQfYUB7csN7j31OsZrD3/P56eShYWAQfg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/link": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/link/-/link-3.7.1.tgz",
-      "integrity": "sha512-a4IaV50P3fXc7DQvEIPYkJJv26JknFbRzFT5MJOMgtzuhyJoQdILEUK6XHYjcSSNCA7uLgzpojArVk5Hz3lCpw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/link": "^3.5.5",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/listbox": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/listbox/-/listbox-3.12.1.tgz",
-      "integrity": "sha512-7JiUp0NGykbv/HgSpmTY1wqhuf/RmjFxs1HZcNaTv8A+DlzgJYc7yQqFjP3ZA/z5RvJFuuIxggIYmgIFjaRYdA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/selection": "^3.18.1",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/list": "^3.10.5",
-        "@react-types/listbox": "^3.4.9",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/live-announcer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.3.4.tgz",
-      "integrity": "sha512-w8lxs35QrRrn6pBNzVfyGOeqWdxeVKf9U6bXIVwhq7rrTqRULL8jqy8RJIMfIs1s8G5FpwWYjyBOjl2g5Cu1iA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@react-aria/menu": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/menu/-/menu-3.14.1.tgz",
-      "integrity": "sha512-BYliRb38uAzq05UOFcD5XkjA5foQoXRbcH3ZufBsc4kvh79BcP1PMW6KsXKGJ7dC/PJWUwCui6QL1kUg8PqMHA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/overlays": "^3.22.1",
-        "@react-aria/selection": "^3.18.1",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/menu": "^3.7.1",
-        "@react-stately/tree": "^3.8.1",
-        "@react-types/button": "^3.9.4",
-        "@react-types/menu": "^3.9.9",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/overlays": {
-      "version": "3.22.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.22.1.tgz",
-      "integrity": "sha512-GHiFMWO4EQ6+j6b5QCnNoOYiyx1Gk8ZiwLzzglCI4q1NY5AG2EAmfU4Z1+Gtrf2S5Y0zHbumC7rs9GnPoGLUYg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/ssr": "^3.9.4",
-        "@react-aria/utils": "^3.24.1",
-        "@react-aria/visually-hidden": "^3.8.12",
-        "@react-stately/overlays": "^3.6.7",
-        "@react-types/button": "^3.9.4",
-        "@react-types/overlays": "^3.8.7",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/progress": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/@react-aria/progress/-/progress-3.4.13.tgz",
-      "integrity": "sha512-YBV9bOO5JzKvG8QCI0IAA00o6FczMgIDiK8Q9p5gKorFMatFUdRayxlbIPoYHMi+PguLil0jHgC7eOyaUcrZ0g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/progress": "^3.5.4",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/radio": {
-      "version": "3.10.4",
-      "resolved": "https://registry.npmjs.org/@react-aria/radio/-/radio-3.10.4.tgz",
-      "integrity": "sha512-3fmoMcQtCpgjTwJReFjnvIE/C7zOZeCeWUn4JKDqz9s1ILYsC3Rk5zZ4q66tFn6v+IQnecrKT52wH6+hlVLwTA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/form": "^3.0.5",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/radio": "^3.10.4",
-        "@react-types/radio": "^3.8.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/selection": {
-      "version": "3.18.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.18.1.tgz",
-      "integrity": "sha512-GSqN2jX6lh7v+ldqhVjAXDcrWS3N4IsKXxO6L6Ygsye86Q9q9Mq9twWDWWu5IjHD6LoVZLUBCMO+ENGbOkyqeQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/selection": "^3.15.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/slider": {
-      "version": "3.7.8",
-      "resolved": "https://registry.npmjs.org/@react-aria/slider/-/slider-3.7.8.tgz",
-      "integrity": "sha512-MYvPcM0K8jxEJJicUK2+WxUkBIM/mquBxOTOSSIL3CszA80nXIGVnLlCUnQV3LOUzpWtabbWaZokSPtGgOgQOw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/slider": "^3.5.4",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/slider": "^3.7.3",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton": {
-      "version": "3.6.7",
-      "resolved": "https://registry.npmjs.org/@react-aria/spinbutton/-/spinbutton-3.6.7.tgz",
-      "integrity": "sha512-OCimp4yXoFIgh6WAMOls5DDDRDRO75ZFic3YA6wLWTRNHxo1Lj8S90i1A6pakY6bi4hdBCKmj4DnFSNKAw1iWg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/i18n": "^3.12.1",
-        "@react-aria/live-announcer": "^3.3.4",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/button": "^3.9.6",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/@react-aria/i18n": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.12.1.tgz",
-      "integrity": "sha512-0q3gyogF9Ekah+9LOo6tcfshxsk2Ope+KdbtFHJVhznedMxn6RpHGcVur5ImbQ1dYafA5CmjBUGJW70b56+BGA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.5",
-        "@internationalized/message": "^3.1.4",
-        "@internationalized/number": "^3.5.3",
-        "@internationalized/string": "^3.2.3",
-        "@react-aria/ssr": "^3.9.5",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/@react-aria/ssr": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
-      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/@react-aria/utils": {
-      "version": "3.25.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
-      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/@react-stately/utils": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
-      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/@react-types/button": {
-      "version": "3.9.6",
-      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.6.tgz",
-      "integrity": "sha512-8lA+D5JLbNyQikf8M/cPP2cji91aVTcqjrGpDqI7sQnaLFikM8eFR6l1ZWGtZS5MCcbfooko77ha35SYplSQvw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/spinbutton/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",
-      "integrity": "sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/switch": {
-      "version": "3.6.4",
-      "resolved": "https://registry.npmjs.org/@react-aria/switch/-/switch-3.6.4.tgz",
-      "integrity": "sha512-2nVqz4ZuJyof47IpGSt3oZRmp+EdS8wzeDYgf42WHQXrx4uEOk1mdLJ20+NnsYhj/2NHZsvXVrjBeKMjlMs+0w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/toggle": "^3.10.4",
-        "@react-stately/toggle": "^3.7.4",
-        "@react-types/switch": "^3.5.3",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/table": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/table/-/table-3.14.1.tgz",
-      "integrity": "sha512-WaPgQe4zQF5OaluO5rm+Y2nEoFR63vsLd4BT4yjK1uaFhKhDY2Zk+1SCVQvBLLKS4WK9dhP05nrNzT0vp/ZPOw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/grid": "^3.9.1",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/live-announcer": "^3.3.4",
-        "@react-aria/utils": "^3.24.1",
-        "@react-aria/visually-hidden": "^3.8.12",
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/flags": "^3.0.3",
-        "@react-stately/table": "^3.11.8",
-        "@react-stately/virtualizer": "^3.7.1",
-        "@react-types/checkbox": "^3.8.1",
-        "@react-types/grid": "^3.2.6",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/table": "^3.9.5",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/tabs": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/tabs/-/tabs-3.9.1.tgz",
-      "integrity": "sha512-S5v/0sRcOaSXaJYZuuy1ZVzYc7JD4sDyseG1133GjyuNjJOFHgoWMb+b4uxNIJbZxnLgynn/ZDBZSO+qU+fIxw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/i18n": "^3.11.1",
-        "@react-aria/selection": "^3.18.1",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/tabs": "^3.6.6",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/tabs": "^3.3.7",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/textfield": {
-      "version": "3.14.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/textfield/-/textfield-3.14.5.tgz",
-      "integrity": "sha512-hj7H+66BjB1iTKKaFXwSZBZg88YT+wZboEXZ0DNdQB2ytzoz/g045wBItUuNi4ZjXI3P+0AOZznVMYadWBAmiA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/form": "^3.0.5",
-        "@react-aria/label": "^3.7.8",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/form": "^3.0.3",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/textfield": "^3.9.3",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle": {
-      "version": "3.10.6",
-      "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.10.6.tgz",
-      "integrity": "sha512-AGlbtB1b8grrtjbiW5Au0LKYzxR83RHbHhaUkFwajyYRGyuEzr3Y03OiveoPB+DayA8Gz3H1ZVmW++8JZQOWHw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.18.1",
-        "@react-aria/interactions": "^3.22.1",
-        "@react-aria/utils": "^3.25.1",
-        "@react-stately/toggle": "^3.7.6",
-        "@react-types/checkbox": "^3.8.3",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-aria/focus": {
-      "version": "3.18.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.1.tgz",
-      "integrity": "sha512-N0Cy61WCIv+57mbqC7hiZAsB+3rF5n4JKabxUmg/2RTJL6lq7hJ5N4gx75ymKxkN8GnVDwt4pKZah48Wopa5jw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.22.1",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-aria/interactions": {
-      "version": "3.22.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.1.tgz",
-      "integrity": "sha512-5TLzQaDAQQ5C70yG8GInbO4wIylKY67RfTIIwQPGR/4n5OIjbUD8BOj3NuSsuZ/frUPaBXo1VEBBmSO23fxkjw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-aria/utils": "^3.25.1",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-aria/ssr": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
-      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-aria/utils": {
-      "version": "3.25.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
-      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.5",
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-stately/toggle": {
-      "version": "3.7.6",
-      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.6.tgz",
-      "integrity": "sha512-xRZyrjNVu1VCd1xpg5RwmNYs9fXb+JHChoUaRcBmGCCjsPD0R5uR3iNuE17RXJtWS3/8o9IJVn90+/7NW7boOg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/checkbox": "^3.8.3",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-stately/utils": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
-      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-types/checkbox": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.3.tgz",
-      "integrity": "sha512-f4c1mnLEt0iS1NMkyZXgT3q3AgcxzDk7w6MSONOKydcnh0xG5L2oefY14DhVDLkAuQS7jThlUFwiAs+MxiO3MA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-aria/toggle/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@react-aria/tooltip": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@react-aria/tooltip/-/tooltip-3.7.4.tgz",
-      "integrity": "sha512-+XRx4HlLYqWY3fB8Z60bQi/rbWDIGlFUtXYbtoa1J+EyRWfhpvsYImP8qeeNO/vgjUtDy1j9oKa8p6App9mBMQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-stately/tooltip": "^3.4.9",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/tooltip": "^3.4.9",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/utils": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.24.1.tgz",
-      "integrity": "sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.4",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-aria/utils/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@react-aria/visually-hidden": {
-      "version": "3.8.12",
-      "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.12.tgz",
-      "integrity": "sha512-Bawm+2Cmw3Xrlr7ARzl2RLtKh0lNUdJ0eNqzWcyx4c0VHUAWtThmH5l+HRqFUGzzutFZVo89SAy40BAbd0gjVw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.21.3",
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/calendar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.5.1.tgz",
-      "integrity": "sha512-7l7QhqGUJ5AzWHfvZzbTe3J4t72Ht5BmhW4hlVI7flQXtfrmYkVtl3ZdytEZkkHmWGYZRW9b4IQTQGZxhtlElA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/calendar": "^3.4.6",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/checkbox": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.6.5.tgz",
-      "integrity": "sha512-IXV3f9k+LtmfQLE+DKIN41Q5QB/YBLDCB1YVx5PEdRp52S9+EACD5683rjVm8NVRDwjMi2SP6RnFRk7fVb5Azg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/form": "^3.0.3",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/checkbox": "^3.8.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/collections": {
-      "version": "3.10.7",
-      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.7.tgz",
-      "integrity": "sha512-KRo5O2MWVL8n3aiqb+XR3vP6akmHLhLWYZEmPKjIv0ghQaEebBTrN3wiEjtd6dzllv0QqcWvDLM1LntNfJ2TsA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/combobox": {
-      "version": "3.8.4",
-      "resolved": "https://registry.npmjs.org/@react-stately/combobox/-/combobox-3.8.4.tgz",
-      "integrity": "sha512-iLVGvKRRz0TeJXZhZyK783hveHpYA6xovOSdzSD+WGYpiPXo1QrcrNoH3AE0Z2sHtorU+8nc0j58vh5PB+m2AA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/form": "^3.0.3",
-        "@react-stately/list": "^3.10.5",
-        "@react-stately/overlays": "^3.6.7",
-        "@react-stately/select": "^3.6.4",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/combobox": "^3.11.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/datepicker": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/@react-stately/datepicker/-/datepicker-3.9.4.tgz",
-      "integrity": "sha512-yBdX01jn6gq4NIVvHIqdjBUPo+WN8Bujc4OnPw+ZnfA4jI0eIgq04pfZ84cp1LVXW0IB0VaCu1AlQ/kvtZjfGA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@internationalized/string": "^3.2.3",
-        "@react-stately/form": "^3.0.3",
-        "@react-stately/overlays": "^3.6.7",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/datepicker": "^3.7.4",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/flags": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.0.3.tgz",
-      "integrity": "sha512-/ha7XFA0RZTQsbzSPwu3KkbNMgbvuM0GuMTYLTBWpgBrovBNTM+QqI/PfZTdHg8PwCYF4H5Y8gjdSpdulCvJFw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@react-stately/form": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@react-stately/form/-/form-3.0.3.tgz",
-      "integrity": "sha512-92YYBvlHEWUGUpXgIaQ48J50jU9XrxfjYIN8BTvvhBHdD63oWgm8DzQnyT/NIAMzdLnhkg7vP+fjG8LjHeyIAg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/grid": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/grid/-/grid-3.9.1.tgz",
-      "integrity": "sha512-LSVIcXO/cqwG0IgDSk2juDbpARBS1IzGnsTp/8vSOejMxq5MXrwxL5hUcqNczL8Ss6aLpELm42tCS0kPm3cMKw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.9",
-        "@react-stately/selection": "^3.16.1",
-        "@react-types/grid": "^3.2.8",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/grid/node_modules/@react-stately/collections": {
-      "version": "3.10.9",
-      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
-      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/grid/node_modules/@react-types/grid": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.8.tgz",
-      "integrity": "sha512-6PJrpukwMqlv3IhJSDkJuVbhHM8Oe6hd2supWqd9adMXrlSP7QHt9a8SgFcFblCCTx8JzUaA0PvY5sTudcEtOQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/grid/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/list": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.10.5.tgz",
-      "integrity": "sha512-fV9plO+6QDHiewsYIhboxcDhF17GO95xepC5ki0bKXo44gr14g/LSo/BMmsaMnV+1BuGdBunB05bO4QOIaigXA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/selection": "^3.15.1",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/menu": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/menu/-/menu-3.7.1.tgz",
-      "integrity": "sha512-mX1w9HHzt+xal1WIT2xGrTQsoLvDwuB2R1Er1MBABs//MsJzccycatcgV/J/28m6tO5M9iuFQQvLV+i1dCtodg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/overlays": "^3.6.7",
-        "@react-types/menu": "^3.9.9",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/overlays": {
-      "version": "3.6.7",
-      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.7.tgz",
-      "integrity": "sha512-6zp8v/iNUm6YQap0loaFx6PlvN8C0DgWHNlrlzMtMmNuvjhjR0wYXVaTfNoUZBWj25tlDM81ukXOjpRXg9rLrw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/overlays": "^3.8.7",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/radio": {
-      "version": "3.10.4",
-      "resolved": "https://registry.npmjs.org/@react-stately/radio/-/radio-3.10.4.tgz",
-      "integrity": "sha512-kCIc7tAl4L7Hu4Wt9l2jaa+MzYmAJm0qmC8G8yPMbExpWbLRu6J8Un80GZu+JxvzgDlqDyrVvyv9zFifwH/NkQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/form": "^3.0.3",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/radio": "^3.8.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/select": {
-      "version": "3.6.6",
-      "resolved": "https://registry.npmjs.org/@react-stately/select/-/select-3.6.6.tgz",
-      "integrity": "sha512-JEpBosWNSXRexE/iReATei1EiVdTIwOWlLcCGw6K7oC/5/f+OHMsh2Kkt/c/RzM/to3vgR+Wbbqwrb712AWgYQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/form": "^3.0.5",
-        "@react-stately/list": "^3.10.7",
-        "@react-stately/overlays": "^3.6.9",
-        "@react-types/select": "^3.9.6",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-stately/collections": {
-      "version": "3.10.9",
-      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
-      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-stately/form": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@react-stately/form/-/form-3.0.5.tgz",
-      "integrity": "sha512-J3plwJ63HQz109OdmaTqTA8Qhvl3gcYYK7DtgKyNP6mc/Me2Q4tl2avkWoA+22NRuv5m+J8TpBk4AVHUEOwqeQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-stately/list": {
-      "version": "3.10.7",
-      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.10.7.tgz",
-      "integrity": "sha512-W5PG7uG5GQV2Q59vXJE7QLKHZIoUNEx+JmHrBUCMKUgyngSpKIIEDR/R/C1b6ZJ9jMqqZA68Zlnd5iK1/mBi1A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.9",
-        "@react-stately/selection": "^3.16.1",
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-stately/overlays": {
-      "version": "3.6.9",
-      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.9.tgz",
-      "integrity": "sha512-4chfyzKw7P2UEainm0yzjUgYwG1ovBejN88eTrn+O62x5huuMCwe0cbMxmYh4y7IhRFSee3jIJd0SP0u/+i39w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/overlays": "^3.8.9",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-stately/utils": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
-      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-types/overlays": {
-      "version": "3.8.9",
-      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.9.tgz",
-      "integrity": "sha512-9ni9upQgXPnR+K9cWmbYWvm3ll9gH8P/XsEZprqIV5zNLMF334jADK48h4jafb1X9RFnj0WbHo6BqcSObzjTig==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-types/select": {
-      "version": "3.9.6",
-      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.9.6.tgz",
-      "integrity": "sha512-cVSFR0eJLup/ht1Uto+y8uyLmHO89J6wNh65SIHb3jeVz9oLBAedP3YNI2qB+F9qFMUcA8PBSLXIIuT6gXzLgQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/select/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/selection": {
-      "version": "3.16.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/selection/-/selection-3.16.1.tgz",
-      "integrity": "sha512-qmnmYaXY7IhhzmIiInec1a/yPxlPSBHka6vrWddvt0S6zN7FU5cv6sm69ONUwYwLKSoaNHgOGvZhmsTzyV0O2A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.9",
-        "@react-stately/utils": "^3.10.2",
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/selection/node_modules/@react-stately/collections": {
-      "version": "3.10.9",
-      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.9.tgz",
-      "integrity": "sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/selection/node_modules/@react-stately/utils": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
-      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/selection/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-stately/slider": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/@react-stately/slider/-/slider-3.5.4.tgz",
-      "integrity": "sha512-Jsf7K17dr93lkNKL9ij8HUcoM1sPbq8TvmibD6DhrK9If2lje+OOL8y4n4qreUnfMT56HCAeS9wCO3fg3eMyrw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/slider": "^3.7.3",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/table": {
-      "version": "3.11.8",
-      "resolved": "https://registry.npmjs.org/@react-stately/table/-/table-3.11.8.tgz",
-      "integrity": "sha512-EdyRW3lT1/kAVDp5FkEIi1BQ7tvmD2YgniGdLuW/l9LADo0T+oxZqruv60qpUS6sQap+59Riaxl91ClDxrJnpg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/flags": "^3.0.3",
-        "@react-stately/grid": "^3.8.7",
-        "@react-stately/selection": "^3.15.1",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/grid": "^3.2.6",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/table": "^3.9.5",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/tabs": {
-      "version": "3.6.6",
-      "resolved": "https://registry.npmjs.org/@react-stately/tabs/-/tabs-3.6.6.tgz",
-      "integrity": "sha512-sOLxorH2uqjAA+v1ppkMCc2YyjgqvSGeBDgtR/lyPSDd4CVMoTExszROX2dqG0c8il9RQvzFuufUtQWMY6PgSA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/list": "^3.10.5",
-        "@react-types/shared": "^3.23.1",
-        "@react-types/tabs": "^3.3.7",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/toggle": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.4.tgz",
-      "integrity": "sha512-CoYFe9WrhLkDP4HGDpJYQKwfiYCRBAeoBQHv+JWl5eyK61S8xSwoHsveYuEZ3bowx71zyCnNAqWRrmNOxJ4CKA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/checkbox": "^3.8.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/tooltip": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.9.tgz",
-      "integrity": "sha512-P7CDJsdoKarz32qFwf3VNS01lyC+63gXpDZG31pUu+EO5BeQd4WKN/AH1Beuswpr4GWzxzFc1aXQgERFGVzraA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/overlays": "^3.6.7",
-        "@react-types/tooltip": "^3.4.9",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/tree": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/tree/-/tree-3.8.1.tgz",
-      "integrity": "sha512-LOdkkruJWch3W89h4B/bXhfr0t0t1aRfEp+IMrrwdRAl23NaPqwl5ILHs4Xu5XDHqqhg8co73pHrJwUyiTWEjw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-stately/collections": "^3.10.7",
-        "@react-stately/selection": "^3.15.1",
-        "@react-stately/utils": "^3.10.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/utils": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.1.tgz",
-      "integrity": "sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-stately/virtualizer": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.7.1.tgz",
-      "integrity": "sha512-voHgE6EQ+oZaLv6u2umKxakvIKNkCQuUihqKACTjdslp7SJh4Mvs3oLBI0hf0JOh+rCcFIKDvQtFwy1fXFRYBA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/utils": "^3.24.1",
-        "@react-types/shared": "^3.23.1",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/accordion": {
-      "version": "3.0.0-alpha.21",
-      "resolved": "https://registry.npmjs.org/@react-types/accordion/-/accordion-3.0.0-alpha.21.tgz",
-      "integrity": "sha512-cbE06jH/ZoI+1898xd7ocQ/A/Rtkz8wTJAVOYgc8VRY1SYNQ/XZTGH5T6dD6aERAmiDwL/kjD7xhsE80DyaEKA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/breadcrumbs": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/@react-types/breadcrumbs/-/breadcrumbs-3.7.5.tgz",
-      "integrity": "sha512-lV9IDYsMiu2TgdMIjEmsOE0YWwjb3jhUNK1DCZZfq6uWuiHLgyx2EncazJBUWSjHJ4ta32j7xTuXch+8Ai6u/A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/link": "^3.5.5",
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/button": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.4.tgz",
-      "integrity": "sha512-raeQBJUxBp0axNF74TXB8/H50GY8Q3eV6cEKMbZFP1+Dzr09Ngv0tJBeW0ewAxAguNH5DRoMUAUGIXtSXskVdA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/calendar": {
-      "version": "3.4.6",
-      "resolved": "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.4.6.tgz",
-      "integrity": "sha512-WSntZPwtvsIYWvBQRAPvuCn55UTJBZroTvX0vQvWykJRQnPAI20G1hMQ3dNsnAL+gLZUYxBXn66vphmjUuSYew==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/checkbox": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.8.1.tgz",
-      "integrity": "sha512-5/oVByPw4MbR/8QSdHCaalmyWC71H/QGgd4aduTJSaNi825o+v/hsN2/CH7Fq9atkLKsC8fvKD00Bj2VGaKriQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/combobox": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/@react-types/combobox/-/combobox-3.11.1.tgz",
-      "integrity": "sha512-UNc3OHt5cUt5gCTHqhQIqhaWwKCpaNciD8R7eQazmHiA9fq8ROlV+7l3gdNgdhJbTf5Bu/V5ISnN7Y1xwL3zqQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/datepicker": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.7.4.tgz",
-      "integrity": "sha512-ZfvgscvNzBJpYyVWg3nstJtA/VlWLwErwSkd1ivZYam859N30w8yH+4qoYLa6FzWLCFlrsRHyvtxlEM7lUAt5A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.5.4",
-        "@react-types/calendar": "^3.4.6",
-        "@react-types/overlays": "^3.8.7",
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/dialog": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.12.tgz",
-      "integrity": "sha512-JmpQbSpXltqEyYfEwoqDolABIiojeExkqolHNdQlayIsfFuSxZxNwXZPOpz58Ri/iwv21JP7K3QF0Gb2Ohxl9w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/overlays": "^3.8.9",
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/dialog/node_modules/@react-types/overlays": {
-      "version": "3.8.9",
-      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.9.tgz",
-      "integrity": "sha512-9ni9upQgXPnR+K9cWmbYWvm3ll9gH8P/XsEZprqIV5zNLMF334jADK48h4jafb1X9RFnj0WbHo6BqcSObzjTig==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/dialog/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/grid": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.6.tgz",
-      "integrity": "sha512-XfHenL2jEBUYrhKiPdeM24mbLRXUn79wVzzMhrNYh24nBwhsPPpxF+gjFddT3Cy8dt6tRInfT6pMEu9nsXwaHw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/link": {
-      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/@react-types/link/-/link-3.5.5.tgz",
-      "integrity": "sha512-G6P5WagHDR87npN7sEuC5IIgL1GsoY4WFWKO4734i2CXRYx24G9P0Su3AX4GA3qpspz8sK1AWkaCzBMmvnunfw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/listbox": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/@react-types/listbox/-/listbox-3.5.1.tgz",
-      "integrity": "sha512-n5bOgD9lgfK1qaLtag9WPnu151SwXBCNn/OgGY/Br9mWRl+nPUEYtFcPX+2VCld7uThf54kwrTmzlFnaraIlcw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/listbox/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/menu": {
-      "version": "3.9.9",
-      "resolved": "https://registry.npmjs.org/@react-types/menu/-/menu-3.9.9.tgz",
-      "integrity": "sha512-FamUaPVs1Fxr4KOMI0YcR2rYZHoN7ypGtgiEiJ11v/tEPjPPGgeKDxii0McCrdOkjheatLN1yd2jmMwYj6hTDg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/overlays": "^3.8.7",
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/overlays": {
-      "version": "3.8.7",
-      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.7.tgz",
-      "integrity": "sha512-zCOYvI4at2DkhVpviIClJ7bRrLXYhSg3Z3v9xymuPH3mkiuuP/dm8mUCtkyY4UhVeUTHmrQh1bzaOP00A+SSQA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/progress": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/@react-types/progress/-/progress-3.5.4.tgz",
-      "integrity": "sha512-JNc246sTjasPyx5Dp7/s0rp3Bz4qlu4LrZTulZlxWyb53WgBNL7axc26CCi+I20rWL9+c7JjhrRxnLl/1cLN5g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/radio": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/@react-types/radio/-/radio-3.8.1.tgz",
-      "integrity": "sha512-bK0gio/qj1+0Ldu/3k/s9BaOZvnnRgvFtL3u5ky479+aLG5qf1CmYed3SKz8ErZ70JkpuCSrSwSCFf0t1IHovw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/select": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.9.4.tgz",
-      "integrity": "sha512-xI7dnOW2st91fPPcv6hdtrTdcfetYiqZuuVPZ5TRobY7Q10/Zqqe/KqtOw1zFKUj9xqNJe4Ov3xP5GSdcO60Eg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/shared": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.23.1.tgz",
-      "integrity": "sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/slider": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/@react-types/slider/-/slider-3.7.5.tgz",
-      "integrity": "sha512-bRitwQRQjQoOcKEdPMljnvm474dwrmsc6pdsVQDh/qynzr+KO9IHuYc3qPW53WVE2hMQJDohlqtCAWQXWQ5Vcg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/slider/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/switch": {
-      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/@react-types/switch/-/switch-3.5.5.tgz",
-      "integrity": "sha512-SZx1Bd+COhAOs/RTifbZG+uq/llwba7VAKx7XBeX4LeIz1dtguy5bigOBgFTMQi4qsIVCpybSWEEl+daj4XFPw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.24.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/switch/node_modules/@react-types/shared": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
-      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-types/table": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-types/table/-/table-3.9.5.tgz",
-      "integrity": "sha512-fgM2j9F/UR4Anmd28CueghCgBwOZoCVyN8fjaIFPd2MN4gCwUUfANwxLav65gZk4BpwUXGoQdsW+X50L3555mg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/grid": "^3.2.6",
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/tabs": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@react-types/tabs/-/tabs-3.3.7.tgz",
-      "integrity": "sha512-ZdLe5xOcFX6+/ni45Dl2jO0jFATpTnoSqj6kLIS/BYv8oh0n817OjJkLf+DS3CLfNjApJWrHqAk34xNh6nRnEg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/textfield": {
-      "version": "3.9.3",
-      "resolved": "https://registry.npmjs.org/@react-types/textfield/-/textfield-3.9.3.tgz",
-      "integrity": "sha512-DoAY6cYOL0pJhgNGI1Rosni7g72GAt4OVr2ltEx2S9ARmFZ0DBvdhA9lL2nywcnKMf27PEJcKMXzXc10qaHsJw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@react-types/tooltip": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.9.tgz",
-      "integrity": "sha512-wZ+uF1+Zc43qG+cOJzioBmLUNjRa7ApdcT0LI1VvaYvH5GdfjzUJOorLX9V/vAci0XMJ50UZ+qsh79aUlw2yqg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-types/overlays": "^3.8.7",
-        "@react-types/shared": "^3.23.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
-    },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
-      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
-      "dependencies": {
-        "@swc/counter": "^0.1.3",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@tootallnate/once": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-      "optional": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@types/lodash": {
-      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
-      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/lodash.debounce": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
-      "integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/lodash": "*"
-      }
-    },
-    "node_modules/@types/webidl-conversions": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
-      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/whatwg-url": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.5.tgz",
-      "integrity": "sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/webidl-conversions": "*"
-      }
-    },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead",
-      "optional": true
-    },
-    "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "optional": true
-    },
-    "node_modules/acorn": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
-      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
-      "optional": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-globals": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-      "optional": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1"
-      }
-    },
-    "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "optional": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "optional": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/aproba": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "optional": true
-    },
-    "node_modules/are-we-there-yet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-    },
-    "node_modules/axios": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
-      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browser-process-hrtime": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
-      "optional": true
-    },
-    "node_modules/bson": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/bson/-/bson-6.8.0.tgz",
-      "integrity": "sha512-iOJg8pr7wq2tg/zSlCCHMi3hMm5JTOxLTagf3zxhcenHsFp+c6uOs6K7W5UE7A4QIJGtqh/ZovFNMP4mOPJynQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=16.20.1"
-      }
-    },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001634",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001634.tgz",
-      "integrity": "sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
-    "node_modules/canvas": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
-      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "@mapbox/node-pre-gyp": "^1.0.0",
-        "nan": "^2.17.0",
-        "simple-get": "^3.0.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/client-only": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
-    },
-    "node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
-    "node_modules/color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "optional": true,
-      "bin": {
-        "color-support": "bin.js"
-      }
-    },
-    "node_modules/color2k": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
-      "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==",
-      "license": "MIT"
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/complex.js": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
-      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://www.patreon.com/infusion"
-      }
-    },
-    "node_modules/compute-scroll-into-view": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
-      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==",
-      "license": "MIT"
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "optional": true
-    },
-    "node_modules/console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "optional": true
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/cssom": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
-      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
-      "optional": true
-    },
-    "node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "optional": true,
-      "dependencies": {
-        "cssom": "~0.3.6"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-      "optional": true
-    },
-    "node_modules/data-urls": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
-      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
-      "optional": true,
-      "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/data-urls/node_modules/whatwg-url": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
-      "optional": true,
-      "dependencies": {
-        "tr46": "^3.0.0",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "optional": true,
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/decimal.js": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
-    },
-    "node_modules/decompress-response": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
-      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
-      "optional": true,
-      "dependencies": {
-        "mimic-response": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "optional": true
-    },
-    "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
-      "license": "MIT"
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
-    },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "optional": true,
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-    },
-    "node_modules/escape-latex": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
-      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==",
-      "license": "MIT"
-    },
-    "node_modules/escodegen": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
-      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "optional": true,
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^5.2.0",
-        "esutils": "^2.0.2"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "optionalDependencies": {
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "optional": true,
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "optional": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fabric": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/fabric/-/fabric-5.3.0.tgz",
-      "integrity": "sha512-AVayKuzWoXM5cTn7iD3yNWBlfEa8r1tHaOe2g8NsZrmWKAHjryTxT/j6f9ncRfOWOF0I1Ci1AId3y78cC+GExQ==",
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "canvas": "^2.8.0",
-        "jsdom": "^19.0.0"
-      }
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/flat": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-      "license": "BSD-3-Clause",
-      "bin": {
-        "flat": "cli.js"
-      }
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/foreground-child": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/framer-motion": {
-      "version": "11.3.21",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.21.tgz",
-      "integrity": "sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "optional": true,
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/fs-minipass/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "optional": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "optional": true
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gauge": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "aproba": "^1.0.3 || ^2.0.0",
-        "color-support": "^1.1.2",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.1",
-        "object-assign": "^4.1.1",
-        "signal-exit": "^3.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wide-align": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/gauge/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/gauge/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "optional": true
-    },
-    "node_modules/gauge/node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "optional": true
-    },
-    "node_modules/gauge/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "optional": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/gauge/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "optional": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
-    },
-    "node_modules/hamt_plus": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
-      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==",
-      "license": "MIT"
-    },
-    "node_modules/has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "optional": true
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-      "optional": true,
-      "dependencies": {
-        "whatwg-encoding": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-      "optional": true,
-      "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "optional": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/immutable": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
-      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
-      "devOptional": true,
-      "license": "MIT"
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "optional": true,
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "optional": true
-    },
-    "node_modules/intl-messageformat": {
-      "version": "10.5.14",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
-      "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "2.0.0",
-        "@formatjs/fast-memoize": "2.2.0",
-        "@formatjs/icu-messageformat-parser": "2.7.8",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "license": "MIT"
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "optional": true
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
-      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/javascript-natural-sort": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
-      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
-      "license": "MIT"
-    },
-    "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/jsdom": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-19.0.0.tgz",
-      "integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==",
-      "optional": true,
-      "dependencies": {
-        "abab": "^2.0.5",
-        "acorn": "^8.5.0",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.5.0",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^3.0.1",
-        "decimal.js": "^10.3.1",
-        "domexception": "^4.0.0",
-        "escodegen": "^2.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^3.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^10.0.0",
-        "ws": "^8.2.3",
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "canvas": "^2.5.0"
-      },
-      "peerDependenciesMeta": {
-        "canvas": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
-    },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.foreach": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
-      "integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.get": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.kebabcase": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
-      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.mapkeys": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mapkeys/-/lodash.mapkeys-4.6.0.tgz",
-      "integrity": "sha512-0Al+hxpYvONWtg+ZqHpa/GaVzxuN3V7Xeo2p+bY06EaK/n+Y9R7nBePPN2o1LxmL0TWQSwP8LYZ008/hc9JzhA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.omit": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
-      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==",
-      "license": "MIT"
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
-    "node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "optional": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/mathjs": {
-      "version": "13.0.3",
-      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-13.0.3.tgz",
-      "integrity": "sha512-GpP9OW6swA5POZXvgpc/1FYkAr8lKgV04QHS1tIU60klFfplVCYaNzn6qy0vSp0hAQQN7shcx9CeB507dlLujA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@babel/runtime": "^7.24.8",
-        "complex.js": "^2.1.1",
-        "decimal.js": "^10.4.3",
-        "escape-latex": "^1.2.0",
-        "fraction.js": "^4.3.7",
-        "javascript-natural-sort": "^0.7.1",
-        "seedrandom": "^3.0.5",
-        "tiny-emitter": "^2.1.0",
-        "typed-function": "^4.2.1"
-      },
-      "bin": {
-        "mathjs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/memory-pager": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
-      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
-      "license": "MIT"
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-response": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "optional": true,
-      "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/minizlib/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "optional": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "optional": true,
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/mongodb": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.8.0.tgz",
-      "integrity": "sha512-HGQ9NWDle5WvwMnrvUxsFYPd3JEbqD3RgABHBQRuoCEND0qzhsd0iH5ypHsf1eJ+sXmvmyKpP+FLOKY8Il7jMw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@mongodb-js/saslprep": "^1.1.5",
-        "bson": "^6.7.0",
-        "mongodb-connection-string-url": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=16.20.1"
-      },
-      "peerDependencies": {
-        "@aws-sdk/credential-providers": "^3.188.0",
-        "@mongodb-js/zstd": "^1.1.0",
-        "gcp-metadata": "^5.2.0",
-        "kerberos": "^2.0.1",
-        "mongodb-client-encryption": ">=6.0.0 <7",
-        "snappy": "^7.2.2",
-        "socks": "^2.7.1"
-      },
-      "peerDependenciesMeta": {
-        "@aws-sdk/credential-providers": {
-          "optional": true
-        },
-        "@mongodb-js/zstd": {
-          "optional": true
-        },
-        "gcp-metadata": {
-          "optional": true
-        },
-        "kerberos": {
-          "optional": true
-        },
-        "mongodb-client-encryption": {
-          "optional": true
-        },
-        "snappy": {
-          "optional": true
-        },
-        "socks": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/mongodb-connection-string-url": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.1.tgz",
-      "integrity": "sha512-XqMGwRX0Lgn05TDB4PyG2h2kKO/FfWJyCzYQbIhXUxz7ETt0I/FqHjUeqj37irJ+Dl1ZtU82uYyj14u2XsZKfg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@types/whatwg-url": "^11.0.2",
-        "whatwg-url": "^13.0.0"
-      }
-    },
-    "node_modules/mongodb-connection-string-url/node_modules/tr46": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/mongodb-connection-string-url/node_modules/whatwg-url": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-13.0.0.tgz",
-      "integrity": "sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "^4.1.1",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "optional": true
-    },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
-    "node_modules/nan": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz",
-      "integrity": "sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==",
-      "optional": true
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/next": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
-      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
-      "dependencies": {
-        "@next/env": "14.2.3",
-        "@swc/helpers": "0.5.5",
-        "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001579",
-        "graceful-fs": "^4.2.11",
-        "postcss": "8.4.31",
-        "styled-jsx": "5.1.1"
-      },
-      "bin": {
-        "next": "dist/bin/next"
-      },
-      "engines": {
-        "node": ">=18.17.0"
-      },
-      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.3",
-        "@next/swc-darwin-x64": "14.2.3",
-        "@next/swc-linux-arm64-gnu": "14.2.3",
-        "@next/swc-linux-arm64-musl": "14.2.3",
-        "@next/swc-linux-x64-gnu": "14.2.3",
-        "@next/swc-linux-x64-musl": "14.2.3",
-        "@next/swc-win32-arm64-msvc": "14.2.3",
-        "@next/swc-win32-ia32-msvc": "14.2.3",
-        "@next/swc-win32-x64-msvc": "14.2.3"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.41.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "sass": "^1.3.0"
-      },
-      "peerDependenciesMeta": {
-        "@opentelemetry/api": {
-          "optional": true
-        },
-        "@playwright/test": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "optional": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-fetch/node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "optional": true
-    },
-    "node_modules/node-fetch/node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "optional": true
-    },
-    "node_modules/node-fetch/node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "optional": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
-    "node_modules/nopt": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
-      "optional": true,
-      "dependencies": {
-        "abbrev": "1"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/npmlog": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "are-we-there-yet": "^2.0.0",
-        "console-control-strings": "^1.1.0",
-        "gauge": "^3.0.0",
-        "set-blocking": "^2.0.0"
-      }
-    },
-    "node_modules/nwsapi": {
-      "version": "2.2.10",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz",
-      "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==",
-      "optional": true
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "optional": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/parse5": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-      "optional": true
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-    },
-    "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
-    "node_modules/prisma": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.17.0.tgz",
-      "integrity": "sha512-m4UWkN5lBE6yevqeOxEvmepnL5cNPEjzMw2IqDB59AcEV6w7D8vGljDLd1gPFH+W6gUxw9x7/RmN5dCS/WTPxA==",
-      "devOptional": true,
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@prisma/engines": "5.17.0"
-      },
-      "bin": {
-        "prisma": "build/index.js"
-      },
-      "engines": {
-        "node": ">=16.13"
-      }
-    },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
-    },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-      "optional": true
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "optional": true
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-remove-scroll": {
-      "version": "2.5.10",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz",
-      "integrity": "sha512-m3zvBRANPBw3qxVVjEIPEQinkcwlFZ4qyomuWVpNJdv4c6MvHfXV0C3L9Jx5rr3HeBHKNRX+1jreB5QloDIJjA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.6",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
-      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
-      "license": "MIT",
-      "dependencies": {
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
-      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
-      "license": "MIT",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-textarea-autosize": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
-      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.20.13",
-        "use-composed-ref": "^1.3.0",
-        "use-latest": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-toastify": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
-      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/react-toastify/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "optional": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/recoil": {
-      "version": "0.7.7",
-      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
-      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "hamt_plus": "1.0.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.13.1"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "optional": true
-    },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "optional": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "optional": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "optional": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "optional": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "optional": true
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "optional": true
-    },
-    "node_modules/sass": {
-      "version": "1.77.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
-      "optional": true,
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/scroll-into-view-if-needed": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz",
-      "integrity": "sha512-t44QCeDKAPf1mtQH3fYpWz8IM/DyvHLjs8wUvvwMYxk5moOqCzrMSxK6HQVD0QVmVjXFavoFIPRVrMuJPKAvtg==",
-      "license": "MIT",
-      "dependencies": {
-        "compute-scroll-into-view": "^3.0.2"
-      }
-    },
-    "node_modules/seedrandom": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
-      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "optional": true
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/simple-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "optional": true
-    },
-    "node_modules/simple-get": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
-      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
-      "optional": true,
-      "dependencies": {
-        "decompress-response": "^4.2.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
-      }
-    },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sparse-bitfield": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
-      "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
-      "license": "MIT",
-      "dependencies": {
-        "memory-pager": "^1.0.2"
-      }
-    },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "optional": true,
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/styled-jsx": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
-      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
-      "dependencies": {
-        "client-only": "0.0.1"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "babel-plugin-macros": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "optional": true
-    },
-    "node_modules/tailwind-merge": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
-      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
-    "node_modules/tailwind-variants": {
-      "version": "0.1.20",
-      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.20.tgz",
-      "integrity": "sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==",
-      "license": "MIT",
-      "dependencies": {
-        "tailwind-merge": "^1.14.0"
-      },
-      "engines": {
-        "node": ">=16.x",
-        "pnpm": ">=7.x"
-      },
-      "peerDependencies": {
-        "tailwindcss": "*"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
-      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tar": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
-      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "optional": true,
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/tar/node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-      "license": "MIT"
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "optional": true,
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
-      "optional": true,
-      "dependencies": {
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
-    },
-    "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
-    },
-    "node_modules/typed-function": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.2.1.tgz",
-      "integrity": "sha512-EGjWssW7Tsk4DGfE+5yluuljS1OGYWiI1J6e8puZz9nTMM51Oug8CD5Zo4gWMsOhq5BI+1bF+rWTm4Vbj3ivRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "optional": true,
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "optional": true,
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
-      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-composed-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
-      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/use-isomorphic-layout-effect": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
-      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-latest": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
-      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-isomorphic-layout-effect": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
-      "license": "MIT",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-    },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/w3c-hr-time": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
-      "optional": true,
-      "dependencies": {
-        "browser-process-hrtime": "^1.0.0"
-      }
-    },
-    "node_modules/w3c-xmlserializer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
-      "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==",
-      "optional": true,
-      "dependencies": {
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-      "optional": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-url": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz",
-      "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==",
-      "optional": true,
-      "dependencies": {
-        "tr46": "^3.0.0",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "optional": true,
-      "dependencies": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
-    "node_modules/wide-align/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wide-align/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "optional": true
-    },
-    "node_modules/wide-align/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "optional": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wide-align/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "optional": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "optional": true
-    },
-    "node_modules/ws": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-      "optional": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "optional": true
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "optional": true
-    },
-    "node_modules/yaml": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
-      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
index 24a868c1..5355cae6 100644
--- a/package.json
+++ b/package.json
@@ -15,24 +15,34 @@
     "axios": "^1.7.3",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
+    "fs": "^0.0.1-security",
     "iron-session": "^8.0.2",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",
     "next": "14.2.3",
     "next-international": "^1.2.4",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
+    "react-draggable": "^4.4.6",
+    "react-hook-form": "^7.53.0",
+    "react-icons": "^5.3.0",
     "react-responsive-modal": "^6.4.2",
     "react-toastify": "^10.0.5",
     "recoil": "^0.7.7",
-    "uuid": "^9.0.1"
+    "sweetalert2": "^11.14.1",
+    "sweetalert2-react-content": "^5.0.7",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@turf/turf": "^7.0.0",
+    "convertapi": "^1.14.0",
+    "dayjs": "^1.11.13",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "prisma": "^5.18.0",
+    "react-color-palette": "^7.2.2",
     "sass": "^1.77.8",
     "tailwindcss": "^3.4.1"
   }
diff --git a/public/assets/img/doc.svg b/public/assets/img/doc.svg
new file mode 100644
index 00000000..73d7f003
--- /dev/null
+++ b/public/assets/img/doc.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>doc-document</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon" fill="#000000" transform="translate(71.778133, 42.666667)">
+            <path d="M28.864,383.082667 L34.368,383.082667 C47.5093333,383.082667 57.2373333,380.928 63.5733333,376.661333 C69.12,372.970667 73.1306667,367.296 75.584,359.573333 C77.3973333,353.856 78.3146667,347.776 78.3146667,341.312 C78.3146667,334.378667 77.2693333,327.957333 75.1573333,322.048 C73.024,316.138667 70.144,311.530667 66.4746667,308.202667 C62.976,305.088 58.9866667,302.954667 54.528,301.845333 C50.0693333,300.736 43.3493333,300.16 34.368,300.16 L28.864,300.16 L28.864,383.082667 Z M-1.42108547e-14,405.696 L-1.42108547e-14,277.568 L35.456,277.568 C50.5386667,277.568 62.5706667,279.018667 71.616,281.92 C83.4346667,285.717333 92.4586667,292.757333 98.7306667,303.018667 C105.002667,313.301333 108.16,326.186667 108.16,341.674667 C108.16,357.589333 105.002667,370.581333 98.7306667,380.650667 C90.9013333,393.344 78.8053333,401.088 62.4,403.797333 C54.8693333,405.056 45.2266667,405.696 33.472,405.696 L-1.42108547e-14,405.696 Z M186.389333,297.915733 C175.957333,297.915733 167.914667,302.2464 162.24,310.929067 C157.12,318.779733 154.56,328.827733 154.56,341.115733 C154.56,355.345067 157.589333,366.395733 163.690667,374.225067 C169.408,381.649067 177.024,385.339733 186.474667,385.339733 C196.842667,385.339733 204.928,380.987733 210.709333,372.219733 C215.829333,364.5184 218.389333,354.3424 218.389333,341.6704 C218.389333,327.739733 215.338667,316.881067 209.258667,309.0304 C203.541333,301.627733 195.904,297.915733 186.389333,297.915733 M186.474667,275.3024 C206.613333,275.3024 222.037333,281.681067 232.768,294.481067 C243.072,306.705067 248.213333,322.427733 248.213333,341.6704 C248.213333,362.705067 242.133333,379.4304 229.973333,391.8464 C219.477333,402.577067 204.970667,407.931733 186.474667,407.931733 C166.357333,407.931733 150.912,401.553067 140.181333,388.7744 C129.877333,376.5504 124.714667,360.571733 124.714667,340.859733 C124.714667,320.251733 130.816,303.7184 142.997333,291.3024 C153.536,280.635733 168.042667,275.3024 186.474667,275.3024 M362.7456,375.477333 L371.172267,398.538667 C363.556267,402.229333 356.942933,404.704 351.268267,406.005333 C345.5936,407.285333 338.596267,407.925333 330.2976,407.925333 C317.7536,407.925333 307.3856,406.133333 299.1936,402.528 C287.716267,397.450667 279.076267,389.472 273.252267,378.570667 C268.004267,368.8 265.380267,356.853333 265.380267,342.752 C265.380267,318.965333 272.6336,300.917333 287.1616,288.693333 C297.700267,279.776 311.6096,275.317333 328.846933,275.317333 C336.206933,275.317333 342.884267,275.978667 348.9216,277.322667 C354.9376,278.688 361.7856,281.077333 369.422933,284.512 L359.758933,306.229333 C349.582933,300.682667 339.812267,297.909333 330.468267,297.909333 C319.204267,297.909333 310.5856,301.770667 304.612267,309.472 C298.340267,317.557333 295.204267,328.224 295.204267,341.493333 C295.204267,355.232 298.4896,365.984 305.060267,373.728 C311.630933,381.472 320.6976,385.333333 332.2816,385.333333 C337.508267,385.333333 342.350933,384.650667 346.7456,383.221333 C351.140267,381.813333 356.4736,379.232 362.7456,375.477333 M248.221867,7.10542736e-15 L13.5552,7.10542736e-15 L13.5552,234.666667 L56.2218667,234.666667 L56.2218667,192 L56.2218667,169.6 L56.2218667,42.6666667 L230.5152,42.6666667 L312.221867,124.373333 L312.221867,169.6 L312.221867,192 L312.221867,234.666667 L354.888533,234.666667 L354.888533,106.666667 L248.221867,7.10542736e-15 L248.221867,7.10542736e-15 Z" id="DOC">
+
+</path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/img/excel.svg b/public/assets/img/excel.svg
new file mode 100644
index 00000000..2bb190e1
--- /dev/null
+++ b/public/assets/img/excel.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 1.29289C9.48043 1.10536 9.73478 1 10 1H18C19.6569 1 21 2.34315 21 4V9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V4C19 3.44772 18.5523 3 18 3H11V8C11 8.55228 10.5523 9 10 9H5V20C5 20.5523 5.44772 21 6 21H7C7.55228 21 8 21.4477 8 22C8 22.5523 7.55228 23 7 23H6C4.34315 23 3 21.6569 3 20V8C3 7.73478 3.10536 7.48043 3.29289 7.29289L9.29289 1.29289ZM6.41421 7H9V4.41421L6.41421 7ZM19 12C19.5523 12 20 12.4477 20 13V19H23C23.5523 19 24 19.4477 24 20C24 20.5523 23.5523 21 23 21H19C18.4477 21 18 20.5523 18 20V13C18 12.4477 18.4477 12 19 12ZM11.8137 12.4188C11.4927 11.9693 10.8682 11.8653 10.4188 12.1863C9.96935 12.5073 9.86526 13.1318 10.1863 13.5812L12.2711 16.5L10.1863 19.4188C9.86526 19.8682 9.96935 20.4927 10.4188 20.8137C10.8682 21.1347 11.4927 21.0307 11.8137 20.5812L13.5 18.2205L15.1863 20.5812C15.5073 21.0307 16.1318 21.1347 16.5812 20.8137C17.0307 20.4927 17.1347 19.8682 16.8137 19.4188L14.7289 16.5L16.8137 13.5812C17.1347 13.1318 17.0307 12.5073 16.5812 12.1863C16.1318 11.8653 15.5073 11.9693 15.1863 12.4188L13.5 14.7795L11.8137 12.4188Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/img/file.svg b/public/assets/img/file.svg
new file mode 100644
index 00000000..3df8b4d8
--- /dev/null
+++ b/public/assets/img/file.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 9V17.8C19 18.9201 19 19.4802 18.782 19.908C18.5903 20.2843 18.2843 20.5903 17.908 20.782C17.4802 21 16.9201 21 15.8 21H8.2C7.07989 21 6.51984 21 6.09202 20.782C5.71569 20.5903 5.40973 20.2843 5.21799 19.908C5 19.4802 5 18.9201 5 17.8V6.2C5 5.07989 5 4.51984 5.21799 4.09202C5.40973 3.71569 5.71569 3.40973 6.09202 3.21799C6.51984 3 7.0799 3 8.2 3H13M19 9L13 3M19 9H14C13.4477 9 13 8.55228 13 8V3" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/img/image.svg b/public/assets/img/image.svg
new file mode 100644
index 00000000..2e856737
--- /dev/null
+++ b/public/assets/img/image.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.02693 18.329C4.18385 19.277 5.0075 20 6 20H18C19.1046 20 20 19.1046 20 18V14.1901M4.02693 18.329C4.00922 18.222 4 18.1121 4 18V6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V14.1901M4.02693 18.329L7.84762 14.5083C8.52765 13.9133 9.52219 13.8482 10.274 14.3494L10.7832 14.6888C11.5078 15.1719 12.4619 15.1305 13.142 14.5865L15.7901 12.4679C16.4651 11.9279 17.4053 11.8856 18.1228 12.3484C18.2023 12.3997 18.2731 12.4632 18.34 12.5302L20 14.1901M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/img/ppt.svg b/public/assets/img/ppt.svg
new file mode 100644
index 00000000..d9b7382a
--- /dev/null
+++ b/public/assets/img/ppt.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 585.918 585.918"
+	 xml:space="preserve">
+<g>
+	<path d="M357.396,535.33c0.776,0.042,1.542,0.109,2.329,0.109h177.39c20.75,0,37.627-16.883,37.627-37.627V86.597
+		c0-20.743-16.877-37.628-37.627-37.628h-177.39c-0.781,0-1.553,0.077-2.329,0.113V0L11.176,46.206v492.311l346.22,47.401V535.33z
+		 M359.726,70.476h177.39c8.893,0,16.125,7.236,16.125,16.126v411.22c0,8.888-7.232,16.127-16.125,16.127h-177.39
+		c-0.792,0-1.563-0.127-2.329-0.243V319.212c9.92,37.738,44.168,65.606,85.018,65.606c48.611,0,88.013-39.401,88.013-88.007h-88.013
+		v-88.017c-40.854,0-75.103,27.872-85.018,65.612V70.711C358.162,70.599,358.929,70.476,359.726,70.476z M116.427,297.106
+		c-8.17,8.126-20.147,11.705-33.982,11.596c-3.055-0.026-5.795-0.21-7.918-0.551v39.438l-22.657-0.571V239.328
+		c7.003-1.467,16.906-2.708,31.021-3.081c14.475-0.381,24.903,2.338,31.956,8.166c6.806,5.532,11.401,14.833,11.401,25.888
+		C126.253,281.363,122.76,290.754,116.427,297.106z M212.05,297.273c-8.89,8.489-21.942,12.211-36.998,12.1
+		c-3.318-0.021-6.302-0.214-8.601-0.572v41.136l-24.651-0.631V237.053c7.622-1.542,18.384-2.838,33.741-3.245
+		c15.75-0.409,27.108,2.402,34.796,8.475c7.401,5.774,12.422,15.483,12.422,27.021C222.759,280.848,218.938,290.659,212.05,297.273z
+		 M324.891,254.173l-34.302,0.56v98.364l-27.779-0.709v-97.209l-32.043,0.527V233.22l94.124-2.441V254.173z"/>
+	<path d="M84.122,255.121c-4.738,0.086-7.93,0.63-9.596,1.155v32.57c1.963,0.488,4.396,0.65,7.756,0.64
+		c12.438-0.023,20.191-6.833,20.191-18.266C102.474,260.938,95.817,254.916,84.122,255.121z"/>
+	<path d="M176.879,253.491c-5.145,0.087-8.622,0.662-10.422,1.205v33.966c2.139,0.512,4.779,0.672,8.428,0.672
+		c13.546-0.022,21.984-7.126,21.984-19.066C196.869,259.539,189.604,253.266,176.879,253.491z"/>
+	<path d="M454.362,282.922v0.026h88.018c0-24.753-10.269-47.092-26.725-63.08L454.362,282.922z"/>
+	<path d="M453.428,267.457l62.228-62.231c-17.501-17.512-39.339-26.047-62.29-25.72l0.042,87.93L453.428,267.457z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/fonts/NotoSansJP-Black.woff b/public/fonts/NotoSansJP-Black.woff
new file mode 100644
index 00000000..6d1eb871
Binary files /dev/null and b/public/fonts/NotoSansJP-Black.woff differ
diff --git a/public/fonts/NotoSansJP-Black.woff2 b/public/fonts/NotoSansJP-Black.woff2
new file mode 100644
index 00000000..57b73cea
Binary files /dev/null and b/public/fonts/NotoSansJP-Black.woff2 differ
diff --git a/public/fonts/NotoSansJP-Bold.woff b/public/fonts/NotoSansJP-Bold.woff
new file mode 100644
index 00000000..528d5dc0
Binary files /dev/null and b/public/fonts/NotoSansJP-Bold.woff differ
diff --git a/public/fonts/NotoSansJP-Bold.woff2 b/public/fonts/NotoSansJP-Bold.woff2
new file mode 100644
index 00000000..7385f01a
Binary files /dev/null and b/public/fonts/NotoSansJP-Bold.woff2 differ
diff --git a/public/fonts/NotoSansJP-ExtraBold.woff b/public/fonts/NotoSansJP-ExtraBold.woff
new file mode 100644
index 00000000..3d5b4030
Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraBold.woff differ
diff --git a/public/fonts/NotoSansJP-ExtraBold.woff2 b/public/fonts/NotoSansJP-ExtraBold.woff2
new file mode 100644
index 00000000..e23b5938
Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraBold.woff2 differ
diff --git a/public/fonts/NotoSansJP-ExtraLight.woff b/public/fonts/NotoSansJP-ExtraLight.woff
new file mode 100644
index 00000000..8d606939
Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraLight.woff differ
diff --git a/public/fonts/NotoSansJP-ExtraLight.woff2 b/public/fonts/NotoSansJP-ExtraLight.woff2
new file mode 100644
index 00000000..c43674fb
Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraLight.woff2 differ
diff --git a/public/fonts/NotoSansJP-Light.woff b/public/fonts/NotoSansJP-Light.woff
new file mode 100644
index 00000000..dbe70e43
Binary files /dev/null and b/public/fonts/NotoSansJP-Light.woff differ
diff --git a/public/fonts/NotoSansJP-Light.woff2 b/public/fonts/NotoSansJP-Light.woff2
new file mode 100644
index 00000000..d0ead44d
Binary files /dev/null and b/public/fonts/NotoSansJP-Light.woff2 differ
diff --git a/public/fonts/NotoSansJP-Medium.woff b/public/fonts/NotoSansJP-Medium.woff
new file mode 100644
index 00000000..fdfffa10
Binary files /dev/null and b/public/fonts/NotoSansJP-Medium.woff differ
diff --git a/public/fonts/NotoSansJP-Medium.woff2 b/public/fonts/NotoSansJP-Medium.woff2
new file mode 100644
index 00000000..5d3da28f
Binary files /dev/null and b/public/fonts/NotoSansJP-Medium.woff2 differ
diff --git a/public/fonts/NotoSansJP-Regular.woff b/public/fonts/NotoSansJP-Regular.woff
new file mode 100644
index 00000000..cad22106
Binary files /dev/null and b/public/fonts/NotoSansJP-Regular.woff differ
diff --git a/public/fonts/NotoSansJP-Regular.woff2 b/public/fonts/NotoSansJP-Regular.woff2
new file mode 100644
index 00000000..d31b3285
Binary files /dev/null and b/public/fonts/NotoSansJP-Regular.woff2 differ
diff --git a/public/fonts/NotoSansJP-SemiBold.woff b/public/fonts/NotoSansJP-SemiBold.woff
new file mode 100644
index 00000000..2922f150
Binary files /dev/null and b/public/fonts/NotoSansJP-SemiBold.woff differ
diff --git a/public/fonts/NotoSansJP-SemiBold.woff2 b/public/fonts/NotoSansJP-SemiBold.woff2
new file mode 100644
index 00000000..4ec2170e
Binary files /dev/null and b/public/fonts/NotoSansJP-SemiBold.woff2 differ
diff --git a/public/fonts/NotoSansJP-Thin.woff b/public/fonts/NotoSansJP-Thin.woff
new file mode 100644
index 00000000..517b984f
Binary files /dev/null and b/public/fonts/NotoSansJP-Thin.woff differ
diff --git a/public/fonts/NotoSansJP-Thin.woff2 b/public/fonts/NotoSansJP-Thin.woff2
new file mode 100644
index 00000000..85a6b500
Binary files /dev/null and b/public/fonts/NotoSansJP-Thin.woff2 differ
diff --git a/public/fonts/Pretendard-Black.woff b/public/fonts/Pretendard-Black.woff
new file mode 100644
index 00000000..20b0641b
Binary files /dev/null and b/public/fonts/Pretendard-Black.woff differ
diff --git a/public/fonts/Pretendard-Black.woff2 b/public/fonts/Pretendard-Black.woff2
new file mode 100644
index 00000000..306697cc
Binary files /dev/null and b/public/fonts/Pretendard-Black.woff2 differ
diff --git a/public/fonts/Pretendard-Bold.woff b/public/fonts/Pretendard-Bold.woff
new file mode 100644
index 00000000..bfc573c4
Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff differ
diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2
new file mode 100644
index 00000000..d99618c2
Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff2 differ
diff --git a/public/fonts/Pretendard-ExtraBold.woff b/public/fonts/Pretendard-ExtraBold.woff
new file mode 100644
index 00000000..14a61abd
Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff differ
diff --git a/public/fonts/Pretendard-ExtraBold.woff2 b/public/fonts/Pretendard-ExtraBold.woff2
new file mode 100644
index 00000000..d7a908e3
Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff2 differ
diff --git a/public/fonts/Pretendard-ExtraLight.woff b/public/fonts/Pretendard-ExtraLight.woff
new file mode 100644
index 00000000..a7af8a24
Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff differ
diff --git a/public/fonts/Pretendard-ExtraLight.woff2 b/public/fonts/Pretendard-ExtraLight.woff2
new file mode 100644
index 00000000..0c41886d
Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff2 differ
diff --git a/public/fonts/Pretendard-Light.woff b/public/fonts/Pretendard-Light.woff
new file mode 100644
index 00000000..6e00ad2d
Binary files /dev/null and b/public/fonts/Pretendard-Light.woff differ
diff --git a/public/fonts/Pretendard-Light.woff2 b/public/fonts/Pretendard-Light.woff2
new file mode 100644
index 00000000..805d10c0
Binary files /dev/null and b/public/fonts/Pretendard-Light.woff2 differ
diff --git a/public/fonts/Pretendard-Medium.woff b/public/fonts/Pretendard-Medium.woff
new file mode 100644
index 00000000..71b13eb5
Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff differ
diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2
new file mode 100644
index 00000000..a96e69b8
Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff2 differ
diff --git a/public/fonts/Pretendard-Regular.woff b/public/fonts/Pretendard-Regular.woff
new file mode 100644
index 00000000..741be57b
Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff differ
diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2
new file mode 100644
index 00000000..a5d5aea8
Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff2 differ
diff --git a/public/fonts/Pretendard-SemiBold.woff b/public/fonts/Pretendard-SemiBold.woff
new file mode 100644
index 00000000..7bf28607
Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff differ
diff --git a/public/fonts/Pretendard-SemiBold.woff2 b/public/fonts/Pretendard-SemiBold.woff2
new file mode 100644
index 00000000..d5a77179
Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff2 differ
diff --git a/public/fonts/Pretendard-Thin.woff b/public/fonts/Pretendard-Thin.woff
new file mode 100644
index 00000000..665fe440
Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff differ
diff --git a/public/fonts/Pretendard-Thin.woff2 b/public/fonts/Pretendard-Thin.woff2
new file mode 100644
index 00000000..8ce8ee27
Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff2 differ
diff --git a/public/fonts/Room No.703.ttf b/public/fonts/Room No.703.ttf
new file mode 100644
index 00000000..8c2edd40
Binary files /dev/null and b/public/fonts/Room No.703.ttf differ
diff --git a/public/static/images/canvas/arr_btn_ico.svg b/public/static/images/canvas/arr_btn_ico.svg
new file mode 100644
index 00000000..65ac8bfe
--- /dev/null
+++ b/public/static/images/canvas/arr_btn_ico.svg
@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="#898989" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/arr_btn_ico_black.svg b/public/static/images/canvas/arr_btn_ico_black.svg
new file mode 100644
index 00000000..cbffea32
--- /dev/null
+++ b/public/static/images/canvas/arr_btn_ico_black.svg
@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="#101010" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/arr_btn_ico_white.svg b/public/static/images/canvas/arr_btn_ico_white.svg
new file mode 100644
index 00000000..31e04787
--- /dev/null
+++ b/public/static/images/canvas/arr_btn_ico_white.svg
@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/check-black.svg b/public/static/images/canvas/check-black.svg
new file mode 100644
index 00000000..75184dea
--- /dev/null
+++ b/public/static/images/canvas/check-black.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.18182L4.5 7L10 1" stroke="#101010" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/check-grey.svg b/public/static/images/canvas/check-grey.svg
new file mode 100644
index 00000000..617acc83
--- /dev/null
+++ b/public/static/images/canvas/check-grey.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.18182L4.5 7L10 1" stroke="#898989" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/depth2-arr.svg b/public/static/images/canvas/depth2-arr.svg
new file mode 100644
index 00000000..31e04787
--- /dev/null
+++ b/public/static/images/canvas/depth2-arr.svg
@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/grid_option_arr.svg b/public/static/images/canvas/grid_option_arr.svg
new file mode 100644
index 00000000..c2c6cbbd
--- /dev/null
+++ b/public/static/images/canvas/grid_option_arr.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM9 15V1H7L7 15H9Z" fill="white"/>
+</svg>
diff --git a/public/static/images/canvas/ico-flx01.svg b/public/static/images/canvas/ico-flx01.svg
new file mode 100644
index 00000000..84185ff6
--- /dev/null
+++ b/public/static/images/canvas/ico-flx01.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 8.875L7 1.375M7 8.875C6.47483 8.875 5.49365 7.37927 5.125 7M7 8.875C7.52517 8.875 8.50635 7.37927 8.875 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 10.375C13 12.2365 12.6115 12.625 10.75 12.625H3.25C1.3885 12.625 1 12.2365 1 10.375" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/ico-flx02.svg b/public/static/images/canvas/ico-flx02.svg
new file mode 100644
index 00000000..400d9732
--- /dev/null
+++ b/public/static/images/canvas/ico-flx02.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Icon" d="M3.625 12.25V8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H9.625C10.0392 8.125 10.375 8.46079 10.375 8.875V12.625M8.875 4L4.375 4C3.96079 4 3.625 3.66421 3.625 3.25L3.625 1M12.6234 3.62342L10.3766 1.37658C10.1355 1.13546 9.80844 1 9.46745 1H2.28571C1.57563 1 1 1.57563 1 2.28571V11.7143C1 12.4244 1.57563 13 2.28571 13H11.7143C12.4244 13 13 12.4244 13 11.7143V4.53255C13 4.19156 12.8645 3.86454 12.6234 3.62342Z" stroke="white" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/static/images/canvas/ico-flx03.svg b/public/static/images/canvas/ico-flx03.svg
new file mode 100644
index 00000000..44c2eeae
--- /dev/null
+++ b/public/static/images/canvas/ico-flx03.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M11.8055 1V2.87932C11.8055 3.05563 11.5851 3.13545 11.4722 3C10.3736 1.7725 8.777 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/canvas/ico-flx04.svg b/public/static/images/canvas/ico-flx04.svg
new file mode 100644
index 00000000..ae584b35
--- /dev/null
+++ b/public/static/images/canvas/ico-flx04.svg
@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 1705" d="M9.99992 5.2C9.99853 3.42574 9.97165 2.50673 9.45523 1.87746C9.3555 1.75593 9.24407 1.64451 9.12254 1.54478C8.45873 1 7.47249 1 5.5 1C3.52751 1 2.54127 1 1.87746 1.54477C1.75593 1.6445 1.64451 1.75593 1.54478 1.87746C1 2.54127 1 3.52751 1 5.5C1 7.47249 1 8.45873 1.54477 9.12254C1.6445 9.24406 1.75593 9.35549 1.87746 9.45522C2.50672 9.97165 3.42574 9.99852 5.2 9.99992" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M8.20019 4.69995C7.92405 4.69995 7.70019 4.92381 7.70019 5.19995C7.70019 5.47609 7.92405 5.69995 8.20019 5.69995V4.69995ZM10.0002 5.69995C10.2763 5.69995 10.5002 5.47609 10.5002 5.19995C10.5002 4.92381 10.2763 4.69995 10.0002 4.69995V5.69995ZM5.7002 8.19995C5.7002 7.92381 5.47634 7.69995 5.2002 7.69995C4.92405 7.69995 4.7002 7.92381 4.7002 8.19995H5.7002ZM4.7002 9.99995C4.7002 10.2761 4.92405 10.5 5.2002 10.5C5.47634 10.5 5.7002 10.2761 5.7002 9.99995H4.7002ZM6.74147 5.69571C7.01527 5.6598 7.20812 5.40874 7.17222 5.13494C7.13631 4.86114 6.88525 4.66829 6.61145 4.7042L6.74147 5.69571ZM5.65369 5.57581L5.33604 5.18967L5.33604 5.18967L5.65369 5.57581ZM4.70999 6.30149C4.65561 6.57222 4.831 6.83578 5.10173 6.89016C5.37247 6.94454 5.63602 6.76915 5.6904 6.49841L4.70999 6.30149ZM12.51 6.49841C12.5644 6.76915 12.8279 6.94454 13.0987 6.89016C13.3694 6.83578 13.5448 6.57222 13.4904 6.30149L12.51 6.49841ZM12.5467 5.57581L12.2291 5.96194L12.2291 5.96194L12.5467 5.57581ZM11.5889 4.7042C11.3151 4.66829 11.0641 4.86114 11.0282 5.13494C10.9923 5.40874 11.1851 5.6598 11.4589 5.69571L11.5889 4.7042ZM11.4589 12.5042C11.1851 12.5401 10.9923 12.7912 11.0282 13.065C11.0641 13.3388 11.3151 13.5316 11.5889 13.4957L11.4589 12.5042ZM12.5467 12.6241L12.8644 13.0102L12.5467 12.6241ZM13.4904 11.8984C13.5448 11.6277 13.3694 11.3641 13.0987 11.3097C12.8279 11.2554 12.5644 11.4308 12.51 11.7015L13.4904 11.8984ZM5.6904 11.7015C5.63603 11.4308 5.37247 11.2554 5.10173 11.3097C4.831 11.3641 4.65561 11.6277 4.70999 11.8984L5.6904 11.7015ZM5.65369 12.6241L5.97133 12.238L5.97133 12.238L5.65369 12.6241ZM6.61145 13.4957C6.88525 13.5316 7.13631 13.3388 7.17222 13.065C7.20812 12.7912 7.01527 12.5401 6.74147 12.5042L6.61145 13.4957ZM8.2002 12.5C7.92405 12.5 7.7002 12.7238 7.7002 13C7.7002 13.2761 7.92405 13.5 8.2002 13.5V12.5ZM10.0002 13.5C10.2763 13.5 10.5002 13.2761 10.5002 13C10.5002 12.7238 10.2763 12.5 10.0002 12.5V13.5ZM13.5002 8.19995C13.5002 7.92381 13.2763 7.69995 13.0002 7.69995C12.7241 7.69995 12.5002 7.92381 12.5002 8.19995H13.5002ZM12.5002 9.99995C12.5002 10.2761 12.7241 10.5 13.0002 10.5C13.2763 10.5 13.5002 10.2761 13.5002 9.99995H12.5002ZM8.20019 5.69995H10.0002V4.69995H8.20019V5.69995ZM4.7002 8.19995V9.99995H5.7002V8.19995H4.7002ZM6.61145 4.7042C6.11761 4.76895 5.68947 4.89892 5.33604 5.18967L5.97133 5.96194C6.12045 5.83927 6.33772 5.74865 6.74147 5.69571L6.61145 4.7042ZM5.6904 6.49841C5.7466 6.21864 5.83549 6.07369 5.97133 5.96194L5.33604 5.18967C4.97719 5.48487 4.79851 5.86077 4.70999 6.30149L5.6904 6.49841ZM13.4904 6.30149C13.4019 5.86077 13.2232 5.48487 12.8644 5.18967L12.2291 5.96194C12.3649 6.07369 12.4538 6.21864 12.51 6.49841L13.4904 6.30149ZM11.4589 5.69571C11.8627 5.74865 12.0799 5.83927 12.2291 5.96194L12.8644 5.18967C12.5109 4.89892 12.0828 4.76895 11.5889 4.7042L11.4589 5.69571ZM11.5889 13.4957C12.0828 13.4309 12.5109 13.301 12.8644 13.0102L12.2291 12.238C12.0799 12.3606 11.8627 12.4513 11.4589 12.5042L11.5889 13.4957ZM12.51 11.7015C12.4538 11.9813 12.3649 12.1262 12.2291 12.238L12.8644 13.0102C13.2232 12.715 13.4019 12.3391 13.4904 11.8984L12.51 11.7015ZM4.70999 11.8984C4.79851 12.3391 4.97719 12.715 5.33604 13.0102L5.97133 12.238C5.83548 12.1262 5.7466 11.9813 5.6904 11.7015L4.70999 11.8984ZM6.74147 12.5042C6.33771 12.4512 6.12045 12.3606 5.97133 12.238L5.33604 13.0102C5.68947 13.301 6.11761 13.4309 6.61145 13.4957L6.74147 12.5042ZM8.2002 13.5H10.0002V12.5H8.2002V13.5ZM12.5002 8.19995V9.99995H13.5002V8.19995H12.5002Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/static/images/canvas/menu_icon00.svg b/public/static/images/canvas/menu_icon00.svg
new file mode 100644
index 00000000..f0adffd5
--- /dev/null
+++ b/public/static/images/canvas/menu_icon00.svg
@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 2056" d="M9.4 1.8H8.6C5.01733 1.8 3.22599 1.8 2.11299 2.913C1 4.02599 1 5.81733 1 9.4C1 12.9827 1 14.774 2.11299 15.887C3.22599 17 5.01733 17 8.6 17C12.1827 17 13.974 17 15.087 15.887C16.2 14.774 16.2 12.9827 16.2 9.4V8.6" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Ellipse 40" d="M17 3.8C17 5.3464 15.7464 6.6 14.2 6.6C12.6536 6.6 11.4 5.3464 11.4 3.8C11.4 2.2536 12.6536 1 14.2 1C15.7464 1 17 2.2536 17 3.8Z" stroke="#AAAAAA" stroke-width="1.5"/>
+<path id="Vector 4052" d="M5 8.2H8.2" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 4053" d="M5 12.2H11.4" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/canvas/menu_icon01.svg b/public/static/images/canvas/menu_icon01.svg
new file mode 100644
index 00000000..ce77c2dd
--- /dev/null
+++ b/public/static/images/canvas/menu_icon01.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.4 2V6.80001M2 4.4H6.80001" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4004 14.7999L16.4004 5.9999M6.00039 16.3999H14.8004M14.8004 4.3999H10.0004M4.40039 9.99991V14.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.7998 4.39981C14.7998 3.64556 14.7998 3.26843 15.0341 3.03412C15.2684 2.7998 15.6456 2.7998 16.3998 2.7998C17.1541 2.7998 17.5312 2.7998 17.7655 3.03412C17.9998 3.26843 17.9998 3.64556 17.9998 4.39981C17.9998 5.15405 17.9998 5.53118 17.7655 5.76549C17.5312 5.99981 17.1541 5.99981 16.3998 5.99981C15.6456 5.99981 15.2684 5.99981 15.0341 5.76549C14.7998 5.53118 14.7998 5.15405 14.7998 4.39981Z" stroke="white" stroke-width="1.5"/>
+<path d="M14.7998 16.4003C14.7998 15.646 14.7998 15.2689 15.0341 15.0346C15.2684 14.8003 15.6456 14.8003 16.3998 14.8003C17.1541 14.8003 17.5312 14.8003 17.7655 15.0346C17.9998 15.2689 17.9998 15.646 17.9998 16.4003C17.9998 17.1545 17.9998 17.5317 17.7655 17.766C17.5312 18.0003 17.1541 18.0003 16.3998 18.0003C15.6456 18.0003 15.2684 18.0003 15.0341 17.766C14.7998 17.5317 14.7998 17.1545 14.7998 16.4003Z" stroke="white" stroke-width="1.5"/>
+<path d="M2.7998 16.4003C2.7998 15.646 2.7998 15.2689 3.03412 15.0346C3.26843 14.8003 3.64556 14.8003 4.39981 14.8003C5.15405 14.8003 5.53118 14.8003 5.76549 15.0346C5.99981 15.2689 5.99981 15.646 5.99981 16.4003C5.99981 17.1545 5.99981 17.5317 5.76549 17.766C5.53118 18.0003 5.15405 18.0003 4.39981 18.0003C3.64556 18.0003 3.26843 18.0003 3.03412 17.766C2.7998 17.5317 2.7998 17.1545 2.7998 16.4003Z" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/menu_icon02.svg b/public/static/images/canvas/menu_icon02.svg
new file mode 100644
index 00000000..363e483d
--- /dev/null
+++ b/public/static/images/canvas/menu_icon02.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8 10.8C16.3085 10.8 17.0627 10.8 17.5314 11.2686C18 11.7373 18 12.4915 18 14V14.8C18 16.3085 18 17.0627 17.5314 17.5314C17.0627 18 16.3085 18 14.8 18H6.8C4.53726 18 3.40589 18 2.70294 17.2971C2 16.5941 2 15.4627 2 13.2L2 5.2C2 3.69151 2 2.93726 2.46863 2.46863C2.93726 2 3.69151 2 5.2 2L6 2C7.50849 2 8.26274 2 8.73137 2.46863C9.2 2.93726 9.2 3.69151 9.2 5.2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3996 10.0001C12.3996 11.3256 11.3251 12.4001 9.99961 12.4001C8.67413 12.4001 7.59961 11.3256 7.59961 10.0001C7.59961 8.67461 8.67413 7.6001 9.99961 7.6001C11.3251 7.6001 12.3996 8.67461 12.3996 10.0001Z" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/menu_icon03.svg b/public/static/images/canvas/menu_icon03.svg
new file mode 100644
index 00000000..56896c63
--- /dev/null
+++ b/public/static/images/canvas/menu_icon03.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.62197 10.7968C7.67129 9.79223 7.81092 9.14577 8.20615 8.65018C8.33692 8.48619 8.4857 8.33741 8.64969 8.20663C9.14528 7.81141 9.79175 7.67178 10.7964 7.62245M13.9977 7.6001C15.479 7.61895 16.3285 7.7152 16.9447 8.20663C17.1087 8.33741 17.2575 8.48619 17.3882 8.65018C17.9994 9.41651 17.9994 10.5436 17.9994 12.7977C17.9994 15.0518 17.9994 16.1789 17.3882 16.9452C17.2575 17.1092 17.1087 17.258 16.9447 17.3887C16.1784 17.9999 15.0513 17.9999 12.7972 17.9999C10.5431 17.9999 9.41602 17.9999 8.64969 17.3887C8.4857 17.258 8.33692 17.1092 8.20615 16.9452C7.71471 16.3289 7.61846 15.4794 7.59961 13.9982" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.378 9.20316C12.3287 10.2078 12.1891 10.8542 11.7939 11.3498C11.6631 11.5138 11.5143 11.6626 11.3503 11.7934C10.8547 12.1886 10.2083 12.3282 9.20364 12.3775M6.00231 12.3999C4.52105 12.3811 3.67154 12.2848 3.0553 11.7934C2.89131 11.6626 2.74253 11.5138 2.61176 11.3498C2.00063 10.5835 2.00063 9.45644 2.00063 7.20232C2.00063 4.9482 2.00063 3.82114 2.61176 3.05481C2.74253 2.89083 2.89131 2.74205 3.0553 2.61127C3.82163 2.00014 4.94869 2.00014 7.20281 2.00014C9.45692 2.00014 10.584 2.00014 11.3503 2.61127C11.5143 2.74205 11.6631 2.89083 11.7939 3.05481C12.2853 3.67105 12.3815 4.52056 12.4004 6.00182" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/canvas/menu_icon04.svg b/public/static/images/canvas/menu_icon04.svg
new file mode 100644
index 00000000..3df7b7da
--- /dev/null
+++ b/public/static/images/canvas/menu_icon04.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0004 6.7998V9.9998M10.0004 9.9998H7.60039C6.0919 9.9998 5.33765 9.9998 4.86902 10.4684C4.40039 10.9371 4.40039 11.6913 4.40039 13.1998M10.0004 9.9998H12.4004C13.9089 9.9998 14.6631 9.9998 15.1318 10.4684C15.6004 10.9371 15.6004 11.6913 15.6004 13.1998" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 15.6002C2 14.4688 2 13.9031 2.35147 13.5517C2.70294 13.2002 3.26863 13.2002 4.4 13.2002C5.53137 13.2002 6.09706 13.2002 6.44853 13.5517C6.8 13.9031 6.8 14.4688 6.8 15.6002C6.8 16.7316 6.8 17.2973 6.44853 17.6487C6.09706 18.0002 5.53137 18.0002 4.4 18.0002C3.26863 18.0002 2.70294 18.0002 2.35147 17.6487C2 17.2973 2 16.7316 2 15.6002Z" stroke="white" stroke-width="1.5"/>
+<path d="M13.2002 15.6002C13.2002 14.4688 13.2002 13.9031 13.5517 13.5517C13.9031 13.2002 14.4688 13.2002 15.6002 13.2002C16.7316 13.2002 17.2973 13.2002 17.6487 13.5517C18.0002 13.9031 18.0002 14.4688 18.0002 15.6002C18.0002 16.7316 18.0002 17.2973 17.6487 17.6487C17.2973 18.0002 16.7316 18.0002 15.6002 18.0002C14.4688 18.0002 13.9031 18.0002 13.5517 17.6487C13.2002 17.2973 13.2002 16.7316 13.2002 15.6002Z" stroke="white" stroke-width="1.5"/>
+<path d="M8.62838 2H11.3712C13.0308 2 13.1998 2.88794 13.1998 4.4C13.1998 5.91206 13.0308 6.8 11.3712 6.8H8.62838C6.96876 6.8 6.7998 5.91206 6.7998 4.4C6.7998 2.88794 6.96876 2 8.62838 2Z" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/canvas/menu_icon05.svg b/public/static/images/canvas/menu_icon05.svg
new file mode 100644
index 00000000..b5ea63d0
--- /dev/null
+++ b/public/static/images/canvas/menu_icon05.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7005 7.2C18.2242 5.38686 18.0772 3.81293 17.1321 2.86787C15.1328 0.86853 10.3188 2.44091 6.37987 6.37987C5.95908 6.80066 5.5653 7.23143 5.2 7.66769M14.8 12.3323C14.4347 12.7686 14.0409 13.1993 13.6201 13.6201C9.68116 17.5591 4.86721 19.1315 2.86787 17.1321C1.85395 16.1182 1.7586 14.3804 2.42464 12.4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5998 7.6001L9.04328 9.44041C8.85327 9.68678 8.75827 9.80997 8.81713 9.90503C8.87598 10.0001 9.04725 10.0001 9.38978 10.0001H10.6098C10.9524 10.0001 11.1236 10.0001 11.1825 10.0952C11.2413 10.1902 11.1463 10.3134 10.9563 10.5598L9.38978 12.4001" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 15.0719C7.45018 14.6323 6.90718 14.1474 6.37987 13.6201C2.44091 9.68116 0.868529 4.86721 2.86787 2.86787C3.88179 1.85395 5.61957 1.7586 7.6 2.42464M12 17.4317C14.145 18.25 16.0505 18.2138 17.1321 17.1321C19.1315 15.1328 17.5591 10.3188 13.6201 6.37987C13.0928 5.85256 12.5498 5.36766 12 4.92806" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/menu_icon06.svg b/public/static/images/canvas/menu_icon06.svg
new file mode 100644
index 00000000..6c9705f3
--- /dev/null
+++ b/public/static/images/canvas/menu_icon06.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.45 14C4.45 14.4142 4.78579 14.75 5.2 14.75C5.61421 14.75 5.95 14.4142 5.95 14H4.45ZM17.2971 2.70294L17.8274 2.17261V2.17261L17.2971 2.70294ZM13.3618 15.5877L14.0933 15.4222L13.3618 15.5877ZM2.13811 15.5877L1.4066 15.7532L2.13811 15.5877ZM2.15558 14.3005L2.74092 14.7694H2.74092L2.15558 14.3005ZM10 2.75H13.2V1.25H10V2.75ZM17.25 6.8V14.8H18.75V6.8H17.25ZM5.95 14V6.8H4.45V14H5.95ZM10 1.25C8.88983 1.25 7.98176 1.24841 7.26661 1.34456C6.52989 1.44361 5.88666 1.65857 5.37261 2.17261L6.43327 3.23327C6.62217 3.04438 6.8961 2.90787 7.46648 2.83118C8.05845 2.75159 8.84743 2.75 10 2.75V1.25ZM5.95 6.8C5.95 5.64743 5.95159 4.85845 6.03118 4.26648C6.10787 3.6961 6.24438 3.42217 6.43327 3.23327L5.37261 2.17261C4.85857 2.68666 4.64361 3.32989 4.54456 4.06661C4.44841 4.78176 4.45 5.68983 4.45 6.8H5.95ZM13.2 2.75C14.3526 2.75 15.1416 2.75159 15.7335 2.83118C16.3039 2.90787 16.5778 3.04438 16.7667 3.23327L17.8274 2.17261C17.3133 1.65857 16.6701 1.44361 15.9334 1.34456C15.2182 1.24841 14.3102 1.25 13.2 1.25V2.75ZM18.75 6.8C18.75 5.68983 18.7516 4.78176 18.6554 4.06661C18.5564 3.32989 18.3414 2.68666 17.8274 2.17261L16.7667 3.23327C16.9556 3.42217 17.0921 3.6961 17.1688 4.26648C17.2484 4.85845 17.25 5.64743 17.25 6.8H18.75ZM17.25 14.8C17.25 15.6146 17.1004 16.2461 16.8345 16.6514C16.6005 17.0081 16.2412 17.25 15.5949 17.25V18.75C16.7197 18.75 17.563 18.2756 18.0887 17.4741C18.5826 16.7212 18.75 15.7527 18.75 14.8H17.25ZM15.5949 17.25C15.2245 17.25 14.9402 17.0971 14.6944 16.799C14.4311 16.4796 14.2241 16.0005 14.0933 15.4222L12.6302 15.7532C12.7903 16.4608 13.071 17.1878 13.537 17.7532C14.0207 18.3398 14.7075 18.75 15.5949 18.75V17.25ZM4.37128 17.25C4.00083 17.25 3.71651 17.0971 3.47076 16.799C3.20748 16.4796 3.00046 16.0005 2.86962 15.4222L1.4066 15.7532C1.56669 16.4608 1.8473 17.1878 2.31339 17.7532C2.79701 18.3398 3.48381 18.75 4.37128 18.75V17.25ZM4.37128 18.75H15.5949V17.25H4.37128V18.75ZM3.5696 14.75H11.5865V13.25H3.5696V14.75ZM2.86962 15.4222C2.83154 15.2539 2.80233 15.1243 2.78122 15.0123C2.76011 14.9004 2.75195 14.8303 2.7503 14.7837C2.74879 14.7406 2.75365 14.7347 2.74983 14.7477C2.74486 14.7646 2.73725 14.774 2.74092 14.7694L1.57024 13.8316C1.31616 14.1487 1.23912 14.4926 1.25123 14.8365C1.26141 15.1253 1.33849 15.4521 1.4066 15.7532L2.86962 15.4222ZM3.5696 13.25C3.20461 13.25 2.8377 13.2476 2.53638 13.2977C2.19443 13.3547 1.8419 13.4924 1.57024 13.8316L2.74092 14.7694C2.70995 14.808 2.67333 14.7956 2.78267 14.7774C2.93262 14.7524 3.15237 14.75 3.5696 14.75V13.25ZM14.0933 15.4222C14.0033 15.0244 13.925 14.6747 13.8377 14.406C13.7543 14.1493 13.6206 13.8207 13.33 13.5888L12.3946 14.7614C12.3235 14.7047 12.3462 14.6699 12.411 14.8694C12.4719 15.0569 12.5336 15.326 12.6302 15.7532L14.0933 15.4222ZM11.5865 14.75C11.9556 14.75 12.172 14.751 12.3259 14.7676C12.4721 14.7833 12.4478 14.8039 12.3946 14.7614L13.33 13.5888C13.0572 13.3712 12.7471 13.3042 12.4863 13.2762C12.2333 13.249 11.9215 13.25 11.5865 13.25V14.75Z" fill="white"/>
+<path d="M8.7998 6H14.3998" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M8.7998 9.2002H11.5998" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/canvas/minus.svg b/public/static/images/canvas/minus.svg
new file mode 100644
index 00000000..6949c3e8
--- /dev/null
+++ b/public/static/images/canvas/minus.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.40015 6.99998L4.60015 6.99998" stroke="#A8A8A8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 7.00002C13 3.68631 10.3137 1.00001 7 1.00001C3.68629 1.00001 1 3.68631 1 7.00002C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7.00002Z" stroke="#A8A8A8"/>
+</svg>
diff --git a/public/static/images/canvas/modal_close.svg b/public/static/images/canvas/modal_close.svg
new file mode 100644
index 00000000..081c0ccc
--- /dev/null
+++ b/public/static/images/canvas/modal_close.svg
@@ -0,0 +1,10 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_55_91)">
+<path d="M8.99915 9L1 1M1.00085 9L9 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_55_91">
+<rect width="10" height="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/plan_close_black.svg b/public/static/images/canvas/plan_close_black.svg
new file mode 100644
index 00000000..47445748
--- /dev/null
+++ b/public/static/images/canvas/plan_close_black.svg
@@ -0,0 +1,4 @@
+<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1.5L1 6.5" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 1.5L6 6.5" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/canvas/plan_close_gray.svg b/public/static/images/canvas/plan_close_gray.svg
new file mode 100644
index 00000000..bba119ea
--- /dev/null
+++ b/public/static/images/canvas/plan_close_gray.svg
@@ -0,0 +1,4 @@
+<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1.5L1 6.5" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 1.5L6 6.5" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/canvas/plane_add.svg b/public/static/images/canvas/plane_add.svg
new file mode 100644
index 00000000..9b6e3e06
--- /dev/null
+++ b/public/static/images/canvas/plane_add.svg
@@ -0,0 +1,4 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50001 0.964466V8.03553" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M0.964466 4.5H8.03553" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/canvas/plus.svg b/public/static/images/canvas/plus.svg
new file mode 100644
index 00000000..6b5fc7f2
--- /dev/null
+++ b/public/static/images/canvas/plus.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.40015 6.99998L4.60015 6.99998" stroke="#A8A8A8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.00015 4.6L7.00015 9.4" stroke="#A8A8A8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 7.00002C13 3.68631 10.3137 1.00001 7 1.00001C3.68629 1.00001 1 3.68631 1 7.00002C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7.00002Z" stroke="#A8A8A8"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon01.svg b/public/static/images/canvas/side_icon01.svg
new file mode 100644
index 00000000..6de890e2
--- /dev/null
+++ b/public/static/images/canvas/side_icon01.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6252 7.37502L14.1252 8.87502M10.0002 10L11.5002 11.5M7.37518 12.625L8.87518 14.125" stroke="white" stroke-linecap="round"/>
+<path d="M7.40165 3.00825C8.42518 1.98472 8.93695 1.47295 9.50785 1.23648C10.2691 0.921175 11.1243 0.921175 11.8855 1.23648C12.4564 1.47295 12.9682 1.98472 13.9917 3.00825C15.0153 4.03179 15.527 4.54355 15.7635 5.11446C16.0788 5.87566 16.0788 6.73094 15.7635 7.49215C15.527 8.06305 15.0153 8.57482 13.9917 9.59835L9.59835 13.9917C8.57482 15.0153 8.06305 15.527 7.49215 15.7635C6.73094 16.0788 5.87566 16.0788 5.11446 15.7635C4.54355 15.527 4.03179 15.0153 3.00825 13.9917C1.98472 12.9682 1.47295 12.4564 1.23648 11.8855C0.921175 11.1243 0.921175 10.2691 1.23648 9.50785C1.47295 8.93695 1.98472 8.42518 3.00825 7.40165L7.40165 3.00825Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon02.svg b/public/static/images/canvas/side_icon02.svg
new file mode 100644
index 00000000..e320aefc
--- /dev/null
+++ b/public/static/images/canvas/side_icon02.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.68431 12.4474H12.4475M12.4475 12.4474V9.6842M12.4475 12.4474L9.28958 9.28946M7.71063 7.71051L4.55273 4.55262M4.55273 4.55262H7.31589M4.55273 4.55262V7.31578" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8.5C1 4.96447 1 3.1967 2.09835 2.09835C3.1967 1 4.96447 1 8.5 1C12.0355 1 13.8033 1 14.9017 2.09835C16 3.1967 16 4.96447 16 8.5C16 12.0355 16 13.8033 14.9017 14.9017C13.8033 16 12.0355 16 8.5 16C4.96447 16 3.1967 16 2.09835 14.9017C1 13.8033 1 12.0355 1 8.5Z" stroke="white"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon03.svg b/public/static/images/canvas/side_icon03.svg
new file mode 100644
index 00000000..3f952192
--- /dev/null
+++ b/public/static/images/canvas/side_icon03.svg
@@ -0,0 +1,8 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4996 13L14.4996 4.00001M3.99963 14.5H12.9996M12.9996 2.50001H3.99963M2.49963 4.00001V13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6785 5.74828L10.7919 5.26131L10.7919 5.26131L10.6785 5.74828ZM6.32116 5.74828L6.43458 6.23525L6.32116 5.74828ZM5.71277 5.98036L6.05306 6.3467H6.05306L5.71277 5.98036ZM4.99982 6.83332C4.99982 7.10946 5.22367 7.33332 5.49982 7.33332C5.77596 7.33332 5.99982 7.10946 5.99982 6.83332H4.99982ZM5.58784 6.13773L5.15386 5.88942L5.15386 5.88942L5.58784 6.13773ZM11.2869 5.98036L11.6271 5.61402L11.6271 5.61402L11.2869 5.98036ZM10.9998 6.83332C10.9998 7.10946 11.2237 7.33332 11.4998 7.33332C11.776 7.33332 11.9998 7.10946 11.9998 6.83332H10.9998ZM11.4118 6.13773L10.9778 6.38604L10.9778 6.38605L11.4118 6.13773ZM7.99982 11.5C7.99982 11.7761 8.22367 12 8.49982 12C8.77596 12 8.99982 11.7761 8.99982 11.5H7.99982ZM9.49982 12C9.77596 12 9.99982 11.7761 9.99982 11.5C9.99982 11.2238 9.77596 11 9.49982 11V12ZM7.49982 11C7.22367 11 6.99982 11.2238 6.99982 11.5C6.99982 11.7761 7.22367 12 7.49982 12V11ZM8.49982 5.99998C9.2144 5.99998 9.90651 6.08187 10.5651 6.23525L10.7919 5.26131C10.0591 5.09064 9.29089 4.99998 8.49982 4.99998V5.99998ZM6.43458 6.23525C7.09313 6.08187 7.78523 5.99998 8.49982 5.99998V4.99998C7.70874 4.99998 6.94053 5.09064 6.20775 5.26131L6.43458 6.23525ZM6.20775 5.26131C5.9342 5.32503 5.62067 5.38349 5.37249 5.61402L6.05306 6.3467C6.0545 6.34537 6.06111 6.33644 6.11146 6.31879C6.17602 6.29615 6.26506 6.27473 6.43458 6.23525L6.20775 5.26131ZM5.99982 6.83332C5.99982 6.64293 6.0004 6.5366 6.00832 6.45776C6.01183 6.42276 6.01592 6.40432 6.01843 6.39535C6.02048 6.38805 6.02163 6.38639 6.02182 6.38605L5.15386 5.88942C5.06358 6.04719 5.02861 6.20563 5.01332 6.3578C4.99924 6.498 4.99982 6.66255 4.99982 6.83332H5.99982ZM5.37249 5.61402C5.28951 5.6911 5.21011 5.79112 5.15386 5.88942L6.02182 6.38605C6.02789 6.37545 6.04411 6.35502 6.05306 6.3467L5.37249 5.61402ZM10.5651 6.23525C10.7346 6.27473 10.8236 6.29615 10.8882 6.31879C10.9385 6.33644 10.9451 6.34537 10.9466 6.3467L11.6271 5.61402C11.379 5.38349 11.0654 5.32503 10.7919 5.26131L10.5651 6.23525ZM11.9998 6.83332C11.9998 6.66255 12.0004 6.498 11.9863 6.3578C11.971 6.20563 11.936 6.04719 11.8458 5.88942L10.9778 6.38605C10.978 6.38639 10.9792 6.38805 10.9812 6.39535C10.9837 6.40432 10.9878 6.42276 10.9913 6.45776C10.9992 6.5366 10.9998 6.64293 10.9998 6.83332H11.9998ZM10.9466 6.3467C10.9555 6.35502 10.9717 6.37545 10.9778 6.38604L11.8458 5.88942C11.7895 5.79112 11.7101 5.6911 11.6271 5.61402L10.9466 6.3467ZM7.99982 5.49998V11.5H8.99982V5.49998H7.99982ZM9.49982 11H7.49982V12H9.49982V11Z" fill="white"/>
+<rect x="12.9998" y="1" width="3" height="3" rx="1" stroke="white"/>
+<rect x="1" y="1" width="3" height="3" rx="1" stroke="white"/>
+<rect x="12.9998" y="13" width="3" height="3" rx="1" stroke="white"/>
+<rect x="1" y="13" width="3" height="3" rx="1" stroke="white"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon04.svg b/public/static/images/canvas/side_icon04.svg
new file mode 100644
index 00000000..cc196515
--- /dev/null
+++ b/public/static/images/canvas/side_icon04.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1319 4.81727L14.7648 4.18031C14.4873 3.69859 14.3485 3.45773 14.1123 3.36169C13.8762 3.26564 13.6091 3.34143 13.075 3.493L12.1676 3.74857C11.8266 3.82721 11.4688 3.7826 11.1575 3.62262L10.907 3.47809C10.6399 3.30707 10.4346 3.05492 10.3209 2.75853L10.0726 2.01689C9.90929 1.52611 9.82765 1.28072 9.6333 1.14036C9.43894 1 9.18078 1 8.66447 1H7.83553C7.31922 1 7.06106 1 6.8667 1.14036C6.67235 1.28072 6.59071 1.52611 6.42744 2.01689L6.17911 2.75853C6.06543 3.05492 5.86006 3.30707 5.59304 3.47809L5.34254 3.62262C5.03117 3.7826 4.67339 3.82721 4.33238 3.74857L3.42502 3.493C2.89088 3.34143 2.62381 3.26564 2.38766 3.36169C2.15152 3.45773 2.01273 3.69859 1.73515 4.18031L1.36812 4.81727C1.10794 5.26881 0.977843 5.49458 1.00309 5.73493C1.02834 5.97527 1.2025 6.16895 1.55082 6.55631L2.31749 7.41345C2.50487 7.65068 2.63791 8.06408 2.63791 8.43576C2.63791 8.80767 2.50492 9.22097 2.31751 9.45823L1.55082 10.3154C1.2025 10.7027 1.02834 10.8964 1.00309 11.1368C0.977843 11.3771 1.10794 11.6029 1.36813 12.0544L1.73514 12.6914C2.01271 13.1731 2.15152 13.414 2.38766 13.51C2.62381 13.606 2.89089 13.5303 3.42504 13.3787L4.33234 13.1231C4.67342 13.0444 5.03126 13.0891 5.34268 13.2491L5.59314 13.3937C5.8601 13.5647 6.06543 13.8168 6.17909 14.1131L6.42744 14.8549C6.59071 15.3456 6.67235 15.591 6.8667 15.7314C7.06106 15.8718 7.31922 15.8718 7.83553 15.8718H8.66447C9.18078 15.8718 9.43894 15.8718 9.6333 15.7314C9.82765 15.591 9.90929 15.3456 10.0726 14.8549L10.3209 14.1131C10.4346 13.8168 10.6399 13.5647 10.9069 13.3937L11.1573 13.2491C11.4687 13.0891 11.8266 13.0444 12.1677 13.1231L13.075 13.3787C13.6091 13.5303 13.8762 13.606 14.1123 13.51C14.3485 13.414 14.4873 13.1731 14.7649 12.6914L15.1319 12.0544C15.3921 11.6029 15.5222 11.3771 15.4969 11.1368C15.4717 10.8964 15.2975 10.7027 14.9492 10.3154L14.1825 9.45823C13.9951 9.22097 13.8621 8.80767 13.8621 8.43576C13.8621 8.06408 13.9951 7.65068 14.1825 7.41345L14.9492 6.55631C15.2975 6.16895 15.4717 5.97527 15.4969 5.73493C15.5222 5.49458 15.3921 5.26881 15.1319 4.81727Z" stroke="white" stroke-linecap="round"/>
+<path d="M10.8204 8.43006C10.8204 9.86741 9.65521 11.0326 8.21785 11.0326C6.7805 11.0326 5.6153 9.86741 5.6153 8.43006C5.6153 6.9927 6.7805 5.8275 8.21785 5.8275C9.65521 5.8275 10.8204 6.9927 10.8204 8.43006Z" stroke="white"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon05.svg b/public/static/images/canvas/side_icon05.svg
new file mode 100644
index 00000000..569c5b64
--- /dev/null
+++ b/public/static/images/canvas/side_icon05.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33344 1H8.33344C9.99029 1 11.3334 2.34315 11.3334 4C11.3334 5.65685 9.99029 7 8.33344 7H1.33344" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.66675 9L1.37385 7.70711C1.04052 7.37377 0.873855 7.20711 0.873855 7C0.873855 6.79289 1.04052 6.62623 1.37385 6.29289L2.66675 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon06.svg b/public/static/images/canvas/side_icon06.svg
new file mode 100644
index 00000000..7ee72ac1
--- /dev/null
+++ b/public/static/images/canvas/side_icon06.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66675 1H3.66675C2.00989 1 0.666748 2.34315 0.666748 4C0.666748 5.65685 2.00989 7 3.66675 7H10.6667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33344 9L10.6263 7.70711C10.9597 7.37377 11.1263 7.20711 11.1263 7C11.1263 6.79289 10.9597 6.62623 10.6263 6.29289L9.33344 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon07.svg b/public/static/images/canvas/side_icon07.svg
new file mode 100644
index 00000000..ec65154f
--- /dev/null
+++ b/public/static/images/canvas/side_icon07.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99915 9L1 1M1.00085 9L9 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon08.svg b/public/static/images/canvas/side_icon08.svg
new file mode 100644
index 00000000..afbb1e64
--- /dev/null
+++ b/public/static/images/canvas/side_icon08.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.625 12.25V8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H9.625C10.0392 8.125 10.375 8.46079 10.375 8.875V12.625M8.875 4L4.375 4C3.96079 4 3.625 3.66421 3.625 3.25L3.625 1M12.6234 3.62342L10.3766 1.37658C10.1355 1.13546 9.80844 1 9.46745 1H2.28571C1.57563 1 1 1.57563 1 2.28571V11.7143C1 12.4244 1.57563 13 2.28571 13H11.7143C12.4244 13 13 12.4244 13 11.7143V4.53255C13 4.19156 12.8645 3.86454 12.6234 3.62342Z" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/canvas/side_icon09.svg b/public/static/images/canvas/side_icon09.svg
new file mode 100644
index 00000000..aac0b489
--- /dev/null
+++ b/public/static/images/canvas/side_icon09.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.1944 2.41667C4.29699 1.92185 4.46822 1.54853 4.75399 1.24851C5.46694 0.5 6.61442 0.5 8.90938 0.5C11.2043 0.5 12.3518 0.5 13.0648 1.24851C13.7777 1.99701 13.7777 3.20171 13.7777 5.61111V6.88889C13.7777 9.29829 13.7777 10.503 13.0648 11.2515C12.3518 12 11.2043 12 8.90938 12C6.61442 12 5.46694 12 4.75399 11.2515C4.46822 10.9515 4.29699 10.5782 4.1944 10.0833" stroke="white" stroke-linecap="round"/>
+<path d="M1.00026 6.23385L8.6666 6.25001M1.00026 6.23385C0.995959 6.33775 1.03309 6.44227 1.11168 6.53538C1.60052 7.11451 2.87114 8.16667 2.87114 8.16667M1.00026 6.23385C1.00412 6.14068 1.0413 6.04802 1.11179 5.96454C1.60072 5.38552 2.87114 4.33334 2.87114 4.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/common/Logo.svg b/public/static/images/common/Logo.svg
new file mode 100644
index 00000000..fa04f4d3
--- /dev/null
+++ b/public/static/images/common/Logo.svg
@@ -0,0 +1,17 @@
+<svg width="232" height="30" viewBox="0 0 232 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.044 15.1656C11.6214 11.3206 15.6542 8.23734 21.0434 8.27907C26.4379 8.32081 31.1541 11.4719 31.5767 15.3117C31.9993 19.1619 27.9717 22.24 22.5772 22.1982C17.1828 22.1565 12.4665 19.0106 12.044 15.1656ZM32.5836 16.3551C32.0984 11.5867 26.6674 7.68433 20.4591 7.63216C14.2456 7.57999 9.60758 11.4041 10.098 16.1725C10.5884 20.9409 16.0141 24.8485 22.2225 24.9007C28.4308 24.9476 33.074 21.1287 32.5836 16.3551Z" fill="#FBB584"/>
+<path d="M23.2085 24.9946C20.1513 28.1926 15.242 28.4587 12.2422 25.5893C9.24237 22.7199 9.29454 17.8054 12.357 14.6126C15.4142 11.4197 20.3287 11.1537 23.318 14.0178C26.3126 16.8872 26.2657 21.8017 23.2033 24.9946M11.877 14.5082C8.32417 18.2228 8.26678 23.9355 11.7466 27.2692C15.2264 30.6029 20.9391 30.2951 24.4919 26.5806C28.0499 22.866 28.1073 17.1533 24.6223 13.8196C21.1425 10.4859 15.435 10.7937 11.877 14.5082Z" fill="#F89B6C"/>
+<path d="M12.2057 2.55073C18.5653 0.166524 24.8571 2.57681 26.2553 7.93475C27.6534 13.2979 23.6311 19.5688 17.2715 21.953C10.9119 24.3424 4.62006 21.9269 3.22189 16.569C1.82371 11.2111 5.84608 4.93493 12.2057 2.55073ZM6.29474 4.59582C-0.304856 9.81811 -1.98475 17.3933 2.54367 21.5044C7.06687 25.6206 16.0872 24.7181 22.6868 19.4906C29.2864 14.2683 30.9663 6.6983 26.4379 2.58203C21.9094 -1.53424 12.8891 -0.631687 6.29474 4.59582Z" fill="#F37321"/>
+<path d="M47.7444 8.89993V20.7062H45.8976V14.4822H38.9015V20.7062H37.0494V8.89993H38.9015V12.8597H45.8976V8.89993H47.7444Z" fill="white"/>
+<path d="M52.1789 20.7062C51.3181 20.7062 50.6242 20.4766 50.1286 19.981C49.6069 19.501 49.3565 18.8854 49.3565 18.1185V17.4872C49.3565 16.7151 49.6017 16.0995 50.1286 15.6091C50.6242 15.1135 51.3129 14.8683 52.1789 14.8683H57.0047V14.8213C57.0047 13.8822 56.483 13.4023 55.45 13.4023H50.0869V11.8319H55.4187C56.53 11.8319 57.3751 12.1241 57.9594 12.6771C58.5438 13.2301 58.8516 14.0179 58.8516 15.0509V18.1811C58.8516 18.9845 58.5751 19.6158 58.0325 20.0749C57.5369 20.5079 56.8482 20.7062 55.9509 20.7062H52.1737H52.1789ZM55.5544 16.4386H52.6276C51.6729 16.4386 51.2086 16.8403 51.2086 17.6385V17.9307C51.2086 18.7341 51.6729 19.115 52.6276 19.115H55.5544C56.5091 19.115 57.0047 18.7289 57.0047 17.9307V17.6385C57.0047 16.8351 56.5091 16.4386 55.5544 16.4386Z" fill="white"/>
+<path d="M64.2617 11.8319H66.0824C67.225 11.8319 68.1328 12.171 68.7953 12.8336C69.4422 13.5118 69.7814 14.4353 69.7814 15.6247V20.7114H67.9345V15.7187C67.9345 14.9778 67.778 14.4405 67.5015 14.1014C67.1311 13.6683 66.625 13.4388 65.9468 13.4388H64.3765C63.7139 13.4388 63.2026 13.6683 62.8374 14.1014C62.5609 14.4405 62.4357 14.9778 62.4357 15.7187V20.7114H60.5889V15.6247C60.5889 14.4405 60.9123 13.5118 61.5749 12.8336C62.2218 12.171 63.1296 11.8319 64.2721 11.8319H64.2617Z" fill="white"/>
+<path d="M78.306 19.5219C77.6435 20.3253 76.8244 20.7062 75.854 20.7062H74.7115C73.6785 20.7062 72.8646 20.3827 72.2595 19.7358C71.6751 19.1358 71.3986 18.2698 71.3986 17.1638V11.8319H73.235V17.1794C73.235 17.8264 73.3759 18.3063 73.6524 18.5985C73.9602 18.9376 74.3776 19.1098 74.8993 19.1098H75.7027C76.2244 19.1098 76.6418 18.9376 76.9653 18.5985C77.2418 18.3063 77.3983 17.8264 77.3983 17.1794V11.8319H79.219V17.1794C79.219 17.8264 79.3599 18.3063 79.6364 18.5985C79.9442 18.9376 80.3616 19.1098 80.8833 19.1098H81.6867C82.2084 19.1098 82.6258 18.9376 82.9492 18.5985C83.2257 18.3063 83.3823 17.8264 83.3823 17.1794V11.8319H85.2187V17.1638C85.2187 18.275 84.9109 19.1358 84.3265 19.7358C83.7109 20.3827 82.8919 20.7062 81.8589 20.7062H80.732C79.7773 20.7062 78.9582 20.3201 78.3113 19.5219H78.306Z" fill="white"/>
+<path d="M90.634 13.4336C89.9714 13.4336 89.4601 13.6631 89.0949 14.0961C88.8184 14.4353 88.6932 14.9726 88.6932 15.7134V20.7062H86.8464V8.86864H88.6932V12.3693C89.2149 12.0145 89.8358 11.8319 90.5296 11.8319H92.3504C93.4929 11.8319 94.4007 12.171 95.0633 12.8336C95.7102 13.5118 96.0493 14.4353 96.0493 15.6247V20.7114H94.1972V15.7187C94.1972 14.9778 94.0407 14.4405 93.7642 14.1014C93.3938 13.6683 92.8877 13.4388 92.2095 13.4388H90.6392L90.634 13.4336Z" fill="white"/>
+<path d="M100.39 20.7062C99.5291 20.7062 98.8353 20.4766 98.3396 19.981C97.8179 19.501 97.5675 18.8854 97.5675 18.1185V17.4872C97.5675 16.7151 97.8127 16.0995 98.3396 15.6091C98.8353 15.1135 99.5239 14.8683 100.39 14.8683H105.216V14.8213C105.216 13.8822 104.694 13.4023 103.661 13.4023H98.2979V11.8319H103.63C104.741 11.8319 105.586 12.1241 106.17 12.6771C106.755 13.2301 107.063 14.0179 107.063 15.0509V18.1811C107.063 18.9845 106.786 19.6158 106.244 20.0749C105.748 20.5079 105.059 20.7062 104.162 20.7062H100.385H100.39ZM103.765 16.4386H100.839C99.8839 16.4386 99.4196 16.8403 99.4196 17.6385V17.9307C99.4196 18.7341 99.8839 19.115 100.839 19.115H103.765C104.72 19.115 105.216 18.7289 105.216 17.9307V17.6385C105.216 16.8351 104.72 16.4386 103.765 16.4386Z" fill="white"/>
+<path d="M115.066 20.7114H113.354V19.0941H114.883C115.645 19.0836 116.177 18.875 116.485 18.4628C116.73 18.1237 116.865 17.5811 116.886 16.8299V8.90514H118.77V16.9551C118.77 18.2489 118.462 19.1984 117.846 19.7932C117.231 20.4088 116.302 20.7166 115.071 20.7166L115.066 20.7114Z" fill="white"/>
+<path d="M123.194 20.7113C122.333 20.7113 121.644 20.4714 121.143 19.9862C120.627 19.501 120.371 18.8802 120.371 18.1185V17.4872C120.371 16.7151 120.627 16.089 121.143 15.6038C121.644 15.1082 122.333 14.863 123.194 14.863H128.02V14.8161C128.02 13.8718 127.498 13.397 126.465 13.397H121.102V11.8267H126.434C127.545 11.8267 128.39 12.1084 128.979 12.6718C129.574 13.2144 129.872 14.0074 129.872 15.0456V18.1758C129.872 18.9793 129.6 19.6105 129.053 20.0749C128.557 20.4974 127.863 20.7061 126.971 20.7061H123.194V20.7113ZM126.569 16.4386H123.637C122.693 16.4386 122.218 16.8403 122.218 17.6437V17.9359C122.218 18.7289 122.693 19.1254 123.637 19.1254H126.569C127.534 19.1254 128.02 18.7289 128.02 17.9359V17.6437C128.02 16.8403 127.534 16.4386 126.569 16.4386Z" fill="white"/>
+<path d="M131.562 15.4525C131.562 14.2891 131.875 13.4022 132.501 12.7866C133.127 12.1606 133.988 11.8423 135.089 11.8319H137.509C138.61 11.8423 139.471 12.1606 140.102 12.7866C140.739 13.4022 141.057 14.2944 141.057 15.4525V17.1011C141.057 18.2541 140.739 19.1358 140.102 19.7514C139.476 20.3775 138.615 20.6957 137.525 20.7061H133.409V23.7581H131.557V15.4473L131.562 15.4525ZM133.414 15.5621V19.1097H137.389C138.036 19.1097 138.522 18.9115 138.84 18.5097C139.085 18.1706 139.21 17.6698 139.21 17.0124V15.5621C139.21 14.8943 139.085 14.3883 138.84 14.0492C138.522 13.637 138.036 13.4335 137.389 13.4335H135.214C134.567 13.4335 134.087 13.637 133.779 14.0492C133.534 14.3883 133.409 14.8943 133.409 15.5621H133.414Z" fill="white"/>
+<path d="M145.392 20.7113C144.532 20.7113 143.843 20.4714 143.342 19.9862C142.826 19.501 142.57 18.8802 142.57 18.1185V17.4872C142.57 16.7151 142.826 16.089 143.342 15.6038C143.843 15.1082 144.532 14.863 145.392 14.863H150.218V14.8161C150.218 13.8718 149.696 13.397 148.664 13.397H143.3V11.8267H148.632C149.743 11.8267 150.589 12.1084 151.178 12.6718C151.773 13.2144 152.07 14.0074 152.07 15.0456V18.1758C152.07 18.9793 151.799 19.6105 151.251 20.0749C150.756 20.4974 150.062 20.7061 149.17 20.7061H145.392V20.7113ZM148.768 16.4386H145.836C144.892 16.4386 144.417 16.8403 144.417 17.6437V17.9359C144.417 18.7289 144.892 19.1254 145.836 19.1254H148.768C149.733 19.1254 150.218 18.7289 150.218 17.9359V17.6437C150.218 16.8403 149.733 16.4386 148.768 16.4386Z" fill="white"/>
+<path d="M157.48 11.8319H159.301C160.454 11.8319 161.357 12.1658 162.014 12.8336C162.671 13.5014 163 14.43 163 15.6247V20.7114H161.153V15.7186C161.153 14.9778 161.007 14.4404 160.72 14.1013C160.36 13.6579 159.839 13.4388 159.166 13.4388H157.59C156.933 13.4388 156.421 13.6579 156.051 14.1013C155.785 14.4404 155.649 14.9778 155.649 15.7186V20.7114H153.802V15.6247C153.802 14.4352 154.131 13.5014 154.788 12.8336C155.446 12.1658 156.343 11.8319 157.486 11.8319H157.48Z" fill="white"/>
+<path d="M175.901 20.4726C175.086 20.4726 174.363 20.2689 173.73 19.8616C173.106 19.4543 172.616 18.8779 172.261 18.1326C171.906 17.3786 171.728 16.4903 171.728 15.4676C171.728 14.4363 171.906 13.5566 172.261 12.8286C172.616 12.0919 173.106 11.5286 173.73 11.1386C174.363 10.7399 175.086 10.5406 175.901 10.5406C176.724 10.5406 177.448 10.7399 178.072 11.1386C178.696 11.5286 179.186 12.0919 179.541 12.8286C179.896 13.5566 180.074 14.4363 180.074 15.4676C180.074 16.4903 179.896 17.3786 179.541 18.1326C179.186 18.8779 178.696 19.4543 178.072 19.8616C177.448 20.2689 176.724 20.4726 175.901 20.4726ZM175.901 19.2116C176.43 19.2116 176.889 19.0643 177.279 18.7696C177.678 18.4663 177.985 18.0329 178.202 17.4696C178.419 16.9063 178.527 16.2389 178.527 15.4676C178.527 14.7223 178.419 14.0809 178.202 13.5436C177.985 12.9976 177.678 12.5816 177.279 12.2956C176.889 12.0009 176.43 11.8536 175.901 11.8536C175.372 11.8536 174.909 12.0009 174.51 12.2956C174.12 12.5816 173.817 12.9976 173.6 13.5436C173.392 14.0809 173.288 14.7223 173.288 15.4676C173.288 16.2389 173.392 16.9063 173.6 17.4696C173.817 18.0329 174.12 18.4663 174.51 18.7696C174.909 19.0643 175.372 19.2116 175.901 19.2116ZM178.904 22.7866C178.271 22.7866 177.704 22.6739 177.201 22.4486C176.698 22.2319 176.274 21.9286 175.927 21.5386C175.58 21.1573 175.312 20.7283 175.121 20.2516L176.681 20.1086C176.802 20.4293 176.98 20.6979 177.214 20.9146C177.457 21.1313 177.738 21.2873 178.059 21.3826C178.38 21.4866 178.718 21.5386 179.073 21.5386C179.281 21.5386 179.467 21.5256 179.632 21.4996C179.805 21.4736 179.961 21.4346 180.1 21.3826L180.386 22.5266C180.23 22.5959 180.022 22.6566 179.762 22.7086C179.502 22.7606 179.216 22.7866 178.904 22.7866ZM182.738 20.4726C182.46 20.4726 182.222 20.3729 182.023 20.1736C181.832 19.9656 181.737 19.7099 181.737 19.4066C181.737 19.0946 181.832 18.8433 182.023 18.6526C182.222 18.4533 182.46 18.3536 182.738 18.3536C183.024 18.3536 183.262 18.4533 183.453 18.6526C183.652 18.8433 183.752 19.0946 183.752 19.4066C183.752 19.7099 183.652 19.9656 183.453 20.1736C183.262 20.3729 183.024 20.4726 182.738 20.4726ZM189.665 20.4726C189.067 20.4726 188.508 20.3643 187.988 20.1476C187.477 19.9223 187.026 19.5973 186.636 19.1726C186.246 18.7479 185.943 18.2323 185.726 17.6256C185.509 17.0103 185.401 16.3083 185.401 15.5196C185.401 14.7396 185.514 14.0419 185.739 13.4266C185.964 12.8113 186.272 12.2913 186.662 11.8666C187.052 11.4333 187.511 11.1039 188.04 10.8786C188.569 10.6533 189.136 10.5406 189.743 10.5406C190.332 10.5406 190.857 10.6619 191.316 10.9046C191.775 11.1473 192.152 11.4289 192.447 11.7496L191.641 12.7116C191.39 12.4603 191.108 12.2566 190.796 12.1006C190.493 11.9359 190.15 11.8536 189.769 11.8536C189.214 11.8536 188.725 12.0009 188.3 12.2956C187.884 12.5903 187.555 13.0063 187.312 13.5436C187.078 14.0809 186.961 14.7266 186.961 15.4806C186.961 16.2346 187.074 16.8889 187.299 17.4436C187.524 17.9896 187.845 18.4099 188.261 18.7046C188.677 18.9993 189.167 19.1466 189.73 19.1466C190.163 19.1466 190.549 19.0556 190.887 18.8736C191.234 18.6829 191.55 18.4316 191.836 18.1196L192.655 19.0816C192.265 19.5323 191.823 19.8789 191.329 20.1216C190.844 20.3556 190.289 20.4726 189.665 20.4726ZM193.077 20.2906L196.249 10.7096H197.991L201.163 20.2906H199.564L198.017 15.0906C197.861 14.5706 197.709 14.0463 197.562 13.5176C197.415 12.9803 197.267 12.4429 197.12 11.9056H197.068C196.929 12.4516 196.782 12.9889 196.626 13.5176C196.479 14.0463 196.327 14.5706 196.171 15.0906L194.624 20.2906H193.077ZM194.871 17.5736V16.3776H199.343V17.5736H194.871ZM205.155 20.4726C204.496 20.4726 203.872 20.3469 203.283 20.0956C202.702 19.8443 202.191 19.4976 201.749 19.0556L202.633 18.0156C202.98 18.3536 203.374 18.6266 203.816 18.8346C204.267 19.0426 204.726 19.1466 205.194 19.1466C205.766 19.1466 206.204 19.0209 206.507 18.7696C206.819 18.5183 206.975 18.1933 206.975 17.7946C206.975 17.4999 206.91 17.2659 206.78 17.0926C206.65 16.9106 206.468 16.7589 206.234 16.6376C206.009 16.5163 205.749 16.3906 205.454 16.2606L204.128 15.6886C203.816 15.5586 203.508 15.3896 203.205 15.1816C202.91 14.9649 202.663 14.6963 202.464 14.3756C202.273 14.0463 202.178 13.6476 202.178 13.1796C202.178 12.6769 202.312 12.2263 202.581 11.8276C202.85 11.4289 203.222 11.1169 203.699 10.8916C204.176 10.6576 204.717 10.5406 205.324 10.5406C205.887 10.5406 206.42 10.6489 206.923 10.8656C207.426 11.0823 207.855 11.3769 208.21 11.7496L207.443 12.7116C207.14 12.4429 206.815 12.2349 206.468 12.0876C206.13 11.9316 205.749 11.8536 205.324 11.8536C204.83 11.8536 204.44 11.9663 204.154 12.1916C203.868 12.4083 203.725 12.7029 203.725 13.0756C203.725 13.3529 203.799 13.5826 203.946 13.7646C204.093 13.9379 204.284 14.0853 204.518 14.2066C204.761 14.3193 205.008 14.4276 205.259 14.5316L206.572 15.0906C206.953 15.2466 207.291 15.4373 207.586 15.6626C207.881 15.8879 208.11 16.1609 208.275 16.4816C208.44 16.8023 208.522 17.2009 208.522 17.6776C208.522 18.1889 208.388 18.6569 208.119 19.0816C207.85 19.4976 207.465 19.8356 206.962 20.0956C206.459 20.3469 205.857 20.4726 205.155 20.4726ZM211.928 20.2906V11.9836H209.133V10.7096H216.27V11.9836H213.462V20.2906H211.928ZM220.859 20.2906V10.7096H222.367V20.2906H220.859ZM224.87 20.2906V10.7096H226.378V20.2906H224.87ZM228.882 20.2906V10.7096H230.39V20.2906H228.882Z" fill="white"/>
+</svg>
diff --git a/public/static/images/common/datepicker.svg b/public/static/images/common/datepicker.svg
new file mode 100644
index 00000000..e892f202
--- /dev/null
+++ b/public/static/images/common/datepicker.svg
@@ -0,0 +1,17 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="date_ico 1" clip-path="url(#clip0_2005_1848)">
+<g id="&#236;&#130;&#172;&#234;&#176;&#129;&#237;&#152;&#149; 316">
+<path id="Vector" d="M12 2H2C0.89543 2 0 2.89543 0 4V13C0 14.1046 0.89543 15 2 15H12C13.1046 15 14 14.1046 14 13V4C14 2.89543 13.1046 2 12 2Z" fill="white"/>
+<path id="Vector_2" d="M12 2.5H2C1.17157 2.5 0.5 3.17157 0.5 4V13C0.5 13.8284 1.17157 14.5 2 14.5H12C12.8284 14.5 13.5 13.8284 13.5 13V4C13.5 3.17157 12.8284 2.5 12 2.5Z" stroke="#7D8894"/>
+</g>
+<path id="&#236;&#130;&#172;&#234;&#176;&#129;&#237;&#152;&#149; 323" d="M2 2.5H12C12.3978 2.5 12.7794 2.65804 13.0607 2.93934C13.342 3.22064 13.5 3.60218 13.5 4V6.5H0.5V4C0.5 3.60218 0.658035 3.22064 0.93934 2.93934C1.22064 2.65804 1.60218 2.5 2 2.5Z" fill="#7D8894" stroke="#7D8894"/>
+<path id="&#236;&#130;&#172;&#234;&#176;&#129;&#237;&#152;&#149; 324" d="M4 0C4.26522 0 4.51957 0.105357 4.70711 0.292893C4.89464 0.48043 5 0.734784 5 1V3H3V1C3 0.734784 3.10536 0.48043 3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0Z" fill="#7D8894"/>
+<path id="&#236;&#130;&#172;&#234;&#176;&#129;&#237;&#152;&#149; 325" d="M10 0C10.2652 0 10.5196 0.105357 10.7071 0.292893C10.8946 0.48043 11 0.734784 11 1V3H9V1C9 0.734784 9.10536 0.48043 9.29289 0.292893C9.48043 0.105357 9.73478 0 10 0Z" fill="#7D8894"/>
+<path id="&#237;&#140;&#168;&#236;&#138;&#164; 10" d="M1 6.556H13.04" stroke="#7D8894"/>
+</g>
+<defs>
+<clipPath id="clip0_2005_1848">
+<rect width="14" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/common/nav-arr.svg b/public/static/images/common/nav-arr.svg
new file mode 100644
index 00000000..a9ddbf4a
--- /dev/null
+++ b/public/static/images/common/nav-arr.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.25 8.5L4.75 5L1.25 1.5" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/common/profile_icon.svg b/public/static/images/common/profile_icon.svg
new file mode 100644
index 00000000..837e4f5a
--- /dev/null
+++ b/public/static/images/common/profile_icon.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<g id="elements">
+<circle id="Ellipse 1533" cx="12" cy="12" r="8.25" stroke="#BEBEBE" stroke-width="1.5"/>
+<path id="Vector" d="M7.94995 16.5C10.0485 14.302 13.9289 14.1986 16.05 16.5M14.2455 9.75C14.2455 10.9926 13.2367 12 11.9923 12C10.7479 12 9.73912 10.9926 9.73912 9.75C9.73912 8.50736 10.7479 7.5 11.9923 7.5C13.2367 7.5 14.2455 8.50736 14.2455 9.75Z" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</g>
+</svg>
diff --git a/public/static/images/common/select-arr.svg b/public/static/images/common/select-arr.svg
new file mode 100644
index 00000000..aa74665c
--- /dev/null
+++ b/public/static/images/common/select-arr.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/common/select_light_arr.svg b/public/static/images/common/select_light_arr.svg
new file mode 100644
index 00000000..97afb284
--- /dev/null
+++ b/public/static/images/common/select_light_arr.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7164" d="M1 1L5 5L9 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/common/signout_icon.svg b/public/static/images/common/signout_icon.svg
new file mode 100644
index 00000000..a20ccdb1
--- /dev/null
+++ b/public/static/images/common/signout_icon.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<g id="elements">
+<path id="Rectangle 2333" d="M14.6667 17C14.6012 18.6462 13.2294 20.0439 11.3917 19.9989C10.9641 19.9885 10.4357 19.8394 9.37877 19.5413C6.83521 18.8239 4.62716 17.6181 4.09738 14.9169C4 14.4204 4 13.8617 4 12.7442L4 11.2558C4 10.1383 4 9.5796 4.09738 9.08307C4.62716 6.38191 6.83521 5.17614 9.37878 4.45869C10.4357 4.16057 10.9641 4.01151 11.3917 4.00106C13.2294 3.9561 14.6012 5.35384 14.6667 7.00001" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector" d="M19.9999 12H10.2222M19.9999 12C19.9999 11.3776 18.2272 10.2147 17.7777 9.7778M19.9999 12C19.9999 12.6224 18.2272 13.7853 17.7777 14.2222" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
diff --git a/public/static/images/main/clock.svg b/public/static/images/main/clock.svg
new file mode 100644
index 00000000..3d005f59
--- /dev/null
+++ b/public/static/images/main/clock.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<circle id="Ellipse 1116" cx="8" cy="8" r="7" stroke="#999999"/>
+<path id="Path" d="M8 5.19995V7.99995L9.4 9.39995" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/download.svg b/public/static/images/main/download.svg
new file mode 100644
index 00000000..42d1d127
--- /dev/null
+++ b/public/static/images/main/download.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector 4232" d="M1 9.77783L1.20786 10.3668C2.01689 12.659 2.4214 13.8051 3.34437 14.4582C4.26734 15.1112 5.48275 15.1112 7.91357 15.1112H10.0864C12.5173 15.1112 13.7327 15.1112 14.6556 14.4582C15.5786 13.8051 15.9831 12.659 16.7921 10.3668L17 9.77783" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector" d="M9.00006 9.77781V0.888916M9.00006 9.77781C8.37763 9.77781 7.21475 8.0051 6.77783 7.55559M9.00006 9.77781C9.62248 9.77781 10.7854 8.0051 11.2223 7.55559" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/drawing_icon.svg b/public/static/images/main/drawing_icon.svg
new file mode 100644
index 00000000..0e66181f
--- /dev/null
+++ b/public/static/images/main/drawing_icon.svg
@@ -0,0 +1,8 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<circle id="Ellipse 1574" cx="5.25" cy="5.25" r="4.25" stroke="white" stroke-width="1.5"/>
+<circle id="Ellipse 1575" cx="16.75" cy="16.75" r="4.25" stroke="white" stroke-width="1.5"/>
+<circle id="Ellipse 1576" cx="5.25" cy="16.75" r="4.25" stroke="white" stroke-width="1.5"/>
+<path id="Vector" d="M14.3477 8.85572L14.1909 8.1223H14.1909L14.3477 8.85572ZM13.1443 7.65228L13.8777 7.80911L13.1443 7.65228ZM14.0207 5.11171L13.4903 4.58138H13.4903L14.0207 5.11171ZM16.8883 7.97933L17.4186 8.50966L16.8883 7.97933ZM20.7963 2.47729L21.4458 2.10229L20.7963 2.47729ZM20.1961 4.67149L19.6658 4.14116L20.1961 4.67149ZM20.7963 3.99807L21.4458 4.37307L20.7963 3.99807ZM19.5227 1.20375L19.8977 0.554227V0.554227L19.5227 1.20375ZM17.3285 1.80388L17.8588 2.33421L17.3285 1.80388ZM18.0019 1.20375L17.6269 0.554227V0.554227L18.0019 1.20375ZM19.6658 4.14116L16.358 7.449L17.4186 8.50966L20.7265 5.20182L19.6658 4.14116ZM14.551 5.64205L17.8588 2.33421L16.7982 1.27355L13.4903 4.58138L14.551 5.64205ZM14.1909 8.1223C14.0155 8.15981 13.8753 8.18973 13.7548 8.21212C13.6333 8.23472 13.5536 8.2454 13.4996 8.24884C13.4441 8.25237 13.4479 8.24579 13.4825 8.25471C13.5296 8.26685 13.5936 8.29719 13.6482 8.35178L12.5876 9.41244C12.9113 9.73622 13.3158 9.76355 13.5948 9.74581C13.8603 9.72893 14.1839 9.6577 14.5045 9.58914L14.1909 8.1223ZM12.4109 7.49546C12.3423 7.8161 12.2711 8.13973 12.2542 8.40523C12.2364 8.68419 12.2638 9.08865 12.5876 9.41244L13.6482 8.35178C13.7028 8.40637 13.7331 8.47039 13.7453 8.51747C13.7542 8.55207 13.7476 8.55591 13.7512 8.50044C13.7546 8.44641 13.7653 8.36674 13.7879 8.24519C13.8103 8.12473 13.8402 7.98455 13.8777 7.80911L12.4109 7.49546ZM19.6658 2.33421C20.0333 2.7017 20.1084 2.78597 20.1467 2.85229L21.4458 2.10229C21.2839 1.82184 21.0257 1.57275 20.7265 1.27355L19.6658 2.33421ZM20.7265 5.20182C21.0257 4.90261 21.2839 4.65353 21.4458 4.37307L20.1467 3.62307C20.1084 3.6894 20.0333 3.77367 19.6658 4.14116L20.7265 5.20182ZM20.1467 2.85229C20.2844 3.09077 20.2844 3.38459 20.1467 3.62307L21.4458 4.37307C21.8514 3.67049 21.8514 2.80488 21.4458 2.10229L20.1467 2.85229ZM20.7265 1.27355C20.4272 0.974342 20.1782 0.716149 19.8977 0.554227L19.1477 1.85326C19.214 1.89156 19.2983 1.96671 19.6658 2.33421L20.7265 1.27355ZM17.8588 2.33421C18.2263 1.96672 18.3106 1.89156 18.3769 1.85326L17.6269 0.554227C17.3465 0.716149 17.0974 0.974341 16.7982 1.27355L17.8588 2.33421ZM19.8977 0.554227C19.1951 0.148591 18.3295 0.148591 17.6269 0.554227L18.3769 1.85327C18.6154 1.71558 18.9092 1.71558 19.1477 1.85327L19.8977 0.554227ZM16.358 7.449C16.1624 7.64453 15.8952 7.77096 15.5155 7.8679C15.3253 7.91646 15.1224 7.954 14.8963 7.99307C14.679 8.03061 14.4303 8.07112 14.1909 8.1223L14.5045 9.58914C14.7063 9.54599 14.9131 9.51239 15.1517 9.47117C15.3814 9.43149 15.6346 9.38563 15.8866 9.32128C16.3914 9.19241 16.9533 8.97497 17.4186 8.50966L16.358 7.449ZM13.8777 7.80911C13.9289 7.56974 13.9694 7.32097 14.0069 7.1037C14.046 6.87757 14.0835 6.67468 14.1321 6.48447C14.229 6.10477 14.3555 5.83758 14.551 5.64205L13.4903 4.58138C13.025 5.0467 12.8076 5.60863 12.6787 6.11341C12.6144 6.36544 12.5685 6.61864 12.5288 6.84832C12.4876 7.08687 12.454 7.29366 12.4109 7.49546L13.8777 7.80911Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/static/images/main/home_icon.svg b/public/static/images/main/home_icon.svg
new file mode 100644
index 00000000..107bc4f5
--- /dev/null
+++ b/public/static/images/main/home_icon.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M6.88814 2.62341L1.71254 7.1523C1.26871 7.54067 1.56629 8.23047 2.17767 8.23047C2.55119 8.23047 2.85399 8.51016 2.85399 8.85516V11.7383C2.85399 14.2187 2.85399 15.4589 3.68823 16.2294C4.52248 17 5.86517 17 8.55057 17H10.4494C13.1348 17 14.4775 17 15.3118 16.2294C16.146 15.4589 16.146 14.2187 16.146 11.7383V8.85516C16.146 8.51016 16.4488 8.23047 16.8223 8.23047C17.4337 8.23047 17.7313 7.54067 17.2875 7.1523L12.1119 2.62341C10.8751 1.54114 10.2566 1 9.5 1C8.74336 1 8.12495 1.54114 6.88814 2.62341Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9.5 12.5555H9.50798" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/id_delete.svg b/public/static/images/main/id_delete.svg
new file mode 100644
index 00000000..3e5d6119
--- /dev/null
+++ b/public/static/images/main/id_delete.svg
@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="del" clip-path="url(#clip0_2002_5458)">
+<path id="&#237;&#140;&#168;&#236;&#138;&#164; 35" fill-rule="evenodd" clip-rule="evenodd" d="M3.25991e-06 8.5C3.25991e-06 6.81886 0.498519 5.17547 1.43251 3.77766C2.3665 2.37984 3.69402 1.29037 5.24719 0.647027C6.80036 0.00368289 8.50943 -0.164645 10.1583 0.163329C11.8071 0.491303 13.3217 1.30085 14.5104 2.4896C15.6992 3.67834 16.5087 5.1929 16.8367 6.84173C17.1646 8.49057 16.9963 10.1996 16.353 11.7528C15.7096 13.306 14.6202 14.6335 13.2223 15.5675C11.8245 16.5015 10.1811 17 8.5 17C7.38349 17.001 6.27774 16.7818 5.24603 16.355C4.21433 15.9281 3.27691 15.3021 2.48741 14.5126C1.69792 13.7231 1.07185 12.7857 0.645035 11.754C0.218216 10.7223 -0.000974971 9.61651 3.25991e-06 8.5ZM8.5 7.3015L10.7015 5.1L11.9 6.2985L9.6985 8.5L11.9 10.7015L10.7015 11.9L8.5 9.6985L6.2985 11.9L5.1 10.7015L7.3015 8.5L5.1 6.2985L6.2985 5.1L8.5 7.3015Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_2002_5458">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/id_icon.svg b/public/static/images/main/id_icon.svg
new file mode 100644
index 00000000..a84b6172
--- /dev/null
+++ b/public/static/images/main/id_icon.svg
@@ -0,0 +1,8 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 2176" d="M9.97059 21C5.97751 21 3.98098 21 2.74049 19.8284C1.5 18.6569 1.5 16.7712 1.5 13L1.5 9C1.5 5.22876 1.5 3.34315 2.74049 2.17157C3.98098 1 5.97752 1 9.97059 1L11.0294 1C15.0225 1 17.019 1 18.2595 2.17157C19.5 3.34315 19.5 5.22876 19.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector 4435" d="M6.5 6H14.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector 4436" d="M6.5 11H12.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector" d="M13.5 21C15.3385 18.2518 19.6188 18.1018 21.5 21M19.5 13.9287C19.5 14.9939 18.6046 15.8574 17.5 15.8574C16.3954 15.8574 15.5 14.9939 15.5 13.9287C15.5 12.8635 16.3954 12 17.5 12C18.6046 12 19.5 12.8635 19.5 13.9287Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/loaction_arr.svg b/public/static/images/main/loaction_arr.svg
new file mode 100644
index 00000000..590932c8
--- /dev/null
+++ b/public/static/images/main/loaction_arr.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 5" d="M0.5 5.5L3 3L0.5 0.5" stroke="white"/>
+</svg>
diff --git a/public/static/images/main/login-arr.svg b/public/static/images/main/login-arr.svg
new file mode 100644
index 00000000..7de03bcf
--- /dev/null
+++ b/public/static/images/main/login-arr.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 4" d="M1.5 6.5L4 4L1.5 1.5" stroke="#898989" stroke-width="1.5"/>
+</svg>
diff --git a/public/static/images/main/login-logo.svg b/public/static/images/main/login-logo.svg
new file mode 100644
index 00000000..eb5d29f4
--- /dev/null
+++ b/public/static/images/main/login-logo.svg
@@ -0,0 +1,26 @@
+<svg width="236" height="44" viewBox="0 0 236 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<g id="Group_2">
+<g id="Group_3">
+<path id="Vector" d="M17.4212 22.333C16.8099 16.7713 22.6433 12.3114 30.4386 12.3718C38.2415 12.4322 45.0634 16.9902 45.6747 22.5443C46.2859 28.1135 40.4601 32.5658 32.6572 32.5054C24.8543 32.4451 18.0324 27.8946 17.4212 22.333ZM47.1311 24.0535C46.4293 17.1562 38.5736 11.5115 29.5934 11.4361C20.6057 11.3606 13.8971 16.8921 14.6064 23.7894C15.3158 30.6868 23.164 36.339 32.1441 36.4144C41.1242 36.4823 47.8405 30.9584 47.1311 24.0535Z" fill="#FBB584"/>
+<path id="Vector_2" d="M33.5703 36.5502C29.1481 41.1761 22.047 41.5609 17.7079 37.4105C13.3687 33.26 13.4442 26.1513 17.8739 21.533C22.2961 16.9146 29.4047 16.5298 33.7287 20.6727C38.0603 24.8232 37.9924 31.9318 33.5627 36.5502M17.1796 21.3821C12.0406 26.755 11.9576 35.0183 16.991 39.8404C22.0244 44.6625 30.2876 44.2173 35.4267 38.8443C40.5733 33.4713 40.6563 25.208 35.6153 20.3859C30.5819 15.5638 22.3262 16.0091 17.1796 21.3821Z" fill="#F89B6C"/>
+<path id="Vector_3" d="M17.6551 4.08603C26.8541 0.637356 35.955 4.12376 37.9774 11.8738C39.9998 19.6315 34.1816 28.7022 24.9826 32.1508C15.7836 35.6071 6.68277 32.1131 4.66036 24.363C2.63794 16.6129 8.45616 7.5347 17.6551 4.08603ZM9.10514 7.04419C-0.440965 14.5981 -2.87088 25.5553 3.67933 31.5019C10.222 37.4559 23.2696 36.1504 32.8157 28.589C42.3618 21.0351 44.7917 10.0854 38.2415 4.13131C31.6913 -1.82275 18.6437 -0.517231 9.10514 7.04419Z" fill="#F37321"/>
+</g>
+<g id="Group_4">
+<path id="Vector_4" d="M69.0608 13.2701V30.3475H66.3894V21.3447H56.2698V30.3475H53.5908V13.2701H56.2698V18.9978H66.3894V13.2701H69.0608Z" fill="white"/>
+<path id="Vector_5" d="M75.4751 30.3473C74.23 30.3473 73.2263 30.0153 72.5094 29.2984C71.7548 28.6041 71.3926 27.7136 71.3926 26.6043V25.6912C71.3926 24.5744 71.7473 23.6839 72.5094 22.9745C73.2263 22.2576 74.2225 21.903 75.4751 21.903H82.4555V21.835C82.4555 20.4767 81.7009 19.7824 80.2067 19.7824H72.4491V17.511H80.1614C81.7688 17.511 82.9913 17.9336 83.8365 18.7335C84.6817 19.5334 85.1269 20.6729 85.1269 22.1671V26.6949C85.1269 27.857 84.727 28.7701 83.9421 29.4342C83.2252 30.0605 82.2291 30.3473 80.9311 30.3473H75.4676H75.4751ZM80.3576 24.1744H76.1241C74.7432 24.1744 74.0715 24.7555 74.0715 25.9101V26.3326C74.0715 27.4948 74.7432 28.0457 76.1241 28.0457H80.3576C81.7386 28.0457 82.4555 27.4872 82.4555 26.3326V25.9101C82.4555 24.7479 81.7386 24.1744 80.3576 24.1744Z" fill="white"/>
+<path id="Vector_6" d="M92.9525 17.511H95.5861C97.2388 17.511 98.5518 18.0015 99.5102 18.9599C100.446 19.9409 100.936 21.2766 100.936 22.9972V30.3548H98.2651V23.133C98.2651 22.0614 98.0387 21.2842 97.6387 20.7936C97.1029 20.1673 96.3709 19.8353 95.3899 19.8353H93.1185C92.1601 19.8353 91.4205 20.1673 90.8923 20.7936C90.4923 21.2842 90.3112 22.0614 90.3112 23.133V30.3548H87.6398V22.9972C87.6398 21.2842 88.1077 19.9409 89.0661 18.9599C90.0018 18.0015 91.3149 17.511 92.9675 17.511H92.9525Z" fill="white"/>
+<path id="Vector_7" d="M113.267 28.6343C112.309 29.7964 111.124 30.3473 109.72 30.3473H108.068C106.574 30.3473 105.396 29.8794 104.521 28.9437C103.676 28.0758 103.276 26.8232 103.276 25.2233V17.511H105.932V25.246C105.932 26.1817 106.136 26.876 106.536 27.2986C106.981 27.7891 107.585 28.0381 108.339 28.0381H109.502C110.256 28.0381 110.86 27.7891 111.328 27.2986C111.728 26.876 111.954 26.1817 111.954 25.246V17.511H114.588V25.246C114.588 26.1817 114.792 26.876 115.191 27.2986C115.637 27.7891 116.24 28.0381 116.995 28.0381H118.157C118.912 28.0381 119.516 27.7891 119.983 27.2986C120.383 26.876 120.61 26.1817 120.61 25.246V17.511H123.266V25.2233C123.266 26.8307 122.821 28.0758 121.976 28.9437C121.085 29.8794 119.9 30.3473 118.406 30.3473H116.776C115.395 30.3473 114.21 29.7889 113.275 28.6343H113.267Z" fill="white"/>
+<path id="Vector_8" d="M131.099 19.8276C130.141 19.8276 129.401 20.1597 128.873 20.786C128.473 21.2765 128.292 22.0538 128.292 23.1254V30.3472H125.62V13.2246H128.292V18.2882C129.047 17.775 129.945 17.5109 130.948 17.5109H133.582C135.235 17.5109 136.548 18.0014 137.506 18.9598C138.442 19.9408 138.932 21.2765 138.932 22.9971V30.3548H136.253V23.1329C136.253 22.0614 136.027 21.2841 135.627 20.7936C135.091 20.1672 134.359 19.8352 133.378 19.8352H131.107L131.099 19.8276Z" fill="white"/>
+<path id="Vector_9" d="M145.211 30.3473C143.966 30.3473 142.962 30.0153 142.245 29.2984C141.491 28.6041 141.128 27.7136 141.128 26.6043V25.6912C141.128 24.5744 141.483 23.6839 142.245 22.9745C142.962 22.2576 143.958 21.903 145.211 21.903H152.191V21.835C152.191 20.4767 151.437 19.7824 149.942 19.7824H142.185V17.511H149.897C151.504 17.511 152.727 17.9336 153.572 18.7335C154.417 19.5334 154.863 20.6729 154.863 22.1671V26.6949C154.863 27.857 154.463 28.7701 153.678 29.4342C152.961 30.0605 151.965 30.3473 150.667 30.3473H145.203H145.211ZM150.093 24.1744H145.86C144.479 24.1744 143.807 24.7555 143.807 25.9101V26.3326C143.807 27.4948 144.479 28.0457 145.86 28.0457H150.093C151.474 28.0457 152.191 27.4872 152.191 26.3326V25.9101C152.191 24.7479 151.474 24.1744 150.093 24.1744Z" fill="white"/>
+</g>
+<g id="Group_5">
+<path id="Vector_10" d="M166.439 30.3548H163.963V28.0155H166.174C167.276 28.0004 168.046 27.6985 168.491 27.1023C168.846 26.6118 169.042 25.827 169.072 24.7403V13.2775H171.796V24.9215C171.796 26.7929 171.351 28.1664 170.461 29.0267C169.57 29.9171 168.227 30.3624 166.446 30.3624L166.439 30.3548Z" fill="white"/>
+<path id="Vector_11" d="M178.196 30.3547C176.951 30.3547 175.955 30.0076 175.23 29.3058C174.483 28.604 174.113 27.7059 174.113 26.6042V25.6911C174.113 24.5742 174.483 23.6686 175.23 22.9668C175.955 22.2499 176.951 21.8953 178.196 21.8953H185.176V21.8273C185.176 20.4615 184.422 19.7747 182.927 19.7747H175.17V17.5033H182.882C184.489 17.5033 185.712 17.9108 186.565 18.7258C187.425 19.5106 187.855 20.6577 187.855 22.1594V26.6872C187.855 27.8493 187.463 28.7624 186.67 29.434C185.953 30.0453 184.95 30.3472 183.659 30.3472H178.196V30.3547ZM183.078 24.1743H178.837C177.471 24.1743 176.785 24.7553 176.785 25.9175V26.3401C176.785 27.4871 177.471 28.0606 178.837 28.0606H183.078C184.474 28.0606 185.176 27.4871 185.176 26.3401V25.9175C185.176 24.7553 184.474 24.1743 183.078 24.1743Z" fill="white"/>
+<path id="Vector_12" d="M190.3 22.7481C190.3 21.0653 190.753 19.7824 191.659 18.892C192.564 17.9864 193.809 17.5261 195.402 17.511H198.903C200.495 17.5261 201.74 17.9864 202.654 18.892C203.574 19.7824 204.035 21.0729 204.035 22.7481V25.1328C204.035 26.8005 203.574 28.0758 202.654 28.9663C201.748 29.8719 200.503 30.3322 198.926 30.3473H192.972V34.7619H190.293V22.7406L190.3 22.7481ZM192.979 22.9066V28.0381H198.729C199.665 28.0381 200.367 27.7514 200.827 27.1703C201.182 26.6798 201.363 25.9553 201.363 25.0045V22.9066C201.363 21.9407 201.182 21.2087 200.827 20.7182C200.367 20.122 199.665 19.8277 198.729 19.8277H195.583C194.647 19.8277 193.953 20.122 193.507 20.7182C193.153 21.2087 192.972 21.9407 192.972 22.9066H192.979Z" fill="white"/>
+<path id="Vector_13" d="M210.306 30.3547C209.06 30.3547 208.064 30.0076 207.34 29.3058C206.593 28.604 206.223 27.7059 206.223 26.6042V25.6911C206.223 24.5742 206.593 23.6686 207.34 22.9668C208.064 22.2499 209.06 21.8953 210.306 21.8953H217.286V21.8273C217.286 20.4615 216.531 19.7747 215.037 19.7747H207.279V17.5033H214.992C216.599 17.5033 217.822 17.9108 218.674 18.7258C219.535 19.5106 219.965 20.6577 219.965 22.1594V26.6872C219.965 27.8493 219.572 28.7624 218.78 29.434C218.063 30.0453 217.059 30.3472 215.769 30.3472H210.306V30.3547ZM215.188 24.1743H210.947C209.581 24.1743 208.894 24.7553 208.894 25.9175V26.3401C208.894 27.4871 209.581 28.0606 210.947 28.0606H215.188C216.584 28.0606 217.286 27.4871 217.286 26.3401V25.9175C217.286 24.7553 216.584 24.1743 215.188 24.1743Z" fill="white"/>
+<path id="Vector_14" d="M227.79 17.511H230.424C232.092 17.511 233.397 17.994 234.348 18.9599C235.299 19.9258 235.774 21.2691 235.774 22.9972V30.3548H233.103V23.133C233.103 22.0614 232.892 21.2842 232.477 20.7936C231.956 20.1522 231.201 19.8353 230.228 19.8353H227.949C226.998 19.8353 226.258 20.1522 225.723 20.7936C225.338 21.2842 225.142 22.0614 225.142 23.133V30.3548H222.47V22.9972C222.47 21.2766 222.946 19.9258 223.896 18.9599C224.847 17.994 226.145 17.511 227.798 17.511H227.79Z" fill="white"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/public/static/images/main/login_bg.png b/public/static/images/main/login_bg.png
new file mode 100644
index 00000000..e78e68d7
Binary files /dev/null and b/public/static/images/main/login_bg.png differ
diff --git a/public/static/images/main/login_id.svg b/public/static/images/main/login_id.svg
new file mode 100644
index 00000000..74af51d6
--- /dev/null
+++ b/public/static/images/main/login_id.svg
@@ -0,0 +1,10 @@
+<svg width="10" height="13" viewBox="0 0 10 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2002_5454)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.43C10.0131 10.9591 9.84045 11.476 9.51202 11.891C9.37771 12.0778 9.20121 12.2304 8.99688 12.3362C8.79254 12.442 8.56612 12.4981 8.33602 12.5H1.66402C1.43392 12.4981 1.2075 12.442 1.00317 12.3362C0.798831 12.2304 0.622337 12.0778 0.488022 11.891C0.159594 11.476 -0.013072 10.9591 2.21803e-05 10.43C-0.0013962 10.0111 0.0206383 9.59243 0.0660222 9.17599C0.112459 8.77336 0.195127 8.37575 0.313022 7.98799C0.416024 7.62702 0.569902 7.28256 0.770022 6.96499C0.956454 6.67736 1.20788 6.43758 1.50402 6.26499C1.82384 6.08298 2.18714 5.99138 2.55502 5.99999C2.87445 6.32242 3.2556 6.57716 3.67569 6.74897C4.09578 6.92079 4.54619 7.00616 5.00002 6.99999C5.45385 7.00616 5.90427 6.92079 6.32436 6.74897C6.74445 6.57716 7.1256 6.32242 7.44502 5.99999C7.81472 5.99217 8.17953 6.08553 8.50002 6.26999C8.79616 6.44258 9.04759 6.68236 9.23402 6.96999C9.43414 7.28756 9.58802 7.63202 9.69102 7.99299C9.80858 8.38078 9.89091 8.77839 9.93702 9.18099C9.98122 9.59582 10.0023 10.0128 10 10.43ZM8.00002 3.49999C8.00618 3.89482 7.93137 4.28673 7.78018 4.65152C7.629 5.01631 7.40467 5.34626 7.12102 5.62099C6.84629 5.90463 6.51635 6.12897 6.15156 6.28015C5.78676 6.43133 5.39486 6.50615 5.00002 6.49999C4.60519 6.50615 4.21328 6.43133 3.84849 6.28015C3.48369 6.12897 3.15375 5.90463 2.87902 5.62099C2.59538 5.34626 2.37104 5.01631 2.21986 4.65152C2.06868 4.28673 1.99386 3.89482 2.00002 3.49999C1.99386 3.10515 2.06868 2.71325 2.21986 2.34845C2.37104 1.98366 2.59538 1.65371 2.87902 1.37899C3.15375 1.09534 3.48369 0.871005 3.84849 0.719824C4.21328 0.568643 4.60519 0.493824 5.00002 0.499986C5.39486 0.493824 5.78676 0.568643 6.15156 0.719824C6.51635 0.871005 6.84629 1.09534 7.12102 1.37899C7.40467 1.65371 7.629 1.98366 7.78018 2.34845C7.93137 2.71325 8.00618 3.10515 8.00002 3.49999Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_2002_5454">
+<rect width="10" height="12" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/login_password.svg b/public/static/images/main/login_password.svg
new file mode 100644
index 00000000..ac4757ac
--- /dev/null
+++ b/public/static/images/main/login_password.svg
@@ -0,0 +1,10 @@
+<svg width="9" height="11" viewBox="0 0 9 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2002_5470)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.49999 5.00004H6.49999V3.50004C6.50407 3.23682 6.45419 2.97555 6.3534 2.73236C6.25261 2.48916 6.10307 2.2692 5.91399 2.08604C5.73082 1.89696 5.51086 1.74741 5.26766 1.64662C5.02447 1.54584 4.76321 1.49595 4.49999 1.50004C4.23677 1.49595 3.9755 1.54584 3.73231 1.64662C3.48911 1.74741 3.26915 1.89696 3.08599 2.08604C2.89691 2.2692 2.74736 2.48916 2.64657 2.73236C2.54579 2.97555 2.4959 3.23682 2.49999 3.50004V5.00004ZM8.99999 5.75004V10.25C9.0017 10.3488 8.98315 10.4469 8.94548 10.5382C8.90781 10.6295 8.85183 10.7122 8.78099 10.781C8.71214 10.8519 8.6295 10.9079 8.53817 10.9455C8.44684 10.9832 8.34876 11.0017 8.24999 11H0.749986C0.651211 11.0017 0.553133 10.9832 0.461805 10.9455C0.370477 10.9079 0.287838 10.8519 0.218986 10.781C0.148142 10.7122 0.0921584 10.6295 0.0544922 10.5382C0.0168259 10.4469 -0.00172429 10.3488 -1.36628e-05 10.25V5.75004C-0.00172429 5.65126 0.0168259 5.55318 0.0544922 5.46186C0.0921584 5.37053 0.148142 5.28789 0.218986 5.21904C0.287838 5.14819 0.370477 5.09221 0.461805 5.05454C0.553133 5.01688 0.651211 4.99833 0.749986 5.00004H0.999986V3.50004C0.994046 3.03989 1.08247 2.58341 1.25979 2.15876C1.43711 1.73412 1.69958 1.35031 2.03099 1.03104C2.35026 0.699627 2.73407 0.437163 3.15871 0.259839C3.58336 0.082516 4.03984 -0.0059038 4.49999 3.65024e-05C4.96013 -0.0059038 5.41661 0.082516 5.84126 0.259839C6.26591 0.437163 6.64971 0.699627 6.96899 1.03104C7.3004 1.35031 7.56286 1.73412 7.74018 2.15876C7.91751 2.58341 8.00593 3.03989 7.99999 3.50004V5.00004H8.24999C8.34876 4.99833 8.44684 5.01688 8.53817 5.05454C8.6295 5.09221 8.71214 5.14819 8.78099 5.21904C8.85183 5.28789 8.90781 5.37053 8.94548 5.46186C8.98315 5.55318 9.0017 5.65126 8.99999 5.75004Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_2002_5470">
+<rect width="9" height="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/mail.svg b/public/static/images/main/mail.svg
new file mode 100644
index 00000000..c55567f4
--- /dev/null
+++ b/public/static/images/main/mail.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M1.01419 10.2781C1.07303 13.0371 1.10245 14.4166 2.12046 15.4385C3.13848 16.4604 4.5553 16.496 7.38895 16.5671C9.13538 16.611 10.8646 16.611 12.6111 16.5671C15.4447 16.496 16.8615 16.4604 17.8795 15.4385C18.8976 14.4166 18.927 13.0371 18.9858 10.2781C19.0047 9.39099 19.0047 8.50912 18.9858 7.622C18.927 4.86302 18.8976 3.48353 17.8795 2.46165C16.8615 1.43976 15.4447 1.40416 12.6111 1.33296C10.8646 1.28908 9.13538 1.28908 7.38894 1.33295C4.5553 1.40415 3.13847 1.43974 2.12046 2.46163C1.10244 3.48352 1.07302 4.86301 1.01419 7.62199C0.99527 8.50911 0.995271 9.39099 1.01419 10.2781Z" fill="white" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M5.5 5.80005L8.14781 7.36554C9.6915 8.27822 10.3085 8.27822 11.8522 7.36554L14.5 5.80005" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/main_background.png b/public/static/images/main/main_background.png
new file mode 100644
index 00000000..95b83229
Binary files /dev/null and b/public/static/images/main/main_background.png differ
diff --git a/public/static/images/main/main_search.svg b/public/static/images/main/main_search.svg
new file mode 100644
index 00000000..25f56b42
--- /dev/null
+++ b/public/static/images/main/main_search.svg
@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="element" clip-path="url(#clip0_2005_940)">
+<path id="&#237;&#140;&#168;&#236;&#138;&#164; 171" d="M17.8789 17.9735L19.8789 19.9735" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector" d="M9.98901 18.4039C14.6834 18.4039 18.489 14.5989 18.489 9.90519C18.489 5.21149 14.6834 1.40649 9.98901 1.40649C5.29459 1.40649 1.48901 5.21149 1.48901 9.90519C1.48901 14.5989 5.29459 18.4039 9.98901 18.4039Z" stroke="white" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_2005_940">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/more_btn.svg b/public/static/images/main/more_btn.svg
new file mode 100644
index 00000000..5102903f
--- /dev/null
+++ b/public/static/images/main/more_btn.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#101010"/>
+<path d="M10 7V13" stroke="#101010" stroke-width="2" stroke-linecap="round"/>
+<path d="M7 10H13" stroke="#101010" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/public/static/images/main/password_hidden.svg b/public/static/images/main/password_hidden.svg
new file mode 100644
index 00000000..28aeac74
--- /dev/null
+++ b/public/static/images/main/password_hidden.svg
@@ -0,0 +1,11 @@
+<svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="hidden" clip-path="url(#clip0_2002_5472)">
+<path id="Mask" d="M9.5 0C7.4493 0.00116877 5.44643 0.619597 3.75206 1.7748C2.0577 2.93 0.750291 4.56848 0 6.477C0.749121 8.38638 2.05622 10.0257 3.75083 11.1812C5.44544 12.3367 7.44892 12.9548 9.5 12.9548C11.5511 12.9548 13.5546 12.3367 15.2492 11.1812C16.9438 10.0257 18.2509 8.38638 19 6.477C18.2497 4.56848 16.9423 2.93 15.2479 1.7748C13.5536 0.619597 11.5507 0.00116877 9.5 0ZM9.5 10.8C8.64598 10.8 7.81114 10.5468 7.10105 10.0723C6.39096 9.59782 5.83751 8.92344 5.51069 8.13443C5.18387 7.34542 5.09836 6.47721 5.26497 5.6396C5.43158 4.80199 5.84283 4.0326 6.44671 3.42871C7.0506 2.82483 7.81999 2.41358 8.6576 2.24697C9.49521 2.08036 10.3634 2.16587 11.1524 2.49269C11.9414 2.81951 12.6158 3.37296 13.0903 4.08305C13.5648 4.79314 13.818 5.62798 13.818 6.482C13.8175 7.62704 13.3624 8.72503 12.5527 9.5347C11.743 10.3444 10.645 10.7995 9.5 10.8ZM9.5 3.891C8.98755 3.891 8.4866 4.04296 8.06052 4.32766C7.63443 4.61237 7.30233 5.01702 7.10623 5.49047C6.91012 5.96391 6.85881 6.48487 6.95879 6.98748C7.05876 7.49008 7.30553 7.95176 7.66789 8.31411C8.03024 8.67647 8.49192 8.92324 8.99452 9.02321C9.49713 9.12319 10.0181 9.07188 10.4915 8.87577C10.965 8.67966 11.3696 8.34757 11.6543 7.92148C11.939 7.49539 12.091 6.99445 12.091 6.482C12.0922 6.14118 12.026 5.80348 11.8963 5.48831C11.7666 5.17314 11.5758 4.88671 11.3351 4.64548C11.0943 4.40424 10.8082 4.21296 10.4933 4.08263C10.1784 3.95229 9.84083 3.88547 9.5 3.886V3.891Z" fill="#A8B6C7"/>
+<path id="Vector 7178" d="M15 1L3 12.5225" stroke="white" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_2002_5472">
+<rect width="19" height="12.955" fill="white" transform="translate(0 0.0224609)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/password_visible.svg b/public/static/images/main/password_visible.svg
new file mode 100644
index 00000000..dcbc2a99
--- /dev/null
+++ b/public/static/images/main/password_visible.svg
@@ -0,0 +1,10 @@
+<svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="show" clip-path="url(#clip0_2253_7108)">
+<path id="Mask" d="M9.5 0C7.4493 0.00116877 5.44643 0.619597 3.75206 1.7748C2.0577 2.93 0.750291 4.56848 0 6.477C0.749121 8.38638 2.05622 10.0257 3.75083 11.1812C5.44544 12.3367 7.44892 12.9548 9.5 12.9548C11.5511 12.9548 13.5546 12.3367 15.2492 11.1812C16.9438 10.0257 18.2509 8.38638 19 6.477C18.2497 4.56848 16.9423 2.93 15.2479 1.7748C13.5536 0.619597 11.5507 0.00116877 9.5 0ZM9.5 10.8C8.64598 10.8 7.81114 10.5468 7.10105 10.0723C6.39096 9.59782 5.83751 8.92344 5.51069 8.13443C5.18387 7.34542 5.09836 6.47721 5.26497 5.6396C5.43158 4.80199 5.84283 4.0326 6.44671 3.42871C7.0506 2.82483 7.81999 2.41358 8.6576 2.24697C9.49521 2.08036 10.3634 2.16587 11.1524 2.49269C11.9414 2.81951 12.6158 3.37296 13.0903 4.08305C13.5648 4.79314 13.818 5.62798 13.818 6.482C13.8175 7.62704 13.3624 8.72503 12.5527 9.5347C11.743 10.3444 10.645 10.7995 9.5 10.8ZM9.5 3.891C8.98755 3.891 8.4866 4.04296 8.06052 4.32766C7.63443 4.61237 7.30233 5.01702 7.10623 5.49047C6.91012 5.96391 6.85881 6.48487 6.95879 6.98748C7.05876 7.49008 7.30553 7.95176 7.66789 8.31411C8.03024 8.67647 8.49192 8.92324 8.99452 9.02321C9.49713 9.12319 10.0181 9.07188 10.4915 8.87577C10.965 8.67966 11.3696 8.34757 11.6543 7.92148C11.939 7.49539 12.091 6.99445 12.091 6.482C12.0922 6.14118 12.026 5.80348 11.8963 5.48831C11.7666 5.17314 11.5758 4.88671 11.3351 4.64548C11.0943 4.40424 10.8082 4.21296 10.4933 4.08263C10.1784 3.95229 9.84083 3.88547 9.5 3.886V3.891Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_2253_7108">
+<rect width="19" height="12.955" fill="white" transform="translate(0 0.0224609)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/product_ico01.svg b/public/static/images/main/product_ico01.svg
new file mode 100644
index 00000000..c3a25714
--- /dev/null
+++ b/public/static/images/main/product_ico01.svg
@@ -0,0 +1,8 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Ellipse 42" d="M21 4.5C21 6.433 19.433 8 17.5 8C15.567 8 14 6.433 14 4.5C14 2.567 15.567 1 17.5 1C19.433 1 21 2.567 21 4.5Z" stroke="white" stroke-width="1.5"/>
+<path id="Ellipse 41" d="M20.9506 10C20.9833 10.3289 21 10.6625 21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C11.3375 1 11.6711 1.01672 12 1.04938" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector 4052" d="M7 9H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 4053" d="M7 14H15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/product_ico02.svg b/public/static/images/main/product_ico02.svg
new file mode 100644
index 00000000..7391dbdb
--- /dev/null
+++ b/public/static/images/main/product_ico02.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M7 12.5H15M7 7.5H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M5.09881 18C3.7987 17.8721 2.82475 17.4816 2.17157 16.8284C1 15.6569 1 13.7712 1 10V9.5C1 5.72876 1 3.84315 2.17157 2.67157C3.34315 1.5 5.22876 1.5 9 1.5H13C16.7712 1.5 18.6569 1.5 19.8284 2.67157C21 3.84315 21 5.72876 21 9.5V10C21 13.7712 21 15.6569 19.8284 16.8284C18.6569 18 16.7712 18 13 18C12.4395 18.0125 11.9931 18.0551 11.5546 18.155C10.3562 18.4309 9.24652 19.0441 8.14987 19.5789C6.58729 20.3408 5.806 20.7218 5.31569 20.3651C4.37769 19.6665 5.29454 17.5019 5.5 16.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/product_ico03.svg b/public/static/images/main/product_ico03.svg
new file mode 100644
index 00000000..d2ca10e1
--- /dev/null
+++ b/public/static/images/main/product_ico03.svg
@@ -0,0 +1,7 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M21 10.5667C21 15.8499 16.5222 20.1334 11 20.1334C10.3507 20.1343 9.70324 20.0742 9.06542 19.9545C8.60633 19.8682 8.37678 19.8251 8.21653 19.8496C8.05627 19.8741 7.82918 19.9948 7.37499 20.2364C6.09014 20.9197 4.59195 21.161 3.15111 20.893C3.69874 20.2194 4.07275 19.4112 4.23778 18.5448C4.33778 18.0148 4.09 17.5 3.71889 17.1231C2.03333 15.4115 1 13.1051 1 10.5667C1 5.28357 5.47778 1 11 1C16.5222 1 21 5.28357 21 10.5667Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Ellipse 583" d="M9 8.84615C9 7.82655 9.89543 7 11 7C12.1046 7 13 7.82655 13 8.84615C13 9.21368 12.8837 9.55612 12.6831 9.84381C12.0854 10.7012 11 11.5189 11 12.5385V13" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_2" d="M11 15.5H11.009" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/product_ico04.svg b/public/static/images/main/product_ico04.svg
new file mode 100644
index 00000000..da17d7a1
--- /dev/null
+++ b/public/static/images/main/product_ico04.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M16.4776 7.01106C16.485 7.01102 16.4925 7.01101 16.5 7.01101C18.9853 7.01101 21 9.02942 21 11.5193C21 13.8398 19.25 15.7508 17 16M16.4776 7.01106C16.4924 6.84606 16.5 6.67896 16.5 6.51009C16.5 3.46695 14.0376 1 11 1C8.12324 1 5.76233 3.21267 5.52042 6.03192M16.4776 7.01106C16.3753 8.14759 15.9286 9.1846 15.2428 10.0165M5.52042 6.03192C2.98398 6.27373 1 8.41392 1 11.0183C1 13.4417 2.71776 15.4632 5 15.9273M5.52042 6.03192C5.67826 6.01687 5.83823 6.00917 6 6.00917C7.12582 6.00917 8.16474 6.38194 9.00049 7.01101" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M11 19L11 11M11 19C10.2998 19 8.99153 17.0057 8.5 16.5M11 19C11.7002 19 13.0085 17.0057 13.5 16.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/product_ico05.svg b/public/static/images/main/product_ico05.svg
new file mode 100644
index 00000000..26b0e3d6
--- /dev/null
+++ b/public/static/images/main/product_ico05.svg
@@ -0,0 +1,7 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M21 10.5005C21 10.0092 20.9947 9.01772 20.9842 8.52488C20.9189 5.45935 20.8862 3.92658 19.7551 2.79115C18.6239 1.65572 17.0497 1.61617 13.9012 1.53706C11.9607 1.4883 10.0393 1.4883 8.09882 1.53705C4.95033 1.61615 3.37608 1.6557 2.24495 2.79114C1.11382 3.92657 1.08114 5.45933 1.01576 8.52487C0.994745 9.51055 0.994745 10.4904 1.01577 11.4761C1.08114 14.5416 1.11383 16.0744 2.24496 17.2098C3.37608 18.3453 4.95033 18.3848 8.09883 18.4639C8.90159 18.4841 9.70108 18.4959 10.5 18.4994" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 7163" d="M1 4.00049L7.91302 7.92511C10.4387 9.35895 11.5613 9.35895 14.087 7.92511L21 4.00049" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M13 15.5005L21 15.5005M13 15.5005C13 14.8003 14.9943 13.492 15.5 13.0005M13 15.5005C13 16.2007 14.9943 17.509 15.5 18.0005" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/static/images/main/store-arr.svg b/public/static/images/main/store-arr.svg
new file mode 100644
index 00000000..96487334
--- /dev/null
+++ b/public/static/images/main/store-arr.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 4054" d="M1.5 1L5.5 5L1.5 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/static/images/main/user.svg b/public/static/images/main/user.svg
new file mode 100644
index 00000000..a421788a
--- /dev/null
+++ b/public/static/images/main/user.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<circle id="Ellipse 1536" cx="10" cy="10.6499" r="9" fill="white"/>
+<path id="Ellipse 1533" d="M10.9 19.6055C10.604 19.6349 10.3037 19.6499 10 19.6499C5.02944 19.6499 1 15.6205 1 10.6499C1 5.67934 5.02944 1.6499 10 1.6499C14.9706 1.6499 19 5.67934 19 10.6499C19 10.9537 18.985 11.2539 18.9556 11.5499" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"/>
+<g id="Vector">
+<path d="M12.2455 8.3999C12.2455 9.64254 11.2367 10.6499 9.99233 10.6499C8.74792 10.6499 7.73912 9.64254 7.73912 8.3999C7.73912 7.15726 8.74792 6.1499 9.99233 6.1499C11.2367 6.1499 12.2455 7.15726 12.2455 8.3999Z" fill="white"/>
+<path d="M5.94995 15.1499C7.21217 13.8279 9.11902 13.2636 10.9 13.5246M12.2455 8.3999C12.2455 9.64254 11.2367 10.6499 9.99233 10.6499C8.74792 10.6499 7.73912 9.64254 7.73912 8.3999C7.73912 7.15726 8.74792 6.1499 9.99233 6.1499C11.2367 6.1499 12.2455 7.15726 12.2455 8.3999Z" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<circle id="Vector_2" cx="15.85" cy="16.4999" r="3.15" fill="white" stroke="#141B34" stroke-width="1.5"/>
+</g>
+</svg>
diff --git a/public/static/images/sub/copy_grid_ico.svg b/public/static/images/sub/copy_grid_ico.svg
new file mode 100644
index 00000000..68b34dca
--- /dev/null
+++ b/public/static/images/sub/copy_grid_ico.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 1705" d="M12.9999 6.6C12.998 4.23433 12.9622 3.00897 12.2736 2.16994C12.1407 2.00791 11.9921 1.85934 11.8301 1.72637C10.945 1 9.62999 1 7 1C4.37002 1 3.05502 1 2.16994 1.72637C2.00791 1.85934 1.85934 2.00791 1.72637 2.16994C1 3.05502 1 4.37001 1 7C1 9.62998 1 10.945 1.72637 11.8301C1.85934 11.9921 2.00791 12.1407 2.16994 12.2736C3.00897 12.9622 4.23433 12.998 6.6 12.9999" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M10.8462 6.25C10.4319 6.25 10.0962 6.58579 10.0962 7C10.0962 7.41421 10.4319 7.75 10.8462 7.75V6.25ZM13.1538 7.75C13.5681 7.75 13.9038 7.41421 13.9038 7C13.9038 6.58579 13.5681 6.25 13.1538 6.25V7.75ZM7.75 10.8462C7.75 10.4319 7.41421 10.0962 7 10.0962C6.58579 10.0962 6.25 10.4319 6.25 10.8462H7.75ZM6.25 13.1538C6.25 13.5681 6.58579 13.9038 7 13.9038C7.41421 13.9038 7.75 13.5681 7.75 13.1538H6.25ZM8.99016 7.74363C9.40086 7.68978 9.69014 7.31318 9.63628 6.90249C9.58242 6.49179 9.20583 6.20251 8.79513 6.25637L8.99016 7.74363ZM7.5814 7.48186L8.05787 8.06107L7.5814 7.48186ZM6.26469 8.39077C6.18312 8.79687 6.4462 9.19221 6.85231 9.27378C7.25841 9.35534 7.65374 9.09226 7.73531 8.68616L6.26469 8.39077ZM16.2647 8.68616C16.3463 9.09226 16.7416 9.35534 17.1477 9.27378C17.5538 9.19221 17.8169 8.79687 17.7353 8.39077L16.2647 8.68616ZM16.4186 7.48186L15.9421 8.06107L15.9421 8.06107L16.4186 7.48186ZM15.2049 6.25637C14.7942 6.20251 14.4176 6.49179 14.3637 6.90249C14.3099 7.31318 14.5991 7.68978 15.0098 7.74363L15.2049 6.25637ZM15.0098 16.2564C14.5991 16.3102 14.3099 16.6868 14.3637 17.0975C14.4176 17.5082 14.7942 17.7975 15.2049 17.7436L15.0098 16.2564ZM16.4186 16.5181L16.8951 17.0973L16.4186 16.5181ZM17.7353 15.6092C17.8169 15.2031 17.5538 14.8078 17.1477 14.7262C16.7416 14.6447 16.3463 14.9077 16.2647 15.3138L17.7353 15.6092ZM7.73531 15.3138C7.65374 14.9077 7.25841 14.6447 6.85231 14.7262C6.4462 14.8078 6.18312 15.2031 6.26469 15.6092L7.73531 15.3138ZM7.5814 16.5181L8.05787 15.9389L8.05787 15.9389L7.5814 16.5181ZM8.79513 17.7436C9.20583 17.7975 9.58243 17.5082 9.63628 17.0975C9.69014 16.6868 9.40086 16.3102 8.99016 16.2564L8.79513 17.7436ZM10.8462 16.25C10.4319 16.25 10.0962 16.5858 10.0962 17C10.0962 17.4142 10.4319 17.75 10.8462 17.75V16.25ZM13.1538 17.75C13.5681 17.75 13.9038 17.4142 13.9038 17C13.9038 16.5858 13.5681 16.25 13.1538 16.25V17.75ZM17.75 10.8462C17.75 10.4319 17.4142 10.0962 17 10.0962C16.5858 10.0962 16.25 10.4319 16.25 10.8462H17.75ZM16.25 13.1538C16.25 13.5681 16.5858 13.9038 17 13.9038C17.4142 13.9038 17.75 13.5681 17.75 13.1538H16.25ZM10.8462 7.75H13.1538V6.25H10.8462V7.75ZM6.25 10.8462V13.1538H7.75V10.8462H6.25ZM8.79513 6.25637C8.15219 6.34068 7.58031 6.51159 7.10493 6.90266L8.05787 8.06107C8.22678 7.92212 8.48234 7.81022 8.99016 7.74363L8.79513 6.25637ZM7.73531 8.68616C7.80384 8.34501 7.90801 8.18435 8.05787 8.06107L7.10493 6.90266C6.62056 7.30112 6.3817 7.8082 6.26469 8.39077L7.73531 8.68616ZM17.7353 8.39077C17.6183 7.8082 17.3794 7.30112 16.8951 6.90266L15.9421 8.06107C16.092 8.18435 16.1962 8.345 16.2647 8.68616L17.7353 8.39077ZM15.0098 7.74363C15.5177 7.81022 15.7732 7.92212 15.9421 8.06107L16.8951 6.90266C16.4197 6.51159 15.8478 6.34068 15.2049 6.25637L15.0098 7.74363ZM15.2049 17.7436C15.8478 17.6593 16.4197 17.4884 16.8951 17.0973L15.9421 15.9389C15.7732 16.0779 15.5177 16.1898 15.0098 16.2564L15.2049 17.7436ZM16.2647 15.3138C16.1962 15.655 16.092 15.8156 15.9421 15.9389L16.8951 17.0973C17.3794 16.6989 17.6183 16.1918 17.7353 15.6092L16.2647 15.3138ZM6.26469 15.6092C6.3817 16.1918 6.62056 16.6989 7.10493 17.0973L8.05787 15.9389C7.90801 15.8156 7.80384 15.655 7.73531 15.3138L6.26469 15.6092ZM8.99016 16.2564C8.48234 16.1898 8.22678 16.0779 8.05787 15.9389L7.10492 17.0973C7.58031 17.4884 8.15219 17.6593 8.79513 17.7436L8.99016 16.2564ZM10.8462 17.75H13.1538V16.25H10.8462V17.75ZM16.25 10.8462V13.1538H17.75V10.8462H16.25Z" fill="#45576F"/>
+</g>
+</svg>
diff --git a/public/static/images/sub/copy_ico.svg b/public/static/images/sub/copy_ico.svg
new file mode 100644
index 00000000..f259e2a0
--- /dev/null
+++ b/public/static/images/sub/copy_ico.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 1705" d="M13.4999 6.6C13.498 4.23433 13.4622 3.00897 12.7736 2.16994C12.6407 2.00791 12.4921 1.85934 12.3301 1.72637C11.445 1 10.13 1 7.5 1C4.87002 1 3.55502 1 2.66994 1.72637C2.50791 1.85934 2.35934 2.00791 2.22637 2.16994C1.5 3.05502 1.5 4.37001 1.5 7C1.5 9.62998 1.5 10.945 2.22637 11.8301C2.35934 11.9921 2.50791 12.1407 2.66994 12.2736C3.50897 12.9622 4.73433 12.998 7.1 12.9999" stroke="#344356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M11.3462 6.25C10.9319 6.25 10.5962 6.58579 10.5962 7C10.5962 7.41421 10.9319 7.75 11.3462 7.75V6.25ZM13.6538 7.75C14.0681 7.75 14.4038 7.41421 14.4038 7C14.4038 6.58579 14.0681 6.25 13.6538 6.25V7.75ZM8.25 10.8462C8.25 10.4319 7.91421 10.0962 7.5 10.0962C7.08579 10.0962 6.75 10.4319 6.75 10.8462H8.25ZM6.75 13.1538C6.75 13.5681 7.08579 13.9038 7.5 13.9038C7.91421 13.9038 8.25 13.5681 8.25 13.1538H6.75ZM9.49016 7.74363C9.90086 7.68978 10.1901 7.31318 10.1363 6.90249C10.0824 6.49179 9.70583 6.20251 9.29513 6.25637L9.49016 7.74363ZM8.0814 7.48186L8.55787 8.06107L8.0814 7.48186ZM6.76469 8.39077C6.68312 8.79687 6.9462 9.19221 7.35231 9.27378C7.75841 9.35534 8.15374 9.09226 8.23531 8.68616L6.76469 8.39077ZM16.7647 8.68616C16.8463 9.09226 17.2416 9.35534 17.6477 9.27378C18.0538 9.19221 18.3169 8.79687 18.2353 8.39077L16.7647 8.68616ZM16.9186 7.48186L16.4421 8.06107L16.4421 8.06107L16.9186 7.48186ZM15.7049 6.25637C15.2942 6.20251 14.9176 6.49179 14.8637 6.90249C14.8099 7.31318 15.0991 7.68978 15.5098 7.74363L15.7049 6.25637ZM15.5098 16.2564C15.0991 16.3102 14.8099 16.6868 14.8637 17.0975C14.9176 17.5082 15.2942 17.7975 15.7049 17.7436L15.5098 16.2564ZM16.9186 16.5181L17.3951 17.0973L16.9186 16.5181ZM18.2353 15.6092C18.3169 15.2031 18.0538 14.8078 17.6477 14.7262C17.2416 14.6447 16.8463 14.9077 16.7647 15.3138L18.2353 15.6092ZM8.23531 15.3138C8.15374 14.9077 7.75841 14.6447 7.35231 14.7262C6.9462 14.8078 6.68312 15.2031 6.76469 15.6092L8.23531 15.3138ZM8.0814 16.5181L8.55787 15.9389L8.55787 15.9389L8.0814 16.5181ZM9.29513 17.7436C9.70583 17.7975 10.0824 17.5082 10.1363 17.0975C10.1901 16.6868 9.90086 16.3102 9.49016 16.2564L9.29513 17.7436ZM11.3462 16.25C10.9319 16.25 10.5962 16.5858 10.5962 17C10.5962 17.4142 10.9319 17.75 11.3462 17.75V16.25ZM13.6538 17.75C14.0681 17.75 14.4038 17.4142 14.4038 17C14.4038 16.5858 14.0681 16.25 13.6538 16.25V17.75ZM18.25 10.8462C18.25 10.4319 17.9142 10.0962 17.5 10.0962C17.0858 10.0962 16.75 10.4319 16.75 10.8462H18.25ZM16.75 13.1538C16.75 13.5681 17.0858 13.9038 17.5 13.9038C17.9142 13.9038 18.25 13.5681 18.25 13.1538H16.75ZM11.3462 7.75H13.6538V6.25H11.3462V7.75ZM6.75 10.8462V13.1538H8.25V10.8462H6.75ZM9.29513 6.25637C8.65219 6.34068 8.08031 6.51159 7.60493 6.90266L8.55787 8.06107C8.72678 7.92212 8.98234 7.81022 9.49016 7.74363L9.29513 6.25637ZM8.23531 8.68616C8.30384 8.34501 8.40801 8.18435 8.55787 8.06107L7.60493 6.90266C7.12056 7.30112 6.8817 7.8082 6.76469 8.39077L8.23531 8.68616ZM18.2353 8.39077C18.1183 7.8082 17.8794 7.30112 17.3951 6.90266L16.4421 8.06107C16.592 8.18435 16.6962 8.345 16.7647 8.68616L18.2353 8.39077ZM15.5098 7.74363C16.0177 7.81022 16.2732 7.92212 16.4421 8.06107L17.3951 6.90266C16.9197 6.51159 16.3478 6.34068 15.7049 6.25637L15.5098 7.74363ZM15.7049 17.7436C16.3478 17.6593 16.9197 17.4884 17.3951 17.0973L16.4421 15.9389C16.2732 16.0779 16.0177 16.1898 15.5098 16.2564L15.7049 17.7436ZM16.7647 15.3138C16.6962 15.655 16.592 15.8156 16.4421 15.9389L17.3951 17.0973C17.8794 16.6989 18.1183 16.1918 18.2353 15.6092L16.7647 15.3138ZM6.76469 15.6092C6.8817 16.1918 7.12056 16.6989 7.60493 17.0973L8.55787 15.9389C8.40801 15.8156 8.30384 15.655 8.23531 15.3138L6.76469 15.6092ZM9.49016 16.2564C8.98234 16.1898 8.72678 16.0779 8.55787 15.9389L7.60492 17.0973C8.08031 17.4884 8.65219 17.6593 9.29513 17.7436L9.49016 16.2564ZM11.3462 17.75H13.6538V16.25H11.3462V17.75ZM16.75 10.8462V13.1538H18.25V10.8462H16.75Z" fill="#344356"/>
+</g>
+</svg>
diff --git a/public/static/images/sub/file_delete.svg b/public/static/images/sub/file_delete.svg
new file mode 100644
index 00000000..721bcc02
--- /dev/null
+++ b/public/static/images/sub/file_delete.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="0.5" y="0.5" width="14" height="14" rx="7" stroke="#94A0AD"/>
+<path d="M9.741 10.559L7.509 8.327L5.277 10.559L4.512 9.794L6.744 7.562L4.512 5.33L5.277 4.565L7.509 6.797L9.741 4.565L10.506 5.33L8.274 7.562L10.506 9.794L9.741 10.559Z" fill="#94A0AD"/>
+</svg>
diff --git a/public/static/images/sub/pagination_first.svg b/public/static/images/sub/pagination_first.svg
new file mode 100644
index 00000000..61073b50
--- /dev/null
+++ b/public/static/images/sub/pagination_first.svg
@@ -0,0 +1,4 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 1L1.5 4L4.5 7" stroke="#6B6B6B"/>
+<path d="M8.5 1L5.5 4L8.5 7" stroke="#6B6B6B"/>
+</svg>
diff --git a/public/static/images/sub/pagination_prev.svg b/public/static/images/sub/pagination_prev.svg
new file mode 100644
index 00000000..e162ae42
--- /dev/null
+++ b/public/static/images/sub/pagination_prev.svg
@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 1L1.5 4L4.5 7" stroke="#6B6B6B"/>
+</svg>
diff --git a/public/static/images/sub/tooltips.svg b/public/static/images/sub/tooltips.svg
new file mode 100644
index 00000000..d4634f25
--- /dev/null
+++ b/public/static/images/sub/tooltips.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7.5" r="6.5" fill="#ECEEF1" stroke="#45576F"/>
+<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#45576F"/>
+</svg>
diff --git a/public/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg b/public/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg
new file mode 100644
index 00000000..fc8774a2
Binary files /dev/null and b/public/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg differ
diff --git a/qcast-front.iml b/qcast-front.iml
new file mode 100644
index 00000000..bef2a966
--- /dev/null
+++ b/qcast-front.iml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$/qcast-front">
+      <excludeFolder url="file://$MODULE_DIR$/qcast-front/build" />
+    </content>
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js
new file mode 100644
index 00000000..f9431eb6
--- /dev/null
+++ b/src/app/QcastProvider.js
@@ -0,0 +1,35 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
+import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+import ServerError from './error'
+
+import '@/styles/common.scss'
+
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
+
+export const QcastProvider = ({ children }) => {
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+
+  useEffect(() => {
+    console.log(sessionStorage.getItem('hi'))
+    console.log(Object.keys(appMessageState).length)
+    // if (Object.keys(appMessageState).length === 0) {
+    if (globalLocale === 'ko') {
+      setAppMessageState(KO)
+    } else {
+      setAppMessageState(JA)
+    }
+    // }
+  }, [globalLocale])
+
+  return (
+    <>
+      <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+    </>
+  )
+}
diff --git a/src/app/[locale]/community/archive/page.jsx b/src/app/[locale]/community/archive/page.jsx
index 4c0cbdb0..6917f228 100644
--- a/src/app/[locale]/community/archive/page.jsx
+++ b/src/app/[locale]/community/archive/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Archive from '@/components/community/Archive'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityArchivePage() {
+  await initCheck()
 
-export default function CommunityArchivePage() {
   return (
     <>
       <Hero title="자료 다운로드" />
diff --git a/src/app/[locale]/community/faq/page.jsx b/src/app/[locale]/community/faq/page.jsx
index 3f764566..2b9d5452 100644
--- a/src/app/[locale]/community/faq/page.jsx
+++ b/src/app/[locale]/community/faq/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Faq from '@/components/community/Faq'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityFaqPage() {
+  await initCheck()
 
-export default function CommunityFaqPage() {
   return (
     <>
       <Hero title="FAQ" />
diff --git a/src/app/[locale]/community/notice/page.jsx b/src/app/[locale]/community/notice/page.jsx
index 5372112e..d2157b20 100644
--- a/src/app/[locale]/community/notice/page.jsx
+++ b/src/app/[locale]/community/notice/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Notice from '@/components/community/Notice'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityNoticePage() {
+  await initCheck()
 
-export default function CommunityNoticePage() {
   return (
     <>
       <Hero title="공지사항" />
diff --git a/src/app/[locale]/floor-plan/page.jsx b/src/app/[locale]/floor-plan/page.jsx
new file mode 100644
index 00000000..f503099e
--- /dev/null
+++ b/src/app/[locale]/floor-plan/page.jsx
@@ -0,0 +1,9 @@
+import FloorPlan from '@/components/floor-plan/FloorPlan'
+
+export default function FloorPlanPage() {
+  return (
+    <>
+      <FloorPlan />
+    </>
+  )
+}
diff --git a/src/app/[locale]/initSettingsModal/page.jsx b/src/app/[locale]/initSettingsModal/page.jsx
new file mode 100644
index 00000000..a081ef47
--- /dev/null
+++ b/src/app/[locale]/initSettingsModal/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import InitSettingsModal from '@/components/InitSettingsModal'
+import { initCheck } from '@/util/session-util'
+
+export default async function InitSettingsModalPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="Basic Settings" />
+      <div className="flex flex-col justify-center my-8">
+        <InitSettingsModal />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/[locale]/intro/page.jsx b/src/app/[locale]/intro/page.jsx
index 3c96c165..8d560ce5 100644
--- a/src/app/[locale]/intro/page.jsx
+++ b/src/app/[locale]/intro/page.jsx
@@ -1,6 +1,9 @@
 import Intro from '@/components/Intro'
+import { initCheck } from '@/util/session-util'
+
+export default async function IntroPage() {
+  await initCheck()
 
-export default function IntroPage() {
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
diff --git a/src/app/[locale]/join/complete/page.jsx b/src/app/[locale]/join/complete/page.jsx
new file mode 100644
index 00000000..3f9fc462
--- /dev/null
+++ b/src/app/[locale]/join/complete/page.jsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { useMessage } from '@/hooks/useMessage'
+
+export default function CompletePage() {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+        <h1 className="text-center text-4xl font-bold mb-10">{getMessage('join.complete.title')}</h1>
+        <div className="mt-10 mb-10 w-full text-center text-2xl">{getMessage('join.complete.contents')}</div>
+        <div className="mt-10 w-full text-center">
+          {getMessage('join.complete.email_comment')} :&nbsp;{getMessage('join.complete.email')}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/[locale]/join/page.jsx b/src/app/[locale]/join/page.jsx
new file mode 100644
index 00000000..118a25b4
--- /dev/null
+++ b/src/app/[locale]/join/page.jsx
@@ -0,0 +1,5 @@
+import Join from '@/components/auth/Join'
+
+export default function JoinPage() {
+  return <>{<Join />}</>
+}
diff --git a/src/app/[locale]/layout.js b/src/app/[locale]/layout.js
index 9ae6b1b9..018f1ef5 100644
--- a/src/app/[locale]/layout.js
+++ b/src/app/[locale]/layout.js
@@ -1,15 +1,42 @@
 'use client'
 
-import { useCurrentLocale } from '@/locales/client'
+import { useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import { LocaleProvider } from './LocaleProvider'
+import { useCurrentLocale } from '@/locales/client'
+import ServerError from './error'
+import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+import '@/styles/common.scss'
+
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
 
 export default function LocaleLayout({ children }) {
   const locale = useCurrentLocale()
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+
+  useEffect(() => {
+    console.log(globalLocale)
+    console.log(sessionStorage.getItem('hi'))
+    console.log(Object.keys(appMessageState).length)
+    // if (Object.keys(appMessageState).length === 0) {
+    if (globalLocale === 'ko') {
+      setAppMessageState(KO)
+    } else {
+      setAppMessageState(JA)
+    }
+    // }
+  }, [globalLocale])
+
   return (
     <>
-      <LocaleProvider locale={locale} fallback={''}>
-        {children}
-      </LocaleProvider>
+      <ErrorBoundary fallback={<ServerError />}>
+        <LocaleProvider locale={locale} fallback={<ServerError />}>
+          {children}
+        </LocaleProvider>
+      </ErrorBoundary>
     </>
   )
 }
diff --git a/src/app/[locale]/login/page.jsx b/src/app/[locale]/login/page.jsx
index 0686da2e..47a23986 100644
--- a/src/app/[locale]/login/page.jsx
+++ b/src/app/[locale]/login/page.jsx
@@ -1,9 +1,16 @@
 import Login from '@/components/auth/Login'
+import { getCurrentLocale } from '@/locales/server'
 
 export default function LoginPage() {
+  const currentLocale = getCurrentLocale()
+
+  const loginPageProps = {
+    currentLocale,
+  }
+
   return (
     <>
-      <Login />
+      <Login {...loginPageProps} />
     </>
   )
 }
diff --git a/src/app/[locale]/management/plan/page.jsx b/src/app/[locale]/management/plan/page.jsx
index 61937238..5fefa62a 100644
--- a/src/app/[locale]/management/plan/page.jsx
+++ b/src/app/[locale]/management/plan/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Plan from '@/components/management/Plan'
+import { initCheck } from '@/util/session-util'
+
+export default async function ManagementPlanPage() {
+  await initCheck()
 
-export default function ManagementPlanPage() {
   return (
     <>
       <Hero title="도면관리" />
diff --git a/src/app/[locale]/management/stuff/detail/page.jsx b/src/app/[locale]/management/stuff/detail/page.jsx
new file mode 100644
index 00000000..6759b282
--- /dev/null
+++ b/src/app/[locale]/management/stuff/detail/page.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Hero from '@/components/Hero'
+import StuffDetail from '@/components/management/StuffDetail'
+import Link from 'next/link'
+export default function ManagementStuffDetailPage() {
+  return (
+    <>
+      <div className="pt-48 flex justify-left">
+        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+        <Link href="/management/plan">
+          <h1 className="text-4xl archivo-black-regular">도면작성</h1>
+        </Link>
+      </div>
+      <div className="m2">
+        <StuffDetail />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/[locale]/management/stuff/page.jsx b/src/app/[locale]/management/stuff/page.jsx
index 15131ba6..7590a7cf 100644
--- a/src/app/[locale]/management/stuff/page.jsx
+++ b/src/app/[locale]/management/stuff/page.jsx
@@ -1,11 +1,19 @@
-import Hero from '@/components/Hero'
+import StuffSearchCondition from '@/components/management/StuffSearchCondition'
 import Stuff from '@/components/management/Stuff'
+import { initCheck } from '@/util/session-util'
+import Hero from '@/components/Hero'
+export default async function ManagementStuffPage() {
+  await initCheck()
 
-export default function ManagementStuffPage() {
   return (
     <>
-      <Hero title="물건관리" />
-      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+      <Hero title="물건현황" />
+      <div>
+        <div className="m2">
+          <StuffSearchCondition />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center my-8 pt-20">
         <Stuff />
       </div>
     </>
diff --git a/src/app/[locale]/management/stuff/tempdetail/page.jsx b/src/app/[locale]/management/stuff/tempdetail/page.jsx
new file mode 100644
index 00000000..8b84287a
--- /dev/null
+++ b/src/app/[locale]/management/stuff/tempdetail/page.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Hero from '@/components/Hero'
+import StuffDetail from '@/components/management/StuffDetail'
+export default function ManagementStuffDetailPage() {
+  return (
+    <>
+      <div className="pt-48 flex justify-left">
+        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+      </div>
+      <div className="m2">
+        <StuffDetail />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/[locale]/master/company/page.jsx b/src/app/[locale]/master/company/page.jsx
index 6ee60f0e..15eda41c 100644
--- a/src/app/[locale]/master/company/page.jsx
+++ b/src/app/[locale]/master/company/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Company from '@/components/master/Company'
+import { initCheck } from '@/util/session-util'
+
+export default async function MasterCompanyPage() {
+  await initCheck()
 
-export default function MasterCompanyPage() {
   return (
     <>
       <Hero title="회사정보 조회" />
diff --git a/src/app/[locale]/master/price/page.jsx b/src/app/[locale]/master/price/page.jsx
index c0e5a40d..a641d6bb 100644
--- a/src/app/[locale]/master/price/page.jsx
+++ b/src/app/[locale]/master/price/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Price from '@/components/master/Price'
+import { initCheck } from '@/util/session-util'
+
+export default async function MasterPricePage() {
+  await initCheck()
 
-export default function MasterPricePage() {
   return (
     <>
       <Hero title="가격 마스터 조회" />
diff --git a/src/app/[locale]/page.js b/src/app/[locale]/page.js
index e2c11aed..1b8f2258 100644
--- a/src/app/[locale]/page.js
+++ b/src/app/[locale]/page.js
@@ -1,21 +1,16 @@
-import MainPage from '@/components/Main'
 import { getSession } from '@/lib/authActions'
-import { getCurrentLocale } from '@/locales/server'
+import MainPage from '@/components/Main'
 
 export default async function page() {
   const session = await getSession()
 
-  const currentLocale = getCurrentLocale()
-
   const mainPageProps = {
-    currentLocale,
     isLoggedIn: session?.isLoggedIn,
   }
 
   return (
     <>
       <div className="m-4">
-        <h3>Main</h3>
         <MainPage {...mainPageProps} />
       </div>
     </>
diff --git a/src/app/[locale]/playground/page.jsx b/src/app/[locale]/playground/page.jsx
index b8a7f496..66d83c34 100644
--- a/src/app/[locale]/playground/page.jsx
+++ b/src/app/[locale]/playground/page.jsx
@@ -1,6 +1,14 @@
 import Playground from '@/components/Playground'
+import { initCheck } from '@/util/session-util'
+
+export default async function PlaygroundPage() {
+  // const { session } = await checkSession()
+
+  // if (!session.isLoggedIn) {
+  //   redirect('/login')
+  // }
+  await initCheck()
 
-export default function PlaygroundPage() {
   return (
     <>
       <Playground />
diff --git a/src/app/[locale]/roof/page.jsx b/src/app/[locale]/roof/page.jsx
index 4d9703f3..f5b8e611 100644
--- a/src/app/[locale]/roof/page.jsx
+++ b/src/app/[locale]/roof/page.jsx
@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Roof from '@/components/Roof'
+import { initCheck } from '@/util/session-util'
+
+export default async function RoofPage() {
+  await initCheck()
 
-export default function RoofPage() {
   return (
     <>
       <Hero title="Drawing on canvas 2D Roof" />
diff --git a/src/app/[locale]/roof2/RoofSelect.jsx b/src/app/[locale]/roof2/RoofSelect.jsx
new file mode 100644
index 00000000..d759398b
--- /dev/null
+++ b/src/app/[locale]/roof2/RoofSelect.jsx
@@ -0,0 +1,128 @@
+'use client'
+
+import { Select, SelectItem } from '@nextui-org/react'
+import { useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+
+export default function RoofSelect() {
+  const [roofMaterials, setRoofMaterials] = useState([])
+  const [manufacturers, setManufacturers] = useState([])
+  const [trestles, setTrestles] = useState([])
+  const [modules, setModules] = useState([])
+  const [originTrestles, setOriginTrestles] = useState([])
+
+  const [roofMaterialId, setRoofMaterialId] = useState(null)
+  const [manufacturerId, setManufacturerId] = useState(null)
+  const [trestleId, setTrestleId] = useState(null)
+
+  const { get } = useAxios()
+
+  useEffect(() => {
+    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
+      //TODO: error handling
+      if (!res) return
+
+      setRoofMaterials(res)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!roofMaterialId) {
+      return
+    }
+
+    get({ url: `/api/roof-material/roof-material-infos/${roofMaterialId}/trestles` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setOriginTrestles(res)
+      const manufactural = res.map((trestle) => {
+        return { id: trestle.manufacturerId, name: trestle.manufacturerName }
+      })
+      // Remove duplicates
+      const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
+        return manufactural.find((a) => a.id === id)
+      })
+
+      setManufacturers(uniqueManufactural)
+    })
+  }, [roofMaterialId])
+
+  useEffect(() => {
+    if (!manufacturerId) {
+      return
+    }
+
+    const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
+    setTrestles(trestles)
+  }, [manufacturerId])
+
+  useEffect(() => {
+    if (!trestleId) {
+      return
+    }
+    get({ url: `/api/module/module-infos?roofMaterialId=${roofMaterialId}&trestleId=${trestleId}` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setModules(res)
+    })
+  }, [trestleId])
+
+  const handleRoofMaterialOnChange = (e) => {
+    const roofMaterialId = e.target.value
+    setRoofMaterialId(roofMaterialId)
+    setManufacturers([])
+    setManufacturerId(null)
+    setTrestleId(null)
+    setTrestles([])
+    setModules([])
+  }
+
+  const handleManufacturersOnChange = (e) => {
+    const manufacturerId = Number(e.target.value)
+    setTrestles([])
+    setManufacturerId(manufacturerId)
+    setTrestleId(null)
+    setModules([])
+  }
+
+  const handleTrestlesOnChange = (e) => {
+    const trestleId = Number(e.target.value)
+    setTrestleId(trestleId)
+    setModules([])
+  }
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      {roofMaterials.length > 0 && (
+        <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
+          {roofMaterials.map((roofMaterial) => (
+            <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {manufacturers.length > 0 && (
+        <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
+          {manufacturers.map((manufacturer) => (
+            <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {trestles.length > 0 && (
+        <Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
+          {trestles.map((trestle) => (
+            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {modules.length > 0 && (
+        <Select label="설치가능 모듈" className="max-w-xs">
+          {modules.map((module) => (
+            <SelectItem key={module.id}>{module.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/[locale]/roof2/page.jsx b/src/app/[locale]/roof2/page.jsx
index c33a5a99..72881d11 100644
--- a/src/app/[locale]/roof2/page.jsx
+++ b/src/app/[locale]/roof2/page.jsx
@@ -1,21 +1,25 @@
-'use client'
-
 import Roof2 from '@/components/Roof2'
-import { textState } from '@/store/canvasAtom'
-import { useEffect } from 'react'
-import { useRecoilState } from 'recoil'
+import RoofSelect from '@/app/[locale]/roof2/RoofSelect'
+import { initCheck } from '@/util/session-util'
 
-export default function Roof2Page() {
-  const [text, setText] = useRecoilState(textState)
-
-  useEffect(() => {
-    console.log(text)
-  }, [])
+export default async function Roof2Page() {
+  const session = await initCheck()
+  const roof2Props = {
+    name: session.name || '',
+    userId: session.userId || '',
+    email: session.email || '',
+    isLoggedIn: session.isLoggedIn,
+  }
 
   return (
     <>
+      <div>
+        <div className="m-2">
+          <RoofSelect />
+        </div>
+      </div>
       <div className="flex flex-col justify-center my-8 pt-20">
-        <Roof2 />
+        <Roof2 {...roof2Props} />
       </div>
     </>
   )
diff --git a/src/app/[locale]/settings/page.jsx b/src/app/[locale]/settings/page.jsx
new file mode 100644
index 00000000..797c024c
--- /dev/null
+++ b/src/app/[locale]/settings/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Settings from '@/components/Settings'
+import { initCheck } from '@/util/session-util'
+
+export default async function SettingsPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="Canvas Setting" />
+      <div className="flex flex-col justify-center my-8">
+        <Settings />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/api/html2canvas/route.js b/src/app/api/html2canvas/route.js
new file mode 100644
index 00000000..54af611d
--- /dev/null
+++ b/src/app/api/html2canvas/route.js
@@ -0,0 +1,29 @@
+'use server'
+
+import fs from 'fs/promises'
+
+import { NextResponse } from 'next/server'
+
+export async function GET(req) {
+  const path = 'public/mapImages'
+  const q = req.nextUrl.searchParams.get('q')
+  const fileNm = req.nextUrl.searchParams.get('fileNm')
+  const zoom = req.nextUrl.searchParams.get('zoom')
+  const targetUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${q}&zoom=${zoom}&maptype=satellite&size=640x640&scale=1&key=AIzaSyDO7nVR1N_D2tKy60hgGFavpLaXkHpiHpc`
+  const decodeUrl = decodeURIComponent(targetUrl)
+
+  const response = await fetch(decodeUrl)
+
+  const data = await response.arrayBuffer()
+  const buffer = Buffer.from(data)
+
+  try {
+    await fs.readdir(path)
+  } catch {
+    await fs.mkdir(path)
+  } finally {
+    await fs.writeFile(`${path}/${fileNm}.png`, buffer)
+  }
+
+  return NextResponse.json({ fileNm: `${fileNm}.png` })
+}
diff --git a/src/app/community/archive/page.jsx b/src/app/community/archive/page.jsx
new file mode 100644
index 00000000..6917f228
--- /dev/null
+++ b/src/app/community/archive/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Archive from '@/components/community/Archive'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityArchivePage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="자료 다운로드" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Archive />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/community/faq/page.jsx b/src/app/community/faq/page.jsx
new file mode 100644
index 00000000..2b9d5452
--- /dev/null
+++ b/src/app/community/faq/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Faq from '@/components/community/Faq'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityFaqPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="FAQ" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Faq />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/community/notice/page.jsx b/src/app/community/notice/page.jsx
new file mode 100644
index 00000000..d2157b20
--- /dev/null
+++ b/src/app/community/notice/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Notice from '@/components/community/Notice'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityNoticePage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="공지사항" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Notice />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/floor-plan/FloorPlanProvider.js b/src/app/floor-plan/FloorPlanProvider.js
new file mode 100644
index 00000000..cb23116b
--- /dev/null
+++ b/src/app/floor-plan/FloorPlanProvider.js
@@ -0,0 +1,9 @@
+'ues client'
+
+import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+import ServerError from '../error'
+
+export const FloorPlanProvider = ({ children }) => {
+  console.log('FloorPlanProvider')
+  return <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+}
diff --git a/src/app/floor-plan/layout.js b/src/app/floor-plan/layout.js
new file mode 100644
index 00000000..829599af
--- /dev/null
+++ b/src/app/floor-plan/layout.js
@@ -0,0 +1,11 @@
+'use client'
+import { FloorPlanProvider } from './FloorPlanProvider'
+
+export default function FloorPlanLayout({ children }) {
+  console.log('FloorPlanLayout')
+  return (
+    <>
+      <FloorPlanProvider>{children}</FloorPlanProvider>
+    </>
+  )
+}
diff --git a/src/app/floor-plan/page.jsx b/src/app/floor-plan/page.jsx
new file mode 100644
index 00000000..f503099e
--- /dev/null
+++ b/src/app/floor-plan/page.jsx
@@ -0,0 +1,9 @@
+import FloorPlan from '@/components/floor-plan/FloorPlan'
+
+export default function FloorPlanPage() {
+  return (
+    <>
+      <FloorPlan />
+    </>
+  )
+}
diff --git a/src/app/initSettingsModal/page.jsx b/src/app/initSettingsModal/page.jsx
new file mode 100644
index 00000000..a081ef47
--- /dev/null
+++ b/src/app/initSettingsModal/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import InitSettingsModal from '@/components/InitSettingsModal'
+import { initCheck } from '@/util/session-util'
+
+export default async function InitSettingsModalPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="Basic Settings" />
+      <div className="flex flex-col justify-center my-8">
+        <InitSettingsModal />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/intro/page.jsx b/src/app/intro/page.jsx
new file mode 100644
index 00000000..8d560ce5
--- /dev/null
+++ b/src/app/intro/page.jsx
@@ -0,0 +1,14 @@
+import Intro from '@/components/Intro'
+import { initCheck } from '@/util/session-util'
+
+export default async function IntroPage() {
+  await initCheck()
+
+  return (
+    <>
+      <div className="container mx-auto p-4 m-4 border">
+        <Intro />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/join/complete/page.jsx b/src/app/join/complete/page.jsx
new file mode 100644
index 00000000..3f9fc462
--- /dev/null
+++ b/src/app/join/complete/page.jsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { useMessage } from '@/hooks/useMessage'
+
+export default function CompletePage() {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+        <h1 className="text-center text-4xl font-bold mb-10">{getMessage('join.complete.title')}</h1>
+        <div className="mt-10 mb-10 w-full text-center text-2xl">{getMessage('join.complete.contents')}</div>
+        <div className="mt-10 w-full text-center">
+          {getMessage('join.complete.email_comment')} :&nbsp;{getMessage('join.complete.email')}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/join/page.jsx b/src/app/join/page.jsx
new file mode 100644
index 00000000..118a25b4
--- /dev/null
+++ b/src/app/join/page.jsx
@@ -0,0 +1,5 @@
+import Join from '@/components/auth/Join'
+
+export default function JoinPage() {
+  return <>{<Join />}</>
+}
diff --git a/src/app/layout.js b/src/app/layout.js
index 72ac7bf3..b77e75d0 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,38 +1,80 @@
-import { Inter } from 'next/font/google'
+// import { Inter } from 'next/font/google'
 
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/authActions'
 import RecoilRootWrapper from './RecoilWrapper'
 import UIProvider from './UIProvider'
-import { headers } from 'next/headers'
-import Headers from '@/components/Headers'
 
 import { ToastContainer } from 'react-toastify'
+
+import { QcastProvider } from './QcastProvider'
+import Header from '@/components/header/Header'
 import QModal from '@/components/common/modal/QModal'
 
 import './globals.css'
 import '../styles/style.scss'
+import Dimmed from '@/components/ui/Dimmed'
 
-const inter = Inter({ subsets: ['latin'] })
+// const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
-export default function RootLayout({ children }) {
+export default async function RootLayout({ children }) {
   const headersList = headers()
   const headerPathname = headersList.get('x-pathname') || ''
-  // console.log('headerPathname', headerPathname)
+
+  // console.log('headerPathname:', headerPathname)
+  // const isLoggedIn = await checkSession()
+  const session = await getSession()
+  console.log('session[layout]:', session)
+
+  let sessionProps = {}
+
+  if (session.isLoggedIn) {
+    sessionProps = {
+      userId: session.userId,
+      saleStoreId: session.saleStoreId,
+      name: session.name,
+      mail: session.mail,
+      tel: session.tel,
+      storeId: session.storeId,
+      userNm: session.userNm,
+      userNmKana: session.userNmKana,
+      category: session.category,
+      telNo: session.telNo,
+      fax: session.fax,
+      email: session.email,
+      pwdInitYn: session.pwdInitYn,
+      isLoggedIn: session.isLoggedIn,
+    }
+  }
+
+  if (!headerPathname.includes('/login') && !session.isLoggedIn) {
+    redirect('/login')
+  }
 
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        {headerPathname !== '/login' && <Headers />}
-        <RecoilRootWrapper>
-          <UIProvider>{children}</UIProvider>
-          <QModal />
+    <RecoilRootWrapper>
+      <html lang="en">
+        <body>
+          {/*{headerPathname !== '/login' && <Headers />}*/}
+          <div className="wrap">
+            <Header userSession={sessionProps} />
+            <UIProvider>
+              <div className="content">
+                <Dimmed />
+                <QcastProvider>{children}</QcastProvider>
+              </div>
+            </UIProvider>
+          </div>
           <ToastContainer />
-        </RecoilRootWrapper>
-      </body>
-    </html>
+          <QModal />
+        </body>
+      </html>
+    </RecoilRootWrapper>
   )
 }
diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx
new file mode 100644
index 00000000..0686da2e
--- /dev/null
+++ b/src/app/login/page.jsx
@@ -0,0 +1,9 @@
+import Login from '@/components/auth/Login'
+
+export default function LoginPage() {
+  return (
+    <>
+      <Login />
+    </>
+  )
+}
diff --git a/src/app/management/plan/page.jsx b/src/app/management/plan/page.jsx
new file mode 100644
index 00000000..5fefa62a
--- /dev/null
+++ b/src/app/management/plan/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Plan from '@/components/management/Plan'
+import { initCheck } from '@/util/session-util'
+
+export default async function ManagementPlanPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="도면관리" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Plan />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/management/stuff/detail/page.jsx b/src/app/management/stuff/detail/page.jsx
new file mode 100644
index 00000000..6759b282
--- /dev/null
+++ b/src/app/management/stuff/detail/page.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Hero from '@/components/Hero'
+import StuffDetail from '@/components/management/StuffDetail'
+import Link from 'next/link'
+export default function ManagementStuffDetailPage() {
+  return (
+    <>
+      <div className="pt-48 flex justify-left">
+        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+        <Link href="/management/plan">
+          <h1 className="text-4xl archivo-black-regular">도면작성</h1>
+        </Link>
+      </div>
+      <div className="m2">
+        <StuffDetail />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/management/stuff/page.jsx b/src/app/management/stuff/page.jsx
new file mode 100644
index 00000000..7590a7cf
--- /dev/null
+++ b/src/app/management/stuff/page.jsx
@@ -0,0 +1,21 @@
+import StuffSearchCondition from '@/components/management/StuffSearchCondition'
+import Stuff from '@/components/management/Stuff'
+import { initCheck } from '@/util/session-util'
+import Hero from '@/components/Hero'
+export default async function ManagementStuffPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="물건현황" />
+      <div>
+        <div className="m2">
+          <StuffSearchCondition />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center my-8 pt-20">
+        <Stuff />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/management/stuff/tempdetail/page.jsx b/src/app/management/stuff/tempdetail/page.jsx
new file mode 100644
index 00000000..8b84287a
--- /dev/null
+++ b/src/app/management/stuff/tempdetail/page.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Hero from '@/components/Hero'
+import StuffDetail from '@/components/management/StuffDetail'
+export default function ManagementStuffDetailPage() {
+  return (
+    <>
+      <div className="pt-48 flex justify-left">
+        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+      </div>
+      <div className="m2">
+        <StuffDetail />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/master/company/page.jsx b/src/app/master/company/page.jsx
new file mode 100644
index 00000000..15eda41c
--- /dev/null
+++ b/src/app/master/company/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Company from '@/components/master/Company'
+import { initCheck } from '@/util/session-util'
+
+export default async function MasterCompanyPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="회사정보 조회" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Company />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/master/price/page.jsx b/src/app/master/price/page.jsx
new file mode 100644
index 00000000..a641d6bb
--- /dev/null
+++ b/src/app/master/price/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Price from '@/components/master/Price'
+import { initCheck } from '@/util/session-util'
+
+export default async function MasterPricePage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="가격 마스터 조회" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Price />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/page.js b/src/app/page.js
index 9c905040..25cd8640 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,5 +1,16 @@
-import Main from '@/components/Main'
+import MainPage from '@/components/Main'
+import { getSession } from '@/lib/authActions'
 
-export default function Home() {
-  return <Main />
+export default async function Home() {
+  const session = await getSession()
+
+  const mainPageProps = {
+    isLoggedIn: session?.isLoggedIn,
+  }
+
+  return (
+    <>
+      <MainPage {...mainPageProps} />
+    </>
+  )
 }
diff --git a/src/app/playground/page.jsx b/src/app/playground/page.jsx
new file mode 100644
index 00000000..66d83c34
--- /dev/null
+++ b/src/app/playground/page.jsx
@@ -0,0 +1,17 @@
+import Playground from '@/components/Playground'
+import { initCheck } from '@/util/session-util'
+
+export default async function PlaygroundPage() {
+  // const { session } = await checkSession()
+
+  // if (!session.isLoggedIn) {
+  //   redirect('/login')
+  // }
+  await initCheck()
+
+  return (
+    <>
+      <Playground />
+    </>
+  )
+}
diff --git a/src/app/roof/page.jsx b/src/app/roof/page.jsx
new file mode 100644
index 00000000..f5b8e611
--- /dev/null
+++ b/src/app/roof/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Roof from '@/components/Roof'
+import { initCheck } from '@/util/session-util'
+
+export default async function RoofPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="Drawing on canvas 2D Roof" />
+      <div className="flex flex-col justify-center my-8">
+        <Roof />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/roof2/RoofSelect.jsx b/src/app/roof2/RoofSelect.jsx
new file mode 100644
index 00000000..d759398b
--- /dev/null
+++ b/src/app/roof2/RoofSelect.jsx
@@ -0,0 +1,128 @@
+'use client'
+
+import { Select, SelectItem } from '@nextui-org/react'
+import { useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+
+export default function RoofSelect() {
+  const [roofMaterials, setRoofMaterials] = useState([])
+  const [manufacturers, setManufacturers] = useState([])
+  const [trestles, setTrestles] = useState([])
+  const [modules, setModules] = useState([])
+  const [originTrestles, setOriginTrestles] = useState([])
+
+  const [roofMaterialId, setRoofMaterialId] = useState(null)
+  const [manufacturerId, setManufacturerId] = useState(null)
+  const [trestleId, setTrestleId] = useState(null)
+
+  const { get } = useAxios()
+
+  useEffect(() => {
+    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
+      //TODO: error handling
+      if (!res) return
+
+      setRoofMaterials(res)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!roofMaterialId) {
+      return
+    }
+
+    get({ url: `/api/roof-material/roof-material-infos/${roofMaterialId}/trestles` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setOriginTrestles(res)
+      const manufactural = res.map((trestle) => {
+        return { id: trestle.manufacturerId, name: trestle.manufacturerName }
+      })
+      // Remove duplicates
+      const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
+        return manufactural.find((a) => a.id === id)
+      })
+
+      setManufacturers(uniqueManufactural)
+    })
+  }, [roofMaterialId])
+
+  useEffect(() => {
+    if (!manufacturerId) {
+      return
+    }
+
+    const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
+    setTrestles(trestles)
+  }, [manufacturerId])
+
+  useEffect(() => {
+    if (!trestleId) {
+      return
+    }
+    get({ url: `/api/module/module-infos?roofMaterialId=${roofMaterialId}&trestleId=${trestleId}` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setModules(res)
+    })
+  }, [trestleId])
+
+  const handleRoofMaterialOnChange = (e) => {
+    const roofMaterialId = e.target.value
+    setRoofMaterialId(roofMaterialId)
+    setManufacturers([])
+    setManufacturerId(null)
+    setTrestleId(null)
+    setTrestles([])
+    setModules([])
+  }
+
+  const handleManufacturersOnChange = (e) => {
+    const manufacturerId = Number(e.target.value)
+    setTrestles([])
+    setManufacturerId(manufacturerId)
+    setTrestleId(null)
+    setModules([])
+  }
+
+  const handleTrestlesOnChange = (e) => {
+    const trestleId = Number(e.target.value)
+    setTrestleId(trestleId)
+    setModules([])
+  }
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      {roofMaterials.length > 0 && (
+        <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
+          {roofMaterials.map((roofMaterial) => (
+            <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {manufacturers.length > 0 && (
+        <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
+          {manufacturers.map((manufacturer) => (
+            <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {trestles.length > 0 && (
+        <Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
+          {trestles.map((trestle) => (
+            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {modules.length > 0 && (
+        <Select label="설치가능 모듈" className="max-w-xs">
+          {modules.map((module) => (
+            <SelectItem key={module.id}>{module.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/roof2/page.jsx b/src/app/roof2/page.jsx
new file mode 100644
index 00000000..72881d11
--- /dev/null
+++ b/src/app/roof2/page.jsx
@@ -0,0 +1,26 @@
+import Roof2 from '@/components/Roof2'
+import RoofSelect from '@/app/[locale]/roof2/RoofSelect'
+import { initCheck } from '@/util/session-util'
+
+export default async function Roof2Page() {
+  const session = await initCheck()
+  const roof2Props = {
+    name: session.name || '',
+    userId: session.userId || '',
+    email: session.email || '',
+    isLoggedIn: session.isLoggedIn,
+  }
+
+  return (
+    <>
+      <div>
+        <div className="m-2">
+          <RoofSelect />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center my-8 pt-20">
+        <Roof2 {...roof2Props} />
+      </div>
+    </>
+  )
+}
diff --git a/src/app/settings/page.jsx b/src/app/settings/page.jsx
new file mode 100644
index 00000000..797c024c
--- /dev/null
+++ b/src/app/settings/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import Settings from '@/components/Settings'
+import { initCheck } from '@/util/session-util'
+
+export default async function SettingsPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="Canvas Setting" />
+      <div className="flex flex-col justify-center my-8">
+        <Settings />
+      </div>
+    </>
+  )
+}
diff --git a/src/common/common.js b/src/common/common.js
new file mode 100644
index 00000000..84cf60a3
--- /dev/null
+++ b/src/common/common.js
@@ -0,0 +1,100 @@
+export const MENU = {
+  PLAN_DRAWING: 'planDrawing',
+  INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
+  ROOF_COVERING: {
+    EXTERIOR_WALL_LINE: 'exteriorWallLine', // 외벽선 그리기
+    ROOF_SHAPE_SETTINGS: 'roofShapeSettings', // 지붕형상 설정
+    ROOF_SHAPE_PASSIVITY_SETTINGS: 'roofShapePassivitySettings', // 지붕형상 수동설정
+    ROOF_SHAPE_EDITING: 'roofShapeEditing', // 지붕형상 편집
+    HELP_LINE_DRAWING: 'helpLineDrawing', // 보조선 그리기
+    EAVES_KERAVA_EDIT: 'eavesKeravaEdit', // 처마.케라마 변경
+    MOVEMENT_SHAPE_UPDOWN: 'movementShapeUpdown', // 동선이동.형올림내림
+    OUTLINE_EDIT_OFFSET: 'outlineEditOffset', // 외벽선 편집 및 오프셋
+    ROOF_SHAPE_ALLOC: 'rootShapeAlloc', // 지붕면 항당
+    DEFAULT: 'roofCoveringDefault', // 아무것도 선택 안할 경우
+  }, // 지붕덮개
+  BATCH_CANVAS: {
+    SLOPE_SETTING: 'slopeSetting', // 경사 설정
+    BATCH_DRAWING: 'batchDrawing', // 배치면 그리기
+    SURFACE_SHAPE_BATCH: 'surfaceShapeBatch', // 면형상 배치
+    OBJECT_BATCH: 'objectBatch', // 오브젝트 배치
+    ALL_REMOVE: 'allRemove', // 전체 삭제
+    DEFAULT: 'batchCanvasDefault', // default
+  }, // 배치면
+  MODULE_CIRCUIT_SETTING: {
+    BASIC_SETTING: 'basicSetting', // 기본설정
+    CIRCUIT_TRESTLE_SETTING: 'circuitTrestleSetting', // 회로가대설정
+    PLAN_ORIENTATION: 'planOrientation', // 도면 방위적용
+    DEFAULT: 'moduleCircuitSettingDefault',
+  }, // 모듈회로구성
+  ESTIMATE: 'estimate', // todo 견적서
+  POWER_GENERATION_SIMULATION: 'powerGenerationSimulation', // todo 발전 시뮬레이션
+}
+
+export const Mode = {
+  DRAW_LINE: 'drawLine', // 기준선 긋기모드`
+  EDIT: 'edit',
+  TEMPLATE: 'template',
+  PATTERNA: 'patterna',
+  PATTERNB: 'patternb',
+  TEXTBOX: 'textbox',
+  DRAW_RECT: 'drawRect',
+  ROOF_PATTERN: 'roofPattern', //지붕패턴 모드
+  ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드
+  FILL_CELLS: 'fillCells', //태양광셀 모드
+  CELL_POWERCON: 'cellPowercon', //파워콘
+  DRAW_HELP_LINE: 'drawHelpLine', // 보조선 그리기 모드 지붕 존재해야함
+  ADSORPTION_POINT: 'adsorptionPoint', //흡착점 모드
+  OPENING: 'opening', //개구 모드
+  SHADOW: 'shadow', //그림자 생성 모드
+  DEFAULT: 'default',
+}
+
+export const LINE_TYPE = {
+  WALLLINE: {
+    /**
+     * 처마 / 캐라바 / 벽 / 팔작지붕 / 반절처 / 한쪽흐름
+     */
+    EAVES: 'eaves',
+    GABLE: 'gable',
+    WALL: 'wall',
+    HIPANDGABLE: 'hipAndGable',
+    JERKINHEAD: 'jerkinhead',
+    SHED: 'shed',
+  },
+  SUBLINE: {
+    /**
+     *
+     */
+  },
+}
+
+export const LineType = {
+  EAVES: 'eaves', // 처마
+  RIDGE: 'ridge', // 용마루....
+  YOSEMUNE: 'yosemune', //요세무네
+  ONESIDE_FLOW_RIDGE: 'onesideFlowRidge', //한쪽흐름 용마루
+  WALL_COLLECTION: 'wallCollection', //벽취합
+  WALL_COLLECTION_TYPE: 'wallCollectionType', //벽취합(형)
+  WALL_COLLECTION_FLOW: 'wallCollectionFlow', //벽취합(흐름)
+  WALL_COLLECTION_FLOW_LEFT: 'wallCollectionFlowLeft', //벽취합(흐름 왼쪽)
+  WALL_COLLECTION_FLOW_RIGHT: 'wallCollectionFlowRight', //벽취합(흐름 오른쪽)
+  KERABA: 'keraba', //케라바
+  KERABA_LEFT: 'kerabaLeft', //케라바 왼쪽
+  KERABA_RIGHT: 'kerabaRight', //케라바 오른쪽
+  VALLEY: 'valley', //골짜기
+  L_ABANDON_VALLEY: 'lAbandonValley', //l의버림계곡
+  MANSARD: 'mansard', //맨사드
+  NO_SETTING: 'noSetting', //설정없음
+}
+
+// 오브젝트 배치 > 개구배치, 그림자배치
+export const BATCH_TYPE = {
+  OPENING: 'opening',
+  SHADOW: 'shadow',
+}
+// 오브젝트 배치 > 프리입력, 치수입력
+export const INPUT_TYPE = {
+  FREE: 'free',
+  DIMENSION: 'dimension',
+}
diff --git a/src/components/GridSettingsModal.jsx b/src/components/GridSettingsModal.jsx
new file mode 100644
index 00000000..35bb1793
--- /dev/null
+++ b/src/components/GridSettingsModal.jsx
@@ -0,0 +1,272 @@
+import { useEffect, useRef, useState } from 'react'
+import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input } from '@nextui-org/react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { modalContent, modalState } from '@/store/modalAtom'
+import { guideLineState, horiGuideLinesState, vertGuideLinesState } from '@/store/canvasAtom'
+import { fabric } from 'fabric'
+import { ColorPicker, useColor } from 'react-color-palette'
+import 'react-color-palette/css'
+
+export default function GridSettingsModal(props) {
+  const { canvasProps } = props
+  const [isCustomGridSetting, setIsCustomGridSetting] = useState(true)
+  const [gridCheckedValue, setGridCheckValue] = useState([])
+  const [ratioValue, setRatioValue] = useState('1')
+  const moduleLength = useRef(null) //모듈 mm 길이 입력
+  const customModuleHoriLength = useRef(null)
+  const customModuleVertLength = useRef(null)
+
+  const [open, setOpen] = useRecoilState(modalState)
+  const [guideLine, setGuideLine] = useRecoilState(guideLineState)
+  const [horiGuideLines, setHoriGuideLines] = useRecoilState(horiGuideLinesState)
+  const [vertGuideLines, setVertGuideLines] = useRecoilState(vertGuideLinesState)
+
+  const gridSettingArray = []
+
+  const [guideColor, setGuideColor] = useColor('rgb(200, 15, 15)')
+  const [colorPickerShow, setColorPickerShow] = useState(false)
+
+  const boxStyle = {
+    width: '50px',
+    height: '30px',
+    border: '1px solid black',
+    backgroundColor: guideColor.hex,
+  }
+  useEffect(() => {
+    moduleLength.current.value = 90
+    customModuleHoriLength.current.value = 90
+    customModuleVertLength.current.value = 90
+  }, [])
+
+  useEffect(() => {
+    setIsCustomGridSetting(ratioValue !== 'custom')
+  }, [ratioValue])
+
+  const drawGridSettings = () => {
+    //기존에 선택된 데이터가 있으면 그 데이터를 포함한다
+    if (!(Object.keys(guideLine).length === 0 && guideLine.constructor === Object)) {
+      gridSettingArray.push(...guideLine)
+    }
+
+    let moduleHoriLength = moduleLength.current.value //가로 간격
+    let moduleVertLength = moduleLength.current.value //새로 간격
+
+    if (ratioValue === 'custom') {
+      moduleHoriLength = customModuleHoriLength.current.value
+      moduleVertLength = customModuleVertLength.current.value
+    } else {
+      moduleHoriLength = moduleHoriLength / ratioValue
+      moduleVertLength = moduleVertLength / ratioValue
+    }
+
+    if (gridCheckedValue.includes('line')) {
+      const horizontalLineArray = []
+      const verticalLineArray = []
+
+      for (let i = 0; i < canvasProps.height / moduleVertLength + 1; i++) {
+        const horizontalLine = new fabric.Line(
+          [0, i * moduleVertLength - moduleVertLength / 2, canvasProps.width, i * moduleVertLength - moduleVertLength / 2],
+          {
+            stroke: guideColor.hex,
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'guideLine',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
+            direction: 'horizontal',
+          },
+        )
+        canvasProps.add(horizontalLine)
+        horizontalLineArray.push(horizontalLine)
+      }
+
+      for (let i = 0; i < canvasProps.width / moduleHoriLength + 1; i++) {
+        const verticalLine = new fabric.Line(
+          [i * moduleHoriLength - moduleHoriLength / 2, 0, i * moduleHoriLength - moduleHoriLength / 2, canvasProps.height],
+          {
+            stroke: guideColor.hex,
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'guideLine',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
+            direction: 'vertical',
+          },
+        )
+        canvasProps.add(verticalLine)
+        verticalLineArray.push(verticalLine)
+      }
+      canvasProps.renderAll()
+
+      const snapDistance = 10
+
+      const recoilObj = {
+        guideMode: 'guideLine',
+        horizontalLineArray,
+        verticalLineArray,
+        moduleVertLength: moduleVertLength,
+        moduleHoriLength: moduleHoriLength,
+      }
+      gridSettingArray.push(recoilObj)
+      const newHoriGuideLines = [...horiGuideLines]
+      horizontalLineArray.forEach((line) => {
+        newHoriGuideLines.push(line)
+      })
+      const newVertGuideLines = [...vertGuideLines]
+      verticalLineArray.forEach((line) => {
+        newVertGuideLines.push(line)
+      })
+      setHoriGuideLines(newHoriGuideLines)
+      setVertGuideLines(newVertGuideLines)
+    }
+
+    if (gridCheckedValue.includes('dot')) {
+      const circle = new fabric.Circle({
+        radius: 2,
+        fill: 'white',
+        stroke: guideColor.hex,
+        strokeWidth: 0.7,
+        originX: 'center',
+        originY: 'center',
+        selectable: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+      })
+
+      const patternSourceCanvas = new fabric.StaticCanvas(null, {
+        width: moduleHoriLength,
+        height: moduleVertLength,
+      })
+
+      patternSourceCanvas.add(circle)
+
+      circle.set({
+        left: patternSourceCanvas.width / 2,
+        top: patternSourceCanvas.height / 2,
+      })
+
+      patternSourceCanvas.renderAll()
+
+      const pattern = new fabric.Pattern({
+        source: patternSourceCanvas.getElement(),
+        repeat: 'repeat',
+      })
+
+      const backgroundPolygon = new fabric.Polygon(
+        [
+          { x: 0, y: 0 },
+          { x: canvasProps.width, y: 0 },
+          { x: canvasProps.width, y: canvasProps.height },
+          { x: 0, y: canvasProps.height },
+        ],
+        {
+          fill: pattern,
+          selectable: false,
+          name: 'guideDot',
+        },
+      )
+
+      canvasProps.add(backgroundPolygon)
+      backgroundPolygon.sendToBack()
+      canvasProps.renderAll()
+
+      const recoilObj = {
+        guideMode: 'guideDot',
+        moduleVertLength: moduleVertLength,
+        moduleHoriLength: moduleHoriLength,
+      }
+
+      gridSettingArray.push(recoilObj)
+    }
+    canvasProps.renderAll()
+    setGuideLine(gridSettingArray)
+  }
+
+  const removeGuideLines = () => {
+    if (!(Object.keys(guideLine).length === 0 && guideLine.constructor === Object)) {
+      const guideLines = canvasProps._objects.filter((obj) => obj.name === 'guideLine' || obj.name === 'guideDot')
+      guideLines?.forEach((item) => canvasProps.remove(item))
+      canvasProps.renderAll()
+      setGuideLine([])
+      setHoriGuideLines([])
+      setVertGuideLines([])
+    } else {
+      alert('그리드가 없습니다.')
+      return
+    }
+  }
+
+  return (
+    <>
+      <div>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <label style={{ display: 'block', marginBottom: '5px' }}>
+            <CheckboxGroup label="그리드 설정" value={gridCheckedValue} defaultChecked={gridCheckedValue} onValueChange={setGridCheckValue}>
+              <Checkbox value="dot">점 그리드</Checkbox>
+              <Checkbox value="line">점선 그리드</Checkbox>
+            </CheckboxGroup>
+          </label>
+        </div>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <Input type="number" label="모듈" ref={moduleLength} />
+          mm
+        </div>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <RadioGroup label="비율 설정" value={ratioValue} defaultValue={ratioValue} onValueChange={setRatioValue}>
+            <Radio value="1">원치수</Radio>
+            <Radio value="2">1/2</Radio>
+            <Radio value="4">1/4</Radio>
+            <Radio value="10">1/10</Radio>
+            <Radio value="custom">임의간격</Radio>
+          </RadioGroup>
+        </div>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          가이드컬러 <div style={boxStyle} onClick={() => setColorPickerShow(!colorPickerShow)}></div>
+        </div>
+        {colorPickerShow && (
+          <ColorPicker color={guideColor} onChange={setGuideColor} hideInput={['hsv', 'rgb', 'hex']} height={100} hideAlpha={true} />
+        )}
+
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <Checkbox value="linked" isDisabled={isCustomGridSetting}>
+            종횡연동
+          </Checkbox>
+        </div>
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+        <Input type="number" label="가로간격" ref={customModuleHoriLength} min={0} isDisabled={isCustomGridSetting} />
+        mm
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+        <Input type="number" label="세로간격" ref={customModuleVertLength} min={0} isDisabled={isCustomGridSetting} />
+        mm
+      </div>
+
+      <div className="flex gap-4 items-center">
+        <Button size="sm">초기화</Button>
+        <Button size="sm" color="secondary" onClick={drawGridSettings} isDisabled={gridCheckedValue.length === 0}>
+          저장
+        </Button>
+        <Button size="sm" onClick={() => setOpen(!open)}>
+          취소
+        </Button>
+        <Button size="sm" onClick={() => removeGuideLines()}>
+          그리드 삭제
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Headers.jsx b/src/components/Headers.jsx
index 07caed71..02859c96 100644
--- a/src/components/Headers.jsx
+++ b/src/components/Headers.jsx
@@ -10,6 +10,8 @@ export default function Headers() {
         <div className="space-x-4 text-xl">
           <Link href="/intro">Intro</Link>
           <Link href="/playground">Playground</Link>
+          <Link href="/initSettingsModal">Basic Settings</Link>
+          <Link href="/settings">Canvas Settings</Link>
           <Link href="/roof">Roof</Link>
           <Link href="/roof2">Roof2</Link>
         </div>
diff --git a/src/components/InitSettingsModal.jsx b/src/components/InitSettingsModal.jsx
new file mode 100644
index 00000000..58f0163f
--- /dev/null
+++ b/src/components/InitSettingsModal.jsx
@@ -0,0 +1,261 @@
+'use client'
+
+import { useEffect, useState, memo, useCallback } from 'react'
+import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { modalContent, modalState } from '@/store/modalAtom'
+import { canvasSettingState } from '@/store/canvasAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { get, post } from '@/lib/Axios'
+
+export default function InitSettingsModal(props) {
+  const [objectNo, setObjectNo] = useState('test123240909003') // 후에 삭제 필요
+  const [open, setOpen] = useRecoilState(modalState)
+  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
+  const [roofMaterials, setRoofMaterials] = useState([])
+  const [basicSetting, setBasicSettings] = useState({
+    roofDrawingSet: '1',
+    roofSizeSet: '1',
+    roofAngleSet: 'slope',
+    roofs: [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }],
+  })
+
+  const modelProps = {
+    open,
+    setOpen,
+  }
+
+  //const { get, post } = useAxios()
+
+  useEffect(() => {
+    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
+      //TODO: error handling
+      if (!res) return
+
+      setRoofMaterials(res)
+    })
+
+    get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
+      if (res.length == 0) return
+
+      // 'roofs' 배열을 생성하여 각 항목을 추가
+      const roofsRow = res.map((item) => {
+        return {
+          roofDrawingSet: String(item.roofDrawingSet),
+          roofSizeSet: String(item.roofSizeSet),
+          roofAngleSet: item.roofAngleSet,
+        }
+      })
+
+      const roofsArray = res.some((item) => !item.roofSeq)
+        ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
+          [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }]
+        : res.map((item) => ({
+            roofSeq: String(item.roofSeq),
+            roofType: String(item.roofType),
+            roofWidth: String(item.roofWidth),
+            roofHeight: String(item.roofHeight),
+            roofGap: String(item.roofGap),
+            roofLayout: item.roofLayout,
+          }))
+
+      // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+      const patternData = {
+        roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용
+        roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
+        roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
+        roofs: roofsArray, // 만들어진 roofs 배열
+      }
+
+      // 데이터 설정
+      setBasicSettings({ ...patternData })
+    })
+
+    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+      setBasicSettings({ ...canvasSetting })
+    }
+  }, [])
+
+  //기본 설정값 변경 함수
+  const handleBasicSetting = (event) => {
+    const newBasicSetting = { ...basicSetting, [event.target.name]: event.target.value }
+    setBasicSettings(newBasicSetting)
+  }
+
+  //배열 값 변경 함수
+  const handleRoofSettings = (id, event) => {
+    // 기본 세팅에서 roofs 배열을 복사
+    const updatedRoofs = [...basicSetting.roofs]
+
+    // roofSeq가 id와 일치하는 항목의 인덱스 찾기
+    const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id)
+
+    if (index !== -1) {
+      // 해당 인덱스의 항목을 수정
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        [event.target.name]: event.target.value,
+      }
+
+      // 수정된 배열을 상태에 반영
+      setBasicSettings((prevState) => ({
+        ...prevState,
+        roofs: updatedRoofs,
+      }))
+    }
+  }
+
+  //저장
+  const submitCanvasConfig = async () => {
+    if (!objectNo) {
+      alert('object_no를 입력하세요.')
+      return
+    }
+
+    const patternData = {
+      objectNo,
+      roofDrawingSet: basicSetting.roofDrawingSet,
+      roofSizeSet: basicSetting.roofSizeSet,
+      roofAngleSet: basicSetting.roofAngleSet,
+      roofMaterialsAddList: basicSetting.roofs,
+    }
+    await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
+
+    //Recoil 설정
+    setCanvasSetting({ ...basicSetting })
+
+    // 저장 후 재조회
+    //await handleSelect()
+  }
+
+  return (
+    <>
+      <div className="container mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
+        <div className="text-lg font-semibold mb-4">배치면 초기설정</div>
+
+        <div className="mb-6">
+          <div className="flex space-x-4">
+            <RadioGroup
+              label="도면 작성방법"
+              name="roofDrawingSet"
+              orientation="horizontal"
+              value={basicSetting.roofDrawingSet}
+              onChange={handleBasicSetting}
+            >
+              <Radio value="1">치수 입력에 의한 물건작성</Radio>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <div className="flex space-x-4">
+            <RadioGroup
+              label="치수 입력방법"
+              name="roofSizeSet"
+              orientation="horizontal"
+              value={basicSetting.roofSizeSet}
+              onChange={handleBasicSetting}
+            >
+              <Radio value="1">복사도 입력</Radio>
+              <Radio value="2">실측값 입력</Radio>
+              <Radio value="3">육지붕</Radio>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <div className="flex space-x-4">
+            <RadioGroup
+              label="지붕각도 설정"
+              name="roofAngleSet"
+              orientation="horizontal"
+              value={basicSetting.roofAngleSet}
+              onChange={handleBasicSetting}
+            >
+              <Radio value="slope">경사</Radio>
+              <Radio value="angle">각도</Radio>
+            </RadioGroup>
+          </div>
+        </div>
+        <RadioGroup label="지붕재 추가(단위 : mm)" />
+        {/* Roofs Array Rendering */}
+        {basicSetting.roofs &&
+          basicSetting.roofs.map((roof, index) => {
+            return (
+              <div key={index} className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
+                <span> 타입 : </span>
+                <Select
+                  aria-label="roofMaterial"
+                  className={'w-52'}
+                  name="roofType"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                  items={roofMaterials}
+                  defaultSelectedKeys={roof.roofType ? [roof.roofType] : []}
+                  selectedKeys={roof.roofType}
+                  value={roof.roofType}
+                >
+                  {(roofMaterial) => (
+                    <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
+                      {roofMaterial.name}
+                    </SelectItem>
+                  )}
+                </Select>
+                <span> 너비 : </span>
+                <Input
+                  type="text"
+                  name="roofWidth"
+                  placeholder="너비"
+                  value={roof.roofWidth}
+                  className="w-24"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                />
+                mm
+                <span> 높이 : </span>
+                <Input
+                  type="text"
+                  name="roofHeight"
+                  placeholder="높이"
+                  value={roof.roofHeight}
+                  className="w-24"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                />
+                mm
+                <span> 서까래 간격 : </span>
+                <Input
+                  type="text"
+                  name="roofGap"
+                  placeholder="간격"
+                  value={roof.roofGap}
+                  className="w-24"
+                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                />
+                mm
+                <div className="flex space-x-4">
+                  <RadioGroup
+                    orientation="horizontal"
+                    name="roofLayout"
+                    value={roof.roofLayout}
+                    defaultValue="parallel"
+                    onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
+                  >
+                    <Radio value="parallel">병렬식</Radio>
+                    <Radio value="cascade">계단식</Radio>
+                  </RadioGroup>
+                </div>
+              </div>
+            )
+          })}
+
+        <div className="flex gap-4 items-right">
+          <Button size="sm" color="secondary" onClick={submitCanvasConfig}>
+            저장
+          </Button>
+          <Button size="sm" onClick={() => setOpen(!open)}>
+            취소
+          </Button>
+          <input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
index 0129e7a4..a6825af7 100644
--- a/src/components/Intro.jsx
+++ b/src/components/Intro.jsx
@@ -14,10 +14,11 @@ import { Button } from '@nextui-org/react'
 import SingleDatePicker from './common/datepicker/SingleDatePicker'
 import RangeDatePicker from './common/datepicker/RangeDatePicker'
 import QGrid from './common/grid/QGrid'
-import { QToast } from '@/hooks/useToast'
+import { useSwal } from '@/hooks/useSwal'
 
 export default function Intro() {
   const { get } = useAxios()
+  const { swalFire } = useSwal()
 
   // const [open, setOpen] = useState(false)
   const [startDate, setStartDate] = useState(new Date())
@@ -127,9 +128,8 @@ export default function Intro() {
           <Button
             color="primary"
             onClick={() => {
-              QToast({
-                message: 'This is a toast message',
-                type: 'success',
+              swalFire({
+                text: 'This is a toast message',
               })
             }}
           >
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index 9a029019..4546f32d 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -1,39 +1,9 @@
 'use client'
 
-import { logout } from '@/lib/authActions'
-import { useChangeLocale, useI18n } from '@/locales/client'
-import { Button, Chip } from '@nextui-org/react'
-
 export default function MainPage(props) {
-  const { currentLocale, isLoggedIn } = props
-  const t = useI18n()
-  const changeLocale = useChangeLocale()
-
-  const handleChangeLocale = () => {
-    currentLocale === 'ja' ? changeLocale('ko') : changeLocale('ja')
-  }
-
-  // console.log('MainPage', currentLocale)
-
-  const handleLogout = async () => {
-    await logout()
-  }
-
   return (
     <>
-      <h3>{t('locale', { locale: <Chip color="primary">{currentLocale}</Chip> })}</h3>
-      <div>{t('hello')}</div>
-      <div>{t('welcome', { name: '효준' })}</div>
-      <div>
-        <Button onClick={handleChangeLocale}>Change Locale</Button>
-      </div>
-      {isLoggedIn && (
-        <div className="my-4">
-          <Button color="primary" onClick={handleLogout}>
-            로그아웃
-          </Button>
-        </div>
-      )}
+      <h1>Main page</h1>
     </>
   )
 }
diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 2467798a..200a0337 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -1,17 +1,39 @@
 'use client'
 
-import { Button, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+import { useRef, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
+import { FaAnglesUp } from 'react-icons/fa6'
+import { FaAnglesDown } from 'react-icons/fa6'
 
 import { useAxios } from '@/hooks/useAxios'
-// import { get } from '@/lib/Axios'
+import { useMessage } from '@/hooks/useMessage'
+import { convertDwgToPng } from '@/lib/cadAction'
+import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'
 
 import QSelect from '@/components/ui/QSelect'
+import { Button } from '@nextui-org/react'
+import ColorPicker from './common/color-picker/ColorPicker'
+import { useSwal } from '@/hooks/useSwal'
 
 import styles from './playground.module.css'
+import Image from 'next/image'
 
 export default function Playground() {
-  const { get } = useAxios()
+  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
+  const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
+  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
+  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
+  const fileRef = useRef(null)
+  const queryRef = useRef(null)
+  const [zoom, setZoom] = useState(20)
+  const { get, promisePost } = useAxios()
   const testVar = process.env.NEXT_PUBLIC_TEST
+  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+
+  const [color, setColor] = useState('#ff0000')
 
   const handleUsers = async () => {
     // const users = await get('/api/user/find-all')
@@ -22,6 +44,46 @@ export default function Playground() {
     console.log('users', users)
   }
 
+  const handleConvert = async () => {
+    console.log('file', fileRef.current.files[0])
+
+    const formData = new FormData()
+    formData.append('file', fileRef.current.files[0])
+
+    await promisePost({ url: converterUrl, data: formData })
+      .then((res) => {
+        console.log('response: ', res)
+        convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
+        setUseCadFile(true)
+        setCadFileName(res.data.Files[0].FileName)
+        swalFire({ text: '파일 변환 완료' })
+      })
+      .catch((err) => {
+        console.error(err)
+        swalFire({ text: '파일 변환 실패' })
+      })
+  }
+
+  const handleDownImage = async (fileName = '') => {
+    const fileNm = fileName === '' ? uuidv4() : fileName
+    const queryString = queryRef.current.value === '' ? '서울시 서대문구 연세로5다길 22-3 발리빌라 3층' : queryRef.current.value
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${fileNm}&zoom=${zoom}` })
+    console.log('res', res)
+    setGoogleMapFileName(res.fileNm)
+    swalFire({ text: '이미지 저장 완료' })
+    setUseGoogleMapFile(true)
+  }
+
+  const handleZoom = async (type) => {
+    if (type === 'up') {
+      setZoom((prevState) => prevState + 1)
+    } else {
+      setZoom((prevState) => prevState - 1)
+    }
+
+    await handleDownImage()
+  }
+
   const data = [
     {
       id: 1,
@@ -42,6 +104,13 @@ export default function Playground() {
       date: '',
     },
   ]
+
+  const handleSwalAlert = () => {
+    swalFire({
+      text: '알림 테스트입니다.',
+    })
+  }
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -58,6 +127,59 @@ export default function Playground() {
         <div className="test">
           <p className="text-white">Sass 테스트입니다.</p>
         </div>
+        <div dangerouslySetInnerHTML={{ __html: getMessage('welcome', ['<span style="color: red">test</span>']) }}></div>
+        <div>
+          <h1>React ColorPicker</h1>
+          <ColorPicker color={color} setColor={setColor} />
+          <div className="p-4">{color}</div>
+        </div>
+        <div>
+          <h1 className="text-2xl">캐드 파일 이미지 사용</h1>
+          <input type="file" name="file" ref={fileRef} />
+          <div>
+            <Button onClick={handleConvert}>Convert</Button>
+          </div>
+        </div>
+        <div>
+          <h1 className="text-2xl">구글 맵 이미지 사용</h1>
+          <input type="text" ref={queryRef} className="w-80 border-medium my-2" />
+          <div>
+            <Button onClick={handleDownImage}>Google map Download to Image</Button>
+          </div>
+          {useGoogleMapFile && (
+            <>
+              <div className="my-2">
+                <p className="text-lg">Zoom Controller : {zoom}</p>
+                <Button startContent={<FaAnglesUp />} className="mx-2" onClick={() => handleZoom('up')}></Button>
+                <Button startContent={<FaAnglesDown />} className="mx-2" onClick={() => handleZoom('down')}></Button>
+              </div>
+              <div className="my-2">
+                <Image src={`/mapImages/${googleMapFileName}`} width={640} height={640} />
+              </div>
+            </>
+          )}
+        </div>
+        <div className="my-2">
+          <Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
+        </div>
+        <div className="my-2">
+          <Button onClick={() => swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })}>Sweetalert - alert - error</Button>
+        </div>
+        <div className="my-2">
+          <Button
+            onClick={() =>
+              swalFire({
+                html: `confirm 테스트입니다.<br />당신은 바보입니까?`,
+                type: 'confirm',
+                confirmFn: () => {
+                  alert('test')
+                },
+              })
+            }
+          >
+            Sweetalert - confirm
+          </Button>
+        </div>
       </div>
     </>
   )
diff --git a/src/components/Roof.jsx b/src/components/Roof.jsx
index 9fd3aed2..51ba639e 100644
--- a/src/components/Roof.jsx
+++ b/src/components/Roof.jsx
@@ -1,8 +1,10 @@
+'use client'
+
+import { useEffect } from 'react'
 import { addDistanceTextToPolygon, getDistance } from '@/util/canvas-util'
 import { useCanvas } from '@/hooks/useCanvas'
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
-import { useEffect } from 'react'
 
 export default function Roof() {
   const {
@@ -281,82 +283,43 @@ export default function Roof() {
   return (
     <>
       <div className="flex justify-center my-8 w-full">
-        <button
-          className="w-30 mx-2 p-2 rounded bg-blue-500 text-white"
-          onClick={addRect}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-blue-500 text-white" onClick={addRect}>
           ADD RECTANGLE
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-blue-500 text-white"
-          onClick={addHorizontalLine}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-blue-500 text-white" onClick={addHorizontalLine}>
           ADD HORIZONTAL LINE
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-blue-500 text-white"
-          onClick={addVerticalLine}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-blue-500 text-white" onClick={addVerticalLine}>
           ADD VERTICALITY LINE
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-blue-500 text-white"
-          onClick={addTriangle}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-blue-500 text-white" onClick={addTriangle}>
           ADD TRIANGLE
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-blue-500 text-white"
-          onClick={addTrapezoid}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-blue-500 text-white" onClick={addTrapezoid}>
           ADD TRAPEZOID
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-black text-white"
-          onClick={handleCopy}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-black text-white" onClick={handleCopy}>
           COPY shape
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-red-500 text-white"
-          onClick={handleDelete}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-red-500 text-white" onClick={handleDelete}>
           DELETE
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-red-500 text-white"
-          onClick={handleClear}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-red-500 text-white" onClick={handleClear}>
           CLEAR
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-green-500 text-white"
-          onClick={handleUndo}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-green-500 text-white" onClick={handleUndo}>
           UNDO
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-green-300 text-white"
-          onClick={handleRedo}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-green-300 text-white" onClick={handleRedo}>
           REDO
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-black text-white"
-          onClick={handleSave}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-black text-white" onClick={handleSave}>
           저장
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-black text-white"
-          onClick={handlePaste}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-black text-white" onClick={handlePaste}>
           붙여넣기
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-black text-white"
-          onClick={() => handleRotate()}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-black text-white" onClick={() => handleRotate()}>
           45도 회전
         </button>
         <button
@@ -367,10 +330,7 @@ export default function Roof() {
         >
           이미지 저장
         </button>
-        <button
-          className="w-30 mx-2 p-2 rounded bg-black text-white"
-          onClick={handleFlip}
-        >
+        <button className="w-30 mx-2 p-2 rounded bg-black text-white" onClick={handleFlip}>
           도형반전
         </button>
       </div>
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 68303710..a31f54e7 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -1,26 +1,69 @@
+'use client'
+
 import { useCanvas } from '@/hooks/useCanvas'
-import { useEffect, useState } from 'react'
-import { Mode, useMode } from '@/hooks/useMode'
-import { Button } from '@nextui-org/react'
+import { useEffect, useRef, useState } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { useMode } from '@/hooks/useMode'
+import { Mode } from '@/common/common'
+import { Button, Input } from '@nextui-org/react'
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import {
+  cadFileCompleteState,
+  cadFileNameState,
   canvasSizeState,
   compassState,
+  currentObjectState,
   fontSizeState,
+  globalCompassState,
+  googleMapFileNameState,
   roofMaterialState,
   roofState,
   sortedPolygonArray,
   templateTypeState,
+  useCadFileState,
+  useGoogleMapFileState,
   wallState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import QContextMenu from './common/context-menu/QContextMenu'
+import { modalContent, modalState } from '@/store/modalAtom'
+import { useAxios } from '@/hooks/useAxios'
+import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
+import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
+import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
 
-export default function Roof2() {
-  const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
+import InitSettingsModal from './InitSettingsModal'
+import GridSettingsModal from './GridSettingsModal'
+import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
+import { changeAllGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import ThumbnailList from '@/components/ui/ThumbnailLIst'
+import ObjectPlacement from '@/components/ui/ObjectPlacement'
+import { globalLocaleStore } from '@/store/localeAtom'
+
+export default function Roof2(props) {
+  const { name, userId, email, isLoggedIn } = props
+  const {
+    canvas,
+    handleRedo,
+    handleUndo,
+    setCanvasBackgroundWithDots,
+    saveImage,
+    addCanvas,
+    handleBackImageLoadToCanvas,
+    handleCadImageInit,
+    backImg,
+    setBackImg,
+  } = useCanvas('canvas')
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { get } = useAxios(globalLocaleState)
+
+  const canvasRef = useRef(null)
 
   //canvas 기본 사이즈
   const [canvasSize, setCanvasSize] = useRecoilState(canvasSizeState)
@@ -49,12 +92,38 @@ export default function Roof2() {
 
   const wall = useRecoilValue(wallState)
 
+  const [open, setOpen] = useRecoilState(modalState)
+  const [contents, setContent] = useRecoilState(modalContent)
+
+  const [scale, setScale] = useState(1)
+  const currentObject = useRecoilValue(currentObjectState)
+
+  //canvas 썸네일
+  const [thumbnails, setThumbnails] = useState([])
+  const thumbnailProps = {
+    thumbnails,
+    canvas,
+  }
+
+  let imgPath
+  // cad 파일 업로드
+  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
+  const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
+  const [cadFileComplete, setCadFileComplete] = useRecoilState(cadFileCompleteState)
+  useCadFile && (imgPath = `/cadImages/${cadFileName}`)
+
+  // 구글맵 이미지 업로드
+  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
+  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
+  useGoogleMapFile && (imgPath = `/mapImages/${googleMapFileName}`)
+
+  const [globalCampass, setGlobalCampass] = useRecoilState(globalCompassState)
+
   const {
     mode,
     setMode,
     changeMode,
     handleClear,
-    fillCellInPolygon,
     zoomIn,
     zoomOut,
     zoom,
@@ -66,23 +135,53 @@ export default function Roof2() {
     createRoofRack,
     drawRoofPolygon,
     drawCellInTrestle,
+    drawCellManualInTrestle,
     setDirectionTrestles,
     cutHelpLines,
   } = useMode()
 
   // const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
 
+  useEffect(() => {
+    get({ url: `/api/canvas-management/canvas-statuses/by-object/test123240822001` }).then((res) => {
+      console.log(res)
+
+      const arrangeData = res.map((item) => {
+        console.log(item.canvasStatus.replace(/##/g, '"').replace(/\\/g, ''))
+        const test = item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '')
+        const test2 = test.substring(1, test.length - 1)
+        return {
+          id: item.id,
+          userId: item.userId,
+          imageName: `/canvasState/${item.imageName}.png`,
+          canvasStatus: JSON.stringify(test2),
+        }
+      })
+      setThumbnails(arrangeData)
+    })
+  }, [])
+
   useEffect(() => {
     if (!canvas) {
       return
     }
     changeMode(canvas, mode)
+
+    if (!cadFileComplete && useCadFile) {
+      // cad 파일 로드
+      useCadFile && handleBackImageLoadToCanvas(imgPath, canvas)
+    }
+
+    if (useGoogleMapFile) {
+      handleBackImageLoadToCanvas(imgPath, canvas)
+    }
   }, [canvas, mode])
 
   const makeLine = () => {
     if (canvas) {
       const line = new QLine([50, 50, 200, 50], {
         stroke: 'black',
+        selectable: true,
         strokeWidth: 2,
         fontSize: fontSize,
       })
@@ -513,20 +612,102 @@ export default function Roof2() {
     setCompass(degree)
   }
 
+  const changeLength = (e) => {
+    const polygon = canvas?.getActiveObject()
+
+    if (polygon?.type !== 'QPolygon') {
+      return
+    }
+    setScale(e)
+    polygon.setScaleX(e)
+
+    canvas?.renderAll()
+  }
+
+  const moduleConfiguration = () => {
+    createRoofRack()
+  }
+
+  const setDirectionStringToArrow = () => {
+    drawDirectionStringToArrow(canvas, globalCampass)
+
+    /**
+     * 나중에 유틸로 다시 구현
+     */
+    // const groupShapes = canvas?.getObjects().filter((obj) => obj.name === 'cellGroup')
+
+    // console.log('groupShapes', groupShapes)
+
+    // groupShapes.forEach((obj) => {
+    //   let originAngle = obj._objects.find((array) => array.originAngle !== undefined).originAngle
+
+    //   console.log('originAngle', originAngle)
+
+    //   let rotateAngle = globalCampass
+
+    //   // let rotateAngle = originAngle + globalCampass
+    //   // if (rotateAngle > 360) {
+    //   //   rotateAngle -= 360
+    //   // }
+
+    //   console.log('rotateAngle', rotateAngle)
+
+    //   obj.set({ angle: rotateAngle, originX: 'center', originY: 'center' })
+    //   obj.setCoords()
+    // })
+    canvas?.renderAll()
+  }
+
+  const setAllGableRoof = () => {
+    let offset = Number(prompt('gable roof offset', '50'))
+    if (!isNaN(offset) && offset > 0) {
+      const polygon = canvas?.getObjects()
+      console.log('gable roof offset : ', offset)
+      console.log('polygon : ', polygon)
+      changeAllGableRoof(polygon, offset, canvas)
+    } else {
+      alert('offset 은 0 보다 커야 함')
+    }
+  }
   return (
     <>
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                setContent(<InitSettingsModal canvasProps={canvas} />)
+                setOpen(true)
+              }}
+            >
+              배치면 초기설정
+            </Button>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                setContent(<GridSettingsModal canvasProps={canvas} />)
+                setOpen(true)
+              }}
+            >
+              그리드 설정
+            </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DEFAULT)}>
               모드 DEFAULT
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_LINE)}>
-              기준선 긋기 모드
+              임의 그리드 모드
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.EDIT)}>
               에디팅모드
             </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.MOUSE_DISTANCE ? 'primary' : 'default'}`}
+              onClick={() => setMode(Mode.MOUSE_DISTANCE)}
+            >
+              마우스거리 모드
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEMPLATE)}>
               템플릿(기둥)
             </Button>
@@ -566,6 +747,16 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_RECT)}>
+              도머 추가 모드
+            </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.ADSORPTION_POINT ? 'primary' : 'default'}`}
+              onClick={() => setMode(Mode.ADSORPTION_POINT)}
+            >
+              흡착점 모드
+            </Button>
             <Button
               className="m-1 p-2"
               color={`${mode === Mode.DRAW_HELP_LINE ? 'primary' : 'default'}`}
@@ -582,10 +773,11 @@ export default function Roof2() {
             <Button className="m-1 p-2" onClick={handleClear}>
               clear
             </Button>
-            {/*<Button className="m-1 p-2" onClick={zoomIn}>
-              확대
-            </Button>
-            */}
+            {
+              <Button className="m-1 p-2" onClick={zoomIn}>
+                확대
+              </Button>
+            }
             <Button className="m-1 p-2" onClick={zoomOut}>
               축소
             </Button>
@@ -598,30 +790,35 @@ export default function Roof2() {
             </Button>
             {templateType === 0 && (
               <>
-                <Button
-                  className="m-1 p-2"
-                  onClick={() => {
-                    setCanvasBackgroundWithDots(canvas, 10)
-                  }}
-                >
-                  점선 추가
-                </Button>
-                <Button
-                  className="m-1 p-2"
-                  onClick={() => {
-                    setCanvasBackgroundWithDots(canvas, 20)
-                  }}
-                >
-                  점선 추가
-                </Button>
                 <Button className="m-1 p-2" onClick={makeQPolygon}>
                   QPolygon
                 </Button>
               </>
             )}
-            <Button className="m-1 p-2" onClick={saveImage}>
+            <Button className={'m-1 p-2'} onClick={setAllGableRoof}>
+              팔작지붕
+            </Button>
+            <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
               저장
             </Button>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                setContent(<SurfaceShapeModal canvas={canvas} />)
+                setOpen(true)
+              }}
+            >
+              면형상
+            </Button>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                setContent(<ObjectPlacement canvas={canvas} />)
+                setOpen(true)
+              }}
+            >
+              오브젝트 배치
+            </Button>
             {/*<Button className="m-1 p-2" onClick={rotateShape}>
               회전
             </Button>*/}
@@ -656,6 +853,46 @@ export default function Roof2() {
             <Button className="m-1 p-2" onClick={deleteCell}>
               선택 셀 지우기
             </Button>
+            <Button className="m-1 p-2" onClick={moduleConfiguration}>
+              모듈,회로구성
+            </Button>
+            <Button className="m-1 p-2" onClick={drawCellInTrestle}>
+              모듈 채우기
+            </Button>
+            <Button className="m-1 p-2" onClick={drawCellManualInTrestle}>
+              수동 모듈 채우기
+            </Button>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                if (useCadFile) {
+                  setUseCadFile(false)
+                  setCadFileName('')
+                  handleCadImageInit()
+                }
+              }}
+            >
+              cad 파일 초기화
+            </Button>
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                if (useCadFile) {
+                  backImg
+                    .set({
+                      selectable: false,
+                      opacity: 0.7,
+                    })
+                    .sendToBack()
+                  canvas.clear()
+                  canvas.add(backImg)
+                  canvas.renderAll()
+                  setCadFileComplete(true)
+                }
+              }}
+            >
+              배경 이미지 조정 완료
+            </Button>
             <Button className="m-1 p-2" color={`${showControl ? 'primary' : 'default'}`} onClick={handleShowController}>
               canvas 컨트롤러 {`${showControl ? '숨기기' : '보이기'}`}
             </Button>
@@ -687,11 +924,76 @@ export default function Roof2() {
             <div className="m-2 p-2 w-80">
               <RangeSlider title={`글자 크기${fontSize}`} initValue={fontSize} onchange={setFontSize} />
             </div>
+            <div className="m-2 p-2 w-80">
+              <RangeSlider title={`선택한 obj 가로 늘리기${scale}`} initValue={scale} min={0.01} max={2.0} step={0.01} onchange={changeLength} />
+            </div>
           </div>
         </>
       )}
+      <ThumbnailList {...thumbnailProps} />
+      <div className={'flex'}>
+        <p className={'m-1 p-3'}>각도 입력(0~360) 후 방향설정 클릭</p>
+        <Input
+          className="m-1 p-3"
+          type={'text'}
+          value={globalCampass}
+          onChange={(e) => {
+            const val = e.target.value.replace(/[^-0-9]/g, '')
+            if (val < 0 || val > 360) {
+              setGlobalCampass(0)
+            } else {
+              setGlobalCampass(Number(val))
+            }
+          }}
+        />
+        <Button className="m-1 p-3" onClick={setDirectionStringToArrow}>
+          방향 설정
+        </Button>
+      </div>
+      <div className="relative w-48 h-48 flex justify-center items-center border-2 border-gray-300 rounded-full">
+        {/* Compass Circle */}
+        <div
+          className="absolute w-full h-full border-2 border-gray-300 rounded-full flex justify-center items-center"
+          style={{ rotate: `${globalCampass}deg` }}
+        >
+          {/* N, S, E, W Labels */}
+          <div className="absolute top-2 text-lg font-bold">N</div>
+          <div className="absolute bottom-2 text-lg font-bold">S</div>
+          <div className="absolute right-2 text-lg font-bold" style={{ rotate: '90deg' }}>
+            E
+          </div>
+          <div className="absolute left-2 text-lg font-bold" style={{ rotate: '-90deg' }}>
+            W
+          </div>
+        </div>
+
+        {/* Compass Pointer */}
+        <div className="relative w-10 h-10">
+          {/* Red Upper Triangle */}
+          <div
+            className="absolute top-0"
+            style={{
+              width: 0,
+              height: 0,
+              rotate: `${globalCampass - 180}deg`,
+              borderLeft: '15px solid transparent',
+              borderRight: '15px solid transparent',
+              borderTop: '60px solid red',
+            }}
+          />
+        </div>
+      </div>
       <div className="flex justify-start my-8 mx-2 w-full">
-        <canvas id="canvas" style={{ border: '1px solid black' }} />
+        <canvas ref={canvasRef} id="canvas" style={{ border: '1px solid black' }} />
+        {!canvas ? null : mode === Mode.DRAW_LINE ? (
+          <QEmptyContextMenu contextRef={canvasRef} canvasProps={canvas} />
+        ) : currentObject?.type === 'QPolygon' ? (
+          <QPolygonContextMenu contextRef={canvasRef} canvasProps={canvas} />
+        ) : currentObject?.type === 'QLine' ? (
+          <QLineContextMenu contextRef={canvasRef} canvasProps={canvas} />
+        ) : (
+          <QContextMenu contextRef={canvasRef} canvasProps={canvas} />
+        )}
       </div>
     </>
   )
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
new file mode 100644
index 00000000..43288dbe
--- /dev/null
+++ b/src/components/Settings.jsx
@@ -0,0 +1,321 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { Button } from '@nextui-org/react'
+
+import { get, post } from '@/lib/Axios'
+import { useRecoilState } from 'recoil'
+import { customSettingsState } from '@/store/canvasAtom'
+import { modalContent, modalState } from '@/store/modalAtom'
+
+import ColorPicker from './common/color-picker/ColorPicker'
+
+export default function Settings() {
+  const [objectNo, setObjectNo] = useState('test123240829010')
+  const [error, setError] = useState(null)
+  const [customSettings, setCustomSettings] = useRecoilState(customSettingsState)
+
+  const [color, setColor] = useState('#ff0000')
+
+  const [open, setOpen] = useRecoilState(modalState)
+  const [contents, setContent] = useRecoilState(modalContent)
+
+  const handleSavePopup = () => {
+    console.log('color ', color)
+  }
+
+  const handleClosePopup = () => {
+    setContent('')
+    setOpen(false)
+    console.log('colorSetting ', color)
+  }
+
+  const colorSetting = (
+    <>
+      <br />
+      <h1>React ColorPicker</h1>
+      <ColorPicker color={color} setColor={setColor} />
+      <div className="p-4">{color}</div>
+      <div>
+        <button onClick={handleSavePopup}>저장</button> <p />
+        <button onClick={handleClosePopup}>취소</button>
+      </div>
+    </>
+  )
+
+  const customStyles = {
+    overlay: {
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    content: {
+      width: '300px',
+      height: '400px',
+      margin: 'auto',
+      borderRadius: '4px',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+      padding: '20px',
+    },
+  }
+
+  // 상태를 하나의 객체로 관리
+  const [settings, setSettings] = useState({
+    display1: Array(11).fill(false), // 화면 표시1
+    display2: Array(3).fill(false), // 화면 표시2
+    rangeSetting: 0, // 흡착 범위 설정
+    gridSettings: Array(5).fill(false), // 그리드 설정
+  })
+
+  const gridItems = {
+    display1: [
+      '할당 표시',
+      '도면 표시',
+      '그리드 표시',
+      '문자 표시',
+      '흐름방향 표시',
+      '복도치수 표시',
+      '실제치수 표시',
+      '치수 표시 없음',
+      '가대 표시',
+      '좌표 표시',
+      '도면전환 표시',
+    ],
+    display2: ['테두리만', '라인해치', 'All Painted'],
+    rangeSetting: ['극소', '소', '중', '대'],
+    gridSettings: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가'],
+  }
+
+  // 초기 조회
+  useEffect(() => {
+    if (!objectNo) {
+      alert('object_no를 입력하세요.')
+    }
+  }, [])
+
+  // 클릭 시 상태 변경 함수
+  const handleToggle = (type, index) => {
+    // '실선 그리드' 클릭 시 팝업 열기
+    if (type === 'gridSettings' && gridItems.gridSettings[index] === '실선 그리드') {
+      //openGridPopup()
+    }
+
+    // '그리드 색 설정' 클릭 시 팝업 열기
+    if (type === 'gridSettings' && gridItems.gridSettings[index] === '그리드 색 설정') {
+      //setSelectedGridSetting(gridItems.gridSettings[index])
+      //setIsPopupOpen(true)
+      //return prevSettings // 설정은 변경하지 않음
+
+      setOpen(true)
+      setContent({ ...colorSetting })
+    }
+
+    setSettings((prevSettings) => {
+      // prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화
+      let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : []
+
+      if (type === 'rangeSetting') {
+        return { ...prevSettings, [type]: index }
+      }
+
+      updated[index] = updated[index] === false ? true : false
+      return { ...prevSettings, [type]: updated }
+    })
+  }
+
+  // '실선 그리드' 클릭 시 팝업을 열기 위한 함수
+  const openGridPopup = () => {
+    const popupWidth = 500
+    const popupHeight = 300
+
+    // 팝업 창 위치를 화면 중앙으로 조정하기 위해 계산
+    const left = window.innerWidth / 2 - popupWidth / 2
+    const top = window.innerHeight / 2 - popupHeight / 2
+
+    // 새 창 열기
+    window
+      .open
+      //'./components/intro', // 팝업으로 띄울 페이지의 URL
+      //'_blank', // 새 창으로 열기
+      //`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`, // 크기와 위치 지정
+      ()
+  }
+
+  // Canvas Setting 조회 및 초기화
+  const handleSelect = async () => {
+    try {
+      if (!objectNo) {
+        alert('object_no를 입력하세요.')
+        return
+      }
+
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+
+      // 데이터가 없는 경우
+      if (!res) {
+        console.warn('조회 결과가 없습니다.')
+        // 기본값을 설정하거나 사용자에게 알림 표시
+        setSettings({
+          display1: Array(11).fill(false), // 화면 표시1 기본값
+          display2: Array(3).fill(false), // 화면 표시2 기본값
+          rangeSetting: 0, // 흡착 범위 설정 기본값
+          gridSettings: Array(5).fill(false), // 그리드 설정 기본값
+        })
+
+        alert('조회된 데이터가 없습니다. 기본 설정이 적용됩니다.')
+        return // 이후 코드 실행을 중단
+      }
+
+      const data = {
+        display1: [
+          res.assignDisplay,
+          res.drawDisplay,
+          res.gridDisplay,
+          res.charDisplay,
+          res.flowDisplay,
+          res.hallwayDimenDisplay,
+          res.actualDimenDisplay,
+          res.noDimenDisplay,
+          res.trestleDisplay,
+          res.coordiDisplay,
+          res.drawConverDisplay,
+        ],
+        display2: [res.onlyBorder, res.lineHatch, res.allPainted],
+        rangeSetting: res.adsorpRangeSetting,
+        gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
+      }
+
+      // 데이터 설정
+      setSettings({
+        display1: data.display1,
+        display2: data.display2,
+        rangeSetting: data.rangeSetting,
+        gridSettings: data.gridSettings,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  // Canvas Setting 저장
+  const handleSubmit = async () => {
+    if (!objectNo) {
+      alert('object_no를 입력하세요.')
+      return
+    }
+
+    const patternData = {
+      objectNo,
+      assignDisplay: settings.display1[0],
+      drawDisplay: settings.display1[1],
+      gridDisplay: settings.display1[2],
+      charDisplay: settings.display1[3],
+      flowDisplay: settings.display1[4],
+      hallwayDimenDisplay: settings.display1[5],
+      actualDimenDisplay: settings.display1[6],
+      noDimenDisplay: settings.display1[7],
+      trestleDisplay: settings.display1[8],
+      coordiDisplay: settings.display1[9],
+      drawConverDisplay: settings.display1[10],
+      onlyBorder: settings.display2[0],
+      lineHatch: settings.display2[1],
+      allPainted: settings.display2[2],
+      adsorpRangeSetting: settings.rangeSetting,
+      randomGrid: settings.gridSettings[0],
+      solidGrid: settings.gridSettings[1],
+      dotGrid: settings.gridSettings[2],
+      gridColorSet: settings.gridSettings[3],
+      adsorpPointAdd: settings.gridSettings[4],
+    }
+
+    console.log('patternData', patternData)
+
+    await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
+
+    //Recoil 설정
+    setCustomSettings({ ...patternData })
+
+    // 저장 후 재조회
+    await handleSelect()
+  }
+
+  return (
+    <>
+      <div className="container mx-auto p-4 m-4 border">
+        <div align="right">
+          <input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
+          <Button onClick={handleSelect}>조회</Button>
+          <Button onClick={handleSubmit}>저장</Button>
+        </div>
+        <div className="container mx-auto p-4 m-4 border">
+          <h1>[디스플레이 설정]</h1>
+          <h1>* 도면에 표시할 항목을 클릭하면 적용 됩니다.</h1>
+          <div className="grid-container2">
+            {gridItems.display1.map((item, index) => (
+              <div
+                key={index}
+                className={`grid-item ${settings.display1[index] === true ? 'selected' : 'unselected'}`}
+                onClick={() => handleToggle('display1', index)}
+              >
+                {settings.display1[index]} {item}
+              </div>
+            ))}
+          </div>
+          <br />
+          <h1>* 화면 표시</h1>
+          <div className="grid-container3">
+            {gridItems.display2.map((item, index) => (
+              <div
+                key={index}
+                className={`grid-item ${settings.display2[index] === true ? 'selected' : 'unselected'}`}
+                onClick={() => handleToggle('display2', index)}
+              >
+                {settings.display2[index]} {item}
+              </div>
+            ))}
+          </div>
+          <h1>[글꼴/도면크기 설정]</h1>
+          <h1>* 글꼴 및 크기 변경</h1>
+          <div className="grid-container2">
+            <div className="grid-item">문자 글꼴 변경</div>
+            <div className="grid-item">흐름방향 글꼴 변경</div>
+            <div className="grid-item">치수 글꼴 변경</div>
+            <div className="grid-item">회로번호 글꼴 변경</div>
+          </div>
+          ``
+          <h1>* 흡착 범위 설정</h1>
+          <div className="grid-container4">
+            {gridItems.rangeSetting.map((item, index) => (
+              <div
+                key={index}
+                className={`grid-item ${settings.rangeSetting === index ? 'selected' : 'unselected'}`}
+                onClick={() => handleToggle('rangeSetting', index)}
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+          <div className="grid-container3">
+            <div className="grid-item">치수선 설정</div>
+            <div className="grid-item">도면 크기 설정</div>
+            <div className="grid-item">흡착점 ON</div>
+          </div>
+          <h1>[그리드 설정]</h1>
+          <div>
+            <ColorPicker color={color} setColor={setColor} />
+            <div className="p-4">{color}</div>
+          </div>
+          <div className="grid-container2">
+            {gridItems.gridSettings.map((item, index) => (
+              <div
+                key={index}
+                className={`grid-item ${settings.gridSettings[index] === true ? 'selected' : 'unselected'}`}
+                onClick={() => handleToggle('gridSettings', index)}
+              >
+                {settings.gridSettings[index]} {item}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/auth/Join.jsx b/src/components/auth/Join.jsx
new file mode 100644
index 00000000..03fc8ecb
--- /dev/null
+++ b/src/components/auth/Join.jsx
@@ -0,0 +1,321 @@
+'use client'
+
+import { post } from '@/lib/Axios'
+import { redirect } from 'next/navigation'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Join() {
+  const { getMessage } = useMessage()
+
+  const joinProcess = async (formData) => {
+    const param = {
+      langCd: 'JA',
+      lastEditUser: formData.get('userId'),
+      storeQcastNm: formData.get('storeQcastNm'),
+      storeQcastNmKana: formData.get('storeQcastNmKana'),
+      postCd: formData.get('postCd'),
+      addr: formData.get('addr'),
+      telNo: formData.get('telNo'),
+      fax: formData.get('fax'),
+      payTermsCd: 'JB02',
+      kamId: 'E1101011',
+      qtCompNm: formData.get('qtCompNm'),
+      qtPostCd: formData.get('qtPostCd'),
+      qtAddr: formData.get('qtAddr'),
+      qtTelNo: formData.get('qtTelNo'),
+      qtFax: formData.get('qtFax'),
+      userInfo: {
+        userId: formData.get('userId'),
+        userNm: formData.get('userNm'),
+        userNmKana: formData.get('userNmKana'),
+        telNo: formData.get('userTelNo'),
+        fax: formData.get('userFax'),
+        email: formData.get('email'),
+        category: formData.get('category'),
+      },
+    }
+
+    await post({ url: '/api/login/v1.0/user/join', data: param }).then((res) => {
+      if (res) {
+        if (res.result.resultCode == 'S') {
+          redirect('/join/complete')
+        } else {
+          alert(res.result.resultMsg)
+        }
+      }
+    })
+  }
+
+  return (
+    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+      <h1 className="text-center text-4xl font-bold">{getMessage('join.title')}</h1>
+      <form action={joinProcess}>
+        <div className="mt-10">
+          <div>
+            ● {getMessage('join.sub1.title')} (*{getMessage('common.require')}) <span>{getMessage('join.sub1.comment')}</span>
+          </div>
+          <table className="w-full">
+            <colgroup>
+              <col style={{ width: '20%' }} />
+              <col style={{ width: '80%' }} />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.storeQcastNm')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="storeQcastNm"
+                    name="storeQcastNm"
+                    required
+                    alt={getMessage('join.sub1.storeQcastNm')}
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.storeQcastNmKana')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="storeQcastNmKana"
+                    name="storeQcastNmKana"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>
+                  {getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} *
+                </th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="postCd"
+                    name="postCd"
+                    required
+                    className="block border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.postCd_placeholder')}
+                  ></input>
+                  <input
+                    type="text"
+                    id="addr"
+                    name="addr"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.addr_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.telNo')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="telNo"
+                    name="telNo"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.telNo_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.fax')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="fax"
+                    name="fax"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.fax_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div className="mt-5">
+            ● {getMessage('join.sub2.title')} (*{getMessage('common.require')})
+          </div>
+          <table className="w-full">
+            <colgroup>
+              <col style={{ width: '20%' }} />
+              <col style={{ width: '80%' }} />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userNm')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="userNm"
+                    name="userNm"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userNmKana')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="userNmKana"
+                    name="userNmKana"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userId')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="userId"
+                    name="userId"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.email')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    autoComplete="email"
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.telNo')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="userTelNo"
+                    name="userTelNo"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub2.telNo_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.fax')} *</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="userFax"
+                    name="userFax"
+                    required
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub1.fax_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.category')}</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input id="category" name="category" className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"></input>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div className="mt-5">
+            ● {getMessage('join.sub3.title')} (*{getMessage('common.require')})
+          </div>
+          <table className="w-full">
+            <colgroup>
+              <col style={{ width: '20%' }} />
+              <col style={{ width: '80%' }} />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtCompNm')}</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input type="text" id="qtCompNm" name="qtCompNm" className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>
+                  {getMessage('join.sub3.qtPostCd')}/{getMessage('join.sub3.qtAddr')}
+                </th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="qtPostCd"
+                    name="qtPostCd"
+                    className="block border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub3.qtPostCd_placeholder')}
+                  ></input>
+                  <input
+                    type="text"
+                    id="qtAddr"
+                    name="qtAddr"
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub3.qtAddr_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtEmail')}</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="email"
+                    id="qtEmail"
+                    name="qtEmail"
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    autoComplete="email"
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtTelNo')}</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="qtTelNo"
+                    name="qtTelNo"
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub3.qtTelNo_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+              <tr>
+                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtFax')}</th>
+                <td style={{ border: '1px solid gray', padding: '5px' }}>
+                  <input
+                    type="text"
+                    id="qtFax"
+                    name="qtFax"
+                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
+                    placeholder={getMessage('join.sub3.qtFax_placeholder')}
+                  ></input>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="mt-10 mb-10">
+          <button
+            type="submit"
+            className="w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            {getMessage('join.btn.approval_request')}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx
index ce2055c3..ef9919c7 100644
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.jsx
@@ -1,21 +1,181 @@
 'use client'
 
-import { login } from '@/lib/authActions'
+import { useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+import { setSession } from '@/lib/authActions'
+import { redirect } from 'next/navigation'
+import { useMessage } from '@/hooks/useMessage'
+
+import { Button, Switch } from '@nextui-org/react'
+import { useRecoilState } from 'recoil'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { modalContent, modalState } from '@/store/modalAtom'
+import { sessionStore } from '@/store/commonAtom'
 
 export default function Login() {
-  return (
-    <div className="flex flex-col align-center h-screen">
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-          <img alt="Your Company" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" className="mx-auto h-10 w-auto" />
-          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
+  const { patch } = useAxios()
+
+  const { getMessage } = useMessage()
+  const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+  const [isSelected, setIsSelected] = useState(globalLocaleState === 'ko' ? true : false)
+
+  const handleSelected = () => {
+    if (isSelected) {
+      setGlbalLocaleState('ja')
+    } else {
+      setGlbalLocaleState('ko')
+    }
+
+    setIsSelected(!isSelected)
+  }
+
+  // login process
+  const loginProcess = async (formData) => {
+    const param = {
+      // langCd: currentLocale
+      langCd: globalLocaleState,
+      lastEditUser: formData.get('id'),
+      loginId: formData.get('id'),
+      pwd: formData.get('password'),
+    }
+
+    // await post({ url: '/api/login/v1.0/login', data: param }).then((res) => {
+    //   if (res) {
+    //     if (res.result.resultCode == 'S') {
+    //       // console.log('res.data', res.data)
+    //       // 비밀번호 초기화가 필요한 경우
+    //       // if (res.data.pwdInitYn != 'Y') {
+    //       //   alert('비밀번호 초기화가 필요한 경우')
+    //       // } else {
+    //       setSession(res.data)
+    //       redirect('/')
+    //       // }
+    //     } else {
+    //       alert(res.result.resultMsg)
+    //     }
+    //   }
+    // })
+
+    // 임시 로그인 처리
+    setSession({
+      userId: 'NEW016610',
+      saleStoreId: null,
+      name: null,
+      mail: null,
+      tel: null,
+      storeId: 'TEMP02',
+      userNm: 'ㅇㅇ6610',
+      userNmKana: '신규사용자 16610',
+      category: '인상6610',
+      telNo: '336610',
+      fax: null,
+      email: 't10t@naver.com',
+      pwdInitYn: 'N',
+    })
+
+    setSessionState({
+      userId: 'NEW016610',
+      saleStoreId: null,
+      name: null,
+      mail: null,
+      tel: null,
+      storeId: 'TEMP02',
+      userNm: 'ㅇㅇ6610',
+      userNmKana: '신규사용자 16610',
+      category: '인상6610',
+      telNo: '336610',
+      fax: null,
+      email: 't10t@naver.com',
+      pwdInitYn: 'N',
+    })
+
+    redirect('/')
+    // 임시 로그인 처리 끝
+  }
+
+  // 비밀번호 초기화 관련
+  const [open, setOpen] = useRecoilState(modalState)
+  const [contents, setContent] = useRecoilState(modalContent)
+
+  const initPasswordProcess = async (formData) => {
+    const param = {
+      langCd: currentLocale,
+      lastEditUser: formData.get('checkId'),
+      loginId: formData.get('checkId'),
+      email: formData.get('checkEmail'),
+    }
+
+    await patch({ url: '/api/login/v1.0/user/init-password', data: param }).then((res) => {
+      if (res) {
+        if (res.result.resultCode == 'S') {
+          alert(getMessage('login.init_password.complete_message'))
+          redirect('/login')
+        } else {
+          alert(res.result.resultMsg)
+        }
+      }
+    })
+  }
+
+  const initPasswordContent = (
+    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+      <form action={initPasswordProcess} className="space-y-6">
+        <h2 className="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('login.init_password.title')}</h2>
+        <h2 className="text-center text-1xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('login.init_password.sub_title')}</h2>
+        <div>
+          <label htmlFor="checkId" className="block text-sm font-medium leading-6 text-gray-900">
+            ID
+          </label>
+          <div className="mt-2">
+            <input
+              id="checkId"
+              name="checkId"
+              type="text"
+              required
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            />
+          </div>
         </div>
 
+        <div>
+          <div className="flex items-center justify-between">
+            <label htmlFor="checkEmail" className="block text-sm font-medium leading-6 text-gray-900">
+              E-Mail
+            </label>
+          </div>
+          <div className="mt-2">
+            <input
+              id="checkEmail"
+              name="checkEmail"
+              type="email"
+              required
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            />
+          </div>
+        </div>
+        <p className="mt-5 text-center text-sm text-gray-500">
+          <Button type="submit" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
+            {getMessage('login.init_password.btn')}
+          </Button>
+        </p>
+      </form>
+    </div>
+  )
+
+  return (
+    <div className="flex flex-col align-center">
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-          <form action={login} method="POST" className="space-y-6">
+          <h1 className="text-center text-4xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('site.name')}</h1>
+          <h2 className="mt-5 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('site.sub_name')}</h2>
+        </div>
+
+        <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
+          <form action={loginProcess} className="space-y-6">
             <div>
               <label htmlFor="userId" className="block text-sm font-medium leading-6 text-gray-900">
-                User ID
+                ID
               </label>
               <div className="mt-2">
                 <input
@@ -34,11 +194,6 @@ export default function Login() {
                 <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
                   Password
                 </label>
-                <div className="text-sm">
-                  <a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
-                    Forgot password?
-                  </a>
-                </div>
               </div>
               <div className="mt-2">
                 <input
@@ -55,19 +210,30 @@ export default function Login() {
             <div>
               <button
                 type="submit"
-                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                className="mt-10 flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               >
-                Sign in
+                {getMessage('login')}
               </button>
             </div>
           </form>
 
-          <p className="mt-10 text-center text-sm text-gray-500">
-            Not a member?{' '}
-            <a href="#" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
-              Start a 14 day free trial
-            </a>
+          <p className="mt-5 text-center text-sm text-gray-500">
+            <Button
+              onClick={() => {
+                setContent(initPasswordContent)
+                setOpen(true)
+              }}
+              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+            >
+              {getMessage('login.init_password.btn')}
+            </Button>
           </p>
+
+          <div className="flex align-center mt-2">
+            <Switch isSelected={isSelected} onValueChange={handleSelected}>
+              {isSelected ? 'Current Locale: KO' : 'Current Locale: JA'}
+            </Switch>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/common/color-picker/ColorPicker.jsx b/src/components/common/color-picker/ColorPicker.jsx
new file mode 100644
index 00000000..7e774259
--- /dev/null
+++ b/src/components/common/color-picker/ColorPicker.jsx
@@ -0,0 +1,11 @@
+import { HexColorPicker } from 'react-colorful'
+
+export default function ColorPicker(props) {
+  const { color, setColor } = props
+
+  return (
+    <>
+      <HexColorPicker color={color} onChange={setColor} />
+    </>
+  )
+}
diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
new file mode 100644
index 00000000..9654c514
--- /dev/null
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -0,0 +1,109 @@
+'use client'
+import { Children, useEffect, useState } from 'react'
+
+export default function QContextMenu(props) {
+  const { contextRef, canvasProps } = props
+
+  //   const children = useRecoilValue(modalContent)
+  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
+
+  const activeObject = canvasProps.getActiveObject() //액티브된 객체를 가져옴
+
+  let contextType = ''
+
+  if (activeObject) {
+    if (activeObject.initOptions && activeObject.initOptions.name) {
+      //이건 바뀔 가능성이 있음
+      if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
+        contextType = 'surface' //면형상
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!contextRef.current) return
+
+    const handleContextMenu = (e) => {
+      e.preventDefault() //기존 contextmenu 막고
+      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+    }
+
+    const handleClick = (e) => {
+      e.preventDefault()
+      setContextMenu({ ...contextMenu, visible: false })
+    }
+
+    const handleOutsideClick = (e) => {
+      e.preventDefault()
+      if (contextMenu.visible && !ref.current.contains(e.target)) {
+        setContextMenu({ ...contextMenu, visible: false })
+      }
+    }
+
+    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    document.addEventListener('click', handleClick)
+    document.addEventListener('click', handleOutsideClick)
+
+    return () => {
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('click', handleOutsideClick)
+    }
+  }, [contextRef, contextMenu])
+
+  const handleObjectMove = () => {
+    activeObject.set({
+      lockMovementX: false, // X 축 이동 잠금
+      lockMovementY: false, // Y 축 이동 잠금
+    })
+
+    canvasProps.on('object:modified', function (e) {
+      activeObject.set({
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
+      })
+    })
+  }
+
+  const handleObjectDelete = () => {
+    if (confirm('삭제하실거?')) {
+      canvasProps.remove(activeObject)
+    }
+  }
+
+  const handleObjectCopy = () => {
+    activeObject.clone((cloned) => {
+      cloned.set({
+        left: activeObject.left + activeObject.width + 20,
+        initOptions: { ...activeObject.initOptions },
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
+        lockRotation: true, // 회전 잠금
+        lockScalingX: true, // X 축 크기 조정 잠금
+        lockScalingY: true, // Y 축 크기 조정 잠금
+      })
+      canvasProps?.add(cloned)
+    })
+  }
+
+  return (
+    <>
+      {contextMenu.visible && (
+        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
+              이동
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
+              삭제
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
+              복사
+            </li>
+            {props.children}
+          </ul>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/common/context-menu/QEmptyContextMenu.jsx b/src/components/common/context-menu/QEmptyContextMenu.jsx
new file mode 100644
index 00000000..c4734fc4
--- /dev/null
+++ b/src/components/common/context-menu/QEmptyContextMenu.jsx
@@ -0,0 +1,50 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+export default function QEmptyContextMenu(props) {
+  const { contextRef, canvasProps } = props
+
+  //   const children = useRecoilValue(modalContent)
+  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
+
+  useEffect(() => {
+    if (!contextRef.current) return
+
+    const handleContextMenu = (e) => {
+      e.preventDefault() //기존 contextmenu 막고
+      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+    }
+
+    const handleClick = (e) => {
+      e.preventDefault()
+      setContextMenu({ ...contextMenu, visible: false })
+    }
+
+    const handleOutsideClick = (e) => {
+      e.preventDefault()
+      if (contextMenu.visible && !ref.current.contains(e.target)) {
+        setContextMenu({ ...contextMenu, visible: false })
+      }
+    }
+
+    // Prevent the default context menu from appearing on the canvas
+    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    document.addEventListener('click', handleClick)
+    document.addEventListener('click', handleOutsideClick)
+
+    return () => {
+      // canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu)
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('click', handleOutsideClick)
+    }
+  }, [contextRef, contextMenu])
+
+  const handleMenuClick = (option) => {
+    alert(`option ${option} clicked`)
+    setContextMenu({ ...contextMenu, visible: false })
+  }
+
+  return <></>
+}
diff --git a/src/components/common/context-menu/QLineContextMenu.jsx b/src/components/common/context-menu/QLineContextMenu.jsx
new file mode 100644
index 00000000..058c3b95
--- /dev/null
+++ b/src/components/common/context-menu/QLineContextMenu.jsx
@@ -0,0 +1,71 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+export default function QLineContextMenu(props) {
+  const { contextRef, canvasProps } = props
+
+  //   const children = useRecoilValue(modalContent)
+  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
+
+  useEffect(() => {
+    if (!contextRef.current) return
+
+    const handleContextMenu = (e) => {
+      e.preventDefault() //기존 contextmenu 막고
+      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+    }
+
+    const handleClick = (e) => {
+      e.preventDefault()
+      setContextMenu({ ...contextMenu, visible: false })
+    }
+
+    const handleOutsideClick = (e) => {
+      e.preventDefault()
+      if (contextMenu.visible && !ref.current.contains(e.target)) {
+        setContextMenu({ ...contextMenu, visible: false })
+      }
+    }
+
+    // Prevent the default context menu from appearing on the canvas
+    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    document.addEventListener('click', handleClick)
+    document.addEventListener('click', handleOutsideClick)
+
+    return () => {
+      // canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu)
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('click', handleOutsideClick)
+    }
+  }, [contextRef, contextMenu])
+
+  const handleMenuClick = (option) => {
+    alert(`option ${option} clicked`)
+    setContextMenu({ ...contextMenu, visible: false })
+  }
+
+  return (
+    <>
+      {contextMenu.visible && (
+        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
+              line
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
+              Option 1
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(2)}>
+              Option 2
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(3)}>
+              Option 3
+            </li>
+          </ul>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/common/context-menu/QPolygonContextMenu.jsx b/src/components/common/context-menu/QPolygonContextMenu.jsx
new file mode 100644
index 00000000..12f8e20b
--- /dev/null
+++ b/src/components/common/context-menu/QPolygonContextMenu.jsx
@@ -0,0 +1,20 @@
+'use client'
+import QContextMenu from './QContextMenu'
+
+export default function QPolygonContextMenu(props) {
+  const { contextRef, canvasProps } = props
+
+  function handleMenuClick(index) {
+    alert('test')
+  }
+
+  return (
+    <QContextMenu contextRef={contextRef} canvasProps={canvasProps}>
+      <>
+        <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(4)}>
+          모듈 채우기
+        </li>
+      </>
+    </QContextMenu>
+  )
+}
diff --git a/src/components/common/datepicker/RangeDatePicker.jsx b/src/components/common/datepicker/RangeDatePicker.jsx
index ad802f49..de80221f 100644
--- a/src/components/common/datepicker/RangeDatePicker.jsx
+++ b/src/components/common/datepicker/RangeDatePicker.jsx
@@ -14,6 +14,7 @@ export default function RangeDatePicker(props) {
         setDateRange(update)
       }}
       isClearable={true}
+      // showMonthYearPicker={true}
     />
   )
 }
diff --git a/src/components/common/draggable/withDraggable.jsx b/src/components/common/draggable/withDraggable.jsx
new file mode 100644
index 00000000..23195fbe
--- /dev/null
+++ b/src/components/common/draggable/withDraggable.jsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Draggable from 'react-draggable'
+
+export default function WithDraggable({ isShow, children, pos }) {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  const handleOnDrag = (e, data) => {
+    e.stopPropagation()
+    setPosition({ x: data.x, y: data.y })
+  }
+  useEffect(() => {
+    setPosition({ ...pos })
+  }, [])
+
+  return (
+    <>
+      {isShow && (
+        <Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)}>
+          {children}
+        </Draggable>
+      )}
+    </>
+  )
+}
diff --git a/src/components/common/grid/QGrid.jsx b/src/components/common/grid/QGrid.jsx
index 2611f078..99c3fd62 100644
--- a/src/components/common/grid/QGrid.jsx
+++ b/src/components/common/grid/QGrid.jsx
@@ -7,7 +7,6 @@ import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-quartz.css'
 
 export default function QGrid(props) {
-  console.log('QGrid props:', props)
   const { gridData, gridColumns, isPageable = true } = props
   const [count, setCount] = useState(0)
   const [clickedCount, setClickedCount] = useState(0)
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
new file mode 100644
index 00000000..d0538f1d
--- /dev/null
+++ b/src/components/common/select/QSelectBox.jsx
@@ -0,0 +1,29 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+export default function QSelectBox({ title = '', options, onChange, value }) {
+  const [openSelect, setOpenSelect] = useState(false)
+  const [selected, setSelected] = useState(title === '' ? options[0].name : title)
+
+  const handleClickSelectOption = (option) => {
+    setSelected(option.name)
+    onChange?.(option)
+  }
+
+  useEffect(() => {
+    value && handleClickSelectOption(value)
+  }, [value])
+
+  return (
+    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
+      <p>{selected}</p>
+      <ul className="select-item-wrap">
+        {options?.map((option) => (
+          <li key={option.id} className="select-item" onClick={() => handleClickSelectOption(option)}>
+            <button>{option.name}</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/components/fabric/HelpLine.js b/src/components/fabric/HelpLine.js
deleted file mode 100644
index 68112099..00000000
--- a/src/components/fabric/HelpLine.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { fabric } from 'fabric'
-
-export class QLine extends fabric.Group {
-  line
-  text
-  fontSize
-  length = 0
-  x1
-  y1
-  x2
-  y2
-  direction
-  type = 'HelpLine'
-  parent
-  #lengthTxt = 0
-
-  constructor(points, option, lengthTxt) {
-    const [x1, y1, x2, y2] = points
-
-    if (!option.fontSize) {
-      throw new Error('Font size is required.')
-    }
-
-    const line = new fabric.Line(points, { ...option, strokeWidth: 1 })
-    super([line], {})
-
-    this.x1 = x1
-    this.y1 = y1
-    this.x2 = x2
-    this.y2 = y2
-    this.line = line
-    this.fontSize = option.fontSize
-    this.direction = option.direction
-    this.parent = option.parent
-
-    if (lengthTxt > 0) {
-      this.#lengthTxt = Number(lengthTxt)
-    }
-
-    this.#init()
-    this.#addControl()
-  }
-
-  #init() {
-    this.#addLengthText(true)
-  }
-
-  #addControl() {
-    this.on('moving', () => {
-      this.#addLengthText(false)
-    })
-
-    this.on('modified', (e) => {
-      this.#addLengthText(false)
-    })
-
-    this.on('selected', () => {
-      Object.keys(this.controls).forEach((controlKey) => {
-        if (controlKey !== 'ml' && controlKey !== 'mr') {
-          this.setControlVisible(controlKey, false)
-        }
-      })
-    })
-  }
-
-  #addLengthText(isFirst) {
-    if (this.text) {
-      this.removeWithUpdate(this.text)
-      this.text = null
-    }
-
-    if (isFirst && this.#lengthTxt > 0) {
-      const text = new fabric.Textbox(this.#lengthTxt.toFixed(0).toString(), {
-        left: (this.x1 + this.x2) / 2,
-        top: (this.y1 + this.y2) / 2,
-        fontSize: this.fontSize,
-      })
-      this.length = this.#lengthTxt
-      this.text = text
-      this.addWithUpdate(text)
-      return
-    }
-
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-    const x1 = this.left
-    const y1 = this.top
-    const x2 = this.left + this.width * scaleX
-    const y2 = this.top + this.height * scaleY
-    const dx = x2 - x1
-    const dy = y2 - y1
-    this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
-
-    const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
-      left: (x1 + x2) / 2,
-      top: (y1 + y2) / 2,
-      fontSize: this.fontSize,
-    })
-    this.text = text
-    this.addWithUpdate(text)
-  }
-
-  setFontSize(fontSize) {
-    this.fontSize = fontSize
-    this.text.set({ fontSize })
-    this.addWithUpdate()
-  }
-}
diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js
index 0d05a959..da141287 100644
--- a/src/components/fabric/QLine.js
+++ b/src/components/fabric/QLine.js
@@ -1,6 +1,6 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
-import { getDirection } from '@/util/canvas-util'
+import { getDirectionByPoint } from '@/util/canvas-util'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -11,6 +11,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   direction: null,
   idx: 0,
   area: 0,
+  children: [],
   initialize: function (points, options, canvas) {
     this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? false })
     if (options.id) {
@@ -28,7 +29,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
 
     this.setLength()
 
-    this.direction = options.direction ?? getDirection({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
+    this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
     this.startPoint = { x: this.x1, y: this.y1 }
     this.endPoint = { x: this.x2, y: this.y2 }
 
@@ -51,6 +52,8 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     })
 
     this.on('modified', (e) => {
+      this.startPoint = { x: this.x1, y: this.y1 }
+      this.endPoint = { x: this.x2, y: this.y2 }
       this.addLengthText()
     })
 
@@ -91,13 +94,38 @@ export const QLine = fabric.util.createClass(fabric.Line, {
       this.text = thisText
       return
     }
+    let left, top
+    if (this.direction === 'left' || this.direction === 'right') {
+      left = (x1 + x2) / 2
+      top = (y1 + y2) / 2 + 10
+    } else if (this.direction === 'top' || this.direction === 'bottom') {
+      left = (x1 + x2) / 2 + 10
+      top = (y1 + y2) / 2
+    }
+
+    const minX = this.left
+    const maxX = this.left + this.width
+    const minY = this.top
+    const maxY = this.top + this.length
+    const degree = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI
 
     const text = new fabric.Textbox(this.length.toFixed(0).toString(), {
-      left: (x1 + x2) / 2,
-      top: (y1 + y2) / 2,
+      left: left,
+      top: top,
       fontSize: this.fontSize,
-      selectable: false,
+      minX,
+      maxX,
+      minY,
+      maxY,
+      parentDirection: this.direction,
+      parentDegree: degree,
       parentId: this.id,
+      editable: false,
+      selectable: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      parent: this,
       name: 'lengthText',
     })
 
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index b2586724..84e57974 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -2,7 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawHippedRoof, inPolygon, lineIntersect, splitPolygonWithLines, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -17,6 +17,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   cells: [],
   parentId: null,
   innerLines: [],
+  children: [],
+  initOptions: null,
+  direction: null,
+  arrow: null,
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {
@@ -57,6 +61,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       this.canvas = canvas
     }
 
+    this.initOptions = options
+
     this.init()
     this.initLines()
     this.setShape()
@@ -96,6 +102,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
   toObject: function (propertiesToInclude) {
     return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
+      id: this.id,
       type: this.type,
       text: this.text,
       hips: this.hips,
@@ -112,9 +119,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
     this.on('modified', (e) => {
       this.addLengthText()
+      if (this.arrow) {
+        drawDirectionArrow(this)
+      }
     })
 
     this.on('selected', () => {
+      drawDirectionArrow(this)
       Object.keys(this.controls).forEach((controlKey) => {
         if (controlKey !== 'ml' && controlKey !== 'mr') {
           this.setControlVisible(controlKey, false)
@@ -128,7 +139,20 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         this.canvas.remove(text)
       })
       this.texts = null
+
+      if (this.arrow) {
+        this.canvas.remove(this.arrow)
+        this.canvas
+          .getObjects()
+          .filter((obj) => obj.name === 'directionText' && obj.parent === this.arrow)
+          .forEach((text) => {
+            this.canvas.remove(text)
+          })
+        this.arrow = null
+      }
     })
+
+    // polygon.fillCell({ width: 50, height: 30, padding: 10 })
   },
 
   initLines() {
@@ -156,36 +180,46 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
 
   addLengthText() {
+    this.canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'lengthText' && obj.parent === this)
+      .forEach((text) => {
+        this.canvas.remove(text)
+      })
+
     let points = this.getCurrentPoints()
 
     points.forEach((start, i) => {
-      const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === i)
-
       const end = points[(i + 1) % points.length]
       const dx = end.x - start.x
       const dy = end.y - start.y
       const length = Math.sqrt(dx * dx + dy * dy)
 
-      if (thisText) {
-        thisText.set({
-          left: (start.x + points[(i + 1) % points.length].x) / 2,
-          top: (start.y + points[(i + 1) % points.length].y) / 2,
-          text: length.toFixed(0),
-        })
-        return
-      }
-
       const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
 
+      const degree = (Math.atan2(dy, dx) * 180) / Math.PI
+
       // Create new text object if it doesn't exist
-      const text = new fabric.Text(length.toFixed(0), {
+      const text = new fabric.IText(length.toFixed(0), {
         left: midPoint.x,
         top: midPoint.y,
         fontSize: this.fontSize,
-        selectable: false,
         parentId: this.id,
+        minX: Math.min(start.x, end.x),
+        maxX: Math.max(start.x, end.x),
+        minY: Math.min(start.y, end.y),
+        maxY: Math.max(start.y, end.y),
+        parentDirection: getDirectionByPoint(start, end),
+        parentDegree: degree,
+        dirty: true,
+        editable: true,
+        selectable: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
         idx: i,
         name: 'lengthText',
+        parent: this,
       })
 
       this.texts.push(text)
@@ -195,7 +229,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   },
   setFontSize(fontSize) {
     this.fontSize = fontSize
-    this.text.set({ fontSize })
+    this.canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'lengthText' && obj.parent === this)
+      .forEach((text) => {
+        text.set({ fontSize: fontSize })
+      })
   },
   _render: function (ctx) {
     this.callSuper('_render', ctx)
@@ -262,6 +301,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             name: 'cell',
             idx: idx,
             parentId: this.id,
+            parent: this,
           })
 
           idx++
@@ -274,7 +314,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.cells = drawCellsArray
     return drawCellsArray
   },
-  fillCellABType(cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1 }) {
+  fillCellABType(
+    cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1, isCellCenter: false },
+  ) {
     const points = this.points
 
     const minX = Math.min(...points.map((p) => p.x)) //왼쪽
@@ -451,9 +493,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         } else {
           // centerWidth = 0 //나중에 중간 정렬 이면 어쩌구 함수 만들어서 넣음
           if (['left', 'right'].includes(cell.wallDirection)) {
-            centerWidth = 0
+            centerWidth = cell.isCellCenter ? centerWidth : 0
           } else if (['top', 'bottom'].includes(cell.wallDirection)) {
-            centerHeight = 0
+            centerHeight = cell.isCellCenter ? centerHeight : 0
           }
 
           if (cell.wallDirection === 'left') {
@@ -528,7 +570,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             type: 'cellRect',
           })
 
-          var group = new fabric.Group([rect, text], {
+          const group = new fabric.Group([rect, text], {
             left: startXPos,
             top: startYPos,
           })
@@ -672,11 +714,22 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.wall = wall
   },
   setViewLengthText(isView) {
-    this.texts.forEach((text) => {
-      text.set({ visible: isView })
-    })
+    this.canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'lengthText' && obj.parent === this)
+      .forEach((text) => {
+        text.set({ visible: isView })
+      })
+  },
+  setScaleX(scale) {
+    this.scaleX = scale
+    this.addLengthText()
+  },
+  setScaleY(scale) {
+    this.scaleY = scale
+    this.addLengthText()
   },
   divideLine() {
-    splitPolygonWithLines(this)
+    // splitPolygonWithLines(this)
   },
 })
diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
new file mode 100644
index 00000000..9c8c9d38
--- /dev/null
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+import { useCanvas } from '@/hooks/useCanvas'
+import { useEvent } from '@/hooks/useEvent'
+
+export default function CanvasFrame({ plan }) {
+  const canvasRef = useRef(null)
+  const { canvas } = useCanvas('canvas')
+  useEvent()
+
+  const loadCanvas = () => {
+    if (canvas) {
+      canvas?.clear() // 캔버스를 초기화합니다.
+      if (plan?.canvasStatus) {
+        canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
+          canvas?.renderAll() // 캔버스를 다시 그립니다.
+        })
+      }
+    }
+  }
+
+  useEffect(() => {
+    loadCanvas()
+  }, [plan])
+
+  return (
+    <div className="canvas-frame flex justify-center">
+      <canvas ref={canvasRef} id={'canvas'}></canvas>
+    </div>
+  )
+}
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
new file mode 100644
index 00000000..5d3817a2
--- /dev/null
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import CanvasFrame from './CanvasFrame'
+import { usePlan } from '@/hooks/usePlan'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+
+export default function CanvasLayout() {
+  const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
+  const [addCanvasPlans, setAddCanvasPlans] = useState([])
+  const [planNum, setPlanNum] = useState(0)
+  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { getCanvasByObjectNo } = usePlan()
+
+  const handleCurrentPlan = (newCurrentId) => {
+    if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
+      setInitCanvasPlans((plans) =>
+        plans.map((plan) => {
+          return { ...plan, isCurrent: plan.id === newCurrentId }
+        }),
+      )
+      setAddCanvasPlans((plans) =>
+        plans.map((plan) => {
+          return { ...plan, isCurrent: plan.id === newCurrentId }
+        }),
+      )
+    }
+  }
+  useEffect(() => {
+    setCurrentCanvasPlan([...initCanvasPlans, ...addCanvasPlans].find((plan) => plan.isCurrent) || null)
+  }, [initCanvasPlans, addCanvasPlans])
+
+  const handleDeletePlan = (e, id) => {
+    e.stopPropagation() // 이벤트 버블링 방지
+
+    // 삭제할 아이디와 다른 아이템만 남김
+    const filterInitPlans = initCanvasPlans.filter((plan) => plan.id !== id)
+    setInitCanvasPlans(filterInitPlans)
+    const filterAddPlans = addCanvasPlans.filter((plan) => plan.id !== id)
+    setAddCanvasPlans(filterAddPlans)
+
+    const combinedPlans = [...filterInitPlans, ...filterAddPlans]
+    if (combinedPlans.length === 0) {
+      // 모든 데이터가 삭제된 경우
+      setPlanNum(0)
+    } else {
+      const lastPlanId = combinedPlans.at(-1).id
+      if (id !== lastPlanId) {
+        handleCurrentPlan(lastPlanId)
+      }
+    }
+  }
+
+  const addNewPlan = () => {
+    setAddCanvasPlans([...addCanvasPlans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
+    handleCurrentPlan(planNum)
+    setPlanNum(planNum + 1)
+  }
+
+  useEffect(() => {
+    getCanvasByObjectNo(objectNo).then((res) => {
+      console.log('canvas 목록 ', res)
+      if (res.length > 0) {
+        setInitCanvasPlans(res)
+        handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
+        setPlanNum(res.length)
+      } else {
+        addNewPlan()
+      }
+    })
+  }, [])
+
+  return (
+    <div className="canvas-layout">
+      <div className="canvas-page-list">
+        <div className="canvas-plane-wrap">
+          {[...initCanvasPlans, ...addCanvasPlans].map((plan) => (
+            <button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
+              <span>{plan.name}</span>
+              <i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
+            </button>
+          ))}
+        </div>
+        <button className="plane-add" onClick={addNewPlan}>
+          <span></span>
+        </button>
+      </div>
+      <CanvasFrame plan={[...initCanvasPlans, ...addCanvasPlans].find((plan) => plan.isCurrent === true)} />
+    </div>
+  )
+}
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
new file mode 100644
index 00000000..99b3e048
--- /dev/null
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -0,0 +1,197 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+
+import MenuDepth01 from './MenuDepth01'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+import { useMessage } from '@/hooks/useMessage'
+import { usePlan } from '@/hooks/usePlan'
+import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import { sessionStore } from '@/store/commonAtom'
+import { outerLinePointsState } from '@/store/outerLineAtom'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
+import { MENU } from '@/common/common'
+
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
+
+const canvasMenus = [
+  { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
+  { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01', title: MENU.INITIAL_CANVAS_SETTING },
+  { index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
+  { index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
+  { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
+  { index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
+  { index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
+]
+
+export default function CanvasMenu(props) {
+  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
+
+  const [menuNumber, setMenuNumber] = useState(null)
+  const [type, setType] = useState('')
+
+  const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
+  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const setPoints = useSetRecoilState(outerLinePointsState)
+  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
+
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const canvas = useRecoilValue(canvasState)
+  const sessionState = useRecoilValue(sessionStore)
+
+  const { getMessage } = useMessage()
+  const { saveCanvas } = usePlan()
+
+  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
+  const onClickNav = (menu) => {
+    setMenuNumber(menu.index)
+    setCurrentMenu(menu.title)
+
+    switch (menu.index) {
+      case 2:
+        setType('outline')
+        break
+      case 3:
+        setType('surface')
+        break
+      case 4:
+        setType('module')
+        break
+    }
+  }
+  const menuProps = {
+    setShowOutlineModal,
+    type,
+  }
+
+  const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
+
+  useEffect(() => {
+    if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false)
+  }, [menuNumber, type])
+
+  // 저장버튼(btn08) 클릭 시 호출되는 함수
+  const handleSaveCanvas = () => {
+    saveCanvas(sessionState.userId)
+  }
+
+  const handleClear = () => {
+    setPoints([])
+    canvas?.clear()
+  }
+
+  const handleZoomClear = () => {
+    setCanvasZoom(100)
+    canvas.set({ zoom: 1 })
+    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    canvas.renderAll()
+  }
+
+  useEffect(() => {
+    if (globalLocale === 'ko') {
+      setAppMessageState(KO)
+    } else {
+      setAppMessageState(JA)
+    }
+  }, [menuNumber, type, globalLocale])
+
+  return (
+    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+      <div className="canvas-menu-inner">
+        <ul className="canvas-menu-list">
+          {canvasMenus.map((menu) => {
+            return (
+              <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu)}>
+                <button>
+                  <span className={`menu-icon ${menu.icon}`}></span>
+                  {getMessage(menu.name)}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+        <div className="canvas-side-btn-wrap">
+          {menuNumber !== 6 && menuNumber !== 5 && (
+            <>
+              {
+                <div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
+                  <span>{getMessage('plan.mode.vertical.horizontal')}</span>
+                  <button onClick={() => setVerticalHorizontalMode(!verticalHorizontalMode)}>{verticalHorizontalMode ? 'ON' : 'OFF'}</button>
+                </div>
+              }
+              <div className="btn-from">
+                <button className="btn01"></button>
+                <button className="btn02 active"></button>
+                <button className="btn03 "></button>
+              </div>
+              <div className="select-box">
+                <QSelectBox title={'瓦53A'} option={SelectOption} />
+              </div>
+              <div className="btn-from">
+                <button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>
+                <button className="btn05"></button>
+                <button className="btn06"></button>
+              </div>
+              <div className="size-control">
+                <button className="control-btn minus"></button>
+                <span>{canvasZoom}%</span>
+                <button className="control-btn plus" onClick={handleZoomClear}></button>
+              </div>
+              <div className="btn-from">
+                <button className="btn07" onClick={handleClear}></button>
+                <button className="btn08" onClick={handleSaveCanvas}></button>
+                <button className="btn09"></button>
+              </div>
+            </>
+          )}
+
+          {menuNumber === 5 && (
+            <>
+              <div className="ico-btn-from">
+                <button className="btn-frame gray ico-flx act">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.estimate.roof.alloc')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico02"></span>
+                  <span>{getMessage('plan.menu.estimate.save')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico03"></span>
+                  <span>{getMessage('plan.menu.estimate.reset')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico04"></span>
+                  <span>{getMessage('plan.menu.estimate.copy')}</span>
+                </button>
+              </div>
+            </>
+          )}
+          {menuNumber === 6 && (
+            <>
+              <div className="ico-btn-from">
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.simulation.excel')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.simulation.pdf')}</span>
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+        {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 {...menuProps} />}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
new file mode 100644
index 00000000..c610948f
--- /dev/null
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import '@/styles/contents.scss'
+import CanvasMenu from '@/components/floor-plan/CanvasMenu'
+import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
+import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
+import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
+
+export default function FloorPlan() {
+  const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
+  const [showOutlineModal, setShowOutlineModal] = useState(false)
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get } = useAxios(globalLocaleState)
+
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+
+  const [showDotLineGridModal, setShowDotLineGridModal] = useState(true)
+  const [showGridCopyModal, setShowGridCopyModal] = useState(false)
+  const [showGridMoveModal, setShowGridMoveModal] = useState(false)
+  const canvasSettingProps = {
+    setShowCanvasSettingModal,
+    setShowDotLineGridModal,
+  }
+
+  const outlineProps = {
+    setShowOutlineModal,
+  }
+
+  const modalProps = {
+    setShowCanvasSettingModal,
+    showOutlineModal,
+    setShowOutlineModal,
+  }
+
+  useEffect(() => {
+    console.log('FloorPlan useEffect 실행')
+    fetchSettings()
+  }, [showOutlineModal, objectNo])
+
+  // Canvas Setting 조회
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
+      // 데이터 설정
+      setSettingModalFirstOptions({
+        option1: optionData1,
+        option2: optionData2,
+        dimensionDisplay: optionData5,
+      })
+      setSettingModalSecondOptions({
+        option3: optionData3,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+  const dotLineProps = {
+    showDotLineGridModal,
+    setShowDotLineGridModal,
+  }
+
+  useEffect(() => {}, [showOutlineModal])
+
+  return (
+    <>
+      <div className="canvas-wrap">
+        <CanvasMenu {...modalProps} />
+        <div className="canvas-content">
+          <CanvasLayout />
+          {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
+          {showOutlineModal && <OuterLineWall {...outlineProps} />}
+          {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
new file mode 100644
index 00000000..a6b12877
--- /dev/null
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { useMessage } from '@/hooks/useMessage'
+import { useEffect, useState } from 'react'
+import { MENU } from '@/common/common'
+import { currentMenuState } from '@/store/canvasAtom'
+import { useSetRecoilState } from 'recoil'
+
+export default function MenuDepth01(props) {
+  const { setShowOutlineModal, type } = props
+  const { getMessage } = useMessage()
+  const [activeMenu, setActiveMenu] = useState()
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const onClickMenu = ({ id, menu, name }) => {
+    setActiveMenu(menu)
+    setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
+    setCurrentMenu(menu)
+    if (type === 'outline') {
+      setShowOutlineModal(id === 0)
+    }
+  }
+
+  useEffect(() => {
+    setActiveMenu(null)
+  }, [type])
+
+  const menuInfo = {
+    outline: [
+      // 지붕덮개
+      { id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },
+      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting', menu: MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS },
+      {
+        id: 2,
+        name: 'plan.menu.roof.cover.roof.shape.passivity.setting',
+        menu: MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS,
+      },
+      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
+      { id: 4, name: 'plan.menu.roof.cover.eaves.kerava.edit', menu: MENU.ROOF_COVERING.EAVES_KERAVA_EDIT },
+      { id: 5, name: 'plan.menu.roof.cover.movement.shape.updown', menu: MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN },
+      { id: 6, name: 'plan.menu.roof.cover.outline.edit.offset', menu: MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET },
+      { id: 7, name: 'plan.menu.roof.cover.roof.surface.alloc', menu: MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC },
+    ],
+    surface: [
+      // 배치면
+      { id: 0, name: 'plan.menu.placement.surface.slope.setting', menu: MENU.BATCH_CANVAS.SLOPE_SETTING },
+      { id: 1, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
+      { id: 2, name: 'plan.menu.placement.surface.arrangement', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
+      { id: 3, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
+      { id: 4, name: 'plan.menu.placement.surface.all.remove', menu: MENU.BATCH_CANVAS.ALL_REMOVE },
+    ],
+    module: [
+      // 모듈, 회로 구성
+
+      { id: 0, name: 'plan.menu.module.circuit.setting.default', menu: MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING },
+      {
+        id: 1,
+        name: 'plan.menu.module.circuit.setting.circuit.trestle.setting',
+        menu: MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
+      },
+      {
+        id: 2,
+        name: 'plan.menu.module.circuit.setting.plan.orientation',
+        menu: MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
+      },
+    ],
+  }
+  return (
+    <div className="canvas-depth2-inner">
+      <ul className="canvas-depth2-list">
+        {menuInfo[type].map((menu) => {
+          return (
+            <li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
+              <button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/components/floor-plan/RoofCoveringMenu.jsx b/src/components/floor-plan/RoofCoveringMenu.jsx
new file mode 100644
index 00000000..26da4bda
--- /dev/null
+++ b/src/components/floor-plan/RoofCoveringMenu.jsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { useMessage } from '@/hooks/useMessage'
+import { useRecoilState, useSetRecoilState } from 'recoil'
+import { currentMenuState } from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
+import { modalState } from '@/store/modalAtom'
+import { ToggleonMouse } from '@/components/header/Header'
+
+export default function RoofCoveringMenu() {
+  const { getMessage } = useMessage()
+  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
+
+  const setModalState = useSetRecoilState(modalState)
+
+  const onClickNav = (menu) => {
+    setCurrentMenu(menu)
+    if (menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) {
+      setModalState((prev) => ({ ...prev, outerwall: true }))
+    } else {
+      setModalState((prev) => ({ ...prev, outerwall: false }))
+    }
+  }
+
+  return (
+    <div className="canvas-depth2-inner">
+      <ul className="canvas-depth2-list">
+        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE ? 'active' : ''}`}>
+          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)}>{getMessage('plan.menu.root.cover.outline.drawing')}</button>
+        </li>
+        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS ? 'active' : ''}`}>
+          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS)}>{getMessage('plan.menu.root.cover.roof.setting')}</button>
+        </li>
+        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.ROOF_SHAPE_EDITING ? 'active' : ''}`}>
+          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.ROOF_SHAPE_EDITING)}>{getMessage('plan.menu.root.cover.roof.edit')}</button>
+        </li>
+        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.HELP_LINE_DRAWING ? 'active' : ''}`}>
+          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.HELP_LINE_DRAWING)}>{getMessage('plan.menu.root.cover.sub.line')}</button>
+        </li>
+      </ul>
+      <ul className="canvas-depth2-btn-list">
+        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
+          <button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
+        </li>
+        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
+          <button>屋根材の設定と変更</button>
+        </li>
+        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
+          <button>屋根面全体削除</button>
+        </li>
+      </ul>
+    </div>
+  )
+}
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
new file mode 100644
index 00000000..d0e06fa9
--- /dev/null
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -0,0 +1,328 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { onlyNumberInputChange } from '@/util/input-utils'
+import { fabric } from 'fabric'
+import { gridColorState } from '@/store/gridAtom'
+
+const TYPE = {
+  DOT: 'DOT',
+  LINE: 'LINE',
+}
+
+export default function DotLineGrid(props) {
+  // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
+  const [close, setClose] = useState(false)
+  const { setShowDotLineGridModal } = props
+  const gridColor = useRecoilValue(gridColorState)
+  const canvas = useRecoilValue(canvasState)
+
+  const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
+  const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
+  const interval = useRecoilValue(dotLineIntervalSelector)
+
+  const { getMessage } = useMessage()
+  const SelectOption = [
+    { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
+    { id: 2, name: '1/2', value: 1 / 2 },
+    {
+      id: 3,
+      name: '1/4',
+      value: 1 / 4,
+    },
+    { id: 4, name: '1/10', value: 1 / 10 },
+  ]
+  const [selectOption, setSelectOption] = useState(SelectOption[0])
+
+  const HandleClickClose = () => {
+    // setClose(true)
+    // setTimeout(() => {
+    //   setModalOption({ ...modalOption, gridoption: false })
+    //   setClose(false)
+    // }, 180)
+  }
+
+  const handleCheckBoxChange = (e) => {
+    const { value, checked } = e.target
+    setDotLineGridSettingState((prev) => {
+      return {
+        ...prev,
+        [value]: checked,
+      }
+    })
+  }
+
+  const handleSave = () => {
+    // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'lineGrid')
+      .forEach((obj) => canvas?.remove(obj))
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'dotGrid')
+      .forEach((obj) => canvas?.remove(obj))
+
+    const horizontalInterval = interval.horizontalInterval
+    const verticalInterval = interval.verticalInterval
+
+    if (dotLineGridSetting.DOT) {
+      const circle = new fabric.Circle({
+        radius: 2,
+        fill: 'red',
+        strokeWidth: 0.7,
+        originX: 'center',
+        originY: 'center',
+        selectable: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+      })
+
+      const patternSourceCanvas = new fabric.StaticCanvas(null, {
+        width: horizontalInterval,
+        height: verticalInterval,
+      })
+
+      patternSourceCanvas.add(circle)
+
+      circle.set({
+        left: patternSourceCanvas.width / 2,
+        top: patternSourceCanvas.height / 2,
+      })
+
+      patternSourceCanvas.renderAll()
+
+      const pattern = new fabric.Pattern({
+        source: patternSourceCanvas.getElement(),
+        repeat: 'repeat',
+      })
+
+      const backgroundPolygon = new fabric.Polygon(
+        [
+          { x: 0, y: 0 },
+          { x: canvas.width, y: 0 },
+          { x: canvas.width, y: canvas.height },
+          { x: 0, y: canvas.height },
+        ],
+        {
+          fill: pattern,
+          selectable: false,
+          name: 'dotGrid',
+        },
+      )
+
+      canvas.add(backgroundPolygon)
+      backgroundPolygon.sendToBack()
+      canvas.renderAll()
+    }
+
+    if (dotLineGridSetting.LINE) {
+      for (let i = 0; i < canvas.height / verticalInterval + 1; i++) {
+        const horizontalLine = new fabric.Line(
+          [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2],
+          {
+            stroke: gridColor,
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'lineGrid',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
+            direction: 'horizontal',
+          },
+        )
+        canvas.add(horizontalLine)
+      }
+
+      for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) {
+        const verticalLine = new fabric.Line(
+          [i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height],
+          {
+            stroke: 'black',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'lineGrid',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
+            direction: 'vertical',
+          },
+        )
+        canvas.add(verticalLine)
+      }
+    }
+
+    canvas.renderAll()
+  }
+
+  const handleRadioChange = (e) => {
+    const { value, name, checked, selected } = e.target
+
+    setDotLineGridSettingState((prev) => {
+      return {
+        ...prev,
+        INTERVAL: {
+          ...prev.INTERVAL,
+          type: Number(value),
+        },
+      }
+    })
+  }
+
+  const changeInput = (value, e) => {
+    const { name } = e.target
+    setDotLineGridSettingState((prev) => {
+      return {
+        ...prev,
+        INTERVAL: {
+          ...prev.INTERVAL,
+          [name]: value,
+        },
+      }
+    })
+  }
+
+  const changeDimension = (result) => {
+    const { value } = result
+    setDotLineGridSettingState((prev) => {
+      return {
+        ...prev,
+        INTERVAL: {
+          ...prev.INTERVAL,
+          dimension: value,
+        },
+      }
+    })
+  }
+
+  // 초기화
+  const reset = () => {
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'lineGrid')
+      .forEach((obj) => canvas?.remove(obj))
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'dotGrid')
+      .forEach((obj) => canvas?.remove(obj))
+    resetDotLineGridSetting()
+    setSelectOption(SelectOption[0])
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: -150, y: 300 }}>
+      <div className={`modal-pop-wrap ssm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
+          <button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-check-form">
+            <div className="d-check-box pop">
+              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={dotLineGridSetting.DOT} />
+              <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
+            </div>
+            <div className="d-check-box pop">
+              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={dotLineGridSetting.LINE} />
+              <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
+            </div>
+          </div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="d-check-radio pop no-text">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  value={1}
+                  onChange={handleRadioChange}
+                  checked={dotLineGridSetting.INTERVAL.type === 1}
+                />
+                <label htmlFor="ra01"></label>
+              </div>
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</span>
+                <div className="input-grid mr5">
+                  <input
+                    type="text"
+                    className="input-origin"
+                    name={`horizontalInterval`}
+                    value={dotLineGridSetting.INTERVAL.horizontalInterval}
+                    onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                  />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
+                <div className="input-grid mr5">
+                  <input
+                    type="text"
+                    className="input-origin"
+                    name={`verticalInterval`}
+                    value={dotLineGridSetting.INTERVAL.verticalInterval}
+                    onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                  />
+                </div>
+                <span>mm</span>
+              </div>
+            </div>
+            <div className="grid-option-box">
+              <div className="d-check-radio pop no-text">
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  value={2}
+                  onChange={handleRadioChange}
+                  checked={dotLineGridSetting.INTERVAL.type === 2}
+                />
+                <label htmlFor="ra02"></label>
+              </div>
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</span>
+                <div className="input-grid mr5">
+                  <input
+                    type="text"
+                    className="input-origin"
+                    name={`ratioInterval`}
+                    value={dotLineGridSetting.INTERVAL.ratioInterval}
+                    onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                  />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-select">
+                <QSelectBox options={SelectOption} onChange={changeDimension} value={selectOption} />
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={reset}>
+              {getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}
+            </button>
+            <button className="btn-frame modal act" onClick={handleSave}>
+              {getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx
new file mode 100644
index 00000000..92609d80
--- /dev/null
+++ b/src/components/floor-plan/modal/grid/GridCopy.jsx
@@ -0,0 +1,43 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function GridCopy(props) {
+  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const { getMessage } = useMessage()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: 380 }}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.grid.copy')} </h1>
+          <button className="modal-close" onClick={() => setShowGridCopyModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('modal.grid.copy.length')}</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={910} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-direction">
+                <button className="direction up"></button>
+                <button className="direction down act"></button>
+                <button className="direction left"></button>
+                <button className="direction right"></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.grid.copy.save')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx
new file mode 100644
index 00000000..1da8b6fa
--- /dev/null
+++ b/src/components/floor-plan/modal/grid/GridMove.jsx
@@ -0,0 +1,55 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function GridMove(props) {
+  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const { getMessage } = useMessage()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.grid.move')} </h1>
+          <button className="modal-close" onClick={() => setShowGridMoveModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="d-check-box pop mb10">
+              <input type="checkbox" id="ch99" />
+              <label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
+            </div>
+            <div className="grid-option-box">
+              <div className="move-form">
+                <p className="mb5">{getMessage('modal.grid.move.length')}</p>
+                <div className="input-move-wrap mb5">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </div>
+                <div className="input-move-wrap">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </div>
+              </div>
+              <div className="direction-move-wrap">
+                <button className="direction up"></button>
+                <button className="direction down act"></button>
+                <button className="direction left"></button>
+                <button className="direction right"></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.grid.move.save')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
new file mode 100644
index 00000000..6e9f1c34
--- /dev/null
+++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
@@ -0,0 +1,154 @@
+'use client'
+
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
+import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
+
+export default function OuterLineWall(props) {
+  const { setShowOutlineModal } = props
+  const { getMessage } = useMessage()
+  const { points, length1, setLength1, length2, setLength2, length1Ref, length2Ref, arrow1, arrow2, type, setType, handleFix, handleRollback } =
+    useOuterLineWall()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
+      <div className={`modal-pop-wrap ssm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
+          <button className="modal-close" onClick={() => setShowOutlineModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            <button
+              className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
+              onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
+            >
+              {getMessage('modal.cover.outline')}
+            </button>
+
+            <button
+              className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
+              onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
+            >
+              {getMessage('modal.cover.outline.right.angle')}
+            </button>
+            <button
+              className={`btn-frame modal ${type === OUTER_LINE_TYPE.LEE_GUBAE ? 'act' : ''}`}
+              onClick={() => setType(OUTER_LINE_TYPE.LEE_GUBAE)}
+            >
+              {getMessage('modal.cover.outline2')}
+            </button>
+            <button className={`btn-frame modal ${type === OUTER_LINE_TYPE.ANGLE ? 'act' : ''}`} onClick={() => setType(OUTER_LINE_TYPE.ANGLE)}>
+              {getMessage('modal.cover.outline.angle')}
+            </button>
+            <button
+              className={`btn-frame modal ${type === OUTER_LINE_TYPE.DIAGONAL_LINE ? 'act' : ''}`}
+              onClick={() => setType(OUTER_LINE_TYPE.DIAGONAL_LINE)}
+            >
+              {getMessage('modal.cover.outline.diagonal')}
+            </button>
+          </div>
+          <div className="modal-check-btn-wrap">
+            <h3 className="check-wrap-title">{getMessage('modal.cover.outline.setting')}</h3>
+            {type === OUTER_LINE_TYPE.OUTER_LINE ? (
+              <div className="outer-line-wrap">
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    value={length1}
+                    ref={length1Ref}
+                    onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                    placeholder="3000"
+                  />
+                </div>
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
+                  <input type="text" readOnly={true} value={arrow1} className="input-origin block" />
+                </div>
+              </div>
+            ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
+              <div className="outer-line-wrap">
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    value={length1}
+                    ref={length1Ref}
+                    onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                    placeholder="3000"
+                  />
+                </div>
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
+                  <input type="text" readOnly={true} value={arrow1} className="input-origin block" />
+                </div>
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    value={length2}
+                    ref={length2Ref}
+                    onChange={(e) => onlyNumberInputChange(e, setLength2)}
+                    placeholder="3000"
+                  />
+                </div>
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
+                  <input type="text" readOnly={true} value={arrow2} className="input-origin block" />
+                </div>
+              </div>
+            ) : type === OUTER_LINE_TYPE.ANGLE ? (
+              <div className="outer-line-wrap">
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    value={length1}
+                    ref={length1Ref}
+                    onChange={(e) => onlyNumberInputChange(e, setLength1)}
+                    placeholder="3000"
+                  />
+                </div>
+                <div className="form-input">
+                  <label htmlFor="">{getMessage('modal.cover.outline.angle')}</label>
+                  <input
+                    type="text"
+                    value={angle1}
+                    ref={angle1Ref}
+                    onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
+                    className="input-origin block"
+                  />
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+            <div className="flex-check-box for2 btn">
+              <button className={`arr-btn dark ${points.length >= 3 ? 'act' : ''}`} onClick={handleFix}>
+                <span>{getMessage('modal.cover.outline.fix')}</span>
+              </button>
+              <button className={`arr-btn dark ${points.length >= 1 ? 'act' : ''}`} onClick={handleRollback}>
+                <span>{getMessage('modal.cover.outline.rollback')}</span>
+              </button>
+              <button className="arr-btn dark">
+                <span>{getMessage('modal.cover.outline.remove')}</span>
+              </button>
+              <button className="arr-btn dark">
+                <span>{getMessage('modal.cover.outline.select.move')}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
new file mode 100644
index 00000000..ac8f08d6
--- /dev/null
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -0,0 +1,229 @@
+import { useRecoilState } from 'recoil'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
+import React, { useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
+import { adsorptionPointAddModeState } from '@/store/canvasAtom'
+
+export default function FirstOption() {
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  const { option3, option4 } = settingModalSecondOptions
+  const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
+
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('FirstOption useEffect 실행')
+    fetchSettings()
+  }, [objectNo])
+
+  // Canvas Setting 조회 및 초기화
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+
+      // 데이터 설정
+      setSettingModalFirstOptions({
+        option1: optionData1,
+        option2: optionData2,
+        dimensionDisplay: optionData5,
+      })
+
+      setSettingModalSecondOptions({
+        option3: optionData3,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  const onClickOption = async (option) => {
+    option.selected = !option.selected
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+    setSettingModalSecondOptions({ option3, option4 })
+
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        firstOption1: option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption2: option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption3: dimensionDisplay.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        // secondOption1: secondOptions[0].option1.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: option4.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+
+      const patternData = {
+        objectNo,
+        //디스플레이 설정(다중)
+        allocDisplay: dataToSend.firstOption1[0].selected,
+        outlineDisplay: dataToSend.firstOption1[1].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
+        lineDisplay: dataToSend.firstOption1[3].selected,
+        wordDisplay: dataToSend.firstOption1[4].selected,
+        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+        flowDisplay: dataToSend.firstOption1[6].selected,
+        trestleDisplay: dataToSend.firstOption1[7].selected,
+        totalDisplay: dataToSend.firstOption1[8].selected,
+        //차수 표시(다건)
+        corridorDimension: dataToSend.firstOption3[0].selected,
+        realDimension: dataToSend.firstOption3[1].selected,
+        noneDimension: dataToSend.firstOption3[2].selected,
+        //화면 표시(다중)
+        onlyBorder: dataToSend.firstOption2[0].selected,
+        lineHatch: dataToSend.firstOption2[1].selected,
+        allPainted: dataToSend.firstOption2[2].selected,
+        //흡착범위 설정(단건)
+        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+  }
+
+  const onClickDimension = async (item) => {
+    const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+      option.selected = option.id === item.id
+      return option
+    })
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        firstOption1: option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption2: option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption3: dimensionDisplay.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        // secondOption1: secondOptions[0].option1.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: option4.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+
+      const patternData = {
+        objectNo,
+        //디스플레이 설정(다중)
+        allocDisplay: dataToSend.firstOption1[0].selected,
+        outlineDisplay: dataToSend.firstOption1[1].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
+        lineDisplay: dataToSend.firstOption1[3].selected,
+        wordDisplay: dataToSend.firstOption1[4].selected,
+        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+        flowDisplay: dataToSend.firstOption1[6].selected,
+        trestleDisplay: dataToSend.firstOption1[7].selected,
+        totalDisplay: dataToSend.firstOption1[8].selected,
+        //차수 표시(다건)
+        corridorDimension: dataToSend.firstOption3[0].selected,
+        realDimension: dataToSend.firstOption3[1].selected,
+        noneDimension: dataToSend.firstOption3[2].selected,
+        //화면 표시(다중)
+        onlyBorder: dataToSend.firstOption2[0].selected,
+        lineHatch: dataToSend.firstOption2[1].selected,
+        allPainted: dataToSend.firstOption2[2].selected,
+        //흡착범위 설정(단건)
+        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+  }
+
+  return (
+    <>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
+        <div className="flex-check-box for2">
+          {settingModalFirstOptions &&
+            settingModalFirstOptions.option1.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
+        </div>
+      </div>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
+        <div className="flex-check-box for-line">
+          {settingModalFirstOptions &&
+            settingModalFirstOptions.dimensionDisplay.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
+        </div>
+      </div>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
+        <div className="flex-check-box for-line">
+          {settingModalFirstOptions &&
+            settingModalFirstOptions.option2.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
new file mode 100644
index 00000000..edf1e802
--- /dev/null
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react'
+import { useRecoilState } from 'recoil'
+import { settingModalGridOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { adsorptionPointAddModeState } from '@/store/canvasAtom'
+import { useTempGrid } from '@/hooks/useTempGrid'
+import { gridColorState } from '@/store/gridAtom'
+import { useColor } from 'react-color-palette'
+
+export default function GridOption(props) {
+  const { setShowDotLineGridModal } = props
+  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
+  const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
+  const { getMessage } = useMessage()
+  const { tempGridMode, setTempGridMode } = useTempGrid()
+
+  const [color, setColor] = useColor(gridColor)
+
+  useEffect(() => {
+    console.log(color)
+    setGridColor(color.hex)
+  }, [color])
+
+  const onClickOption = (option) => {
+    const newGridOptions = [...gridOptions]
+    newGridOptions.map((item) => {
+      if (item.id === option.id) {
+        item.selected = !item.selected
+      }
+    })
+
+    if (option.id === 1) {
+      // 점 그리드
+      setAdsorptionPointAddMode(false)
+      setTempGridMode(option.selected)
+      newGridOptions[2].selected = false
+    }
+
+    if (option.id === 2) {
+      // 점.선 그리드
+      if (option.selected) {
+        setShowDotLineGridModal(true)
+      } else {
+        setShowDotLineGridModal(false)
+      }
+    }
+
+    if (option.name === 'modal.canvas.setting.grid.absorption.add') {
+      setAdsorptionPointAddMode(!adsorptionPointAddMode)
+      setTempGridMode(false)
+      newGridOptions[0].selected = false
+    }
+
+    if (option.id === 4) {
+      // 그리드 색 설정
+      if (option.selected) {
+        setColorPickerShow(true)
+      }
+    }
+
+    setGridOptions(newGridOptions)
+  }
+
+  return (
+    <>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.grid')}</h3>
+        <div className="flex-check-box for2">
+          {gridOptions?.map((option) => (
+            <button key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
+              <span className="check-area"></span>
+              <span className="title-area">{getMessage(option.name)}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
new file mode 100644
index 00000000..f6cf6e30
--- /dev/null
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -0,0 +1,164 @@
+import { useRecoilState, useSetRecoilState } from 'recoil'
+import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
+import React, { useEffect, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
+import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
+
+export default function SecondOption() {
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
+  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
+  const { option3, option4 } = settingModalSecondOptions
+  const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
+
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('SecondOption useEffect 실행')
+    fetchSettings()
+  }, [objectNo])
+
+  // Canvas Setting 조회 및 초기화
+  const fetchSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+
+      setSettingModalFirstOptions({
+        option1: optionData1,
+        option2: optionData2,
+        dimensionDisplay: optionData5,
+      })
+      setSettingModalSecondOptions({
+        option3: optionData3,
+        option4: optionData4,
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  const onClickOption = async (option) => {
+    // option4에서 한 개만 선택 가능하도록 처리
+    const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+    setSettingModalSecondOptions({ option3, option4: updatedOption4 })
+
+    try {
+      // 서버에 전송할 데이터
+      const dataToSend = {
+        firstOption1: option1.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption2: option2.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        firstOption3: dimensionDisplay.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+        // secondOption1: secondOptions[0].option3.map((item) => ({
+        //   name: item.id,
+        //   name: item.name,
+        //   // 필요한 경우 데이터 항목 추가
+        // })),
+        secondOption2: updatedOption4.map((item) => ({
+          column: item.column,
+          selected: item.selected,
+        })),
+      }
+      const patternData = {
+        objectNo,
+        //디스플레이 설정(다중)
+        allocDisplay: dataToSend.firstOption1[0].selected,
+        outlineDisplay: dataToSend.firstOption1[1].selected,
+        gridDisplay: dataToSend.firstOption1[2].selected,
+        lineDisplay: dataToSend.firstOption1[3].selected,
+        wordDisplay: dataToSend.firstOption1[4].selected,
+        circuitNumDisplay: dataToSend.firstOption1[5].selected,
+        flowDisplay: dataToSend.firstOption1[6].selected,
+        trestleDisplay: dataToSend.firstOption1[7].selected,
+        totalDisplay: dataToSend.firstOption1[8].selected,
+        //차수 표시(다건)
+        corridorDimension: dataToSend.firstOption3[0].selected,
+        realDimension: dataToSend.firstOption3[1].selected,
+        noneDimension: dataToSend.firstOption3[2].selected,
+        //화면 표시(다중)
+        onlyBorder: dataToSend.firstOption2[0].selected,
+        lineHatch: dataToSend.firstOption2[1].selected,
+        allPainted: dataToSend.firstOption2[2].selected,
+        //흡착범위 설정(단건)
+        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+    setAdsorptionRange(option.range)
+  }
+  return (
+    <>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
+        <div className="flex-check-box for2">
+          {settingModalSecondOptions &&
+            settingModalSecondOptions.option3.map((item) => (
+              <button key={item.id} className="arr-btn">
+                <span>{getMessage(item.name)}</span>
+              </button>
+            ))}
+        </div>
+      </div>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
+        <div className="flex-check-box for-line">
+          {settingModalSecondOptions &&
+            settingModalSecondOptions.option4.map((item) => (
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(item.name)}</span>
+              </button>
+            ))}
+        </div>
+        <div className="flex-check-box for-line">
+          <button className="arr-btn">
+            <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
+          </button>
+          <button className="arr-btn">
+            <span>{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</span>
+          </button>
+          <button
+            className="adsorption-point act"
+            onClick={(e) => {
+              setAdsorptionPointMode(!adsorptionPointMode)
+            }}
+          >
+            <span>{getMessage('modal.canvas.setting.font.plan.absorption.point')}</span>
+            <i>{adsorptionPointMode ? 'ON' : 'OFF'}</i>
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
new file mode 100644
index 00000000..293d29df
--- /dev/null
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+import FirstOption from './FirstOption'
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
+import { useMessage } from '@/hooks/useMessage'
+import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
+
+export default function SettingModal01(props) {
+  const { setShowCanvasSettingModal, setShowDotLineGridModal } = props
+  const [buttonAct, setButtonAct] = useState(1)
+  const { getMessage } = useMessage()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+      <div className={`modal-pop-wrap sm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
+          <button className="modal-close" onClick={() => setShowCanvasSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => setButtonAct(1)}>
+              {getMessage('modal.canvas.setting.display')}
+            </button>
+
+            <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)}>
+              {getMessage('modal.canvas.setting.font.plan')}
+            </button>
+            <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => setButtonAct(3)}>
+              {getMessage('modal.canvas.setting.grid')}
+            </button>
+          </div>
+          {buttonAct === 1 && <FirstOption />}
+          {buttonAct === 2 && <SecondOption />}
+          {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} />}
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 00000000..456cb09f
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,160 @@
+'use client'
+import { Fragment, useCallback, useEffect, useState } from 'react'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { dimmedStore, sessionStore } from '@/store/commonAtom'
+
+import { useMessage } from '@/hooks/useMessage'
+import { logout } from '@/lib/authActions'
+
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export const ToggleonMouse = (e, act, target) => {
+  const listWrap = e.target.closest(target)
+  const ListItem = Array.from(listWrap.childNodes)
+  ListItem.forEach((el) => {
+    if (act === 'add') {
+      el.classList.add('mouse')
+    } else {
+      el.classList.remove('mouse')
+    }
+  })
+  if (act === 'add') {
+    e.target.parentElement.classList.remove('mouse')
+  }
+}
+
+export default function Header(props) {
+  const { userSession } = props
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+  const { getMessage } = useMessage()
+  const pathName = usePathname()
+  // if (pathName.includes('login') || pathName.includes('join')) {
+  //   return null
+  // }
+  const [selected, setSelected] = useState('')
+
+  const dimmedState = useRecoilValue(dimmedStore)
+  const isDimmed = dimmedState ? 'opacity-50 bg-black' : ''
+
+  const SelectOptions = [
+    { id: 0, name: 'オンライン保証シ', link: '' },
+    { id: 1, name: 'ステム', link: '' },
+    { id: 2, name: 'TEST1', link: 'https://www.weather.go.kr/w/index.do' },
+    { id: 3, name: 'TEST2', link: 'https://www.google.com' },
+  ]
+  const menus = [
+    { id: 0, name: 'header.menus.home', url: '/', children: [] },
+    {
+      id: 1,
+      name: 'header.menus.management',
+      url: '',
+      children: [
+        { id: 3, name: 'header.menus.management.stuff', url: '/management/stuff', children: [] },
+        { id: 4, name: 'header.menus.management.plan', url: '/floor-plan', children: [] },
+      ],
+    },
+    {
+      id: 2,
+      name: 'header.menus.community',
+      url: '',
+      children: [
+        { id: 5, name: 'header.menus.community.notice', url: '/community/notice', children: [] },
+        { id: 6, name: 'header.menus.community.faq', url: '/community/faq', children: [] },
+        { id: 7, name: 'header.menus.community.archive', url: '/community/archive', children: [] },
+      ],
+    },
+  ]
+
+  const syncSession = useCallback(() => {
+    setSessionState({ ...userSession })
+  })
+
+  useEffect(() => {
+    syncSession()
+  }, [userSession])
+
+  const onChangeSelect = (option) => {
+    setSelected(option)
+  }
+  const navPage = () => {
+    if (selected.link) {
+      location.href = selected.link
+    }
+  }
+
+  const getMenuTemplate = (menus) => {
+    return menus.map((menu) => {
+      return (
+        <li
+          key={`${menu.id}`}
+          className={'nav-item'}
+          onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
+          onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
+        >
+          {menu.children.length === 0 ? (
+            <Link key={`${menu.id}`} href={menu.url}>
+              {getMessage(menu.name)}
+            </Link>
+          ) : (
+            <Fragment key={`${menu.id}`}>
+              <button>{getMessage(menu.name)}</button>
+              <ul className="nav-depth2">
+                {menu.children.map((m) => {
+                  return (
+                    <li
+                      key={`${m.id}`}
+                      className={'nav-depth2-item'}
+                      onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
+                      onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                    >
+                      <Link href={m.url}>{getMessage(m.name)}</Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            </Fragment>
+          )}
+        </li>
+      )
+    })
+  }
+
+  return (
+    !(pathName.includes('login') || pathName.includes('join')) && (
+      <header className={isDimmed}>
+        <div className="header-inner">
+          <div className="header-right">
+            <h1 className="logo">
+              <Link href={'/'}></Link>
+            </h1>
+            <nav>
+              <ul className="nav-list ">{getMenuTemplate(menus)}</ul>
+            </nav>
+          </div>
+          <div className="header-left">
+            <div className="profile-box">
+              <button className="profile">{userSession.userNm}</button>
+            </div>
+            <div className="sign-out-box">
+              <button className="sign-out" onClick={() => logout()}>
+                {getMessage('header.logout')}
+              </button>
+            </div>
+            <div className="select-box">
+              <QSelectBox title={'Q.ORDER'} options={SelectOptions} onChange={onChangeSelect} />
+            </div>
+            <div className="btn-wrap">
+              <button className="btn-frame small dark" onClick={() => navPage()}>
+                {getMessage('header.go')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+    )
+  )
+}
diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index da7b834d..6f615c3c 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -1,7 +1,413 @@
+'use client'
+
+import React, { useEffect, useState, useRef } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { Button } from '@nextui-org/react'
+import { useAxios } from '@/hooks/useAxios'
+import { useMessage } from '@/hooks/useMessage'
+import StuffQGrid from './StuffQGrid'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { stuffSearchState } from '@/store/stuffAtom'
+import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
+import dayjs from 'dayjs'
+import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
+dayjs.extend(isLeapYear)
+
 export default function Stuff() {
+  const stuffSearchParams = useRecoilValue(stuffSearchState)
+  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
+  const { getMessage } = useMessage()
+  const [curPage, setCurPage] = useState(1) //현재 페이지 번호
+  const [defaultSize, setDefaultSize] = useState(100) //페이지 당 게시물 수
+  const [defaultSortType, setDefaultSortType] = useState('R')
+  const { get } = useAxios()
+  const gridRef = useRef()
+
+  const [gridCount, setGridCount] = useState(0)
+  const [selectedRowData, setSelectedRowData] = useState([])
+  const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
+
+  const router = useRouter()
+  const pathname = usePathname()
+
+  //그리드 내부 복사버튼
+  const copyNo = async (value) => {
+    try {
+      await navigator.clipboard.writeText(value)
+      alert('물건번호가 복사되었습니다.')
+    } catch (error) {
+      alert('물건번호 복사에 실패했습니다.')
+    }
+  }
+
+  //물건번호 복사버튼 옆에 영역
+  const onDoubleClick = (e) => {
+    let objectNo = e.target.innerText
+    console.log(objectNo)
+    if (objectNo.substring(0, 1) === 'R') {
+      console.log('진짜')
+      router.push(`${pathname}/detail?objectNo=${objectNo.toString()}`)
+    } else {
+      console.log('임시')
+      router.push(`${pathname}/tempdetail?objectNo=${objectNo.toString()}`)
+    }
+  }
+
+  const [gridProps, setGridProps] = useState({
+    gridData: [],
+    isPageable: false,
+    // sets 10 rows per page (default is 100)
+    // paginationPageSize: 100,
+    // allows the user to select the page size from a predefined list of page sizes
+    // paginationPageSizeSelector: [100, 200, 300, 400],
+    gridColumns: [
+      {
+        field: 'lastEditDatetime',
+        headerName: getMessage('stuff.gridHeader.lastEditDatetime'),
+        headerCheckboxSelection: true,
+        headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
+        checkboxSelection: true,
+        showDisabledCheckboxes: true,
+        // headerClass: 'centered', //_test.scss에 추가 테스트
+        // .centered {
+        //   .ag-header-cell-label {
+        //     justify-content: center !important;
+        //   }
+        // }
+        cellStyle: { textAlign: 'center' },
+        //suppressMovable: true, //헤더 못움직이게
+        // width : 100
+        // minWidth : 100
+        // maxWidth : 100
+        valueFormatter: function (params) {
+          if (params.value) {
+            return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
+          } else {
+            return null
+          }
+        },
+      },
+      {
+        field: 'objectNo',
+        headerName: getMessage('stuff.gridHeader.objectNo'),
+        // headerClass: 'centered', //_test.scss에 추가 테스트
+        cellRenderer: function (params) {
+          if (params.data.objectNo) {
+            return (
+              <div>
+                <Button
+                  size="sm"
+                  color="default"
+                  onPress={() => {
+                    copyNo(params.value)
+                  }}
+                >
+                  복사
+                </Button>
+                <span onDoubleClick={onDoubleClick}>{params.value}</span>
+              </div>
+            )
+          }
+        },
+        cellRendererParams: {
+          onPress: copyNo,
+        },
+      },
+      {
+        field: 'planTotCnt',
+        headerName: getMessage('stuff.gridHeader.planTotCnt'),
+        cellStyle: { textAlign: 'right' },
+      },
+      { field: 'objectName', headerName: getMessage('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
+      {
+        field: 'saleStoreId',
+        headerName: getMessage('stuff.gridHeader.saleStoreId'),
+        cellStyle: { textAlign: 'left' },
+      },
+      { field: 'saleStoreName', headerName: getMessage('stuff.gridHeader.saleStoreName'), cellStyle: { textAlign: 'left' } },
+      { field: 'address', headerName: getMessage('stuff.gridHeader.address'), cellStyle: { textAlign: 'left' } },
+      { field: 'dispCompanyName', headerName: getMessage('stuff.gridHeader.dispCompanyName'), cellStyle: { textAlign: 'left' } },
+      { field: 'receiveUser', headerName: getMessage('stuff.gridHeader.receiveUser'), cellStyle: { textAlign: 'left' } },
+      {
+        field: 'specDate',
+        headerName: getMessage('stuff.gridHeader.specDate'),
+        valueFormatter: function (params) {
+          if (params.value) {
+            return dayjs(params?.value).format('YYYY.MM.DD')
+          } else {
+            return null
+          }
+        },
+        cellStyle: { textAlign: 'center' },
+      },
+      {
+        field: 'createDatetime',
+        headerName: getMessage('stuff.gridHeader.createDatetime'),
+        valueFormatter: function (params) {
+          if (params.value) {
+            return dayjs(params?.value).format('YYYY.MM.DD')
+          } else {
+            return null
+          }
+        },
+        cellStyle: { textAlign: 'center' },
+      },
+    ],
+    gridCount: 0,
+  })
+
+  //그리드 더블클릭
+  const getCellDoubleClicked = (event) => {
+    if (event.column.colId === 'objectNo') {
+      return
+    } else {
+      console.log(' 상세이동::::::::', event.data)
+      //T 면 임시 R은 진짜
+      if (event.data.objectNo) {
+        if (event.data.objectNo.substring(0, 1) === 'R') {
+          console.log('진짜:::::::::')
+          router.push(`${pathname}/detail?objectNo=${event.data.objectNo.toString()}`)
+        } else {
+          console.log('임시:::::::::::::::::')
+          router.push(`${pathname}/tempdetail?objectNo=${event.data.objectNo.toString()}`)
+        }
+      }
+    }
+  }
+
+  //그리드 체크박스 선택시
+  const getSelectedRowdata = (data) => {
+    setSelectedRowData(data)
+    setSelectedRowDataCount(data.length)
+  }
+
+  //물건삭제
+  const fnDeleteRowData = (data) => {
+    console.log('물건삭제:::::::::::')
+    if (data.length === 0) {
+      return alert('삭제할 데이터를 선택하세요')
+    }
+    let errCount = 0
+    data.forEach((cell) => {
+      if (!cell.objectNo) {
+        if (errCount === 0) {
+          alert('물건정보가 있는 행만 삭제 됩니다')
+        }
+        errCount++
+      }
+    })
+  }
+
+  //행추가
+  let newCount = 0
+  const addRowItems = () => {
+    // console.log('girdRef::::::', gridRef.current.api)
+    const newItems = [
+      {
+        mission: newCount + 1,
+        successful: true,
+      },
+    ]
+    gridRef.current.api.applyTransaction({
+      add: newItems,
+      addIndex: newCount,
+    })
+    newCount++
+  }
+
+  //행삭제
+  const removeRowItems = () => {
+    // console.log('selectedRowData::', selectedRowData)
+    let errCount = 0
+    selectedRowData.forEach((cell) => {
+      if (!cell.company) {
+        let newSelectedRowData = selectedRowData.filter((item) => item.company == null)
+        gridRef.current.api.applyTransaction({ remove: newSelectedRowData })
+      } else {
+        if (errCount === 0) {
+          alert('행추가로 추가 한 행만 삭제됩니다.')
+        }
+        errCount++
+      }
+    })
+  }
+
+  // 진입시 그리드 데이터 조회
+  useEffect(() => {
+    if (stuffSearchParams?.code === 'S') {
+      const params = {
+        schObjectNo: '',
+        schSaleStoreId: '',
+        schAddress: '',
+        schObjectName: '',
+        schSaleStoreName: '',
+        schSpecDateYn: '',
+        schReceiveUser: '',
+        schDispCompanyName: '',
+        schDateType: 'U',
+        schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
+        schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
+        startRow: (curPage - 1) * defaultSize + 1,
+        endRow: curPage * defaultSize,
+        schSelSaleStoreId: '',
+        schSortType: 'R',
+      }
+
+      async function fetchData() {
+        console.log('화면진입:::::::::::::', params)
+        //api에 넘길값 startRow, endRow
+        // let startRow
+        // let endRow
+        // startRow = (curPage - 1) * size + 1
+        // endRow = curPage * size
+        // console.log('startrow::', startRow)
+        // console.log('endRow::', endRow)
+
+        // let curPage
+        // let totalpage
+        // let totalCount
+        // let size
+        // let pageCount
+
+        // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
+        const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
+
+        await get({
+          url: apiUrl,
+        }).then((res) => {
+          if (!isEmptyArray(res)) {
+            console.log('화면진입API결과::', res)
+            setGridProps({ ...gridProps, gridData: res, count: res.length })
+            setGridCount(res.length)
+          }
+        })
+      }
+      fetchData()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (stuffSearchParams?.code === 'E') {
+      stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
+      stuffSearchParams.endRow = curPage * defaultSize
+      stuffSearchParams.schSortType = defaultSortType
+      console.log('조회 눌럿을때 ::::::::::::::', stuffSearchParams)
+      async function fetchData() {
+        // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
+        const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
+        await get({ url: apiUrl }).then((res) => {
+          console.log('API결과:::::::', res)
+          if (!isEmptyArray(res)) {
+            setGridProps({ ...gridProps, gridData: res, count: res.length })
+            setGridCount(res.length)
+          } else {
+            setGridProps({ ...gridProps, gridData: [], count: 0 })
+            setGridCount(0)
+          }
+        })
+      }
+      fetchData()
+    }
+  }, [stuffSearchParams])
+
+  //페이지 갯수 변경 이벤트
+  const onChangePerPage = (e) => {
+    let startRow = (curPage - 1) * e.target.value + 1
+    stuffSearchParams.startRow = startRow
+    stuffSearchParams.endRow = curPage * e.target.value
+    setDefaultSize(e.target.value)
+    setStuffSearch({
+      ...stuffSearch,
+      code: 'S',
+      startRow: startRow,
+      endRow: curPage * e.target.value,
+    })
+    console.log('셋팅된 검색조건:::', stuffSearchParams)
+    //조회API호출
+    // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
+    get({ url: apiUrl }).then((res) => {
+      console.log('보여줄개수바꿨을때 조회 ::::::::::', res)
+      if (!isEmptyArray(res)) {
+        setGridProps({ ...gridProps, gridData: res, count: res.length })
+        setGridCount(res.length)
+      } else {
+        setGridProps({ ...gridProps, gridData: [], count: 0 })
+        setGridCount(0)
+      }
+    })
+  }
+
+  //최근 등록일 수정일 정렬 이벤트
+  const onChangeSortType = (e) => {
+    stuffSearchParams.schSortType = e.target.value
+    console.log('셋팅된 검색조건:::', stuffSearchParams)
+    setDefaultSortType(e.target.value)
+    setStuffSearch({
+      ...stuffSearch,
+      code: 'S',
+      schSortType: e.target.value,
+    })
+    // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
+    // console.log('apiUrl::', apiUrl)
+    get({ url: apiUrl }).then((res) => {
+      console.log('정렬바꿨을때 조회 ::::::::::', res)
+      if (!isEmptyArray(res)) {
+        setGridProps({ ...gridProps, gridData: res, count: res.length })
+        setGridCount(res.length)
+      } else {
+        setGridProps({ ...gridProps, gridData: [], count: 0 })
+        setGridCount(0)
+      }
+    })
+  }
   return (
     <>
-      <h1>Management Stuff</h1>
+      <div className="text-2xl">
+        물건목록
+        <span>
+          전체 : {gridCount} // 선택 : {selectedRowDataCount}
+        </span>
+        <select className="select" onChange={onChangePerPage}>
+          <option value="100">100</option>
+          <option value="200">200</option>
+          <option value="300">300</option>
+        </select>
+        <select className="select" onChange={onChangeSortType}>
+          <option value="R">최근 등록일</option>
+          <option value="U">최근 수정일</option>
+        </select>
+        <div align="right">
+          {/* <Button
+            color="primary"
+            onPress={() => {
+              fnDeleteRowData(selectedRowData)
+            }}
+          >
+            물건삭제
+          </Button> */}
+          {/* <Button
+            color="primary"
+            onPress={() => {
+              addRowItems()
+            }}
+          >
+            행추가
+          </Button>
+          <Button
+            color="primary"
+            onPress={() => {
+              removeRowItems()
+            }}
+          >
+            행삭제
+          </Button> */}
+        </div>
+        <div style={{ width: '100%', height: '100%' }}>
+          <StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
+        </div>
+      </div>
     </>
   )
 }
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
new file mode 100644
index 00000000..66baf8e3
--- /dev/null
+++ b/src/components/management/StuffDetail.jsx
@@ -0,0 +1,616 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem, Select, SelectItem, Checkbox, Textarea, button } from '@nextui-org/react'
+import Link from 'next/link'
+import { del, get, post } from '@/lib/Axios'
+import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
+import dayjs from 'dayjs'
+import { useMessage } from '@/hooks/useMessage'
+import { useForm } from 'react-hook-form'
+export default function StuffDetail() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { getMessage } = useMessage()
+
+  //form
+  const formInitValue = {
+    // 물건번호 T...(임시) R...(진짜)
+    dispCompanyName: '', //담당자
+    objectStatusId: '0', //물건구분(신축:0 기축 : 1)
+    objectName: '', //물건명
+    objectNameOmit: '', //경칭선택
+    objectNameKana: '', //물건명 후리가나
+    saleStoreId: '', //판매점ID
+    saleStoreName: '', //판매점명
+    otherSaleStoreId: '',
+    otherSaleStoreName: '',
+    zipNo: '', //우편번호
+    prefId: '', //도도부현
+    prefName: '',
+    address: '', //주소
+    powerSimArea: '', //발전량시뮬레이션지역
+    windSpeed: '', //기준풍속
+    snowCover: '', //수직적설량
+    coldAreaChk: false, //한랭지대책시행
+    surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
+    saltAreaChk: false, //염해지역용아이템사용
+    installHeight: '', //설치높이
+    powerConTerms: '0', //계약조건(잉여 / 전량)
+    remarks: '', //메모
+    tempFlag: 'T', //임시저장(1) 저장(0)
+  }
+  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
+    defaultValues: formInitValue,
+  })
+
+  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
+
+  const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
+  const [prefValue, setPrefValue] = useState('')
+  const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
+  const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
+
+  const [powerSimAreaList, setPowerSimAreaList] = useState([]) //발전시뮬레이션 리스트
+
+  const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
+  const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
+  const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
+
+  const [editMode, setEditMode] = useState('NEW')
+  const [detailData, setDetailData] = useState({})
+
+  useEffect(() => {
+    if (objectNo) {
+      console.log('수정화면')
+      setEditMode('EDIT')
+
+      if (objectNo.substring(0, 1) === 'R') {
+        //진짜
+        setIsFormValid(true)
+      }
+      get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
+        // console.log('물건번호로 상세 API 호출')
+        if (res != null) {
+          // console.log('상세res:::::::', res)
+          setDetailData(res)
+
+          // 신규 상세 공통APi
+          // 도도부현API
+          get({ url: '/api/object/prefecture/list' }).then((res) => {
+            if (!isEmptyArray(res)) {
+              //console.log('도도부현API 결과:::', res)
+              setPrefCodeList(res)
+            }
+          })
+          // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
+          // 임시 1차점 판매점코드 saleStoreId=201TES01
+          // T01
+          //1차점 : X167
+          get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
+            if (!isEmptyArray(res)) {
+              console.log('판매점 결과:::::', res)
+              setSaleStoreList(res)
+              //1차 판매점 자동완성 값 셋팅
+              form.setValue('saleStoreId', res[0].saleStoreId)
+              //1차 판매점 번호 셋팅
+              form.setValue('saleStoreName', res[0].saleStoreId)
+              setOtherSaleStoreList([])
+            }
+          })
+        } else {
+          alert('삭제된 물건입니다')
+          router.push('/management/stuff')
+        }
+      })
+    } else {
+      console.log('신규화면')
+      // 신규 상세 공통APi
+      // 도도부현API
+      get({ url: '/api/object/prefecture/list' }).then((res) => {
+        if (!isEmptyArray(res)) {
+          //console.log('도도부현API 결과:::', res)
+          setPrefCodeList(res)
+        }
+      })
+      // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
+      // 임시 1차점 판매점코드 saleStoreId=201TES01
+      // T01
+      //1차점 : X167
+      get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
+        if (!isEmptyArray(res)) {
+          console.log('판매점 결과:::::', res)
+          const firstList = res.filter((row) => row.saleStoreLevel === '1')
+          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+          console.log('first:::::', firstList)
+          console.log('otherList:::::', otherList)
+          //1차점 셀렉트박스
+          setSaleStoreList(firstList)
+          //1차 판매점 자동완성 값 셋팅
+          form.setValue('saleStoreId', firstList[0].saleStoreId)
+          //1차 판매점 번호 셋팅
+          form.setValue('saleStoreName', firstList[0].saleStoreId)
+
+          //1차점 아닌 판매점 셀렉트박스
+          setOtherSaleStoreList(otherList)
+        }
+      })
+    }
+  }, [objectNo])
+
+  //1차점 변경 이벤트
+  const onSelectionChange = (key) => {
+    if (key == null) {
+      form.setValue('saleStoreId', '')
+      form.setValue('saleStoreName', '')
+    } else {
+      form.setValue('saleStoreId', key)
+      form.setValue('saleStoreName', key)
+    }
+  }
+
+  //2차점 변경 이벤트
+  const onSelectionChange2 = (key) => {
+    console.log(key)
+  }
+  // 우편번호 숫자만 체크
+  const _zipNo = watch('zipNo')
+  useEffect(() => {
+    if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
+      setButtonValid(true)
+    } else {
+      setButtonValid(false)
+    }
+  }, [_zipNo])
+
+  //임시저장 저장 버튼 컨트롤
+  // dispCompanyName: '', //담당자
+  // objectName: '', //물건명
+  // objectNameOmit: '', //경칭선택
+  // saleStoreId: '', //판매점ID
+  // zipNo: '', //우편번호
+  // prefId: '', //도도부현
+  // address: '', //주소
+  // powerSimArea: '', //발전량시뮬레이션지역
+  // windSpeed: '', //기준풍속
+  // snowCover: '', //수직적설량
+  // coldAreaChk: false, //한랭지대책시행
+  // surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
+  // saltAreaChk: false, //염해지역용아이템사용
+  // installHeight: '', //설치높이
+  // powerConTerms: '0', //계약조건(잉여 / 전량)
+  // remarks: '', //메모
+  // tempFlag: 'T', //임시저장(1) 저장(0)
+  const _dispCompanyName = watch('dispCompanyName')
+  const _objectName = watch('objectName')
+  const _objectNameOmit = watch('objectNameOmit')
+  const _saleStoreId = watch('saleStoreId')
+  const _prefId = watch('prefId')
+  const _address = watch('address')
+  const _powerSimArea = watch('powerSimArea')
+  const _windSpeed = watch('windSpeed')
+  const _snowCover = watch('snowCover')
+  const _installHeight = watch('installHeight')
+  useEffect(() => {
+    // console.log('mode:::::', editMode)
+    if (editMode === 'NEW') {
+      const formData = form.getValues()
+      // console.log('폼::::::::::::', formData)
+      let errors = {}
+      if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
+        errors.dispCompanyName = true
+      }
+      if (!_objectName || _objectName.trim().length === 0) {
+        errors.objectName = true
+      }
+      if (!_objectNameOmit) {
+        errors.objectNameOmit = true
+      }
+      if (!_saleStoreId) {
+        errors.saleStoreId = true
+      }
+
+      if (!_zipNo || _zipNo.length != 7) {
+        errors.zipCode = true
+      }
+
+      if (!_prefId) {
+        errors.prefId = true
+      }
+
+      if (!_address.trim().length === 0) {
+        errors.address = true
+      }
+
+      if (!_powerSimArea) {
+        errors.powerSimArea = true
+      }
+
+      if (!_windSpeed) {
+        errors.windSpeed = true
+      }
+
+      if (!_snowCover) {
+        errors.snowCover = true
+      }
+
+      if (!_installHeight) {
+        errors.installHeight = true
+      }
+
+      // console.log('errors::', errors)
+      setIsFormValid(Object.keys(errors).length === 0)
+    } else {
+      // console.log('상세일때 폼체크')
+    }
+  }, [_dispCompanyName, _objectName, _objectNameOmit, _saleStoreId, _zipNo, _prefId, _address, _powerSimArea, _windSpeed, _snowCover, _installHeight])
+
+  // 주소검색 API
+  const onSearchPostNumber = () => {
+    const params = {
+      zipcode: _zipNo,
+    }
+    get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
+      //7830060
+      //9302226
+      if (res.status === 200) {
+        if (res.results != null) {
+          // console.log('주소검색::', res.results)
+          // console.log('prefcode::', res.results[0].prefcode)
+          // console.log('address::', res.results[0].address2 + res.results[0].address3)
+          setPrefValue(res.results[0].prefcode)
+          form.setValue('prefId', res.results[0].prefcode)
+          form.setValue('prefName', res.results[0].address1)
+          form.setValue('address', res.results[0].address2 + res.results[0].address3)
+        } else {
+          alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
+          form.setValue('prefId', '')
+          form.setValue('prefName', '')
+          form.setValue('address', '')
+          form.setValue('zipNo', '')
+          setPrefValue('')
+          setPowerSimAreaList([])
+          form.setValue('powerSimArea', '')
+        }
+      } else {
+        alert(res.message)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (prefValue !== '') {
+      // console.log('우편번호 검색해서  도도부현골랐을때::::', prefValue)
+      // 발전량시뮬레이션 지역 목록
+      // /api/object/prefecture/도도부현코드/list
+      get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
+        if (!isEmptyArray(res)) {
+          // console.log('발전시뮬레이션::::::::', res)
+          setPowerSimAreaList(res)
+        }
+      })
+    }
+  }, [prefValue])
+
+  //필수값 다 입력했을때
+  const onValid = (data) => {
+    // 수정모드일때는 PUT
+    // console.log('필수값 다 있고 저장')
+    // console.log('data::::::', data)
+    const formData = form.getValues()
+    // console.log('formData::::', formData)
+    // const _dispCompanyName = watch('dispCompanyName')
+    // const _objectStatusId = watch('objectStatusId')
+    // const _objectNameOmit = watch('objectNameOmit')
+    // const _zipNo = watch('zipNo')
+    // const _prefId = watch('prefId')
+    // const _address = watch('address')
+    // const _coldAreaChk = watch('coldAreaChk')
+    // console.log(_dispCompanyName)
+    // console.log(_objectStatusId)
+    // console.log(_objectNameOmit)
+    // console.log(_zipNo)
+    // console.log(_prefId)
+    // console.log('prefValue::', prefValue)
+    // console.log(_address)
+    // console.log('_coldAreaChk::', _coldAreaChk)
+  }
+
+  //필수값 안넣었을때 임시저장 form required사용시
+  // const onInvalid = (errors) => {
+  //   console.log('22222222222222222222222')
+  //   const formData = form.getValues()
+  //   console.log('임시저장formData::::', formData)
+  // }
+
+  // 임시저장
+  const onTempSave = async () => {
+    const formData = form.getValues()
+    //console.log('임시저장::::::::', formData)
+
+    const params = {
+      saleStoreId: formData.saleStoreId,
+      saleStoreName: formData.saleStoreName,
+      objectStatusId: formData.objectStatusId,
+      objectName: formData.objectName,
+      objectNameOmit: formData.objectNameOmit,
+      objectNameKana: formData.objectNameKana,
+      zipNo: formData.zipNo,
+      prefId: formData.prefId,
+      prefName: formData.prefName,
+      address: formData.address,
+      powerSimArea: formData.powerSimArea,
+      receiveUser: formData.dispCompanyName,
+      installHeight: formData.installHeight,
+      windSpeed: formData.windSpeed,
+      snowCover: formData.snowCover,
+      surfaceType: formData.surfaceType,
+      powerConTerms: formData.powerConTerms,
+      saltAreaChk: formData.saltAreaChk,
+      coldAreaChk: formData.coldAreaChk,
+      tempFlg: '1',
+      workNo: null,
+      workName: null,
+    }
+    console.log('임시저장params::', params)
+    return
+    await post({ url: '/api/object/save-object', data: params }).then((res) => {
+      console.log('res::::::', res)
+    })
+  }
+
+  // 발전량 시뮬레이션 변경
+  const handlePowerSimAreaOnChange = (e) => {
+    // console.log('가지고있는 도도부현코드:::::::::', prefValue)
+    // console.log('발전량시뮬레이션변경:::::::::', e.target.value)
+    //값 set해주고 그거 useEffect로 api호출
+  }
+
+  // 물건삭제
+  const onDelete = () => {
+    //http://localhost:8080/api/object/R201TES01240910023
+    // console.log('물건번호::::::::', objectNo)
+    alert('사양확정일이 있으면 삭제 불가')
+    if (confirm(getMessage('common.message.data.delete'))) {
+      let testobj = '10'
+
+      del({ url: `/api/object/${testobj}` }).then((res) => {
+        // console.log('삭제 결과:::', res)
+        router.push('/management/stuff')
+      })
+    }
+  }
+
+  return (
+    <>
+      {(editMode === 'NEW' && (
+        <form onSubmit={handleSubmit(onValid)}>
+          <div>
+            <div>(*필수 입력항목)</div>
+            <div className="form-input">
+              <label>담당자*</label>
+              <input type="text" className="input-origin" {...form.register('dispCompanyName')} />
+            </div>
+            <div className="form-input">
+              <label>물건구분/물건명*</label>
+              <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
+              <label htmlFor="objectStatus0">신축</label>
+              <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
+              <label htmlFor="objectStatus0">기축</label>
+              <input type="text" className="input-origin" {...form.register('objectName')} />
+              <div className="flex w-full max-w-xs flex-col gap-2">
+                <select name="objectNameOmit" {...register('objectNameOmit')}>
+                  <option value="">경칭선택</option>
+                  <option value="11">111</option>
+                  <option value="22">222</option>
+                  <option value="33">333</option>
+                </select>
+              </div>
+            </div>
+            <div className="form-input">
+              <label>물건명 후리가나</label>
+              <input type="text" className="input-origin" {...form.register('objectNameKana')} />
+            </div>
+            <div className="form-input">
+              <label>1차 판매점명 / ID</label>
+              <div className="flex w-full max-w-xs flex-col gap2">
+                {saleStoreList?.length > 0 && (
+                  <Autocomplete
+                    className="max-w-xs"
+                    defaultItems={saleStoreList}
+                    label="판매점ID자동완성"
+                    selectedKey={form.watch('saleStoreId')}
+                    {...form.register('saleStoreId')}
+                    onSelectionChange={onSelectionChange}
+                  >
+                    {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
+                  </Autocomplete>
+                )}
+                <input type="text" className="input-origin" value={form.watch('saleStoreName')} {...form.register('saleStoreName')} disabled />
+              </div>
+            </div>
+            <div className="form-input">
+              <label>2차 판매점명 / ID</label>
+              <div className="flex w-full max-w-xs flex-col gap2">
+                {otherSaleStoreList?.length > 0 && (
+                  <Autocomplete
+                    className="max-w-xs"
+                    defaultItems={otherSaleStoreList}
+                    label="2차판매점ID자동완성"
+                    {...form.register('otherSaleStoreId')}
+                    onSelectionChange={onSelectionChange2}
+                  >
+                    {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
+                  </Autocomplete>
+                )}
+              </div>
+            </div>
+            <div className="form-input">
+              <label>우편번호</label>
+              <input
+                type="text"
+                className="input-origin"
+                maxLength={7}
+                {...form.register('zipNo', {
+                  minLength: { value: 7, message: '7자리만가능' },
+                  pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
+                })}
+              />
+              <Button isDisabled={!buttonValid} onClick={onSearchPostNumber}>
+                주소검색
+              </Button>
+              *우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오
+            </div>
+            <div className="form-input">
+              <label>도도부현 / 주소</label>
+              <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+                {prefCodeList?.length > 0 && (
+                  <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
+                    {prefCodeList.map((row) => {
+                      return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
+                    })}
+                  </Select>
+                )}
+              </div>
+
+              <input type="text" className="input-origin" value={form.watch('address')} {...form.register('address')} />
+            </div>
+            <div className="form-input">
+              <label>발전량시뮬레이션지역</label>
+              {powerSimAreaList?.length > 0 && (
+                <Select
+                  className="max-w-xs"
+                  selectedKeys={form.watch('powerSimArea')}
+                  {...form.register('powerSimArea')}
+                  onChange={handlePowerSimAreaOnChange}
+                >
+                  {powerSimAreaList.map((row) => {
+                    // console.log('row::', row)
+                    return (
+                      <SelectItem key={row.prefName} value={row.prefId}>
+                        {row.prefName}
+                      </SelectItem>
+                    )
+                  })}
+                </Select>
+              )}
+            </div>
+            <div className="form-input">
+              <label>기준풍속</label>
+              <div className="flex w-full max-w-xs flex-col gap-2">
+                <select name="windSpeed" {...register('windSpeed')}>
+                  <option value="">기준풍속</option>
+                  <option value="30">30</option>
+                  <option value="50">50</option>
+                  <option value="60">60</option>
+                </select>
+              </div>
+            </div>
+            <div className="form-input">
+              <label>수직적설량</label>
+              <input
+                type="text"
+                className="input-origin"
+                maxLength={3}
+                {...form.register('snowCover', {
+                  pattern: { value: /^[0-9]*$/g, message: '정수만 입력' },
+                })}
+              />{' '}
+              cm
+              <Checkbox
+                onValueChange={(e) => {
+                  form.setValue('coldAreaChk', e)
+                }}
+                {...form.register('coldAreaChk')}
+              >
+                한랭지대책시행
+              </Checkbox>
+            </div>
+            <div className="form-input">
+              <label>면조도구분</label>
+              <input type="radio" name="surfaceType" value="Ⅲ・Ⅳ" id="surfaceType0" {...form.register('surfaceType')} />
+              <label htmlFor="surfaceType0">Ⅲ・Ⅳ</label>
+              <input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
+              <label htmlFor="surfaceType1">Ⅱ</label>
+              <Checkbox
+                {...form.register('saltAreaChk')}
+                onValueChange={(e) => {
+                  form.setValue('saltAreaChk', e)
+                }}
+              >
+                염해지역용아이템사용
+              </Checkbox>
+            </div>
+            <div className="form-input">
+              <label>설치높이</label>
+              <div className="flex w-full max-w-xs flex-col gap-2">
+                <select name="installHeight" {...register('installHeight')}>
+                  <option value="">설치높이</option>
+                  <option value="11">111</option>
+                  <option value="22">222</option>
+                  <option value="33">333</option>
+                </select>
+              </div>
+            </div>
+            <div className="form-input">
+              <label>계약조건</label>
+              <input type="radio" name="powerConTerms" value="0" id="powerConTerms0" {...form.register('powerConTerms')} />
+              <label htmlFor="powerConTerms0">잉여</label>
+              <input type="radio" name="powerConTerms" value="1" id="powerConTerms1" {...form.register('powerConTerms')} />
+              <label htmlFor="powerConTerms1">전량</label>
+            </div>
+            <div className="form-input">
+              <label>메모</label>
+              <Textarea
+                disableAutosize
+                classNames={{
+                  base: 'max-w-xs',
+                  input: 'resize-y min-h-[40px]',
+                }}
+                {...form.register('remarks')}
+                onValueChange={(e) => {
+                  // console.log('e::::', e)
+                  form.setValue('remarks', e)
+                }}
+              />
+            </div>
+          </div>
+          {!isFormValid ? (
+            <>
+              <Button type="submit" onClick={onTempSave}>
+                NEW화면임시저장
+              </Button>
+            </>
+          ) : (
+            <button type="submit">NEW화면 저장</button>
+          )}
+          <Link href="/management/stuff">
+            <button type="button">NEW화면 물건목록이동</button>
+          </Link>
+        </form>
+      )) || (
+        <>
+          {objectNo.substring(0, 1) === 'R' ? (
+            <>
+              <Link href="/management/stuff">
+                <button type="button">R상세:물건목록</button>
+              </Link>
+              <button type="submit">R상세:저장</button>
+              <button type="submit" onClick={onDelete}>
+                R상세:물건삭제
+              </button>
+            </>
+          ) : (
+            <>
+              <Link href="/management/stuff">
+                <button type="button">T상세:물건목록</button>
+              </Link>
+              <button type="submit">T상세:저장</button>
+            </>
+          )}
+        </>
+      )}
+    </>
+  )
+}
diff --git a/src/components/management/StuffQGrid.jsx b/src/components/management/StuffQGrid.jsx
new file mode 100644
index 00000000..4fd6c42d
--- /dev/null
+++ b/src/components/management/StuffQGrid.jsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { AgGridReact } from 'ag-grid-react'
+
+import 'ag-grid-community/styles/ag-grid.css'
+import 'ag-grid-community/styles/ag-theme-quartz.css'
+
+export default function StuffQGrid(props) {
+  const { gridData, gridColumns, isPageable = true, count, gridRef } = props
+  /**
+   * 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다
+   */
+  const [rowData, setRowData] = useState(null)
+
+  /**
+   * Column Definitions를 설정할 때는 useMemo 또는 useState를 사용하여 렌더 간에 일관된 참조를 유지하십시오.
+   * 응용 프로그램이 Column Definitions를 동적으로 변경하는 경우에도 렌더링 간에 일관된 참조를 유지하려면 useMemo 또는 useState를 사용하십시오.
+   */
+  const [colDefs, setColDefs] = useState(
+    gridColumns ?? [
+      { field: 'mission', filter: true },
+      { field: 'company' },
+      { field: 'location' },
+      { field: 'date' },
+      { field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` },
+      { field: 'successful' },
+      { field: 'rocket' },
+    ],
+  )
+
+  /**
+   * defaultColDef 속성을 제공할 때 이 인라인 또는 구성 요소의 단순 개체로 정의하지 마십시오. 이렇게 하면 모든 렌더링에서 새 인스턴스가 생성됩니다.
+   * 대신 or useState 를 사용하여 useMemo 렌더 간에 일관된 참조가 유지되도록 합니다.
+   */
+  const defaultColDef = useMemo(() => {
+    return {
+      filter: false,
+      flex: 1,
+      sortable: false,
+      suppressMovable: true,
+      resizable: false,
+      suppressSizeToFit: false,
+      headerClass: 'centered', //_test.scss에 추가 테스트
+    }
+  }, [])
+
+  /**
+   * 단순 유형(string, boolean 및 number)의 속성은 렌더링 간에 값으로 비교되므로 후크를 사용할 필요가 없습니다.
+   */
+  const rowBuffer = 100
+
+  /**
+   * 모든 렌더링에서 그리드 상태를 재설정하지 않도록 useCallback을 사용하는 것이 좋습니다.
+   * api데이타 해당 컬럼에 따라 로우 체크박스 체크 가능여부 등 컨트롤
+   */
+  const isRowSelectable = useCallback(
+    (params) => {
+      return !!params.data
+    },
+    [count],
+  )
+
+  // 체크박스 체크시
+  const onSelectionChanged = useCallback((event) => {
+    props.getSelectedRowdata(event.api.getSelectedRows())
+  }, [])
+
+  //더블클릭
+  const onCellDoubleClicked = useCallback((event) => {
+    // if (event.column.colId === 'company') {
+    //   return
+    // } else {
+    props.getCellDoubleClicked(event)
+    // }
+  }, [])
+
+  //컨텐츠에 따라 컬럼넓이 자동조절
+  const autoSizeStrategy = useMemo(() => {
+    return {
+      type: 'fitCellContents',
+    }
+  }, [])
+
+  const onGridReady = useCallback((event) => {
+    // console.log('event:::', event)
+    // 헤더 사이즈 조정 컬럼에 width값으로 계산
+    event.api.sizeColumnsToFit()
+  }, [])
+
+  // Fetch data & update rowData state
+  useEffect(() => {
+    gridData ? setRowData(gridData) : ''
+  }, [gridData])
+
+  return (
+    <div className="ag-theme-quartz" style={{ height: 500 }}>
+      <AgGridReact
+        ref={gridRef}
+        onGridReady={onGridReady}
+        rowBuffer={rowBuffer}
+        rowData={rowData}
+        columnDefs={colDefs}
+        defaultColDef={defaultColDef}
+        isRowSelectable={isRowSelectable}
+        rowSelection={'multiple'}
+        suppressRowClickSelection={true}
+        onSelectionChanged={onSelectionChanged}
+        onCellDoubleClicked={onCellDoubleClicked}
+        pagination={isPageable}
+        //paginationPageSize={paginationPageSize}
+        //paginationPageSizeSelector={paginationPageSizeSelector}
+        autoSizeStrategy={autoSizeStrategy}
+        overlayNoRowsTemplate={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
+      />
+    </div>
+  )
+}
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
new file mode 100644
index 00000000..58aa4ce9
--- /dev/null
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -0,0 +1,306 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import { useState } from 'react'
+import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem } from '@nextui-org/react'
+import RangeDatePicker from '@/components/common/datepicker/RangeDatePicker'
+import { useRecoilState, useResetRecoilState } from 'recoil'
+import { stuffSearchState } from '@/store/stuffAtom'
+import { isEmptyArray } from '@/util/common-utils'
+import { get } from '@/lib/Axios'
+import dayjs from 'dayjs'
+import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
+dayjs.extend(isLeapYear)
+import Link from 'next/link'
+export default function StuffSearchCondition() {
+  //달력 props 관련 날짜 셋팅
+  const [dateRange, setDateRange] = useState([dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')])
+  const [startRangeDate, endRangeDate] = dateRange
+
+  const rangeDatePickerProps = {
+    startRangeDate, //시작일
+    endRangeDate, //종료일
+    setDateRange,
+  }
+
+  //여기서 선택한 검색조건들을 recoil로 관리
+  const resetStuffRecoil = useResetRecoilState(stuffSearchState)
+  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
+  const [objectNo, setObjectNo] = useState('') //물건번호
+  const [saleStoreId, setSaleStoreId] = useState('') //판매대리점ID
+  const [address, setAddress] = useState('') //물건주소
+  const [objectName, setobjectName] = useState('') //물건명
+  const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
+  const [specDateYn, setSpecDateYn] = useState('') //사양 확인('', 'Y', 'N')
+  const [receiveUser, setReceiveUser] = useState('') //담당자
+  const [dispCompanyName, setDispCompanyName] = useState('') //견적처
+  const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
+  const [schSelSaleStoreId, setSchSelSaleStoreId] = useState('') //판매대리점 선택
+
+  const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
+  // 조회
+  const onSubmit = () => {
+    let diff = dayjs(endRangeDate).diff(startRangeDate, 'day')
+    if (diff > 366) {
+      return alert('최대1년 조회 가능합니다.')
+    }
+
+    setStuffSearch({
+      schObjectNo: stuffSearch?.schObjectNo ? stuffSearch.schObjectNo : objectNo,
+      schSaleStoreId: stuffSearch?.schSaleStoreId ? stuffSearch.schSaleStoreId : saleStoreId,
+      schAddress: stuffSearch?.schAddress ? stuffSearch.schAddress : address,
+      schObjectName: stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName,
+      schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName,
+      schSpecDateYn: stuffSearch?.schSpecDateYn ? stuffSearch.schSpecDateYn : specDateYn,
+      schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser,
+      schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName,
+      schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
+      schFromDt: dayjs(startRangeDate).format('YYYY-MM-DD'),
+      schToDt: dayjs(endRangeDate).format('YYYY-MM-DD'),
+      code: 'E',
+      schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
+      startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
+      endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
+      schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
+    })
+  }
+
+  //초기화
+  const resetRecoil = () => {
+    setObjectNo('')
+    setSaleStoreId('')
+    setAddress('')
+    setobjectName('')
+    setSaleStoreName('')
+    setSpecDateYn('')
+    setReceiveUser('')
+    setDispCompanyName('')
+    setDateType('U')
+    setDateRange([dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')])
+    setSchSelSaleStoreId('')
+    resetStuffRecoil()
+  }
+
+  useEffect(() => {
+    get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
+      if (!isEmptyArray(res)) {
+        // console.log('판매점 결과:::::', res)
+        setSchSelSaleStoreList(res)
+      }
+    })
+  }, [])
+
+  //판매대리점 자동완성 변경
+  const onSelectionChange = (key) => {
+    // console.log('자동완성값변경', key)
+    if (key == null) {
+      setSchSelSaleStoreId('')
+      setStuffSearch({ ...stuffSearch, schSelSaleStoreId: '' })
+    } else {
+      setSchSelSaleStoreId(key)
+      setStuffSearch({ ...stuffSearch, schSelSaleStoreId: key })
+    }
+  }
+
+  //x로 날짜 비웠을때 기본값으로 셋팅
+  useEffect(() => {
+    if (!startRangeDate && !endRangeDate) {
+      setDateRange([dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')])
+    }
+  }, [startRangeDate, endRangeDate])
+
+  useEffect(() => {
+    setDateRange([
+      stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
+      stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'),
+    ])
+  }, [stuffSearch])
+
+  return (
+    <>
+      <div align="right">
+        <Link href="/management/stuff/tempdetail">
+          <button type="button">물건신규등록</button>
+        </Link>
+        <Button size="sm" onClick={onSubmit}>
+          조회
+        </Button>
+        <Button size="sm" onClick={resetRecoil}>
+          초기화
+        </Button>
+      </div>
+      <div className="w-full flex flex-col gap-4">
+        {Array(4)
+          .fill()
+          .map((_, i) => {
+            if (i === 0) {
+              return (
+                <div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+                  <input
+                    type="text"
+                    placeholder="물건번호 입력"
+                    value={stuffSearch?.code === 'E' ? stuffSearch.schObjectNo : objectNo}
+                    onChange={(e) => {
+                      setObjectNo(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
+                    }}
+                  />
+                  <input
+                    type="text"
+                    placeholder="판매대리점ID 입력"
+                    value={stuffSearch?.schSaleStoreId ? stuffSearch.schSaleStoreId : saleStoreId}
+                    onChange={(e) => {
+                      setSaleStoreId(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreId: e.target.value })
+                    }}
+                  />
+                  <input
+                    type="text"
+                    placeholder="물건주소 입력"
+                    value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
+                    onChange={(e) => {
+                      setAddress(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schAddress: e.target.value })
+                    }}
+                  />
+                </div>
+              )
+            } else if (i === 1) {
+              return (
+                <div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+                  <input
+                    type="text"
+                    placeholder="물건명 입력"
+                    value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
+                    onChange={(e) => {
+                      setobjectName(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schObjectName: e.target.value })
+                    }}
+                  />
+                  <input
+                    type="text"
+                    placeholder="물건명 입력"
+                    value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
+                    onChange={(e) => {
+                      setSaleStoreName(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreName: e.target.value })
+                    }}
+                  />
+                  <div>
+                    <input
+                      type="radio"
+                      name="radio_sayang"
+                      id="radio_all"
+                      checked={stuffSearch?.schSpecDateYn === '' ? true : false}
+                      value={''}
+                      onChange={(e) => {
+                        setSpecDateYn(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schSpecDateYn: e.target.value })
+                      }}
+                    />
+                    <label htmlFor="radio_all">ALL</label>
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      name="radio_sayang"
+                      id="radio_y"
+                      checked={stuffSearch?.schSpecDateYn === 'Y' ? true : false}
+                      value={'Y'}
+                      onChange={(e) => {
+                        setSpecDateYn(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schSpecDateYn: e.target.value })
+                      }}
+                    />
+                    <label htmlFor="radio_y">사양 확인</label>
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      name="radio"
+                      id="radio_n"
+                      checked={stuffSearch?.schSpecDateYn === 'N' ? true : false}
+                      value={'N'}
+                      onChange={(e) => {
+                        setSpecDateYn(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schSpecDateYn: e.target.value })
+                      }}
+                    />
+                    <label htmlFor="radio_n">사양 미확인</label>
+                  </div>
+                </div>
+              )
+            } else if (i === 2) {
+              return (
+                <div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+                  <input
+                    type="text"
+                    placeholder="담당자 입력"
+                    value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
+                    onChange={(e) => {
+                      setReceiveUser(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schReceiveUser: e.target.value })
+                    }}
+                  />
+                  <input
+                    type="text"
+                    placeholder="견적처 입력"
+                    value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
+                    onChange={(e) => {
+                      setDispCompanyName(e.target.value)
+                      setStuffSearch({ ...stuffSearch, code: 'S', schDispCompanyName: e.target.value })
+                    }}
+                  />
+                  {schSelSaleStoreList?.length > 0 && (
+                    <Autocomplete
+                      className="max-w-xs"
+                      label="판매대리점선택"
+                      defaultItems={schSelSaleStoreList}
+                      selectedKey={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
+                      onSelectionChange={onSelectionChange}
+                    >
+                      {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
+                    </Autocomplete>
+                  )}
+                </div>
+              )
+            } else {
+              return (
+                <div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+                  <div>
+                    <input
+                      type="radio"
+                      name="radio_ptype"
+                      id="radio_u"
+                      checked={stuffSearch?.schDateType === 'U' ? true : false}
+                      value={'U'}
+                      onChange={(e) => {
+                        setDateType(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
+                      }}
+                    />
+                    <label htmlFor="radio_u">갱신일</label>
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      name="radio_ptype"
+                      id="radio_r"
+                      checked={stuffSearch?.schDateType === 'R' ? true : false}
+                      value={'R'}
+                      onChange={(e) => {
+                        setDateType(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
+                      }}
+                    />
+                    <label htmlFor="radio_r">등록일</label>
+                  </div>
+                  <RangeDatePicker {...rangeDatePickerProps} />
+                </div>
+              )
+            }
+          })}
+      </div>
+    </>
+  )
+}
diff --git a/src/components/ui/Dimmed.jsx b/src/components/ui/Dimmed.jsx
new file mode 100644
index 00000000..c38e45cc
--- /dev/null
+++ b/src/components/ui/Dimmed.jsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { useRecoilValue } from 'recoil'
+import { dimmedStore } from '@/store/commonAtom'
+
+export default function Dimmed() {
+  const dimmedState = useRecoilValue(dimmedStore)
+
+  const isDimmed = dimmedState ? 'fixed top-0 left-0 w-full h-full z-100 opacity-50 bg-black' : ''
+  return <div className={isDimmed}></div>
+}
diff --git a/src/components/ui/Loading.jsx b/src/components/ui/Loading.jsx
new file mode 100644
index 00000000..59d2170b
--- /dev/null
+++ b/src/components/ui/Loading.jsx
@@ -0,0 +1,5 @@
+import style from '@/components/ui/Loading.module.css'
+
+export default function Loading() {
+  return <span className={style.loader}></span>
+}
diff --git a/src/components/ui/Loading.module.css b/src/components/ui/Loading.module.css
new file mode 100644
index 00000000..7b3001f8
--- /dev/null
+++ b/src/components/ui/Loading.module.css
@@ -0,0 +1,35 @@
+.loader {
+  position: relative;
+  font-size: 48px;
+  letter-spacing: 6px;
+}
+.loader:before {
+  content: 'Loading';
+  color: #fff;
+}
+.loader:after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background-color: #ff3d00;
+  background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0), radial-gradient(circle 1px, #fff3 100%, transparent 0);
+  background-position:
+    14px -4px,
+    12px -1px;
+  border-radius: 50%;
+  position: absolute;
+  margin: auto;
+  top: -5px;
+  right: 66px;
+  transform-origin: center bottom;
+  animation: fillBaloon 1s ease-in-out infinite alternate;
+}
+
+@keyframes fillBaloon {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(3);
+  }
+}
diff --git a/src/components/ui/ObjectPlacement.jsx b/src/components/ui/ObjectPlacement.jsx
new file mode 100644
index 00000000..f7a73a5c
--- /dev/null
+++ b/src/components/ui/ObjectPlacement.jsx
@@ -0,0 +1,146 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Button, Input } from '@nextui-org/react'
+import { useRecoilState, useSetRecoilState } from 'recoil'
+import { modalState } from '@/store/modalAtom'
+import { fabric } from 'fabric'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { modeState, objectPlacementModeState } from '@/store/canvasAtom'
+import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
+
+const ObjectPlacement = ({ canvas }) => {
+  const [open, setOpen] = useRecoilState(modalState)
+  const [mode, setMode] = useRecoilState(modeState)
+  const [objectPlacementMode, setObjectPlacementModeState] = useRecoilState(objectPlacementModeState)
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
+  const [areaBoundary, setAreaBoundary] = useState(true)
+
+  // opening or shadow 개구 / 그림자
+  const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING)
+
+  // free or dimension 프리 / 치수
+  const [inputType, setInputType] = useState(INPUT_TYPE.FREE)
+
+  const handleSave = () => {
+    setMode(batchType)
+    setOpen(false)
+  }
+
+  return (
+    <div className="p-4 w-full max-w-xs border border-gray-300">
+      <div className="mb-4">
+        <label className="block text-gray-700 text-sm font-bold mb-2">오브젝트 배치</label>
+      </div>
+
+      <div className="border-b mb-4">
+        <h2 className="font-semibold">개구 · 그림자 배치</h2>
+      </div>
+
+      <div className="mb-4">
+        <div className="flex">
+          <Button
+            className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.OPENING ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
+            onClick={() => {
+              setBatchType(BATCH_TYPE.OPENING)
+              setObjectPlacementModeState({ ...objectPlacementMode, batchType: BATCH_TYPE.OPENING })
+            }}
+          >
+            개구 배치
+          </Button>
+          <Button
+            className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.SHADOW ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
+            onClick={() => {
+              setBatchType(BATCH_TYPE.SHADOW)
+              setObjectPlacementModeState({ ...objectPlacementMode, batchType: BATCH_TYPE.SHADOW })
+            }}
+          >
+            그림자 배치
+          </Button>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <div className="mb-2 text-gray-700 font-semibold">설정</div>
+
+        <div className="mb-2">
+          <label className="inline-flex items-center">
+            <Input
+              type="radio"
+              name="inputType"
+              checked={objectPlacementMode.inputType === INPUT_TYPE.FREE}
+              onClick={() => {
+                setObjectPlacementModeState({ ...objectPlacementMode, inputType: INPUT_TYPE.FREE })
+              }}
+              className="form-radio text-blue-500"
+            />
+            <span className="ml-2">프리입력</span>
+          </label>
+        </div>
+
+        <div className="mb-2">
+          <label className="inline-flex items-center">
+            <Input
+              type="radio"
+              name="inputType"
+              checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION}
+              onClick={() => {
+                setObjectPlacementModeState({ ...objectPlacementMode, inputType: INPUT_TYPE.DIMENSION })
+              }}
+              className="form-radio text-blue-500"
+            />
+            <span className="ml-2">치수입력</span>
+          </label>
+        </div>
+
+        <div className="flex mb-2">
+          <div className="mr-2">
+            <label className="block text-gray-700 text-sm mb-1">가로길이</label>
+            <Input
+              type="text"
+              className="w-full px-3 py-2 border rounded"
+              placeholder="mm"
+              value={objectPlacementMode.width}
+              onChange={(e) => {
+                setObjectPlacementModeState({ ...objectPlacementMode, width: e.target.value })
+              }}
+            />
+          </div>
+
+          <div>
+            <label className="block text-gray-700 text-sm mb-1">세로길이</label>
+            <Input
+              type="text"
+              className="w-full px-3 py-2 border rounded"
+              placeholder="mm"
+              value={objectPlacementMode.height}
+              onChange={(e) => {
+                setObjectPlacementModeState({ ...objectPlacementMode, height: e.target.value })
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <label className="inline-flex items-center">
+            <Input
+              type="checkbox"
+              name={`areaBoundary`}
+              checked={objectPlacementMode.areaBoundary}
+              onClick={() => setObjectPlacementModeState({ ...objectPlacementMode, areaBoundary: !objectPlacementMode.areaBoundary })}
+              className="form-checkbox text-blue-500"
+            />
+            <span className="ml-2">영역교차</span>
+          </label>
+        </div>
+
+        <div className="text-center">
+          <Button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
+            저장
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ObjectPlacement
diff --git a/src/components/ui/QSelect.jsx b/src/components/ui/QSelect.jsx
index 6ebf2bd6..198595d5 100644
--- a/src/components/ui/QSelect.jsx
+++ b/src/components/ui/QSelect.jsx
@@ -1,5 +1,6 @@
 import { Select, SelectItem } from '@nextui-org/react'
 import styles from './QSelect.module.css'
+import { useEffect } from 'react'
 
 const animals = [
   { key: 'cat', label: 'Cat' },
@@ -18,6 +19,7 @@ const animals = [
 ]
 
 export default function QSelect() {
+  useEffect(() => {}, [])
   return (
     <>
       <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
diff --git a/src/components/ui/SurfaceShape.jsx b/src/components/ui/SurfaceShape.jsx
new file mode 100644
index 00000000..01c557ff
--- /dev/null
+++ b/src/components/ui/SurfaceShape.jsx
@@ -0,0 +1,895 @@
+import { Button, Input } from '@nextui-org/react'
+import { useState } from 'react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { modalState } from '@/store/modalAtom'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
+import { degreesToRadians } from '@turf/turf'
+import { getIntersectionPoint } from '@/util/canvas-util'
+
+/**
+ * 면형상 배치 모달
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const SurfaceShapeModal = ({ canvas }) => {
+  const [type, setType] = useState(1)
+  const setOpen = useSetRecoilState(modalState)
+  const fontSize = useRecoilValue(fontSizeState)
+  //지붕재
+  const roofMaterial = useRecoilValue(roofMaterialState)
+
+  /**
+   * 최대 5개의 length
+   */
+  const [length1, setLength1] = useState(0)
+  const [length2, setLength2] = useState(0)
+  const [length3, setLength3] = useState(0)
+  const [length4, setLength4] = useState(0)
+  const [length5, setLength5] = useState(0)
+
+  // 방향
+  const [direction, setDirection] = useState('south')
+
+  /**
+   * 최대 5개의 length
+   */
+  const onChangeType = (e) => {
+    setType(Number(e.target.value))
+  }
+
+  const closeModal = () => {
+    setOpen(false)
+  }
+
+  const onSave = () => {
+    if (!checkValid()) {
+      alert('안됨')
+      return
+    }
+    let isDrawing = true
+    let obj = null
+    let points = []
+    canvas?.on('mouse:move', (e) => {
+      if (!isDrawing) {
+        return
+      }
+      const pointer = canvas?.getPointer(e.e)
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
+      switch (type) {
+        case 1: {
+          let newLength2 = length2
+
+          if (length3 !== 0) {
+            newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
+          }
+
+          points = [
+            { x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
+            { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
+            { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
+          ]
+
+          break
+        }
+        case 2: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+          ]
+
+          break
+        }
+        case 3: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
+            { x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
+          ]
+
+          break
+        }
+        case 4: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
+          ]
+
+          break
+        }
+        case 5: {
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+          ]
+
+          break
+        }
+
+        case 6: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
+          ]
+
+          break
+        }
+
+        case 7: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 - length3 },
+          ]
+
+          break
+        }
+        case 8: {
+          const angleInRadians = Math.asin(length2 / length3)
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+          ]
+
+          break
+        }
+        case 9: {
+          const angleInRadians = Math.asin(length2 / length3)
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x - length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+          ]
+
+          break
+        }
+        case 10: {
+          points = [
+            { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
+            { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
+            { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
+            { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
+            { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
+            { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
+            {
+              x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
+              y: pointer.y + (length4 + length5) / 2 - length5 + length5,
+            },
+            {
+              x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
+              y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
+            },
+          ]
+
+          break
+        }
+        case 11: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
+            { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
+            { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
+            { x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
+          ]
+
+          break
+        }
+        case 12: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
+            { x: pointer.x - length1 / 2 + length1 - length2 - (length1 - length2), y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
+          ]
+
+          break
+        }
+        case 13: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+            { x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+          ]
+          break
+        }
+        case 14: {
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+            { x: pointer.x + length1 / 2 - length1 + length3 + length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+          ]
+          break
+        }
+        case 15: {
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+            { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+          ]
+          break
+        }
+        case 16: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+            { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+          ]
+          break
+        }
+        case 17: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+            { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+          ]
+          break
+        }
+        case 18: {
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
+            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
+            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+            { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+          ]
+          break
+        }
+
+        case 19: {
+          const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+          const rightHypotenuse = (length4 / length3) * leftHypotenuse
+
+          const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
+
+          points = [
+            { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
+            { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+            {
+              x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle),
+              y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
+            },
+            {
+              x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
+              y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
+            },
+          ]
+
+          break
+        }
+        case 20: {
+          // 좌측 빗변
+          const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+          const leftHypotenuse = (length4 / length3) * rightHypotenuse
+
+          const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
+          points = [
+            {
+              x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(rightAngle),
+              y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(rightAngle),
+            },
+            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+            {
+              x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle),
+              y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
+            },
+            {
+              x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle) + length2,
+              y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
+            },
+          ]
+          break
+        }
+        case 21: {
+          const pointsArray = [
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+          ]
+
+          const tmpPolygon = new QPolygon(
+            [
+              { x: 0, y: length3 },
+              { x: length1 - length2, y: length3 },
+              { x: (length1 - length2) / 2, y: length3 - length3 },
+            ],
+            {
+              fill: 'transparent',
+              stroke: 'black', //black
+              strokeWidth: 2,
+              selectable: true,
+              fontSize: 0,
+            },
+          )
+
+          const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+          const scale = (length1 - length2) / coord.x
+
+          tmpPolygon.set({ scaleX: scale })
+
+          pointsArray[0].x = 0
+          pointsArray[0].y = length3 //바닥면부터 시작하게
+          pointsArray[1].x = pointsArray[0].x + length1
+          pointsArray[1].y = pointsArray[0].y
+          pointsArray[2].x = pointsArray[1].x
+          pointsArray[2].y = pointsArray[1].y - length4
+          pointsArray[3].x = pointsArray[2].x - length2
+          pointsArray[3].y = pointsArray[2].y
+          pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+          pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+          points = [
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - (length2 - length1 / 2),
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + pointsArray[4].x,
+              y: pointer.y - length3 + length4 / 2,
+            },
+          ]
+
+          break
+        }
+        case 22: {
+          const pointsArray = [
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+          ]
+
+          const tmpPolygon = new QPolygon(
+            [
+              { x: 0, y: length3 },
+              { x: length1 - length2, y: length3 },
+              { x: (length1 - length2) / 2, y: length3 - length3 },
+            ],
+            {
+              fill: 'transparent',
+              stroke: 'black', //black
+              strokeWidth: 2,
+              selectable: true,
+              fontSize: 0,
+            },
+          )
+
+          const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+          const scale = (length1 - length2) / coord.x
+
+          tmpPolygon.set({ scaleX: scale })
+
+          pointsArray[0].x = 0
+          pointsArray[0].y = length3 //바닥면부터 시작하게
+          pointsArray[1].x = pointsArray[0].x + length1
+          pointsArray[1].y = pointsArray[0].y
+          pointsArray[2].x = pointsArray[1].x
+          pointsArray[2].y = pointsArray[1].y - length4
+          pointsArray[3].x = pointsArray[2].x - length2
+          pointsArray[3].y = pointsArray[2].y
+          pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+          pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+          points = [
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - (length2 - length1 / 2),
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + pointsArray[4].x,
+              y: pointer.y - length3 + length4 / 2,
+            },
+          ]
+
+          break
+        }
+        case 23: {
+          points = [
+            { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
+            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
+            { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
+            { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
+          ]
+          break
+        }
+
+        case 24: {
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
+            { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
+          ]
+          break
+        }
+
+        case 25: {
+          points = [
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length3 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + (length1 - length2) / 2,
+              y: pointer.y + length3 / 2 - (length3 - length4),
+            },
+            {
+              x: pointer.x - length1 / 2 + (length1 - length2) / 2,
+              y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+            },
+            {
+              x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
+              y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+            },
+            {
+              x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
+              y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
+            },
+            {
+              x: pointer.x - length1 / 2 + length1,
+              y: pointer.y + length3 / 2,
+            },
+          ]
+          break
+        }
+        case 26: {
+          const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+          const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+
+          points = [
+            {
+              x: pointer.x - length1 / 2 + length1,
+              y: pointer.y + length3 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length3 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
+              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+            },
+            {
+              x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
+              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+            },
+            {
+              x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
+              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+            },
+          ]
+          break
+        }
+        case 27: {
+          const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+          const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+          points = [
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length3 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + length1,
+              y: pointer.y + length3 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)),
+              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+            },
+            {
+              x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2,
+              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+            },
+            {
+              x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2 - topL * Math.cos(degreesToRadians(angle)),
+              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+            },
+          ]
+          break
+        }
+        case 28: {
+          const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
+
+          const sinA = a / length3
+          const angleInRadians = Math.asin(sinA)
+          const angleInDegrees = angleInRadians * (180 / Math.PI)
+          const b = a - length1 / 2
+
+          const c = b / Math.tan(angleInRadians)
+          const d = Math.sqrt(b * b + c * c)
+          const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
+          points = [
+            { x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
+            {
+              x: pointer.x + length1 / 2 - b / 2 + d * Math.cos(newAngleInRadians),
+              y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians),
+            },
+            {
+              x: pointer.x - (length1 + b) / 2 + length3 * Math.cos(newAngleInRadians),
+              y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
+            },
+          ]
+          break
+        }
+        case 29: {
+          const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
+
+          const sinA = a / length3
+          const angleInRadians = Math.asin(sinA)
+          const angleInDegrees = angleInRadians * (180 / Math.PI)
+          const b = a - length1 / 2
+
+          const c = b / Math.tan(angleInRadians)
+          const d = Math.sqrt(b * b + c * c)
+          const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
+          points = [
+            {
+              x: pointer.x + length1 / 2 - b / 2 - length3 * Math.cos(newAngleInRadians),
+              y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
+            },
+            { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - (length1 + b) / 2 - d * Math.cos(newAngleInRadians), y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians) },
+          ]
+          break
+        }
+      }
+
+      const options = {
+        fill: 'transparent',
+        stroke: 'black',
+        strokeWidth: 2,
+        selectable: true,
+        fontSize: fontSize,
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
+        lockRotation: true, // 회전 잠금
+        lockScalingX: true, // X 축 크기 조정 잠금
+        lockScalingY: true, // Y 축 크기 조정 잠금
+        name: 'guideTriangle',
+        flipX: type === 22 ? true : false,
+      }
+
+      obj = new QPolygon(points, options)
+      obj.setCoords() //좌표 변경 적용
+
+      canvas?.add(obj)
+      obj.set({ direction: direction })
+
+      //각도 추가
+      let originAngle = 0 //기본 남쪽
+
+      if (direction === 'west') {
+        //서
+        originAngle = 90
+      } else if (direction === 'east') {
+        //동
+        originAngle = 270
+      } else if (direction === 'north') {
+        //북
+        originAngle = 180
+      }
+      obj.set({ originAngle: originAngle })
+
+      setCurrentPattern(obj)
+      canvas?.renderAll()
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+      obj.set('name', 'roof')
+    })
+    setOpen(false)
+  }
+
+  const checkValid = () => {
+    let result = true
+    switch (type) {
+      case 1: {
+        if (length3 !== 0 && length1 > length3) {
+          return
+        }
+        break
+      }
+      case 3: {
+        if (length3 > length1) {
+          return
+        }
+        break
+      }
+      case 6: {
+        if (length3 > length1) {
+          return
+        }
+        break
+      }
+      case 7: {
+        if (length3 > length1) {
+          return
+        }
+        break
+      }
+      case 8: {
+        if (length2 > length3) {
+          return
+        }
+        break
+      }
+      case 9: {
+        if (length2 > length3) {
+          return
+        }
+        break
+      }
+      case 21: {
+        if (length1 < length2) {
+          alert('1번보다 작게 입력해주세요.')
+          return
+        }
+
+        if (length3 < length4) {
+          alert('3번보다 작게 입력해주세요.')
+          return
+        }
+      }
+      case 22: {
+        if (length1 < length2) {
+          alert('1번보다 작게 입력해주세요.')
+          return
+        }
+
+        if (length3 < length4) {
+          alert('3번보다 작게 입력해주세요.')
+          return
+        }
+      }
+    }
+
+    return result
+  }
+
+  const setLength = (e) => {
+    let { name, value } = e.target
+    value = value.replace(/[^-0-9]/g, '')
+    switch (name) {
+      case 'length1':
+        setLength1(Number(value))
+        break
+      case 'length2':
+        setLength2(Number(value))
+        break
+      case 'length3':
+        setLength3(Number(value))
+        break
+      case 'length4':
+        setLength4(Number(value))
+        break
+      case 'length5':
+        setLength5(Number(value))
+        break
+      default:
+        break
+    }
+  }
+
+  const setCurrentPattern = (polygon) => {
+    const { width, height, roofStyle } = roofMaterial
+    const roofRatio = window.devicePixelRatio || 1
+    const patternSourceCanvas = document.createElement('canvas')
+
+    if (roofStyle === 1) {
+      patternSourceCanvas.width = width * roofRatio
+      patternSourceCanvas.height = height * roofRatio
+    } else if (roofStyle === 2) {
+      patternSourceCanvas.width = width * 2
+      patternSourceCanvas.height = height * 2
+    }
+
+    const ctx = patternSourceCanvas.getContext('2d')
+
+    ctx.scale(roofRatio, roofRatio)
+    ctx.strokeStyle = 'green'
+    ctx.lineWidth = 0.4
+    // 벽돌 패턴 그리기
+    if (roofStyle === 1) {
+      ctx.strokeRect(0, 0, 50, 30)
+    } else if (roofStyle === 2) {
+      // 지그재그
+      ctx.strokeRect(0, 0, 200, 100)
+      ctx.strokeRect(100, 100, 200, 100)
+    }
+
+    // 패턴 생성
+    const pattern = new fabric.Pattern({
+      source: patternSourceCanvas,
+      repeat: 'repeat',
+    })
+    polygon.set('fill', null)
+
+    polygon.set('fill', pattern)
+    canvas?.renderAll()
+  }
+
+  const ButtonComp = () => {
+    // Generate 29 buttons
+    const buttons = []
+    for (let i = 1; i <= 29; i++) {
+      buttons.push(
+        <Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
+          {i}번 추가
+        </Button>,
+      )
+    }
+
+    return <div>{buttons}</div>
+  }
+
+  return (
+    <>
+      <div>
+        <div>면형상배치{type}</div>
+        <ButtonComp></ButtonComp>
+      </div>
+      {type === 1 ? (
+        <div>
+          길이1
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          {length3 === 0 && (
+            <>
+              길이2
+              <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+            </>
+          )}
+          대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+        </div>
+      ) : [2, 4, 5].includes(type) ? (
+        <div>
+          길이1
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          길이2
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+        </div>
+      ) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
+        <>
+          길이1
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          길이2
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          길이3
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+        </>
+      ) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
+        <>
+          길이1
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          길이2
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          길이3
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          길이4
+          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
+        </>
+      ) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
+        <>
+          길이1
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
+          길이2
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
+          길이3
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          길이4
+          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
+          길이5
+          <Input type="text" name={'length5'} value={length5} onChange={setLength} />
+        </>
+      ) : (
+        <></>
+      )}
+      <div className="flex flex-col items-center">
+        <div className="flex">
+          <Button
+            className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('north')}
+          >
+            북
+          </Button>
+        </div>
+        <div className="flex space-x-4">
+          <Button
+            className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('west')}
+          >
+            서
+          </Button>
+          <Button
+            className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('east')}
+          >
+            동
+          </Button>
+        </div>
+        <div className="mt-4">
+          <Button
+            className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('south')}
+          >
+            남
+          </Button>
+        </div>
+      </div>
+      <div>
+        <Button className="m-1 p-2" color={'primary'} onClick={closeModal}>
+          닫기
+        </Button>
+        <Button className="m-1 p-2" color={'primary'} onClick={onSave}>
+          저장
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
new file mode 100644
index 00000000..1d67dbe8
--- /dev/null
+++ b/src/components/ui/ThumbnailLIst.jsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { memo } from 'react'
+import { Card, Image } from '@nextui-org/react'
+
+function ThumbnailList(props) {
+  const { thumbnails, canvas } = props
+
+  const handleSelectThumb = (canvasStatus) => {
+    console.log('canvasStatus', canvasStatus.length)
+    canvas?.clear() // 캔버스를 초기화합니다.
+    canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
+      canvas?.renderAll() // 캔버스를 다시 그립니다.
+    })
+  }
+
+  return (
+    <>
+      <div className="flex justify-center m-4 w-full">
+        {thumbnails.length > 0 &&
+          thumbnails.map((thumbnail, index) => (
+            <Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
+              <Image
+                alt="Woman listing to music"
+                className="object-cover"
+                height={200}
+                src={thumbnail.imageName}
+                width={200}
+                onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
+              />
+            </Card>
+          ))}
+      </div>
+    </>
+  )
+}
+
+export default memo(ThumbnailList)
diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js
new file mode 100644
index 00000000..355eca16
--- /dev/null
+++ b/src/hooks/roofcover/useOuterLineWall.js
@@ -0,0 +1,566 @@
+import { useEffect, useRef } from 'react'
+import { distanceBetweenPoints } from '@/util/canvas-util'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import {
+  adsorptionPointAddModeState,
+  adsorptionPointModeState,
+  adsorptionRangeState,
+  canvasState,
+  dotLineIntervalSelector,
+  verticalHorizontalModeState,
+} from '@/store/canvasAtom'
+import { useEvent } from '@/hooks/useEvent'
+import { useMouse } from '@/hooks/useMouse'
+import { useLine } from '@/hooks/useLine'
+import { useTempGrid } from '@/hooks/useTempGrid'
+import { usePolygon } from '@/hooks/usePolygon'
+import {
+  outerLineAngle1State,
+  outerLineArrow1State,
+  outerLineArrow2State,
+  outerLineLength1State,
+  outerLineLength2State,
+  outerLinePointsState,
+  outerLineTypeState,
+} from '@/store/outerLineAtom'
+import { calculateAngle } from '@/util/qpolygon-utils'
+
+export function useOuterLineWall() {
+  const canvas = useRecoilValue(canvasState)
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+    useEvent()
+  const { getIntersectMousePoint } = useMouse()
+  const { addLine, removeLine } = useLine()
+  const { tempGridMode } = useTempGrid()
+  const { addPolygonByLines } = usePolygon()
+  const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
+  const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
+  const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
+  const adsorptionRange = useRecoilValue(adsorptionRangeState)
+  const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
+
+  const length1Ref = useRef(null)
+  const length2Ref = useRef(null)
+  const angle1Ref = useRef(null)
+  const [length1, setLength1] = useRecoilState(outerLineLength1State)
+  const [length2, setLength2] = useRecoilState(outerLineLength2State)
+  const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
+  const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State)
+  const [points, setPoints] = useRecoilState(outerLinePointsState)
+  const [type, setType] = useRecoilState(outerLineTypeState)
+  const arrow1Ref = useRef(arrow1)
+  const arrow2Ref = useRef(arrow2)
+
+  const isFix = useRef(false)
+
+  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
+  useEffect(() => {
+    if (adsorptionPointAddMode || tempGridMode) {
+      return
+    }
+    removeMouseEvent('mouse:down', mouseDown)
+    addCanvasMouseEventListener('mouse:down', mouseDown)
+    clear()
+    return () => {
+      removeAllMouseEventListeners()
+    }
+  }, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
+
+  useEffect(() => {
+    arrow1Ref.current = arrow1
+  }, [arrow1])
+
+  useEffect(() => {
+    arrow2Ref.current = arrow2
+  }, [arrow2])
+
+  useEffect(() => {
+    removeAllDocumentEventListeners()
+    addDocumentEventListener('keydown', document, keydown[type])
+    clear()
+  }, [type])
+
+  const clear = () => {
+    setLength1(0)
+    setLength2(0)
+
+    setArrow1('')
+    setArrow2('')
+
+    setAngle1(0)
+  }
+
+  const mouseDown = (e) => {
+    let pointer = getIntersectMousePoint(e)
+
+    if (points.length === 0) {
+      setPoints((prev) => [...prev, pointer])
+    } else {
+      const lastPoint = points[points.length - 1]
+      let newPoint = { x: pointer.x, y: pointer.y }
+      const length = distanceBetweenPoints(lastPoint, newPoint)
+      if (verticalHorizontalMode) {
+        const vector = {
+          x: pointer.x - points[points.length - 1].x,
+          y: pointer.y - points[points.length - 1].y,
+        }
+        const slope = Math.abs(vector.y / vector.x) // 기울기 계산
+
+        let scaledVector
+        if (slope >= 1) {
+          // 기울기가 1 이상이면 x축 방향으로 그림
+          scaledVector = {
+            x: 0,
+            y: vector.y >= 0 ? Number(length) : -Number(length),
+          }
+        } else {
+          // 기울기가 1 미만이면 y축 방향으로 그림
+          scaledVector = {
+            x: vector.x >= 0 ? Number(length) : -Number(length),
+            y: 0,
+          }
+        }
+
+        const verticalLength = scaledVector.y
+        const horizontalLength = scaledVector.x
+
+        newPoint = {
+          x: lastPoint.x + horizontalLength,
+          y: lastPoint.y + verticalLength,
+        }
+      }
+      setPoints((prev) => [...prev, newPoint])
+    }
+  }
+
+  useEffect(() => {
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'outerLine' || obj.name === 'helpGuideLine')
+      .forEach((obj) => {
+        removeLine(obj)
+      })
+
+    canvas?.remove(canvas?.getObjects().find((obj) => obj.name === 'startPoint'))
+
+    // point가 변경 될때마다 이벤트 리스너를 제거하고 다시 등록
+    removeAllDocumentEventListeners()
+    addDocumentEventListener('keydown', document, keydown[type])
+
+    if (points.length === 0) {
+      return
+    }
+
+    if (points.length === 1) {
+      const point = new fabric.Circle({
+        radius: 5,
+        fill: 'transparent',
+        stroke: 'red',
+        left: points[0].x - 5,
+        top: points[0].y - 5,
+        selectable: false,
+        name: 'startPoint',
+      })
+
+      canvas?.add(point)
+    } else {
+      points.forEach((point, idx) => {
+        if (idx === 0) {
+          return
+        }
+        drawLine(points[idx - 1], point, idx)
+      })
+
+      const lastPoint = points[points.length - 1]
+      const firstPoint = points[0]
+
+      if (points.length < 3) {
+        return
+      }
+
+      /*if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
+        return
+      }
+
+      if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
+        let isAllRightAngle = true
+
+        const firstPoint = points[0]
+
+        points.forEach((point, idx) => {
+          if (idx === 0 || !isAllRightAngle) {
+            return
+          }
+
+          const angle = calculateAngle(point, firstPoint)
+          if (angle % 90 !== 0) {
+            isAllRightAngle = false
+          }
+        })
+
+        if (isAllRightAngle) {
+          return
+        }
+        const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+          stroke: 'grey',
+          strokeWidth: 1,
+          selectable: false,
+          name: 'helpGuideLine',
+        })
+
+        canvas?.add(line)
+        addLineText(line)
+      } else {
+        const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
+          stroke: 'grey',
+          strokeWidth: 1,
+          strokeDashArray: [1, 1, 1],
+          name: 'helpGuideLine',
+        })
+
+        const guideLine2 = new QLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
+          stroke: 'grey',
+          strokeWidth: 1,
+          strokeDashArray: [1, 1, 1],
+          name: 'helpGuideLine',
+        })
+        if (guideLine1.length > 0) {
+          canvas?.add(guideLine1)
+          addLineText(guideLine1)
+        }
+
+        canvas?.add(guideLine2)
+
+        addLineText(guideLine2)
+      }*/
+    }
+  }, [points])
+
+  const drawLine = (point1, point2, idx) => {
+    addLine([point1.x, point1.y, point2.x, point2.y], {
+      stroke: 'black',
+      strokeWidth: 3,
+      idx: idx,
+      selectable: false,
+      name: 'outerLine',
+    })
+  }
+
+  const settingLine = () => {
+    const outerLines = canvas?.getObjects().filter((obj) => obj.name === 'outerLine')
+    outerLines.forEach((line) => {
+      removeLine(line)
+    })
+
+    addPolygonByLines(outerLines, {
+      fill: 'rgba(0,0,0,0)',
+      stroke: 'black',
+      strokeWidth: 3,
+    })
+    setShowOutlineModal(false)
+  }
+
+  // 직각 완료될 경우 확인
+  const checkRightAngle = () => {
+    const length1Num = Number(length1Ref.current.value) / 10
+    const length2Num = Number(length2Ref.current.value) / 10
+
+    if (points.length === 0) {
+      return
+    }
+
+    if (length1Num === 0 || length2Num === 0 || arrow1Ref.current === '' || arrow2Ref.current === '') {
+      return
+    }
+
+    if (arrow1Ref.current === '↓' && arrow2Ref.current === '→') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x + length2Num, y: prev[prev.length - 1].y + length1Num }]
+      })
+    } else if (arrow1Ref.current === '↓' && arrow2Ref.current === '←') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x - length2Num, y: prev[prev.length - 1].y + length1Num }]
+      })
+    } else if (arrow1Ref.current === '↑' && arrow2Ref.current === '→') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x + length2Num, y: prev[prev.length - 1].y - length1Num }]
+      })
+    } else if (arrow1Ref.current === '↑' && arrow2Ref.current === '←') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x - length2Num, y: prev[prev.length - 1].y - length1Num }]
+      })
+    } else if (arrow1Ref.current === '→' && arrow2Ref.current === '↓') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x + length1Num, y: prev[prev.length - 1].y + length2Num }]
+      })
+    } else if (arrow1Ref.current === '→' && arrow2Ref.current === '↑') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x + length1Num, y: prev[prev.length - 1].y - length2Num }]
+      })
+    } else if (arrow1Ref.current === '←' && arrow2Ref.current === '↓') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x - length1Num, y: prev[prev.length - 1].y + length2Num }]
+      })
+    } else if (arrow1Ref.current === '←' && arrow2Ref.current === '↑') {
+      setPoints((prev) => {
+        if (prev.length === 0) {
+          return []
+        }
+        return [...prev, { x: prev[prev.length - 1].x - length1Num, y: prev[prev.length - 1].y - length2Num }]
+      })
+    }
+  }
+
+  const keydown = {
+    outerLine: (e) => {
+      if (points.length === 0) {
+        return
+      }
+      // 포커스가 length1에 있지 않으면 length1에 포커스를 줌
+      const activeElem = document.activeElement
+      if (activeElem !== length1Ref.current) {
+        length1Ref.current.focus()
+      }
+
+      const key = e.key
+
+      if (!length1Ref.current) {
+        return
+      }
+
+      const lengthNum = Number(length1Ref.current.value) / 10
+      if (lengthNum === 0) {
+        return
+      }
+      switch (key) {
+        case 'Down': // IE/Edge에서 사용되는 값
+        case 'ArrowDown': {
+          setArrow1('↓')
+          setPoints((prev) => {
+            if (prev.length === 0) {
+              return []
+            }
+            return [...prev, { x: prev[prev.length - 1].x, y: prev[prev.length - 1].y + lengthNum }]
+          })
+          break
+        }
+        case 'Up': // IE/Edge에서 사용되는 값
+        case 'ArrowUp':
+          setArrow1('↑')
+          setPoints((prev) => {
+            if (prev.length === 0) {
+              return []
+            }
+            return [...prev, { x: prev[prev.length - 1].x, y: prev[prev.length - 1].y - lengthNum }]
+          })
+          break
+        case 'Left': // IE/Edge에서 사용되는 값
+        case 'ArrowLeft':
+          setArrow1('←')
+          setPoints((prev) => {
+            if (prev.length === 0) {
+              return []
+            }
+            return [...prev, { x: prev[prev.length - 1].x - lengthNum, y: prev[prev.length - 1].y }]
+          })
+          break
+        case 'Right': // IE/Edge에서 사용되는 값
+        case 'ArrowRight':
+          setArrow1('→')
+          setPoints((prev) => {
+            if (prev.length === 0) {
+              return []
+            }
+            return [...prev, { x: prev[prev.length - 1].x + lengthNum, y: prev[prev.length - 1].y }]
+          })
+          break
+      }
+    },
+    rightAngle: (e) => {
+      if (points.length === 0) {
+        return
+      }
+      const key = e.key
+
+      const activeElem = document.activeElement
+      if (activeElem !== length1Ref.current && activeElem !== length2Ref.current) {
+        length1Ref.current.focus()
+      }
+
+      switch (key) {
+        case 'Down': // IE/Edge에서 사용되는 값
+        case 'ArrowDown': {
+          if (activeElem === length1Ref.current) {
+            setArrow1('↓')
+            arrow1Ref.current = '↓'
+            length2Ref.current.focus()
+          } else if (activeElem === length2Ref.current) {
+            if (arrow1Ref.current === '↓' || arrow1Ref.current === '↑') {
+              break
+            }
+            setArrow2('↓')
+            arrow2Ref.current = '↓'
+            checkRightAngle()
+          }
+
+          break
+        }
+        case 'Up': // IE/Edge에서 사용되는 값
+        case 'ArrowUp':
+          if (activeElem === length1Ref.current) {
+            setArrow1('↑')
+            arrow1Ref.current = '↑'
+            length2Ref.current.focus()
+          } else if (activeElem === length2Ref.current) {
+            if (arrow1Ref.current === '↓' || arrow1Ref.current === '↑') {
+              break
+            }
+            setArrow2('↑')
+            arrow2Ref.current = '↑'
+            checkRightAngle()
+          }
+
+          break
+        case 'Left': // IE/Edge에서 사용되는 값
+        case 'ArrowLeft':
+          if (activeElem === length1Ref.current) {
+            setArrow1('←')
+            arrow1Ref.current = '←'
+            length2Ref.current.focus()
+          } else if (activeElem === length2Ref.current) {
+            if (arrow1Ref.current === '←' || arrow1Ref.current === '→') {
+              break
+            }
+            setArrow2('←')
+            arrow2Ref.current = '←'
+            checkRightAngle()
+          }
+
+          break
+        case 'Right': // IE/Edge에서 사용되는 값
+        case 'ArrowRight':
+          if (activeElem === length1Ref.current) {
+            setArrow1('→')
+            arrow1Ref.current = '→'
+            length2Ref.current.focus()
+          } else if (activeElem === length2Ref.current) {
+            if (arrow1Ref.current === '←' || arrow1Ref.current === '→') {
+              break
+            }
+            setArrow2('→')
+            arrow2Ref.current = '→'
+            checkRightAngle()
+          }
+
+          break
+      }
+    },
+    leeGubae: (e) => {
+      console.log('leegubae')
+    },
+    angle: (e) => {
+      const key = e.key
+      switch (key) {
+        case 'Enter': {
+          setPoints((prev) => {
+            if (prev.length === 0) {
+              return []
+            }
+            const lastPoint = prev[prev.length - 1]
+            const length = length1Ref.current.value / 10
+            const angle = angle1Ref.current.value
+            //lastPoint로부터 angle1만큼의 각도로 length1만큼의 길이를 가지는 선을 그림
+            const radian = (angle * Math.PI) / 180
+
+            const x = lastPoint.x + length * Math.cos(radian)
+            const y = lastPoint.y - length * Math.sin(radian)
+            return [...prev, { x, y }]
+          })
+        }
+      }
+    },
+    diagonalLine: (e) => {
+      console.log('diagonalLine')
+    },
+  }
+
+  /**
+   * 일변전으로 돌아가기
+   */
+  const handleRollback = () => {
+    //points의 마지막 요소를 제거
+    setPoints((prev) => prev.slice(0, prev.length - 1))
+  }
+
+  const handleFix = () => {
+    if (points.length < 3) {
+      return
+    }
+
+    let isAllRightAngle = true
+
+    const firstPoint = points[0]
+
+    points.forEach((point, idx) => {
+      if (idx === 0 || !isAllRightAngle) {
+        return
+      }
+
+      const angle = calculateAngle(point, firstPoint)
+      if (angle % 90 !== 0) {
+        isAllRightAngle = false
+      }
+    })
+
+    if (isAllRightAngle) {
+      alert('부정확한 다각형입니다.')
+      return
+    }
+
+    setPoints((prev) => {
+      return [...prev, { x: prev[0].x, y: prev[0].y }]
+    })
+  }
+
+  return {
+    points,
+    setPoints,
+    length1,
+    setLength1,
+    length2,
+    setLength2,
+    length1Ref,
+    length2Ref,
+    arrow1,
+    setArrow1,
+    arrow2,
+    setArrow2,
+    arrow1Ref,
+    arrow2Ref,
+    type,
+    setType,
+    handleFix,
+    handleRollback,
+  }
+}
diff --git a/src/hooks/useAdsorptionPoint.js b/src/hooks/useAdsorptionPoint.js
new file mode 100644
index 00000000..44e2495b
--- /dev/null
+++ b/src/hooks/useAdsorptionPoint.js
@@ -0,0 +1,45 @@
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
+import { fabric } from 'fabric'
+import { useMouse } from '@/hooks/useMouse'
+
+export function useAdsorptionPoint() {
+  const canvas = useRecoilValue(canvasState)
+  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
+  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
+  const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
+
+  const { getIntersectMousePoint } = useMouse()
+
+  const getAdsorptionPoints = () => {
+    return canvas.getObjects().filter((obj) => obj.visible && obj.name === 'adsorptionPoint')
+  }
+
+  const adsorptionPointAddModeStateEvent = (opt) => {
+    //흡착점 모드일 경우
+    let pointer = getIntersectMousePoint(opt)
+
+    const adsorptionPoint = new fabric.Circle({
+      radius: 3,
+      fill: 'red',
+      left: pointer.x - 3,
+      top: pointer.y - 3,
+      x: pointer.x,
+      y: pointer.y,
+      selectable: false,
+      name: 'adsorptionPoint',
+    })
+
+    canvas.add(adsorptionPoint)
+
+    canvas.renderAll()
+  }
+
+  return {
+    adsorptionPointAddMode,
+    adsorptionPointMode,
+    adsorptionRange,
+    getAdsorptionPoints,
+    adsorptionPointAddModeStateEvent,
+  }
+}
diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js
index 3fa1f4f4..a1ecda2a 100644
--- a/src/hooks/useAxios.js
+++ b/src/hooks/useAxios.js
@@ -5,7 +5,7 @@ const AxiosType = {
   EXTERNAL: 'External',
 }
 
-export function useAxios() {
+export function useAxios(lang = '') {
   const getInstances = (url) => {
     let type = AxiosType.INTERNAL
     url.startsWith('http') ? (type = AxiosType.EXTERNAL) : ''
@@ -14,6 +14,7 @@ export function useAxios() {
       baseURL: type === AxiosType.INTERNAL ? process.env.NEXT_PUBLIC_API_SERVER_PATH : '',
       headers: {
         Accept: 'application/json',
+        lang,
       },
     })
   }
@@ -38,6 +39,10 @@ export function useAxios() {
       .catch(console.error)
   }
 
+  const promiseGet = async ({ url }) => {
+    return await getInstances(url).get(url)
+  }
+
   const post = async ({ url, data }) => {
     return await getInstances(url)
       .post(url, data)
@@ -45,6 +50,10 @@ export function useAxios() {
       .catch(console.error)
   }
 
+  const promisePost = async ({ url, data }) => {
+    return await getInstances(url).post(url, data)
+  }
+
   const put = async ({ url, data }) => {
     return await getInstances(url)
       .put(url, data)
@@ -52,6 +61,10 @@ export function useAxios() {
       .catch(console.error)
   }
 
+  const promisePut = async ({ url, data }) => {
+    return await getInstances(url).put(url, data)
+  }
+
   const patch = async ({ url, data }) => {
     return await getInstances(url)
       .patch(url, data)
@@ -66,5 +79,5 @@ export function useAxios() {
       .catch(console.error)
   }
 
-  return { get, post, put, patch, del }
+  return { get, promiseGet, post, promisePost, put, promisePut, patch, del }
 }
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 4f5035bc..37ffdc5f 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -1,23 +1,27 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { fabric } from 'fabric'
-import { actionHandler, anchorWrapper, calculateIntersection, distanceBetweenPoints, polygonPositionHandler } from '@/util/canvas-util'
+
+import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
-import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+import { canvasSizeState, canvasState, fontSizeState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
 import { defineQPloygon } from '@/util/qpolygon-utils'
-
-import * as turf from '@turf/turf'
+import { writeImage } from '@/lib/canvas'
+import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import { post } from '@/lib/Axios'
+import { v4 as uuidv4 } from 'uuid'
 
 export function useCanvas(id) {
-  const [canvas, setCanvas] = useState()
+  const [canvas, setCanvas] = useRecoilState(canvasState)
   const [isLocked, setIsLocked] = useState(false)
   const [history, setHistory] = useState([])
+  const [backImg, setBackImg] = useState()
   const [canvasSize] = useRecoilState(canvasSizeState)
   const [fontSize] = useRecoilState(fontSizeState)
-  const points = useRef([])
+  const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
 
   /**
    * 처음 셋팅
@@ -31,15 +35,17 @@ export function useCanvas(id) {
     })
 
     setCanvas(c)
+    setCanvasForEvent(c)
+
     return () => {
-      c.dispose()
+      // c.dispose()
+      c.clear()
     }
   }, [])
 
   useEffect(() => {
     // canvas 사이즈가 변경되면 다시
-    removeEventOnCanvas()
-    addEventOnCanvas()
+    attachDefaultEventOnCanvas()
   }, [canvasSize])
 
   useEffect(() => {
@@ -65,71 +71,9 @@ export function useCanvas(id) {
   useEffect(() => {
     if (canvas) {
       initialize()
-      canvas?.on('object:added', onChange)
-      canvas?.on('object:added', addEventOnObject)
-
-      canvas?.on('object:modified', onChange)
-      canvas?.on('object:removed', onChange)
-      canvas?.on('mouse:move', drawMouseLines)
-      canvas?.on('mouse:out', removeMouseLines)
+      attachDefaultEventOnCanvas()
     }
   }, [canvas])
-  const addEventOnCanvas = () => {
-    canvas?.on('object:added', onChange)
-    canvas?.on('object:modified', onChange)
-    canvas?.on('object:removed', onChange)
-    canvas?.on('object:added', () => {
-      document.addEventListener('keydown', handleKeyDown)
-    })
-
-    canvas?.on('mouse:move', drawMouseLines)
-    canvas?.on('mouse:down', handleMouseDown)
-    canvas?.on('mouse:out', removeMouseLines)
-  }
-
-  const removeEventOnCanvas = () => {
-    canvas?.off('object:added')
-    canvas?.off('object:modified')
-    canvas?.off('object:removed')
-    canvas?.off('object:added')
-    canvas?.off('mouse:move')
-    canvas?.off('mouse:down')
-  }
-
-  const addEventOnObject = (e) => {
-    const target = e.target
-    if (target.name === 'cell') {
-      target.on('mousedown', () => {
-        if (target.get('selected')) {
-          target.set({ selected: false })
-          target.set({ fill: '#BFFD9F' })
-        } else {
-          target.set({ selected: true })
-          target.set({ fill: 'red' })
-        }
-        canvas?.renderAll()
-      })
-    }
-
-    if (target.name === 'trestle') {
-      target.on('mousedown', () => {
-        if (target.defense === 'north') {
-          alert('북쪽은 선택 불가합니다.')
-          return
-        }
-        if (target.get('selected')) {
-          target.set({ strokeWidth: 1 })
-          target.set({ strokeDashArray: [5, 5] })
-          target.set({ selected: false })
-        } else {
-          target.set({ strokeWidth: 5 })
-          target.set({ strokeDashArray: [0, 0] })
-          target.set({ selected: true })
-        }
-        canvas?.renderAll()
-      })
-    }
-  }
 
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
@@ -146,6 +90,7 @@ export function useCanvas(id) {
     canvas.getObjects().length > 0 && canvas?.clear()
     // settings for all canvas in the app
     fabric.Object.prototype.transparentCorners = false
+    fabric.Object.prototype.id = uuidv4()
     fabric.Object.prototype.cornerColor = '#2BEBC8'
     fabric.Object.prototype.cornerStyle = 'rect'
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
@@ -179,71 +124,6 @@ export function useCanvas(id) {
     setIsLocked(false)
   }
 
-  const drawMouseLines = (e) => {
-    // 현재 마우스 포인터의 위치를 가져옵니다.
-    const pointer = canvas?.getPointer(e.e)
-
-    // 기존에 그려진 가이드라인을 제거합니다.
-    removeMouseLines()
-
-    if (canvas?.getActiveObject()) {
-      return
-    }
-
-    // 가로선을 그립니다.
-    const horizontalLine = new fabric.Line([0, pointer.y, canvasSize.horizontal, pointer.y], {
-      stroke: 'black',
-      strokeWidth: 1,
-      selectable: false,
-      name: 'mouseLine',
-    })
-
-    // 세로선을 그립니다.
-    const verticalLine = new fabric.Line([pointer.x, 0, pointer.x, canvasSize.vertical], {
-      stroke: 'black',
-      strokeWidth: 1,
-      selectable: false,
-      name: 'mouseLine',
-    })
-
-    // 선들을 캔버스에 추가합니다.
-    canvas?.add(horizontalLine, verticalLine)
-
-    // 캔버스를 다시 그립니다.
-    canvas?.renderAll()
-  }
-
-  const handleMouseDown = (e) => {
-    // 현재 마우스 포인터의 위치를 가져옵니다.
-    if (canvas?.getActiveObject()) {
-      points.current = []
-      return
-    }
-    const pointer = canvas?.getPointer(e.e)
-
-    // 클릭한 위치를 배열에 추가합니다.
-    points.current.push(pointer)
-
-    // 두 점을 모두 찍었을 때 사각형을 그립니다.
-    if (points.current.length === 2) {
-      const rect = new fabric.Rect({
-        left: points.current[0].x,
-        top: points.current[0].y,
-        width: points.current[1].x - points.current[0].x,
-        height: points.current[1].y - points.current[0].y,
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 1,
-      })
-
-      // 사각형을 캔버스에 추가합니다.
-      canvas?.add(rect)
-
-      // 배열을 초기화합니다.
-      points.current = []
-    }
-  }
-
   /**
    * 눈금 모양에 맞게 움직이도록 한다.
    */
@@ -261,12 +141,24 @@ export function useCanvas(id) {
     if (canvas) {
       if (canvas?._objects.length > 0) {
         const poppedObject = canvas?._objects.pop()
+        const group = []
+        group.push(poppedObject)
+
+        if (poppedObject.parent || poppedObject.parentId) {
+          canvas
+            ?.getObjects()
+            .filter((obj) => obj.parent === poppedObject.parent || obj.parentId === poppedObject.parentId || obj === poppedObject.parent)
+            .forEach((obj) => {
+              group.push(obj)
+              canvas?.remove(obj)
+            })
+        }
 
         setHistory((prev) => {
           if (prev === undefined) {
-            return poppedObject ? [poppedObject] : []
+            return poppedObject ? [group] : []
           }
-          return poppedObject ? [...prev, poppedObject] : prev
+          return poppedObject ? [...prev, group] : prev
         })
         canvas?.renderAll()
       }
@@ -277,7 +169,13 @@ export function useCanvas(id) {
     if (canvas && history) {
       if (history.length > 0) {
         setIsLocked(true)
-        canvas?.add(history[history.length - 1])
+        if (Array.isArray(history[history.length - 1])) {
+          history[history.length - 1].forEach((obj) => {
+            canvas?.add(obj)
+          })
+        } else {
+          canvas?.add(history[history.length - 1])
+        }
         const newHistory = history.slice(0, -1)
         setHistory(newHistory)
       }
@@ -302,25 +200,6 @@ export function useCanvas(id) {
     })
   }
 
-  /**
-   * 선택한 도형을 삭제한다.
-   */
-  const handleDelete = () => {
-    const targets = canvas?.getActiveObjects()
-    if (targets?.length === 0) {
-      alert('삭제할 대상을 선택해주세요.')
-      return
-    }
-
-    if (!confirm('정말로 삭제하시겠습니까?')) {
-      return
-    }
-
-    targets?.forEach((target) => {
-      canvas?.remove(target)
-    })
-  }
-
   /**
    * 페이지 내 캔버스 저장
    * todo : 현재는 localStorage에 그냥 저장하지만 나중에 변경해야함
@@ -418,50 +297,6 @@ export function useCanvas(id) {
     canvas?.renderAll()
   }
 
-  /**
-   * 각종 키보드 이벤트
-   * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
-   */
-  const handleKeyDown = (e) => {
-    const key = e.key
-
-    switch (key) {
-      case 'Delete':
-      case 'Backspace':
-        handleDelete()
-        break
-      case 'Down': // IE/Edge에서 사용되는 값
-      case 'ArrowDown':
-        // "아래 화살표" 키가 눌렸을 때의 동작입니다.
-        moveDown()
-        break
-      case 'Up': // IE/Edge에서 사용되는 값
-      case 'ArrowUp':
-        // "위 화살표" 키가 눌렸을 때의 동작입니다.
-        moveUp()
-        break
-      case 'Left': // IE/Edge에서 사용되는 값
-      case 'ArrowLeft':
-        // "왼쪽 화살표" 키가 눌렸을 때의 동작입니다.
-        moveLeft()
-        break
-      case 'Right': // IE/Edge에서 사용되는 값
-      case 'ArrowRight':
-        // "오른쪽 화살표" 키가 눌렸을 때의 동작입니다.
-        moveRight()
-        break
-      case 'Enter':
-        // "enter" 또는 "return" 키가 눌렸을 때의 동작입니다.
-        break
-      case 'Esc': // IE/Edge에서 사용되는 값
-      case 'Escape':
-        break
-      default:
-        return // 키 이벤트를 처리하지 않는다면 종료합니다.
-    }
-    e.preventDefault()
-  }
-
   const handleRotate = (degree = 45) => {
     const target = canvas?.getActiveObject()
 
@@ -502,16 +337,28 @@ export function useCanvas(id) {
    * 이미지로 저장하는 함수
    * @param {string} title - 저장할 이미지 이름
    */
-  const saveImage = (title = 'canvas') => {
-    const dataURL = canvas?.toDataURL('png')
+  const saveImage = async (title = 'canvas', userId, setThumbnails) => {
+    removeMouseLines()
+    await writeImage(title, canvas?.toDataURL('image/png').replace('data:image/png;base64,', ''))
+      .then((res) => {
+        console.log('success', res)
+      })
+      .catch((err) => {
+        console.log('err', err)
+      })
 
-    // 이미지 다운로드 링크 생성
-    const link = document.createElement('a')
-    link.download = `${title}.png`
-    link.href = dataURL
+    const canvasStatus = addCanvas()
 
-    // 링크 클릭하여 이미지 다운로드
-    link.click()
+    const patternData = {
+      userId: userId,
+      imageName: title,
+      objectNo: 'test123240822001',
+      canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
+    }
+
+    await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
+
+    setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
   }
 
   const handleFlip = () => {
@@ -596,20 +443,80 @@ export function useCanvas(id) {
       'lockScalingY',
       'opacity',
       'cells',
+      'maxX',
+      'maxY',
+      'minX',
+      'minY',
+      'x',
+      'y',
+      'stickeyPoint',
     ])
 
     const str = JSON.stringify(objs)
 
     canvas?.clear()
+    return str
 
-    setTimeout(() => {
-      // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
-      canvas?.loadFromJSON(JSON.parse(str), function () {
-        // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
-        console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
-        canvas?.renderAll() // 캔버스를 다시 그립니다.
+    // setTimeout(() => {
+    //   // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
+    //   canvas?.loadFromJSON(JSON.parse(str), function () {
+    //     // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
+    //     console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
+    //     canvas?.renderAll() // 캔버스를 다시 그립니다.
+    //   })
+    // }, 1000)
+  }
+
+  /**
+   * cad 파일 사용시 이미지 로딩 함수
+   */
+  const handleBackImageLoadToCanvas = (url) => {
+    console.log('image load url: ', url)
+
+    fabric.Image.fromURL(url, function (img) {
+      img.set({
+        left: 0,
+        top: 0,
+        width: 1500,
+        height: 1500,
+        selectable: true,
       })
-    }, 1000)
+      canvas.add(img)
+      canvas.renderAll()
+      setBackImg(img)
+    })
+  }
+
+  const handleCadImageInit = () => {
+    canvas.clear()
+  }
+
+  const getCurrentCanvas = () => {
+    return canvas.toJSON([
+      'selectable',
+      'name',
+      'parentId',
+      'id',
+      'length',
+      'idx',
+      'direction',
+      'lines',
+      'points',
+      'lockMovementX',
+      'lockMovementY',
+      'lockRotation',
+      'lockScalingX',
+      'lockScalingY',
+      'opacity',
+      'cells',
+      'maxX',
+      'maxY',
+      'minX',
+      'minY',
+      'x',
+      'y',
+      'stickeyPoint',
+    ])
   }
 
   return {
@@ -618,7 +525,6 @@ export function useCanvas(id) {
     handleUndo,
     handleRedo,
     handleCopy,
-    handleDelete,
     handleSave,
     handlePaste,
     handleRotate,
@@ -627,5 +533,10 @@ export function useCanvas(id) {
     handleFlip,
     setCanvasBackgroundWithDots,
     addCanvas,
+    removeMouseLines,
+    handleBackImageLoadToCanvas,
+    handleCadImageInit,
+    backImg,
+    setBackImg,
   }
 }
diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js
new file mode 100644
index 00000000..55a34cb2
--- /dev/null
+++ b/src/hooks/useCanvasEvent.js
@@ -0,0 +1,334 @@
+import { useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { canvasSizeState, currentObjectState } from '@/store/canvasAtom'
+import { QPolygon } from '@/components/fabric/QPolygon'
+
+// 캔버스에 필요한 이벤트
+export function useCanvasEvent() {
+  const [canvas, setCanvasForEvent] = useState(null)
+  const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
+  const canvasSize = useRecoilValue(canvasSizeState)
+
+  // 기본적인 이벤트 필요시 추가
+  const attachDefaultEventOnCanvas = () => {
+    removeEventOnCanvas()
+    canvas?.on('object:added', objectEvent.onChange)
+    canvas?.on('object:added', objectEvent.addEvent)
+    canvas?.on('object:modified', objectEvent.onChange)
+    canvas?.on('object:removed', objectEvent.onChange)
+    canvas?.on('selection:cleared', selectionEvent.cleared)
+    canvas?.on('selection:created', selectionEvent.created)
+    canvas?.on('selection:updated', selectionEvent.updated)
+    /*canvas?.on('object:added', () => {
+      document.addEventListener('keydown', handleKeyDown)
+    })*/
+    canvas?.on('object:removed', objectEvent.removed)
+  }
+
+  const objectEvent = {
+    onChange: (e) => {
+      const target = e.target
+      if (target) {
+        // settleDown(target)
+      }
+    },
+    addEvent: (e) => {
+      const target = e.target
+
+      if (target.type === 'QPolygon' || target.type === 'QLine') {
+        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
+        textObjs.forEach((obj) => {
+          obj.bringToFront()
+        })
+      }
+
+      if (target.name === 'cell') {
+        target.on('mousedown', () => {
+          if (target.get('selected')) {
+            target.set({ selected: false })
+            target.set({ fill: '#BFFD9F' })
+          } else {
+            target.set({ selected: true })
+            target.set({ fill: 'red' })
+          }
+          canvas?.renderAll()
+        })
+      }
+
+      if (target.name === 'trestle') {
+        target.on('mousedown', () => {
+          if (target.defense === 'north') {
+            alert('북쪽은 선택 불가합니다.')
+            return
+          }
+          if (target.get('selected')) {
+            target.set({ strokeWidth: 1 })
+            target.set({ strokeDashArray: [5, 5] })
+            target.set({ selected: false })
+          } else {
+            target.set({ strokeWidth: 5 })
+            target.set({ strokeDashArray: [0, 0] })
+            target.set({ selected: true })
+          }
+          canvas?.renderAll()
+        })
+      }
+
+      if (target.name === 'lengthText') {
+        const x = target.left
+        const y = target.top
+        // Add a property to store the previous value
+        const previousValue = target.text
+        target.on('selected', (e) => {
+          Object.keys(target.controls).forEach((controlKey) => {
+            target.setControlVisible(controlKey, false)
+          })
+        })
+        /*target.on('editing:exited', () => {
+          if (isNaN(target.text.trim())) {
+            target.set({ text: previousValue })
+            canvas?.renderAll()
+            return
+          }
+          const updatedValue = parseFloat(target.text.trim())
+          const targetParent = target.parent
+          const points = targetParent.getCurrentPoints()
+          const i = target.idx // Assuming target.index gives the index of the point
+
+          const startPoint = points[i]
+          const endPoint = points[(i + 1) % points.length]
+
+          const dx = endPoint.x - startPoint.x
+          const dy = endPoint.y - startPoint.y
+
+          const currentLength = Math.sqrt(dx * dx + dy * dy)
+          const scaleFactor = updatedValue / currentLength
+
+          const newEndPoint = {
+            x: startPoint.x + dx * scaleFactor,
+            y: startPoint.y + dy * scaleFactor,
+          }
+
+          const newPoints = [...points]
+          newPoints[(i + 1) % points.length] = newEndPoint
+
+          for (let idx = i + 1; idx < points.length; idx++) {
+            if (newPoints[idx].x === endPoint.x) {
+              newPoints[idx].x = newEndPoint.x
+            } else if (newPoints[idx].y === endPoint.y) {
+              newPoints[idx].y = newEndPoint.y
+            }
+          }
+
+          const newPolygon = new QPolygon(newPoints, targetParent.initOptions)
+          canvas?.add(newPolygon)
+          canvas?.remove(targetParent)
+          canvas?.renderAll()
+        })*/
+
+        target.on('moving', (e) => {
+          if (target.parentDirection === 'left' || target.parentDirection === 'right') {
+            const minX = target.minX
+            const maxX = target.maxX
+
+            if (target.left <= minX) {
+              target.set({ left: minX, top: y })
+            } else if (target.left >= maxX) {
+              target.set({ left: maxX, top: y })
+            } else {
+              target.set({ top: y })
+            }
+          } else if (target.parentDirection === 'top' || target.parentDirection === 'bottom') {
+            const minY = target.minY
+            const maxY = target.maxY
+
+            if (target.top <= minY) {
+              target.set({ left: x, top: minY })
+            } else if (target.top >= maxY) {
+              target.set({ left: x, top: maxY })
+            } else {
+              target.set({ left: x })
+            }
+          }
+          canvas?.renderAll()
+        })
+      }
+    },
+    removed: (e) => {
+      const whiteList = ['mouseLine', 'guideLine']
+
+      if (whiteList.includes(e.target.name)) {
+        return
+      }
+    },
+  }
+
+  const selectionEvent = {
+    created: (e) => {
+      const target = e.selected[0]
+      setCurrentObject(target)
+    },
+    cleared: (e) => {
+      setCurrentObject(null)
+    },
+    updated: (e) => {
+      const target = e.selected[0]
+      setCurrentObject(target)
+    },
+  }
+
+  const removeEventOnCanvas = () => {
+    canvas?.off('object:added')
+    canvas?.off('object:modified')
+    canvas?.off('object:removed')
+    canvas?.off('selection:cleared')
+    canvas?.off('selection:created')
+    canvas?.off('selection:updated')
+  }
+
+  /**
+   * 각종 키보드 이벤트
+   * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+   */
+  const handleKeyDown = (e) => {
+    const key = e.key
+
+    switch (key) {
+      case 'Delete':
+      case 'Backspace':
+        handleDelete()
+        break
+      case 'Down': // IE/Edge에서 사용되는 값
+      case 'ArrowDown':
+        // "아래 화살표" 키가 눌렸을 때의 동작입니다.
+        moveDown()
+        break
+      case 'Up': // IE/Edge에서 사용되는 값
+      case 'ArrowUp':
+        // "위 화살표" 키가 눌렸을 때의 동작입니다.
+        moveUp()
+        break
+      case 'Left': // IE/Edge에서 사용되는 값
+      case 'ArrowLeft':
+        // "왼쪽 화살표" 키가 눌렸을 때의 동작입니다.
+        moveLeft()
+        break
+      case 'Right': // IE/Edge에서 사용되는 값
+      case 'ArrowRight':
+        // "오른쪽 화살표" 키가 눌렸을 때의 동작입니다.
+        moveRight()
+        break
+      case 'Enter':
+        // "enter" 또는 "return" 키가 눌렸을 때의 동작입니다.
+        break
+      case 'Esc': // IE/Edge에서 사용되는 값
+      case 'Escape':
+        break
+
+      case 'z':
+        if (!e.ctrlKey) {
+          return
+        }
+
+        console.log('뒤로가기')
+
+        break
+
+      default:
+        return // 키 이벤트를 처리하지 않는다면 종료합니다.
+    }
+    e.preventDefault()
+  }
+
+  const moveDown = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let top = targetObj.top + 10
+
+    if (top > canvasSize.vertical) {
+      top = canvasSize.vertical
+    }
+
+    targetObj.set({ top: top })
+    targetObj.fire('modified')
+    canvas?.renderAll()
+  }
+
+  const moveUp = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let top = targetObj.top - 10
+
+    if (top < 0) {
+      top = 0
+    }
+
+    targetObj.set({ top: top })
+    targetObj.fire('modified')
+    canvas?.renderAll()
+  }
+
+  const moveLeft = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let left = targetObj.left - 10
+
+    if (left < 0) {
+      left = 0
+    }
+
+    targetObj.set({ left: left })
+    targetObj.fire('modified')
+    canvas?.renderAll()
+  }
+
+  const moveRight = () => {
+    const targetObj = canvas?.getActiveObject()
+    if (!targetObj) {
+      return
+    }
+
+    let left = targetObj.left + 10
+
+    if (left > canvasSize.horizontal) {
+      left = canvasSize.horizontal
+    }
+
+    targetObj.set({ left: left })
+    targetObj.fire('modified')
+    canvas?.renderAll()
+  }
+
+  /**
+   * 선택한 도형을 삭제한다.
+   */
+  const handleDelete = () => {
+    const targets = canvas?.getActiveObjects()
+    if (targets?.length === 0) {
+      alert('삭제할 대상을 선택해주세요.')
+      return
+    }
+
+    if (!confirm('정말로 삭제하시겠습니까?')) {
+      return
+    }
+
+    targets?.forEach((target) => {
+      canvas?.remove(target)
+    })
+  }
+
+  return {
+    setCanvasForEvent,
+    attachDefaultEventOnCanvas,
+  }
+}
diff --git a/src/hooks/useDotLineGrid.js b/src/hooks/useDotLineGrid.js
new file mode 100644
index 00000000..34d82fa7
--- /dev/null
+++ b/src/hooks/useDotLineGrid.js
@@ -0,0 +1,53 @@
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
+import { calculateDistance } from '@/util/canvas-util'
+import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
+import { gridColorState } from '@/store/gridAtom'
+
+export function useDotLineGrid() {
+  const canvas = useRecoilValue(canvasState)
+  const gridColor = useRecoilValue(gridColorState)
+  const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
+  const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
+
+  const { adsorptionRange } = useAdsorptionPoint()
+
+  const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
+
+  const getLineGrids = () => {
+    return canvas.getObjects().filter((obj) => obj.name === 'lineGrid' || obj.name === 'tempGrid')
+  }
+
+  const getClosestLineGrid = (point) => {
+    const lines = getLineGrids()
+    if (lines.length === 0) {
+      return null
+    }
+
+    let closestLine = null
+    let minDistance = Infinity
+
+    lines.forEach((line) => {
+      const distance = calculateDistance(point, line)
+
+      if (distance < minDistance) {
+        minDistance = distance
+        closestLine = line
+      }
+    })
+
+    if (minDistance > adsorptionRange) {
+      return null
+    }
+
+    return closestLine
+  }
+
+  return {
+    dotLineGridSetting,
+    resetDotLineGridSetting,
+    getLineGrids,
+    getClosestLineGrid,
+    interval,
+  }
+}
diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
new file mode 100644
index 00000000..31a2cd8a
--- /dev/null
+++ b/src/hooks/useEvent.js
@@ -0,0 +1,245 @@
+import { useEffect, useRef } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import {
+  adsorptionPointAddModeState,
+  adsorptionPointModeState,
+  adsorptionRangeState,
+  canvasState,
+  canvasZoomState,
+  currentMenuState,
+} from '@/store/canvasAtom'
+import { fabric } from 'fabric'
+import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
+import { useMouse } from '@/hooks/useMouse'
+import { useDotLineGrid } from '@/hooks/useDotLineGrid'
+import { useTempGrid } from '@/hooks/useTempGrid'
+
+export function useEvent() {
+  const canvas = useRecoilValue(canvasState)
+  const currentMenu = useRecoilValue(currentMenuState)
+  const keyboardEventListeners = useRef([])
+  const mouseEventListeners = useRef([])
+  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
+
+  const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
+  const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
+  const { tempGridModeStateLeftClickEvent, tempGridMode, tempGridRightClickEvent } = useTempGrid()
+
+  useEffect(() => {
+    if (!canvas) {
+      return
+    }
+    removeAllMouseEventListeners()
+    removeAllDocumentEventListeners()
+
+    /**
+     * wheelEvent
+     */
+    canvas?.off('mouse:wheel')
+    canvas?.on('mouse:wheel', wheelEvent)
+
+    addDefaultEvent()
+  }, [currentMenu, canvas, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, dotLineGridSetting, tempGridMode])
+
+  const addDefaultEvent = () => {
+    //default Event 추가
+    addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
+    addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
+    addDocumentEventListener('keydown', document, defaultKeyboardEvent)
+    if (adsorptionPointAddMode) {
+      addCanvasMouseEventListener('mouse:down', adsorptionPointAddModeStateEvent)
+    }
+    if (tempGridMode) {
+      addCanvasMouseEventListener('mouse:down', tempGridModeStateLeftClickEvent)
+      addDocumentEventListener('contextmenu', document, tempGridRightClickEvent)
+    }
+  }
+
+  const defaultContextMenuEvent = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const wheelEvent = (opt) => {
+    const delta = opt.e.deltaY // 휠 이동 값 (양수면 축소, 음수면 확대)
+    let zoom = canvas.getZoom() // 현재 줌 값
+
+    zoom += delta > 0 ? -0.1 : 0.1
+
+    // 줌 값 제한 (최소 0.5배, 최대 5배)
+    if (zoom > 5) zoom = 5
+    if (zoom < 0.5) zoom = 0.5
+
+    setCanvasZoom(Number((zoom * 100).toFixed(0)))
+
+    // 마우스 위치 기준으로 확대/축소
+    canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom)
+
+    // 이벤트의 기본 동작 방지 (스크롤 방지)
+    opt.e.preventDefault()
+    opt.e.stopPropagation()
+  }
+
+  const defaultMouseOutEvent = (e) => {
+    removeMouseLine()
+  }
+
+  const defaultMouseMoveEvent = (e) => {
+    removeMouseLine()
+    // 가로선
+    const pointer = canvas.getPointer(e.e)
+
+    const adsorptionPoints = getAdsorptionPoints()
+
+    let arrivalPoint = { x: pointer.x, y: pointer.y }
+
+    if (adsorptionPointMode) {
+      if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
+        const closestLine = getClosestLineGrid(pointer)
+
+        if (closestLine) {
+          const distance = calculateDistance(pointer, closestLine)
+
+          if (distance < adsorptionRange) {
+            arrivalPoint = closestLine.direction === 'vertical' ? { x: closestLine.x1, y: pointer.y } : { x: pointer.x, y: closestLine.y1 }
+          }
+        }
+      }
+
+      if (dotLineGridSetting.DOT) {
+        const horizontalInterval = interval.horizontalInterval
+        const verticalInterval = interval.verticalInterval
+
+        const x = pointer.x - horizontalInterval * Math.floor(pointer.x / horizontalInterval)
+        const y = pointer.y - verticalInterval * Math.floor(pointer.y / verticalInterval)
+
+        const xRate = (x / horizontalInterval) * 100
+        const yRate = (y / verticalInterval) * 100
+
+        let tempPoint
+
+        if (xRate <= adsorptionRange && yRate <= adsorptionRange) {
+          tempPoint = {
+            x: Math.round(pointer.x / horizontalInterval) * horizontalInterval + horizontalInterval / 2,
+            y: Math.round(pointer.y / verticalInterval) * verticalInterval + horizontalInterval / 2,
+          }
+        } else if (xRate <= adsorptionRange && yRate >= adsorptionRange) {
+          tempPoint = {
+            x: Math.round(pointer.x / horizontalInterval) * horizontalInterval + horizontalInterval / 2,
+            y: Math.round(pointer.y / verticalInterval) * verticalInterval - horizontalInterval / 2,
+          }
+        } else if (xRate >= adsorptionRange && yRate <= adsorptionRange) {
+          tempPoint = {
+            x: Math.round(pointer.x / horizontalInterval) * horizontalInterval - horizontalInterval / 2,
+            y: Math.round(pointer.y / verticalInterval) * verticalInterval + horizontalInterval / 2,
+          }
+        } else if (xRate >= adsorptionRange && yRate >= adsorptionRange) {
+          tempPoint = {
+            x: Math.round(pointer.x / horizontalInterval) * horizontalInterval - horizontalInterval / 2,
+            y: Math.round(pointer.y / verticalInterval) * verticalInterval - horizontalInterval / 2,
+          }
+        }
+
+        if (distanceBetweenPoints(pointer, tempPoint) <= adsorptionRange) {
+          arrivalPoint = tempPoint
+        }
+      }
+
+      // pointer와 adsorptionPoints의 거리를 계산하여 가장 가까운 점을 찾는다.
+      let adsorptionPoint = findClosestPoint(pointer, adsorptionPoints)
+
+      if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) <= adsorptionRange) {
+        arrivalPoint = { ...adsorptionPoint }
+      }
+    }
+
+    const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
+      stroke: 'red',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+
+    // 세로선
+    const verticalLine = new fabric.Line([arrivalPoint.x, -1 * canvas.height, arrivalPoint.x, 2 * canvas.height], {
+      stroke: 'red',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+
+    // 선들을 캔버스에 추가합니다.
+    canvas?.add(horizontalLine, verticalLine)
+
+    // 캔버스를 다시 그립니다.
+    canvas?.renderAll()
+  }
+
+  const removeMouseLine = () => {
+    // 캔버스에서 마우스 선을 찾아 제거합니다.
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'mouseLine')
+      .forEach((line) => {
+        canvas?.remove(line)
+      })
+  }
+
+  const defaultKeyboardEvent = (e) => {
+    if (e.key === 'Escape') {
+      console.log('defaultKeyboardEvent')
+    }
+  }
+
+  const addCanvasMouseEventListener = (eventType, handler) => {
+    canvas.on(eventType, handler)
+    mouseEventListeners.current.push({ eventType, handler })
+  }
+
+  const removeAllMouseEventListeners = () => {
+    mouseEventListeners.current.forEach(({ eventType, handler }) => {
+      canvas.off(eventType, handler)
+    })
+    mouseEventListeners.current.length = 0 // 배열 초기화
+  }
+
+  /**
+   * document 이벤트의 경우 이 함수를 통해서만 등록
+   * @param eventType
+   * @param element
+   * @param handler
+   */
+  const addDocumentEventListener = (eventType, element, handler) => {
+    element.addEventListener(eventType, handler)
+    keyboardEventListeners.current.push({ eventType, element, handler })
+  }
+
+  /**
+   * document에 등록되는 event 제거
+   */
+  const removeAllDocumentEventListeners = () => {
+    keyboardEventListeners.current.forEach(({ eventType, element, handler }) => {
+      element.removeEventListener(eventType, handler)
+    })
+    keyboardEventListeners.current.length = 0 // 배열 초기화
+  }
+
+  const removeMouseEvent = (type, handler) => {
+    mouseEventListeners.current = mouseEventListeners.current.filter((event) => {
+      if (event.type === type && event.handler === handler) {
+        canvas.off(type, handler)
+        return false
+      }
+      return true
+    })
+  }
+
+  return {
+    addDocumentEventListener,
+    addCanvasMouseEventListener,
+    removeAllMouseEventListeners,
+    removeAllDocumentEventListeners,
+    removeMouseEvent,
+  }
+}
diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js
new file mode 100644
index 00000000..e701a2ff
--- /dev/null
+++ b/src/hooks/useLine.js
@@ -0,0 +1,64 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
+
+export const useLine = () => {
+  const canvas = useRecoilValue(canvasState)
+  const fontSize = useRecoilValue(fontSizeState)
+  const fontFamily = useRecoilValue(fontFamilyState)
+
+  const addLine = (points = [], options) => {
+    const line = new fabric.Line(points, {
+      ...options,
+      selectable: options.selectable ?? false,
+    })
+
+    canvas?.add(line)
+    addLineText(line)
+    return line
+  }
+
+  const addLineText = (line, length = getLengthByLine(line)) => {
+    removeLineText(line)
+
+    const lengthTxt = isNaN(Number(length)) ? length : length.toFixed(0)
+
+    const text = new fabric.Text(lengthTxt, {
+      left: (line.x2 + line.x1) / 2,
+      top: (line.y2 + line.y1) / 2,
+      parent: line,
+      name: 'lengthTxt',
+      fontSize: fontSize,
+      fontFamily: fontFamily,
+    })
+
+    canvas?.add(text)
+    return text
+  }
+
+  const removeLine = (line) => {
+    removeLineText(line)
+    canvas?.remove(line)
+  }
+
+  const removeLineText = (line) => {
+    canvas?.remove(canvas?.getObjects().find((obj) => obj.parent === line))
+  }
+
+  const getLengthByLine = (line) => {
+    const scaleX = line.scaleX
+    const scaleY = line.scaleY
+    const x1 = line.left
+    const y1 = line.top
+    const x2 = line.left + line.width * scaleX
+    const y2 = line.top + line.height * scaleY
+    const dx = x2 - x1
+    const dy = y2 - y1
+
+    return Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10
+  }
+
+  return {
+    addLine,
+    removeLine,
+  }
+}
diff --git a/src/hooks/useMessage.js b/src/hooks/useMessage.js
new file mode 100644
index 00000000..f336f0b7
--- /dev/null
+++ b/src/hooks/useMessage.js
@@ -0,0 +1,40 @@
+import { useRecoilValue } from 'recoil'
+import { appMessageStore } from '@/store/localeAtom'
+
+// import KO from '@/locales/ko.json'
+// import JA from '@/locales/ja.json'
+
+const SESSION_STORAGE_MESSAGE_KEY = 'QCAST_MESSAGE_STORAGE'
+
+export const useMessage = () => {
+  // const globalLocale = useRecoilValue(globalLocaleState)
+  const appMessageState = useRecoilValue(appMessageStore)
+
+  const getMessage = (key, args = []) => {
+    // if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) {
+    //   if (globalLocale === 'ko') {
+    //     setSessionMessage(JSON.stringify(KO))
+    //   } else {
+    //     setSessionMessage(JSON.stringify(JA))
+    //   }
+    // }
+
+    // const sessionMessage = getSessionMessage()
+    // const message = sessionMessage[key] || key
+    const message = appMessageState[key] || key
+
+    return args.reduce((acc, arg, i) => {
+      return acc.replaceAll(`{${i}}`, arg)
+    }, message)
+  }
+
+  const setSessionMessage = (sessionMessage) => {
+    sessionStorage.setItem(SESSION_STORAGE_MESSAGE_KEY, sessionMessage)
+  }
+
+  const getSessionMessage = () => {
+    return JSON.parse(sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY))
+  }
+
+  return { getMessage }
+}
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 1782dde8..c2b29121 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   calculateIntersection,
   distanceBetweenPoints,
-  findTopTwoIndexesByDistance,
+  findClosestPoint,
   getCenterPoint,
+  getClosestHorizontalLine,
+  getClosestVerticalLine,
   getDirection,
   getStartIndex,
   rearrangeArray,
@@ -12,15 +14,21 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 
 import {
   canvasSizeState,
+  canvasState,
+  compassState,
   drewRoofCellsState,
   fontSizeState,
+  guideLineState,
+  horiGuideLinesState,
+  modeState,
+  objectPlacementModeState,
   roofPolygonArrayState,
   roofPolygonPatternArrayState,
   roofState,
   sortedPolygonArray,
   templateTypeState,
+  vertGuideLinesState,
   wallState,
-  compassState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
@@ -28,33 +36,19 @@ import { QPolygon } from '@/components/fabric/QPolygon'
 import offsetPolygon from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
-
-export const Mode = {
-  DRAW_LINE: 'drawLine', // 기준선 긋기모드`
-  EDIT: 'edit',
-  TEMPLATE: 'template',
-  PATTERNA: 'patterna',
-  PATTERNB: 'patternb',
-  TEXTBOX: 'textbox',
-  DRAW_RECT: 'drawRect',
-  ROOF_PATTERN: 'roofPattern', //지붕패턴 모드
-  ROOF_TRESTLE: 'roofTrestle', //지붕가대 모드
-  FILL_CELLS: 'fillCells', //태양광셀 모드
-  CELL_POWERCON: 'cellPowercon', //파워콘
-  DRAW_HELP_LINE: 'drawHelpLine', // 보조선 그리기 모드 지붕 존재해야함
-  DEFAULT: 'default',
-}
+import { INPUT_TYPE, Mode } from '@/common/common'
+import { m } from 'framer-motion'
+import { set } from 'react-hook-form'
 
 export function useMode() {
-  const [mode, setMode] = useState()
+  const [mode, setMode] = useRecoilState(modeState)
   const points = useRef([])
   const historyPoints = useRef([])
   const historyLines = useRef([])
   const startPoint = useRef()
-  const [canvas, setCanvas] = useState(null)
+  const [canvas, setCanvas] = useRecoilState(canvasState)
   const [zoom, setZoom] = useState(100)
   const [fontSize] = useRecoilState(fontSizeState)
-  const [shape, setShape] = useState(0)
   const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
   const [roof, setRoof] = useRecoilState(roofState)
   const [wall, setWall] = useRecoilState(wallState)
@@ -74,20 +68,29 @@ export function useMode() {
   const [roofStyle, setRoofStyle] = useState(1) //기본 지붕 패턴
   const [templateCenterLine, setTemplateCenterLine] = useState([])
   const compass = useRecoilValue(compassState)
+  const [isCellCenter, setIsCellCenter] = useState(false)
+
+  const [guideLineInfo, setGuideLineInfo] = useRecoilState(guideLineState)
+
+  const [guideLineMode, setGuideLineMode] = useState(false)
+  const [guideDotMode, setGuideDotMode] = useState(false)
+
+  const [horiGuideLines, setHoriGuideLines] = useRecoilState(horiGuideLinesState)
+  const [vertGuideLines, setVertGuideLines] = useRecoilState(vertGuideLinesState)
+
+  const [objectPlacementMode, setObjectPlacementModeState] = useRecoilState(objectPlacementModeState)
 
   useEffect(() => {
-    // 이벤트 리스너 추가
     // if (!canvas) {
-    canvas?.setZoom(0.8)
+    // canvas?.setZoom(0.8)
     //   return
     // }
-    document.addEventListener('keydown', handleKeyDown)
-
-    // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [canvas]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
+    if (!canvas) return
+    canvas?.off('mouse:out', removeMouseLines)
+    canvas?.on('mouse:out', removeMouseLines)
+    canvas?.off('mouse:move')
+    canvas?.on('mouse:move', drawMouseLines)
+  }, [canvas, zoom]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
 
   useEffect(() => {
     if (canvas?.getObjects().find((obj) => obj.name === 'connectLine')) {
@@ -105,28 +108,190 @@ export function useMode() {
     canvas?.on('mouse:move', (e) => addLineEndPointToMousePoint(e, endPoint))
   }, [endPoint])
 
+  useEffect(() => {
+    changeMode(canvas, mode)
+  }, [mode, horiGuideLines, vertGuideLines])
+
+  useEffect(() => {
+    setGuideLineMode(false)
+    setGuideDotMode(false)
+    if (isObjectNotEmpty(guideLineInfo)) {
+      const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
+      const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
+
+      setGuideLineMode(guideLineState.length > 0)
+      setGuideDotMode(guideDotState.length > 0)
+    }
+  }, [guideLineInfo])
+
+  // 마우스 보조선 가로선, 세로선 그리기
   const drawMouseLines = (e) => {
+    let isGuideLineMode = false,
+      isGuideDotMode = false
+    let guideDotLength, guideLineLengthHori, guideLineLengthVert, horizontalLineArray, verticalLineArray
+
+    if (isObjectNotEmpty(guideLineInfo)) {
+      const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
+      const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
+      setGuideLineMode(guideLineState.length > 0)
+      setGuideDotMode(guideDotState.length > 0)
+      isGuideLineMode = guideLineState.length > 0
+      isGuideDotMode = guideDotState.length > 0
+
+      if (isGuideDotMode) {
+        guideLineLengthHori = Number(guideDotState[0].moduleHoriLength)
+        guideLineLengthVert = Number(guideDotState[0].moduleVertLength)
+      }
+
+      if (isGuideLineMode) {
+        horizontalLineArray = [...horiGuideLines]
+        verticalLineArray = [...vertGuideLines]
+        guideLineLengthHori = Number(guideLineState[0].moduleHoriLength)
+        guideLineLengthVert = Number(guideLineState[0].moduleVertLength)
+      }
+    }
+
     // 현재 마우스 포인터의 위치를 가져옵니다.
     const pointer = canvas?.getPointer(e.e)
 
     // 기존에 그려진 가이드라인을 제거합니다.
     removeMouseLines()
 
-    if (canvas?.getActiveObject()) {
-      return
+    let newX = pointer.x
+    let newY = pointer.y
+
+    //흡착점 있는지 확인
+    const adsorptionPointList = canvas?._objects.filter((obj) => obj.name === 'adsorptionPoint')
+
+    if (mode === Mode.EDIT || mode === Mode.ADSORPTION_POINT) {
+      let adsorptionPoint = adsorptionPointList.length > 0 ? findClosestPoint(pointer, adsorptionPointList) : null
+      if ((horiGuideLines.length > 0 || vertGuideLines.length > 0) && guideDotMode) {
+        const closestHorizontalLine = getClosestHorizontalLine(pointer, horiGuideLines)
+        const closetVerticalLine = getClosestVerticalLine(pointer, vertGuideLines)
+        let intersection = null
+        let intersectionDistance = Infinity
+
+        if (closestHorizontalLine && closetVerticalLine) {
+          intersection = calculateIntersection(closestHorizontalLine, closetVerticalLine)
+          if (intersection) {
+            intersectionDistance = distanceBetweenPoints(pointer, intersection)
+          }
+        }
+
+        let xDiff, yDiff
+
+        if (closetVerticalLine) {
+          xDiff = Math.abs(pointer.x - closetVerticalLine.x1)
+        }
+        if (closestHorizontalLine) {
+          yDiff = Math.abs(pointer.y - closestHorizontalLine.y1)
+        }
+
+        const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
+        const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
+
+        const xRate = x / guideLineLengthHori
+        const yRate = y / guideLineLengthVert
+        const isAttachX = xRate >= 0.4 && xRate <= 0.7
+        const isAttachY = yRate >= 0.4 && yRate <= 0.7
+        if (isAttachX && isAttachY) {
+          newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
+          newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
+        } else {
+          if (intersection && intersectionDistance < 20) {
+            newX = intersection.x
+            newY = intersection.y
+          } else {
+            if (Math.min(xDiff, yDiff) <= 20) {
+              if (xDiff < yDiff) {
+                newX = closetVerticalLine.x1
+                newY = pointer.y
+              } else {
+                newX = pointer.x
+                newY = closestHorizontalLine.y1
+              }
+            }
+          }
+        }
+      } else if (guideDotMode) {
+        const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
+        const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
+
+        const xRate = x / guideLineLengthHori
+        const yRate = y / guideLineLengthVert
+        const isAttachX = xRate >= 0.4 && xRate <= 0.7
+        const isAttachY = yRate >= 0.4 && yRate <= 0.7
+
+        if (isAttachX && isAttachY) {
+          newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
+          newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
+        }
+      } else if (horiGuideLines.length > 0 || vertGuideLines.length > 0) {
+        const closestHorizontalLine = getClosestHorizontalLine(pointer, horiGuideLines)
+        const closetVerticalLine = getClosestVerticalLine(pointer, vertGuideLines)
+        let intersection = null
+        let intersectionDistance = Infinity
+
+        if (closestHorizontalLine && closetVerticalLine) {
+          intersection = calculateIntersection(closestHorizontalLine, closetVerticalLine)
+          if (intersection) {
+            intersectionDistance = distanceBetweenPoints(pointer, intersection)
+          }
+        }
+
+        let xDiff, yDiff
+
+        if (closetVerticalLine) {
+          xDiff = Math.abs(pointer.x - closetVerticalLine.x1)
+        }
+        if (closestHorizontalLine) {
+          yDiff = Math.abs(pointer.y - closestHorizontalLine.y1)
+        }
+
+        const x = pointer.x - guideLineLengthHori * Math.floor(pointer.x / guideLineLengthHori)
+        const y = pointer.y - guideLineLengthVert * Math.floor(pointer.y / guideLineLengthVert)
+
+        const xRate = x / guideLineLengthHori
+        const yRate = y / guideLineLengthVert
+        const isAttachX = xRate >= 0.4 && xRate <= 0.7
+        const isAttachY = yRate >= 0.4 && yRate <= 0.7
+        if (isAttachX && isAttachY) {
+          newX = Math.floor(pointer.x / guideLineLengthHori) * guideLineLengthHori + guideLineLengthHori / 2
+          newY = Math.floor(pointer.y / guideLineLengthVert) * guideLineLengthVert + guideLineLengthVert / 2
+        } else {
+          if (intersection && intersectionDistance < 20) {
+            newX = intersection.x
+            newY = intersection.y
+          } else {
+            if (Math.min(xDiff, yDiff) <= 20) {
+              if (xDiff < yDiff) {
+                newX = closetVerticalLine.x1
+                newY = pointer.y
+              } else {
+                newX = pointer.x
+                newY = closestHorizontalLine.y1
+              }
+            }
+          }
+        }
+      }
+      if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) < 20) {
+        newX = adsorptionPoint.left
+        newY = adsorptionPoint.top
+      }
     }
 
     // 가로선을 그립니다.
-    const horizontalLine = new fabric.Line([0, pointer.y, canvasSize.horizontal, pointer.y], {
-      stroke: 'black',
+    const horizontalLine = new fabric.Line([0, newY, 2 * canvas.width, newY], {
+      stroke: 'red',
       strokeWidth: 1,
       selectable: false,
       name: 'mouseLine',
     })
 
     // 세로선을 그립니다.
-    const verticalLine = new fabric.Line([pointer.x, 0, pointer.x, canvasSize.vertical], {
-      stroke: 'black',
+    const verticalLine = new fabric.Line([newX, 0, newX, 2 * canvas.height], {
+      stroke: 'red',
       strokeWidth: 1,
       selectable: false,
       name: 'mouseLine',
@@ -148,7 +313,7 @@ export function useMode() {
   }, [pointCount.current])
 
   const removeGuideLines = () => {
-    const guideLines = canvas?._objects.filter((obj) => obj.name === 'guideLine')
+    const guideLines = canvas?._objects.filter((obj) => obj.name === 'helpGuideLine')
     guideLines?.forEach((item) => canvas?.remove(item))
   }
 
@@ -170,7 +335,7 @@ export function useMode() {
         strokeWidth: 1,
         strokeDashArray: [1, 1, 1],
       })
-      guideLine.name = 'guideLine'
+      guideLine.name = 'helpGuideLine'
       canvas?.add(guideLine)
     } else {
       const guideLine1 = new QLine([lastX, lastY, lastX, arrivalY], {
@@ -187,8 +352,8 @@ export function useMode() {
         strokeDashArray: [1, 1, 1],
       })
 
-      guideLine1.name = 'guideLine'
-      guideLine2.name = 'guideLine'
+      guideLine1.name = 'helpGuideLine'
+      guideLine2.name = 'helpGuideLine'
 
       canvas?.add(guideLine1)
       canvas?.add(guideLine2)
@@ -217,8 +382,13 @@ export function useMode() {
 
     const pointer = canvas?.getPointer(e.e)
 
+    let newX, newY
+
+    newX = pointer.x
+    newY = pointer.y
+
     // 마우스 포인터 위치랑 endPoint를 연결하는 line 생성
-    const line = new fabric.Line([endPoint.left, endPoint.top, pointer.x, pointer.y], {
+    const line = new fabric.Line([endPoint.left, endPoint.top, newX, newY], {
       stroke: 'black',
       strokeWidth: 1,
       selectable: false,
@@ -230,49 +400,42 @@ export function useMode() {
     canvas?.renderAll()
   }
 
-  const addEvent = (mode) => {
+  // 모드에 따른 마우스 이벤트 변경
+  const changeMouseEvent = (mode) => {
     switch (mode) {
       case 'drawLine':
-        drawLineMode()
+        canvas?.on('mouse:down', mouseEvent.drawLineModeLeftClick)
+        document.addEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
         break
       case 'edit':
-        editMode()
-        break
-      case 'template':
-        templateMode()
-        break
-      case 'patterna':
-        applyTemplateA()
-        break
-      case 'patternb':
-        applyTemplateB()
+        canvas?.on('mouse:down', mouseEvent.editMode)
         break
       case 'textbox':
-        textboxMode()
+        canvas?.on('mouse:down', mouseEvent.textboxMode)
         break
       case 'drawRect':
-        drawRectMode()
-        break
-      case 'roofPattern':
-        makeRoofPatternPolygon()
-        break
-      case 'roofTrestle':
-        makeRoofTrestle()
-        break
-      case 'fillCells':
-        makeRoofFillCells()
-        break
-      case 'cellPowercon':
-        makeCellPowercon()
+        canvas?.on('mouse:down', mouseEvent.drawRectMode)
         break
       case 'drawHelpLine':
         canvas?.off('selection:created', addSelectCreatedEvent)
         canvas?.off('selection:cleared', addSelectClearedEvent)
         canvas?.on('selection:created', addSelectCreatedEvent)
         canvas?.on('selection:cleared', addSelectClearedEvent)
-        drawHelpLineMode()
         break
+      case 'adsorptionPoint':
+        canvas?.on('mouse:down', mouseEvent.adsorptionPoint)
+        break
+      case 'shadow':
+        canvas?.on('mouse:down', mouseEvent.shadowMode.down)
+        canvas?.on('mouse:move', mouseEvent.shadowMode.move)
+        canvas?.on('mouse:up', mouseEvent.shadowMode.up)
+        break
+      case 'opening':
+        canvas?.on('mouse:down', mouseEvent.openingMode.down)
+        canvas?.on('mouse:move', mouseEvent.openingMode.move)
+        canvas?.on('mouse:up', mouseEvent.openingMode.up)
 
+        break
       case 'default':
         canvas?.off('mouse:down')
         break
@@ -434,93 +597,229 @@ export function useMode() {
     }
   }
 
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case 'ArrowDown': {
-        if (!keyValid()) {
-          return
-        }
-        const verticalLength = Number(prompt('길이를 입력하세요:'))
-        const horizontalLength = 0
+  const mouseAndkeyboardEventClear = () => {
+    canvas?.off('mouse:down')
+    canvas?.off('mouse:move')
+    canvas?.off('mouse:up')
+    canvas?.off('mouse:out')
 
-        drawCircleAndLine(verticalLength, horizontalLength)
+    Object.keys(keyboardEvent).forEach((key) => {
+      document.removeEventListener('keydown', keyboardEvent[key])
+    })
+  }
 
-        break
-      }
-      case 'ArrowUp': {
-        if (!keyValid()) {
-          return
-        }
-        const verticalLength = -Number(prompt('길이를 입력하세요:'))
-        const horizontalLength = 0
+  const keyboardEvent = {
+    // rerendering을 막기 위해 useCallback 사용
+    editMode: useCallback(
+      (e) => {
+        e.preventDefault()
+        switch (e.key) {
+          case 'ArrowDown': {
+            if (!keyValid()) {
+              return
+            }
+            const verticalLength = Number(prompt('길이를 입력하세요:'))
+            const horizontalLength = 0
 
-        drawCircleAndLine(verticalLength, horizontalLength)
+            drawCircleAndLine(verticalLength, horizontalLength)
 
-        break
-      }
-      case 'ArrowLeft': {
-        if (!keyValid()) {
-          return
-        }
-        const verticalLength = 0
-        const horizontalLength = -Number(prompt('길이를 입력하세요:'))
-
-        drawCircleAndLine(verticalLength, horizontalLength)
-
-        break
-      }
-      case 'ArrowRight': {
-        if (!keyValid()) {
-          return
-        }
-
-        const verticalLength = 0
-        const horizontalLength = Number(prompt('길이를 입력하세요:'))
-
-        drawCircleAndLine(verticalLength, horizontalLength)
-
-        break
-      }
-
-      case 'Enter': {
-        const result = prompt('입력하세요 (a(A패턴),b(B패턴),t(지붕))')
-
-        switch (result) {
-          case 'a':
-            applyTemplateA()
             break
-          case 'b':
-            applyTemplateB()
+          }
+          case 'ArrowUp': {
+            if (!keyValid()) {
+              return
+            }
+            const verticalLength = -Number(prompt('길이를 입력하세요:'))
+            const horizontalLength = 0
+
+            drawCircleAndLine(verticalLength, horizontalLength)
+
             break
-          case 't':
-            templateMode()
+          }
+          case 'ArrowLeft': {
+            if (!keyValid()) {
+              return
+            }
+            const verticalLength = 0
+            const horizontalLength = -Number(prompt('길이를 입력하세요:'))
+
+            drawCircleAndLine(verticalLength, horizontalLength)
+
             break
+          }
+          case 'ArrowRight': {
+            if (!keyValid()) {
+              return
+            }
+
+            const verticalLength = 0
+            const horizontalLength = Number(prompt('길이를 입력하세요:'))
+
+            drawCircleAndLine(verticalLength, horizontalLength)
+
+            break
+          }
+
+          case 'Enter': {
+            const result = prompt('입력하세요 (a(A패턴), b(B패턴), t(지붕), e(변별))')
+
+            switch (result) {
+              case 'a':
+                applyTemplateA()
+                break
+              case 'b':
+                applyTemplateB()
+                break
+              case 't':
+                templateMode()
+                break
+              case 'e':
+                templateSideMode()
+            }
+          }
         }
+      },
+      [canvas],
+    ),
+  }
+
+  const changeMode = (canvas, mode) => {
+    mouseAndkeyboardEventClear()
+    addCommonMouseEvent()
+    setMode(mode)
+
+    // mode별 이벤트 변경
+
+    changeMouseEvent(mode)
+    changeKeyboardEvent(mode)
+
+    switch (mode) {
+      case 'template':
+        templateMode()
+        break
+      case 'patterna':
+        applyTemplateA()
+        break
+      case 'patternb':
+        applyTemplateB()
+        break
+      case 'roofPattern':
+        makeRoofPatternPolygon()
+        break
+      case 'roofTrestle':
+        makeRoofTrestle()
+        break
+      case 'fillCells':
+        makeRoofFillCells()
+        break
+      case 'cellPowercon':
+        makeCellPowercon()
+        break
+      case 'drawHelpLine':
+        drawHelpLineMode()
+        break
+      case 'default':
+        clearEditMode()
+        break
+    }
+  }
+
+  // 모든 모드에서 사용되는 공통 이벤트 추가
+  const addCommonMouseEvent = () => {
+    canvas?.on('mouse:move', drawMouseLines)
+    canvas?.on('mouse:out', removeMouseLines)
+  }
+
+  const changeKeyboardEvent = (mode) => {
+    if (mode === Mode.EDIT) {
+      switch (mode) {
+        case 'edit':
+          document.addEventListener('keydown', keyboardEvent.editMode)
+          break
       }
     }
   }
 
-  const changeMode = (canvas, mode) => {
-    setEndPoint(null)
-    pointCount.current = 0
-
-    setMode(mode)
-    // mode변경 시 이전 이벤트 제거
-    setCanvas(canvas)
-    canvas?.off('mouse:down')
-
-    addEvent(mode)
-  }
-
-  const editMode = () => {
-    canvas?.on('mouse:down', function (options) {
+  const mouseEvent = {
+    drawLineModeLeftClick: (options) => {
+      if (mode !== Mode.DRAW_LINE) {
+        return
+      }
       const pointer = canvas?.getPointer(options.e)
+
+      const line = new QLine(
+        [pointer.x, 0, pointer.x, canvasSize.vertical], // y축에 1자 선을 그립니다.
+        {
+          stroke: 'gray',
+          strokeWidth: 1,
+          selectable: true,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockRotation: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          name: 'guideLine',
+          direction: 'vertical',
+        },
+      )
+
+      canvas?.add(line)
+      canvas?.renderAll()
+
+      const newVerticalLineArray = [...vertGuideLines]
+      newVerticalLineArray.push(line)
+
+      setVertGuideLines(newVerticalLineArray)
+    },
+    drawLineModeRightClick: useCallback(
+      (options) => {
+        document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
+        if (mode !== Mode.DRAW_LINE) {
+          return
+        }
+        const line = new fabric.Line(
+          [0, options.offsetY, canvasSize.horizontal, options.offsetY], // y축에 1자 선을 그립니다.
+          {
+            stroke: 'gray',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: 'guideLine',
+            direction: 'horizontal',
+          },
+        )
+
+        canvas?.add(line)
+        canvas?.renderAll()
+
+        const newHorizontalLineArray = [...horiGuideLines]
+        newHorizontalLineArray.push(line)
+        setHoriGuideLines(newHorizontalLineArray)
+      },
+      [canvas, mode, horiGuideLines],
+    ),
+    editMode: (options) => {
+      if (mode !== Mode.EDIT) {
+        return
+      }
+      let pointer = canvas?.getPointer(options.e)
+
+      if (getInterSectPointByMouseLine()) {
+        pointer = getInterSectPointByMouseLine()
+      }
+
       const circle = new fabric.Circle({
         radius: 5,
         fill: 'transparent', // 원 안을 비웁니다.
         stroke: 'red', // 원 테두리 색상을 검은색으로 설정합니다.
-        left: pointer.x - 5,
-        top: pointer.y - 5,
+        left: pointer.x,
+        top: pointer.y,
+        x: pointer.x,
+        y: pointer.y,
         originX: 'center',
         originY: 'center',
         selectable: false,
@@ -529,14 +828,48 @@ export function useMode() {
         startPoint.current = circle
         pointCount.current = pointCount.current + 1
       }
+      let prevEndPoint
 
-      setEndPoint(circle)
+      setEndPoint((prev) => {
+        prevEndPoint = prev
+        return circle
+      })
 
       historyPoints.current.push(circle)
       points.current.push(circle)
       canvas?.add(circle)
 
       if (points.current.length === 2) {
+        if (guideLineMode || guideDotMode) {
+          const vector = {
+            x: points.current[1].left - points.current[0].left,
+            y: points.current[1].top - points.current[0].top,
+          }
+          const slope = Math.abs(vector.y / vector.x) // 기울기 계산
+
+          let scaledVector
+
+          if (slope >= 1) {
+            // 기울기가 1 이상이면 x축 방향으로 그림
+            scaledVector = {
+              x: 0,
+              y: pointer.y - prevEndPoint?.top,
+            }
+          } else {
+            // 기울기가 1 미만이면 y축 방향으로 그림
+            scaledVector = {
+              x: pointer.x - prevEndPoint?.left,
+              y: 0,
+            }
+          }
+
+          const verticalLength = scaledVector.y
+          const horizontalLength = scaledVector.x
+
+          drawCircleAndLine(verticalLength, horizontalLength)
+          canvas?.renderAll()
+          return
+        }
         const length = Number(prompt('길이를 입력하세요:'))
 
         // length 값이 숫자가 아닌 경우
@@ -546,7 +879,7 @@ export function useMode() {
           const lastPoint = historyPoints.current[historyPoints.current.length - 1]
 
           canvas?.remove(lastPoint)
-
+          setEndPoint(prevEndPoint)
           historyPoints.current.pop()
           points.current.pop()
           return
@@ -582,7 +915,317 @@ export function useMode() {
       }
 
       canvas?.renderAll()
-    })
+    },
+
+    textboxMode: (options) => {
+      if (mode !== Mode.TEXTBOX) return
+      if (canvas?.getActiveObject()?.type === 'textbox') return
+      const pointer = canvas?.getPointer(options.e)
+
+      const textbox = new fabric.Textbox('텍스트를 입력하세요', {
+        left: pointer.x,
+        top: pointer.y,
+        width: 150, // 텍스트박스의 너비를 설정합니다.
+        fontSize: fontSize, // 텍스트의 크기를 설정합니다.
+      })
+
+      canvas?.add(textbox)
+      canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
+      canvas?.renderAll()
+      // textbox가 active가 풀린 경우 editing mode로 변경
+      textbox?.on('editing:exited', function () {
+        changeMode(canvas, Mode.EDIT)
+      })
+    },
+    drawRectMode: (o) => {
+      if (mode !== Mode.DRAW_RECT) return
+      let rect, isDown, origX, origY
+      isDown = true
+      const pointer = canvas.getPointer(o.e)
+      origX = pointer.x
+      origY = pointer.y
+      rect = new fabric.Rect({
+        left: origX,
+        top: origY,
+        originX: 'left',
+        originY: 'top',
+        width: pointer.x - origX,
+        height: pointer.y - origY,
+        angle: 0,
+        fill: 'white',
+        stroke: 'black',
+        transparentCorners: false,
+        name: 'dormer',
+      })
+      canvas.add(rect)
+
+      canvas.on('mouse:move', function (e) {
+        if (!isDown) return
+        const pointer = canvas.getPointer(e.e)
+        if (origX > pointer.x) {
+          rect.set({ left: Math.abs(pointer.x) })
+        }
+        if (origY > pointer.y) {
+          rect.set({ top: Math.abs(pointer.y) })
+        }
+
+        rect.set({ width: Math.abs(origX - pointer.x) })
+        rect.set({ height: Math.abs(origY - pointer.y) })
+      })
+
+      canvas.on('mouse:up', function (o) {
+        isDown = false
+        canvas.off('mouse:move')
+        canvas.off('mouse:up')
+        setMode(Mode.DEFAULT)
+      })
+    },
+    // 흡착점 추가
+    adsorptionPoint: (o) => {
+      if (mode !== Mode.ADSORPTION_POINT) return
+      const pointer = canvas.getPointer(o.e)
+      let newX = pointer.x
+      let newY = pointer.y
+
+      if (getInterSectPointByMouseLine()) {
+        const interSectPoint = getInterSectPointByMouseLine()
+        newX = interSectPoint.x
+        newY = interSectPoint.y
+      }
+
+      const circle = new fabric.Circle({
+        radius: 5,
+        fill: 'transparent', // 원 안을 비웁니다.
+        stroke: 'black', // 원 테두리 색상을 검은색으로 설정합니다.
+        left: newX,
+        top: newY,
+        originX: 'center',
+        originY: 'center',
+        x: newX - 5,
+        y: newY - 5,
+        selectable: false,
+        name: 'adsorptionPoint',
+      })
+
+      canvas.add(circle)
+      canvas.renderAll()
+    },
+    //면 형상 배치 모드
+    surfaceShapeMode: (o) => {},
+    // 그림자 모드
+    shadowMode: {
+      rect: null,
+      isDown: false,
+      origX: 0,
+      origY: 0,
+      down: (o) => {
+        if (mode !== Mode.SHADOW) return
+        mouseEvent.shadowMode.isDown = true
+        const pointer = canvas.getPointer(o.e)
+        mouseEvent.shadowMode.origX = pointer.x
+        mouseEvent.shadowMode.origY = pointer.y
+        mouseEvent.shadowMode.rect = new fabric.Rect({
+          fill: 'grey',
+          left: mouseEvent.shadowMode.origX,
+          top: mouseEvent.shadowMode.origY,
+          originX: 'left',
+          originY: 'top',
+          opacity: 0.3,
+          width: 0,
+          height: 0,
+          angle: 0,
+          transparentCorners: false,
+        })
+        canvas.add(mouseEvent.shadowMode.rect)
+      },
+      move: (e) => {
+        if (!mouseEvent.shadowMode.isDown) return
+        const pointer = canvas.getPointer(e.e)
+        if (mouseEvent.shadowMode.origX > pointer.x) {
+          mouseEvent.shadowMode.rect.set({ left: Math.abs(pointer.x) })
+        }
+        if (mouseEvent.shadowMode.origY > pointer.y) {
+          mouseEvent.shadowMode.rect.set({ top: Math.abs(pointer.y) })
+        }
+
+        mouseEvent.shadowMode.rect.set({ width: Math.abs(mouseEvent.shadowMode.origX - pointer.x) })
+        mouseEvent.shadowMode.rect.set({ height: Math.abs(mouseEvent.shadowMode.origY - pointer.y) })
+      },
+      up: (o) => {
+        mouseEvent.shadowMode.isDown = false
+        setMode(Mode.DEFAULT)
+      },
+    },
+    openingMode: {
+      rect: null,
+      isDown: false,
+      origX: 0,
+      origY: 0,
+      down: (o) => {
+        if (mode !== Mode.OPENING) return
+        const roofs = canvas?._objects.filter((obj) => obj.name === 'roof')
+        if (roofs.length === 0) {
+          alert('지붕을 먼저 그려주세요')
+          setMode(Mode.DEFAULT)
+          return
+        }
+        const pointer = canvas.getPointer(o.e)
+        let selectRoof = null
+        roofs.forEach((roof) => {
+          if (roof.inPolygon({ x: pointer.x, y: pointer.y })) {
+            selectRoof = roof
+          }
+        })
+        if (!selectRoof) {
+          alert('지붕 내부에만 생성 가능합니다.')
+          return
+        }
+        mouseEvent.openingMode.origX = pointer.x
+        mouseEvent.openingMode.origY = pointer.y
+        if (objectPlacementMode.inputType === INPUT_TYPE.FREE) {
+          mouseEvent.openingMode.isDown = true
+
+          mouseEvent.openingMode.rect = new fabric.Rect({
+            fill: 'white',
+            stroke: 'black',
+            strokeWidth: 1,
+            left: mouseEvent.openingMode.origX,
+            top: mouseEvent.openingMode.origY,
+            originX: 'left',
+            originY: 'top',
+            width: pointer.x - mouseEvent.openingMode.origX,
+            height: pointer.y - mouseEvent.openingMode.origY,
+          })
+          canvas.add(mouseEvent.openingMode.rect)
+        } else if (objectPlacementMode.inputType === INPUT_TYPE.DIMENSION) {
+          mouseEvent.openingMode.rect = new fabric.Rect({
+            fill: 'white',
+            stroke: 'black',
+            strokeWidth: 1,
+            left: mouseEvent.openingMode.origX,
+            top: mouseEvent.openingMode.origY,
+            originX: 'left',
+            originY: 'top',
+            width: Number(objectPlacementMode.width),
+            height: Number(objectPlacementMode.height),
+          })
+          canvas.add(mouseEvent.openingMode.rect)
+          canvas.off('mouse:move')
+        }
+      },
+      move: (e) => {
+        if (!mouseEvent.openingMode.isDown) return
+        const pointer = canvas.getPointer(e.e)
+        if (mouseEvent.openingMode.origX > pointer.x) {
+          mouseEvent.openingMode.rect.set({ left: Math.abs(pointer.x) })
+        }
+        if (mouseEvent.openingMode.origY > pointer.y) {
+          mouseEvent.openingMode.rect.set({ top: Math.abs(pointer.y) })
+        }
+
+        mouseEvent.openingMode.rect.set({ width: Math.abs(mouseEvent.openingMode.origX - pointer.x) })
+        mouseEvent.openingMode.rect.set({ height: Math.abs(mouseEvent.openingMode.origY - pointer.y) })
+      },
+      up: (o) => {
+        mouseEvent.openingMode.isDown = false
+
+        const { areaBoundary } = objectPlacementMode
+
+        //roof의 내부에 있는지 확인
+        if (!checkInsideRoof(mouseEvent.openingMode.rect)) {
+          setMode(Mode.DEFAULT)
+        }
+
+        // 영역 교차인지 확인
+        if (!areaBoundary) {
+          const isCross = checkCrossAreaBoundary(mouseEvent.openingMode.rect)
+          if (isCross) {
+            alert('영역이 교차되었습니다.')
+            canvas.remove(mouseEvent.openingMode.rect)
+          }
+        }
+
+        mouseEvent.openingMode.rect.set({ name: 'opening' })
+        setMode(Mode.DEFAULT)
+      },
+    },
+  }
+
+  const checkCrossAreaBoundary = (rect) => {
+    const openings = canvas?._objects.filter((obj) => obj.name === 'opening')
+    if (openings.length === 0) {
+      return false
+    }
+
+    const rectPoints = [
+      { x: rect.left, y: rect.top },
+      { x: rect.left, y: rect.top + rect.height },
+      { x: rect.left + rect.width, y: rect.top + rect.height },
+      { x: rect.left + rect.width, y: rect.top },
+    ]
+
+    const rect1Corners = {
+      minX: Math.min(...rectPoints.map((point) => point.x)),
+      maxX: Math.max(...rectPoints.map((point) => point.x)),
+      minY: Math.min(...rectPoints.map((point) => point.y)),
+      maxY: Math.max(...rectPoints.map((point) => point.y)),
+    }
+    let isCross = true
+    for (let i = 0; i < openings.length; i++) {
+      if (i !== 0 && isCross) {
+        break
+      }
+      const rect2 = openings[i]
+      const rect2Points = [
+        { x: rect2.left, y: rect2.top },
+        { x: rect2.left, y: rect2.top + rect2.height },
+        { x: rect2.left + rect2.width, y: rect2.top + rect2.height },
+        { x: rect2.left + rect2.width, y: rect2.top },
+      ]
+
+      const rect2Corners = {
+        minX: Math.min(...rect2Points.map((point) => point.x)),
+        maxX: Math.max(...rect2Points.map((point) => point.x)),
+        minY: Math.min(...rect2Points.map((point) => point.y)),
+        maxY: Math.max(...rect2Points.map((point) => point.y)),
+      }
+
+      // Check if one rectangle is to the left of the other
+      if (
+        rect1Corners.maxX < rect2Corners.minX ||
+        rect2Corners.maxX < rect1Corners.minX ||
+        rect1Corners.maxY < rect2Corners.minY ||
+        rect2Corners.maxY < rect1Corners.minY
+      ) {
+        isCross = false
+        continue
+      } else {
+        isCross = true
+        break
+      }
+    }
+
+    return isCross
+  }
+
+  const checkInsideRoof = (rect) => {
+    let result = true
+    const roofs = canvas?._objects.filter((obj) => obj.name === 'roof')
+    if (roofs.length === 0) {
+      alert('지붕을 먼저 그려주세요')
+      canvas?.remove(rect)
+      return false
+    }
+
+    return result
+  }
+
+  const getInterSectPointByMouseLine = () => {
+    const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
+    if (mouseLines.length !== 2) {
+      return null
+    }
+    return calculateIntersection(mouseLines[0], mouseLines[1])
   }
 
   const pushHistoryLine = (line) => {
@@ -622,10 +1265,8 @@ export function useMode() {
     points.current = []
     historyPoints.current = []
 
-    // handleOuterlines()
     const wall = makePolygon(null, sort)
     wall.set({ name: 'wall' })
-    console.log('wall', wall)
 
     return wall
   }
@@ -641,83 +1282,48 @@ export function useMode() {
     }
   }
 
-  const textboxMode = () => {
-    canvas?.on('mouse:down', function (options) {
-      if (canvas?.getActiveObject()?.type === 'textbox') return
-      const pointer = canvas?.getPointer(options.e)
+  const templateSideMode = () => {
+    if (historyPoints.current.length >= 4) {
+      const firstPoint = historyPoints.current[0]
+      const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+      historyPoints.current.forEach((point) => {
+        canvas?.remove(point)
+      })
+      drawLineWithLength(lastPoint, firstPoint)
 
-      const textbox = new fabric.Textbox('텍스트를 입력하세요', {
-        left: pointer.x,
-        top: pointer.y,
-        width: 150, // 텍스트박스의 너비를 설정합니다.
-        fontSize: fontSize, // 텍스트의 크기를 설정합니다.
+      // 캔버스에서 모든 라인 객체를 찾습니다.
+      const lines = historyLines.current
+      historyLines.current = []
+
+      // 각 라인의 시작점과 끝점을 사용하여 다각형의 점 배열을 생성합니다.
+      const points = lines.map((line) => ({ x: line.x1, y: line.y1 }))
+
+      // 모든 라인 객체를 캔버스에서 제거합니다.
+      lines.forEach((line) => {
+        canvas?.remove(line)
       })
 
-      canvas?.add(textbox)
-      canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다.
-      canvas?.renderAll()
-      // textbox가 active가 풀린 경우 editing mode로 변경
-      textbox?.on('editing:exited', function () {
-        changeMode(canvas, Mode.EDIT)
-      })
-    })
-  }
-
-  const drawLineMode = () => {
-    canvas?.on('mouse:down', function (options) {
-      const pointer = canvas?.getPointer(options.e)
-
-      const line = new QLine(
-        [pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
+      // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
+      const polygon = new QPolygon(
+        points,
         {
           stroke: 'black',
-          strokeWidth: 2,
+          fill: 'transparent',
           viewLengthText: true,
-          selectable: false,
-          fontSize: fontSize,
+          fontSize: 15,
+          selectable: true,
         },
+        canvas,
       )
 
-      canvas?.add(line)
-      canvas?.renderAll()
-    })
-  }
+      // 새로운 다각형 객체를 캔버스에 추가합니다.
+      canvas.add(polygon)
 
-  const drawRectMode = () => {
-    let rect, isDown, origX, origY
-    canvas.on('mouse:down', function (o) {
-      isDown = true
-      const pointer = canvas.getPointer(o.e)
-      origX = pointer.x
-      origY = pointer.y
-      rect = new fabric.Rect({
-        left: origX,
-        top: origY,
-        originX: 'left',
-        originY: 'top',
-        width: pointer.x - origX,
-        height: pointer.y - origY,
-        angle: 0,
-        fill: 'transparent',
-        stroke: 'black',
-        transparentCorners: false,
-      })
-      canvas.add(rect)
-    })
+      console.log('polygon', polygon)
 
-    canvas.on('mouse:move', function (o) {
-      if (!isDown) return
-      const pointer = canvas.getPointer(o.e)
-      if (origX > pointer.x) {
-        rect.set({ left: Math.abs(pointer.x) })
-      }
-      if (origY > pointer.y) {
-        rect.set({ top: Math.abs(pointer.y) })
-      }
-
-      rect.set({ width: Math.abs(origX - pointer.x) })
-      rect.set({ height: Math.abs(origY - pointer.y) })
-    })
+      changeMode(canvas, Mode.DEFAULT)
+      return polygon
+    }
   }
 
   /**
@@ -744,33 +1350,7 @@ export function useMode() {
   const makePolygon = (otherLines, sort = true) => {
     // 캔버스에서 모든 라인 객체를 찾습니다.
     const lines = otherLines || historyLines.current
-
-    if (!otherLines) {
-      //외각선 기준
-      const topIndex = findTopTwoIndexesByDistance(sortedArray) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
-
-      //일단 배열 6개 짜리 기준의 선 번호
-      if (topIndex[0] === 4) {
-        if (topIndex[1] === 5) {
-          //1번
-          setShape(1)
-        }
-      } else if (topIndex[0] === 1) {
-        //4번
-        if (topIndex[1] === 2) {
-          setShape(4)
-        }
-      } else if (topIndex[0] === 0) {
-        if (topIndex[1] === 1) {
-          //2번
-          setShape(2)
-        } else if (topIndex[1] === 5) {
-          setShape(3)
-        }
-      }
-
-      historyLines.current = []
-    }
+    historyLines.current = []
 
     // 각 라인의 시작점과 끝점을 사용하여 다각형의 점 배열을 생성합니다.
     const points = lines.map((line) => ({ x: line.x1, y: line.y1 }))
@@ -798,12 +1378,10 @@ export function useMode() {
     canvas.add(polygon)
 
     // 캔버스를 다시 그립니다.
-    if (!otherLines) {
-      // polygon.fillCell()
-      canvas?.renderAll()
-      // polygon.setViewLengthText(false)
-      setMode(Mode.DEFAULT)
-    }
+    // polygon.fillCell()
+    canvas?.renderAll()
+    // polygon.setViewLengthText(false)
+    setMode(Mode.DEFAULT)
 
     return polygon
   }
@@ -815,20 +1393,38 @@ export function useMode() {
     canvas?.clear()
     startPoint.current = null
     setEndPoint(null)
+    pointCount.current = 0
     setTemplateType(0)
     points.current = []
     historyPoints.current = []
     historyLines.current = []
+    setRoof(null)
+    setWall(null)
 
     setSelectedCellRoofArray([]) //셀 그린거 삭제
   }
 
+  const clearEditMode = () => {
+    startPoint.current = null
+    setEndPoint(null)
+    pointCount.current = 0
+    points.current = []
+    historyPoints.current = []
+    historyLines.current = []
+  }
+
   const zoomIn = () => {
+    if (canvas.getZoom() + 0.1 > 1.6) {
+      return
+    }
     canvas?.setZoom(canvas.getZoom() + 0.1)
     setZoom(Math.round(zoom + 10))
   }
 
   const zoomOut = () => {
+    if (canvas.getZoom() - 0.1 < 0.5) {
+      return
+    }
     canvas?.setZoom(canvas.getZoom() - 0.1)
     setZoom(Math.ceil(zoom - 10))
   }
@@ -918,12 +1514,13 @@ export function useMode() {
         return { x1: point.x, y1: point.y }
       }),
     )
+    roof.name = 'roofBase'
     roof.setWall(polygon)
     setRoof(roof)
     setWall(polygon)
 
-    // roof.drawHelpLine()
-    // roof.divideLine()
+    roof.drawHelpLine()
+    roof.divideLine()
   }
 
   const drawRoofPolygon = (wall, offset = 50) => {
@@ -1348,9 +1945,14 @@ export function useMode() {
   }
 
   const applyTemplateA = () => {
+    if (historyPoints.current.length === 0) {
+      changeMode(canvas, Mode.EDIT)
+      return
+    }
+
     changeMode(canvas, Mode.EDIT)
     const polygon = drawWallPolygon(false)
-    handleClear()
+    // handleClear()
 
     if (polygon.lines.length === 4) {
       //4각형
@@ -1537,6 +2139,7 @@ export function useMode() {
       lines.push(line)
       canvas.add(line)
     }
+    canvas?.remove(polygon) //폴리곤
 
     let highLineLength = 0
     let lowLineLength = 0
@@ -1643,6 +2246,10 @@ export function useMode() {
         )
 
         canvas.add(horiCenterLine1)
+        //나중에 기울기 길이 적용할때 쓸라고 대충 냅둠
+        // canvas?.renderAll()
+        // console.log('horiCenterLine1', horiCenterLine1)
+        // horiCenterLine1.text.set('text', getRoofHeight(horiCenterLine1.length, getDegreeByChon(4)).toString())
 
         let horiCenterLine2 = new QLine(
           [
@@ -2789,7 +3396,11 @@ export function useMode() {
    * 템플릿 B 적용
    */
   const applyTemplateB = () => {
-    changeMode(canvas, Mode.EDIT)
+    if (historyPoints.current.length === 0) {
+      changeMode(canvas, Mode.EDIT)
+      return
+    }
+
     const polygon = drawWallPolygon(false)
     const params = {
       eaves: 50,
@@ -4060,53 +4671,54 @@ export function useMode() {
         if (templateType === 2) {
           //셀이 그려져야할 기준 방향
           //A타입
-          if (parallelPoint === 0 || parallelPoint === 5) {
-            referenceDirection = 'top'
-          } else {
-            referenceDirection = 'bottom'
-          }
+          referenceDirection = parallelPoint === 0 || parallelPoint === 5 ? 'top' : 'bottom'
         } else if (templateType === 3) {
           //B타입
-          if (parallelPoint === 0 || parallelPoint === 1) {
-            referenceDirection = 'left'
-          } else {
-            referenceDirection = 'right'
-          }
+          referenceDirection = parallelPoint === 0 || parallelPoint === 1 ? 'left' : 'right'
         }
       }
 
-      //셀이 생성될 지붕의 흐름방향을 정함
-      templateCenterLine.some((centerLine) => {
+      if (templateCenterLine.length > 0) {
+        //셀이 생성될 지붕의 흐름방향을 정함
+        templateCenterLine.some((centerLine) => {
+          if (templateType === 2) {
+            trestlePolygon.set({
+              referenceDirection: referenceDirection,
+              startIndex: parallelPoint,
+            }) //기준면 방향
+            trestlePolygon.points.forEach((trestleLine, index) => {
+              if (trestleLine.x === centerLine.x1 - 12) {
+                trestlePolygon.set({ wallDirection: 'left' })
+                return true
+              } else if (trestleLine.x === centerLine.x1 + 12) {
+                trestlePolygon.set({ wallDirection: 'right' })
+                return true
+              }
+            })
+          } else if (templateType === 3) {
+            trestlePolygon.set({
+              referenceDirection: referenceDirection,
+              startIndex: parallelPoint,
+            }) //기준면 방향
+            trestlePolygon.points.forEach((trestleLine, index) => {
+              if (trestleLine.y === centerLine.y1 - 12) {
+                trestlePolygon.set({ wallDirection: 'top' })
+                return true
+              } else if (trestleLine.y === centerLine.y1 + 12) {
+                trestlePolygon.set({ wallDirection: 'bottom' })
+                return true
+              }
+            })
+          }
+        })
+      } else {
         if (templateType === 2) {
-          trestlePolygon.set({
-            referenceDirection: referenceDirection,
-            startIndex: parallelPoint,
-          }) //기준면 방향
-          trestlePolygon.points.forEach((trestleLine, index) => {
-            if (trestleLine.x === centerLine.x1 - 12) {
-              trestlePolygon.set({ wallDirection: 'left' })
-              return true
-            } else if (trestleLine.x === centerLine.x1 + 12) {
-              trestlePolygon.set({ wallDirection: 'right' })
-              return true
-            }
-          })
+          index === 0 ? trestlePolygon.set({ wallDirection: 'left' }) : trestlePolygon.set({ wallDirection: 'right' })
         } else if (templateType === 3) {
-          trestlePolygon.set({
-            referenceDirection: referenceDirection,
-            startIndex: parallelPoint,
-          }) //기준면 방향
-          trestlePolygon.points.forEach((trestleLine, index) => {
-            if (trestleLine.y === centerLine.y1 - 12) {
-              trestlePolygon.set({ wallDirection: 'top' })
-              return true
-            } else if (trestleLine.y === centerLine.y1 + 12) {
-              trestlePolygon.set({ wallDirection: 'bottom' })
-              return true
-            }
-          })
+          index === 0 ? trestlePolygon.set({ wallDirection: 'top' }) : trestlePolygon.set({ wallDirection: 'bottom' })
         }
-      })
+        trestlePolygon.set({ referenceDirection: 'none' })
+      }
 
       /**
        * 가대 선택 이벤트
@@ -4137,34 +4749,8 @@ export function useMode() {
 
     const wallDirection = polygon.wallDirection
 
-    // //A템플릿 타입
-    // if (templateType === 2) {
-    //   if (compass === 90) {
-    //     if (wallDirection === 'right') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   } else if (compass === 270) {
-    //     if (wallDirection === 'left') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   }
-    // } else if (templateType === 3) {
-    //   if (compass === 0) {
-    //     if (wallDirection === 'top') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   } else if (compass === 180) {
-    //     if (wallDirection === 'bottom') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   }
-    // }
-
     const invalidDirections = {
+      //반대편으로 작성
       2: {
         90: 'right',
         270: 'left',
@@ -4233,7 +4819,6 @@ export function useMode() {
     }
 
     if (drewRoofCells.length > 0) {
-      //리코일에
       if (confirm('패널이 초기화 됩니다.')) {
         drewRoofCells.forEach((cells, index) => {
           cells.drawCells.forEach((cell) => {
@@ -4245,7 +4830,7 @@ export function useMode() {
       }
     }
 
-    const inputCellSize = { width: 172, height: 113 } //추후 입력받는 값으로 변경
+    const inputCellSize = { width: 172, height: 70 } //추후 입력받는 값으로 변경
     const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
 
     if (templateType === 2) {
@@ -4260,10 +4845,9 @@ export function useMode() {
         wallDirection: polygon.wallDirection,
         referenceDirection: polygon.referenceDirection,
         startIndex: polygon.startIndex,
+        isCellCenter: isCellCenter,
       })
       drawCellsArray.push({ roofIndex: polygon.idx, drawCells: drawCells })
-
-      // toggleSelection(polygon) //선택 후 셀그리면 지우려고 했는데 방위 땜에 삭제
     })
 
     setDrewRoofCells(drawCellsArray)
@@ -4271,19 +4855,17 @@ export function useMode() {
   }
 
   const createRoofRack = () => {
-    roof.divideLine()
-    const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle')
-    // 이미 만들어진 가대가 있을 경우 return
-    if (trestlePolygons.length !== 0) {
-      return
-    }
-
+    removeMouseLines()
     canvas?.off('mouse:move')
     canvas?.off('mouse:out')
-    document.removeEventListener('keydown', handleKeyDown)
     const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
+    const dormers = canvas?.getObjects().filter((obj) => obj.name === 'dormer')
+
+    console.log('roofs', roofs)
+
     roofs.forEach((roof, index) => {
-      const offsetPolygonPoint = offsetPolygon(roof.points, -20)
+      // const offsetPolygonPoint = offsetPolygon(roof.points(), -20) //이동되서 찍을라고 바꿈
+      const offsetPolygonPoint = offsetPolygon(roof.getCurrentPoints(), -20)
 
       const trestlePoly = new QPolygon(offsetPolygonPoint, {
         fill: 'transparent',
@@ -4301,17 +4883,167 @@ export function useMode() {
         lockScalingY: true, // Y 축 크기 조정 잠금
         idx: index,
         parentId: roof.id,
+        direction: roof.direction,
       })
 
       canvas?.add(trestlePoly)
+      trestlePoly.setViewLengthText(false)
     })
+
+    //도머가 있으면 외곽으로 선을 낸다
+    dormers.forEach((dormer) => {
+      const offsetDormerPoint = offsetPolygon(rectToPolygon(dormer), 20)
+      const dormerPoly = new QPolygon(offsetDormerPoint, {
+        fill: 'transparent',
+        stroke: 'blue',
+        strokeDashArray: [5, 5],
+        strokeWidth: 1,
+        fontSize: fontSize,
+        name: 'dormerTrestle',
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y축 이동 잠금
+        lockRotation: true, // 회전 잠금
+        lockScalingX: true, // X축 크기 조정 잠금
+        lockScalingY: true, // Y축 크기 조정 잠금
+      })
+      canvas?.add(dormerPoly)
+      dormerPoly.setViewLengthText(false)
+    })
+
     removeHelpPointAndHelpLine()
   }
 
+  const rectToPolygon = (rect) => {
+    const points = []
+    const left = rect.left
+    const top = rect.top
+    const width = rect.width * rect.scaleX // 스케일 적용
+    const height = rect.height * rect.scaleY // 스케일 적용
+
+    // 네 개의 꼭짓점 좌표 계산
+    points.push({ x: left, y: top }) // 좌상단
+    points.push({ x: left + width, y: top }) // 우상단
+    points.push({ x: left + width, y: top + height }) // 우하단
+    points.push({ x: left, y: top + height }) // 좌하단
+
+    return points
+  }
+
+  const polygonToTurfPolygon = (polygon) => {
+    const coordinates = polygon.points.map((point) => [point.x, point.y])
+    coordinates.push(coordinates[0])
+    return turf.polygon(
+      [coordinates],
+      {},
+      {
+        parentId: polygon.parentId,
+      },
+    )
+  }
+
+  /**
+   * trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
+   * 확인 후 셀을 이동시킴
+   */
+  const drawCellManualInTrestle = () => {
+    const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle') //가대를 가져옴
+
+    if (trestlePolygons.length !== 0) {
+      let lastPointPosition = { x: 0, y: 0 }
+      let fabricPolygon = null
+      let inside = false
+      let turfPolygon
+      let manualDrawCells = drewRoofCells //
+
+      canvas.on('mouse:move', (e) => {
+        //마우스 이벤트 삭제 후 재추가
+        const mousePoint = canvas.getPointer(e.e)
+        const turfPoint = turf.point([mousePoint.x, mousePoint.y])
+
+        for (let i = 0; i < trestlePolygons.length; i++) {
+          turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
+          if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) {
+            //turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
+            const direction = trestlePolygons[i].direction //도형의 방향
+            let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4
+            let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2
+            if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
+              let isDrawing = false
+
+              if (isDrawing) return
+              canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
+
+              const points = [
+                { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
+                { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
+                { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
+                { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
+              ]
+
+              fabricPolygon = new QPolygon(points, {
+                fill: '#BFFD9F',
+                stroke: 'black',
+                selectable: false, // 선택 가능하게 설정
+                lockMovementX: true, // X 축 이동 잠금
+                lockMovementY: true, // Y 축 이동 잠금
+                lockRotation: true, // 회전 잠금
+                lockScalingX: true, // X 축 크기 조정 잠금
+                lockScalingY: true, // Y 축 크기 조정 잠금
+                opacity: 0.8,
+                parentId: trestlePolygons[i].parentId,
+                name: 'tmpCell',
+              })
+
+              canvas?.add(fabricPolygon) //움직여가면서 추가됨
+              lastPointPosition = { x: mousePoint.x, y: mousePoint.y }
+            }
+
+            canvas?.renderAll()
+            inside = true
+            break
+          } else {
+            inside = false
+          }
+        }
+
+        if (!inside) {
+          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell'))
+          canvas?.renderAll()
+        }
+      })
+
+      canvas?.on('mouse:up', (e) => {
+        if (!inside) return
+        if (fabricPolygon) {
+          const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
+
+          if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
+            //마우스 클릭시 set으로 해당 위치에 셀을 넣음
+            const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
+            if (!isOverlap) {
+              //안겹치면 넣는다
+              fabricPolygon.set({ name: 'cell' })
+              fabricPolygon.setCoords()
+              manualDrawCells.push(fabricPolygon)
+            } else {
+              alert('셀끼리 겹치면 안되죠?')
+            }
+          } else {
+            alert('나갔으요!!')
+          }
+          setDrewRoofCells(manualDrawCells)
+        }
+      })
+    }
+  }
+
   //배터리 셀 넣기
   const drawCellInTrestle = () => {
     const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && obj.selected)
     const notSelectedTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle' && !obj.selected)
+
+    const dormerTrestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'dormerTrestle') //도머 객체
+
     if (trestlePolygons.length === 0) {
       alert('가대가 없습니다.')
       return
@@ -4335,18 +5067,212 @@ export function useMode() {
         return acc.length > cur.length ? acc : cur
       })
 
-      let drawRoofCells
-      if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
-        drawRoofCells = trestle.fillCell({ width: 50, height: 100, padding: 10 })
-        trestle.direction = 'south'
-      } else {
-        drawRoofCells = trestle.fillCell({ width: 100, height: 50, padding: 10 })
-        trestle.direction = 'east'
+      const turfTrestlePolygon = polygonToTurfPolygon(trestle) //폴리곤을 turf 객체로 변환
+
+      const containsDormerTrestlePolygons = dormerTrestlePolygons.filter((dormerTrestle) => {
+        // 폴리곤 안에 도머 폴리곤이 포함되어있는지 확인해서 반환하는 로직
+        return (
+          turf.booleanContains(turfTrestlePolygon, polygonToTurfPolygon(dormerTrestle)) ||
+          turf.booleanWithin(polygonToTurfPolygon(dormerTrestle), turfTrestlePolygon)
+        )
+      })
+
+      let difference = turfTrestlePolygon //기본 객체(면형상)
+
+      if (containsDormerTrestlePolygons.length > 0) {
+        //turf로 도머를 제외시키는 로직
+        for (let i = 0; i < containsDormerTrestlePolygons.length; i++) {
+          if (i === 0) {
+            difference = turf.difference(turf.featureCollection([turfTrestlePolygon, polygonToTurfPolygon(containsDormerTrestlePolygons[i])])) //한 면에 도머가 1개일때
+          } else {
+            if (difference) {
+              difference = turf.difference(turf.featureCollection([difference, polygonToTurfPolygon(containsDormerTrestlePolygons[i])])) //한면에 도머가 여러개일때 계속 제외시킴
+            }
+          }
+        }
       }
 
-      drawRoofCells.forEach((cell) => {
-        drawCellsArray.push(cell)
-      })
+      const bbox = turf.bbox(difference)
+      let width = maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left' ? 172.2 : 113.4
+      let height = maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left' ? 113.4 : 172.2
+
+      //배치면때는 방향쪽으로 패널이 넓게 누워져야함
+      if (trestle.direction !== undefined) {
+        width = trestle.direction === 'south' || trestle.direction === 'north' ? 172.2 : 113.4
+        height = trestle.direction === 'south' || trestle.direction === 'north' ? 113.4 : 172.2
+      }
+      const cols = Math.floor((bbox[2] - bbox[0]) / width)
+      const rows = Math.floor((bbox[3] - bbox[1]) / height)
+
+      // console.log('bbox', bbox)
+
+      const boxes = []
+      const installedCellsArray = []
+
+      for (let x = bbox[0]; x < bbox[2]; x += width) {
+        for (let y = bbox[1]; y < bbox[3]; y += height) {
+          const box = turf.polygon([
+            [
+              [x, y],
+              [x + width, y],
+              [x + width, y + height],
+              [x, y + height],
+              [x, y],
+            ],
+          ])
+
+          if (turf.booleanWithin(box, turfTrestlePolygon)) {
+            boxes.push(box)
+          }
+        }
+      }
+
+      for (let col = 0; col <= cols; col++) {
+        for (let row = 0; row <= rows; row++) {
+          let x = 0,
+            y = 0,
+            square = [],
+            margin = 0
+
+          if (trestle.direction !== undefined) {
+            //배치면 처림 방향이 정해져있는 경우
+
+            if (trestle.direction === 'south' || trestle.direction === 'north') {
+              //남,북
+              margin = (bbox[2] - bbox[0] - cols * width) / 2 //박스 끝에서 박스 시작값을 빼고 width와 계산된 cols를 곱한값을 뺀뒤 나누기 2 하면 가운데 배치됨
+              if (trestle.direction === 'south') {
+                //남쪽
+                x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin //상하 위치 기준이면 좌우 가운데 정렬한다
+                y = bbox[3] - row * height
+              } else {
+                //북쪽
+                x = col === 0 ? trestle.left + margin : bbox[0] + col * width + margin
+                y = bbox[1] + row * height
+              }
+            } else if (trestle.direction === 'east' || trestle.direction === 'west') {
+              //동쪽
+              margin = (bbox[3] - bbox[1] - rows * height) / 2
+              if (trestle.direction === 'east') {
+                x = bbox[2] - col * width
+                y = rows === 0 ? trestle.top + margin : bbox[1] + row * height + margin //좌우 위치 기준이면 상하 가운데 정렬한다
+              } else {
+                x = bbox[0] + col * width
+                y = rows === 0 ? trestle.top + margin : bbox[1] + row * height + margin
+              }
+            }
+          } else {
+            //방향이 없는 경우 ex) 템플릿
+            x = bbox[0] + col * width
+            y = bbox[1] + row * height
+          }
+
+          square = [
+            [x, y],
+            [x + width, y],
+            [x + width, y + height],
+            [x, y + height],
+            [x, y],
+          ]
+
+          const squarePolygon = turf.polygon([square])
+
+          // console.log('turfTrestlePolygon', turfTrestlePolygon)
+          // console.log('squarePolygon', squarePolygon)
+
+          const areaSize = turf.area(turfTrestlePolygon)
+
+          // console.log('areaSize', areaSize)
+          const objSize = turf.area(squarePolygon)
+
+          // console.log('objSize', objSize)
+
+          const maxObject = Math.floor(areaSize / objSize)
+
+          // console.log('maxObjectSize', maxObject)
+
+          const disjointFromTrestle = turf.booleanContains(turfTrestlePolygon, squarePolygon) || turf.booleanWithin(squarePolygon, turfTrestlePolygon)
+
+          if (disjointFromTrestle) {
+            let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+            const points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+            if (containsDormerTrestlePolygons.length > 0) {
+              //도머가 있으면 적용되는 로직
+              const isDisjoint = containsDormerTrestlePolygons.some((dormerTrestle) => {
+                return turf.booleanDisjoint(squarePolygon, polygonToTurfPolygon(dormerTrestle)) //도머가 여러개일수있으므로 겹치는게 있다면...
+              })
+              if (isDisjoint) {
+                const fabricPolygon = new QPolygon(points, {
+                  fill: '#BFFD9F',
+                  stroke: 'black',
+                  selectable: true, // 선택 가능하게 설정
+                  lockMovementX: false, // X 축 이동 잠금
+                  lockMovementY: false, // Y 축 이동 잠금
+                  lockRotation: false, // 회전 잠금
+                  lockScalingX: false, // X 축 크기 조정 잠금
+                  lockScalingY: false, // Y 축 크기 조정 잠금
+                  opacity: 0.8,
+                  parentId: trestle.parentId,
+                })
+                canvas?.add(fabricPolygon)
+                drawCellsArray.push(fabricPolygon)
+              }
+            } else {
+              //도머가 없을땐 그냥 그림
+              const fabricPolygon = new QPolygon(points, {
+                fill: '#BFFD9F',
+                stroke: 'black',
+                selectable: true, // 선택 가능하게 설정
+                lockMovementX: true, // X 축 이동 잠금
+                lockMovementY: true, // Y 축 이동 잠금
+                lockRotation: true, // 회전 잠금
+                lockScalingX: true, // X 축 크기 조정 잠금
+                lockScalingY: true, // Y 축 크기 조정 잠금
+                opacity: 0.8,
+                parentId: trestle.parentId,
+              })
+              canvas?.add(fabricPolygon)
+              drawCellsArray.push(fabricPolygon)
+            }
+          }
+        }
+      }
+
+      // let drawRoofCells
+      // if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
+      //   drawRoofCells = trestle.fillCell({ width: 113.4, height: 172.2, padding: 0 })
+      //   trestle.direction = 'south'
+      // } else {
+      //   drawRoofCells = trestle.fillCell({ width: 172.2, height: 113.4, padding: 0 })
+      //   trestle.direction = 'east'
+      // }
+
+      // drawRoofCells.forEach((cell) => {
+      //   drawCellsArray.push(cell)
+      // })
+
+      /**
+       * 추후에 가대까지 완료하면 그룹시켜버림
+       */
+      // const groupCellObj = canvas
+      //   ?.getObjects()
+      //   .filter(
+      //     (obj) =>
+      //       obj?.parentId === trestle.parentId ||
+      //       obj?.id === trestle.parentId ||
+      //       (obj?.name === 'arrow' && obj?.parent.id === trestle.parentId) ||
+      //       (obj?.name === 'directionText' && obj?.parent.parent.id === trestle.parentId),
+      //   )
+
+      // console.log('groupCellObj', groupCellObj)
+
+      // canvas?.add(
+      //   new fabric.Group(groupCellObj, {
+      //     name: 'cellGroup',
+      //     originX: 'center',
+      //     originY: 'center',
+      //   }),
+      // )
     })
 
     setDrewRoofCells(drawCellsArray)
@@ -4575,7 +5501,6 @@ export function useMode() {
     mode,
     setMode,
     changeMode,
-    setCanvas,
     handleClear,
     zoomIn,
     zoomOut,
@@ -4588,6 +5513,7 @@ export function useMode() {
     createRoofRack,
     drawRoofPolygon,
     drawCellInTrestle,
+    drawCellManualInTrestle,
     setDirectionTrestles,
     cutHelpLines,
   }
diff --git a/src/hooks/useMouse.js b/src/hooks/useMouse.js
new file mode 100644
index 00000000..d484930a
--- /dev/null
+++ b/src/hooks/useMouse.js
@@ -0,0 +1,23 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { calculateIntersection } from '@/util/canvas-util'
+
+export function useMouse() {
+  const canvas = useRecoilValue(canvasState)
+
+  //가로선, 세로선의 교차점을 return
+  const getIntersectMousePoint = (e) => {
+    let pointer = canvas.getPointer(e.e)
+    const mouseLines = canvas.getObjects().filter((obj) => obj.name === 'mouseLine')
+
+    if (mouseLines.length < 2) {
+      return pointer
+    }
+
+    return calculateIntersection(mouseLines[0], mouseLines[1]) || pointer
+  }
+
+  return {
+    getIntersectMousePoint,
+  }
+}
diff --git a/src/hooks/useObject.js b/src/hooks/useObject.js
new file mode 100644
index 00000000..f6289129
--- /dev/null
+++ b/src/hooks/useObject.js
@@ -0,0 +1,16 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+
+export function useObject() {
+  const canvas = useRecoilValue(canvasState)
+
+  const deleteObject = (obj) => {
+    canvas
+      ?.getObjects()
+      .filter((item) => item.parent === obj || item.parentId === obj.id)
+      .forEach((item) => {
+        canvas.remove(item)
+      })
+  }
+  return { deleteObject }
+}
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
new file mode 100644
index 00000000..bd6c9eff
--- /dev/null
+++ b/src/hooks/usePlan.js
@@ -0,0 +1,155 @@
+import { useRecoilState } from 'recoil'
+import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { useMessage } from '@/hooks/useMessage'
+import { toastUp } from '@/hooks/useToast'
+
+export function usePlan() {
+  const [canvas, setCanvas] = useRecoilState(canvasState)
+  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const { getMessage } = useMessage()
+  const { get, promisePost, promisePut } = useAxios()
+
+  /**
+   * 마우스 포인터의 가이드라인을 제거합니다.
+   */
+  const removeMouseLines = () => {
+    if (canvas?._objects.length > 0) {
+      const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
+      mouseLines.forEach((item) => canvas?.remove(item))
+    }
+    canvas?.renderAll()
+  }
+
+  const addCanvas = () => {
+    const objs = canvas?.toJSON([
+      'selectable',
+      'name',
+      'parentId',
+      'id',
+      'length',
+      'idx',
+      'direction',
+      'lines',
+      'points',
+      'lockMovementX',
+      'lockMovementY',
+      'lockRotation',
+      'lockScalingX',
+      'lockScalingY',
+      'opacity',
+      'cells',
+      'maxX',
+      'maxY',
+      'minX',
+      'minY',
+      'x',
+      'y',
+      'stickeyPoint',
+    ])
+
+    const str = JSON.stringify(objs)
+
+    // canvas?.clear()
+    return str
+
+    // setTimeout(() => {
+    //   // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
+    //   canvas?.loadFromJSON(JSON.parse(str), function () {
+    //     // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
+    //     console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
+    //     canvas?.renderAll() // 캔버스를 다시 그립니다.
+    //   })
+    // }, 1000)
+  }
+
+  /**
+   * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
+   */
+  const dbToCanvasFormat = (cs) => {
+    return JSON.stringify(cs.replace(/##/g, '"').replace(/\\/g, '').slice(1, -1))
+  }
+
+  /**
+   * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
+   */
+  const canvasToDbFormat = (cs) => {
+    return JSON.stringify(cs).replace(/"/g, '##')
+  }
+
+  /**
+   * 페이지 내 캔버스를 저장하는 함수
+   *
+   * 1. 신규 저장 : POST
+   *      param(body) : userId, objectNo, canvasStatus
+   * 2. 수정 저장 : PUT
+   *      param(body) : id, canvasStatus
+   */
+  const saveCanvas = async (userId) => {
+    removeMouseLines()
+    const canvasStatus = addCanvas()
+
+    if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
+      // canvas 수정
+      const planData = {
+        id: currentCanvasPlan.id,
+        canvasStatus: canvasToDbFormat(canvasStatus),
+      }
+
+      await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
+        .then((res) => {
+          toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
+          console.log('[PUT] canvas-statuses res :::::::: %o', res)
+          setInitCanvasPlans((initCanvasPlans) =>
+            initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
+          )
+        })
+        .catch((error) => {
+          toastUp({ message: error.message, type: 'error' })
+          console.error('[PUT] canvas-statuses error :::::::: %o', error)
+        })
+    } else {
+      // canvas 신규 등록
+      const planData = {
+        userId: userId,
+        imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
+        objectNo: currentCanvasPlan.objectNo,
+        canvasStatus: canvasToDbFormat(canvasStatus),
+      }
+
+      await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
+        .then((res) => {
+          toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
+          console.log('[POST] canvas-statuses response :::::::: %o', res)
+        })
+        .catch((error) => {
+          toastUp({ message: error.message, type: 'error' })
+          console.error('[POST] canvas-statuses res error :::::::: %o', error)
+        })
+    }
+  }
+
+  /**
+   * objectNo에 해당하는 canvas 목록을 조회하는 함수
+   */
+  const getCanvasByObjectNo = async (objectNo) => {
+    return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) =>
+      res.map((item) => ({
+        id: item.id,
+        name: item.objectNo + '-' + item.id, // tab button에 표출될 이름 (임시)
+        userId: item.userId,
+        canvasStatus: dbToCanvasFormat(item.canvasStatus),
+        isCurrent: false,
+      })),
+    )
+  }
+
+  return {
+    canvas,
+    removeMouseLines,
+    saveCanvas,
+    addCanvas,
+    getCanvasByObjectNo,
+  }
+}
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
new file mode 100644
index 00000000..b364bf86
--- /dev/null
+++ b/src/hooks/usePolygon.js
@@ -0,0 +1,98 @@
+import { canvasState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
+import { fabric } from 'fabric'
+import { getDirectionByPoint } from '@/util/canvas-util'
+
+export const usePolygon = () => {
+  const canvas = useRecoilValue(canvasState)
+  const fontSize = useRecoilValue(fontSizeState)
+  const fontFamily = useRecoilValue(fontFamilyState)
+
+  const addPolygon = (points, options) => {
+    const polygon = new fabric.Polygon(points, {
+      ...options,
+      selectable: options.selectable ?? false,
+    })
+
+    canvas?.add(polygon)
+    addLengthText(polygon)
+  }
+
+  const addPolygonByLines = (lines, options) => {
+    const points = createPolygonPointsFromOuterLines(lines)
+
+    addPolygon(points, {
+      ...options,
+    })
+  }
+
+  const addLengthText = (polygon) => {
+    const points = polygon.get('points')
+    points.forEach((start, i) => {
+      const end = points[(i + 1) % points.length]
+      const dx = end.x - start.x
+      const dy = end.y - start.y
+      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10
+
+      const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
+
+      const degree = (Math.atan2(dy, dx) * 180) / Math.PI
+
+      // Create new text object if it doesn't exist
+      const text = new fabric.IText(length.toString(), {
+        left: midPoint.x,
+        top: midPoint.y,
+        fontSize: fontSize,
+        parentId: polygon.id,
+        minX: Math.min(start.x, end.x),
+        maxX: Math.max(start.x, end.x),
+        minY: Math.min(start.y, end.y),
+        maxY: Math.max(start.y, end.y),
+        parentDirection: getDirectionByPoint(start, end),
+        parentDegree: degree,
+        dirty: true,
+        editable: true,
+        selectable: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        idx: i,
+        name: 'lengthText',
+        parent: this,
+      })
+
+      // this.texts.push(text)
+      canvas.add(text)
+    })
+    canvas.renderAll()
+  }
+
+  const createPolygonPointsFromOuterLines = (outerLines) => {
+    if (!outerLines || outerLines.length === 0) {
+      return []
+    }
+
+    // Extract points from outerLines
+
+    return outerLines.map((line) => ({
+      x: line.x1,
+      y: line.y1,
+    }))
+  }
+
+  const removePolygon = (polygon) => {
+    const texts = canvas.getObjects().filter((obj) => obj.parentId === polygon.id)
+    texts.forEach((text) => {
+      canvas.remove(text)
+    })
+
+    canvas.remove(polygon)
+    canvas.renderAll()
+  }
+
+  return {
+    addPolygon,
+    addPolygonByLines,
+    removePolygon,
+  }
+}
diff --git a/src/hooks/useSwal.js b/src/hooks/useSwal.js
new file mode 100644
index 00000000..ab747756
--- /dev/null
+++ b/src/hooks/useSwal.js
@@ -0,0 +1,48 @@
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+/**
+ * title: 제목
+ * text: 내용
+ * html: html
+ * type: alert, confirm
+ * icon: icontype (success, error, warning, info, question)
+ * confirmFn: 확인 버튼 클릭 시 실행할 함수
+ * denyFn: 취소 버튼 클릭 시 실행할 함수
+ * @returns
+ */
+export const useSwal = () => {
+  const MySwal = withReactContent(Swal)
+
+  const swalFire = ({ title = '', text = '', html = '', type = 'alert', icon = '', confirmFn = () => {}, denyFn = () => {} }) => {
+    if (type === 'alert') {
+      MySwal.fire({
+        title,
+        text,
+        icon: icon === '' ? 'success' : icon,
+        confirmButtonText: '확인',
+      })
+    } else if (type === 'confirm') {
+      MySwal.fire({
+        title,
+        text,
+        html,
+        icon: icon === '' ? 'question' : icon,
+        showCloseButton: true,
+        showCancelButton: true,
+        confirmButtonText: '확인',
+        cancelButtonText: '취소',
+      }).then((result) => {
+        if (result.isConfirmed) {
+          confirmFn()
+        } else if (result.isDenied) {
+          denyFn()
+        }
+      })
+    }
+  }
+
+  return {
+    swalFire,
+  }
+}
diff --git a/src/hooks/useTempGrid.js b/src/hooks/useTempGrid.js
new file mode 100644
index 00000000..8d7bac42
--- /dev/null
+++ b/src/hooks/useTempGrid.js
@@ -0,0 +1,65 @@
+import { canvasState, tempGridModeState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { gridColorState } from '@/store/gridAtom'
+
+export function useTempGrid() {
+  const canvas = useRecoilValue(canvasState)
+  const gridColor = useRecoilValue(gridColorState)
+  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
+  const tempGridModeStateLeftClickEvent = (e) => {
+    //임의 그리드 모드일 경우
+    let pointer = canvas.getPointer(e.e)
+
+    const tempGrid = new fabric.Line([pointer.x, 0, pointer.x, canvas.height], {
+      stroke: gridColor,
+      strokeWidth: 1,
+      selectable: true,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeDashArray: [5, 2],
+      opacity: 0.3,
+      direction: 'vertical',
+      name: 'tempGrid',
+    })
+
+    canvas.add(tempGrid)
+
+    canvas.renderAll()
+  }
+
+  const tempGridRightClickEvent = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    //임의 그리드 모드일 경우
+    let pointer = { x: e.offsetX, y: e.offsetY }
+
+    const tempGrid = new fabric.Line([0, pointer.y, canvas.width, pointer.y], {
+      stroke: gridColor,
+      strokeWidth: 1,
+      selectable: true,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeDashArray: [5, 2],
+      opacity: 0.3,
+      name: 'tempGrid',
+      direction: 'horizontal',
+    })
+
+    canvas.add(tempGrid)
+
+    canvas.renderAll()
+  }
+
+  return {
+    tempGridModeStateLeftClickEvent,
+    tempGridRightClickEvent,
+    tempGridMode,
+    setTempGridMode,
+  }
+}
diff --git a/src/hooks/useToast.js b/src/hooks/useToast.js
index d9c0fdb3..d604c42d 100644
--- a/src/hooks/useToast.js
+++ b/src/hooks/useToast.js
@@ -13,7 +13,7 @@ const toastDefaultOptions = {
   closeOnClick: true,
 }
 
-const QToast = (props) => {
+const toastUp = (props) => {
   // type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default'
   const { message, type = 'info', options } = props
   const customOptions = { ...toastDefaultOptions, ...options }
@@ -32,4 +32,4 @@ const QToast = (props) => {
   }
 }
 
-export { QToast }
+export { toastUp }
diff --git a/src/lib/Axios.js b/src/lib/Axios.js
index cae33f3e..d773d352 100644
--- a/src/lib/Axios.js
+++ b/src/lib/Axios.js
@@ -24,32 +24,32 @@ axiosInstance.interceptors.request.use(undefined, (error) => {
   // }
 })
 
-export const get = (url) =>
+export const get = ({ url }) =>
   axiosInstance
     .get(url)
     .then((res) => res.data)
     .catch(console.error)
 
-export const post = (url, data) =>
+export const post = ({ url, data }) =>
   axiosInstance
     .post(url, data)
     .then((res) => res.data)
     .catch(console.error)
 
-export const put = (url, data) =>
+export const put = ({ url, data }) =>
   axiosInstance
     .put(url, data)
     .then((res) => res.data)
     .catch(console.error)
 
-export const patch = (url, data) =>
+export const patch = ({ url, data }) =>
   axiosInstance
     .patch(url, data)
 
     .then((res) => res.data)
     .catch(console.error)
 
-export const del = (url) =>
+export const del = ({ url }) =>
   axiosInstance
     .delete(url)
     .then((res) => res.data)
diff --git a/src/lib/authActions.js b/src/lib/authActions.js
index e1968efe..d3f5aaf3 100644
--- a/src/lib/authActions.js
+++ b/src/lib/authActions.js
@@ -4,9 +4,7 @@ import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 
 import { getIronSession } from 'iron-session'
-
-import { getUserByIdAndPassword } from './user'
-import { defaultSession, sessionOptions } from './session'
+import { sessionOptions } from './session'
 
 export async function logout() {
   const session = await getSession()
@@ -20,12 +18,44 @@ export async function getSession() {
 
   console.log('session:', session)
   if (!session.isLoggedIn) {
-    session.isLoggedIn = defaultSession.isLoggedIn
+    // session.isLoggedIn = defaultSession.isLoggedIn
+    session.isLoggedIn = false
   }
 
   return session
 }
 
+export async function checkSession() {
+  const session = await getSession()
+
+  // if (!session.isLoggedIn) {
+  //   redirect('/login')
+  // }
+  return session.isLoggedIn
+}
+
+export async function setSession(data) {
+  const session = await getSession()
+
+  session.userId = data.userId
+  session.name = data.name
+  session.saleStoreId = data.saleStoreId
+  session.mail = data.mail
+  session.tel = data.tel
+  session.storeId = data.storeId
+  session.userNm = data.userNm
+  session.userNmKana = data.userNmKana
+  session.category = data.category
+  session.telNo = data.telNo
+  session.fax = data.fax
+  session.email = data.email
+  session.pwdInitYn = data.pwdInitYn
+  session.isLoggedIn = true
+  // console.log('session:', session)
+
+  await session.save()
+}
+
 export async function login(formData) {
   const session = await getSession()
 
@@ -35,24 +65,21 @@ export async function login(formData) {
   console.log('id:', userId)
   console.log('password:', password)
 
-  // const user = {
-  //   id: 1,
-  //   name: 'jinsoo Kim',
-  //   email: 'jinsoo.kim@example.com',
-  // }
-  const loginUser = await getUserByIdAndPassword({ userId, password })
-  console.log('loginUser:', loginUser)
+  // const loginUser = await getUserByIdAndPassword({ userId, password })
+  const loginUser = {
+    id: 1,
+    userId: 'test123',
+    name: 'jinsoo Kim',
+    email: 'jinsoo.kim@example.com',
+  }
 
   if (!loginUser) {
     throw Error('Wrong Credentials!')
   }
 
-  // session.id = user.id
-  // session.email = user.email
-  session.userId = loginUser.USER_ID
-  session.saleStoreId = loginUser.SALE_STORE_ID
-  session.name = loginUser.NAME
-  session.mail = loginUser.MAIL
+  session.name = loginUser.name
+  session.userId = loginUser.userId
+  session.email = loginUser.email
   session.isLoggedIn = true
   console.log('session:', session)
 
diff --git a/src/lib/cadAction.js b/src/lib/cadAction.js
new file mode 100644
index 00000000..05bc878a
--- /dev/null
+++ b/src/lib/cadAction.js
@@ -0,0 +1,18 @@
+'use server'
+
+import fs from 'fs/promises'
+
+const imageSavePath = 'public/cadImages'
+
+const convertDwgToPng = async (fileName, data) => {
+  console.log('fileName', fileName)
+  try {
+    await fs.readdir(imageSavePath)
+  } catch {
+    await fs.mkdir(imageSavePath)
+  }
+
+  return await fs.writeFile(`${imageSavePath}/${fileName}`, data, 'base64')
+}
+
+export { convertDwgToPng }
diff --git a/src/lib/canvas.js b/src/lib/canvas.js
index c2dd207f..5bd6b419 100644
--- a/src/lib/canvas.js
+++ b/src/lib/canvas.js
@@ -1,8 +1,10 @@
 'use server'
 
 import { PrismaClient } from '@prisma/client'
+import fs from 'fs/promises'
 
 const prisma = new PrismaClient()
+const imagePath = 'public/canvasState'
 
 export const getTests = () => {
   return prisma.test.findMany()
@@ -36,3 +38,14 @@ export const insertCanvasState = (param) => {
     data: param,
   })
 }
+
+export const writeImage = async (title, data) => {
+  // 해당 경로에 Directory 가 없다면 생성
+  try {
+    await fs.readdir(imagePath)
+  } catch {
+    await fs.mkdir(imagePath)
+  }
+
+  return fs.writeFile(`${imagePath}/${title}.png`, data, 'base64')
+}
diff --git a/src/lib/file.js b/src/lib/file.js
new file mode 100644
index 00000000..418fbe96
--- /dev/null
+++ b/src/lib/file.js
@@ -0,0 +1,22 @@
+'use server'
+import path from 'path'
+import multer from 'multer'
+
+export const upload = (files) => {
+  console.log(files)
+  const storage = multer.diskStorage({
+    destination: (req, file, callback) => {
+      const extension = path.extname(file.originalname)
+      const basename = path.basename(file.originalname, extension)
+      callback(null, `/public/upload/${basename}-${Date.now()}${extension}`)
+    },
+    filename: (req, file, callback) => {
+      callback(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`)
+    }
+  })
+  const test = multer({
+    storage: storage
+  }).array(files.name, 5)
+
+ console.log(test)
+}
diff --git a/src/lib/session.js b/src/lib/session.js
index 95d51411..ff5a2078 100644
--- a/src/lib/session.js
+++ b/src/lib/session.js
@@ -1,10 +1,4 @@
-export const defaultSession = {
-  userId: null,
-  saleStoreId: null,
-  name: null,
-  mail: null,
-  isLoggedIn: false,
-}
+export const defaultSession = {}
 
 export const sessionOptions = {
   password: process.env.SESSION_SECRET,
diff --git a/src/lib/user.js b/src/lib/user.js
index bdc619ee..d79e958a 100644
--- a/src/lib/user.js
+++ b/src/lib/user.js
@@ -1,5 +1,7 @@
 'use server'
 
+import { getSession } from './authActions'
+
 const { PrismaClient } = require('@prisma/client')
 
 const prisma = new PrismaClient()
@@ -29,3 +31,11 @@ export async function getUsers() {
     },
   })
 }
+
+export async function checkSession() {
+  const session = await getSession()
+
+  return {
+    session,
+  }
+}
diff --git a/src/locales/ja.js b/src/locales/ja.js
index 2b7df6bd..5ae1b171 100644
--- a/src/locales/ja.js
+++ b/src/locales/ja.js
@@ -4,4 +4,87 @@ export default {
   hello: 'こんにちは',
   welcome: 'こんにちは {name}!',
   locale: '現在のロケールは {locale} です。',
+  common: {
+    require: '필수',
+  },
+  site: {
+    name: 'Q.CAST III',
+    sub_name: '태양광 발전 시스템 도면관리 사이트',
+  },
+  login: {
+    login: 'Login',
+    init_password: {
+      btn: '비밀번호 초기화',
+      title: '비밀번호 초기화',
+      sub_title: '비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.',
+    },
+  },
+  join: {
+    title: 'Q.CAST3 로그인ID 발행 신청',
+    sub1: {
+      title: '판매대리점 정보',
+      comment: '※ 등록되는 리셀러의 회사 이름을 입력하십시오.    (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)',
+      storeQcastNm: '판매대리점명',
+      storeQcastNm_placeholder: '株式会社エネルギア・ソリューション・アンド・サービス（2次店：山口住機販売有限会社）',
+      storeQcastNmKana: '판매대리점명 후리가나',
+      storeQcastNmKana_placeholder: 'カブシキガイシャエネルギア・ソリューション・アン',
+      postCd: '우편번호',
+      postCd_placeholder: '숫자 7자리',
+      addr: '주소',
+      addr_placeholder: '전각50자이내',
+      telNo: '전화번호',
+      telNo_placeholder: '00-0000-0000',
+      fax: 'FAX 번호',
+      fax_placeholder: '00-0000-0000',
+    },
+    sub2: {
+      title: '담당자 정보',
+      userNm: '담당자명',
+      userNmKana: '담당자명 후리가나',
+      userId: '신청 ID',
+      email: '이메일 주소',
+      telNo: '전화번호',
+      telNo_placeholder: '00-0000-0000',
+      fax: 'FAX 번호',
+      fax_placeholder: '00-0000-0000',
+      category: '부서명',
+    },
+    sub3: {
+      title: '견적서 제출용 회사정보',
+      qtCompNm: '회사명',
+      qtPostCd: '우편번호',
+      qtPostCd_placeholder: '숫자 7자리',
+      qtAddr: '주소',
+      qtAddr_placeholder: '전각50자이내',
+      qtEmail: '이메일 주소',
+      qtTelNo: '전화번호',
+      qtTelNo_placeholder: '00-0000-0000',
+      qtFax: 'FAX 번호',
+      qtFax_placeholder: '00-0000-0000',
+    },
+    btn: {
+      approval_request: 'ID 승인요청',
+    },
+    complete: {
+      title: 'Q.CAST3 로그인ID 발행신청 완료',
+      contents: '※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.',
+      email_comment: '담당자 이메일 주소',
+      email: 'test@naver.com',
+    },
+  },
+  stuff: {
+    gridHeader: {
+      lastEditDatetime: '갱신일시',
+      objectNo: '물건번호',
+      planTotCnt: '플랜 수',
+      objectName: '물건명',
+      saleStoreId: '대리점ID',
+      saleStoreName: '대리점명',
+      address: '물건주소',
+      dispCompanyName: '견적처',
+      receiveUser: '담당자',
+      specDate: '사양확인',
+      createDatetime: '등록일',
+    },
+  },
 }
diff --git a/src/locales/ja.json b/src/locales/ja.json
new file mode 100644
index 00000000..af4f35ef
--- /dev/null
+++ b/src/locales/ja.json
@@ -0,0 +1,265 @@
+{
+  "hi": "こんにちは",
+  "welcome": "환영합니다. {0}님",
+  "header.menus.home": "ホームへv",
+  "header.menus.management": "物品及び図面管理",
+  "header.menus.management.stuff": "新規物件登録",
+  "header.menus.management.plan": "モノ/図面管理",
+  "header.menus.community": "コミュニティ",
+  "header.menus.community.notice": "お知らせ",
+  "header.menus.community.faq": "FAQ",
+  "header.menus.community.archive": "素材のダウンロード",
+  "header.logout": "ログアウト",
+  "header.go": "移動",
+  "header.online.warranty.system": "オンライン保証シ",
+  "header.stem": "ステム",
+  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
+  "plan.menu.roof.cover": "지붕덮개",
+  "plan.menu.roof.cover.outline.drawing": "外壁線を描",
+  "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.auxiliary.line.drawing": "補助線を描",
+  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
+  "modal.cover.outline.drawing": "外壁線を描",
+  "modal.cover.outline": "外壁線",
+  "modal.cover.outline.right.angle": "直角",
+  "modal.cover.outline2": "イ・グベ",
+  "modal.cover.outline.angle": "角度",
+  "modal.cover.outline.diagonal": "対角線",
+  "modal.cover.outline.setting": "설정",
+  "modal.cover.outline.length": "長さ (mm)",
+  "modal.cover.outline.arrow": "方向 (矢印)",
+  "modal.cover.outline.fix": "外壁線確定",
+  "modal.cover.outline.rollback": "一変戦に戻る",
+  "modal.cover.outline.remove": "外壁の削除",
+  "modal.cover.outline.select.move": "外壁の選択、移動",
+  "plan.menu.roof.cover.roof.setting": "屋根形状設定",
+  "plan.menu.roof.cover.roof.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.sub.line": "補助線を描",
+  "plan.menu.placement.surface": "配置面",
+  "plan.menu.placement.surface.slope.setting": "傾斜設定",
+  "plan.menu.placement.surface.drawing": "配置面の描画",
+  "plan.menu.placement.surface.arrangement": "面形状の配置",
+  "plan.menu.placement.surface.object": "オブジェクトの配置",
+  "plan.menu.placement.surface.all.remove": "配置面全体を削除",
+  "plan.menu.module.circuit.setting": "モジュール回路構成",
+  "plan.menu.module.circuit.setting.default": "基本設定",
+  "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路と架台の設定",
+  "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
+  "plan.menu.estimate": "見積",
+  "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
+  "plan.menu.estimate.save": "保存",
+  "plan.menu.estimate.reset": "初期化",
+  "plan.menu.estimate.copy": "コピー",
+  "plan.menu.simulation": "発展シミュレーション",
+  "plan.menu.simulation.excel": "Excel",
+  "plan.menu.simulation.pdf": "PDF",
+  "plan.mode.vertical.horizontal": "垂直水平モード",
+  "plan.mode.free": "프리 모드(JA)",
+  "modal.canvas.setting": "Canvas設定",
+  "modal.canvas.setting.display": "ディスプレイ設定",
+  "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
+  "modal.canvas.setting.grid": "그리드(JA)",
+  "modal.canvas.setting.grid.optional.line": "ランダムグリッド",
+  "modal.canvas.setting.grid.dot.line": "ドット・ライングリッド",
+  "modal.canvas.setting.grid.dot.line.setting": "ドット・ライングリッドの設定",
+  "modal.canvas.setting.grid.dot.line.setting.dot.display": "点グリッド表示",
+  "modal.canvas.setting.grid.dot.line.setting.line.display": "ライングリッドの表示",
+  "modal.canvas.setting.grid.dot.line.setting.line.origin": "原寸",
+  "modal.canvas.setting.grid.dot.line.setting.horizon": "横間隔",
+  "modal.canvas.setting.grid.dot.line.setting.vertical": "縦間隔",
+  "modal.canvas.setting.grid.dot.line.setting.ratio": "比間隔",
+  "modal.canvas.setting.grid.dot.line.setting.reset": "初期化",
+  "modal.canvas.setting.grid.dot.line.setting.save": "保存",
+  "modal.canvas.setting.grid.absorption.add": "吸着点を追加",
+  "modal.canvas.setting.grid.color.setting": "グリッド色の設定",
+  "modal.grid.move": "グリッド移動",
+  "modal.grid.move.info": "移動する方向を入力してください",
+  "modal.grid.move.all": "グリッド全体移動",
+  "modal.grid.move.length": "長さ",
+  "modal.grid.move.save": "保存",
+  "modal.grid.copy": "グリッドのコピー",
+  "modal.grid.copy.info": "間隔を設定し、コピー方向を選択します",
+  "modal.grid.copy.length": "長さ",
+  "modal.grid.copy.save": "保存",
+  "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
+  "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
+  "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",
+  "modal.canvas.setting.font.plan.edit.dimension": "寸法フォントの変更",
+  "modal.canvas.setting.font.plan.edit.circuit.num": "回路番号フォントの変更",
+  "modal.canvas.setting.font.plan.absorption": "吸着範囲の設定",
+  "modal.canvas.setting.font.plan.absorption.point": "吸着点",
+  "modal.canvas.setting.font.plan.absorption.small": "極小",
+  "modal.canvas.setting.font.plan.absorption.small.semi": "牛",
+  "modal.canvas.setting.font.plan.absorption.medium": "中",
+  "modal.canvas.setting.font.plan.absorption.large": "ティーン",
+  "modal.canvas.setting.font.plan.absorption.dimension.line": "寸法線の設定",
+  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定",
+  "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
+  "modal.canvas.setting.first.option.alloc": "할당표시",
+  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.dimension": "치수 표시(JA)",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시(JA)",
+  "modal.canvas.setting.first.option.real.dimension": "실제치수 표시(JA)",
+  "modal.canvas.setting.first.option.none.dimension": "치수표시없음(JA)",
+  "modal.canvas.setting.first.option.display": "画面表示",
+  "modal.canvas.setting.first.option.border": "ボーダーのみ",
+  "modal.canvas.setting.first.option.line": "ラインハッチ",
+  "modal.canvas.setting.first.option.all": "All painted",
+  "common.message.no.data": "No data",
+  "common.message.no.dataDown": "ダウンロードするデータがありません",
+  "common.message.noData": "表示するデータがありません",
+  "common.message.search": "search success",
+  "common.message.insert": "insert success",
+  "common.message.update": "update success",
+  "common.message.delete": "削除",
+  "common.message.restoration": "復元",
+  "common.message.cancel": "キャンセル",
+  "common.message.send": "メールを送信しました.",
+  "common.message.no.delete": "削除するデータがありません",
+  "common.message.save": "保存",
+  "common.message.transfer": "転送",
+  "common.message.batch.exec": "batch success",
+  "common.message.not.mov": "移動できません.",
+  "common.message.required.data": "{0} は入力必須項目となります。",
+  "common.message.save.error": "データの保存中にエラーが発生しました。 サイト管理者にお問い合わせください。",
+  "common.message.transfer.error": "データの転送中にエラーが発生しました。 サイト管理者にお問い合わせください。",
+  "common.message.delete.error": "データの削除中にエラーが発生しました。 サイト管理者にお問い合わせください。",
+  "common.message.batch.error": "バッチの実行中にエラーが発生しました。 サイト管理者に連絡してください。",
+  "common.message.send.error": "データの送信中にエラーが発生しました。サイト管理者にお問い合わせください",
+  "common.message.communication.error": "ネットワークエラーが発生しました。サイト管理者に連絡してください。",
+  "common.message.data.error": "{0} はデータ形式が無効です。",
+  "common.message.data.setting.error": "{0} は削除されたか、すでに構成されているデータです。",
+  "common.message.parameter.error": "パラメータエラー",
+  "common.message.product.parameter.error": "存在しない製品があります。",
+  "common.message.customer.parameter.error": "存在しない顧客があります。",
+  "common.message.file.exists.error": "ファイルが正常にアップロードされないためにエラーが発生しました",
+  "common.message.file.download.exists": "ファイルが存在しません。",
+  "common.message.file.download.error": "ァイルのダウンロードエラー",
+  "common.message.file.template.validation01": "フォルダをアップロードできません",
+  "common.message.file.template.validation02": "アップロードできるのはExcelファイルのみです。",
+  "common.message.file.template.validation03": "登録できない拡張子です",
+  "common.message.file.template.validation04": "容量を超えています　アップロード可能な容量：{0} MB",
+  "common.message.file.template.validation05": "アップロードファイルを選択して下さい",
+  "common.message.multi.insert": "合計 {0} 件数 ({1}成功、 {2} 失敗 {3})",
+  "common.message.error": "エラーが発生しました。サイト管理者に連絡してください。",
+  "common.message.data.save": "保存しますか？",
+  "common.message.data.delete": " 削除しますか？",
+  "common.message.data.exists": "{0} はすでに存在するデータです。",
+  "common.message.data.no.exists": "{0} は存在しないデータです。",
+  "common.message.all": "All",
+  "common.message.tab.close.all": "すべてのタブを閉じますか？",
+  "common.message.transfer.save": "{0}件転送しますか?",
+  "common.message.confirm.save": "保存しますか？",
+  "common.message.confirm.confirm": "承認しますか？",
+  "common.message.confirm.request": "承認リクエストしますか？",
+  "common.message.confirm.delete": "削除しますか？",
+  "common.message.confirm.close": "閉じますか？",
+  "common.message.confirm.unclose": "クローズ中止しますか？",
+  "common.message.confirm.cancel": "キャンセルしますか？",
+  "common.message.confirm.uncancel": "キャンセル中止しますか?",
+  "common.message.confirm.copy": "コピーしますか？",
+  "common.message.confirm.createSo": "S/O作成しますか？",
+  "common.message.confirm.mark": "保存完了",
+  "common.message.confirm.mail": "メールを送信しますか？",
+  "common.message.confirm.printPriceItem": "価格を印刷しますか？",
+  "common.message.confirm.allAppr ": "Do you want to Batch approve the selected data?",
+  "common.message.confirm.deliveryFee": "送料を登録しますか？",
+  "common.message.success.delete": "削除完了",
+  "common.message.success.close": "閉じる",
+  "common.message.success.unclose": "キャンセルしました",
+  "common.message.validation.date": "終了日を開始日より前にすることはできません。 もう一度入力してください。",
+  "common.message.no.editfield": "フィールドを編集できません",
+  "common.message.success.rmmail": "リスク管理チームにメールを送信しました。",
+  "common.message.password.validation01": "パスワードの変更が一致しません。",
+  "common.message.password.validation02": "英語、数字、特殊文字を組み合わせた8桁以上を入力してください。",
+  "common.message.password.validation03": "パスワードをIDと同じにすることはできません。",
+  "common.message.menu.validation01": "注文を保存するメニューはありません.",
+  "common.message.menu.validation02": "The same sort order exists.",
+  "common.message.menuCode.check01": "登録可能",
+  "common.message.menuCode.check02": "登録できません",
+  "common.message.pleaseSelect": "{0}を選択してください",
+  "common.message.pleaseInput": "{0}を入力してください。",
+  "common.message.pleaseInputOr": "{0}または{1}を入力してください。",
+  "common.message.approved ": "承認済み",
+  "common.message.errorFieldExist": "エラー項目が存在します",
+  "common.message.storeIdExist ": "既に利用されている販売店IDです",
+  "common.message.userIdExist ": "すでに使用しているユーザーID。",
+  "common.message.noExists ": "削除された掲示物です",
+  "common.message.emailReqTo": "メール宛先が必要です",
+  "common.message.downloadPeriod": "ダウンロード検索期間を{0}日以内に選択してください。",
+  "common.message.backToSubmit": "販売店ブロック解除実行しますか？",
+  "common.message.backToG3": "Back to G3処理実行しますか？",
+  "common.message.writeToConfirm": "作成解除を実行しますか？",
+  "common.message.password.init.success": "パスワード [{0}] に初期化されました。",
+  "common.message.no.edit.save": "この文書は変更できません。",
+  "common.require": "필수",
+  "site.name": "Q.CAST III",
+  "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
+  "login": "로그인",
+  "login.init_password.btn": "비밀번호 초기화 ja",
+  "login.init_password.title": "비밀번호 초기화",
+  "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
+  "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",
+  "join.title": "Q.CAST3 로그인ID 발행 신청",
+  "join.sub1.title": "판매대리점 정보",
+  "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)",
+  "join.sub1.storeQcastNm": "판매대리점명",
+  "join.sub1.storeQcastNm_placeholder": "株式会社エネルギア・ソリューション・アンド・サービス（2次店：山口住機販売有限会社）",
+  "join.sub1.storeQcastNmKana": "판매대리점명 후리가나",
+  "join.sub1.storeQcastNmKana_placeholder": "カブシキガイシャエネルギア・ソリューション・アン",
+  "join.sub1.postCd": "우편번호",
+  "join.sub1.postCd_placeholder": "숫자 7자리",
+  "join.sub1.addr": "주소",
+  "join.sub1.addr_placeholder": "전각50자이내",
+  "join.sub1.telNo": "전화번호",
+  "join.sub1.telNo_placeholder": "00-0000-0000",
+  "join.sub1.fax": "FAX 번호",
+  "join.sub1.fax_placeholder": "00-0000-0000",
+  "join.sub2.title": "담당자 정보",
+  "join.sub2.userNm": "담당자명",
+  "join.sub2.userNmKana": "담당자명 후리가나",
+  "join.sub2.userId": "신청 ID",
+  "join.sub2.email": "이메일 주소",
+  "join.sub2.telNo": "전화번호",
+  "join.sub2.telNo_placeholder": "00-0000-0000",
+  "join.sub2.fax": "FAX 번호",
+  "join.sub2.fax_placeholder": "00-0000-0000",
+  "join.sub2.category": "부서명",
+  "join.sub3.title": "견적서 제출용 회사정보",
+  "join.sub3.qtCompNm": "회사명",
+  "join.sub3.qtPostCd": "우편번호",
+  "join.sub3.qtPostCd_placeholder": "숫자 7자리",
+  "join.sub3.qtAddr": "주소",
+  "join.sub3.qtAddr_placeholder": "전각50자이내",
+  "join.sub3.qtEmail": "이메일 주소",
+  "join.sub3.qtTelNo": "전화번호",
+  "join.sub3.qtTelNo_placeholder": "00-0000-0000",
+  "join.sub3.qtFax": "FAX 번호",
+  "join.sub3.qtFax_placeholder": "00-0000-0000",
+  "join.btn.approval_request": "ID 승인요청",
+  "join.complete.title": "Q.CAST3 로그인ID 발행신청 완료",
+  "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
+  "join.complete.email_comment": "담당자 이메일 주소",
+  "join.complete.email": "test@naver.com",
+  "stuff.gridHeader.lastEditDatetime": "갱신일시",
+  "stuff.gridHeader.objectNo": "물건번호",
+  "stuff.gridHeader.planTotCnt": "플랜 수",
+  "stuff.gridHeader.objectName": "물건명",
+  "stuff.gridHeader.saleStoreId": "대리점ID",
+  "stuff.gridHeader.saleStoreName": "대리점명",
+  "stuff.gridHeader.address": "물건주소",
+  "stuff.gridHeader.dispCompanyName": "견적처",
+  "stuff.gridHeader.receiveUser": "담당자",
+  "stuff.gridHeader.specDate": "사양확인",
+  "stuff.gridHeader.createDatetime": "등록일"
+}
diff --git a/src/locales/ko.js b/src/locales/ko.js
index 40e17ba2..c01b913c 100644
--- a/src/locales/ko.js
+++ b/src/locales/ko.js
@@ -4,4 +4,88 @@ export default {
   hello: '안녕',
   welcome: '안녕 {name}!',
   locale: '현재 로케일은 {locale}입니다.',
+  common: {
+    require: '필수',
+  },
+  site: {
+    name: 'Q.CAST III',
+    sub_name: '태양광 발전 시스템 도면관리 사이트',
+  },
+  login: {
+    login: '로그인',
+    init_password: {
+      btn: '비밀번호 초기화',
+      title: '비밀번호 초기화',
+      sub_title: '비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.',
+      complete_message: '비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.',
+    },
+  },
+  join: {
+    title: 'Q.CAST3 로그인ID 발행 신청',
+    sub1: {
+      title: '판매대리점 정보',
+      comment: '※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)',
+      storeQcastNm: '판매대리점명',
+      storeQcastNm_placeholder: '주식회사 에너지 기어 솔루션 앤 서비스 (2차점: 야마구치 주기 판매 유한회사)',
+      storeQcastNmKana: '판매대리점명 후리가나',
+      storeQcastNmKana_placeholder: '주식회사 에너지 기어 솔루션',
+      postCd: '우편번호',
+      postCd_placeholder: '숫자 7자리',
+      addr: '주소',
+      addr_placeholder: '전각50자이내',
+      telNo: '전화번호',
+      telNo_placeholder: '00-0000-0000',
+      fax: 'FAX 번호',
+      fax_placeholder: '00-0000-0000',
+    },
+    sub2: {
+      title: '담당자 정보',
+      userNm: '담당자명',
+      userNmKana: '담당자명 후리가나',
+      userId: '신청 ID',
+      email: '이메일 주소',
+      telNo: '전화번호',
+      telNo_placeholder: '00-0000-0000',
+      fax: 'FAX 번호',
+      fax_placeholder: '00-0000-0000',
+      category: '부서명',
+    },
+    sub3: {
+      title: '견적서 제출용 회사정보',
+      qtCompNm: '회사명',
+      qtPostCd: '우편번호',
+      qtPostCd_placeholder: '숫자 7자리',
+      qtAddr: '주소',
+      qtAddr_placeholder: '전각50자이내',
+      qtEmail: '이메일 주소',
+      qtTelNo: '전화번호',
+      qtTelNo_placeholder: '00-0000-0000',
+      qtFax: 'FAX 번호',
+      qtFax_placeholder: '00-0000-0000',
+    },
+    btn: {
+      approval_request: 'ID 승인요청',
+    },
+    complete: {
+      title: 'Q.CAST3 로그인ID 발행신청 완료',
+      contents: '※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.',
+      email_comment: '담당자 이메일 주소',
+      email: 'test@naver.com',
+    },
+  },
+  stuff: {
+    gridHeader: {
+      lastEditDatetime: '갱신일시',
+      objectNo: '물건번호',
+      planTotCnt: '플랜 수',
+      objectName: '물건명',
+      saleStoreId: '대리점ID',
+      saleStoreName: '대리점명',
+      address: '물건주소',
+      dispCompanyName: '견적처',
+      receiveUser: '담당자',
+      specDate: '사양확인',
+      createDatetime: '등록일',
+    },
+  },
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
new file mode 100644
index 00000000..9bf624d6
--- /dev/null
+++ b/src/locales/ko.json
@@ -0,0 +1,266 @@
+{
+  "hi": "안녕하세요",
+  "welcome": "환영합니다. {0}님",
+  "header.menus.home": "Home",
+  "header.menus.management": "물건 및 도면 관리",
+  "header.menus.management.stuff": "신규 물건 등록",
+  "header.menus.management.plan": "사물/도면 관리",
+  "header.menus.community": "커뮤니티",
+  "header.menus.community.notice": "공지",
+  "header.menus.community.faq": "FAQ",
+  "header.menus.community.archive": "자료 다운로드",
+  "header.logout": "로그아웃",
+  "header.go": "이동",
+  "header.online.warranty.system": "온라인 보증 시스템",
+  "header.stem": "Stem",
+  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
+  "plan.menu.roof.cover": "지붕덮개",
+  "plan.menu.roof.cover.outline.drawing": "외벽선 그리기",
+  "plan.menu.roof.cover.roof.shape.setting": "지붕형상 설정",
+  "plan.menu.roof.cover.roof.shape.passivity.setting": "지붕형상 수동 설정",
+  "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
+  "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림",
+  "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋",
+  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.auxiliary.line.drawing": "보조선 작성",
+  "modal.cover.outline.drawing": "외벽선 작성",
+  "modal.cover.outline": "외벽선",
+  "modal.cover.outline.right.angle": "직각",
+  "modal.cover.outline2": "이구배",
+  "modal.cover.outline.angle": "각도",
+  "modal.cover.outline.diagonal": "대각선",
+  "modal.cover.outline.setting": "설정",
+  "modal.cover.outline.length": "길이 (mm)",
+  "modal.cover.outline.arrow": "방향(화살표)",
+  "modal.cover.outline.fix": "외벽선 확정",
+  "modal.cover.outline.rollback": "일변전으로 돌아가기",
+  "modal.cover.outline.remove": "외벽 제거",
+  "modal.cover.outline.select.move": "외벽 선택, 이동",
+  "plan.menu.placement.surface": "배치면",
+  "plan.menu.placement.surface.slope.setting": "경사설정",
+  "plan.menu.placement.surface.drawing": "배치면 그리기",
+  "plan.menu.placement.surface.arrangement": "면형상 배치",
+  "plan.menu.placement.surface.object": "오브젝트 배치",
+  "plan.menu.placement.surface.all.remove": "배치면 전체 삭제",
+  "plan.menu.module.circuit.setting": "모듈,회로 구성",
+  "plan.menu.module.circuit.setting.default": "기본 설정",
+  "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
+  "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
+  "plan.menu.estimate": "견적서",
+  "plan.menu.estimate.roof.alloc": "지붕면 할당",
+  "plan.menu.estimate.save": "저장",
+  "plan.menu.estimate.reset": "초기화",
+  "plan.menu.estimate.copy": "복사",
+  "plan.menu.simulation": "발전 시뮬레이션",
+  "plan.menu.simulation.excel": "Excel",
+  "plan.menu.simulation.pdf": "PDF",
+  "plan.mode.vertical.horizontal": "수직 수평 모드",
+  "plan.mode.free": "프리 모드",
+  "modal.canvas.setting": "Canvas 설정",
+  "modal.canvas.setting.display": "디스플레이 설정",
+  "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
+  "modal.canvas.setting.grid": "그리드",
+  "modal.canvas.setting.grid.optional.line": "임의 그리드",
+  "modal.canvas.setting.grid.dot.line": "점·선 그리드",
+  "modal.canvas.setting.grid.dot.line.setting": "점·선 그리드 설정",
+  "modal.canvas.setting.grid.dot.line.setting.dot.display": "점 그리드 표시",
+  "modal.canvas.setting.grid.dot.line.setting.line.display": "선 그리드 표시",
+  "modal.canvas.setting.grid.dot.line.setting.line.origin": "원치수",
+  "modal.canvas.setting.grid.dot.line.setting.horizon": "가로간격",
+  "modal.canvas.setting.grid.dot.line.setting.vertical": "세로간격",
+  "modal.canvas.setting.grid.dot.line.setting.ratio": "비율간격",
+  "modal.canvas.setting.grid.dot.line.setting.reset": "초기화",
+  "modal.canvas.setting.grid.dot.line.setting.save": "저장",
+  "modal.canvas.setting.grid.absorption.add": "흡착점 추가",
+  "modal.canvas.setting.grid.color.setting": "그리드 색 설정",
+  "modal.grid.move": "그리드 이동",
+  "modal.grid.move.info": "이동할 방향을 입력해주세요",
+  "modal.grid.move.all": "그리드 전체 이동",
+  "modal.grid.move.length": "길이",
+  "modal.grid.move.save": "저장",
+  "modal.grid.copy": "그리드 복사",
+  "modal.grid.copy.info": "간격을 설정하고 복사 방향을 선택하십시오",
+  "modal.grid.copy.length": "길이",
+  "modal.grid.copy.save": "저장",
+  "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
+  "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
+  "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",
+  "modal.canvas.setting.font.plan.edit.dimension": "치수 글꼴변경",
+  "modal.canvas.setting.font.plan.edit.circuit.num": "회로번호 글꼴변경",
+  "modal.canvas.setting.font.plan.absorption": "흡착범위 설정",
+  "modal.canvas.setting.font.plan.absorption.point": "흡착점",
+  "modal.canvas.setting.font.plan.absorption.small": "극소",
+  "modal.canvas.setting.font.plan.absorption.small.semi": "소",
+  "modal.canvas.setting.font.plan.absorption.medium": "중",
+  "modal.canvas.setting.font.plan.absorption.large": "대",
+  "modal.canvas.setting.font.plan.absorption.dimension.line": "치수선 설정",
+  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "도면크기 설정",
+  "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
+  "modal.canvas.setting.first.option.alloc": "할당표시",
+  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.dimension": "치수 표시",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.real.dimension": "실제치수 표시",
+  "modal.canvas.setting.first.option.none.dimension": "치수표시없음",
+  "modal.canvas.setting.first.option.display": "화면 표시",
+  "modal.canvas.setting.first.option.border": "테두리만",
+  "modal.canvas.setting.first.option.line": "라인해치",
+  "modal.canvas.setting.first.option.all": "All painted",
+  "common.message.no.data": "No data",
+  "common.message.no.dataDown": "No data to download",
+  "common.message.noData": "No data to display",
+  "common.message.search": "search success",
+  "common.message.insert": "insert success",
+  "common.message.update": "update success",
+  "common.message.delete": "Deleted",
+  "common.message.restoration": "Restored",
+  "common.message.cancel": "Canceled",
+  "common.message.send": "The mail has been sent.",
+  "common.message.no.delete": "There is no data to delete.",
+  "common.message.save": "Saved.",
+  "common.message.transfer": "Transfered",
+  "common.message.batch.exec": "batch success",
+  "common.message.not.mov": "Its impossible to move.",
+  "common.message.required.data": "{0} is required input value.",
+  "common.message.save.error": "An error occurred while saving the data. Please contact site administrator.",
+  "common.message.transfer.error": "An error occurred while transfer the data. Please contact site administrator.",
+  "common.message.delete.error": "An error occurred while deleting data. Please contact site administrator.",
+  "common.message.batch.error": "An error occurred while executing the batch. Please contact site administrator.",
+  "common.message.send.error": "Error sending data, please contact your administrator.",
+  "common.message.communication.error": "Network error occurred. \n Please contact site administrator.",
+  "common.message.data.error": "{0} The data format is not valid.",
+  "common.message.data.setting.error": "{0} is data that has been deleted or already configured.",
+  "common.message.parameter.error": "Parameter Error",
+  "common.message.product.parameter.error": "존재하지 않는 제품이 있습니다.",
+  "common.message.customer.parameter.error": "존재하지 않는 고객이 있습니다.",
+  "common.message.file.exists.error": "Error due to file not uploading normally",
+  "common.message.file.download.exists": "File does not exist.",
+  "common.message.file.download.error": "File download error",
+  "common.message.file.template.validation01": "Unable to upload folder",
+  "common.message.file.template.validation02": "Only Excel files can be uploaded.",
+  "common.message.file.template.validation03": "Non-registerable extension",
+  "common.message.file.template.validation04": "Exceed capacity \n Uploadable capacity : {0} MB",
+  "common.message.file.template.validation05": "업로드 파일을 선택해주세요.",
+  "common.message.multi.insert": "Total {0} cases ({1} successes, {2} failures {3})",
+  "common.message.error": "Error occurred, please contact site administrator.",
+  "common.message.data.save": "Do you want to save it?",
+  "common.message.data.delete": "정말로 삭제하시겠습니까?",
+  "common.message.data.exists": "{0} is data that already exists.",
+  "common.message.data.no.exists": "{0} is data that does not exist.",
+  "common.message.all": "All",
+  "common.message.tab.close.all": "Close all tabs?",
+  "common.message.transfer.save": "Want to {0} transfer it?",
+  "common.message.confirm.save": "Want to save it?",
+  "common.message.confirm.confirm": "Want to approve?",
+  "common.message.confirm.request": "Would you like to request a Approval?",
+  "common.message.confirm.delete": "Do you want to delete it?",
+  "common.message.confirm.close": "Want to close?",
+  "common.message.confirm.unclose": "Do you want to cancel the close?",
+  "common.message.confirm.cancel": "Want to cancellation?",
+  "common.message.confirm.uncancel": "Do you want to cancel the cancellation?",
+  "common.message.confirm.copy": "Do you want to copy?",
+  "common.message.confirm.createSo": "Create Sales Order?",
+  "common.message.confirm.mark": "Saved.",
+  "common.message.confirm.mail": "Do you want to send mail?",
+  "common.message.confirm.printPriceItem": "Would you like to print item price?",
+  "common.message.confirm.allAppr ": "Do you want to Batch approve the selected data?",
+  "common.message.confirm.deliveryFee": "Do you want to register shipping fee?",
+  "common.message.success.delete": "Deleted.",
+  "common.message.success.close": "Closed.",
+  "common.message.success.unclose": "Cancel Closed.",
+  "common.message.validation.date": "The end date cannot be earlier than the start date. Please enter it again.",
+  "common.message.no.editfield": "Can not edit field",
+  "common.message.success.rmmail": "You have successfully sent mail to the Risk Management team.",
+  "common.message.password.validation01": "Change passwords do not match.",
+  "common.message.password.validation02": "Please enter at least 8 digits combining English, numbers, and special characters.",
+  "common.message.password.validation03": "Password cannot be the same as ID.",
+  "common.message.menu.validation01": "There is no menu to save the order.",
+  "common.message.menu.validation02": "The same sort order exists.",
+  "common.message.menuCode.check01": "Registerable",
+  "common.message.menuCode.check02": "Unable to register",
+  "common.message.pleaseSelect": "Please Select {0}",
+  "common.message.pleaseInput": "Please Input a {0}.",
+  "common.message.pleaseInputOr": "Please Input a {0} or {1}.",
+  "common.message.approved ": "Approved.",
+  "common.message.errorFieldExist": "Error Field Exist",
+  "common.message.storeIdExist ": "이미 사용하고 있는 판매점 ID 입니다.",
+  "common.message.userIdExist ": "이미 사용하고 있는 사용자 ID 입니다.",
+  "common.message.noExists ": "삭제된 게시물 입니다.",
+  "common.message.emailReqTo": "Email To is required",
+  "common.message.downloadPeriod": "Please select the download search period within {0} days.",
+  "common.message.backToSubmit": "판매점 블록 해제를 실행하시겠습니까?",
+  "common.message.backToG3": "Back to G3 처리를 실행하시겠습니까?",
+  "common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
+  "common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
+  "common.message.no.edit.save": "This document cannot be changed.",
+  "common.require": "필수",
+  "site.name": "Q.CAST III",
+  "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
+  "login": "로그인",
+  "login.init_password.btn": "비밀번호 초기화",
+  "login.init_password.title": "비밀번호 초기화",
+  "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
+  "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",
+  "join.title": "Q.CAST3 로그인ID 발행 신청",
+  "join.sub1.title": "판매대리점 정보",
+  "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)",
+  "join.sub1.storeQcastNm": "판매대리점명",
+  "join.sub1.storeQcastNm_placeholder": "주식회사 에너지 기어 솔루션 앤 서비스 (2차점: 야마구치 주기 판매 유한회사)",
+  "join.sub1.storeQcastNmKana": "판매대리점명 후리가나",
+  "join.sub1.storeQcastNmKana_placeholder": "주식회사 에너지 기어 솔루션",
+  "join.sub1.postCd": "우편번호",
+  "join.sub1.postCd_placeholder": "숫자 7자리",
+  "join.sub1.addr": "주소",
+  "join.sub1.addr_placeholder": "전각50자이내",
+  "join.sub1.telNo": "전화번호",
+  "join.sub1.telNo_placeholder": "00-0000-0000",
+  "join.sub1.fax": "FAX 번호",
+  "join.sub1.fax_placeholder": "00-0000-0000",
+  "join.sub2.title": "담당자 정보",
+  "join.sub2.userNm": "담당자명",
+  "join.sub2.userNmKana": "담당자명 후리가나",
+  "join.sub2.userId": "신청 ID",
+  "join.sub2.email": "이메일 주소",
+  "join.sub2.telNo": "전화번호",
+  "join.sub2.telNo_placeholder": "00-0000-0000",
+  "join.sub2.fax": "FAX 번호",
+  "join.sub2.fax_placeholder": "00-0000-0000",
+  "join.sub2.category": "부서명",
+  "join.sub3.title": "견적서 제출용 회사정보",
+  "join.sub3.qtCompNm": "회사명",
+  "join.sub3.qtPostCd": "우편번호",
+  "join.sub3.qtPostCd_placeholder": "숫자 7자리",
+  "join.sub3.qtAddr": "주소",
+  "join.sub3.qtAddr_placeholder": "전각50자이내",
+  "join.sub3.qtEmail": "이메일 주소",
+  "join.sub3.qtTelNo": "전화번호",
+  "join.sub3.qtTelNo_placeholder": "00-0000-0000",
+  "join.sub3.qtFax": "FAX 번호",
+  "join.sub3.qtFax_placeholder": "00-0000-0000",
+  "join.btn.approval_request": "ID 승인요청",
+  "join.complete.title": "Q.CAST3 로그인ID 발행신청 완료",
+  "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
+  "join.complete.email_comment": "담당자 이메일 주소",
+  "join.complete.email": "test@naver.com",
+  "stuff.gridHeader.lastEditDatetime": "갱신일시",
+  "stuff.gridHeader.objectNo": "물건번호",
+  "stuff.gridHeader.planTotCnt": "플랜 수",
+  "stuff.gridHeader.objectName": "물건명",
+  "stuff.gridHeader.saleStoreId": "대리점ID",
+  "stuff.gridHeader.saleStoreName": "대리점명",
+  "stuff.gridHeader.address": "물건주소",
+  "stuff.gridHeader.dispCompanyName": "견적처",
+  "stuff.gridHeader.receiveUser": "담당자",
+  "stuff.gridHeader.specDate": "사양확인",
+  "stuff.gridHeader.createDatetime": "등록일"
+}
diff --git a/src/middleware.js b/src/middleware.js
index f93c0506..c9e6811c 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -1,27 +1,27 @@
-import { createI18nMiddleware } from 'next-international/middleware'
+// import { createI18nMiddleware } from 'next-international/middleware'
 
-const I18nMiddleware = createI18nMiddleware({
-  locales: ['ko', 'ja'],
-  defaultLocale: 'ko',
-})
+// const I18nMiddleware = createI18nMiddleware({
+//   locales: ['ko', 'ja'],
+//   defaultLocale: 'ko',
+// })
 
-export function middleware(request) {
-  return I18nMiddleware(request)
-}
+// export function middleware(request) {
+//   return I18nMiddleware(request)
+// }
 
 export const config = {
   matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)'],
 }
 
-// import { NextRequest, NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
 
-// export function middleware(request) {
-//   const requestHeaders = new Headers(request.headers)
-//   requestHeaders.set('x-pathname', request.nextUrl.pathname)
+export function middleware(request) {
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-pathname', request.nextUrl.pathname)
 
-//   return NextResponse.next({
-//     request: {
-//       headers: requestHeaders,
-//     },
-//   })
-// }
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
+}
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index fa4d2770..aa400a46 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -1,10 +1,37 @@
-import { atom } from 'recoil'
+import { atom, selector } from 'recoil'
+import { MENU } from '@/common/common'
+
+export const canvasState = atom({
+  key: 'canvasState',
+  default: null,
+  dangerouslyAllowMutability: true,
+})
 
 export const textState = atom({
   key: 'textState',
   default: 'test text',
 })
 
+export const canvasZoomState = atom({
+  key: 'canvasZoomState',
+  default: 100,
+})
+
+export const modeState = atom({
+  key: 'modeState',
+  default: 'default',
+})
+
+export const guideModeLineState = atom({
+  key: 'guideLineModeState',
+  default: false,
+})
+
+export const fontFamilyState = atom({
+  key: 'fontFamilyState',
+  default: 'Noto Sans KR',
+})
+
 export const fontSizeState = atom({
   key: 'fontSizeState',
   default: 16,
@@ -13,8 +40,8 @@ export const fontSizeState = atom({
 export const canvasSizeState = atom({
   key: 'canvasSize',
   default: {
-    vertical: 1500,
-    horizontal: 1500,
+    vertical: 1000,
+    horizontal: 1600,
   },
 })
 
@@ -73,3 +100,170 @@ export const compassState = atom({
   default: undefined,
   dangerouslyAllowMutability: true,
 })
+
+export const guideLineState = atom({
+  key: 'guideLine',
+  default: {},
+  dangerouslyAllowMutability: true,
+})
+
+export const currentObjectState = atom({
+  key: 'currentObject',
+  default: null,
+  dangerouslyAllowMutability: true,
+})
+
+export const horiGuideLinesState = atom({
+  key: 'horiGuideLines',
+  default: [],
+  // dangerouslyAllowMutability: true,
+})
+
+export const vertGuideLinesState = atom({
+  key: 'vertGuideLines',
+  default: [],
+})
+
+export const canvasSettingState = atom({
+  key: 'canvasSetting',
+  default: {},
+  dangerouslyAllowMutability: true,
+})
+
+// 현재 지붕 패턴
+export const currentPatternState = atom({
+  key: 'currentPattern',
+  default: {},
+  dangerouslyAllowMutability: true,
+})
+
+// 설정
+export const customSettingsState = atom({
+  key: 'customSettings',
+  default: {},
+  dangerouslyAllowMutability: true,
+})
+
+// cad 도면 파일 사용 여부
+export const useCadFileState = atom({
+  key: 'useCadFile',
+  default: false,
+})
+
+// cad 도면 파일 이름
+export const cadFileNameState = atom({
+  key: 'cadFileName',
+  default: '',
+})
+
+// cad 도면 파일 조정 완료
+export const cadFileCompleteState = atom({
+  key: 'cadFileComplete',
+  default: false,
+})
+
+export const useGoogleMapFileState = atom({
+  key: 'useGoogleMapFile',
+  default: false,
+})
+
+// 구글맵 저장 이미지 파일 이름
+export const googleMapFileNameState = atom({
+  key: 'googleMapFileName',
+  default: '',
+})
+
+export const globalCompassState = atom({
+  key: 'globalCompass',
+  default: 0,
+  dangerouslyAllowMutability: true,
+})
+
+// 면형상 배치 모드
+export const surfacePlacementModeState = atom({
+  key: 'surfacePlacementMode',
+  default: { width: 0, height: 0, areaBoundary: true, inputType: 'free' },
+})
+
+// 오브젝트 배치 모드
+export const objectPlacementModeState = atom({
+  key: 'objectPlacementMode',
+  default: { width: 0, height: 0, areaBoundary: false, inputType: 'free', batchType: 'opening' },
+})
+
+export const currentMenuState = atom({
+  key: 'currentMenu',
+  default: MENU.INITIAL_CANVAS_SETTING,
+})
+
+// 수직 수평 모드
+export const verticalHorizontalModeState = atom({
+  key: 'verticalHorizontalMode',
+  default: true,
+})
+
+// 흡착점 모드
+export const adsorptionPointModeState = atom({
+  key: 'adsorptionPointModeState',
+  default: true,
+})
+// 흡착점 추가모드
+export const adsorptionPointAddModeState = atom({
+  key: 'adsorptionPointAddModeState',
+  default: false,
+})
+
+// 흡착점 범위
+export const adsorptionRangeState = atom({
+  key: 'adsorptionRangeState',
+  default: 50,
+})
+
+// 점,선 그리드 설정
+export const dotLineGridSettingState = atom({
+  key: 'gridSettingState',
+  default: {
+    INTERVAL: {
+      type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+      ratioInterval: 910,
+      verticalInterval: 910,
+      horizontalInterval: 910,
+      dimension: 1, // 치수
+    },
+    DOT: false,
+    LINE: false,
+  },
+})
+
+export const dotLineIntervalSelector = selector({
+  key: 'dotLineIntervalSelector',
+  get: ({ get }) => {
+    const gridSetting = get(dotLineGridSettingState)
+    return gridSetting.INTERVAL.type === 1
+      ? {
+          horizontalInterval: Math.round(gridSetting.INTERVAL.horizontalInterval / 10),
+          verticalInterval: Math.round(gridSetting.INTERVAL.verticalInterval / 10),
+        }
+      : {
+          horizontalInterval: Math.round((gridSetting.INTERVAL.ratioInterval * gridSetting.INTERVAL.dimension) / 10),
+          verticalInterval: Math.round((gridSetting.INTERVAL.ratioInterval * gridSetting.INTERVAL.dimension) / 10),
+        }
+  },
+})
+
+// canvas plan 초기 목록
+export const initCanvasPlansState = atom({
+  key: 'initCanvasPlans',
+  default: [],
+})
+
+// 현재 canvas plan
+export const currentCanvasPlanState = atom({
+  key: 'currentCanvasPlan',
+  default: {},
+})
+
+export const tempGridModeState = atom({
+  key: 'tempGridModeState',
+  default: false,
+})
diff --git a/src/store/commonAtom.js b/src/store/commonAtom.js
new file mode 100644
index 00000000..3e1fb640
--- /dev/null
+++ b/src/store/commonAtom.js
@@ -0,0 +1,11 @@
+import { atom } from 'recoil'
+
+export const dimmedStore = atom({
+  key: 'dimmedState',
+  default: false,
+})
+
+export const sessionStore = atom({
+  key: 'sessionState',
+  default: {},
+})
diff --git a/src/store/gridAtom.js b/src/store/gridAtom.js
new file mode 100644
index 00000000..9b21a9f5
--- /dev/null
+++ b/src/store/gridAtom.js
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const gridColorState = atom({
+  key: 'gridColorState',
+  default: '#000000',
+})
diff --git a/src/store/localeAtom.js b/src/store/localeAtom.js
new file mode 100644
index 00000000..0f20fa87
--- /dev/null
+++ b/src/store/localeAtom.js
@@ -0,0 +1,11 @@
+import { atom } from 'recoil'
+
+export const globalLocaleStore = atom({
+  key: 'globalLocaleState',
+  default: 'ko',
+})
+
+export const appMessageStore = atom({
+  key: 'appMessageState',
+  default: {},
+})
diff --git a/src/store/outerLineAtom.js b/src/store/outerLineAtom.js
new file mode 100644
index 00000000..f8494bea
--- /dev/null
+++ b/src/store/outerLineAtom.js
@@ -0,0 +1,65 @@
+import { atom, selector } from 'recoil'
+
+export const OUTER_LINE_TYPE = {
+  OUTER_LINE: 'outerLine', // 외벽선
+  RIGHT_ANGLE: 'rightAngle', // 직각
+  LEE_GUBAE: 'leeGubae', // 이구배
+  ANGLE: 'angle', // 각도
+  DIAGONAL_LINE: 'diagonalLine', // 대각선
+}
+
+/**
+ * 외벽선 작성에서 사용하는 recoilState
+ */
+
+export const outerLineLength1State = atom({
+  //길이1
+  key: 'outerLineLength1State',
+  default: 0,
+})
+
+export const outerLineLength2State = atom({
+  // 길이2
+  key: 'outerLineLength2State',
+  default: 0,
+})
+
+export const outerLineArrow1State = atom({
+  // 방향1
+  key: 'outerLineArrow1State',
+  default: '',
+})
+
+export const outerLineArrow2State = atom({
+  // 방향2
+  key: 'outerLineArrow2State',
+  default: '',
+})
+
+export const outerLineAngle1State = atom({
+  // 각도1
+  key: 'outerLineAngle1State',
+  default: 0,
+})
+
+export const outerLineAngle2State = atom({
+  // 각도2
+  key: 'outerLineAngle2State',
+  default: 0,
+})
+
+export const outerLineDiagonalState = atom({
+  // 대각선
+  key: 'outerLineDiagonalState',
+  default: 0,
+})
+
+export const outerLineTypeState = atom({
+  key: 'outerLineTypeState',
+  default: OUTER_LINE_TYPE.OUTER_LINE,
+})
+
+export const outerLinePointsState = atom({
+  key: 'outerLinePointsState',
+  default: [],
+})
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
new file mode 100644
index 00000000..7c637c2f
--- /dev/null
+++ b/src/store/settingAtom.js
@@ -0,0 +1,59 @@
+import { atom } from 'recoil'
+
+export const settingModalFirstOptionsState = atom({
+  key: 'settingModalFirstOptions',
+  default: {
+    option1: [
+      { id: 1, column: 'allocDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
+      { id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
+      { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
+      { id: 4, column: 'lineDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
+      { id: 5, column: 'wordDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
+      { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
+      { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
+      { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
+    ],
+    dimensionDisplay: [
+      { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
+      { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
+      { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
+    ],
+    option2: [
+      { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
+      { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
+      { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
+    ],
+  },
+  dangerouslyAllowMutability: true,
+})
+
+export const settingModalSecondOptionsState = atom({
+  key: 'settingModalSecondOptions',
+  default: {
+    option3: [
+      { id: 1, name: 'modal.canvas.setting.font.plan.edit.word' },
+      { id: 2, name: 'modal.canvas.setting.font.plan.edit.flow' },
+      { id: 3, name: 'modal.canvas.setting.font.plan.edit.dimension' },
+      { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
+    ],
+    option4: [
+      { id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true, range: 10 },
+      { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false, range: 20 },
+      { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false, range: 30 },
+      { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false, range: 40 },
+    ],
+  },
+  dangerouslyAllowMutability: true,
+})
+
+export const settingModalGridOptionsState = atom({
+  key: 'settingModalGridOptions',
+  default: [
+    { id: 1, name: 'modal.canvas.setting.grid.optional.line', selected: false },
+    { id: 2, name: 'modal.canvas.setting.grid.dot.line', selected: false },
+    { id: 3, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
+    { id: 4, name: 'modal.canvas.setting.grid.color.setting', selected: false },
+  ],
+  dangerouslyAllowMutability: true,
+})
diff --git a/src/store/stuffAtom.js b/src/store/stuffAtom.js
new file mode 100644
index 00000000..5de2c04e
--- /dev/null
+++ b/src/store/stuffAtom.js
@@ -0,0 +1,26 @@
+import { atom } from 'recoil'
+import dayjs from 'dayjs'
+import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
+dayjs.extend(isLeapYear)
+export const stuffSearchState = atom({
+  key: 'stuffSearchState',
+  default: {
+    schObjectNo: '', //물건번호
+    schSaleStoreId: '', //판매대리점ID
+    schAddress: '', //물건주소
+    schObjectName: '', //물건명
+    schSaleStoreName: '', //판매대리점명
+    schSpecDateYn: '', //사양타입 ('', 'Y', 'N')
+    schReceiveUser: '', //담당자
+    schDispCompanyName: '', //견적처
+    schDateType: 'U', //갱신일(U)/등록일(R)
+    schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), //시작일
+    schToDt: dayjs(new Date()).format('YYYY-MM-DD'), //종료일
+    code: 'S',
+    schSelSaleStoreId: '', //판매대리점 선택
+    startRow: 1,
+    endRow: 100,
+    schSortType: 'R', //정렬조건 (R:최근등록일 U:최근수정일)
+  },
+  dangerouslyAllowMutability: true,
+})
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
new file mode 100644
index 00000000..531eb074
--- /dev/null
+++ b/src/styles/_contents.scss
@@ -0,0 +1,894 @@
+// CanvasPage
+.canvas-wrap {
+  height: calc(100vh - 47px);
+  display: flex;
+  flex-direction: column;
+
+  .canvas-content {
+    flex: 1 1 auto;
+
+    .canvas-layout {
+      height: 100%;
+    }
+  }
+
+  &.sub-wrap {
+    overflow: hidden;
+
+    .canvas-content {
+      height: calc(100% - 47px);
+    }
+  }
+}
+
+// CanvasMenu
+.canvas-menu-wrap {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-bottom: 0;
+  background-color: #383838;
+  transition: padding .17s ease-in-out;
+
+  .canvas-menu-inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 40px 0 20px;
+    background-color: #2C2C2C;
+    z-index: 999;
+
+    .canvas-menu-list {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .canvas-menu-item {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        button {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          height: 100%;
+          color: #fff;
+          font-weight: 600;
+          padding: 15px 20px;
+          opacity: 0.55;
+          transition: all .17s ease-in-out;
+
+          .menu-icon {
+            display: block;
+            width: 16px;
+            height: 16px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            margin-right: 10px;
+
+            &.con00 {
+              background-image: url(/static/images/canvas/menu_icon00.svg);
+            }
+
+            &.con01 {
+              background-image: url(/static/images/canvas/menu_icon01.svg);
+            }
+
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
+          }
+        }
+
+        &.active {
+          background-color: #383838;
+
+          button {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .canvas-side-btn-wrap {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      .select-box {
+        width: 124px;
+        margin-right: 5px;
+
+        > div {
+          width: 100%;
+        }
+      }
+
+      .btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        button {
+          display: block;
+          width: 30px;
+          height: 30px;
+          border-radius: 2px;
+          background-color: #3D3D3D;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 15px 15px;
+          transition: all .17s ease-in-out;
+
+          &.btn01 {
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+          }
+
+          &.btn02 {
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
+          }
+
+          &.btn03 {
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+          }
+
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
+
+          &:hover {
+            background-color: #1083E3;
+          }
+
+          &.active {
+            background-color: #1083E3;
+          }
+        }
+      }
+
+      .ico-btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        button {
+          .ico {
+            display: block;
+            width: 15px;
+            height: 15px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+
+            &.ico01 {
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+            }
+
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
+          }
+
+          .name {
+            font-size: 12px;
+            color: #fff;
+          }
+        }
+
+        &.form06 {
+          .name {
+            font-size: 13px;
+          }
+        }
+      }
+
+      .vertical-horizontal {
+        display: flex;
+        min-width: 170px;
+        height: 28px;
+        margin: 0 5px;
+        border-radius: 2px;
+        background: #373737;
+        line-height: 28px;
+        overflow: hidden;
+
+        span {
+          padding: 0 10px;
+          font-size: 13px;
+          color: #fff;
+        }
+
+        button {
+          margin-left: auto;
+          height: 100%;
+          background-color: #4B4B4B;
+          font-size: 13px;
+          font-weight: 400;
+          color: #fff;
+          padding: 0 7.5px;
+          transition: all .17s ease-in-out;
+        }
+
+        &.on {
+          button {
+            background-color: #1083E3;
+          }
+        }
+      }
+
+      .size-control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        background-color: #3D3D3D;
+        border-radius: 2px;
+        width: 100px;
+        height: 30px;
+        margin: 0 5px;
+
+        span {
+          font-size: 13px;
+          color: #fff;
+        }
+
+        .control-btn {
+          display: block;
+          width: 12px;
+          height: 12px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+
+          &.minus {
+            background-image: url(../../public/static/images/canvas/minus.svg);
+          }
+
+          &.plus {
+            background-image: url(../../public/static/images/canvas/plus.svg);
+          }
+        }
+      }
+    }
+  }
+
+  .canvas-depth2-wrap {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    background-color: #383838;
+    width: 100%;
+    height: 50px;
+    transition: all .17s ease-in-out;
+
+    .canvas-depth2-inner {
+      display: flex;
+      align-items: center;
+      padding: 0 40px;
+      height: 100%;
+
+      .canvas-depth2-list {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .canvas-depth2-item {
+          display: flex;
+          align-items: center;
+          margin-right: 26px;
+          height: 100%;
+
+          button {
+            position: relative;
+            opacity: 0.55;
+            color: #fff;
+            font-size: 12px;
+            font-weight: normal;
+            height: 100%;
+            padding-right: 12px;
+          }
+
+          &.active {
+            button {
+              opacity: 1;
+              font-weight: 600;
+
+              &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                width: 5px;
+                height: 8px;
+                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+              }
+            }
+          }
+        }
+      }
+
+      .canvas-depth2-btn-list {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        height: 100%;
+
+        .depth2-btn-box {
+          display: flex;
+          align-items: center;
+          margin-right: 34px;
+          height: 100%;
+          transition: all .17s ease-in-out;
+
+          button {
+            position: relative;
+            font-size: 12px;
+            font-weight: 400;
+            height: 100%;
+            color: #fff;
+            padding-right: 12px;
+
+            &:after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              width: 5px;
+              height: 8px;
+              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+            }
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &.mouse {
+            opacity: 0.55;
+          }
+        }
+      }
+    }
+
+    &.active {
+      top: 47px;
+    }
+  }
+
+  &.active {
+    padding-bottom: 50px;
+  }
+}
+
+// canvas-layout
+.canvas-layout {
+  .canvas-page-list {
+    display: flex;
+    background-color: #1C1C1C;
+    border-top: 1px solid #000;
+    width: 100%;
+
+    .canvas-plane-wrap {
+      display: flex;
+      align-items: center;
+      max-width: calc(100% - 45px);
+
+      .canvas-page-box {
+        display: flex;
+        align-items: center;
+        background-color: #1c1c1c;
+        padding: 9.6px 20px;
+        border-right: 1px solid #000;
+        min-width: 0;
+        transition: all .17s ease-in-out;
+
+        span {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          font-size: 12px;
+          font-family: 'Pretendard', sans-serif;
+          color: #AAA;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        .close {
+          flex: none;
+          display: block;
+          width: 7px;
+          height: 8px;
+          margin-left: 15px;
+          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
+          background-size: cover;
+        }
+
+        &.on {
+          background-color: #fff;
+
+          span {
+            font-weight: 600;
+            color: #101010;
+          }
+
+          .close {
+            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
+          }
+
+          &:hover {
+            background-color: #fff;
+          }
+        }
+
+        &:hover {
+          background-color: #000;
+        }
+      }
+    }
+
+    .plane-add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      padding: 13.5px 0;
+      background-color: #1C1C1C;
+      border-right: 1px solid #000;
+      transition: all .17s ease-in-out;
+
+      span {
+        display: block;
+        width: 9px;
+        height: 9px;
+        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
+        background-size: cover;
+      }
+
+      &:hover {
+        background-color: #000;
+      }
+    }
+  }
+}
+
+.canvas-frame {
+  position: relative;
+  height: calc(100% - 36.5px);
+  background-color: #fff;
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// sub-page
+.sub-header {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  height: 46px;
+  border-bottom: 1px solid #000;
+  background: #2C2C2C;
+  z-index: 999;
+
+  .sub-header-inner {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 100px;
+
+    .sub-header-title-wrap {
+      display: flex;
+      align-items: center;
+
+      .title-item {
+        position: relative;
+        padding: 0 24px;
+
+        a {
+          display: flex;
+          align-items: center;
+
+          .icon {
+            width: 22px;
+            height: 22px;
+            margin-right: 8px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
+          }
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 16px;
+          background-color: #D9D9D9;
+        }
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          padding-right: 0;
+
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .sub-header-title {
+      font-size: 16px;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .sub-header-location {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+
+      .location-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+
+        span {
+          display: flex;
+          font-size: 12px;
+          color: #AAA;
+          font-weight: normal;
+          cursor: default;
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 6px;
+          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
+        }
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          padding-right: 0;
+
+          span {
+            color: #fff;
+          }
+
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// sub content
+.sub-content {
+  padding-top: 46px;
+
+  .sub-content-inner {
+    max-width: 1720px;
+    margin: 0 auto;
+    padding-top: 20px;
+
+    .sub-content-box {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.estimate {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 36.5px);
+    overflow-y: auto;
+    padding-top: 0;
+
+    .sub-content-inner {
+      flex: 1;
+    }
+  }
+}
+
+.sub-table-box {
+  padding: 20px;
+  border-radius: 6px;
+  border: 1px solid #E9EAED;
+  background: #FFF;
+  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+
+  .table-box-title-wrap {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .title-wrap {
+      display: flex;
+      align-items: center;
+
+      h3 {
+        display: block;
+        font-size: 15px;
+        color: #101010;
+        font-weight: 600;
+        margin-right: 14px;
+      }
+
+      .info-wrap {
+        display: flex;
+        align-items: center;
+
+        li {
+          position: relative;
+          padding: 0 6px;
+          font-size: 12px;
+          color: #101010;
+          font-weight: normal;
+
+          span {
+            font-weight: 600;
+
+            &.red {
+              color: #E23D70;
+            }
+          }
+
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 11px;
+            background-color: #D9D9D9;
+          }
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .left-unit-box {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .promise-gudie {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: #101010;
+    margin-bottom: 20px;
+  }
+
+  .important {
+    color: #f00;
+  }
+
+  .sub-table-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+  }
+
+  .pagination-wrap {
+    margin-top: 24px;
+  }
+}
+
+.infomation-box-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .sub-table-box {
+    flex: 1;
+  }
+
+  .info-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #344356;
+    margin-bottom: 10px;
+  }
+
+  .info-inner {
+    position: relative;
+    font-size: 13px;
+    color: #344356;
+
+    .copy-ico {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+// 견적서
+.estimate-list-wrap {
+  display: flex;
+  align-items: center;
+
+  .estimate-box {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+
+    &:last-child {
+      flex: none;
+    }
+
+    .estimate-tit {
+      width: 105px;
+      height: 30px;
+      line-height: 30px;
+      background-color: #F4F4F7;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+
+    .estimate-name {
+      font-size: 13px;
+      color: #344356;
+      margin-left: 14px;
+      font-weight: 400;
+    }
+  }
+}
+
+// file drag box
+.drag-file-box {
+  padding: 10px;
+
+  .btn-area {
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ECF0F4;
+  }
+
+  .drag-file-area {
+    position: relative;
+    margin-top: 15px;
+
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 13px;
+      color: #ccc;
+      font-weight: 400;
+      cursor: default;
+    }
+  }
+
+  .file-list {
+    .file-item {
+      margin-bottom: 15px;
+
+      span {
+        position: relative;
+        font-size: 13px;
+        color: #45576F;
+        font-weight: 400;
+        white-space: nowrap;
+        padding-right: 55px;
+
+        button {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 15px;
+          height: 15px;
+          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
new file mode 100644
index 00000000..856ee2f8
--- /dev/null
+++ b/src/styles/_fonts.scss
@@ -0,0 +1,199 @@
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+// pretendard
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+  url('/fonts/Pretendard-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+  url('/fonts/Pretendard-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+  url('/fonts/Pretendard-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+  url('/fonts/Pretendard-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+  url('/fonts/Pretendard-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
+  url('/fonts/Pretendard-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+  url('/fonts/Pretendard-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+  url('/fonts/Pretendard-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+  url('/fonts/Pretendard-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss
new file mode 100644
index 00000000..97e5cc53
--- /dev/null
+++ b/src/styles/_inputcommon.scss
@@ -0,0 +1,35 @@
+.input-content{
+    max-width: 1600px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+    .input-wrap{
+        padding: 50px 50px 0;
+        h1{
+            margin-bottom: 20px;
+        }
+        .form-btn{
+            button{
+                margin-right: 10px;
+            }
+        }
+        .form-select{
+            width: 168px;
+            > div{
+                width: 100%;
+            }
+        }
+        .form-datepicker{
+            div{
+                margin-bottom: 10px;
+            }
+        }
+        .form-Arrow-btn,
+        .form-Check-btn{
+            padding: 10px;
+            background-color: #272727;
+            > button{
+                margin-bottom: 10px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
new file mode 100644
index 00000000..919e80ff
--- /dev/null
+++ b/src/styles/_layout.scss
@@ -0,0 +1,250 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  min-width: 1600px;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+.content {
+  position: relative;
+  flex: 1 1 auto;
+  padding-top: 46px;
+  background-color: #F4F4F7;
+}
+
+// header
+// nav item 공통
+@mixin navitem() {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  font-weight: 500;
+  height: 100%;
+  padding-right: 12px;
+  transition: color .17s ease-in-out;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 1600px;
+  height: 46px;
+  background-color: #1C1C1C;
+  border-bottom: 1px solid #000;
+  z-index: 9999;
+
+  .header-inner {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 40px;
+
+    .header-right {
+      display: flex;
+      height: 100%;
+      align-items: center;
+
+      .logo {
+        a {
+          display: block;
+          width: 232px;
+          height: 30px;
+          background: url(/static/images/common/Logo.svg) no-repeat center;
+          background-size: contain;
+        }
+      }
+
+      nav {
+        margin-left: 50px;
+        height: 100%;
+
+        .nav-list {
+          display: flex;
+          align-items: center;
+          height: 100%;
+
+          .nav-item {
+            position: relative;
+            margin-right: 62px;
+            height: 100%;
+
+            a {
+              @include navitem;
+            }
+
+            button {
+              @include navitem;
+
+              &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                width: 6px;
+                height: 10px;
+                background: url(/static/images/common/nav-arr.svg) no-repeat center;
+                transition: all .17s ease-in-out;
+              }
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            .nav-depth2 {
+              position: absolute;
+              top: calc(100% - 2px);
+              left: 50%;
+              transform: translateX(-50%);
+              min-width: 100px;
+              background-color: #1C1C1C;
+              border: 1px solid #464646;
+              padding: 24px;
+              opacity: 0;
+              visibility: hidden;
+              transition: all .17s ease-in-out;
+
+              .nav-depth2-item {
+                margin-bottom: 10px;
+                transition: all .17s ease-in-out;
+
+                a {
+                  font-size: 13px;
+                  font-weight: normal;
+                  white-space: nowrap;
+                }
+
+                &:last-child {
+                  margin-bottom: 0;
+                }
+
+                &.mouse {
+                  opacity: 0.55;
+                }
+              }
+
+              &::before {
+                content: '';
+                position: absolute;
+                top: -5px;
+                left: 50%;
+                transform: translateX(-50%) rotate(45deg);
+                width: 8px;
+                height: 8px;
+                background-color: #1c1c1c;
+                border-top: 1px solid #464646;
+                border-left: 1px solid #464646;
+              }
+            }
+
+            &.mouse {
+              > a {
+                color: rgba(255, 255, 255, 0.30);
+              }
+
+              > button {
+                color: rgba(255, 255, 255, 0.30);
+
+                &:after {
+                  opacity: 0.3;
+                }
+              }
+            }
+
+            &:hover {
+              .nav-depth2 {
+                opacity: 1;
+                visibility: visible;
+              }
+
+              > button {
+                &:after {
+                  transform: translateY(-50%) rotate(90deg);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .header-left {
+      margin-left: auto;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .profile-box {
+        position: relative;
+        padding-left: 30px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        cursor: pointer;
+
+        .profile {
+          font-size: 13px;
+          font-weight: normal;
+          color: #fff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 0;
+          width: 24px;
+          height: 24px;
+          background: url(/static/images/common/profile_icon.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+
+      .sign-out-box {
+        position: relative;
+        padding-left: 30px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        cursor: pointer;
+
+        .sign-out {
+          font-size: 13px;
+          font-weight: normal;
+          color: #fff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 0;
+          width: 24px;
+          height: 24px;
+          background: url(../../public/static/images/common/signout_icon.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+
+      .select-box {
+        min-width: 165px;
+        margin-right: 8px;
+
+        > div {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
new file mode 100644
index 00000000..fc00feb6
--- /dev/null
+++ b/src/styles/_main.scss
@@ -0,0 +1,684 @@
+// background img
+.background-bord {
+  position: absolute;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  height: 280px;
+  background: url(../../public/static/images/main/main_background.png) no-repeat center;
+  background-size: cover;
+  z-index: 0;
+}
+
+// main-wrap
+.main-contents {
+  position: relative;
+  z-index: 1;
+  padding-bottom: 15px;
+}
+
+// contents
+.store-id-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 33.5px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: rgba(255, 255, 255, 0.05);
+
+  .store-id-title {
+    position: relative;
+    padding-left: 32px;
+    font-size: 13px;
+    color: #fff;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
+    }
+  }
+
+  .store-arr {
+    display: block;
+    width: 7px;
+    height: 10px;
+    background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
+  }
+
+  .store-id-name {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+  }
+}
+
+// main-search-form
+.main-search-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 45px 0;
+
+  .search-raido-wrap {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-right: 30px;
+  }
+}
+
+.search-input-box {
+  display: flex;
+  align-items: center;
+  width: 580px;
+  height: 45px;
+  border-radius: 100px;
+  padding: 0 20px;
+  border: 1px solid rgba(255, 255, 255, 0.30);
+  background: rgba(31, 31, 31, 0.30);
+
+  .main-search {
+    flex: 1;
+    height: 100%;
+    font-size: 13px;
+    color: #fff;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    font-family: 'Noto Sans JP', sans-serif;
+  }
+
+  .search-icon {
+    width: 20px;
+    height: 100%;
+    background-image: url(../../public/static/images/main/main_search.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 21px 21px;
+  }
+}
+
+// main-contents-inner
+.main-product-list-wrap {
+  max-width: 1400px;
+  margin: 0 auto;
+
+  .main-product-list {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+
+    .product-item {
+      display: flex;
+      flex-direction: column;
+      padding: 40px;
+      border-radius: 6px;
+      background: #FFF;
+      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+
+      &.item01 {
+        flex: 1;
+        max-height: 400px;
+      }
+
+      &.item02 {
+        flex: none;
+        width: 451px;
+        max-height: 400px;
+      }
+
+      &.item03 {
+        flex: 1;
+      }
+
+      &.item04 {
+        flex: none;
+        width: 351px;
+      }
+
+      &.item05 {
+        flex: none;
+        width: 451px;
+      }
+
+      .product-item-title-wrap {
+        display: flex;
+        align-items: center;
+
+        .product-item-title {
+          display: flex;
+          align-items: center;
+          font-size: 16px;
+          color: #101010;
+          font-weight: 600;
+
+          .item-logo {
+            display: block;
+            width: 40px;
+            height: 40px;
+            border-radius: 50px;
+            background: #14324F;
+            margin-right: 12px;
+            background-repeat: no-repeat;
+            background-size: 22px 22px;
+            background-position: center;
+
+            &.ico01 {
+              background-image: url(../../public/static/images/main/product_ico01.svg);
+            }
+
+            &.ico02 {
+              background-image: url(../../public/static/images/main/product_ico02.svg);
+            }
+
+            &.ico03 {
+              background-image: url(../../public/static/images/main/product_ico03.svg);
+            }
+
+            &.ico04 {
+              background-image: url(../../public/static/images/main/product_ico04.svg);
+            }
+
+            &.ico05 {
+              background-image: url(../../public/static/images/main/product_ico05.svg);
+            }
+          }
+        }
+
+        .more-btn {
+          display: block;
+          width: 20px;
+          height: 20px;
+          margin-left: auto;
+          background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
+        }
+      }
+
+      .product-item-content {
+        margin-top: 30px;
+        overflow: hidden;
+
+        .recently-list {
+          .recently-item {
+            border: 1px solid #F2F2F2;
+            background-color: transparent;
+            padding: 29.9px 20px;
+            margin-bottom: 5px;
+            cursor: pointer;
+
+            .item-inner {
+              display: flex;
+              align-items: center;
+
+              span {
+                position: relative;
+                display: block;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+                padding: 0 10px;
+
+                &.time {
+                  padding-left: 22px;
+
+                  &::before {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 14px;
+                    height: 14px;
+                    background: url(../../public/static/images/main/clock.svg) no-repeat center;
+                    background-size: cover;
+                  }
+                }
+
+                &:after {
+                  content: '';
+                  position: absolute;
+                  top: 50%;
+                  right: 0;
+                  transform: translateY(-50%);
+                  width: 1px;
+                  height: 10px;
+                  background-color: #BBB;
+                }
+
+                &:last-child {
+                  &:after {
+                    display: none;
+                  }
+                }
+              }
+            }
+
+            &:last-child {
+              margin-bottom: 5px;
+            }
+          }
+        }
+
+        .notice-box {
+          height: 100%;
+          overflow-y: auto;
+
+          .notice-day {
+            font-size: 13px;
+            color: #666;
+            font-weight: 400;
+            margin-bottom: 7px;
+          }
+
+          .notice-title {
+            font-size: 14px;
+            color: #101010;
+            font-weight: 600;
+            margin-bottom: 25px;
+            line-height: 24px;
+            word-break: keep-all;
+          }
+
+          .notice-contents {
+            font-size: 12px;
+            color: #666;
+            font-weight: 400;
+            line-height: 22px;
+
+            span {
+              position: relative;
+              display: block;
+              padding-left: 10px;
+
+              &::before {
+                content: '';
+                position: absolute;
+                top: 10px;
+                left: 3px;
+                width: 3px;
+                height: 3px;
+                border-radius: 100%;
+                background-color: #666;
+              }
+            }
+          }
+
+          &::-webkit-scrollbar {
+            width: 4px; /* 스크롤바의 너비 */
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: #697C8F; /* 스크롤바의 색상 */
+          }
+
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
+        }
+
+        .faq-item {
+          position: relative;
+          margin-bottom: 10px;
+          cursor: pointer;
+
+          .faq-item-inner {
+            display: flex;
+            align-items: center;
+
+            .faq-num {
+              flex: none;
+              padding: 7px 12.5px;
+              font-size: 13px;
+              color: #101010;
+              font-weight: 600;
+              border-radius: 110px;
+              border: 1px solid rgba(242, 242, 242, 0.95);
+              margin-right: 20px;
+            }
+
+            .faq-title {
+              width: 0;
+              flex: 1 1 auto;
+              font-size: 13px;
+              color: #101010;
+              font-weight: 500;
+              padding-right: 96px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+
+            .faq-day {
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              font-size: 13px;
+              color: #101010;
+              font-weight: 400;
+            }
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .data-download-wrap {
+          width: 100%;
+
+          .data-down {
+            display: block;
+            width: 100%;
+            padding: 20px;
+            text-align: left;
+            border-radius: 4px;
+            background-color: #697C8F;
+            margin-bottom: 5px;
+            transition: background .17s ease-in-out;
+
+            span {
+              position: relative;
+              display: block;
+              padding-right: 30px;
+              font-size: 13px;
+              color: #fff;
+              font-weight: 400;
+
+              &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                width: 18px;
+                height: 16px;
+                background: url(../../public/static/images/main/download.svg) no-repeat center;
+                background-size: cover;
+              }
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            &:hover {
+              background-color: #859eb6;
+            }
+          }
+        }
+
+        .contact-info-list {
+          padding: 25px 30px;
+          border-radius: 4px;
+          background-color: #F4F4F7;
+
+          .info-item {
+            display: flex;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid #fff;
+
+            &:first-child {
+              padding-top: 0;
+            }
+
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
+
+            .icon-box {
+              display: flex;
+              margin-right: 12px;
+            }
+
+            .infor-data {
+              font-size: 13px;
+              color: #101010;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// loginpage
+.login-wrap {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: url(../../public/static/images/main/login_bg.png) no-repeat center;
+  background-size: cover;
+
+  .login-inner {
+    max-width: 500px;
+    width: 100%;
+    margin: 0 auto;
+
+    .login-logo {
+      display: block;
+      margin-bottom: 25px;
+    }
+
+    .login-input-frame {
+      padding: 40px 50px;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 0.97);
+      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+
+      .login-frame-tit {
+        font-size: 18px;
+        color: #364864;
+        font-weight: 400;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #E5E9EF;
+
+        span {
+          display: block;
+          font-weight: 600;
+          margin-bottom: 5px;
+        }
+      }
+
+      .login-input-wrap {
+        margin-top: 30px;
+
+        .login-area {
+          position: relative;
+          display: flex;
+          align-items: center;
+          border: 1px solid #E5E9EF;
+          height: 45px;
+          padding-left: 40px;
+          padding-right: 15px;
+          margin-bottom: 15px;
+
+          .login-input {
+            flex: 1;
+            height: 100%;
+            background-color: transparent;
+            font-size: 13px;
+            font-weight: 400;
+            color: #D1D7E0;
+
+            &::placeholder {
+              color: #D1D7E0;
+            }
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 15px;
+            transform: translateY(-50%);
+            width: 10px;
+            height: 12px;
+            background-size: cover;
+          }
+
+          button {
+            width: 20px;
+            height: 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          &.id {
+            &::before {
+              background: url(../../public/static/images/main/login_id.svg) no-repeat center;
+            }
+
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
+
+          &.password {
+            margin-bottom: 20px;
+
+            &::before {
+              background: url(../../public/static/images/main/login_password.svg) no-repeat center;
+            }
+
+            .password-hidden {
+              background-image: url(../../public/static/images/main/password_hidden.svg);
+              background-size: 19px 13px;
+
+              &.visible {
+                background-image: url(../../public/static/images/main/password_visible.svg);
+              }
+            }
+          }
+        }
+
+        .login-btn-box {
+          margin-bottom: 20px;
+
+          .login-btn {
+            display: block;
+            width: 100%;
+            height: 45px;
+            background-color: #5C6773;
+            color: #fff;
+            font-size: 15px;
+            font-weight: 600;
+            border-radius: 4px;
+            transition: background .15s ease-in-out;
+
+            &:hover {
+              background-color: #717e8d;
+            }
+          }
+        }
+
+        .reset-password {
+          width: 100%;
+          text-align: center;
+
+          a {
+            position: relative;
+            font-size: 13px;
+            color: #364864;
+            font-weight: 400;
+            padding-right: 16px;
+
+            &::before {
+              content: '';
+              position: absolute;
+              top: calc(50% + 1px);
+              right: 0;
+              transform: translateY(-50%);
+              width: 6px;
+              height: 8px;
+              background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
+            }
+          }
+        }
+      }
+    }
+
+    .login-guide-wrap {
+      position: relative;
+      margin-left: 10px;
+      margin-top: 30px;
+      padding-left: 15px;
+      font-size: 13px;
+      color: #fff;
+      line-height: 24px;
+
+      a {
+        color: #fff;
+        font-weight: 600;
+        text-decoration: underline;
+      }
+
+      span {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+
+  .login-copyright {
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
+.d-check-box {
+  &.login {
+    margin-bottom: 25px;
+
+    label {
+      padding-left: 20px;
+      color: #364864;
+
+      &:before {
+        width: 22px;
+        height: 22px;
+        top: -1px;
+        border-color: #A8B6C7;
+        border-radius: 3px;
+        transition: background .05s ease-in-out;
+      }
+    }
+  }
+
+  input[type=checkbox]:checked + label::before {
+    border-color: #A8B6C7;
+    background-color: #A8B6C7;
+  }
+
+  input[type=checkbox]:checked + label::after {
+    border-color: #fff;
+    width: 7px;
+    height: 11px;
+    top: -2px;
+    left: 1px;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
new file mode 100644
index 00000000..3003ae93
--- /dev/null
+++ b/src/styles/_modal.scss
@@ -0,0 +1,326 @@
+@keyframes mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
+}
+
+.modal-pop-wrap {
+  position: fixed;
+  top: 200px;
+  right: 100px;
+  width: 100%;
+  min-width: 300px;
+  max-width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid #000;
+  border-radius: 4px;
+  background-color: #272727;
+  z-index: 9999999;
+
+  &.sm {
+    max-width: 580px;
+  }
+
+  &.ssm {
+    max-width: 380px;
+  }
+
+  &.xm {
+    max-width: 300px;
+  }
+
+  &.mount {
+    animation: mountpop .17s ease-in-out forwards;
+  }
+
+  &.unmount {
+    animation: unmountpop .17s ease-in-out forwards;
+  }
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+  cursor: pointer;
+
+  h1.title {
+    font-size: 13px;
+    color: #fff;
+    font-weight: 700;
+  }
+
+  .modal-close {
+    margin-left: auto;
+    color: #fff;
+    text-indent: -999999999px;
+    width: 10px;
+    height: 10px;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+  }
+}
+
+.modal-body {
+  padding: 15px;
+
+  .modal-btn-wrap {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    button {
+      flex: 1;
+    }
+  }
+
+  .modal-check-btn-wrap {
+    margin-top: 15px;
+
+    .check-wrap-title {
+      font-size: 12px;
+      color: #fff;
+      font-weight: 600;
+
+      &.light {
+        font-weight: 400;
+      }
+    }
+
+    .flex-check-box {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 15px;
+
+      &.for2 {
+        button {
+          width: calc(50% - 5px);
+        }
+
+        &.btn {
+          gap: 5px;
+
+          button {
+            width: calc(50% - 2.5px);
+          }
+        }
+      }
+
+      &.for-line {
+        button {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  .outer-line-wrap {
+    border-top: 1px solid #3C3C3C;
+    margin-top: 10px;
+    padding-top: 15px;
+    margin-bottom: 15px;
+
+    > div {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.adsorption-point {
+  display: flex;
+  align-items: center;
+  background-color: #3A3A3A;
+  border-radius: 3px;
+  padding-left: 11px;
+  overflow: hidden;
+  transition: all 0.17s ease-in-out;
+
+  span {
+    font-size: 12px;
+    color: #898989;
+  }
+
+  i {
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    margin-left: auto;
+    height: 100%;
+    font-size: 13px;
+    color: #898989;
+  }
+
+  &.act {
+    i {
+      color: #fff;
+      background-color: #1083E3;
+    }
+  }
+}
+
+// grid-option
+.grid-check-form {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #3C3C3C;
+}
+
+.grid-option-wrap {
+  padding: 15px 0;
+  border-bottom: 1px solid #3C3C3C;
+
+  .grid-option-box {
+    display: flex;
+    align-items: center;
+    background-color: #3D3D3D;
+    border-radius: 2px;
+    padding: 10px;
+    gap: 20px;
+    margin-bottom: 5px;
+
+    .grid-input-form {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+      }
+
+      .input-grid {
+        width: 63px;
+
+        input {
+          width: 100%;
+        }
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.grid-select {
+  flex: 1;
+
+  .sort-select {
+    width: 100%;
+    background-color: #313131;
+  }
+}
+
+.grid-btn-wrap {
+  padding-top: 15px;
+  text-align: right;
+
+  button {
+    padding: 0 20px;
+  }
+}
+
+// grid copy
+.grid-option-tit {
+  font-size: 12px;
+  color: #fff;
+  font-weight: 400;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #3C3C3C;
+}
+
+.grid-direction {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.direction {
+  width: 22px;
+  height: 22px;
+  background-color: #757575;
+  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 15px;
+  border-radius: 50%;
+  transition: all .15s ease-in-out;
+
+  &.down {
+    transform: rotate(180deg);
+  }
+
+  &.left {
+    transform: rotate(-90deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
+
+  &:hover,
+  &.act {
+    background-color: #1083E3;
+  }
+}
+
+// grid-move
+.move-form {
+  p {
+    font-size: 12px;
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
+.input-move-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  span {
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .input-move {
+    width: 148px;
+
+    input {
+      width: 100%;
+    }
+  }
+}
+
+.direction-move-wrap {
+  flex: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
new file mode 100644
index 00000000..9d59e8b7
--- /dev/null
+++ b/src/styles/_reset.scss
@@ -0,0 +1,765 @@
+* {
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+  box-sizing: content-box
+}
+
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+  font-family: 'Noto Sans JP', sans-serif;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1.4;
+}
+
+body:first-of-type caption {
+  display: none;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0 none;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  border: 0;
+}
+
+a {
+  cursor: pointer;
+  color: #000;
+}
+
+a, a:hover, a:active {
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*form_style*/
+input, select, textarea, button, a, label {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+button, input[type=text], input[type=button] {
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0
+}
+
+input[type=checkbox], input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input, select, button {
+  border: 0 none;
+  outline: none;
+  margin: 0;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+::-webkit-input-placeholder {
+  line-height: 1;
+  font-weight: 300;
+  font-size: 0.938rem;
+  letter-spacing: -0.6px;
+  color: #8b8b8b;
+}
+
+.log-box ::-webkit-input-placeholder {
+  color: #8b8b8b;
+}
+
+button {
+  background: transparent;
+  font-family: 'Noto Sans JP', sans-serif;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.4;
+  color: inherit;
+  outline: none;
+  cursor: pointer;
+}
+
+.pre {
+  font-family: 'Pretendard', sans-serif !important;
+}
+
+// margin
+.mt5 {
+  margin-top: 5px !important;
+}
+
+.mt10 {
+  margin-top: 10px !important;
+}
+
+.mb5 {
+  margin-bottom: 5px !important;
+}
+
+.mb10 {
+  margin-bottom: 10px !important;
+}
+
+.mr5 {
+  margin-right: 5px !important;
+}
+
+.mr10 {
+  margin-right: 10px !important;
+}
+
+.ml5 {
+  margin-left: 5px !important;
+}
+
+.ml10 {
+  margin-left: 10px !important;
+}
+
+// button
+.btn-frame {
+  display: inline-block;
+  padding: 0 9px;
+  height: 34px;
+  line-height: 34px;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 400;
+  border: 1px solid #000;
+  text-align: center;
+  font-family: 'Pretendard', sans-serif;
+  transition: all .17s ease-in-out;
+  cursor: pointer;
+
+  &.block {
+    width: 100%;
+  }
+
+  &.small {
+    font-family: 'Noto Sans JP', sans-serif;
+    height: 30px;
+    line-height: 30px;
+    font-size: 13px;
+  }
+
+  &.deepgray {
+    background-color: #2C2C2C;
+    border: 1px solid #484848;
+  }
+
+  &.gray {
+    background-color: #3C3C3C;
+    border: 1px solid #545454;
+  }
+
+  &.dark {
+    background-color: #1C1C1C;
+    border: 1px solid #484848;
+  }
+
+  &.modal {
+    background-color: #272727;
+    border: 1px solid #484848;
+    color: #aaa;
+
+    &:hover {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+
+  &:hover,
+  &.act {
+    background-color: #1083E3;
+    border: 1px solid #1083E3;
+    color: #fff;
+    font-weight: 500;
+  }
+
+  &.block {
+    display: block;
+    width: 100%;
+  }
+
+  &.ico-flx {
+    display: flex;
+    align-items: center;
+
+    .ico {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &.act {
+      font-weight: 400;
+    }
+  }
+}
+
+.btn-origin {
+  display: inline-block;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 2px;
+  background-color: #101010;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 400;
+  transition: all .15s ease-in-out;
+
+  &.navy {
+    background-color: #304961;
+
+    &:hover {
+      background-color: #1083E3;
+    }
+  }
+
+  &.grey {
+    background-color: #94A0AD;
+
+    &:hover {
+      background-color: #607F9A;
+    }
+  }
+}
+
+// select
+.sort-select {
+  position: relative;
+  display: inline-block;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  background-color: #373737;
+  border: 1px solid #3F3F3F;
+  border-radius: 2px;
+  border-top-left-radius: 2px;
+  color: #fff;
+  cursor: pointer;
+
+  p {
+    font-size: 13px;
+    color: #fff;
+    height: 100%;
+  }
+
+  .select-item-wrap {
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    clip-path: inset(0 0 100% 0);
+    width: calc(100% + 2px);
+    padding: 8px 0;
+    background-color: #373737;
+    border: 1px solid #3F3F3F;
+    border-radius: 2px;
+    transition: all 0.17s ease-in-out;
+    visibility: hidden;
+
+    .select-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 20px;
+      line-height: 1.4;
+      transition: all .17s ease-in-out;
+
+      button {
+        font-size: 12px;
+        color: #fff;
+        line-height: 1.4;
+      }
+
+      &:hover {
+        background-color: #2C2C2C;
+      }
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 7px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(/static/images/common/select-arr.svg) no-repeat center;
+    background-size: cover;
+    transition: all .17s ease-in-out;
+  }
+
+  &.active {
+    .select-item-wrap {
+      clip-path: inset(0 0 0 0);
+      visibility: visible;
+    }
+
+    &:after {
+      transform: translateY(-50%) rotate(-180deg);
+    }
+  }
+}
+
+.select-light {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 30px;
+  background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+  background-size: 10px 6px;
+  border: 1px solid #eee;
+  padding: 0 30px 0 10px;
+  font-size: 13px;
+  color: #45576F;
+  font-family: 'Noto Sans JP', sans-serif;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 1;
+    background-color: #FAFAFA;
+    color: #999;
+    cursor: default;
+  }
+
+  &.black {
+    color: #101010;
+  }
+}
+
+
+// input
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+}
+
+input[type=number],
+input[type=text] {
+  &.input-origin {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 2px;
+    background-color: #313131;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: 'Pretendard', sans-serif;
+    padding: 0 10px;
+    letter-spacing: 0px;
+
+    &::placeholder {
+      opacity: 1;
+      font-size: 12px;
+      letter-spacing: 0px;
+    }
+
+    &.block {
+      width: 100%;
+    }
+  }
+
+  &.input-light {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 0 10px;
+    border: 1px solid #eee;
+    border-radius: 2px;
+    background-color: #fff;
+    font-family: 'Noto Sans JP', sans-serif;
+    font-size: 13px;
+    color: #45576F;
+    font-weight: normal;
+    transition: border-color .17s ease-in-out;
+
+    &:read-only {
+      background-color: #FAFAFA;
+      color: #999999;
+    }
+  }
+}
+
+
+// check-btn
+.check-btn {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  background-color: #3A3A3A;
+  border-radius: 3px;
+  transition: all .17s ease-in-out;
+
+  .check-area {
+    flex: none;
+    width: 30px;
+    height: 100%;
+    border-right: 1px solid #272727;
+    background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
+    background-size: 11px 9px;
+  }
+
+  .title-area {
+    padding: 0 10px;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+  }
+
+  &.block {
+    width: 100%;
+  }
+
+  &:hover,
+  &.act {
+    background-color: #fff;
+
+    .check-area {
+      border-right: 1px solid #101010;
+      background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
+    }
+
+    .title-area {
+      color: #101010;
+      font-weight: 600;
+    }
+  }
+}
+
+// arr-btn
+.arr-btn {
+  display: block;
+  height: 30px;
+  border-radius: 3px;
+  background-color: #3A3A3A;
+  padding: 0 11px;
+  text-align: left;
+  transition: all .17s ease-in-out;
+
+  span {
+    position: relative;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+    padding-right: 15px;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 5px;
+      height: 8px;
+      background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
+    }
+  }
+
+  &:hover,
+  &.act {
+    background-color: #fff;
+
+    span {
+      color: #101010;
+      font-weight: 500;
+
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
+      }
+    }
+  }
+
+  &.dark {
+    text-align: center;
+    background-color: #272727;
+    border: 1px solid #484848;
+
+    span {
+      color: #Fff;
+
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+      }
+    }
+
+    &:hover,
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+    }
+  }
+}
+
+// radio
+.d-check-radio,
+.d-check-box {
+  line-height: 1.1;
+  cursor: pointer;
+
+  input[type=checkbox],
+  input[type=radio] {
+    position: static;
+    margin-left: 0;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+    flex: 0 0 auto;
+  }
+
+  label {
+    position: relative;
+    padding-left: 10px;
+    margin-bottom: 0;
+    word-break: break-all;
+    line-height: 1.2;
+    display: inline;
+    vertical-align: top;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 400;
+    cursor: pointer;
+  }
+
+  &.light {
+    label {
+      color: #45576F;
+    }
+  }
+
+  &.no-text {
+    label {
+      padding-left: 0;
+    }
+  }
+}
+
+.d-check-radio {
+  label {
+    &::before {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #999999;
+      border-radius: 100%;
+      background-color: transparent;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    }
+
+    &::after {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      top: 6px;
+      left: 4px;
+      margin-left: -12px;
+      border: none;
+      border-radius: 100%;
+      background-color: #fff;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+    }
+  }
+
+  &.light {
+    label {
+      &:before {
+        border-color: #D6D6D7;
+      }
+
+      &:after {
+        background-color: #697C8F;
+      }
+    }
+  }
+
+  input[type=radio]:checked + label::after {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.pop {
+    label {
+      &:before {
+        border-color: #fff;
+      }
+
+      &:after {
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// check-box
+.d-check-box {
+  label {
+    &::before {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #D6D6D7;
+      background-color: transparent;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    }
+
+    &:after {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: 0;
+      left: 0;
+      margin-left: -.8rem;
+      transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+    }
+  }
+
+  input[type=checkbox]:checked + label::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 1px;
+    left: -1px;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #697C8F;
+    border-left: none;
+    border-top: none;
+    transform: translate(7.75px, 4.5px) rotate(45deg);
+    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+  }
+
+  &.pop {
+    input[type=checkbox]:checked + label::after {
+      border-color: #fff;
+    }
+  }
+}
+
+// date-picker
+.date-picker {
+  svg {
+    display: none;
+  }
+
+  .react-datepicker-wrapper {
+    width: 100%;
+  }
+
+  input[type=text] {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    border: 1px solid #eee;
+    font-size: 13px;
+    color: #45576F;
+    font-weight: normal;
+    font-family: 'Noto Sans JP', sans-serif;
+    background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+    background-size: 14px 15px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_test.scss b/src/styles/_test.scss
index babec92c..9e542bbd 100644
--- a/src/styles/_test.scss
+++ b/src/styles/_test.scss
@@ -1,3 +1,87 @@
 .test {
   background-color: #121212;
 }
+
+.grid-container2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2개의 열 */
+  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  gap: 5px; /* 그리드 아이템 사이의 간격 */
+}
+
+.grid-container3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
+  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  gap: 5px; /* 그리드 아이템 사이의 간격 */
+}
+
+.grid-container4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* 4개의 열 */
+  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  gap: 5px; /* 그리드 아이템 사이의 간격 */
+}
+
+.grid-container5 {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr); /* 5개의 열 */
+  grid-template-rows: repeat(5, 30px); /* 5개의 행 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  gap: 0px; /* 그리드 아이템 사이의 간격 */
+}
+
+.grid-item {
+  width: 100%;
+  height: 100%;
+  border: 1px solid black; /* 그리드 외각선 */
+  text-align: center; /* 그리드 내 가운데 정렬 */
+}
+
+.grid-item2 {
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #000;
+}
+
+.grid-item3 {
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #000;
+  transition: background-color 0.3s ease;
+}
+
+.grid-item.Y {
+  background-color: #d3d0d0;
+  color: black;
+}
+
+.grid-item.N {
+  background-color: white;
+  color: black;
+}
+
+.grid-item.selected {
+  background-color: #d3d0d0;
+  color: black;
+}
+
+.grid-item.unselected {
+  background-color: white;
+  color: black;
+}
+
+.centered {
+  .ag-header-cell-label {
+    justify-content: center !important;
+  }
+}
diff --git a/src/styles/common.scss b/src/styles/common.scss
new file mode 100644
index 00000000..b9a87417
--- /dev/null
+++ b/src/styles/common.scss
@@ -0,0 +1,3 @@
+@import 'fonts.scss';
+@import 'reset.scss';
+@import '_layout.scss';
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
new file mode 100644
index 00000000..90dfa532
--- /dev/null
+++ b/src/styles/contents.scss
@@ -0,0 +1,2 @@
+@import '_contents.scss';
+@import '_modal.scss';
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 92085ad6..58e97925 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,2 +1,2 @@
-@import '_test.scss';
+@import '_main.scss';
 @import 'react-toastify/dist/ReactToastify.css';
\ No newline at end of file
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index 7374c024..4efd9138 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -38,7 +38,7 @@ export function actionHandler(eventData, transform, x, y) {
 
 // define a function that can keep the polygon in the same position when we change its width/height/top/left
 export function anchorWrapper(anchorIndex, fn) {
-  return function(eventData, transform, x, y) {
+  return function (eventData, transform, x, y) {
     let fabricObject = transform.target
     let originX = fabricObject?.points[anchorIndex].x - fabricObject.pathOffset.x
     let originY = fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y
@@ -675,3 +675,53 @@ export function findClosestPointWithDifferentXY(targetPoint, points) {
 
   return closestPoint
 }
+
+export const getClosestHorizontalLine = (pointer, horizontalLineArray) => {
+  let closestLine = null
+  let minDistance = Infinity
+
+  horizontalLineArray.forEach((line) => {
+    const distance = Math.abs(line.y1 - pointer.y) // Assuming horizontal lines have the same y1 and y2
+    if (distance < minDistance) {
+      minDistance = distance
+      closestLine = line
+    }
+  })
+
+  return closestLine
+}
+
+export const getClosestVerticalLine = (pointer, verticalLineArray) => {
+  let closestLine = null
+  let minDistance = Infinity
+
+  verticalLineArray.forEach((line) => {
+    const distance = Math.abs(line.x1 - pointer.x) // Assuming horizontal lines have the same y1 and y2
+    if (distance < minDistance) {
+      minDistance = distance
+      closestLine = line
+    }
+  })
+
+  return closestLine
+}
+
+/**
+ * 빗변과 높이를 가지고 빗변의 x값을 구함
+ * @param {} p1
+ * @param {*} p2
+ * @param {*} y
+ * @returns
+ */
+export const getIntersectionPoint = (p1, p2, y) => {
+  const { x: x1, y: y1 } = p1
+  const { x: x2, y: y2 } = p2
+
+  // 기울기와 y 절편을 이용해 선의 방정식을 구합니다.
+  const slope = (y2 - y1) / (x2 - x1)
+  const intercept = y1 - slope * x1
+
+  // y = 150일 때의 x 좌표를 구합니다.
+  const x = (y - intercept) / slope
+  return { x, y }
+}
diff --git a/src/util/common-utils.js b/src/util/common-utils.js
index 9f53fede..1b7cd166 100644
--- a/src/util/common-utils.js
+++ b/src/util/common-utils.js
@@ -9,3 +9,53 @@ export const isObjectNotEmpty = (obj) => {
   }
   return Object.keys(obj).length > 0
 }
+
+export const isNotEmptyArray = (array) => {
+  return Array.isArray(array) && array.length
+}
+
+export const isEmptyArray = (array) => {
+  return !isNotEmptyArray(array)
+}
+
+/**
+ * ex) const params = {page:10, searchDvsnCd: 20}
+ * @param {*} params
+ * @returns page=10&searchDvsnCd=20
+ */
+export const queryStringFormatter = (params = {}) => {
+  const queries = []
+  Object.keys(params).forEach((parameterKey) => {
+    const parameterValue = params[parameterKey]
+
+    if (parameterValue === undefined || parameterValue === null) {
+      return
+    }
+
+    // string trim
+    if (typeof parameterValue === 'string' && !parameterValue.trim()) {
+      return
+    }
+
+    // array to query string
+    if (Array.isArray(parameterValue)) {
+      // primitive type
+      if (parameterValue.every((v) => typeof v === 'number' || typeof v === 'string')) {
+        queries.push(`${encodeURIComponent(parameterKey)}=${parameterValue.map((v) => encodeURIComponent(v)).join(',')}`)
+        return
+      }
+      // reference type
+      if (parameterValue.every((v) => typeof v === 'object' && v !== null)) {
+        parameterValue.map((pv, i) => {
+          return Object.keys(pv).forEach((valueKey) => {
+            queries.push(`${encodeURIComponent(`${parameterKey}[${i}].${valueKey}`)}=${encodeURIComponent(pv[valueKey])}`)
+          })
+        })
+        return
+      }
+    }
+    // 나머지
+    queries.push(`${encodeURIComponent(parameterKey)}=${encodeURIComponent(parameterValue)}`)
+  })
+  return queries.join('&')
+}
diff --git a/src/util/input-utils.js b/src/util/input-utils.js
new file mode 100644
index 00000000..f674e6cd
--- /dev/null
+++ b/src/util/input-utils.js
@@ -0,0 +1,20 @@
+// 숫자만 입력 가능한 input onChange 함수
+export const onlyNumberInputChange = (e, callback) => {
+  let value = e.target.value.replace(/^0+/, '')
+  value = value.replace(/[^-0-9]/g, '')
+  callback(value, e)
+}
+
+//소수점 둘째자리 숫자만 입력가능
+export const onlyNumberWithDotInputChange = (e, callback) => {
+  const val = e.target.value
+
+  const pattern = /^-?(\d{1,4}([.]\d{0,2})?)?$/
+  if (!pattern.test(val)) {
+    // prev에서 마지막 자리 제거
+    callback(val.slice(0, val.length - 1), e)
+    return
+  }
+
+  callback(val, e)
+}
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 527aee8d..641016d5 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -967,6 +967,11 @@ export const splitPolygonWithLines = (polygon) => {
   const roofs = []
   const allLines = [...polygon.innerLines]
 
+  allLines.forEach((line) => {
+    line.startPoint = { x: line.x1, y: line.y1 }
+    line.endPoint = { x: line.x2, y: line.y2 }
+  })
+
   // allLines에 x1,y1,x2,y2를 비교해서 중복되는 값을 제거한다.
   allLines.forEach((line, index) => {
     const startPoint = line.startPoint
@@ -987,7 +992,7 @@ export const splitPolygonWithLines = (polygon) => {
   /**
    * 좌표 테스트용
    */
-  allLines.forEach((line) => {
+  /*allLines.forEach((line) => {
     const text = new fabric.Text(`(${line.startPoint.x},${line.startPoint.y})`, {
       left: line.startPoint.x,
       top: line.startPoint.y,
@@ -1016,7 +1021,7 @@ export const splitPolygonWithLines = (polygon) => {
 
     polygon.canvas.add(text)
     polygon.canvas.renderAll()
-  })
+  })*/
   /**
    * 좌표 테스트용 끝
    */
@@ -1195,382 +1200,315 @@ function calculateAngleBetweenLines(line1, line2) {
 }
 
 export const drawHippedRoof = (polygon, chon) => {
-  drawRoofRidge(polygon)
+  drawRoofRidge(polygon, chon)
   drawHips(polygon)
   connectLinePoint(polygon)
 }
-/*마루 그리기
-    외벽의 모양이 돌출된 ㄷ의 형태일때
-    현재 라인의 외벽길이가 붙어있는 두외벽의 길이보다 짧거나 같다면
-    지붕의 두 꼭지점에서 외벽의 두 꼭지점으로 45도 방향으로 선을 그려 만나는 지점이 마루의 시작점이 되고
-    시작점에서 부터 (가장 긴선 - ( 삼각형의 빗변 에서 직각까지의 수직길이 x 2))의 길이가 마루의 끝점이 된다.
-    다만 마루의 길이는 나머지 나머지 두 지붕의 길이중 짧은선의 길이를 넘어갈수 없다.
-*/
-const drawRoofRidge = (polygon) => {
-  const lines = polygon.wall.lines
-  console.log('polygon.wall.points : ', polygon.wall.points)
-  polygon.lines.forEach((value, index) => {
-    let currentLine, prevWall, currentWall, nextWall
-    let startXPoint, startYPoint, endXPoint, endYPoint
+
+const drawRoofRidge = (polygon, chon) => {
+  const points = []
+  polygon.wall.points.forEach((point) => points.push({ x: point.x, y: point.y }))
+  console.log('points : ', points)
+
+  const walls = polygon.wall.lines // 외벽의 라인
+  const roofs = polygon.lines // 지붕의 라인
+  let ridgeWall = []
+  walls.forEach((wall, index) => {
+    let currentRoof, prevWall, currentWall, nextWall
+
     if (index === 0) {
-      prevWall = polygon.wall.lines[polygon.wall.lines.length - 1]
+      prevWall = walls[walls.length - 1]
     } else {
-      prevWall = polygon.wall.lines[index - 1]
+      prevWall = walls[index - 1]
     }
-    currentLine = polygon.lines[index]
-    currentWall = polygon.wall.lines[index]
+    currentRoof = roofs[index]
+    currentWall = walls[index]
 
-    if (index === polygon.lines.length - 1) {
-      nextWall = polygon.wall.lines[0]
-    } else if (index === polygon.lines.length) {
-      nextWall = polygon.wall.lines[1]
+    if (index === walls.length - 1) {
+      nextWall = walls[0]
+    } else if (index === walls.length) {
+      nextWall = walls[1]
     } else {
-      nextWall = polygon.wall.lines[index + 1]
+      nextWall = walls[index + 1]
     }
 
-    if (getLineDirection(prevWall) !== getLineDirection(nextWall) && currentWall.length < currentLine.length) {
-      let minX = Math.min(currentWall.x1, currentWall.x2, prevWall.x1, nextWall.x2)
-      let maxX = Math.max(currentWall.x1, currentWall.x2, prevWall.x1, nextWall.x2)
-      let minY = Math.min(currentWall.y1, currentWall.y2, prevWall.y1, nextWall.y2)
-      let maxY = Math.max(currentWall.y1, currentWall.y2, prevWall.y1, nextWall.y2)
+    if (prevWall.direction !== nextWall.direction && currentWall.length < currentRoof.length) {
+      ridgeWall.push({ index: index, wall: currentWall, length: currentWall.length })
+    }
+  })
 
-      let lineCoordinate = [
-        { x: minX, y: minY },
-        { x: minX, y: maxY },
-        { x: maxX, y: maxY },
-        { x: maxX, y: minY },
-      ]
+  // 지붕의 길이가 짧은 순으로 정렬
+  ridgeWall.sort((a, b) => a.length - b.length)
 
-      let innerPointLine = lines
-        .filter((line) => {
-          if (getPointInPolygon(lineCoordinate, { x: line.x1, y: line.y1 })) {
-            return line
+  ridgeWall.forEach((item) => {
+    if (getMaxRidge(walls.length) > polygon.ridges.length) {
+      let index = item.index,
+        // currentRoof = roofs[index],
+        beforePrevWall,
+        prevWall,
+        currentWall = item.wall,
+        nextWall,
+        afterNextWall
+      let startXPoint, startYPoint, endXPoint, endYPoint
+
+      if (index === 0) {
+        prevWall = walls[walls.length - 1]
+      } else {
+        prevWall = walls[index - 1]
+      }
+
+      if (index === 0) {
+        beforePrevWall = walls[roofs.length - 2]
+      } else if (index === 1) {
+        beforePrevWall = walls[roofs.length - 1]
+      } else {
+        beforePrevWall = walls[index - 2]
+      }
+
+      if (index === walls.length - 1) {
+        nextWall = walls[0]
+      } else if (index === walls.length) {
+        nextWall = walls[1]
+      } else {
+        nextWall = walls[index + 1]
+      }
+
+      if (index === walls.length - 2) {
+        afterNextWall = walls[0]
+      } else if (index === walls.length - 1) {
+        afterNextWall = walls[1]
+      } else if (index === walls.length) {
+        afterNextWall = walls[2]
+      } else {
+        afterNextWall = walls[index + 2]
+      }
+
+      const anotherRoof = walls.filter((wall) => wall !== currentWall && wall !== prevWall && wall !== nextWall)
+      let acrossRoof, xEqualInnerLines, yEqualInnerLines
+      xEqualInnerLines = anotherRoof.filter((roof) => roof.x1 === roof.x2 && isInnerLine(prevWall, currentWall, nextWall, roof)) //x가 같은 내부선
+      yEqualInnerLines = anotherRoof.filter((roof) => roof.y1 === roof.y2 && isInnerLine(prevWall, currentWall, nextWall, roof)) //y가 같은 내부선
+
+      let ridgeBaseLength = currentWall.length / 2, // 지붕의 기반 길이
+        ridgeMaxLength = Math.min(prevWall.length, nextWall.length), // 지붕의 최대 길이. 이전, 다음 벽 중 짧은 길이
+        ridgeAcrossLength = Math.max(prevWall.length, nextWall.length) - currentWall.length // 맞은편 벽까지의 길이 - 지붕의 기반 길이
+
+      acrossRoof = anotherRoof
+        .filter((roof) => {
+          if (currentWall.direction === 'top' && roof.direction === 'bottom') {
+            if (nextWall.direction === 'right' && roof.x1 > currentWall.x1) {
+              return roof
+            }
+            if (nextWall.direction === 'left' && roof.x1 < currentWall.x1) {
+              return roof
+            }
+          }
+          if (currentWall.direction === 'right' && roof.direction === 'left') {
+            if (nextWall.direction === 'top' && roof.y1 < currentWall.y1) {
+              return roof
+            }
+            if (nextWall.direction === 'bottom' && roof.y1 > currentWall.y1) {
+              return roof
+            }
           }
         })
         .reduce((prev, current) => {
+          let hasBetweenWall = false
+          if (current.direction === 'top' || current.direction === 'bottom') {
+            hasBetweenWall = walls
+              .filter((wall) => wall !== current && wall !== currentWall)
+              .some((line) => {
+                let currentY2 = currentWall.y2
+                if (yEqualInnerLines.length > 0) {
+                  yEqualInnerLines.forEach((line) => {
+                    currentY2 = Math.abs(currentWall.y1 - currentY2) < Math.abs(currentWall.y1 - line.y1) ? currentY2 : line.y1
+                  })
+                }
+                const isY1Between = (line.y1 > currentWall.y1 && line.y1 < currentY2) || (line.y1 > currentY2 && line.y1 < currentWall.y1)
+                const isY2Between = (line.y2 > currentWall.y1 && line.y2 < currentY2) || (line.y2 > currentY2 && line.y2 < currentWall.y1)
+                const isX1Between = (line.x1 > currentWall.x1 && line.x1 < current.x1) || (line.x1 > currentWall.x1 && line.x1 < current.x1)
+                const isX2Between = (line.x2 > currentWall.x1 && line.x2 < current.x1) || (line.x2 > currentWall.x1 && line.x2 < current.x1)
+                return isY1Between && isY2Between && isX1Between && isX2Between
+              })
+          }
+          if (current.direction === 'right' || current.direction === 'left') {
+            hasBetweenWall = walls
+              .filter((wall) => wall !== current && wall !== currentWall)
+              .some((line) => {
+                let currentX2 = currentWall.x2
+                if (xEqualInnerLines.length > 0) {
+                  xEqualInnerLines.forEach((line) => {
+                    currentX2 = Math.abs(currentWall.x1 - currentX2) < Math.abs(currentWall.x1 - line.x1) ? currentX2 : line.x1
+                  })
+                }
+                const isX1Between = (line.x1 > currentWall.x1 && line.x1 < currentX2) || (line.x1 > currentX2 && line.x1 < currentWall.x1)
+                const isX2Between = (line.x2 > currentWall.x1 && line.x2 < currentX2) || (line.x2 > currentX2 && line.x2 < currentWall.x1)
+                const isY1Between = (line.y1 > currentWall.y1 && line.y1 < current.y1) || (line.y1 > currentWall.y1 && line.y1 < current.y1)
+                const isY2Between = (line.y2 > currentWall.y1 && line.y2 < current.y1) || (line.y2 > currentWall.y1 && line.y2 < current.y1)
+
+                return isX1Between && isX2Between && isY1Between && isY2Between
+              })
+          }
           if (prev !== undefined) {
             if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-              return Math.abs(currentWall.x1 - prev.x1 + (currentWall.x1 - prev.x2)) <
-                Math.abs(currentWall.x1 - current.x1 + (currentWall.x1 - current.x2))
-                ? prev
-                : current
+              return Math.abs(currentWall.y1 - prev.y1) > Math.abs(currentWall.y1 - current.y1) ? prev : current
             }
-            if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-              return Math.abs(currentWall.y1 - prev.y1 + (currentWall.y1 - prev.y2)) <
-                Math.abs(currentWall.y1 - current.y1 + (currentWall.y1 - current.y2))
-                ? prev
-                : current
+            if (currentWall.direction === 'right' || currentWall.direction === 'left') {
+              return Math.abs(currentWall.x1 - prev.x1) > Math.abs(currentWall.x1 - current.x1) ? prev : current
             }
           } else {
-            if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
+            if (!hasBetweenWall) {
               return current
-            }
-            if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-              return current
-            }
-          }
-        }, undefined)
-
-      console.log('여기 확인 ===== currentWall : ', currentWall)
-      let acrossLine = lines
-        .filter((line) => {
-          /*let minAcrossX, maxAcrossX, minAcrossY, maxAcrossY
-          if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-            minAcrossX = Math.min(currentWall.x1, line.x1)
-            maxAcrossX = Math.max(currentWall.x1, line.x1)
-            minAcrossY = Math.min(currentWall.y1, currentWall.y2)
-            maxAcrossY = Math.max(currentWall.y1, currentWall.y2)
-          }
-          if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-            minAcrossX = Math.min(currentWall.x1, currentWall.x2)
-            maxAcrossX = Math.max(currentWall.x1, currentWall.x2)
-            minAcrossY = Math.min(currentWall.y1, line.y1)
-            maxAcrossY = Math.max(currentWall.y1, line.y1)
-          }
-          let coordinate = [
-            { x: minAcrossX, y: minAcrossY },
-            { x: minAcrossX, y: maxAcrossY },
-            { x: maxAcrossX, y: maxAcrossY },
-            { x: maxAcrossX, y: minAcrossY },
-          ]
-          console.log('coordinate : ', coordinate)
-          let isPointInLine = false
-          lines.forEach((l) => {
-            if (getPointInPolygon(coordinate, { x: l.x1, y: l.y1 }, true)) {
-              isPointInLine = true
-            }
-          })
-          console.log('line : ', line)
-          console.log('isPointInLine : ', isPointInLine)*/
-          // if (!isPointInLine && (currentWall.direction === 'top' || currentWall.direction === 'bottom')) {
-          if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-            return line.direction === 'top' || line.direction === 'bottom'
-          }
-          // if (!isPointInLine && (currentWall.direction === 'left' || currentWall.direction === 'right')) {
-          if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-            return line.direction === 'left' || line.direction === 'right'
-          }
-        })
-        .reduce((prev, current) => {
-          if (prev !== undefined) {
-            if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-              if (prevWall.direction === 'right' && currentWall.x1 > current.x1) {
-                return Math.abs(prev.x1 - currentWall.x1) > Math.abs(current.x1 - currentWall.x1) ? prev : current
-              }
-              if (prevWall.direction === 'left' && currentWall.x1 < current.x1) {
-                return Math.abs(prev.x1 - currentWall.x1) > Math.abs(current.x1 - currentWall.x1) ? prev : current
-              }
-            }
-            if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-              if (prevWall.direction === 'top' && currentWall.y1 < current.y1) {
-                return Math.abs(prev.y1 - currentWall.y1) > Math.abs(current.y1 - currentWall.y1) ? prev : current
-              }
-              if (prevWall.direction === 'bottom' && currentWall.y1 > current.y1) {
-                return Math.abs(prev.y1 - currentWall.y1) > Math.abs(current.y1 - currentWall.y1) ? prev : current
-              }
-            }
-            return prev
-          } else {
-            if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-              if (prevWall.direction === 'right' && currentWall.x1 > current.x1) {
-                return current
-              }
-              if (prevWall.direction === 'left' && currentWall.x1 < current.x1) {
-                return current
-              }
-            }
-            if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-              if (prevWall.direction === 'top' && currentWall.y1 < current.y1) {
-                return current
-              }
-              if (prevWall.direction === 'bottom' && currentWall.y1 > current.y1) {
-                return current
-              }
-            }
-          }
-        }, undefined)
-
-      let ridgeLengthToWall, ridgeBaseLength, ridgeLengthToAcrossLine, ridgeMaxLength
-
-      // console.log('currentWall : ', currentWall.length)
-      // console.log('innerPointLine : ', innerPointLine)
-      if (innerPointLine !== undefined) {
-        if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-          // console.log('currentWall : ', currentWall)
-          // console.log('acrossLine : ', acrossLine)
-          if (innerPointLine.y1 === innerPointLine.y2) {
-            // console.log('innerPointLine : ', innerPointLine)
-            ridgeBaseLength = Math.abs(currentWall.y1 - innerPointLine.y1)
-            ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
-            ridgeLengthToWall = Math.min(
-              Math.max(Math.abs(currentWall.x1 - innerPointLine.x1), Math.abs(currentWall.x1 - innerPointLine.x2)),
-              ridgeLengthToWall,
-            )
-            ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
-            ridgeMaxLength = Math.max(
-              prevWall.length,
-              nextWall.length,
-              Math.abs(currentWall.x1 - acrossLine.x1),
-              Math.abs(currentWall.x1 - acrossLine.x1),
-            )
-          } else {
-            ridgeBaseLength =
-              Math.abs(currentWall.y1 - innerPointLine.y1) < Math.abs(currentWall.y1 - innerPointLine.y2)
-                ? Math.abs(currentWall.y1 - innerPointLine.y1)
-                : Math.abs(currentWall.y1 - innerPointLine.y2)
-            ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, ridgeBaseLength) - ridgeBaseLength
-            ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - innerPointLine.x1)
-            ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1))
-          }
-          /*console.log(
-            'ridgeBaseLength : ',
-            ridgeBaseLength,
-            ' ridgeLengthToWall : ',
-            ridgeLengthToWall,
-            ' ridgeLengthToAcrossLine : ',
-            ridgeLengthToAcrossLine,
-            'ridgeMaxLength : ',
-            ridgeMaxLength,
-          )*/
-          if (ridgeBaseLength > 0) {
-            if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
-              if (nextWall.direction === 'right') {
-                startXPoint = currentWall.x1 + ridgeBaseLength / 2
-                endXPoint = startXPoint + ridgeLengthToWall
-              }
-              if (nextWall.direction === 'left') {
-                startXPoint = currentWall.x1 - ridgeBaseLength / 2
-                endXPoint = startXPoint - ridgeLengthToWall
-              }
             } else {
-              if (nextWall.direction === 'right') {
-                startXPoint = acrossLine.x1 - ridgeLengthToAcrossLine - ridgeBaseLength / 2
-                endXPoint = acrossLine.x1 - ridgeBaseLength / 2
-              }
-              if (nextWall.direction === 'left') {
-                startXPoint = acrossLine.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
-                endXPoint = startXPoint - ridgeLengthToAcrossLine
-              }
-            }
-            if (currentWall.direction === 'top') {
-              startYPoint = currentWall.y1 - ridgeBaseLength / 2
-              endYPoint = startYPoint
-            }
-            if (currentWall.direction === 'bottom') {
-              startYPoint = currentWall.y1 + ridgeBaseLength / 2
-              endYPoint = startYPoint
+              return undefined
             }
           }
+        }, undefined)
+      if (acrossRoof !== undefined) {
+        if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
+          if (ridgeAcrossLength < Math.abs(currentWall.x1 - acrossRoof.x1)) {
+            ridgeAcrossLength = Math.abs(currentWall.x1 - acrossRoof.x1) - currentWall.length
+          }
         }
         if (currentWall.direction === 'right' || currentWall.direction === 'left') {
-          // console.log('currentWall.length : ', currentWall.length)
-          if (innerPointLine.x1 === innerPointLine.x2) {
-            ridgeBaseLength = Math.abs(currentWall.x1 - innerPointLine.x1)
-            ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.x1 - acrossLine.x1)) - ridgeBaseLength
-            ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
-            ridgeLengthToWall = Math.min(
-              Math.max(Math.abs(currentWall.y1 - innerPointLine.y1), Math.abs(currentWall.y1 - innerPointLine.y2)),
-              ridgeLengthToWall,
-            )
-            ridgeMaxLength = Math.max(
-              prevWall.length,
-              nextWall.length,
-              Math.abs(currentWall.y1 - acrossLine.y1),
-              Math.abs(currentWall.y1 - acrossLine.y2),
-            )
-          } else {
-            ridgeBaseLength =
-              Math.abs(currentWall.x1 - innerPointLine.x1) < Math.abs(currentWall.x1 - innerPointLine.x2)
-                ? Math.abs(currentWall.x1 - innerPointLine.x1)
-                : Math.abs(currentWall.x1 - innerPointLine.x2)
-            ridgeLengthToWall = Math.max(prevWall.length, nextWall.length, ridgeBaseLength) - ridgeBaseLength
-            ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - innerPointLine.y1)
-            ridgeMaxLength = Math.max(prevWall.length, nextWall.length, Math.abs(currentWall.y1 - acrossLine.y1))
-          }
-          /*console.log(
-            'ridgeBaseLength : ',
-            ridgeBaseLength,
-            ' ridgeLengthToWall : ',
-            ridgeLengthToWall,
-            ' ridgeLengthToAcrossLine : ',
-            ridgeLengthToAcrossLine,
-          )*/
-          if (ridgeBaseLength > 0) {
-            if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
-              if (nextWall.direction === 'top') {
-                startYPoint = currentWall.y1 - ridgeBaseLength / 2
-                endYPoint = startYPoint - ridgeLengthToWall
-              }
-              if (nextWall.direction === 'bottom') {
-                startYPoint = currentWall.y1 + ridgeBaseLength / 2
-                endYPoint = startYPoint + ridgeLengthToWall
-              }
-            } else {
-              if (nextWall.direction === 'top') {
-                startYPoint = acrossLine.y1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
-                endYPoint = acrossLine.y1 + ridgeBaseLength / 2
-              }
-              if (nextWall.direction === 'bottom') {
-                startYPoint = acrossLine.y1 - ridgeLengthToAcrossLine - ridgeBaseLength / 2
-                endYPoint = acrossLine.y1 - ridgeBaseLength / 2
-              }
-            }
-            if (currentWall.direction === 'right') {
-              startXPoint = currentWall.x1 + ridgeBaseLength / 2
-              endXPoint = startXPoint
-            }
-            if (currentWall.direction === 'left') {
-              startXPoint = currentWall.x1 - ridgeBaseLength / 2
-              endXPoint = startXPoint
-            }
-          }
-        }
-      } else {
-        // console.log('여기부터 확인 currentWall : ', currentWall.length)
-        // console.log('acrossLine : ', acrossLine)
-        ridgeBaseLength = currentWall.length
-        ridgeLengthToWall = Math.min(prevWall.length, nextWall.length)
-        ridgeMaxLength = Math.max(prevWall.length, nextWall.length)
-        // console.log('ridgeBaseLength : ', ridgeBaseLength, ' ridgeLengthToWall : ', ridgeLengthToWall, ' ridgeMaxLength : ', ridgeMaxLength)
-        if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-          ridgeLengthToAcrossLine = Math.abs(acrossLine.x1 - currentWall.x1) - ridgeBaseLength
-          ridgeMaxLength = Math.max(ridgeMaxLength, Math.abs(acrossLine.x1 - currentWall.x1))
-          if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
-            if (nextWall.direction === 'right') {
-              startXPoint = currentWall.x1 + ridgeBaseLength / 2
-              endXPoint = startXPoint + ridgeLengthToWall
-            }
-            if (nextWall.direction === 'left') {
-              startXPoint = currentWall.x1 - ridgeBaseLength / 2
-              endXPoint = startXPoint - ridgeLengthToWall
-            }
-          } else {
-            if (nextWall.direction === 'right') {
-              startXPoint = acrossLine.x1 - ridgeLengthToAcrossLine - ridgeBaseLength / 2
-              endXPoint = startXPoint + ridgeLengthToAcrossLine
-            }
-            if (nextWall.direction === 'left') {
-              startXPoint = acrossLine.x1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
-              endXPoint = startXPoint - ridgeLengthToAcrossLine
-            }
-          }
-          if (currentWall.direction === 'top') {
-            startYPoint = currentWall.y1 - ridgeBaseLength / 2
-            endYPoint = startYPoint
-          }
-          if (currentWall.direction === 'bottom') {
-            startYPoint = currentWall.y1 + ridgeBaseLength / 2
-            endYPoint = startYPoint
-          }
-        }
-        if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-          ridgeLengthToAcrossLine = Math.abs(acrossLine.y1 - currentWall.y1) - ridgeBaseLength
-          ridgeMaxLength = Math.max(ridgeMaxLength, Math.abs(acrossLine.x1 - currentWall.x1))
-          if (ridgeLengthToWall <= ridgeLengthToAcrossLine) {
-            if (nextWall.direction === 'top') {
-              startYPoint = currentWall.y1 - ridgeBaseLength / 2
-              endYPoint = startYPoint - ridgeLengthToWall
-            }
-            if (nextWall.direction === 'bottom') {
-              startYPoint = currentWall.y1 + ridgeBaseLength / 2
-              endYPoint = startYPoint + ridgeLengthToWall
-            }
-          } else {
-            if (nextWall.direction === 'top') {
-              startYPoint = acrossLine.y1 + ridgeLengthToAcrossLine + ridgeBaseLength / 2
-              endYPoint = acrossLine.y1 + ridgeBaseLength / 2
-            }
-            if (nextWall.direction === 'bottom') {
-              startYPoint = acrossLine.y1 - ridgeLengthToAcrossLine - ridgeBaseLength / 2
-              endYPoint = acrossLine.y1 - ridgeBaseLength / 2
-            }
-          }
-          if (currentWall.direction === 'right') {
-            startXPoint = currentWall.x1 + ridgeBaseLength / 2
-            endXPoint = startXPoint
-          }
-          if (currentWall.direction === 'left') {
-            startXPoint = currentWall.x1 - ridgeBaseLength / 2
-            endXPoint = startXPoint
+          if (ridgeAcrossLength < Math.abs(currentWall.y1 - acrossRoof.y1)) {
+            ridgeAcrossLength = Math.abs(currentWall.y1 - acrossRoof.y1) - currentWall.length
           }
         }
       }
-      // console.log('ridgeLengthToAcrossLine : ', ridgeLengthToAcrossLine)
-      // console.log(startXPoint, startYPoint, endXPoint, endYPoint)
-      if (
-        // polygon.ridges.length < getMaxRidge(lines.length) &&
-        ridgeBaseLength <= ridgeMaxLength &&
-        startXPoint !== undefined &&
-        startYPoint !== undefined &&
-        endXPoint !== undefined &&
-        endYPoint !== undefined
-      ) {
+
+      if (ridgeBaseLength > 0 && ridgeMaxLength > 0 && ridgeAcrossLength > 0) {
+        let ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
+        if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
+          startXPoint = currentWall.x1 + (nextWall.direction === 'right' ? 1 : -1) * ridgeBaseLength
+          startYPoint = currentWall.y1 + (currentWall.direction === 'top' ? -1 : 1) * ridgeBaseLength
+          endXPoint = startXPoint + (nextWall.direction === 'right' ? 1 : -1) * ridgeLength
+          endYPoint = startYPoint
+          let adjustY
+          if (currentWall.direction === 'top') {
+            if (afterNextWall.direction === 'bottom' && beforePrevWall.direction === 'bottom') {
+              adjustY =
+                Math.abs(currentWall.x1 - afterNextWall.x1) < Math.abs(currentWall.x1 - beforePrevWall.x1) ? afterNextWall.y2 : beforePrevWall.y1
+            } else if (afterNextWall.direction === 'bottom' && afterNextWall.y2 > currentWall.y2 && afterNextWall.y2 < currentWall.y1) {
+              adjustY = afterNextWall.y2
+            } else if (beforePrevWall.direction === 'bottom' && beforePrevWall.y1 > currentWall.y2 && beforePrevWall.y1 < currentWall.y1) {
+              adjustY = beforePrevWall.y1
+            }
+            if (adjustY) {
+              startYPoint = currentWall.y1 - Math.abs(currentWall.y1 - adjustY) / 2
+              endYPoint = startYPoint
+            }
+          }
+          if (currentWall.direction === 'bottom') {
+            if (afterNextWall.direction === 'top' && beforePrevWall.direction === 'top') {
+              adjustY =
+                Math.abs(currentWall.x1 - afterNextWall.x1) < Math.abs(currentWall.x1 - beforePrevWall.x1) ? afterNextWall.y2 : beforePrevWall.y1
+            } else if (afterNextWall.direction === 'top' && afterNextWall.y2 < currentWall.y2 && afterNextWall.y2 > currentWall.y1) {
+              adjustY = afterNextWall.y2
+            } else if (beforePrevWall.direction === 'top' && beforePrevWall.y1 < currentWall.y2 && beforePrevWall.y1 > currentWall.y1) {
+              adjustY = beforePrevWall.y1
+            }
+            if (adjustY) {
+              startYPoint = currentWall.y1 + Math.abs(currentWall.y1 - adjustY) / 2
+              endYPoint = startYPoint
+            }
+          }
+          if (yEqualInnerLines.length > 0) {
+            yEqualInnerLines.reduce((prev, current) => {
+              if (prev !== undefined) {
+                return Math.abs(currentWall.y1 - prev.y1) < Math.abs(currentWall.y1 - current.y1) ? prev : current
+              } else {
+                return current
+              }
+            }, undefined)
+            startYPoint =
+              Math.abs(currentWall.y1 - startYPoint) * 2 <= Math.abs(currentWall.y1 - yEqualInnerLines[0].y1)
+                ? startYPoint
+                : Math.abs(currentWall.y1 - yEqualInnerLines[0].y1)
+            endYPoint = startYPoint
+            ridgeAcrossLength = Math.max(prevWall.length, nextWall.length) - Math.abs(currentWall.y1 - startYPoint) * 2
+            if (
+              //yEqualInnerLines 이 다음 벽보다 안쪽에 있을때
+              Math.abs(currentWall.y1 - yEqualInnerLines[0].y1) <= Math.abs(currentWall.y1 - nextWall.y1) &&
+              Math.abs(currentWall.x1 - yEqualInnerLines[0].x2) >= Math.abs(currentWall.x1 - nextWall.x2)
+            ) {
+              ridgeMaxLength = Math.abs(currentWall.x1 - yEqualInnerLines[0].x2)
+            }
+            ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
+            startXPoint = currentWall.x1 + (nextWall.direction === 'right' ? 1 : -1) * Math.abs(currentWall.y1 - startYPoint)
+            endXPoint = startXPoint + (nextWall.direction === 'right' ? 1 : -1) * ridgeLength
+          }
+        }
+        if (currentWall.direction === 'left' || currentWall.direction === 'right') {
+          startXPoint = currentWall.x1 + (currentWall.direction === 'left' ? -1 : 1) * ridgeBaseLength
+          startYPoint = currentWall.y1 + (nextWall.direction === 'bottom' ? 1 : -1) * ridgeBaseLength
+          endXPoint = startXPoint
+          endYPoint = startYPoint + (nextWall.direction === 'bottom' ? 1 : -1) * ridgeLength
+          let adjustX
+          if (currentWall.direction === 'right') {
+            if (afterNextWall.direction === 'left' && beforePrevWall.direction === 'left') {
+              adjustX =
+                Math.abs(currentWall.y1 - afterNextWall.y1) < Math.abs(currentWall.y1 - beforePrevWall.y1) ? afterNextWall.x2 : beforePrevWall.x1
+            } else if (afterNextWall.direction === 'left' && afterNextWall.x2 < currentWall.x2 && afterNextWall.x2 > currentWall.x1) {
+              adjustX = afterNextWall.x2
+            } else if (beforePrevWall.direction === 'left' && beforePrevWall.x1 < currentWall.x2 && beforePrevWall.x1 > currentWall.x1) {
+              adjustX = beforePrevWall.x1
+            }
+            if (adjustX) {
+              startXPoint = currentWall.x1 + Math.abs(currentWall.x1 - adjustX) / 2
+              endXPoint = startXPoint
+            }
+          }
+          if (currentWall.direction === 'left') {
+            if (afterNextWall.direction === 'right' && beforePrevWall.direction === 'right') {
+              adjustX =
+                Math.abs(currentWall.y1 - afterNextWall.y1) < Math.abs(currentWall.y1 - beforePrevWall.y1) ? afterNextWall.x2 : beforePrevWall.x1
+            } else if (afterNextWall.direction === 'right' && afterNextWall.x2 > currentWall.x2 && afterNextWall.x2 < currentWall.x1) {
+              adjustX = afterNextWall.x2
+            } else if (beforePrevWall.direction === 'right' && beforePrevWall.x1 > currentWall.x2 && beforePrevWall.x1 < currentWall.x1) {
+              adjustX = beforePrevWall.x1
+            }
+            if (adjustX) {
+              startXPoint = currentWall.x1 - Math.abs(currentWall.x1 - adjustX) / 2
+              endXPoint = startXPoint
+            }
+          }
+          if (xEqualInnerLines.length > 0) {
+            xEqualInnerLines.reduce((prev, current) => {
+              if (prev !== undefined) {
+                return Math.abs(currentWall.x1 - prev.x1) < Math.abs(currentWall.x1 - current.x1) ? prev : current
+              } else {
+                return current
+              }
+            }, undefined)
+            startXPoint =
+              Math.abs(currentWall.x1 - startXPoint) * 2 <= Math.abs(currentWall.x1 - xEqualInnerLines[0].x1)
+                ? startXPoint
+                : Math.abs(currentWall.x1 - xEqualInnerLines[0].x1)
+            endXPoint = startXPoint
+            ridgeAcrossLength = Math.max(prevWall.length, nextWall.length) - Math.abs(currentWall.x1 - startXPoint) * 2
+            if (
+              //xEqualInnerLines 이 다음 벽보다 안쪽에 있을때
+              Math.abs(currentWall.x1 - xEqualInnerLines[0].x1) <= Math.abs(currentWall.x1 - nextWall.x1) &&
+              Math.abs(currentWall.y1 - xEqualInnerLines[0].y2) >= Math.abs(currentWall.y1 - nextWall.y2)
+            ) {
+              ridgeMaxLength = Math.abs(currentWall.y1 - xEqualInnerLines[0].y2)
+            }
+            ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
+            startYPoint = currentWall.y1 + (nextWall.direction === 'bottom' ? 1 : -1) * Math.abs(currentWall.x1 - startXPoint)
+            endYPoint = startYPoint + (nextWall.direction === 'bottom' ? 1 : -1) * ridgeLength
+          }
+        }
+      }
+
+      // 마루 그리기
+      if (!(startXPoint === undefined && startYPoint === undefined && endXPoint === undefined && endYPoint === undefined)) {
         const ridge = new QLine(
           [Math.min(startXPoint, endXPoint), Math.min(startYPoint, endYPoint), Math.max(startXPoint, endXPoint), Math.max(startYPoint, endYPoint)],
           {
             fontSize: polygon.fontSize,
             stroke: 'blue',
             strokeWidth: 1,
+            name: 'ridgeLine',
           },
         )
         polygon.canvas.add(ridge)
@@ -1579,9 +1517,7 @@ const drawRoofRidge = (polygon) => {
       }
     }
   })
-  //중복 제거
-  polygon.ridges = polygon.ridges.filter((ridge, index, self) => index === self.findIndex((t) => t.x1 === ridge.x1 && t.y1 === ridge.y1))
-  polygon.innerLines = polygon.innerLines.filter((line, index, self) => index === self.findIndex((t) => t.x1 === line.x1 && t.y1 === line.y1))
+
   //겹쳐지는 마루는 하나로 합침
   polygon.ridges.forEach((ridge, index) => {
     polygon.ridges
@@ -1615,6 +1551,27 @@ const drawRoofRidge = (polygon) => {
   })
 }
 
+/**
+ * line 이 세 라인 사이에 존재하는지 확인한다.
+ * @param prevLine
+ * @param currentLine
+ * @param nextLine
+ * @param line
+ */
+const isInnerLine = (prevLine, currentLine, nextLine, line) => {
+  let inside = false
+  let minX = Math.min(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
+  let maxX = Math.max(currentLine.x1, currentLine.x2, prevLine.x1, nextLine.x2)
+  let minY = Math.min(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2)
+  let maxY = Math.max(currentLine.y1, currentLine.y2, prevLine.y1, nextLine.y2)
+
+  if (minX < line.x1 && line.x1 < maxX && minY < line.y1 && line.y1 < maxY && minX < line.x2 && line.x2 < maxX && minY < line.y2 && line.y2 < maxY) {
+    inside = true
+  }
+
+  return inside
+}
+
 /**
  * 두 선분이 겹치는지 확인
  * @param line1
@@ -1623,16 +1580,12 @@ const drawRoofRidge = (polygon) => {
  */
 const segmentsOverlap = (line1, line2) => {
   if (line1.y1 === line1.y2 && line2.y1 === line2.y2 && line1.y1 === line2.y1) {
-    // console.log('가로방향 겹침 확인 ')
     if ((line1.x1 <= line2.x1 && line1.x2 >= line2.x1) || (line1.x1 <= line2.x2 && line1.x2 >= line2.x2)) {
-      // console.log('가로방향 겹침')
       return true
     }
   }
   if (line1.x1 === line1.x2 && line2.x1 === line2.x2 && line1.x1 === line2.x1) {
-    // console.log('세로방향 겹침 확인')
     if ((line1.y1 <= line2.y1 && line1.y2 >= line2.y1) || (line1.y1 <= line2.y2 && line1.y2 >= line2.y2)) {
-      // console.log('세로방향 겹침')
       return true
     }
   }
@@ -1643,12 +1596,9 @@ const drawHips = (polygon) => {
   /*
     마루에서 시작되는 hip을 먼저 그립니다.
    */
-  console.log('polygon.ridges', polygon.ridges)
-  console.log('polygon.lines', polygon.lines)
   polygon.ridges.forEach((ridge) => {
     let leftTop, rightTop, leftBottom, rightBottom
     if (ridge.y1 === ridge.y2) {
-      console.log('가로방향 마루')
       //왼쪽 좌표 기준 225, 315도 방향 라인확인
       leftTop = polygon.lines
         .filter((line) => line.x1 < ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
@@ -1713,6 +1663,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1742,6 +1693,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1771,6 +1723,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1800,6 +1753,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1870,6 +1824,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1895,6 +1850,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1919,12 +1875,12 @@ const drawHips = (polygon) => {
             isRidgePointOnLine = true
           }
         })
-        console.log('leftBottom isRidgePointOnLine : ', isRidgePointOnLine)
         if (!isRidgePointOnLine) {
           const hip = new QLine([leftBottom.x1, leftBottom.y1, ridge.x2, ridge.y2], {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1954,6 +1910,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -2204,8 +2161,6 @@ const drawHips = (polygon) => {
           break
       }
 
-      console.log('nearRidge : ', nearRidge)
-
       if (nearRidge !== undefined) {
         let endXPoint, endYPoint
         let minX, maxX, minY, maxY
@@ -2263,6 +2218,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -2273,7 +2229,6 @@ const drawHips = (polygon) => {
   })
 
   // 마루와 연결되지 않은 hip을 그린다.
-  console.log('마루와 연결되지 않은 hip')
   polygon.lines.forEach((line, index) => {
     if (!isAlreadyHip(polygon, line)) {
       let prevLine, currentLine, nextLine
@@ -2310,8 +2265,6 @@ const drawHips = (polygon) => {
       let acrossLine = getAcrossLine(polygon, currentLine, dVector)
       let hypotenuse, adjacent
 
-      console.log(acrossLine)
-
       if (getLineDirection(prevLine) === getLineDirection(nextLine)) {
         hypotenuse = Math.round(getRoofHypotenuse(Math.abs(currentLine.x1 - acrossLine.x1) / 2))
       } else {
@@ -2320,11 +2273,8 @@ const drawHips = (polygon) => {
           Math.round(getRoofHypotenuse(Math.abs(currentLine.x1 - acrossLine.x1) / 2)),
         )
       }
-
       adjacent = getAdjacent(hypotenuse)
 
-      console.log('dVector : ', dVector)
-
       switch (dVector) {
         case 45:
           endXPoint = currentLine.x1 + adjacent
@@ -2348,13 +2298,14 @@ const drawHips = (polygon) => {
         fontSize: polygon.fontSize,
         stroke: 'red',
         strokeWidth: 1,
+        name: 'hipLine',
       })
       polygon.canvas.add(hip)
       polygon.hips.push(hip)
       polygon.innerLines.push(hip)
     }
   })
-  // this.canvas.renderAll()
+  console.log('polygon.hips : ', polygon.hips)
 }
 
 const getPointInPolygon = (polygon, point, isInclude = false) => {
@@ -2363,7 +2314,6 @@ const getPointInPolygon = (polygon, point, isInclude = false) => {
     maxX = Math.max(polygon[0].x, polygon[1].x, polygon[2].x, polygon[3].x),
     minY = Math.min(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y),
     maxY = Math.max(polygon[0].y, polygon[1].y, polygon[2].y, polygon[3].y)
-
   if (!isInclude && minX < point.x && point.x < maxX && minY < point.y && point.y < maxY) {
     inside = true
   }
@@ -2462,6 +2412,10 @@ const connectLinePoint = (polygon) => {
     }
   })
 
+  console.log('polygon.ridges : ', polygon.ridges)
+
+  console.log('missedPoints : ', missedPoints)
+
   //추녀마루
   polygon.hips.forEach((hip) => {
     let count = 0
@@ -2585,7 +2539,6 @@ const connectLinePoint = (polygon) => {
   let missedRidge = []
   polygon.ridges.forEach((ridge) => {
     let lineCheck1 = polygon.innerLines.filter((line) => {
-      console.log(!(line.x1 !== ridge.x1 && line.y1 !== ridge.y1 && line.x2 !== ridge.x2 && line.y2 !== ridge.y2))
       if (
         !(line.x1 === ridge.x1 && line.y1 === ridge.y1 && line.x2 === ridge.x2 && line.y2 === ridge.y2) &&
         ((line.x1 === ridge.x1 && line.y1 === ridge.y1) || (line.x2 === ridge.x1 && line.y2 === ridge.y1))
@@ -2629,20 +2582,28 @@ const connectLinePoint = (polygon) => {
           fontSize: polygon.fontSize,
           stroke: 'blue',
           strokeWidth: 1,
+          name: 'ridgeLine',
         })
-        polygon.canvas.remove(ridge)
-        polygon.canvas.remove(ridge2)
-        polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
-        polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
-        polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
-        polygon.innerLines = polygon.innerLines.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+        console.log('newRidge : ', newRidge)
+        if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) {
+          polygon.canvas.remove(ridge)
+          polygon.canvas.remove(ridge2)
+          polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.innerLines = polygon.innerLines.filter(
+            (r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2),
+          )
 
-        polygon.canvas.add(newRidge)
-        polygon.ridges.push(newRidge)
-        polygon.innerLines.push(newRidge)
+          polygon.canvas.add(newRidge)
+          polygon.ridges.push(newRidge)
+          polygon.innerLines.push(newRidge)
+        }
       }
     })
   })
+
+  console.log('polygon : ', polygon)
 }
 
 /*
@@ -2718,6 +2679,318 @@ const getLineDirection = (line) => {
   }
 }
 
+export const changeAllGableRoof = (polygon, offset, canvas) => {
+  const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕
+  const roofLines = roof.lines // 지붕의 라인
+  const ridges = roof.ridges // 마루의 라인
+  const hips = roof.hips // 추녀마루의 라인
+
+  ridges.forEach((ridge) => {
+    let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
+    let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2)
+    let gableLines = []
+    if (ridgeHip1.length > 1) {
+      let x1 = ridgeHip1[0].x1,
+        y1 = ridgeHip1[0].y1,
+        x2 = ridgeHip1[1].x1,
+        y2 = ridgeHip1[1].y1
+      roofLines.filter((roofLine) => {
+        if (
+          (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
+          (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
+        ) {
+          gableLines.push(setGableRoof(polygon, ridge, ridgeHip1[0], ridgeHip1[1], offset, canvas))
+        }
+      })
+    }
+    if (ridgeHip2.length > 1) {
+      let x1 = ridgeHip2[0].x1,
+        y1 = ridgeHip2[0].y1,
+        x2 = ridgeHip2[1].x1,
+        y2 = ridgeHip2[1].y1
+      roofLines.filter((roofLine) => {
+        if (
+          (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
+          (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
+        ) {
+          gableLines.push(setGableRoof(polygon, ridge, ridgeHip2[0], ridgeHip2[1], offset, canvas))
+        }
+      })
+    }
+    gableLines.forEach((gableLine) => {
+      roof.innerLines.push(gableLine)
+    })
+  })
+
+  // splitPolygonWithLines(roof)
+}
+
+const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
+  let x1 = hip1.x1,
+    y1 = hip1.y1
+  let gableLine, diffOffset
+  if (ridge.direction === 'top') {
+    if (ridge.y1 > y1 && ridge.y2 > y1) {
+      offset = Math.abs(ridge.y1 - y1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2 + offset,
+      })
+
+      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 + offset,
+      })
+    }
+    if (ridge.y1 < y1 && ridge.y2 < y1) {
+      offset = Math.abs(ridge.y2 - y1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1 - offset,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 - offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 - offset,
+      })
+    }
+  }
+  if (ridge.direction === 'bottom') {
+    if (ridge.y1 > y1 && ridge.y2 > y1) {
+      offset = Math.abs(ridge.y1 - y1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1 - offset,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 - offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 - offset,
+      })
+    }
+    if (ridge.y1 < y1 && ridge.y2 < y1) {
+      offset = Math.abs(ridge.y2 - y1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2 + offset,
+      })
+
+      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 + offset,
+      })
+    }
+  }
+  if (ridge.direction === 'right') {
+    if (ridge.x1 > x1 && ridge.x2 > x1) {
+      offset = Math.abs(ridge.x1 - x1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1 - offset,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 - offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 - offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+    if (ridge.x1 < x1 && ridge.x2 < x1) {
+      offset = Math.abs(ridge.x2 - x1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2 + offset,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 + offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 + offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+  }
+  if (ridge.direction === 'left') {
+    if (ridge.x1 > x1 && ridge.x2 > x1) {
+      offset = Math.abs(ridge.x1 - x1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2 + offset,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 + offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 + offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+    if (ridge.x1 < x1 && ridge.x2 < x1) {
+      offset = Math.abs(ridge.x2 - x1) - offset
+      offset = offset < 0 ? 0 : offset
+      ridge.set({
+        x1: ridge.x1 - offset,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 - offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 - offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+  }
+  canvas?.renderAll()
+  return gableLine
+}
+
 function arePointsEqual(point1, point2) {
   return point1.x === point2.x && point1.y === point2.y
 }
@@ -2768,3 +3041,314 @@ export const inPolygon = (polygonPoints, rectPoints) => {
 
   return allPointsInsidePolygon && noPolygonPointsInsideRect
 }
+
+/**
+ * poolygon의 방향에 따라 화살표를 추가한다.
+ * @param polygon
+ */
+export const drawDirectionArrow = (polygon) => {
+  const direction = polygon.direction
+  if (!direction) {
+    return
+  }
+
+  polygon.canvas
+    .getObjects()
+    .filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
+    .forEach((obj) => polygon.canvas.remove(obj))
+
+  let arrow = null
+  let points = []
+
+  if (polygon.arrow) {
+    polygon.canvas.remove(polygon.arrow)
+  }
+
+  let centerPoint = { x: polygon.width / 2 + polygon.left, y: polygon.height / 2 + polygon.top }
+  let stickeyPoint
+
+  const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))
+  const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
+  const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
+  const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
+
+  switch (direction) {
+    case 'north':
+      points = [
+        { x: centerPoint.x, y: polygonMinY - 20 },
+        { x: centerPoint.x + 20, y: polygonMinY - 20 },
+        { x: centerPoint.x + 20, y: polygonMinY - 50 },
+        { x: centerPoint.x + 50, y: polygonMinY - 50 },
+        { x: centerPoint.x, y: polygonMinY - 80 },
+        { x: centerPoint.x - 50, y: polygonMinY - 50 },
+        { x: centerPoint.x - 20, y: polygonMinY - 50 },
+        { x: centerPoint.x - 20, y: polygonMinY - 20 },
+      ]
+
+      stickeyPoint = { x: centerPoint.x, y: polygonMinY - 80 }
+      break
+    case 'south':
+      points = [
+        { x: centerPoint.x, y: polygonMaxY + 20 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 20 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 50 },
+        { x: centerPoint.x + 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x, y: polygonMaxY + 80 },
+        { x: centerPoint.x - 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 50 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 20 },
+      ]
+      stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 80 }
+      break
+    case 'west':
+      points = [
+        { x: polygonMinX - 20, y: centerPoint.y },
+        { x: polygonMinX - 20, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y + 50 },
+        { x: polygonMinX - 80, y: centerPoint.y },
+        { x: polygonMinX - 50, y: centerPoint.y - 50 },
+        { x: polygonMinX - 50, y: centerPoint.y - 20 },
+        { x: polygonMinX - 20, y: centerPoint.y - 20 },
+      ]
+
+      stickeyPoint = { x: polygonMinX - 80, y: centerPoint.y }
+      break
+    case 'east':
+      points = [
+        { x: polygonMaxX + 20, y: centerPoint.y },
+        { x: polygonMaxX + 20, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y + 50 },
+        { x: polygonMaxX + 80, y: centerPoint.y },
+        { x: polygonMaxX + 50, y: centerPoint.y - 50 },
+        { x: polygonMaxX + 50, y: centerPoint.y - 20 },
+        { x: polygonMaxX + 20, y: centerPoint.y - 20 },
+      ]
+
+      stickeyPoint = { x: polygonMaxX + 80, y: centerPoint.y }
+      break
+  }
+
+  arrow = new fabric.Polygon(points, {
+    selectable: false,
+    name: 'arrow',
+    fill: 'transparent',
+    stroke: 'black',
+    direction: direction,
+    parent: polygon,
+    stickeyPoint: stickeyPoint,
+  })
+
+  polygon.arrow = arrow
+  polygon.canvas.add(arrow)
+  polygon.canvas.renderAll()
+  drawDirectionStringToArrow(polygon.canvas, 0)
+}
+
+/**
+ * 방향을 나타낸 화살표에 각도에 따라 글씨 추가
+ * @param canvas
+ * @param compass
+ */
+export const drawDirectionStringToArrow = (canvas, compass = 0) => {
+  const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow')
+
+  if (arrows.length === 0) {
+    return
+  }
+
+  const eastArrows = arrows.filter((arrow) => arrow.direction === 'east')
+  const westArrows = arrows.filter((arrow) => arrow.direction === 'west')
+  const northArrows = arrows.filter((arrow) => arrow.direction === 'north')
+  const southArrows = arrows.filter((arrow) => arrow.direction === 'south')
+
+  let southText = '南'
+  let eastText = '東'
+  let westText = '西'
+  let northText = '北'
+
+  if (compass === 0 || compass === 360) {
+    // 남,동,서 가능
+    // 그대로
+  } else if (compass < 45) {
+    //남(남남동),동(동북동),서(서남서) 가능
+    //북(북북서)
+    southText = '南南東'
+    eastText = '東北東'
+    westText = '西南西'
+    northText = '北北西'
+  } else if (compass === 45) {
+    // 남, 서 가능
+    // 남(남동)
+    // 서(남서)
+    // 북(북서)
+    // 동(북동)
+    southText = '南東'
+    westText = '南西'
+    northText = '北西'
+    eastText = '北東'
+  } else if (compass < 90) {
+    // 북(서북서)
+    // 동 (북북동)
+    // 남(동남동)
+    // 서(남남서)
+    northText = '北西北'
+    eastText = '北北東'
+    southText = '東南東'
+    westText = '南南西'
+  } else if (compass === 90) {
+    // 동(북)
+    // 서(남)
+    // 남(동)
+    // 북(서)
+    eastText = '北'
+    westText = '南'
+    southText = '東'
+    northText = '西'
+  } else if (compass < 135) {
+    // 남,서,북 가능
+    // 동(북북서)
+    // 서(남남동)
+    // 남(동북동)
+    // 북(서남서)
+    eastText = '北北西'
+    westText = '南南東'
+    southText = '東北東'
+    northText = '西南西'
+  } else if (compass === 135) {
+    // 서,북 가능
+
+    // 서(남동)
+    // 북(남서)
+    // 남(북동)
+    // 동(북서)
+
+    westText = '南東'
+    northText = '南西'
+    southText = '北東'
+    eastText = '北西'
+  } else if (compass < 180) {
+    // 북,동,서 가능
+    // 북(남남서)
+    // 동(서북서)
+    // 남(북북동)
+    // 서(동남동)
+
+    northText = '南南西'
+    eastText = '西北西'
+    southText = '北北東'
+    westText = '東南東'
+  } else if (compass === 180) {
+    // 북,동,서 가능
+    // 북(남)
+    // 동(서)
+    // 남(북)
+    // 서(동)
+    northText = '南'
+    eastText = '西'
+    southText = '北'
+    westText = '東'
+  } else if (compass < 225) {
+    // 서,북,동 가능
+    // 북(남남동)
+    // 동(서남서)
+    // 남(북북서)
+    // 서(동남동)
+    northText = '南南東'
+    eastText = '西南西'
+    southText = '北北西'
+    westText = '東南東'
+  } else if (compass === 225) {
+    // 북,동 가능
+    // 북(남동)
+    // 동(남서)
+    // 남(북서)
+    // 서(북동)
+    northText = '南東'
+    eastText = '南西'
+    southText = '北西'
+    westText = '北東'
+  } else if (compass < 270) {
+    // 북동남 가능
+    // 북(동남동)
+    // 동(남남서)
+    // 남(서북서)
+    // 서(북북동)
+    northText = '東南東'
+    eastText = '南南西'
+    southText = '西北西'
+    westText = '北北東'
+  } else if (compass === 270) {
+    // 북동남 가능
+    // 북(동)
+    // 동(남)
+    // 남(서)
+    // 서(북)
+    northText = '東'
+    eastText = '南'
+    southText = '西'
+    westText = '北'
+  } else if (compass < 315) {
+    // 북,동,남 가능
+    // 북(동북동)
+    // 동(남남동)
+    // 남(서남서)
+    // 서(북북서)
+    northText = '東北東'
+    eastText = '南南東'
+    southText = '西南西'
+    westText = '北北西'
+  } else if (compass === 315) {
+    // 동,남 가능
+    // 북(북동)
+    // 동(남동)
+    // 남(남서)
+    // 서(북서)
+    northText = '北東'
+    eastText = '南東'
+    southText = '南西'
+    westText = '北西'
+  } else if (compass < 360) {
+    // 남,동,서 가능
+    // 북(북북동)
+    // 동(동남동)
+    // 남(남남서)
+    // 서(서북서)
+    northText = '北北東'
+    eastText = '東南東'
+    southText = '南南西'
+    westText = '西北西'
+  }
+
+  clearDirectionText(canvas)
+
+  addTextByArrows(eastArrows, eastText, canvas)
+  addTextByArrows(westArrows, westText, canvas)
+  addTextByArrows(northArrows, northText, canvas)
+  addTextByArrows(southArrows, southText, canvas)
+}
+
+const clearDirectionText = (canvas) => {
+  const texts = canvas.getObjects().filter((obj) => obj.name === 'directionText')
+  texts.forEach((text) => {
+    canvas.remove(text)
+  })
+}
+
+const addTextByArrows = (arrows, txt, canvas) => {
+  arrows.forEach((arrow, index) => {
+    const text = new fabric.Text(`${txt}${index + 1}`, {
+      fontSize: arrow.parent.fontSize,
+      fill: 'black',
+      originX: 'center',
+      originY: 'center',
+      name: 'directionText',
+      selectable: false,
+      left: arrow.stickeyPoint.x,
+      top: arrow.stickeyPoint.y,
+      parent: arrow,
+    })
+    canvas.add(text)
+  })
+}
diff --git a/src/util/session-util.js b/src/util/session-util.js
new file mode 100644
index 00000000..6f818e43
--- /dev/null
+++ b/src/util/session-util.js
@@ -0,0 +1,12 @@
+import { checkSession } from '@/lib/user'
+import { redirect } from 'next/navigation'
+
+export const initCheck = async () => {
+  const { session } = await checkSession()
+
+  if (!session.isLoggedIn) {
+    redirect('/login')
+  }
+
+  return session
+}
diff --git a/yarn.lock b/yarn.lock
index 48803c01..affc38d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,21 +9,21 @@
 
 "@azure/abort-controller@^1.0.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-1.1.0.tgz#788ee78457a55af8a1ad342acb182383d2119249"
+  resolved "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz"
   integrity sha512-TrRLIoSQVzfAJX9H1JeFjzAoDGcoK1IYX1UImfceTZpsyYfWr09Ss1aHW1y5TrrR3iq6RZLBwJ3E24uwPhwahw==
   dependencies:
     tslib "^2.2.0"
 
 "@azure/abort-controller@^2.0.0":
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-2.1.2.tgz#42fe0ccab23841d9905812c58f1082d27784566d"
+  resolved "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz"
   integrity sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==
   dependencies:
     tslib "^2.6.2"
 
 "@azure/core-auth@^1.3.0", "@azure/core-auth@^1.4.0", "@azure/core-auth@^1.5.0", "@azure/core-auth@^1.7.2":
   version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-auth/-/core-auth-1.7.2.tgz#558b7cb7dd12b00beec07ae5df5907d74df1ebd9"
+  resolved "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.7.2.tgz"
   integrity sha512-Igm/S3fDYmnMq1uKS38Ae1/m37B3zigdlZw+kocwEhh5GjyKjPrXKO2J6rzpC1wAxrNil/jX9BJRqBshyjnF3g==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
@@ -32,7 +32,7 @@
 
 "@azure/core-client@^1.3.0", "@azure/core-client@^1.5.0", "@azure/core-client@^1.9.2":
   version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-client/-/core-client-1.9.2.tgz#6fc69cee2816883ab6c5cdd653ee4f2ff9774f74"
+  resolved "https://registry.npmjs.org/@azure/core-client/-/core-client-1.9.2.tgz"
   integrity sha512-kRdry/rav3fUKHl/aDLd/pDLcB+4pOFwPPTVEExuMyaI5r+JBbMWqRbCY1pn5BniDaU3lRxO9eaQ1AmSMehl/w==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
@@ -45,7 +45,7 @@
 
 "@azure/core-http-compat@^2.0.1":
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-http-compat/-/core-http-compat-2.1.2.tgz#d1585ada24ba750dc161d816169b33b35f762f0d"
+  resolved "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.1.2.tgz"
   integrity sha512-5MnV1yqzZwgNLLjlizsU3QqOeQChkIXw781Fwh1xdAqJR5AA32IUaq6xv1BICJvfbHoa+JYcaij2HFkhLbNTJQ==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
@@ -54,7 +54,7 @@
 
 "@azure/core-lro@^2.2.0":
   version "2.7.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-lro/-/core-lro-2.7.2.tgz#787105027a20e45c77651a98b01a4d3b01b75a08"
+  resolved "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz"
   integrity sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
@@ -64,14 +64,14 @@
 
 "@azure/core-paging@^1.1.1":
   version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-paging/-/core-paging-1.6.2.tgz#40d3860dc2df7f291d66350b2cfd9171526433e7"
+  resolved "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz"
   integrity sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==
   dependencies:
     tslib "^2.6.2"
 
 "@azure/core-rest-pipeline@^1.1.0", "@azure/core-rest-pipeline@^1.3.0", "@azure/core-rest-pipeline@^1.8.1", "@azure/core-rest-pipeline@^1.9.1":
   version "1.16.3"
-  resolved "https://registry.yarnpkg.com/@azure/core-rest-pipeline/-/core-rest-pipeline-1.16.3.tgz#bde3bc3ebad7f885ddd9de6af5e5a8fc254b287e"
+  resolved "https://registry.npmjs.org/@azure/core-rest-pipeline/-/core-rest-pipeline-1.16.3.tgz"
   integrity sha512-VxLk4AHLyqcHsfKe4MZ6IQ+D+ShuByy+RfStKfSjxJoL3WBWq17VNmrz8aT8etKzqc2nAeIyLxScjpzsS4fz8w==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
@@ -85,14 +85,14 @@
 
 "@azure/core-tracing@^1.0.0", "@azure/core-tracing@^1.0.1":
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-tracing/-/core-tracing-1.1.2.tgz#065dab4e093fb61899988a1cdbc827d9ad90b4ee"
+  resolved "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.1.2.tgz"
   integrity sha512-dawW9ifvWAWmUm9/h+/UQ2jrdvjCJ7VJEuCJ6XVNudzcOwm53BFZH4Q845vjfgoUAM8ZxokvVNxNxAITc502YA==
   dependencies:
     tslib "^2.6.2"
 
 "@azure/core-util@^1.0.0", "@azure/core-util@^1.1.0", "@azure/core-util@^1.2.0", "@azure/core-util@^1.3.0", "@azure/core-util@^1.6.1", "@azure/core-util@^1.9.0":
   version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-util/-/core-util-1.9.2.tgz#1dc37dc5b0dae34c578be62cf98905ba7c0cafe7"
+  resolved "https://registry.npmjs.org/@azure/core-util/-/core-util-1.9.2.tgz"
   integrity sha512-l1Qrqhi4x1aekkV+OlcqsJa4AnAkj5p0JV8omgwjaV9OAbP41lvrMvs+CptfetKkeEaGRGSzby7sjPZEX7+kkQ==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
@@ -100,7 +100,7 @@
 
 "@azure/identity@^4.2.1":
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@azure/identity/-/identity-4.4.1.tgz#490fa2ad26786229afa36411892bb53dfa3478d3"
+  resolved "https://registry.npmjs.org/@azure/identity/-/identity-4.4.1.tgz"
   integrity sha512-DwnG4cKFEM7S3T+9u05NstXU/HN0dk45kPOinUyNKsn5VWwpXd9sbPKEg6kgJzGbm1lMuhx9o31PVbCtM5sfBA==
   dependencies:
     "@azure/abort-controller" "^1.0.0"
@@ -120,7 +120,7 @@
 
 "@azure/keyvault-keys@^4.4.0":
   version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@azure/keyvault-keys/-/keyvault-keys-4.8.0.tgz#1513b3a187bb3a9a372b5980c593962fb793b2ad"
+  resolved "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.8.0.tgz"
   integrity sha512-jkuYxgkw0aaRfk40OQhFqDIupqblIOIlYESWB6DKCVDxQet1pyv86Tfk9M+5uFM0+mCs6+MUHU+Hxh3joiUn4Q==
   dependencies:
     "@azure/abort-controller" "^1.0.0"
@@ -137,29 +137,29 @@
 
 "@azure/logger@^1.0.0":
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@azure/logger/-/logger-1.1.4.tgz#223cbf2b424dfa66478ce9a4f575f59c6f379768"
+  resolved "https://registry.npmjs.org/@azure/logger/-/logger-1.1.4.tgz"
   integrity sha512-4IXXzcCdLdlXuCG+8UKEwLA1T1NHqUfanhXYHiQTn+6sfWCZXduqbtXDGceg3Ce5QxTGo7EqmbV6Bi+aqKuClQ==
   dependencies:
     tslib "^2.6.2"
 
 "@azure/msal-browser@^3.14.0":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-3.20.0.tgz#12ae45d0d398dac25b2b37710277103539c23994"
-  integrity sha512-ErsxbfCGIwdqD8jipqdxpfAGiUEQS7MWUe39Rjhl0ZVPsb1JEe9bZCe2+0g23HDH6DGyCAtnTNN9scPtievrMQ==
+  version "3.21.0"
+  resolved "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.21.0.tgz"
+  integrity sha512-BAwcFsVvOrYzKuUZHhFuvRykUmQGq6lDxst2qGnjxnpNZc3d/tnVPcmhgvUdeKl28VSE0ltgBzT3HkdpDtz9rg==
   dependencies:
-    "@azure/msal-common" "14.14.0"
+    "@azure/msal-common" "14.14.1"
 
-"@azure/msal-common@14.14.0":
-  version "14.14.0"
-  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-14.14.0.tgz#31a015070d5864ebcf9ebb988fcbc5c5536f22d1"
-  integrity sha512-OxcOk9H1/1fktHh6//VCORgSNJc2dCQObTm6JNmL824Z6iZSO6eFo/Bttxe0hETn9B+cr7gDouTQtsRq3YPuSQ==
+"@azure/msal-common@14.14.1":
+  version "14.14.1"
+  resolved "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.14.1.tgz"
+  integrity sha512-2Q3tqNz/PZLfSr8BvcHZVpRRfSn4MjGSqjj9J+HlBsmbf1Uu4P0WeXnemjTJwwx9KrmplsrN3UkZ/LPOR720rw==
 
 "@azure/msal-node@^2.9.2":
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/@azure/msal-node/-/msal-node-2.12.0.tgz#57ee6b6011a320046d72dc0828fec46278f2ab2c"
-  integrity sha512-jmk5Im5KujRA2AcyCb0awA3buV8niSrwXZs+NBJWIvxOz76RvNlusGIqi43A0h45BPUy93Qb+CPdpJn82NFTIg==
+  version "2.13.0"
+  resolved "https://registry.npmjs.org/@azure/msal-node/-/msal-node-2.13.0.tgz"
+  integrity sha512-DhP97ycs7qlCVzzzWGzJiwAFyFj5okno74E4FUZ61oCLfKh4IxA1kxirqzrWuYZWpBe9HVPL6GA4NvmlEOBN5Q==
   dependencies:
-    "@azure/msal-common" "14.14.0"
+    "@azure/msal-common" "14.14.1"
     jsonwebtoken "^9.0.0"
     uuid "^8.3.0"
 
@@ -172,51 +172,51 @@
 
 "@bedrock-layout/use-forwarded-ref@^1.3.1":
   version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz#e0d25c35af41ccaa36df809a7de8d5ccd9c70d1e"
+  resolved "https://registry.npmjs.org/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz"
   integrity sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw==
   dependencies:
     "@bedrock-layout/use-stateful-ref" "^1.4.1"
 
 "@bedrock-layout/use-stateful-ref@^1.4.1":
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz#c543c61d15885e19506f068618a4d6427a5bf817"
+  resolved "https://registry.npmjs.org/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz"
   integrity sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==
 
 "@floating-ui/core@^1.6.0":
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.5.tgz#102335cac0d22035b04d70ca5ff092d2d1a26f2b"
-  integrity sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA==
+  version "1.6.7"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz"
+  integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==
   dependencies:
-    "@floating-ui/utils" "^0.2.5"
+    "@floating-ui/utils" "^0.2.7"
 
 "@floating-ui/dom@^1.0.0":
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.8.tgz#45e20532b6d8a061b356a4fb336022cf2609754d"
-  integrity sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q==
+  version "1.6.10"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz"
+  integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==
   dependencies:
     "@floating-ui/core" "^1.6.0"
-    "@floating-ui/utils" "^0.2.5"
+    "@floating-ui/utils" "^0.2.7"
 
 "@floating-ui/react-dom@^2.1.1":
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
+  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz"
   integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
 "@floating-ui/react@^0.26.2":
-  version "0.26.20"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.20.tgz#49ae23347666626db8671c2aa2df469bbec7db71"
-  integrity sha512-RixKJJG92fcIsVoqrFr4Onpzh7hlOx4U7NV4aLhMLmtvjZ5oTB/WzXaANYUZATKqXvvW7t9sCxtzejip26N5Ag==
+  version "0.26.22"
+  resolved "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.22.tgz"
+  integrity sha512-LNv4azPt8SpT4WW7Kku5JNVjLk2GcS0bGGjFTAgqOONRFo9r/aaGHHPpdiIuQbB1t8shmWyWqTTUDmZ9fcNshg==
   dependencies:
     "@floating-ui/react-dom" "^2.1.1"
-    "@floating-ui/utils" "^0.2.5"
+    "@floating-ui/utils" "^0.2.7"
     tabbable "^6.0.0"
 
-"@floating-ui/utils@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.5.tgz#105c37d9d9620ce69b7f692a20c821bf1ad2cbf9"
-  integrity sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ==
+"@floating-ui/utils@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz"
+  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
 
 "@formatjs/ecma402-abstract@2.0.0":
   version "2.0.0"
@@ -332,7 +332,7 @@
 
 "@js-joda/core@^5.6.1":
   version "5.6.3"
-  resolved "https://registry.yarnpkg.com/@js-joda/core/-/core-5.6.3.tgz#41ae1c07de1ebe0f6dde1abcbc9700a09b9c6056"
+  resolved "https://registry.npmjs.org/@js-joda/core/-/core-5.6.3.tgz"
   integrity sha512-T1rRxzdqkEXcou0ZprN1q9yDRlvzCPLqmlNt5IIsGBzoEVgLCCYrKEwc84+TvsXuAc95VAZwtWD2zVsKPY4bcA==
 
 "@mapbox/node-pre-gyp@^1.0.0":
@@ -1348,22 +1348,22 @@
 
 "@prisma/client@^5.18.0":
   version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.18.0.tgz#526e4281a448f214c0ff81d65c39243608c98294"
+  resolved "https://registry.npmjs.org/@prisma/client/-/client-5.18.0.tgz"
   integrity sha512-BWivkLh+af1kqC89zCJYkHsRcyWsM8/JHpsDMM76DjP3ZdEquJhXa4IeX+HkWPnwJ5FanxEJFZZDTWiDs/Kvyw==
 
 "@prisma/debug@5.18.0":
   version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-5.18.0.tgz#527799e044d2903a35945e61ac2d8916e4b61ead"
+  resolved "https://registry.npmjs.org/@prisma/debug/-/debug-5.18.0.tgz"
   integrity sha512-f+ZvpTLidSo3LMJxQPVgAxdAjzv5OpzAo/eF8qZqbwvgi2F5cTOI9XCpdRzJYA0iGfajjwjOKKrVq64vkxEfUw==
 
 "@prisma/engines-version@5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169":
   version "5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169"
-  resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169.tgz#203426ebf4ec4e1acce7da4a59ec8f0df92b29e7"
+  resolved "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169.tgz"
   integrity sha512-a/+LpJj8vYU3nmtkg+N3X51ddbt35yYrRe8wqHTJtYQt7l1f8kjIBcCs6sHJvodW/EK5XGvboOiwm47fmNrbgg==
 
 "@prisma/engines@5.18.0":
   version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.18.0.tgz#26ea46e26498be622407cf95663d7fb4c39c895b"
+  resolved "https://registry.npmjs.org/@prisma/engines/-/engines-5.18.0.tgz"
   integrity sha512-ofmpGLeJ2q2P0wa/XaEgTnX/IsLnvSp/gZts0zjgLNdBhfuj2lowOOPmDcfKljLQUXMvAek3lw5T01kHmCG8rg==
   dependencies:
     "@prisma/debug" "5.18.0"
@@ -1373,7 +1373,7 @@
 
 "@prisma/fetch-engine@5.18.0":
   version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@prisma/fetch-engine/-/fetch-engine-5.18.0.tgz#5b343e2b36b27e2713901ddd032ddd6932b3d55f"
+  resolved "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.18.0.tgz"
   integrity sha512-I/3u0x2n31rGaAuBRx2YK4eB7R/1zCuayo2DGwSpGyrJWsZesrV7QVw7ND0/Suxeo/vLkJ5OwuBqHoCxvTHpOg==
   dependencies:
     "@prisma/debug" "5.18.0"
@@ -1382,7 +1382,7 @@
 
 "@prisma/get-platform@5.18.0":
   version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@prisma/get-platform/-/get-platform-5.18.0.tgz#0dc4c82fe9a4971f4519a57cb2dd69d8e0df4b71"
+  resolved "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.18.0.tgz"
   integrity sha512-Tk+m7+uhqcKDgnMnFN0lRiH7Ewea0OEsZZs9pqXa7i3+7svS3FSCqDBCaM9x5fmhhkufiG0BtunJVDka+46DlA==
   dependencies:
     "@prisma/debug" "5.18.0"
@@ -2388,7 +2388,7 @@
   resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
-"@swc/helpers@0.5.5":
+"@swc/helpers@0.5.5", "@swc/helpers@^0.5.0":
   version "0.5.5"
   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz"
   integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
@@ -2396,16 +2396,9 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
-"@swc/helpers@^0.5.0":
-  version "0.5.11"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.11.tgz#5bab8c660a6e23c13b2d23fcd1ee44a2db1b0cb7"
-  integrity sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==
-  dependencies:
-    tslib "^2.4.0"
-
 "@tediousjs/connection-string@^0.5.0":
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@tediousjs/connection-string/-/connection-string-0.5.0.tgz#9b3d858c040aac6bdf5584bf45370cef5b6522b4"
+  resolved "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz"
   integrity sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==
 
 "@tootallnate/once@2":
@@ -2413,1327 +2406,1457 @@
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@turf/along@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/along/-/along-7.0.0.tgz#5a6f5fcc0ed11ea6a64359e8af3e032a3b99e78b"
-  integrity sha512-OyZcvwYwsLxlqC6ksFMNAkZ1fF/0Xfg38v4jx6D9OsaQcIDgvzXnlkuUnS3w11imfulokijkLEFnvJXFZKAzRw==
+"@turf/along@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/along/-/along-7.1.0.tgz"
+  integrity sha512-WLgBZJ/B6CcASF6WL7M+COtHlVP0hBrMbrtKyF7KBlicwRuijJZXDtEQA5oLgr+k1b2HqGN+UqH2A0/E719enQ==
   dependencies:
-    "@turf/bearing" "^7.0.0"
-    "@turf/destination" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/bearing" "^7.1.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/angle@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/angle/-/angle-7.0.0.tgz#88faa9ed89d7b3b29bae391df70016f10fa58a01"
-  integrity sha512-3+Lp/fyJdtoS+zMu4ZGgV1PhXub7fiowvwId6w5fNtUHWaQ2e0fUgWMAv8opVSC9gRnUtOq2QuJZdIGQAL+fkQ==
+"@turf/angle@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/angle/-/angle-7.1.0.tgz"
+  integrity sha512-YMHEV/YrARsWgWoQuXEWrQMsvB8z67nTMw2eiLZ883V7jwkhWQGvCW6W+/mGgsWQdHppjCZNcKryryhD2GRWVA==
   dependencies:
-    "@turf/bearing" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/rhumb-bearing" "^7.0.0"
+    "@turf/bearing" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/rhumb-bearing" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/area@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/area/-/area-7.0.0.tgz#5ed4216a2dc3da92debf66cab60acca540d71512"
-  integrity sha512-Q/P6OGV8dJJs1BiraKFNBjtsMbz7B52mLCtgKh3syzujSREMx52RlsiOBQp8GujFMMiau+Mt25XKbVwtjHVi8Q==
+"@turf/area@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/area/-/area-7.1.0.tgz"
+  integrity sha512-w91FEe02/mQfMPRX2pXua48scFuKJ2dSVMF2XmJ6+BJfFiCPxp95I3+Org8+ZsYv93CDNKbf0oLNEPnuQdgs2g==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/bbox-clip@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/bbox-clip/-/bbox-clip-7.0.0.tgz#95a5bb884b1c2c78f6a6146182741b6812512c9c"
-  integrity sha512-ZSReB14sSQpP5TE6g5SijVFijxMp8pyrM0PgEN1LR9Bm+nj7BmmGzHafV3lyteml2bmlFdQxkbTqcbvlVXS98g==
+"@turf/bbox-clip@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/bbox-clip/-/bbox-clip-7.1.0.tgz"
+  integrity sha512-PhZubKCzF/afwStUzODqOJluiCbCw244lCtVhXA9F+Pgkhvk8KvbFdgpPquOZ45OwuktrchSB28BrBkSBiadHw==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/bbox-polygon@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/bbox-polygon/-/bbox-polygon-7.0.0.tgz#048bb2243b7dc132a9aa55b75394f879c6f2c03d"
-  integrity sha512-RMBADOr0zOhVhTidKXCAx1TLTzgBvZwQKI6KJ1FgoCPH7GMZZnMXGMvOtdQLdsplS4Zs6+NoVtaK2x0+EXdYJQ==
+"@turf/bbox-polygon@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/bbox-polygon/-/bbox-polygon-7.1.0.tgz"
+  integrity sha512-fvZB09ErCZOVlWVDop836hmpKaGUmfXnR9naMhS73A/8nn4M3hELbQtMv2R8gXj7UakXCuxS/i9erdpDFZ2O+g==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/bbox@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-7.0.0.tgz#1f892bb71f429aaa1d746c92d901567d5667f9b2"
-  integrity sha512-IyXG5HAsn6IZLdAtQo7aWYccjU5WsV+uzIzhGaXrh/qTVylSYmRiWgLdiekHZVED9nv9r7D/EJUMOT4zyA6POA==
+"@turf/bbox@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/bbox/-/bbox-7.1.0.tgz"
+  integrity sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/bearing@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/bearing/-/bearing-7.0.0.tgz#6afc052b9a7cd98df3564ea3b3bfac0f8e9c5c4e"
-  integrity sha512-r6eBNqqiC8OtW+xIzu0ZyciAUfM85l2LVN2qpTeEyhnaNmnPw7hDsnqwZcbqoBFSLB66MO+BLH40X5OdaoRmmA==
+"@turf/bearing@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/bearing/-/bearing-7.1.0.tgz"
+  integrity sha512-X5lackrZ6FW+YhgjWxwVFRgWD1j4xm4t5VvE6EE6v/1PVaHQ5OCjf6u1oaLx5LSG+gaHUhjTlAHrn9MYPFaeTA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/bezier-spline@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/bezier-spline/-/bezier-spline-7.0.0.tgz#dd1c8a6a3dacd6592f333e91aef81e9ce94302ea"
-  integrity sha512-1FFVLc+oa5t9S7XWsYImfOVNLWESAJo3ztC4GRlGeAFQBi5z8kSptBaGRLkTn387lZLZ1VQXYRgAfR2mP69/VA==
+"@turf/bezier-spline@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/bezier-spline/-/bezier-spline-7.1.0.tgz"
+  integrity sha512-bhBY70bcVYJEosuW7B/TFtnE5rmPTTpxmJvljhGC0eyM84oNVv7apDBuseb5KdlTOOBIvdD9nIE4qV8lmplp6w==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-clockwise@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-clockwise/-/boolean-clockwise-7.0.0.tgz#27a6d5ab14fadf50ed78d7011631e84d561c90e6"
-  integrity sha512-Tn+ShgMcgIll+TeIAUHW0diPpxCN1PfQ6uZrwUJXzQXfoxlns16NvJByTBWCl+E9UCA+m1QRjHpVOzyf8pSOOQ==
+"@turf/boolean-clockwise@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-7.1.0.tgz"
+  integrity sha512-H5DYno+gHwZx+VaiC8DUBZXZQlxYecdSvqCfCACWi1uMsKvlht/O+xy65hz2P57lk2smlcV+1ETFVxJlEZduYg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-concave@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-concave/-/boolean-concave-7.0.0.tgz#d3a0e396b5c2bdf4dd6aea186ae4b12cd5b9fff7"
-  integrity sha512-ybKMUriBFzqvjJMOM+YPID2h0a7ye1ur95NkXzV+GRDG16W0KOtTcSXz3LFfHIBEXtG1dqRIxPSV2uwTTKwDTQ==
+"@turf/boolean-concave@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-concave/-/boolean-concave-7.1.0.tgz"
+  integrity sha512-IFCN25DI+hvngxIsv4+MPuRJQRl/Lz/xnZgpH82leCn4Jqn5wW7KqKFMz7G4GoKK+93cK5/6ioAxY7hVWBXxJw==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-contains@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-contains/-/boolean-contains-7.0.0.tgz#54bfbcac20d3ef0bfe533a71a5139deac7181950"
-  integrity sha512-1NILJdO5OO1YrD7hYPlpahROkzd1DFA7Lcp7SxL+hTtKTp/a2iZx+K6u2qKMLUlPO1p2zhSbMfvjl1T6s/H8XQ==
+"@turf/boolean-contains@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-7.1.0.tgz"
+  integrity sha512-ldy4j1/RVChYTYjEb4wWaE/JyF1jA87WpsB4eVLic6OcAYJGs7POF1kfKbcdkJJiRBmhI3CXNA+u+m9y4Z/j3g==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/boolean-point-on-line" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/boolean-point-on-line" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-crosses@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-crosses/-/boolean-crosses-7.0.0.tgz#119b80d5dc2540b1f27fedac91db753cfbcd3e13"
-  integrity sha512-T8/U3fXvEaaf7NbRf42s7hnOYUarK7K1ztXOan0hESnWVzMRFwzIv9QeSW4mARAPU/oV1oOMhSITfbF/Et6W1A==
+"@turf/boolean-crosses@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-crosses/-/boolean-crosses-7.1.0.tgz"
+  integrity sha512-LK8UM3AENycuGinLCDaL0QSznGMnD0XsjFDGnY4KehshiL5Zd8ZsPyKmHOPygUJT9DWeH69iLx459lOc+5Vj2w==
   dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
-    "@turf/polygon-to-line" "^7.0.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@turf/polygon-to-line" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-disjoint@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-disjoint/-/boolean-disjoint-7.0.0.tgz#254ae7ce8f90ff38764104150c6f86748ab35144"
-  integrity sha512-MAHKqMtdktgxFnz9XFrzyN+VTtmNSd+PgRyo/CT9ucsZ18hd3PV9Y3obGw/k0T6AglMivhBadlHiSMnTfed4Qg==
+"@turf/boolean-disjoint@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-disjoint/-/boolean-disjoint-7.1.0.tgz"
+  integrity sha512-JapOG03kOCoGeYMWgTQjEifhr1nUoK4Os2cX0iC5X9kvZF4qCHeruX8/rffBQDx7PDKQKusSTXq8B1ISFi0hOw==
   dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/polygon-to-line" "^7.0.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/polygon-to-line" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-equal@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-equal/-/boolean-equal-7.0.0.tgz#68ba8b373611eeca4b14c7ea79466544ed06ded9"
-  integrity sha512-9C7xkxOyqN0/8Ze4TrysKWWYZxWB0s6zSBaADuVhaIsFzfwvC5wbEpwOL8pRop++7YRRlJ92QM8Bq53DU8+7LQ==
+"@turf/boolean-equal@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-equal/-/boolean-equal-7.1.0.tgz"
+  integrity sha512-deghtFMApc7fNsdXtZdgYR4gsU+TVfowcv666nrvZbPPsXL6NTYGBhDFmYXsJ8gPTCGT9uT0WXppdgT8diWOxA==
   dependencies:
-    "@turf/clean-coords" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/clean-coords" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    geojson-equality-ts "^1.0.2"
     tslib "^2.6.2"
 
-"@turf/boolean-intersects@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-intersects/-/boolean-intersects-7.0.0.tgz#5f8a319db633c1f653413f49828615c5559ab949"
-  integrity sha512-+jNZw/ziZ2xyeDoasuwubVu3arRS71i6tSxvnPQmsWISki6rLJF7OQEkc9LNIllYlADCZUkUTJ1OktznrEUDkA==
+"@turf/boolean-intersects@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-7.1.0.tgz"
+  integrity sha512-gpksWbb0RT+Z3nfqRfoACY3KEFyv2BPaxJ3L76PH67DhHZviq3Nfg85KYbpuhS64FSm+9tXe4IaKn6EjbHo20g==
   dependencies:
-    "@turf/boolean-disjoint" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/boolean-disjoint" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-overlap@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-overlap/-/boolean-overlap-7.0.0.tgz#d358b30918abeba8810edff2e13480e14f00d2ae"
-  integrity sha512-mnZxjGSs8OuH/+QUuP5FGkut2bLr1FGZ63ThJ97aUuJP+lZQnYnkPdT1hQIdcyhtTQgF1yOM7EH+O//DkoROpA==
+"@turf/boolean-overlap@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-overlap/-/boolean-overlap-7.1.0.tgz"
+  integrity sha512-mJRN0X8JiPm8eDZk5sLvIrsP03A2GId6ijx4VgSE1AvHwV6qB561KlUbWxga2AScocIfv/y/qd2OCs+/TQSZcg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
-    "@turf/line-overlap" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@turf/line-overlap" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    geojson-equality-ts "^1.0.2"
     tslib "^2.6.2"
 
-"@turf/boolean-parallel@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-parallel/-/boolean-parallel-7.0.0.tgz#bdcbec10bb7703301f7566256125eed7ef437537"
-  integrity sha512-OTL9XLjzRulLPQ12il3my9fLhemHsoyYe/owxNYz+kYtUyDHQ6lRz6vEaI3W7MKY9fnqwuIdJQpckOL5TH2cPQ==
+"@turf/boolean-parallel@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-parallel/-/boolean-parallel-7.1.0.tgz"
+  integrity sha512-tA84Oux0X91CxUc6c/lZph5W9wUZGNT4fxFOg5Gp1IMTSwtxSYL1LMvKsr/VmMnwdOUkNcqAgU06+t4wBLtDfg==
   dependencies:
-    "@turf/clean-coords" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/line-segment" "^7.0.0"
-    "@turf/rhumb-bearing" "^7.0.0"
+    "@turf/clean-coords" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/line-segment" "^7.1.0"
+    "@turf/rhumb-bearing" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-point-in-polygon@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.0.0.tgz#378c0edffd016621ba330d466c56346796307f33"
-  integrity sha512-Z9swETfICqUJ8iVLZimvIOh8r4Wrlu9/X/c/5vIEeVvG4Lu78Ztmgu1KaobZJFC93/ntOAjMBavc9aNgw7TXgQ==
+"@turf/boolean-point-in-polygon@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.1.0.tgz"
+  integrity sha512-mprVsyIQ+ijWTZwbnO4Jhxu94ZW2M2CheqLiRTsGJy0Ooay9v6Av5/Nl3/Gst7ZVXxPqMeMaFYkSzcTc87AKew==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     point-in-polygon-hao "^1.1.0"
     tslib "^2.6.2"
 
-"@turf/boolean-point-on-line@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-point-on-line/-/boolean-point-on-line-7.0.0.tgz#10993b2344c56a4684e4b64877249664f20937b6"
-  integrity sha512-9/1hj2MxcUU4fZu+MQC6rdMsdvAYNTtfxssLrZ1dGXo+NcAoWFbZSrfk62pSJBflveyKY5kXPYY+xQfLT0NeDQ==
+"@turf/boolean-point-on-line@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-7.1.0.tgz"
+  integrity sha512-Kd83EjeTyY4kVMAhcW3Lb8aChwh24BUIhmpE9Or8M+ETNsFGzn9M7qtIySJHLRzKAL3letvWSKXKQPuK1AhAzg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-touches@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-touches/-/boolean-touches-7.0.0.tgz#7f7f7dba36467bb5b6263b1e7fb9ab6e2e721abf"
-  integrity sha512-eZE2uvylkQLAePHTGRjnVlr+QKnwU9gPAarz2q4YF7hi2QRDQd8kc+Ai/450C3xL9iPYO6wrbAQ7qpmB1Jsq4g==
+"@turf/boolean-touches@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-touches/-/boolean-touches-7.1.0.tgz"
+  integrity sha512-qN4LCs3RfVtNAAdn5GpsUFBqoZyAaK9UzSnGSh67GP9sy5M8MEHwM/HAJ5zGWJqQADrczI3U6BRWGLcGfGSz3Q==
   dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/boolean-point-on-line" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/boolean-point-on-line" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/boolean-valid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-valid/-/boolean-valid-7.0.0.tgz#c5182492f6d92ccce67d1a099b64cbad834dce4a"
-  integrity sha512-TM2UBVFu59u8fAZVHsVnnnCv6486J2uCFmhsVsSCgTgTET1+Lm0TK0XTj5cyPSYR35qR/BjcU1gO3l45bdap9A==
+"@turf/boolean-valid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-valid/-/boolean-valid-7.1.0.tgz"
+  integrity sha512-zq1QCfQEyn+piHlvxxDifjmsJn2xl53i4mnKFYdMQI/i09XiX+Fi/MVM3i2hf3D5AsEPsud8Tk7C7rWNCm4nVw==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/boolean-crosses" "^7.0.0"
-    "@turf/boolean-disjoint" "^7.0.0"
-    "@turf/boolean-overlap" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/boolean-point-on-line" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/boolean-crosses" "^7.1.0"
+    "@turf/boolean-disjoint" "^7.1.0"
+    "@turf/boolean-overlap" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/boolean-point-on-line" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     geojson-polygon-self-intersections "^1.2.1"
     tslib "^2.6.2"
 
-"@turf/boolean-within@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/boolean-within/-/boolean-within-7.0.0.tgz#74d34e35bdde6ae3dcb60c25355f4a004fc1eb6f"
-  integrity sha512-QmOX34T7z9wzuzUVsXx3KMCMsxLi71/SOcrgkcHhcWsThx+VPPmyIUtTa8XnBt1BBlx7IIrR2pAeORkUi0CdEg==
+"@turf/boolean-within@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/boolean-within/-/boolean-within-7.1.0.tgz"
+  integrity sha512-pgXgKCzYHssADQ1nClB1Q9aWI/dE1elm2jy3B5X59XdoFXKrKDZA+gCHYOYgp2NGO/txzVfl3UKvnxIj54Fa4w==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/boolean-point-on-line" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/boolean-point-on-line" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/buffer@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/buffer/-/buffer-7.0.0.tgz#de4037cfc6fe4aad19adb98c42dd992e8b57897a"
-  integrity sha512-viw3XjTtYVtkq5DkRDBQjXoi5QeEMhe4JHWXIfHMHs4o5F9B+lZ8+TtXWo18X5aAXknv6ib1z2syoaQdBpb5Xw==
+"@turf/buffer@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/buffer/-/buffer-7.1.0.tgz"
+  integrity sha512-QM3JiCMYA19k5ouO8wJtvICX3Y8XntxVpDfHSKhFFidZcCkMTR2PWWOpwS6EoL3t75rSKw/FOLIPLZGtIu963w==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/center" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/center" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
     "@turf/jsts" "^2.7.1"
-    "@turf/meta" "^7.0.0"
-    "@turf/projection" "^7.0.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/projection" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     d3-geo "1.7.1"
 
-"@turf/center-mean@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/center-mean/-/center-mean-7.0.0.tgz#9ab07409090a688678b7ff68bd810feeb7d851e3"
-  integrity sha512-pneYkH6/4a6gDDvhVL2by9OCJ4yTIANoHQ4JpYVjvB1VlQWrVI5qQd80+q3bMKCDWaACEq8UWa/5NmvKlSRT3A==
+"@turf/center-mean@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/center-mean/-/center-mean-7.1.0.tgz"
+  integrity sha512-NQZB1LUVsyAD+p0+D4huzX2XVnfVx1yEEI9EX602THmi+g+nkge4SK9OMV11ov/Tv8JJ6aVNVPo/cy1vm/LCIQ==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/center-median@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/center-median/-/center-median-7.0.0.tgz#04360a44abc4937854aaeea295343b9ac251e706"
-  integrity sha512-ppCVjwwNe3Rz86TQp+zt9uFI9ZlFwu2miQtpFVcv2ej9IN2D5PUIRnehWgVeQ+yZ+ocMjMNLMcackUnqeKR4FA==
+"@turf/center-median@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/center-median/-/center-median-7.1.0.tgz"
+  integrity sha512-jx4/Ql5+v41Cd0J/gseNCUbLTzWUT2LUaiXn8eFWDrvmEgqHIx7KJcGcJd5HzV+9zJwng4AXxyh5NMvUR0NjwA==
   dependencies:
-    "@turf/center-mean" "^7.0.0"
-    "@turf/centroid" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/center-mean" "^7.1.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/center-of-mass@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/center-of-mass/-/center-of-mass-7.0.0.tgz#211628beddd329f16f5d9ba6a20bcf952848eac8"
-  integrity sha512-vnD43bX4jl1ViDjY+nxISeQd8vfPqvLw+0N1MxpweCh5S85DNqUg6J8GXC1kbZlfOBS3mS9p2CW1Rfg4ggiGHw==
+"@turf/center-of-mass@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/center-of-mass/-/center-of-mass-7.1.0.tgz"
+  integrity sha512-j38oBlj7LBoCjZbrIo8EoHVGhk7UQmMLQ1fe8ZPAF9pd05XEL1qxyHKZKdQ/deGISiaEhXCyfLNrKAHAuy25RA==
   dependencies:
-    "@turf/centroid" "^7.0.0"
-    "@turf/convex" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/convex" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/center@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/center/-/center-7.0.0.tgz#b804e7a7e26546475509f732f34350e40f620b35"
-  integrity sha512-5RZia9uuWxz2oCyd1vsNkBeraBNdwCsIo4UGRQdyswBeLFVbRwIUa7M7+2z2D7B1YIgovuLIRVfk6FeWUQXDtQ==
+"@turf/center@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/center/-/center-7.1.0.tgz"
+  integrity sha512-p9AvBMwNZmRg65kU27cGKHAUQnEcdz8Y7f/i5DvaMfm4e8zmawr+hzPKXaUpUfiTyLs8Xt2W9vlOmNGyH+6X3w==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/centroid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/centroid/-/centroid-7.0.0.tgz#bbef6155c66b7c9bafbe8daa8ad909b1b3c7c8b2"
-  integrity sha512-TMKp5yadglNVRxX3xuk1qQDEy5JFHmlYVBamzXuD8DL8rYdVog2x4gQHrwn7xrUyAlKJ4fUZZPkYBWfW6TDWbw==
+"@turf/centroid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/centroid/-/centroid-7.1.0.tgz"
+  integrity sha512-1Y1b2l+ZB1CZ+ITjUCsGqC4/tSjwm/R4OUfDztVqyyCq/VvezkLmTNqvXTGXgfP0GXkpv68iCfxF5M7QdM5pJQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/circle@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/circle/-/circle-7.0.0.tgz#4b5a68c7bb6f342147032ae19fbb9fee359706c5"
-  integrity sha512-rRMthTL5+mhiFXQwlk4jUuf0pkqDAhry/El03VNYNyDGOx4N6p0XMmgbIdJmG6ZooinHpHfMU4N8ZQ9Xo6vVPA==
+"@turf/circle@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/circle/-/circle-7.1.0.tgz"
+  integrity sha512-6qhF1drjwH0Dg3ZB9om1JkWTJfAqBcbtIrAj5UPlrAeHP87hGoCO2ZEsFEAL9Q18vntpivT89Uho/nqQUjJhYw==
   dependencies:
-    "@turf/destination" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/clean-coords@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/clean-coords/-/clean-coords-7.0.0.tgz#fb9bc1988f84d0dfd8271fd4bbc83d743958cb2b"
-  integrity sha512-kaKR4/NnhZpgC+hWY3MfPqV2KwzG4Vr66WH59GbT5B2tvAOJqAYUmq+rgyMsG6xA3fTBL3neDW0bY1DHFVcvHQ==
+"@turf/clean-coords@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/clean-coords/-/clean-coords-7.1.0.tgz"
+  integrity sha512-q1U8UbRVL5cRdwOlNjD8mad8pWjFGe0s4ihg1pSiVNq7i47WASJ3k20yZiUFvuAkyNjV0rZ/A7Jd7WzjcierFg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/clone@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/clone/-/clone-7.0.0.tgz#e7bd51047f92182e5fcfbfe08b89c68bd2e61d4c"
-  integrity sha512-bQBx/wbQoGNtZzuHetLt44NMqOCnjSXcvTWm+LJ7YTmwrqZVAjISDhFxgawY/L+G3p+ya5WoxQwZWak80uYg3A==
+"@turf/clone@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/clone/-/clone-7.1.0.tgz"
+  integrity sha512-5R9qeWvL7FDdBIbEemd0eCzOStr09oburDvJ1hRiPCFX6rPgzcZBQ0gDmZzoF4AFcNLb5IwknbLZjVLaUGWtFA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/clusters-dbscan@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/clusters-dbscan/-/clusters-dbscan-7.0.0.tgz#4fe2ee3c712f4fb2d5b9d1d771f5360ee9c6fb14"
-  integrity sha512-q8P7MjD0jGhNOzE+I6Cj8UiVaqkuDV27nGA8fLZWNxLW27+X2QJzU+NFLkx0suV9ApmCWRiaIyWUHWG9uZntxA==
+"@turf/clusters-dbscan@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/clusters-dbscan/-/clusters-dbscan-7.1.0.tgz"
+  integrity sha512-BmrBTOEaKN5FIED6b3yb3V3ejfK0A2Q3pT9/ji3mcRLJiBaRGeiN5V6gtGXe7PeMYdoqhHykU5Ye2uUtREWRdQ==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     rbush "^3.0.1"
     tslib "^2.6.2"
 
-"@turf/clusters-kmeans@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/clusters-kmeans/-/clusters-kmeans-7.0.0.tgz#a1a70b930a83f7aa29be7608192e8fe4a7530f35"
-  integrity sha512-ZwN4sLcTgeD7meryarJZunLXISHM7ZLc0S7Lgwv64fYsYU2ea64BMst5mRFCZsrrlFdYmrwUo4DlihL8k9XLKw==
+"@turf/clusters-kmeans@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/clusters-kmeans/-/clusters-kmeans-7.1.0.tgz"
+  integrity sha512-M8cCqR6iE1jDSUF/UU9QdPUFrobZS2fo59TfF1IRHZ2G1EjbcK4GzZcUfmQS6DZraGudYutpMYIuNdm1dPMqdQ==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     skmeans "0.9.7"
     tslib "^2.6.2"
 
-"@turf/clusters@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/clusters/-/clusters-7.0.0.tgz#7d0dba859bc3cb30b344d595143cabc9302f8e77"
-  integrity sha512-s96uAedbT+9JX6Cg11TsjyZRZIOYABBplA7vKlFgfEKitscCRFUP+pVgiRXy8wBgyKsXqG28DJr96kXQaJKSeg==
+"@turf/clusters@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/clusters/-/clusters-7.1.0.tgz"
+  integrity sha512-7CY3Ai+5V6q2O9/IgqLpJQrmrTy7aUJjTW1iRan8Tz3WixvxyJHeS3iyRy8Oc0046chQIaHLtyTgKVt2QdsPSA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/collect@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/collect/-/collect-7.0.0.tgz#3a1cfa9706a817fe3514a0e748afff9142209b93"
-  integrity sha512-zgKPVVmNr/5OJiHLnQAzDCMv1xDxwuNw8PfCPYkek8s2dvr9LFlEMfPxnp9hY+/oHJx8+1mC01c9qgb7hF8yPQ==
+"@turf/collect@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/collect/-/collect-7.1.0.tgz"
+  integrity sha512-6indMWLiKeBh4AsioNeFeFnO0k9U5CBsWAFEje6tOEFI4c+P7LF9mNA9z91H8KkrhegR9XNO5Vm2rmdY63aYXw==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     rbush "^3.0.1"
     tslib "^2.6.2"
 
-"@turf/combine@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/combine/-/combine-7.0.0.tgz#89aca004106fe3f7f035d5137aed929de88ceea9"
-  integrity sha512-xNg6XGAwEWmpjYImJ3+vie+ASKQ7dzUrwUDJ5DOOS8XonLkVAIGus+qDoXdIzAcb9jqSaSFC4sGmQFdTM1Sj1w==
+"@turf/combine@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/combine/-/combine-7.1.0.tgz"
+  integrity sha512-Xl7bGKKjgzIq2T/IemS6qnIykyuxU6cMxKtz+qLeWJGoNww/BllwxXePSV+dWRPXZTFFj96KIhBXAW0aUjAQKQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/concave@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/concave/-/concave-7.0.0.tgz#7c863e1ac197b21d331be41d75dbe7ab7ba46690"
-  integrity sha512-iwrLBgCUgsquvLSCnzppPVDWGLoCjVDV9xgg7jncbi9aURuGPfhHd5eaC9fyxtIlSbcfrSDXSHJLoeC6bpmlOw==
+"@turf/concave@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/concave/-/concave-7.1.0.tgz"
+  integrity sha512-aSid53gYRee4Tjc4pfeI3KI+RoBUnL/hRMilxIPduagTgZZS+cvvk01OQWBKm5UTVfHRGuy0XIqnK8y9RFinDQ==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/tin" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/tin" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     topojson-client "3.x"
     topojson-server "3.x"
     tslib "^2.6.2"
 
-"@turf/convex@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/convex/-/convex-7.0.0.tgz#0251c7801d606dac05380240750e7102396fddf8"
-  integrity sha512-iAAwC1FPB4aiA7djUU/pk7lMgWjACbQOB2oX6cH39P5M7W6GXhrTEvYAx+thBtNq+M6BPk/gk3bU1BjZFrQ4+g==
+"@turf/convex@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/convex/-/convex-7.1.0.tgz"
+  integrity sha512-w9fUMZYE36bLrEWEj7L7aVMCB7NBtr2o8G+avRvUIwF4DPqbtcjlcZE9EEBfq44uYdn+/Pke6Iq42T/zyD/cpg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     concaveman "^1.2.1"
     tslib "^2.6.2"
 
-"@turf/destination@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/destination/-/destination-7.0.0.tgz#8ab9eecfc95363ef64761a5241a51c80f8f8ae0d"
-  integrity sha512-wXfLd37ul7xuFvv4L7dtNQOZnmYepnrsMZrxbmxvy2SCnF+Rzf1C7D1NQ6+Nx5SInB/SbTfi6SCDgyfB8MOawQ==
+"@turf/destination@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/destination/-/destination-7.1.0.tgz"
+  integrity sha512-97XuvB0iaAiMg86hrnZ529WwP44TQAA9mmI5PMlchACiA4LFrEtWjjDzvO6234coieoqhrw6dZYcJvd5O2PwrQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/difference@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/difference/-/difference-7.0.0.tgz#d68464fce33585a93ae36519a6b84304016b6eaf"
-  integrity sha512-JCPRuGcOkT+Hq5PJcEUhkCheTyJcwB5dS1SIJGhDDNOJp8m8REHFJCmvxA3K40demovbyDLk85AojYpJ3jlALQ==
+"@turf/difference@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/difference/-/difference-7.1.0.tgz"
+  integrity sha512-+JVzdskICQ8ULKQ9CpWUM5kBvoXxN4CO78Ez/Ki3/7NXl7+HM/nb12B0OyM8hkJchpb8TsOi0YwyJiKMqEpTBA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     polygon-clipping "^0.15.3"
     tslib "^2.6.2"
 
-"@turf/dissolve@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/dissolve/-/dissolve-7.0.0.tgz#0d992cf1fec68727459bf28cecd325973724ad91"
-  integrity sha512-WUapSrl4nTpKGQ9uacfefPNI8mEl0PYrCN6vDTs2W4k6UT9NdeJYNPaR6275nAoOUEL9t9K+adPgdMltm/EG3g==
+"@turf/dissolve@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/dissolve/-/dissolve-7.1.0.tgz"
+  integrity sha512-fyOnCSYVUZ8SF9kt9ROnQYlkJTE0hpWSoWwbMZQCAR7oVZVPiuPq7eIbzTP+k5jzEAnofsqoGs5qVDTjHcWMiw==
   dependencies:
-    "@turf/flatten" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/flatten" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     polygon-clipping "^0.15.3"
     tslib "^2.6.2"
 
-"@turf/distance-weight@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/distance-weight/-/distance-weight-7.0.0.tgz#3a055ba06114434049d062f0074a6fa0fb352006"
-  integrity sha512-BFftfC1QdtcJNMx4TOYxkHX/xsy4FjiG4tdEgdx99DBZ4L1RS/qqgC1O943WuqbfvJTn15E6ka0Rkep2/90IMA==
+"@turf/distance-weight@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/distance-weight/-/distance-weight-7.1.0.tgz"
+  integrity sha512-8m6s4y8Yyt6r3itf44yAJjXC+62UkrkhOpskIfaE0lHcBcvZz9wjboHoBf3bS4l/42E4StcanbFZdjOpODAdZw==
   dependencies:
-    "@turf/centroid" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/distance@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/distance/-/distance-7.0.0.tgz#e2e1fdfd1b577dbb1a6dd05ab15efaa3d494508c"
-  integrity sha512-DBPKhHABpPZ0KRduRpEaoi8MB6r1DVuyyps68VFH2Qi5H0ZnFtJFj7nQxBPZR3bVpbUq4zzu7I+MiNAd3ujFWQ==
+"@turf/distance@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/distance/-/distance-7.1.0.tgz"
+  integrity sha512-hhNHhxCHB3ddzAGCNY4BtE29OZh+DAJPvUapQz+wOjISnlwvMcwLKvslgHWSYF536QDVe/93FEU2q67+CsZTPA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/ellipse@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/ellipse/-/ellipse-7.0.0.tgz#443f86131edbe48118fa041234be6a60b37630c2"
-  integrity sha512-bdHzKPfxIWVz3p7jlsyi89BAxvjIhxCgLzDXKYp4tSf2LYGpkfWpSJA2bRnj7TuEq5zYQR8L5LJhn7jg0hehlg==
+"@turf/ellipse@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/ellipse/-/ellipse-7.1.0.tgz"
+  integrity sha512-AfOahUmStDExWGPg8ZWxxkgom+fdJs7Mn9DzZH+fV/uZ+je1bLQpbPCUu9/ev6u/HhbYGl4VAL/CeQzjOyy6LQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/rhumb-destination" "^7.0.0"
-    "@turf/transform-rotate" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/rhumb-destination" "^7.1.0"
+    "@turf/transform-rotate" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/envelope@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/envelope/-/envelope-7.0.0.tgz#5d6e889417bb0dd676388bc7d6a96bf88af435db"
-  integrity sha512-110YN+9PmhRYE7co+4ewB/IY3SL9q90mw5FoXrv97VRYVlf8jQCa2mwSalMiuAGnhvfG+Yq1k+ibjjLJcS3gWA==
+"@turf/envelope@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/envelope/-/envelope-7.1.0.tgz"
+  integrity sha512-WeLQse9wuxsxhzSqrJA6Ha7rLWnLKgdKY9cfxmJKHSpgqcJyNk60m7+T3UpI/nkGwpfbpeyB3EGC1EWPbxiDUg==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/bbox-polygon" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/bbox-polygon" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/explode@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/explode/-/explode-7.0.0.tgz#1afc5b45c7b99bc2a65886d21a59d31d21ca8141"
-  integrity sha512-q7KZ/PxY9zHN4UGXaADUpsHGkj8lbexVZxdBnp0nEfTHm/ziLTAfpI15CdAknoz4Ee8k8tx7ldosVjjg7YJ3/g==
+"@turf/explode@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/explode/-/explode-7.1.0.tgz"
+  integrity sha512-To+GUbU6HtcHZ8S0w/dw1EbdQIOCXALTr6Ug5/IFg8hIBMJelDpVr3Smwy8uqhDRFinY2eprBwQnDPcd10eCqA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/flatten@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/flatten/-/flatten-7.0.0.tgz#3bc17e26be4908b2feff79b168df045cf2703326"
-  integrity sha512-QVTPgE9PdulQiQPglQ+mXpThBfp3v5RhCSupBCAoqOkqo/KfnliHqJXmVTaZotUZnMgc3wbAMJtSJvDRhTnFFA==
+"@turf/flatten@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/flatten/-/flatten-7.1.0.tgz"
+  integrity sha512-Kb23pqEarcLsdBqnQcK0qTrSMiWNTVb9tOFrNlZc66DIhDLAdpOKG4eqk00CMoUzWTixlnawDgJRqcStRrR4WA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/flip@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/flip/-/flip-7.0.0.tgz#fbad5239e93b13ac8d4446e9786e09a32822a791"
-  integrity sha512-8yqhjXhqKF9fqN4ZfLgVNKCX0AVDaOY9KzD3AGQ+UiRHgmnY/F/T8Np9hSgEVQl1E9N6GXWF/7d8fOTVKCFCbQ==
+"@turf/flip@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/flip/-/flip-7.1.0.tgz"
+  integrity sha512-vac73W8WblzzNFanzWYLBzWDIcqc5xczOrtEO07RDEiKEI3Heo0471Jed3v9W506uuOX6/HAiCjXbRjTLjiLfw==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/geojson-rbush@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/geojson-rbush/-/geojson-rbush-7.0.0.tgz#090229d06b95b0fcc0d21a7d8a2a941aaf9ba266"
-  integrity sha512-h0fJPWHkpGEHkVvQ/tv4FwYkWuEbhbSF0rrQEUyXwvZtlZPRBYJ7WQ5qRsvE7QdQK81B7jWxZiM/qWeayALu1g==
+"@turf/geojson-rbush@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/geojson-rbush/-/geojson-rbush-7.1.0.tgz"
+  integrity sha512-j1C7Ohlxa1z644bNOpgibcFGaDLgLXGLOzwF1tfQaP5y7E4PJQUXL0DWIgNb3Ke7gZC05LPHM25a5TRReUfFBQ==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@types/geojson" "7946.0.8"
+    "@turf/bbox" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     rbush "^3.0.1"
 
-"@turf/great-circle@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/great-circle/-/great-circle-7.0.0.tgz#298424c41616ded05d319e7d89bcff51248737a8"
-  integrity sha512-onZYQ4ZiN2sIff8j648k+eaeavC+W2wG9L+7wSZjWgeaM4t40r3ZhcJLwqmMUSHxccACNlnINukQodulsflFDg==
+"@turf/great-circle@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/great-circle/-/great-circle-7.1.0.tgz"
+  integrity sha512-92q5fqUp5oW+FYekUIrUVR5PZBWbOV6NHKHPIiNahiPvtkpZItbbjoO+tGn5+2i8mxZP9FGOthayJe4V0a1xkg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
 
-"@turf/helpers@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-7.0.0.tgz#22dc2335e8b82db2a21b8c873ea10b3fb3dc5158"
-  integrity sha512-vwZvxRuyjGpGXvhXSbT9mX6FK92dBMLWbMbDJ/MXQUPx17ReVPFc+6N6IcxAzZfkiCnqy7vpuq0c+/TTrQxIiA==
+"@turf/helpers@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz"
+  integrity sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==
   dependencies:
-    deep-equal "^2.2.3"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/hex-grid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/hex-grid/-/hex-grid-7.0.0.tgz#1d99795759111188794023a9b183faece0d50e88"
-  integrity sha512-6vWO/eVyCvk9mUOj7wxCRUSFpZ0Rlqo4fLvAWX+WsNlOn7xnYs8TFXyiVuWcJdWiMX/LzjOF2OTI6HXF3BhEAQ==
+"@turf/hex-grid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/hex-grid/-/hex-grid-7.1.0.tgz"
+  integrity sha512-I+Apx0smOPkMzaS5HHL44YOxSkSUvrz+wtSIETsDFWWLT2xKNkaaEcYU5MkgSoEfQsj082M7EkOIIpocXlA3kg==
   dependencies:
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/intersect" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/intersect" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/interpolate@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/interpolate/-/interpolate-7.0.0.tgz#70cfd77fc1c4561c2e7defd8b63c07450511ffe0"
-  integrity sha512-ERorrpqItp/qrVtkCkFhB0i4fgjb27cCObTucWdSVUMEitH2ieEQzysmghtyq2F6zq1DW3tC33Jjr79IDj+X6A==
+"@turf/interpolate@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/interpolate/-/interpolate-7.1.0.tgz"
+  integrity sha512-VWec1OW9gHZLPS3yYkUXAHKMGQuYO4aqh8WCltT7Ym4efrKqkSOE5T+mBqO68QgcL8nY4kiNa8lxwXd0SfXDSA==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/centroid" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/hex-grid" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/point-grid" "^7.0.0"
-    "@turf/square-grid" "^7.0.0"
-    "@turf/triangle-grid" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/hex-grid" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/point-grid" "^7.1.0"
+    "@turf/square-grid" "^7.1.0"
+    "@turf/triangle-grid" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
 
-"@turf/intersect@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/intersect/-/intersect-7.0.0.tgz#0f623e63e190c371b6edec7f959c48c716638972"
-  integrity sha512-2GL9yAPwmzkec5UiuPbVdLpPVsJIRVl8obPu4oMzhOMKVqw3UGsFGCjWNOY2cKg2cN8E7ijfAEoFNztLyNPY+g==
+"@turf/intersect@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/intersect/-/intersect-7.1.0.tgz"
+  integrity sha512-T0VhI6yhptX9EoMsuuBETyqV+edyq31SUC8bfuM6kdJ5WwJ0EvUfQoC+3bhMtCOn60lHawrUuGBgW+vCO8KGMg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     polygon-clipping "^0.15.3"
     tslib "^2.6.2"
 
-"@turf/invariant@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-7.0.0.tgz#489334f8fad643ae9e7c08c982df55ac25fdb432"
-  integrity sha512-Kayszfz3W8yJ1/cIA3/aNSzAuw7QgSp+IwsSmhLAfp4DbjV0o6sjxRZXRY2gRstZHqkNHSSEeir8V/icdO8sjA==
+"@turf/invariant@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz"
+  integrity sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/isobands@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/isobands/-/isobands-7.0.0.tgz#0883b1d7a53b7268e5a844c6664bee79150430b8"
-  integrity sha512-2l+FIbywYPCsus8+H6eSyyf3Xsrbe+Zi0NbgpVDScvR9TVu55ta0KMvQdS4aMEtg9ADlQa/C81hZhmYsBtvLug==
+"@turf/isobands@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/isobands/-/isobands-7.1.0.tgz"
+  integrity sha512-iMLTOP/K5C05AttF4N1WeV+KrY4O5VWW/abO0N86XCWh1OeqmIUgqIBKEmhDzttAqC0UK2YrUfj0lI1Ez1fYZQ==
   dependencies:
-    "@turf/area" "^7.0.0"
-    "@turf/bbox" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/explode" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/area" "^7.1.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/explode" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     marchingsquares "^1.3.3"
     tslib "^2.6.2"
 
-"@turf/isolines@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/isolines/-/isolines-7.0.0.tgz#d209620bd6fdab95b483f7b3204c5e7f0d727475"
-  integrity sha512-3LqwbzHnZ19gca5VC08XnHK36iRw2tEKjVtrI87iq6QEN9rR4FYcZOCmkPznYKwMKr44KkZKOlfNq/s72s1t3w==
+"@turf/isolines@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/isolines/-/isolines-7.1.0.tgz"
+  integrity sha512-V6QTHXBT5ZsL3s9ZVBJgHYtz3gCFKqNnQLysNE02LE0fVVqaSao3sFrcpghmdDxf0hBCDK8lZVvyRGO6o32LHQ==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     marchingsquares "^1.3.3"
     tslib "^2.6.2"
 
 "@turf/jsts@^2.7.1":
   version "2.7.1"
-  resolved "https://registry.yarnpkg.com/@turf/jsts/-/jsts-2.7.1.tgz#c039569fcef704bef2bb7367c7ddada5008d9628"
+  resolved "https://registry.npmjs.org/@turf/jsts/-/jsts-2.7.1.tgz"
   integrity sha512-+nwOKme/aUprsxnLSfr2LylV6eL6T1Tuln+4Hl92uwZ8FrmjDRCH5Bi1LJNVfWCiYgk8+5K+t2zDphWNTsIFDA==
   dependencies:
     jsts "2.7.1"
 
-"@turf/kinks@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/kinks/-/kinks-7.0.0.tgz#a7ed00a62cd9d1b835616a14f9f863e00000acc8"
-  integrity sha512-rUzx2G4NSb7f+SMjuBZBakrK4BrS3pfb67vYH8XQA28C9NBRQcZqJBCjXqA079q16GXiDpjCLianQMewtd6ksw==
+"@turf/kinks@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/kinks/-/kinks-7.1.0.tgz"
+  integrity sha512-KKLYUsyJPU17fODwA81mhHzFYGQYocdbk9NxDPCcdRHvxzM8t95lptkGx/2k/9rXBs1DK7NmyzI4m7zDO0DK7g==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/length@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/length/-/length-7.1.0.tgz"
+  integrity sha512-wUJj9WLKEudG1ngNao2ZwD+Dt6UkvWIbubuJ6lR6FndFDL3iezFhNGy0IXS+0xH9kXi2apiTnM9Vk5+i8BTEvQ==
+  dependencies:
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/line-arc@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-arc/-/line-arc-7.1.0.tgz"
+  integrity sha512-9/bM34PozTyJ5FXXPAzl/j0RpcTImgMFJZ0WhH0pZZEZRum6P0rJnENt2E2qI441zeozQ9H6X5DCiJogDmRUEw==
+  dependencies:
+    "@turf/circle" "^7.1.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/line-chunk@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-chunk/-/line-chunk-7.1.0.tgz"
+  integrity sha512-1lIUfqAQvCWAuUNC2ip8UYmM5kDltXOidLPW45Ee1OAIKYGBeFNtjwnxc0mQ40tnfTXclTYLDdOOP9LShspT9w==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@turf/length" "^7.1.0"
+    "@turf/line-slice-along" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+
+"@turf/line-intersect@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.1.0.tgz"
+  integrity sha512-JI3dvOsAoCqd4vUJ134FIzgcC42QpC/tBs+b4OJoxWmwDek3REv4qGaZY6wCg9X4hFSlCKFcnhMIQQZ/n720Qg==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     sweepline-intersections "^1.5.0"
     tslib "^2.6.2"
 
-"@turf/length@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/length/-/length-7.0.0.tgz#d2b3c16d83c0a77f5e5689a85328d9f0dd24bc8d"
-  integrity sha512-B+ABesWLtQc8W310LJ8kmUn//NfpUUhsm4Gwt9ZHNYxBVV+FNolY965F7DYm/tvLMZP9bGMomTlczFWV7O4YIA==
+"@turf/line-offset@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-offset/-/line-offset-7.1.0.tgz"
+  integrity sha512-pz6irzhiQlJurU7DoXada6k3ei7PzY+VpsE/Wotm0D2KEAnoxqum2WK0rqqrhKPHKn+xpUGsHN9W/6K+qtmaHg==
   dependencies:
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+
+"@turf/line-overlap@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-overlap/-/line-overlap-7.1.0.tgz"
+  integrity sha512-BdHuEoFAtqvVw3LkjCdivG035nfuwZuxji2ijst+mkmDnlv7uwSBudJqcDGjU6up2r8P1mXChS4im4xjUz+lwg==
+  dependencies:
+    "@turf/boolean-point-on-line" "^7.1.0"
+    "@turf/geojson-rbush" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-segment" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/nearest-point-on-line" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    fast-deep-equal "^3.1.3"
     tslib "^2.6.2"
 
-"@turf/line-arc@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-arc/-/line-arc-7.0.0.tgz#f4d31aac2f55fb51ecc367df6a47df065f45839e"
-  integrity sha512-kxZJlbQHR5F7toJ7QR+qF4eWX74RydGavCr2/IPOjcFK1mcSkTfyiSli3pciavD4eH3tHx0flTqH2poqTQxtyg==
+"@turf/line-segment@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-segment/-/line-segment-7.1.0.tgz"
+  integrity sha512-9rgIIH6ZzC3IiWxDQtKsq+j6eu8fRinMkJeusfI9HqOTm4vO02Ll4F/FigjOMOO/6X3TJ+Pqe3gS99TUaBINkw==
   dependencies:
-    "@turf/circle" "^7.0.0"
-    "@turf/destination" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/line-chunk@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-chunk/-/line-chunk-7.0.0.tgz#920d639b9354da11d2f2857223b135ac3d10a52d"
-  integrity sha512-oA4GuUSxof3o0JOhNyS+CdzpqJ0VFro8RlGkTtymMhEMly4T7xjbMdffIrJ9o8hpnNKdwkJs4bcB98UD8sSPeA==
+"@turf/line-slice-along@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-slice-along/-/line-slice-along-7.1.0.tgz"
+  integrity sha512-UwfnFORZnu4xdnuRXiQM3ODa8f9Q0FBjQF/XHNsPEI/xxmnwgQj3MZiULbAeHUbtU/7psTC7gEjfE3Lf0tcKQw==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/length" "^7.0.0"
-    "@turf/line-slice-along" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/bearing" "^7.1.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
 
-"@turf/line-intersect@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-intersect/-/line-intersect-7.0.0.tgz#d76c5521b8c15973772dea1e3e51b71d30eb0ecd"
-  integrity sha512-vxCwzxCbTyKXO3GsEFQ8hyH1nLQShBhvFobRM2bLrbBlP2fWY9LDGixBcmWuOwV/G/wpQJxAjBJ6IYHjKIJqyA==
+"@turf/line-slice@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-slice/-/line-slice-7.1.0.tgz"
+  integrity sha512-44xcjgMQxTa7tTAZlSD3t1cFjHi5SCfAqjg1ONv45EYKsQSonPaxD7LGzCbU5pR2RJjx3R7QRJx2G88hnGcXjQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    sweepline-intersections "^1.5.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/nearest-point-on-line" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+
+"@turf/line-split@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-split/-/line-split-7.1.0.tgz"
+  integrity sha512-QqUAmtlrnEu75cpLOmpEuiYU63BeVwpSKOBllBbu5gkP+7H/WBM/9fh7J0VgHNFHzqZCKiu8v4158k+CZr0QAg==
+  dependencies:
+    "@turf/bbox" "^7.1.0"
+    "@turf/geojson-rbush" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@turf/line-segment" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/nearest-point-on-line" "^7.1.0"
+    "@turf/square" "^7.1.0"
+    "@turf/truncate" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+
+"@turf/line-to-polygon@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/line-to-polygon/-/line-to-polygon-7.1.0.tgz"
+  integrity sha512-n/IWBRbo+l4XDTz4sfQsQm5bU9xex8KrthK397jQasd7a9PiOKGon9Z1t/lddTJhND6ajVyJ3hl+eZMtpQaghQ==
+  dependencies:
+    "@turf/bbox" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/line-offset@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-offset/-/line-offset-7.0.0.tgz#d2e1986e5fa9531b69281a297ff928745ea95b36"
-  integrity sha512-ZQHAuR2y0ktG8uYAbaxGsJh931oCBwrxzOjiRtOcMifc/Hty37WFVaE9rCDrYrMLut7Ye9JQ36c6DMOljOLkMA==
+"@turf/mask@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/mask/-/mask-7.1.0.tgz"
+  integrity sha512-d+u3IIiRhe17TDfP/+UMn9qRlJYPJpK7sj6WorsssluGi0yIG/Z24uWpcLskWKSI8NNgkIbDrp+GIYkJi2t7SA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-
-"@turf/line-overlap@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-overlap/-/line-overlap-7.0.0.tgz#8107a8d5c0ee6c409643696c0e8ae835168ea805"
-  integrity sha512-yYjT0Qe2WIvf3InuSzobmEkD4XguoimdzXt23eHFF/RKNubAwwdFDeLbmyA7fNZFGrMLNEl/zYvgBVXiQ7tihg==
-  dependencies:
-    "@turf/boolean-point-on-line" "^7.0.0"
-    "@turf/geojson-rbush" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-segment" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/nearest-point-on-line" "^7.0.0"
-    deep-equal "^2.2.3"
-    tslib "^2.6.2"
-
-"@turf/line-segment@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-segment/-/line-segment-7.0.0.tgz#a47ce4b22972a3aa8398859c34f7eac6638a69d9"
-  integrity sha512-Fn8IPEMGQyDAJjjrEOrF0VUCdRosjdvd9x38gq73Qg5oSsZ4p9DdMdgydK27XL74/ivM4+CtDqQkHcj5Aec/yw==
-  dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    tslib "^2.6.2"
-
-"@turf/line-slice-along@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-slice-along/-/line-slice-along-7.0.0.tgz#a54e24f289fe084985a58390e15e1b4eadee0417"
-  integrity sha512-+HNcI8ilm7ma/oKm23f2ca+xaNe4IjDYAjtl2Peap3b39Y9UAgw6lXhIh/L+m/XQXKkdWOfmqf4J2ar0bgG9DQ==
-  dependencies:
-    "@turf/bearing" "^7.0.0"
-    "@turf/destination" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-
-"@turf/line-slice@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-slice/-/line-slice-7.0.0.tgz#668a9908f5910b5f25456135fa3f432773f9eaaa"
-  integrity sha512-De+j4QTdoHguYu4S3UqOdU8GEg7VrVqQ67SkGzgFWL/SFh3V98+KDhxFIMA1OmzOc5/ox3yUQ8a/BOYslAV4DA==
-  dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/nearest-point-on-line" "^7.0.0"
-
-"@turf/line-split@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-split/-/line-split-7.0.0.tgz#4ea1324d318c4df44774e00b284bee920837e17d"
-  integrity sha512-LuJuO1bY++PJEQ7gqbkzdL8RP1pZRQdgoqaZTsMy5AhxfjMCSL4Bx3o8SYAtsQt6CTx17dMCqBcjmjZwqNJJ6w==
-  dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/geojson-rbush" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
-    "@turf/line-segment" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/nearest-point-on-line" "^7.0.0"
-    "@turf/square" "^7.0.0"
-    "@turf/truncate" "^7.0.0"
-
-"@turf/line-to-polygon@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/line-to-polygon/-/line-to-polygon-7.0.0.tgz#55f31af50076e7ea044b3af2a131792022dc75a0"
-  integrity sha512-NmrY1jFj4oW30TW2LNoL00/uNmF1bGeTU8W1EtCunoCUUOVD9XSCj0kdSuq+MJLBH06PzOL+2f1jKTFf0X7Kqg==
-  dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    tslib "^2.6.2"
-
-"@turf/mask@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/mask/-/mask-7.0.0.tgz#cfe4ad3055edcc4612f8a319cf0dff53f339d22d"
-  integrity sha512-5vSNpN4rCRhEsS69d9u8USlFGdlf5rySCD701gzALNGpvTN4ViXoUUH9ysdqOdvp/IdC8thRP72Hget9fJKcfQ==
-  dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     polygon-clipping "^0.15.3"
-
-"@turf/meta@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-7.0.0.tgz#85f91ad874cccd2c2c3d361917e200912597c11b"
-  integrity sha512-cEXr13uFwhXq5mFBy0IK1U/QepE5qgk3zXpBYsla3lYV7cB83Vh+NNUR+r0/w/QoJqest1TG4H20F9tGYWPi/g==
-  dependencies:
-    "@turf/helpers" "^7.0.0"
-
-"@turf/midpoint@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/midpoint/-/midpoint-7.0.0.tgz#6e679baa2bcbfbc2e07cdb8fe00b2548b60ac72f"
-  integrity sha512-Zt0OgtByf5rTKT86WssAzNN2D7eqjay9ZlRb2rutynMyJDdLgbGPurTZIOXOP7ztGaS/WIMYlvPEveIp8ao1zQ==
-  dependencies:
-    "@turf/bearing" "^7.0.0"
-    "@turf/destination" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-
-"@turf/moran-index@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/moran-index/-/moran-index-7.0.0.tgz#0811749e63c6603b550ce9329178d2202b827187"
-  integrity sha512-Vl3PD8wn8aBYZpQ7Kq+dWosiQP2HTeZmzEyQh7WGAUK7OunODFPIdObj6jLwKYj9ZW2XVxaGmogjVEmQ2/2FQQ==
-  dependencies:
-    "@turf/distance-weight" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
     tslib "^2.6.2"
 
-"@turf/nearest-neighbor-analysis@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/nearest-neighbor-analysis/-/nearest-neighbor-analysis-7.0.0.tgz#77de00171a1ebe55b6e238b204f28674f6f25309"
-  integrity sha512-wz+2U271niT7l18SIctAo5Muh5kqyZl4bqFUWTQhhhzXkcP2hCYT9gYWkrZN0gfyp9sCWUe7mgoU6/wGDsiENQ==
+"@turf/meta@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz"
+  integrity sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==
   dependencies:
-    "@turf/area" "^7.0.0"
-    "@turf/bbox" "^7.0.0"
-    "@turf/bbox-polygon" "^7.0.0"
-    "@turf/centroid" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/nearest-point" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+
+"@turf/midpoint@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/midpoint/-/midpoint-7.1.0.tgz"
+  integrity sha512-uiUU9TwRZOCeiTUn8+7oE6MJUvclfq+n6KQ5VCMTZXiRUJjPu7nDLpBle1t2WSv7/w7O0kSQ4FfKXh0gHnkJOw==
+  dependencies:
+    "@turf/bearing" "^7.1.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/nearest-point-on-line@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/nearest-point-on-line/-/nearest-point-on-line-7.0.0.tgz#60d376da911dd4f73f44a130a1277e54928cfab6"
-  integrity sha512-ADf+oytqY3EVT/9JApoRr5H0f8wzkzeXhJUfTDEcWZoJqT/8lOX2HCo87b6+oEb1QIavlSogoku1+M5xMIcJLw==
+"@turf/moran-index@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/moran-index/-/moran-index-7.1.0.tgz"
+  integrity sha512-xsvAr3IRF/C6PlRMoN/ANrRx6c3QFUJgBCIVfI7re+Lkdprrzgw1HZA48ZjP4F91xbhgA1scnRgQdHFi2vO2SA==
   dependencies:
-    "@turf/bearing" "^7.0.0"
-    "@turf/destination" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/distance-weight" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/nearest-point-to-line@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/nearest-point-to-line/-/nearest-point-to-line-7.0.0.tgz#1ea07578393561751797148c5fbd3fa3f9103346"
-  integrity sha512-DmbQ88nChkVD6pe9dbFZEBVtmcgrRFKSv1n3Y1Kka+BeDFzCfie2VJuhsrqrecRmLMIEf1tdVJL/MdpinnZZTQ==
+"@turf/nearest-neighbor-analysis@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/nearest-neighbor-analysis/-/nearest-neighbor-analysis-7.1.0.tgz"
+  integrity sha512-FAhT8/op3DuvqH0XFhv055JhYq/FC4aaIxEZ4hj8c7W6sYhUHAQgdRZ0tJ1RLe5/h+eXhCTbQ+DFfnfv3klu8g==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/point-to-line-distance" "^7.0.0"
+    "@turf/area" "^7.1.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/bbox-polygon" "^7.1.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/nearest-point" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/nearest-point@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/nearest-point/-/nearest-point-7.0.0.tgz#391dcc6b59f4411bc388f48611b877f0d4ec850c"
-  integrity sha512-h3uLUoeo6JWTirpI499SRooqEoDxia2C/kDqAwAeXFqwxzGqGprtNA/C0bMgHfxE1M2rxORGzvgywKirpLu1dA==
+"@turf/nearest-point-on-line@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/nearest-point-on-line/-/nearest-point-on-line-7.1.0.tgz"
+  integrity sha512-aTjAOm7ab0tl5JoxGYRx/J/IbRL1DY1ZCIYQDMEQjK5gOllhclgeBC0wDXDkEZFGaVftjw0W2RtE2I0jX7RG4A==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/bearing" "^7.1.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/planepoint@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/planepoint/-/planepoint-7.0.0.tgz#8da2169cca9042a4906d94c5a3fc28c774200ec5"
-  integrity sha512-+/Sqk1I8QwlKsd0rfjwOac3BAdIBeyjN8Irgk2vYbxUADn6QWcxyYLro8DHUVrTu9jZfllc8QNpy9/6iUykm0A==
+"@turf/nearest-point-to-line@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/nearest-point-to-line/-/nearest-point-to-line-7.1.0.tgz"
+  integrity sha512-rY2F/iY4S6U8H0hIoOI25xMWYEiKywxeTvTvn5GP8KCu+2oemfZROWa7n2+hQDRwO2/uaegrGEpxO7zlFarvzg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-
-"@turf/point-grid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/point-grid/-/point-grid-7.0.0.tgz#fa77996d7d1c7e0ee1e60cc407aec1e40ca88f45"
-  integrity sha512-vXtFeWFC0i9T71AVX5VdlqD2mlKhk649OF/pEJB9wtCGDHYax9kkObNDSz4mFAz4UqQ67P5Lipg8YYaawgmDZg==
-  dependencies:
-    "@turf/boolean-within" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/point-to-line-distance" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/point-on-feature@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/point-on-feature/-/point-on-feature-7.0.0.tgz#11fc32cf0f56022d3c93f46b344937af02a17645"
-  integrity sha512-KTvYrQJEw62GLivd5LfCRt9z/4ZFdz29+3HxW9/RHhb8nrjLU8M8j7fJTQ+/Q+pPunWPK0Fvjv8LZAh0c30/oA==
+"@turf/nearest-point@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/nearest-point/-/nearest-point-7.1.0.tgz"
+  integrity sha512-VyInmhqfVWp+jE7sCK95o46qc4tDjAgzbRfRjr+rTgfFS1Sndyy1PdwyNn6TjBFDxiM6e+mjMEeGPjb1smJlEg==
   dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/center" "^7.0.0"
-    "@turf/explode" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/nearest-point" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/point-to-line-distance@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/point-to-line-distance/-/point-to-line-distance-7.0.0.tgz#402abbad4a2e862a2599b4944a7dbe8c3fbccde4"
-  integrity sha512-BMNy/vbvm9NjrgJq6MA3xhruy+cp/Wj+ff3fiu8Rdl5QX/dMwCeyCZuuvzCftup6GTPUhRbpe0YRFUBInGzx/g==
+"@turf/planepoint@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/planepoint/-/planepoint-7.1.0.tgz"
+  integrity sha512-hFORBkCd7Q0kNUzLqksT4XglLgTQF9tCjG+dbnZ1VehpZu+w+vlHdoW/mY7XCX3Kj1ObiyzVmXffmVYgwXwF6Q==
   dependencies:
-    "@turf/bearing" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/projection" "^7.0.0"
-    "@turf/rhumb-bearing" "^7.0.0"
-    "@turf/rhumb-distance" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/points-within-polygon@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/points-within-polygon/-/points-within-polygon-7.0.0.tgz#3d0104572cdea3e9dfaefbfa9784c2406cac1507"
-  integrity sha512-Nz4kLSitsfZH0jwgCA5PCVcCocMWNM5+0LZo13j2JoXP980zTwL5t6jiwS2qFoofNE0Q6RfjrfQ3kVm5/g1/bQ==
+"@turf/point-grid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/point-grid/-/point-grid-7.1.0.tgz"
+  integrity sha512-ihuuUcWuCu4Z1+34UYCM5NGsU2DJaB4uE8cS3jDQoUqlc+8ii2ng8kcGEtTwVn0HdPsoKA7bgvSZcisJO0v6Ww==
   dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/boolean-within" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/polygon-smooth@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/polygon-smooth/-/polygon-smooth-7.0.0.tgz#af402dd7c490eb7674a92b5f23fccc0e5ea10b9d"
-  integrity sha512-1pY81xZivsToG8zFGvX/1NjrYCNOWm+fdtciWyF+tt0rGE/xvMwE4yiX1chDrKiV2X8W+Ip/ZLry3MIBcSUx0Q==
+"@turf/point-on-feature@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/point-on-feature/-/point-on-feature-7.1.0.tgz"
+  integrity sha512-lOO5J9I0diuGbN+r6jViEKRH3qfymsBvv25b7U0MuP8g/YC19ncUXZ86dmKfJx1++Rb485DS9h0nFvPmJpaOdg==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/center" "^7.1.0"
+    "@turf/explode" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/nearest-point" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/polygon-tangents@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/polygon-tangents/-/polygon-tangents-7.0.0.tgz#db6df6c48d40d403156784dab4a0405460beb3f2"
-  integrity sha512-BNSKWqOTiCvVSj5CuLmkcHkagFsBSbUuSSffEGxC3cFY2tb0vP71nFE9qM+h9FpApkR6F/bWxRu5AxQ4oVHySQ==
+"@turf/point-to-line-distance@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/point-to-line-distance/-/point-to-line-distance-7.1.0.tgz"
+  integrity sha512-Ps9eTOCaiNgxDaSNQux0wAcSLcrI0y0zYFaD9HnVm+yCMRliQXneFti2XXotS+gR7TpgnLRAAzyx4VzJMSN2tw==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/boolean-within" "^7.0.0"
-    "@turf/explode" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/nearest-point" "^7.0.0"
+    "@turf/bearing" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/projection" "^7.1.0"
+    "@turf/rhumb-bearing" "^7.1.0"
+    "@turf/rhumb-distance" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/polygon-to-line@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/polygon-to-line/-/polygon-to-line-7.0.0.tgz#775b9784b1048151f1371eb9ec0a641fdab9c203"
-  integrity sha512-FkbxgABNzULN//WiSWiBqkbePbQANMmYKFgD6tUnVGldTFa1RuUjt/bgbvPjVHZfUdJieyxBszzl1dP0z8czDQ==
+"@turf/points-within-polygon@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/points-within-polygon/-/points-within-polygon-7.1.0.tgz"
+  integrity sha512-SzqeD9Gcp11rEya+rCVMy6IPuYMrphNEkCiQ39W6ec9hsaqKlruqmtudKhhckMGVLVUUBCQAu5f55yjcDfVW2w==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/polygonize@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/polygonize/-/polygonize-7.0.0.tgz#ed965ff359962c09a0a5d7591547f7cbba09f803"
-  integrity sha512-aTVANRcWHVFZIgUwH5H5BMn9OoGk8KI+mGe4H8cXQWUvarKUz86t8BkdkbWnsAfdOTrEwK4WFWtxfmeWwJUH7Q==
+"@turf/polygon-smooth@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/polygon-smooth/-/polygon-smooth-7.1.0.tgz"
+  integrity sha512-mTlmg4XUP5rKgCP/73N91owkAXIc3t1ZKLuwsJGQM1/Op48T3rJmDwVR/WZIMnVlxl5tFbssWCCB3blj4ivx9g==
   dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/envelope" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/projection@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/projection/-/projection-7.0.0.tgz#d03daf040d0ead1c4e5f00718ef5c65d73d273e7"
-  integrity sha512-EoPbZPZSDv0AJMfYhqnS455CVMYwPU78kHyQHeOnMR1Tc5z+TiImvyq55umhfecgpETzuDsjFkmeQ2phDKTmbA==
+"@turf/polygon-tangents@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/polygon-tangents/-/polygon-tangents-7.1.0.tgz"
+  integrity sha512-ffBgHXtkrpgkNs8E6s9sVLSKG4lPGH3WBk294FNKBt9NS+rbhNCv8yTuOMeP0bOm/WizaCq/SUtVryJpUSoI/g==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/boolean-within" "^7.1.0"
+    "@turf/explode" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/nearest-point" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/quadrat-analysis@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/quadrat-analysis/-/quadrat-analysis-7.0.0.tgz#8cf06f90a11f88b07c9f55242a0cf138030eeb54"
-  integrity sha512-JaCARFLS7mFIGORpRFcqrrCWVgTi+Vw5prSgQdaMVMcXo5+wsPh0fJUno4PGHt++R6AE3ZgxtDq2gS/1RZfhOA==
+"@turf/polygon-to-line@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-7.1.0.tgz"
+  integrity sha512-FBlfyBWNQZCTVGqlJH7LR2VXmvj8AydxrA8zegqek/5oPGtQDeUgIppKmvmuNClqbglhv59QtCUVaDK4bOuCTA==
   dependencies:
-    "@turf/area" "^7.0.0"
-    "@turf/bbox" "^7.0.0"
-    "@turf/bbox-polygon" "^7.0.0"
-    "@turf/centroid" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/point-grid" "^7.0.0"
-    "@turf/random" "^7.0.0"
-    "@turf/square-grid" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/random@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/random/-/random-7.0.0.tgz#8df157c25d876f29e08db0f42ccd6b0be69af68b"
-  integrity sha512-l3+FW0pk6MUQx2lyMvzps2YQS7ovP6YoV0tVvuNaQq0UICB1P4EHJIKLMTe5pXk73Z3p0wTgnEPk0Z2lqWaeGQ==
+"@turf/polygonize@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/polygonize/-/polygonize-7.1.0.tgz"
+  integrity sha512-FBjxnOzO29MbE7MWnMPHHYtOo93cQopT5pXhkuPyoKgcTUCntR1+iVFpl5YFbMkYup0j5Oexjo/pbY38lVSZGw==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/envelope" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/rectangle-grid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/rectangle-grid/-/rectangle-grid-7.0.0.tgz#a15646792308e6515b3bdd745a863fccf6123d09"
-  integrity sha512-iLMRfaWs9+BlGaDP5ka7J9bTGFPGim1Tl38uNTPagIVxk6bNfB8156S9up+/7scpjuQGxY0ky3tlR9aVYlWNdw==
+"@turf/projection@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/projection/-/projection-7.1.0.tgz"
+  integrity sha512-3wHluMoOvXnTe7dfi0kcluTyLNG5MwGsSsK5OA98vkkLH6a1xvItn8e9GcesuT07oB2km/bgefxYEIvjQG5JCA==
   dependencies:
-    "@turf/boolean-intersects" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/rewind@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/rewind/-/rewind-7.0.0.tgz#c543c69cf0677b763e4c19e1c8244ecb30e1fc69"
-  integrity sha512-kZwqJ4enmTZPDrI0rCf+zE9HChCuKKvD0kqZJo50XvfypfKVz5CI751Dgs/cslMIENyKFiHHHM4OMgouJ/lR1Q==
+"@turf/quadrat-analysis@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/quadrat-analysis/-/quadrat-analysis-7.1.0.tgz"
+  integrity sha512-4O5h9PyWgpqYXja9O+kzr+qk5MUz0IkJqPtt5oWWX5s4jRcLNqiEUf+zi/GDBQkVV8jH3S5klT5CLrF1fxK3hQ==
   dependencies:
-    "@turf/boolean-clockwise" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/area" "^7.1.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/bbox-polygon" "^7.1.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/point-grid" "^7.1.0"
+    "@turf/random" "^7.1.0"
+    "@turf/square-grid" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/rhumb-bearing@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/rhumb-bearing/-/rhumb-bearing-7.0.0.tgz#11c2e811de7057756d497de43a0ffbcefe3a4804"
-  integrity sha512-4qDggFDNBbWdD+o3H+vna5eiKCAsmqAueP3T5rSEB1ier77wVgjg7cs7eTrEBbpuCbPAho7NDNdyAjgItydgLQ==
+"@turf/random@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/random/-/random-7.1.0.tgz"
+  integrity sha512-22mXv8ejDMUWkz8DSMMqdZb0s7a0ISJzXt6T9cHovfT//vsotzkVH+5PDxJQjvmigKMnpaUgobHmQss23tAwEQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/rhumb-destination@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/rhumb-destination/-/rhumb-destination-7.0.0.tgz#0c132579f17b2830a917b8e2ce8a88e6b1321416"
-  integrity sha512-uYgqP8BGo8DBs6ZgjBo9SNCXc6BY+iA6OG7yPYSe4Lur2vu+LkbBXV6P3IodkeHyPex+X5ATea8QHutYQX6HUg==
+"@turf/rectangle-grid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/rectangle-grid/-/rectangle-grid-7.1.0.tgz"
+  integrity sha512-4d2AuDj4LfMMJxNHbds5yX1oFR3mIVAB5D7mx6pFB0e+YkQW0mE2dUWhDTFGJZM+n45yqbNQ5hg19bmiXv94ug==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/boolean-intersects" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/rhumb-distance@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/rhumb-distance/-/rhumb-distance-7.0.0.tgz#50c16e13d968fdf9dee9c06ef5956c4ecb319987"
-  integrity sha512-VAZnZcHbHHUU/Li0sj50/T6bBGRWvJ6eOZmw2aZFxxnC+AkHv4LTKDf0wNsxR03ZwGEh4uJM8OuirNugLIhAyA==
+"@turf/rewind@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/rewind/-/rewind-7.1.0.tgz"
+  integrity sha512-zX0KDZpeiH89m1vYLTEJdDL6mFyoAsCxcG0P94mXO7/JXWf0AaxzA9MkNnA/d2QYX0G4ioCMjZ5cD6nXb8SXzw==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/boolean-clockwise" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/sample@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/sample/-/sample-7.0.0.tgz#9a90c83f4a4beb3f8a5c28580150a512078ab76e"
-  integrity sha512-yCeITDVT3vWMaK/X1JF6jxEipgBCi2Foj87lVO7rcVg5pp/6c2S8BnFB5NoI0+HKXEpulG4eH57khUVND9VCGA==
+"@turf/rhumb-bearing@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/rhumb-bearing/-/rhumb-bearing-7.1.0.tgz"
+  integrity sha512-ESZt70eOljHVnQMFKIdiu8LIHuQlpZgzh2nqSfV40BrYjsjI/sBKeK+sp2cBWk88nsSDlriPuMTNh4f50Jqpkw==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/sector@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/sector/-/sector-7.0.0.tgz#3b176f121df200a623518368cd246cdafb8add31"
-  integrity sha512-HXT8vbCYoIbomcyT0D/0Ap4p3bSmb3EFC7C5BBv3Gr9oWiMf5cFgwwA/inbGorU5fcRap7/Yt4hWWTGLO5MDTw==
+"@turf/rhumb-destination@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/rhumb-destination/-/rhumb-destination-7.1.0.tgz"
+  integrity sha512-WA2TeO3qrv5ZrzNihtTLLYu8X4kd12WEC6JKElm99XhgLao1/4ao2SJUi43l88HqwbrnNiq4TueGQ6tYpXGU7A==
   dependencies:
-    "@turf/circle" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/line-arc" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/shortest-path@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/shortest-path/-/shortest-path-7.0.0.tgz#e9c451dcccb4a31aeb6e46a72272591941ca9de3"
-  integrity sha512-nEtL6qA3Po6uXZsLnfbFCD+Nng3GIRBX2Okyva3PYCJvuD27qYJFvXk423Z0qA+09zZHhi2Ct1IGuXBBYmdkaw==
+"@turf/rhumb-distance@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/rhumb-distance/-/rhumb-distance-7.1.0.tgz"
+  integrity sha512-fR1V+yC4E1tnbdThomosiLcv0PQOwbfLSPM8rSWuxbMcJtffsncWxyJ0+N1F5juuHbcdaYhlduX8ri5I0ZCejw==
   dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/bbox-polygon" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/clean-coords" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/transform-scale" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/simplify@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/simplify/-/simplify-7.0.0.tgz#cfe03b6467b5274324feede82ece6ebfda506bcf"
-  integrity sha512-EizgFBv7LiLTfqk0BlzuKXmGj7owHksI7Q0mur+yOFGFhEmP5pWm+jYxq+pYfUZA3eki4J7kyN4Mhg5c+jhLTw==
+"@turf/sample@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/sample/-/sample-7.1.0.tgz"
+  integrity sha512-9Iq/Ankr4+sgBoh4FpuVVvoW+AA10eej3FS89Zu79SFdCqUIdT7T42Nn3MlSVj4jMyA1oXyT2HIAlNWkwgLw6Q==
   dependencies:
-    "@turf/clean-coords" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/square-grid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/square-grid/-/square-grid-7.0.0.tgz#24b2a7cfff40fe3c76774442cd0212ae0ef2e22c"
-  integrity sha512-Dz7GyFRbcf0aek5nm7gW5gVYq/dJdn+JkVFgSIimysRl1tBtQiE0LvjZRdS97JvPs6m6hcZT+sDEXW1fLDPYFA==
+"@turf/sector@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/sector/-/sector-7.1.0.tgz"
+  integrity sha512-2FI2rg//eXpa/l+WJtFfvHaf1NJ7ie2MoJ+RH5dKANtrfoof1Ed+y9dXSyuhem2tp/Srq2GhrjaSofFN5/g5vA==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/rectangle-grid" "^7.0.0"
+    "@turf/circle" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/line-arc" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/square@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/square/-/square-7.0.0.tgz#78a7821ca55af9cf823408f773be37502dbf918c"
-  integrity sha512-HnY2fESbGGzMeb19qZ0HKpsGRZv4f4e8oHH+gdCr6cs03z/TO6JslJdRA65zHNkdReSVEOQWIMF5IB+Cq20jCg==
+"@turf/shortest-path@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/shortest-path/-/shortest-path-7.1.0.tgz"
+  integrity sha512-1UmFhS5zHNacLv5rszoFOXq02BGov1oJvjlDatXsSWAd+Z7tqxpDc8D+41edrXy0ZB0Yxsy6WPNagM6hG9PRaA==
   dependencies:
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-
-"@turf/standard-deviational-ellipse@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/standard-deviational-ellipse/-/standard-deviational-ellipse-7.0.0.tgz#0f844573b0240b32011bee8ad496a565b2afc433"
-  integrity sha512-rr4T48aAfu2E/V6fStE8Jq1VD2a/zztS1LGu1PSK3pbk7Eq9HTEE9jzjBIONhDI6ljoLBYy4Qib+L3DaNCfmUQ==
-  dependencies:
-    "@turf/center-mean" "^7.0.0"
-    "@turf/ellipse" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/points-within-polygon" "^7.0.0"
-
-"@turf/tag@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/tag/-/tag-7.0.0.tgz#873114237e3e06facc1dd5d628a5275b3292aa97"
-  integrity sha512-/QVKwYq9C7BkHrVtwLXwKSrEZcZT+/JQeNpGsOFhCBnDgXUMtLpj2obkMt+v7wXXtUgTsFAnSh7ClNgS6eB2Sg==
-  dependencies:
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/bbox-polygon" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/clean-coords" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/transform-scale" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/tesselate@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/tesselate/-/tesselate-7.0.0.tgz#d086fb558146202bd011eb49c3d17e022a8510d4"
-  integrity sha512-AWdFrBuLh4RFEBLWVaY9Z3/8jrXFv9WDvO3SyVUCQYFFcQP9aVieHyEEwebRaKb578il/o3rNHyRBuL6xSOcAA==
+"@turf/simplify@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/simplify/-/simplify-7.1.0.tgz"
+  integrity sha512-JypymaoiSiFzGHwEoUkK0OPW1KQSnH3hEsEW3UIRS+apzltJ4HdFovYjsfqQgGZJZ+NJ9+dv7h8pgGLYuqcBUQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
+    "@turf/clean-coords" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/square-grid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/square-grid/-/square-grid-7.1.0.tgz"
+  integrity sha512-JyhsALULVRlkh8htdTi9aXaXFSUv6wRNbeFbqyGJKKlA5eF+AYmyWdI/BlFGQN27xtbtMPeAuLmj+8jaB2omGw==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@turf/rectangle-grid" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/square@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/square/-/square-7.1.0.tgz"
+  integrity sha512-ANuA+WXZheGTLW6Veq0i+/B2S4KMhEHAixDv9gQEb9e6FTyqTJVwrqP4CHI3OzA3DZ/ytFf+NTKVofetO/BBQg==
+  dependencies:
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/standard-deviational-ellipse@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/standard-deviational-ellipse/-/standard-deviational-ellipse-7.1.0.tgz"
+  integrity sha512-JqvQFH/witHh+3XgPC1Qk4+3G8w8WQta2NTJjnGinOgFulH+7RD4DcxCT+XXtCHoeq8IvL9VPJRX3ciaW5nSCg==
+  dependencies:
+    "@turf/center-mean" "^7.1.0"
+    "@turf/ellipse" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/points-within-polygon" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/tag@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/tag/-/tag-7.1.0.tgz"
+  integrity sha512-cD8TC++DnNmdI1B/apTf3nj2zRNY6SoLRliB8K76OB+70Kev8tOf4ZVgAqOd0u+Hpdg/T6l7dO7fyJ6UouE7jA==
+  dependencies:
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/tesselate@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/tesselate/-/tesselate-7.1.0.tgz"
+  integrity sha512-E/Z94Mx6kUjvQVbEcSuM9MbEo2dkOczRe4ZzjhFlLgJh1dCkfRgwYLH49mb2CcfG/me1arxoCgmtG+qgm7LrCg==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     earcut "^2.2.4"
-
-"@turf/tin@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/tin/-/tin-7.0.0.tgz#fc3ba2d204b329ff9c536a4d7a3cd659c57c09c2"
-  integrity sha512-KuzXnoetCqu5RC6wcUWOvotxZMcgZptqz3gJZAuhqa1CF3DKUKFEJ851+f/9KzZ+woalUB8anFr9dMKJjcM6RA==
-  dependencies:
-    "@turf/helpers" "^7.0.0"
     tslib "^2.6.2"
 
-"@turf/transform-rotate@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/transform-rotate/-/transform-rotate-7.0.0.tgz#cf357f02cfbbe558f38558eb09bdb9ebb34c2562"
-  integrity sha512-zU6ypVOdVtXaJvy2LEVjx4o7y/vR9kIL6Iu/VkzXIvGCYICDdHnrpeEVJOFZPqdq4GI4C1xAQ4ARPTwtGrpPBg==
+"@turf/tin@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/tin/-/tin-7.1.0.tgz"
+  integrity sha512-h8Bdm0IYN6OpKHM8lBRWGxkJnZcxL0KYecf8U6pa6DCEYsEXuEExMTvYSD2OmqIsL5ml8P6RjwgyI+dZeE0O9A==
   dependencies:
-    "@turf/centroid" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/rhumb-bearing" "^7.0.0"
-    "@turf/rhumb-destination" "^7.0.0"
-    "@turf/rhumb-distance" "^7.0.0"
-
-"@turf/transform-scale@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/transform-scale/-/transform-scale-7.0.0.tgz#8d55d3f37ce158c86114f551f89bc4b06994262c"
-  integrity sha512-G94nxT5TyP8TSNRDkoevFoGlUw0H2Az5IG1JKFTT5nRqpbML17IQblV33gaA1Hm197rekQo3CDVWEbgpOV0jAw==
-  dependencies:
-    "@turf/bbox" "^7.0.0"
-    "@turf/center" "^7.0.0"
-    "@turf/centroid" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/rhumb-bearing" "^7.0.0"
-    "@turf/rhumb-destination" "^7.0.0"
-    "@turf/rhumb-distance" "^7.0.0"
-
-"@turf/transform-translate@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/transform-translate/-/transform-translate-7.0.0.tgz#006985e6ae1a02aa76ddb6349707aa7e53e2bd2e"
-  integrity sha512-sdZl29CqHoBo/Mxwos6Hvb6LXtHJYYTIjlWqphnu1kislbJwWUJpYjwD8yqTljfW4QHgDzGpnRLGzjDVZ7KHQQ==
-  dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/rhumb-destination" "^7.0.0"
-
-"@turf/triangle-grid@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/triangle-grid/-/triangle-grid-7.0.0.tgz#a86a468e04287e0da3c7f0c01bf82ef12f9f55d8"
-  integrity sha512-LKBMgkGGfZxZclRzalIYHGG50eMBOHNihBZLagK/f8RAMrvG2rS/S4n/CQbqU9OXenDgYErSm3SCVXC1dTXVPA==
-  dependencies:
-    "@turf/distance" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/intersect" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/truncate@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/truncate/-/truncate-7.0.0.tgz#1e84c6cf0db2bd63d0b4346722af61daa78ca038"
-  integrity sha512-G0cKlvONexzRIHRMkzhIA9UsOHiHbVW+iFBlAyDxXKK9Cr9USp/JjETAo8zqCnTQna40xdjt4bcHtsZxqyRQZw==
+"@turf/transform-rotate@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/transform-rotate/-/transform-rotate-7.1.0.tgz"
+  integrity sha512-Vp7VBZ6DqaPV8mkwSycksBFRLqSj3y16zg+uEPSCsXUjbFtw9DOLcyH2F5vMpnC2bOpS9NOB4hebhJRwBwAPWQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/rhumb-bearing" "^7.1.0"
+    "@turf/rhumb-destination" "^7.1.0"
+    "@turf/rhumb-distance" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/transform-scale@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/transform-scale/-/transform-scale-7.1.0.tgz"
+  integrity sha512-m5fLnh3JqrWSv0sAC8Aieet/fr5IZND8BFaE9LakMidtNaJqOIPOyVmUoklcrGn6eK6MX+66rRPn+5a1pahlLQ==
+  dependencies:
+    "@turf/bbox" "^7.1.0"
+    "@turf/center" "^7.1.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/rhumb-bearing" "^7.1.0"
+    "@turf/rhumb-destination" "^7.1.0"
+    "@turf/rhumb-distance" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/transform-translate@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/transform-translate/-/transform-translate-7.1.0.tgz"
+  integrity sha512-XA6Oh7VqUDrieY9m9/OF4XpBTd8qlfVGi3ObywojCqtHaHKLK3aXwTBZ276i0QKmZqOQA+2jFa9NhgF/TgBDrw==
+  dependencies:
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/rhumb-destination" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/triangle-grid@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/triangle-grid/-/triangle-grid-7.1.0.tgz"
+  integrity sha512-hrPyRAuX5PKu7txmc/11VPKrlJDR+JGzd+eijupKTspNLR4n2sqZUx8UXqSxZ/1nq06ScTyjIfGQJVzlRS8BTg==
+  dependencies:
+    "@turf/distance" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/intersect" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
+"@turf/truncate@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/truncate/-/truncate-7.1.0.tgz"
+  integrity sha512-rrF3AML9PGZw2i5wmt53ESI+Ln9cZyCXgJ7QrEvkT8NbE4OFgmw6p8/1xT8+VEWFSpD4gHz+hmM+5FaFxXvtNg==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
 "@turf/turf@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/turf/-/turf-7.0.0.tgz#043c1c6c3ce6c3f17dda0754c1a1291aebbfc3c2"
-  integrity sha512-oKtvIoP9nCBT7HCUn0/QP62QwTj8eDxfS810ZGJO0aDPDg2x94tSqwbvmu5WcvcxOBB/6L6rF55UJjL+OjcHxw==
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/turf/-/turf-7.1.0.tgz"
+  integrity sha512-7NA6tAjbu9oIvIfpRO5AdPrZbFTlUFU02HVA7sLJM9jFeNIZovW09QuDo23uoS2z5l94SXV1GgKKxN5wo7prCw==
   dependencies:
-    "@turf/along" "^7.0.0"
-    "@turf/angle" "^7.0.0"
-    "@turf/area" "^7.0.0"
-    "@turf/bbox" "^7.0.0"
-    "@turf/bbox-clip" "^7.0.0"
-    "@turf/bbox-polygon" "^7.0.0"
-    "@turf/bearing" "^7.0.0"
-    "@turf/bezier-spline" "^7.0.0"
-    "@turf/boolean-clockwise" "^7.0.0"
-    "@turf/boolean-concave" "^7.0.0"
-    "@turf/boolean-contains" "^7.0.0"
-    "@turf/boolean-crosses" "^7.0.0"
-    "@turf/boolean-disjoint" "^7.0.0"
-    "@turf/boolean-equal" "^7.0.0"
-    "@turf/boolean-intersects" "^7.0.0"
-    "@turf/boolean-overlap" "^7.0.0"
-    "@turf/boolean-parallel" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/boolean-point-on-line" "^7.0.0"
-    "@turf/boolean-touches" "^7.0.0"
-    "@turf/boolean-valid" "^7.0.0"
-    "@turf/boolean-within" "^7.0.0"
-    "@turf/buffer" "^7.0.0"
-    "@turf/center" "^7.0.0"
-    "@turf/center-mean" "^7.0.0"
-    "@turf/center-median" "^7.0.0"
-    "@turf/center-of-mass" "^7.0.0"
-    "@turf/centroid" "^7.0.0"
-    "@turf/circle" "^7.0.0"
-    "@turf/clean-coords" "^7.0.0"
-    "@turf/clone" "^7.0.0"
-    "@turf/clusters" "^7.0.0"
-    "@turf/clusters-dbscan" "^7.0.0"
-    "@turf/clusters-kmeans" "^7.0.0"
-    "@turf/collect" "^7.0.0"
-    "@turf/combine" "^7.0.0"
-    "@turf/concave" "^7.0.0"
-    "@turf/convex" "^7.0.0"
-    "@turf/destination" "^7.0.0"
-    "@turf/difference" "^7.0.0"
-    "@turf/dissolve" "^7.0.0"
-    "@turf/distance" "^7.0.0"
-    "@turf/distance-weight" "^7.0.0"
-    "@turf/ellipse" "^7.0.0"
-    "@turf/envelope" "^7.0.0"
-    "@turf/explode" "^7.0.0"
-    "@turf/flatten" "^7.0.0"
-    "@turf/flip" "^7.0.0"
-    "@turf/geojson-rbush" "^7.0.0"
-    "@turf/great-circle" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/hex-grid" "^7.0.0"
-    "@turf/interpolate" "^7.0.0"
-    "@turf/intersect" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
-    "@turf/isobands" "^7.0.0"
-    "@turf/isolines" "^7.0.0"
-    "@turf/kinks" "^7.0.0"
-    "@turf/length" "^7.0.0"
-    "@turf/line-arc" "^7.0.0"
-    "@turf/line-chunk" "^7.0.0"
-    "@turf/line-intersect" "^7.0.0"
-    "@turf/line-offset" "^7.0.0"
-    "@turf/line-overlap" "^7.0.0"
-    "@turf/line-segment" "^7.0.0"
-    "@turf/line-slice" "^7.0.0"
-    "@turf/line-slice-along" "^7.0.0"
-    "@turf/line-split" "^7.0.0"
-    "@turf/line-to-polygon" "^7.0.0"
-    "@turf/mask" "^7.0.0"
-    "@turf/meta" "^7.0.0"
-    "@turf/midpoint" "^7.0.0"
-    "@turf/moran-index" "^7.0.0"
-    "@turf/nearest-neighbor-analysis" "^7.0.0"
-    "@turf/nearest-point" "^7.0.0"
-    "@turf/nearest-point-on-line" "^7.0.0"
-    "@turf/nearest-point-to-line" "^7.0.0"
-    "@turf/planepoint" "^7.0.0"
-    "@turf/point-grid" "^7.0.0"
-    "@turf/point-on-feature" "^7.0.0"
-    "@turf/point-to-line-distance" "^7.0.0"
-    "@turf/points-within-polygon" "^7.0.0"
-    "@turf/polygon-smooth" "^7.0.0"
-    "@turf/polygon-tangents" "^7.0.0"
-    "@turf/polygon-to-line" "^7.0.0"
-    "@turf/polygonize" "^7.0.0"
-    "@turf/projection" "^7.0.0"
-    "@turf/quadrat-analysis" "^7.0.0"
-    "@turf/random" "^7.0.0"
-    "@turf/rectangle-grid" "^7.0.0"
-    "@turf/rewind" "^7.0.0"
-    "@turf/rhumb-bearing" "^7.0.0"
-    "@turf/rhumb-destination" "^7.0.0"
-    "@turf/rhumb-distance" "^7.0.0"
-    "@turf/sample" "^7.0.0"
-    "@turf/sector" "^7.0.0"
-    "@turf/shortest-path" "^7.0.0"
-    "@turf/simplify" "^7.0.0"
-    "@turf/square" "^7.0.0"
-    "@turf/square-grid" "^7.0.0"
-    "@turf/standard-deviational-ellipse" "^7.0.0"
-    "@turf/tag" "^7.0.0"
-    "@turf/tesselate" "^7.0.0"
-    "@turf/tin" "^7.0.0"
-    "@turf/transform-rotate" "^7.0.0"
-    "@turf/transform-scale" "^7.0.0"
-    "@turf/transform-translate" "^7.0.0"
-    "@turf/triangle-grid" "^7.0.0"
-    "@turf/truncate" "^7.0.0"
-    "@turf/union" "^7.0.0"
-    "@turf/unkink-polygon" "^7.0.0"
-    "@turf/voronoi" "^7.0.0"
+    "@turf/along" "^7.1.0"
+    "@turf/angle" "^7.1.0"
+    "@turf/area" "^7.1.0"
+    "@turf/bbox" "^7.1.0"
+    "@turf/bbox-clip" "^7.1.0"
+    "@turf/bbox-polygon" "^7.1.0"
+    "@turf/bearing" "^7.1.0"
+    "@turf/bezier-spline" "^7.1.0"
+    "@turf/boolean-clockwise" "^7.1.0"
+    "@turf/boolean-concave" "^7.1.0"
+    "@turf/boolean-contains" "^7.1.0"
+    "@turf/boolean-crosses" "^7.1.0"
+    "@turf/boolean-disjoint" "^7.1.0"
+    "@turf/boolean-equal" "^7.1.0"
+    "@turf/boolean-intersects" "^7.1.0"
+    "@turf/boolean-overlap" "^7.1.0"
+    "@turf/boolean-parallel" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/boolean-point-on-line" "^7.1.0"
+    "@turf/boolean-touches" "^7.1.0"
+    "@turf/boolean-valid" "^7.1.0"
+    "@turf/boolean-within" "^7.1.0"
+    "@turf/buffer" "^7.1.0"
+    "@turf/center" "^7.1.0"
+    "@turf/center-mean" "^7.1.0"
+    "@turf/center-median" "^7.1.0"
+    "@turf/center-of-mass" "^7.1.0"
+    "@turf/centroid" "^7.1.0"
+    "@turf/circle" "^7.1.0"
+    "@turf/clean-coords" "^7.1.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/clusters" "^7.1.0"
+    "@turf/clusters-dbscan" "^7.1.0"
+    "@turf/clusters-kmeans" "^7.1.0"
+    "@turf/collect" "^7.1.0"
+    "@turf/combine" "^7.1.0"
+    "@turf/concave" "^7.1.0"
+    "@turf/convex" "^7.1.0"
+    "@turf/destination" "^7.1.0"
+    "@turf/difference" "^7.1.0"
+    "@turf/dissolve" "^7.1.0"
+    "@turf/distance" "^7.1.0"
+    "@turf/distance-weight" "^7.1.0"
+    "@turf/ellipse" "^7.1.0"
+    "@turf/envelope" "^7.1.0"
+    "@turf/explode" "^7.1.0"
+    "@turf/flatten" "^7.1.0"
+    "@turf/flip" "^7.1.0"
+    "@turf/geojson-rbush" "^7.1.0"
+    "@turf/great-circle" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/hex-grid" "^7.1.0"
+    "@turf/interpolate" "^7.1.0"
+    "@turf/intersect" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@turf/isobands" "^7.1.0"
+    "@turf/isolines" "^7.1.0"
+    "@turf/kinks" "^7.1.0"
+    "@turf/length" "^7.1.0"
+    "@turf/line-arc" "^7.1.0"
+    "@turf/line-chunk" "^7.1.0"
+    "@turf/line-intersect" "^7.1.0"
+    "@turf/line-offset" "^7.1.0"
+    "@turf/line-overlap" "^7.1.0"
+    "@turf/line-segment" "^7.1.0"
+    "@turf/line-slice" "^7.1.0"
+    "@turf/line-slice-along" "^7.1.0"
+    "@turf/line-split" "^7.1.0"
+    "@turf/line-to-polygon" "^7.1.0"
+    "@turf/mask" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@turf/midpoint" "^7.1.0"
+    "@turf/moran-index" "^7.1.0"
+    "@turf/nearest-neighbor-analysis" "^7.1.0"
+    "@turf/nearest-point" "^7.1.0"
+    "@turf/nearest-point-on-line" "^7.1.0"
+    "@turf/nearest-point-to-line" "^7.1.0"
+    "@turf/planepoint" "^7.1.0"
+    "@turf/point-grid" "^7.1.0"
+    "@turf/point-on-feature" "^7.1.0"
+    "@turf/point-to-line-distance" "^7.1.0"
+    "@turf/points-within-polygon" "^7.1.0"
+    "@turf/polygon-smooth" "^7.1.0"
+    "@turf/polygon-tangents" "^7.1.0"
+    "@turf/polygon-to-line" "^7.1.0"
+    "@turf/polygonize" "^7.1.0"
+    "@turf/projection" "^7.1.0"
+    "@turf/quadrat-analysis" "^7.1.0"
+    "@turf/random" "^7.1.0"
+    "@turf/rectangle-grid" "^7.1.0"
+    "@turf/rewind" "^7.1.0"
+    "@turf/rhumb-bearing" "^7.1.0"
+    "@turf/rhumb-destination" "^7.1.0"
+    "@turf/rhumb-distance" "^7.1.0"
+    "@turf/sample" "^7.1.0"
+    "@turf/sector" "^7.1.0"
+    "@turf/shortest-path" "^7.1.0"
+    "@turf/simplify" "^7.1.0"
+    "@turf/square" "^7.1.0"
+    "@turf/square-grid" "^7.1.0"
+    "@turf/standard-deviational-ellipse" "^7.1.0"
+    "@turf/tag" "^7.1.0"
+    "@turf/tesselate" "^7.1.0"
+    "@turf/tin" "^7.1.0"
+    "@turf/transform-rotate" "^7.1.0"
+    "@turf/transform-scale" "^7.1.0"
+    "@turf/transform-translate" "^7.1.0"
+    "@turf/triangle-grid" "^7.1.0"
+    "@turf/truncate" "^7.1.0"
+    "@turf/union" "^7.1.0"
+    "@turf/unkink-polygon" "^7.1.0"
+    "@turf/voronoi" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
-"@turf/union@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/union/-/union-7.0.0.tgz#03abbb05dadcd14ebb4982e7cee153d0970b28e9"
-  integrity sha512-NRnP0GJ3guzVh6D2KNZvqNLMkbZtPQ6X1U4czK9ETicLROzqq6wM/S8gHZJVoh0KxxK1RYDsKu0RGFVobVT2vA==
+"@turf/union@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/union/-/union-7.1.0.tgz"
+  integrity sha512-7VI8jONdBg9qmbfNlLQycPr93l5aU9HGMgWI9M6pb4ERuU2+p8KgffCgs2NyMtP2HxPrKSybzj31g7bnbEKofQ==
   dependencies:
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     polygon-clipping "^0.15.3"
     tslib "^2.6.2"
 
-"@turf/unkink-polygon@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/unkink-polygon/-/unkink-polygon-7.0.0.tgz#daed9b606f4b77014aae34089e9fcd1311f46193"
-  integrity sha512-mkwC7+KgINIAkRYSx0iRp8BjGtw8bijvtzC9Da5CRTSg13WH2IrvksFtasTo58xMdqyt6oO2NdMEDX3JUwRCeg==
+"@turf/unkink-polygon@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/unkink-polygon/-/unkink-polygon-7.1.0.tgz"
+  integrity sha512-pqkirni2aLpRA1ELFIuJz+mkjYyJQX8Ar6BflSu1b0ajY/CTrcDxbIv1x8UfvbybLzdJc4Gxzg5mo4cEtSwtaQ==
   dependencies:
-    "@turf/area" "^7.0.0"
-    "@turf/boolean-point-in-polygon" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/meta" "^7.0.0"
+    "@turf/area" "^7.1.0"
+    "@turf/boolean-point-in-polygon" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
     rbush "^3.0.1"
+    tslib "^2.6.2"
 
-"@turf/voronoi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@turf/voronoi/-/voronoi-7.0.0.tgz#b55e1073fef14ddf0594ba83d6595f464e1890f6"
-  integrity sha512-AJMrtd9eV+nVA+su1GIp96E5ENzKUepPFr9wWHqqWedj92W2KbdAwfwJVMyl0vBmiMYeTSnfzC7HenIMXePfhA==
+"@turf/voronoi@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/@turf/voronoi/-/voronoi-7.1.0.tgz"
+  integrity sha512-xUvzPDG6GaqEekgxd+pjeMKJXOYJ3eFIqUHbTe/ISKzzv3f2cFGiR2VH7ZGXri8d4ozzCQbUQ27ilHPPLf5+xw==
   dependencies:
-    "@turf/clone" "^7.0.0"
-    "@turf/helpers" "^7.0.0"
-    "@turf/invariant" "^7.0.0"
+    "@turf/clone" "^7.1.0"
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/d3-voronoi" "^1.1.12"
+    "@types/geojson" "^7946.0.10"
     d3-voronoi "1.1.2"
+    tslib "^2.6.2"
 
-"@types/geojson@7946.0.8":
-  version "7946.0.8"
-  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
-  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+"@types/d3-voronoi@^1.1.12":
+  version "1.1.12"
+  resolved "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz"
+  integrity sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw==
+
+"@types/geojson@^7946.0.10", "@types/geojson@^7946.0.14":
+  version "7946.0.14"
+  resolved "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
 
 "@types/lodash.debounce@^4.0.7":
   version "4.0.9"
@@ -3748,15 +3871,15 @@
   integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
 
 "@types/node@*", "@types/node@>=18":
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
-  integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==
+  version "22.3.0"
+  resolved "https://registry.npmjs.org/@types/node/-/node-22.3.0.tgz"
+  integrity sha512-nrWpWVaDZuaVc5X84xJ0vNrLvomM205oQyLsRt7OHNZbSHslcWsvgFR7O7hire2ZonjLrWBbedmotmIlJDVd6g==
   dependencies:
-    undici-types "~6.13.0"
+    undici-types "~6.18.2"
 
 "@types/readable-stream@^4.0.0":
   version "4.0.15"
-  resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-4.0.15.tgz#e6ec26fe5b02f578c60baf1fa9452e90957d2bfb"
+  resolved "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.15.tgz"
   integrity sha512-oAZ3kw+kJFkEqyh7xORZOku1YAKvsFTogRY8kVl4vHpEKiDkfnSA/My8haRE7fvmix5Zyy+1pwzOi7yycGLBJw==
   dependencies:
     "@types/node" "*"
@@ -3774,7 +3897,7 @@ abbrev@1:
 
 abort-controller@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  resolved "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz"
   integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
   dependencies:
     event-target-shim "^5.0.0"
@@ -3802,24 +3925,24 @@ acorn@^8.5.0:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz"
   integrity sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==
 
-ag-charts-types@10.0.2:
-  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/ag-charts-types/-/ag-charts-types-10.0.2.tgz#fe4d7aa3cdc4ba6f354d7b4bbf65818e242f2fd6"
-  integrity sha512-Nxo5slHOXlaeg0gRIsVnovAosQzzlYfWJtdDy0Aq/VvpJru/PJ+5i2c9aCyEhgRxhBjImsoegwkgRj7gNOWV6Q==
+ag-charts-types@10.1.0:
+  version "10.1.0"
+  resolved "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.1.0.tgz"
+  integrity sha512-pk9ft8hbgTXJ/thI/SEUR1BoauNplYExpcHh7tMOqVikoDsta1O15TB1ZL4XWnl4TPIzROBmONKsz7d8a2HBuQ==
 
-ag-grid-community@32.0.2:
-  version "32.0.2"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-32.0.2.tgz#a69d99ee944fa07ab5faa103f6f930fbd2d4b432"
-  integrity sha512-vLJJUjnsG9hNK41GNuW2EHu1W264kxA/poOpcX4kmyrjU5Uzvelsbj3HdKAO9POV28iqyRdKGYfAWdn8QzA7KA==
+ag-grid-community@32.1.0:
+  version "32.1.0"
+  resolved "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.1.0.tgz"
+  integrity sha512-RVvkjRH61nuCXwIqTKQPqNbKR+8cGBKw7S1qmmMXsy0pCBAJaQn4kL3v31hKHxDtV4bPscBXLFKGnKzHuss0GQ==
   dependencies:
-    ag-charts-types "10.0.2"
+    ag-charts-types "10.1.0"
 
 ag-grid-react@^32.0.2:
-  version "32.0.2"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-32.0.2.tgz#675b477f23f1f1338af0c15f174f9da3c68baec9"
-  integrity sha512-IWYsoyJ/Z763rWbE5/9SaT1n5xwIKrm/QzOG14l7i8z5J6JdJwfV0aQFATmEE8Xws2H48vlLcLdW1cv4hwV3eg==
+  version "32.1.0"
+  resolved "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.1.0.tgz"
+  integrity sha512-GDbtvU3aicSajWXWxvQio5ZaPqJDx2jzgRBKQf1RF1IVzL+XATDmLFNuMND0+wJ/VW/xUjBFjiq9W1fjXg/DCA==
   dependencies:
-    ag-grid-community "32.0.2"
+    ag-grid-community "32.1.0"
     prop-types "^15.8.1"
 
 agent-base@6:
@@ -3831,7 +3954,7 @@ agent-base@6:
 
 agent-base@^7.0.2, agent-base@^7.1.0:
   version "7.1.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  resolved "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz"
   integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
   dependencies:
     debug "^4.3.4"
@@ -3889,25 +4012,19 @@ arg@^5.0.2:
   resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
-array-buffer-byte-length@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
-  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
-  dependencies:
-    call-bind "^1.0.5"
-    is-array-buffer "^3.0.4"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-available-typed-arrays@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
-  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+axios@^1.6.2:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
   dependencies:
-    possible-typed-array-names "^1.0.0"
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
 
 axios@^1.7.3:
   version "1.7.3"
@@ -3925,7 +4042,7 @@ balanced-match@^1.0.0:
 
 base64-js@^1.3.1:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
 binary-extensions@^2.0.0:
@@ -3935,7 +4052,7 @@ binary-extensions@^2.0.0:
 
 bl@^6.0.11:
   version "6.0.14"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-6.0.14.tgz#b9ae9862118a3d2ebec999c5318466012314f96c"
+  resolved "https://registry.npmjs.org/bl/-/bl-6.0.14.tgz"
   integrity sha512-TJfbvGdL7KFGxTsEbsED7avqpFdY56q9IW0/aiytyheJzxST/+Io6cx/4Qx0K2/u0BPRDs65mjaQzYvMZeNocQ==
   dependencies:
     "@types/readable-stream" "^4.0.0"
@@ -3945,7 +4062,7 @@ bl@^6.0.11:
 
 body-scroll-lock@^3.1.5:
   version "3.1.5"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  resolved "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz"
   integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
 brace-expansion@^1.1.7:
@@ -3977,12 +4094,12 @@ browser-process-hrtime@^1.0.0:
 
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz"
   integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
 
 buffer@^6.0.3:
   version "6.0.3"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
   dependencies:
     base64-js "^1.3.1"
@@ -3990,22 +4107,11 @@ buffer@^6.0.3:
 
 busboy@1.6.0:
   version "1.6.0"
-  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
   integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
   dependencies:
     streamsearch "^1.1.0"
 
-call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
-  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    set-function-length "^1.2.1"
-
 camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
@@ -4047,7 +4153,7 @@ chownr@^2.0.0:
 
 classnames@^2.3.1:
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
 client-only@0.0.1, client-only@^0.0.1:
@@ -4055,7 +4161,7 @@ client-only@0.0.1, client-only@^0.0.1:
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^1.2.1:
+clsx@^1.1.1, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -4112,12 +4218,12 @@ combined-stream@^1.0.8:
 
 commander@2:
   version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commander@^11.0.0:
   version "11.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
+  resolved "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz"
   integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
 
 commander@^4.0.0:
@@ -4142,7 +4248,7 @@ concat-map@0.0.1:
 
 concaveman@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/concaveman/-/concaveman-1.2.1.tgz#47d20b4521125c15fabf453653c2696d9ee41e0b"
+  resolved "https://registry.npmjs.org/concaveman/-/concaveman-1.2.1.tgz"
   integrity sha512-PwZYKaM/ckQSa8peP5JpVr7IMJ4Nn/MHIaWUjP4be+KoZ7Botgs8seAZGpmaOM+UZXawcdYRao/px9ycrCihHw==
   dependencies:
     point-in-polygon "^1.1.0"
@@ -4155,9 +4261,16 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
   integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
 
+convertapi@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/convertapi/-/convertapi-1.14.0.tgz#a291a98cb986ae1e0f2340a130adbe17f65c8c76"
+  integrity sha512-9Rzkn+Mjs4jVLQ5pRUC8KpIjnT9WFUkuJZ5yjCJaDJsDM7Na2lWPKtDJdkfKcYCNDuo1h+OYZedne5SLp60EkQ==
+  dependencies:
+    axios "^1.6.2"
+
 cookie@0.6.0:
   version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
 cross-spawn@^7.0.0:
@@ -4193,19 +4306,19 @@ cssstyle@^2.3.0:
 
 d3-array@1:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz"
   integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
 
 d3-geo@1.7.1:
   version "1.7.1"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.7.1.tgz#44bbc7a218b1fd859f3d8fd7c443ca836569ce99"
+  resolved "https://registry.npmjs.org/d3-geo/-/d3-geo-1.7.1.tgz"
   integrity sha512-O4AempWAr+P5qbk2bC2FuN/sDW4z+dN2wDf9QV3bxQt4M5HfOEeXLgJ/UKQW0+o1Dj8BE+L5kiDbdWUMjsmQpw==
   dependencies:
     d3-array "1"
 
 d3-voronoi@1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
+  resolved "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz"
   integrity sha512-RhGS1u2vavcO7ay7ZNAPo4xeDh/VYeGof3x5ZLJBQgYhLegxr3s5IykvWmJ94FTU6mcbtp4sloqZ54mP6R4Utw==
 
 data-urls@^3.0.1:
@@ -4219,23 +4332,21 @@ data-urls@^3.0.1:
 
 date-fns@^3.3.1:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz"
   integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
-debug@4:
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
+debug@4, debug@^4.3.3, debug@^4.3.4:
   version "4.3.5"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz"
   integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
   dependencies:
     ms "2.1.2"
 
-debug@^4.3.3, debug@^4.3.4:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
-  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
-  dependencies:
-    ms "2.1.2"
-
 decimal.js@^10.3.1, decimal.js@^10.4.3:
   version "10.4.3"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz"
@@ -4248,58 +4359,16 @@ decompress-response@^4.2.0:
   dependencies:
     mimic-response "^2.0.0"
 
-deep-equal@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
-  integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.5"
-    es-get-iterator "^1.1.3"
-    get-intrinsic "^1.2.2"
-    is-arguments "^1.1.1"
-    is-array-buffer "^3.0.2"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    isarray "^2.0.5"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.1"
-    side-channel "^1.0.4"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.13"
-
 deepmerge@4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
-define-data-property@^1.0.1, define-data-property@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
-  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    gopd "^1.0.1"
-
 define-lazy-prop@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-properties@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
-  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
-  dependencies:
-    define-data-property "^1.0.1"
-    has-property-descriptors "^1.0.0"
-    object-keys "^1.1.1"
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
@@ -4339,7 +4408,7 @@ domexception@^4.0.0:
 
 earcut@^2.2.4:
   version "2.2.4"
-  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
+  resolved "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz"
   integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
 
 eastasianwidth@^0.2.0:
@@ -4349,7 +4418,7 @@ eastasianwidth@^0.2.0:
 
 ecdsa-sig-formatter@1.0.11:
   version "1.0.11"
-  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  resolved "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz"
   integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
   dependencies:
     safe-buffer "^5.0.1"
@@ -4364,33 +4433,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-es-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
-  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
-  dependencies:
-    get-intrinsic "^1.2.4"
-
-es-errors@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
-  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
-
-es-get-iterator@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
-  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    has-symbols "^1.0.3"
-    is-arguments "^1.1.1"
-    is-map "^2.0.2"
-    is-set "^2.0.2"
-    is-string "^1.0.7"
-    isarray "^2.0.5"
-    stop-iteration-iterator "^1.0.0"
-
 escape-latex@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz"
@@ -4424,12 +4466,12 @@ esutils@^2.0.2:
 
 event-target-shim@^5.0.0:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
 events@^3.0.0, events@^3.3.0:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
 fabric@^5.3.0:
@@ -4440,6 +4482,11 @@ fabric@^5.3.0:
     canvas "^2.8.0"
     jsdom "^19.0.0"
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-glob@^3.3.0:
   version "3.3.2"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
@@ -4475,13 +4522,6 @@ follow-redirects@^1.15.6:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
-for-each@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
-  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
-  dependencies:
-    is-callable "^1.1.3"
-
 foreground-child@^3.1.0:
   version "3.2.1"
   resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz"
@@ -4523,6 +4563,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fs@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz"
+  integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==
+
 fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -4533,11 +4578,6 @@ function-bind@^1.1.2:
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-functions-have-names@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
-  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
-
 gauge@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz"
@@ -4553,24 +4593,20 @@ gauge@^3.0.0:
     strip-ansi "^6.0.1"
     wide-align "^1.1.2"
 
+geojson-equality-ts@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/geojson-equality-ts/-/geojson-equality-ts-1.0.2.tgz"
+  integrity sha512-h3Ryq+0mCSN/7yLs0eDgrZhvc9af23o/QuC4aTiuuzP/MRCtd6mf5rLsLRY44jX0RPUfM8c4GqERQmlUxPGPoQ==
+  dependencies:
+    "@types/geojson" "^7946.0.14"
+
 geojson-polygon-self-intersections@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/geojson-polygon-self-intersections/-/geojson-polygon-self-intersections-1.2.1.tgz#7018edabe58e9262f20821a7334953708c78bbb7"
+  resolved "https://registry.npmjs.org/geojson-polygon-self-intersections/-/geojson-polygon-self-intersections-1.2.1.tgz"
   integrity sha512-/QM1b5u2d172qQVO//9CGRa49jEmclKEsYOQmWP9ooEjj63tBM51m2805xsbxkzlEELQ2REgTf700gUhhlegxA==
   dependencies:
     rbush "^2.0.1"
 
-get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
-  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
-  dependencies:
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-    hasown "^2.0.0"
-
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz"
@@ -4613,13 +4649,6 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-gopd@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
-  dependencies:
-    get-intrinsic "^1.1.3"
-
 graceful-fs@^4.2.11:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
@@ -4630,35 +4659,6 @@ hamt_plus@1.0.2:
   resolved "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz"
   integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
 
-has-bigints@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
-  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
-
-has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
-  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
-  dependencies:
-    es-define-property "^1.0.0"
-
-has-proto@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
-  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
-
-has-symbols@^1.0.2, has-symbols@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
-  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
-
-has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
-  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
-  dependencies:
-    has-symbols "^1.0.3"
-
 has-unicode@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
@@ -4689,7 +4689,7 @@ http-proxy-agent@^5.0.0:
 
 http-proxy-agent@^7.0.0:
   version "7.0.2"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
+  resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz"
   integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
   dependencies:
     agent-base "^7.1.0"
@@ -4705,7 +4705,7 @@ https-proxy-agent@^5.0.0:
 
 https-proxy-agent@^7.0.0:
   version "7.0.5"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
+  resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz"
   integrity sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==
   dependencies:
     agent-base "^7.0.2"
@@ -4720,7 +4720,7 @@ iconv-lite@0.6.3, iconv-lite@^0.6.3:
 
 ieee754@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
 immutable@^4.0.0:
@@ -4741,18 +4741,9 @@ inherits@2, inherits@^2.0.3, inherits@^2.0.4:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-internal-slot@^1.0.4:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
-  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
-  dependencies:
-    es-errors "^1.3.0"
-    hasown "^2.0.0"
-    side-channel "^1.0.4"
-
 international-types@^0.8.1:
   version "0.8.1"
-  resolved "https://registry.yarnpkg.com/international-types/-/international-types-0.8.1.tgz#c0e593d9911c1a23f64bbd6eb1abb2941fe2353f"
+  resolved "https://registry.npmjs.org/international-types/-/international-types-0.8.1.tgz"
   integrity sha512-tajBCAHo4I0LIFlmQ9ZWfjMWVyRffzuvfbXCd6ssFt5u1Zw15DN0UBpVTItXdNa1ls+cpQt3Yw8+TxsfGF8JcA==
 
 intl-messageformat@^10.1.0:
@@ -4774,7 +4765,7 @@ invariant@^2.2.4:
 
 iron-session@^8.0.2:
   version "8.0.2"
-  resolved "https://registry.yarnpkg.com/iron-session/-/iron-session-8.0.2.tgz#9802e080206a8ba41911b53d29ff7de11161d036"
+  resolved "https://registry.npmjs.org/iron-session/-/iron-session-8.0.2.tgz"
   integrity sha512-p4Yf1moQr6gnCcXu5vCaxVKRKDmR9PZcQDfp7ZOgbsSHUsgaNti6OgDB2BdgxC2aS6V/6Hu4O0wYlj92sbdIJg==
   dependencies:
     cookie "0.6.0"
@@ -4783,37 +4774,14 @@ iron-session@^8.0.2:
 
 iron-webcrypto@1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz#aa60ff2aa10550630f4c0b11fd2442becdb35a6f"
+  resolved "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz"
   integrity sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==
 
-is-arguments@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
-  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.2.1"
-
 is-arrayish@^0.3.1:
   version "0.3.2"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
-is-bigint@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
-  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
-  dependencies:
-    has-bigints "^1.0.1"
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@@ -4821,19 +4789,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
-  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-callable@^1.1.3:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
-  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
-
 is-core-module@^2.13.0:
   version "2.13.1"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz"
@@ -4841,16 +4796,9 @@ is-core-module@^2.13.0:
   dependencies:
     hasown "^2.0.0"
 
-is-date-object@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
-  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
-  dependencies:
-    has-tostringtag "^1.0.0"
-
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
 is-extglob@^2.1.1:
@@ -4870,18 +4818,6 @@ is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-map@^2.0.2, is-map@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
-  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
-
-is-number-object@^1.0.4:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
-  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
-  dependencies:
-    has-tostringtag "^1.0.0"
-
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
@@ -4892,65 +4828,13 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
-  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-set@^2.0.2, is-set@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
-  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
-
-is-shared-array-buffer@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
-  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
-  dependencies:
-    call-bind "^1.0.7"
-
-is-string@^1.0.5, is-string@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
-  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
-  dependencies:
-    has-tostringtag "^1.0.0"
-
-is-symbol@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
-  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
-  dependencies:
-    has-symbols "^1.0.2"
-
-is-weakmap@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
-  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
-
-is-weakset@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
-  integrity sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==
-  dependencies:
-    call-bind "^1.0.7"
-    get-intrinsic "^1.2.4"
-
 is-wsl@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
   dependencies:
     is-docker "^2.0.0"
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
@@ -4977,7 +4861,7 @@ jiti@^1.21.0:
 
 js-md4@^0.3.2:
   version "0.3.2"
-  resolved "https://registry.yarnpkg.com/js-md4/-/js-md4-0.3.2.tgz#cd3b3dc045b0c404556c81ddb5756c23e59d7cf5"
+  resolved "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz"
   integrity sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==
 
 "js-tokens@^3.0.0 || ^4.0.0":
@@ -5020,7 +4904,7 @@ jsdom@^19.0.0:
 
 jsonwebtoken@^9.0.0:
   version "9.0.2"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz#65ff91f4abef1784697d40952bb1998c504caaf3"
+  resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz"
   integrity sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==
   dependencies:
     jws "^3.2.2"
@@ -5036,12 +4920,12 @@ jsonwebtoken@^9.0.0:
 
 jsts@2.7.1:
   version "2.7.1"
-  resolved "https://registry.yarnpkg.com/jsts/-/jsts-2.7.1.tgz#a921c0cc9eefeef588bd53e952e0a7782d812d52"
+  resolved "https://registry.npmjs.org/jsts/-/jsts-2.7.1.tgz"
   integrity sha512-x2wSZHEBK20CY+Wy+BPE7MrFQHW6sIsdaGUMEqmGAio+3gFzQaBYPwLRonUfQf9Ak8pBieqj9tUofX1+WtAEIg==
 
 jwa@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  resolved "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz"
   integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
   dependencies:
     buffer-equal-constant-time "1.0.1"
@@ -5050,7 +4934,7 @@ jwa@^1.4.1:
 
 jwa@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jwa/-/jwa-2.0.0.tgz#a7e9c3f29dae94027ebcaf49975c9345593410fc"
+  resolved "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz"
   integrity sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==
   dependencies:
     buffer-equal-constant-time "1.0.1"
@@ -5059,7 +4943,7 @@ jwa@^2.0.0:
 
 jws@^3.2.2:
   version "3.2.2"
-  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  resolved "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz"
   integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
   dependencies:
     jwa "^1.4.1"
@@ -5067,7 +4951,7 @@ jws@^3.2.2:
 
 jws@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jws/-/jws-4.0.0.tgz#2d4e8cf6a318ffaa12615e9dec7e86e6c97310f4"
+  resolved "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz"
   integrity sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==
   dependencies:
     jwa "^2.0.0"
@@ -5105,32 +4989,32 @@ lodash.get@^4.4.2:
 
 lodash.includes@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+  resolved "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz"
   integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==
 
 lodash.isboolean@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+  resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz"
   integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
 
 lodash.isinteger@^4.0.4:
   version "4.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+  resolved "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz"
   integrity sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==
 
 lodash.isnumber@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+  resolved "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz"
   integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==
 
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz"
   integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
 
 lodash.isstring@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  resolved "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz"
   integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
 
 lodash.kebabcase@^4.1.1:
@@ -5150,7 +5034,7 @@ lodash.omit@^4.5.0:
 
 lodash.once@^4.0.0:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
@@ -5174,7 +5058,7 @@ make-dir@^3.1.0:
 
 marchingsquares@^1.3.3:
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/marchingsquares/-/marchingsquares-1.3.3.tgz#67404af4b883ade3a589221f4e9dd010a1f706fc"
+  resolved "https://registry.npmjs.org/marchingsquares/-/marchingsquares-1.3.3.tgz"
   integrity sha512-gz6nNQoVK7Lkh2pZulrT4qd4347S/toG9RXH2pyzhLgkL5mLkBoqgv4EvAGXcV0ikDW72n/OQb3Xe8bGagQZCg==
 
 mathjs@^13.0.2:
@@ -5266,19 +5150,14 @@ mkdirp@^1.0.3:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-ms@2.1.2:
+ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
 mssql@^11.0.1:
   version "11.0.1"
-  resolved "https://registry.yarnpkg.com/mssql/-/mssql-11.0.1.tgz#a32ab7763bfbb3f5d970e47563df3911fc04e21d"
+  resolved "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz"
   integrity sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==
   dependencies:
     "@tediousjs/connection-string" "^0.5.0"
@@ -5309,12 +5188,12 @@ nanoid@^3.3.6, nanoid@^3.3.7:
 
 native-duplexpair@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/native-duplexpair/-/native-duplexpair-1.0.0.tgz#7899078e64bf3c8a3d732601b3d40ff05db58fa0"
+  resolved "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz"
   integrity sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==
 
 next-international@^1.2.4:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/next-international/-/next-international-1.2.4.tgz#abe50b2aa3ba7ecf92d41f87537796a4b2dd0ba3"
+  resolved "https://registry.npmjs.org/next-international/-/next-international-1.2.4.tgz"
   integrity sha512-JQvp+h2iSgA/t8hu5S/Lwow1ZErJutQRdpnplxjv4VTlCiND8T95fYih8BjkHcVhQbtM+Wu9Mb1CM32wD9hlWQ==
   dependencies:
     client-only "^0.0.1"
@@ -5388,34 +5267,6 @@ object-hash@^3.0.0:
   resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.13.1:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
-  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
-
-object-is@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
-  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-
-object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object.assign@^4.1.4:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
-  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
-  dependencies:
-    call-bind "^1.0.5"
-    define-properties "^1.2.1"
-    has-symbols "^1.0.3"
-    object-keys "^1.1.1"
-
 once@^1.3.0, once@^1.3.1:
   version "1.4.0"
   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
@@ -5425,7 +5276,7 @@ once@^1.3.0, once@^1.3.1:
 
 open@^8.0.0:
   version "8.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  resolved "https://registry.npmjs.org/open/-/open-8.4.2.tgz"
   integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
   dependencies:
     define-lazy-prop "^2.0.0"
@@ -5482,27 +5333,22 @@ pirates@^4.0.1:
 
 point-in-polygon-hao@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/point-in-polygon-hao/-/point-in-polygon-hao-1.1.0.tgz#37f5f4fbe14e89fa8a3bb7f67c9158079d2ede7c"
+  resolved "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.1.0.tgz"
   integrity sha512-3hTIM2j/v9Lio+wOyur3kckD4NxruZhpowUbEgmyikW+a2Kppjtu1eN+AhnMQtoHW46zld88JiYWv6fxpsDrTQ==
 
 point-in-polygon@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/point-in-polygon/-/point-in-polygon-1.1.0.tgz#b0af2616c01bdee341cbf2894df643387ca03357"
+  resolved "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz"
   integrity sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==
 
 polygon-clipping@^0.15.3:
   version "0.15.7"
-  resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.7.tgz#3823ca1e372566f350795ce9dd9a7b19e97bdaad"
+  resolved "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz"
   integrity sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==
   dependencies:
     robust-predicates "^3.0.2"
     splaytree "^3.1.0"
 
-possible-typed-array-names@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
-  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
-
 postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz"
@@ -5572,19 +5418,19 @@ prettier@^3.3.3:
 
 prisma@^5.18.0:
   version "5.18.0"
-  resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.18.0.tgz#5ef69c802a075b7596231ea57003496873610b9e"
+  resolved "https://registry.npmjs.org/prisma/-/prisma-5.18.0.tgz"
   integrity sha512-+TrSIxZsh64OPOmaSgVPH7ALL9dfU0jceYaMJXsNrTkFHO7/3RANi5K2ZiPB1De9+KDxCWn7jvRq8y8pvk+o9g==
   dependencies:
     "@prisma/engines" "5.18.0"
 
 process@^0.11.10:
   version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
 prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
   dependencies:
     loose-envify "^1.4.0"
@@ -5618,31 +5464,41 @@ queue-microtask@^1.2.2:
 
 quickselect@^1.0.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-1.1.1.tgz#852e412ce418f237ad5b660d70cffac647ae94c2"
+  resolved "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz"
   integrity sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ==
 
 quickselect@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
+  resolved "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz"
   integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
 
 rbush@^2.0.1:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/rbush/-/rbush-2.0.2.tgz#bb6005c2731b7ba1d5a9a035772927d16a614605"
+  resolved "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz"
   integrity sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==
   dependencies:
     quickselect "^1.0.1"
 
 rbush@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/rbush/-/rbush-3.0.1.tgz#5fafa8a79b3b9afdfe5008403a720cc1de882ecf"
+  resolved "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz"
   integrity sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==
   dependencies:
     quickselect "^2.0.0"
 
+react-color-palette@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-color-palette/-/react-color-palette-7.2.2.tgz#84d209a425887dce9955466682db353144ab1bb1"
+  integrity sha512-SHLPS3JO+xECRtWB14dAgUPranQMDiGWqn2QVPppAzqWhbUtsg2uVTUd3cpiK3OEa66j7xIDGa/RPjCw98D61g==
+
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-datepicker@^7.3.0:
   version "7.3.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.3.0.tgz#666664a609d4b57b095083fe29d080943fa7b3ed"
+  resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.3.0.tgz"
   integrity sha512-EqRKLAtLZUTztiq6a+tjSjQX9ES0Xd229JPckAtyZZ4GoY3rtvNWAzkYZnQUf6zTWT50Ki0+t+W9VRQIkSJLfg==
   dependencies:
     "@floating-ui/react" "^0.26.2"
@@ -5659,14 +5515,32 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-draggable@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
+react-hook-form@^7.53.0:
+  version "7.53.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
+  integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
+
+react-icons@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
+
 react-is@^16.13.1:
   version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-onclickoutside@^6.13.0:
   version "6.13.1"
-  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz#1f5e0241c08784b6e65745d91aca0d700c548a89"
+  resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz"
   integrity sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==
 
 react-remove-scroll-bar@^2.3.6:
@@ -5690,7 +5564,7 @@ react-remove-scroll@^2.5.6:
 
 react-responsive-modal@^6.4.2:
   version "6.4.2"
-  resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz#666b5c35b232cec617981006c9fe59414531a5a0"
+  resolved "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz"
   integrity sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw==
   dependencies:
     "@bedrock-layout/use-forwarded-ref" "^1.3.1"
@@ -5747,7 +5621,7 @@ readable-stream@^3.6.0:
 
 readable-stream@^4.2.0:
   version "4.5.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz"
   integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
   dependencies:
     abort-controller "^3.0.0"
@@ -5775,16 +5649,6 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
-regexp.prototype.flags@^1.5.1:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
-  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
-  dependencies:
-    call-bind "^1.0.6"
-    define-properties "^1.2.1"
-    es-errors "^1.3.0"
-    set-function-name "^2.0.1"
-
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
@@ -5806,7 +5670,7 @@ reusify@^1.0.4:
 
 rfdc@^1.3.0:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
+  resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
 rimraf@^3.0.2:
@@ -5818,12 +5682,12 @@ rimraf@^3.0.2:
 
 robust-predicates@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-2.0.4.tgz#0a2367a93abd99676d075981707f29cfb402248b"
+  resolved "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz"
   integrity sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==
 
 robust-predicates@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  resolved "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz"
   integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
 
 run-parallel@^1.1.9:
@@ -5840,7 +5704,7 @@ safe-buffer@^5.0.1, safe-buffer@~5.2.0:
 
 safe-buffer@~5.1.1:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 "safer-buffer@>= 2.1.2 < 3.0.0":
@@ -5888,19 +5752,14 @@ semver@^6.0.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.5:
+semver@^7.3.5, semver@^7.5.4:
   version "7.6.2"
   resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
 
-semver@^7.5.4:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
-  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
-
 server-only@^0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  resolved "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz"
   integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
 
 set-blocking@^2.0.0:
@@ -5908,28 +5767,6 @@ set-blocking@^2.0.0:
   resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
-set-function-length@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
-  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
-
-set-function-name@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
-  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    functions-have-names "^1.2.3"
-    has-property-descriptors "^1.0.2"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -5942,16 +5779,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-side-channel@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
-  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
-  dependencies:
-    call-bind "^1.0.7"
-    es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    object-inspect "^1.13.1"
-
 signal-exit@^3.0.0:
   version "3.0.7"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
@@ -5985,7 +5812,7 @@ simple-swizzle@^0.2.2:
 
 skmeans@0.9.7:
   version "0.9.7"
-  resolved "https://registry.yarnpkg.com/skmeans/-/skmeans-0.9.7.tgz#72670cebb728508f56e29c0e10d11e623529ce5d"
+  resolved "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz"
   integrity sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg==
 
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
@@ -6000,24 +5827,17 @@ source-map@~0.6.1:
 
 splaytree@^3.1.0:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/splaytree/-/splaytree-3.1.2.tgz#d1db2691665a3c69d630de98d55145a6546dc166"
+  resolved "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz"
   integrity sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A==
 
 sprintf-js@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz"
   integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
 
-stop-iteration-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
-  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
-  dependencies:
-    internal-slot "^1.0.4"
-
 stoppable@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/stoppable/-/stoppable-1.1.0.tgz#32da568e83ea488b08e4d7ea2c3bcc9d75015d5b"
+  resolved "https://registry.npmjs.org/stoppable/-/stoppable-1.1.0.tgz"
   integrity sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==
 
 streamsearch@^1.1.0:
@@ -6107,11 +5927,21 @@ supports-preserve-symlinks-flag@^1.0.0:
 
 sweepline-intersections@^1.5.0:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/sweepline-intersections/-/sweepline-intersections-1.5.0.tgz#85ab3629a291875926fae0acd508496430d8a647"
+  resolved "https://registry.npmjs.org/sweepline-intersections/-/sweepline-intersections-1.5.0.tgz"
   integrity sha512-AoVmx72QHpKtItPu72TzFL+kcYjd67BPLDoR0LarIk+xyaRg+pDTMFXndIEvZf9xEKnJv6JdhgRMnocoG0D3AQ==
   dependencies:
     tinyqueue "^2.0.0"
 
+sweetalert2-react-content@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz#6fd7299978b2e0221d3049746ff2b39c1a7aa72d"
+  integrity sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==
+
+sweetalert2@^11.14.1:
+  version "11.14.1"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.14.1.tgz#aa066422e1045aa6923ae5d0ef8cad7067b23097"
+  integrity sha512-xadhfcA4STGMh8nC5zHFFWURhRpWc4zyI3GdMDFH/m3hGWZeQQNWhX9xcG4lI9gZYsi/IlazKbwvvje3juL3Xg==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
@@ -6119,7 +5949,7 @@ symbol-tree@^3.2.4:
 
 tabbable@^6.0.0:
   version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
 tailwind-merge@^1.14.0:
@@ -6176,12 +6006,12 @@ tar@^6.1.11:
 
 tarn@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/tarn/-/tarn-3.0.2.tgz#73b6140fbb881b71559c4f8bfde3d9a4b3d27693"
+  resolved "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz"
   integrity sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==
 
 tedious@^18.2.1:
   version "18.3.0"
-  resolved "https://registry.yarnpkg.com/tedious/-/tedious-18.3.0.tgz#49ef1a26b090d71e4d2b87c7fde6170db07fa6d0"
+  resolved "https://registry.npmjs.org/tedious/-/tedious-18.3.0.tgz"
   integrity sha512-/aVCX2VLu9Ihf5UyxifRXfmWQ1P8HNJvapk1as+LMzSdw9AmbNtEHllrffZpNrzBCptcK0Z4m06k+tutL2wowA==
   dependencies:
     "@azure/core-auth" "^1.7.2"
@@ -6216,7 +6046,7 @@ tiny-emitter@^2.1.0:
 
 tinyqueue@^2.0.0, tinyqueue@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
+  resolved "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz"
   integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
 
 to-regex-range@^5.0.1:
@@ -6228,14 +6058,14 @@ to-regex-range@^5.0.1:
 
 topojson-client@3.x:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/topojson-client/-/topojson-client-3.1.0.tgz#22e8b1ed08a2b922feeb4af6f53b6ef09a467b99"
+  resolved "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz"
   integrity sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==
   dependencies:
     commander "2"
 
 topojson-server@3.x:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/topojson-server/-/topojson-server-3.0.1.tgz#d2b3ec095b6732299be76a48406111b3201a34f5"
+  resolved "https://registry.npmjs.org/topojson-server/-/topojson-server-3.0.1.tgz"
   integrity sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw==
   dependencies:
     commander "2"
@@ -6279,13 +6109,13 @@ typed-function@^4.2.1:
 
 uncrypto@0.1.3:
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/uncrypto/-/uncrypto-0.1.3.tgz#e1288d609226f2d02d8d69ee861fa20d8348ef2b"
+  resolved "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz"
   integrity sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==
 
-undici-types@~6.13.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
-  integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
+undici-types@~6.18.2:
+  version "6.18.2"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.18.2.tgz"
+  integrity sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ==
 
 universalify@^0.2.0:
   version "0.2.0"
@@ -6337,16 +6167,16 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
+
 uuid@^8.3.0:
   version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-uuid@^9.0.1:
-  version "9.0.1"
-  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
-  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"
@@ -6407,38 +6237,6 @@ whatwg-url@^5.0.0:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
 
-which-boxed-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which-collection@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
-  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
-  dependencies:
-    is-map "^2.0.3"
-    is-set "^2.0.3"
-    is-weakmap "^2.0.2"
-    is-weakset "^2.0.3"
-
-which-typed-array@^1.1.13:
-  version "1.1.15"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
-  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
-  dependencies:
-    available-typed-arrays "^1.0.7"
-    call-bind "^1.0.7"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.2"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"