시스템 모니터

frontend/components/ThemeToggle.vue

@@ -0,0 +1,112 @@
+<template>
+  <div 
+    class="theme-switch" 
+    :class="{ dark: theme === 'dark' }"
+    @click="toggleTheme"
+    :title="theme === 'dark' ? '라이트 모드로 전환' : '다크 모드로 전환'"
+  >
+    <div class="switch-track">
+      <span class="switch-icon sun">☀️</span>
+      <span class="switch-icon moon">🌙</span>
+    </div>
+    <div class="switch-thumb"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { theme, toggleTheme, initTheme } = useTheme()
+
+onMounted(() => {
+  initTheme()
+})
+</script>
+
+<style scoped>
+.theme-switch {
+  position: relative;
+  width: 56px;
+  height: 28px;
+  background: #e0e0e0;
+  border: 2px solid #ccc;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.3s ease, border-color 0.3s ease;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.theme-switch.dark {
+  background: #3a3a3a;
+  border-color: #666;
+}
+
+.switch-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 6px;
+}
+
+.switch-icon {
+  font-size: 14px;
+  transition: opacity 0.3s ease;
+}
+
+.switch-icon.sun {
+  opacity: 0.4;
+}
+
+.switch-icon.moon {
+  opacity: 0.4;
+}
+
+.theme-switch.dark .switch-icon.sun {
+  opacity: 0.4;
+}
+
+.theme-switch.dark .switch-icon.moon {
+  opacity: 0.4;
+}
+
+.switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #1a1a1a;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
+}
+
+.theme-switch.dark .switch-thumb {
+  transform: translateX(28px);
+  background: #fff;
+}
+
+/* 호버 효과 */
+.theme-switch:hover {
+  border-color: #999;
+}
+
+.theme-switch.dark:hover {
+  border-color: #888;
+}
+
+.theme-switch:hover .switch-thumb {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.theme-switch:active .switch-thumb {
+  width: 24px;
+}
+
+.theme-switch.dark:active .switch-thumb {
+  transform: translateX(24px);
+}
+</style>