대시보드 카드 on/off 토글 추가, 페이지 추가

app/javascript/controllers/index.js

@@ -15,3 +15,6 @@ application.register("sidebar", SidebarController)
 
 import TimerController from "./timer_controller"
 application.register("timer", TimerController)
+
+import ToggleController from "./toggle_controller"
+application.register("toggle", ToggleController)

app/javascript/controllers/modals_controller.js

@@ -5,6 +5,7 @@ import { useClickOutside } from 'stimulus-use'
 export default class extends Controller {
   connect() {
     // useClickOutside(this)
+    console.log("modal stimulus")
     this.boundHandleKeydown = this.handleKeydown.bind(this)
     document.addEventListener("keydown", this.boundHandleKeydown)
     window.addEventListener('modals:close', this.close.bind(this))

app/javascript/controllers/toggle_controller.js

@@ -0,0 +1,40 @@
+// controllers/toggle_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["label", "dot", "background"]
+
+  connect() {
+    this.state = true
+    this.update()
+  }
+
+  toggle() {
+    this.state = !this.state
+    this.update()
+  }
+
+  update() {
+    if (this.state) {
+      this.labelTarget.textContent = "ON"
+      this.labelTarget.classList.add("text-notice")
+      this.labelTarget.classList.remove("text-gray-400")
+
+      this.dotTarget.classList.add("bg-notice")
+      this.dotTarget.classList.remove("bg-gray-400")
+
+      // this.backgroundTarget.classList.add("bg-on-content")
+      // this.backgroundTarget.classList.remove("bg-off-content")
+    } else {
+      this.labelTarget.textContent = "OFF"
+      this.labelTarget.classList.add("text-gray-400")
+      this.labelTarget.classList.remove("text-notice")
+
+      this.dotTarget.classList.add("bg-gray-400")
+      this.dotTarget.classList.remove("bg-notice")
+
+      // this.backgroundTarget.classList.add("bg-off-content")
+      // this.backgroundTarget.classList.remove("bg-on-content")
+    }
+  }
+}