fix: HeroBanner 반응형 수정 (#177) (#179)

- 배너 이미지 구조 변경

Author: KwonSeRim2

src/assets/icons/main/bannerImage.svg

@@ -1,25 +1,108 @@
 <template>
-  <div class="banner-item">
-    <img :src="banner.image" alt="배너 이미지" class="banner-image" />
+  <div class="banner-item" :style="backgroundStyle">
+    <div class="overlay" :class="`align-${props.banner.position}`">
+      <p class="banner-text" v-html="formattedText"></p>
+      <div class="icon-list">
+        <img
+          v-for="(icon, index) in props.banner.img.slice(1)"
+          :key="index"
+          :src="icon"
+          class="icon-image"
+          alt="아이콘"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-defineProps({
-  banner: Object,
-})
+import { computed } from 'vue'
+
+const props = defineProps({ banner: Object })
+
+// 배경 스타일
+const backgroundStyle = computed(() => ({
+  backgroundImage: `url(${props.banner.img[0]})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: getJustify(props.banner.position),
+  padding: '0 100px',
+  position: 'relative',
+}))
+
+// 텍스트 줄바꿈
+const formattedText = computed(() => props.banner.text.replace(/\n/g, '<br>'))
+
+// 정렬 함수들
+function getJustify(pos) {
+  switch (pos) {
+    case 'left':
+      return 'flex-start'
+    case 'right':
+      return 'flex-end'
+    default:
+      return 'center'
+  }
+}
 </script>
 
 <style scoped>
 .banner-item {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
-.banner-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.overlay {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 위치별 텍스트 및 아이콘 정렬 */
+.overlay.align-left {
+  text-align: left;
+  align-items: flex-start;
+}
+.overlay.align-center {
+  text-align: center;
+  align-items: center;
+}
+.overlay.align-right {
+  text-align: right;
+  align-items: flex-end;
+}
+
+/* 반응형 처리: 작은 화면에서는 무조건 가운데 정렬 */
+@media (max-width: 768px) {
+  .overlay {
+    text-align: center !important;
+    align-items: center !important;
+  }
+
+  .icon-image {
+    height: 30px;
+  }
+}
+
+.banner-text {
+  font-size: 35px;
+  font-weight: var(--fw-semibold);
+  color: #fff;
+  text-shadow: 1px 1px 2px black;
+  white-space: pre-line;
+  margin-bottom: 12px;
+  line-height: 1.2; /* 줄 간격을 조절 (기본은 보통 1.5~1.6) */
+}
+
+.icon-list {
+  display: flex;
+  gap: 12px;
+}
+
+.icon-image {
+  height: 40px;
 }
 </style>

src/assets/main_logo_w.svg

@@ -27,8 +27,25 @@ import BannerItem from './BannerItem.vue'
 import bannerImage1 from '@/assets/icons/main/bannerImage.svg'
 import bannerImage2 from '@/assets/icons/main/bannerImage2.jpg'
 import bannerImage3 from '@/assets/icons/main/bannerImage3.jpg'
+import mainLogo from '@/assets/main_logo_w.svg'
 
-const banners = [bannerImage1, bannerImage2, bannerImage3].map((image) => ({ image }))
+const banners = [
+  {
+    img: [bannerImage1, mainLogo],
+    text: '여정을 기록하는,\n 여행 커뮤니티',
+    position: 'left',
+  },
+  {
+    img: [bannerImage2, mainLogo],
+    text: '여정을 기록하는,\n 여행 커뮤니티',
+    position: 'right',
+  },
+  {
+    img: [bannerImage3, mainLogo],
+    text: '여정을 기록하는,\n 여행 커뮤니티',
+    position: 'center',
+  },
+]
 const bannersWithClone = computed(() => [...banners, banners[0]]) // 마지막에 첫 번째 배너 복제
 
 const currentIndex = ref(0)
@@ -40,6 +57,7 @@ const trackStyle = computed(() => ({
 }))
 
 function nextSlide() {
+  if (isTransitionDisabled.value) return
   if (currentIndex.value < banners.length) {
     currentIndex.value++
   }