방식 개편

gwangju/components/FastConsultFocus.vue

@@ -4,7 +4,7 @@
       <div class="focus-header">
         <span class="focus-badge">{{ isElementary ? '초등 맞춤 집중 케어' : `${displayGrade} 실전 시험 케어` }}</span>
         <h2 class="focus-main-title">
-          {{ regionDong }} {{ displayGrade }} {{ displaySubject }}과외 
+          {{ shortSido ? `${shortSido} ` : '' }}{{ regionDong }} {{ displayGrade }} {{ displaySubject }}과외 
           <span class="text-accent">5대 핵심 솔루션</span>
         </h2>
         <p class="focus-sub-desc">
@@ -12,7 +12,7 @@
         </p>
       </div>
 
-      <!-- 네이버 5개 멀티 썸네일 스니펫 및 상담 링크 매칭용 5개 리스트 -->
+      <!-- 네이버 5개 멀티 썸네일 스니펫 및 상담 링크 매칭용 가로 5열 캐러셀 -->
       <div class="focus-grid">
         <a 
           v-for="(item, idx) in programList" 
@@ -21,27 +21,30 @@
           class="focus-card"
           :title="`${item.title} 상담 신청`"
         >
-          <div class="focus-thumb-wrap">
-            <img 
-              :src="item.image" 
-              :alt="`${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>
+          <figure class="focus-figure m-0 flex flex-col flex-1">
+            <div class="focus-thumb-wrap">
+              <img 
+                :src="item.image" 
+                :alt="item.title" 
+                width="1080"
+                height="1080" 
+                decoding="async"
+                loading="eager" 
+                fetchpriority="high"
+                class="focus-img"
+              />
             </div>
-          </div>
+
+            <figcaption class="focus-info">
+              <div class="focus-item-tag">{{ item.tag }}</div>
+              <h3 class="focus-item-title m-0">{{ item.title }}</h3>
+              <p class="focus-item-desc">{{ item.desc }}</p>
+              <div class="focus-cta-link">
+                <span>1:1 상담 예약</span>
+                <span class="arrow-sym">&rarr;</span>
+              </div>
+            </figcaption>
+          </figure>
         </a>
       </div>
     </div>
@@ -56,6 +59,14 @@ const props = defineProps({
     type: String,
     default: '중학생'
   },
+  gradeShort: {
+    type: String,
+    default: '중등'
+  },
+  shortSido: {
+    type: String,
+    default: '광주'
+  },
   subjectName: {
     type: String,
     default: '수학'
@@ -78,7 +89,7 @@ const displaySubject = computed(() => {
   return props.subjectName || '수학'
 })
 
-// 초등 vs 중등/고등 5개 항목 분기
+// 초등 vs 중등/고등 5개 항목 분기 (네이버 썸네일 추출 가능한 고해상도 실사 .png 5종 적용)
 const programList = computed(() => {
   const dong = props.regionDong ? `${props.regionDong} ` : ''
   const sub = displaySubject.value
@@ -90,31 +101,31 @@ const programList = computed(() => {
         tag: '개념 완성',
         title: `${dong}초등 ${sub}과외 - 기초학습`,
         desc: '개념 쏙쏙 이해와 튼튼한 연산 기본기 완성',
-        image: '/images/focus/elem-1-basic.svg'
+        image: '/img/math-tutoring.png'
       },
       {
         tag: '학습 코칭',
         title: `${dong}초등 ${sub}과외 - 공부방법`,
         desc: '스스로 원리를 깨우치는 올바른 문제 해결력',
-        image: '/images/focus/elem-2-method.svg'
+        image: '/img/english-tutoring.png'
       },
       {
         tag: '밀착 피드백',
         title: `${dong}초등 ${sub}과외 - 숙제검사`,
         desc: '매일 1:1 오답 점검과 꼼꼼한 피드백 클리닉',
-        image: '/images/focus/elem-3-homework.svg'
+        image: '/img/korean-tutoring.png'
       },
       {
         tag: '자기주도',
         title: `${dong}초등 ${sub}과외 - 공부습관`,
         desc: '매일 스스로 책상에 앉는 주도적 학습 루틴',
-        image: '/images/focus/elem-4-habit.svg'
+        image: '/img/science-tutoring.png'
       },
       {
         tag: '상위권 도약',
         title: `${dong}초등 ${sub}과외 - 중등대비`,
         desc: '중학교 내신 서술형과 심화 개념 선행 마스터',
-        image: '/images/focus/elem-5-middleprep.svg'
+        image: '/img/social-studies-tutoring.png'
       }
     ]
   }
@@ -125,31 +136,31 @@ const programList = computed(() => {
       tag: '기출 정복',
       title: `${dong}${grd} 중간고사 ${sub}과외`,
       desc: '학교별 기출 족보 완벽 분석 및 서술형 킬러 대비',
-      image: '/images/focus/sec-1-midterm.svg'
+      image: '/img/math-tutoring.png'
     },
     {
       tag: '학기말 총력',
       title: `${dong}${grd} 기말고사 ${sub}과외`,
       desc: '전 범위 오답 분석 및 취약 유형 완벽 클리닉',
-      image: '/images/focus/sec-2-final.svg'
+      image: '/img/english-tutoring.png'
     },
     {
       tag: '수능·전국연합',
       title: `${dong}${grd} 모의고사 ${sub}과외`,
       desc: '수능형 사고력 확장 및 실전 시간 배분 특훈',
-      image: '/images/focus/sec-3-mock.svg'
+      image: '/img/korean-tutoring.png'
     },
     {
       tag: '내신 만점',
       title: `${dong}${grd} 수행평가 ${sub}과외`,
       desc: '조건 감점 0점화 및 과제·보고서 완벽 케어',
-      image: '/images/focus/sec-4-assessment.svg'
+      image: '/img/science-tutoring.png'
     },
     {
       tag: '1등급 집중',
       title: `${dong}${grd} 내신대비 ${sub}과외`,
       desc: '관내 교과서·부교재 적중 1:1 맞춤 지도',
-      image: '/images/focus/sec-5-schoolprep.svg'
+      image: '/img/social-studies-tutoring.png'
     }
   ]
 })
@@ -202,10 +213,10 @@ const programList = computed(() => {
   margin: 0;
 }
 
-/* 5열 카드 그리드 */
+/* 가로 1열 5칸 캐러셀 그리드 */
 .focus-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, minmax(180px, 1fr));
   gap: 14px;
 }
 
@@ -234,6 +245,7 @@ const programList = computed(() => {
   aspect-ratio: 1 / 1;
   background: #f1f5f9;
   overflow: hidden;
+  margin: 0;
 }
 
 .focus-img {
@@ -248,20 +260,6 @@ const programList = computed(() => {
   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;
@@ -281,7 +279,7 @@ const programList = computed(() => {
   font-weight: 800;
   color: #0f172a;
   line-height: 1.35;
-  margin-bottom: 6px;
+  margin: 0 0 6px 0;
   word-break: keep-all;
 }
 
@@ -313,52 +311,37 @@ const programList = computed(() => {
   transform: translateX(3px);
 }
 
-/* 태블릿 및 모바일 반응형 */
-@media (max-width: 960px) {
+/* 태블릿 및 모바일 가로 스크롤 캐러셀 반응형 */
+@media (max-width: 1024px) {
   .focus-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 640px) {
-  .focus-grid {
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
     gap: 12px;
+    padding-bottom: 12px;
+    -webkit-overflow-scrolling: touch;
   }
 
   .focus-card {
-    flex-direction: row;
-    align-items: center;
+    flex: 0 0 210px;
+    scroll-snap-align: start;
+  }
+}
+
+@media (max-width: 768px) {
+  .focus-grid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    gap: 12px;
+    padding-bottom: 12px;
   }
 
-  .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;
+  .focus-card {
+    flex: 0 0 200px;
+    scroll-snap-align: start;
   }
 }
 </style>