스케줄러 edit 스타일 리스트로 수정 및 토글 버튼 추가

app/assets/stylesheets/application.tailwind.css

@@ -78,7 +78,7 @@
     }
 
     .select-style {
-        @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs text-base-background
+        @apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs text-base-background
     }
 
     .select-style option {
@@ -86,12 +86,21 @@
     }
 
     .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 {

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="divide-y divide-base-border">
-        <div class="flex justify-between">
+        <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">
+        <ul class="divide-y divide-base-border">
-          <thead>
-          <tr>
-            <th>시간</th>
-            <th>분</th>
-            <th>사용여부</th>
-            <th>온도</th>
-            <th>삭제</th>
-          </tr>
-          </thead>
-          <tbody>
           <% @schedule.each do |s| %>
-            <tr>
+            <li class="flex justify-between items-center px-4 py-2 space-x-4">
-              <td>
+              <div class="flex items-center space-x-6">
+                <!-- 시간 -->
+                <div class="flex flex-col md:flex-row items-center space-x-2">
+                  <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: "select-style text-white" %>
-              </td>
+                    <div>:</div>
-              <td><%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %></td>
+                    <%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %>
-              <td><%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1 %></td>
+                  </div>
-              <td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %></td>
+                </div>
-              <td>
+
+                <!-- 온도 -->
+                <div class="flex flex-col md:flex-row items-center space-x-4">
+                  <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 flex-col md:flex-row items-center space-x-4">
+                <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>
+
+              <!-- 삭제 -->
+              <div>
                 <%= link_to "삭제", schedule_path(s),
                             data: {
                               turbo_method: :delete,
                               turbo_confirm: "정말 삭제하시겠습니까?"
                             },
                             class: "btn bg-danger text-sm" %>
-              </td>
+              </div>
-            </tr>
+            </li>
           <% end %>
-          </tbody>
+        </ul>
-        </table>
       </div>
     <% end %>
     <div class="flex p-4 space-x-4">