142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<template>
|
|
<div class="landing-page-wrap">
|
|
<!-- 1. 광고 랜딩 전용 지역 식별 바 (외부 이탈 링크 없음) -->
|
|
<div class="ad-location-bar">
|
|
<span class="loc-badge-tag">[지역센터]</span>
|
|
<span class="loc-text">{{ parsed.shortRegionName }} ({{ parsed.sigungu }}) 관내 초·중·고 전담</span>
|
|
<span class="loc-tag">1:1 맞춤 배정 센터</span>
|
|
</div>
|
|
|
|
<!-- 2. 상단 히어로 배너 (Header 제거, H1 태그 포함) -->
|
|
<HeroBanner
|
|
:region="parsed.region"
|
|
:shortRegionName="parsed.shortRegionName"
|
|
:grade="parsed.grade"
|
|
: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"
|
|
:subjectName="parsed.subjectName"
|
|
/>
|
|
|
|
<!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
|
<FastConsultFocus
|
|
:regionDong="parsed.dong"
|
|
:grade="parsed.grade"
|
|
:subjectName="parsed.subjectName"
|
|
/>
|
|
|
|
<!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
|
|
<ConsultForm
|
|
:regionName="parsed.shortRegionName"
|
|
:defaultGrade="parsed.grade"
|
|
:defaultSubject="parsed.subjectName"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from 'vue-router'
|
|
import { parseRouteSlug, getCurriculumBySubject, getAllSubjectsList, getPopularRegions } from '~/utils/dataHelper'
|
|
import { generateSeoMeta } from '~/utils/seoHelper'
|
|
|
|
const route = useRoute()
|
|
const config = useRuntimeConfig()
|
|
|
|
// URL 파라미터 파싱
|
|
const slug = route.params.slug
|
|
const parsed = parseRouteSlug(slug)
|
|
|
|
// 커리큘럼 데이터 로드
|
|
const curriculum = getCurriculumBySubject(parsed.subjectKey)
|
|
const allSubjects = getAllSubjectsList()
|
|
const popularRegions = getPopularRegions(12)
|
|
|
|
// 네이버 Yeti 봇 100% 대응 SEO 메타태그 설정
|
|
const seo = generateSeoMeta(
|
|
parsed,
|
|
config.public.siteName,
|
|
config.public.siteDomain
|
|
)
|
|
|
|
useHead({
|
|
title: seo.title,
|
|
meta: seo.meta,
|
|
link: seo.link,
|
|
script: seo.script
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.landing-page-wrap {
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.ad-location-bar {
|
|
max-width: 1080px;
|
|
margin: 10px auto;
|
|
padding: 8px 16px;
|
|
font-size: clamp(0.78rem, 2vw, 0.88rem);
|
|
color: #334155;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.loc-pin {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.loc-text {
|
|
font-weight: 700;
|
|
color: var(--primary-color, #1e3a8a);
|
|
}
|
|
|
|
.loc-tag {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
background: var(--badge-bg, rgba(30, 58, 138, 0.08));
|
|
color: var(--primary-color, #1e3a8a);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|