이미제

gwangju/components/ConsultForm.vue

@@ -178,7 +178,7 @@ const handleSubmit = async () => {
 
   try {
     const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
-    await $fetch('/api/consult', {
+    const res = await $fetch('/api/consult', {
       method: 'POST',
       body: {
         studentName: form.value.studentName,
@@ -190,10 +190,14 @@ const handleSubmit = async () => {
         url: currentUrl
       }
     })
-    submitted.value = true
+    if (res && res.success) {
+      submitted.value = true
+    } else {
+      alert('상담 신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
+    }
   } catch (err) {
-    console.error('상담 신청 전송:', err)
-    submitted.value = true
+    console.error('상담 신청 전송 실패:', err)
+    alert('상담 신청 접수 중 문제가 발생했습니다. 전화(010-5961-5807)로 문의해 주시기 바랍니다.')
   } finally {
     loading.value = false
   }

gwangju/components/SubjectCarousel.vue

@@ -0,0 +1,783 @@
+<template>
+  <section class="subject-gallery-section" aria-label="과목별 1:1 맞춤과외 갤러리">
+    <div class="gallery-container">
+      
+      <!-- 섹션 헤더 -->
+      <div class="gallery-header">
+        <span class="gallery-badge">
+          <i class="fa-solid fa-sparkles mr-1"></i>
+          {{ regionDong ? `${regionDong} ` : '' }}과목별 1:1 전문 전담팀
+        </span>
+        <h2 class="gallery-title">
+          취약 과목을 1등급 전략 과목으로 역전시키는<br />
+          <strong>1:1 전담 과목별 클래스</strong>
+        </h2>
+        <p class="gallery-desc">
+          원하시는 과목 카드를 클릭하시면 1:1 맞춤 커리큘럼과 상세 안내를 페이지에서 크게 확인하실 수 있습니다.
+        </p>
+      </div>
+
+      <!-- 2 - 2 - 1 그리드 정렬 레이아웃 -->
+      <div class="subject-grid-221">
+        <div 
+          v-for="(item, idx) in subjectList" 
+          :key="item.name"
+          class="gallery-card"
+          :class="`card-item-${idx + 1}`"
+          @click="openModal(item)"
+        >
+          <div class="card-inner">
+            <div class="img-wrap">
+              <img 
+                :src="item.image" 
+                :alt="`${item.name} 1:1 맞춤 지도`"
+                class="subject-img"
+                loading="lazy"
+              />
+              <span class="subject-tag">{{ item.tag }}</span>
+              <div class="zoom-overlay">
+                <span class="zoom-btn">
+                  <i class="fa-solid fa-magnifying-glass-plus"></i>
+                  <span>상세 보기</span>
+                </span>
+              </div>
+            </div>
+            
+            <div class="card-info">
+              <div class="card-subject-name">
+                <span class="sub-name">{{ item.name }}</span>
+                <span class="sub-grade">{{ grade }}</span>
+              </div>
+              <p class="card-subject-desc">{{ item.desc }}</p>
+              <div class="card-action">
+                <span>자세히 보기 & 신청</span>
+                <i class="fa-solid fa-arrow-right"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- 클릭 시 페이지에 크게 나오는 상세 모달 (Lightbox Modal) -->
+    <Teleport to="body">
+      <Transition name="modal-fade">
+        <div 
+          v-if="selectedItem" 
+          class="modal-backdrop" 
+          @click.self="closeModal"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div class="modal-card">
+            <!-- 닫기 버튼 -->
+            <button 
+              type="button" 
+              class="modal-close-btn" 
+              @click="closeModal" 
+              aria-label="닫기"
+            >
+              <i class="fa-solid fa-xmark"></i>
+            </button>
+
+            <div class="modal-grid">
+              <!-- 모달 좌측: 고해상도 생성 이미지 원본 -->
+              <div class="modal-img-col">
+                <img 
+                  :src="selectedItem.image" 
+                  :alt="`${selectedItem.name} 1:1 맞춤 과외`" 
+                  class="modal-main-img"
+                />
+                <span class="modal-img-badge">{{ selectedItem.tag }}</span>
+              </div>
+
+              <!-- 모달 우측: 상세 설명 및 액션 버튼 -->
+              <div class="modal-content-col">
+                <div class="modal-header">
+                  <span class="modal-pill">{{ regionDong || '관내' }} 1:1 밀착 코칭</span>
+                  <h3 class="modal-title">
+                    {{ selectedItem.name }}
+                    <span class="text-sub">1:1 맞춤 마스터 클래스</span>
+                  </h3>
+                  <p class="modal-slogan">{{ selectedItem.slogan }}</p>
+                </div>
+
+                <div class="modal-points">
+                  <div class="point-row" v-for="(pt, pIdx) in selectedItem.details" :key="pIdx">
+                    <span class="point-num">0{{ pIdx + 1 }}</span>
+                    <div>
+                      <strong class="point-head">{{ pt.title }}</strong>
+                      <p class="point-body">{{ pt.desc }}</p>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 모달 하단 액션 버튼 그룹 -->
+                <div class="modal-actions">
+                  <button 
+                    type="button" 
+                    class="btn-modal-apply" 
+                    @click="applyWithSubject(selectedItem.name)"
+                  >
+                    <i class="fa-solid fa-paper-plane mr-2"></i>
+                    <span>{{ selectedItem.name }} 무료 상담 신청하기</span>
+                  </button>
+                  <button 
+                    type="button" 
+                    class="btn-modal-link" 
+                    @click="goToSubjectPage(selectedItem.subjectKey)"
+                  >
+                    <span>전용 페이지 이동</span>
+                    <i class="fa-solid fa-chevron-right ml-1"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  regionDong: {
+    type: String,
+    default: ''
+  },
+  grade: {
+    type: String,
+    default: '중·고등'
+  },
+  currentSubject: {
+    type: String,
+    default: ''
+  }
+})
+
+const router = useRouter()
+
+// 5대 핵심 과목 (2 2 1 순서 배치)
+const subjectList = [
+  // 1행: 수학, 영어
+  {
+    name: '수학과외',
+    subjectKey: 'math',
+    tag: '인기 1위',
+    image: '/img/수학과외.png',
+    desc: '개념 구멍 추적 및 킬러 문항 1:1 완파',
+    slogan: '단순 공식 암기가 아닌 원리 이해와 킬러 문항 해결력을 기릅니다.',
+    details: [
+      { title: '오답 4분류 역추적 클리닉', desc: '자주 실수하는 계산 오류 및 조건 누락 패턴을 1:1로 교정합니다.' },
+      { title: '학교별 3개년 기출 족보 변형', desc: '인근 학교의 빈출 고난도 서술형 문항을 시험 전 3회 이상 체화합니다.' },
+      { title: '50분 실전 타임어택 훈련', desc: '실제 시험 시간 부족을 해결하기 위해 문항별 시간 배분 루틴을 훈련합니다.' }
+    ]
+  },
+  {
+    name: '영어과외',
+    subjectKey: 'english',
+    tag: '내신 필수',
+    image: '/img/영어과외.png',
+    desc: '교과서·부교재 전 지문 변형 및 서술형 영작',
+    slogan: '어휘, 문법, 서술형 감점 0점화로 내신 1등급을 완성합니다.',
+    details: [
+      { title: '부교재 전 지문 어휘·문맥 변형', desc: '수능특강, 모의고사 기출 등 학교 부교재의 변형 출제 포인트를 완벽 대비합니다.' },
+      { title: '서술형 조건 영작 1:1 첨삭', desc: '문법 조건 누락 감점을 원천 차단하는 정밀 첨삭 지도를 진행합니다.' },
+      { title: '1:1 구문 독해 & 빈칸 추론 특훈', desc: '문장 구조 분석을 통해 킬러 빈칸·순서 배열 문제를 빠르고 정확히 풉니다.' }
+    ]
+  },
+  // 2행: 국어, 과학
+  {
+    name: '국어과외',
+    subjectKey: 'korean',
+    tag: '문해력 완성',
+    image: '/img/국어과외.png',
+    desc: '비문학 독해 논리와 교과서 문학 1:1 정밀 분석',
+    slogan: '긴 지문도 흔들리지 않는 문해력과 서술형 채점 기준을 공략합니다.',
+    details: [
+      { title: '비문학 구조 독해 공식 전수', desc: '제재별 핵심 키워드 연결과 선지 근거 찾기 훈련을 1:1로 코칭합니다.' },
+      { title: '교과서 및 외부 지문 연계 분석', desc: '낯선 현대시·고전시가도 스스로 해석할 수 있는 감상 원리를 터득합니다.' },
+      { title: '서술형 핵심 키워드 채점표 정복', desc: '출제자가 요구하는 조건에 맞춘 군더더기 없는 완벽한 답안 작성을 훈련합니다.' }
+    ]
+  },
+  {
+    name: '과학과외',
+    subjectKey: 'science',
+    tag: '통합과학',
+    image: '/img/과학과외.png',
+    desc: '통합과학 원리 이해 및 물화생지 킬러 단원 정복',
+    slogan: '까다로운 계산과 복잡한 개념을 1:1 시각화와 원리 풀이로 해결합니다.',
+    details: [
+      { title: '2026 개정 통합과학 개념 체계화', desc: '교과 단원 간 융합 개념을 알기 쉽게 정리하고 탐구형 문항을 대비합니다.' },
+      { title: '물화생지 킬러 계산 단원 완파', desc: '역학, 화학 반응식, 유전 등 학생들이 가장 어려워하는 단원을 집중 지도합니다.' },
+      { title: '수행평가 실험 보고서 1:1 가이드', desc: '지필고사뿐 아니라 감점되기 쉬운 과학 탐구 보고서 만점을 케어합니다.' }
+    ]
+  },
+  // 3행: 사회 (1개 단독 센터 정렬)
+  {
+    name: '사회과외',
+    subjectKey: 'social',
+    tag: '통합사회',
+    image: '/img/사회과외.png',
+    desc: '통합사회·한국사 핵심 흐름 및 사탐 만점 전략',
+    slogan: '무작정 외우지 않고 역사와 사회 현상의 맥락을 이해하며 1등급을 쟁취합니다.',
+    details: [
+      { title: '시대별 흐름 마인드맵 정리', desc: '단편적 암기가 아닌 전후 인과관계를 입체적으로 정리해 기억을 오래 유지합니다.' },
+      { title: '자료 해석 및 그래프 변형 문항 정복', desc: '사탐 킬러로 출제되는 지도·통계·사료 분석 능력을 1:1로 키워줍니다.' },
+      { title: '단기 서술형 족보 총정리', desc: '시험 3주 전 핵심 키워드와 단원별 요약 노트를 통해 내신 만점을 달성합니다.' }
+    ]
+  }
+]
+
+const selectedItem = ref(null)
+
+// 모달 오픈/클로즈
+const openModal = (item) => {
+  selectedItem.value = item
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = 'hidden'
+  }
+}
+
+const closeModal = () => {
+  selectedItem.value = null
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = ''
+  }
+}
+
+// 모달 내 과목 선택 후 상담 신청 폼으로 이동
+const applyWithSubject = (subjectName) => {
+  closeModal()
+  const cleanSubj = subjectName.replace(/과외$/, '')
+  
+  const subjSelect = document.getElementById('weakSubject') || document.getElementById('c-subject')
+  if (subjSelect) {
+    subjSelect.value = cleanSubj
+    subjSelect.dispatchEvent(new Event('change'))
+  }
+  
+  const formTarget = document.getElementById('leadFormSection') || document.getElementById('consult-section')
+  if (formTarget) {
+    formTarget.scrollIntoView({ behavior: 'smooth' })
+  }
+}
+
+// 해당 과목 전용 페이지로 이동
+const goToSubjectPage = (subjectKey) => {
+  closeModal()
+  const dong = props.regionDong || '서울'
+  const grade = props.grade || '중학생'
+  const subMap = {
+    math: '수학',
+    english: '영어',
+    korean: '국어',
+    science: '과학',
+    social: '사회'
+  }
+  const subName = subMap[subjectKey] || '수학'
+  const targetUrl = `/${encodeURIComponent(dong)}-${encodeURIComponent(grade)}-${encodeURIComponent(subName)}`
+  router.push(targetUrl)
+}
+
+// ESC 키로 모달 닫기
+const handleKeyDown = (e) => {
+  if (e.key === 'Escape' && selectedItem.value) {
+    closeModal()
+  }
+}
+
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    window.addEventListener('keydown', handleKeyDown)
+  }
+})
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', handleKeyDown)
+    document.body.style.overflow = ''
+  }
+})
+</script>
+
+<style scoped>
+.subject-gallery-section {
+  width: 100%;
+  max-width: 1080px;
+  margin: 40px auto 60px;
+  padding: 0 16px;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.gallery-container {
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  border: 1px solid #e2e8f0;
+  border-radius: 28px;
+  padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
+}
+
+.gallery-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.gallery-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: clamp(0.78rem, 2vw, 0.88rem);
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  background: rgba(30, 58, 138, 0.08);
+  padding: 6px 14px;
+  border-radius: 9999px;
+  margin-bottom: 10px;
+}
+
+.gallery-title {
+  font-size: clamp(1.35rem, 3.5vw, 1.95rem);
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.35;
+  letter-spacing: -0.5px;
+  margin-bottom: 8px;
+}
+
+.gallery-title strong {
+  color: var(--primary-color, #1e3a8a);
+}
+
+.gallery-desc {
+  font-size: clamp(0.82rem, 2vw, 0.94rem);
+  color: #64748b;
+  word-break: keep-all;
+}
+
+/* 2 - 2 - 1 그리드 레이아웃 */
+.subject-grid-221 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  width: 100%;
+}
+
+/* 5번째 아이템: 3행 단독 1개 (2열 span 및 중앙 정렬) */
+.card-item-5 {
+  grid-column: 1 / -1;
+  justify-self: center;
+  width: 100%;
+  max-width: calc(50% - 10px);
+}
+
+.gallery-card {
+  cursor: pointer;
+  border-radius: 20px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.card-inner {
+  background: #ffffff;
+  border-radius: 20px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.gallery-card:hover .card-inner {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 32px rgba(30, 58, 138, 0.12);
+  border-color: #93c5fd;
+}
+
+.img-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: #f1f5f9;
+}
+
+.subject-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.gallery-card:hover .subject-img {
+  transform: scale(1.05);
+}
+
+.subject-tag {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  background: rgba(15, 23, 42, 0.85);
+  backdrop-filter: blur(4px);
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 800;
+  padding: 4px 12px;
+  border-radius: 9999px;
+  z-index: 2;
+}
+
+.zoom-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 3;
+}
+
+.gallery-card:hover .zoom-overlay {
+  opacity: 1;
+}
+
+.zoom-btn {
+  background: #ffffff;
+  color: #0f172a;
+  font-size: 0.88rem;
+  font-weight: 800;
+  padding: 10px 18px;
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  transform: translateY(6px);
+  transition: transform 0.3s ease;
+}
+
+.gallery-card:hover .zoom-btn {
+  transform: translateY(0);
+}
+
+.card-info {
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.card-subject-name {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.sub-name {
+  font-size: 1.2rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.sub-grade {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+
+.card-subject-desc {
+  font-size: 0.85rem;
+  color: #475569;
+  line-height: 1.45;
+  margin-bottom: 14px;
+  flex: 1;
+  word-break: keep-all;
+}
+
+.card-action {
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: gap 0.2s ease;
+}
+
+.gallery-card:hover .card-action {
+  gap: 10px;
+}
+
+/* 모바일 반응형 대응 */
+@media (max-width: 640px) {
+  .subject-grid-221 {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .card-item-5 {
+    grid-column: auto;
+    max-width: 100%;
+    justify-self: stretch;
+  }
+}
+
+/* 라이트박스 모달 */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.75);
+  backdrop-filter: blur(6px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.modal-card {
+  position: relative;
+  background: #ffffff;
+  border-radius: 24px;
+  max-width: 900px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.modal-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #f1f5f9;
+  border: none;
+  font-size: 1.1rem;
+  color: #475569;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 20;
+  transition: all 0.2s ease;
+}
+
+.modal-close-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.modal-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .modal-grid {
+    grid-template-columns: 1fr 1.15fr;
+  }
+}
+
+.modal-img-col {
+  position: relative;
+  background: #0f172a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+
+.modal-main-img {
+  width: 100%;
+  height: 100%;
+  max-height: 520px;
+  object-fit: cover;
+  display: block;
+}
+
+.modal-img-badge {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background: var(--accent-color, #d97706);
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 800;
+  padding: 5px 12px;
+  border-radius: 9999px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.modal-content-col {
+  padding: clamp(24px, 4vw, 36px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.modal-pill {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  background: rgba(30, 58, 138, 0.08);
+  padding: 4px 10px;
+  border-radius: 9999px;
+  margin-bottom: 8px;
+}
+
+.modal-title {
+  font-size: clamp(1.4rem, 3vw, 1.85rem);
+  font-weight: 900;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+  line-height: 1.25;
+}
+
+.modal-title .text-sub {
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  margin-top: 4px;
+}
+
+.modal-slogan {
+  font-size: 0.88rem;
+  color: #475569;
+  margin-top: 8px;
+  line-height: 1.5;
+  word-break: keep-all;
+}
+
+.modal-points {
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: #f8fafc;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+}
+
+.point-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.point-num {
+  font-size: 0.85rem;
+  font-weight: 900;
+  color: var(--primary-color, #1e3a8a);
+  background: #ffffff;
+  padding: 2px 8px;
+  border-radius: 6px;
+  border: 1px solid #cbd5e1;
+  flex-shrink: 0;
+}
+
+.point-head {
+  display: block;
+  font-size: 0.88rem;
+  font-weight: 800;
+  color: #1e293b;
+  margin-bottom: 2px;
+}
+
+.point-body {
+  font-size: 0.78rem;
+  color: #64748b;
+  line-height: 1.45;
+  word-break: keep-all;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.btn-modal-apply {
+  flex: 1 1 200px;
+  background: var(--primary-color, #1e3a8a);
+  color: #ffffff;
+  font-size: 0.92rem;
+  font-weight: 800;
+  padding: 14px 20px;
+  border-radius: 14px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.25);
+  transition: all 0.2s ease;
+}
+
+.btn-modal-apply:hover {
+  filter: brightness(1.1);
+  transform: translateY(-2px);
+}
+
+.btn-modal-link {
+  background: #f1f5f9;
+  color: #334155;
+  font-size: 0.85rem;
+  font-weight: 700;
+  padding: 14px 18px;
+  border-radius: 14px;
+  border: 1px solid #cbd5e1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.btn-modal-link:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+/* 모달 트랜지션 */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.modal-fade-enter-active .modal-card,
+.modal-fade-leave-active .modal-card {
+  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.modal-fade-enter-from .modal-card,
+.modal-fade-leave-to .modal-card {
+  transform: scale(0.92) translateY(20px);
+}
+</style>

gwangju/pages/[...slug].vue

@@ -62,6 +62,13 @@
       :subjectName="parsed.subjectName" 
     />
 
+    <!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
+    <SubjectCarousel 
+      :regionDong="parsed.dong" 
+      :grade="parsed.grade" 
+      :currentSubject="parsed.subjectName" 
+    />
+
     <!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
     <ConsultForm 
       :regionName="parsed.shortRegionName" 

gwangju/pages/index.vue

@@ -1,5 +1,5 @@
-<template>
-  <div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
+<template>
+  <div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative pb-8 min-h-screen w-full">
     
     <!-- Header -->
     <header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
@@ -330,6 +330,9 @@
         </div>
       </section>
 
+      <!-- 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
+      <SubjectCarousel grade="초·중·고" />
+
       <!-- FAQ 섹션 -->
       <section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
         <header class="text-center mb-8">
@@ -353,20 +356,6 @@
 
     </main>
 
-    <!-- 하단 모바일 고정 CTA 바 -->
-    <aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
-      <div class="max-w-4xl mx-auto flex items-center gap-3">
-        <a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
-          <i class="fa-solid fa-phone text-indigo-700 text-sm mb-0.5"></i>
-          <span>010-5961-5807</span>
-        </a>
-        <a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
-          <i class="fa-solid fa-file-lines text-xs sm:text-sm"></i>
-          <span>지금 내신 족보 & 1:1 상담 신청하기</span>
-        </a>
-      </div>
-    </aside>
-
   </div>
 </template>
 

gwangju/utils/dataHelper.ts

@@ -96,7 +96,6 @@ export function getShortRegionName(sido: string, dong: string, sigungu?: string)
   }
   // 경기, 인천, 광주, 부산, 대구, 대전 (예: 경기 수원 영통동, 대구 수성구 범어동)
   return `${prefix}${sigungu ? sigungu + ' ' : ''}${dong || ''}`.trim()
-} ${dong || ''}`.trim()
 }
 
 // 지능형 URL 슬러그 파서