diff --git a/busan/components/FaqAccordion.vue b/busan/components/FaqAccordion.vue index ac40763..8fdf5a5 100644 --- a/busan/components/FaqAccordion.vue +++ b/busan/components/FaqAccordion.vue @@ -2,38 +2,33 @@
궁금한 점을 풀어드립니다 -

{{ regionDong }} 1:1 과외 자주 묻는 질문

+

{{ shortSido }} {{ gradeShort }} {{ subjectName }} 과외 · {{ regionDong }} 1:1 과외 자주 묻는 질문

학부모님들께서 가장 많이 문의하시는 내용을 모았습니다.

-
- -
+ ▼ + +
A

{{ faq.a }}

-
+
@@ -146,6 +143,11 @@ const faqs = computed(() => [ font-size: clamp(0.9rem, 2.2vw, 1.02rem); font-weight: 800; color: var(--text-color, #0f172a); + list-style: none; +} + +.faq-question::-webkit-details-marker { + display: none; } .q-icon { @@ -172,6 +174,11 @@ const faqs = computed(() => [ font-size: 0.8rem; color: #94a3b8; flex-shrink: 0; + transition: transform 0.2s ease; +} + +details[open] .toggle-icon { + transform: rotate(180deg); } .faq-answer { diff --git a/busan/components/FastConsultFocus.vue b/busan/components/FastConsultFocus.vue index cbfc315..5212416 100644 --- a/busan/components/FastConsultFocus.vue +++ b/busan/components/FastConsultFocus.vue @@ -4,7 +4,7 @@
{{ isElementary ? '초등 맞춤 집중 케어' : `${displayGrade} 실전 시험 케어` }}

- {{ regionDong }} {{ displayGrade }} {{ displaySubject }}과외 + {{ shortSido ? `${shortSido} ` : '' }}{{ regionDong }} {{ displayGrade }} {{ displaySubject }}과외 5대 핵심 솔루션

@@ -12,7 +12,7 @@

- +
-
- - STEP 0{{ idx + 1 }} -
- -
-
{{ item.tag }}
- {{ item.title }} -

{{ item.desc }}

- + +
+
{{ item.tag }}
+

{{ item.title }}

+

{{ item.desc }}

+ +
+
@@ -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; } } diff --git a/busan/components/HeroBanner.vue b/busan/components/HeroBanner.vue index 8e53c36..4bfab00 100644 --- a/busan/components/HeroBanner.vue +++ b/busan/components/HeroBanner.vue @@ -1,5 +1,5 @@ diff --git a/busan/components/SubjectCarousel.vue b/busan/components/SubjectCarousel.vue index 6e45f58..7f2b517 100644 --- a/busan/components/SubjectCarousel.vue +++ b/busan/components/SubjectCarousel.vue @@ -17,8 +17,8 @@

- -
+ + @@ -87,21 +88,21 @@