헤더 모바일용 메뉴 버튼 추가, 스케줄러 edit view 스타일 수정

스케줄러 edit 스타일 리스트로 수정 및 토글 버튼 추가
스케줄러 view 스타일 리스트로 수정
2025-04-28 13:02:01 +09:00 · 2025-04-28 12:02:08 +09:00 · 2025-04-28 11:26:34 +09:00
9 changed files with 166 additions and 72 deletions
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@ -14,7 +14,7 @@
    /* theme */
    --color-base-background: rgb(39, 44, 56);
    --color-base-secondary: rgb(55, 61, 71);
-    --color-base-text: rgb(152, 158, 172);
+    --color-base-text: rgb(255, 255, 255);
    --color-base-border: rgb(77, 84, 102);

    --base-font-size: 0.85rem;
@ -78,16 +78,29 @@
    }

    .select-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
+        @apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs text-base-background
+    }
+
+    .select-style option {
+        color: theme('colors.base-background');
    }

    .input-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs
+        @apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs
    }

    .textarea-style {
        @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
    }
+
+    /*Toggle Button*/
+    .toggle_style {
+        @apply w-14 h-8 bg-danger rounded-full peer-checked:bg-notice transition-all duration-300
+    }
+
+    .toggle_btn {
+        @apply absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 peer-checked:translate-x-full shadow-sm
+    }
 }

@layer utilities {
@ -183,7 +196,7 @@
    }

    .base-table th {
-        @apply bg-base-text px-2 py-2 text-left font-bold lg:table-cell
+        @apply bg-base-background px-2 py-2 text-left font-bold lg:table-cell
    }

    .base-table td {
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@ -10,5 +10,8 @@ application.register("hello", HelloController)
 import ModalsController from "./modals_controller"
 application.register("modals", ModalsController)

+import SidebarController from "./sidebar_controller"
+application.register("sidebar", SidebarController)
+
 import TimerController from "./timer_controller"
 application.register("timer", TimerController)
--- a/app/javascript/controllers/sidebar_controller.js
+++ b/app/javascript/controllers/sidebar_controller.js
@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "overlay"]
+
+  toggle() {
+    this.menuTarget.classList.toggle("-translate-x-full")
+    this.overlayTarget.classList.toggle("hidden")
+  }
+
+  close() {
+    this.menuTarget.classList.add("-translate-x-full")
+    this.overlayTarget.classList.add("hidden")
+  }
+}
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -25,11 +25,11 @@

 <body class="min-h-screen bg-base-background text-base-text min-w-[400px] overflow-x-auto h-full">
 <%= turbo_frame_tag :modals %>
-<main class="flex flex-col h-full">
+<main class="flex flex-col h-full" data-controller="sidebar">
  <%= render "partials/header" %>
  <div class="flex flex-row flex-1 w-full">
    <%= render "partials/sidebar" %>
-    <div class="flex-1 h-full pb-4 pr-4">
+    <div class="flex-1 h-full pb-4 px-4 md:pl-0">
      <div class="flex-1 h-full content">
        <% if flash[:notice] %>
          <div class="rounded px-4 py-2 bg-accept text-white">
--- a/app/views/partials/_header.html.erb
+++ b/app/views/partials/_header.html.erb
@ -1,9 +1,14 @@
-<header class="flex header" data-controller="timer">
-  <div class="flex flex-row h-full">
-    <%= image_tag "svg/svg_logo.svg", class: "w-fit h-auto mr-4" %>
+<header class="flex header justify-between items-center">
+  <div class="flex flex-row h-full items-center">
+    <%= image_tag "svg/svg_logo.svg", class: "w-auto h-8 mr-4" %>
    <%= link_to root_path do %>
      <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
    <% end %>
  </div>
-  <div data-timer-target="output"></div>
+
+  <div data-timer-target="output" class="hidden md:block"></div>
+
+  <button data-action="click->sidebar#toggle" class="block md:hidden p-2 cursor-pointer">
+    <i class="fa-solid fa-bars text-2xl"></i>
+  </button>
 </header>
--- a/app/views/partials/_sidebar.html.erb
+++ b/app/views/partials/_sidebar.html.erb
@ -1,4 +1,5 @@
-<nav class="side-bar overflow-y-auto">
+<div data-sidebar-target="overlay" data-action="click->sidebar#close" class="fixed inset-0 bg-black/50 z-40 hidden md:hidden"></div>
+<nav class="side-bar overflow-y-auto transition-transform md:translate-x-0 -translate-x-full fixed md:relative top-0 left-0 h-full bg-base-background z-50" data-sidebar-target="menu">
  <div class="menu-group">
    <div class="menu-group-icon">
      <i class="fa-solid fa-house text-base-text/30 text-4xl"></i>
--- a/app/views/schedules/schedule_edit.html.erb
+++ b/app/views/schedules/schedule_edit.html.erb
@ -1,45 +1,62 @@
 <div class="flex flex-col h-full text-white overflow-y-auto">
  <div class="flex flex-col flex-1 divide-y divide-base-border">
-    <%= form_with url: schedule_edit_update_schedules_path, method: :post, class: 'flex flex-col h-full divide-y divide-border-base-border p-4' do %>
+    <%= form_with url: schedule_edit_update_schedules_path, method: :post, class: 'flex flex-col h-full' do %>
      <%= hidden_field_tag :controller_id, params[:id] %>
-      <div class="space-y-4">
-        <div class="flex justify-between">
+      <div class="divide-y divide-base-border">
+        <div class="flex justify-between p-4">
          <div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
          <%= submit_tag "업데이트", class: "btn bg-primary" %>
        </div>
-        <table class="base-table">
-          <thead>
-          <tr>
-            <th>시간</th>
-            <th>분</th>
-            <th>사용여부</th>
-            <th>온도</th>
-            <th>삭제</th>
-          </tr>
-          </thead>
-          <tbody>
+        <ul class="divide-y divide-base-border whitespace-nowrap">
          <% @schedule.each do |s| %>
-            <tr>
-              <td>
+            <li class="flex justify-between items-center px-4 py-2 space-x-4">
+              <div class="flex items-center space-x-4 basis-2/3">
+                <!-- 시간 -->
+                <div class="flex flex-col md:flex-row w-full items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0">
+                  <div class="text-white">시간</div>
+                  <div class="text-xl flex items-center space-x-1">
                    <%= select_tag "schedule[#{s.id}][hour]",
                                   options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
-                               class: "input-style" %>
-              </td>
-              <td><%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %></td>
-              <td><%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1 %></td>
-              <td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %></td>
-              <td>
+                                   class: "select-style text-white" %>
+                    <div>:</div>
+                    <%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %>
+                  </div>
+                </div>
+
+                <!-- 온도 -->
+                <div class="flex flex-col md:flex-row w-full items-center space-x-0 space-y-2 md:space-x-4 md:space-y-0">
+                  <div class="text-white">온도</div>
+                  <div class="text-xl flex items-center space-x-2">
+                    <div>
+                      <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %>
+                    </div>
+                    <div class="text-white text-xl leading-8">°C</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex items-center space-x-6 basis-1/3 justify-end">
+                <!-- 사용 여부 -->
+                <div class="flex flex-col md:flex-row items-center space-x-0 space-y-2 md:space-x-4 md:space-y-0">
+                  <div class="text-white">사용여부</div>
+                  <label class="relative inline-flex items-center cursor-pointer">
+                    <%= 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="toggle_btn"></div>
+                  </label>
+                </div>
+
+                <!-- 삭제 -->
                <%= link_to "삭제", schedule_path(s),
                            data: {
                              turbo_method: :delete,
                              turbo_confirm: "정말 삭제하시겠습니까?"
                            },
                            class: "btn bg-danger text-sm" %>
-              </td>
-            </tr>
+              </div>
+            </li>
          <% end %>
-          </tbody>
-        </table>
+        </ul>
      </div>
    <% end %>
    <div class="flex p-4 space-x-4">
--- a/app/views/schedules/view.html.erb
+++ b/app/views/schedules/view.html.erb
@ -1,30 +1,70 @@
 <div class="flex flex-col h-full divide-y divide-base-border text-white">
-  <div class="flex flex-col flex-1 p-4 space-y-4 overflow-y-hidden">
-    <div class="overflow-y-auto space-y-4">
-      <div class="flex justify-between">
+  <div class="flex flex-col flex-1 space-y-4 overflow-y-hidden">
+    <div class="overflow-y-auto divide-y divide-base-border">
+      <div class="flex justify-between p-4">
        <div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
        <%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %>
      </div>
-      <table class="base-table">
-        <thead>
-        <tr>
-          <th>시간</th>
-          <th>분</th>
-          <th>사용여부</th>
-          <th>온도</th>
-        </tr>
-        </thead>
-        <tbody>
+      <ul class="divide-y divide-base-border">
      <% @schedule.each do |s| %>
-          <tr>
-            <td><%= s.hour %>시</td>
-            <td><%= s.minute %>분</td>
-            <td><%= s.is_active %></td>
-            <td><%= s.temperature %> °C</td>
-          </tr>
+        <li class="flex justify-between items-center px-4 py-2 space-x-4">
+          <div class="flex items-center space-x-6">
+            <!-- 시간 -->
+            <div class="flex flex-col md:flex-row items-baseline space-x-2">
+              <div class="text-white">시간</div>
+              <div class="text-3xl flex items-baseline space-x-1">
+                <div><%= s.hour.to_s.rjust(2, '0') %></div>
+                <div>:</div>
+                <div><%= s.minute.to_s.rjust(2, '0') %></div>
+              </div>
+            </div>
+
+            <!-- 온도 -->
+            <div class="flex flex-col md:flex-row items-baseline space-x-4">
+              <div class="text-white">온도</div>
+              <div class="text-3xl flex items-end space-x-2">
+                <div><%= s.temperature %></div>
+                <div class="text-white text-xl leading-8">°C</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 사용 여부 -->
+          <div class="flex flex-col md:flex-row items-baseline space-x-4">
+            <div class="text-white mb-1">사용여부</div>
+            <div class="text-3xl">
+              <%#= s.is_active %>
+              <% if s.is_active %>
+                <i class="fa-solid fa-check text-notice"></i>
+              <% else %>
+                <i class="fa-solid fa-xmark text-danger"></i>
              <% end %>
-        </tbody>
-      </table>
+            </div>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+
+      <!--      <table class="base-table">-->
+      <!--        <thead>-->
+      <!--        <tr>-->
+      <!--          <th>시간</th>-->
+      <!--          <th>분</th>-->
+      <!--          <th>사용여부</th>-->
+      <!--          <th>온도</th>-->
+      <!--        </tr>-->
+      <!--        </thead>-->
+      <!--        <tbody>-->
+      <%# @schedule.each do |s| %>
+      <!--          <tr>-->
+      <!--            <td><%#= s.hour %>시</td>-->
+      <!--            <td><%#= s.minute %>분</td>-->
+      <!--            <td><%#= s.is_active %></td>-->
+      <!--            <td><%#= s.temperature %> °C</td>-->
+      <!--          </tr>-->
+      <%# end %>
+      <!--        </tbody>-->
+      <!--      </table>-->
    </div>
  </div>
 </div>
--- a/modbus.rb
+++ b/modbus.rb
@ -22,13 +22,13 @@ begin
    end
  end
 rescue
-  error_message = "[#{Time.now}] #{mode} 실행 실패 (station_id: #{controller_id}, value: #{value})"
-  res = Sms.send_one(
-    {
-      to:   '01062619801',
-      from: '01062619801',
-      text: error_message
-    }
-  )
-  puts res
+  # error_message = "[#{Time.now}] #{mode} 실행 실패 (station_id: #{controller_id}, value: #{value})"
+  # res = Sms.send_one(
+  #   {
+  #     to:   '01062619801',
+  #     from: '01062619801',
+  #     text: error_message
+  #   }
+  # )
+  # puts res
 end
Author	SHA1	Message	Date
ming	f7cedfd799	헤더 모바일용 메뉴 버튼 추가, 스케줄러 edit view 스타일 수정	2025-04-28 13:02:01 +09:00
ming	07c5d0fa2a	스케줄러 edit 스타일 리스트로 수정 및 토글 버튼 추가	2025-04-28 12:02:08 +09:00
ming	69c98034d6	스케줄러 view 스타일 리스트로 수정	2025-04-28 11:26:34 +09:00