147 lines
5.0 KiB
Vue
147 lines
5.0 KiB
Vue
<template>
|
||
<div class="landing-page-wrap bg-[#F8FAFC] min-h-screen text-slate-800 antialiased">
|
||
<!-- 1. 클린 미니멀 프리미엄 네비게이션 헤더 (기본 홈과 동일) -->
|
||
<AppHeader :siteName="siteName" />
|
||
|
||
<!-- 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-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>
|
||
<NuxtLink :to="`/${encodeURIComponent(parsed.dong)}`" class="hover:text-blue-600 transition-colors">{{ parsed.dong }} 과외</NuxtLink>
|
||
<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>{{ parsed.shortRegionName }} 센터 · 검증된 전문 선생님 100% 매칭</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 3. 상단 히어로 배너 (H1 -> meta -> H2 -> p 순서) -->
|
||
<HeroBanner
|
||
:region="parsed.region"
|
||
:shortRegionName="parsed.shortRegionName"
|
||
:grade="parsed.grade"
|
||
:grade-short="parsed.gradeShort"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 3. 실시간 성과 지표 4선 -->
|
||
<QuickMetrics :regionDong="parsed.dong" />
|
||
|
||
<!-- 4. 인근 학교별 내신 기출 정밀 분석 -->
|
||
<NearbySchools
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 5. 과목별 상세 커리큘럼 & 1등급 도약 솔루션 -->
|
||
<SubjectMastery
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:curriculum="curriculum"
|
||
/>
|
||
|
||
<!-- 6. 1:1 강사진 4단계 검증 프로세스 -->
|
||
<TeacherVerification />
|
||
|
||
<!-- 7. 메타인지 스터디 플래너 & 밀착 코칭 시스템 -->
|
||
<CoachingSystem />
|
||
|
||
<!-- 8. 실제 성적 향상 수기 (해당 학년/과목 100% 매칭) -->
|
||
<SuccessStories
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 9. 수업 진행 4단계 절차 안내 -->
|
||
<ProcessGuide />
|
||
|
||
<!-- 10. 자주 묻는 질문 (FAQ) -->
|
||
<FaqAccordion
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:gradeShort="parsed.gradeShort"
|
||
:shortSido="parsed.shortSido"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||
<FastConsultFocus
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:gradeShort="parsed.gradeShort"
|
||
:shortSido="parsed.shortSido"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
|
||
<SubjectCarousel
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:gradeShort="parsed.gradeShort"
|
||
:shortSido="parsed.shortSido"
|
||
:currentSubject="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 13. 크롤러 및 사용자 탐색용 유기적 내부 링크 허브 (Internal Link Hub) -->
|
||
<InternalLinkHub
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
|
||
<ConsultForm
|
||
:regionName="parsed.shortRegionName"
|
||
:defaultGrade="parsed.grade"
|
||
:defaultSubject="parsed.subjectName"
|
||
/>
|
||
</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'
|
||
|
||
const route = useRoute()
|
||
const config = useRuntimeConfig()
|
||
const siteName = config.public?.siteName || '클래스픽'
|
||
|
||
// URL 파라미터 파싱 (반응형 computed)
|
||
const parsed = computed(() => parseRouteSlug(route.params.slug))
|
||
|
||
// 커리큘럼 데이터 로드
|
||
const curriculum = computed(() => getCurriculumBySubject(parsed.value.subjectKey))
|
||
const allSubjects = getAllSubjectsList()
|
||
const popularRegions = getPopularRegions(12)
|
||
|
||
// 네이버 Yeti 봇 100% 대응 SEO 메타태그 설정
|
||
const seo = computed(() => generateSeoMeta(
|
||
parsed.value,
|
||
config.public.siteName,
|
||
config.public.siteDomain
|
||
))
|
||
|
||
useHead(() => ({
|
||
title: seo.value.title,
|
||
meta: seo.value.meta,
|
||
link: seo.value.link,
|
||
script: seo.value.script
|
||
}))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.landing-page-wrap {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
</style>
|