🧩 Vue 2로 배우는 프론트엔드 기초

✅ 타겟 구조

• 2단 그리드 카드형 레이아웃
• 각 카드에:
  • 강사 이름 + 직렬
  • 타이틀 (굵게)
  • 부제 설명
  • 우측 프로필 이미지
• 둥근 배경 카드 스타일

📁 컴포넌트 구성

components/
├── TeacherPromoCard.vue       ← 카드 1개
├── TeacherPromoSection.vue    ← 전체 섹션
views/
├── HomePage.vue               ← 삽입

✅ 1. TeacherPromoCard.vue

<template>
  <div class="promo-card">
    <div class="text-area">
      <h4 class="title">{{ title }}</h4>
      <p class="desc">{{ description }}</p>
      <p class="subject">{{ subject }} {{ name }}</p>
    </div>
    <img class="profile-img" :src="img" :alt="name" />
  </div>
</template>

<script>
export default {
  name: "TeacherPromoCard",
  props: {
    title: String,
    description: String,
    name: String,
    subject: String,
    img: String,
  },
};
</script>

<style scoped>
.promo-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: 0.2s ease;
}

.promo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.text-area {
  flex: 1;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #111;
}

.desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.subject {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.profile-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  margin-left: 16px;
}
</style>

✅ 2. TeacherPromoSection.vue

<template>
  <section class="teacher-promo-section">
    <h3 class="section-title">지금 주목할 선생님 기획전</h3>
    <div class="grid">
      <TeacherPromoCard v-for="(card, i) in promoList" :key="i" v-bind="card" />
    </div>
  </section>
</template>

<script>
import TeacherPromoCard from "./TeacherPromoCard.vue";

export default {
  components: { TeacherPromoCard },
  data() {
    return {
      promoList: [
        {
          title: "흐름은 새롭게, 본질은 그대로\n2026 전효진 커리큘럼",
          description: "흐름은 새롭게, 본질은 그대로\n2026 전효진 커리큘럼",
          name: "전효진",
          subject: "행정법",
          img: "https://img.megagong.net/profphoto/gong/wjsgywls1/main_intro2.png",
        },
        {
          title: "간호직 최신 이슈 총정리\nNEW 월간 송아름",
          description: "최신 이슈를 보면 시험문제가 보입니다.",
          name: "송아름",
          subject: "지역사회간호",
          img: "https://img.megagong.net/profphoto/gong/megapassnurse/main_intro2.png",
        },
        {
          title: "2026 박상민\n형사정책 개념 완성",
          description: "더 견고하게 만든 심화완성",
          name: "박상민",
          subject: "형사정책",
          img: "https://img.megagong.net/profphoto/gong/p3672303/main_intro2.png",
        },
        {
          title: "경선식 공무원 영단어\n초스피드 암기비법",
          description: "시험에 맞는 어휘들 다시 태어났다!",
          name: "경선식",
          subject: "영어",
          img: "https://img.megagong.net/profphoto/gong/incredvoc/main_intro2.png",
        },
        {
          title: "VocaGram 하프모고\n박수연 영어",
          description: "하프 모의고사로 문제풀이 집중력 UP",
          name: "박수연",
          subject: "영어",
          img: "https://img.megagong.net/profphoto/gong/sooyeon/main_intro2.png",
        },
        {
          title: "2026 직업상담심리학\nNext Road 커리큘럼",
          description: "다음 도전자도 합격입니다.",
          name: "김형준",
          subject: "직업상담심리학",
          img: "https://img.megagong.net/profphoto/gong/pt1969/main_intro2.png",
        },
      ],
    };
  },
};
</script>

<style scoped>
.teacher-promo-section {
  margin-top: 60px;
  padding: 0 20px;
  width: 790px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
</style>

✅ 3. HomePage.vue에 삽입

import TeacherPromoSection from "@/components/TeacherPromoSection.vue";

export default {
  components: {
    ...,
    TeacherPromoSection,
  },
};

<!-- 기존 구조 아래에 추가 -->
<MainTabs />
<TeacherPromoSection />

🎉 결과

• "지금 주목할 선생님 기획전" 레이아웃이 스크린샷과 동일한 구조로 나옵니다
• 카드들은 grid로 2열 정렬되고, 반응형 대응은 다음 강에서 처리 가능합니다

🎯 다음 과제

아래 기능을 추가해보세요!

1. src\components\TeacherPromoSection.vue 에서 받은 선생님 기획전 데이터의 title이나 description의 값 \n을 인식해서 src\components\TeacherPromoCard.vue 컴포넌트 내부에서 줄내림이 되도록 처리
2. 메인 전체가 현재 맑은 고딕체로 나오는데 Noto Sans KR로 나올 수 있도록 base.scss 내부 수정

GitHub - heroyooi/vue2-megagong at ch4