Merge pull request #70 from full-ownership/feature/ui-update

Feature/UI update

Author: femmefatalehaein

package-lock.json

@@ -27,12 +27,14 @@
     "stompjs": "^2.3.3",
     "typed.js": "^2.1.0",
     "vue": "^3.5.12",
+    "vue-carousel": "^0.18.0",
     "vue-chartjs": "^5.3.2",
     "vue-fullpage.js": "^0.2.20",
     "vue-range-slider": "^0.6.0",
     "vue-router": "^4.4.5",
     "vue-simple-range-slider": "^1.1.0",
     "vue-typer": "^1.2.0",
+    "vue3-carousel": "^0.12.0",
     "vue3-kakao-maps": "^2.3.10"
   },
   "devDependencies": {

package.json

@@ -1,17 +1,16 @@
 <script setup>
 import HeaderView from '@/views/HeaderView.vue'
-import FooterView from '@/views/FooterView.vue'
 import MainView from '@/views/MainView.vue'
-import ChatbotButton from './Component/Chatbot/ChatbotButton.vue'
 </script>
 
 <template>
-  <div>
-    <!-- <HeaderView /> -->
-    <HeaderView class="fixed z-50"/>
-    <MainView />
-
+  <div class="relative">
+    <!-- <HeaderView  -->
+    <HeaderView class="left-1/2 transform -translate-x-1/2 z-100"/>
+    <!-- <MainView  -->
+    <MainView class="relative z-10"/>
   </div>
 </template>
+
 <style scoped>
 </style>

src/App.vue

@@ -3,7 +3,7 @@
     <!-- Chat Toggle Button -->
     <button
   @click="toggleChat"
-  class="fixed bottom-6 right-6 w-16 h-16 rounded-full bg-white text-[#4A90E2] flex items-center justify-center shadow-[6px_6px_10px_rgba(0,0,0,0.2),-6px_-6px_10px_rgba(255,255,255,0.8)] hover:shadow-[3px_3px_6px_rgba(0,0,0,0.3),-3px_-3px_6px_rgba(255,255,255,1)] transition-transform transform hover:scale-95"
+  class="fixed bottom-6 right-6 w-16 h-16 rounded-full bg-white text-[#4A90E2] flex items-center justify-center shadow-[0_10px_20px_rgba(0,0,128,0.5)] hover:shadow-[3px_3px_6px_rgba(0,0,0,0.3),-3px_-3px_6px_rgba(255,255,255,1)] transition-transform transform hover:scale-95"
 >
   <img src="@/assets/icons/chatbot.png" alt="챗봇 아이콘" class="w-10 h-10" />
 </button>

src/Component/Chatbot/ChatbotButton.vue

@@ -0,0 +1,23 @@
+<script setup>
+</script>
+
+<template>
+  <footer class="bg-gray-800 w-full text-white py-12 mt-8">
+    <div class="container mx-auto text-center">
+      <p class="text-sm">
+        © 2025 풀소유 (Full Ownership). All rights reserved.
+      </p>
+      <div class="flex justify-center text-xs space-x-6 mt-2">
+        <a href="#" class="hover:text-blue-500">Privacy Policy</a>
+        <a href="#" class="hover:text-blue-500">Terms of Service</a>
+        <a href="#" class="hover:text-blue-500">Contact</a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+footer {
+  font-family: 'Arial', sans-serif;
+}
+</style>