리액트 코드 및 외부 CSS파일

import React, { useState } from "react";
import "./TopPanel.css";

export const TopPanel = ({ onToggleDEM, onToggleWatershed, onTogglePollution }) => {
  const [showDEM, setShowDEM] = useState(false);
  const [showWatershed, setShowWatershed] = useState(false);
  const [showPollution, setShowPollution] = useState(false);

  return (
    <div className="top-panel">
      <div className="top-row">
        <button className="logo-button">
          <div className="circle" />
          로고
        </button>
        <button className="main-button">수질예측시스템</button>
        <button className="main-button">주제도 찾기</button>
      </div>

      <div className="search-row">
        <select className="dropdown">
          <option>주제도</option>
        </select>
        <div className="search-icon" />
      </div>

      <div className="features">
        <label className="feature">
          <input
            type="checkbox"
            checked={showDEM}
            onChange={(e) => {
              setShowDEM(e.target.checked);
              onToggleDEM(e.target.checked);
            }}
          />
          DEM 보기
        </label>

        <label className="feature">
          <input
            type="checkbox"
            checked={showWatershed}
            onChange={(e) => {
              setShowWatershed(e.target.checked);
              onToggleWatershed(e.target.checked);
            }}
          />
          하천유역 보기
        </label>

        <label className="feature">
          <input
            type="checkbox"
            checked={showPollution}
            onChange={(e) => {
              setShowPollution(e.target.checked);
              onTogglePollution(e.target.checked);
            }}
          />
          오염원 보기
        </label>

        {[...Array(2)].map((_, i) => (
          <div className="feature" key={i}>
            <div className="feature-circle" />
            세부기능
          </div>
        ))}
      </div>
    </div>
  );
};