farmitry_hvac/app/views/environment/index.html.erb

<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 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">
            <i class="fa-solid fa-temperature-quarter text-env-color text-4xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">온도</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">16.5<span class="font-normal 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="font-bold text-3xl">15.5<span class="font-normal text-2xl"> °C</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- 실내습도 -->
    <%= link_to view_humidity_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">
            <i class="fa-solid fa-droplet text-env-color text-4xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">습도</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">78<span class="font-normal 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">80<span class="font-normal text-2xl"> %</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- CO2 -->
    <%= link_to view_co2_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-10 bg-env-color rounded-full text-base-background flex flex-col justify-center">
              <div class="flex flex-row justify-center items-baseline">
                <span class="text-xl">CO</span><span class="text-sm">2</span>
              </div>
            </div>
            <div class="items-baseline">
              <span class="text-2xl">CO</span><span class="text-xl">2</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">현재 CO</span><span class="text-sm">2</div>
            <div class="font-bold text-3xl">700<span class="font-normal text-2xl"> ppm</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">최소 CO</span><span class="text-sm">2</div>
            <div class="font-bold text-3xl">300<span class="font-normal text-2xl"> ppm</span></div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full pl-4">
            <div class="opacity-50">최대 CO</span><span class="text-sm">2</div>
            <div class="font-bold text-3xl">1000<span class="font-normal text-2xl"> ppm</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- none -->
    <div class="dashboard-group"></div>

    <!-- 랙 -->
    <%= link_to rack_index_path, 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">
            <i class="fa-solid fa-timeline text-etc-color text-4xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">랙</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-gear 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">5<span class="font-normal text-2xl"> 라인</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- 센서 구역 -->
    <%= link_to view_area_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">
            <i class="fa-solid fa-tower-broadcast text-etc-color text-4xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">센서구역</span>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-gear 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">6<span class="font-normal text-2xl"> 구역</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- LED -->
    <div class="dashboard-group">
      <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-lightbulb text-etc-color text-4xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">LED</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>

    <!-- Fan -->
    <div class="dashboard-group">
      <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-4xl text-left"></i>
            <div class="items-baseline">
              <span class="text-2xl">FAN</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-warning rounded-full"></div>
              <div class="font-bold text-3xl text-warning">수동</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>