From c0ea8469dbc13783c4e7d62ea8ba1e824e8dc4da Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 14 Mar 2025 10:48:22 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A7=A8=EC=9C=84=EB=A1=9C=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                     | 27 ++++++++++++++++++-
 src/components/button/ScrollTopButton.vue | 32 +++++++++++++++++++++++
 src/layouts/NormalLayout.vue              |  3 +++
 src/layouts/TheChat.vue                   |  2 +-
 4 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/components/button/ScrollTopButton.vue

diff --git a/public/css/custom.css b/public/css/custom.css
index f85e0b1..b168db7 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -432,4 +432,29 @@ cursor: not-allowed !important;
   overflow-y: auto;
   scrollbar-width: none; 
 }
-/* commuters project list end */
\ No newline at end of file
+/* commuters project list end */
+
+/* Scroll Button */
+
+.scroll-top-btn {
+  bottom: 20px;
+  right: 20px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
+}
+
+.scroll-top-btn.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.scroll-top-btn.hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+}
+
+/* Scroll Button end */
\ No newline at end of file
diff --git a/src/components/button/ScrollTopButton.vue b/src/components/button/ScrollTopButton.vue
new file mode 100644
index 0000000..10efb93
--- /dev/null
+++ b/src/components/button/ScrollTopButton.vue
@@ -0,0 +1,32 @@
+<template>
+    <button
+        @click="scrollToTop"
+        class="scroll-top-btn rounded-pill btn-icon btn-primary position-fixed shadow z-5 border-0"
+        :class="{ 'visible': showButton, 'hidden': !showButton }"
+    >
+        <i class='bx bx-chevron-up'></i>
+    </button>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const showButton = ref(false);
+
+const handleScroll = () => {
+    showButton.value = window.scrollY > 200;
+};
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+onMounted(() => {
+    window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
+</script>
+
diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue
index 0f92a67..034501b 100644
--- a/src/layouts/NormalLayout.vue
+++ b/src/layouts/NormalLayout.vue
@@ -23,6 +23,8 @@
 
         <!-- Drag Target Area To SlideIn Menu On Small Screens -->
         <div class="drag-target"></div>
+
+        <ScrollTopButton />
     </div>
 </template>
 <script setup>
@@ -32,6 +34,7 @@
     import TheChat from './TheChat.vue';
     import { nextTick } from 'vue';
     import { wait } from '@/common/utils';
+    import ScrollTopButton from '@c/button/ScrollTopButton.vue';
 
     window.isDarkStyle = window.Helpers.isDarkStyle();
 
diff --git a/src/layouts/TheChat.vue b/src/layouts/TheChat.vue
index 8102d8d..c4f96ad 100644
--- a/src/layouts/TheChat.vue
+++ b/src/layouts/TheChat.vue
@@ -37,7 +37,7 @@ const sendMessage = () => {
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
-    z-index: 1000;
+    z-index: 4;
 }
 
 </style>