-

src/components/sections/CtaSection.vue

@@ -1,35 +1,85 @@
 <template>
   <section id="cta" class="cta-section">
-    <div class="container">
+    <div class="container consult-shell">
-      <div class="cta-box glass-card">
+      <div class="form-container">
-        <div class="cta-glow"></div>
+        <div class="form-header">
-        <div class="cta-content">
+          <h2>무료 상담 받아보기</h2>
-          <h2 class="cta-title">
+          <p>베테랑 선생님 배정과 학습 진단 컨설팅을 무료로 받아보세요.</p>
-            지금 <span class="text-orange">티처PICK</span>과 함께 <br />
+        </div>
-            스마트한 학습을 시작해보세요!
+
-          </h2>
+        <form @submit.prevent="handleFormSubmit" class="submit-form">
-          <p class="cta-description">
+          <div class="form-row">
-            가입 즉시 제공되는 무료 체험 혜택과 전문 학습 컨설팅을 만나보세요.
+            <div class="form-group">
-          </p>
+              <label>지역</label>
-          <div class="cta-form">
               <input
-              type="email" 
+                v-model="formData.region"
-              placeholder="이메일 주소를 입력하세요" 
+                type="text"
-              class="cta-input" 
+                :placeholder="defaultRegionText"
+                @blur="onRegionBlur"
+                class="input-region"
               />
-            <button class="btn-primary" @click="showModal = true">무료 신청하기</button>
             </div>
-          <div class="cta-note">
+            <div class="form-group">
-            <span>[V] 신용카드 등록 불필요</span>
+              <label>희망 과목</label>
-            <span>[V] 14일 무료 체험</span>
+              <select v-model="formData.selectedSubjectSlug" class="select-field" required>
-            <span>[V] 실시간 상담 지원</span>
+                <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 {
+.consult-shell {
-  position: relative;
+  max-width: 900px;
-  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;
   margin: 0 auto;
 }
 
-.cta-title {
+.form-container {
-  font-size: 2.3rem;
+  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: 6px;
-  margin-bottom: 16px;
   color: var(--text-primary);
 }
 
-.text-orange {
+.form-header p {
-  color: var(--color-primary);
+  font-size: 14px;
-}
-
-.cta-description {
-  font-size: 1.1rem;
   color: var(--text-secondary);
-  margin-bottom: 32px;
 }
 
-.cta-form {
+.submit-form {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   display: flex;
-  gap: 12px;
+  flex-direction: column;
-  justify-content: center;
+  gap: 14px;
-  max-width: 480px;
-  margin: 0 auto 24px;
 }
 
-.cta-input {
+.form-row {
-  flex: 1;
+  width: 100%;
-  padding: 14px 20px;
+  max-width: 100%;
-  border-radius: var(--radius-full);
+  box-sizing: border-box;
-  border: 1.5px solid var(--border-color);
+  display: grid;
-  background: #ffffff;
+  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 {
+.input-region {
-  display: flex;
+  background: var(--bg-secondary) !important;
-  justify-content: center;
+  color: var(--color-primary) !important;
-  gap: 20px;
+  font-weight: 700;
-  font-size: 0.85rem;
+  cursor: pointer;
-  color: var(--text-secondary);
+  transition: all 0.2s ease;
-  font-weight: 600;
+}
+
+.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 {
+  .form-container {
-    flex-direction: column;
+    padding: 24px 16px;
   }
-  .cta-note {
+
-    flex-direction: column;
+  .form-row {
-    gap: 8px;
+    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); }
+  from {
-  to { opacity: 1; transform: scale(1) translateY(0); }
+    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

@@ -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 {
+.footer-biz-info.sr-only {
-  margin-bottom: 20px;
+  position: absolute;
-  display: flex;
+  width: 1px;
-  flex-direction: column;
+  height: 1px;
-  gap: 4px;
+  padding: 0;
-  align-items: center;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .biz-line {

src/components/sections/HeaderSection.vue

@@ -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

@@ -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

@@ -186,8 +186,12 @@
       <!-- 6. 미디어 쇼케이스 섹션 -->
       <!-- <MediaSection /> -->
 
-      <!-- 7. CTA 신청 섹션 -->
+      <!-- 7. CTA 신청 섹션 (무료 상담 받아보기 폼) -->
-      <CtaSection />
+      <CtaSection
+        :default-region="`${selectedSido} ${selectedSigungu} ${selectedDong}`"
+        :default-subject="selectedSubject"
+        :default-target-name="selectedTargetName"
+      />
     </main>
 
     <FooterSection />

src/views/LocationSubjectLanding.vue

@@ -341,33 +341,38 @@
         </div>
       </section>
 
-      <!-- 빠른 상담 리소스 링크 (네이버 5개 멀티 이미지 썸네일 매칭용 5과목 리스트) -->
+      <!-- 과목별 바로가기 리소스 링크 (국어: korean / 영어: english / 수학: math / 사회: social / 과학: science) -->
-      <section class="post-resource-links" aria-label="빠른 상담 링크">
+      <section class="post-resource-links" aria-label="과목별 과외 페이지 바로가기">
-        <a class="post-resource-link" href="#consult-form">
+        <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>
+        </router-link>
-        <a class="post-resource-link" href="#consult-form">
+        <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>
+        </router-link>
-        <a class="post-resource-link" href="#consult-form">
+        <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>
+        </router-link>
-        <a class="post-resource-link" href="#consult-form">
+        <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>
+        </router-link>
-        <a class="post-resource-link" href="#consult-form">
+        <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;