방식 개편

ulsan/pages/[...slug].vue

@@ -3,30 +3,29 @@
     <!-- 1. 클린 미니멀 프리미엄 네비게이션 헤더 (기본 홈과 동일) -->
     <AppHeader :siteName="siteName" />
 
-    <!-- 2. 세련된 지역 센터 식별 서브 바 (모던 칩 배너) -->
-    <div class="bg-blue-50/70 border-b border-blue-100/70 py-2.5 px-4">
+    <!-- 2. 시맨틱 브레드크럼 네비게이션 바 (더세이브 nav.bc 구조 동기화) -->
+    <nav class="bc bg-blue-50/70 border-b border-blue-100/70 py-2.5 px-4" aria-label="현재 위치">
       <div class="max-w-4xl mx-auto flex items-center justify-between flex-wrap gap-2 text-xs">
-        <div class="flex items-center gap-2">
-          <span class="inline-flex items-center gap-1 font-bold text-blue-700 bg-white px-2.5 py-0.5 rounded-full border border-blue-200/80 shadow-xs">
-            <i class="fa-solid fa-location-dot text-blue-600 text-[10px]"></i>
-            {{ parsed.shortRegionName }} 센터
-          </span>
-          <span class="text-slate-600 font-medium">
-            {{ parsed.dong }} ({{ parsed.sigungu }}) 관내 초·중·고 1:1 맞춤 전담
-          </span>
+        <div class="flex items-center gap-1.5 text-slate-600 font-medium">
+          <NuxtLink to="/" class="hover:text-blue-600 font-semibold transition-colors">홈</NuxtLink>
+          <span class="text-slate-400">›</span>
+          <span>{{ parsed.dong }} 과외</span>
+          <span class="text-slate-400">›</span>
+          <strong class="font-bold text-blue-700">{{ parsed.shortSido }} {{ parsed.gradeShort }} {{ parsed.subjectName }} 과외</strong>
         </div>
         <div class="hidden sm:flex items-center gap-1 text-slate-500 font-medium">
           <i class="fa-solid fa-shield-check text-emerald-600 text-xs"></i>
-          <span>검증된 전문 선생님 100% 매칭</span>
+          <span>{{ parsed.shortRegionName }} 센터 · 검증된 전문 선생님 100% 매칭</span>
         </div>
       </div>
-    </div>
+    </nav>
 
-    <!-- 3. 상단 히어로 배너 (H1 태그 포함) -->
+    <!-- 3. 상단 히어로 배너 (H1 -> meta -> H2 -> p 순서) -->
     <HeroBanner 
       :region="parsed.region" 
       :shortRegionName="parsed.shortRegionName" 
       :grade="parsed.grade" 
+      :grade-short="parsed.gradeShort" 
       :subjectName="parsed.subjectName" 
     />
 
@@ -67,6 +66,8 @@
     <FaqAccordion 
       :regionDong="parsed.dong" 
       :grade="parsed.grade" 
+      :gradeShort="parsed.gradeShort" 
+      :shortSido="parsed.shortSido" 
       :subjectName="parsed.subjectName" 
     />
 
@@ -74,6 +75,8 @@
     <FastConsultFocus 
       :regionDong="parsed.dong" 
       :grade="parsed.grade" 
+      :gradeShort="parsed.gradeShort" 
+      :shortSido="parsed.shortSido" 
       :subjectName="parsed.subjectName" 
     />
 
@@ -81,6 +84,8 @@
     <SubjectCarousel 
       :regionDong="parsed.dong" 
       :grade="parsed.grade" 
+      :gradeShort="parsed.gradeShort" 
+      :shortSido="parsed.shortSido" 
       :currentSubject="parsed.subjectName" 
     />
 
@@ -97,13 +102,11 @@
       :defaultGrade="parsed.grade" 
       :defaultSubject="parsed.subjectName" 
     />
-
-    <!-- 14. 클린 사이트 푸터 -->
-    <AppFooter />
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { parseRouteSlug, getCurriculumBySubject, getAllSubjectsList, getPopularRegions } from '~/utils/dataHelper'
 import { generateSeoMeta } from '~/utils/seoHelper'
@@ -112,28 +115,27 @@ const route = useRoute()
 const config = useRuntimeConfig()
 const siteName = config.public?.siteName || '쌤인증'
 
-// URL 파라미터 파싱
-const slug = route.params.slug
-const parsed = parseRouteSlug(slug)
+// URL 파라미터 파싱 (반응형 computed)
+const parsed = computed(() => parseRouteSlug(route.params.slug))
 
 // 커리큘럼 데이터 로드
-const curriculum = getCurriculumBySubject(parsed.subjectKey)
+const curriculum = computed(() => getCurriculumBySubject(parsed.value.subjectKey))
 const allSubjects = getAllSubjectsList()
 const popularRegions = getPopularRegions(12)
 
 // 네이버 Yeti 봇 100% 대응 SEO 메타태그 설정
-const seo = generateSeoMeta(
-  parsed, 
+const seo = computed(() => generateSeoMeta(
+  parsed.value, 
   config.public.siteName, 
   config.public.siteDomain
-)
+))
 
-useHead({
-  title: seo.title,
-  meta: seo.meta,
-  link: seo.link,
-  script: seo.script
-})
+useHead(() => ({
+  title: seo.value.title,
+  meta: seo.value.meta,
+  link: seo.value.link,
+  script: seo.value.script
+}))
 </script>
 
 <style scoped>