tamplate 치환 키워드 스터핑 버그 및 오타수정

2026-10-20 13:31:15 +09:00
parent ecaa7c5063
commit d5e7c16239
63 changed files with 6181 additions and 3450 deletions
@@ -19,12 +19,12 @@
          :key="idx" 
          href="#consult-section" 
          class="focus-card"
-          :title="`${regionDong} ${item.title} 상담 신청`"
+          :title="`${item.title} 상담 신청`"
        >
          <div class="focus-thumb-wrap">
            <img 
              :src="item.image" 
-              :alt="`${regionDong} ${item.title} 1:1 맞춤 지도`" 
+              :alt="`${item.title} 1:1 맞춤 지도`" 
              width="500" 
              height="500" 
              loading="lazy" 
@@ -101,7 +101,7 @@ const programList = computed(() => {
      {
        tag: '밀착 피드백',
        title: `${dong}초등 ${sub}과외 - 숙제검사`,
-        desc: '매일 1:1 오답 점검과 꼼꼼한 피드백 피드백',
+        desc: '매일 1:1 오답 점검과 꼼꼼한 피드백 클리닉',
        image: '/images/focus/elem-3-homework.svg'
      },
      {
@@ -0,0 +1,237 @@
+<template>
+  <nav class="internal-link-hub" aria-label="관내 학년·과목별 과외 바로가기">
+    <div class="hub-container">
+      <div class="hub-header">
+        <span class="hub-badge">내부 연계 허브</span>
+        <h3 class="hub-title">{{ regionDong }} 과외 탐색 및 인근 지역 바로가기</h3>
+        <p class="hub-desc">
+          {{ regionDong }} 관내 학년별·과목별 1:1 맞춤 수업 및 인근 지역의 상세 커리큘럼을 바로 확인하실 수 있습니다.
+        </p>
+      </div>
+
+      <div class="hub-grid">
+        <!-- 1. 같은 동의 다른 과목 링크 -->
+        <div class="hub-card">
+          <div class="card-head">
+            <i class="fa-solid fa-book-open card-icon"></i>
+            <h4 class="card-title">{{ regionDong }} {{ grade }} 과목별 과외</h4>
+          </div>
+          <div class="link-chips">
+            <NuxtLink 
+              v-for="sub in subjects" 
+              :key="sub.name"
+              :to="`/${encodeURIComponent(regionDong)}/${encodeURIComponent(grade)}/${encodeURIComponent(sub.name)}`"
+              class="chip-link"
+              :class="{ active: sub.name === subjectName }"
+            >
+              {{ regionDong }} {{ sub.name }}과외
+            </NuxtLink>
+          </div>
+        </div>
+
+        <!-- 2. 같은 동의 다른 학년 링크 -->
+        <div class="hub-card">
+          <div class="card-head">
+            <i class="fa-solid fa-graduation-cap card-icon"></i>
+            <h4 class="card-title">{{ regionDong }} {{ subjectName }} 학년별 과외</h4>
+          </div>
+          <div class="link-chips">
+            <NuxtLink 
+              v-for="g in grades" 
+              :key="g"
+              :to="`/${encodeURIComponent(regionDong)}/${encodeURIComponent(g)}/${encodeURIComponent(subjectName)}`"
+              class="chip-link"
+              :class="{ active: g === grade }"
+            >
+              {{ regionDong }} {{ g }} {{ subjectName }}
+            </NuxtLink>
+          </div>
+        </div>
+
+        <!-- 3. 관내 인접 동 링크 -->
+        <div class="hub-card">
+          <div class="card-head">
+            <i class="fa-solid fa-location-dot card-icon"></i>
+            <h4 class="card-title">인근 주요 지역 {{ grade }} {{ subjectName }}</h4>
+          </div>
+          <div class="link-chips">
+            <NuxtLink 
+              v-for="d in nearbyDongs" 
+              :key="d"
+              :to="`/${encodeURIComponent(d)}/${encodeURIComponent(grade)}/${encodeURIComponent(subjectName)}`"
+              class="chip-link"
+            >
+              {{ d }} {{ subjectName }}과외
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import regionsData from '../data/regions.json'
+
+const props = defineProps({
+  regionDong: {
+    type: String,
+    required: true
+  },
+  grade: {
+    type: String,
+    default: '중학생'
+  },
+  subjectName: {
+    type: String,
+    default: '영어'
+  }
+})
+
+const subjects = [
+  { name: '수학' },
+  { name: '영어' },
+  { name: '국어' },
+  { name: '과학' },
+  { name: '사회' }
+]
+
+const grades = ['초등학생', '중학생', '고등학생']
+
+// 동일 시군구 내 인근 동 추출 (최대 6개)
+const nearbyDongs = computed(() => {
+  const curDong = props.regionDong
+  const allList = (regionsData.list || [])
+  
+  // 현재 동의 시군구 찾기
+  const curRegion = allList.find(r => r.dong === curDong || r.dong.includes(curDong))
+  const sigungu = curRegion ? curRegion.sigungu : ''
+  
+  let candidates = []
+  if (sigungu) {
+    candidates = allList
+      .filter(r => r.sigungu === sigungu && r.dong !== curDong)
+      .map(r => r.dong)
+  }
+  
+  // 만약 동일 구의 동이 부족하면 전체에서 다른 동 가져오기
+  if (candidates.length < 5) {
+    const others = allList
+      .filter(r => r.dong !== curDong && !candidates.includes(r.dong))
+      .map(r => r.dong)
+    candidates = [...candidates, ...others]
+  }
+
+  // 중복 제거 후 6개 반환
+  return Array.from(new Set(candidates)).slice(0, 6)
+})
+</script>
+
+<style scoped>
+.internal-link-hub {
+  background: var(--bg-card, #ffffff);
+  border-top: 1px solid var(--border-color, #e2e8f0);
+  padding: 48px 16px 36px;
+  margin-top: 20px;
+}
+
+.hub-container {
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+.hub-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.hub-badge {
+  display: inline-block;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #2563eb;
+  background: rgba(37, 99, 235, 0.08);
+  padding: 4px 12px;
+  border-radius: 9999px;
+  margin-bottom: 8px;
+}
+
+.hub-title {
+  font-size: clamp(1.2rem, 3vw, 1.5rem);
+  font-weight: 800;
+  color: #1e293b;
+  margin: 0 0 8px;
+}
+
+.hub-desc {
+  font-size: 0.9rem;
+  color: #64748b;
+  margin: 0;
+}
+
+.hub-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.hub-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.card-icon {
+  color: #2563eb;
+  font-size: 1rem;
+}
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0;
+}
+
+.link-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip-link {
+  display: inline-block;
+  font-size: 0.82rem;
+  font-weight: 600;
+  padding: 6px 12px;
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 20px;
+  color: #334155;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.chip-link:hover {
+  background: #2563eb;
+  color: #ffffff;
+  border-color: #2563eb;
+  transform: translateY(-1px);
+}
+
+.chip-link.active {
+  background: #1e40af;
+  color: #ffffff;
+  border-color: #1e40af;
+  font-weight: 700;
+}
+</style>
@@ -8,18 +8,18 @@
      </p>
    </div>

-    <!-- 나이스(NEIS) 연동 관내 실제 고등학교 칩 영역 -->
-    <div v-if="nearbyHighSchools.length > 0" class="neis-schools-box">
+    <!-- 나이스(NEIS) 연동 관내 실제 학교 칩 영역 -->
+    <div v-if="displaySchools.length > 0" class="neis-schools-box">
      <div class="neis-header">
        <span class="neis-title">
          <i class="fa-solid fa-school-flag text-blue-600 mr-1.5"></i>
-          <strong>{{ regionDong }} 인근 주요 고등학교 내신 대비 현황</strong>
+          <strong>{{ regionDong }} 인근 주요 {{ targetSchoolType }} 내신 대비 현황</strong>
        </span>
        <span class="neis-source">NEIS 학교정보 연동</span>
      </div>
      <div class="school-tags-wrap">
        <div 
-          v-for="school in nearbyHighSchools" 
+          v-for="school in displaySchools" 
          :key="school.code" 
          class="school-tag-pill"
        >
@@ -172,6 +172,34 @@ const nearbyHighSchools = computed(() => {
  }
  return []
 })
+
+// 학년에 맞춘 학교 목록 (중학생인 경우 중학교 명칭 자동 매칭 및 보완)
+const displaySchools = computed(() => {
+  const highList = nearbyHighSchools.value
+  if (isMiddle.value) {
+    const middleList = []
+    const cleanDong = (props.regionDong || '').replace(/(동|읍|면|리)$/, '')
+    if (cleanDong) {
+      middleList.push({
+        code: 'mid-dong-1',
+        name: `${cleanDong}중학교`,
+        type: '공립'
+      })
+    }
+    highList.forEach((sch, idx) => {
+      const midName = sch.name.replace(/여자고등학교$/, '여자중학교').replace(/고등학교$/, '중학교')
+      if (!middleList.some(m => m.name === midName)) {
+        middleList.push({
+          code: `mid-${sch.code || idx}`,
+          name: midName,
+          type: sch.foundation ? `${sch.foundation}` : '중학'
+        })
+      }
+    })
+    return middleList.slice(0, 8)
+  }
+  return highList
+})
 </script>

 <style scoped>
@@ -127,14 +127,14 @@
                    <i class="fa-solid fa-paper-plane mr-2"></i>
                    <span>{{ selectedItem.name }} 무료 상담 신청하기</span>
                  </button>
-                  <button 
-                    type="button" 
+                  <NuxtLink 
+                    :to="getSubjectPageUrl(selectedItem.subjectKey)" 
                    class="btn-modal-link" 
-                    @click="goToSubjectPage(selectedItem.subjectKey)"
+                    @click="closeModal"
                  >
                    <span>전용 페이지 이동</span>
                    <i class="fa-solid fa-chevron-right ml-1"></i>
-                  </button>
+                  </NuxtLink>
                </div>
              </div>
            </div>
@@ -302,9 +302,8 @@ const applyWithSubject = (subjectName) => {
  }
 }

-// 해당 과목 전용 페이지로 이동
-const goToSubjectPage = (subjectKey) => {
-  closeModal()
+// 해당 과목 전용 페이지 URL 생성 (NuxtLink 바인딩용)
+const getSubjectPageUrl = (subjectKey) => {
  const dong = props.regionDong || '서울'
  const grade = props.grade || '중학생'
  const subMap = {
@@ -315,8 +314,13 @@ const goToSubjectPage = (subjectKey) => {
    social: '사회'
  }
  const subName = subMap[subjectKey] || '수학'
-  const targetUrl = `/${encodeURIComponent(dong)}-${encodeURIComponent(grade)}-${encodeURIComponent(subName)}`
-  router.push(targetUrl)
+  return `/${encodeURIComponent(dong)}/${encodeURIComponent(grade)}/${encodeURIComponent(subName)}`
+}
+
+// 해당 과목 전용 페이지로 이동
+const goToSubjectPage = (subjectKey) => {
+  closeModal()
+  router.push(getSubjectPageUrl(subjectKey))
 }

 // ESC 키로 모달 닫기
@@ -1,4 +1,4 @@
-<template>
+<template>
  <div class="landing-page-wrap">
    <!-- 1. 광고 랜딩 전용 지역 식별 바 (외부 이탈 링크 없음) -->
    <div class="ad-location-bar">
@@ -69,6 +69,20 @@
      :currentSubject="parsed.subjectName" 
    />

+    <!-- 13. 크롤러 및 사용자 탐색용 유기적 내부 링크 허브 (Internal Link Hub) -->
+    <InternalLinkHub 
+      :regionDong="parsed.dong" 
+      :grade="parsed.grade" 
+      :subjectName="parsed.subjectName" 
+    />
+
+    <!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
+    <SubjectCarousel 
+      :regionDong="parsed.dong" 
+      :grade="parsed.grade" 
+      :currentSubject="parsed.subjectName" 
+    />
+
    <!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
    <ConsultForm 
      :regionName="parsed.shortRegionName" 
@@ -17,10 +17,10 @@
    </item>
    <item>
      <title><![CDATA[송도동 중학생 수학과외 1:1 맞춤 수업]]></title>
-      <link>https://aeseo.site/%EC%86%A1%EB%8F%84%EB%8F%99-%EC%A4%91%ED%95%99%EC%83%9D-%EC%88%98%ED%95%99</link>
+      <link>https://aeseo.site/%EC%86%A1%EB%8F%84%EB%8F%99/%EC%A4%91%ED%95%99%EC%83%9D/%EC%88%98%ED%95%99</link>
      <description><![CDATA[송도 학군 1:1 개념 정밀 클리닉]]></description>
      <pubDate>Tue, 20 Oct 2026 03:35:57 GMT</pubDate>
-      <guid>https://aeseo.site/%EC%86%A1%EB%8F%84%EB%8F%99-%EC%A4%91%ED%95%99%EC%83%9D-%EC%88%98%ED%95%99</guid>
+      <guid>https://aeseo.site/%EC%86%A1%EB%8F%84%EB%8F%99/%EC%A4%91%ED%95%99%EC%83%9D/%EC%88%98%ED%95%99</guid>
    </item>
  </channel>
 </rss>
@@ -1,4 +1,4 @@
-import type { ParsedRouteParams } from './dataHelper'
+import type { ParsedRouteParams } from './dataHelper'
 import { getShortRegionName } from './dataHelper'

 export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '튜터온', siteDomain = 'https://aeseo.site') {
@@ -13,7 +13,7 @@ export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '튜터온
  const pageDescription = `${regionTitle} ${grade} ${subjectName}과외 전문 매칭. 과외 비용 및 시세 비교부터 무료 시범수업 신청까지. ${dong} 인근 학교별 기출 족보 완벽 분석, 서술형 감점 방지, 검증된 1:1 전문 선생님 100% 매칭.`
  
  // 표준 Canonical URL
-  const canonicalUrl = `${siteDomain}/${encodeURIComponent(dong)}-${encodeURIComponent(grade)}-${encodeURIComponent(subjectName)}`
+  const canonicalUrl = `${siteDomain}/${encodeURIComponent(dong)}/${encodeURIComponent(grade)}/${encodeURIComponent(subjectName)}`

  const jsonLd = {
    '@context': 'https://schema.org',
@@ -37,6 +37,67 @@ export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '튜터온
          'name': siteName
        }
      },
+      {
+        '@type': 'LocalBusiness',
+        'name': `${regionTitle} 1:1 방문 과외`,
+        'image': `${siteDomain}/img/og-preview.png`,
+        'url': canonicalUrl,
+        'telephone': '+82-10-5961-5807',
+        'priceRange': '₩₩',
+        'address': {
+          '@type': 'PostalAddress',
+          'addressLocality': sido,
+          'addressRegion': sigungu,
+          'streetAddress': dong,
+          'addressCountry': 'KR'
+        },
+        'areaServed': `${sido} ${sigungu} ${dong}`
+      },
+      {
+        '@type': 'FAQPage',
+        'mainEntity': [
+          {
+            '@type': 'Question',
+            'name': `${dong} ${grade} ${subjectName} 방문 과외와 온라인 화상 과외 중 어떤 것이 가능한가요?`,
+            'acceptedAnswer': {
+              '@type': 'Answer',
+              'text': `학생과 학부모님의 선호에 따라 100% 자택 방문 대면 과외 또는 실시간 쌍방향 비대면 화상 과외 중 자유롭게 선택하실 수 있습니다. ${dong} 전 지역 방문 수업이 가능합니다.`
+            }
+          },
+          {
+            '@type': 'Question',
+            'name': `${grade} ${subjectName} 전문 선생님이 학생과 잘 맞지 않으면 교체 가능한가요?`,
+            'acceptedAnswer': {
+              '@type': 'Answer',
+              'text': '네, 1회 무료 모의수업을 통해 사전에 호흡을 맞추며, 정규 수업 시작 후에도 학생의 성향이나 요청에 따라 추가 비용 없이 100% 무료 교체 및 환불 규정을 보장합니다.'
+            }
+          },
+          {
+            '@type': 'Question',
+            'name': `${grade} ${subjectName} 과외 수업 비용은 어떻게 되나요?`,
+            'acceptedAnswer': {
+              '@type': 'Answer',
+              'text': `${grade} 내신 단계, 주당 수업 횟수, 수업 시간(1회 60분/90분/120분)에 따라 표준 교육청 가이드라인에 맞춘 투명한 정찰제로 운영됩니다. 무료 상담 시 상세 견적표를 안내해 드립니다.`
+            }
+          },
+          {
+            '@type': 'Question',
+            'name': `${dong} 학교 중간·기말고사 직전 단기 ${subjectName} 족보 클리닉도 가능한가요?`,
+            'acceptedAnswer': {
+              '@type': 'Answer',
+              'text': `네, 시험 3~4주 전 학교별 기출 족보 풀이 및 서술형 배점 방어를 위한 ${grade} ${subjectName} 단기 속성 킬러 클리닉 프로그램도 상시 운영 중입니다.`
+            }
+          },
+          {
+            '@type': 'Question',
+            'name': `${subjectName} 외에 다른 과목도 함께 상담받을 수 있나요?`,
+            'acceptedAnswer': {
+              '@type': 'Answer',
+              'text': `${subjectName} 집중 신청은 물론, 국영수 또는 수탐 복합 패키지로 맞춤 구성하여 전 과목 플래너 관리와 함께 시간표를 편성하실 수 있습니다.`
+            }
+          }
+        ]
+      },
      {
        '@type': 'BreadcrumbList',
        'itemListElement': [