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 @@
+
+