ui 개선 완료

gyeonggi/components/AppHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-40 w-full transition-all">
+    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
+      <NuxtLink to="/" class="flex items-center gap-3 no-underline">
+        <div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
+          {{ logoLetter }}
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ currentSiteName }}</span>
+          <span class="hidden sm:inline-flex items-center text-[11px] font-semibold text-blue-700 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
+            교육청 등록 협력
+          </span>
+        </div>
+      </NuxtLink>
+      
+      <div class="flex items-center gap-4">
+        <a href="tel:010-5961-5807" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-600 hover:text-blue-600 transition no-underline">
+          <i class="fa-solid fa-phone text-blue-600 text-xs"></i>
+          <span>010-5961-5807</span>
+        </a>
+        <a href="#consult-section" class="bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-bold px-4 sm:px-5 py-2.5 rounded-xl transition shadow-sm hover:shadow flex items-center gap-1.5 no-underline">
+          <span>무료 시범수업 신청</span>
+          <i class="fa-solid fa-arrow-right text-[11px]"></i>
+        </a>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  siteName: {
+    type: String,
+    default: ''
+  }
+})
+
+const config = useRuntimeConfig()
+const currentSiteName = computed(() => {
+  return props.siteName || config.public?.siteName || '1:1 맞춤과외'
+})
+
+const logoLetter = computed(() => {
+  const name = currentSiteName.value.trim()
+  return name.charAt(0) || 'T'
+})
+</script>
+
+<style scoped>
+header {
+  font-family: inherit;
+}
+</style>

gyeonggi/components/HeroBanner.vue

@@ -74,6 +74,14 @@
         </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>
@@ -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) {