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

2025-06-11 22:54:01 +09:00 · 2025-06-11 22:54:01 +09:00 · f4d12c87eb
parent d3c6deaf96
commit f4d12c87eb
14 changed files with 532 additions and 68 deletions
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@ -21,6 +21,8 @@
    --color-base-background: rgb(242, 244, 248);
    --color-base-sidebar: rgb(235, 238, 244);
    --color-base-content: rgb(253, 253, 253);
+    --color-on-content: rgb(192, 216, 245);
+    --color-off-content: rgb(187, 187, 191);
    --color-base-third: rgb(201, 208, 210);
    --color-base-text: rgb(39, 41, 49);
    --color-base-border: rgb(223, 226, 234);
@ -190,7 +192,7 @@

    /*Dashboard*/
    .dashboard-group {
-        @apply rounded-md bg-base-content min-h-32 p-4 flex flex-col justify-between cursor-pointer shadow-xs
+        @apply rounded-md min-h-32 p-4 flex flex-col justify-between cursor-pointer shadow-xs
    }

    /*Pagy*/
--- a/app/controllers/environment_controller.rb
+++ b/app/controllers/environment_controller.rb
@ -3,31 +3,41 @@ class EnvironmentController < ApplicationController
    @controllers = Controller.all
  end

-  def view_temp
-    @controller = Controller.find(params[:id])
-    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
-  end
-
-  def view_humidity
-    @controller = Controller.find(params[:id])
-    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
-  end
-
-  def view_co2
-    @controller = Controller.find(params[:id])
-    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
-  end
+  # def view_temp
+  #   @controller = Controller.find(params[:id])
+  #   @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  # end
+  #
+  # def view_humidity
+  #   @controller = Controller.find(params[:id])
+  #   @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  # end
+  #
+  # def view_co2
+  #   @controller = Controller.find(params[:id])
+  #   @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  # end

  def view_area
    @controller = Controller.find(params[:id])
    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
  end

+  def edit_humidity
+    @controller = Controller.find(params[:id])
+    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  end
+
  def edit_temp
    @controller = Controller.find(params[:id])
    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
  end

+  def edit_co2
+    @controller = Controller.find(params[:id])
+    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  end
+
  def create
    @schedule = Schedule.new(schedule_params)

--- a/app/javascript/controllers/index.js
+++ b/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)
--- a/app/javascript/controllers/modals_controller.js
+++ b/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))
--- a/app/javascript/controllers/toggle_controller.js
+++ b/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")
+    }
+  }
+}
--- a/app/views/environment/edit_co2.html.erb
+++ b/app/views/environment/edit_co2.html.erb
@ -3,7 +3,7 @@
    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
      <i class="fa-solid fa-angle-left text-2xl"></i>
    <% end %>
-    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 CO</span><span class="text-sm">2</span> 스케줄러</div>
  </div>
  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
--- a/app/views/environment/edit_humidity.html.erb
+++ b/app/views/environment/edit_humidity.html.erb
@ -3,7 +3,7 @@
    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
      <i class="fa-solid fa-angle-left text-2xl"></i>
    <% end %>
-    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 습도 스케줄러</div>
  </div>
  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
--- a/app/views/environment/index.html.erb
+++ b/app/views/environment/index.html.erb
@ -1,7 +1,7 @@
 <div class="w-full h-full content overflow-y-auto">
  <div class="flex-1 grid grid-cols-2 xl:grid-cols-4 gap-4">
    <!-- 실내온도 -->
-    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -33,7 +33,7 @@
    <% end %>

    <!-- 실내습도 -->
-    <%= link_to edit_humidity_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_humidity_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -65,7 +65,7 @@
    <% end %>

    <!-- CO2 -->
-    <%= link_to edit_co2_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_co2_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -105,10 +105,13 @@
    <% end %>

    <!-- none -->
-    <div class="dashboard-group"></div>
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background"></div>

    <!-- 랙 -->
-    <%= link_to rack_index_path, class: "dashboard-group" do %>
+    <%= link_to rack_index_path, class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -133,7 +136,7 @@
    <% end %>

    <!-- 센서 구역 -->
-    <%= link_to edit_area_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_area_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -158,7 +161,10 @@
    <% end %>

    <!-- LED -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -182,7 +188,10 @@
    </div>

    <!-- Fan -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
--- a/app/views/nutrient/edit_ec.html.erb
+++ b/app/views/nutrient/edit_ec.html.erb
@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
--- a/app/views/nutrient/edit_mixa.html.erb
+++ b/app/views/nutrient/edit_mixa.html.erb
@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
--- a/app/views/nutrient/edit_mixb.html.erb
+++ b/app/views/nutrient/edit_mixb.html.erb
@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
--- a/app/views/nutrient/edit_ph.html.erb
+++ b/app/views/nutrient/edit_ph.html.erb
@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to nutrient_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
--- a/app/views/nutrient/index.html.erb
+++ b/app/views/nutrient/index.html.erb
@ -1,7 +1,7 @@
 <div class="w-full h-full content overflow-y-auto">
  <div class="flex-1 grid grid-cols-2 xl:grid-cols-4 gap-4">
    <!-- pH -->
-    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -34,7 +34,7 @@
    <% end %>

    <!-- EC -->
-    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -67,7 +67,10 @@
    <% end %>

    <!-- 양액 온도 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -80,7 +83,11 @@
        <hr>
        <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
          <div class="flex flex-col items-baseline text-right w-full">
-            <div class="opacity-50">현재 온도</div>
+            <div class="opacity-50">양액 온도</div>
+            <div class="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
+          </div>
+          <div class="flex flex-col items-baseline text-right w-full pl-4">
+            <div class="opacity-50">원액 온도</div>
            <div class="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
          </div>
        </div>
@ -88,7 +95,10 @@
    </div>

    <!-- 수위 정보 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -103,7 +113,7 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">상태</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
              <div class="font-bold text-3xl text-notice">정상</div>
            </div>
          </div>
@ -112,8 +122,11 @@
    </div>

    <!-- 원수 탱크 -->
-    <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full space-y-2">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
+      <div class="flex flex-col justify-between h-full space-y-2 cursor-pointer">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
@ -127,8 +140,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -136,7 +149,10 @@
    </div>

    <!-- 원수 펌프 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -151,8 +167,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -160,7 +176,10 @@
    </div>

    <!-- 교반기A -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -183,8 +202,8 @@
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -192,7 +211,10 @@
    </div>

    <!-- 교반기B -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -215,8 +237,8 @@
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -224,7 +246,10 @@
    </div>

    <!-- 급수/공급 펌프 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -239,8 +264,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -248,7 +273,10 @@
    </div>

    <!-- 1번급수 솔벨브 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -263,8 +291,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -272,7 +300,10 @@
    </div>

    <!-- 2번급수 솔벨브 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -287,8 +318,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -296,7 +327,10 @@
    </div>

    <!-- 퇴수 솔벨브 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -311,8 +345,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -320,7 +354,10 @@
    </div>

    <!-- 솔레노이드 벨브A -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -335,8 +372,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -344,7 +381,10 @@
    </div>

    <!-- 솔레노이드 벨브B -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -359,8 +399,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -368,7 +408,10 @@
    </div>

    <!-- 솔레노이드 벨브C -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full space-y-2">
        <div class="flex flex-row justify-between w-full">
          <div class="flex flex-row space-x-4 items-center">
@ -383,8 +426,8 @@
          <div class="flex flex-col items-baseline text-right w-full">
            <div class="opacity-50">모드</div>
            <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
            </div>
          </div>
        </div>
@ -392,7 +435,10 @@
    </div>

    <!-- 긴급 정지 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
      <div class="flex flex-col justify-between h-full">
        <div class="text-2xl">긴급 정지</div>
        <div class="flex flex-row justify-end items-baseline w-full">
--- a/config/routes.rb
+++ b/config/routes.rb
@ -41,7 +41,16 @@ Rails.application.routes.draw do
      post "edit_temp_update"
    end
  end
-  resources :nutrient
-
+  resources :nutrient do
+    member do
+      get "edit_ph"
+      get "edit_ec"
+      get "edit_mixa"
+      get "edit_mixb"
+    end
+    collection do
+      post "edit_temp_update"
+    end
+  end
  resources :rack
 end