불필요한 코드 정리 및 modal 추가

app/controllers/modals_controller.rb

@@ -0,0 +1,5 @@
+class ModalsController < ApplicationController
+  def open
+    render partial: "partials/modals_open", locals: { type: params[:type], close_button: params[:close_button] }
+  end
+end

app/helpers/modals_helper.rb

@@ -0,0 +1,2 @@
+module ModalsHelper
+end

app/javascript/controllers/index.js

@@ -7,5 +7,8 @@ import { application } from "./application"
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)
 
+import ModalsController from "./modals_controller"
+application.register("modals", ModalsController)
+
 import TimerController from "./timer_controller"
 application.register("timer", TimerController)

app/javascript/controllers/modals_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from 'stimulus-use'
+
+// Connects to data-controller="modals"
+export default class extends Controller {
+  connect() {
+    // useClickOutside(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.boundHandleKeydown)
+    window.addEventListener('modals:close', this.close.bind(this))
+
+    const panelElement = document.getElementById("modals-panel")
+    const backdropElement = document.getElementById("modals-backdrop")
+
+    if (panelElement && backdropElement) {
+      setTimeout(() => {
+        panelElement.classList.remove('opacity-0', 'translate-y-4', 'sm:scale-95')
+        panelElement.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100')
+        backdropElement.classList.remove('opacity-0')
+        backdropElement.classList.add('opacity-75')
+      }, 10)  // 애니메이션이 바로 시작되도록 약간의 지연 추가
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.boundHandleKeydown)
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  close(event) {
+    const panelElement = document.getElementById("modals-panel")
+    const backdropElement = document.getElementById("modals-backdrop")
+
+    if (panelElement && backdropElement) {
+      panelElement.classList.remove("opacity-100", "translate-y-0", "sm:scale-100")
+      panelElement.classList.add("opacity-0", "translate-y-4", "sm:scale-95")
+
+      backdropElement.classList.remove("opacity-75")
+      backdropElement.classList.add("opacity-0")
+
+      setTimeout(() => {
+        const modalsFrame = document.querySelector("turbo-frame#modals")
+        if (modalsFrame) {
+          modalsFrame.innerHTML = ""
+          window.location.reload()
+        }
+      }, 300) // 닫힘 애니메이션 시간과 동일하게 300ms 지연 후 모달 제거
+    }
+  }
+}

app/javascript/controllers/timer_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "@hotwired/stimulus"
+import {Controller} from "@hotwired/stimulus"
 
 // Connects to data-controller="timer"
 export default class extends Controller {
@@ -15,8 +15,7 @@ export default class extends Controller {
 
   updateTime() {
     const now = new Date()
-    const formatted = `${now.getFullYear()}년 ${String(now.getMonth() + 1).padStart(2, '0')}월 ${String(now.getDate()).padStart(2, '0')}일 ` +
+    this.outputTarget.textContent = `${now.getFullYear()}년 ${String(now.getMonth() + 1).padStart(2, '0')}월 ${String(now.getDate()).padStart(2, '0')}일 ` +
       `${String(now.getHours()).padStart(2, '0')}시 ${String(now.getMinutes()).padStart(2, '0')}분 ${String(now.getSeconds()).padStart(2, '0')}초`
-    this.outputTarget.textContent = formatted
   }
 }

app/views/layouts/application.html.erb

@@ -24,10 +24,10 @@
 </head>
 
 <body class="h-screen">
+<%= turbo_frame_tag :modals %>
 <main class="flex flex-col h-full divide-y divide-border-table-border">
   <%= render "partials/header" %>
   <div class="flex flex-row flex-1 w-full divide-x divide-border-table-border">
-    <%#= render "partials/sidebar" %>
     <div class="w-full h-full">
       <%= yield %>
     </div>

app/views/modbus/schedule_edit.html.erb

@@ -11,7 +11,9 @@
       <% @schedule.each do |s| %>
         <tr>
           <td><%= s.hour %>시</td>
-          <td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C</td>
+          <td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %>
+            °C
+          </td>
         </tr>
       <% end %>
       </tbody>
@@ -22,3 +24,11 @@
     <%= submit_tag "업데이트", class: "btn bg-primary" %>
   </div>
 <% end %>
+<div class="flex p-4">
+  <%= button_to "추가하기", open_modals_path(type: "add_schedule"),
+                class: "btn btn-default",
+                data: {
+                  turbo_method: :post,
+                  turbo_frame: "modals"
+                } %>
+</div>

app/views/partials/_header.html.erb

@@ -4,8 +4,4 @@
     <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
   </div>
   <div data-timer-target="output" class="text-gray-600"></div>
-<!--  <div class="flex flex-row items-center gap-x-4">-->
-<!--    <i class="fa-solid fa-circle-user text-4xl text-default-slate-dark leading-10"></i>-->
-    <%#= link_to "로그아웃", '', class: "btn" %>
-<!--  </div>-->
 </header>

app/views/partials/_modals_open.html.erb

@@ -0,0 +1,44 @@
+<%= turbo_frame_tag :modals do %>
+  <div class="relative z-40" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <!--
+      Background backdrop, show/hide based on modal state.
+
+      Entering: "ease-out duration-300"
+        From: "opacity-0"
+        To: "opacity-100"
+      Leaving: "ease-in duration-200"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+    <div id="modals-backdrop" class="fixed inset-0 bg-default-slate-dark transition-opacity opacity-0 ease-out duration-500" aria-hidden="true"></div>
+
+    <div class="fixed inset-0 z-40 w-screen overflow-y-auto py-8">
+      <div class="flex min-h-full items-center justify-center text-center sm:items-center">
+        <!--
+          Modal panel, show/hide based on modal state.
+
+          Entering: "ease-out duration-300"
+            From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+            From: "opacity-100 translate-y-0 sm:scale-100"
+            To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        -->
+        <div id="modals-panel" class="p-4 space-y-4 z-40 relative transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all w-full max-w-full mx-2 sm:mx-10 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 ease-out duration-500" data-controller="modals" data-action="modals:click:outside->modals#close">
+          <div>
+            <%= render "partials/modals/#{type}" %>
+          </div>
+          <% if close_button != "false" %>
+            <%= button_tag type: 'button',
+                           data: {
+                             action: 'modals#close'
+                           },
+                           class: 'inline-flex btn w-full' do %>
+              <div class="items-center"><i class="fa-solid fa-square-caret-down"></i> 닫기</div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

app/views/partials/_sidebar.html.erb

@@ -1,42 +0,0 @@
-<nav class="side-bar overflow-y-auto">
-  <div class="menu-group">
-    <div class="menu-group-icon">
-      <i class="fa-solid fa-house text-default-slate-dark text-4xl"></i>
-    </div>
-    <div class="menu-group-name">
-      HOME
-    </div>
-  </div>
-  <div class="menu-group">
-    <div class="menu-group-icon">
-      <i class="fa-solid fa-temperature-high text-default-slate-dark text-4xl"></i>
-    </div>
-    <div class="menu-group-name">
-      메뉴 2
-    </div>
-  </div>
-  <div class="menu-group">
-    <div class="menu-group-icon">
-      <i class="fa-solid fa-fan text-default-slate-dark text-4xl"></i>
-    </div>
-    <div class="menu-group-name">
-      메뉴 3
-    </div>
-  </div>
-  <div class="menu-group">
-    <div class="menu-group-icon">
-      <i class="fa-solid fa-arrows-spin text-default-slate-dark text-4xl"></i>
-    </div>
-    <div class="menu-group-name">
-      메뉴 4
-    </div>
-  </div>
-  <div class="menu-group">
-    <div class="menu-group-icon">
-      <i class="fa-solid fa-gear text-default-slate-dark text-4xl"></i>
-    </div>
-    <div class="menu-group-name">
-      설청
-    </div>
-  </div>
-</nav>

app/views/partials/modals/_add_schedule.html.erb

@@ -0,0 +1 @@
+스케쥴 추가