From 03d307056659c04f65c2f00ac719f67478e9ca52 Mon Sep 17 00:00:00 2001
From: DGSWcsh <101883606+ChoiSihun@users.noreply.github.com>
Date: Mon, 26 Aug 2024 10:15:12 +0900
Subject: [PATCH] feat: sheet

---
 canbus-web/route/addRoute.js    |   0
 canbus-web/route/editRoute.js   |   7 ++
 canbus-web/route/editroute.html |  12 +++
 canbus-web/sheet/sheet.html     | 153 ++++++++++++++++++++++++++++++++
 canbus-web/sheet/sheet.js       |  19 ++++
 5 files changed, 191 insertions(+)
 create mode 100644 canbus-web/route/addRoute.js
 create mode 100644 canbus-web/route/editRoute.js
 create mode 100644 canbus-web/sheet/sheet.html
 create mode 100644 canbus-web/sheet/sheet.js
diff --git a/canbus-web/route/addRoute.js b/canbus-web/route/addRoute.js
new file mode 100644
index 0000000..e69de29
diff --git a/canbus-web/route/editRoute.js b/canbus-web/route/editRoute.js
new file mode 100644
index 0000000..5c8391e
--- /dev/null
+++ b/canbus-web/route/editRoute.js
@@ -0,0 +1,7 @@
+useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, []);
\ No newline at end of file
diff --git a/canbus-web/route/editroute.html b/canbus-web/route/editroute.html
index 0dc7065..f6b7b27 100644
--- a/canbus-web/route/editroute.html
+++ b/canbus-web/route/editroute.html
@@ -5,6 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Example</title>
         <style>
+            .gray-bar {
+                width: 35px;
+                height: 4px;
+                position: relative;
+                background: #DCDDDE;
+                border-radius: 8px;
+                margin-bottom: 16px;
+                align-self: center;
+            }
+
             .input-container {
                 display: flex;
                 flex-direction: column;
@@ -12,6 +22,7 @@
                 padding: 20px;
                 border-radius: 10px;
                 background-color: #ffffff;
+                align-self: center;
             }
 
             .input-wrapper {
@@ -78,6 +89,7 @@
     </head>
     <body>
     <div class="input-container">
+        <div class="gray-bar"></div>
         <div>
             <div class="input-wrapper">
                 <input type="text" placeholder="출발 시간을 입력하세요">
diff --git a/canbus-web/sheet/sheet.html b/canbus-web/sheet/sheet.html
new file mode 100644
index 0000000..577a6c7
--- /dev/null
+++ b/canbus-web/sheet/sheet.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Draggable Bottom Modal Sheet</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            background-color: #f0f0f0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        .modal {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+            transition: height 0.3s ease;
+        }
+
+        .modal-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transition: background-color 0.3s ease;
+            pointer-events: none;
+        }
+
+        .modal.show .modal-bg {
+            pointer-events: auto;
+        }
+
+        .modal-content {
+            width: 100%;
+            background-color: white;
+            padding: 0px;
+            border-radius: 15px 15px 0 0;
+            position: relative;
+            transform: translateY(100%);
+            transition: transform 0.3s ease, height 0.3s ease;
+            min-height: 230px;
+        }
+
+        .modal.show .modal-content {
+            transform: translateY(0);
+        }
+        
+        .white-bar {
+            width: 100%;
+            height: 30px;
+            display: flex;
+            justify-content: center; /* Align horizontally to center */
+            align-items: center;    /* Align vertically to center */
+            cursor: grab; /* Add cursor style for dragging */
+        }
+
+        .gray-bar {
+            width: 35px;
+            height: 4px;
+            background: #DCDDDE;
+            border-radius: 8px;
+            margin-top: 12px;
+            margin-bottom: 16px;
+        }
+
+        .white-bar:active {
+            cursor: grabbing;
+        }
+    </style>
+</head>
+<body>
+    <button id="openModalBtn">Open Modal</button>
+
+    <div id="modal" class="modal">
+        <div class="modal-bg"></div>
+        <div class="modal-content">
+            <div class="white-bar">
+                <div class="gray-bar"></div>
+            </div>
+            <div>
+
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const modal = document.getElementById('modal');
+            const modalBg = document.querySelector('.modal-bg');
+            const openModalBtn = document.getElementById('openModalBtn');
+            const modalContent = document.querySelector('.modal-content');
+            const whiteBar = document.querySelector('.white-bar');
+
+            let isDragging = false;
+            let startY = 0;
+            let startHeight = 0;
+            const MIN_HEIGHT = 230;
+            const MAX_HEIGHT = 700;
+
+            function onMouseMove(event) {
+                if (!isDragging) return;
+
+                // Calculate new height and ensure it is not below MIN_HEIGHT
+                const newHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startHeight - (event.clientY - startY)));
+                
+                // Adjust the height and translateY
+                modalContent.style.height = newHeight + 'px';
+                modalContent.style.transform = `translateY(${Math.max(0, MIN_HEIGHT - newHeight)}px)`;
+            }
+
+            function onMouseUp() {
+                isDragging = false;
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            }
+
+            whiteBar.addEventListener('mousedown', function (event) {
+                isDragging = true;
+                startY = event.clientY;
+                startHeight = modalContent.offsetHeight;
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            });
+
+            openModalBtn.addEventListener('click', function () {
+                modal.classList.add('show');
+                modalContent.style.height = MAX_HEIGHT + 'px'; // Set to maximum height when opened
+                modalContent.style.transform = `translateY(0)`;
+            });
+
+            modalBg.addEventListener('click', function () {
+                closeModalBtn.click(); // Trigger close button functionality
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/canbus-web/sheet/sheet.js b/canbus-web/sheet/sheet.js
new file mode 100644
index 0000000..82eb845
--- /dev/null
+++ b/canbus-web/sheet/sheet.js
@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const modal = document.getElementById('modal');
+    const openModalBtn = document.getElementById('openModalBtn');
+    const closeModalBtn = document.getElementById('closeModalBtn');
+
+    openModalBtn.addEventListener('click', function () {
+        modal.classList.add('show');
+    });
+
+    closeModalBtn.addEventListener('click', function () {
+        modal.classList.remove('show');
+    });
+
+    window.addEventListener('click', function (event) {
+        if (event.target === modal) {
+            modal.classList.remove('show');
+        }
+    });
+});
