v4.0.0: 회원·덱 API, 인증 UI, 프로필 및 레이아웃 통일

Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

script/image-utils.js

@@ -0,0 +1,35 @@
+/**
+ * 이미지 파일을 PNG data URL로 리사이즈
+ * @param {File} file
+ * @param {number} [maxSize=320]
+ * @returns {Promise<string>}
+ */
+function resizeImageToPng(file, maxSize = 320) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(new Error('이미지를 읽을 수 없습니다.'));
+        reader.onload = () => {
+            const img = new Image();
+            img.onerror = () => reject(new Error('이미지 형식이 올바르지 않습니다.'));
+            img.onload = () => {
+                const scale = Math.min(maxSize / img.width, maxSize / img.height, 1);
+                const width = Math.max(1, Math.round(img.width * scale));
+                const height = Math.max(1, Math.round(img.height * scale));
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    reject(new Error('이미지 처리에 실패했습니다.'));
+                    return;
+                }
+                ctx.drawImage(img, 0, 0, width, height);
+                resolve(canvas.toDataURL('image/png'));
+            };
+            img.src = reader.result;
+        };
+        reader.readAsDataURL(file);
+    });
+}
+
+window.UaImageUtils = { resizeImageToPng };