e6f1d6ba46
- 기상청 공공데이터포털 API 연동 (단기+중기 7일 예보) - WeatherService: 3시간 캐시, SKY/PTY 아이콘 매핑 - HTMX 비동기 로딩 + 스켈레톤 UI - 오늘 카드 파란색 강조, 요일/날짜/아이콘/기온 표시
80 lines
3.5 KiB
PHP
80 lines
3.5 KiB
PHP
{{-- 날씨 아이콘 컴포넌트 — @include('dashboard.partials.weather-icon', ['icon' => 'sun']) --}}
|
|
@php $icon = $icon ?? 'cloud'; @endphp
|
|
|
|
@if($icon === 'sun')
|
|
{{-- 맑음 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<circle cx="32" cy="32" r="12" fill="#FBBF24"/>
|
|
<g stroke="#FBBF24" stroke-width="3" stroke-linecap="round">
|
|
<line x1="32" y1="6" x2="32" y2="14"/>
|
|
<line x1="32" y1="50" x2="32" y2="58"/>
|
|
<line x1="6" y1="32" x2="14" y2="32"/>
|
|
<line x1="50" y1="32" x2="58" y2="32"/>
|
|
<line x1="13.6" y1="13.6" x2="19.3" y2="19.3"/>
|
|
<line x1="44.7" y1="44.7" x2="50.4" y2="50.4"/>
|
|
<line x1="13.6" y1="50.4" x2="19.3" y2="44.7"/>
|
|
<line x1="44.7" y1="19.3" x2="50.4" y2="13.6"/>
|
|
</g>
|
|
</svg>
|
|
|
|
@elseif($icon === 'cloud-sun')
|
|
{{-- 구름많음 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<circle cx="22" cy="22" r="9" fill="#FBBF24"/>
|
|
<g stroke="#FBBF24" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="22" y1="5" x2="22" y2="10"/>
|
|
<line x1="22" y1="34" x2="22" y2="37"/>
|
|
<line x1="5" y1="22" x2="10" y2="22"/>
|
|
<line x1="10" y1="10" x2="13.5" y2="13.5"/>
|
|
<line x1="34" y1="10" x2="30.5" y2="13.5"/>
|
|
</g>
|
|
<path d="M48 44H20a10 10 0 0 1-.7-20 14 14 0 0 1 27.4 4A8 8 0 0 1 48 44z" fill="#E5E7EB" stroke="#D1D5DB" stroke-width="1"/>
|
|
</svg>
|
|
|
|
@elseif($icon === 'cloud')
|
|
{{-- 흐림 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<path d="M50 46H18a12 12 0 0 1-1-24 16 16 0 0 1 31 4 10 10 0 0 1 2 20z" fill="#D1D5DB" stroke="#9CA3AF" stroke-width="1"/>
|
|
</svg>
|
|
|
|
@elseif($icon === 'rain')
|
|
{{-- 비 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<path d="M50 36H18a12 12 0 0 1-1-24 16 16 0 0 1 31 4 10 10 0 0 1 2 20z" fill="#D1D5DB" stroke="#9CA3AF" stroke-width="1"/>
|
|
<g stroke="#60A5FA" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="22" y1="40" x2="18" y2="52"/>
|
|
<line x1="32" y1="40" x2="28" y2="52"/>
|
|
<line x1="42" y1="40" x2="38" y2="52"/>
|
|
</g>
|
|
</svg>
|
|
|
|
@elseif($icon === 'snow')
|
|
{{-- 눈 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<path d="M50 36H18a12 12 0 0 1-1-24 16 16 0 0 1 31 4 10 10 0 0 1 2 20z" fill="#D1D5DB" stroke="#9CA3AF" stroke-width="1"/>
|
|
<circle cx="21" cy="46" r="2.5" fill="#93C5FD"/>
|
|
<circle cx="32" cy="44" r="2.5" fill="#93C5FD"/>
|
|
<circle cx="43" cy="46" r="2.5" fill="#93C5FD"/>
|
|
<circle cx="26" cy="53" r="2.5" fill="#93C5FD"/>
|
|
<circle cx="38" cy="53" r="2.5" fill="#93C5FD"/>
|
|
</svg>
|
|
|
|
@elseif($icon === 'sleet')
|
|
{{-- 진눈깨비 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<path d="M50 36H18a12 12 0 0 1-1-24 16 16 0 0 1 31 4 10 10 0 0 1 2 20z" fill="#D1D5DB" stroke="#9CA3AF" stroke-width="1"/>
|
|
<g stroke="#60A5FA" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="22" y1="40" x2="19" y2="49"/>
|
|
<line x1="38" y1="40" x2="35" y2="49"/>
|
|
</g>
|
|
<circle cx="30" cy="47" r="2.5" fill="#93C5FD"/>
|
|
<circle cx="46" cy="47" r="2.5" fill="#93C5FD"/>
|
|
</svg>
|
|
|
|
@else
|
|
{{-- 기본: 흐림 --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="width: 40px; height: 40px;">
|
|
<path d="M50 46H18a12 12 0 0 1-1-24 16 16 0 0 1 31 4 10 10 0 0 1 2 20z" fill="#D1D5DB" stroke="#9CA3AF" stroke-width="1"/>
|
|
</svg>
|
|
@endif
|