ui 개선 완료

busan/components/HeroBanner.vue

@@ -9,7 +9,7 @@
       <!-- 신뢰 보증 뱃지 -->
       <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-5">
         <span class="w-2 h-2 rounded-full bg-blue-600"></span>
-        <span>{{ region.dong }} 학군 전담 | 서울대·부산대 및 베테랑 강사진 100% 신원 보증</span>
+        <span>{{ region.dong }} 학군 전담 | 서울대·연고대 및 베테랑 강사진 100% 신원 보증</span>
       </div>
       
       <!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
@@ -46,7 +46,7 @@
           <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
           <div>
             <strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
-            <span class="text-[11px] text-slate-500 leading-tight">부산 표준 시세 가이드</span>
+            <span class="text-[11px] text-slate-500 leading-tight">동네 표준 시세 가이드</span>
           </div>
         </div>
 
@@ -74,12 +74,20 @@
         </div>
       </div>
 
+      <!-- 실시간 접수 롤링 바 -->
+      <div class="inline-flex items-center gap-2.5 bg-slate-100/90 border border-slate-200/80 rounded-full px-4 py-1.5 text-xs text-slate-600 shadow-xs mb-6">
+        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
+        <span class="font-bold text-slate-700">실시간 매칭</span>
+        <span class="text-slate-300">|</span>
+        <span class="truncate max-w-[260px] sm:max-w-md font-medium text-slate-600">{{ currentNotice }}</span>
+      </div>
+
       <!-- 태그 목록 -->
       <div class="flex justify-center flex-wrap gap-1.5">
         <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}과외</span>
         <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}{{ subjectName }}과외</span>
         <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ grade }}내신대비</span>
-        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#부산해운대과외</span>
+        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#과외비용시세</span>
         <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#1대1무료시범수업</span>
       </div>
 
@@ -88,7 +96,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps({
   region: {
@@ -109,6 +117,33 @@ const props = defineProps({
   }
 })
 
+const noticeIdx = ref(0)
+let timer = null
+
+const notices = computed(() => {
+  const d = props.region?.dong || '관내'
+  const sub = props.subjectName || '과목'
+  const grd = props.grade || '중학생'
+  return [
+    `${d} ${grd} ${sub} 1:1 맞춤 전담 선생님 매칭 완료`,
+    `${d} 내신 1등급 도약 무료 시범수업 신청 접수 중`,
+    `${d} 학교별 3개년 기출 족보 분석 자료 배부 완료`,
+    `${d} 취약 단원 집중 클리닉 및 모의수업 예약 마감 임박`
+  ]
+})
+
+const currentNotice = computed(() => notices.value[noticeIdx.value % notices.value.length])
+
+onMounted(() => {
+  timer = setInterval(() => {
+    noticeIdx.value = (noticeIdx.value + 1) % notices.value.length
+  }, 3500)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+
 const displayRegionName = computed(() => {
   if (props.shortRegionName) return props.shortRegionName
   if (props.region) {
@@ -116,9 +151,9 @@ const displayRegionName = computed(() => {
     const dong = props.region.dong || ''
     if (sido && dong) {
       let shortSido = sido.slice(0, 2)
-      if (sido.includes('부산')) shortSido = '부산'
-      else if (sido.includes('서울')) shortSido = '서울'
+      if (sido.includes('서울')) shortSido = '서울'
       else if (sido.includes('대구')) shortSido = '대구'
+      else if (sido.includes('부산')) shortSido = '부산'
       else if (sido.includes('인천')) shortSido = '인천'
       else if (sido.includes('광주')) shortSido = '광주'
       else if (sido.includes('대전')) shortSido = '대전'