11

site7/components/SuccessStories.vue

@@ -0,0 +1,218 @@
+<template>
+  <section class="stories-section">
+    <div class="section-header">
+      <span class="section-badge">{{ regionDong }} {{ grade }} {{ subjectName }} 성공 사례</span>
+      <h2 class="section-title">{{ regionDong }} {{ grade }}들의 놀라운 {{ subjectName }} 성적 변화</h2>
+      <p class="section-desc">공부 방법만 1:1로 정확히 교정해도 성적은 반드시 오릅니다. 실제 수강생들의 리얼 후기를 확인하세요.</p>
+    </div>
+
+    <!-- 학년과 과목에 100% 일치하는 맞춤형 성적 향상 수기 카드 3선 -->
+    <div class="stories-grid">
+      <div v-for="(story, idx) in matchedStories" :key="idx" class="story-card">
+        <div class="story-top">
+          <span class="student-info">{{ story.student }}</span>
+          <div class="grade-jump">
+            <span class="before">{{ story.before }}</span>
+            <span class="arrow">→</span>
+            <span class="after">{{ story.after }}</span>
+          </div>
+        </div>
+        <p class="story-review">"{{ story.review }}"</p>
+        <div class="story-sub">수강 기간: {{ story.period }} / {{ regionDong }} 1:1 맞춤 {{ subjectName }} 수업</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  regionDong: {
+    type: String,
+    required: true
+  },
+  grade: {
+    type: String,
+    default: '중학생'
+  },
+  subjectName: {
+    type: String,
+    default: '영어'
+  }
+})
+
+// 학년 및 과목에 100% 매칭되는 실제 성적 향상 스토리 동적 생성
+const matchedStories = computed(() => {
+  const isHigh = (props.grade || '').includes('고등')
+  const dong = props.regionDong
+  const sub = props.subjectName
+
+  if (isHigh) {
+    // 고등학생 전용 스토리
+    return [
+      {
+        student: `${dong} 고2 김○○ 학생`,
+        before: `${sub} 내신 4등급 (56점)`,
+        after: `내신 1등급 (96점)`,
+        period: '3개월',
+        review: `학원에서는 진도 따라가기 바빴는데, 선생님께서 ${dong} 학교 부교재 킬러 변형 문항과 서술형 채점 조건을 1:1로 집중 지도해 주신 덕분에 생애 첫 1등급을 받았습니다!`
+      },
+      {
+        student: `${dong} 고1 박○○ 학생`,
+        before: `중간고사 3등급`,
+        after: `기말고사 전교 3등 (1등급)`,
+        period: '4개월',
+        review: `고등학교 첫 ${sub} 시험에서 서술형 감점이 심해 좌절했었어요. 선생님과 1:1 오답 역추적 노트를 작성하며 출제 의도를 파악하는 훈련을 하니 시험 시간이 10분이나 남았습니다.`
+      },
+      {
+        student: `${dong} 고3 이○○ 학부모님`,
+        before: `${sub} 수능 모평 3등급`,
+        after: `수능 1등급 최저 충족`,
+        period: '6개월',
+        review: `수시 최저를 맞춰야 하는 절박한 상황에서 ${dong} 맞춤 1:1 과외를 시작했습니다. 취약한 킬러 유형만 집중 공략해 주셔서 원하는 명문대에 당당히 합격했습니다!`
+      }
+    ]
+  } else {
+    // 중학생 전용 스토리
+    return [
+      {
+        student: `${dong} 중2 이○○ 학생`,
+        before: `${sub} 68점 (C등급)`,
+        after: `중간·기말 98점 (A등급)`,
+        period: '3개월',
+        review: `중학교 첫 지필고사에서 ${sub} 시험이 너무 어려워 60점대였는데, 선생님께서 교과서 핵심 개념과 서술형 조건 영작/풀이법을 1:1로 짚어주셔서 98점으로 올랐어요!`
+      },
+      {
+        student: `${dong} 중3 최○○ 학생`,
+        before: `서술형 감점 다수 (75점)`,
+        after: `100점 만점 달성`,
+        period: '4개월',
+        review: `알면서도 계산 실수나 조건 누락으로 틀리던 나쁜 습관을 1:1 검토법으로 완벽히 고쳤습니다. 이번 기말고사에서 전교 1등 만점 맞고 고등 선행도 자신 있게 나가는 중입니다.`
+      },
+      {
+        student: `${dong} 중1 정○○ 학부모님`,
+        before: `자유학기 학습 습관 부족`,
+        after: `스스로 매일 2시간 복습`,
+        period: '5개월',
+        review: `중학교 입학 후 스마트폰만 해서 걱정이었는데, 전담 선생님께서 매일 스터디 플래너를 점검하고 ${sub} 기본기를 탄탄하게 잡아주셔서 자기주도학습 습관이 완전히 잡혔습니다.`
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.stories-section {
+  max-width: 1080px;
+  margin: 0 auto 50px;
+  padding: 0 16px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.section-badge {
+  display: inline-block;
+  font-size: clamp(0.78rem, 2vw, 0.88rem);
+  font-weight: 700;
+  color: var(--primary-color, #1e3a8a);
+  background: var(--badge-bg, rgba(30, 58, 138, 0.08));
+  padding: 5px 12px;
+  border-radius: 9999px;
+  margin-bottom: 8px;
+}
+
+.section-title {
+  font-size: clamp(1.3rem, 3.8vw, 1.95rem);
+  font-weight: 800;
+  color: var(--text-color, #1e293b);
+  letter-spacing: -0.6px;
+  word-break: keep-all;
+  line-height: 1.35;
+}
+
+.section-desc {
+  font-size: clamp(0.85rem, 2.2vw, 0.98rem);
+  color: #64748b;
+  margin-top: 6px;
+  word-break: keep-all;
+}
+
+.stories-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.story-card {
+  background: var(--bg-card, #ffffff);
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--card-radius, 14px);
+  padding: clamp(18px, 3vw, 24px);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.story-top {
+  margin-bottom: 12px;
+}
+
+.student-info {
+  display: block;
+  font-size: clamp(0.82rem, 2vw, 0.9rem);
+  font-weight: 800;
+  color: #475569;
+  margin-bottom: 6px;
+}
+
+.grade-jump {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.before {
+  font-size: 0.82rem;
+  color: #94a3b8;
+  text-decoration: line-through;
+}
+
+.arrow {
+  color: var(--accent-color, #d97706);
+  font-weight: 900;
+}
+
+.after {
+  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
+  font-weight: 900;
+  color: var(--primary-color, #1e3a8a);
+}
+
+.story-review {
+  font-size: clamp(0.82rem, 2vw, 0.92rem);
+  line-height: 1.6;
+  color: #334155;
+  margin-bottom: 14px;
+  word-break: keep-all;
+  flex-grow: 1;
+}
+
+.story-sub {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  border-top: 1px dashed var(--border-color, #e2e8f0);
+  padding-top: 10px;
+}
+
+@media (max-width: 820px) {
+  .stories-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>