71 lines
2.7 KiB
React
71 lines
2.7 KiB
React
|
import { useNavigate } from "react-router-dom";
|
||
|
|
|
||
|
|
export default function WeatherComponent() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
return(
|
||
|
|
<section id="WeatherComponent">
|
||
|
|
|
||
|
|
<div className="popupMap osbInfo">
|
||
|
|
{/* header */}
|
||
|
|
<div className="pmHeader">
|
||
|
|
<div className="rowL">
|
||
|
|
<span className="title">해양관측소</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="pmClose"
|
||
|
|
aria-label="닫기"
|
||
|
|
onClick={() => navigate("/main")}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{/* body */}
|
||
|
|
<div className="pmBody">
|
||
|
|
|
||
|
|
<ul className="osbStatus">
|
||
|
|
<li className="date">
|
||
|
|
2023.10.16 20:54
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">조위</span>
|
||
|
|
<span className="value">251(cm)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">수온</span>
|
||
|
|
<span className="value">19.6(°C)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">염분</span>
|
||
|
|
<span className="value">31.8(PSU)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">기온</span>
|
||
|
|
<span className="value">16.9(°C)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">기압</span>
|
||
|
|
<span className="value">1016.6(hPa)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">풍향</span>
|
||
|
|
<span className="value">315(deg)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">풍속</span>
|
||
|
|
<span className="value">7.1(m/s)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">유속방향</span>
|
||
|
|
<span className="value">-(deg)</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span className="label">유속</span>
|
||
|
|
<span className="value">-(m/s)</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|