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

gyeonggi/components/FastConsultFocus.vue

@@ -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'
       },
       {

gyeonggi/components/InternalLinkHub.vue

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

gyeonggi/components/NearbySchools.vue

@@ -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"
         >
@@ -116,7 +116,6 @@
 <script setup>
 import { computed } from 'vue'
 import schoolsIndex from '../data/schools_index.json'
-import { getRegionByDong } from '../utils/dataHelper'
 
 const props = defineProps({
   regionDong: {
@@ -142,7 +141,7 @@ const targetSchoolType = computed(() => {
   return '초·중학교'
 })
 
-// 동네 기준 또는 관할 시군구 기준 인근 고등학교 목록
+// 동네 기준 또는 구 기준 인근 고등학교 목록
 const nearbyHighSchools = computed(() => {
   const dong = props.regionDong || ''
   const cleanDong = dong.trim()
@@ -159,23 +158,10 @@ const nearbyHighSchools = computed(() => {
     }
   }
 
-  // 3. 동네에 고등학교가 없으면 동일 관할 시군구 학교 상위 6개 검색
-  const regInfo = getRegionByDong(cleanDong)
-  if (regInfo && regInfo.sigungu) {
-    const targetSigungu = regInfo.sigungu.trim()
-    const matchedBySigungu = []
-    for (const list of Object.values(schoolsIndex.byDong || {})) {
-      for (const sch of list) {
-        if (sch.sigungu && (sch.sigungu.includes(targetSigungu) || targetSigungu.includes(sch.sigungu))) {
-          if (!matchedBySigungu.some(m => m.code === sch.code)) {
-            matchedBySigungu.push(sch)
-          }
-        }
-      }
-      if (matchedBySigungu.length >= 6) break
-    }
-    if (matchedBySigungu.length > 0) {
-      return matchedBySigungu.slice(0, 6)
+  // 3. 동네에 고등학교가 없으면 관할 구/시 또는 인접 구의 학교 상위 6개
+  for (const [gu, list] of Object.entries(schoolsIndex.bySigungu || {})) {
+    if (cleanDong.includes(gu) || gu.includes(cleanDong)) {
+      return list.slice(0, 6)
     }
   }
 
@@ -186,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>

gyeonggi/components/SubjectCarousel.vue

@@ -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 키로 모달 닫기