docker 설정 완료

site3/components/FastConsultFocus.vue

@@ -0,0 +1,364 @@
+<template>
+  <section class="focus-programs-section" aria-label="맞춤 과외 핵심 프로그램">
+    <div class="focus-container">
+      <div class="focus-header">
+        <span class="focus-badge">{{ isElementary ? '초등 맞춤 집중 케어' : `${displayGrade} 실전 시험 케어` }}</span>
+        <h2 class="focus-main-title">
+          {{ regionDong }} {{ displayGrade }} {{ displaySubject }}과외 
+          <span class="text-accent">5대 핵심 솔루션</span>
+        </h2>
+        <p class="focus-sub-desc">
+          네이버 검색 및 학부모님 선호도 1위! 취약 단원부터 시험 직전 족보 풀이까지 1:1로 책임 지도합니다.
+        </p>
+      </div>
+
+      <!-- 네이버 5개 멀티 썸네일 스니펫 및 상담 링크 매칭용 5개 리스트 -->
+      <div class="focus-grid">
+        <a 
+          v-for="(item, idx) in programList" 
+          :key="idx" 
+          href="#consult-section" 
+          class="focus-card"
+          :title="`${regionDong} ${item.title} 상담 신청`"
+        >
+          <div class="focus-thumb-wrap">
+            <img 
+              :src="item.image" 
+              :alt="`${regionDong} ${item.title} 1:1 맞춤 지도`" 
+              width="500" 
+              height="500" 
+              loading="lazy" 
+              class="focus-img"
+            />
+            <span class="step-tag">STEP 0{{ idx + 1 }}</span>
+          </div>
+
+          <div class="focus-info">
+            <div class="focus-item-tag">{{ item.tag }}</div>
+            <strong class="focus-item-title">{{ item.title }}</strong>
+            <p class="focus-item-desc">{{ item.desc }}</p>
+            <div class="focus-cta-link">
+              <span>1:1 상담 예약</span>
+              <span class="arrow-sym">&rarr;</span>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  grade: {
+    type: String,
+    default: '중학생'
+  },
+  subjectName: {
+    type: String,
+    default: '수학'
+  },
+  regionDong: {
+    type: String,
+    default: ''
+  }
+})
+
+const isElementary = computed(() => {
+  return (props.grade || '').includes('초등')
+})
+
+const displayGrade = computed(() => {
+  return props.grade || '중학생'
+})
+
+const displaySubject = computed(() => {
+  return props.subjectName || '수학'
+})
+
+// 초등 vs 중등/고등 5개 항목 분기
+const programList = computed(() => {
+  const dong = props.regionDong ? `${props.regionDong} ` : ''
+  const sub = displaySubject.value
+  const grd = displayGrade.value
+
+  if (isElementary.value) {
+    return [
+      {
+        tag: '개념 완성',
+        title: `${dong}초등 ${sub}과외 - 기초학습`,
+        desc: '개념 쏙쏙 이해와 튼튼한 연산 기본기 완성',
+        image: '/images/focus/elem-1-basic.svg'
+      },
+      {
+        tag: '학습 코칭',
+        title: `${dong}초등 ${sub}과외 - 공부방법`,
+        desc: '스스로 원리를 깨우치는 올바른 문제 해결력',
+        image: '/images/focus/elem-2-method.svg'
+      },
+      {
+        tag: '밀착 피드백',
+        title: `${dong}초등 ${sub}과외 - 숙제검사`,
+        desc: '매일 1:1 오답 점검과 꼼꼼한 피드백 피드백',
+        image: '/images/focus/elem-3-homework.svg'
+      },
+      {
+        tag: '자기주도',
+        title: `${dong}초등 ${sub}과외 - 공부습관`,
+        desc: '매일 스스로 책상에 앉는 주도적 학습 루틴',
+        image: '/images/focus/elem-4-habit.svg'
+      },
+      {
+        tag: '상위권 도약',
+        title: `${dong}초등 ${sub}과외 - 중등대비`,
+        desc: '중학교 내신 서술형과 심화 개념 선행 마스터',
+        image: '/images/focus/elem-5-middleprep.svg'
+      }
+    ]
+  }
+
+  // 중등 & 고등 동일
+  return [
+    {
+      tag: '기출 정복',
+      title: `${dong}${grd} 중간고사 ${sub}과외`,
+      desc: '학교별 기출 족보 완벽 분석 및 서술형 킬러 대비',
+      image: '/images/focus/sec-1-midterm.svg'
+    },
+    {
+      tag: '학기말 총력',
+      title: `${dong}${grd} 기말고사 ${sub}과외`,
+      desc: '전 범위 오답 분석 및 취약 유형 완벽 클리닉',
+      image: '/images/focus/sec-2-final.svg'
+    },
+    {
+      tag: '수능·전국연합',
+      title: `${dong}${grd} 모의고사 ${sub}과외`,
+      desc: '수능형 사고력 확장 및 실전 시간 배분 특훈',
+      image: '/images/focus/sec-3-mock.svg'
+    },
+    {
+      tag: '내신 만점',
+      title: `${dong}${grd} 수행평가 ${sub}과외`,
+      desc: '조건 감점 0점화 및 과제·보고서 완벽 케어',
+      image: '/images/focus/sec-4-assessment.svg'
+    },
+    {
+      tag: '1등급 집중',
+      title: `${dong}${grd} 내신대비 ${sub}과외`,
+      desc: '관내 교과서·부교재 적중 1:1 맞춤 지도',
+      image: '/images/focus/sec-5-schoolprep.svg'
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.focus-programs-section {
+  padding: clamp(35px, 6vw, 65px) 16px;
+  background: var(--bg-body, #f8fafc);
+  border-top: 1px solid var(--border-color, #e2e8f0);
+  border-bottom: 1px solid var(--border-color, #e2e8f0);
+}
+
+.focus-container {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.focus-header {
+  text-align: center;
+  margin-bottom: clamp(24px, 4vw, 36px);
+}
+
+.focus-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  background: var(--badge-bg, rgba(30, 58, 138, 0.08));
+  border-radius: 9999px;
+  margin-bottom: 8px;
+}
+
+.focus-main-title {
+  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
+  font-weight: 800;
+  color: var(--text-color, #0f172a);
+  letter-spacing: -0.5px;
+  margin-bottom: 8px;
+}
+
+.text-accent {
+  color: var(--primary-color, #1e3a8a);
+}
+
+.focus-sub-desc {
+  font-size: clamp(0.85rem, 2vw, 0.95rem);
+  color: #64748b;
+  margin: 0;
+}
+
+/* 5열 카드 그리드 */
+.focus-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 14px;
+}
+
+.focus-card {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--card-radius, 12px);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+}
+
+.focus-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--primary-color, #1e3a8a);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+}
+
+.focus-thumb-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: #f1f5f9;
+  overflow: hidden;
+}
+
+.focus-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+.focus-card:hover .focus-img {
+  transform: scale(1.04);
+}
+
+.step-tag {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 8px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  color: #ffffff;
+  font-size: 0.68rem;
+  font-weight: 800;
+  border-radius: 4px;
+  letter-spacing: 0.5px;
+}
+
+.focus-info {
+  padding: 14px 12px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.focus-item-tag {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  margin-bottom: 4px;
+}
+
+.focus-item-title {
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.35;
+  margin-bottom: 6px;
+  word-break: keep-all;
+}
+
+.focus-item-desc {
+  font-size: 0.78rem;
+  color: #64748b;
+  line-height: 1.4;
+  margin-bottom: 12px;
+  flex: 1;
+  word-break: keep-all;
+}
+
+.focus-cta-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.76rem;
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  border-top: 1px dashed var(--border-color, #e2e8f0);
+  padding-top: 8px;
+}
+
+.arrow-sym {
+  transition: transform 0.2s ease;
+}
+
+.focus-card:hover .arrow-sym {
+  transform: translateX(3px);
+}
+
+/* 태블릿 및 모바일 반응형 */
+@media (max-width: 960px) {
+  .focus-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .focus-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .focus-card {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .focus-thumb-wrap {
+    width: 105px;
+    height: 105px;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+  }
+
+  .focus-info {
+    padding: 10px 12px;
+  }
+
+  .focus-item-title {
+    font-size: 0.88rem;
+    margin-bottom: 2px;
+  }
+
+  .focus-item-desc {
+    font-size: 0.74rem;
+    margin-bottom: 6px;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .focus-cta-link {
+    padding-top: 4px;
+    font-size: 0.72rem;
+  }
+}
+</style>

site3/pages/[...slug].vue

@@ -55,6 +55,13 @@
       :subjectName="parsed.subjectName" 
     />
 
+    <!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
+    <FastConsultFocus 
+      :regionDong="parsed.dong" 
+      :grade="parsed.grade" 
+      :subjectName="parsed.subjectName" 
+    />
+
     <!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
     <ConsultForm 
       :regionName="parsed.shortRegionName" 

site3/pages/index.vue

@@ -35,6 +35,9 @@
     <!-- 자주 묻는 질문 -->
     <FaqAccordion regionDong="전국" />
 
+    <!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
+    <FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
+
     <!-- 맨 하단 상담 신청 폼 -->
     <ConsultForm 
       regionName="전국 전 지역"