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

-

Browse Source
This commit is contained in:
kyounggu
2026-11-10 11:21:36 +09:00
parent 1b9dd1403a
commit 4ada42bacc
6 changed files with 351 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/CtaSection.vue
+300 -91
View File
@@ -1,35 +1,85 @@
<template>
<section id="cta" class="cta-section">
<div class="container">
<div class="cta-box glass-card">
<div class="cta-glow"></div>
<div class="cta-content">
<h2 class="cta-title">
지금 <span class="text-orange">티처PICK</span>과 함께 <br />
스마트한 학습을 시작해보세요!
</h2>
<p class="cta-description">
가입 즉시 제공되는 무료 체험 혜택과 전문 학습 컨설팅을 만나보세요.
</p>
<div class="cta-form">
<div class="container consult-shell">
<div class="form-container">
<div class="form-header">
<h2>무료 상담 받아보기</h2>
<p>베테랑 선생님 배정과 학습 진단 컨설팅을 무료로 받아보세요.</p>
</div>
<form @submit.prevent="handleFormSubmit" class="submit-form">
<div class="form-row">
<div class="form-group">
<label>지역</label>
<input
type="email"
placeholder="이메일 주소를 입력하세요"
class="cta-input"
v-model="formData.region"
type="text"
:placeholder="defaultRegionText"
@blur="onRegionBlur"
class="input-region"
/>
<button class="btn-primary" @click="showModal = true">무료 신청하기</button>
</div>
<div class="cta-note">
<span>[V] 신용카드 등록 불필요</span>
<span>[V] 14일 무료 체험</span>
<span>[V] 실시간 상담 지원</span>
<div class="form-group">
<label>희망 과목</label>
<select v-model="formData.selectedSubjectSlug" class="select-field" required>
<option value="korean">국어</option>
<option value="english">영어</option>
<option value="math">수학</option>
<option value="social">사회</option>
<option value="science">과학</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>학생 이름</label>
<input v-model="formData.studentName" type="text" placeholder="학생 이름을 입력하세요" required />
</div>
<div class="form-group">
<label>학부모 연락처</label>
<input v-model="formData.phone" type="tel" placeholder="010-1234-5678" required />
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>학생 학년</label>
<select v-model="formData.grade" required>
<option value="" disabled selected>학년을 선택하세요</option>
<option value="중1">중학교 1학년</option>
<option value="중2">중학교 2학년</option>
<option value="중3">중학교 3학년</option>
<option value="고1">고등학교 1학년</option>
<option value="고2">고등학교 2학년</option>
<option value="고3">고등학교 3학년 / N수</option>
<option value="초등">초등학생 (예비중)</option>
</select>
</div>
</div>
<div class="form-group">
<label>상담 및 학습 고민 사항 (선택)</label>
<textarea
v-model="formData.memo"
rows="3"
placeholder="현재 등급, 시험 성적, 취약한 단원 등을 남겨주시면 더욱 정확한 선생님 매칭이 가능합니다."
></textarea>
</div>
<button type="submit" class="btn-primary btn-submit">
{{ isSubmitting ? '신청 처리 중...' : '1:1 맞춤 무료 모의수업 신청하기' }}
</button>
<p class="form-privacy-note">
* 입력해주신 정보는 과외 매칭 및 학습 상담 목적으로만 안전하게 사용됩니다.
</p>
</form>
</div>
</div>
<!-- 상담 신청 완료 모달 안내창 -->
<div v-if="showModal" class="consult-modal-overlay" @click.self="showModal = false">
<div v-if="isModalOpen" class="consult-modal-overlay" @click.self="isModalOpen = false">
<div class="consult-modal-card">
<div class="consult-modal-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#FF5E00" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -39,114 +89,260 @@
</div>
<h3 class="consult-modal-title">상담 신청이 완료되었습니다.</h3>
<p class="consult-modal-desc">빠른 시간 내에 순차적으로 연락드릴 예정입니다.</p>
<button type="button" class="consult-modal-btn" @click="showModal = false">닫기</button>
<button type="button" class="consult-modal-btn" @click="isModalOpen = false">닫기</button>
</div>
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { ref, computed, watch } from 'vue';
import { findSubject } from '../../data/subjects.js';
const showModal = ref(false);
const props = defineProps({
defaultRegion: {
type: String,
default: '대구 수성구 황금동'
},
defaultSubject: {
type: String,
default: 'math'
},
defaultTargetName: {
type: String,
default: '중등'
}
});
const defaultRegionText = computed(() => props.defaultRegion || '대구 수성구 황금동');
const formData = ref({
region: '',
studentName: '',
phone: '',
grade: '',
memo: '',
selectedSubjectSlug: props.defaultSubject || 'math'
});
const isSubmitting = ref(false);
const isModalOpen = ref(false);
const onRegionBlur = () => {
if (!formData.value.region || !formData.value.region.trim()) {
formData.value.region = defaultRegionText.value;
}
};
watch(defaultRegionText, (newVal) => {
formData.value.region = newVal;
}, { immediate: true });
watch(() => props.defaultSubject, (newSub) => {
if (newSub) {
formData.value.selectedSubjectSlug = newSub;
}
}, { immediate: true });
const DISCORD_WEBHOOK_URL = 'https://discord.com/api/webhooks/1554696525496590346/GrOwqYI3IPAfPFU0VD3BVuw6_XdsRzkZExpyICMgHMaABdSVC_Ir1VsJSRsPbJpA63bn';
const handleFormSubmit = async () => {
if (isSubmitting.value) return;
isSubmitting.value = true;
const appliedRegion = formData.value.region?.trim() || defaultRegionText.value;
const subjectObj = findSubject(formData.value.selectedSubjectSlug || 'math');
const gradeStr = formData.value.grade || '';
const targetLabel = gradeStr.startsWith('고')
? '고등'
: gradeStr.startsWith('초')
? '초등'
: (props.defaultTargetName || '중등');
const nowStr = new Date().toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' });
const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://teacherpick.kr/';
const payload = {
username: '티처PICK 상담 알리미',
embeds: [
{
title: '신규 1:1 맞춤 무료 모의수업 상담 신청',
description: `**${appliedRegion}** 지역에서 새로운 무료 모의수업 신청이 접수되었습니다.`,
color: 0xFF5E00,
fields: [
{ name: '지역', value: appliedRegion, inline: true },
{ name: '희망 과목', value: `${targetLabel} - ${subjectObj.name}`, inline: true },
{ name: '학생 학년', value: formData.value.grade || '미선택', inline: true },
{ name: '학생 이름', value: formData.value.studentName || '미입력', inline: true },
{ name: '학부모 연락처', value: formData.value.phone || '미입력', inline: true },
{ name: '접수 일시', value: nowStr, inline: true },
{ name: '상담 및 학습 고민 사항', value: formData.value.memo?.trim() || '(작성 내용 없음)', inline: false },
{ name: '접수 페이지 URL', value: currentUrl, inline: false }
],
footer: {
text: '티처PICK 실시간 상담 알림 시스템'
},
timestamp: new Date().toISOString()
}
]
};
try {
await fetch(DISCORD_WEBHOOK_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
} catch (err) {
console.error('Webhook 전송 에러:', err);
} finally {
isModalOpen.value = true;
formData.value.studentName = '';
formData.value.phone = '';
formData.value.grade = '';
formData.value.memo = '';
formData.value.region = defaultRegionText.value;
isSubmitting.value = false;
}
};
</script>
<style scoped>
.cta-section {
padding: 80px 0;
padding: 60px 0 80px;
background: #ffffff;
}
.cta-box {
position: relative;
padding: 60px 40px;
text-align: center;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(180deg, #fffbf6 0%, #fff6ec 100%);
border: 1.5px solid var(--border-primary);
box-shadow: 0 10px 30px -5px rgba(255, 94, 0, 0.1);
}
.cta-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 94, 0, 0.12) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 680px;
.consult-shell {
max-width: 900px;
margin: 0 auto;
}
.cta-title {
font-size: 2.3rem;
.form-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 36px 32px;
border-radius: 20px;
border: 1.5px solid var(--border-primary);
background: linear-gradient(180deg, #ffffff 0%, #fffbf6 100%);
box-shadow: 0 10px 30px rgba(255, 94, 0, 0.08);
}
.form-header {
text-align: center;
margin-bottom: 24px;
}
.form-header h2 {
font-size: 22px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 16px;
margin-bottom: 6px;
color: var(--text-primary);
}
.text-orange {
color: var(--color-primary);
}
.cta-description {
font-size: 1.1rem;
.form-header p {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 32px;
}
.cta-form {
.submit-form {
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: flex;
gap: 12px;
justify-content: center;
max-width: 480px;
margin: 0 auto 24px;
flex-direction: column;
gap: 14px;
}
.cta-input {
flex: 1;
padding: 14px 20px;
border-radius: var(--radius-full);
border: 1.5px solid var(--border-color);
background: #ffffff;
.form-row {
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
min-width: 0;
}
.form-group {
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.form-group label {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block;
padding: 11px 14px;
border-radius: 10px;
background: #ffffff;
border: 1.5px solid var(--border-color);
color: var(--text-primary);
font-size: 0.95rem;
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
box-shadow: var(--shadow-sm);
}
.cta-input:focus {
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--color-primary);
}
.cta-note {
display: flex;
justify-content: center;
gap: 20px;
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 600;
.input-region {
background: var(--bg-secondary) !important;
color: var(--color-primary) !important;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.input-region:focus {
background: #ffffff !important;
color: var(--text-primary) !important;
border-color: var(--color-primary);
cursor: text;
}
.btn-submit {
padding: 15px;
font-size: 16px;
font-weight: 800;
width: 100%;
margin-top: 4px;
}
.form-privacy-note {
text-align: center;
font-size: 12px;
color: var(--text-muted);
}
@media (max-width: 640px) {
.cta-form {
flex-direction: column;
.form-container {
padding: 24px 16px;
}
.cta-note {
flex-direction: column;
gap: 8px;
.form-row {
grid-template-columns: 1fr;
}
}
@@ -166,6 +362,7 @@ const showModal = ref(false);
z-index: 99999;
padding: 20px;
}
.consult-modal-card {
background: #ffffff;
border-radius: 24px;
@@ -176,10 +373,18 @@ const showModal = ref(false);
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
from { opacity: 0; transform: scale(0.92) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
from {
opacity: 0;
transform: scale(0.92) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.consult-modal-icon {
width: 68px;
height: 68px;
@@ -190,6 +395,7 @@ const showModal = ref(false);
align-items: center;
justify-content: center;
}
.consult-modal-title {
font-size: 20px;
font-weight: 800;
@@ -198,6 +404,7 @@ const showModal = ref(false);
line-height: 1.4;
word-break: keep-all;
}
.consult-modal-desc {
font-size: 15px;
color: #64748b;
@@ -205,6 +412,7 @@ const showModal = ref(false);
line-height: 1.5;
word-break: keep-all;
}
.consult-modal-btn {
width: 100%;
padding: 15px;
@@ -218,6 +426,7 @@ const showModal = ref(false);
box-shadow: 0 8px 18px rgba(255, 94, 0, 0.3);
transition: all 0.2s ease;
}
.consult-modal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(255, 94, 0, 0.4);
src/components/sections/FooterSection.vue
+12 -7
View File
@@ -28,7 +28,8 @@
</div>
</div>
</div>
<div class="container footer-biz-info">
<!-- 사용자 화면에서는 보이지 않고 검색엔진 봇(크롤러)만 읽을 수 있도록 처리 -->
<div class="container footer-biz-info sr-only">
<p class="biz-line">
<span>상호명: 티처픽</span>
<span class="divider">|</span>
@@ -141,12 +142,16 @@ const showModal = ref(false);
color: var(--color-primary);
}
.footer-biz-info {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
.footer-biz-info.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.biz-line {
src/components/sections/HeaderSection.vue
-13
View File
@@ -5,19 +5,6 @@
<span class="logo-badge">PICK</span>
<span class="logo-text">티처<span class="text-orange">PICK</span></span>
</router-link>
<nav class="nav-links">
<router-link to="/regions">전국 지역별 과외</router-link>
<a href="#subjects">과목 라인업</a>
<a href="#features">선생님 매칭</a>
<a href="#media">미디어 쇼케이스</a>
<a href="#cta">무료 신청</a>
</nav>
<div class="header-actions">
<router-link to="/regions" class="btn-outline-header">전국 지역</router-link>
<a href="#cta" class="btn-primary btn-sm">무료 모의수업 신청</a>
</div>
</div>
</header>
</template>
src/utils/seo.js
+7
View File
@@ -255,6 +255,13 @@ export function buildPageHead({ title, description, path }) {
{ name: 'description', content: description },
{ name: 'keywords', content: pageKeywords },
{ name: 'robots', content: 'index,follow,max-image-preview:large' },
{ name: 'author', content: '티처픽' },
{ name: 'publisher', content: '티처픽' },
{ name: 'copyright', content: '© 2026 티처픽 (Educo Pick). All rights reserved.' },
{
name: 'business-info',
content: '상호명: 티처픽 | 대표자: 이지훈 | 사업자등록번호: 767-16-02607 | 주소: 대구시 동구 화랑로 80길 8 | 고객센터: 010-8204-9445'
},
{ property: 'og:type', content: 'website' },
{ property: 'og:site_name', content: SITE_NAME },
{ property: 'og:locale', content: 'ko_KR' },
src/views/HomeView.vue
+6 -2
View File
@@ -186,8 +186,12 @@
<!-- 6. 미디어 쇼케이스 섹션 -->
<!-- <MediaSection /> -->
<!-- 7. CTA 신청 섹션 -->
<CtaSection />
<!-- 7. CTA 신청 섹션 (무료 상담 받아보기 폼) -->
<CtaSection
:default-region="`${selectedSido} ${selectedSigungu} ${selectedDong}`"
:default-subject="selectedSubject"
:default-target-name="selectedTargetName"
/>
</main>
<FooterSection />
src/views/LocationSubjectLanding.vue
+22 -12
View File
@@ -341,33 +341,38 @@
</div>
</section>
<!-- 빠른 상담 리소스 링크 (네이버 5개 멀티 이미지 썸네일 매칭용 5과목 리스트) -->
<section class="post-resource-links" aria-label="빠른 상담 링크">
<a class="post-resource-link" href="#consult-form">
<!-- 과목별 바로가기 리소스 링크 (국어: korean / 영어: english / 수학: math / 사회: social / 과학: science) -->
<section class="post-resource-links" aria-label="과목별 과외 페이지 바로가기">
<router-link class="post-resource-link" :class="{ active: currentSubject.slug === 'korean' }"
:to="`/${regionInfo.sidoSlug}/${regionInfo.sigunguSlug}/${regionInfo.dongSlug}/${currentTarget.slug}/korean`">
<span class="post-resource-thumb"><img src="/img/pick-korean.png" :alt="`${regionInfo.sidoShort} ${regionInfo.dong} ${currentTarget.name} 국어 과외 상담`" width="500" height="500"></span>
<strong class="post-resource-title">{{ regionInfo.sidoShort }} {{ regionInfo.dong }} {{ currentTarget.name }} 국어 과외 내신/수능 1등급 클리닉</strong>
<em class="post-resource-arrow">›</em>
</a>
<a class="post-resource-link" href="#consult-form">
</router-link>
<router-link class="post-resource-link" :class="{ active: currentSubject.slug === 'english' }"
:to="`/${regionInfo.sidoSlug}/${regionInfo.sigunguSlug}/${regionInfo.dongSlug}/${currentTarget.slug}/english`">
<span class="post-resource-thumb"><img src="/img/pick-english.png" :alt="`${regionInfo.sidoShort} ${regionInfo.dong} ${currentTarget.name} 영어 과외 상담`" width="500" height="500"></span>
<strong class="post-resource-title">{{ regionInfo.sidoShort }} {{ regionInfo.dong }} {{ currentTarget.name }} 영어 과외 구문 독해 &amp; 빈칸추론</strong>
<em class="post-resource-arrow">›</em>
</a>
<a class="post-resource-link" href="#consult-form">
</router-link>
<router-link class="post-resource-link" :class="{ active: currentSubject.slug === 'math' }"
:to="`/${regionInfo.sidoSlug}/${regionInfo.sigunguSlug}/${regionInfo.dongSlug}/${currentTarget.slug}/math`">
<span class="post-resource-thumb"><img src="/img/pick-math.png" :alt="`${regionInfo.sidoShort} ${regionInfo.dong} ${currentTarget.name} 수학 과외 상담`" width="500" height="500"></span>
<strong class="post-resource-title">{{ regionInfo.sidoShort }} {{ regionInfo.dong }} {{ currentTarget.name }} 수학 과외 개념 정복 및 서술형 대비</strong>
<em class="post-resource-arrow">›</em>
</a>
<a class="post-resource-link" href="#consult-form">
</router-link>
<router-link class="post-resource-link" :class="{ active: currentSubject.slug === 'social' }"
:to="`/${regionInfo.sidoSlug}/${regionInfo.sigunguSlug}/${regionInfo.dongSlug}/${currentTarget.slug}/social`">
<span class="post-resource-thumb"><img src="/img/pick-social.png" :alt="`${regionInfo.sidoShort} ${regionInfo.dong} ${currentTarget.name} 사회 과외 상담`" width="500" height="500"></span>
<strong class="post-resource-title">{{ regionInfo.sidoShort }} {{ regionInfo.dong }} {{ currentTarget.name }} 사회·한국사 과외 내신 단기 완성</strong>
<em class="post-resource-arrow">›</em>
</a>
<a class="post-resource-link" href="#consult-form">
</router-link>
<router-link class="post-resource-link" :class="{ active: currentSubject.slug === 'science' }"
:to="`/${regionInfo.sidoSlug}/${regionInfo.sigunguSlug}/${regionInfo.dongSlug}/${currentTarget.slug}/science`">
<span class="post-resource-thumb"><img src="/img/pick-science.png" :alt="`${regionInfo.sidoShort} ${regionInfo.dong} ${currentTarget.name} 과학 과외 상담`" width="500" height="500"></span>
<strong class="post-resource-title">{{ regionInfo.sidoShort }} {{ regionInfo.dong }} {{ currentTarget.name }} 과학·통합과학 과외 탐구영역 완성</strong>
<em class="post-resource-arrow">›</em>
</a>
</router-link>
</section>
</main>
@@ -1708,6 +1713,11 @@ watch([() => route.params], () => {
transform: translateY(-2px);
}
.post-resource-link.active {
border-color: var(--color-primary);
background: var(--color-primary-subtle);
}
.post-resource-thumb {
flex: 0 0 38px;
height: 38px;