방식 개편

incheon/pages/[...slug].vue

@@ -3,30 +3,32 @@
     <!-- 1. 클린 미니멀 프리미엄 네비게이션 헤더 (기본 홈과 동일) -->
     <AppHeader :siteName="siteName" />
 
-    <!-- 2. 세련된 지역 센터 식별 서브 바 (모던 칩 배너) -->
-    <div class="bg-blue-50/70 border-b border-blue-100/70 py-2.5 px-4">
+    <!-- 2. 더세이브 방식 시맨틱 브레드크럼 및 지역 센터 식별 서브 바 -->
+    <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">
+        <div class="flex items-center gap-1.5 flex-wrap text-slate-600">
+          <NuxtLink to="/" class="font-semibold text-blue-700 hover:underline">홈</NuxtLink>
+          <span class="text-slate-400">›</span>
+          <NuxtLink :to="`/${encodeURIComponent(parsed.dong)}`" class="hover:underline">{{ parsed.dong }} 과외</NuxtLink>
+          <span class="text-slate-400">›</span>
+          <strong class="font-bold text-slate-900">{{ parsed.shortSido }} {{ parsed.gradeShort }} {{ parsed.subjectName }} 과외</strong>
+        </div>
+        <div class="hidden sm:flex items-center gap-1.5 text-slate-500 font-medium">
           <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>
-        <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>
         </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" 
     />
 
@@ -63,24 +65,30 @@
     <!-- 9. 수업 진행 4단계 절차 안내 -->
     <ProcessGuide />
 
-    <!-- 10. 자주 묻는 질문 (FAQ) -->
+    <!-- 10. 자주 묻는 질문 (FAQ - details/summary 시맨틱 구조) -->
     <FaqAccordion 
       :regionDong="parsed.dong" 
+      :shortSido="parsed.shortSido"
       :grade="parsed.grade" 
+      :gradeShort="parsed.gradeShort"
       :subjectName="parsed.subjectName" 
     />
 
     <!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
     <FastConsultFocus 
       :regionDong="parsed.dong" 
+      :shortSido="parsed.shortSido"
       :grade="parsed.grade" 
+      :gradeShort="parsed.gradeShort"
       :subjectName="parsed.subjectName" 
     />
 
     <!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
     <SubjectCarousel 
       :regionDong="parsed.dong" 
+      :shortSido="parsed.shortSido"
       :grade="parsed.grade" 
+      :gradeShort="parsed.gradeShort"
       :currentSubject="parsed.subjectName" 
     />
 
@@ -97,13 +105,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'
@@ -113,27 +119,26 @@ const config = useRuntimeConfig()
 const siteName = config.public?.siteName || '튜터온'
 
 // URL 파라미터 파싱
-const slug = route.params.slug
-const parsed = parseRouteSlug(slug)
+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>