맑음 이미지 변환

src/layouts/TheTop.vue

@@ -11,9 +11,9 @@
             <div class="d-flex align-items-center weather-box">
                 <img
                 v-if="weather.icon"
-                :src="`https://openweathermap.org/img/wn/${weather.icon}@2x.png`"
+                :src="customIconUrl"
                 :alt="weather.description"
-                class="weather-icon"
+                :class="customIconClass"
                 />
                 <div class="d-flex flex-column">
                     <span class="weather-desc">{{ weather.description }}</span>
@@ -351,6 +351,20 @@
         tempMax: null,
     });
 
+    const customIconUrl = computed(() => {
+    if (weather.value.icon === "01d" || weather.value.icon === "01n") {
+        return "/img/icons/sunny-custom.png";
+    }
+        return `https://openweathermap.org/img/wn/${weather.value.icon}@2x.png`;
+    });
+
+    const customIconClass = computed(() => {
+    if (weather.value.icon === "01d" || weather.value.icon === "01n") {
+        return "weather-icon custom-sunny-icon";
+    }
+        return "weather-icon";
+    });
+
     const weatherKorean = computed(() => weather.value.description || '날씨 정보 없음');
 
     onMounted(() => {
@@ -425,4 +439,8 @@
     white-space: nowrap;
     overflow: hidden;
 }
+.custom-sunny-icon {
+    width: 5% !important;
+    height: 5% !important;
+}
 </style>