feat. GR_CONTENTS_01 템플릿 제작

layers/components/atoms/Img.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { getResolvedHost } from '#layers/utils/styleUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+interface Props {
+  resourcesData?: PageDataResourceGroup
+  objectFit?: 'contain' | 'cover'
+  alt?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  objectFit: 'contain',
+})
+
+const imagePaths = computed(() => {
+  if (!props.resourcesData?.res_path) return null
+
+  const pcPath =
+    props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
+  const moPath =
+    props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
+
+  return {
+    pc: pcPath ? getResolvedHost(pcPath) : '',
+    mo: moPath ? getResolvedHost(moPath) : '',
+  }
+})
+</script>
+
+<template>
+  <picture v-if="imagePaths">
+    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
+    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
+    <img
+      :src="imagePaths.pc"
+      :alt="alt"
+      :class="`w-full h-full object-${objectFit}`"
+      loading="lazy"
+    />
+  </picture>
+</template>
+
+<style scoped>
+/* 이미지 깨짐 시 보더 및 아이콘 제거 */
+img {
+  border: none;
+  outline: none;
+}
+
+/* 깨진 이미지 아이콘과 alt 텍스트 숨김 */
+img::before,
+img::after {
+  display: none;
+}
+
+/* alt 텍스트 영역 숨김 */
+img[alt] {
+  text-indent: -9999px;
+  overflow: hidden;
+  display: block;
+}
+</style>