first commit
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<section class="faq-section">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">궁금한 점을 풀어드립니다</span>
|
||||
<h2 class="section-title">{{ regionDong }} 1:1 과외 자주 묻는 질문</h2>
|
||||
<p class="section-desc">학부모님들께서 가장 많이 문의하시는 내용을 모았습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<div
|
||||
v-for="(faq, idx) in faqs"
|
||||
:key="idx"
|
||||
class="faq-item"
|
||||
:class="{ active: openIndex === idx }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="faq-question"
|
||||
@click="toggle(idx)"
|
||||
:aria-expanded="openIndex === idx"
|
||||
>
|
||||
<span class="q-icon">Q</span>
|
||||
<span class="q-text">{{ faq.q }}</span>
|
||||
<span class="toggle-icon">{{ openIndex === idx ? '▲' : '▼' }}</span>
|
||||
</button>
|
||||
<div v-show="openIndex === idx" class="faq-answer">
|
||||
<span class="a-icon">A</span>
|
||||
<p class="a-text">{{ faq.a }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
regionDong: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
grade: {
|
||||
type: String,
|
||||
default: '중학생'
|
||||
},
|
||||
subjectName: {
|
||||
type: String,
|
||||
default: '영어'
|
||||
}
|
||||
})
|
||||
|
||||
const openIndex = ref(0)
|
||||
|
||||
const toggle = (idx) => {
|
||||
openIndex.value = openIndex.value === idx ? -1 : idx
|
||||
}
|
||||
|
||||
const faqs = computed(() => [
|
||||
{
|
||||
q: `${props.regionDong} ${props.grade} ${props.subjectName} 방문 과외와 온라인 화상 과외 중 어떤 것이 가능한가요?`,
|
||||
a: `학생과 학부모님의 선호에 따라 100% 자택 방문 대면 과외 또는 실시간 쌍방향 비대면 화상 과외 중 자유롭게 선택하실 수 있습니다. ${props.regionDong} 전 지역 방문 수업이 가능합니다.`
|
||||
},
|
||||
{
|
||||
q: `${props.grade} ${props.subjectName} 전문 선생님이 학생과 잘 맞지 않으면 교체 가능한가요?`,
|
||||
a: '네, 1회 무료 모의수업을 통해 사전에 호흡을 맞추며, 정규 수업 시작 후에도 학생의 성향이나 요청에 따라 추가 비용 없이 100% 무료 교체 및 환불 규정을 보장합니다.'
|
||||
},
|
||||
{
|
||||
q: `${props.grade} ${props.subjectName} 과외 수업 비용은 어떻게 되나요?`,
|
||||
a: `${props.grade} 내신 단계, 주당 수업 횟수, 수업 시간(1회 60분/90분/120분)에 따라 표준 교육청 가이드라인에 맞춘 투명한 정찰제로 운영됩니다. 무료 상담 시 상세 견적표를 안내해 드립니다.`
|
||||
},
|
||||
{
|
||||
q: `${props.regionDong} 학교 중간·기말고사 직전 단기 ${props.subjectName} 족보 클리닉도 가능한가요?`,
|
||||
a: `네, 시험 3~4주 전 학교별 기출 족보 풀이 및 서술형 배점 방어를 위한 ${props.grade} ${props.subjectName} 단기 속성 킬러 클리닉 프로그램도 상시 운영 중입니다.`
|
||||
},
|
||||
{
|
||||
q: `${props.subjectName} 외에 다른 과목도 함께 상담받을 수 있나요?`,
|
||||
a: `${props.subjectName} 집중 신청은 물론, 국영수 또는 수탐 복합 패키지로 맞춤 구성하여 전 과목 플래너 관리와 함께 시간표를 편성하실 수 있습니다.`
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.faq-section {
|
||||
max-width: 860px;
|
||||
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;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: var(--bg-card, #ffffff);
|
||||
border: 1px solid var(--border-color, #e2e8f0);
|
||||
border-radius: var(--card-radius, 12px);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: clamp(14px, 3vw, 18px);
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: clamp(0.9rem, 2.2vw, 1.02rem);
|
||||
font-weight: 800;
|
||||
color: var(--text-color, #0f172a);
|
||||
}
|
||||
|
||||
.q-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 6px;
|
||||
background: var(--primary-color, #1e3a8a);
|
||||
color: #ffffff;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.q-text {
|
||||
flex-grow: 1;
|
||||
word-break: keep-all;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 0 clamp(14px, 3vw, 18px) clamp(16px, 3vw, 20px);
|
||||
background: #f8fafc;
|
||||
border-top: 1px solid var(--border-color, #f1f5f9);
|
||||
}
|
||||
|
||||
.a-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 6px;
|
||||
background: var(--accent-color, #d97706);
|
||||
color: #ffffff;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.a-text {
|
||||
font-size: clamp(0.82rem, 2vw, 0.92rem);
|
||||
line-height: 1.65;
|
||||
color: #334155;
|
||||
word-break: keep-all;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user