From e521498c07482fdea63c5d58695244cc272496c6 Mon Sep 17 00:00:00 2001 From: dongjin kim Date: Thu, 4 Dec 2025 17:56:17 +0900 Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=ED=8C=A8=EB=84=90?= =?UTF-8?q?=20=EB=84=93=EC=9D=B4=20=EC=A1=B0=EC=A0=88=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 39 +++++++++++++++++++++++++++++++++++++++ public/dashboard.html | 2 ++ public/style.css | 30 +++++++++++++++++++++++++----- 3 files changed, 66 insertions(+), 5 deletions(-) diff --git a/public/app.js b/public/app.js index 9c2d75c..7fe9c49 100644 --- a/public/app.js +++ b/public/app.js @@ -391,6 +391,45 @@ document.addEventListener('DOMContentLoaded', () => { if (canvasEl) connect(); window.addEventListener('resize', updateBboxContainerPosition); + // ================================================= + // [신규] Sidebar Resizer (Drag Handle) Logic + // ================================================= + const resizer = document.getElementById('drag-handle'); + const rightPanel = document.querySelector('.mission-right'); + + if (resizer && rightPanel) { + resizer.addEventListener('mousedown', (e) => { + e.preventDefault(); + + // 드래그 시작 시점의 위치와 너비 저장 + const startX = e.clientX; + const startRightWidth = rightPanel.getBoundingClientRect().width; + + // 드래그 중 + const onMouseMove = (e) => { + // 오른쪽 패널은 왼쪽에 있으므로, 왼쪽으로 가면 너비가 늘어나고 오른쪽으로 가면 줄어듦 + // Delta = 현재 마우스 X - 시작 X + // 이동한 만큼 너비에서 뺌 (왼쪽 드래그 -> 음수 -> 너비 증가) + const newWidth = startRightWidth - (e.clientX - startX); + + // 너비 적용 (CSS의 min-width, max-width가 있어서 제한됨) + rightPanel.style.width = `${newWidth}px`; + + // **중요**: 레이아웃이 변경되면 캔버스 오버레이(BBox) 위치가 어긋나므로 재계산 필요 + updateBboxContainerPosition(); + }; + + // 드래그 종료 + const onMouseUp = () => { + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + }); + } + // ================================================= // 3. 모델 파일 관리 로직 // ================================================= diff --git a/public/dashboard.html b/public/dashboard.html index 3697658..da10767 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -94,6 +94,8 @@ +
+