educo/web_6ea_educo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

방식 개편

Browse Source
This commit is contained in:
kyounggu
2026-11-05 14:07:55 +09:00
parent 6d78eccb65
commit 67a7fa0326
156 changed files with 107591 additions and 12747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
seoul/pages/index.vue
+163 -108
View File
@@ -4,9 +4,9 @@
<!-- 1. Header (클린 미니멀 프리미엄 네비게이션) -->
<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">
<div class="flex items-center gap-3">
<NuxtLink to="/" class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
R
{{ siteName.charAt(0) }}
</div>
<div class="flex items-center gap-2">
<span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ siteName }}</span>
@@ -14,7 +14,7 @@
교육청 등록 협력
</span>
</div>
</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">
@@ -32,8 +32,8 @@
<!-- 2. Main Body -->
<main class="w-full pb-20">
<!-- 히어로 섹션 (AI 스타일 형광/물결 제거, 정제된 모던 에듀테크 캔버스) -->
<section class="w-full bg-white border-b border-slate-200/80 pt-12 sm:pt-16 pb-20 px-4 sm:px-6 text-center relative overflow-hidden">
<!-- 히어로 섹션 (네이버 상위 노출 DOM 순서: H1 ➔ meta ➔ H2 ➔ P) -->
<section class="hero-section w-full bg-white border-b border-slate-200/80 pt-12 sm:pt-16 pb-20 px-4 sm:px-6 text-center relative overflow-hidden" itemscope itemtype="https://schema.org/EducationalOrganization">
<!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
@@ -46,16 +46,27 @@
<span>서울대·연고대 및 베테랑 전문 강사진 100% 신원 보증</span>
</div>
<!-- 메인 H1 (검색 상위 노출 30자 규격 및 학부모 고의도 롱테일 키워드) -->
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.2] sm:leading-[1.18] mb-4">
서울 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
<span class="text-blue-600">검증된 전문 선생님 100% 매칭</span>
<!-- 1. H1 -->
<h1 itemprop="headline" class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.2] sm:leading-[1.18] mb-3">
서울 중등 수학 과외 · 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
<span class="text-blue-600">내신·수능 성적 향상의 시작</span>
</h1>
<!-- 서브 헤드라인 (비용 시세 비교 + 무료 시범수업 신뢰 트리거) -->
<p class="text-sm sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
과외 비용·시세 투명 비교부터 무료 시범수업 신청까지.<br class="hidden sm:inline" />
우리 아이 학습 성향과 취약 단원을 정밀 분석하여 <strong>내신 1등급 역전 솔루션</strong>을 제공합니다.
<!-- 2. meta (마이크로데이터) -->
<meta itemprop="name" :content="`${siteName} - 서울 중등 수학 과외 · 서울 중등 과외 1:1 매칭`" />
<meta itemprop="description" content="서울 중등 수학 과외, 서울 중등 과외부터 초등·고등 국영수사과 1:1 방문·화상 맞춤 과외 매칭 및 과외비 투명 비교" />
<meta itemprop="keywords" content="서울 중등 수학 과외, 서울 중등 과외, 서울 고등 수학 과외, 서울 고등 과외, 서울 초등 수학 과외, 서울 초등 과외, 서울 중등 영어 과외, 서울 과외, 대치동 과외" />
<meta itemprop="image" :content="`${siteDomain}/img/math-tutoring.png`" />
<link itemprop="url" :href="`${siteDomain}/`" />
<!-- 3. H2 -->
<h2 class="hero-subtitle text-base sm:text-lg font-bold text-slate-700 mb-3">
서울 중등 과외 · 초등·고등 국영수사과 검증된 전문 선생님 100% 1:1 매칭
</h2>
<!-- 4. 일반글 P -->
<p class="hero-desc text-sm sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
서울 중등 수학 과외 및 서울 중등 과외, 초등·고등 전 과목 과외 비용·시세 투명 비교부터 검증된 전문 선생님 무료 시범수업까지 학생에게 꼭 맞는 1:1 맞춤 수업을 제공합니다.
</p>
<!-- 4대 핵심 신뢰 보증 지표 (Trust Bar) -->
@@ -393,36 +404,38 @@
<div class="text-amber-400 text-xs mb-2">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<h4 class="font-bold text-sm sm:text-base text-slate-800">분당 판교 학부모 박OO님</h4>
<h4 class="font-bold text-sm sm:text-base text-slate-800">양천구 목동 학부모 박OO님</h4>
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"리포트 내용이 학원 상담보다 훨씬 객관적이고 정확했습니다. 선생님 케미도 정말 만족합니다."</p>
</div>
</div>
</section>
<!-- 5. 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
<SubjectCarousel grade="초·중·고" />
<SubjectCarousel :regionDong="defaultDong" shortSido="서울" grade="중학생" gradeShort="중등" />
<!-- 6. FAQ 섹션 (정돈된 아코디언) -->
<!-- 6. FAQ 섹션 (더세이브 방식 네이티브 details/summary 시맨틱 구조) -->
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
<header class="text-center mb-8">
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1 tracking-tight">자주 묻는 질문</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1 tracking-tight">서울 1:1 맞춤 과외 자주 묻는 질문</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">서울 학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
</header>
<div class="space-y-3">
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-xs">
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
<details v-for="(faq, idx) in faqs" :key="idx" :open="idx === 0" class="qa border border-slate-200 rounded-xl overflow-hidden bg-white shadow-xs group">
<summary class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 cursor-pointer list-none flex justify-between items-center hover:bg-slate-50 transition">
<span>{{ faq.q }}</span>
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
</button>
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform group-open:rotate-180"></i>
</summary>
<div class="ans p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
{{ faq.a }}
</div>
</div>
</details>
</div>
</section>
<InternalLinkHub :regionDong="defaultDong" grade="중학생" subjectName="수학" />
</main>
</div>
@@ -434,6 +447,7 @@ import { ref, reactive, computed, onMounted } from 'vue'
const config = useRuntimeConfig()
const siteName = config.public.siteName || '로열클래스 1:1 과외'
const siteDomain = config.public.siteDomain || 'https://aeseo.cloud'
const defaultDong = '대치동'
const isSubmitting = ref(false)
const submitSuccess = ref(false)
@@ -505,17 +519,6 @@ onMounted(() => {
rollingIdx = (rollingIdx + 1) % rollingMessages.length
currentNotice.value = rollingMessages[rollingIdx]
}, 3500)
// 외부 컴포넌트(과목 갤러리 모달 등)에서 과목 선택 시 반응형 폼 자동 동기화
window.addEventListener('select-subject', (e) => {
if (e.detail && e.detail.subject) {
const target = e.detail.subject
const found = subjects.find(s => s.name === target || s.label.startsWith(target))
if (found) {
formData.subject = found.name
}
}
})
})
const subjects = [
@@ -559,24 +562,20 @@ function formatPhone(e) {
const faqs = reactive([
{
q: '무료 시범수업은 어떻게 진행되나요?',
a: '신청서 접수 후 지역 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
open: true
q: '서울 중등 수학 과외 및 서울 중등 과외 무료 시범수업은 어떻게 진행되나요?',
a: '신청서 접수 후 서울 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 서울 초·중·고 과외 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.'
},
{
q: '과외 비용 및 시세는 어떻게 되나요?',
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.',
open: false
q: '서울 중등 수학 과외 · 서울 초·중·고 과외 비용 및 시세는 어떻게 되나요?',
a: '서울 중등 과외 및 초등·고등 과외 비용은 학년과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.'
},
{
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
open: false
q: '서울 중등 과외 선생님 신원과 학력 검증은 어떻게 이루어지나요?',
a: '서울 중등 수학 과외 및 서울 초·중·고 과외 모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.'
},
{
q: '선생님이 아이와 맞지 않으면 어떻게 하나요?',
a: '무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.',
open: false
q: '서울 중등 수학 과외 선생님이 아이와 맞지 않으면 교체가 가능한가요?',
a: '네, 서울 중등 과외 무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.'
}
])
@@ -616,48 +615,97 @@ async function handleSubmit() {
}
}
// SEO 태그 및 소셜 메타데이터 (네이버/구글 검색 최적화 및 3종 구조화 데이터 JSON-LD)
const homeCanonical = siteDomain.endsWith('/') ? siteDomain : `${siteDomain}/`
const homeTitle = `서울 중등 수학 과외 · 서울 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}`
const homeDesc = `서울 중등 수학 과외, 서울 중등 과외, ${defaultDong} 중등 수학 과외 전문 ${siteName}! 초·중·고 국영수사과 과외 비용·시세 투명 비교부터 검증된 전문 선생님 무료 시범수업 신청까지 1:1 맞춤 솔루션`
const allBrandImages = [
`${siteDomain}/img/og-main.png`,
`${siteDomain}/img/math-tutoring.png`,
`${siteDomain}/img/english-tutoring.png`,
`${siteDomain}/img/korean-tutoring.png`,
`${siteDomain}/img/science-tutoring.png`,
`${siteDomain}/img/social-studies-tutoring.png`
]
// SEO 태그 및 소셜 메타데이터 (더세이브 방식 메타태그 + 3분할 구조화 데이터 JSON-LD)
useHead({
title: '로열클래스 1:1 과외 | 서울 초·중·고 검증된 맞춤 과외 매칭',
title: homeTitle,
link: [
{ rel: 'canonical', href: siteDomain.endsWith('/') ? siteDomain : `${siteDomain}/` }
{ rel: 'canonical', href: homeCanonical }
],
meta: [
{ name: 'robots', content: 'index,follow' },
{ name: 'naver-site-verification', content: '299523ed34c7419d7fb724426e14b5def8badac7' },
{ name: 'description', content: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 서울대·연고대 및 베테랑 전문 강사진 1:1 맞춤 배정 솔루션' },
{ name: 'description', content: homeDesc },
{ name: 'keywords', content: '서울 중등 수학 과외, 서울 중등 과외, 서울 고등 수학 과외, 서울 고등 과외, 서울 초등 수학 과외, 서울 초등 과외, 서울 중등 영어 과외, 서울 고등 영어 과외, 서울 과외, 대치동 과외, 대치동 중등 수학 과외' },
{ property: 'og:type', content: 'website' },
{ property: 'og:site_name', content: '로열클래스 1:1 과외' },
{ property: 'og:title', content: '로열클래스 1:1 과외 | 서울 초·중·고 맞춤 과외 매칭' },
{ property: 'og:description', content: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 검증된 전문 선생님 100% 매칭' },
{ property: 'og:url', content: siteDomain.endsWith('/') ? siteDomain : `${siteDomain}/` },
{ property: 'og:locale', content: 'ko_KR' },
{ property: 'og:site_name', content: siteName },
{ property: 'og:title', content: homeTitle },
{ property: 'og:description', content: homeDesc },
{ property: 'og:url', content: homeCanonical },
{ property: 'og:image', content: `${siteDomain}/img/og-main.png` },
{ property: 'og:image:type', content: 'image/png' },
{ property: 'og:image:width', content: '1200' },
{ property: 'og:image:height', content: '630' },
{ property: 'og:image:alt', content: '서울 중등 수학 과외 · 서울 중등 과외' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:title', content: '로열클래스 1:1 과외 | 서울 초·중·고 맞춤 과외 매칭' },
{ name: 'twitter:description', content: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 검증된 전문 선생님 100% 매칭' },
{ name: 'twitter:title', content: homeTitle },
{ name: 'twitter:description', content: homeDesc },
{ name: 'twitter:image', content: `${siteDomain}/img/og-main.png` }
],
script: [
// 1. EducationalOrganization / LocalBusiness 스키마
// 1. @graph (WebSite + WebPage + ImageObject + EducationalOrganization + LocalBusiness)
{
type: 'application/ld+json',
children: JSON.stringify({
'@context': 'https://schema.org',
'@type': ['EducationalOrganization', 'LocalBusiness'],
name: '로열클래스 1:1 과외',
telephone: '+82-10-5961-5807',
url: siteDomain.endsWith('/') ? siteDomain : `${siteDomain}/`,
image: `${siteDomain}/img/og-main.png`,
address: {
'@type': 'PostalAddress',
streetAddress: '테헤란로 123 비전타워 4층',
addressLocality: '강남구',
addressRegion: '서울특별시',
addressCountry: 'KR'
},
description: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 서울대·연고대 및 베테랑 전문 강사진 1:1 맞춤 배정 솔루션',
areaServed: '서울특별시 전지역'
'@graph': [
{
'@type': 'WebSite',
'@id': `${siteDomain}/#site`,
url: homeCanonical,
name: siteName,
inLanguage: 'ko-KR'
},
{
'@type': 'WebPage',
'@id': `${homeCanonical}#page`,
url: homeCanonical,
name: homeTitle,
description: homeDesc,
isPartOf: { '@id': `${siteDomain}/#site` },
primaryImageOfPage: { '@id': `${homeCanonical}#img` },
inLanguage: 'ko-KR'
},
{
'@type': 'ImageObject',
'@id': `${homeCanonical}#img`,
url: `${siteDomain}/img/math-tutoring.png`,
contentUrl: `${siteDomain}/img/math-tutoring.png`,
width: 1080,
height: 1080,
caption: '서울 중등 수학 과외 · 서울 중등 과외'
},
{
'@type': ['EducationalOrganization', 'LocalBusiness'],
'@id': `${siteDomain}/#org`,
name: siteName,
telephone: '+82-10-5961-5807',
url: homeCanonical,
image: allBrandImages,
priceRange: '₩₩',
address: {
'@type': 'PostalAddress',
streetAddress: '테헤란로 123 비전타워 4층',
addressLocality: '강남구',
addressRegion: '서울특별시',
addressCountry: 'KR'
},
description: homeDesc,
areaServed: '서울특별시 전지역'
}
]
})
},
// 2. FAQPage 스키마
@@ -676,50 +724,57 @@ useHead({
}))
})
},
// 3. ItemList 과목별 갤러리 섹션 스키마
// 3. ItemList 과목별 및 학년별 서브 라우터 캐러셀 스키마 (최상위 name, url, image + item: Course 바인딩)
{
type: 'application/ld+json',
children: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'ItemList',
name: '과목별 1:1 맞춤 과외 프로그램',
name: '서울 중등 수학 과외 · 서울 중등 과외 및 학년별·과목별 1:1 맞춤 과외 프로그램',
itemListElement: [
{
{ sub: '수학', grade: '중학생', title: '서울 중등 수학 과외 · 중학생 수학과외', desc: '서울 중등 수학 과외 및 서울 중등 과외 개념 구멍 추적 및 킬러 문항 1:1 완파', img: 'math-tutoring.png' },
{ sub: '영어', grade: '중학생', title: '서울 중등 영어 과외 · 중학생 영어과외', desc: '서울 중등 영어 과외 및 서울 중등 과외 교과서·부교재 전 지문 변형 및 서술형 영작', img: 'english-tutoring.png' },
{ sub: '국어', grade: '중학생', title: '서울 중등 국어 과외 · 중학생 국어과외', desc: '서울 중등 국어 과외 및 비문학 독해 논리와 교과서 문학 1:1 정밀 분석', img: 'korean-tutoring.png' },
{ sub: '과학', grade: '중학생', title: '서울 중등 과학 과외 · 중학생 과학과외', desc: '서울 중등 과학 과외 및 통합과학 원리 이해·물화생지 킬러 단원 정복', img: 'science-tutoring.png' },
{ sub: '사회', grade: '중학생', title: '서울 중등 사회 과외 · 중학생 사회과외', desc: '서울 중등 사회 과외 및 통합사회·한국사 핵심 흐름 만점 전략', img: 'social-studies-tutoring.png' },
{ sub: '수학', grade: '초등학생', title: '서울 초등 수학 과외 · 초등학생 수학과외', desc: '서울 초등 수학 과외 기초 연산 습관 형성 및 중등 선행 심화 대비', img: 'math-tutoring.png' },
{ sub: '영어', grade: '고등학생', title: '서울 고등 영어 과외 · 고등학생 영어과외', desc: '서울 고등 영어 과외 내신 서술형 감점 방지 및 수능 1등급 완성', img: 'english-tutoring.png' },
{ sub: '수학', grade: '고등학생', title: '서울 고등 수학 과외 · 고등학생 수학과외', desc: '서울 고등 수학 과외 공통수학·미적분 킬러 문항 및 내신 1등급 전략', img: 'math-tutoring.png' }
].map((item, idx) => {
const courseUrl = `${siteDomain}/${encodeURIComponent(defaultDong)}/${encodeURIComponent(item.grade)}/${encodeURIComponent(item.sub)}`
const courseImg = `${siteDomain}/img/${item.img}`
const courseName = `${item.title} (${defaultDong})`
return {
'@type': 'ListItem',
position: 1,
name: '수학과외',
description: '개념 구멍 추적 및 킬러 문항 1:1 완파',
image: `${siteDomain}/img/math-tutoring.png`
},
{
'@type': 'ListItem',
position: 2,
name: '영어과외',
description: '교과서·부교재 전 지문 변형 및 서술형 영작',
image: `${siteDomain}/img/english-tutoring.png`
},
{
'@type': 'ListItem',
position: 3,
name: '국어과외',
description: '비문학 독해 논리와 교과서 문학 1:1 정밀 분석',
image: `${siteDomain}/img/korean-tutoring.png`
},
{
'@type': 'ListItem',
position: 4,
name: '과학과외',
description: '통합과학 원리 이해 및 물화생지 킬러 단원 정복',
image: `${siteDomain}/img/science-tutoring.png`
},
{
'@type': 'ListItem',
position: 5,
name: '사회과외',
description: '통합사회·한국사 핵심 흐름 및 사탐 만점 전략',
image: `${siteDomain}/img/social-studies-tutoring.png`
position: idx + 1,
name: courseName,
url: courseUrl,
image: courseImg,
item: {
'@type': 'Course',
name: courseName,
description: item.desc,
url: courseUrl,
image: courseImg,
provider: {
'@type': 'Organization',
name: siteName,
sameAs: siteDomain
},
offers: {
'@type': 'Offer',
category: 'Paid',
priceCurrency: 'KRW',
availability: 'https://schema.org/InStock',
url: courseUrl
},
hasCourseInstance: {
'@type': 'CourseInstance',
courseMode: ['onsite', 'online']
}
}
}
]
})
})
}
]