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

<div class="w-full h-full content overflow-y-auto space-y-4">
  <div class="flex-1 grid grid-cols-2 xl:grid-cols-3 gap-4">
    <!-- 실내온도 -->
    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" 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>
        <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="text-3xl">18.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="text-3xl">18<span class="font-normal text-2xl"> °C</span> ~ 20<span class="font-normal text-2xl"> °C</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- 실내습도 -->
    <%= link_to edit_humidity_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" 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>
        <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="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="text-3xl">75<span class="font-normal text-2xl"> %</span> ~ 80<span class="font-normal text-2xl"> %</span></div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- CO2 -->
    <%= link_to edit_co2_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" 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>
        <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="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="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="text-3xl">1000<span class="font-normal text-2xl"> ppm</span></div>
          </div>
        </div>
      </div>
    <% end %>
  </div>

  <div class="flex-1 grid grid-cols-2 xl:grid-cols-6 gap-4 min-h-32">

    <!-- 스케줄러 동작 -->
    <div class="dashboard-group cursor-pointer w-full h-full bg-base-content">
      <div class="flex flex-col justify-between h-full">
        <div class="dashboard-title" data-modbus-target="statusTitle">스케줄러 동작</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 items-center justify-center">
            <i class="fa-solid fa-play text-etc-color text-5xl text-left"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 긴급 정지 -->
    <div class="dashboard-group cursor-pointer w-full h-full bg-base-content">
      <div class="flex flex-col justify-between h-full">
        <div class="dashboard-title">긴급 정지</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 items-center justify-center">
            <i class="fa-solid fa-stop text-etc-color text-5xl text-left"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- LED 스케줄러 설정 -->
    <div class="dashboard-group cursor-pointer w-full h-full bg-base-content">
      <div class="flex flex-col justify-between h-full">
        <div class="dashboard-title">LED 스케줄러 설정</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 items-center justify-center">
            <i class="fa-solid fa-calendar-days text-etc-color text-5xl text-left"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 재배용 FAN 스케줄러 설정 -->
    <div class="dashboard-group cursor-pointer w-full h-full bg-base-content">
      <div class="flex flex-col justify-between h-full">
        <div class="dashboard-title">재배용 FAN 스케줄러 설정</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 items-center justify-center">
            <i class="fa-solid fa-calendar-days text-etc-color text-5xl text-left"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 환기용 FAN 스케줄러 설정 -->
    <div class="dashboard-group cursor-pointer w-full h-full bg-base-content">
      <div class="flex flex-col justify-between h-full">
        <div class="dashboard-title">환기용 FAN 스케줄러 설정</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 items-center justify-center">
            <i class="fa-solid fa-calendar-days text-etc-color text-5xl text-left"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 환경 스케줄러 설정 -->
    <div class="dashboard-group cursor-pointer w-full h-full bg-base-content">
      <div class="flex flex-col justify-between h-full">
        <div class="dashboard-title">환경 스케줄러 설정</div>
        <div class="flex flex-row justify-end items-baseline w-full">
          <div class="flex size-12 items-center justify-center">
            <i class="fa-solid fa-calendar-days text-etc-color text-5xl text-left"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="flex-1 grid grid-cols-2 xl:grid-cols-6 gap-4">
    <!-- 1번 랙 -->
    <div class="dashboard-group bg-base-content">
      <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">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">LED</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full ml-4">
            <div class="opacity-50">FAN</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2번 랙 -->
    <div class="dashboard-group bg-base-content">
      <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">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">LED</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full ml-4">
            <div class="opacity-50">FAN</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 3번 랙 -->
    <div class="dashboard-group bg-base-content">
      <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">3번 랙</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">LED</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full ml-4">
            <div class="opacity-50">FAN</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 4번 랙 -->
    <div class="dashboard-group bg-base-content">
      <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">4번 랙</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">LED</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full ml-4">
            <div class="opacity-50">FAN</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 5번 랙 -->
    <div class="dashboard-group bg-base-content">
      <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">5번 랙</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">LED</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="flex flex-col items-baseline text-right w-full ml-4">
            <div class="opacity-50">FAN</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 벌통 Spot Light -->
    <div class="dashboard-group bg-base-content">
      <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">벌통 Spot Light</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 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="flex-1 grid grid-cols-1 gap-4">
    <!-- 환기용 FAN -->
    <div class="dashboard-group bg-base-content">
      <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-1 grid grid-cols-2 xl:grid-cols-8 gap-2">
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">1번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">2번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">3번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">4번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">5번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">6번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">7번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">8번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">9번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">10번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">11번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">12번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">13번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">14번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">15번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
          <div class="card px-3 py-1.5 rounded-lg cursor-pointer">
            <div class="opacity-50">16번</div>
            <div class="flex flex-row items-center space-x-2 text-notice">
              <div class="size-5 bg-notice rounded-full"></div>
              <div class="text-3xl">ON</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>