diff --git a/.github/workflows/aws-deploy.yml b/.github/workflows/aws-deploy.yml
index 087612c4..c4b63e45 100644
--- a/.github/workflows/aws-deploy.yml
+++ b/.github/workflows/aws-deploy.yml
@@ -15,7 +15,7 @@ jobs:
python-version: "3.10"
- uses: actions/setup-node@v4
with:
- node-version: 22
+ node-version: 21
- uses: aws-actions/setup-sam@v2
- uses: aws-actions/configure-aws-credentials@v4
with:
diff --git a/.github/workflows/lint-check.yml b/.github/workflows/lint-check.yml
index 9f05b4b0..774ab7f9 100644
--- a/.github/workflows/lint-check.yml
+++ b/.github/workflows/lint-check.yml
@@ -10,7 +10,7 @@ jobs:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
- node-version: 22
+ node-version: 21
- name: Enable corepack
run: corepack enable
- name: Install pnpm
diff --git a/packages/client/package.json b/packages/client/package.json
index d4bd8594..0ef31a45 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -21,22 +21,24 @@
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"@tailwindcss/forms": "^0.5.7",
"@types/lodash.isequal": "^4.5.8",
- "@typescript-eslint/eslint-plugin": "^6.21.0",
- "@typescript-eslint/parser": "^6.21.0",
+ "@typescript-eslint/eslint-plugin": "^7.0.0",
+ "@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19",
"cross-env": "^7.0.3",
"eslint": "^8.57.0",
- "eslint-config-airbnb-typescript": "^17.1.0",
+ "eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-svelte": "^2.42.0",
"eslint-plugin-tailwindcss": "^3.17.4",
+ "konva": "^9.3.13",
"postcss": "^8.4.39",
"postcss-load-config": "^5.1.0",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"svelte": "^4.2.18",
"svelte-check": "^3.8.4",
+ "svelte-konva": "^0.3.1",
"svelte-preprocess": "^6.0.2",
"tailwindcss": "^3.4.5",
"tslib": "^2.6.3",
@@ -46,6 +48,7 @@
},
"type": "module",
"dependencies": {
+ "canvas": "^2.11.2",
"lodash.isequal": "^4.5.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.18.10/xlsx-0.18.10.tgz"
}
diff --git a/packages/client/src/components/atom/FloorMap.svelte b/packages/client/src/components/atom/FloorMap.svelte
deleted file mode 100644
index 6b6746d8..00000000
--- a/packages/client/src/components/atom/FloorMap.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-{#key `${selectedBuildingId}-${selectedFloor}`}
-
- {#if selectedSectionId}
-
- {/if}
-
-{/key}
-
-
diff --git a/packages/client/src/components/atom/MapCanvas.svelte b/packages/client/src/components/atom/MapCanvas.svelte
new file mode 100644
index 00000000..98cbbdf8
--- /dev/null
+++ b/packages/client/src/components/atom/MapCanvas.svelte
@@ -0,0 +1,259 @@
+
+
+
+ {#if !isNaN(width) && !isNaN(height)}
+ {#key `${width};${height}`}
+
+
+
+ {#if highlightImage}
+
+ {/if}
+
+
+ {/key}
+ {#if stageX !== 0 || stageY !== 0 || zoomScale !== defaultScale}
+
+ {/if}
+ {:else}
+
+ {/if}
+
diff --git a/packages/client/src/components/molecule/FloorMap.svelte b/packages/client/src/components/molecule/FloorMap.svelte
new file mode 100644
index 00000000..630bb2e8
--- /dev/null
+++ b/packages/client/src/components/molecule/FloorMap.svelte
@@ -0,0 +1,43 @@
+
+
+{#key `${selectedBuildingId}-${selectedFloor}`}
+
+
+{/key}
diff --git a/packages/client/src/components/molecule/reserve/LockerReserveInfo.svelte b/packages/client/src/components/molecule/reserve/LockerReserveInfo.svelte
index 327166b5..775c5a82 100644
--- a/packages/client/src/components/molecule/reserve/LockerReserveInfo.svelte
+++ b/packages/client/src/components/molecule/reserve/LockerReserveInfo.svelte
@@ -3,7 +3,7 @@
import LockerLoadingScreen from '../../atom/LockerLoadingScreen.svelte';
import LockerList from './LockerList.svelte';
import LockerSectionSelector from './LockerSectionSelector.svelte';
- import FloorMap from '../../atom/FloorMap.svelte';
+ import FloorMap from '../FloorMap.svelte';
export let serviceConfig: ServiceConfig;
export let targetDepartmentId: string;
@@ -34,14 +34,14 @@
}
function constructLockerId(
- buildingId: string,
- floor: string,
- section: string,
- num: number,
- ): string {
- const fixedLengthNum = `${num}`.padStart(3, '0');
- return `${buildingId}-${floor}-${section}${fixedLengthNum}`;
- }
+ buildingId: string,
+ floor: string,
+ section: string,
+ num: number,
+ ): string {
+ const fixedLengthNum = `${num}`.padStart(3, '0');
+ return `${buildingId}-${floor}-${section}${fixedLengthNum}`;
+ }
$: if (selectedSection && reservedLockerIds) {
const sectionRange = getSectionRange(selectedSection.subsections);
@@ -93,7 +93,7 @@
{#if serviceConfig && selectedBuildingId && selectedFloor}
배치도
@@ -118,9 +118,9 @@
diff --git a/packages/client/src/routes/test/+page.svelte b/packages/client/src/routes/test/+page.svelte
index f109a2fe..9ec69530 100644
--- a/packages/client/src/routes/test/+page.svelte
+++ b/packages/client/src/routes/test/+page.svelte
@@ -3,6 +3,7 @@
import Modal from '../../components/molecule/Modal.svelte';
import NavigationShell from '../../components/molecule/NavigationShell.svelte';
import PageTitle from '../../components/atom/PageTitle.svelte';
+ import MapCanvas from 'src/components/atom/MapCanvas.svelte';
let open = false;
@@ -19,7 +20,8 @@
- 길어요
+
-
-
+
diff --git a/packages/client/static/floorMaps/05/B1/A.svg b/packages/client/static/floorMaps/05/B1/A.svg
index c3670355..1fd71d27 100644
--- a/packages/client/static/floorMaps/05/B1/A.svg
+++ b/packages/client/static/floorMaps/05/B1/A.svg
@@ -1,4 +1,5 @@
-