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-10-20 11:59:57 +09:00
parent 8d9c72f655
commit 97655851fb
11 changed files with 2193 additions and 2206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ulsan/pages/index.vue
+412 -320
View File
@@ -1,346 +1,406 @@
<template>
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative pb-8 min-h-screen w-full">
<template>
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative min-h-screen w-full">
<!-- Header -->
<header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
<!-- 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 space-x-2">
<div class="w-9 h-9 rounded-xl bg-slate-900 flex items-center justify-center text-amber-400 font-extrabold text-lg shadow-sm">
A
<div 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">
S
</div>
<div>
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-slate-950">{{ siteName }}</span>
<span class="text-[10px] font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded-full ml-1.5 border border-red-200">초격차 1등급</span>
<div class="flex items-center gap-2">
<span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ siteName }}</span>
<span class="hidden sm:inline-flex items-center text-[11px] font-semibold text-blue-700 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
교육청 등록 협력
</span>
</div>
</div>
<div class="flex items-center space-x-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-red-600 transition">
<i class="fa-solid fa-phone text-red-600"></i>
<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">
<i class="fa-solid fa-phone text-blue-600 text-xs"></i>
<span>010-5961-5807</span>
</a>
<a href="#leadFormSection" class="bg-slate-950 hover:bg-slate-800 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5 border border-slate-800">
<span>마스터 플랜 신청</span>
<i class="fa-solid fa-arrow-right text-[11px] text-amber-400"></i>
<a href="#leadFormSection" class="bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-bold px-4 sm:px-5 py-2.5 rounded-xl transition shadow-sm hover:shadow flex items-center gap-1.5">
<span>무료 시범수업 신청</span>
<i class="fa-solid fa-arrow-right text-[11px]"></i>
</a>
</div>
</div>
</header>
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
<main class="w-full bg-[#F8FAFC] min-h-screen pb-20">
<!-- 2. Main Body -->
<main class="w-full pb-20">
<!-- 히어로 섹션 (매트 다크 차콜 & 크림슨 레드/골드 풀와이드) -->
<section class="w-full bg-gradient-to-b from-[#0F172A] via-[#162033] to-[#1E293B] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
<div class="absolute -right-24 -top-24 w-96 h-96 bg-red-500/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-amber-500/20 rounded-full blur-3xl pointer-events-none"></div>
<!-- 히어로 섹션 (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">
<!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
<div class="max-w-4xl mx-auto relative z-10">
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-slate-200 mb-5 shadow-sm">
<span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-ping"></span>
<span>의치한약수 & 자사·특목고 1등급 마스터 시스템</span>
<!-- 신뢰 인증 뱃지 -->
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-6">
<span class="w-2 h-2 rounded-full bg-blue-600"></span>
<span>옥동·신정·매곡·무거 등 울산 전지역 전담 | 서울대·UNIST 및 베테랑 강사진 100% 신원 보증</span>
</div>
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
의대·치대·서울대 및 특목자사고 목표<br class="hidden sm:inline">
<span class="text-amber-400 underline decoration-wavy decoration-amber-500">전과목 올 1등급 초격차 마스터 플랜</span> 무료 정밀 심층 진단
<!-- 메인 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>
</h1>
<p class="text-xs sm:text-base text-slate-300 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
상위 1%의 벽을 넘는 고난도 킬러 문항 해결력과 완벽한 내신 서술형 방어로 최상위권 합격을 완성합니다.
<!-- 서브 헤드라인 (비용 시세 비교 + 옥동 등 울산 학교 기출 분석 + 무료 시범수업) -->
<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>을 제공합니다.
</p>
<!-- 지표 카운터 -->
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
<div>
<div class="text-[11px] sm:text-xs text-slate-400">자사·특목 학생비율</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">88.5<span class="text-xs sm:text-sm font-normal">%</span></div>
<!-- 4대 핵심 신뢰 보증 지표 (Trust Bar) -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-8">
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
<span class="text-[11px] text-slate-500 leading-tight">학력·경력·신원 전수 인증</span>
</div>
</div>
<div class="border-x border-white/20">
<div class="text-[11px] sm:text-xs text-slate-400">1등급 유지율</div>
<div class="font-extrabold text-base sm:text-2xl text-amber-400 mt-0.5">97.4<span class="text-xs sm:text-sm font-normal">%</span></div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
<span class="text-[11px] text-slate-500 leading-tight">직접 수업받아보고 결정</span>
</div>
</div>
<div>
<div class="text-[11px] sm:text-xs text-slate-400">킬러 정답률</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">92.1<span class="text-xs sm:text-sm font-normal">%</span></div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 시세 비교</strong>
<span class="text-[11px] text-slate-500 leading-tight">울산 표준 시세 투명 안내</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
<span class="text-[11px] text-slate-500 leading-tight">울산 관내 중·고교 족보</span>
</div>
</div>
</div>
<!-- 실시간 롤링 알림 -->
<div class="bg-black/40 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-300 border border-white/15 mx-auto max-w-md shadow-md">
<span class="bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
<span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</span>
<!-- 실시간 매칭 알림 롤링 바 (세련된 미니멀 디자인) -->
<div class="inline-flex items-center gap-2.5 bg-slate-100/90 border border-slate-200/80 rounded-full px-4 py-1.5 text-xs text-slate-600 shadow-xs">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="font-bold text-slate-700">실시간 접수</span>
<span class="text-slate-300">|</span>
<span class="text-slate-600 font-medium animate-pulse">{{ currentRollingMsg }}</span>
</div>
</div>
</section>
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
<!-- 3. 고전환 퀵 간편 신청 폼 섹션 (토스/숨고 스타일 직관적 세그먼트 칩 선택형) -->
<section id="leadFormSection" class="max-w-3xl mx-auto px-4 sm:px-6 -mt-10 relative z-20">
<div class="bg-white rounded-2xl border border-slate-200/90 shadow-xl shadow-slate-200/50 p-6 sm:p-9">
<header class="text-center mb-6 pb-4 border-b border-slate-100">
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-800 mb-2">
선착순 30명 초격차 킬러 분석서 무료
</span>
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
최상위권 목표 과목을 선택하세요!
<div class="text-center mb-7">
<span class="inline-block text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full mb-2">30초 빠른 간편 신청</span>
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900">
울산 우리 동네 과외 시세 확인 & 무료 시범수업 신청
</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">
학생의 취약 킬러 유형을 분석하여 1등급 전문 강사를 1:1 매칭해 드립니다.
신청 즉시 전담 학습 매니저가 1:1 맞춤 상담 및 최적의 선생님을 배정해 드립니다.
</p>
</header>
</div>
<form @submit.prevent="handleSubmit" class="space-y-5">
<form @submit.prevent="handleSubmit" class="space-y-6">
<!-- 학년 & 취약 과목 -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
학년 선택 <span class="text-red-600">*</span>
</label>
<select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none font-medium transition">
<option value="" disabled>학년 선택</option>
<optgroup label="고등부 (의대·수능·자사고 1등급)">
<option value="고등학교 1학년">고등학교 1학년 (자사고 내신 1등급 셋업)</option>
<option value="고등학교 2학년">고등학교 2학년 (과탐·수학 킬러 완벽 정복)</option>
<option value="고등학교 3학년/N수">고등학교 3학년 / N수 (의치약대 수능 파이널)</option>
</optgroup>
<optgroup label="중등부 (특목·자사고 대비)">
<option value="중학교 1~2학년">중학교 1~2학년 (수학·과학 심화 선행)</option>
<option value="중학교 3학년">중학교 3학년 (특목고·영재고 실전 대비)</option>
</optgroup>
</select>
</div>
<div>
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
집중 과목 <span class="text-red-600">*</span>
</label>
<select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none font-medium transition">
<option value="" disabled>과목 선택</option>
<option value="수학">수학 (미적분/기하 킬러 문항)</option>
<option value="과학">과학 (물리·화학·생명 킬러 도표)</option>
<option value="영어">영어 (고난도 빈칸·순서배열 1등급)</option>
<option value="국어">국어 (수능 고난도 비문학 기술·경제)</option>
<option value="전과목/초격차">전과목 올 1등급 입시 마스터</option>
</select>
</div>
</div>
<!-- 빠른 과목 픽 -->
<!-- 대상 학년 선택 -->
<div>
<div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
<span>빠른 과목 픽 (PICK)</span>
<span class="text-xs text-red-600 font-semibold">터치 시 자동 선택</span>
</div>
<div class="grid grid-cols-5 gap-2 text-center">
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
1. 학생 대상 학년 <span class="text-blue-600">*</span>
</label>
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
<button
v-for="subj in subjects"
:key="subj.name"
type="button"
@click="formData.subject = subj.name"
v-for="grade in gradeOptions"
:key="grade"
@click="formData.grade = grade"
:class="[
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
formData.subject === subj.name
? 'border-2 border-red-600 bg-red-50 text-red-800 ring-2 ring-red-300/50'
: 'border border-slate-200 text-slate-700 hover:border-red-400 bg-white'
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
formData.grade === grade
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
]"
>
<span>{{ subj.label }}</span>
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-red-700 font-semibold' : 'text-slate-400'">
{{ subj.badge }}
</span>
{{ grade }}
</button>
</div>
</div>
<!-- 공부 고민 체크박스 -->
<!-- 희망 과목 선택 -->
<div>
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
2. 희망 과목 <span class="text-blue-600">*</span>
</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-red-50/50 transition">
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-red-600 rounded border-slate-300 focus:ring-red-500">
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
</label>
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
<button
type="button"
v-for="sub in subjectOptions"
:key="sub"
@click="formData.subject = sub"
:class="[
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
formData.subject === sub
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
]"
>
{{ sub }}
</button>
</div>
</div>
<!-- 거주 지역 / 학교 -->
<!-- 수업 형태 선택 -->
<div>
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
학교명 및 목표 학과 <span class="text-slate-400 font-normal text-xs">(최상위권 전담 배치)</span>
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
3. 희망 수업 형태
</label>
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 반포동 / 세화고 (목표: 의예과)" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none placeholder:text-slate-400 transition">
<div class="grid grid-cols-3 gap-2">
<button
type="button"
v-for="mode in lessonModes"
:key="mode.id"
@click="formData.lessonType = mode.id"
:class="[
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center flex items-center justify-center gap-1.5',
formData.lessonType === mode.id
? 'bg-slate-900 text-white border-slate-900 shadow-sm'
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100'
]"
>
<i :class="mode.icon" class="text-xs"></i>
<span>{{ mode.label }}</span>
</button>
</div>
</div>
<!-- 학부모 연락처 -->
<!-- 거주 지역 (동/구 단위 입력) -->
<div>
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
학부모 연락처 <span class="text-red-600">*</span>
<span class="text-slate-400 font-normal text-xs">(킬러 분석표 발송용)</span>
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
4. 거주 지역 (동 이름)
</label>
<div class="relative">
<i class="fa-solid fa-location-dot absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
<input
type="tel"
id="parentPhone"
v-model="formData.phone"
@input="formatPhone"
required
placeholder="010-0000-0000"
maxlength="13"
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3.5 pl-11 outline-none tracking-wider"
>
<i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
type="text"
v-model="formData.region"
placeholder="예: 울산 남구 옥동, 중구 유곡동 등"
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm transition"
/>
</div>
</div>
<!-- 개인정보 동의 -->
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-red-600 rounded border-slate-300 focus:ring-red-500">
<label for="privacyAgree" class="cursor-pointer">
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
<!-- 학습 고민 다중 선택 -->
<div>
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
5. 현재 가장 큰 학습 고민 (중복 선택 가능)
</label>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<button
type="button"
v-for="concern in concernOptions"
:key="concern"
@click="toggleConcern(concern)"
:class="[
'py-2 px-2.5 rounded-xl text-xs font-medium border transition-all text-center',
formData.concerns.includes(concern)
? 'bg-blue-50 text-blue-700 border-blue-300 font-bold'
: 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'
]"
>
{{ concern }}
</button>
</div>
</div>
<!-- 학부모 연락처 입력 -->
<div>
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
6. 상담 받으실 학부모님 연락처 <span class="text-blue-600">*</span>
</label>
<div class="relative">
<i class="fa-solid fa-phone absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
<input
type="tel"
v-model="formData.phone"
@input="formatPhoneNumber"
maxlength="13"
placeholder="010-0000-0000"
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm font-semibold tracking-wide transition"
required
/>
</div>
<p class="text-[11px] text-slate-400 mt-1 pl-1">
* 과외 비용 및 시범수업 안내를 위해 안심번호로 안전하게 연결됩니다.
</p>
</div>
<!-- 개인정보 수집 동의 -->
<div class="flex items-center gap-2 pt-1">
<input
type="checkbox"
id="agreeTerms"
v-model="formData.agree"
class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
required
/>
<label for="agreeTerms" class="text-xs text-slate-500 cursor-pointer">
개인정보 수집 및 학습 상담 안내를 위한 연락에 동의합니다. (필수)
</label>
</div>
<!-- 제출 버튼 -->
<!-- 제출 CTA 버튼 -->
<button
type="submit"
:disabled="isSubmitting"
class="w-full bg-gradient-to-r from-slate-950 via-slate-900 to-red-900 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50 border border-red-500/30"
class="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 text-white font-extrabold text-base rounded-xl shadow-lg shadow-blue-500/25 transition-all flex items-center justify-center gap-2 cursor-pointer"
>
<i class="fa-solid fa-crown text-amber-400 text-lg"></i>
<span>{{ isSubmitting ? '초격차 분석 중...' : '1등급 초격차 마스터 플랜 신청하기' }}</span>
<span v-if="!isSubmitting">울산 과외 시세 확인 & 무료 시범수업 신청하기</span>
<span v-else class="flex items-center gap-2">
<i class="fa-solid fa-spinner animate-spin"></i>
접수 처리 중입니다...
</span>
</button>
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
<i class="fa-solid fa-lock text-xs"></i>
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
</div>
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
<div class="mt-3 p-3.5 bg-red-50/90 border border-red-200/90 rounded-xl flex items-start gap-2.5 text-xs text-red-950 leading-relaxed shadow-sm">
<i class="fa-solid fa-circle-info text-red-600 mt-0.5 text-sm shrink-0"></i>
<div>
<strong class="font-bold text-red-950 block mb-0.5">원활한 상담 진행 안내</strong>
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-red-900 underline hover:text-red-700">010-5961-5807</a>)</span>
</div>
</div>
</form>
<!-- 완료 메시지 -->
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-2xl text-emerald-900 text-xs sm:text-sm">
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
<span>마스터 플랜 신청이 성공적으로 접수되었습니다!</span>
</div>
<p class="leading-relaxed">
기재해주신 연락처로 <strong>‘최상위권 킬러 문항 심층 분석서’</strong>가 발송되며, 의대·특목고 전담 수석 컨설턴트가 유선으로 심층 솔루션을 안내해 드립니다.
<!-- 신청 완료 메시지 팝업 모달/카드 -->
<div v-if="submitSuccess" id="submitResultBox" class="mt-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-center">
<i class="fa-solid fa-circle-check text-2xl text-emerald-600 mb-1"></i>
<h4 class="font-bold text-sm">상담 신청이 정상적으로 완료되었습니다!</h4>
<p class="text-xs text-emerald-700 mt-1">
울산 전문 교육 매니저가 남겨주신 연락처로 10분 내 순차 연락을 드립니다.
</p>
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
<span><strong>안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
</div>
</div>
</div>
</section>
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
<header class="text-center mb-8">
<span class="text-xs sm:text-sm font-bold text-red-600 tracking-wider bg-red-100 px-3 py-1 rounded-full">TOP 1% RESULTS</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">실제 자사고·의대 합격 성과</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">쌤인증의 초격차 지도로 1등급을 굳힌 학생들의 실제 결과입니다.</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
<!-- Case 1 -->
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<span class="bg-red-100 text-red-800 font-bold text-xs px-2.5 py-1 rounded-full">자사고 내신 1.4등급</span>
<span class="font-bold text-sm sm:text-base text-slate-800">반포 자사고 1학년 송OO</span>
</div>
<span class="text-xs text-slate-400">전교 5등 도약</span>
</div>
<div>
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
<span class="text-slate-400">진단 전: 4.2등급 (킬러 문항 전멸)</span>
<span class="text-red-600 font-bold">결과: 1.4등급 (전과목 1등급 진입)</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
<div class="bg-gradient-to-r from-slate-400 to-red-600 h-3 rounded-full" style="width: 96%"></div>
</div>
</div>
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
"자사고는 한 문제로 등급이 갈리는데, 킬러 문항 5단계 해체 훈련을 받고 난 후 시험에서 단 한 문제도 틀리지 않았습니다."
</p>
</div>
<!-- Case 2 -->
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<span class="bg-amber-100 text-amber-800 font-bold text-xs px-2.5 py-1 rounded-full">수능 수학 100점</span>
<span class="font-bold text-sm sm:text-base text-slate-800">일산 고3 배OO (의예과 합격)</span>
</div>
<span class="text-xs text-slate-400">수능 백분위 100</span>
</div>
<div>
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
<span class="text-slate-400">모의고사: 84점 (2등급 문턱)</span>
<span class="text-amber-600 font-bold">수능 실전: 100점 만점 달성</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
<div class="bg-gradient-to-r from-slate-400 to-amber-500 h-3 rounded-full" style="width: 100%"></div>
</div>
</div>
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
"어떤 신유형 킬러가 나와도 당황하지 않는 조건 해석 메커니즘을 훈련시켜 주신 덕분에 만점을 받았습니다."
</p>
</div>
<!-- 4. 왜 '쌤인증' 과외인가? (차별화 3대 핵심 포인트) -->
<section class="max-w-5xl mx-auto px-4 sm:px-6 pt-20 pb-16">
<div class="text-center mb-12">
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">WHY CHOOSE US</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
실패 없는 1:1 과외 매칭 시스템
</h2>
<p class="text-slate-500 text-xs sm:text-sm mt-2 max-w-xl mx-auto">
학습 성향 진단부터 과외 비용 투명 비교, 100% 신원 보증까지 빈틈없이 관리합니다.
</p>
</div>
<!-- 학부모 리뷰 (2열) -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
<div class="text-amber-400 text-sm 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 class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
01
</div>
<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">"자사고 진학 후 등급 유지가 가장 큰 고민이었는데, 쌤인증 1:1 과외로 확실한 1등급을 굳혔습니다."</p>
<h3 class="text-base font-bold text-slate-900 mb-2">엄격한 4단계 강사 검증 시스템</h3>
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
대학 및 전공 증명서, 신원 조회, 교수법 테스트, 인성 면접을 통과한 상위 10% 베테랑 강사만을 배정합니다.
</p>
</div>
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
<div class="text-amber-400 text-sm 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 class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
02
</div>
<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">"의대 지망 아이에게 필요한 깊이 있는 사고력을 1:1로 지도해 주시는 유일한 과외입니다."</p>
<h3 class="text-base font-bold text-slate-900 mb-2">울산 관내 학교별 기출 족보 분석</h3>
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
옥동·신정동 등 울산 주요 중·고등학교의 최근 3개년 시험 출제 경향과 서술형 채점 기준을 철저히 분석합니다.
</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
03
</div>
<h3 class="text-base font-bold text-slate-900 mb-2">100% 무료 시범수업 안심 보장제</h3>
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
수업을 직접 경험해본 후 최종 진행 여부를 결정하세요. 선생님과 성향이 맞지 않을 시 100% 무료 재매칭을 지원합니다.
</p>
</div>
</div>
</section>
<!-- FAQ 섹션 -->
<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">자주 묻는 질문</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
</header>
<!-- 5. 학부모 실제 리얼 후기 & 성적 향상 사례 -->
<section class="bg-white border-y border-slate-200/80 py-16 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-10">
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">SUCCESS STORIES</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
울산 학부모님들의 생생한 성적 역전 후기
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
<div class="flex items-center gap-1 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>
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
"옥동 학원가 다녀도 70점대에 머물던 수학이 선생님 1:1 오답 클리닉 3개월 만에 96점 전교권으로 올랐습니다."
</p>
<div class="text-[11px] text-slate-500 font-medium">울산 남구 옥동 중2 학부모님 (수학 과외)</div>
</div>
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
<div class="flex items-center gap-1 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>
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
"신정동 고1 영어 내신 서술형 외부지문 때문에 스트레스가 심했는데, 꼼꼼한 어법 분석 지도 덕분에 1등급 찍었습니다."
</p>
<div class="text-[11px] text-slate-500 font-medium">울산 남구 신정동 고1 학부모님 (영어 과외)</div>
</div>
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
<div class="flex items-center gap-1 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>
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
"스스로 계획 세우고 공부하는 법을 몰랐는데 매일 학습 플래너 피드백과 동기부여 코칭으로 공부 태도가 완전히 바뀌었어요."
</p>
<div class="text-[11px] text-slate-500 font-medium">울산 북구 매곡동 중3 학부모님 (전과목 코칭)</div>
</div>
</div>
</div>
</section>
<!-- 6. 자주 묻는 질문 (FAQ) -->
<section class="max-w-4xl mx-auto px-4 sm:px-6 py-16">
<div class="text-center mb-10">
<h2 class="text-2xl font-extrabold text-slate-900">과외 상담 전 자주 묻는 질문</h2>
</div>
<div class="space-y-3">
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
<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">
<div
v-for="(faq, idx) in faqs"
:key="idx"
class="bg-white border border-slate-200 rounded-xl overflow-hidden"
>
<button
@click="faq.open = !faq.open"
class="w-full text-left px-5 py-4 font-bold text-sm sm:text-base text-slate-900 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>
<i :class="faq.open ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'" class="text-slate-400 text-xs"></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">
<div v-show="faq.open" class="px-5 pb-4 text-xs sm:text-sm text-slate-600 border-t border-slate-100 pt-3 leading-relaxed">
{{ faq.a }}
</div>
</div>
@@ -349,113 +409,144 @@
</main>
<!-- 7. Footer -->
<footer class="bg-slate-900 text-slate-400 text-xs py-10 px-4 sm:px-6">
<div class="max-w-5xl mx-auto space-y-4">
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-800 pb-4">
<span class="text-white font-extrabold text-base">{{ siteName }}</span>
<div class="flex gap-4 text-slate-400">
<span>이용약관</span>
<span>개인정보처리방침</span>
<span>과외교습자 등록현황</span>
</div>
</div>
<p class="leading-relaxed">
{{ siteName }} | 대표번호: 010-5961-5807 | 울산광역시 관내 전문 1:1 맞춤 과외 매칭 및 학습 관리 센터<br />
통신판매업 신고 및 개인과외교습자 적법 등록 완료 | 이메일 문의: contact@{{ siteDomain.replace('https://', '') }}
</p>
<p class="text-slate-500">
© 2026 {{ siteName }}. All rights reserved.
</p>
</div>
</footer>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reactive, ref, onMounted, onUnmounted } from 'vue'
const config = useRuntimeConfig()
const siteName = config.public.siteName || '쌤인증'
const siteDomain = config.public.siteDomain || 'https://soohyun.xyz'
const siteName = '쌤인증'
const siteDomain = 'https://soohyun.xyz'
const gradeOptions = ['초등학생', '중1', '중2', '중3', '고1', '고2·고3']
const subjectOptions = ['수학', '영어', '국어', '과학', '사회/한국사', '전과목 코칭']
const lessonModes = [
{ id: '방문과외', label: '1:1 방문수업', icon: 'fa-solid fa-house' },
{ id: '화상과외', label: '1:1 실시간 화상', icon: 'fa-solid fa-laptop' },
{ id: '방문+화상혼합', label: '방문+화상 혼합', icon: 'fa-solid fa-layer-group' }
]
const concernOptions = [
'시험 서술형 감점', '개념 이해 부족', '응용/킬러문항 취약',
'학습 집중력 부족', '공부법/습관 부재', '진로/입시 상담 필요'
]
const formData = reactive({
grade: '중2',
subject: '수학',
lessonType: '방문과외',
region: '',
concerns: ['개념 이해 부족', '응용/킬러문항 취약'],
phone: '',
agree: true
})
function toggleConcern(concern) {
const idx = formData.concerns.indexOf(concern)
if (idx > -1) {
formData.concerns.splice(idx, 1)
} else {
formData.concerns.push(concern)
}
}
const isSubmitting = ref(false)
const submitSuccess = ref(false)
// 실시간 롤링 메시지
const rollingMessages = [
"울산 남구 옥동 고3 의대 정시 수능 미적분 1등급 매칭 접수 (방금 전)",
"울산 중구 유곡동 고2 수능 국어 킬러 문항 대비 신청 완료 (2분 전)",
"울산 남구 삼산동 중3 자사고·과고 대비 수학 1:1 마스터 (3분 전)",
"울산 북구 송정동 고1 내신 1등급 취약점 집중 클리닉 (5분 전)",
"울산 울주군 구영리 고2 과학탐구 심화 개념 마스터 신청 (7분 전)"
'울산 남구 옥동 중2 수학 방문과외 시범수업 신청 완료 (1분 전)',
'울산 남구 신정동 고1 영어 내신대비 상담 접수 (3분 전)',
'울산 북구 매곡동 중3 국어·수학 종합 패키지 문의 (5분 전)',
'울산 중구 유곡동 초6 수학 선행학습 매칭 진행 중 (7분 전)'
]
const currentNotice = ref(rollingMessages[0])
let rollingIdx = 0
const currentRollingMsg = ref(rollingMessages[0])
let rollingTimer = null
onMounted(() => {
setInterval(() => {
rollingIdx = (rollingIdx + 1) % rollingMessages.length
currentNotice.value = rollingMessages[rollingIdx]
let idx = 0
rollingTimer = setInterval(() => {
idx = (idx + 1) % rollingMessages.length
currentRollingMsg.value = rollingMessages[idx]
}, 3500)
})
const subjects = [
{ name: '수학', label: '수학', badge: '인기' },
{ name: '과학', label: '과학', badge: '추천' },
{ name: '영어', label: '영어', badge: 'PICK' },
{ name: '국어', label: '국어', badge: 'PICK' },
{ name: '전과목/초격차', label: '전과목', badge: '의대' }
]
const concernOptions = [
'킬러 문항 변형 문제에서 1등급 문턱 좌절',
'특목·자사고 내신 경쟁 속 1~2등급 방어 절실',
'의치한약수 정시 수능 백분위 99% 달성 필요',
'전과목 올 1등급을 위한 초격차 학습 밸런스'
]
const formData = reactive({
grade: '고등학교 1학년',
subject: '수학',
concerns: ['킬러 문항 변형 문제에서 1등급 문턱 좌절'],
region: '',
phone: '',
privacy: true
onUnmounted(() => {
if (rollingTimer) clearInterval(rollingTimer)
})
function formatPhoneNumber() {
let val = formData.phone.replace(/\D/g, '')
if (val.length >= 11) {
val = val.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
} else if (val.length >= 4) {
val = val.replace(/(\d{3})(\d{3,4})/, '$1-$2')
}
formData.phone = val
}
const faqs = reactive([
{
q: '1. 자사고나 특목고 학생들을 위한 고난도 커리큘럼이 준비되어 있나요?',
a: '네, 쌤인증은 전국단위 자사고, 과고, 외고의 고난도 내신 기출과 수능 4점 킬러 문항을 다루는 최상위 전문 강사진이 맞춤 지도를 진행합니다.',
q: '무료 시범수업은 어떻게 진행되나요?',
a: '신청서 접수 후 울산 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
open: true
},
{
q: '과외 비용 및 시세는 어떻게 되나요?',
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 울산 우리 동네 과외 비용을 안내해 드립니다.',
open: false
},
{
q: '2. 의대·최상위권 입시를 위한 장기 로드맵도 제공되나요?',
a: '단순한 진도 나가기가 아닌, 목표 학과에 맞춘 수시 세특 관리 방향과 수능 최저/정시 1등급 완성을 위한 전과목 밸런스 로드맵을 함께 설계합니다.',
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
open: false
},
{
q: '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?',
a: '학생의 최근 모의고사/내신 오답 유형을 분석하여, 1등급 진입을 가로막는 취약 킬러 패턴과 5단계 해체 솔루션을 무상 제공합니다.',
open: false
},
{
q: '4. 강사진의 강의 역량은 어떻게 보장되나요?',
a: '최상위권 전문 강사진은 까다로운 자체 고난도 문항 풀이 테스트 및 수업 시연 평가를 100% 통과한 검증된 강사만 선별 배치됩니다.',
q: '선생님이 아이와 맞지 않으면 어떻게 하나요?',
a: '무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.',
open: false
}
])
function formatPhone() {
let val = formData.phone.replace(/[^0-9]/g, '')
if (val.length > 3 && val.length <= 7) {
formData.phone = val.substring(0, 3) + '-' + val.substring(3)
} else if (val.length > 7) {
formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
} else {
formData.phone = val
}
}
async function handleSubmit() {
if (!formData.phone || formData.phone.length < 12) {
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
if (!formData.grade || !formData.subject || !formData.phone) {
alert('필수 항목을 모두 입력해 주세요.')
return
}
isSubmitting.value = true
try {
const res = await $fetch('/api/consult', {
method: 'POST',
body: {
name: '학부모 (초격차플랜신청)',
name: '학부모 상담 신청',
phone: formData.phone,
grade: formData.grade,
schoolName: formData.region || '지역 미기재',
location: formData.region || '온라인 랜딩',
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
url: window.location.href
subject: `${formData.subject} (${formData.lessonType})`,
region: formData.region || '울산 전지역',
message: `[학습고민] ${formData.concerns.join(', ')}`
}
})
@@ -475,13 +566,14 @@ async function handleSubmit() {
}
}
// SEO 태그 설정 (네이버 서치어드바이저 등록 태그 포함 및 30~35자 글자 수 규격 준수)
useHead({
title: `${siteName} | 의대·자사고 1등급 초격차 1:1 맞춤과외`,
title: '울산 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
meta: [
{ name: 'naver-site-verification', content: 'd40ee8cd61dab827dcbd7080e54b095339c44222' },
{ name: 'description', content: `${siteName} - 최상위 1% 도약을 위한 킬러 문항 정복 및 특목·자사고 전과목 올 1등급 마스터 과외.` },
{ property: 'og:title', content: `${siteName} | 전과목 올 1등급 초격차 마스터` },
{ property: 'og:description', content: '의대·자사고 목표! 킬러 문항 5단계 해체 및 최상위 1타 강사진 무료 매칭.' },
{ name: 'description', content: '울산 초중고 1:1 맞춤 과외 매칭 전문. 옥동 등 울산 전지역 과외 비용 및 시세 비교부터 무료 시범수업 신청까지. 검증된 명문대·베테랑 전문 선생님 100% 매칭.' },
{ property: 'og:title', content: '울산 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지' },
{ property: 'og:description', content: '울산 초중고 1:1 맞춤 과외 매칭. 학력·신원 100% 검증 강사진 배정 및 무료 시범수업 신청.' },
{ property: 'og:url', content: siteDomain }
],
script: [
@@ -493,7 +585,7 @@ useHead({
name: siteName,
url: siteDomain,
telephone: '+82-10-5961-5807',
areaServed: '울산광역시 및 전국'
areaServed: '울산광역시 전지역'
})
}
]