대시보드 화면 디자인 수정 중

app/views/nutrient/index.html.erb

@@ -1,65 +1,135 @@
-<div class="w-full h-full content">
-  <div class="flex-1 grid grid-cols-2 lg:grid-cols-4 gap-4">
+<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 -->
-    <div class="dashboard-group">
-      <div class="flex justify-between items-baseline">
-        <div class="text-4xl">pH</div>
-        <div class="text-3xl font-['Chakra_Petch']">7.1</div>
-      </div>
-      <div class="flex justify-between items-baseline">
-        <div class="text-2xl">
-          6.0 ~ 6.0
+    <%= link_to view_temp_environment_path(id: params[:id]), class: "dashboard-group" 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">
+            <div class="size-8 bg-nut-color rounded-full text-base-background flex flex-col justify-center">
+              <div class="flex flex-row justify-center items-baseline">
+                <span class="text-xl">pH</span>
+              </div>
+            </div>
+            <div class="items-baseline">
+              <span class="text-2xl">pH</span>
+            </div>
+          </div>
+          <div class="flex items-center space-x-2">
+            <i class="fa-solid fa-calendar-days text-2xl"></i>
+            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
+          </div>
+        </div>
+        <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">현재 pH</div>
+            <div class="font-bold text-3xl">6.0<span class="font-normal text-2xl"> pH</span></div>
+          </div>
+          <div class="flex flex-col items-baseline text-right w-full pl-4">
+            <div class="opacity-50">오차 pH</div>
+            <div class="font-bold text-3xl">0.1<span class="font-normal text-2xl"> pH</span></div>
+          </div>
         </div>
-        <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
       </div>
-    </div>
+    <% end %>
 
     <!-- EC -->
-    <div class="dashboard-group">
-      <div class="flex justify-between items-baseline">
-        <div class="text-4xl">EC</div>
-        <div class="text-3xl font-['Chakra_Petch']">0.1</div>
-      </div>
-      <div class="flex justify-between items-baseline">
-        <div class="text-2xl">
-          0 ~ 1
+    <%= link_to view_temp_environment_path(id: params[:id]), class: "dashboard-group" 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">
+            <div class="size-8 bg-nut-color rounded-full text-base-background flex flex-col justify-center">
+              <div class="flex flex-row justify-center items-baseline">
+                <span class="text-xl">EC</span>
+              </div>
+            </div>
+            <div class="items-baseline">
+              <span class="text-2xl">EC</span>
+            </div>
+          </div>
+          <div class="flex items-center space-x-2">
+            <i class="fa-solid fa-calendar-days text-2xl"></i>
+            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
+          </div>
+        </div>
+        <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">현재 EC</div>
+            <div class="font-bold text-3xl">1.2<span class="font-normal text-2xl"> mS/cm</span></div>
+          </div>
+          <div class="flex flex-col items-baseline text-right w-full pl-4">
+            <div class="opacity-50">오차 pH</div>
+            <div class="font-bold text-3xl">0.1<span class="font-normal text-2xl"> mS/cm</span></div>
+          </div>
         </div>
-        <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
       </div>
-    </div>
+    <% end %>
 
     <!-- 양액 온도 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">양액 온도</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <!--        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>-->
-          <div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">20.96</span>
-            <span class="text-2xl">°C</span></div>
+      <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">
+            <i class="fa-solid fa-temperature-low text-nut-color text-3xl text-left"></i>
+            <div class="items-baseline">
+              <span class="text-2xl">양액 온도</span>
+            </div>
+          </div>
+        </div>
+        <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="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 수위 정보 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">수위 정보</div>
-        <!--      <div class="flex flex-row justify-between items-baseline w-full">-->
-        <!--        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>-->
-        <!--        <div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">20.96</span>-->
-        <!--          <span class="text-2xl">°C</span></div>-->
-        <!--      </div>-->
+      <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">
+            <i class="fa-solid fa-glass-water-droplet text-nut-color text-3xl text-left"></i>
+            <div class="items-baseline">
+              <span class="text-2xl">수위 정보</span>
+            </div>
+          </div>
+        </div>
+        <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="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">정상</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
     <!-- 원수 탱크 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">원수 탱크</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
+            <div class="items-baseline">
+              <span class="text-2xl">원수 탱크</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -67,12 +137,23 @@
 
     <!-- 원수 펌프 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">원수 펌프</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/pump_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">원수 펌프</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -80,12 +161,31 @@
 
     <!-- 교반기A -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">교반기A</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
+            <div class="items-baseline">
+              <span class="text-2xl">교반기A</span>
+            </div>
+          </div>
+          <div class="flex items-center space-x-2">
+            <i class="fa-solid fa-calendar-days text-2xl"></i>
+            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
+          </div>
+        </div>
+        <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="font-bold text-3xl">30<span class="font-normal text-2xl"> 분</span></div>
+          </div>
+          <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>
           </div>
         </div>
       </div>
@@ -93,12 +193,31 @@
 
     <!-- 교반기B -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">교반기B</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
+            <div class="items-baseline">
+              <span class="text-2xl">교반기B</span>
+            </div>
+          </div>
+          <div class="flex items-center space-x-2">
+            <i class="fa-solid fa-calendar-days text-2xl"></i>
+            <i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
+          </div>
+        </div>
+        <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="font-bold text-3xl">30<span class="font-normal text-2xl"> 분</span></div>
+          </div>
+          <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>
           </div>
         </div>
       </div>
@@ -106,12 +225,23 @@
 
     <!-- 급수/공급 펌프 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">급수/공급 펌프</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/pump_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">급수/공급 펌프</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -119,12 +249,23 @@
 
     <!-- 1번급수 솔벨브 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">1번급수 솔벨브</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">1번급수 솔벨브</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -132,12 +273,23 @@
 
     <!-- 2번급수 솔벨브 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">2번급수 솔벨브</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">2번급수 솔벨브</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -145,12 +297,23 @@
 
     <!-- 퇴수 솔벨브 -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">퇴수 솔벨브</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">퇴수 솔벨브</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -158,12 +321,23 @@
 
     <!-- 솔레노이드 벨브A -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">솔레노이드 벨브A</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">솔레노이드 벨브A</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -171,12 +345,23 @@
 
     <!-- 솔레노이드 벨브B -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">솔레노이드 벨브B</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">솔레노이드 벨브B</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -184,12 +369,23 @@
 
     <!-- 솔레노이드 벨브C -->
     <div class="dashboard-group">
-      <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">솔레노이드 벨브C</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+      <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">
+            <%= render "partials/icons/valve_icon", class: "w-auto h-6 text-etc-color" %>
+            <div class="items-baseline">
+              <span class="text-2xl">솔레노이드 벨브C</span>
+            </div>
+          </div>
+        </div>
+        <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="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>
           </div>
         </div>
       </div>
@@ -198,15 +394,14 @@
     <!-- 긴급 정지 -->
     <div class="dashboard-group">
       <div class="flex flex-col justify-between h-full">
-        <div class="text-xl">긴급 정지</div>
-        <div class="flex flex-row justify-between items-baseline w-full">
-          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
-          <div class="items-baseline text-right w-full">
-            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
+        <div class="text-2xl">긴급 정지</div>
+        <div class="flex flex-row justify-end items-baseline w-full">
+          <div class="flex size-12 bg-etc-color rounded-lg items-center justify-center">
+            <i class="fa-solid fa-pause text-white text-3xl text-left"></i>
           </div>
         </div>
       </div>
     </div>
 
   </div>
-</div>
+</div>